:root {
    --bg: #0a0908; --bg-2: #14110f; --bg-3: #1d1816;
    --ink: #e8dcc4; --ink-dim: #9b8d72; --ink-faint: #5a4f3e;
    --gold: #c9a44c; --gold-bright: #e8c468; --gold-deep: #8a6f2d;
    --blood: #8b1a1a; --blood-bright: #c92626;
    --rule: #2d2520;
    --shadow: 0 2px 0 #000, 0 0 24px rgba(201,164,76,0.08);
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'EB Garamond', Georgia, serif; font-size: 17px; line-height: 1.5; height: 100dvh; overscroll-behavior: none; }
  body {
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,164,76,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 100% 50% at 50% 100%, rgba(139,26,26,0.05) 0%, transparent 70%),
      var(--bg);
    height: 100dvh; overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 2px),
      repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 3px);
    z-index: 1; mix-blend-mode: overlay;
  }
  /* Flex layout isolated to this wrapper — body itself stays a plain block so the
     fixed-position sheet/overlay (siblings of .app-shell) anchor to the viewport
     the same way they always have, unaffected by the nav-scroll fix below. */
  .app-shell { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
  .app { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 24px 18px 48px; flex: 1; overflow-y: auto; width: 100%; }

  .header { text-align: center; padding: 14px 0 18px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; position: relative; }
  .header::after { content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
  .eagle { font-family: 'Cinzel', serif; font-weight: 900; font-size: 11px; letter-spacing: 0.4em; color: var(--gold); margin-bottom: 4px; text-transform: uppercase; }
  .title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 24px; letter-spacing: 0.08em; color: var(--ink); margin: 0; line-height: 1.1; }
  .subtitle { font-style: italic; font-size: 13px; color: var(--ink-dim); margin-top: 6px; letter-spacing: 0.02em; }

  .level-pane { background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%); border: 1px solid var(--rule); border-radius: 4px; padding: 18px 16px 20px; margin-bottom: 22px; position: relative; box-shadow: var(--shadow); }
  .level-pane::before, .level-pane::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid var(--gold); opacity: 0.5; }
  .level-pane::before { top: 4px; left: 4px; border-right: none; border-bottom: none; }
  .level-pane::after { bottom: 4px; right: 4px; border-left: none; border-top: none; }
  .level-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.3em; color: var(--ink-dim); text-align: center; text-transform: uppercase; margin-bottom: 8px; }
  .level-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
  .level-btn { width: 56px; height: 56px; font-family: 'Cinzel', serif; font-size: 28px; font-weight: 700; background: var(--bg); color: var(--gold); border: 1px solid var(--gold-deep); border-radius: 50%; cursor: pointer; user-select: none; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4); }
  .level-btn:active { background: var(--gold-deep); color: var(--bg); transform: scale(0.94); }
  .level-btn:disabled { opacity: 0.25; cursor: not-allowed; }
  .level-display { flex: 0 0 auto; text-align: center; min-width: 100px; }
  .level-num { font-family: 'Cinzel', serif; font-weight: 900; font-size: 56px; color: var(--gold-bright); line-height: 1; text-shadow: 0 0 24px rgba(201,164,76,0.4); letter-spacing: -0.02em; }
  .level-tag { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.25em; color: var(--ink-faint); margin-top: 6px; text-transform: uppercase; }
  .top-actions { display: flex; gap: 8px; margin-bottom: 14px; }
  .top-actions button { flex: 1; background: transparent; color: var(--ink-dim); border: 1px solid var(--rule); padding: 9px 8px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 2px; cursor: pointer; }
  .top-actions button:active { background: var(--bg-3); color: var(--gold); }
  #reorder-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201,164,76,0.08); }

  .roster { margin-top: 20px; }
  .roster-heading { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.35em; color: var(--ink-dim); text-transform: uppercase; text-align: center; margin: 24px 0 14px; position: relative; }
  .roster-heading::before, .roster-heading::after { content: ''; position: absolute; top: 50%; width: 25%; height: 1px; }
  .roster-heading::before { left: 5%; background: linear-gradient(90deg, transparent, var(--rule)); }
  .roster-heading::after { right: 5%; background: linear-gradient(90deg, var(--rule), transparent); }

  .char-card { background: var(--bg-2); border-left: 3px solid var(--gold-deep); margin-bottom: 10px; padding: 12px 14px 13px 14px; position: relative; border-radius: 0 4px 4px 0; display: flex; gap: 12px; align-items: flex-start; transition: opacity 0.2s ease, transform 0.1s ease; cursor: pointer; user-select: none; -webkit-user-select: none; }
  .char-card:active { transform: scale(0.99); }
  .char-card.long-pressing { background: var(--bg-3); box-shadow: 0 0 0 1px var(--gold) inset; }
  .char-card.is-mc { border-left-color: var(--blood-bright); background: linear-gradient(90deg, rgba(139,26,26,0.12) 0%, var(--bg-2) 40%); }
  .char-card.is-mc.long-pressing { background: linear-gradient(90deg, rgba(139,26,26,0.2) 0%, var(--bg-3) 40%); }
  .char-card.unavailable { opacity: 0.42; }
  .char-card.unavailable .char-pick, .char-card.unavailable .char-extra { display: none; }
  .char-card.no-pick:not(.unavailable) { opacity: 0.6; }

  .portrait { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; position: relative; background: var(--bg-3); border: 1px solid var(--gold-deep); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5); }
  .char-card.is-mc .portrait { border-color: var(--blood-bright); }
  .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .portrait-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-weight: 900; font-size: 22px; color: var(--gold-deep); background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%); }
  .char-card.unavailable .portrait { filter: grayscale(0.8) brightness(0.6); }

  .char-body { flex: 1 1 auto; min-width: 0; }
  .char-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .char-name { font-family: 'Cinzel', serif; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: var(--ink); text-transform: uppercase; }
  .char-card.is-mc .char-name { color: var(--gold-bright); }
  .char-arch { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
  .char-pick { margin-top: 6px; font-family: 'EB Garamond', serif; font-size: 17px; color: var(--gold-bright); font-weight: 500; line-height: 1.3; }
  .char-pick.has-info::after { content: ' ⓘ'; font-size: 11px; color: var(--gold-deep); vertical-align: super; opacity: 0.7; }
  .char-extra { margin-top: 3px; font-family: 'EB Garamond', serif; font-size: 14px; color: var(--ink-dim); font-style: italic; line-height: 1.3; }
  .char-extra::before { content: '+ '; color: var(--gold-deep); font-style: normal; }
  .char-empty { margin-top: 6px; font-family: 'EB Garamond', serif; font-style: italic; color: var(--ink-faint); font-size: 14px; }
  .char-build-name { margin-top: 2px; font-size: 11px; color: var(--ink-faint); font-style: italic; letter-spacing: 0.02em; line-height: 1.2; }
  .char-unavailable { margin-top: 6px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.2em; color: var(--ink-faint); text-transform: uppercase; }
  .char-unavailable::before { content: '⛓ '; color: var(--blood); }

/* ── DLC badge ── */
.dlc-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #7ecef4; border: 1px solid rgba(126,206,244,0.35);
  background: rgba(126,206,244,0.08);
  padding: 1px 5px; border-radius: 3px;
  margin-top: 3px;
}
.dlc-badge-build { font-size: 10px; padding: 2px 8px; margin: 4px 0 0; display: block; width: fit-content; }
.dlc-badge-gear  { margin-bottom: 8px; }
.dlc-badge-pill  { font-size: 8px; padding: 1px 4px; vertical-align: middle; margin-left: 4px; }
.desc-block .dlc-badge { display: inline-block; margin: 2px 0 4px; }

  .char-archetype-callout {
    margin-top: 8px;
    padding: 6px 10px;
    background: linear-gradient(90deg, rgba(201,164,76,0.16) 0%, rgba(201,164,76,0.04) 100%);
    border-left: 2px solid var(--gold-bright);
    border-radius: 0 3px 3px 0;
    font-family: 'EB Garamond', serif;
    font-size: 14px;
    color: var(--gold-bright);
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
  }
  .char-archetype-callout .ac-tag {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--ink-dim);
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .char-archetype-callout .ac-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--gold-bright);
    text-transform: uppercase;
  }
  .char-archetype-callout::before {
    content: '⚜';
    font-size: 14px;
    color: var(--gold);
    margin-right: 2px;
  }

  /* Catch-up gear/skills panel */
  .extras-panel {
    margin: 18px 0 6px;
    padding: 14px;
    background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border: 1px solid var(--rule);
    border-radius: 4px;
  }
  .extras-heading {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule);
  }
  .skills-block {
    font-family: 'EB Garamond', serif;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.4;
  }
  .gear-list { margin: 0; padding: 0; list-style: none; }
  .gear-row {
    display: flex; gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rule);
    align-items: flex-start;
  }
  .gear-row:last-child { border-bottom: none; }
  .gear-slot {
    flex: 0 0 76px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--ink-dim);
    text-transform: uppercase;
    padding-top: 3px;
  }
  .gear-options {
    flex: 1 1 auto;
    font-family: 'EB Garamond', serif;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.5;
  }
  .gear-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 12px;
    color: var(--gold-bright);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .gear-pill:active { background: var(--bg-3); border-color: var(--gold); }
  .gear-pill.unknown {
    color: var(--ink-dim);
    cursor: default;
    border-style: dashed;
  }
  .gear-pill .gear-pill-loc {
    font-size: 10px;
    color: var(--ink-faint);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.1em;
  }
  .gear-detail {
    font-family: 'EB Garamond', serif;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.55;
  }
  .gear-detail-row {
    display: flex; gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--rule);
  }
  .gear-detail-row:last-child { border-bottom: none; }
  .gear-detail-label {
    flex: 0 0 80px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ink-dim);
    text-transform: uppercase;
    padding-top: 3px;
  }
  .gear-detail-value { flex: 1 1 auto; }
  .longpress-hint { font-size: 10px; font-style: italic; color: var(--ink-faint); text-align: center; margin-top: 8px; letter-spacing: 0.05em; }

  .setup-section { margin-bottom: 28px; }
  .setup-heading { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.3em; color: var(--gold); text-transform: uppercase; border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 14px; }
  .setup-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding: 10px 12px; background: var(--bg-2); border-left: 2px solid var(--rule); border-radius: 0 3px 3px 0; }
  .setup-label { font-family: 'Cinzel', serif; font-size: 12px; color: var(--ink-dim); letter-spacing: 0.15em; text-transform: uppercase; }
  .setup-row.mc-row { border-left-color: var(--blood-bright); }
  .setup-row.mc-row .setup-label { color: var(--gold-bright); }
  select, input[type="number"], input[type="text"], input[type="password"] { background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 3px; padding: 10px 12px; font-family: 'EB Garamond', serif; font-size: 16px; width: 100%; -webkit-appearance: none; appearance: none; }
  select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c9a44c' d='M6 8L0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
  select:focus, input:focus { outline: none; border-color: var(--gold); }
  select option { background: var(--bg); color: var(--ink); }
  .companion-setup-row { gap: 8px; }
  .companion-setup-grid { display: grid; grid-template-columns: 1fr 80px; gap: 8px; align-items: end; }
  .join-input-wrap { display: flex; flex-direction: column; gap: 4px; }
  .join-input-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-faint); letter-spacing: 0.15em; text-transform: uppercase; text-align: center; }
  input[type="number"] { padding: 10px 8px; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: var(--gold); }
  input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; }

  .save-btn { width: 100%; padding: 14px; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--bg); border: 1px solid var(--gold-bright); font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 3px; cursor: pointer; margin-top: 12px; box-shadow: 0 0 18px rgba(201,164,76,0.18), inset 0 1px 0 rgba(255,255,255,0.2); }
  .save-btn:active { transform: translateY(1px); }
  .reset-btn { width: 100%; padding: 12px; background: transparent; color: var(--ink-dim); border: 1px solid var(--rule); font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 3px; cursor: pointer; margin-top: 8px; }
  .footer-note { text-align: center; font-size: 11px; color: var(--ink-faint); margin-top: 28px; font-style: italic; letter-spacing: 0.05em; }
  .app-about { text-align: center; margin-top: 10px; padding-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .app-about-version { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-faint); letter-spacing: 0.05em; }
  .app-about-sep { color: var(--ink-faint); font-size: 10px; }
  .app-about-link { font-family: 'Cinzel', serif; font-size: 9px; color: var(--ink-faint); text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; }
  .app-about-link:hover { color: var(--gold); }

  /* About sheet */
  .about-sheet { padding: 4px 0; }
  .about-blurb { font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.6; color: var(--ink); margin-bottom: 14px; }
  .about-blurb strong { color: var(--gold-bright); }
  .about-section-heading { font-family: 'Cinzel', serif; font-size: 11px; color: var(--gold); letter-spacing: 0.15em; text-transform: uppercase; margin: 20px 0 8px; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
  .about-sources { font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.8; color: var(--ink); padding-left: 18px; margin-bottom: 14px; }
  .about-link { color: var(--gold); text-decoration: none; }
  .about-link:hover { color: var(--gold-bright); text-decoration: underline; }
  .about-disclaimer { font-family: 'EB Garamond', serif; font-size: 12px; color: var(--ink-faint); line-height: 1.5; margin-top: 24px; font-style: italic; }
  .about-update-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .about-update-version { font-family: monospace; font-size: 13px; color: var(--ink-faint); min-width: 52px; }
  .about-update-btn { background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; color: var(--ink); font-size: 13px; padding: 5px 12px; cursor: pointer; }
  .about-update-btn:disabled { opacity: 0.5; cursor: default; }
  .about-update-status { font-size: 12px; }
  .about-update-status.checking { color: var(--ink-faint); }
  .about-update-status.ok      { color: #4caf50; }
  .about-update-status.ready   { color: var(--gold); }
  .about-update-status.error   { color: #e57373; }

  /* SW update badge + toast */
  .update-badge {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    z-index: 200;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gold); color: var(--bg-1);
    border: none; font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; touch-action: manipulation;
    box-shadow: 0 2px 12px rgba(201,164,76,0.5);
    animation: update-pulse 2s ease-in-out infinite;
  }
  .update-badge.hidden { display: none !important; }
  @keyframes update-pulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(201,164,76,0.4); }
    50%       { box-shadow: 0 2px 22px rgba(201,164,76,0.85), 0 0 0 5px rgba(201,164,76,0.15); }
  }
  .update-toast {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 54px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    z-index: 200;
    background: var(--bg-2); border: 1px solid var(--gold-deep);
    border-radius: 6px; padding: 14px 16px; max-width: 230px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.65);
  }
  .update-toast.hidden { display: none !important; }
  .update-toast-text {
    font-family: 'EB Garamond', serif; font-size: 14px;
    color: var(--ink); line-height: 1.5; margin-bottom: 12px;
  }
  .update-toast-reload {
    width: 100%; padding: 9px; background: rgba(201,164,76,0.12);
    border: 1px solid var(--gold-deep); border-radius: 3px;
    color: var(--gold); font-family: 'Cinzel', serif;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; touch-action: manipulation;
  }
  .update-toast-reload:active { background: rgba(201,164,76,0.25); }

  .hidden { display: none !important; }
  .setup-tip { font-size: 13px; color: var(--ink-dim); font-style: italic; margin-bottom: 18px; text-align: center; line-height: 1.5; }
  .setup-tip strong { color: var(--gold); font-style: normal; }
  .level-btn, button { touch-action: manipulation; }

  /* === BOTTOM SHEET (description + catch-up) === */
  .sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .sheet-overlay.open { opacity: 1; pointer-events: auto; }
  .sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 101;
    background: var(--bg-2);
    border-top: 1px solid var(--gold-deep);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.6), 0 0 24px rgba(201,164,76,0.1);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 85vh;
    display: flex; flex-direction: column;
    overflow: visible; /* don't clip — iOS blocks inner touch-scroll when parent is overflow:hidden */
    padding-bottom: env(safe-area-inset-bottom);
    user-select: none; -webkit-user-select: none;
  }
  .sheet.open { transform: translateY(0); }
  /* When keyboard is open JS sets explicit height; disable safe-area padding so it doesn't add extra */
  .sheet.keyboard-open { padding-bottom: 0; border-radius: 0; transition: none; }
  /* Full-screen note edit mode */
  .sheet.note-editing {
    max-height: 100dvh; height: 100dvh; border-radius: 0; transition: none;
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden; /* clip to bounding box — textarea has its own overflow-y:scroll */
  }
  .sheet.note-editing.keyboard-open { padding-bottom: 0; }
  /* Remove sheet-body padding so editor fills edge-to-edge; toolbar handles its own inset */
  .sheet.note-editing .sheet-body { padding: 0; background: var(--bg-2); }
  /* Toolbar resets margin/padding for edge-to-edge context */
  .sheet.note-editing .note-toolbar { margin: 0; padding: 10px 18px 8px; top: 0; }
  .sheet-grabber {
    width: 40px; height: 4px;
    background: var(--ink-faint);
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }
  .sheet-header {
    display: flex;
    align-items: center; justify-content: space-between;
    padding: 8px 18px 12px;
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
    gap: 12px;
  }
  .sheet-title {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--gold);
    text-transform: uppercase;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sheet-close {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  .sheet-close:active { background: var(--bg-3); color: var(--gold); }
  .sheet-back {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--gold);
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 22px;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    padding: 0 0 2px 0;
  }
  .sheet-back:active { background: var(--bg-3); color: var(--gold-bright); }
  .sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Description sheet content */
  .desc-block { margin-bottom: 22px; }
  .desc-block:last-child { margin-bottom: 0; }
  .desc-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--gold-bright);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
  }
  .desc-source {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .desc-text {
    font-family: 'EB Garamond', serif;
    font-size: 16px;
    color: var(--ink);
    line-height: 1.55;
  }
  .desc-text-missing {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--ink-faint);
    font-size: 14px;
  }
  .desc-context {
    font-family: 'EB Garamond', serif;
    font-size: 12px;
    font-style: italic;
    color: var(--ink-dim);
    text-align: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--rule);
  }

  /* Catch-up timeline */
  .catchup-meta {
    text-align: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
  }
  .catchup-build-name {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--ink-dim);
    font-size: 14px;
  }
  .catchup-archetype {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    margin-top: 4px;
    text-transform: uppercase;
  }
  .catchup-archetype-path {
    margin-top: 8px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-bright);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
  }
  .catchup-archetype-path .ap-tier {
    padding: 3px 10px;
    border: 1px solid var(--gold-deep);
    border-radius: 12px;
    background: rgba(201,164,76,0.06);
  }
  .catchup-archetype-path .ap-arrow {
    color: var(--ink-faint);
    font-family: serif;
    font-weight: 400;
  }
  .timeline-item {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
  }
  .timeline-item:last-child { border-bottom: none; }
  .timeline-item.has-info { cursor: pointer; }
  .timeline-item.has-info:active { background: rgba(201,164,76,0.05); }
  .timeline-item.is-current {
    background: linear-gradient(90deg, rgba(201,164,76,0.08) 0%, transparent 60%);
    margin-left: -18px; margin-right: -18px;
    padding-left: 18px; padding-right: 18px;
  }
  .timeline-level {
    flex: 0 0 auto;
    width: 38px;
    text-align: center;
  }
  .timeline-level-num {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--gold);
    line-height: 1;
  }
  .timeline-item.is-current .timeline-level-num { color: var(--gold-bright); text-shadow: 0 0 12px rgba(201,164,76,0.4); }
  .timeline-level-tag {
    font-family: 'Cinzel', serif;
    font-size: 8px;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    text-transform: uppercase;
    margin-top: 2px;
  }
  .timeline-pick {
    flex: 1 1 auto;
    min-width: 0;
  }
  .timeline-main {
    font-family: 'EB Garamond', serif;
    font-size: 16px;
    color: var(--gold-bright);
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
  }
  .timeline-main.has-info::after { content: ' ⓘ'; font-size: 10px; color: var(--gold-deep); opacity: 0.7; vertical-align: super; }
  .timeline-extra {
    font-family: 'EB Garamond', serif;
    font-size: 13px;
    color: var(--ink-dim);
    font-style: italic;
    margin-top: 3px;
    line-height: 1.3;
    cursor: pointer;
  }
  .timeline-extra.has-info::after { content: ' ⓘ'; font-size: 9px; color: var(--gold-deep); opacity: 0.7; vertical-align: super; }
  .timeline-extra::before { content: '+ '; color: var(--gold-deep); font-style: normal; }
  .timeline-empty {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--ink-faint);
    font-size: 13px;
  }
  .timeline-section-mark {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--ink-faint);
    text-transform: uppercase;
    text-align: center;
    margin: 16px 0 8px;
    padding: 4px 0;
    border-top: 1px dashed var(--rule);
    border-bottom: 1px dashed var(--rule);
  }

