:root {
  color-scheme: dark;
  --bg: #0f0d12;
  --bg2: #17111d;
  --panel: rgba(25, 21, 31, .96);
  --panel2: rgba(39, 31, 49, .92);
  --line: #3a2f49;
  --line2: #584568;
  --text: #f4eadc;
  --muted: #bcae9d;
  --accent: #d4af37;
  --accent2: #a77be8;
  --good: #8ff0c2;
  --bad: #ff8f8f;
  --warn: #ffd38f;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(97, 58, 128, .26), transparent 34rem),
    radial-gradient(circle at top right, rgba(212, 175, 55, .09), transparent 26rem),
    linear-gradient(180deg, var(--bg2), var(--bg));
  color: var(--text);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #0e0b12; border: 1px solid var(--line); padding: .12rem .35rem; border-radius: 6px; }
header.shell-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 8, 13, .88);
  backdrop-filter: blur(10px);
}
.shell-inner { max-width: 1220px; margin: 0 auto; padding: 1rem 1.25rem; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .75rem; }
.sig { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line2); display: grid; place-items: center; background: linear-gradient(145deg, #24172e, #140f18); box-shadow: inset 0 0 18px rgba(212,175,55,.08); color: var(--accent); font-weight: 900; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .15rem; font-size: clamp(1.7rem, 3.5vw, 2.6rem); line-height: 1.05; }
h2 { margin-bottom: .75rem; }
.subtitle { margin: 0; color: var(--muted); }
.nav { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.nav a, .nav button, .link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .55rem .85rem;
  background: rgba(31,24,39,.9);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  min-height: 2.4rem;
  width: auto;
}
.nav a:hover, .nav button:hover, .link-button:hover { border-color: var(--accent); text-decoration: none; }
main { max-width: 1220px; margin: 0 auto; padding: 1.25rem; display: grid; gap: 1rem; }
.hero { padding: 2rem; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, rgba(36, 25, 45, .96), rgba(15, 13, 18, .9)); box-shadow: var(--shadow); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.grid-wide { display: grid; grid-template-columns: 1.25fr .85fr; gap: 1rem; }
@media (max-width: 900px) { .grid-wide { grid-template-columns: 1fr; } }
.panel, .card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.card { background: rgba(21, 17, 27, .96); }
.card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.small { font-size: .88rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
label { display: block; margin: .5rem 0 .25rem; color: var(--muted); font-size: .9rem; }
input, select, textarea, button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0e0b12;
  color: var(--text);
  padding: .7rem .8rem;
  font: inherit;
}
textarea { min-height: 5.5rem; resize: vertical; }
button { cursor: pointer; background: #2a2034; font-weight: 800; }
button:hover { border-color: var(--accent); }
button.secondary { background: #15111b; }
button.danger { border-color: #764049; color: #ffb4b4; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 180px; }
.status { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .6rem; color: var(--muted); }
.dot { width: .65rem; height: .65rem; border-radius: 999px; background: var(--bad); }
.status.online .dot { background: var(--good); }
.pill { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .55rem; color: var(--muted); font-size: .78rem; margin: .15rem .15rem .15rem 0; }
.pill.good { border-color: rgba(143,240,194,.35); color: var(--good); }
.pill.warn { border-color: rgba(255,211,143,.35); color: var(--warn); }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.actions a, .actions button { flex: 1 1 150px; }
.list { display: grid; gap: .75rem; }
.message { white-space: pre-wrap; border: 1px solid var(--line); background: rgba(0,0,0,.25); padding: .75rem; border-radius: 12px; min-height: 2.5rem; }
.hidden { display: none !important; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 600px) { .stat-row { grid-template-columns: 1fr; } .shell-inner { padding: .9rem; } main { padding: .9rem; } .hero { padding: 1.2rem; } }


/* Alpha 11 character builder */
.builder-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1rem; align-items: start; }
@media (max-width: 980px) { .builder-layout { grid-template-columns: 1fr; } }
.step-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.step-tabs button { width: auto; flex: 1 1 150px; background: #15111b; }
.step-tabs button.active { border-color: var(--accent); color: var(--accent); background: #241a2e; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.choice-card { border: 1px solid var(--line); border-radius: 14px; padding: .8rem; background: rgba(15, 11, 18, .74); cursor: pointer; }
.choice-card:hover, .choice-card.selected { border-color: var(--accent); }
.choice-card.selected { box-shadow: inset 0 0 0 1px rgba(212,175,55,.35); }
.detail-box { border: 1px solid var(--line); border-radius: 14px; padding: .9rem; background: rgba(0,0,0,.22); max-height: 36rem; overflow: auto; }
.detail-box dl { display: grid; grid-template-columns: minmax(110px, .35fr) 1fr; gap: .35rem .75rem; margin: 0; }
.detail-box dt { color: var(--muted); }
.detail-box dd { margin: 0; }
.checkbox-list { display: grid; gap: .4rem; max-height: 20rem; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: .6rem; background: rgba(0,0,0,.22); }
.check-row { display: flex; gap: .55rem; align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,.05); padding: .35rem 0; }
.check-row:last-child { border-bottom: 0; }
.check-row input { width: auto; margin-top: .25rem; }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.toolbar > * { width: auto; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; }
.kv .card { padding: .75rem; }
.notice { border-left: 4px solid var(--accent); padding: .75rem; background: rgba(212,175,55,.08); border-radius: 10px; }
.card.archived { opacity: .72; border-style: dashed; }
.compact-actions button, .compact-actions a { flex: 1 1 120px; }


/* Alpha 13c polish pass */
.nav a.active, .nav a[aria-current="page"] {
  border-color: var(--accent);
  color: var(--accent);
  background: linear-gradient(135deg, rgba(212,175,55,.16), rgba(167,123,232,.10));
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.22);
}
.shell-header .nav { max-width: 100%; }
.shell-header .brand-row { align-items: flex-start; }
.panel h2, .card h2 { letter-spacing: .01em; }
.link-button, .nav a, .nav button, button { transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.link-button:hover, .nav a:hover, .nav button:hover, button:hover { transform: translateY(-1px); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid rgba(212,175,55,.16); }
.message:empty { display: none; }
.card-list-actions, .compact-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.card-list-actions > *, .compact-actions > * { width:auto; }
.page-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.75rem; }
.page-actions > * { width:auto; }
@media (max-width: 720px) {
  .brand { align-items:flex-start; }
  .sig { width:36px; height:36px; border-radius:10px; }
  .nav a, .nav button, .link-button { flex: 1 1 auto; }
}


/* Alpha 15 builder completion */
.compact-choice-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); max-height: 28rem; overflow:auto; padding-right:.25rem; }
.sticky-aside { position: sticky; top: 6.5rem; }
.ability-builder-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.6rem; margin:.75rem 0; }
.ability-build-card { border:1px solid var(--line); border-radius:14px; padding:.75rem; background:rgba(0,0,0,.22); }
.ability-build-card label { margin:0 0 .35rem; font-weight:900; color:var(--text); letter-spacing:.08em; }
.ability-build-card input { text-align:center; font-size:1.25rem; font-weight:900; }
.ability-build-card b { display:block; margin-top:.35rem; color:var(--accent); font-size:1.15rem; }
.ability-build-card small { display:block; color:var(--muted); margin-top:.2rem; }
.derived-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.5rem; margin-top:.75rem; }
.derived-grid .span2 { grid-column: span 2; }
.skill-grid { display:grid; gap:.4rem; max-height:32rem; overflow:auto; border:1px solid var(--line); border-radius:14px; padding:.6rem; background:rgba(0,0,0,.2); }
.skill-build-row { display:grid; grid-template-columns:1fr auto auto; gap:.6rem; align-items:center; border-bottom:1px solid rgba(255,255,255,.055); padding:.45rem 0; }
.skill-build-row:last-child { border-bottom:0; }
.skill-build-row small { display:block; color:var(--muted); margin-top:.15rem; }
.muted-skill { opacity:.58; }
.inline-check { display:inline-flex; align-items:center; gap:.3rem; margin:0; color:var(--muted); }
.inline-check input { width:auto; }
.pill-row { display:flex; flex-wrap:wrap; gap:.25rem; }
.spell-manager-row { grid-template-columns:auto 1fr minmax(110px,140px); align-items:center; }
.spell-manager-row select { padding:.45rem .55rem; }
.level-gain { border:1px solid var(--line); border-radius:12px; padding:.75rem; background:rgba(255,255,255,.025); margin-bottom:.5rem; }
.level-gain h3 { margin-bottom:.35rem; color:var(--accent); }
.level-gain ul { margin:.25rem 0 0 1.15rem; padding:0; }
@media (max-width: 760px) { .sticky-aside { position:static; } .skill-build-row, .spell-manager-row { grid-template-columns:1fr; } .derived-grid .span2 { grid-column:auto; } }

