:root {
    color-scheme: dark;
    --bg: #0d0d0d;
    --panel: #151515;
    --panel-hover: #222;
    --paper: #101010;
    --surface: #1b1b1b;
    --surface-raised: #202020;
    --ink: #ededed;
    --muted: #929292;
    --line: #292929;
    --accent: #f1f1f1;
    --success: #5da875;
    --danger: #e16e67;
    --brand-icon-size: 22px;
    --brand-icon-background: #0d0d0d;
    --brand-icon-radius: 24%;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
}

* { box-sizing: border-box; scrollbar-color: #3a3a3a transparent; scrollbar-width: thin; }

html, body {
    width: 100%; max-width: 100%; height: 100%; min-height: 0;
    margin: 0; overflow: hidden; overflow-x: clip;
    overscroll-behavior-x: none;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.portrait-lock { display: none; }
.portrait-lock-phone {
    position: relative; width: 34px; height: 56px;
    border: 2px solid #aaa; border-radius: 8px;
}
.portrait-lock-phone::after {
    content: ""; position: absolute; left: 50%; bottom: 4px;
    width: 4px; height: 4px; border-radius: 50%;
    background: #777; transform: translateX(-50%);
}
.refresh-cover {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    background: #0d0d0d; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.refresh-cover span {
    width: 11px; height: 11px; border: 2px solid #3b3b3b; border-top-color: #bcbcb7;
    border-radius: 50%;
}
body.mobile-refreshing .refresh-cover {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .12s ease;
}
body.mobile-refreshing:not(.mobile-refresh-ready) .refresh-cover span {
    animation: refresh-spin .7s linear infinite;
}
body.mobile-refresh-ready .refresh-cover { opacity: 0; }

.login {
    min-height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    background: radial-gradient(circle at 50% 34%, #202020 0, #111 23rem, #0b0b0b 52rem);
    animation: fade-in .45s ease both;
}

.login-mark { width: 52px; height: 52px; margin-bottom: 24px; color: #f1f1f1; }
.login-mark svg, .brand-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.login h1 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.login p { margin: 10px 0 30px; color: var(--muted); font-size: 14px; }
.login form { display: grid; width: min(360px, calc(100vw - 40px)); gap: 9px; }
.login label { font-size: 12px; color: var(--muted); }
.login input {
    height: 48px; border: 1px solid #353535; border-radius: 10px; background: #191919;
    padding: 0 14px; outline: none; transition: border-color .16s, box-shadow .16s;
}
.login input:focus { border-color: #707070; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.login button {
    height: 48px; margin-top: 4px; border: 0; border-radius: 10px; background: var(--accent);
    color: #111; cursor: pointer; font-weight: 600;
}
.form-error { min-height: 18px; color: var(--danger); text-align: center; font-size: 12px; }

.shell {
    width: 100%; height: var(--app-height, 100dvh); min-height: 0; overflow: hidden;
    display: grid;
    grid-template-columns: clamp(286px, 21vw, 340px) minmax(0, 1fr);
    background: var(--bg);
}
.shell.settings-mode { grid-template-columns: minmax(0, 1fr); }
.shell.settings-mode > .sidebar,
.shell.settings-mode > .sidebar-backdrop { display: none; }
.shell.settings-mode .mobile-menu { display: none; }
.sidebar {
    min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel);
    position: relative; z-index: 20;
}
.sidebar::after {
    content: ""; position: absolute; z-index: 2; top: 58px; right: 0; bottom: 0;
    width: 1px; background: var(--line); pointer-events: none;
}
.brand {
    height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 17px;
    border-bottom: 1px solid var(--line);
    background-image: linear-gradient(
        90deg,
        rgba(36, 98, 57, .28) 0%,
        rgba(34, 88, 53, .24) 18%,
        rgba(30, 72, 45, .18) 38%,
        rgba(26, 56, 38, .12) 58%,
        rgba(22, 39, 29, .06) 78%,
        rgba(21, 21, 21, 0) 100%
    );
    background-color: var(--panel);
}
.brand strong { font-size: 15px; letter-spacing: -.02em; }
.brand-mark {
    width: var(--brand-icon-size); height: var(--brand-icon-size);
    flex: 0 0 var(--brand-icon-size); transition: width .16s ease, height .16s ease, flex-basis .16s ease;
    display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand-mark img.inverted, .interface-icon-preview img.inverted,
.desktop-icon-preview img.inverted { filter: invert(1); }
.icon-button { width: 34px; height: 34px; border: 0; background: none; border-radius: 8px; cursor: pointer; }
.icon-button:hover { background: var(--panel-hover); }
.mobile-menu, .sidebar-backdrop { display: none; }

.new-task {
    height: 39px; margin: 4px 10px 15px; padding: 0 11px; border: 0; border-radius: 8px;
    background: transparent; text-align: left; cursor: pointer; font-size: 13px; font-weight: 600;
}
.new-task:hover { background: var(--panel-hover); }
.new-task span { margin-right: 8px; font-size: 18px; font-weight: 400; vertical-align: -1px; }
.sidebar-page-link {
    height: 36px; margin: -7px 10px 14px; padding: 0 10px; display: grid;
    grid-template-columns: 19px minmax(0, 1fr) auto; align-items: center; gap: 8px;
    border: 0; border-radius: 8px; background: transparent; color: #b8b8b3;
    text-align: left; cursor: pointer;
}
.sidebar-page-link + .sidebar-page-link { margin-top: -12px; }
.sidebar-page-link:hover, .sidebar-page-link.active { background: var(--panel-hover); color: var(--ink); }
.sidebar-page-link > span { font-size: 16px; }
.sidebar-page-link strong { font-size: 12.5px; font-weight: 590; }
.sidebar-page-link small {
    min-width: 20px; color: #777; font-size: 10.5px; text-align: right;
}
.screen-nav-icon {
    width: 15px; height: 11px; border: 1.4px solid currentColor;
    border-radius: 2px; position: relative;
}
.screen-nav-icon::after {
    content: ""; position: absolute; left: 4px; right: 4px; bottom: -4px;
    height: 1.4px; border-radius: 2px; background: currentColor;
}
.sidebar-page-link .screen-nav-live {
    color: #68c784; font-size: 8px; font-weight: 750; letter-spacing: .08em;
}
.navigation { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px; }
.nav-heading {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 3px; padding: 9px 8px 6px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}
.nav-heading span { color: #85857f; font-size: 11px; font-weight: 650; }
.nav-heading > div { display: flex; gap: 1px; }
.nav-heading button { width: 26px; height: 26px; border: 0; background: none; border-radius: 7px; color: var(--muted); cursor: pointer; }
.nav-heading button:hover { background: var(--panel-hover); color: var(--ink); }
.nav-heading button:disabled { opacity: .45; cursor: default; }
@media (hover: hover) and (pointer: fine) {
    .nav-heading > div {
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateX(4px);
        transition: opacity .15s ease, transform .15s ease, visibility .15s;
    }
    .nav-heading:hover > div,
    .nav-heading:focus-within > div {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateX(0);
    }
}
.project { margin: 0 4px 2px 40px; }
.project-group-heading.open + .project { margin-top: 9px; }
.project-group-heading.open ~ .project { margin-bottom: 5px; }
.project-group-heading {
    min-height: 30px; margin: 3px 4px 2px 0; padding: 4px 8px; display: grid;
    grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px;
    color: #777772; font-size: 11.5px; font-weight: 650;
    letter-spacing: .045em; text-transform: uppercase;
    border-radius: 7px; cursor: pointer;
    transition: margin-left .16s cubic-bezier(.2,.75,.25,1),
                transform .16s cubic-bezier(.2,.75,.25,1),
                opacity .13s cubic-bezier(.22,.61,.36,1),
                background .14s ease, color .14s ease;
}
.project-group-heading.open { margin-left: 0; }
.project-group-heading.group-exit-left {
    opacity: 0; transform: translateX(-24px) scale(.985); pointer-events: none;
}
.project-group-heading.group-enter-left {
    opacity: 0; transform: translateX(-24px) scale(.985);
}
.group-motion-layer {
    position: fixed; z-index: 80; overflow: hidden;
    pointer-events: none; contain: strict;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 26px,
        #000 calc(100% - 26px),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 26px,
        #000 calc(100% - 26px),
        transparent 100%
    );
}
.project-group-heading.group-motion-clone {
    position: absolute; z-index: 1; box-sizing: border-box;
    margin: 0 !important; pointer-events: none;
    background: #151515; box-shadow: 0 8px 24px rgba(0,0,0,.24);
    transition: none !important; will-change: transform, opacity;
}
.project-group-heading:hover { background: #1c1c1c; color: #aaa; }
.project-group-heading:focus-visible { outline: 1px solid #666; outline-offset: -1px; }
.project-group-heading.has-icon {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
.project-group-heading.has-actions {
    grid-template-columns: minmax(0, 1fr) auto 26px;
}
.project-group-heading.has-icon.has-actions {
    grid-template-columns: auto minmax(0, 1fr) auto 26px;
}
.project-group-heading > span {
    min-width: 0; display: flex; align-items: center;
}
.project-group-heading > img {
    display: block; margin-right: 9px; object-fit: contain; border-radius: 0;
}
.project-group-heading:first-child { margin-top: 0; }
.project-group-heading:not(:first-child) { margin-top: 24px; }
.project-group-heading small {
    min-width: 20px; height: 20px; padding: 0 6px; display: grid;
    place-items: center; border-radius: 999px; background: #202020;
    color: #858580; font-size: 10px; font-weight: 650;
}
.group-actions {
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: #858580; cursor: pointer;
    font-size: 17px; line-height: 1; opacity: 0; pointer-events: none;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.project-group-heading.open:hover .group-actions,
.project-group-heading.open:focus-within .group-actions {
    opacity: 1; pointer-events: auto;
}
.group-actions:hover { background: #303030; color: #e2e2dd; }
@media (hover: none), (pointer: coarse) {
    .project-group-heading.open .group-actions {
        opacity: 1; pointer-events: auto;
    }
}
.project:not(.open) {
    content-visibility: auto;
    contain-intrinsic-size: auto 35px;
}
.project-row { position: relative; display: flex; align-items: center; }
.project-button, .thread-button {
    width: 100%; border: 0; background: transparent; border-radius: 7px; cursor: pointer;
    display: flex; align-items: center; min-width: 0; text-align: left;
}
.project-button { height: 35px; gap: 7px; padding: 0 32px 0 6px; font-size: 13px; font-weight: 590; }
.project-button:hover, .thread-button:hover { background: var(--panel-hover); }
.project-button.active { background: #292929; }
.project-icon {
    width: 20px; height: 20px; flex: 0 0 20px; overflow: hidden; display: grid; place-items: center;
    border-radius: 5px; background: #303030; color: #bdbdb8; font-size: 9px; font-weight: 700;
}
.project-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.project-actions {
    position: absolute; right: 4px; width: 27px; height: 27px; border: 0; border-radius: 6px;
    background: transparent; color: #858580; cursor: pointer; opacity: 0;
}
.project-row:hover .project-actions, .project-actions:focus-visible { opacity: 1; }
.project-actions:hover { background: #383838; color: #fff; }
.project-name, .thread-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navigation-placeholder {
    display: grid; gap: 10px; padding: 7px 8px;
}
.navigation-placeholder span {
    width: 72%; height: 10px; border-radius: 999px; background: #292929;
}
.navigation-placeholder span:nth-child(2) { width: 58%; }
.navigation-placeholder span:nth-child(3) { width: 66%; }
.navigation-enter {
    animation: navigation-in .19s cubic-bezier(.2,.75,.25,1) both;
    animation-delay: calc(var(--navigation-order, 0) * 12ms);
}
.thread-list {
    display: grid; grid-template-rows: 0fr; margin: 0 0 0 43px;
    border-left: 1px solid transparent; opacity: 0;
    transition: grid-template-rows .22s cubic-bezier(.22,.8,.24,1),
                margin .22s cubic-bezier(.22,.8,.24,1),
                border-color .16s ease, opacity .16s ease;
}
.project:not(.has-icon) .thread-list { margin-left: 23px; }
.thread-list-inner { min-height: 0; overflow: hidden; padding-left: 7px; }
.thread-load-sentinel { height: 1px; pointer-events: none; }
.project.open .thread-list {
    grid-template-rows: 1fr; margin-top: 8px; margin-bottom: 6px;
    border-left-color: #333; opacity: 1;
}
.project.navigation-enter.open .thread-list-inner {
    animation: thread-list-in .28s .05s cubic-bezier(.22,.8,.24,1) both;
}
.thread-row { position: relative; min-width: 0; }
.thread-button {
    height: 31px; padding: 0 32px 0 8px;
    color: #a1a1a1; font-size: 12.5px;
}
.thread-button.active { color: var(--ink); background: #292929; }
.thread-actions {
    position: absolute; top: 2px; right: 3px; width: 27px; height: 27px;
    padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: #858580; cursor: pointer;
    font-size: 17px; line-height: 1; opacity: 0; pointer-events: none;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.thread-row:hover .thread-actions,
.thread-row:focus-within .thread-actions {
    opacity: 1; pointer-events: auto;
}
.thread-actions:hover { background: #383838; color: #fff; }

.project-group-heading.chat-open:not(.task-active),
.project-button.chat-open:not(.task-active),
.thread-button.chat-open:not(.task-active) {
    position: relative; isolation: isolate; overflow: hidden;
    color: #e1f1e6;
    background: linear-gradient(
        112deg,
        rgba(14, 42, 27, .96) 0%,
        rgba(22, 67, 40, .82) 38%,
        rgba(17, 52, 33, .94) 68%,
        rgba(28, 79, 47, .76) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(106, 193, 129, .14);
}
.project-group-heading.chat-open:not(.task-active) small {
    color: #cde7d4; background: rgba(5, 24, 14, .32);
}
.project-button.chat-open:not(.task-active) .project-icon {
    background: rgba(5, 24, 14, .34); color: #e1f1e6;
}
.project-group-heading.chat-open:not(.task-active):hover,
.project-button.chat-open:not(.task-active):hover,
.thread-button.chat-open:not(.task-active):hover { filter: brightness(1.07); }

.project-group-heading.task-active,
.project-button.task-active,
.thread-button.task-active {
    position: relative; isolation: isolate; overflow: hidden;
    color: #e8f8ec;
    background: linear-gradient(
        108deg,
        rgba(20, 68, 41, .88) 0%,
        rgba(25, 105, 57, .78) 34%,
        rgba(18, 73, 43, .9) 68%,
        rgba(31, 121, 66, .72) 100%
    );
    background-size: 230% 100%;
    box-shadow: inset 0 0 0 1px rgba(111, 225, 144, .17),
                0 0 0 rgba(57, 197, 101, 0);
    animation: active-task-gradient 5.2s ease-in-out infinite,
               active-task-breathe 2.9s ease-in-out infinite;
}
.project-group-heading.task-active::before,
.project-button.task-active::before,
.thread-button.task-active::before {
    content: ""; position: absolute; z-index: 0; inset: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 16%,
        rgba(149, 255, 181, .04) 36%,
        rgba(149, 255, 181, .2) 50%,
        rgba(149, 255, 181, .04) 64%,
        transparent 84%
    );
    transform: translateX(-125%);
    animation: active-task-sheen 4.1s cubic-bezier(.4, 0, .2, 1) infinite;
}
.project-group-heading.task-active > *,
.project-button.task-active > *,
.thread-button.task-active > * { position: relative; z-index: 1; }
.project-group-heading.task-active small {
    color: #d8f5df; background: rgba(5, 27, 15, .34);
}
.project-group-heading.task-active:hover,
.project-button.task-active:hover,
.thread-button.task-active:hover { filter: brightness(1.08); }
.project-button.task-active .project-icon {
    background: rgba(5, 27, 15, .38); color: #e8f8ec;
}
@media (hover: none), (pointer: coarse) {
    .thread-actions { opacity: .72; pointer-events: auto; }
}
.empty-list { padding: 8px; color: #777; font-size: 12px; }
.loading-feedback {
    display: grid; justify-items: center; gap: 13px;
    color: #c8c8c4; text-align: center;
    animation: loading-reveal .2s cubic-bezier(.2,.75,.25,1) both;
}
.loading-feedback-compact { padding: 28px 10px 18px; gap: 10px; }
.loading-mark {
    position: relative; width: 29px; height: 29px; box-sizing: border-box;
    border: 1px solid #343434; border-top-color: var(--success);
    border-radius: 50%; animation: loading-spin .82s linear infinite;
}
.loading-mark::after {
    content: ""; position: absolute; inset: 8px;
    border-radius: 50%; background: var(--success);
    box-shadow: 0 0 0 4px rgba(93, 168, 117, .08);
    animation: loading-core 1.25s ease-in-out infinite;
}
.loading-copy { display: grid; gap: 4px; }
.loading-copy strong {
    color: #d7d7d3; font-size: 12.5px; font-weight: 590;
    animation: loading-copy-pulse 1.8s ease-in-out infinite;
}
.loading-copy small { color: #777772; font-size: 10.5px; }
.loading-feedback-compact .loading-mark { width: 23px; height: 23px; }
.loading-feedback-compact .loading-mark::after { inset: 6px; }
.loading-feedback-compact .loading-copy strong { font-size: 11.5px; }

.sidebar-footer { position: relative; padding: 8px; border-top: 1px solid var(--line); }
.account {
    width: 100%; height: 46px; border: 0; background: transparent; border-radius: 9px; cursor: pointer;
    display: grid; grid-template-columns: 30px minmax(0,1fr) 20px; gap: 9px; align-items: center; text-align: left;
}
.account:hover { background: var(--panel-hover); }
.account > span:nth-child(2) { display: grid; min-width: 0; }
.account strong, .account small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account strong { font-size: 12.5px; }
.account small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.avatar {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: #e8e8e8; color: #111; font-size: 11px; font-weight: 700;
}
.account-menu {
    position: absolute; left: 10px; right: 10px; bottom: 60px; padding: 6px; border: 1px solid var(--line);
    border-radius: 10px; background: #1b1b1b; box-shadow: 0 18px 48px rgba(0,0,0,.42);
}
.account-menu-title {
    position: relative; display: flex; align-items: center;
    justify-content: space-between; padding: 6px 4px 13px 8px;
    color: #898983; font-size: 10px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .06em;
}
.account-menu-settings-wrap { position: relative; }
.account-menu .account-menu-settings-wrap > button {
    width: 30px; height: 28px; display: grid; place-items: center;
    padding: 0; color: #8e8e89; font-size: 20px;
    text-align: center; letter-spacing: 0;
}
.account-menu .account-menu-settings-wrap > button:hover,
.account-menu .account-menu-settings-wrap > button[aria-expanded="true"] {
    background: #292929; color: #ededed;
}
.account-menu-settings {
    position: absolute; z-index: 5; top: 32px; right: 0;
    width: 230px; padding: 5px;
    border: 1px solid #393939; border-radius: 9px;
    background: #222; box-shadow: 0 14px 36px rgba(0,0,0,.5);
}
.account-menu-settings[hidden] { display: none; }
.account-menu .account-menu-settings button {
    height: 38px; padding: 0 10px; color: #c2c2bd;
    font-size: 10.5px; text-transform: none; letter-spacing: 0;
}
.account-menu .account-menu-settings button:hover {
    background: #303030; color: #fff;
}
.account-list { display: grid; gap: 7px; }
.account-menu .account-option {
    height: 46px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center;
    gap: 10px; padding: 5px 8px;
}
.account-option-identity { display: grid; min-width: 0; }
.account-option b, .account-option-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-option b { color: #777; font-size: 11.5px; font-weight: 590; }
.account-option.team-account b { color: #f2f2ef; }
.account-option.non-team-account b { color: #777; }
.account-option-identity span { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.account-option-identity span[hidden] { display: none; }
.account-option-metric {
    display: grid; min-width: 58px; justify-items: end; align-content: center;
}
.account-option small { color: #9b9b9b; font-size: 10.5px; }
.account-option-reset {
    margin-top: 2px; color: #72726e; font-size: 9px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.account-option-reset.estimated { color: #c6aa64; }
.account-option-reset[hidden] { display: none; }
.account-option.active { background: #2a2a2a; }
.account-option.active small { color: #ededed; font-weight: 650; }
.account-option.healthy small { color: #31d36b; font-weight: 700; }
.account-option.low small { color: var(--limit-color, #d8a09a); }
.account-option.estimated-report small { color: #c6aa64; font-weight: 650; }
.account-option:disabled { cursor: default; pointer-events: none; }
.smart-accounts { margin: 5px 8px 4px; color: #92928c; font-size: 9.5px; }
.smart-accounts::before { content: "●"; margin-right: 6px; color: #666; }
.smart-accounts.enabled::before { color: #4f8b61; }
.account-menu-divider { height: 1px; margin: 6px 3px 3px; background: var(--line); }
.account-menu button { width: 100%; height: 34px; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
.account-menu button:hover { background: #282828; }
.account-menu .account-option.automatic-account,
.account-menu .account-option.automatic-account:hover {
    border-radius: 0;
    background: linear-gradient(
        96deg,
        rgba(36, 116, 61, .38) 0%,
        rgba(30, 91, 49, .2) 58%,
        rgba(27, 27, 27, 0) 100%
    );
    box-shadow: none;
}

.workspace {
    width: 100%; max-width: 100%; min-width: 0; min-height: 0;
    height: 100%; overflow: hidden; overflow-x: clip;
    display: flex; flex-direction: column; background: var(--paper);
}
.topbar {
    width: 100%; max-width: 100%; min-width: 0; overflow: hidden;
    height: 58px; flex: 0 0 58px; display: flex; align-items: center; gap: 10px;
    padding: 0 18px 0 22px; border-bottom: 1px solid var(--line);
    background: rgba(16, 16, 16, .94);
}
.release-notice {
    width: 100%; min-width: 0; flex: 0 0 auto;
    display: flex; align-items: center; gap: 14px;
    padding: 10px 18px 10px 22px;
    border-bottom: 1px solid rgba(93, 168, 117, .28);
    background: linear-gradient(94deg, rgba(33, 94, 52, .34), rgba(18, 28, 21, .96));
    color: #d9e7dc;
}
.release-notice[hidden] { display: none; }
.release-notice-copy {
    min-width: 0; display: flex; align-items: baseline; gap: 8px;
    margin-right: auto; font-size: 12px;
}
.release-notice-copy strong { color: #f0f7f2; font-size: 12.5px; }
.release-notice-copy span { color: #9db3a3; }
.release-notice a {
    flex: 0 0 auto; color: #8fd2a3; font-size: 12px; font-weight: 650;
    text-decoration: none;
}
.release-notice a:hover { color: #b0e2be; text-decoration: underline; }
.release-notice button {
    width: 28px; height: 28px; flex: 0 0 28px; padding: 0;
    border: 0; border-radius: 50%; background: transparent;
    color: #84968a; font: 20px/1 sans-serif; cursor: pointer;
}
.release-notice button:hover { background: rgba(255, 255, 255, .07); color: #dce8df; }
.header-limit {
    min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 5px;
    margin-right: auto; color: #a4a49f; font-size: 11.5px; font-weight: 620;
    letter-spacing: .01em; white-space: nowrap; transition: color .18s ease;
}
.header-account {
    min-width: 0; overflow: hidden; color: #a4a49f;
    text-overflow: ellipsis; transition: color .18s ease;
}
.header-account:empty { display: none; }
.header-account.business { color: #62a5ff; }
.header-limit.connecting { color: #c9c9c3; }
.header-limit.connecting .header-account { color: #78adf5; }
#header-limit-value { color: #f4f4f1; }
.header-limit-timer {
    margin-left: 4px; padding-left: 9px; border-left: 1px solid #343434;
    color: #71716d; font-size: 10px; font-weight: 540; font-variant-numeric: tabular-nums;
}
.controls { display: flex; align-items: center; gap: 8px; min-width: 0; }
.select-wrap {
    height: 36px; display: flex; align-items: center; gap: 5px; padding: 0 8px 0 10px;
    border: 1px solid #303030; border-radius: 8px; background: #191919;
}
.select-wrap > span { display: none; }
.select-wrap select { max-width: 180px; border: 0; background: transparent; outline: none; font-size: 11.5px; cursor: pointer; }
.select-wrap.compact select { max-width: 104px; }
.connection {
    position: relative; width: 31px; height: 31px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border-radius: 50%; background: #1c1c1c;
    cursor: pointer; touch-action: manipulation;
    transition: transform .13s ease, background .13s ease;
}
.connection i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px rgba(225,110,103,.12); transition: background .18s, box-shadow .18s, transform .13s ease, opacity .13s ease; }
.connection.online i { background: var(--success); box-shadow: 0 0 0 3px rgba(93,168,117,.13); }
.connection.stale i { background: #d6a84f; box-shadow: 0 0 0 3px rgba(214,168,79,.15); }
.connection.refreshing { transform: scale(.8); background: #343434; }
.connection.refreshing i { transform: scale(.72); opacity: .72; }
.connection.holding { background: #303030; transform: scale(.9); }
.connection.holding::after {
    content: "";
    position: absolute; inset: -4px;
    border: 1px solid rgba(93, 168, 117, .62);
    border-radius: 50%;
    animation: connection-hold-ring .62s linear both;
    pointer-events: none;
}

.conversation {
    width: 100%; max-width: 100%; min-width: 0; flex: 1; min-height: 0;
    overflow: hidden; overflow-x: clip; display: flex; flex-direction: column;
}
.messages-shell {
    position: relative; width: 100%; max-width: 100%; min-width: 0;
    flex: 1; min-height: 0; overflow: hidden; overflow-x: clip;
}
.messages {
    width: 100%; max-width: 100%; height: 100%; min-width: 0; min-height: 0;
    overflow-x: hidden; overflow-y: auto;
    box-sizing: border-box;
    padding: 34px max(24px, calc((100% - 800px) / 2)) 38px;
    scroll-behavior: auto;
    overflow-anchor: none;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-color: #626262 #171717;
    scrollbar-width: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.history-loading {
    position: absolute; inset: 0; z-index: 2;
    display: grid; align-content: center; justify-items: center;
    background: var(--paper); text-align: center;
}
.history-loading[hidden] { display: none; }
.history-more {
    display: block; margin: 0 auto 28px; padding: 8px 15px;
    border: 1px solid #3d3d3d; border-radius: 999px;
    background: #232323; color: #d7d7d7; font: inherit; font-size: 12.5px;
    cursor: pointer; transition: background .14s ease, border-color .14s ease;
}
.history-more:hover:not(:disabled) { background: #2d2d2d; border-color: #555; }
.history-more:disabled { color: #858585; cursor: wait; }
.messages::-webkit-scrollbar { width: 10px; }
.messages::-webkit-scrollbar-track { background: #171717; }
.messages::-webkit-scrollbar-thumb {
    min-height: 44px; border: 2px solid #171717; border-radius: 999px;
    background: #626262; background-clip: padding-box;
}
.messages::-webkit-scrollbar-thumb:hover { background-color: #7a7a7a; }
.empty-state {
    min-height: 100%; display: grid; align-content: center; justify-items: center; text-align: center;
    transform: translateY(-5%);
}
.empty-symbol { font-size: 32px; color: #d7d7d7; }
.empty-state h2 { margin: 17px 0 8px; font-size: 24px; letter-spacing: -.035em; font-weight: 580; }
.empty-state p { margin: 0; color: var(--muted); font-size: 13px; }
.message { width: 100%; max-width: 800px; min-width: 0; margin: 0 auto; }
.message + .message { margin-top: 30px; }
.message.user + .message.assistant { margin-top: 22px; }
.message.assistant + .message.user { margin-top: 36px; }
.message.user { display: flex; flex-direction: column; align-items: flex-end; }
.message.user .message-body {
    max-width: min(620px, 78%); padding: 10px 14px; border: 1px solid #343434;
    border-radius: 17px 17px 5px 17px; background: #292929;
    overflow-wrap: anywhere; word-break: break-word;
    white-space: pre-wrap; line-height: 1.55; font-size: 13.5px;
}
.message.assistant .message-body {
    min-width: 0; max-width: 100%; padding: 2px 3px;
    overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.68;
    font-size: 13.5px; color: #dedede;
}
.message.assistant .message-body.markdown-rendered { white-space: normal; }
.markdown-rendered > :first-child { margin-top: 0; }
.markdown-rendered > :last-child { margin-bottom: 0; }
.markdown-rendered p { margin: 0 0 10px; }
.markdown-rendered h1, .markdown-rendered h2,
.markdown-rendered h3, .markdown-rendered h4 {
    margin: 18px 0 8px; color: #f0f0ee; line-height: 1.3;
    font-weight: 680; letter-spacing: -.015em;
}
.markdown-rendered h1 { font-size: 19px; }
.markdown-rendered h2 { font-size: 17px; }
.markdown-rendered h3 { font-size: 15px; }
.markdown-rendered h4 { font-size: 13.5px; }
.markdown-rendered ul, .markdown-rendered ol {
    margin: 7px 0 11px; padding-left: 24px;
}
.markdown-rendered li { margin: 3px 0; }
.markdown-rendered li > ul, .markdown-rendered li > ol { margin: 3px 0; }
.markdown-rendered blockquote {
    margin: 10px 0; padding: 4px 0 4px 13px;
    border-left: 2px solid #4a4a47; color: #aaa;
}
.markdown-rendered blockquote > :last-child { margin-bottom: 0; }
.markdown-rendered a { color: #8fb99a; text-decoration: none; }
.markdown-rendered a:hover { text-decoration: underline; }
.markdown-rendered :not(pre) > code {
    max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
    padding: 2px 5px; border-radius: 5px;
    background: #252525; color: #e3d7b6;
    font: 12px/1.5 Consolas, "SFMono-Regular", monospace;
}
.markdown-rendered strong { color: #f0f0ee; font-weight: 700; }
.markdown-rendered img, .markdown-rendered svg { max-width: 100%; height: auto; }
.markdown-rendered del { color: #888; }
.markdown-rendered hr {
    height: 1px; margin: 17px 0; border: 0; background: #303030;
}
.markdown-rendered table {
    display: block; width: 100%; max-width: 100%; margin: 11px 0;
    overflow-x: auto; border-collapse: collapse;
    font-size: 12.5px; line-height: 1.45;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.markdown-rendered th, .markdown-rendered td {
    padding: 7px 9px; border: 1px solid #343434; text-align: left;
}
.markdown-rendered th { background: #202020; color: #ededeb; font-weight: 650; }
.markdown-rendered tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
.markdown-rendered input[type="checkbox"] {
    margin: 0 7px 0 0; accent-color: #6f9b78;
}
.message-meta {
    min-height: 14px; margin: 0 3px 7px; color: #707070;
    font-size: 10px; line-height: 1.4; letter-spacing: .01em;
}
.message-meta:empty { display: none; }
.message.assistant.pending .message-body::after,
.message.assistant.revealing .message-body::after {
    content: ""; display: inline-block; width: 5px; height: 15px; margin-left: 3px;
    background: #aaa; vertical-align: -2px; animation: blink 1s steps(1) infinite;
}
.message-code-block {
    width: 100%; max-width: 100%; margin: 10px 0;
    padding: 11px 13px; overflow-x: auto;
    border: 1px solid #303030; border-radius: 9px;
    background: #151515; color: #dedede;
    white-space: pre; font: 12.5px/1.55 Consolas, "SFMono-Regular", monospace;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.message-code-block code { font: inherit; color: inherit; }
.message-status { margin-top: 9px; color: #777; font-size: 10.5px; }
.message-status:empty { display: none; }
.queue-cancel {
    width: fit-content; margin-top: 10px; padding: 6px 10px;
    border: 1px solid #4a4235; border-radius: 7px;
    background: #26231e; color: #d9bd82; cursor: pointer;
    font: inherit; font-size: 11px;
}
.queue-cancel:hover { background: #302a21; color: #ecd09a; }
.queue-cancel:disabled { opacity: .55; cursor: wait; }
.queue-notice {
    max-width: 760px; margin: 0 auto 8px; padding: 7px 12px;
    border: 1px solid #403a2f; border-radius: 9px;
    background: rgba(43,38,29,.92); color: #cdb987;
    font-size: 11px; line-height: 1.35;
}
.queue-notice.error { border-color: #603934; background: #33211f; color: #e6a29a; }
.message-activity {
    margin: 15px 3px 0; border-top: 1px solid #292929;
    color: #aaa; font-size: 11px;
}
.message-activity summary {
    min-height: 36px; display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center; gap: 9px; cursor: pointer; list-style: none;
    color: #8f8f8f; user-select: none;
}
.message-activity summary::-webkit-details-marker { display: none; }
.message-activity summary i {
    width: 6px; height: 6px; border-radius: 50%; background: #626262;
}
.message-activity.is-live summary i {
    background: #d0d0d0; animation: pulse 1.25s ease infinite;
}
.message-activity summary strong {
    overflow: hidden; color: #a9a9a9; text-overflow: ellipsis;
    white-space: nowrap; font-weight: 520;
}
.message-activity summary span { color: #686868; font-size: 9.5px; }
.message-activity-log { display: grid; padding: 2px 0 6px 16px; }
.message-activity-row {
    position: relative; display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px; padding: 8px 0 9px; border-top: 1px solid #252525;
    animation: activity-row-in .18s ease-out both;
}
.message-activity-row:first-child { border-top: 0; }
.message-activity-row > b {
    color: #747474;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px; font-weight: 600;
}
.message-activity-row > div { min-width: 0; display: grid; gap: 5px; }
.message-activity-row > div > div {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
}
.message-activity-row strong { color: #aaa; font-weight: 500; }
.message-activity-row small { color: #646464; font-size: 9.5px; }
.message-activity-row.active small { color: #aaa; }
.message-activity-row.error small { color: #dc7f7f; }
.message-activity-row code {
    overflow: hidden; display: block; color: #777;
    font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
    overflow-wrap: anywhere; white-space: pre-wrap;
}
.message-activity-row ul {
    display: grid; gap: 4px; margin: 1px 0 0; padding: 0; list-style: none;
}
.message-activity-row li {
    min-width: 0; display: grid;
    grid-template-columns: 14px minmax(0, 1fr); gap: 3px;
}
.message-activity-row li span { color: #7aa986; }
.message-activity-row li span.file-delete { color: #b97878; }
.message-activity-row li code {
    color: #969696; white-space: nowrap; text-overflow: ellipsis;
}
.message-activity-exit { margin-top: 1px; }

.composer-area {
    flex: 0 0 auto; padding: 0 max(24px, calc((100% - 800px) / 2)) 16px;
    background: linear-gradient(transparent, var(--paper) 30%);
}
.activity {
    min-height: 29px; display: flex; align-items: center; gap: 7px;
    visibility: hidden; color: var(--muted); font-size: 10.5px;
}
.activity.is-visible { visibility: visible; }
.activity > span { width: 6px; height: 6px; border-radius: 50%; background: #666; }
.activity.busy > span { background: #d4d4d4; animation: pulse 1.25s ease infinite; }
.activity b { font-weight: 500; }
.activity button { margin-left: auto; border: 0; background: none; color: var(--danger); cursor: pointer; font-size: 11px; }
.stop-command {
    width: 29px; height: 29px; flex: none; padding: 0;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
    background: #c94843; color: #fff;
    font-size: 0; line-height: 1; cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}
.stop-command svg { width: 12px; height: 12px; display: block; fill: currentColor; }
.stop-command span { display: none; }
.stop-command:hover { background: #d6534e; color: #fff; }
.stop-command:active {
    transform: scale(.92); background: #b83e3a; color: #fff;
}
.stop-command.requested {
    background: #7f3432; color: #ffd8d6; cursor: wait;
    box-shadow: 0 0 0 4px rgba(201,72,67,.12);
}
.stop-command.requested svg { animation: stop-request-pulse 1.1s ease-in-out infinite; }
.stop-command:disabled { opacity: 1; }
.composer {
    position: relative; min-height: 104px; padding: 14px 62px 43px 13px;
    border: 1px solid #363636; border-radius: 15px;
    background: #1b1b1b; box-shadow: 0 10px 30px rgba(0,0,0,.22);
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.attachment-list {
    display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px;
}
.attachment-list[hidden] { display: none; }
.attachment-chip {
    max-width: 100%; min-width: 0; height: 30px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 8px 0 10px; border: 1px solid #373737; border-radius: 9px;
    background: #252525; color: #cfcfcf; font-size: 11.5px;
}
.attachment-chip.image { max-width: 100%; height: 50px; padding-left: 4px; }
.attachment-thumb {
    width: 40px; height: 40px; flex: none; object-fit: cover;
    border-radius: 7px; background: #151515;
}
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button {
    width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #858585; cursor: pointer; font-size: 15px; line-height: 16px;
}
.attachment-chip button:hover { background: #383838; color: #ddd; }
.message-attachments {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 7px;
}
.message-image {
    max-width: min(420px, 72vw); overflow: hidden; display: grid;
    border: 1px solid #393939; border-radius: 12px; background: #181818;
    color: #aaa; text-decoration: none;
}
.message-image img {
    display: block; width: min(420px, 72vw); height: clamp(160px, 28vw, 280px);
    object-fit: contain;
    background: #111;
}
.message-image span {
    overflow: hidden; padding: 7px 9px; text-overflow: ellipsis;
    white-space: nowrap; font-size: 10.5px;
}
.message-image:hover { border-color: #555; color: #ddd; }
.message-file {
    max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 5px 9px; border: 1px solid #393939; border-radius: 8px;
    background: #222; color: #aaa; font-size: 10.5px;
}
.composer:focus-within { border-color: #5a5a5a; background: #1d1d1d; box-shadow: 0 12px 34px rgba(0,0,0,.3), 0 0 0 3px rgba(255,255,255,.025); }
.composer textarea {
    width: 100%; min-height: 48px; max-height: 180px; resize: none; border: 0; outline: 0;
    background: transparent; color: var(--ink); line-height: 1.5; font-size: 14px;
}
.composer textarea::placeholder { color: #747474; }
.composer-bottom {
    position: absolute; right: 13px; bottom: 10px; height: 29px;
    display: flex; align-items: center; gap: 7px;
}
.composer-effort, .composer-access {
    position: relative; height: 29px; min-width: 0; padding: 0 5px; display: flex; align-items: center;
    border: 1px solid #383838; border-radius: 9px; background: #232323;
}
.composer-effort > span, .composer-access > select { display: none; }
.composer-effort select {
    width: auto; min-width: 48px; max-width: 112px; padding: 0 17px 0 2px;
    appearance: none; -webkit-appearance: none;
    border: 0; outline: 0; background: transparent;
    color: #bdbdb8; font-size: 10.5px; cursor: pointer;
    transition: width .14s cubic-bezier(.2,.75,.25,1);
}
.composer-effort::after {
    content: ""; position: absolute; right: 8px; top: 50%;
    width: 5px; height: 5px; pointer-events: none;
    border-right: 1px solid #858585; border-bottom: 1px solid #858585;
    transform: translateY(-68%) rotate(45deg);
}
.effort-trigger, .effort-popup { display: none; }
.access-trigger {
    height: 100%; padding: 0 5px; display: flex; align-items: center; gap: 5px;
    border: 0; border-radius: inherit; background: transparent; color: #bdbdb8;
    font: inherit; font-size: 10.5px; cursor: pointer;
}
.access-trigger:hover, .access-trigger[aria-expanded="true"] { color: #fff; background: #2d2d2d; }
.access-trigger svg {
    width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.25;
    stroke-linecap: round; stroke-linejoin: round;
}
.access-trigger.full-access { color: #ff8548; }
.access-popup {
    position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30;
    width: 250px; padding: 5px; border: 1px solid #444; border-radius: 12px;
    background: #202020; box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.access-popup:not([hidden]) { display: grid; gap: 2px; }
.access-popup button {
    width: 100%; min-height: 50px; padding: 7px 9px; display: grid;
    grid-template-columns: 1fr 16px; align-items: center; gap: 7px;
    border: 0; border-radius: 8px; background: transparent; color: #c8c8c3;
    text-align: left; font: inherit; cursor: pointer;
}
.access-popup button:hover, .access-popup button.active { background: #2b2b2b; color: #fff; }
.access-popup button.danger b { color: #ff8548; }
.access-popup button > span { display: grid; gap: 3px; }
.access-popup b { font-size: 12px; font-weight: 550; }
.access-popup small { color: #858585; font-size: 10.5px; }
.access-popup i { visibility: hidden; color: #5f9cff; font-style: normal; text-align: center; }
.access-popup button.active i { visibility: visible; }
.approval-request {
    max-width: 820px; margin: 0 auto 9px; padding: 12px 13px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border: 1px solid #4a4037; border-radius: 13px; background: #211d1a;
    box-shadow: 0 10px 28px rgba(0,0,0,.2);
}
.approval-request[hidden] { display: none; }
.approval-request-copy { min-width: 0; display: grid; gap: 3px; }
.approval-request-copy strong { color: #f0e9e2; font-size: 12.5px; font-weight: 600; }
.approval-request-copy span { color: #a9a19a; font-size: 11px; }
.approval-request-copy code {
    max-width: 520px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: #d7c8bd; font: 10.5px/1.4 Consolas, monospace;
}
.approval-request-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.approval-request-actions button {
    min-height: 31px; padding: 0 10px; border: 1px solid #49423d; border-radius: 8px;
    background: #2b2724; color: #c8c0ba; font: inherit; font-size: 10.5px; cursor: pointer;
}
.approval-request-actions button:hover { background: #37312d; color: #fff; }
.approval-request-actions button.primary { border-color: #d86d36; background: #d86d36; color: #fff; }
.approval-request-actions button:disabled { opacity: .45; cursor: default; }
.attach {
    position: absolute; left: 13px; bottom: 10px; width: 29px; height: 29px;
    padding: 0; display: grid; place-items: center; border: 1px solid #383838;
    border-radius: 9px; background: #232323; color: #c5c5c5; cursor: pointer;
}
.attach:hover { border-color: #555; background: #2a2a2a; color: #fff; }
.attach:disabled { opacity: .35; cursor: default; }
.shell:not(.interface-ready) .attach:disabled,
.shell:not(.interface-ready) .send:disabled { opacity: 1; }
.attach.uploading svg { animation: pulse 1s ease infinite; }
.attach svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.send {
    width: 29px; height: 29px; border: 0; border-radius: 9px; background: #ededed; color: #111;
    padding: 0; display: grid; place-items: center; cursor: pointer; line-height: 1;
}
.send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.composer.has-stop .send { display: none; }
.send:active:not(:disabled) { transform: scale(.94); }
.send:disabled { opacity: .3; cursor: default; }

.screen-page {
    width: 100%; min-width: 0; flex: 1; min-height: 0;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 18px; padding: 28px 30px 20px; overflow: hidden;
    background: radial-gradient(circle at 50% 44%, rgba(92, 156, 110, .045), transparent 37%);
    animation: screen-page-in .24s ease both;
}
.screen-page[hidden] { display: none; }
.screen-page-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.screen-page-header > div:first-child > span {
    color: #73736e; font-size: 9px; font-weight: 680;
    letter-spacing: .11em; text-transform: uppercase;
}
.screen-page-header h1 {
    margin: 5px 0 4px; font-size: 25px; font-weight: 620; letter-spacing: -.035em;
}
.screen-page-header p { margin: 0; color: var(--muted); font-size: 11px; }
.screen-page-actions { display: flex; align-items: center; gap: 8px; }
.screen-page-actions button {
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid #343434; border-radius: 8px; background: #1b1b1b;
    color: #bcbcb7; cursor: pointer; font-size: 17px;
}
.screen-page-actions button:hover { border-color: #494949; background: #232323; color: #fff; }
.screen-page-actions button:active { transform: translateY(1px); }
.screen-page-actions svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.screen-status {
    display: flex; align-items: center; gap: 8px; margin-right: 5px;
    color: #8e8e89; font-size: 10.5px;
}
.screen-status i, .screen-page-footer > span i {
    width: 6px; height: 6px; border-radius: 50%; background: #c79c55;
    box-shadow: 0 0 0 4px rgba(199, 156, 85, .09);
}
.screen-status.live { color: #aeb7af; }
.screen-status.live i {
    background: #67cc84; box-shadow: 0 0 0 4px rgba(103, 204, 132, .09), 0 0 9px rgba(103, 204, 132, .28);
}
.screen-status.error i { background: #d86565; box-shadow: 0 0 0 4px rgba(216, 101, 101, .09); }
.screen-viewer {
    position: relative; min-height: 0; width: 100%; overflow: hidden;
    display: grid; place-items: center; border: 1px solid #292929;
    border-radius: 10px; background: #080909;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}
.screen-viewer::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015);
}
.screen-orientation-plane,
.screen-zoom-plane {
    position: absolute; inset: 0; min-width: 0; min-height: 0;
    display: grid; place-items: center;
}
.screen-orientation-plane { overflow: hidden; }
.screen-zoom-plane {
    --screen-zoom: 1; --screen-pan-x: 0px; --screen-pan-y: 0px;
    transform: translate3d(var(--screen-pan-x), var(--screen-pan-y), 0)
        scale(var(--screen-zoom));
    transform-origin: 50% 50%;
    transition: transform .16s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}
.screen-zoom-plane.is-gesturing { transition: none; }
.screen-viewer img {
    width: 100%; height: 100%; min-width: 0; min-height: 0;
    display: block; object-fit: contain; background: #050505;
    opacity: 0; transform: scale(.997); transition: opacity .2s ease, transform .28s ease;
}
.screen-viewer.has-frame img { opacity: 1; transform: none; }
.screen-cursor {
    --screen-cursor-inverse-scale: 1;
    position: absolute; left: 0; top: 0; z-index: 3;
    width: 0; height: 0; pointer-events: none;
    transform: translate3d(var(--screen-cursor-x, 0px), var(--screen-cursor-y, 0px), 0);
    will-change: transform;
}
.screen-cursor-visual {
    position: absolute; left: 0; top: 0; width: 11px; height: 14px;
    transform: scale(var(--screen-cursor-inverse-scale));
    transform-origin: 0 0; will-change: transform;
}
.screen-cursor svg {
    position: relative; z-index: 2; display: block; width: 11px; height: 14px;
    overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .96))
        drop-shadow(0 0 3px rgba(86, 237, 128, .76));
}
.screen-cursor-shadow {
    fill: #080a09; stroke: #080a09; stroke-width: 5;
    stroke-linejoin: round; paint-order: stroke fill;
}
.screen-cursor-arrow {
    fill: #fff; stroke: #61e488; stroke-width: 2;
    stroke-linejoin: round; paint-order: stroke fill;
}
.screen-cursor-halo {
    position: absolute; z-index: 1; left: -4px; top: -4px;
    width: 10px; height: 10px; border: 1px solid rgba(104, 242, 143, .88);
    border-radius: 50%; background: rgba(67, 222, 110, .1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .72), 0 0 7px rgba(74, 232, 119, .66);
    animation: screen-cursor-pulse 1.25s ease-out infinite;
}
.screen-placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 7px;
    background: linear-gradient(145deg, #101111, #090a0a);
    transition: opacity .2s ease, visibility .2s ease;
}
.screen-viewer.has-frame .screen-placeholder { opacity: 0; visibility: hidden; }
.screen-placeholder strong { margin-top: 7px; color: #d5d5d1; font-size: 12.5px; font-weight: 590; }
.screen-placeholder small { color: #75756f; font-size: 10.5px; }
.screen-loading-mark {
    width: 24px; height: 24px; border: 2px solid #2d2d2d;
    border-top-color: #77c98c; border-radius: 50%; animation: screen-spin .8s linear infinite;
}
.screen-page-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    min-height: 24px; color: #6f6f6a; font-size: 10px;
}
.screen-page-footer > span { display: flex; align-items: center; gap: 8px; color: #8b9d8f; }
.screen-page-footer > span i { width: 5px; height: 5px; background: #67cc84; box-shadow: 0 0 7px rgba(103, 204, 132, .32); }
.screen-remote-controls { display: none; }
.screen-viewer:fullscreen {
    width: 100vw; height: 100vh; border: 0; border-radius: 0; background: #000;
    touch-action: none; user-select: none; -webkit-user-select: none;
}
.screen-viewer:fullscreen img { object-fit: contain; }

@media (pointer: coarse) {
    .screen-viewer:fullscreen .screen-remote-controls {
        position: absolute; inset: 0; z-index: 4; display: flex;
        align-items: center; justify-content: space-between;
        padding: max(14px, env(safe-area-inset-top))
            max(18px, env(safe-area-inset-right))
            max(14px, env(safe-area-inset-bottom))
            max(18px, env(safe-area-inset-left));
        pointer-events: none;
    }
    .screen-joystick-wrap,
    .screen-mouse-pad,
    .screen-touch-toolbar { pointer-events: auto; }
    .screen-joystick-wrap {
        display: grid; justify-items: center; gap: 8px;
        color: rgba(255, 255, 255, .62); font-size: 8px;
        font-weight: 720; letter-spacing: .12em; text-transform: uppercase;
    }
    .screen-joystick {
        position: relative; width: 108px; height: 108px; border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .2);
        background: rgba(7, 9, 9, .5);
        box-shadow: inset 0 0 28px rgba(255, 255, 255, .035),
            0 10px 34px rgba(0, 0, 0, .34);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        touch-action: none; outline: none;
    }
    .screen-joystick-axis,
    .screen-joystick-axis::before {
        content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px;
        width: 1px; background: rgba(255, 255, 255, .09);
    }
    .screen-joystick-axis::before {
        left: 50%; top: 50%; bottom: auto; width: 80px; height: 1px;
        transform: translate(-50%, -50%);
    }
    .screen-joystick-knob {
        position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
        margin: -22px 0 0 -22px; border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .34);
        background: rgba(224, 230, 226, .84);
        box-shadow: 0 7px 20px rgba(0, 0, 0, .4),
            inset 0 1px rgba(255, 255, 255, .55);
        transform: translate3d(0, 0, 0);
        transition: transform .1s ease-out, background .12s ease;
    }
    .screen-joystick.active .screen-joystick-knob {
        background: rgba(238, 244, 240, .96); transition: background .12s ease;
    }
    .screen-touch-toolbar {
        position: absolute; left: 50%; top: max(10px, env(safe-area-inset-top));
        display: flex; gap: 7px; transform: translateX(-50%);
    }
    .screen-touch-toolbar span {
        height: 30px; display: flex; align-items: center; padding: 0 11px;
        border: 1px solid rgba(120, 211, 145, .22); border-radius: 15px;
        background: rgba(8, 10, 10, .54); color: rgba(175, 229, 190, .86);
        font: 720 9px/1 system-ui, sans-serif; letter-spacing: .06em;
        white-space: nowrap; backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .screen-touch-toolbar select {
        height: 30px; min-width: 86px; padding: 0 8px;
        border: 1px solid rgba(120, 211, 145, .3); border-radius: 15px;
        background: rgba(8, 10, 10, .72); color: rgba(213, 242, 221, .94);
        font: 720 9px/1 system-ui, sans-serif; letter-spacing: .04em;
        color-scheme: dark; outline: none; touch-action: manipulation;
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .screen-touch-toolbar select:focus {
        border-color: rgba(111, 229, 145, .72);
        box-shadow: 0 0 0 2px rgba(91, 220, 127, .13);
    }
    .screen-touch-toolbar select option { background: #151716; color: #e3e8e4; }
    .screen-touch-toolbar button {
        min-width: 38px; height: 30px; padding: 0 10px;
        border: 1px solid rgba(255, 255, 255, .18); border-radius: 15px;
        background: rgba(8, 10, 10, .54); color: rgba(255, 255, 255, .76);
        font: 650 11px/1 system-ui, sans-serif;
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .screen-touch-toolbar button:active,
    .screen-mouse-pad button:active { background: rgba(230, 237, 233, .88); color: #111; }
    .screen-mouse-pad {
        width: 164px; height: 112px; display: grid;
        grid-template-columns: 1fr 46px 1fr; align-items: stretch;
        overflow: hidden; border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 30px 30px 22px 22px; background: rgba(7, 9, 9, .52);
        box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .screen-mouse-pad button {
        border: 0; background: transparent; color: rgba(255, 255, 255, .72);
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .screen-mouse-pad > button {
        display: grid; place-items: center; font: 720 9px/1 system-ui, sans-serif;
        letter-spacing: .05em;
    }
    .screen-mouse-pad > button:first-child { border-right: 1px solid rgba(255, 255, 255, .11); }
    .screen-mouse-pad > button:last-child { border-left: 1px solid rgba(255, 255, 255, .11); }
    .screen-wheel-pad {
        display: grid; grid-template-rows: 1fr 38px 1fr; padding: 5px 0;
        background: rgba(255, 255, 255, .035);
    }
    .screen-wheel-pad button { font-size: 16px; }
    .screen-wheel-pad i {
        display: block; width: 13px; height: 27px; margin: auto;
        border: 1px solid rgba(255, 255, 255, .42); border-radius: 8px;
        background: linear-gradient(90deg, transparent 45%, rgba(255,255,255,.22) 45% 55%, transparent 55%);
    }
    .screen-wheel-pad button:nth-child(2) {
        border-top: 1px solid rgba(255, 255, 255, .1);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
}

@media (pointer: coarse) and (max-height: 410px) {
    .screen-viewer:fullscreen .screen-remote-controls { padding-top: 8px; padding-bottom: 8px; }
    .screen-joystick { width: 88px; height: 88px; }
    .screen-joystick-knob { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
    .screen-mouse-pad { width: 148px; height: 94px; grid-template-columns: 1fr 42px 1fr; }
    .screen-wheel-pad { grid-template-rows: 1fr 32px 1fr; }
}

@media (orientation: portrait) and (pointer: coarse) {
    .screen-viewer:fullscreen .screen-orientation-plane,
    .screen-viewer:fullscreen .screen-remote-controls {
        inset: auto; left: 50%; top: 50%; width: 100vh; height: 100vw;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

@keyframes screen-spin { to { transform: rotate(360deg); } }
@keyframes screen-page-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes screen-cursor-pulse {
    0% { opacity: .95; transform: scale(.58); }
    68%, 100% { opacity: 0; transform: scale(1.45); }
}

.accounts-page {
    width: 100%; max-width: 100%; min-width: 0;
    flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto;
    padding: 46px max(28px, calc((100% - 860px) / 2)) 52px;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-color: #626262 #171717;
    scrollbar-width: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.accounts-page::-webkit-scrollbar { width: 10px; }
.accounts-page::-webkit-scrollbar-track { background: #171717; }
.accounts-page::-webkit-scrollbar-thumb {
    min-height: 44px; border: 2px solid #171717; border-radius: 999px;
    background: #626262; background-clip: padding-box;
}
.accounts-page::-webkit-scrollbar-thumb:hover { background-color: #7a7a7a; }
.accounts-page[hidden] { display: none; }
.accounts-page-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    padding-bottom: 25px; border-bottom: 1px solid var(--line);
}
.accounts-page-header span {
    color: #73736e; font-size: 10px; font-weight: 650;
    letter-spacing: .08em; text-transform: uppercase;
}
.accounts-page-header h1 {
    margin: 7px 0 6px; font-size: 27px; font-weight: 620; letter-spacing: -.035em;
}
.accounts-page-header p { margin: 0; color: var(--muted); font-size: 12px; }
.accounts-header-actions { display: flex; align-items: center; gap: 8px; }
.accounts-page-header button, .accounts-overview button, .account-control-action {
    height: 35px; padding: 0 12px; border: 1px solid #383838; border-radius: 8px;
    background: #1d1d1d; color: #c6c6c2; cursor: pointer; font-size: 11px;
}
.accounts-page-header button:hover, .accounts-overview button:hover, .account-control-action:hover {
    border-color: #555; background: #252525; color: #fff;
}
.accounts-page-header button:disabled, .accounts-overview button:disabled, .account-control-action:disabled {
    opacity: .38; cursor: default;
}
.account-login-panel {
    min-height: 88px; display: flex; align-items: center;
    justify-content: space-between; gap: 24px; padding: 14px 16px;
    border-bottom: 1px solid #345a40;
    background: linear-gradient(100deg, rgba(35,105,58,.25), rgba(23,23,23,0));
}
.account-login-panel[hidden] { display: none; }
.account-login-panel > div { display: grid; gap: 4px; }
.account-login-panel span {
    color: #87bb94; font-size: 9px; font-weight: 650;
    letter-spacing: .05em; text-transform: uppercase;
}
.account-login-panel strong {
    color: #f1f1ed; font-size: 22px; font-weight: 650;
    letter-spacing: .12em;
}
.account-login-panel small { color: #8c8c87; font-size: 10px; }
.account-login-actions { display: flex; align-items: center; gap: 8px; }
.account-login-panel button {
    height: 35px; flex: 0 0 auto; padding: 0 12px;
    border: 1px solid #41684d; border-radius: 8px;
    background: #203929; color: #b8ddc1; cursor: pointer; font-size: 11px;
}
.account-login-panel button:hover { background: #294a35; color: #fff; }
.account-login-panel button.danger {
    border-color: #70433f; background: #382523; color: #e3aaa4;
}
.account-login-panel button.danger:hover {
    background: #4b2d2a; color: #fff;
}
.account-login-panel button:disabled { opacity: .45; cursor: default; }
.accounts-overview {
    min-height: 82px; display: flex; align-items: center; gap: 34px;
    border-bottom: 1px solid var(--line);
}
.accounts-overview > div { display: grid; gap: 3px; }
.accounts-overview strong { font-size: 18px; font-weight: 610; letter-spacing: -.025em; }
.accounts-overview span { color: #777; font-size: 9.5px; }
.accounts-overview button { margin-left: auto; }
.accounts-overview button.enabled { border-color: #345a40; color: #8bc49b; }
.smart-threshold { display: grid; gap: 5px; margin-left: auto; }
.smart-threshold > span:first-child { color: #777; font-size: 9.5px; }
.smart-threshold > span:last-child {
    width: 76px; height: 35px; display: flex; align-items: center;
    border: 1px solid #383838; border-radius: 8px; background: #1d1d1d;
}
.smart-threshold input {
    width: 52px; height: 100%; padding: 0 4px 0 11px; border: 0;
    outline: none; background: transparent; color: #ddd; font-size: 12px;
}
.smart-threshold b { color: #777; font-size: 11px; font-weight: 500; }
.smart-threshold:focus-within > span:last-child { border-color: #5b5b5b; }
.smart-threshold input:disabled { opacity: .45; }
.accounts-overview .smart-threshold + button { margin-left: 0; }
.accounts-control-list { display: grid; }
.account-control-row {
    min-height: 104px; display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(210px, .8fr) 82px auto;
    align-items: center; gap: 18px; border-bottom: 1px solid var(--line);
}
.account-pool-toggle {
    width: 30px; height: 30px; display: grid; place-items: center;
    cursor: pointer;
}
.account-pool-toggle input {
    position: absolute; width: 1px; height: 1px; opacity: 0;
    pointer-events: none;
}
.account-pool-toggle span {
    width: 25px; height: 25px; display: grid; place-items: center;
    border: 2px solid #494949; border-radius: 7px;
    background: #1b1b1b;
    transition: border-color .14s ease, background .14s ease,
                transform .12s ease, opacity .14s ease;
}
.account-pool-toggle span::after {
    content: ""; width: 9px; height: 5px;
    border: solid #102116; border-width: 0 0 3px 3px;
    opacity: 0; transform: translateY(-1px) rotate(-45deg) scale(.7);
    transition: opacity .12s ease, transform .14s ease;
}
.account-pool-toggle input:checked + span {
    border-color: #63c77d; background: #63c77d;
}
.account-pool-toggle input:checked + span::after {
    opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1);
}
.account-pool-toggle:hover span { border-color: #6b6b6b; transform: scale(1.04); }
.account-pool-toggle input:focus-visible + span {
    outline: 2px solid #91d7a3; outline-offset: 3px;
}
.account-pool-toggle input:disabled + span {
    opacity: .28; cursor: default; transform: none;
}
.account-control-identity { min-width: 0; display: grid; gap: 5px; padding-left: 16px; }
.account-control-identity strong {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13.5px; font-weight: 600;
}
.account-control-identity strong.team { color: #62a5ff; }
.account-control-identity span, .account-control-reset span {
    color: #777; font-size: 10px;
}
.account-control-reset { display: grid; gap: 5px; }
.account-control-reset strong { color: #bdbdb8; font-size: 11px; font-weight: 540; }
.account-control-reset.estimated strong { color: #c6aa64; }
.account-control-reset.estimated span { color: #9f8d60; }
.account-control-limit { display: grid; justify-items: end; gap: 7px; }
.account-control-limit strong { font-size: 20px; font-weight: 620; letter-spacing: -.03em; }
.account-control-limit i {
    width: 74px; height: 3px; overflow: hidden; border-radius: 999px;
    background: #303030; font-style: normal;
}
.account-control-limit i::after {
    content: ""; display: block; width: var(--remaining, 0%); height: 100%;
    background: #858581;
}
.account-control-row.low .account-control-limit strong {
    color: var(--limit-color, #d8a09a);
}
.account-control-row.low .account-control-limit i::after {
    background: var(--limit-color, var(--danger));
}
.account-control-row.healthy .account-control-limit strong { color: #31d36b; }
.account-control-row.healthy .account-control-limit i::after { background: #25c963; }
.account-control-row.estimated-report .account-control-limit strong {
    color: #c6aa64;
}
.account-control-row.estimated-report .account-control-limit i::after {
    background: #b69b58;
}
.account-control-row.active {
    background:
        linear-gradient(rgba(87, 180, 111, .72), rgba(87, 180, 111, .72))
            52px 0 / 3px 100% no-repeat,
        linear-gradient(
            105deg,
            rgba(35, 105, 58, .38) 0%,
            rgba(25, 76, 43, .22) 48%,
            rgba(16, 16, 16, 0) 100%
        ) 52px 0 / calc(100% - 52px) 100% no-repeat;
}
.account-control-row.active .account-control-identity::before {
    content: "Активний"; width: max-content; color: #87bb94;
    font-size: 9px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
}
.account-control-row.unavailable { opacity: .62; }
.account-control-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.account-more-button {
    width: 35px; padding: 0; display: grid; place-items: center;
    font-size: 20px; line-height: 1; letter-spacing: 0;
}
.account-action-menu form > button:disabled {
    opacity: .38; cursor: default; pointer-events: none;
}
.account-action-menu {
    position: fixed; inset: auto; top: var(--account-menu-top, 80px);
    left: var(--account-menu-left, 12px); width: min(276px, calc(100vw - 24px));
    margin: 0; border-color: #343434; border-radius: 12px;
    background: #202020; box-shadow: 0 18px 55px rgba(0,0,0,.56);
    animation: account-menu-in .14s cubic-bezier(.2,.8,.2,1) both;
}
.account-action-menu::backdrop {
    background: rgba(0,0,0,.22); backdrop-filter: none;
}
.account-action-menu form { padding: 6px; }
.account-action-menu header {
    gap: 2px; margin: 0 4px 5px; padding: 7px 7px 10px;
    border-bottom: 1px solid #303030;
}
.account-action-menu header strong { font-size: 12px; font-weight: 570; }
.account-action-menu form > button {
    display: flex; align-items: center; gap: 10px; height: 40px;
    padding: 0 10px; border-radius: 7px; font-size: 12px;
    transition: background .12s ease, color .12s ease, transform .1s ease;
}
.account-action-menu form > button:hover { background: #2a2a2a; color: #f1f1ed; }
.account-action-menu form > button.danger:hover { background: #342323; color: #ff9b96; }
.account-action-menu form > button svg {
    width: 16px; height: 16px; flex: 0 0 16px; fill: none;
    stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round;
}
.accounts-page-note { margin: 18px 0 0; color: #666; font-size: 10px; line-height: 1.5; }

.settings-page {
    width: 100%; max-width: 100%; min-width: 0;
    flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto;
    padding: 42px max(26px, calc((100% - 940px) / 2)) 54px;
    overscroll-behavior-y: contain; scrollbar-gutter: stable;
}
.settings-page-header {
    position: relative; padding: 0 96px 24px 0;
    border-bottom: 1px solid var(--line);
}
.settings-back {
    position: absolute; top: 0; right: 0; height: 32px; padding: 0 10px;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #353535; border-radius: 8px; background: #1a1a1a;
    color: #a4a49f; font: inherit; font-size: 10.5px; cursor: pointer;
}
.settings-back:hover { background: #242424; color: #ededed; }
.settings-back:active { transform: scale(.96); }
.settings-page-header > span, .settings-panel header > span {
    color: #73736e; font-size: 10px; font-weight: 650;
    letter-spacing: .08em; text-transform: uppercase;
}
.settings-page-header h1 {
    margin: 7px 0 6px; font-size: 27px; font-weight: 620; letter-spacing: -.035em;
}
.settings-page-header p, .settings-panel header p {
    margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5;
}
.settings-layout {
    min-height: 390px; display: grid; grid-template-columns: 188px minmax(0, 1fr);
}
.settings-sidebar {
    padding: 25px 20px 0 0; border-right: 1px solid var(--line);
}
.settings-sidebar button {
    width: 100%; min-height: 54px; padding: 9px 10px; display: grid; gap: 4px;
    border: 0; border-radius: 8px; background: transparent; color: #8d8d88;
    text-align: left; cursor: pointer;
}
.settings-sidebar button:hover, .settings-sidebar button.active {
    background: #1d1d1d; color: #ededed;
}
.settings-sidebar strong { font-size: 12px; font-weight: 590; }
.settings-sidebar small { color: #686864; font-size: 9px; }
.settings-content { min-width: 0; padding: 28px 0 0 34px; }
.settings-panel { max-width: 620px; animation: reveal .16s ease; }
.settings-panel header { padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.settings-panel h2 {
    margin: 6px 0 7px; font-size: 20px; font-weight: 610; letter-spacing: -.025em;
}
.performance-grid {
    margin-top: 18px; display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
    overflow: hidden; border: 1px solid var(--line); border-radius: 12px;
    background: var(--line);
}
.performance-grid article {
    min-width: 0; min-height: 106px; padding: 15px;
    display: flex; flex-direction: column; justify-content: space-between;
    background: #141414;
}
.performance-grid span {
    color: #858580; font-size: 10px; line-height: 1.3;
}
.performance-grid strong {
    margin: 7px 0 3px; overflow: hidden; color: #f0f0ed;
    font-size: 20px; font-weight: 620; letter-spacing: -.035em;
    text-overflow: ellipsis; white-space: nowrap;
}
.performance-grid strong[data-health="ready"] { color: #76d69a; }
.performance-grid strong[data-health="working"] { color: #dfc477; }
.performance-grid strong[data-health="error"] { color: #ef8179; }
.performance-grid small { color: #60605c; font-size: 9px; }
.development-root-setting {
    margin-top: 18px; padding: 18px; display: grid; gap: 10px;
    border: 1px solid var(--line); border-radius: 12px; background: #141414;
}
.development-root-setting label { display: grid; gap: 9px; }
.development-root-setting label > span {
    color: #b8b8b3; font-size: 11px; font-weight: 570;
}
.development-root-setting input {
    width: 100%; height: 42px; padding: 0 12px; box-sizing: border-box;
    border: 1px solid #393939; border-radius: 8px; outline: 0;
    background: #0f0f0f; color: #ededed; font: inherit; font-size: 11px;
}
.development-root-setting input:focus { border-color: #747470; }
.development-root-setting small { color: #70706c; font-size: 9.5px; line-height: 1.5; }
.device-policy-grid {
    margin-top: 18px; display: grid; gap: 8px;
}
.device-policy-grid article {
    min-height: 72px; padding: 14px 16px; display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    border: 1px solid var(--line); border-radius: 11px; background: #141414;
}
.device-policy-icon {
    width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: 9px; background: #222; color: #d8d8d3; font-size: 14px;
}
.device-policy-grid article > div { display: grid; gap: 4px; }
.device-policy-grid strong { font-size: 11.5px; font-weight: 590; }
.device-policy-grid article > div > span { color: #7d7d78; font-size: 9.5px; }
.device-policy-grid b {
    color: #80b38d; font-size: 9.5px; font-weight: 600;
}
.device-policy-blocked {
    margin-top: 12px; padding: 12px 14px; border-left: 2px solid #714444;
    border-radius: 0 8px 8px 0; background: #191313;
    color: #a78282; font-size: 9.5px; line-height: 1.5;
}
.group-settings-toolbar {
    min-height: 58px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
}
.group-settings-toolbar span { color: #7eaa89; font-size: 10px; }
.group-settings-toolbar span.error { color: var(--danger); }
.group-settings-toolbar button {
    height: 34px; padding: 0 11px; border: 1px solid #3a3a3a;
    border-radius: 8px; background: #202020; color: #d0d0cb;
    cursor: pointer; font-size: 10.5px;
}
.group-settings-list { display: grid; gap: 8px; padding-bottom: 22px; }
.group-setting-row {
    min-height: 94px; padding: 12px; display: grid;
    grid-template-columns: 18px 48px minmax(150px, 1fr) auto;
    align-items: center; gap: 11px;
    border: 1px solid var(--line); border-radius: 11px; background: #141414;
}
.group-setting-row.dragging { opacity: .48; border-color: #666; }
.group-setting-handle {
    color: #62625e; cursor: grab; font-size: 13px; letter-spacing: -3px;
}
.group-setting-handle:active { cursor: grabbing; }
.group-setting-preview {
    width: 46px; height: 46px; display: grid; place-items: center;
    overflow: hidden; border: 1px solid #3b3b3b; border-radius: 10px;
    background: #222; color: #aaa; cursor: pointer;
}
.group-setting-preview img { display: block; object-fit: contain; }
.group-setting-preview > span { font-size: 14px; font-weight: 650; }
.group-setting-editor { min-width: 0; display: grid; gap: 10px; }
.group-setting-name {
    width: 100%; height: 34px; padding: 0 9px; border: 1px solid #383838;
    border-radius: 7px; outline: 0; background: #101010; color: #ededed;
    font-size: 11px;
}
.group-setting-name:focus { border-color: #666; }
.group-setting-size-line,
.group-setting-range-line {
    display: grid; grid-template-columns: auto minmax(70px, 1fr) 38px;
    align-items: center; gap: 8px; color: #777; font-size: 9px;
}
.group-setting-size,
.group-setting-range-line input {
    width: 100%; accent-color: #d7d7d2;
}
.group-setting-size-line output,
.group-setting-range-line output { text-align: right; }
.group-setting-visibility {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    color: #aaa; font-size: 10px; cursor: pointer;
}
.group-setting-visibility input {
    width: 17px; height: 17px; margin: 0;
    accent-color: #ededed; cursor: pointer;
}
.group-setting-actions { display: grid; gap: 5px; }
.group-setting-actions button {
    height: 27px; padding: 0 8px; border: 0; border-radius: 6px;
    background: #ededed; color: #111; cursor: pointer; font-size: 9px;
}
.group-setting-actions button.secondary {
    border: 1px solid #3b3b3b; background: transparent; color: #999;
}
.group-setting-actions button.danger {
    border: 1px solid #603838; background: transparent; color: #d77;
}
.interface-icon-editor {
    min-height: 148px; display: flex; align-items: center; gap: 22px;
    border-bottom: 1px solid var(--line);
}
.interface-icon-previews { display: flex; align-items: flex-start; gap: 12px; }
.icon-kind-option {
    margin: 0; padding: 5px; display: grid; justify-items: center; gap: 7px;
    border: 1px solid transparent; border-radius: 13px; background: transparent;
    color: #777; font: inherit; font-size: 9px; cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease, transform .1s ease;
}
.icon-kind-option:hover { background: #191919; color: #aaa; }
.icon-kind-option.active { border-color: #555; background: #202020; color: #ededed; }
.icon-kind-option:active { transform: scale(.97); }
.icon-kind-option:focus-visible { outline: 2px solid #777; outline-offset: 2px; }
.interface-icon-preview {
    width: 72px; height: 72px; display: grid; place-items: center;
    border: 1px solid #363636; border-radius: 16px; background: #171717;
}
.interface-icon-preview > span {
    width: var(--preview-icon-size, 22px); height: var(--preview-icon-size, 22px);
    display: grid; place-items: center; transition: width .14s ease, height .14s ease;
}
.interface-icon-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.desktop-icon-preview {
    width: 72px; height: 72px; display: grid; place-items: center;
    border: 1px solid #363636; border-radius: 16px; background: #171717;
}
.desktop-icon-preview > span {
    width: 52px; height: 52px; padding: 10%; overflow: hidden; display: grid; place-items: center;
    transition: border-radius .14s ease, background .14s ease;
}
.desktop-icon-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.interface-icon-actions { min-width: 0; display: grid; grid-template-columns: auto auto; gap: 7px 8px; }
.interface-icon-actions label, .interface-icon-actions button {
    height: 34px; padding: 0 11px; display: inline-flex; align-items: center;
    border: 1px solid #3a3a3a; border-radius: 8px; background: #1e1e1e;
    color: #c2c2bd; cursor: pointer; font-size: 10.5px;
}
.interface-icon-actions button { color: #858580; }
.interface-icon-actions label:active, .interface-icon-actions button:active { transform: scale(.97); background: #292929; }
.interface-icon-actions small { grid-column: 1 / -1; color: #666; font-size: 9px; }
.interface-size-setting {
    min-height: 92px; display: grid; align-content: center; gap: 14px;
    border-bottom: 1px solid var(--line);
}
.interface-size-setting > span { display: flex; align-items: center; justify-content: space-between; }
.interface-size-setting strong { font-size: 11px; font-weight: 560; }
.interface-size-setting output { color: #858580; font-size: 10px; }
.interface-size-setting input { width: 100%; accent-color: #d7d7d2; cursor: pointer; }
.interface-invert-setting {
    min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 14px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.interface-invert-setting > span { display: grid; gap: 5px; }
.interface-invert-setting strong { font-size: 11px; font-weight: 560; }
.interface-invert-setting small { color: #6f6f6b; font-size: 9.5px; }
.interface-invert-setting input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.interface-invert-setting i {
    position: relative; width: 34px; height: 20px; border: 1px solid #454545;
    border-radius: 999px; background: #252525; transition: background .15s ease, border-color .15s ease;
}
.interface-invert-setting i::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
    border-radius: 50%; background: #92928e; transition: transform .15s ease, background .15s ease;
}
.interface-invert-setting input:checked + i { border-color: #777; background: #deded9; }
.interface-invert-setting input:checked + i::after { transform: translateX(14px); background: #191919; }
.interface-invert-setting input:focus-visible + i { outline: 2px solid #777; outline-offset: 2px; }
.interface-builder-setting {
    min-height: 116px; display: grid; grid-template-columns: 170px minmax(0, 1fr);
    align-items: center; gap: 24px; border-bottom: 1px solid var(--line);
}
.interface-color-setting, .interface-radius-setting { display: grid; gap: 11px; }
.interface-background-toggle {
    min-height: 42px; display: flex; align-items: center; justify-content: space-between;
    gap: 14px; cursor: pointer;
}
.interface-background-toggle > span { display: grid; gap: 4px; }
.interface-background-toggle strong { font-size: 11px; font-weight: 560; }
.interface-background-toggle small { color: #777; font-size: 9.5px; }
.interface-background-toggle input { width: 17px; height: 17px; accent-color: #ededed; cursor: pointer; }
.interface-color-setting > span, .interface-radius-setting > span {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.interface-color-setting strong, .interface-radius-setting strong { font-size: 11px; font-weight: 560; }
.interface-color-setting small, .interface-radius-setting output { color: #777; font-size: 9.5px; }
.interface-color-setting input {
    width: 100%; height: 34px; padding: 3px; border: 1px solid #3b3b3b;
    border-radius: 8px; background: #191919; cursor: pointer;
}
.interface-radius-setting input { width: 100%; accent-color: #d7d7d2; cursor: pointer; }
.settings-save-row {
    min-height: 66px; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.settings-save-row span { margin-right: auto; color: #7eaa89; font-size: 10px; }
.settings-save-row span.error { color: var(--danger); }
.settings-save-row button, .settings-link-action {
    height: 36px; padding: 0 13px; border: 0; border-radius: 8px;
    background: #ededed; color: #111; cursor: pointer; font-size: 11px; font-weight: 610;
}
.settings-save-row button:active, .settings-link-action:active { transform: scale(.97); }
.settings-save-row button:disabled { opacity: .45; }
.settings-save-row button.secondary {
    border: 1px solid #3b3b3b; background: transparent; color: #b8b8b3; font-weight: 540;
}
.settings-link-action {
    width: 100%; margin-top: 18px; display: flex; align-items: center; justify-content: space-between;
    border: 1px solid #343434; background: transparent; color: #c2c2bd; text-align: left;
}
.settings-danger-zone {
    margin-top: 34px; padding-top: 20px; display: flex; align-items: center;
    justify-content: space-between; gap: 20px; border-top: 1px solid var(--line);
}
.settings-danger-zone > div { display: grid; gap: 5px; }
.settings-danger-zone strong { font-size: 11.5px; font-weight: 580; }
.settings-danger-zone span { color: #72726e; font-size: 9.5px; }
.settings-danger-zone button {
    height: 35px; padding: 0 12px; border: 1px solid #6a3434; border-radius: 8px;
    background: transparent; color: #e58484; cursor: pointer; font-size: 10.5px;
}
.settings-danger-zone button:active { transform: scale(.96); background: #321f1f; }

.project-dialog {
    width: min(92vw, 470px); padding: 0; border: 1px solid #3a3a3a; border-radius: 14px;
    background: #1b1b1b; color: var(--ink); box-shadow: 0 28px 90px rgba(0,0,0,.65);
}
.project-dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(2px); }
.project-dialog form { padding: 22px; }
.project-dialog header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.project-dialog header small { color: #777; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.project-dialog h2 { margin: 5px 0 0; font-size: 21px; font-weight: 620; letter-spacing: -.025em; }
.project-dialog header button {
    width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent;
    color: #999; cursor: pointer; font-size: 20px;
}
.project-dialog header button:hover { background: #2b2b2b; color: #fff; }
.project-icon-editor { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.project-icon-preview {
    width: 58px; height: 58px; flex: 0 0 58px; overflow: hidden; display: grid; place-items: center;
    border: 1px solid #3b3b3b; border-radius: 13px; background: #292929;
    color: #d2d2cd; font-size: 18px; font-weight: 700;
}
.project-icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.project-icon-editor > div:last-child { display: grid; grid-template-columns: auto auto; gap: 5px 8px; align-items: center; }
.project-icon-pick, .project-icon-editor button {
    height: 30px; padding: 0 9px; display: inline-flex; align-items: center; border: 1px solid #3c3c3c;
    border-radius: 7px; background: #222; color: #c4c4bf; cursor: pointer; font-size: 10.5px;
}
.project-icon-editor button { color: #888; }
.project-icon-editor small { grid-column: 1 / -1; color: #6f6f6b; font-size: 9.5px; }
.project-field { display: grid; gap: 7px; margin-top: 14px; }
.project-field > span { color: #a3a39e; font-size: 10.5px; }
.project-field input, .project-field select {
    width: 100%; height: 39px; padding: 0 11px; border: 1px solid #3b3b3b; border-radius: 8px;
    outline: 0; background: #151515; color: var(--ink); font-size: 12px;
}
.project-field input:focus, .project-field select:focus { border-color: #666; }
.project-field input[readonly] { color: #777; background: #181818; }
.project-field small { color: #696965; font-size: 9.5px; }
.project-form-error { min-height: 16px; margin: 10px 0 0; color: var(--danger); font-size: 10px; }
.project-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.project-dialog footer button {
    height: 36px; padding: 0 13px; border-radius: 8px; cursor: pointer; font-size: 11px;
}
.project-dialog footer .secondary { border: 1px solid #3b3b3b; background: transparent; color: #aaa; }
.project-dialog footer .primary { border: 0; background: #ededed; color: #111; font-weight: 620; }
.project-dialog footer button:disabled { opacity: .45; cursor: default; }
.project-dialog.rename-only .project-icon-editor,
.project-dialog.rename-only .project-path-field,
.project-dialog.rename-only .project-group-field { display: none; }

.project-action-menu, .project-delete-dialog {
    padding: 0; border: 1px solid #3a3a3a; background: #1d1d1d; color: var(--ink);
    box-shadow: 0 24px 70px rgba(0,0,0,.62);
}
.project-action-menu::backdrop, .project-delete-dialog::backdrop {
    background: rgba(0,0,0,.58); backdrop-filter: blur(2px);
}
.project-action-menu { width: min(88vw, 310px); border-radius: 15px; }
.project-action-menu form { padding: 8px; }
.project-action-menu header { display: grid; gap: 3px; padding: 10px 10px 9px; }
.project-action-menu header small, .project-delete-dialog > form > small {
    color: #72726e; font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em;
}
.project-action-menu header strong {
    overflow: hidden; color: #d8d8d3; font-size: 13px; text-overflow: ellipsis; white-space: nowrap;
}
.project-action-menu form > button {
    width: 100%; height: 42px; padding: 0 10px; border: 0; border-radius: 9px;
    background: transparent; color: #c5c5c0; text-align: left; font: inherit; font-size: 13px;
}
.project-action-menu form > button:active { background: #2d2d2d; transform: scale(.985); }
.project-action-menu form > button.danger { color: #ee8686; }
.project-action-menu form > button.menu-divider {
    margin-top: 4px; border-top: 1px solid #343434; border-radius: 0;
}
.group-action-status {
    min-height: 13px; color: #7eaa89; font-size: 9.5px;
}
.group-action-status:empty { display: none; }
.group-action-status.error { color: var(--danger); }
.group-rename-dialog { width: min(92vw, 420px); }
.thread-rename-dialog { width: min(92vw, 440px); }
.project-action-menu form > button.cancel {
    margin-top: 4px; border-top: 1px solid #343434; border-radius: 0 0 9px 9px; color: #858580;
}
.connection-action-menu form > p {
    margin: 0 10px 11px;
    color: #969691;
    font-size: 12px;
    line-height: 1.5;
}
.connection-action-status {
    display: block;
    min-height: 17px;
    padding: 2px 10px 0;
    color: #9b9b96;
    font-size: 10px;
    line-height: 1.4;
}
.connection-action-status.error { color: var(--danger); }
.connection-action-menu form > button:disabled {
    opacity: .42;
    pointer-events: none;
}
.project-delete-dialog { width: min(88vw, 390px); border-radius: 15px; }
.project-delete-dialog form { padding: 20px; }
.project-delete-dialog h2 { margin: 5px 0 10px; font-size: 19px; }
.project-delete-dialog p { margin: 0; color: #969691; font-size: 12px; line-height: 1.5; }
.project-delete-dialog .project-delete-error { min-height: 18px; margin-top: 8px; color: var(--danger); font-size: 10px; }
.project-delete-dialog footer {
    display: flex; flex-wrap: wrap; justify-content: flex-end;
    gap: 8px; margin-top: 8px;
}
.project-delete-dialog footer button {
    height: 37px; padding: 0 13px; border-radius: 8px; font: inherit; font-size: 11px;
}
.project-delete-dialog footer .secondary { border: 1px solid #3b3b3b; background: transparent; color: #aaa; }
.project-delete-dialog footer .danger { border: 0; background: #b94040; color: #fff; }
.project-delete-dialog footer button:disabled { opacity: .45; }
.stop-confirm-dialog {
    width: min(90vw, 410px);
    overflow: hidden;
    border-color: rgba(225,92,86,.28);
    background:
        radial-gradient(circle at 50% -25%, rgba(201,72,67,.2), transparent 52%),
        #1d1d1d;
}
.stop-confirm-dialog form {
    display: grid; justify-items: center; padding: 25px 24px 22px;
    text-align: center;
}
.stop-confirm-dialog .stop-confirm-icon {
    width: 48px; height: 48px; margin-bottom: 14px;
    display: grid; place-items: center; border-radius: 15px;
    background: rgba(201,72,67,.14); color: #f07b76;
    box-shadow: inset 0 0 0 1px rgba(240,123,118,.16);
}
.stop-confirm-dialog .stop-confirm-icon svg {
    width: 24px; height: 24px; fill: currentColor;
}
.stop-confirm-dialog h2 { margin-top: 6px; font-size: 21px; }
.stop-confirm-dialog p { max-width: 320px; color: #a7a7a1; font-size: 12.5px; }
.stop-confirm-dialog footer {
    width: 100%; margin-top: 20px; display: grid;
    grid-template-columns: 1fr 1fr; gap: 9px;
}
.stop-confirm-dialog footer button { width: 100%; height: 40px; }
.stop-confirm-dialog footer .danger {
    background: #c94843;
    box-shadow: 0 8px 24px rgba(201,72,67,.2);
}
.stop-confirm-dialog footer .danger:hover { background: #d6534e; }

.access-confirm-dialog {
    --access-accent: #d2aa68;
    --access-accent-soft: rgba(210,170,104,.13);
    width: min(90vw, 420px); overflow: hidden;
    border-color: rgba(210,170,104,.26); background: #1d1d1d;
}
.access-confirm-dialog[open] {
    animation: access-dialog-in .18s cubic-bezier(.2,.8,.2,1) both;
}
.access-confirm-dialog::backdrop {
    animation: access-backdrop-in .16s ease-out both;
}
.access-confirm-dialog[data-mode="ask"] {
    --access-accent: #9fb7ad;
    --access-accent-soft: rgba(159,183,173,.13);
    border-color: rgba(159,183,173,.24);
}
.access-confirm-dialog[data-mode="full"] {
    --access-accent: #ef7d77;
    --access-accent-soft: rgba(239,125,119,.13);
    border-color: rgba(239,125,119,.3); background: #211d1d;
}
.access-confirm-dialog form {
    display: grid; justify-items: center; padding: 25px 24px 22px;
    text-align: center;
}
.access-confirm-icon {
    width: 50px; height: 50px; margin-bottom: 14px;
    display: grid; place-items: center; border-radius: 15px;
    background: var(--access-accent-soft); color: var(--access-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--access-accent) 20%, transparent);
    animation: access-icon-in .24s .04s cubic-bezier(.2,.8,.2,1) both;
}
.access-confirm-icon span {
    font-size: 22px; font-weight: 680; line-height: 1;
}
.access-confirm-dialog > form > small { color: var(--access-accent); }
.access-confirm-dialog h2 {
    margin: 6px 0 9px; font-size: 21px; letter-spacing: -.025em;
}
.access-confirm-dialog #access-confirm-text {
    max-width: 338px; min-height: 38px; color: #aaa9a3; font-size: 12.5px;
}
.access-confirm-transition {
    width: 100%; margin-top: 18px; padding: 12px 0;
    display: grid; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr);
    align-items: center; gap: 8px;
    border-top: 1px solid #323230; border-bottom: 1px solid #323230;
    color: #777772; font-size: 11.5px;
}
.access-confirm-transition span,
.access-confirm-transition strong {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.access-confirm-transition strong { color: var(--access-accent); font-weight: 640; }
.access-confirm-transition svg {
    width: 16px; height: 16px; fill: none; stroke: #686864;
    stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
    animation: access-arrow-in .28s .08s ease-out both;
}
.access-confirm-dialog .access-confirm-error {
    min-height: 16px; margin-top: 8px; color: #e88480; font-size: 10.5px;
}
.access-confirm-dialog footer {
    width: 100%; margin-top: 8px; display: grid;
    grid-template-columns: 1fr 1fr; gap: 9px;
}
.access-confirm-dialog footer button { width: 100%; height: 40px; }
.access-confirm-dialog .access-confirm-submit {
    border: 0; border-radius: 8px; background: var(--access-accent);
    color: #171713; font: inherit; font-size: 11px; font-weight: 650;
    cursor: pointer; transition: filter .13s ease, transform .13s ease;
}
.access-confirm-dialog[data-mode="full"] .access-confirm-submit { color: #fff; }
.access-confirm-dialog .access-confirm-submit:hover { filter: brightness(1.08); }
.access-confirm-dialog .access-confirm-submit:active { transform: scale(.98); }
.access-confirm-dialog .access-confirm-submit:disabled { opacity: .45; cursor: default; }

@keyframes access-dialog-in {
    from { opacity: 0; transform: translateY(7px) scale(.982); }
}
@keyframes access-backdrop-in { from { opacity: 0; } }
@keyframes access-icon-in {
    from { opacity: 0; transform: translateY(4px) scale(.88); }
}
@keyframes access-arrow-in {
    from { opacity: 0; transform: translateX(-4px); }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes reveal { from { opacity: 0; transform: translateY(-3px); } }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes navigation-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes thread-list-in { from { opacity: 0; transform: translateY(-3px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { transform: scale(.6); opacity: .45; } }
@keyframes stop-request-pulse { 50% { transform: scale(.72); opacity: .58; } }
@keyframes activity-row-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes refresh-spin { to { transform: rotate(360deg); } }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-core {
    50% { opacity: .4; transform: scale(.62); }
}
@keyframes loading-copy-pulse {
    50% { color: #a9aaa5; }
}
@keyframes loading-reveal {
    from { opacity: 0; transform: translateY(3px); }
}
@keyframes account-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(.975); }
}
@keyframes active-task-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes active-task-breathe {
    0%, 100% {
        box-shadow: inset 0 0 0 1px rgba(111, 225, 144, .14),
                    0 0 0 rgba(57, 197, 101, 0);
    }
    50% {
        box-shadow: inset 0 0 0 1px rgba(126, 237, 157, .28),
                    0 0 13px rgba(57, 197, 101, .12);
    }
}
@keyframes active-task-sheen {
    0%, 20% { transform: translateX(-125%); opacity: 0; }
    34% { opacity: 1; }
    66% { opacity: .75; }
    82%, 100% { transform: translateX(125%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .screen-cursor-halo { animation: none; opacity: .72; }
    .navigation-enter,
    .project.navigation-enter.open .thread-list-inner { animation: none; }
    .thread-list { transition: none; }
    .connection.holding::after { animation: none; opacity: 1; }
    .loading-feedback, .loading-mark, .loading-mark::after,
    .loading-copy strong, .access-confirm-dialog[open],
    .access-confirm-dialog::backdrop, .access-confirm-icon,
    .access-confirm-transition svg { animation: none; }
    .project-group-heading.task-active,
    .project-button.task-active,
    .thread-button.task-active,
    .project-group-heading.task-active::before,
    .project-button.task-active::before,
    .thread-button.task-active::before { animation: none; }
    .project-group-heading.task-active::before,
    .project-button.task-active::before,
    .thread-button.task-active::before { display: none; }
}

@media (max-width: 980px) {
    .shell {
        grid-template-columns: clamp(258px, 29vw, 286px) minmax(0, 1fr);
    }
    .select-wrap select { max-width: 130px; }
}

@media (max-width: 720px) {
    html, body {
        position: fixed; inset: 0;
        width: 100%; max-width: 100vw;
        overflow: hidden;
    }
    body > * { max-width: 100vw; }
    html, body, body * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    }
    button, [role="button"], a, label, .connection, .project-row {
        -webkit-touch-callout: none;
        touch-action: manipulation;
        user-select: none;
    }
    button:focus:not(:focus-visible),
    [role="button"]:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }
    .shell {
        position: fixed; inset: 0; width: 100%; max-width: 100%;
        overflow-x: clip; display: block;
        height: var(--app-height, 100dvh); max-height: var(--app-height, 100dvh);
    }
    .main, .view-stack, .chat-view, .accounts-page, .settings-page {
        width: 100%; max-width: 100vw; min-width: 0;
        overflow-x: hidden;
    }
    .sidebar {
        position: fixed; inset: 0 auto 0 0; width: min(86vw, 310px);
        transform: translateX(-102%); transition: transform .22s ease; box-shadow: 20px 0 60px rgba(0,0,0,.5);
    }
    .shell.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-backdrop {
        position: fixed; inset: 0; z-index: 19; border: 0; display: block;
        background: rgba(0,0,0,.5); opacity: 0; visibility: hidden;
        pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s;
    }
    .shell.sidebar-open .sidebar-backdrop {
        opacity: 1; visibility: visible; pointer-events: auto;
        transition: opacity .22s ease;
    }
    .sidebar-backdrop:active { background: rgba(0,0,0,.56); }
    .project-actions {
        display: block; opacity: 1; right: 3px;
        width: 32px; height: 32px;
    }
    .project-button { padding-right: 38px; }
    .project-row.holding .project-button { background: #303030; transform: scale(.985); }
    .mobile-menu {
        position: relative; width: 38px; height: 38px; display: grid; flex: 0 0 auto;
        place-items: center; color: #c9c9c5; transition: transform .12s ease, background .16s ease;
        touch-action: manipulation;
    }
    .mobile-menu:active { transform: scale(.88); background: #292929; }
    .mobile-menu[aria-expanded="true"] { background: #292929; color: #fff; }
    .menu-lines { position: relative; width: 19px; height: 14px; display: block; }
    .menu-lines > span {
        position: absolute; left: 0; width: 19px; height: 2px; border-radius: 2px;
        background: currentColor; transform-origin: center;
        transition: top .16s ease, transform .16s ease, opacity .12s ease;
    }
    .menu-lines > span:nth-child(1) { top: 0; }
    .menu-lines > span:nth-child(2) { top: 6px; }
    .menu-lines > span:nth-child(3) { top: 12px; }
    .mobile-menu[aria-expanded="true"] .menu-lines > span:nth-child(1) {
        top: 6px; transform: rotate(45deg);
    }
    .mobile-menu[aria-expanded="true"] .menu-lines > span:nth-child(2) { opacity: 0; transform: scaleX(.35); }
    .mobile-menu[aria-expanded="true"] .menu-lines > span:nth-child(3) {
        top: 6px; transform: rotate(-45deg);
    }
    .topbar { gap: 7px; padding: 0 10px; }
    .release-notice { gap: 9px; padding: 9px 10px; }
    .release-notice-copy { display: block; line-height: 1.35; }
    .release-notice-copy span { display: none; }
    .release-notice a { font-size: 11.5px; }
    .header-limit { font-size: 10.5px; }
    .header-limit-timer { margin-left: 2px; padding-left: 6px; font-size: 9.5px; }
    .controls { gap: 5px; }
    .select-wrap { height: 34px; padding: 0 6px; }
    .select-wrap select { max-width: 82px; font-size: 10.5px; }
    .select-wrap.compact { display: flex; }
    .select-wrap.compact select { max-width: 82px; }
    .connection {
        width: 29px; height: 29px;
    }
    .connection:active { background: #303030; }
    .connection-action-menu {
        width: calc(100vw - 24px);
        max-width: 390px;
        margin: auto auto max(12px, env(safe-area-inset-bottom));
        border-radius: 18px;
    }
    .connection-action-menu form { padding-bottom: 10px; }
    .messages { padding: 24px 16px 30px; scrollbar-width: thin; }
    .messages::-webkit-scrollbar, .accounts-page::-webkit-scrollbar { width: 7px; }
    .messages::-webkit-scrollbar-thumb, .accounts-page::-webkit-scrollbar-thumb {
        border-width: 1px;
    }
    .message + .message { margin-top: 25px; }
    .message.assistant + .message.user { margin-top: 31px; }
    .message.user .message-body { max-width: 88%; }
    .composer-area {
        padding: 0 12px max(11px, env(safe-area-inset-bottom));
    }
    .composer { padding-right: 58px; padding-bottom: 52px; }
    .composer-bottom { right: 9px; bottom: 8px; height: 40px; }
    .composer-effort, .composer-access { height: 40px; padding: 0; border-radius: 11px; }
    .composer-effort { width: 76px; }
    .composer-access { width: 40px; }
    .access-trigger { width: 100%; padding: 0; justify-content: center; }
    .access-trigger span { display: none; }
    .access-trigger svg { width: 18px; height: 18px; }
    .access-popup { right: auto; left: 0; width: min(250px, calc(100vw - 24px)); }
    .approval-request {
        margin-bottom: 8px; padding: 11px; display: grid; gap: 10px;
    }
    .approval-request-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .approval-request-actions button { min-height: 38px; }
    .approval-request-actions button.primary { grid-column: 1 / -1; grid-row: 1; }
    .composer-effort select { display: none; }
    .composer-effort::after { display: none; }
    .effort-trigger {
        width: 100%; height: 100%; padding: 0 8px; display: flex; align-items: center;
        justify-content: center; border: 0; border-radius: inherit; background: transparent;
        color: #c8c8c3; font: inherit; font-size: 11px; cursor: pointer;
    }
    .effort-trigger:active, .effort-trigger[aria-expanded="true"] { background: #303030; color: #fff; }
    .effort-popup {
        position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30;
        width: 166px; padding: 5px; border: 1px solid #444; border-radius: 12px;
        background: #202020; box-shadow: 0 14px 34px rgba(0,0,0,.45);
    }
    .effort-popup:not([hidden]) { display: grid; gap: 2px; }
    .effort-popup button {
        width: 100%; height: 36px; padding: 0 9px; display: grid;
        grid-template-columns: 1fr 16px; align-items: center; gap: 7px;
        border: 0; border-radius: 8px; background: transparent; color: #c8c8c3;
        text-align: left; font: inherit; font-size: 12px; cursor: pointer;
    }
    .effort-popup button:active { background: #303030; }
    .effort-popup button.active { background: #2b2b2b; color: #fff; }
    .effort-popup button i { visibility: hidden; color: #5f9cff; font-style: normal; text-align: center; }
    .effort-popup button.active i { visibility: visible; }
    .attach {
        left: 9px; bottom: 8px; width: 40px; height: 40px; border-radius: 12px;
    }
    .attach svg { width: 19px; height: 19px; }
    .send {
        width: 40px; height: 40px; border-radius: 12px;
        background: #2878f0; color: #fff;
    }
    .stop-command {
        width: 40px; height: 40px;
    }
    .stop-command svg { width: 15px; height: 15px; }
    .send:active:not(:disabled) { background: #2878f0; }
    .send svg { width: 19px; height: 19px; stroke-width: 1.8; }
    .empty-state h2 { font-size: 21px; }
    .screen-page { gap: 12px; padding: 18px 12px 12px; }
    .screen-page-header { align-items: flex-start; }
    .screen-page-header h1 { font-size: 22px; }
    .screen-page-header p { max-width: 210px; line-height: 1.4; }
    .screen-status { position: absolute; right: 13px; top: 65px; margin: 0; }
    .screen-page-actions { padding-top: 2px; }
    .screen-viewer { border-radius: 8px; }
    .screen-page-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
    .accounts-page { padding: 27px 16px 36px; scrollbar-width: thin; }
    .accounts-page-header { align-items: flex-start; }
    .accounts-page-header h1 { font-size: 23px; }
    .accounts-page-header p { max-width: 210px; }
    .accounts-page-header button { flex: 0 0 auto; padding: 0 9px; }
    .accounts-header-actions { align-items: flex-end; flex-direction: column; gap: 6px; }
    .account-login-panel { align-items: stretch; flex-direction: column; gap: 12px; }
    .account-login-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .account-login-panel button { width: 100%; }
    .accounts-overview {
        min-height: 76px; flex-wrap: wrap; gap: 14px 20px; padding: 14px 0;
    }
    .smart-threshold { grid-column: 1 / -1; margin: 0; }
    .smart-threshold > span:last-child { width: 88px; }
    #toggle-smart-accounts {
        width: auto; min-width: 0; flex: 1 1 210px; margin-left: 0;
        overflow: visible; padding: 0 11px; text-indent: 0;
        white-space: nowrap;
    }
    .account-control-row {
        min-height: 128px; grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "pool limit" "identity identity" "reset action";
        gap: 12px 16px;
        padding: 18px 0;
    }
    .account-pool-toggle { grid-area: pool; margin-left: 10px; }
    .account-control-identity { padding-left: 12px; }
    .account-control-identity { grid-area: identity; }
    .account-control-reset { grid-area: reset; }
    .account-control-limit { grid-area: limit; }
    .account-control-actions { grid-area: action; justify-self: end; flex-wrap: wrap; }
    .account-more-button { width: 38px; height: 38px; font-size: 22px; }
    .settings-page { padding: 27px 14px 38px; }
    .settings-page > *, .accounts-page > * { min-width: 0; max-width: 100%; }
    .settings-page-header h1 { font-size: 23px; }
    .settings-layout { display: block; min-height: 0; }
    .settings-sidebar {
        margin: 20px -2px 0; padding: 0 0 12px; display: flex; gap: 5px;
        overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line);
        scrollbar-width: none;
    }
    .settings-sidebar::-webkit-scrollbar { display: none; }
    .settings-sidebar button {
        width: auto; min-width: max-content; min-height: 42px; padding: 7px 11px;
    }
    .settings-sidebar small { display: none; }
    .performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-content { padding: 23px 0 0; }
    .interface-icon-editor { min-height: 158px; align-items: flex-start; padding: 18px 0; gap: 14px; }
    .interface-icon-previews { gap: 9px; }
    .interface-icon-actions { grid-template-columns: 1fr; }
    .interface-icon-actions small { grid-column: 1; }
    .interface-builder-setting { grid-template-columns: 1fr; gap: 18px; padding: 20px 0; }
    .settings-save-row { flex-wrap: wrap; }
    .settings-save-row span { width: 100%; }
    .settings-danger-zone { align-items: flex-start; }
    .group-setting-row {
        grid-template-columns: 16px 44px minmax(0, 1fr);
        align-items: start;
    }
    .group-setting-actions {
        grid-column: 2 / -1; display: flex; flex-wrap: wrap;
    }
}

@keyframes connection-hold-ring {
    from { opacity: .22; transform: scale(.78); }
    to { opacity: 1; transform: scale(1); }
}

@media (orientation: landscape) and (pointer: coarse) and (max-width: 1000px) {
    .portrait-lock {
        position: fixed; inset: 0; z-index: 10000;
        display: grid; place-content: center; justify-items: center;
        gap: 12px; padding: 28px; background: #0d0d0d;
        color: #ddd; text-align: center;
    }
    .portrait-lock strong {
        margin-top: 6px; font-size: 18px; font-weight: 580;
        letter-spacing: -.02em;
    }
    .portrait-lock small {
        max-width: 280px; color: #858585;
        font-size: 12px; line-height: 1.5;
    }
    body.screen-view-active .portrait-lock { display: none; }
    body.screen-view-active .screen-page { padding: 10px 12px 8px; gap: 8px; }
    body.screen-view-active .screen-page-header p,
    body.screen-view-active .screen-page-footer small { display: none; }
}

@media (max-width: 440px) {
    .select-wrap:not(.compact) { display: none; }
}