/* =====================================================================
   SpecialTip — Glass Dark UI (Special Alert identity)
   ===================================================================== */
:root {
  --bg: #07060F;
  --bg-2: #0D0A1C;
  --ink: #0B0818;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.075);
  --glass-3: rgba(255, 255, 255, 0.11);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #F6F3FF;
  --text-2: #CDC5DE;
  --muted: #9C94B2;
  --lime: #C3FF64;
  --lime-2: #D7FF96;
  --lime-ink: #142003;
  --purple: #A476FC;
  --purple-2: #C6A6FF;
  --pink: #D28CF2;
  --gold: #FFCF4A;
  --danger: #FF6B81;
  --ok: #7BF1A8;
  --grad: linear-gradient(135deg, #A476FC 0%, #D28CF2 50%, #C3FF64 100%);
  --grad-line: linear-gradient(90deg, #A476FC, #D28CF2, #C3FF64);
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
  --font: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Outfit", "Tajawal", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
.bg-glow, .bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; transform: translateZ(0); contain: strict; }
.bg-glow {
  background:
    radial-gradient(720px 520px at 88% -8%, rgba(164, 118, 252, 0.30), transparent 70%),
    radial-gradient(520px 420px at 4% 28%, rgba(195, 255, 100, 0.10), transparent 70%),
    radial-gradient(820px 560px at 50% 118%, rgba(210, 140, 242, 0.16), transparent 70%);
}
.bg-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(900px 600px at 70% 10%, #000 10%, transparent 75%);
  mask-image: radial-gradient(900px 600px at 70% 10%, #000 10%, transparent 75%);
}
#app { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--purple); color: #fff; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; letter-spacing: -0.01em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 800; }
p { margin: 0; }
.muted { color: var(--muted); }
.lime { color: var(--lime); }
.purple { color: var(--purple-2); }
.danger { color: var(--danger); }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .hide-sm { display: none !important; } }
.mt { margin-top: 16px; }
.mt-lg { margin-top: 26px; }

/* ============ Glass surfaces ============ */
.glass, .card, .kpi {
  position: relative;
  /* زجاج "مزيّف" بدون backdrop-filter: نفس الشكل وأخف بكثير على المتصفح */
  background: linear-gradient(180deg, rgba(38, 32, 60, 0.62), rgba(20, 17, 34, 0.72));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}
.shell.glass { background: linear-gradient(180deg, rgba(22, 18, 38, 0.55), rgba(12, 10, 24, 0.6)); }
.card { padding: 22px; }
.card-tight { padding: 16px; }
.card-title { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.card-sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; }
.glow-border::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(164, 118, 252, .8), rgba(255, 255, 255, .06) 40%, rgba(195, 255, 100, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.tile { background: var(--glass); border: 1px solid var(--line); border-radius: 16px; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-weight: 800; font-size: 15px; cursor: pointer; white-space: nowrap;
  color: var(--text); background: var(--glass-2);
  transition: transform .15s ease, background .2s, border-color .2s, box-shadow .2s, opacity .2s;
}
.btn:hover { transform: translateY(-1px); background: var(--glass-3); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--lime); color: var(--lime-ink); border-color: transparent; box-shadow: 0 12px 32px -12px rgba(195, 255, 100, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-primary:hover { background: var(--lime-2); }
.btn-purple { background: linear-gradient(135deg, #A476FC, #8B5CF6); color: #fff; border-color: transparent; box-shadow: 0 12px 32px -12px rgba(164, 118, 252, .7); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { border-color: rgba(164, 118, 252, .6); background: rgba(164, 118, 252, .08); }
.btn-danger { background: rgba(255, 107, 129, .1); color: var(--danger); border-color: rgba(255, 107, 129, .28); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 17px; }
.btn-block { width: 100%; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; position: relative;
  background: var(--glass-2); border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: .2s;
}
.icon-btn:hover { border-color: rgba(164, 118, 252, .6); }
.icon-btn .ping { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--bg-2); }
.link { color: var(--purple-2); font-weight: 700; cursor: pointer; background: none; border: 0; padding: 0; font-size: inherit; }
.link:hover { color: var(--lime); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; background: var(--glass-2); color: var(--text-2); border: 1px solid var(--line);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-lime { background: rgba(195, 255, 100, .1); color: var(--lime); border-color: rgba(195, 255, 100, .25); }
.badge-purple { background: rgba(164, 118, 252, .14); color: var(--purple-2); border-color: rgba(164, 118, 252, .3); }
.badge-gold { background: rgba(255, 207, 74, .1); color: var(--gold); border-color: rgba(255, 207, 74, .28); }
.badge-danger { background: rgba(255, 107, 129, .1); color: var(--danger); border-color: rgba(255, 107, 129, .28); }

/* ============ Forms ============ */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .label { font-weight: 700; font-size: 14px; color: var(--text-2); }
.hint { font-size: 13px; color: var(--muted); }
.error-text { font-size: 14px; color: var(--danger); font-weight: 700; }
.input, .select, .textarea {
  width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r); background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line-strong); color: var(--text); font-family: inherit; font-size: 16px; font-weight: 500;
  transition: border-color .2s, box-shadow .2s, background .2s; outline: none;
}
.textarea { height: auto; min-height: 110px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--purple); background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 4px rgba(164, 118, 252, .16); }
.input.invalid { border-color: var(--danger); }
.input.valid { border-color: rgba(123, 241, 168, .55); }
.input::placeholder, .textarea::placeholder { color: #6E6683; }
.input-ltr { direction: ltr; text-align: left; font-family: var(--font-num); }
.input-affix { position: relative; }
.input-affix .affix { position: absolute; inset-block: 0; left: 16px; display: grid; place-items: center; color: var(--muted); font-weight: 700; font-family: var(--font-num); pointer-events: none; }
.select { appearance: none; cursor: pointer; padding-left: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239C94B2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: left 16px center; background-repeat: no-repeat; }
.select option { background: #15121D; color: var(--text); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; color: var(--text-2); }
.check input { width: 20px; height: 20px; accent-color: var(--lime); margin-top: 2px; flex: none; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-strong); cursor: pointer; transition: .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: .2s; }
.switch input:checked + span { background: rgba(195, 255, 100, .18); border-color: var(--lime); }
.switch input:checked + span::after { right: 23px; background: var(--lime); }
.upload {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r); padding: 16px; display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: .2s; background: rgba(0, 0, 0, .2); min-height: 80px;
}
.upload:hover { border-color: var(--purple); background: rgba(164, 118, 252, .06); }
.upload.done { border-style: solid; border-color: rgba(123, 241, 168, .45); }
.upload input { display: none; }
.upload .u-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--glass-2); display: grid; place-items: center; flex: none; color: var(--purple-2); }
.upload.done .u-icon { background: rgba(123, 241, 168, .12); color: var(--ok); }
.upload .u-title { font-weight: 800; }
.upload .u-sub { font-size: 13px; color: var(--muted); }
.upload img.thumb { width: 64px; height: 46px; object-fit: cover; border-radius: 8px; margin-inline-start: auto; }

/* ============ Brand ============ */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { flex: none; max-width: none; filter: drop-shadow(0 6px 18px rgba(164, 118, 252, .35)); }
.brand .wm { font-family: var(--font-num); direction: ltr; font-weight: 800; font-size: 22px; letter-spacing: -0.04em; line-height: 1; }
.brand .wm b { color: var(--lime); font-weight: 800; }

/* ============ Top nav (public) ============ */
.topnav { position: sticky; top: 0; z-index: 20; padding: 14px 0; }
.topnav .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 16px; border-radius: 999px; }
.navlinks { display: flex; gap: 4px; }
.navlinks a { padding: 8px 16px; border-radius: 999px; color: var(--text-2); font-weight: 700; font-size: 15px; transition: .2s; }
.navlinks a:hover, .navlinks a.active { background: var(--glass-2); color: var(--text); }