/* Alpha 19A app-wide polish and consistency */
html { scroll-behavior: smooth; }
body { line-height: 1.5; }
::selection { background: rgba(212,175,55,.28); color: var(--text); }
.skip-link {
  position: fixed; left: 1rem; top: .5rem; z-index: 1000;
  transform: translateY(-180%); padding: .65rem .9rem;
  border: 1px solid var(--accent); border-radius: 10px;
  background: #0e0b12; color: var(--text); font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid rgba(212,175,55,.55); outline-offset: 2px; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed; opacity: .58; transform: none !important;
}
button[aria-busy="true"] { position: relative; padding-right: 2.3rem; }
button[aria-busy="true"]::after {
  content: ""; position: absolute; right: .8rem; top: 50%; width: .85rem; height: .85rem;
  margin-top: -.425rem; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 999px; animation: songbound-spin .7s linear infinite;
}
@keyframes songbound-spin { to { transform: rotate(360deg); } }
.shell-footer {
  max-width: 1220px; margin: 0 auto; padding: 1rem 1.25rem 2rem;
  color: var(--muted); font-size: .85rem; text-align: center;
}
.shell-footer-inner {
  border-top: 1px solid var(--line); padding-top: 1rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center;
}
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .35rem; color: var(--muted); font-size: .88rem; }
.breadcrumbs > * + *::before { content: "›"; margin-right: .35rem; color: var(--line2); }
.table-wrap { width: 100%; overflow-x: auto; border-radius: 12px; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; color: var(--muted); }
th, td { padding: .55rem .65rem; border-bottom: 1px solid rgba(255,255,255,.07); }
tbody tr:hover { background: rgba(255,255,255,.025); }
.empty-state { text-align: center; padding: 1.4rem; color: var(--muted); border: 1px dashed var(--line2); border-radius: 12px; }
.message[data-tone="success"] { border-color: rgba(143,240,194,.35); color: var(--good); }
.message[data-tone="error"] { border-color: rgba(255,143,143,.4); color: var(--bad); }
.message[data-tone="warning"] { border-color: rgba(255,211,143,.4); color: var(--warn); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
input[type="number"] { font-variant-numeric: tabular-nums; }
.nav-toggle { display: none; width: auto; }
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .shell-header .nav[data-collapsible="true"] { display: none; width: 100%; }
  .shell-header .nav[data-collapsible="true"].open { display: flex; }
  .shell-header .nav[data-collapsible="true"] a,
  .shell-header .nav[data-collapsible="true"] button { flex: 1 1 45%; }
  .actions > *, .page-actions > * { flex: 1 1 45%; }
  input, select, textarea, button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .shell-header, .shell-footer, .nav, .page-actions, .skip-link { display: none !important; }
  body { background: #fff; color: #111; }
  main { max-width: none; padding: 0; }
  .panel, .card, .hero { box-shadow: none; background: #fff; color: #111; border-color: #bbb; break-inside: avoid; }
  a { color: #111; text-decoration: underline; }
}

/* Beta 2 M.20.2.1 - private D&D Beyond connector */
.ddb-connector-panel { display:grid; gap:.85rem; }
.ddb-heading-row { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.ddb-heading-row h2 { margin-bottom:.35rem; }
.ddb-heading-row p { margin:0; max-width:78ch; }
.ddb-form-grid { align-items:start; }
.ddb-form-grid .notice { margin-top:.9rem; overflow-wrap:anywhere; }
.ddb-check { margin-top:1rem; border:1px solid var(--line); border-radius:10px; padding:.65rem .75rem; background:rgba(0,0,0,.2); }
.ddb-check span { color:var(--text); }
.ddb-connector-panel .message { min-height:auto; }