@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── Variables ── */
:root {
  --bg:       #0a0a0f;
  --card:     #12121e;
  --primary:  #60b8ff;
  --accent:   #ff9ec8;
  --text:     #f0f0ff;
  --sub:      #8888aa;
  --border:   rgba(96,184,255,0.12);
  --toast-bg: #1e1e2e; /* Slightly lighter dark for toast */
  --toast-border: rgba(96,184,255,0.2); /* Slightly more opaque border for toast */
  --shadow:   0 8px 32px rgba(0,0,0,0.45);
  --radius:   16px;
  --nav-h:    64px;
  --success:  #4ade80;
  --warning:  #facc15;
  --danger:   #f87171;
  --ease:     0.25s cubic-bezier(0.4,0,0.2,1);

  /* ── Responsive system ── */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-r, 0px);
  --container-max: 480px;   /* mobile / default app width */
  --gutter: clamp(16px, 4.5vw, 20px);
  --tap-min: 44px;          /* minimum comfortable touch target */
}
[data-theme="light"] {
  --bg:      #f8f9ff;
  --card:    #ffffff;
  --primary: #3a9eff;
  --accent:  #ff6bac;
  --text:    #0a0a0f;
  --sub:     #5a5a7a;
  --border:  rgba(58,158,255,0.15);
  --toast-bg: #f0f2f5; /* Slightly darker light for toast */
  --toast-border: rgba(58,158,255,0.25); /* Slightly more opaque border for toast */
  --shadow:  0 8px 32px rgba(58,158,255,0.10);
}

[data-theme="light"] {
  --bg: #f5f7fa;
  --card: #ffffff;
  --text: #111111;
  --sub: #555555;
  --border: #e0e0e0;
  --primary: #3b82f6;
  --accent: #ec4899;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
}
/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;transition:background var(--ease),color var(--ease);overflow-x:hidden;width:100%}
h1,h2,h3,h4{font-family:'Sora',sans-serif;font-weight:700;line-height:1.2}
p{line-height:1.65;color:var(--sub)}
a{color:var(--primary);text-decoration:none}
img,svg{max-width:100%;height:auto;display:block}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ── Layout ── */
.page{
  padding:
    calc(var(--gutter) + var(--safe-t))
    calc(var(--gutter) + var(--safe-r))
    calc(var(--nav-h) + var(--gutter) + var(--safe-b))
    calc(var(--gutter) + var(--safe-l));
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
}
.page-fade{animation:pageFade .3s ease forwards}
@keyframes pageFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Cards ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,4vw,20px);box-shadow:var(--shadow);transition:background var(--ease),border var(--ease);width:100%}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap-min);padding:12px 24px;border-radius:12px;font-family:'Sora',sans-serif;font-size:.9rem;font-weight:600;border:none;cursor:pointer;transition:all var(--ease);text-decoration:none;-webkit-tap-highlight-color:transparent}
.btn-primary{background:linear-gradient(135deg,var(--primary),#3a78ff);color:#fff;box-shadow:0 4px 20px rgba(96,184,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(96,184,255,.5)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--border)}
.btn-sm{padding:8px 16px;font-size:.8rem;border-radius:8px;min-height:38px}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ── Forms ── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.78rem;font-weight:600;color:var(--sub);margin-bottom:6px;letter-spacing:.05em;text-transform:uppercase}
.form-control{width:100%;min-height:var(--tap-min);padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px;transition:border var(--ease),box-shadow var(--ease);outline:none}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(96,184,255,.15)}
.form-control::placeholder{color:var(--sub);opacity:.6}
select.form-control{appearance:none;cursor:pointer}

/* ── Alerts ── */
.alert{padding:10px 14px;border-radius:10px;font-size:.85rem;margin-bottom:14px;display:none}
.alert.show{display:block}
.alert-error{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--danger)}
.alert-success{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);color:var(--success)}

/* ── Badge ──
   One tone per state a status can be in. badge-warn/badge-warning are the same
   amber under two spellings because the older renderers pass 'warning';
   badge-danger is the red a cancelled or failed row needs; badge-muted is the
   flat "nothing broke, nothing shipped" tone used for an expired row. */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.04em}
.badge-success{background:rgba(74,222,128,.15);color:var(--success)}
.badge-warn{background:rgba(250,204,21,.15);color:var(--warning)}
.badge-warning{background:rgba(250,204,21,.15);color:var(--warning)}
.badge-primary{background:rgba(96,184,255,.15);color:var(--primary)}
.badge-accent{background:rgba(255,158,200,.15);color:var(--accent)}
.badge-danger{background:rgba(248,113,113,.15);color:var(--danger)}
.badge-muted{background:rgba(136,136,170,.14);color:var(--sub);border:1px solid var(--border)}

/* ── Bottom Nav — now handled by /js/bottom-nav.js (bn-* classes) ── */
/* Old .bottom-nav / .nav-item styles removed to avoid duplicate nav */

/* ── Stats ── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:-20px;right:-20px;width:70px;height:70px;border-radius:50%;opacity:.08}
.stat-card.blue::before{background:var(--primary)}
.stat-card.pink::before{background:var(--accent)}
.stat-card.green::before{background:var(--success)}
.stat-card.yellow::before{background:var(--warning)}
.stat-label{font-size:.72rem;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.stat-value{font-family:'Sora',sans-serif;font-size:clamp(1.2rem,4vw,1.5rem);font-weight:800}
.stat-value.blue{color:var(--primary)}
.stat-value.pink{color:var(--accent)}
.stat-value.purple{color:#a78bfa}
.stat-value.green{color:var(--success)}
.stat-value.yellow{color:var(--warning)}

/* ── Balance Card ── */
.balance-card{background:linear-gradient(135deg,#1a1a3e,#0d0d2b);border:1px solid rgba(96,184,255,.2);border-radius:20px;padding:clamp(18px,5vw,24px);margin-bottom:20px;position:relative;overflow:hidden}
[data-theme="light"] .balance-card{background:linear-gradient(135deg,#e8f4ff,#f0e8ff);border-color:rgba(58,158,255,.2)}
.balance-card::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(96,184,255,.2),transparent 70%);border-radius:50%}
.balance-card::after{content:'';position:absolute;bottom:-30px;left:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(255,158,200,.15),transparent 70%);border-radius:50%}
.balance-label{font-size:.78rem;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
/* Reduced from 2.5rem fixed → fluid + smaller cap, per request */
.balance-amount{font-family:'Sora',sans-serif;font-size:clamp(1.5rem,6vw,1.9rem);font-weight:800;color:var(--text);letter-spacing:-0.5px}
.balance-currency{font-size:.9em;font-weight:400;margin-right:4px;opacity:.7}
.balance-synced{font-size:.68rem;color:var(--sub);margin-top:6px;display:flex;align-items:center;gap:5px;position:relative;z-index:1}
.balance-synced .dot{width:5px;height:5px;border-radius:50%;background:var(--success);flex-shrink:0}
.balance-actions{display:flex;gap:10px;margin-top:18px;position:relative;z-index:1}
/* Smaller "Fund Wallet" / "History" buttons, per request */
.balance-actions .btn{flex:1;padding:10px 14px;font-size:.82rem;min-height:40px}

/* ── List Items ── */
.list-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.list-item:last-child{border-bottom:none;padding-bottom:0}
.list-item:first-child{padding-top:0}
.list-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.list-icon.blue{background:rgba(96,184,255,.12);color:var(--primary)}
.list-icon.pink{background:rgba(255,158,200,.12);color:var(--accent)}
.list-icon.green{background:rgba(74,222,128,.12);color:var(--success)}
.list-body{flex:1;min-width:0}
.list-title{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-sub{font-size:.78rem;color:var(--sub);margin-top:2px}
.list-amount{font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem}
.list-amount.debit{color:var(--danger)}
.list-amount.credit{color:var(--success)}

/* ── Section ── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.section-title{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700}
.section-link{font-size:.8rem;color:var(--primary);font-weight:600;min-height:var(--tap-min);display:inline-flex;align-items:center}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:500;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--ease)}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal{background:var(--card);border-radius:24px 24px 0 0;padding:32px var(--gutter) calc(32px + var(--safe-b));width:100%;max-width:var(--container-max);transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);max-height:90vh;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain}
/* An open modal holds the page behind it still: scrolling it used to drag
   the page to the top, where the next swipe pulled-to-refresh. */
html:has(.modal-overlay.active){overflow:hidden}
.modal-overlay.active .modal{transform:translateY(0)}
.modal-handle{width:40px;height:4px;background:var(--border);border-radius:4px;margin:0 auto 24px}
.modal-title{font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:700;margin-bottom:20px}

/* ── Toast ── */
.toast-wrap{position:fixed;top:calc(20px + var(--safe-t));right:calc(20px + var(--safe-r));left:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.toast{background:var(--toast-bg);border:1px solid var(--toast-border);border-radius:12px;padding:12px 16px;font-size:.875rem;width:100%;max-width:300px;box-shadow:var(--shadow);animation:slideIn .3s ease forwards;display:flex;align-items:center;gap:10px}
.toast.success{border-left:3px solid var(--success)}
.toast.error{border-left:3px solid var(--danger)}
.toast.info{border-left:3px solid var(--primary)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}

/* ── Loading states ──
   Every fetch skeleton, busy-button and live dot now lives in
   css/skeleton.css (injected by js/skeleton.js — window.Skeleton).
   Nothing loading-related is defined here any more. */

/* ── Theme toggle ── */
.theme-toggle{width:48px;height:26px;background:var(--border);border-radius:999px;position:relative;cursor:pointer;border:1px solid var(--border);transition:background var(--ease);flex-shrink:0}
.theme-toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--primary);transition:transform var(--ease)}
.theme-toggle.on::after{transform:translateX(22px)}

/* ── Session cards ── */
.session-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:10px}
.session-number{font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:700;color:var(--primary);letter-spacing:1px;word-break:break-word}
.session-meta{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}
.sms-result{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);border-radius:10px;padding:10px 14px;margin-top:10px}
.sms-code{font-family:'Sora',sans-serif;font-size:1.4rem;font-weight:800;color:var(--success);letter-spacing:4px;word-break:break-all}

