* { box-sizing: border-box; }
html { background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--ink); background:
  radial-gradient(circle at 80% -10%, transparent, transparent 30rem),
  linear-gradient(135deg, var(--bg), var(--bg) 68%); }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
button, .button {
  min-height: 38px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); background: var(--panel-2); cursor: pointer; text-decoration: none;
}
button:hover, .button:hover { border-color: var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
button.primary, .button.primary { color: var(--button-ink); border-color: var(--accent); background: linear-gradient(var(--accent),var(--accent)); font-weight: 750; }
button.danger { color: var(--danger); border-color: var(--danger-soft); background: var(--danger-bg); }
button.ghost { background: transparent; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea {
  width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); background: var(--field);
}
label { display: grid; gap: 5px; color: var(--muted); font-size: .85rem; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 20; padding: 8px; color: #000; background: var(--accent); }
.skip:focus { top: 12px; }
.dashboard-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; border-right: 1px solid var(--line); background: var(--bg-soft); backdrop-filter: blur(12px); }
.brand { display: block; margin: 0 8px 25px; color: var(--ink); text-decoration: none; }
.brand small { display: block; color: var(--accent); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.brand strong { display: block; font: 1.35rem/1.2 Georgia, serif; }
.dashboard-nav { display: grid; gap: 5px; }
.dashboard-nav button { display: flex; align-items: center; gap: 10px; width: 100%; border-color: transparent; color: var(--muted); background: transparent; text-align: left; }
.dashboard-nav button.active { color: var(--ink); border-color: var(--line); background: var(--panel-2); }
.sidebar-footer { position: absolute; right: 18px; bottom: 22px; left: 18px; display: grid; gap: 7px; }
.main { min-width: 0; padding: 30px clamp(18px,4vw,58px) 70px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.topbar h1 { margin: 0; font: clamp(1.8rem,4vw,2.65rem)/1 Georgia, serif; }
.topbar p { margin: 7px 0 0; color: var(--muted); }
.account-chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel); white-space: nowrap; }
.dashboard-section[hidden] { display: none; }
.section-head { margin-bottom: 18px; }
.section-head h2 { margin: 0; font: 1.55rem Georgia, serif; }
.section-head p { max-width: 760px; margin: 6px 0 0; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin-bottom: 22px; }
.card, .panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,var(--panel),var(--bg-soft)); box-shadow: var(--shadow); }
.card { min-height: 125px; padding: 18px; }
.card span { color: var(--muted); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.card strong { display: block; margin-top: 11px; font: 1.75rem Georgia, serif; overflow-wrap: anywhere; }
.card small { color: var(--muted); }
.panel { margin-bottom: 17px; padding: 20px; }
.panel h3 { margin: 0 0 13px; font: 1.15rem Georgia, serif; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.panel-head h3 { margin:0; }
.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; align-items: end; }
.actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.status { min-height: 24px; margin-top: 10px; color: var(--accent-2); }
.status.error { color: var(--danger); }
.badge { display:inline-flex; align-items:center; padding:3px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.73rem; text-transform:capitalize; }
.badge.good { color:var(--accent-2); border-color:var(--success-soft); background:var(--success-bg); }
.badge.warn { color:var(--accent-pale); border-color:var(--accent-soft); background:var(--notice); }
.badge.bad { color:var(--danger); border-color:var(--danger-soft); background:var(--danger-bg); }
.list { display:grid; gap:10px; }
.list-item { padding:13px; border:1px solid var(--line); border-radius:9px; background:var(--bg-soft); }
.list-item header { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.list-item h4 { margin:0; }
.list-item p { margin:5px 0 0; color:var(--muted); }
.list-item summary { color:var(--ink); font-weight:700; cursor:pointer; }
.meta { color:var(--muted); font-size:.82rem; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; }
table { width:100%; border-collapse:collapse; min-width:680px; }
th, td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { position:sticky; top:0; color:var(--muted); background:var(--bg-soft); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
.empty { padding:30px; color:var(--muted); text-align:center; }
.character-grid, .module-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.character-card { padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.character-card h3 { margin:0; font:1.3rem Georgia,serif; }
.character-card dl { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }
.character-card dt { color:var(--muted); font-size:.7rem; text-transform:uppercase; }
.character-card dd { margin:0; font-weight:700; }
.meter { height:8px; overflow:hidden; border-radius:99px; background:var(--bar-track); }
.meter span { display:block; height:100%; background:linear-gradient(90deg,var(--hp-fill),var(--hp-fill)); }
.session-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.toggle { display:flex; align-items:center; gap:9px; color:var(--ink); }
.toggle input { width:18px; min-height:18px; }
.chart { display:flex; align-items:end; gap:6px; min-height:190px; padding:20px 8px 8px; border-bottom:1px solid var(--line); }
.chart-column { flex:1; min-width:12px; display:grid; align-content:end; gap:4px; height:160px; text-align:center; }
.chart-bar { min-height:2px; border-radius:4px 4px 0 0; background:linear-gradient(var(--accent),var(--accent)); }
.chart-column small { overflow:hidden; color:var(--muted); font-size:.62rem; text-overflow:clip; }
.chart-legend { margin-top:8px; color:var(--muted); font-size:.78rem; }
.health { display:flex; align-items:center; gap:8px; }
.health::before { width:9px; height:9px; border-radius:50%; background:var(--danger); content:""; }
.health.ok::before { background:var(--accent-2); box-shadow:0 0 10px var(--accent-2); }
.searchbar { display:grid; grid-template-columns:minmax(220px,1fr) 180px auto; gap:9px; margin-bottom:14px; }
.wide-field { grid-column:1 / -1; }
.wide-field textarea { width:100%; resize:vertical; }
.content-subhead { margin-top:34px; }
.entity-statline { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px; margin:14px 0; }
.entity-statline > div { padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg-soft); text-align:center; }
.entity-statline strong { display:block; font:1.2rem Georgia,serif; }
.entity-prompt { max-height:180px; overflow:auto; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg-soft); white-space:pre-wrap; }
dialog { width:min(780px,calc(100% - 24px)); max-height:88vh; overflow:auto; padding:0; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); background:var(--panel); box-shadow:0 25px 80px var(--backdrop); }
dialog::backdrop { background:var(--backdrop); backdrop-filter:blur(3px); }
.dialog-body { padding:22px; }
.dialog-head { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:15px; }
.dialog-head h2 { margin:0; font:1.5rem Georgia,serif; }
.dialog-close { min-width:40px; }
pre.log { max-height:260px; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--bg-soft); white-space:pre-wrap; }
.notice { padding:12px 14px; border-left:3px solid var(--accent); background:var(--notice); color:var(--accent-pale); }
@media (max-width: 800px) {
  .dashboard-shell { display:block; }
  .sidebar { position:sticky; z-index:10; height:auto; padding:12px; border-right:0; border-bottom:1px solid var(--line); }
  .brand { margin:0 5px 10px; }
  .brand small { display:none; }
  .dashboard-nav { display:flex; overflow:auto; padding-bottom:3px; }
  .dashboard-nav button { flex:0 0 auto; width:auto; }
  .sidebar-footer { position:static; display:flex; margin-top:9px; }
  .main { padding:22px 14px 60px; }
  .topbar { align-items:start; }
  .account-chip { display:none; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .searchbar { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .cards { grid-template-columns:1fr 1fr; }
  .card { min-height:105px; padding:14px; }
  .card strong { font-size:1.25rem; }
  .topbar h1 { font-size:1.8rem; }
}