/* Layout — single column by default, two columns on wide screens */
  .app { max-width: 900px; margin: 0 auto; padding: 8px; }
  .columns { display: grid; grid-template-columns: 1fr; gap: 8px; }
  @media (min-width: 768px) {
    .app { padding: 16px; }
    .columns { grid-template-columns: 1fr 1fr; gap: 12px; }
  }

  /* Sections */
  .section-title { background: var(--surface2); padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
  .section-title .title-actions { display: flex; gap: 4px; flex-shrink: 0; }
  .section-title .title-actions button { font-size: 10px; padding: 2px 8px; text-transform: none; letter-spacing: 0; font-weight: 400; }
  .section-title::after { content: '\25B2'; font-size: 8px; color: var(--text2); transition: transform 0.15s; flex-shrink: 0; margin-left: 4px; }
  .section.collapsed .section-title::after { transform: rotate(180deg); }
  .section.collapsed .section-body { display: none; }
  .section-body { padding: 8px; }
  @media (min-width: 768px) { .section-body { padding: 10px 12px; } }

  /* Header */
  .char-name { font-size: 16px; font-weight: 700; color: var(--accent); display: flex; justify-content: space-between; align-items: baseline; }
  .char-name-right { font-size: 11px; font-weight: 400; color: var(--text2); white-space: nowrap; }
  .char-meta { font-size: 11px; color: var(--text2); line-height: 1.5; }
  .char-meta b { color: var(--text); font-weight: 600; }
  .meta-row { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; }
  .meta-right { white-space: nowrap; }

  /* Tables */
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text2); padding: 5px 6px; border-bottom: 1px solid var(--border); font-weight: 600; }
  td { padding: 5px 6px; border-bottom: 1px solid var(--border); }
  tr:last-child td { border-bottom: none; }
  .r { text-align: right; }
  .c { text-align: center; }
  .bold { font-weight: 700; }

  /* Characteristics — table layout, works at any width */
  .chars-table { width: 100%; border-collapse: collapse; text-align: center; }
  .chars-table th, .chars-table td { width: 10%; padding-left: 0; padding-right: 0; }
  .chars-table th { font-size: 11px; font-weight: 700; color: var(--accent); padding: 6px 0 2px; border-bottom: none; text-align: center; }
  .chars-table td { padding: 0; border-bottom: none; }
  .chars-table .val-current { font-size: 18px; font-weight: 700; padding: 6px 0; cursor: pointer; border-bottom: 1px dashed var(--border); }
  .chars-table th.career-char { border-bottom: 2px solid var(--accent); }
  .char-popup { display: none; position: fixed; z-index: 50; background: var(--surface); border: 1px solid var(--accent); border-radius: 6px; padding: 10px 12px; font-size: 13px; color: var(--text); line-height: 1.6; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.5); min-width: 140px; }
  .char-popup.open { display: block; }
  .char-popup .pop-row { display: flex; justify-content: space-between; gap: 12px; }
  .char-popup .pop-label { color: var(--text2); }
  .char-popup .pop-val { font-weight: 600; }
  .char-popup .pop-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; font-weight: 700; color: var(--accent); }

  /* Derived stats */
  .derived { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
  .derived-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stat-box { background: var(--surface2); border-radius: 4px; padding: 6px 6px; text-align: center; }
  .stat-box .label { font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text2); margin-bottom: 1px; }
  .stat-box .value { font-size: 15px; font-weight: 700; }
  .stat-box .sub { font-size: 10px; color: var(--text2); }

  /* Conditions */
  .conditions-grid { display: flex; flex-wrap: wrap; gap: 6px; }
  .cond-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-size: 12px; cursor: pointer; user-select: none; transition: background 0.1s, border-color 0.1s; }
  .cond-chip.active { background: rgba(197, 85, 85, 0.2); border-color: var(--negative); color: var(--negative); }
  .cond-chip .cond-level { font-weight: 700; font-size: 13px; min-width: 14px; text-align: center; }
  .cond-chip .cond-adj { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; color: var(--text); padding: 0; line-height: 1; }
  .cond-chip .cond-adj:active { background: var(--accent2); }
  .spell-tabs { display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
  .spell-tab { flex: 0 0 auto; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--text); }
  .spell-tab.active { background: var(--accent2); border-color: var(--accent); font-weight: 600; }
  .spell-lore-tag { text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }
  .spell-meta { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; justify-content: flex-end; text-align: right; }
  .spell-actions { display: inline-flex; gap: 4px; flex: 0 0 auto; align-self: center; }
  .spell-actions button.small { min-width: auto; padding: 2px 7px; line-height: 1.2; }
  .spell-fav-btn { color: var(--accent); }
  .advantage-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .advantage-row .adv-label { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
  .advantage-row .adv-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; color: var(--text); padding: 0; }
  .advantage-row .adv-btn:active { background: var(--accent2); }
  .advantage-row .adv-val { font-size: 22px; font-weight: 700; min-width: 28px; text-align: center; }
  .advantage-row .adv-val.has-adv { color: var(--positive); }
  .advantage-row .adv-cap { font-size: 11px; color: var(--text2); }
  .cond-effects { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
  .cond-effect-row { font-size: 11px; padding: 2px 0; color: var(--text2); }
  .cond-effect-row b { color: var(--negative); font-weight: 600; }
  .cond-penalty-summary { margin-top: 6px; padding: 6px 8px; background: rgba(197, 85, 85, 0.1); border: 1px solid rgba(197, 85, 85, 0.3); border-radius: 4px; font-size: 12px; color: var(--negative); font-weight: 600; }
  .temp-mods { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
  .temp-mod-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--border); }
  .temp-mod-row:last-child { border-bottom: none; }
  .temp-mod-val { font-weight: 700; text-align: right; flex-shrink: 0; }
  .temp-mod-val.pos { color: var(--positive); }
  .temp-mod-val.neg { color: var(--negative); }
  .temp-mod-target { color: var(--text2); font-size: 11px; }
  .temp-mod-actions { display: flex; gap: 0; margin-left: auto; flex-shrink: 0; }
  .temp-mod-rm { background: none; border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-size: 13px; padding: 2px 8px; line-height: 1.4; }
  .temp-mod-rm:first-child { border-radius: 3px 0 0 3px; }
  .temp-mod-rm:last-child { border-radius: 0 3px 3px 0; }
  .temp-mod-rm:only-child { border-radius: 3px; }
  .temp-mod-rm + .temp-mod-rm { border-left: none; }
  .temp-mod-rm:hover { color: var(--negative); background: var(--surface2); }

  /* Career path */
  .career-path { display: flex; gap: 0; margin-bottom: 8px; }
  .career-step { flex: 1; text-align: center; padding: 6px 4px; border: 1px solid var(--border); font-size: 11px; position: relative; background: var(--surface2); }
  .career-step:first-child { border-radius: 4px 0 0 4px; }
  .career-step:last-child { border-radius: 0 4px 4px 0; }
  .career-step + .career-step { border-left: none; }
  .career-step .step-name { font-weight: 700; font-size: 12px; }
  .career-step .step-status { font-size: 10px; color: var(--text2); }
  .career-step .step-level { font-size: 9px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; }
  .career-step.current { background: rgba(201, 168, 76, 0.15); border-color: var(--accent); z-index: 1; }
  .career-step.current .step-name { color: var(--accent); }
  .career-step.completed { background: rgba(90, 153, 136, 0.1); border-color: var(--positive); }
  .career-step.completed .step-name { color: var(--positive); }
  .career-step.future { opacity: 0.5; }
  .career-progress { margin-bottom: 8px; }
  .career-progress .progress-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-top: 4px; }
  .career-progress .progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
  .career-progress .progress-label { font-size: 11px; color: var(--text2); display: flex; justify-content: space-between; }
  .career-reqs { font-size: 12px; line-height: 1.6; }
  .career-reqs .req-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }
  .career-reqs .req-met { color: var(--positive); }
  .career-reqs .req-unmet { color: var(--text2); }
  .career-reqs .req-icon { width: 16px; text-align: center; flex-shrink: 0; }
  .career-reqs details.req-foldable { display: block; padding: 2px 0; }
  .career-reqs details.req-foldable > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 6px; list-style: none; }
  .career-reqs details.req-foldable > summary::-webkit-details-marker { display: none; }
  .career-reqs details.req-foldable > summary::before { content: "▸"; display: inline-block; width: 10px; color: var(--text2); flex-shrink: 0; }
  .career-reqs details.req-foldable[open] > summary::before { content: "▾"; }
  .career-reqs details.req-foldable > summary > span:first-child { flex: 1; }
  .career-reqs .req-detail { margin: 4px 0 6px 22px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
  .career-reqs .req-detail .req-met { color: var(--positive); }
  .career-reqs .req-detail .req-unmet { color: var(--negative); }
  .career-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

  /* Hit locations — reuse stat-box style */
  .hit-locs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 8px; }
  .hit-loc .ap-val { font-size: 18px; font-weight: 700; }
  .hit-loc .ap-val.magical { color: var(--accent); }

  /* Skill rows */
  .skill-career td:first-child { border-left: 2px solid var(--accent); padding-left: 8px; }
  .skill-talent-marker { color: var(--accent); font-size: 11px; margin-left: 4px; cursor: help; }

  /* Buttons */

  /* XP bar */
  .xp-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .xp-bar .xp-val { font-size: 22px; font-weight: 700; color: var(--accent); }

  /* Modal */
  .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; justify-content: center; align-items: flex-end; }
  .modal-bg.open { display: flex; }
  .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px 12px 0 0; padding: 20px 16px; width: 100%; max-height: 85vh; overflow-y: auto; }
  @media (min-width: 768px) {
    .modal-bg { align-items: center; }
    .modal { max-width: 480px; border-radius: 8px; }
  }
  .modal h3 { color: var(--accent); margin-bottom: 12px; font-size: 16px; }
  .modal label { display: block; font-size: 12px; color: var(--text2); margin: 8px 0 3px; }
  .modal input, .modal select, .modal textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 4px; font-size: 14px; }
  .modal textarea { min-height: 60px; resize: vertical; }
  .modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
  .modal .actions button { padding: 8px 16px; }

  /* XP log */
  .log-entry { padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }
  .log-entry:last-child { border-bottom: none; }
  .log-earned { color: var(--positive); white-space: nowrap; }
  .log-spent { color: var(--negative); white-space: nowrap; }

  /* Toolbar */
  .toolbar { display: flex; gap: 6px; padding: 2px 0 6px; flex-wrap: wrap; align-items: center; }
  /* Pin trigger buttons to a uniform height and flex-center their glyphs so
     emoji/symbol ascent-descent quirks can't shift one button off the row. */
  .toolbar > button,
  .refs-dropdown-wrap > button,
  .hamburger-wrap > button { height: 30px; display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; line-height: 1; }
  .hamburger-wrap { display: none; position: relative; }
  button.hamburger-btn { font-size: 18px; padding: 6px 12px; }
  .hamburger-menu { display: none; position: absolute; top: 100%; right: 0; z-index: 95; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 0; min-width: 160px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
  .hamburger-menu.open { display: block; }
  .hamburger-menu button { width: 100%; text-align: left; border: none; border-radius: 0; padding: 8px 12px; font-size: 13px; background: none; display: flex; align-items: center; gap: 8px; }
  .menu-icon { width: 20px; text-align: center; flex-shrink: 0; }
  .hamburger-menu button:active { background: var(--surface2); }
  /* References dropdown (toolbar) */
  .refs-dropdown-wrap { position: relative; }
  .refs-dropdown { display: none; position: absolute; top: 100%; left: 0; z-index: 95; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 0; min-width: 140px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); margin-top: 2px; }
  .refs-dropdown.open { display: block; }
  .refs-dropdown button { width: 100%; text-align: left; border: none; border-radius: 0; padding: 6px 12px; font-size: 13px; background: none; }
  .refs-dropdown button:hover { background: var(--surface2); }
  @media (max-width: 767px) {
    .hamburger-wrap { display: block; }
    .toolbar .desktop-only { display: none; }
  }

  /* Print-only elements (hidden on screen) */
  .print-ref { display: none; }
  .print-skills { display: none; }
  .print-xp { display: none; }
  .print-name-career { display: none; }
  .print-3col, .print-bottom-row { display: none; }
  .char-name-right b { color: var(--text); }
  .weapon-sub { display: none; }
  .print-chars-inline, .print-derived-inline { display: none; }
  .print-wealth-inline { display: none; }
  .print-ap-inline { display: none; }

  /* Print */
  @media print {
    @page { size: A4; margin: 10mm; }
    html, body { height: auto !important; overflow: visible !important; }
    body { background: #fff; color: #000; font-size: 9pt; }
    * { color: #000 !important; }
    .dim, .small.dim, .sub, [class*="print-skill-char"], [class*="print-skill-adv"] { color: #666 !important; }
    .app { max-width: none; padding: 0; }
    .columns { display: block; }
    .section { border: 1px solid #ccc; break-inside: avoid; margin-bottom: 4mm; border-radius: 0; }
    .section-title { background: #eee; color: #333; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .section-title::after { display: none; }
    .section-title .title-actions { display: none; }
    .section.collapsed .section-body { display: block; }
    .toolbar, .modal-bg, .tab-bar, .spell-tabs { display: none !important; }
    button, .btn { display: none !important; }

    /* Compact header */
    .char-name { font-size: 11pt !important; }
    .char-name-right { display: none !important; }
    .print-xp { display: inline !important; font-size: 7pt; font-weight: 400; color: #555; margin-left: auto; }
    .print-name-career { display: inline !important; font-size: 10pt; font-weight: 400; color: #444; }
    .char-meta { font-size: 7pt !important; line-height: 1.3 !important; }
    .meta-right { display: none !important; }
    .section { margin-bottom: 0 !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-bottom: none !important; }
    .section-title { font-size: 8pt !important; padding: 2px 4px !important; background: none !important; border-bottom: 1px solid #999 !important; }
    .section-body { padding: 2px 4px !important; }

    .no-print-title > .section-title { display: none !important; }

    /* Characteristics + Derived: hide boxes, show inline */
    .chars-table { display: none !important; }
    .derived-wrap { display: none !important; }
    .print-chars-inline { display: flex !important; justify-content: space-between; font-size: 12pt; padding: 2px 0; }
    .print-derived-inline { display: flex !important; justify-content: space-between; font-size: 8pt; padding: 1px 0; }
    .print-char { white-space: nowrap; }
    .print-char-career { border-bottom: 1.5px solid #000; }
    .print-derived-inline span { white-space: nowrap; color: #444; }
    .print-derived-inline b { color: #000; }

    /* Hide section titles for characteristics and derived stats */
    .stat-box { border: none !important; background: none !important; padding: 0 4px !important; }
    .stat-box .value { border-bottom: none !important; cursor: default !important; }
    .chars-table .val-current, .stat-box .value, .xp-val { color: #000; }
    .chars-table th, .stat-box .label, th { color: #555; }
    .accent { color: #333; }
    tr:hover { background: none; }
    .char-popup { display: none !important; }
    .print-hide { display: none !important; }
    .log-entry { font-size: 8pt; }

    /* Talents: stack name and description */
    .talent-name, .talent-desc { display: block !important; }
    .talent-desc { font-size: 7pt !important; color: #666; padding-left: 0 !important; }
    td.talent-name { padding-bottom: 0 !important; border-bottom: none !important; }
    td.talent-desc { padding-top: 0 !important; }

    /* Spells: stats below name */
    .spell-header-row { display: block !important; }
    .spell-meta { display: contents !important; }
    .spell-stats { display: block !important; font-size: 7pt !important; }
    .spell-effect { font-size: 7pt !important; }
    .spell-row { padding: 2px 0 !important; }

    /* Armour: 3-wide hit locations with roll ranges */
    .hit-locs { grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; margin-bottom: 2px !important; }
    .hit-loc .sub { font-size: 5pt !important; }
    .hit-loc .ap-val { font-size: 10px !important; }
    .hit-loc .label { font-size: 6pt !important; }
    .print-ap-inline { display: none !important; }

    /* Weapons: 2-column layout in print - hide Group and Reach columns */
    .print-3col table th, .print-3col table td { padding: 1px 2px !important; font-size: 7pt !important; }
    .print-3col .weapon-group, .print-3col .weapon-reach { display: none !important; }
    .print-3col .weapon-name .weapon-sub { display: block; font-weight: 400; font-size: 6pt; color: #666; }

    /* Wealth: 6-cell grid */
    .print-wealth-inline { display: grid !important; grid-template-columns: repeat(6, 1fr); font-size: 8pt; font-weight: 700; padding: 2px 0; }
    .pw-label { text-align: left; padding-left: 4px; }
    .pw-label:first-child { padding-left: 0; }
    .pw-val { text-align: right; padding-right: 4px; }

    /* Bottom row: trappings 1/3, spells 2/3 */
    .print-bottom-row { display: grid !important; grid-template-columns: 1fr 2fr; gap: 0 4mm; }
    .print-bottom-left table td, .print-bottom-left table th { padding: 0 2px !important; font-size: 7pt !important; border-bottom: none !important; }
    .print-bottom-left table td.c { text-align: right !important; width: 20px; }
    .print-bottom-right .spell-row { border-bottom: 0.5px solid #ddd !important; padding: 1px 0 !important; }

    /* Spells in print: title and CN on one line */
    .print-bottom-right .spell-header-row { display: flex !important; justify-content: space-between; align-items: baseline; }
    .print-bottom-right .spell-stats { display: inline !important; }

    /* 3-column layout for talents | psych+ambitions | armour */
    .print-3col { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 0 4mm; }
    .print-3col .section-body table { font-size: 7pt; }
    .print-3col .section-body table td, .print-3col .section-body table th { padding: 1px 3px; }
    .print-3col .section-title { font-size: 7pt !important; }


    /* Skills: hide screen table, show 3-column print list */
    .print-skills-hide { display: none !important; }
    .print-skills { display: block !important; columns: 3; -webkit-columns: 3; column-gap: 4mm; column-rule: 0.5px solid #ccc; font-size: 7.5pt; }
    .print-skill-row { display: flex; padding: 1px 2px; break-inside: avoid; border-bottom: 0.5px solid #eee; }
    .print-skill-row .psr-name { flex: 1; }
    .print-skill-row .psr-char { width: 20px; text-align: center; color: #888 !important; font-size: 7pt; }
    .print-skill-row .psr-adv { width: 20px; text-align: center; color: #888 !important; font-size: 7pt; }
    .print-skill-row .psr-val { width: 22px; text-align: center; font-weight: 700; }

    /* Print reference pages */
    .print-ref { display: block; page-break-before: always; }
    .print-ref h2 { font-size: 11pt; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #000; padding-bottom: 0.5mm; margin: 0 0 1.5mm; }
    .print-ref h3 { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.5px; color: #666; margin: 1.5mm 0 0.5mm; border-bottom: 0.5px solid #ccc; padding-bottom: 0.3mm; }
    .print-ref .ref-card { margin-bottom: 0.8mm; break-inside: avoid; }
    .print-ref .ref-header { display: flex; justify-content: space-between; align-items: baseline; }
    .print-ref .ref-name { font-weight: bold; font-size: 8pt; }
    .print-ref .ref-meta { font-size: 6.5pt; color: #666; }
    .print-ref .ref-effect { font-size: 7pt; margin-top: 0.2mm; line-height: 1.3; }
    .print-ref .ref-desc { font-size: 7pt; color: #444; margin-top: 0.3mm; line-height: 1.3; padding-left: 1.5mm; border-left: 1px solid #ccc; }
  }

  /* Mobile tab bar */
  .tab-bar { display: none; }
  @media (max-width: 767px) {
    .tab-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--surface); border-top: 1px solid var(--border); padding: 0; }
    .tab-bar button { flex: 1; background: none; border: none; color: var(--text2); font-size: 10px; padding: 8px 2px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 0; cursor: pointer; }
    .tab-bar button.active { color: var(--accent); }
    .tab-bar button .tab-icon { font-size: 18px; line-height: 1; }
    .app { padding-bottom: 64px; }
  }

  /* Home / Load screen */
  .load-screen { display: flex; flex-direction: column; align-items: center; min-height: 80vh; gap: 20px; padding: 20px; }
  .home-title { text-align: center; margin-top: 60px; }
  .home-title h1 { color: var(--accent); font-size: 28px; font-weight: 700; letter-spacing: 2px; }
  .home-subtitle { color: var(--text2); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; margin-top: 4px; }
  .home-actions { display: flex; gap: 10px; margin-top: 8px; }
  .home-btn { padding: 10px 20px; font-size: 13px; text-decoration: none; }
  .home-pregens { width: 100%; max-width: 420px; margin-top: 8px; }
  .home-pregens-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text2); margin-bottom: 8px; }
  .pregen-card { border: 1px solid var(--border); background: var(--surface); padding: 10px 14px; margin-bottom: 6px; border-radius: 6px; cursor: pointer; transition: border-color 0.15s; }
  .pregen-card:hover { border-color: var(--accent); }
  .pregen-name { font-size: 14px; font-weight: 600; color: var(--text); }
  .pregen-meta { font-size: 12px; color: var(--text2); margin-top: 2px; }
  .drop-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 32px; text-align: center; color: var(--text2); width: 100%; max-width: 420px; cursor: pointer; transition: border-color 0.15s, color 0.15s; font-size: 13px; }
  .drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); color: var(--accent); }