*,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      :root {
        --bg: #ffffff;
        --c: #f8f9fa;
        --c2: #f0f2f5;
        --b: #e8eaed;
        --bh: #e2e5e9;
        --a: #0a0a0a;
        --a2: #1a1a2e;
        --ag: rgba(0, 0, 0, 0.02);
        --t: #1a1a2e;
        --t2: #4a4a68;
        --t3: #525252;
        --t4: #848a94;
        --g: #10b981;
        --gl: rgba(16, 185, 129, 0.08);
        --red: #ef4444;
        --success-bg: #065f46;
        --success-text: #065f46;
        --success-text-dark: #6ee7b7;
        --error-bg: #7f1d1d;
        --error-text: #7f1d1d;
        --error-text-dark: #fca5a5;
        --warning-text: #78350f;
        --warning-text-dark: #fbbf24;
        --color-surface-dark: #1a1a2e;
        --color-surface-dark-alt: #2a2a4e;
        --color-inverse: #ffffff;
        --color-error-surface: #fee2e2;
        --error-bg-light: rgba(239, 68, 68, 0.08);
        --error-border: rgba(239, 68, 68, 0.2);
        --warning-bg: rgba(245, 158, 11, 0.1);
        --success-bg-light: rgba(16, 185, 129, 0.2);
        --success-border: rgba(16, 185, 129, 0.2);
        --focus-ring: rgba(59, 130, 246, 0.1);
        --r: 12px;
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
        --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);

        /* ── Semantic aliases (rename-safe) ── */
        --text-primary: var(--t);
        --text-secondary: var(--t2);
        --text-muted: var(--t3);
        --text-tertiary: var(--t4);
        --border: var(--b);
        --border-hover: var(--bh);
        --surface-secondary: var(--c);
        --surface-tertiary: var(--c2);
        --text-on-accent: var(--a);
        --accent-secondary: var(--a2);
        --accent-ghost: var(--ag);
        --success: var(--g);
        --success-soft: var(--gl);
        --radius: var(--r);

        /* ── Spacing Scale (4px base) ── */
        --space-4: 4px;
        --space-8: 8px;
        --space-12: 12px;
        --space-16: 16px;
        --space-20: 20px;
        --space-24: 24px;
        --space-32: 32px;
        --space-40: 40px;
        --space-48: 48px;
        --space-64: 64px;
        --space-96: 96px;
        --space-128: 128px;
        --space-256: 256px;

        /* ── Text Scale (Tailwind-compatible) ── */
        --text-xs: 12px;
        --text-sm: 14px;
        --text-base: 16px;
        --text-lg: 18px;
        --text-xl: 20px;
        --text-2xl: 24px;
        --text-3xl: 30px;
        --text-4xl: 36px;
        --text-5xl: 48px;

        /* ── Status dot colors ── */
        --amber: #f59e0b;
        --blue: #3b82f6;
      }

      /* ── Lucide Icons ── */
      /* createIcons() replaces each <i data-lucide> with an <svg>, copying the
         attributes over, so these rules match the rendered SVG as well.
         Sizing in em keeps every icon locked to the size of its label. */
      [data-lucide] {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        vertical-align: -0.125em;
      }
      /* Solid counterpart of an outline icon (former ★ / ◆ / ❤ glyphs). */
      [data-lucide].ico-fill {
        fill: currentColor;
      }
      /* Icon + label pair on a shared optical baseline. */
      .ico-row {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      /* Status dots: filled and slightly reduced, so they read as dots, not rings. */
      [data-lucide="circle"].dot {
        width: 0.7em;
        height: 0.7em;
        fill: currentColor;
        stroke: none;
      }
      .dot-ok {
        color: var(--g);
      }
      .dot-warn {
        color: var(--amber);
      }
      .dot-err {
        color: var(--red);
      }
      .dot-info {
        color: var(--blue);
      }
      .dot-idle {
        color: var(--t4);
      }
      html {
        height: 100%;
      }
      body {
        font-family: var(--font-body);
        font-size: 15px;
        background: var(--bg);
        color: var(--t);
        line-height: 1.5;
        padding-top: 48px;
        margin: 0;
        height: 100vh;
        position: relative;
        overflow: auto;
        display: flex;
        flex-direction: column;
      }
      /* ── Top Header Bar ─────────────────────────── */
      .top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        background: var(--bg);
        border-bottom: 1px solid var(--b);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        z-index: 100;
      }
      .top-bar-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--t);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .top-bar-title svg {
        width: 20px;
        height: 20px;
        color: var(--a);
      }
      .top-bar-actions {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .top-bar-btn {
        background: none;
        border: 1px solid var(--b);
        border-radius: 6px;
        padding: 4px;
        cursor: pointer;
        color: var(--t3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
      }
      .top-bar-btn svg {
        width: 16px;
        height: 16px;
      }
      .top-bar-btn:hover {
        background: var(--c2);
        color: var(--t);
        border-color: var(--bh);
      }
      body.dark .top-bar {
        background: var(--c);
        border-bottom-color: var(--b);
      }
      body::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse at top, var(--ag), transparent 70%);
        pointer-events: none;
        z-index: -1;
      }
      h1 {
        font-size: 24px;
        margin-bottom: 4px;
        background: linear-gradient(135deg, var(--a2), var(--a));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        padding-top: 8px;
        margin-bottom: 0;
      }
      .hdr {
        color: var(--t3);
        font-size: 14px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--b);
        padding-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .card {
        background: var(--bg);
        border: 1px solid var(--b);
        border-radius: var(--r);
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: var(--shadow);
      }
      /* Flex-row card with left-aligned image — used by published, deleted, and rejected views */
      .card--event {
        display: flex;
        gap: 14px;
        align-items: flex-start;
      }
      .card--event .thumb {
        flex-shrink: 0;
        width: 120px;
        height: 90px;
        overflow: hidden;
        border-radius: 6px;
        cursor: pointer;
        background: var(--surface-secondary, #1a1a2e);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .card--event .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .card--event .content {
        flex: 1; min-width: 0;
      }
      /* P2-151: image left-aligned next to the content (was: after it). */
      .card--event .thumb--right {
        order: -1;
      }

      /* Mobile: stack image above content instead of side-by-side */
      @media (max-width: 600px) {
        .card--event {
          display: flex;
          flex-direction: column;
          gap: 10px;
          align-items: stretch;
        }
        .card--event .thumb {
          width: 100%;
          height: 140px;
          margin: 0;
        }
        .card--event .thumb--right {
          order: 0;
        }
        .card--event .content {
          flex: 1;
          min-width: 0;
        }
      }

      /* ── Merge modal ── */
      .merge-hint {
        font-size: 13px;
        color: var(--t2);
        line-height: 1.5;
        margin-bottom: 12px;
      }
      .merge-candidate {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--b);
        border-radius: 8px;
        margin-bottom: 8px;
        cursor: pointer;
      }
      .merge-candidate:hover {
        border-color: var(--bh);
      }
      .merge-candidate:has(input:checked) {
        border-color: var(--a);
        background: var(--c2);
      }
      .merge-candidate input {
        margin-top: 3px;
        accent-color: var(--a);
        flex-shrink: 0;
      }
      .merge-candidate-body {
        min-width: 0;
      }
      .merge-candidate-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--t);
        overflow-wrap: anywhere;
      }
      .merge-candidate-meta {
        font-size: 12px;
        color: var(--t3);
        margin-top: 2px;
        overflow-wrap: anywhere;
      }
      .merge-warning {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        font-size: 12px;
        color: var(--err);
        line-height: 1.5;
        margin-top: 12px;
      }
      .merge-warning svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        margin-top: 2px;
      }
      .card:hover {
        box-shadow: var(--shadow-lg);
        transition: box-shadow 0.2s ease;
      }
      .card h3 {
        font-size: 16px;
        margin-bottom: 4px;
        letter-spacing: -0.01em;
      }
      .card .meta {
        font-size: 12px;
        color: var(--t3);
        margin-bottom: 6px;
      }
      .card .desc {
        font-size: 13px;
        color: var(--t2);
        margin-bottom: 8px;
        line-height: 1.4;
        /* Long crawled descriptions arrive as one unbroken blob often enough
         * that without this they push the card wider than the viewport. */
        overflow-wrap: anywhere;
        white-space: pre-wrap;
      }
      /* Compact meta row shared by published / review / rejected / deleted. */
      .cmeta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        font-size: 11px;
        color: var(--t3);
        margin-bottom: 6px;
      }
      .cmeta-i {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
      }
      .cmeta-i svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        opacity: 0.7;
      }
      .actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .btn {
        padding: 8px 20px;
        border-radius: 8px;
        border: none;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .btn:hover {
        opacity: 0.85;
        transform: translateY(-1px);
      }
      .btn:active {
        transform: translateY(0);
      }
      .btn-app {
        background: var(--g);
        color: var(--bg);
      }
      .btn-rej {
        color: var(--red);
        background: transparent;
      }
      .btn-rej:hover {
        background: var(--red);
        color: var(--bg);
      }
      .btn-danger {
        color: var(--red);
        background: transparent;
      }
      .btn-danger:hover {
        background: var(--red);
        color: var(--bg);
      }
      .btn-sec {
        background: var(--bg);
        color: var(--t2);
        border: 1px solid var(--b);
      }
      .btn-sm {
        padding: 4px 12px;
        font-size: 11px;
      }
      .stats {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;
      }
      .stat {
        background: var(--bg);
        border: 1px solid var(--b);
        border-radius: 8px;
        padding: 12px 14px;
        text-align: center;
        flex: 1;
        box-shadow: var(--shadow-sm);
      }
      .stat .n {
        font-size: 24px;
        font-weight: 900;
        color: var(--a2);
      }
      .stat .l {
        font-size: 11px;
        color: var(--t4);
        text-transform: uppercase;
      }
      .empty {
        text-align: center;
        padding: 40px 16px;
        color: var(--t3);
      }
      .empty .ic {
        width: 24px;
        height: 24px;
        opacity: 0.1;
      }
      .err {
        color: var(--red);
        font-size: 13px;
        text-align: center;
        margin-bottom: 8px;
      }
      .sp {
        width: 20px;
        height: 20px;
        border: 2px solid var(--b);
        border-top-color: var(--a);
        border-radius: 50%;
        animation: s 0.7s linear infinite;
        margin: 16px auto;
      }
      @keyframes s {
        to {
          transform: rotate(360deg);
        }
      }
      .ft {
        color: var(--t4);
        font-size: 12px;
        text-align: center;
        margin-top: 24px;
      }
      kbd {
        display: inline-block;
        padding: 1px 5px;
        font-size: 11px;
        font-family: inherit;
        background: var(--c2);
        border: 1px solid var(--b);
        border-radius: 4px;
        color: var(--t2);
        line-height: 1.4;
      }

      /* ── Skeleton Loaders ───────────────────────── */
      @keyframes shimmer {
        0% {
          background-position: -200% 0;
        }
        100% {
          background-position: 200% 0;
        }
      }
      .skel-card {
        background: var(--c);
        border: 1px solid var(--b);
        border-radius: var(--r);
        padding: 16px;
        margin-bottom: 12px;
      }
      .skel-line {
        height: 14px;
        border-radius: 4px;
        background: linear-gradient(90deg, var(--c) 25%, var(--c2) 50%, var(--c) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s ease-in-out infinite;
        margin-bottom: 8px;
      }
      .skel-line.w60 {
        width: 60%;
      }
      .skel-line.w40 {
        width: 40%;
      }
      .skel-line.w80 {
        width: 80%;
      }
      .skel-line.h2 {
        height: 10px;
      }
      .skel-line.h3 {
        height: 16px;
      }
      .skel-btn {
        display: inline-block;
        width: 80px;
        height: 30px;
        border-radius: 6px;
        background: linear-gradient(90deg, var(--c) 25%, var(--c2) 50%, var(--c) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s ease-in-out infinite;
        margin-right: 6px;
      }

      /* ── Retry Button ───────────────────────────── */
      .retry-area {
        text-align: center;
        padding: 24px 16px;
      }
      .retry-area p {
        color: var(--t3);
        font-size: 13px;
        margin-bottom: 12px;
      }
      .retry-btn {
        display: inline-block;
        background: var(--bg);
        color: var(--t2);
        border: 1px solid var(--b);
        border-radius: 6px;
        padding: 6px 16px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .retry-btn:hover {
        background: var(--c2);
        border-color: var(--t4);
      }

      /* ── Toast ──────────────────────────────────── */
      .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 400px;
        width: 90%;
        pointer-events: none;
      }
      .toast {
        background: var(--a2);
        color: var(--bg);
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        box-shadow: var(--shadow-lg);
        pointer-events: auto;
        animation: toastIn 0.3s ease;
        max-width: 90%;
        text-align: center;
      }
      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes toastOut {
        from {
          opacity: 1;
          transform: translateY(0) translateX(0);
        }
        to {
          opacity: 0;
          transform: translateY(-10px) translateX(20px);
        }
      }
      .toast.success {
        background: var(--success-bg);
      }
      .toast.error {
        background: var(--error-bg);
      }

      /* ── Dark Mode ──────────────────────────────── */
      body.dark {
        --bg: #0a0a0a;
        --c: #111118;
        --c2: #1a1a2e;
        --b: #2a2a3e;
        --bh: #3a3a4e;
        --a: #f5f5f5;
        --a2: #e2e5e9;
        --t: #e2e5e9;
        --t2: #b0b0c0;
        --t3: #9ca3af;
        --t4: #666680;
        --gl: rgba(16, 185, 129, 0.15);
        --error-bg-light: rgba(239, 68, 68, 0.15);
        --warning-bg: rgba(245, 158, 11, 0.2);
      }
      body.dark .card,
      body.dark .stat {
        background: var(--c);
      }
      body.dark .btn-sec {
        background: var(--c2);
        color: var(--t);
      }
      body.dark .btn-rej {
        color: var(--error-text-dark);
        border-color: var(--error-text-dark);
      }
      body.dark .btn-rej:hover {
        background: var(--error-bg);
        color: var(--error-text-dark);
      }
      body.dark .btn-danger {
        color: var(--error-text-dark);
      }
      body.dark .btn-danger:hover {
        background: var(--error-bg);
        color: var(--error-text-dark);
      }

      /* ── Bulk Select ─────────────────────────────── */
      .bulk-select-bar {
        display: none;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: var(--c);
        border: 1px solid var(--b);
        border-radius: var(--r);
        margin-bottom: 12px;
        font-size: 13px;
        animation: slideDown 0.2s ease;
        transition: all 0.2s ease;
      }
      .bulk-select-bar.visible {
        display: flex;
      }
      /* Published list: the bar has to stay reachable while scrolling a long
       * list — merging means picking rows far apart. Docks flush under the
       * fixed .top-bar, which is 48px at every breakpoint (the 56px body
       * padding on mobile is spacing, not a taller bar), and below its
       * z-index 100. */
      #publishedEventListBulkBar {
        position: sticky;
        top: 48px;
        z-index: 20;
        /* Opaque: cards scroll underneath, and --c may carry alpha. */
        background: var(--bg);
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
      }
      .bulk-select-bar label {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        color: var(--t2);
      }
      .bulk-select-bar .count {
        font-weight: 600;
        color: var(--a);
      }
      .bulk-select-bar .btn {
        margin-left: auto;
      }
      .card-checkbox {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--a);
      }
      .card.has-checkbox {
        position: relative;
        padding-left: 40px;
      }
      .card-img-container {
        width: 100%;
        height: 180px;
        overflow: hidden;
        border-radius: 6px;
        margin-bottom: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-secondary, #1a1a2e);
      }
      .review-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s;
      }
      .review-img:hover {
        transform: scale(1.05);
      }
      .review-img-fallback {
        font-size: 48px;
        line-height: 1;
        user-select: none;
        opacity: 0.6;
      }
      #imagePreviewModal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      #imagePreviewModal.show {
        display: flex;
      }
      #imagePreviewModal img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      }
      body.dark .bulk-select-bar {
        background: var(--c2);
      }
      body.dark .card-checkbox {
        accent-color: var(--a);
      }
      body.dark .bulk-select-bar {
        background: var(--c2);
      }

      /* ── Improved Hover States ───────────────────── */
      .card {
        transition:
          box-shadow 0.2s ease,
          transform 0.15s ease,
          border-color 0.2s ease;
      }
      .card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-1px);
        border-color: var(--bh);
      }
      body.dark .modal-box {
        background: var(--c);
      }
      body.dark .modal-field input,
      body.dark .modal-field select {
        background: var(--c2);
        color: var(--t);
        border-color: var(--b);
      }
      body.dark kbd {
        background: var(--c);
        border-color: var(--bh);
        color: var(--t2);
      }
      body.dark .skel-line {
        background: linear-gradient(90deg, var(--c) 25%, var(--c2) 50%, var(--c) 75%);
        background-size: 200% 100%;
      }

      /* ── Dashboard Stats Cards ──────────────────── */
      .admin-section {
        display: none;
      }
      .dashboard-stats {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
      }
      .stat-card {
        background: var(--c2);
        border-radius: var(--r);
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .stat-card-icon {
        font-size: 28px;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg);
        border-radius: 10px;
      }
      .stat-card-value {
        font-size: 24px;
        font-weight: 700;
        color: var(--t);
      }
      .stat-card-label {
        font-size: 13px;
        color: var(--t3);
      }

      /* ── Dashboard Charts ───────────────────────── */
      .dashboard-charts {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 16px;
      }
      .chart-card {
        background: var(--c2);
        border-radius: var(--r);
        padding: 16px;
        min-height: 280px;
        display: flex;
        flex-direction: column;
      }
      .chart-card h3 {
        font-size: 14px;
        font-weight: 600;
        color: var(--t2);
        margin-bottom: 12px;
        flex-shrink: 0;
      }
      .chart-card canvas {
        height: 250px;
        max-height: 300px;
      }

      /* ── Source Health Table ────────────────────── */
      .source-health-table {
        max-height: 250px;
        overflow-y: auto;
      }
      .source-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--b);
        font-size: 13px;
      }
      .source-row:last-child {
        border-bottom: none;
      }
      .source-name {
        font-weight: 500;
      }
      .source-count {
        color: var(--t3);
      }
      .source-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
      }
      .source-badge.active {
        background: var(--gl);
        color: var(--g);
      }
      .source-badge.inactive {
        background: var(--color-error-surface);
        color: var(--red);
      }
      .source-badge.outage {
        background: var(--color-error-surface);
        color: var(--red);
        border: 1px solid var(--red);
      }

      /* ── Dark mode adjustments for Dashboard ────── */
      body.dark .stat-card {
        background: var(--color-surface-dark);
      }
      body.dark .stat-card-icon {
        background: var(--color-surface-dark-alt);
      }
      body.dark .chart-card {
        background: var(--color-surface-dark);
      }
      body.dark .source-row {
        border-bottom-color: var(--color-surface-dark-alt);
      }

      /* ── Admin Navigation ───────────────────────── */
      .admin-nav {
        display: flex;
        gap: 4px;
        margin-bottom: 16px;
        padding: 0;
        background: var(--c);
        border: none;
        border-bottom: 1px solid var(--b);
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 48px;
        align-items: stretch;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
      }

      .admin-nav-btn {
        padding: 10px 14px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--t2);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
      }
      .admin-nav-btn i,
      .admin-sub-nav-btn i {
        font-size: 16px;
        display: inline-block;
        line-height: 1;
      }
      .admin-nav-btn:hover {
        background: var(--c2);
        color: var(--t);
      }
      .admin-nav-btn.active {
        background: var(--bg);
        color: var(--a);
        box-shadow: var(--shadow-sm);
      }

      body.dark .admin-nav {
        background: var(--c);
      }
      body.dark .admin-nav-btn.active {
        background: var(--c2);
      }

      /* ── Events Sub-Navigation ──────────────────── */
      .admin-sub-nav {
        display: flex;
        gap: 4px;
        padding: 8px 12px;
        min-height: 48px;
        align-items: center;
        background: var(--c);
        border-radius: var(--r);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 16px;
        width: 100%;
      }
      .admin-sub-nav-btn {
        padding: 6px 12px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--t3);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .admin-sub-nav-btn:hover {
        background: var(--c2);
        color: var(--t2);
      }
      .admin-sub-nav-btn.active {
        background: var(--bg);
        color: var(--a);
        box-shadow: var(--shadow-sm);
      }

      body.dark .admin-sub-nav {
        background: var(--c);
      }
      body.dark .admin-sub-nav-btn.active {
        background: var(--c2);
      }

      /* ── Responsive tweaks ──────────────────────── */
      @media (max-width: 600px) {
        #darkModeBtn {
          display: none;
        }
        body {
          padding: 56px 12px 12px;
        }
        .stats {
          gap: 6px;
        }
        .stat {
          padding: 8px 6px;
        }
        .stat .n {
          font-size: 18px;
        }
        .actions {
          flex-direction: column;
        }
        .actions .btn {
          width: 100%;
        }
        .hdr {
          flex-direction: column;
          gap: 8px;
          align-items: flex-start;
        }
        .admin-nav {
          gap: 4px;
          padding: 0;
          margin-left: -12px;
          margin-right: -12px;
          padding-left: 12px;
          padding-right: 12px;
          margin-top: -8px;
        }
        .admin-nav-btn {
          padding: 10px 14px;
          font-size: 13px;
          min-height: 40px;
        }
      }

      /* ── User Management ──────────────────────── */
      .user-controls {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
        align-items: center;
      }
      .user-controls input[type="text"],
      .user-controls select {
        padding: 8px 12px;
        border: 1px solid var(--b);
        border-radius: 6px;
        font-size: 13px;
        background: var(--bg);
        color: var(--t);
      }
      .user-controls input[type="text"] {
        flex: 1;
        min-width: 200px;
      }
      .user-controls select {
        min-width: 100px;
      }
      .user-card {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 12px 16px;
      }
      .user-card.has-checkbox {
        position: relative;
        padding-left: 40px;
      }
      .user-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-inverse);
        flex-shrink: 0;
        text-transform: uppercase;
        overflow: hidden;
      }
      .user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }
      .user-info {
        flex: 1;
        min-width: 0;
      }
      .user-name {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 2px;
      }
      .user-detail {
        font-size: 12px;
        color: var(--t3);
        margin-bottom: 2px;
      }
      .badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
      }
      .badge-admin {
        background: var(--gl);
        color: var(--success-text);
      }
      .badge-user {
        background: var(--c2);
        color: var(--t3);
      }
      .badge-active {
        background: var(--gl);
        color: var(--success-text);
      }
      .badge-inactive {
        background: var(--error-bg-light);
        color: var(--error-text);
      }
      .user-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 8px;
      }
      body.dark .badge-admin {
        background: var(--success-bg-light);
        color: var(--success-text-dark);
      }
      body.dark .badge-inactive {
        background: var(--error-bg-light);
        color: var(--error-text-dark);
      }

      /* Focus styles for keyboard navigation */
      *:focus-visible {
        outline: 2px solid var(--a2, #1a1a2e);
        outline-offset: 2px;
        border-radius: 4px;
      }
      button:focus-visible,
      a:focus-visible,
      input:focus-visible,
      select:focus-visible {
        outline: 2px solid var(--a2, #1a1a2e);
        outline-offset: 2px;
      }

      /* ── LLM Settings Section ── */
      .settings-tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 16px;
        border-bottom: 2px solid var(--b);
        padding-bottom: 0;
      }
      .settings-tab {
        padding: 10px 18px;
        border: 1px solid var(--b);
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        background: var(--c);
        color: var(--t2);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
      }
      .settings-tab:hover {
        background: var(--c2);
        color: var(--t);
      }
      .settings-tab.active {
        background: var(--bg);
        color: var(--a);
        border-bottom: 2px solid var(--bg);
        margin-bottom: -2px;
      }
      body.dark .settings-tab.active {
        background: var(--c);
        border-bottom-color: var(--c);
        color: var(--a);
      }
      .settings-panel {
        display: none;
      }
      .settings-panel.active {
        display: block;
      }

      /* Health Status Bar */
      .llm-health-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: var(--r);
        margin-bottom: 16px;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.3s ease;
      }
      .llm-health-bar.healthy {
        background: var(--gl);
        color: var(--success-text);
        border: 1px solid var(--success-border);
      }
      .llm-health-bar.unhealthy {
        background: var(--error-bg-light);
        color: var(--error-text);
        border: 1px solid var(--error-border);
      }
      .llm-health-bar.checking {
        background: var(--c);
        color: var(--t2);
        border: 1px solid var(--b);
      }
      .llm-health-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .llm-health-bar.healthy .llm-health-dot {
        background: var(--success-text);
        box-shadow: 0 0 6px var(--success-text);
      }
      .llm-health-bar.unhealthy .llm-health-dot {
        background: var(--error-text);
      }
      .llm-health-bar.checking .llm-health-dot {
        background: var(--t3);
        animation: pulse 1.5s infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }

      /* Settings Field */
      .settings-field {
        margin-bottom: 16px;
      }
      .settings-field label {
        display: block;
        font-size: 12px;
        color: var(--t2);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
      }
      .settings-field input,
      .settings-field select,
      .settings-field textarea {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--b);
        border-radius: 8px;
        background: var(--bg);
        color: var(--t);
        font-size: 14px;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }
      .settings-field input:focus,
      .settings-field select:focus,
      .settings-field textarea:focus {
        outline: none;
        border-color: var(--a);
        box-shadow: 0 0 0 3px var(--focus-ring);
      }
      .settings-field .hint {
        font-size: 11px;
        color: var(--t4);
        margin-top: 4px;
        line-height: 1.4;
      }
      .settings-field .hint.key-stored {
        color: var(--success-text, #4caf50);
        font-weight: 500;
      }

      /* Phase-specific models section */
      .phase-models-section {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--b);
      }
      .phase-models-section h3 {
        font-size: 14px;
        margin: 0 0 6px;
        color: var(--t);
      }
      .phase-model-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 12px;
        margin-top: 12px;
      }
      .phase-model-card {
        background: var(--c);
        border: 1px solid var(--b);
        border-radius: var(--r);
        padding: 14px;
        transition: border-color 0.2s;
      }
      .phase-model-card:hover {
        border-color: var(--bh);
      }
      .phase-model-card label {
        font-size: 12px;
        color: var(--t2);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 6px;
        display: block;
      }
      .phase-model-card select {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--b);
        border-radius: 6px;
        background: var(--bg);
        color: var(--t);
        font-size: 13px;
      }
      .phase-model-card .hint {
        font-size: 11px;
        color: var(--t4);
        margin-top: 4px;
      }

      /* Settings Actions */
      .settings-actions {
        display: flex;
        gap: 8px;
        margin-top: 20px;
        flex-wrap: wrap;
      }

      /* Settings Status */
      .settings-status {
        margin-top: 12px;
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 13px;
        display: none;
        animation: slideDown 0.2s ease;
      }
      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-4px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .settings-status.success {
        display: block;
        background: var(--gl);
        color: var(--success-text);
        border: 1px solid var(--success-border);
      }
      .settings-status.error {
        display: block;
        background: var(--error-bg-light);
        color: var(--error-text);
        border: 1px solid var(--error-border);
      }
      .settings-status.info {
        display: block;
        background: var(--c);
        color: var(--t2);
        border: 1px solid var(--b);
      }

      /* Dark Mode Overrides */
      body.dark .settings-field input,
      body.dark .settings-field select,
      body.dark .settings-field textarea {
        background: var(--c2);
        color: var(--t);
        border-color: var(--b);
      }
      body.dark .phase-model-card {
        background: var(--c2);
      }
      body.dark .phase-model-card select {
        background: var(--bg);
      }

      /* ── Crawler Admin Sub-tabs ── */
      .crawler-tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--b);
        padding-bottom: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .crawler-tab {
        padding: 8px 14px;
        font-size: 13px;
        color: var(--t3);
        cursor: pointer;
        border: none;
        background: none;
        border-bottom: 2px solid transparent;
        transition: 0.15s;
        white-space: nowrap;
      }
      .crawler-tab:hover {
        color: var(--t);
      }
      .crawler-tab.active {
        color: var(--a2);
        border-bottom-color: var(--a);
      }
      .crawler-tab-content {
        display: none;
      }
      .crawler-tab-content.active {
        display: block;
      }

      /* ── Source Card (Enhanced) ── */
      .source-card {
        background: var(--c);
        border: 1px solid var(--b);
        border-radius: var(--r);
        padding: 14px 16px;
        margin-bottom: 8px;
        box-shadow: var(--shadow-sm);
        transition: border-color 0.2s;
      }
      .source-card:hover {
        border-color: var(--bh);
      }
      .source-card.has-checkbox {
        position: relative;
        padding-left: 40px;
      }
      .source-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
      }
      .source-name {
        font-size: 15px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .source-url {
        font-size: 12px;
        color: var(--t3);
        margin-bottom: 8px;
        word-break: break-all;
      }
      .source-meta {
        display: flex;
        gap: 16px;
        font-size: 12px;
        color: var(--t2);
        margin-bottom: 8px;
        flex-wrap: wrap;
      }
      .source-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .status-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .status-healthy {
        background: var(--gl);
        color: var(--success-text);
      }
      .status-degraded {
        background: var(--warning-bg);
        color: var(--warning-text);
      }
      .status-down {
        background: var(--error-bg-light);
        color: var(--error-text);
      }
      .status-unknown {
        background: var(--c2);
        color: var(--t3);
      }
      body.dark .status-healthy {
        background: var(--success-bg-light);
        color: var(--success-text-dark);
      }
      body.dark .status-degraded {
        background: var(--warning-bg);
        color: var(--warning-text-dark);
      }
      body.dark .status-down {
        background: var(--error-bg-light);
        color: var(--error-text-dark);
      }

      /* Running source highlight */
      .source-card.running {
        border-color: var(--red);
        box-shadow:
          0 0 0 1px var(--red),
          var(--shadow-sm);
      }
      .source-card.running .source-name::after {
        content: " \u25cf";
        color: var(--red);
        animation: pulse 1s ease-in-out infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }

      /* Live status feed */
      .status-feed {
        margin-bottom: 12px;
      }
      .status-feed-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--bg);
        border: 1px solid var(--b);
        border-radius: 6px;
        margin-bottom: 4px;
        font-size: 12px;
        animation: slideIn 0.3s ease;
      }
      .status-feed-item .feed-icon {
        font-size: 14px;
        flex-shrink: 0;
      }
      .status-feed-item .feed-text {
        flex: 1;
        color: var(--t2);
      }
      .status-feed-item .feed-time {
        color: var(--t4);
        font-size: 11px;
        flex-shrink: 0;
      }
      .feed-running {
        border-left: 3px solid var(--warning-text-dark);
      }
      .feed-completed {
        border-left: 3px solid var(--g);
      }
      .feed-failed {
        border-left: 3px solid var(--red);
      }
      @keyframes slideIn {
        from {
          transform: translateX(100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      /* Inline spinner for buttons */
      .spinner-sm {
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: s 0.5s linear infinite;
        margin-right: 4px;
        vertical-align: middle;
      }

      /* Session/Job Table */
      .session-table {
        width: 100%;
        font-size: 13px;
        border-collapse: collapse;
      }
      .session-table th {
        text-align: left;
        padding: 8px 12px;
        color: var(--t3);
        border-bottom: 1px solid var(--b);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .session-table td {
        padding: 8px 12px;
        border-bottom: 1px solid var(--c2);
      }
      .session-table tr:hover td {
        background: var(--c2);
      }

      /* Pagination */
      .pagination {
        transition: opacity 0.2s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding: 8px 0;
        flex-wrap: wrap;
        gap: 8px;
      }
      .pagination-info {
        font-size: 12px;
        color: var(--t3);
      }
      .pagination-buttons {
        display: flex;
        gap: 4px;
        align-items: center;
      }
      .pagination-buttons .btn[disabled] {
        opacity: 0.4;
        cursor: default;
      }

      /* Progress bar */
      .progress-bar {
        height: 4px;
        background: var(--b);
        border-radius: 2px;
        overflow: hidden;
        margin-top: 6px;
      }
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--a), var(--g));
        border-radius: 2px;
        transition: width 0.3s;
      }

      /* Filter select */
      .filter-select {
        padding: 4px 8px;
        border-radius: 4px;
        background: var(--bg);
        color: var(--t);
        border: 1px solid var(--b);
        font-size: 12px;
      }

      /* P1-145: unified event filter bar — all four events views render
         their controls from this one template (buildEventFilterBar). */
      .efb {
        display: flex;
        margin-bottom: 12px;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
      }
      .efb-search {
        flex: 1;
        min-width: 200px;
        padding: 8px 12px;
        border: 1px solid var(--b);
        border-radius: 6px;
        font-size: 13px;
        background: var(--bg);
        color: var(--t);
      }
      .efb-select {
        padding: 8px 12px;
        border: 1px solid var(--b);
        border-radius: 6px;
        font-size: 13px;
        background: var(--bg);
        color: var(--t);
      }
      .efb-check {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        color: var(--t2);
        font-size: 13px;
        white-space: nowrap;
      }
      .efb-right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      /* P1-152: duplicate badge — explicit row, own color, own icon */
      .dup-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        padding: 4px 10px;
        border: 1px solid var(--orange, #d97706);
        background: color-mix(in srgb, var(--orange, #d97706) 10%, transparent);
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        color: var(--orange, #d97706);
      }

      /* Icon-Select — a native <select> can't render a lucide icon inside an
         <option>, so we hide it and drive a .idd widget from it (.idd styles
         live in modals.css). The filter skin keeps the compact filter look. */
      .idd-native {
        display: none;
      }
      .idd--filter {
        display: inline-block;
        vertical-align: middle;
        width: auto;
      }
      .idd--filter .idd-btn {
        width: auto;
        gap: 6px;
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 4px;
      }
      .idd--filter .idd-list {
        min-width: 100%;
        width: max-content;
        max-width: 260px;
      }
      .idd--filter .idd-opt {
        gap: 6px;
        padding: 6px 8px;
        font-size: 12px;
      }

      /* Responsive crawler */
      @media (max-width: 600px) {
        .source-meta {
          gap: 8px;
        }
        .source-actions {
          flex-direction: column;
        }
        .source-actions .btn {
          width: 100%;
          justify-content: center;
        }
        .session-table {
          font-size: 12px;
        }
        .session-table th,
        .session-table td {
          padding: 4px 6px;
        }
      }

      body.dark .source-card {
        background: var(--c);
      }
      body.dark .source-card.running {
        box-shadow:
          0 0 0 1px var(--red),
          var(--shadow-sm);
      }

      /* ── Image Copyright Badge ───────────────────── */
      .image-copyright {
        position: absolute;
        bottom: 4px;
        right: 8px;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        pointer-events: none;
        z-index: 1;
      }

      /* ── Utility classes (P2-39 inline CSS cleanup) ── */

      /* Text alignment */
      .ta-center { text-align: center; }
      .ta-left { text-align: left; }

      /* Margins */
      .mt-2 { margin-top: 2px; }
      .mt-4 { margin-top: 4px; }
      .mt-8 { margin-top: 8px; }
      .mt-16 { margin-top: 16px; }
      .mt-24 { margin-top: 24px; }
      .mb-6 { margin-bottom: 6px; }
      .mb-8 { margin-bottom: 8px; }
      .mb-12 { margin-bottom: 12px; }
      .m0 { margin: 0; }

      /* Flex utilities */
      .flex-1 { flex: 1; }
      .flex-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
      .flex-start-gap { display: flex; align-items: flex-start; gap: 12px; }
      .flex-col { display: flex; flex-direction: column; }

      /* Font sizes */
      .fs-10 { font-size: 10px; }
      .fs-11 { font-size: 11px; }
      .fs-12 { font-size: 12px; }
      .fs-13 { font-size: 13px; }
      .fs-14 { font-size: 14px; }
      .fs-16 { font-size: 16px; }
      .fs-18 { font-size: 18px; }
      .fs-20 { font-size: 20px; }

      /* Text colors */
      .tc-t3 { color: var(--t3); }
      .tc-t4 { color: var(--t4); }
      .tc-t2 { color: var(--t2); }
      .tc-red { color: var(--red); }
      .tc-text { color: var(--t); }

      /* Font weight */
      .fw-600 { font-weight: 600; }
      .fw-bold { font-weight: bold; }

      /* Badges / small labels */
      .badge-sm { padding: 4px 8px; color: var(--t3); font-size: 11px; border-bottom: 1px solid var(--b); }
      .badge-sm-alt { padding: 4px 8px; border-bottom: 1px solid var(--c2); }
      .badge-sm-muted { padding: 4px 8px; color: var(--t3); border-bottom: 1px solid var(--b); }
      .badge-label { padding: 6px 8px; color: var(--t3); font-size: 11px; border-bottom: 1px solid var(--b); }
      .badge-label-alt { padding: 4px 8px; border-bottom: 1px solid var(--c2); color: var(--t3); font-size: 11px; }

      /* Section headers */
      .section-header { font-weight: 600; font-size: 13px; color: var(--t); margin-bottom: 6px; }
      .section-title { font-size: 20px; font-weight: bold; color: var(--t); }
      .section-subtitle { font-size: 14px; color: var(--t4); margin-bottom: 8px; }
      .section-desc { font-size: 12px; color: var(--t3); margin: 10px 0 6px; }
      .section-meta { font-size: 12px; color: var(--t3); margin: 4px 0 0; }

      /* Input boxes */
      .input-box { flex: 1; min-width: 100px; padding: 10px; border: 1px solid var(--b); border-radius: var(--r); background: var(--bg); text-align: center; }
      .input-box-lg { flex: 1; min-width: 100px; padding: 12px; border: 1px solid var(--b); border-radius: var(--r); background: var(--bg); text-align: center; }

      /* Empty state */
      .empty-state { color: var(--t3); font-size: 13px; padding: 20px 0; text-align: center; }

      /* Tables */
      .table-full { width: 100%; font-size: 12px; border-collapse: collapse; }
      .overflow-x { overflow-x: auto; }

      /* Padding */
      .p-section { padding: 10px 12px; border-bottom: 1px solid var(--b); }

      /* Additional utilities */
      .mb-2 { margin-bottom: 2px; }
      .mb-4 { margin-bottom: 4px; }
      .mb-14 { margin-bottom: 14px; }
      .mb-16 { margin-bottom: 16px; }
      .ml-8 { margin-left: 8px; }
      .mt-2 { margin-top: 2px; }

      .p-6-12 { padding: 6px 12px; }
      .p-10-12 { padding: 10px 12px; }

      .w-auto { width: auto; }
      .mw-480 { max-width: 480px; }

      .tc-green { color: var(--g); }
      .tc-accent { color: var(--a); }

      /* Flex utilities */
      .flex { display: flex; }
      .flex-gap-wrap { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
      .flex-ai-center { display: flex; align-items: center; }
      .flex-je { display: flex; justify-content: flex-end; }
      .gap-6 { gap: 6px; }
      .gap-8 { gap: 8px; }
      .gap-12 { gap: 12px; }

      /* More utilities */
      .fs-24 { font-size: 24px; }
      .d-block { display: block; }
      .min-w-20 { min-width: 20px; }
      .mw-400 { max-width: 400px; }
      .text-ellipsis { overflow: hidden; text-overflow: ellipsis; }
      .cursor-pointer { cursor: pointer; }
      .no-underline { text-decoration: none; }
      .ws-pre-wrap { white-space: pre-wrap; }
      .lh-1-6 { line-height: 1.6; }
      .flex-wrap { flex-wrap: wrap; }
      .tc-error { color: var(--err); }
      .ai-center { align-items: center; }

      /* More utilities */
      .mt-4 { margin-top: 4px; }
      .opacity-50 { opacity: 0.5; }
      .h-auto { height: auto; }
      .w-100 { width: 100%; }
      .w-0 { width: 0%; }
      .py-4 { padding-top: 4px; padding-bottom: 4px; }
      .pt-12 { padding-top: 12px; }
      .border-top { border-top: 1px solid var(--b); }
      .error-alert { padding: 8px 12px; background: var(--err-bg); border: 1px solid var(--err); border-radius: var(--r); margin-bottom: 14px; font-size: 12px; color: var(--err); }

      /* More utilities */
      .p-24 { padding: 24px; }
      .p-12 { padding: 12px; }
      .px-8 { padding-left: 8px; padding-right: 8px; }
      .py-0 { padding-top: 0; padding-bottom: 0; }
      .fw-500 { font-weight: 500; }
      .ta-right { text-align: right; }
      .border-bottom { border-bottom: 1px solid var(--b); }
      .border-1 { border: 1px solid var(--b); }
      .br-r { border-radius: var(--r); }
      .bg-var { background: var(--bg); }
      .border-collapse-collapse { border-collapse: collapse; }
      .font-mono { font-family: monospace; }
      .resize-vertical { resize: vertical; }

      /* More utilities */
      .p-12-32 { padding: 12px 32px; }
      .fs-15 { font-size: 15px; }
      .italic { font-style: italic; }
      .opacity-60 { opacity: 0.6; }
      .opacity-70 { opacity: 0.7; }
      .ws-nowrap { white-space: nowrap; }
      .mw-600 { max-width: 600px; }
      .mw-500 { max-width: 500px; }
      .mw-300 { max-width: 300px; }
      .mw-250 { max-width: 250px; }
      .mw-200 { max-width: 200px; }
      .mb-20 { margin-bottom: 20px; }

      /* More utilities */
      .mt-10 { margin-top: 10px; }
      .mt-12 { margin-top: 12px; }
      .mr-4 { margin-right: 4px; }
      .mr-8 { margin-right: 8px; }
      .ml-auto { margin-left: auto; }
      .p-4-10 { padding: 4px 10px; }

      /* More utilities */
      .mb-10 { margin-bottom: 10px; }
      .m-16-0-8 { margin: 16px 0 8px; }
      .m-12-0 { margin: 12px 0; }
      .m-0-0-8 { margin: 0 0 8px; }
      .m-0 { margin: 0; }
      .tt-upper { text-transform: uppercase; }
      .fs-48 { font-size: 48px; }
      .tc-amber { color: var(--amber); }
      /* Badge extras */
      .badge-xs { font-size: 9px; padding: 1px 5px; border-radius: 3px; margin-left: 4px; }
      .badge-xs-muted { background: var(--b); color: var(--t3); }
      .badge-xs-dark { background: var(--a); color: var(--bg); }

      /* More utilities */
      .m-0-0-20 { margin: 0 0 20px; }
      .m-0-0-12 { margin: 0 0 12px; }
      .m-12-0-8 { margin: 12px 0 8px; }
      .ml-20 { margin-left: 20px; }
      .mh-150 { max-height: 150px; }
      .overflow-y-auto { overflow-y: auto; }
      .fw-700 { font-weight: 700; }

      /* P1-155: price list editor (admin event modal) */
      .price-list-editor { display: flex; flex-direction: column; gap: 8px; }
      .price-row { display: flex; gap: 8px; align-items: center; }
      .price-row .price-label { flex: 2; min-width: 0; }
      .price-row .price-amount { flex: 1; min-width: 80px; }
      .price-row .price-del { flex: 0 0 auto; padding: 4px 8px; }

      /* P1-154: organizer autosuggest (admin event modal) */
      .org-suggest-wrap { position: relative; }
      .org-suggest {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 50;
        max-height: 240px;
        overflow-y: auto;
        background: var(--bg);
        border: 1px solid var(--b);
        border-radius: var(--r);
        box-shadow: 0 8px 24px rgba(10, 10, 10, 0.12);
      }
      .org-suggest-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--b); }
      .org-suggest-item:last-child { border-bottom: none; }
      .org-suggest-item:hover { background: var(--c); }
      .org-suggest-meta { display: block; font-size: 11px; color: var(--t4); margin-top: 2px; }