:root {
    --ui-kit-classic-font: "Trebuchet MS", "Verdana", "Geneva", Arial, sans-serif;
    --ui-kit-mono-font: "Consolas", "Menlo", "Monaco", "Courier New", monospace;
    --ui-kit-shell-surface: #d4d0c8;
    --ui-kit-shell-surface-muted: #e8e4db;
    --ui-kit-shell-surface-emphasis: #f5f3ec;
    --ui-kit-shell-border: #8a8a8a;
    --ui-kit-shell-border-strong: #5d5d5d;
    --ui-kit-panel-surface: #ffffff;
    --ui-kit-button-surface: #f3f0e6;
    --ui-kit-focus-ring: #316ac5;
    --ui-kit-ink: #111111;
    --ui-kit-ink-strong: #111827;
    --ui-kit-muted: #505050;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--ui-kit-classic-font);
    font-size: 12px;
    background: var(--ui-kit-shell-surface);
    color: #111111;
}

* {
    box-sizing: border-box;
}

.app-frame {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    background: linear-gradient(180deg, #d9e2ec 0%, #f0f2f5 18%, #f0f2f5 100%);
}

.app-chrome {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0.8rem;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 2px solid #334155;
    color: var(--ui-kit-shell-surface);
}

.app-title {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.app-subtitle {
    font-size: 0.82rem;
    color: var(--ui-kit-shell-border);
}

.app-content {
    padding: 0.35rem 0.5rem 0.85rem;
}

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

button {
    border: 1px solid var(--ui-kit-shell-border-strong);
    background: var(--ui-kit-button-surface);
    color: #111111;
    border-radius: 0;
    cursor: pointer;
    min-height: 24px;
    padding: 0.15rem 0.45rem;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.desktop-shell {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto auto auto 1fr auto;
    gap: 0;
}

.desktop-shell.classic-desktop-shell {
    background: var(--ui-kit-shell-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.desktop-shell > * {
    min-width: 0;
    box-sizing: border-box;
}

.skip-link {
    position: fixed;
    left: 0.5rem;
    top: 0.5rem;
    z-index: 1000;
    transform: translateY(-160%);
    padding: 0.45rem 0.7rem;
    border: 2px solid var(--ui-kit-focus-ring);
    background: #ffffff;
    color: #111827;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    transform: translateY(0);
}

.desktop-shell-topline {
    display: grid;
    grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.25fr);
    gap: 0.45rem;
    align-items: stretch;
    padding: 0.35rem;
    border: 1px solid var(--ui-kit-shell-border-strong);
    border-top: 0;
    background:
        linear-gradient(90deg, rgba(49, 106, 197, 0.14), rgba(255, 255, 255, 0.22)),
        var(--ui-kit-shell-surface-muted);
}

.desktop-shell-topline--gate {
    border-top: 1px solid var(--ui-kit-shell-border-strong);
}

.desktop-shell-title {
    display: grid;
    gap: 0.08rem;
    align-content: center;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid #9aa8b8;
    background:
        linear-gradient(135deg, #ffffff 0%, #eef4fb 100%);
}

.desktop-shell-title p {
    margin: 0;
    color: #1e3a8a;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.desktop-shell-title h1 {
    margin: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desktop-shell-readiness {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
}

.desktop-shell-readiness div {
    display: grid;
    gap: 0.08rem;
    align-content: center;
    min-width: 0;
    padding: 0.35rem 0.45rem;
    border: 1px solid #aeb8c4;
    background: #ffffff;
}

.desktop-shell-readiness dt {
    color: #475569;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.desktop-shell-readiness dd {
    margin: 0;
    overflow: hidden;
    color: #111827;
    font-size: 0.86rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-notice {
    margin: 0.15rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-panel-surface);
    color: #16202b;
    font-size: 0.88rem;
    font-weight: 600;
}

.shell-notice--warning {
    border-color: #a16207;
    background: #fffbeb;
    color: #713f12;
}

.menu-shell {
    position: relative;
    z-index: 20;
}

.menu-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--ui-kit-shell-surface);
    border: 1px solid var(--ui-kit-shell-border);
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 26px;
}

.menu-bar.classic-menu-bar {
    background: linear-gradient(180deg, #e9e6dd 0%, #d4d0c8 100%);
    border-color: var(--ui-kit-shell-border-strong);
    min-height: 26px;
}

.menu-btn {
    border: 0;
    border-right: 1px solid transparent;
    background: transparent;
    border-radius: 0;
    min-height: 24px;
    padding: 0.15rem 0.45rem;
}

.menu-btn.classic-menu-button {
    min-height: 24px;
    padding: 0.15rem 0.5rem;
}

.menu-btn.active {
    background: var(--ui-kit-focus-ring);
    border-color: #1f4e8c;
    color: #ffffff;
}

.menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    display: grid;
    gap: 0;
    min-width: 13rem;
    background: var(--ui-kit-panel-surface);
    border: 1px solid var(--ui-kit-shell-border);
    padding: 0.1rem;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}

.menu-dropdown.classic-menu-dropdown {
    border-color: var(--ui-kit-shell-border-strong);
    padding: 1px;
}

.menu-item {
    min-width: 12rem;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.15rem 0.35rem;
}

.menu-item.classic-menu-item {
    font-size: 12px;
}

.tool-strip {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    background: var(--ui-kit-shell-surface);
    border: 1px solid var(--ui-kit-shell-border);
    padding: 0.05rem 0.15rem;
    border-radius: 0;
    box-shadow: none;
    min-height: 28px;
}

.tool-strip.classic-tool-strip {
    background: linear-gradient(180deg, #e9e6dd 0%, #d4d0c8 100%);
    border-color: var(--ui-kit-shell-border-strong);
    padding: 0.05rem 0.12rem;
}

.desktop-shell--dialog-open .menu-shell {
    position: relative;
    z-index: 1002;
}

.desktop-shell--dialog-open .tool-strip {
    position: relative;
    z-index: 1001;
}

.desktop-shell--dialog-open .menu-dropdown {
    z-index: 1003;
}

.tool-divider {
    width: 1px;
    height: 18px;
    margin: 0.05rem 0.3rem;
    background: #b7c2cf;
    align-self: center;
}

.tool-btn {
    min-height: 24px;
    padding: 0.12rem 0.42rem;
    border-radius: 0;
}

.tool-btn.classic-tool-button {
    min-height: 24px;
    margin-right: 0.12rem;
    padding: 0.12rem 0.45rem;
}

.tool-btn.selected {
    border-color: #1f4e8c;
    background: #ffffff;
}

.mdi-strip {
    background: var(--ui-kit-shell-surface-muted);
    border: 1px solid var(--ui-kit-shell-border);
    padding: 0.05rem 0.15rem;
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    border-radius: 0;
    box-shadow: none;
}

.mdi-doc {
    border: 1px solid var(--ui-kit-shell-border-strong);
    background: var(--ui-kit-button-surface);
    border-radius: 0;
    min-height: 24px;
    padding: 0.12rem 0.4rem;
}

.mdi-doc-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.mdi-close {
    border: 1px solid var(--ui-kit-shell-border-strong);
    background: var(--ui-kit-button-surface);
    border-radius: 0;
    min-width: 24px;
    min-height: 24px;
    padding: 0.12rem 0.25rem;
    font-size: 0.75rem;
}

.mdi-doc.active {
    background: #ffffff;
    border-color: #1f4e8c;
}

.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;
}

.workbench-tab-strip {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0.15rem;
    min-height: 22px;
    padding: 0.05rem 0.15rem;
}

.workbench-tab-strip.classic-tab-strip {
    background: #ece9d8;
    border-color: var(--ui-kit-shell-border-strong);
    padding: 0.08rem 0.15rem;
}

.workbench-summary-copy {
    display: none;
    min-width: 0;
    gap: 0.05rem;
}

.tab-strip-label {
    color: var(--ui-kit-muted);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.workbench-runtime-summary {
    color: var(--ui-kit-muted);
    font-size: 0.72rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab-strip-buttons {
    display: flex;
    align-items: end;
    gap: 0.1rem;
    overflow-x: auto;
}

@media (max-width: 1100px) {
    .workbench-tab-strip {
        grid-template-columns: 1fr;
    }

    .workbench-runtime-summary {
        display: none;
    }
}

.workbench-tab {
    border: 1px solid var(--ui-kit-shell-border-strong);
    border-bottom-color: var(--ui-kit-panel-surface);
    border-radius: 0;
    background: var(--ui-kit-button-surface);
    min-height: 21px;
    padding: 0.05rem 0.35rem;
    font-size: 0.92rem;
    white-space: nowrap;
}

.workbench-tab.classic-workbench-tab {
    min-height: 20px;
}

.workbench-tab.active {
    background: var(--ui-kit-panel-surface);
    border-color: #1f4e8c;
    font-weight: 700;
}

.workspace-layout {
    display: grid;
    gap: 0.15rem;
    min-height: calc(100vh - 140px);
    padding: 0.15rem 0.15rem 0.2rem;
    min-width: 0;
}

.workspace-layout--with-left-pane {
    grid-template-columns: 228px minmax(0, 1fr);
}

.workspace-layout--without-left-pane {
    grid-template-columns: minmax(0, 1fr);
}

.left-pane,
.center-pane {
    display: grid;
    gap: 0.15rem;
    align-content: start;
    min-height: 0;
    min-width: 0;
}

.right-pane {
    display: none;
}

.panel {
    background: var(--ui-kit-panel-surface);
    border: 1px solid var(--ui-kit-shell-border);
    padding: 0.18rem 0.25rem;
    border-radius: 0;
    box-shadow: none;
}

.classic-navigator,
.classic-action-rail,
.classic-flow-rail,
.classic-section-preview,
.classic-status-strip {
    border-color: var(--ui-kit-shell-border-strong);
}

.flagship-marquee {
    display: grid;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem;
    border-radius: 22px;
    border: 1px solid rgba(191, 219, 254, 0.3);
    color: #f8fafc;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16) 0%, transparent 32%),
        linear-gradient(135deg, #0f172a 0%, #16304c 52%, #1f3b58 100%);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.18);
}

.flagship-marquee.marquee-sr4 {
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.24) 0%, transparent 32%),
        linear-gradient(135deg, #1f160f 0%, #5b3212 58%, #854e16 100%);
}

.flagship-marquee.marquee-sr5 {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.22) 0%, transparent 32%),
        linear-gradient(135deg, #0f172a 0%, #102f4a 46%, #16516f 100%);
}

.flagship-marquee.marquee-sr6 {
    background:
        radial-gradient(circle at top right, rgba(110, 231, 183, 0.2) 0%, transparent 32%),
        linear-gradient(135deg, #0f172a 0%, #173548 48%, #1e6757 100%);
}

.flagship-copy {
    display: grid;
    gap: 0.45rem;
}

.flagship-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.86);
}

.flagship-marquee h1 {
    margin: 0;
    font-size: clamp(1.65rem, 3vw, 2.6rem);
    line-height: 1.05;
    font-family: "Trebuchet MS", "Avenir Next Condensed", "Source Sans Pro", sans-serif;
}

.flagship-spotlight,
.flagship-resume {
    margin: 0;
    max-width: 72rem;
    color: rgba(241, 245, 249, 0.92);
}

.flagship-resume {
    color: rgba(191, 219, 254, 0.96);
    font-size: 0.92rem;
}

.flagship-fact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.flagship-fact {
    display: grid;
    gap: 0.3rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.2);
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(8px);
}

.flagship-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(191, 219, 254, 0.86);
}

.flagship-fact strong {
    font-size: 0.94rem;
    line-height: 1.35;
    color: #f8fafc;
}

.flagship-watchouts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.flagship-watchouts li {
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.1);
    border: 1px solid rgba(191, 219, 254, 0.18);
    color: rgba(241, 245, 249, 0.94);
}

.panel h2 {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #111111;
}

.mono {
    font-family: "Cascadia Mono", "Fira Code", monospace;
    word-break: break-all;
}

.coach-panel {
    background: linear-gradient(180deg, #eff6ff 0%, var(--ui-kit-panel-surface) 100%);
    border-color: #93c5fd;
}

.coach-header,
.coach-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.45rem;
}

.coach-header h2,
.coach-card h3 {
    margin: 0;
}

.coach-facts {
    margin: 0.45rem 0;
    display: grid;
    gap: 0.3rem;
}

.coach-facts div {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.45rem;
    font-size: 0.82rem;
}

.coach-facts dt {
    font-weight: 700;
    color: #1e3a8a;
}

.coach-facts dd {
    margin: 0;
}

.coach-card-list {
    display: grid;
    gap: 0.35rem;
}

.coach-card {
    display: grid;
    gap: 0.25rem;
    border: 1px solid var(--ui-kit-shell-border);
    border-radius: 6px;
    padding: 0.45rem;
    background: rgba(255, 255, 255, 0.92);
}

.coach-meta {
    margin: 0;
    font-size: 0.78rem;
    color: #475569;
}

.coach-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.75rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-shell-surface);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.coach-badge.good {
    background: #dcfce7;
    border-color: #4ade80;
    color: #166534;
}

