/* =====================================================================
   redesign.css — premium "wow" enhancement layer (loaded AFTER style.css)
   Fully additive. To revert: remove the <link> to this file in index.html.
   Original style.css is never modified.
   ===================================================================== */

/* ---------- 1. Richer palette (overrides the root tokens) ---------- */
:root{
  --bg:#080a11; --bg2:#0b0e16; --panel:#11151f; --panel2:#161c28;
  --line:#1f2737; --line2:#303b4f;
  --acc:#7c83ff; --acc2:#b06bff; --acc3:#38d3ff;   /* added cyan accent */
  --r:16px;
  --glow:rgba(124,131,255,.55);
  --grad:linear-gradient(135deg,var(--acc) 0%,var(--acc2) 55%,#d56bff 100%);
}
body.light{
  --bg:#eef1f9; --bg2:#e6eaf4; --panel:#ffffff; --panel2:#f1f4fb;
  --line:#e3e7f1; --line2:#d3dae8;
  --glow:rgba(124,131,255,.30);
}

/* ---------- 2. Living aurora background ---------- */
body{position:relative}
body::before{
  content:"";position:fixed;inset:-20% -10%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 50% at 18% 22%, rgba(124,131,255,.28), transparent 62%),
    radial-gradient(34% 46% at 82% 16%, rgba(176,107,255,.24), transparent 60%),
    radial-gradient(40% 52% at 72% 88%, rgba(56,211,255,.16), transparent 62%),
    radial-gradient(36% 48% at 26% 92%, rgba(176,107,255,.16), transparent 60%);
  filter:blur(36px);opacity:.9;
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
body.light::before{opacity:.55}
@keyframes auroraDrift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(2.5%,-2%,0) scale(1.08)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.04)}
}
/* faint moving grid on top of the aurora for a "tech" feel */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:
    linear-gradient(rgba(124,131,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,131,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}
body.light::after{opacity:.6;
  background-image:
    linear-gradient(rgba(70,90,160,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,90,160,.06) 1px, transparent 1px);}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
}

/* ---------- 3. Glassmorphism: sidebar, panes, cards ---------- */
.sidebar{
  background:linear-gradient(180deg, rgba(17,21,31,.72), rgba(12,15,21,.62)) !important;
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:1px 0 0 rgba(255,255,255,.03), 18px 0 60px -30px rgba(0,0,0,.6);
}
body.light .sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66)) !important;
  border-right:1px solid rgba(20,30,60,.07);
}
.pane{
  background:linear-gradient(180deg, rgba(22,28,40,.74), rgba(13,17,24,.78)) !important;
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 30px 70px -34px rgba(0,0,0,.7),
    0 0 0 1px rgba(124,131,255,.04);
  transition:border-color .25s, box-shadow .35s, transform .35s;
}
.pane:hover{
  border-color:rgba(124,131,255,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 34px 80px -34px rgba(0,0,0,.72),
    0 0 0 1px rgba(124,131,255,.10),
    0 0 50px -20px var(--glow);
}
body.light .pane{
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,255,.85)) !important;
  border:1px solid rgba(20,30,60,.08);
}

/* subtle glass treatment for the many card surfaces */
.dc-perk,.plan,.faq-item,.rep-card,.tno-card,.tno-upcard,.chat-card,
.inbox-list,.inbox-conv,.acard,.modal-card{
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  transition:border-color .2s, transform .2s, box-shadow .25s;
}

/* ---------- 4. Sidebar nav: glowing active pill + slide hover ---------- */
.nav-item{
  position:relative;border-radius:12px;overflow:hidden;
  transition:color .18s, background .18s, transform .18s, padding-left .18s;
}
.nav-item::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:3px;height:62%;border-radius:0 3px 3px 0;
  background:var(--grad);box-shadow:0 0 12px var(--glow);transition:transform .22s ease;
}
.nav-item:hover{transform:translateX(2px);background:rgba(124,131,255,.07)}
.nav-item:hover .nav-ic{transform:scale(1.16)}
.nav-ic{transition:transform .2s}
.nav-item.active{
  background:linear-gradient(135deg, rgba(124,131,255,.22), rgba(176,107,255,.12)) !important;
  box-shadow:inset 0 0 0 1px rgba(124,131,255,.22), 0 6px 20px -10px var(--glow);
}
.nav-item.active::before{transform:translateY(-50%) scaleY(1)}

