/* LabCauldron theme (F38) — loaded after every other stylesheet.
   Warm eggshell pages, white cards, hematoxylin purple + pale-pink accents. Light only: the dark theme is retired so the
   product looks the same for every teacher and student. Everything here overrides colours/shape through the shared
   design tokens, so the older stylesheets keep working untouched. */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"]{
  --bg:#FBF8F1; --surface:#FFFFFF; --surface-2:#F5F0E4; --ink:#27213F; --muted:#6B6582; --line:#E8E1D2;
  --hema:#4334A3; --hema-soft:#EFEBFB; --on-hema:#FFFFFF;
  --eosin:#C2386E; --eosin-soft:#FCEBF1;
  --good:#2B7A4B; --good-soft:#E6F3EA; --warn:#8A5700; --warn-soft:#FBF1DB; --crit:#B3262E; --crit-soft:#FBE8E8;
  --grid:transparent;
  --f-display:"Fraunces", "Young Serif", Georgia, "Times New Roman", serif;
  --f-body:"Inter", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:14px;
  --shadow-1:0 1px 2px rgba(39,33,63,.04), 0 6px 18px -10px rgba(39,33,63,.10);
  --shadow-2:0 2px 4px rgba(39,33,63,.05), 0 18px 36px -18px rgba(39,33,63,.22);
  --ring:0 0 0 3px rgba(67,52,163,.16);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ .nb-name b{color:#0b7a75} }

html{scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font-size:15.5px; line-height:1.58; letter-spacing:-.003em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body::before{background:var(--bg)}
::selection{background:var(--eosin-soft); color:var(--ink)}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; letter-spacing:-.018em; color:var(--ink)}
h2{font-size:1.7rem; line-height:1.15} h3{font-size:1.14rem; line-height:1.25}
h4{font-family:var(--f-body); font-weight:650; letter-spacing:-.005em}
a{color:var(--hema); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:#2F2380}
:focus-visible{outline:2px solid var(--hema); outline-offset:2px; border-radius:6px}
.muted{color:var(--muted)}
.eyebrow{letter-spacing:.11em; font-weight:650; color:var(--eosin)}

/* ---- brand bar ---- */
.brand{background:transparent; background-image:none; border-bottom:0}
.brand .wrap{padding-block:18px 10px}
.logo{gap:3px}
.logo h1{font-size:1.85rem; font-weight:650; letter-spacing:-.025em; color:var(--hema)}
.logo h1 span{color:var(--eosin)}
.logo .home:hover h1{opacity:.9}
.credit{font-size:.76rem; color:var(--muted); letter-spacing:0}
.who{font-size:.88rem; gap:8px}
.who .name{font-weight:650}

/* ---- navigation ---- */
.tabs{background:rgba(251,248,241,.88); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line)}
.tabs a{padding:13px 15px; font-weight:600; font-size:.93rem; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--hema); border-bottom-color:var(--eosin)}
main{padding-block:30px 64px}
#main.wrap{max-width:1120px}
.view{gap:34px}
.sec-head{align-items:baseline}
.sec-head h2{font-size:1.5rem}
.sec-head .muted{font-size:.88rem}

