/* =====================================================================
   Aquauta app styles (moved out of the JavaScript files on Nov 3, 2026; nothing changed in them).
   The notebook interface and everything built on it. Colors come from the tokens in base.css
   (--ink, --surface, --accent, --line, --hair, --muted, --ok, --warn, --sodium, --f-display ...).
   Glass panels use --gl / --gl2 (defined on .nb below). Output templates (slides, video scenes,
   infographics, downloaded decks and exams) keep their styles in studio2.js because they are
   copied into downloaded files.
   ===================================================================== */
:root{
  --present-bg:#000;                                             /* behind slides in Present mode */
  --game-1:#E4572E; --game-2:#2D7DD2; --game-3:#E8B10C; --game-4:#3BB273; --game-ink:#fff;   /* live game answer colors (▲ ◆ ● ■) */
}

/* ===================== Notebook: home, Sources | Chat | Studio panels, Studio tiles and viewers (notebook.js) ===================== */
  html.nb-mode .bar, html.nb-mode #main, html.nb-mode #statusPop{display:none!important}
  html:not(.nb-mode) #nb{display:none}
  .nb{--gl:color-mix(in srgb,var(--surface) 74%,transparent);--gl2:color-mix(in srgb,var(--surface) 88%,transparent);min-height:100dvh;display:flex;flex-direction:column;color:var(--ink)}
  .nb-panel,.nb-card,.nb-topbar{background:var(--gl);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);box-shadow:0 0 0 1px var(--line),0 18px 40px -28px rgba(0,0,0,.45)}
  .nb-topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;margin:10px 12px 0;border-radius:16px}
  .nb-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:17px}
  .nb-logo i{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-style:normal;font-weight:700}
  .nb-title{flex:1;min-width:0;font-family:var(--f-display);font-size:20px;border:0;background:transparent;color:var(--ink);padding:4px 8px;border-radius:8px;text-overflow:ellipsis}
  .nb-title:hover,.nb-title:focus{background:var(--hair);outline:none}
  .nb-iconbtn{border:0;background:transparent;color:var(--ink);border-radius:10px;padding:7px 10px;cursor:pointer;font:inherit;font-size:14px;display:inline-flex;align-items:center;gap:6px}
  .nb-iconbtn:hover{background:var(--hair)}
  .nb-cols{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(280px,360px);gap:12px;padding:12px;height:calc(100dvh - 72px)}
  .nb-cols.nosrc{grid-template-columns:56px minmax(0,1fr) minmax(280px,360px)} .nb-cols.nostudio{grid-template-columns:minmax(260px,320px) minmax(0,1fr) 56px} .nb-cols.nosrc.nostudio{grid-template-columns:56px minmax(0,1fr) 56px}
  .nb-panel{border-radius:18px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .nb-ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--hair);font-weight:600}
  .nb-pb{flex:1;min-height:0;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
  .nb-collapsed .nb-pb,.nb-collapsed .nb-ph span{display:none} .nb-collapsed .nb-ph{justify-content:center;border:0}
  .nb-btn{border:0;border-radius:999px;padding:8px 14px;background:var(--gl2);box-shadow:0 0 0 1px var(--line);color:var(--ink);cursor:pointer;font:inherit;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .nb-btn:hover{box-shadow:0 0 0 1px var(--accent)} .nb-btn.pri{background:var(--accent);color:var(--accent-ink);box-shadow:none} .nb-btn:disabled{opacity:.5;cursor:default}
  .nb-src-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer}
  .nb-src-item:hover{background:var(--hair)} .nb-src-item .lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  .nb-src-item .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--hair);flex:none}
  .nb-src-item input{width:18px;height:18px;accent-color:var(--accent);flex:none}
  .nb-warn{font-size:12px;color:var(--warn,#94500B)}
  .nb-msgs{flex:1;min-height:0;overflow:auto;padding:18px max(18px,calc((100% - 760px)/2));display:flex;flex-direction:column;gap:16px}
  .nb-msg{line-height:1.6;font-size:15px;overflow-wrap:anywhere} .nb-msg p{margin:0 0 10px} .nb-msg p:last-child{margin:0} .nb-msg ul,.nb-msg ol{margin:4px 0 10px;padding-left:22px}
  .nb-msg.user{align-self:flex-end;max-width:85%;background:var(--gl2);padding:10px 14px;border-radius:16px 16px 4px 16px;box-shadow:0 0 0 1px var(--line)}
  .nb-msg.ai .acts{display:flex;gap:6px;margin-top:8px}
  .nb-msg .cite{font-size:11px!important;min-width:20px;padding:0 6px!important;border-radius:999px!important;background:var(--accent-soft,var(--hair))!important;border:0!important;text-decoration:none!important;vertical-align:super;line-height:1.5}
  .nb-guide{display:flex;flex-direction:column;gap:12px;padding:10px 0}
  .nb-guide .emo{font-size:40px;line-height:1} .nb-guide h2{font-family:var(--f-display);font-size:28px;margin:0}
  .nb-chips{display:flex;gap:8px;flex-wrap:wrap}
  .nb-chip{border:0;border-radius:999px;padding:7px 12px;background:var(--gl2);box-shadow:0 0 0 1px var(--line);color:var(--ink);cursor:pointer;font:inherit;font-size:13.5px;text-align:left}
  .nb-chip:hover{box-shadow:0 0 0 1px var(--accent)}
  .nb-input{padding:10px max(14px,calc((100% - 780px)/2)) 14px}
  .nb-inbox{display:flex;align-items:flex-end;gap:8px;background:var(--gl2);border-radius:18px;padding:8px 8px 8px 14px;box-shadow:0 0 0 1px var(--line)}
  .nb-inbox textarea{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;resize:none;outline:none;max-height:180px;padding:6px 0}
  .nb-inbox .cnt{font-size:12px;color:var(--muted);white-space:nowrap;padding:8px 4px}
  .nb-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .nb-tile{border:0;border-radius:14px;padding:12px;text-align:left;background:var(--gl2);box-shadow:0 0 0 1px var(--line);color:var(--ink);cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:4px;min-height:74px}
  .nb-tile:hover:not(:disabled){box-shadow:0 0 0 1px var(--accent)} .nb-tile b{font-size:14px} .nb-tile span{font-size:12px;color:var(--muted)} .nb-tile:disabled{opacity:.55;cursor:default}
  .nb-tile .tic{font-size:18px;line-height:1}
  .nb-note{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer}
  .nb-note:hover{background:var(--hair)} .nb-note .t{flex:1;min-width:0} .nb-note .t b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500} .nb-note .t span{font-size:12px;color:var(--muted)}
  .nb-doc{line-height:1.6;font-size:14.5px} .nb-doc h1,.nb-doc h2,.nb-doc h3{font-family:var(--f-display);margin:14px 0 6px} .nb-doc p{margin:0 0 10px}
  .nb-home{max-width:1100px;width:100%;box-sizing:border-box;margin:0 auto;padding:28px 16px 60px;display:flex;flex-direction:column;gap:22px}
  .nb-home h1{font-family:var(--f-display);font-size:clamp(30px,4.5vw,48px);margin:0;text-shadow:0 1px 12px rgba(0,0,0,.25)}
  .nb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
  .nb-card{border:0;border-radius:18px;min-height:170px;padding:18px;text-align:left;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:8px;font:inherit}
  .nb-card:hover{box-shadow:0 0 0 1.5px var(--accent),0 18px 40px -28px rgba(0,0,0,.45)}
  .nb-card .emo{font-size:34px;line-height:1} .nb-card b{font-family:var(--f-display);font-size:19px;font-weight:500;line-height:1.25;flex:1} .nb-card span{font-size:12.5px;color:var(--muted)}
  .nb-card.new{align-items:center;justify-content:center;text-align:center;border:1.5px dashed var(--line)}
  .nb-card.new .plus{width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:28px}
  .nb-tabs{display:none}
  .nb-tiles>span>.nb-tile{flex:1;min-width:0}
  .nb-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite;display:inline-block;vertical-align:middle}
  .nb-drop{border:1.5px dashed var(--line);border-radius:16px;padding:28px 16px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
  .nb-drop.over{border-color:var(--accent);background:var(--hair)}
  .nb-piece{padding:8px 10px;border-radius:10px;white-space:pre-wrap;font-size:13.5px;line-height:1.55} .nb-piece.hit{background:color-mix(in srgb,var(--sodium) 26%,transparent)} .nb-piece .mk{display:block;font-size:11.5px;color:var(--muted);margin-bottom:2px}
  @media (max-width:900px){
    .nb-cols,.nb-cols.nosrc,.nb-cols.nostudio,.nb-cols.nosrc.nostudio{grid-template-columns:minmax(0,1fr);height:calc(100dvh - 72px - 78px - env(safe-area-inset-bottom,0px))}
    .nb-cols>.nb-panel{display:none} .nb-cols[data-tab="src"]>.nb-src,.nb-cols[data-tab="chat"]>.nb-chat,.nb-cols[data-tab="studio"]>.nb-studio{display:flex}
    .nb-collapsed .nb-pb,.nb-collapsed .nb-ph span{display:flex} .nb-hide-m{display:none!important}
    .nb-tabs{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));border-radius:16px;padding:6px;gap:6px;z-index:5;background:var(--gl);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 0 0 1px var(--line)}
    .nb-tabs button{flex:1;border:0;border-radius:12px;padding:10px;background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer} .nb-tabs button[aria-selected=true]{background:var(--accent);color:var(--accent-ink)}
    .nb-topbar .nb-hide-m{display:none}
  }

