/* ============================================================================
   Konti-X design tokens — reconstructed from ai/GRAPHICS-TEMPLATE.md
   (the graphics/system/ token source is not part of this repo; the values
   below follow the documented palette, typography, spacing and surface specs).
   ========================================================================== */
:root {
    /* Ink scale */
    --ink-950: #0b0c0a;
    --ink-900: #101110;
    --ink-850: #141514;
    --ink-800: #191919;
    --ink-500: #5a5c5a;
    --ink-400: #8a8c8a;
    --ink-0: #ffffff;

    /* Green scale (UI accent) */
    --green-400: #a2cd83;
    --green-500: #8fbf6f;
    --green-600: #79a95a;
    --green-700: #5c7b48;

    /* Backgrounds and surfaces */
    --bg-app: var(--ink-950);
    --bg-app-tint: #0e130c;
    --surface-raised: var(--ink-900);
    --surface-card: var(--ink-850);
    --surface-input: var(--ink-800);
    --surface-chip: #1d1f1c;
    --surface-accent-soft: rgba(143, 191, 111, 0.12);

    /* Text */
    --text-primary: var(--ink-0);
    --text-body: #d7d8d7;
    --text-muted: var(--ink-400);
    --text-faint: var(--ink-500);
    --text-accent: var(--green-500);
    --text-on-accent: #000000;

    /* Accent */
    --accent: var(--green-500);
    --accent-hover: var(--green-400);
    --accent-press: var(--green-600);

    /* Borders */
    --border-hairline: rgba(255, 255, 255, 0.07);
    --border-subtle: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.22);
    --border-accent: rgba(143, 191, 111, 0.35);
    --border-accent-strong: rgba(143, 191, 111, 0.6);

    /* Status pairs: fg on its own soft bg */
    --status-ok-fg: #8fbf6f;
    --status-ok-bg: rgba(143, 191, 111, 0.14);
    --status-warn-fg: #d9a441;
    --status-warn-bg: rgba(217, 164, 65, 0.14);
    --status-error-fg: #d96a5e;
    --status-error-bg: rgba(217, 106, 94, 0.14);
    --status-info-fg: #5e91d9;
    --status-info-bg: rgba(94, 145, 217, 0.14);

    /* Effects */
    --scrim: rgba(0, 0, 0, 0.72);
    --grid-line: rgba(255, 255, 255, 0.02);
    --grid-size: 56px;
    --focus-ring: rgba(143, 191, 111, 0.25);
    --shadow-focus: 0 0 0 3px var(--focus-ring);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.9);
    --shadow-raised: 0 24px 60px -30px rgba(0, 0, 0, 1);
    --shadow-accent-glow: 0 0 0 1px rgba(143, 191, 111, 0.22), 0 10px 30px -12px rgba(143, 191, 111, 0.25);
    --blur-overlay: blur(4px);

    /* Typography */
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 21px;
    --text-2xl: 26px;
    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --tracking-label: 0.02em;
    --tracking-caps: 0.09em;
    --type-page-title: 700 26px/1.15 var(--font-ui);
    --type-section-title: 700 21px/1.3 var(--font-ui);
    --type-field-label: 600 15px/1.3 var(--font-ui);
    --type-body: 400 15px/1.5 var(--font-ui);
    --type-helper: 400 13px/1.5 var(--font-ui);
    --type-control: 600 16px/1 var(--font-ui);

    /* Spacing (4px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --gap-section: 28px;
    --gap-field: 18px;
    --gap-control: 10px;
    --pad-card: 22px;
    --pad-input-y: 14px;
    --pad-input-x: 16px;
    --pad-chip-y: 14px;
    --pad-chip-x: 18px;

    /* Geometry */
    --radius-sm: 10px;
    --radius-control: 14px;
    --radius-input: 14px;
    --radius-card: 18px;
    --radius-pill: 999px;
    --control-h-sm: 34px;
    --control-h-md: 44px;
    --control-h-lg: 52px;
    --hit-min: 44px;
    --container-app: 1160px;
    --container-form: 640px;
    --press-scale: 0.985;
    --transition-control: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

