:root {
    color-scheme: light;
    --bg: #f3f5fb;
    --surface: #ffffff;
    --raised: #f7f8fc;
    --text: #172033;
    --muted: #5b6578;
    --border: #dce2ee;
    --accent: #4338ca;
    --accent-strong: #3730a3;
    --accent-soft: #e8e8fb;
    --accent-text: #ffffff;
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --status-good: #0ca30c;
    --status-critical: #d03b3b;
    --grid: #e1e0d9;
    --axis: #c3c2b7;
    --ok-bg: #e0f5e8;
    --ok-text: #14683a;
    --warn-bg: #fdf0d8;
    --warn-text: #80510b;
    --bad-bg: #fbe6e6;
    --bad-text: #a02323;
    --off-bg: #e9ecf2;
    --off-text: #4d5666;
    --shadow: 0 1px 2px rgba(23, 32, 51, .05), 0 6px 18px rgba(23, 32, 51, .05);
}

/* The same dark values under both scopes: the system setting, and the switch in the panel. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0f1420;
        --surface: #1a2130;
        --raised: #141a27;
        --text: #e8ecf4;
        --muted: #a3adbd;
        --border: #2e3849;
        --accent: #8f9bff;
        --accent-strong: #a9b2ff;
        --accent-soft: #252c4d;
        --accent-text: #0d1330;
        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
        --grid: #2c3340;
        --axis: #414b5a;
        --ok-bg: #173325;
        --ok-text: #86d9a8;
        --warn-bg: #3a2c12;
        --warn-text: #efc678;
        --bad-bg: #3d1d1f;
        --bad-text: #f3a5a5;
        --off-bg: #2b323e;
        --off-text: #b4bcc9;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .25);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1420;
    --surface: #1a2130;
    --raised: #141a27;
    --text: #e8ecf4;
    --muted: #a3adbd;
    --border: #2e3849;
    --accent: #8f9bff;
    --accent-strong: #a9b2ff;
    --accent-soft: #252c4d;
    --accent-text: #0d1330;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --grid: #2c3340;
    --axis: #414b5a;
    --ok-bg: #173325;
    --ok-text: #86d9a8;
    --warn-bg: #3a2c12;
    --warn-text: #efc678;
    --bad-bg: #3d1d1f;
    --bad-text: #f3a5a5;
    --off-bg: #2b323e;
    --off-text: #b4bcc9;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 1rem; }

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 "Segoe UI", Tahoma, Arial, sans-serif;
}

body:has(.guest-bar) { display: block; }

a { color: var(--accent); }

h1 { font-size: 1.55rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
h3 { font-size: .95rem; margin: 1rem 0 .25rem; }
h4 { font-size: .85rem; margin: .75rem 0 .15rem; color: var(--muted); text-align: left; }

[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Side navigation */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem .9rem;
    background: var(--surface);
    border-inline-end: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: .6rem; padding-inline: .35rem; color: var(--text); font-weight: 700; text-decoration: none; }
.brand-mark { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; background: linear-gradient(135deg, #6366f1, #06b6d4); border-radius: 9px; }
.brand-mark svg { width: 18px; height: 18px; fill: #ffffff; }

.side-nav { display: grid; gap: .2rem; }
.side-nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; color: var(--muted); border-radius: 8px; text-decoration: none; transition: background-color .15s, color .15s; }
.side-nav a:hover { color: var(--text); background: var(--raised); }
.side-nav a[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); font-weight: 600; }
.side-nav svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sidebar-end { margin-top: auto; display: grid; gap: .6rem; }
.sign-out { width: 100%; text-align: start; padding-inline: .35rem; }

.preferences { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-inline: .35rem; }
.preference { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); text-decoration: none; font-size: .92rem; }
.preference:hover { color: var(--text); }
.preference svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.theme-switch { display: inline-flex; padding: 2px; background: var(--raised); border: 1px solid var(--border); border-radius: 999px; }
.theme-switch a { display: grid; place-items: center; width: 26px; height: 26px; color: var(--muted); border-radius: 50%; }
.theme-switch a:hover { color: var(--text); }
.theme-switch a[aria-current] { color: var(--accent-text); background: var(--accent); }
.theme-switch svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.guest-bar { display: flex; justify-content: flex-end; padding: .75rem 1rem; }
.guest-bar .preferences { gap: 1rem; }

main { width: 100%; max-width: 1080px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }

@media (max-width: 820px) {
    body { display: block; }
    .sidebar { position: static; height: auto; flex-flow: row wrap; align-items: center; gap: .6rem 1rem; padding: .7rem 1rem; border-inline-end: 0; border-bottom: 1px solid var(--border); }
    .side-nav { order: 3; flex: 1 0 100%; display: flex; gap: .2rem; overflow-x: auto; }
    .side-nav a { white-space: nowrap; }
    .sidebar-end { margin: 0; margin-inline-start: auto; display: flex; align-items: center; gap: .75rem; }
    .sign-out { width: auto; }
    main { padding: 1.25rem 1rem 3rem; }
}

.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; font-size: .9rem; color: var(--muted); }
.crumbs [aria-current="page"] { color: var(--text); }

.heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.section-heading { margin: 1.75rem 0 .75rem; align-items: center; }
.section-heading h2 { margin: 0; }
.heading-tools { display: flex; align-items: center; gap: .5rem; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.card > h2:first-of-type { margin-top: 0; }
.narrow { max-width: 420px; margin: 3rem auto; }
.empty { color: var(--muted); text-align: center; }
.empty p { margin: .5rem 0; }

label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
label small { color: var(--muted); font-weight: 400; }

input:not([type="hidden"]), select, textarea {
    width: 100%;
    min-height: 44px;
    padding: .55rem .7rem;
    background: var(--raised);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

textarea { font: 14px/1.5 Consolas, Menlo, monospace; resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible, .hit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

[aria-invalid="true"] { border-color: var(--bad-text) !important; }

.interval { display: flex; gap: .5rem; }
.interval input { flex: 1 1 60%; min-width: 0; }
.interval select { flex: 1 1 40%; min-width: 0; }
.interval .unit { align-self: center; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 1rem; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 1rem; }
.nowrap { white-space: nowrap; }
.chat-results { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .9rem; color: var(--muted); }
.chat-results:empty { display: none; }
.query { margin-top: 1rem; }
.query summary { color: var(--muted); font-size: .9rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 Consolas, Menlo, monospace; margin: .75rem 0 0; text-align: left; }

/* The workflow form */
.workflow-form { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
.steps { position: sticky; top: 1rem; display: grid; gap: .15rem; }
.steps a { display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; color: var(--muted); font-size: .92rem; border-radius: 8px; text-decoration: none; transition: background-color .15s, color .15s; }
.steps a:hover { color: var(--text); background: var(--surface); }
.steps a.current { color: var(--accent-strong); background: var(--accent-soft); font-weight: 600; }
.step-dot { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; font-size: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; }
.steps a.current .step-dot { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.steps a.has-error .step-dot { color: #ffffff; background: var(--bad-text); border-color: var(--bad-text); }
html:not([data-theme="light"]) .steps a.has-error .step-dot { color: #1a0d0d; }

.step-list { display: grid; gap: 1rem; min-width: 0; }
.step-card { padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); scroll-margin-top: 1rem; }
.step-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; list-style: none; }
.step-head::-webkit-details-marker { display: none; }
.step-head .chevron { margin-inline-start: auto; }
details:not([open]) > .step-head { margin-bottom: 0; }
.step-card.card { display: block; }
.step-head h2 { margin: 0; }
.step-number { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; color: var(--accent-strong); background: var(--accent-soft); font-size: .85rem; font-weight: 700; border-radius: 8px; }
.step-card > label:first-of-type { margin-top: .5rem; }

.fold { margin-top: 1.1rem; padding-top: .85rem; border-top: 1px solid var(--border); }
.fold summary { font-weight: 600; }
.fold summary small { color: var(--muted); font-weight: 400; }

.form-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 -4px 18px rgba(0, 0, 0, .12); }
.form-bar-note { margin: 0; margin-inline-start: auto; }

.error-summary { margin: 1rem 0 0; padding: .85rem 1rem; color: var(--bad-text); background: var(--bad-bg); border-radius: 10px; }
.error-summary ul { margin: .35rem 0 0; padding-inline-start: 1.2rem; }
.error-summary a { color: inherit; }

@media (max-width: 820px) {
    .workflow-form { grid-template-columns: minmax(0, 1fr); }
    .steps { position: static; display: flex; overflow-x: auto; padding-bottom: .25rem; }
    .steps a { white-space: nowrap; }
    .form-bar-note { display: none; }
}

.conditions { margin: .75rem 0; display: grid; gap: .5rem; }
.conditions:empty { margin: 0; }
.condition { padding: .75rem; background: var(--raised); border: 1px solid var(--border); border-radius: 8px; }
.condition input:not([type="hidden"]), .condition select { background: var(--surface); }
.condition-fields { display: grid; grid-template-columns: 1.8fr 1.1fr 1.2fr auto; gap: .5rem; align-items: end; }
.condition-fields label, .condition-more label { margin-top: 0; font-size: .85rem; }
.condition-fields .danger-link { padding-bottom: .6rem; }
.condition-sentence { margin: .5rem 0 0; }
.condition-more { margin-top: .35rem; font-size: .9rem; }
.condition-more > summary { color: var(--muted); }
.condition-more .grid { margin-top: .4rem; }
@media (max-width: 1100px) {
    .condition-fields { grid-template-columns: 1fr; }
}
.combiner { margin-top: .25rem; }

/* Search rows: laid out left to right in both languages, like the Azure query they mirror. */
.clauses { display: grid; gap: .5rem; margin: .5rem 0 .75rem; }
.clauses:empty { margin: 0 0 .75rem; }
.clause { padding: .6rem .75rem; background: var(--raised); border: 1px solid var(--border); border-radius: 8px; }
.clause input:not([type="hidden"]), .clause select, .clause .multi-trigger { background: var(--surface); }
.clause [hidden] { display: none; }
.clause-fields { display: grid; grid-template-columns: 5rem minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: .5rem; align-items: center; }
.clause-fixed { margin-top: .5rem; color: var(--muted); }
.clause-fixed .clause-fields { grid-template-columns: 5rem minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 2fr) 2.5rem; }
.clause:first-child .clause-join { visibility: hidden; }
.clause-empty { margin-top: .75rem; }
.clause-empty[hidden] { display: none; }
@media (max-width: 760px) {
    .clause-fields, .clause-fixed .clause-fields { grid-template-columns: 1fr 1fr; }
    .clause:first-child .clause-join { display: none; }
    .clause-fields > [data-clause-value] { grid-column: 1 / -1; }
    .clause-fixed .clause-fields > span:empty { display: none; }
}

.more { margin: -.5rem 0 1rem; text-align: end; }

/* Token values are always left-to-right, so the eye stays on the physical right. */
.secret-field { position: relative; }
.secret-field input { padding-right: 3rem; }
.secret-field .eye {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--muted);
}
.secret-field .eye:hover { color: var(--text); transform: none; }
.secret-field svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.secret-field svg[hidden] { display: none; }

.hint { color: var(--muted); font-size: .9rem; margin: .25rem 0 .5rem; }
.field-error { color: var(--bad-text); font-size: .9rem; margin: .3rem 0 0; }
code { direction: ltr; unicode-bidi: isolate; font-family: Consolas, Menlo, monospace; font-size: .85em; }

button, .button {
    display: inline-block;
    min-height: 44px;
    padding: .55rem 1rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, transform .15s;
}

button:hover:not(:disabled), .button:hover { border-color: var(--accent); }
button:disabled { opacity: .55; cursor: not-allowed; }
.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.danger { color: var(--bad-text); border-color: var(--bad-text); }
.link { background: none; border: 0; color: var(--accent); padding: .25rem; min-height: 0; }
.danger-link { color: var(--bad-text); }
.narrow button[type="submit"] { width: 100%; margin-top: 1.25rem; }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.25rem; }
.actions.flush { margin-top: 0; }
.actions form { margin: 0; }
.push { margin-inline-start: auto; }

.select-add { display: flex; gap: .5rem; }
.select-add select { flex: 1 1 auto; min-width: 0; }
.icon-button { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; padding: 0; }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* A dropdown that allows several values */
.multi-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex: 1 1 auto; min-width: 0; padding: .55rem .7rem; background: var(--raised); text-align: start; font-weight: 400; }
.multi-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-trigger svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.multi-panel { max-height: 260px; overflow-y: auto; }
.multi-panel .hint { margin: .4rem .6rem; }
.chip { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .45rem .6rem; font-weight: 400; font-size: .94rem; border-radius: 6px; cursor: pointer; }
.chip:hover { background: var(--off-bg); }
.chip input:not([type="hidden"]) { flex: 0 0 auto; width: 16px; min-height: 0; height: 16px; }

