/* simaadi skin v3 · Ghar on Machine room
   Pure restyle layer over the working app. No selectors invented,
   only the app's own classes and the hooks redesign.js already injects.
   If this file vanishes, the app still works on its inline styles. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,560;9..144,640&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --g-bg:#14111d; --g-panel:#1c1828; --g-panel2:#221c32; --g-ink:#f2ead9;
  --g-mut:#9a8fb0; --g-brass:#e0a04a; --g-brass-deep:#c6862f; --g-mint:#3fc9a4;
  --g-red:#e2604f; --g-line:#2b2540; --g-line-soft:#241f37;
  --g-disp:'Fraunces',serif; --g-body:'DM Sans',sans-serif; --g-mono:'IBM Plex Mono',monospace;
}

/* ---------- base ---------- */
html,body{background:var(--g-bg)!important}
body{color:var(--g-ink)!important;font-family:var(--g-body)!important;letter-spacing:0!important}
::selection{background:var(--g-brass);color:#241703}
a{color:var(--g-brass)}

/* the lamp and the blueprint, fixed behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(120vmax 120vmax at -6% -30%,rgba(224,160,74,.14),rgba(96,64,140,.08) 36%,transparent 62%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background:
    linear-gradient(rgba(154,143,176,.6) 1px,transparent 1px),
    linear-gradient(90deg,rgba(154,143,176,.6) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(90% 62% at 50% 0%,#000,transparent)}

/* ---------- top nav ---------- */
nav{background:rgba(20,17,29,.82)!important;border-bottom:1px solid var(--g-line-soft)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}
.logo{font-family:var(--g-disp)!important;font-weight:560!important;color:var(--g-ink)!important}
.navbtn{color:var(--g-mut)!important;font-family:var(--g-mono)!important;font-size:12px!important}
.navbtn:hover{color:var(--g-ink)!important}

/* ---------- headings and leads ---------- */
h1,.hero h1,#modTitle,.hh-hi,.sec h2{font-family:var(--g-disp)!important;font-weight:560!important;
  letter-spacing:-.02em!important;color:var(--g-ink)}
.tag,.lead,.cmeta,.hh-sub{color:var(--g-mut)!important}
.sn{font-family:var(--g-mono)!important;color:var(--g-mut)!important}

/* ---------- landing modules on the signed-in home ---------- */
.mod{border-radius:14px!important;border:1px solid var(--g-line);
  box-shadow:0 10px 34px rgba(0,0,0,.42)!important}
