/* BookStudio — modern, iPad-first UI. No icon fonts; custom SVG icons inline. */
:root{
  --bg:#0f1220; --bg2:#161a2e; --panel:#1c2138; --panel2:#232945; --line:#2c3350;
  --ink:#e8eaf3; --muted:#9aa1c0; --soft:#6f7799;
  --accent:#e0a458; --accent2:#f2c589; --brand:#8ea2ff; --brand2:#6f86f0;
  --good:#3ecf8e; --warn:#f0a63e; --bad:#f2696b;
  --paper:#fbf9f4; --paper-ink:#20242e;
  --radius:16px; --radius-sm:10px; --shadow:0 12px 40px rgba(0,0,0,.35);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:var(--brand);text-decoration:none}
h1,h2,h3{line-height:1.15;margin:0 0 .4em}
.ic{flex:none;vertical-align:middle}
.muted{color:var(--muted)} .mini{font-size:.82rem} .hide-xs{}
button{font-family:inherit}
::selection{background:rgba(142,162,255,.35)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;border:1px solid transparent;
  border-radius:var(--radius-sm);padding:.62em 1.1em;font-size:.95rem;font-weight:600;
  cursor:pointer;transition:.15s;background:var(--panel2);color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#2a1c07;border:none}
.btn.primary:hover{box-shadow:0 8px 24px rgba(224,164,88,.35)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--panel)}
.btn.sm{padding:.42em .8em;font-size:.85rem}
.btn.lg{padding:.8em 1.5em;font-size:1.05rem}
.btn.full{width:100%;justify-content:center}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.icon-btn:hover{background:var(--panel2)} .icon-btn.sm{width:32px;height:32px}
.pill{display:inline-block;padding:.35em .8em;border-radius:999px;background:rgba(142,162,255,.12);
  color:var(--brand);font-size:.8rem;font-weight:600;margin-bottom:1rem}

/* ---------- landing ---------- */
.landing{background:radial-gradient(1200px 600px at 70% -10%,rgba(142,162,255,.18),transparent),var(--bg)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,4vw,3rem);
  max-width:1200px;margin:0 auto}
.nav nav{display:flex;gap:.6rem}
.brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.15rem;color:var(--ink)}
.brand.sm{font-size:1rem} .brand.center{justify-content:center;width:100%;margin-bottom:1rem}
.brand .ic{color:var(--accent)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;
  max-width:1200px;margin:0 auto;padding:clamp(2rem,6vw,5rem) clamp(1rem,4vw,3rem)}
.hero h1{font-family:var(--serif);font-size:clamp(2.4rem,6vw,4.2rem);font-weight:600;letter-spacing:-.02em}
.hero h1 em{color:var(--accent);font-style:italic}
.lead{font-size:clamp(1rem,2.2vw,1.18rem);color:var(--muted);max-width:38ch;margin:1.2rem 0}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.5rem 0 1rem}
.hero-art{display:flex;justify-content:center;align-items:center;min-height:340px;perspective:1400px}
/* 3d book */
.book3d{position:relative;width:230px;height:320px;transform-style:preserve-3d;
  transform:rotateY(-24deg) rotateX(6deg);animation:bookFloat 6s ease-in-out infinite}
