:root{
  --ink:#14101d; --ink-2:#1c1628; --ink-3:#251d35; --ink-4:#2d2342;
  --parchment:#e9dfcd; --parchment-dim:#a89a83;
  --candle:#e2a659; --candle-bright:#f4c77e;
  --violet:#8d7fb5; --violet-dim:#5d5480;
  --ember:#c96f4a; --line:#372d4e;
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 650px at 80% -10%, #241b3a 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 105%, #1d1430 0%, transparent 55%),
    var(--ink);
  color:var(--parchment);
  font-family:"Lora", Georgia, "Iowan Old Style", serif;
  overflow:hidden;
}
::selection{background:var(--violet-dim);color:var(--parchment)}
button{font-family:inherit}
.app{display:grid;grid-template-columns:250px 1fr 262px;grid-template-rows:52px 1fr;height:100vh}
@media (max-width:980px){ .app{grid-template-columns:230px 1fr 0} .hearth{display:none} .hearth.open{display:flex;position:fixed;right:0;top:52px;bottom:0;width:270px;z-index:30;box-shadow:-10px 0 30px rgba(0,0,0,.5)} }
@media (max-width:700px){ .app{grid-template-columns:0 1fr 0} .binder{display:none} .binder.open{display:flex;position:fixed;left:0;top:52px;bottom:0;width:min(280px,85vw);z-index:30;box-shadow:10px 0 30px rgba(0,0,0,.5)} }

/* ---------- topbar ---------- */
.topbar{
  grid-column:1/4;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:var(--ink-2);border-bottom:1px solid var(--line);
}
.brand{font-family:"IM Fell English",Georgia,serif;font-size:1.15rem;white-space:nowrap}
.brand .amp{color:var(--candle)}
.savestate{font-size:.75rem;font-style:italic;color:var(--violet-dim);min-width:90px}
.topbar .spacer{flex:1}
.icobtn{
  background:none;border:1px solid transparent;color:var(--parchment-dim);
  padding:5px 10px;border-radius:8px;cursor:pointer;font-size:.85rem;
}
.icobtn:hover{border-color:var(--line);color:var(--parchment)}
.icobtn:focus-visible, .binder button:focus-visible, .hearth button:focus-visible, .tool:focus-visible, .chip:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--candle);outline-offset:1px}
.mobile-only{display:none}
@media (max-width:700px){ .mobile-only{display:inline-block} }
.tablet-only{display:none}
@media (max-width:980px){ .tablet-only{display:inline-block} }

/* ---------- binder ---------- */
.binder{
  display:flex;flex-direction:column;background:var(--ink-2);
  border-right:1px solid var(--line);overflow:hidden;
}
.binder-head{padding:12px 12px 8px;display:flex;gap:6px;align-items:center}
.binder-title{font-family:"IM Fell English",serif;font-size:.95rem;letter-spacing:.05em;color:var(--parchment-dim);flex:1}
.mini{
  background:var(--ink);border:1px solid var(--line);color:var(--parchment);
  border-radius:7px;padding:3px 9px;font-size:.8rem;cursor:pointer;
}
.mini:hover{border-color:var(--violet)}
.binder-search{padding:0 12px 8px}
.binder-search input{
  width:100%;background:var(--ink);border:1px solid var(--line);border-radius:8px;
  color:var(--parchment);padding:5px 10px;font-size:.83rem;font-family:inherit;
}
.tree{flex:1;overflow-y:auto;padding:4px 8px 20px}
.node{user-select:none}
.node-row{
  display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:8px;cursor:pointer;
  font-size:.88rem;border:1px solid transparent;
}
.node-row:hover{background:var(--ink-3)}
.node-row.active{background:var(--ink-4);border-color:var(--violet-dim)}
.node-row .twist{width:12px;flex:0 0 auto;color:var(--violet);font-size:.7rem;transition:transform .15s}
.node.collapsed > .node-row .twist{transform:rotate(-90deg)}
.node-ic{flex:0 0 auto;color:var(--candle);font-size:.82rem}
.node-ic.doc{color:var(--violet)}
.node-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-wc{font-size:.68rem;color:var(--violet-dim);font-variant-numeric:tabular-nums}
.node-kids{margin-left:14px;border-left:1px dashed var(--line);padding-left:4px}
.node.collapsed > .node-kids{display:none}
.node-name input{
  width:100%;background:var(--ink);border:1px solid var(--candle);border-radius:5px;
  color:var(--parchment);font-family:inherit;font-size:.86rem;padding:1px 5px;
}
.rowbtn{
  visibility:hidden;background:none;border:none;color:var(--violet-dim);cursor:pointer;
  font-size:.8rem;padding:0 2px;border-radius:4px;
}
.node-row:hover .rowbtn{visibility:visible}
.rowbtn:hover{color:var(--candle)}
.binder-foot{padding:8px 12px;border-top:1px solid var(--line);display:flex;gap:6px;flex-wrap:wrap}

/* ---------- editor ---------- */
.desk{display:flex;flex-direction:column;overflow:hidden}
.doc-head{padding:14px 26px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.doc-title{
  font-family:"IM Fell English",serif;font-size:1.5rem;color:var(--parchment);
  background:none;border:none;border-bottom:1px dashed transparent;min-width:200px;flex:1;
}
.doc-title:hover{border-bottom-color:var(--line)}
.doc-title:focus{outline:none;border-bottom-color:var(--candle)}
.doc-stats{font-size:.8rem;color:var(--violet);font-style:italic;white-space:nowrap}
.fmtbar{
  display:flex;gap:3px;align-items:center;flex-wrap:wrap;
  padding:8px 26px;position:sticky;top:0;
}
.tool{
  background:var(--ink-2);border:1px solid var(--line);color:var(--parchment);
  min-width:32px;height:30px;border-radius:7px;cursor:pointer;font-size:.85rem;padding:0 8px;
}
.tool:hover{border-color:var(--violet)}
.tool b{font-family:Georgia,serif}
.fmt-sep{width:1px;height:20px;background:var(--line);margin:0 5px}
.fmtbar .spacer{flex:1}
.toggle{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--parchment-dim);cursor:pointer;user-select:none}
.toggle input{accent-color:var(--candle);cursor:pointer}

