/* DialClient design tokens — light (default) + dark */
:root {
  --bg: #f6f7fb;
  --bg-soft: #eef0f7;
  --surface: #ffffff;
  --surface-2: #f9fafc;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --border: #e5e7ef;
  --border-strong: #d4d8e4;
  --primary: #4f46e5;
  --primary-ink: #ffffff;
  --primary-soft: #eef2ff;
  --primary-text: #4338ca;
  --accent: #0ea5e9;
  --success: #059669;
  --success-soft: #ecfdf5;
  --warn: #d97706;
  --warn-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .12);
  --shadow-lg: 0 24px 60px -24px rgba(30, 27, 75, .28);
  --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(99, 102, 241, .16), transparent 70%);
  --radius: 14px;
  --radius-sm: 10px;
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d14; --bg-soft: #11141e; --surface: #141824; --surface-2: #181d2b;
    --ink: #eef1f8; --ink-2: #c8cede; --muted: #8b93a7; --faint: #5d6579;
    --border: #232a3a; --border-strong: #2f3749;
    --primary: #6d67f5; --primary-ink: #ffffff; --primary-soft: rgba(109, 103, 245, .16); --primary-text: #a5a1ff;
    --accent: #38bdf8; --success: #34d399; --success-soft: rgba(52, 211, 153, .12);
    --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .12); --danger: #f87171; --danger-soft: rgba(248, 113, 113, .12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);
    --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(109, 103, 245, .22), transparent 70%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0d14; --bg-soft: #11141e; --surface: #141824; --surface-2: #181d2b;
  --ink: #eef1f8; --ink-2: #c8cede; --muted: #8b93a7; --faint: #5d6579;
  --border: #232a3a; --border-strong: #2f3749;
  --primary: #6d67f5; --primary-ink: #ffffff; --primary-soft: rgba(109, 103, 245, .16); --primary-text: #a5a1ff;
  --accent: #38bdf8; --success: #34d399; --success-soft: rgba(52, 211, 153, .12);
  --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .12); --danger: #f87171; --danger-soft: rgba(248, 113, 113, .12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);
  --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(109, 103, 245, .22), transparent 70%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; transition: background .2s, color .2s;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--primary-soft); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: all .15s;
}
.btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 18px -8px var(--primary); }
.btn-primary:hover { background: var(--primary); filter: brightness(1.08); border-color: var(--primary); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn-icon { width: 38px; padding: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--border);
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #6366f1, #0ea5e9); box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .6);
}
.logo b { color: var(--primary-text); font-weight: 800; }

.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

.input, .select, .textarea {
  height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  outline: none; transition: border-color .15s, box-shadow .15s; min-width: 0;
}
.textarea { height: auto; padding: 12px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }