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

    /* Cropper.js circular mask */
    .cropper-view-box,
    .cropper-face {
      border-radius: 50%;
    }
    .cropper-view-box {
      outline: 0;
      box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.5);
    }

    :root {
      --bg:        #09090e;
      --surface:   #13131f;
      --surface-2: #1a1a2e;
      --card-bg:   #13131f;
      --border:    rgba(255,255,255,0.08);
      --primary:   #6366f1;
      --primary-2: #a855f7;
      --text:      #f2f0ff;
      --text-2:    #c2c0d4;
      --muted:     #7a7888;
      --radius:    12px;
      --sidebar-w: 220px;
      --green:     #22c55e;
      --red:       #ef4444;
      --hover-bg:  rgba(255,255,255,0.05);
      --overlay-border: rgba(255,255,255,0.12);
      --scrollbar-thumb: rgba(255,255,255,0.12);
    }

    [data-theme="light"] {
      --bg:        #f5f5f9;
      --surface:   #ffffff;
      --surface-2: #eeeef4;
      --card-bg:   #ffffff;
      --border:    rgba(0,0,0,0.09);
      --primary:   #4f46e5;
      --primary-2: #7c3aed;
      --text:      #1a1a2e;
      --text-2:    #374151;
      --muted:     #6b7280;
      --green:     #16a34a;
      --red:       #dc2626;
      --hover-bg:  rgba(0,0,0,0.04);
      --overlay-border: rgba(0,0,0,0.10);
      --scrollbar-thumb: rgba(0,0,0,0.15);
    }

    [data-theme="light"] #login-screen {
      background: radial-gradient(ellipse at 60% 20%, rgba(99,102,241,0.06) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(168,85,247,0.04) 0%, transparent 50%), var(--bg);
    }
    [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      line-height: 1.6;
    }

    .grad-text {
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }

    /* ── LOGIN SCREEN ── */
    #login-screen {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 24px;
      background:
        radial-gradient(ellipse at 60% 20%, rgba(99,102,241,0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(168,85,247,0.08) 0%, transparent 50%),
        var(--bg);
    }

    .login-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 48px 40px;
      width: 100%;
      max-width: 420px;
      text-align: center;
    }

    .login-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-bottom: 4px;
    }
    .login-logo img {
      max-height: 48px;
      width: auto;
    }
    .login-logo-text {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      line-height: 1;
    }
    .login-logo-text .name {
      font-size: 2rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 4px;
    }
    .login-logo-text .sub {
      font-size: 0.65rem;
      font-weight: 500;
      color: #a3a3a3;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .login-tagline {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 40px;
    }

    .login-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 24px;
      color: var(--muted);
      font-size: 13px;
    }
    .login-divider::before,
    .login-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    #google-btn-container { display: flex; justify-content: center; }

    /* ── APP SHELL ── */
    #app {
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    /* ── SIDEBAR ── */
    #sidebar {
      width: var(--sidebar-w);
      min-width: var(--sidebar-w);
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease;
      z-index: 100;
    }

    .sidebar-logo {
      padding: 28px 20px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .sidebar-logo img {
      max-height: 32px;
      width: auto;
    }

    .sidebar-logo .wordmark {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }

    .sidebar-logo .sub {
      font-size: 0.55rem;
      font-weight: 500;
      color: #a3a3a3;
      margin-top: 2px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .sidebar-nav {
      flex: 1;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow-y: auto;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      color: var(--text-2);
      font-size: 14px;
      font-weight: 500;
      transition: background 0.15s, color 0.15s;
      user-select: none;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }

    .nav-item:hover {
      background: var(--hover-bg);
      color: var(--text);
    }

    .nav-item.active {
      background: rgba(99,102,241,0.15);
      color: var(--primary);
    }

    .nav-item svg { flex-shrink: 0; opacity: 0.85; }
    .nav-item.active svg { opacity: 1; }

    .sidebar-user {
      padding: 16px 14px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .user-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      flex-shrink: 0;
      overflow: hidden;
    }

    .user-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .user-info { flex: 1; min-width: 0; }
    .user-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-plan { font-size: 11px; color: var(--muted); }

    /* ── MAIN ── */
    #main {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    /* ── TOPBAR (mobile) ── */
    #topbar {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 14px 20px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 50;
    }

    #hamburger {
      background: none;
      border: none;
      color: var(--text);
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
    }

    .topbar-logo {
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: 18px;
    }

    /* ── PAGES ── */
    .page { display: none; padding: 36px 40px; max-width: 1000px; width: 100%; }
    .page.active { display: block; }

    .page-header { margin-bottom: 28px; }

    .page-title {
      font-family: 'DM Sans', sans-serif;
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }

    .page-subtitle { color: var(--text-2); margin-top: 4px; font-size: 14px; }

    /* ── CARDS ── */
    /* ── CARDS ──
       Canonical class: .card  (use this in new code)
       Legacy aliases preserved for existing HTML — share the same base
       properties so a token change propagates everywhere:
         .m-card        — manage-mode wrapper, adds bottom margin
         .stat-card     — Dashboard stat cells (smaller padding)
         .agent-card    — Agent list cards (smaller padding + flex column)
         .pricing-card  — Plan picker cards (column, gap)
         .welcome-card  — Branded gradient hero
         .login-card    — Login screen, larger radius + center
       For accent stripes use .card-info / .card-success / .card-warning /
       .card-danger / .card-brand2 / .card-accent-{blue|pink|violet|cyan|
       lavender|emerald} (defined in components.css, additive).
       New cards should use .card + accent modifier. Don't add new aliases.
    */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
    }

    .card + .card { margin-top: 16px; }

    .card-title {
      font-family: 'DM Sans', sans-serif;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    /* ── BUTTONS ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 18px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.1s;
      border: none;
      text-decoration: none;
      line-height: 1;
    }

    .btn:active { transform: scale(0.97); }

    .btn-primary {
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      color: #fff;
    }

    .btn-primary:hover { opacity: 0.88; }

    .btn-secondary {
      background: transparent;
      color: var(--text-2);
      border: 1px solid var(--border);
    }

    .btn-secondary:hover { background: var(--hover-bg); color: var(--text); }

    .btn-danger {
      background: transparent;
      color: var(--red);
      border: 1px solid rgba(239,68,68,0.3);
    }

    .btn-danger:hover { background: rgba(239,68,68,0.08); }

    .btn:disabled { opacity: 0.5; cursor: not-allowed; }

    .btn-sm { padding: 5px 12px; font-size: 12px; }

    /* ── BADGES ── */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
    }

    .badge-free       { background: rgba(122,120,136,0.2); color: var(--muted); }
    .badge-pro        { background: rgba(99,102,241,0.18); color: #818cf8; }
    .badge-enterprise { background: rgba(168,85,247,0.18); color: #c084fc; }

    .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .status-active   { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
    .status-inactive { background: #f59e0b;      box-shadow: 0 0 6px rgba(245,158,11,0.5); }

    .badge-status-active   { background: rgba(34,197,94,0.12);   color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
    .badge-status-inactive { background: rgba(245,158,11,0.12);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
    button.badge-status-active:hover   { background: rgba(34,197,94,0.2); }
    button.badge-status-inactive:hover { background: rgba(245,158,11,0.2); }

    /* ── STATS GRID ── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 14px;
      margin-bottom: 24px;
    }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
    }

    .stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
    .stat-value { font-family: 'DM Sans', sans-serif; font-size: 28px; font-weight: 700; margin-top: 6px; }
    .stat-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }

    /* ── AGENTS GRID ── */
    .agents-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
    }

    .agent-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: border-color 0.15s;
    }

    .agent-card:hover { border-color: rgba(99,102,241,0.3); }

    .agent-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 2px;
    }

    .agent-name { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 700; color: var(--text); }
    .agent-slug { font-size: 12px; color: var(--muted); margin-top: 2px; font-family: monospace; }
    .agent-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; }
    .agent-url-row {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--hover-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 10px;
      margin-top: 8px;
    }
    .agent-url-row span {
      flex: 1;
      font-size: 12px;
      font-family: monospace;
      color: var(--text-2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .agent-url-copy {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--muted);
      padding: 2px 4px;
      border-radius: 4px;
      font-size: 13px;
      transition: color 0.15s;
      flex-shrink: 0;
    }
    .agent-url-copy:hover { color: var(--primary); }

    .agent-card-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding-top: 12px;
      margin-top: auto;
      border-top: 1px solid var(--border);
    }

    /* ── PRICING ── */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
    }

    .pricing-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      overflow: hidden;
    }

    .pricing-card.featured { border-color: rgba(99,102,241,0.4); }

    .pricing-card.featured::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(168,85,247,0.04));
      pointer-events: none;
    }

    .pricing-name { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 700; }
    .pricing-amount { font-family: 'DM Sans', sans-serif; font-size: 36px; font-weight: 700; }
    .pricing-period { font-size: 14px; color: var(--muted); }

    .pricing-features { list-style: none; display: flex; flex-direction: column; gap: 8px; }

    .pricing-features li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-2);
    }

    .pricing-features li::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      flex-shrink: 0;
    }

    .coming-soon-tag {
      display: inline-block;
      padding: 2px 8px;
      background: rgba(122,120,136,0.2);
      color: var(--muted);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 500;
    }

    /* ── SETTINGS ── */
    .settings-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
    .settings-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
    .settings-value { font-size: 15px; color: var(--text); }
    .settings-value.readonly { color: var(--muted); font-size: 14px; }

    /* Section navigation strip — sticky horizontal jump-link bar at
       the top of the multi-section Settings page. Active state
       follows the section currently in the viewport via JS. */
    .settings-section-nav {
      display: flex;
      gap: 4px;
      margin-bottom: 24px;
      padding: 4px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      position: sticky;
      top: 12px;
      z-index: 5;
      flex-wrap: wrap;
    }
    .settings-section-link {
      flex: 1;
      min-width: 110px;
      padding: 8px 14px;
      border-radius: 7px;
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: color 120ms ease, background 120ms ease;
    }
    .settings-section-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
    .settings-section-link.active {
      color: var(--primary);
      background: rgba(99, 102, 241, 0.10);
      font-weight: 600;
    }
    .settings-section-link:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--primary);
    }

    .settings-sections {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    .settings-section {
      scroll-margin-top: 80px;
    }
    .settings-section-head {
      margin-bottom: 14px;
    }
    .settings-section-title {
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      margin: 0 0 4px;
      letter-spacing: -0.01em;
    }
    .settings-section-subtitle {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55;
      margin: 0;
      max-width: 720px;
    }

    /* Organization section — 2-col grid of read-only fact cards
       (name, ID, plan, members count). Layout collapses to single
       column on narrow viewports. */
    .settings-org-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 12px;
    }
    .settings-org-tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .settings-org-tile-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      line-height: 1;
    }
    .settings-org-tile-value {
      font-size: 16px;
      color: var(--text);
      font-weight: 500;
      word-break: break-word;
    }
    .settings-org-tile-value--mono {
      font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
      font-size: 13px;
      letter-spacing: 0.04em;
    }
    .settings-org-tile-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    /* Danger zone — destructive actions card with red accent. */
    .settings-danger-card {
      max-width: 720px;
      border-color: rgba(239, 68, 68, 0.30);
    }
    .settings-danger-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .settings-danger-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
    }
    .settings-danger-desc {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
      max-width: 480px;
    }

    /* ── MODAL ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    .modal-overlay.open { opacity: 1; pointer-events: all; }

    .modal {
      background: var(--surface);
      border: 1px solid var(--overlay-border);
      border-radius: 16px;
      padding: 32px;
      width: 100%;
      max-width: 480px;
      transform: translateY(12px);
      transition: transform 0.2s;
    }

    .modal-overlay.open .modal { transform: translateY(0); }

    .modal-title {
      font-family: 'DM Sans', sans-serif;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .form-group { margin-bottom: 16px; }

    .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }

    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      color: var(--text);
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      outline: none;
      transition: border-color 0.15s;
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus { border-color: rgba(99,102,241,0.5); }

    .form-select { cursor: pointer; }
    .form-textarea { resize: vertical; min-height: 90px; }
    .form-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

    .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

    /* ── TOAST ── */
    #toast-container {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }

    .toast {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 18px;
      font-size: 14px;
      color: var(--text);
      min-width: 240px;
      max-width: 360px;
      box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.4));
      animation: toastIn 0.25s ease;
      pointer-events: all;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .toast.error   { border-color: rgba(239,68,68,0.4); }
    .toast.success { border-color: rgba(34,197,94,0.4); }

    @keyframes toastIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── MANAGE VIEW ── */
    .manage-back-btn {
      display: flex; align-items: center; gap: 8px; padding: 10px 12px;
      border-radius: 8px; cursor: pointer; color: var(--text-2); font-size: 14px;
      font-weight: 500; transition: background 0.15s, color 0.15s;
      border: none; background: none; width: 100%; text-align: left;
    }
    .manage-back-btn:hover { background: var(--hover-bg); color: var(--text); }
    .manage-agent-label {
      padding: 14px 12px 6px; font-size: 11px; font-weight: 600;
      color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
    }
    .manage-nav-sep { height: 1px; background: var(--border); margin: 6px 12px 8px; }
    .manage-nav-group-label {
      padding: 12px 12px 4px;
      font-size: 10px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .manage-nav-group-label:first-of-type { padding-top: 4px; }
    .manage-breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 18px 40px 0;
      max-width: 1000px;
      width: 100%;
      font-size: 12px;
      color: var(--muted);
      font-weight: 500;
    }
    .manage-breadcrumb .crumb {
      color: var(--text-2);
      text-decoration: none;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      font: inherit;
      transition: color 0.15s;
    }
    .manage-breadcrumb .crumb:hover { color: var(--text); }
    .manage-breadcrumb .crumb-sep {
      color: var(--muted);
      opacity: 0.6;
    }
    .manage-breadcrumb .crumb-current {
      color: var(--text);
      font-weight: 600;
    }
    .manage-page { display: none; padding: 36px 40px; max-width: 1000px; width: 100%; }
    .manage-page.active { display: block; }

    /* Stat cards */
    .m-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 14px; margin-bottom: 28px; }
    .m-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
    .m-stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
    .m-stat-value { font-family: 'DM Sans', sans-serif; font-size: 28px; font-weight: 700; color: var(--text); line-height: 1; }
    .m-stat-sub   { font-size: 12px; color: var(--muted); margin-top: 4px; }

    /* Service status */
    .m-svc-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
    .m-svc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; display: flex; align-items: center; gap: 12px; min-width: 200px; flex: 1; }
    .m-svc-card.up           { border-color: rgba(34,197,94,0.3); }
    .m-svc-card.down         { border-color: rgba(239,68,68,0.3); }
    .m-svc-card.unconfigured { opacity: 0.6; }
    .m-svc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .m-svc-card.up           .m-svc-dot { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
    .m-svc-card.down         .m-svc-dot { background: var(--red);   box-shadow: 0 0 6px rgba(239,68,68,0.5); }
    .m-svc-card.unconfigured .m-svc-dot { background: var(--muted); }
    .m-svc-name   { font-size: 13px; font-weight: 600; color: var(--text); }
    .m-svc-detail { font-size: 12px; color: var(--muted); margin-top: 1px; }
    .m-svc-badge  { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
    .m-svc-card.up           .m-svc-badge { background: rgba(34,197,94,0.12); color: #4ade80; }
    .m-svc-card.down         .m-svc-badge { background: rgba(239,68,68,0.12); color: #f87171; }
    .m-svc-card.unconfigured .m-svc-badge { background: rgba(122,120,136,0.15); color: var(--muted); }

    /* Manage cards / fields */
    .m-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; }
    .m-card-title { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 18px; }
    .m-field { margin-bottom: 16px; }
    .m-field:last-of-type { margin-bottom: 0; }
    .m-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; min-height: 18px; }
    .m-input, .m-select, .m-textarea {
      width: 100%; background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 8px; padding: 10px 14px; color: var(--text); font-size: 14px;
      font-family: 'Inter', sans-serif; outline: none; transition: border-color 0.15s;
    }
    .m-input:focus, .m-select:focus, .m-textarea:focus { border-color: var(--primary); }
    .m-textarea { resize: vertical; min-height: 100px; }
    .ge-btn { background:var(--bg); border:1px solid var(--border); color:var(--text-2); padding:4px 10px; border-radius:4px; font-size:12px; font-family:'DM Sans',sans-serif; cursor:pointer; transition:all 0.15s; line-height:1.3; }
    .ge-btn:hover { border-color:var(--primary); color:var(--text); background:rgba(99,102,241,0.08); }
    .m-select { cursor: pointer; }
    .m-input.mono { font-family: monospace; font-size: 13px; }
    .m-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
    .m-row .m-field { margin-bottom: 0; }

    /* Users table */
    .m-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .m-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .m-table thead th { padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); background: var(--surface-2); }
    .m-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--hover-bg); color: var(--text-2); vertical-align: middle; }
    .m-table tbody tr:last-child td { border-bottom: none; }
    .m-table tbody tr:hover td { background: var(--hover-bg); }
    .m-tier-select { font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); padding: 4px 8px; border-radius: 6px; cursor: pointer; }

    /* Feature flags */
    .m-flag-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--border); gap: 12px; }
    .m-flag-row:last-child { border-bottom: none; }
    .m-tile-card-row { background: var(--hover-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
    .m-flag-name { font-size: 14px; color: var(--text); font-weight: 500; }
    .m-flag-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .m-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; display: inline-block; }
    .m-toggle input { display: none; }
    .m-toggle-track { position: absolute; inset: 0; background: var(--hover-bg); border-radius: 10px; transition: background 0.2s; }
    .m-toggle-thumb { position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform 0.2s; pointer-events: none; }
    .m-toggle input:checked + .m-toggle-track { background: var(--primary); }
    .m-toggle input:checked + .m-toggle-track + .m-toggle-thumb { transform: translateX(16px); }

    /* Emoji picker */
    .emoji-cell { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; border-radius:6px; cursor:pointer; transition:background 0.1s; user-select:none; }
    .emoji-cell:hover { background:var(--hover-bg); }
    #emoji-grid::-webkit-scrollbar { width:6px; }
    #emoji-grid::-webkit-scrollbar-track { background:transparent; }
    #emoji-grid::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }

    /* Color scheme picker */
    .m-scheme-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 12px; }
    .m-scheme-opt { border: 2px solid var(--border); border-radius: 10px; padding: 10px 8px; cursor: pointer; transition: border-color 0.15s; text-align: center; }
    .m-scheme-opt:hover { border-color: var(--overlay-border); }
    .m-scheme-opt.active { border-color: var(--primary); }
    .m-scheme-swatches { display: flex; height: 18px; border-radius: 4px; overflow: hidden; gap: 2px; margin-bottom: 6px; }
    .m-scheme-swatch { flex: 1; border-radius: 2px; }
    .m-scheme-name { font-size: 11px; font-weight: 600; color: var(--muted); }
    .m-scheme-opt.active .m-scheme-name { color: var(--text-2); }

    /* Save row */
    .m-save-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
    /* Expertise page alignment */
    .expertise-tab-panel .m-card { margin-bottom: 14px; }
    .expertise-tab-panel .m-card:last-child { margin-bottom: 0; }
    .expertise-tab-panel .m-card > p { font-size: 12px; color: var(--text-2); line-height: 1.6; margin-bottom: 14px; margin-top: 0; }
    .expertise-tab-panel .m-card-title { margin-bottom: 6px; }
    /* Grid rows: bottom-align inputs when labels wrap differently */
    .expertise-tab-panel .m-row { align-items: end; }
    .expertise-tab-panel .m-row .m-field { display: flex; flex-direction: column; margin-bottom: 0; }
    .expertise-tab-panel .m-row .m-field .m-label { flex-shrink: 0; }
    .expertise-tab-panel .m-row .m-field .m-input,
    .expertise-tab-panel .m-row .m-field .m-select,
    .expertise-tab-panel .m-row .m-field .m-textarea { margin-top: auto; }
    /* Consistent card header rows (title + badge/button) */
    .expertise-tab-panel .m-card > div:first-child { min-height: 32px; }
    /* Card description paragraphs: consistent max height to keep cards aligned when stacked */
    .expertise-tab-panel .m-card > p:first-of-type { min-height: 0; }
    .m-save-msg { font-size: 12px; color: var(--green); opacity: 0; transition: opacity 0.3s; }
    .m-save-msg.show { opacity: 1; }
    .m-test-result { font-size: 12px; font-weight: 600; }
    .m-test-result.ok  { color: #4ade80; }
    .m-test-result.err { color: #f87171; }

    /* ── SPINNER ── */
    .spinner {
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255,255,255,0.15);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      flex-shrink: 0;
    }

    .spinner-lg { width: 40px; height: 40px; border-width: 3px; }
    .spinner-sm { width: 14px; height: 14px; display: inline-block; border: 2px solid rgba(255,255,255,0.15); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; }

    @keyframes spin { to { transform: rotate(360deg); } }

    .loading-state {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      flex-direction: column;
      gap: 16px;
      color: var(--muted);
      font-size: 14px;
    }

    /* ── EMPTY STATE ── */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }

    .empty-icon {
      width: 56px;
      height: 56px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .empty-title { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 600; margin-bottom: 6px; }
    .empty-text  { font-size: 14px; color: var(--text-2); max-width: 300px; margin-bottom: 20px; }

    /* ── SIDEBAR OVERLAY (mobile) ── */
    #sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 90;
    }

    /* ── WELCOME CARD ── */
    .welcome-card {
      background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(168,85,247,0.1));
      border: 1px solid rgba(99,102,241,0.25);
      border-radius: var(--radius);
      padding: 28px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }

    .welcome-card::after {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 180px; height: 180px;
      background: radial-gradient(circle, rgba(168,85,247,0.15), transparent 70%);
      pointer-events: none;
    }

    .welcome-greeting {
      font-family: 'DM Sans', sans-serif;
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .welcome-sub { color: var(--text-2); font-size: 14px; }

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      #sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
      }

      #sidebar.open { transform: translateX(0); }
      #sidebar-overlay.open { display: block; }
      #topbar { display: flex; }
      .page { padding: 24px 20px; }
      .pricing-grid { grid-template-columns: 1fr; }
    }

    /* Plan picker cards in Create Agent modal */
    .plan-picker-card {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px;
      border: 2px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
      background: var(--surface-2);
    }
    .plan-picker-card:hover { border-color: rgba(99,102,241,0.4); }
    .plan-picker-card.selected { border-color: var(--primary); background: rgba(99,102,241,0.06); }
    .plan-picker-dot {
      width: 16px; height: 16px;
      border-radius: 50%;
      border: 2px solid var(--border);
      flex-shrink: 0;
      margin-top: 2px;
      transition: border-color 0.15s, background 0.15s;
    }
    .plan-picker-card.selected .plan-picker-dot { border-color: var(--primary); background: var(--primary); }
    .plan-picker-name { font-weight: 600; font-size: 14px; color: var(--text); }
    .plan-picker-price { font-size: 12px; color: var(--muted); margin-left: 6px; }
    .plan-picker-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

    /* Locked feature row in flags page */
    .m-flag-row-locked {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      opacity: 0.55;
    }
    .m-flag-row-locked:last-child { border-bottom: none; }
    .m-flag-lock-label {
      font-size: 11px;
      color: var(--muted);
      margin-top: 3px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .lock-icon { font-size: 13px; }

    /* Agent plan badge on agent cards */
    .agent-plan-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background: rgba(99,102,241,0.14);
      color: #a5b4fc;
    }
    .agent-plan-badge.basic { background: rgba(122,120,136,0.18); color: var(--muted); }
    .agent-plan-badge.advanced { background: rgba(168,85,247,0.15); color: #d8b4fe; }
    button.agent-plan-badge { cursor: pointer; border: none; font-family: inherit; font-size: 11px; font-weight: 600; transition: opacity 0.15s, transform 0.1s; }
    button.agent-plan-badge:hover { opacity: 0.8; transform: scale(1.04); }
    button.agent-plan-badge.advanced { cursor: default; }
    button.agent-plan-badge.advanced:hover { opacity: 1; transform: none; }

    /* ── Broadcast banner ── */
    #broadcast-banner {
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 500;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    #broadcast-banner.sev-info { background: rgba(99,102,241,0.15); color: #a5b4fc; border-bottom: 1px solid rgba(99,102,241,0.3); }
    #broadcast-banner.sev-warning { background: rgba(234,179,8,0.12); color: #fbbf24; border-bottom: 1px solid rgba(234,179,8,0.3); }
    #broadcast-banner.sev-critical { background: rgba(239,68,68,0.12); color: #fca5a5; border-bottom: 1px solid rgba(239,68,68,0.3); }
    #broadcast-banner .dismiss-btn {
      background: none; border: none; cursor: pointer; color: inherit; opacity: 0.6; padding: 2px;
      font-size: 16px; line-height: 1;
    }
    #broadcast-banner .dismiss-btn:hover { opacity: 1; }

    /* ── Storage indicator ── */
    .storage-indicator {
      margin-top: 8px;
      padding: 8px 10px;
      background: var(--hover-bg);
      border-radius: 8px;
      border: 1px solid var(--border);
    }
    .storage-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }
    .storage-label { font-size: 11px; color: var(--text-2); font-weight: 500; }
    .storage-value { font-size: 11px; font-weight: 600; font-family: 'DM Sans', sans-serif; }
    .storage-value.green { color: #22c55e; }
    .storage-value.yellow { color: #eab308; }
    .storage-value.red { color: #ef4444; }
    .storage-bar {
      width: 100%;
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
    }
    .storage-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.4s ease;
    }
    .storage-bar-fill.green { background: #22c55e; }
    .storage-bar-fill.yellow { background: #eab308; }
    .storage-bar-fill.red { background: #ef4444; }
    .storage-manage-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 6px;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 500;
      color: var(--text-2);
      background: none;
      border: 1px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
      font-family: inherit;
      transition: color 0.15s, border-color 0.15s;
    }
    .storage-manage-btn:hover { color: var(--text); border-color: var(--text-2); }

    /* ── Storage modal ── */
    #storage-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #storage-modal-overlay.open { display: flex; }
    .storage-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px;
      max-width: 480px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
    }
    .storage-modal h3 { margin: 0 0 16px; font-size: 17px; font-weight: 600; }
    .storage-breakdown { margin-bottom: 16px; }
    .storage-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 13px;
    }
    .storage-row:last-child { border-bottom: none; }
    .storage-row-label { color: var(--text-2); }
    .storage-row-value { font-weight: 600; font-family: 'DM Sans', sans-serif; }
    .storage-action-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px 12px;
      margin-bottom: 8px;
      background: var(--hover-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      color: var(--text);
      transition: border-color 0.15s;
    }
    .storage-action-btn:hover { border-color: var(--primary); }
    .storage-action-btn .action-label { font-weight: 500; }
    .storage-action-btn .action-size { font-size: 12px; color: var(--text-2); }
    .storage-action-btn .action-delete { color: #ef4444; font-size: 12px; font-weight: 600; }

    /* ── Upgrade modal ── */
    #upgrade-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #upgrade-modal-overlay.open { display: flex; }
    .upgrade-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 32px;
      width: 100%;
      max-width: 460px;
    }
    .upgrade-modal-title {
      font-family: 'DM Sans', sans-serif;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .upgrade-modal-sub {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 24px;
    }
    .upgrade-plan-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .upgrade-plan-box {
      flex: 1;
      background: var(--hover-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      text-align: center;
    }
    .upgrade-plan-box.target { border-color: var(--primary); background: rgba(99,102,241,0.06); }
    .upgrade-plan-name { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
    .upgrade-plan-price { font-size: 22px; font-weight: 700; color: var(--primary); }
    .upgrade-plan-price span { font-size: 13px; font-weight: 400; color: var(--muted); }
    .upgrade-arrow { color: var(--muted); flex-shrink: 0; }
    .upgrade-features-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
    .upgrade-feature-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
    .upgrade-feature-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
    .upgrade-feature-list li svg { flex-shrink: 0; color: var(--green); }
    .upgrade-confirm-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: var(--hover-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 20px;
      cursor: pointer;
    }
    .upgrade-confirm-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; accent-color: var(--primary); cursor: pointer; }
    .upgrade-confirm-text { font-size: 13px; color: var(--text-2); line-height: 1.5; }
    .upgrade-confirm-text strong { color: var(--text); }
    .upgrade-actions { display: flex; gap: 10px; }
    .upgrade-actions .btn { flex: 1; }
    #upgrade-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ── SETUP PROGRESS ── */
    #manage-setup-progress {
      padding: 6px 12px 10px;
    }
    .setup-progress-bar {
      height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-bottom: 6px;
    }
    .setup-progress-fill {
      height: 100%; border-radius: 2px; transition: width 0.4s ease, background 0.3s;
    }
    .setup-progress-text {
      font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px;
    }
    .setup-progress-text a {
      color: var(--primary); text-decoration: none; font-size: 11px;
    }
    .setup-progress-text a:hover { text-decoration: underline; }
    .setup-missing-list {
      margin-top: 4px; display: flex; flex-direction: column; gap: 2px;
    }
    .setup-missing-list a {
      font-size: 11px; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 4px;
    }
    .setup-missing-list a:hover { text-decoration: underline; }

    /* ── TOOLTIPS ── */
    /* Trigger is a <button> so it's keyboard- and touch-accessible. */
    .tooltip-trigger {
      display: inline-flex; align-items: center; cursor: help;
      background: none; border: 0; padding: 0; margin: 0;
      color: inherit; font: inherit; line-height: 0;
      position: relative; vertical-align: middle;
    }
    .tooltip-trigger .tooltip-icon {
      width: 14px; height: 14px; margin-left: 4px; opacity: 0.4;
      transition: opacity 0.15s; flex-shrink: 0;
    }
    .tooltip-trigger:hover .tooltip-icon,
    .tooltip-trigger:focus-visible .tooltip-icon,
    .tooltip-trigger.tooltip-open .tooltip-icon { opacity: 0.85; }
    .tooltip-trigger:focus-visible {
      outline: none;
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45);
    }
    .tooltip-trigger .tooltip-text {
      display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
      background: var(--surface-2); border: 1px solid var(--overlay-border);
      color: var(--text-2); font-size: 12px; font-weight: 400; line-height: 1.5;
      padding: 8px 12px; border-radius: 8px; width: max-content; max-width: 260px;
      z-index: 100; pointer-events: none; box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.3));
      text-transform: none; letter-spacing: normal; white-space: normal;
    }
    .tooltip-trigger:hover .tooltip-text,
    .tooltip-trigger:focus-visible .tooltip-text,
    .tooltip-trigger.tooltip-open .tooltip-text { display: block; }

    /* Help Assistant */
    #help-fab {
      position: fixed; bottom: 24px; right: 24px; z-index: 900;
      width: 52px; height: 52px; border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(99,102,241,0.4);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    #help-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(99,102,241,0.5); }
    #help-fab svg { color: #fff; }

    #help-panel {
      position: fixed; top: 0; right: -400px; bottom: 0; width: 380px;
      background: var(--bg, #09090e); border-left: 1px solid var(--border);
      z-index: 950; display: flex; flex-direction: column;
      transition: right 0.3s ease;
      box-shadow: -4px 0 20px rgba(0,0,0,0.3);
    }
    #help-panel.open { right: 0; }

    #help-panel-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.3);
      z-index: 940; display: none;
    }
    #help-panel-overlay.open { display: block; }

    .help-header {
      padding: 16px 20px; border-bottom: 1px solid var(--border);
      display: flex; align-items: flex-start; justify-content: space-between;
      flex-shrink: 0;
    }

    .help-messages {
      flex: 1; overflow-y: auto; padding: 16px 20px;
      display: flex; flex-direction: column; gap: 12px;
    }

    .help-msg {
      max-width: 90%; padding: 10px 14px; border-radius: 12px;
      font-size: 13px; line-height: 1.6; word-wrap: break-word;
    }
    .help-msg.user {
      align-self: flex-end; background: var(--primary, #6366f1); color: #fff;
      border-bottom-right-radius: 4px;
    }
    .help-msg.assistant {
      align-self: flex-start; background: var(--surface, #13131f);
      border: 1px solid var(--border); color: var(--text-2, #c2c0d4);
      border-bottom-left-radius: 4px;
    }
    .help-msg.assistant strong { color: var(--text, #f2f0ff); }

    .help-input-wrap {
      padding: 12px 16px; border-top: 1px solid var(--border);
      display: flex; gap: 8px; flex-shrink: 0;
    }
    .help-input-wrap input {
      flex: 1; padding: 10px 14px; background: var(--surface, #13131f);
      border: 1px solid var(--border); border-radius: 8px;
      color: var(--text, #f2f0ff); font-size: 13px; outline: none;
      font-family: inherit;
    }
    .help-input-wrap input:focus { border-color: rgba(99,102,241,0.5); }
    .help-input-wrap button {
      padding: 8px 14px; background: var(--primary, #6366f1);
      border: none; border-radius: 8px; color: #fff; cursor: pointer;
      font-size: 13px; font-weight: 500; white-space: nowrap;
      transition: opacity 0.15s;
    }
    .help-input-wrap button:disabled { opacity: 0.4; cursor: not-allowed; }

    .help-welcome {
      text-align: center; padding: 24px 16px 8px; color: var(--muted, #7a7888);
    }
    .help-welcome-icon {
      width: 48px; height: 48px; border-radius: 14px;
      background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(168,85,247,0.15));
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 14px;
    }
    .help-suggestions {
      padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 6px;
    }
    .help-suggestion {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; background: var(--surface, #13131f);
      border: 1px solid var(--border); border-radius: 10px;
      cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s;
      font-family: inherit; width: 100%;
    }
    .help-suggestion:hover {
      border-color: rgba(99,102,241,0.35); background: rgba(99,102,241,0.04);
    }
    .help-suggestion-icon {
      width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .help-suggestion-text {
      font-size: 13px; font-weight: 500; color: var(--text, #f2f0ff); line-height: 1.3;
    }
    .help-suggestion-sub {
      font-size: 11px; color: var(--muted, #7a7888); margin-top: 2px; font-weight: 400;
    }

    /* Help markdown rendering */
    .help-md-h {
      font-size: 13px; font-weight: 700; color: var(--text, #f2f0ff);
      margin: 8px 0 4px; font-family: 'DM Sans', system-ui, sans-serif;
    }
    .help-md-p { margin: 0 0 4px; }
    .help-md-list {
      margin: 4px 0 8px; padding-left: 18px;
      display: flex; flex-direction: column; gap: 3px;
    }
    .help-md-list li { line-height: 1.5; }
    .help-md-list li::marker { color: var(--primary, #6366f1); }
    .help-md-code {
      background: var(--hover-bg); padding: 1px 5px;
      border-radius: 3px; font-size: 12px; font-family: 'SF Mono', Menlo, monospace;
    }
    .help-code-block {
      background: var(--bg, #09090e); border: 1px solid var(--border);
      border-radius: 6px; padding: 10px 12px; margin: 6px 0;
      overflow-x: auto; font-size: 12px; line-height: 1.5;
      font-family: 'SF Mono', Menlo, monospace;
    }
    .help-code-block code { background: none; padding: 0; }
    .help-msg.assistant strong { color: var(--text, #f2f0ff); }
    .help-msg.assistant a { color: var(--primary, #6366f1); }

    @media (max-width: 480px) {
      #help-panel { width: 100%; right: -100%; }
    }