/* === TIMELINE TABS === */
.tab-bar {
  display: flex;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 8px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  margin-bottom: -1px;
  touch-action: manipulation;
}
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab-btn:active { color: var(--ink); }

/* === STATS PANEL === */
.stats-panel { padding: 4px 0 12px; }
.stats-disclaimer {
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  line-height: 1.4;
  padding: 6px 8px;
  border-left: 2px solid var(--rule);
  margin-bottom: 10px;
}
.stats-origin {
  font-size: 12px;
  color: var(--ink-dim);
  font-style: italic;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.4;
}
.stats-heading {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 14px 0 8px;
}
.stats-table {
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.stats-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 64px);
  border-bottom: 1px solid var(--rule);
}
.stats-row:last-child { border-bottom: none; }
.stats-header { background: rgba(255,255,255,0.03); }
.stats-cell {
  padding: 7px 8px;
  font-size: 13px;
  color: var(--ink-dim);
  text-align: center;
}
.stats-cell:first-child { text-align: left; }
.stats-header .stats-cell {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stats-name { display: flex; flex-direction: column; gap: 1px; }
.stats-abbr {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.stats-fullname { font-size: 11px; color: var(--ink-faint); }
.stats-total {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-bright);
}
.stats-ap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 8px 10px;
  background: rgba(201,164,76,0.06);
  border: 1px solid var(--gold-deep);
  border-radius: 3px;
  font-size: 13px;
  color: var(--ink-dim);
}
.stats-ap-val {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}
.stats-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.stats-skill-pill {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--ink-dim);
  background: var(--bg-3);
}
.stats-none {
  font-style: italic;
  color: var(--ink-faint);
  font-size: 13px;
  margin-top: 12px;
}