/* ===================== Studio part 2: tables, slide viewer, video controls, practice exam, Discover (studio2.js) ===================== */
  .s2-sel{display:flex;flex-direction:column;gap:4px;font-size:13px}
  .s2-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .s2-tbl{width:100%;border-collapse:collapse;font-size:13px;line-height:1.45}
  .s2-tbl th,.s2-tbl td{padding:7px 8px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
  .s2-tbl th{position:sticky;top:0;background:var(--gl2);cursor:pointer;white-space:nowrap;font-weight:600}
  .s2-tbl th:hover{color:var(--accent)} .s2-tbl td p{margin:0}
  .s2-wrap{overflow:auto;max-height:60vh;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
  .s2-thumbs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .s2-thumbs button{flex:none;width:86px;padding:0;border:0;background:none;cursor:pointer;border-radius:8px;opacity:.65}
  .s2-thumbs button[aria-current=true]{opacity:1;box-shadow:0 0 0 2px var(--accent)}
  .s2-thumbs .s2-slide{box-shadow:none;border-radius:8px}
  .s2-present{position:fixed;inset:0;z-index:80;background:var(--present-bg);display:flex;align-items:center;justify-content:center}
  .s2-present .s2-slide{width:min(100vw,177.7vh);border-radius:0;box-shadow:none}
  .s2-present .s2-pbar{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;opacity:.25;transition:opacity .2s}
  .s2-present .s2-pbar:hover,.s2-present .s2-pbar:focus-within{opacity:1}
  .s2-notes{font-size:13px;line-height:1.5;padding:10px 12px;border-radius:10px;background:var(--hair)}
  .s2-capt{font-size:14px;line-height:1.5;min-height:3em;padding:8px 12px;border-radius:10px;background:var(--hair)}
  .s2-ex-q{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid var(--hair)}
  .s2-ex-q textarea{width:100%}
  .s2-ex-q .ok{color:var(--ok,#2E7D4F)} .s2-ex-q .bad{color:var(--warn,#94500B)}
  .s2-res{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
  .s2-res li{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;padding:4px 0;border-bottom:1px solid var(--hair)}
  .s2-ig-box{width:100%;overflow:hidden;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
  .s2-ig-box>div{transform-origin:0 0}
  .s2-wiki{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
  .s2-wiki label{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:10px;box-shadow:0 0 0 1px var(--line);cursor:pointer}
  .s2-wiki label span{font-size:13px;line-height:1.45}

/* ===================== Coach: Today, progress box, review, hands-free, safety note (coach.js) ===================== */
  .co-today{border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
  .nb-home>*{min-width:0} .co-today .co-row>*{min-width:0} .co-task>span:not(.co-dot):not(.m){flex:1;min-width:0;overflow-wrap:anywhere}
  .co-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .co-nb{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:var(--gl2);box-shadow:0 0 0 1px var(--line)}
  .co-task{display:flex;gap:10px;align-items:center;border:0;border-radius:12px;padding:9px 10px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;width:100%}
  .co-task:hover{background:var(--hair)} .co-task b{font-weight:600;font-size:14.5px} .co-task span.s{font-size:12.5px;color:var(--muted)} .co-task .m{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
  .co-chk{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,var(--gl2));box-shadow:0 0 0 1px var(--line);flex-wrap:wrap}
  .co-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
  .co-tp{display:flex;gap:6px;flex-wrap:wrap} .co-tp span{font-size:12px;padding:3px 8px;border-radius:999px;background:var(--hair);display:inline-flex;gap:5px;align-items:center}
  .co-mood button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
  #coCare{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;width:min(560px,calc(100% - 24px));padding:14px 16px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 20px 50px -20px rgba(0,0,0,.5);font-size:14px;line-height:1.5}
  .co-voice{position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,10,30,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .co-voice .sheet{width:min(560px,100%);gap:14px;text-align:center}
  .co-voice .q{font-family:var(--f-display);font-size:24px;line-height:1.3}
  .co-mic{width:84px;height:84px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);font-size:34px;cursor:pointer;margin:0 auto}
  .co-mic.on{animation:coPulse 1.2s ease-in-out infinite} @keyframes coPulse{50%{box-shadow:0 0 0 14px color-mix(in srgb,var(--accent) 25%,transparent)}}
  @media (prefers-reduced-motion: reduce){.co-mic.on{animation:none}}

/* ===================== Live quiz games (live.js) ===================== */
.lv{position:fixed;inset:0;z-index:78;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;padding:22px 16px;overflow:auto;background:color-mix(in srgb,var(--bg) 60%,rgba(8,10,30,.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink)}
  .lv-box{width:min(820px,100%);display:flex;flex-direction:column;gap:14px}
  .lv-code{font-size:clamp(40px,9vw,72px);font-weight:800;letter-spacing:8px;text-align:center;font-family:var(--f-display)}
  .lv-q{font-family:var(--f-display);font-size:clamp(20px,3.4vw,30px);line-height:1.3;text-align:center}
  .lv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .lv-ch{border:0;border-radius:14px;padding:18px 14px;color:var(--game-ink);font:inherit;font-size:17px;font-weight:600;text-align:left;display:flex;gap:10px;align-items:center;cursor:pointer;min-height:76px}
  .lv-ch:disabled{cursor:default} .lv-ch.dim{opacity:.35} .lv-ch.right{outline:4px solid var(--game-ink)}
  .lv-bar{height:8px;border-radius:4px;background:var(--hair);overflow:hidden} .lv-bar i{display:block;height:100%;background:var(--accent);transition:width .25s linear}
  .lv-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none} .lv-list li{display:flex;justify-content:space-between;padding:8px 12px;border-radius:10px;background:var(--gl2,var(--hair));font-size:15px}
  .lv-pod{display:flex;gap:10px;align-items:flex-end;justify-content:center} .lv-pod div{width:30%;border-radius:12px 12px 0 0;background:var(--accent);color:var(--accent-ink);text-align:center;padding:10px 6px;font-weight:700;display:flex;flex-direction:column;justify-content:flex-end}
  @media (max-width:560px){.lv-grid{grid-template-columns:1fr}.lv-ch{min-height:58px}}

/* ===================== Website sign-in (Site/public/standalone.js) ===================== */
.auth-scrim{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,10,30,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}