*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;max-height:100%;overflow:hidden}
:root{
  --bg:#0c0b0a;--surface:#141210;--surface2:#1c1a17;--surface3:#26221e;
  --border:#322e29;--text:#efe7d8;--text2:#9a9083;--text3:#6b6358;
  --accent:#c9a227;--accent-dim:rgba(201,162,39,.16);
  --ok:#52b788;--warn:#e0a050;--danger:#e05252;--r:12px;--rs:8px;
  --serif:'Playfair Display',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
}
[data-theme="light"]{
  --bg:#e8e0d2;--surface:#f7f1e6;--surface2:#efe6d6;--surface3:#e4d9c6;
  --border:#d4c7b0;--text:#1c1916;--text2:#5c5348;--text3:#8a8074;
  --accent:#8b5a2b;--accent-dim:rgba(139,90,43,.14);
}
html,body{background:var(--bg)!important;color:var(--text)!important}
body{font-family:var(--sans);font-size:14px;line-height:1.5;display:flex;flex-direction:column;min-height:100%;min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
.hidden{display:none!important}
.bar{height:52px;display:flex;align-items:center;gap:.7rem;padding:0 1rem;border-bottom:1px solid var(--border);background:var(--surface)!important;flex-shrink:0;position:relative;z-index:5}
.word{font-family:var(--serif);font-weight:700;font-size:1.15rem;letter-spacing:.02em;color:var(--text)!important}
.stats{font-size:.75rem;color:var(--text2)!important}
.spacer{flex:1}
.btn{padding:.4rem .75rem;border:1px solid var(--border);border-radius:var(--rs);background:var(--surface2)!important;color:var(--text)!important;font-size:.8rem;font-weight:600}
.btn:hover{border-color:var(--accent)}
.btn.solid{background:var(--accent)!important;color:#111!important;border-color:transparent!important}
.saved{font-size:.75rem;color:var(--ok);opacity:0}
.saved.show{opacity:1}
.page{flex:1 1 auto;min-height:0;overflow:auto;padding:1.4rem 1.6rem 2.4rem;background:var(--bg)!important}
.lede{max-width:46rem;color:var(--text2);margin:0 0 1.2rem;font-size:.92rem}
.helm{
  position:sticky;top:0;z-index:6;
  background:var(--surface)!important;border:1px solid var(--border);border-radius:var(--r);
  padding:.85rem 1rem .9rem;margin:0 0 1.2rem;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.helm-kicker{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--text3);margin:0 0 .35rem}
.helm-heading{font-family:var(--serif);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;line-height:1.35;margin:0}
.helm-storm{margin:.55rem 0 0;font-size:.88rem;color:var(--warn,#e0a050);line-height:1.4}
.helm-storm:before{content:'Storm · ';font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.scoreboard{margin:1.2rem 0 0;background:var(--surface)!important;border:1px solid var(--border);border-radius:var(--r);padding:1rem 1rem 1.1rem}
.sb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.sb-item{background:var(--surface2)!important;border:1px solid var(--border);border-radius:var(--rs);padding:.7rem .75rem}
.sb-item span{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-weight:700;margin-bottom:.25rem}
.sb-item b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:700}
.sb-uncollected{grid-column:1/-1}
.sb-uncollected ul{margin:.35rem 0 0;padding-left:1.1rem}
.sb-uncollected li{margin:.2rem 0;line-height:1.4}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.col{background:var(--surface)!important;border:1px solid var(--border);border-radius:var(--r);padding:1rem 1rem 1.1rem;min-width:0}
#principles-box{scroll-margin-top:12px}
.col-h{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.85rem}
.col-h h2{font-family:var(--serif);font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.col-h span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);font-weight:700}
.col-h .btn{margin-left:auto}
.list{display:flex;flex-direction:column;gap:.65rem}
.principle-row{display:flex;align-items:flex-start;gap:.4rem;padding:.45rem .5rem;border:1px solid var(--border);border-radius:var(--rs);background:var(--surface2)!important}
.principle-row.dragging{opacity:.4}
.principle-row .drag{color:var(--text3);cursor:grab;user-select:none;padding:.15rem .05rem}
.principle-text{flex:1;outline:none;min-height:1.35em;line-height:1.45}
.principle-text:empty:before{content:attr(data-placeholder);color:var(--text3)}
.principle-empty{width:100%;text-align:left;color:var(--text3);padding:.7rem .55rem;border:1px dashed var(--border);border-radius:var(--rs);background:transparent}
.principle-empty:hover{color:var(--text);border-color:var(--accent)}
.card{border:1px solid var(--border);border-radius:var(--rs);background:var(--surface2)!important;padding:.7rem .75rem .75rem}
.card .top{display:flex;gap:.45rem;align-items:center;margin-bottom:.4rem}
.card .id{width:7.2rem;flex-shrink:0;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:lowercase;padding:.28rem .4rem;background:var(--surface3)!important;border:1px solid var(--border);border-radius:6px;color:var(--text2)!important}
.card .label{flex:1;min-width:0;font-weight:600;padding:.28rem .4rem;background:transparent;border:1px solid transparent;border-radius:6px}
.card .label:focus,.card .id:focus,.card textarea:focus{border-color:var(--accent);outline:none}
.card textarea{width:100%;min-height:4.4rem;resize:vertical;line-height:1.5;padding:.45rem .5rem;background:var(--surface)!important;border:1px solid var(--border);border-radius:6px;color:var(--text)!important}
.card .row{display:flex;gap:.3rem;margin-top:.4rem}
.icon{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);color:var(--text2);font-size:.85rem}
.icon:hover{border-color:var(--accent);color:var(--text)}
.icon.danger{color:var(--danger);border-color:transparent}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--surface3);border:1px solid var(--border);padding:.45rem .8rem;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.toast.show{opacity:1}
#login-overlay{position:fixed;inset:0;z-index:400;background:var(--bg)!important;align-items:center;justify-content:center}
#login-overlay.hidden{display:none!important;pointer-events:none!important}
#login-overlay:not(.hidden){display:flex!important;pointer-events:auto!important}
.login-card{width:min(340px,92vw);background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border);border-radius:var(--r);padding:2rem 1.5rem;text-align:center}
.login-card h1{font-family:var(--serif);margin-bottom:.3rem}
.login-card p{color:var(--text2)!important;font-size:.85rem;margin-bottom:1.1rem}
.login-card input{width:100%;padding:.7rem;background:var(--surface2)!important;color:var(--text)!important;border:1px solid var(--border);border-radius:var(--rs);margin-bottom:.7rem}
.login-err{color:var(--danger);font-size:.8rem;min-height:1em;margin-top:.4rem}
@media(max-width:900px){
  .cols{grid-template-columns:1fr}
  .bar .stats{display:none}
  .sb-grid{grid-template-columns:1fr}
  .bar{height:auto;min-height:48px;flex-wrap:wrap;padding:.4rem .7rem}
  .page{padding:1rem .85rem calc(1.4rem + env(safe-area-inset-bottom))}
  input,textarea,select,[contenteditable="true"]{font-size:16px}
  .login-card input{font-size:16px}
  .icon{width:40px;height:40px}
}
[hidden]{display:none!important}