.pre-dark body { background:#0b1220; }

  html { transition: color .2s ease, background-color .2s ease; }
  body, .panel, .tag, .chip, input[type="text"], textarea {
    transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  }

  :root{
    --bg:#f7f7fb;
    --panel:#fff;
    --text:#1f2328;
    --muted:#6b7280;
    --line:#e5e7eb;

    --pill:#eef2ff;
    --pill-text:#3730a3;

    --accent:#3b82f6;
    --accent-2:#8b5cf6;

    --btn:#0f172a;
    --btn-text:#fff;

    --field:#fafafa;
    --focus:#2563eb;
    --shadow:0 4px 14px rgba(0,0,0,.06);
  }

  .dark{
    --bg:#0b1220;
    --panel:#111827;
    --text:#e5e7eb;
    --muted:#a3b2c4;
    --line:#263041;
    --pill:#1f2a44;
    --pill-text:#dbeafe;
    --accent:#60a5fa;
    --accent-2:#a78bfa;
    --btn:#334155;
    --btn-text:#e5e7eb;
    --field:#0f172a;
    --focus:#60a5fa;
    --shadow:0 4px 18px rgba(0,0,0,.35);
  }

  *{ box-sizing:border-box; }
  body{
    font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;
    margin:0;
    background:var(--bg);
    color:var(--text);
    color-scheme: light dark;
  }

  /* Make the Brand Guide Preview textarea larger */
    #guide_preview {
    min-height: 150px;     /* double the height */
    resize: vertical;       /* allow manual resizing */
    line-height: 1.5;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 14px;
    background: var(--field);
    color: var(--text);
}

  /* Make the Brand Guide Preview textarea larger */
    #brand_guide {
    min-height: 150px;     /* double the height */
    resize: vertical;       /* allow manual resizing */
    line-height: 1.5;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 14px;
    background: var(--field);
    color: var(--text);
}

  .wrap{ max-width:1100px; margin:28px auto; padding:0 16px; }
  .topbar{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .brand{ font-weight:800; font-size:20px; }
  .a11y{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

  .chip{
    padding:6px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--panel);
    color:var(--text);
    cursor:pointer;
  }
  .chip:hover{ background:var(--field); }
  .chip.secondary{ font-size:12px; padding:4px 8px; margin-left:6px; }

  .btn{
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--btn);
    color:var(--btn-text);
    cursor:pointer;
  }
  .btn.secondary{ background:var(--panel); color:var(--text); }

  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px;
    margin:12px 0;
    box-shadow:var(--shadow);
  }

  label{ display:block; font-weight:600; margin:10px 0 6px; }

  input[type="text"], textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--field);
    color:var(--text);
    outline:none;
  }
  input[type="text"]:focus, textarea:focus{
    border-color:var(--focus);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
  }

  .textarea, textarea { min-height:110px; }

  input::placeholder, textarea::placeholder{ color:#94a3b8; }
  .dark input::placeholder, .dark textarea::placeholder{ color:#7b8aa0; }

  .hint{ color:var(--muted); font-size:12px; margin-top:4px; }
  .microtip{ font-size:11px; color:var(--muted); }

  .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:820px){ .row{ grid-template-columns:1fr; } }

  .tagset{ display:flex; flex-wrap:wrap; gap:8px; }
  .tag{
    padding:7px 12px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--panel);
    color:var(--text);
    cursor:pointer;
  }
  .tag.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .tag.alt.selected{ background:var(--accent-2); border-color:var(--accent-2); }
  .tag.add{ border-style:dashed; }

  .tone-group, .lexicon-group { transition: background .3s ease, box-shadow .3s ease; }
  .tone-group:hover, .lexicon-group:hover { box-shadow:0 0 0 2px var(--accent-2); }

  .footer-tip{ color:var(--muted); font-size:12px; margin-top:10px; }

  .ai-commentary{
  margin:16px 0 24px;
  background: var(--card);
  border:1px solid var(--border);
  border-left: 6px solid #0ea5e9; /* cyan accent */
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
    }
    .ai-commentary h3{
    margin:0 0 6px;
    font-size: 16px;
    }
    .ai-commentary .ai-note{
    color: var(--muted);
    font-size: 12px;
    margin-top: 6px;
    }
    body.dark .ai-commentary{ background: var(--card); }

  #errBackdrop{
    position:fixed; inset:0;
    display:none;
    align-items:center; justify-content:center;
    backdrop-filter: blur(6px);
    background: rgba(0,0,0,.4);
    z-index:9999; padding:20px;
  }
  #errMsg{
    background: var(--panel);
    color: var(--text);
    padding: 20px 24px;
    border-radius:14px;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
    max-width:420px; width:100%;
    line-height:1.6;
  }

  .modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; padding:16px; z-index:9999; }
  .modal{ background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:14px; max-width:640px; width:100%; box-shadow:var(--shadow); }
  .modal header{ padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
  .modal .body{ padding:16px; max-height:60vh; overflow:auto; }
  .modal footer{ padding:12px 16px; border-top:1px solid var(--line); text-align:right; }
  .close-x{ background:transparent; border:none; font-size:18px; color:var(--text); cursor:pointer; }
  .error-text{ white-space:pre-wrap; font-family:ui-monospace, Menlo, Consolas, monospace; }
  .spinner{ display:inline-block; width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; margin-right:8px; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .tour-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9998; display:none; pointer-events:none; }
  .tour-tip{
    position:absolute; max-width:420px;
    background:var(--panel); color:var(--text);
    border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
    padding:14px; z-index:9999; pointer-events:auto;
  }
  .tour-focus-ring{
    position:absolute; border-radius:8px;
    box-shadow:0 0 0 4px rgba(59,130,246,.45);
    z-index:9997; pointer-events:none;
  }