:root{
  --ink:#0d0d10; --pink:#E5007D; --desk:#eceaee; --panel:#ffffff; --line:#dcd9e0;
  --text:#17171a; --mute:#6d6a75; --tint:#fde6f2; --bar:#0d0d10; --bartext:#ffffff; --field:#ffffff;
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --desk:#1b1a1f; --panel:#131216; --line:#34323b; --text:#f2f1f5; --mute:#a5a2ad; --tint:#3a1029; --field:#1d1c22; }
}
:root[data-theme="dark"]{ --desk:#1b1a1f; --panel:#131216; --line:#34323b; --text:#f2f1f5; --mute:#a5a2ad; --tint:#3a1029; --field:#1d1c22; }
*,*::before,*::after{box-sizing:inherit}
html{height:100%}
body{height:100%;margin:0;background:var(--desk);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.hide{display:none!important}
.screen{height:100%;padding-top:env(safe-area-inset-top,0px)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--tint);padding:1px 5px;border-radius:4px}
hr{border:0;border-top:1px solid var(--line);margin:26px 0 18px}

/* boot + spinners */
.boot{height:100%;display:grid;place-items:center;background:var(--ink)}
.spinner{width:34px;height:34px;border:3px solid rgba(229,0,125,.25);border-top-color:var(--pink);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px;color:var(--mute);font-size:14px}

/* ---------- auth ---------- */
#auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.brandside{background:var(--ink);color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:0}
.brandside .stripe{position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--pink)}
.brandside::before{content:"";position:absolute;right:-20%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(229,0,125,.35),transparent 68%)}
.brandside .words{position:relative;padding:0 6% 0 calc(6% + 14px);display:flex;justify-content:center}
.brandrow{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,30px);flex-wrap:nowrap}
.brandside h1{font-size:clamp(28px,3.4vw,48px);line-height:1.04;font-weight:800;letter-spacing:-.025em;margin:0;white-space:nowrap}
.brandlogo{width:clamp(100px,12vw,170px);height:auto;flex:none;filter:drop-shadow(0 6px 24px rgba(229,0,125,.35))}
.brandside h1 b{color:var(--pink)}
.brandside p{margin:0;max-width:30em;color:#d9d7df;font-family:"Source Serif 4",Georgia,serif;font-size:clamp(15px,1.4vw,18px);line-height:1.5}
.formside{display:flex;align-items:center;justify-content:center;padding:32px 24px;background:var(--panel);overflow:auto}
.form{width:min(380px,100%)}
.form h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px}
.form .lede{color:var(--mute);margin:0 0 24px}
label{display:block;font-weight:600;font-size:13px;margin:0 0 6px}
.field{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--field);margin:0 0 16px;font-size:16px}
.field:focus{border-color:var(--pink);outline:none}
textarea.field{resize:vertical;line-height:1.45}
.field.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.hint{font-size:12.5px;color:var(--mute);margin:-10px 0 16px}
.primary{width:100%;padding:14px 16px;border:0;border-radius:8px;background:var(--pink);color:#fff;font-weight:700;font-size:16px}
.primary:hover{filter:brightness(1.07)}
.primary[disabled]{opacity:.55;cursor:default;filter:none}
.primary.small{width:auto;padding:10px 16px;font-size:14px}
.danger.small{background:transparent;border:1.5px solid var(--line);color:#c4004f;border-radius:8px;padding:9px 14px;font-weight:600;font-size:13.5px;margin-left:auto}
.danger.small:hover{border-color:#c4004f}
.err{color:#c4004f;font-size:13px;min-height:20px;margin:-6px 0 10px}
.links{margin-top:18px;font-size:13.5px;color:var(--mute);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.link{background:transparent;border:0;padding:0;color:var(--pink);font-weight:600;font-size:13.5px}
.link:hover{text-decoration:underline}

/* ---------- top bars ---------- */
.topbar{background:var(--bar);color:var(--bartext);display:flex;align-items:center;gap:12px;padding:12px 20px;padding-top:calc(12px + env(safe-area-inset-top,0px));margin-top:calc(-1 * env(safe-area-inset-top,0px))}
.topbar .logo{font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.topbar .logo b{color:var(--pink)}
.topbar .tag{font-size:11px;font-weight:700;background:var(--pink);padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:middle}
.topbar .who{margin-left:auto;font-size:13px;color:#c9c6d0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.ghost{background:transparent;border:1.5px solid #4a4752;color:#fff;border-radius:8px;padding:8px 12px;font-weight:600;font-size:13px;white-space:nowrap}
.ghost:hover{border-color:#fff}

/* ---------- library ---------- */
#library,#admin{overflow:auto;display:flex;flex-direction:column}
.lib{max-width:880px;margin:0 auto;padding:36px 20px 60px;width:100%}
.lib h2{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.lib .lede{color:var(--mute);margin:0 0 28px}
.course{display:grid;grid-template-columns:168px 1fr;gap:22px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin:0 0 16px;align-items:center}
.thumb{width:168px;aspect-ratio:8.5/11;border-radius:4px;overflow:hidden;background:var(--ink);box-shadow:0 6px 18px rgba(13,13,16,.22);display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.course h3{font-size:20px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em}
.course .meta{color:var(--mute);font-size:14px;margin:0 0 12px}
.course .mods{margin:0 0 16px;padding:0;list-style:none;font-size:14px}
.course .mods li{padding:2px 0}
.course .mods b{color:var(--pink);font-weight:700;margin-right:8px}
.course .open{display:inline-block;width:auto;padding:12px 20px}
.course.locked h3{color:var(--mute)}
.lockline{font-size:14px;background:var(--tint);display:inline-block;padding:8px 12px;border-radius:6px}
.resume{margin-left:12px;color:var(--mute);font-size:13px}
.empty-lib{background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:28px;color:var(--mute);font-size:14.5px}
.empty-lib p{margin:0 0 8px}

/* ---------- reader ---------- */
#reader{display:flex;flex-direction:column}
.rbar{background:var(--bar);color:var(--bartext);display:flex;align-items:center;gap:6px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px));margin-top:calc(-1 * env(safe-area-inset-top,0px));flex:none;overflow-x:auto;scrollbar-width:none}
.rbar::-webkit-scrollbar{display:none}
.rbar .title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.rbar .title small{display:block;font-weight:400;color:#b7b4be;font-size:12px;overflow:hidden;text-overflow:ellipsis}
.ib{background:transparent;border:0;color:#fff;border-radius:8px;padding:9px 11px;font-weight:600;font-size:13px;white-space:nowrap;min-height:40px;flex:none}
.ib:hover{background:#26242b}
.ib.on{background:var(--pink)}
.ib[disabled]{opacity:.35;cursor:default}
.ib .ico{display:none}
.pager{display:flex;align-items:center;gap:4px;font-size:13px;color:#d9d7df;white-space:nowrap;flex:none}
.pager input{width:52px;text-align:center;background:#1e1d23;border:1px solid #45424d;color:#fff;border-radius:6px;padding:7px 4px;font-size:14px}
.work{flex:1 1 auto;display:flex;min-height:0;position:relative}
.drawer{width:310px;flex:none;background:var(--panel);border-right:1px solid var(--line);overflow:auto;padding:14px 0 30px}
.drawer h4{font-size:12px;font-weight:700;color:var(--mute);margin:14px 18px 6px}
.drawer button.row{display:flex;width:100%;gap:10px;text-align:left;background:transparent;border:0;padding:10px 18px;font-size:13.5px;align-items:baseline}
.drawer button.row:hover{background:var(--tint)}
.drawer button.row.cur{background:var(--tint);box-shadow:inset 3px 0 0 var(--pink)}
.drawer .row .t{flex:1}
.drawer .row .p{color:var(--mute);font-size:12px;flex:none}
.stage{flex:1 1 auto;min-width:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:18px 14px 40px;text-align:center}
.sheet{position:relative;display:inline-block;background:#fff;box-shadow:0 2px 4px rgba(13,13,16,.12),0 14px 34px rgba(13,13,16,.18);line-height:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sheet canvas#page{display:block;pointer-events:none}
.sheet .ink{z-index:2}
#search{padding:0}
#thumbs{padding:0}
.wm{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wm span{position:absolute;white-space:nowrap;font-size:13px;font-weight:600;color:rgba(13,13,16,.085);transform:rotate(-28deg);line-height:1}
.lic{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:10px;line-height:1;color:rgba(13,13,16,.38);pointer-events:none}
.notes{width:340px;flex:none;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.notes .head{padding:16px 18px 8px}
.notes .head h3{margin:0;font-size:16px;font-weight:800}
.notes .head p{margin:2px 0 0;color:var(--mute);font-size:12.5px}
.notes textarea{margin:0 18px;height:210px;flex:none;resize:vertical;border:1.5px solid var(--line);border-radius:8px;padding:12px;background:var(--field);font-family:"Source Serif 4",Georgia,serif;font-size:16px;line-height:1.5}
.notes textarea:focus{border-color:var(--pink);outline:none}
.saved{font-size:12px;color:var(--mute);padding:6px 18px 0;min-height:24px}
.notes .all{flex:1 1 auto;overflow:auto;border-top:1px solid var(--line);margin-top:8px;padding:6px 0 24px}
.notes .all h4{font-size:12px;font-weight:700;color:var(--mute);margin:10px 18px 6px}
.notes .all button{display:block;width:100%;text-align:left;background:transparent;border:0;padding:9px 18px;font-size:13.5px}
.notes .all button:hover{background:var(--tint)}
.notes .all button b{color:var(--pink);font-weight:700;margin-right:8px;font-size:12.5px}
.notes .all button span{font-family:"Source Serif 4",Georgia,serif}
.empty{color:var(--mute);font-size:13px;padding:4px 18px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);margin-left:6px;vertical-align:middle}

/* ---------- admin ---------- */
.admin-wrap{max-width:1180px}
.admin-cols{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
.admin-side{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;position:sticky;top:0}
.side-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.side-head h2{font-size:18px;margin:0}
.admin-side button.crow{display:block;width:100%;text-align:left;background:transparent;border:0;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600}
.admin-side button.crow small{display:block;font-weight:400;color:var(--mute);font-size:12px}
.admin-side button.crow:hover{background:var(--tint)}
.admin-side button.crow.cur{background:var(--tint);box-shadow:inset 3px 0 0 var(--pink)}
.admin-main{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;min-height:300px}
.editor h2{font-size:22px;margin:0 0 18px}
.editor h3{font-size:16px;margin:0 0 6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.row-btns{display:flex;align-items:center;gap:14px}
.status{font-size:13px;color:var(--mute)}
.status.ok{color:#1b8a4a}
.status.bad{color:#c4004f}
.manual-row{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;margin:10px 0 0}
.manual-row .thumb{width:120px;font-size:26px}
.manual-row .lede{margin:0 0 10px}
.manual-row .hint{margin:10px 0 0}
.attendees{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:14px}
.attendees th{text-align:left;font-size:12px;color:var(--mute);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line)}
.attendees td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.attendees .pill{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--tint);color:var(--pink)}
.attendees .pill.ok{background:#e3f6ea;color:#1b8a4a}
.attendees .x{background:transparent;border:0;color:var(--mute);font-size:16px;padding:2px 6px}
.attendees .x:hover{color:#c4004f}

/* ---------- responsive ---------- */
@media (max-width:1199px){ .drawer{width:270px}.notes{width:300px} }
@media (max-width:899px){
  .drawer,.notes{position:absolute;top:0;bottom:0;z-index:5;box-shadow:0 0 40px rgba(13,13,16,.35)}
  .drawer{left:0;max-width:86vw}
  .notes{right:0;max-width:92vw;width:92vw}
  .admin-cols{grid-template-columns:1fr}
  .admin-side{position:static}
}
@media (max-width:760px){
  #auth{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:auto}
  .brandside{min-height:150px;padding:24px 0}
  .brandside h1{font-size:28px}
  .brandlogo{width:84px}
  .brandrow{gap:16px;flex-wrap:nowrap}
  .brandside .words{padding:0 16px 0 30px}
  .course{grid-template-columns:96px 1fr;gap:14px}
  .thumb{width:96px}
  .rbar .title small,.ib .lbl{display:none}
  .ib .ico{display:inline}
  .stage{padding:10px 6px 30px}
  .grid2{grid-template-columns:1fr}
  .manual-row{grid-template-columns:1fr}
  .topbar{padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .topbar .who{display:none}
}