/* ============================================================
   LIBROOS App Prototype — "Ink & Brass" product UI
   ============================================================ */
:root{
  --ink:#0B0E14; --ink-2:#11151D; --ink-3:#181D28; --ink-4:#212836; --ink-5:#2A3242;
  --ivory:#F5F1E8;
  --brass:#C8A24B; --brass-soft:#D9BC77; --brass-dim:rgba(200,162,75,.13);
  --teal:#3FB8AF; --coral:#E2725B; --violet:#8B7EC8;
  --txt:#E8E4DA; --txt-dim:#9AA0AC; --txt-faint:#5E6673;
  --line:rgba(232,228,218,.09); --line-strong:rgba(232,228,218,.18);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
  --r:12px; --r-sm:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--ink);color:var(--txt);font-family:var(--sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh}
::selection{background:var(--brass);color:#0B0E14}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:5px}
button{font-family:var(--sans);cursor:pointer}
input,select,textarea{font-family:var(--sans);color:var(--txt);background:var(--ink-3);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:9px 12px;font-size:13.5px;outline:none;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--brass)}
textarea{resize:vertical;line-height:1.7}

/* ---------- App shell ---------- */
#app-shell{display:grid;grid-template-columns:230px 1fr;height:100vh}
@media(max-width:960px){#app-shell{grid-template-columns:64px 1fr}.side-label,.side-sub,.proj-nav h6{display:none!important}.brand-name-s{display:none}}

/* ---------- Sidebar ---------- */
#app-side{background:var(--ink-2);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.side-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brass),#8a6a25);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:18px;color:#0B0E14;flex-shrink:0}
.brand-name-s{font-family:var(--serif);font-size:17px;letter-spacing:2.5px}
.side-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);color:var(--txt-dim);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .18s;text-decoration:none;margin-bottom:2px}
.side-item i{width:18px;text-align:center;font-size:14px}
.side-item:hover{color:var(--txt);background:var(--ink-3)}
.side-item.active{color:var(--brass-soft);background:var(--brass-dim);border-color:rgba(200,162,75,.22)}
.proj-nav{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.proj-nav h6{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--txt-faint);margin:0 0 8px 10px}
.side-item .step-state{margin-left:auto;font-size:9px}
.step-state.done{color:var(--teal)}.step-state.now{color:var(--brass)}.step-state.todo{color:var(--txt-faint)}
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}

/* ---------- Main ---------- */
#app-main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
#topbar{display:flex;align-items:center;gap:14px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--ink-2);flex-shrink:0}
#topbar .crumb{font-size:13px;color:var(--txt-dim)}
#topbar .crumb b{color:var(--txt);font-weight:600}
#topbar .crumb .sep{margin:0 8px;color:var(--txt-faint)}
.top-actions{margin-left:auto;display:flex;gap:9px;align-items:center}
#view{flex:1;overflow-y:auto;padding:28px;min-height:0}
.view-inner{max-width:1200px;margin:0 auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;border:1px solid var(--line-strong);background:var(--ink-3);color:var(--txt);transition:all .18s;text-decoration:none}
.btn:hover{border-color:var(--brass);color:var(--brass-soft)}
.btn.primary{background:linear-gradient(135deg,var(--brass),#a8863a);border-color:transparent;color:#0B0E14}
.btn.primary:hover{filter:brightness(1.1);color:#0B0E14}
.btn.ghost{background:transparent;border-color:transparent;color:var(--txt-dim)}
.btn.ghost:hover{color:var(--txt);border-color:var(--line-strong)}
.btn.sm{padding:6px 12px;font-size:12px}
.btn.ai{background:rgba(139,126,200,.12);border-color:rgba(139,126,200,.4);color:var(--violet)}
.btn.ai:hover{background:rgba(139,126,200,.2);color:#A99EDB}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.danger{border-color:rgba(226,114,91,.4);color:var(--coral)}

/* ---------- Page headers ---------- */
.page-head{margin-bottom:24px}
.page-head h1{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.3px}
.page-head p{color:var(--txt-dim);font-size:14px;margin-top:4px}
.page-head .head-row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head .head-row>div:first-child{flex:1;min-width:240px}

/* ---------- Library ---------- */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.book-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .22s;position:relative}
.book-card:hover{border-color:rgba(200,162,75,.4);transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.bc-cover{height:150px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.bc-cover .mini-book{width:86px;height:122px;border-radius:3px 7px 7px 3px;box-shadow:6px 8px 22px rgba(0,0,0,.5), inset 3px 0 6px rgba(255,255,255,.12);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px;text-align:center}
.mini-book .mb-t{font-family:var(--serif);font-weight:700;font-size:10.5px;line-height:1.25}
.mini-book .mb-a{font-size:6.5px;letter-spacing:1.2px;text-transform:uppercase;margin-top:7px;opacity:.85}
.bc-body{padding:14px 16px;border-top:1px solid var(--line)}
.bc-body h4{font-size:14px;font-weight:600;margin-bottom:2px}
.bc-body .bc-type{font-size:11px;color:var(--txt-faint);text-transform:uppercase;letter-spacing:1px}
.bc-progress{display:flex;gap:3px;margin-top:11px}
.bc-progress span{flex:1;height:3.5px;border-radius:2px;background:var(--ink-4)}
.bc-progress span.on{background:var(--brass)}
.bc-progress span.doing{background:var(--violet);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4}}
.bc-status{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;letter-spacing:.6px;padding:3px 9px;border-radius:100px;backdrop-filter:blur(6px)}
.new-card{border:1.5px dashed var(--line-strong);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--txt-faint);cursor:pointer;min-height:230px;transition:all .2s;background:transparent}
.new-card:hover{border-color:var(--brass);color:var(--brass-soft)}
.new-card i{font-size:26px}

/* ---------- Wizard ---------- */
.wizard{max-width:860px;margin:0 auto}
.wiz-steps{display:flex;gap:8px;margin-bottom:30px}
.wiz-steps span{flex:1;height:4px;border-radius:2px;background:var(--ink-4)}
.wiz-steps span.on{background:var(--brass)}
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.type-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:18px 14px;text-align:center;cursor:pointer;transition:all .18s}
.type-card:hover{border-color:var(--line-strong)}
.type-card.sel{border-color:var(--brass);background:var(--brass-dim)}
.type-card .tc-i{font-size:23px;margin-bottom:9px}
.type-card b{display:block;font-size:13px;margin-bottom:3px}
.type-card span{font-size:10.5px;color:var(--txt-faint)}
.form-row{display:grid;gap:16px;margin-bottom:16px}
.form-row.c2{grid-template-columns:1fr 1fr}
@media(max-width:640px){.form-row.c2{grid-template-columns:1fr}}
.field label{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt-faint);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{width:100%}
.wiz-actions{display:flex;justify-content:space-between;margin-top:30px}

/* ---------- Panels ---------- */
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:18px}
.panel h3{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:14px}
.panel h3 .h-sub{font-family:var(--sans);font-size:11.5px;color:var(--txt-faint);font-weight:400;margin-left:10px}
.split{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}}