/* ============ Landing ============ */
.hero { padding: 54px 0 20px; text-align: center; }
.hero .pill { margin-bottom: 20px; }
.hero h1 { font-size: clamp(42px, 7vw, 78px); font-weight: 900; line-height: 1.08; }
.hero h1 .hl { background: linear-gradient(90deg, var(--lime), #E6FFB8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--text-2); margin: 18px auto 28px; max-width: 560px; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-visual { position: relative; max-width: 980px; margin: 54px auto 0; padding: 0 10px; }
.hv-frame { padding: 18px; border-radius: 30px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; text-align: right; }
@media (max-width: 820px) { .hv-frame { grid-template-columns: 1fr; } }
.hv-float { position: absolute; z-index: 3; padding: 12px 16px; border-radius: 18px; display: flex; align-items: center; gap: 12px; text-align: right; animation: bob 5s ease-in-out infinite; }
.hv-float.a { top: -26px; left: -8px; }
.hv-float.b { bottom: -26px; right: 34%; animation-delay: -2.5s; }
@media (max-width: 820px) { .hv-float { display: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.platforms { display: flex; gap: 10px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.plat { height: 38px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; font-family: var(--font-num); }
.plat i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.section { padding: 64px 0; }
.section-head { text-align: center; margin-bottom: 34px; }
.section-head h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 900; }
.section-head p { color: var(--muted); margin-top: 10px; font-size: 17px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step-card { padding: 22px; }
.step-card .n { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(164, 118, 252, .16); color: var(--purple-2); margin-bottom: 16px; border: 1px solid rgba(164, 118, 252, .3); }
.step-card:nth-child(4) .n { background: rgba(195, 255, 100, .12); color: var(--lime); border-color: rgba(195, 255, 100, .3); }
.step-card h3 { font-size: 19px; margin-bottom: 4px; }
.step-card p { color: var(--muted); font-size: 15px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 820px; margin: 0 auto; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
.compare .card { text-align: center; padding: 28px; }
.compare .big { font-size: 52px; font-weight: 800; margin: 10px 0 4px; }
.compare .us .big { color: var(--lime); }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { padding: 22px; }
.feat .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(195, 255, 100, .1); color: var(--lime); margin-bottom: 14px; border: 1px solid rgba(195, 255, 100, .2); }
.feat h3 { font-size: 18px; margin-bottom: 4px; }
.feat p { color: var(--muted); font-size: 15px; }
.cta-band { text-align: center; padding: 48px 24px; border-radius: 30px; }
.cta-band h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 900; margin-bottom: 20px; }
.footer { padding: 40px 0 56px; color: var(--muted); font-size: 14px; }
.footer .row { flex-wrap: wrap; gap: 18px; }
.footer a:hover { color: var(--text); }

/* ============ Auth / wizard ============ */
.auth-wrap { min-height: calc(100vh - 90px); display: grid; place-items: center; padding: 24px 0 60px; }
.auth-card { width: 100%; max-width: 470px; padding: 30px; }
.auth-card h1 { font-size: 30px; font-weight: 900; }
.wizard { width: 100%; max-width: 720px; margin: 0 auto; padding: 8px 0 60px; }
.wizard .card { padding: 28px; }
.stepper { display: flex; gap: 8px; margin: 8px 0 20px; }
.stepper .s { flex: 1; }
.stepper .bar { height: 6px; border-radius: 999px; background: var(--glass-2); overflow: hidden; }
.stepper .bar i { display: block; height: 100%; width: 0; background: var(--grad-line); transition: width .4s ease; }
.stepper .s.done .bar i, .stepper .s.cur .bar i { width: 100%; }
.stepper .s.cur .bar i { background: var(--lime); }
.stepper .t { font-size: 13px; margin-top: 8px; color: var(--muted); font-weight: 700; }
.stepper .s.cur .t { color: var(--text); }
.wizard h1 { font-size: 28px; font-weight: 900; }
.wizard .lead { color: var(--muted); margin-top: 6px; }
.match { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); font-weight: 700; font-size: 14px; }
.match.ok { background: rgba(123, 241, 168, .08); color: var(--ok); border: 1px solid rgba(123, 241, 168, .25); }
.match.bad { background: rgba(255, 107, 129, .08); color: var(--danger); border: 1px solid rgba(255, 107, 129, .25); }
.match.wait { background: var(--glass); color: var(--muted); border: 1px solid var(--line); }
.review-list { display: grid; }
.review-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.review-item:last-child { border-bottom: 0; }
.review-item > span:first-child { color: var(--muted); }
.review-item > span:last-child { font-weight: 700; text-align: left; }
.timeline { display: grid; }
.tl { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
.tl:last-child { padding-bottom: 0; }
.tl .dot { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--glass-2); color: var(--muted); border: 1px solid var(--line-strong); z-index: 1; }
.tl::after { content: ""; position: absolute; right: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.tl:last-child::after { display: none; }
.tl.done .dot { background: rgba(195, 255, 100, .14); color: var(--lime); border-color: rgba(195, 255, 100, .4); }
.tl.cur .dot { background: rgba(164, 118, 252, .2); color: var(--purple-2); border-color: var(--purple); animation: pulse 1.8s infinite; }
.tl h4 { font-size: 16px; }
.tl p { font-size: 14px; color: var(--muted); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(164, 118, 252, .45); } 50% { box-shadow: 0 0 0 8px rgba(164, 118, 252, 0); } }

/* ============ App shell (glass window) ============ */
.shell-wrap { padding: 16px; min-height: 100vh; }
.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 32px); border-radius: 30px; overflow: clip; }
.sidebar { position: sticky; top: 16px; height: calc(100vh - 32px); padding: 24px 16px; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 26px; }
.sidebar .brand { padding: 0 8px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; color: var(--muted); font-weight: 700; font-size: 15px; transition: .2s; position: relative; }
.side-nav a:hover { color: var(--text); background: var(--glass); }
.side-nav a.active { color: var(--text); background: var(--glass-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.side-nav a.active svg { color: var(--lime); }
.side-nav a .nb { margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; font-family: var(--font-num); }
.side-foot { margin-top: auto; display: grid; gap: 12px; }
.side-setup { padding: 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(164, 118, 252, .22), rgba(195, 255, 100, .06)); border: 1px solid rgba(164, 118, 252, .3); }
.side-setup .pbar { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .35); overflow: hidden; margin: 10px 0 12px; }
.side-setup .pbar i { display: block; height: 100%; background: var(--lime); border-radius: 999px; }
.main { padding: 0 30px 60px; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 18px 30px; margin: 0 -30px 4px; position: sticky; top: 0; z-index: 12; background: linear-gradient(180deg, rgba(14, 11, 28, .98), rgba(14, 11, 28, .94)); border-bottom: 1px solid var(--line); }
.topbar .search { flex: 1; max-width: 380px; position: relative; }
.topbar .search .input { height: 46px; border-radius: 999px; padding-left: 16px; padding-right: 44px; background: var(--glass); }
.topbar .search svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.topbar .tools { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.me-chip { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--glass); transition: .2s; color: var(--text); font-family: inherit; font-size: 15px; }
.me-chip:hover { border-color: rgba(164, 118, 252, .5); }
.me-chip .avatar { width: 36px; height: 36px; }
.popover { position: absolute; top: calc(100% + 10px); left: 0; width: 340px; padding: 10px; border-radius: 22px; z-index: 40; animation: up .2s ease; background: rgba(21, 17, 36, .96); }
.popover h4 { padding: 8px 10px 10px; font-size: 15px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; font-weight: 800; }
.page-head p { color: var(--muted); margin-top: 2px; }
.mobile-top, .bottom-nav { display: none; }
@media (max-width: 960px) {
  .shell-wrap { padding: 0; }
  .shell { grid-template-columns: 1fr; border-radius: 0; border: 0; min-height: 100vh; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sidebar { display: none; }
  .main { padding: 0 16px 110px; }
  .topbar { padding: 12px 0; background: rgba(9, 7, 19, .96); margin: 0 -16px; padding-inline: 16px; border-bottom: 1px solid var(--line); }
  .topbar .search { display: none; }
  .topbar .mob-brand { display: inline-flex !important; }
  .me-chip .nm { display: none; }
  .me-chip { padding: 3px; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 12px; inset-inline: 12px; z-index: 30; border-radius: 24px; padding: 6px 4px; background: rgba(18, 14, 32, .86); }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0; font-size: 11px; font-weight: 700; color: var(--muted); border-radius: 16px; }
  .bottom-nav a.active { color: var(--lime); background: var(--glass-2); }
  .popover { width: min(340px, calc(100vw - 32px)); }
}
.mob-brand { display: none !important; }

/* ============ Dashboard ============ */
.dash { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1360px) { .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dash .col-c { grid-column: 1 / -1; } }
@media (max-width: 760px) { .dash { grid-template-columns: 1fr; } }
.balance .lbl { color: var(--muted); font-size: 15px; font-weight: 700; }
.balance .amt { font-family: var(--font-num); font-size: clamp(36px, 4vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 4px; direction: ltr; text-align: right; }
.balance .amt small { font-size: .5em; color: var(--muted); font-weight: 600; }
.delta { font-family: var(--font-num); font-weight: 700; font-size: 14px; direction: ltr; display: inline-block; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.split .tile { padding: 12px 14px; }
.split .tile .l { font-size: 13px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.split .tile .v { font-family: var(--font-num); font-weight: 700; font-size: 19px; margin-top: 2px; direction: ltr; text-align: right; }
.area { width: 100%; height: 170px; display: block; overflow: visible; }
.area .lbl { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.area .lbl.on { fill: var(--text); font-weight: 800; }
.chart-meta { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 6px; }
.chart-meta b { font-family: var(--font-num); font-size: 15px; color: var(--lime); }

/* virtual glass cards */
.vcard {
  position: relative; border-radius: 22px; padding: 20px; min-height: 196px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(140deg, rgba(164, 118, 252, .42) 0%, rgba(40, 28, 78, .55) 42%, rgba(14, 11, 26, .75) 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 24px 50px -24px rgba(0, 0, 0, .9);
}
.vcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(260px 160px at 85% -10%, rgba(255, 255, 255, .22), transparent 60%), radial-gradient(220px 160px at 0% 110%, rgba(195, 255, 100, .22), transparent 60%); }
.vcard.lime { background: linear-gradient(140deg, rgba(195, 255, 100, .26) 0%, rgba(30, 40, 20, .5) 40%, rgba(12, 11, 22, .8) 100%); }
.vcard.lime::before { background: radial-gradient(260px 160px at 85% -10%, rgba(255, 255, 255, .18), transparent 60%), radial-gradient(220px 160px at 0% 110%, rgba(164, 118, 252, .35), transparent 60%); }
.vcard .vc-top { display: flex; align-items: center; justify-content: space-between; }
.vcard .vc-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-num); font-weight: 800; font-size: 15px; direction: ltr; }
.vcard .vc-brand small { display: block; font-size: 10px; font-weight: 600; opacity: .7; letter-spacing: .08em; text-transform: uppercase; }
.vcard .chip { width: 38px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #E8E2F5, #9C94B2); opacity: .85; position: relative; }
.vcard .chip::after { content: ""; position: absolute; inset: 7px 9px; border: 1.5px solid rgba(0, 0, 0, .25); border-radius: 4px; }
.vcard .vc-mid { margin-top: auto; }
.vcard .vc-big { font-family: var(--font-num); font-size: 28px; font-weight: 700; direction: ltr; text-align: right; letter-spacing: -0.02em; }
.vcard .vc-code { font-family: var(--font-num); font-weight: 600; font-size: 16px; direction: ltr; text-align: right; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard .vc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-2); }
.vcard .vc-foot .num { font-weight: 600; }

/* quick actions */
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa button, .qa a { height: 52px; padding: 0 10px; white-space: nowrap; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--glass-2); color: var(--text); font-weight: 800; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .2s; font-family: inherit; }
.qa button:hover, .qa a:hover { background: var(--glass-3); transform: translateY(-1px); }
.qa .primary { background: linear-gradient(135deg, #B4F25A, var(--lime)); color: var(--lime-ink); border-color: transparent; box-shadow: 0 14px 30px -14px rgba(195, 255, 100, .7); }
.qa .primary:hover { background: var(--lime-2); }

/* transactions */
.tx-list { display: flex; flex-direction: column; gap: 8px; }
.tx { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); cursor: pointer; transition: .2s; text-align: right; width: 100%; color: var(--text); font-family: inherit; font-size: inherit; }
.tx:hover { background: var(--glass-2); border-color: var(--line-strong); }
.tx .who { font-weight: 800; font-size: 15px; }
.tx .msg { color: var(--text-2); font-size: 14px; margin-top: 1px; }
.tx .side { text-align: left; flex: none; }
.tx .net { font-family: var(--font-num); font-weight: 700; color: var(--lime); font-size: 17px; direction: ltr; }
.tx .paid { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tx.new { animation: flash 1.6s ease; }
@keyframes flash { from { background: rgba(195, 255, 100, .14); } to { background: var(--glass); } }
.av { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 17px; flex: none; color: #0B0818; }

.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--ink); background: var(--grad); flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 96px; height: 96px; font-size: 36px; }
.avatar.xl { width: 112px; height: 112px; font-size: 42px; border: 4px solid var(--bg); box-shadow: 0 0 0 2px rgba(195, 255, 100, .5), 0 20px 40px -12px rgba(164, 118, 252, .6); }

.checklist { display: grid; gap: 8px; }
.ck { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); }
.ck .ci { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(195, 255, 100, .14); color: var(--lime); }
.ck h4 { font-size: 15px; }
.ck p { font-size: 13px; color: var(--muted); }

/* setup steps */
.setup { padding: 20px; margin-bottom: 16px; }
.setup-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
@media (max-width: 900px) { .setup-steps { grid-template-columns: 1fr 1fr; } }
.ss { padding: 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ss .si { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--glass-2); color: var(--muted); }
.ss h4 { font-size: 15px; }
.ss p { font-size: 13px; color: var(--muted); }
.ss.done .si { background: rgba(195, 255, 100, .14); color: var(--lime); }
.ss.done h4 { color: var(--muted); }
.ss.cur { border-color: rgba(195, 255, 100, .45); background: linear-gradient(160deg, rgba(195, 255, 100, .1), rgba(255, 255, 255, .02)); }
.ss.cur .si { background: var(--lime); color: var(--lime-ink); }

/* KPI tiles (other pages) */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .kpis { grid-template-columns: 1fr 1fr; } }
.kpi { padding: 18px; }
.kpi .l { color: var(--muted); font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.kpi .v { font-size: 26px; font-weight: 700; margin-top: 6px; font-family: var(--font-num); }
.kpi .s { font-size: 13px; color: var(--muted); margin-top: 2px; }
.kpi.hero-kpi { border-color: rgba(195, 255, 100, .25); background: linear-gradient(160deg, rgba(195, 255, 100, .12), rgba(255, 255, 255, .02)); }
.kpi.hero-kpi .v { color: var(--lime); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.grid-2-eq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .grid-2, .grid-2-eq { grid-template-columns: minmax(0, 1fr); } }
.ov-goal .row { flex-wrap: wrap; }

.top-list { display: flex; flex-direction: column; gap: 8px; }
.top-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); }
.rank { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--glass-2); font-family: var(--font-num); }
.top-item:nth-child(1) .rank { background: rgba(255, 207, 74, .16); color: var(--gold); }
.top-item:nth-child(2) .rank { background: rgba(207, 198, 223, .14); color: #E5DEF2; }
.top-item:nth-child(3) .rank { background: rgba(210, 140, 242, .16); color: var(--pink); }

.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 15px; }
table.t th { text-align: right; font-size: 13px; color: var(--muted); font-weight: 700; padding: 6px 14px; white-space: nowrap; }
table.t td { padding: 14px; background: var(--glass); border-block: 1px solid var(--line); vertical-align: middle; }
table.t td:first-child { border-inline-start: 1px solid var(--line); border-start-start-radius: 14px; border-end-start-radius: 14px; }
table.t td:last-child { border-inline-end: 1px solid var(--line); border-start-end-radius: 14px; border-end-end-radius: 14px; }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover td { background: var(--glass-2); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.seg button { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; font-size: 14px; font-family: inherit; }
.seg button.on { background: var(--glass-3); color: var(--text); }
.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty .ei { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--glass-2); color: var(--purple-2); }