/* === PICK CHOICE UI === */
.choice-section {
  border-left: 2px solid var(--gold-deep);
  padding-left: 10px;
  margin-bottom: 18px;
}
.choice-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.choice-option {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.choice-option.is-taken { opacity: 0.45; }
.choice-option-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--gold-bright);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.choice-option.is-taken .choice-option-name { color: var(--ink-dim); }
.choice-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  touch-action: manipulation;
}
.choice-btn-take { background: transparent; color: var(--gold); border: 1px solid var(--gold-deep); }
.choice-btn-take:active { background: var(--gold-deep); }
.choice-btn-untake { background: transparent; color: var(--ink-faint); border: 1px solid var(--rule); }
.choice-btn-untake:active { color: var(--ink); }

/* ── Bottom navigation bar ─────────────────────────────────────────────────── */
.bottom-nav {
  /* No z-index: nav is a flex item, and z-index on a flex item creates a
     stacking context even at position:static — a stray value here would
     out-rank the fixed-position sheet (z-index 101) and paint on top of it. */
  flex-shrink: 0; width: 100%;
  display: flex;
  background: var(--bg-2);
  border-top: 1px solid var(--gold-deep);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 8px 2px 7px;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-faint); font-family: 'Cinzel', serif;
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: color 0.15s;
}
.nav-btn:active { color: var(--ink); }
.nav-btn.active { color: var(--gold); }
.nav-icon {
  width: 20px; height: 20px; fill: currentColor;
}
/* Nav is a flex sibling of .app — no bottom padding compensation needed */

/* ── Section views ──────────────────────────────────────────────────────────── */
.section-view { }
.section-view.hidden { display: none; }

/* ── Holdings section (Colonies + Voidship) ─────────────────────────────────── */
.holdings-tab-bar {
  display: flex; gap: 6px; margin-bottom: 18px;
}
.holdings-tab-btn {
  flex: 1; padding: 8px 0; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--bg-3); color: var(--ink-dim); font-family: 'Cinzel', serif;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.holdings-tab-btn.active {
  background: rgba(201,164,76,0.08); color: var(--gold-bright); border-color: var(--gold-deep);
}
.holdings-tab-btn:hover:not(.active) { background: var(--bg-2); color: var(--gold); }

.voidship-name-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.voidship-name-input {
  flex: 1; color: var(--gold-bright); font-family: 'Cinzel', serif;
  font-size: 1rem; padding: 8px 10px; min-width: 0;
}
.voidship-name-input:focus { outline: none; border-color: var(--gold); }
.voidship-name-input::placeholder { color: var(--ink-faint); }
.voidship-progress {
  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
  color: var(--ink-dim); white-space: nowrap;
}
.voidship-pick-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px;
}
.voidship-option {
  position: relative; padding: 10px 28px 10px 10px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--bg-3);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.voidship-option:hover { border-color: var(--gold-deep); background: var(--bg-2); }