.coach-badge.warn {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.coach-badge.error {
    background: #fee2e2;
    border-color: #f87171;
    color: #b91c1c;
}

.page {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0.8rem;
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.design-panel {
    display: grid;
    gap: 0.6rem;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.button-row.compact {
    font-size: 0.82rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--ui-kit-shell-border);
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.design-list,
.runtime-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.design-list li,
.runtime-list li {
    border: 1px solid var(--ui-kit-shell-border);
    border-radius: 6px;
    background: var(--ui-kit-button-surface);
    padding: 0.5rem 0.6rem;
}

.trace-card {
    display: grid;
    gap: 0.45rem;
}

.explain-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.trace-section-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1e3a8a;
}

.trace-diff,
.trace-steps {
    display: grid;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--ui-kit-shell-border);
    border-radius: 8px;
    background: var(--ui-kit-button-surface);
}

.trace-step {
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background: var(--ui-kit-panel-surface);
    padding: 0.35rem 0.5rem;
}

.trace-step summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.diff-before,
.diff-after {
    font-weight: 700;
}

.diff-arrow {
    display: inline-flex;
    margin: 0 0.35rem;
    color: #475569;
}

.explain-fragments {
    padding-top: 0.2rem;
    border-top: 1px dashed var(--ui-kit-shell-border);
}

.trace-card > header,
.runtime-list li > .coach-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.45rem;
}

.stack {
    display: grid;
    gap: 0.45rem;
}

.meta {
    margin: 0;
    color: #475569;
    font-size: 0.8rem;
}

.gm-board-panel {
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.14), transparent 28%),
        linear-gradient(180deg, #fffdf6 0%, var(--ui-kit-panel-surface) 100%);
}

.gm-board-header {
    align-items: center;
}

.gm-board-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.gm-board-global-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.gm-board-control-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
}

.gm-board-control-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.95);
}

.gm-board-autonomy-buttons,
.gm-board-status-badges,
.gm-board-context-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gm-board-autonomy-buttons .mini-btn.selected,
.gm-board-context-buttons .mini-btn.selected {
    border-color: var(--ui-kit-focus-ring);
    background: var(--ui-kit-shell-surface-emphasis);
    color: #1e3a8a;
    font-weight: 700;
}

.gm-board-stale-banner,
.gm-board-card-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid #f59e0b;
    background: #fffbeb;
    color: #92400e;
}

.gm-board-card-banner {
    font-size: 0.86rem;
}

.gm-board-rail {
    display: grid;
    gap: 0.4rem;
}

.gm-board-initiative-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.gm-board-initiative-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-button-surface);
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 600;
}

.gm-board-initiative-pill.warn {
    border-color: #f59e0b;
    background: #fffbeb;
}

.gm-board-initiative-pill.error {
    border-color: #f87171;
    background: #fef2f2;
}

.gm-board-initiative-pill.good {
    border-color: #4ade80;
    background: #f0fdf4;
}

.gm-board-initiative-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
}

.gm-board-card-stack {
    gap: 0.65rem;
}

.gm-board-card {
    gap: 0.7rem;
    padding: 0.75rem;
    border-width: 1px;
    border-style: solid;
    border-color: #dbe4f0;
    border-left-width: 6px;
    background: #fff;
}