@keyframes bookFloat{50%{transform:rotateY(-18deg) rotateX(4deg) translateY(-10px)}}
.bcover{position:absolute;inset:0;border-radius:6px 12px 12px 6px;
  background:linear-gradient(135deg,#2b3358,#141a30);box-shadow:var(--shadow);
  border-left:8px solid #0c1020;padding:26px 22px;overflow:hidden}
.btitle{font-family:var(--serif);font-size:1.5rem;color:#f0e6d2;line-height:1.1}
.bauthor{color:var(--accent2);margin-top:8px;font-size:.85rem}
.bshine{position:absolute;top:-40%;left:-30%;width:60%;height:180%;transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:shine 6s ease-in-out infinite}
@keyframes shine{0%,60%{left:-40%}80%,100%{left:120%}}
.bpage{position:absolute;top:6px;bottom:6px;right:5px;width:210px;background:var(--paper);
  border-radius:2px 6px 6px 2px;transform:translateZ(-6px)}
.bpage.p2{transform:translateZ(-11px);right:8px;filter:brightness(.96)}
.bpage.p3{transform:translateZ(-16px);right:11px;filter:brightness(.92)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem;
  max-width:1200px;margin:0 auto;padding:2rem clamp(1rem,4vw,3rem)}
.fcard{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem}
.fic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(224,164,88,.14);color:var(--accent);margin-bottom:1rem}
.fcard h3{font-size:1.15rem} .fcard p{color:var(--muted);font-size:.94rem;margin:0}
.reader-teaser{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;
  max-width:1100px;margin:2rem auto;padding:2rem clamp(1rem,4vw,3rem)}
.reader-teaser h2{font-family:var(--serif);font-size:2rem}
.teaser-book{position:relative;height:260px;background:var(--panel);border-radius:14px;overflow:hidden;
  border:1px solid var(--line);display:flex}
.tb-left,.tb-right{flex:1;margin:16px;background:var(--paper);border-radius:4px}
.tb-flip{position:absolute;top:16px;bottom:16px;left:50%;width:calc(50% - 16px);background:var(--paper);
  border-left:1px solid #ddd;transform-origin:left center;border-radius:4px;
  animation:pageFlip 3.2s ease-in-out infinite;box-shadow:-6px 0 18px rgba(0,0,0,.15)}
@keyframes pageFlip{0%,20%{transform:rotateY(0)}60%,100%{transform:rotateY(-165deg)}}
.cta-final{text-align:center;padding:4rem 1rem;max-width:640px;margin:0 auto}
.cta-final h2{font-family:var(--serif);font-size:2.4rem}
.foot{display:flex;justify-content:space-between;padding:1.5rem clamp(1rem,4vw,3rem);
  border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;gap:.5rem}

/* ---------- auth / setup ---------- */
.auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 500px at 50% -10%,rgba(142,162,255,.18),transparent),var(--bg);padding:1.5rem}
.auth-wrap{width:100%;display:flex;justify-content:center}
.auth-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}
.auth-card.wide{max-width:640px}
.auth-card h1{font-family:var(--serif);font-size:1.7rem;text-align:center;margin-top:.4rem}
.auth-card .muted{text-align:center;margin-bottom:1.4rem}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.85rem;font-weight:500}
input,select,textarea{width:100%;margin-top:.35rem;padding:.7em .85em;border-radius:10px;
  border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:.98rem;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
.check{display:flex;align-items:center;gap:.5rem;flex-direction:row}
.check input{width:auto;margin:0}
.hint{font-size:.85rem;min-height:1.1em;margin:.3rem 0}
.hint.err{color:var(--bad)} .hint.ok{color:var(--good)}
.swap{text-align:center;margin-top:1rem;color:var(--muted);font-size:.9rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.grid2 .col2{grid-column:1/-1}
.row-end{display:flex;justify-content:flex-end;gap:.7rem;margin-top:1rem}
.steps{display:flex;gap:.5rem;margin:1.2rem 0}
.step{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--soft);flex:1}
.step span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg2);border:1px solid var(--line);font-weight:700}
.step.on{color:var(--ink)} .step.on span{background:var(--accent);color:#241905;border:none}
.panel{display:none} .panel.on{display:block;animation:fade .3s}
.role-pick{border:none;padding:0;margin:.3rem 0 1rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.role-pick legend{font-size:.85rem;color:var(--muted);margin-bottom:.4rem}
.role{border:1px solid var(--line);border-radius:12px;padding:.9rem;cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.2rem;background:var(--bg2);color:var(--muted)}
.role input{display:none} .role .ri{color:var(--soft)} .role b{color:var(--ink);font-size:.95rem}
.role.on{border-color:var(--accent);background:rgba(224,164,88,.1)} .role.on .ri{color:var(--accent)}
.done{width:80px;height:80px;border-radius:50%;background:rgba(62,207,142,.15);color:var(--good);
  display:grid;place-items:center;margin:1rem auto}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.7rem;
  padding:calc(.6rem + var(--safe-t)) clamp(.8rem,3vw,1.4rem) .6rem;background:rgba(15,18,32,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.spacer{flex:1}
.proj-switch{display:flex;align-items:center;gap:.4rem;background:var(--panel);border:1px solid var(--line);
  color:var(--ink);border-radius:10px;padding:.45em .8em;font-weight:600;cursor:pointer;max-width:40vw}
.proj-switch span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-pill{font-size:.82rem;color:var(--muted);background:var(--panel);border:1px solid var(--line);
  padding:.4em .8em;border-radius:999px;white-space:nowrap}
.avatar{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;font-weight:700;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.usermenu{position:relative}
.menu{position:absolute;right:0;top:46px;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);min-width:210px;padding:.4rem;z-index:50}
.menu a,.menu button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.6em .7em;border-radius:8px;background:none;border:none;color:var(--ink);cursor:pointer;font-size:.92rem}
.menu a:hover,.menu button:hover{background:var(--panel)}
.mu-head{padding:.6em .7em;border-bottom:1px solid var(--line);margin-bottom:.3rem}
.mu-head b{display:block} .mu-head small{color:var(--muted)}
.admin-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(224,164,88,.15);
  color:var(--accent);padding:.35em .7em;border-radius:999px;font-size:.85rem;font-weight:600}
.only-mobile{display:none}

/* ---------- dashboard ---------- */
.dashboard{max-width:1100px;margin:0 auto;padding:2rem clamp(1rem,4vw,2rem)}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.dash-head h1{font-family:var(--serif);font-size:2rem}
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem}
.shared-h{font-family:var(--serif);margin:2rem 0 1rem}
.work-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:.16s;display:flex;flex-direction:column}
.work-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.wc-cover{height:120px;background:linear-gradient(135deg,var(--brand2),#3a2b6b);position:relative;
  display:flex;align-items:flex-end;padding:.8rem}
.wc-cover .kind{position:absolute;top:.6rem;left:.6rem;font-size:.72rem;background:rgba(0,0,0,.35);
  padding:.2em .6em;border-radius:999px;text-transform:capitalize}
.wc-body{padding:.9rem 1rem 1rem}
.wc-body h3{font-family:var(--serif);font-size:1.15rem;margin:0 0 .2rem}
.wc-meta{display:flex;gap:.6rem;color:var(--muted);font-size:.8rem;margin-top:.5rem;flex-wrap:wrap}
.badge{font-size:.7rem;padding:.15em .55em;border-radius:999px;font-weight:600}
.badge.writing{background:rgba(240,166,62,.16);color:var(--warn)}
.badge.review{background:rgba(142,162,255,.16);color:var(--brand)}
.badge.finished{background:rgba(62,207,142,.16);color:var(--good)}
.badge.draft{background:var(--panel2);color:var(--muted)}
.work-card.new{align-items:center;justify-content:center;border-style:dashed;min-height:210px;
  color:var(--muted);gap:.5rem;font-weight:600}
.work-card.new:hover{color:var(--accent)}

/* ---------- studio ---------- */
.studio-grid{display:grid;grid-template-columns:260px 1fr 320px;height:calc(100vh - 58px - var(--safe-t));overflow:hidden}
.tree-panel{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.tp-head{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1rem;
  font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.chapter-tree{flex:1;overflow-y:auto;padding:0 .5rem 1rem}
.tp-foot{padding:.6rem;border-top:1px solid var(--line)}
.mini{background:none;border:none;color:var(--muted);display:flex;align-items:center;gap:.4rem;
  padding:.5em .6em;cursor:pointer;font-size:.9rem;width:100%;border-radius:8px}
.mini:hover{background:var(--panel);color:var(--ink)}
.ch-node{border-radius:10px;margin-bottom:.2rem}
.ch-row{display:flex;align-items:center;gap:.5rem;padding:.55em .6em;cursor:pointer;border-radius:10px}
.ch-row:hover{background:var(--panel)} .ch-node.active>.ch-row{background:var(--panel2)}
.ch-dot{width:9px;height:9px;border-radius:50%;flex:none}
.ch-dot.brief{background:var(--soft)} .ch-dot.edited{background:var(--warn)}
.ch-dot.approved{background:var(--brand)} .ch-dot.finish{background:var(--good)}
.ch-num{color:var(--soft);font-size:.8rem;min-width:1.2em}
.ch-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem}
.ch-sub{padding:.25em .6em .25em 2.2em;color:var(--muted);font-size:.82rem;cursor:default;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-sub.h2{padding-left:3.2em}

.editor-col{display:flex;flex-direction:column;overflow:hidden;background:#12152400}
.ed-toolbar{padding:.7rem 1rem .5rem;border-bottom:1px solid var(--line);background:var(--bg)}
.ch-title{font-family:var(--serif);font-size:1.3rem;font-weight:600;border:none;background:none;
  padding:0;margin:0 0 .5rem;color:var(--ink)}
.ch-title:focus{outline:none}
.tb-tools{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.tb-group{display:flex;gap:.1rem;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:.15rem}
.tb-group button{min-width:32px;height:30px;border:none;background:none;color:var(--muted);cursor:pointer;
  border-radius:6px;font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center}
.tb-group button:hover{background:var(--panel2);color:var(--ink)}
.tb-group button.on{background:var(--accent);color:#241905}
.status-tag{font-size:.78rem;padding:.3em .7em;border-radius:999px;background:var(--panel);
  border:1px solid var(--line);cursor:pointer;color:var(--muted)}
.save-tag{font-size:.78rem;color:var(--soft);margin-left:auto}
.paper-wrap{flex:1;overflow-y:auto;padding:2rem clamp(1rem,4vw,3rem);display:flex;justify-content:center}
.paper{background:var(--paper);color:var(--paper-ink);width:100%;max-width:720px;min-height:100%;
  border-radius:8px;padding:clamp(1.5rem,4vw,3.5rem);font-family:var(--serif);font-size:1.08rem;
  line-height:1.7;box-shadow:0 4px 30px rgba(0,0,0,.25)}
.paper:focus{outline:none}
.paper h1{font-size:1.9rem;margin:0 0 .6rem} .paper h2{font-size:1.4rem;margin:1.4rem 0 .5rem}
.paper h3{font-size:1.15rem;margin:1.1rem 0 .4rem}
.paper p{margin:0 0 1rem} .paper blockquote{border-left:3px solid var(--accent);margin:1rem 0;
  padding:.3rem 0 .3rem 1.2rem;color:#555;font-style:italic}
.paper figure{margin:1.2rem 0;text-align:center} .paper figure img{max-width:100%;border-radius:6px}
.paper figcaption{font-size:.85rem;color:#777;font-style:italic;margin-top:.4rem}
.paper ul,.paper ol{padding-left:1.4rem;margin:0 0 1rem}
.paper sup.cite{color:#a06a12;font-weight:600;cursor:pointer;font-size:.7em}
.paper code{background:#efe9dd;padding:.1em .3em;border-radius:4px;font-size:.85em}
.predict-bar{display:flex;gap:.4rem;padding:.5rem 1rem;border-top:1px solid var(--line);
  background:var(--bg);overflow-x:auto}
.predict-bar button{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.3em .7em;font-size:.88rem;white-space:nowrap;cursor:pointer}
.predict-bar button:first-child{border-color:var(--accent);color:var(--accent)}

/* right side panel */
.side-panel{background:var(--bg2);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.panel-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--line);padding:.4rem}
.panel-tabs button{flex:none;display:flex;flex-direction:column;align-items:center;gap:.2rem;
  background:none;border:none;color:var(--soft);cursor:pointer;padding:.5em .6em;border-radius:9px;font-size:.68rem}
.panel-tabs button span{white-space:nowrap}
.panel-tabs button.on{color:var(--accent);background:var(--panel)}
.panel-body{flex:1;overflow-y:auto;padding:1rem}
.panel-body h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:1.2rem 0 .6rem}
.panel-body h3:first-child{margin-top:0}

/* stat cards */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem}
.stat b{font-size:1.5rem;font-family:var(--serif)} .stat span{display:block;color:var(--muted);font-size:.78rem}
.status-bars{display:flex;flex-direction:column;gap:.5rem}
.sb{display:flex;align-items:center;gap:.6rem;font-size:.85rem}
.sb .bar{flex:1;height:8px;border-radius:999px;background:var(--panel2);overflow:hidden}
.sb .bar i{display:block;height:100%}

/* list items (comments/sources/versions) */
.item{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem;margin-bottom:.7rem}
.item .meta{display:flex;justify-content:space-between;color:var(--soft);font-size:.76rem;margin-bottom:.35rem}
.item .who{color:var(--brand);font-weight:600}
.item.review{border-left:3px solid var(--brand)}
.item .actions{display:flex;gap:.4rem;margin-top:.5rem}
.item .actions button{font-size:.78rem;padding:.3em .6em;border-radius:7px;border:1px solid var(--line);
  background:var(--bg2);color:var(--muted);cursor:pointer}
.field{margin-bottom:.7rem}
.mini-form textarea{min-height:70px;resize:vertical}
.share-item{word-break:break-all}
.share-item .lnk{font-size:.82rem;color:var(--brand);background:var(--bg2);padding:.4em .6em;
  border-radius:8px;display:block;margin:.4rem 0}
.empty{color:var(--soft);text-align:center;padding:2rem 1rem;font-size:.9rem}

/* AI */
.ai-issue{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;margin-bottom:.5rem}
.ai-issue .type{font-size:.68rem;text-transform:uppercase;color:var(--accent);letter-spacing:.05em}
.ai-issue .chg{font-family:var(--serif);margin:.2rem 0}
.ai-issue .chg del{color:var(--bad);text-decoration:line-through} .ai-issue .chg ins{color:var(--good);text-decoration:none}
.ai-issue .why{font-size:.8rem;color:var(--muted)}
.ai-issue button{margin-top:.4rem}

/* ---------- admin ---------- */
.admin-wrap{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 58px)}
.admin-nav{background:var(--bg2);border-right:1px solid var(--line);padding:1rem .6rem}
.admin-nav button,.admin-nav a.nav-link{display:flex;align-items:center;gap:.6rem;width:100%;background:none;border:none;
  color:var(--muted);padding:.7em .8em;border-radius:10px;cursor:pointer;font-size:.95rem;margin-bottom:.2rem;text-decoration:none}
.admin-nav button.on,.admin-nav button:hover,.admin-nav a.nav-link:hover{background:var(--panel);color:var(--ink)}
.admin-nav a.nav-link{margin-top:.4rem;border-top:1px solid var(--line);border-radius:0 0 10px 10px;color:var(--accent)}
.admin-main{padding:2rem clamp(1rem,3vw,2.5rem);overflow-x:hidden}
.admin-main h1{font-family:var(--serif);font-size:1.8rem;margin-bottom:1.2rem}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
.kpi{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem}
.kpi b{font-size:2.2rem;font-family:var(--serif);display:block}
.kpi .lbl{color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:.4rem;margin-top:.3rem}
.kpi .lbl .ic{color:var(--accent)}
.panel-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;margin-bottom:1.3rem}
.trend{display:flex;align-items:flex-end;gap:4px;height:90px;margin-top:.6rem}
.trend .col{flex:1;background:linear-gradient(180deg,var(--brand),var(--brand2));border-radius:4px 4px 0 0;min-height:3px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
th,td{text-align:left;padding:.75em 1em;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:none}
.tag{font-size:.72rem;padding:.2em .6em;border-radius:999px;font-weight:600}
.tag.admin{background:rgba(224,164,88,.16);color:var(--accent)}
.tag.author{background:rgba(142,162,255,.16);color:var(--brand)}
.tag.expert{background:rgba(62,207,142,.16);color:var(--good)}
.tag.active{background:rgba(62,207,142,.16);color:var(--good)}
.tag.pending{background:rgba(240,166,62,.16);color:var(--warn)}
.tag.suspended{background:rgba(242,105,107,.16);color:var(--bad)}
.rowbtns{display:flex;gap:.35rem;flex-wrap:wrap}
.rowbtns button{font-size:.76rem;padding:.3em .55em;border-radius:7px;border:1px solid var(--line);
  background:var(--bg2);color:var(--muted);cursor:pointer}
.rowbtns button:hover{color:var(--ink)}
.searchbar{display:flex;gap:.6rem;margin-bottom:1rem;max-width:360px}
.searchbar input{margin:0}

/* ---------- reader ---------- */
.reader{background:#20242e}
.reader-root{min-height:100vh;display:flex;flex-direction:column}
.reader-loading{margin:auto;text-align:center;color:var(--muted)}
.spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.r-gate{margin:auto;max-width:380px;width:90%;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:2rem;text-align:center}
.r-topbar{display:flex;align-items:center;gap:1rem;padding:calc(.7rem + var(--safe-t)) 1rem .7rem;
  color:#e8eaf3;background:rgba(0,0,0,.25)}
.r-topbar .rt-title{font-family:var(--serif);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:1rem;perspective:2400px;overflow:hidden}
.r-book{position:relative;display:flex;background:var(--paper);border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  max-width:min(94vw,1000px);width:100%}
.r-page{width:50%;padding:clamp(1.4rem,3.5vw,2.6rem);font-family:var(--serif);color:var(--paper-ink);
  min-height:64vh;font-size:clamp(.95rem,1.6vw,1.05rem);line-height:1.65;overflow:hidden;position:relative}
.r-page.single{width:100%}
.r-page h1{font-size:1.5rem} .r-page h2{font-size:1.2rem} .r-page figure img{max-width:100%}
.r-page .pg-num{position:absolute;bottom:.8rem;left:0;right:0;text-align:center;color:#999;font-size:.75rem}
.r-book .spine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-1px);
  background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.03),rgba(0,0,0,.12))}
.r-flip{position:absolute;top:0;bottom:0;width:50%;background:var(--paper);transform-origin:left center;
  backface-visibility:hidden;transition:transform .6s ease;box-shadow:0 0 30px rgba(0,0,0,.2);z-index:5}
.r-flip.right{left:50%} .r-flip.flipping{transform:rotateY(-170deg)}
.r-nav{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1rem}
.r-nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center}
.r-nav button:disabled{opacity:.35}
.r-progress{color:#cbd0e6;font-size:.85rem;min-width:80px;text-align:center}

/* ---------- modal / toast ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(6,8,16,.6);backdrop-filter:blur(3px);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:1rem;animation:fade .2s}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal.wide{max-width:640px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.modal-head h2{font-family:var(--serif);font-size:1.3rem;margin:0}
.modal-body{padding:1.4rem} .modal-foot{padding:1rem 1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;gap:.7rem}
.kind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.4rem 0 1rem}
.kind-opt{border:1px solid var(--line);border-radius:10px;padding:.7rem .5rem;text-align:center;cursor:pointer;
  font-size:.85rem;color:var(--muted);background:var(--bg2)}
.kind-opt.on{border-color:var(--accent);color:var(--ink);background:rgba(224,164,88,.1)}
.toast{position:fixed;bottom:calc(1.2rem + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:.7em 1.2em;border-radius:999px;
  z-index:200;box-shadow:var(--shadow);font-size:.9rem;max-width:90vw}
.toast.err{border-color:var(--bad);color:var(--bad)}
.toast.ok{border-color:var(--good)}

/* ---------- generic ---------- */
.narrow{max-width:560px;margin:3rem auto;padding:0 1rem}
.card.pad{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;text-align:center}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:29;display:none}
.scrim.on{display:block}

/* ================= responsive: iPad first, then phones ================= */
@media (max-width:1080px){
  .studio-grid{grid-template-columns:230px 1fr 300px}
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-art{order:-1;min-height:260px}.lead{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .reader-teaser{grid-template-columns:1fr}
}
/* iPad portrait & below: collapse side panels into drawers */
@media (max-width:900px){
  .only-mobile{display:inline-flex}
  .studio-grid{grid-template-columns:1fr}
  .tree-panel,.side-panel{position:fixed;top:0;bottom:0;z-index:60;width:min(84vw,320px);
    transition:transform .25s ease;box-shadow:var(--shadow)}
  .tree-panel{left:0;transform:translateX(-105%)}
  .side-panel{right:0;transform:translateX(105%);width:min(88vw,360px)}
  .tree-panel.open{transform:none}.side-panel.open{transform:none}
  .r-book{max-width:96vw}
  .r-page.dual{width:100%}  /* single page on narrow screens handled in JS */
  .admin-wrap{grid-template-columns:1fr}
  .admin-nav{display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);padding:.5rem}
  .admin-nav button{flex:none;flex-direction:column;font-size:.72rem;gap:.2rem}
}
@media (max-width:560px){
  .hide-xs{display:none}
  .proj-switch{max-width:42vw}
  .dash-head h1{font-size:1.5rem}
  .works-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .wc-cover{height:90px}
  .stat-row{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr} .role-pick{grid-template-columns:1fr}
  .kind-grid{grid-template-columns:1fr 1fr}
  .paper-wrap{padding:1rem .5rem}
  .r-nav{gap:1rem}
}
@media (max-width:380px){ .works-grid{grid-template-columns:1fr} }