:root{
  --bg:#000000;--card:#0d0d0d;--deep:#000000;
  --green:#166534;--green2:#16a34a;--green3:#22c55e;
  --cream:#fefce8;--cream2:#fef9c3;--creamdim:rgba(254,252,232,.08);
  --white:#f0fdf4;--moon:#bbf7d0;--muted:#6b7280;
  --border:rgba(255,255,255,.1);--borderhi:rgba(254,252,232,.3);
  --cdim:rgba(22,163,74,.06);
  --shadow:0 4px 24px rgba(0,0,0,.8);
  --radius:14px;
}
/* Light mode override (optional toggle) */
body.light-mode {
  --bg:#f9fafb;--card:#ffffff;--deep:#f3f4f6;
  --moon:#111827;--muted:#6b7280;
  --white:#111827;--border:rgba(0,0,0,.1);--cream:#111827;
  --cream2:#374151;--creamdim:rgba(0,0,0,.05);
}
body.light-mode .s-av{color:#000 !important;font-weight:800;text-shadow:none}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--white);overflow:hidden}
button,input,textarea,select{font-family:'DM Sans',sans-serif}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ── AUTH ── */
#auth-screen{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--deep)}
#auth-screen::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -5%,rgba(22,163,74,.18),transparent);pointer-events:none}
@keyframes mindvora-colors{
  0%   {color:#166534}
  3%   {color:#16a34a}
  6%   {color:#22c55e}
  9%   {color:#4ade80}
  12%  {color:#0ea5e9}
  15%  {color:#38bdf8}
  18%  {color:#0284c7}
  21%  {color:#1d4ed8}
  24%  {color:#3b82f6}
  27%  {color:#6366f1}
  30%  {color:#8b5cf6}
  33%  {color:#a855f7}
  36%  {color:#d946ef}
  39%  {color:#ec4899}
  42%  {color:#f43f5e}
  45%  {color:#ef4444}
  48%  {color:#dc2626}
  51%  {color:#ea580c}
  54%  {color:#f97316}
  57%  {color:#f59e0b}
  60%  {color:#eab308}
  63%  {color:#facc15}
  66%  {color:#84cc16}
  69%  {color:#65a30d}
  72%  {color:#14b8a6}
  75%  {color:#06b6d4}
  78%  {color:#0891b2}
  81%  {color:#7c3aed}
  84%  {color:#be185d}
  87%  {color:#9f1239}
  90%  {color:#b45309}
  93%  {color:#15803d}
  96%  {color:#0f766e}
  100% {color:#166534}
}
@keyframes mindvora-colors-nav{
  0%   {color:#166534}
  3%   {color:#16a34a}
  6%   {color:#22c55e}
  9%   {color:#4ade80}
  12%  {color:#0ea5e9}
  15%  {color:#38bdf8}
  18%  {color:#0284c7}
  21%  {color:#1d4ed8}
  24%  {color:#3b82f6}
  27%  {color:#6366f1}
  30%  {color:#8b5cf6}
  33%  {color:#a855f7}
  36%  {color:#d946ef}
  39%  {color:#ec4899}
  42%  {color:#f43f5e}
  45%  {color:#ef4444}
  48%  {color:#dc2626}
  51%  {color:#ea580c}
  54%  {color:#f97316}
  57%  {color:#f59e0b}
  60%  {color:#eab308}
  63%  {color:#facc15}
  66%  {color:#84cc16}
  69%  {color:#65a30d}
  72%  {color:#14b8a6}
  75%  {color:#06b6d4}
  78%  {color:#0891b2}
  81%  {color:#7c3aed}
  84%  {color:#be185d}
  87%  {color:#9f1239}
  90%  {color:#b45309}
  93%  {color:#15803d}
  96%  {color:#0f766e}
  100% {color:#166534}
}
.auth-logo{font-family:'Great Vibes',cursive;font-size:68px;letter-spacing:0px;margin-bottom:2px;line-height:1.1;animation:mindvora-colors 12s linear infinite}
.auth-logo span{color:inherit}
.auth-sub{font-size:11px;color:var(--muted);letter-spacing:4px;text-transform:uppercase;margin-bottom:32px;font-weight:500}
.auth-box{width:100%;max-width:420px;background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px 30px;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.auth-tabs{display:flex;background:var(--deep);border-radius:14px;padding:4px;gap:4px;margin-bottom:24px}
.auth-tab{flex:1;padding:9px;border:none;background:none;color:var(--muted);font-size:13px;font-weight:600;border-radius:11px;cursor:pointer;transition:all .25s;font-family:'DM Sans',sans-serif}
.auth-tab.active{background:linear-gradient(135deg,var(--green),var(--green2));color:var(--cream)}
.auth-panel{display:none}
.auth-panel.active{display:block}
.fg{margin-bottom:15px}
.fg label{display:block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.fi{width:100%;padding:11px 14px;background:var(--deep);border:1px solid var(--border);border-radius:12px;color:var(--white);font-size:13px;outline:none;transition:border-color .2s;font-family:'DM Sans',sans-serif}
.fi:focus{border-color:var(--green3)}
.fi::placeholder{color:var(--muted)}
.fi:-webkit-autofill,
.fi:-webkit-autofill:hover,
.fi:-webkit-autofill:focus,
.fi:-webkit-autofill:active,
.m-input:-webkit-autofill,
.m-input:-webkit-autofill:hover,
.m-input:-webkit-autofill:focus,
.m-input:-webkit-autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 9999px #000000 inset !important;
  box-shadow: 0 0 0 9999px #000000 inset !important;
  -webkit-text-fill-color: #f0fdf4 !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f0fdf4 !important;
  caret-color: #f0fdf4 !important;
  border-color: rgba(255,255,255,.1) !important;
}
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap .fi{padding-right:42px}
.eye-btn{position:absolute;right:12px;background:none;border:none;cursor:pointer;font-size:13px;color:var(--muted);padding:4px;line-height:1}
.eye-btn:hover{color:var(--green3)}
.btn-auth{width:100%;padding:13px;background:linear-gradient(135deg,var(--green),var(--green2));border:none;border-radius:13px;color:var(--cream);font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s;letter-spacing:.3px;margin-top:6px;font-family:'DM Sans',sans-serif}
.btn-auth:hover{opacity:.88}
.btn-auth:disabled{opacity:.45;cursor:not-allowed}
.a-err{font-size:12px;color:#fca5a5;text-align:center;margin-top:10px;min-height:18px;line-height:1.5}

/* ── APP ── */
#app-screen{position:fixed;inset:0;display:none;flex-direction:column}

/* ── TOPBAR ── */
.topbar{height:54px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0;position:relative;z-index:50}
.tb-logo{font-family:'Great Vibes',cursive;font-size:32px;flex-shrink:0;margin-right:4px;letter-spacing:0px;animation:mindvora-colors-nav 12s linear infinite}
.tb-logo span{color:inherit}
.tb-sw{flex:1;max-width:260px;position:relative}
.tb-sw input{width:100%;padding:7px 12px 7px 32px;background:var(--deep);border:1px solid var(--border);border-radius:20px;color:var(--white);font-size:12px;outline:none;transition:border-color .2s;font-family:'DM Sans',sans-serif}
.tb-sw input::placeholder{color:var(--muted)}
.tb-sw input:focus{border-color:var(--green3)}
.tb-sw::before{content:'🔍';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:11px;pointer-events:none}
.tb-right{display:flex;align-items:center;gap:7px;margin-left:auto}
.tb-pill{padding:6px 13px;background:var(--cdim);border:1px solid var(--border);border-radius:20px;color:var(--moon);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.tb-pill:hover{background:var(--green2);color:var(--cream);border-color:transparent}
.ib{width:34px;height:34px;border-radius:10px;background:var(--cdim);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .2s;flex-shrink:0;position:relative}
.ib:hover{border-color:var(--borderhi)}
.nd{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--green3);border:2px solid var(--card);display:none}
.notif-drop{position:absolute;top:44px;right:0;width:300px;background:var(--card);border:1px solid var(--borderhi);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.6);z-index:200;display:none;overflow:hidden}
.notif-drop.open{display:block}
.nh{padding:14px 16px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.nh span{font-size:13px;font-weight:700;color:var(--white);font-family:'DM Serif Display',serif}
.nc{background:none;border:none;color:var(--green3);font-size:10px;font-weight:700;letter-spacing:1px;cursor:pointer;text-transform:uppercase}
.n-empty{padding:24px;text-align:center;font-size:12px;color:var(--muted)}
.n-item{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.n-item:hover,.n-item.unread{background:var(--cdim)}
.n-ico{font-size:17px;flex-shrink:0}
.n-text{font-size:12px;color:var(--moon);line-height:1.5;flex:1}
.n-time{font-size:10px;color:var(--muted);margin-top:2px}
.tb-av{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--green2));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--cream);cursor:pointer;flex-shrink:0}
.tb-out{width:32px;height:32px;border-radius:10px;background:var(--cdim);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s}
.tb-out:hover{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3)}

/* ── LAYOUT ── */
.app-body{flex:1;display:flex;overflow:hidden}

/* ── LEFT SIDEBAR ── */
.sidebar{width:204px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:12px 10px;overflow-y:auto}
.user-card{text-align:center;padding:14px 8px 14px;border-bottom:1px solid var(--border);margin-bottom:10px}
.u-av{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,var(--green),var(--green3));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:var(--cream);margin:0 auto 10px}
.u-name{font-family:'DM Serif Display',serif;font-size:14px;color:var(--white);margin-bottom:2px}
.u-handle{font-size:11px;color:var(--muted);margin-bottom:11px}
.u-stats{display:flex;justify-content:center;gap:16px}
.u-sv{font-size:16px;font-weight:700;color:var(--green3)}
.u-sl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:11px;border:none;background:none;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;width:100%;text-align:left;transition:all .2s;font-family:'DM Sans',sans-serif}
.nav-item:hover{background:var(--cdim);color:var(--moon)}
.nav-item.active{background:linear-gradient(135deg,rgba(22,101,52,.5),rgba(22,163,74,.2));color:var(--cream2);border:1px solid var(--border)}
.nav-ic{font-size:15px;flex-shrink:0}
.dm-badge{margin-left:auto;background:var(--green3);color:var(--deep);font-size:9px;font-weight:800;padding:2px 6px;border-radius:10px}

/* ── FEED ── */
.feed-col{flex:1;overflow-y:auto;padding:14px}

/* ── STORIES ── */
.stories-bar{display:flex;gap:10px;overflow-x:auto;padding-bottom:14px;scrollbar-width:none}
.stories-bar::-webkit-scrollbar{display:none}
.s-add{width:52px;height:52px;border-radius:50%;background:var(--cdim);border:2px dashed rgba(34,197,94,.35);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;flex-shrink:0;transition:all .2s;color:var(--green3)}
.s-add:hover{border-color:var(--green3)}
.s-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;flex-shrink:0}
.s-ring{width:52px;height:52px;border-radius:50%;padding:2px;background:linear-gradient(135deg,var(--green2),var(--cream2))}
.s-ring.seen{background:var(--muted)}
.s-av{width:100%;height:100%;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:var(--cream);border:2px solid var(--bg)}
.s-name{font-size:9px;color:var(--muted);max-width:54px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── COMPOSE ── */
.compose-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:12px}
.c-top{display:flex;gap:10px;align-items:flex-start}
.c-av{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--green2));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--cream);flex-shrink:0}
.c-ta{flex:1;background:transparent;border:none;color:var(--white);font-size:13px;resize:none;outline:none;min-height:46px;line-height:1.7;padding-top:3px;font-family:'DM Sans',sans-serif}
.c-ta::placeholder{color:var(--muted)}
.c-bot{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);flex-wrap:wrap}
.f-pill{padding:5px 11px;background:var(--cdim);border:1px solid var(--border);border-radius:20px;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;font-family:'DM Sans',sans-serif}
.f-pill:hover,.f-pill.active{background:var(--green2);color:var(--cream);border-color:transparent}
.media-btn{width:30px;height:30px;border-radius:8px;background:var(--cdim);border:1px solid var(--border);color:var(--muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.media-btn:hover{border-color:var(--borderhi);color:var(--green3)}
.cam-filter-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:2px solid transparent;border-radius:8px;padding:4px 6px;cursor:pointer;color:var(--muted);font-size:10px;flex-shrink:0;transition:all .2s;font-family:'DM Sans',sans-serif}
.cam-filter-btn.active{border-color:var(--green3);color:var(--green3)}
.cam-filter-btn:hover{border-color:var(--borderhi);color:var(--moon)}
.cam-filter-preview{width:36px;height:36px;border-radius:6px;margin-bottom:2px}
.cc{font-size:11px;color:var(--muted);margin-left:auto}
.btn-spark{padding:8px 18px;background:linear-gradient(135deg,var(--green),var(--green2));border:none;border-radius:20px;color:var(--cream);font-size:12px;font-weight:700;cursor:pointer;transition:opacity .2s;white-space:nowrap;flex-shrink:0;font-family:'DM Sans',sans-serif}
.btn-spark:hover{opacity:.88}
.media-prev{display:none;margin-top:10px;position:relative}
.media-prev img,.media-prev video{max-height:360px;border-radius:10px;border:1px solid var(--border);width:100%;object-fit:contain;background:#000}
.media-rm{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.7);border:none;border-radius:50%;width:22px;height:22px;color:white;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.filter-bar::-webkit-scrollbar{display:none}

/* ── SPARK CARD ── */
.spark-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:10px;transition:border-color .2s}
.spark-card:hover{border-color:rgba(34,197,94,.3)}
.sk-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.sk-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--cream);flex-shrink:0;border:2px solid transparent;animation:avatar-glow-border 8s linear infinite;box-shadow:0 0 8px rgba(34,197,94,.4), 0 0 16px rgba(34,197,94,.15)}
@keyframes avatar-glow-border{
  0%   {border-color:#166534;box-shadow:0 0 8px rgba(22,101,52,.5), 0 0 18px rgba(22,101,52,.2)}
  8%   {border-color:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5), 0 0 18px rgba(34,197,94,.2)}
  16%  {border-color:#0ea5e9;box-shadow:0 0 8px rgba(14,165,233,.5), 0 0 18px rgba(14,165,233,.2)}
  24%  {border-color:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,.5), 0 0 18px rgba(59,130,246,.2)}
  32%  {border-color:#8b5cf6;box-shadow:0 0 8px rgba(139,92,246,.5), 0 0 18px rgba(139,92,246,.2)}
  40%  {border-color:#d946ef;box-shadow:0 0 8px rgba(217,70,239,.5), 0 0 18px rgba(217,70,239,.2)}
  48%  {border-color:#f43f5e;box-shadow:0 0 8px rgba(244,63,94,.5), 0 0 18px rgba(244,63,94,.2)}
  56%  {border-color:#f97316;box-shadow:0 0 8px rgba(249,115,22,.5), 0 0 18px rgba(249,115,22,.2)}
  64%  {border-color:#eab308;box-shadow:0 0 8px rgba(234,179,8,.5), 0 0 18px rgba(234,179,8,.2)}
  72%  {border-color:#84cc16;box-shadow:0 0 8px rgba(132,204,22,.5), 0 0 18px rgba(132,204,22,.2)}
  80%  {border-color:#14b8a6;box-shadow:0 0 8px rgba(20,184,166,.5), 0 0 18px rgba(20,184,166,.2)}
  88%  {border-color:#06b6d4;box-shadow:0 0 8px rgba(6,182,212,.5), 0 0 18px rgba(6,182,212,.2)}
  96%  {border-color:#7c3aed;box-shadow:0 0 8px rgba(124,58,237,.5), 0 0 18px rgba(124,58,237,.2)}
  100% {border-color:#166534;box-shadow:0 0 8px rgba(22,101,52,.5), 0 0 18px rgba(22,101,52,.2)}
}
/* Light mode: make avatar letter darker for visibility */
body.light .sk-av{color:#0a1f0e !important;font-weight:800}
body.light .s-av{color:#000 !important;font-weight:800;text-shadow:none}
body.light-mode .sk-av{color:#0a1f0e !important;font-weight:800}
.sk-name{font-size:13px;font-weight:700;color:var(--white)}
.sk-handle{font-size:10px;color:var(--muted)}
.sk-time{font-size:10px;color:var(--muted);margin-left:auto}
.sk-cat{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:20px;background:var(--cdim);color:var(--green3);border:1px solid var(--border);margin-left:5px}
.sk-body{font-size:13px;color:var(--moon);line-height:1.75;margin-bottom:11px;word-break:break-word}
.sk-media{width:100%;height:auto;max-height:500px;border-radius:12px;object-fit:cover;display:block}
.sk-media-wrap{position:relative;width:100%;border-radius:12px;overflow:hidden;margin-bottom:11px;background:#000;border:1px solid var(--border);max-height:340px}
.sk-media-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(24px) brightness(.4) saturate(1.5);transform:scale(1.1);z-index:0;pointer-events:none}
.sk-media-main{position:relative;z-index:1;width:100%;max-height:340px;object-fit:contain;display:block;margin:0 auto}
.sk-media-img-wrap{position:relative;width:100%;border-radius:12px;overflow:hidden;margin-bottom:11px;border:1px solid var(--border)}
.sk-vid-controls{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.55));display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .25s}
.sk-media-wrap:hover .sk-vid-controls,.sk-media-wrap:focus-within .sk-vid-controls{opacity:1}
.sk-vid-play{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.sk-vid-prog{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:2px;cursor:pointer;position:relative;overflow:hidden}
.sk-vid-prog-fill{height:100%;background:var(--green3);border-radius:2px;width:0%;transition:width .1s linear;pointer-events:none}
.sk-vid-mute{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sk-vid-dur{font-size:10px;color:rgba(255,255,255,.8);white-space:nowrap}
.sk-actions{display:flex;gap:5px;flex-wrap:wrap}
.s-btn{display:flex;align-items:center;gap:4px;padding:5px 11px;background:var(--deep);border:1px solid var(--border);border-radius:20px;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif}
.s-btn:hover{border-color:rgba(34,197,94,.3);color:var(--moon)}
.s-btn.liked{background:rgba(34,197,94,.1);border-color:var(--green3);color:var(--green3)}
.s-btn.saved{background:rgba(254,252,232,.08);border-color:var(--cream2);color:var(--cream2)}
.feed-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.feed-empty .fi{font-size:44px;margin-bottom:14px;opacity:.5}
.vbadge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;background:linear-gradient(135deg,var(--green),var(--green2));border-radius:50%;font-size:7px;color:var(--cream);margin-left:4px;vertical-align:middle;font-weight:900}
.sb-verified{display:inline-block;background:linear-gradient(135deg,var(--green),var(--green2));color:var(--cream);font-size:9px;padding:2px 6px;border-radius:10px;margin-left:5px;font-weight:700;vertical-align:middle}
.feed-empty h3{font-family:'DM Serif Display',serif;font-size:19px;color:var(--moon);margin-bottom:6px}
.feed-empty p{font-size:13px}

/* ── RIGHT SIDEBAR ── */
.right-sidebar{width:240px;flex-shrink:0;background:var(--card);border-left:1px solid var(--border);padding:12px;overflow-y:auto}
.widget{background:var(--deep);border:1px solid var(--border);border-radius:14px;padding:13px;margin-bottom:12px}
.wt{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.prem-w{background:linear-gradient(135deg,rgba(22,101,52,.4),rgba(254,252,232,.06));border-color:rgba(34,197,94,.25)}
.pw-icon{font-size:26px;margin-bottom:7px}
.pw-title{font-family:'DM Serif Display',serif;font-size:15px;color:var(--white);margin-bottom:4px}
.pw-sub{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:11px}
.btn-upg{width:100%;padding:9px;background:linear-gradient(135deg,var(--green),var(--green2));border:none;border-radius:10px;color:var(--cream);font-size:12px;font-weight:700;cursor:pointer;transition:opacity .2s;font-family:'DM Sans',sans-serif}
.btn-upg:hover{opacity:.88}
.trend-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);cursor:pointer}
.trend-row:last-child{border:none}
.tr-rank{font-size:10px;font-weight:700;color:var(--muted);width:14px}
.tr-tag{font-size:12px;font-weight:600;color:var(--moon);flex:1}
.tr-cnt{font-size:10px;color:var(--muted)}
.sugg-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.sugg-row:last-child{border:none}
.sg-av{width:31px;height:31px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:var(--cream);flex-shrink:0}
.sg-name{font-size:12px;font-weight:600;color:var(--white)}
.sg-handle{font-size:10px;color:var(--muted)}
.btn-fol{padding:4px 11px;background:var(--cdim);border:1px solid var(--border);border-radius:20px;color:var(--green3);font-size:10px;font-weight:700;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif}
.btn-fol:hover{background:var(--green2);color:var(--cream);border-color:transparent}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:linear-gradient(135deg,var(--green),var(--green2));color:var(--cream);padding:10px 22px;border-radius:20px;font-size:13px;font-weight:600;opacity:0;transition:all .3s;pointer-events:none;z-index:9999;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal-box{background:var(--card);border:1px solid var(--borderhi);border-radius:20px;width:100%;max-width:460px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column}
.m-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--border)}
.m-title{font-family:'DM Serif Display',serif;font-size:17px;color:var(--white)}
.m-close{width:28px;height:28px;border-radius:8px;background:var(--deep);border:1px solid var(--border);color:var(--muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s}
.m-close:hover{color:var(--white)}
.m-body{padding:20px 22px;overflow-y:auto;flex:1}
.m-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block}
.m-input{width:100%;padding:10px 13px;background:var(--deep);border:1px solid var(--border);border-radius:10px;color:var(--white);font-size:13px;outline:none;margin-bottom:14px;transition:border-color .2s;font-family:'DM Sans',sans-serif}
.m-input::placeholder{color:var(--muted)}
.m-input:focus{border-color:var(--green3)}
select.m-input option{background:var(--card);color:var(--white)}
select.m-input optgroup{background:var(--deep);color:var(--muted);font-size:10px}
.m-err{font-size:12px;color:#fca5a5;margin-bottom:10px;min-height:16px;line-height:1.5}
.btn-pay{width:100%;padding:13px;background:linear-gradient(135deg,var(--green),var(--green2));border:none;border-radius:12px;color:var(--cream);font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s;font-family:'DM Sans',sans-serif}
.btn-pay:hover{opacity:.88}
.plan-card{background:var(--deep);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:9px;cursor:pointer;transition:all .2s}
.plan-card:hover,.plan-card.sel{border-color:var(--green3);background:rgba(34,197,94,.06)}
.pl-name{font-size:13px;font-weight:700;color:var(--white)}
.pl-price{font-family:'DM Serif Display',serif;font-size:24px;color:var(--green3)}
.pl-price span{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:400;color:var(--muted)}
.pl-perks{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.6}
.tab-row{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.e-panel{display:none}
.e-panel.active{display:block}
.earn-stat{background:var(--deep);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:9px}
.es-val{font-family:'DM Serif Display',serif;font-size:28px;color:var(--green3)}
.es-lbl{font-size:11px;color:var(--muted);margin-top:2px}

/* ── STORY VIEWER ── */
.sv-overlay{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:5000;display:none;flex-direction:column;align-items:center;justify-content:center}
.sv-overlay.open{display:flex}
.sv-bars{display:flex;gap:4px;width:100%;max-width:380px;padding:0 16px;margin-bottom:14px}
.sv-bar{flex:1;height:3px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden}
.sv-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--green2),var(--cream2))}
.sv-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--borderhi);border-radius:20px;padding:20px;position:relative}
.sv-hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sv-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--cream);flex-shrink:0;border:2px solid transparent;animation:avatar-glow-border 8s linear infinite;box-shadow:0 0 8px rgba(34,197,94,.4), 0 0 16px rgba(34,197,94,.15)}
.sv-nm{font-size:13px;font-weight:700;color:var(--white)}
.sv-tm{font-size:11px;color:var(--muted)}
.sv-text{font-size:15px;color:var(--moon);line-height:1.75;font-family:'DM Serif Display',serif;font-style:italic}
.sv-x{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer}

/* ── DM ── */
.dm-wrap{max-width:700px;height:80vh;display:flex;flex-direction:row;padding:0;overflow:hidden}
.dm-left{width:235px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column}
.dm-lh{padding:14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.dm-search{width:calc(100% - 28px);margin:10px 14px;padding:7px 11px;background:var(--deep);border:1px solid var(--border);border-radius:20px;color:var(--white);font-size:12px;outline:none;display:block;font-family:'DM Sans',sans-serif}
.dm-search::placeholder{color:var(--muted)}
.dm-search:focus{border-color:var(--green3)}
.dm-list{flex:1;overflow-y:auto}
.dm-row{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;transition:background .15s}
.dm-row:hover,.dm-row.act{background:var(--cdim)}
.dm-av{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--cream)}
.dm-nm{font-size:12px;font-weight:600;color:var(--white)}
.dm-pv{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}
.dm-ud{width:7px;height:7px;border-radius:50%;background:var(--green3);flex-shrink:0}
.dm-right{flex:1;display:flex;flex-direction:column}
.dm-es{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:10px}
.chat-hd{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.msg{display:flex;gap:7px;max-width:80%}
.msg.mine{align-self:flex-end;flex-direction:row-reverse}
.msg-av{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--cream)}
.msg-bub{padding:8px 12px;border-radius:12px;font-size:12px;line-height:1.5}
.msg:not(.mine) .msg-bub{background:var(--deep);border:1px solid var(--border);color:var(--moon);border-top-left-radius:3px}
.msg.mine .msg-bub{background:linear-gradient(135deg,var(--green),var(--green2));color:var(--cream);border-top-right-radius:3px}
.msg-t{font-size:9px;color:var(--muted);margin-top:2px;text-align:right}
.chat-bar{padding:10px 14px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end}
.chat-inp{flex:1;background:var(--deep);border:1px solid var(--border);border-radius:18px;padding:8px 13px;color:var(--white);font-size:12px;outline:none;resize:none;max-height:90px;transition:border-color .2s;font-family:'DM Sans',sans-serif}
.chat-inp::placeholder{color:var(--muted)}
.chat-inp:focus{border-color:var(--green3)}
.chat-send{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green2));border:none;color:var(--cream);font-size:15px;cursor:pointer;flex-shrink:0}

/* ── COMMENTS ── */
.cmt-item{display:flex;gap:9px;padding:10px 0;border-bottom:1px solid var(--border)}
.cmt-av{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--cream)}
.cmt-nm{font-size:12px;font-weight:700;color:var(--white)}
.cmt-hdl{font-size:10px;color:var(--muted);margin-left:6px}
.cmt-txt{font-size:12px;color:var(--moon);line-height:1.6;margin-top:3px}
.cmt-tm{font-size:10px;color:var(--muted);margin-top:3px}

/* ── DATA/AIRTIME ── */
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.pkg-card{background:var(--deep);border:1px solid var(--border);border-radius:12px;padding:12px 10px;cursor:pointer;text-align:center;transition:all .2s}
.pkg-card:hover,.pkg-card.sel{border-color:var(--green3);background:rgba(34,197,94,.07)}
.pkg-size{font-family:'DM Serif Display',serif;font-size:20px;color:var(--green3)}
.pkg-dur{font-size:10px;color:var(--muted);margin-top:2px}
.pkg-price{font-size:13px;font-weight:700;color:var(--white);margin-top:5px}
.ntabs{display:flex;gap:5px;margin-bottom:14px}
.ntab{flex:1;padding:7px 4px;background:var(--deep);border:1px solid var(--border);border-radius:9px;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;text-align:center;font-family:'DM Sans',sans-serif}
.ntab.active{background:var(--green2);color:var(--cream);border-color:transparent}

/* ── VERIFIED BADGE ── */
.vbadge{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;background:linear-gradient(135deg,var(--green),var(--green3));border-radius:50%;font-size:8px;margin-left:4px;flex-shrink:0;vertical-align:middle}
.vbadge::after{content:'✓';color:var(--cream);font-weight:900;font-size:8px}

/* ── ANALYTICS ── */
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.an-card{background:var(--deep);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.an-val{font-family:'DM Serif Display',serif;font-size:26px;color:var(--green3)}
.an-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:3px}
.an-chart{background:var(--deep);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px}
.chart-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.bar-wrap{display:flex;align-items:flex-end;gap:5px;height:80px}
.bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.bar{width:100%;background:linear-gradient(180deg,var(--green3),var(--green));border-radius:4px 4px 0 0;min-height:4px;transition:height .4s}
.bar-lbl{font-size:9px;color:var(--muted)}

/* ── REELS ── */
.reel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.reel-card{position:relative;aspect-ratio:9/16;background:var(--deep);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer}
.reel-card video{width:100%;height:100%;object-fit:cover}
.reel-overlay{position:absolute;bottom:0;left:0;right:0;padding:10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.reel-author{font-size:10px;font-weight:700;color:var(--cream)}
.reel-likes{font-size:10px;color:var(--moon)}
.reel-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;opacity:.8;pointer-events:none}
.reel-viewer{position:fixed;inset:0;background:#000;z-index:6000;display:none;flex-direction:column;align-items:center;justify-content:center}
.reel-viewer.open{display:flex}
.rv-video{max-height:85vh;max-width:100%;border-radius:12px}
.rv-actions{position:absolute;right:16px;bottom:120px;display:flex;flex-direction:column;gap:16px;align-items:center}
.rv-btn{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:22px;cursor:pointer;background:none;border:none;color:white}
.rv-btn span{font-size:10px;color:rgba(255,255,255,.7)}
.rv-info{position:absolute;bottom:30px;left:16px;right:70px}
.rv-author{font-size:13px;font-weight:700;color:white;margin-bottom:4px}
.rv-text{font-size:12px;color:rgba(255,255,255,.8);line-height:1.5}
.rv-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.5);border:none;border-radius:50%;width:34px;height:34px;color:white;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ── MARKETPLACE ── */
.mkt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mkt-card{background:var(--deep);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:border-color .2s}
.mkt-card:hover{border-color:rgba(34,197,94,.4)}
.mkt-img{width:100%;height:120px;object-fit:cover;background:linear-gradient(135deg,var(--green),var(--deep))}
.mkt-img-ph{width:100%;height:120px;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,rgba(22,101,52,.3),rgba(22,163,74,.1))}
.mkt-info{padding:10px 12px}
.mkt-name{font-size:13px;font-weight:700;color:var(--white);margin-bottom:2px}
.mkt-seller{font-size:10px;color:var(--muted)}
.mkt-price{font-family:'DM Serif Display',serif;font-size:18px;color:var(--green3);margin-top:5px}
.mkt-buy{width:100%;padding:7px;background:linear-gradient(135deg,var(--green),var(--green2));border:none;border-radius:8px;color:var(--cream);font-size:11px;font-weight:700;cursor:pointer;margin-top:8px;font-family:'DM Sans',sans-serif}
.mkt-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}

/* ── ARIA AI ── */
.aria-msgs{height:320px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.aria-msg{display:flex;gap:8px;max-width:88%}
.aria-msg.user{align-self:flex-end;flex-direction:row-reverse}
.aria-bub{padding:9px 13px;border-radius:14px;font-size:12px;line-height:1.6}
.aria-msg:not(.user) .aria-bub{background:var(--deep);border:1px solid var(--border);color:var(--moon);border-top-left-radius:3px}
.aria-msg.user .aria-bub{background:linear-gradient(135deg,var(--green),var(--green2));color:var(--cream);border-top-right-radius:3px}
.aria-av{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px}
.aria-bar{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:8px}
.aria-inp{flex:1;background:var(--deep);border:1px solid var(--border);border-radius:18px;padding:8px 13px;color:var(--white);font-size:12px;outline:none;font-family:'DM Sans',sans-serif}
.aria-inp::placeholder{color:var(--muted)}
.aria-inp:focus{border-color:var(--green3)}
.aria-send{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green2));border:none;color:var(--cream);font-size:15px;cursor:pointer;flex-shrink:0}
.aria-media-btn{width:30px;height:30px;border-radius:50%;background:var(--deep);border:1px solid var(--border);color:var(--muted);font-size:14px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s}
.aria-media-btn:hover{border-color:var(--green3);color:var(--green3)}
.aria-media-btn.recording{background:rgba(239,68,68,.15);border-color:#ef4444;color:#ef4444;animation:pulse 1s infinite}
.aria-typing{display:flex;gap:4px;align-items:center;padding:9px 13px}
.aria-dot{width:6px;height:6px;border-radius:50%;background:var(--green3);animation:adot 1.2s infinite}
.aria-dot:nth-child(2){animation-delay:.2s}
.aria-dot:nth-child(3){animation-delay:.4s}
@keyframes adot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

/* ── ADS SYSTEM ── */
.ad-banner{background:linear-gradient(135deg,rgba(22,101,52,.3),rgba(254,252,232,.05));border:1px solid rgba(34,197,94,.25);border-radius:14px;padding:14px;margin-bottom:10px;position:relative;overflow:hidden}
.ad-banner::before{content:'AD';position:absolute;top:8px;right:10px;font-size:8px;font-weight:800;letter-spacing:2px;color:var(--muted);background:var(--deep);padding:2px 7px;border-radius:10px;border:1px solid var(--border)}
.ad-banner-img{width:100%;height:120px;object-fit:cover;border-radius:10px;margin-bottom:9px;background:linear-gradient(135deg,var(--green),var(--deep))}
.ad-banner-ph{width:100%;height:120px;display:flex;align-items:center;justify-content:center;font-size:36px;background:linear-gradient(135deg,rgba(22,101,52,.3),rgba(22,163,74,.1));border-radius:10px;margin-bottom:9px}
.ad-title{font-size:13px;font-weight:700;color:var(--white);margin-bottom:3px}
.ad-desc{font-size:11px;color:var(--moon);line-height:1.6;margin-bottom:9px}
.ad-cta{display:inline-block;padding:6px 16px;background:linear-gradient(135deg,var(--green),var(--green2));border-radius:20px;color:var(--cream);font-size:11px;font-weight:700;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:opacity .2s}
.ad-cta:hover{opacity:.88}
.ad-sponsor{font-size:10px;color:var(--muted);margin-top:6px}

/* ── VIDEO AD OVERLAY ── */
.video-ad-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:7000;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.video-ad-overlay.open{display:flex}
.va-skip{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:7px 16px;color:white;font-size:11px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s}
.va-skip:hover{background:rgba(255,255,255,.25)}
.va-skip.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.va-countdown{font-size:10px;color:rgba(255,255,255,.6);margin-bottom:8px;letter-spacing:1px}
.va-card{width:100%;max-width:480px;background:var(--card);border:1px solid var(--borderhi);border-radius:20px;overflow:hidden}
.va-media{width:100%;height:200px;object-fit:cover;background:linear-gradient(135deg,var(--green),var(--deep))}
.va-media-ph{width:100%;height:200px;display:flex;align-items:center;justify-content:center;font-size:52px;background:linear-gradient(135deg,rgba(22,101,52,.4),rgba(22,163,74,.15))}
.va-info{padding:16px 20px}
.va-badge{font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--green3);margin-bottom:6px}
.va-title{font-family:'DM Serif Display',serif;font-size:18px;color:var(--white);margin-bottom:5px}
.va-desc{font-size:12px;color:var(--moon);line-height:1.6;margin-bottom:12px}
.va-btn{width:100%;padding:11px;background:linear-gradient(135deg,var(--green),var(--green2));border:none;border-radius:10px;color:var(--cream);font-size:13px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif}

/* ── ADS MANAGER ── */
.adm-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.ad-type-card{background:var(--deep);border:2px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:all .2s;margin-bottom:10px}
.ad-type-card:hover,.ad-type-card.sel{border-color:var(--green3);background:rgba(34,197,94,.06)}
.at-icon{font-size:28px;margin-bottom:8px}
.at-name{font-size:14px;font-weight:700;color:var(--white);margin-bottom:3px}
.at-desc{font-size:11px;color:var(--muted);line-height:1.6}
.at-price{font-family:'DM Serif Display',serif;font-size:20px;color:var(--green3);margin-top:6px}
.ad-form{display:none}
.ad-form.active{display:block}
.my-ad-row{background:var(--deep);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.mar-icon{font-size:22px;flex-shrink:0}
.mar-name{font-size:12px;font-weight:700;color:var(--white)}
.mar-status{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:20px}
.mar-status.active{background:rgba(34,197,94,.15);color:var(--green3)}
.mar-status.pending{background:rgba(254,196,9,.15);color:#fbbf24}
.mar-status.free{background:rgba(96,165,250,.15);color:#60a5fa}
.mar-views{font-size:10px;color:var(--muted);margin-left:auto}

/* ── SECURITY ALERTS ── */
.sec-alert-banner{position:fixed;top:70px;right:16px;z-index:8000;display:flex;flex-direction:column;gap:8px;max-width:320px;pointer-events:none}
.sec-alert{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(239,68,68,.05));border:1px solid rgba(239,68,68,.4);border-radius:12px;padding:12px 16px;display:flex;align-items:flex-start;gap:10px;pointer-events:all;animation:slideInRight .3s ease}
.sec-alert.warn{background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(251,191,36,.05));border-color:rgba(251,191,36,.4)}
.sec-alert.info{background:linear-gradient(135deg,rgba(96,165,250,.15),rgba(96,165,250,.05));border-color:rgba(96,165,250,.4)}
.sa-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.sa-content{flex:1;min-width:0}
.sa-title{font-size:12px;font-weight:700;color:#fca5a5;margin-bottom:2px}
.sa-title.warn{color:#fcd34d}
.sa-title.info{color:#93c5fd}
.sa-msg{font-size:11px;color:var(--moon);line-height:1.5}
.sa-time{font-size:9px;color:var(--muted);margin-top:4px}
@keyframes slideInRight{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}

/* ── ADMIN PANEL ── */
.admin-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#854d0e,#ca8a04);color:#fef9c3;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:20px;margin-left:6px}
.ad-review-card{background:var(--deep);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:12px}
.arc-head{padding:14px 16px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.arc-info{flex:1}
.arc-title{font-size:14px;font-weight:700;color:var(--white)}
.arc-meta{font-size:10px;color:var(--muted);margin-top:3px}
.arc-type{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:20px}
.arc-type.free{background:rgba(96,165,250,.15);color:#60a5fa}
.arc-type.paid{background:rgba(34,197,94,.15);color:var(--green3)}
.arc-body{padding:14px 16px}
.arc-field{margin-bottom:9px}
.arc-label{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.arc-val{font-size:12px;color:var(--moon);line-height:1.6;word-break:break-all}
.arc-val a{color:var(--green3);text-decoration:none}
.arc-val a:hover{text-decoration:underline}
.arc-actions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.btn-approve{flex:1;padding:9px;background:linear-gradient(135deg,var(--green),var(--green2));border:none;border-radius:10px;color:var(--cream);font-size:12px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity .2s}
.btn-approve:hover{opacity:.88}
.btn-reject{flex:1;padding:9px;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);border-radius:10px;color:#fca5a5;font-size:12px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s}
.btn-reject:hover{background:rgba(248,113,113,.2)}
.admin-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.admin-stat{background:var(--deep);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.admin-stat-val{font-family:'DM Serif Display',serif;font-size:28px;color:var(--green3)}
.admin-stat-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:3px}
.pending-dot{width:8px;height:8px;border-radius:50%;background:#fbbf24;display:inline-block;margin-right:5px;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── LIGHT MODE ── */
body.light{
  --bg:#f5fbf0;--card:#ffffff;--deep:#e8f5e0;
  --green:#166534;--green2:#16a34a;--green3:#15803d;
  --cream:#fefce8;--cream2:#fef9c3;
  --white:#0f2318;--moon:#14532d;--muted:#4b7a5a;
  --border:rgba(22,163,74,.15);--borderhi:rgba(22,163,74,.4);
  --cdim:rgba(22,163,74,.07);
}
body.light .sk-av,body.light-mode .sk-av{color:#0a1f0e !important;font-weight:800;text-shadow:none}
body.light .c-ta{color:#0f2318!important}
body.light .fi,body.light .m-input,body.light .chat-inp,body.light .dm-search{background:#e8f5e0!important;color:#0f2318!important}

/* ── POLLS ── */
.poll-opt{background:var(--deep);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-bottom:6px;cursor:pointer;position:relative;overflow:hidden;transition:all .2s}
.poll-opt:hover{border-color:var(--green3)}.poll-opt.voted{border-color:var(--green3)}
.poll-bar{position:absolute;left:0;top:0;height:100%;background:rgba(34,197,94,.15);transition:width .6s}
.poll-opt-text{position:relative;z-index:1;font-size:12px;color:var(--moon);display:flex;justify-content:space-between}
.poll-pct{font-size:11px;color:var(--green3);font-weight:700}
/* ── REACTIONS ── */
.reactions-bar{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;padding:0 0 4px}
.reaction-btn{background:var(--deep);border:1px solid var(--border);border-radius:20px;padding:3px 8px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:3px;color:var(--muted);transition:all .2s;font-family:'DM Sans',sans-serif}
.reaction-btn:hover,.reaction-btn.reacted{border-color:var(--green3);color:var(--green3);background:rgba(34,197,94,.08)}
.reaction-picker-full{position:fixed;background:var(--card);border:1px solid var(--border);border-radius:16px;z-index:9999;width:310px;box-shadow:0 12px 40px rgba(0,0,0,.55);overflow:hidden;display:flex;flex-direction:column}
.rxpick-quick{display:flex;gap:3px;padding:8px 10px 7px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.rxpick-quick button{background:none;border:none;font-size:22px;cursor:pointer;padding:2px 3px;border-radius:6px;transition:transform .15s;line-height:1}
.rxpick-quick button:hover{transform:scale(1.35);background:var(--deep)}
.rxpick-search{padding:6px 10px;border-bottom:1px solid var(--border)}
.rxpick-search input{width:100%;background:var(--deep);border:1px solid var(--border);border-radius:8px;padding:5px 10px;color:var(--moon);font-size:12px;font-family:'DM Sans',sans-serif;outline:none;box-sizing:border-box}
.rxpick-tabs{display:flex;gap:3px;padding:5px 8px;overflow-x:auto;border-bottom:1px solid var(--border);scrollbar-width:none}
.rxpick-tabs::-webkit-scrollbar{display:none}
.rxpick-tab{background:transparent;border:1px solid var(--border);border-radius:20px;padding:3px 7px;font-size:14px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s;color:var(--muted)}
.rxpick-tab.active{background:var(--green2);border-color:var(--green2);color:#fff}
.rxpick-body{height:190px;overflow-y:auto;padding:6px 8px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.rxpick-grid{display:flex;flex-wrap:wrap;gap:1px}
.rxpick-grid button{background:none;border:none;font-size:20px;cursor:pointer;padding:3px;border-radius:6px;width:34px;height:34px;text-align:center;transition:all .12s;line-height:1}
.rxpick-grid button:hover{background:var(--deep);transform:scale(1.25)}
.reaction-picker{position:absolute;bottom:100%;left:0;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px;display:flex;gap:6px;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.3)}
/* ── STORY VIEWS ── */
.story-view-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
/* ── LEADERBOARD ── */
.lb-item{display:flex;align-items:center;gap:10px;padding:10px;background:var(--deep);border:1px solid var(--border);border-radius:10px;margin-bottom:6px}
.lb-rank{font-size:18px;font-weight:900;color:var(--green3);width:28px;flex-shrink:0;text-align:center}
.lb-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
/* ── QR CODE ── */
.qr-wrap{background:#fff;border-radius:12px;padding:16px;display:inline-block}
/* ── LINK PREVIEW ── */
.link-preview{background:var(--deep);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:8px;cursor:pointer}
.link-preview-info{padding:8px 10px}
.link-preview-title{font-size:12px;font-weight:700;color:var(--moon);margin-bottom:2px}
.link-preview-url{font-size:10px;color:var(--muted)}
/* ── SCHEDULED ── */
.sched-item{background:var(--deep);border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:8px}

/* ── LIVE STREAMING ── */
.live-badge{background:#ef4444;color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;animation:pulse 1.2s infinite;letter-spacing:.5px;vertical-align:middle}
.live-card{background:var(--deep);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:10px;cursor:pointer;transition:border-color .2s}
.live-card:hover{border-color:#ef4444}
.live-thumb{width:100%;height:140px;background:linear-gradient(135deg,#1a1a2e,#16213e);position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.live-host-av{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;border:3px solid #ef4444}
.live-viewers-pill{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;padding:3px 9px;border-radius:20px}
.live-stream-view{position:fixed;inset:0;background:#000;z-index:600;display:flex;flex-direction:column;overflow:hidden}
.live-stream-video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.live-overlay-top{position:absolute;top:0;left:0;right:0;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent);z-index:10}
.live-overlay-bot{position:absolute;bottom:0;left:0;right:0;padding:10px 12px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);z-index:10;display:flex;gap:8px;align-items:center}
.live-chat-scroll{position:absolute;bottom:60px;left:0;right:0;max-height:220px;overflow-y:auto;padding:0 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;z-index:9}
.live-chat-bubble{background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;border-radius:16px;padding:5px 11px;font-size:11px;width:fit-content;max-width:80%;word-break:break-word}
.live-chat-inp{flex:1;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:8px 14px;color:#fff;font-size:12px;outline:none;font-family:'DM Sans',sans-serif}
.live-chat-inp::placeholder{color:rgba(255,255,255,.4)}
.live-send-btn{width:36px;height:36px;border-radius:50%;background:var(--green2);border:none;color:#fff;font-size:14px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}


/* ── WITHDRAWAL TABS ── */
.wd-tab{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;white-space:nowrap}
.wd-tab.active{background:var(--green2);color:#fff;border-color:var(--green2)}
/* ── CALLS ── */
.call-overlay{position:fixed;inset:0;background:#000;z-index:700;display:none;flex-direction:column;align-items:center;justify-content:center}
.call-remote-video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.call-local-video{position:absolute;top:16px;right:16px;width:100px;height:140px;object-fit:cover;border-radius:12px;border:2px solid var(--green3);z-index:5;display:none}
.call-info{position:absolute;top:0;left:0;right:0;padding:20px;text-align:center;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent)}
.call-avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;margin:0 auto 10px;border:3px solid var(--green3)}
.call-btns{position:absolute;bottom:40px;display:flex;gap:20px;z-index:10}
.call-btn{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center}
/* ── INCOMING CALL ── */
.incoming-call-banner{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--green3);border-radius:16px;padding:14px 18px;display:none;align-items:center;gap:14px;z-index:800;box-shadow:0 8px 32px rgba(0,0,0,.5);min-width:280px}
/* ── GROUPS ── */
.group-item{display:flex;align-items:center;gap:10px;padding:10px;background:var(--deep);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:border-color .2s}
.group-item:hover{border-color:var(--green3)}
.group-av{width:42px;height:42px;border-radius:50%;background:var(--green2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
/* ── ADVANCED SEARCH ── */
.search-tab{padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s}
.search-tab.active{background:var(--green2);color:#fff;border-color:var(--green2)}
.search-result-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:all .2s}
.search-result-item:hover{background:var(--deep);border-color:var(--border)}
/* ── MUSIC ── */
.music-item{display:flex;align-items:center;gap:10px;padding:10px;background:var(--deep);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:all .2s}
.music-item:hover,.music-item.selected{border-color:var(--green3)}
/* ── GAMES ── */
.game-card{background:var(--deep);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;cursor:pointer;transition:all .2s;flex:1;min-width:120px}
.game-card:hover{border-color:var(--green3);transform:translateY(-2px)}
.game-container{position:fixed;inset:0;background:var(--bg);z-index:600;display:none;flex-direction:column;overflow-y:auto}
.game-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
/* ── GIFTS ── */
.gift-panel{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);border-radius:20px 20px 0 0;padding:16px;z-index:650;display:none;flex-direction:column;gap:14px}
.gift-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;background:var(--deep);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s;flex:1}
.gift-item:hover{border-color:var(--green3);transform:translateY(-2px)}
/* ── GROUP CHAT MODAL ── */
#modal-group-chat{position:fixed;inset:0;z-index:600;background:var(--bg);display:none;flex-direction:column}
.group-chat-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--card)}
.group-chat-msgs{flex:1;overflow-y:auto;padding:12px 16px}
.group-chat-bar{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:8px;background:var(--card)}
.cmt-item{display:flex;gap:8px;margin-bottom:10px;position:relative}
.msg-actions{display:none;position:absolute;top:-8px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:4px;gap:4px;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.3);white-space:nowrap}
.msg.mine:hover .msg-actions,.msg.mine:focus-within .msg-actions{display:flex}
.cmt-item:hover .cmt-actions,.cmt-item:focus-within .cmt-actions{display:flex}
.cmt-actions{display:none;position:absolute;right:0;top:0;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:4px;gap:4px;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.act-btn{background:none;border:none;font-size:11px;color:var(--muted);cursor:pointer;padding:3px 7px;border-radius:6px;transition:all .15s}
.act-btn:hover{background:var(--deep);color:var(--moon)}
.act-btn.del:hover{background:rgba(239,68,68,.15);color:#fca5a5}
.msg-edited,.cmt-edited{font-size:9px;color:var(--muted);font-style:italic;margin-left:4px}

/* ══════════════════════════════════════════════════════════════
   MINDVORA RESPONSIVE DESIGN — All screen sizes
   ══════════════════════════════════════════════════════════════ */

/* ── Base responsive meta setup ── */
* { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }

/* ── Extra large screens (1400px+) ── */
@media (min-width: 1400px) {
  .app-layout { max-width: 1200px; margin: 0 auto; }
  .feed-col { max-width: 640px; }
  .right-sidebar { width: 320px; }
}

/* ── Large screens (1200px - 1400px) ── */
@media (min-width: 1200px) and (max-width: 1399px) {
  .app-layout { max-width: 1100px; }
}

/* ── Tablet landscape (1024px - 1199px) ── */
@media (min-width: 1024px) and (max-width: 1199px) {
  .right-sidebar { display: none; }
  .feed-col { max-width: 700px; flex: 1; }
}

/* ── Tablet portrait (768px - 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .right-sidebar { display: none; }
  .left-sidebar { width: 200px; }
  .left-sidebar .nav-item span:not(.nav-ic) { display: none; }
  .left-sidebar .nav-item { justify-content: center; padding: 12px; }
  .nav-ic { font-size: 22px; margin: 0; }
  .feed-col { flex: 1; }
  .modal-box { max-width: 90vw !important; }
  .sk-media { max-height: 400px !important; }
}

/* ── Mobile (up to 767px) ── */
@media (max-width: 767px) {
  /* Hide sidebars on mobile */
  .right-sidebar { display: none !important; }
  .left-sidebar { display: none !important; }
  
  /* Bottom navigation on mobile */
  .bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    z-index: 100;
    padding: 6px 0 env(safe-area-inset-bottom, 6px);
    justify-content: space-around;
    align-items: center;
  }
  
  .bottom-nav .nav-item {
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    font-size: 10px;
    min-width: 50px;
    gap: 2px;
    color: var(--muted);
    background: none;
    border: none;
    border-radius: 0;
  }
  
  .bottom-nav .nav-item.active {
    color: var(--green3);
  }
  
  .bottom-nav .nav-ic {
    font-size: 20px;
    margin: 0;
  }
  
  /* Main feed area takes full width on mobile */
  .feed-col {
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 70px; /* space for bottom nav */
    padding-top: 0;
  }
  
  /* Topbar on mobile */
  .topbar {
    padding: 8px 12px;
    position: sticky;
    top: 0;
    z-index: 90;
  }
  
  .topbar .tb-logo {
    font-size: 24px !important;
  }
  
  /* Modals full screen on mobile */
  .modal-overlay.open .modal-box,
  .modal-overlay.open .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
  
  /* Spark cards on mobile */
  .spark-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0;
  }
  
  /* Feed container */
  #feed-cont {
    padding: 0;
  }
  
  /* Compose box */
  .compose-box {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0;
    padding: 12px;
  }
  
  /* Stories bar */
  .stories-bar {
    padding: 10px 8px;
    gap: 10px;
  }
  
  /* Video media on mobile */
  .sk-media-wrap,
  .sk-media-main {
    max-height: 260px !important;
  }
  
  /* DM modal full screen on mobile */
  #modal-dm .modal-box {
    flex-direction: column !important;
    height: 90vh !important;
  }
  
  .dm-left {
    width: 100% !important;
    height: auto !important;
    max-height: 40% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  
  .dm-right {
    flex: 1 !important;
    height: 60% !important;
  }
  
  /* Admin panel full screen */
  #modal-admin .modal-box {
    height: 90vh !important;
  }
  
  /* Plan cards stack on mobile */
  .plan-card {
    margin-bottom: 8px;
  }
  
  /* Game container full screen */
  .game-container {
    padding-top: 0 !important;
  }
  
  /* Font sizes for mobile */
  .sk-name { font-size: 13px !important; }
  .sk-body { font-size: 14px !important; line-height: 1.5 !important; }
  .m-title { font-size: 15px !important; }
  
  /* Buttons on mobile */
  .btn-auth {
    padding: 14px !important;
    font-size: 15px !important;
  }
  
  /* Auth box on mobile */
  .auth-box {
    width: 90% !important;
    padding: 20px 16px !important;
  }
  
  /* Reel grid on mobile */
  .reel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Marketplace grid */
  .mkt-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Action buttons wrap on mobile */
  .sk-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  /* Emoji picker on mobile */
  .reaction-picker-full {
    width: calc(100vw - 12px) !important;
    left: 6px !important;
    right: 6px !important;
  }
}

/* ── Small mobile (up to 400px) ── */
@media (max-width: 400px) {
  .auth-logo { font-size: 56px !important; }
  .auth-sub { font-size: 13px !important; }
  .tb-logo span { font-size: 32px !important; }
  .s-btn { font-size: 11px !important; padding: 4px 7px !important; }
  .pkg-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── iPhone notch / safe areas ── */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar {
    padding-top: calc(8px + env(safe-area-inset-top));
  }
  .bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
}

/* ── Print styles ── */
@media print {
  .left-sidebar, .right-sidebar, .topbar, .bottom-nav { display: none !important; }
  .feed-col { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════
   HAMBURGER + SLIDE-OUT DRAWER
   ═══════════════════════════════════════════════════════════ */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: background .2s;
  flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--deep); }
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--moon);
  border-radius: 3px;
  transition: all .3s;
}
.hamburger-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Drawer overlay */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 300;
  backdrop-filter: blur(2px);
}
.drawer-overlay.open { display: block; }

/* Drawer panel */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: var(--card);
  border-right: 1px solid var(--border);
  z-index: 301;
  transform: translateX(-100%) translateZ(0);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer.open { transform: translateX(0) translateZ(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--green), var(--green2));
  flex-shrink: 0;
}
.drawer-header-logo {
  font-family:'Great Vibes',cursive;
  font-size:28px;
  animation: mindvora-colors 12s linear infinite;
}

.drawer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--deep);
  flex-shrink: 0;
}
.drawer-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.drawer-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--moon);
}
.drawer-handle {
  font-size: 11px;
  color: var(--muted);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 20px;
}
.drawer-body::-webkit-scrollbar { width: 4px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.drawer-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 18px 4px;
}
.drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 18px;
  background: none;
  border: none;
  color: var(--moon);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  border-radius: 0;
}
.drawer-icon-defs { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; }
.drawer-item .drawer-icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; color: currentColor; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.drawer-item:hover, .drawer-item:active {
  background: var(--deep);
  color: var(--green3);
}

/* ═══════════════════════════════════════════════════════════
   FULL WIDTH FEED — sidebar hidden, feed takes entire screen
   ═══════════════════════════════════════════════════════════ */

/* Hide right sidebar completely */
.right-sidebar {
  display: none !important;
}

/* App layout — simple full width flex */
.app-layout {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* Feed column — full remaining width */
.feed-col {
  flex: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
}

/* App screen full width */
#app-screen {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
}

/* Compose box full width */
.compose-box {
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  margin: 0 !important;
}

/* Spark cards full width */
.spark-card {
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Stories bar full width */
.stories-bar {
  border-radius: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border);
}

/* Filter bar full width */
.filter-bar {
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT FIX — Left sidebar hidden, feed full, right kept
   ═══════════════════════════════════════════════════════════ */

/* Hide LEFT sidebar only */
.sidebar {
  display: none !important;
}

/* App layout — row: feed + right sidebar */
.app-layout {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 56px);
}

/* Feed — takes ALL space left after right sidebar */
.feed-col {
  flex: 1 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-y: auto !important;
  height: 100% !important;
  padding: 0 0 80px 0 !important;
}

/* Right sidebar — fixed width, always visible on tablet+ */
.right-sidebar {
  display: block !important;
  width: 260px !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  height: 100% !important;
  border-left: 1px solid var(--border) !important;
  padding: 12px !important;
}

/* App screen */
#app-screen {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* Spark cards full width of feed column */
.spark-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  margin: 0 !important;
}

/* Media fills full width of feed */
.sk-media-wrap,
.sk-media-img-wrap {
  width: 100% !important;
  border-radius: 0 !important;
}

/* On mobile — hide right sidebar, feed takes everything */
@media (max-width: 767px) {
  .right-sidebar {
    display: none !important;
  }
  .feed-col {
    padding-bottom: 70px !important;
  }
}

/* On small tablet — narrow right sidebar */
@media (min-width: 768px) and (max-width: 1023px) {
  .right-sidebar {
    width: 200px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DEVICE-AWARE CSS
   ═══════════════════════════════════════════════════════════ */

/* iOS specific fixes */
.os-ios .spark-card { -webkit-transform: translateZ(0); transform: translateZ(0); }
.os-ios .sk-media-main { -webkit-playsinline: 1; }
.os-ios input, .os-ios textarea { font-size: 16px !important; } /* prevent iOS zoom on focus */

/* Android specific */
.os-android .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* TWA (installed app) — hide browser-specific UI hints */
.is-twa .auth-sub { display: none; }

/* Touch devices — bigger tap targets */
.is-touch .s-btn        { min-height: 36px; padding: 6px 12px; }
.is-touch .nav-item     { min-height: 44px; }
.is-touch .drawer-item  { min-height: 48px; }
.is-touch .btn-auth     { min-height: 52px; }
.is-touch .fi           { min-height: 48px; font-size: 16px; }

/* Phone — clean full screen */
.device-phone .spark-card   { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
.device-phone .compose-box  { border-radius: 0 !important; margin: 0 !important; }
.device-phone .stories-bar  { padding: 8px 6px; }
.device-phone .feed-col     { padding-bottom: 70px !important; }

/* Tablet — slightly comfortable layout */
.device-tablet .spark-card  { border-radius: 12px; margin: 0 8px 8px; }
.device-tablet .feed-col    { padding: 8px; }

/* Desktop — full layout */
.device-desktop .spark-card { border-radius: 14px; margin: 0 0 10px; }
.device-desktop .feed-col   { padding: 14px; }

/* ── Filter bar active pill — strong visual ── */
#filter-bar .f-pill.active {
  background: linear-gradient(135deg, var(--green), var(--green2)) !important;
  color: var(--cream) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(22,163,74,.35) !important;
  transform: scale(1.04) !important;
}
#filter-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-overflow-scrolling: touch;
}
#filter-bar::-webkit-scrollbar { display: none; }
#filter-bar .f-pill {
  white-space: nowrap;
  flex-shrink: 0;
}
/* Compose category pills */
.c-bot .f-pill.active {
  background: linear-gradient(135deg, var(--green), var(--green2)) !important;
  color: var(--cream) !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM AUTH PAGE — Facebook-style but higher calibre
   ═══════════════════════════════════════════════════════════ */
#auth-screen {
  display: flex !important;
  flex-direction: row !important;
  min-height: 100vh !important;
  padding: 0 !important;
  align-items: stretch !important;
  background: #000000 !important;
}

/* LEFT: Showcase panel */
.auth-showcase {
  flex: 1.2;
  position: relative;
  overflow: hidden;
  background: #050d0a;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Slides */
.showcase-slides {
  flex: 1;
  position: relative;
}
.showcase-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  transform: scale(1.02);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.showcase-slide.active {
  opacity: 1;
  transform: scale(1);
}
.slide-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.slide-bubble {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: .7; }
  50% { transform: translateY(-30px) scale(1.05); opacity: 1; }
}

/* Floating user cards */
.float-card {
  position: absolute;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  animation: cardFloat 4s ease-in-out infinite;
  z-index: 2;
}
.fc1 { top: 12%; left: 8%; animation-delay: 0s; }
.fc2 { top: 38%; right: 5%; animation-delay: 1.5s; }
.fc3 { top: 62%; left: 12%; animation-delay: 0.8s; }
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.fc-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.fc-name { font-size: 12px; font-weight: 700; color: #fff; }
.fc-text { font-size: 10px; color: rgba(255,255,255,.6); margin-top: 2px; }
.fc-heart { font-size: 11px; color: rgba(255,255,255,.7); margin-left: auto; white-space: nowrap; }

/* Avatar grid */
.avatar-grid {
  position: absolute;
  bottom: 30%;
  right: 8%;
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 8px;
  z-index: 2;
}
.ag-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  border: 2px solid rgba(255,255,255,.2);
  animation: agPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.ag-av:nth-child(1){animation-delay:.1s}
.ag-av:nth-child(2){animation-delay:.2s}
.ag-av:nth-child(3){animation-delay:.3s}
.ag-av:nth-child(4){animation-delay:.4s}
.ag-av:nth-child(5){animation-delay:.5s}
.ag-av:nth-child(6){animation-delay:.6s}
.ag-av:nth-child(7){animation-delay:.7s}
.ag-av:nth-child(8){animation-delay:.8s}
@keyframes agPop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/* Earnings showcase */
.earn-showcase {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 20px;
  padding: 20px 24px;
  min-width: 220px;
  z-index: 2;
  animation: cardFloat 4s ease-in-out infinite;
}
.es-header { font-size: 11px; color: rgba(255,255,255,.6); letter-spacing: 1px; text-transform: uppercase; }
.es-amount { font-family: 'DM Serif Display', serif; font-size: 36px; color: var(--green3); margin: 6px 0 2px; }
.es-sub { font-size: 11px; color: rgba(34,197,94,.8); }
.es-bars { display: flex; align-items: flex-end; gap: 5px; height: 50px; margin-top: 14px; }
.es-bar { flex: 1; border-radius: 4px 4px 0 0; transition: height .3s; }

/* Feature pills */
.feat-pill {
  position: absolute;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 30px;
  padding: 8px 14px;
  font-size: 11px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  z-index: 2;
  white-space: nowrap;
  animation: cardFloat 4s ease-in-out infinite;
}
.fp1 { bottom: 40%; left: 5%; animation-delay: 0s; }
.fp2 { bottom: 33%; right: 5%; animation-delay: 1s; }
.fp3 { bottom: 26%; left: 15%; animation-delay: 2s; }
.fp4 { bottom: 19%; right: 10%; animation-delay: .5s; }

/* Post showcase */
.post-showcase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 8px;
  width: 260px;
  z-index: 2;
}
.ps-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .2s;
}
.ps-active { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.2); }
.ps-icon { font-size: 20px; flex-shrink: 0; }
.ps-label { font-size: 12px; font-weight: 700; color: #fff; }
.ps-sub { font-size: 10px; color: rgba(255,255,255,.5); }
.ps-views { font-size: 10px; color: var(--green3); margin-left: auto; white-space: nowrap; }

/* Slide text overlay */
.slide-text {
  position: relative;
  z-index: 3;
  padding: 32px 36px;
  background: linear-gradient(to top, rgba(5,13,10,.98) 0%, rgba(5,13,10,.7) 60%, transparent 100%);
}
.slide-tag {
  display: inline-block;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: 30px;
  padding: 5px 14px;
  font-size: 11px;
  color: var(--green3);
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.slide-title {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 10px;
}
.slide-title em { color: var(--green3); font-style: italic; }
.slide-desc {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  line-height: 1.7;
  margin-bottom: 16px;
}
.slide-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.stat-pill {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  padding: 5px 12px;
  font-size: 11px;
  color: rgba(255,255,255,.7);
}

/* Slide dots */
.slide-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 12px;
  position: relative;
  z-index: 4;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  cursor: pointer;
  transition: all .3s;
}
.dot.active {
  background: var(--green3);
  width: 24px;
  border-radius: 4px;
}

/* Showcase brand */
.showcase-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 4;
}

/* RIGHT: Auth form */
.auth-right {
  width: 460px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 32px;
  background: #000000;
  border-left: 1px solid rgba(34,197,94,.12);
  border-right: 1px solid rgba(34,197,94,.12);
  min-height: 100vh;
  overflow-y: auto;
  position: relative;
  z-index: 10;
}
.auth-right .auth-box {
  width: 100%;
  max-width: 380px;
  background: #0d0d0d !important;
  border: 1px solid rgba(34,197,94,.2) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  box-shadow: 0 0 40px rgba(34,197,94,.06), 0 20px 60px rgba(0,0,0,.8) !important;
}
.auth-logo-sm {
  text-align: center;
  margin-bottom: 28px;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  #auth-screen {
    flex-direction: column !important;
  }
  .auth-showcase {
    min-height: 45vh;
    max-height: 45vh;
  }
  .auth-right {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 24px 20px;
    min-height: auto;
  }
  .float-card { display: none; }
  .avatar-grid { display: none; }
  .earn-showcase { width: 180px; }
  .slide-title { font-size: 20px; }
  .slide-text { padding: 20px; }
  .fc3, .fp3, .fp4 { display: none; }
}

@media (max-width: 480px) {
  .auth-showcase { min-height: 38vh; max-height: 38vh; }
  .feat-pill { display: none; }
}

/* ── Right showcase mirror ── */
.auth-showcase-right {
  flex: 1.2;
  position: relative;
  overflow: hidden;
  background: #050d0a;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Mindvora logo color animation — auth page ── */
@keyframes mindvora-colors {
  0%   { color: #22c55e; text-shadow: 0 0 20px rgba(34,197,94,.5); }
  14%  { color: #60a5fa; text-shadow: 0 0 20px rgba(96,165,250,.5); }
  28%  { color: #a78bfa; text-shadow: 0 0 20px rgba(167,139,250,.5); }
  42%  { color: #f472b6; text-shadow: 0 0 20px rgba(244,114,182,.5); }
  57%  { color: #fb923c; text-shadow: 0 0 20px rgba(251,146,60,.5); }
  71%  { color: #facc15; text-shadow: 0 0 20px rgba(250,204,21,.5); }
  85%  { color: #34d399; text-shadow: 0 0 20px rgba(52,211,153,.5); }
  100% { color: #22c55e; text-shadow: 0 0 20px rgba(34,197,94,.5); }
}

@keyframes mindvora-colors-nav {
  0%   { color: #22c55e; }
  14%  { color: #60a5fa; }
  28%  { color: #a78bfa; }
  42%  { color: #f472b6; }
  57%  { color: #fb923c; }
  71%  { color: #facc15; }
  85%  { color: #34d399; }
  100% { color: #22c55e; }
}

/* Auth box dark styling */
.auth-box {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 20px;
  padding: 28px 24px;
}
.auth-tab { color: rgba(255,255,255,.5) !important; }
.auth-tab.active { background: var(--green2) !important; color: #fff !important; }
.fi { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #fff !important; }
.fi::placeholder { color: rgba(255,255,255,.3) !important; }
.btn-auth { background: linear-gradient(135deg,var(--green),var(--green2)) !important; }

/* Mobile: hide right showcase, keep left + center */
@media (max-width: 1024px) {
  .auth-showcase-right { display: none !important; }
  .auth-right { border-right: none !important; }
}
@media (max-width: 768px) {
  .auth-showcase { min-height: 40vh; max-height: 40vh; }
  .auth-showcase-right { display: none !important; }
}

.btn-google {
  width: 100%;
  padding: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  color: rgba(255,255,255,.9);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .2s;
}
.btn-google:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-1px);
}

/* ── Hover profile card ── */
.hover-profile-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
  min-width: 220px;
  animation: pop .2s cubic-bezier(.34,1.56,.64,1);
}
.hpc-av { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;flex-shrink:0; }
.hpc-name { font-size:13px;font-weight:700;color:var(--moon); }
.hpc-handle { font-size:11px;color:var(--muted); }
.hpc-follow { margin-left:auto;padding:6px 12px;background:var(--green);border:none;border-radius:20px;color:#fff;font-size:11px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif; }

/* ── Typing indicator ── */
.typing-dots { display:none;align-items:center;gap:4px;padding:8px 12px; }
.typing-dots span { width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing-bounce .8s ease-in-out infinite; }
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typing-bounce { 0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)} }

/* ── Streak badge ── */
.streak-badge { display:inline-flex;align-items:center;gap:4px;background:rgba(251,146,60,.15);border:1px solid rgba(251,146,60,.3);border-radius:20px;padding:3px 10px;font-size:11px;color:#fb923c;font-weight:700; }

/* ════════════════════════════════════════════════════════════
   LOGIN PAGE COMPLETE REDESIGN
   Dark black bg · Green glowing animations · Centered box
   ════════════════════════════════════════════════════════════ */

/* Force entire auth screen to be pure black */
#auth-screen,
#auth-screen * {
  box-sizing: border-box;
}
#auth-screen {
  background: #000 !important;
  min-height: 100vh;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  position: relative;
}

/* Showcases take equal space on both sides */
.auth-showcase,
.auth-showcase-right {
  flex: 1 !important;
  background: #000 !important;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* Center the auth form panel */
.auth-right {
  width: 440px !important;
  flex-shrink: 0 !important;
  background: #000 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 32px 24px !important;
  border-left: 1px solid rgba(34,197,94,.15) !important;
  border-right: 1px solid rgba(34,197,94,.15) !important;
  min-height: 100vh !important;
}

/* The auth box — rounded, not pointed */
.auth-box {
  background: #0a0a0a !important;
  border: 1px solid rgba(34,197,94,.25) !important;
  border-radius: 24px !important;
  padding: 32px 28px !important;
  width: 100% !important;
  max-width: 380px !important;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.05),
    0 20px 60px rgba(0,0,0,.8),
    0 0 40px rgba(34,197,94,.05) !important;
}

/* Auth tab styling */
.auth-tab {
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,.4) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all .2s !important;
  letter-spacing: .5px !important;
}
.auth-tab.active {
  background: rgba(34,197,94,.15) !important;
  color: var(--green3) !important;
  font-weight: 700 !important;
}
.auth-tabs {
  background: rgba(255,255,255,.03) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  display: flex !important;
  margin-bottom: 24px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

/* Input fields */
.fi {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  width: 100% !important;
  outline: none !important;
  transition: border .2s, box-shadow .2s !important;
  font-family: 'DM Sans', sans-serif !important;
}
.fi:focus {
  border-color: rgba(34,197,94,.5) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.1) !important;
}
.fi::placeholder { color: rgba(255,255,255,.25) !important; }

/* Labels */
.fg label {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.4) !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Login button */
.btn-auth {
  width: 100% !important;
  padding: 14px !important;
  background: linear-gradient(135deg, #166534, #22c55e) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all .25s !important;
  font-family: 'DM Sans', sans-serif !important;
  box-shadow: 0 4px 20px rgba(34,197,94,.3) !important;
}
.btn-auth:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 30px rgba(34,197,94,.4) !important;
}
.btn-auth:disabled { opacity: .6 !important; cursor: not-allowed !important; }

/* Error text */
.a-err {
  font-size: 12px !important;
  color: #ff6b6b !important;
  min-height: 16px !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

/* Mindvora logo on auth page - green glow */
.auth-logo {
  font-family: 'Great Vibes', cursive !important;
  font-size: 72px !important;
  animation: mindvora-colors 8s linear infinite !important;
  text-align: center !important;
  display: block !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 20px currentColor) !important;
}
.auth-logo-sm {
  text-align: center !important;
  margin-bottom: 24px !important;
}
.auth-logo-sm span {
  filter: drop-shadow(0 0 12px rgba(34,197,94,.6)) !important;
}
.auth-sub {
  text-align: center !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important;
  margin-bottom: 28px !important;
}

/* GREEN glowing bubbles on showcases */
.slide-bubble {
  background: radial-gradient(circle, rgba(34,197,94,.2), transparent) !important;
  animation: bubbleFloat 6s ease-in-out infinite !important;
  filter: blur(20px) !important;
}

/* Float cards — green glow */
.float-card {
  background: rgba(0,0,0,.7) !important;
  border: 1px solid rgba(34,197,94,.2) !important;
  box-shadow: 0 0 20px rgba(34,197,94,.1) !important;
}
.fc-name { color: #fff !important; }
.fc-heart { color: var(--green3) !important; }

/* Slide text glowing headings */
.slide-title em {
  color: var(--green3) !important;
  text-shadow: 0 0 20px rgba(34,197,94,.5) !important;
}
.slide-tag {
  background: rgba(34,197,94,.1) !important;
  border-color: rgba(34,197,94,.3) !important;
  color: var(--green3) !important;
  box-shadow: 0 0 10px rgba(34,197,94,.15) !important;
}
.stat-pill {
  background: rgba(34,197,94,.06) !important;
  border-color: rgba(34,197,94,.15) !important;
  color: rgba(255,255,255,.7) !important;
}
.dot.active {
  background: var(--green3) !important;
  box-shadow: 0 0 8px rgba(34,197,94,.6) !important;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .auth-showcase-right { display: none !important; }
  .auth-right {
    border-right: none !important;
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
  }
}
@media (max-width: 640px) {
  #auth-screen { flex-direction: column !important; }
  .auth-showcase {
    min-height: 35vh !important;
    max-height: 35vh !important;
    flex: none !important;
  }
  .auth-right {
    min-height: auto !important;
    padding: 28px 16px !important;
    flex: 1 !important;
  }
  .auth-box { border-radius: 20px !important; }
}

/* ── Green glow animations on auth page ── */
#auth-screen {
  background: #000000 !important;
}

/* Glowing green particles behind showcases */
.auth-showcase::before,
.auth-showcase-right::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,.12) 0%, transparent 70%);
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  animation: glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes glow-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .7; }
  50% { transform: translateX(-50%) scale(1.2); opacity: 1; }
}

/* Auth fields inside box */
.auth-right .fi {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(34,197,94,.2) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 13px 16px !important;
  font-size: 14px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.auth-right .fi:focus {
  border-color: rgba(34,197,94,.6) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.1) !important;
  outline: none !important;
}
.auth-right .fi::placeholder { color: rgba(255,255,255,.25) !important; }

/* Auth tabs */
.auth-right .auth-tabs {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(34,197,94,.15) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  margin-bottom: 24px !important;
}
.auth-right .auth-tab {
  color: rgba(255,255,255,.45) !important;
  font-size: 13px !important;
  letter-spacing: .5px !important;
  border-radius: 9px !important;
}
.auth-right .auth-tab.active {
  background: var(--green2) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Mindvora logo in auth right */
.auth-logo-sm {
  text-align: center !important;
  margin-bottom: 24px !important;
}
.auth-logo-sm span {
  font-size: 40px !important;
  filter: drop-shadow(0 0 12px rgba(34,197,94,.5));
}

/* Auth button */
.auth-right .btn-auth {
  background: linear-gradient(135deg, #166534, #22c55e) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  box-shadow: 0 4px 20px rgba(34,197,94,.25) !important;
  transition: all .25s !important;
}
.auth-right .btn-auth:hover {
  box-shadow: 0 8px 30px rgba(34,197,94,.4) !important;
  transform: translateY(-1px) !important;
}

/* Green glow on slide borders */
.showcase-slide.active .slide-text {
  animation: textGlow .5s ease both;
}
@keyframes textGlow {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Float cards glow on hover */
.float-card:hover {
  border-color: rgba(34,197,94,.4) !important;
  box-shadow: 0 0 20px rgba(34,197,94,.15) !important;
}

/* Green dot indicator for slide */
.dot.active {
  background: #22c55e !important;
  box-shadow: 0 0 8px rgba(34,197,94,.6) !important;
}

/* Error message styling */
.a-err {
  color: #fca5a5 !important;
  font-size: 12px !important;
  min-height: 16px !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}

/* Label text */
.auth-right label {
  color: rgba(255,255,255,.6) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Full dark auth screen background */
.auth-showcase { background: #050805 !important; }
.auth-showcase-right { background: #050805 !important; }

/* ═══════════════════════════════════════════════════════════
   MINDVORA AUTH PAGE — PITCH BLACK + GREEN GLOW
   Complete override — this is the final definitive style
   ═══════════════════════════════════════════════════════════ */

/* The entire auth page = pitch black */
#auth-screen,
#auth-screen .auth-showcase,
#auth-screen .auth-showcase-right,
#auth-screen .auth-right,
#auth-screen .slide-bg {
  background: #000000 !important;
}

/* Full page layout */
#auth-screen {
  display: flex !important;
  flex-direction: row !important;
  min-height: 100vh !important;
  width: 100vw !important;
  padding: 0 !important;
  align-items: stretch !important;
  background: #000000 !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  overflow-y: auto !important;
}

/* Showcase panels — pure black */
#auth-screen .auth-showcase,
#auth-screen .auth-showcase-right {
  flex: 1 !important;
  background: #000000 !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 100vh !important;
}

/* Green ambient glow — the ONLY colour on the dark panels */
#auth-screen .auth-showcase::after {
  content: '' !important;
  position: absolute !important;
  width: 500px !important;
  height: 500px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(34,197,94,.18) 0%, rgba(22,163,74,.08) 40%, transparent 70%) !important;
  top: 20% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  animation: greenGlow 5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#auth-screen .auth-showcase-right::after {
  content: '' !important;
  position: absolute !important;
  width: 500px !important;
  height: 500px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(34,197,94,.14) 0%, rgba(22,163,74,.06) 40%, transparent 70%) !important;
  bottom: 20% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  animation: greenGlow 7s ease-in-out infinite reverse !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

@keyframes greenGlow {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;  transform: translateX(-50%) scale(1.3); }
}

/* Slide backgrounds — keep black with subtle green tint */
#auth-screen .slide-bg {
  background: #000000 !important;
  position: absolute !important;
  inset: 0 !important;
}

/* All bubbles — green only */
#auth-screen .slide-bubble {
  background: radial-gradient(circle, rgba(34,197,94,.15), transparent) !important;
}

/* Float cards — dark with green border glow */
#auth-screen .float-card {
  background: rgba(0,0,0,.9) !important;
  border: 1px solid rgba(34,197,94,.25) !important;
  box-shadow: 0 0 20px rgba(34,197,94,.08) !important;
  backdrop-filter: blur(20px) !important;
}
#auth-screen .float-card:hover {
  border-color: rgba(34,197,94,.5) !important;
  box-shadow: 0 0 30px rgba(34,197,94,.2) !important;
}

/* Avatar grid */
#auth-screen .ag-av {
  border: 1px solid rgba(34,197,94,.3) !important;
  box-shadow: 0 0 8px rgba(34,197,94,.15) !important;
}

/* Post showcase cards */
#auth-screen .post-showcase {
  background: rgba(0,0,0,.95) !important;
  border: 1px solid rgba(34,197,94,.2) !important;
  box-shadow: 0 0 30px rgba(34,197,94,.08) !important;
}
#auth-screen .ps-active {
  background: rgba(34,197,94,.08) !important;
  border: 1px solid rgba(34,197,94,.25) !important;
}

/* Earnings showcase */
#auth-screen .earn-showcase {
  background: rgba(0,0,0,.95) !important;
  border: 1px solid rgba(34,197,94,.2) !important;
  box-shadow: 0 0 30px rgba(34,197,94,.1) !important;
}
#auth-screen .es-bar {
  background: rgba(34,197,94,.3) !important;
}
#auth-screen .es-bar:last-child {
  background: #22c55e !important;
  box-shadow: 0 0 12px rgba(34,197,94,.5) !important;
}

/* Feature pills */
#auth-screen .feat-pill {
  background: rgba(0,0,0,.8) !important;
  border: 1px solid rgba(34,197,94,.2) !important;
  color: rgba(34,197,94,.9) !important;
}

/* Slide dots — green */
#auth-screen .dot { background: rgba(34,197,94,.25) !important; }
#auth-screen .dot.active {
  background: #22c55e !important;
  box-shadow: 0 0 10px rgba(34,197,94,.7) !important;
  width: 24px !important;
}

/* Slide text */
#auth-screen .slide-tag {
  background: rgba(34,197,94,.1) !important;
  border: 1px solid rgba(34,197,94,.3) !important;
  color: #22c55e !important;
}
#auth-screen .slide-title { color: #ffffff !important; }
#auth-screen .slide-title em { color: #22c55e !important; text-shadow: 0 0 20px rgba(34,197,94,.4); }
#auth-screen .slide-desc { color: rgba(255,255,255,.5) !important; }
#auth-screen .stat-pill {
  background: rgba(34,197,94,.05) !important;
  border: 1px solid rgba(34,197,94,.15) !important;
  color: rgba(255,255,255,.6) !important;
}

/* Slide gradient (text area bg at bottom) */
#auth-screen .slide-text {
  background: linear-gradient(to top, rgba(0,0,0,.98) 0%, rgba(0,0,0,.7) 50%, transparent 100%) !important;
}

/* CENTER column — dark box */
#auth-screen .auth-right {
  width: 460px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 32px !important;
  background: #000000 !important;
  border-left: 1px solid rgba(34,197,94,.15) !important;
  border-right: 1px solid rgba(34,197,94,.15) !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  z-index: 10 !important;
}

/* The form BOX itself */
#auth-screen .auth-right .auth-box {
  width: 100% !important;
  max-width: 380px !important;
  background: #0a0a0a !important;
  border: 1px solid rgba(34,197,94,.3) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.05),
    0 0 40px rgba(34,197,94,.08),
    0 20px 60px rgba(0,0,0,.9) !important;
}

/* Mindvora logo on form */
#auth-screen .auth-logo-sm span {
  font-size: 40px !important;
  animation: mv-shared-wordmark 12s ease-in-out infinite !important;
  filter: drop-shadow(0 0 16px rgba(34,197,94,.6)) !important;
}

/* Tabs */
#auth-screen .auth-tabs {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(34,197,94,.15) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  margin-bottom: 24px !important;
}
#auth-screen .auth-tab {
  color: rgba(255,255,255,.4) !important;
  font-size: 13px !important;
  border-radius: 9px !important;
  font-family: 'DM Sans', sans-serif !important;
}
#auth-screen .auth-tab.active {
  background: linear-gradient(135deg, #166534, #22c55e) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 0 16px rgba(34,197,94,.3) !important;
}

/* Input fields */
#auth-screen .fi {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(34,197,94,.2) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  padding: 13px 16px !important;
  font-size: 14px !important;
  width: 100% !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: border-color .2s, box-shadow .2s !important;
}
#auth-screen .fi:focus {
  border-color: rgba(34,197,94,.6) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.1) !important;
  outline: none !important;
  background: rgba(34,197,94,.03) !important;
}
#auth-screen .fi::placeholder { color: rgba(255,255,255,.2) !important; }

/* Labels */
#auth-screen label,
#auth-screen .fg label {
  color: rgba(34,197,94,.8) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 7px !important;
  display: block !important;
}

/* Sign in button */
#auth-screen .btn-auth {
  background: linear-gradient(135deg, #166534, #16a34a, #22c55e) !important;
  border-radius: 12px !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  padding: 14px !important;
  width: 100% !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 0 20px rgba(34,197,94,.3), 0 4px 16px rgba(0,0,0,.5) !important;
  transition: all .25s !important;
  font-family: 'DM Sans', sans-serif !important;
}
#auth-screen .btn-auth:hover {
  box-shadow: 0 0 35px rgba(34,197,94,.5), 0 8px 24px rgba(0,0,0,.6) !important;
  transform: translateY(-1px) !important;
}

/* Google button */
#auth-screen .btn-google {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.8) !important;
  width: 100% !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: all .2s !important;
}
#auth-screen .btn-google:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.25) !important;
}

/* Error text */
#auth-screen .a-err {
  color: #fca5a5 !important;
  font-size: 12px !important;
  min-height: 16px !important;
  text-align: center !important;
}

/* Terms text */
#auth-screen .auth-right > div:last-child {
  color: rgba(255,255,255,.25) !important;
  font-size: 11px !important;
  text-align: center !important;
  margin-top: 16px !important;
}

/* Showcase brand text */
#auth-screen .showcase-brand span:first-child {
  color: #22c55e;
  text-shadow: 0 0 20px rgba(34,197,94,.5);
}

/* Mobile: stack vertically */
@media (max-width: 1024px) {
  #auth-screen .auth-showcase-right { display: none !important; }
  #auth-screen .auth-right { border-right: none !important; }
}
@media (max-width: 768px) {
  #auth-screen { flex-direction: column !important; }
  #auth-screen .auth-showcase { min-height: 42vh !important; max-height: 42vh !important; }
  #auth-screen .auth-showcase-right { display: none !important; }
  #auth-screen .auth-right {
    width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid rgba(34,197,94,.15) !important;
    padding: 24px 16px 40px !important;
    min-height: auto !important;
  }
  #auth-screen .auth-right .auth-box { max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE AUTOFIT + iOS FIXES — FULL SCREEN ON ALL DEVICES
   ═══════════════════════════════════════════════════════════ */

/* ── Base reset for ALL devices ── */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── iOS Safari specific fixes ── */
@supports (-webkit-touch-callout: none) {
  /* iPhone/iPad notch safe areas */
  #auth-screen .auth-right {
    padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    padding-top:    calc(40px + env(safe-area-inset-top)) !important;
  }
  .bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }
  .topbar {
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
  }

  /* iOS: stop inputs from zooming on focus (font-size must be >= 16px) */
  input, textarea, select {
    font-size: 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* iOS: color animations need -webkit prefix */
  .tb-logo, .auth-logo-sm span {
    -webkit-animation: mindvora-colors 6s linear infinite !important;
    animation: mindvora-colors 6s linear infinite !important;
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(90deg, #22c55e, #60a5fa, #a78bfa, #f472b6, #fb923c, #facc15, #22c55e);
    background-size: 300% auto;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-animation: gradientShift 4s linear infinite !important;
    animation: gradientShift 4s linear infinite !important;
  }
  @-webkit-keyframes gradientShift {
    0%   { background-position: 0% center; }
    100% { background-position: 300% center; }
  }
  @keyframes gradientShift {
    0%   { background-position: 0% center; }
    100% { background-position: 300% center; }
  }

  /* iOS: fix button tap highlight */
  button, .btn-auth, .btn-google, .nav-item {
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
  }

  /* iOS: fix overflow scroll bounce */
  .feed-col, .dm-msgs, .modal-box, .drawer {
    -webkit-overflow-scrolling: touch !important;
  }

  /* iOS: fix position fixed on scroll */
  .topbar, .bottom-nav, .drawer-overlay {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
  /* .drawer is intentionally excluded here — its correct transform
     (translateX offset + translateZ hint, for every platform, not just
     iOS) is defined once in the base .drawer / .drawer.open rule above.
     Overriding it again here with !important was the bug that pinned
     the drawer permanently open on top of the login screen. */

  /* iOS: green glow animations */
  .auth-showcase::after,
  .auth-showcase-right::after {
    -webkit-animation: greenGlow 5s ease-in-out infinite !important;
    animation: greenGlow 5s ease-in-out infinite !important;
  }
  .float-card {
    -webkit-animation: cardFloat 4s ease-in-out infinite !important;
    animation: cardFloat 4s ease-in-out infinite !important;
  }
  .showcase-slide {
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease !important;
    transition: opacity 1s ease, transform 1s ease !important;
  }

  /* iOS: backdrop-filter support */
  .float-card, .post-showcase, .earn-showcase {
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
  }
}

/* ── ANDROID + ALL SMALL PHONES (max 480px) ── */
@media screen and (max-width: 480px) {

  /* Auth page: stack vertically, form takes full width */
  #auth-screen {
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #auth-screen .auth-showcase {
    min-height: 38vh !important;
    max-height: 38vh !important;
    flex-shrink: 0 !important;
  }
  #auth-screen .auth-showcase-right { display: none !important; }
  #auth-screen .auth-right {
    width: 100% !important;
    flex: 1 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid rgba(34,197,94,.15) !important;
    padding: 20px 16px 40px !important;
    min-height: auto !important;
    justify-content: flex-start !important;
    padding-top: 24px !important;
  }
  #auth-screen .auth-right .auth-box {
    max-width: 100% !important;
    padding: 20px 16px !important;
  }
  #auth-screen .auth-logo-sm span { font-size: 32px !important; }

  /* Feed: full width, no padding issues */
  .app-layout {
    flex-direction: column !important;
    width: 100vw !important;
    overflow-x: hidden !important;
  }
  .feed-col {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 0 70px 0 !important;
    overflow-x: hidden !important;
  }
  .sidebar, .right-sidebar { display: none !important; }

  /* Topbar on small phones */
  .topbar {
    padding: 0 12px !important;
    height: 52px !important;
  }
  .tb-logo { font-size: 22px !important; }

  /* Cards fill screen */
  .spark-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    width: 100vw !important;
  }
  .compose-box {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  /* Modal = bottom sheet on small phone */
  .modal-overlay.open .modal-box,
  .modal-overlay.open .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }

  /* Bottom nav always visible */
  .bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    padding: 6px 0 !important;
    background: #000000 !important;
    border-top: 1px solid rgba(34,197,94,.15) !important;
  }
  .bottom-nav .nav-item {
    font-size: 9px !important;
    padding: 4px 6px !important;
    gap: 2px !important;
  }
  .bottom-nav .nav-ic { font-size: 18px !important; }

  /* Auth field spacing */
  .fg { margin-bottom: 14px !important; }
  .fi { padding: 12px 14px !important; }
  .btn-auth { padding: 13px !important; font-size: 14px !important; }

  /* Filter pills scrollable */
  #filter-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  #filter-bar .f-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  /* Stories scroll horizontal */
  .stories-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  /* Media full width */
  .sk-media-wrap, .sk-media-img-wrap {
    width: 100vw !important;
    border-radius: 0 !important;
  }
  video.sk-media-main { width: 100% !important; }

  /* Drawer full width on small phone */
  .drawer { width: 85vw !important; max-width: 300px !important; }

  /* Text sizes */
  .sk-name   { font-size: 13px !important; }
  .sk-body   { font-size: 14px !important; line-height: 1.6 !important; }
  .s-btn     { font-size: 11px !important; padding: 5px 8px !important; }

  /* Showcase slide text smaller on phone */
  .slide-title { font-size: 18px !important; }
  .slide-desc  { font-size: 11px !important; }
  .slide-text  { padding: 14px 16px !important; }

  /* Float cards — hide on tiny screens */
  .float-card { display: none !important; }
  .avatar-grid { bottom: 20% !important; }
  .feat-pill   { display: none !important; }
}

/* ── MEDIUM PHONES (481px - 767px) ── */
@media screen and (min-width: 481px) and (max-width: 767px) {
  #auth-screen { flex-direction: column !important; }
  #auth-screen .auth-showcase { min-height: 42vh !important; max-height: 42vh !important; }
  #auth-screen .auth-showcase-right { display: none !important; }
  #auth-screen .auth-right {
    width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid rgba(34,197,94,.15) !important;
    padding: 28px 24px 40px !important;
    min-height: auto !important;
  }
  #auth-screen .auth-right .auth-box { max-width: 100% !important; }
  .sidebar, .right-sidebar { display: none !important; }
  .feed-col { width: 100% !important; max-width: 100% !important; padding-bottom: 70px !important; }
  .bottom-nav { display: flex !important; }
  .spark-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
}

/* ── TABLETS (768px - 1023px) ── */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #auth-screen .auth-showcase { flex: 1 !important; }
  #auth-screen .auth-showcase-right { display: none !important; }
  #auth-screen .auth-right { width: 400px !important; }
  .sidebar { display: none !important; }
  .right-sidebar { width: 200px !important; }
  .feed-col { flex: 1 !important; }
}

/* ── Landscape phone fix ── */
@media screen and (max-height: 500px) and (orientation: landscape) {
  #auth-screen { flex-direction: row !important; overflow-y: auto !important; }
  #auth-screen .auth-showcase { min-height: 100vh !important; max-height: none !important; }
  #auth-screen .auth-right {
    width: 320px !important;
    flex-shrink: 0 !important;
    min-height: 100vh !important;
    padding: 16px !important;
    overflow-y: auto !important;
  }
  #auth-screen .auth-right .auth-box { padding: 16px !important; }
}

/* ── WebKit prefixed animations for iOS Safari ── */
@-webkit-keyframes mindvora-colors {
  0%   { color: #22c55e; }
  14%  { color: #60a5fa; }
  28%  { color: #a78bfa; }
  42%  { color: #f472b6; }
  57%  { color: #fb923c; }
  71%  { color: #facc15; }
  85%  { color: #34d399; }
  100% { color: #22c55e; }
}
@-webkit-keyframes greenGlow {
  0%, 100% { opacity: .7; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;  -webkit-transform: translateX(-50%) scale(1.3); transform: translateX(-50%) scale(1.3); }
}
@-webkit-keyframes cardFloat {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50%       { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}
@-webkit-keyframes bubbleFloat {
  0%, 100% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); opacity: .7; }
  50%       { -webkit-transform: translateY(-30px) scale(1.05); transform: translateY(-30px) scale(1.05); opacity: 1; }
}
@-webkit-keyframes pop {
  from { -webkit-transform: scale(0); transform: scale(0); }
  to   { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@-webkit-keyframes rise {
  from { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); }
  to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes agPop {
  from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
  to   { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

/* iOS: make the Mindvora animated logo text work via gradient clip */
.tb-logo-animated,
.auth-logo-sm .mv-logo-text {
  background: linear-gradient(90deg, #22c55e 0%, #60a5fa 16%, #a78bfa 33%, #f472b6 50%, #fb923c 66%, #facc15 83%, #22c55e 100%);
  background-size: 300% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-animation: gradientShift 4s linear infinite !important;
  animation: gradientShift 4s linear infinite !important;
  display: inline-block !important;
}
@-webkit-keyframes gradientShift {
  from { background-position: 0% center; }
  to   { background-position: 300% center; }
}
@keyframes gradientShift {
  from { background-position: 0% center; }
  to   { background-position: 300% center; }
}

/* ── Login error message — no blue highlight, clean red style ── */
.a-err {
  color: #fca5a5 !important;
  background: transparent !important;
  font-size: 12px !important;
  min-height: 18px !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  -webkit-text-fill-color: #fca5a5 !important;
  line-height: 1.5 !important;
  display: block !important;
}
/* When error has text — show subtle red bg */
#li-err:not(:empty),
#r-err:not(:empty) {
  background: rgba(239,68,68,.08) !important;
  border: 1px solid rgba(239,68,68,.2) !important;
  color: #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
  padding: 8px 12px !important;
}
/* Kill any blue selection highlight on the error text */
.a-err::selection,
#li-err::selection,
#r-err::selection {
  background: transparent !important;
  color: #fca5a5 !important;
}
.a-err::-moz-selection,
#li-err::-moz-selection,
#r-err::-moz-selection {
  background: transparent !important;
  color: #fca5a5 !important;
}
/* Also fix inputs — kill blue/white autofill background on Chrome/Android/iOS */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
.fi:-webkit-autofill,
.fi:-webkit-autofill:hover,
.fi:-webkit-autofill:focus,
.fi:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 9999px #000000 inset !important;
  box-shadow: 0 0 0 9999px #000000 inset !important;
  -webkit-text-fill-color: #f0fdf4 !important;
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f0fdf4 !important;
  caret-color: #f0fdf4 !important;
  border-color: rgba(255,255,255,.1) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ═══════════════════════════════════════════════════════════════
   TASK 1: VIDEO THUMBNAIL PICKER — YouTube-style
   ═══════════════════════════════════════════════════════════════ */
.thumb-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:7500;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(6px)}
.thumb-picker-overlay.open{display:flex}
.thumb-picker-box{background:var(--card);border:1px solid var(--borderhi);border-radius:20px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column}
.thumb-picker-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--border)}
.thumb-picker-head h3{font-family:'DM Serif Display',serif;font-size:17px;color:var(--white);margin:0}
.thumb-picker-body{padding:20px 22px}
.thumb-picker-preview{width:100%;max-height:220px;border-radius:12px;overflow:hidden;background:#000;margin-bottom:16px;position:relative;border:1px solid var(--border)}
.thumb-picker-preview img,.thumb-picker-preview video{width:100%;max-height:220px;object-fit:contain;display:block}
.thumb-picker-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.thumb-option{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .25s;background:#000}
.thumb-option:hover{border-color:var(--green3);transform:scale(1.03)}
.thumb-option.selected{border-color:var(--green3);box-shadow:0 0 12px rgba(34,197,94,.4)}
.thumb-option img{width:100%;height:100%;object-fit:cover}
.thumb-option .thumb-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--green3);color:#fff;font-size:12px;display:none;align-items:center;justify-content:center;font-weight:700}
.thumb-option.selected .thumb-check{display:flex}
.thumb-custom-upload{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;aspect-ratio:16/9;border-radius:10px;border:2px dashed var(--border);cursor:pointer;color:var(--muted);font-size:11px;transition:all .2s}
.thumb-custom-upload:hover{border-color:var(--green3);color:var(--green3)}
.thumb-actions{display:flex;gap:10px;margin-top:4px}
.thumb-actions button{flex:1;padding:11px;border-radius:12px;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity .2s}
.thumb-btn-confirm{background:linear-gradient(135deg,var(--green),var(--green2));color:var(--cream)}
.thumb-btn-confirm:hover{opacity:.88}
.thumb-btn-skip{background:var(--deep);border:1px solid var(--border) !important;color:var(--muted)}
.thumb-btn-skip:hover{color:var(--moon)}
.thumb-duration-badge{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.75);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.5px}

/* ═══════════════════════════════════════════════════════════════
   TASK 2: SHORTS / REELS — 9:16 Aspect Ratio Display
   ═══════════════════════════════════════════════════════════════ */
.short-card{position:relative;aspect-ratio:9/16;background:#000;border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .25s}
.short-card:hover{border-color:var(--green3);transform:scale(1.02)}
.short-card video{width:100%;height:100%;object-fit:cover}
.short-card .short-overlay{position:absolute;bottom:0;left:0;right:0;padding:12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));display:flex;flex-direction:column;gap:4px}
.short-card .short-author{font-size:12px;font-weight:700;color:#fff}
.short-card .short-desc{font-size:11px;color:rgba(255,255,255,.7);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.short-card .short-stats{display:flex;gap:12px;font-size:10px;color:rgba(255,255,255,.6)}
.short-card .short-duration{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px}
.short-card .short-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:36px;opacity:.85;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.shorts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.shorts-upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:9/16;border:2px dashed var(--border);border-radius:16px;cursor:pointer;color:var(--muted);transition:all .2s}
.shorts-upload-area:hover{border-color:var(--green3);color:var(--green3)}
.shorts-upload-area .upload-icon{font-size:32px}
.shorts-upload-area .upload-text{font-size:12px;font-weight:600}
.shorts-upload-area .upload-hint{font-size:10px;color:var(--muted)}
/* Short/Reel Viewer — fullscreen vertical */
.short-viewer{position:fixed;inset:0;background:#000;z-index:6500;display:none;flex-direction:column;align-items:center;justify-content:center}
.short-viewer.open{display:flex}
.short-viewer video{max-height:90vh;max-width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px}
.short-viewer .sv-actions{position:absolute;right:16px;bottom:140px;display:flex;flex-direction:column;gap:18px;align-items:center}
.short-viewer .sv-action-btn{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:24px;cursor:pointer;background:none;border:none;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.short-viewer .sv-action-btn span{font-size:11px;color:rgba(255,255,255,.7)}
.short-viewer .sv-info{position:absolute;bottom:30px;left:16px;right:80px}
.short-viewer .sv-info-author{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
.short-viewer .sv-info-text{font-size:12px;color:rgba(255,255,255,.8);line-height:1.5}
.short-viewer .sv-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.5);border:none;border-radius:50%;width:36px;height:36px;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.short-viewer .sv-nav{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 8px;pointer-events:none}
.short-viewer .sv-nav button{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.4);border:none;color:#fff;font-size:18px;cursor:pointer;pointer-events:all;display:flex;align-items:center;justify-content:center}

/* ═══════════════════════════════════════════════════════════════
   TASK 2: ENHANCED RESPONSIVE — Android, iPad, Tablet
   ═══════════════════════════════════════════════════════════════ */

/* iPad Pro landscape (1024px - 1366px) */
@media (min-width:1024px) and (max-width:1366px) and (orientation:landscape){
  .sidebar{width:180px}
  .right-sidebar{width:220px}
  .feed-col{flex:1;padding:12px}
  .modal-box{max-width:85vw !important}
}

/* iPad portrait (768px - 1024px) */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .sidebar{width:70px !important;padding:8px 4px !important}
  .sidebar .nav-item{justify-content:center;padding:10px;font-size:0;gap:0}
  .sidebar .nav-ic{font-size:20px;margin:0}
  .sidebar .user-card{padding:8px 4px}
  .sidebar .u-name,.sidebar .u-handle,.sidebar .u-stats,.sidebar .dm-badge,.sidebar .admin-badge{display:none}
  .sidebar .u-av{width:40px;height:40px;font-size:16px;margin-bottom:4px}
  .right-sidebar{display:none !important}
  .feed-col{flex:1;max-width:100% !important;padding:12px}
  .modal-box{max-width:90vw !important;max-height:85vh !important}
  .shorts-grid{grid-template-columns:repeat(3,1fr) !important}
  .compose-box{border-radius:12px}
  .spark-card{border-radius:12px}
}

/* Android & small tablets (480px - 767px) */
@media (min-width:480px) and (max-width:767px){
  .topbar{padding:6px 10px}
  .tb-logo{font-size:22px !important}
  .tb-pill{display:none}
  .tb-sw{max-width:150px}
  .shorts-grid{grid-template-columns:repeat(2,1fr) !important}
  .reel-grid{grid-template-columns:repeat(2,1fr) !important}
  .mkt-grid{grid-template-columns:1fr !important}
  .analytics-grid{grid-template-columns:1fr !important}
  .compose-box .c-bot{flex-wrap:wrap;gap:5px}
  .compose-box .f-pill{font-size:10px;padding:4px 9px}
  .feed-col{padding:8px !important;padding-bottom:72px !important}
  .thumb-grid{grid-template-columns:repeat(2,1fr)}
  .dm-wrap{flex-direction:column !important;height:85vh !important}
  .dm-left{width:100% !important;max-height:35% !important;border-right:none !important;border-bottom:1px solid var(--border)}
  .dm-right{flex:1 !important}
}

/* Small Android phones (up to 479px) */
@media (max-width:479px){
  .topbar{padding:5px 8px;height:48px}
  .tb-logo{font-size:20px !important}
  .tb-pill{display:none}
  .tb-sw{max-width:120px}
  .tb-sw input{font-size:11px;padding:5px 10px 5px 28px}
  .ib{width:30px;height:30px;font-size:13px}
  .tb-av{width:28px;height:28px;font-size:11px}
  .feed-col{padding:4px !important;padding-bottom:68px !important}
  .compose-box{padding:10px;border-radius:0;border-left:none;border-right:none}
  .c-ta{font-size:12px;min-height:38px}
  .c-av{width:30px;height:30px;font-size:11px}
  .spark-card{padding:10px;border-radius:0;border-left:none;border-right:none;margin:0}
  .sk-av{width:30px;height:30px;font-size:11px}
  .sk-name{font-size:12px}
  .sk-body{font-size:13px}
  .s-btn{font-size:10px;padding:3px 7px}
  .stories-bar{padding:8px 6px;gap:8px}
  .s-add{width:44px;height:44px;font-size:17px}
  .s-ring{width:44px;height:44px}
  .shorts-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px}
  .reel-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px}
  .modal-overlay.open .modal-box{border-radius:16px 16px 0 0 !important;max-height:92vh !important}
  .m-body{padding:14px 16px}
  .m-head{padding:14px 16px 10px}
  .m-title{font-size:14px !important}
  .pkg-grid{grid-template-columns:1fr 1fr;gap:6px}
  .thumb-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .thumb-picker-box{max-width:100%;border-radius:16px 16px 0 0;margin-top:auto}
  .bottom-nav .nav-item{padding:3px 6px;font-size:9px;min-width:44px}
  .bottom-nav .nav-ic{font-size:18px}
  .filter-bar{gap:4px}
  .filter-bar .f-pill{font-size:10px;padding:4px 8px}
}

/* ── Touch-friendly targets for mobile ── */
@media (hover:none) and (pointer:coarse){
  .s-btn{padding:7px 14px;font-size:12px}
  .f-pill{padding:7px 14px;font-size:12px}
  .nav-item{padding:12px 14px;font-size:13px}
  .media-btn{width:36px;height:36px;font-size:16px}
  .btn-spark{padding:10px 22px;font-size:13px}
  .ib{width:38px;height:38px}
  .m-close{width:32px;height:32px}
  .sk-vid-play{width:40px;height:40px;font-size:16px}
}

/* ── Landscape mode on mobile ── */
@media (max-height:500px) and (orientation:landscape){
  .topbar{height:40px;padding:4px 10px}
  .bottom-nav{padding:3px 0 !important}
  .feed-col{padding-bottom:50px !important}
  .modal-overlay.open .modal-box{max-height:95vh !important}
  .short-viewer video{max-height:95vh;border-radius:6px}
}

/* ═══════════════════════════════════════════════════════════════
   TASK 3: SECURITY SCANNER UI
   ═══════════════════════════════════════════════════════════════ */
.scan-progress{width:100%;height:4px;background:var(--deep);border-radius:4px;overflow:hidden;margin:10px 0}
.scan-progress-fill{height:100%;background:linear-gradient(90deg,var(--green3),var(--green));border-radius:4px;width:0%;transition:width .3s ease}
.scan-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700}
.scan-badge.safe{background:rgba(34,197,94,.12);color:var(--green3);border:1px solid rgba(34,197,94,.2)}
.scan-badge.danger{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.2)}
.scan-badge.scanning{background:rgba(251,191,36,.12);color:#fcd34d;border:1px solid rgba(251,191,36,.2);animation:pulse 1.2s infinite}
/* ---------------------------------------------------------------
   SOCIAL REACTIONS ROW (like, love, care, dislike)
   --------------------------------------------------------------- */
.sk-reactions-row{display:flex;align-items:center;gap:2px;padding:6px 14px 2px;border-bottom:1px solid rgba(255,255,255,.04)}
.sk-reactions-row .react-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:20px;font-size:12px;transition:all .2s ease;border:1px solid transparent}
.sk-reactions-row .react-btn:hover{background:rgba(255,255,255,.06);transform:scale(1.08)}
.react-btn.liked{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#f87171}
.react-btn.loved{background:rgba(236,72,153,.1);border-color:rgba(236,72,153,.25);color:#f472b6}
.react-btn.cared{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.25);color:#fbbf24}
.react-btn.disliked{background:rgba(148,163,184,.1);border-color:rgba(148,163,184,.25);color:#94a3b8}
@keyframes reactPop{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.tb-out svg{display:block}
@media(max-width:480px){.sk-reactions-row{padding:4px 8px 2px;gap:1px}.sk-reactions-row .react-btn{font-size:11px;padding:4px 7px}}
.btn-pay:disabled{opacity:.45;cursor:not-allowed}

/* Advanced Search: always-readable typed text */
#adv-search-inp,body.light #adv-search-inp{color:#fff!important;-webkit-text-fill-color:#fff!important;caret-color:#22c55e!important;background:#0f1418!important}
#adv-search-inp::placeholder{color:#9aa0a6!important;-webkit-text-fill-color:#9aa0a6!important}

/* ── LIGHT-MODE READABILITY FIXES ──
   Only correct pale text on light app surfaces. Dark auth, media, call,
   camera, story-viewer, and video-overlay surfaces intentionally retain
   their white controls. */
body.light .s-btn.saved,body.light-mode .s-btn.saved{color:#14532d!important}
body.light .sv-av,body.light-mode .sv-av{color:#0a1f0e!important;text-shadow:none}
body.light .m-err,body.light-mode .m-err{color:#991b1b!important}
body.light .btn-reject,body.light-mode .btn-reject{color:#991b1b!important}
body.light .sa-title,body.light-mode .sa-title{color:#991b1b!important}
body.light .sa-title.warn,body.light-mode .sa-title.warn{color:#92400e!important}
body.light .sa-title.info,body.light-mode .sa-title.info{color:#1d4ed8!important}
body.light .scan-badge.danger,body.light-mode .scan-badge.danger{color:#991b1b!important}
body.light .scan-badge.scanning,body.light-mode .scan-badge.scanning{color:#92400e!important}
body.light .mar-status.pending,body.light-mode .mar-status.pending{color:#92400e!important}
body.light .mar-status.free,body.light-mode .mar-status.free{color:#075985!important}
body.light .arc-type.free,body.light-mode .arc-type.free{color:#075985!important}
body.light .react-btn.liked,body.light-mode .react-btn.liked{color:#b91c1c!important}
body.light .react-btn.loved,body.light-mode .react-btn.loved{color:#9d174d!important}
body.light .react-btn.cared,body.light-mode .react-btn.cared{color:#92400e!important}
body.light .react-btn.disliked,body.light-mode .react-btn.disliked{color:#475569!important}
body.light #referral-disabled-banner,body.light-mode #referral-disabled-banner{color:#991b1b!important}
body.light #wd-panel-crypto > div[style*="color:#fbbf24"],body.light-mode #wd-panel-crypto > div[style*="color:#fbbf24"]{color:#92400e!important}
body.light #mv-story-comp > div,body.light-mode #mv-story-comp > div{background:#fff!important;color:#0f2318!important}
body.light #mv-story-comp #mv-sc-text,body.light-mode #mv-story-comp #mv-sc-text{background:#f3f4f6!important;color:#0f2318!important;-webkit-text-fill-color:#0f2318!important;border-color:rgba(15,35,24,.2)!important}
body.light #mv-story-comp #mv-sc-mus,body.light-mode #mv-story-comp #mv-sc-mus,body.light #mv-story-comp #mv-sc-x,body.light-mode #mv-story-comp #mv-sc-x{color:#0f2318!important}
body.light #mv-news-live [data-now],body.light-mode #mv-news-live [data-now]{color:#fff!important}
body.light #mv-sports [data-sport],body.light-mode #mv-sports [data-sport]{background:#fff!important;color:#000!important}
body.light #mv-sports [data-sport] option,body.light-mode #mv-sports [data-sport] option{background:#fff!important;color:#000!important}
body.light #mv-sports .mv-sports-link,body.light-mode #mv-sports .mv-sports-link{color:#000!important}
body:not(.light):not(.light-mode) #mv-sports .mv-sports-link{color:#fff!important}

/* Dynamic Settings modal */
.mv-settings-overlay{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
.mv-settings-overlay.open{display:flex}
.mv-settings-modal{width:min(100%,520px);max-height:min(90vh,720px);overflow:hidden;border:1px solid rgba(34,197,94,.25);border-radius:18px;background:var(--card,#101817);color:var(--white,#f5f5f5);box-shadow:0 24px 80px rgba(0,0,0,.5)}
.mv-settings-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border,rgba(255,255,255,.1))}
.mv-settings-head h2{margin:0;font-size:19px;font-family:'DM Serif Display',serif}
.mv-settings-close{border:0;background:none;color:var(--muted,#9ca3af);font-size:20px;cursor:pointer;padding:3px 6px}
.mv-settings-help{font-size:11px;line-height:1.55;color:var(--muted);margin:0 0 10px}
.mv-settings-select{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border,rgba(255,255,255,.1))}
.mv-settings-select span{display:flex;flex-direction:column;gap:3px}.mv-settings-select strong{font-size:12px}.mv-settings-select small{font-size:10px;line-height:1.4;color:var(--muted)}
.mv-settings-select select{min-width:125px;padding:7px 9px;border:1px solid var(--border,rgba(255,255,255,.15));border-radius:9px;background:var(--deep,#000);color:var(--white,#fff);font-size:11px}
.mv-startup-lock{position:fixed;inset:0;z-index:10070;display:flex;align-items:center;justify-content:center;padding:22px;background:var(--bg,#000);color:var(--white,#fff)}
.mv-startup-lock-card{width:min(100%,380px);padding:28px 22px;text-align:center;border:1px solid var(--border,rgba(255,255,255,.14));border-radius:20px;background:var(--card,#0d0d0d);box-shadow:0 24px 80px rgba(0,0,0,.5)}
.mv-startup-lock-icon{font-size:42px;margin-bottom:10px}.mv-startup-lock-card h2{font-size:20px;margin-bottom:8px}.mv-startup-lock-card p{color:var(--muted);font-size:12px;line-height:1.55;margin-bottom:18px}
.mv-settings-body{overflow-y:auto;padding:16px 20px 22px}
.mv-settings-section{padding:4px 0 16px;border-bottom:1px solid var(--border,rgba(255,255,255,.1))}.mv-settings-section+.mv-settings-section{padding-top:16px}.mv-settings-section:last-child{border-bottom:0;padding-bottom:0}
.mv-settings-section h3{margin:0 0 9px;color:var(--green3,#4ade80);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.mv-setting-row{display:flex;align-items:center;gap:12px;position:relative;padding:11px 0;cursor:pointer}.mv-setting-row>span:first-child{display:flex;flex:1;flex-direction:column;gap:3px}.mv-setting-row strong{font-size:13px;font-weight:600}.mv-setting-row small{color:var(--muted,#9ca3af);font-size:11px;line-height:1.35}.mv-setting-row input{position:absolute;opacity:0;pointer-events:none}.mv-switch{width:39px;height:22px;flex:0 0 39px;border-radius:99px;background:#374151;transition:.2s;position:relative}.mv-switch:after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#d1d5db;transition:.2s}.mv-setting-row input:checked~.mv-switch{background:var(--green2,#16a34a)}.mv-setting-row input:checked~.mv-switch:after{transform:translateX(17px);background:#fff}
.mv-settings-actions{display:flex;flex-wrap:wrap;gap:8px}.mv-settings-actions h3{width:100%;margin-bottom:2px}.mv-settings-btn{border:1px solid rgba(34,197,94,.35);border-radius:9px;background:rgba(34,197,94,.1);color:var(--white,#fff);cursor:pointer;padding:9px 11px;font:500 12px 'DM Sans',sans-serif}.mv-settings-btn:hover{background:rgba(34,197,94,.2)}.mv-settings-btn.danger{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:#fca5a5}

/* ═══════════════════════════════════════════════════════════════
   MINDVORA ORBITAL UI — visual redesign layer
   Presentation-only overrides: existing IDs, handlers, feature modules,
   media flows, navigation, and modal behavior remain unchanged.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#07111f;--card:#0d1a2b;--deep:#081321;
  --green:#9edb27;--green2:#c7f34a;--green3:#d8ff67;
  --cream:#f7fbff;--cream2:#eff6ff;--creamdim:rgba(216,255,103,.1);
  --white:#f4f8ff;--moon:#d6e4f6;--muted:#8294ad;
  --border:rgba(157,190,226,.16);--borderhi:rgba(216,255,103,.55);
  --cdim:rgba(78,227,255,.07);--shadow:0 18px 60px rgba(0,0,0,.34);--radius:18px;
  --mv-cyan:#4fe3ff;--mv-coral:#ff786b;--mv-violet:#8878ff;--mv-ink:#06101e;
}
body{background:var(--bg);background-image:radial-gradient(ellipse 70% 55% at 50% -15%,rgba(79,227,255,.13),transparent 65%),radial-gradient(ellipse 45% 45% at 100% 65%,rgba(136,120,255,.1),transparent 70%);color:var(--white)}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.14;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:36px 36px;mask-image:linear-gradient(to bottom,black,transparent 80%);z-index:-1}
.topbar{height:66px;padding:0 18px;background:rgba(8,19,33,.78);border-bottom:1px solid rgba(157,190,226,.14);backdrop-filter:blur(20px);box-shadow:0 8px 30px rgba(0,0,0,.16)}
.tb-logo{font-family:'DM Serif Display',serif;font-size:25px;letter-spacing:.02em;color:var(--green3);animation:none;text-shadow:0 0 22px rgba(216,255,103,.18)}
.tb-sw input{background:rgba(255,255,255,.055);border-color:rgba(157,190,226,.2);border-radius:14px;padding-top:9px;padding-bottom:9px}.tb-sw input:focus{border-color:var(--mv-cyan);box-shadow:0 0 0 3px rgba(79,227,255,.1)}
.tb-pill{background:rgba(216,255,103,.08);border-color:rgba(216,255,103,.22);color:var(--green3)}.tb-pill:hover{background:var(--green3);color:var(--mv-ink)}
.ib,.tb-out{background:rgba(255,255,255,.055);border-color:rgba(157,190,226,.18);border-radius:13px}.ib:hover,.tb-out:hover{background:rgba(79,227,255,.12);border-color:var(--mv-cyan);transform:translateY(-1px)}
.app-body{background:transparent}.sidebar{width:226px;background:rgba(9,21,36,.72);border-right:1px solid rgba(157,190,226,.13);padding:16px 12px;backdrop-filter:blur(18px)}
.user-card{padding:14px 8px 18px;border-bottom-color:rgba(157,190,226,.13)}.u-av,.c-av,.tb-av{background:linear-gradient(135deg,var(--mv-violet),var(--mv-cyan))!important;box-shadow:0 8px 24px rgba(79,227,255,.16)}.u-name{font-family:'DM Serif Display',serif;font-size:16px}.u-sv{color:var(--green3)}
.nav{gap:5px}.nav-item{padding:11px 13px;border:1px solid transparent;color:#8ea2bd;border-radius:13px}.nav-item:hover{background:rgba(79,227,255,.08);color:var(--white);border-color:rgba(79,227,255,.12);transform:translateX(2px)}.nav-item.active{background:linear-gradient(100deg,rgba(216,255,103,.18),rgba(79,227,255,.08));border-color:rgba(216,255,103,.32);color:var(--green3);box-shadow:inset 3px 0 var(--green3),0 8px 24px rgba(0,0,0,.12)}
.feed-col{padding:20px 18px 30px}.stories-bar{gap:12px;padding:4px 2px 18px}.s-add{width:58px;height:58px;background:linear-gradient(135deg,rgba(216,255,103,.18),rgba(79,227,255,.1));border-color:rgba(216,255,103,.55);color:var(--green3);box-shadow:0 0 24px rgba(216,255,103,.1)}.s-ring{width:58px;height:58px;padding:2px;background:linear-gradient(135deg,var(--green3),var(--mv-cyan),var(--mv-violet))}.s-av{background:var(--card);border-color:var(--bg)}.s-name{color:#9bb0c8}
.compose-box,.spark-card{background:linear-gradient(145deg,rgba(16,31,51,.95),rgba(10,22,37,.92));border-color:rgba(157,190,226,.16);border-radius:20px;box-shadow:0 12px 38px rgba(0,0,0,.14)}.compose-box{padding:17px}.compose-box:focus-within{border-color:rgba(79,227,255,.42);box-shadow:0 0 0 4px rgba(79,227,255,.06),0 18px 40px rgba(0,0,0,.2)}
.c-bot{border-top-color:rgba(157,190,226,.12)}.f-pill,.media-btn{background:rgba(255,255,255,.055);border-color:rgba(157,190,226,.16);color:#9db0c6}.f-pill:hover,.f-pill.active{background:var(--green3);color:var(--mv-ink);border-color:transparent}.btn-spark{background:linear-gradient(120deg,var(--green3),var(--mv-cyan));color:var(--mv-ink);box-shadow:0 8px 22px rgba(79,227,255,.16)}
.spark-card{padding:17px;margin-bottom:14px}.spark-card:hover{border-color:rgba(216,255,103,.42);transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,0,0,.22)}.sk-body{color:#e0ebf8}.sk-time,.sk-cat{color:#8095ae}.sk-av{box-shadow:0 0 0 3px rgba(216,255,103,.08),0 0 20px rgba(79,227,255,.16)}
.s-btn{border-radius:11px;color:#9db0c6}.s-btn:hover{background:rgba(79,227,255,.09);color:var(--mv-cyan)}
.bottom-nav{background:rgba(8,19,33,.86)!important;border-top-color:rgba(157,190,226,.16)!important;backdrop-filter:blur(20px)}.bottom-nav .nav-item.active{box-shadow:none;background:rgba(216,255,103,.1);border-color:rgba(216,255,103,.24)}
.modal-overlay{background:rgba(2,8,17,.74);backdrop-filter:blur(9px)}.modal-box{background:linear-gradient(145deg,#102139,#0a1728);border-color:rgba(157,190,226,.2);border-radius:22px;box-shadow:0 28px 100px rgba(0,0,0,.56)}.m-head{border-bottom-color:rgba(157,190,226,.14)}.m-title{font-family:'DM Serif Display',serif;letter-spacing:.02em}.m-close{border-radius:10px;background:rgba(255,255,255,.06)}
.drawer{background:linear-gradient(180deg,#0b1a2c,#071321)!important;border-right-color:rgba(157,190,226,.18)!important;box-shadow:20px 0 70px rgba(0,0,0,.46)}.drawer-header{border-bottom-color:rgba(157,190,226,.14)!important}.drawer-header-logo{font-family:'DM Serif Display',serif!important;color:var(--green3)}.drawer-section-title{color:var(--mv-cyan)!important;letter-spacing:.18em!important}.drawer-item{border-radius:12px!important;color:#aec0d4!important}.drawer-item:hover{background:rgba(79,227,255,.09)!important;color:var(--white)!important;transform:translateX(3px)}
#mv-sports,#mv-news-live,.live-hub,.sports-hub{border-radius:22px!important;border-color:rgba(157,190,226,.18)!important;background:linear-gradient(145deg,rgba(15,32,53,.96),rgba(8,19,33,.96))!important;box-shadow:var(--shadow)}
.mv-sports-player{margin-top:10px;border:1px solid rgba(79,227,255,.24);border-radius:12px;overflow:hidden;background:#030811}.mv-sports-player-label{padding:8px 10px;color:var(--mv-cyan);font-size:11px;font-weight:700}.mv-sports-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.mv-sports-player-note{margin-top:10px;padding:10px;border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted);font-size:11px;line-height:1.5}
.mv-settings-modal{background:linear-gradient(145deg,#102139,#081525);border-color:rgba(216,255,103,.3);border-radius:22px}.mv-settings-section h3{color:var(--mv-cyan)}.mv-settings-btn{border-color:rgba(216,255,103,.34);background:rgba(216,255,103,.1);color:var(--green3)}.mv-settings-btn:hover{background:var(--green3);color:var(--mv-ink)}
.bug-watch-card{background:linear-gradient(145deg,rgba(20,39,63,.96),rgba(10,22,38,.96));border:1px solid rgba(157,190,226,.18);border-radius:17px;padding:15px;margin-bottom:12px;box-shadow:0 12px 32px rgba(0,0,0,.16)}.bug-watch-card-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:9px}.bug-watch-card-head strong{color:var(--white);font-size:13px}.bug-watch-card-head span{color:var(--mv-coral);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.bug-watch-card-body{color:#b4c6da;font-size:11px;line-height:1.7}.bug-watch-actions{display:flex;gap:8px;margin-top:12px}.bug-watch-empty{padding:30px;text-align:center;color:var(--muted)}.bug-watch-error{padding:14px;color:#ffaaa2}.bug-watch-accepted{color:var(--green3);font-size:11px}.bug-watch-declined{color:var(--muted);font-size:11px}
body.light-mode{--bg:#f2f6fb;--card:#ffffff;--deep:#e8eef6;--green:#6b8f13;--green2:#9bc51e;--green3:#507800;--cream:#0b1728;--cream2:#10243b;--white:#0c1b2d;--moon:#24405d;--muted:#60758e;--border:rgba(19,54,86,.14);--borderhi:rgba(80,120,0,.42);--cdim:rgba(79,140,178,.08);--mv-ink:#fff}
body.light-mode{background-image:radial-gradient(ellipse 70% 55% at 50% -15%,rgba(79,227,255,.16),transparent 65%),linear-gradient(135deg,#f6f9fc,#eaf1f7)}body.light-mode::before{opacity:.22;background-image:linear-gradient(rgba(19,54,86,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(19,54,86,.045) 1px,transparent 1px)}body.light-mode .topbar,body.light-mode .sidebar{background:rgba(255,255,255,.78)}body.light-mode .spark-card,body.light-mode .compose-box{background:rgba(255,255,255,.86);box-shadow:0 14px 34px rgba(28,58,88,.09)}body.light-mode .modal-box,body.light-mode .mv-settings-modal{background:#fff}body.light-mode .drawer{background:linear-gradient(180deg,#fff,#eef5fa)!important}body.light-mode .nav-item.active{color:#315400;background:rgba(155,197,30,.15)}body.light-mode .f-pill,body.light-mode .media-btn{color:#35516e}body.light-mode .bug-watch-card{background:#fff}.bug-watch-card b{color:var(--green3)}
@media(max-width:767px){.topbar{height:58px}.feed-col{padding:12px 8px 78px}.spark-card{border-radius:17px}.sidebar{display:none}.compose-box{border-radius:17px}.tb-logo{font-size:23px}.tb-sw{max-width:none}.modal-box{border-radius:22px 22px 0 0!important}}

/* Shared Mindvora wordmark: login and authenticated app use one identity. */
@keyframes mv-shared-wordmark{
  0%,100%{color:#d8ff67;text-shadow:0 0 22px rgba(216,255,103,.22)}
  25%{color:#4fe3ff;text-shadow:0 0 22px rgba(79,227,255,.22)}
  50%{color:#ff786b;text-shadow:0 0 22px rgba(255,120,107,.2)}
  75%{color:#8878ff;text-shadow:0 0 22px rgba(136,120,255,.22)}
}
#auth-screen{background:radial-gradient(ellipse 75% 55% at 50% -10%,rgba(79,227,255,.16),transparent 64%),radial-gradient(ellipse 55% 50% at 100% 100%,rgba(136,120,255,.12),transparent 70%),var(--deep)}
.auth-box{background:linear-gradient(145deg,rgba(16,33,57,.96),rgba(8,21,37,.96));border-color:rgba(157,190,226,.2);box-shadow:0 28px 100px rgba(0,0,0,.52)}
.auth-logo,.tb-logo{font-family:'Great Vibes',cursive!important;animation:mv-shared-wordmark 12s ease-in-out infinite!important;color:#d8ff67}
.tb-logo{font-size:32px!important;line-height:1.1}
body.light-mode #auth-screen{background:radial-gradient(ellipse 75% 55% at 50% -10%,rgba(79,227,255,.18),transparent 64%),linear-gradient(135deg,#f6f9fc,#eaf1f7)}
body.light-mode .auth-box{background:rgba(255,255,255,.9);border-color:rgba(19,54,86,.16);box-shadow:0 24px 70px rgba(28,58,88,.14)}
/* Keep authentication chrome on the app's navy palette and share one animated wordmark. */
#auth-screen{background:var(--bg)!important;background-image:radial-gradient(ellipse 70% 55% at 50% -15%,rgba(79,227,255,.13),transparent 65%),radial-gradient(ellipse 45% 45% at 100% 65%,rgba(136,120,255,.1),transparent 70%)!important;color:var(--white)}
#auth-screen::before{background:radial-gradient(ellipse 70% 55% at 50% -15%,rgba(79,227,255,.13),transparent 65%),radial-gradient(ellipse 45% 45% at 100% 65%,rgba(136,120,255,.1),transparent 70%)!important}
#auth-screen .auth-showcase,#auth-screen .auth-showcase-right,#auth-screen .auth-right{background:transparent!important}
#auth-screen .auth-right{border-left-color:var(--border)!important;border-right-color:var(--border)!important}
.auth-logo-sm>span,.showcase-brand>span:first-child,.tb-logo,.drawer-header-logo{font-family:'Great Vibes',cursive!important;animation:mv-shared-wordmark 12s ease-in-out infinite!important;color:#d8ff67}
.drawer-header-logo{font-size:28px!important;line-height:1.2}
#auth-screen .btn-social-option{margin-top:8px}


/* Final accessibility and App Lock layer: presentation only; feature flows stay unchanged. */
:root{--muted:#a8b7ca}
body.light,body.light-mode{
  --bg:#fbf4eb;--card:#fffaf3;--deep:#f2e5d6;
  --green:#874a30;--green2:#ae6038;--green3:#874a30;
  --cream:#211915;--cream2:#382a21;--creamdim:rgba(135,74,48,.09);
  --white:#211915;--moon:#40342d;--muted:#62564d;
  --border:rgba(76,52,36,.18);--borderhi:rgba(135,74,48,.48);--cdim:rgba(135,74,48,.09);
  --mv-ink:#211915;--mv-cyan:#0e6678;--mv-coral:#9a3f29;--mv-violet:#574276;
  color:var(--white)!important;background-color:var(--bg)!important;
  background-image:linear-gradient(135deg,#fbf4eb,#f2e4d4)!important
}
body.light::before,body.light-mode::before{opacity:.2;background-image:linear-gradient(rgba(76,52,36,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(76,52,36,.045) 1px,transparent 1px)}
body.light .topbar,body.light-mode .topbar,body.light .sidebar,body.light-mode .sidebar{background:rgba(255,250,243,.94)!important;color:var(--white)!important;border-color:var(--border)!important}
body.light .user-card,body.light-mode .user-card,body.light .compose-box,body.light-mode .compose-box,body.light .spark-card,body.light-mode .spark-card{background:var(--card)!important;color:var(--white)!important;border-color:var(--border)!important}
body.light .modal-box,body.light-mode .modal-box,body.light .mv-settings-modal,body.light-mode .mv-settings-modal,body.light .dm-wrap,body.light-mode .dm-wrap{background:var(--card)!important;color:var(--white)!important;border-color:var(--border)!important}
body.light .drawer,body.light-mode .drawer{background:linear-gradient(180deg,#fffaf3,#f2e5d6)!important;color:var(--white)!important}
body.light .nav-item,body.light-mode .nav-item,body.light .drawer-item,body.light-mode .drawer-item,body.light .nav-item.active,body.light-mode .nav-item.active{color:var(--white)!important}
body.light .nav-item.active,body.light-mode .nav-item.active{background:rgba(135,74,48,.13)!important;border-color:rgba(135,74,48,.25)!important;box-shadow:inset 3px 0 var(--green3)!important}
body.light .drawer-section-title,body.light-mode .drawer-section-title{color:#77452f!important}
body.light .tb-pill,body.light-mode .tb-pill,body.light .f-pill.active,body.light-mode .f-pill.active,body.light .btn-spark,body.light-mode .btn-spark{background:linear-gradient(120deg,#a45635,#bd7146)!important;border-color:transparent!important;color:#fff!important}
body.light .f-pill,body.light-mode .f-pill,body.light .media-btn,body.light-mode .media-btn,body.light .s-btn,body.light-mode .s-btn{color:#44372f!important}
body.light input,body.light textarea,body.light select,body.light-mode input,body.light-mode textarea,body.light-mode select{color:#211915}
body.light input::placeholder,body.light textarea::placeholder,body.light-mode input::placeholder,body.light-mode textarea::placeholder{color:#71645a;opacity:1}
body.light #auth-screen,body.light-mode #auth-screen{background:linear-gradient(135deg,#fbf4eb,#f0e0ce)!important;color:var(--white)!important}
body.light #auth-screen::before,body.light-mode #auth-screen::before{background:radial-gradient(ellipse 70% 55% at 50% -15%,rgba(177,106,65,.15),transparent 65%),radial-gradient(ellipse 45% 45% at 100% 65%,rgba(130,86,111,.1),transparent 70%)!important}
body.light .auth-box,body.light-mode .auth-box{background:rgba(255,250,243,.96)!important;border-color:rgba(76,52,36,.2)!important;box-shadow:0 24px 70px rgba(78,51,32,.15)!important;color:var(--white)!important}
body.light .auth-box :is(h1,h2,h3,p,label,small),body.light-mode .auth-box :is(h1,h2,h3,p,label,small){color:var(--white)}

/* Required new-account profile setup */
.mv-profile-setup-overlay{position:fixed;inset:0;z-index:100200;display:none;place-items:center;overflow-y:auto;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));background:rgba(3,12,20,.82);backdrop-filter:blur(12px)}
.mv-profile-setup-overlay.open{display:grid}
.mv-profile-setup-card{width:min(100%,460px);max-height:calc(100dvh - 36px);overflow-y:auto;padding:28px;border:1px solid rgba(79,227,255,.28);border-radius:22px;background:linear-gradient(155deg,#102139,#0b1826);color:#f7fbff;box-shadow:0 24px 80px rgba(0,0,0,.48)}
.mv-profile-setup-brand{margin-bottom:12px;color:#55e8f3;font:700 27px 'Great Vibes',cursive}
.mv-profile-setup-card h2{margin:0 0 8px;font-size:23px;color:#f7fbff}
.mv-profile-setup-card p{margin:0 0 20px;color:#bed0df;font-size:14px;line-height:1.5}
.mv-profile-setup-card label{display:block;margin:14px 0 6px;color:#eaf3fa;font-size:13px;font-weight:700}
.mv-profile-setup-card input{width:100%;min-height:46px;padding:10px 12px;border:1px solid rgba(153,187,212,.32);border-radius:11px;outline:none;background:rgba(4,16,28,.62);color:#fff;font:inherit}
.mv-profile-setup-card input:focus{border-color:#55e8f3;box-shadow:0 0 0 3px rgba(79,227,255,.14)}
.mv-profile-handle-field{display:flex;align-items:center;border:1px solid rgba(153,187,212,.32);border-radius:11px;background:rgba(4,16,28,.62)}
.mv-profile-handle-field span{padding-left:13px;color:#84a3b9}
.mv-profile-handle-field input{border:0;background:transparent;box-shadow:none!important}
.mv-profile-setup-error{min-height:20px;margin:8px 0;color:#ffaaa5;font-size:13px}
.mv-profile-setup-card button{width:100%;min-height:48px;border:0;border-radius:12px;background:linear-gradient(100deg,#43d9e8,#23b7c9);color:#06202a;font:700 15px 'DM Sans',sans-serif;cursor:pointer}
.mv-profile-setup-card button:disabled{opacity:.62;cursor:wait}
body.light .mv-profile-setup-overlay,body.light-mode .mv-profile-setup-overlay{background:rgba(49,36,27,.45)}
body.light .mv-profile-setup-card,body.light-mode .mv-profile-setup-card{background:#fffaf3;border-color:rgba(117,69,43,.25);color:#30241e}
body.light .mv-profile-setup-card h2,body.light-mode .mv-profile-setup-card h2{color:#30241e}
body.light .mv-profile-setup-card p,body.light-mode .mv-profile-setup-card p{color:#655349}
body.light .mv-profile-setup-card label,body.light-mode .mv-profile-setup-card label{color:#49372d}
body.light .mv-profile-setup-card input,body.light-mode .mv-profile-setup-card input,body.light .mv-profile-setup-card .mv-profile-handle-field,body.light-mode .mv-profile-setup-card .mv-profile-handle-field{background:#fff;color:#30241e}
body.light .mv-profile-setup-brand,body.light-mode .mv-profile-setup-brand{color:#167b87}
@media(max-width:480px){.mv-profile-setup-card{padding:22px 18px;border-radius:18px}}

/* Light-theme Mindvora wordmarks use saturated, readable jewel tones. */
@keyframes mv-shared-wordmark-light{
  0%,100%{color:#874a30;text-shadow:0 0 12px rgba(135,74,48,.12)}
  25%{color:#0e6678;text-shadow:0 0 12px rgba(14,102,120,.12)}
  50%{color:#9a3152;text-shadow:0 0 12px rgba(154,49,82,.12)}
  75%{color:#574276;text-shadow:0 0 12px rgba(87,66,118,.12)}
}
body.light .auth-logo,body.light-mode .auth-logo,body.light .auth-logo-sm>span,body.light-mode .auth-logo-sm>span,body.light .showcase-brand>span:first-child,body.light-mode .showcase-brand>span:first-child,body.light .tb-logo,body.light-mode .tb-logo,body.light .drawer-header-logo,body.light-mode .drawer-header-logo{animation:mv-shared-wordmark-light 12s ease-in-out infinite!important;color:#874a30}

/* High-contrast, readable content across Games and direct Messages. */
#modal-games .game-card{background:var(--card)!important;color:var(--white)!important;border-color:var(--borderhi)!important}
#modal-games .game-card div[style*="color:var(--muted)"],#modal-games div[style*="color:var(--muted)"]{color:var(--muted)!important;font-size:12px!important;line-height:1.5}
#game-container{background:var(--bg)!important;color:var(--white)!important}
#game-container #game-content{color:var(--white)}
#game-container #tg-passage{color:var(--moon)!important;background:var(--card)!important;font-size:14px!important;line-height:1.75!important}
#game-container #tg-inp{color:var(--white)!important;background:var(--card)!important;border-color:var(--borderhi)!important}
#game-container [style*="font-size:10px"],#game-container [style*="font-size:11px"]{font-size:12px!important;line-height:1.5}
.dm-nm{color:var(--white)!important}.dm-pv,.msg-t,.dm-es{color:var(--muted)!important}
.msg:not(.mine) .msg-bub{background:var(--deep)!important;color:var(--moon)!important}
.msg.mine .msg-bub,.aria-msg.user .aria-bub{background:linear-gradient(135deg,#0e6678,#155e75)!important;color:#fff!important}
.msg.mine .msg-t{color:#f3f4f6!important}
body.light .msg.mine .msg-bub,body.light-mode .msg.mine .msg-bub,body.light .aria-msg.user .aria-bub,body.light-mode .aria-msg.user .aria-bub{background:linear-gradient(135deg,#874a30,#a95936)!important;color:#fff!important}
body.light .msg.mine .msg-t,body.light-mode .msg.mine .msg-t{color:#fff!important}

/* Live News, Sports and Anime: remove dimmed metadata and use theme-aware surfaces. */
#mv-news-live,#mv-sports,#mv-news-live [data-now],#mv-sports .sports-hub,#mv-anime,#mv-anime-detail{background-color:var(--bg)!important;color:var(--white)!important}
#mv-news-live [data-now]{background:var(--deep)!important;color:var(--white)!important;border-top:1px solid var(--border)}
#mv-news-live [data-now] a{color:inherit!important;opacity:1!important}
#mv-news-live [data-body] [style*="opacity"],#mv-sports [data-body] [style*="opacity"],#mv-anime [data-body] [style*="opacity"],#mv-anime-detail [data-body] [style*="opacity"]{opacity:1!important;color:var(--muted)!important}
#mv-news-live [data-body] button,#mv-sports [data-body] > div,#mv-anime [data-body] button{color:var(--white)!important;border-color:var(--border)!important}
#mv-news-live select,#mv-sports select,#mv-anime input{background:var(--card)!important;color:var(--white)!important;border-color:var(--borderhi)!important}
#mv-news-live option,#mv-sports option{background:var(--card)!important;color:var(--white)!important}
#mv-sports .mv-sports-link{color:var(--mv-cyan)!important;font-weight:600}
#mv-anime [data-body] a,#mv-anime-detail [data-body] a{background:#0e6678!important;color:#fff!important}
body.light #mv-news-live [style*="var(--green"],body.light-mode #mv-news-live [style*="var(--green"],body.light #mv-sports [style*="var(--green"],body.light-mode #mv-sports [style*="var(--green"],body.light #mv-anime [style*="var(--green"],body.light-mode #mv-anime [style*="var(--green"]{background:#874a30!important;color:#fff!important}
body.light #mv-sports .mv-sports-link,body.light-mode #mv-sports .mv-sports-link{color:#713e2a!important}
body.light #mv-anime [data-body] a,body.light-mode #mv-anime [data-body] a,body.light #mv-anime-detail [data-body] a,body.light-mode #mv-anime-detail [data-body] a{background:#874a30!important;color:#fff!important}

/* App Lock is an opaque, keyboard-inaccessible-to-the-app gate, not a chat lock. */
body.mv-app-locked #app-screen{visibility:hidden!important;pointer-events:none!important}
.mv-startup-lock{position:fixed!important;inset:0!important;z-index:2147483647!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:22px!important;overflow:auto!important;background:var(--bg)!important;color:var(--white)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);touch-action:none}
.mv-startup-lock-card{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:min(100%,390px);padding:30px 24px;text-align:left;border:1px solid var(--borderhi);border-radius:22px;background:var(--card);color:var(--white);box-shadow:0 24px 80px rgba(0,0,0,.32)}
.mv-startup-lock-icon{text-align:center;font-size:42px;margin-bottom:2px}.mv-startup-lock-card h2{text-align:center;font-size:22px;margin:0 0 2px;color:var(--white)}
.mv-startup-lock-card p{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 4px;text-align:center}
.mv-lock-label{font-size:12px;font-weight:700;color:var(--white)}
.mv-startup-lock-card input[data-lock-pin]{width:100%;padding:12px 13px;border:1px solid var(--borderhi);border-radius:10px;background:var(--deep);color:var(--white);font-size:16px;outline:none}
.mv-startup-lock-card input[data-lock-pin]:focus{border-color:var(--mv-cyan);box-shadow:0 0 0 3px rgba(79,227,255,.2)}
#mv-lock-error{min-height:18px;color:#c2413b;font-size:12px;line-height:1.4}
.mv-startup-lock-card .mv-settings-btn{width:100%;min-height:42px;border-color:var(--borderhi);background:var(--mv-cyan);color:#07111f;font-size:14px}
.mv-startup-lock-card .mv-settings-btn:hover{filter:brightness(1.08)}
.mv-lock-signout{align-self:center;margin-top:3px;border:0;background:transparent;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
body.light .mv-startup-lock-card .mv-settings-btn,body.light-mode .mv-startup-lock-card .mv-settings-btn{background:#874a30;color:#fff}

/* Override earlier dark panel gradients when the warm light theme is active. */
body.light #mv-news-live,body.light-mode #mv-news-live,body.light #mv-sports,body.light-mode #mv-sports,body.light #mv-anime,body.light-mode #mv-anime,body.light #mv-anime-detail,body.light-mode #mv-anime-detail,body.light .live-hub,body.light-mode .live-hub,body.light .sports-hub,body.light-mode .sports-hub{background:linear-gradient(145deg,#fffaf3,#f2e5d6)!important;color:#211915!important;border-color:rgba(76,52,36,.18)!important}
body.light #mv-news-live [data-body] button,body.light-mode #mv-news-live [data-body] button,body.light #mv-sports [data-body] > div,body.light-mode #mv-sports [data-body] > div,body.light #mv-anime [data-body] button,body.light-mode #mv-anime [data-body] button{background-color:rgba(255,250,243,.9)!important;color:#211915!important}
body.light #mv-news-live [data-now],body.light-mode #mv-news-live [data-now]{background:#f2e5d6!important;color:#211915!important}

/* Warm the remaining legacy form surfaces and lift small supporting copy. */
body.light .fi,body.light-mode .fi,body.light .m-input,body.light-mode .m-input,body.light .chat-inp,body.light-mode .chat-inp,body.light .dm-search,body.light-mode .dm-search{background:var(--card)!important;color:var(--white)!important;border-color:var(--borderhi)!important}
body.light #mv-story-comp > div,body.light-mode #mv-story-comp > div{background:var(--card)!important;color:var(--white)!important}
body.light #mv-story-comp #mv-sc-text,body.light-mode #mv-story-comp #mv-sc-text{background:var(--deep)!important;color:var(--white)!important;-webkit-text-fill-color:var(--white)!important;border-color:var(--border)!important}
body.light .sk-body,body.light-mode .sk-body{color:var(--white)!important}
body.light .sk-time,body.light-mode .sk-time,body.light .sk-cat,body.light-mode .sk-cat,body.light .s-name,body.light-mode .s-name{color:var(--muted)!important;font-size:11px}
body.light .bug-watch-card,body.light-mode .bug-watch-card{background:var(--card)!important;color:var(--white)!important;border-color:var(--border)!important}
body.light .bug-watch-card-head strong,body.light-mode .bug-watch-card-head strong,body.light .bug-watch-card-body,body.light-mode .bug-watch-card-body{color:var(--white)!important}
body.light .bug-watch-card-head span,body.light-mode .bug-watch-card-head span{color:#8f3428!important}
body.light .bug-watch-accepted,body.light-mode .bug-watch-accepted{color:#6f442e!important}
.dm-pv{font-size:12px}.msg-t{font-size:10px}
.chat-send{background:linear-gradient(135deg,#0e6678,#155e75)!important;color:#fff!important}
body.light .chat-send,body.light-mode .chat-send{background:linear-gradient(135deg,#874a30,#a95936)!important;color:#fff!important}

body.light .mv-settings-btn,body.light-mode .mv-settings-btn{border-color:rgba(135,74,48,.3)!important;background:rgba(135,74,48,.09)!important;color:#713e2a!important}
body.light .mv-settings-btn:hover,body.light-mode .mv-settings-btn:hover{background:#874a30!important;color:#fff!important}
body.light .mv-settings-btn.danger,body.light-mode .mv-settings-btn.danger{border-color:rgba(159,18,57,.32)!important;background:rgba(159,18,57,.08)!important;color:#9f1239!important}

/* Authentication screen: higher-specificity light-theme overrides for the existing form and showcase panels. */
body.light #auth-screen,body.light-mode #auth-screen{--bg:#fbf4eb;--card:#fffaf3;--deep:#f2e5d6;--green:#874a30;--green2:#a95936;--green3:#713e2a;--cream:#211915;--cream2:#382a21;--white:#211915;--moon:#40342d;--muted:#62564d;--border:rgba(76,52,36,.18);--borderhi:rgba(135,74,48,.48);--cdim:rgba(135,74,48,.09);background:linear-gradient(135deg,#fbf4eb,#f2e5d6)!important;color:#211915!important}
body.light #auth-screen .auth-right,body.light-mode #auth-screen .auth-right,body.light #auth-screen .auth-showcase,body.light-mode #auth-screen .auth-showcase,body.light #auth-screen .auth-showcase-right,body.light-mode #auth-screen .auth-showcase-right{background:transparent!important;color:#211915!important}
body.light #auth-screen .auth-box,body.light-mode #auth-screen .auth-box{background:rgba(255,250,243,.97)!important;border:1px solid rgba(76,52,36,.2)!important;box-shadow:0 24px 70px rgba(78,51,32,.15)!important;color:#211915!important}
body.light #auth-screen .auth-tabs,body.light-mode #auth-screen .auth-tabs{background:#f2e5d6!important;border:1px solid rgba(76,52,36,.12)!important}
body.light #auth-screen .auth-tab,body.light-mode #auth-screen .auth-tab{color:#62564d!important}
body.light #auth-screen .auth-tab.active,body.light-mode #auth-screen .auth-tab.active{background:linear-gradient(135deg,#874a30,#a95936)!important;color:#fff!important}
body.light #auth-screen .fg label,body.light-mode #auth-screen .fg label{color:#62564d!important}
body.light #auth-screen .fi,body.light-mode #auth-screen .fi{background:#fffaf3!important;color:#211915!important;-webkit-text-fill-color:#211915!important;border-color:rgba(135,74,48,.3)!important}
body.light #auth-screen .fi::placeholder,body.light-mode #auth-screen .fi::placeholder{color:#71645a!important;-webkit-text-fill-color:#71645a!important}
body.light #auth-screen .eye-btn,body.light-mode #auth-screen .eye-btn{color:#62564d!important}
body.light #auth-screen .btn-auth,body.light-mode #auth-screen .btn-auth{background:linear-gradient(135deg,#874a30,#a95936)!important;color:#fff!important}
body.light #auth-screen .btn-google,body.light-mode #auth-screen .btn-google{background:#fffaf3!important;border-color:rgba(76,52,36,.2)!important;color:#211915!important}
body.light #auth-screen .auth-box button[onclick="doForgotPassword()"],body.light-mode #auth-screen .auth-box button[onclick="doForgotPassword()"]{color:#713e2a!important}
body.light #auth-screen .auth-panel div[style*="height:1px"],body.light-mode #auth-screen .auth-panel div[style*="height:1px"]{background:rgba(76,52,36,.2)!important}
body.light #auth-screen .auth-panel span[style*="font-size:11px"],body.light-mode #auth-screen .auth-panel span[style*="font-size:11px"]{color:#62564d!important}
body.light #auth-screen .auth-right>div[style*="font-size:11px"],body.light-mode #auth-screen .auth-right>div[style*="font-size:11px"]{color:#62564d!important}
body.light #auth-screen .slide-bg,body.light-mode #auth-screen .slide-bg{background:linear-gradient(135deg,#fbf4eb,#f2e5d6)!important}
body.light #auth-screen .slide-bubble,body.light-mode #auth-screen .slide-bubble{background:radial-gradient(circle,rgba(135,74,48,.13),transparent)!important;opacity:.5!important}
body.light #auth-screen .float-card,body.light-mode #auth-screen .float-card,body.light #auth-screen .avatar-grid,body.light-mode #auth-screen .avatar-grid{background:rgba(255,250,243,.92)!important;border-color:rgba(76,52,36,.18)!important;box-shadow:0 10px 30px rgba(78,51,32,.12)}
body.light #auth-screen .fc-name,body.light-mode #auth-screen .fc-name,body.light #auth-screen .fc-text,body.light-mode #auth-screen .fc-text,body.light #auth-screen .fc-heart,body.light-mode #auth-screen .fc-heart,body.light #auth-screen .slide-title,body.light-mode #auth-screen .slide-title,body.light #auth-screen .slide-desc,body.light-mode #auth-screen .slide-desc{color:#211915!important}
body.light #auth-screen .slide-tag,body.light-mode #auth-screen .slide-tag{color:#713e2a!important}
body.light #auth-screen .stat-pill,body.light-mode #auth-screen .stat-pill{background:rgba(135,74,48,.09)!important;border-color:rgba(135,74,48,.25)!important;color:#713e2a!important}
body.light #auth-screen .dot,body.light-mode #auth-screen .dot{background:rgba(135,74,48,.22)!important;border-color:rgba(135,74,48,.35)!important}
body.light #auth-screen .dot.active,body.light-mode #auth-screen .dot.active{background:#874a30!important;border-color:#874a30!important}
body.light #auth-screen .showcase-brand span:last-child,body.light-mode #auth-screen .showcase-brand span:last-child{color:#62564d!important}
body.light #auth-screen .a-err,body.light-mode #auth-screen .a-err{color:#9f1239!important}

/* Warm light treatment for the original showcase overlay and its legacy feature cards. */
body.light #auth-screen .auth-showcase::before,body.light-mode #auth-screen .auth-showcase::before,body.light #auth-screen .auth-showcase::after,body.light-mode #auth-screen .auth-showcase::after,body.light #auth-screen .auth-showcase-right::before,body.light-mode #auth-screen .auth-showcase-right::before,body.light #auth-screen .auth-showcase-right::after,body.light-mode #auth-screen .auth-showcase-right::after{background:radial-gradient(circle,rgba(135,74,48,.08),transparent 70%)!important;opacity:.45!important}
body.light #auth-screen .slide-text,body.light-mode #auth-screen .slide-text{background:linear-gradient(to top,rgba(255,250,243,.97) 0%,rgba(255,250,243,.8) 58%,transparent 100%)!important}
body.light #auth-screen .earn-showcase,body.light-mode #auth-screen .earn-showcase,body.light #auth-screen .post-showcase,body.light-mode #auth-screen .post-showcase,body.light #auth-screen .feat-pill,body.light-mode #auth-screen .feat-pill{background:rgba(255,250,243,.95)!important;border-color:rgba(135,74,48,.24)!important;color:#211915!important;box-shadow:0 10px 30px rgba(78,51,32,.12)!important}
body.light #auth-screen .ps-item,body.light-mode #auth-screen .ps-item{background:rgba(255,250,243,.9)!important;border-color:rgba(76,52,36,.15)!important;color:#211915!important}
body.light #auth-screen .ps-active,body.light-mode #auth-screen .ps-active{background:rgba(135,74,48,.09)!important;border-color:rgba(135,74,48,.28)!important}
body.light #auth-screen .es-header,body.light-mode #auth-screen .es-header,body.light #auth-screen .es-amount,body.light-mode #auth-screen .es-amount,body.light #auth-screen .ps-label,body.light-mode #auth-screen .ps-label{color:#211915!important}
body.light #auth-screen .es-sub,body.light-mode #auth-screen .es-sub,body.light #auth-screen .ps-sub,body.light-mode #auth-screen .ps-sub,body.light #auth-screen .ps-views,body.light-mode #auth-screen .ps-views{color:#62564d!important}
body.light #auth-screen .es-bar,body.light-mode #auth-screen .es-bar{background:rgba(135,74,48,.24)!important;box-shadow:none!important}
body.light #auth-screen .es-bar:last-child,body.light-mode #auth-screen .es-bar:last-child{background:#874a30!important;box-shadow:none!important}
body.light #auth-screen .feat-pill,body.light-mode #auth-screen .feat-pill{background:rgba(255,250,243,.96)!important;color:#713e2a!important}
body.light #auth-screen .slide-tag,body.light-mode #auth-screen .slide-tag{background:rgba(135,74,48,.09)!important;border-color:rgba(135,74,48,.24)!important;color:#713e2a!important}
body.light #auth-screen .slide-title em,body.light-mode #auth-screen .slide-title em{background:linear-gradient(135deg,#874a30,#0e6678)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:#713e2a!important;text-shadow:none!important}
body.light #auth-screen .auth-logo-sm span,body.light-mode #auth-screen .auth-logo-sm span{font-family:'Great Vibes',cursive!important;animation:mv-shared-wordmark-light 12s ease-in-out infinite!important;color:#874a30;filter:none!important}
body.light #auth-screen .showcase-brand span:first-child,body.light-mode #auth-screen .showcase-brand span:first-child{font-family:'Great Vibes',cursive!important;animation:mv-shared-wordmark-light 12s ease-in-out infinite!important;color:#874a30;text-shadow:none!important}
body.light #auth-screen .showcase-brand span:last-child,body.light-mode #auth-screen .showcase-brand span:last-child{color:#62564d!important}

/* Cyan-navy auth panels: give both animated side lanes the same surface as the sign-in column. */
body:not(.light):not(.light-mode) #auth-screen .auth-showcase,body:not(.light):not(.light-mode) #auth-screen .auth-showcase-right,body:not(.light):not(.light-mode) #auth-screen .auth-right,body:not(.light):not(.light-mode) #auth-screen .slide-bg{background:radial-gradient(ellipse 80% 60% at 50% 28%,rgba(79,227,255,.1),transparent 72%),var(--bg)!important}
body:not(.light):not(.light-mode) #auth-screen .auth-showcase::before,body:not(.light):not(.light-mode) #auth-screen .auth-showcase::after,body:not(.light):not(.light-mode) #auth-screen .auth-showcase-right::before,body:not(.light):not(.light-mode) #auth-screen .auth-showcase-right::after{background:radial-gradient(circle,rgba(79,227,255,.14) 0%,rgba(79,227,255,.05) 40%,transparent 70%)!important}
body:not(.light):not(.light-mode) #auth-screen .slide-bubble{background:radial-gradient(circle,rgba(79,227,255,.15),transparent)!important}
body:not(.light):not(.light-mode) #auth-screen .slide-text{background:linear-gradient(to top,rgba(7,17,31,.98) 0%,rgba(7,17,31,.72) 52%,transparent 100%)!important}
/* Keep the same animated multi-colour wordmark on login, the top bar, and the slide-out menu. */
.auth-logo,.auth-logo-sm>span,.showcase-brand>span:first-child,.tb-logo,.drawer-header-logo{font-family:'Great Vibes',cursive!important;animation:mv-shared-wordmark 12s ease-in-out infinite!important}
body.light .auth-logo,body.light-mode .auth-logo,body.light .auth-logo-sm>span,body.light-mode .auth-logo-sm>span,body.light .showcase-brand>span:first-child,body.light-mode .showcase-brand>span:first-child,body.light .tb-logo,body.light-mode .tb-logo,body.light .drawer-header-logo,body.light-mode .drawer-header-logo{animation:mv-shared-wordmark-light 12s ease-in-out infinite!important}

/* Warm-brown story-add ring in light mode; preserve the existing dark-mode accent. */
body.light .s-add,body.light-mode .s-add{border:2px dashed rgba(135,74,48,.55)!important;background:linear-gradient(135deg,rgba(135,74,48,.12),rgba(169,89,54,.06))!important;color:#874a30!important;box-shadow:0 0 22px rgba(135,74,48,.12)!important}
body.light .s-add:hover,body.light-mode .s-add:hover{border-color:#874a30!important;background:rgba(135,74,48,.14)!important}


/* Phone sign-in and SMS verification controls. */
.phone-auth-box{margin:12px 0 4px;padding:14px;border:1px solid rgba(79,227,255,.22);border-radius:14px;background:rgba(7,17,31,.72);color:var(--white)}
.phone-auth-box .fg{margin-bottom:12px}
.phone-auth-box .phone-auth-note{font-size:11px;line-height:1.55;color:var(--muted);margin:0 0 12px}
.phone-auth-box #phone-login-recaptcha,.phone-auth-box #phone-register-recaptcha{min-height:0;margin:8px 0;max-width:100%;overflow:hidden}
.phone-auth-box #phone-login-recaptcha iframe,.phone-auth-box #phone-register-recaptcha iframe{max-width:100%}
.phone-auth-box .phone-send-btn,.phone-auth-box .phone-code-wrap .btn-auth{width:100%;margin-top:8px}
.phone-auth-box .phone-code-wrap{margin-top:12px}
.phone-auth-box .a-err{min-height:0;margin-top:8px}
body.light .phone-auth-box,body.light-mode .phone-auth-box{background:#fffaf3!important;border-color:rgba(135,74,48,.24)!important;color:#211915!important}
body.light .phone-auth-box .phone-auth-note,body.light-mode .phone-auth-box .phone-auth-note{color:#62564d!important}
body.light .phone-auth-box .fi,body.light-mode .phone-auth-box .fi{background:#fff!important;border-color:rgba(76,52,36,.24)!important;color:#211915!important}