/* ===========================================================
   Reiktable — Console theme (Direction B)
   Dark, data-dense WFRP campaign manager
   =========================================================== */
:root{
  --bg:#0c0e12; --bg-2:#10131a; --panel:#14171f; --panel-2:#181c25; --raise:#1c212c;
  --line:#232936; --line-2:#2e3645; --line-3:#3a4456;
  --tx:#e7ebf2; --tx-2:#9aa4b5; --tx-3:#5e6878; --tx-4:#414b5c;
  --acc:#4f8cff; --acc-2:#6fa3ff; --acc-soft:rgba(79,140,255,.12);
  --cyan:#34d2c0; --grn:#3ecf8e; --amb:#e0a23a; --red:#ef5f5f; --viol:#a779f0; --pink:#ec6a9c;
  --grn-soft:rgba(62,207,142,.12); --red-soft:rgba(239,95,95,.12); --amb-soft:rgba(224,162,58,.12);
  --sans:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:7px; --r-lg:11px; --r-xl:16px;
  --sh:0 8px 30px rgba(0,0,0,.45); --sh-sm:0 2px 10px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--tx);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:rgba(79,140,255,.28)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#2a3140;border-radius:20px;border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:#36405230}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
a{color:var(--acc-2);text-decoration:none}
.mono{font-family:var(--mono)}
.tx2{color:var(--tx-2)}.tx3{color:var(--tx-3)}
.muted{color:var(--tx-3)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.hl{color:var(--acc-2)}
.cyan{color:var(--cyan)}.grn{color:var(--grn)}.amb{color:var(--amb)}.red{color:var(--red)}.viol{color:var(--viol)}

/* ---------------- layout ---------------- */
#root{min-height:100vh}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--bg-2);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px;border-bottom:1px solid var(--line)}
.brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--acc),#2b5fc4);display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 3px 10px rgba(79,140,255,.3)}
.brand b{font-size:16px;font-weight:600;display:block;line-height:1.1}
.brand small{font-family:var(--mono);font-size:10px;color:var(--tx-3)}
.nav{padding:10px;flex:1;overflow-y:auto}
.nlabel{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);padding:12px 12px 6px}
.nav-i{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;padding:8px 12px;border-radius:7px;color:var(--tx-2);font-family:var(--sans);font-size:14px;cursor:pointer;transition:.12s}
.nav-i svg{width:17px;height:17px;flex:none}
.nav-i:hover{background:var(--raise);color:var(--tx)}
.nav-i.on{background:var(--acc-soft);color:var(--acc-2)}
.nav-i .kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--tx-3);border:1px solid var(--line-2);border-radius:4px;padding:0 5px;line-height:15px}
.nav-i .ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tx-3)}
.sfoot{padding:10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px}
.ava{border-radius:8px;display:grid;place-items:center;font-weight:600;flex:none;overflow:hidden;background-size:cover;background-position:center}
.ava.sm{width:30px;height:30px;font-size:12px}
.ava.md{width:44px;height:44px;font-size:16px;border-radius:11px}
.ava.lg{width:74px;height:74px;font-size:26px;border-radius:14px}
.ava.xl{width:96px;height:96px;font-size:34px;border-radius:16px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 22px;background:rgba(16,19,26,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .crumb{font-family:var(--mono);font-size:12px;color:var(--tx-3)}
.topbar .crumb b{color:var(--tx);font-weight:500}
.topbar h1{font-size:19px}
.sp{flex:1}
.content{padding:22px;max-width:1320px;width:100%;margin:0 auto}
.content.narrow{max-width:880px}
.page-h{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px}
.page-h h1{font-size:24px}
.page-h p{color:var(--tx-3);font-size:13.5px;margin:2px 0 0}

/* ---------------- buttons ---------------- */
.btn{font-family:var(--sans);font-size:13px;font-weight:500;border:1px solid var(--line-2);background:var(--panel);color:var(--tx);padding:8px 13px;border-radius:7px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;justify-content:center;transition:.12s;white-space:nowrap}
.btn svg{width:15px;height:15px;flex:none}
.btn:hover{border-color:var(--line-3);background:var(--raise)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.pri:hover{background:var(--acc-2);border-color:var(--acc-2)}
.btn.grn{background:var(--grn);border-color:var(--grn);color:#06251a}
.btn.danger{color:var(--red);border-color:#5a2b30}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--tx-2)}
.btn.ghost:hover{background:var(--raise);color:var(--tx)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.icon{padding:7px}
.btn.icon.sm{padding:5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.block{width:100%}

/* ---------------- inputs ---------------- */
.input,.textarea,select.input{width:100%;font-family:var(--sans);font-size:14px;color:var(--tx);background:var(--bg-2);border:1px solid var(--line-2);border-radius:7px;padding:8px 11px;outline:none;transition:.12s}
.input.mono{font-family:var(--mono)}
.input:focus,.textarea:focus,select.input:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.input::placeholder,.textarea::placeholder{color:var(--tx-4)}
.textarea{resize:vertical;line-height:1.55;min-height:84px}
.input.sm{padding:5px 8px;font-size:13px}
.input.num{text-align:center;font-family:var(--mono)}
label.fld{display:block}
label.fld>.lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin-bottom:5px}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.switch input{display:none}
.switch .track{width:38px;height:21px;border-radius:20px;background:var(--line-2);position:relative;transition:.15s}
.switch .track::after{content:"";position:absolute;left:2px;top:2px;width:17px;height:17px;border-radius:50%;background:var(--tx-2);transition:.15s}
.switch input:checked+.track{background:var(--acc)}
.switch input:checked+.track::after{background:#fff;left:19px}

/* ---------------- chips / tags ---------------- */
.tag{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:6px;border:1px solid var(--line-2);background:var(--panel);color:var(--tx-2);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tag.acc{color:var(--acc-2);border-color:#2c4a7a;background:var(--acc-soft)}
.tag.grn{color:var(--grn);border-color:#1f5240;background:var(--grn-soft)}
.tag.amb{color:var(--amb);border-color:#5a4520;background:var(--amb-soft)}
.tag.red{color:var(--red);border-color:#5a2b30;background:var(--red-soft)}
.tag.viol{color:var(--viol);border-color:#46356a;background:rgba(167,121,240,.1)}
.tag.sans{font-family:var(--sans);font-size:12px;font-weight:500}
.tag .x{cursor:pointer;color:var(--tx-3);margin-left:1px}
.tag .x:hover{color:var(--red)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--tx-3)}

/* ---------------- cards / panels ---------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:11px}
.card.hover{cursor:pointer;transition:.12s}
.card.hover:hover{border-color:var(--line-3);background:var(--panel-2)}
.card-h{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:14px;font-weight:600}
.card-h svg{width:16px;height:16px;color:var(--tx-3)}
.card-h .x{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--tx-3)}
.card-b{padding:15px}
.card-b.tight{padding:8px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.cols{display:grid;gap:16px}
.cols.s{grid-template-columns:1.4fr 1fr}
.flex{display:flex}.between{display:flex;align-items:center;justify-content:space-between}
.center{display:flex;align-items:center}.col{display:flex;flex-direction:column}
.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}
.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g14{gap:14px}.g16{gap:16px}.g20{gap:20px}
.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}.mt18{margin-top:18px}
.mb6{margin-bottom:6px}.mb10{margin-bottom:10px}.mb14{margin-bottom:14px}
.divider{height:1px;background:var(--line);margin:14px 0}

/* ---------------- stat blocks ---------------- */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.dstat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 8px;text-align:center;position:relative}
.dstat .n{font-family:var(--mono);font-size:24px;line-height:1;color:var(--tx)}
.dstat .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin-top:6px}
.dstat.warn .n{color:var(--amb)}.dstat.bad .n{color:var(--red)}.dstat.good .n{color:var(--grn)}
.dstat .edit{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;color:transparent;cursor:pointer}
.chars{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ch{border:1px solid var(--line);border-radius:8px;text-align:center;padding:9px 4px;background:var(--panel-2);position:relative}
.ch .nm{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--tx-3)}
.ch .v{font-family:var(--mono);font-size:22px;color:var(--tx);line-height:1.1;margin-top:3px}
.ch .b{font-family:var(--mono);font-size:10px;color:var(--cyan)}
.ch.click{cursor:pointer}.ch.click:hover{border-color:var(--acc);background:var(--acc-soft)}

/* ---------------- tables / rows ---------------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);text-align:left;font-weight:400;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--raise)}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--mono)}
.row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px}
.row:hover{background:var(--raise)}
.row.b+.row.b{border-top:1px solid var(--line)}
.row .pct{font-family:var(--mono);font-size:15px;color:var(--acc-2);min-width:34px;text-align:right}
.bar{height:4px;border-radius:2px;background:#1c2230;overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--acc))}
.bar.hp i{background:linear-gradient(90deg,var(--grn),var(--cyan))}
.bar.danger i{background:linear-gradient(90deg,var(--amb),var(--red))}

/* ---------------- tabs ---------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{font-family:var(--sans);font-size:13.5px;background:none;border:0;color:var(--tx-2);padding:10px 14px;cursor:pointer;position:relative;white-space:nowrap}
.tab:hover{color:var(--tx)}
.tab.on{color:var(--acc-2)}
.tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--acc);border-radius:2px}
.pill-tabs{display:inline-flex;gap:3px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.pill{font-family:var(--sans);font-size:13px;background:none;border:0;color:var(--tx-2);padding:6px 13px;border-radius:6px;cursor:pointer}
.pill.on{background:var(--raise);color:var(--tx)}

/* ---------------- dice ---------------- */
.die{display:inline-grid;place-items:center;min-width:54px;height:54px;padding:0 10px;font-family:var(--mono);font-size:26px;color:var(--tx);background:var(--panel-2);border:1px solid var(--line-2);border-radius:11px}
.die.lg{min-width:72px;height:72px;font-size:34px}
.die.hit{border-color:var(--grn);color:var(--grn);box-shadow:0 0 18px var(--grn-soft)}
.die.miss{border-color:var(--red);color:var(--red);box-shadow:0 0 18px var(--red-soft)}
.die.crit{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 20px rgba(52,210,192,.25)}
.die.roll{animation:tumble .5s ease}
@keyframes tumble{0%{transform:translateY(-8px) rotate(-8deg);opacity:.4}60%{transform:translateY(2px) rotate(4deg)}100%{transform:none}}
.log-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;font-size:13px}
.log-row:hover{background:var(--raise)}
.log-row .who{font-weight:500}
.log-row .res{margin-left:auto;font-family:var(--mono)}

/* ---------------- combat tracker ---------------- */
.combatant{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--panel);position:relative}
.combatant.active{border-color:var(--acc);background:var(--acc-soft);box-shadow:0 0 0 1px var(--acc) inset}
.combatant.down{opacity:.5}
.combatant .init{font-family:var(--mono);font-size:20px;width:38px;text-align:center;color:var(--amb)}
.combatant .nm{font-weight:600}
.hp-ctrl{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono)}
.hp-ctrl button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--tx-2);cursor:pointer;font-size:14px}
.hp-ctrl button:hover{border-color:var(--acc);color:var(--tx)}

/* ---------------- search ---------------- */
.searchbar{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:11px 14px}
.searchbar:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.searchbar input{flex:1;background:none;border:0;outline:none;color:var(--tx);font-family:var(--sans);font-size:15px}
.searchbar svg{width:18px;height:18px;color:var(--tx-3)}
.result{padding:13px 15px;border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:.12s}
.result:hover{border-color:var(--line-3);background:var(--panel-2)}
.result .meta{font-family:var(--mono);font-size:11px;color:var(--tx-3);display:flex;gap:10px;margin-bottom:5px}
.result .snip{font-size:13.5px;color:var(--tx-2);line-height:1.55}
.result .snip mark{background:rgba(224,162,58,.28);color:var(--amb);padding:0 2px;border-radius:2px}
.book-pill{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.book-pill .pg{font-family:var(--mono);font-size:11px;color:var(--tx-3);margin-left:auto}

/* ---------------- chat / AI ---------------- */
.chat{display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:11px;max-width:90%}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg .bub{padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.6}
.msg.ai .bub{background:var(--panel);border:1px solid var(--line)}
.msg.me .bub{background:var(--acc-soft);border:1px solid #2c4a7a;color:#dce8ff}
.msg .av{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:13px}
.msg.ai .av{background:linear-gradient(140deg,var(--viol),#6b46c1);color:#fff}
.msg.me .av{background:var(--raise);color:var(--tx-2)}
.bub p{margin:0 0 8px}.bub p:last-child{margin:0}
.bub strong{color:var(--tx)}
.bub code{font-family:var(--mono);font-size:12.5px;background:var(--bg-2);padding:1px 5px;border-radius:4px;color:var(--cyan)}
.bub ul{margin:6px 0;padding-left:18px}
.typing{display:inline-flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--tx-3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.suggest{display:flex;gap:8px;flex-wrap:wrap}
.suggest button{font-family:var(--sans);font-size:12.5px;color:var(--tx-2);background:var(--panel);border:1px solid var(--line-2);border-radius:20px;padding:6px 13px;cursor:pointer}
.suggest button:hover{border-color:var(--acc);color:var(--tx)}

/* ---------------- timeline ---------------- */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--line-2)}
.tl-item{position:relative;padding:0 0 18px}
.tl-item::before{content:"";position:absolute;left:-23px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--acc)}
.tl-item.done::before{background:var(--grn);border-color:var(--grn)}
.tl-date{font-family:var(--mono);font-size:11px;color:var(--tx-3)}

/* ---------------- modal / toast / empty ---------------- */
.modal-back{position:fixed;inset:0;z-index:150;background:rgba(6,8,12,.7);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:6vh 20px;overflow-y:auto;animation:fade .14s}
@keyframes fade{from{opacity:0}}
.modal{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line-2);border-radius:13px;box-shadow:var(--sh);animation:pop .16s}
.modal.lg{max-width:860px}.modal.xl{max-width:1060px}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.modal-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.modal-h h3{font-size:16px}
.modal-b{padding:18px;max-height:70vh;overflow-y:auto}
.modal-f{display:flex;gap:10px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--line)}
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--panel);border:1px solid var(--line-2);border-left:3px solid var(--acc);padding:11px 15px;border-radius:8px;box-shadow:var(--sh);font-size:13.5px;animation:slidein .2s;max-width:340px}
.toast.grn{border-left-color:var(--grn)}.toast.red{border-left-color:var(--red)}.toast.amb{border-left-color:var(--amb)}
@keyframes slidein{from{opacity:0;transform:translateX(12px)}}
.empty{text-align:center;padding:48px 20px;color:var(--tx-3)}
.empty svg{width:40px;height:40px;opacity:.4;margin-bottom:10px}
.empty h3{color:var(--tx-2);font-weight:500;margin-bottom:5px}

.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-radius:4px;padding:1px 6px;color:var(--tx-3)}
.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.scroll-y{overflow-y:auto}
.fade-in{animation:fadein .22s ease}@keyframes fadein{from{transform:translateY(8px)}}

/* mobile */
.menu-btn{display:none}
.scrim{display:none}
@media(max-width:1000px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:230px;transform:translateX(-100%);transition:transform .22s}
  .side.open{transform:none}
  .scrim.on{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25}
  .menu-btn{display:inline-flex}
  .strip{grid-template-columns:repeat(3,1fr)}
  .cols.s{grid-template-columns:1fr}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .chars{grid-template-columns:repeat(5,1fr)}
}