/* SPH Media — Enterprise UI Prototype · Single Design System */
:root {
  --sph-50: #E8F2FA;
  --sph-100: #C5DFF5;
  --sph-500: #0057A8;
  --sph-600: #004A8F;
  --sph-700: #003D73;
  --sph-900: #071525;
  --gray-25: #FCFCFD;
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-900: #0F172A;
  --success-50: #ECFDF5;
  --success-600: #059669;
  --warning-50: #FFFBEB;
  --warning-600: #D97706;
  --danger-50: #FEF2F2;
  --danger-600: #DC2626;
  --wa-header: #075E54;
  --wa-header-light: #128C7E;
  --wa-bg: #E5DDD5;
  --wa-bubble-out: #D9FDD3;
  --wa-bubble-in: #FFFFFF;
  --wa-accent: #25D366;
  --sn-bar: #293E40;
  --sn-accent: #62D84E;
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 40px rgba(15,23,42,.12);
  --shadow-phone: 0 32px 64px rgba(7,21,37,.22);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.proto { font-family: var(--font); font-size: var(--text-base); line-height: 1.5; color: var(--gray-900); background: var(--gray-100); -webkit-font-smoothing: antialiased; }
.ico { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.ico-sm { width: 14px; height: 14px; }
.ico-lg { width: 20px; height: 20px; }

.shell-hd { position: sticky; top: 0; z-index: 100; background: var(--gray-25); border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-xs); }
.shell-hd-in { max-width: 1560px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shell-brand { display: flex; align-items: center; gap: 16px; }
.shell-brand > img { height: 40px; }
.sph-logo-mark { height: 28px; width: auto; display: block; object-fit: contain; flex-shrink: 0; }
.sph-logo-mark--sm { height: 22px; }
.wa-hd-av-sph { background: #000; padding: 5px; }
.wa-hd-av-sph .sph-logo-mark { width: 30px; height: auto; }
.shell-brand h1 { font-size: var(--text-lg); font-weight: 700; color: var(--sph-700); }
.shell-brand p { font-size: var(--text-xs); color: var(--gray-500); margin-top: 2px; }

.shell-main .btn,
.modal-overlay .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-md); font-family: var(--font); font-size: var(--text-sm); font-weight: 600; border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); text-decoration: none; cursor: pointer;
}
.shell-main .btn:hover,
.modal-overlay .btn:hover { border-color: var(--sph-500); color: var(--sph-500); }
.shell-main .btn-primary,
.modal-overlay .btn-primary { background: var(--sph-500); border-color: var(--sph-500); color: #fff; }
.shell-main .btn-primary:hover,
.modal-overlay .btn-primary:hover { background: var(--sph-600); border-color: var(--sph-600); color: #fff; }
.shell-main .btn-sm,
.modal-overlay .btn-sm { padding: 6px 12px; font-size: var(--text-xs); }

.iface-bar { background: var(--sph-900); }
.iface-bar-in { max-width: 1560px; margin: 0 auto; display: flex; gap: 2px; padding: 0 24px; overflow-x: auto; }
.iface-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; border: none; background: transparent; color: rgba(255,255,255,.55); font-family: var(--font); font-size: var(--text-sm); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.iface-btn.on { color: #fff; border-bottom-color: var(--sph-100); }
.shell-body { max-width: 1560px; margin: 0 auto; padding: 24px; }

.hero { background: linear-gradient(135deg, var(--sph-700), var(--sph-500)); border-radius: var(--radius-xl); padding: 24px 32px; color: #fff; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border-radius: 20px; padding: 4px 12px; font-size: var(--text-xs); font-weight: 600; margin-bottom: 8px; }
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; }
.hero h2 { font-size: var(--text-2xl); font-weight: 700; }
.hero p { font-size: var(--text-sm); opacity: .88; margin-top: 4px; max-width: 560px; }
.hero .btn { background: #fff; border-color: #fff; color: var(--sph-700); }

.panel { display: none; }
.panel.on { display: block; animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.sub-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; }
@media (max-width: 1024px) { .sub-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-hd { padding: 16px 20px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.card-hd h3 { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); }
.card-bd { padding: 12px; }
.journey-btn { display: block; width: 100%; text-align: left; padding: 16px; margin-bottom: 4px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; font-family: var(--font); cursor: pointer; }
.journey-btn:hover { background: var(--gray-50); border-color: var(--gray-200); }
.journey-btn.on { background: var(--sph-50); border-color: var(--sph-500); }
.journey-btn .jt { font-size: var(--text-sm); font-weight: 600; }
.journey-btn .jm { font-size: var(--text-xs); color: var(--gray-500); margin-top: 3px; }
.journey-btn .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pill { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--gray-100); color: var(--gray-600); }
.journey-btn.on .pill { background: rgba(0,87,168,.12); color: var(--sph-600); }
.journey-foot { padding: 16px 20px; border-top: 1px solid var(--gray-100); font-size: var(--text-xs); color: var(--gray-500); line-height: 1.6; }
.journey-foot strong { display: block; color: var(--gray-700); margin-bottom: 4px; font-size: var(--text-sm); }
.steps { list-style: none; margin-top: 12px; }
.steps li { padding: 6px 0 6px 22px; position: relative; border-left: 2px solid var(--gray-200); font-size: var(--text-xs); }
.steps li::before { content: attr(data-n); position: absolute; left: -8px; top: 5px; width: 14px; height: 14px; background: var(--sph-500); color: #fff; border-radius: 50%; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.phone-outer { display: flex; justify-content: center; padding: 8px 0 32px; }
.phone { width: 390px; max-width: 100%; background: #1c1c1e; border-radius: 44px; padding: 12px; box-shadow: var(--shadow-phone); }
.phone-in { background: var(--wa-bg); border-radius: 36px; overflow: hidden; height: 780px; display: flex; flex-direction: column; }
.phone-status { display: flex; justify-content: space-between; padding: 10px 22px 4px; font-size: 12px; font-weight: 600; color: #fff; background: var(--wa-header); }
.phone-notch { height: 28px; background: var(--wa-header); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 2px; }
.phone-notch span { width: 90px; height: 22px; background: #1c1c1e; border-radius: 14px; }

.wa-hd { background: var(--wa-header); color: #fff; padding: 6px 10px 10px; display: flex; align-items: center; gap: 10px; }
.wa-hd-back { background: none; border: none; color: #fff; padding: 4px; cursor: pointer; display: flex; }
.wa-hd-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.wa-hd-av img { width: 28px; height: 28px; }
.wa-hd-info { flex: 1; }
.wa-hd-info h4 { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.wa-hd-info p { font-size: 12px; opacity: .85; }
.wa-hd-verified { width: 14px; height: 14px; }
.wa-hd-actions { display: flex; gap: 16px; }
.wa-hd-actions button { background: none; border: none; color: #fff; padding: 4px; cursor: pointer; display: flex; }

.wa-msgs { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background-color: var(--wa-bg); }
.wa-day { align-self: center; background: rgba(255,255,255,.92); padding: 5px 12px; border-radius: 8px; font-size: 11px; color: var(--gray-500); margin: 8px 0; }
.wa-row { max-width: 82%; }
.wa-row.out { align-self: flex-end; }
.wa-row.in { align-self: flex-start; }
.wa-bub { padding: 7px 9px 5px; border-radius: 8px; font-size: 14.2px; line-height: 1.45; box-shadow: 0 1px .5px rgba(0,0,0,.08); }
.wa-row.in .wa-bub { background: var(--wa-bubble-in); border-top-left-radius: 0; }
.wa-row.out .wa-bub { background: var(--wa-bubble-out); border-top-right-radius: 0; }
.wa-bub.tpl { border-left: 3px solid var(--wa-header-light); }
.wa-meta { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 10px; color: var(--gray-500); margin-top: 3px; }
.wa-meta .ticks { color: #53bdeb; display: flex; }
.wa-sys { align-self: center; max-width: 92%; text-align: center; font-size: 11px; color: var(--gray-500); background: rgba(255,255,255,.9); padding: 6px 12px; border-radius: 8px; margin: 6px 0; }
.wa-link { margin-top: 8px; border-radius: 8px; overflow: hidden; border: 1px solid var(--gray-200); background: #fff; }
.wa-link .dom { font-size: 11px; color: var(--wa-header-light); padding: 8px 10px 0; }
.wa-link .ttl { font-size: 13px; font-weight: 600; padding: 2px 10px 10px; }
.wa-qr { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wa-qr button { padding: 7px 14px; border: 1px solid var(--wa-header-light); border-radius: 20px; background: #fff; color: var(--wa-header); font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font); }
.wa-csat { display: flex; gap: 6px; margin-top: 10px; }
.wa-csat button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--wa-header-light); background: #fff; font-weight: 600; cursor: pointer; font-family: var(--font); }
.wa-csat button.on { background: var(--wa-header-light); color: #fff; }
.wa-typing { align-self: flex-start; background: #fff; padding: 10px 14px; border-radius: 8px; display: flex; gap: 4px; }
.wa-typing i { width: 7px; height: 7px; background: var(--gray-400); border-radius: 50%; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,70%,100%{opacity:.35} 35%{opacity:1;transform:translateY(-3px)} }
.wa-compose { background: #F0F2F5; padding: 6px 8px 12px; display: flex; align-items: flex-end; gap: 6px; }
.wa-compose button.icon-btn { background: none; border: none; color: var(--gray-500); padding: 8px; cursor: pointer; display: flex; }
.wa-compose input { flex: 1; border: none; border-radius: 22px; padding: 10px 14px; font-size: 15px; font-family: var(--font); outline: none; background: #fff; }
.wa-compose .send { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--wa-header-light); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.sn-app { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); min-height: 760px; display: flex; flex-direction: column; }
.sn-global { background: var(--sn-bar); color: #fff; height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); }
.sn-global-l { display: flex; align-items: center; gap: 16px; }
.sn-global-l img { height: auto; filter: none; }
.sn-tag { background: var(--sn-accent); color: #000; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.sn-tabs { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); padding: 8px 16px; display: flex; gap: 4px; }
.sn-tab { padding: 6px 14px; border-radius: var(--radius-sm); border: none; font-family: var(--font); font-size: var(--text-xs); font-weight: 600; background: transparent; color: var(--gray-500); cursor: pointer; }
.sn-tab.on { background: #fff; color: var(--gray-900); box-shadow: var(--shadow-xs); }
.sn-grid { display: grid; grid-template-columns: 272px 1fr 300px; flex: 1; min-height: 660px; }
.sn-list { border-right: 1px solid var(--gray-200); background: var(--gray-50); }
.sn-list-hd { padding: 12px 16px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--gray-500); border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; }
.sn-list-hd .badge { background: var(--danger-600); color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 10px; }
.sn-item { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); cursor: pointer; }
.sn-item:hover, .sn-item.on { background: var(--sph-50); }
.sn-item.on { border-left: 3px solid var(--sph-500); }
.sn-ch { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--wa-header-light); }
.sn-ch .ico { width: 12px; height: 12px; color: var(--wa-accent); }
.sn-subj { font-size: var(--text-sm); font-weight: 600; margin: 4px 0 2px; }
.sn-foot { font-size: 10px; color: var(--gray-500); display: flex; justify-content: space-between; }
.sn-sla { color: var(--danger-600); font-weight: 600; }
.sn-main { display: flex; flex-direction: column; border-right: 1px solid var(--gray-200); }
.sn-case-hd { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); }
.sn-case-hd h3 { font-size: var(--text-lg); font-weight: 700; }
.sn-handoff { margin: 12px 20px 0; padding: 12px; background: var(--warning-50); border: 1px solid #FDE68A; border-radius: var(--radius-md); font-size: var(--text-xs); }
.sn-handoff strong { display: block; font-size: 10px; text-transform: uppercase; color: var(--warning-600); margin-bottom: 4px; }
.sn-thread { flex: 1; padding: 16px 20px; overflow-y: auto; background: var(--gray-50); display: flex; flex-direction: column; gap: 10px; }
.sn-bub { max-width: 78%; padding: 10px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); }
.sn-bub .who { font-size: 10px; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; opacity: .65; }
.sn-bub.c { align-self: flex-start; background: #fff; border: 1px solid var(--gray-200); }
.sn-bub.a { align-self: flex-start; background: var(--success-50); border: 1px solid #A7F3D0; }
.sn-bub.ag { align-self: flex-end; background: var(--sph-50); border: 1px solid var(--sph-100); }
.sn-bub.sys { align-self: center; font-size: var(--text-xs); color: var(--gray-500); text-align: center; }
.sn-reply-bar { padding: 12px 20px; border-top: 1px solid var(--gray-200); display: flex; gap: 8px; background: #fff; }
.sn-reply-bar textarea { flex: 1; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 10px; font-family: var(--font); font-size: var(--text-sm); resize: none; height: 60px; outline: none; }
.sn-reply-bar .send { padding: 10px 18px; background: var(--sn-accent); border: none; border-radius: var(--radius-md); font-weight: 700; cursor: pointer; font-family: var(--font); }
.sn-side { padding: 16px; background: var(--gray-50); overflow-y: auto; }
.sn-side h4 { font-size: 10px; text-transform: uppercase; color: var(--gray-500); margin-bottom: 12px; font-weight: 700; }
.field { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.field label { display: block; font-size: 10px; color: var(--gray-500); text-transform: uppercase; margin-bottom: 2px; }
.field .val { font-size: var(--text-sm); font-weight: 600; }
.pci-box { background: var(--danger-50); border: 1px solid #FECACA; border-radius: var(--radius-md); padding: 12px; margin: 12px 0; font-size: var(--text-xs); }
.pci-box code { background: #fff; padding: 2px 6px; border-radius: 4px; color: var(--danger-600); font-size: 10px; }

.admin { display: grid; grid-template-columns: 252px 1fr; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); min-height: 840px; }
.admin-side { background: var(--sph-900); display: flex; flex-direction: column; min-height: 0; }
.admin-side-brand { padding: 20px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-side-brand .sph-logo-mark { height: 22px; width: auto; max-width: 120px; object-fit: contain; margin-bottom: 8px; }
.admin-side-brand .sub { font-size: var(--text-xs); color: rgba(255,255,255,.65); font-weight: 600; }
.admin-side-brand .url { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 6px; font-family: monospace; }
.admin-nav { flex: 1; padding: 8px 0; display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.admin-nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px; border: none; background: transparent; color: rgba(255,255,255,.6); font-family: var(--font); font-size: var(--text-sm); text-align: left; cursor: pointer; flex-shrink: 0; line-height: 1.2; white-space: nowrap; }
.admin-nav button svg { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.admin-nav button.on { background: rgba(0,87,168,.4); color: #fff; font-weight: 600; border-left: 3px solid var(--sph-100); }
.admin-side-ft { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 10px; color: rgba(255,255,255,.35); }
.admin-main { display: flex; flex-direction: column; background: var(--gray-50); }
.admin-bar { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.admin-bar h2 { font-size: var(--text-xl); font-weight: 700; color: var(--sph-700); }
.admin-bar-r { display: flex; align-items: center; gap: 8px; }
.select { padding: 7px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: var(--text-xs); font-family: var(--font); background: #fff; }
.env-toggle { display: flex; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; }
.env-toggle button { padding: 6px 12px; border: none; background: #fff; font-family: var(--font); font-size: var(--text-xs); font-weight: 600; color: var(--gray-500); cursor: pointer; }
.env-toggle button.on { background: var(--sph-500); color: #fff; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--gray-200); border-radius: 20px; background: #fff; font-size: var(--text-xs); font-weight: 600; }
.user-chip .av { width: 28px; height: 28px; border-radius: 50%; background: var(--sph-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.admin-page { flex: 1; padding: 20px 24px 32px; overflow-y: auto; }
.view { display: none; }
.view.on { display: block; }
.lbl { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); margin-bottom: 12px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; position: relative; overflow: hidden; }
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sph-500); }
.kpi .v { font-size: 28px; font-weight: 800; color: var(--sph-700); }
.kpi .l { font-size: var(--text-xs); color: var(--gray-500); margin-top: 6px; }
.kpi .d { font-size: 11px; font-weight: 600; margin-top: 8px; }
.kpi .d.up { color: var(--success-600); }
.kpi .d.down { color: var(--danger-600); }
.charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 20px; }
.chart-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; }
.chart-card h4 { font-size: var(--text-sm); font-weight: 600; color: var(--gray-600); margin-bottom: 16px; }
.status-row { display: flex; flex-wrap: wrap; gap: 16px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 16px 20px; }
.status-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; }
.status-item .dot { width: 8px; height: 8px; border-radius: 50%; }
.status-item .dot.ok { background: var(--success-600); }
.status-item .dot.warn { background: var(--warning-600); }
.tbl-wrap { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tbl th { text-align: left; padding: 10px 14px; font-size: 10px; text-transform: uppercase; color: var(--gray-500); background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-weight: 700; }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); }
.tbl tr:hover td, .tbl tr.sel td { background: var(--sph-50); }
.badge-st { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.badge-st.ai { background: var(--success-50); color: var(--success-600); }
.badge-st.wait { background: var(--warning-50); color: var(--warning-600); }
.badge-st.esc { background: var(--danger-50); color: var(--danger-600); }
.tg { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.tg.ok { background: var(--success-50); color: var(--success-600); }
.tg.pend { background: var(--warning-50); color: var(--warning-600); }
.tg.draft { background: var(--gray-100); color: var(--gray-600); }
.live-grid { display: grid; grid-template-columns: 1fr 380px; gap: 16px; min-height: 520px; }
.live-filters { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); display: flex; gap: 8px; background: var(--gray-50); }
.live-panel { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.live-panel-hd { padding: 16px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); }
.live-trans { flex: 1; padding: 16px; overflow-y: auto; font-size: var(--text-sm); line-height: 1.65; }
.live-panel-ft { padding: 12px 16px; border-top: 1px solid var(--gray-200); display: flex; gap: 8px; }
.journey-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.j-canvas { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 32px 20px; background-image: radial-gradient(circle, var(--gray-200) 1px, transparent 1px); background-size: 20px 20px; display: flex; flex-direction: column; align-items: center; }
.j-node { min-width: 220px; padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; text-align: center; border: 2px solid; }
.j-node .nt { font-size: 9px; text-transform: uppercase; opacity: .7; display: block; margin-bottom: 4px; }
.j-node.tr { background: #EEF2FF; border-color: #6366F1; color: #4338CA; }
.j-node.au { background: #FFF7ED; border-color: #F97316; color: #C2410C; }
.j-node.ac { background: #ECFDF5; border-color: #10B981; color: #047857; }
.j-node.br { background: #F5F3FF; border-color: #8B5CF6; color: #6D28D9; }
.j-node.cl { background: var(--sph-50); border-color: var(--sph-500); color: var(--sph-700); }
.j-line { width: 2px; height: 22px; background: var(--gray-300); position: relative; }
.j-line::after { content:''; position: absolute; bottom: -4px; left: -4px; border: 5px solid transparent; border-top-color: var(--gray-300); }
.j-branches { display: flex; gap: 40px; }
.settings-tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--gray-200); flex-wrap: wrap; }
.settings-tabs button { padding: 10px 16px; border: none; background: transparent; font-family: var(--font); font-size: var(--text-sm); font-weight: 600; color: var(--gray-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.settings-tabs button.on { color: var(--sph-500); border-bottom-color: var(--sph-500); }
.stab { display: none; }
.stab.on { display: block; }
.api-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.api-nav { display: flex; flex-direction: column; gap: 2px; }
.api-nav button { text-align: left; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; font-family: var(--font); font-size: var(--text-sm); color: var(--gray-600); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.api-nav button.on { background: var(--sph-50); border-color: var(--sph-100); color: var(--sph-700); font-weight: 600; }
.api-nav button .status { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--success-600); }
.api-form { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 24px; }
.api-form h3 { font-size: var(--text-lg); font-weight: 700; color: var(--sph-700); margin-bottom: 4px; }
.api-form .desc { font-size: var(--text-xs); color: var(--gray-500); margin-bottom: 20px; line-height: 1.5; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--gray-600); margin-bottom: 6px; }
.form-row .hint { font-size: 10px; color: var(--gray-400); margin-top: 4px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); font-family: var(--font); font-size: var(--text-sm); outline: none; }
.form-row input:focus { border-color: var(--sph-500); box-shadow: 0 0 0 3px rgba(0,87,168,.1); }
.form-row input[readonly] { background: var(--gray-50); color: var(--gray-500); }
.input-group { display: flex; gap: 8px; }
.input-group input { flex: 1; }
.input-group button { padding: 0 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-50); cursor: pointer; display: flex; align-items: center; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--gray-100); }
.alert { padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-xs); margin-bottom: 16px; }
.alert.info { background: var(--sph-50); border: 1px solid var(--sph-100); color: var(--sph-700); }
.alert.warn { background: var(--warning-50); border: 1px solid #FDE68A; color: #92400E; }
.api-panel { display: none; }
.api-panel.on { display: block; }
.integ-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); margin-bottom: 8px; }
.integ-row .st { font-size: var(--text-xs); font-weight: 700; color: var(--success-600); }
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
.toggle-sw { width: 44px; height: 24px; background: var(--gray-300); border-radius: 12px; position: relative; cursor: pointer; }
.toggle-sw.on { background: var(--sph-500); }
.toggle-sw::after { content:''; position: absolute; width: 20px; height: 20px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: transform .2s; }
.toggle-sw.on::after { transform: translateX(20px); }
.proto-ft { text-align: center; padding: 32px; font-size: var(--text-xs); color: var(--gray-500); border-top: 1px solid var(--gray-200); margin-top: 24px; }
.proto-ft a { color: var(--sph-500); }

/* Legacy class aliases + admin sub-screens */
body.showcase-body, body.proto { font-family: var(--font); font-size: var(--text-base); line-height: 1.5; color: var(--gray-900); background: var(--gray-100); -webkit-font-smoothing: antialiased; padding-top: var(--topbar-height); }
.iface-nav, .iface-bar { position: sticky; top: var(--topbar-height); z-index: 100; background: var(--sph-900); }
.iface-nav-inner, .iface-bar-in { max-width: 1560px; margin: 0 auto; display: flex; gap: 2px; padding: 0 24px; overflow-x: auto; }
.iface-tab, .iface-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; border: none; background: transparent; color: rgba(255,255,255,.55); font-family: var(--font); font-size: var(--text-sm); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.iface-tab.active, .iface-tab.on, .iface-btn.on { color: #fff; border-bottom-color: var(--sph-100); }
.iface-tab svg { width: 18px; height: 18px; }
.shell-main, .shell-body { max-width: 1560px; margin: 0 auto; padding: 24px; }
.intro-card, .hero { background: linear-gradient(135deg, var(--sph-700), var(--sph-500)); border-radius: var(--radius-xl); padding: 24px 32px; color: #fff; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.intro-badge, .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border-radius: 20px; padding: 4px 12px; font-size: var(--text-xs); font-weight: 600; margin-bottom: 8px; }
.intro-card h2, .hero h2 { font-size: var(--text-2xl); font-weight: 700; }
.intro-card p, .hero p { font-size: var(--text-sm); opacity: .88; margin-top: 4px; max-width: 560px; }
.iface-panel, .panel { display: none; }
.iface-panel.active, .iface-panel.on, .panel.on { display: block; animation: fadeUp .3s ease; }
.sub-layout, .sub-grid { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
@media (max-width: 1024px) { .sub-layout, .sub-grid { grid-template-columns: 1fr; } }
.journey-panel, .card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; max-height: calc(100vh - 180px); }
.journey-section-label { padding: 10px 16px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); }
.journey-list--scroll { flex: 1; min-height: 0; overflow-y: auto; max-height: 420px; }
.journey-list--scroll::-webkit-scrollbar { width: 6px; }
.journey-list--scroll::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.journey-panel-head, .card-hd { padding: 16px 20px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uc-count { font-size: 10px; font-weight: 600; color: var(--sph-600); background: var(--sph-50); padding: 3px 8px; border-radius: 10px; }
.chat-mode-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--gray-100); }
.sidebar-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--gray-100); }
.sidebar-tab { padding: 8px; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; font-family: var(--font); font-size: 11px; font-weight: 600; cursor: pointer; color: var(--gray-600); }
.sidebar-tab.active, .sidebar-tab.on { background: var(--sph-50); border-color: var(--sph-500); color: var(--sph-700); }
.sidebar-panel { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.sidebar-panel.active, .sidebar-panel.on { display: block; }
.lab-intro { font-size: 11px; color: var(--gray-600); margin-bottom: 10px; line-height: 1.5; }
.lab-details { margin-bottom: 10px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 10px; background: #fafbfc; }
.lab-details summary { font-size: 11px; font-weight: 700; cursor: pointer; color: var(--sph-700); }
.lab-details[open] summary { margin-bottom: 8px; }
.lab-radio-row { display: flex; flex-direction: column; gap: 4px; font-size: 11px; margin-bottom: 8px; }
.lab-input { width: 100%; margin-bottom: 6px; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 6px; font-family: var(--font); font-size: 12px; box-sizing: border-box; }
.lab-hint { font-size: 10px; color: var(--gray-500); margin: 6px 0; line-height: 1.4; }
.lab-status { font-size: 10px; color: var(--sph-600); margin-top: 8px; padding: 6px 8px; background: var(--sph-50); border-radius: 6px; }
.wa-kb-used { font-size: 9px; color: var(--gray-500); margin-top: 4px; font-style: italic; }
.mode-btn { padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; font-family: var(--font); font-size: 11px; font-weight: 600; cursor: pointer; color: var(--gray-600); }
.mode-btn:hover { border-color: var(--sph-500); color: var(--sph-700); }
.mode-btn.active, .mode-btn.on { background: var(--sph-50); border-color: var(--sph-500); color: var(--sph-700); }
.chat-controls { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); background: #fafbfc; }
.ctrl-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin-bottom: 4px; }
.ctrl-select { width: 100%; margin-bottom: 8px; font-size: 12px; }
.ctrl-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-hint { font-size: 10px; color: var(--gray-500); margin-top: 8px; line-height: 1.5; }
.chat-hint code { font-size: 10px; background: var(--gray-100); padding: 1px 4px; border-radius: 3px; }
.flow-uc { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--sph-600); background: var(--sph-50); padding: 2px 6px; border-radius: 4px; }
.flow-req { margin-top: 6px; font-size: 11px; }
.flow-start-live { margin-top: 12px; width: 100%; }
.wa-mode-badge { text-align: center; font-size: 10px; font-weight: 600; color: var(--sph-600); background: var(--sph-50); padding: 6px; border-top: 1px solid var(--gray-100); }
.modal-overlay { position: fixed; inset: 0; background: rgba(7,21,37,.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay[hidden] { display: none; }
.modal-card { background: #fff; border-radius: 12px; padding: 24px; max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); }
.modal-card h3 { font-size: 18px; margin-bottom: 8px; }
.modal-desc { font-size: 12px; color: var(--gray-500); margin-bottom: 16px; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#journey-catalog { flex: 1; min-height: 0; overflow-y: auto; }
.journey-panel-head h3, .card-hd h3 { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); }
.journey-list, .card-bd { padding: 12px; }
.journey-item, .journey-btn { display: block; width: 100%; text-align: left; padding: 16px; margin-bottom: 4px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; font-family: var(--font); cursor: pointer; }
.journey-item:hover, .journey-btn:hover { background: var(--gray-50); border-color: var(--gray-200); }
.journey-item.active, .journey-item.on, .journey-btn.on { background: var(--sph-50); border-color: var(--sph-500); }
.ji-title, .journey-btn .jt { font-size: var(--text-sm); font-weight: 600; }
.ji-meta, .journey-btn .jm { font-size: var(--text-xs); color: var(--gray-500); margin-top: 3px; }
.ji-tags, .journey-btn .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tag-pill, .pill { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--gray-100); color: var(--gray-600); }
.journey-item.active .tag-pill, .journey-btn.on .pill { background: rgba(0,87,168,.12); color: var(--sph-600); }
.journey-detail, .journey-foot { padding: 16px 20px; border-top: 1px solid var(--gray-100); font-size: var(--text-xs); color: var(--gray-500); line-height: 1.6; }
.journey-steps, .steps { list-style: none; margin-top: 12px; }
.journey-steps li, .steps li { padding: 6px 0 6px 22px; position: relative; border-left: 2px solid var(--gray-200); font-size: var(--text-xs); }
.journey-steps li::before, .steps li::before { content: attr(data-n); position: absolute; left: -8px; top: 5px; width: 14px; height: 14px; background: var(--sph-500); color: #fff; border-radius: 50%; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.phone-wrap, .phone-outer { display: flex; justify-content: center; padding: 8px 0 32px; }
.phone-device, .phone { width: 390px; max-width: 100%; background: #1c1c1e; border-radius: 44px; padding: 12px; box-shadow: var(--shadow-phone); }
.phone-screen, .phone-in { background: var(--wa-bg); border-radius: 36px; overflow: hidden; height: 780px; display: flex; flex-direction: column; }
.wa-top, .wa-hd { background: var(--wa-header); color: #fff; padding: 6px 10px 10px; display: flex; align-items: center; gap: 10px; }
.wa-top-back, .wa-hd-back { background: none; border: none; color: #fff; padding: 4px; cursor: pointer; display: flex; }
.wa-top-avatar, .wa-hd-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa-top-avatar img, .wa-hd-av img { width: 28px; height: 28px; }
.wa-top-info, .wa-hd-info { flex: 1; min-width: 0; }
.wa-top-info h4, .wa-hd-info h4 { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.wa-top-info p, .wa-hd-info p { font-size: 12px; opacity: .85; }
.wa-verified, .wa-hd-verified { width: 14px; height: 14px; }
.wa-top-actions, .wa-hd-actions { display: flex; gap: 12px; align-items: center; }
.wa-top-actions button, .wa-hd-actions button { background: none; border: none; color: #fff; padding: 4px; cursor: pointer; display: flex; }
.wa-messages, .wa-msgs { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background-color: var(--wa-bg); }
.wa-compose-icons, .wa-compose .icon-btn { background: none; border: none; color: var(--gray-500); padding: 8px; cursor: pointer; display: flex; }
.wa-compose-send, .wa-compose .send { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--wa-header-light); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sn-global-left, .sn-global-l { display: flex; align-items: center; gap: 16px; }
.sn-pill, .sn-tag { background: var(--sn-accent); color: #000; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.sn-toolbar, .sn-tabs { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); padding: 8px 16px; display: flex; gap: 4px; }
.sn-tab.active, .sn-tab.on { background: #fff; color: var(--gray-900); box-shadow: var(--shadow-xs); }
.sn-workspace, .sn-grid { display: grid; grid-template-columns: 272px 1fr 300px; flex: 1; min-height: 660px; }
.sn-list-head, .sn-list-hd { padding: 12px 16px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--gray-500); border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; }
.sn-list-head .count, .sn-list-hd .badge { background: var(--danger-600); color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 10px; }
.sn-case-item, .sn-item { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); cursor: pointer; }
.sn-case-item:hover, .sn-case-item.active, .sn-item:hover, .sn-item.on { background: var(--sph-50); }
.sn-case-item.active, .sn-item.on { border-left: 3px solid var(--sph-500); }
.sn-case-ch, .sn-ch { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--wa-header-light); }
.sn-case-ch svg, .sn-ch .ico { width: 12px; height: 12px; color: var(--wa-accent); }
.sn-case-num { font-size: 10px; color: var(--gray-500); margin-top: 4px; }
.sn-case-subj, .sn-subj { font-size: var(--text-sm); font-weight: 600; margin: 4px 0 2px; }
.sn-case-foot, .sn-foot { font-size: 10px; color: var(--gray-500); display: flex; justify-content: space-between; }
.sn-case-bar, .sn-case-hd { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); }
.sn-case-bar h3, .sn-case-hd h3 { font-size: var(--text-lg); font-weight: 700; }
.sn-case-bar .meta { font-size: var(--text-xs); color: var(--gray-500); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 12px; }
.sn-handoff-box, .sn-handoff { margin: 12px 20px 0; padding: 12px; background: var(--warning-50); border: 1px solid #FDE68A; border-radius: var(--radius-md); font-size: var(--text-xs); }
.sn-bubble, .sn-bub { max-width: 78%; padding: 10px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); }
.sn-bubble.cust, .sn-bub.c { align-self: flex-start; background: #fff; border: 1px solid var(--gray-200); }
.sn-bubble.ai, .sn-bub.a { align-self: flex-start; background: var(--success-50); border: 1px solid #A7F3D0; }
.sn-bubble.sys, .sn-bub.sys { align-self: center; font-size: var(--text-xs); color: var(--gray-500); text-align: center; }
.sn-reply, .sn-reply-bar { padding: 12px 20px; border-top: 1px solid var(--gray-200); display: flex; gap: 8px; background: #fff; }
.sn-reply textarea, .sn-reply-bar textarea { flex: 1; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 10px; font-family: var(--font); font-size: var(--text-sm); resize: none; height: 60px; outline: none; }
.sn-reply .send, .sn-reply-bar .send { padding: 10px 18px; background: var(--sn-accent); border: none; border-radius: var(--radius-md); font-weight: 700; cursor: pointer; font-family: var(--font); }
.sn-rail, .sn-side { padding: 16px; background: var(--gray-50); overflow-y: auto; }
.sn-field, .field { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.sn-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sn-pci, .pci-box { background: var(--danger-50); border: 1px solid #FECACA; border-radius: var(--radius-md); padding: 12px; margin: 12px 0; font-size: var(--text-xs); }
.admin-shell, .admin { display: grid; grid-template-columns: 252px 1fr; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); min-height: 840px; }
.admin-side-foot, .admin-side-ft { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 10px; color: rgba(255,255,255,.35); }
.admin-body, .admin-main { display: flex; flex-direction: column; background: var(--gray-50); }
.admin-bar-right, .admin-bar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-select, .select { padding: 7px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: var(--text-xs); font-family: var(--font); background: #fff; }
.admin-user, .user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--gray-200); border-radius: 20px; background: #fff; font-size: var(--text-xs); font-weight: 600; }
.admin-nav button.active, .admin-nav button.on { background: rgba(0,87,168,.4); color: #fff; font-weight: 600; border-left: 3px solid var(--sph-100); }
.admin-view, .view { display: none; }
.admin-view.active, .admin-view.on, .view.on { display: block; }
.section-label, .lbl { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); margin-bottom: 12px; }
.kpi-row, .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi-val, .kpi .v { font-size: 28px; font-weight: 800; color: var(--sph-700); }
.kpi-lbl, .kpi .l { font-size: var(--text-xs); color: var(--gray-500); margin-top: 6px; }
.kpi-delta, .kpi .d { font-size: 11px; font-weight: 600; margin-top: 8px; }
.kpi-delta.up, .kpi .d.up { color: var(--success-600); }
.kpi-delta.down, .kpi .d.down { color: var(--danger-600); }
.chart-grid, .charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 20px; }
.chart-box, .chart-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; }
.status-strip, .status-row { display: flex; flex-wrap: wrap; gap: 16px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 16px 20px; }
.status-chip, .status-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; }
.status-chip .dot.green, .status-item .dot.ok { background: var(--success-600); }
.status-chip .dot.amber, .status-item .dot.warn { background: var(--warning-600); }
.live-split, .live-grid { display: grid; grid-template-columns: 1fr 380px; gap: 16px; min-height: 520px; }
.live-table-wrap, .live-panel { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; }
.live-detail, .live-panel:last-child { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.live-detail-head, .live-panel-hd { padding: 16px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); }
.live-transcript, .live-trans { flex: 1; padding: 16px; overflow-y: auto; font-size: var(--text-sm); line-height: 1.65; }
.live-detail-foot, .live-panel-ft { padding: 12px 16px; border-top: 1px solid var(--gray-200); display: flex; gap: 8px; }
.data-tbl, .tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-tbl th, .tbl th { text-align: left; padding: 10px 14px; font-size: 10px; text-transform: uppercase; color: var(--gray-500); background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-weight: 700; }
.data-tbl td, .tbl td { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); }
.data-tbl tr:hover td, .data-tbl tr.sel td, .tbl tr:hover td, .tbl tr.sel td { background: var(--sph-50); }
.journey-editor, .journey-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.journey-canvas, .j-canvas { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 32px 20px; background-image: radial-gradient(circle, var(--gray-200) 1px, transparent 1px); background-size: 20px 20px; display: flex; flex-direction: column; align-items: center; }
.journey-canvas .j-node, .j-canvas .j-node { min-width: 220px; padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; text-align: center; border: 2px solid; }
.j-node.trigger, .j-node.tr { background: #EEF2FF; border-color: #6366F1; color: #4338CA; }
.j-node.auth, .j-node.au { background: #FFF7ED; border-color: #F97316; color: #C2410C; }
.j-node.action, .j-node.ac { background: #ECFDF5; border-color: #10B981; color: #047857; }
.j-node.branch, .j-node.br { background: #F5F3FF; border-color: #8B5CF6; color: #6D28D9; }
.j-node.close, .j-node.cl { background: var(--sph-50); border-color: var(--sph-500); color: var(--sph-700); }
.jn-type, .j-node .nt { font-size: 9px; text-transform: uppercase; opacity: .7; display: block; margin-bottom: 4px; }
.j-connector, .j-line { width: 2px; height: 22px; background: var(--gray-300); position: relative; }
.j-branch-row, .j-branches { display: flex; gap: 40px; }
.journey-inspector { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; }
.journey-inspector h4 { font-size: var(--text-xs); text-transform: uppercase; color: var(--gray-500); margin-bottom: 12px; }
.insp-field { margin-bottom: 12px; }
.insp-field label { display: block; font-size: var(--text-xs); font-weight: 600; margin-bottom: 4px; }
.insp-field input, .insp-field select, .insp-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-family: var(--font); font-size: var(--text-sm); }
.title-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.title-toggles label { display: flex; align-items: center; gap: 4px; font-size: var(--text-xs); }
.tpl-toolbar { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; }
.tpl-search { flex: 1; padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); font-family: var(--font); }
.wizard-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.wiz-step { padding: 8px 14px; border-radius: 20px; font-size: var(--text-xs); font-weight: 600; background: var(--gray-100); color: var(--gray-500); }
.wiz-step.active, .wiz-step.on { background: var(--sph-500); color: #fff; }
.wiz-step.done { background: var(--success-50); color: var(--success-600); }
.wiz-panel { display: none; padding: 16px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.wiz-panel.active, .wiz-panel.on { display: block; }
.cat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cat-card { padding: 16px; border: 2px solid var(--gray-200); border-radius: var(--radius-lg); cursor: pointer; }
.cat-card.selected, .cat-card.on { border-color: var(--sph-500); background: var(--sph-50); }
.cat-card h5 { font-size: var(--text-sm); margin-bottom: 4px; }
.cat-card p { font-size: var(--text-xs); color: var(--gray-500); }
.preview-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.preview-frame { padding: 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-50); }
.preview-frame h5 { font-size: var(--text-xs); text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px; }
.report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.report-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; }
.report-card h5 { font-size: var(--text-sm); margin-bottom: 4px; }
.report-card p { font-size: var(--text-xs); color: var(--gray-500); margin-bottom: 12px; }
.report-metrics { display: flex; gap: 24px; margin-bottom: 12px; }
.rm-val { font-size: 20px; font-weight: 800; color: var(--sph-700); }
.rm-lbl { font-size: 10px; color: var(--gray-500); }
.health-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.health-tile { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
.gauge { font-size: 22px; font-weight: 800; padding: 12px; border-radius: 50%; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.gauge.green { background: var(--success-50); color: var(--success-600); }
.warmup-list { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; margin-top: 16px; }
.warmup-list h4 { font-size: var(--text-sm); margin-bottom: 12px; }
.warmup-day { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); align-items: flex-start; }
.wd-check { width: 28px; height: 28px; border-radius: 50%; background: var(--success-50); color: var(--success-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.warmup-day.current .wd-check { background: var(--warning-50); color: var(--warning-600); }
.wd-info strong { display: block; font-size: var(--text-sm); }
.wd-info span { font-size: var(--text-xs); color: var(--gray-500); }
.consent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consent-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; }
.settings-tabs button.active, .settings-tabs button.on { color: var(--sph-500); border-bottom-color: var(--sph-500); }
.settings-panel, .stab { display: none; }
.settings-panel.active, .settings-panel.on, .stab.on { display: block; }
.integ-card, .integ-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); margin-bottom: 8px; }
.ic-name { font-size: var(--text-sm); font-weight: 600; }
.ic-meta { font-size: var(--text-xs); color: var(--gray-500); }
.ic-status, .integ-row .st { font-size: var(--text-xs); font-weight: 700; color: var(--success-600); }
.shell-footer, .proto-ft { text-align: center; padding: 32px; font-size: var(--text-xs); color: var(--gray-500); border-top: 1px solid var(--gray-200); margin-top: 24px; }
.status-icon { display: inline-flex; width: 14px; height: 14px; color: var(--success-600); vertical-align: middle; }
.trend-up { color: var(--success-600); font-weight: 600; }
.trend-down { color: var(--danger-600); font-weight: 600; }
@media (max-width: 1200px) { .kpi-row, .kpis, .health-row, .report-grid, .consent-grid { grid-template-columns: repeat(2, 1fr); } .sn-workspace, .sn-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .kpi-row, .kpis, .chart-grid, .charts, .live-split, .live-grid, .cat-cards { grid-template-columns: 1fr; } }