/* Tellyport console. Tokens and base components come from design-system.css. */

:root {
  --sidebar-width: 248px;
  --sidebar-collapsed: 68px;
  --topbar-height: 60px;
  --content-max: 1240px;
}

/* ---------- Generic console elements ---------- */
[hidden] { display: none !important; }
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
.helper { font-size: var(--text-sm); color: var(--text-secondary); }
small { color: var(--text-tertiary); font-size: var(--text-xs); }
code { color: var(--text); }
.link-button { padding: 0; border: 0; background: none; font-size: var(--text-sm); font-weight: 500; color: var(--accent); cursor: pointer; }
.link-button:hover { color: var(--accent-hover); text-decoration: underline; }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); background: var(--surface); cursor: pointer; }
.icon-button:hover { color: var(--text); background: var(--bg-subtle); }
.icon-button svg { width: 18px; height: 18px; }
.mobile-only { display: none; }

main label, dialog label { display: grid; gap: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--text); }
main label > small, dialog label > small { font-weight: 400; }
main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), main select, main textarea,
dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), dialog select, dialog textarea {
  width: 100%; min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: var(--text-base); color: var(--text); background: var(--surface); box-shadow: var(--shadow-xs);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
main textarea, dialog textarea { min-height: 96px; resize: vertical; font-family: var(--font-mono); font-size: var(--text-sm); }
main input:focus, main select:focus, main textarea:focus, dialog input:focus, dialog select:focus, dialog textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
main input[readonly] { color: var(--text-secondary); background: var(--surface-sunken); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
input[type="range"] { accent-color: var(--accent); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.confirmation { display: flex !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; color: var(--text-secondary) !important; line-height: 1.45; }
.confirmation input { margin-top: 2px; flex: none; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 8px; font-size: var(--text-sm); font-weight: 500; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.check-grid label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text-secondary); }

/* Toggle switch */
.switch { appearance: none; position: relative; width: 36px !important; height: 20px !important; flex: none; border-radius: var(--radius-full); background: var(--border-strong); cursor: pointer; transition: background var(--duration) var(--ease); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease); }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(16px); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* Status pills (rendered by app.js as .status.<tone>) */
.status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); background: var(--bg-subtle); white-space: nowrap; text-transform: capitalize; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.healthy { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.status.warning { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }
.status.danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.status.neutral { color: var(--text-secondary); }
.current-label { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-border); }
.method-badge, .mode-pill, .endpoint-key { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-xs); font: 500 11px/1 var(--font-mono); color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border); text-transform: none; }
.method-badge { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-border); margin-right: 6px; }

/* ---------- Login ---------- */
.login-screen { display: grid; grid-template-columns: minmax(380px, 0.9fr) 1.1fr; min-height: 100vh; background: var(--bg); }
.login-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; color: #e0e7ff; background: radial-gradient(120% 80% at 0% 0%, #4f46e5 0%, #3730a3 45%, #1e1b4b 100%); }
.login-aside::after { content: ""; position: absolute; inset: auto -20% -30% auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(129, 140, 248, 0.35), transparent); pointer-events: none; }
.login-aside > * { position: relative; z-index: 1; }
.login-logo { width: 188px; height: auto; display: block; }
.login-logo-link, .login-copy > a { display: inline-block; align-self: flex-start; }
.login-app-icon { width: auto; height: 44px; margin-bottom: 14px; }
.login-pitch { max-width: 440px; }
.login-pitch h2 { color: #fff; font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
.login-points { display: grid; gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.login-points li { display: grid; gap: 4px; padding-left: 28px; position: relative; }
.login-points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
.login-points b { color: #fff; font-weight: 600; }
.login-points span { color: #c7d2fe; font-size: var(--text-sm); }
.login-foot { color: #a5b4fc; font-size: var(--text-xs); }
.login-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 24px; }
.login-card { width: min(400px, 100%); }
.login-card-logo { display: none; margin-bottom: 32px; }
.login-copy { display: grid; gap: 6px; margin-bottom: 28px; }
.login-copy h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.login-copy p { color: var(--text-secondary); }
#loginForm { display: grid; gap: 16px; }
.field-row { display: flex; justify-content: space-between; align-items: center; }
.login-error { min-height: 18px; margin: -4px 0; font-size: var(--text-sm); color: var(--danger); }
.login-error:empty { min-height: 0; margin: 0; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--text-tertiary); font-size: var(--text-xs); }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login-switch { margin-top: 24px; text-align: center; font-size: var(--text-sm); color: var(--text-secondary); }
.login-legal { display: flex; gap: 8px; font-size: var(--text-xs); color: var(--text-tertiary); }
.login-legal a { color: var(--text-tertiary); }

/* ---------- App shell ---------- */
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: var(--topbar-height) 1fr; min-height: 100vh; }
.sidebar { grid-row: 1 / span 2; position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; height: 100vh; padding: 14px 12px; border-right: 1px solid var(--border); background: var(--surface); overflow-y: auto; z-index: 30; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 2px 6px; }
.sidebar-brand { display: inline-flex; align-items: center; border-radius: var(--radius-sm); }
.sidebar-brand .brand-wordmark img { height: 28px; }
.sidebar-brand .brand-mark { display: none; width: 28px; height: 28px; }
.sidebar-collapsed .sidebar-brand .brand-wordmark { display: none; }
.sidebar-collapsed .sidebar-brand .brand-mark { display: block; }
.sidebar-collapsed .sidebar-top { justify-content: center; }
.workspace-switcher { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.project-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; color: var(--accent-text); background: var(--accent-soft); }
.workspace-text { display: grid; min-width: 0; flex: 1; }
.workspace-org { overflow: hidden; font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; text-overflow: ellipsis; }
.workspace-text select { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; font-weight: 600; font-size: var(--text-sm); color: var(--text); cursor: pointer; text-overflow: ellipsis; }
.workspace-text select:focus-visible { border-radius: var(--radius-xs); }
.workspace-org-select { font-weight: 400 !important; font-size: var(--text-xs) !important; color: var(--text-tertiary) !important; }
.sidebar-nav { display: grid; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius); background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sidebar-collapsed .nav-item.active::before { left: -10px; }
.nav-item svg, .sidebar-link svg, .account-menu-item svg { width: 18px; height: 18px; flex: none; }
.nav-item:hover { color: var(--text); background: var(--bg-subtle); }
a.nav-item { text-decoration: none; }
.nav-item-badge { margin-left: auto; font-size: var(--text-xs); color: var(--text-tertiary); }
.sidebar-collapsed .nav-item-badge { display: none; }
.nav-item.active { color: var(--accent-text); background: var(--accent-soft); }
.sidebar-bottom { display: grid; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.sidebar-link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--radius); background: none; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; text-decoration: none; }
.sidebar-link:hover { color: var(--text); background: var(--bg-subtle); }
.mobile-quick-actions { display: none; }

.app-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr); }
.sidebar-collapsed .sidebar { padding-inline: 10px; }
.sidebar-collapsed .sidebar .logo span:not(.logo-mark), .sidebar-collapsed .workspace-text, .sidebar-collapsed .nav-item span, .sidebar-collapsed .sidebar-link span { display: none; }
.sidebar-collapsed .workspace-switcher { justify-content: center; padding: 8px; }
.sidebar-collapsed .nav-item, .sidebar-collapsed .sidebar-link { justify-content: center; padding: 0; }