/* ============================ Global base ================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    color: var(--text-body);              /* PaletteDark has no property for body text */
    font-family: var(--font-ui);
    background-color: var(--bg-app);
}

body {
    /* the app's only texture: 56px hairline grid at 2% white */
    background-image:
        repeating-linear-gradient(0deg,  var(--grid-line) 0 1px, transparent 1px var(--grid-size)),
        repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size));
}

input, select, button, textarea { font-family: var(--font-ui); }

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

/* ==================== Header, containers, grids =========================== */
.kontix-header {
    background: linear-gradient(180deg, var(--bg-app-tint) 0%, var(--bg-app) 100%);
    border-bottom: 1px solid var(--border-hairline);
}
.kontix-header-row   { display: flex; align-items: center; gap: var(--space-3); }
.kontix-header-logo  { height: 34px; display: block; }

@media (max-width: 959.98px) {
    .mud-container.kontix-container.kontix-header-inner {
        padding: var(--space-6) var(--space-5) var(--space-5);
    }
    .kontix-header-brand { margin-bottom: var(--space-5); }
    .kontix-header-row > .kontix-header-account { margin-inline-start: auto; }
}

@media (min-width: 960px) {
    .kontix-header       { position: sticky; top: 0; z-index: var(--mud-zindex-appbar); }
    .kontix-header-top   { display: flex; align-items: center; height: 76px; }
    .kontix-header-row   { margin-inline-start: auto; }
    .kontix-header-logo  { height: 30px; }
    .kontix-header-brand { margin-bottom: 0; padding-inline-end: var(--space-6); }
    .kontix-nav-desktop  { padding: 0 0 var(--space-4); }
}

.mud-container.kontix-container {
    max-width: var(--container-app);
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}
.mud-container.kontix-container-main {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}
.mud-container.kontix-container-reading { max-width: 860px; }
.mud-container.kontix-container-form    { max-width: var(--container-form); }

@media (max-width: 959.98px) {
    .mud-container.kontix-container { max-width: 430px; }
    .mud-container.kontix-container-main {
        min-height: 100vh;
        padding: 0 var(--space-5) var(--space-10);
    }
}

.kontix-nav-mobile { padding: var(--space-5) 0; }
@media (min-width: 960px) { .kontix-nav-mobile { display: none; } }
@media (max-width: 959.98px) { .kontix-nav-desktop { display: none; } }

.kontix-grid-form,
.kontix-grid-list,
.kontix-board-grid { display: grid; gap: var(--gap-section); align-items: start; }
.kontix-grid-form { grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.9fr); }
.kontix-grid-list { grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr); }
.kontix-board-grid { grid-template-columns: minmax(0, 1.2fr) minmax(340px, 1fr); }

.kontix-fields-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-field); }
.kontix-fields-2col > .kontix-span-2 { grid-column: 1 / -1; }
.kontix-fields { display: flex; flex-direction: column; gap: var(--gap-field); }

@media (max-width: 959.98px) {
    .kontix-grid-form,
    .kontix-grid-list,
    .kontix-board-grid,
    .kontix-fields-2col { grid-template-columns: 1fr; }
}

/* ======================= Mud overrides: card ============================== */
.mud-paper.kontix-card {
    border-radius: var(--radius-card);
    border: 1px solid var(--border-hairline);
    padding: var(--pad-card);
    background-color: var(--surface-card);
}
.mud-paper.kontix-card-tight { padding: var(--space-3); }

/* ======================= Mud overrides: buttons =========================== */
.mud-button-root.kontix-btn {
    min-height: var(--control-h-md);
    border-radius: var(--radius-control);
    padding: 0 var(--pad-chip-x);
    transition: var(--transition-control);
    text-transform: none;
    box-shadow: none;
}
.mud-button-root.kontix-btn-sm { min-height: var(--control-h-sm); padding: 0 14px; }
.mud-button-root.kontix-btn-lg { min-height: var(--control-h-lg); }