/* ── Utility ── */
.text-primary{color:var(--primary)}.text-sub{color:var(--sub)}.text-sm{font-size:.8rem}.text-center{text-align:center}.fw-bold{font-weight:700}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-20{margin-top:20px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.flex{display:flex}.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-8{gap:8px}.hidden{display:none!important}
.empty-state{text-align:center;padding:40px 20px}
.empty-icon{font-size:3rem;margin-bottom:12px;opacity:.4}

/* ── App Brand/Logo ── */
.app-brand {
  display: inline-flex;
  align-items: center;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 4vw, 1.4rem);
  letter-spacing: -0.05em;
  gap: 0;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}
.app-brand-logo-img {
  height: clamp(42px, 10vw, 54px);
  width: clamp(42px, 10vw, 54px);
  margin-right: -10px; /* Pulls text closer to the graphic to act as one logo */
  margin-top: 4px; /* Adjusts vertical alignment with text */
  display: block;
}
.app-brand-name { color: var(--primary); }
.app-brand-suffix { color: var(--text); }

/* ── Footer ── */
.footer { padding: 60px var(--gutter) 100px; background: rgba(0,0,0,0.2); border-top: 1px solid var(--border); text-align: center; }
.footer-links { display: flex; justify-content: center; gap: 20px; margin: 20px 0; flex-wrap: wrap; }
.footer-links a { color: var(--sub); font-size: 0.85rem; transition: color var(--ease); min-height:var(--tap-min); display:inline-flex; align-items:center; }
.footer-links a:hover { color: var(--primary); }

/* ── Password Toggle ── */
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--sub); cursor: pointer;
  padding: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: color var(--ease); z-index: 5;
  min-width:36px; min-height:36px;
}
.pw-toggle:hover { color: var(--primary); }

/* ════════════════════════════════════════
   PROFILE PAGE
   ════════════════════════════════════════ */

/* ── Profile Hero ── */
.profile-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 0 24px}
.avatar-xl{position:relative;width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 8px 28px rgba(96,184,255,.3)}
.avatar-letter{font-family:'Sora',sans-serif;font-size:2rem;font-weight:800;color:#fff}
.avatar-status-dot{position:absolute;bottom:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--success);border:3px solid var(--bg)}

.profile-name{font-family:'Sora',sans-serif;font-size:1.25rem;font-weight:700}
.profile-email{font-size:.82rem;color:var(--sub);word-break:break-all}
.profile-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.profile-badges .badge[hidden]{display:none}

/* ── Section labels (profile-specific spacing) ── */
.section-label{font-family:'Sora',sans-serif;font-size:.78rem;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.08em;margin:28px 0 12px}

/* ── Quick Actions ── */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quick-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:var(--tap-min);padding:16px 8px;background:var(--card);border:1px solid var(--border);border-radius:14px;color:var(--text);transition:transform var(--ease),border-color var(--ease);-webkit-tap-highlight-color:transparent}
.quick-btn:hover{transform:translateY(-2px);border-color:var(--primary)}
.quick-btn-icon{font-size:1.3rem}
.quick-btn-label{font-size:.68rem;font-weight:600;text-align:center;color:var(--sub)}

/* ── Settings rows ── */
.settings-row{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color var(--ease);min-height:var(--tap-min);gap:10px}
.settings-row:hover{border-color:var(--primary)}
.settings-row-left{display:flex;align-items:center;gap:12px;min-width:0}
.settings-icon{width:38px;height:38px;border-radius:10px;background:rgba(96,184,255,.1);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.settings-row-title{font-size:.88rem;font-weight:600}
.settings-row-sub{font-size:.74rem;color:var(--sub);margin-top:1px}
.chevron{color:var(--sub);font-size:1.2rem;flex-shrink:0}
.danger-row .settings-icon{background:rgba(248,113,113,.1)}
.danger-row .settings-row-title{color:var(--danger)}

/* ── Toggle switch ── */
.toggle{width:44px;height:24px;border-radius:999px;background:var(--border);border:none;position:relative;cursor:pointer;transition:background var(--ease);flex-shrink:0}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle.on{background:var(--primary)}
.toggle.on::after{transform:translateX(20px)}

/* ── Notifications group ── */

/* ── Referral dropdown ── */
.referral-wrapper{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.referral-trigger{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;min-height:var(--tap-min);gap:10px}
.referral-trigger-left{display:flex;align-items:center;gap:12px;min-width:0}
.referral-trigger-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,158,200,.12);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.referral-trigger-title{font-size:.88rem;font-weight:600}
.referral-trigger-sub{font-size:.74rem;color:var(--sub);margin-top:1px}
.referral-chevron{color:var(--sub);transition:transform var(--ease);flex-shrink:0}
.referral-wrapper.open .referral-chevron{transform:rotate(180deg)}
.referral-panel{max-height:0;overflow:hidden;transition:max-height .35s ease,padding var(--ease);padding:0 16px}
.referral-wrapper.open .referral-panel{max-height:600px;padding:4px 16px 18px}

.ref-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 0;border-top:1px solid var(--border);margin-top:4px}
.ref-stat{text-align:center}
.ref-stat-val{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800}
.ref-stat-lbl{font-size:.68rem;color:var(--sub);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}