.topbar { min-width: 0; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topbar-height); padding: 0 28px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(180%) blur(10px); }
.topbar-context, .topbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.environment-picker { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); }
.environment-picker select { border: 0; background: transparent; font-weight: 500; font-size: var(--text-sm); color: var(--text); cursor: pointer; }
.env-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.connection-pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--text-xs); color: var(--text-tertiary); }
.connection-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.connection-pill.connected i { background: var(--success); }
.role-pill { display: inline-flex; align-items: center; height: 24px; white-space: nowrap; padding: 0 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border); text-transform: capitalize; }
.account-control { position: relative; }
.avatar, .account-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: var(--text-xs); font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-border); }
.avatar { cursor: pointer; }
.account-avatar.large { width: 44px; height: 44px; font-size: var(--text-sm); }
.account-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-lg); z-index: 40; }
.account-menu-profile { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.account-menu-profile div { display: grid; min-width: 0; }
.account-menu-profile b { font-weight: 600; font-size: var(--text-sm); }
.account-menu-profile small { overflow: hidden; text-overflow: ellipsis; }
.account-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; text-align: left; text-decoration: none; }
.account-menu-item:hover { color: var(--text); background: var(--bg-subtle); }
.account-menu-item.danger { color: var(--danger); }
.mobile-menu-backdrop { display: none; }

/* ---------- Main content ---------- */
.main-content { grid-column: 2; min-width: 0; width: 100%; max-width: calc(var(--content-max) + 56px); padding: 28px 28px 64px; }
.section-tabs { margin-bottom: 24px; }
.view { display: none; }
.view.active { display: block; animation: view-in 260ms var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-heading .eyebrow { display: none; }
.page-heading h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.page-heading p { margin-top: 4px; color: var(--text-secondary); max-width: 640px; }
.heading-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.version-stack { display: flex; gap: 8px; }
.verify-banner { align-items: center; justify-content: space-between; margin-bottom: 20px; }

.panel, .settings-card, .table-panel, .metric-card, .endpoint-card, .project-card, .channel-card, .flag-card, .deployment-card, .plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.panel { padding: 20px; margin-bottom: 16px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { font-size: var(--text-md); }
.panel-head .eyebrow { display: block; margin-bottom: 2px; }
.panel-head p { margin-top: 2px; }
.security-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); font-size: var(--text-sm); color: var(--accent-text); background: var(--accent-soft); }
.notice { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--info-border); border-radius: var(--radius); background: var(--info-soft); font-size: var(--text-sm); color: var(--text-secondary); }
.notice b { color: var(--text); font-weight: 600; }
.notice.danger { border-color: var(--danger-border); background: var(--danger-soft); }
.validation-box { padding: 12px 14px; border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-soft); font-size: var(--text-sm); color: var(--text-secondary); }
.validation-box.ready { border-color: var(--success-border); background: var(--success-soft); }

/* Metrics */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
#healthSummary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card { position: relative; display: grid; gap: 4px; padding: 18px 20px; overflow: hidden; }
.metric-card span { font-size: var(--text-sm); color: var(--text-secondary); }
.metric-card strong { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.metric-card.compact-metric strong { font-size: 22px; }

/* Getting started */
.getting-started { padding: 24px; margin-bottom: 24px; }
.getting-started-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.getting-started-head h2 { font-size: var(--text-lg); }
.getting-started-head p { color: var(--text-secondary); margin-top: 2px; }
.progress-label { font-size: var(--text-sm); font-weight: 500; color: var(--accent-text); background: var(--accent-soft); padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.getting-started.complete .launch-next { border-color: var(--success-border); background: var(--success-soft); }
.launch-next { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-soft); }
.launch-next > div { flex: 1; min-width: 0; }
.launch-next small { font-weight: 500; color: var(--accent-text); }
.launch-next b { display: block; font-size: var(--text-md); font-weight: 600; }
.launch-next p { font-size: var(--text-sm); color: var(--text-secondary); }
.launch-next-number { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-weight: 600; color: var(--text-inverse); background: var(--accent); }
.setup-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.setup-step { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-content: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: left; cursor: pointer; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.setup-step:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.setup-step > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border); }
.setup-step.ready > span { color: var(--text-inverse); background: var(--success); border-color: var(--success); }
.setup-step div { display: grid; gap: 2px; min-width: 0; }
.setup-step b { font-size: var(--text-sm); font-weight: 500; line-height: 1.35; color: var(--text); }
.setup-step small { line-height: 1.4; }
.setup-step i { display: none; }
.launch-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.launch-url { display: grid; gap: 2px; min-width: 0; }
.launch-url code { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.launch-action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.launch-validation { display: flex; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-soft); font-size: var(--text-sm); }
.launch-validation.ready { border-color: var(--success-border); background: var(--success-soft); }

/* Overview */
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.overview-side .panel:last-child { margin-bottom: 0; }
.route-visual { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: var(--text-sm); }
.route-visual span { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunken); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-visual span:nth-of-type(2) { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-border); }
.route-visual i { flex: 1; min-width: 16px; height: 1px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 8px); }
#configPreview { max-height: 360px; }
.control-list { display: grid; margin-bottom: 8px; }
.control-list label { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.control-list label:last-child { border-bottom: 0; }
.control-list span { display: grid; gap: 2px; }
.control-list b { font-weight: 500; }
.compact-list { display: grid; }
.compact-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.compact-item:last-child { border-bottom: 0; }
.compact-item div { display: grid; min-width: 0; }
.compact-item b { overflow: hidden; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.activity-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: var(--text-xs); color: var(--accent-text); background: var(--accent-soft); }

/* Connection desk */
.connection-desk { margin-bottom: 20px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.connection-desk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.connection-desk-head .eyebrow { display: none; }
.connection-desk-head h2 { font-size: var(--text-md); }
.connection-desk-head code { overflow: hidden; max-width: 55%; font-size: var(--text-xs); color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.connection-desk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.desk-card { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.desk-card.current { border-color: var(--accent-border); background: var(--accent-soft); }
.desk-card > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); }
.desk-card.ready > span { color: var(--text-inverse); background: var(--success); border-color: var(--success); }
.desk-card div { display: grid; }
.desk-card b { font-size: var(--text-sm); font-weight: 500; }
.desk-card button { grid-column: 1 / -1; }

/* Tables */
.table-panel { overflow-x: auto; margin-bottom: 16px; }
.table-panel table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table-panel th { padding: 10px 16px; text-align: left; font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); background: var(--surface-sunken); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table-panel td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; }
.table-panel tr:last-child td { border-bottom: 0; }
.table-panel tbody tr:hover td { background: var(--surface-sunken); }
.table-panel code { font-size: var(--text-xs); color: var(--text-secondary); overflow-wrap: anywhere; }
.table-title { display: grid; gap: 2px; }
.table-title b { font-weight: 500; color: var(--text); }
.empty-row td { padding: 32px 16px !important; text-align: center; color: var(--text-tertiary) !important; }
.row-actions, .member-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.member-controls select { width: auto !important; min-height: 30px !important; padding: 4px 8px !important; font-size: var(--text-sm) !important; }
.panel .table-panel { box-shadow: none; margin-bottom: 0; }

/* Cards: endpoints, projects, channels */
.endpoint-grid, .project-grid, .channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.endpoint-card, .project-card, .channel-card { display: grid; gap: 14px; align-content: start; padding: 18px; }
.project-card.selected { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.topline > div { display: grid; gap: 6px; justify-items: start; }
.topline h3 { font-size: var(--text-md); }
.endpoint-primary, .failover-list { display: grid; gap: 4px; }
.endpoint-primary code, .failover-list code { overflow: hidden; padding: 6px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); background: var(--surface-sunken); border: 1px solid var(--border); text-overflow: ellipsis; white-space: nowrap; }
.endpoint-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.project-card > p { font: var(--text-xs) var(--font-mono); color: var(--text-tertiary); }
.project-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.project-stats div { display: grid; padding: 10px; border-radius: var(--radius); background: var(--surface-sunken); }
.project-stats b { font-size: var(--text-lg); font-weight: 600; }
.channel-share { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.rollout-track { height: 6px; border-radius: var(--radius-full); background: var(--bg-subtle); overflow: hidden; }
.rollout-track i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
.rule-panel { margin-top: 0; }
.hierarchy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; font-size: var(--text-xs); color: var(--text-tertiary); }
.hierarchy span { padding: 4px 8px; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-secondary); }
.rule-list { display: grid; gap: 8px; }
.rule-item { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--text-sm); }
.rule-item span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }

/* Feature flags */
.flag-list { display: grid; gap: 10px; }
.flag-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 16px; padding: 16px 18px; }
.flag-info { display: grid; gap: 2px; }
.flag-info h3 { font-size: var(--text-base); }
.flag-info code { font-size: var(--text-xs); color: var(--text-tertiary); }
.flag-target { font-size: var(--text-sm); color: var(--text-secondary); }
.flag-rollout { display: flex; align-items: center; gap: 10px; }
.flag-rollout input { flex: 1; }
.flag-rollout output { min-width: 40px; font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.flag-toggle { appearance: none; position: relative; width: 36px !important; height: 20px !important; border-radius: var(--radius-full); background: var(--border-strong); cursor: pointer; }
.flag-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease); }
.flag-toggle:checked { background: var(--accent); }
.flag-toggle:checked::after { transform: translateX(16px); }

/* Deployments, schedules, change requests */
.deployment-list { display: grid; gap: 10px; }
.deployment-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.deployment-version { display: grid; place-items: center; flex: none; min-width: 44px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm); font: 500 var(--text-sm) var(--font-mono); color: var(--text-secondary); background: var(--surface-sunken); border: 1px solid var(--border); }
.deployment-copy { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.deployment-copy b { font-weight: 500; color: var(--text); }
.diff-line { display: block; margin-top: 4px; font-family: var(--font-mono); overflow-wrap: anywhere; }
.canary-panel { border-color: var(--warning-border); }
.canary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }

/* API */
.api-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.api-layout pre { margin: 0 0 12px; padding: 16px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); font: 12.5px/1.65 var(--font-mono); max-height: 420px; }
.api-layout select { width: auto !important; }

/* Delivery queue */
.delivery-event-list { display: grid; }
.delivery-event { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.delivery-event:last-child { border-bottom: 0; }
.delivery-event div { display: grid; min-width: 0; }
.delivery-event b { font: 500 var(--text-sm) var(--font-mono); }
.delivery-event small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-type-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: var(--text-xs); background: var(--surface-sunken); border: 1px solid var(--border); }

/* Audit */
.audit-timeline { display: grid; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.audit-entry { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.audit-entry:last-child { border-bottom: 0; }
.audit-entry div { display: grid; gap: 2px; min-width: 0; }
.audit-entry b { font-weight: 500; }
.audit-entry span { font-size: var(--text-sm); color: var(--text-secondary); }
.audit-entry time { flex: none; font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }

/* Team */
.role-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.role-guide article { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.role-guide b { font-size: var(--text-sm); font-weight: 600; }
.role-guide small { line-height: 1.45; }
.organization-picker { display: grid; gap: 4px; font-size: var(--text-xs); }
.organization-picker select { min-width: 200px; }
.sso-domains { display: grid; gap: 8px; }
.sso-domain { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.sso-domain small { display: block; overflow-wrap: anywhere; font-family: var(--font-mono); }

/* Account & settings cards */
.account-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings-card { display: grid; gap: 16px; padding: 20px; margin-bottom: 16px; }
.account-settings-grid .settings-card { margin-bottom: 0; }
.settings-card .panel-head { margin-bottom: 0; }
.settings-card > .btn { justify-self: start; }
.settings-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.settings-meta span { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-sunken); font-size: var(--text-xs); color: var(--text-tertiary); }
.settings-meta b { font-size: var(--text-sm); font-weight: 500; color: var(--text); text-transform: capitalize; }
.session-detail { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.session-detail span { color: var(--text-tertiary); }
.session-detail b { font-weight: 500; overflow-wrap: anywhere; text-align: right; }
.secret-reveal { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--success-border); border-radius: var(--radius); background: var(--success-soft); font-size: var(--text-sm); }
.secret-reveal code, .secret-code { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font: var(--text-sm) var(--font-mono); overflow-wrap: anywhere; }
#mfaRecoveryCodes { white-space: pre; }
#mfaEnableForm, #mfaDisableForm { display: grid; gap: 12px; }
#mfaEnableForm.hidden, #mfaDisableForm.hidden { display: none; }

/* Billing */
.billing-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.plan-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px; }
.plan-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan-card.intended { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.plan-card > span { position: absolute; top: -11px; left: 20px; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; color: var(--text-inverse); background: var(--accent); }
.plan-card h2 { font-size: var(--text-lg); }
.plan-card strong { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; }
.plan-card strong i { font-style: normal; font-size: var(--text-sm); font-weight: 400; color: var(--text-tertiary); }
.plan-card p { font-size: var(--text-sm); color: var(--text-secondary); }
.plan-card .btn { margin-top: 8px; }
.enterprise-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); }
.enterprise-panel h2 { font-size: var(--text-lg); margin: 4px 0; }
.enterprise-panel p { color: var(--text-secondary); font-size: var(--text-sm); max-width: 620px; }

/* Support & agent */
.support-layout, .agent-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.support-list { display: grid; gap: 10px; }
.support-ticket { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.support-ticket > div { display: flex; justify-content: space-between; align-items: center; }
.support-ticket p { font-size: var(--text-sm); color: var(--text-secondary); }
.empty-support { display: grid; justify-items: center; gap: 6px; padding: 32px 16px; text-align: center; color: var(--text-tertiary); }
.empty-support span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); font-weight: 600; }
.empty-support p { font-size: var(--text-sm); }
.agent-context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.agent-context-grid span { display: grid; gap: 2px; padding: 12px; border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--border); }
.agent-context-grid b { font-size: var(--text-md); font-weight: 600; }
.agent-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.agent-prompts button { height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface); font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; }
.agent-prompts button:hover { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft); }
.agent-answer { display: flex; gap: 12px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.agent-answer > span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: var(--text-xs); font-weight: 600; color: var(--text-inverse); background: var(--accent); }
.agent-answer p { white-space: pre-wrap; font-size: var(--text-sm); color: var(--text-secondary); }
.agent-answer.thinking p { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.agent-form { display: grid; gap: 10px; }
.agent-form .btn { justify-self: end; }

/* Devices */
.search-input { width: min(300px, 100%) !important; }
#fleetMetricGrid { margin-bottom: 16px; }

/* ---------- Dialogs ---------- */
dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); color: var(--text); background: var(--surface-raised); box-shadow: var(--shadow-xl); overflow: auto; }
dialog::backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); }
dialog[open] { animation: dialog-in 160ms var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
dialog form { display: grid; gap: 16px; padding: 24px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dialog-head .eyebrow { margin-bottom: 4px; }
.dialog-head h2 { font-size: var(--text-lg); }
.dialog-head .icon-button { width: 32px; height: 32px; font-size: 18px; line-height: 1; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 8px -24px -24px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-sunken); }

/* ---------- Toasts ---------- */
.toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: grid; gap: 8px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; padding: 12px 12px 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-lg); font-size: var(--text-sm); color: var(--text); opacity: 0; transform: translateY(10px) scale(0.98); pointer-events: auto; transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out); }
.toast.visible { opacity: 1; transform: none; }
.toast.leaving { opacity: 0; transform: translateX(16px); }
.toast p { padding-top: 1px; line-height: 1.45; }
.toast-icon { display: grid; place-items: center; width: 20px; height: 20px; color: var(--success); }
.toast-icon svg { width: 20px; height: 20px; }
.toast.error .toast-icon { color: var(--danger); }
.toast-close { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; font-size: 16px; line-height: 1; color: var(--text-tertiary); cursor: pointer; }
.toast-close:hover { color: var(--text); background: var(--bg-subtle); }

