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

  :root {
    color-scheme: dark; /* tells browser to render native controls (selects, scrollbars) in dark mode */
    --parchment: #f4e8c1;
    --parchment-dark: #e8d5a3;
    --parchment-darker: #d4b87a;
    --ink: #2c1a0e;
    --ink-light: #5a3e28;
    --red-wax: #8b1a1a;
    --gold: #b8860b;
    --gold-light: #d4a017;
    --border-ornate: #7a5c2e;
    --bg-dark: #1a0f07;
    --panel-bg: rgba(20, 10, 3, 0.92);
    --input-bg: rgba(244, 232, 193, 0.08);
    --input-border: rgba(180, 130, 60, 0.35);
    --label-color: #dabb80;
    --card-w: 380px;
    --card-h: 531px;
  }

  body {
    background: var(--bg-dark);
    color: #ead898;
    font-family: 'Crimson Pro', Georgia, serif;
    height: 100vh;        /* fallback for older browsers */
    height: 100dvh;       /* dynamic viewport — excludes OS nav bar + browser chrome */
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Subtle dungeon stone pattern background */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px),
      repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px);
    pointer-events: none;
    z-index: 0;
  }

  header {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid rgba(180,130,60,0.25);
  }

  header h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.08em;
    text-shadow: 0 0 40px rgba(212,160,23,0.3);
  }

  header p {
    color: var(--ink-light);
    color: #9a7a4a;
    font-size: 1rem;
    margin-top: 0.4rem;
    letter-spacing: 0.04em;
  }

  .ornament {
    display: inline-block;
    color: var(--gold);
    margin: 0 0.6rem;
    opacity: 0.7;
    font-size: 1.1em;
  }

  .workspace {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
  }

  /* ── LEFT PANEL ── */
  .controls {
    background: var(--panel-bg);
    border-right: 1px solid rgba(180,130,60,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── TABS ── */
  .tab-bar {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(180,130,60,0.2);
    background: rgba(0,0,0,0.3);
  }
  .tab-btn {
    flex: 1;
    padding: 0.7rem 0.3rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(210,160,70,0.75);
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    margin-bottom: -1px;
  }
  .tab-btn:hover { color: var(--gold-light); }
  .tab-btn-icon { flex: none; padding: 0.7rem 0.9rem; font-size: 0.9rem; }
  .tab-btn.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
    background: rgba(180,130,60,0.06);
  }
  .tab-panel {
    display: none;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem 1.6rem;
    overflow-y: auto;
    flex: 1;
  }
  .tab-panel.active { display: flex; }
  .tab-panel::-webkit-scrollbar { width: 5px; }
  .tab-panel::-webkit-scrollbar-track { background: transparent; }
  .tab-panel::-webkit-scrollbar-thumb { background: rgba(180,130,60,0.3); border-radius: 3px; }

  /* ── DETAILS TAB ACTION ROW (Save / Export PNG / Clear) ── */
  .details-action-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
  }
  .details-action-row button {
    font-size: 0.62rem;
    white-space: nowrap;
  }
  #historySaveBtn {
    border: 1px solid rgba(180,130,60,0.4);
    border-radius: 4px;
    padding: 0.45rem 1.2rem;
  }
  #exportPngInline { padding: 0.45rem 0.8rem; }
  #clearCardBtn {
    padding: 0.35rem 0.45rem;
    border-color: rgba(139,26,26,0.45);
    color: rgba(200,90,90,0.85);
  }

  textarea::-webkit-scrollbar { width: 5px; }
  textarea::-webkit-scrollbar-track { background: transparent; }
  textarea::-webkit-scrollbar-thumb { background: rgba(180,130,60,0.3); border-radius: 3px; }
  textarea::-webkit-scrollbar-thumb:hover { background: rgba(180,130,60,0.55); }
  textarea { scrollbar-width: thin; scrollbar-color: rgba(180,130,60,0.3) transparent; }

  body.light textarea::-webkit-scrollbar-thumb { background: rgba(120,80,30,0.3); }
  body.light textarea::-webkit-scrollbar-thumb:hover { background: rgba(120,80,30,0.55); }
  body.light textarea { scrollbar-color: rgba(120,80,30,0.3) transparent; }

  /* ── UPLOAD HINT (card image circle, no image loaded) ── */
  .img-upload-hint {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(255,255,255,0);
    opacity: 0;
    transition: opacity 0.18s;
    cursor: pointer;
    z-index: 4;
    text-align: center;
  }
  .img-upload-hint .hint-icon { font-size: 1.1rem; line-height: 1; }
  .img-upload-hint .hint-text {
    font-family: 'Cinzel', serif;
    font-size: 0.42rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.5;
  }
  .card-image-container:not(.has-img):hover .img-upload-hint {
    opacity: 1;
    background: rgba(0,0,0,0.52);
    color: rgba(255,255,255,0.92);
  }
  .card-image-container.has-img .img-upload-hint { pointer-events: none; }

  .section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.8;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* ── FIELD NOTE ASTERISK ── */
  .field-note {
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: 3px;
    opacity: 0.85;
  }
  .field-note-legend {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: rgba(210,160,70,0.85);
    margin-top: 0.15rem;
  }
  body.light .field-note-legend { color: #6b4010; }

  .section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(180,130,60,0.4), transparent);
  }

  .field-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  label {
    font-size: 0.9rem;
    color: var(--label-color);
    letter-spacing: 0.04em;
  }

  input[type="text"],
  input[type="number"],
  select,
  textarea {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 3px;
    color: #e8d5a3;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 1.05rem;
    padding: 0.5rem 0.75rem;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
  }

  input[type="text"]:focus,
  input[type="number"]:focus,
  select:focus,
  textarea:focus {
    border-color: rgba(180,130,60,0.65);
    background: rgba(244,232,193,0.13);
  }

  /* Custom select — remove native arrow and substitute our own gold chevron */
  select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a96e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 2.2rem;
  }
  select option { background: #1a0f07; color: #e8d5a3; }

  textarea { resize: vertical; min-height: 80px; line-height: 1.55; }

  .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }

  /* Image upload zones */
  .upload-zone {
    border: 1.5px dashed rgba(180,130,60,0.35);
    border-radius: 4px;
    padding: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
  }

  .upload-zone:hover { border-color: rgba(180,130,60,0.65); background: rgba(244,232,193,0.05); }
  .upload-zone.has-image { border-style: solid; border-color: rgba(180,130,60,0.5); }

  .upload-zone input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
  }

  .upload-preview {
    width: 100%;
    max-height: 80px;
    object-fit: cover;
    border-radius: 3px;
    display: none;
  }

  .upload-zone.has-image .upload-preview { display: block; }
  .upload-zone.has-image .upload-placeholder { display: none; }

  .upload-placeholder {
    color: #a07840;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .upload-placeholder span { display: block; font-size: 1.4rem; margin-bottom: 0.2rem; }

  /* ── Image picker list (Appearance tab) ── */
  .img-picker-list { display: flex; flex-direction: column; gap: 0.55rem; }
  .img-picker-row  { display: flex; align-items: center; gap: 0.65rem; }
  .img-picker-labels { flex: 1; min-width: 0; }
  .img-picker-labels label { display: block; margin-bottom: 0.1rem; }
  .img-picker-labels small { color: rgba(180,130,60,0.55); font-size: 0.72rem; line-height: 1.3; }
  .upload-zone-sm {
    width: 58px; height: 58px;
    padding: 0.3rem;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .upload-zone-sm .upload-preview { width: 100%; height: 100%; max-height: none; object-fit: cover; }
  .upload-zone-sm .upload-placeholder { display: flex; align-items: center; justify-content: center; }
  .upload-zone-sm .upload-placeholder span { font-size: 1.3rem; margin: 0; }
  .img-picker-clear { font-size: 0.62rem; padding: 0.25rem 0.55rem; white-space: nowrap; flex-shrink: 0; }

  body.light .img-picker-labels small { color: rgba(80,50,15,0.5); }

  /* Editable stat-label rename inputs */
  input.stat-label-rename {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--label-color);
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(180,130,60,0.3);
    border-radius: 0;
    padding: 2px 4px;
  }
  input.stat-label-rename:focus {
    background: transparent;
    border-color: transparent;
    border-bottom-color: rgba(180,130,60,0.65);
  }

  /* Color pickers */
  .color-row { display: flex; gap: 0.5rem; align-items: center; }
  .color-row input[type="color"] {
    width: 36px; height: 36px; border-radius: 3px;
    border: 1px solid var(--input-border);
    padding: 2px; cursor: pointer; background: transparent;
    flex-shrink: 0;
  }
  .color-row input[type="text"] { flex: 1; }

  /* Rarity badge preview */
  .rarity-preview {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 2px;
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
    border: 1px solid currentColor;
  }

  /* Buttons */
  .btn {
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    letter-spacing: 0.12em;
    padding: 0.6rem 1.2rem;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.2s;
    text-transform: uppercase;
  }

  .btn-primary {
    background: linear-gradient(135deg, #6b3a1f, #8b4a2a);
    border-color: var(--gold);
    color: var(--parchment);
  }

  .btn-primary:hover { background: linear-gradient(135deg, #8b4a2a, #a05a35); box-shadow: 0 0 20px rgba(184,134,11,0.3); }

  .btn-secondary {
    background: transparent;
    border-color: rgba(180,130,60,0.4);
    color: var(--label-color);
  }

  .btn-secondary:hover { border-color: rgba(180,130,60,0.7); color: var(--gold-light); }

  .btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

  /* ── RIGHT PANEL ── */
  .preview-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2.5rem 2rem;
    gap: 1.5rem;
    overflow-y: auto;
    background: rgba(10,5,2,0.5);
    position: relative;
  }

  .preview-area::-webkit-scrollbar { width: 5px; }
  .preview-area::-webkit-scrollbar-track { background: transparent; }
  .preview-area::-webkit-scrollbar-thumb { background: rgba(180,130,60,0.25); border-radius: 3px; }

  /* ── ITEM CARD ── */
  .item-card {
    width: var(--card-w);
    min-height: var(--card-h);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(180,130,60,0.3);
    flex-shrink: 0;
  }

  /* Background layer — solid colour only */
  .card-bg {
    position: absolute;
    inset: 0;
    background: #d4b87a;
    z-index: 0;
  }

  /* Background image layer — separate so opacity can be controlled independently */
  .card-bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
  }

  /* Parchment texture overlay — real div so html2canvas captures it */
  .card-texture {
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.015) 2px, rgba(0,0,0,0.015) 4px);
    z-index: 0;
    pointer-events: none;
  }

  /* Vignette */
  .card-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%);
    z-index: 1;
    pointer-events: none;
  }

  .card-content {
    position: relative;
    z-index: 2;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 531px;
    overflow: hidden;
  }

  /* Ornate border frame */
  .card-frame {
    position: absolute;
    inset: 8px;
    border: 1.5px solid rgba(100,70,30,0.5);
    border-radius: 5px;
    pointer-events: none;
    z-index: 10;
  }

  /* Inner frame line — real div */
  .card-frame-inner {
    position: absolute;
    inset: 3px;
    border: 0.5px solid rgba(100,70,30,0.25);
    border-radius: 3px;
    pointer-events: none;
  }

  /* Top ornament — CSS diamond, no font/transform dependency for centering */
  .card-frame-ornament {
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: rgba(100,70,30,0.5);
    pointer-events: none;
  }

  /* Header band */
  .card-header {
    padding: 18px 20px 10px;
    text-align: center;
    position: relative;
  }

  .card-item-name {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    letter-spacing: 0.04em;
  }

  .card-subtype {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    color: var(--ink-light);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 3px;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Divider */
  .card-divider {
    height: 1px;
    margin: 0 16px;
    background: linear-gradient(to right, transparent, rgba(90,60,30,0.5) 20%, rgba(90,60,30,0.5) 80%, transparent);
    position: relative;
  }

  /* CSS diamond centred on the 1px divider line — no font/character dependency */
  .divider-gem {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    margin-top: -3.5px;
    transform: rotate(45deg);
    background: rgba(90,60,30,0.55);
    pointer-events: none;
    font-size: 0;
  }

  /* Item image area */
  .card-image-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 8px 20px 4px;
    min-height: 120px;
  }

  .card-side-stat {
    text-align: center;
    padding: 0 6px;
  }

  /* Label rename input wrapper with edit icon */
  .label-rename-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .label-rename-wrap input.stat-label-rename {
    flex: 1;
    padding-right: 18px;
  }
  .label-rename-icon {
    position: absolute;
    right: 4px;
    font-size: 0.65rem;
    color: rgba(210,160,70,0.6);
    pointer-events: none;
    line-height: 1;
    user-select: none;
  }

  .side-stat-label {
    font-family: 'Cinzel', serif;
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    color: var(--ink-light);
    opacity: 0.8;
    text-transform: uppercase;
    display: block;
  }

  .side-stat-value {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    display: block;
    margin-top: 3px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
  }

  .card-image-container {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid rgba(90,60,30,0.45);
    overflow: hidden;
    background: rgba(90,60,30,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    grid-column: 2;
    justify-self: center;
  }

  .card-image-container img {
    position: absolute;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
  }
  .card-image-container img:active { cursor: grabbing; }

  .img-drag-hint {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(0,0,0,0.52);
    color: rgba(255,255,255,0.92);
    opacity: 0;
    transition: opacity 0.18s;
    pointer-events: none;
    z-index: 5;
    text-align: center;
  }
  .img-drag-hint .hint-icon {
    font-size: 1.1rem;
    line-height: 1;
  }
  .img-drag-hint .hint-text {
    font-family: 'Cinzel', serif;
    font-size: 0.42rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.5;
  }
  .card-image-container.has-img:hover .img-drag-hint { opacity: 1; }

  .card-image-placeholder {
    color: rgba(90,60,30,0.4);
    font-size: 2.5rem;
    user-select: none;
  }

  /* Stats strip */
  .card-stats {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 4px 20px;
  }

  .card-stat {
    text-align: center;
    padding: 3px 12px;
    border-right: 1px solid rgba(90,60,30,0.3);
    flex: 1;
  }

  .card-stat:last-child { border-right: none; }

  .stat-label {
    font-family: 'Cinzel', serif;
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    color: var(--ink-light);
    opacity: 0.8;
    text-transform: uppercase;
    display: block;
  }

  .card-stat {
    min-width: 0; /* allow flex item to shrink so stat-value overflow is measurable */
  }

  .stat-value {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    display: block;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Rarity badge on card */
  .card-rarity {
    display: block;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 0;
  }

  /* Description body */
  .card-body {
    padding: 8px 20px 16px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }

  .card-description {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.87rem;
    line-height: 1.5;
    color: var(--ink);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Markdown styles inside card */
  .card-description p { margin-bottom: 0.5em; }
  .card-description p:last-child { margin-bottom: 0; }
  .card-description strong { font-weight: 600; color: var(--ink); }
  .card-description em { font-style: italic; }
  .card-description ul { padding-left: 1.2em; margin: 0.3em 0; }
  .card-description li { margin-bottom: 0.2em; }
  .card-description h1,
  .card-description h2,
  .card-description h3 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--ink);
    margin: 0.5em 0 0.3em;
    font-size: 0.88rem;
  }
  .card-description hr {
    border: none;
    border-top: 1px solid rgba(90,60,30,0.3);
    margin: 0.5em 0;
  }
  .card-description blockquote {
    border-left: 2px solid rgba(90,60,30,0.4);
    padding-left: 0.7em;
    font-style: italic;
    color: var(--ink-light);
    margin: 0.4em 0;
  }

  /* Attunement tag */
  .card-attunement {
    margin: 0 16px 4px;
    text-align: center;
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 0.75rem;
    color: var(--ink-light);
    opacity: 0.85;
    padding-top: 4px;
    border-top: 1px solid rgba(90,60,30,0.2);
  }

  /* Footer of card */
  .card-footer {
    padding: 8px 18px 14px;
    text-align: center;
  }

  .card-source {
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    color: rgba(44,26,14,0.45);
    text-transform: uppercase;
  }

  /* Rarity colors */
  .rarity-common      { color: #555; border-color: #aaa; }
  .rarity-uncommon    { color: #1a6e1a; border-color: #3a9a3a; }
  .rarity-rare        { color: #1a3e8b; border-color: #3a6acc; }
  .rarity-very-rare   { color: #5a1a8b; border-color: #8a3acc; }
  .rarity-legendary   { color: #8b4a00; border-color: #c97d00; }
  .rarity-artifact    { color: #8b1a1a; border-color: #cc3a3a; }
  .rarity-unique      { color: #2e6b6b; border-color: #4a9a9a; }

  /* Rarity colors on the dark history bar — use the lighter border-color values */
  .history-rarity.rarity-common      { color: #aaa; }
  .history-rarity.rarity-uncommon    { color: #3a9a3a; }
  .history-rarity.rarity-rare        { color: #3a6acc; }
  .history-rarity.rarity-very-rare   { color: #8a3acc; }
  .history-rarity.rarity-legendary   { color: #c97d00; }
  .history-rarity.rarity-artifact    { color: #cc3a3a; }
  .history-rarity.rarity-unique      { color: #4a9a9a; }

  /* Export hint */
  .export-hint {
    font-size: 0.85rem;
    color: #a07840;
    text-align: center;
    letter-spacing: 0.03em;
  }

  /* Scale control */
  .scale-control {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.8rem;
    color: var(--label-color);
  }

  .scale-control input[type="range"] {
    width: 100px;
  }

  /* ── Card flip (scaleX fold — avoids GPU compositing layer that blurs child images) ── */
  .card-flip-container {
    position: relative;
    transition: transform 0.18s ease-in;
  }
  .card-flip-container.folding {
    transform: scaleX(0);
  }
  .card-flip-back {
    position: absolute;
    inset: 0;
    width: var(--card-w);
    height: var(--card-h);
    border-radius: 8px;
    overflow: hidden;
    display: none;
    pointer-events: none;
  }
  .card-flip-back.visible {
    display: block;
  }
  .card-flip-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
  }

  /* Scale reset + flip buttons */
  .scale-reset-btn {
    font-size: 0.9rem;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(180,130,60,0.5);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
  }
  .scale-reset-btn:hover {
    color: var(--gold-light);
    border-color: rgba(180,130,60,0.3);
  }
  .scale-flip-btn {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    border: 1px solid rgba(180,130,60,0.3);
    background: transparent;
    color: #c9a96e;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .scale-flip-btn:hover {
    border-color: rgba(180,130,60,0.6);
    color: var(--gold-light);
  }
  .scale-flip-btn[aria-pressed="true"] {
    background: rgba(180,130,60,0.15);
    border-color: rgba(180,130,60,0.5);
    color: var(--gold-light);
  }

  /* ── Range slider theme ── */
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(180,130,60,0.25);
    outline: none;
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--gold-light);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
  }
  input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--gold-light);
    transform: scale(1.15);
  }
  input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--gold-light);
    cursor: pointer;
  }
  input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(180,130,60,0.25);
  }

  body.light input[type="range"] {
    background: rgba(120,80,30,0.2);
  }
  body.light input[type="range"]::-webkit-slider-thumb {
    background: #8a5c18;
    border-color: #b07830;
  }
  body.light input[type="range"]::-webkit-slider-thumb:hover {
    background: #b07830;
  }
  body.light input[type="range"]::-moz-range-thumb {
    background: #8a5c18;
    border-color: #b07830;
  }
  body.light input[type="range"]::-moz-range-track {
    background: rgba(120,80,30,0.2);
  }

  /* Markdown helper */
  .md-hint {
    font-size: 0.85rem;
    color: #6a4e2e;
    padding: 0.4rem 0.6rem;
    background: rgba(180,130,60,0.06);
    border-radius: 3px;
    border: 1px solid rgba(180,130,60,0.12);
    line-height: 1.5;
  }

  .md-hint code {
    font-family: monospace;
    background: rgba(180,130,60,0.12);
    padding: 0 3px;
    border-radius: 2px;
    font-size: 0.85em;
    color: #a0804a;
  }

  /* Checkbox toggle */
  .toggle-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.93rem;
    color: var(--label-color);
    cursor: pointer;
  }

  .toggle-wrap {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    flex-shrink: 0;
  }
  .toggle-wrap input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }
  .toggle-knob {
    position: absolute;
    inset: 0;
    background: rgba(180,130,60,0.15);
    border: 1px solid rgba(180,130,60,0.3);
    border-radius: 9px;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
  }
  .toggle-knob::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(180,130,60,0.5);
    top: 2px;
    left: 2px;
    transition: transform 0.2s, background 0.2s;
  }
  .toggle-wrap input:checked + .toggle-knob {
    background: rgba(180,130,60,0.35);
    border-color: rgba(180,130,60,0.7);
  }
  .toggle-wrap input:checked + .toggle-knob::before {
    transform: translateX(16px);
    background: var(--gold-light);
  }

  /* ── HISTORY BAR ── */
  .history-bar {
    position: relative;
    z-index: 2;
    background: rgba(12, 6, 2, 0.95);
    border-bottom: 1px solid rgba(180,130,60,0.18);
    display: flex;
    align-items: stretch;
    height: 48px;
    flex-shrink: 0;
  }

  /* Fixed left label */
  .history-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffdeb9;
    padding: 0 0.85rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 0.4rem;
  }

  /* Arrow scroll buttons */
  .history-arrow {
    flex-shrink: 0;
    width: 72px;
    background: rgba(30,15,4,0.98);
    border: none;
    border-right: 1px solid rgba(180,130,60,0.2);
    color: rgba(180,130,60,0.4);
    font-size: 0.75rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: color 0.15s, background 0.15s;
    pointer-events: none;
    padding: 0;
  }
  .history-arrow:last-of-type { border-right: none; border-left: 1px solid rgba(180,130,60,0.2); }
  .history-arrow:hover { color: var(--gold-light); background: rgba(180,130,60,0.1); }
  .history-arrow.active { color: #dabb80; pointer-events: auto; }

  /* Scrollable track — the only part that scrolls */
  .history-track {
    flex: 1;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    /* Hide scrollbar visually but keep it functional */
    scrollbar-width: none;
    min-width: 0;
  }
  .history-track::-webkit-scrollbar { display: none; }

  .history-empty {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: #dabb80;
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  #historyItems {
    display: flex;
    align-items: stretch;
  }

  .history-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem 0.4rem 0.6rem;
    border-right: 1px solid rgba(180,130,60,0.1);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
    max-width: 175px;
    position: relative;
  }

  .history-item:hover { background: rgba(180,130,60,0.08); }
  .history-item.history-active { background: rgba(180,130,60,0.14); border-right-color: rgba(180,130,60,0.35); }
  .history-item.history-active .history-name { color: var(--gold-light); }

  .history-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(180,130,60,0.3);
    flex-shrink: 0;
    background: rgba(90,60,30,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #5a3e28;
    overflow: hidden;
  }

  .history-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .history-meta {
    min-width: 0;
    flex: 1;
  }

  .history-name {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #dabb80;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    display: block;
  }

  .history-rarity {
    font-size: 0.8rem;
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    color: #6a4e2e;
    display: block;
    margin-top: 1px;
  }

  .history-delete {
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    color: #4a3520;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    padding: 0;
    line-height: 1;
  }

  .history-delete:hover { color: #c0392b; background: rgba(192,57,43,0.12); }

  /* ── HISTORY DROPDOWN ── */
  .history-label-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    border-right: 1px solid rgba(180,130,60,0.15);
  }

  .history-label {
    background: none;
    border: none;
    cursor: pointer;
  }

  .history-label:hover { background: rgba(180,130,60,0.07); }

  .dropdown-caret {
    font-size: 0.55rem;
    letter-spacing: -0.05em;
    opacity: 0.7;
    margin-left: 0.3rem;
    line-height: 1;
    vertical-align: middle;
  }

  .history-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: rgba(12, 6, 2, 0.98);
    border: 1px solid rgba(180,130,60,0.25);
    border-top: none;
    z-index: 200;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(180,130,60,0.2) transparent;
  }

  .history-dropdown.open { display: block; }
  .new-card-dropdown { left: auto; right: 0; min-width: 200px; }

  .history-dropdown-empty {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: #6a4e2e;
    padding: 0.75rem 1rem;
  }

  .history-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(180,130,60,0.08);
    transition: background 0.12s;
  }

  .history-dropdown-new {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(180,130,60,0.15);
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-light);
    transition: background 0.12s;
  }

  .history-dropdown-new:hover { background: rgba(180,130,60,0.1); }

  .history-dropdown-item:last-child { border-bottom: none; }
  .history-dropdown-item:hover { background: rgba(180,130,60,0.1); }
  .history-dropdown-item.history-active { background: rgba(180,130,60,0.14); }
  .history-dropdown-item.history-active .history-name { color: var(--gold-light); }

  .history-dropdown-item .history-thumb {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .history-dropdown-item .history-name {
    max-width: 140px;
  }

  .history-dropdown-item .history-delete {
    margin-left: auto;
    flex-shrink: 0;
  }

  .history-save-btn {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.8rem;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(180,130,60,0.2);
    border-radius: 0;
    color: #ffdeb9;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-transform: uppercase;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .history-save-btn:hover {
    color: var(--gold-light);
    background: rgba(180,130,60,0.08);
  }

  .history-save-btn.flash {
    color: var(--gold-light);
    background: rgba(180,130,60,0.15);
  }

  /* ── HISTORY SEARCH ── */
  .history-search-wrap {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 0.5rem;
    border-left: 1px solid rgba(180,130,60,0.15);
    border-right: 1px solid rgba(180,130,60,0.15);
    align-self: stretch;
    flex-shrink: 0;
  }

  .history-search-input {
    background: transparent;
    border: 1px solid rgba(180,130,60,0.25);
    border-radius: 3px;
    color: #dabb80;
    font-family: 'Crimson Pro', serif;
    font-size: 0.8rem;
    padding: 0.18rem 0.5rem;
    width: 130px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
  }
  .history-search-input::placeholder { color: rgba(180,130,60,0.38); }
  .history-search-input:focus {
    border-color: rgba(180,130,60,0.6);
    background: rgba(180,130,60,0.05);
  }

  .history-search-clear {
    background: none;
    border: 1px solid rgba(180,130,60,0.3);
    border-radius: 3px;
    color: rgba(180,130,60,0.55);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.15rem 0.3rem;
    margin-left: 0.5rem;
    line-height: 1;
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .history-search-clear.visible { display: flex; }
  .history-search-clear:hover { color: #dabb80; border-color: rgba(180,130,60,0.65); background: rgba(180,130,60,0.08); }

  /* hidden on desktop; shown as overlay on mobile (see @media block below) */
  .history-search-results { display: none; }

  /* ── COLLECTION DROPDOWN ── */
  .collection-dropdown-divider {
    height: 1px;
    background: rgba(180,130,60,0.15);
    margin: 0.2rem 0;
  }
  .collection-dropdown-item {
    gap: 0;
    justify-content: space-between;
  }
  .collection-dd-name {
    flex: 1;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .collection-dd-count {
    font-family: 'Crimson Pro', serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
    flex-shrink: 0;
  }
  body.light .collection-dd-name { color: #2c1a0e; }

  /* ── TYPE FILTER ── */
  .history-type-filter {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border-left: 1px solid rgba(180,130,60,0.15);
  }
  .type-filter-btn {
    background: none;
    border: none;
    border-right: 1px solid rgba(180,130,60,0.12);
    color: rgba(210,160,70,0.5);
    font-family: 'Cinzel', serif;
    font-size: 0.63rem;
    letter-spacing: 0.04em;
    padding: 0 0.55rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
  }
  .type-filter-btn:last-child { border-right: none; }
  .type-filter-btn.active {
    color: var(--gold-light);
    background: rgba(180,130,60,0.1);
  }
  .type-filter-btn.type-filter-disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .type-filter-btn:not(.type-filter-disabled):hover {
    color: var(--gold-light);
    background: rgba(180,130,60,0.07);
  }
  body.light .type-filter-btn { color: rgba(90,56,16,0.45); }
  body.light .type-filter-btn.active { color: #3a2008; background: rgba(120,80,30,0.1); }
  body.light .type-filter-btn:not(.type-filter-disabled):hover { color: #3a2008; background: rgba(120,80,30,0.07); }

  /* ── COLLECTION SELECTION GROUP HEADERS (Print/Download/Share modals) ── */
  .select-group-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.75rem 0.3rem;
    background: rgba(180,130,60,0.08);
    border-top: 1px solid rgba(180,130,60,0.14);
    border-bottom: 1px solid rgba(180,130,60,0.14);
    margin-top: 0.15rem;
    cursor: default;
  }
  .select-group-header:first-child { margin-top: 0; border-top: none; }
  .select-group-caret {
    font-size: 0.7rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    line-height: 1;
    padding: 0.1rem 0.1rem;
    transition: color 0.12s;
  }
  .select-group-caret:hover { color: var(--gold-light); }
  .select-group-body { overflow: hidden; }
  .select-group-body.collapsed { display: none; }
  .select-group-toggle {
    accent-color: var(--gold);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
  }
  .select-group-name {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: var(--gold-light);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .select-group-count {
    font-family: 'Crimson Pro', serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  body.light .select-group-header { background: rgba(120,80,30,0.07); }
  body.light .select-group-name   { color: #5a3810; }

  /* ── COLLECTIONS MANAGE MODAL ── */
  .collections-modal-box {
    max-width: 460px !important;
    width: 92vw !important;
  }
  .collections-list {
    max-height: 340px;
    overflow-y: auto;
    margin: 0.4rem 0 0.9rem;
    border: 1px solid rgba(180,130,60,0.18);
    border-radius: 6px;
  }
  .collections-manage-row {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(180,130,60,0.1);
    gap: 0.5rem;
  }
  .collections-manage-row:last-child { border-bottom: none; }
  .collections-manage-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .collections-manage-name {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: #e8d898;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .collections-manage-count {
    font-family: 'Crimson Pro', serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
  }
  .collections-manage-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
  }
  .btn-icon {
    background: none;
    border: 1px solid rgba(180,130,60,0.25);
    color: rgba(210,160,70,0.7);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .btn-icon:hover { color: var(--gold-light); background: rgba(180,130,60,0.1); border-color: rgba(180,130,60,0.5); }
  .btn-icon-danger:hover { color: #e05a4a; background: rgba(220,80,60,0.1); border-color: rgba(220,80,60,0.4); }
  body.light .collections-manage-name { color: #2c1a0e; }
  body.light .btn-icon { color: rgba(90,56,16,0.6); border-color: rgba(120,80,30,0.25); }
  body.light .btn-icon:hover { color: #3a2008; border-color: rgba(120,80,30,0.5); }

  /* ── COLLECTION EDIT MODAL ── */
  .collection-edit-box {
    max-width: 380px !important;
    width: 92vw !important;
  }
  .collection-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0.3rem 0 0.2rem;
  }

  .dirty-indicator {
    display: none;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 0.82rem;
    color: rgba(210,160,70,0.85);
    margin-top: 0.4rem;
  }
  .dirty-indicator.visible { display: flex; }
  .dirty-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    flex-shrink: 0;
    opacity: 0.9;
  }

  /* Asterisk mark on active dirty item in bar/dropdown */
  .item-dirty-mark {
    font-size: 0.65rem;
    color: var(--gold-light);
    flex-shrink: 0;
    opacity: 0.9;
  }

  /* Mobile unsaved message in history bar */
  .mobile-dirty-msg {
    align-items: center;
    gap: 0.4rem;
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 0.82rem;
    color: rgba(210,160,70,0.9);
    padding: 0 0.75rem;
    flex: 1;
    white-space: nowrap;
    display: none;
  }
  @media (min-width: 861px) { .mobile-dirty-msg { display: none !important; } }

  /* Confirm modal */
  .confirm-modal {
    position: fixed;
    inset: 0;
    background: rgba(10,5,2,0.88);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
  }
  .confirm-modal.active { display: flex; }
  .confirm-modal-box {
    background: rgba(26,15,7,0.98);
    border: 1px solid rgba(180,130,60,0.35);
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    max-width: 380px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .confirm-modal-title {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.06em;
  }
  .confirm-modal-msg {
    font-family: 'Crimson Pro', serif;
    font-size: 1rem;
    font-weight: 500;
    color: #c9a96e;
    line-height: 1.5;
  }
  .confirm-modal-btns {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .confirm-modal-btns .btn {
    font-size: 0.75rem;
    padding: 0.4rem 0.85rem;
  }
  .confirm-modal-btns .btn-cancel {
    background: transparent;
    border: 1px solid rgba(180,130,60,0.3);
    color: rgba(210,160,70,0.7);
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
  }
  .confirm-modal-btns .btn-cancel:hover { border-color: rgba(180,130,60,0.6); color: var(--gold-light); }

  /* ── PRINT SELECTION MODAL ── */
  .print-select-box { max-width: 460px; width: 92%; }
  .print-select-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
  }
  .print-select-meta-btn {
    font-size: 0.68rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(180,130,60,0.3);
    border-radius: 3px;
    background: transparent;
    color: var(--label-color);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
  }
  .print-select-meta-btn:hover { border-color: rgba(180,130,60,0.6); color: var(--gold-light); }
  .print-select-page-hint {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(180,130,60,0.55);
    font-family: 'Crimson Pro', serif;
  }
  .print-select-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(180,130,60,0.2);
    border-radius: 4px;
    margin-bottom: 0.85rem;
  }
  .print-select-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(180,130,60,0.1);
    cursor: pointer;
    transition: background 0.12s;
  }
  .print-select-item:last-child { border-bottom: none; }
  .print-select-item:hover { background: rgba(180,130,60,0.07); }
  .print-select-item.collection-child { padding-left: 2.1rem; }
  .print-select-item input[type="checkbox"] {
    accent-color: var(--gold);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
  }
  .print-select-name {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #e8d898;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .print-select-rarity {
    font-size: 0.68rem;
    font-family: 'Crimson Pro', serif;
    flex-shrink: 0;
  }
  body.light .print-select-item:hover { background: rgba(120,80,30,0.07); }
  body.light .print-select-name { color: #2c1a0e; }

  /* ── PNG QUALITY ROW (inside Download Selection modal) ── */
  .png-quality-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.45rem 0.75rem;
    background: rgba(180,130,60,0.07);
    border: 1px solid rgba(180,130,60,0.18);
    border-radius: 5px;
  }
  .png-quality-heading {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--gold-light);
    flex-shrink: 0;
  }
  .png-quality-option {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-family: 'Crimson Pro', serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #c9a96e;
  }
  .png-quality-option input[type="radio"] { accent-color: var(--gold); flex-shrink: 0; }
  body.light .png-quality-row { background: rgba(120,80,30,0.06); border-color: rgba(120,80,30,0.2); }
  body.light .png-quality-heading { color: #5a3810; }
  body.light .png-quality-option { color: #4a2c08; }

  /* ── Light mode modals ── */
  body.light .confirm-modal-box {
    background: rgba(244,234,207,0.99);
    border-color: rgba(120,80,30,0.35);
  }
  body.light .confirm-modal-title { color: #5a3010; }
  body.light .confirm-modal-msg   { color: #3a2008; }
  body.light .confirm-modal-msg strong { color: #2c1a0e; }
  body.light .confirm-modal-btns .btn-cancel {
    border-color: rgba(120,80,30,0.35);
    color: #6b4418;
  }
  body.light .confirm-modal-btns .btn-cancel:hover {
    border-color: rgba(120,80,30,0.6);
    color: #3a2008;
  }
  body.light .print-select-list {
    border-color: rgba(120,80,30,0.2);
  }
  body.light .print-select-item {
    border-bottom-color: rgba(120,80,30,0.1);
  }
  body.light .print-select-controls .btn-cancel {
    border-color: rgba(120,80,30,0.3);
    color: #6b4418;
  }

  /* ── PRINT OPTIONS SECTION ── */
  .print-opts-section {
    border: 1px solid rgba(180,130,60,0.18);
    border-radius: 5px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .print-opts-title {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    color: rgba(180,130,60,0.65);
    text-transform: uppercase;
  }
  .print-opt-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #c9a96e;
    cursor: pointer;
    user-select: none;
  }
  .print-opt-row input[type="checkbox"] {
    accent-color: var(--gold);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
  }
  .print-opt-back-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(180,130,60,0.12);
    margin-top: 0.2rem;
  }
  .print-opt-back-label {
    font-size: 0.8rem;
    color: rgba(180,130,60,0.7);
    width: 100%;
  }
  .print-opt-upload-btn {
    cursor: pointer;
  }
  .print-opt-back-preview-wrap {
    width: 100%;
    margin-top: 0.35rem;
  }
  .print-opt-back-preview-wrap img {
    height: 44mm;
    width: auto;
    border-radius: 3px;
    border: 1px solid rgba(180,130,60,0.25);
    display: block;
  }

  body.light .print-opts-section   { border-color: rgba(120,80,30,0.2); }
  body.light .print-opts-title     { color: rgba(80,50,15,0.6); }
  body.light .print-opt-row        { color: #3a2008; }
  body.light .print-opt-back-label { color: rgba(80,50,15,0.7); }
  body.light .print-opt-back-row   { border-top-color: rgba(120,80,30,0.15); }

  /* ── PROGRESS OVERLAY ── */
  .progress-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,5,2,0.88);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
  }
  .progress-overlay.active { display: flex; }
  .progress-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--gold-light);
    letter-spacing: 0.08em;
  }
  .progress-bar-wrap {
    width: 280px;
    height: 6px;
    background: rgba(180,130,60,0.15);
    border-radius: 3px;
    overflow: hidden;
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(to right, var(--gold), var(--gold-light));
    border-radius: 3px;
    transition: width 0.2s;
    width: 0%;
  }
  .progress-label {
    font-family: 'Crimson Pro', serif;
    font-size: 0.85rem;
    color: #9a7a4a;
    font-style: italic;
  }

  /* Off-screen render area — positioned far left so it never overlaps page content when html2canvas composites */
  #offscreenRender {
    position: absolute;
    left: -9999px;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 9998;
  }

  /* ── CHAR COUNTER ── */
  .char-counter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
  }

  .char-count {
    font-family: 'Cinzel', serif;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: #6a4e2e;
    transition: color 0.2s;
    white-space: nowrap;
  }
  .char-count.warn  { color: #b8860b; }
  .char-count.over  { color: #8b1a1a; font-weight: 600; }

  .oversized-warning {
    display: none;
    font-size: 0.85rem;
    color: #8b4a00;
    background: rgba(139,74,0,0.08);
    border: 1px solid rgba(139,74,0,0.25);
    border-radius: 3px;
    padding: 0.35rem 0.6rem;
    line-height: 1.45;
  }
  .oversized-warning.visible { display: block; }

  /* Allow oversized text toggle — slightly more prominent */
  .oversized-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #8a6a3a;
    cursor: pointer;
    line-height: 1.4;
  }
  .oversized-toggle-row .toggle-wrap input:checked + .toggle-knob {
    background: rgba(139,26,26,0.3);
    border-color: rgba(139,26,26,0.6);
  }
  .oversized-toggle-row .toggle-wrap input:checked + .toggle-knob::before {
    background: #c0392b;
  }
  .oversized-toggle-row-UNUSED {
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ── PRINT / EXPORT ── */
  /* All printing is done via a popup window containing baked PNG images.
     This @media print block only applies if someone uses Ctrl+P directly. */
  @media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    body { background: white; }
    body::before { display: none; }
    header, .history-bar, .controls, .scale-control, .export-hint,
    .progress-overlay, #offscreenRender, #printSheet { display: none !important; }
  }

  /* ── SWIPE HINT OVERLAY ──
     position:fixed so it doesn't move when .preview-area scrolls.
     top/height/left-or-right/width are all set in JS from the preview bounding rect. */
  .swipe-hint {
    position: fixed;
    z-index: 200;
    background: rgba(0, 0, 0, 0.58);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .swipe-hint.visible { opacity: 1; }
  .swipe-hint-content {
    position: absolute;
    bottom: 33%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0 8px;
  }
  .swipe-hint-icon {
    font-size: 1.8rem;
    color: var(--gold-light);
    line-height: 1;
  }
  .swipe-hint-label {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    color: var(--gold-light);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    word-break: break-word;
    width: 100%;
  }

  /* ── MOBILE DRAG HANDLE (desktop: hidden) ── */
  .mobile-drag-handle { display: none; }

  @media (max-width: 860px) {
    .history-track,
    .history-arrow,
    .history-type-filter { display: none !important; }
    .history-label-wrap { border-right: none; }
    .history-label-text,
    #collectionDropdownLabel { display: none; }
    #themeToggle { margin-left: auto; }
    .theme-label { display: none; }
    .history-search-wrap { flex: 1; flex-shrink: 1; min-width: 0; }
    .history-search-wrap .history-search-input { width: auto; flex: 1; min-width: 0; }
    .history-save-btn { padding-left: 0.35rem; padding-right: 0.35rem; letter-spacing: 0.04em; }
    #newCardBtn { flex: none; padding-left: 0.4rem; padding-right: 0.4rem; letter-spacing: 0; justify-content: center; }
    #themeToggle { width: 36px; padding: 0; justify-content: center; flex-shrink: 0; }

    /* Switch workspace to flex column so children can have explicit heights */
    .workspace {
      display: flex;
      flex-direction: column;
    }

    /* Card preview — top section, height is user-draggable */
    .preview-area {
      order: 1;
      flex-shrink: 0;
      height: var(--mobile-preview-h, 42vh);
      min-height: 80px;
      padding: 0.75rem 1rem 0.5rem;
      overflow-y: auto;
      overflow-x: hidden;
    }

    /* Drag handle — sits between preview and tabs */
    .mobile-drag-handle {
      display: flex;
      order: 2;
      flex-shrink: 0;
      height: 22px;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: rgba(20,10,2,0.98);
      border-top: 1px solid rgba(180,130,60,0.25);
      border-bottom: 1px solid rgba(180,130,60,0.25);
      cursor: ns-resize;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .mobile-drag-handle:active { background: rgba(180,130,60,0.1); }
    .mobile-drag-pill {
      width: 36px;
      height: 4px;
      border-radius: 2px;
      background: rgba(180,130,60,0.45);
      flex-shrink: 0;
    }
    .mobile-drag-label {
      font-family: 'Cinzel', serif;
      font-size: 0.58rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(180,130,60,0.35);
    }

    /* Tab panel — fills remaining space, scrolls internally */
    .controls {
      order: 3;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      /* Push content above iOS home indicator / Android nav bar when
         viewport-fit=cover extends the page to screen edges */
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ── MOBILE SEARCH RESULTS OVERLAY ── */
    .history-search-results {
      position: absolute;
      top: calc(100% + 6px);
      left: -0.5rem;
      right: -0.5rem;
      z-index: 200;
      background: rgba(18,9,2,0.98);
      border: 2px solid rgba(180,130,60,0.65);
      border-radius: 5px;
      max-height: 50vh;
      overflow-y: auto;
      box-shadow: 0 6px 24px rgba(0,0,0,0.6);
    }
    .history-search-results.open { display: block; }
    .history-search-result-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.65rem 0.9rem;
      font-family: 'Crimson Pro', serif;
      font-size: 0.95rem;
      color: #dabb80;
      cursor: pointer;
      border-bottom: 1px solid rgba(180,130,60,0.12);
    }
    .history-search-result-item:last-child { border-bottom: none; }
    .history-search-result-item:active { background: rgba(180,130,60,0.12); }
    .history-search-result-name { flex: 1; }
    .history-search-result-meta { font-size: 0.75rem; opacity: 0.55; white-space: nowrap; }
  }

  /* ── THEME TOGGLE BUTTON ── */
  .theme-toggle {
    /* inherits .history-save-btn layout; no extra positioning needed */
  }

  /* ── LIGHT MODE ── */
  body.light {
    color-scheme: light;
    background: #f0e6cc;
    color: #2c1a0e;
  }
  body.light::before {
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(0,0,0,0.03) 60px, rgba(0,0,0,0.03) 61px),
      repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(0,0,0,0.03) 60px, rgba(0,0,0,0.03) 61px);
  }
  body.light header {
    border-bottom-color: rgba(120,80,30,0.25);
  }
  body.light header h1 { color: #6b4400; text-shadow: none; }
  body.light header p   { color: #7a5828; }
  body.light .theme-toggle {
    border-color: rgba(100,65,20,0.35);
    color: #7a5020;
  }
  body.light .theme-toggle:hover {
    border-color: rgba(100,65,20,0.65);
    color: #3a2008;
    background: rgba(100,65,20,0.07);
  }
  body.light .history-bar {
    background: rgba(210,178,108,0.97);
    border-bottom-color: rgba(120,80,30,0.2);
  }
  body.light .history-label { color: #5a3810; }
  body.light .history-arrow {
    background: rgba(160,110,40,0.15);
    border-color: rgba(120,80,30,0.25) !important;
    color: rgba(90,56,16,0.4);
  }
  body.light .history-arrow.active { color: #5a3810; }
  body.light .history-arrow:hover  { background: rgba(120,80,30,0.12); color: #3a2008; }
  body.light .history-arrow.active { color: #3a2008; }
  body.light .history-item          { border-right-color: rgba(120,80,30,0.15); }
  body.light .history-item:hover    { background: rgba(120,80,30,0.08); }
  body.light .history-name          { color: #2c1a0e; }
  body.light .history-item.history-active .history-name,
  body.light .history-dropdown-item.history-active .history-name { color: #1a0800; font-weight: 700; }
  body.light .history-empty         { color: #7a5020; }
  body.light .history-save-btn {
    color: #6b4418;
    border-left-color: rgba(120,80,30,0.2);
  }
  body.light .history-save-btn:hover  { background: rgba(120,80,30,0.1); color: #3a2008; }
  body.light .history-save-btn.flash  { background: rgba(120,80,30,0.15); color: #3a2008; }
  body.light .history-search-clear { color: rgba(120,80,30,0.5); border-color: rgba(120,80,30,0.25); }
  body.light .history-search-clear:hover { color: #3a2008; border-color: rgba(120,80,30,0.6); background: rgba(120,80,30,0.06); }
  body.light .history-search-results {
    background: rgba(244,232,193,0.99);
    border-color: rgba(120,80,30,0.55);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  }
  body.light .history-search-result-item { color: #3a2008; border-bottom-color: rgba(120,80,30,0.15); }
  body.light .history-search-result-item:active { background: rgba(120,80,30,0.08); }
  body.light .history-search-input { color: #3a2008; border-color: rgba(120,80,30,0.35); }
  body.light .history-search-input::placeholder { color: rgba(120,80,30,0.45); }
  body.light .history-search-input:focus { border-color: rgba(120,80,30,0.7); background: rgba(120,80,30,0.05); }
  body.light .history-rarity.rarity-common    { color: #7a5820; }
  body.light .history-rarity.rarity-uncommon  { color: #1e7a3e; }
  body.light .history-rarity.rarity-rare      { color: #1a48a0; }
  body.light .history-rarity.rarity-very-rare { color: #6a2a9a; }
  body.light .history-rarity.rarity-legendary { color: #c05000; }
  body.light .history-rarity.rarity-artifact  { color: #a01818; }
  body.light .history-rarity.rarity-unique    { color: #8a7000; }
  body.light .history-delete { color: rgba(100,65,20,0.4); }
  body.light .history-delete:hover { color: #c0392b; background: rgba(192,57,43,0.1); }
  body.light .history-dropdown {
    background: rgba(244,234,207,0.99);
    border-color: rgba(120,80,30,0.25);
  }
  body.light .history-dropdown-empty { color: #7a5020; }
  body.light .history-dropdown-new {
    color: #6b4418;
    border-bottom-color: rgba(120,80,30,0.2);
  }
  body.light .history-dropdown-new:hover { background: rgba(120,80,30,0.08); }
  body.light .history-dropdown-item { border-bottom-color: rgba(120,80,30,0.1); }
  body.light .history-dropdown-item:hover { background: rgba(120,80,30,0.07); }
  body.light .history-dropdown-item.history-active { background: rgba(120,80,30,0.12); }
  body.light .controls {
    background: rgba(244,234,207,0.98);
    border-right-color: rgba(120,80,30,0.2);
  }
  body.light .tab-bar {
    background: rgba(180,140,70,0.12);
    border-bottom-color: rgba(120,80,30,0.2);
  }
  body.light .btn-primary {
    background: #b8860b;
    border-color: #8b6010;
    color: #1a0800;
  }
  body.light .btn-primary:hover {
    background: #c89a20;
    box-shadow: 0 0 16px rgba(160,104,32,0.3);
  }
  body.light .tab-btn       { color: rgba(100,65,20,0.5); }
  body.light .tab-btn:hover { color: #3a2008; }
  body.light .tab-btn.active {
    color: #4a2e00;
    border-bottom-color: #8b6010;
    background: rgba(140,95,20,0.08);
  }
  body.light .section-title { color: #8b5e08; }
  body.light .section-title::after {
    background: linear-gradient(to right, rgba(120,80,30,0.3), transparent);
  }
  body.light input[type="text"],
  body.light select,
  body.light textarea {
    background: rgba(120,80,30,0.05);
    border-color: rgba(120,80,30,0.28);
    color: #2c1a0e;
  }
  body.light select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a5c18' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
  }
  body.light select option { background: #f0e6cc; color: #2c1a0e; }
  body.light input[type="text"]:focus,
  body.light select:focus,
  body.light textarea:focus {
    border-color: rgba(120,80,30,0.55);
  }
  body.light label,
  body.light .field-group label { color: #4a2c08; }
  body.light .toggle-row        { color: #4a2c08; }
  body.light { --label-color: #5a3810; }
  body.light .stat-label-rename { color: #7a5020; border-bottom-color: rgba(120,80,30,0.25); }
  body.light .label-rename-icon { color: rgba(120,80,30,0.4); }
  body.light .btn-secondary {
    border-color: rgba(120,80,30,0.38);
    color: #7a5020;
  }
  body.light .btn-secondary:hover {
    border-color: rgba(120,80,30,0.65);
    color: #3a2008;
  }
  body.light .preview-area { background: #e4d0a5; }
  body.light .scale-control { color: #5a3810; }
  body.light .scale-reset-btn { color: rgba(80,50,15,0.5); }
  body.light .scale-reset-btn:hover { color: #3a2008; border-color: rgba(120,80,30,0.3); }
  body.light .scale-flip-btn { border-color: rgba(120,80,30,0.3); color: #6b4418; }
  body.light .scale-flip-btn:hover { border-color: rgba(120,80,30,0.6); color: #3a2008; }
  body.light .scale-flip-btn[aria-pressed="true"] { background: rgba(120,80,30,0.12); border-color: rgba(120,80,30,0.5); color: #3a2008; }
  body.light .export-hint   { color: #5a3810; }
  body.light .char-count    { color: #5a3810; }
  body.light .char-count.warn { color: #9a6e00; }
  body.light .char-count.over { color: #8b1a1a; }
  body.light .md-hint {
    background: rgba(120,80,30,0.06);
    border-color: rgba(120,80,30,0.2);
    color: #5a3810;
  }
  body.light .md-hint code {
    background: rgba(120,80,30,0.1);
    color: #5a3810;
  }
  body.light .upload-zone {
    border-color: rgba(120,80,30,0.3);
    background: rgba(120,80,30,0.04);
  }
  body.light .upload-zone:hover {
    border-color: rgba(120,80,30,0.55);
    background: rgba(120,80,30,0.08);
  }
  body.light .upload-placeholder { color: rgba(100,65,20,0.65); }
  body.light .oversized-warning {
    background: rgba(139,26,26,0.07);
    border-color: rgba(139,26,26,0.22);
    color: #7a1010;
  }
  body.light .oversized-toggle-row { color: #4a2c08; }
  body.light .color-row input[type="color"] { border-color: rgba(120,80,30,0.3); }
  body.light p[style*="color:rgba(180,130,60"] { color: #5a3810 !important; }