.gm-board-card.warn {
    border-left-color: #f59e0b;
}

.gm-board-card.error {
    border-left-color: #ef4444;
}

.gm-board-card.good {
    border-left-color: #22c55e;
}

.gm-board-card-title {
    display: grid;
    gap: 0.35rem;
}

.gm-board-card-badges {
    align-items: center;
}

.gm-board-card-timing {
    display: grid;
    gap: 0.2rem;
    justify-items: end;
    text-align: right;
    font-size: 0.78rem;
    color: #475569;
}

.gm-board-card-time {
    font-weight: 700;
    color: #0f172a;
}

.gm-board-card-expiry {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
}

.gm-board-fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.5rem;
}

.gm-board-fact-grid > div {
    display: grid;
    gap: 0.15rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: var(--ui-kit-button-surface);
    border: 1px solid var(--ui-kit-shell-surface);
}

.generated-asset-image-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
}

.generated-asset-image-slot {
    gap: 0.7rem;
}

.generated-asset-image-figure {
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #dbe4f0;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 28%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.generated-asset-image-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.generated-asset-image-slot .meta {
    word-break: break-word;
}

.gm-board-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gm-board-alert {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: var(--ui-kit-focus-ring);
    font-size: 0.75rem;
}

.gm-board-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.gm-board-actions .button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .gm-board-header {
        align-items: flex-start;
    }

    .gm-board-header-actions,
    .gm-board-card-timing {
        justify-items: start;
        justify-content: flex-start;
        text-align: left;
    }
}

.facts {
    margin: 0;
    display: grid;
    gap: 0.3rem;
}

.facts div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.45rem;
}

.facts.compact div {
    font-size: 0.78rem;
}

.facts dt {
    font-weight: 700;
    color: #1e3a8a;
}

.facts dd {
    margin: 0;
}

.field {
    display: grid;
    gap: 0.25rem;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ui-kit-shell-border-strong);
    border-radius: 0;
    background: #fff;
    min-height: 24px;
    padding: 0.22rem 0.25rem;
}

.runtime-inspector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
}

.tree-list {
    margin: 0;
    padding-left: 1rem;
}

.tab-grid {
    display: grid;
    gap: 0.3rem;
}

.action-grid {
    display: grid;
    gap: 0.3rem;
}

.action-button {
    text-align: left;
    border-color: var(--ui-kit-shell-border-strong);
}

.action-button.selected {
    background: #ffffff;
    border-color: #1f4e8c;
}

.tab-btn {
    text-align: left;
    border-color: var(--ui-kit-shell-border-strong);
}

.tab-btn.active {
    background: #ffffff;
    border-color: var(--ui-kit-focus-ring);
}

.mini-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.section-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.35rem 0 0.5rem;
}

.controls .mini-grid {
    display: grid;
}

.mini-btn {
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mini-btn.primary {
    background: var(--ui-kit-shell-surface-emphasis);
    border-color: var(--ui-kit-focus-ring);
}

.button:focus-visible,
.mini-btn:focus-visible,
.browse-result-button:focus-visible,
.browse-chip:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ui-kit-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);
}

input[type="range"] {
    min-height: 24px;
}

input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.summary-grid label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.8rem;
}

.summary-grid .wide {
    grid-column: 1 / -1;
}

.summary-grid input,
.summary-grid textarea,
.inline-fields input,
.dialog-body input,
.dialog-body textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ui-kit-shell-border-strong);
    border-radius: 0;
    background: #fff;
    min-height: 24px;
    padding: 0.22rem 0.25rem;
}

.actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.inline-fields {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 0.45rem;
}

.section-preview pre {
    margin: 0;
    max-height: 24rem;
    overflow: auto;
    background: #0f172a;
    color: var(--ui-kit-shell-surface);
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.78rem;
    font-family: var(--ui-kit-mono-font);
}

.section-preview > h2,
.section-preview h3,
.section-preview h4,
.section-preview h5 {
    margin: 0 0 0.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

.section-preview > h2 {
    font-size: 0.88rem;
}

.classic-runner-sheet {
    display: grid;
    gap: 0.3rem;
    margin: 0 0 0.35rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: #ffffff;
}

.classic-runner-sheet h3 {
    margin: 0;
    font-size: 0.82rem;
}

.startup-workbench {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.35rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: #ffffff;
}

.startup-workbench-header,
.startup-workbench-grid,
.startup-command-list,
.startup-recent-list {
    display: grid;
    gap: 0.4rem;
}

.startup-workbench-header {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
    align-items: start;
}

.startup-workbench-posture {
    margin: 0;
    text-align: right;
}

.startup-workbench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.startup-workbench-card {
    display: grid;
    gap: 0.3rem;
    padding: 0.3rem 0.35rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: #f8f8f8;
}

.startup-workbench-card--support {
    margin-top: 0.1rem;
}

.startup-command-list {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.startup-command-list .mini-btn {
    width: 100%;
    justify-content: center;
}

.startup-recent-item {
    display: grid;
    gap: 0.1rem;
    justify-items: start;
    padding: 0.4rem 0.45rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: #ffffff;
    color: #111111;
    text-align: left;
}

.startup-recent-item strong {
    font-size: 0.78rem;
}

.startup-recent-item span {
    font-size: 0.7rem;
    color: #505050;
}

.startup-recent-item:disabled {
    opacity: 0.6;
}

.section-context-card {
    margin: 0 0 0.3rem;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: #ffffff;
}

.section-context-summary {
    margin: 0;
}

.classic-summary-grid,
.classic-attribute-grid {
    display: grid;
    gap: 0.16rem;
}

.classic-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr));
}

.classic-attribute-grid {
    grid-template-columns: repeat(auto-fit, minmax(2.4rem, 1fr));
    align-items: stretch;
}

.classic-summary-cell,
.classic-attribute-cell {
    display: grid;
    gap: 0.02rem;
    border: 1px solid #8d8d8d;
    background: #f7f4eb;
}

.classic-summary-cell {
    min-width: 6.2rem;
    padding: 0.14rem 0.3rem;
}

.classic-attribute-cell {
    min-width: 2.4rem;
    padding: 0.12rem 0.16rem;
    background: #f2f2f2;
}

.classic-fact-label {
    font-size: 0.62rem;
    color: #5d5d5d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.classic-fact-value {
    font-size: 0.94rem;
    color: #111111;
    font-weight: 700;
}

.classic-attribute-cell .classic-fact-label,
.classic-attribute-cell .classic-fact-value {
    text-align: center;
}

.classic-attribute-cell .classic-fact-value {
    font-size: 1rem;
    line-height: 1.05;
}

.sr6-attribute-workbench {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.35rem;
    padding: 0.5rem 0.55rem 0.45rem;
    border: 1px solid var(--ui-kit-shell-border-strong);
    background: linear-gradient(180deg, var(--ui-kit-panel-surface) 0%, var(--ui-kit-shell-surface-muted) 100%);
}

.sr6-attribute-workbench__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--ui-kit-shell-border);
}

.sr6-attribute-workbench__header > div {
    display: grid;
    gap: 0.12rem;
}

.sr6-attribute-workbench__header h3 {
    margin: 0;
    font-size: 0.94rem;
}

.sr6-attribute-workbench__summary {
    margin: 0;
    font-size: 0.72rem;
    color: var(--ui-kit-muted);
    letter-spacing: 0.01em;
}

.sr6-attribute-table,
.sr6-attribute-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem 7rem 4.5rem 7.5rem;
    gap: 0.35rem 0.6rem;
    align-items: center;
}

.sr6-attribute-table {
    padding: 0 0.35rem 0.08rem;
    color: var(--ui-kit-muted);
    font-size: 0.64rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sr6-attribute-row {
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-panel-surface);
}

.sr6-attribute-row--special {
    box-shadow: inset 2px 0 0 var(--ui-kit-focus-ring);
}

.sr6-attribute-row--locked {
    background: var(--ui-kit-shell-surface-muted);
}

.sr6-attribute-row--career {
    background: linear-gradient(180deg, var(--ui-kit-panel-surface) 0%, #f3f0e6 100%);
}

.sr6-attribute-row--capped {
    border-color: var(--ui-kit-shell-border-strong);
}

.sr6-attribute-cell {
    min-width: 0;
}

.sr6-attribute-cell--name {
    display: grid;
    gap: 0.08rem;
}

.sr6-attribute-row__namebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.sr6-attribute-row__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.sr6-attribute-row__name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ui-kit-ink-strong);
}

