/* Shared look for login, cabinet and admin: the same matte-black night as the landing.
   Loaded after each page's own <style>, so these rules win where they overlap. */
:root{
  --void:#0b0b0c; --night:#121113; --panel:rgba(255,245,240,.045); --ash:rgba(255,245,240,.075);
  --line:rgba(255,235,228,.10); --line-2:rgba(255,235,228,.18);
  --bone:#fff4f0; --text:#eadbd7; --smoke:#b9a5a2;
  --blood:#e5484d; --ember:#f08a5d; --glow:rgba(229,72,77,.28); --good:#5fe39a; --warn:#f5c35b;
}
html{scrollbar-width:thin;scrollbar-color:#4a3330 #0b0b0c}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#0b0b0c}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5a3a34,#3a2624);border-radius:10px;border:3px solid #0b0b0c}
body{background:var(--void)!important;color:var(--bone)}

/* background: smoke, grain and the channel network (night.js draws the network) */
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,#141213,#0b0b0c 60%)}
.scene .smoke{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;will-change:transform}
.scene .a{width:60vmax;height:60vmax;left:-18vmax;top:-12vmax;background:radial-gradient(circle,rgba(229,72,77,.22),transparent 65%);animation:th-a 38s ease-in-out infinite alternate}
.scene .b{width:54vmax;height:54vmax;right:-20vmax;top:30vh;background:radial-gradient(circle,rgba(240,138,93,.16),transparent 65%);animation:th-b 46s ease-in-out infinite alternate}
@keyframes th-a{to{transform:translate3d(22vw,18vh,0) scale(1.15)}}
@keyframes th-b{to{transform:translate3d(-26vw,-14vh,0) scale(.9)}}
.scene .grain{position:absolute;inset:-50%;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:th-grain 1.2s steps(6) infinite}
@keyframes th-grain{0%,100%{transform:none}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}}
#net{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* type details */
h1,h2,h3{color:var(--bone);letter-spacing:-.01em}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--ember)!important}
.eyebrow::before{content:"";width:14px;height:12px;background:linear-gradient(115deg,transparent 30%,var(--ember) 30% 44%,transparent 44% 62%,var(--blood) 62% 76%,transparent 76%)}

/* glass surfaces */
.card,.side,.top,.pick,.tier,.note,.quote,.reflink,.idchip,.bal,.tabs,.help,details.help{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card{background:linear-gradient(180deg,rgba(28,25,26,.72),rgba(16,15,16,.72))!important;border-color:var(--line)!important;border-radius:20px}
.side{background:rgba(12,11,12,.78)!important;border-right-color:var(--line)!important}
.top{background:rgba(11,11,12,.78)!important}
.bal{background:linear-gradient(160deg,rgba(240,138,93,.12),rgba(229,72,77,.05))!important;border-color:rgba(240,138,93,.3)!important}
.bal span{color:var(--ember)!important}
.nav a{color:var(--text)!important}
.nav a[aria-current="page"]{background:linear-gradient(90deg,rgba(240,138,93,.16),rgba(229,72,77,.04))!important;box-shadow:inset 2px 0 0 var(--ember)!important}
.nav a[aria-current="page"] svg{color:var(--ember)!important}
.pick{background:var(--panel)!important}
.pick[aria-pressed="true"]{border-color:var(--ember)!important;background:rgba(240,138,93,.10)!important;box-shadow:0 0 0 3px rgba(240,138,93,.12)!important}
.pick[aria-pressed="true"]::after{color:var(--ember)!important}
.plan.hot{border:1.5px solid transparent!important;background:linear-gradient(rgba(26,20,21,.92),rgba(18,15,16,.92)) padding-box,linear-gradient(160deg,var(--ember),var(--blood) 50%,rgba(229,72,77,.2)) border-box!important}
.plan li::before{content:"✓ "!important;color:var(--ember)!important}
.note{background:var(--panel)!important}
.help{border-color:rgba(240,138,93,.35)!important;background:rgba(240,138,93,.06)!important}
.help .q{background:var(--ember)!important}

/* buttons and fields */
.btn{border-radius:999px!important;border-color:var(--line-2)!important;background:var(--panel)!important;color:var(--bone)!important}
.btn:hover{border-color:var(--ember)!important;background:var(--ash)!important}
.btn-red{background:linear-gradient(180deg,#ec5a5f,#d23f45)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 8px 30px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-red:hover{background:linear-gradient(180deg,#f06469,#d8454b)!important;transform:translateY(-1px)}
input.in,textarea.in,input:not([type=checkbox]):not([type=radio]){background:rgba(8,8,9,.7)!important;border-color:var(--line-2)!important}
input:focus,textarea:focus{border-color:var(--ember)!important;box-shadow:0 0 0 3px rgba(240,138,93,.18)!important}
.chip[aria-pressed="true"],.tabs button[aria-pressed="true"]{border-color:var(--ember)!important;background:rgba(240,138,93,.14)!important;color:var(--bone)!important}
.prog i,.bar-row .tr i{background:linear-gradient(90deg,var(--blood),var(--ember))!important}
.chart .b{fill:rgba(240,120,90,.55)!important}
.chart .b.last{fill:var(--blood)!important}

@media (prefers-reduced-motion:reduce){.scene *{animation:none!important}}

/* a lone KPI next to a taller form keeps its own height */
.g2>.kpi{align-self:start}