.mod:hover{transform:translateY(-4px)!important;box-shadow:0 26px 54px rgba(0,0,0,.55)!important;
  border-color:#3a3156}
.mod .scrim{background:linear-gradient(180deg,rgba(20,17,29,.06) 26%,rgba(20,17,29,.82) 100%)!important}
.mod .badge{background:rgba(224,160,74,.24)!important;border:1px solid rgba(224,160,74,.4);
  font-family:var(--g-mono)!important;font-weight:500!important;font-size:11px!important}
.mod .mtitle{font-family:var(--g-disp)!important;font-weight:560!important}
.mbtn{border-color:rgba(242,234,217,.42)!important;background:rgba(20,17,29,.4)!important;
  font-family:var(--g-body)!important}
.mbtn:hover{background:rgba(20,17,29,.62)!important}
.mbtn.primary{background:var(--g-brass)!important;border-color:var(--g-brass)!important;color:#241703!important}
.mbtn.primary:hover{background:#e8ac5c!important}

/* beach hero keeps the photo, gains the night scrim */
.homehero{border-radius:16px!important;border:1px solid var(--g-line);
  box-shadow:0 16px 48px rgba(0,0,0,.5)!important}
.hh-scrim{background:linear-gradient(180deg,rgba(20,17,29,.05) 24%,rgba(20,17,29,.72) 100%)!important}
.hh-hi .wd{color:var(--g-brass)}

/* ---------- cards ---------- */
.card{background:var(--g-panel)!important;border:1px solid var(--g-line)!important;
  border-radius:12px!important;color:var(--g-ink)!important;position:relative;overflow:hidden}
.card::after{content:""!important;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(224,160,74,.10) 52%,transparent 62%)!important;
  transform:translateX(-120%);transition:transform .7s;opacity:1!important}
.card:hover{transform:translateY(-4px)!important;border-color:#3a3156!important;
  box-shadow:0 20px 44px rgba(0,0,0,.5)!important}
.card:hover::after{transform:translateX(120%)}
.card.sel{border-color:var(--g-brass)!important;
  box-shadow:0 0 0 3px rgba(224,160,74,.22)!important}
.ctitle,.wname{color:var(--g-ink)!important;font-weight:600}
.shot img{filter:drop-shadow(0 16px 28px rgba(0,0,0,.55))!important}

/* ---------- glass panels go night glass ---------- */
.gcard,.panel,.wcard,.egcard{background:rgba(30,25,45,.72)!important;
  border:1px solid var(--g-line)!important;border-radius:14px!important;
  box-shadow:0 14px 40px rgba(0,0,0,.42)!important;color:var(--g-ink)}
.gcard h3{color:var(--g-mut)!important;font-family:var(--g-mono)!important;
  text-transform:none!important;letter-spacing:.02em!important;font-size:11.5px!important}
.spec{border-bottom:1px solid var(--g-line-soft)!important}
.spec .k{color:var(--g-mut)!important}
.spec .v{color:var(--g-ink)!important;font-family:var(--g-mono)!important;font-weight:500!important;font-size:13.5px}
.egv{font-family:var(--g-mono)!important;color:var(--g-brass)!important}
.egk{color:var(--g-mut)!important}

/* ---------- inputs and actions ---------- */
textarea,input,select,.tinput,.tarea,.wform input{background:#171322!important;
  border:1px solid var(--g-line)!important;color:var(--g-ink)!important;border-radius:10px!important}
textarea:focus,input:focus,select:focus{border-color:var(--g-brass)!important;
  box-shadow:0 0 0 4px rgba(224,160,74,.16)!important}
label{color:var(--g-mut)!important}
.cta,.vupload{background:var(--g-brass)!important;color:#241703!important;font-weight:600!important;
  border-radius:10px!important}
.cta:hover,.vupload:hover{opacity:1!important;background:#e8ac5c!important}
.cta:disabled{background:#4a3f63!important;color:#9a8fb0!important}
.chip{background:var(--g-panel)!important;border:1px solid var(--g-line)!important;
  color:var(--g-ink)!important}
.chip:hover{border-color:var(--g-brass)!important}
.back{background:var(--g-panel)!important;color:var(--g-ink)!important;
  border:1px solid var(--g-line)!important}
.back:hover{background:var(--g-panel2)!important}
.efbtn{background:var(--g-panel)!important;border:1px solid var(--g-line)!important;color:var(--g-mut)!important}
.efbtn.act{background:var(--g-brass)!important;border-color:var(--g-brass)!important;color:#241703!important}
.efbtn:hover{border-color:var(--g-brass)!important}

/* ---------- answers, the reading surface ---------- */
.ans,.tans{background:var(--g-panel)!important;border:1px solid var(--g-line)!important;
  color:var(--g-ink)!important;border-radius:14px!important;line-height:1.66!important}
.ans h3,.tans h3,.ans h4{font-family:var(--g-disp)!important;font-weight:560!important;color:var(--g-ink)!important}
.tans code{font-family:var(--g-mono)!important;background:#141021!important;color:var(--g-mint)!important;
  border:1px solid var(--g-line-soft);border-radius:6px;padding:1px 6px}
.tans hr{border-color:var(--g-line-soft)!important}
.tans strong,.ans strong{color:var(--g-brass)!important;font-weight:600!important}

/* ---------- states ---------- */
.wbadge.ok{background:rgba(63,201,164,.14)!important;color:var(--g-mint)!important;
  border:1px solid rgba(63,201,164,.32)!important}
.wbadge.soon{background:rgba(224,160,74,.14)!important;color:var(--g-brass)!important;
  border:1px solid rgba(224,160,74,.34)!important}
.wbadge.expired{background:rgba(226,96,79,.14)!important;color:var(--g-red)!important;
  border:1px solid rgba(226,96,79,.34)!important}
.wbadge.unknown{background:var(--g-panel2)!important;color:var(--g-mut)!important;
  border:1px solid var(--g-line)!important}
.msg.err{color:var(--g-red)!important}
.wempty{color:var(--g-mut)!important;border:1px dashed var(--g-line)!important;border-radius:12px}
.upd .ver{background:rgba(63,201,164,.14)!important;color:var(--g-mint)!important}
.upd li,.upd .stale{color:var(--g-mut)!important}
.tload::after{border-color:var(--g-brass) transparent var(--g-brass) transparent!important}
.docmodal,.docmodal-body{background:var(--g-panel)!important;color:var(--g-ink)!important;
  border:1px solid var(--g-line)!important}

/* ---------- login ---------- */
#loginView .gcard,#newPassView .gcard{background:rgba(30,25,45,.85)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.6)!important}
#loginView h1,#loginView h2{font-family:var(--g-disp)!important;font-weight:560!important}

/* ---------- injected chrome from redesign.js ---------- */
#srail{background:rgba(22,18,32,.86)!important;border:1px solid var(--g-line)!important;
  backdrop-filter:blur(14px)!important;border-radius:14px!important}
#srail .sbtn{color:var(--g-mut)!important;border-radius:10px!important}
#srail .sbtn:hover{color:var(--g-ink)!important;background:var(--g-panel2)!important}
#srail .sbtn.act{color:#241703!important;background:var(--g-brass)!important}
#srail .sbtn .tip{background:var(--g-panel)!important;color:var(--g-ink)!important;
  border:1px solid var(--g-line)!important;font-family:var(--g-mono)!important;font-size:11px!important}
#srail .sdiv{background:var(--g-line)!important}
#themeToggle{background:var(--g-panel)!important;border:1px solid var(--g-line)!important;
  color:var(--g-brass)!important}
#themeToggle:hover{border-color:var(--g-brass)!important}
#sky i{background:var(--g-brass)!important;opacity:.5}
#sky .s1,#sky .s2,#sky .s3{opacity:.35}
#grain{opacity:.03!important}
.askring{border-color:rgba(224,160,74,.4)!important}
.askring>.askinner{background:radial-gradient(circle at 32% 28%,#f3c177,#c6862f)!important}
.micbtn{background:var(--g-panel)!important;border:1px solid var(--g-line)!important;color:var(--g-ink)!important}
.micbtn:hover{border-color:var(--g-brass)!important}
.micbtn.on{background:rgba(63,201,164,.16)!important;border-color:var(--g-mint)!important;
  color:var(--g-mint)!important;animation:g-mic 1.6s ease-in-out infinite}
@keyframes g-mic{50%{box-shadow:0 0 0 8px rgba(63,201,164,.10)}}

/* ---------- footer, focus, motion, phone ---------- */
footer{color:var(--g-mut)!important;border-top:1px solid var(--g-line-soft);
  font-family:var(--g-mono)!important;font-size:11.5px!important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.card:focus-visible{outline:2px solid var(--g-brass)!important;outline-offset:3px}
@media (max-width:720px){
  .mod{min-height:240px!important}
  .homehero{min-height:220px!important}
}
@media (prefers-reduced-motion:reduce){
  .card::after,.mod,.card,.micbtn.on{animation:none!important;transition:none!important}
}