.voidship-option.is-chosen {
  border-color: var(--gold); background: rgba(201,164,76,0.08);
  box-shadow: 0 0 0 1px rgba(201,164,76,0.2);
}
.voidship-option-type {
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.voidship-option.is-chosen .voidship-option-type { color: var(--gold-deep); }
.voidship-option-name {
  font-family: 'EB Garamond', serif; font-size: 0.95rem; color: var(--ink-dim);
  line-height: 1.2;
}
.voidship-option.is-chosen .voidship-option-name { color: var(--gold-bright); }
.voidship-option-info {
  position: absolute; top: 6px; right: 6px;
  background: none; border: none; color: var(--ink-faint); font-size: 0.85rem;
  cursor: pointer; padding: 2px 4px; line-height: 1;
}
.voidship-option:hover .voidship-option-info,
.voidship-option.is-chosen .voidship-option-info { color: var(--ink-dim); }
.voidship-option.is-future { opacity: 0.38; }
.voidship-option.is-future.is-chosen { opacity: 1; }
.voidship-opt-check {
  font-size: 1.1rem; color: var(--ink-faint); margin-bottom: 4px; line-height: 1;
}
.voidship-option.is-chosen .voidship-opt-check { color: var(--gold); }
.voidship-rank-stepper {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.voidship-rank-label { font-size: 0.8rem; color: var(--ink-dim); min-width: 72px; text-align: center; }

.colony-selector-wrap {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  flex-wrap: wrap;
}
.colony-select {
  flex: 1; min-width: 160px;
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--gold-deep); border-radius: 3px;
  padding: 8px 10px; font-family: 'EB Garamond', serif; font-size: 16px;
  appearance: none; -webkit-appearance: none;
}
.colony-level-wrap {
  display: flex; align-items: center; gap: 6px;
}
.colony-level-label {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
}
.colony-level-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--gold-deep);
  color: var(--gold); font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.colony-level-btn:active { background: var(--gold-deep); }
.colony-level-num {
  font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700;
  color: var(--gold-bright); min-width: 24px; text-align: center;
}

.colony-level-section { margin-bottom: 22px; }
.colony-level-heading {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold-deep);
  border-bottom: 1px solid var(--rule); padding-bottom: 4px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.colony-level-heading.is-current { color: var(--gold); }
.colony-level-heading.is-current::before {
  content: '▸'; color: var(--gold);
}
.colony-level-heading.is-past { color: var(--ink-faint); }
.colony-level-heading.is-future { color: var(--rule); }

/* Shared card background — all item-list cards use bg-2 */
.char-card, .colony-project, .vendor-item, .lib-retinue-card,
.lib-build-card, .note-card { background: var(--bg-2); }

.colony-project {
  background: var(--bg-2); border-left: 2px solid var(--rule);
  border-radius: 0 3px 3px 0; padding: 10px 12px; margin-bottom: 8px;
  cursor: pointer; transition: border-color 0.15s, opacity 0.2s;
  user-select: none; -webkit-user-select: none;
}
.colony-project.is-done { border-left-color: var(--gold); }
.colony-project.is-future { opacity: 0.45; cursor: default; }
.colony-project-header { display: flex; align-items: flex-start; gap: 8px; }
.colony-project-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 3px;
  border: 1px solid var(--gold-deep); background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--gold); margin-top: 2px;
}
.colony-project.is-done .colony-project-check { background: var(--gold-deep); }
.colony-project.is-future .colony-project-check { border-color: var(--rule); }
.colony-project-name {
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 14px;
  color: var(--gold-bright); letter-spacing: 0.04em; flex: 1;
}
.colony-project.is-future .colony-project-name { color: var(--ink-faint); }
.colony-project-detail-sheet { padding: 4px 0; }
.colony-project-row { font-size: 15px; color: var(--ink-dim); margin-bottom: 12px; line-height: 1.5; }
.colony-project-row strong { color: var(--ink); font-weight: 600; }
.colony-project.is-past-uncomplete { opacity: 0.45; }

/* ── Traders section ─────────────────────────────────────────────────────────── */
.traders-act-row {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.traders-act-btn {
  flex: 1; padding: 10px 4px; background: var(--bg-3); border: 1px solid var(--rule);
  color: var(--ink-dim); font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px; cursor: pointer;
  touch-action: manipulation; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.traders-act-btn.active {
  border-color: var(--gold); color: var(--gold);
  background: rgba(201,164,76,0.1); font-weight: 600;
}
.traders-pf-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  background: var(--bg-3); border: 1px solid var(--rule); border-radius: 3px; padding: 8px 12px;
}
.traders-pf-label {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); flex: 1;
}
.traders-pf-val {
  font-family: 'JetBrains Mono', monospace; font-size: 20px;
  color: var(--gold-bright); min-width: 40px; text-align: center;
}
.traders-pf-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--gold-deep);
  color: var(--gold); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.traders-pf-btn:active { background: var(--gold-deep); }
.traders-search {
  width: 100%; background: var(--bg-3); border: 1px solid var(--rule);
  border-radius: 3px; padding: 9px 12px; color: var(--ink);
  font-family: 'EB Garamond', serif; font-size: 16px; margin-bottom: 14px;
}
.traders-search:focus { outline: none; border-color: var(--gold-deep); }
.traders-search::placeholder { color: var(--ink-faint); }

.faction-card {
  background: var(--bg-2); border-left: 2px solid var(--gold-deep);
  border-radius: 0 3px 3px 0; padding: 12px 14px; margin-bottom: 10px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.faction-card:active { background: var(--bg-3); }
.faction-card-header { display: flex; align-items: center; gap: 10px; }
.faction-name {
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 14px;
  color: var(--gold-bright); letter-spacing: 0.05em; flex: 1;
}
.faction-rep-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--gold); background: rgba(201,164,76,0.1);
  border: 1px solid var(--gold-deep); border-radius: 3px;
  padding: 2px 8px;
}
.faction-available-count {
  font-size: 13px; color: var(--ink-dim);
}

.search-results { margin-bottom: 16px; }
.search-result-item {
  background: var(--bg-3); border: 1px solid var(--rule); border-radius: 3px;
  padding: 8px 12px; margin-bottom: 6px; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.search-result-item:active { background: var(--bg-2); }
.search-result-name {
  font-family: 'Cinzel', serif; font-size: 13px; color: var(--gold-bright);
  font-weight: 600; margin-bottom: 3px; display: flex; align-items: baseline; gap: 8px;
}
.search-result-pf {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--gold); background: rgba(201,164,76,0.12);
  border: 1px solid var(--gold-deep); border-radius: 3px; padding: 1px 6px; margin-left: auto;
}
.search-result-meta { font-size: 13px; color: var(--ink-dim); }
.search-result-meta span { color: var(--gold); }

/* Faction sub-page (pushed sheet) */
.faction-rep-controls {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  background: var(--bg-3); border-radius: 4px; padding: 10px 12px;
}
.faction-rep-label {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); flex: 1;
}
.faction-rep-val {
  font-family: 'JetBrains Mono', monospace; font-size: 18px;
  color: var(--gold-bright); min-width: 28px; text-align: center;
}
.faction-rep-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--gold-deep);
  color: var(--gold); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.faction-rep-btn:active { background: var(--gold-deep); }

.vendor-item {
  background: var(--bg-2); border-left: 2px solid var(--rule);
  border-radius: 0 3px 3px 0; padding: 9px 12px; margin-bottom: 7px;
}
.vendor-item.available { border-left-color: var(--gold-deep); cursor: pointer; }
.vendor-item.available:active { background: var(--bg-3); }
.vendor-item.locked { opacity: 0.4; cursor: pointer; }
.vendor-item.locked:active { opacity: 0.6; }
.vendor-item-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.vendor-item-name {
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600;
  color: var(--gold-bright); flex: 1;
}
.vendor-item.locked .vendor-item-name { color: var(--ink-dim); }
.vendor-item-pf {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--gold); background: rgba(201,164,76,0.12);
  border: 1px solid var(--gold-deep); border-radius: 3px; padding: 1px 6px;
  white-space: nowrap;
}
.vendor-item.locked .vendor-item-pf { border-color: var(--rule); background: none; color: var(--ink-dim); }
.vendor-item-meta { font-size: 13px; color: var(--ink-dim); }
.vendor-item-lock-reason { font-size: 12px; color: var(--ink-faint); margin-top: 2px; font-style: italic; }
/* Curiosity vendor card */
.curiosity-vendor-card .faction-card-header { margin-bottom: 10px; }
.curiosity-align-row { display: flex; gap: 6px; }
.curiosity-align-pill {
  flex: 1; background: var(--bg-3); border: 1px solid var(--rule);
  border-radius: 3px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px;
}
.curiosity-align-name {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold); font-weight: 600;
}
.curiosity-align-rank { font-size: 11px; color: var(--ink-dim); }
.curiosity-align-avail { font-size: 11px; color: var(--ink-dim); }
.vendor-section-heading {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 14px 0 6px; border-bottom: 1px solid var(--rule); padding-bottom: 3px;
}