.sr6-attribute-row__improve,
.sr6-attribute-row__burn {
    padding: 0.1rem 0.45rem;
    font-size: 0.64rem;
    line-height: 1.15;
    white-space: nowrap;
}

.sr6-attribute-row__detail {
    display: block;
    margin-top: 0.08rem;
    font-size: 0.68rem;
    color: var(--ui-kit-muted);
}

.sr6-attribute-stepper {
    display: grid;
    grid-template-columns: 24px minmax(2rem, auto) 24px;
    gap: 0.25rem;
    align-items: center;
    justify-content: start;
    width: max-content;
    padding: 0.12rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-shell-surface);
}

.sr6-attribute-stepper .mini-btn {
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    justify-content: center;
    font-size: 0.92rem;
    line-height: 1;
    color: var(--ui-kit-ink-strong);
    background: var(--ui-kit-button-surface);
    border-color: var(--ui-kit-shell-border-strong);
}

.sr6-attribute-readonly {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.6rem;
    min-height: 28px;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-shell-surface);
}

.sr6-attribute-readonly strong {
    min-width: 2.25rem;
    text-align: center;
    font-size: 0.86rem;
    color: var(--ui-kit-ink-strong);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sr6-attribute-stepper strong {
    min-width: 2.25rem;
    text-align: center;
    font-size: 0.86rem;
    color: var(--ui-kit-ink-strong);
    font-variant-numeric: tabular-nums;
}

.sr6-attribute-cell--metric {
    justify-self: end;
    text-align: right;
}

.sr6-attribute-metric {
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ui-kit-ink-strong);
}

.sr6-attribute-metric--limits {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ui-kit-ink);
}

.browse-shell {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--ui-kit-shell-border);
    border-radius: 0;
    background: #ffffff;
    outline: none;
}

.browse-shell:focus {
    border-color: var(--ui-kit-focus-ring);
    box-shadow: none;
}

.browse-shell-header,
.browse-shell-meta,
.browse-chip-group,
.browse-facet-grid,
.browse-results-shell {
    display: grid;
    gap: 0.5rem;
}

.browse-shell-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.25rem;
}

.browse-shell-header h3,
.browse-results-pane h4,
.browse-detail-pane h4,
.browse-facet-card h4 {
    margin: 0;
}

.browse-shell-meta {
    justify-items: end;
    font-size: 0.72rem;
    color: #505050;
    gap: 0.1rem;
}

.browse-chip-group {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
}

.browse-chip {
    border: 1px solid var(--ui-kit-shell-border);
    border-radius: 0;
    padding: 0.12rem 0.35rem;
    background: var(--ui-kit-button-surface);
    color: #111111;
    font-size: 0.72rem;
}

.browse-chip.active {
    border-color: var(--ui-kit-focus-ring);
    background: #ffffff;
    font-weight: 700;
}

.browse-facet-grid {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.browse-facet-card,
.browse-results-pane,
.browse-detail-pane {
    border: 1px solid var(--ui-kit-shell-border);
    border-radius: 0;
    background: #ffffff;
    padding: 0.35rem 0.4rem;
}

.browse-facet-card ul,
.browse-results-list,
.browse-selection-list,
.browse-detail-lines {
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

.browse-facet-card li.selected {
    color: #166534;
    font-weight: 600;
}

.facet-count,
.browse-result-flag,
.browse-result-column {
    font-size: 0.76rem;
    color: #475569;
}

.browse-results-shell {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.browse-results-list {
    margin: 0;
}

.browse-results-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.browse-results-list ul > li + li {
    margin-top: 0.35rem;
}

.browse-result-button {
    width: 100%;
    text-align: left;
    display: grid;
    gap: 0.18rem;
    border: 1px solid var(--ui-kit-shell-border);
    border-radius: 0;
    background: #f7f5ee;
    padding: 0.3rem 0.4rem;
}

.browse-result-button.active {
    border-color: var(--ui-kit-focus-ring);
    background: #ffffff;
}

.browse-result-title,
.browse-detail-title {
    font-weight: 600;
    color: #0f172a;
}

.section-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 0.35rem;
    font-size: 0.76rem;
}

.section-table th,
.section-table td {
    border: 1px solid var(--ui-kit-shell-border);
    padding: 0.25rem 0.35rem;
    vertical-align: top;
}

.section-table th {
    background: var(--ui-kit-shell-surface);
    text-align: left;
}

.section-table-label {
    white-space: nowrap;
    color: #475569;
    font-size: 0.76rem;
}

.section-table-value {
    color: #0f172a;
}

.command-list {
    max-height: 18rem;
}

.command-list-row.disabled {
    opacity: 0.55;
}

.command-button {
    width: 100%;
    text-align: left;
}

.command-button.selected {
    background: #ffffff;
    border-color: #1f4e8c;
}

.status-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-shell-surface);
    font-size: 0.76rem;
    border-radius: 0;
    box-shadow: none;
}

.status-strip span {
    display: inline-flex;
    align-items: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.status-strip span + span::before {
    content: "|";
    margin-right: 0.35rem;
    color: #5d5d5d;
}

.note {
    margin: 0.2rem 0;
    color: var(--ui-kit-ink);
}

.hint {
    margin: 0.15rem 0;
    color: var(--ui-kit-muted);
    font-size: 0.78rem;
}

.error {
    color: #b91c1c;
    font-weight: 600;
}

.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.desktop-dialog {
    width: min(42rem, 92vw);
    max-width: calc(100vw - 1rem);
    max-height: 84vh;
    box-sizing: border-box;
    background: var(--ui-kit-panel-surface);
    border: 1px solid var(--ui-kit-shell-border-strong);
    border-radius: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.desktop-dialog.classic-dialog {
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22);
}

.dialog-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ui-kit-shell-surface-muted);
    color: inherit;
    padding: 0.18rem 0.35rem;
    font-weight: 600;
    border-bottom: 1px solid var(--ui-kit-shell-border-strong);
}

.dialog-titlebar.classic-dialog-titlebar {
    background: linear-gradient(180deg, #e9e6dd 0%, #d4d0c8 100%);
}

.dialog-close {
    min-height: 24px;
    min-width: 24px;
    padding: 0.12rem 0.35rem;
}

.dialog-note {
    margin: 0;
    color: var(--ui-kit-muted);
}

.dialog-field {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 0.35rem 0.55rem;
    align-items: center;
    min-width: 0;
}

.dialog-field--checkbox {
    grid-template-columns: auto 1fr;
    column-gap: 0.55rem;
    row-gap: 0.25rem;
    align-items: center;
}

.dialog-field--checkbox input[type="checkbox"],
.dialog-field--checkbox input[type="radio"] {
    margin: 0;
}

.dialog-field--full {
    grid-column: 1 / -1;
}

.dialog-field--left,
.dialog-field--right {
    grid-column: span 1;
}

.dialog-field--list,
.dialog-field--tree,
.dialog-field--grid,
.dialog-field--detail,
.dialog-field--summary,
.dialog-field--snippet,
.dialog-field--image,
.dialog-field--tabs {
    grid-column: 1 / -1;
}

.dialog-label {
    font-weight: 600;
    line-height: 1.2;
    color: var(--ui-kit-ink);
}

.dialog-body {
    padding: 0.35rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 0.45rem;
    overflow: auto;
    overflow-anchor: none;
}

.dialog-body.classic-dialog-grid {
    padding: 0.3rem;
    gap: 0.25rem 0.4rem;
}

.dialog-body label {
    margin: 0;
}

.dialog-input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.18rem 0.3rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-panel-surface);
    color: var(--ui-kit-ink);
}

.dialog-input::placeholder {
    color: var(--ui-kit-muted);
}

.dialog-input[readonly] {
    background: var(--ui-kit-shell-surface-emphasis);
}

.dialog-input:focus {
    outline: 1px solid var(--ui-kit-focus-ring);
    outline-offset: 0;
}