.ref-field-label{font-size:.7rem;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 6px}
.ref-copy-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.ref-copy-val{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ref-copy-val.link{color:var(--primary);font-weight:400}
.copy-btn{flex-shrink:0;background:rgba(96,184,255,.12);color:var(--primary);border:none;border-radius:8px;padding:6px 10px;font-size:.72rem;font-weight:700;cursor:pointer;min-height:32px}

.share-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.share-btn{flex:1;min-width:88px;min-height:var(--tap-min);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px;font-size:.74rem;font-weight:600;color:var(--text);cursor:pointer}
.share-btn:hover{border-color:var(--primary)}

/* ── AI FAB ──
   One owner for the button's placement and layer, because everything else on the
   screen is stacked against it: the bottom nav and its quick-menu sheet live at
   100/105 (#bn-root), modals at 500, the side drawer at 900. Anything higher here
   (a stray z-index:999 used to sit in the block below) floats the robot over an open
   menu and over the tile it covers — and pages without #aiFab have no JS hiding it. */
.ai-fab{position:fixed;right:calc(18px + var(--safe-r));bottom:calc(var(--nav-h) + 18px + var(--safe-b));z-index:90;display:flex;align-items:center;gap:10px;transition:opacity .22s ease,transform .26s cubic-bezier(.34,1.56,.64,1),visibility .22s ease}
.ai-fab-btn{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(96,184,255,.4);flex-shrink:0}
.ai-fab-btn svg{width:26px;height:26px;fill:#fff}

/* ── Shared install modal ── */
.install-modal-overlay { align-items:center; padding:20px; }
.install-modal-overlay .install-modal {
  width:min(100%, 390px);
  border-radius:22px;
  padding:28px 22px 22px;
  transform:translateY(18px) scale(.98);
  box-shadow:var(--shadow);
}
.install-modal-overlay.active .install-modal { transform:translateY(0) scale(1); }
.install-modal-icon { font-size:2rem; line-height:1; margin:0 auto 14px; text-align:center; }
.install-modal .modal-title { text-align:center; margin-bottom:10px; }
.install-modal-copy { color:var(--sub); font-size:.84rem; line-height:1.6; }
.install-modal-copy p { margin:0 0 10px; }
.install-modal-copy ol { margin:0; padding-left:22px; }
.install-modal-copy li { padding:3px 0; }
.install-modal-actions { display:flex; gap:10px; margin-top:22px; }
.install-modal-actions .btn { flex:1; }

/* ── Version footer ── */
.version{text-align:center;font-size:.7rem;color:var(--sub);margin-top:32px;opacity:.6}
.version span{color:var(--success)}

/* ── Accessibility ── */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Mobile-first: base styles above target ~360–414px.
   Below scales down further for very small phones (320px+),
   above scales up for tablets, laptops, desktops, ultra-wide.
   ════════════════════════════════════════ */

/* Extra-small phones (≤340px): tighten grids */
@media (max-width: 340px){
  :root{ --gutter: 14px; }
  .quick-grid{ grid-template-columns:repeat(2,1fr); }
  .balance-amount{ font-size:clamp(1.3rem,7vw,1.6rem); }
  .balance-actions{ flex-direction:column; }
  .ref-stat-row, .stat-grid{ grid-template-columns:1fr 1fr; }
}

/* Small phones 341–599px get the base mobile-first rules already defined above (no override needed) */

/* Tablets and large phones in landscape: 600px+ */
@media (min-width: 600px){
  :root{ --container-max: 600px; --gutter: 24px; }
  .quick-grid{ gap:12px; }
}

/* Tablets: 768px+ */
@media (min-width: 768px){
  :root{ --container-max: 680px; }
  .balance-amount{ font-size:clamp(1.7rem,3.2vw,2.1rem); }
  .stat-grid{ grid-template-columns:repeat(4,1fr); }
  .card, .balance-card{ padding:28px; }
}

/* Small laptops: 1024px+ */
@media (min-width: 1024px){
  :root{ --container-max: 760px; --nav-h: 68px; }
  body{ background-image: radial-gradient(circle at 50% 0%, rgba(96,184,255,.06), transparent 60%); }
  .page{ padding-top:calc(var(--gutter) + var(--safe-t) + 12px); }
  .quick-btn:hover, .stat-card:hover, .settings-row:hover{ box-shadow:0 8px 24px rgba(0,0,0,.25); }
}

/* Laptops / desktops: 1280px+ */
@media (min-width: 1280px){
  :root{ --container-max: 820px; }
}

/* Large desktops & ultra-wide monitors: 1920px+ */
@media (min-width: 1920px){
  :root{ --container-max: 880px; --gutter: 28px; }
  html{ font-size:18px; }
}

/* Landscape phones with reduced viewport height: keep modal usable */
@media (max-height: 480px) and (orientation: landscape){
  .modal{ max-height:96dvh; }
  .profile-hero{ padding:16px 0 12px; }
}

/* ════════════════════════════════════════
   ANIMATED BACKGROUND (.bg-fx) — shared utility
   Soft drifting gradient blobs, fixed behind all
   content. Uses existing theme vars, no color
   changes. To use on any page: add this markup
   right after <body>:

   <div class="bg-fx" aria-hidden="true">
     <span class="b1"></span>
     <span class="b2"></span>
     <span class="b3"></span>
   </div>
   ════════════════════════════════════════ */
.bg-fx {
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  pointer-events:none;
}
.bg-fx span {
  position:absolute; border-radius:50%;
  filter:blur(60px); opacity:.35;
  will-change:transform;
}
.bg-fx span.b1 {
  width:280px; height:280px; left:-60px; top:-40px;
  background:radial-gradient(circle, var(--primary), transparent 70%);
  animation: bgDrift1 16s ease-in-out infinite;
}
.bg-fx span.b2 {
  width:320px; height:320px; right:-80px; top:20%;
  background:radial-gradient(circle, var(--accent), transparent 70%);
  animation: bgDrift2 20s ease-in-out infinite;
}
.bg-fx span.b3 {
  width:240px; height:240px; left:10%; bottom:-60px;
  background:radial-gradient(circle, var(--primary), transparent 70%);
  animation: bgDrift3 18s ease-in-out infinite;
}
@keyframes bgDrift1 {
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(40px,50px) scale(1.15); }
}
@keyframes bgDrift2 {
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(-50px,30px) scale(1.1); }
}
@keyframes bgDrift3 {
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(30px,-40px) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-fx span { animation:none !important; }
}

 .greeting { font-family:'Sora',sans-serif; font-size:clamp(1.15rem,4.5vw,1.4rem); font-weight:800; }
    .stat-card { cursor: pointer; transition: transform var(--ease), border-color var(--ease); }
    .stat-card:hover { border-color: var(--primary); transform: translateY(-2px); }
    .greeting .name { color:var(--primary); }
    /* Animated background (.bg-fx) now lives in styles.css so every page can use it */

    /* ═══════════════════════════════════════════════
       QUICK ACTIONS — standalone icons, no shared box
       ═══════════════════════════════════════════════ */
    .quick-grid {
      display:grid; grid-template-columns:repeat(4, 1fr);
      gap:14px 6px; margin-bottom:22px;
    }
    .quick-btn {
      background:transparent; border:none; box-shadow:none;
      padding:6px 2px; text-align:center; cursor:pointer;
      display:flex; flex-direction:column; align-items:center; gap:10px;
      color:var(--text); font-family:'DM Sans',sans-serif;
      font-size:.78rem; font-weight:600; min-height:var(--tap-min);
      -webkit-tap-highlight-color:transparent;
      opacity:0; transform:translateY(10px) scale(.92);
      animation: qb-rise .5s cubic-bezier(.22,.85,.32,1.1) forwards;
    }
    .quick-btn:nth-child(1){ animation-delay:.02s; }
    .quick-btn:nth-child(2){ animation-delay:.08s; }
    .quick-btn:nth-child(3){ animation-delay:.14s; }
    .quick-btn:nth-child(4){ animation-delay:.20s; }
    .quick-btn:nth-child(5){ animation-delay:.26s; }
    @keyframes qb-rise {
      to { opacity:1; transform:translateY(0) scale(1); }
    }

    .quick-btn .qi {
      position:relative;
      margin:0 auto; display:flex; align-items:center; justify-content:center;
      width:50px; height:50px; border-radius:16px;
      background:rgba(108,99,255,.12); color: var(--primary);
      transition: transform .35s cubic-bezier(.34,1.56,.64,1),
                  background .3s ease, box-shadow .3s ease;
    }
    .quick-btn .qi::before {
      content:''; position:absolute; inset:-5px; border-radius:20px;
      border:1.5px solid var(--primary); opacity:0;
    }
    .quick-btn .qi svg { width:22px; height:22px; }
    /* Launch tag on a quick-action icon — see bottom-nav.js / top-nav.js, which
       mark the same entries in the quick menu and the drawer. js/badges.js
       retires every tag when its 7-day window ends (or once tapped). */
    .qi-new {
      position:absolute; top:-9px; right:-11px; z-index:2;
      padding:2px 6px; border-radius:999px;
      background:#ef4444; color:#fff;   /* same red as .badge-new on buy-selection */
      font-family:'Sora',sans-serif; font-size:.5rem; font-weight:800;
      letter-spacing:.07em; line-height:1.5; text-transform:uppercase;
      box-shadow:0 2px 8px rgba(239,68,68,.45);
      animation:qi-newBounce 1.8s ease-in-out infinite; pointer-events:none;
    }
    @keyframes qi-newBounce {
      0%,100% { transform:translateY(0); }
      50%     { transform:translateY(-2px); }
    }

    .quick-btn:hover .qi,
    .quick-btn:focus-visible .qi {
      transform: translateY(-4px) scale(1.08);
      background: rgba(108,99,255,.2);
      box-shadow: 0 10px 22px rgba(108,99,255,.30);
    }
    .quick-btn:hover .qi::before,
    .quick-btn:focus-visible .qi::before {
      animation: qi-ring 1.1s ease-out infinite;
    }
    @keyframes qi-ring {
      0%   { opacity:.55; transform:scale(1); }
      100% { opacity:0;   transform:scale(1.4); }
    }
    .quick-btn:active .qi { transform: translateY(0) scale(.94); }
    .quick-btn:hover .qlabel,
    .quick-btn:focus-visible .qlabel { color:var(--primary); }
    .quick-btn .qlabel { transition: color .25s ease; }

    /* Narrow phones: 2-up grid, larger tap targets */
    @media (max-width: 340px) {
      .quick-grid { grid-template-columns:repeat(2, 1fr); gap:18px 8px; }
      .quick-btn .qi { width:56px; height:56px; }
    }
    /* Tablets and up: a bit more breathing room */
    @media (min-width: 768px) {
      .quick-grid { gap:20px 10px; }
      .quick-btn .qi { width:56px; height:56px; }
    }

    /* ── Wallet balance card — reduced footprint ── */
    .balance-card {
      padding:14px 16px !important;
      margin-bottom:16px !important;
      border-radius:16px !important;
    }
    .balance-card .balance-label { margin-bottom:4px !important; font-size:.7rem !important; }
    .balance-card .balance-amount { font-size:clamp(1.3rem,5vw,1.6rem) !important; }
    .balance-card .balance-actions { margin-top:12px !important; gap:8px !important; }
    .balance-card .balance-actions .btn {
      padding:8px 12px !important; font-size:.78rem !important; min-height:36px !important;
    }
    @media (min-width:768px) {
      .balance-card .balance-amount { font-size:clamp(1.4rem,3vw,1.7rem) !important; }
    }

    /* ── Pull-to-refresh indicator ── */
    .refresh-indicator {
      display:flex; align-items:center; justify-content:center; gap:8px;
      height:0; overflow:hidden; opacity:0;
      transition:height .25s ease, opacity .25s ease;
      font-size:.78rem; color:var(--sub); font-weight:600;
    }
    .refresh-indicator.show { height:36px; opacity:1; }
    .refresh-indicator .sk-dots i { width:4px; height:4px; }

    /* ── Notifications ── */
    .notif-btn {
      position:relative; background:none; border:none; cursor:pointer;
      width:44px; height:44px; border-radius:50%;
      background:var(--card); border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      font-size:1.2rem; transition:all var(--ease); flex-shrink:0;
    }
    .notif-btn:hover { border-color:var(--primary); }
    .notif-btn:active { transform:scale(.94); }
    .notif-badge {
      position:absolute; top:-2px; right:-2px;
      background:var(--danger); color:#fff;
      font-family:'Sora',sans-serif; font-size:.6rem; font-weight:800;
      min-width:18px; height:18px; border-radius:999px;
      display:none; align-items:center; justify-content:center;
      padding:0 4px;
    }

    /* ── Balance visibility toggle ── */
    .balance-row {
      display:flex; align-items:center; gap:10px;
    }
    .balance-eye-btn {
      background:rgba(255,255,255,.08); border:none; cursor:pointer;
      width:36px; height:36px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      color:#fff; opacity:.85; transition:opacity .15s, background .15s;
      -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    }
    .balance-eye-btn:hover { opacity:1; background:rgba(255,255,255,.14); }
    .balance-eye-btn:active { transform:scale(.92); }
    .balance-eye-btn svg { width:18px; height:18px; }
    .balance-masked {
      font-family:'Sora',sans-serif; letter-spacing:2px;
    }

    /* ── Shared compact available-balance control ──
       Purchase pages use this small treatment so the wallet amount is easy to
       find without competing with the form. The dashboard keeps its larger
       card, but uses the same persisted visibility preference. */
    .purchase-header,
    .smm-head.purchase-header {
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      align-items:start;
      gap:12px;
      margin-bottom:20px;
    }
    .purchase-header > :first-child { min-width:0; overflow-wrap:anywhere; }
    .purchase-header > .balance-mini { min-width:0; }
    /* Headers that carry BOTH the wallet and an action pill (SMM Services,
       New SMM order) group the two in one grid cell — .purchase-side — so the
       pill hangs straight under "Available balance". Left as separate grid
       children they landed in a row of their own, which read as dead space
       beside the button. */
    .purchase-header > .purchase-side {
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:8px;
      min-width:0;
    }
    .purchase-header > .purchase-side > .balance-mini { min-width:0; }
    .balance-mini {
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:2px;
      min-width:136px;
      padding:2px 0;
    }
    .balance-mini-head {
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:5px;
      min-height:22px;
    }
    .balance-mini-label {
      color:var(--sub);
      font-family:'Sora',sans-serif;
      font-size:.7rem;
      font-weight:700;
      letter-spacing:.01em;
      line-height:1.2;
      text-decoration:none;
      white-space:nowrap;
    }
    .balance-mini-label:hover { color:var(--text); }
    button.balance-mini-label,
    button.balance-mini-value {
      appearance:none;
      -webkit-appearance:none;
      border:0;
      background:none;
      padding:0;
      margin:0;
      cursor:pointer;
      text-align:right;
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
    }
    button.balance-mini-value { display:inline-flex; align-items:baseline; justify-content:flex-end; }
    button.balance-mini-label:focus-visible,
    button.balance-mini-value:focus-visible {
      outline:2px solid var(--primary);
      outline-offset:3px;
      border-radius:8px;
    }
    .balance-mini-wallet {
      width:14px;
      height:14px;
      color:var(--sub);
      flex-shrink:0;
    }
    .balance-mini-currency {
      color:inherit;
      font-size:.9em;
      font-weight:500;
      margin-right:2px;
      opacity:.8;
    }
    .balance-mini-value {
      color:#f472b6;
      font-family:'Sora',sans-serif;
      font-size:1.05rem;
      font-weight:800;
      line-height:1.25;
      letter-spacing:-.01em;
      text-decoration:none;
      white-space:nowrap;
    }
    .balance-mini-value:hover { color:#f472b6; }
    .balance-mini-toggle {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:24px;
      height:24px;
      padding:0;
      border:0;
      border-radius:7px;
      background:transparent;
      color:var(--sub);
      cursor:pointer;
      transition:background var(--ease), color var(--ease), transform .15s;
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
    }
    .balance-mini-toggle:hover { color:var(--text); background:rgba(96,184,255,.1); }
    .balance-mini-toggle:active { transform:scale(.9); }
    .balance-mini-toggle svg { width:15px; height:15px; }
    .balance-mini-toggle:focus-visible {
      outline:2px solid var(--primary);
      outline-offset:2px;
    }
    .bv-balance-hidden .balance-mini-value { letter-spacing:.12em; }

    /* ── AI FAB ──
       Placement and layer are owned by the .ai-fab rule further up (search
       "AI FAB — One owner"); this block only carries the button's own look. */
    .ai-fab-btn {
      width:52px; height:52px; border-radius:50%;
      background:linear-gradient(135deg,var(--primary,#6C63FF),var(--accent,#a78bfa));
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 18px rgba(108,99,255,.55);
      transition:transform .2s ease, box-shadow .2s ease;
      flex-shrink:0; position:relative;
    }
    .ai-fab:hover .ai-fab-btn { transform:scale(1.08); box-shadow:0 6px 24px rgba(108,99,255,.75); }
    .ai-fab:active .ai-fab-btn { transform:scale(.96); }
    .ai-fab-btn svg { width:26px; height:26px; }
    .ai-fab-btn::after {
      content:''; position:absolute; width:52px; height:52px;
      border-radius:50%; border:2px solid var(--primary,#6C63FF);
      animation:ai-pulse 2.4s ease-out infinite; pointer-events:none;
    }
    @keyframes ai-pulse {
      0%   { transform:scale(1);   opacity:.6; }
      100% { transform:scale(1.8); opacity:0; }
    }

    /* ── Accessibility / motion ── */
    .quick-btn:focus-visible,
    .notif-btn:focus-visible,
    .balance-eye-btn:focus-visible,
    .ai-fab-btn:focus-visible,
    .btn:focus-visible,
    .menu-btn:focus-visible,
    .drawer-link:focus-visible {
      outline:2px solid var(--primary,#6C63FF);
      outline-offset:2px;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
      }
    }

    /* ── Old #navSessionsBadge removed — now handled by bottom-nav.js (bn-badge) ── */

    /* ═══════════════════════════════════════════════
       SIDE DRAWER — slide-in left navigation menu
       ═══════════════════════════════════════════════ */
    .menu-btn {
      background:var(--card); border:1px solid var(--border); cursor:pointer;
      width:44px; height:44px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition:border-color var(--ease), transform var(--ease);
      -webkit-tap-highlight-color:transparent;
    }
    .menu-btn:hover { border-color:var(--primary); }
    .menu-btn:active { transform:scale(.94); }
    .menu-btn svg { width:20px; height:20px; color:var(--text); }

    .drawer-overlay {
      position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
      z-index:800; opacity:0; pointer-events:none; transition:opacity .3s ease;
    }
    .drawer-overlay.open { opacity:1; pointer-events:all; }

    .side-drawer {
      position:fixed; top:0; left:0; bottom:0; width:280px; max-width:82vw;
      background:var(--card); border-right:1px solid var(--border);
      z-index:900; transform:translateX(-100%);
      transition:transform .35s cubic-bezier(.4,0,.2,1);
      display:flex; flex-direction:column;
      padding:calc(20px + var(--safe-t)) 0 calc(20px + var(--safe-b));
      box-shadow:8px 0 30px rgba(0,0,0,.35);
    }
    .side-drawer.open { transform:translateX(0); }

    .drawer-header {
      display:flex; align-items:center; gap:10px; padding:0 20px 20px;
      border-bottom:1px solid var(--border); margin-bottom:10px;
    }
    .drawer-avatar {
      width:46px; height:46px; border-radius:50%;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      display:flex; align-items:center; justify-content:center;
      font-family:'Sora',sans-serif; font-weight:800; color:#fff; font-size:1.1rem;
      flex-shrink:0;
    }
    .drawer-user-info { min-width:0; }
    .drawer-username { font-family:'Sora',sans-serif; font-weight:700; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .drawer-sub { font-size:.7rem; color:var(--sub); margin-top:1px; }
    .drawer-close {
      margin-left:auto; background:none; border:none; cursor:pointer;
      color:var(--sub); width:32px; height:32px; border-radius:50%;
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
      transition:background .2s ease, color .2s ease;
    }
    .drawer-close svg { width:18px; height:18px; }
    .drawer-close:hover { color:var(--text); background:var(--border); }

    .drawer-nav { flex:1; overflow-y:auto; padding:6px 10px; }
    .drawer-link {
      display:flex; align-items:center; gap:14px;
      padding:13px 12px; border-radius:12px; color:var(--text);
      font-size:.86rem; font-weight:600; text-decoration:none;
      transition:background .2s ease, color .2s ease;
    }
    .drawer-link svg { width:20px; height:20px; flex-shrink:0; color:var(--sub); transition:color .2s ease; }
    .drawer-link:hover, .drawer-link.active { background:rgba(96,184,255,.1); color:var(--primary); }
    .drawer-link:hover svg, .drawer-link.active svg { color:var(--primary); }
    .drawer-divider { height:1px; background:var(--border); margin:10px 14px; }
    .drawer-footer { padding:14px 20px 4px; font-size:.68rem; color:var(--sub); text-align:center; opacity:.6; }

    [data-theme="light"] .side-drawer { box-shadow:8px 0 28px rgba(0,0,0,.08); }
    [data-theme="light"] .drawer-overlay { background:rgba(15,23,42,.45); }
    [data-theme="light"] .drawer-link:hover, [data-theme="light"] .drawer-link.active { background:rgba(59,130,246,.1); color:var(--primary); }
    [data-theme="light"] .drawer-link:hover svg, [data-theme="light"] .drawer-link.active svg { color:var(--primary); }
    [data-theme="light"] .drawer-close:hover { background:#e2e8f0; }

    /* ── Topbar: menu · logo · notifications, all inline ── */
    .topbar {
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; margin-bottom:18px;
    }
    .topbar .app-brand { margin:0; }

    /* ── Important Notice popup — centered dialog, NOT a bottom sheet ── */
    .notice-overlay {
      position:fixed; inset:0; z-index:1000;
      background:rgba(0,0,0,.72); backdrop-filter:blur(8px);
      display:flex; align-items:center; justify-content:center;
      padding:20px; opacity:0; pointer-events:none;
      transition:opacity .25s ease;
    }
    .notice-overlay.active { opacity:1; pointer-events:all; }
    .notice-box {
      background:var(--card); border:1px solid var(--border);
      border-radius:20px; padding:26px 22px; width:100%; max-width:420px;
      max-height:85vh; max-height:85dvh; overflow-y:auto;
      box-shadow:var(--shadow);
      transform:scale(.9) translateY(8px); opacity:0;
      transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
    }
    .notice-overlay.active .notice-box { transform:scale(1) translateY(0); opacity:1; }
    .notice-title {
      display:flex; align-items:center; gap:8px;
      font-family:'Sora',sans-serif; font-size:1.05rem; font-weight:700;
      margin-bottom:18px;
    }
    .notice-list { list-style:none; display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
    .notice-list li { display:flex; gap:10px; font-size:.83rem; line-height:1.5; color:var(--sub); }
    .notice-list li span.ic { flex-shrink:0; }

    /* ── WhatsApp Community in Notice Modal & Dashboard ── */
    .notice-wa-banner {
      display:flex; align-items:center; gap:12px;
      padding:12px 14px; margin-bottom:18px;
      border-radius:14px; border:1px solid rgba(37,211,102,.3);
      background:rgba(37,211,102,.08); color:var(--text);
      text-decoration:none; transition:background .15s ease, border-color .15s ease;
    }
    .notice-wa-banner:hover, .notice-wa-banner:active {
      background:rgba(37,211,102,.15); border-color:#25d366;
    }
    .notice-wa-ic {
      width:34px; height:34px; border-radius:10px;
      background:#25d366; color:#fff;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }
    .notice-wa-text { display:flex; flex-direction:column; flex:1; min-width:0; text-align:left; }
    .notice-wa-text strong {
      font-family:'Sora',sans-serif; font-size:.84rem; font-weight:700; color:var(--text);
    }
    .notice-wa-text span {
      font-size:.72rem; color:var(--sub); margin-top:2px;
    }
    .notice-wa-arrow {
      color:#25d366; font-size:.82rem; font-weight:800; font-family:'Sora',sans-serif;
    }
    .notice-dont-show {
      display:flex; align-items:center; gap:9px;
      margin-bottom:16px; cursor:pointer; user-select:none;
      font-family:'Sora',sans-serif; font-size:.82rem; color:var(--sub);
    }
    .notice-dont-show input[type="checkbox"] {
      width:17px; height:17px; accent-color:var(--primary); cursor:pointer;
    }
    .community-card {
      display:flex; align-items:center; gap:10px;
      padding:9px 12px; margin-bottom:14px;
      border-radius:14px; border:1px solid rgba(37,211,102,.25);
      background:linear-gradient(135deg, rgba(37,211,102,.08) 0%, rgba(20,20,30,.8) 100%);
      text-decoration:none; color:var(--text);
      transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .community-card:hover {
      transform:translateY(-1px); border-color:#25d366;
      box-shadow:0 4px 18px rgba(37,211,102,.12);
    }
    .community-card-icon {
      width:34px; height:34px; border-radius:10px;
      background:#25d366; color:#fff;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }
    .community-card-icon svg { width:18px; height:18px; }
    .community-card-body { display:flex; flex-direction:column; flex:1; min-width:0; }
    .community-card-title { font-family:'Sora',sans-serif; font-size:.8rem; font-weight:700; color:var(--text); line-height:1.2; }
    .community-card-sub {
      font-size:.68rem; color:var(--sub); margin-top:2px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .community-card-btn {
      padding:5px 10px; border-radius:9px;
      background:#25d366; color:#fff; font-family:'Sora',sans-serif;
      font-size:.7rem; font-weight:700; flex-shrink:0;
    }


/* ─── Description Toggle Styles ─────────────────────────────────────────── */

.acct-desc-wrapper {
  position: relative;
  margin-bottom: 4px;
}

.acct-desc {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  color: var(--text);
  opacity: 0.55;
  line-height: 1.4;
  
  /* Clamp to 2 lines by default */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  
  transition: all 0.3s ease;
}

.acct-desc.expanded {
  /* Expand to full height */
  -webkit-line-clamp: unset;
  overflow: visible;
}

.acct-desc-toggle {
  padding: 0;
  margin-top: 6px;
  background: none;
  border: none;
  color: var(--acct-btn, #60b8ff);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Sora', sans-serif;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.acct-desc-toggle:hover {
  opacity: 0.8;
}

.acct-desc-toggle:active {
  opacity: 0.6;
}


/* ─── Pre-buy Preview (provider preview_link) ──────────────────────────── */

.acct-preview {
  display: block;
  margin: 8px 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.acct-preview:hover {
  opacity: 0.85;
}

.acct-preview-img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.35);
}

.acct-preview--link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Sora', sans-serif;
  color: var(--acct-btn, #60b8ff);
  background: rgba(96, 184, 255, 0.1);
  border: 1px solid var(--border);
  border-radius: 8px;
}



/* ─── Account Market Modal Styles ─────────────────────────────────────── */

.am-modal-overlay {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.am-modal {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ─── Copy Button Styling ─────────────────────────────────────────────── */

button[onclick*="amCopy"] {
  transition: all 0.2s ease;
}

button[onclick*="amCopy"]:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

button[onclick*="amCopy"]:active {
  transform: translateY(0);
  opacity: 0.8;
}

/* ─── Close Button ────────────────────────────────────────────────────── */

#amModalCloseBtn {
  transition: all 0.2s ease;
}

#amModalCloseBtn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

#amModalCloseBtn:active {
  transform: translateY(0);
  opacity: 0.8;
}

/* ─── Preview Link ───────────────────────────────────────────────────── */

a[href][target="_blank"] {
  transition: all 0.2s ease;
}

a[href][target="_blank"]:hover {
  text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════════════════
   404 — page not found   (marker: error-page-v1)
   Layout only. Every colour and font below is an existing token from :root, so
   the page follows the light/dark theme like the rest of the app and no colour
   or typeface in the design system was changed.
   ════════════════════════════════════════════════════════════════════════════ */
.error-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--gutter);background:transparent}
.error-logo{width:56px;height:56px;border-radius:14px;margin-bottom:24px}
.error-code{font-family:'Sora',sans-serif;font-size:clamp(4rem,18vw,7rem);font-weight:800;line-height:1;color:var(--primary);margin:0}
.error-title{font-family:'Sora',sans-serif;font-size:clamp(1.2rem,4.5vw,1.5rem);font-weight:700;color:var(--text);margin:12px 0 0}
.error-description{color:var(--sub);font-size:.9rem;line-height:1.6;max-width:var(--container-max);margin:12px auto 0}
.error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px;width:100%;max-width:var(--container-max)}
.error-actions .btn{flex:1 1 160px}
.error-footer{margin-top:40px;font-size:.7rem;color:var(--sub);border-top:1px solid var(--border);padding-top:16px;width:100%;max-width:var(--container-max)}
/* the secondary action that pairs with .btn-primary, built from theme tokens */
.btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--primary);transform:translateY(-2px)}
@media (max-width:600px){
  .error-page{padding:20px 16px;justify-content:flex-start;padding-top:clamp(48px,18vh,120px)}
  .error-code{font-size:clamp(3.5rem,22vw,5rem)}
  .error-title{font-size:1.25rem;margin-top:8px}
  .error-description{font-size:.875rem;margin-top:8px}
  .error-actions{margin-top:24px;flex-direction:column}
  .error-actions .btn{width:100%;flex:0 0 auto}
  .error-footer{margin-top:32px;font-size:.625rem}
}

/* ════════════════════════════════════════════════════════════════════════════
   SMM — service catalogue, order form, order list, order detail
   (marker: smm-page-v1)

   Layout only. Every colour, radius, font and easing value below is an existing
   token from :root or a rule that already lives in this file, so the feature sits
   inside the current design system and follows light/dark like the rest of the app.
   Appended by tools/restructure.py from tools/smm-block.css — edit that file, not this one.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── page header ── */
.smm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.smm-head h4{margin:0;font-family:'Sora',sans-serif;font-size:1.28rem;font-weight:800;color:var(--text);letter-spacing:-0.01em}
.smm-head p{margin:4px 0 0;font-size:.78rem;color:var(--sub);line-height:1.45}
.smm-head-actions{display:flex;gap:8px;flex-shrink:0}
.smm-pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);color:var(--text);font-family:'Sora',sans-serif;font-size:.76rem;font-weight:700;padding:9px 14px;border-radius:10px;cursor:pointer;text-decoration:none;transition:border-color var(--ease),transform var(--ease)}
.smm-pill:hover{border-color:var(--primary);transform:translateY(-1px)}
.smm-pill svg{width:14px;height:14px;flex-shrink:0}

/* ── toolbar: search, platform chips, sort ── */
.smm-toolbar{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.smm-search{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:10px 12px;transition:border-color var(--ease)}
.smm-search:focus-within{border-color:var(--primary)}
.smm-search svg{width:16px;height:16px;color:var(--sub);flex-shrink:0}
.smm-search input{flex:1;min-width:0;border:none;background:none;outline:none;color:var(--text);font-family:'Sora',sans-serif;font-size:.9rem}
.smm-search input::placeholder{color:var(--sub)}
.smm-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.smm-chips::-webkit-scrollbar{display:none}
.smm-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);color:var(--sub);border-radius:999px;padding:7px 12px;font-family:'Sora',sans-serif;font-size:.74rem;font-weight:600;cursor:pointer;transition:color var(--ease),border-color var(--ease),background var(--ease)}
.smm-chip:hover{color:var(--text);border-color:var(--primary)}
.smm-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--bg)}
.smm-chip .smm-chip-n{font-size:.66rem;opacity:.75}
/* sort chip — the "SORT" label + dropdown folded into the tabs row
   (2026-09-18 restyle): one chip that always shows the active criterion */
.smm-chip.smm-sort-chip{gap:7px;color:var(--text);font-weight:600}
.smm-chip.smm-sort-chip svg{width:13px;height:13px;flex-shrink:0}
.smm-chip.smm-sort-chip .smm-sort-chip-chev{width:12px;height:12px;opacity:.7;transition:transform var(--ease)}
.smm-chip.smm-sort-chip[aria-expanded="true"]{border-color:var(--primary);color:var(--text)}
.smm-chip.smm-sort-chip[aria-expanded="true"] .smm-sort-chip-chev{transform:rotate(180deg)}
/* the options menu — appended to <body> (position:fixed) because the chips
   row scrolls horizontally and would clip an in-flow dropdown */
.smm-sortmenu{position:fixed;z-index:80;min-width:212px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px;animation:smm-menu-in .16s var(--ease)}
@keyframes smm-menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.smm-sortmenu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:none;color:var(--sub);font-family:'Sora',sans-serif;font-size:.8rem;font-weight:600;padding:10px 12px;border-radius:9px;cursor:pointer;transition:color var(--ease),background var(--ease)}
.smm-sortmenu button:hover{background:var(--bg);color:var(--text)}
.smm-sortmenu button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.smm-sortmenu button[aria-checked="true"]{color:var(--primary)}
.smm-sortmenu .smm-sortmenu-check{width:14px;height:14px;flex-shrink:0;opacity:0}
.smm-sortmenu button[aria-checked="true"] .smm-sortmenu-check{opacity:1}
.smm-sortrow{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--sub)}
.smm-sortrow select{flex:1;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'Sora',sans-serif;font-size:.78rem;padding:8px 10px;outline:none}
.smm-sortrow select:focus{border-color:var(--primary)}
.smm-count{font-size:.72rem;color:var(--sub)}

