:root {
    --bg: #0e1012;
    --surface: #15181b;
    --surface-2: #1a1e22;
    --surface-3: #20252a;
    --border: #282e33;
    --border-strong: #3b444c;
    --text: #f1f3f4;
    --muted: #929ba3;
    --faint: #606a72;
    --accent: #d5ff5f;
    --accent-hover: #e0ff89;
    --accent-soft: rgba(213, 255, 95, .11);
    --danger: #ff7474;
    --warning: #f2b66d;
    --topbar-bg: #0e1012;
    --field-bg: #111416;
    --auth-card-bg: #15181b;
    --mark-text: #11140b;
    --accent-contrast: #11140b;
    --max-width: 1180px;
    --sidebar-expanded-width: 248px;
    --sidebar-collapsed-width: 76px;
    --actions-width: 190px;
    --reward-action-width: 92px;
}

html[data-theme="light"] {
    --bg: #f5f7f8;
    --surface: #ffffff;
    --surface-2: #f0f3f5;
    --surface-3: #e6ebef;
    --border: #d9e0e5;
    --border-strong: #bcc8d1;
    --text: #12171b;
    --muted: #52606a;
    --faint: #7b8790;
    --accent: #5b7f00;
    --accent-hover: #4f6f00;
    --accent-soft: rgba(91, 127, 0, .1);
    --danger: #b83f3f;
    --warning: #9a5d18;
    --topbar-bg: #f5f7f8;
    --field-bg: #ffffff;
    --auth-card-bg: #ffffff;
    --mark-text: #ffffff;
    --accent-contrast: #ffffff;
}

html.icons-ready { --actions-width: 108px; --reward-action-width: 34px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background: var(--bg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }
svg { display: block; }

.catalog-shell {
    min-height: 100vh;
    padding-left: var(--sidebar-expanded-width);
    transition: padding-left .2s cubic-bezier(.2, .8, .2, 1);
}

.sidebar {
    width: var(--sidebar-expanded-width);
    min-width: 0;
    padding: 0 12px 14px;
    border-right: 1px solid var(--border);
    background: var(--topbar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    transition: width .2s cubic-bezier(.2, .8, .2, 1), transform .2s cubic-bezier(.2, .8, .2, 1);
}

.sidebar-head {
    min-height: 64px;
    padding: 0 4px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-brand {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.sidebar-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-toggle,
.mobile-menu-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted);
    background: transparent;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    cursor: pointer;
}

.sidebar-toggle:hover,
.mobile-menu-button:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.sidebar-toggle svg,
.mobile-menu-button svg { width: 17px; height: 17px; }
.sidebar-toggle-mobile-icon { display: none; }

.sidebar-nav {
    padding: 16px 0;
    display: grid;
    gap: 4px;
}

.sidebar-nav-item {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--muted);
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}

.sidebar-nav-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.sidebar-nav-item:hover {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface-2);
}

.sidebar-nav-item.is-active {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-3);
}

.sidebar-nav-item.is-active::before {
    content: "";
    width: 3px;
    height: 18px;
    border-radius: 3px;
    background: var(--accent);
    position: absolute;
    left: -1px;
}

.sidebar-nav-item.is-active svg { color: var(--accent); }
.sidebar-nav-item[aria-disabled="true"] { color: var(--faint); cursor: default; }
.sidebar-nav-item[aria-disabled="true"]:hover { color: var(--faint); border-color: transparent; background: transparent; }

.sidebar-footer {
    margin-top: auto;
    display: grid;
    gap: 10px;
}

.sidebar-footer .service-status { width: 100%; }
.sidebar-footer .service-status-trigger {
    width: 100%;
    min-height: 38px;
    justify-content: flex-start;
}
.sidebar-footer .service-status-dropdown {
    top: auto;
    bottom: calc(100% + 9px);
    left: 0;
}

.sidebar-footer .source-status {
    min-height: 34px;
    padding: 0 12px;
}

.sidebar-account {
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 10px;
}

.sidebar-account-summary {
    min-width: 0;
    min-height: 34px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-account-summary > svg {
    width: 17px;
    height: 17px;
    color: var(--muted);
    flex: 0 0 auto;
}

.sidebar-account-summary .account-name { max-width: none; }

.sidebar-account-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-logout {
    min-width: 38px;
    min-height: 33px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    font-size: 10px;
}

.sidebar-logout:hover { color: var(--text); border-color: var(--border-strong); }
.sidebar-logout:disabled { opacity: .5; cursor: wait; }
.sidebar-logout svg { width: 14px; height: 14px; }

.catalog-shell.sidebar-collapsed { padding-left: var(--sidebar-collapsed-width); }
.catalog-shell.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
.catalog-shell.sidebar-collapsed .sidebar-label,
.catalog-shell.sidebar-collapsed .sidebar .service-status-text,
.catalog-shell.sidebar-collapsed .sidebar .source-status span:last-child { display: none; }
.catalog-shell.sidebar-collapsed .sidebar-head { justify-content: center; }
.catalog-shell.sidebar-collapsed .sidebar-brand { flex: 0 0 auto; }
.catalog-shell.sidebar-collapsed .sidebar-toggle { position: absolute; top: 76px; }
.catalog-shell.sidebar-collapsed .sidebar-nav { padding-top: 58px; }
.catalog-shell.sidebar-collapsed .sidebar-nav-item,
.catalog-shell.sidebar-collapsed .sidebar-footer .service-status-trigger,
.catalog-shell.sidebar-collapsed .sidebar-footer .source-status,
.catalog-shell.sidebar-collapsed .sidebar-account-summary { padding-inline: 0; justify-content: center; }
.catalog-shell.sidebar-collapsed .sidebar-account-actions { justify-content: center; }
.catalog-shell.sidebar-collapsed .sidebar-account-actions .theme-control { display: none; }
.catalog-shell.sidebar-collapsed .sidebar-footer .service-status-dropdown {
    left: calc(100% + 10px);
    bottom: 0;
}

.mobile-topbar,
.sidebar-backdrop { display: none; }

.topbar {
    height: 64px;
    padding: 0 max(24px, calc((100vw - var(--max-width)) / 2));
    border-bottom: 1px solid var(--border);
    background: var(--topbar-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 30;
}

.brand {
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 680;
}

.brand-mark {
    width: 22px;
    height: 22px;
    border: 2px solid var(--accent);
    border-radius: 5px;
    position: relative;
}

.brand-mark::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--bg);
    border-radius: 50%;
    background: var(--accent);
}

.topbar-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.service-status {
    position: relative;
    flex: 0 0 auto;
}

.service-status-trigger {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: default;
    font-size: 11.5px;
    font-weight: 700;
}

.service-status-trigger:hover,
.service-status:focus-within .service-status-trigger {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.service-status-dot,
.service-status-row-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--faint);
    flex: 0 0 auto;
}

.service-status.is-up .service-status-dot,
.service-status-row.is-up .service-status-row-dot {
    background: var(--accent);
}

.service-status.is-down .service-status-dot,
.service-status-row.is-down .service-status-row-dot {
    background: var(--danger);
}

.service-status.is-degraded .service-status-dot,
.service-status-row.is-pending .service-status-row-dot,
.service-status-row.is-maintenance .service-status-row-dot {
    background: var(--warning);
}

.service-status-dropdown {
    width: min(420px, calc(100vw - 32px));
    max-height: min(430px, calc(100vh - 84px));
    padding: 13px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 18px -14px rgba(0,0,0,.55);
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 45;
    display: grid;
    gap: 10px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

.service-status:hover .service-status-dropdown,
.service-status:focus-within .service-status-dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.service-status-head {
    padding: 1px 2px 0;
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.service-status-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 760;
}

.service-status-head span {
    color: var(--faint);
    white-space: nowrap;
    font: 9px ui-monospace, SFMono-Regular, Consolas, monospace;
}

.service-status-overview {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.service-status-overview-item {
    min-width: 0;
    min-height: 43px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--field-bg);
    display: grid;
    align-content: center;
    gap: 2px;
}

.service-status-overview-item strong {
    color: var(--text);
    font: 760 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.service-status-overview-item span {
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
}

.service-status-overview-item.is-up strong { color: var(--accent); }
.service-status-overview-item.is-down strong { color: #ff8f8f; }
.service-status-overview-item.is-pending strong,
.service-status-overview-item.is-maintenance strong { color: #f2c98c; }

.service-status-list {
    max-height: 292px;
    overflow-y: auto;
    display: grid;
    gap: 6px;
    scrollbar-width: thin;
}

.service-status-row {
    min-width: 0;
    min-height: 46px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--field-bg);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.service-status-row:hover { border-color: var(--border); background: var(--surface-2); }
.service-status-row-body { min-width: 0; display: grid; gap: 3px; flex: 1 1 auto; }
.service-status-row-body strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 720;
    line-height: 1.15;
}
.service-status-row-meta {
    color: var(--muted);
    font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.service-status-badge {
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--faint);
    background: var(--surface-2);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 8.5px;
    font-weight: 760;
}
.service-status-badge.is-up {
    color: var(--accent);
}
.service-status-badge.is-down {
    color: var(--danger);
}
.service-status-badge.is-pending,
.service-status-badge.is-maintenance {
    color: var(--warning);
}
.service-status-empty {
    min-height: 64px;
    padding: 18px 10px;
    display: grid;
    place-items: center;
    color: var(--muted);
    text-align: center;
    font-size: 11px;
}

.source-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warning);
}

.source-status.is-ready .status-dot { background: var(--accent); }
.source-status.is-error .status-dot { background: var(--danger); }

.page {
    width: min(calc(100% - 48px), var(--max-width));
    margin: 0 auto;
    padding: 52px 0 48px;
}

.intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 48px;
}