.dialog-visual {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.dialog-input--list,
.dialog-input--tree,
.dialog-input--grid,
.dialog-input--detail,
.dialog-input--snippet,
.dialog-input--summary {
    background: var(--ui-kit-shell-surface-muted);
    border: 1px solid var(--ui-kit-shell-border-strong);
}

.dialog-input--list {
    min-height: 12rem;
    font-family: var(--ui-kit-mono-font);
}

.dialog-input--tree {
    min-height: 12rem;
    font-family: var(--ui-kit-mono-font);
}

.dialog-input--grid {
    min-height: 8rem;
}

.dialog-input--detail {
    min-height: 9rem;
}

.dialog-input--snippet {
    min-height: 8rem;
}

.dialog-input--summary {
    min-height: 6rem;
}

.dialog-visual-pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--ui-kit-mono-font);
    color: inherit;
}

.dialog-tab-chip {
    display: inline-block;
    padding: 0.18rem 0.45rem;
    border: 1px solid var(--ui-kit-shell-border-strong);
    background: var(--ui-kit-shell-surface-muted);
    margin: 0 0.25rem 0.25rem 0;
}

.dialog-grid {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.dialog-grid-row {
    display: grid;
    grid-template-columns: minmax(7rem, 0.36fr) minmax(0, 1fr);
    gap: 0.35rem 0.55rem;
    align-items: start;
    min-width: 0;
}

.dialog-grid-key {
    font-weight: 600;
}

.dialog-grid-value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dialog-priority-workflow {
    display: grid;
    gap: 0.75rem;
    grid-column: 1 / -1;
}

.dialog-priority-center {
    display: grid;
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
    gap: 0.75rem;
}

.dialog-priority-panel {
    border: 1px solid var(--ui-kit-shell-border-strong);
    background: #f6f2ea;
    padding: 0.6rem;
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.dialog-priority-panel header {
    display: grid;
    gap: 0.18rem;
}

.dialog-priority-panel h3 {
    margin: 0;
    font-size: 0.98rem;
}

.dialog-priority-panel p {
    margin: 0;
    color: #4b4b4b;
}

.dialog-priority-matrix {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem 0.75rem;
}

.dialog-priority-field {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.dialog-priority-select,
.dialog-priority-listbox {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-panel-surface);
    color: var(--ui-kit-ink);
}

.dialog-priority-listbox {
    min-height: 15rem;
    font-family: var(--ui-kit-mono-font);
}

.dialog-priority-browse,
.dialog-priority-skill-choices {
    display: grid;
    gap: 0.55rem;
}

.dialog-priority-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
}

.dialog-priority-fact {
    display: grid;
    gap: 0.12rem;
    align-content: start;
}

.dialog-priority-fact-label,
.dialog-priority-attribute-label {
    font-weight: 600;
}

.dialog-priority-fact-value,
.dialog-priority-attribute-value {
    overflow-wrap: anywhere;
}

.dialog-priority-attributes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr));
    gap: 0.45rem;
}

.dialog-priority-attribute {
    display: grid;
    gap: 0.16rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid var(--ui-kit-shell-border-strong);
    border-radius: 0.7rem;
    background: linear-gradient(180deg, #fffdf6 0%, #f8f5ec 100%);
    align-content: start;
}

.dialog-priority-qualities {
    display: grid;
    gap: 0.25rem;
}

.dialog-priority-qualities ul {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.18rem;
}

.dialog-priority-callout {
    padding: 0.4rem 0.5rem;
    border: 1px solid #b9aa7a;
    background: #fff9e8;
    color: #5b4720;
}

@media (max-width: 900px) {
    .dialog-priority-center,
    .dialog-priority-matrix,
    .dialog-priority-detail-grid {
        grid-template-columns: 1fr;
    }

    .sr6-attribute-table {
        display: none;
    }

    .sr6-attribute-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.45rem;
    }

    .sr6-attribute-cell--name {
        grid-column: 1 / -1;
    }

    .sr6-attribute-stepper {
        width: 100%;
        grid-template-columns: 24px minmax(0, 1fr) 24px;
    }

    .sr6-attribute-cell[data-column]::before {
        content: attr(data-column);
        display: block;
        margin-bottom: 0.12rem;
        font-size: 0.64rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--ui-kit-muted);
    }

    .sr6-attribute-cell--metric {
        justify-self: start;
        text-align: left;
    }
}

.dialog-snippet {
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--ui-kit-shell-border-strong);
    background: var(--ui-kit-shell-surface-muted);
    white-space: pre-wrap;
}

.dialog-image-placeholder {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dialog-image-box {
    min-height: 8.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-kit-shell-border-strong);
    background: var(--ui-kit-shell-surface-muted);
}

.dialog-image-preview {
    display: block;
    max-width: 100%;
    max-height: 11rem;
    object-fit: contain;
    image-rendering: auto;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.28rem 0.35rem;
    border-top: 1px solid var(--ui-kit-shell-border-strong);
    background: var(--ui-kit-shell-surface-muted);
}

.action-btn.primary {
    background: var(--ui-kit-shell-surface-emphasis);
    border-color: var(--ui-kit-focus-ring);
}

.virtual-list {
    overflow: auto;
    min-height: 0;
}

.virtual-list > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.virtual-list > ul > li {
    margin: 0;
}

.navigator-list,
.tab-grid,
.action-grid,
.mini-grid {
    max-height: 10rem;
}

.navigator-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem;
    align-items: center;
    margin-bottom: 0.15rem;
}

