/* Luxury medical theme: loaded after style.css and overrides its variables and key components.
   Dark = "Midnight Emerald" (theme-boy, default). Light = "Pearl" (theme-girl). */
body,body.theme-boy{
  --bg:#061a21;--surface:#0b2a33;--card:#103540;--text:#eef4f2;--muted:#8fb0b0;
  --primary:#c8a55b;--secondary:#2fb5a0;--border:rgba(200,165,91,.17);--danger:#e4606d;--success:#34c3a0;
  --gold:#c8a55b;--gold-hi:#ecd699;--gold-lo:#8f6f2c;--on-gold:#07181d;--shadow:0 28px 70px -30px rgba(0,0,0,.75);
  --serif:"Amiri","Noto Naskh Arabic","Times New Roman",serif;
  --sans:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
}
body.theme-girl{
  --bg:#edf3f2;--surface:#ffffff;--card:#f5f9f8;--text:#0a2b32;--muted:#587176;
  --primary:#0f5d66;--secondary:#b07d62;--border:rgba(10,43,50,.13);--danger:#c7384a;--success:#13836b;
  --gold:#9a7424;--gold-hi:#c39a3f;--gold-lo:#6f5216;--on-gold:#ffffff;--shadow:0 26px 60px -34px rgba(10,43,50,.35);
}
body{
  font-family:var(--sans);font-size:15.5px;line-height:1.85;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 560px at 88% -12%,rgba(47,181,160,.16),transparent 62%),
    radial-gradient(900px 520px at -6% 108%,rgba(200,165,91,.11),transparent 60%),var(--bg);
}
body.theme-girl{background:radial-gradient(1000px 520px at 90% -10%,rgba(15,93,102,.10),transparent 62%),radial-gradient(800px 480px at -5% 105%,rgba(176,125,98,.12),transparent 60%),var(--bg)}
::selection{background:var(--gold);color:var(--on-gold)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:10px}
*{scrollbar-width:thin;scrollbar-color:var(--gold-lo) transparent}

/* ---------- header and brand ---------- */
header{height:78px;position:sticky;border-bottom:0;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px) saturate(1.2)}
header::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-hi) 50%,var(--gold) 80%,transparent);opacity:.65}
.brand{font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:.2px;gap:14px}
.brand-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--gold-hi);
  background:radial-gradient(circle at 30% 25%,rgba(236,214,153,.22),rgba(200,165,91,.04) 60%),var(--surface);
  border:1px solid var(--gold);box-shadow:0 0 0 4px rgba(200,165,91,.10),inset 0 0 14px rgba(200,165,91,.18)}
.icon,.back{border-radius:12px;background:color-mix(in srgb,var(--surface) 80%,transparent);border-color:var(--border);color:var(--gold-hi);transition:border-color .2s,box-shadow .2s}
.icon:hover,.back:hover{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,165,91,.14)}
.save-state{color:var(--muted)}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;min-height:460px;border-radius:26px;border:1px solid var(--border);box-shadow:var(--shadow);
  background:
    radial-gradient(700px 360px at 12% 0,rgba(47,181,160,.20),transparent 62%),
    radial-gradient(520px 300px at 100% 100%,rgba(200,165,91,.18),transparent 60%),
    linear-gradient(160deg,color-mix(in srgb,var(--card) 90%,var(--gold)),var(--surface))}
.hero::before{content:"";position:absolute;inset:10px;border:1px solid rgba(200,165,91,.22);border-radius:18px;pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:30px;height:96px;opacity:.55;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='96' viewBox='0 0 420 96'%3E%3Cpath d='M0 54h120l14-4 10 4h14l10-34 14 70 14-52 8 16h42l12-6 12 6h160' fill='none' stroke='%23c8a55b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center/420px 96px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.hero>*{position:relative;z-index:1}
.hero h1{font-family:var(--serif);font-size:clamp(34px,5vw,58px);line-height:1.25;font-weight:700;margin:.2em 0;color:var(--text)}
.hero p{color:var(--muted);font-size:17px;max-width:56ch}
.hero-icon{border-radius:50%;border:1px solid var(--gold);color:var(--gold-hi);background:radial-gradient(circle at 30% 25%,rgba(236,214,153,.20),transparent 62%),var(--surface);box-shadow:0 0 0 10px rgba(200,165,91,.07),0 0 60px rgba(200,165,91,.18)}
.eyebrow,.page-title span{color:var(--gold-hi);letter-spacing:0;text-transform:none;font-weight:600;font-size:13px}
body.theme-girl .eyebrow,body.theme-girl .page-title span{color:var(--gold)}

/* ---------- surfaces ---------- */
.panel,.cards article,.workspace-column,.question,.summary-text,.section{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--gold)),var(--surface));border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04)}
.cards article{transition:border-color .25s,transform .25s}
.cards article:hover{border-color:var(--gold);transform:translateY(-2px)}
.page-title h1,.panel h3,.section summary,.summary-section-title{font-family:var(--serif);font-weight:700}
.page-title h1{font-size:clamp(28px,3.4vw,40px)}
.form-grid label{color:var(--muted);font-weight:500;font-size:13.5px}
input,select,textarea{background:color-mix(in srgb,var(--bg) 55%,var(--surface));color:var(--text);border:1px solid var(--border);border-radius:12px;padding:11px 13px;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,165,91,.18)}

