.stacks-app {
          --bg: #fdfcf9;
          --bg-subtle: #f5f3ee;
          --ink: #22221e;
          --ink-soft: #4a473f;
          --text-muted: #7a766b;
          --border: #e3e0d6;
          --border-strong: #c9c4b4;
          --paper: #ffffff;
          --paper-dim: #f1efe7;
          --accent: #3f5443;
          --accent-dark: #2c3d30;
          --accent-soft: #eef1ec;
          --gold: #92742f;
          --gold-light: #b39a5c;
          --danger: #8a3a3a;
          --on-accent: #faf9f4;
          font-family: 'Source Sans 3', -apple-system, sans-serif;
          background: var(--bg);
          color: var(--ink);
          overflow: hidden;
          /* Break out of the theme's content column so this spans the full browser width. */
          width: 100vw;
          max-width: 100vw;
          position: relative;
          left: 50%;
          right: 50%;
          margin-left: -50vw;
          margin-right: -50vw;
        }
        .stacks-app * { box-sizing: border-box; }
        @import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

        .stacks-header {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 12px 16px;
          padding: 22px 40px;
          background: var(--paper);
          border-bottom: 1px solid var(--border);
        }
        .stacks-brand {
          display: flex;
          align-items: center;
          gap: 10px;
          font-family: 'Newsreader', serif;
          font-size: 20px;
          font-weight: 500;
          color: var(--ink);
          letter-spacing: 0.01em;
          line-height: 1.25;
          flex: 1 1 260px;
          min-width: 0;
        }
        .stacks-brand-mark {
          width: 26px; height: 26px;
          display: flex; align-items: center; justify-content: center;
          color: var(--accent);
          flex-shrink: 0;
        }
        .stacks-search {
          flex: 1;
          display: flex;
          align-items: center;
          gap: 8px;
          background: var(--bg-subtle);
          border: 1px solid var(--border);
          border-radius: 3px;
          padding: 0 12px;
          height: 36px;
          min-width: 160px;
        }
        .stacks-search input {
          background: transparent;
          border: none;
          outline: none;
          color: var(--ink);
          font-size: 14px;
          font-family: 'Source Sans 3', sans-serif;
          width: 100%;
        }
        .stacks-search input::placeholder { color: var(--text-muted); }
        .stacks-header-actions {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;
        }
        .stacks-add-btn, .stacks-btn-secondary {
          display: flex;
          align-items: center;
          gap: 6px;
          border-radius: 3px;
          padding: 0 14px;
          height: 36px;
          font-size: 13px;
          font-weight: 600;
          font-family: 'Source Sans 3', sans-serif;
          cursor: pointer;
          white-space: nowrap;
          transition: background 0.15s ease, border-color 0.15s ease;
        }
        .stacks-add-btn {
          background: var(--accent);
          color: var(--on-accent);
          border: 1px solid var(--accent);
        }
        .stacks-add-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
        .stacks-btn-secondary {
          background: transparent;
          color: var(--ink-soft);
          border: 1px solid var(--border-strong);
        }
        .stacks-btn-secondary:hover { background: var(--bg-subtle); color: var(--ink); }

        .stacks-body {
          display: grid;
          grid-template-columns: 240px 1fr;
        }
        .stacks-sidebar {
          padding: 22px 18px;
          background: var(--bg-subtle);
          border-right: 1px solid var(--border);
          position: sticky;
          top: 0;
          max-height: 100vh;
          overflow-y: auto;
        }
        .stacks-sidebar-label {
          font-family: 'IBM Plex Mono', monospace;
          font-size: 10px;
          letter-spacing: 0.09em;
          text-transform: uppercase;
          color: var(--text-muted);
          margin: 0 0 10px;
        }
        .stacks-sidebar-label-saints {
          display: flex;
          align-items: center;
          gap: 5px;
          margin-top: 20px;
          padding-top: 16px;
          border-top: 1px solid var(--border);
          color: var(--gold);
        }
        .stacks-sort {
          width: 100%;
          background: var(--paper);
          border: 1px solid var(--border-strong);
          color: var(--ink);
          border-radius: 3px;
          padding: 6px 8px;
          font-size: 13px;
          font-family: 'Source Sans 3', sans-serif;
          margin-bottom: 22px;
        }
        .stacks-tag-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          padding: 6px 8px;
          border-radius: 3px;
          cursor: pointer;
          font-size: 13px;
          margin-bottom: 1px;
          border-left: 2px solid transparent;
          transition: background 0.12s ease, border-color 0.12s ease;
        }
        .stacks-tag-row:hover { background: var(--paper); }
        .stacks-tag-row.active { background: var(--paper); border-left-color: var(--accent); }
        .stacks-tag-name { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
        .stacks-tag-count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
        .stacks-tag-row.active .stacks-tag-name { color: var(--ink); font-weight: 600; }
        .stacks-saint-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); flex-shrink: 0; }
        .stacks-clear-tags {
          font-size: 12px;
          color: var(--accent);
          background: none;
          border: none;
          cursor: pointer;
          padding: 4px 8px;
          margin-top: 6px;
        }
        .stacks-see-more {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          font-weight: 600;
          color: var(--text-muted);
          background: none;
          border: none;
          cursor: pointer;
          padding: 6px 8px 2px;
        }
        .stacks-see-more:hover { color: var(--ink); }

        .stacks-main {
          padding: 22px 40px;
          background: var(--bg);
          min-height: 70vh;
        }
        .stacks-count {
          font-family: 'IBM Plex Mono', monospace;
          font-size: 11px;
          color: var(--text-muted);
          margin: 0 0 16px;
        }
        .stacks-grid {
          display: flex;
          flex-direction: column;
        }
        .stacks-card {
          background: var(--bg);
          color: var(--ink);
          padding: 18px 4px;
          position: relative;
          border-bottom: 1px solid var(--border);
        }
        .stacks-card-clickable { cursor: pointer; transition: background 0.12s ease; }
        .stacks-card-clickable:hover { background: var(--bg-subtle); }
        .stacks-grid > .stacks-card:first-child { padding-top: 2px; }
        .stacks-card-top {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 6px;
        }
        .stacks-catalog-no {
          font-family: 'IBM Plex Mono', monospace;
          font-size: 11px;
          color: var(--text-muted);
          letter-spacing: 0.03em;
        }
        .stacks-type-badge {
          font-family: 'IBM Plex Mono', monospace;
          font-size: 10px;
          font-weight: 500;
          letter-spacing: 0.06em;
          color: var(--text-muted);
          border: 1px solid var(--border-strong);
          border-radius: 2px;
          padding: 1px 6px;
        }
        .stacks-card-actions {
          display: flex;
          gap: 2px;
          opacity: 0;
          transition: opacity 0.12s ease;
        }
        .stacks-card:hover .stacks-card-actions { opacity: 1; }
        .stacks-icon-btn {
          background: transparent;
          border: none;
          cursor: pointer;
          color: var(--text-muted);
          padding: 4px;
          border-radius: 3px;
          display: flex;
        }
        .stacks-icon-btn:hover { background: var(--bg-subtle); color: var(--ink); }
        .stacks-icon-btn.danger:hover { color: var(--danger); background: #f5eeee; }
        .stacks-title {
          font-family: 'Newsreader', serif;
          font-size: 19px;
          font-weight: 500;
          line-height: 1.35;
          margin: 0 0 4px;
        }
        .stacks-meta {
          font-size: 13px;
          color: var(--text-muted);
          margin: 0 0 10px;
        }
        .stacks-notes {
          font-size: 13px;
          color: var(--ink-soft);
          margin: 0 0 10px;
          line-height: 1.6;
        }
        .stacks-card-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
        }
        .stacks-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }
        .stacks-chip {
          font-family: 'IBM Plex Mono', monospace;
          font-size: 11px;
          background: var(--paper-dim);
          border: 1px solid var(--border);
          color: var(--ink-soft);
          border-radius: 2px;
          padding: 2px 7px;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 4px;
        }
        .stacks-chip.saint { border-color: var(--gold-light); color: var(--gold); background: #faf7ef; }
        .stacks-chip:hover { border-color: var(--accent); color: var(--accent); }
        .stacks-link {
          font-size: 12px;
          color: var(--accent);
          display: inline-flex;
          align-items: center;
          gap: 4px;
          text-decoration: none;
          flex-shrink: 0;
        }
        .stacks-link:hover { text-decoration: underline; }

        .stacks-empty {
          text-align: center;
          padding: 60px 20px;
          color: var(--text-muted);
        }
        .stacks-empty h3 {
          font-family: 'Newsreader', serif;
          font-size: 20px;
          color: var(--ink);
          margin: 0 0 8px;
          font-weight: 500;
        }
        .stacks-empty p { font-size: 14px; margin: 0 0 16px; }
        .stacks-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

        .stacks-pagination {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 14px;
          padding: 22px 0 4px;
        }
        .stacks-pagination .stacks-icon-btn {
          border: 1px solid var(--border-strong);
          border-radius: 3px;
          padding: 6px;
        }
        .stacks-pagination .stacks-icon-btn:disabled {
          opacity: 0.35;
          cursor: not-allowed;
        }
        .stacks-pagination .stacks-icon-btn:disabled:hover {
          background: transparent;
          color: var(--text-muted);
        }
        .stacks-pagination-label {
          font-family: 'IBM Plex Mono', monospace;
          font-size: 12px;
          color: var(--text-muted);
        }

        .stacks-overlay {
          position: fixed;
          inset: 0;
          background: rgba(34,34,30,0.45);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 50;
          padding: 20px;
        }
        .stacks-modal {
          background: var(--paper);
          color: var(--ink);
          border-radius: 4px;
          border: 1px solid var(--border);
          width: 100%;
          max-width: 520px;
          max-height: 85vh;
          overflow-y: auto;
          padding: 24px 26px 26px;
        }
        .stacks-modal.wide { max-width: 640px; }
        .stacks-modal-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
        }
        .stacks-modal-head h2 {
          font-family: 'Newsreader', serif;
          font-size: 20px;
          font-weight: 500;
          margin: 0;
        }
        .stacks-modal-sub {
          font-size: 13px;
          color: var(--text-muted);
          margin: -10px 0 16px;
          line-height: 1.55;
        }
        .stacks-field { margin-bottom: 14px; }
        .stacks-field label {
          display: block;
          font-size: 11px;
          font-weight: 600;
          color: var(--text-muted);
          margin-bottom: 5px;
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }
        .stacks-field input, .stacks-field select, .stacks-field textarea {
          width: 100%;
          background: var(--paper);
          border: 1px solid var(--border-strong);
          border-radius: 3px;
          padding: 8px 10px;
          font-size: 14px;
          font-family: 'Source Sans 3', sans-serif;
          color: var(--ink);
          outline: none;
        }
        .stacks-field input:focus, .stacks-field select:focus, .stacks-field textarea:focus {
          border-color: var(--accent);
        }
        .stacks-field textarea { resize: vertical; min-height: 60px; }
        .stacks-hint { font-size: 12px; color: var(--text-muted); margin: 5px 0 0; line-height: 1.45; }
        .stacks-citation-box {
          background: var(--bg-subtle);
          border: 1px solid var(--border);
          border-radius: 3px;
          padding: 10px 12px;
          font-size: 13px;
          line-height: 1.6;
          margin: 0;
        }
        .stacks-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .stacks-modal-actions {
          display: flex;
          justify-content: flex-end;
          gap: 8px;
          margin-top: 20px;
        }
        .stacks-btn-ghost {
          background: transparent;
          border: 1px solid var(--border-strong);
          color: var(--ink);
          border-radius: 3px;
          padding: 8px 16px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
        }
        .stacks-btn-ghost:hover { background: var(--bg-subtle); }
        .stacks-btn-ghost.danger {
          display: flex;
          align-items: center;
          gap: 6px;
          color: var(--danger);
          border-color: var(--danger);
        }
        .stacks-btn-ghost.danger:hover { background: #f5eeee; }
        .stacks-btn-primary {
          background: var(--accent);
          border: 1px solid var(--accent);
          color: var(--on-accent);
          border-radius: 3px;
          padding: 8px 16px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
        }
        .stacks-btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
        .stacks-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

        .stacks-confirm { text-align: center; }
        .stacks-confirm p { font-size: 14px; margin: 0 0 16px; color: var(--text-muted); }

        .stacks-toast {
          position: absolute;
          bottom: 16px;
          left: 50%;
          transform: translateX(-50%);
          background: var(--ink);
          color: var(--on-accent);
          font-size: 13px;
          font-weight: 500;
          padding: 8px 16px;
          border-radius: 3px;
          z-index: 60;
          max-width: 90%;
          text-align: center;
        }

        .stacks-bib-upload {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 10px;
        }
        .stacks-bib-upload label {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: var(--bg-subtle);
          border: 1px dashed var(--border-strong);
          border-radius: 3px;
          padding: 8px 12px;
          font-size: 13px;
          cursor: pointer;
        }
        .stacks-bib-preview-item {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          padding: 10px;
          border-radius: 3px;
          border: 1px solid var(--border);
          margin-bottom: 8px;
        }
        .stacks-bib-preview-item.duplicate { opacity: 0.55; }
        .stacks-bib-preview-item input[type="checkbox"] { margin-top: 3px; }
        .stacks-bib-preview-title { font-weight: 600; font-size: 13px; margin: 0 0 2px; }
        .stacks-bib-preview-meta { font-size: 12px; color: var(--text-muted); margin: 0; }
        .stacks-bib-dup-flag {
          font-size: 11px;
          color: var(--danger);
          display: inline-flex;
          align-items: center;
          gap: 4px;
          margin-top: 3px;
        }

        .stacks-saint-row {
          display: grid;
          grid-template-columns: 1fr 2fr auto;
          gap: 8px;
          align-items: start;
          margin-bottom: 8px;
        }
        .stacks-saint-row input { width: 100%; }

        @media (max-width: 640px) {
          .stacks-body { grid-template-columns: 1fr; }
          .stacks-sidebar {
            border-right: none;
            border-bottom: 1px solid var(--border);
            position: static;
            max-height: none;
            display: flex;
            flex-direction: column;
          }
          .stacks-main { padding: 18px 20px; }
          .stacks-row2 { grid-template-columns: 1fr; }
          .stacks-saint-row { grid-template-columns: 1fr; }
        }

        .stacks-lock-badge {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 11px;
          font-weight: 600;
          color: var(--text-muted);
          border: 1px solid var(--border-strong);
          border-radius: 3px;
          padding: 0 10px;
          height: 36px;
          white-space: nowrap;
        }
        .stacks-lock-badge.unlocked {
          color: var(--accent-dark);
          border-color: var(--accent);
          background: var(--accent-soft);
        }