:root {
  --bg: #0f0d0b;
  --panel: #1a1612;
  --panel-2: #231d17;
  --border: #4a3927;
  --text: #f4e8d3;
  --muted: #bfa98a;
  --accent: #d7a04a;
  --accent-2: #8f6223;
  --shadow: rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background: radial-gradient(circle at top, #231911 0%, var(--bg) 55%); color: var(--text); }
.app-shell { max-width: 1280px; margin: 0 auto; padding: 20px; }
.hero, .panel { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.08)); border:1px solid var(--border); border-radius:18px; box-shadow:0 10px 30px var(--shadow); }
.hero { padding:24px; margin-bottom:18px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-size: .78rem; margin:0 0 8px; }
h1, h2, h3, h4 { margin:0; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.3rem); margin-bottom:10px; }
.subtext, .legal-note { margin:0; line-height:1.55; }
.subtext { margin-bottom:10px; }
.legal-note { color: var(--muted); font-size:.95rem; }
.layout { display:grid; grid-template-columns:390px 1fr; gap:18px; }
.panel { padding:18px; }
.controls-panel h2, .output-panel h2 { margin-bottom:16px; }
.control-grid { display:grid; gap:12px; }
.control-card { background: var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px; }
.control-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:8px; }
.control-label { color: var(--muted); font-size:.88rem; text-transform:uppercase; letter-spacing:.08em; }
.control-value { font-size:1.02rem; font-weight:700; text-align:right; }
.arrow-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
button, select { font: inherit; }
button { border:1px solid var(--border); color: var(--text); background: var(--panel-2); border-radius:12px; padding:11px 12px; cursor:pointer; min-height:44px; }
button:hover { border-color: var(--accent); transform: translateY(-1px); }
button.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color:#1b1208; font-weight:700; border-color:transparent; }
.action-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.saved-wrap { margin-top:16px; }
.saved-wrap label { display:block; margin-bottom:8px; color: var(--muted); }
.saved-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
select { width:100%; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:11px 12px; }
.output-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.npc-output { display:grid; gap:14px; }
.placeholder { color: var(--muted); line-height:1.6; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px; }
.npc-title { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:baseline; }
.npc-title h3 { font-size: clamp(1.3rem, 2vw, 1.9rem); }
.npc-subtitle { color: var(--muted); line-height:1.5; margin-top:6px; }
.section-title { font-size:.98rem; letter-spacing:.06em; text-transform:uppercase; color: var(--accent); margin-bottom:10px; }
.small-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.small-box { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:10px; text-align:center; }
.small-box strong { display:block; font-size:1.15rem; margin-top:4px; }
.list-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.list-item { padding:10px; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); }
.list-item h4 { margin-bottom:6px; font-size:1rem; }
.text-block, li, p { line-height:1.5; }
.text-muted { color: var(--muted); }
ul.clean { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.money-pill { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(215,160,74,0.12); border:1px solid rgba(215,160,74,0.25); color: var(--accent); font-weight:700; }
@media (max-width:980px) { .layout { grid-template-columns:1fr; } }
@media (max-width:720px) { .small-grid, .list-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) {
  .app-shell { padding:12px; }
  .action-row, .saved-row, .small-grid, .list-grid { grid-template-columns:1fr; }
  .output-head, .npc-title { display:block; }
  .output-head button { margin-top:10px; width:100%; }
}