/* ---------- Search trigger & segmented controls ---------- */
.search-trigger { display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 240px; padding: 0 8px 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); font-size: var(--text-sm); color: var(--text-tertiary); cursor: pointer; transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease); }
.search-trigger:hover { color: var(--text-secondary); border-color: var(--border-strong); background: var(--surface); }
.search-trigger svg { width: 16px; height: 16px; flex: none; }
.search-trigger span { flex: 1; text-align: left; white-space: nowrap; }
.search-trigger .kbd { height: 20px; font-size: 11px; }
.segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.segmented button { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); cursor: pointer; transition: background var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.segmented button:hover { color: var(--text); }
.segmented button[aria-checked="true"] { color: var(--text); background: var(--surface); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border); }
.segmented-icons button { min-width: 30px; padding: 0 6px; }
.segmented-icons svg { width: 15px; height: 15px; }
.account-menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: var(--text-sm); color: var(--text-secondary); }
.account-menu-item .menu-kbd { margin-left: auto; height: 18px; font-size: 10px; }

/* ---------- Skeletons ---------- */
.sk-line { display: block; height: 10px; width: 60%; margin: 4px 0; }
.sk-line.short { width: 35%; }
.sk-value { display: block; height: 26px; width: 45%; margin: 4px 0; }
.sk-block { display: block; height: 160px; width: 100%; border-radius: var(--radius); }
.sk-inline { display: inline-block; width: 52px; height: 18px; vertical-align: middle; }
.sk-pill { display: inline-block; width: 92px; height: 24px; border-radius: var(--radius-full); }
.sk-map { display: block; width: 100%; aspect-ratio: 110 / 72; border-radius: var(--radius); }
.chart-skeleton { display: flex; align-items: flex-end; gap: 6px; height: 220px; padding: 12px 4px 26px 44px; }
.chart-skeleton .skeleton { flex: 1; border-radius: 4px 4px 0 0; }
.chart-skeleton .skeleton:nth-child(3n) { height: 40%; } .chart-skeleton .skeleton:nth-child(3n+1) { height: 62%; } .chart-skeleton .skeleton:nth-child(3n+2) { height: 78%; }
.diag-skeleton { display: grid; gap: 10px; padding: 8px 0; }
.diag-skeleton .sk-block { height: 90px; }

/* ---------- KPI cards ---------- */
.kpi-grid .metric-card { min-height: 112px; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.metric-card.kpi { padding-bottom: 46px; }
.metric-card.kpi:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.metric-card.tone-warning strong { color: var(--warning); }
.metric-card.tone-danger strong { color: var(--danger); }
.kpi-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; opacity: 0.95; pointer-events: none; }
.om-sparkline { display: block; width: 100%; height: 100%; }
.om-sparkline .om-line { stroke-width: 1.75; }