/* ── service grid + cards (2026-09-18 restyle) ──
   Primary scan targets — icon, title, category, price — stay prominent;
   the description is a two-line clamp (tap expands it), MIN/MAX/DELIVERY
   sit in stat boxes, refill/comments are small pills, and the CTA is a
   full-width gradient button anchoring the card. */
.smm-grid{display:flex;flex-direction:column;gap:12px}
.smm-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:11px}
.smm-card-head{display:flex;align-items:center;gap:10px}
.smm-icon{width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--bg);border:1px solid var(--border);font-size:.95rem}
.smm-card-headtxt{flex:1;min-width:0}
.smm-card-name{margin:0;font-family:'Sora',sans-serif;font-size:.94rem;font-weight:700;color:var(--text);line-height:1.3}
.smm-card-cat{margin:2px 0 0;font-size:.7rem;color:var(--sub);overflow-wrap:anywhere}
/* description: two-line clamp. smm-services.js adds .is-clipped only when
   the text actually overflows — those are tap / Enter / Space expandable
   (.open), so the full text stays accessible. */
.smm-card-desc{margin:0;font-size:.78rem;color:var(--sub);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.smm-card-desc.is-clipped{cursor:pointer}
.smm-card-desc.is-clipped.open{display:block;-webkit-line-clamp:unset;overflow:visible}
.smm-card-desc.is-clipped:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
/* MIN / MAX / DELIVERY stat boxes — one box per fact, darker inset so the
   key numbers read as their own row. The row variant still uses the old
   inline .smm-card-stats text. */
.smm-statsgrid{display:grid;gap:8px}
.smm-statsgrid-n1{grid-template-columns:1fr}
.smm-statsgrid-n2{grid-template-columns:repeat(2,1fr)}
.smm-statsgrid-n3{grid-template-columns:repeat(3,1fr)}
.smm-stat{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:9px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.smm-stat-k{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.smm-stat-v{font-family:'Sora',sans-serif;font-size:.9rem;font-weight:700;color:var(--text);line-height:1.25;overflow-wrap:anywhere}
/* refill / comments-required pills */
.smm-tags{display:flex;flex-wrap:wrap;gap:6px}
.smm-tag{display:inline-flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:5px 10px;font-size:.7rem;font-weight:600;color:var(--sub)}
/* price line: big price left, unit inline on the same baseline */
.smm-priceline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.smm-card-stats{margin:0;font-size:.72rem;color:var(--sub);line-height:1.45}
/* buy row: price left, CTA right (one row, no stacking) — row variant */
.smm-card-price{display:flex;flex-direction:column;gap:1px;min-width:0}
.smm-price{font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:800;color:var(--primary);line-height:1.15}
.smm-price-per{font-size:.74rem;color:var(--sub)}
.smm-buy-btn{flex-shrink:0;white-space:nowrap;padding:8px 14px;font-size:.74rem;min-height:38px;border-radius:10px}
/* full-width CTA anchoring the card variant */
.smm-buy-btn.smm-buy-btn-lg{width:100%;justify-content:center;white-space:normal;padding:14px 16px;font-size:.95rem;font-weight:700;min-height:52px;border-radius:14px}

/* ── horizontal list-row variant — compare via /smm?view=row ──
   Same content, ~90px per row: icon | name / meta / desc | price + CTA. */
.smm-card.smm-svc-row{flex-direction:row;align-items:center;gap:10px;padding:12px 14px}
.smm-svc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.smm-svc-main .smm-card-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smm-svc-main .smm-card-desc{-webkit-line-clamp:1} /* rows stay one line tall */
.smm-svc-main .smm-card-stats{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* keep rows one line tall */
.smm-svc-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0}
.smm-svc-side .smm-card-price{align-items:flex-end;text-align:right}
.smm-svc-side .smm-buy-btn{padding:7px 12px;font-size:.7rem;min-height:34px}
@media (max-width:380px){
  .smm-svc-side .smm-card-price .smm-price-per{display:none} /* keep the row scannable on tiny screens */
}

/* Light theme only: --primary (#3b82f6) reaches just 3.7:1 on white — fine for
   large UI, too weak to anchor the buy row at these sizes. The price and the
   card CTA are deepened along the same hue (mixed from the existing tokens)
   so they read as clearly as in dark mode, where the price already sits at
   8.7:1. Secondary text (--sub) is 7.5:1 on white and needs no change, and
   the description clamp/ellipsis is pure layout, identical in both themes. */
[data-theme="light"] .smm-price{color:#2563eb;color:color-mix(in srgb, var(--primary) 80%, #000)} /* 5.2–5.4:1 */
[data-theme="light"] .smm-buy-btn{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 85%, #000),color-mix(in srgb,#3a78ff 85%, #000));box-shadow:0 4px 20px rgba(37,99,235,.28)} /* white label ≥4.9:1 */

/* ── order form ── */
#smmBalance.low .balance-mini-value{color:var(--danger)}
.smm-field{margin-bottom:16px}
.smm-field>label{display:block;font-family:'Sora',sans-serif;font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:6px}
.smm-field .form-control{width:100%}
.smm-help{margin:6px 0 0;font-size:.72rem;color:var(--sub);line-height:1.5}
.smm-err{margin:6px 0 0;font-size:.74rem;color:var(--danger);display:none}
.smm-err.show{display:block}
.smm-ok{margin:6px 0 0;font-size:.74rem;color:var(--success);display:none}
.smm-ok.show{display:block}
.smm-counter{float:right;font-weight:600;font-size:.7rem;color:var(--sub)}
.smm-counter.over{color:var(--danger)}
.smm-picked{display:flex;align-items:center;gap:8px;background:none;border:0;border-radius:0;padding:2px 0}
.smm-picked .smm-icon{width:28px;height:28px;border-radius:8px;font-size:.78rem}
.smm-picked-name{font-family:'Sora',sans-serif;font-size:.8rem;font-weight:700;color:var(--text)}
.smm-picked-sub{font-size:.68rem;color:var(--sub);margin-top:1px}
/* Change used to inherit the browser's default button chrome (the grey pill in
   screenshots) inside what looked like a big card — now a plain text link in a
   flat row. */
.smm-picked .smm-change{margin-left:auto;flex-shrink:0;font-size:.72rem;color:var(--primary);text-decoration:underline;text-underline-offset:3px;font-weight:700;background:none;border:0;padding:6px 2px;cursor:pointer}
.smm-combo{position:relative}
.smm-combo-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:min(320px,55vh);overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:none}
.smm-combo-list.open{display:block}
.smm-combo-opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;cursor:pointer;color:var(--text);font-size:.8rem}
.smm-combo-opt small{display:block;color:var(--sub);font-size:.68rem}
.smm-combo-opt[aria-selected="true"],.smm-combo-opt:hover{background:var(--bg)}
.smm-combo-empty{padding:12px;font-size:.78rem;color:var(--sub)}
.smm-qty{display:flex;align-items:center;gap:8px}
.smm-qty input[type=number]{flex:1;min-width:0}
.smm-step{width:var(--tap-min);height:var(--tap-min);flex-shrink:0;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer;transition:border-color var(--ease)}
.smm-step:hover{border-color:var(--primary)}
.smm-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:var(--border);margin:14px 0 0;outline:none}
.smm-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--primary);border:3px solid var(--card);cursor:pointer}
.smm-range::-moz-range-thumb{width:22px;height:22px;border:3px solid var(--card);border-radius:50%;background:var(--primary);cursor:pointer}
.smm-charge{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.smm-charge-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.smm-charge-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
.smm-charge-val{font-family:'Sora',sans-serif;font-size:1.4rem;font-weight:800;color:var(--text)}
.smm-charge.ok .smm-charge-val{color:var(--success)}
.smm-charge.low .smm-charge-val{color:var(--danger)}
.smm-charge-math{margin:6px 0 0;font-size:.7rem;color:var(--sub);font-variant-numeric:tabular-nums}
.smm-charge-warn{margin:10px 0 0;font-size:.76rem;color:var(--danger);line-height:1.5}
.smm-charge-warn a{color:var(--primary);font-weight:700}
.smm-submit{position:sticky;bottom:calc(var(--nav-h) + 12px);padding-top:6px;background:linear-gradient(to top,var(--card) 60%,transparent);z-index:20}
.smm-submit .btn{min-height:var(--tap-min)}
.smm-form-note{display:flex;gap:8px;align-items:flex-start;font-size:.7rem;color:var(--sub);line-height:1.5;margin:10px 0 0}

/* ── order rows (list) ── */
.smm-row{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:9px;text-align:left;color:inherit;text-decoration:none;width:100%}
.smm-row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.smm-row-title{font-family:'Sora',sans-serif;font-size:.86rem;font-weight:700;color:var(--text);line-height:1.3}
.smm-row-amt{font-family:'Sora',sans-serif;font-size:.86rem;font-weight:800;color:var(--text);white-space:nowrap}
.smm-row-sub{font-size:.72rem;color:var(--sub);word-break:break-all}
.smm-row-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.smm-row-meta{font-size:.68rem;color:var(--sub)}
.smm-row-actions{display:flex;gap:8px;flex-wrap:wrap}
.smm-link-btn{background:none;border:none;color:var(--primary);font-family:'Sora',sans-serif;font-size:.74rem;font-weight:700;cursor:pointer;padding:6px 2px;min-height:32px}
.smm-link-btn.danger{color:var(--danger)}
.smm-link-btn:disabled{color:var(--sub);cursor:not-allowed}
.smm-bar{height:8px;border-radius:999px;background:var(--bg);border:1px solid var(--border);overflow:hidden}
.smm-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:999px;transition:width .45s cubic-bezier(.4,0,.2,1)}
.smm-bar-sm{height:6px}
.smm-bar-meta{display:flex;justify-content:space-between;gap:8px;font-size:.68rem;color:var(--sub);font-variant-numeric:tabular-nums}
.smm-bar-pct{font-weight:700;color:var(--text)}

