/* ============================================================
   app.css  v2 — Mobile-first responsive
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#1A56DB;--blue-dk:#1040B0;--blue-lt:#EBF2FF;
  --green:#16A34A;--green-lt:#F0FDF4;
  --red:#DC2626;--red-lt:#FEF2F2;
  --yellow:#D97706;--yellow-lt:#FFFBEB;
  --purple:#7C3AED;--purple-lt:#F5F3FF;
  --wa:#25D366;--wa-dk:#1ebe57;
  --gray-1:#0F172A;--gray-2:#334155;--gray-3:#64748B;
  --gray-4:#CBD5E1;--gray-5:#F1F5F9;--gray-6:#F8FAFC;
  --white:#FFFFFF;
  --sb-w:252px;--tb-h:62px;
  --r:8px;--r-lg:12px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.05);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
}
html{font-size:15px}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--gray-6);color:var(--gray-1);min-height:100vh}
body.role-admin{--accent:var(--blue)}
body.role-client{--accent:var(--green)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sb-w);background:var(--gray-1);display:block;z-index:200;transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:scroll;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08);min-height:68px}
.sb-logo{width:36px;height:36px;background:var(--accent,var(--blue));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;flex-shrink:0}
.sb-logo-img{max-height:38px;max-width:130px;object-fit:contain;flex-shrink:0;border-radius:4px}
.sb-logo-text{width:36px;height:36px;background:var(--accent,var(--blue));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;flex-shrink:0}
.sb-name{font-size:13px;font-weight:700;color:#fff;flex:1;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-close{background:none;border:none;color:rgba(255,255,255,.4);font-size:18px;cursor:pointer;display:none;padding:2px;flex-shrink:0}
.sb-search-wrap{position:relative;padding:10px 12px 6px;flex-shrink:0}
.sb-search-icon{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);font-size:13px;pointer-events:none;line-height:1}
.sb-search{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 10px 8px 30px;color:#fff;font-size:12.5px;outline:none;box-sizing:border-box;transition:background .15s,border-color .15s;caret-color:#fff}
.sb-search::placeholder{color:rgba(255,255,255,.35)}
.sb-search:focus{background:rgba(255,255,255,.15);border-color:rgba(99,179,237,.6);box-shadow:0 0 0 2px rgba(99,179,237,.15)}
.sb-nav{list-style:none;padding:4px 0 60px}
.sb-link{display:flex;align-items:center;gap:10px;padding:10px 16px;color:rgba(255,255,255,.55);font-size:13.5px;font-weight:500;transition:all .15s;border-left:3px solid transparent;text-decoration:none}
.sb-link:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.sb-link.active{background:rgba(26,86,219,.22);color:#fff;border-left-color:var(--accent,var(--blue));font-weight:700}
.sb-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.sb-user{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.15);position:sticky;bottom:0;z-index:2}
.sb-avatar{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.sb-avatar.client-av{background:var(--green)}
.sb-uinfo{flex:1;min-width:0}
.sb-uname{display:block;font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-urole{font-size:10px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em}
.sb-logout{color:rgba(255,255,255,.35);font-size:18px;transition:color .15s;text-decoration:none;flex-shrink:0}
.sb-logout:hover{color:var(--red)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190}

/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:var(--sb-w);right:0;height:var(--tb-h);background:#fff;border-bottom:1px solid var(--gray-5);display:flex;align-items:center;gap:14px;padding:0 22px;z-index:100;box-shadow:var(--shadow)}
.hamburger{background:none;border:none;cursor:pointer;display:none;flex-direction:column;gap:5px;padding:4px;flex-shrink:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--gray-3);border-radius:2px}
.topbar-title{font-size:16px;font-weight:700;flex:1;color:var(--gray-1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;flex-shrink:0}

/* ── MAIN ─────────────────────────────────────────────────── */
.main{margin-left:var(--sb-w);padding-top:var(--tb-h);min-height:100vh;display:flex;flex-direction:column}
.content{padding:26px;flex:1}

