:root {
  --bg:#120f0b; --surface:#1b1712; --surface2:#241d16; --border:rgba(255,245,228,.12);
  --text:#f6eddc; --muted:#ccb994; --gold:#d2a441; --gold2:#f1ce7a; --ok:#8ab4a1; --bad:#d18484;
  --r:18px;
}
* { box-sizing: border-box; }
body {
  margin:0; font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(circle at top, rgba(210,164,65,.13), transparent 28%), linear-gradient(180deg,#120f0b,#15110d);
  color: var(--text); min-height: 100vh;
}
a { color: var(--gold2); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
header.top { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding: .5rem 0 1.5rem; }
.brand { display:flex; align-items:center; gap:.75rem; }
.brand img { width:40px; height:40px; border-radius:10px; }
.brand h1 { font-family: Georgia, serif; font-size: 1.4rem; margin:0; }
.brand .k { color: var(--gold2); text-transform: uppercase; letter-spacing:.18em; font-size:.68rem; display:block; }

nav.tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom: 1.25rem; }
nav.tabs button {
  background: var(--surface2); color: var(--muted); border:1px solid var(--border);
  padding:.65rem 1.1rem; border-radius:999px; cursor:pointer; font-weight:600; font-size:.9rem;
}
nav.tabs button.active { background: linear-gradient(135deg, var(--gold), var(--gold2)); color:#241909; border-color: transparent; }

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--border); border-radius: var(--r); padding:1.25rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.35); margin-bottom: 1.5rem;
}
h2 { margin: 0 0 1rem; font-size:1.15rem; color: var(--gold2); }
p { color: var(--muted); line-height:1.6; }
.k { color: var(--gold2); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; }

.grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:1.5rem; }
.row { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem; }
.row3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.6rem; }
.stack { display:grid; gap:1rem; }

label { display:grid; gap:.4rem; font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
input, select, textarea {
  width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--text);
  padding:.8rem 1rem; border-radius:14px; font:inherit;
}
textarea { min-height:80px; resize:vertical; }
label input[type="checkbox"] { width:auto; }

.btns { display:flex; gap:.6rem; flex-wrap:wrap; }
.btn { border:0; border-radius:999px; padding:.85rem 1.15rem; min-height:44px; cursor:pointer; font-weight:700; font-size:.9rem; }
.btn.pri { background: linear-gradient(135deg, var(--gold), var(--gold2)); color:#241909; }
.btn.sec { background: var(--surface2); color: var(--text); border:1px solid var(--border); }
.btn.danger { background: var(--surface2); color: var(--bad); border:1px solid rgba(209,132,132,.4); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.tiny { font-size:.82rem; color:var(--muted); }
.good { color: var(--ok); }
.bad { color: var(--bad); }
.pill { display:inline-flex; border:1px solid var(--border); border-radius:999px; padding:.3rem .65rem; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

.deck-area { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; padding: 1rem 0; }
.slot { display:grid; gap:.5rem; justify-items:center; width:140px; }
.slot .label { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; text-align:center; }
.card-face {
  width:130px; height:210px; border-radius:14px; position:relative; cursor:pointer;
  background: linear-gradient(160deg, #241d16, #1b1712);
  border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; transition: transform .15s ease;
  perspective: 800px;
}
.card-face:hover { transform: translateY(-4px); }
.card-face .back {
  position:absolute; inset:6px; border-radius:10px;
  background: repeating-linear-gradient(135deg, rgba(210,164,65,.18) 0 10px, transparent 10px 20px), #1b1712;
  border: 1px solid rgba(210,164,65,.35);
  display:flex; align-items:center; justify-content:center; font-size:2rem; color: var(--gold2);
}
.card-face .front {
  position:absolute; inset:6px; border-radius:10px; background: var(--surface);
  border: 1px solid var(--border); padding:.6rem; display:none; flex-direction:column; gap:.35rem;
  text-align:center; overflow:hidden;
}
.card-face.revealed .back { display:none; }
.card-face.revealed .front { display:flex; }
.card-face .front .name { font-weight:700; font-size:.85rem; color: var(--gold2); }
.card-face .front .orient { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.card-face.reversed .front { transform: rotate(180deg); }

.reading-summary { display:grid; gap:.75rem; }
.summary-card { background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:.9rem 1rem; }
.summary-card h4 { margin:0 0 .35rem; color: var(--gold2); font-size:.95rem; }
.summary-card .pos { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

.library-list { display:grid; gap:.75rem; max-height: 560px; overflow:auto; padding-right:.25rem; }
.library-item { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.9rem 1rem; }
.library-item h4 { margin:0 0 .25rem; color:var(--gold2); }
.library-item .meta { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.4rem; }

.journal-list { display:grid; gap:1rem; }
.journal-entry { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1rem; }
.journal-entry .head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.journal-entry .cards-mini { font-size:.8rem; color:var(--muted); margin:.4rem 0; }
.journal-entry textarea { margin-top:.5rem; }

.mono {
  white-space:pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background:#0f0c09; border:1px solid var(--border); border-radius:14px; padding:1rem; min-height:80px; font-size:.82rem;
}
.model { background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:1rem; }

.empty { color: var(--muted); font-style: italic; padding:1rem 0; }

@media (max-width: 900px) {
  .grid, .row { grid-template-columns: 1fr; }
  .row3 { grid-template-columns: 1fr; }
}