/* breakdown */
.fee-box { padding: 14px 16px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); font-size: 15px; }
.fee-box .r { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.fee-box .r.total { font-weight: 800; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.fee-box .r.total .num { color: var(--lime); font-size: 18px; }

/* Streamlabs */
.sl-logo { width: 56px; height: 56px; border-radius: 18px; background: #80F5D2; display: grid; place-items: center; color: #09161D; flex: none; box-shadow: 0 12px 30px -12px rgba(128, 245, 210, .6); }
.connect-hero { display: flex; gap: 16px; align-items: center; }
.alert-preview { position: relative; height: 210px; border-radius: 18px; overflow: hidden; background: radial-gradient(400px 200px at 50% 120%, rgba(164, 118, 252, .3), transparent), #0A0815; border: 1px solid var(--line); display: grid; place-items: center; }
.alert-preview .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 4px); }
.alert-pop { text-align: center; opacity: 0; transform: scale(.7); }
.alert-pop.show { animation: popIn 3.6s ease forwards; }
.alert-pop .ap-t { font-size: 22px; font-weight: 900; }
.alert-pop .ap-t b { color: var(--lime); }
.alert-pop .ap-m { color: var(--text-2); margin-top: 4px; }
.alert-pop .ap-ic { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 20px; background: var(--grad); display: grid; place-items: center; color: var(--ink); box-shadow: 0 14px 34px -10px rgba(164, 118, 252, .8); }
@keyframes popIn { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; transform: scale(1.06); } 20% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(.95); } }

