/*
 * Panel look, loaded after panel.css: the light and dark themes a person picks for themselves, the shell (collapsible menu, top bar)
 * and the shared surfaces, controls and badges every panel page uses. Page layouts stay in the earlier layers.
 */

/* Two themes and one that follows the device. Earlier theme names (light, bugday, dark, mor, grafit, gece, system) still
   resolve, so a page cached before the change keeps a readable palette. --panel-accent is the accent as text and lines;
   --panel-accent-fill is the same accent behind white text, which on the dark ground has to be deeper to stay legible. */
:root, html[data-panel-theme=acik], html[data-panel-theme=sistem], html[data-panel-theme=light], html[data-panel-theme=bugday], html[data-panel-theme=system] {
    --panel-bg: #f5f7fb; --panel-surface: #fff; --panel-soft: #eff2f8; --panel-text: #0e1325; --panel-muted: #5f677d; --panel-subtle: #7a8197;
    --panel-line: #e3e7f0; --panel-input-line: #cfd5e2; --panel-accent: #2d5ff5; --panel-accent-fill: #2d5ff5; --panel-on-accent: #fff; --panel-tint: #eef3ff; --panel-accent-line: #2d5ff538;
    --panel-nav: #fff; --panel-nav-text: #5f677d; --panel-nav-active: #eef3ff; --panel-ink: #0e1325; --panel-on-ink: #fff; --panel-rail: #fff;
    --panel-series-1: #2d5ff5; --panel-series-2: #ff9f1a; --panel-series-2-soft: #fff1dc; --panel-series-2-text: #9a5a00;
    --panel-warn: #a15c00; --panel-warn-soft: #fff4e0; --panel-good: #067a4a; --panel-good-soft: #e6f7ee; --panel-good-fill: #0b8453; --panel-danger: #c8321f; --panel-danger-soft: #fdecea;
    --panel-sky: #0a7ea4; --panel-sky-soft: #e0f4fa; --panel-pink: #c21f68; --panel-pink-soft: #ffe6f0; --panel-coral: #d24a14; --panel-coral-soft: #ffeadf;
    --panel-sun: #ffb020; --panel-leaf: #19b56f; --panel-chart-grid: #dde2ec; --panel-brand-dot: #3366ff;
    --panel-shadow: 0 1px 2px #0e13250d, 0 8px 24px #0e13250f; --panel-radius: 18px; color-scheme: light;
}
html[data-panel-theme=koyu], html[data-panel-theme=dark], html[data-panel-theme=mor], html[data-panel-theme=grafit], html[data-panel-theme=gece] {
    --panel-bg: #0a0d16; --panel-surface: #11151f; --panel-soft: #181d2a; --panel-text: #edf0f7; --panel-muted: #a3aabd; --panel-subtle: #7f879c;
    --panel-line: #232939; --panel-input-line: #343c50; --panel-accent: #7096ff; --panel-accent-fill: #3a68f5; --panel-on-accent: #fff; --panel-tint: #7096ff1f; --panel-accent-line: #7096ff4d;
    --panel-nav: #11151f; --panel-nav-text: #a3aabd; --panel-nav-active: #7096ff1f; --panel-ink: #edf0f7; --panel-on-ink: #0a0d16; --panel-rail: #11151f;
    --panel-series-1: #7096ff; --panel-series-2: #ffb547; --panel-series-2-soft: #ffb54724; --panel-series-2-text: #ffc670;
    --panel-warn: #fdb022; --panel-warn-soft: #fdb02221; --panel-good: #3ccf8e; --panel-good-soft: #3ccf8e1f; --panel-good-fill: #0b8453; --panel-danger: #ff7b6e; --panel-danger-soft: #ff7b6e21;
    --panel-sky: #5cc8f0; --panel-sky-soft: #5cc8f01f; --panel-pink: #ff7ab6; --panel-pink-soft: #ff7ab61f; --panel-coral: #ff8f66; --panel-coral-soft: #ff8f6621;
    --panel-sun: #ffb547; --panel-leaf: #3ccf8e; --panel-chart-grid: #2a3142; --panel-brand-dot: #5b85ff;
    --panel-shadow: 0 1px 2px #0000004d, 0 12px 32px #00000047; --panel-radius: 18px; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    html[data-panel-theme=sistem], html[data-panel-theme=system] {
        --panel-bg: #0a0d16; --panel-surface: #11151f; --panel-soft: #181d2a; --panel-text: #edf0f7; --panel-muted: #a3aabd; --panel-subtle: #7f879c;
        --panel-line: #232939; --panel-input-line: #343c50; --panel-accent: #7096ff; --panel-accent-fill: #3a68f5; --panel-on-accent: #fff; --panel-tint: #7096ff1f; --panel-accent-line: #7096ff4d;
        --panel-nav: #11151f; --panel-nav-text: #a3aabd; --panel-nav-active: #7096ff1f; --panel-ink: #edf0f7; --panel-on-ink: #0a0d16; --panel-rail: #11151f;
        --panel-series-1: #7096ff; --panel-series-2: #ffb547; --panel-series-2-soft: #ffb54724; --panel-series-2-text: #ffc670;
        --panel-warn: #fdb022; --panel-warn-soft: #fdb02221; --panel-good: #3ccf8e; --panel-good-soft: #3ccf8e1f; --panel-good-fill: #0b8453; --panel-danger: #ff7b6e; --panel-danger-soft: #ff7b6e21;
        --panel-sky: #5cc8f0; --panel-sky-soft: #5cc8f01f; --panel-pink: #ff7ab6; --panel-pink-soft: #ff7ab61f; --panel-coral: #ff8f66; --panel-coral-soft: #ff8f6621;
        --panel-sun: #ffb547; --panel-leaf: #3ccf8e; --panel-chart-grid: #2a3142; --panel-brand-dot: #5b85ff;
        --panel-shadow: 0 1px 2px #0000004d, 0 12px 32px #00000047; --panel-radius: 18px; color-scheme: dark;
    }
}

/* ---------- Type ---------- */
.dashboard-page, .entry-page { --panel-font: "Figtree", ui-sans-serif, system-ui, sans-serif; --panel-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif; }
.dashboard-page { font-family: var(--panel-font); font-size: 14.5px; line-height: 1.5; }
.entry-page { font-family: var(--panel-font); }
.dashboard-page :is(input, select, textarea, button) { font-family: inherit; }
.dashboard-page h1 { font-family: var(--panel-display); font-size: 30px; font-weight: 650; letter-spacing: -.028em; }
.dashboard-page h2 { font-family: var(--panel-display); font-size: 17px; font-weight: 650; letter-spacing: -.012em; }
.dashboard-page .admin-intro { font-size: 14.5px; color: var(--panel-muted); }

/* ---------- Shell ---------- */
.dashboard-page .dashboard-shell { grid-template-columns: 264px minmax(0, 1fr); transition: grid-template-columns .2s ease; }
.dashboard-page .panel-sidebar { gap: 18px; padding: 18px 14px 14px; background: var(--panel-nav); border-right: 1px solid var(--panel-line); }
.dashboard-page .panel-sidebar svg { width: 19px; height: 19px; stroke-width: 1.85; }
.panel-sidebar-head { display: flex; align-items: center; gap: 8px; }
.panel-sidebar-head .panel-brand { flex: 1; min-width: 0; }
.dashboard-page .panel-brand { gap: 11px; font-family: var(--panel-display); font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.dashboard-page .panel-brand > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-page .panel-brand-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--panel-accent-fill); color: var(--panel-on-accent); font-family: var(--panel-display); font-size: 17px; }
.dashboard-page .panel-sidebar-toggle { flex-shrink: 0; }
.dashboard-page .panel-workspace { min-height: 52px; box-sizing: border-box; padding: 8px 10px; border-radius: 14px; background: var(--panel-soft); border-color: var(--panel-line); }
.dashboard-page .panel-workspace-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--panel-coral-soft); color: var(--panel-coral); font-weight: 700; }
.dashboard-page .panel-workspace-text strong { font-size: 14px; }
.dashboard-page .panel-nav { gap: 16px; }
.dashboard-page .panel-nav-group > p, .dashboard-page .panel-nav-group > summary { padding: 0 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--panel-subtle); }
.dashboard-page .panel-nav-group a, .dashboard-page .panel-nav-section > summary { gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--panel-nav-text); }
.dashboard-page .panel-nav-group a > svg, .dashboard-page .panel-nav-section > summary > svg:first-child { width: 17px; height: 17px; }
.dashboard-page .panel-nav-group a:hover, .dashboard-page .panel-nav-section > summary:hover { background: var(--panel-soft); color: var(--panel-text); }
.dashboard-page .panel-nav-group a[aria-current], .dashboard-page .panel-nav-section.is-active > summary { background: var(--panel-nav-active); color: var(--panel-accent); font-weight: 600; }
.dashboard-page .panel-nav-group a[aria-current] svg, .dashboard-page .panel-nav-section.is-active > summary > svg:first-child { color: var(--panel-accent); }
.dashboard-page .panel-inline-sections { margin: 2px 0 6px 21px; padding-left: 12px; border-left: 1px solid var(--panel-line); }
.dashboard-page .panel-inline-sections a { min-height: 32px; font-size: 13px; border-radius: 9px; }
.dashboard-page .panel-inline-sections a[aria-current] { background: transparent; color: var(--panel-accent); }
.dashboard-page .panel-inline-sections p { margin: 8px 0 2px; padding: 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--panel-subtle); }
.dashboard-page .panel-nav-count { min-width: 20px; height: 20px; border-radius: 99px; background: var(--panel-warn-soft); color: var(--panel-warn); font-size: 11.5px; font-weight: 700; }
.dashboard-page .panel-account { padding-top: 0; border-top: 0; }
.dashboard-page .panel-account-trigger { min-height: 58px; padding: 9px 10px; border-radius: 14px; border: 1px solid var(--panel-line); background: var(--panel-soft); }
.dashboard-page .panel-account-trigger:hover, .dashboard-page .panel-account-trigger[aria-expanded=true] { background: var(--panel-surface); border-color: var(--panel-input-line); }
.dashboard-page .panel-avatar { width: 38px; height: 38px; background: var(--panel-tint); color: var(--panel-accent); font-size: 14px; font-weight: 700; }
.panel-account-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.panel-account-text small { font-size: 12px; color: var(--panel-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-page .panel-account-name { font-size: 14px; font-weight: 600; }
.dashboard-page .panel-icon-button { width: 40px; height: 40px; min-height: 40px; border-radius: 11px; color: var(--panel-muted); }
.dashboard-page .panel-icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }

/* The menu folds to an icon rail; the choice is remembered on this device. */
@media (min-width: 901px) {
    html.panel-sidebar-collapsed .dashboard-page .dashboard-shell { grid-template-columns: 80px minmax(0, 1fr); }
    html.panel-sidebar-collapsed .panel-sidebar { padding-inline: 12px; align-items: center; }
    html.panel-sidebar-collapsed .panel-sidebar-head { flex-direction: column; gap: 12px; }
    html.panel-sidebar-collapsed .panel-brand > span:last-child,
    html.panel-sidebar-collapsed .panel-workspace-text,
    html.panel-sidebar-collapsed .panel-workspace > a,
    html.panel-sidebar-collapsed .panel-workspace-caption,
    html.panel-sidebar-collapsed .panel-nav-group > p,
    html.panel-sidebar-collapsed .panel-nav-group > summary,
    html.panel-sidebar-collapsed .panel-nav-group a > span,
    html.panel-sidebar-collapsed .panel-nav-section > summary > span,
    html.panel-sidebar-collapsed .panel-nav-chevron,
    html.panel-sidebar-collapsed .panel-inline-sections,
    html.panel-sidebar-collapsed .panel-mobile-sections,
    html.panel-sidebar-collapsed .panel-account-text,
    html.panel-sidebar-collapsed .panel-account-trigger > svg { display: none; }
    html.panel-sidebar-collapsed .dashboard-page .panel-brand { padding: 0; }
    html.panel-sidebar-collapsed .dashboard-page .panel-workspace { width: 52px; padding: 8px; justify-content: center; }
    html.panel-sidebar-collapsed .panel-nav { width: 100%; align-items: center; }
    html.panel-sidebar-collapsed .panel-nav-group { width: 100%; align-items: center; }
    html.panel-sidebar-collapsed details.panel-nav-group:not([open]) > :is(a, details) { display: flex; }
    html.panel-sidebar-collapsed .dashboard-page .panel-nav-group a, html.panel-sidebar-collapsed .dashboard-page .panel-nav-section > summary { position: relative; width: 48px; height: 46px; padding: 0; justify-content: center; }
    html.panel-sidebar-collapsed .panel-nav-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 4px; }
    html.panel-sidebar-collapsed .dashboard-page .panel-account-trigger { width: 54px; padding: 7px; justify-content: center; }
    html.panel-sidebar-collapsed .panel-sidebar-toggle svg { transform: scaleX(-1); }
    html.panel-sidebar-collapsed .panel-sidebar-head { justify-content: center; }
    html.panel-sidebar-collapsed .panel-nav-style-toggle, html.panel-sidebar-collapsed .dashboard-page .panel-nav-group > p.panel-nav-heading { display: none; }
    /* Folded, the market keeps a place in the rail as a bag icon. */
    html.panel-sidebar-collapsed .dashboard-page .panel-nav-group.is-link > p.panel-nav-heading { display: flex; justify-content: center; padding: 0; }
    html.panel-sidebar-collapsed .panel-nav-group.is-link :is(.panel-nav-logo, .panel-nav-name) { display: none; }
    html.panel-sidebar-collapsed .panel-nav-group.is-link .panel-nav-heading-icon { display: block; }
    html.panel-sidebar-collapsed .dashboard-page .panel-nav-group.is-link a.panel-nav-heading-link { flex: none; width: 48px; height: 46px; padding: 0; justify-content: center; }
}