/* agent chip */
.agent-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:100px;background:rgba(139,126,200,.1);border:1px solid rgba(139,126,200,.35);font-size:11.5px;color:var(--violet);font-weight:600}
.agent-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--violet)}
.agent-chip.working .dot{animation:pulse 1.2s infinite}
.agent-chip.gold{background:var(--brass-dim);border-color:rgba(200,162,75,.35);color:var(--brass-soft)}
.agent-chip.gold .dot{background:var(--brass)}
.agent-chip.teal{background:rgba(63,184,175,.1);border-color:rgba(63,184,175,.35);color:var(--teal)}
.agent-chip.teal .dot{background:var(--teal)}

/* ---------- Strategy chat ---------- */
.chat-box{display:flex;flex-direction:column;gap:14px;max-height:430px;overflow-y:auto;padding:4px 2px;margin-bottom:16px}
.msg{display:flex;gap:12px;max-width:92%}
.msg .avatar{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px}
.msg.agent .avatar{background:rgba(139,126,200,.15);color:var(--violet);border:1px solid rgba(139,126,200,.3)}
.msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg.user .avatar{background:var(--brass-dim);color:var(--brass-soft);border:1px solid rgba(200,162,75,.3)}
.msg .bubble{background:var(--ink-3);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:13.5px;color:var(--txt-dim)}
.msg.user .bubble{background:var(--brass-dim);border-color:rgba(200,162,75,.25);color:var(--txt)}
.msg .bubble b{color:var(--txt)}
.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.brief-grid{grid-template-columns:1fr}}
.brief-item{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px}
.brief-item label{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--brass-soft);font-weight:700;display:block;margin-bottom:5px}
.brief-item div{font-size:13px;color:var(--txt-dim)}

/* ---------- Manuscript ---------- */
.ms-layout{display:grid;grid-template-columns:230px 1fr 280px;gap:16px;align-items:start}
@media(max-width:1100px){.ms-layout{grid-template-columns:1fr}.ms-outline{order:1}.ms-editor{order:2}.ms-copilot{order:3}}
.ms-outline,.ms-copilot{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.ms-outline h4,.ms-copilot h4{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--txt-faint);margin-bottom:12px;font-weight:700}
.ch-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);font-size:12.5px;color:var(--txt-dim);cursor:pointer;border:1px solid transparent;margin-bottom:3px}
.ch-item:hover{background:var(--ink-3)}
.ch-item.sel{background:var(--brass-dim);border-color:rgba(200,162,75,.25);color:var(--brass-soft)}
.ch-item .st{margin-left:auto;font-size:10px}
.ch-item .st.done{color:var(--teal)}.ch-item .st.wip{color:var(--violet)}.ch-item .st.todo{color:var(--txt-faint)}
.ms-editor{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);min-height:520px;display:flex;flex-direction:column}
.ms-toolbar{display:flex;gap:6px;padding:11px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center}
.ms-body{flex:1;padding:30px 40px;font-family:var(--serif);font-size:16px;line-height:1.95;color:var(--txt);overflow-y:auto;max-height:560px;outline:none}
.ms-body h2{font-size:26px;margin-bottom:18px;font-weight:600}
.ms-body p{margin-bottom:16px;color:var(--txt-dim);text-align:justify}
.ms-body p:first-of-type::first-letter{font-size:2.6em;float:left;line-height:.85;padding-right:8px;color:var(--brass-soft);font-weight:600}
.ms-stats{padding:10px 16px;border-top:1px solid var(--line);display:flex;gap:18px;font-size:11.5px;color:var(--txt-faint);font-family:var(--mono)}
.copilot-card{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:10px;font-size:12.5px;color:var(--txt-dim)}
.copilot-card b{display:block;color:var(--txt);font-size:12px;margin-bottom:3px}
.copilot-card.warn{border-left:3px solid var(--brass)}
.copilot-card.ok{border-left:3px solid var(--teal)}
.typing::after{content:"▊";color:var(--violet);animation:pulse .8s infinite}

