:root {
    --desk-bg-0: var(--theme-bg-page, #0b1220);
    --desk-bg-1: var(--theme-bg-page-2, #0f1828);
    --desk-accent: var(--theme-accent, #4fb4ff);
    --desk-accent-2: var(--theme-accent-2, #6fd0ff);
    --desk-border: var(--theme-border, #2f4762);
    --desk-window: var(--theme-surface-soft, #101a2a);
    --desk-window-2: var(--theme-surface, #132137);
    --desk-text: var(--theme-text, #e6f1fb);
    --desk-muted: var(--theme-muted, #9ab3cb);
    --desk-danger: var(--theme-danger, #ff8d8d);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body.desktop-page {
    color: var(--desk-text);
    background: radial-gradient(1200px 520px at 80% -15%, color-mix(in srgb, var(--desk-accent) 25%, transparent), transparent 60%),
        radial-gradient(1000px 500px at 0% 0%, color-mix(in srgb, var(--desk-accent-2) 18%, transparent), transparent 62%),
        linear-gradient(150deg, var(--desk-bg-0), color-mix(in srgb, var(--desk-bg-0) 70%, var(--desk-bg-1) 30%) 54%, var(--desk-bg-1));
    font-family: "Segoe UI", Arial, sans-serif;
    overflow: hidden;
}

.desktop-page * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--desk-accent) 45%, var(--desk-border) 55%) color-mix(in srgb, var(--desk-window) 78%, #000000 22%);
}

.desktop-page *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.desktop-page *::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--desk-window) 80%, #000000 20%);
    border-radius: 999px;
}

.desktop-page *::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--desk-accent) 42%, var(--desk-border) 58%);
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--desk-window) 86%, #000000 14%);
}

.desktop-root {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

body.desktop-page.desktop-scene-mode .desktop-icons,
body.desktop-page.desktop-scene-mode #desktop-start-menu,
body.desktop-page.desktop-scene-mode #desktop-notify-center {
    display: none !important;
}

body.desktop-page.desktop-scene-mode .desktop-backdrop {
    opacity: 0.5;
}

body.desktop-page.desktop-scene-mode .desktop-taskbar {
    min-height: 40px;
    padding: 4px 10px;
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

body.desktop-page.desktop-embedded-mode .desktop-taskbar-right .desktop-resource-strip,
body.desktop-page.desktop-embedded-mode .desktop-taskbar-right #desktop-notify-btn,
body.desktop-page.desktop-embedded-mode .desktop-taskbar-right #desktop-version-wrap,
body.desktop-page.desktop-embedded-mode .desktop-taskbar-right #desktop-status,
body.desktop-page.desktop-embedded-mode .desktop-taskbar-right #desktop-vdesk-switch {
    display: none !important;
}

body.desktop-page.desktop-embedded-mode .desktop-taskbar {
    min-height: 36px;
    padding: 3px 8px;
    left: 8px;
    right: 8px;
    bottom: 6px;
}

body.desktop-page.desktop-scene-mode .desktop-window {
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38);
}

body.ws-shell-enabled.desktop-page .desktop-root {
    height: calc(100dvh - var(--ws-shell-top-height));
}

body.ws-shell-enabled.desktop-page:not(.ws-shell-bottom-hidden) .desktop-root {
    height: calc(100dvh - var(--ws-shell-top-height) - var(--ws-shell-bottom-height));
}

.desktop-backdrop {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 30px 30px, 30px 30px;
    pointer-events: none;
}

.desktop-icons {
    position: absolute;
    inset: 12px 12px 52px 12px;
    z-index: 15;
    display: grid;
    grid-template-rows: repeat(auto-fill, minmax(92px, 92px));
    grid-auto-columns: minmax(96px, 110px);
    grid-auto-flow: column;
    gap: 8px 12px;
    align-content: start;
    justify-content: start;
    overflow: auto;
    padding-right: 16px;
    pointer-events: auto;
}

.desktop-icon {
    border: 1px solid transparent;
    border-radius: 12px;
    background: color-mix(in srgb, var(--desk-window) 32%, transparent);
    color: var(--desk-text);
    width: 100%;
    min-height: 90px;
    padding: 8px 6px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    cursor: pointer;
    text-align: center;
    transition: transform .14s ease, border-color .16s ease, background .16s ease, box-shadow .18s ease;
    backdrop-filter: blur(2px);
}

.desktop-icon:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--desk-accent) 60%, transparent);
    background: color-mix(in srgb, var(--desk-window) 56%, transparent);
}

.desktop-icon.selected {
    border-color: var(--desk-accent);
    background: color-mix(in srgb, var(--desk-window-2) 65%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk-accent) 35%, transparent);
}

.desktop-icon.dragging {
    opacity: 0.72;
    transform: scale(0.98);
}

.desktop-icon .icon {
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--desk-border) 80%, transparent);
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--desk-window-2) 86%, #ffffff 14%), var(--desk-window-2));
    font-size: 18px;
}

.desktop-icon .label {
    width: 100%;
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.desktop-icon .meta {
    font-size: 10px;
    color: var(--desk-muted);
    line-height: 1;
}

.desktop-empty {
    border: 1px dashed color-mix(in srgb, var(--desk-border) 70%, transparent);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--desk-muted);
    font-size: 12px;
    background: color-mix(in srgb, var(--desk-window) 45%, transparent);
}

.desktop-windows {
    position: absolute;
    inset: 8px 8px 56px 8px;
    z-index: 30;
    pointer-events: none;
}

.desktop-windows > .desktop-window {
    pointer-events: auto;
}

.desktop-window {
    position: absolute;
    min-width: 320px;
    min-height: 220px;
    border: 1px solid var(--desk-border);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--desk-window) 92%, #ffffff 8%), var(--desk-window));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
}

.desktop-window.active {
    border-color: var(--desk-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk-accent) 35%, transparent), 0 24px 44px rgba(0, 0, 0, 0.42);
}

.desktop-window.maximized {
    border-radius: 10px;
}

.desktop-window-header {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    border-bottom: 1px solid var(--desk-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--desk-window-2) 90%, #ffffff 10%), var(--desk-window-2));
    cursor: move;
    user-select: none;
}

.desktop-window-title {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--desk-text);
}

.desktop-window-title .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desktop-window-controls {
    display: inline-flex;
    gap: 5px;
}

.desktop-window-controls button {
    width: 22px;
    height: 22px;
    border: 1px solid var(--desk-border);
    border-radius: 6px;
    background: color-mix(in srgb, var(--desk-window-2) 85%, #000000 15%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 0;
    cursor: pointer;
}

.desktop-window-controls button:hover {
    border-color: var(--desk-accent);
}

.desktop-window-controls .close:hover {
    border-color: #ef9a9a;
    color: #ffd3d3;
}

.desktop-window-body {
    position: absolute;
    left: 0;
    right: 0;
    top: 36px;
    bottom: 0;
    overflow: hidden;
    background: var(--desk-window);
}

.desktop-window-resizer {
    position: absolute;
    width: 12px;
    height: 12px;
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 55%, rgba(129, 183, 229, 0.42) 55%);
}