/* ---------- 5. Gradient view titles ---------- */
.view-title{
  letter-spacing:-.6px;
}
.view-title, .dc-title, .plan-price, .tno-thanks-title{
  background:linear-gradient(120deg, var(--ink) 0%, var(--ink) 40%, var(--acc) 78%, var(--acc2) 100%);
  -webkit-background-clip:text;background-clip:text;
}
.view-title{ -webkit-text-fill-color:transparent; }
/* keep gauge / report numbers solid (they set their own colors) */
.rep-gauge-in b, .tn-rep-pct{-webkit-text-fill-color:initial;background:none}

/* ---------- 6. Buttons: sheen sweep + deeper lift ---------- */
.btn-primary{
  background:var(--grad);background-size:160% 160%;
  box-shadow:0 10px 26px -8px var(--glow), 0 2px 6px rgba(0,0,0,.3);
  position:relative;overflow:hidden;
  transition:transform .16s, box-shadow .25s, filter .2s, background-position .5s;
}
.btn-primary:hover{
  transform:translateY(-2px);background-position:100% 0;
  box-shadow:0 16px 38px -10px var(--glow), 0 4px 10px rgba(0,0,0,.34);
}
/* sheen sweep lives on ::before so it never collides with the loading
   spinner (which uses ::after) */
.btn-primary::before{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;
}
.btn-primary:hover::before{left:140%}
/* while loading, hide the sheen so only the centered spinner shows */
.btn-primary.loading::before{display:none}
.btn{transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s, filter .2s}
.btn-ghost:hover{transform:translateY(-1px)}

/* ---------- 7. Inputs / editors: focus glow ---------- */
.editor:focus, .check-area:focus, .auth-input:focus, .chat-input input:focus,
.tno-note:focus, .tno-note-field:focus{
  box-shadow:0 0 0 3px rgba(124,131,255,.16);
}
.pane:focus-within{border-color:rgba(124,131,255,.30)}

/* ---------- 8. Card hover lifts ---------- */
.dc-perk:hover,.plan:hover,.acard.click:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 50px -24px rgba(0,0,0,.6), 0 0 40px -22px var(--glow);
  border-color:rgba(124,131,255,.30);
}
.plan.featured{
  box-shadow:0 0 0 1px var(--acc), 0 24px 60px -26px var(--glow), 0 0 60px -30px var(--glow);
}
.plan.featured::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(124,131,255,.06), transparent 40%);
}

/* ---------- 9. Custom scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(124,131,255,.4) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(124,131,255,.5), rgba(176,107,255,.5));
  border-radius:10px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--acc),var(--acc2));background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- 10. View entrance animation ---------- */
.view:not(.hidden){animation:viewIn .42s cubic-bezier(.22,.7,.25,1) both}
@keyframes viewIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .view:not(.hidden){animation:none}
}

/* ---------- 11. Score ring + gauges: glow ---------- */
.ring{box-shadow:0 0 22px -6px var(--glow)}
.rep-gauge{filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))}

/* ---------- 12. Theme toggle + sidebar toggle polish ---------- */
.theme-toggle:hover{transform:rotate(-18deg) scale(1.08);border-color:var(--acc);color:var(--acc)}
.sidebar-toggle:hover{box-shadow:0 0 16px -2px var(--glow);color:var(--acc)}

/* ---------- 13. Model toggle: animated active ---------- */
.model-btn.active{box-shadow:0 4px 14px -4px var(--glow)}
.model-btn{transition:color .15s, background .15s}

/* ---------- 14. Nav badges + status dots: soft pulse ---------- */
.nav-badge:not(.hidden), .inbox-unread{animation:badgePulse 2.2s ease-in-out infinite}
@keyframes badgePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(248,81,73,.45)}
  50%{box-shadow:0 0 0 5px rgba(248,81,73,0)}
}
.chat-dot,.status-online .dot{animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(63,185,80,.5)}
  50%{box-shadow:0 0 0 6px rgba(63,185,80,0)}
}

/* ---------- 15. Discord hero: extra depth ---------- */
.dc-hero{box-shadow:0 30px 80px -30px rgba(88,101,242,.6), 0 0 0 1px rgba(255,255,255,.06) inset}

/* ---------- 16. Toast: glassy ---------- */
.toast{
  background:linear-gradient(180deg, rgba(28,35,48,.92), rgba(20,26,38,.92));
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 44px -16px rgba(0,0,0,.6), 0 0 30px -16px var(--glow);
}

/* ---------- 17. Chat bubbles: pop-in ---------- */
.chat-msg{animation:bubbleIn .28s cubic-bezier(.2,.8,.3,1.1) both}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* keep things crisp on the light theme glass */
body.light .pane:hover, body.light .dc-perk:hover, body.light .plan:hover{
  box-shadow:0 20px 44px -24px rgba(40,60,120,.4), 0 0 36px -22px var(--glow);
}