/* ---------- Layout engine ---------- */
.trim-grid{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.trim-opt{border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:10px 14px;cursor:pointer;text-align:center;transition:all .18s;background:var(--ink-3)}
.trim-opt:hover{border-color:var(--brass)}
.trim-opt.sel{border-color:var(--brass);background:var(--brass-dim)}
.trim-opt b{display:block;font-family:var(--mono);font-size:13px}
.trim-opt span{font-size:10px;color:var(--txt-faint)}
.page-preview{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;gap:6px;justify-content:center;align-items:center;min-height:420px}
.pg{background:var(--ivory);color:#2A2620;position:relative;box-shadow:0 10px 34px rgba(0,0,0,.5);overflow:hidden}
.pg .bleed-guide{position:absolute;inset:0;border:1.5px dashed rgba(226,114,91,.55);pointer-events:none}
.pg .margin-guide{position:absolute;border:1px dashed rgba(63,184,175,.6);pointer-events:none}
.pg .pg-content{position:absolute;font-family:var(--serif);color:#33302A;overflow:hidden}
.pg .pg-content h5{font-size:9px;text-align:center;letter-spacing:1px;margin-bottom:6px;font-weight:600}
.pg .pg-line{height:2.6px;background:#B5AD9C;border-radius:2px;margin-bottom:3.4px}
.pg .folio{position:absolute;bottom:4px;width:100%;text-align:center;font-size:6px;color:#8A8272;font-family:var(--serif)}
.spec-readout{font-family:var(--mono);font-size:12px;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;line-height:2;color:var(--txt-dim)}
.spec-readout b{color:var(--teal)}
.spec-readout .lbl{color:var(--txt-faint)}

/* ---------- Cover studio ---------- */
.cover-stage{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:34px;display:flex;justify-content:center;align-items:center;min-height:460px;overflow-x:auto}
.cover-print{display:flex;box-shadow:0 18px 50px rgba(0,0,0,.55);position:relative}
.cov-panel{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden}
.cov-front .cv-title{font-family:var(--serif);font-weight:700;line-height:1.1;padding:0 14px}
.cov-front .cv-sub{font-size:9px;letter-spacing:1px;opacity:.85;margin-top:8px;padding:0 16px}
.cov-front .cv-author{position:absolute;bottom:16px;width:100%;font-size:8.5px;letter-spacing:2.4px;text-transform:uppercase;opacity:.9}
.cov-spine{writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:9px;letter-spacing:1.6px;border-left:1px solid rgba(0,0,0,.22);border-right:1px solid rgba(0,0,0,.22)}
.cov-back{font-size:7.5px;line-height:1.65;padding:20px 16px;justify-content:flex-start;text-align:left;opacity:.95}
.cov-back .bc-syn{margin-bottom:auto}
.cov-back .isbn-zone{align-self:flex-end;background:#fff;color:#111;font-size:6px;padding:5px 8px;border-radius:2px;font-family:var(--mono);text-align:center;line-height:1.4}
.variant-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.variant{border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;position:relative;transition:all .18s}
.variant:hover{transform:translateY(-2px)}
.variant.sel{border-color:var(--brass)}
.variant .v-cover{height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12px}
.variant .v-cover b{font-family:var(--serif);font-size:11px;line-height:1.2}
.variant .v-cover span{font-size:6px;letter-spacing:1.5px;text-transform:uppercase;margin-top:8px;opacity:.85}
.variant .v-score{position:absolute;top:6px;right:6px;background:rgba(11,14,20,.78);backdrop-filter:blur(4px);border-radius:6px;font-size:10px;padding:2px 7px;color:var(--brass-soft);font-family:var(--mono)}
.slider-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.slider-row label{font-size:11px;color:var(--txt-faint);min-width:110px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.slider-row input[type=range]{flex:1;accent-color:#C8A24B;padding:0;background:transparent;border:none}
.slider-row .val{font-family:var(--mono);font-size:11.5px;color:var(--teal);min-width:64px;text-align:right}

/* ---------- Metadata ---------- */
.kw-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.kw{background:var(--ink-3);border:1px solid var(--line-strong);border-radius:100px;padding:6px 14px;font-size:12.5px;color:var(--txt-dim);display:flex;gap:8px;align-items:center}
.kw .score{font-family:var(--mono);font-size:10px;color:var(--teal)}
.desc-preview{background:var(--ivory);color:#22201B;border-radius:var(--r-sm);padding:22px 26px;font-size:13.5px;line-height:1.75}
.desc-preview h4{font-family:var(--serif);font-size:17px;margin-bottom:9px;color:#1A1812}
.desc-preview ul{margin:10px 0 10px 20px}

/* ---------- Preflight ---------- */
.check-list{display:flex;flex-direction:column;gap:9px}
.check{display:flex;align-items:flex-start;gap:13px;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 16px;opacity:0;transform:translateX(-8px);animation:checkin .4s forwards}
@keyframes checkin{to{opacity:1;transform:none}}
.check .ck-i{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.check.pass .ck-i{background:rgba(63,184,175,.14);color:var(--teal)}
.check.warn .ck-i{background:var(--brass-dim);color:var(--brass-soft)}
.check.fail .ck-i{background:rgba(226,114,91,.14);color:var(--coral)}
.check b{font-size:13px;display:block}
.check p{font-size:11.5px;color:var(--txt-faint);margin:2px 0 0}
.check .fix{margin-left:auto;flex-shrink:0}
.gate-banner{display:flex;align-items:center;gap:14px;border-radius:var(--r);padding:18px 22px;margin-bottom:18px;font-size:14px}
.gate-banner.locked{background:rgba(226,114,91,.08);border:1px solid rgba(226,114,91,.35);color:var(--coral)}
.gate-banner.open{background:rgba(63,184,175,.08);border:1px solid rgba(63,184,175,.35);color:var(--teal)}
.gate-banner i{font-size:20px}
.score-ring{width:86px;height:86px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:19px;font-weight:600;flex-shrink:0}

/* ---------- Export ---------- */
.exp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.exp-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:border-color .2s}
.exp-card:hover{border-color:rgba(200,162,75,.35)}
.exp-card .ei{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:13px;background:var(--brass-dim);color:var(--brass-soft);border:1px solid rgba(200,162,75,.25)}
.exp-card h5{font-size:14px;margin-bottom:4px}
.exp-card p{font-size:11.5px;color:var(--txt-faint);margin-bottom:13px}
.exp-card .fmt{font-family:var(--mono);font-size:10px;color:var(--teal)}
.progress-bar{height:5px;border-radius:3px;background:var(--ink-4);overflow:hidden;margin:10px 0 6px}
.progress-bar div{height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-soft));border-radius:3px;transition:width .3s}
.manifest{font-family:var(--mono);font-size:11.5px;background:#080A0F;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;line-height:1.9;color:#8FA0B5}
.manifest .ok{color:var(--teal)}.manifest .gold{color:var(--brass-soft)}

/* ---------- Toast ---------- */
#toast-wrap{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;gap:9px}
.toast{background:var(--ink-3);border:1px solid var(--line-strong);border-left:3px solid var(--brass);border-radius:10px;padding:13px 18px;font-size:13px;box-shadow:0 12px 34px rgba(0,0,0,.5);animation:toastin .3s;display:flex;gap:10px;align-items:center;max-width:340px}
@keyframes toastin{from{opacity:0;transform:translateY(12px)}}
.toast i{color:var(--brass-soft)}
.toast.teal{border-left-color:var(--teal)}.toast.teal i{color:var(--teal)}
.toast.violet{border-left-color:var(--violet)}.toast.violet i{color:var(--violet)}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(5,7,11,.72);backdrop-filter:blur(4px);z-index:150;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--ink-2);border:1px solid var(--line-strong);border-radius:16px;max-width:640px;width:100%;max-height:86vh;overflow-y:auto;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal h3{font-family:var(--serif);font-size:22px;margin-bottom:6px}
.modal .m-sub{color:var(--txt-dim);font-size:13px;margin-bottom:20px}

.empty-state{text-align:center;padding:70px 20px;color:var(--txt-faint)}
.empty-state i{font-size:40px;margin-bottom:16px;opacity:.5}
.tag-mini{display:inline-block;padding:2px 9px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.5px}

/* ============================================================
   PREMIUM UPGRADE — glass, glow, depth
   ============================================================ */

/* Topbar chips */
#hermes-chip{display:none;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--violet);background:rgba(139,126,200,.1);border:1px solid rgba(139,126,200,.32);border-radius:100px;padding:6px 14px;letter-spacing:.3px}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 0 rgba(139,126,200,.55);animation:pdot 1.8s infinite}
@keyframes pdot{70%{box-shadow:0 0 0 8px rgba(139,126,200,0)}100%{box-shadow:0 0 0 0 rgba(139,126,200,0)}}
.avatar-chip{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--brass),#8a6a25);color:#0B0E14;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 0 0 2px var(--ink-2),0 0 0 3.5px rgba(200,162,75,.35)}

/* Ambient depth */
#app-main{position:relative;background:
  radial-gradient(1100px 500px at 85% -10%, rgba(200,162,75,.05), transparent 60%),
  radial-gradient(900px 600px at -10% 110%, rgba(139,126,200,.05), transparent 60%),
  var(--ink)}
#app-side{background:linear-gradient(180deg,#12161F 0%,#0E1219 100%)}
.side-mark{box-shadow:0 6px 18px rgba(200,162,75,.28), inset 0 1px 0 rgba(255,255,255,.25)}

/* Panels → glass */
.panel{position:relative;background:linear-gradient(165deg,rgba(24,29,40,.92),rgba(17,21,29,.96));backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035)}
.panel:hover{border-color:var(--line-strong)}
.panel-glow{border-color:rgba(200,162,75,.3);box-shadow:0 18px 44px rgba(0,0,0,.32), 0 0 34px rgba(200,162,75,.07), inset 0 1px 0 rgba(255,255,255,.05)}

/* Buttons premium */
.btn.primary{box-shadow:0 6px 20px rgba(200,162,75,.3), inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ai{box-shadow:0 4px 16px rgba(139,126,200,.16)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);transform:translateX(-120%);transition:transform .5s;pointer-events:none}
.btn:hover::after{transform:translateX(120%)}

/* Book cards premium */
.book-card{background:linear-gradient(170deg,rgba(24,29,40,.95),rgba(15,19,26,.98));box-shadow:0 14px 38px rgba(0,0,0,.35)}
.book-card:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(200,162,75,.28)}
.mini-book{box-shadow:8px 10px 26px rgba(0,0,0,.55), inset -3px 0 8px rgba(0,0,0,.35), inset 1px 0 0 rgba(255,255,255,.14)}

/* Templates gallery */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px;margin-top:6px}
.tpl-card{background:linear-gradient(170deg,rgba(24,29,40,.95),rgba(15,19,26,.98));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:all .25s;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.tpl-card:hover{transform:translateY(-5px);border-color:rgba(200,162,75,.32);box-shadow:0 24px 54px rgba(0,0,0,.48),0 0 26px rgba(200,162,75,.06)}
.tpl-cover{height:130px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;position:relative;box-shadow:inset 0 -30px 40px rgba(0,0,0,.25)}
.tpl-icon{font-size:38px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.tpl-trim{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:1.5px;background:rgba(0,0,0,.3);padding:3px 10px;border-radius:100px;backdrop-filter:blur(3px)}
.tpl-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.tpl-body h4{font-family:var(--serif);font-size:16.5px;font-weight:600}
.tpl-body p{font-size:12px;color:var(--txt-dim);line-height:1.55;flex:1}
.tpl-tags{display:flex;gap:6px;flex-wrap:wrap}
.tpl-tags span{font-size:10px;font-weight:600;letter-spacing:.4px;color:var(--brass-soft);background:var(--brass-dim);border:1px solid rgba(200,162,75,.22);padding:2.5px 9px;border-radius:100px}
.tpl-body .btn{justify-content:center;margin-top:4px}

/* Cover stage premium */
.cover-stage{background:
  radial-gradient(600px 260px at 50% 0%, rgba(200,162,75,.06), transparent 70%),
  repeating-conic-gradient(var(--ink-2) 0 90deg, #0D1118 0 180deg) 0 0/22px 22px}
.cov-panel{box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08)}
.variant:hover{transform:translateY(-3px)}
.variant.sel{box-shadow:0 0 0 2px var(--brass), 0 12px 30px rgba(200,162,75,.2)}

/* Page head serif flourish */
.page-head h1{background:linear-gradient(120deg,var(--txt) 60%,var(--brass-soft));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* View entrance animation */
#view>*{animation:viewin .35s cubic-bezier(.2,.7,.3,1)}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}}

/* Focus rings */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(200,162,75,.14)}

/* ---------- Shelf Test (Amazon SERP simulator) ---------- */
.serp-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:18px;background:#FFF;border-radius:10px}
@media(max-width:1100px){.serp-strip{grid-template-columns:repeat(3,1fr)}}
.serp-item{position:relative;background:#FFF;border:1px solid #E3E6E6;border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .2s}
.serp-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.serp-item.mine{border:2px solid var(--brass);box-shadow:0 6px 22px rgba(200,162,75,.35)}
.serp-you{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--brass);color:#0B0E14;font-size:9px;font-weight:800;letter-spacing:1px;padding:3px 10px;border-radius:100px;z-index:2}
.serp-thumb{display:flex;justify-content:center}
.serp-cover{width:86px;height:132px;border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:8px;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.serp-cover b{font-family:var(--serif);font-size:10.5px;line-height:1.25}
.serp-cover span{font-size:7.5px;letter-spacing:.8px;text-transform:uppercase}
.serp-meta{display:flex;flex-direction:column;gap:2px}
.serp-title{font-size:12px;font-weight:600;color:#0F1111;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.serp-author{font-size:10.5px;color:#565959}
.serp-stars{font-size:11px;color:#DE7921}
.serp-stars span{color:#007185;font-size:10px}
.serp-price{font-size:14px;font-weight:700;color:#0F1111}
.serp-badge{font-size:9px;color:#565959;background:#F0F2F2;border-radius:3px;padding:1px 6px;width:fit-content}

/* ============ GROWTH SUITE: Metas & Sprints ============ */
.goal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.goal-bar{height:12px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.goal-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#7DE0C8,#8AB4F8);box-shadow:0 0 14px rgba(125,224,200,.45);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.goal-nums{font-size:13px;margin-top:10px;opacity:.9}
.goal-inputs{display:flex;gap:10px;align-items:end;margin-top:14px;flex-wrap:wrap}
.goal-inputs label{display:flex;flex-direction:column;gap:4px;font-size:11px;opacity:.8}
.goal-inputs input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:inherit;padding:7px 10px;font-size:13px;max-width:150px}
.pace-big{font-size:38px;font-weight:800;letter-spacing:-1px;background:linear-gradient(90deg,#F2D06B,#E8B04B);-webkit-background-clip:text;background-clip:text;color:transparent}
.pace-big span{font-size:13px;font-weight:500;color:rgba(255,255,255,.6);-webkit-text-fill-color:rgba(255,255,255,.6);margin-left:6px}
.pace-row{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06);margin-top:8px}
.sprint-btns{display:flex;gap:10px;flex-wrap:wrap}
.sprint-live{text-align:center}
.sprint-clock{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:2px;color:#7DE0C8;text-shadow:0 0 24px rgba(125,224,200,.5);animation:pulseClock 2s ease-in-out infinite}
@keyframes pulseClock{0%,100%{opacity:1}50%{opacity:.75}}
.heat-grid{display:grid;grid-template-columns:repeat(21,1fr);gap:4px;max-width:640px}
.heat-cell{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.06)}
.heat-cell.l1{background:rgba(125,224,200,.25)}
.heat-cell.l2{background:rgba(125,224,200,.5)}
.heat-cell.l3{background:rgba(125,224,200,.75)}
.heat-cell.l4{background:#7DE0C8;box-shadow:0 0 6px rgba(125,224,200,.6)}
.heat-legend{display:flex;gap:5px;align-items:center;margin-top:10px;font-size:10.5px;opacity:.65}
.heat-legend .heat-cell{width:12px;height:12px;aspect-ratio:auto}

/* ============ GROWTH SUITE: Copy Studio ============ */
.copy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.copy-out{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;font-size:13.5px;line-height:1.65;min-height:80px;white-space:normal}

/* ============ GROWTH SUITE: Launch Command ============ */
.launch-line{display:flex;flex-direction:column;gap:0;position:relative;padding-left:6px}
.launch-item{display:flex;gap:14px;align-items:flex-start;padding:10px 12px;border-radius:12px;cursor:pointer;position:relative;transition:background .2s}
.launch-item:hover{background:rgba(255,255,255,.04)}
.launch-item::before{content:'';position:absolute;left:29px;top:44px;bottom:-6px;width:2px;background:rgba(255,255,255,.08)}
.launch-item:last-child::before{display:none}
.launch-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.06);border:1.5px solid var(--c,#8AB4F8);color:var(--c,#8AB4F8);font-size:13px;z-index:1}
.launch-item.done .launch-dot{background:var(--c,#7DE0C8);color:#0B0F14}
.launch-day{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;opacity:.65}
.launch-body p{margin:2px 0 0;font-size:13.5px;line-height:1.5}
.launch-item.done .launch-body p{opacity:.5;text-decoration:line-through}

/* ============ STORY SUITE: Story Arc ============ */
.arc-svg{width:100%;height:auto;display:block;margin-top:6px}
.arc-warn{margin-top:12px;padding:10px 14px;border-radius:10px;background:rgba(242,180,90,.1);border:1px solid rgba(242,180,90,.35);color:#F2C06B;font-size:12.5px}
.beat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.beat-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px}
.beat-card.filled{border-color:rgba(125,224,200,.4)}
.beat-top{display:flex;gap:8px;align-items:center;font-size:12.5px;margin-bottom:8px}
.beat-pos{font-size:10px;font-weight:700;background:rgba(138,180,248,.15);color:#8AB4F8;border-radius:6px;padding:2px 7px}
.beat-card textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:inherit;font-size:12px;line-height:1.5;padding:8px;resize:vertical;font-family:inherit}

/* ============ STORY SUITE: Series Manager ============ */
.series-card{margin-bottom:16px}
.series-books{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.series-book{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;cursor:pointer;transition:border-color .2s}
.series-book:hover{border-color:rgba(138,180,248,.5)}
.series-num{font-size:15px;font-weight:800;color:#E8B04B;min-width:32px}
.series-assign{display:flex;gap:8px;align-items:center}
.series-assign select{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:inherit;padding:8px 10px;font-size:12.5px}
.series-assign select option{background:#141A22;color:#EDE6D6}
.series-stats{display:flex;gap:16px;margin-top:12px;font-size:11.5px;opacity:.7;flex-wrap:wrap}
.series-card textarea{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:inherit;font-size:12.5px;line-height:1.55;padding:10px;resize:vertical;font-family:inherit}

/* ============ GLOBAL MARKETS ============ */
.mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
.mkt-card.ready{border-color:rgba(125,224,200,.35)}
.mkt-out{display:flex;flex-direction:column;gap:8px}
.mkt-field{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:9px 12px;font-size:12.5px;line-height:1.55}
.mkt-field span{display:block;font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;opacity:.55;margin-bottom:3px}
.mkt-field code{background:rgba(138,180,248,.12);color:#8AB4F8;border-radius:5px;padding:1px 7px;font-size:11px;display:inline-block;margin:2px 3px 2px 0}

/* ============ COVER DESIGNER PRO ============ */
.cov-tabs{display:flex;gap:6px;margin-bottom:14px;background:rgba(255,255,255,.04);border-radius:10px;padding:4px;width:fit-content}
.cov-tab{border:0;background:transparent;color:inherit;opacity:.6;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;transition:all .2s}
.cov-tab.on{opacity:1;background:rgba(138,180,248,.15);color:#8AB4F8}
.cov-q{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:9px;padding:3px}
.cov-q-opt{border:0;background:transparent;color:inherit;opacity:.55;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:7px;cursor:pointer}
.cov-q-opt.on{opacity:1;background:rgba(232,176,75,.16);color:#E8B04B}
.cov-drop{border:2px dashed rgba(255,255,255,.18);border-radius:14px;padding:34px 20px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:8px;align-items:center;transition:all .25s}
.cov-drop:hover,.cov-drop.over{border-color:#8AB4F8;background:rgba(138,180,248,.06)}
.cov-drop i{font-size:30px;color:#8AB4F8;opacity:.8}
.cov-drop b{font-size:13.5px}
.cov-drop span{font-size:11px;opacity:.6;max-width:340px}
.cov-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;margin-top:8px}
.cov-thumb{position:relative;aspect-ratio:5/8;border-radius:9px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .2s}
.cov-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cov-thumb:hover{transform:translateY(-2px)}
.cov-thumb.sel{border-color:#7DE0C8;box-shadow:0 0 14px rgba(125,224,200,.4)}
.cov-thumb-x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(8,10,14,.75);color:#FFF;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.cov-thumb:hover .cov-thumb-x{opacity:1}
.cov-thumb-tag{position:absolute;bottom:4px;left:4px;font-size:11px;background:rgba(8,10,14,.7);border-radius:6px;padding:1px 5px}
.cov-applied{margin-top:14px;padding:12px 14px;border-radius:11px;background:rgba(125,224,200,.06);border:1px solid rgba(125,224,200,.25)}

/* ============ HERMES COMMAND CENTER ============ */
#hermes-fab{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;z-index:900;background:linear-gradient(135deg,#8AB4F8,#7DE0C8);color:#0B0F14;font-size:19px;box-shadow:0 8px 28px rgba(125,224,200,.4);transition:transform .2s}
#hermes-fab:hover{transform:scale(1.08)}
#hermes-dock{position:fixed;bottom:24px;right:24px;width:min(400px,calc(100vw - 32px));max-height:min(600px,calc(100vh - 60px));background:rgba(16,21,30,.97);border:1px solid rgba(255,255,255,.12);border-radius:18px;z-index:950;display:none;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.6);backdrop-filter:blur(18px)}
#hermes-dock.open{display:flex;animation:dockIn .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes dockIn{from{transform:translateY(20px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.hd-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.hd-title{font-size:13.5px;font-weight:700;display:flex;gap:8px;align-items:center}
.hd-x{border:0;background:transparent;color:inherit;opacity:.6;cursor:pointer;font-size:15px}
.hd-x:hover{opacity:1}
.hd-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:180px;max-height:400px}
.hd-msg{display:flex;gap:8px;align-items:flex-end}
.hd-msg.user{justify-content:flex-end}
.hd-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#8AB4F8,#7DE0C8);color:#0B0F14;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.hd-avatar.rp{background:linear-gradient(135deg,#E8B04B,#E2925B)}
.hd-bubble{max-width:78%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:13px 13px 13px 4px;padding:9px 13px;font-size:12.8px;line-height:1.55;position:relative}
.hd-msg.user .hd-bubble{background:rgba(138,180,248,.14);border-color:rgba(138,180,248,.3);border-radius:13px 13px 4px 13px}
.hd-prov{display:block;font-size:9px;opacity:.45;margin-top:5px;letter-spacing:.5px}
.hd-think{opacity:.7}
.hd-empty{text-align:center;padding:22px 12px;opacity:.85}
.hd-empty i{font-size:24px;color:#7DE0C8;margin-bottom:10px;display:block}
.hd-empty p{font-size:12.5px;line-height:1.55;opacity:.8}
.hd-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.hd-chips button{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:inherit;border-radius:99px;font-size:11.5px;padding:6px 12px;cursor:pointer;transition:all .2s}
.hd-chips button:hover{border-color:#7DE0C8;color:#7DE0C8}
.hd-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.08)}
.hd-input input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:11px;color:inherit;padding:10px 13px;font-size:13px}
.hd-input button{border:0;background:linear-gradient(135deg,#8AB4F8,#7DE0C8);color:#0B0F14;border-radius:11px;width:42px;cursor:pointer;font-size:13px}

/* ============ COMMAND PALETTE ============ */
#cmd-pal{position:fixed;inset:0;z-index:990;display:none;background:rgba(5,8,12,.6);backdrop-filter:blur(4px)}
#cmd-pal.open{display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.cp-box{width:min(560px,calc(100vw - 32px));background:rgba(18,23,32,.98);border:1px solid rgba(255,255,255,.13);border-radius:16px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.7);animation:dockIn .2s cubic-bezier(.2,.9,.3,1.2)}
.cp-search{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.cp-search i{opacity:.5}
.cp-search input{flex:1;background:transparent;border:0;color:inherit;font-size:14.5px;outline:none}
.cp-list{max-height:340px;overflow-y:auto;padding:6px}
.cp-item{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:10px;font-size:13.5px;cursor:pointer}
.cp-item i{width:18px;text-align:center;opacity:.65}
.cp-item:hover,.cp-item.first{background:rgba(138,180,248,.1)}
.cp-item.first{border:1px solid rgba(138,180,248,.25)}
.cp-none{padding:20px;text-align:center;font-size:13px;opacity:.5}
.cp-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:10.5px;opacity:.55}
.cp-foot kbd{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:1px 5px;font-size:9.5px}

/* ============ ADS STUDIO + READER PERSONA ============ */
.ads-kw{background:rgba(138,180,248,.12);color:#8AB4F8;border-radius:6px;padding:2px 9px;font-size:11.5px}
.ads-kw.neg{background:rgba(226,110,90,.12);color:#E88070}
.ads-camps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ads-specs{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;opacity:.85;margin-top:6px}
.rp-layout{display:grid;grid-template-columns:280px 1fr;gap:16px}
@media(max-width:860px){.rp-layout{grid-template-columns:1fr}}
.rp-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#E8B04B,#E2925B);color:#0B0F14;display:flex;align-items:center;justify-content:center;font-size:24px;margin:6px auto 0}
.rp-chat .hd-log{min-height:300px}

/* ============ MISSION CONTROL STRIP ============ */
.mc-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:22px}
.mc-stat{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:14px 16px;text-align:center;transition:border-color .25s}
.mc-stat:hover{border-color:rgba(138,180,248,.35)}
.mc-stat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(90deg,#EDE6D6,#8AB4F8);-webkit-background-clip:text;background-clip:text;color:transparent}
.mc-stat b em{font-style:normal;font-size:13px;opacity:.55;-webkit-text-fill-color:rgba(237,230,214,.55)}
.mc-stat span{display:block;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;opacity:.55;margin-top:3px}

/* ============ FOCUS MODE (máquina de escribir) ============ */
body.focus-mode #app-side,body.focus-mode #topbar,body.focus-mode .ms-outline,body.focus-mode .ms-copilot,body.focus-mode .page-head,body.focus-mode #hermes-fab{display:none!important}
body.focus-mode .ms-layout{grid-template-columns:1fr!important;max-width:760px;margin:0 auto}
body.focus-mode #app-main{padding-top:0}
body.focus-mode .ms-editor{border:0;background:transparent}
body.focus-mode .ms-body{font-size:17px;line-height:1.9;min-height:80vh;padding:8vh 24px}
body.focus-mode .ms-toolbar{position:sticky;top:0;background:rgba(11,15,20,.92);backdrop-filter:blur(10px);z-index:5;border-radius:0 0 12px 12px}

/* ============================================================
   IMPRENTA (Press Engine)
   ============================================================ */
.press-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.pm{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;position:relative;overflow:hidden}
.pm::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--brass),transparent)}
.pm-l{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--txt-faint);margin-bottom:6px}
.pm-v{display:block;font-family:var(--serif);font-size:26px;line-height:1;color:var(--txt);font-weight:600}
.pm-v em{font-style:normal;font-size:13px;color:var(--txt-dim);margin-left:2px}
.pm-s{display:block;font-size:11px;color:var(--txt-faint);margin-top:5px}

.press-alert{display:flex;align-items:center;gap:13px;background:rgba(226,114,91,.09);border:1px solid rgba(226,114,91,.32);border-radius:var(--r);padding:14px 18px;margin-bottom:18px;font-size:13px;color:var(--txt)}
.press-alert i{color:var(--coral);font-size:17px;flex-shrink:0}

.ts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.ts-card{background:var(--ink-3);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;gap:3px}
.ts-card:hover{border-color:var(--brass-soft);transform:translateY(-2px)}
.ts-card.sel{border-color:var(--brass);background:var(--brass-dim);box-shadow:0 0 0 1px var(--brass) inset}
.ts-card b{font-size:13px;color:var(--txt)}
.ts-fam{font-family:var(--serif);font-size:14px;color:var(--brass-soft)}
.ts-spec{font-family:var(--mono);font-size:10.5px;color:var(--txt-faint)}

.press-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ptg{display:inline-flex;align-items:center;gap:8px;background:var(--ink-3);border:1px solid var(--line-strong);border-radius:20px;padding:7px 14px 7px 8px;font-size:12.3px;color:var(--txt-dim);cursor:pointer;transition:all .16s;user-select:none}
.ptg:hover{border-color:var(--line-strong);color:var(--txt)}
.ptg-box{width:17px;height:17px;border-radius:5px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .16s}
.ptg-box i{font-size:9px;opacity:0;color:#0B0E14}
.ptg.on{border-color:var(--teal);color:var(--txt);background:rgba(63,184,175,.1)}
.ptg.on .ptg-box{background:var(--teal);border-color:var(--teal)}
.ptg.on .ptg-box i{opacity:1}

.press-out{display:flex;flex-direction:column;gap:9px}
.press-out .btn.full{width:100%;justify-content:flex-start;text-align:left;padding:13px 16px;flex-wrap:wrap}
.press-out .oh{display:block;width:100%;font-size:10.8px;color:var(--txt-faint);font-weight:400;margin-top:3px;letter-spacing:.2px}
.press-out .btn.full:disabled{opacity:.4;cursor:not-allowed}

.press-log{font-family:var(--mono);font-size:11.6px;line-height:2;color:var(--txt-dim);background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;white-space:pre-wrap}
.press-log .pl-k{display:inline-block;min-width:98px;color:var(--txt-faint)}
.press-log .ok{color:var(--teal)}
.press-log .warn{color:var(--coral)}

/* ============================================================
   PALETA DE COMANDOS · AYUDA DE TECLADO · CROMO DE LA BARRA
   Añadido en la revisión v2.0 (rendimiento + accesibilidad)
   ============================================================ */

/* --- Disparador en la barra superior --- */
#cmdk-trigger{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--ink-3,#181D28);border:1px solid var(--line-strong,rgba(232,228,218,.18));
  border-radius:10px;padding:7px 12px;color:var(--txt-dim,#9AA0AC);
  font-family:inherit;font-size:12.5px;transition:border-color .18s,color .18s,background .18s;
}
#cmdk-trigger:hover{border-color:var(--brass,#C8A24B);color:var(--txt,#E8E4DA)}
#cmdk-trigger kbd,#kbd-box kbd,#cmdk-foot kbd{
  font-family:var(--mono,monospace);font-size:10px;padding:2px 6px;border-radius:5px;
  background:var(--ink-4,#212836);border:1px solid var(--line,rgba(232,228,218,.09));
  color:var(--txt-faint,#5E6673);
}
@media(max-width:720px){#cmdk-trigger span{display:none}}

#theme-mini{
  width:34px;height:34px;flex:none;cursor:pointer;border-radius:10px;
  background:var(--ink-3,#181D28);border:1px solid var(--line-strong,rgba(232,228,218,.18));
  color:var(--txt-dim,#9AA0AC);transition:border-color .18s,color .18s;
}
#theme-mini:hover{border-color:var(--brass,#C8A24B);color:var(--brass-soft,#D9BC77)}

/* --- Sobrecapa de la paleta --- */
#cmdk{
  position:fixed;inset:0;z-index:9500;display:none;
  background:rgba(4,6,10,.66);backdrop-filter:blur(6px);
  padding:12vh 20px 20px;
}
#cmdk.open{display:block}
#cmdk-box{
  max-width:560px;margin:0 auto;background:var(--ink-2,#11151D);
  border:1px solid var(--line-strong,rgba(232,228,218,.18));border-radius:16px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);overflow:hidden;
  animation:cmdkIn .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
#cmdk-head{
  display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--line,rgba(232,228,218,.09));color:var(--txt-faint,#5E6673);
}
#cmdk-input{
  flex:1;background:none;border:none;outline:none;color:var(--txt,#E8E4DA);
  font-family:inherit;font-size:15.5px;
}
#cmdk-input::placeholder{color:var(--txt-faint,#5E6673)}
#cmdk-list{list-style:none;margin:0;padding:7px;max-height:46vh;overflow-y:auto}
#cmdk-list li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 13px;border-radius:9px;cursor:pointer;
  color:var(--txt-dim,#9AA0AC);font-size:14px;
}
#cmdk-list li.sel{background:var(--brass-dim,rgba(200,162,75,.14));color:var(--txt,#E8E4DA)}
#cmdk-list li.sel .cmdk-l{color:var(--brass-soft,#D9BC77);font-weight:600}
.cmdk-h{
  font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--txt-faint,#5E6673);flex:none;
}
.cmdk-empty{cursor:default!important;color:var(--txt-faint,#5E6673)!important;font-style:italic}
#cmdk-foot{
  display:flex;gap:18px;padding:11px 18px;border-top:1px solid var(--line,rgba(232,228,218,.09));
  font-size:11px;color:var(--txt-faint,#5E6673);
}
#cmdk-foot span{display:flex;align-items:center;gap:5px}

/* --- Hoja de atajos --- */
#kbd-help{
  position:fixed;inset:0;z-index:9600;display:none;
  background:rgba(4,6,10,.7);backdrop-filter:blur(6px);place-items:center;padding:24px;
}
#kbd-help.open{display:grid}
#kbd-box{
  background:var(--ink-2,#11151D);border:1px solid var(--line-strong,rgba(232,228,218,.18));
  border-radius:16px;padding:30px 34px;max-width:440px;width:100%;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
#kbd-box h2{
  font-family:var(--serif,Georgia,serif);font-size:22px;font-weight:600;
  color:var(--txt,#E8E4DA);margin:0 0 20px;letter-spacing:.5px;
}
#kbd-box dl{display:grid;grid-template-columns:auto 1fr;gap:11px 18px;margin:0 0 24px}
#kbd-box dt{display:flex;gap:4px;align-items:center}
#kbd-box dd{margin:0;color:var(--txt-dim,#9AA0AC);font-size:13.5px}
#kbd-close{
  width:100%;padding:11px;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,var(--brass,#C8A24B),#a8863a);color:#0B0E14;
  border:none;font-family:inherit;font-weight:700;font-size:13.5px;
}

/* --- Accesibilidad transversal del Studio --- */
#view:focus{outline:none}
#view:focus-visible{outline:2px solid var(--brass,#C8A24B);outline-offset:-2px;border-radius:8px}

/* Área táctil mínima en dispositivos de puntero grueso (WCAG 2.5.8) */
@media (pointer:coarse){
  .side-item,.tab,.btn,button{min-height:44px}
}

/* Reduced motion: se apaga todo lo decorativo pero nada desaparece. */
@media (prefers-reduced-motion: reduce){
  #cmdk-box{animation:none}
  .pulse-dot{animation:none!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Alto contraste del sistema */
@media (prefers-contrast: more){
  #cmdk-list li.sel{outline:2px solid var(--brass,#C8A24B)}
  .side-item{border:1px solid rgba(255,255,255,.16)}
}

/* ---------- Indicador de carga de módulo (mejora §3.L) ----------
   Sólo aparece si la descarga del módulo tarda más de 120 ms: por
   debajo de ese umbral, un indicador que aparece y desaparece produce
   un parpadeo que se percibe peor que la propia espera.
   El contenedor lleva role="status" y aria-live="polite" desde el JS,
   así que un lector de pantalla anuncia la espera sin interrumpir. */
.cargando-vista{
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:240px;color:var(--txt-dim);font-size:14px;font-weight:500;
}
.cargando-vista i{font-size:20px;color:var(--brass)}

/* Sin animación cuando el usuario la ha desactivado: el icono queda
   estático y el texto sigue comunicando el estado. */
@media (prefers-reduced-motion: reduce){
  .cargando-vista i{animation:none}
}