.context-label {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

h1 {
    margin: 0;
    font-size: clamp(38px, 5vw, 56px);
    line-height: 1;
    letter-spacing: -.03em;
    font-weight: 680;
}

.lead {
    max-width: 455px;
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.search-panel {
    margin-top: 36px;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 10px 0 12px;
    background: var(--bg);
}
.has-no-catalog-access .search-panel { display: none; }

.search-box {
    min-height: 60px;
    padding: 0 15px 0 19px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.search-box:focus-within { border-color: rgba(213,255,95,.7); box-shadow: 0 0 0 4px rgba(213,255,95,.06); }
.search-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }

#searchInput {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 58px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-size: 15px;
}

#searchInput::placeholder { color: var(--faint); }
#searchInput::-webkit-search-cancel-button { display: none; }

.shortcut {
    min-width: 27px;
    height: 27px;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    color: var(--muted);
    background: var(--field-bg);
    display: grid;
    place-items: center;
    font: 12px/1 ui-monospace, monospace;
    box-shadow: none;
}

.clear-button, .dialog-close, .row-action, .section-link, .show-more {
    border: 0;
    cursor: pointer;
}

.clear-button {
    min-height: 30px;
    padding: 0 8px;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.clear-button:hover { color: var(--text); background: var(--border); }
.clear-button svg { width: 16px; height: 16px; }
.icons-ready .clear-button { width: 30px; padding: 0; justify-content: center; }
.icons-ready .clear-button .action-label { display: none; }

.filters {
    margin-top: 12px;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
}

.filter {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
}

.filter svg { width: 14px; height: 14px; }
.filter:hover { color: var(--text); border-color: var(--border-strong); }
.filter.is-active { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }
.filter b { color: var(--faint); font: 10px ui-monospace, monospace; }
.filter.is-active b { color: var(--accent); }
.filter-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--text); }
.favorite-filter.is-active svg, .favorite-action.is-active svg { color: #ffd76a; fill: #ffd76a; }

.catalog-picker { width: min(100%, 290px); position: relative; }
.catalog-picker-trigger {
    width: 100%;
    min-width: 0;
    view-transition-name: catalog-picker;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.catalog-picker-trigger > svg:first-child { flex: 0 0 auto; }
.catalog-picker-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-picker-count { margin-left: auto; }
.catalog-picker-chevron { flex: 0 0 auto; transition: transform .16s ease; }
.catalog-picker.is-open .catalog-picker-chevron { transform: rotate(180deg); }

.catalog-picker-popover {
    width: min(380px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 25;
    box-shadow: 0 10px 24px rgba(0,0,0,.34);
}

.catalog-picker-search-box {
    min-height: 37px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--field-bg);
    display: flex;
    align-items: center;
    gap: 8px;
}
.catalog-picker-search-box:focus-within { border-color: var(--border-strong); }
.catalog-picker-search-box svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.catalog-picker-search {
    width: 100%;
    min-width: 0;
    min-height: 35px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-size: 11px;
}
.catalog-picker-search::placeholder { color: var(--faint); }
.catalog-picker-search::-webkit-search-cancel-button { display: none; }
.catalog-picker-list {
    max-height: min(360px, 48vh);
    margin-top: 7px;
    display: grid;
    gap: 3px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--border-strong) transparent;
}
.catalog-picker-option {
    width: 100%;
    min-height: 38px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    text-align: left;
    font-size: 11px;
}
.catalog-picker-option:hover { color: var(--text); background: var(--surface-2); }
.catalog-picker-option.is-active { color: var(--text); border-color: var(--border); background: var(--surface-3); }
.catalog-picker-option svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.catalog-picker-option.is-active svg { color: var(--accent); }
.catalog-picker-option-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-picker-option b { flex: 0 0 auto; color: var(--faint); font: 9px ui-monospace, monospace; }
.catalog-picker-option.is-active b { color: var(--accent); }
.catalog-picker-empty { margin: 0; padding: 22px 10px 18px; color: var(--faint); text-align: center; font-size: 11px; }

.search-assist {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}
.assist-group { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.assist-label { min-width: 64px; color: var(--faint); font: 9px ui-monospace, monospace; text-transform: uppercase; }
.assist-chip {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 10px;
}
.assist-chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.assist-chip svg { width: 13px; height: 13px; }

.result-controls {
    margin-top: 10px;
    width: max-content;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 86%, var(--surface-2));
    display: flex;
    gap: 3px;
}
.mode-button {
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
}
.mode-button:hover { color: var(--text); }
.mode-button.is-active { color: var(--accent-contrast); background: var(--accent); }

.catalog-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.catalog-tab {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted);
    background: var(--surface);
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.catalog-tab:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.catalog-tab.is-active { color: var(--accent-contrast); border-color: var(--accent); background: var(--accent); }

.content-section {
    margin-top: 42px;
    view-transition-name: catalog-content;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

::view-transition-group(catalog-content) {
    animation-duration: 390ms;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

::view-transition-old(catalog-content) {
    animation: catalog-content-out 110ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(catalog-content) {
    animation: catalog-content-in 290ms cubic-bezier(.2, .8, .2, 1) 90ms both;
}

::view-transition-group(catalog-picker) {
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

::view-transition-old(catalog-picker) {
    animation: catalog-picker-out 75ms ease-in both;
}

::view-transition-new(catalog-picker) {
    animation: catalog-picker-in 175ms cubic-bezier(.2, .8, .2, 1) 65ms both;
}

@keyframes catalog-content-out {
    to { opacity: 0; transform: translateY(-7px) scale(.998); }
}

@keyframes catalog-content-in {
    from { opacity: 0; transform: translateY(14px) scale(.996); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes catalog-picker-out {
    to { opacity: 0; transform: translateY(-3px); }
}

@keyframes catalog-picker-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-head {
    min-height: 50px;
    margin-bottom: 16px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

.section-head h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.025em; font-weight: 650; }
#searchTime { color: var(--faint); font: 10px ui-monospace, monospace; }

.results { display: flex; flex-direction: column; gap: 26px; }

.table-section-head {
    min-height: 34px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.table-heading { display: flex; align-items: baseline; gap: 9px; }
.table-heading h3 { margin: 0; font-size: 14px; font-weight: 650; }
.table-count { color: var(--faint); font: 10px ui-monospace, monospace; }

.section-link {
    padding: 5px 3px;
    color: var(--muted);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
}

.section-link:hover { color: var(--text); }
.section-link svg { width: 14px; height: 14px; order: 2; }

.data-table {
    --table-columns: 44px minmax(0, 1.4fr) minmax(220px, 1fr) var(--actions-width);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    overflow: hidden;
}

.table-header, .data-row {
    display: grid;
    grid-template-columns: var(--table-columns);
    align-items: center;
}

.table-header {
    min-height: 34px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
    color: var(--faint);
    background: var(--surface-2);
    font: 9px ui-monospace, monospace;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.header-actions { text-align: right; }

.data-row {
    min-height: 58px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: background-color .12s ease;
}

.data-row:last-child { border-bottom: 0; }
.data-row:hover { background: var(--surface-2); }
.data-row.is-focused { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.data-row.has-content-match { background: linear-gradient(90deg, var(--accent-soft), transparent 38%); }
.data-row.has-content-match::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }

.row-type {
    width: 29px;
    height: 29px;
    color: var(--muted);
    display: grid;
    place-items: center;
}

.row-type svg { width: 17px; height: 17px; }

.row-name, .row-id { min-width: 0; }
.row-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 620; }
.record-title-line { min-width: 0; display: flex; align-items: center; gap: 5px; }
.record-title-line > strong { min-width: 0; flex: 0 1 auto; }
.name-copy-button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--faint);
    background: transparent;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    cursor: pointer;
    opacity: .62;
    transition: opacity .14s ease, color .14s ease, border-color .14s ease, background-color .14s ease;
}
.name-copy-button:hover, .name-copy-button:focus-visible { opacity: 1; color: var(--text); border-color: var(--border); background: var(--surface-3); outline: 0; }
.name-copy-button svg { width: 12px; height: 12px; }
.name-copy-button .action-label { display: none; }
.row-id code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 10.5px ui-monospace, SFMono-Regular, Consolas, monospace; }
.vehicle-row.has-photo .row-name { display: flex; align-items: center; gap: 10px; }
.row-name-text { min-width: 0; }
.command-description {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
}
.faction-description {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
}
.record-description {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
}

.battlepass-table { --table-columns: 44px minmax(0, 1.55fr) minmax(230px, 1fr) 96px var(--actions-width); }
.battlepass-row { min-height: 66px; }
.battlepass-quest { min-width: 0; }
.battlepass-quest strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 620; }
.battlepass-description {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
}
.battlepass-reward { min-width: 0; display: grid; gap: 3px; }
.battlepass-reward strong { color: var(--text); font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
.battlepass-reward span { color: var(--faint); font-size: 9px; }
.vehicle-thumb {
    width: 76px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--field-bg);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    cursor: pointer;
    overflow: hidden;
}
.vehicle-thumb:hover { border-color: var(--border-strong); background: var(--surface-3); }
.vehicle-thumb img { width: 100%; height: 100%; object-fit: contain; }

.content-match-label {
    margin-top: 4px;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 9px ui-monospace, monospace;
}

.content-match-label svg { width: 11px; height: 11px; flex: 0 0 auto; }
.content-match-item { color: var(--text); }

.row-actions { display: flex; justify-content: flex-end; gap: 6px; }

.row-action {
    min-height: 31px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    background: var(--field-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10px;
}

.row-action:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }
.row-action svg { width: 14px; height: 14px; }
.case-source-action:disabled { color: var(--faint); border-color: var(--border); background: var(--field-bg); cursor: not-allowed; opacity: .55; }
.favorite-action.is-active { color: #ffd76a; border-color: rgba(255,215,106,.26); background: rgba(255,215,106,.08); }
.icons-ready .row-action { width: 31px; padding: 0; }
.icons-ready .row-action .action-label { display: none; }

mark { padding: 1px 0; border-radius: 2px; color: var(--mark-text); background: var(--accent); }

.empty-state, .loading-state, .error-state {
    min-height: 190px;
    padding: 34px;
    border: 1px dashed var(--border-strong);
    border-radius: 6px;
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--muted);
}

.empty-state strong, .error-state strong { color: var(--text); font-size: 14px; }
.empty-state p, .error-state p, .loading-state p { max-width: 520px; margin: 8px 0 0; font-size: 12px; line-height: 1.55; }

.loader { width: 22px; height: 22px; margin: auto; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton-table { overflow: hidden; }
.skeleton-row { pointer-events: none; }
.skeleton-icon, .skeleton-line, .skeleton-actions, .skeleton-pill {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
    background-size: 220% 100%;
    animation: skeletonPulse 1.1s ease-in-out infinite;
}
.skeleton-icon { width: 29px; height: 29px; }
.skeleton-line { width: 70%; height: 12px; }
.skeleton-line.wide { width: 82%; }
.skeleton-actions { width: 68px; height: 28px; justify-self: end; }
.skeleton-pill { width: 38px; height: 10px; }
@keyframes skeletonPulse { to { background-position: -220% 0; } }

.show-more {
    min-width: 155px;
    min-height: 40px;
    margin: 20px auto 0;
    padding: 0 18px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--muted);
    background: var(--surface);
    display: block;
    font-size: 11px;
}

.show-more:hover { color: var(--text); background: var(--surface-2); }

.detail-dialog {
    width: min(720px, calc(100% - 32px));
    max-height: min(86vh, 880px);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 8px 22px rgba(0,0,0,.32);
    overflow: hidden;
}

.detail-dialog::backdrop { background: rgba(3,5,6,.78); }
.dialog-shell { max-height: inherit; display: flex; flex-direction: column; }
.dialog-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialog-head h2 { margin: 0; overflow-wrap: anywhere; font-size: 19px; }
.dialog-case-id { display: block; margin-top: 5px; color: var(--muted); font: 10px ui-monospace, monospace; }
.dialog-close { min-width: 32px; height: 32px; padding: 0 9px; border-radius: 7px; color: var(--muted); background: var(--surface-3); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; }
.dialog-close:hover { color: var(--text); }
.dialog-close svg { width: 16px; height: 16px; }
.icons-ready .dialog-close { width: 32px; padding: 0; }
.icons-ready .dialog-close .action-label { display: none; }
.dialog-content { padding: 18px 20px 20px; overflow-y: auto; }
.case-source-summary { margin: 0 0 14px; color: var(--text); font-size: 12px; line-height: 1.5; }
.case-source-summary span { color: var(--muted); }
.case-source-list { display: grid; gap: 7px; }
.case-source-item {
    width: 100%;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: var(--field-bg);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}
.case-source-item:hover, .case-source-item:focus-visible { border-color: var(--border-strong); background: var(--surface-3); outline: 0; transform: translateY(-1px); }
.case-source-icon { width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 7px; color: var(--accent); background: var(--accent-soft); display: grid; place-items: center; }
.case-source-icon svg { width: 16px; height: 16px; }
.case-source-copy { min-width: 0; display: grid; gap: 4px; }
.case-source-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.case-source-copy code { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font: 9.5px ui-monospace, SFMono-Regular, Consolas, monospace; }
.case-source-open { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; }
.case-source-open svg { width: 14px; height: 14px; }
.case-source-item:hover .case-source-open, .case-source-item:focus-visible .case-source-open { color: var(--accent); }
.vehicle-photo-viewer {
    min-height: 260px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--field-bg);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.vehicle-photo-viewer img { max-width: 100%; max-height: 68vh; object-fit: contain; }
.vehicle-photo-actions { margin-top: 12px; display: flex; justify-content: flex-start; gap: 8px; }

.command-detail { display: grid; gap: 14px; }
.command-detail-description { margin: 0; color: var(--text); font-size: 13px; line-height: 1.55; }
.command-syntax {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--field-bg);
    display: grid;
    gap: 6px;
}
.command-syntax span { color: var(--faint); font: 9px ui-monospace, monospace; text-transform: uppercase; }
.command-syntax code { color: var(--text); overflow-wrap: anywhere; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.command-parameters { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.command-parameters-header, .command-parameter-row {
    display: grid;
    grid-template-columns: minmax(120px,.6fr) 96px minmax(0,1fr);
    gap: 10px;
    align-items: center;
}
.command-parameters-header {
    min-height: 30px;
    padding: 0 11px;
    border-bottom: 1px solid var(--border);
    color: var(--faint);
    background: var(--surface-2);
    font: 9px ui-monospace, monospace;
    text-transform: uppercase;
}
.command-parameter-row {
    min-height: 46px;
    padding: 8px 11px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
}
.command-parameter-row:last-child { border-bottom: 0; }
.command-parameter-row code { color: var(--text); overflow-wrap: anywhere; font-size: 10px; }
.command-no-parameters { margin: 0; color: var(--muted); font-size: 12px; }
.command-copy { justify-self: start; }
.faction-detail { display: grid; gap: 14px; }
.faction-detail-summary { margin: 0; color: var(--muted); font-size: 12px; }
.faction-ranks { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.faction-ranks-header, .faction-rank-row {
    display: grid;
    grid-template-columns: 92px minmax(0,1fr) var(--actions-width);
    gap: 10px;
    align-items: center;
}
.faction-ranks-header {
    min-height: 30px;
    padding: 0 11px;
    border-bottom: 1px solid var(--border);
    color: var(--faint);
    background: var(--surface-2);
    font: 9px ui-monospace, monospace;
    text-transform: uppercase;
}
.faction-rank-row {
    min-height: 42px;
    padding: 8px 11px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 11px;
}
.faction-rank-row:last-child { border-bottom: 0; }
.faction-rank-row code { color: var(--muted); font-size: 10px; }
.faction-rank-action-header { text-align: right; }
.faction-rank-copy { justify-self: end; }
.faction-no-ranks { margin: 0; color: var(--muted); font-size: 12px; }
.faction-copy { justify-self: start; }
.battlepass-detail { display: grid; gap: 14px; }
.battlepass-detail-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.battlepass-summary-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apartment-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.battlepass-summary-item {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}
.battlepass-summary-item span { display: block; color: var(--faint); font: 9px ui-monospace, monospace; text-transform: uppercase; }
.battlepass-summary-item strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; }
.battlepass-detail-description { margin: 0; color: var(--text); font-size: 13px; line-height: 1.55; }
.battlepass-detail-block { display: grid; gap: 8px; }
.battlepass-detail-block h3 { margin: 0; color: var(--faint); font: 9px ui-monospace, monospace; text-transform: uppercase; }
.battlepass-detail-list { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.battlepass-detail-row { padding: 9px 11px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.battlepass-detail-row:last-child { border-bottom: 0; }
.battlepass-copy { justify-self: start; }

.rewards-table { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.rewards-header { min-height: 30px; padding: 0 11px; border-bottom: 1px solid var(--border); color: var(--faint); background: var(--surface-2); display: grid; grid-template-columns: minmax(0,1fr) 76px var(--reward-action-width); gap: 10px; align-items: center; font: 9px ui-monospace, monospace; text-transform: uppercase; }
.rewards-header span:nth-child(2), .rewards-header span:last-child { text-align: right; }
.reward-row { min-height: 52px; padding: 8px 11px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0,1fr) 76px var(--reward-action-width); gap: 10px; align-items: center; position: relative; }
.reward-row:last-child { border-bottom: 0; }
.reward-row.is-match { background: var(--accent-soft); }
.reward-row.is-match::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
.reward-name { min-width: 0; }
.reward-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.reward-name code { display: block; margin-top: 3px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; }
.reward-weight { text-align: right; font: 10px ui-monospace, monospace; }
.reward-copy { justify-self: end; }
.apartment-variants .rewards-header,
.apartment-variants .reward-row { grid-template-columns: minmax(0,1fr) 112px var(--reward-action-width); }
.apartment-variants .reward-name code { margin-top: 0; color: var(--text); }
.weight-track { height: 3px; margin-top: 6px; border-radius: 2px; background: var(--border); overflow: hidden; }
.weight-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

.toast {
    position: fixed;
    right: 24px;
    top: 82px;
    z-index: 50;
    min-width: min(320px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 6px 16px -10px rgba(0,0,0,.5);
    opacity: 0;
    transform: translate(16px, -8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 650;
}

.toast.is-visible { opacity: 1; transform: translate(0, 0); }

.row-action.is-copied, .compact-button.is-copied, .name-copy-button.is-copied {
    color: var(--accent-contrast);
    border-color: var(--accent);
    background: var(--accent);
    animation: copyPulse .42s cubic-bezier(.2,.8,.2,1);
}
.row-action.is-copied svg, .name-copy-button.is-copied svg { transform: scale(1.08); }
@keyframes copyPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

body > footer {
    width: min(calc(100% - 48px), var(--max-width));
    margin: 0 auto;
    padding: 24px 0 32px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--faint);
    font-size: 10px;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 820px) {
    .intro { align-items: start; flex-direction: column; gap: 15px; }
    .data-table { --table-columns: 42px minmax(0,1.2fr) minmax(180px,.9fr) var(--actions-width); }
    .battlepass-table { --table-columns: 42px minmax(0,1.45fr) minmax(180px,.9fr) 82px var(--actions-width); }
    .battlepass-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .catalog-shell,
    .catalog-shell.sidebar-collapsed { padding-left: 0; }

    .sidebar,
    .catalog-shell.sidebar-collapsed .sidebar {
        width: min(286px, calc(100vw - 40px));
        transform: translateX(-100%);
        box-shadow: 16px 0 32px rgba(0, 0, 0, .28);
        z-index: 70;
    }

    .catalog-shell.sidebar-mobile-open .sidebar { transform: translateX(0); }
    .catalog-shell.sidebar-mobile-open { overflow: hidden; }

    .catalog-shell.sidebar-collapsed .sidebar-label,
    .catalog-shell.sidebar-collapsed .sidebar .service-status-text,
    .catalog-shell.sidebar-collapsed .sidebar .source-status span:last-child { display: block; }
    .catalog-shell.sidebar-collapsed .sidebar-head { justify-content: flex-start; }
    .catalog-shell.sidebar-collapsed .sidebar-brand { flex: 1 1 auto; }
    .catalog-shell.sidebar-collapsed .sidebar-toggle { position: static; }
    .catalog-shell.sidebar-collapsed .sidebar-nav { padding-top: 16px; }
    .catalog-shell.sidebar-collapsed .sidebar-nav-item,
    .catalog-shell.sidebar-collapsed .sidebar-footer .service-status-trigger,
    .catalog-shell.sidebar-collapsed .sidebar-footer .source-status,
    .catalog-shell.sidebar-collapsed .sidebar-account-summary { padding-inline: 12px; justify-content: flex-start; }
    .catalog-shell.sidebar-collapsed .sidebar-account-summary { padding-inline: 9px; }
    .catalog-shell.sidebar-collapsed .sidebar-account-actions { justify-content: space-between; }
    .catalog-shell.sidebar-collapsed .sidebar-account-actions .theme-control { display: inline-flex; }
    .sidebar .source-status { display: flex; }
    .catalog-shell.sidebar-collapsed .sidebar-footer .service-status-dropdown {
        left: 0;
        bottom: calc(100% + 9px);
    }

    .sidebar-toggle-collapse-icon { display: none; }
    .sidebar-toggle-mobile-icon { display: block; }

    .mobile-topbar {
        height: 58px;
        padding: 0 16px;
        border-bottom: 1px solid var(--border);
        background: var(--topbar-bg);
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .mobile-topbar .brand { font-size: 13px; }

    .sidebar-backdrop {
        padding: 0;
        border: 0;
        background: rgba(3, 5, 6, .66);
        display: block;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        inset: 0;
        z-index: 65;
        transition: opacity .2s ease;
    }

    .catalog-shell.sidebar-mobile-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 640px) {
    :root, html.icons-ready { --actions-width: auto; }
    .topbar { height: 58px; padding-inline: 16px; }
    .topbar-left { gap: 9px; }
    .brand { gap: 8px; }
    .brand span:last-child { max-width: 94px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .service-status-trigger { width: 30px; padding: 0; justify-content: center; }
    .service-status-text { display: none; }
    .service-status-dropdown { left: auto; right: -8px; top: calc(100% + 12px); }
    .service-status-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-status-list { max-height: 300px; }
    .service-status-row { align-items: flex-start; }
    .service-status-badge { margin-top: 1px; }
    .search-panel { top: 58px; margin-top: 24px; padding-top: 8px; }
    .source-status span:last-child { display: none; }
    .page { width: calc(100% - 32px); padding-top: 36px; }
    h1 { font-size: 40px; }
    .lead { font-size: 14px; }
    .search-panel { margin-top: 27px; }
    .search-box { min-height: 58px; padding-inline: 16px 11px; }
    #searchInput { height: 56px; font-size: 14px; }
    .shortcut { display: none; }
    .result-controls { max-width: 100%; overflow-x: auto; }
    .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters > .filter { width: 100%; min-width: 0; justify-content: center; }
    .catalog-picker { width: 100%; grid-column: 1 / -1; }
    .catalog-picker-popover { width: 100%; }
    .assist-label { width: 100%; }
    .content-section { margin-top: 34px; }
    .section-head h2 { font-size: 20px; }
    .results { gap: 23px; }
    .data-table { border: 0; background: transparent; display: grid; gap: 10px; overflow: visible; }
    .table-header { display: none; }
    .data-row {
        min-height: 0;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        grid-template-columns: 36px minmax(0,1fr);
        grid-template-rows: auto auto auto;
        gap: 8px 10px;
    }
    .data-row.is-focused { box-shadow: inset 3px 0 0 var(--accent); }
    .row-type { width: 29px; height: 29px; grid-column: 1; grid-row: 1 / 3; align-self: start; }
    .row-name { grid-column: 2; grid-row: 1; align-self: end; }
    .row-id { grid-column: 2; grid-row: 2; align-self: start; margin-top: 3px; }
    .row-actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; padding-top: 8px; border-top: 1px solid var(--border); }
    .row-name strong { font-size: 12px; }
    .row-id code { font-size: 9.5px; }
    .vehicle-row.has-photo .row-name { align-items: flex-start; }
    .vehicle-thumb { width: 88px; height: 58px; }
    .command-description { white-space: normal; line-height: 1.35; }
    .faction-description { white-space: normal; line-height: 1.35; }
    .record-description { white-space: normal; line-height: 1.35; }
    .battlepass-row { grid-template-columns: 36px minmax(0,1fr); grid-template-rows: auto auto auto auto; }
    .battlepass-quest { grid-column: 2; grid-row: 1; }
    .battlepass-row .row-id { grid-column: 2; grid-row: 2; margin-top: 0; }
    .battlepass-description, .battlepass-quest strong { white-space: normal; line-height: 1.35; }
    .record-title-line { align-items: flex-start; }
    .name-copy-button { opacity: 1; }
    .battlepass-reward { grid-column: 2; grid-row: 3; display: flex; align-items: baseline; gap: 7px; }
    .battlepass-row .row-actions { grid-row: 4; }
    .battlepass-detail-summary { grid-template-columns: minmax(0, 1fr); }
    .command-parameters-header { display: none; }
    .command-parameter-row { grid-template-columns: minmax(0,1fr); gap: 5px; align-items: start; }
    .faction-ranks-header { display: none; }
    .faction-rank-row { grid-template-columns: minmax(0,1fr) auto; gap: 5px 10px; align-items: center; }
    .faction-rank-row code { grid-column: 1; }
    .faction-rank-row span { grid-column: 1; }
    .faction-rank-copy { grid-column: 2; grid-row: 1 / 3; }
    .apartment-variants .rewards-header { display: none; }
    .apartment-variants .reward-row {
        grid-template-columns: minmax(0, 1fr) var(--reward-action-width);
        grid-template-rows: auto auto;
        gap: 5px 10px;
    }
    .apartment-variants .reward-name { grid-column: 1; grid-row: 1; }
    .apartment-variants .reward-name code { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
    .apartment-variants .reward-weight { grid-column: 1; grid-row: 2; color: var(--muted); text-align: left; }
    .apartment-variants .reward-copy { grid-column: 2; grid-row: 1 / 3; }
    .content-match-label { white-space: normal; line-height: 1.35; }
    .icons-ready .row-action { width: 30px; height: 30px; }
    .dialog-head, .dialog-content { padding-inline: 16px; }
    .case-source-open span { display: none; }
    body > footer { width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
    ::view-transition-old(root), ::view-transition-new(root),
    ::view-transition-old(catalog-content), ::view-transition-new(catalog-content),
    ::view-transition-old(catalog-picker), ::view-transition-new(catalog-picker) { animation: none !important; }
}

/* Authentication and administration */
.topbar-actions, .account-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-controls { padding-left: 12px; border-left: 1px solid var(--border); }
.account-name { max-width: 180px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.topbar-link { color: var(--muted); text-decoration: none; font-size: 11px; }
.topbar-link:hover { color: var(--text); }
.topbar-button { padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: var(--surface); font-size: 10px; cursor: pointer; }
.topbar-button:hover { color: var(--text); border-color: var(--border-strong); }
.topbar-button:disabled { opacity: .5; cursor: wait; }
.theme-control {
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 88%, var(--surface-2));
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.theme-option {
    width: 27px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: var(--faint);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.theme-option:hover {
    color: var(--text);
    background: var(--surface-3);
}
.theme-option:active { transform: scale(.92); }
.theme-option:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 66%, transparent); outline-offset: 1px; }
.theme-option.is-active {
    color: var(--accent-contrast);
    background: var(--accent);
}
.theme-option svg { width: 13px; height: 13px; }
.auth-theme-control { position: absolute; top: 22px; right: 22px; }

.auth-page { display: grid; place-items: center; padding: 24px; }
.auth-main { width: min(100%, 420px); }
.auth-card { padding: 30px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--auth-card-bg); position: relative; }
.auth-brand { margin-bottom: 44px; }
.auth-heading h1 { font-size: 35px; }
.auth-heading > p:last-child { margin: 13px 0 0; color: var(--muted); font-size: 13px; }
.stack-form { margin-top: 28px; display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > span { color: var(--muted); font-size: 11px; font-weight: 650; }
.field input, .field select, .admin-search input, .compact-select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    outline: 0;
    color: var(--text);
    background: var(--field-bg);
    font: inherit;
    font-size: 13px;
}
.field input:focus, .field select:focus, .admin-search input:focus, .compact-select:focus { border-color: rgba(213,255,95,.7); box-shadow: 0 0 0 3px rgba(213,255,95,.06); }
.form-error { margin: 0; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--danger); background: var(--surface-2); font-size: 11px; line-height: 1.45; font-weight: 650; }
.field-hint { margin: -2px 0 0; color: var(--faint); font-size: 10px; line-height: 1.5; }

.primary-button, .secondary-button, .danger-button, .danger-link {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
}
.primary-button { border: 1px solid var(--accent); color: var(--accent-contrast); background: var(--accent); }
.primary-button:hover { background: var(--accent-hover); }
.secondary-button { border: 1px solid var(--border-strong); color: var(--muted); background: var(--surface-2); }
.secondary-button:hover { color: var(--text); background: var(--surface-3); }
.danger-button { border: 1px solid #ff7474; color: #180a0a; background: #ff7474; }
.danger-link { border: 1px solid transparent; color: #ff8b8b; background: transparent; }
.danger-link:hover { background: rgba(255,116,116,.08); }
.primary-button:disabled, .secondary-button:disabled, .danger-button:disabled, .danger-link:disabled { opacity: .45; cursor: not-allowed; }
.auth-submit { width: 100%; min-height: 43px; margin-top: 2px; }

/* AI writing assistant */
.ai-page { max-width: 1420px; }
.ai-intro { align-items: center; }
.ai-model-status {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 10px ui-monospace, SFMono-Regular, Consolas, monospace;
}
.ai-model-status .status-dot { flex: 0 0 auto; }
.ai-model-status.is-ready .status-dot { background: var(--accent); }
.ai-model-status.is-error { color: var(--danger); }
.ai-model-status.is-error .status-dot { background: var(--danger); }
.ai-quota-status svg { width: 14px; height: 14px; color: var(--accent); }
.ai-layout {
    margin-top: 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
    gap: 16px;
}
.ai-composer,
.ai-history {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}
.ai-composer { padding: 22px; }
.ai-history { padding: 18px; position: sticky; top: 18px; }
.ai-section-head,
.ai-history-head,
.ai-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ai-section-head h2,
.ai-history-head h2,
.ai-result-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.015em;
}
.ai-mode-switch {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.ai-mode-button {
    min-width: 0;
    min-height: 68px;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    background: var(--surface-2);
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    text-align: left;
    cursor: pointer;
}
.ai-mode-button:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }
.ai-mode-button.is-active { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.ai-mode-button:disabled { opacity: .55; cursor: wait; }
.ai-mode-button > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--faint); }
.ai-mode-button.is-active > svg { color: var(--accent); }
.ai-mode-button span { min-width: 0; display: grid; gap: 5px; }
.ai-mode-button strong { font-size: 11.5px; line-height: 1.25; }
.ai-mode-button small { color: var(--faint); font-size: 9.5px; line-height: 1.35; }
.ai-form { margin-top: 18px; display: grid; gap: 10px; }
.ai-input-field { display: grid; gap: 8px; }
.ai-input-field > span { color: var(--muted); font-size: 11px; font-weight: 650; }
.ai-input-field textarea,
.ai-output {
    width: 100%;
    min-height: 190px;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    outline: 0;
    color: var(--text);
    background: var(--field-bg);
    resize: vertical;
    font: 12.5px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ai-input-field textarea:focus,
.ai-output:focus { border-color: color-mix(in srgb, var(--accent) 72%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.ai-input-field textarea:disabled { opacity: .7; cursor: wait; }
.ai-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ai-character-count { color: var(--faint); font: 9.5px ui-monospace, SFMono-Regular, Consolas, monospace; }
.ai-form-actions,
.ai-result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.ai-submit { min-width: 118px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ai-submit svg,
.ai-result-actions svg,
.ai-history-head button svg { width: 14px; height: 14px; }
.ai-submit.is-loading svg { animation: aiWandPulse 1.1s ease-in-out infinite; }
@keyframes aiWandPulse { 50% { transform: rotate(8deg) scale(1.08); } }
.ai-form-error { margin-top: 2px; }
.ai-catalog-context {
    margin-top: 18px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}
.ai-catalog-context-head { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 9px; }
.ai-catalog-context-head > svg { width: 17px; height: 17px; margin-top: 1px; color: var(--accent); }
.ai-catalog-context-head h3 { margin: 0; font-size: 11px; line-height: 1.3; }
.ai-catalog-context-head p { margin: 4px 0 0; color: var(--faint); font-size: 9.5px; line-height: 1.4; }
.ai-catalog-match-list { margin-top: 10px; display: grid; gap: 5px; }
.ai-catalog-match {
    min-width: 0;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--field-bg);
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}
.ai-catalog-match-label { color: var(--faint); font-size: 8.5px; font-weight: 700; text-transform: uppercase; }
.ai-catalog-match-value { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.ai-catalog-match-value code { color: var(--accent); font-size: 9.5px; white-space: nowrap; }
.ai-catalog-match-value > span { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.ai-catalog-exact { padding: 3px 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--text); font-size: 8px; white-space: nowrap; }
.ai-id-dialog {
    width: min(720px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text);
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
.ai-id-dialog::backdrop { background: rgba(3,5,6,.84); }
.ai-id-dialog-shell { max-height: calc(100dvh - 34px); display: flex; flex-direction: column; }
.ai-id-dialog-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.ai-id-dialog-heading { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 11px; }
.ai-id-dialog-icon { width: 38px; height: 38px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; }
.ai-id-dialog-icon svg { width: 18px; height: 18px; color: var(--accent); }
.ai-id-dialog-heading h2 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.ai-id-dialog-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.ai-id-dialog-body { padding: 18px 20px; overflow-y: auto; overscroll-behavior: contain; }
.ai-id-countdown {
    margin-bottom: 13px;
    padding: 11px 12px 0;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    border-radius: 7px;
    background: color-mix(in srgb, var(--warning) 7%, var(--surface-2));
    overflow: hidden;
}
.ai-id-countdown > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 8px; }
.ai-id-countdown svg { width: 16px; height: 16px; margin-top: 1px; color: var(--warning); }
.ai-id-countdown p { margin: 0 0 10px; display: grid; gap: 3px; }
.ai-id-countdown strong { font-size: 10.5px; }
.ai-id-countdown p span { color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.ai-id-countdown p b { color: var(--text); font: inherit; }
.ai-id-countdown-track { height: 2px; margin-inline: -12px; background: var(--border); display: block; }
.ai-id-countdown-track > span { width: 100%; height: 100%; background: var(--warning); display: block; transform-origin: left center; }
.ai-id-review-list { display: grid; gap: 7px; }
.ai-id-review-item {
    min-width: 0;
    min-height: 56px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--field-bg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.ai-id-review-copy { min-width: 0; display: grid; gap: 5px; }
.ai-id-review-meta { color: var(--faint); display: flex; align-items: center; gap: 7px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; }
.ai-id-review-meta .ai-id-review-separator { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.ai-id-review-value { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.ai-id-review-value code { flex: 0 0 auto; color: var(--accent); font-size: 10.5px; }
.ai-id-review-value strong { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.ai-id-review-actions { display: flex; align-items: center; gap: 5px; }
.ai-id-review-actions button { min-height: 30px; padding-inline: 9px; }
.ai-id-remove { color: var(--danger); }
.ai-id-empty {
    min-height: 82px;
    padding: 18px;
    border: 1px dashed var(--border-strong);
    border-radius: 7px;
    color: var(--muted);
    display: grid;
    place-items: center;
    gap: 5px;
    text-align: center;
}
.ai-id-empty strong { color: var(--text); font-size: 11px; }
.ai-id-empty span { font-size: 9.5px; line-height: 1.4; }
.ai-id-add { width: 100%; margin-top: 9px; border-style: dashed; display: flex; align-items: center; justify-content: center; gap: 7px; }
.ai-id-add svg { width: 14px; height: 14px; }
.ai-id-picker { min-height: 320px; }
.ai-id-picker-head { display: flex; align-items: center; gap: 12px; }
.ai-id-picker-head .compact-button { min-width: 78px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ai-id-picker-head svg { width: 14px; height: 14px; }
.ai-id-picker-head h3 { margin: 2px 0 0; font-size: 15px; }
.ai-id-picker-controls { margin-top: 15px; display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 8px; }
.ai-id-search-box {
    min-width: 0;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--field-bg);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-id-search-box:focus-within { border-color: color-mix(in srgb, var(--accent) 72%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.ai-id-search-box svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.ai-id-search-box input { width: 100%; min-width: 0; height: 36px; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11px; }
.ai-id-search-box input::placeholder { color: var(--faint); }
.ai-id-catalog-filter .compact-select { height: 38px; }
.ai-id-picker-results {
    min-height: 214px;
    max-height: min(390px, 46vh);
    margin-top: 10px;
    display: grid;
    align-content: start;
    gap: 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    contain: layout paint;
    isolation: isolate;
}
.ai-id-picker-item {
    width: 100%;
    min-width: 0;
    min-height: 49px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    background: var(--surface-2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    content-visibility: auto;
    contain-intrinsic-size: auto 49px;
}
.ai-id-picker-item:hover { border-color: var(--border-strong); background: var(--surface-3); }
.ai-id-picker-item-copy { min-width: 0; display: grid; gap: 4px; }
.ai-id-picker-item-copy span { color: var(--faint); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.ai-id-picker-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.ai-id-picker-item code { color: var(--accent); font-size: 9.5px; }
.ai-id-picker-state { min-height: 210px; color: var(--muted); display: grid; place-items: center; gap: 8px; text-align: center; font-size: 10px; }
.ai-id-picker-state .loader { width: 18px; height: 18px; }
.ai-id-dialog-actions { padding: 13px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 7px; }
.ai-id-skip { color: var(--warning); }
.ai-result { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
.ai-output { min-height: 250px; }
.ai-result .field-hint { margin: 0; }
.ai-history-head { padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.ai-history-head .compact-button { width: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; }
.ai-history-list { max-height: calc(100vh - 190px); padding-top: 10px; display: grid; gap: 7px; overflow-y: auto; overscroll-behavior: contain; }
.ai-history-item {
    width: 100%;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    background: var(--surface-2);
    display: grid;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}
.ai-history-item:hover { border-color: var(--border-strong); background: var(--surface-3); }
.ai-history-item.is-failed { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.ai-history-item-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.ai-history-kind { min-width: 0; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; }
.ai-history-kind svg { width: 13px; height: 13px; color: var(--accent); flex: 0 0 auto; }
.ai-history-item time { color: var(--faint); font: 8.5px ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.ai-history-preview { overflow: hidden; color: var(--muted); font-size: 10.5px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* AI operator workspace */
.ai-page { max-width: 1540px; }
.ai-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-history-trigger { min-height: 34px; padding-inline: 10px; display: inline-flex; align-items: center; gap: 7px; }
.ai-history-trigger svg { width: 14px; height: 14px; }
.ai-history-trigger b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; color: var(--text); background: var(--surface-3); display: grid; place-items: center; font: 8.5px ui-monospace, monospace; }
.ai-workspace {
    margin-top: 24px;
    display: grid;
    grid-template-columns: minmax(330px, 2fr) minmax(500px, 3fr);
    align-items: stretch;
    gap: 14px;
}
.ai-workspace .ai-composer,
.ai-workspace .ai-result {
    min-width: 0;
    min-height: 560px;
    height: clamp(560px, calc(100dvh - 150px), 820px);
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}
.ai-workspace .ai-composer { display: flex; flex-direction: column; }
.ai-workspace .ai-result { margin: 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.ai-workspace .ai-section-head { align-items: center; }
.ai-mode-switch { margin: 0; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); display: inline-flex; grid-template-columns: none; gap: 2px; }
.ai-mode-button {
    min-width: auto;
    min-height: 29px;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    color: var(--muted);
    background: transparent;
    display: block;
    text-align: center;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}
.ai-mode-button:hover { color: var(--text); border-color: transparent; background: var(--surface-3); }
.ai-mode-button.is-active { color: var(--accent-contrast); border-color: transparent; background: var(--accent); }
.ai-mode-button:disabled { opacity: .5; }
.ai-workspace .ai-form { flex: 1 1 auto; margin-top: 17px; display: flex; flex-direction: column; }
.ai-workspace .ai-input-field { min-height: 0; flex: 1 1 auto; grid-template-rows: auto minmax(0, 1fr) auto; }
.ai-workspace .ai-input-field textarea { min-height: 260px; height: auto; max-height: none; }
.ai-submit { min-width: 156px; }
.ai-submit kbd,
.ai-copy-new kbd,
.ai-result-empty kbd {
    padding: 3px 5px;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 4px;
    color: currentColor;
    background: color-mix(in srgb, currentColor 8%, transparent);
    font: 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: nowrap;
}
.ai-submit kbd { margin-left: 2px; opacity: .68; }
.ai-catalog-context {
    min-height: 34px;
    margin-top: 12px;
    padding: 7px 9px;
    border-radius: 6px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
.ai-catalog-context h3 { margin: 0; color: var(--faint); font-size: 8.5px; text-transform: uppercase; }
.ai-catalog-match-list { min-width: 0; margin: 0; }
.ai-catalog-match {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 9.5px;
}
.ai-catalog-match-label { color: var(--muted); font-size: inherit; font-weight: 650; text-transform: none; }
.ai-catalog-match code { color: var(--accent); font-size: inherit; white-space: nowrap; }
.ai-catalog-match-separator { color: var(--faint); }
.ai-catalog-match-name { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.ai-catalog-match-confirmed { margin-left: auto; color: var(--accent); font-weight: 800; }
.ai-catalog-details summary { color: var(--muted); cursor: pointer; font-size: 9.5px; font-weight: 650; }
.ai-catalog-details-list { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.ai-result-head { padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.ai-result-state { padding: 4px 7px; border: 1px solid var(--border); border-radius: 4px; color: var(--faint); font: 8.5px ui-monospace, monospace; }
.ai-result-state.is-ready { color: var(--accent); }
.ai-result-state.is-loading { color: var(--warning); }
.ai-result-empty {
    flex: 1 1 auto;
    min-height: 410px;
    padding: 30px;
    color: var(--muted);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    text-align: center;
}
.ai-result-empty > svg { width: 26px; height: 26px; color: var(--faint); }
.ai-result-empty.is-loading > svg { color: var(--warning); animation: aiWandPulse 1.1s ease-in-out infinite; }
.ai-result-empty strong { color: var(--text); font-size: 12px; }
.ai-result-empty p { margin: 0; color: var(--faint); font-size: 10px; }
.ai-workspace .ai-output { flex: 1 1 0; min-height: 260px; height: auto; max-height: none; resize: vertical; }
.ai-workspace .ai-result .field-hint { margin: 0; }
.ai-clarification {
    min-height: 270px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ai-clarification[hidden] { display: none; }
.ai-clarification-head { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; }
.ai-clarification-icon { width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: 8px; background: var(--surface); display: grid; place-items: center; }
.ai-clarification-icon svg { width: 18px; height: 18px; color: var(--accent); }
.ai-clarification-head .context-label { margin: 0 0 3px; }
.ai-clarification-head h3 { margin: 0; font-size: 14px; line-height: 1.35; }
.ai-clarification-question { margin: 0; padding: 14px; border-left: 3px solid var(--accent); border-radius: 0 7px 7px 0; color: var(--text); background: var(--field-bg); font-size: 12px; line-height: 1.6; }
.ai-clarification-form { margin-top: auto; display: grid; gap: 7px; }
.ai-clarification-form > label { color: var(--muted); font-size: 10px; font-weight: 700; }
.ai-clarification-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.ai-clarification-control input { min-width: 0; min-height: 40px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 7px; outline: 0; color: var(--text); background: var(--field-bg); font-size: 11.5px; }
.ai-clarification-control input:focus { border-color: color-mix(in srgb, var(--accent) 72%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.ai-clarification-control input:disabled { opacity: .65; cursor: wait; }
.ai-clarification-control button { min-width: 125px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ai-clarification-control button svg { width: 14px; height: 14px; }
.ai-clarification-meta { min-height: 17px; display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.ai-clarification-meta .form-error { margin: 0; }
.ai-clarification-meta > span { margin-left: auto; color: var(--faint); font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.ai-workspace .ai-result-actions { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.ai-workspace .ai-result-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ai-workspace .ai-result-actions svg { width: 14px; height: 14px; }
.ai-copy-new { min-width: 202px; }
.ai-copy-new kbd { margin-left: 3px; opacity: .68; }

.ai-edit-note {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    border-radius: 7px;
    color: var(--muted);
    background: color-mix(in srgb, var(--accent) 4%, var(--surface-2));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}
.ai-edit-note[hidden] { display: none; }
.ai-edit-note svg { width: 15px; height: 15px; color: var(--accent); }
.ai-edit-note p { margin: 0; font-size: 10px; line-height: 1.45; }
.ai-edit-note strong { color: var(--text); }
.ai-feedback {
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    display: grid;
    gap: 10px;
}
.ai-feedback[hidden], .ai-feedback-details[hidden] { display: none; }
.ai-feedback-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.ai-feedback-head .context-label { margin: 0 0 3px; }
.ai-feedback-head h3 { margin: 0; font-size: 11.5px; }
.ai-feedback-status { color: var(--accent); font: 8.5px ui-monospace, monospace; white-space: nowrap; }
.ai-feedback-rating { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ai-feedback-rating button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ai-feedback-rating button svg { width: 14px; height: 14px; }
.ai-feedback-rating button.is-selected { border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); color: var(--accent); background: var(--accent-soft); }
.ai-feedback-details { display: grid; gap: 10px; }
.ai-feedback-details fieldset { margin: 0; padding: 0; border: 0; }
.ai-feedback-details legend { margin-bottom: 7px; color: var(--muted); font-size: 9.5px; }
.ai-feedback-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-feedback-reasons label { cursor: pointer; position: relative; }
.ai-feedback-reasons input { width: 1px; height: 1px; opacity: 0; position: absolute; }
.ai-feedback-reasons span {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--muted);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    font-size: 9px;
}
.ai-feedback-reasons input:checked + span { border-color: color-mix(in srgb, var(--warning) 62%, var(--border)); color: var(--text); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.ai-feedback-reasons input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-feedback-comment { display: grid; gap: 6px; }
.ai-feedback-comment > span { color: var(--muted); font-size: 9.5px; font-weight: 700; }
.ai-feedback-comment small { color: var(--faint); font-weight: 400; }
.ai-feedback-comment textarea { min-height: 68px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 7px; outline: 0; color: var(--text); background: var(--field-bg); resize: vertical; font-size: 10.5px; line-height: 1.5; }
.ai-feedback-comment textarea:focus { border-color: color-mix(in srgb, var(--accent) 72%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.ai-feedback-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-feedback-form-footer > span { color: var(--faint); font: 8.5px ui-monospace, monospace; }
.ai-feedback-form-footer button { min-height: 32px; }
.ai-feedback .form-error { margin: 0; }
.ai-workspace .ai-result:has(.ai-feedback-details:not([hidden])) { overflow-y: auto; }

.ai-history-backdrop {
    border: 0;
    background: rgba(3,5,6,.62);
    position: fixed;
    inset: 0;
    z-index: 89;
    cursor: default;
}
.ai-history-drawer {
    width: min(390px, calc(100% - 26px));
    padding: 0;
    border-left: 1px solid var(--border-strong);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 90;
    transform: translateX(102%);
    transition: transform .2s cubic-bezier(.2,.8,.2,1);
    box-shadow: -18px 0 45px rgba(0,0,0,.28);
}
.ai-history-open { overflow: hidden; }
.ai-history-open .ai-history-drawer { transform: translateX(0); }
.ai-history-drawer .ai-history-head { min-height: 74px; padding: 16px; }
.ai-history-drawer .ai-history-head h2 { margin: 2px 0 0; font-size: 18px; }
.ai-history-head-actions { display: flex; align-items: center; gap: 6px; }
.ai-history-head-actions .compact-button,
.ai-history-head-actions .dialog-close { width: 32px; min-height: 32px; padding: 0; display: grid; place-items: center; }
.ai-history-head-actions svg { width: 14px; height: 14px; }
.ai-history-drawer .ai-history-list { max-height: none; padding: 12px 14px 18px; flex: 1 1 auto; overflow-y: auto; }

.admin-page { padding-top: 46px; }
.admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.admin-lead { margin-top: 15px; }
.admin-panel { margin-top: 38px; }
.admin-toolbar { margin-bottom: 15px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.admin-toolbar h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.admin-toolbar h2 span { color: var(--faint); font-size: 13px; }
.admin-search { width: min(100%, 280px); }
.admin-search input { min-height: 38px; }
.admin-table { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.admin-table-head, .admin-user-row { display: grid; grid-template-columns: minmax(155px,1fr) 108px 112px minmax(210px,1.2fr) 105px minmax(330px,auto); gap: 12px; align-items: center; }
.admin-table-head { min-height: 35px; padding: 0 14px; border-bottom: 1px solid var(--border); color: var(--faint); background: var(--surface-2); font: 9px ui-monospace, monospace; text-transform: uppercase; }
.admin-user-row { min-height: 68px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.admin-user-row:last-child { border-bottom: 0; }
.admin-user-row.is-blocked { background: rgba(255,116,116,.025); }
.admin-identity { min-width: 0; }
.admin-identity strong, .admin-identity code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-identity strong { font-size: 12px; }
.admin-identity code { margin-top: 4px; color: var(--faint); font-size: 8.5px; }
.compact-select { min-height: 34px; padding-inline: 8px; font-size: 10px; }
.admin-access-cell, .admin-ai-cell { display: grid; gap: 6px; }
.access-select { min-height: 30px; }
.access-badge {
    width: max-content;
    min-height: 24px;
    padding: 4px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 750;
}
.access-badge svg { width: 13px; height: 13px; }
.access-badge.is-admin { color: var(--text); background: var(--surface-2); }
.access-badge.is-admin svg { color: var(--accent); }
.access-badge.is-user { color: var(--faint); background: var(--surface-2); }
.catalog-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.catalog-field legend { margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 650; }
.catalog-permissions { min-width: 0; display: grid; gap: 8px; }
.catalog-permission-toolbar { min-width: 0; display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; align-items: center; gap: 7px; }
.catalog-permission-search-box {
    min-width: 0;
    min-height: 35px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--field-bg);
    display: flex;
    align-items: center;
    gap: 7px;
}
.catalog-permission-search-box:focus-within { border-color: var(--border-strong); }
.catalog-permission-search-box svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--muted); }
.catalog-permission-search { width: 100%; min-width: 0; min-height: 33px; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 10px; }
.catalog-permission-search::placeholder { color: var(--faint); }
.catalog-permission-search::-webkit-search-cancel-button { display: none; }
.catalog-permission-selection { min-width: 58px; color: var(--muted); text-align: center; white-space: nowrap; font: 9px ui-monospace, monospace; }
.catalog-permission-actions { display: flex; gap: 5px; }
.catalog-permission-list {
    max-height: 220px;
    padding-right: 3px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--border-strong) transparent;
}
.catalog-permission { min-width: 0; min-height: 43px; padding: 6px 8px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: var(--surface-2); font-size: 9px; font-weight: 650; cursor: pointer; }
.catalog-permission.is-selected { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }
.catalog-permission svg { width: 13px; height: 13px; color: var(--muted); }
.catalog-permission.is-selected svg { color: var(--accent); }
.catalog-permission input { width: 13px; height: 13px; accent-color: var(--accent); }
.catalog-permission-copy { min-width: 0; display: grid; gap: 2px; }
.catalog-permission-copy strong, .catalog-permission-copy code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-permission-copy strong { font-size: 9.5px; }
.catalog-permission-copy code { color: var(--faint); font-size: 8px; font-weight: 500; }
.catalog-permission-empty { margin: 0; padding: 16px; border: 1px dashed var(--border); border-radius: 6px; color: var(--faint); text-align: center; font-size: 10px; }
.catalog-cell { min-width: 0; display: grid; gap: 7px; }
.catalog-count { width: max-content; color: var(--muted); font: 9px ui-monospace, monospace; }
.catalog-chip-list { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.catalog-chip {
    min-height: 24px;
    max-width: 145px;
    padding: 4px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    background: var(--surface-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8.5px;
    font-weight: 700;
}
.catalog-chip svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--accent); }
.catalog-chip.is-empty { color: var(--faint); border-color: var(--border); background: var(--surface-2); }
.catalog-chip.is-empty svg { color: var(--faint); }
.catalog-chip.is-more { min-width: 34px; justify-content: center; color: var(--muted); }
.status-badge { width: max-content; padding: 5px 7px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 9px; font-weight: 650; }
.status-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.status-badge.is-blocked::before { background: var(--danger); }
.admin-row-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.compact-button { min-height: 31px; padding-inline: 8px; font-size: 9px; }
.pagination { margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 13px; }
.pagination span { min-width: 55px; color: var(--muted); text-align: center; font: 10px ui-monospace, monospace; }

.admin-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); background: var(--surface); overflow-y: auto; box-shadow: 0 8px 22px rgba(0,0,0,.36); }
.permissions-dialog, .history-dialog { width: min(620px, calc(100% - 32px)); }
.admin-dialog::backdrop { background: rgba(3,5,6,.78); }
.dialog-form { display: block; }
.dialog-fields { padding: 20px; display: grid; gap: 15px; }
.dialog-actions { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.admin-dialog .dialog-head code { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.admin-dialog .dialog-close { border: 0; cursor: pointer; }
.dialog-copy { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.dialog-copy strong { color: var(--text); }
.danger-text { color: #ff8b8b; }
.permission-summary { padding: 10px 11px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); background: var(--surface-2); font-size: 11px; line-height: 1.45; }
.permission-editor .catalog-permission-list { max-height: min(360px, 44vh); }
.audit-list { display: grid; gap: 9px; }
.audit-item { padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.audit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.audit-head strong { font-size: 12px; }
.audit-head time { color: var(--faint); font: 9px ui-monospace, monospace; white-space: nowrap; }
.audit-actor { margin: 7px 0 0; color: var(--muted); font-size: 10.5px; }
.audit-details { margin: 8px 0 0; padding: 0; display: grid; gap: 5px; list-style: none; }
.audit-details li { padding-left: 10px; border-left: 2px solid var(--accent); color: var(--text); font-size: 11px; line-height: 1.4; }
.access-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.access-summary-item { padding: 10px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.access-summary-item span { display: block; color: var(--faint); font: 8.5px ui-monospace, monospace; text-transform: uppercase; }
.access-summary-item strong { display: block; margin-top: 5px; color: var(--text); font: 15px ui-monospace, monospace; }
.access-list { max-height: min(520px, 58vh); padding-right: 3px; display: grid; gap: 7px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--border-strong) transparent; }
.access-item { min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; }
.access-event-icon { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); background: var(--surface); display: grid; place-items: center; }
.access-item.is-login .access-event-icon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); }
.access-event-icon svg { width: 14px; height: 14px; }
.access-event-body { min-width: 0; }
.access-event-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.access-event-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.access-event-head time { color: var(--faint); font: 9px ui-monospace, monospace; white-space: nowrap; }
.access-client { margin: 6px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.access-address { display: block; width: max-content; max-width: 100%; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; color: var(--faint); font-size: 9px; }
.compact-empty { min-height: 120px; padding: 22px; }

/* AI administration */
.ai-admin-page { max-width: 1540px; }
.ai-admin-heading-actions { display: flex; align-items: end; gap: 8px; }
.ai-admin-heading-actions .secondary-button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; }
.ai-admin-heading-actions svg { width: 14px; height: 14px; }
.ai-admin-period { min-width: 150px; }
.ai-admin-overview { margin-top: 34px; }
.ai-admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.ai-admin-metrics > .loading-state, .ai-admin-metrics > .error-state { grid-column: 1 / -1; }
.ai-admin-metric { min-height: 112px; padding: 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); display: flex; flex-direction: column; }
.ai-admin-metric > span { color: var(--muted); font-size: 9.5px; font-weight: 700; }
.ai-admin-metric > strong { margin-top: auto; color: var(--text); font: 22px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ai-admin-metric > small { margin-top: 6px; color: var(--faint); font-size: 8.5px; line-height: 1.35; }
.ai-admin-metric.is-positive { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.ai-admin-metric.is-positive > strong { color: var(--accent); }
.ai-admin-metric.is-warning { border-color: color-mix(in srgb, var(--warning) 36%, var(--border)); }
.ai-admin-metric.is-warning > strong { color: var(--warning); }
.ai-admin-metric.is-danger { border-color: rgba(255,116,116,.35); }
.ai-admin-metric.is-danger > strong { color: var(--danger); }
.ai-admin-trend { margin-top: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.ai-admin-trend:empty { display: none; }
.ai-admin-trend-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ai-admin-trend-title strong { font-size: 11px; }
.ai-admin-trend-title span { color: var(--faint); font-size: 8.5px; }
.ai-admin-trend-list { margin-top: 11px; display: grid; gap: 7px; }
.ai-admin-trend-row { display: grid; grid-template-columns: 58px minmax(80px, 1fr) 35px 90px 75px; align-items: center; gap: 9px; color: var(--muted); font-size: 9px; }
.ai-admin-trend-row time { color: var(--faint); font: 8.5px ui-monospace, monospace; }
.ai-admin-trend-row strong { color: var(--text); text-align: right; }
.ai-admin-trend-row > span:not(.ai-admin-trend-bar) { text-align: right; }
.ai-admin-trend-bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.ai-admin-trend-bar > span { height: 100%; border-radius: inherit; background: var(--accent); display: block; }
.ai-admin-toolbar { align-items: end; }
.ai-admin-user-toolbar-actions { display: flex; align-items: end; justify-content: flex-end; gap: 8px; }
.ai-admin-hidden-toggle { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ai-admin-hidden-toggle svg { width: 14px; height: 14px; }
.ai-admin-hidden-toggle b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); background: var(--surface-3); font: 8px ui-monospace, monospace; }
.ai-admin-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.ai-admin-filters label { min-width: 125px; display: grid; gap: 5px; }
.ai-admin-filters label > span, .admin-search > span { color: var(--faint); font-size: 8.5px; font-weight: 700; }
.ai-admin-filters select { min-height: 38px; padding: 0 28px 0 9px; border: 1px solid var(--border-strong); border-radius: 6px; outline: 0; color: var(--text); background: var(--field-bg); font-size: 9.5px; }
.ai-admin-user-list, .ai-admin-request-list { display: grid; gap: 9px; }
.ai-admin-user-card, .ai-admin-request-card { padding: 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.ai-admin-user-card.is-blocked { border-color: rgba(255,116,116,.25); background: rgba(255,116,116,.02); }
.ai-admin-user-card.is-hidden-access { border-style: dashed; }
.ai-admin-user-head, .ai-admin-request-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.ai-admin-user-identity strong, .ai-admin-request-head strong { display: block; font-size: 12px; }
.ai-admin-user-identity code, .ai-admin-request-head code { margin-top: 4px; color: var(--faint); display: block; font-size: 8px; }
.ai-admin-user-badges, .ai-admin-request-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.ai-admin-user-badges span, .ai-admin-request-badge { min-height: 22px; padding: 0 7px; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); background: var(--surface-2); display: inline-flex; align-items: center; font-size: 8px; font-weight: 700; }
.ai-admin-user-badges .is-positive, .ai-admin-request-badge.is-good { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.ai-admin-user-badges .is-accent { color: var(--warning); }
.ai-admin-user-badges .is-danger, .ai-admin-request-badge.is-failed { color: var(--danger); }
.ai-admin-request-badge.is-completed { color: var(--accent); }
.ai-admin-request-badge.is-processing { color: var(--warning); }
.ai-admin-request-badge.is-needs-edits { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.ai-admin-user-stats { margin-top: 13px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.ai-admin-user-stat { padding: 9px; border-radius: 6px; background: var(--surface-2); display: grid; gap: 4px; }
.ai-admin-user-stat span { color: var(--faint); font-size: 8px; }
.ai-admin-user-stat strong { font: 10px ui-monospace, monospace; }
.ai-admin-user-settings { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 18px; }
.ai-admin-user-settings-fields { display: flex; align-items: end; gap: 10px; }
.ai-admin-toggle { min-height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; }
.ai-admin-toggle input { accent-color: var(--accent); }
.ai-admin-limit { display: grid; gap: 5px; }
.ai-admin-limit > span { color: var(--faint); font-size: 8.5px; font-weight: 700; }
.ai-admin-limit input { width: 100%; min-height: 38px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 6px; outline: 0; color: var(--text); background: var(--field-bg); }
.ai-admin-user-actions { margin-left: auto; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.ai-admin-user-actions button { min-height: 38px; white-space: nowrap; }
.ai-admin-request-head time { margin-top: 4px; color: var(--faint); display: block; font: 8.5px ui-monospace, monospace; }
.ai-admin-request-texts { margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ai-admin-text-block { min-width: 0; padding: 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.ai-admin-text-block.is-best { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 3%, var(--surface-2)); }
.ai-admin-text-block h4 { margin: 0 0 8px; color: var(--faint); font-size: 8px; text-transform: uppercase; }
.ai-admin-text-block pre { max-height: 260px; margin: 0; overflow: auto; color: var(--text); font: 10px/1.55 system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-admin-feedback { grid-column: 1 / -1; padding: 11px; border-left: 3px solid var(--border-strong); border-radius: 0 7px 7px 0; background: var(--surface-2); }
.ai-admin-feedback.is-good { border-left-color: var(--accent); }
.ai-admin-feedback.is-needs_edits { border-left-color: var(--warning); }
.ai-admin-feedback strong { font-size: 10px; }
.ai-admin-feedback p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }
.ai-admin-feedback blockquote { margin: 8px 0 0; color: var(--text); font-size: 10px; line-height: 1.5; }
.ai-admin-request-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.ai-admin-request-meta span { padding: 4px 6px; border-radius: 4px; color: var(--faint); background: var(--surface-2); font: 8px ui-monospace, monospace; }
.ai-admin-request-meta .is-catalog { color: var(--accent); }

/* Vehicle photo administration */
.photo-progress {
    min-width: 132px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    text-align: right;
}
.photo-progress strong { display: block; color: var(--accent); font: 18px ui-monospace, monospace; }
.photo-progress span { color: var(--muted); font-size: 10px; }
.photo-admin-toolbar { align-items: end; }
.photo-admin-controls { display: flex; align-items: end; gap: 10px; }
.photo-filters { display: flex; gap: 7px; }
.photo-admin-table {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}
.photo-table-head, .photo-row {
    display: grid;
    grid-template-columns: 96px minmax(180px, 1fr) 110px minmax(230px, auto);
    gap: 14px;
    align-items: center;
}
.photo-table-head {
    min-height: 35px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    color: var(--faint);
    background: var(--surface-2);
    font: 9px ui-monospace, monospace;
    text-transform: uppercase;
}
.photo-row {
    min-height: 78px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.photo-row:last-child { border-bottom: 0; }
.photo-row.is-selected { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.photo-row.is-busy { opacity: .72; }
.photo-preview {
    width: 82px;
    height: 54px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--field-bg);
    display: grid;
    place-items: center;
    overflow: hidden;
}
button.photo-preview {
    padding: 0;
    color: inherit;
    cursor: zoom-in;
}
button.photo-preview:hover { border-color: var(--border-strong); background: var(--surface-3); }
.photo-preview img { width: 100%; height: 100%; object-fit: contain; }
.photo-preview span { color: var(--faint); font-size: 10px; }
.photo-row-actions { flex-wrap: wrap; }
.camera-dialog { width: min(860px, calc(100% - 32px)); }
.camera-body { padding: 18px 20px 20px; display: grid; gap: 12px; }
#cameraVideo, #cameraPreview {
    width: 100%;
    max-height: 62vh;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--field-bg);
    object-fit: contain;
}
.photo-editor-dialog { width: min(1080px, calc(100% - 32px)); }
.photo-editor-body { padding: 18px 20px 20px; display: grid; gap: 12px; }
.photo-editor-stage {
    min-height: 360px;
    max-height: 68vh;
    border: 1px solid var(--border);
    border-radius: 9px;
    background:
        linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 75%) 0 0 / 24px 24px,
        linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 75%) 12px 12px / 24px 24px,
        var(--field-bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    touch-action: none;
}
.photo-editor-canvas-wrap {
    margin: 16px;
    position: relative;
    flex: 0 0 auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
#photoEditorCanvas,
#photoEditorOverlay {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
    image-rendering: auto;
}
#photoEditorOverlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.photo-editor-tools {
    display: grid;
    grid-template-columns: repeat(6, auto) minmax(220px, 1fr);
    align-items: center;
    gap: 10px;
}
.photo-tool-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.photo-brush-control {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}
.photo-brush-control input { width: 100%; accent-color: var(--accent); }
.photo-editor-tools .field-hint { margin: 0; }

@media (max-width: 980px) {
    .admin-table-head { display: none; }
    .admin-table { border: 0; background: transparent; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; }
    .admin-user-row { min-height: 0; padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); grid-template-columns: 1fr auto; gap: 12px; }
    .admin-identity { grid-column: 1; }
    .admin-access-cell { grid-column: 2; grid-row: 1; width: 120px; }
    .admin-ai-cell { grid-column: 2; grid-row: 2; width: 120px; }
    .catalog-cell { grid-column: 1 / -1; grid-row: 3; }
    .status-badge { grid-column: 1; grid-row: 4; }
    .admin-row-actions { grid-column: 1 / -1; grid-row: 5; justify-content: flex-start; padding-top: 10px; border-top: 1px solid var(--border); }
    .admin-table > .empty-state, .admin-table > .error-state, .admin-table > .loading-state { grid-column: 1 / -1; }
    .photo-table-head { display: none; }
    .photo-admin-table { border: 0; background: transparent; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; }
    .photo-row { min-height: 0; padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); grid-template-columns: 92px minmax(0,1fr); gap: 12px; }
    .photo-preview { grid-column: 1; grid-row: 1 / 3; }
    .photo-row .admin-identity { grid-column: 2; grid-row: 1; }
    .photo-row .status-badge { grid-column: 2; grid-row: 2; }
    .photo-row-actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; padding-top: 10px; border-top: 1px solid var(--border); }
    .photo-admin-table > .empty-state, .photo-admin-table > .error-state, .photo-admin-table > .loading-state { grid-column: 1 / -1; }
    .photo-editor-tools { grid-template-columns: 1fr auto; }
    .photo-tool-group { flex-wrap: wrap; }
    .photo-editor-tools .field-hint { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .topbar-actions { gap: 8px; }
    .account-controls { gap: 8px; padding-left: 8px; }
    .source-status { display: none; }
    .account-name { max-width: 90px; }
    .topbar-link { font-size: 10px; }
    .admin-heading, .admin-toolbar { align-items: stretch; flex-direction: column; }
    .admin-heading .primary-button { width: 100%; }
    .admin-search { width: 100%; }
    .photo-progress { width: 100%; text-align: left; }
    .photo-admin-controls { align-items: stretch; flex-direction: column; }
    .photo-filters { overflow-x: auto; }
    .admin-table { grid-template-columns: 1fr; }
    .admin-user-row { grid-column: 1; }
    .catalog-permission-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
    .catalog-permission-search-box { grid-column: 1 / -1; }
    .catalog-permission-selection { text-align: left; }
    .photo-admin-table { grid-template-columns: 1fr; }
    .photo-row { grid-column: 1; }
    .photo-editor-body { padding-inline: 16px; }
    .photo-editor-stage { min-height: 260px; }
    .photo-editor-tools { grid-template-columns: 1fr; }
    .photo-editor-canvas-wrap { margin: 10px; }
}

/* Control center */
.control-shell {
    --control-sidebar-width: var(--sidebar-expanded-width);
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--control-sidebar-width) minmax(0, 1fr);
    background: var(--bg);
}
.control-shell[hidden], .control-shell [hidden] { display: none !important; }
.control-sidebar {
    width: var(--control-sidebar-width);
    height: 100dvh;
    position: sticky;
    top: 0;
    z-index: 80;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0 12px 14px;
    border-right: 1px solid var(--border);
    background: var(--topbar-bg);
    transition: width .2s cubic-bezier(.2, .8, .2, 1), transform .2s cubic-bezier(.2, .8, .2, 1);
}
.control-sidebar-head { min-width: 0; min-height: 64px; padding: 0 4px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.control-brand { min-width: 0; display: flex; align-items: center; gap: 11px; flex: 1 1 auto; overflow: hidden; color: var(--text); text-decoration: none; }
.control-brand .brand-mark { width: 22px; height: 22px; flex: 0 0 auto; }
.control-brand > .control-nav-label { font-size: 14px; font-weight: 680; }
.control-sidebar-toggle, .control-mobile-bar button {
    width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; color: var(--muted); background: transparent; cursor: pointer;
}
.control-sidebar-toggle:hover, .control-mobile-bar button:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.control-sidebar-toggle svg, .control-mobile-bar svg { width: 17px; height: 17px; }
.control-nav { min-height: 0; padding: 16px 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: thin; }
.control-nav-group { margin: 18px 12px 7px; color: var(--faint); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.control-nav-group:first-child { margin-top: 2px; }
.control-nav-item { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; display: flex; align-items: center; gap: 12px; position: relative; color: var(--muted); background: transparent; text-decoration: none; font-size: 12px; font-weight: 650; }
.control-nav-item > svg:first-child { width: 18px; height: 18px; flex: 0 0 auto; }
.control-nav-item:hover { border-color: var(--border); color: var(--text); background: var(--surface-2); }
.control-nav-item.is-active { border-color: var(--border-strong); color: var(--text); background: var(--surface-3); }
.control-nav-item.is-active::before { content: ""; width: 3px; height: 18px; border-radius: 3px; background: var(--accent); position: absolute; left: -1px; }
.control-nav-item.is-active > svg:first-child { color: var(--accent); }
.control-nav-external { width: 12px; height: 12px; margin-left: auto; color: var(--faint); }
.control-sidebar-footer { min-width: 0; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.control-account { min-width: 0; min-height: 34px; padding: 0 9px; display: flex; align-items: center; gap: 10px; }
.control-role-dot, .control-role-color { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #77818d; box-shadow: 0 0 0 3px color-mix(in srgb, #77818d 15%, transparent); }
[data-role-color="lime"] { background: #b8ff42; box-shadow: 0 0 0 3px rgba(184,255,66,.13); }
[data-role-color="blue"] { background: #4ba7ff; box-shadow: 0 0 0 3px rgba(75,167,255,.14); }
[data-role-color="violet"] { background: #a879ff; box-shadow: 0 0 0 3px rgba(168,121,255,.14); }
[data-role-color="amber"] { background: #ffb844; box-shadow: 0 0 0 3px rgba(255,184,68,.14); }
[data-role-color="red"] { background: #ff626d; box-shadow: 0 0 0 3px rgba(255,98,109,.14); }
.control-account-copy { min-width: 0; display: grid; line-height: 1.25; }
.control-account-copy strong, .control-account-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-account-copy strong { font-size: 11px; }
.control-account-copy span { color: var(--faint); font-size: 9px; }
.control-sidebar-actions { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.control-sidebar-footer .theme-control { width: auto; justify-content: flex-start; }
.control-logout { min-width: 38px; min-height: 33px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); background: var(--surface); font-size: 10px; cursor: pointer; }
.control-logout:hover { border-color: var(--border-strong); color: var(--text); }
.control-logout:disabled { opacity: .5; cursor: wait; }
.control-logout svg { width: 14px; height: 14px; }
.control-mobile-bar, .control-sidebar-backdrop { display: none; }
.control-main { width: min(1500px, 100%); min-width: 0; margin: 0 auto; padding: 42px clamp(28px, 4vw, 68px) 70px; }
.control-page-head { margin-bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.control-page-head > div { min-width: 0; }
.control-page-head h1 { margin: 3px 0 8px; font-size: clamp(28px, 3.1vw, 44px); line-height: 1.03; letter-spacing: -.045em; }
.control-page-head p:not(.context-label) { max-width: 730px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.control-primary, .control-button, .control-danger {
    min-height: 39px; padding: 0 15px; border: 1px solid var(--border); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--text); background: var(--surface-2); font: inherit; font-size: 11px; font-weight: 760; cursor: pointer;
}
.control-primary { border-color: var(--accent); color: #10130d; background: var(--accent); }
.control-primary:hover { filter: brightness(1.05); }
.control-button:hover { border-color: var(--border-strong); background: var(--surface-3); }
.control-danger { border-color: rgba(255,94,105,.35); color: #ff717b; background: rgba(255,94,105,.07); }
.control-primary svg, .control-button svg, .control-danger svg { width: 15px; height: 15px; }
.control-primary:disabled, .control-button:disabled, .control-danger:disabled { opacity: .5; cursor: wait; }
.control-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 15px; }
.control-summary-card { min-width: 0; min-height: 105px; padding: 17px; border: 1px solid var(--border); border-radius: 11px; display: flex; align-items: flex-start; gap: 13px; background: var(--surface); }
.control-summary-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.control-summary-icon svg { width: 16px; height: 16px; }
.control-summary-card > div { min-width: 0; display: grid; }
.control-summary-card span { color: var(--muted); font-size: 10px; }
.control-summary-card strong { margin-top: 2px; font-size: 25px; line-height: 1.1; }
.control-summary-card small { margin-top: 5px; overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.control-panel { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); overflow: hidden; }
.control-toolbar { min-height: 66px; padding: 13px 15px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.control-search { width: min(390px, 100%); min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; gap: 9px; background: var(--field-bg); }
.control-search:focus-within { border-color: var(--border-strong); }
.control-search svg { width: 15px; height: 15px; color: var(--faint); }
.control-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11px; }
.control-filter-row { display: flex; gap: 8px; }
.control-filter-row select { min-width: 145px; min-height: 38px; padding: 0 30px 0 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--field-bg); font-size: 10px; }
.control-user-table { min-width: 0; }
.control-user-row { min-height: 68px; padding: 11px 14px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(180px, 1.15fr) minmax(130px, .8fr) minmax(220px, 1.25fr) 105px 130px 34px; align-items: center; gap: 15px; }
.control-user-row:last-child { border-bottom: 0; }
.control-user-row:not(.control-user-row-head):hover { background: var(--surface-2); }
.control-user-row.is-blocked { opacity: .72; }
.control-user-row-head { min-height: 37px; padding-block: 8px; color: var(--faint); background: var(--surface-2); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.control-user-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.control-avatar { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; color: var(--text); background: var(--surface-3); font-size: 12px; font-weight: 800; }
.control-user-identity > span:last-child { min-width: 0; display: grid; }
.control-user-identity strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.control-user-identity code { margin-top: 2px; color: var(--faint); font-size: 8px; }
.control-role-cell { min-width: 0; display: flex; align-items: center; gap: 9px; }
.control-role-cell strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.control-access-tags { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.control-access-tag, .control-access-empty { min-height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); background: var(--surface-2); font-size: 8px; font-weight: 700; white-space: nowrap; }
.control-access-tag svg { width: 10px; height: 10px; }
.control-access-tag.is-ai { color: #b795ff; }.control-access-tag.is-admin { color: #75b8ff; }.control-access-tag.is-owner { color: var(--accent); }
.control-status { width: fit-content; padding: 5px 8px; border-radius: 99px; font-size: 8px; font-weight: 760; }
.control-status.is-active { color: #75d9a0; background: rgba(70,198,128,.1); }.control-status.is-blocked { color: #ff7e86; background: rgba(255,94,105,.1); }
.control-created { color: var(--faint); font-size: 9px; line-height: 1.35; }
.control-row-action { width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 7px; display: grid; place-items: center; color: var(--faint); background: transparent; cursor: pointer; }
.control-row-action:hover { border-color: var(--border); color: var(--text); background: var(--surface-3); }
.control-row-action svg { width: 14px; height: 14px; }
.control-pagination { min-height: 54px; padding: 10px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--muted); font-size: 10px; }
.control-pagination button { width: 31px; height: 31px; padding: 0; border: 1px solid var(--border); border-radius: 7px; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); cursor: pointer; }.control-pagination button:disabled { opacity: .35; }.control-pagination svg { width: 13px; }
.control-loading, .control-empty { min-height: 180px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--faint); text-align: center; font-size: 11px; }
.control-empty svg { width: 26px; height: 26px; }.control-empty strong { color: var(--text); }.control-empty p { margin: 0; }.control-empty.is-error { color: #ff7e86; }
.control-dialog { width: min(600px, calc(100% - 24px)); max-height: calc(100dvh - 28px); padding: 0; border: 1px solid var(--border-strong); border-radius: 13px; color: var(--text); background: var(--surface); box-shadow: 0 24px 90px rgba(0,0,0,.5); overflow: hidden; }
.control-dialog::backdrop { background: rgba(5,7,8,.76); backdrop-filter: blur(4px); }
.control-wide-dialog { width: min(800px, calc(100% - 24px)); }
.control-dialog-form { max-height: calc(100dvh - 30px); display: flex; flex-direction: column; }
.control-dialog-form > header { padding: 19px 21px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.control-dialog-form > header h2 { margin: 3px 0 0; font-size: 19px; }.control-dialog-form > header code { color: var(--faint); font-size: 8px; }
.control-dialog-form > header > button { width: 31px; height: 31px; padding: 0; border: 1px solid transparent; border-radius: 7px; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }.control-dialog-form > header > button:hover { border-color: var(--border); background: var(--surface-2); }.control-dialog-form > header svg { width: 15px; }
.control-dialog-body { min-height: 0; padding: 20px 21px; display: grid; gap: 15px; overflow-y: auto; }
.control-dialog-form > footer { padding: 14px 21px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 9px; background: var(--surface-2); }
.control-footer-spacer { flex: 1 1 auto; }
.control-field { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.control-field input, .control-field select, .control-field textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; outline: 0; color: var(--text); background: var(--field-bg); font: inherit; font-size: 11px; resize: vertical; }.control-field input:focus, .control-field select:focus, .control-field textarea:focus { border-color: var(--border-strong); }.control-field small { color: var(--faint); font-size: 9px; font-weight: 500; }
.control-field input[readonly] { color: var(--muted); background: var(--surface-2); cursor: not-allowed; }
.control-switch { padding: 13px; border: 1px solid var(--border); border-radius: 9px; display: flex; align-items: flex-start; gap: 10px; background: var(--surface-2); }.control-switch input { margin-top: 2px; accent-color: var(--accent); }.control-switch span { display: grid; gap: 3px; }.control-switch b { font-size: 10px; }.control-switch small { color: var(--faint); font-size: 9px; }
.control-error { margin: 0; padding: 10px 11px; border: 1px solid rgba(255,94,105,.28); border-radius: 7px; color: #ff7e86; background: rgba(255,94,105,.06); font-size: 10px; }
.control-role-preview { padding: 14px; border: 1px solid var(--border); border-radius: 9px; display: flex; gap: 12px; background: var(--surface-2); }.control-role-preview-mark { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; background: color-mix(in srgb, currentColor 10%, var(--surface-3)); }.control-role-preview-mark svg { width: 16px; }.control-role-preview > div { min-width: 0; }.control-role-preview strong { font-size: 11px; }.control-role-preview p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.control-user-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.control-user-tools button { min-height: 37px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; gap: 7px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }.control-user-tools button:hover { color: var(--text); background: var(--surface-2); }.control-user-tools button.is-danger { color: #ff7e86; }.control-user-tools svg { width: 13px; }
.control-timeline { display: grid; gap: 0; }.control-timeline-item { min-height: 75px; padding-left: 23px; position: relative; }.control-timeline-item::before { content: ''; width: 1px; position: absolute; left: 5px; top: 13px; bottom: -13px; background: var(--border); }.control-timeline-item:last-child::before { display: none; }.control-timeline-dot { width: 11px; height: 11px; position: absolute; left: 0; top: 6px; border: 3px solid var(--surface); border-radius: 50%; background: var(--accent); }.control-timeline-item strong { font-size: 10px; }.control-timeline-item p { margin: 4px 0; color: var(--muted); font-size: 9px; line-height: 1.45; }.control-timeline-item time { color: var(--faint); font-size: 8px; }
.control-activity-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.control-activity-summary > div { padding: 12px; border: 1px solid var(--border); border-radius: 8px; display: grid; background: var(--surface-2); }.control-activity-summary span { color: var(--muted); font-size: 9px; }.control-activity-summary strong { font-size: 19px; }

/* Role matrix */
.control-role-notice { margin-bottom: 15px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 10px; display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }.control-role-notice > svg { width: 19px; color: var(--accent); }.control-role-notice div { display: grid; gap: 2px; }.control-role-notice strong { font-size: 10px; }.control-role-notice span { color: var(--muted); font-size: 9px; }
.control-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.control-role-card { min-width: 0; border: 1px solid var(--border); border-top: 2px solid #77818d; border-radius: 11px; background: var(--surface); overflow: hidden; }.control-role-card[data-role-color="lime"] { border-top-color: #b8ff42; }.control-role-card[data-role-color="blue"] { border-top-color: #4ba7ff; }.control-role-card[data-role-color="violet"] { border-top-color: #a879ff; }.control-role-card[data-role-color="amber"] { border-top-color: #ffb844; }.control-role-card[data-role-color="red"] { border-top-color: #ff626d; }
.control-role-card-head { min-height: 102px; padding: 17px 17px 13px; display: flex; justify-content: space-between; gap: 12px; }.control-role-card-head > div:first-child { min-width: 0; }.control-role-card-head p { margin: 9px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.control-role-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }.control-role-badge { max-width: 100%; overflow: hidden; font-size: 12px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }.control-system-badge { padding: 3px 5px; border-radius: 4px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.control-role-user-count { min-width: 44px; display: grid; align-content: start; justify-items: end; }.control-role-user-count b { font-size: 20px; line-height: 1; }.control-role-user-count span { color: var(--faint); font-size: 8px; }
.control-role-metrics { padding: 11px 17px; border-block: 1px solid var(--border); display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-2); }.control-role-metrics > div { min-width: 0; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: start; column-gap: 6px; }.control-role-metrics svg { width: 12px; height: 12px; grid-row: 1 / 3; align-self: center; color: var(--faint); }.control-role-metrics b { font-size: 11px; }.control-role-metrics span { color: var(--faint); font-size: 7px; }
.control-role-rights { min-height: 85px; padding: 14px 17px; display: flex; align-content: flex-start; flex-wrap: wrap; gap: 5px; }.control-role-rights span { padding: 5px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); background: var(--surface-2); font-size: 8px; }.control-role-rights .is-full { color: var(--accent); }.control-role-rights .is-more { color: #8bbfff; }.control-role-rights .is-muted { color: var(--faint); }
.control-role-card > footer { min-height: 53px; padding: 9px 12px 9px 17px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 9px; }.control-role-card > footer code { min-width: 0; overflow: hidden; color: var(--faint); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.control-role-card > footer .control-button { min-height: 32px; padding-inline: 10px; font-size: 9px; }
.control-role-dialog { width: min(980px, calc(100% - 24px)); }.control-role-editor { padding: 0; gap: 0; }.control-editor-section { padding: 21px; border-bottom: 1px solid var(--border); }.control-editor-section:last-of-type { border-bottom: 0; }.control-editor-heading { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 11px; }.control-editor-heading > span { width: 25px; height: 25px; border: 1px solid var(--border); border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto; color: var(--faint); font: 8px ui-monospace, monospace; background: var(--surface-2); }.control-editor-heading h3 { margin: 0; font-size: 12px; }.control-editor-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.control-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; }.control-field-wide { grid-column: 1 / -1; }
.control-permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.control-permission-group { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 9px; }.control-permission-group legend { padding: 0 5px; color: var(--muted); font-size: 9px; font-weight: 780; }.control-permission-group .control-check-card { border: 0; padding: 8px; background: transparent; }.control-full-access { grid-column: 1 / -1; margin: 0; padding: 11px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); font-size: 9px; }
.control-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.control-check-card { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: flex-start; gap: 9px; background: var(--surface-2); cursor: pointer; }.control-check-card:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); }.control-check-card input { width: 1px; height: 1px; position: absolute; opacity: 0; }.control-check-mark { width: 17px; height: 17px; margin-top: 1px; border: 1px solid var(--border-strong); border-radius: 5px; display: grid; place-items: center; flex: 0 0 auto; color: #10130d; }.control-check-mark svg { width: 11px; opacity: 0; }.control-check-card input:checked + .control-check-mark { border-color: var(--accent); background: var(--accent); }.control-check-card input:checked + .control-check-mark svg { opacity: 1; }.control-check-card input:disabled ~ * { opacity: .55; }.control-check-copy { min-width: 0; display: grid; gap: 3px; }.control-check-copy b { font-size: 9px; }.control-check-copy small { overflow: hidden; color: var(--faint); font-size: 8px; line-height: 1.45; text-overflow: ellipsis; }.control-selector-toolbar { min-height: 36px; margin-bottom: 9px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }.control-selector-toolbar span { margin-right: auto; color: var(--muted); font-size: 9px; }.control-selector-toolbar button { padding: 4px 7px; border: 0; color: var(--muted); background: transparent; font-size: 8px; cursor: pointer; }.control-selector-toolbar button:hover { color: var(--text); }.control-editor-section.is-disabled .control-check-grid { opacity: .45; }.control-empty-inline { grid-column: 1 / -1; margin: 0; padding: 16px; border: 1px dashed var(--border); border-radius: 8px; color: var(--faint); font-size: 9px; text-align: center; }

.control-main.ai-admin-page, .control-main.photo-admin-page { max-width: 1500px; }.control-main .admin-heading { margin-top: 0; }.control-main .admin-panel, .control-main .ai-admin-overview { border-radius: 11px; }

@media (max-width: 1180px) {
    .control-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .control-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .control-user-row { grid-template-columns: minmax(170px, 1.1fr) minmax(120px, .8fr) minmax(180px, 1fr) 95px 32px; }.control-user-row > :nth-child(5) { display: none; }
}
@media (max-width: 860px) {
    .control-shell { display: block; padding-top: 58px; }.control-sidebar { width: min(286px, calc(100vw - 40px)); position: fixed; left: 0; top: 0; transform: translateX(-100%); box-shadow: 16px 0 32px rgba(0,0,0,.28); }.control-sidebar-open .control-sidebar { transform: translateX(0); }.control-sidebar-toggle { display: none; }.control-sidebar-backdrop { width: 100%; height: 100%; padding: 0; border: 0; position: fixed; inset: 0; z-index: 70; background: rgba(3,5,6,.66); }.control-sidebar-open .control-sidebar-backdrop { display: block; }.control-mobile-bar { height: 58px; padding: 0 16px; border-bottom: 1px solid var(--border); position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; gap: 12px; background: var(--topbar-bg); }.control-mobile-bar span { font-size: 11px; font-weight: 760; }.control-main { padding: 28px 18px 55px; }.control-user-row-head { display: none; }.control-user-table { padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.control-user-row { min-width: 0; min-height: 0; padding: 13px; border: 1px solid var(--border); border-radius: 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; background: var(--surface-2); }.control-user-row > * { display: flex !important; }.control-user-identity { grid-column: 1; }.control-role-cell { grid-column: 1; }.control-access-tags { grid-column: 1 / -1; }.control-status { grid-column: 1; }.control-created { display: none !important; }.control-row-action { grid-column: 2; grid-row: 1 / 3; align-self: center; }.control-pagination { padding-inline: 18px; }.control-permission-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 861px) {
    .control-sidebar-collapsed { --control-sidebar-width: var(--sidebar-collapsed-width); }
    .control-sidebar-collapsed .control-nav-label,
    .control-sidebar-collapsed .control-nav-external,
    .control-sidebar-collapsed .control-nav-group { display: none; }
    .control-sidebar-collapsed .control-sidebar-head { justify-content: center; }
    .control-sidebar-collapsed .control-brand { flex: 0 0 auto; }
    .control-sidebar-collapsed .control-sidebar-toggle { position: absolute; top: 76px; }
    .control-sidebar-collapsed .control-sidebar-toggle svg { transform: rotate(180deg); }
    .control-sidebar-collapsed .control-nav { padding-top: 58px; }
    .control-sidebar-collapsed .control-nav-item,
    .control-sidebar-collapsed .control-account { padding-inline: 0; justify-content: center; }
    .control-sidebar-collapsed .control-sidebar-actions { justify-content: center; }
    .control-sidebar-collapsed .control-sidebar-actions .theme-control { display: none; }
    .control-sidebar-collapsed .control-role-dot { width: 11px; height: 11px; }
}
@media (max-width: 660px) {
    .control-page-head { align-items: stretch; flex-direction: column; }.control-page-head .control-primary { width: 100%; }.control-summary, .control-role-grid, .control-user-table { grid-template-columns: minmax(0, 1fr); }.control-toolbar { align-items: stretch; flex-direction: column; }.control-search { width: 100%; }.control-filter-row { display: grid; grid-template-columns: 1fr 1fr; }.control-filter-row select { width: 100%; min-width: 0; }.control-role-notice { align-items: flex-start; }.control-role-notice span { line-height: 1.5; }.control-form-grid, .control-check-grid { grid-template-columns: minmax(0, 1fr); }.control-field-wide { grid-column: 1; }.control-dialog-form > footer { flex-wrap: wrap; }.control-role-delete { order: 3; width: 100%; }.control-user-tools { grid-template-columns: minmax(0, 1fr); }.control-activity-summary { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .auth-page { padding: 16px; }
    .auth-card { padding: 23px 20px; }
    .auth-brand { margin-bottom: 36px; }
    .auth-heading h1 { font-size: 31px; }
    .account-controls .topbar-link { display: none; }
    .topbar-actions .topbar-link, .topbar-actions .account-name { display: none; }
    .catalog-permission-list { grid-template-columns: 1fr; }
    .admin-row-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; }
    .photo-row-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; }
    .compact-button { padding-inline: 5px; }
    .access-summary { grid-template-columns: 1fr; }
    .access-event-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media (max-width: 1040px) {
    .ai-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .ai-workspace { grid-template-columns: minmax(0, 1fr); }
    .ai-workspace .ai-composer,
    .ai-workspace .ai-result { min-height: auto; height: auto; max-height: none; }
    .ai-workspace .ai-input-field textarea { min-height: 300px; height: 340px; }
    .ai-workspace .ai-output { min-height: 420px; height: 460px; }
}

@media (max-width: 900px) {
    .ai-layout { grid-template-columns: minmax(0, 1fr); }
    .ai-history { position: static; }
    .ai-history-list { max-height: 460px; }
}

@media (max-width: 640px) {
    .ai-page { padding-top: 28px; }
    .ai-intro { align-items: flex-start; }
    .ai-intro-actions { width: 100%; justify-content: space-between; }
    .ai-model-status { max-width: 100%; }
    .ai-layout { margin-top: 22px; }
    .ai-workspace { margin-top: 18px; }
    .ai-composer, .ai-history { padding: 15px; border-radius: 8px; }
    .ai-workspace .ai-composer, .ai-workspace .ai-result { padding: 15px; border-radius: 8px; }
    .ai-workspace .ai-section-head { align-items: flex-start; flex-direction: column; }
    .ai-mode-switch { grid-template-columns: minmax(0, 1fr); }
    .ai-form-footer { align-items: stretch; flex-direction: column; }
    .ai-form-actions { width: 100%; }
    .ai-form-actions > button { flex: 1 1 0; }
    .ai-result-head { align-items: flex-start; flex-direction: column; }
    .ai-result-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
    .ai-result-actions > button { width: 100%; }
    .ai-result-empty { min-height: 300px; }
    .ai-workspace .ai-output { min-height: 360px; height: 400px; }
    .ai-clarification { min-height: 310px; padding: 14px; }
    .ai-clarification-control { grid-template-columns: minmax(0, 1fr); }
    .ai-clarification-control button { width: 100%; }
    .ai-submit kbd, .ai-copy-new kbd { display: none; }
    .ai-catalog-context { align-items: start; grid-template-columns: minmax(0, 1fr); }
    .ai-catalog-match { grid-template-columns: minmax(0, 1fr) auto; }
    .ai-catalog-match-label { grid-column: 1 / -1; }
    .ai-id-dialog { width: calc(100% - 18px); max-height: calc(100dvh - 18px); }
    .ai-id-dialog-shell { max-height: calc(100dvh - 20px); }
    .ai-id-dialog-head, .ai-id-dialog-body, .ai-id-dialog-actions { padding-inline: 13px; }
    .ai-id-review-item { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
    .ai-id-review-actions { justify-content: flex-start; }
    .ai-id-picker-controls { grid-template-columns: minmax(0, 1fr); }
    .ai-id-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .ai-id-dialog-actions .primary-button { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 1100px) {
    .ai-admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-admin-toolbar { align-items: stretch; flex-direction: column; }
    .ai-admin-user-toolbar-actions { justify-content: flex-start; }
    .ai-admin-filters { justify-content: flex-start; }
}

@media (max-width: 700px) {
    .ai-admin-heading-actions { width: 100%; align-items: stretch; flex-direction: column; }
    .ai-admin-heading-actions .secondary-button { justify-content: center; }
    .ai-admin-user-toolbar-actions { width: 100%; align-items: stretch; flex-direction: column; }
    .ai-admin-hidden-toggle { justify-content: center; }
    .ai-admin-metrics { grid-template-columns: minmax(0, 1fr); }
    .ai-admin-trend-row { grid-template-columns: 48px minmax(70px, 1fr) 30px; }
    .ai-admin-trend-row > span:nth-last-child(-n+2) { display: none; }
    .ai-admin-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-admin-user-head, .ai-admin-request-head { flex-direction: column; }
    .ai-admin-user-badges, .ai-admin-request-badges { justify-content: flex-start; }
    .ai-admin-user-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-admin-user-settings { align-items: stretch; flex-direction: column; }
    .ai-admin-user-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-admin-user-actions { width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-admin-request-texts { grid-template-columns: minmax(0, 1fr); }
    .ai-admin-text-block.is-best, .ai-admin-feedback { grid-column: 1; }
    .ai-feedback-rating { grid-template-columns: minmax(0, 1fr); }
    .ai-feedback-form-footer { align-items: stretch; flex-direction: column; }
    .ai-feedback-form-footer button { width: 100%; }
}

/* Control center readability and role-editor stability */
.control-shell {
    --muted: #aab3ba;
    --faint: #7f8a93;
}
.control-shell .context-label { font-size: 11px; }
.control-nav-item { font-size: 12px; }
.control-nav-group { font-size: 9px; }
.control-account-copy strong { font-size: 13px; }
.control-account-copy span { font-size: 11px; }
.control-page-head p:not(.context-label) { font-size: 14px; }
.control-primary, .control-button, .control-danger { min-height: 42px; font-size: 12px; }
.control-summary-card span { font-size: 12px; }
.control-summary-card small { font-size: 11px; }
.control-search input, .control-filter-row select { font-size: 13px; }
.control-filter-row label { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.control-user-row-head { font-size: 10px; }
.control-user-identity strong { font-size: 13px; }
.control-user-identity code { font-size: 10px; }
.control-role-cell strong { font-size: 12px; }
.control-access-tag, .control-access-empty, .control-status { font-size: 10px; }
.control-created, .control-pagination { font-size: 11px; }

.control-dialog-form > header h2 { font-size: 22px; }
.control-dialog-form > header code { font-size: 10px; }
.control-field { font-size: 12px; }
.control-field input, .control-field select, .control-field textarea { min-height: 44px; font-size: 14px; line-height: 1.4; }
.control-field textarea { min-height: 76px; }
.control-field small, .control-switch small, .control-role-preview p { font-size: 11px; }
.control-switch b, .control-role-preview strong { font-size: 12px; }
.control-error { font-size: 12px; }
.control-user-tools button { font-size: 11px; }
.control-timeline-item strong { font-size: 12px; }
.control-timeline-item p { font-size: 11px; }
.control-timeline-item time { font-size: 10px; }

.control-role-notice strong { font-size: 12px; }
.control-role-notice span { font-size: 11px; line-height: 1.45; }
.control-role-card-head p { font-size: 11px; }
.control-role-badge { color: var(--text); font-size: 15px; line-height: 1.3; }
.control-system-badge { font-size: 9px; }
.control-role-user-count span { font-size: 10px; }
.control-role-metrics b { font-size: 14px; }
.control-role-metrics span { font-size: 10px; }
.control-role-rights span { font-size: 10px; }
.control-role-card > footer code { font-size: 9px; }
.control-role-card > footer .control-button { min-height: 36px; font-size: 11px; }

.control-role-dialog {
    width: min(1040px, calc(100% - 32px));
    height: min(860px, calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
}
.control-role-dialog .control-dialog-form { height: 100%; max-height: none; }
.control-role-dialog .control-role-editor { min-height: 0; flex: 1 1 auto; display: block; padding: 0; overflow-y: auto; }
.control-role-dialog .control-dialog-form > header,
.control-role-dialog .control-dialog-form > footer { flex: 0 0 auto; }
.control-editor-section { padding: 24px; }
.control-editor-heading { margin-bottom: 18px; }
.control-editor-heading > span { width: 28px; height: 28px; font-size: 10px; }
.control-editor-heading h3 { font-size: 15px; }
.control-editor-heading p { margin-top: 5px; font-size: 12px; line-height: 1.45; }
.control-form-grid { grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; }
.control-permission-groups { gap: 12px; }
.control-permission-group { height: max-content; align-self: start; padding: 12px; }
.control-permission-group legend { font-size: 12px; }
.control-permission-group .control-check-card { padding: 10px; }
.control-full-access { font-size: 12px; }

.control-check-grid { gap: 10px; }
.control-check-card {
    min-height: 58px;
    padding: 12px;
    position: relative;
    gap: 12px;
    border-color: var(--border-strong);
}
.control-check-card input {
    width: 20px;
    height: 20px;
    margin: 0;
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
}
.control-check-mark {
    width: 20px;
    height: 20px;
    margin-top: 0;
    border-radius: 6px;
    position: relative;
}
.control-check-mark::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #11140b;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: translateY(-1px) rotate(45deg);
}
.control-check-card input:checked + .control-check-mark::after { opacity: 1; }
.control-check-card input:focus-visible + .control-check-mark { outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 2px; }
.control-check-card:has(input:disabled) { cursor: not-allowed; }
.control-check-card input:disabled { cursor: not-allowed; }
.control-check-card input:disabled ~ * { opacity: .68; }
.control-check-copy { gap: 5px; }
.control-check-copy b { font-size: 12px; line-height: 1.35; }
.control-check-copy small { overflow: visible; font-size: 10.5px; line-height: 1.45; text-overflow: clip; }
.control-selector-toolbar span { font-size: 11px; }
.control-selector-toolbar button { min-height: 32px; font-size: 10px; }
.control-selector-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.control-editor-section.is-disabled .control-check-grid { opacity: 1; }
.control-editor-section.is-disabled .control-check-card { opacity: .72; }
.control-empty-inline { font-size: 11px; }

.control-owner-summary {
    min-height: 0;
    margin: 24px;
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.control-owner-summary-icon { width: 48px; height: 48px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface-3)); }
.control-owner-summary-icon svg { width: 23px; height: 23px; }
.control-owner-summary h3 { margin: 5px 0 9px; font-size: 20px; }
.control-owner-summary p:not(.context-label) { max-width: 690px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.control-role-dialog.is-owner-view { height: fit-content; min-height: 0; max-height: calc(100dvh - 32px); }
.control-role-dialog.is-owner-view .control-dialog-form { height: fit-content; min-height: 0; max-height: none; }
.control-role-dialog.is-owner-view .control-editor-section { display: none; }
.control-role-dialog.is-owner-view .control-role-editor { min-height: 0; flex: 0 0 auto; overflow: visible; }

@media (max-width: 700px) {
    .control-role-dialog { width: calc(100% - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
    .control-editor-section { padding: 18px; }
    .control-form-grid { grid-template-columns: minmax(0, 1fr); }
    .control-owner-summary { margin: 16px; padding: 20px; flex-direction: column; }
}

/* Personal settings */
.settings-page { width: min(calc(100% - 48px), 1060px); padding-bottom: 72px; }
.settings-intro { align-items: center; }
.settings-intro .lead { max-width: 420px; }
.settings-grid {
    margin-top: 38px;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 18px;
}
.settings-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 94%, var(--surface-2));
    box-shadow: 0 18px 54px rgba(0, 0, 0, .08);
}
.settings-card-heading { display: flex; align-items: center; gap: 13px; }
.settings-card-heading h2 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.015em; }
.settings-card-heading .context-label { margin-bottom: 3px; }
.settings-card-icon {
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 10px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.settings-card-icon svg { width: 18px; height: 18px; }
.settings-card-copy { margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.settings-account-details { margin: 22px 0 0; display: grid; gap: 0; }
.settings-account-details > div {
    min-width: 0;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
}
.settings-account-details dt { color: var(--faint); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.settings-account-details dd { min-width: 0; margin: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; text-align: right; }

.settings-theme-options { margin-top: 21px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.settings-theme-option {
    min-width: 0;
    min-height: 76px;
    padding: 11px 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--muted);
    background: var(--surface-2);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.settings-theme-option:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }
.settings-theme-option:active { transform: scale(.98); }
.settings-theme-option:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 66%, transparent); outline-offset: 2px; }
.settings-theme-option.is-active { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); }
.settings-theme-option.is-active svg { color: var(--accent); }
.settings-theme-option svg { width: 18px; height: 18px; }

.settings-form { margin-top: 22px; display: grid; gap: 14px; }
.settings-form .field input { border-color: var(--border); background: var(--field-bg); }
.settings-form .field input:focus { border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); }
.settings-form .field-hint { margin: 0; }
.settings-submit { justify-self: start; margin-top: 2px; }
.settings-success {
    margin: 0;
    color: color-mix(in srgb, var(--accent) 78%, var(--text));
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 650;
}
.settings-success svg { width: 15px; height: 15px; }

.settings-catalog-list { margin-top: 18px; display: grid; gap: 7px; }
.settings-catalog-item {
    min-width: 0;
    min-height: 54px;
    padding: 7px 8px 7px 5px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    display: grid;
    grid-template-columns: 22px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    transition: border-color .14s ease, background-color .14s ease, opacity .14s ease;
}
.settings-catalog-item:hover { border-color: var(--border-strong); }
.settings-catalog-item.is-dragging { opacity: .42; }
.settings-catalog-item.is-drop-target { border-color: var(--accent); background: var(--accent-soft); }
.settings-catalog-grip { color: var(--faint); cursor: grab; display: grid; place-items: center; }
.settings-catalog-item:active .settings-catalog-grip { cursor: grabbing; }
.settings-catalog-grip svg { width: 16px; height: 16px; }
.settings-catalog-icon { width: 32px; height: 32px; border-radius: 7px; color: var(--muted); background: var(--surface-3); display: grid; place-items: center; }
.settings-catalog-icon svg { width: 15px; height: 15px; }
.settings-catalog-copy { min-width: 0; display: grid; gap: 3px; }
.settings-catalog-copy strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.settings-catalog-copy small { overflow: hidden; color: var(--faint); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.settings-catalog-actions { display: inline-flex; align-items: center; gap: 4px; }
.settings-catalog-actions button {
    width: 29px;
    height: 29px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    background: var(--surface);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.settings-catalog-actions button:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }
.settings-catalog-actions button:disabled { opacity: .28; cursor: default; }
.settings-catalog-actions svg { width: 13px; height: 13px; }
.settings-catalog-empty { min-height: 84px; padding: 18px; border: 1px dashed var(--border); border-radius: 9px; color: var(--faint); display: grid; place-items: center; text-align: center; font-size: 11px; line-height: 1.5; }
.settings-catalog-card .form-error, .settings-catalog-card .settings-success { margin-top: 12px; }
.settings-card-actions { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

@media (max-width: 940px) {
    .settings-intro { align-items: flex-start; flex-direction: column; gap: 15px; }
    .settings-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .settings-page { width: calc(100% - 28px); padding-top: 28px; }
    .settings-page h1 { font-size: 38px; }
    .settings-grid { margin-top: 28px; gap: 12px; }
    .settings-card { padding: 18px; border-radius: 10px; }
    .settings-theme-options { grid-template-columns: minmax(0, 1fr); }
    .settings-theme-option { min-height: 48px; padding-inline: 13px; display: flex; justify-content: flex-start; }
    .settings-catalog-item { grid-template-columns: 18px 30px minmax(0, 1fr) auto; gap: 6px; }
    .settings-catalog-icon { width: 29px; height: 29px; }
    .settings-catalog-actions button { width: 27px; height: 27px; }
    .settings-card-actions { align-items: stretch; flex-direction: column-reverse; }
    .settings-card-actions button { width: 100%; }
    .settings-submit { width: 100%; }
}