/* ---- surfaces ---- */
.panel,.stage,.idea,.cal-card,.empty,.tools details,.idea-card,.auth .panel,.tbl{border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.panel,.stage,.idea,.cal-card,.tbl,.tools details,.auth .panel{box-shadow:var(--shadow-1)}
.panel{padding:20px}
.empty{background:#FFFEFB; border-style:dashed; border-color:#DDD3BF}
.codebox{background:linear-gradient(135deg,#F3EFFD,#FCEEF3); border:1px solid #E6DEF6; border-radius:var(--r)}
.codebox .big{color:var(--hema); font-weight:600}
.stage{padding:14px 14px 12px; transition:box-shadow .2s, border-color .2s, transform .2s}
.stage .n{font-weight:600; letter-spacing:-.03em}
.stage.now{border-color:var(--hema); box-shadow:0 0 0 1px var(--hema), var(--shadow-1)}
.attn button{border-radius:12px; box-shadow:var(--shadow-1); transition:border-color .15s, transform .15s}
.attn button:hover{border-color:var(--hema); transform:translateY(-1px)}
.disc-q{border:1px solid #F0C9D8; border-left:4px solid var(--eosin); background:var(--eosin-soft)}
.nb-hero{background:linear-gradient(135deg,#F4F0FD,#FDF0F4); border:1px solid #E8E0F6; border-radius:18px; box-shadow:var(--shadow-1)}
.nb-bubble{border-color:#E6DDF4; box-shadow:var(--shadow-1)}
.step-card{border-left-width:3px}
.note-item{border-left:3px solid var(--eosin); background:#FFFEFB; border-radius:0 10px 10px 0}

/* ---- buttons ---- */
.btn{border:1px solid #DCD3BF; background:var(--surface); border-radius:10px; font-weight:600; font-size:.88rem; min-height:38px; padding:8px 14px; color:var(--ink);
  box-shadow:0 1px 0 rgba(39,33,63,.04); transition:border-color .15s, color .15s, box-shadow .15s, transform .12s, filter .15s}
.btn:hover{border-color:var(--hema); color:var(--hema); box-shadow:0 2px 8px -3px rgba(67,52,163,.25)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:linear-gradient(180deg,#4D3DBB,#3D2D98); border-color:#3A2B91; color:#fff;
  box-shadow:0 1px 2px rgba(67,52,163,.35), 0 8px 16px -8px rgba(67,52,163,.6)}
.btn.primary:hover{color:#fff; filter:brightness(1.07); box-shadow:0 1px 2px rgba(67,52,163,.4), 0 10px 20px -8px rgba(67,52,163,.7)}
.btn.danger{border-color:#F0CACC}
.btn.danger.armed{background:var(--crit); color:#fff}
.linkbtn{font-weight:600}
.seg{border-color:#DCD3BF; border-radius:10px; background:var(--surface)}
.seg button{font-weight:600; transition:background .15s}
.seg button[aria-pressed="true"]{background:var(--hema-soft); color:var(--hema)}
.tchip,.kindpick button{border-color:#DCD3BF; background:var(--surface); font-weight:600; transition:all .15s}
.tchip:hover,.kindpick button:hover{border-color:var(--hema); color:var(--hema)}
.tchip[aria-pressed="true"],.kindpick button[aria-pressed="true"]{background:var(--hema); border-color:var(--hema); color:#fff}

/* ---- forms ---- */
label.f{font-weight:600; font-size:.83rem; color:#4B4563; gap:6px}
select,input[type="number"],textarea,
input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="tel"],input[type="search"]{background:#fff; border:1px solid #DCD3BF; border-radius:10px; padding:10px 12px; color:var(--ink); box-shadow:inset 0 1px 0 rgba(39,33,63,.025); transition:border-color .15s, box-shadow .15s}
select:hover,textarea:hover,input:hover{border-color:#C9BEA6}
select:focus,textarea:focus,input:focus{outline:none; border-color:var(--hema); box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:#9B95AE; opacity:1}
textarea{line-height:1.5}
.check input,.agree input{accent-color:var(--hema)}
.hint{color:var(--muted)}
.err{color:var(--crit)}
fieldset{border-radius:10px}

/* ---- chips, tables ---- */
.chip{background:var(--surface-2); color:#3F3957; font-weight:550; padding:3px 10px}
.code{background:var(--hema-soft); color:var(--hema)}
.pill-info{background:var(--hema-soft); color:var(--hema)}
.pill-eosin{background:var(--eosin-soft); color:var(--eosin)}
th{font-weight:650; letter-spacing:.08em; color:var(--muted); background:#FCFAF4; border-bottom:1px solid var(--line)}
td{border-bottom:1px solid #EFE9DB}
tr:last-child td{border-bottom:0}
tr.row:hover td{background:#FAF7FF}
.tbl{overflow-x:auto}
.meter{background:#EFE9DB}
.deadlines li{border-bottom-color:#EFE9DB}
.deadlines li.next{color:var(--eosin)}
.ms.past i,.stage .dots i,.meter i,.sb .track i{background:var(--hema)}
.today span{color:var(--eosin)} .today i{background:var(--eosin)}
.idea .twist{border-left-color:var(--eosin)}
.tl::before{background:#E4DCCB}
.tl .dot{border-color:var(--hema)}
.tl .dot.ai{border-color:var(--eosin)}
.photo{background:repeating-linear-gradient(45deg,#F5F0E4 0 8px,#EFEBFB 8px 16px)}

/* ---- footer + toast ---- */
footer{border-top:1px solid var(--line); background:transparent; padding-block:26px 32px}
.flinks a{color:var(--hema); font-weight:600}
.toast{background:#2A2342; color:#fff; border-radius:12px; box-shadow:var(--shadow-2); font-weight:600; padding:11px 18px}

/* ---- phone ---- */
@media (max-width:700px){
  :root{font-size:16.5px}
  body{padding-bottom:88px}
  .logo h1{font-size:1.6rem}
  h2{font-size:1.45rem}
  #bottombar{background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-top:1px solid var(--line); box-shadow:0 -8px 24px -16px rgba(39,33,63,.25)}
  #bottombar a,#bottombar button{color:var(--muted); font-weight:600}
  #bottombar a[aria-current="page"]{color:var(--hema)}
  #bottombar a[aria-current="page"] .bb-ic{transform:translateY(-1px)}
  #bb-sheet{background:#fff; box-shadow:0 -14px 30px -20px rgba(39,33,63,.4)}
  .panel{padding:16px}
  .tbl tr.row{box-shadow:var(--shadow-1)}
}

/* ---- loading, motion, feedback ---- */
.skel-line,.skel-card{background:linear-gradient(90deg,#EFE9DC 25%,#F8F3E8 40%,#EFE9DC 60%); background-size:300% 100%; opacity:1; animation:lt-shimmer 1.5s ease-in-out infinite}
.skel-card{border-radius:var(--r)}
@keyframes lt-shimmer{0%{background-position:100% 0} 100%{background-position:-100% 0}}
@media (prefers-reduced-motion: no-preference){
  main > .view, main > .welcome, main > .empty{animation:lt-in .32s cubic-bezier(.2,.7,.2,1) both}
  @keyframes lt-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
}
#lt-progress{position:fixed; left:0; top:0; height:3px; width:0; z-index:60; background:linear-gradient(90deg,var(--hema),var(--eosin)); opacity:0; transition:width .25s ease, opacity .3s ease; pointer-events:none; border-radius:0 3px 3px 0}
#lt-progress.on{opacity:1}

/* ---- autosaved drafts + AI pre-fill (ux.js) ---- */
.lt-draft{display:block; font-size:.75rem; color:var(--muted); margin-top:4px; min-height:1em}
.lt-draft b{color:var(--good); font-weight:600}
.pf-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:2px 0 4px}
.pf-btn{display:inline-flex; align-items:center; gap:6px; border:1px solid #E2D2EC; background:linear-gradient(135deg,#FBF7FF,#FFF4F8); color:#5A2E8C; border-radius:99px; padding:6px 13px; font-size:.82rem; font-weight:650; cursor:pointer; transition:all .15s}
.pf-btn:hover{border-color:var(--eosin); color:var(--eosin); box-shadow:0 4px 12px -6px rgba(194,56,110,.4)}
.pf-btn[disabled]{opacity:.6; cursor:default}
.pf-btn .sp{font-size:.95em}
.pf-note{font-size:.8rem; color:var(--muted)}
.pf-chips{display:flex; flex-wrap:wrap; gap:6px}
.pf-chips button{border:1px solid #E2D2EC; background:#fff; border-radius:99px; padding:4px 11px; font-size:.8rem; cursor:pointer; font-weight:550; color:#3F3957; transition:all .15s}
.pf-chips button:hover{border-color:var(--hema); color:var(--hema); background:var(--hema-soft)}
.pf-filled{animation:pf-flash 1.4s ease-out 1}
@keyframes pf-flash{0%{box-shadow:0 0 0 3px rgba(194,56,110,.28); background:#FFF6F9} 100%{box-shadow:none}}
.pf-dates{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; padding:12px; border:1px dashed #E2D2EC; border-radius:12px; background:#FDFBFF}
.pf-dates label{display:grid; gap:4px; font-size:.8rem; font-weight:600; color:#4B4563}

/* ---- file pickers ---- */
input[type="file"]{font:inherit; font-size:.9rem; color:var(--muted); max-width:100%}
input[type="file"]::file-selector-button{font:inherit; font-weight:600; font-size:.88rem; color:var(--hema); background:var(--hema-soft); border:1px solid #DCD4F5; border-radius:999px; padding:7px 16px; margin-right:12px; cursor:pointer; transition:background .15s, border-color .15s}
input[type="file"]::file-selector-button:hover{background:#E6E0F8; border-color:var(--hema)}

/* F39: AI usage panel */
#ai-usage .aiu-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,1fr);gap:6px 14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
#ai-usage .aiu-name{font-weight:600}
#ai-usage .aiu-today{font-size:.92rem}
#ai-usage .aiu-mo{font-size:.85rem;text-align:right}
#ai-usage .aiu-bar{height:6px;border-radius:99px;background:var(--line);margin-top:5px;overflow:hidden}
#ai-usage .aiu-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--hema),var(--eosin));border-radius:99px}
#ai-usage .aiu-total{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:12px}
@media (max-width:640px){#ai-usage .aiu-row{grid-template-columns:1fr}#ai-usage .aiu-mo{text-align:left}#ai-usage .aiu-total{grid-template-columns:1fr}}