/* ── Resources section ────────────────────────────────────────────────────────── */
.resources-system-name, .resources-resource-name {
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600;
  color: var(--gold-bright); margin-bottom: 4px;
}
/* ── Gear Browser ── */
.gb-filter-bar {
  position: sticky; top: -18px; z-index: 8;
  background: var(--bg-2); margin: -18px -18px 0; padding: 10px 18px 10px;
  border-bottom: 1px solid var(--rule);
}
.gb-search-row { position: relative; margin-bottom: 8px; }
.gb-search {
  width: 100%; background: var(--bg-3); border: 1px solid var(--rule);
  border-radius: 4px; color: var(--ink); font-size: 16px;
  padding: 7px 32px 7px 10px; outline: none;
}
.gb-search:focus { border-color: var(--gold-deep); }
.gb-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ink-faint); font-size: 14px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.gb-search-clear:active { color: var(--ink); }
.gb-filter-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
/* ── Custom dropdown ── */
.gb-select-wrap {
  position: relative; min-width: 0;
}
.gb-dd-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-3); border: 1px solid var(--rule);
  border-radius: 4px; color: var(--ink); font-family: 'EB Garamond', serif;
  font-size: 15px; padding: 6px 10px; cursor: pointer;
  touch-action: manipulation; text-align: left; gap: 6px;
}
.gb-dd-trigger:active, .gb-select-wrap.open .gb-dd-trigger {
  border-color: var(--gold-deep); background: var(--bg-2);
}
.gb-dd-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-dd-arrow { flex-shrink: 0; font-size: 10px; color: var(--gold-deep); transition: transform 0.15s; }
.gb-select-wrap.open .gb-dd-arrow { transform: rotate(180deg); }
.gb-dd-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-3); border: 1px solid var(--gold-deep); border-radius: 4px;
  z-index: 50; max-height: 260px; overflow-y: auto;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  -webkit-overflow-scrolling: touch;
}
.gb-dd-panel.flip-up { top: auto; bottom: calc(100% + 4px); }
.gb-select-wrap.open .gb-dd-panel { display: block; }
.gb-dd-option {
  width: 100%; text-align: left; padding: 10px 12px;
  background: none; border: none; border-bottom: 1px solid var(--rule);
  color: var(--ink-dim); font-family: 'EB Garamond', serif; font-size: 15px;
  cursor: pointer; touch-action: manipulation; display: block;
}
.gb-dd-option:last-child { border-bottom: none; }
.gb-dd-option:active { background: var(--bg-2); }
.gb-dd-option.selected { color: var(--gold-bright); background: rgba(201,164,76,0.08); }
.gb-dd-option.selected::after { content: ' ✓'; }
.gb-list { padding-top: 8px; }
.gb-group-heading {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.3em;
  color: var(--ink-dim); text-transform: uppercase;
  padding: 16px 0 6px; border-bottom: 1px solid var(--rule); margin-bottom: 2px;
}
.gb-group-heading:first-child { padding-top: 4px; }
.gb-item {
  padding: 9px 0; border-bottom: 1px solid rgba(45,37,32,0.6);
}
.gb-item.has-detail { cursor: pointer; }
.gb-item.has-detail:active { background: rgba(201,164,76,0.04); margin: 0 -18px; padding: 9px 18px; }
.gb-item-name-wrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gb-item-name { font-family: 'EB Garamond', serif; font-size: 16px; color: var(--ink); font-weight: 500; }
.gb-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.gb-act-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--ink-faint); background: var(--bg-3);
  border: 1px solid var(--rule); border-radius: 3px; padding: 1px 5px;
}
.gb-used-by { font-size: 11px; color: var(--ink-faint); font-style: italic; }
.gb-item-desc { font-size: 13px; color: var(--ink-dim); margin-top: 3px; line-height: 1.4; }
.gb-empty, .ref-empty { text-align: center; color: var(--ink-faint); font-style: italic; padding: 40px 0; font-size: 14px; }

/* ── Reference section ── */
.reference-grid {
  display: flex; flex-direction: column; gap: 12px; padding: 4px 0;
}
.reference-card {
  background: var(--bg-2); border: 1px solid var(--rule); border-left: 3px solid var(--gold-deep);
  border-radius: 0 4px 4px 0; padding: 14px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
}
.reference-card:active { background: var(--bg-3); }
.reference-card-icon { font-size: 20px; color: var(--gold-deep); flex-shrink: 0; width: 26px; text-align: center; line-height: 1; }
.reference-card-body { flex: 1; min-width: 0; }
.reference-card-title { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.05em; }
.reference-card-sub { font-size: 12px; color: var(--ink-dim); margin-top: 3px; line-height: 1.35; }
.reference-back-btn {
  background: none; border: none; color: var(--gold); font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; cursor: pointer;
  padding: 0 0 14px; display: block;
}
.reference-back-btn:active { color: var(--gold-bright); }
.reference-sub-content { padding-top: 4px; }

/* === CONVICTIONS === */
.conv-intro {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-bottom: 6px;
}
.conv-intro-note {
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 2px solid var(--rule);
}
.conv-card {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg-2);
}
.conv-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.conv-icon { font-size: 16px; }
.conv-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.conv-approach {
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 8px;
  line-height: 1.4;
}
.conv-philosophy {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.45;
  margin-bottom: 10px;
}
.conv-affinity-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  margin-bottom: 10px;
}
.conv-affinity-pos { color: var(--gold-deep); }
.conv-affinity-neg { color: var(--blood-bright); }
.conv-tiers-heading {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.conv-tiers { display: flex; flex-direction: column; gap: 8px; }
.conv-tier-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.conv-tier-num-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  width: 32px;
}
.conv-tier-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--ink-faint);
}
.conv-tier-pts {
  font-size: 9px;
  color: var(--ink-faint);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.conv-tier-body { flex: 1; min-width: 0; }
.conv-tier-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.03em;
}
.conv-tier-ability {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-deep);
  margin-top: 1px;
}
.conv-tier-bonus {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.35;
  margin-top: 2px;
}

/* Global reference search */
.ref-global-search-wrap {
  position: relative;
  margin-bottom: 16px;
}
.ref-global-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 16px;
  padding: 10px 36px 10px 12px;
  outline: none;
}
.ref-global-search:focus { border-color: var(--gold-deep); }
.ref-search-group {
  margin-bottom: 18px;
}
.ref-search-group-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.ref-search-group-icon { font-size: 13px; }
.ref-search-result-row {
  padding: 7px 4px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.ref-search-result-row:last-of-type { border-bottom: none; }
.ref-search-result-row:active { background: rgba(201,164,76,0.05); }
.ref-search-result-label {
  font-size: 14px;
  color: var(--ink);
}
.ref-search-result-sub {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 2px;
  line-height: 1.3;
}
.ref-search-more {
  font-size: 12px;
  color: var(--gold-deep);
  padding: 6px 4px;
  cursor: pointer;
  font-style: italic;
}
.ref-search-more:active { color: var(--gold); }

/* === REFERENCE LIBRARY === */
.lib-search-wrap {
  position: relative;
  margin-bottom: 12px;
}
.lib-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 16px;
  padding: 8px 32px 8px 10px;
  outline: none;
}
.lib-search:focus { border-color: var(--gold-deep); }
.lib-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ink-faint); cursor: pointer;
  font-size: 13px; padding: 4px;
}
.lib-section-heading {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}
.lib-def-list { display: flex; flex-direction: column; gap: 1px; }
.lib-def-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.lib-def-row:last-child { border-bottom: none; }
.lib-def-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lib-def-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.03em;
}
.lib-def-desc {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.4;
  margin-top: 3px;
}
/* Homeworld / Origin cards */
.lib-world-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.lib-world-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.lib-world-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.lib-world-desc {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.4;
  margin-bottom: 6px;
}
.lib-bonus-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0;
}
.lib-bonus-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(201,164,76,0.12);
  border: 1px solid var(--gold-deep);
  color: var(--gold-bright);
}
.lib-bonus-chip.neg {
  background: rgba(139,26,26,0.12);
  border-color: var(--blood);
  color: var(--blood-bright);
}
.lib-bonus-note {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-faint);
  margin-top: 4px;
}
.lib-talent-row {
  font-size: 12px;
  margin-top: 6px;
  color: var(--ink-dim);
}
.lib-talent-label { color: var(--ink-faint); }
.lib-talent-name { color: var(--ink); font-weight: 600; }
.lib-origin-companion {
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
}
.lib-origin-archetypes {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 4px;
}
/* MC Build cards */
.lib-build-card {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.lib-build-card:last-child { border-bottom: none; }
.lib-build-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lib-build-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}
.lib-build-origin {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
  margin-top: 2px;
}
.lib-build-archetypes {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}
/* Retinue */
.lib-retinue-list { display: flex; flex-direction: column; gap: 10px; }
.lib-retinue-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 12px 14px;
}
.lib-retinue-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.lib-retinue-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
}
.lib-retinue-meta {
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  margin-bottom: 6px;
}
.lib-retinue-bio {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.45;
  margin-bottom: 8px;
}
.lib-retinue-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.lib-stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 3px 6px;
  min-width: 36px;
}
.lib-stat-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}
.lib-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
}
.lib-retinue-wiki {
  display: inline-block;
  font-size: 11px;
  color: var(--gold-deep);
  text-decoration: none;
  border: 1px solid var(--gold-deep);
  border-radius: 3px;
  padding: 2px 8px;
  letter-spacing: 0.05em;
}
.lib-retinue-wiki:active { background: var(--bg-3); color: var(--gold); }