/* ---------- Charts ---------- */
.chart-panel { padding: 0; overflow: hidden; }
.chart-head { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.chart-tabs { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chart-tab { position: relative; display: grid; gap: 2px; align-content: center; min-width: 150px; padding: 14px 20px; border: 0; border-right: 1px solid var(--border); background: none; text-align: left; cursor: pointer; transition: background var(--duration) var(--ease); }
.chart-tab:hover { background: var(--hover); }
.chart-tab small { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); white-space: nowrap; }
.chart-tab b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chart-tab em { font-style: normal; font-size: var(--text-xs); color: var(--text-tertiary); }
.chart-tab[aria-selected="true"] { background: var(--surface); }
.chart-tab[aria-selected="true"] b { color: var(--text); }
.chart-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.chart-head .segmented { align-self: center; margin-right: 16px; flex: none; }
.chart-body { position: relative; padding: 16px 16px 10px; min-height: 236px; transition: opacity var(--duration) var(--ease); }
.chart-body.is-refreshing { opacity: 0.55; }
.om-chart { position: relative; }
.om-chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.om-grid { stroke: var(--chart-grid); stroke-width: 1; }
.om-axis-label { fill: var(--text-tertiary); font-size: 11px; font-variant-numeric: tabular-nums; }
.om-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.om-line.om-animate { stroke-dasharray: 1; stroke-dashoffset: 1; animation: om-draw 900ms var(--ease-out) forwards; }
@keyframes om-draw { to { stroke-dashoffset: 0; } }
.om-area { opacity: 1; animation: om-fade 600ms var(--ease-out); }
@keyframes om-fade { from { opacity: 0; } }
.om-bar { transform-box: fill-box; transform-origin: bottom; animation: om-grow 500ms var(--ease-out); }
@keyframes om-grow { from { transform: scaleY(0); } }
.om-crosshair { stroke: var(--chart-crosshair); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.om-hover-dot { stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.om-hit { cursor: crosshair; }
.om-tooltip { position: absolute; z-index: 5; display: grid; gap: 4px; min-width: 150px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-lg); font-size: var(--text-xs); color: var(--text-secondary); pointer-events: none; white-space: nowrap; }
.om-tooltip > small { font-size: 11px; color: var(--text-tertiary); }
.om-tooltip div { display: flex; align-items: center; gap: 8px; }
.om-tooltip div span { flex: 1; }
.om-tooltip b { font-size: var(--text-sm); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.om-swatch { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2px; }
/* Series colors by class (tokens swap with the theme). */
.om-line.c1, .om-donut-seg.c1 { stroke: var(--chart-1); } .om-stop.c1 { stop-color: var(--chart-1); } .om-bar.c1, .om-hover-dot.c1 { fill: var(--chart-1); } .om-swatch.c1, .om-bar-fill.c1 { background: var(--chart-1); }
.om-line.c2, .om-donut-seg.c2 { stroke: var(--chart-2); } .om-stop.c2 { stop-color: var(--chart-2); } .om-bar.c2, .om-hover-dot.c2 { fill: var(--chart-2); } .om-swatch.c2, .om-bar-fill.c2 { background: var(--chart-2); }
.om-line.c3, .om-donut-seg.c3 { stroke: var(--chart-3); } .om-stop.c3 { stop-color: var(--chart-3); } .om-bar.c3, .om-hover-dot.c3 { fill: var(--chart-3); } .om-swatch.c3, .om-bar-fill.c3 { background: var(--chart-3); }
.om-line.c4, .om-donut-seg.c4 { stroke: var(--chart-4); } .om-stop.c4 { stop-color: var(--chart-4); } .om-bar.c4, .om-hover-dot.c4 { fill: var(--chart-4); } .om-swatch.c4, .om-bar-fill.c4 { background: var(--chart-4); }
.om-line.c5, .om-donut-seg.c5 { stroke: var(--chart-5); } .om-stop.c5 { stop-color: var(--chart-5); } .om-bar.c5, .om-hover-dot.c5 { fill: var(--chart-5); } .om-swatch.c5, .om-bar-fill.c5 { background: var(--chart-5); }
.om-line.cerr, .om-donut-seg.cerr { stroke: var(--chart-error); } .om-stop.cerr { stop-color: var(--chart-error); } .om-bar.cerr, .om-hover-dot.cerr { fill: var(--chart-error); } .om-swatch.cerr, .om-bar-fill.cerr { background: var(--chart-error); }
.om-donut-seg.cother { stroke: var(--chart-other); } .om-swatch.cother, .om-bar-fill.cother { background: var(--chart-other); }

/* Breakdowns */
.breakdown-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.breakdown-panel { margin-bottom: 0; display: flex; flex-direction: column; }
.breakdown-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.om-donut { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 18px; }
.om-donut-figure { position: relative; width: 120px; height: 120px; }
.om-donut-figure svg { width: 120px; height: 120px; }
.om-donut-track { stroke: var(--bg-subtle); }
.om-donut-seg { transition: opacity var(--duration) var(--ease), stroke-width var(--duration) var(--ease); cursor: pointer; }
.om-donut-seg.dim, .om-legend li.dim { opacity: 0.35; }
.om-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.om-donut-center b { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.om-donut-center small { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-legend { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.om-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 36px; align-items: center; gap: 8px; font-size: var(--text-sm); transition: opacity var(--duration) var(--ease); cursor: default; }
.om-legend li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.om-legend li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.om-legend li small { text-align: right; font-variant-numeric: tabular-nums; }
.om-legend .platform-icon { width: 22px; height: 22px; }
.om-bars { display: grid; gap: 10px; }
.om-bar-row { display: grid; grid-template-columns: minmax(70px, 0.9fr) minmax(0, 1.4fr) auto 36px; align-items: center; gap: 10px; font-size: var(--text-sm); }
.om-bar-label { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.om-bar-label span { overflow: hidden; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.om-bar-label small { color: var(--text-tertiary); }
.om-bar-track { height: 8px; border-radius: var(--radius-full); background: var(--bg-subtle); overflow: hidden; }
.om-bar-fill { display: block; width: 0; height: 100%; border-radius: inherit; transition: width 700ms var(--ease-out); }
.om-bar-row b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.om-bar-share { text-align: right; font-variant-numeric: tabular-nums; }
.plain-breakdown { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.plain-breakdown li { display: flex; justify-content: space-between; }

/* ---------- Fleet map ---------- */
.map-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr); gap: 24px; align-items: start; }
.map-canvas { position: relative; min-width: 0; }
.om-map svg { display: block; width: 100%; height: auto; }
.om-land { fill: var(--map-land); transition: fill var(--duration) var(--ease); }
.om-land.l1 { fill: color-mix(in srgb, var(--map-dot) 32%, var(--map-land)); }
.om-land.l2 { fill: color-mix(in srgb, var(--map-dot) 52%, var(--map-land)); }
.om-land.l3 { fill: color-mix(in srgb, var(--map-dot) 72%, var(--map-land)); }
.om-land.l4 { fill: var(--map-dot); }
.om-land.hover { fill: var(--accent-hover); }
.om-bubble { cursor: pointer; outline: none; }
.om-bubble-dot { fill: var(--map-dot); fill-opacity: 0.22; stroke: var(--map-dot); stroke-width: 0.25; transition: fill-opacity var(--duration) var(--ease); }
.om-bubble.has-errors .om-bubble-dot { stroke: var(--chart-error); stroke-width: 0.35; }
.om-bubble:hover .om-bubble-dot, .om-bubble:focus-visible .om-bubble-dot { fill-opacity: 0.45; }
.om-bubble:focus-visible .om-bubble-dot { stroke-width: 0.6; }
.om-bubble-pulse { fill: none; stroke: var(--map-dot); stroke-width: 0.25; transform-box: fill-box; transform-origin: center; animation: om-pulse 2.6s var(--ease-out) infinite; }
@keyframes om-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.4); opacity: 0; } }
.map-side h3 { margin-bottom: 8px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
.country-list { display: grid; margin: 0; padding: 0; list-style: none; }
.country-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.country-list li:last-child { border-bottom: 0; }
.country-flag { display: grid; place-items: center; width: 28px; height: 22px; border-radius: 4px; background: var(--bg-subtle); font-size: 16px; line-height: 1; font-weight: 600; font-size: 13px; }
.country-list div { display: grid; min-width: 0; }
.country-list b { overflow: hidden; font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.country-list em { font-style: normal; }
.country-count { display: grid; justify-items: end; }
.country-count b { font-variant-numeric: tabular-nums; }
.text-danger { color: var(--danger) !important; }

/* ---------- Empty states ---------- */
.empty-state { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; text-align: center; animation: om-fade 400ms var(--ease-out); }
.empty-state b { font-size: var(--text-md); font-weight: 600; color: var(--text); }
.empty-state p { max-width: 420px; font-size: var(--text-sm); color: var(--text-secondary); }
.empty-state .btn, .empty-actions { margin-top: 8px; }
.empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.empty-art { margin-bottom: 6px; }
.empty-art .ea-bg { fill: var(--bg-subtle); stroke: var(--border); }
.empty-art .ea-line { stroke: var(--border-strong); stroke-width: 2; }
.empty-art .ea-accent { stroke: var(--accent); }
.empty-art .ea-dot { fill: var(--accent); }
.empty-art .ea-accent-fill { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.table-panel .empty-row td { padding: 8px 16px !important; }
.empty-panel { padding: 8px; }

/* ---------- Platform icons & device rows ---------- */
.platform-icon { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border); }
.platform-icon.large { width: 40px; height: 40px; border-radius: var(--radius); }
.platform-icon.large svg { width: 22px; height: 22px; }
.platform-icon.tone-roku { color: #6c3fc2; background: #f3eefe; border-color: #e1d5fb; }
.platform-icon.tone-android { color: #2f8a44; background: #edf8f0; border-color: #cfead7; }
.platform-icon.tone-fire { color: #c2560f; background: #fff4ea; border-color: #fbdcc0; }
.platform-icon.tone-apple { color: #3f4553; background: #f1f2f5; border-color: #dfe2e8; }
.platform-icon.tone-tizen { color: #1f4fbf; background: #edf3ff; border-color: #cddcfb; }
.platform-icon.tone-webos { color: #b4235a; background: #fdeef4; border-color: #f7d0de; }
.platform-icon.tone-web { color: #0b7a8a; background: #e9f7f9; border-color: #c5e8ed; }
:root[data-theme="dark"] .platform-icon.tone-roku { color: #c4b0f7; background: rgba(140, 100, 230, 0.14); border-color: rgba(160, 130, 240, 0.28); }
:root[data-theme="dark"] .platform-icon.tone-android { color: #7dd99a; background: rgba(70, 180, 110, 0.12); border-color: rgba(90, 200, 130, 0.26); }
:root[data-theme="dark"] .platform-icon.tone-fire { color: #f8b07a; background: rgba(240, 130, 60, 0.12); border-color: rgba(240, 150, 90, 0.28); }
:root[data-theme="dark"] .platform-icon.tone-apple { color: #c9ceda; background: rgba(200, 206, 218, 0.08); border-color: rgba(200, 206, 218, 0.2); }
:root[data-theme="dark"] .platform-icon.tone-tizen { color: #93b4ff; background: rgba(90, 130, 240, 0.14); border-color: rgba(120, 150, 250, 0.3); }
:root[data-theme="dark"] .platform-icon.tone-webos { color: #f59ab9; background: rgba(230, 80, 130, 0.12); border-color: rgba(240, 120, 160, 0.28); }
:root[data-theme="dark"] .platform-icon.tone-web { color: #7fd6e2; background: rgba(60, 180, 200, 0.12); border-color: rgba(90, 200, 215, 0.28); }
.device-cell { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.device-cell .table-title b, .device-cell .row-link { white-space: nowrap; }
.row-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; }
.row-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.clickable-row { cursor: pointer; }
.method-badge.method-get { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.method-badge.method-post { color: var(--info); background: var(--info-soft); border-color: var(--info-border); }
.method-badge.method-put, .method-badge.method-patch { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }
.method-badge.method-delete { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.status.live::before { animation: status-pulse 1.4s ease-in-out infinite; }
@keyframes status-pulse { 50% { opacity: 0.25; } }

/* ---------- Device drawer ---------- */
dialog.drawer { position: fixed; inset: 0 0 0 auto; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow-xl); overflow: hidden; }
dialog.drawer[open] { animation: drawer-in 280ms var(--ease-out); }
@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-inner { display: flex; flex-direction: column; height: 100%; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.drawer-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.drawer-title h2 { font-size: var(--text-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-title small { font-size: var(--text-xs); }
.drawer-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.drawer-head-actions .icon-button { width: 32px; height: 32px; font-size: 18px; }
.drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.drawer-scroll > * { flex: none; }
dialog.drawer form.diagnostics-form { padding: 0; }
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--border); overflow: hidden; }
.fact-grid div { padding: 10px 12px; background: var(--surface); min-width: 0; }
.fact-grid dt { font-size: var(--text-xs); color: var(--text-tertiary); }
.fact-grid dd { margin: 2px 0 0; font-size: var(--text-sm); font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.drawer-actions { display: flex; gap: 8px; }
.section-head h3 { font-size: var(--text-md); }
.diagnostics { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.diagnostics-form { display: grid; gap: 12px; }
.diagnostics-form > .btn { justify-self: start; }
.diag-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.diag-option { display: flex !important; align-items: flex-start; gap: 8px !important; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease); }
.diag-option:has(input:checked) { border-color: var(--accent-border); background: var(--accent-soft); }
.diag-option input { margin-top: 2px; }
.diag-option span { display: grid; gap: 2px; }
.diag-option b { font-size: var(--text-sm); font-weight: 500; }
.diag-option small { line-height: 1.35; }
#diagnosticsList { display: grid; gap: 10px; }
.diag-request { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.diag-request summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.diag-request summary::-webkit-details-marker { display: none; }
.diag-request[open] summary { border-bottom: 1px solid var(--border); }
.diag-summary { display: grid; min-width: 0; }
.diag-summary b { font-size: var(--text-sm); font-weight: 500; }
.diag-body { display: grid; gap: 12px; padding: 14px; }
.diag-block { display: grid; gap: 6px; }
.diag-block-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); }
.diag-block .code-block { max-height: 260px; }
.log-view { max-height: 280px; margin: 0; padding: 6px 0; overflow: auto; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); font: 12px/1.6 var(--font-mono); }
.log-view li { display: grid; grid-template-columns: 74px 46px minmax(0, 1fr); gap: 8px; padding: 1px 10px; }
.log-view li:hover { background: var(--hover); }
.log-view time { color: var(--text-tertiary); }
.log-view .lvl { text-transform: uppercase; font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); }
.log-view code { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: 12px; }
.log-view .lvl-warn .lvl { color: var(--warning); }
.log-view .lvl-error .lvl, .log-view .lvl-fatal .lvl { color: var(--danger); }
.log-view .lvl-error, .log-view .lvl-fatal { background: var(--danger-soft); }
.diag-shot { margin: 0; display: grid; gap: 6px; }
.diag-shot img { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: #000; }
.diag-shot figcaption { font-size: var(--text-xs); color: var(--text-tertiary); }
.diag-waiting { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--text-secondary); }
.pulse-dot { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--warning); }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--warning); animation: dot-ping 1.6s var(--ease-out) infinite; }
@keyframes dot-ping { to { transform: scale(2.6); opacity: 0; } }

/* ---------- Command palette ---------- */
dialog.cmdk { width: min(640px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 48px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-xl); overflow: hidden; }
dialog.cmdk[open] { display: flex; animation: cmdk-in 180ms var(--ease-out); }
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
dialog.cmdk::backdrop { background: var(--overlay); backdrop-filter: blur(3px); }
.cmdk-panel { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.cmdk-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); color: var(--text-tertiary); }
.cmdk-search svg { flex: none; }
dialog.cmdk input.cmdk-input { flex: 1; width: auto; min-width: 0; height: 54px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--text-md); color: var(--text); outline: none; box-shadow: none; }
.cmdk-input::placeholder { color: var(--text-tertiary); }
.cmdk-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; scroll-padding: 8px; }
.cmdk-group + .cmdk-group { margin-top: 4px; }
.cmdk-group-label { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
.cmdk-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: var(--radius); color: var(--text-secondary); cursor: pointer; }
.cmdk-item.active { color: var(--text); background: var(--accent-soft); }
.cmdk-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-tertiary); background: var(--bg-subtle); }
.cmdk-icon .platform-icon { width: 28px; height: 28px; }
.cmdk-item.active .cmdk-icon { color: var(--accent-text); }
.cmdk-text { display: grid; flex: 1; min-width: 0; }
.cmdk-text b { overflow: hidden; font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-text mark { color: var(--accent-text); background: none; font-weight: 700; }
.cmdk-enter { opacity: 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.cmdk-item.active .cmdk-enter { opacity: 1; }
.cmdk-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; text-align: center; color: var(--text-tertiary); }
.cmdk-empty b { color: var(--text); font-weight: 500; }
.cmdk-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface-sunken); font-size: var(--text-xs); color: var(--text-tertiary); }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 4px; }
.cmdk-foot .kbd { height: 18px; min-width: 18px; justify-content: center; padding: 0 4px; font-size: 10px; }

/* ---------- Imports, config as code, diffs ---------- */
dialog.dialog-wide { width: min(760px, calc(100vw - 32px)); }
.file-drop { position: relative; display: grid !important; justify-items: center; gap: 2px !important; padding: 18px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); text-align: center; font-weight: 400 !important; color: var(--text-secondary) !important; cursor: pointer; transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease); }
.file-drop:hover, .file-drop.dragging { border-color: var(--accent); background: var(--accent-soft); }
.file-drop:focus-within { box-shadow: var(--focus-ring); }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop b { color: var(--accent-text); font-weight: 600; }
.import-result:empty { display: none; }
.import-result { display: grid; gap: 10px; }
.import-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.preview-table, .diff-table { max-height: 300px; overflow: auto; margin-bottom: 0; box-shadow: none; }
.preview-table td code { margin-left: 6px; font-size: var(--text-xs); color: var(--text); }
.diff-before { padding: 1px 4px; border-radius: 3px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--danger); background: var(--danger-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 50%, transparent); overflow-wrap: anywhere; }
.diff-after { padding: 1px 4px; border-radius: 3px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--success); background: var(--success-soft); overflow-wrap: anywhere; }
.skipped-list { font-size: var(--text-sm); color: var(--text-secondary); }
.skipped-list summary { cursor: pointer; color: var(--text); }
.skipped-list ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.config-code-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.export-actions, .form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ci-hint { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.ci-hint b { font-size: var(--text-sm); }
.ci-hint .code-block { font-size: 11.5px; white-space: pre; }
.callout > div { flex: 1; }
.callout .btn { flex: none; align-self: center; }

/* ---------- Release risk panel ---------- */
.risk-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunken); animation: om-fade 300ms var(--ease-out); }
.risk-panel[hidden] { display: none; }
.risk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.risk-level { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; }
.risk-level::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.level-low .risk-level { color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); }
.level-medium .risk-level { color: var(--warning); background: var(--warning-soft); border: 1px solid var(--warning-border); }
.level-high .risk-level { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-border); }
.risk-panel.level-high { border-color: var(--danger-border); }
.risk-score { font-size: var(--text-xs); color: var(--text-tertiary); }
.risk-score b { font-size: var(--text-lg); color: var(--text); font-variant-numeric: tabular-nums; }
.risk-summary { font-size: var(--text-sm); color: var(--text-secondary); }
.risk-impact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.risk-impact div { display: grid; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.risk-impact b { font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.risk-impact small { line-height: 1.3; }
.risk-platforms { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 2px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); font-size: var(--text-xs); color: var(--text-secondary); }
.chip .platform-icon { width: 22px; height: 22px; border-radius: 50%; }
.chip .platform-icon svg { width: 13px; height: 13px; }
.chip b { color: var(--text); }
.risk-checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.risk-checks li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); color: var(--text-secondary); }
.risk-checks li > span:first-child { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; }
.check-pass > span:first-child { color: var(--success); background: var(--success-soft); }
.check-warn > span:first-child { color: var(--warning); background: var(--warning-soft); }
.check-fail > span:first-child { color: var(--danger); background: var(--danger-soft); }
.risk-changes summary { cursor: pointer; font-size: var(--text-sm); font-weight: 500; }
.risk-changes .diff-table { margin-top: 8px; }
.risk-ai { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-soft); font-size: var(--text-sm); color: var(--text-secondary); }
.ai-badge { justify-self: start; padding: 1px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; color: var(--text-inverse); background: var(--accent); }

