:root {
    --bg: #f4f3ed;
    --surface: #ffffff;
    --surface-muted: #f4f3ed;
    --border: #dcded3;
    --text: #262a24;
    --text-muted: #64695e;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #edf4ff;
    --primary-border: #c9dcff;
    --on-primary: #ffffff;
    --secondary: #16a085;
    --on-secondary: #000000;
    --accent: #d6f05a;
    --accent-ink: #262a24;
    --brand-panel: #262a24;
    --brand-panel-text: #f4f3ed;
    --success: #116b49;
    --warning: #885500;
    --danger: #a9312c;
    --success-soft: color-mix(in srgb, var(--success) 10%, var(--surface));
    --warning-soft: color-mix(in srgb, var(--warning) 10%, var(--surface));
    --danger-soft: color-mix(in srgb, var(--danger) 10%, var(--surface));
    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
    --shadow-md: 0 14px 38px rgb(16 24 40 / 14%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
}

html[data-theme="dark"] {
    --bg: #171a16;
    --surface: #22261f;
    --surface-muted: #171a16;
    --border: #3b4135;
    --text: #f4f3ed;
    --text-muted: #b7bcae;
    --primary: #78a7ff;
    --primary-dark: #9bbdff;
    --primary-soft: #1d3559;
    --primary-border: #315687;
    --on-primary: #0d1726;
    --secondary: #48c5a9;
    --on-secondary: #000000;
    --accent: #d6f05a;
    --accent-ink: #262a24;
    --brand-panel: #22261f;
    --brand-panel-text: #f4f3ed;
    --success: #53c793;
    --warning: #e2ae4f;
    --danger: #f1847e;
    color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body { height: 100dvh; margin: 0; overflow: hidden; background: var(--bg); font-size: 14px; line-height: 1.5; }
body.menu-open { overflow: hidden; }
.app-loader { position: fixed; inset: 0; z-index: 200; display: none; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; color: var(--text); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(3px); }
.app-loader[open] { display: grid; place-items: center; }
.app-loader::backdrop { background: transparent; }
.app-loader-content { display: grid; min-width: 128px; justify-items: center; gap: 12px; color: var(--text-muted); }
.app-loader-content img { display: block; width: 58px; height: 58px; object-fit: contain; }
html:not([data-theme="dark"]) .theme-logo-dark, html[data-theme="dark"] .theme-logo-light { display: none; }
.app-loader-content small { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.app-loader-mark { position: relative; display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; color: var(--on-primary); background: var(--primary); font-size: 16px; font-weight: 850; box-shadow: var(--shadow-md); }
.app-loader-mark::after, .app-loader-spinner { content: ""; position: absolute; width: 64px; height: 64px; border: 2px solid var(--primary-border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
.app-loader-spinner { position: relative; display: block; width: 42px; height: 42px; }
.is-loading { position: relative; }
.is-loading > :not(.local-loader) { opacity: .45; }
.local-loader { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 12px; border-radius: inherit; color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent); font-size: 12px; font-weight: 700; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 300; padding: 10px 14px; border-radius: var(--radius-md); color: var(--accent-ink); background: var(--accent); font-weight: 800; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.app-area { display: flex; height: 100dvh; min-height: 0; flex-direction: column; overflow: hidden; }
.topbar { position: relative; z-index: 20; display: flex; height: 72px; flex: 0 0 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(12px); }
.page-scroll { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
.topbar-left, .topbar-actions { display: flex; align-items: center; }
.topbar-left { gap: 12px; min-width: 0; }
.topbar-brand { display: inline-flex; min-width: 0; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.topbar-brand > span, .topbar-brand > img { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 9px; }
.topbar-brand > span { color: var(--on-primary); background: var(--primary); font-size: 11px; font-weight: 800; }
.topbar-brand > img { object-fit: contain; }
.topbar-brand > strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-brand:hover > strong { color: var(--primary); }
.topbar-actions { gap: 10px; }
.context-indicator { display: grid; min-width: 170px; max-width: 300px; padding: 3px 2px; line-height: 1.15; text-align: right; }
.context-indicator strong, .context-indicator span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-indicator strong { font-size: 12px; }
.context-indicator span { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.icon-button, .account-button { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); background: var(--surface); cursor: pointer; }
.icon-button:hover { border-color: var(--primary-border); color: var(--primary); background: var(--primary-soft); }
.icon-button svg { width: 19px; height: 19px; }
.account-button { border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 800; cursor: pointer; }

.menu-overlay { position: fixed; inset: 0; z-index: 80; visibility: hidden; background: rgb(15 23 42 / 42%); opacity: 0; transition: opacity .18s ease, visibility .18s ease; }
.menu-overlay.is-visible { visibility: visible; opacity: 1; }
.menu-drawer { position: fixed; inset: 0 auto 0 0; z-index: 90; display: flex; width: min(360px, 92vw); flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-md); transform: translateX(-102%); transition: transform .2s ease; }
.menu-drawer.is-open { transform: translateX(0); }
.menu-brand { display: flex; height: 72px; min-height: 72px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px 10px 22px; border-bottom: 1px solid var(--border); }
.menu-brand-link { display: flex; flex: 1; align-items: center; gap: 11px; min-width: 0; text-decoration: none; }
.menu-brand-link > span:last-child { display: grid; min-width: 0; row-gap: 2px; }
.menu-brand-link strong { font-weight: 850; line-height: 1.15; }
.menu-brand strong { font-size: 14px; }
.menu-brand small { color: var(--text-muted); font-size: 10px; }
.brand-mark { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; color: var(--on-primary); background: var(--primary); font-weight: 800; }
.brand-logo { display: block; width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; }
.menu-brand > .icon-button { width: 36px; height: 36px; border-color: color-mix(in srgb, var(--border) 72%, transparent); color: var(--text-muted); background: transparent; }
html:not([data-theme="dark"]) .menu-brand { border-bottom-color: color-mix(in srgb, var(--border) 64%, transparent); }
.menu-level-header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.menu-level-header[hidden] { display: none; }
.menu-level-header > div { display: grid; align-content: center; min-width: 0; }
.menu-level-header small { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.menu-level-header strong { margin-top: 2px; font-size: 14px; }
.menu-level-header > div > span { overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.menu-back { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; align-self: center; padding: 0 12px; border: 1px solid var(--primary-border); border-radius: var(--radius-md); color: var(--primary); background: var(--primary-soft); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.menu-back:hover { border-color: var(--primary); }
.menu-back svg { width: 17px; height: 17px; }
.menu-navigation { flex: 1; overflow-y: auto; padding: 22px 14px; }
.menu-label { display: block; margin: 0 10px 9px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.menu-label-secondary { margin-top: 28px; }
.menu-level { display: grid; }
.menu-level[hidden] { display: none; }
.menu-entry { display: flex; width: 100%; min-height: 54px; align-items: center; gap: 12px; padding: 8px 11px; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-muted); background: transparent; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menu-entry + .menu-entry { margin-top: 4px; }
.menu-entry:hover, .menu-entry:focus-visible { border-color: var(--border); color: var(--text); background: var(--surface-muted); }
.menu-entry.is-active { border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); color: var(--accent-ink); background: var(--accent); }
html[data-theme="dark"] .menu-entry.is-active { background: color-mix(in srgb, var(--accent) 84%, var(--surface)); }
.menu-entry.is-disabled { opacity: .55; }
.menu-entry-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.menu-entry.is-active .menu-entry-icon { border-color: color-mix(in srgb, var(--accent-ink) 24%, transparent); color: var(--accent-ink); background: color-mix(in srgb, var(--surface) 38%, transparent); }
.menu-entry.is-active .menu-entry-copy small { color: color-mix(in srgb, var(--accent-ink) 76%, transparent); }
.menu-entry-icon svg { width: 18px; height: 18px; }
.menu-entry-copy { display: grid; flex: 1; min-width: 0; }
.menu-entry-copy strong { font-size: 13px; }
.menu-entry-copy small { color: var(--text-muted); font-size: 12px; }
.menu-entry-arrow { width: 16px; height: 16px; }
.menu-user { display: flex; min-height: 72px; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.menu-user-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.menu-user-copy strong, .menu-user-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-user > svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--text-muted); }
.menu-user:hover { background: var(--surface-muted); }
.menu-user strong { font-size: 12px; line-height: 1.2; }
.menu-user small { color: var(--text-muted); font-size: 12px; line-height: 1.2; }
.user-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid var(--primary-border); border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 800; }

.account-menu { position: fixed; top: 62px; right: 28px; z-index: 70; width: 260px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); }
.account-menu[hidden] { display: none; }
.account-name { display: grid; gap: 2px; padding: 9px 10px 10px; }
.account-name strong { font-size: 12px; }
.account-name small { color: var(--text-muted); font-size: 10px; }
.account-context { display: grid; gap: 2px; margin-bottom: 5px; padding: 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.account-context small { color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.account-context strong, .account-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-context strong { margin-top: 3px; font-size: 11px; }
.account-context span { color: var(--text-muted); font-size: 10px; }
.account-menu > a, .account-menu > button, .account-logout button { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); color: var(--text); background: transparent; font: inherit; font-size: 12px; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu > a:hover, .account-menu > button:hover, .account-logout button:hover { background: var(--surface-muted); }
.account-logout { margin: 0; }
.theme-switch { display: flex; width: 34px; height: 19px; flex: 0 0 34px; padding: 2px; border-radius: 999px; background: var(--border); transition: background .16s ease; }
.theme-switch i { width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 18%); transition: transform .16s ease; }
[data-theme-toggle][aria-checked="true"] .theme-switch { background: var(--primary); }
[data-theme-toggle][aria-checked="true"] .theme-switch i { transform: translateX(15px); }

.page-content { width: 100%; max-width: 1480px; margin: 0 auto; padding: 32px 30px 52px; }
.page-content > .alert { margin-bottom: 20px; }
.breadcrumb { margin-bottom: 12px; color: var(--text-muted); font-size: 12px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 7px; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--border); }
.breadcrumb a { color: var(--primary); font-weight: 700; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; color: var(--primary); font-size: 12px; font-weight: 700; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-heading-copy { min-width: 0; }
.page-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 7px 0 5px; }
.page-heading h1 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.035em; }
.page-heading p, .panel-header p { margin: 0; color: var(--text-muted); }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 18px; border: 0; border-radius: var(--radius-md); font-weight: 700; text-decoration: none; cursor: pointer; transition: background .16s ease, transform .16s ease; }
.button:active { transform: translateY(1px); }
.button-primary { color: var(--accent-ink); background: var(--accent); }
.button-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 84%, #ffffff); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-ink) 35%, transparent); }
.button:disabled { opacity: .55; cursor: not-allowed; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.metric-card, .panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.metric-card { display: grid; gap: 8px; padding: 20px; }
.metric-card > span { color: var(--text-muted); font-size: 13px; }
.metric-card strong { font-size: 25px; letter-spacing: -.03em; }
.metric-card small { color: var(--text-muted); font-size: 12px; }
.metric-card .positive { color: var(--success); }
.dashboard-intro { padding: 24px; color: var(--brand-panel-text); background: var(--brand-panel); }
.dashboard-intro h3 { margin: 0 0 6px; font-size: 18px; }
.dashboard-intro p { max-width: 68ch; margin: 0; color: color-mix(in srgb, var(--brand-panel-text) 76%, transparent); }
.dashboard-intro .page-actions { justify-content: flex-start; margin-top: 20px; }
.dashboard-intro .button-secondary { border-color: color-mix(in srgb, var(--brand-panel-text) 28%, transparent); color: var(--brand-panel-text); background: transparent; }
.dashboard-intro .button-secondary:hover { background: color-mix(in srgb, var(--brand-panel-text) 10%, transparent); }
.content-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; }
.panel { overflow: hidden; }
.panel-header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.panel-header h3 { margin: 0 0 4px; font-size: 15px; }
.panel-header p { font-size: 12px; }
.related-panel { margin-top: 20px; }
.tag { padding: 5px 9px; border: 1px solid var(--primary-border); border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.data-table-wrap { overflow-x: auto; }
.data-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table-wrap th, .data-table-wrap td { padding: 14px 20px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.data-table-wrap th { color: var(--text-muted); background: var(--surface-muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.data-table-wrap tbody tr:last-child td { border-bottom: 0; }
.data-table-wrap tbody tr:hover { background: var(--surface-muted); }
.data-table-wrap td small { display: block; margin-top: 3px; color: var(--text-muted); }
.status { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-success { color: var(--success); background: var(--success-soft); }
.status-info { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.status-warning { color: var(--warning); background: var(--warning-soft); }
.status-danger { color: var(--danger); background: var(--danger-soft); }
.activity-list { padding: 6px 20px; }
.activity-item { display: grid; grid-template-columns: 10px 1fr; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: 0; }
.activity-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--secondary); }
.activity-item strong { display: block; font-size: 12px; line-height: 1.45; }
.activity-item small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 10px; }

.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
.form-panel { padding: 22px; }
.panel.form-panel { width: 100%; max-width: 960px; }
.form-panel > .panel-header { margin: -22px -22px 22px; }
.form-panel h3 { margin: 0 0 5px; font-size: 16px; }
.form-panel > p { margin: 0 0 22px; color: var(--text-muted); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .form-field + .form-field { margin-top: 0; }
.form-field { display: grid; gap: 6px; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-size: 12px; font-weight: 700; }
.field-tooltip { position: fixed; z-index: 160; width: min(280px, calc(100vw - 24px)); padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface); box-shadow: var(--shadow-md); font-size: 11px; font-weight: 400; line-height: 1.45; }
.field-tooltip[hidden], .field-tooltip[popover]:not(:popover-open) { display: none; }
.field-tooltip[popover] { inset: auto; margin: 0; }
.form-field input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface); }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { border-color: var(--primary); outline: 2px solid var(--text); outline-offset: 3px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.form-readonly { color: var(--text-muted); background: var(--surface-muted) !important; }
.form-message { margin: 16px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border)); border-radius: var(--radius-md); color: var(--success); background: var(--success-soft); font-size: 12px; }
.form-message[hidden] { display: none; }
.form-message.is-error { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); color: var(--danger); background: var(--danger-soft); }

.button-secondary { border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.button-secondary:hover:not(:disabled) { border-color: var(--primary-border); background: var(--surface-muted); }
.button-ghost { color: var(--primary); background: transparent; }
.button-ghost:hover:not(:disabled) { background: var(--primary-soft); }
.button-danger { border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border)); color: var(--danger); background: var(--danger-soft); }
.button-danger:hover:not(:disabled) { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, var(--surface)); }
.record-secondary-actions { display: flex; justify-content: flex-end; margin: -10px 0 20px; }
.danger-link { color: var(--danger); font-size: 12px; font-weight: 700; text-decoration: none; }
.danger-link:hover { text-decoration: underline; }
.status-neutral { color: var(--text-muted); background: var(--surface-muted); }
.example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.catalog-index { position: sticky; top: 10px; z-index: 10; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); }
.catalog-index a { padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 10px; font-weight: 750; text-decoration: none; }
.catalog-index a:hover { color: var(--primary); background: var(--primary-soft); }
.catalog-section { margin-bottom: 20px; padding: 22px; overflow: visible; scroll-margin-top: 76px; }
.token-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.token-grid article { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.token-grid i { height: 42px; border: 1px solid var(--border); border-radius: 7px; }
.token-grid strong { font-size: 11px; }.token-grid code { color: var(--text-muted); font-size: 9px; }
.token-primary { background: var(--primary); }.token-accent { background: var(--accent); }.token-surface { background: var(--surface); }.token-muted { background: var(--surface-muted); }.token-success { background: var(--success); }.token-warning { background: var(--warning); }.token-danger { background: var(--danger); }
.type-samples { display: grid; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.type-samples div { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; gap: 14px; }.type-samples small { color: var(--text-muted); font-size: 8px; font-weight: 800; }.type-samples h1,.type-samples h2,.type-samples h3,.type-samples p { margin: 0; }
.example-wide { grid-column: 1 / -1; }
.example-section { padding: 22px; }
.example-heading { margin-bottom: 20px; }
.example-heading h3 { margin: 0 0 4px; font-size: 15px; }
.example-heading p { margin: 0; color: var(--text-muted); font-size: 11px; }
.component-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.form-field + .form-field { margin-top: 14px; }
.form-field select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface); }
.form-field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface); resize: vertical; }
.form-field small { color: var(--text-muted); font-size: 11px; }.form-field-error input,.form-field-error select,.form-field-error textarea { border-color: var(--danger); }.form-field-error small { color: var(--danger); }.form-field-success input,.form-field-success select,.form-field-success textarea { border-color: var(--success); }.form-field-success small { color: var(--success); }
.required-mark { color: var(--danger); }
.form-required-note { margin: 0 0 16px; color: var(--text-muted); font-size: 11px; }
.check-field { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11px; }
.check-field input[type="checkbox"], .check-field input[type="radio"] { width: 18px; height: 18px; min-height: 0; flex: 0 0 18px; margin: 1px 0 0; padding: 0; accent-color: var(--accent); }
fieldset.form-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.multi-select { position: relative; width: 100%; min-width: 0; }
.multi-select-trigger { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface); text-align: left; cursor: pointer; }
.multi-select-trigger:hover:not(:disabled), .multi-select-trigger[aria-expanded="true"] { border-color: var(--primary); }
.multi-select-trigger:disabled { opacity: .55; cursor: not-allowed; }
.multi-select-trigger svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-muted); }
.multi-select-panel { position: fixed; z-index: 140; display: flex; flex-direction: column; overflow: hidden; max-height: min(360px, calc(100dvh - 24px)); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); }
.multi-select-panel[hidden] { display: none; }
.multi-select-panel[popover] { inset: auto; margin: 0; padding: 0; color: var(--text); }
.multi-select-panel[popover]:not(:popover-open) { display: none; }
.multi-select-panel .multi-select-search { width: calc(100% - 16px); min-height: 38px; flex: 0 0 auto; margin: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface); }
.multi-select-actions { display: flex; flex-wrap: wrap; flex: 0 0 auto; gap: 7px; padding: 8px; border-bottom: 1px solid var(--border); }
.multi-select-actions button { min-height: 32px; padding: 5px 8px; border: 0; border-radius: 6px; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 800; cursor: pointer; }
.multi-select-actions button:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.multi-select-options { min-height: 0; overflow-y: auto; padding: 5px; overscroll-behavior: contain; }
.multi-select-panel .multi-select-item { display: flex; min-height: 34px; align-items: center; gap: 8px; margin: 0; padding: 7px; border-radius: 6px; color: var(--text); font-size: 11px; font-weight: 500; cursor: pointer; }
.multi-select-item[hidden] { display: none; }
.multi-select-item:hover, .multi-select-item:focus-within { background: var(--surface-muted); }
.multi-select-item input { width: auto; min-height: auto; margin: 0; padding: 0; accent-color: var(--primary); }
.multi-select-empty { padding: 14px 7px; color: var(--text-muted); font-size: 10px; text-align: center; }
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid; border-radius: var(--radius-md); font-size: 12px; }
.alert + .alert { margin-top: 10px; }
.alert > i { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 5px; border-radius: 50%; }
.alert > div { display: grid; gap: 2px; }
.alert span { color: inherit; }
.alert-info { border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); color: var(--primary); background: var(--primary-soft); }
.alert-info i { background: var(--primary); }
.alert-success { border-color: color-mix(in srgb, var(--success) 30%, var(--border)); color: var(--success); background: var(--success-soft); }
.alert-success i { background: var(--success); }
.alert-warning { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); color: var(--warning); background: var(--warning-soft); }
.alert-warning i { background: var(--warning); }
.alert-error { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); color: var(--danger); background: var(--danger-soft); }
.alert-error i { background: var(--danger); }
.error-summary { margin-bottom: 20px; padding: 16px 18px; border: 2px solid var(--danger); border-radius: var(--radius-md); color: var(--text); background: var(--danger-soft); }
.error-summary h2 { margin: 0 0 8px; color: var(--danger); font-size: 16px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary li + li { margin-top: 4px; }
.error-summary a { color: var(--danger); font-weight: 700; }
.related-panel-actions { display: flex; align-items: center; gap: 10px; }
.module-contract-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(260px, 340px); align-items: start; gap: 24px; padding: 20px; border-top: 1px solid var(--border); }
.module-contract-row p { margin: 5px 0 0; color: var(--text-muted); font-size: 11px; }
.module-contract-row small { display: block; margin-top: 8px; color: var(--warning); }
.module-contract-row form { display: grid; gap: 12px; }
.readiness-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.readiness-item { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-muted); }
.readiness-item > span { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; color: var(--warning); background: var(--warning-soft); font-weight: 800; }
.readiness-item.is-ready > span { color: var(--success); background: var(--success-soft); }
.readiness-item div { display: grid; gap: 2px; }
.readiness-item small { color: var(--text-muted); }
.onboarding-layout { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); align-items: start; gap: 20px; }
.onboarding-summary { position: sticky; top: 88px; display: grid; gap: 8px; padding: 20px; }
.onboarding-summary > strong { font-size: 30px; }
.onboarding-summary > small { margin-bottom: 12px; color: var(--text-muted); }
.onboarding-steps { display: grid; gap: 12px; }
.onboarding-step { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 18px; }
.onboarding-step-number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--warning); background: var(--warning-soft); font-weight: 800; }
.onboarding-step.is-done .onboarding-step-number { color: var(--success); background: var(--success-soft); }
.onboarding-step h3, .onboarding-step p { margin: 0; }
.onboarding-step h3 { margin: 2px 0 4px; font-size: 15px; }
.onboarding-step p { color: var(--text-muted); font-size: 11px; }
.onboarding-step div > small { color: var(--text-muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.permission-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.permission-options .check-field { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 11px; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-muted); cursor: pointer; }
.permission-options .check-field:hover { border-color: var(--primary-border); background: color-mix(in srgb, var(--surface-muted) 75%, var(--surface)); }
.permission-options .check-field span { display: grid; gap: 3px; }
.permission-options .check-field small { color: var(--text-muted); font-weight: 400; }
.field-error-text { color: var(--danger); }
.button-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.loading-demo { display: grid; gap: 16px; margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-muted); }.loading-demo > div:first-child { display: flex; align-items: center; gap: 9px; font-size: 11px; }.skeleton-lines { display: grid; gap: 7px; }.skeleton-lines i { height: 9px; border-radius: 999px; background: linear-gradient(90deg,var(--border),var(--surface),var(--border)); background-size: 200% 100%; animation: shimmer 1.3s infinite; }.skeleton-lines i:nth-child(2){width:82%}.skeleton-lines i:nth-child(3){width:63%}@keyframes shimmer{to{background-position:-200% 0}}

.dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); background: var(--surface); box-shadow: var(--shadow-md); }
.dialog::backdrop { background: rgb(15 23 42 / 48%); backdrop-filter: blur(2px); }
.dialog form { display: grid; gap: 18px; padding: 22px; }
.dialog p { margin: 0; color: var(--text-muted); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-header h3 { margin: 4px 0 0; font-size: 18px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.toast-region { position: fixed; top: 88px; right: 18px; z-index: 120; display: grid; width: min(380px, calc(100vw - 36px)); gap: 10px; }
.toast { display: grid; grid-template-columns: 9px minmax(0, 1fr) 30px; align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); }
.toast > i { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--success); }
.toast > div { display: grid; gap: 2px; }
.toast strong { font-size: 12px; }
.toast span { color: var(--text-muted); font-size: 11px; }
.toast button { width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); color: var(--text-muted); background: transparent; cursor: pointer; }
.card-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }.demo-card { display: grid; align-content: start; gap: 10px; min-height: 205px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); }.demo-card h3,.demo-card p { margin:0}.demo-card p,.demo-card small{color:var(--text-muted);font-size:10px}.metric-value{font-size:32px}.metric-progress{height:6px;margin-top:auto;border-radius:999px;background:var(--surface-muted);overflow:hidden}.metric-progress i{display:block;width:64%;height:100%;background:var(--primary)}.demo-card-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:var(--radius-md);color:var(--primary);background:var(--primary-soft);font-size:20px}.card-meta{display:flex;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px solid var(--border);font-size:9px}
.tabs { overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md)}.tab-list{display:flex;gap:4px;padding:6px;border-bottom:1px solid var(--border);background:var(--surface-muted)}.tab-list button{min-height:34px;padding:7px 12px;border:0;border-radius:var(--radius-sm);color:var(--text-muted);background:transparent;cursor:pointer}.tab-list button[aria-selected="true"]{color:var(--text);background:var(--surface);box-shadow:var(--shadow-sm)}.tab-panel{min-height:105px;padding:20px}.tab-panel p{margin:5px 0 0;color:var(--text-muted);font-size:11px}.overlay-actions{margin-top:18px}
.management-tabs { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.management-tabs .tab-list { gap: 6px; padding: 10px; }
.management-tabs .tab-list button { min-height: 40px; padding: 8px 14px; font-weight: 700; }
.management-tabs .tab-list button > span { display: inline-grid; min-width: 22px; height: 22px; place-items: center; margin-left: 6px; padding: 0 6px; border-radius: 999px; color: var(--text-muted); background: var(--surface-muted); font-size: 11px; }
.management-tabs .tab-list button[aria-selected="true"] > span { color: var(--accent-ink); background: var(--accent); }
.management-tabs .tab-panel { min-height: 240px; padding: 0; }
.dialog-drawer { width:min(460px,100vw);height:100dvh;max-height:none;margin:0 0 0 auto;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}.dialog-drawer[open]{display:flex}.dialog-drawer form{width:100%;align-content:start}
.filter-bar{display:grid;grid-template-columns:minmax(240px,1fr) minmax(170px,220px) auto;align-items:end;gap:10px;padding:16px 20px}.filter-field{display:grid;gap:5px}.filter-field label{color:var(--text-muted);font-size:10px;font-weight:800}.filter-bar>input,.filter-bar>select,.filter-field input,.filter-field select{width:100%;min-height:42px;padding:0 11px;border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);background:var(--surface)}.filter-actions{display:flex;align-items:center;gap:8px}.data-table-footer{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;color:var(--text-muted);font-size:12px}.pagination-nav ol,.pagination-nav{display:flex;gap:4px;margin:0;padding:0;list-style:none}.pagination-nav a,.pagination-nav button{display:inline-flex;min-width:34px;height:34px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:7px;color:var(--text-muted);background:var(--surface);text-decoration:none}.pagination-nav a.is-active,.pagination-nav a[aria-current="page"],.pagination-nav button.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.empty-state{display:flex;align-items:center;flex-direction:column;margin:22px;padding:26px;border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--surface-muted);text-align:center}.empty-state>span{display:grid;width:48px;height:48px;place-items:center;border:1px solid var(--border);border-radius:50%;color:var(--primary);background:var(--surface);font-size:20px}.empty-state strong{margin-top:10px}.empty-state p{margin:4px 0 13px;color:var(--text-muted);font-size:12px}
.progressive-table-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;border-top:1px solid var(--border);color:var(--text-muted);font-size:12px}

