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

    :root {
      --bg: #1a1a1e;
      --bg-dark: #111114;
      --bg-card: #242429;
      --bg-elevated: #2a2a30;
      /* --bg-light was referenced (selects/inputs) but never defined, so those
         controls fell back to the browser default white → unreadable on the
         dark admin. Define it as an elevated dark surface. */
      --bg-light: #2f2f37;
      --sidebar: #111114;
      --card: #242429;
      --text: #e8e8ec;
      --text-light: #f0f0f4;
      --text-muted: #8a8a94;
      --accent: #00A9F2;
      --accent-hover: #0094d4;
      --accent-gradient: linear-gradient(135deg, #00A9F2, #00FF80);
      --primary-deep: #023A52;
      --border: #333338;
      --grey: #6a6a74;
      --danger: #ef4444;
      --success: #22c55e;
      --radius: 12px;
    }

    body {
      font-family: -apple-system, 'Segoe UI', 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    /* ── LOGIN ── */
    #login-screen {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background: var(--bg-dark);
      background-image: radial-gradient(ellipse at 20% 50%, rgba(0,169,242,0.06) 0%, transparent 60%),
                        radial-gradient(ellipse at 80% 80%, rgba(0,255,128,0.04) 0%, transparent 50%);
    }

    .login-box {
      background: var(--card);
      padding: 48px 40px;
      border-radius: var(--radius);
      width: 100%;
      max-width: 400px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      border: 1px solid var(--border);
    }

    .login-box h1 { font-size: 20px; margin-bottom: 8px; color: var(--text-light); }
    .login-box p { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }

    .form-group { margin-bottom: 20px; }
    .form-group label {
      display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px;
      color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
    }
    .form-group input, .form-group textarea, .form-group select {
      width: 100%; padding: 12px 14px; border: 1px solid var(--border);
      border-radius: var(--radius); font-size: 15px; font-family: inherit;
      transition: border-color 0.2s, box-shadow 0.2s;
      background: var(--bg-elevated); color: var(--text);
    }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
      outline: none; border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(0,169,242,0.15);
    }
    .form-group select option {
      background: var(--bg-elevated); color: var(--text);
    }
    .form-group.hp { position: absolute; left: -9999px; }

    .btn {
      display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
      border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600;
      cursor: pointer; transition: all 0.2s; font-family: inherit;
    }
    .btn-primary { background: var(--accent-gradient); color: #fff; border: none; }
    .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
    .btn-primary.full { width: 100%; justify-content: center; }
    .btn-secondary { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); }
    .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
    .btn-danger { background: var(--danger); color: #fff; }
    .btn-danger:hover { opacity: 0.9; }
    .btn-small { padding: 8px 16px; font-size: 13px; }

    /* AGB WYSIWYG toolbar */
    .agb-tb-btn {
      display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
      border:1px solid var(--border);border-radius:6px;background:var(--bg-elevated);color:var(--text);
      cursor:pointer;font-size:14px;transition:all 0.15s;user-select:none;
    }
    .agb-tb-btn:hover { border-color:var(--accent);color:var(--accent); }
    .agb-tb-btn.active { background:var(--accent);color:#fff;border-color:var(--accent); }
    #agb-editor table { border-collapse:collapse;width:100%;margin:12px 0; }
    #agb-editor td, #agb-editor th { border:1px solid var(--border);padding:8px 12px;min-width:60px; }
    #agb-editor blockquote { border-left:3px solid var(--accent);padding-left:16px;margin:12px 0;color:var(--text-muted); }
    #agb-editor a { color:var(--accent);text-decoration:underline; }
    #agb-editor pre { background:var(--bg-dark);padding:12px;border-radius:8px;font-family:monospace;overflow-x:auto; }
    #agb-editor hr { border:none;border-top:1px solid var(--border);margin:16px 0; }
    #agb-editor ul, #agb-editor ol { padding-left:24px;margin:8px 0; }
    #agb-editor h1,#agb-editor h2,#agb-editor h3,#agb-editor h4,#agb-editor h5,#agb-editor h6 { margin:16px 0 8px; }

    .error-msg {
      background: rgba(239,68,68,0.12); color: var(--danger); padding: 12px;
      border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; display: none;
      border: 1px solid rgba(239,68,68,0.25);
    }
    .success-msg {
      background: rgba(34,197,94,0.12); color: var(--success); padding: 12px;
      border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; display: none;
      border: 1px solid rgba(34,197,94,0.25);
    }

    /* ── LAYOUT ── */
    #app { display: none; min-height: 100vh; }

    .sidebar {
      position: fixed; left: 0; top: 0; bottom: 0; width: 250px;
      background: var(--sidebar); color: var(--text-light); padding: 0;
      overflow: hidden; z-index: 100;
      border-right: 1px solid var(--border);
      display: flex; flex-direction: column;
    }
    /* Logo + header stay fixed at the top, nav scrolls, footer fixed at bottom */
    .sidebar-logo, .sidebar-header { flex-shrink: 0; }
    .sidebar-scroll {
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
      /* Thin, dark, subtle scrollbar to match the dark sidebar */
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.16) transparent;
    }
    .sidebar-scroll::-webkit-scrollbar { width: 6px; }
    .sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
    .sidebar-scroll::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.14); border-radius: 3px;
    }
    .sidebar-scroll:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.24); }
    .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.34); }
    .sidebar-footer {
      flex-shrink: 0; padding: 12px 20px; border-top: 1px solid var(--border);
      text-align: center; background: var(--sidebar);
    }
    .sidebar-logo {
      display: block; padding: 20px 20px 0; margin-bottom: 4px;
    }
    .sidebar-logo img { height: 32px; width: auto; }
    .sidebar-header { padding: 10px 20px 20px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
    .sidebar-header h2 { font-size: 14px; font-weight: 600; color: var(--text-muted); }
    .sidebar-header span { font-size: 12px; color: var(--grey); }

    .nav-item {
      display: flex; align-items: center; gap: 12px; padding: 11px 20px;
      color: var(--text-muted); text-decoration: none; font-size: 14px;
      cursor: pointer; transition: all 0.2s; border: none; background: none;
      width: 100%; text-align: left; font-family: inherit;
      border-left: 3px solid transparent; margin: 1px 0;
    }
    .nav-item:hover { color: var(--text-light); background: rgba(255,255,255,0.04); }
    .nav-item.active { color: var(--text-light); background: rgba(0,169,242,0.08); border-left-color: var(--accent); }
    .nav-divider { height: 1px; background: var(--border); margin: 8px 20px; }

    .main-content { margin-left: 250px; padding: 32px; min-height: 100vh; }

    .page-header {
      display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px;
    }
    .page-header h1 { font-size: 24px; color: var(--text-light); }

    .card {
      background: var(--card); border-radius: var(--radius); padding: 24px;
      margin-bottom: 24px; border: 1px solid var(--border);
    }
    .card h3 {
      font-size: 16px; margin-bottom: 16px; padding-bottom: 12px;
      border-bottom: 1px solid var(--border); color: var(--text-light);
    }

    /* ── TABLE ── */
    table { width: 100%; border-collapse: collapse; }
    th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); }
    th { font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }

    /* ── PAGE TABS ── */
    .page-tabs {
      display: flex; align-items: center; gap: 10px; margin-bottom: 24px;
      border-bottom: 2px solid var(--border); padding-bottom: 0;
      position: relative;
    }
    .page-tabs__search {
      flex: 0 0 auto; width: 170px; padding: 7px 10px; font-size: 13px;
      border: 1px solid var(--border); border-radius: 8px;
      background: var(--bg-elevated); color: inherit; font-family: inherit;
    }
    .page-tabs__search:focus { outline: none; border-color: var(--accent); }
    .page-tabs__scroll {
      flex: 1 1 auto; min-width: 0;
      display: flex; align-items: center; gap: 2px;
      overflow-x: auto; overflow-y: hidden;
      scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent;
    }
    .page-tabs__scroll::-webkit-scrollbar { height: 6px; }
    .page-tabs__scroll::-webkit-scrollbar-track { background: transparent; }
    .page-tabs__scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
    .page-tabs__scroll:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.26); }
    .page-tab {
      padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
      background: none; border: none; color: var(--text-muted);
      border-bottom: 2px solid transparent; margin-bottom: -2px;
      transition: color 0.2s; font-family: inherit; flex: 0 0 auto;
      display: inline-flex; align-items: center; gap: 6px;
      white-space: nowrap;
    }
    .page-tab:hover { color: var(--text-light); }
    .page-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    .page-tab--disabled .page-tab__label { opacity: 0.45; text-decoration: line-through; }
    .page-tab .section-delete-btn, .page-tab__edit {
      font-size: 13px; color: var(--text-muted); cursor: pointer;
      opacity: 0; transition: opacity 0.2s, color 0.2s;
      line-height: 1; padding: 0 1px;
    }
    .page-tab:hover .section-delete-btn, .page-tab:hover .page-tab__edit,
    .page-tab.active .page-tab__edit { opacity: 0.7; }
    .page-tab .section-delete-btn:hover { color: var(--danger); opacity: 1; }
    .page-tab__edit:hover { color: var(--accent); opacity: 1; }
    .page-tab-spacer { flex: 1; }
    .page-tab-add {
      padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
      background: var(--bg-elevated); border: 1px dashed var(--border);
      border-radius: 8px 8px 0 0; color: var(--accent);
      margin-bottom: -2px; flex: 0 0 auto;
      transition: all 0.2s; font-family: inherit;
      display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    }
    .page-tab-add:hover {
      background: var(--accent); color: #fff; border-color: var(--accent);
      border-style: solid;
    }

    .page-tab[draggable="true"] { cursor: grab; }
    .page-tab[draggable="true"]:active { cursor: grabbing; }
    .page-tab.drag-over-tab { border-bottom-color: var(--accent) !important; box-shadow: 0 2px 0 var(--accent); }

    /* ── STATS-COUNTER ITEMS ── */
    .stat-edit-item {
      display: flex; align-items: center; gap: 16px;
      padding: 14px 18px; border: 1px solid var(--border); border-radius: 10px;
      margin-bottom: 10px; background: var(--bg-elevated);
      transition: opacity 0.25s, box-shadow 0.2s;
    }
    .stat-edit-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
    .stat-edit-item.stat-disabled { opacity: 0.4; }
    .stat-edit-fields {
      flex: 1; display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center;
    }
    .stat-edit-fields .stat-field-group { display: flex; flex-direction: column; gap: 4px; }
    .stat-edit-fields .stat-field-label {
      font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--text-muted); font-weight: 600;
    }
    .stat-edit-fields input {
      padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
      font-size: 14px; font-family: inherit;
      background: var(--bg-secondary); color: var(--text);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .stat-edit-fields input:focus {
      outline: none; border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(0,169,242,0.15);
    }
    .stat-edit-fields input.stat-number-input {
      font-size: 18px; font-weight: 700; text-align: center;
    }

    /* ── SECTION CARDS (Seiten page) ── */
    .section-card {
      margin-bottom: 12px; transition: opacity 0.3s, transform 0.3s;
      border-radius: var(--radius); overflow: hidden;
    }
    .section-card.disabled { opacity: 0.45; }
    .section-card.dragging {
      opacity: 0.9; transform: scale(1.01);
      box-shadow: 0 12px 40px rgba(0,0,0,0.4); z-index: 1000;
    }
    .section-card.drag-over-above {
      box-shadow: 0 -3px 0 0 var(--accent);
    }
    .section-card.drag-over-below {
      box-shadow: 0 3px 0 0 var(--accent);
    }
    .section-card.pp-card--cms .section-card-header {
      border-left: 3px solid var(--accent, #6c5ce7);
    }
    .section-card.pp-card--theme .section-card-header {
      border-left: 3px solid #00b894;
    }
    .pp-source-badge {
      display: inline-block; font-size: 9px; font-weight: 700;
      padding: 1px 5px; border-radius: 3px; margin-left: 6px;
      letter-spacing: 0.5px; vertical-align: middle;
      text-transform: uppercase; font-family: monospace;
    }
    .pp-source-badge--cms {
      background: var(--accent, #6c5ce7); color: #fff;
    }
    .pp-source-badge--theme {
      background: #00b894; color: #fff;
    }
    .pp-picker-badge {
      display: inline-block; font-size: 10px; padding: 2px 8px;
      border-radius: 4px; background: var(--accent, #6c5ce7); color: #fff;
      font-weight: 500; margin-left: 6px; vertical-align: middle;
    }
    .pp-version-bar {
      padding: 12px 16px; border-bottom: 1px solid var(--border);
      background: var(--bg-elevated); display: flex; align-items: center; gap: 10px;
    }
    .pp-version-bar label {
      font-size: 12px; color: var(--text-muted); white-space: nowrap; font-weight: 500; margin: 0;
    }
    .pp-version-bar select {
      flex: 1; padding: 5px 10px; border: 1px solid var(--border);
      border-radius: 4px; background: var(--bg-light); color: var(--text); font-size: 13px;
    }
    .section-card-header {
      display: flex; align-items: center; gap: 10px;
      padding: 0; background: var(--bg-elevated); color: var(--text-light);
      border: 1px solid var(--border); border-bottom: none;
      border-radius: var(--radius) var(--radius) 0 0;
      min-height: 52px;
    }
    .section-card-header h3 {
      margin: 0; padding: 0; border: none; font-size: 13px;
      font-weight: 600; letter-spacing: 0.5px; flex: 1; cursor: pointer;
      text-transform: uppercase;
    }
    .section-card-header.collapsed {
      border-radius: var(--radius);
      border-bottom: 1px solid var(--border);
    }
    .section-card-header.collapsed + .section-card-body { display: none; }
    .section-card-header .toggle-icon {
      font-size: 14px; transition: transform 0.3s; cursor: pointer;
      padding: 8px 14px 8px 8px; color: var(--text-muted);
      display: flex; align-items: center;
    }
    .section-card-header .toggle-icon:hover { color: var(--text-light); }
    .section-card-header.collapsed .toggle-icon { transform: rotate(-90deg); }
    .section-card-body {
      background: var(--card); border: 1px solid var(--border);
      border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: 20px;
    }
    .section-card-body.hidden { display: none; }

    /* Panel save button (bottom of panel) */
    .panel-save-bar,
    .pp-save-bar {
      display: flex; justify-content: flex-end; padding-top: 16px;
      margin-top: 8px; border-top: 1px solid var(--border);
    }

    /* Unified renderer classes (used by both Seiten tab + crew-detail) */
    .pp-fields-body { padding: 12px 16px; }
    .pp-empty {
      color: var(--grey); font-size: 12px;
      padding: 12px 16px; margin: 0;
    }
    .pp-field-row { margin-bottom: 14px; }
    .pp-field-row--pair {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
    }
    .pp-field-label {
      display: block; font-size: 12px; color: var(--grey);
      margin-bottom: 4px; font-weight: 500;
    }
    .pp-field-label small {
      color: var(--grey); font-weight: 400; font-family: monospace;
    }
    .pp-field-select {
      width: 100%; padding: 8px 10px; border: 1px solid var(--border);
      border-radius: 4px; background: var(--bg-light); color: var(--text); font-size: 13px;
    }
    .pp-field-toggle {
      display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
      font-size: 13px; color: var(--text);
    }
    .pp-field-toggle input[type="checkbox"] { width: 18px; height: 18px; }
    .pp-id-badge {
      font-size: 10px; padding: 1px 6px; border-radius: 4px;
      margin-left: 8px; font-weight: 500; font-family: monospace;
      background: var(--bg-elevated); color: var(--grey);
      border: 1px solid var(--border);
    }

    /* Drag handle */
    .drag-handle {
      display: flex; flex-direction: column; gap: 3px; cursor: grab;
      padding: 14px 8px 14px 14px; border-radius: 0; transition: background 0.2s;
      flex-shrink: 0; align-self: stretch;
      align-items: center; justify-content: center;
    }
    .drag-handle:hover { background: rgba(255,255,255,0.06); }
    .drag-handle:active { cursor: grabbing; }
    .drag-handle-dot {
      display: flex; gap: 3px;
    }
    .drag-handle-dot span {
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--text-muted); transition: background 0.2s;
    }
    .drag-handle:hover .drag-handle-dot span { background: var(--text-light); }

    /* Section toggle switch */
    .section-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
    .section-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
    .section-toggle-slider {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: var(--border); border-radius: 10px; cursor: pointer;
      transition: background 0.3s;
    }
    .section-toggle-slider::before {
      content: ''; position: absolute; width: 14px; height: 14px;
      left: 3px; bottom: 3px; background: var(--text-muted);
      border-radius: 50%; transition: transform 0.3s, background 0.3s;
    }
    .section-toggle input:checked + .section-toggle-slider { background: var(--accent); }
    .section-toggle input:checked + .section-toggle-slider::before {
      transform: translateX(16px); background: #fff;
    }

    /* Header controls area */
    .section-header-controls {
      display: flex; align-items: center; gap: 8px; padding-right: 4px;
    }
    .section-header-controls .badge-shared {
      font-size: 10px; background: rgba(0,169,242,0.15); color: var(--accent);
      padding: 3px 8px; border-radius: 4px; font-weight: 600;
      white-space: nowrap;
    }
    .section-header-controls .badge-fixed {
      font-size: 12px; color: var(--text-muted); padding: 0 4px;
    }
    .section-delete-btn {
      background: none; border: none; cursor: pointer; color: var(--text-muted);
      font-size: 16px; padding: 4px; line-height: 1; transition: color 0.2s;
      display: flex; align-items: center;
    }
    .section-delete-btn:hover { color: var(--danger); }

    .field-row {
      display: flex; align-items: flex-start; gap: 16px; padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .field-row:last-child { border-bottom: none; }
    .field-label { min-width: 160px; font-weight: 600; font-size: 13px; padding-top: 10px; color: var(--text-light); }
    .field-label small { display: block; color: var(--text-muted); font-weight: 400; font-size: 11px; margin-top: 2px; }
    .field-input { flex: 1; }
    .field-input input, .field-input textarea, .field-input select {
      width: 100%; padding: 10px 12px; border: 1px solid var(--border);
      border-radius: 8px; font-size: 14px; font-family: inherit;
      background: var(--bg-elevated); color: var(--text);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .field-input textarea { min-height: 100px; resize: vertical; }
    .field-input input:focus, .field-input textarea:focus, .field-input select:focus {
      outline: none; border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(0,169,242,0.15);
    }
    .field-input select option {
      background: var(--bg-elevated); color: var(--text);
    }
    .field-input input::placeholder, .field-input textarea::placeholder {
      color: var(--text-muted); opacity: 0.6; font-style: italic;
    }
    .field-actions { padding-top: 8px; }
    .field-actions .btn { padding: 8px 14px; font-size: 12px; }

    /* Image field */
    .image-field { display: flex; align-items: center; gap: 16px; }
    .image-preview {
      position: relative;
      width: 120px; height: 80px; border-radius: var(--radius); overflow: hidden;
      background: var(--bg-elevated); display: flex; align-items: center; justify-content: center;
      font-size: 12px; color: var(--grey); border: 1px solid var(--border);
    }
    .image-preview img { width: 100%; height: 100%; object-fit: cover; }
    .image-field-controls { flex: 1; }

    /* X overlay button to remove an image from any image-field across the CMS.
       Hooks up via document-level delegation in panels/_shared.js. */
    .image-clear-btn {
      position: absolute; top: 4px; right: 4px;
      width: 22px; height: 22px; padding: 0; border: none;
      border-radius: 50%; cursor: pointer;
      background: rgba(0, 0, 0, 0.65); color: #fff;
      font-size: 16px; line-height: 22px; font-weight: bold;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, transform 0.15s;
      z-index: 2;
    }
    .image-clear-btn:hover {
      background: var(--danger, #d33); transform: scale(1.08);
    }

    /* ── DESIGN PAGE ── */
    .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
    .color-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); }
    .color-swatch {
      width: 40px; height: 40px; border-radius: var(--radius);
      border: 1px solid var(--border); cursor: pointer; flex-shrink: 0;
    }
    .color-swatch input[type="color"] { opacity: 0; width: 40px; height: 40px; cursor: pointer; position: absolute; }
    .color-info { flex: 1; }
    .color-info label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 2px; color: var(--text-light); }
    .color-info code { font-size: 12px; color: var(--text-muted); }

    /* ── FONT SYSTEM ── */
    .font-slot-card {
      border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
      background: var(--bg-elevated); margin-bottom: 16px;
    }
    .font-slot-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
    .font-slot-header h4 { font-size: 15px; font-weight: 600; color: var(--text-light); margin: 0 0 2px; }
    .font-slot-header .font-css-var { font-size: 12px; color: var(--grey); font-family: monospace; }
    .font-slot-header .font-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
    .font-slot-current {
      display: flex; align-items: center; gap: 12px; padding: 12px 16px;
      background: var(--bg-card); border-radius: 8px; margin-bottom: 12px;
    }
    .font-slot-current .font-name { font-size: 16px; font-weight: 500; color: var(--text-light); flex: 1; }
    .font-slot-current .font-actions { display: flex; gap: 6px; align-items: center; }
    .font-slot-weights { display: flex; gap: 6px; flex-wrap: wrap; }
    .font-weight-badge {
      display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px;
      font-weight: 500; background: var(--bg-dark); color: var(--text-muted); border: 1px solid var(--border);
    }
    .font-weight-badge.required { border-color: var(--accent); color: var(--accent); }
    .font-slot-preview {
      margin-top: 12px; padding: 16px; background: var(--bg-card); border-radius: 8px;
      font-size: 22px; color: var(--text-light); line-height: 1.4;
    }
    .font-slot-status { font-size: 11px; margin-top: 6px; color: var(--grey); }

    /* Font picker modal */
    .font-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000;
      display: flex; align-items: center; justify-content: center;
    }
    .font-modal {
      background: var(--bg-card); border-radius: 12px; width: 90%; max-width: 700px;
      max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
    }
    .font-modal-header {
      padding: 20px 24px; border-bottom: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
    }
    .font-modal-header h3 { margin: 0; font-size: 18px; color: var(--text-light); }
    .font-modal-search {
      padding: 12px 24px; border-bottom: 1px solid var(--border);
    }
    .font-modal-search input {
      width: 100%; padding: 10px 14px; border: 1px solid var(--border);
      border-radius: 8px; background: var(--bg-elevated); color: var(--text); font-size: 14px;
    }
    .font-modal-body { flex: 1; overflow-y: auto; padding: 0; }
    .font-modal-category {
      padding: 8px 24px; font-size: 11px; font-weight: 700; text-transform: uppercase;
      color: var(--grey); background: var(--bg-dark); letter-spacing: 0.5px;
    }
    .font-modal-item {
      padding: 14px 24px; cursor: pointer; display: flex; justify-content: space-between;
      align-items: center; border-bottom: 1px solid var(--border); transition: background 0.15s;
    }
    .font-modal-item:hover { background: var(--bg-elevated); }
    .font-modal-item.selected { background: var(--bg-elevated); border-left: 3px solid var(--accent); }
    .font-modal-item .font-preview-name { font-size: 16px; color: var(--text-light); }
    .font-modal-item .font-preview-sample { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
    .font-modal-item .font-meta { text-align: right; }
    .font-modal-item .font-meta .status { font-size: 11px; }
    .font-modal-item .font-meta .weights-info { font-size: 10px; color: var(--grey); margin-top: 2px; }
    .font-modal-item .license-btn {
      background: none; border: 1px solid var(--border); border-radius: 4px;
      color: var(--text-muted); cursor: pointer; padding: 2px 6px; font-size: 10px;
      margin-left: 8px; transition: all 0.2s;
    }
    .font-modal-item .license-btn:hover { border-color: var(--accent); color: var(--accent); }

    /* License modal */
    .license-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1100;
      display: flex; align-items: center; justify-content: center;
    }
    .license-modal {
      background: var(--bg-card); border-radius: 12px; width: 90%; max-width: 600px;
      max-height: 75vh; display: flex; flex-direction: column; overflow: hidden;
    }
    .license-modal-header {
      padding: 16px 20px; border-bottom: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
    }
    .license-modal-header h3 { margin: 0; font-size: 16px; color: var(--text-light); }
    .license-modal-body {
      flex: 1; overflow-y: auto; padding: 20px;
      font-family: monospace; font-size: 12px; line-height: 1.6; color: var(--text-muted);
      white-space: pre-wrap; word-break: break-word;
    }

    /* ── PORTFOLIO ITEMS ── */
    .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
    .portfolio-item {
      border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
      background: var(--card); position: relative;
    }
    .portfolio-item-image {
      aspect-ratio: 4/3; background: var(--bg-elevated); display: flex;
      align-items: center; justify-content: center; overflow: hidden;
    }
    .portfolio-item-image img { width: 100%; height: 100%; object-fit: cover; }
    .portfolio-item-info { padding: 12px; }
    .portfolio-item-info h4 { font-size: 14px; margin-bottom: 4px; color: var(--text-light); }
    .portfolio-item-info span { font-size: 12px; color: var(--text-muted); }
    .portfolio-item-actions {
      position: absolute; top: 8px; right: 8px; display: flex; gap: 6px;
    }
    .portfolio-item-actions button {
      background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 50%;
      width: 28px; height: 28px; cursor: pointer; font-size: 14px;
      display: flex; align-items: center; justify-content: center;
    }
    .portfolio-item-actions button:hover { background: var(--danger); }

    /* ── FEATURE TOGGLES ── */
    .feature-toggle {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 0; border-bottom: 1px solid var(--border);
    }
    .feature-toggle:last-child { border-bottom: none; }
    .feature-info h4 { font-size: 15px; margin-bottom: 4px; color: var(--text-light); }
    .feature-info p { font-size: 13px; color: var(--text-muted); }

    .toggle { position: relative; width: 48px; height: 26px; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute; inset: 0; background: var(--border); border-radius: 26px;
      cursor: pointer; transition: 0.3s;
    }
    .toggle-slider::before {
      content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
      background: #fff; border-radius: 50%; transition: 0.3s;
    }
    .toggle input:checked + .toggle-slider { background: var(--accent); }
    .toggle input:checked + .toggle-slider::before { transform: translateX(22px); }
    .toggle input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }

    /* ── BADGE ── */
    .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
    .badge-success { background: rgba(34,197,94,0.12); color: var(--success); border: 1px solid rgba(34,197,94,0.2); }
    .badge-warning { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.2); }
    .badge-danger { background: rgba(239,68,68,0.12); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }
    .badge-info { background: rgba(0,169,242,0.12); color: var(--accent); border: 1px solid rgba(0,169,242,0.2); }

    /* ── MODAL ── */
    .modal-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
      z-index: 1000; align-items: center; justify-content: center;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      background: var(--card); border-radius: var(--radius); padding: 32px;
      width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
      border: 1px solid var(--border);
    }
    .modal.modal-large { max-width: 900px; }
    .docs-markdown-content h1 { font-size: 1.5rem; margin: 0 0 16px; color: var(--text); }
    .docs-markdown-content h2 { font-size: 1.25rem; margin: 28px 0 12px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
    .docs-markdown-content h3 { font-size: 1.1rem; margin: 20px 0 8px; color: var(--text); }
    .docs-markdown-content p { margin: 8px 0; color: var(--text-muted); line-height: 1.7; font-size: 13px; }
    .docs-markdown-content code { background: var(--bg-dark); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
    .docs-markdown-content pre { background: var(--bg-dark); padding: 16px; border-radius: 8px; overflow-x: auto; line-height: 1.8; margin: 12px 0; font-size: 13px; }
    .docs-markdown-content pre code { background: none; padding: 0; }
    .docs-markdown-content ul, .docs-markdown-content ol { padding-left: 20px; margin: 8px 0; color: var(--text-muted); font-size: 13px; line-height: 2; }
    .docs-markdown-content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
    .docs-markdown-content th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--border); color: var(--text); }
    .docs-markdown-content td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
    .docs-markdown-content strong { color: var(--text); }
    .docs-markdown-content a { color: var(--accent); }
    .docs-markdown-content hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
    .docs-markdown-content blockquote { border-left: 3px solid var(--accent); padding-left: 16px; margin: 12px 0; color: var(--text-muted); }
    .doc-nav-link:hover { background: rgba(0,169,242,0.06) !important; color: var(--text) !important; }
    .doc-tab-btn:hover { background: var(--bg-elevated) !important; }
    .modal.modal-fullscreen {
      max-width: 90vw; width: 90vw; max-height: 90vh; height: 90vh;
      padding: 0; display: flex; flex-direction: column; overflow: hidden;
    }
    .modal-fullscreen .modal-fs-header {
      padding: 20px 24px; border-bottom: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
    }
    .modal-fullscreen .modal-fs-header h2 { margin: 0; font-size: 18px; }
    .modal-fullscreen .modal-fs-body {
      display: flex; flex: 1; overflow: hidden;
    }
    .modal-fullscreen .panel-picker-sidebar {
      width: 320px; min-width: 320px; border-right: 1px solid var(--border);
      overflow-y: auto; padding: 0 10px 16px; background: var(--bg);
    }
    /* Category = top-level section header (sticky) */
    .panel-picker-sidebar .picker-category {
      padding: 14px 6px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.6px; color: var(--text-muted);
      background: var(--bg); position: sticky; top: 0; z-index: 2;
      border-bottom: 1px solid var(--border); margin-bottom: 8px;
    }
    /* Group = panels that belong together (panel.json.group) — boxed + railed */
    .panel-picker-sidebar .picker-group {
      margin: 4px 0 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent);
      border-radius: 8px; background: rgba(0,169,242,0.04); overflow: hidden;
    }
    .panel-picker-sidebar .picker-group__head {
      display: flex; align-items: center; gap: 8px; padding: 8px 12px;
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--accent); background: rgba(0,169,242,0.06);
    }
    .panel-picker-sidebar .picker-group__count {
      font-size: 10px; font-weight: 600; color: var(--text-muted);
      background: var(--bg-dark); border-radius: 9px; padding: 1px 7px;
    }
    .panel-picker-sidebar .picker-group .picker-item { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--border); }
    .panel-picker-sidebar .picker-group .picker-item:first-of-type { border-top: none; }
    /* Panel tile */
    .panel-picker-sidebar .picker-item {
      padding: 11px 12px; cursor: pointer; border: 1px solid var(--border);
      border-radius: 8px; margin: 6px 0; background: var(--bg-card);
      transition: background 0.15s, border-color 0.15s;
    }
    .panel-picker-sidebar .picker-item:hover { background: var(--bg-elevated); border-color: var(--grey); }
    .panel-picker-sidebar .picker-item.active {
      background: rgba(0,169,242,0.12); border-color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--accent);
    }
    .panel-picker-sidebar .picker-item.is-active-on-page { opacity: 0.55; }
    .panel-picker-sidebar .picker-item h4 { font-size: 13px; font-weight: 600; margin: 0 0 2px; color: var(--text-light); }
    .panel-picker-sidebar .picker-item small { font-size: 11px; color: var(--grey); }
    .panel-picker-sidebar .picker-item .badge-active { font-size: 10px; color: var(--accent); }
    /* Version control bar (above the preview iframe) */
    .picker-version-bar {
      display: flex; align-items: center; gap: 10px; padding: 10px 14px;
      background: var(--bg-card); border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .picker-version-bar > label {
      font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--text-muted); white-space: nowrap;
    }
    .picker-version-select {
      flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
      background: var(--bg-elevated); color: var(--text); font-size: 13px; cursor: pointer;
    }
    .picker-version-select:focus { outline: none; border-color: var(--accent); }
    .picker-version-select option { background: var(--bg-card); color: var(--text); }
    .picker-field-badge {
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 18px; border-radius: 3px; font-size: 9px;
      font-weight: 700; background: var(--bg-dark); color: var(--text-muted);
      border: 1px solid var(--border);
    }
    .modal-fullscreen .panel-picker-preview-area {
      flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-dark);
    }
    .panel-picker-preview-area .preview-iframe-container {
      flex: 1; position: relative; overflow: hidden;
      flex-direction: column;
    }
    .panel-picker-preview-area iframe {
      width: 100%; flex: 1; min-height: 0; border: none; background: #fff;
    }
    .panel-picker-preview-area .preview-actions {
      padding: 16px 24px; border-top: 1px solid var(--border); background: var(--card);
      display: flex; justify-content: space-between; align-items: center;
    }
    .panel-picker-preview-area .preview-panel-info {
      font-size: 13px; color: var(--grey);
    }
    .panel-picker-preview-area .preview-empty {
      flex: 1; display: flex; align-items: center; justify-content: center;
      color: var(--grey); font-size: 14px;
    }
    .modal h2 { font-size: 20px; margin-bottom: 24px; color: var(--text-light); }
    .modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }

    /* ── PANEL PICKER GRID ── */
    .panel-picker-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
    }
    .panel-picker-card {
      border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
      cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
      background: var(--bg);
    }
    .panel-picker-card:hover {
      border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,169,242,0.15);
    }
    .panel-picker-preview {
      background: var(--bg-dark, #1a1a1a); color: #ccc; padding: 16px; min-height: 120px;
      font-size: 11px; line-height: 1.5; overflow: hidden; position: relative;
      border-bottom: 1px solid var(--border);
    }
    .panel-picker-preview .preview-field {
      background: rgba(255,255,255,0.06); border-radius: 4px; padding: 4px 8px; margin: 3px 0;
      font-family: var(--font-mono, monospace); font-size: 10px;
    }
    .panel-picker-preview .preview-field-image {
      background: rgba(255,255,255,0.04); border-radius: 4px; padding: 12px 8px;
      margin: 3px 0; text-align: center; border: 1px dashed rgba(255,255,255,0.15);
    }
    .panel-picker-info {
      padding: 12px 16px;
    }
    .panel-picker-info h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--text-light); }
    .panel-picker-info small { font-size: 11px; color: var(--grey); }
    .panel-picker-card.picker-disabled {
      opacity: 0.4; pointer-events: none; cursor: default;
    }

    /* ── VIDEO COMPRESSOR MODAL ── */
    .video-compressor { display: grid; grid-template-columns: 1fr 320px; gap: 24px; height: 100%; }
    .video-compressor .vc-preview { display: flex; align-items: center; justify-content: center; background: #000; border-radius: 8px; overflow: hidden; position: relative; }
    .video-compressor .vc-preview video { max-width: 100%; max-height: 60vh; }
    .video-compressor .vc-sidebar { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
    .video-compressor .vc-group { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
    .video-compressor .vc-group h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--grey); margin-bottom: 12px; }
    .video-compressor .vc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .video-compressor .vc-row label { font-size: 13px; color: var(--text-muted); }
    .video-compressor .vc-row select, .video-compressor .vc-row input[type="range"] { width: 140px; }
    .video-compressor .vc-progress { background: var(--bg-dark, rgba(0,0,0,0.2)); border-radius: 8px; overflow: hidden; height: 8px; }
    .video-compressor .vc-progress-bar { height: 100%; background: var(--accent); transition: width 0.3s; border-radius: 8px; }
    .video-compressor .vc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .video-compressor .vc-stat { text-align: center; padding: 8px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); }
    .video-compressor .vc-stat .value { font-size: 16px; font-weight: 700; color: var(--text-light); }
    .video-compressor .vc-stat .label { font-size: 10px; color: var(--grey); text-transform: uppercase; }
    @media (max-width: 768px) { .video-compressor { grid-template-columns: 1fr; } }

    /* ── PANEL DELETE BUTTON ── */
    .section-delete-btn {
      background: none; border: none; cursor: pointer; color: var(--grey); padding: 2px 6px;
      font-size: 14px; line-height: 1; border-radius: 4px; transition: color 0.2s, background 0.2s;
    }
    .section-delete-btn:hover { color: var(--danger); background: rgba(239,68,68,0.1); }

    /* ── MEDIA GRID ── */
    .media-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;
    }
    .media-item {
      aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
      position: relative; border: 1px solid var(--border); cursor: pointer;
    }
    .media-item img { width: 100%; height: 100%; object-fit: cover; }
    .media-item .media-delete {
      position: absolute; top: 8px; right: 8px; background: var(--danger); color: #fff;
      border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer;
      font-size: 16px; display: none; align-items: center; justify-content: center;
    }
    .media-item:hover .media-delete { display: flex; }
    .media-item .media-url {
      position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7);
      color: #fff; font-size: 10px; padding: 4px 8px; display: none; word-break: break-all;
    }
    .media-item:hover .media-url { display: block; }

    /* ── TOAST ── */
    .toast {
      position: fixed; bottom: 24px; right: 24px; padding: 14px 20px;
      border-radius: var(--radius); font-size: 14px; font-weight: 500;
      z-index: 2000; animation: slideIn 0.3s; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }
    .toast-success { background: var(--bg-elevated); color: var(--success); border: 1px solid rgba(34,197,94,0.3); }
    .toast-error { background: var(--bg-elevated); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
    @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

    /* ── BOOKING PANEL ── */
    .booking-content-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }
    .booking-content-grid .content-group {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 20px; display: flex; flex-direction: column; gap: 12px;
    }
    .booking-content-grid .content-group h4 {
      font-size: 13px; font-weight: 600; color: var(--accent); margin: 0 0 4px;
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .booking-content-grid .content-group.full-width {
      grid-column: 1 / -1;
    }
    .booking-field { display: flex; flex-direction: column; gap: 4px; }
    .booking-field label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
    .booking-field .field-key { font-size: 10px; color: var(--grey); font-family: monospace; }
    .booking-field input, .booking-field textarea {
      background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px;
      padding: 8px 12px; color: var(--text-light); font-size: 13px; width: 100%;
    }
    .booking-field .field-actions { margin-top: 4px; }
    .booking-inquiry-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .booking-inquiry-table th {
      text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--border);
      color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .booking-inquiry-table td {
      padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top;
    }
    .booking-inquiry-table tr:hover td { background: rgba(255,255,255,0.02); }
    .booking-status-badge {
      display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
      font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    }
    .booking-status-badge.new { background: rgba(0,169,242,0.15); color: var(--accent); }
    .booking-status-badge.read { background: rgba(255,193,7,0.15); color: #ffc107; }
    .booking-status-badge.replied { background: rgba(34,197,94,0.15); color: var(--success); }
    .booking-status-badge.archived { background: rgba(156,163,175,0.15); color: var(--grey); }
    .booking-email-editor {
      display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 400px;
    }
    .booking-email-editor textarea {
      background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px;
      padding: 16px; color: var(--text-light); font-family: 'Courier New', monospace;
      font-size: 13px; resize: vertical; min-height: 400px; width: 100%;
    }
    .booking-email-preview {
      background: #fff; border: 1px solid var(--border); border-radius: 6px;
      padding: 16px; min-height: 400px; overflow: auto;
    }
    .booking-settings-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }
    .booking-settings-group {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 20px;
    }
    .booking-settings-group h4 {
      font-size: 13px; font-weight: 600; color: var(--accent); margin: 0 0 16px;
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .booking-settings-group .settings-field {
      display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
    }
    .booking-settings-group .settings-field label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
    .booking-settings-group .settings-field input {
      background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px;
      padding: 8px 12px; color: var(--text-light); font-size: 13px;
    }
    @media (max-width: 900px) {
      .booking-content-grid, .booking-email-editor, .booking-settings-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ── STANDALONE INPUT (reusable outside .form-group) ── */
    .input, select.input, textarea.input {
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 14px;
      font-family: inherit;
      background: var(--bg-elevated);
      color: var(--text);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .input:focus, select.input:focus, textarea.input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(0,169,242,0.15);
    }

    /* ── CONTACT / ADMIN TABLE ── */
    .admin-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .admin-table th {
      text-align: left;
      padding: 8px 12px;
      border-bottom: 2px solid var(--border);
      color: var(--grey);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }
    .admin-table td {
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .admin-table tr:hover { background: var(--bg-secondary); }

    /* ── CONTACT TAB ── */
    .contact-tab-panel { margin-top: 16px; }
    .contact-form-field-row {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 6px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .contact-form-field-row:hover {
      border-color: var(--accent);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .contact-form-field-row.dragging {
      opacity: 0.5;
      border-color: var(--accent);
    }
    .contact-form-field-row .drag-handle {
      cursor: grab;
      color: var(--grey);
      font-size: 16px;
      padding: 0 4px;
      user-select: none;
    }
    .contact-form-field-row .drag-handle:active { cursor: grabbing; }
    .contact-form-field-row .input { width: auto; }
    .contact-category-row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 6px;
    }
    .contact-category-row .input { flex: 1; }

    /* ── RESPONSIVE ── */
    /*
     * Layout strategy:
     *   >  900px  desktop — sidebar fixed left, 250px wide
     *   <= 900px  tablet/phone — sidebar slides in from the left as an
     *             overlay, hamburger button in the top-left of the main
     *             area, page-tabs scroll horizontally, modals go full
     *             height, the body content gets full width
     *   <= 480px  phone — reduce padding further, page-headers stack
     *             vertically, tables get horizontal-scroll containers
     */

    /* Hamburger button — hidden on desktop, shown by the @media block. */
    .mobile-nav-toggle {
      display: none;
      position: fixed; top: 12px; left: 12px; z-index: 110;
      width: 40px; height: 40px;
      background: var(--sidebar); color: var(--text-light);
      border: 1px solid var(--border); border-radius: 8px;
      cursor: pointer; padding: 0;
      align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    .mobile-nav-toggle svg { width: 22px; height: 22px; }
    .mobile-nav-toggle:hover { background: rgba(255,255,255,.04); }

    /* Backdrop behind the sidebar when it's open on mobile. */
    .mobile-nav-backdrop {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 99;
    }
    .mobile-nav-backdrop.active { display: block; }

    @media (max-width: 900px) {
      .mobile-nav-toggle { display: inline-flex; }

      /* Sidebar becomes an off-canvas drawer. */
      .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        width: 260px;
        box-shadow: 4px 0 24px rgba(0,0,0,.4);
      }
      .sidebar.open { transform: translateX(0); }

      /* Main content gets the full viewport width — no more left margin. */
      .main-content {
        margin-left: 0;
        padding: 64px 16px 24px;  /* extra top so content doesn't hide under the hamburger */
      }

      .page-header h1 { font-size: 22px; }

      /* page-tabs (Booking / Translations / Benutzer / Kontakt sub-nav) get
         horizontal-scroll instead of wrapping to a second line, which on
         phones tends to break the layout of pinned action-buttons. */
      .page-tabs {
        display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px;
        scrollbar-width: thin;
      }
      .page-tab { flex-shrink: 0; white-space: nowrap; }

      /* Modals go (almost-)full-screen on mobile. */
      .modal-overlay.active .modal {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
        margin: 0;
      }
      .modal { padding: 16px; }
      .modal h2 { font-size: 18px; }
      .modal-actions { flex-wrap: wrap; }
      .modal-actions .btn { flex: 1 1 auto; }

      /* Wrap-prone two-column grids in the templates editor / member tab
         / user-modal: collapse to single column. */
      .modal [style*="grid-template-columns:1fr 1fr"],
      .modal [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* Tables: scroll the table horizontally inside the parent .card so
         long rows on a 375px-wide screen don't break the layout. */
      .card table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
      }

      /* Action button rows at the right of the page-header sometimes
         collide with the title — let them wrap to a new line. */
      .page-header {
        flex-wrap: wrap;
        gap: 12px;
      }
      .page-header > div { flex: 0 0 auto; }
    }

    @media (max-width: 480px) {
      .main-content { padding: 60px 10px 16px; }
      .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
      .page-header h1 { font-size: 20px; }
      .card { padding: 14px; }
      .form-group { margin-bottom: 12px; }
      .modal { padding: 12px; }
      .btn { font-size: 13px; }
      /* The "Themes"-grid (and similar) — show single column on tiny screens. */
      #themes-grid { grid-template-columns: 1fr !important; }
    }

    .spinner {
      display: inline-block; width: 20px; height: 20px;
      border: 2px solid var(--border); border-top-color: var(--accent);
      border-radius: 50%; animation: spin 0.6s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── BLOG ── */
    .blog-post-card {
      display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--border);
      border-radius:var(--radius);margin-bottom:8px;cursor:pointer;transition:border-color 0.2s;
    }
    .blog-post-card:hover { border-color:var(--accent); }
    .blog-post-card img { width:80px;height:60px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--bg-dark); }
    .blog-post-card .no-thumb { width:80px;height:60px;border-radius:8px;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:20px;flex-shrink:0; }
    .blog-post-card .info { flex:1;min-width:0; }
    .blog-post-card .info h3 { font-size:15px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .blog-post-card .info p { font-size:12px;color:var(--text-muted);margin:0; }
    .blog-post-card .meta { display:flex;gap:8px;align-items:center;flex-shrink:0; }
    .blog-status { display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600; }
    .blog-status.draft { background:rgba(234,179,8,0.15);color:#ca8a04; }
    .blog-status.published { background:rgba(34,197,94,0.15);color:#16a34a; }
    .blog-status.deleted { background:rgba(239,68,68,0.15);color:var(--danger); }

    /* Blog Editor Modal (fullscreen) */
    .blog-editor-overlay {
      position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:2000;display:flex;align-items:center;justify-content:center;
    }
    .blog-editor-modal {
      width:95vw;height:92vh;background:var(--bg);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;
    }
    .blog-editor-header {
      display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;
    }
    .blog-editor-body { display:flex;flex:1;overflow:hidden; }
    .blog-editor-sidebar {
      width:320px;border-right:1px solid var(--border);overflow-y:auto;padding:20px;flex-shrink:0;
    }
    .blog-editor-main { flex:1;display:flex;flex-direction:column;overflow:hidden; }
    .blog-editor-toolbar {
      display:flex;flex-wrap:wrap;gap:4px;padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0;
    }
    .blog-editor-content {
      flex:1;overflow-y:auto;padding:24px;outline:none;font-size:15px;line-height:1.7;
    }
    .blog-editor-content table { border-collapse:collapse;width:100%;margin:12px 0; }
    .blog-editor-content td,.blog-editor-content th { border:1px solid var(--border);padding:8px 12px; }
    .blog-editor-content blockquote { border-left:3px solid var(--accent);padding-left:16px;margin:12px 0;color:var(--text-muted); }
    .blog-editor-content a { color:var(--accent);text-decoration:underline; }
    .blog-editor-content pre { background:var(--bg-dark);padding:12px;border-radius:8px;font-family:monospace;overflow-x:auto; }
    .blog-editor-content hr { border:none;border-top:1px solid var(--border);margin:16px 0; }
    .blog-editor-content ul,.blog-editor-content ol { padding-left:24px;margin:8px 0; }
    .blog-editor-content h1,.blog-editor-content h2,.blog-editor-content h3,.blog-editor-content h4 { margin:16px 0 8px; }
    .blog-editor-content img { max-width:100%;border-radius:8px;margin:8px 0; }
    .blog-editor-footer {
      display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-top:1px solid var(--border);flex-shrink:0;
    }

    .blog-seo-section {
      margin-top:16px;padding:16px;background:var(--bg-elevated);border-radius:var(--radius);border:1px solid var(--border);
    }
    .blog-seo-section summary { cursor:pointer;font-weight:600;font-size:14px; }
    .blog-seo-section .char-count { font-size:11px;color:var(--text-muted);text-align:right;margin-top:2px; }
    .blog-seo-section .char-count.warn { color:#ca8a04; }
    .blog-seo-section .char-count.over { color:var(--danger); }

    .blog-revisions-panel {
      position:absolute;right:0;top:0;bottom:0;width:380px;background:var(--bg);border-left:1px solid var(--border);
      overflow-y:auto;padding:20px;z-index:10;box-shadow:-4px 0 20px rgba(0,0,0,0.2);
    }
    .blog-revision-item {
      padding:12px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;cursor:pointer;transition:border-color 0.2s;
    }
    .blog-revision-item:hover { border-color:var(--accent); }

    .blog-category-tag {
      display:inline-block;padding:2px 8px;background:var(--bg-elevated);border:1px solid var(--border);
      border-radius:12px;font-size:11px;margin:2px;cursor:pointer;transition:all 0.2s;
    }
    .blog-category-tag.active { background:var(--accent);color:#fff;border-color:var(--accent); }

    .blog-thumb-upload {
      width:100%;aspect-ratio:16/10;border:2px dashed var(--border);border-radius:var(--radius);
      display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
      position:relative;transition:border-color 0.2s;
    }
    .blog-thumb-upload:hover { border-color:var(--accent); }
    .blog-thumb-upload img { width:100%;height:100%;object-fit:cover;position:absolute; }

    /* ── PROJECTS ── */
    .project-card {
      position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
      aspect-ratio:4/3;background:var(--bg-dark);transition:transform 0.2s;
    }
    .project-card:hover { transform:translateY(-2px); }
    .project-card img,.project-card video { width:100%;height:100%;object-fit:cover; }
    .project-card .overlay {
      position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,0.7));
      display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;
    }
    .project-card .overlay h3 { font-size:15px;margin-bottom:2px; }
    .project-card .overlay p { font-size:12px;opacity:0.8;margin:0; }
    .project-card .card-badge {
      position:absolute;top:8px;right:8px;z-index:2;
    }
    .project-media-grid {
      display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;
    }
    .project-media-item {
      position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:2px solid transparent;
      cursor:grab;transition:border-color 0.2s;
    }
    .project-media-item:hover { border-color:var(--accent); }
    .project-media-item img,.project-media-item video { width:100%;height:100%;object-fit:cover; }
    .project-media-item .remove-btn {
      position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;
      background:rgba(0,0,0,0.6);color:#fff;border:none;cursor:pointer;font-size:14px;
      display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;
    }
    .project-media-item:hover .remove-btn { opacity:1; }
    .project-media-item .caption-badge {
      position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.6);color:#fff;
      font-size:10px;padding:2px 6px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .project-media-upload {
      aspect-ratio:1;border:2px dashed var(--border);border-radius:8px;
      display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:28px;
      color:var(--text-muted);transition:border-color 0.2s;
    }
    .project-media-upload:hover { border-color:var(--accent);color:var(--accent); }

    /* ── STATISTIK ── */
    .stats-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
    .stats-range { display:inline-flex; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
    .stats-range__btn { background:transparent; border:none; color:var(--text-muted); padding:7px 14px; cursor:pointer; font-size:13px; font-weight:500; border-right:1px solid var(--border); transition:background .15s,color .15s; }
    .stats-range__btn:last-child { border-right:none; }
    .stats-range__btn:hover { color:var(--text); background:var(--bg-elevated); }
    .stats-range__btn.is-active { background:var(--accent); color:#fff; }
    .stats-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
    .stats-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:16px 18px; }
    .stats-card__value { font-size:28px; font-weight:700; color:var(--text-light); line-height:1.1; }
    .stats-card__label { font-size:13px; color:var(--text-muted); margin-top:6px; }
    .stats-card__sub { font-size:11px; color:var(--grey); margin-top:2px; }
    .stats-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
    @media (max-width:900px){ .stats-grid2 { grid-template-columns:1fr; } }
    .stats-bar { margin-bottom:10px; }
    .stats-bar__top { display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:4px; }
    .stats-bar__label { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:68%; }
    .stats-bar__val { color:var(--text-muted); font-variant-numeric:tabular-nums; flex-shrink:0; }
    .stats-bar__track { height:6px; background:var(--bg-dark); border-radius:4px; overflow:hidden; }
    .stats-bar__fill { height:100%; background:var(--accent); border-radius:4px; }

    /* ── STATISTIK: Rollen-Filter ── */
    .stats-rolebar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
    .stats-rolebar__label { font-size:12px; color:var(--text-muted); margin-right:4px; }
    .stats-role__btn { background:var(--bg-card); border:1px solid var(--border); color:var(--text-muted); padding:5px 12px; border-radius:999px; cursor:pointer; font-size:12px; font-weight:500; transition:background .15s,color .15s,border-color .15s; }
    .stats-role__btn:hover { color:var(--text); border-color:var(--grey); }
    .stats-role__btn.is-active { background:var(--accent); color:#fff; border-color:var(--accent); }
    .stats-role__btn--meta { color:var(--text); background:var(--bg-elevated); }