.dashboard-page .dashboard-header { height: 68px; padding: 0 28px; background: var(--panel-surface); border-bottom: 1px solid var(--panel-line); }
.dashboard-page .dashboard-header svg { width: 19px; height: 19px; stroke-width: 1.85; }
.dashboard-page .header-context { font-size: 14px; color: var(--panel-muted); gap: 10px; }
.dashboard-page .panel-breadcrumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dashboard-page .panel-breadcrumbs a { color: var(--panel-muted); }
.dashboard-page .panel-breadcrumbs a:hover { color: var(--panel-text); }
.dashboard-page .panel-breadcrumbs > span[aria-hidden] { color: var(--panel-subtle); }
.dashboard-page .panel-breadcrumbs strong { color: var(--panel-text); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-page .panel-menu { width: 42px; height: 42px; min-height: 42px; border-radius: 12px; }
.header-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dashboard-page .header-tools .panel-icon-button { width: 42px; height: 42px; border: 1px solid var(--panel-line); background: var(--panel-surface); color: var(--panel-text); }
.dashboard-page .header-tools .panel-icon-button:hover, .dashboard-page .header-tools .panel-icon-button[aria-expanded=true] { background: var(--panel-soft); }

.dashboard-page .admin-main { max-width: 1520px; padding: 28px 32px 44px; margin-inline: auto; }

/* Theme picker: every theme shows its ground and its accent. */
.panel-theme-menu { width: 280px; }
.panel-theme-menu > p { margin: 4px 8px 8px; font-size: 12px; font-weight: 600; color: var(--panel-muted); }
.dashboard-page .panel-theme-choice, .panel-status-page .panel-theme-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 7px 9px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--panel-text); box-shadow: none; font: inherit; font-size: 14px; font-weight: 550; text-align: left; cursor: pointer; }
.dashboard-page .panel-theme-choice:hover, .panel-status-page .panel-theme-choice:hover { background: var(--panel-soft); border-color: transparent; }
.dashboard-page .panel-theme-choice[aria-checked=true], .panel-status-page .panel-theme-choice[aria-checked=true] { border-color: var(--panel-accent-line); background: var(--panel-tint); }
.panel-theme-choice > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.panel-theme-choice small { font-size: 12px; font-weight: 500; color: var(--panel-muted); }
.panel-theme-swatch { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; border: 1px solid #0000001f; overflow: hidden; }
.panel-theme-swatch::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--swatch-accent); }
.panel-theme-choice > svg { width: 18px; height: 18px; color: var(--panel-accent); visibility: hidden; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.panel-theme-choice[aria-checked=true] > svg { visibility: visible; }

/* ---------- Surfaces ---------- */
.dashboard-page :is(.admin-card, .overview-card) { border: 1px solid var(--panel-line); border-radius: 20px; background: var(--panel-surface); box-shadow: var(--panel-shadow); }
.dashboard-page .admin-card { padding: 22px; }
.dashboard-page .admin-stats article { border-radius: 18px; border-color: var(--panel-line); background: var(--panel-surface); }
.dashboard-page .admin-stats strong { font-family: var(--panel-display); }
.dashboard-page .page-heading h1 { margin-bottom: 4px; }
.dashboard-page .empty-state { border-radius: 16px; }

/* ---------- Controls ---------- */
.dashboard-page button:where(:not(.panel-menu):not(.panel-icon-button):not(.panel-theme-choice)), .dashboard-page .panel-button { min-height: 42px; padding: 9px 16px; border-radius: 12px; font-size: 14px; font-weight: 650; }
.dashboard-page button.secondary, .dashboard-page .panel-button:not(.primary):not(.ink) { border: 1px solid var(--panel-input-line); background: var(--panel-surface); color: var(--panel-text); }
.dashboard-page button.secondary:enabled:hover, .dashboard-page .panel-button:not(.primary):not(.ink):hover { background: var(--panel-soft); border-color: var(--panel-input-line); }
.dashboard-page :is(button.danger, .secondary.danger) { color: var(--panel-danger); border-color: color-mix(in srgb, var(--panel-danger) 45%, transparent); background: transparent; }
.dashboard-page :is(button.danger, .secondary.danger):enabled:hover { background: var(--panel-danger-soft); }
:where(.dashboard-page main) :where(select, textarea, input:not([type=checkbox], [type=radio], [type=color], [type=hidden], [type=file], [type=range])) { min-height: 44px; padding: 9px 13px; border-radius: 12px; border-color: var(--panel-line); background: var(--panel-soft); }
.dashboard-page .admin-form :is(input:not([type=checkbox]):not([type=radio]), select, textarea), .dashboard-page .admin-search input { min-height: 44px; border-radius: 12px; border-color: var(--panel-line); background: var(--panel-soft); padding: 9px 13px; }
.dashboard-page :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { border-color: var(--panel-accent); background: var(--panel-surface); box-shadow: 0 0 0 3px var(--panel-tint); }
.dashboard-page input:is([type=checkbox], [type=radio]) { accent-color: var(--panel-accent); }
.dashboard-page .panel-badge { border-radius: 99px; padding: 4px 10px; font-size: 12.5px; font-weight: 650; border-color: transparent; background: var(--panel-soft); color: var(--panel-muted); }
.dashboard-page .panel-badge.ready { background: var(--panel-good-soft); color: var(--panel-good); }
.dashboard-page .admin-notice { border-radius: 14px; border: 1px solid var(--panel-accent-line); background: var(--panel-tint); color: var(--panel-text); }
.dashboard-page .admin-error { border-radius: 14px; }

/* Tables and directories sit in one rounded frame. */
.dashboard-page .admin-table { border-radius: 16px; background: var(--panel-surface); }
.dashboard-page th { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--panel-subtle); }
.dashboard-page tbody tr:hover td, .dashboard-page tbody tr:hover th { background: var(--panel-soft); }
.dashboard-page .team-directory { border-radius: 20px; border: 1px solid var(--panel-line); background: var(--panel-surface); box-shadow: var(--panel-shadow); overflow: hidden; }
.dashboard-page .team-directory-head { background: transparent; border-bottom: 1px solid var(--panel-line); font-size: 11.5px; letter-spacing: .07em; }
.dashboard-page .team-directory-row { border-top: 1px solid var(--panel-line); font-size: 14px; }
.dashboard-page .team-directory-head + .team-directory-row { border-top: 0; }
.dashboard-page .member-avatar { border-radius: 50%; background: var(--panel-tint); color: var(--panel-accent); font-weight: 700; }

/* Drawers and popovers. */
.dashboard-page .management-drawer { border-radius: 24px 0 0 24px; background: var(--panel-surface); border-left: 1px solid var(--panel-line); }
.dashboard-page .management-heading h2 { font-size: 21px; }
.dashboard-page .management-role-choice { border-radius: 14px; }
.dashboard-page .management-picker-options { border-radius: 14px; border-color: var(--panel-line); background: var(--panel-soft); }
.panel-popover { border-radius: 16px; padding: 8px; box-shadow: 0 16px 48px #0000002e, 0 2px 6px #00000014; }
.dashboard-page .panel-popover .panel-popover-item { min-height: 40px; border-radius: 10px; font-size: 14px; }

/* Segmented controls: date ranges and page tabs. */
.dashboard-page .range-switch { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--panel-soft); border: 1px solid var(--panel-line); }
.dashboard-page .range-switch a { display: grid; place-items: center; min-height: 36px; padding: 0 14px; border-radius: 10px; color: var(--panel-muted); font-size: 13.5px; font-weight: 650; }
.dashboard-page .range-switch a[aria-current] { background: var(--panel-surface); color: var(--panel-text); box-shadow: 0 1px 3px #0000001f; }

@media (max-width: 900px) {
    .dashboard-page .dashboard-shell { grid-template-columns: minmax(0, 1fr); }
    .dashboard-page .panel-sidebar-toggle { display: none; }
    .dashboard-page .dashboard-header { padding: 0 14px; }
    .dashboard-page .admin-main { padding: 22px 16px 32px; }
}
@media (max-width: 600px) {
    .dashboard-page h1 { font-size: 25px; }
    .dashboard-page .header-tools { gap: 6px; }
}

/* Error and sign-in pages pick a theme from small swatches. */
.panel-theme-dots { display: flex; gap: 6px; }
.dashboard-page .panel-theme-dots button { position: relative; width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--panel-line); box-shadow: none; }
.dashboard-page .panel-theme-dots button::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--swatch-accent); }
.dashboard-page .panel-theme-dots button[aria-checked=true] { border-color: var(--panel-accent); }

/* ---------- Overview ---------- */
.ov { display: flex; flex-direction: column; gap: 20px; }
.ov svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.tone-accent { --tone: var(--panel-accent); --tone-soft: var(--panel-tint); }
.tone-sky { --tone: var(--panel-sky); --tone-soft: var(--panel-sky-soft); }
.tone-pink { --tone: var(--panel-pink); --tone-soft: var(--panel-pink-soft); }
.tone-good { --tone: var(--panel-good); --tone-soft: var(--panel-good-soft); }
.tone-warn { --tone: var(--panel-warn); --tone-soft: var(--panel-warn-soft); }
.tone-sun { --tone: var(--panel-sun); --tone-soft: var(--panel-warn-soft); }
.tone-leaf { --tone: var(--panel-leaf); --tone-soft: var(--panel-good-soft); }
.ov-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dashboard-page .ov-heading h1 { font-size: 32px; margin: 0 0 6px; }
.ov-heading p { margin: 0; color: var(--panel-muted); font-size: 14.5px; }
.ov-heading-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ov-channels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 4px; border-radius: 13px; background: var(--panel-soft); border: 1px solid var(--panel-line); }
.dashboard-page main .ov-channel { display: flex; align-items: center; gap: 9px; margin: 0; padding: 4px 10px 4px 6px; border-radius: 10px; font-size: 13.5px; font-weight: 650; }
.ov-channel small { font-weight: 500; color: var(--panel-muted); }
.ov-channel-actions { display: flex; gap: 6px; }
.ov-channel-actions[hidden] { display: none; }
.dashboard-page .ov-channel-actions button { min-height: 34px; padding: 5px 12px; border-radius: 9px; font-size: 13px; }
.ov-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.ov-card { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: 20px; background: var(--panel-surface); border: 1px solid var(--panel-line); box-shadow: var(--panel-shadow); }
.ov-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dashboard-page .ov-card-head h2 { margin: 0; font-size: 18px; }
.ov-card-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--panel-muted); }
.ov-muted, .ov-empty { margin: 0; color: var(--panel-muted); font-size: 13.5px; line-height: 1.55; }
.ov-empty { padding: 18px; border-radius: 14px; background: var(--panel-soft); text-align: center; }
.ov-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tone-soft); color: var(--tone); }
.ov-icon svg { width: 19px; height: 19px; stroke-width: 1.9; }
.ov-bar { height: 7px; border-radius: 99px; background: var(--panel-soft); overflow: hidden; }
.ov-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--tone, var(--panel-accent)); }
.ov-share-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; }
.ov-share-top > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.ov-share-top i { flex-shrink: 0; width: 9px; height: 9px; border-radius: 3px; }
.ov-share-top > span:last-child { color: var(--panel-muted); white-space: nowrap; }
.ov-share-top strong { color: var(--panel-text); font-weight: 650; font-variant-numeric: tabular-nums; }
.ov-eyebrow { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--panel-muted); }