.navigator .compact-close {
    min-width: 24px;
    min-height: 24px;
    padding: 0.12rem 0.35rem;
    line-height: 1;
    font-weight: 700;
}

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

    .app-chrome {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .workspace-layout {
        grid-template-columns: 1fr;
    }

    .workspace-layout--with-left-pane,
    .workspace-layout--without-left-pane {
        grid-template-columns: 1fr;
    }

    .left-pane {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }

    .status-strip {
        grid-template-columns: 1fr;
    }

    .flagship-fact-grid,
    .flagship-watchouts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .desktop-shell-topline {
        grid-template-columns: 1fr;
    }

    .desktop-shell-readiness {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .flagship-marquee {
        padding: 0.95rem;
    }

    .flagship-fact-grid,
    .flagship-watchouts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    html,
    body {
        font-size: 13px;
    }

    .menu-bar,
    .tool-strip,
    .tab-strip-buttons,
    .status-strip {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .desktop-shell-readiness,
    .summary-grid,
    .browse-results-shell,
    .dialog-body,
    .dialog-field,
    .dialog-grid-row,
    .dialog-origin-story-grid,
    .dialog-origin-life-grid,
    .dialog-origin-advanced-grid,
    .dialog-origin-summary-strip {
        grid-template-columns: 1fr;
    }

    .desktop-shell-title h1 {
        white-space: normal;
    }

    .left-pane {
        max-height: none;
    }

    .navigator-list,
    .tab-grid,
    .action-grid,
    .mini-grid {
        max-height: none;
    }
}

.public-preview,
.browser-preview-shell {
    min-height: 100vh;
    box-sizing: border-box;
    background:
        radial-gradient(circle at top right, rgba(191, 219, 254, 0.34) 0%, transparent 28%),
        linear-gradient(180deg, #f5f0e6 0%, #f2f6fb 16%, #edf2f7 100%);
    color: #111827;
}

.public-preview {
    display: grid;
    gap: 2rem;
    padding: 1.4rem clamp(1rem, 3vw, 2.4rem) 2rem;
}

.public-hero,
.browser-preview-banner,
.browser-preview-status-grid,
.browser-preview-frame,
.content-band,
.public-footer {
    width: min(1180px, 100%);
    margin: 0 auto;
    box-sizing: border-box;
    min-width: 0;
}

.public-hero,
.browser-preview-banner,
.browser-preview-status-card,
.browser-preview-frame,
.content-band,
.public-footer {
    border: 1px solid rgba(71, 85, 105, 0.2);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.public-hero,
.browser-preview-banner,
.browser-preview-frame,
.content-band,
.public-footer {
    background: rgba(255, 252, 247, 0.94);
    backdrop-filter: blur(10px);
}

.public-hero {
    padding: 1.15rem clamp(1rem, 3vw, 1.8rem) 1.35rem;
    border-radius: 28px;
    display: grid;
    gap: 1.35rem;
}

.public-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #f8fafc;
    background: linear-gradient(135deg, #8d5f13 0%, #d6a646 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.brand-copy {
    display: grid;
    gap: 0.1rem;
}

.brand-copy strong {
    font-size: 1rem;
}

.brand-copy span,
.section-kicker,
.hero-kicker,
.eyebrow,
.browser-preview-kicker,
.browser-preview-status-label,
.browser-preview-frame-kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8d5f13;
}

.public-nav-links,
.browser-preview-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.public-nav-links a,
.browser-preview-actions a,
.tour-card a {
    color: #173a6c;
    text-decoration: none;
    font-weight: 700;
}

.public-nav-links a:hover,
.browser-preview-actions a:hover,
.tour-card a:hover {
    text-decoration: underline;
}

.nav-cta,
.primary-link,
.secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.nav-cta,
.primary-link {
    color: #f8fafc;
    background: linear-gradient(135deg, #173a6c 0%, #2c5d93 100%);
    box-shadow: 0 12px 26px rgba(23, 58, 108, 0.18);
}

.secondary-link {
    color: #173a6c;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(23, 58, 108, 0.18);
}

.nav-cta:hover,
.primary-link:hover,
.secondary-link:hover {
    transform: translateY(-1px);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.95fr);
    gap: 1.2rem;
}

.hero-copy,
.hero-panel,
.band-heading,
.tour-card,
.boundary-card {
    display: grid;
    gap: 0.75rem;
}

.hero-copy h1,
.browser-preview-banner-copy h1,
.band-heading h2,
.browser-preview-frame-header h2 {
    margin: 0;
    line-height: 1.04;
    font-family: "Avenir Next Condensed", "Trebuchet MS", "Segoe UI", sans-serif;
}

.hero-copy h1,
.browser-preview-banner-copy h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.band-heading h2,
.browser-preview-frame-header h2 {
    font-size: clamp(1.45rem, 3vw, 2.35rem);
}

.hero-summary,
.browser-preview-banner-copy p,
.band-heading p,
.tour-card p,
.boundary-card li,
.browser-preview-status-card p,
.browser-preview-frame-header p,
.public-footer p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #334155;
}

.hero-actions {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.hero-facts,
.route-pills {
    display: grid;
    gap: 0.7rem;
}

.hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.hero-facts div,
.hero-panel,
.tour-card,
.boundary-card,
.browser-preview-status-card {
    padding: 0.95rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(71, 85, 105, 0.16);
    background: rgba(255, 255, 255, 0.78);
    box-sizing: border-box;
    min-width: 0;
}

.hero-facts dt {
    margin: 0 0 0.28rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8d5f13;
    font-weight: 700;
}

.hero-facts dd {
    margin: 0;
    color: #334155;
    line-height: 1.5;
}

.promise-list,
.boundary-card ul {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.45rem;
    color: #1f2937;
}

.route-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-pills span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.7rem;
    border-radius: 14px;
    background: rgba(23, 58, 108, 0.06);
    color: #173a6c;
}

.content-band {
    padding: 1.2rem clamp(1rem, 3vw, 1.6rem);
    border-radius: 24px;
}

.tour-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.95rem;
}

.boundary-grid,
.proof-grid,
.browser-preview-status-grid {
    display: grid;
    gap: 0.95rem;
}

.boundary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.boundary-card-good {
    background: linear-gradient(180deg, rgba(237, 247, 240, 0.95) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.boundary-card-caution {
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.96) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.public-footer {
    padding: 0.95rem 1.1rem;
    border-radius: 20px;
    text-align: center;
}

.browser-preview-shell {
    display: grid;
    gap: 1rem;
    padding: 1.2rem clamp(0.9rem, 3vw, 2rem) 2rem;
    min-width: 0;
}

.browser-preview-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1.05rem 1.15rem;
    border-radius: 24px;
}

.browser-preview-banner-copy,
.browser-preview-frame-header {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.browser-preview-boundary {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    box-sizing: border-box;
    min-width: 0;
}

.browser-preview-boundary div {
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.16);
    background: rgba(255, 253, 249, 0.92);
    color: #334155;
    line-height: 1.55;
    box-sizing: border-box;
    min-width: 0;
}

.browser-preview-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.browser-preview-status-card {
    background: linear-gradient(180deg, rgba(255, 249, 235, 0.94) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.browser-preview-status-card strong {
    font-size: 1.1rem;
    line-height: 1.35;
    color: #111827;
}

.browser-preview-frame {
    padding: 1rem;
    border-radius: 24px;
    display: grid;
    gap: 0.95rem;
}

.dialog-origin-shell {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.85rem;
}

.dialog-origin-panel,
.dialog-origin-subpanel {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--ui-kit-shell-border-strong);
    background: var(--ui-kit-shell-surface-emphasis);
    color: var(--ui-kit-ink);
}

.dialog-origin-panel h3,
.dialog-origin-subpanel h4 {
    margin: 0;
    color: var(--ui-kit-ink);
}

.dialog-origin-panel > header p,
.dialog-origin-subpanel > header p,
.dialog-origin-panel .dialog-note,
.dialog-origin-subpanel .dialog-note {
    margin: 0;
    color: var(--ui-kit-muted);
}

.dialog-origin-story-grid,
.dialog-origin-life-grid,
.dialog-origin-advanced-grid,
.dialog-origin-review-grid {
    display: grid;
    gap: 0.75rem;
}

.dialog-origin-story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dialog-origin-life-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dialog-origin-advanced-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dialog-origin-field {
    display: grid;
    gap: 0.25rem;
}

.dialog-origin-advanced-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-kit-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-align: left;
}

.dialog-origin-advanced-toggle:focus-visible {
    outline: 2px solid var(--ui-kit-accent, var(--ui-kit-shell-border-strong));
    outline-offset: 2px;
}

.dialog-origin-advanced-content {
    display: grid;
    gap: 0.75rem;
}

.dialog-origin-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.dialog-origin-summary-card {
    display: grid;
    gap: 0.18rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-panel-surface);
    color: var(--ui-kit-ink);
}

.dialog-origin-summary-label {
    width: fit-content;
    padding: 0.12rem 0.42rem;
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-shell-surface-emphasis);
    color: var(--ui-kit-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dialog-origin-summary-card strong {
    line-height: 1.4;
    color: var(--ui-kit-ink-strong);
}

.dialog-origin-preview,
.dialog-origin-readonly {
    border: 1px solid var(--ui-kit-shell-border);
    background: var(--ui-kit-panel-surface);
    color: var(--ui-kit-ink);
    padding: 0.7rem 0.8rem;
    min-height: 7rem;
    overflow-wrap: anywhere;
}

.dialog-origin-preview--book {
    background: var(--ui-kit-shell-surface-emphasis);
}

.dialog-origin-narrative,
.dialog-origin-book,
.dialog-narrative {
    display: grid;
    gap: 0.72rem;
    max-width: 72ch;
}

.dialog-origin-preview :is(p, pre, strong, span, li, em),
.dialog-origin-readonly :is(p, pre, strong, span, li, em) {
    color: inherit;
}

.dialog-origin-narrative p,
.dialog-origin-book p,
.dialog-narrative p {
    margin: 0;
    color: inherit;
    line-height: 1.7;
    font-size: 0.98rem;
    font-family: var(--ui-kit-sans-font, var(--ui-kit-classic-font));
}

.dialog-origin-preview--book p,
.dialog-origin-readonly p {
    margin: 0 0 0.55rem;
    line-height: 1.55;
    color: inherit;
}

.dialog-origin-preview .dialog-visual-pre,
.dialog-origin-readonly .dialog-visual-pre {
    margin: 0;
    color: inherit;
    background: transparent;
}

.dialog-origin-review-grid {
    grid-template-columns: 1fr;
}

.dialog-origin-review-stack {
    display: grid;
    gap: 0.75rem;
}

.dialog-origin-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.dialog-origin-textarea {
    min-height: 5.5rem;
}

@media (max-width: 1080px) {
    .hero-grid,
    .browser-preview-banner,
    .tour-grid,
    .proof-grid,
    .hero-facts,
    .route-pills,
    .browser-preview-status-grid,
    .browser-preview-boundary,
    .dialog-origin-advanced-grid,
    .dialog-origin-review-grid,
    .dialog-origin-support-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .desktop-dialog {
        width: min(42rem, calc(100vw - 1.25rem));
        max-width: calc(100vw - 1.25rem);
        max-height: calc(100vh - 1.25rem);
    }

    .public-preview,
    .browser-preview-shell {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .public-hero,
    .browser-preview-banner,
    .content-band,
    .browser-preview-frame,
    .public-footer {
        border-radius: 18px;
    }

    .public-nav,
    .public-nav-links,
    .browser-preview-actions,
    .hero-actions {
        align-items: stretch;
    }

    .public-nav-links a,
    .browser-preview-actions a,
    .nav-cta,
    .primary-link,
    .secondary-link {
        width: 100%;
        justify-content: center;
    }

    .boundary-grid {
        grid-template-columns: 1fr;
    }

    .dialog-origin-story-grid,
    .dialog-origin-life-grid,
    .dialog-origin-summary-strip {
        grid-template-columns: 1fr;
    }
}

.dialog-field--roster-hierarchy .dialog-label::after {
    content: " preview";
    margin-left: 0.35rem;
    color: #5f6b57;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dialog-visual--roster-hierarchy {
    border: 1px solid rgba(95, 107, 87, 0.28);
    border-radius: 0.45rem;
    background:
        linear-gradient(135deg, rgba(198, 185, 154, 0.13), rgba(255, 255, 255, 0.72)),
        var(--ui-kit-shell-surface-muted);
    padding: 0.45rem;
}

.dialog-roster-tree,
.dialog-roster-list {
    display: grid;
    gap: 0.18rem;
    font-family: var(--ui-kit-mono-font);
}

.dialog-roster-line {
    min-height: 1.65rem;
    display: flex;
    align-items: center;
    padding: 0.18rem 0.35rem;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    white-space: pre-wrap;
}

.dialog-roster-keyboard-status {
    border: 1px solid rgba(86, 117, 74, 0.24);
    border-radius: 0.35rem;
    background: rgba(137, 224, 179, 0.14);
    color: #33412b;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.22rem 0.42rem;
}

.dialog-roster-keyboard-hint {
    border: 1px dashed rgba(95, 107, 87, 0.22);
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.52);
    color: #4d5a42;
    font-size: 0.7rem;
    font-weight: 650;
    padding: 0.2rem 0.42rem;
}

.dialog-roster-line--root {
    color: #27301f;
    background: rgba(198, 185, 154, 0.16);
    font-weight: 800;
}

.dialog-roster-line--branch {
    background: rgba(255, 255, 255, 0.62);
}

.dialog-roster-line[data-roster-line-kind="directory"] {
    font-weight: 760;
}

.dialog-roster-line[data-roster-folder-scope="system"] {
    color: #516046;
    background:
        linear-gradient(90deg, rgba(118, 174, 202, 0.12), rgba(255, 255, 255, 0.64)),
        rgba(255, 255, 255, 0.58);
}

.dialog-roster-line[data-roster-folder-scope="system"]::before {
    content: "bucket";
    margin-right: 0.42rem;
    border: 1px solid rgba(118, 174, 202, 0.32);
    border-radius: 999px;
    padding: 0.05rem 0.34rem;
    color: #365469;
    font-family: var(--ui-kit-sans-font);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dialog-roster-line[data-roster-folder-scope="custom"] {
    color: #2f3f2f;
    background:
        linear-gradient(90deg, rgba(143, 240, 188, 0.18), rgba(255, 212, 111, 0.12)),
        rgba(255, 255, 255, 0.72);
}

.dialog-roster-line[data-roster-folder-scope="custom"]::before {
    content: "folder";
    margin-right: 0.42rem;
    border: 1px solid rgba(143, 240, 188, 0.46);
    border-radius: 999px;
    padding: 0.05rem 0.34rem;
    color: #2f6042;
    font-family: var(--ui-kit-sans-font);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dialog-roster-line[data-roster-line-kind="runner"] {
    color: #26311f;
}

.dialog-roster-line[data-roster-line-kind="watched-file"],
.dialog-roster-line[data-roster-line-kind="folder-shortcut"] {
    color: #495569;
    font-style: italic;
}

.dialog-roster-line.is-draggable {
    cursor: grab;
    border-color: rgba(95, 107, 87, 0.18);
}

.dialog-roster-line.is-draggable::before {
    content: "⋮⋮";
    margin-right: 0.45rem;
    color: #5f6b57;
    letter-spacing: -0.12em;
}

.dialog-roster-line.is-drop-target {
    border-color: rgba(95, 107, 87, 0.36);
    background:
        linear-gradient(90deg, rgba(137, 224, 179, 0.18), rgba(255, 255, 255, 0.68)),
        rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(137, 224, 179, 0.18);
}

.dialog-roster-line.is-drop-target::after {
    content: "drop directory";
    margin-left: auto;
    border: 1px solid rgba(95, 107, 87, 0.28);
    border-radius: 999px;
    padding: 0.08rem 0.4rem;
    color: #4d5a42;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dialog-roster-line.is-drag-source {
    border-color: rgba(86, 117, 74, 0.7);
    background:
        linear-gradient(90deg, rgba(95, 107, 87, 0.22), rgba(137, 224, 179, 0.2)),
        rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 2px rgba(137, 224, 179, 0.2);
}

.dialog-roster-line.is-drag-source::after {
    content: "source";
    margin-left: auto;
    border: 1px solid rgba(86, 117, 74, 0.36);
    border-radius: 999px;
    padding: 0.08rem 0.4rem;
    color: #33412b;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dialog-roster-line.is-keyboard-source::after {
    content: "keyboard source";
}

.dialog-roster-line.is-mouse-source::after {
    content: "mouse source";
}

.dialog-roster-line:focus-visible {
    outline: 2px solid rgba(86, 117, 74, 0.72);
    outline-offset: 2px;
}

.dialog-roster-line.is-selected {
    border-color: rgba(95, 107, 87, 0.55);
    background: rgba(137, 224, 179, 0.13);
}

/* Character roster hierarchy: app-grade organization inside the classic dialog shell. */
.dialog-field--roster-hierarchy {
    gap: 0.35rem;
}

.dialog-visual--roster-hierarchy {
    display: grid;
    gap: 0.45rem;
    padding: 0.55rem;
    border: 1px solid rgba(105, 240, 182, 0.28);
    background:
        radial-gradient(circle at 12% 0%, rgba(105, 240, 182, 0.14), transparent 18rem),
        linear-gradient(145deg, rgba(15, 32, 28, 0.94), rgba(8, 17, 15, 0.82));
    color: #f3f0df;
    box-shadow: inset 0 1px 0 rgba(255, 247, 215, 0.08), 0 18px 42px rgba(0, 0, 0, 0.24);
}

.dialog-roster-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(240, 199, 102, 0.24);
    background: linear-gradient(135deg, rgba(105, 240, 182, 0.14), rgba(240, 199, 102, 0.12));
}

.dialog-roster-toolbar strong {
    display: block;
    color: #fff7d7;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.dialog-roster-toolbar p {
    max-width: 58rem;
    margin: 0.18rem 0 0;
    color: #aebdb3;
    line-height: 1.35;
}

.dialog-roster-mode {
    flex: 0 0 auto;
    border: 1px solid rgba(105, 240, 182, 0.36);
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    background: rgba(105, 240, 182, 0.12);
    color: #dcffe8;
    font-weight: 700;
    white-space: nowrap;
}

.dialog-roster-tree,
.dialog-roster-list {
    display: grid;
    gap: 0.22rem;
    padding: 0.35rem;
    border: 1px solid rgba(169, 225, 190, 0.2);
    background: rgba(5, 12, 10, 0.48);
    max-height: min(34rem, 58vh);
    overflow: auto;
}

.dialog-roster-keyboard-hint,
.dialog-roster-keyboard-status {
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(240, 199, 102, 0.22);
    background: rgba(240, 199, 102, 0.09);
    color: #f3f0df;
    line-height: 1.35;
}

.dialog-roster-keyboard-status {
    border-color: rgba(105, 240, 182, 0.34);
    background: rgba(105, 240, 182, 0.12);
    color: #dcffe8;
}

.dialog-roster-line {
    position: relative;
    min-height: 1.9rem;
    padding: 0.32rem 0.5rem 0.32rem 1.75rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.035);
    color: #f3f0df;
    line-height: 1.25;
    white-space: pre-wrap;
}

.dialog-roster-line::before {
    position: absolute;
    left: 0.52rem;
    top: 0.32rem;
    color: #f0c766;
    content: "-";
}

.dialog-roster-line--root {
    border-color: rgba(240, 199, 102, 0.26);
    background: rgba(240, 199, 102, 0.1);
    color: #fff7d7;
    font-weight: 700;
}

.dialog-roster-line--root::before {
    content: "#";
}

.dialog-roster-line--branch::before,
.dialog-roster-line.is-drop-target::before {
    content: ">";
    color: #69f0b6;
}

.dialog-roster-line--leaf::before {
    content: "*";
}

.dialog-roster-line.is-draggable {
    cursor: grab;
}

.dialog-roster-line.is-draggable:active {
    cursor: grabbing;
}

.dialog-roster-line.is-drop-target {
    border-color: rgba(105, 240, 182, 0.32);
    background: linear-gradient(135deg, rgba(105, 240, 182, 0.13), rgba(255, 255, 255, 0.035));
}

.dialog-roster-line.is-selected,
.dialog-roster-line.is-drag-source,
.dialog-roster-line.is-keyboard-source,
.dialog-roster-line.is-mouse-source {
    border-color: rgba(240, 199, 102, 0.62);
    background: linear-gradient(135deg, rgba(240, 199, 102, 0.22), rgba(105, 240, 182, 0.1));
    box-shadow: 0 0 0 2px rgba(240, 199, 102, 0.14);
}

.dialog-roster-line:focus-visible {
    outline: 3px solid rgba(240, 199, 102, 0.76);
    outline-offset: 2px;
    border-color: rgba(240, 199, 102, 0.68);
}

@media (max-width: 760px) {
    .dialog-roster-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .dialog-roster-mode {
        align-self: flex-start;
    }
}

/* Chummer web app theme polish: richer desktop chrome without losing classic-client affordances. */
:root {
    --chummer-theme-void: #090b0f;
    --chummer-theme-slate: #0b1117;
    --chummer-theme-panel: #121922;
    --chummer-theme-paper: #fff8e8;
    --chummer-theme-gold: #ffd46f;
    --chummer-theme-gold-deep: #b9812f;
    --chummer-theme-mint: #8ff0bc;
    --chummer-theme-cyan: #76aeca;
    --chummer-theme-line: rgba(255, 212, 111, 0.26);
    --ui-kit-shell-surface: #cfc8b8;
    --ui-kit-shell-surface-muted: #e5dfd0;
    --ui-kit-shell-surface-emphasis: #fbf6e8;
    --ui-kit-shell-border: #7e7565;
    --ui-kit-shell-border-strong: #4d473d;
    --ui-kit-button-surface: #efe5cf;
    --ui-kit-focus-ring: #2c6f80;
    --ui-kit-ink: #111111;
    --ui-kit-ink-strong: #111827;
}

.app-frame {
    background:
        radial-gradient(circle at 88% 8%, rgba(244, 207, 115, 0.22), transparent 28%),
        radial-gradient(circle at 12% 18%, rgba(110, 165, 200, 0.18), transparent 32%),
        linear-gradient(180deg, #151b24 0%, #242a31 17%, #d8d0bf 17.2%, #ede7d8 100%);
}

.app-chrome {
    background:
        linear-gradient(90deg, rgba(137, 224, 179, 0.08), transparent 34%, rgba(244, 207, 115, 0.1)),
        linear-gradient(180deg, #151c27 0%, #0a0d12 100%);
    border-bottom: 1px solid rgba(244, 207, 115, 0.38);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    color: var(--chummer-theme-paper);
}

.app-title {
    color: #fff7df;
    text-shadow: 0 0 18px rgba(244, 207, 115, 0.18);
}

.app-subtitle {
    color: rgba(244, 239, 228, 0.66);
}

.menu-bar.classic-menu-bar,
.tool-strip.classic-tool-strip {
    background:
        linear-gradient(180deg, rgba(255, 250, 235, 0.84), rgba(206, 195, 171, 0.92)),
        var(--ui-kit-shell-surface);
    border-color: rgba(77, 71, 61, 0.75);
}

.menu-btn.active,
.tool-btn.selected,
.mdi-doc.active {
    border-color: #1f5f6d;
    background:
        linear-gradient(180deg, rgba(137, 224, 179, 0.24), rgba(255, 255, 255, 0.72));
    color: #0b1718;
}

.dialog-visual--roster-hierarchy,
.dialog-roster-toolbar,
.dialog-roster-tree {
    border-color: rgba(255, 212, 111, 0.34);
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 212, 111, 0.16), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(143, 240, 188, 0.08), transparent 38%),
        linear-gradient(135deg, rgba(8, 11, 16, 0.96), rgba(18, 25, 34, 0.92));
    color: var(--chummer-theme-paper);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.28);
}

.dialog-roster-toolbar strong,
.dialog-roster-line strong {
    color: #fff1bd;
}

.dialog-roster-mode {
    border-color: rgba(143, 240, 188, 0.46);
    background:
        linear-gradient(135deg, rgba(143, 240, 188, 0.18), rgba(255, 212, 111, 0.08)),
        rgba(8, 11, 16, 0.52);
    color: #d9ffe9;
}

.dialog-roster-mode[data-roster-hierarchy-mode="keyboard"],
.dialog-roster-mode[data-roster-hierarchy-mode="mouse"] {
    border-color: rgba(255, 212, 111, 0.62);
    background:
        linear-gradient(135deg, rgba(255, 212, 111, 0.22), rgba(143, 240, 188, 0.12)),
        rgba(8, 11, 16, 0.62);
    color: #fff4c8;
    box-shadow: 0 0 0 3px rgba(255, 212, 111, 0.12);
}

.dialog-roster-line:focus-visible,
.dialog-roster-line[data-drop-target="true"] {
    outline: 2px solid rgba(143, 240, 188, 0.72);
    outline-offset: 2px;
    background: rgba(143, 240, 188, 0.12);
}

.dialog-roster-line.is-drop-target {
    border-color: rgba(143, 240, 188, 0.52);
    background:
        linear-gradient(135deg, rgba(143, 240, 188, 0.16), rgba(255, 212, 111, 0.07)),
        rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 3px rgba(143, 240, 188, 0.16);
}

.dialog-roster-line.is-selected,
.dialog-roster-line.is-drag-source,
.dialog-roster-line.is-keyboard-source,
.dialog-roster-line.is-mouse-source {
    border-color: rgba(255, 212, 111, 0.66);
    background:
        linear-gradient(135deg, rgba(255, 212, 111, 0.22), rgba(143, 240, 188, 0.1)),
        rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 3px rgba(255, 212, 111, 0.13);
}

.dialog-roster-keyboard-status {
    border-color: rgba(143, 240, 188, 0.46);
    background:
        linear-gradient(135deg, rgba(143, 240, 188, 0.16), rgba(118, 174, 202, 0.1)),
        rgba(8, 11, 16, 0.62);
    color: #e2ffed;
}

.dialog-roster-keyboard-status::before {
    content: "roster pending organization changes";
    display: inline-flex;
    margin-right: 0.45rem;
    color: #ffd46f;
    font-weight: 850;
    letter-spacing: 0.02em;
}

/* Route-aware status strip chrome: keep route role visible inside the desktop client frame. */
.classic-status-strip [data-status-route-family] {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.12rem 0.5rem;
    border: 1px solid rgba(255, 212, 111, 0.36);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 212, 111, 0.14), rgba(143, 240, 188, 0.08)),
        rgba(8, 11, 16, 0.42);
    color: #fff4c8;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.classic-status-strip [data-status-route-family="chummer_app"] {
    border-color: rgba(143, 240, 188, 0.48);
    color: #e2ffed;
}

.classic-status-strip [data-status-route-family="workbench_compat"] {
    border-color: rgba(118, 174, 202, 0.48);
    color: #d8efff;
}

@media (prefers-contrast: more) {
    .classic-status-strip [data-status-route-family] {
        border-color: #fff8e8;
        background: #06090c;
        color: #fff8e8;
    }
}