/* evo360.health's own tokens, values unchanged. LIGHT ONLY -- the decision on record.
   There is no dark block on purpose: a half-built dark mode looks worse than none. */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700&display=swap");

:root{
  --bg:270 25% 98%; --fg:270 30% 10%; --card:0 0% 100%;
  --primary:265 65% 55%; --pfg:0 0% 100%; --psoft:270 40% 94%;
  --secondary:270 30% 95%; --muted:270 15% 92%; --mutedfg:270 10% 45%;
  --accent:280 70% 65%; --destructive:0 84.2% 60.2%;
  --success:65 45% 45%; --warning:42 85% 55%; --info:280 70% 65%;
  --border:270 20% 88%; --sidebar:0 0% 98%; --sidebarborder:270 20% 88%;
  --viewer:265 75% 12%; --lavender:270 40% 94%;
  --radius:16px;
  --glass-shadow:0 8px 32px hsl(265 70% 60% / .15);
  --elev:0 15px 50px hsl(265 70% 60% / .15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Urbanist,Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:hsl(var(--bg)); color:hsl(var(--fg));
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'rlig' 1,'calt' 1,'ss01' 1,'cv11' 1;
  /* --gradient-glow, faint behind the working surfaces */
  background-image:
    radial-gradient(at 88% -12%, hsl(280 80% 70% / .16) 0%, transparent 52%),
    radial-gradient(at 8% 108%, hsl(var(--primary) / .08) 0%, transparent 55%);
  background-attachment:fixed;
}
a{color:hsl(var(--primary)); text-decoration:none}
a:hover{color:hsl(var(--info))}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}
::selection{background:hsl(var(--primary) / .18)}

/* ── shell ───────────────────────────────────────────────────────────────────── */
#app{display:flex; height:100vh; overflow:hidden}

.rail{
  width:240px; flex-shrink:0; display:flex; flex-direction:column;
  border-right:1px solid hsl(var(--sidebarborder));
  background-image:linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(var(--lavender)) 100%);
}
.rail-head{height:64px; flex-shrink:0; display:flex; align-items:center; gap:10px;
  padding:0 20px; border-bottom:1px solid hsl(var(--sidebarborder))}
.brand{display:flex; flex-direction:column; line-height:1.15}
.brand b{font-size:13.5px; font-weight:600; letter-spacing:-.015em}
.brand span{font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  color:hsl(var(--primary) / .8)}
.rail-note{padding:0 14px 12px; font-size:10.5px; line-height:1.45; color:hsl(var(--mutedfg))}
.rail-label{padding:0 4px 6px; font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:hsl(var(--mutedfg) / .7)}
.rail-list{display:flex; flex-direction:column; gap:2px; overflow-y:auto}
.rail-scroll{padding:0 8px 6px; overflow-y:auto; flex-grow:1}

.study{position:relative; display:flex; gap:9px; align-items:center; padding:7px 9px;
  border-radius:12px; cursor:pointer; border:none; background:none; width:100%; text-align:left;
  font-family:inherit}
.study:hover{background:hsl(var(--primary) / .07)}
.study.active{background:hsl(var(--accent) / 1)}
.study.active::before{content:""; position:absolute; left:0; top:50%; height:20px; width:2px;
  transform:translateY(-50%); border-radius:0 9999px 9999px 0; background:hsl(var(--primary))}
.study-thumb{width:32px; height:32px; border-radius:6px; flex-shrink:0;
  background:hsl(var(--viewer)); border:1px solid hsl(var(--border)); object-fit:cover}
.study-meta{min-width:0; flex-grow:1}
.study-meta b{display:block; font-size:12.5px; font-weight:500; color:hsl(var(--mutedfg))}
.study.active .study-meta b{color:hsl(var(--fg))}
.study-meta span{display:block; font-size:10px; color:hsl(var(--mutedfg)); margin-top:1px;
  font-variant-numeric:tabular-nums}
.study-del{opacity:0; flex-shrink:0; border:none; background:none; cursor:pointer; padding:3px;
  border-radius:6px; color:hsl(var(--mutedfg)); line-height:0}
.study:hover .study-del{opacity:1}
.study-del:hover{color:hsl(var(--destructive)); background:hsl(var(--destructive) / .1)}

/* ── the two right-hand columns share one bar height, so their rules line up ──── */
.topbar{height:64px; flex-shrink:0; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:0 20px; position:relative;
  border-bottom:1px solid hsl(var(--border))}
.topbar::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(to right, transparent, hsl(var(--primary) / .4), transparent)}
.topbar h1{margin:0; font-size:18px; font-weight:600; letter-spacing:-.015em}
.topbar .sub{font-size:12px; color:hsl(var(--mutedfg)); margin-top:2px}