.resource-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--rule);
}
.resource-row:last-child { border-bottom: none; }
.resource-name-col {
  flex: 1; font-size: 15px; color: var(--ink); text-transform: capitalize;
}
.resource-qty {
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  color: var(--gold); min-width: 32px; text-align: right;
}
.resource-quality-badge {
  font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 2px;
  border: 1px solid;
}
.resource-quality-badge.low    { color: var(--ink-faint); border-color: var(--rule); }
.resource-quality-badge.medium { color: var(--gold); border-color: var(--gold-deep); }
.resource-quality-badge.high   { color: var(--gold-bright); border-color: var(--gold); background: rgba(201,164,76,0.1); }

.selectable-list { margin-bottom: 12px; }
.selectable-item {
  background: var(--bg-2); border-left: 2px solid var(--rule);
  border-radius: 0 3px 3px 0; padding: 10px 12px; margin-bottom: 7px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.selectable-item:active { background: var(--bg-3); }
.selectable-item.active { border-left-color: var(--gold); background: var(--bg-3); }
.selectable-item-name {
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600;
  color: var(--gold-bright);
}
.selectable-item-sub { font-size: 13px; color: var(--ink-dim); margin-top: 2px; }

.resource-detail-panel {
  background: var(--bg-3); border: 1px solid var(--rule); border-radius: 4px;
  padding: 12px 14px; margin-bottom: 16px;
}

/* Pick choice visual states (cards, timeline, single-pick sheet) */
.pick-sep { color: var(--ink-faint); }
.pick-chosen { font-weight: 600; color: var(--gold-bright); }
.pick-unavailable { text-decoration: line-through; color: var(--ink-faint); }
.pick-unchosen { font-style: italic; color: var(--ink-dim); }

/* === SPLASH SCREEN === */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  transition: opacity 0.4s ease;
}
#splash.fade-out { opacity: 0; pointer-events: none; }
.splash-eagle { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.4em; color: var(--gold-deep); text-transform: uppercase; }
.splash-title { font-family: 'Cinzel', serif; font-size: 36px; font-weight: 700; color: var(--gold-bright); letter-spacing: 0.08em; }
.splash-sub { font-family: 'EB Garamond', serif; font-size: 15px; color: var(--ink-dim); font-style: italic; }

/* === MC NAME INPUT === */
.mc-name-input {
  user-select: text; -webkit-user-select: text;
}
.mc-name-input:focus { outline: none; border-color: var(--gold); }
.mc-name-input::placeholder { color: var(--ink-faint); font-style: italic; }

/* === ROSTER CARD WRAP + DRAG === */
.roster-card-wrap { display: flex; align-items: flex-start; gap: 0; position: relative; overflow: hidden; margin-bottom: 10px; }
.roster-card-wrap .char-card { flex: 1; margin-bottom: 0; }
.swipe-delete-bg {
  position: absolute; right: 0; top: 0; bottom: 0;
  background: var(--blood); color: #fff;
  display: flex; align-items: center; padding: 0 22px;
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; opacity: 0; transition: opacity 0.15s;
  pointer-events: none; z-index: 0;
}
.swipe-delete-bg.visible { opacity: 1; pointer-events: auto; }
.drag-handle {
  display: none; /* hidden until reorder mode */
  align-items: center; justify-content: center;
  width: 28px; flex-shrink: 0; align-self: stretch;
  color: var(--gold-deep); font-size: 18px; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none;
  background: rgba(201,164,76,0.06); border-left: 3px solid var(--gold-deep);
  border-radius: 0 0 0 4px;
}
.reorder-active .drag-handle { display: flex; }
.roster-card-wrap.dragging { opacity: 0.4; }
.roster-card-wrap.drag-over { outline: 1px solid var(--gold); }
.drag-ghost {
  position: fixed; left: 0; right: 0; z-index: 8000;
  opacity: 0.85; pointer-events: none;
  display: flex; align-items: flex-start;
}

/* === ADD COMPANION === */
.roster-add-btn {
  width: 100%; margin-top: 14px; padding: 12px;
  background: transparent; color: var(--gold); border: 1px dashed var(--gold-deep);
  border-radius: 3px; font-family: 'Cinzel', serif; font-size: 13px;
  letter-spacing: 0.15em; cursor: pointer;
}
.roster-add-btn:active { background: var(--bg-2); }
.add-companion-btn {
  width: 100%; margin-top: 10px; padding: 10px;
  background: transparent; color: var(--gold); border: 1px dashed var(--gold-deep);
  border-radius: 3px; font-family: 'Cinzel', serif; font-size: 12px;
  letter-spacing: 0.12em; cursor: pointer;
}
.add-comp-list { margin-bottom: 16px; }
.add-comp-item {
  padding: 10px 14px; background: var(--bg-2); border-left: 2px solid var(--rule);
  border-radius: 0 3px 3px 0; margin-bottom: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.add-comp-item.active { border-left-color: var(--gold); background: var(--bg-3); }
.add-comp-item:active { background: var(--bg-3); }
.add-comp-name { font-family: 'Cinzel', serif; font-size: 14px; color: var(--gold-bright); flex: 1; }
.add-comp-arch { font-size: 12px; color: var(--ink-dim); }
.add-comp-section-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.add-comp-build-section, .add-comp-join-section { margin-bottom: 14px; }
.add-comp-join-input { color: var(--gold); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px; text-align: center; }
.add-comp-join-input:focus { outline: none; border-color: var(--gold); }
/* .setup-select inherits from the base select rule */

/* === COMPANION REMOVE BTN (setup) === */
.companion-remove-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--bg-3); color: var(--ink-faint); font-size: 14px; cursor: pointer;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.companion-remove-btn:active { background: var(--blood); color: #fff; }

/* === PARTY TOGGLE BUTTON === */
.party-toggle-btn {
  width: 100%; margin-bottom: 12px; padding: 10px 14px;
  background: var(--bg-3); border: 1px solid var(--rule);
  color: var(--ink-dim); border-radius: 3px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase;
}
.party-toggle-btn.in-party { border-color: var(--gold); color: var(--gold); background: rgba(201,164,76,0.08); }
.party-toggle-btn:disabled { opacity: 0.4; cursor: default; }

/* === NOTES === */
.notes-header-row { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.notes-add-btn {
  padding: 9px 18px; background: rgba(201,164,76,0.1);
  border: 1px solid var(--gold-deep); border-radius: 3px;
  color: var(--gold); font-family: 'Cinzel', serif; font-size: 12px;
  letter-spacing: 0.12em; cursor: pointer;
}
.notes-add-btn:active { background: rgba(201,164,76,0.2); }
.notes-empty { color: var(--ink-dim); font-style: italic; text-align: center; padding: 32px 0; }
.note-card {
  background: var(--bg-2); border-left: 2px solid var(--gold-deep);
  border-radius: 0 3px 3px 0; padding: 12px 14px; margin-bottom: 10px;
  cursor: pointer;
}
.note-card:active { background: var(--bg-3); }
.note-card-title {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600;
  color: var(--gold-bright); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-card-snippet {
  font-size: 13px; color: var(--ink-dim); margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.note-card-date { font-size: 11px; color: var(--ink-faint); }
.note-ref-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--gold-deep); margin: 4px 0;
  cursor: pointer; padding: 2px 6px; border-radius: 10px;
  background: rgba(201,164,76,0.1); border: 1px solid rgba(201,164,76,0.25);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-ref-chip:hover { background: rgba(201,164,76,0.2); }
.note-progress-wrap { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.note-progress {
  flex: 1; height: 4px; background: var(--bg-3);
  border-radius: 2px; overflow: hidden;
}
.note-progress-bar {
  height: 100%; background: var(--gold-deep);
  border-radius: 2px; transition: width 0.3s ease;
}
.note-progress-bar[style*="width:100%"] { background: var(--gold); }
.note-progress-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-faint); flex-shrink: 0; }
/* Editor */
.note-editor-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.note-editor-area { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background: var(--bg-2); }
.note-preview-fab {
  position: absolute; bottom: 12px; right: 12px;
  background: var(--bg-3); border: 1px solid var(--gold-deep);
  color: var(--gold); font-family: 'Cinzel', serif; font-size: 11px;
  font-weight: 700; letter-spacing: 0.08em;
  padding: 8px 14px; border-radius: 20px;
  cursor: pointer; touch-action: manipulation;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  z-index: 10;
}
.note-preview-fab:active { background: var(--bg-2); }
.note-preview-fab.active { background: rgba(201,164,76,0.15); border-color: var(--gold); color: var(--gold-bright); }
.note-draw-fab { bottom: 58px; border-color: var(--border); color: var(--ink-dim); }
.note-draw-fab.active { background: rgba(180,80,80,0.15); border-color: #e63946; color: #e63946; }

/* ── Doodle canvas overlay ── */
.note-doodle-canvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  touch-action: none;
}

/* ── Doodle toolbar ── */
.note-doodle-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
  padding: 8px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
}
.doodle-colors { display: flex; gap: 5px; }
.doodle-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  touch-action: manipulation; flex-shrink: 0;
}
.doodle-swatch.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 1px 4px rgba(0,0,0,0.4); }
.doodle-sizes { display: flex; gap: 4px; }
.doodle-size-btn {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-3);
  color: var(--ink); font-size: 11px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.doodle-size-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201,164,76,0.1); }
