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

    :root {
      --surface-primary:   #FFFFFF;
      --surface-secondary: #F8F9FA;
      --text-primary:      #0B0B0C;
      --text-secondary:    #55565A;
      --text-tertiary:     #9B9DA2;
      --brand:             #5F2EEA;
      --brand-soft:        #EEE9FF;
      --border:            #E4E7EC;
      --radius-sm:         6px;
      --radius-md:         10px;
      --font:              'Inter', system-ui, -apple-system, sans-serif;
      --danger:            #D14343;
      --danger-soft:       #FCEBEB;
      --success:           #1D9E75;
      --success-soft:      #E8F5EF;
    }

    html, body {
      width:100%; height:100%; font-family:var(--font);
      color:var(--text-primary); background:var(--surface-secondary);
      -webkit-font-smoothing:antialiased;
    }
    body { overflow:hidden; }

    .hidden { display:none !important; }

    /* ══════════════════════════════════════════════════
       SHARED: buttons, inputs, badges
    ══════════════════════════════════════════════════ */
    button { font-family:var(--font); cursor:pointer; }

    .btn {
      display:inline-flex; align-items:center; justify-content:center; gap:6px;
      font-size:13px; font-weight:500; border-radius:var(--radius-sm);
      padding:9px 16px; border:1px solid transparent;
      transition:background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
      white-space:nowrap;
    }
    .btn-primary { background:var(--brand); color:#fff; }
    .btn-primary:hover { opacity:0.9; }
    .btn-secondary { background:var(--surface-primary); color:var(--text-primary); border-color:var(--border); }
    .btn-secondary:hover { background:var(--surface-secondary); }
    .btn-ghost { background:transparent; color:var(--text-secondary); }
    .btn-ghost:hover { background:var(--surface-secondary); color:var(--text-primary); }
    .btn-danger { background:var(--danger-soft); color:var(--danger); border-color:#F5D4D4; }
    .btn-danger:hover { background:#FADEDE; }
    .btn:disabled { opacity:0.5; cursor:default; }
    .btn-sm { padding:6px 10px; font-size:12px; }
    .btn-icon { padding:7px; }

    label {
      display:block; font-size:12px; font-weight:500;
      color:var(--text-secondary); margin-bottom:6px;
    }
    .field { margin-bottom:18px; }
    .field-hint { font-size:11px; color:var(--text-tertiary); margin-top:5px; }

    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], textarea, select {
      width:100%; font-family:var(--font); font-size:13px;
      color:var(--text-primary); background:var(--surface-primary);
      border:1px solid var(--border); border-radius:var(--radius-sm);
      padding:9px 12px; transition:border-color 0.15s;
    }
    input:focus, textarea:focus, select:focus {
      outline:none; border-color:var(--brand);
    }
    textarea { resize:vertical; min-height:90px; line-height:1.5; }
    select { appearance:none; cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2355565A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
    }

    .checkbox-row { display:flex; align-items:center; gap:10px; cursor:pointer; }
    .checkbox-row input[type="checkbox"] {
      width:18px; height:18px; accent-color:var(--brand); cursor:pointer; flex-shrink:0;
    }
    .checkbox-row span { font-size:13px; color:var(--text-primary); }

    .badge {
      display:inline-flex; align-items:center; gap:5px;
      font-size:11px; font-weight:500; letter-spacing:0.02em;
      padding:3px 9px; border-radius:100px;
    }
    .badge-published { background:var(--success-soft); color:var(--success); }
    .badge-draft     { background:#FFF8E0; color:#A07800; }
    .badge-featured  { background:var(--brand-soft); color:var(--brand); }
    .badge-neutral   { background:var(--surface-secondary); color:var(--text-secondary); border:1px solid var(--border); }

    /* ══════════════════════════════════════════════════
       CONFIG-NEEDED SCREEN
    ══════════════════════════════════════════════════ */
    #config-screen {
      position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
      padding:24px;
    }
    .config-card {
      max-width:480px; background:var(--surface-primary); border:1px solid var(--border);
      border-radius:var(--radius-md); padding:36px; text-align:left;
    }
    .config-card h1 { font-size:18px; font-weight:600; margin-bottom:12px; }
    .config-card p { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:10px; }
    .config-card code {
      display:block; font-family:'SFMono-Regular',Consolas,monospace; font-size:12px;
      background:var(--surface-secondary); border:1px solid var(--border);
      border-radius:6px; padding:10px 12px; margin:10px 0; color:var(--text-primary);
      white-space:pre-wrap; word-break:break-all;
    }

    /* ══════════════════════════════════════════════════
       LOGIN SCREEN
    ══════════════════════════════════════════════════ */
    #login-screen {
      position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
      padding:24px; background:var(--surface-secondary);
    }
    .auth-card {
      width:100%; max-width:380px; background:var(--surface-primary);
      border:1px solid var(--border); border-radius:var(--radius-md);
      padding:40px 36px;
    }
    .auth-logo { display:flex; justify-content:center; margin-bottom:24px; }
    .auth-logo svg { height:36px; width:auto; }
    .auth-card h1 {
      font-size:18px; font-weight:600; text-align:center;
      margin-bottom:6px; letter-spacing:-0.01em;
    }
    .auth-card .auth-sub {
      font-size:13px; color:var(--text-secondary); text-align:center; margin-bottom:28px;
    }
    .auth-error {
      font-size:12px; color:var(--danger); background:var(--danger-soft);
      border:1px solid #F5D4D4; border-radius:var(--radius-sm);
      padding:10px 12px; margin-bottom:16px; line-height:1.5;
    }
    .auth-card .btn-primary { width:100%; padding:11px; margin-top:6px; }

    /* ══════════════════════════════════════════════════
       DASHBOARD SHELL
    ══════════════════════════════════════════════════ */
    #dashboard { display:flex; height:100vh; }

    .sidebar {
      width:240px; flex-shrink:0; background:var(--surface-primary);
      border-right:1px solid var(--border);
      display:flex; flex-direction:column;
      padding:24px 16px;
    }
    .sidebar-logo {
      display:flex; align-items:center; gap:10px; padding:0 8px 28px;
    }
    .sidebar-logo svg { height:22px; width:auto; }
    .sidebar-logo-text {
      font-size:11px; font-weight:600; letter-spacing:0.1em;
      text-transform:uppercase; color:var(--text-tertiary);
    }
    .sidebar-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
    .sidebar-link {
      display:flex; align-items:center; gap:11px;
      font-size:13px; font-weight:500; color:var(--text-secondary);
      padding:10px 12px; border-radius:var(--radius-sm);
      text-decoration:none; transition:background 0.12s, color 0.12s;
    }
    .sidebar-link svg { flex-shrink:0; opacity:0.7; }
    .sidebar-link:hover { background:var(--surface-secondary); color:var(--text-primary); }
    .sidebar-link.active {
      background:var(--brand-soft); color:var(--brand);
    }
    .sidebar-link.active svg { opacity:1; }
    .sidebar-footer {
      border-top:1px solid var(--border); padding-top:16px;
      display:flex; flex-direction:column; gap:10px;
    }
    .sidebar-user {
      font-size:12px; color:var(--text-tertiary); padding:0 12px;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }

    .main { flex:1; overflow-y:auto; padding:32px 40px; }
    .main-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:28px; gap:16px; flex-wrap:wrap;
    }
    .main-header h1 {
      font-size:22px; font-weight:600; letter-spacing:-0.015em;
    }
    .main-header p {
      font-size:13px; color:var(--text-secondary); margin-top:4px;
    }

    /* ══════════════════════════════════════════════════
       CASES TABLE
    ══════════════════════════════════════════════════ */
    .table-wrap {
      background:var(--surface-primary); border:1px solid var(--border);
      border-radius:var(--radius-md); overflow:hidden;
    }
    table { width:100%; border-collapse:collapse; font-size:13px; }
    thead th {
      text-align:left; font-size:11px; font-weight:500; letter-spacing:0.06em;
      text-transform:uppercase; color:var(--text-tertiary);
      padding:12px 20px; border-bottom:1px solid var(--border);
      background:var(--surface-secondary);
    }
    tbody td {
      padding:14px 20px; border-bottom:1px solid var(--border);
      color:var(--text-primary); vertical-align:middle;
    }
    tbody tr:last-child td { border-bottom:none; }
    tbody tr:hover { background:var(--surface-secondary); }
    .cell-title { font-weight:500; }
    .cell-slug { font-family:'SFMono-Regular',Consolas,monospace; font-size:11.5px; color:var(--text-tertiary); margin-top:2px; }
    .cell-actions { display:flex; gap:6px; justify-content:flex-end; }
    .col-order { width:64px; text-align:center; color:var(--text-tertiary); }
    .col-actions { text-align:right; width:1%; }

    .empty-state, .loading-state {
      padding:64px 24px; text-align:center; color:var(--text-tertiary); font-size:13px;
    }
    .spinner {
      width:18px; height:18px; border:2px solid var(--border);
      border-top-color:var(--brand); border-radius:50%;
      animation:spin 0.7s linear infinite; display:inline-block; vertical-align:middle; margin-right:8px;
    }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* ══════════════════════════════════════════════════
       EDITOR SLIDE-OVER
    ══════════════════════════════════════════════════ */
    #editor-backdrop {
      position:fixed; inset:0; z-index:100;
      background:rgba(11,11,12,0.32);
      opacity:0; pointer-events:none; transition:opacity 0.25s ease;
    }
    #editor-backdrop.open { opacity:1; pointer-events:all; }

    #editor-panel {
      position:fixed; top:0; right:0; bottom:0; z-index:101;
      width:min(480px, 100vw);
      background:var(--surface-primary);
      box-shadow:-12px 0 40px rgba(0,0,0,0.12);
      display:flex; flex-direction:column;
      transform:translateX(100%);
      transition:transform 0.32s cubic-bezier(0.32,0.72,0,1);
    }
    #editor-panel.open { transform:translateX(0); }

    .editor-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:20px 24px; border-bottom:1px solid var(--border); flex-shrink:0;
    }
    .editor-header h2 { font-size:16px; font-weight:600; }
    .editor-close {
      width:32px; height:32px; display:flex; align-items:center; justify-content:center;
      border-radius:var(--radius-sm); border:none; background:transparent;
      color:var(--text-secondary); transition:background 0.12s, color 0.12s;
    }
    .editor-close:hover { background:var(--surface-secondary); color:var(--text-primary); }

    .editor-body { flex:1; overflow-y:auto; padding:24px; }
    .editor-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

    .editor-footer {
      border-top:1px solid var(--border); padding:16px 24px; flex-shrink:0;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .editor-footer-right { display:flex; gap:8px; }
    .editor-error {
      font-size:12px; color:var(--danger); background:var(--danger-soft);
      border:1px solid #F5D4D4; border-radius:var(--radius-sm);
      padding:10px 12px; margin-bottom:16px; line-height:1.5;
    }

    /* Scope tag input */
    .tag-input-wrap {
      display:flex; flex-wrap:wrap; gap:6px; align-items:center;
      border:1px solid var(--border); border-radius:var(--radius-sm);
      padding:7px 8px; min-height:40px;
    }
    .tag-input-wrap:focus-within { border-color:var(--brand); }
    .tag-chip {
      display:inline-flex; align-items:center; gap:6px;
      font-size:12px; font-weight:500; color:var(--text-primary);
      background:var(--surface-secondary); border:1px solid var(--border);
      border-radius:5px; padding:3px 6px 3px 10px;
    }
    .tag-chip button {
      display:flex; align-items:center; justify-content:center;
      width:16px; height:16px; border:none; background:transparent;
      color:var(--text-tertiary); border-radius:3px; font-size:13px; line-height:1;
      transition:background 0.1s, color 0.1s;
    }
    .tag-chip button:hover { background:var(--border); color:var(--text-primary); }
    .tag-input-wrap input {
      flex:1; min-width:80px; border:none; padding:4px 2px; font-size:13px;
    }
    .tag-input-wrap input:focus { outline:none; }

    /* ══════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════ */
    @media (max-width:860px) {
      .editor-row { grid-template-columns:1fr; }
    }
    @media (max-width:700px) {
      .sidebar { width:72px; padding:20px 10px; }
      .sidebar-logo-text, .sidebar-link span, .sidebar-user, #logout-btn span { display:none; }
      .sidebar-logo { justify-content:center; padding-bottom:24px; }
      .sidebar-link { justify-content:center; padding:12px; }
      .sidebar-footer { align-items:center; }
      .main { padding:20px; }
      thead th:nth-child(3), tbody td:nth-child(3),
      thead th:nth-child(4), tbody td:nth-child(4) { display:none; }
      #editor-panel { width:100vw; }
    }