/* ── detail ── */
.smm-kv{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.8rem}
.smm-kv:last-child{border-bottom:none}
.smm-kv dt{color:var(--sub);font-size:.74rem;flex-shrink:0}
.smm-kv dd{margin:0;text-align:right;color:var(--text);font-weight:600;word-break:break-word;min-width:0}
.smm-kv dd a{color:var(--primary)}
.smm-section-title{font-family:'Sora',sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin:22px 0 10px}
.smm-timeline{list-style:none;margin:0;padding:0 0 0 18px;position:relative}
.smm-timeline::before{content:'';position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--border)}
.smm-timeline li{position:relative;padding:0 0 12px}
.smm-timeline li:last-child{padding-bottom:0}
.smm-timeline li::before{content:'';position:absolute;left:-18px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--card);border:1.5px solid var(--border)}
.smm-timeline li.done::before{background:var(--primary);border-color:var(--primary)}
.smm-tl-label{font-size:.78rem;color:var(--text);font-weight:600}
.smm-tl-time{font-size:.7rem;color:var(--sub);margin-top:1px}
.smm-note{background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:10px;padding:11px 12px;font-size:.78rem;color:var(--text);line-height:1.55}
.smm-comments{margin:0;padding-left:18px;font-size:.78rem;color:var(--text);line-height:1.6}
.smm-actions{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.smm-actions .btn{min-height:var(--tap-min)}
.smm-callout{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:12px;font-size:.78rem;line-height:1.55;color:var(--text)}
.smm-callout.warn{border-color:var(--warning);color:var(--warning)}
.smm-callout.ok{border-color:var(--success);color:var(--success)}
.smm-callout .smm-callout-body{color:var(--sub)}

/* ── confirmation sheet (reuses .modal-overlay/.modal from the base stylesheet) ── */
.smm-done{text-align:center;padding:4px 0 0}
.smm-done-check{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:var(--bg);border:1px solid var(--success);color:var(--success)}
.smm-done h3{margin:0 0 4px;font-family:'Sora',sans-serif;font-size:1.12rem;font-weight:800;color:var(--text)}
.smm-done p{margin:0 0 16px;font-size:.78rem;color:var(--sub)}
.smm-empty{text-align:center;padding:36px 18px;border:1px dashed var(--border);border-radius:var(--radius)}
.smm-empty .empty-icon{font-size:2rem;margin-bottom:8px}
.smm-empty h3{margin:0 0 6px;font-family:'Sora',sans-serif;font-size:.98rem;font-weight:700;color:var(--text)}
.smm-empty p{margin:0 0 14px;font-size:.78rem;color:var(--sub);line-height:1.55}
.smm-tabs{display:flex;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.smm-tabs::-webkit-scrollbar{display:none}
.smm-tab{flex:1 0 auto;background:none;border:none;border-radius:9px;padding:8px 10px;font-family:'Sora',sans-serif;font-size:.74rem;font-weight:700;color:var(--sub);cursor:pointer;white-space:nowrap;transition:background var(--ease),color var(--ease)}
.smm-tab[aria-selected="true"]{background:var(--bg);color:var(--text)}
.smm-live{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;color:var(--sub)}
.smm-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--success);animation:sk-live 1.8s infinite} /* sk-live keyframes: css/skeleton.css */