.desktop-window.minimized {
    display: none;
}

.desktop-taskbar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 6px;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 42px;
    padding: 4px 8px;
    border-radius: 11px;
    border: 1px solid var(--desk-border);
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    backdrop-filter: blur(8px);
}

body.desktop-page:not(.taskbar-compact) .desktop-taskbar {
    min-height: 56px;
    padding: 6px 8px;
    border-radius: 12px;
}

.desktop-taskbar-left,
.desktop-taskbar-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.desktop-taskbar-left {
    flex: 1;
}

.desktop-taskbar-right {
    flex: 0 0 auto;
    position: relative;
}

.desktop-resource-strip {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 250px;
    max-width: 320px;
    border: 1px solid var(--desk-border);
    border-radius: 9px;
    padding: 3px 7px;
    background: color-mix(in srgb, var(--desk-window-2) 84%, #000000 16%);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.desktop-resource-strip:hover {
    border-color: color-mix(in srgb, var(--desk-accent) 55%, var(--desk-border) 45%);
}

.desktop-resource-strip.compact .desk-res-bars,
.desktop-resource-strip.compact .desk-res-app {
    display: none;
}

.desktop-resource-strip.expanded {
    position: absolute;
    right: 190px;
    bottom: calc(100% + 8px);
    min-width: 360px;
    max-width: 420px;
    padding: 7px 9px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    z-index: 80;
}

.desktop-resource-strip.expanded .desk-res-bars,
.desktop-resource-strip.expanded .desk-res-app {
    display: inline-flex;
}

.desk-res-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.desk-res-meta {
    font-size: 9px;
    color: var(--desk-muted);
}

.desk-res-meta b {
    color: var(--desk-text);
    font-weight: 700;
}

.desk-res-load {
    color: var(--desk-text-soft, #d6e7f8);
    margin-left: auto;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desk-res-bars {
    gap: 5px;
}

.desk-res-item {
    display: inline-grid;
    grid-template-columns: auto auto 52px;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 9px;
}

.desk-res-item .k,
.desk-res-app .k {
    color: var(--desk-muted);
    font-weight: 600;
}

.desk-res-item .v,
.desk-res-app .v {
    color: var(--desk-text);
    font-variant-numeric: tabular-nums;
}

.desk-res-item .bar {
    position: relative;
    width: 52px;
    height: 5px;
    border: 1px solid color-mix(in srgb, var(--desk-border) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--desk-window) 78%, #000000 22%);
    overflow: hidden;
}

.desk-res-item .bar i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--desk-accent) 80%, #8ad0ff 20%);
    transition: width .16s ease;
}

#desk-mem-bar {
    background: color-mix(in srgb, #ffcc72 72%, var(--desk-accent) 28%);
}

#desk-swap-bar {
    background: color-mix(in srgb, #f18f8f 75%, var(--desk-accent) 25%);
}

.desk-res-app {
    font-size: 9px;
    gap: 6px;
}

.desk-socket-state {
    margin-left: auto;
    border: 1px solid color-mix(in srgb, var(--desk-border) 70%, transparent);
    border-radius: 999px;
    padding: 0 6px;
    line-height: 1.5;
    color: var(--desk-muted);
}

.desk-socket-state.online {
    border-color: color-mix(in srgb, #79dca8 70%, var(--desk-border) 30%);
    color: #b9f3d2;
}

.desk-socket-state.offline {
    border-color: color-mix(in srgb, #f2a7a7 70%, var(--desk-border) 30%);
    color: #ffd5d5;
}

@media (max-width: 1480px) {
    .desktop-resource-strip {
        min-width: 220px;
        max-width: 270px;
    }
    .desk-res-load {
        display: none;
    }
}

@media (max-width: 1220px) {
    .desktop-resource-strip {
        min-width: 180px;
        max-width: 210px;
    }
    .desk-res-app {
        display: none;
    }
}

.desktop-start-btn,
.desktop-tray-btn,
.desktop-clock {
    border: 1px solid var(--desk-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--desk-window-2) 86%, #000000 14%);
    color: var(--desk-text);
    font-size: 11px;
    min-height: 24px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.desktop-start-btn {
    width: 30px;
    padding: 0;
    font-size: 13px;
}

.desktop-start-btn:hover,
.desktop-tray-btn:hover,
.desktop-clock:hover {
    border-color: var(--desk-accent);
}

.desktop-start-btn.active {
    border-color: var(--desk-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk-accent) 28%, transparent);
}

.desktop-pinned-items {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.desktop-pin-chip {
    border: 1px solid var(--desk-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--desk-window-2) 84%, #000000 16%);
    color: var(--desk-text);
    width: 26px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.desktop-pin-chip:hover,
.desktop-pin-chip.active {
    border-color: var(--desk-accent);
}

.desktop-task-items {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-right: 8px;
}

.desktop-task-chip {
    border: 1px solid var(--desk-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    font-size: 10px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.desktop-task-chip:hover {
    border-color: var(--desk-accent);
}

.desktop-task-chip.active {
    border-color: var(--desk-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk-accent) 30%, transparent);
}

.desktop-task-chip.grouped {
    background: color-mix(in srgb, var(--desk-window) 78%, var(--desk-accent) 22%);
}

.desktop-task-chip .count {
    border-radius: 999px;
    padding: 0 6px;
    line-height: 1.4;
    font-size: 10px;
    border: 1px solid color-mix(in srgb, var(--desk-border) 55%, transparent);
    color: var(--desk-muted);
}

.desktop-task-chip.minimized {
    opacity: 0.8;
}

.desktop-status {
    color: var(--desk-muted);
    font-size: 10px;
    white-space: nowrap;
}

.desktop-vdesk-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.desktop-vdesk-chip {
    border: 1px solid var(--desk-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--desk-window-2) 84%, #000000 16%);
    color: var(--desk-muted);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.desktop-vdesk-chip.active {
    border-color: var(--desk-accent);
    color: var(--desk-text);
}

.desktop-notify-count {
    min-width: 14px;
    height: 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-danger, #ff8d8d) 75%, #ffebeb 25%);
    color: #2d1212;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.desktop-top-refresh-btn {
    border: 1px solid var(--theme-border, #3b5879);
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-surface, #1b2e44) 88%, #000000 12%);
    color: var(--theme-text, #e7f2ff);
    font-size: 12px;
    line-height: 1;
    padding: 4px 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.desktop-top-refresh-btn:hover {
    border-color: var(--theme-accent, #62beff);
}

.desktop-version-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.desktop-version-anchor {
    border: 1px solid color-mix(in srgb, var(--desk-border) 75%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-muted);
    font-size: 10px;
    line-height: 1.2;
    padding: 2px 8px;
    cursor: default;
}

.desktop-version-wrap.is-open .desktop-version-anchor {
    border-color: color-mix(in srgb, var(--desk-accent) 52%, var(--desk-border) 48%);
    color: var(--desk-text);
}

.desktop-version-pop {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 260px;
    max-width: 340px;
    border: 1px solid var(--desk-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    pointer-events: none;
    z-index: 90;
}

.desktop-version-wrap.is-open .desktop-version-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.desktop-version-pop a {
    color: color-mix(in srgb, var(--desk-accent) 82%, #ffffff 18%);
    text-decoration: none;
}

.desktop-version-pop a:hover {
    text-decoration: underline;
}

.desktop-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 54px;
    z-index: 4200;
    border: 1px solid var(--desk-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--desk-window) 95%, #000000 5%);
    color: var(--desk-text);
    font-size: 12px;
    padding: 7px 14px;
}

.desktop-start-menu {
    position: fixed;
    left: 14px;
    bottom: 56px;
    width: min(340px, calc(100vw - 24px));
    max-height: min(72vh, 620px);
    z-index: 4400;
    border: 1px solid var(--desk-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.44);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.desktop-start-head {
    border-bottom: 1px solid var(--desk-border);
    padding: 8px;
}

.desktop-start-head input {
    width: 100%;
    border: 1px solid var(--desk-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--desk-window-2) 88%, #000000 12%);
    color: var(--desk-text);
    padding: 6px 10px;
    font-size: 12px;
}

.desktop-start-apps {
    overflow: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.desktop-start-app {
    border: 1px solid var(--desk-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--desk-window-2) 80%, #000000 20%);
    color: var(--desk-text);
    font-size: 12px;
    padding: 7px 8px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.desktop-start-app:hover {
    border-color: var(--desk-accent);
}

.desktop-start-foot {
    border-top: 1px solid var(--desk-border);
    padding: 8px;
}

.desktop-start-link {
    color: var(--desk-muted);
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.desktop-start-link:hover {
    color: var(--desk-text);
}

.desktop-notify-center {
    position: fixed;
    right: 14px;
    bottom: 56px;
    width: min(360px, calc(100vw - 24px));
    max-height: min(64vh, 520px);
    z-index: 4400;
    border: 1px solid var(--desk-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.44);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.desktop-notify-head {
    border-bottom: 1px solid var(--desk-border);
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.desktop-notify-head button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 88%, #000000 12%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
}

.desktop-notify-list {
    overflow: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.desktop-notify-item {
    border: 1px solid var(--desk-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--desk-window-2) 78%, #000000 22%);
    padding: 7px 8px;
    font-size: 11px;
    color: var(--desk-text);
}

.desktop-notify-item .time {
    color: var(--desk-muted);
    font-size: 10px;
    margin-top: 4px;
}

.desktop-drag-menu {
    position: fixed;
    z-index: 5000;
    min-width: 180px;
    border: 1px solid var(--desk-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    padding: 6px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
}

.desktop-drag-menu button {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--desk-text);
    font-size: 12px;
    text-align: left;
    padding: 6px 8px;
    cursor: pointer;
}

.desktop-drag-menu button:hover {
    border-color: var(--desk-accent);
    background: color-mix(in srgb, var(--desk-window-2) 56%, transparent);
}

.hidden {
    display: none !important;
}

.app-shell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--desk-window);
}

.app-toolbar {
    border-bottom: 1px solid var(--desk-border);
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--desk-window-2);
}

.app-toolbar input,
.app-toolbar select,
.app-toolbar button,
.app-shell textarea {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 88%, #000000 12%);
    color: var(--desk-text);
    font-size: 12px;
    padding: 5px 8px;
}

.app-toolbar button {
    cursor: pointer;
}

.app-toolbar button:hover {
    border-color: var(--desk-accent);
}

.app-main {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.explorer-list,
.docker-list {
    padding: 8px;
}

.explorer-row,
.docker-row {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 80%, #000000 20%);
    color: var(--desk-text);
    padding: 6px 8px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.explorer-row .left,
.docker-row .left {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.explorer-row .name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.explorer-row.dir {
    background: color-mix(in srgb, var(--desk-window-2) 86%, #ffffff 14%);
}

.docker-row.selected {
    border-color: var(--desk-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--desk-accent) 35%, transparent);
}

.explorer-row:hover,
.docker-row:hover {
    border-color: var(--desk-accent);
}

.app-shell textarea.editor-text {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    resize: none;
    padding: 10px 12px;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.45;
    background: color-mix(in srgb, var(--desk-window) 88%, #000000 12%);
}

.app-status {
    border-top: 1px solid var(--desk-border);
    color: var(--desk-muted);
    font-size: 11px;
    padding: 5px 8px;
}

.docker-log {
    border-top: 1px solid var(--desk-border);
    min-height: 110px;
    max-height: 42%;
    overflow: auto;
    background: color-mix(in srgb, var(--desk-window) 88%, #000000 12%);
    color: var(--desk-text-soft, #cee3f7);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    padding: 8px;
    white-space: pre-wrap;
}

.app-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--desk-bg-1);
}

@media (max-width: 980px) {
    .desktop-icons {
        grid-template-rows: repeat(auto-fill, minmax(86px, 86px));
        grid-auto-columns: minmax(90px, 96px);
    }
    .desktop-taskbar { left: 8px; right: 8px; bottom: 5px; min-height: 38px; }
    .desktop-status,
    .desktop-resource-strip,
    .desktop-vdesk-switch { display: none; }
    .desktop-start-menu,
    .desktop-notify-center {
        left: 8px;
        right: 8px;
        width: auto;
    }
    .desktop-start-apps {
        grid-template-columns: 1fr;
    }
    .desktop-window {
        min-width: 260px;
        min-height: 190px;
    }
    .desk-main.split.docker-main {
        grid-template-columns: 1fr;
    }
    .docker-list {
        max-height: 42%;
        border-right: 0;
        border-bottom: 1px solid var(--desk-border);
    }
}

body.desktop-page[data-wallpaper="aurora-grid"] {
    background:
        radial-gradient(1100px 560px at 88% -15%, color-mix(in srgb, var(--desk-accent) 20%, transparent), transparent 58%),
        radial-gradient(860px 480px at 8% 8%, color-mix(in srgb, var(--desk-accent-2) 15%, transparent), transparent 62%),
        linear-gradient(140deg, var(--desk-bg-0), var(--desk-bg-1));
}

body.desktop-page[data-wallpaper="soft-horizon"] {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--desk-accent-2) 20%, var(--desk-bg-0) 80%) 0%, color-mix(in srgb, var(--desk-bg-0) 65%, var(--desk-bg-1) 35%) 46%, var(--desk-bg-1) 100%);
}

body.desktop-page[data-wallpaper="graph-paper"] {
    background:
        linear-gradient(145deg, var(--desk-bg-0), var(--desk-bg-1)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 26px);
}

body.desktop-page[data-wallpaper="neo-orbit"] {
    background:
        radial-gradient(900px 440px at 75% 10%, color-mix(in srgb, var(--desk-accent) 24%, transparent), transparent 66%),
        radial-gradient(640px 380px at 20% 84%, color-mix(in srgb, var(--desk-accent-2) 18%, transparent), transparent 68%),
        linear-gradient(160deg, var(--desk-bg-0), var(--desk-bg-1));
}

body.desktop-page[data-wallpaper="sunrise-mesh"] {
    background:
        radial-gradient(1200px 580px at 55% -20%, color-mix(in srgb, #ffcf8a 25%, transparent), transparent 55%),
        linear-gradient(135deg, color-mix(in srgb, var(--desk-bg-0) 82%, #5aa2d8 18%), color-mix(in srgb, var(--desk-bg-1) 80%, #1e3b6b 20%));
}

body.desktop-page[data-wallpaper="plain"] {
    background: linear-gradient(150deg, var(--desk-bg-0), var(--desk-bg-1));
}

body.desktop-page.hide-wallpaper-grid .desktop-backdrop {
    opacity: 0;
}

body.desktop-page[data-icon-size="s"] .desktop-icons {
    grid-template-rows: repeat(auto-fill, minmax(78px, 78px));
    grid-auto-columns: minmax(82px, 92px);
}

body.desktop-page[data-icon-size="s"] .desktop-icon {
    min-height: 76px;
    padding: 6px 4px;
}

body.desktop-page[data-icon-size="s"] .desktop-icon .icon {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

body.desktop-page[data-icon-size="l"] .desktop-icons {
    grid-template-rows: repeat(auto-fill, minmax(104px, 104px));
    grid-auto-columns: minmax(118px, 132px);
}

body.desktop-page[data-icon-size="l"] .desktop-icon {
    min-height: 102px;
    padding: 9px 8px;
}

body.desktop-page[data-icon-size="l"] .desktop-icon .icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
}

body.desktop-page.reduced-motion *,
body.desktop-page[data-motion-level="low"] * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
}

.desktop-top-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
}

.desktop-top-btn {
    border: 1px solid var(--theme-border, #3b5879);
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-surface, #1b2e44) 88%, #000000 12%);
    color: var(--theme-text, #e7f2ff);
    font-size: 12px;
    line-height: 1;
    padding: 4px 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.desktop-top-btn:hover {
    border-color: var(--theme-accent, #62beff);
}

.desktop-icon.app-explorer .icon,
.desktop-icon.fs-folder .icon {
    color: #ffcc73;
}

.desktop-icon.app-editor .icon,
.desktop-icon.fs-code .icon {
    color: #83c6ff;
}

.desktop-icon.app-docker .icon {
    color: #6fd7ff;
}

.desktop-icon.app-ai .icon {
    color: #8df0d1;
}

.desktop-icon.app-collab .icon {
    color: #f9c892;
}

.desktop-icon.app-share .icon,
.desktop-icon.fs-doc .icon {
    color: #e7d4ff;
}

.desktop-icon.fs-image .icon {
    color: #94efbf;
}

.desktop-icon.fs-archive .icon {
    color: #ffadad;
}

.desktop-window.pinned {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk-accent) 36%, transparent), 0 26px 48px rgba(0, 0, 0, 0.5);
}

.desktop-window-controls .pin {
    color: var(--desk-muted);
}

.desktop-window.pinned .desktop-window-controls .pin {
    color: var(--desk-accent);
    border-color: var(--desk-accent);
}

.desktop-context-menu {
    position: fixed;
    z-index: 5000;
    min-width: 200px;
    max-width: 280px;
    border: 1px solid var(--desk-border);
    border-radius: 12px;
    padding: 6px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(8px);
}

.desktop-context-menu .ctx-item {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--desk-text);
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    padding: 7px 9px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.desktop-context-menu .ctx-item:hover {
    border-color: color-mix(in srgb, var(--desk-accent) 40%, transparent);
    background: color-mix(in srgb, var(--desk-window-2) 56%, transparent);
}

.desktop-context-menu .ctx-item.danger {
    color: #ffb7b7;
}

.desk-app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--desk-window);
    overflow: hidden;
}

.desktop-window-body > .desk-app,
.desktop-window-body > .app-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.desk-toolbar {
    border-bottom: 1px solid var(--desk-border);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, color-mix(in srgb, var(--desk-window-2) 90%, #ffffff 10%), var(--desk-window-2));
}

.desk-toolbar input,
.desk-toolbar select,
.desk-toolbar button {
    border: 1px solid var(--desk-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    font-size: 12px;
    line-height: 1.2;
    padding: 5px 10px;
}

.desk-toolbar input[type="text"] {
    flex: 1 1 220px;
    min-width: 160px;
}

.desk-toolbar button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    transition: border-color .16s ease, background .16s ease, transform .12s ease;
}

.desk-toolbar button i {
    font-size: 11px;
    opacity: 0.92;
}

.desk-toolbar button:hover {
    border-color: var(--desk-accent);
    background: color-mix(in srgb, var(--desk-window-2) 84%, #ffffff 16%);
}

.desk-toolbar button:active {
    transform: translateY(1px);
}

.desk-toolbar.secondary {
    padding-top: 7px;
    padding-bottom: 7px;
    background: color-mix(in srgb, var(--desk-window-2) 86%, #000000 14%);
}

.explorer-app .desk-toolbar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--desk-window-2) 88%, #ffffff 12%), color-mix(in srgb, var(--desk-window-2) 78%, var(--desk-window) 22%));
}

.explorer-app .desk-toolbar.secondary {
    border-top: 1px solid color-mix(in srgb, var(--desk-border) 68%, transparent);
}

.explorer-app .desk-toolbar button {
    border-radius: 999px;
    padding: 4px 10px;
    border-color: color-mix(in srgb, var(--desk-border) 70%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
}

.explorer-app .desk-toolbar.secondary button {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 9px;
    letter-spacing: 0.1px;
}

.explorer-app .desk-toolbar [data-act="path"] {
    border-radius: 999px;
    padding-left: 12px;
    padding-right: 12px;
    min-width: 220px;
    background: color-mix(in srgb, var(--desk-window) 96%, #000000 4%);
}

.explorer-app .desk-toolbar button:hover,
.explorer-app .desk-toolbar button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.desk-toolbar .danger,
.explorer-app .desk-toolbar .danger {
    border-color: color-mix(in srgb, var(--theme-danger, #ffb0b0) 55%, var(--desk-border) 45%);
    color: color-mix(in srgb, var(--theme-danger, #ffb0b0) 86%, #ffffff 14%);
}

.desk-toolbar button.subtle {
    color: var(--desk-muted);
}

.desk-toolbar button.subtle.active {
    color: #95efbb;
    border-color: color-mix(in srgb, #95efbb 45%, var(--desk-border) 55%);
}

.explorer-app .desk-toolbar .danger:hover {
    border-color: color-mix(in srgb, var(--theme-danger, #ff8d8d) 75%, var(--desk-border) 25%);
    background: color-mix(in srgb, var(--theme-danger, #ff8d8d) 16%, var(--desk-window-2) 84%);
}

.desk-main.split {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    min-height: 0;
}

.desk-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.desk-breadcrumb {
    border-bottom: 1px solid var(--desk-border);
    padding: 6px 9px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--desk-window) 88%, #000000 12%);
}

.desk-breadcrumb button {
    border: 1px solid var(--desk-border);
    border-radius: 6px;
    background: color-mix(in srgb, var(--desk-window-2) 78%, #000000 22%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
}

.desk-breadcrumb .sep {
    color: var(--desk-muted);
    font-size: 11px;
}

.explorer-list {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 8px;
    display: grid;
    gap: 7px;
    min-height: 0;
    overscroll-behavior: contain;
}

.explorer-app .desk-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.explorer-app .explorer-list {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.explorer-list.list {
    grid-template-columns: 1fr;
}

.explorer-list.grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.explorer-row-item {
    border: 1px solid var(--desk-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--desk-window-2) 80%, #000000 20%);
    color: var(--desk-text);
    width: 100%;
    min-height: 36px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}

.explorer-row-item .icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--desk-border) 78%, transparent);
    background: color-mix(in srgb, var(--desk-window-2) 84%, #ffffff 16%);
}

.explorer-row-item .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explorer-row-item .meta {
    color: var(--desk-muted);
    font-size: 11px;
}

.explorer-row-item.selected,
.explorer-row-item:hover {
    border-color: var(--desk-accent);
}

.explorer-list.grid .explorer-row-item {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: 92px;
    padding: 8px;
}

.explorer-list.grid .explorer-row-item .icon {
    width: 34px;
    height: 34px;
    margin: 0 auto;
    font-size: 16px;
}

.explorer-list.grid .explorer-row-item .name {
    white-space: normal;
    line-height: 1.2;
}

.explorer-empty,
.docker-empty,
.empty {
    border: 1px dashed color-mix(in srgb, var(--desk-border) 70%, transparent);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--desk-muted);
    font-size: 12px;
}

.editor-tabs {
    border-bottom: 1px solid var(--desk-border);
    background: color-mix(in srgb, var(--desk-window-2) 88%, #000000 12%);
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
}

.editor-tab {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
}

.editor-tab.active {
    border-color: var(--desk-accent);
}

.editor-tab .mark {
    color: var(--desk-accent);
}

.editor-tab .close {
    color: var(--desk-muted);
}

.editor-toolbar .editor-overview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--desk-muted);
    font-size: 11px;
}

.editor-toolbar .editor-overview select {
    min-width: 180px;
    max-width: 260px;
}

.editor-inline-action {
    border-bottom: 1px solid var(--desk-border);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 86%, #000000 14%);
    font-size: 11px;
    color: var(--desk-muted);
}

.editor-inline-action.hidden {
    display: none;
}

.editor-inline-action button {
    border: 1px solid var(--desk-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
}

.editor-inline-action [data-act="inline-save"] {
    border-color: color-mix(in srgb, var(--desk-accent) 65%, var(--desk-border) 35%);
}

.editor-main {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
}

.editor-main .editor-text {
    width: 100%;
    height: 100%;
    border: 0;
    resize: none;
    padding: 10px 12px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
    background: color-mix(in srgb, var(--desk-window) 88%, #000000 12%);
    color: var(--desk-text);
}

.editor-main .editor-text.split {
    width: 55%;
    border-right: 1px solid var(--desk-border);
}

.editor-preview {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    background: color-mix(in srgb, var(--desk-window) 86%, #000000 14%);
}

.md-preview h2,
.md-preview h3,
.md-preview h4 {
    margin: 8px 0 6px;
}

.md-preview code {
    border: 1px solid var(--desk-border);
    border-radius: 4px;
    background: color-mix(in srgb, var(--desk-window-2) 76%, #000000 24%);
    padding: 1px 4px;
}

.img-preview-wrap {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.img-preview-wrap img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--desk-border);
}

.binary-tip {
    border: 1px dashed var(--desk-border);
    border-radius: 8px;
    padding: 10px;
    color: var(--desk-muted);
    font-size: 12px;
}

.docker-app .desk-toolbar [data-act="search"] {
    min-width: 220px;
    flex: 1 1 260px;
}

.docker-app .dock-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--desk-muted);
}

.docker-app .desk-toolbar [data-act="socket"] {
    color: var(--desk-muted);
}

.docker-app .desk-toolbar [data-act="socket"].active {
    color: #95efbb;
    border-color: color-mix(in srgb, #95efbb 45%, var(--desk-border) 55%);
}

.docker-app .desk-toolbar [data-act="autoscroll"].active {
    color: color-mix(in srgb, #79dca8 78%, var(--desk-text) 22%);
    border-color: color-mix(in srgb, #79dca8 45%, var(--desk-border) 55%);
}

.docker-app.workspace-parity .docker-quick,
.docker-app.workspace-parity .docker-wizard {
    display: none !important;
}

.docker-app .desk-toolbar [data-act="new-task"] {
    border-color: color-mix(in srgb, var(--desk-accent) 62%, var(--desk-border) 38%);
    background: color-mix(in srgb, var(--desk-accent) 18%, var(--desk-window-2) 82%);
    color: var(--desk-text);
}

.docker-app .desk-toolbar [data-act="new-task"]:hover {
    border-color: var(--desk-accent);
}

.docker-quick {
    border-bottom: 1px solid var(--desk-border);
    padding: 8px 10px;
    background: color-mix(in srgb, var(--desk-window-2) 86%, #000000 14%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.docker-quick .quick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.docker-quick .quick-head strong {
    font-size: 12px;
    letter-spacing: 0.1px;
}

.docker-quick .quick-head span {
    color: var(--desk-muted);
    font-size: 11px;
}

.docker-quick .quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.docker-quick .quick-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--desk-muted);
    font-size: 11px;
}

.docker-quick .quick-grid input,
.docker-quick .quick-grid select {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    font-size: 12px;
    padding: 5px 8px;
}

.docker-quick .quick-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.docker-quick .quick-actions button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 4px 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.docker-quick .quick-actions button:hover {
    border-color: var(--desk-accent);
}

.docker-quick .quick-actions button.primary {
    border-color: color-mix(in srgb, var(--desk-accent) 70%, var(--desk-border) 30%);
    background: color-mix(in srgb, var(--desk-accent) 16%, var(--desk-window-2) 84%);
}

.docker-source-picker,
.editor-path-picker {
    border: 1px solid var(--desk-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.docker-source-picker.hidden,
.editor-path-picker.hidden {
    display: none;
}

.docker-source-picker .picker-head,
.editor-path-picker .picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.docker-source-picker .picker-head .actions,
.editor-path-picker .picker-head .actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.docker-source-picker .picker-head button,
.docker-source-picker .picker-nav button,
.editor-path-picker .picker-head button,
.editor-path-picker .picker-nav button {
    border: 1px solid var(--desk-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--desk-window-2) 86%, #000000 14%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
}

.docker-source-picker .picker-nav,
.editor-path-picker .picker-nav {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 7px;
    align-items: center;
}

.docker-source-picker .picker-nav input,
.docker-source-picker .picker-filter input,
.editor-path-picker .picker-nav input,
.editor-path-picker .picker-filter input {
    border: 1px solid var(--desk-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 4px 8px;
}

.docker-source-picker .picker-list,
.editor-path-picker .picker-list {
    max-height: 210px;
    min-height: 80px;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--desk-border) 72%, transparent);
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editor-path-picker .picker-current {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--desk-muted);
}

.editor-path-picker .picker-current code {
    border: 1px solid color-mix(in srgb, var(--desk-border) 72%, transparent);
    border-radius: 7px;
    padding: 3px 7px;
    background: color-mix(in srgb, var(--desk-window-2) 80%, #000000 20%);
    color: var(--desk-text);
    font-size: 11px;
}

.editor-path-picker {
    margin: 6px 8px 8px;
}

.docker-picker-row {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 84%, #000000 16%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    text-align: left;
}

.docker-picker-row.selected {
    border-color: color-mix(in srgb, var(--desk-accent) 70%, var(--desk-border) 30%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk-accent) 28%, transparent) inset;
}

.docker-picker-row.picker-item {
    width: 100%;
    justify-content: flex-start;
}

.docker-picker-row.picker-item em {
    margin-left: auto;
    font-style: normal;
    font-size: 10px;
    color: var(--desk-muted);
}

.editor-path-picker .picker-selection {
    border-top: 1px solid color-mix(in srgb, var(--desk-border) 68%, transparent);
    padding-top: 7px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.editor-path-picker .picker-selection .meta {
    font-size: 11px;
    color: var(--desk-muted);
    min-height: 18px;
}

.editor-path-picker .picker-selection .actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.editor-path-picker .picker-selection .actions button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 86%, #000000 14%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 3px 9px;
    cursor: pointer;
}

.editor-path-picker .picker-selection .actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.docker-picker-row.dir {
    justify-content: space-between;
    width: 100%;
}

.docker-picker-row.dir .open {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.docker-picker-row.dir .use {
    border: 1px solid var(--desk-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 2px 7px;
    cursor: pointer;
}

.docker-picker-empty {
    border: 1px dashed color-mix(in srgb, var(--desk-border) 72%, transparent);
    border-radius: 8px;
    padding: 8px;
    color: var(--desk-muted);
    font-size: 11px;
}

@media (max-width: 1220px) {
    .docker-quick .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.desk-main.split.docker-main {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 360px 1fr;
}

.docker-list,
.docker-console {
    min-height: 0;
}

.docker-list {
    border-right: 1px solid var(--desk-border);
    overflow: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.docker-console {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.docker-console-head {
    border-bottom: 1px solid var(--desk-border);
    padding: 8px 10px;
    background: color-mix(in srgb, var(--desk-window-2) 88%, #000000 12%);
}

.docker-console-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--desk-text);
}

.docker-console-meta {
    margin-top: 4px;
    font-size: 11px;
    color: var(--desk-muted);
    line-height: 1.35;
}

.docker-console-actions {
    border-bottom: 1px solid var(--desk-border);
    padding: 7px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
}

.docker-console-actions button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 84%, #000000 16%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
}

.docker-console-actions button:hover {
    border-color: var(--desk-accent);
}

.docker-console-actions button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: color-mix(in srgb, var(--desk-border) 82%, transparent);
}

.docker-console-actions button.danger {
    border-color: color-mix(in srgb, var(--theme-danger, #ff8d8d) 70%, var(--desk-border) 30%);
    color: color-mix(in srgb, var(--theme-danger, #ff8d8d) 75%, #ffffff 25%);
}

.docker-task-row {
    border: 1px solid var(--desk-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--desk-window-2) 82%, #000000 18%);
    color: var(--desk-text);
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}

.docker-task-row .main {
    min-width: 0;
    flex: 1;
}

.docker-task-row .line-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.docker-task-row .line-1 .name {
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docker-task-row .line-1 .status {
    border: 1px solid color-mix(in srgb, var(--desk-border) 70%, transparent);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10px;
    color: var(--desk-muted);
    white-space: nowrap;
}

.docker-task-row.running .line-1 .status {
    color: #95efbb;
    border-color: color-mix(in srgb, #95efbb 48%, var(--desk-border) 52%);
}

.docker-task-row .line-2 {
    margin-top: 5px;
    font-size: 11px;
    color: var(--desk-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.docker-task-row .actions {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.docker-task-row .actions button {
    border: 1px solid var(--desk-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 3px 7px;
    cursor: pointer;
}

.docker-task-row.selected,
.docker-task-row:hover {
    border-color: var(--desk-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--desk-accent) 28%, transparent);
}

.docker-log {
    flex: 1;
    min-height: 0;
    border: 0;
    margin: 0;
    padding: 10px;
    overflow: auto;
    background: color-mix(in srgb, var(--desk-window) 88%, #000000 12%);
    color: var(--desk-text-soft, #cee3f7);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    white-space: pre-wrap;
}

.docker-stdin {
    border-top: 1px solid var(--desk-border);
    padding: 8px 9px;
    background: color-mix(in srgb, var(--desk-window-2) 90%, #000000 10%);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.docker-stdin.hidden {
    display: none;
}

.docker-stdin .stdin-label {
    color: var(--desk-muted);
    font-size: 11px;
    font-weight: 600;
}

.docker-stdin .stdin-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    align-items: end;
}

.docker-stdin textarea {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    color: var(--desk-text);
    min-height: 56px;
    max-height: 120px;
    resize: vertical;
    padding: 7px 9px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    line-height: 1.35;
}

.docker-stdin button {
    border: 1px solid var(--desk-accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-accent) 24%, var(--desk-window-2) 76%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 6px 10px;
    min-height: 32px;
    cursor: pointer;
}

.docker-stdin button:disabled,
.docker-stdin textarea:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.docker-stdin .stdin-hint {
    color: var(--desk-muted);
    font-size: 10px;
    line-height: 1.35;
}

.docker-wizard {
    border-top: 1px solid var(--desk-border);
    border-bottom: 1px solid var(--desk-border);
    padding: 8px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
}

.docker-builder-overlay {
    position: absolute;
    inset: 0;
    z-index: 56;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: color-mix(in srgb, #000000 62%, transparent);
    backdrop-filter: blur(2px);
}

.docker-builder-overlay.hidden {
    display: none;
}

.docker-builder-modal {
    width: min(1280px, calc(100% - 16px));
    height: min(780px, calc(100% - 10px));
    border: 1px solid color-mix(in srgb, var(--desk-border) 75%, transparent);
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--desk-window-2) 96%, #000000 4%);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.docker-builder-head {
    border-bottom: 1px solid var(--desk-border);
    background: color-mix(in srgb, var(--desk-window) 88%, #000000 12%);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
}

.docker-builder-head .title {
    font-size: 12px;
    font-weight: 700;
    color: var(--desk-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.docker-builder-head .actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.docker-builder-head .actions button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 88%, #000000 12%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 4px 9px;
    cursor: pointer;
}

.docker-builder-head .actions button:hover {
    border-color: var(--desk-accent);
}

.docker-builder-frame {
    border: 0;
    width: 100%;
    flex: 1;
    min-height: 0;
    background: var(--desk-window);
}

.docker-builder-native {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(460px 220px at 96% 0%, color-mix(in srgb, var(--desk-accent) 12%, transparent), transparent 68%),
        linear-gradient(180deg, color-mix(in srgb, var(--desk-window) 94%, #ffffff 6%), var(--desk-window));
}

.builder-side {
    border-right: 1px solid var(--desk-border);
    background: color-mix(in srgb, var(--desk-window) 94%, #000000 6%);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.builder-side-head {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--desk-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--desk-window-2) 90%, #ffffff 10%), var(--desk-window-2));
}

.builder-side-head .title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--desk-text);
    font-size: 13px;
}

.builder-side-head .hint {
    margin-top: 6px;
    color: var(--desk-muted);
    font-size: 11px;
    line-height: 1.45;
}

.builder-browser-nav,
.builder-browser-actions,
.builder-main-head,
.builder-main-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}

.builder-browser-nav,
.builder-browser-filter,
.builder-browser-current,
.builder-browser-actions,
.builder-summary {
    padding: 10px 12px;
}

.builder-browser-nav {
    border-bottom: 1px solid color-mix(in srgb, var(--desk-border) 72%, transparent);
}

.builder-browser-filter {
    border-bottom: 1px solid color-mix(in srgb, var(--desk-border) 72%, transparent);
    padding-top: 0;
}

.builder-browser-nav button,
.builder-browser-actions button,
.builder-main-head .actions button,
.builder-foot-actions button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 88%, #000000 12%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 5px 9px;
    cursor: pointer;
}

.builder-browser-nav button:hover,
.builder-browser-actions button:hover,
.builder-main-head .actions button:hover,
.builder-foot-actions button:hover {
    border-color: var(--desk-accent);
}

.builder-browser-nav button:disabled,
.builder-browser-actions button:disabled,
.builder-main-head .actions button:disabled,
.builder-foot-actions button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.builder-browser-nav input,
.builder-browser-filter input {
    min-width: 0;
    flex: 1;
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    padding: 6px 10px;
    font-size: 12px;
}

.builder-browser-current {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--desk-muted);
    font-size: 11px;
}

.builder-browser-current code,
.builder-summary code {
    display: block;
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 82%, #000000 18%);
    color: var(--desk-text);
    padding: 6px 8px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.builder-browser-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.builder-entry {
    width: 100%;
    border: 1px solid var(--desk-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--desk-window-2) 84%, #000000 16%);
    color: var(--desk-text);
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.builder-entry:hover {
    border-color: var(--desk-accent);
}

.builder-entry.selected {
    border-color: color-mix(in srgb, var(--desk-accent) 72%, var(--desk-border) 28%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--desk-accent) 30%, transparent);
    background: color-mix(in srgb, var(--desk-accent) 14%, var(--desk-window-2) 86%);
}

.builder-entry i {
    color: var(--desk-accent);
}

.builder-entry.dir i {
    color: #f2bf6f;
}

.builder-entry span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

.builder-entry em {
    color: var(--desk-muted);
    font-style: normal;
    font-size: 10px;
    white-space: nowrap;
}

.builder-empty-list,
.builder-browser-selection {
    margin: 0 12px 10px;
    border: 1px dashed color-mix(in srgb, var(--desk-border) 72%, transparent);
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--desk-muted);
    font-size: 11px;
}

.builder-browser-actions {
    flex-wrap: wrap;
    border-top: 1px solid color-mix(in srgb, var(--desk-border) 72%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--desk-border) 72%, transparent);
}

.builder-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.builder-summary .summary-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.builder-summary .summary-row .k {
    color: var(--desk-muted);
    font-size: 11px;
}

.builder-summary .summary-row .v {
    color: var(--desk-text);
    font-size: 12px;
    font-weight: 600;
}

.builder-main {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--desk-window) 96%, #000000 4%);
    overflow: hidden;
}

.builder-main-head {
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--desk-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--desk-window-2) 90%, #ffffff 10%), var(--desk-window-2));
}

.builder-main-head .meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.builder-main-head .meta strong {
    color: var(--desk-text);
    font-size: 13px;
}

.builder-main-head .meta span {
    color: var(--desk-muted);
    font-size: 11px;
}

.builder-main-head .actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.builder-main-body {
    flex: 1;
    min-height: 0;
    position: relative;
    background: color-mix(in srgb, var(--desk-window) 98%, #000000 2%);
    overflow: hidden;
}

.builder-empty {
    position: absolute;
    inset: 16px;
    border: 1px dashed color-mix(in srgb, var(--desk-border) 70%, transparent);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--desk-muted);
    text-align: center;
    background:
        radial-gradient(420px 180px at 80% 0%, color-mix(in srgb, var(--desk-accent) 12%, transparent), transparent 65%),
        color-mix(in srgb, var(--desk-window-2) 64%, transparent);
}

.builder-empty.hidden {
    display: none;
}

.builder-empty i {
    font-size: 34px;
    color: var(--desk-accent);
}

.builder-empty strong {
    color: var(--desk-text);
    font-size: 16px;
}

.builder-empty span {
    max-width: 460px;
    line-height: 1.5;
}

.builder-workspace-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: color-mix(in srgb, var(--desk-window) 98%, #000000 2%);
}

.builder-workspace-frame.hidden {
    display: none;
}

.builder-main-foot {
    justify-content: space-between;
    padding: 10px 12px;
    border-top: 1px solid var(--desk-border);
    background: color-mix(in srgb, var(--desk-window-2) 90%, #000000 10%);
}

.builder-status {
    color: var(--desk-muted);
    font-size: 11px;
}

.builder-status.error {
    color: color-mix(in srgb, var(--theme-danger, #ffadad) 82%, #ffffff 18%);
}

.builder-foot-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 1180px) {
    .docker-builder-native {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

@media (max-width: 960px) {
    .docker-builder-native {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    }

    .builder-browser-nav,
    .builder-browser-actions,
    .builder-main-head,
    .builder-main-foot {
        gap: 6px;
    }
}

.wizard-summary {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    padding: 8px;
    color: var(--desk-muted);
    background: color-mix(in srgb, var(--desk-window-2) 82%, #000000 18%);
    white-space: pre-wrap;
    font-size: 11px;
}

.desk-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.desk-form-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.desk-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--desk-muted);
    font-size: 11px;
}

.desk-form-grid input,
.desk-form-grid select,
.desk-actions-row button,
.share-users button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 88%, #000000 12%);
    color: var(--desk-text);
    font-size: 12px;
    padding: 5px 8px;
}

.desk-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.ai-native {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.ai-side {
    border-right: 1px solid var(--desk-border);
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ai-side-head {
    padding: 8px;
    border-bottom: 1px solid var(--desk-border);
    display: flex;
    gap: 6px;
}

.ai-session-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overscroll-behavior: contain;
}

.ai-session-item {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 82%, #000000 18%);
    color: var(--desk-text);
    padding: 6px 8px;
    text-align: left;
    font-size: 11px;
    cursor: pointer;
}

.ai-session-item.active,
.ai-session-item:hover {
    border-color: var(--desk-accent);
}

.ai-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ai-toolbar {
    border-bottom: 1px solid var(--desk-border);
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--desk-window-2);
}

.ai-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--desk-muted);
    font-size: 11px;
}

.ai-toolbar select,
.ai-toolbar button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    color: var(--desk-text);
    font-size: 12px;
    padding: 4px 8px;
}

.ai-attach {
    border-bottom: 1px solid var(--desk-border);
    padding: 8px;
    background: color-mix(in srgb, var(--desk-window) 94%, #000000 6%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-attach .attach-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.ai-attach .row {
    display: flex;
    gap: 6px;
}

.ai-attach input,
.ai-attach button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 88%, #000000 12%);
    color: var(--desk-text);
    font-size: 12px;
    padding: 4px 8px;
}

.attach-opened,
.attach-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    max-height: 120px;
    overflow: auto;
}

.attach-opened label,
.attach-list label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    border: 1px solid var(--desk-border);
    border-radius: 7px;
    padding: 4px 6px;
    font-size: 11px;
}

.attach-list .attach-dir {
    border: 1px solid var(--desk-border);
    border-radius: 7px;
    padding: 5px 7px;
    font-size: 11px;
    background: color-mix(in srgb, var(--desk-window-2) 84%, #000000 16%);
    color: var(--desk-text);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    text-align: left;
}

.attach-list .attach-dir:hover {
    border-color: var(--desk-accent);
}

.attach-list .attach-file {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.ai-chat-log {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px;
}

.ai-msg {
    margin-bottom: 10px;
    max-width: 88%;
    border: 1px solid var(--desk-border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--desk-window-2) 82%, #000000 18%);
    padding: 7px 9px;
}

.ai-msg.mine {
    margin-left: auto;
    background: color-mix(in srgb, var(--desk-accent) 18%, var(--desk-window-2) 82%);
}

.ai-msg .head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--desk-muted);
    font-size: 11px;
    margin-bottom: 4px;
}

.ai-msg .body {
    font-size: 13px;
    line-height: 1.45;
}

.ai-msg.error {
    border-color: color-mix(in srgb, var(--theme-danger, #ff8f8f) 60%, var(--desk-border) 40%);
    background: color-mix(in srgb, var(--theme-danger, #ff8f8f) 12%, var(--desk-window-2) 88%);
}

.ai-msg .typing {
    color: var(--desk-muted);
    font-style: italic;
}

.ai-plan-card {
    border-top: 1px dashed var(--desk-border);
    margin-top: 8px;
    padding-top: 8px;
}

.ai-plan-card .plan-title {
    font-size: 12px;
    color: var(--desk-muted);
    margin-bottom: 5px;
}

.plan-op-row {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    font-size: 11px;
    margin-bottom: 4px;
}

.plan-actions {
    display: flex;
    gap: 6px;
    margin-top: 7px;
}

.plan-actions button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 4px 7px;
}

.ai-composer {
    border-top: 1px solid var(--desk-border);
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 90%, #000000 10%);
    flex: 0 0 auto;
    min-height: 86px;
    align-items: stretch;
}

.ai-composer textarea {
    width: 100%;
    min-width: 0;
    min-height: 70px;
    max-height: 160px;
    resize: vertical;
    border: 1px solid var(--desk-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    font-size: 13px;
    padding: 8px 10px;
}

.ai-composer button {
    align-self: end;
    border: 1px solid var(--desk-accent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--desk-accent) 25%, var(--desk-window-2) 75%);
    color: var(--desk-text);
    font-size: 12px;
    padding: 7px 12px;
    min-height: 34px;
}

.collab-app {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.collab-side {
    border-right: 1px solid var(--desk-border);
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.collab-side .head {
    padding: 8px;
    border-bottom: 1px solid var(--desk-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collab-side .head button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 82%, #000000 18%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 2px 8px;
}

.room-list,
.presence-list {
    overflow: auto;
    padding: 8px;
    min-height: 0;
    flex: 1 1 0;
    overscroll-behavior: contain;
}

.room-item {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 82%, #000000 18%);
    color: var(--desk-text);
    font-size: 12px;
    padding: 6px 8px;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
    cursor: pointer;
}

.room-item.active,
.room-item:hover {
    border-color: var(--desk-accent);
}

.presence-item {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 82%, #000000 18%);
    padding: 6px 8px;
    margin-bottom: 6px;
    font-size: 11px;
}

.presence-item .row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.presence-item .pill {
    border: 1px solid var(--desk-border);
    border-radius: 999px;
    padding: 1px 8px;
}

.presence-item .pill.online {
    color: #95efbb;
}

.presence-item .pill.away {
    color: #ffd59b;
}

.collab-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.collab-toolbar {
    height: 44px;
    border-bottom: 1px solid var(--desk-border);
    background: color-mix(in srgb, var(--desk-window-2) 90%, #000000 10%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
}

.collab-toolbar .actions {
    display: flex;
    gap: 6px;
}

.collab-toolbar .actions button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 3px 8px;
}

.collab-log {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    overscroll-behavior: contain;
}

.collab-log .msg {
    border: 1px solid var(--desk-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--desk-window-2) 82%, #000000 18%);
    padding: 7px 9px;
    margin-bottom: 9px;
    max-width: 88%;
}

.collab-log .msg.mine {
    margin-left: auto;
    background: color-mix(in srgb, var(--desk-accent) 16%, var(--desk-window-2) 84%);
}

.collab-log .msg .meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--desk-muted);
    font-size: 11px;
    margin-bottom: 4px;
}

.collab-log .file-actions {
    margin-top: 6px;
    display: flex;
    gap: 8px;
}

.collab-log .file-actions a,
.collab-log .file-actions button {
    border: 1px solid var(--desk-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 2px 7px;
    text-decoration: none;
}

.collab-composer {
    border-top: 1px solid var(--desk-border);
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 90%, #000000 10%);
}

.collab-composer textarea {
    width: 100%;
    min-height: 68px;
    resize: vertical;
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window) 92%, #000000 8%);
    color: var(--desk-text);
    font-size: 13px;
    padding: 8px 10px;
}

.collab-composer button {
    align-self: end;
    border: 1px solid var(--desk-accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-accent) 24%, var(--desk-window-2) 76%);
    color: var(--desk-text);
    font-size: 12px;
    padding: 7px 12px;
}

.share-tab {
    display: none;
    padding: 10px;
    overflow: auto;
    min-height: 0;
    flex: 1 1 auto;
    overscroll-behavior: contain;
}

.share-tab.active {
    display: block;
}

.share-app {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.settings-app {
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding: 10px;
}

.share-users {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.share-list {
    display: grid;
    gap: 8px;
}

.share-row {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    padding: 8px;
    background: color-mix(in srgb, var(--desk-window-2) 82%, #000000 18%);
    color: var(--desk-text);
    font-size: 12px;
}

.share-row .meta {
    color: var(--desk-muted);
    font-size: 11px;
    margin: 4px 0 6px;
}

.share-row .actions {
    display: flex;
    gap: 6px;
}

.share-row .actions button {
    border: 1px solid var(--desk-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--desk-window) 90%, #000000 10%);
    color: var(--desk-text);
    font-size: 11px;
    padding: 3px 8px;
}