.doodle-tool-btn {
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-3);
  color: var(--ink); font-size: 12px;
  cursor: pointer; touch-action: manipulation; white-space: nowrap;
}
.doodle-tool-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201,164,76,0.1); }
.doodle-clear-btn { color: var(--ink-faint); }
.doodle-clear-btn:active { color: #e63946; border-color: #e63946; }

/* ── Doodle in preview ── */
.note-doodle-preview {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto;
  opacity: 0.88;
  pointer-events: none;
  z-index: 1;
}
.note-toolbar {
  display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: -18px; z-index: 10;
  background: var(--bg-2); margin: -18px -18px 0; padding: 10px 18px 8px;
}
.note-tool-btn {
  padding: 6px 10px; background: var(--bg-3); border: 1px solid var(--rule);
  border-radius: 3px; color: var(--ink-dim); font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 0.05em;
  touch-action: manipulation;
}
.note-tool-btn:active { background: var(--bg-2); }
.note-tool-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201,164,76,0.1); }
.note-textarea {
  width: 100%; flex: 1; min-height: 0;
  background: var(--bg-2); border: 1px solid var(--rule); border-radius: 3px;
  color: var(--ink); font-family: 'EB Garamond', serif; font-size: 17px;
  line-height: 1.6; padding: 12px 12px 50px; resize: none; margin-top: 0; border-top: none; border-left: none; border-right: none; border-radius: 0;
  user-select: text !important; -webkit-user-select: text !important;
  overflow-y: scroll; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; /* allow vertical scroll on iOS */
}
.note-textarea:focus { outline: none; border-color: var(--gold-deep); }
.note-textarea::placeholder { color: var(--ink-faint); font-style: italic; }
.note-preview {
  flex: 1; overflow-y: auto; padding: 4px 0 50px;
  color: var(--ink); font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.6;
  position: relative;
}
.note-preview h1 { font-family: 'Cinzel', serif; font-size: 22px; color: var(--gold-bright); margin: 0 0 10px; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.note-preview h2 { font-family: 'Cinzel', serif; font-size: 17px; color: var(--gold); margin: 14px 0 6px; }
.note-preview h3 { font-family: 'Cinzel', serif; font-size: 14px; color: var(--ink-dim); letter-spacing: 0.1em; text-transform: uppercase; margin: 12px 0 4px; }
.note-preview p { margin: 0 0 10px; }
.note-preview ul { margin: 0 0 10px; padding-left: 18px; }
.note-preview li { margin-bottom: 4px; }
.note-preview strong { color: var(--gold-bright); }
.note-preview em { color: var(--ink-dim); font-style: italic; }
.note-preview code { font-family: 'JetBrains Mono', monospace; font-size: 14px; background: var(--bg-3); padding: 1px 5px; border-radius: 3px; color: var(--gold); }
.note-preview hr { border: none; border-top: 1px solid var(--rule); margin: 14px 0; }

/* Todo list items in note preview */
.note-preview .todo-list { list-style: none; padding-left: 0; margin: 0 0 10px; }
.note-preview .todo-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 8px; border-radius: 3px; cursor: pointer;
  margin-bottom: 3px;
}
.note-preview .todo-item:active { background: var(--bg-3); }
.note-preview .todo-check {
  font-size: 18px; line-height: 1.4; flex-shrink: 0;
  color: var(--ink-dim); min-width: 20px;
}
.note-preview .todo-done .todo-check { color: var(--gold); }
.note-preview .todo-label { flex: 1; line-height: 1.5; }
.note-preview .todo-done .todo-label {
  text-decoration: line-through; color: var(--ink-faint);
}

/* Notes sort row */
.notes-header-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 14px; }
.notes-sort-row { display: flex; gap: 4px; flex: 1; }
.notes-sort-btn {
  flex: 1; padding: 0 4px; height: 32px; background: var(--bg-3); border: 1px solid var(--rule);
  border-radius: 3px; color: var(--ink-faint); font-family: 'Cinzel', serif;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.notes-sort-btn.active { border-color: var(--gold-deep); color: var(--gold); }
.notes-add-btn {
  padding: 0 16px; height: 32px; background: rgba(201,164,76,0.1);
  border: 1px solid var(--gold-deep); border-radius: 3px;
  color: var(--gold); font-family: 'Cinzel', serif; font-size: 14px;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center;
}
/* Note card outer (swipe container) */
.note-card-outer { position: relative; margin-bottom: 10px; overflow: hidden; border-radius: 0 3px 3px 0; }
.note-delete-bg {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 0;
  background: var(--blood); color: #fff;
  display: flex; align-items: center; padding: 0 22px;
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; opacity: 0; transition: opacity 0.15s;
  pointer-events: none;
}
.note-delete-bg.visible { opacity: 1; pointer-events: auto; }
.note-card {
  background: var(--bg-2); border-left: 2px solid var(--gold-deep);
  border-radius: 0 3px 3px 0; padding: 12px 14px;
  cursor: pointer; position: relative; z-index: 1;
}
.note-card:active { background: var(--bg-3); }
.note-card.note-archived {
  opacity: 0.4; border-left-color: var(--rule);
  filter: grayscale(0.4);
}
.note-archive-heading { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.3em; color: var(--ink-faint); text-transform: uppercase; margin: 20px 0 8px; }
/* Hide old duplicate .notes-header-row rule that conflicts */

/* Save indicator + undo */
.note-save-indicator {
  font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-deep);
  opacity: 0; transition: opacity 0.3s;
  align-self: center; margin-left: 4px;
}
.note-save-indicator.visible { opacity: 1; }
.note-undo-btn { font-size: 15px; }
.note-undo-btn:disabled { opacity: 0.25; cursor: default; }

/* Add companion form (dropdown layout) */
.add-comp-form { display: flex; flex-direction: column; gap: 6px; }
.add-comp-form .add-comp-section-label { margin-top: 8px; }
.add-comp-btn-row { display: flex; gap: 10px; margin-top: 16px; }
.add-comp-confirm-btn {
  flex: 1; padding: 13px 8px;
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  border-radius: 3px; cursor: pointer;
}
.add-comp-confirm-btn:not(.add-comp-party-btn) {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--bg); border: 1px solid var(--gold-bright);
}
.add-comp-confirm-btn:not(.add-comp-party-btn):active { transform: translateY(1px); }
.add-comp-party-btn {
  background: transparent; color: var(--gold);
  border: 1px solid var(--gold-deep);
}
.add-comp-party-btn:active { background: rgba(201,164,76,0.1); }
.add-comp-party-btn:disabled { opacity: 0.3; cursor: default; }