.viewer{width:440px; flex-shrink:0; border-right:1px solid hsl(var(--border));
  display:flex; flex-direction:column; overflow-y:auto}
.stage{height:380px; flex-shrink:0; background:hsl(var(--viewer));
  display:flex; align-items:center; justify-content:center; position:relative}
.stage img{max-width:100%; max-height:100%; object-fit:contain; display:block}
.stage .placeholder{width:274px; height:350px; background:radial-gradient(
  ellipse 58% 46% at 50% 42%, hsl(220 8% 55%) 0%, hsl(220 12% 28%) 34%,
  hsl(224 20% 12%) 68%, hsl(224 30% 5%) 100%)}
.flag{position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:12px; background:hsl(var(--warning) / .15);
  border:1px solid hsl(var(--warning) / .5)}
.flag span{font-size:10px; font-weight:600; letter-spacing:.06em; color:hsl(var(--warning))}

.strip{display:flex; gap:10px; padding:14px 16px; flex-wrap:wrap}
.thumb{width:74px; border:none; background:none; padding:0; cursor:pointer; font-family:inherit}
.thumb .box{position:relative; height:74px; border-radius:12px; background:hsl(var(--viewer));
  border:2px solid hsl(var(--border)); overflow:hidden}
.thumb.sel .box{border-color:hsl(var(--primary))}
.thumb.excluded .box{border-color:hsl(var(--warning)); opacity:.55}
.thumb .box img{width:100%; height:100%; object-fit:cover; display:block}
.thumb .badge{position:absolute; right:-5px; top:-5px; width:16px; height:16px;
  border-radius:9999px; background:hsl(var(--warning)); display:flex; align-items:center;
  justify-content:center}
.thumb figcaption{font-size:9.5px; color:hsl(var(--mutedfg)); margin-top:5px; text-align:center;
  font-variant-numeric:tabular-nums}
.thumb.excluded figcaption{color:hsl(var(--warning))}

.meta{padding:2px 16px 16px; display:flex; flex-direction:column; gap:11px}
.meta dt{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  color:hsl(var(--mutedfg) / .8)}
.meta dd{margin:3px 0 0; font-size:13px; font-variant-numeric:tabular-nums}
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{font-size:11px; padding:2px 7px; border-radius:6px; font-variant-numeric:tabular-nums;
  color:hsl(var(--primary)); background:hsl(var(--primary) / .12);
  border:1px solid hsl(var(--primary) / .35)}
.chip.warn{color:hsl(var(--warning)); background:hsl(var(--warning) / .12);
  border-color:hsl(var(--warning) / .35)}

/* ── report ──────────────────────────────────────────────────────────────────── */
.report{flex-grow:1; display:flex; flex-direction:column; min-width:0; overflow-y:auto}
/* The slot has to GROW for anything inside it to centre vertically. Without this it takes its
   natural height and sits under the top bar, so `.center` had nothing to centre within -- which is
   why the sign-in card hugged the top of the page. */
#report-slot{flex:1 1 auto; display:flex; flex-direction:column; min-height:0}
.report-body{padding:26px 32px; display:flex; flex-direction:column; gap:24px}
.section-label{font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:12px}
.section-label.obs{color:hsl(var(--primary))}
.section-label.imp{color:hsl(var(--info))}
.lines{display:flex; flex-direction:column; gap:8px}
.lines div{font-size:14px; line-height:1.6; text-wrap:pretty}
.lines div.soft{color:hsl(var(--mutedfg))}
.rule{height:1px; background:hsl(var(--border))}
.note{display:flex; gap:10px; padding:13px 15px; border-radius:14px;
  background:hsl(var(--warning) / .08); border:1px solid hsl(var(--warning) / .28)}
.note p{margin:0; font-size:12.5px; line-height:1.55; color:hsl(var(--fg) / .85)}
.disclaimer{margin-top:auto; padding:14px 32px; border-top:1px solid hsl(var(--border));
  font-size:11.5px; color:hsl(var(--mutedfg))}

.badge-pill{font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 8px; border-radius:9999px; white-space:nowrap}
.badge-pill.primary{color:hsl(var(--primary)); background:hsl(var(--primary) / .12);
  border:1px solid hsl(var(--primary) / .35)}
.badge-pill.success{color:hsl(var(--success)); background:hsl(var(--success) / .12);
  border:1px solid hsl(var(--success) / .35)}
.badge-pill.warning{color:hsl(var(--warning)); background:hsl(var(--warning) / .12);
  border:1px solid hsl(var(--warning) / .35)}