.type-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.type-card { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .85rem 1rem; font-weight: 400; background: var(--raised); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.type-card:hover { border-color: var(--accent); }
.type-card:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.type-card input:not([type="hidden"]) { width: auto; min-height: 0; margin-top: .35rem; }
.type-card strong, .type-card small { display: block; }
.type-card small { color: var(--muted); margin-top: .15rem; }

.credential-dialog, .confirm-dialog { padding: 1.25rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.credential-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.confirm-dialog { width: min(440px, calc(100vw - 32px)); }
.credential-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(10, 14, 25, .6); }
.credential-dialog h2, .confirm-dialog h2 { margin-top: 0; }

.row-end { text-align: end; width: 1%; }
.row-tools { display: inline-flex; align-items: center; gap: .15rem; }

.toggle-form { display: inline-flex; margin: 0; }
.switch { position: relative; display: inline-block; width: 44px; min-height: 0; height: 24px; padding: 0; background: var(--off-bg); border: 1px solid var(--border); border-radius: 999px; }
.switch span { position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; background: var(--off-text); border-radius: 50%; transition: inset-inline-start .15s; }
.switch[aria-checked="true"] { background: var(--ok-text); border-color: var(--ok-text); }
.switch[aria-checked="true"] span { inset-inline-start: 22px; background: var(--surface); }

.menu-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 32px; height: 32px; padding: 0; background: none; border: 0; color: var(--muted); }
.menu-button:hover:not(:disabled) { color: var(--text); background: var(--off-bg); border-radius: 6px; }
.menu-button svg { width: 18px; height: 18px; fill: currentColor; }
.menu-button svg.stroke-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu { position: fixed; inset: auto; margin: 0; min-width: 190px; padding: .25rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.menu form { margin: 0; }
.menu > a, .menu > form > button { display: block; width: 100%; min-height: 0; padding: .5rem .7rem; color: var(--text); background: none; border: 0; border-radius: 6px; font: inherit; font-size: .92rem; text-align: start; text-decoration: none; }
.menu > a:hover, .menu > form > button:hover:not(:disabled) { background: var(--off-bg); }
.menu .danger-item { color: var(--bad-text); }

.notice { padding: .7rem 1rem; border-radius: 8px; margin: 0 0 1rem; }
.notice.ok { background: var(--ok-bg); color: var(--ok-text); }
.notice.warn { background: var(--warn-bg); color: var(--warn-text); }
.notice.bad { background: var(--bad-bg); color: var(--bad-text); }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1rem; box-shadow: var(--shadow); }
.table-wrap.flat { border: 0; margin: .5rem 0 0; box-shadow: none; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: .65rem .85rem; text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .15s; }
tbody tr:hover { background: var(--raised); }
th { color: var(--muted); font-size: .85rem; font-weight: 600; }
td small { display: block; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.date { font-variant-numeric: tabular-nums; }
html[dir="rtl"] .date { text-align: right; }
html[dir="ltr"] .date { text-align: left; }

.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--off-bg); color: var(--off-text); font-size: .85rem; white-space: nowrap; }
.badge.success { background: var(--ok-bg); color: var(--ok-text); }
.badge.partial, .badge.queued, .badge.running { background: var(--warn-bg); color: var(--warn-text); }
.badge.failed { background: var(--bad-bg); color: var(--bad-text); }