/* ════════════════════════════════════════════════════════════════════════════
   SMM order detail — public/smm-order-view.html   (marker: smm-order-view-v2)
   Mobile-first single column; ≥768px becomes a two-column layout with the
   timeline pinned in a sticky sidebar. Skeleton (js/skeleton.js smmDetail)
   reuses these exact classes so nothing jumps when data lands.
════════════════════════════════════════════════════════════════════════════ */

/* ── Forms: no iOS zoom + styled select (app-wide) ── */
input,select,textarea{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{touch-action:manipulation}
/* iOS Safari zooms into any field smaller than 16px on focus. On touch
   devices every text field is forced to 16px — the layout uses rem so the
   rest of the UI is untouched. */
@media (pointer:coarse){
  input:not([type=range]):not([type=checkbox]):not([type=radio]),
  select,textarea,.form-control,.smm-search input,.smm-sortrow select{font-size:16px!important}
}
select.form-control,.smm-sortrow select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:44px;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238888aa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  line-height:1.3;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  transition:border-color var(--ease),box-shadow var(--ease),background-color var(--ease)
}
select.form-control:hover,.smm-sortrow select:hover{border-color:rgba(96,184,255,.4)}
select.form-control:focus,.smm-sortrow select:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(96,184,255,.15);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2360b8ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>")
}
select.form-control::-ms-expand{display:none}
select.form-control option,.smm-sortrow select option{background:var(--card);color:var(--text);padding:8px}
select.form-control:disabled{opacity:.55;cursor:not-allowed}
.smm-sortrow select{min-height:var(--tap-min);padding:10px 40px 10px 12px;border-radius:12px;font-size:.84rem}
textarea.form-control{resize:vertical;min-height:120px;line-height:1.55}