.ov-pulse { flex: 1 1 320px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px; background: var(--panel-tint); border: 1px solid var(--panel-accent-line); }
.ov-pulse-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-pulse-head span { display: flex; align-items: center; gap: 10px; color: var(--panel-accent); font-size: 14px; font-weight: 650; }
.ov-pulse-head i { width: 10px; height: 10px; border-radius: 50%; background: var(--panel-leaf); box-shadow: 0 0 0 5px var(--panel-good-soft); animation: ov-pulse 2s ease-in-out infinite; }
@keyframes ov-pulse { 50% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .ov-pulse-head i { animation: none; } }
.ov-pulse-head small { color: var(--panel-muted); font-size: 12.5px; }
.ov-pulse-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ov-pulse-main p { margin: 0; color: var(--panel-muted); font-size: 15px; }
.ov-pulse-main strong { margin-right: 6px; color: var(--panel-text); font-family: var(--panel-display); font-size: 56px; font-weight: 650; letter-spacing: -.04em; line-height: .9; }
.ov-pulse-main svg { width: 46%; height: 44px; overflow: visible; stroke: var(--panel-accent); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.ov-pulse-main svg polyline { vector-effect: non-scaling-stroke; }
.ov-split { display: flex; gap: 3px; height: 10px; border-radius: 99px; overflow: hidden; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--panel-muted); }
.ov-legend span { display: flex; align-items: center; gap: 6px; }
.ov-legend i { width: 8px; height: 8px; border-radius: 50%; }
.ov-pulse-pages { padding-top: 12px; border-top: 1px solid var(--panel-accent-line); }
.ov-pulse-pages p { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--panel-muted); }
.ov-pulse-pages div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; }
.ov-pulse-pages span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ov-kpis { flex: 2 1 540px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: stretch; }
.ov-top:has(> .ov-pulse[hidden]) .ov-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ov-kpis:not(:has(> :not([hidden]))) { display: none; }
.ov [data-ov-widget][hidden] { display: none !important; }
@media (max-width: 1180px) { .ov-top:has(> .ov-pulse[hidden]) .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ov-kpis { grid-template-columns: minmax(0, 1fr); } }
.ov-kpi { gap: 10px; padding: 18px; }
.ov-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ov-kpi-label { display: flex; align-items: center; gap: 10px; color: var(--panel-muted); font-size: 13.5px; font-weight: 600; }
.ov-kpi-label .ov-icon { width: 34px; height: 34px; border-radius: 11px; }
.ov-kpi-label .ov-icon svg { width: 17px; height: 17px; }
.ov-delta { padding: 3px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ov-delta.up { background: var(--panel-good-soft); color: var(--panel-good); }
.ov-delta.down { background: var(--panel-danger-soft); color: var(--panel-danger); }
.ov-kpi-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ov-kpi-main strong { font-family: var(--panel-display); font-size: 32px; font-weight: 650; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ov-kpi-main svg { width: 48%; height: 34px; overflow: visible; stroke: var(--tone); stroke-width: 2.2; }
.ov-kpi-main svg polyline { vector-effect: non-scaling-stroke; }
.ov-kpi small { color: var(--panel-muted); font-size: 12.5px; }

.ov-split-row > .ov-trend, .ov-split-row > .ov-audience { flex: 2 1 540px; }
.ov-split-row > .ov-funnel, .ov-split-row > .ov-pages { flex: 1 1 320px; }
.ov-trend-legend { display: flex; gap: 18px; }
.ov-trend-legend span { display: flex; flex-direction: column; gap: 2px; }
.ov-trend-legend small { display: flex; align-items: center; gap: 7px; color: var(--panel-muted); font-size: 12.5px; }
.ov-trend-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--tone); }
.ov-trend-legend strong { font-size: 16px; font-weight: 650; }
.ov-chart { display: flex; gap: 10px; }
.ov-chart-axis { display: flex; flex-direction: column; justify-content: space-between; height: 220px; color: var(--panel-subtle); font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; }
.ov-chart-plot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ov-chart-plot svg { width: 100%; height: 220px; overflow: visible; }
.ov-chart-plot .grid { stroke: var(--panel-chart-grid); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.ov-chart-plot .bars { fill: var(--panel-sun); stroke: none; opacity: .85; }
.ov-chart-plot .area { fill: var(--panel-accent); stroke: none; opacity: .14; }
.ov-chart-plot .line { stroke: var(--panel-accent); stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.ov-chart-labels { display: flex; justify-content: space-between; gap: 4px; color: var(--panel-muted); font-size: 12px; }
.ov-chart-labels span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; }
.ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding-top: 14px; border-top: 1px solid var(--panel-line); }
.ov-stats small { display: block; color: var(--panel-muted); font-size: 12.5px; }
.ov-stats strong { display: block; margin-top: 3px; font-size: 17px; font-weight: 650; }
.ov-step { display: flex; gap: 12px; }
.ov-step > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-step-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.ov-step-top strong { font-family: var(--panel-display); font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ov-step small { color: var(--panel-muted); font-size: 12.5px; }

.ov-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 13px; background: var(--panel-soft); }
.dashboard-page .ov-tabs button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--panel-muted); font-size: 13px; font-weight: 650; }
.dashboard-page .ov-tabs button:enabled:hover { background: transparent; color: var(--panel-text); }
.dashboard-page .ov-tabs button[aria-selected=true] { background: var(--panel-surface); color: var(--panel-text); box-shadow: 0 1px 3px #0000001f; }
.ov-audience-panel:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.ov-donut { position: relative; flex-shrink: 0; width: 180px; height: 180px; }
.ov-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ov-donut circle { fill: none; stroke-width: 6; }
.ov-donut > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 30px; }
.ov-donut strong { font-family: var(--panel-display); font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.ov-donut span { max-width: 100%; color: var(--panel-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-share { flex: 1 1 260px; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ov-share li { display: flex; align-items: center; gap: 12px; }
.ov-share li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ov-share .ov-bar { height: 6px; }
.ov-code { flex-shrink: 0; min-width: 34px; height: 26px; padding: 0 6px; box-sizing: border-box; border-radius: 8px; display: grid; place-items: center; background: var(--panel-soft); border: 1px solid var(--panel-line); color: var(--panel-muted); font-size: 11.5px; font-weight: 700; }
.ov-page { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 11px; overflow: hidden; font-size: 14px; }
.ov-page-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 11px; background: var(--panel-tint); }
.ov-page-name { position: relative; min-width: 0; display: flex; flex-direction: column; }
.ov-page-name strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-page-name small { color: var(--panel-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-page > strong { position: relative; font-weight: 650; font-variant-numeric: tabular-nums; }

.ov-support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; }
.ov-support-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ov-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ov-tiles > div { padding: 14px; border-radius: 14px; background: var(--tone-soft); }
.ov-tiles small { display: block; color: var(--tone); font-size: 12.5px; font-weight: 650; }
.ov-tiles strong { display: block; margin-top: 6px; font-family: var(--panel-display); font-size: 25px; font-weight: 650; letter-spacing: -.02em; line-height: 1; }
.ov-tiles span { display: block; margin-top: 6px; color: var(--panel-muted); font-size: 12px; }
.ov-queue { display: flex; flex-direction: column; gap: 6px; }
.dashboard-page .ov-queue a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--panel-line); color: var(--panel-text); }
.dashboard-page .ov-queue a:hover { background: var(--panel-soft); }
.ov-queue-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ov-queue-name strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-queue-name small { color: var(--panel-muted); font-size: 12px; }
.ov-agent { display: flex; align-items: center; gap: 12px; }
.ov-agent > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-agent .panel-avatar { position: relative; width: 36px; height: 36px; }
.ov-agent .panel-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--panel-surface); background: var(--panel-input-line); }
.ov-agent .presence-online::after { background: var(--panel-leaf); }
.ov-agent .presence-away::after { background: var(--panel-sun); }
.ov-dept { display: flex; flex-direction: column; gap: 6px; }
.dashboard-page .panel-badge.warn { background: var(--panel-warn-soft); color: var(--panel-warn); }
.dashboard-page .panel-badge.info { background: var(--panel-sky-soft); color: var(--panel-sky); }
@media (max-width: 600px) {
    .ov-pulse-main strong { font-size: 44px; }
    .ov-audience-panel:not([hidden]) { justify-content: center; }
}