/* ---------- Billing ---------- */
.usage-panel { padding: 22px; }
.usage-numbers { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.usage-numbers strong { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.usage-numbers span { color: var(--text-secondary); }
.usage-meter { display: flex; height: 10px; border-radius: var(--radius-full); background: var(--bg-subtle); overflow: hidden; }
.usage-fill { display: block; width: 0; height: 100%; background: var(--accent); transition: width 900ms var(--ease-out); }
.usage-meter.tone-warning .usage-fill { background: var(--warning); }
.usage-meter.tone-danger .usage-fill { background: var(--accent); }
.usage-over { display: block; width: 0; height: 100%; background: repeating-linear-gradient(135deg, var(--danger) 0 6px, color-mix(in srgb, var(--danger) 70%, transparent) 6px 12px); transition: width 900ms var(--ease-out); }
.usage-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.usage-stats div { display: grid; gap: 2px; padding: 12px; border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--border); }
.usage-stats b { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.billing-cycle { margin: 8px 0 14px; }
.billing-cycle h2 { font-size: var(--text-lg); }
.plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan-card { transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.plan-card:hover { box-shadow: var(--shadow-md); }
.plan-card.current { border-color: var(--success-border); }
.plan-features { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--text-secondary); }
.plan-features li { display: flex; gap: 8px; align-items: flex-start; }
.plan-features li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23079455' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 9px no-repeat; }
.plan-card .btn { margin-top: auto; }
.plan-card { grid-template-rows: auto auto auto auto 1fr auto; }

/* ---------- Appearance ---------- */
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-option { display: grid; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; text-align: left; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.theme-option:hover { border-color: var(--border-strong); }
.theme-option[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-option b { padding: 0 4px 2px; font-size: var(--text-sm); font-weight: 500; }
.theme-preview { display: grid; grid-template-columns: 26% 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 56px; padding: 6px; border-radius: var(--radius); }
.theme-preview i { border-radius: 3px; }
.theme-preview i:first-child { grid-row: 1 / span 2; }
.theme-preview.light { background: #f2f4f7; } .theme-preview.light i { background: #fff; box-shadow: 0 0 0 1px #e4e7ec; } .theme-preview.light i:nth-child(2) { background: #c7d2fe; box-shadow: none; }
.theme-preview.dark { background: #0a0b0f; } .theme-preview.dark i { background: #161922; box-shadow: 0 0 0 1px #22252f; } .theme-preview.dark i:nth-child(2) { background: #4f46e5; box-shadow: none; }
.theme-preview.system { background: linear-gradient(135deg, #f2f4f7 50%, #0a0b0f 50%); } .theme-preview.system i { background: color-mix(in srgb, #fff 55%, #161922); } .theme-preview.system i:nth-child(2) { background: #6366f1; }

/* ---------- Misc polish ---------- */
.getting-started.complete .launch-next, .getting-started.complete .setup-steps { display: none; }
.getting-started.complete .getting-started-head { margin-bottom: 0; }
.getting-started.complete .launch-actions { margin-top: 12px; }
.activity-time { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.audit-entry { align-items: center; justify-content: flex-start; }
.audit-entry div { flex: 1; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active:not(:disabled) { transform: translateY(0.5px); }
.icon-button:focus-visible, .nav-item:focus-visible, .sidebar-link:focus-visible, .tab:focus-visible, .chart-tab:focus-visible, .account-menu-item:focus-visible, .row-link:focus-visible { box-shadow: var(--focus-ring); }
.chart-tab:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.account-menu:not(.hidden) { animation: menu-in 140ms var(--ease-out); transform-origin: top right; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.panel { transition: border-color var(--duration) var(--ease); }
.project-card, .endpoint-card, .channel-card, .setup-step { transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.project-card:hover, .endpoint-card:hover, .channel-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] dialog::backdrop { background: var(--overlay); }
:root[data-theme="dark"] .login-screen .login-main { background: var(--bg); }
:root[data-theme="dark"] .topbar { background: color-mix(in srgb, var(--bg) 82%, transparent); }
:root[data-theme="dark"] .sidebar { background: var(--bg); }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .metric-card, :root[data-theme="dark"] .table-panel { box-shadow: none; }
:root[data-theme="dark"] .switch::after, :root[data-theme="dark"] .flag-toggle::after { background: #e6e8ee; }
:root[data-theme="dark"] .plan-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E"); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .metric-grid, .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breakdown-grid { grid-template-columns: 1fr 1fr; }
  .breakdown-grid > :first-child { grid-column: 1 / -1; }
  .map-layout, .config-code-grid { grid-template-columns: 1fr; }
  .search-trigger { min-width: 0; }
  .search-trigger span, .connection-pill { display: none; }
  .setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connection-desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid, .api-layout, .support-layout, .agent-workspace, .account-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .flag-card { grid-template-columns: 1fr auto; }
  .flag-target { display: none; }
  .flag-rollout { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 900px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  .login-card-logo { display: inline-flex; }
  .login-app-icon { display: none; }
}

@media (max-width: 860px) {
  .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--topbar-height) 1fr; }
  .mobile-only { display: inline-grid; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform 200ms var(--ease); box-shadow: var(--shadow-xl); }
  .sidebar-collapsed .sidebar .logo span:not(.logo-mark), .sidebar-collapsed .workspace-text, .sidebar-collapsed .nav-item span, .sidebar-collapsed .sidebar-link span { display: revert; }
  .mobile-menu-open .sidebar { transform: none; }
  .mobile-menu-open .mobile-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 25; border: 0; background: rgba(15, 23, 42, 0.4); }
  #sidebarToggle { display: none; }
  .mobile-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
  .topbar { grid-column: 1; padding: 0 16px; }
  .main-content { grid-column: 1; padding: 20px 16px 48px; }
  .connection-pill, .role-pill { display: none; }
  .search-trigger span, .search-trigger .kbd { display: none; }
  .search-trigger { width: 36px; padding: 0; justify-content: center; }
  .breakdown-grid { grid-template-columns: 1fr; }
  .chart-head { flex-direction: column; align-items: stretch; gap: 0; }
  .chart-head .segmented { align-self: flex-start; margin: 10px 16px 0; }
  .chart-tab { min-width: 128px; padding: 12px 16px; }
  .diag-options { grid-template-columns: 1fr; }
  .topbar-actions #publishButton { display: none; }
  .page-heading { flex-direction: column; align-items: flex-start; }
  .role-guide, .plan-grid { grid-template-columns: 1fr; }
  .enterprise-panel { flex-direction: column; align-items: flex-start; }
  .launch-next { flex-wrap: wrap; }
  .launch-next .btn { width: 100%; }
  .connection-desk-head code { display: none; }
  .canary-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .om-donut { grid-template-columns: 1fr; justify-items: center; }
  .om-legend { width: 100%; }
  .fact-grid, .risk-impact, .usage-stats, .theme-options { grid-template-columns: 1fr 1fr; }
  .usage-stats > :last-child { grid-column: 1 / -1; }
  .om-bar-row { grid-template-columns: minmax(60px, 0.8fr) minmax(0, 1fr) auto; }
  .om-bar-share { display: none; }
  .chart-body { padding: 12px 8px 8px; }
  .metric-grid, .billing-summary, #healthSummary, .setup-steps, .connection-desk-grid, .form-row, .check-grid, .settings-meta, .agent-context-grid, .plan-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-grid .metric-card { padding: 14px; }
  .kpi-grid .metric-card strong { font-size: 20px; }
  .kpi-grid .metric-card small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .chart-body { min-height: 0; }
  .endpoint-grid, .project-grid, .channel-grid { grid-template-columns: 1fr; }
  .table-panel thead { display: none; }
  .table-panel tr { display: grid; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .table-panel tr:last-child { border-bottom: 0; }
  .table-panel td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 6px 16px; border: 0; }
  .table-panel td::before { content: attr(data-label); font-size: var(--text-xs); color: var(--text-tertiary); }
  .table-panel .empty-row td { display: block; }
  .table-panel .empty-row td::before { content: none; }
  .delivery-event { grid-template-columns: auto 1fr; }
  .audit-entry { flex-direction: column; gap: 4px; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .btn { width: 100%; }
  .toast-region { right: 16px; left: 16px; bottom: 16px; width: auto; }
}
.diag-request .status, .risk-panel .status { text-transform: none; }
.import-result .status, .chip, .usage-panel .status { text-transform: none; }

/* Banners from Tellyport (announcements, read-only "view as") */
.platform-banners { display: grid; gap: 8px; margin-bottom: 14px; }
.platform-banners:empty { display: none; }
.platform-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--info-border); border-radius: var(--radius-lg); background: var(--info-soft); color: var(--text); font-size: var(--text-sm); }
.platform-banner a { color: inherit; font-weight: 600; }
.platform-banner.is-success { border-color: var(--success-border); background: var(--success-soft); }
.platform-banner.is-warning { border-color: var(--warning-border); background: var(--warning-soft); }
.platform-banner.is-critical, .platform-banner.is-view-as { border-color: var(--danger-border); background: var(--danger-soft); }
@media (max-width: 640px) { .platform-banner { flex-direction: column; align-items: flex-start; } }