:root, [data-theme="dark"] {
    --bg: #0d1117;
    --bg-2: #161b26;
    --bg-3: #1c2333;
    --card: #161b26;
    --border: #252d3d;
    --text: #e6e9f0;
    --text-2: #8b93a7;
    --accent: #6c5ce7;
    --accent-2: #a29bfe;
    --accent-grad: linear-gradient(135deg, #6c5ce7, #00b4d8);
    --green: #2ecc71;
    --red: #ff5e57;
    --yellow: #fdcb6e;
    --blue: #00b4d8;
    --shadow: 0 8px 30px rgba(0,0,0,.35);
    --input-bg: #0d1117;
  }
  [data-theme="light"] {
    --bg: #f2f4f8;
    --bg-2: #ffffff;
    --bg-3: #eef0f6;
    --card: #ffffff;
    --border: #e3e7ef;
    --text: #1c2333;
    --text-2: #6b7280;
    --shadow: 0 8px 30px rgba(30,40,90,.08);
    --input-bg: #f2f4f8;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    background: var(--bg); color: var(--text);
    transition: background .3s, color .3s;
  }
  .hidden { display:none !important; }

  /* ===================== AUTH PAGES ===================== */
  .auth-wrap {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(108,92,231,.25), transparent 60%),
                radial-gradient(1000px 500px at 90% 90%, rgba(0,180,216,.2), transparent 60%),
                var(--bg);
    padding:20px;
  }
  .auth-card {
    width:100%; max-width:420px; background:var(--card); border:1px solid var(--border);
    border-radius:18px; padding:40px 36px; box-shadow:var(--shadow);
    animation: fadeUp .5s ease;
  }
  @keyframes fadeUp { from {opacity:0; transform:translateY(16px);} to {opacity:1; transform:none;} }
  .logo { display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:8px; }
  .logo-badge {
    width:46px; height:46px; border-radius:12px; background:var(--accent-grad);
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:20px;
    box-shadow:0 6px 20px rgba(108,92,231,.4);
  }
  .logo span { font-size:22px; font-weight:700; letter-spacing:.5px; }
  .logo span b { background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .auth-sub { text-align:center; color:var(--text-2); font-size:14px; margin-bottom:28px; }
  .field { margin-bottom:16px; }
  .field label { display:block; font-size:13px; color:var(--text-2); margin-bottom:6px; font-weight:600; }
  .field input {
    width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
    background:var(--input-bg); color:var(--text); font-size:14px; outline:none; transition:border .2s, box-shadow .2s;
  }
  .field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,92,231,.2); }
  .row-between { display:flex; justify-content:space-between; align-items:center; margin:4px 0 20px; font-size:13px; }
  .row-between label { color:var(--text-2); display:flex; gap:6px; align-items:center; cursor:pointer; }
  a.link { color:var(--accent-2); text-decoration:none; font-weight:600; }
  a.link:hover { text-decoration:underline; }
  .btn {
    width:100%; padding:13px; border:none; border-radius:10px; background:var(--accent-grad);
    color:#fff; font-size:15px; font-weight:700; cursor:pointer; transition:transform .15s, box-shadow .15s;
  }
  .btn:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(108,92,231,.45); }
  .alert {
    padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:16px;
  }
  .alert.error { background:rgba(255,94,87,.12); color:var(--red); border:1px solid rgba(255,94,87,.3); }
  .alert.success { background:rgba(46,204,113,.12); color:var(--green); border:1px solid rgba(46,204,113,.3); }
  .auth-foot { text-align:center; margin-top:22px; font-size:13px; color:var(--text-2); }
  .demo-hint { text-align:center; margin-top:14px; font-size:12px; color:var(--text-2); background:var(--bg-3); border-radius:8px; padding:8px; }
  .google-btn {
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--input-bg);
    color:var(--text); font-size:14px; font-weight:600; text-decoration:none; margin-bottom:18px;
  }
  .google-btn:hover { border-color:var(--accent); background:var(--bg-3); }
  .or-sep { display:flex; align-items:center; gap:12px; margin-bottom:18px; color:var(--text-2); font-size:12px; }
  .or-sep::before, .or-sep::after { content:""; flex:1; height:1px; background:var(--border); }

  /* ===================== APP LAYOUT ===================== */
  .app { display:flex; min-height:100vh; }
  .sidebar {
    width:250px; background:var(--bg-2); border-right:1px solid var(--border);
    display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:50;
    transition:transform .25s ease;
  }
  .sidebar .logo { justify-content:flex-start; padding:22px 20px 18px; margin:0; border-bottom:1px solid var(--border); }
  .nav { flex:1; padding:14px 12px; overflow-y:auto; }
  .nav-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-2); padding:12px 12px 6px; }
  .nav a {
    display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
    color:var(--text-2); text-decoration:none; font-size:14px; font-weight:600; margin-bottom:2px;
    transition:background .15s, color .15s;
  }
  .nav a svg { width:19px; height:19px; flex-shrink:0; }
  .nav a:hover { background:var(--bg-3); color:var(--text); }
  .nav a.active { background:linear-gradient(135deg, rgba(108,92,231,.2), rgba(0,180,216,.12)); color:var(--accent-2); }
  .nav a .badge-n {
    margin-left:auto; background:var(--accent); color:#fff; font-size:11px; padding:2px 8px; border-radius:20px;
  }
  .sidebar-foot { padding:14px 12px; border-top:1px solid var(--border); }
  .user-mini { display:flex; align-items:center; gap:10px; padding:8px 10px; }
  .avatar {
    width:36px; height:36px; border-radius:50%; background:var(--accent-grad);
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px;
  }
  .user-mini .um-name { font-size:13px; font-weight:700; }
  .user-mini .um-role { font-size:11px; color:var(--text-2); }
  .logout-btn {
    margin-left:auto; background:none; border:none; color:var(--text-2); cursor:pointer; padding:6px; border-radius:8px;
  }
  .logout-btn:hover { color:var(--red); background:var(--bg-3); }

  .main { flex:1; margin-left:250px; display:flex; flex-direction:column; min-width:0; }
  .topbar {
    height:64px; display:flex; align-items:center; gap:14px; padding:0 24px;
    background:var(--bg-2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40;
  }
  .burger { display:none; background:none; border:none; color:var(--text); cursor:pointer; }
  .page-title-top { font-size:17px; font-weight:700; }
  .topbar .spacer { flex:1; }
  .search {
    display:flex; align-items:center; gap:8px; background:var(--input-bg); border:1px solid var(--border);
    border-radius:10px; padding:8px 12px; width:260px;
  }
  .search input { border:none; background:none; outline:none; color:var(--text); font-size:13px; width:100%; }
  .icon-btn {
    background:var(--input-bg); border:1px solid var(--border); color:var(--text-2); width:38px; height:38px;
    border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative;
  }
  .icon-btn:hover { color:var(--text); border-color:var(--accent); }
  .icon-btn .dot { position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--red); }

  /* balance text (topbar) */
  .balance-txt { font-size:13px; color:var(--text-2); text-decoration:none; white-space:nowrap; }
  .balance-txt b { color:var(--text); }
  .balance-txt:hover { color:var(--accent-2); }

  /* topup cards */
  .topup-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .tu-card {
    border:1.5px solid var(--tu, var(--border)); border-radius:14px; padding:20px;
    background:var(--input-bg); display:flex; flex-direction:column;
  }
  .tu-head { display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:700; }
  .tu-badge { background:var(--tu); color:#fff; font-size:12px; padding:3px 12px; border-radius:20px; }
  .tu-pay { font-size:21px; font-weight:800; margin:10px 0 6px; }
  .tu-get { font-size:13px; color:var(--text-2); margin-bottom:12px; }
  .tu-get b { color:var(--text); }
  .tu-get em { color:var(--green); font-style:normal; font-weight:700; }
  .tu-list { list-style:none; margin:0 0 16px; padding:0; }
  .tu-list li { font-size:12.5px; color:var(--text-2); padding:4px 0; }
  .tu-list li::before { content:"✓ "; color:var(--green); font-weight:800; }
  .tu-buy {
    margin-top:auto; width:100%; padding:11px; border:none; border-radius:10px; cursor:pointer;
    background:var(--text); color:var(--bg); font-size:13.5px; font-weight:700;
  }
  .tu-buy:hover { opacity:.85; }
  @media (max-width:900px) { .topup-grid { grid-template-columns:1fr; } .balance-txt { display:none; } }

  /* admin bits */
  .adm-search {
    padding:9px 14px; border-radius:10px; border:1px solid var(--border);
    background:var(--input-bg); color:var(--text); font-size:13px; outline:none; min-width:230px;
  }
  .adm-search:focus { border-color:var(--accent); }
  .adm-mini {
    width:100%; padding:7px 10px; border-radius:8px; border:1px solid var(--border);
    background:var(--input-bg); color:var(--text); font-size:12px; outline:none; margin-bottom:5px;
  }
  .dd-go {
    width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:8px;
    background:var(--bg-3); color:var(--text); font-size:12px; font-weight:600; cursor:pointer;
  }
  .dd-go:hover { border-color:var(--accent); color:var(--accent-2); }
  .dd-go.danger { color:var(--red); }
  .dd-go.danger:hover { border-color:var(--red); }
  .dd-menu form { margin:0; }

  /* payment methods */
  .pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .pay-card {
    display:flex; align-items:flex-start; gap:12px; padding:14px;
    border:1.5px solid var(--border); border-radius:12px; background:var(--input-bg);
    text-decoration:none; color:var(--text); transition:border .15s, background .15s;
  }
  a.pay-card:hover { border-color:var(--accent); background:var(--bg-3); }
  .pay-card.selected { border-color:var(--accent); background:linear-gradient(135deg, rgba(108,92,231,.16), rgba(0,180,216,.08)); }
  .pay-card.disabled { opacity:.5; }
  .pay-ic {
    width:40px; height:40px; border-radius:10px; background:var(--bg-3);
    display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
  }
  .pay-card h4 { font-size:14px; margin-bottom:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .pay-card p { font-size:12px; color:var(--text-2); line-height:1.5; }
  .fee-tag { background:rgba(253,203,110,.16); color:var(--yellow); font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; }

  /* checkout */
  .checkout-grid { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
  .summary-card { position:sticky; top:84px; }
  .sum-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; font-size:13px; color:var(--text-2); border-bottom:1px solid var(--border); }
  .sum-row b { color:var(--text); font-size:14px; }
  .sum-row.total { border-bottom:none; padding-top:14px; }
  .sum-row.total b { font-size:17px; }
  .field input[type=file] { padding:9px 12px; font-size:12.5px; }
  @media (max-width:900px) { .checkout-grid { grid-template-columns:1fr; } .pay-grid { grid-template-columns:1fr; } .summary-card { position:static; } }

  /* FAQ accordion */
  .faq { border-bottom:1px solid var(--border); }
  .faq:last-child { border-bottom:none; }
  .faq summary {
    cursor:pointer; padding:16px 4px; font-size:14px; font-weight:700; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
  }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:"+"; color:var(--accent-2); font-size:18px; font-weight:800; }
  .faq[open] summary::after { content:"–"; }
  .faq p { padding:0 4px 16px; font-size:13px; color:var(--text-2); line-height:1.6; }

  /* knowledge base article */
  .kb-layout { display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start; }
  .kb-body { line-height:1.7; font-size:14px; }
  .kb-body h3 {
    font-size:15px; margin:26px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--border);
  }
  .kb-body h3:first-child { margin-top:0; }
  .kb-body p { margin-bottom:12px; color:var(--text-2); }
  .kb-body ul, .kb-body ol { margin:0 0 14px 20px; color:var(--text-2); }
  .kb-body li { margin-bottom:7px; }
  .kb-body b { color:var(--text); }
  .kb-body code {
    background:var(--input-bg); border:1px solid var(--border); border-radius:5px;
    padding:1px 6px; font-size:12.5px; color:var(--accent-2);
  }
  .kb-body .line-box { margin-bottom:14px; }
  .kb-body table { margin:6px 0 16px; }
  .kb-body td { color:var(--text-2); vertical-align:top; }
  .kb-side { display:flex; flex-direction:column; gap:2px; }
  .kb-side a {
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
    font-size:13px; color:var(--text-2); text-decoration:none;
  }
  .kb-side a:hover { background:var(--bg-3); color:var(--text); }
  .kb-side span { font-size:15px; }
  @media (max-width:900px) { .kb-layout { grid-template-columns:1fr; } }

  /* knowledge base cards */
  .kb-card h3 { font-size:15px; margin:12px 0 6px; }
  .kb-card p { font-size:13px; color:var(--text-2); line-height:1.5; margin-bottom:12px; }
  .kb-ic {
    width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px;
  }

  @media (max-width: 980px) { .credit-pill span { display:none; } }

  /* modal */
  .modal-backdrop {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100;
    align-items:center; justify-content:center; padding:20px;
  }
  .modal-backdrop.show { display:flex; }
  .modal {
    width:100%; max-width:480px; background:var(--card); border:1px solid var(--border);
    border-radius:16px; padding:26px; box-shadow:var(--shadow); animation:fadeUp .25s ease;
  }
  .modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
  .modal-head h2 { font-size:17px; }
  .modal-x {
    background:none; border:none; color:var(--text-2); font-size:16px; cursor:pointer;
    width:32px; height:32px; border-radius:8px;
  }
  .modal-x:hover { background:var(--bg-3); color:var(--text); }
  .modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .modal select {
    width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
    background:var(--input-bg); color:var(--text); font-size:14px; outline:none;
  }
  .modal select:focus { border-color:var(--accent); }

  /* action dropdown */
  .dd { position:relative; display:inline-block; }
  .dd-btn {
    background:var(--input-bg); border:1px solid var(--border); color:var(--text-2);
    border-radius:8px; padding:6px 12px; cursor:pointer; font-size:12px; font-weight:600;
  }
  .dd-btn:hover { color:var(--text); border-color:var(--accent); }
  .dd-menu {
    display:none; position:absolute; right:0; top:calc(100% + 4px); z-index:60; min-width:130px;
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    box-shadow:var(--shadow); overflow:hidden;
  }
  .dd.open .dd-menu { display:block; }
  .dd-menu a {
    display:block; padding:9px 14px; font-size:13px; color:var(--text); text-decoration:none;
  }
  .dd-menu a:hover { background:var(--bg-3); }
  .dd-menu a.danger { color:var(--red); border-top:1px solid var(--border); }

  /* filter tabs */
  .tabs { display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--border); }
  .tabs a {
    padding:9px 16px; font-size:13px; font-weight:600; color:var(--text-2); text-decoration:none;
    border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  .tabs a:hover { color:var(--text); }
  .tabs a.active { color:var(--accent-2); border-bottom-color:var(--accent); }

  /* iptv download */
  .dl-link {
    background:none; border:1px solid var(--border); color:var(--accent-2); border-radius:8px;
    padding:5px 12px; cursor:pointer; font-size:12px; font-weight:600; white-space:nowrap;
  }
  .dl-link:hover { border-color:var(--accent); background:var(--bg-3); }
  .dl-title { font-size:14px; margin-bottom:4px; }
  .dl-sub { font-size:12px; color:var(--text-2); line-height:1.55; margin-bottom:12px; }
  .dl-rows { display:flex; flex-direction:column; gap:10px; }
  .dl-row { display:flex; align-items:center; gap:10px; font-size:13px; }
  .dl-row > span { width:110px; flex-shrink:0; color:var(--text-2); font-weight:600; }
  .dl-row code {
    flex:1; background:var(--input-bg); border:1px solid var(--border); border-radius:8px;
    padding:8px 10px; font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .dl-row code.wrap { font-size:11px; }
  .dl-row button {
    background:var(--bg-3); border:1px solid var(--border); color:var(--text-2); border-radius:8px;
    padding:7px 12px; cursor:pointer; font-size:12px; flex-shrink:0;
  }
  .dl-row button:hover { color:var(--text); border-color:var(--accent); }
  .dl-actions { display:flex; gap:10px; margin-top:20px; }
  .dl-actions .btn { flex:1; text-align:center; }
  @media (max-width:600px) { .dl-row { flex-wrap:wrap; } .dl-row > span { width:100%; } }

  .line-box {
    background:var(--input-bg); border:1px solid var(--border); border-radius:10px;
    padding:14px; font-size:12.5px; line-height:1.8; color:var(--text);
    white-space:pre-wrap; word-break:break-all; font-family:ui-monospace, Menlo, Consolas, monospace;
  }

  /* referral */
  .ref-row { display:flex; gap:10px; }
  .ref-row input {
    flex:1; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
    background:var(--input-bg); color:var(--text-2); font-size:13px; outline:none;
  }
  @media (max-width:600px) { .ref-row { flex-direction:column; } .modal-grid { grid-template-columns:1fr; } }

  /* MoroVPN promo banner */
  .vpn-promo {
    background:linear-gradient(135deg, #6c5ce7 0%, #4834d4 55%, #0b1220 100%);
    border-radius:16px; padding:28px; margin-bottom:22px; color:#fff;
    box-shadow:0 10px 30px rgba(72,52,212,.35);
  }
  .vpn-promo h2 { font-size:20px; margin:12px 0 8px; }
  .vpn-promo p { font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.85); max-width:720px; }
  .vpn-feats { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 20px; }
  .vpn-feats span {
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
    border-radius:20px; padding:5px 12px; font-size:12px; font-weight:600;
  }
  .vpn-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .vpn-cta .btn { background:#fff; color:#4834d4; }
  .vpn-cta .btn:hover { box-shadow:0 6px 20px rgba(255,255,255,.35); }
  .coupon {
    background:rgba(255,255,255,.1); border:1px dashed rgba(255,255,255,.5); color:#fff;
    border-radius:10px; padding:9px 16px; font-size:13px; cursor:pointer;
  }
  .coupon:hover { background:rgba(255,255,255,.2); }
  .vpn-stats { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 20px; }
  .vpn-stats div {
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:12px;
    padding:10px 18px; text-align:center; min-width:90px;
  }
  .vpn-stats b { display:block; font-size:18px; }
  .vpn-stats span { font-size:11px; color:rgba(255,255,255,.75); }

  /* big VPN CTA */
  .vpn-big-cta { text-align:center; padding:14px 0 6px; }
  .big-btn {
    display:inline-block; background:var(--accent-grad); color:#fff; text-decoration:none;
    font-size:18px; font-weight:800; padding:18px 54px; border-radius:14px;
    box-shadow:0 10px 30px rgba(108,92,231,.45); transition:transform .15s, box-shadow .15s;
  }
  .big-btn:hover { transform:translateY(-2px); box-shadow:0 14px 38px rgba(108,92,231,.6); }
  .vpn-big-cta p { margin-top:14px; font-size:13px; color:var(--text-2); }

  /* duration picker (new account page) */
  .dur-label { display:block; font-size:14px; font-weight:700; margin-bottom:12px; }
  .dur-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .dur-btn {
    background:var(--input-bg); border:1px solid var(--border); border-radius:12px;
    padding:16px 10px; cursor:pointer; text-align:center; color:var(--text); transition:border .15s, background .15s;
  }
  .dur-btn b { display:block; font-size:15px; margin-bottom:4px; }
  .dur-btn span { font-size:12px; color:var(--text-2); }
  .dur-btn:hover { border-color:var(--accent); }
  .dur-btn.active {
    border-color:var(--accent); background:linear-gradient(135deg, rgba(108,92,231,.18), rgba(0,180,216,.1));
  }
  .dur-btn.active span { color:var(--accent-2); font-weight:700; }
  .dur-bonus {
    display:block; margin-top:6px; font-size:10.5px; font-style:normal; font-weight:700;
    color:var(--green); line-height:1.35;
  }
  @media (max-width:820px) { .dur-grid { grid-template-columns:repeat(2,1fr); } .dash-charts2 { grid-template-columns:1fr !important; } }

  .content { padding:26px; flex:1; }
  .page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
  .page-head h1 { font-size:22px; }
  .page-head p { color:var(--text-2); font-size:13px; margin-top:4px; }
  .btn-sm {
    padding:10px 18px; width:auto; font-size:13px; display:inline-flex; align-items:center; gap:8px;
  }

  .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
  .grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:18px; margin-bottom:22px; }
  .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .card {
    background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:var(--shadow);
  }
  .stat { display:flex; align-items:flex-start; gap:14px; }
  .stat-ic {
    width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .stat h3 { font-size:24px; margin-bottom:2px; }
  .stat p { color:var(--text-2); font-size:13px; }
  .trend { font-size:12px; font-weight:700; margin-top:6px; display:inline-block; }
  .trend.up { color:var(--green); } .trend.down { color:var(--red); }
  .card-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
  .card-title h2 { font-size:15px; }
  .card-title span { font-size:12px; color:var(--text-2); }

  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { text-align:left; color:var(--text-2); font-size:11px; text-transform:uppercase; letter-spacing:.6px; padding:10px 12px; border-bottom:1px solid var(--border); }
  td { padding:12px; border-bottom:1px solid var(--border); }
  tr:last-child td { border-bottom:none; }
  tbody tr:hover { background:var(--bg-3); }
  .badge { padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; }
  .badge.on { background:rgba(46,204,113,.14); color:var(--green); }
  .badge.off { background:rgba(255,94,87,.14); color:var(--red); }
  .badge.exp { background:rgba(253,203,110,.14); color:var(--yellow); }
  .table-actions button {
    background:none; border:1px solid var(--border); color:var(--text-2); border-radius:8px;
    padding:5px 10px; cursor:pointer; font-size:12px; margin-right:4px;
  }
  .table-actions button:hover { color:var(--accent-2); border-color:var(--accent); }

  .pkg-card h3 { font-size:17px; margin-bottom:4px; }
  .pkg-price { font-size:28px; font-weight:800; margin:10px 0; }
  .pkg-price small { font-size:13px; color:var(--text-2); font-weight:600; }
  .pkg-card ul { list-style:none; margin:14px 0 18px; }
  .pkg-card li { font-size:13px; color:var(--text-2); padding:5px 0; display:flex; gap:8px; align-items:center; }
  .pkg-card li::before { content:"✓"; color:var(--green); font-weight:800; }
  .pkg-tag { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; background:rgba(108,92,231,.15); color:var(--accent-2); }

  .settings-row { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--border); gap:20px; }
  .settings-row:last-child { border-bottom:none; }
  .settings-row h4 { font-size:14px; margin-bottom:3px; }
  .settings-row p { font-size:12px; color:var(--text-2); }
  .switch { position:relative; width:44px; height:24px; flex-shrink:0; }
  .switch input { opacity:0; width:0; height:0; }
  .slider {
    position:absolute; inset:0; background:var(--bg-3); border:1px solid var(--border);
    border-radius:24px; cursor:pointer; transition:.2s;
  }
  .slider::before {
    content:""; position:absolute; width:18px; height:18px; left:2px; top:2px;
    background:var(--text-2); border-radius:50%; transition:.2s;
  }
  .switch input:checked + .slider { background:var(--accent); border-color:var(--accent); }
  .switch input:checked + .slider::before { transform:translateX(20px); background:#fff; }

  .overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:45; }

  @media (max-width: 1100px) {
    .grid-4 { grid-template-columns:repeat(2,1fr); }
    .grid-2, .grid-3 { grid-template-columns:1fr; }
  }
  @media (max-width: 820px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:none; }
    .overlay.show { display:block; }
    .main { margin-left:0; }
    .burger { display:block; }
    .search { display:none; }
    .grid-4 { grid-template-columns:1fr; }
  }

  /* ---- tickets ---- */
  .svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .svc-btn {
    background:var(--input-bg); border:1.5px solid var(--border); border-radius:12px;
    padding:16px 10px; cursor:pointer; text-align:center; color:var(--text); font-size:22px;
    display:flex; flex-direction:column; align-items:center; gap:6px; transition:border .15s, background .15s;
  }
  .svc-btn span { font-size:13px; font-weight:700; }
  .svc-btn:hover { border-color:var(--accent); }
  .svc-btn.active {
    border-color:var(--accent);
    background:linear-gradient(135deg, rgba(108,92,231,.18), rgba(0,180,216,.1));
  }
  .dot-new {
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--red); margin-right:6px; vertical-align:middle;
  }
  .chat { display:flex; flex-direction:column; gap:14px; }
  .msg { border:1px solid var(--border); border-radius:12px; padding:14px 16px; max-width:78%; }
  .msg.from-user { background:var(--input-bg); align-self:flex-start; }
  .msg.from-admin {
    align-self:flex-end;
    background:linear-gradient(135deg, rgba(108,92,231,.14), rgba(0,180,216,.08));
    border-color:var(--accent);
  }
  .msg-head { display:flex; justify-content:space-between; gap:16px; margin-bottom:8px; font-size:12px; }
  .msg-head span { color:var(--text-2); }
  .msg-body { font-size:13.5px; line-height:1.65; color:var(--text); }
  @media (max-width:700px) { .msg { max-width:100%; } }

  /* ---- loyalty discount ---- */
  .disc-badge {
    background:linear-gradient(135deg, var(--green), #1e9c5a); color:#fff;
    font-size:12px; font-weight:800; padding:5px 11px; border-radius:20px;
    text-decoration:none; white-space:nowrap; letter-spacing:.3px;
  }
  .disc-badge:hover { opacity:.88; }
  .p-old { color:var(--text-2); opacity:.7; font-weight:400; margin-right:3px; }
  .p-new { color:var(--green); font-weight:800; }

  .tier-status {
    display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; margin-bottom:22px;
  }
  .ts-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-2); margin-bottom:5px; }
  .ts-big   { display:block; font-size:21px; font-weight:800; }
  .ts-green { color:var(--green); }
  .ts-sub   { display:block; font-size:12px; color:var(--text-2); margin-top:5px; }
  .ts-bar {
    height:9px; border-radius:20px; background:var(--bg-3); overflow:hidden; margin:6px 0 2px;
  }
  .ts-bar span { display:block; height:100%; border-radius:20px; background:linear-gradient(90deg, var(--accent), var(--green)); }

  .tu-disc { font-size:34px; font-weight:800; color:var(--green); margin:12px 0 2px; line-height:1; }
  .tu-card.tu-current { box-shadow:0 0 0 2px var(--green) inset; }
  @media (max-width:820px) { .tier-status { gap:20px; } .disc-badge { display:none; } }

  /* topup explainer notes */
  .two-notes { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
  .note-ok, .note-warn {
    border-radius:12px; padding:14px 16px; font-size:12.5px; line-height:1.6;
    border:1px solid var(--border); background:var(--input-bg);
  }
  .note-ok   { border-color:rgba(46,204,113,.45); background:rgba(46,204,113,.07); }
  .note-warn { border-color:rgba(253,203,110,.45); background:rgba(253,203,110,.07); }
  .note-ok b, .note-warn b { display:block; font-size:13.5px; margin-bottom:5px; }
  .note-ok b { color:var(--green); }
  .note-warn b { color:var(--yellow); }
  .note-ok span, .note-warn span { color:var(--text-2); }

  .tu-list .tu-warn { color:var(--yellow); }
  .tu-list .tu-warn::before { content:"⏳ "; }

  .rules {
    margin-top:18px; padding:16px 18px; border-radius:12px;
    background:var(--input-bg); border:1px solid var(--border);
  }
  .rules > b { display:block; font-size:13.5px; margin-bottom:10px; }
  .rules ol { margin:0 0 0 18px; padding:0; }
  .rules li { font-size:12.5px; color:var(--text-2); line-height:1.65; margin-bottom:6px; }
  .rules li b { color:var(--text); }
  @media (max-width:820px) { .two-notes { grid-template-columns:1fr; } }

/* ---------- renew summary (full breakdown before paying) ---------- */
.renew-sum{margin-top:18px;padding:16px 18px;border:1px solid var(--border);
  border-radius:12px;background:var(--bg-2)}
.renew-sum .rs-row{display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:5px 0;font-size:13px;color:var(--text-2)}
.renew-sum .rs-row b{color:var(--text);font-weight:600;text-align:right}
.renew-sum .rs-big{font-size:15px}
.renew-sum .rs-big b{font-size:16px}
.renew-sum .rs-sep{height:1px;background:var(--border);margin:9px 0}
.renew-sum .rs-green{color:var(--green)}
.renew-sum .rs-red{color:var(--red)}
.renew-sum .rs-short{margin-top:10px;padding:9px 12px;border-radius:9px;font-size:12.5px;
  background:rgba(255,94,87,.12);color:var(--red);line-height:1.5}
.renew-sum .rs-short b{color:var(--red)}
.renew-sum .rs-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.renew-sum .rs-actions .btn{width:auto;padding:9px 18px;font-size:13px}
.renew-sum .rs-actions .btn-ghost{padding:9px 16px;font-size:13px;border-radius:9px;
  cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-2)}
.renew-sum .rs-actions .btn-ghost:hover{color:var(--text);border-color:var(--text-2)}