/* ── CLIENT FOOTER ────────────────────────────────────────── */
.client-footer{background:#fff;border-top:1px solid var(--gray-5);padding:14px 26px;text-align:center;font-size:12px;color:var(--gray-3);margin-left:var(--sb-w);display:flex;align-items:center;justify-content:center;}
.auth-footer{position:fixed;bottom:0;left:0;right:0;text-align:center;padding:10px;font-size:12px;color:rgba(255,255,255,.7);background:transparent;}

/* ── AUTH ─────────────────────────────────────────────────── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1040B0 0%,#16A34A 100%);padding:24px}
.auth-box{background:#fff;border-radius:16px;padding:40px 36px;width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.auth-logo{text-align:center;margin-bottom:24px}
.auth-brand{font-size:26px;font-weight:800;color:var(--blue)}
.auth-sub{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-3);margin-top:4px}
.auth-title{font-size:20px;font-weight:700;margin-bottom:20px;text-align:center;color:var(--gray-1)}

/* ── FORM ─────────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-3);margin-bottom:5px}
.form-control{width:100%;padding:10px 13px;border:1.5px solid var(--gray-4);border-radius:var(--r);font-family:inherit;font-size:14px;color:var(--gray-1);background:#fff;outline:none;transition:border-color .18s,box-shadow .18s}
.form-control:focus{border-color:var(--accent,var(--blue));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,var(--blue)) 15%,transparent)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:90px}
input[type="file"].form-control{padding:8px 12px;cursor:pointer}
.form-hint{font-size:11px;color:var(--gray-3);margin-top:4px;line-height:1.5}
.form-row{display:flex;gap:14px}
.form-row .form-group{flex:1;min-width:0}
.form-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.form-check input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent,var(--blue));flex-shrink:0}

/* ── TOGGLE SWITCH ────────────────────────────────────────── */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;background:var(--gray-6);border-radius:var(--r);border:1px solid var(--gray-5)}
.switch{position:relative;display:inline-block;width:48px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--gray-4);border-radius:26px;transition:.3s}
.slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.switch input:checked+.slider{background:var(--green)}
.switch input:checked+.slider:before{transform:translateX(22px)}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border:none;border-radius:var(--r);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .18s;white-space:nowrap;line-height:1.3}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dk);box-shadow:0 4px 12px rgba(26,86,219,.3);color:#fff}
.btn-success{background:var(--green);color:#fff}
.btn-success:hover{background:#15803d;color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#b91c1c;color:#fff}
.btn-warning{background:var(--yellow);color:#fff}
.btn-warning:hover{background:#b45309;color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--gray-4);color:var(--gray-2)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-lt)}
.btn-ghost{background:transparent;color:var(--gray-3)}
.btn-ghost:hover{background:var(--gray-5);color:var(--gray-1)}
.btn-wa{background:var(--wa);color:#fff !important}
.btn-wa:hover{background:var(--wa-dk);color:#fff !important;box-shadow:0 4px 12px rgba(37,211,102,.3)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-lg{padding:12px 24px;font-size:15px}
.btn-full{width:100%;justify-content:center}
.btn-icon{padding:8px;border-radius:var(--r)}

/* ── CARDS ────────────────────────────────────────────────── */
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid var(--gray-5);margin-bottom:20px}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-5);gap:12px;flex-wrap:wrap}
.card-title{font-size:14px;font-weight:700;color:var(--gray-1)}
.card-body{padding:20px}
.card-footer{padding:14px 20px;border-top:1px solid var(--gray-5);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* ── STATS ────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:var(--r-lg);padding:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);border:1px solid var(--gray-5)}
.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.stat-val{font-size:22px;font-weight:800;color:var(--gray-1);line-height:1}
.stat-lbl{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-3);margin-top:3px}
.stat-trend{font-size:11px;margin-top:3px;font-weight:600}

/* ── TABLES ───────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;font-size:13px;min-width:500px}
.data-table thead th{background:var(--gray-6);padding:10px 14px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-3);border-bottom:2px solid var(--gray-5);white-space:nowrap}
.data-table tbody td{padding:12px 14px;border-bottom:1px solid var(--gray-5);color:var(--gray-2);vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--gray-6)}
.td-primary{font-weight:700;color:var(--gray-1)}
.td-mono{font-family:monospace;font-size:12px}
.td-actions{display:flex;gap:4px;flex-wrap:wrap}

/* ── BADGES ───────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.badge-active{background:var(--green-lt);color:var(--green)}
.badge-pending{background:var(--yellow-lt);color:var(--yellow)}
.badge-suspended,.badge-cancelled,.badge-terminated{background:var(--red-lt);color:var(--red)}
.badge-warning{background:var(--yellow-lt);color:var(--yellow)}
.badge-info{background:var(--blue-lt);color:var(--blue)}
.badge-purple{background:var(--purple-lt);color:var(--purple)}

/* ── ALERTS ───────────────────────────────────────────────── */
.alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);font-size:13px;font-weight:600;margin-bottom:18px;animation:fadeIn .3s}
.alert-success{background:var(--green-lt);color:var(--green);border:1px solid #bbf7d0}
.alert-error{background:var(--red-lt);color:var(--red);border:1px solid #fecaca}
.alert-warning{background:var(--yellow-lt);color:var(--yellow);border:1px solid #fde68a}
.alert-info{background:var(--blue-lt);color:var(--blue);border:1px solid #bfdbfe}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── PAGINATION ───────────────────────────────────────────── */
.pagination{display:flex;gap:4px;justify-content:center;padding:16px 0 0;flex-wrap:wrap}
.pg-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--gray-4);border-radius:6px;font-size:13px;font-weight:600;color:var(--gray-2);text-decoration:none;background:#fff;transition:all .15s}
.pg-btn:hover,.pg-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;text-decoration:none}

/* ── MODAL ────────────────────────────────────────────────── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:var(--r-lg);width:100%;max-width:520px;box-shadow:0 20px 60px rgba(0,0,0,.2);margin:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-5)}
.modal-title{font-size:15px;font-weight:700}
.modal-close{background:none;border:none;font-size:20px;color:var(--gray-3);cursor:pointer;padding:2px;line-height:1}
.modal-body{padding:20px;max-height:70vh;overflow-y:auto}
.modal-footer{padding:14px 20px;border-top:1px solid var(--gray-5);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* ── MISC ─────────────────────────────────────────────────── */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.section-title{font-size:20px;font-weight:800;color:var(--gray-1)}
.section-sub{font-size:13px;color:var(--gray-3);margin-top:2px}
.divider{border:none;border-top:1px solid var(--gray-5);margin:20px 0}
.empty-state{text-align:center;padding:48px 20px;color:var(--gray-3)}
.empty-icon{font-size:44px;margin-bottom:10px}
.empty-state p{font-size:14px}
.text-green{color:var(--green);font-weight:700}
.text-red{color:var(--red);font-weight:700}
.text-blue{color:var(--blue)}
.text-muted{color:var(--gray-3)}
.text-sm{font-size:12px}
.fw-700{font-weight:700}
.fw-800{font-weight:800}

/* ── PLAN CARDS ───────────────────────────────────────────── */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-bottom:24px}
.plan-card{background:#fff;border-radius:var(--r-lg);border:2px solid var(--gray-5);padding:24px;position:relative;transition:all .2s}
.plan-card:hover{border-color:var(--blue);box-shadow:var(--shadow-md)}
.plan-card.featured{border-color:var(--blue)}
.plan-card .featured-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:3px 12px;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.plan-name{font-size:17px;font-weight:800;margin-bottom:6px;color:var(--gray-1)}
.plan-price{font-size:32px;font-weight:800;color:var(--gray-1);line-height:1}
.plan-period{font-size:13px;color:var(--gray-3)}
.plan-features{list-style:none;margin:16px 0;display:flex;flex-direction:column;gap:7px}
.plan-features li{font-size:13px;color:var(--gray-2);display:flex;align-items:flex-start;gap:7px}
.plan-features li::before{content:"✓";color:var(--green);font-weight:700;flex-shrink:0;margin-top:1px}

/* ── INVOICE ──────────────────────────────────────────────── */
.invoice-wrap{background:#fff;max-width:794px;margin:0 auto;padding:48px;border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.invoice-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:36px;gap:20px}
.invoice-table{width:100%;border-collapse:collapse;margin-bottom:0}
.invoice-table th{background:var(--blue);color:#fff;padding:10px 14px;text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.invoice-table th:last-child{text-align:right}
.invoice-table td{padding:11px 14px;border-bottom:1px solid var(--gray-5);font-size:13px}
.invoice-table td:last-child{text-align:right;font-weight:700}
.invoice-totals{margin-left:auto;width:280px;margin-top:0}
.invoice-totals tr td{padding:7px 14px;font-size:13px}
.invoice-totals tr td:first-child{color:var(--gray-3)}
.invoice-totals tr td:last-child{text-align:right;font-weight:700}
.invoice-totals .grand-total td{background:var(--blue);color:#fff !important;font-size:16px;font-weight:800}

/* ── TICKET ───────────────────────────────────────────────── */
.ticket-thread{display:flex;flex-direction:column;gap:16px}
.ticket-msg{border-radius:var(--r-lg);padding:16px 18px;max-width:85%}
.ticket-msg.client-msg{background:var(--blue-lt);border:1px solid #bfdbfe;align-self:flex-start}
.ticket-msg.admin-msg{background:var(--green-lt);border:1px solid #bbf7d0;align-self:flex-end}
.ticket-meta{font-size:11px;color:var(--gray-3);margin-bottom:6px;font-weight:600}
.ticket-text{font-size:14px;line-height:1.7;color:var(--gray-1);white-space:pre-wrap}

/* ── TOAST ────────────────────────────────────────────────── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--gray-1);color:#fff;padding:10px 22px;border-radius:8px;font-size:13px;font-weight:600;z-index:999;transition:transform .3s;pointer-events:none;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ── RESPONSIVE  900px ────────────────────────────────────── */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none;box-shadow:4px 0 24px rgba(0,0,0,.2)}
  .sb-close{display:block !important}
  .sb-overlay.open{display:block}
  .hamburger{display:flex}
  .topbar{left:0}
  .main{margin-left:0}
  .client-footer{margin-left:0;padding:12px 16px}
  .content{padding:18px 14px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .form-row{flex-direction:column;gap:0}
  .invoice-wrap{padding:24px 16px}
  .invoice-header{flex-direction:column;gap:14px}
  .invoice-totals{width:100%}
  .plans-grid{grid-template-columns:1fr 1fr}
  .topbar-actions .btn{padding:7px 12px;font-size:12px}
  /* Grid layouts to single column */
  div[style*="grid-template-columns:1fr 1fr"]{display:block !important}
  div[style*="grid-template-columns:3fr 1fr"]{display:block !important}
}

/* ── RESPONSIVE  600px ────────────────────────────────────── */
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr}
  /* Card table → stacked rows */
  .data-table{min-width:unset}
  .data-table thead{display:none}
  .data-table tbody td{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:none;font-size:13px}
  .data-table tbody td::before{content:attr(data-label);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-3);min-width:90px;flex-shrink:0}
  .data-table tbody tr{display:block;border:1px solid var(--gray-5);border-radius:var(--r);margin-bottom:10px;background:#fff}
  .data-table tbody tr:hover{background:#fff}
  .td-actions{justify-content:flex-end}
  /* Auth box */
  .auth-box{padding:28px 18px}
  /* Topbar: hide extra action buttons on small screens */
  .topbar-actions .btn:not(:first-child):not(:last-child){display:none}
  /* Invoice */
  .invoice-wrap{padding:16px 12px}
  .invoice-table th,.invoice-table td{padding:8px 10px;font-size:12px}
  /* Modal */
  .modal{margin:8px}
  .modal-body{max-height:60vh}
  /* Toggle rows */
  .toggle-row{flex-wrap:wrap;gap:10px}
  /* Section head */
  .section-head{flex-direction:column}
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print{
  .sidebar,.topbar,.topbar-actions,.btn,.client-footer,#pay-section{display:none !important}
  .main{margin-left:0;padding-top:0}
  .content{padding:0}
  .invoice-wrap{box-shadow:none;padding:20px;max-width:100%}
  .card{box-shadow:none;border:1px solid #ddd}
}

/* ── NOTIFICATIONS & ANNOUNCEMENTS ───────────────────────── */
.bell-btn:hover{background:var(--gray-4) !important;transform:none}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.announcement-bar{animation:slideDown .4s ease}
.notif-list{display:flex;flex-direction:column;gap:0}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-bottom:1px solid var(--gray-5);transition:background .15s;text-decoration:none;color:inherit}
.notif-item:hover{background:var(--gray-6);text-decoration:none}
.notif-item.unread{background:var(--blue-lt)}
.notif-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.notif-body{flex:1;min-width:0}
.notif-title{font-weight:700;font-size:13px;color:var(--gray-1)}
.notif-msg{font-size:12px;color:var(--gray-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-time{font-size:11px;color:var(--gray-3);white-space:nowrap;flex-shrink:0}
/* ── KB & BLOG ───────────────────────────────────────────── */
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-bottom:24px}
.kb-card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--gray-5);padding:20px;transition:all .2s;text-decoration:none;color:inherit;display:block}
.kb-card:hover{border-color:var(--blue);box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none;color:inherit}
.kb-icon{font-size:32px;margin-bottom:10px}
.kb-title{font-size:15px;font-weight:700;color:var(--gray-1);margin-bottom:4px}
.kb-sub{font-size:12px;color:var(--gray-3)}
.kb-article{background:#fff;border-radius:var(--r-lg);border:1px solid var(--gray-5);padding:24px;margin-bottom:14px;display:flex;gap:16px;align-items:flex-start}
.kb-article:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.blog-card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--gray-5);overflow:hidden;transition:all .2s;text-decoration:none;color:inherit;display:block}
.blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none}
.blog-cover{width:100%;height:180px;object-fit:cover;background:var(--gray-5);display:block}
.blog-body{padding:18px}
.blog-title{font-size:16px;font-weight:700;color:var(--gray-1);margin-bottom:6px;line-height:1.4}
.blog-excerpt{font-size:13px;color:var(--gray-3);line-height:1.6}
/* ── SITE MONITOR ────────────────────────────────────────── */
.monitor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.monitor-card{background:#fff;border-radius:var(--r-lg);border:2px solid var(--gray-5);padding:18px;position:relative}
.monitor-card.up{border-color:#bbf7d0}
.monitor-card.down{border-color:#fecaca}
.monitor-card.unknown{border-color:var(--gray-4)}
.monitor-status{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.monitor-status.up{background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.2)}
.monitor-status.down{background:var(--red);box-shadow:0 0 0 4px rgba(220,38,38,.2)}
.monitor-status.unknown{background:var(--gray-3)}
.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}