/* ---------- Shell, as designed: brand, site switch, account card, search, availability and section tabs ---------- */
.dashboard-page .panel-brand-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-page .panel-brand { gap: 10px; min-width: 0; }
.panel-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-brand-badge { flex-shrink: 0; padding: 3px 7px; border-radius: 7px; background: var(--panel-tint); color: var(--panel-accent); font-family: var(--panel-font); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.dashboard-page .panel-site-switch { display: flex; align-items: center; gap: 10px; min-height: 52px; box-sizing: border-box; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--panel-line); background: var(--panel-soft); color: var(--panel-text); text-decoration: none; }
.dashboard-page a.panel-site-switch:hover { border-color: var(--panel-input-line); background: var(--panel-surface); }
.panel-site-switch .panel-workspace-text { flex: 1; min-width: 0; }
.dashboard-page .panel-site-switch .panel-workspace-text strong { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-page .panel-site-switch .panel-workspace-text small { display: block; font-size: 12px; color: var(--panel-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-page .panel-site-switch-icon { width: 16px; height: 16px; color: var(--panel-muted); }
.dashboard-page .panel-nav-group { gap: 2px; }
.dashboard-page .panel-avatar { position: relative; }
.panel-presence-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--panel-soft); background: var(--panel-input-line); }
.panel-presence-dot.presence-online { background: var(--panel-leaf); }
.panel-presence-dot.presence-away { background: var(--panel-sun); }
html.panel-sidebar-collapsed .panel-site-switch .panel-workspace-text, html.panel-sidebar-collapsed .panel-site-switch-icon, html.panel-sidebar-collapsed .panel-brand-badge, html.panel-sidebar-collapsed .panel-brand-name { display: none; }
@media (min-width: 901px) { html.panel-sidebar-collapsed .dashboard-page .panel-site-switch { width: 52px; padding: 8px; justify-content: center; } }

.panel-search { position: relative; display: flex; align-items: center; gap: 10px; width: clamp(220px, 28vw, 400px); height: 44px; box-sizing: border-box; margin: 0; padding: 0 12px 0 14px; border-radius: 12px; border: 1px solid var(--panel-line); background: var(--panel-soft); color: var(--panel-muted); }
.panel-search:focus-within { border-color: var(--panel-accent); background: var(--panel-surface); box-shadow: 0 0 0 3px var(--panel-tint); }
.dashboard-page .panel-search > svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dashboard-page .panel-search input { flex: 1; min-width: 0; min-height: 0; height: 40px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--panel-text); font-size: 14px; }
.dashboard-page .panel-search input:focus { box-shadow: none; background: transparent; }
.dashboard-page .panel-search input::-webkit-search-cancel-button { display: none; }
.panel-search kbd { flex-shrink: 0; padding: 3px 7px; border-radius: 7px; border: 1px solid var(--panel-input-line); color: var(--panel-muted); font: inherit; font-size: 12px; font-weight: 600; }
.panel-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: 380px; overflow-y: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--panel-line); background: var(--panel-surface); box-shadow: 0 16px 48px #0000002e; }
.panel-search-results[hidden] { display: none; }
.panel-search-results p { margin: 0; padding: 10px; color: var(--panel-muted); font-size: 13.5px; }
.dashboard-page .panel-search-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: 10px; color: var(--panel-text); font-size: 14px; text-decoration: none; }
.dashboard-page .panel-search-option[aria-selected=true], .dashboard-page .panel-search-option:hover { background: var(--panel-soft); }
.panel-search-option.action span { color: var(--panel-accent); font-weight: 600; }
.panel-search-option small { color: var(--panel-muted); font-size: 12px; white-space: nowrap; }

.dashboard-page .panel-presence-button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--panel-line); background: var(--panel-surface); color: var(--panel-text); font-size: 14px; font-weight: 650; }
.panel-presence-button i, .panel-presence-option i { width: 9px; height: 9px; border-radius: 50%; background: var(--panel-input-line); }
.dashboard-page .panel-presence-button.presence-online { background: var(--panel-good-soft); color: var(--panel-good); border-color: transparent; }
.dashboard-page .panel-presence-button.presence-away { background: var(--panel-warn-soft); color: var(--panel-warn); border-color: transparent; }
.panel-presence-button.presence-online i, .panel-presence-option.presence-online i { background: var(--panel-leaf); }
.panel-presence-button.presence-away i, .panel-presence-option.presence-away i { background: var(--panel-sun); }
.panel-presence-menu { width: 260px; }
.panel-presence-menu form { margin: 0; }
.panel-presence-menu fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 2px; }
.panel-presence-menu legend { margin: 4px 8px 8px; padding: 0; font-size: 12px; font-weight: 600; color: var(--panel-muted); }
.dashboard-page .panel-presence-option { position: relative; display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 0; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.panel-presence-option input { position: absolute; opacity: 0; pointer-events: none; }
.dashboard-page .panel-presence-option:hover { background: var(--panel-soft); }
.dashboard-page .panel-presence-option:has(input:checked) { background: var(--panel-tint); color: var(--panel-accent); }
.dashboard-page .panel-presence-option:has(input:focus-visible) { outline: 2px solid var(--panel-accent); outline-offset: 1px; }
.panel-presence-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.panel-presence-load, .panel-presence-hint { margin: 8px 10px 4px; color: var(--panel-muted); font-size: 12.5px; }

.panel-tabs { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin: -6px 0 24px; padding: 0 2px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--panel-line); }
.dashboard-page .panel-tabs a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--panel-muted); font-size: 14px; font-weight: 550; text-decoration: none; white-space: nowrap; }
.dashboard-page .panel-tabs a:hover { color: var(--panel-text); }
.dashboard-page .panel-tabs a[aria-current] { color: var(--panel-text); font-weight: 650; border-bottom-color: var(--panel-accent); }
.panel-tabs-gap { flex: none; width: 1px; height: 18px; margin: 0 8px; background: var(--panel-line); }
@media (max-width: 1100px) { .panel-search { width: 44px; padding: 0; justify-content: center; } .panel-search:focus-within { position: absolute; left: 14px; right: 14px; width: auto; z-index: 70; padding: 0 12px; justify-content: flex-start; } .panel-search:not(:focus-within) :is(input, kbd) { position: absolute; opacity: 0; width: 1px; } }
@media (max-width: 760px) { .dashboard-page .panel-presence-button span { display: none; } .dashboard-page .panel-presence-button { padding: 0 14px; } }

.dashboard-page .ov-customize { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--panel-line); border-radius: 12px; background: var(--panel-surface); color: var(--panel-text); font-size: 14px; font-weight: 650; }
.dashboard-page .ov-customize svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.ov-widget-menu { width: 280px; }
.ov-widget-menu form { margin: 0; }
.ov-widget-menu p { margin: 4px 8px 8px; color: var(--panel-muted); font-size: 12px; font-weight: 600; }
.dashboard-page .ov-widget-option { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 0 10px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.dashboard-page .ov-widget-option:hover { background: var(--panel-soft); }
.dashboard-page .ov-widget-option input { width: 18px; height: 18px; margin: 0; }
.chat-window-channel-list { display: flex; flex-direction: column; gap: 8px; }
.dashboard-page .channel-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 14px; border-radius: 14px; border: 1px solid var(--panel-line); background: var(--panel-soft); }
.channel-row strong { display: block; font-size: 14.5px; }
.channel-row small { display: block; margin-top: 2px; color: var(--panel-muted); font-size: 13px; }
.chat-window-channel-actions { display: flex; gap: 8px; margin-top: 12px; }
.chat-window-channel-actions[hidden] { display: none; }

.dashboard-page .header-context .panel-sidebar-toggle { margin-left: -8px; }

/* ---------- Page layouts: one-line forms, chat window tiles, services, site info ---------- */
/* A custom select keeps its own width inside a one-line form instead of taking the whole row and pushing the rest down. */
.dashboard-page :is(.inline-create, .list-toolbar, .panel-toolbar, .topic-row, .folder-row) > .panel-select { width: auto; flex: 0 1 220px; min-width: 150px; margin: 0; }

/* Chat window: whether it shows on the site and who answers in it, as three tiles in one row. */
.chat-switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.chat-switches .chat-window-channels, .chat-switches .chat-window-channel-list { display: contents; }
.chat-switches .chat-window-channel-actions { grid-column: 1 / -1; margin: 0; }
.chat-switches .chat-switch { margin: 0; }
.dashboard-page .chat-switches :is(.chat-switch label, .channel-row) { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; height: 100%; box-sizing: border-box; margin: 0; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--panel-line); background: var(--panel-surface); cursor: pointer; }
.chat-switches strong { display: block; font-size: 14.5px; font-weight: 650; }
.chat-switches small { display: block; margin-top: 3px; color: var(--panel-muted); font-size: 12.5px; font-weight: 400; }
.chat-switches .switch { flex: 0 0 40px; }
.chat-switch-note { display: block; margin: 0; padding: 16px 18px; border-radius: 16px; border: 1px dashed var(--panel-line); color: var(--panel-muted); font-size: 13px; }
@media (max-width: 900px) { .chat-switches { grid-template-columns: minmax(0, 1fr); } }