.facts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0; }
.facts dt { color: var(--muted); font-size: .85rem; }
.facts dd { margin: 0; }
.facts.small { margin-top: .75rem; font-size: .9rem; }

.plain { list-style: none; margin: .25rem 0; padding: 0; display: grid; gap: .3rem; font-size: .92rem; }
.plain small { color: var(--muted); }
.check { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.check.yes { color: var(--ok-text); }
.check.no { color: var(--muted); }

summary { cursor: pointer; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

.result { padding: .9rem 1.1rem; margin-bottom: .5rem; }
.result summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style-position: inside; }
.result-title { min-width: 0; overflow-wrap: anywhere; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 620px) {
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grow { flex: 1 1 0; min-width: 0; }
.nav-count { margin-inline-start: auto; min-width: 20px; padding: 0 .35rem; color: var(--accent-text); background: var(--accent); border-radius: 999px; font-size: .75rem; font-weight: 600; text-align: center; }
.toggle-label { margin: 0; }
.progress { width: 100%; min-width: 90px; height: 8px; overflow: hidden; background: var(--off-bg); border-radius: 999px; }
.progress span { display: block; width: 0; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.progress-cell { min-width: 130px; }
.progress-cell > .progress { display: block; }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.queue-settings-save { margin-top: .75rem; }
.setting-fold { margin-top: 0; padding-top: 0; border-top: 0; }
.setting-fold > summary { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .25rem 0; list-style: none; }
.setting-fold > summary::-webkit-details-marker { display: none; }
.setting-fold > summary small { color: var(--muted); font-weight: 400; }
.queue-run { position: relative; }
.queue-run > details { padding: .85rem 1.1rem; margin-bottom: .5rem; }
.queue-run summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-inline-end: 2.5rem; list-style: none; }
.queue-run summary::-webkit-details-marker { display: none; }
.queue-run-name { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.queue-run-name small { display: block; color: var(--muted); }
.queue-run-menu { position: absolute; top: .7rem; inset-inline-end: .6rem; }
.chevron { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: transform .15s; }
details:not([open]) > summary .chevron { transform: rotate(-90deg); }
[dir="rtl"] details:not([open]) > summary .chevron { transform: rotate(90deg); }
td.wrap-cell { white-space: normal; max-width: 320px; overflow-wrap: anywhere; font-size: .9rem; }
td.error-cell { color: var(--bad-text); }
.single-try { margin-top: 1.25rem; padding-top: .25rem; border-top: 1px solid var(--border); }
.task-box { margin-top: .85rem; padding: .85rem 1rem; background: var(--raised); border: 1px solid var(--border); border-radius: 10px; }
.task-box h3 { margin-top: 0; }
.compact-heading { margin-bottom: .5rem; align-items: center; }
.compact-heading h2 { margin: 0; }
pre.message { padding: .75rem 1rem; background: var(--raised); border-radius: 10px; font-family: inherit; font-size: .92rem; text-align: start; }
.tiles.compact { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .85rem 1rem; box-shadow: var(--shadow); transition: transform .15s; }
.tile:hover { transform: translateY(-2px); }
.tile-label { color: var(--muted); font-size: .85rem; }
.tile-value { font-size: 1.6rem; font-weight: 600; line-height: 1.3; }
.tile-note { color: var(--muted); font-size: .78rem; }

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .75rem; }
.chart { margin: 0; padding: 1rem; }
.chart figcaption { font-weight: 600; margin-bottom: .5rem; }
.chart figcaption small { color: var(--muted); font-weight: 400; margin-inline-start: .35rem; }
.chart details { margin-top: .5rem; font-size: .9rem; }
.chart summary { color: var(--muted); }
.chart-plot { position: relative; }
.chart-plot svg { display: block; width: 100%; height: auto; }
.bar { fill: var(--series-1); }
.grid-line { stroke: var(--grid); stroke-width: 1; }
.axis { stroke: var(--axis); stroke-width: 1; }
.tick { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.hit { fill: transparent; }
.hit:hover { fill: var(--grid); fill-opacity: .35; }
.chart-tip { position: absolute; top: 0; left: var(--tip-x, 50%); transform: translateX(-50%); padding: .15rem .5rem; background: var(--text); color: var(--surface); border-radius: 4px; font-size: .8rem; white-space: nowrap; pointer-events: none; }
.chart-tip[hidden] { display: none; }

.series-tasks { fill: var(--series-1); background: var(--series-1); }
.series-test_cases { fill: var(--series-2); background: var(--series-2); }
.series-updated { fill: var(--series-3); background: var(--series-3); }
.series-failed { fill: var(--status-critical); background: var(--status-critical); }
.chart-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .6rem; padding: 0; list-style: none; color: var(--muted); font-size: .85rem; }
.chart-legend li { display: flex; align-items: center; gap: .35rem; }
.chart-key { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.report-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.report-presets a[aria-current] { color: var(--accent-strong); background: var(--accent-soft); border-color: transparent; }
.report-wide { grid-column: 1 / -1; }
.share-bar { display: flex; gap: 2px; height: 28px; }
.share-part { display: flex; align-items: center; min-width: 0; padding-inline: .4rem; color: #fff; font-size: .8rem; font-weight: 600; border-radius: 4px; }
.hbars { display: grid; gap: .6rem; }
.hbar { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr; gap: .75rem; align-items: center; font-size: .9rem; }
.hbar-name { min-width: 0; overflow-wrap: anywhere; }
.hbar-plot { display: flex; align-items: center; gap: .5rem; position: relative; }
.hbar-track { display: flex; gap: 2px; flex: 1 1 auto; height: 16px; min-width: 0; }
.hbar-part { min-width: 2px; }
.hbar-track .hbar-part:last-child { border-start-end-radius: 4px; border-end-end-radius: 4px; }
.hbar-total { flex: none; min-width: 2ch; font-variant-numeric: tabular-nums; }
.share-tiles .tile-value { display: flex; align-items: baseline; gap: .35rem; }
.meter { display: block; height: 8px; margin-top: .35rem; background: var(--off-bg); border-radius: 4px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--status-good); }
.hbar-plot .chart-tip, .share-bar .chart-tip { top: -1.6rem; z-index: 1; }
.share-bar { position: relative; }
.report-details { margin-top: .75rem; }
.report-details > summary { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
    .tile:hover { transform: none; }
}

.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .85rem; }
.check-row { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.check-row input { width: auto; margin: 0; }
.outline ul { padding-inline-start: 1.1rem; }