.mud-button-root.kontix-btn-primary {
    background-color: var(--accent);
    border: 1px solid var(--accent);
    color: var(--text-on-accent);
}
.mud-button-root.kontix-btn-secondary {
    background-color: var(--surface-chip);
    border: 1px solid var(--border-subtle);
    color: var(--text-body);
}
.mud-button-root.kontix-btn-accent-ghost {
    background-color: var(--surface-accent-soft);
    border: 1px solid var(--border-accent);
    color: var(--text-accent);
}
.mud-button-root.kontix-btn-ghost {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--text-body);
}
.mud-button-root.kontix-btn-danger {
    background-color: var(--status-error-bg);
    border: 1px solid color-mix(in srgb, var(--status-error-fg) 35%, transparent);
    color: var(--status-error-fg);
}

/* Hover per tone — the shade never changes, so no generic .kontix-btn:hover */
.mud-button-root.kontix-btn-secondary:hover,
.mud-button-root.kontix-btn-ghost:hover {
    background-color: var(--ink-800);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.mud-button-root.kontix-btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-on-accent);
    box-shadow: none;
}
.mud-button-root.kontix-btn-accent-ghost:hover { border-color: var(--border-accent-strong); }
.mud-button-root.kontix-btn-danger:hover       { border-color: var(--status-error-fg); }

/* ===================== Mud overrides: chip navigation ===================== */
.mud-chipset { display: flex; flex-wrap: wrap; gap: var(--gap-control); }
.mud-chipset .mud-chip { margin: 0; }

.mud-chip.mud-chip-size-medium,
.mud-chip.mud-chip-label {
    background-color: var(--surface-chip);
    border: 1px solid var(--border-subtle);
    color: var(--text-body);
    border-radius: var(--radius-control);
    height: auto;
    min-height: var(--control-h-md);
    padding: var(--pad-chip-y) var(--pad-chip-x);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: 1;
    transition: var(--transition-control);
}

/* Selected chip: the MudChipSet renders it as the .mud-chip-text variant. */
.mud-chipset .mud-chip.mud-chip-selected,
.mud-chipset .mud-chip.mud-chip-selected.mud-clickable:hover:not(.mud-disabled),
.mud-chipset .mud-chip.mud-chip-selected.mud-clickable:focus-visible:not(.mud-disabled),
.mud-chipset .mud-chip.mud-chip-selected.mud-clickable:active:not(.mud-disabled) {
    background-color: var(--surface-accent-soft);
    border-color: var(--border-accent-strong);
    color: var(--text-accent);
    box-shadow: var(--shadow-accent-glow);
}
.mud-chipset .mud-chip.mud-clickable:not(.mud-chip-selected):hover:not(.mud-disabled) {
    background-color: var(--ink-800);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.mud-chipset .mud-chip.mud-clickable:not(.mud-chip-selected):focus-visible:not(.mud-disabled),
.mud-chipset .mud-chip.mud-clickable:not(.mud-chip-selected):active:not(.mud-disabled) {
    background-color: var(--surface-chip);
    color: var(--text-body);
}

/* =================== Static badges (non-interactive chips) ================ */
.mud-chip.kontix-badge-accent,
.mud-chip.kontix-badge-neutral,
.mud-chip.kontix-badge-outline,
.mud-chip.kontix-status-ok,
.mud-chip.kontix-status-warn,
.mud-chip.kontix-status-error,
.mud-chip.kontix-status-info {
    min-height: 30px;
    height: 30px;
    margin: 0;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--tracking-label);
}
.mud-chip.kontix-badge-accent.kontix-mono,
.mud-chip.kontix-badge-neutral.kontix-mono,
.mud-chip.kontix-badge-outline.kontix-mono { letter-spacing: var(--tracking-caps); }
.mud-chip.kontix-badge-accent  { background-color: var(--status-ok-bg); border: 1px solid transparent; color: var(--status-ok-fg); }
.mud-chip.kontix-badge-neutral { background-color: var(--surface-input); border: 1px solid transparent; color: var(--text-body); }
.mud-chip.kontix-badge-outline { background-color: transparent; border: 1px solid var(--border-subtle); color: var(--text-accent); }