/* ── buttons ─────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:inherit; font-size:12.5px; font-weight:500; padding:8px 13px;
  border-radius:12px; cursor:pointer; border:1px solid hsl(var(--border));
  background:hsl(var(--card)); color:hsl(var(--fg)); transition:.15s}
.btn:hover{border-color:hsl(var(--primary) / .5); color:hsl(var(--primary))}
.btn:disabled{opacity:.5; cursor:default}
.btn.primary{width:100%; border:none; color:hsl(var(--pfg));
  background-image:linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
  box-shadow:var(--glass-shadow)}
.btn.primary:hover{color:hsl(var(--pfg)); filter:brightness(1.06)}
.btn.ghost{border:none; background:none; color:hsl(var(--mutedfg))}
.btn.ghost:hover{color:hsl(var(--primary))}

/* ── login / centred states ──────────────────────────────────────────────────── */
.center{flex-grow:1; display:flex; align-items:center; justify-content:center; padding:32px}
.card{background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius); box-shadow:var(--elev); padding:34px; max-width:460px; width:100%}
.card.wide{max-width:820px}
.hero{background-image:linear-gradient(135deg, hsl(270 30% 98%) 0%, hsl(270 40% 94%) 50%,
  hsl(265 50% 90%) 100%)}
.card h2{margin:0 0 8px; font-size:22px; font-weight:600; letter-spacing:-.02em}
.card p{margin:0 0 18px; font-size:13.5px; line-height:1.6; color:hsl(var(--mutedfg))}
.glogin{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:11px; font-size:14px; font-weight:500; font-family:inherit; cursor:pointer;
  border-radius:12px; border:1px solid hsl(var(--border)); background:#fff;
  color:hsl(var(--fg))}
.glogin:hover{box-shadow:var(--glass-shadow)}
.glogin:disabled{opacity:.55; cursor:default; box-shadow:none}
.accept{display:flex; gap:10px; align-items:flex-start; margin:0 0 16px;
  font-size:13px; line-height:1.55; cursor:pointer}
.accept input{margin:2px 0 0; width:16px; height:16px; accent-color:hsl(var(--primary));
  flex-shrink:0}
.warnbox{padding:12px 14px; border-radius:12px; margin:0 0 18px;
  background:hsl(var(--warning) / .1); border:1px solid hsl(var(--warning) / .35);
  font-size:12.5px; line-height:1.55; color:hsl(var(--fg) / .9)}
.errbox{padding:11px 14px; border-radius:12px; margin:0 0 16px;
  background:hsl(var(--destructive) / .08); border:1px solid hsl(var(--destructive) / .3);
  font-size:12.5px; line-height:1.5; color:hsl(var(--fg) / .9)}

/* ── terms panel ─────────────────────────────────────────────────────────────── */
.sheet{position:fixed; inset:0; background:hsl(265 40% 12% / .45); display:flex;
  align-items:center; justify-content:center; padding:32px; z-index:50;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.sheet-inner{background:hsl(var(--card)); border-radius:var(--radius); max-width:860px;
  width:100%; max-height:86vh; display:flex; flex-direction:column; box-shadow:var(--elev)}
.sheet-head{display:flex; align-items:center; justify-content:space-between;
  padding:18px 26px; border-bottom:1px solid hsl(var(--border))}
.sheet-head h2{margin:0; font-size:17px; font-weight:600}
.md{overflow-y:auto; padding:22px 30px 30px; font-size:13.5px; line-height:1.66}
.md h1{font-size:19px; margin:26px 0 10px} .md h1:first-child{margin-top:0}
.md h2{font-size:15.5px; margin:22px 0 8px}
.md h3{font-size:14px; margin:18px 0 6px}
.md p,.md li{color:hsl(var(--fg) / .88)}
.md ul{padding-left:20px} .md li{margin:4px 0}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  background:hsl(var(--muted)); padding:1px 5px; border-radius:5px}
.md blockquote{margin:14px 0; padding:12px 16px; border-left:3px solid hsl(var(--warning));
  background:hsl(var(--warning) / .07); border-radius:0 10px 10px 0}
.md blockquote p{margin:5px 0}
.md table{border-collapse:collapse; width:100%; margin:12px 0; font-size:12.5px; display:block;
  overflow-x:auto}
.md th,.md td{border:1px solid hsl(var(--border)); padding:6px 9px; text-align:left}
.md th{background:hsl(var(--muted)); font-weight:600}
.md hr{border:none; height:1px; background:hsl(var(--border)); margin:20px 0}

/* ── processing ──────────────────────────────────────────────────────────────── */
.spin{width:26px; height:26px; animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.processing{display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:70px 32px; text-align:center}
.processing p{margin:0; font-size:13px; color:hsl(var(--mutedfg))}

@media (max-width:1100px){
  #app{flex-direction:column; height:auto; overflow:visible}
  .rail,.viewer{width:100%; border-right:none; border-bottom:1px solid hsl(var(--border))}
  .rail-scroll{max-height:220px}
}