:root {
    color-scheme: dark;
    --bg: #0a0b0a;
    --rail: #0d100e;
    --surface: #101210;
    --surface-2: #161b17;
    --line: #252b26;
    --line-hot: #3b463d;
    --text: #f0f3ef;
    --muted: #818b83;
    --accent: #79e89e;
    --accent-soft: rgba(121, 232, 158, .1);
    --rail-width: 238px;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; }
html { background: var(--bg); }
body {
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font: 13px/1.45 ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    -webkit-font-smoothing: antialiased;
}

a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.app-shell { height: 100%; display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); }
.app-rail { min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 12px 14px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--rail); scrollbar-width: thin; }
.rail-head { min-height: 48px; padding: 0 4px 12px; display: grid; grid-template-columns: minmax(0,1fr) 28px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.rail-toggle { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 28px; height: 28px; padding: 4px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.rail-toggle:hover { color: var(--text); border-color: var(--line-hot); background: var(--surface); }
.rail-toggle svg { width: 18px; height: 18px; }
.rail-head .language-switch { grid-column: 1 / -1; justify-self: start; }
.brand { min-width: 0; display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.language-switch { flex: 0 0 auto; padding: 2px; display: flex; border: 1px solid var(--line); border-radius: 7px; background: #0a0d0b; }
.language-switch a { min-width: 26px; padding: 4px 5px; border-radius: 5px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-align: center; text-decoration: none; }
.language-switch a:hover { color: var(--text); }
.language-switch a.is-active { background: #1c231e; color: var(--accent); }
.brand-mark { width: 30px; height: 30px; display: grid; place-content: center; gap: 3px; border: 1px solid var(--line-hot); border-radius: 7px; background: #121713; }
.brand-mark i { width: 12px; height: 2px; display: block; background: var(--accent); }
.brand-mark i:nth-child(2) { width: 8px; }
.brand-mark i:nth-child(3) { width: 4px; }
.brand-copy { white-space: nowrap; }
.brand-copy strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.app-tabs { padding-top: 18px; display: grid; gap: 5px; }
.app-tab { min-width: 0; min-height: 58px; padding: 9px 10px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); text-decoration: none; transition: color .12s ease, border-color .12s ease, background .12s ease; }
.app-tab svg { width: 18px; height: 18px; justify-self: center; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.app-tab > span { min-width: 0; display: grid; }
.app-tab strong { overflow: hidden; color: #c6cdc7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-tab small { overflow: hidden; margin-top: 1px; color: #667068; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.app-tab:hover { border-color: var(--line); background: var(--surface); color: #b9c2ba; }
.app-tab.is-active { border-color: #314138; background: var(--accent-soft); color: var(--accent); }
.app-tab.is-active strong { color: var(--text); }
.app-tab.is-active small { color: #91a496; }
.rail-foot { min-width: 0; margin-top: auto; padding: 12px 8px 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); font-size: 11px; }
.rail-foot a { min-width: 0; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.rail-foot a svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.rail-foot a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-foot a:hover { text-decoration: underline; }
.rail-account { min-width: 0; overflow: hidden; color: var(--accent); text-overflow: ellipsis; white-space: nowrap; }
.rail-login { flex-shrink: 0; margin-left: auto; color: var(--muted); font-size: 10px; }
.workspace { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.workspace > .cc-notifications { flex: 0 0 auto; align-self: center; width: min(1440px, calc(100% - 28px)); height: auto; min-height: 0; max-height: min(200px, 26vh); margin: 12px 0 0; padding: 0; overflow: auto; }
.workspace > .frame-stack, .workspace > .site-unavailable { flex: 1 1 0; min-height: 0; }
.frame-stack { min-width: 0; min-height: 0; position: relative; background: var(--bg); }
.tool-frame { width: 100%; height: 100%; display: none; border: 0; background: var(--bg); }
.tool-frame.is-active { display: block; }
.frame-loader { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--bg); color: var(--muted); pointer-events: none; transition: opacity .12s linear; }
.frame-loader span { width: 22px; height: 22px; border: 1px solid var(--line-hot); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.frame-loader small { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.frame-loader.is-hidden { opacity: 0; }
.site-unavailable { grid-row: 1 / -1; display: grid; place-items: center; padding: 24px; }
.site-unavailable > div { width: min(420px, 100%); padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: center; }
.site-unavailable p { margin: 6px 0 0; color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 781px) {
    :root[data-rail-collapsed="1"] { --rail-width: 68px; }
    [data-rail-collapsed="1"] .app-rail { padding: 14px 8px; }
    [data-rail-collapsed="1"] .rail-head { display: flex; flex-direction: column; padding: 0 0 12px; }
    [data-rail-collapsed="1"] .brand, [data-rail-collapsed="1"] .app-tab > span, [data-rail-collapsed="1"] .rail-foot a span { display: none; }
    [data-rail-collapsed="1"] .rail-toggle { order: -1; }
    [data-rail-collapsed="1"] .rail-toggle svg { transform: scaleX(-1); }
    [data-rail-collapsed="1"] .language-switch { gap: 0; }
    [data-rail-collapsed="1"] .language-switch a { min-width: 21px; padding: 4px 2px; font-size: 8px; }
    [data-rail-collapsed="1"] .app-tab { min-height: 44px; display: grid; grid-template-columns: 1fr; padding: 10px 0; }
    [data-rail-collapsed="1"] .rail-foot { flex-direction: column; padding: 12px 0 0; }
    [data-rail-collapsed="1"] .rail-foot a { margin: 0; padding: 5px; }
}

@media (max-width: 780px) {
    :root { --mobile-nav-height: 96px; }
    .app-shell { display: block; padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
    .app-rail { width: 100%; height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding: 6px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left)); position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: block; border: 0; border-top: 1px solid var(--line); }
    .brand { display: none; }
    .rail-foot { height: 25px; margin: 0; padding: 0 8px; }
    .rail-head { min-height: 0; padding: 0; position: absolute; right: 8px; bottom: calc(3px + env(safe-area-inset-bottom)); display: flex; gap: 6px; border: 0; }
    .rail-head .language-switch { padding: 0; }
    .rail-toggle { width: 24px; height: 24px; padding: 3px; }
    .rail-foot { max-width: calc(100% - 104px); }
    .language-switch { background: rgba(10, 13, 11, .94); }
    .app-tabs { height: 64px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 2px; }
    .app-tab { min-height: 52px; padding: 5px 3px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border-radius: 7px; }
    .app-tab svg { width: 19px; height: 19px; }
    .app-tab > span { display: block; }
    .app-tab strong { display: block; font-size: 8px; text-align: center; text-transform: uppercase; }
    .app-tab small { display: none; }
    .workspace { height: calc(100%); }
    .workspace > .cc-notifications { width: calc(100% - 16px); max-height: min(240px, 36vh); margin-top: 8px; }
    :root[data-rail-collapsed="1"] { --mobile-nav-height: 72px; }
    [data-rail-collapsed="1"] .app-tabs { height: 40px; }
    [data-rail-collapsed="1"] .app-tab { min-height: 34px; }
    [data-rail-collapsed="1"] .app-tab > span { display: none; }
}

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