:root{
  --bg:#f4f1ec; --surface:#ffffff; --ink:#26211c; --muted:#7a7066;
  --line:#e7e0d6; --accent:#b9472f; --accent-soft:#f3e4df;
  --green:#1aa260; --lime:#7cb342; --amber:#f6a609; --red:#e3553b;
  --shadow:0 18px 50px -28px rgba(50,30,15,.45);
  --radius:20px;
}
*{box-sizing:border-box}
/* The [hidden] attribute must win over component display rules (flex/grid). */
[hidden]{display:none !important}
html,body{margin:0}
body{
  font-family:Inter,system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #fbe9df 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #e9efe6 0%, transparent 55%),
    var(--bg);
  min-height:100vh; display:flex; flex-direction:column;
}
h1,h2,h3{font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.01em}

/* ---- topbar ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.7); backdrop-filter:blur(10px); position:sticky; top:0; z-index:5;
}
.brand{display:flex; align-items:center; gap:14px}
.logo{width:42px; height:42px; border-radius:13px; background:
  radial-gradient(circle at 32% 30%, #fff 0 18%, transparent 19%),
  radial-gradient(circle at 64% 44%, #fff 0 13%, transparent 14%),
  radial-gradient(circle at 44% 70%, #fff 0 15%, transparent 16%),
  linear-gradient(135deg,var(--accent),#d98a5f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.brand strong{display:block; font-size:18px; font-family:Fraunces,serif}
.brand .sub{font-size:12.5px; color:var(--muted)}
.topnav{display:flex; align-items:center; gap:22px; font-size:14px}
.topnav a{color:var(--muted); text-decoration:none}
.topnav a:hover{color:var(--ink)}
.models-pill{font-size:12px; color:var(--accent); background:var(--accent-soft);
  padding:6px 12px; border-radius:999px; font-weight:600}
.switch{border:1px solid var(--line); padding:7px 13px; border-radius:999px}

/* ---- layout ---- */
.stage{
  flex:1; display:grid; grid-template-columns:minmax(380px,1fr) minmax(440px,1.25fr);
  gap:28px; padding:32px 40px; max-width:1340px; margin:0 auto; width:100%;
}