.mud-chip.kontix-status-ok    { background-color: var(--status-ok-bg);    color: var(--status-ok-fg);    border: 1px solid var(--border-hairline); }
.mud-chip.kontix-status-warn  { background-color: var(--status-warn-bg);  color: var(--status-warn-fg);  border: 1px solid var(--border-hairline); }
.mud-chip.kontix-status-error { background-color: var(--status-error-bg); color: var(--status-error-fg); border: 1px solid var(--border-hairline); }
.mud-chip.kontix-status-info  { background-color: var(--status-info-bg);  color: var(--status-info-fg);  border: 1px solid var(--border-hairline); }

/* ========================= Press and focus ================================ */
.mud-button-root:active,
.mud-chipset .mud-chip.mud-clickable:active { transform: scale(var(--press-scale)); }

.mud-button-root.kontix-btn:focus-visible,
.mud-chipset .mud-chip.mud-clickable:focus-visible,
.mud-button-root.kontix-iconbutton:focus-visible {
    outline: none;
    border-color: var(--border-accent-strong);
    box-shadow: var(--shadow-focus);
}
.mud-chipset .mud-chip.mud-chip-selected.mud-clickable:focus-visible:not(.mud-disabled) {
    box-shadow: var(--shadow-accent-glow), var(--shadow-focus);
}

/* ================ Disabled: resting look at 40% opacity =================== */
.mud-button-root:disabled,
.mud-chip.mud-disabled { opacity: 0.4; }
.mud-button-root.kontix-btn-primary:disabled      { background-color: var(--accent) !important;              color: var(--text-on-accent) !important; }
.mud-button-root.kontix-btn-secondary:disabled    { background-color: var(--surface-chip) !important;        color: var(--text-body) !important; }
.mud-button-root.kontix-btn-accent-ghost:disabled { background-color: var(--surface-accent-soft) !important; color: var(--text-accent) !important; }
.mud-button-root.kontix-btn-ghost:disabled        { background-color: transparent !important;                color: var(--text-body) !important; }
.mud-button-root.kontix-btn-danger:disabled       { background-color: var(--status-error-bg) !important;     color: var(--status-error-fg) !important; }
.mud-button-root.kontix-iconbutton:disabled       { background-color: transparent !important;                color: var(--text-body) !important; }

/* ================== Round icon button with hairline ring ================== */
.mud-button-root.kontix-iconbutton {
    background-color: transparent;
    color: var(--text-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    width: var(--control-h-md); height: var(--control-h-md);
    padding: 0;
    transition: var(--transition-control);
}
.mud-button-root.kontix-iconbutton-header { width: 40px; height: 40px; }
.mud-button-root.kontix-iconbutton-sm     { width: 38px; height: 38px; }
.mud-button-root.kontix-iconbutton:hover:not(.kontix-active) {
    background-color: var(--ink-800);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.mud-button-root.kontix-iconbutton .mud-icon-root        { font-size: 20px; }
.mud-button-root.kontix-iconbutton-header .mud-icon-root { font-size: 18px; }
.mud-button-root.kontix-iconbutton-sm .mud-icon-root     { font-size: 16px; }
.mud-button-root.kontix-btn .mud-icon-root               { font-size: 18px; }
.mud-button-root.kontix-btn-sm .mud-icon-root            { font-size: 16px; }
.mud-input.mud-input-outlined .mud-input-adornment .mud-icon-root { font-size: 18px; color: var(--text-muted); }
.mud-button-root.kontix-iconbutton.kontix-active {
    background-color: var(--surface-accent-soft);
    border-color: var(--border-accent);
    color: var(--text-accent);
}

/* ========================= Input fields =================================== */
.mud-input.mud-input-outlined {
    background-color: var(--surface-input);
    border-radius: var(--radius-input);
    min-height: var(--control-h-md);
}
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-subtle);
    border-radius: var(--radius-input);
}
.mud-input.mud-input-outlined .mud-input-slot { padding: var(--pad-input-y) var(--pad-input-x); }
.mud-input.mud-input-outlined.mud-input-adorned-end { padding-right: var(--pad-input-x); }
.mud-input.mud-input-outlined > input.mud-input-slot.mud-input-root-adorned-end {
    padding-inline-start: var(--pad-input-x);
}

.mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
    border-color: var(--border-strong);
}
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-color: var(--border-accent-strong);
    border-width: 1px;
}
.mud-input.mud-input-outlined:focus-within { box-shadow: var(--shadow-focus); }
.mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-color: var(--status-error-fg) !important;
}
.mud-input.mud-input-outlined .mud-input-slot::placeholder { color: var(--text-faint); opacity: 1; }
.kontix-field .mud-input-control .mud-input-helper-text { display: none !important; }

/* The Mud stamps subtitle1 typography on the input slot — reset the weight. */
.mud-input.mud-input-outlined,
.mud-input.mud-input-outlined .mud-input-slot { font-weight: var(--weight-regular); }

/* ============ Dropdown surfaces (Select, Autocomplete, Menu) ============== */
.mud-popover.mud-popover-open {
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-raised);
}
.mud-popover .mud-list-item {
    min-height: var(--hit-min);
    padding: var(--pad-input-y) var(--pad-input-x);
    border-bottom: 1px solid var(--border-hairline);
    color: var(--text-body);
}
.mud-popover .mud-list-item:last-child { border-bottom: none; }
.mud-popover .mud-list-item.mud-selected-item {
    background-color: var(--surface-accent-soft) !important;
    color: var(--text-accent) !important;
}
.mud-popover .mud-list-item.mud-list-item-clickable:hover { background-color: var(--ink-800); }
.mud-popover .mud-list-item.mud-list-item-clickable:focus:not(.mud-selected-item),
.mud-popover .mud-list-item.mud-list-item-clickable:active:not(.mud-selected-item) {
    background-color: var(--ink-800);
}

/* ==================== Selectable list row ================================= */
.mud-list-item.kontix-listrow {
    min-height: var(--hit-min);
    padding: var(--pad-input-y) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: var(--transition-control);
}
.mud-list-item.kontix-listrow:not(.mud-selected-item):hover {
    background-color: var(--ink-800);
    border-color: var(--border-strong);
}
.mud-list-item.kontix-listrow.mud-selected-item {
    background-color: var(--surface-accent-soft) !important;
    border-color: var(--border-accent);
    color: var(--text-accent) !important;
}

/* ============================ Table ======================================= */
.mud-table.kontix-table .mud-table-container { overflow-x: auto; }
.mud-table.kontix-table .mud-table-cell {
    border-bottom: 1px solid var(--border-hairline);
    padding: var(--pad-input-y) var(--pad-input-x);
    white-space: nowrap;
}
.mud-table.kontix-table .mud-table-cell.kontix-mono {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-caps);
}
.mud-table.kontix-table .mud-table-head .mud-table-cell {
    padding: 10px var(--pad-input-x);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-faint);
}
.mud-table.kontix-table .mud-table-row { cursor: default; }
.mud-table.kontix-table.kontix-table-clickable .mud-table-row { cursor: pointer; }
.kontix-mono { font-family: var(--font-mono); letter-spacing: var(--tracking-caps); }

/* ============ Field wrapper, ValueField, empty state, dropzone ============ */
.kontix-field { display: flex; flex-direction: column; gap: var(--space-2); }

.kontix-valuefield {
    min-height: var(--control-h-lg);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-input);
    display: flex; align-items: center; justify-content: center;
    padding: var(--pad-input-y) var(--pad-input-x);
}
.kontix-valuefield-accent {
    color: var(--text-accent);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-lg);
}

.kontix-empty { padding: var(--space-12) var(--space-6); text-align: center; }