/* ── header ── */
.smm-head{flex-wrap:wrap;align-items:flex-start}
.smm-head>div:first-child{flex:1 1 220px;min-width:0}
.smm-head h4{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.smm-head h4 .smm-row-meta{font-size:.72rem;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:3px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smm-head-actions{margin-left:auto}
.smm-pill{min-height:38px}

/* ── layout grid ── */
.smm-detail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.smm-detail-main,.smm-detail-side{min-width:0}
.smm-detail-main>.smm-section-title:first-child,.smm-detail-side>.smm-section-title:first-child{margin-top:20px}
.smm-callouts{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.smm-callout{background:var(--card)}

/* ── hero card ── */
.smm-hero{padding:clamp(16px,4vw,22px);display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.smm-hero::before{content:'';position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:.8}
.smm-hero-top{display:flex;align-items:flex-start;gap:12px}
.smm-hero-top .smm-icon{width:38px;height:38px;border-radius:11px;font-size:1rem}
.smm-hero-title{flex:1;min-width:0}
.smm-hero-title h3{margin:0;font-size:clamp(.98rem,2.8vw,1.1rem);font-weight:800;color:var(--text);line-height:1.3;overflow-wrap:anywhere}
.smm-hero-sub{margin-top:3px;font-size:.72rem;color:var(--sub)}
.smm-hero-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.smm-hero-amt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:12px}
.smm-hero-amt-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
.smm-hero-amt-val{font-family:'Sora',sans-serif;font-size:clamp(1.25rem,4.5vw,1.5rem);font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.smm-hero-progress{display:flex;flex-direction:column;gap:8px}
.smm-hero-progress .smm-bar{height:10px}
.smm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.smm-stat{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 10px;min-width:0;text-align:center}
.smm-stat dt{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
.smm-stat dd{margin:3px 0 0;font-family:'Sora',sans-serif;font-size:.92rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smm-stat:nth-child(2) dd{color:var(--primary)}

/* ── key/value list ── */
.smm-kv-list{margin:0}
.smm-detail-card{padding-top:6px;padding-bottom:6px}
.smm-kv{padding:11px 0;gap:14px}
.smm-kv dt{padding-top:1px}
.smm-kv dd{overflow-wrap:anywhere}
.smm-kv-wide{flex-direction:column;align-items:stretch;gap:5px}
.smm-kv-wide dd{text-align:left}
.smm-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;letter-spacing:.01em}
.smm-target{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:7px 10px;font-size:.76rem;font-weight:600;color:var(--primary);overflow-wrap:anywhere;word-break:break-all;line-height:1.4;transition:border-color var(--ease)}
.smm-target::after{content:'↗';flex-shrink:0;font-size:.8em;opacity:.7}
.smm-target:hover{border-color:var(--primary)}

/* ── events ── */
.smm-events{list-style:none;margin:0;padding:0}
.smm-events li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.78rem;color:var(--text);line-height:1.5}
.smm-events li:last-child{border-bottom:none;padding-bottom:0}
.smm-events li:first-child{padding-top:0}
.smm-events time{font-size:.68rem;color:var(--sub);font-variant-numeric:tabular-nums}

/* ── timeline: tidy dots ── */
.smm-timeline{padding-left:22px}
.smm-timeline::before{left:5px}
.smm-timeline li{padding-bottom:14px}
.smm-timeline li::before{left:-22px;top:4px;width:11px;height:11px;border-width:2px}
.smm-timeline li.done::before{box-shadow:0 0 0 3px rgba(96,184,255,.18)}

/* ── actions ── */
.smm-actions{margin-top:22px}
#smmPollNote{justify-content:center;text-align:center;align-items:center}

/* ── skeleton inside the detail grid ── */
.smm-hero .sk-inline,.smm-stat .sk-inline,.smm-kv .sk-inline{display:block}
.smm-kv .sk-inline+.sk-inline{margin-left:auto}
.smm-hero-amt .sk-inline+.sk-inline{margin-left:auto}
.smm-section-title .sk-inline{display:block}

/* ── responsive ── */
@media (max-width: 360px){
  .smm-stats{gap:6px}
  .smm-stat{padding:8px 6px}
  .smm-stat dd{font-size:.84rem}
  .smm-hero-top{gap:10px}
  .smm-hero-status{flex-direction:row;align-items:center}
}
@media (max-width: 420px){
  .smm-kv{flex-direction:column;align-items:stretch;gap:4px}
  .smm-kv dd{text-align:left}
}
@media (min-width: 600px){
  .smm-actions{flex-direction:row;flex-wrap:wrap}
  .smm-actions .btn{flex:1 1 200px}
}
@media (min-width: 768px){
  .smm-detail-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 20px;align-items:start}
  .smm-detail-side{position:sticky;top:calc(var(--safe-t) + 16px)}
  .smm-detail-side>.smm-section-title:first-child{margin-top:0}
  .smm-hero{padding:24px}
  .smm-hero-amt{padding:14px 16px}
  .smm-detail-card{padding-top:10px;padding-bottom:10px}
}
@media (min-width: 1024px){
  .smm-detail-grid{gap:0 24px}
  .smm-detail-side{top:calc(var(--safe-t) + 24px)}
}
@media (max-height: 480px) and (orientation: landscape){
  .smm-detail-side{position:static}
}

/* ════════════════════════════════════════════════════════════════════════════
   SMM inputs & selects — smm.html, smm-orders.html, smm-order.html
   (marker: smm-inputs-v2)  Search box, toolbar selects, form fields, stepper,
   textarea, combobox — one consistent look with clear focus/valid/error states.
════════════════════════════════════════════════════════════════════════════ */

/* ── toolbar search (catalogue + my orders) ── */
.smm-search{min-height:var(--tap-min);padding:0 14px;border-radius:14px;gap:10px;background:var(--card);border:1.5px solid var(--border);box-shadow:0 1px 0 rgba(255,255,255,.02) inset;transition:border-color var(--ease),box-shadow var(--ease),background var(--ease)}
.smm-search:hover{border-color:rgba(96,184,255,.35)}
.smm-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(96,184,255,.15)}
.smm-search svg{width:18px;height:18px;transition:color var(--ease)}
.smm-search:focus-within svg{color:var(--primary)}
.smm-search input{min-height:calc(var(--tap-min) - 3px);padding:0;font-family:'DM Sans',sans-serif;font-size:.92rem;-webkit-appearance:none;appearance:none}
.smm-search input::-webkit-search-decoration{-webkit-appearance:none}
.smm-search input::-webkit-search-cancel-button{-webkit-appearance:none;width:16px;height:16px;cursor:pointer;background:var(--sub);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><circle cx='12' cy='12' r='10' fill='black' stroke='none'/><path d='m9 9 6 6M15 9l-6 6' stroke='white'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><circle cx='12' cy='12' r='10' fill='black' stroke='none'/><path d='m9 9 6 6M15 9l-6 6' stroke='white'/></svg>") center/contain no-repeat}

/* ── toolbar sort / range selects ── */
.smm-sortrow{gap:10px;flex-wrap:wrap}
.smm-sortrow label{font-family:'Sora',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);flex-shrink:0}
.smm-sortrow select{flex:1 1 140px;min-width:0;min-height:var(--tap-min);padding:10px 40px 10px 14px;border-radius:12px;border:1.5px solid var(--border);background-color:var(--card);color:var(--text);font-family:'Sora',sans-serif;font-size:.84rem;font-weight:600;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238888aa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color var(--ease),box-shadow var(--ease)}
.smm-sortrow select:hover{border-color:rgba(96,184,255,.4)}
.smm-sortrow select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(96,184,255,.15);outline:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2360b8ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>")}
.smm-sortrow .smm-count{margin-left:auto;flex-shrink:0;white-space:nowrap}
@media (max-width: 380px){ .smm-sortrow select{flex-basis:100%} .smm-sortrow .smm-count{margin-left:0} }

/* ── order form fields (smm-order.html) ── */
.smm-field>label{font-size:.8rem;margin-bottom:8px}
.smm-field .form-control{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;font-size:.94rem;color:var(--text);transition:border-color var(--ease),box-shadow var(--ease),background var(--ease)}
.smm-field .form-control:hover{border-color:rgba(96,184,255,.35)}
.smm-field .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(96,184,255,.15);background:var(--bg)}
.smm-field .form-control::placeholder{color:var(--sub);opacity:.7}
.smm-field .form-control:disabled{opacity:.55;cursor:not-allowed}
/* validation states driven by the .show helper messages that follow each field */
.smm-field:has(.smm-err.show) .form-control{border-color:var(--danger);box-shadow:0 0 0 3px rgba(248,113,113,.14)}
.smm-field:has(.smm-ok.show) .form-control{border-color:var(--success)}
.smm-field .form-control[aria-invalid="true"]{border-color:var(--danger)}
.smm-err.show,.smm-ok.show{display:flex;align-items:flex-start;gap:6px;line-height:1.45}
.smm-err.show::before{content:'!';flex-shrink:0;width:15px;height:15px;border-radius:50%;background:var(--danger);color:#fff;font-size:.62rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}

/* number input — hide browser spinners, we have our own stepper */
.smm-qty input[type=number]{-moz-appearance:textfield;appearance:textfield;text-align:center;font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.smm-qty input[type=number]::-webkit-outer-spin-button,.smm-qty input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.smm-step{border:1.5px solid var(--border);border-radius:12px;font-family:'Sora',sans-serif;font-weight:700;font-size:1.25rem;color:var(--text);display:inline-flex;align-items:center;justify-content:center;transition:border-color var(--ease),background var(--ease),transform var(--ease),color var(--ease);-webkit-tap-highlight-color:transparent;user-select:none}
.smm-step:hover{border-color:var(--primary);color:var(--primary)}
.smm-step:active{transform:scale(.94);background:var(--bg)}
.smm-step:disabled{opacity:.4;cursor:not-allowed;transform:none}
.smm-range{margin-top:16px;height:5px;background:linear-gradient(90deg,var(--primary) var(--smm-range-pct,0%),var(--border) var(--smm-range-pct,0%));cursor:pointer}
.smm-range::-webkit-slider-thumb{box-shadow:0 2px 8px rgba(96,184,255,.45);transition:transform var(--ease)}
.smm-range:active::-webkit-slider-thumb{transform:scale(1.15)}
.smm-range:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(96,184,255,.2)}

/* textareas (note + comments) */
.smm-field textarea.form-control{min-height:96px;line-height:1.55;resize:vertical;font-family:'DM Sans',sans-serif}
.smm-field textarea#smmComments{min-height:150px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;line-height:1.7}

/* service combobox */
.smm-combo .form-control{padding-left:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238888aa' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat:no-repeat;background-position:14px center;background-size:18px}
.smm-combo .form-control:focus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2360b8ff' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>")}
.smm-combo .form-control[aria-expanded="true"]{border-radius:12px 12px 6px 6px;border-color:var(--primary)}
.smm-combo-list{border-radius:14px;border:1.5px solid var(--border);padding:6px}
.smm-combo-opt{padding:11px 12px;border-radius:10px;min-height:var(--tap-min);transition:background var(--ease)}
.smm-combo-opt[aria-selected="true"]{background:rgba(96,184,255,.12);color:var(--text)}

/* ── mobile: 16px inputs so iOS never zooms (matches the app-wide rule) ── */
@media (pointer:coarse){
  .smm-search input,.smm-sortrow select,.smm-field .form-control,.smm-qty input[type=number]{font-size:16px!important}
}