.pattern-grid, .state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pattern-card, .state-card { padding: 22px; }
.pattern-card h3, .state-card h3 { margin: 12px 0 6px; font-size: 16px; }
.pattern-card > p, .state-card > p { margin: 0; color: var(--text-muted); font-size: 12px; }
.pattern-number, .state-code { color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.pattern-card ul { margin: 18px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 11px; }
.pattern-card li + li { margin-top: 5px; }
.pattern-live{margin-top:20px}.detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);gap:20px;margin-top:20px}.form-section{margin:0 -22px;padding:20px 22px;border:0;border-top:1px solid var(--border)}.form-section legend{display:flex;align-items:center;gap:9px;width:100%;padding:0;margin-bottom:16px}.form-section legend span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;color:var(--primary);background:var(--primary-soft);font-size:10px}.detail-card{padding:22px}.detail-identity{display:flex;align-items:center;gap:12px;margin:18px 0}.detail-identity>span{display:grid;width:48px;height:48px;place-items:center;border:1px solid var(--primary-border);border-radius:var(--radius-md);color:var(--primary);background:var(--primary-soft);font-weight:800}.detail-identity h3,.detail-identity p{margin:0}.detail-identity p{color:var(--text-muted);font-size:10px}.detail-card h4{margin:22px 0 14px}.summary-list{display:grid;margin:0}.summary-list>div{display:grid;grid-template-columns:minmax(120px,.45fr) minmax(0,1fr);gap:18px;padding:12px 0;border-bottom:1px solid var(--border)}.summary-list>div:last-child{border-bottom:0}.summary-list dt{color:var(--text-muted);font-size:11px}.summary-list dd{min-width:0;margin:0;font-size:12px;font-weight:700;overflow-wrap:anywhere}.timeline{list-style:none;margin:0;padding:0}.timeline li{position:relative;display:grid;grid-template-columns:12px 1fr;gap:10px;min-height:82px}.timeline li:not(:last-child)::before{content:"";position:absolute;top:13px;bottom:0;left:5px;width:1px;background:var(--border)}.timeline i{position:relative;z-index:1;width:11px;height:11px;border:3px solid var(--primary-soft);border-radius:50%;background:var(--primary)}.timeline strong{font-size:11px}.timeline p{margin:3px 0;color:var(--text-muted);font-size:10px}.timeline small{color:var(--text-muted);font-size:9px}
.pattern-preview { display: grid; gap: 10px; height: 130px; margin-top: 18px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-muted); }
.preview-heading { width: 48%; height: 10px; border-radius: 999px; background: var(--primary-border); }
.preview-filter { height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.preview-lines { display: grid; gap: 6px; }
.preview-lines i { height: 8px; border-radius: 999px; background: var(--border); }
.preview-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preview-fields i, .preview-detail i { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.preview-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.state-card { display: flex; min-height: 290px; align-items: center; flex-direction: column; justify-content: center; text-align: center; }
.state-icon { display: grid; width: 52px; height: 52px; place-items: center; margin-top: 14px; border: 1px solid var(--primary-border); border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 22px; }
.state-card .button { margin-top: 20px; }

.table-actions { position: relative; width: 76px; text-align: right; }
.row-menu-button { display: inline-grid; width: 34px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-sm); color: var(--text-muted); background: transparent; cursor: pointer; }
.row-menu-button > span { font-size: 21px; font-weight: 800; line-height: 1; transform: translateY(-1px); }
.row-menu-button:hover, .row-menu-button[aria-expanded="true"] { color: var(--primary); background: var(--primary-soft); }
.row-menu { position: fixed; z-index: 110; display: grid; width: 140px; gap: 2px; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); text-align: left; white-space: normal; }
.row-menu[hidden] { display: none; }
.row-menu[popover] { inset: auto; margin: 0; color: var(--text); }
.row-menu[popover]:not(:popover-open) { display: none; }
.row-menu button, .row-menu a { display: block; width: 100%; min-height: 32px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); color: var(--text); background: transparent; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.row-menu button:hover, .row-menu a:hover { background: var(--surface-muted); }
.row-menu button.danger, .row-menu a.danger { color: var(--danger); }
.crud-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.crud-summary article{display:grid;padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.crud-summary span{color:var(--text-muted);font-size:9px;font-weight:800;text-transform:uppercase}.crud-summary strong{margin-top:3px;font-size:25px}.crud-summary small{color:var(--text-muted);font-size:9px}.audit-panel{margin-top:16px}.audit-list{padding:6px 20px}.audit-list article{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}.audit-list article:last-child{border:0}.audit-list i{width:9px;height:9px;border:3px solid var(--primary-soft);border-radius:50%;background:var(--primary)}.audit-list article>div{display:grid}.audit-list strong{font-size:11px}.audit-list small,.audit-list time{color:var(--text-muted);font-size:9px}

.auth-body { min-height: 100dvh; height: auto; overflow: auto; }
.auth-shell { display: grid; min-height: 100dvh; grid-template-columns: minmax(320px, 42%) minmax(0, 1fr); background: var(--bg); }
.auth-showcase { display: flex; min-height: 100dvh; justify-content: space-between; flex-direction: column; padding: clamp(28px, 5vw, 72px); color: var(--brand-panel-text); background: var(--brand-panel); }
.auth-showcase .eyebrow { color: var(--secondary); }
.auth-showcase-copy { max-width: 560px; }
.auth-showcase-copy h1 { max-width: 12ch; margin: 14px 0 14px; font-size: clamp(38px, 5vw, 70px); line-height: 1.02; letter-spacing: -.055em; }
.auth-showcase-copy p { max-width: 46ch; margin: 0; opacity: .78; font-size: 15px; }
.auth-showcase > small { opacity: .66; }
.auth-brand { display: inline-flex; width: fit-content; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.auth-brand > span, .auth-brand > img { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; object-fit: contain; }
.auth-brand > span { color: var(--brand-panel); background: var(--brand-panel-text); font-weight: 850; }
.auth-brand > strong { font-size: 16px; }
.auth-main { display: flex; min-width: 0; flex-direction: column; background: var(--bg); }
.auth-topbar { display: flex; min-height: 72px; align-items: center; justify-content: flex-end; padding: 16px 28px; }
.auth-brand-mobile { display: none; color: var(--text); }
.auth-brand-mobile > span { color: var(--on-primary); background: var(--primary); }
.auth-theme-button { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); background: var(--surface); cursor: pointer; }
.auth-theme-button:hover { border-color: var(--primary-border); color: var(--primary); background: var(--primary-soft); }
.auth-theme-button svg { width: 18px; height: 18px; }
.auth-content { display: grid; width: min(100%, 510px); flex: 1; align-content: center; gap: 22px; margin: 0 auto; padding: 32px 40px 56px; }
.auth-card { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.auth-heading { margin-bottom: 24px; }
.auth-heading h2, .auth-state h2 { margin: 7px 0 7px; font-size: 27px; line-height: 1.16; letter-spacing: -.035em; }
.auth-heading p, .auth-state p { margin: 0; color: var(--text-muted); }
.auth-demo-note { margin-bottom: 20px; }
.auth-card form { display: grid; gap: 16px; }
.auth-card .form-field + .form-field { margin-top: 0; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-label-row a, .auth-back, .auth-security-note, .auth-footer { color: var(--text-muted); font-size: 11px; }
.auth-label-row a, .auth-back, .auth-footer a { color: var(--primary); font-weight: 700; text-decoration: none; }
.auth-label-row a:hover, .auth-back:hover, .auth-footer a:hover { text-decoration: underline; }
.password-field { position: relative; }
.password-field input { padding-right: 76px; }
.password-field button { position: absolute; top: 4px; right: 4px; min-width: 66px; height: 34px; padding: 0 9px; border: 0; border-radius: var(--radius-sm); color: var(--primary); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.password-field button:hover { background: var(--primary-soft); }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-card .form-message { margin-top: 0; }
.auth-security-note { margin: 16px 0 0; text-align: center; }
.auth-back { display: inline-block; margin-bottom: 20px; }
.auth-state { display: grid; justify-items: center; text-align: center; }
.auth-state-icon { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 18px; border: 1px solid var(--primary-border); border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 22px; font-weight: 800; }
.auth-state p { max-width: 42ch; margin-bottom: 22px; }
.auth-state .button { width: 100%; }
.auth-state .button + .button { margin-top: 8px; }
.auth-footer { display: flex; justify-content: space-between; gap: 16px; }

@media (max-width: 1000px) {
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: 1fr; }
    .profile-grid { grid-template-columns: 1fr; }
    .profile-grid .form-panel { max-width: 760px; }
    .pattern-grid { grid-template-columns: 1fr; }
    .detail-grid{grid-template-columns:1fr}
    .token-grid { grid-template-columns: repeat(3,1fr); }.card-demo-grid{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr 1fr}
    .crud-summary{grid-template-columns:1fr}.filter-actions{grid-column:1 / -1;justify-content:flex-end}
    .auth-shell { grid-template-columns: minmax(280px, 36%) minmax(0, 1fr); }
    .auth-showcase-copy h1 { font-size: 42px; }
    .module-contract-row { grid-template-columns: 1fr; }
    .readiness-list { grid-template-columns: 1fr; }
    .onboarding-layout { grid-template-columns: 1fr; }
    .onboarding-summary { position: static; }
}

@media (max-width: 620px) {
    .menu-drawer { width: 100vw; height: 100dvh; }
    .topbar { padding: 0 16px; }
    .topbar-brand > strong { display: none; }
    .topbar-left { gap: 8px; }
    .topbar-actions { min-width: 0; gap: 7px; }
    .context-indicator { min-width: 0; max-width: min(180px, calc(100vw - 154px)); }
    .context-indicator strong { font-size: 10px; }
    .context-indicator span { font-size: 8px; }
    .page-content { padding: 24px 16px 40px; }
    .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
    .page-heading h1 { font-size: 25px; }
    .page-actions { width: 100%; align-items: stretch; flex-direction: column; }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .metric-card { padding: 16px; }
    .button { min-height: 44px; }
    .form-actions .button, .page-actions .button { width: 100%; }
    .form-grid { grid-template-columns: 1fr; }
    .form-field-full { grid-column: auto; }
    .account-menu { right: 12px; }
    .example-grid, .state-grid { grid-template-columns: 1fr; }
    .example-wide { grid-column: auto; }
    .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
    .token-grid,.filter-bar{grid-template-columns:1fr}.type-samples div{grid-template-columns:1fr}.catalog-index{position:static}
    .filter-actions{grid-column:auto;align-items:stretch;flex-direction:column}.audit-list article{grid-template-columns:10px 1fr}.audit-list time{grid-column:2}
    .auth-shell { display: block; }
    .auth-showcase { display: none; }
    .auth-main { min-height: 100dvh; }
    .auth-topbar { justify-content: space-between; padding: 14px 16px; }
    .auth-brand-mobile { display: inline-flex; }
    .auth-brand-mobile > span, .auth-brand-mobile > img { width: 36px; height: 36px; }
    .auth-content { align-content: start; padding: 24px 16px 36px; }
    .auth-card { padding: 24px 20px; }
    .auth-heading h2, .auth-state h2 { font-size: 24px; }
    .auth-footer { align-items: flex-start; flex-direction: column; }
    .related-panel-actions { width: 100%; align-items: stretch; flex-direction: column; }
    .panel-header { align-items: flex-start; flex-direction: column; }
    .data-table-wrap table { min-width: 680px; }
    .data-table-footer { align-items:flex-start;flex-direction:column;gap:10px; }
    .summary-list>div { grid-template-columns:1fr;gap:3px; }
    .permission-options { grid-template-columns: 1fr; }
    .onboarding-step { grid-template-columns: 34px minmax(0, 1fr); }
    .onboarding-step .button { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
    .metrics { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}