/* ============= WORKSHOP ============= */
.ws-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.ws-action-btn {
  flex: 1; min-width: 80px;
  background: var(--bg-2); border: 1px solid var(--rule);
  border-radius: 3px; color: var(--ink-dim);
  font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 10px 8px; cursor: pointer;
}
.ws-action-btn.primary {
  background: rgba(201,164,76,0.1);
  border-color: var(--gold-deep); color: var(--gold);
}
.ws-action-btn:active { background: var(--bg-3); color: var(--gold); }

.ws-empty {
  text-align: center; color: var(--ink-faint);
  font-style: italic; padding: 40px 0; font-size: 14px;
}
.ws-banner {
  padding: 8px 12px; border-radius: 3px; font-size: 13px;
  margin-bottom: 12px; line-height: 1.3;
}
.ws-banner.ok  { background: rgba(201,164,76,0.12); border: 1px solid var(--gold-deep); color: var(--gold); }
.ws-banner.err { background: rgba(139,26,26,0.12);  border: 1px solid var(--blood);     color: var(--blood-bright); }

/* Build list */
.ws-build-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 24px; }
.ws-build-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.ws-build-row:last-child { border-bottom: none; }
.ws-build-info { flex: 1; min-width: 0; }
.ws-build-name { font-family: 'Cinzel', serif; font-size: 13px; color: var(--gold); font-weight: 600; }
.ws-build-meta { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.ws-update-badge {
  font-size: 11px; color: var(--blood-bright); margin-top: 3px; font-style: italic;
}
.ws-build-btns {
  display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0;
}
.ws-btn {
  font-family: 'Cinzel', serif; font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 2px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--ink-dim);
}
.ws-btn:active { background: var(--bg-3); color: var(--gold); }
.ws-btn.danger { border-color: var(--blood); color: var(--blood-bright); }
.ws-btn.danger:active { background: rgba(139,26,26,0.15); }
.ws-btn.update { border-color: var(--gold-deep); color: var(--gold); }

/* Gist section */
.ws-gist-section {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.ws-section-heading {
  font-family: 'Cinzel', serif; font-size: 10px;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 8px;
}
.ws-gist-note {
  font-size: 12px; color: var(--ink-faint); line-height: 1.4; margin-bottom: 10px;
}
.ws-pat-row { display: flex; gap: 6px; align-items: center; }
.ws-pat-input {
  flex: 1; background: var(--bg-2); border: 1px solid var(--rule);
  border-radius: 3px; color: var(--ink);
  font-size: 14px; padding: 7px 10px; outline: none;
  font-family: 'JetBrains Mono', monospace;
}
.ws-pat-input:focus { border-color: var(--gold); }

/* Wizard steps */
.ws-step-heading {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.05em; margin-bottom: 16px;
}
.ws-hint {
  font-size: 12px; color: var(--ink-faint); font-style: italic;
  margin-bottom: 12px; padding-left: 8px; border-left: 2px solid var(--rule);
}

/* Character select */
.ws-char-grid { display: flex; flex-direction: column; gap: 6px; }
.ws-char-btn {
  background: var(--bg-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-deep); border-radius: 0 3px 3px 0;
  padding: 12px 14px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 13px; color: var(--ink);
  text-align: left;
}
.ws-char-btn:active { background: var(--bg-3); color: var(--gold); }

/* Form */
.ws-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ws-field { display: flex; flex-direction: column; gap: 4px; }
.ws-field-label {
  font-family: 'Cinzel', serif; font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim);
}
.ws-field-input, .ws-field-select {
  background: var(--bg-2); border: 1px solid var(--rule); border-radius: 3px;
  color: var(--ink); font-family: 'EB Garamond', Georgia, serif;
  font-size: 16px; padding: 8px 10px; outline: none;
  -webkit-appearance: none;
}
.ws-field-input:focus, .ws-field-select:focus { border-color: var(--gold); }

.ws-next-btn {
  width: 100%; margin-top: 8px; padding: 13px;
  background: rgba(201,164,76,0.1); border: 1px solid var(--gold-deep);
  border-radius: 3px; color: var(--gold);
  font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
}
.ws-next-btn:active { background: rgba(201,164,76,0.2); }

/* Level list */
.ws-level-list { display: flex; flex-direction: column; margin-bottom: 16px; }
.ws-level-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.ws-level-row.expanded { background: rgba(201,164,76,0.04); padding: 10px 6px; border-radius: 3px; border: 1px solid var(--rule); cursor: default; margin-bottom: 2px; }
.ws-level-row:last-child { border-bottom: none; }
.ws-level-row.is-current .ws-level-num { color: var(--gold-bright); }
.ws-level-num {
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
  color: var(--ink-faint); width: 28px; flex-shrink: 0; text-align: center;
}
.ws-level-summary { flex: 1; font-size: 13px; color: var(--ink-dim); }
.ws-level-inputs { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ws-pick-wrap { display: flex; flex-direction: column; gap: 3px; }
.ws-level-done {
  background: rgba(201,164,76,0.1); border: 1px solid var(--gold-deep);
  border-radius: 3px; color: var(--gold); font-size: 16px;
  padding: 6px 10px; cursor: pointer; flex-shrink: 0;
}

/* Import preview */
.ws-preview { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.ws-preview-row {
  display: flex; gap: 12px; padding: 8px 12px;
  border-bottom: 1px solid var(--rule); font-size: 13px;
}
.ws-preview-row:last-child { border-bottom: none; }
.ws-preview-label { color: var(--ink-faint); min-width: 100px; flex-shrink: 0; }
.ws-preview-val { color: var(--ink); flex: 1; word-break: break-all; }

/* === ROMANCE GUIDES === */
.romance-meta {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px;
}
.romance-chip {
  font-size: 11px; padding: 2px 8px;
  border-radius: 10px; background: rgba(201,164,76,0.1);
  border: 1px solid var(--gold-deep); color: var(--gold-deep);
}
.romance-chip.conviction {
  background: rgba(255,255,255,0.05);
  border-color: var(--ink-faint); color: var(--ink-faint);
}
.romance-steps-heading {
  font-family: 'Cinzel', serif; font-size: 10px;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--ink-dim); margin: 10px 0 6px;
  padding-bottom: 4px; border-bottom: 1px solid var(--rule);
}
.romance-steps-heading.missable { color: var(--blood-bright); border-color: var(--blood); }
.romance-steps { display: flex; flex-direction: column; gap: 6px; }
.romance-step-row {
  display: grid; grid-template-columns: 52px 1fr;
  gap: 8px; align-items: baseline; font-size: 13px;
}
.romance-act-badge {
  font-family: 'Cinzel', serif; font-size: 9px;
  font-weight: 700; letter-spacing: 0.1em;
  color: var(--gold-deep); flex-shrink: 0;
}
.romance-step-text { color: var(--ink-dim); line-height: 1.4; }
.romance-missable-list {
  margin: 4px 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.romance-missable-list li {
  font-size: 12px; color: var(--blood-bright); line-height: 1.3;
}

/* === FAVOURITES / QUICK ACCESS === */
.ref-fav-btn {
  background: none; border: none; cursor: pointer;
  font-size: 15px; color: var(--ink-faint);
  padding: 2px 4px; flex-shrink: 0; line-height: 1;
  transition: color 0.12s;
}
.ref-fav-btn.active { color: var(--gold); }
.ref-fav-btn:active { color: var(--gold-bright); }

.ref-quick-access {
  margin-bottom: 14px;
  border: 1px solid var(--gold-deep);
  border-radius: 4px;
  background: rgba(201,164,76,0.04);
  overflow: hidden;
}
.ref-quick-heading {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding: 7px 12px 5px;
  border-bottom: 1px solid var(--gold-deep);
  opacity: 0.7;
}
.ref-quick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(201,164,76,0.12);
  cursor: pointer;
}
.ref-quick-row:last-child { border-bottom: none; }
.ref-quick-row:active { background: rgba(201,164,76,0.08); }
.ref-quick-icon { font-size: 13px; color: var(--gold-deep); flex-shrink: 0; }
.ref-quick-info { flex: 1; min-width: 0; }
.ref-quick-label { font-size: 13px; color: var(--ink); }
.ref-quick-sub { font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
.ref-note-btn {
  background: none; border: none; font-size: 0.95rem; cursor: pointer;
  padding: 4px 6px; color: var(--ink-faint); flex-shrink: 0; opacity: 0.5;
}
.ref-note-btn:hover, .ref-note-btn.has-note { opacity: 1; }

.fav-highlight {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
  background: rgba(201,164,76,0.08);
}