:root {
  /* ===== Core surfaces ===== */
  --bg: #f3efff;
  --surface: rgba(255,255,255,.82);
  --surface-solid: #ffffff;
  --surface-soft: #ede8ff;
  --surface-elevated: #ffffff;
  --surface-sunken: #eee8fb;
  --text: #241c3f;
  --text-secondary: #635a7d;
  --text-muted: #948aab;

  /* ===== Brand (purple stays primary) ===== */
  --primary: #7c5cf0;
  --primary-dark: #5f42d6;
  --primary-soft: #e9e1ff;
  --accent: #a78bfa;

  /* ===== Colorful Claymorphism accent system =====
     Each accent has: base color, soft tint (for chips/badges/backgrounds),
     and a shadow-tinted rgba used for glows on that accent. */
  --clay-purple: #7c5cf0;   --clay-purple-soft: #ece4ff;  --clay-purple-shadow: rgba(124,92,240,.35);
  --clay-lavender: #a78bfa; --clay-lavender-soft: #f1eaff; --clay-lavender-shadow: rgba(167,139,250,.32);
  --clay-blue: #4f8ef7;     --clay-blue-soft: #e2edff;    --clay-blue-shadow: rgba(79,142,247,.32);
  --clay-cyan: #22b8d4;     --clay-cyan-soft: #dcf5fa;    --clay-cyan-shadow: rgba(34,184,212,.32);
  --clay-pink: #f0599f;     --clay-pink-soft: #ffe6f2;    --clay-pink-shadow: rgba(240,89,159,.32);
  --clay-coral: #ff7a68;    --clay-coral-soft: #ffe7e2;   --clay-coral-shadow: rgba(255,122,104,.32);
  --clay-orange: #ff9c4a;   --clay-orange-soft: #ffead9;  --clay-orange-shadow: rgba(255,156,74,.32);
  --clay-yellow: #f0b429;   --clay-yellow-soft: #fff3d6;  --clay-yellow-shadow: rgba(240,180,41,.32);
  --clay-green: #2bb673;    --clay-green-soft: #dcf7e9;   --clay-green-shadow: rgba(43,182,115,.32);

  /* ===== Semantic mapping onto the accent system ===== */
  --success: var(--clay-green);
  --success-soft: var(--clay-green-soft);
  --warning: var(--clay-orange);
  --warning-soft: var(--clay-orange-soft);
  --danger: #e8596b;
  --danger-soft: #ffe3e7;
  --info: var(--clay-blue);
  --info-soft: var(--clay-blue-soft);

  --border: rgba(105, 88, 175, .13);

  /* ===== Radius scale ===== */
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 13px;
  --radius-pill: 999px;

  /* =====  Claymorphism depth system (5 levels) =====
     1. bg canvas -> no shadow, just gradients (see body)
     2. soft surface / sunken (inputs, wells) -> shadow-well (inset)
     3. soft card -> shadow-clay
     4. elevated card / hovered -> shadow-hover
     5. interactive control resting -> shadow-control; :active -> shadow-pressed */
  --shadow-well: inset 3px 3px 7px rgba(93,75,159,.10), inset -3px -3px 7px rgba(255,255,255,.75);
  --shadow-clay: 16px 16px 38px rgba(104, 86, 169, .13), -10px -10px 26px rgba(255,255,255,.9), inset 1px 1px 0 rgba(255,255,255,.85), inset -1px -1px 0 rgba(107,88,180,.04);
  --shadow-soft: 0 14px 36px rgba(92,73,176,.10);
  --shadow-hover: 0 22px 52px rgba(92,73,176,.20), -8px -8px 20px rgba(255,255,255,.9);
  --shadow-control: 6px 6px 14px rgba(93,75,159,.14), -5px -5px 12px rgba(255,255,255,.85);
  --shadow-pressed: inset 4px 4px 9px rgba(93,75,159,.16), inset -3px -3px 7px rgba(255,255,255,.6);
  --highlight: rgba(255,255,255,.92);

  --gradient-primary: linear-gradient(135deg, #8c73f4 0%, #6c4fe0 100%);
  --gradient-soft: linear-gradient(135deg, #f1edff 0%, #e6deff 100%);
  --gradient-warm: linear-gradient(135deg, #ff9c4a 0%, #f0599f 100%);
  --gradient-cool: linear-gradient(135deg, #4f8ef7 0%, #22b8d4 100%);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Legacy aliases kept so existing PHP/JS fragments remain compatible. */
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface-soft);
  --bg-card: var(--surface-solid);
  --bg-card-hover: #f8f5ff;
  --text-primary: var(--text);
  --border-color: var(--border);
  --gradient-master: var(--gradient-primary);
  --heading: "Poppins", var(--font);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  min-height:100vh;
  overflow-x:clip;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 6%, rgba(172,151,255,.24), transparent 30%),
    radial-gradient(circle at 90% 14%, rgba(79,142,247,.14), transparent 34%),
    radial-gradient(circle at 82% 68%, rgba(240,89,159,.10), transparent 32%),
    radial-gradient(circle at 8% 78%, rgba(43,182,115,.09), transparent 30%),
    linear-gradient(180deg, #faf9ff 0%, var(--bg) 55%, #f2effd 100%);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select { font:inherit; }
button { border:0; }
a { color:inherit; }
img { max-width:100%; }
::selection { background:#dcd4ff; color:#34285e; }
:focus-visible { outline:3px solid rgba(124,92,240,.35); outline-offset:3px; }

.bg-effects { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bg-effects .orb { position:absolute; border-radius:50%; filter:blur(74px); opacity:.42; }
.bg-effects .orb:nth-child(1){ width:420px;height:420px;background:#d9d0ff;top:-180px;left:-140px; }
.bg-effects .orb:nth-child(2){ width:360px;height:360px;background:#cfe3ff;right:-150px;top:20%; }
.bg-effects .orb:nth-child(3){ width:330px;height:330px;background:#ffd7ea;left:38%;bottom:-180px; }
.bg-effects .orb:nth-child(4){ width:300px;height:300px;background:#cdf3e6;left:-120px;bottom:10%; }
.bg-effects .orb:nth-child(5){ width:260px;height:260px;background:#ffe6c2;right:8%;bottom:-140px; }
.bg-effects .orb:nth-child(n+6){ display:none; }
.grid-overlay { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.28; background-image:linear-gradient(rgba(118,99,190,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(118,99,190,.035) 1px, transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom, #000, transparent 75%); }
.noise { display:none; }
.wrap { position:relative; z-index:1; }
.container { width:min(1240px, calc(100% - 40px)); margin:0 auto; }

.navbar { position:sticky; top:14px; z-index:1000; width:min(1240px, calc(100% - 28px)); margin:14px auto 0; background:rgba(255,255,255,.74); border:1px solid rgba(255,255,255,.9); border-radius:24px; box-shadow:var(--shadow-clay); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.navbar-inner { min-height:72px; padding:10px 14px 10px 18px; display:flex; align-items:center; gap:18px; }
.logo { display:flex; align-items:center; gap:11px; min-width:max-content; font:800 20px var(--heading); cursor:pointer; color:#2b2346; }
.logo-icon { width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--gradient-primary);color:#fff;box-shadow:inset 2px 2px 5px rgba(255,255,255,.35), 7px 7px 15px rgba(102,84,190,.22); }
.nav-links { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; }
.nav-links > a,.dropbtn { padding:11px 14px; border-radius:12px; color:var(--text-secondary); font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; transition:.22s ease; }
.nav-links > a:hover,.nav-links > a.active,.dropbtn:hover,.dropbtn.active { color:var(--primary-dark); background:var(--primary-soft); box-shadow:var(--shadow-well); }
.dropdown { position:relative; }
.dropbtn { display:flex; align-items:center; gap:7px; }
.dropbtn i { font-size:10px; transition:.2s; }
.dropbtn.active i { transform:rotate(180deg); }
.dropdown-content { display:none; position:absolute; top:calc(100% + 10px); left:0; min-width:220px; padding:8px; background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-clay); }
.dropdown-content.open { display:block; animation:menuIn .2s ease; }
.dropdown-content a { display:flex; gap:10px; padding:11px 12px; border-radius:11px; text-decoration:none; font-size:13px; font-weight:700; color:var(--text-secondary); }
.dropdown-content a:hover { color:var(--primary-dark); background:var(--primary-soft); }
.dropdown-content i { width:18px; color:var(--primary); }
.mobile-toggle { display:none; width:44px;height:44px;border-radius:14px;background:var(--gradient-soft);color:var(--primary-dark);cursor:pointer;box-shadow:var(--shadow-control); }
.mobile-toggle:active { box-shadow:var(--shadow-pressed); }

.btn-glow,.btn-buy,.btn-glow-video,.btn-glow-trial,.btn-glow-continue,.btn-glow-small { display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; text-decoration:none; color:#fff; background:var(--gradient-primary); border-radius:15px; padding:12px 18px; font-weight:800; font-size:13px; box-shadow:8px 8px 18px rgba(101,82,190,.2), inset 1px 1px 0 rgba(255,255,255,.3); transition:.2s ease; }
.btn-glow:hover,.btn-buy:hover,.btn-glow-video:hover,.btn-glow-trial:hover,.btn-glow-continue:hover,.btn-glow-small:hover { transform:translateY(-2px); box-shadow:10px 13px 24px rgba(101,82,190,.25), inset 1px 1px 0 rgba(255,255,255,.32); }
.btn-glow:active,.btn-buy:active,.btn-glow-video:active,.btn-glow-trial:active,.btn-glow-continue:active,.btn-glow-small:active { transform:translateY(0); box-shadow:var(--shadow-pressed); }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:14px; background:rgba(255,255,255,.8); border:1px solid var(--border); color:var(--text); font-weight:750; cursor:pointer; box-shadow:var(--shadow-control); transition:.2s ease; }
.btn-secondary:hover { transform:translateY(-2px); border-color:rgba(124,92,240,.26); color:var(--primary-dark); }
.btn-secondary:active { transform:translateY(0); box-shadow:var(--shadow-pressed); }

/* Semantic tactile buttons for confirm/destructive/info actions across admin + storefront */
.btn-success { background:var(--clay-green); color:#fff; box-shadow:8px 8px 16px var(--clay-green-shadow), inset 1px 1px 0 rgba(255,255,255,.3); }
.btn-warning { background:var(--clay-orange); color:#fff; box-shadow:8px 8px 16px var(--clay-orange-shadow), inset 1px 1px 0 rgba(255,255,255,.3); }
.btn-info { background:var(--clay-blue); color:#fff; box-shadow:8px 8px 16px var(--clay-blue-shadow), inset 1px 1px 0 rgba(255,255,255,.3); }
.btn-danger { background:#fff0f2; color:var(--danger); border:1px solid rgba(232,89,107,.2); box-shadow:var(--shadow-control); }
.btn-danger:hover { background:var(--danger); color:#fff; transform:translateY(-2px); }

.toast-container { position:fixed; right:22px; bottom:22px; z-index:5000; display:flex; flex-direction:column; gap:10px; width:min(360px, calc(100vw - 32px)); }
.toast { display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:16px; background:linear-gradient(135deg,#5f49d8,#7c5cf0); border:1px solid rgba(255,255,255,.35); box-shadow:10px 12px 24px rgba(73,52,150,.24),inset 2px 2px 5px rgba(255,255,255,.2); color:#fff!important; font-size:13px; font-weight:800; animation:toastIn .25s ease; border-left:4px solid rgba(255,255,255,.75); }
.toast span{color:#fff!important;-webkit-text-fill-color:#fff!important}
.toast.success{background:linear-gradient(135deg,#159b68,#2bb673);border-left-color:#fff}
.toast.error{background:linear-gradient(135deg,#d94b62,#ef6b7b);border-left-color:#fff}
.toast.warning{background:linear-gradient(135deg,#e58a22,#f0b429);border-left-color:#fff}
.toast.success { border-left-color:var(--success); }
.toast.error { border-left-color:var(--danger); }
.toast.warning { border-left-color:var(--warning); }
.loading-overlay { position:fixed!important; inset:0; display:grid!important; place-items:center; gap:12px; background:rgba(246,243,255,.72)!important; backdrop-filter:blur(12px); z-index:4000!important; color:var(--text)!important; }
.spinner { width:42px!important;height:42px!important;border-radius:50%;border:4px solid #ded8f5!important;border-top-color:var(--primary)!important;animation:spin .8s linear infinite; }

.premium-footer { margin-top:80px; padding-top:45px; background:rgba(255,255,255,.55); border-top:1px solid var(--border); }
.footer-container { width:min(1240px, calc(100% - 40px)); margin:auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:42px; }
.footer-logo { display:flex; align-items:center; gap:10px; font:800 20px var(--heading); }
.footer-logo .logo-icon { width:38px;height:38px;font-size:15px; }
.footer-about { margin-top:16px; max-width:430px; color:var(--text-secondary); line-height:1.8; font-size:13px; }
.footer-col h4 { font:800 14px var(--heading); margin-bottom:16px; }
.footer-col ul { list-style:none; display:grid; gap:10px; }
.footer-col li,.footer-col a { color:var(--text-secondary); font-size:13px; text-decoration:none; }
.footer-col a:hover { color:var(--primary-dark); }
 .footer-socials { display:flex; gap:11px; margin-top:20px; flex-wrap:wrap; }
.social-link { width:40px;height:40px;display:grid;place-items:center;border-radius:13px;text-decoration:none;border:1px solid rgba(255,255,255,.85);transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;box-shadow:0 8px 18px rgba(80,70,160,.12),inset 2px 2px 5px rgba(255,255,255,.9),inset -2px -2px 5px rgba(80,70,160,.08); }
.social-link.fb { color:#1877f2; background:linear-gradient(145deg,#e9f2ff,#cfe2ff); }
.social-link.tw { color:#168fe8; background:linear-gradient(145deg,#e8f7ff,#c9eaff); }
.social-link.ig { color:#e84393; background:linear-gradient(145deg,#ffe8f3,#ffd0e5); }
.social-link.yt { color:#e53935; background:linear-gradient(145deg,#ffe9e9,#ffd0d0); }
.social-link.tg { color:#149ed0; background:linear-gradient(145deg,#e5f8ff,#c9edfa); }
.social-link.wa { color:#19a963; background:linear-gradient(145deg,#e4faee,#c9f0db); }
.social-link:hover { transform:translateY(-4px) scale(1.06);filter:saturate(1.08);box-shadow:0 12px 24px rgba(80,70,160,.18),inset 2px 2px 5px rgba(255,255,255,.95),inset -2px -2px 6px rgba(80,70,160,.1); }
.social-link.fb:hover { color:#1877f2; background:linear-gradient(145deg,#dceaff,#c1dbff); }
.social-link.tw:hover { color:#168fe8; background:linear-gradient(145deg,#dcf4ff,#bde5fa); }
.social-link.ig:hover { color:#e84393; background:linear-gradient(145deg,#ffe0ef,#ffc4df); }
.social-link.yt:hover { color:#e53935; background:linear-gradient(145deg,#ffdddd,#ffc2c2); }
.social-link.tg:hover { color:#149ed0; background:linear-gradient(145deg,#d9f5ff,#bce7f6); }
.social-link.wa:hover { color:#19a963; background:linear-gradient(145deg,#d9f8e7,#b9e9ce); }.contact-info i { width:18px; color:var(--primary); }
.footer-bottom { border-top:1px solid var(--border); }
.footer-bottom-inner { width:min(1240px, calc(100% - 40px)); min-height:68px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--text-muted); font-size:11px; }
.footer-bottom-links,.footer-payments { display:flex; gap:15px; flex-wrap:wrap; }
.footer-bottom a { text-decoration:none; color:var(--text-muted); }
.footer-payments i { font-size:19px; }

.sticky-wa,.scroll-top { position:fixed; z-index:1100; display:grid; place-items:center; border-radius:50%; cursor:pointer; text-decoration:none; }
.sticky-wa { width:54px;height:54px;right:22px;bottom:22px;background:#fff;color:var(--clay-green);border:1px solid rgba(43,182,115,.16);box-shadow:var(--shadow-clay);font-size:25px; }
.scroll-top { width:44px;height:44px;right:24px;bottom:88px;background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-soft);opacity:0;pointer-events:none;transform:translateY(8px);transition:.25s; }
.scroll-top.visible { opacity:1; pointer-events:auto; transform:none; }

.reveal { opacity:0; transform:translateY(14px); transition:.55s ease; }
.reveal.visible { opacity:1; transform:none; }
.empty-state { grid-column:1/-1; text-align:center; padding:60px 20px; border-radius:var(--radius-lg); background:rgba(255,255,255,.65); border:1px solid var(--border); box-shadow:var(--shadow-clay); }
.empty-state h3 { font:800 22px var(--heading); margin-bottom:8px; }

/* Generic badge color helpers usable anywhere in storefront + admin */
.badge-info { background:var(--clay-blue-soft); color:#2a63c4; }
.badge-warn { background:var(--clay-orange-soft); color:#b9600f; }
.badge-danger { background:var(--danger-soft); color:#b6394a; }
.badge-lavender { background:var(--clay-lavender-soft); color:#6b46c9; }

@keyframes menuIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

@media (max-width:900px){
  .nav-links { position:absolute; top:calc(100% + 10px); left:0; right:0; display:none; flex-direction:column; align-items:stretch; padding:10px; background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-clay); }
  .nav-links.open { display:flex; }
  .nav-links > a,.dropbtn { width:100%; }
  .dropdown-content { position:static; box-shadow:none; border:0; background:var(--surface-soft); margin-top:4px; }
  .mobile-toggle { display:grid; place-items:center; margin-left:auto; }
  .navbar .btn-glow { display:none; }
  .footer-container { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .container,.footer-container,.footer-bottom-inner { width:min(100% - 24px, 1240px); }
  .navbar { width:calc(100% - 16px); top:8px; margin-top:8px; }
  .navbar-inner { min-height:62px; }
  .logo { font-size:18px; }
  .logo-icon { width:38px;height:38px; }
  .footer-container { grid-template-columns:1fr; gap:28px; }
  .footer-bottom-inner { padding:16px 0; flex-direction:column; align-items:flex-start; }
  .sticky-wa { right:15px; bottom:15px; }
  .scroll-top { right:17px; bottom:82px; }
}
.footer { width:min(900px,calc(100% - 40px)); margin:25px auto; padding:18px; text-align:center; border-radius:20px; background:rgba(255,255,255,.7); border:1px solid var(--border); box-shadow:var(--shadow-clay); color:var(--text-muted); }
.footer-brand { font:800 18px var(--heading); color:var(--text); }.footer-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:9px 0}.footer-links a{font-size:11px;text-decoration:none;color:var(--text-secondary)}.footer-copy{font-size:10px}


/* =========================================================
   DEVWHIZ PRODUCTION CLAY SYSTEM — COLOR + RESPONSIVENESS
   ========================================================= */
:root{
  --clay-ink:#28213f;
  --clay-purple:#7c5cf0;
  --clay-blue:#4f8ef7;
  --clay-cyan:#22b8d4;
  --clay-green:#2bb673;
  --clay-orange:#ff9c4a;
  --clay-coral:#ff6f61;
  --clay-pink:#f0599f;
  --clay-yellow:#f0b429;
  --clay-lavender:#a78bfa;

  --clay-surface:rgba(255,255,255,.84);
  --clay-shadow-purple:0 16px 34px rgba(124,92,240,.16), inset 2px 2px 0 rgba(255,255,255,.9), inset -2px -2px 5px rgba(124,92,240,.045);
  --clay-shadow-blue:0 16px 34px rgba(79,142,247,.15), inset 2px 2px 0 rgba(255,255,255,.9), inset -2px -2px 5px rgba(79,142,247,.045);
  --clay-shadow-green:0 16px 34px rgba(43,182,115,.15), inset 2px 2px 0 rgba(255,255,255,.9), inset -2px -2px 5px rgba(43,182,115,.045);
  --clay-shadow-orange:0 16px 34px rgba(255,156,74,.16), inset 2px 2px 0 rgba(255,255,255,.9), inset -2px -2px 5px rgba(255,156,74,.045);
  --clay-shadow-pink:0 16px 34px rgba(240,89,159,.15), inset 2px 2px 0 rgba(255,255,255,.9), inset -2px -2px 5px rgba(240,89,159,.045);
}

html{overflow-x:clip}
body{overflow-x:clip}
button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent; }
button{min-height:42px}
a{overflow-wrap:anywhere}
img{height:auto}

/* Strong readability: clay depth must never sacrifice text contrast. */
.text-muted{color:var(--text-muted)}
.modal-box strong,
.modal-box p strong,
.modal-box label,
.modal-box span{color:inherit}
.modal-box p strong{color:var(--text)!important}
.modal-box .price,
.modal-box .total,
.modal-box .final-price{color:var(--success)!important}

/* Shared tactile controls */
.btn-glow,.btn-buy,.btn-glow-video,.btn-glow-trial,.btn-glow-continue,.btn-glow-small,
.btn-secondary,.btn-success,.btn-warning,.btn-info{
  min-height:44px;
  border-radius:16px;
  line-height:1.15;
}
.btn-glow:focus-visible,.btn-secondary:focus-visible,
.btn-success:focus-visible,.btn-warning:focus-visible,.btn-info:focus-visible{
  outline:3px solid rgba(79,142,247,.32);
  outline-offset:3px;
}

/* Colored active/selected states must always have readable text. */
.pill.active,.admin-nav-item.active{
  color:#fff!important;
  -webkit-text-fill-color:#fff;
}
.pill.active i,.admin-nav-item.active i{color:#fff!important}

/* Clay tabs / pills use a rotating accent rhythm. */
.pill:nth-of-type(6n+1).active{background:linear-gradient(135deg,#7c5cf0,#a78bfa)!important}
.pill:nth-of-type(6n+2).active{background:linear-gradient(135deg,#4f8ef7,#22b8d4)!important}
.pill:nth-of-type(6n+3).active{background:linear-gradient(135deg,#2bb673,#22b8d4)!important}
.pill:nth-of-type(6n+4).active{background:linear-gradient(135deg,#ff7a68,#f0599f)!important}
.pill:nth-of-type(6n+5).active{background:linear-gradient(135deg,#f0b429,#ff9c4a)!important}
.pill:nth-of-type(6n+6).active{background:linear-gradient(135deg,#a78bfa,#f0599f)!important}

/* Prevent fixed widgets from covering content on small screens. */
.toast-container{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));}
#liveNotification{bottom:max(84px,calc(72px + env(safe-area-inset-bottom)));}

/* Better mobile nav: one coherent clay panel, no clipped menu. */
@media (max-width:900px){
  .navbar{z-index:2000}
  .nav-links{max-height:calc(100vh - 105px);overflow:auto}
}
@media (max-width:620px){
  .navbar-inner{padding:8px 10px 8px 12px;gap:10px}
  .navbar{border-radius:20px}
  .nav-links{left:0;right:0;padding:10px;border-radius:20px}
  .nav-links > a,.dropbtn{min-height:46px;display:flex;align-items:center}
  .dropdown-content.open{display:block}
  .toast-container{width:calc(100vw - 24px);left:12px;right:12px}
  .toast{font-size:12px;line-height:1.4}
  .modal-overlay{padding:10px}
  .modal-box{max-height:calc(100dvh - 20px);padding:20px;border-radius:24px}
}
@media (max-width:380px){
  .logo{font-size:16px}
  .logo-icon{width:36px;height:36px}
  .mobile-toggle{width:40px;height:40px}
  .modal-box{padding:16px}
}