.pages{flex:1;overflow-y:auto;padding:6px 26px 60px}
.editor{
  max-width:760px;margin:0 auto;min-height:70vh;
  background:linear-gradient(180deg,#211a30,#1b1528);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 44px;outline:none;
  font-size:1.05rem;line-height:1.9;
  box-shadow:inset 0 2px 14px rgba(0,0,0,.35), 0 8px 30px rgba(0,0,0,.25);
}
@media (max-width:700px){ .editor{padding:24px 20px} .fmtbar,.doc-head,.pages{padding-left:12px;padding-right:12px} }
.editor:empty::before{content:attr(data-placeholder);color:var(--violet-dim);font-style:italic}
.editor.veiled{color:transparent;text-shadow:0 0 14px rgba(233,223,205,.55)}
.editor h1,.editor h2{font-family:"IM Fell English",serif;font-weight:400;margin:.7em 0 .3em;line-height:1.3}
.editor h1{font-size:1.6em}.editor h2{font-size:1.3em;color:var(--candle-bright)}
.editor p{margin:.4em 0}
.editor blockquote{border-left:3px solid var(--candle);margin:.6em 0;padding:.1em 1em;color:var(--parchment-dim);font-style:italic}
.editor ul,.editor ol{padding-left:1.4em;margin:.4em 0}
.editor hr{border:none;border-top:1px dashed var(--line);margin:1.2em 0}
.editor a{color:var(--candle)}
.empty-desk{max-width:520px;margin:14vh auto 0;text-align:center;color:var(--parchment-dim);font-style:italic}
.empty-desk .big{font-family:"IM Fell English",serif;font-size:1.4rem;color:var(--parchment);font-style:normal;margin-bottom:8px}

/* ---------- hearth (right panel) ---------- */
.hearth{
  display:flex;flex-direction:column;background:var(--ink-2);
  border-left:1px solid var(--line);overflow-y:auto;padding:14px;gap:14px;
}
.card{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:12px;
}
.card-title{font-family:"IM Fell English",serif;font-size:.92rem;color:var(--parchment-dim);letter-spacing:.05em;margin-bottom:8px}
.candle-stage{display:flex;justify-content:center}
.flame{transform-origin:50% 100%;animation:flicker 2.4s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scaleY(1) skewX(0)}25%{transform:scaleY(1.06) skewX(-2deg)}50%{transform:scaleY(.94) skewX(1.5deg)}75%{transform:scaleY(1.03) skewX(-1deg)}}
.flame-glow{animation:glowpulse 2.4s ease-in-out infinite}
@keyframes glowpulse{0%,100%{opacity:.5}50%{opacity:.8}}
.count-line{text-align:center;margin-top:4px}
.count-num{font-family:"IM Fell English",serif;font-size:1.7rem;color:var(--candle-bright);font-variant-numeric:tabular-nums;line-height:1.1}
.count-label{font-size:.76rem;color:var(--parchment-dim);font-style:italic}
.bar{height:5px;background:var(--ink);border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:10px 0 8px}
.bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--violet-dim),var(--candle));transition:width .5s ease}
.goal-btns{display:flex;flex-wrap:wrap;gap:5px}
.chip{
  background:var(--ink);border:1px solid var(--line);color:var(--parchment);
  padding:3px 10px;border-radius:99px;cursor:pointer;font-size:.78rem;
}
.chip:hover{border-color:var(--violet)}
.chip[aria-pressed="true"]{background:var(--violet-dim);border-color:var(--violet);color:#fff}
.custom-goal{display:flex;gap:5px;margin-top:6px}
.custom-goal input{flex:1;min-width:0;background:var(--ink);border:1px solid var(--line);border-radius:7px;color:var(--parchment);padding:4px 8px;font-size:.8rem;font-family:inherit}

.companion{display:flex;gap:10px;align-items:flex-start}
.wisp{flex:0 0 auto;animation:bob 3.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.wisp-say{font-size:.8rem;font-style:italic;color:var(--parchment-dim);background:var(--ink);border:1px solid var(--line);border-radius:10px;border-bottom-left-radius:3px;padding:7px 9px;min-height:2.6em}

.prompt-card{
  background:var(--ink);border:1px solid var(--line);border-left:3px solid var(--candle);
  border-radius:9px;padding:10px 11px;margin-bottom:8px;
}
.prompt-card.kind-drill{border-left-color:var(--violet)}
.prompt-card.kind-spark{border-left-color:var(--candle)}
.prompt-card.kind-vibe{border-left-color:var(--ember)}
.kind-tag{
  display:inline-block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1px 7px;border-radius:99px;margin-bottom:5px;border:1px solid var(--line);
}
.kind-tag.kind-drill{color:var(--violet);border-color:var(--violet-dim)}
.kind-tag.kind-spark{color:var(--candle-bright);border-color:var(--candle)}
.kind-tag.kind-vibe{color:#e09a7d;border-color:var(--ember)}
.deck-filter{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.prompt-text{font-size:.88rem}
.prompt-meta{margin-top:4px;font-size:.74rem;color:var(--violet);font-style:italic}
.deck-btns{display:flex;gap:6px;flex-wrap:wrap}
.btn{
  background:var(--ink);border:1px solid var(--violet-dim);color:var(--parchment);
  border-radius:8px;padding:5px 11px;font-size:.8rem;cursor:pointer;
}
.btn:hover{border-color:var(--candle)}
.btn-gold{border-color:var(--candle);color:var(--candle-bright)}
.btn[disabled]{opacity:.5;cursor:wait}
.deck-note{font-size:.72rem;color:var(--violet-dim);font-style:italic;margin-top:6px}

.seal-row{display:flex;gap:6px;flex-wrap:wrap;min-height:30px}
.seal{
  width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d9885f, #8c3b2a 70%);
  border:1px solid #5e2418;display:grid;place-items:center;
  font-family:"IM Fell English",serif;color:#f5d9c8;font-size:.85rem;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.25);
  animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes stamp{from{transform:scale(2.2);opacity:0}to{transform:scale(1);opacity:1}}
.seal-empty{font-size:.76rem;font-style:italic;color:var(--violet-dim)}
.lifetime{font-size:.76rem;color:var(--parchment-dim);font-style:italic;margin-top:8px}
.lifetime b{color:var(--candle-bright);font-family:"IM Fell English",serif;font-weight:400}

/* toast + stars */
.toast{
  position:fixed;left:50%;top:16%;transform:translate(-50%,-8px);
  background:linear-gradient(180deg,#2c2344,#241b3a);
  border:1px solid var(--candle);border-radius:14px;padding:16px 24px;text-align:center;z-index:60;
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 30px rgba(226,166,89,.15);
  opacity:0;pointer-events:none;transition:opacity .4s, transform .4s;max-width:min(90vw,420px);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast-title{font-family:"IM Fell English",serif;font-size:1.2rem;color:var(--candle-bright)}
.toast-sub{font-size:.86rem;color:var(--parchment-dim);font-style:italic;margin-top:3px}
.star{position:fixed;z-index:59;pointer-events:none;color:var(--candle-bright);will-change:transform,opacity}

.modal-veil{
  position:fixed;inset:0;background:rgba(10,7,18,.72);z-index:80;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-veil.show{display:flex}
.modal{
  background:linear-gradient(180deg,#2a2140,#221a33);
  border:1px solid var(--violet-dim);border-radius:14px;
  padding:20px 22px;max-width:420px;width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.modal h3{font-family:"IM Fell English",serif;font-weight:400;font-size:1.15rem;color:var(--candle-bright);margin-bottom:8px}
.modal p{font-size:.88rem;color:var(--parchment-dim);margin-bottom:12px}
.modal select, .modal input[type=text], .modal input[type=password]{
  width:100%;background:var(--ink);border:1px solid var(--line);border-radius:8px;
  color:var(--parchment);padding:7px 10px;font-family:inherit;font-size:.9rem;margin-bottom:14px;
}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}
.modal-btns .btn{padding:7px 14px;font-size:.86rem}
.btn-danger{border-color:var(--ember);color:#e8a488}

.banner{
  grid-column:1/4;background:#3a2430;color:#e8c8b8;border-bottom:1px solid #5e2418;
  padding:6px 14px;font-size:.82rem;font-style:italic;display:none;
}
.banner.show{display:block}

.loading-veil{
  position:fixed;inset:0;background:var(--ink);z-index:100;display:grid;place-items:center;
  transition:opacity .5s;font-family:"IM Fell English",serif;color:var(--parchment-dim);
}
.loading-veil.gone{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .flame,.flame-glow,.wisp,.seal{animation:none}
  .bar-fill{transition:none}.star{display:none}
}