/* Services the assistant found: compact cards grouped by where they came from, with the scan settings beside them. */
.services-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.services-side { display: flex; flex-direction: column; gap: 16px; }
.services-side .settings-card, .services-catalog { padding: 22px; }
.services-catalog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dashboard-page .services-catalog-head h2 { margin: 0 0 6px; font-size: 18px; }
.services-status { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--panel-muted); font-size: 13px; font-weight: 600; }
.services-status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.services-status.tone-good { color: var(--panel-good); }
.services-status.tone-warn { color: var(--panel-warn); }
.services-status.tone-danger { color: var(--panel-danger); }
.services-dates { display: block; margin-top: 4px; color: var(--panel-subtle); font-size: 12px; }
.services-search { position: relative; flex: 0 1 260px; display: flex; align-items: center; }
.services-search svg { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--panel-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.dashboard-page .services-search input { width: 100%; margin: 0; padding-left: 36px; }
.services-group + .services-group { margin-top: 22px; }
.dashboard-page .services-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--panel-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.services-group h3 span { padding: 1px 7px; border-radius: 99px; background: var(--panel-soft); color: var(--panel-text); font-size: 11.5px; letter-spacing: 0; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.service-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--panel-line); background: var(--panel-soft); }
.service-card[hidden], .services-group[hidden] { display: none; }
.service-card-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dashboard-page .service-card-head :is(a, strong) { overflow: hidden; color: var(--panel-text); font-size: 14px; font-weight: 650; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-page .service-card-head a:hover strong { color: var(--panel-accent); }
.service-card-head small { color: var(--panel-muted); font-size: 12px; }
.service-caps { display: flex; flex-wrap: wrap; gap: 5px; }
.service-caps span { padding: 2px 8px; border-radius: 99px; background: var(--panel-tint); color: var(--panel-accent); font-size: 11.5px; font-weight: 650; }
.service-caps span.tone-warn { background: var(--panel-warn-soft); color: var(--panel-warn); }
.service-terms summary { color: var(--panel-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.service-terms :is(small, p) { display: block; margin: 4px 0 0; color: var(--panel-muted); font-size: 12px; }
.services-capability-note, .services-empty-search { margin: 20px 0 0; color: var(--panel-subtle); font-size: 12.5px; }
.services-empty-search[hidden] { display: none; }
.services-side-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.dashboard-page .services-side-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; }
.dashboard-page .services-side-form :is(input, select, .panel-select) { width: 100%; margin: 0; }
.services-side-form button { align-self: flex-start; }
@media (max-width: 1100px) { .services-shell { grid-template-columns: minmax(0, 1fr); } }

/* Site info: the site form with a short pointer to the services found on it. */
.settings-columns.site-info-layout { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); }
.site-info-side { display: flex; flex-direction: column; gap: 14px; }
.site-info-stat { display: flex; align-items: baseline; gap: 8px; }
.site-info-stat strong { font-family: var(--panel-display); font-size: 34px; font-weight: 700; }
.site-info-stat span { color: var(--panel-muted); }
.site-info-side .panel-button { align-self: flex-start; }
@media (max-width: 1100px) { .settings-columns.site-info-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Overview: values on hover and links to the detail pages ---------- */
.panel-tip { position: fixed; z-index: 1000; max-width: min(420px, calc(100vw - 16px)); padding: 6px 10px; border-radius: 8px; background: var(--panel-text); color: var(--panel-surface); box-shadow: 0 8px 24px #0000003d; font-size: 12px; font-weight: 600; line-height: 1.4; pointer-events: none; overflow-wrap: anywhere; }
.panel-tip[hidden] { display: none; }
.ov-spark { position: relative; display: block; flex: none; min-width: 0; }
.ov-pulse-main .ov-spark { width: 46%; }
.ov-kpi-main .ov-spark { width: 48%; }
.ov-pulse-main .ov-spark > svg, .ov-kpi-main .ov-spark > svg { display: block; width: 100%; }
.ov-hits { position: absolute; inset: 0; }
.ov-hits > span { position: absolute; top: 0; bottom: 0; cursor: crosshair; }
.ov-hits > span:hover { background: linear-gradient(to right, transparent calc(50% - .5px), var(--panel-input-line) calc(50% - .5px), var(--panel-input-line) calc(50% + .5px), transparent calc(50% + .5px)); }
.ov-chart-plot { position: relative; }
.ov-chart-hits { bottom: 24px; }
.ov-donut svg { pointer-events: none; }
.ov-donut circle { pointer-events: stroke; cursor: crosshair; }
.ov-page[data-tip] { cursor: default; }
.ov-more { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--panel-accent); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ov-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.ov-more:hover svg { transform: translateX(2px); }
.ov-pulse-head .ov-more { font-size: 12.5px; }
.dashboard-page a.ov-kpi { display: flex; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.dashboard-page a.ov-kpi:hover { border-color: var(--panel-accent-line); }
.dashboard-page a.ov-kpi:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 2px; }
.ov-audience .ov-card-head p a { color: var(--panel-accent); font-weight: 600; text-decoration: none; }

/* ---------- Chat history: one filter bar, and each row opens its chat ---------- */
.dashboard-page .history-card { padding: 0; overflow: hidden; }
.dashboard-page .history-filters { border-bottom: 1px solid var(--panel-line); }
.history-search { position: relative; display: flex; align-items: center; }
.history-search svg { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--panel-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.dashboard-page .panel-toolbar.history-filters .history-search input[type=search] { width: 100%; padding-left: 36px; }
.history-note { margin: 10px 20px 0; }
.history-summary { display: flex; align-items: baseline; gap: 6px; padding: 16px 20px 8px; font-size: 14px; }
.history-summary span { color: var(--panel-muted); font-size: 13px; }
.dashboard-page .history-table { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.dashboard-page .history-table tbody tr { position: relative; }
.dashboard-page .history-table tbody tr:hover { background: var(--panel-soft); }
.dashboard-page .history-open { color: inherit; text-decoration: none; }
.history-open::after { content: ''; position: absolute; inset: 0; }
.history-open strong { display: block; }
.history-open small { display: block; max-width: 52ch; overflow: hidden; color: var(--panel-muted); text-overflow: ellipsis; white-space: nowrap; }
.history-open:focus-visible { outline: none; }
.history-table tbody tr:has(.history-open:focus-visible) { outline: 2px solid var(--panel-accent); outline-offset: -2px; }
.history-date { color: var(--panel-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-none { color: var(--panel-subtle); }
.dashboard-page .history-card > nav, .dashboard-page .history-card > .pagination { padding: 12px 20px 16px; }
.dashboard-page .management-drawer .management-details > p { color: var(--panel-muted); font-size: 13px; }
/* Search gets the first line; the filters share the second one instead of leaving a single field on its own. */
.dashboard-page .panel-toolbar.history-filters > .history-search { flex: 1 1 100%; }
.dashboard-page .panel-toolbar.history-filters > :is(select, .panel-select) { flex: 1 1 150px; width: auto; min-width: 140px; }
.dashboard-page .panel-toolbar.history-filters > label { flex: 0 1 160px; }

/* ---------- Lists and tables stay inside their cards ---------- */
/* A grid track grows to its longest unbreakable line unless told otherwise; that pushed long page addresses out of the card. */
.analytics-bars { grid-template-columns: minmax(0, 1fr); }
.analytics-bars li { min-width: 0; cursor: default; }
.analytics-path span, .analytics-source span { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-source span { max-width: 170px; }
:is(.analytics-device, .analytics-pair) small { display: block; color: var(--panel-muted); font-size: 11.5px; }

/* Chat history: the title shortens before the table grows; narrower screens leave out the department and tag columns. */
.history-open small { max-width: 36ch; }
@media (max-width: 1180px) { .dashboard-page .history-table :is(th, td):is(:nth-child(3), :nth-child(5)) { display: none; } }

/* People, role and department lists switch to two lines per row when they get narrow, e.g. beside the member panel. */
.team-directory { container: directory / inline-size; }
@container directory (max-width: 760px) {
    .dashboard-page .team-directory .team-directory-head { display: none; }
    .dashboard-page .team-directory .team-directory-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; min-height: 0; padding: 14px 18px; }
    .dashboard-page .team-directory .team-directory-row > * { min-width: 0; }
    .dashboard-page .team-directory:not(.role-directory):not(.department-directory) .team-directory-row > :nth-child(1) { grid-area: 1 / 1; }
    .dashboard-page .team-directory:not(.role-directory):not(.department-directory) .team-directory-row > :nth-child(2) { grid-area: 2 / 1; justify-self: start; }
    .dashboard-page .team-directory:not(.role-directory):not(.department-directory) .team-directory-row > :nth-child(3) { grid-area: 2 / 2; justify-self: end; color: var(--panel-muted); font-size: 12.5px; }
    .dashboard-page .team-directory:not(.role-directory):not(.department-directory) .team-directory-row > :nth-child(4) { grid-area: 1 / 2; justify-self: end; }
    .dashboard-page .team-directory:not(.role-directory):not(.department-directory) .team-directory-row > :nth-child(5) { display: none; }
    .dashboard-page .department-directory .team-directory-row > :nth-child(1) { grid-area: 1 / 1; }
    .dashboard-page .department-directory .team-directory-row > :nth-child(2) { grid-area: 2 / 1; color: var(--panel-muted); font-size: 12.5px; }
    .dashboard-page .department-directory .team-directory-row > :nth-child(3) { grid-area: 2 / 2; justify-self: end; color: var(--panel-muted); font-size: 12.5px; }
    .dashboard-page .department-directory .team-directory-row > :nth-child(4) { grid-area: 1 / 2; justify-self: end; }
    .dashboard-page .role-directory .team-directory-row > :nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
    .dashboard-page .role-directory .team-directory-row > :nth-child(2) { grid-area: 1 / 2; justify-self: end; }
    .dashboard-page .role-directory .team-directory-row > :nth-child(3) { grid-area: 2 / 2; justify-self: end; color: var(--panel-muted); font-size: 12.5px; }
}
.workflow-stack, .topic-list { grid-template-columns: minmax(0, 1fr); }
/* Inbox list: the status tabs tighten when the list is dragged narrow, so a count never runs into the next tab. */
.vue-inbox .vi-members { container: vi-list / inline-size; }
@container vi-list (max-width: 330px) { .dashboard-page .vi-status-tabs a { gap: 4px; padding: 0 5px; font-size: 12.5px; } .dashboard-page .vi-status-tabs span { padding: 0 5px; } }
@container vi-list (max-width: 280px) { .dashboard-page .vi-status-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Overview quick settings and the panel's confirm dialog ---------- */
.ov-quick { margin-bottom: 20px; }
.ov-quick .ov-card-head { margin-bottom: 14px; }
.ov-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; }
.ov-quick-group { min-width: 0; margin: 0; padding: 0 24px; border-left: 1px solid var(--panel-line); }
.ov-quick-group:first-child { padding-left: 0; border-left: 0; }
.ov-quick-group:last-child { padding-right: 0; }
.dashboard-page .ov-quick-group h3 { margin: 0 0 12px; color: var(--panel-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-page label.ov-quick-switch { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; background: var(--panel-soft); font-weight: 400; cursor: pointer; }
.ov-quick-switch strong { display: block; font-size: 14px; font-weight: 650; }
.ov-quick-switch small { display: block; color: var(--panel-muted); font-size: 12.5px; }
.ov-quick-switch .switch { flex: 0 0 40px; }
.ov-quick-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ov-quick-fields form { min-width: 0; margin: 0; }
.dashboard-page .ov-quick-fields label { display: flex; flex-direction: column; gap: 6px; margin: 0; color: var(--panel-muted); font-size: 12.5px; font-weight: 600; }
.dashboard-page .ov-quick-fields input { width: 100%; min-width: 0; margin: 0; }
.ov-quick-fields small { display: block; margin-top: 6px; color: var(--panel-subtle); font-size: 12px; }
.ov-quick-save { display: flex; gap: 8px; margin-top: 10px; }
.ov-quick-save[hidden] { display: none; }
.dashboard-page .ov-quick-save button { min-height: 34px; padding: 0 14px; }
@media (max-width: 900px) { .ov-quick-group { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--panel-line); } .ov-quick-group:first-child { padding-top: 0; border-top: 0; } }
.panel-confirm { width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--panel-line); border-radius: 18px; background: var(--panel-surface); color: var(--panel-text); box-shadow: 0 24px 60px #0000004d; }
.panel-confirm::backdrop { background: #0b0d1a8c; }
.panel-confirm p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; }
.panel-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.panel-confirm { position: fixed; inset: 0; height: fit-content; margin: auto; }
.dashboard-page .panel-confirm-actions button[value="ok"] { border-color: var(--panel-accent); background: var(--panel-accent-fill); color: var(--panel-on-accent); }

/* A segmented scope switch beside a filter bar: the bar keeps no margin of its own, and both share one height. */
.dashboard-page .list-toolbar { align-items: center; }
.dashboard-page .list-toolbar > .panel-toolbar { margin: 0; flex: 1 1 480px; justify-content: flex-end; align-items: center; }
.dashboard-page .list-toolbar > .segmented { box-sizing: border-box; height: var(--panel-control-height, 42px); margin: 0; align-items: stretch; flex: none; }
.dashboard-page .list-toolbar > .segmented a { display: flex; align-items: center; }

/* Balance in the top bar: the amount at a glance, and a short spend summary underneath. */
.dashboard-page .panel-wallet-button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--panel-line); background: var(--panel-surface); color: var(--panel-text); font-size: 14px; font-weight: 650; white-space: nowrap; }
.dashboard-page .panel-wallet-button:hover, .dashboard-page .panel-wallet-button[aria-expanded="true"] { background: var(--panel-soft); }
.panel-wallet-button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--panel-muted); }
.panel-wallet-menu { width: 300px; padding: 14px; }
.panel-wallet-balance { display: grid; gap: 2px; padding: 4px 4px 12px; border-bottom: 1px solid var(--panel-line); }
.panel-wallet-balance small { color: var(--panel-muted); font-size: 12px; font-weight: 600; }
.panel-wallet-balance strong { font-family: var(--panel-display, inherit); font-size: 26px; font-weight: 650; letter-spacing: -.5px; }
.panel-wallet-balance span { color: var(--panel-subtle); font-size: 12px; }
.panel-wallet-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 12px; margin: 12px 4px; font-size: 13px; }
.panel-wallet-facts dt { color: var(--panel-muted); }
.panel-wallet-facts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dashboard-page .panel-wallet-menu .panel-wallet-link { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 10px; background: var(--panel-accent-fill); color: var(--panel-on-accent); font-size: 13.5px; font-weight: 650; text-decoration: none; }
@media (max-width: 760px) { .dashboard-page .panel-wallet-button span { display: none; } .dashboard-page .panel-wallet-button { padding: 0 13px; } }

/* Admin overview: this month's model cost in four figures above the per-model and per-site tables. */
.platform-spend-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.platform-spend-totals div { min-width: 0; padding: 14px 16px; border: 1px solid var(--panel-line); border-radius: 14px; background: var(--panel-soft); }
.platform-spend-totals dt { color: var(--panel-muted); font-size: 12px; font-weight: 600; }
.platform-spend-totals dd { margin: 4px 0 0; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 760px) { .platform-spend-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On a phone the top bar keeps only the page name, so the crumbs never wrap beside the tool buttons. */
@media (max-width: 480px) { .panel-breadcrumbs > :not(strong) { display: none; } .panel-breadcrumbs strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* Admin → Siteler → Widget alan adları */
.widget-domains .card-title code, .widget-domain-steps code { padding: 2px 6px; border-radius: 6px; background: var(--panel-soft); font-size: 12.5px; overflow-wrap: anywhere; }
.dashboard-page .widget-domain-actions { text-align: right; white-space: nowrap; }
.widget-domain-actions form { display: inline-flex; margin: 0 0 0 6px; }
.dashboard-page .widget-domain-actions button { min-height: 34px; padding: 6px 12px; }
.dashboard-page .widget-domain-actions .danger-text { color: var(--panel-danger); }
.dashboard-page .widget-domain-add { margin: 16px 0 0; max-width: 520px; }
.widget-domain-steps { margin: 0; padding-left: 22px; list-style: decimal; display: grid; gap: 8px; color: var(--panel-text); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 760px) { .dashboard-page .widget-domain-actions { white-space: normal; } .widget-domain-actions form { margin: 4px 0 0 4px; } }

/* Top bar alert menu: sound and desktop notification switches for support staff. */
.dashboard-page .panel-alerts-button { position: relative; }
.dashboard-page .panel-alerts-button.is-off svg { opacity: .45; }
.panel-alerts-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--panel-warn); box-shadow: 0 0 0 2px var(--panel-surface); }
.panel-alerts-dot[hidden] { display: none; }
.panel-alerts-menu { width: 300px; padding: 12px; }
.panel-alerts-title { margin: 2px 4px 10px; color: var(--panel-muted); font-size: 12px; font-weight: 650; }
.dashboard-page label.panel-alerts-row, label.panel-alerts-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel-soft); cursor: pointer; font-weight: 400; }
.panel-alerts-row strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--panel-text); }
.panel-alerts-row small { display: block; margin-top: 1px; color: var(--panel-muted); font-size: 12px; }
.panel-alerts-row .switch { flex: 0 0 40px; }
.panel-alerts-row input:disabled + span { opacity: .45; }
.dashboard-page .panel-alerts-menu .panel-alerts-test, .panel-alerts-menu .panel-alerts-test { width: 100%; min-height: 38px; margin-top: 4px; border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel-surface); color: var(--panel-text); font-size: 13px; font-weight: 600; }