/* ---- studio (left) ---- */
.studio{position:sticky; top:96px; align-self:start; display:flex; flex-direction:column; gap:16px}
.dropzone{
  background:var(--surface); border:2px dashed #d8ccbd; border-radius:var(--radius);
  min-height:430px; display:flex; align-items:center; justify-content:center;
  text-align:center; cursor:pointer; transition:.2s; overflow:hidden; box-shadow:var(--shadow);
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent); background:#fffaf7; outline:none}
.dropzone.drag{border-color:var(--accent); background:var(--accent-soft); transform:scale(1.005)}
.dropzone.has-image{border-style:solid; border-color:var(--line); cursor:default; padding:0}
.dz-empty{padding:40px}
.dz-icon{font-size:46px; color:var(--accent); margin-bottom:6px}
.dz-empty h2{font-size:20px; margin:.2em 0}
.dz-empty p{color:var(--muted); margin:.2em 0}
.dz-empty .link{color:var(--accent); text-decoration:underline}
.dz-formats{font-size:12px; margin-top:14px !important}
.dz-preview{margin:0; width:100%; height:100%}
.dz-preview img{width:100%; height:430px; object-fit:contain; background:#1b1714; display:block}
.dz-preview figcaption{font-size:12.5px; color:var(--muted); padding:10px 14px; text-align:left}
.studio-actions{display:flex; gap:12px}
.btn-primary{
  flex:1; border:0; background:var(--accent); color:#fff; font-weight:600; font-size:15px;
  padding:15px; border-radius:14px; cursor:pointer; transition:.15s; font-family:inherit;
}
.btn-primary:hover:not(:disabled){background:#a23c26}
.btn-primary:disabled{opacity:.45; cursor:not-allowed}
/* Draw the eye to Analyse once an image is loaded (#6) */
.btn-primary.ready{animation:readyglow 1.7s ease-in-out infinite}
@keyframes readyglow{
  0%,100%{box-shadow:0 0 0 0 rgba(185,71,47,.45)}
  50%{box-shadow:0 0 0 10px rgba(185,71,47,0)}
}
.studio-tip.ready{color:var(--accent); font-weight:600}
.studio-tip.ready::before{content:"⤵ "}
.btn-ghost{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:15px 20px; border-radius:14px; cursor:pointer; font-family:inherit; font-size:14px;
}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.studio-tip{font-size:12.5px; color:var(--muted); text-align:center}

/* ---- panel (right) ---- */
.panel{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  min-height:480px; padding:32px; position:relative}
.panel-placeholder{display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:40px 20px; color:var(--muted)}
.panel-placeholder h2{color:var(--ink); font-size:22px; margin:6px 0}
.panel-placeholder p{max-width:430px; line-height:1.55}
.ph-art{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:96px; height:96px; margin-bottom:14px}
.ph-cell{border-radius:50%; background:linear-gradient(135deg,#f2d9cf,#e7efe2); animation:pulse 2.4s ease-in-out infinite}
.ph-cell:nth-child(2){animation-delay:.3s}.ph-cell:nth-child(3){animation-delay:.6s}.ph-cell:nth-child(4){animation-delay:.9s}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
.ph-points{list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:8px 26px; text-align:left}
.ph-points li{position:relative; padding-left:20px; font-size:13.5px; color:var(--ink)}
.ph-points li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700}

/* ---- loading ---- */
.loading{display:flex; flex-direction:column; align-items:center; gap:16px; padding:50px 20px}
.scanner{position:relative; width:230px; height:230px; border-radius:16px; overflow:hidden; background:#1b1714}
.scanner img{width:100%; height:100%; object-fit:contain}
.scanline{position:absolute; left:0; right:0; height:3px; top:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 16px 3px var(--accent); animation:scan 1.8s ease-in-out infinite}
@keyframes scan{0%,100%{top:6%}50%{top:94%}}
.dots{display:flex; gap:6px}
.dots span{width:8px; height:8px; border-radius:50%; background:var(--accent); animation:bounce 1.2s infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ---- results ---- */
.results{animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.verdict{display:flex; align-items:center; gap:24px; padding:6px 4px 22px; border-bottom:1px solid var(--line)}
.gauge{flex:none}
.gauge-num{font-family:Fraunces,serif; font-size:34px; font-weight:600; fill:var(--ink)}
.gauge-cap{font-size:11px; fill:var(--muted)}
.verdict-main h2{font-size:27px; margin:0 0 4px}
.verdict-stage{color:var(--muted); font-size:15px}
.agree{display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:13px;
  padding:6px 12px; border-radius:999px; background:#eef6ef; color:var(--green); font-weight:600}
.agree.disagree{background:#fdf0e9; color:var(--accent)}

.explain{background:#faf6f1; border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin:22px 0}
.explain h3{margin:0 0 8px; font-size:16px; color:var(--accent)}
.explain p{margin:0; line-height:1.65; font-size:15.5px}

.reviews-intro{margin:22px 0 10px; font-size:13.5px; color:var(--muted); font-weight:500}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.model-card{border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff}
.model-card.failed{background:#fbf2ef; border-color:#f0d6cd}
.model-card header{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px}
.model-id{display:flex; align-items:center; gap:11px; min-width:0}
.model-avatar{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-size:18px; background:linear-gradient(135deg,#fbe9df,#e9efe6); box-shadow:inset 0 0 0 1px var(--line)}
.model-name{font-weight:700; font-size:15px; display:block; line-height:1.2}
.model-sub{font-size:11.5px; color:var(--muted); display:block}
.badge{color:#fff; font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px}
.badge-fail{background:var(--muted)}
.model-err{font-size:13px; color:var(--accent); margin:4px 0 0}
.model-stage{font-size:13px; color:var(--muted); margin-bottom:12px}
.metrics{display:grid; gap:8px; margin-bottom:12px}
.metric{display:flex; align-items:center; justify-content:space-between; font-size:13.5px;
  padding:8px 12px; background:#faf7f3; border-radius:10px}
.metric-label{color:var(--muted); display:flex; align-items:center; gap:6px}
.metric-value{font-weight:600}
.hint{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  border-radius:50%; background:#ddd2c5; color:#fff; font-style:normal; font-size:10px; cursor:help}
.obs{margin:0; padding-left:18px; font-size:13.5px; line-height:1.55; color:var(--ink)}
.obs li{margin:3px 0}
.model-meta{font-size:11px; color:var(--muted); margin:12px 0 0; text-align:right}

.nextstep{margin-top:22px; border:1px solid #e6d8cf; border-radius:16px; padding:20px 22px;
  background:linear-gradient(135deg,#fbf3ee,#f4f8f1)}
.nextstep h4{margin:0 0 6px; font-size:16px; display:flex; align-items:center; gap:8px}
.nextstep h4::before{content:"➜"; color:var(--accent)}
.nextstep .lead{margin:0 0 12px; font-size:14.5px; line-height:1.55}
.nextstep ul{margin:0; padding-left:20px; font-size:14px; line-height:1.6}
.nextstep li{margin:5px 0}
.nextstep li::marker{color:var(--accent)}
.disclaimer{margin-top:18px; font-size:12.5px; color:var(--muted); line-height:1.5;
  background:#fdf8f2; border:1px dashed var(--line); border-radius:12px; padding:14px 16px}

.footer{padding:22px 40px; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:13px}
.footer strong{color:var(--ink)}

@media (max-width:980px){
  .stage{grid-template-columns:1fr; padding:22px}
  .studio{position:static}
  .cols,.aside,.ph-points{grid-template-columns:1fr}
}