:root {
  color-scheme: light;
  --primary: #2e6ff2;
  --ink: #111827;
  --muted: #6b7280;
  --canvas: #f3f4f6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.app-shell { min-width: 1180px; }
.sidebar-scroll { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.scroll-thin { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
.section-anchor { scroll-margin-top: 92px; }
.soft-shadow { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05); }
.focus-ring:focus { outline: 3px solid rgba(46, 111, 242, .18); border-color: var(--primary); }
.waveform { display: flex; align-items: center; gap: 2px; height: 38px; overflow: hidden; }
.waveform span { width: 3px; border-radius: 999px; background: #93c5fd; }
.waveform span.played { background: var(--primary); }
.drag-grid { background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 14px 14px; }
.checker { background-image: linear-gradient(45deg,#f8fafc 25%,transparent 25%),linear-gradient(-45deg,#f8fafc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f8fafc 75%),linear-gradient(-45deg,transparent 75%,#f8fafc 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Shared application pages */
.page-shell { min-width: 1180px; }
.app-card { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05); }
.field { width: 100%; height: 40px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; padding: 0 12px; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.field:focus { border-color: #2e6ff2; box-shadow: 0 0 0 3px rgba(46,111,242,.12); }
textarea.field { height: auto; padding-top: 10px; padding-bottom: 10px; resize: vertical; }
.label { display: block; margin-bottom: 7px; color: #334155; font-size: 12px; font-weight: 600; }
.btn-primary,.btn-secondary,.btn-danger,.btn-ghost { display: inline-flex; height: 40px; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 0 14px; font-size: 13px; font-weight: 600; transition: background .15s,border-color .15s,color .15s; }
.btn-primary { background:#2e6ff2;color:#fff; }
.btn-primary:hover { background:#245ed1; }
.btn-secondary { border:1px solid #cbd5e1;background:#fff;color:#334155; }
.btn-secondary:hover,.btn-ghost:hover { background:#f8fafc; }
.btn-danger { background:#dc2626;color:#fff; }
.btn-ghost { color:#475569; }
.nav-link { display:flex;align-items:center;gap:12px;border-radius:8px;padding:10px 12px;color:#cbd5e1;font-size:13px;font-weight:500;white-space:nowrap; }
.nav-link:hover { background:rgba(255,255,255,.06);color:#fff; }
.nav-link.active { background:#2e6ff2;color:#fff;box-shadow:0 4px 14px rgba(46,111,242,.25); }
.nav-link svg { width:18px;height:18px;flex:none; }
.toggle { position:relative;display:inline-flex;height:24px;width:44px;flex:none;border-radius:999px;background:#cbd5e1;transition:background .2s; }
.toggle::after { content:"";position:absolute;left:4px;top:4px;height:16px;width:16px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s; }
input:checked + .toggle { background:#2e6ff2; }
input:checked + .toggle::after { transform:translateX(20px); }
.modal-backdrop { position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.55);padding:24px;backdrop-filter:blur(2px); }
.modal-backdrop.open { display:flex; }
.drawer { position:fixed;right:0;top:0;z-index:70;height:100vh;width:560px;max-width:92vw;transform:translateX(100%);background:#fff;box-shadow:-20px 0 50px rgba(15,23,42,.18);transition:transform .25s; }
.drawer.open { transform:translateX(0); }
.drawer-scrim { position:fixed;inset:0;z-index:65;display:none;background:rgba(15,23,42,.45); }
.drawer-scrim.open { display:block; }
.toast { position:fixed;right:24px;top:96px;z-index:90;display:none;width:360px;border:1px solid #bbf7d0;border-radius:12px;background:white;padding:16px;box-shadow:0 16px 40px rgba(15,23,42,.16); }
.toast.show { display:flex; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.step-panel { display:none; }
.step-panel.active { display:block; }
.chart-grid { background-image:linear-gradient(to bottom,#e2e8f0 1px,transparent 1px);background-size:100% 25%; }
.bar { border-radius:5px 5px 0 0;background:linear-gradient(180deg,#4f83f5,#2e6ff2); }
.status-pulse { animation:pulse-ring 2s infinite; }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.dragging { opacity: .45; transform: rotate(1deg); }
.kanban-dropzone.drag-over { outline: 2px dashed #2e6ff2; outline-offset: 4px; border-radius: 10px; }
.softphone-demo { position:fixed;right:24px;bottom:24px;z-index:55;width:390px;border:1px solid #bfdbfe;border-radius:16px;background:#fff;box-shadow:0 20px 55px rgba(15,23,42,.2); }
.sidebar-scroll,.ml-60,header.fixed { transition:width .2s,left .2s,margin-left .2s; }
.sidebar-toggle { position:fixed;left:216px;top:88px;z-index:45;display:grid;width:32px;height:32px;place-items:center;border:1px solid #334155;border-radius:9px;background:#0f172a;color:#cbd5e1;box-shadow:0 8px 24px rgba(15,23,42,.18);transition:left .2s,background .15s; }
.sidebar-toggle:hover { background:#1e293b;color:#fff; }
.sidebar-toggle svg { width:16px;height:16px; }
.sidebar-collapsed .sidebar-scroll { width:72px!important;overflow-x:hidden; }
.sidebar-collapsed .sidebar-toggle { left:56px; }
.sidebar-collapsed #app-sidebar + .ml-60,.sidebar-collapsed > .ml-60 { margin-left:72px!important; }
.sidebar-collapsed header.fixed { left:72px!important; }
.sidebar-collapsed .sidebar-scroll > div:first-child { justify-content:center;padding-left:0;padding-right:0; }
.sidebar-collapsed .sidebar-scroll > div:first-child > div { display:none; }
.sidebar-collapsed .sidebar-scroll nav { padding-left:10px;padding-right:10px; }
.sidebar-collapsed .sidebar-scroll nav a { justify-content:center;gap:0;padding-left:0;padding-right:0;font-size:0; }
.sidebar-collapsed .sidebar-scroll nav a > span { display:none; }
.sidebar-collapsed .sidebar-scroll > div:last-of-type { padding-left:10px;padding-right:10px; }
.sidebar-collapsed .sidebar-scroll > div:last-of-type > div { justify-content:center;padding-left:0;padding-right:0; }
.sidebar-collapsed .sidebar-scroll > div:last-of-type > div > span:not(:first-child),.sidebar-collapsed .sidebar-scroll > div:last-of-type svg { display:none; }
.global-softphone { position:fixed;right:24px;bottom:24px;z-index:58;width:350px;overflow:hidden;border:1px solid #bfdbfe;border-radius:16px;background:#fff;box-shadow:0 20px 55px rgba(15,23,42,.2);font-size:13px; }
.global-softphone-bar { display:flex;width:100%;height:58px;align-items:center;gap:10px;padding:0 14px;background:#fff;color:#0f172a;text-align:left; }
.global-softphone-bar > span:nth-child(2) { min-width:0;flex:1; }
.global-softphone-bar b,.global-softphone-bar small,.softphone-contact b,.softphone-contact small { display:block; }
.global-softphone-bar small,.softphone-contact small { margin-top:2px;color:#64748b;font-size:11px; }
.global-softphone-bar svg { width:16px;height:16px;color:#64748b; }
.softphone-status-dot { width:9px;height:9px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 4px #dcfce7; }
.global-softphone-panel { display:none;border-top:1px solid #e2e8f0; }
.global-softphone.open .global-softphone-panel { display:block; }
.softphone-contact { display:flex;align-items:center;gap:10px;padding:14px; }
.softphone-contact > span:nth-child(2) { min-width:0;flex:1; }
.softphone-avatar { display:grid;width:38px;height:38px;place-items:center;border-radius:999px;background:#dbeafe;color:#2e6ff2;font-weight:700; }
.softphone-contact strong { color:#047857;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px; }
.softphone-actions { display:flex;align-items:center;justify-content:center;gap:9px;padding:0 14px 14px; }
.softphone-actions button { display:inline-flex;height:38px;align-items:center;justify-content:center;gap:7px;border:1px solid #cbd5e1;border-radius:999px;padding:0 11px;color:#334155; }
.softphone-actions button svg { width:16px;height:16px; }
.softphone-actions button.active { border-color:#2e6ff2;background:#eff6ff;color:#2e6ff2; }
.softphone-actions .softphone-call { min-width:96px;border-color:#16a34a;background:#16a34a;color:#fff;font-weight:600; }
.softphone-actions .softphone-call.is-ending { border-color:#dc2626;background:#dc2626; }
.global-softphone.in-call .softphone-status-dot { background:#f97316;box-shadow:0 0 0 4px #ffedd5; }
body:has(.softphone-demo:not(.hidden)) .global-softphone { display:none; }
@keyframes pulse-ring { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.25)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,0)} }
@media (max-width: 1280px) { .page-main { padding-left:20px;padding-right:20px; } }