/* Page builder */
.builder { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .builder { grid-template-columns: 1fr; } }
.phone { position: sticky; top: 90px; border-radius: 40px; padding: 10px; background: #050409; border: 1px solid var(--line-strong); box-shadow: var(--shadow), 0 0 0 6px rgba(255, 255, 255, .03); }
.phone .screen { border-radius: 32px; overflow: hidden; height: 680px; overflow-y: auto; background: var(--bg); position: relative; }
.phone .screen::-webkit-scrollbar { width: 0; }
.chips-edit { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-in { width: 84px; }
.chip-in .input { height: 46px; text-align: center; }
.linkbox { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-strong); min-width: 0; }
.linkbox code { direction: ltr; font-family: var(--font-num); font-weight: 600; color: var(--lime); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

/* ============ Public donation page ============ */
.tip-page { max-width: 540px; margin: 0 auto; padding: 18px 16px 50px; }
.tip-cover { height: 160px; border-radius: 26px; background: radial-gradient(420px 220px at 85% 0%, rgba(195, 255, 100, .4), transparent), radial-gradient(420px 220px at 0% 100%, rgba(210, 140, 242, .55), transparent), linear-gradient(135deg, #2A1B55, #100B22); border: 1px solid var(--line); position: relative; overflow: hidden; }
.tip-cover::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.tip-head { text-align: center; margin-top: -58px; position: relative; }
.tip-head .avatar { margin: 0 auto; }
.tip-head h1 { font-size: 26px; font-weight: 900; margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; }
.tip-head .verified { color: var(--lime); display: inline-flex; }
.tip-head .handle { color: var(--muted); direction: ltr; font-weight: 600; font-family: var(--font-num); }
.tip-head .bio { color: var(--text-2); margin-top: 6px; font-size: 15px; }
.socials { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.socials a { height: 34px; padding: 0 12px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-num); }
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.amt-btn { height: 54px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--glass); color: var(--text); font-weight: 700; font-size: 18px; cursor: pointer; transition: .15s; direction: ltr; font-family: var(--font-num); }
.amt-btn:hover { border-color: var(--purple); background: var(--glass-2); }
.amt-btn.on { background: rgba(195, 255, 100, .12); border-color: var(--lime); color: var(--lime); box-shadow: 0 0 0 4px rgba(195, 255, 100, .08); }
.big-amount { text-align: center; font-size: 60px; font-weight: 700; direction: ltr; line-height: 1; font-family: var(--font-num); letter-spacing: -0.03em; }
.big-amount small { font-size: 26px; color: var(--muted); font-weight: 600; vertical-align: top; margin-right: 2px; }
.pay-methods { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pm { height: 30px; padding: 0 10px; border-radius: 8px; background: #fff; color: #111; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; direction: ltr; font-family: var(--font-num); }
.pm.dark { background: #000; color: #fff; border: 1px solid #333; }
.pm.mada { gap: 0; }
.pm.mada b { color: #84B740; }
.pm.mada i { color: #259BD6; font-style: normal; }
.pm.visa { color: #1A1F71; font-style: italic; font-weight: 900; }
.pm.mc span { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.counter { font-size: 12px; color: var(--muted); text-align: left; direction: ltr; font-family: var(--font-num); }
.note { font-size: 12px; color: var(--muted); text-align: center; }
.success-ic { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: rgba(195, 255, 100, .14); color: var(--lime); border: 1px solid rgba(195, 255, 100, .4); box-shadow: 0 0 40px -6px rgba(195, 255, 100, .5); }

/* ============ Modal / toasts ============ */
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(4, 3, 10, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; padding: 16px; animation: fadeIn .2s ease; }
.modal { width: 100%; max-width: 460px; border-radius: 28px; padding: 26px; max-height: 90vh; overflow-y: auto; animation: up .25s ease; background: linear-gradient(180deg, rgba(34, 28, 56, .96), rgba(18, 15, 32, .97)); border: 1px solid var(--line-strong); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08); }
.modal.wide { max-width: 640px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes up { from { opacity: 0; transform: translateY(14px); } }
#toasts { position: fixed; z-index: 60; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
@media (max-width: 960px) { #toasts { bottom: 96px; } }
.toast { pointer-events: auto; padding: 12px 18px; border-radius: 999px; background: rgba(30, 26, 48, .95); border: 1px solid var(--line-strong); font-weight: 700; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; animation: up .25s ease; }
.toast.ok svg { color: var(--lime); }
.toast.err svg { color: var(--danger); }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--glass-2); border-top-color: var(--lime); animation: spin .8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.demo-ribbon { position: fixed; bottom: 14px; left: 14px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: rgba(13, 10, 28, .82); color: var(--text-2); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .8); }
.demo-ribbon .dr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 207, 74, .18); flex: none; }
@media (max-width: 960px) { .demo-ribbon { bottom: 96px; left: 12px; font-size: 11px; padding: 4px 10px; } }

/* Legal */
.legal { max-width: 820px; margin: 0 auto; padding: 20px 0 60px; }
.legal .card { padding: 32px; }
.legal h1 { font-size: 34px; font-weight: 900; margin-bottom: 6px; }
.legal h2 { font-size: 20px; margin: 28px 0 10px; color: var(--lime); }
.legal p, .legal li { color: var(--text-2); font-size: 16px; line-height: 1.9; }
.legal ul { padding-inline-start: 20px; margin: 8px 0; }
.legal .upd { color: var(--muted); font-size: 14px; }
.legal .warn { margin: 18px 0; padding: 14px 16px; border-radius: var(--r); background: rgba(255, 207, 74, .08); border: 1px solid rgba(255, 207, 74, .25); color: var(--gold); font-size: 14px; display: flex; gap: 8px; align-items: center; }

/* ============ v4 features ============ */
.goal-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); overflow: hidden; }
.goal-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; background: linear-gradient(to left, var(--purple), var(--pink) 55%, var(--lime)); box-shadow: 0 0 18px rgba(195, 255, 100, .35); transition: width .6s ease; }
[dir="ltr"] .goal-bar i { background: linear-gradient(to right, var(--purple), var(--pink) 55%, var(--lime)); }
.goal-bar.lg { height: 30px; margin-top: 10px; }
.goal-bar.lg span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.ov-goal { padding: 16px 18px; border-radius: 20px; background: rgba(12, 9, 24, .82); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); font-size: 18px; }
.goal-overlay-preview { padding: 18px; border-radius: 18px; background: repeating-conic-gradient(rgba(255, 255, 255, .04) 0 25%, transparent 0 50%) 0 0 / 20px 20px; }
body.overlay-mode { background: transparent !important; }
body.overlay-mode .bg-glow, body.overlay-mode .bg-grid, body.overlay-mode .demo-ribbon { display: none; }
.ov-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.ov-wrap .ov-goal { width: min(760px, 100%); }
.ov-wrap .alert-pop .ap-t { font-size: 34px; text-shadow: 0 3px 12px rgba(0, 0, 0, .7); }
.ov-wrap .alert-pop .ap-m { font-size: 22px; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); color: #fff; }
.ov-hint { position: fixed; bottom: 12px; inset-inline: 0; text-align: center; color: var(--muted); font-size: 13px; }
.tx.cb { opacity: .7; }
.admin-tabs { display: flex; gap: 4px; padding: 6px; border-radius: 20px; overflow-x: auto; }
.admin-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; color: var(--muted); font-weight: 700; font-size: 15px; white-space: nowrap; }
.admin-tabs a:hover { color: var(--text); background: var(--glass); }
.admin-tabs a.on { color: var(--text); background: var(--glass-3); }
.admin-tabs a.on svg { color: var(--lime); }
.admin-tabs .nb { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #1d1600; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.mode-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 560px) { .mode-pick { grid-template-columns: 1fr; } }
.mode { text-align: right; padding: 14px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--glass); color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: inherit; transition: .2s; }
.mode span { font-size: 13px; color: var(--muted); }
.mode.on { border-color: var(--lime); background: rgba(195, 255, 100, .08); box-shadow: 0 0 0 3px rgba(195, 255, 100, .08); }
.mode.on b { color: var(--lime); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip-x { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line); font-size: 14px; }
.chip-x button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--glass-3); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 18px; padding: 0; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 800; font-size: 17px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { transition: transform .2s; color: var(--muted); flex: none; }
.faq details[open] summary svg { transform: rotate(180deg); color: var(--lime); }
.faq details p { padding: 0 20px 18px; color: var(--text-2); line-height: 1.9; }

/* ============ Monthly statement (print-friendly) ============ */
.statement-bar { position: sticky; top: 0; z-index: 10; background: rgba(10, 8, 22, .9); border-bottom: 1px solid var(--line); }
.statement { max-width: 900px; margin: 24px auto 60px; background: #fff; color: #17131F; border-radius: 18px; padding: 40px; box-shadow: var(--shadow); font-size: 14px; }
.statement .num { color: inherit; }
.st-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 20px; border-bottom: 2px solid #17131F; }
.st-logo { height: 44px; width: auto; filter: brightness(.15) saturate(0); }
.st-co { margin-top: 10px; color: #5B546B; font-size: 12px; line-height: 1.7; }
.st-title { text-align: left; }
.st-title h1 { font-size: 24px; font-weight: 900; }
.st-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
.st-grid div, .st-sum div { display: flex; flex-direction: column; gap: 2px; }
.st-grid span, .st-sum span { color: #6B6479; font-size: 12px; }
.st-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.st-sum div { padding: 12px 14px; border: 1px solid #E5E1EC; border-radius: 12px; }
.st-sum b { font-size: 18px; }
.st-sum small { color: #6B6479; font-size: 11px; }
.st-sum .hl { background: #F3FFE0; border-color: #C3FF64; }
.st-table { width: 100%; border-collapse: collapse; }
.st-table th { text-align: right; background: #F4F2F8; padding: 8px 10px; font-size: 12px; color: #4A4458; }
.st-table td { padding: 8px 10px; border-bottom: 1px solid #EEEBF3; }
.st-table tr.cb td { color: #B4233C; }
.st-foot { margin-top: 24px; padding-top: 14px; border-top: 1px solid #E5E1EC; color: #6B6479; font-size: 11px; line-height: 1.8; }
@media (max-width: 700px) { .statement { padding: 20px; margin: 12px; } .st-grid, .st-sum { grid-template-columns: 1fr 1fr; } }
@media print {
  body { background: #fff !important; }
  .bg-glow, .bg-grid, .demo-ribbon, .no-print, #toasts { display: none !important; }
  .statement { box-shadow: none; margin: 0; max-width: none; border-radius: 0; padding: 0; }
  .st-table tr { break-inside: avoid; }
}

/* ============ Tip-page themes ============ */
.tip-theme { background: var(--tp-bg); color: var(--tp-text); min-height: 100vh; }
.tip-theme.is-preview { min-height: 100%; }
.tip-theme .card { background: var(--tp-card); border-color: var(--tp-line); }
.tip-theme .tip-cover { background: var(--tp-cover); border-color: var(--tp-line); }
.tip-theme .muted, .tip-theme .note, .tip-theme .hint, .tip-theme .counter, .tip-theme .tip-head .handle, .tip-theme .field > label { color: var(--tp-muted); }
.tip-theme .tip-head .bio { color: var(--tp-text); opacity: .85; }
.tip-theme .btn-primary { background: var(--tp-accent); color: var(--tp-accent-ink); box-shadow: 0 12px 32px -14px var(--tp-accent); }
.tip-theme .btn-primary:hover { filter: brightness(1.08); background: var(--tp-accent); }
.tip-theme .btn-ghost { color: var(--tp-text); border-color: var(--tp-line); }
.tip-theme .amt-btn { background: var(--tp-card2); border-color: var(--tp-line); color: var(--tp-text); }
.tip-theme .amt-btn.on { border-color: var(--tp-accent); color: var(--tp-accent); background: color-mix(in srgb, var(--tp-accent) 13%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tp-accent) 10%, transparent); }
.tip-theme .input, .tip-theme .textarea { background: var(--tp-input); color: var(--tp-text); border-color: var(--tp-line); }
.tip-theme .input:focus, .tip-theme .textarea:focus { border-color: var(--tp-accent2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tp-accent2) 18%, transparent); }
.tip-theme .fee-box, .tip-theme .top-item, .tip-theme .socials a, .tip-theme .match.wait { background: var(--tp-card2); border-color: var(--tp-line); color: var(--tp-text); }
.tip-theme .fee-box .r.total .num, .tip-theme .lime, .tip-theme .verified { color: var(--tp-accent); }
.tip-theme .link { color: var(--tp-accent2); }
.tip-theme .goal-bar { background: var(--tp-input); border-color: var(--tp-line); }
.tip-theme .goal-bar i { background: linear-gradient(to left, var(--tp-accent2), var(--tp-accent)); box-shadow: none; }
.tip-theme .avatar.xl { border-color: var(--tp-bg); box-shadow: 0 0 0 2px var(--tp-accent), 0 20px 40px -14px var(--tp-accent2); }
.tip-theme .glow-border::before { background: linear-gradient(135deg, var(--tp-accent2), transparent 45%, var(--tp-accent)); }
.tip-theme .check input { accent-color: var(--tp-accent); }
.tip-theme[data-theme="light"] .input::placeholder, .tip-theme[data-theme="light"] .textarea::placeholder { color: #A29BB3; }
.tip-theme[data-theme="light"] .brand img { filter: none; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.theme-sw { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--glass); cursor: pointer; color: var(--text); font-family: inherit; transition: .15s; }
.theme-sw:hover { border-color: rgba(164, 118, 252, .6); }
.theme-sw.on { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(195, 255, 100, .12); }
.theme-sw .sw-prev { height: 54px; border-radius: 11px; background: var(--sw-bg); position: relative; overflow: hidden; display: block; border: 1px solid rgba(255, 255, 255, .08); }
.theme-sw .sw-prev i { position: absolute; inset: 0 0 50% 0; background: linear-gradient(135deg, var(--sw-b), transparent 70%); opacity: .8; }
.theme-sw .sw-prev b { position: absolute; bottom: 8px; inset-inline: 10px; height: 12px; border-radius: 999px; background: var(--sw-a); }
.theme-sw .sw-name { font-size: 13px; font-weight: 700; }
.color-in { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: transparent; padding: 3px; cursor: pointer; }
/* QR */
.qr-card { margin-top: 16px; padding: 22px; border-radius: 22px; text-align: center; background: linear-gradient(160deg, #2A1B55, #0B0818); border: 1px solid var(--line-strong); }
.qr-box { display: inline-block; padding: 10px; border-radius: 18px; background: #fff; line-height: 0; }
.qr-box svg { width: min(240px, 60vw); height: auto; }
.qr-name { font-weight: 900; font-size: 20px; margin-top: 14px; }
.qr-url { color: var(--lime); font-weight: 600; margin-top: 2px; }

/* ---------- landing polish (ideas from specialalert.live) ---------- */
.hero-visual > .example-tag { position: absolute; top: -40px; right: 0; z-index: 4; }
.example-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--line-strong); background: rgba(255, 255, 255, .03); }
@media (max-width: 820px) { .hero-visual > .example-tag { position: static; display: table; margin: 0 auto 10px; } }

.mq-band { position: relative; height: 120px; margin: 40px 0 10px; overflow: hidden; }
.mq-row { position: absolute; left: -5%; width: 110%; direction: ltr; overflow: hidden; padding: 9px 0; }
.mq-row.mq-lime { top: 28px; background: var(--lime); color: var(--lime-ink); transform: rotate(-2.2deg); }
.mq-row.mq-purple { top: 46px; background: var(--purple); color: #140829; transform: rotate(1.8deg); }
.mq-track { display: inline-flex; white-space: nowrap; gap: 18px; align-items: center; font-weight: 800; font-size: 15px; animation: mq 38s linear infinite; }
.mq-purple .mq-track { animation-direction: reverse; }
.mq-track i { font-style: normal; opacity: .7; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

.pop-grid .feat { position: relative; border-radius: 26px; transition: transform .2s ease, box-shadow .2s ease; box-shadow: -10px 10px 0 0 var(--lime); border-color: rgba(195, 255, 100, .45); }
.pop-grid .feat:nth-child(even) { box-shadow: -10px 10px 0 0 var(--purple); border-color: rgba(164, 118, 252, .5); }
.pop-grid .feat:nth-child(even) .ic { background: rgba(164, 118, 252, .12); color: var(--purple-2); border-color: rgba(164, 118, 252, .3); }
.pop-grid .feat:hover { transform: translate(-3px, -3px); }
.pop-grid { gap: 26px 22px; padding: 0 0 10px 10px; }

/* honest hero preview */
.hv-honest { grid-template-columns: 1fr 1fr; }
.hv-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hv-cap { font-size: 13px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.hv-tip { background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hv-av { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--ink); }
.hv-amts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: 6px; }
.hv-amts span { padding: 8px 0; border-radius: 12px; border: 1px solid var(--line-strong); font-weight: 700; font-size: 14px; }
.hv-amts span.on { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.hv-field { width: 100%; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--muted); font-size: 13px; display: flex; align-items: center; padding: 0 12px; text-align: right; }
.hv-pay { width: 100%; padding: 11px; border-radius: 14px; background: var(--lime); color: var(--lime-ink); font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; }
.hv-stream { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(300px 160px at 20% 10%, rgba(164, 118, 252, .45), transparent), radial-gradient(260px 160px at 90% 100%, rgba(195, 255, 100, .25), transparent), linear-gradient(135deg, #1a1236, #08060f); display: grid; place-items: center; padding: 14px; }
.hv-live { position: absolute; top: 10px; right: 10px; font: 800 11px var(--font-num); letter-spacing: .08em; background: #ff2d55; color: #fff; padding: 3px 8px; border-radius: 6px; }
.hv-alert { display: flex; align-items: center; gap: 12px; background: rgba(10, 8, 20, .78); border: 1px solid rgba(195, 255, 100, .35); border-radius: 18px; padding: 12px 16px; animation: bob 5s ease-in-out infinite; text-align: right; }
.hv-alert .ap-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--lime); color: var(--lime-ink); flex: none; }
.hv-alert b { display: block; font-size: 15px; }
.hv-alert small { color: var(--text-2); font-size: 13px; }
.hv-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: right; }
.hv-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.hv-steps li span { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(164, 118, 252, .16); color: var(--purple-2); font-weight: 800; font-size: 13px; flex: none; }
@media (max-width: 820px) { .hv-honest { grid-template-columns: 1fr; } }

/* =====================================================================
   Design studio (preview switcher) + hero/dashboard variants + style levels
   ===================================================================== */
.ds-studio { position: fixed; z-index: 90; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); width: 344px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border-radius: 24px; padding: 14px; background: rgba(13, 10, 28, .94); border: 1px solid rgba(195, 255, 100, .35); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), -8px 8px 0 rgba(164, 118, 252, .55); display: flex; flex-direction: column; gap: 12px; animation: dsIn .35s cubic-bezier(.2, .9, .3, 1.2); }
.ds-studio.closed { width: auto; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
@keyframes dsIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.ds-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.ds-title { display: flex; align-items: center; gap: 10px; }
.ds-title b { display: block; font-size: 16px; }
.ds-title small { display: block; color: var(--muted); font-size: 12px; }
.ds-logo { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--lime); color: var(--lime-ink); flex: none; }
.ds-x { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--glass); color: var(--text); cursor: pointer; display: grid; place-items: center; flex: none; transition: background .2s, border-color .2s; }
.ds-x:hover { background: var(--glass-3); border-color: rgba(195, 255, 100, .5); }
.ds-x svg { transform: rotate(-90deg); }
.ds-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); flex: none; }
.ds-tabs button { font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px; border-radius: 12px; border: 0; background: none; color: var(--text-2); font-weight: 800; font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.ds-tabs button:hover { color: var(--text); background: var(--glass); }
.ds-tabs button.on { background: var(--lime); color: var(--lime-ink); }
.ds-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--purple); color: #12052b; }
.ds-count[hidden] { display: none; }
.ds-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.ds-note { font-size: 12px; color: var(--muted); line-height: 1.6; padding: 8px 10px; border-radius: 12px; background: rgba(164, 118, 252, .08); border: 1px dashed rgba(164, 118, 252, .3); }
.ds-views { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.ds-views a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 12px; font-weight: 800; font-size: 13px; color: var(--text-2); }
.ds-views a:hover { color: var(--text); background: var(--glass); }
.ds-views a.on { background: var(--glass-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ds-group { display: flex; flex-direction: column; gap: 8px; transition: opacity .2s; }
.ds-group.dim { opacity: .55; }
.ds-gt { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ds-gt b { font-size: 13px; font-weight: 800; color: var(--text); }
.ds-gt span { font-weight: 500; color: var(--purple-2); text-align: left; }
.ds-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ds-seg button { position: relative; font-family: inherit; color: var(--text); background: var(--glass); border: 1px solid var(--line-strong); border-radius: 14px; min-height: 48px; padding: 7px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: transform .15s, background .2s, border-color .2s, box-shadow .2s, color .2s; }
.ds-seg button b { font-size: 16px; font-family: var(--font-num); line-height: 1.2; }
.ds-seg button span { font-size: 12px; color: var(--text-2); font-weight: 700; line-height: 1.3; }
.ds-seg.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-seg.n4 button { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 44px; padding: 6px 8px; text-align: right; }
.ds-seg.n4 button b { width: 26px; height: 26px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 14px; background: rgba(255, 255, 255, .06); }
.ds-seg.n4 button span { font-size: 13px; color: var(--text); }
.ds-seg button:hover { border-color: rgba(195, 255, 100, .5); transform: translateY(-1px); }
.ds-seg button.on { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); box-shadow: -4px 4px 0 var(--purple); --ds-ox: -4px; --ds-oy: 4px; --ds-hx: -6px; --ds-hy: 6px; --ds-sw: var(--purple); --ds-sw-ink: #12052b; --ds-rp: rgba(20, 32, 3, .28); }
.ds-seg button.on span { color: var(--lime-ink); }
.ds-seg.n4 button.on b { background: rgba(20, 32, 3, .14); }
.ds-desc { font-size: 12px; color: var(--text-2); line-height: 1.5; min-height: 18px; }
.ds-seg button:focus-visible, .ds-views a:focus-visible, .ds-x:focus-visible, .ds-pill:focus-visible, .ds-tabs button:focus-visible, .ds-sum summary:focus-visible, .ds-foot .btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.ds-tabs button.on:focus-visible, .ds-seg button.on:focus-visible { outline-color: #fff; }
.ds-sum summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--text-2); padding: 4px 2px; border-radius: 8px; }
.ds-sum summary .muted { font-weight: 500; font-size: 12px; }
.ds-sum pre { margin: 6px 0 0; font: 600 13px/1.7 var(--font); color: var(--text); white-space: pre-wrap; background: rgba(0, 0, 0, .3); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 8px 12px; user-select: all; }
.ds-foot { display: flex; gap: 8px; flex: none; padding-top: 10px; border-top: 1px solid var(--line); }
.ds-foot .btn { flex: 1; height: 40px; padding: 0 10px; font-size: 13px; }
.ds-pill { font-family: inherit; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--lime); background: rgba(13, 10, 28, .94); color: var(--text); font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: -5px 5px 0 var(--purple); transition: transform .15s, box-shadow .15s; }
.ds-pill:hover { transform: translate(1px, -1px); box-shadow: -6px 6px 0 var(--purple); }
.ds-pill svg { color: var(--lime); }
.ds-pill .ds-codes { color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
@media (max-width: 760px) {
  .ds-studio { right: 0; left: 0; bottom: 0; width: auto; max-height: 64vh; max-height: 64dvh; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .9); }
  .ds-studio.closed { left: auto; right: 10px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); padding-bottom: 0; }
  .ds-pill .ds-codes { display: none; }
  .ds-title small { display: none; }
}
.ds-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; font-size: 13px; font-weight: 700; color: var(--purple-2); background: rgba(164, 118, 252, .1); border: 1px dashed rgba(164, 118, 252, .4); }
.ds-flash { animation: dsFlash .7s ease; }
@keyframes dsFlash { from { opacity: .35; transform: translateY(8px); } }

/* shared hero bits */
.hero-x { position: relative; }
.hx-alert { display: flex; align-items: center; gap: 12px; background: rgba(10, 8, 20, .82); border: 1px solid rgba(195, 255, 100, .4); border-radius: 18px; padding: 12px 16px; text-align: right; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); }
.hx-alert .ap-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--lime); color: var(--lime-ink); flex: none; }
.hx-alert b { display: block; font-size: 15px; }
.hx-alert small { display: block; color: var(--text-2); font-size: 13px; }
.hx-alert.pop { animation: hxPop .6s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes hxPop { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 100% { opacity: 1; transform: none; } }
.hx-stream { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(420px 260px at 18% 8%, rgba(164, 118, 252, .55), transparent), radial-gradient(360px 240px at 92% 100%, rgba(195, 255, 100, .28), transparent), linear-gradient(135deg, #1a1236, #08060f); display: grid; place-items: center; padding: 20px; }
.hx-stream::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.hx-stream > * { position: relative; z-index: 1; }
.hx-stream .hv-live, .hc-stage .hv-live { position: absolute; top: 14px; right: 14px; z-index: 2; }
.hx-tip { background: rgba(23, 19, 48, .96); border: 1px solid var(--line-strong); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9); }
.spk { position: absolute; font-style: normal; color: var(--lime); font-size: 26px; pointer-events: none; z-index: 2; animation: spk 4s ease-in-out infinite; }
.spk.s1 { top: 6%; right: 4%; }
.spk.s2 { top: 48%; left: 2%; color: var(--purple-2); font-size: 20px; animation-delay: -1.3s; }
.spk.s3 { bottom: 4%; right: 46%; font-size: 16px; animation-delay: -2.6s; }
@keyframes spk { 50% { transform: scale(1.35) rotate(20deg); opacity: .6; } }

/* hero B: split */
.hero-b { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; text-align: right; padding-top: 64px; }
.hero-b h1 { font-size: clamp(42px, 5.6vw, 74px); }
.hero-b p.lead { margin: 18px 0 28px; }
.hero-b .cta { justify-content: flex-start; }
.hb-trust { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--text-2); font-size: 15px; font-weight: 700; }
.hb-trust li { display: flex; align-items: center; gap: 6px; }
.hb-trust svg { color: var(--lime); }
.hb-visual { position: relative; padding: 18px 0 40px 40px; }
.hb-visual > .example-tag { position: absolute; top: -18px; right: 0; z-index: 3; }
.hb-stream { aspect-ratio: 4 / 4.4; }
.hx-bars { position: absolute !important; bottom: 18px; right: 18px; display: flex; gap: 6px; }
.hx-bars i { width: 46px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.hx-bars i:first-child { width: 80px; background: rgba(195, 255, 100, .5); }
.hb-tip { position: absolute; bottom: 0; left: 0; width: 230px; animation: bob 6s ease-in-out infinite; }
@media (max-width: 900px) {
  .hero-b { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .hero-b .cta, .hb-trust { justify-content: center; }
  .hb-visual { padding: 18px 0 0; max-width: 440px; margin: 0 auto; width: 100%; }
  .hb-tip { position: relative; width: 82%; margin: -60px auto 0; }
}

/* hero C: full stream stage */
.hero-c { padding-top: 34px; }
.hc-stage { position: relative; min-height: 600px; border-radius: 34px; overflow: hidden; border: 1px solid rgba(195, 255, 100, .3); background: radial-gradient(700px 380px at 15% 0%, rgba(164, 118, 252, .55), transparent), radial-gradient(600px 360px at 100% 100%, rgba(195, 255, 100, .25), transparent), linear-gradient(160deg, #1d1440, #07060F 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 24px 150px; }
.hc-stage::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%); pointer-events: none; }
.hc-tag { position: absolute; top: 14px; left: 14px; z-index: 2; }
.hc-center { position: relative; z-index: 1; text-align: center; }
.hc-center h1 { font-size: clamp(46px, 8vw, 96px); }
.hc-alert { position: absolute; z-index: 2; bottom: 28px; left: 50%; transform: translateX(-50%); min-width: 320px; }
.hc-alert.pop { animation: hcPop .6s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes hcPop { 0% { opacity: 0; transform: translate(-50%, 14px) scale(.9); } 100% { opacity: 1; transform: translateX(-50%); } }
.hc-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; text-align: right; }
.hc-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 22px; }
.hc-n { position: absolute; top: 10px; left: 14px; font-weight: 800; color: var(--muted); font-size: 13px; }
.hc-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(195, 255, 100, .12); color: var(--lime); border: 1px solid rgba(195, 255, 100, .25); flex: none; }
.hc-step b { display: block; font-size: 15px; }
.hc-step small { color: var(--muted); font-size: 13px; }
.hero-c .platforms { margin-top: 22px; }
@media (max-width: 820px) {
  .hc-stage { min-height: 0; padding: 60px 16px 130px; }
  .hc-alert { min-width: 0; width: calc(100% - 32px); }
  .hc-strip { grid-template-columns: 1fr; }
}

/* dashboard B: balance first */
.dsb { display: flex; flex-direction: column; gap: 16px; }
.dsb-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; padding: 28px; border-radius: 30px; background: radial-gradient(520px 260px at 0% 0%, rgba(195, 255, 100, .2), transparent), radial-gradient(520px 300px at 100% 100%, rgba(164, 118, 252, .45), transparent), linear-gradient(135deg, #24184a, #0f0b22); border: 1px solid var(--line); }
.dsb-lbl { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--lime); font-size: 15px; }
.dsb-amt { font-size: clamp(44px, 6vw, 72px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-top: 6px; direction: ltr; text-align: right; }
.dsb-sub { color: var(--text-2); font-size: 14px; margin-top: 8px; }
.dsb-stats { display: grid; gap: 10px; align-content: center; }
.dsb-st { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 14px 16px; border-radius: 18px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.dsb-st span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; font-size: 14px; }
.dsb-st b { font-size: 22px; direction: ltr; }
.dsb-st small { grid-column: 1 / -1; font-size: 12px; }
.dsb-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dsb-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .dsb-hero, .dsb-grid { grid-template-columns: 1fr; } .dsb-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .dsb-row { grid-template-columns: 1fr; } .dsb-hero { padding: 20px; } }

/* dashboard C: stream mode */
.dsc { display: flex; flex-direction: column; gap: 16px; }
.dsc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 20px; }
.dsc-live { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; padding: 6px 14px; border-radius: 999px; background: #ff2d55; color: #fff; font-size: 14px; }
.dsc-live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: dscBlink 1.4s infinite; }
@keyframes dscBlink { 50% { opacity: .3; } }
.dsc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 700; color: var(--text-2); }
.dsc-chip.ok { color: var(--lime); border-color: rgba(195, 255, 100, .35); }
.dsc-chip.warn { color: var(--gold); border-color: rgba(255, 207, 74, .35); }
.dsc-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .dsc-grid { grid-template-columns: 1fr; } }
.dsc-list { display: flex; flex-direction: column; gap: 8px; }
.dsc-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: right; padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); color: var(--text); font-family: inherit; cursor: pointer; transition: .2s; }
.dsc-item:hover { background: var(--glass-2); }
.dsc-item.first { padding: 18px; border-color: rgba(195, 255, 100, .5); background: linear-gradient(135deg, rgba(195, 255, 100, .12), rgba(164, 118, 252, .12)); }
.dsc-who { display: flex; align-items: baseline; gap: 8px; }
.dsc-who b { font-size: 16px; }
.dsc-who .muted { font-size: 12px; }
.dsc-msg { color: var(--text-2); font-size: 14px; margin-top: 2px; }
.dsc-item.first .dsc-msg { font-size: 17px; color: var(--text); font-weight: 700; }
.dsc-amt { font-weight: 800; font-size: 18px; color: var(--lime); direction: ltr; flex: none; }
.dsc-item.first .dsc-amt { font-size: 28px; }
.qa-big { grid-template-columns: repeat(3, 1fr); }
.qa-big button, .qa-big a { height: 70px; flex-direction: column; gap: 4px; font-size: 13px; }
.nb-in { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #1d1600; font-size: 11px; }
.dsc-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dsc-bal div { display: flex; flex-direction: column; gap: 2px; }
.dsc-bal span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.dsc-bal b { font-size: 22px; direction: ltr; text-align: right; }
@media (max-width: 520px) { .qa-big { grid-template-columns: 1fr 1fr; } }

/* style levels */
.ds-light .pop-grid .feat, .ds-light .pop-grid .feat:nth-child(even) { box-shadow: none; border-color: var(--line); border-radius: var(--r-xl); }
.ds-light .pop-grid .feat:nth-child(even) .ic { background: rgba(195, 255, 100, .1); color: var(--lime); border-color: rgba(195, 255, 100, .2); }
.ds-light .pop-grid { gap: 14px; padding: 0; }
.ds-light .spk { display: none; }

.ds-strong .btn-primary { box-shadow: -5px 5px 0 var(--purple); border: 2px solid var(--lime-ink); }
.ds-strong .btn-primary:hover { box-shadow: -7px 7px 0 var(--purple); transform: translate(2px, -2px); }
.ds-strong .btn-ghost { border-width: 2px; }
.ds-strong .step-card, .ds-strong .compare .card, .ds-strong .hc-step { border-radius: 28px; border: 1.5px solid rgba(164, 118, 252, .55); box-shadow: -10px 10px 0 var(--purple); }
.ds-strong .step-card:nth-child(even), .ds-strong .compare .us, .ds-strong .hc-step:nth-child(even) { border-color: rgba(195, 255, 100, .55); box-shadow: -10px 10px 0 var(--lime); }
.ds-strong .steps, .ds-strong .compare, .ds-strong .hc-strip { gap: 26px 22px; padding-left: 10px; }
.ds-strong .pop-grid .feat { border-width: 2px; border-radius: 30px; box-shadow: -12px 12px 0 var(--lime); }
.ds-strong .pop-grid .feat:nth-child(even) { box-shadow: -12px 12px 0 var(--purple); }
.ds-strong .cta-band { border: 2px solid var(--lime); box-shadow: -14px 14px 0 var(--purple); }
.ds-strong .hero h1 { letter-spacing: -.02em; }
.ds-strong .hero h1 .hl { background: none; color: var(--lime); -webkit-text-stroke: 0; text-shadow: -4px 4px 0 var(--purple); }
.ds-strong .section-head h2 { text-shadow: -3px 3px 0 rgba(164, 118, 252, .55); }
.ds-strong .mq-row { padding: 13px 0; }
.ds-strong .mq-track { font-size: 18px; }
.ds-strong .hx-stream, .ds-strong .hc-stage { border: 2px solid var(--lime); box-shadow: -14px 14px 0 var(--purple); }
.ds-strong .shell .card, .ds-strong .dsb-hero { border-radius: 26px; }
.ds-strong .shell .card { box-shadow: -7px 7px 0 rgba(164, 118, 252, .55); border-color: rgba(164, 118, 252, .4); }
.ds-strong .dsb-hero { border: 2px solid var(--lime); box-shadow: -12px 12px 0 var(--purple); }
.ds-strong .qa .primary { box-shadow: -4px 4px 0 var(--purple); }
@media (prefers-reduced-motion: reduce) { .spk, .hb-tip, .dsc-live i, .ds-studio, .hx-alert.pop, .hc-alert.pop, .ds-flash { animation: none !important; } }

/* =====================================================================
   Design studio: element groups (nav / bg / btn / hover / press)
   كل خيار "أ" = الشكل الحالي (ما فيه كلاس). باقي الخيارات تحت body.ds-<group>-<b|c|d>.
   ترتيب الطبقات مقصود: style (فوق) ← btn ← hover ← press. كل طبقة بعدها تغلب اللي قبلها.
   متغيّرات مشتركة بين الطبقات (ما تغيّر أي شكل بنفسها):
     --ds-acc / --ds-acc-ink / --ds-acc2 : لون الزر الأساسي (يتبع ثيم صفحة الدعم)
     --ds-ox / --ds-oy : اتجاه الظل الثابت للزر (الضغطة العميقة تنزل فيه)
     --ds-hx / --ds-hy / --ds-oc : ظل الستيكر وقت التأشير ولونه
     --ds-sw / --ds-sw-ink : لون التعبئة الجانبية ولون النص فوقها
     --ds-rp : لون الموجة
   ===================================================================== */
body { --ds-acc: var(--lime); --ds-acc-ink: var(--lime-ink); --ds-acc2: var(--purple); }
.tip-theme { --ds-acc: var(--tp-accent); --ds-acc-ink: var(--tp-accent-ink); --ds-acc2: var(--tp-accent2); }
/* الستايل القوي يعطي الزر الأساسي ظل ثابت: نعرّف اتجاهه للضغطة العميقة */
.ds-strong .btn-primary { --ds-ox: -5px; --ds-oy: 5px; --ds-hx: -7px; --ds-hy: 7px; }
.ds-strong .qa .primary { --ds-ox: -4px; --ds-oy: 4px; }

/* تركيز الكيبورد واضح وقت المعاينة */
.ds-on :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw, .navlinks a, .side-nav a, .bottom-nav a, .brand, .link):focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ds-on .tip-theme :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw, .link):focus-visible { outline-color: var(--tp-text); }

/* ---------------- nav ---------------- */
.nav-id { gap: 10px; }
.nav-live { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px; background: rgba(255, 45, 85, .14); border: 1px solid rgba(255, 45, 85, .45); color: #FF9EB2; font-size: 12px; font-weight: 900; white-space: nowrap; line-height: 1; }
.nav-live i { width: 7px; height: 7px; border-radius: 50%; background: #FF2D55; animation: dsLive 1.6s ease-out infinite; }
@keyframes dsLive { 0% { box-shadow: 0 0 0 0 rgba(255, 45, 85, .7); } 100% { box-shadow: 0 0 0 7px rgba(255, 45, 85, 0); } }

/* nav b: شريط كامل بعرض الشاشة + خط ليموني تحت الصفحة المفتوحة */
.ds-nav-b .topnav { padding: 0; background: #0B0918; border-bottom: 1px solid var(--line-strong); box-shadow: 0 12px 30px -24px #000; }
.ds-nav-b .topnav .bar { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; min-height: 66px; }
.ds-nav-b .navlinks { align-self: stretch; gap: 0; }
.ds-nav-b .navlinks a { position: relative; display: flex; align-items: center; padding: 0 16px; border-radius: 0; background: none; }
.ds-nav-b .navlinks a::after { content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--lime); transform: scaleX(0); transition: transform .2s ease; }
.ds-nav-b .navlinks a:hover { background: none; color: var(--text); }
.ds-nav-b .navlinks a:hover::after { transform: scaleX(.35); }
.ds-nav-b .navlinks a.active { background: none; color: var(--lime); }
.ds-nav-b .navlinks a.active::after { transform: none; }
.ds-nav-b .sidebar { background: rgba(9, 7, 19, .72); }
.ds-nav-b .side-nav a { border-start-start-radius: 0; border-end-start-radius: 0; }
.ds-nav-b .side-nav a::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--lime); transform: scaleY(0); transition: transform .2s ease; }
.ds-nav-b .side-nav a.active { background: rgba(195, 255, 100, .06); box-shadow: none; }
.ds-nav-b .side-nav a.active::before { transform: none; }
.ds-nav-b .topbar { background: #0B0918; border-bottom: 1px solid var(--line-strong); }
.ds-nav-b .bottom-nav { bottom: 0; inset-inline: 0; border-radius: 0; border-width: 1px 0 0; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); background: #0B0918; }
.ds-nav-b .bottom-nav a { border-radius: 0; }
.ds-nav-b .bottom-nav a.active { background: none; box-shadow: inset 0 3px 0 var(--lime); }

/* nav c: شريط بث نحيف مثل مشهد OBS */
.ds-nav-c .topnav { padding: 8px 0; }
.ds-nav-c .topnav .bar { border-radius: 10px; padding: 5px 6px 5px 12px; gap: 10px; background: linear-gradient(var(--lime), var(--lime)) top / 100% 2px no-repeat, rgba(8, 6, 16, .92); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 14px 30px -20px #000; }
.ds-nav-c .topnav .brand img { height: 28px !important; }
.ds-nav-c .navlinks { gap: 2px; }
.ds-nav-c .navlinks a { padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.ds-nav-c .navlinks a:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.ds-nav-c .navlinks a.active { background: rgba(195, 255, 100, .12); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(195, 255, 100, .3); }
.ds-nav-c .topnav .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.ds-nav-c .sidebar { padding: 18px 12px; gap: 18px; }
.ds-nav-c .side-nav { gap: 2px; }
.ds-nav-c .side-nav a { padding: 8px 12px; border-radius: 8px; font-size: 14px; gap: 10px; }
.ds-nav-c .side-nav a.active { background: rgba(195, 255, 100, .1); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(195, 255, 100, .28); }
.ds-nav-c .topbar { padding-top: 10px; padding-bottom: 10px; background: linear-gradient(var(--lime), var(--lime)) top / 100% 2px no-repeat, rgba(8, 6, 16, .96); }
.ds-nav-c .topbar .search .input { height: 38px; }
.ds-nav-c .topbar .icon-btn { width: 36px; height: 36px; }
.ds-nav-c .bottom-nav { border-radius: 12px; padding: 4px; bottom: 8px; inset-inline: 8px; }
.ds-nav-c .bottom-nav a { padding: 5px 0; font-size: 10px; border-radius: 8px; }
.ds-nav-c .bottom-nav a.active { background: rgba(195, 255, 100, .1); }

/* nav d: دوك بالنص، أيقونة واسم */
.ds-nav-d .topnav { background: linear-gradient(180deg, rgba(7, 6, 15, .94), rgba(7, 6, 15, .7) 65%, transparent); }
.ds-nav-d .topnav .bar { display: grid; grid-template-columns: 1fr auto 1fr; background: none; border: 0; box-shadow: none; padding: 4px 0; }
.ds-nav-d .topnav .bar > .brand { justify-self: start; }
.ds-nav-d .topnav .bar > .row { justify-self: end; }
.ds-nav-d .navlinks { padding: 6px; gap: 4px; border-radius: 22px; background: linear-gradient(180deg, rgba(38, 32, 60, .82), rgba(20, 17, 34, .9)); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px -20px #000, inset 0 1px 0 rgba(255, 255, 255, .08); }
.ds-nav-d .navlinks a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 66px; padding: 6px 10px; border-radius: 16px; font-size: 12px; line-height: 1.25; text-align: center; }
.ds-nav-d .navlinks a svg { color: var(--muted); transition: transform .2s ease, color .2s; }
.ds-nav-d .navlinks a:hover svg { transform: translateY(-2px); color: var(--text); }
.ds-nav-d .navlinks a.active { background: var(--lime); color: var(--lime-ink); }
.ds-nav-d .navlinks a.active svg { color: var(--lime-ink); }
@media (max-width: 900px) {
  .ds-nav-d .topnav .bar { grid-template-columns: 1fr auto; row-gap: 8px; }
  .ds-nav-d .navlinks, .ds-nav-d .navlinks.hide-sm { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-column: 1 / -1; grid-row: 2; }
  .ds-nav-d .navlinks a { min-width: 0; padding: 6px 2px; font-size: 11px; }
}
.ds-nav-d .side-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds-nav-d .side-nav a { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 4px; border-radius: 18px; font-size: 13px; text-align: center; background: var(--glass); border: 1px solid var(--line); }
.ds-nav-d .side-nav a:hover { background: var(--glass-2); }
.ds-nav-d .side-nav a.active { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); box-shadow: none; }
.ds-nav-d .side-nav a.active svg { color: var(--lime-ink); }
.ds-nav-d .side-nav a .nb { position: absolute; top: 6px; inset-inline-end: 6px; margin: 0; }
.ds-nav-d .bottom-nav a.active { background: var(--lime); color: var(--lime-ink); }

/* ---------------- bg ---------------- */
/* bg b: لون واحد غامق */
.ds-bg-b .bg-glow, .ds-bg-b .bg-grid { display: none; }
/* bg c: شفق متحرك ببطء */
.ds-bg-c .bg-grid { display: none; }
.ds-bg-c .bg-glow { background: radial-gradient(900px 600px at 50% 120%, rgba(210, 140, 242, .12), transparent 70%); }
.ds-bg-c .bg-glow::before, .ds-bg-c .bg-glow::after { content: ""; position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; will-change: transform; }
.ds-bg-c .bg-glow::before { top: -40vmax; right: -25vmax; background: radial-gradient(closest-side, rgba(164, 118, 252, .42), rgba(164, 118, 252, .14) 55%, transparent); animation: dsAur1 28s ease-in-out infinite alternate; }
.ds-bg-c .bg-glow::after { bottom: -45vmax; left: -30vmax; background: radial-gradient(closest-side, rgba(195, 255, 100, .22), rgba(195, 255, 100, .07) 55%, transparent); animation: dsAur2 34s ease-in-out infinite alternate; }
@keyframes dsAur1 { 50% { transform: translate(-22vw, 18vh) scale(1.1); } 100% { transform: translate(-40vw, 34vh) scale(.95); } }
@keyframes dsAur2 { 50% { transform: translate(26vw, -20vh) scale(1.15); } 100% { transform: translate(12vw, -42vh) scale(1); } }
/* bg d: نقاط وخطوط شاشة بث */
.ds-bg-d .bg-glow { background: radial-gradient(900px 480px at 50% -12%, rgba(164, 118, 252, .2), transparent 70%), repeating-linear-gradient(180deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 4px); }
.ds-bg-d .bg-grid { background-image: radial-gradient(rgba(195, 255, 100, .2) 1px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 90%); }

/* ---------------- btn (primary + ghost) ---------------- */
/* btn b: إطار عريض وظل ثابت (ستايل Special Alerts) */
.ds-btn-b .btn { border-radius: 16px; }
.ds-btn-b .btn-primary { background: var(--ds-acc); color: var(--ds-acc-ink); border: 2px solid var(--ds-acc-ink); --ds-ox: -4px; --ds-oy: 4px; --ds-hx: -7px; --ds-hy: 7px; --ds-oc: var(--purple); box-shadow: var(--ds-ox) var(--ds-oy) 0 var(--ds-oc); }
.ds-btn-b .btn-primary:hover { background: var(--ds-acc); filter: none; box-shadow: var(--ds-ox) var(--ds-oy) 0 var(--ds-oc); }
.ds-btn-b .btn-ghost { background: rgba(255, 255, 255, .03); border: 2px solid var(--ds-acc2); --ds-ox: -4px; --ds-oy: 4px; --ds-hx: -7px; --ds-hy: 7px; --ds-oc: var(--ds-acc); box-shadow: var(--ds-ox) var(--ds-oy) 0 var(--ds-oc); }
.ds-btn-b .btn-ghost:hover { background: rgba(164, 118, 252, .12); border-color: var(--ds-acc2); box-shadow: var(--ds-ox) var(--ds-oy) 0 var(--ds-oc); }
/* btn c: زر كيبورد (حافة تحت) */
.ds-btn-c .btn { border-radius: 10px; }
.ds-btn-c .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--ds-acc) 72%, #fff), var(--ds-acc) 55%); color: var(--ds-acc-ink); border: 1px solid color-mix(in srgb, var(--ds-acc) 60%, #000); --ds-ox: 0px; --ds-oy: 4px; --ds-hx: 0px; --ds-hy: 7px; --ds-oc: color-mix(in srgb, var(--ds-acc) 42%, #000); box-shadow: 0 4px 0 var(--ds-oc), 0 12px 20px -10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .55); }
.ds-btn-c .btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--ds-acc) 60%, #fff), var(--ds-acc) 60%); filter: none; box-shadow: 0 4px 0 var(--ds-oc), 0 12px 20px -10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .55); }
.ds-btn-c .btn-ghost { background: linear-gradient(180deg, #2B2443, #19142D); border: 1px solid rgba(255, 255, 255, .14); --ds-ox: 0px; --ds-oy: 4px; --ds-hx: 0px; --ds-hy: 7px; --ds-oc: #05040B; box-shadow: 0 4px 0 var(--ds-oc), 0 12px 20px -10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1); }
.ds-btn-c .btn-ghost:hover { background: linear-gradient(180deg, #342C50, #1E1834); border-color: rgba(255, 255, 255, .2); box-shadow: 0 4px 0 var(--ds-oc), 0 12px 20px -10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ds-btn-c .tip-theme .btn-ghost { background: var(--tp-card2); border-color: var(--tp-line); --ds-oc: color-mix(in srgb, var(--tp-text) 30%, transparent); }
/* btn d: نيون مفرّغ، يتعبّى وقت التأشير */
.ds-btn-d .btn-primary { background: color-mix(in srgb, var(--ds-acc) 6%, transparent); color: var(--ds-acc); border: 1.5px solid var(--ds-acc); --ds-ox: 0px; --ds-oy: 2px; --ds-hx: -5px; --ds-hy: 5px; box-shadow: 0 0 18px -4px color-mix(in srgb, var(--ds-acc) 55%, transparent), inset 0 0 14px -6px color-mix(in srgb, var(--ds-acc) 80%, transparent); }
.ds-btn-d .btn-primary:hover { background: var(--ds-acc); color: var(--ds-acc-ink); filter: none; box-shadow: 0 0 28px -2px color-mix(in srgb, var(--ds-acc) 65%, transparent); }
.ds-btn-d .btn-ghost { background: transparent; color: var(--purple-2); border: 1.5px solid color-mix(in srgb, var(--ds-acc2) 80%, transparent); --ds-ox: 0px; --ds-oy: 2px; --ds-hx: -5px; --ds-hy: 5px; box-shadow: 0 0 16px -6px color-mix(in srgb, var(--ds-acc2) 70%, transparent), inset 0 0 12px -7px color-mix(in srgb, var(--ds-acc2) 90%, transparent); }
.ds-btn-d .btn-ghost:hover { background: var(--ds-acc2); color: #12052B; border-color: var(--ds-acc2); box-shadow: 0 0 24px -4px color-mix(in srgb, var(--ds-acc2) 70%, transparent); }
.ds-btn-d .tip-theme .btn-ghost { color: var(--tp-text); }

/* ---------------- hover (يركب فوق أي شكل زر) ---------------- */
/* hover b: ستيكر يرتفع وظله الملوّن يكبر */
.ds-hover-b :where(.btn-ghost, .icon-btn, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw, .qa button:not(.primary), .qa a:not(.primary)) { --ds-hc: var(--lime); }
.ds-hover-b :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw):not(:disabled):hover, .ds-seg button.dsfx-h-b:hover { transform: translate(calc(var(--ds-hx, -5px) / -2), calc(var(--ds-hy, 5px) / -2)); box-shadow: var(--ds-hx, -5px) var(--ds-hy, 5px) 0 var(--ds-oc, var(--ds-hc, var(--purple))); }
/* hover c: هالة مضيئة بدون حركة (filter عشان ما نلمس ظل الزر نفسه) */
.ds-hover-c :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw), .ds-seg button.dsfx-h-c { transition: transform .15s ease, background .2s, border-color .2s, box-shadow .2s, opacity .2s, color .2s, filter .25s ease; }
.ds-hover-c :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw):not(:disabled):hover, .ds-seg button.dsfx-h-c:hover { transform: none; filter: drop-shadow(0 0 10px rgba(164, 118, 252, .7)); }
.ds-hover-c :is(.btn-primary, .qa .primary):not(:disabled):hover, .ds-seg button.on.dsfx-h-c:hover { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ds-acc) 75%, transparent)) brightness(1.04); }
/* hover d: تعبئة من بداية الزر (يمين في العربي) */
.ds-hover-d :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw), .ds-seg button.dsfx-h-d { position: relative; isolation: isolate; overflow: hidden; }
.ds-hover-d :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw)::before, .ds-seg button.dsfx-h-d::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ds-sw, var(--lime)); transform: scaleX(0); transform-origin: right center; transition: transform .3s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }
[dir="ltr"] .ds-hover-d :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw)::before { transform-origin: left center; }
.ds-hover-d :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw):not(:disabled):hover::before, .ds-seg button.dsfx-h-d:hover::before { transform: none; }
.ds-hover-d :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw):not(:disabled):hover, .ds-seg button.dsfx-h-d:hover { transform: none; color: var(--ds-sw-ink, var(--lime-ink)); }
.ds-seg button.dsfx-h-d:hover span { color: inherit; }
.ds-hover-d :is(.btn-primary, .qa .primary) { --ds-sw: var(--purple); --ds-sw-ink: #12052B; }
.ds-hover-d :is(.tx, .dsc-item, .theme-sw) { --ds-sw: rgba(195, 255, 100, .1); --ds-sw-ink: var(--text); }
.ds-hover-d :is(.tx, .dsc-item, .theme-sw):hover { border-color: rgba(195, 255, 100, .45); }
.ds-hover-d .tip-theme :is(.btn-ghost, .amt-btn, .icon-btn) { --ds-sw: var(--tp-accent); --ds-sw-ink: var(--tp-accent-ink); }
.ds-hover-d .tip-theme .btn-primary { --ds-sw: var(--tp-text); --ds-sw-ink: var(--tp-bg); }
.ds-btn-d.ds-hover-d .btn-primary { --ds-sw: var(--ds-acc); --ds-sw-ink: var(--ds-acc-ink); }
.ds-btn-d.ds-hover-d .btn-ghost { --ds-sw: var(--ds-acc2); --ds-sw-ink: #12052B; }
.ds-btn-d.ds-hover-d .btn-primary:not(:disabled):hover { background: color-mix(in srgb, var(--ds-acc) 6%, transparent); }
.ds-btn-d.ds-hover-d .btn-ghost:not(:disabled):hover { background: transparent; }
/* الستايل القوي يكبّر ظل الزر الأساسي وقت التأشير؛ مع الهالة والتعبئة نخلي ظله ثابت (لو شكل الزر "أ") */
.ds-strong:is(.ds-hover-c, .ds-hover-d):not(.ds-btn-b):not(.ds-btn-c):not(.ds-btn-d) .btn-primary:not(:disabled):hover { box-shadow: -5px 5px 0 var(--purple); }

/* ---------------- press (يركب فوق التأشير) ---------------- */
/* press b: الزر ينزل داخل ظله */
.ds-press-b :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw):not(:disabled):active, .ds-seg button.dsfx-p-b:active { transform: translate(var(--ds-ox, 0px), var(--ds-oy, 3px)); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .45); transition-duration: .05s; }
/* press c: موجة من مكان الضغط (العنصر span.ds-ripple يضيفه JS) */
.ds-press-c :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw), .ds-seg button.dsfx-p-c { position: relative; isolation: isolate; overflow: hidden; }
.ds-press-c :is(.btn-primary, .qa .primary, .amt-btn.on) { --ds-rp: rgba(20, 32, 3, .28); }
.ds-press-c .tip-theme .btn-primary { --ds-rp: color-mix(in srgb, var(--tp-accent-ink) 30%, transparent); }
.ds-ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: var(--ds-rp, rgba(195, 255, 100, .45)); transform: scale(0); opacity: 1; animation: dsRipple .62s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes dsRipple { to { transform: scale(1); opacity: 0; } }
/* press d: ينضغط وبعدين ينط (الرجعة فيها ارتداد) */
.ds-press-d :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw):not(:disabled), .ds-seg button.dsfx-p-d { transition: transform .5s cubic-bezier(.34, 1.9, .5, 1), background .2s, border-color .2s, box-shadow .2s, opacity .2s, color .2s, filter .25s; }
.ds-press-d :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw):not(:disabled):active, .ds-seg button.dsfx-p-d:active { transform: scale(1.06, .86); transition-duration: .09s; transition-timing-function: ease-out; }
.ds-press-d :is(.tx, .dsc-item, .btn-block):not(:disabled):active { transform: scale(1.015, .94); }

@media (prefers-reduced-motion: reduce) {
  .nav-live i, .ds-bg-c .bg-glow::before, .ds-bg-c .bg-glow::after, .ds-ripple { animation: none !important; }
  .ds-ripple { display: none; }
  .ds-hover-d :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw)::before, .ds-seg button.dsfx-h-d::before { transition: none; }
  .ds-press-d :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw):not(:disabled), .ds-seg button.dsfx-p-d { transition-timing-function: ease; transition-duration: .15s; }
  .ds-press-d :is(.btn, .icon-btn, .qa button, .qa a, .amt-btn, .me-chip, .tx, .dsc-item, .theme-sw):not(:disabled):active, .ds-seg button.dsfx-p-d:active, .ds-press-d :is(.tx, .dsc-item, .btn-block):not(:disabled):active { transform: scale(.97); }
}