.kontix-splash {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100vh;
    background-color: var(--bg-app);
}
.kontix-splash img { height: 34px; margin-bottom: var(--space-5); }
.kontix-splash p   { font: var(--type-body); color: var(--text-accent); }

#blazor-error-ui {
    background-color: var(--status-error-bg);
    color: var(--status-error-fg);
    border-top: 1px solid var(--border-hairline);
    font: var(--type-body);
    padding: var(--space-3) var(--space-5);
}
#blazor-error-ui .reload,
#blazor-error-ui .dismiss { color: var(--status-error-fg); cursor: pointer; }

.kontix-dropzone {
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-10) var(--space-6);
    background-color: var(--surface-raised);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-control);
}
.kontix-dropzone:hover { border-color: var(--border-strong); }
.mud-file-upload { width: 100%; }

/* ========================= Time picker fields ============================== */
/* Keeps the "HH:mm" value from clipping/wrapping when the field sits in a
   shrinking grid column (e.g. kontix-fields-2col on narrow layouts). */
.kontix-time-field {
    min-width: 150px;
    flex-shrink: 0;
}

/* MudPicker's inline click-catcher overlay (used to close on an outside click)
   renders at the base z-index (5) with no dialog-aware bump, unlike its visible
   popup content — so a click on a MudDialog's surface, which sits far above it,
   never reaches it and the picker only closes once a value is picked. */
.mud-overlay:not(.mud-overlay-dialog):not(.mud-overlay-drawer) {
    z-index: calc(var(--mud-zindex-dialog) + 2);
}

/* ===================== Dialog and snackbar ================================ */
.mud-overlay .mud-overlay-scrim { backdrop-filter: var(--blur-overlay); }
.mud-dialog-container .mud-dialog {
    background-color: var(--surface-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raised);
    animation: none;
}

.mud-snackbar.mud-snackbar-surface,
.mud-snackbar.mud-snackbar-blurred {
    background-color: var(--surface-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-raised);
}
.mud-snackbar.mud-alert-outlined-success, .mud-snackbar.mud-alert-filled-success { background-color: var(--status-ok-bg) !important;    color: var(--status-ok-fg) !important; }
.mud-snackbar.mud-alert-outlined-warning, .mud-snackbar.mud-alert-filled-warning { background-color: var(--status-warn-bg) !important;  color: var(--status-warn-fg) !important; }
.mud-snackbar.mud-alert-outlined-error,   .mud-snackbar.mud-alert-filled-error   { background-color: var(--status-error-bg) !important; color: var(--status-error-fg) !important; }
.mud-snackbar.mud-alert-outlined-info,    .mud-snackbar.mud-alert-filled-info    { background-color: var(--status-info-bg) !important;  color: var(--status-info-fg) !important; }

/* ===================== Login screen ======================================= */
.kontix-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}
.kontix-login-panel {
    width: 100%;
    max-width: 1280px;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr);
    gap: var(--gap-section);
    align-items: center;
}
.kontix-login-hero img {
    width: 100%;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-hairline);
    display: block;
}
.kontix-login-footer {
    margin-top: var(--space-6);
    text-align: center;
    color: var(--text-faint);
    font: var(--type-helper);
}
@media (max-width: 959.98px) {
    .kontix-login-panel { grid-template-columns: 1fr; max-width: 430px; }
    .kontix-login-hero { display: none; }
}

/* ================= AI mode hotspot (Craft Studio) ========================= */
.kontix-ai-hotspot { position: relative; display: block; }
.kontix-ai-hotspot-button {
    position: absolute;
    top: calc(-1 * var(--space-2));
    right: calc(-1 * var(--space-2));
    z-index: 10;
    width: 28px; height: 28px;
    padding: 2px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-accent);
    background-color: var(--surface-raised);
    cursor: pointer;
    transition: var(--transition-control);
}
.kontix-ai-hotspot-button:hover { border-color: var(--border-accent-strong); box-shadow: var(--shadow-accent-glow); }
.kontix-ai-hotspot-button img { width: 100%; height: 100%; display: block; border-radius: var(--radius-pill); }

/* ======================= Reduced motion =================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}