/* The inbox badge counts members waiting and the agent's own chats; with nobody waiting it takes the calmer accent. */
.dashboard-page .panel-nav-count.is-mine { background: var(--panel-tint); color: var(--panel-accent); }

/* On-page alerts for support staff away from the inbox: a new chat or a member message, with a link to it. */
.panel-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.panel-toast { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 12px 40px 12px 12px; border: 1px solid var(--panel-line); border-radius: 14px; background: var(--panel-surface); color: var(--panel-text); box-shadow: var(--panel-shadow), 0 12px 32px rgb(0 0 0 / .14); text-decoration: none; pointer-events: auto; animation: panel-toast-in .22s ease-out; }
.panel-toast:hover { border-color: var(--panel-accent-line); }
.panel-toast > i { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--panel-tint); color: var(--panel-accent); font-style: normal; font-weight: 700; font-size: 13px; }
.panel-toast.is-waiting > i { background: var(--panel-warn-soft); color: var(--panel-warn); }
.panel-toast strong { min-width: 0; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-toast span { min-width: 0; color: var(--panel-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-page .panel-toast button, .panel-toast button { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--panel-muted); box-shadow: none; font-size: 16px; line-height: 1; }
.panel-toast button:hover { background: var(--panel-soft); color: var(--panel-text); }
@keyframes panel-toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .panel-toast { animation: none; } }

/* The brand: its wordmark where there is room, the square mark on the folded menu and in tight corners. */
.brand-wordmark { display: inline-flex; align-items: baseline; font-family: var(--panel-display); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; color: var(--panel-text); white-space: nowrap; }
.brand-wordmark-dot { display: inline-block; flex: none; width: .2em; height: .2em; margin: 0 .055em 0 .07em; border-radius: 50%; background: var(--wordmark-dot, var(--panel-brand-dot)); }
.brand-wordmark-suffix { font-weight: 500; letter-spacing: -.035em; color: var(--panel-subtle); }
.brand-icon { display: block; width: 100%; height: 100%; }
.brand-icon .brand-icon-ground { fill: #0e1325; stroke: none; }
.brand-icon .brand-icon-letter { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; }
.brand-icon .brand-icon-dot { fill: var(--panel-brand-dot); stroke: none; }
html[data-panel-theme=koyu] .brand-icon .brand-icon-ground, html[data-panel-theme=mor] .brand-icon .brand-icon-ground { stroke: #ffffff1f; stroke-width: 1; }
@media (prefers-color-scheme: dark) { html[data-panel-theme=sistem] .brand-icon .brand-icon-ground { stroke: #ffffff1f; stroke-width: 1; } }
.dashboard-page .panel-brand { padding: 4px 8px; color: var(--panel-text); text-decoration: none; }
.dashboard-page .panel-brand .brand-wordmark { font-size: 24px; }
.dashboard-page .panel-brand-mark { display: none; width: 38px; height: 38px; border-radius: 0; background: none; }
.dashboard-page .panel-brand-mark svg.brand-icon { width: 38px; height: 38px; }
@media (min-width: 901px) {
    html.panel-sidebar-collapsed .dashboard-page .panel-brand-mark { display: block; }
}

/* An agent's own overview: what waits for them now, their numbers and their ratings. */
.ov-agent-now .ov-pulse-head i.presence-dot { animation: none; }
.ov-agent-now .ov-pulse-head i.presence-online { background: var(--panel-leaf); box-shadow: 0 0 0 5px var(--panel-good-soft); animation: ov-pulse 2s ease-in-out infinite; }
.ov-agent-now .ov-pulse-head i.presence-away { background: var(--panel-sun); box-shadow: 0 0 0 5px var(--panel-warn-soft); }
.ov-agent-now .ov-pulse-head i.presence-offline { background: var(--panel-subtle); box-shadow: 0 0 0 5px var(--panel-soft); }
.ov-agent-load { display: grid; gap: 6px; }
.ov-agent-load small { color: var(--panel-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ov-agent-queue { margin: auto 0 0; padding: 10px 12px; border-radius: 12px; background: var(--panel-surface); color: var(--panel-muted); font-size: 13px; font-weight: 600; }
.ov-agent-queue.has-waiting { background: var(--panel-warn-soft); color: var(--panel-warn); }
.ov-agent-score { display: inline-flex; align-items: baseline; gap: 3px; }
.ov-agent-score strong { font-family: var(--panel-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ov-agent-score small { color: var(--panel-muted); font-size: 13px; }
.ov-agent-stars { display: grid; gap: 8px; }
.ov-agent-star-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px; align-items: center; gap: 10px; font-size: 13px; }
.ov-agent-star-row > span { display: inline-flex; align-items: center; gap: 3px; color: var(--panel-muted); font-weight: 600; }
.ov-agent-star-row svg, .ov-agent-rating-score svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.ov-agent-star-row > strong { text-align: right; font-variant-numeric: tabular-nums; }
.dashboard-page .ov-agent-subhead { margin: 18px 0 8px; color: var(--panel-muted); font-family: var(--panel-font); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-page .ov-agent-rating { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: var(--panel-text); text-decoration: none; }
.dashboard-page .ov-agent-rating:hover { background: var(--panel-soft); }
.ov-agent-rating > span:last-child { display: grid; min-width: 0; }
.ov-agent-rating strong { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-agent-rating small { color: var(--panel-muted); font-size: 12px; }
.ov-agent-rating-score { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 44px; height: 30px; border-radius: 9px; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-agent-rating-score.tone-good { background: var(--panel-good-soft); color: var(--panel-good); }
.ov-agent-rating-score.tone-warn { background: var(--panel-warn-soft); color: var(--panel-warn); }
.ov-agent-rating-score.tone-danger { background: var(--panel-danger-soft); color: var(--panel-danger); }
.ov-split-row > .ov-agent-ratings { justify-content: flex-start; }
.ov-agent-recent { display: grid; gap: 2px; margin: 0 -10px; }

/* Product headings: each product's logo over its own pages, the brand's coming products below, then the shared groups.
   The plain style shows the products' names in place of their logos. */
.dashboard-page .panel-nav-group > p.panel-nav-heading { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 10px 8px; text-transform: none; letter-spacing: normal; }
.panel-nav-logo.brand-wordmark { font-size: 20px; }
.panel-nav-name { display: none; }
html.panel-nav-plain .panel-nav-logo { display: none; }
html.panel-nav-plain .panel-nav-name { display: inline; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--panel-subtle); }
.dashboard-page .panel-nav-group a.panel-nav-heading-link { display: flex; flex: 1; align-items: center; gap: 8px; min-height: 0; padding: 0; border-radius: 6px; background: none; color: inherit; font: inherit; }
.dashboard-page .panel-nav-group a.panel-nav-heading-link:hover .panel-nav-logo, .dashboard-page .panel-nav-group a.panel-nav-heading-link:hover .panel-nav-name { opacity: .85; }
.dashboard-page .panel-nav-group a.panel-nav-heading-link:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 3px; }
.dashboard-page .panel-nav-group a.panel-nav-heading-link .brand-wordmark span, .dashboard-page .panel-nav-group a.panel-nav-heading-link .panel-nav-name { flex: none; }
/* The market sits in the menu as its logo, a link of its own between the products and the shared groups. */
.panel-nav-heading-icon { display: none; }
.dashboard-page .panel-nav-group.is-link > p.panel-nav-heading { padding: 0; }
.dashboard-page .panel-nav-group.is-link a.panel-nav-heading-link { padding: 8px 10px; border-radius: 10px; }
.dashboard-page .panel-nav-group.is-link a.panel-nav-heading-link:hover { background: var(--panel-soft); }
.dashboard-page .panel-nav-group.is-link a.panel-nav-heading-link[aria-current] { background: var(--panel-nav-active); color: var(--panel-accent); box-shadow: inset 3px 0 var(--panel-accent); }
.panel-nav-style-toggle[aria-pressed=false] { color: var(--panel-accent); }