*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      background: #2a2218;
      color: #3e2e1e;
      font-family: 'Crimson Text', Georgia, serif;
      line-height: 1.6;
      transition: background 0.4s ease;
    }

    /* ── Parchment texture via CSS ────────────────────────── */
    .parchment-bg {
      background:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 28px,
          rgba(139,115,75,0.03) 28px,
          rgba(139,115,75,0.03) 29px
        ),
        radial-gradient(ellipse at 15% 10%, rgba(180,140,80,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 90%, rgba(160,120,60,0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(200,170,110,0.06) 0%, transparent 70%),
        linear-gradient(180deg, #f5ecd4 0%, #efe2c4 30%, #e8d8b4 70%, #e0d0a8 100%);
      transition: background 0.4s ease, color 0.4s ease;
    }

    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: rgba(60,45,25,0.15); }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #b89860, #8a6e3e);
      border-radius: 5px;
      border: 2px solid rgba(245,236,212,0.5);
    }

    /* ── Leather Spine / Binding Edge ────────────────────── */
    .book-wrapper { display: flex; min-height: 100vh; }
    .book-spine {
      width: 36px;
      min-width: 36px;
      background:
        linear-gradient(90deg, #1e160e 0%, #3a2a18 30%, #4a3820 60%, #3a2a18 85%, #2a1e12 100%);
      box-shadow: inset -4px 0 12px rgba(0,0,0,0.4), 2px 0 8px rgba(0,0,0,0.3);
      position: relative;
    }
    .book-spine::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0; right: 0;
      width: 3px;
      background: linear-gradient(180deg,
        rgba(180,140,80,0.4),
        rgba(180,140,80,0.15) 20%,
        rgba(180,140,80,0.15) 80%,
        rgba(180,140,80,0.4)
      );
    }
    .book-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }

    /* ── Header ─────────────────────────────────────────────── */
    .header {
      padding: 32px 36px 0;
      border-bottom: 2px solid #c4a46a;
      position: relative;
    }
    .header::after {
      content: '';
      position: absolute;
      bottom: -5px; left: 36px; right: 36px;
      height: 1px;
      background: rgba(160,120,60,0.3);
    }
    .header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .header h1 {
      font-family: 'Cinzel Decorative', 'Cinzel', serif;
      font-size: 2.1rem;
      color: #5a3e1c;
      text-shadow: 1px 1px 0 rgba(255,248,220,0.6), 2px 2px 3px rgba(90,62,28,0.2);
      letter-spacing: 0.02em;
    }
    .header .subtitle {
      font-style: italic;
      color: #8a6e46;
      font-size: 1.02rem;
      margin: 2px 0 14px;
    }
    .breadcrumb { font-size: 0.85rem; color: #9a7e52; margin-bottom: 6px; font-family: 'Cinzel', serif; }
    .breadcrumb a { color: #7a5c30; text-decoration: none; }
    .breadcrumb a:hover { color: #5a3e1c; text-decoration: underline; }
    .breadcrumb .sep { margin: 0 6px; color: #b89860; }
    .breadcrumb .current { color: #5a3e1c; font-weight: 600; }

    .header-actions { display: flex; align-items: center; gap: 10px; }
    .corner-nav { display: flex; gap: 8px; }
    .corner-nav a {
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      color: #6a4e28;
      text-decoration: none;
      padding: 5px 12px;
      border: 1px solid rgba(140,110,60,0.4);
      border-radius: 4px;
      background: rgba(245,236,212,0.4);
      white-space: nowrap;
    }
    .corner-nav a:hover { background: rgba(220,200,160,0.6); color: #3e2a12; }
    .dark-mode-toggle {
      width: 34px; height: 34px;
      border: 1px solid rgba(140,110,60,0.4);
      border-radius: 50%;
      background: rgba(245,236,212,0.4);
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      color: #6a4e28;
    }
    .dark-mode-toggle:hover { background: rgba(220,200,160,0.6); }

    /* ── Step tabs ──────────────────────────────────────────── */
    .step-tabs { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
    .step-tab {
      font-family: 'Cinzel', serif;
      font-size: 0.88rem;
      font-weight: 600;
      color: #7a5c30;
      padding: 9px 18px 8px;
      cursor: pointer;
      border: 1px solid rgba(140,110,60,0.35);
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      background: rgba(232,216,180,0.45);
      user-select: none;
      white-space: nowrap;
    }
    .step-tab:hover { background: rgba(220,200,160,0.7); }
    .step-tab.active {
      background: linear-gradient(180deg, #fdf6e0, #f5ecd4);
      color: #4a3418;
      border-color: #c4a46a;
      box-shadow: 0 -2px 6px rgba(90,62,28,0.12);
      position: relative;
      top: 1px;
    }
    .step-tab.locked { opacity: 0.5; cursor: not-allowed; }
    .step-tab.locked:hover { background: rgba(232,216,180,0.45); }
    .step-tab .flag {
      display: inline-block;
      min-width: 17px;
      padding: 0 4px;
      margin-left: 6px;
      border-radius: 8px;
      background: #a33c28;
      color: #f5ecd4;
      font-size: 0.7rem;
      text-align: center;
      font-family: 'Crimson Text', serif;
    }

    /* ── Toolbar ────────────────────────────────────────────── */
    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 36px;
      border-bottom: 1px solid rgba(160,120,60,0.3);
      flex-wrap: wrap;
    }
    .build-name {
      flex: 1;
      min-width: 220px;
      max-width: 460px;
      font-family: 'Cinzel', serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: #4a3418;
      background: rgba(255,250,235,0.5);
      border: 1px solid rgba(140,110,60,0.35);
      border-radius: 6px;
      padding: 7px 12px;
    }
    .build-name:focus { outline: none; border-color: #a3854e; background: rgba(255,250,235,0.85); }
    .toolbar-actions { display: flex; gap: 8px; }
    .tool-btn {
      font-family: 'Cinzel', serif;
      font-size: 0.82rem;
      font-weight: 600;
      color: #5a3e1c;
      padding: 7px 16px;
      border: 1px solid rgba(140,110,60,0.45);
      border-radius: 6px;
      background: linear-gradient(180deg, rgba(240,226,190,0.9), rgba(224,204,158,0.9));
      cursor: pointer;
    }
    .tool-btn:hover { background: linear-gradient(180deg, rgba(250,240,210,1), rgba(232,214,170,1)); }
    .tool-btn.danger { color: #7a2a1a; border-color: rgba(150,70,40,0.45); }
    .tool-btn.copied { color: #3e6a1e; border-color: rgba(90,140,50,0.5); }

    /* ── Main two-pane area ────────────────────────────────── */
    .main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 0;
      flex: 1;
      min-height: 0;
    }
    .workbench {
      padding: 22px 28px 60px 36px;
      min-width: 0;
    }
    .side-sheet {
      border-left: 2px solid #c4a46a;
      padding: 22px 24px 60px;
      box-shadow: inset 6px 0 14px -8px rgba(90,62,28,0.35);
      position: sticky;
      top: 0;
      align-self: start;
      max-height: 100vh;
      overflow-y: auto;
    }
    @media (max-width: 1080px) {
      .main { grid-template-columns: 1fr; }
      .side-sheet { display: none; }
    }
    @media (max-width: 720px) {
      .book-spine { display: none; }
      .header, .toolbar { padding-left: 18px; padding-right: 18px; }
      .workbench { padding: 18px 16px 60px; }
      .header h1 { font-size: 1.6rem; }
      .header-top { flex-direction: column; }
      .header-actions { order: -1; align-self: flex-end; }
      .step-tab { font-size: 0.76rem; padding: 7px 10px 6px; }
      .level-stats { margin-left: 0; width: 100%; }
      .align-grid { grid-template-columns: repeat(3, 1fr); }
      .picker-overlay { padding: 8px; }
      .picker { max-height: 92vh; }
    }
    /* Wide tables scroll inside their own box instead of stretching the page. */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll > table { min-width: 560px; }

    /* Content links (panel intros, hint boxes, the summary sheet, side sheet). */
    .workbench a, .side-sheet a { color: #2c5a8a; text-decoration: underline; }
    .workbench a:hover, .side-sheet a:hover { color: #16416e; }

    .loading { display: flex; align-items: center; gap: 10px; color: #8a6e46; font-style: italic; padding: 30px 0; }
    .loading-spinner {
      width: 18px; height: 18px;
      border: 3px solid rgba(140,110,60,0.3);
      border-top-color: #8a6e3e;
      border-radius: 50%;
      animation: bc-spin 0.9s linear infinite;
      display: inline-block;
    }
    @keyframes bc-spin { to { transform: rotate(360deg); } }
    .load-error { color: #7a2a1a; padding: 24px 0; }

    /* ── Shared panel bits ─────────────────────────────────── */
    .panel-title {
      font-family: 'Cinzel', serif;
      font-size: 1.25rem;
      font-weight: 700;
      color: #5a3e1c;
      margin: 4px 0 4px;
      letter-spacing: 0.02em;
    }
    .panel-sub { font-style: italic; color: #8a6e46; margin-bottom: 16px; font-size: 0.95rem; }
    .section-rule {
      border: none;
      height: 2px;
      margin: 22px 0 16px;
      background: linear-gradient(90deg, transparent, rgba(160,120,60,0.5), transparent);
    }
    .hint-box {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      font-size: 0.9rem;
      color: #6a4e28;
      background: rgba(200,170,110,0.14);
      border: 1px solid rgba(160,120,60,0.3);
      border-radius: 6px;
      padding: 8px 12px;
      margin: 10px 0;
    }
    .hint-box .icon { flex: none; }
    .warn-box {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      font-size: 0.9rem;
      color: #7a2a1a;
      background: rgba(180,80,40,0.10);
      border: 1px solid rgba(150,70,40,0.35);
      border-radius: 6px;
      padding: 8px 12px;
      margin: 10px 0;
    }

    /* ── Origin step ───────────────────────────────────────── */
    .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 4px; }
    .choice-card {
      border: 1px solid rgba(140,110,60,0.4);
      border-radius: 8px;
      background: rgba(255,250,235,0.45);
      padding: 10px 12px;
      cursor: pointer;
      user-select: none;
      transition: transform 0.06s ease;
    }
    .choice-card:hover { background: rgba(255,250,235,0.8); transform: translateY(-1px); }
    .choice-card.selected {
      border-color: #8a6e3e;
      background: linear-gradient(180deg, rgba(255,252,240,0.95), rgba(244,232,200,0.95));
      box-shadow: 0 2px 8px rgba(90,62,28,0.18), inset 0 0 0 1px rgba(138,110,62,0.5);
    }
    .choice-card .cc-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.95rem; color: #4a3418; }
    .choice-card .cc-meta { font-size: 0.8rem; color: #8a6e46; margin-top: 2px; }
    .choice-card.disabled { opacity: 0.45; cursor: not-allowed; }

    .align-grid { display: grid; grid-template-columns: repeat(3, minmax(110px, 160px)); gap: 8px; margin-top: 10px; }
    .align-cell {
      text-align: center;
      font-family: 'Cinzel', serif;
      font-size: 0.82rem;
      font-weight: 600;
      color: #6a4e28;
      padding: 9px 6px;
      border: 1px solid rgba(140,110,60,0.4);
      border-radius: 6px;
      background: rgba(255,250,235,0.45);
      cursor: pointer;
      user-select: none;
    }
    .align-cell:hover { background: rgba(255,250,235,0.8); }
    .align-cell.selected {
      border-color: #5a8a34;
      background: linear-gradient(180deg, rgba(228,244,205,0.95), rgba(205,230,170,0.95));
      box-shadow: inset 0 0 0 1px rgba(90,138,52,0.55);
      color: #2c4a14;
    }
    .align-cell.invalid {
      color: #a33c28;
      border-color: rgba(163,60,40,0.6);
      border-style: dashed;
      background: rgba(180,80,40,0.08);
    }
    .align-cell.selected.invalid {
      background: linear-gradient(180deg, rgba(230,150,130,0.5), rgba(215,120,95,0.5));
      border-style: solid;
      border-color: #a33c28;
      box-shadow: inset 0 0 0 1px rgba(163,60,40,0.6);
      color: #6e1c10;
    }

    .origin-detail {
      margin-top: 8px;
      border: 1px solid rgba(140,110,60,0.35);
      border-radius: 8px;
      background: rgba(255,250,235,0.4);
      padding: 12px 16px;
      font-size: 0.95rem;
    }
    .origin-detail h4 { font-family: 'Cinzel', serif; color: #5a3e1c; margin-bottom: 4px; }
    .origin-detail .desc { white-space: pre-wrap; color: #4e3a22; max-height: 260px; overflow-y: auto; }
    .tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .tag {
      font-size: 0.78rem;
      font-family: 'Cinzel', serif;
      color: #5a4020;
      padding: 2px 9px;
      border-radius: 10px;
      border: 1px solid rgba(150,120,70,0.45);
      background: rgba(200,170,110,0.2);
      white-space: nowrap;
    }
    .tag.good { color: #3e6a1e; border-color: rgba(90,140,50,0.5); background: rgba(120,180,80,0.12); }
    .tag.bad { color: #a33c28; border-color: rgba(160,70,40,0.5); background: rgba(180,80,40,0.10); }
    .tag.eexp { color: #7a4a94; border-color: rgba(122,74,148,0.45); background: rgba(140,90,170,0.10); }
    /* Eminence Point (EP) — the bright magenta the in-game EP counter uses. */
    .tag.ep { color: #b312b3; border-color: rgba(200,20,200,0.45); background: rgba(220,40,220,0.08); font-weight: 700; }
    .ep-text { color: #b312b3; font-weight: 700; white-space: nowrap; }
    .choice-card.has-ep { border-color: rgba(200,20,200,0.5); }
    .choice-card.has-ep .cc-name { color: #8a1a8a; }

    /* ── Abilities step ────────────────────────────────────── */
    .pb-status {
      font-family: 'Cinzel', serif;
      font-size: 1rem;
      color: #5a3e1c;
      margin: 6px 0 12px;
    }
    .pb-status b { font-size: 1.25rem; }
    .ability-table { width: 100%; max-width: 700px; border-collapse: collapse; }
    .ability-table th {
      font-family: 'Cinzel', serif;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #8a6e46;
      text-align: center;
      padding: 4px 6px;
      border-bottom: 1px solid rgba(160,120,60,0.4);
    }
    .ability-table th:first-child { text-align: left; }
    .ability-table td { padding: 7px 6px; text-align: center; border-bottom: 1px solid rgba(160,120,60,0.18); }
    .ability-table td.ab-name { text-align: left; font-family: 'Cinzel', serif; font-weight: 700; color: #4a3418; }
    .ab-btn {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1px solid rgba(140,110,60,0.5);
      background: rgba(240,226,190,0.9);
      font-weight: 700;
      color: #5a3e1c;
      cursor: pointer;
      line-height: 1;
    }
    .ab-btn:hover:not(:disabled) { background: rgba(250,240,210,1); }
    .ab-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .ab-score { font-size: 1.15rem; font-weight: 700; color: #3e2a12; min-width: 30px; display: inline-block; }
    .ab-final { font-size: 1.15rem; font-weight: 700; color: #2c5a8a; }
    .ab-mod { color: #6a4e28; }
    .ab-race { color: #8a6e46; }

    /* ── Levels step ───────────────────────────────────────── */
    .level-card {
      border: 1px solid rgba(140,110,60,0.4);
      border-radius: 10px;
      background: rgba(255,250,235,0.4);
      margin-bottom: 14px;
      overflow: hidden;
    }
    .level-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: linear-gradient(180deg, rgba(232,216,180,0.7), rgba(224,204,158,0.5));
      border-bottom: 1px solid rgba(160,120,60,0.3);
      flex-wrap: wrap;
    }
    .level-num {
      font-family: 'Cinzel Decorative', 'Cinzel', serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: #5a3e1c;
      width: 34px;
      text-align: center;
      flex: none;
    }
    .level-class-select {
      font-family: 'Cinzel', serif;
      font-size: 0.95rem;
      font-weight: 600;
      color: #4a3418;
      padding: 6px 10px;
      border: 1px solid rgba(140,110,60,0.45);
      border-radius: 6px;
      background: rgba(255,250,235,0.85);
      min-width: 170px;
    }
    .level-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; color: #6a4e28; margin-left: auto; }
    .level-stats b { color: #4a3418; }
    .level-body { padding: 12px 16px; }
    .slot-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; align-items: center; }
    .slot-label { font-family: 'Cinzel', serif; font-size: 0.8rem; font-weight: 700; color: #8a6e46; text-transform: uppercase; letter-spacing: 0.05em; min-width: 110px; }
    .feat-slot {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px dashed rgba(140,110,60,0.55);
      border-radius: 6px;
      background: rgba(255,250,235,0.5);
      padding: 4px 10px;
      cursor: pointer;
      font-size: 0.92rem;
      color: #7a5c30;
      max-width: 100%;
    }
    .feat-slot:hover { background: rgba(255,250,235,0.9); }
    .feat-slot.filled { border-style: solid; color: #3e2a12; }
    .feat-slot img { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
    .feat-slot .x { color: #a33c28; font-weight: 700; margin-left: 2px; }
    .feat-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(140,110,60,0.35);
      border-radius: 6px;
      background: rgba(210,190,150,0.28);
      padding: 3px 9px;
      font-size: 0.88rem;
      color: #5a4428;
    }
    .feat-chip img { width: 20px; height: 20px; image-rendering: pixelated; }
    .skill-summary { font-size: 0.9rem; color: #6a4e28; }
    .skill-toggle {
      background: none;
      border: none;
      color: #2c5a8a;
      font-family: 'Crimson Text', serif;
      font-size: 0.92rem;
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
    }
    .skill-editor { margin-top: 10px; overflow-x: auto; }
    .skill-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    .skill-table th {
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #8a6e46;
      padding: 3px 6px;
      border-bottom: 1px solid rgba(160,120,60,0.4);
      text-align: center;
    }
    .skill-table th:first-child { text-align: left; }
    .skill-table td { padding: 3px 6px; border-bottom: 1px solid rgba(160,120,60,0.14); text-align: center; }
    .skill-table td:first-child { text-align: left; }
    .skill-table tr.cross td:first-child { color: #8a6e46; font-style: italic; }
    /* Zebra striping so each +/- row reads at a glance. */
    .skill-table tr:nth-child(even) td { background: rgba(139,115,75,0.09); }
    .skill-table tr.skill-divider td {
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #8a6e46;
      background: rgba(139,115,75,0.16) !important;
      text-align: left;
      padding: 4px 6px;
    }
    /* Skills that already hold ranks from earlier levels (beats the zebra). */
    .skill-table tr.has-ranks td { background: rgba(110,170,60,0.15) !important; }
    .skill-table tr.has-ranks td:first-child { color: #3e6a1e; font-weight: 600; }
    .skill-table .sk-btn {
      width: 22px; height: 22px;
      border-radius: 4px;
      border: 1px solid rgba(140,110,60,0.5);
      background: rgba(240,226,190,0.9);
      color: #5a3e1c;
      font-weight: 700;
      cursor: pointer;
      line-height: 1;
    }
    .skill-table .sk-btn:hover:not(:disabled) { background: rgba(250,240,210,1); }
    .skill-table .sk-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .sk-max { color: #a08858; font-size: 0.8rem; }

    /* ── E6 step ───────────────────────────────────────────── */
    .eexp-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin: 8px 0 14px;
      font-size: 1rem;
    }
    .eexp-bar label { font-family: 'Cinzel', serif; font-weight: 600; color: #5a3e1c; }
    .eexp-bar input {
      width: 130px;
      font-size: 1rem;
      padding: 5px 9px;
      border: 1px solid rgba(140,110,60,0.45);
      border-radius: 6px;
      background: rgba(255,250,235,0.85);
      color: #3e2a12;
      font-family: 'Crimson Text', serif;
    }
    .eexp-total { font-family: 'Cinzel', serif; color: #5a3e1c; }
    .eexp-total b { font-size: 1.15rem; }
    .eexp-total .over { color: #a33c28; }
    .purchase-list { margin: 10px 0; }
    .purchase-item {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(140,110,60,0.35);
      border-radius: 8px;
      background: rgba(255,250,235,0.5);
      padding: 7px 12px;
      margin-bottom: 7px;
    }
    .purchase-item img { width: 24px; height: 24px; image-rendering: pixelated; }
    .purchase-item .pi-name { font-weight: 600; color: #3e2a12; }
    .purchase-item .pi-cost { margin-left: auto; font-family: 'Cinzel', serif; color: #7a4a94; font-weight: 700; white-space: nowrap; }
    .purchase-item .x {
      border: none; background: none;
      color: #a33c28; font-weight: 700; font-size: 1.05rem; cursor: pointer;
      padding: 0 2px;
    }
    .e6-add-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }

    /* ── Summary step ──────────────────────────────────────── */
    .sheet { font-size: 0.98rem; }
    .sheet h3 {
      font-family: 'Cinzel', serif;
      font-size: 1.05rem;
      color: #5a3e1c;
      border-bottom: 1px solid rgba(160,120,60,0.4);
      margin: 16px 0 8px;
      padding-bottom: 3px;
    }
    .sheet h3:first-child { margin-top: 0; }
    .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
    .stat-tile {
      text-align: center;
      border: 1px solid rgba(140,110,60,0.35);
      border-radius: 8px;
      background: rgba(255,250,235,0.5);
      padding: 7px 4px;
    }
    .stat-tile .st-label { font-family: 'Cinzel', serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #8a6e46; }
    .stat-tile .st-value { font-size: 1.3rem; font-weight: 700; color: #3e2a12; line-height: 1.2; }
    .stat-tile .st-note { font-size: 0.78rem; color: #8a6e46; }
    .sheet table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
    .sheet table th {
      font-family: 'Cinzel', serif; font-size: 0.72rem; text-transform: uppercase;
      color: #8a6e46; text-align: left; padding: 3px 8px;
      border-bottom: 1px solid rgba(160,120,60,0.4);
    }
    .sheet table td { padding: 3px 8px; border-bottom: 1px solid rgba(160,120,60,0.14); }
    .notes-area {
      width: 100%;
      min-height: 110px;
      resize: vertical;
      font-family: 'Crimson Text', Georgia, serif;
      font-size: 0.98rem;
      color: #3e2a12;
      background: rgba(255,250,235,0.55);
      border: 1px solid rgba(140,110,60,0.4);
      border-radius: 8px;
      padding: 10px 12px;
      line-height: 1.5;
    }
    .notes-area:focus { outline: none; border-color: #a3854e; background: rgba(255,250,235,0.85); }
    body.dark-mode .notes-area { background: rgba(30,22,12,0.7); color: #c8b890; border-color: rgba(120,95,55,0.5); }
    .timeline-level { margin-bottom: 10px; }
    .timeline-level .tl-head { font-family: 'Cinzel', serif; font-weight: 700; color: #4a3418; font-size: 0.92rem; }
    .timeline-level .tl-feats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

    /* ── Picker modal ─────────────────────────────────────── */
    .picker-overlay[hidden] { display: none; }
    .picker-overlay {
      position: fixed;
      inset: 0;
      background: rgba(20,14,8,0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 90;
      padding: 24px;
    }
    .picker {
      width: min(860px, 100%);
      max-height: min(84vh, 780px);
      display: flex;
      flex-direction: column;
      border: 2px solid #c4a46a;
      border-radius: 12px;
      box-shadow: 0 12px 44px rgba(0,0,0,0.5);
      background:
        radial-gradient(ellipse at 15% 10%, rgba(180,140,80,0.12) 0%, transparent 50%),
        linear-gradient(180deg, #f5ecd4 0%, #e8d8b4 100%);
      overflow: hidden;
    }
    .picker-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(160,120,60,0.4);
      flex-wrap: wrap;
    }
    .picker-head h3 { font-family: 'Cinzel', serif; color: #5a3e1c; font-size: 1.05rem; margin-right: auto; }
    .picker-head input {
      flex: 1;
      min-width: 160px;
      font-size: 0.95rem;
      padding: 6px 10px;
      border: 1px solid rgba(140,110,60,0.45);
      border-radius: 6px;
      background: rgba(255,250,235,0.85);
      font-family: 'Crimson Text', serif;
      color: #3e2a12;
    }
    .picker-head .close {
      border: none; background: none; font-size: 1.3rem; color: #7a5c30; cursor: pointer; line-height: 1;
    }
    .picker-filters { display: flex; gap: 6px; padding: 8px 16px 0; flex-wrap: wrap; }
    .pf-toggle {
      font-family: 'Cinzel', serif;
      font-size: 0.74rem;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 10px;
      border: 1px solid rgba(150,120,70,0.45);
      background: rgba(200,170,110,0.15);
      color: #6a4e28;
      cursor: pointer;
    }
    .pf-toggle.on { background: rgba(138,110,62,0.85); color: #f5ecd4; }
    .picker-body { flex: 1; overflow-y: auto; padding: 10px 16px 16px; }
    .pick-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border: 1px solid rgba(140,110,60,0.3);
      border-radius: 8px;
      background: rgba(255,250,235,0.5);
      padding: 8px 12px;
      margin-bottom: 7px;
      cursor: pointer;
    }
    .pick-row:hover { background: rgba(255,250,235,0.95); }
    .pick-row.blocked { opacity: 0.55; cursor: default; }
    .pick-row.blocked:hover { background: rgba(255,250,235,0.5); }
    .pick-row img { width: 26px; height: 26px; image-rendering: pixelated; flex: none; margin-top: 2px; }
    .pick-row .pr-body { min-width: 0; flex: 1; }
    .pick-row .pr-name { font-weight: 700; color: #3e2a12; }
    .pick-row .pr-name .cat { font-weight: 400; font-size: 0.78rem; color: #8a6e46; margin-left: 6px; font-family: 'Cinzel', serif; }
    .pick-row .pr-desc { font-size: 0.85rem; color: #6a5232; max-height: 3.9em; overflow: hidden; }
    .pick-row .pr-block { font-size: 0.82rem; color: #a33c28; margin-top: 2px; }
    .pick-row .pr-cost { font-family: 'Cinzel', serif; color: #7a4a94; font-weight: 700; white-space: nowrap; flex: none; }
    .pick-row.expanded .pr-desc { max-height: none; }
    .pick-empty { color: #8a6e46; font-style: italic; padding: 16px 4px; }

    /* ── Side sheet (live character summary) ───────────────── */
    .side-sheet h2 {
      font-family: 'Cinzel', serif;
      font-size: 1.1rem;
      color: #5a3e1c;
      margin-bottom: 2px;
    }
    .side-sheet .ss-sub { font-style: italic; color: #8a6e46; font-size: 0.88rem; margin-bottom: 12px; }
    .ss-line { display: flex; justify-content: space-between; font-size: 0.92rem; padding: 2px 0; }
    .ss-line .k { color: #6a4e28; }
    .ss-line .v { color: #3e2a12; font-weight: 600; }

    .share-toast {
      position: fixed;
      left: 50%;
      bottom: 26px;
      transform: translateX(-50%) translateY(80px);
      background: #3a2a18;
      color: #f0e2be;
      font-family: 'Cinzel', serif;
      font-size: 0.9rem;
      padding: 10px 22px;
      border-radius: 8px;
      border: 1px solid #c4a46a;
      box-shadow: 0 6px 22px rgba(0,0,0,0.4);
      transition: transform 0.25s ease;
      z-index: 120;
      pointer-events: none;
    }
    .share-toast.show { transform: translateX(-50%) translateY(0); }

    /* ── Dark mode ─────────────────────────────────────────── */
    body.dark-mode { background: #0f0b07; color: #c8b890; }
    body.dark-mode .parchment-bg {
      background:
        repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(139,115,75,0.03) 28px, rgba(139,115,75,0.03) 29px),
        radial-gradient(ellipse at 15% 10%, rgba(90,70,40,0.14) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 90%, rgba(80,60,30,0.12) 0%, transparent 50%),
        linear-gradient(180deg, #241c10 0%, #1e160c 50%, #191208 100%);
    }
    body.dark-mode .book-spine { background: linear-gradient(90deg, #0a0704 0%, #1e160c 40%, #241c10 60%, #14100a 100%); }
    body.dark-mode .header { border-bottom-color: #6a5230; }
    body.dark-mode .header::after { background: rgba(80,60,30,0.3); }
    body.dark-mode .header h1 { color: #e0c888; text-shadow: none; }
    body.dark-mode .header .subtitle { color: #8a7858; }
    body.dark-mode .breadcrumb { color: #7a6a4a; }
    body.dark-mode .breadcrumb a { color: #a08858; }
    body.dark-mode .breadcrumb a:hover { color: #e0c888; }
    body.dark-mode .breadcrumb .current { color: #e0c888; }
    body.dark-mode .corner-nav a { color: #b09868; border-color: rgba(120,95,55,0.5); background: rgba(40,30,18,0.5); }
    body.dark-mode .corner-nav a:hover { background: rgba(60,45,25,0.7); color: #e0c888; }
    body.dark-mode .dark-mode-toggle { color: #b09868; border-color: rgba(120,95,55,0.5); background: rgba(40,30,18,0.5); }
    body.dark-mode .step-tab { background: rgba(30,22,12,0.6); color: #907c54; border-color: rgba(110,85,50,0.4); }
    body.dark-mode .step-tab:hover { background: rgba(45,34,18,0.8); }
    body.dark-mode .step-tab.active { background: linear-gradient(180deg, #2c2212, #241c10); color: #e0c888; border-color: #6a5230; }
    body.dark-mode .toolbar { border-bottom-color: rgba(80,60,30,0.4); }
    body.dark-mode .build-name { background: rgba(30,22,12,0.7); color: #e0c888; border-color: rgba(120,95,55,0.5); }
    body.dark-mode .tool-btn { background: linear-gradient(180deg, rgba(50,38,20,0.9), rgba(38,28,15,0.9)); color: #c8ac70; border-color: rgba(120,95,55,0.55); }
    body.dark-mode .tool-btn.danger { color: #d08868; }
    body.dark-mode .side-sheet { border-left-color: #6a5230; }
    body.dark-mode .panel-title, body.dark-mode .sheet h3, body.dark-mode .side-sheet h2 { color: #e0c888; }
    body.dark-mode .panel-sub, body.dark-mode .side-sheet .ss-sub { color: #8a7858; }
    body.dark-mode .hint-box { background: rgba(90,70,40,0.14); border-color: rgba(110,85,50,0.4); color: #b09868; }
    body.dark-mode .warn-box { background: rgba(150,60,30,0.12); border-color: rgba(150,70,40,0.4); color: #d08868; }
    body.dark-mode .choice-card,
    body.dark-mode .align-cell,
    body.dark-mode .origin-detail,
    body.dark-mode .level-card,
    body.dark-mode .purchase-item,
    body.dark-mode .stat-tile,
    body.dark-mode .pick-row,
    body.dark-mode .feat-slot,
    body.dark-mode .feat-chip { background: rgba(30,22,12,0.55); border-color: rgba(110,85,50,0.45); }
    body.dark-mode .choice-card:hover, body.dark-mode .align-cell:hover, body.dark-mode .pick-row:hover { background: rgba(48,36,20,0.8); }
    body.dark-mode .choice-card.selected {
      background: linear-gradient(180deg, rgba(60,46,24,0.95), rgba(44,34,18,0.95));
      border-color: #8a6e3e;
    }
    body.dark-mode .align-cell.selected {
      background: linear-gradient(180deg, rgba(52,74,28,0.9), rgba(38,56,20,0.9));
      border-color: #6a9a3e;
      color: #b8e088;
    }
    body.dark-mode .align-cell.invalid { color: #d08868; border-color: rgba(180,90,60,0.55); background: rgba(150,60,30,0.10); }
    body.dark-mode .align-cell.selected.invalid {
      background: linear-gradient(180deg, rgba(120,45,25,0.7), rgba(95,35,20,0.7));
      border-color: #c05a3a;
      color: #f0a888;
    }
    body.dark-mode .choice-card .cc-name, body.dark-mode .align-cell.selected, body.dark-mode .pick-row .pr-name,
    body.dark-mode .purchase-item .pi-name, body.dark-mode .stat-tile .st-value { color: #e0c888; }
    body.dark-mode .choice-card .cc-meta { color: #8a7858; }
    body.dark-mode .align-cell { color: #b09868; }
    body.dark-mode .origin-detail h4 { color: #e0c888; }
    body.dark-mode .origin-detail .desc { color: #c8b890; }
    body.dark-mode .tag { color: #c8ac70; border-color: rgba(120,95,55,0.55); background: rgba(60,46,24,0.4); }
    body.dark-mode .tag.ep { color: #e838e8; border-color: rgba(210,40,210,0.5); background: rgba(180,20,180,0.12); }
    body.dark-mode .ep-text { color: #e838e8; }
    body.dark-mode .choice-card.has-ep { border-color: rgba(210,40,210,0.5); }
    body.dark-mode .choice-card.has-ep .cc-name { color: #f060f0; }
    body.dark-mode .pb-status, body.dark-mode .eexp-total { color: #e0c888; }
    body.dark-mode .ability-table th, body.dark-mode .skill-table th, body.dark-mode .sheet table th { color: #8a7858; border-bottom-color: rgba(110,85,50,0.5); }
    body.dark-mode .ability-table td { border-bottom-color: rgba(80,60,30,0.3); }
    body.dark-mode .ability-table td.ab-name, body.dark-mode .ab-score { color: #e0c888; }
    body.dark-mode .ab-final { color: #7ab0e0; }
    body.dark-mode .ab-btn, body.dark-mode .skill-table .sk-btn { background: rgba(50,38,20,0.9); color: #c8ac70; border-color: rgba(120,95,55,0.55); }
    body.dark-mode .level-head { background: linear-gradient(180deg, rgba(44,34,18,0.8), rgba(36,28,15,0.6)); border-bottom-color: rgba(110,85,50,0.4); }
    body.dark-mode .level-num { color: #e0c888; }
    body.dark-mode .level-class-select { background: rgba(30,22,12,0.85); color: #e0c888; border-color: rgba(120,95,55,0.5); }
    body.dark-mode .level-stats { color: #8a7858; }
    body.dark-mode .level-stats b { color: #c8ac70; }
    body.dark-mode .slot-label { color: #8a7858; }
    body.dark-mode .feat-slot { color: #b09868; }
    body.dark-mode .feat-slot.filled { color: #e0c888; }
    body.dark-mode .feat-chip { color: #c8b890; }
    body.dark-mode .skill-table td { border-bottom-color: rgba(80,60,30,0.25); }
    body.dark-mode .skill-table tr:nth-child(even) td { background: rgba(139,115,75,0.08); }
    body.dark-mode .skill-table tr.skill-divider td { color: #8a7858; background: rgba(139,115,75,0.14) !important; }
    body.dark-mode .skill-table tr.has-ranks td { background: rgba(90,150,50,0.16) !important; }
    body.dark-mode .skill-table tr.has-ranks td:first-child { color: #88c060; }
    body.dark-mode .skill-summary { color: #8a7858; }
    body.dark-mode .skill-toggle { color: #7ab0e0; }
    body.dark-mode .workbench a, body.dark-mode .side-sheet a { color: #7ab0e0; }
    body.dark-mode .workbench a:hover, body.dark-mode .side-sheet a:hover { color: #a8d0f0; }
    body.dark-mode .eexp-bar input { background: rgba(30,22,12,0.85); color: #e0c888; border-color: rgba(120,95,55,0.5); }
    body.dark-mode .purchase-item .pi-cost, body.dark-mode .pick-row .pr-cost { color: #b088d8; }
    body.dark-mode .picker { background: linear-gradient(180deg, #241c10 0%, #191208 100%); border-color: #6a5230; }
    body.dark-mode .picker-head { border-bottom-color: rgba(110,85,50,0.5); }
    body.dark-mode .picker-head h3 { color: #e0c888; }
    body.dark-mode .picker-head input { background: rgba(30,22,12,0.85); color: #e0c888; border-color: rgba(120,95,55,0.5); }
    body.dark-mode .pf-toggle { background: rgba(60,46,24,0.4); color: #b09868; border-color: rgba(120,95,55,0.5); }
    body.dark-mode .pf-toggle.on { background: rgba(138,110,62,0.85); color: #1e160c; }
    body.dark-mode .pick-row .pr-desc { color: #a89468; }
    body.dark-mode .sheet table td { border-bottom-color: rgba(80,60,30,0.25); }
    body.dark-mode .ss-line .k { color: #8a7858; }
    body.dark-mode .ss-line .v { color: #e0c888; }
    body.dark-mode .stat-tile .st-label, body.dark-mode .stat-tile .st-note { color: #8a7858; }
    body.dark-mode .timeline-level .tl-head { color: #c8ac70; }
    body.dark-mode ::-webkit-scrollbar-track { background: rgba(20,14,8,0.6); }
    body.dark-mode ::-webkit-scrollbar-thumb { border-color: rgba(30,22,12,0.8); }