/* ---------- buttons ---------- */
.primary{background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:var(--on-gold);border:0;border-radius:12px;font-weight:700;
  box-shadow:0 10px 26px -12px rgba(200,165,91,.7),inset 0 1px 0 rgba(255,255,255,.35);transition:filter .2s,transform .2s}
body.theme-girl .primary{background:linear-gradient(135deg,#1a7f8a,var(--primary));box-shadow:0 10px 26px -12px rgba(15,93,102,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.secondary,.danger-outline,.compact-btn{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:12px}
.secondary:hover,.compact-btn:hover{border-color:var(--gold);color:var(--gold-hi)}
.danger-outline{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}

/* ---------- clinical workspace ---------- */
.column-head{background:linear-gradient(135deg,color-mix(in srgb,var(--secondary) 18%,var(--surface)),var(--surface));border-bottom:1px solid var(--border)}
.column-head h2{font-family:var(--serif);font-size:21px;font-weight:700}
.progress{height:6px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.progress i,.prob-track i{background:linear-gradient(90deg,var(--secondary),var(--gold-hi));box-shadow:0 0 14px rgba(200,165,91,.5)}
.ddx-card{border-bottom:1px solid var(--border)}
.ddx-rank{font-family:var(--serif);font-size:15px;color:var(--gold-hi);background:transparent;border:1px solid var(--border);border-radius:50%}
.ddx-card:first-child .ddx-rank{background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));color:var(--on-gold);border-color:transparent;box-shadow:0 0 18px rgba(200,165,91,.45)}
.score-pill{background:rgba(200,165,91,.12);color:var(--gold-hi);border:1px solid rgba(200,165,91,.35);border-radius:99px;font-weight:700}
body.theme-girl .score-pill{color:var(--gold)}
.big-score{font-family:var(--serif);color:var(--gold-hi)}
.reason-block{background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid var(--border);border-radius:14px}
.reason-block h3{color:var(--gold-hi);font-family:var(--serif);font-size:15px}
body.theme-girl .reason-block h3{color:var(--gold)}
.reason-block.next-smart{border-color:rgba(47,181,160,.5);background:linear-gradient(180deg,rgba(47,181,160,.12),transparent)}
.reason-block.warning,.global-alert{border-color:color-mix(in srgb,var(--danger) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--danger) 14%,transparent),transparent)}
.global-alert.safe{border-color:rgba(52,195,160,.45);background:rgba(52,195,160,.08)}
.effect-up{color:var(--success)}.effect-down{color:var(--danger)}
.answer{background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--border);border-radius:13px;color:var(--text);transition:border-color .2s,background .2s,box-shadow .2s}
.answer:hover{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,165,91,.12)}
.answer.selected,.answer.selected:hover{border-color:var(--gold);background:linear-gradient(135deg,rgba(200,165,91,.20),rgba(200,165,91,.06));box-shadow:0 0 0 3px rgba(200,165,91,.18),inset 0 0 0 1px rgba(200,165,91,.25)}
.question.answered{border-color:rgba(200,165,91,.38)}
.section-jump button,.quick-status button{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:99px;transition:all .2s}
.section-jump button:hover,.quick-status button:hover{border-color:var(--gold);color:var(--gold-hi)}
.section-jump button.active,.quick-status button.selected{background:linear-gradient(135deg,var(--gold-hi),var(--gold));border-color:transparent;color:var(--on-gold);font-weight:700}
body.theme-girl .section-jump button.active,body.theme-girl .quick-status button.selected{background:linear-gradient(135deg,#1a7f8a,var(--primary));color:#fff}
.q-head h3{font-family:var(--serif);font-size:23px;line-height:1.5;font-weight:700}
.q-head small,.question-counter,.status-label{color:var(--muted)}
.smart-badge{background:rgba(47,181,160,.14);color:var(--secondary);border:1px solid rgba(47,181,160,.4);border-radius:99px}
.summary-text{white-space:pre-wrap;line-height:2;font-size:15px}
footer{color:var(--muted);border-top:1px solid var(--border)}

@media(max-width:850px){.hero{padding:34px 22px;min-height:380px}.hero::before{inset:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}