/* ===== 基础变量（深色默认） ===== */
:root {
    color-scheme: dark;
    --bg: #0d1117;
    --surface: #161b22;
    --border: #30363d;
    --text: #e6edf3;
    --text-secondary: #8b949e;
    --accent: #58a6ff;
    --accent-hover: #79c0ff;
    --danger: #f85149;
    --success: #3fb950;
    --warning: #d2991d;
    --radius: 12px;
    --radius-sm: 10px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --terminal-font-size: 14px;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'DejaVu Sans Mono', monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
    --wterm-bg: #0a0a0a;
    --wterm-fg: #e6edf3;
    --wterm-selection: rgba(88,166,255,0.28);
    --keyboard-inset: 0px;
    --stable-vh: 100vh;
    --visual-vh: var(--stable-vh, 100vh);
    --visual-offset-top: 0px;
    --vvh: 100dvh;
    --app-keyboard-inset: 0px;
    --app-visual-vh: 100vh;
    --app-visual-offset-top: 0px;
    --connection-ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ios-open: cubic-bezier(0.16, 1, 0.3, 1);
    --ios-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --connection-app-duration: 0.5s;
    --connection-shadow-idle: 0 4px 12px rgba(0,0,0,0.2);
    --connection-shadow-active: 0 40px 100px rgba(0,0,0,0.5);
}

/* 浅色主题 */
@property --workspace-split-x {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 66.666%;
}

@property --workspace-split-y {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 50%;
}

@property --island-fluid-scale-x {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

@property --island-fluid-scale-y {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

@property --island-fluid-blur {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --island-w {
    syntax: '<length>';
    inherits: true;
    initial-value: 58px;
}

@property --island-h {
    syntax: '<length>';
    inherits: true;
    initial-value: 22px;
}

@property --island-dot-spread {
    syntax: '<length>';
    inherits: true;
    initial-value: 10px;
}

@property --island-dot-scale {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

@property --island-dot-opacity {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #f6f8fa;
    --border: #d0d7de;
    --text: #1f2328;
    --text-secondary: #656d76;
    --accent: #0969da;
    --accent-hover: #0550b2;
    --danger: #cf222e;
    --success: #1a7f37;
    --warning: #9a6700;
    --terminal-bg: #f6f8fa;
}

:root[data-wterm-theme="light"] {
    --wterm-bg: #f6f8fa;
    --wterm-fg: #1f2328;
    --wterm-selection: rgba(9,105,218,0.22);
}

:root[data-wterm-theme="default"] {
    --wterm-bg: #0a0a0a;
    --wterm-fg: #e6edf3;
    --wterm-selection: rgba(88,166,255,0.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 统一滚动条颜色，避免深色模式下出现浏览器默认浅色滚动条 */
* {
    scrollbar-color: rgba(139,148,158,0.56) transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(139,148,158,0.48);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(139,148,158,0.68);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

:root[data-theme="light"] * {
    scrollbar-color: rgba(101,109,118,0.46) transparent;
}

:root[data-theme="light"] *::-webkit-scrollbar-thumb {
    background-color: rgba(101,109,118,0.38);
}

:root[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(101,109,118,0.56);
}

html,
body,
.app-shell,
.main-nav,
.app-main,
.view,
.login-card,
.connection-card,
.activity-panel,
.empty-card,
.settings-content,
.settings-menu,
.settings-panel,
.mini-item,
.activity-item,
.remark-md,
.remote-servers,
.remote-command,
.result-card,
.modal-backdrop,
.connection-modal,
.terminal-page,
.terminal-topbar,
.toolbar,
.file-manager,
.info-modal,
.docker-panel,
.fm-header,
.fm-toolbar,
.fm-editor-modal,
.fm-editor-code-shell,
.terminal-container,
.btn,
.btn-sm,
.tool-btn,
.icon-btn,
input,
textarea,
select {
    transition-property: background-color, background, color, border-color, box-shadow, fill, stroke, opacity, filter;
    transition-duration: 260ms;
    transition-timing-function: ease;
}

.theme-transitioning,
.theme-transitioning *,
.wterm-theme-transitioning,
.wterm-theme-transitioning * {
    transition-duration: 520ms !important;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.app-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at calc(100% - 84px) 28px, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
        color-mix(in srgb, var(--bg) 16%, transparent);
    transform: scale(1.015);
}

body.app-body.theme-ripple-active::before {
    animation: appThemeRipple .54s cubic-bezier(0.16, 1, 0.3, 1);
}

#addConnectionBtn,
.connection-list [data-edit] {
    transform: translateZ(0) scale(var(--connection-press-scale, 1));
    transform-origin: center;
    will-change: transform;
    transition:
        transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        background-color 260ms ease,
        background 260ms ease,
        color 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        opacity 260ms ease,
        filter 260ms ease;
}
#addConnectionBtn.connection-pressing,
.connection-list [data-edit].connection-pressing {
    --connection-press-scale: 0.965;
    transition:
        transform 0.10s cubic-bezier(0.32, 0.72, 0, 1),
        background-color 180ms ease,
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease,
        filter 180ms ease;
}

@keyframes appThemeRipple {
    0% { opacity: .36; transform: scale(1.018); filter: blur(8px); }
    58% { opacity: .18; filter: blur(2px); }
    100% { opacity: 0; transform: scale(1); filter: blur(0); }
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
}

html:has(body.app-body),
html:has(body.app-body) body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    -webkit-tap-highlight-color: transparent;
}

body:has(.terminal-page),
body:has(.guac-page) {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--visual-vh, var(--stable-vh, 100vh));
    min-height: var(--visual-vh, var(--stable-vh, 100vh));
    padding: 0;
    overflow: hidden;
}

html.viewport-updating body:has(.terminal-page) {
    transition: height 0.20s cubic-bezier(0.16, 1, 0.3, 1), min-height 0.20s cubic-bezier(0.16, 1, 0.3, 1);
}

body.app-body {
    display: block;
    padding: 0;
    min-height: 100vh;
    overflow: auto;
}

html:has(body.app-body) { height: auto; min-height: 100%; overflow: auto; }

html:has(body.app-body.terminal-mode),
html:has(body.app-body.terminal-mode) body,
body.app-body.terminal-mode {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* ===== 登录卡片 ===== */
.login-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    animation: fadeIn 0.35s ease-out;
}
:root[data-theme="dark"] .login-card { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.login-card .logo { text-align: center; margin-bottom: 8px; font-size: 40px; }
.login-card .logo img { width: 52px; height: 52px; object-fit: contain; display: inline-block; border-radius: 14px; }
.login-card h1 { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.auth-subtitle { text-align: center; color: var(--text-secondary); margin: -12px 0 18px; font-size: 13px; }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; font-size: 13px; color: var(--text-secondary); }
.captcha-box {
    display: grid;
    place-items: center;
    min-height: 0;
    margin: 2px 0 12px;
    overflow: visible;
}
.captcha-box.force-hidden { display: none !important; }
.captcha-box.loading::before {
    content: '正在加载人机验证...';
    color: var(--text-secondary);
    font-size: 12px;
}
.captcha-box.error {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(248,81,73,.35);
    border-radius: var(--radius);
    background: rgba(248,81,73,.08);
    color: var(--danger);
    font-size: 12px;
    text-align: center;
}
.remember-me { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.remember-me input { width: 14px; height: 14px; accent-color: var(--accent); }
.auth-options a { color: var(--text-secondary); font-size: 12px; text-decoration: none; }
.auth-options a:hover { color: var(--accent-hover); text-decoration: underline; }
.auth-hint { margin-top: 14px; color: var(--text-secondary); font-size: 12px; text-align: center; line-height: 1.6; }
.force-hidden { display: none !important; }
.beian-footer {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    color: #999;
    font-size: 12px;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.beian-footer a {
    color: #999;
    text-decoration: none;
}

.beian-footer a:hover {
    color: #777;
    text-decoration: underline;
}

/* ===== Zephyr 管理后台第一版 ===== */
.app-shell { min-height: 100vh; background: var(--bg); color: var(--text); }
.main-nav {
    --nav-fusion-bg: color-mix(in srgb, var(--surface) 88%, transparent);
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 18px; border-bottom: 1px solid var(--border);
    background: var(--nav-fusion-bg);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.main-nav {
    transition:
        padding-bottom .62s cubic-bezier(.16,1,.3,1),
        background .30s ease,
        box-shadow .42s ease,
        border-radius .42s ease;
}
body.terminal-mode .main-nav {
    position: sticky;
    top: 0;
    padding-bottom: 27px;
    transform: none;
    opacity: 1;
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
body.terminal-mode-entering .main-nav {
    animation: navDockShelfDrop .66s cubic-bezier(.16,1,.3,1) both;
}
@keyframes navDockShelfDrop {
    0% { padding-bottom: 12px; filter: blur(.2px); }
    58% { padding-bottom: 31px; filter: blur(0); }
    82% { padding-bottom: 25px; }
    100% { padding-bottom: 27px; }
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 18px; }
.brand span { display: inline-grid; place-items: center; min-width: 24px; }
.brand img { width: 24px; height: 24px; object-fit: contain; border-radius: 7px; display: block; }
.nav-tabs, .nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-tabs { flex: 1; justify-content: center; overflow-x: auto; }
.nav-tab, .settings-tab {
    border: 1px solid transparent; background: transparent; color: var(--text-secondary);
    border-radius: var(--radius); padding: 8px 13px; cursor: pointer; font-weight: 700;
    position: relative; overflow: hidden;
    transition: transform .34s cubic-bezier(.18,1.2,.2,1), background .28s cubic-bezier(.16,1,.3,1), color .28s ease, border-color .28s ease, box-shadow .28s ease; white-space: nowrap;
}
.nav-tab::after, .settings-tab::after { content: ''; position: absolute; inset: auto 16px 5px; height: 3px; border-radius: 999px; background: var(--accent-hover); opacity: 0; transform: scaleX(.35); transition: opacity .32s ease, transform .42s cubic-bezier(.16,1,.3,1); }
.nav-tab:hover, .settings-tab:hover { background: var(--bg); color: var(--text); transform: translateY(-1px); }
.nav-tab.active, .settings-tab.active { color: var(--accent-hover); background: rgba(88,166,255,.15); border-color: rgba(88,166,255,.35); box-shadow: inset 0 0 0 1px rgba(88,166,255,.08), 0 8px 22px rgba(88,166,255,.08); }
.nav-tab.active::after, .settings-tab.active::after { opacity: 1; transform: scaleX(1); }
.app-main { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 26px 0 48px; }
.view { display: none; animation: fadeIn .28s ease-out; }
.view.active { display: block; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head h1 { font-size: clamp(24px, 4vw, 36px); letter-spacing: -0.03em; }
.eyebrow { color: var(--accent-hover); font-size: 12px; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 4px; }
.add-btn { width: auto; min-width: 150px; }
.action-bar { display: grid; grid-template-columns: 1fr 140px 140px 150px; gap: 10px; margin-bottom: 16px; }
.search-input, .action-bar select, .settings-form input, .settings-form select, .settings-form textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); outline: none;
}
.search-input:focus, .action-bar select:focus, .settings-form input:focus, .settings-form select:focus, .settings-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,.12); }
.connection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.connection-card, .activity-panel, .empty-card, .terminal-placeholder, .settings-content, .settings-menu {
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.connection-card {
    padding: 16px;
    transform-origin: center;
    animation: connectionCardIn .34s cubic-bezier(.16,1,.3,1) both;
    transition:
        transform .30s cubic-bezier(.16,1,.3,1),
        opacity .24s ease,
        filter .28s ease,
        border-color .24s ease,
        box-shadow .30s ease;
    will-change: transform, opacity, filter;
}
.connection-card:hover { transform: translateY(-3px); border-color: rgba(88,166,255,.42); box-shadow: 0 16px 38px rgba(0,0,0,.18); }
.connection-card.deleting {
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(.92);
    filter: blur(10px) saturate(.72);
    pointer-events: none;
    animation: connectionCardDelete .30s cubic-bezier(.2,.8,.2,1) both;
}
.connection-card.deleting .card-actions { opacity: .35; }
@keyframes connectionCardIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.975); filter: blur(8px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes connectionCardDelete {
    0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate3d(0, -14px, 0) scale(.90); filter: blur(10px) saturate(.72); }
}
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.protocol-badge { padding: 4px 9px; border-radius: 999px; background: rgba(88,166,255,.15); color: var(--accent-hover); font-size: 12px; font-weight: 800; }
.last-time, .muted { color: var(--text-secondary); font-size: 12px; }
.connection-card h2 { font-size: 19px; margin-bottom: 5px; }
.host-line { color: var(--text-secondary); font-family: var(--font-mono); font-size: 13px; margin-bottom: 12px; }
.remark-md { min-height: 56px; padding: 10px; border-radius: var(--radius); background: var(--bg); color: var(--text-secondary); font-size: 13px; line-height: 1.55; overflow: auto; }
.remark-md code { padding: 2px 5px; border-radius: 6px; background: rgba(139,148,158,.16); color: var(--text); }
.remark-md pre { padding: 8px; border-radius: var(--radius-sm); background: #05070a; overflow: auto; margin: 4px 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; margin-bottom: 10px; }
.tag-row span { padding: 3px 8px; border-radius: 999px; background: rgba(63,185,80,.13); color: var(--success); font-size: 12px; }
.card-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.card-actions .btn { width: auto; flex: 1; padding: 8px 12px; margin-top: 0; }
.activity-panel { margin-top: 18px; padding: 16px; }
.activity-panel h2, .settings-panel h2 { font-size: 18px; margin-bottom: 12px; }
.activity-list { display: grid; gap: 8px; }
.activity-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg); font-size: 13px; }
.activity-item span { color: var(--text-secondary); }
.empty-card, .terminal-placeholder { padding: 28px; text-align: center; color: var(--text-secondary); }
.browser-tabs { min-height: 50px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 10px; margin-bottom: 14px; overflow-x: auto; }

/* ===== 终端工作台：顶部智能悬浮栏 ===== */
body.terminal-mode .app-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
.terminal-view.active {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--smartbar-top, 61px) - 4px);
    min-height: 0;
    overflow: hidden;
}
.app-main:has(#view-terminal.active) {
    width: calc(100% - 4px);
    height: calc(100dvh - var(--smartbar-top, 61px));
    min-height: 0;
    padding: 2px 0 0;
    overflow: hidden;
}
.terminal-smartbar {
    --smartbar-top: 61px;
    --smartbar-bar-width: 72px;
    --smartbar-bar-height: 4px;
    position: fixed;
    top: calc(var(--smartbar-top) - 31px);
    left: 0;
    right: 0;
    z-index: 80;
    height: 0;
    pointer-events: none;
    display: block;
}
.terminal-smartbar .empty-state { display: none; }
.smartbar-handle {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 96px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    pointer-events: none;
    transform: translate3d(-50%, -10px, 0) scaleX(.72);
    opacity: 0;
    transition:
        transform .58s cubic-bezier(.16,1,.3,1),
        opacity .28s ease;
}
.smartbar-handle span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--smartbar-bar-width);
    height: var(--smartbar-bar-height);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 68%, transparent);
    box-shadow: 0 1px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.32);
    transform: translate(-50%, -50%);
    transition:
        width .42s cubic-bezier(.16,1,.3,1),
        background .22s ease,
        box-shadow .22s ease,
        transform .42s cubic-bezier(.16,1,.3,1);
}
body.terminal-mode .terminal-smartbar .smartbar-handle,
.terminal-smartbar.open .smartbar-handle,
.terminal-smartbar.closing .smartbar-handle {
    pointer-events: auto;
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scaleX(1);
}
.terminal-smartbar.open .smartbar-handle span {
    width: 66px;
    background: color-mix(in srgb, var(--accent-hover) 62%, var(--text-secondary));
    transform: translate(-50%, -50%) scaleX(.98);
}
body.terminal-mode-entering .terminal-smartbar .smartbar-handle {
    animation: dockBarShelfReveal .66s cubic-bezier(.16,1,.3,1) both;
}
@keyframes dockBarShelfReveal {
    0% { opacity: 0; transform: translate3d(-50%, 0, 0) scaleX(.42); clip-path: inset(0 50% 0 50% round 999px); filter: blur(1px); }
    58% { opacity: 1; transform: translate3d(-50%, 0, 0) scaleX(1.04); clip-path: inset(0 0 0 0 round 999px); filter: blur(0); }
    82% { transform: translate3d(-50%, 0, 0) scaleX(.985); }
    100% { opacity: 1; transform: translate3d(-50%, 0, 0) scaleX(1); clip-path: inset(0 0 0 0 round 999px); filter: blur(0); }
}
.smartbar-panel {
    position: absolute;
    top: 28px;
    left: 50%;
    width: min(max-content, calc(100vw - 36px));
    max-width: min(760px, calc(100vw - 36px));
    padding: 10px 12px 12px;
    border: 1px solid rgba(139,148,158,.24);
    border-radius: 30px;
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,255,255,.30), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface) 70%, transparent));
    box-shadow: 0 24px 72px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08) inset, inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(30px) saturate(1.75);
    -webkit-backdrop-filter: blur(30px) saturate(1.75);
    opacity: 0;
    pointer-events: none;
    filter: blur(14px) saturate(.9);
    transform: translate3d(-50%, -18px, 0) scale3d(.46, .20, 1);
    transform-origin: top center;
    transition:
        transform .74s cubic-bezier(.16,1,.3,1),
        opacity .34s ease,
        filter .48s ease,
        border-radius .74s cubic-bezier(.16,1,.3,1);
}
.terminal-smartbar.open .smartbar-panel {
    transform: translate3d(-50%, 0, 0) scale3d(1, 1, 1);
    opacity: 1;
    pointer-events: auto;
    filter: blur(0) saturate(1);
}
.terminal-smartbar.closing .smartbar-panel {
    pointer-events: none;
    animation: smartbarPanelMacClose .72s cubic-bezier(.16,1,.3,1) both;
}
@keyframes smartbarPanelMacClose {
    0% { border-radius: 30px; transform: translate3d(-50%, 0, 0) scale3d(1, 1, 1); opacity: 1; filter: blur(0) saturate(1); }
    100% { border-radius: 30px; transform: translate3d(-50%, -18px, 0) scale3d(.46, .20, 1); opacity: 0; filter: blur(14px) saturate(.9); }
}
.smartbar-panel .smartbar-dock {
    opacity: 0;
    transform: translateY(10px) scale(.94);
    transition: opacity .24s ease, transform .48s cubic-bezier(.18,1.18,.2,1);
}
.terminal-smartbar.open .smartbar-panel .smartbar-dock {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: .10s;
}
.smartbar-dock {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(8px, 1vw, 14px);
    min-width: 0;
    max-width: 100%;
    min-height: 108px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 18px 20px 8px;
    perspective: 900px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 20px;
}
.smartbar-dock::-webkit-scrollbar { display: none; }
.smartbar-session,
.smartbar-add {
    --dock-scale: 1;
    --dock-lift: 0px;
    --dock-rotate: 0deg;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 6px;
    width: 82px;
    height: 88px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    flex: 0 0 auto;
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.72) rotateX(10deg);
    transform-origin: 50% 100%;
    transition: transform .54s cubic-bezier(.16,1,.3,1), opacity .32s ease, filter .38s ease;
    will-change: transform, opacity, filter;
}
.smartbar-session.dragging { opacity: .35; }
.smartbar-drag-ghost {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1.08);
    filter: drop-shadow(0 22px 38px rgba(0,0,0,.32));
}
.smartbar-session-icon,
.smartbar-add::before {
    content: '+';
    position: relative;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(139,148,158,.24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.24), transparent 36%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--bg) 82%, transparent));
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .28s ease, box-shadow .42s ease, transform .68s cubic-bezier(.16,1,.3,1), border-radius .42s ease;
}
.terminal-smartbar.open .smartbar-session,
.terminal-smartbar.open .smartbar-add {
    opacity: 1;
    transform: translate3d(var(--dock-shift, 0px), var(--dock-lift), 0) scale(var(--dock-scale)) rotateZ(var(--dock-rotate));
    animation: dockItemBloom .82s cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc(.16s + (var(--dock-index, 0) * 56ms));
}
.terminal-smartbar.open .smartbar-session:not(.dragging),
.terminal-smartbar.open .smartbar-add { filter: blur(var(--dock-blur, 0px)); }
.smartbar-drag-ghost .smartbar-session-icon { animation: dockGhostFloat .62s cubic-bezier(.16,1,.3,1) infinite alternate; }
@keyframes dockGhostFloat { from { transform: translateY(-1px) scale(1.02); } to { transform: translateY(-7px) scale(1.08); } }
.terminal-window.dock-launching { animation: none; }
.smartbar-session:hover,
.smartbar-add:hover { --dock-scale: 1.12; --dock-lift: -7px; --dock-rotate: -.5deg; filter: saturate(1.05) brightness(1.025); }
.smartbar-session:hover + .smartbar-session,
.smartbar-session:hover + .smartbar-add,
.smartbar-add:hover + .smartbar-session { --dock-scale: 1.045; --dock-lift: -3px; }
.smartbar-session:hover .smartbar-session-icon,
.smartbar-add:hover::before { border-color: rgba(88,166,255,.58); border-radius: 21px; transform: translateY(-1px); box-shadow: 0 22px 48px rgba(0,0,0,.30), 0 0 0 5px rgba(88,166,255,.09); }
.smartbar-session.active .smartbar-session-icon { border-color: var(--accent); box-shadow: 0 16px 38px rgba(88,166,255,.22), 0 0 0 3px rgba(88,166,255,.14); animation: dockActivePulse 2.2s ease-in-out infinite; }
.smartbar-session.active::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hover); transform: translateX(-50%); box-shadow: 0 0 12px rgba(88,166,255,.72); }
.smartbar-session.minimized { opacity: .74; }
@keyframes dockItemBloom { 0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.78) rotateX(8deg); filter: blur(8px); } 64% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.025) rotateX(0); filter: blur(0); } 86% { transform: translate3d(0, 1px, 0) scale(.995); } 100% { opacity: 1; transform: translate3d(var(--dock-shift, 0px), var(--dock-lift), 0) scale(var(--dock-scale)) rotateZ(var(--dock-rotate)); filter: blur(0); } }
@keyframes dockActivePulse { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.025); } }
.smartbar-session-icon .proto-dot { position: absolute; right: 7px; bottom: 7px; width: 10px; height: 10px; }
.smartbar-session-icon b { font-size: 20px; letter-spacing: .02em; font-weight: 900; }
.smartbar-session strong { max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.15; font-weight: 700; }
.smartbar-session em { display: none; }
.smartbar-add { font-size: 0; font-weight: 600; color: var(--accent-hover); }
.smartbar-add::before { font-size: 30px; font-weight: 500; color: var(--accent-hover); }
.smartbar-empty { color: var(--text-secondary); font-size: 12px; padding: 0 8px; align-self: center; }
.smartbar-picker {
    position: fixed;
    left: var(--smartbar-picker-left, 18px);
    top: var(--smartbar-picker-top, 120px);
    width: min(360px, calc(100vw - 28px));
    min-height: 260px;
    max-height: min(520px, calc(100dvh - var(--smartbar-picker-top, 120px) - 18px));
    pointer-events: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(139,148,158,.30);
    border-radius: 22px;
    background:
        radial-gradient(circle at var(--smartbar-picker-origin-x, 50%) 0%, rgba(255,255,255,.24), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface) 72%, transparent));
    box-shadow: 0 24px 68px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(30px) saturate(1.7);
    -webkit-backdrop-filter: blur(30px) saturate(1.7);
    transform-origin: var(--smartbar-picker-origin-x, 50%) 0%;
    animation: smartbarPickerFloat .46s cubic-bezier(.16,1,.3,1) both;
}
.smartbar-picker::before {
    content: '';
    position: absolute;
    top: -7px;
    left: var(--smartbar-picker-arrow-left, 50%);
    width: 14px;
    height: 14px;
    border-left: 1px solid rgba(139,148,158,.30);
    border-top: 1px solid rgba(139,148,158,.30);
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}
@keyframes smartbarPickerFloat {
    0% { opacity: 0; transform: translate3d(0, -10px, 0) scale3d(.92, .86, 1); filter: blur(10px) saturate(.88); }
    58% { opacity: 1; transform: translate3d(0, 2px, 0) scale3d(1.018, 1.012, 1); filter: blur(0) saturate(1.05); }
    82% { transform: translate3d(0, -1px, 0) scale3d(.996, .998, 1); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); filter: blur(0) saturate(1); }
}
.smartbar-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(139,148,158,.20); }
.smartbar-picker-head strong { font-size: 13px; }
.smartbar-picker-head button { width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(139,148,158,.14); color: var(--text); cursor: pointer; }
.smartbar-picker-list { display: grid; align-content: start; gap: 6px; padding: 8px; overflow: auto; min-height: 0; }
.smartbar-picker-list button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    min-height: 48px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.smartbar-picker-list button:hover { background: rgba(88,166,255,.14); border-color: rgba(88,166,255,.24); }
.smartbar-picker-list button em { grid-column: 2; color: var(--text-secondary); font-size: 11px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proto-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--success); box-shadow: 0 0 12px color-mix(in srgb, var(--success) 65%, transparent); }
.proto-dot.rdp { background: #58a6ff; box-shadow: 0 0 12px rgba(88,166,255,.7); }
.proto-dot.vnc { background: #f0883e; box-shadow: 0 0 12px rgba(240,136,62,.7); }

.terminal-workspace {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #d1d5db;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    transition: border-radius .64s cubic-bezier(.16,1,.3,1), box-shadow .64s cubic-bezier(.16,1,.3,1), transform .64s cubic-bezier(.16,1,.3,1);
}
.terminal-workspace-grid {
    --workspace-split-x: 66.666%;
    --workspace-split-y: 50%;
    display: grid;
    gap: 12px;
    padding: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(88,166,255,.13), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(63,185,80,.10), transparent 28%),
        #d1d5db;
    contain: layout paint;
    transition:
        --workspace-split-x .42s cubic-bezier(.16,1,.3,1),
        --workspace-split-y .42s cubic-bezier(.16,1,.3,1),
        grid-template-columns .42s cubic-bezier(.16,1,.3,1),
        grid-template-rows .42s cubic-bezier(.16,1,.3,1);
}
.terminal-workspace-grid.splitting {
    transition: none;
}
.terminal-workspace-grid.layout-0 { display: grid; place-items: center; }
.terminal-workspace-grid.layout-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.terminal-workspace-grid.layout-2 { grid-template-columns: var(--workspace-split-x) minmax(0, 1fr); grid-template-rows: 1fr; }
.terminal-workspace-grid.layout-2 .slot-1 { grid-column: 1; grid-row: 1; }
.terminal-workspace-grid.layout-2 .slot-2 { grid-column: 2; grid-row: 1; }
.terminal-workspace-grid.layout-3 { grid-template-columns: var(--workspace-split-x) minmax(0, 1fr); grid-template-rows: var(--workspace-split-y) minmax(0, 1fr); }
.terminal-workspace-grid.layout-3 .slot-1 { grid-row: 1 / 3; }
.terminal-workspace-grid.layout-3 .slot-2 { grid-column: 2; grid-row: 1; }
.terminal-workspace-grid.layout-3 .slot-3 { grid-column: 2; grid-row: 2; }
.terminal-window {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(139,148,158,.28);
    border-radius: 0;
    background: color-mix(in srgb, var(--surface) 72%, #05070a);
    box-shadow: 0 18px 52px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.03);
    transform: translate3d(0,0,0) scale(1);
    opacity: 1;
    animation: terminalWindowIn .46s cubic-bezier(.16,1,.3,1);
    transition:
        transform .52s cubic-bezier(.16,1,.3,1),
        opacity .28s ease,
        filter .32s ease,
        border-color .24s ease,
        box-shadow .34s ease;
}
@keyframes terminalWindowIn {
    from { opacity: 0; transform: translateY(18px) scale(.965); filter: blur(10px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.terminal-window.active { border-color: rgba(88,166,255,.58); box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 0 3px rgba(88,166,255,.08); z-index: 2; }
.terminal-window.background { opacity: 1; filter: none; }
.terminal-window.background:hover { opacity: 1; filter: none; }
.terminal-window.closing { opacity: 0; transform: scale(.82) translateY(-12px); filter: blur(12px); pointer-events: none; }
.terminal-window.minimizing { opacity: 0; transform: scale(.72) translateY(-34px); filter: blur(14px) saturate(.72); pointer-events: none; }
.terminal-window.dock-drop-target {
    border-color: rgba(88,166,255,.86);
    box-shadow: 0 24px 72px rgba(88,166,255,.22), 0 0 0 4px rgba(88,166,255,.16);
    transform: translateY(-2px) scale(.992);
    filter: saturate(1.08) brightness(1.03);
}
.terminal-window.dock-swapping {
    animation: terminalDockSwapIn .54s cubic-bezier(.16,1,.3,1) both;
}
@keyframes terminalDockSwapIn {
    0% { opacity: 0; transform: translate3d(0, 28px, 0) scale(.90); filter: blur(16px) saturate(.82); }
    58% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.018); filter: blur(0) saturate(1.06); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0) saturate(1); }
}
.terminal-window.minimized-keepalive {
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
    width: var(--terminal-keepalive-width, 960px) !important;
    height: var(--terminal-keepalive-height, 600px) !important;
    min-width: var(--terminal-keepalive-width, 960px) !important;
    min-height: var(--terminal-keepalive-height, 600px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    grid-column: auto !important;
    grid-row: auto !important;
}
.terminal-window.minimized-keepalive .terminal-window-titlebar {
    display: none !important;
}
.terminal-window.minimized-keepalive .terminal-window-body,
.terminal-window.minimized-keepalive .terminal-frame {
    width: var(--terminal-keepalive-width, 960px) !important;
    height: var(--terminal-keepalive-height, 600px) !important;
    min-height: var(--terminal-keepalive-height, 600px) !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}
.terminal-window.dragging {
    z-index: 8;
    transform: translate3d(var(--drag-x, 0), var(--drag-y, 0), 0) scale(.985);
    opacity: .86;
    box-shadow: 0 34px 100px rgba(0,0,0,.5), 0 0 0 3px rgba(88,166,255,.14);
    transition: none;
    cursor: grabbing;
}
.terminal-window.dragging .terminal-window-body { filter: blur(8px) saturate(.8); opacity: .46; }
.terminal-window-dragging .terminal-window:not(.dragging) { filter: none; opacity: 1; }
.terminal-window-dragging .terminal-frame,
.terminal-workspace-splitting .terminal-frame { pointer-events: none; }
.terminal-workspace-splitting .terminal-window-body {
    filter: blur(14px) saturate(.62) brightness(.82);
    opacity: .52;
}
.terminal-window-titlebar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 4px 10px;
    border-bottom: 1px solid rgba(139,148,158,.18);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    user-select: none;
    cursor: default;
    overflow: visible;
}
.terminal-window.dragging .terminal-window-titlebar { cursor: default; }
.terminal-grip {
    --island-x: -50%;
    --island-y: -50%;
    --island-w: 42px;
    --island-h: 22px;
    --island-radius: 999px;
    --island-fluid-scale-x: 1;
    --island-fluid-scale-y: 1;
    --island-fluid-blur: 0px;
    --island-dot-spread: 10px;
    --island-dot-scale: 1;
    --island-dot-opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--island-w);
    height: var(--island-h);
    transform:
        translate3d(var(--island-x), var(--island-y), 0)
        scale3d(var(--island-fluid-scale-x), var(--island-fluid-scale-y), 1);
    transform-origin: 50% 50%;
    border: 1px solid rgba(139,148,158,.20);
    border-radius: var(--island-radius);
    background:
        radial-gradient(circle at 50% 12%, rgba(255,255,255,.16), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.015)),
        color-mix(in srgb, var(--surface) 72%, rgba(0,0,0,.34));
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 14;
    touch-action: none;
    overflow: hidden;
    isolation: isolate;
    backdrop-filter: blur(calc(18px + var(--island-fluid-blur))) saturate(1.22);
    -webkit-backdrop-filter: blur(calc(18px + var(--island-fluid-blur))) saturate(1.22);
    box-shadow:
        0 3px 10px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
    clip-path: inset(0 round var(--island-radius));
    transition:
        border-color .24s ease,
        background .24s ease,
        color .18s ease,
        box-shadow .36s ease,
        opacity .12s ease,
        backdrop-filter .24s ease,
        -webkit-backdrop-filter .24s ease;
    will-change: width, height, transform, clip-path, border-radius, box-shadow, background, filter;
    contain: paint;
}
.terminal-grip::before {
    content: '';
    position: absolute;
    inset: -14px;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
    opacity: .68;
    filter: blur(8px);
    transform: scale3d(.72, .68, 1);
    pointer-events: none;
}
.terminal-grip::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -2;
    border-radius: inherit;
    background: inherit;
    opacity: .84;
    filter: blur(var(--island-fluid-blur));
    transform: scale3d(1.02, .92, 1);
    pointer-events: none;
}
.terminal-grip span,
.terminal-grip span::before,
.terminal-grip span::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    display: block;
    box-shadow: 0 0 9px rgba(255,255,255,.08);
    transition:
        transform .28s cubic-bezier(.34,1.56,.64,1),
        opacity .18s ease,
        filter .22s ease,
        background-color .18s ease;
    will-change: transform, opacity, filter;
}
.terminal-grip span {
    position: relative;
    transform-origin: center center;
    transform: scale(var(--island-dot-scale));
    opacity: var(--island-dot-opacity);
    animation: terminalIslandDotBreath 2.2s cubic-bezier(.22,1,.36,1) infinite;
}
.terminal-grip span::before,
.terminal-grip span::after {
    position: absolute;
    top: 0;
    transform-origin: center center;
}
.terminal-grip span::before { left: calc(-1 * var(--island-dot-spread)); }
.terminal-grip span::after { left: var(--island-dot-spread); }
.terminal-grip:hover {
    color: var(--text);
    border-color: rgba(88,166,255,.36);
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
        color-mix(in srgb, var(--surface) 78%, rgba(88,166,255,.10));
    box-shadow:
        0 6px 16px rgba(0,0,0,.20),
        0 0 0 3px rgba(88,166,255,.07);
}
.terminal-grip.island-pressing {
    animation: terminalIslandTapBounce .20s cubic-bezier(0.32, 0.72, 0, 1) both;
    transition:
        background .14s ease,
        box-shadow .14s ease;
}
.terminal-window-titlebar.menu-open .terminal-grip.island-pressing {
    --island-fluid-scale-x: .98;
    --island-fluid-scale-y: .92;
}
.terminal-grip:hover span::before { transform: translateX(1.5px); }
.terminal-grip:hover span::after { transform: translateX(-1.5px); }
.terminal-window-titlebar.menu-open .terminal-grip {
    --island-w: 42px;
    --island-h: 22px;
    --island-fluid-scale-x: 1;
    --island-fluid-scale-y: 1;
    --island-dot-spread: 10px;
    --island-dot-scale: 1;
    --island-dot-opacity: 1;
    --island-fluid-blur: 0px;
    color: var(--text);
    pointer-events: none;
    animation: terminalIslandSourceMelt .24s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.terminal-window-titlebar.menu-open .terminal-grip span {
    opacity: 1;
    transform: none;
    transition: opacity .08s ease;
}
.terminal-window-titlebar.menu-open .terminal-grip span::before,
.terminal-window-titlebar.menu-open .terminal-grip span::after {
    filter: blur(6px);
}
.terminal-window.dragging .terminal-grip { cursor: grabbing; }
.terminal-window-titlebar strong { font-size: 11px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-window-titlebar em { display: none; }
.terminal-window-more {
    margin-left: auto;
    width: 26px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: transform .26s cubic-bezier(.18,1.2,.2,1), background .18s ease, color .18s ease;
}
.terminal-window-more:hover { color: var(--text); background: rgba(88,166,255,.14); transform: scale(1.08); }
.terminal-window-menu {
    position: absolute;
    top: calc(50% + 16px);
    left: var(--terminal-window-menu-left, calc(50% - 92px));
    right: auto;
    z-index: 16;
    width: min(var(--terminal-island-menu-width, 260px), calc(100% - 16px));
    height: var(--terminal-island-menu-height, auto);
    max-height: none;
    display: grid;
    grid-auto-rows: minmax(38px, auto);
    gap: 7px;
    padding: 12px 10px 14px;
    border: 0 solid transparent;
    border-radius: 22px;
    background: color-mix(in srgb, var(--surface) 72%, rgba(255,255,255,.18));
    box-shadow: none;
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    filter: none;
    clip-path: none;
    transition:
        top .52s cubic-bezier(0.32, 0.72, 0, 1),
        left .52s cubic-bezier(0.32, 0.72, 0, 1),
        width .52s cubic-bezier(0.32, 0.72, 0, 1),
        height .52s cubic-bezier(0.32, 0.72, 0, 1),
        border-radius .52s cubic-bezier(0.32, 0.72, 0, 1),
        opacity .12s ease;
    will-change: top, left, width, height, border-radius, opacity;
    contain: paint;
}
.terminal-window-menu::before {
    content: none;
}
.terminal-window-menu::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    box-shadow:
        -10px 0 0 color-mix(in srgb, var(--text-secondary) 72%, transparent),
        10px 0 0 color-mix(in srgb, var(--text-secondary) 72%, transparent),
        0 0 9px rgba(255,255,255,.08);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    filter: blur(0);
    pointer-events: none;
}
.terminal-window-titlebar.menu-open.menu-animating .terminal-window-menu::after {
    animation: terminalIslandSourceDotsToPanel .18s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.terminal-window-titlebar.menu-closing.menu-animating .terminal-window-menu::after {
    animation: terminalIslandSourceDotsReturn .24s cubic-bezier(0.4, 0, 0.6, 1) both;
}
.terminal-window-titlebar.menu-open:not(.menu-animating) .terminal-window-menu::after,
.terminal-window-titlebar.menu-closing:not(.menu-animating) .terminal-window-menu::after {
    opacity: 0;
    animation: none;
}
:root[data-theme="light"] .terminal-window-menu {
    border-color: transparent;
    background: rgba(255,255,255,.42);
    color: #1f2328;
    box-shadow: none;
    backdrop-filter: blur(30px) saturate(1.7);
    -webkit-backdrop-filter: blur(30px) saturate(1.7);
}
:root[data-theme="light"] .terminal-window-menu::before {
    content: none;
}
.terminal-window-titlebar.menu-open .terminal-window-menu {
    opacity: 1;
    pointer-events: auto;
    border-radius: var(--terminal-island-radius, 22px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.46)),
        rgba(245,248,252,.62);
    clip-path: none;
    box-shadow: 0 18px 42px rgba(31,35,40,.075);
}
:root[data-theme="light"] .terminal-window-titlebar.menu-open .terminal-window-menu {
    background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.52)),
        rgba(247,249,252,.64);
}
:root[data-theme="dark"] .terminal-window-titlebar.menu-open .terminal-window-menu {
    background:
        linear-gradient(180deg, rgba(42,44,48,.72), rgba(24,26,30,.58)),
        rgba(24,26,30,.60);
    box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.terminal-window-titlebar.menu-closing .terminal-window-menu {
    opacity: 1;
    pointer-events: none;
    border-radius: var(--terminal-island-radius, var(--terminal-island-collapsed-radius, 11px));
    background: color-mix(in srgb, var(--surface) 72%, rgba(255,255,255,.18));
    clip-path: none;
    box-shadow: none;
    transition:
        top .42s cubic-bezier(0.4, 0, 0.6, 1),
        left .42s cubic-bezier(0.4, 0, 0.6, 1),
        width .42s cubic-bezier(0.4, 0, 0.6, 1),
        height .42s cubic-bezier(0.4, 0, 0.6, 1),
        border-radius .42s cubic-bezier(0.4, 0, 0.6, 1),
        background .16s ease-in,
        opacity .01s linear .42s;
}
:root[data-theme="light"] .terminal-window-titlebar.menu-closing .terminal-window-menu {
    background: rgba(255,255,255,.42);
}
:root[data-theme="dark"] .terminal-window-titlebar.menu-closing .terminal-window-menu {
    background: color-mix(in srgb, var(--surface) 72%, rgba(0,0,0,.34));
}
.terminal-window-titlebar.menu-closing .terminal-window-menu button {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(.94);
    filter: blur(3px);
    transition-delay: 0ms;
}
.terminal-window-titlebar.menu-closing .terminal-grip {
    opacity: 1;
    pointer-events: auto;
    animation: terminalIslandDotsReturn .30s cubic-bezier(.34,1.56,.64,1) .12s both;
}
.terminal-window-titlebar.menu-closing .terminal-grip span {
    opacity: 1;
    animation: terminalIslandDotBreath 2.2s cubic-bezier(.22,1,.36,1) infinite;
}
.terminal-window-menu button {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.42);
    color: rgba(31,35,40,.86);
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 38px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translate3d(0, 4px, 0) scale(.96);
    filter: blur(3px);
    transition: opacity .12s ease .42s, transform .18s cubic-bezier(.22,1,.36,1) .42s, filter .12s ease .42s;
}
:root[data-theme="dark"] .terminal-window-menu button {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
}
:root[data-theme="light"] .terminal-window-menu button {
    color: rgba(31,35,40,.84);
    background: rgba(255,255,255,.42);
}
.terminal-window-titlebar.menu-open .terminal-window-menu button {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    transition:
        opacity .18s ease,
        transform .30s cubic-bezier(.22,1,.36,1),
        filter .18s ease,
        background .16s ease,
        color .16s ease;
    transition-delay: calc(.08s + (var(--item-index, 0) * 20ms));
}
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(1) { --item-index: 0; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(2) { --item-index: 1; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(3) { --item-index: 2; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(4) { --item-index: 3; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(5) { --item-index: 4; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(6) { --item-index: 5; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(7) { --item-index: 6; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(8) { --item-index: 7; }
.terminal-window-titlebar.menu-open .terminal-window-menu button:nth-child(9) { --item-index: 8; }
.terminal-window-menu button:hover { background: rgba(255,255,255,.12); transform: translate3d(0, -1px, 0) scale(1.015); }
:root[data-theme="light"] .terminal-window-menu button:hover { background: rgba(255,255,255,.66); }
.terminal-window-titlebar.menu-open ~ .terminal-window-body .terminal-frame,
.terminal-window-titlebar.menu-open ~ .terminal-window-body .terminal-placeholder {
    pointer-events: none;
}
@keyframes terminalIslandDotBreath {
    0%, 100% { transform: scale(var(--island-dot-scale)); filter: blur(0); }
    50% { transform: scale(calc(var(--island-dot-scale) * 1.08)); filter: blur(.15px); }
}
@keyframes terminalIslandTapBounce {
    0% {
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-dot-spread: 10px;
        --island-dot-scale: 1;
        --island-fluid-blur: 0px;
        transform: translate3d(var(--island-x), var(--island-y), 0) scale3d(1, 1, 1);
    }
    38% {
        --island-fluid-scale-x: .92;
        --island-fluid-scale-y: .86;
        --island-dot-spread: 8px;
        --island-dot-scale: .88;
        --island-fluid-blur: .7px;
        transform: translate3d(var(--island-x), var(--island-y), 0) scale3d(.94, .94, 1);
    }
    72% {
        --island-fluid-scale-x: 1.035;
        --island-fluid-scale-y: 1.02;
        --island-dot-spread: 10.5px;
        --island-dot-scale: 1.04;
        --island-fluid-blur: 0px;
        transform: translate3d(var(--island-x), var(--island-y), 0) scale3d(1.025, 1.025, 1);
    }
    100% {
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-dot-spread: 10px;
        --island-dot-scale: 1;
        --island-fluid-blur: 0px;
        transform: translate3d(var(--island-x), var(--island-y), 0) scale3d(1, 1, 1);
    }
}
@keyframes terminalIslandSourceDotsToPanel {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
    55% { opacity: .46; transform: translate(-50%, -50%) scale(.72); filter: blur(1.2px); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.48); filter: blur(4px); }
}
@keyframes terminalIslandSourceDotsReturn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.48); filter: blur(4px); }
    45% { opacity: .42; transform: translate(-50%, -50%) scale(.72); filter: blur(1.2px); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}
@keyframes terminalIslandSourceMelt {
    0% {
        opacity: 1;
        --island-w: 42px;
        --island-h: 22px;
        --island-dot-spread: 10px;
        --island-dot-scale: 1;
        --island-dot-opacity: 1;
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-fluid-blur: 0px;
    }
    100% {
        opacity: 0;
        --island-w: 42px;
        --island-h: 22px;
        --island-dot-spread: 5px;
        --island-dot-scale: .84;
        --island-dot-opacity: .18;
        --island-fluid-scale-x: .965;
        --island-fluid-scale-y: .92;
        --island-fluid-blur: .8px;
    }
}
@keyframes terminalIslandDynamicMorph {
    0% {
        --island-w: 42px;
        --island-h: 22px;
        --island-dot-spread: 10px;
        --island-dot-scale: 1;
        --island-dot-opacity: 1;
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-fluid-blur: 0px;
        border-radius: 999px;
        clip-path: inset(0 round 999px);
    }
    28% {
        --island-w: 40px;
        --island-h: 21px;
        --island-dot-spread: 2px;
        --island-dot-scale: .62;
        --island-dot-opacity: .76;
        --island-fluid-scale-x: .88;
        --island-fluid-scale-y: .86;
        --island-fluid-blur: 1.6px;
        border-radius: 999px;
        clip-path: inset(0 2px round 999px);
    }
    48% {
        --island-w: 74px;
        --island-h: 25px;
        --island-dot-spread: 0px;
        --island-dot-scale: .34;
        --island-dot-opacity: .34;
        --island-fluid-scale-x: 1.05;
        --island-fluid-scale-y: .82;
        --island-fluid-blur: 4px;
        border-radius: 999px;
        clip-path: inset(0 round 999px);
    }
    72% {
        --island-w: 222px;
        --island-h: 35px;
        --island-dot-spread: 0px;
        --island-dot-scale: .22;
        --island-dot-opacity: .08;
        --island-fluid-scale-x: 1.035;
        --island-fluid-scale-y: 1.06;
        --island-fluid-blur: 2px;
        border-radius: 999px;
        clip-path: inset(0 round 999px);
    }
    86% {
        --island-w: 206px;
        --island-h: 33px;
        --island-fluid-scale-x: .985;
        --island-fluid-scale-y: .97;
        --island-fluid-blur: .8px;
    }
    100% {
        --island-w: 214px;
        --island-h: 34px;
        --island-dot-spread: 0px;
        --island-dot-scale: .18;
        --island-dot-opacity: .02;
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-fluid-blur: 0px;
        border-radius: 999px;
        clip-path: inset(0 round 999px);
    }
}
@keyframes terminalIslandDotMelt {
    0% { opacity: 1; transform: scale(1); filter: blur(0); }
    28% { opacity: .76; transform: scale(.62); filter: blur(.6px); }
    48% { opacity: .34; transform: scale(.34); filter: blur(3px); }
    100% { opacity: .02; transform: scale(.18); filter: blur(7px); }
}
@keyframes terminalIslandFluidOpen {
    0% {
        opacity: .68;
        border-radius: 999px;
        clip-path: inset(0 44% 86% 44% round 999px);
        transform:
            translate3d(var(--island-start-dx, 0px), 0, 0)
            scaleX(max(var(--island-start-scale-x, .34), .28))
            scaleY(max(var(--island-start-scale-y, .18), .14));
        filter: blur(3px) saturate(1);
    }
    12% {
        opacity: .74;
        border-radius: 999px;
        clip-path: inset(0 40% 80% 40% round 999px);
        transform:
            translate3d(calc(var(--island-start-dx, 0px) * .86), 0, 0)
            scaleX(.42)
            scaleY(.24);
        filter: blur(4px) saturate(1);
    }
    24% {
        opacity: .90;
        border-radius: 999px;
        clip-path: inset(0 29% 68% 29% round 999px);
        transform:
            translate3d(calc(var(--island-start-dx, 0px) * .68), 0, 0)
            scaleX(.66)
            scaleY(.38);
        filter: blur(6px) saturate(1.02);
    }
    44% {
        opacity: 1;
        border-radius: 28px;
        clip-path: inset(0 2% 10% 2% round 28px);
        transform:
            translate3d(calc(var(--island-start-dx, 0px) * .32), 0, 0)
            scaleX(1.025)
            scaleY(.92);
        filter: blur(3px) saturate(1.14);
    }
    68% {
        opacity: 1;
        border-radius: 21px;
        clip-path: inset(0 round 21px);
        transform: translate3d(0, 1px, 0) scaleX(.995) scaleY(1.025);
        filter: blur(0) saturate(1.10);
    }
    100% {
        opacity: 1;
        border-radius: 22px;
        clip-path: inset(0 round 22px);
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
}
@keyframes terminalIslandFluidClose {
    0% {
        opacity: 1;
        border-radius: 22px;
        clip-path: inset(0 round 22px);
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
    46% {
        opacity: .86;
        border-radius: 999px;
        clip-path: inset(0 18% 54% 18% round 999px);
        transform: translate3d(calc(var(--island-start-dx, 0px) * .18), 0, 0) scaleX(.78) scaleY(.34);
        filter: blur(4px) saturate(1.02);
    }
    100% {
        opacity: 0;
        border-radius: 999px;
        clip-path: inset(0 44% 86% 44% round 999px);
        transform:
            translate3d(var(--island-start-dx, 0px), 0, 0)
            scaleX(max(var(--island-start-scale-x, .34), .28))
            scaleY(max(var(--island-start-scale-y, .18), .14));
        filter: blur(4px) saturate(1);
    }
}
@keyframes terminalIslandDotsReturn {
    0% {
        --island-dot-spread: 5px;
        --island-dot-scale: .84;
        --island-dot-opacity: .18;
        --island-fluid-scale-x: .965;
        --island-fluid-scale-y: .92;
        --island-fluid-blur: .8px;
        opacity: 0;
    }
    100% {
        --island-dot-spread: 10px;
        --island-dot-scale: 1;
        --island-dot-opacity: 1;
        --island-fluid-scale-x: 1;
        --island-fluid-scale-y: 1;
        --island-fluid-blur: 0px;
        opacity: 1;
    }
}
@keyframes terminalIslandLiquidGlow {
    0% { opacity: .72; transform: scale3d(.24, .70, 1); filter: blur(18px); }
    45% { opacity: .92; transform: scale3d(1.10, .86, 1); filter: blur(13px); }
    72% { opacity: .50; transform: scale3d(1.02, 1.06, 1); filter: blur(12px); }
    100% { opacity: 0; transform: scale3d(1, 1, 1); filter: blur(16px); }
}
@keyframes terminalIslandBreath {
    0%, 100% {
        transform: translate3d(var(--island-x), calc(var(--island-y) - .2px), 0);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            inset 0 -10px 24px rgba(0,0,0,.10),
            0 14px 34px rgba(0,0,0,.28),
            0 0 0 1px rgba(255,255,255,.07);
    }
    50% {
        transform: translate3d(var(--island-x), calc(var(--island-y) + .3px), 0);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            inset 0 -9px 22px rgba(0,0,0,.09),
            0 15px 36px rgba(0,0,0,.30),
            0 0 0 1px rgba(255,255,255,.08);
    }
}
.terminal-window-body { flex: 1; min-height: 0; overflow: hidden; transition: filter .28s ease, opacity .28s ease; }
.terminal-window-body .terminal-frame,
.terminal-window .terminal-frame.active {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: var(--bg);
}
.terminal-window-body .terminal-placeholder.active { display: grid; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
.workspace-splitter {
    --splitter-bar-bg: color-mix(in srgb, var(--surface) 88%, transparent);
    --splitter-bar-border: rgba(139,148,158,.42);
    --splitter-handle: rgba(107,114,128,.88);
    --splitter-handle-active: rgba(75,85,99,.96);
    position: absolute;
    z-index: 9;
    border-radius: 0;
    background: var(--splitter-bar-bg);
    opacity: 1;
    transition:
        background-color .18s ease,
        border-color .18s ease;
    touch-action: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 -1px 0 rgba(0,0,0,.08);
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
}
.terminal-workspace.splitting .workspace-splitter,
.workspace-splitter.dragging {
    transition: none !important;
}
.workspace-splitter:hover,
.terminal-workspace.splitting .workspace-splitter {
    --splitter-handle: var(--splitter-handle-active);
}
.workspace-splitter::before,
.workspace-splitter::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.workspace-splitter::before {
    z-index: 1;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
}
.workspace-splitter::after {
    z-index: 2;
    border-radius: 999px;
    background: var(--splitter-handle);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
    transition: background .20s ease;
}
.workspace-splitter.vertical {
    top: 0;
    bottom: 0;
    left: calc(var(--workspace-split-x) + 6px);
    width: 12px;
    border-left: 1px solid var(--splitter-bar-border);
    border-right: 1px solid var(--splitter-bar-border);
    transform: translateX(-50%);
    cursor: col-resize;
}
.workspace-splitter.vertical::before { width: 2px; height: 100%; }
.workspace-splitter.vertical::after {
    width: 5px;
    height: min(74px, 24vh);
}
.workspace-splitter.horizontal {
    left: calc(var(--workspace-split-x) + 12px);
    right: 0;
    top: calc(var(--workspace-split-y) + 6px);
    height: 12px;
    border-top: 1px solid var(--splitter-bar-border);
    border-bottom: 1px solid var(--splitter-bar-border);
    transform: translateY(-50%);
    cursor: row-resize;
}
.workspace-splitter.horizontal::before { width: 100%; height: 2px; }
.workspace-splitter.horizontal::after {
    width: min(74px, 24vw);
    height: 5px;
}
.workspace-splitter.arming::after,
.workspace-splitter.dragging::after,
.terminal-workspace.splitting .workspace-splitter::after {
    background: var(--splitter-handle-active);
}
.terminal-workspace.custom-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.terminal-workspace.compact {
    min-height: calc(100dvh - 12px);
    border-radius: var(--radius);
}
.terminal-workspace-grid.compact.layout-1,
.terminal-workspace-grid.compact.layout-2,
.terminal-workspace-grid.compact.layout-3 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.terminal-workspace-grid.compact .terminal-window { grid-column: 1 !important; grid-row: 1 !important; min-height: 0; }
.terminal-workspace-grid.compact.custom-fullscreen .terminal-window,
.terminal-workspace-grid.compact.custom-fullscreen .terminal-window-body,
.terminal-workspace-grid.compact.custom-fullscreen .terminal-frame {
    height: 100%;
    min-height: 0;
}
body.terminal-custom-fullscreen-open {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}
body.terminal-custom-fullscreen-open .main-nav {
    display: none !important;
}
.terminal-workspace-grid.compact .workspace-splitter { display: none; }
.terminal-workspace.fullscreen-transitioning { transform: scale(.992); box-shadow: 0 28px 88px rgba(0,0,0,.36); }
.terminal-frame { display: none; width: 100%; height: 720px; border: 0; background: var(--bg); }
.terminal-frame.active { display: block; }
.terminal-workspace .terminal-placeholder { min-height: 720px; display: none; place-items: center; }
.terminal-workspace .terminal-placeholder.active, .terminal-workspace > .terminal-placeholder:only-child { display: grid; }
.terminal-frame:fullscreen, .terminal-workspace:fullscreen, .terminal-window:fullscreen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}
.terminal-frame:fullscreen,
.terminal-window:fullscreen .terminal-frame {
    display: block;
}
.terminal-window:fullscreen {
    background: var(--bg);
    border: 0;
    box-shadow: none;
}
.terminal-window:fullscreen .terminal-window-titlebar {
    min-height: 30px;
}
.terminal-window:fullscreen .terminal-window-body,
.terminal-window:fullscreen .terminal-frame {
    width: 100%;
    height: 100%;
}
.terminal-workspace:fullscreen .terminal-frame.active { width: 100%; height: 100%; }
.terminal-workspace:fullscreen.keyboard-open {
    height: var(--app-visual-vh) !important;
    min-height: var(--app-visual-vh) !important;
    max-height: var(--app-visual-vh) !important;
    transform: translate3d(0, var(--app-visual-offset-top), 0);
    transition: height 0.42s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.terminal-workspace:fullscreen.keyboard-open .terminal-frame.active {
    height: 100% !important;
    max-height: 100% !important;
}
.terminal-fullscreen-loader {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background:
        radial-gradient(circle at 50% 42%, rgba(88,166,255,.18), transparent 34%),
        color-mix(in srgb, #05070a 82%, transparent);
    color: #e6edf3;
    font-weight: 700;
    letter-spacing: .04em;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.015);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    transition: opacity .44s ease, transform .64s cubic-bezier(.16,1,.3,1);
}
.terminal-workspace.fullscreen-loading .terminal-fullscreen-loader {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.terminal-fullscreen-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(139,148,158,.32);
    border-top-color: var(--accent-hover);
    box-shadow: 0 0 28px rgba(88,166,255,.32);
    animation: spin .82s linear infinite;
}
.terminal-fullscreen-loader span {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(13,17,23,.58);
    border: 1px solid rgba(139,148,158,.24);
    font-size: 13px;
}
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-title-row h2 { margin: 0; }
.empty-state { color: var(--text-secondary); font-size: 14px; padding: 6px; }
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
.settings-menu {
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.settings-tab { text-align: left; border-radius: var(--radius); }
.settings-content { padding: 18px; }
.settings-panel { display: none; }
.settings-panel.active { display: block; animation: fadeIn .24s ease-out; }
.settings-form { display: grid; gap: 10px; max-width: 420px; margin-bottom: 14px; }
.brand-upload-row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; }
.brand-icon-preview { width: 58px; height: 58px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); display: grid; place-items: center; font-size: 30px; overflow: hidden; }
.brand-icon-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.inline-form { max-width: none; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); align-items: end; }
.check-line { color: var(--text-secondary); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.check-line input { width: auto; }
.mini-list { display: grid; gap: 8px; margin: 10px 0 20px; }
.mini-item { display: grid; grid-template-columns: 1fr 1.5fr auto auto; gap: 8px; align-items: center; padding: 10px; border-radius: var(--radius); background: var(--bg); font-size: 13px; }
.mini-item span { color: var(--text-secondary); }
.mini-item button { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); padding: 6px 9px; cursor: pointer; }
.remote-layout { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: 14px; align-items: start; }
.remote-servers, .remote-command, .result-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px; }
.remote-servers { display: grid; gap: 8px; max-height: 420px; overflow: auto; }
.server-check { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; padding: 10px; border-radius: var(--radius); background: var(--bg); cursor: pointer; border: 1px solid transparent; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.server-check:hover { border-color: rgba(88,166,255,.32); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.server-check:has(input:checked) { border-color: rgba(88,166,255,.58); background: rgba(88,166,255,.12); }
.server-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.server-check span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.server-check em { grid-column: 2; color: var(--text-secondary); font-style: normal; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-command { display: grid; gap: 10px; }
.remote-command label { color: var(--text-secondary); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.remote-command textarea { min-height: 180px; resize: vertical; line-height: 1.55; }
.remote-command input, .remote-command textarea { width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-family: var(--font-mono); outline: none; }
.remote-command input:focus, .remote-command textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,.12); }
.remote-command .btn { justify-self: end; width: auto; min-width: 140px; }
.remote-results { display: grid; gap: 12px; margin-top: 14px; }
.result-card h3 { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 16px; margin-bottom: 8px; }
.result-card h3 span { color: var(--text-secondary); font-size: 12px; }
.result-card.ok { border-color: rgba(63,185,80,.35); }
.result-card.fail { border-color: rgba(248,81,73,.38); }
.result-card pre { background: var(--bg); border-radius: var(--radius); padding: 10px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; }
.result-card .stderr, .error-text { color: var(--danger); }
.settings-form .btn { margin-top: 0; }
body.disable-interaction {
    pointer-events: none;
    user-select: none;
}
body.app-body::after {
    content: none;
    display: none;
}
body.connection-home-blur .app-shell {
    transform: scale(.92) translateZ(0);
    filter: blur(12px) brightness(.5);
}
body.connection-transition-opening .app-shell,
body.connection-transition-closing .app-shell {
    transition:
        transform var(--connection-app-duration) var(--connection-ios-spring),
        filter var(--connection-app-duration) ease-out;
    will-change: transform, filter;
}
.connection-transition-layer {
    position: fixed;
    z-index: 100;
    visibility: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 30%),
        radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--success) 6%, transparent), transparent 28%),
        var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--connection-shadow-idle);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: top, left, width, height, border-radius, box-shadow;
    contain: layout paint style;
}
.connection-transition-layer::before,
.connection-transition-layer::after {
    content: none;
    display: none;
}
.connection-transition-source-visual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: inherit;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
    transform: scale(1);
    transition: opacity .15s ease, transform .18s ease;
    pointer-events: none;
}
.connection-transition-layer.source-visual-hidden .connection-transition-source-visual {
    opacity: 0;
    transform: scale(.94);
    transition: opacity .15s ease, transform .18s ease;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 101;
    display: none;
    place-items: center;
    padding: 18px;
    background: transparent;
    opacity: 1;
    pointer-events: none;
}
.modal-backdrop.show {
    display: grid;
}
.modal-backdrop.show.app-visible {
    pointer-events: auto;
}
.modal-backdrop.closing {
    display: grid;
    pointer-events: none;
}
.connection-modal {
    width: min(620px, 100%);
    max-height: min(88vh, 760px);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 18px;
    box-shadow: none;
    opacity: 0;
    transform: none;
    filter: none;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 1, 1);
    will-change: opacity;
}
.modal-backdrop.show.app-visible .connection-modal {
    opacity: 1;
    transition: opacity 0.3s ease-out 0.1s;
}
.modal-backdrop.closing .connection-modal {
    opacity: 0;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 1, 1);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-field button { position: absolute; right: 8px; bottom: 7px; border: 0; background: transparent; cursor: pointer; font-size: 16px; }
.link-btn { margin-top: 8px; border: 0; background: transparent; color: var(--accent-hover); font-weight: 700; cursor: pointer; padding: 4px 0; }
.field-hint { margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.advanced-route-panel {
    margin: 4px 0 16px;
}
.advanced-route-panel h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--text);
}
.advanced-route-divider {
    height: 1px;
    background: var(--border);
    margin-bottom: 16px;
}
.advanced-route-label {
    display: block;
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 800;
}
.route-type-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.route-type-tab {
    min-height: 46px;
    border: 0;
    border-right: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
    font-size: 15px;
    font-family: var(--font-sans);
}
.route-type-tab:last-child { border-right: 0; }
.route-type-tab.active {
    background: color-mix(in srgb, var(--accent) 82%, #1f7fb8);
    color: #fff;
}
.route-type-tab:hover:not(.active) {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.route-proxy-config,
.jump-route-config {
    display: grid;
    gap: 10px;
}
.route-proxy-config select,
.jump-route-row select {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    outline: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.route-proxy-config select:focus,
.jump-route-row select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88,166,255,.12), 0 2px 8px rgba(0,0,0,.10);
}
.jump-route-list {
    display: grid;
    gap: 14px;
}
.jump-route-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 84%, var(--bg));
}
.jump-route-row label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 800;
}
.jump-route-remove {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
}
.jump-route-remove:hover {
    background: rgba(248,81,73,.12);
    color: var(--danger);
}
.add-jump-route-btn {
    width: 100%;
    min-height: 54px;
    border: 1px dashed var(--accent);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent-hover);
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-sans);
}
.add-jump-route-btn:hover {
    background: rgba(88,166,255,.10);
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.modal-actions .btn { width: auto; min-width: 110px; margin-top: 0; }
.connection-test-latency {
    min-height: 20px;
    margin-right: auto;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.connection-test-latency[data-state="pending"] { color: var(--accent-hover); }
.connection-test-latency[data-state="success"] { color: var(--success); }
.connection-test-latency[data-state="error"] { color: var(--danger); }
body.app-body > .toast { position: fixed; top: 72px; right: 18px; z-index: 120; pointer-events: none; }
body.app-body > .toast.show { opacity: 1; transform: translate3d(0,0,0) scale(1); }

@media (max-width: 760px) and (hover: none) and (pointer: coarse) {
    .main-nav { align-items: flex-start; flex-wrap: wrap; padding: 10px; }
    .nav-tabs { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .app-main { width: min(100% - 20px, 1180px); padding-top: 18px; }
    .section-head { align-items: stretch; flex-direction: column; }
    .add-btn { width: 100%; }
    .action-bar { grid-template-columns: 1fr; }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-menu {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .settings-menu .settings-tab {
        white-space: nowrap;
        min-width: max-content;
    }
    .settings-content {
        padding: 14px;
        overflow-wrap: anywhere;
    }
    .jump-route-row {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }
    .jump-route-row label,
    .jump-route-row select {
        grid-column: 1 / -1;
    }
    .settings-form,
    .inline-form {
        max-width: none;
        grid-template-columns: 1fr;
    }
    .mini-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        align-items: stretch;
    }
    .mini-item b,
    .mini-item span {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .mini-item button {
        width: 100%;
        justify-self: stretch;
        min-height: 34px;
    }
    .modal-actions { flex-direction: column-reverse; align-items: stretch; }
    .modal-actions .btn { width: 100%; }
    .connection-test-latency { width: 100%; margin-right: 0; text-align: center; }
    .activity-item { flex-direction: column; }
    .modal-backdrop { align-items: start; place-items: start center; overflow-y: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
    .connection-modal { max-height: none; margin: 10px 0 calc(24px + env(safe-area-inset-bottom)); overflow: visible; border-radius: var(--radius-lg); }
    .terminal-view.active { min-height: calc(100dvh - 2px); }
    .terminal-workspace { min-height: calc(100dvh - 2px); }
    .terminal-frame { height: 100%; min-height: 0; }
    .remote-layout { grid-template-columns: 1fr; gap: 12px; }
    .remote-servers {
        max-height: 260px;
        padding: 10px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .remote-command { padding: 12px; }
    .remote-command textarea { min-height: 150px; }
    .remote-command .btn { justify-self: stretch; width: 100%; min-height: 42px; }
    .result-card h3 { flex-direction: column; gap: 4px; }
    .terminal-smartbar {
        --smartbar-panel-height: 138px;
        padding-inline: 14px;
    }
    .smartbar-panel {
        width: max-content;
        max-width: min(100vw - 28px, 720px);
        padding: 10px 12px 12px;
        border-radius: 28px;
    }
    .terminal-smartbar.open .smartbar-panel {
        clip-path: none;
    }
    .smartbar-dock {
        justify-content: flex-start;
        min-height: 92px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 12px 14px 4px;
        gap: 8px;
        scroll-padding-inline: 14px;
    }
    .smartbar-session,
    .smartbar-add {
        width: 68px;
        height: 78px;
    }
    .smartbar-session-icon,
    .smartbar-add::before {
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }
    .smartbar-session strong {
        max-width: 68px;
        font-size: 10px;
    }
    .smartbar-session:hover,
    .smartbar-add:hover {
        --dock-scale: 1.08;
        --dock-lift: -6px;
    }
}

.theme-btn-login {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
    z-index: 2;
}
.theme-btn-login:hover { background: var(--bg); border-color: var(--text-secondary); }

/* 表单元素 */
.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-mono);
    transition: border-color 0.2s, box-shadow 0.2s;
    user-select: text;
    -webkit-user-select: text;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88,166,255,0.12);
}
.form-group textarea { resize: vertical; min-height: 80px; font-size: 12px; line-height: 1.5; }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }
.form-row .form-group.port-group { flex: 0 0 90px; min-width: 70px; }

/* 按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.01em;
    font-family: var(--font-sans);
}
.btn-primary { background: var(--accent); color: #fff; margin-top: 8px; }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 16px rgba(88,166,255,0.3); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }

/* 错误提示 */
.error-banner {
    background: rgba(248,81,73,0.1);
    border: 1px solid rgba(248,81,73,0.35);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--danger);
    margin-bottom: 14px;
    display: none;
    word-break: break-word;
}
.error-banner.show { display: block; animation: shake 0.4s ease-out; }
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* 认证切换 */
.toggle-section { margin-top: 4px; }
.toggle-link {
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-sans);
    text-decoration: none;
}
.toggle-link:hover { text-decoration: underline; color: var(--accent-hover); }
.key-section { display: none; }
.key-section.show { display: block; }

/* ===== 终端页面 ===== */
.terminal-page {
    position: fixed;
    inset: 0 0 auto 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    height: var(--visual-vh, var(--stable-vh, 100vh));
    max-height: var(--visual-vh, var(--stable-vh, 100vh));
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    transform: translate3d(0, 0, 0);
    transition: background-color 0.24s ease, border-color 0.24s ease;
    will-change: height, transform;
}

html.viewport-updating .terminal-page {
    transition:
        height 0.40s cubic-bezier(0.16, 1, 0.3, 1),
        max-height 0.40s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.40s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.24s ease,
        border-color 0.24s ease;
}

html.keyboard-open .terminal-page {
    transform: translate3d(0, var(--visual-offset-top, 0px), 0);
}

/* 顶栏 */
.terminal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--surface);
    border-bottom: none;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
    font-size: 13px;
    flex-shrink: 0;
    gap: 10px;
    flex-wrap: wrap;
}
.terminal-topbar .status { flex: 0 0 auto; }
.terminal-topbar .status { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.status-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--warning);
    flex-shrink: 0;
    animation: pulse 1.5s infinite;
}
.status-dot.connected { background: var(--success); animation: none; }
.status-dot.disconnected { background: var(--danger); animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.terminal-topbar .info {
    color: var(--text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.topbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.topbar-actions.scroll-active,
.topbar-actions:hover,
.topbar-actions:focus-within { scrollbar-width: thin; }
.topbar-actions::-webkit-scrollbar { height: 0; }
.topbar-actions.scroll-active::-webkit-scrollbar,
.topbar-actions:hover::-webkit-scrollbar,
.topbar-actions:focus-within::-webkit-scrollbar { height: 4px; }
.topbar-actions::-webkit-scrollbar-thumb { background: rgba(139,148,158,0.45); border-radius: 999px; }
.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12px;
    line-height: 1.2;
    min-height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
    white-space: nowrap;
    flex: 0 0 auto;
}
.btn-sm:hover { border-color: var(--text-secondary); }
.btn-sm.danger {
    border-color: rgba(248,81,73,0.4);
    color: var(--danger);
}
.btn-sm.danger:hover { background: rgba(248,81,73,0.1); }
.btn-sm.active {
    border-color: var(--accent);
    background: rgba(88,166,255,0.16);
    color: var(--accent-hover);
    box-shadow: 0 0 0 3px rgba(88,166,255,0.08) inset;
}
.wterm-theme-toggle {
    min-width: 78px;
    color: var(--text-secondary);
    position: relative;
    overflow: hidden;
}
.wterm-theme-toggle.active {
    color: var(--accent-hover);
}
.wterm-theme-toggle::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.wterm-theme-toggle.switching::after {
    animation: themeToggleRipple 0.46s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes themeToggleRipple {
    0% { opacity: 0.72; transform: translate(-50%, -50%) scale(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(12); }
}

.terminal-input-panel {
    order: 1;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
    background: var(--surface);
    padding-bottom: 0;
    transform: none;
    transition: none;
}

/* ===== 辅助工具栏 ===== */
.toolbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 6px 10px;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.toolbar.scroll-active,
.toolbar:hover,
.toolbar:focus-within { scrollbar-width: thin; }
.toolbar::-webkit-scrollbar { height: 0; }
.toolbar.scroll-active::-webkit-scrollbar,
.toolbar:hover::-webkit-scrollbar,
.toolbar:focus-within::-webkit-scrollbar { height: 4px; }
.toolbar::-webkit-scrollbar-thumb { background: rgba(139,148,158,0.45); border-radius: 999px; }
.toolbar-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    margin-bottom: 4px;
}
.tool-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    min-width: max-content;
    flex: 0 0 auto;
    text-align: center;
    font-family: var(--font-sans);
    transition: all 0.1s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    overflow: visible;
    text-overflow: clip;
}
.tool-btn:active {
    transform: scale(0.95);
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.modifier.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.font-size-btn {
    min-width: 34px;
    font-family: var(--font-mono);
    font-weight: 800;
}
.tool-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 2px;
}

/* 命令输入行 */
.cmd-input-row { display: flex; align-items: center; gap: 4px; }
.cmd-input {
    flex: 1;
    min-height: 34px;
    max-height: 112px;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.45;
    font-family: var(--font-mono);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    outline: none;
    resize: vertical;
    overflow-y: auto;
    white-space: pre-wrap;
    transition: border-color 0.2s, height 0.12s ease;
}
.cmd-input:focus { border-color: var(--accent); }
.cmd-send-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
    font-family: var(--font-sans);
}
.cmd-send-btn:hover { background: var(--accent-hover); }

/* ===== 终端容器 ===== */
.terminal-container {
    order: 2;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    background: var(--wterm-bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overscroll-behavior: none;
    contain: layout paint;
    --terminal-scrollbar-size: 12px;
    transition: background-color 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.terminal-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
        var(--wterm-bg);
    opacity: 0;
    transform: scale(1.02);
}
.terminal-container.wterm-theme-animating::after {
    animation: terminalThemeFade 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes terminalThemeFade {
    0% { opacity: 0.34; transform: scale(1.018); }
    100% { opacity: 0; transform: scale(1); }
}
:root[data-theme="light"]:not([data-wterm-theme="default"]) .terminal-container { background: var(--wterm-bg); }
.terminal-container .wterm-wrapper {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
    font-family: var(--font-mono);
    font-size: var(--terminal-font-size);
    padding: 12px;
    scrollbar-width: auto;
    -ms-overflow-style: auto;
    scrollbar-gutter: stable;
    background: var(--wterm-bg);
    color: var(--wterm-fg);
    transition: background-color 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-wterm-theme] .terminal-container .wterm-wrapper,
:root[data-wterm-theme] .terminal-container .wterm-wrapper.wterm {
    background: var(--wterm-bg) !important;
    color: var(--wterm-fg) !important;
}
:root[data-wterm-theme] .terminal-container .wterm-wrapper ::selection {
    background: var(--wterm-selection);
}
.terminal-container.wterm-theme-animating .wterm-wrapper { filter: saturate(1.08); }
:root[data-wterm-theme="light"] .terminal-container .wterm-wrapper,
:root[data-wterm-theme="light"] .terminal-container .wterm-wrapper.wterm {
    background: var(--wterm-bg) !important;
    color: var(--wterm-fg) !important;
}
:root[data-wterm-theme="light"] .terminal-container .wterm-wrapper * {
    color: var(--wterm-fg);
}
:root[data-wterm-theme="light"] .terminal-container .wterm-wrapper ::selection {
    background: var(--wterm-selection);
}
.terminal-container .wterm-wrapper::-webkit-scrollbar {
    width: auto;
    height: auto;
}
.terminal-container .wterm-wrapper.wterm {
    border-radius: 0;
    box-shadow: none;
    padding: 12px;
    outline: none;
    overflow-y: auto;
    overflow-x: hidden;
}
.terminal-container .wterm-wrapper.wterm.has-scrollback {
    overflow-y: auto;
}
.terminal-container .wterm-wrapper .term-grid {
    display: block;
    white-space: pre;
    contain: layout paint style;
    will-change: contents;
    overflow-anchor: none;
    user-select: text;
    -webkit-user-select: text;
}

.terminal-container .wterm-wrapper .term-row,
.terminal-container .wterm-wrapper .term-scrollback-row {
    min-width: 100%;
}
.terminal-scrollbar {
    display: none;
}
.terminal-container.scrollable .terminal-scrollbar,
.terminal-container:hover .terminal-scrollbar,
.terminal-scrollbar.dragging {
    opacity: 1;
}
.terminal-container.scrollable .terminal-scrollbar {
    pointer-events: auto;
}
.terminal-scrollbar-track {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: rgba(139,148,158,0.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.terminal-scrollbar-thumb {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 0;
    min-height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(88,166,255,0.95), rgba(88,166,255,0.52));
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 4px 12px rgba(0,0,0,0.28);
    transform: translateY(var(--terminal-scroll-thumb-top, 0px));
    height: var(--terminal-scroll-thumb-height, 100%);
    cursor: grab;
    touch-action: none;
}
.terminal-scrollbar-thumb:active,
.terminal-scrollbar.dragging .terminal-scrollbar-thumb {
    cursor: grabbing;
    background: linear-gradient(180deg, rgba(121,192,255,1), rgba(88,166,255,0.68));
}
:root[data-theme="light"] .terminal-scrollbar-track {
    background: rgba(101,109,118,0.14);
    box-shadow: inset 0 0 0 1px rgba(31,35,40,0.06);
}
:root[data-theme="light"] .terminal-scrollbar-thumb {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.65) inset, 0 4px 12px rgba(31,35,40,0.18);
}

/* 连接状态覆盖层 */
.terminal-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13,17,23,0.85);
    z-index: 10;
    flex-direction: column;
    gap: 14px;
    transition: opacity 0.3s;
}
:root[data-theme="light"] .terminal-overlay { background: rgba(246,248,250,0.9); }
.terminal-overlay.hidden { opacity: 0; pointer-events: none; }
.terminal-overlay .spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--border); border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.terminal-overlay .msg { font-size: 14px; color: var(--text-secondary); }

/* ===== 文件管理器样式 ===== */
.file-manager,
.docker-panel {
    position: absolute;
    top: 52px; left: 16px;
    width: min(820px, 72vw);
    height: min(620px, 68vh);
    min-width: 460px;
    min-height: 360px;
    background: var(--surface);
    z-index: 20;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: perspective(1200px) scale(0.78) translate3d(0, 42px, 0);
    transform-origin: top center;
    filter: blur(8px);
    box-shadow: 0 28px 90px rgba(0,0,0,0.38);
    transition:
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.28s ease,
        filter 0.32s ease,
        visibility 0.36s;
    will-change: transform, opacity, filter;
}
.docker-panel {
    left: 28px;
    width: min(980px, 80vw);
    height: min(660px, 72vh);
    min-width: 540px;
    min-height: 380px;
    display: none;
}
.file-manager.front,
.docker-panel.front,
.info-modal.front,
.snippet-panel.front,
.shortcut-panel.front { z-index: 47; }
.file-manager.front-switching,
.info-modal.front-switching,
.docker-panel.front-switching,
.snippet-panel.front-switching,
.shortcut-panel.front-switching {
    animation: panelFrontSwitch 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.file-manager.dragging,
.file-manager.resizing,
.info-modal.dragging,
.info-modal.resizing,
.docker-panel.dragging,
.docker-panel.resizing,
.snippet-panel.dragging,
.snippet-panel.resizing,
.shortcut-panel.dragging,
.shortcut-panel.resizing { transition: none; user-select: none; touch-action: none; }
.file-manager.layout-animating,
.info-modal.layout-animating,
.docker-panel.layout-animating,
.snippet-panel.layout-animating,
.shortcut-panel.layout-animating {
    transition:
        left .62s var(--ios-open),
        top .62s var(--ios-open),
        width .62s var(--ios-open),
        height .62s var(--ios-open),
        border-radius .42s ease,
        transform .72s var(--ios-bounce),
        opacity 0.28s ease,
        filter 0.32s ease;
}
.file-manager.open,
.docker-panel.open {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}

@keyframes panelFrontSwitch {
    0% {
        transform: translate3d(0, 2px, 0) scale(0.996);
        filter: brightness(0.96);
        box-shadow: 0 18px 58px rgba(0,0,0,0.28);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
        box-shadow: 0 28px 90px rgba(0,0,0,0.38);
    }
}

.panel-drag-handle {
    position: relative;
    width: 100%;
    height: 28px;
    flex-shrink: 0;
    z-index: 6;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--border) 34%, transparent);
    opacity: 1;
    touch-action: none;
    pointer-events: auto;
}
.panel-traffic-btn {
    --panel-island-w: 58px;
    --panel-island-h: 22px;
    width: var(--panel-island-w);
    height: var(--panel-island-h);
    border: 1px solid rgba(139,148,158,.22);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        color-mix(in srgb, var(--surface) 76%, rgba(0,0,0,.26));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: none;
    transform: translateZ(0);
    transition:
        width .52s cubic-bezier(.16,1,.3,1),
        height .52s cubic-bezier(.16,1,.3,1),
        border-color .22s ease,
        background .22s ease,
        box-shadow .32s ease,
        transform .28s cubic-bezier(.16,1,.3,1),
        backdrop-filter .22s ease,
        -webkit-backdrop-filter .22s ease;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 3px 10px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px) saturate(1.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
    will-change: transform, box-shadow, background;
}
.panel-traffic-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
    pointer-events: none;
}
.panel-traffic-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: inherit;
    pointer-events: none;
}
.panel-traffic-btn:hover {
    border-color: rgba(88,166,255,.38);
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
        color-mix(in srgb, var(--surface) 80%, rgba(88,166,255,.12));
    box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 0 0 3px rgba(88,166,255,.07);
}
.panel-traffic-btn:active,
.panel-traffic-btn.pressing {
    transform: scale(.92);
    transition: transform .10s cubic-bezier(.3,0,.2,1), background .14s ease;
}
.panel-traffic-btn.active-layout.pressing {
    transform: scale(.96);
}
.panel-traffic-btn.active-layout {
    --panel-island-w: 64px;
    --panel-island-h: 22px;
    border-color: rgba(88,166,255,.42);
    background:
        linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02)),
        color-mix(in srgb, var(--surface) 70%, rgba(88,166,255,.18));
    color: var(--text);
    box-shadow:
        0 5px 15px rgba(0,0,0,.22),
        0 0 0 3px rgba(88,166,255,.08),
        inset 0 1px 0 rgba(255,255,255,.10);
}
.panel-traffic-btn.active-layout::before {
    opacity: 1;
}
.panel-traffic-btn.active-layout::after { opacity: 1; }
.panel-traffic-btn span,
.panel-traffic-btn span::before,
.panel-traffic-btn span::after {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-secondary) 74%, transparent);
    box-shadow: none;
    transition:
        transform 0.22s cubic-bezier(0.18, 1.2, 0.2, 1),
        opacity 0.18s ease,
        background-color 0.18s ease;
}
.panel-traffic-btn span { position: relative; }
.panel-traffic-btn span::before,
.panel-traffic-btn span::after { content: ''; position: absolute; top: 0; }
.panel-traffic-btn span::before { left: -10px; }
.panel-traffic-btn span::after { left: 10px; }
.panel-traffic-btn:hover span,
.panel-traffic-btn:hover span::before,
.panel-traffic-btn:hover span::after {
    background: rgba(255,255,255,.22);
}
.panel-traffic-btn:active span,
.panel-traffic-btn.pressing span {
    transform: scale(0.82);
}
.panel-traffic-btn:active span::before,
.panel-traffic-btn.pressing span::before {
    transform: translateX(2px);
}
.panel-traffic-btn:active span::after,
.panel-traffic-btn.pressing span::after {
    transform: translateX(-2px);
}
.panel-traffic-btn.active-layout span,
.panel-traffic-btn.active-layout span::before,
.panel-traffic-btn.active-layout span::after {
    opacity: 0;
    transform: scale(.35);
    filter: blur(5px);
}
@keyframes panelTrafficIslandBreath {
    0%, 100% {
        transform: translateZ(0) translateY(-.2px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            inset 0 -10px 24px rgba(0,0,0,.10),
            0 14px 34px rgba(0,0,0,.28),
            0 0 0 1px rgba(255,255,255,.07);
    }
    50% {
        transform: translateZ(0) translateY(.3px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            inset 0 -9px 22px rgba(0,0,0,.09),
            0 15px 36px rgba(0,0,0,.30),
            0 0 0 1px rgba(255,255,255,.08);
    }
}
.panel-drag-handle:active,
.panel-titlebar:active { cursor: default; }
.panel-titlebar { cursor: default; user-select: none; }
.panel-layout-menu {
    position: fixed;
    z-index: 100;
    width: var(--panel-island-menu-width, min(236px, calc(100vw - 16px)));
    height: var(--panel-island-menu-height, 50px);
    min-height: 0;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid rgba(139,148,158,.22);
    border-radius: var(--panel-island-radius, 999px);
    background: color-mix(in srgb, var(--surface) 76%, rgba(0,0,0,.26));
    box-shadow: none;
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    transform-origin: top center;
    opacity: 0;
    pointer-events: none;
    transition:
        left .52s cubic-bezier(0.32, 0.72, 0, 1),
        width .52s cubic-bezier(0.32, 0.72, 0, 1),
        height .52s cubic-bezier(0.32, 0.72, 0, 1),
        border-radius .52s cubic-bezier(0.32, 0.72, 0, 1),
        background .16s ease-out,
        opacity .12s ease;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    will-change: top, left, width, height, border-radius, opacity;
    overflow: hidden;
    contain: none;
}
.panel-layout-menu.island-open {
    opacity: 1;
    pointer-events: auto;
    border-radius: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, rgba(255,255,255,.08)), color-mix(in srgb, var(--surface) 84%, rgba(0,0,0,.20)));
    box-shadow:
        0 18px 46px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,.10);
}
.panel-layout-menu.island-closing {
    opacity: 1;
    pointer-events: none;
    border-radius: var(--panel-island-radius, 999px);
    background: color-mix(in srgb, var(--surface) 76%, rgba(0,0,0,.26));
    box-shadow: none;
    transition:
        left .42s cubic-bezier(0.4, 0, 0.6, 1),
        width .42s cubic-bezier(0.4, 0, 0.6, 1),
        height .42s cubic-bezier(0.4, 0, 0.6, 1),
        border-radius .42s cubic-bezier(0.4, 0, 0.6, 1),
        background .16s ease-in,
        opacity .01s linear .42s;
}
.panel-layout-menu::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 74%, transparent);
    box-shadow:
        -10px 0 0 color-mix(in srgb, var(--text-secondary) 74%, transparent),
        10px 0 0 color-mix(in srgb, var(--text-secondary) 74%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    z-index: 2;
}
.panel-layout-menu.island-animating.island-open::after {
    animation: terminalIslandSourceDotsToPanel .18s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.panel-layout-menu.island-animating.island-closing::after {
    animation: terminalIslandSourceDotsReturn .24s cubic-bezier(0.4, 0, 0.6, 1) both;
}
.panel-layout-menu.island-open:not(.island-animating)::after,
.panel-layout-menu.island-closing:not(.island-animating)::after {
    opacity: 0;
    animation: none;
}
@keyframes panelMenuIn {
    0% { opacity: 0; transform: translateY(0) scaleX(0.18) scaleY(0.42); filter: blur(10px); }
    54% { opacity: 1; transform: translateY(0) scaleX(1.02) scaleY(1.045); filter: blur(0); }
    78% { transform: translateY(0) scaleX(0.998) scaleY(0.992); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes panelMenuPopIn {
    0% {
        opacity: 0;
        border-radius: 999px;
        clip-path: inset(0 round 999px);
        transform:
            translate3d(var(--island-start-dx, 0px), var(--island-start-dy, 0px), 0)
            scaleX(max(var(--island-start-scale-x, .24), .24))
            scaleY(max(var(--island-start-scale-y, .34), .34));
        filter: blur(8px) saturate(.9);
    }
    62% {
        opacity: 1;
        border-radius: 22px;
        clip-path: inset(0 round 22px);
        transform: translate3d(0, 1px, 0) scale(1.018);
        filter: blur(0) saturate(1.04);
    }
    100% {
        opacity: 1;
        border-radius: 18px;
        clip-path: inset(0 round 18px);
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
}
.panel-layout-menu button {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 0;
    border-radius: 12px;
    padding: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(0, 3px, 0) scale(.96);
    opacity: 0;
    filter: blur(3px);
    transition:
        opacity .14s ease .30s,
        transform .18s cubic-bezier(0.2, 0.9, 0.2, 1) .30s,
        filter .14s ease .30s,
        background 0.14s ease;
}
.panel-layout-menu button:nth-child(1) { --item-index: 0; }
.panel-layout-menu button:nth-child(2) { --item-index: 1; }
.panel-layout-menu button:nth-child(3) { --item-index: 2; }
.panel-layout-menu button:nth-child(4) { --item-index: 3; }
.panel-layout-menu button:nth-child(5) { --item-index: 4; }
.panel-layout-menu.island-open button {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    transition-delay: calc(.30s + (var(--item-index, 0) * 18ms));
}
.panel-layout-menu.island-closing button {
    opacity: 0;
    transform: translate3d(0, -3px, 0) scale(.94);
    filter: blur(3px);
    transition-delay: 0ms;
}
@keyframes panelMenuItemIn {
    0% { opacity: 0; transform: translate3d(0, 4px, 0) scale(.92); filter: blur(3px); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
.panel-layout-menu button:hover,
.panel-layout-menu button:active { background: rgba(255,255,255,0.10); }
.panel-layout-menu button:active { transform: scale(0.9); }
.panel-layout-icon {
    width: min(28px, 100%);
    height: 20px;
    min-width: 22px;
    border: 1.5px solid var(--text-secondary);
    border-radius: var(--radius-sm);
    display: block;
    position: relative;
    opacity: 0.95;
    overflow: hidden;
    align-self: center;
    margin: auto 0;
}
.panel-layout-icon.full { background: rgba(88,166,255,0.16); }
.panel-layout-icon.half::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    border-top: 1.5px solid var(--accent);
    border-radius: 0 0 4px 4px;
    background: rgba(88,166,255,0.2);
}
.panel-layout-icon.left::after,
.panel-layout-icon.right::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 25%;
    border-inline-end: 1.5px solid var(--accent);
    background: rgba(88,166,255,0.2);
}
.panel-layout-icon.left::after { left: 0; border-radius: 4px 0 0 4px; }
.panel-layout-icon.right::after { right: 0; border-inline-end: 0; border-inline-start: 1.5px solid var(--accent); border-radius: 0 4px 4px 0; }
.panel-layout-close:hover,
.panel-layout-close:active {
    background: rgba(248,81,73,0.14) !important;
}
.panel-layout-icon.close {
    border-color: rgba(248,81,73,0.72);
    background: rgba(248,81,73,0.08);
}
.panel-layout-icon.close::before,
.panel-layout-icon.close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--danger);
    transform-origin: center;
}
.panel-layout-icon.close::before { transform: translate(-50%, -50%) rotate(45deg); }
.panel-layout-icon.close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.panel-resize-handle {
    --resize-corner-color: color-mix(in srgb, var(--text-secondary) 64%, transparent);
    position: absolute;
    bottom: 8px;
    width: 34px;
    height: 34px;
    cursor: nwse-resize;
    z-index: 5;
    opacity: 0.62;
    touch-action: none;
    border-radius: var(--radius-lg);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.panel-resize-handle.right { right: 8px; }
.panel-resize-handle.left { left: 8px; cursor: nesw-resize; }
.panel-resize-handle:hover,
.file-manager.resizing .panel-resize-handle,
.info-modal.resizing .panel-resize-handle,
.docker-panel.resizing .panel-resize-handle,
.snippet-panel.resizing .panel-resize-handle,
.shortcut-panel.resizing .panel-resize-handle {
    opacity: 0.95;
}
.panel-resize-handle::before {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 27px;
    height: 27px;
    bottom: 0;
    border-color: var(--resize-corner-color);
    border-style: solid;
    border-width: 0 3px 3px 0;
    border-bottom-right-radius: var(--radius-lg);
}
.panel-resize-handle::after {
    content: none;
}
.panel-resize-handle.right::before { right: 0; }
.panel-resize-handle.left::before {
    left: 0;
    border-width: 0 0 3px 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--radius-lg);
}

.fm-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--border); min-width: 0; }
.fm-header { flex-wrap: wrap; min-width: 0; }
.fm-header.panel-titlebar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.fm-header.panel-titlebar::-webkit-scrollbar { height: 0; }
.fm-path-box { flex: 1 1 240px; min-width: 160px; display: flex; gap: 4px; }
.fm-header.panel-titlebar .fm-path-box { flex: 1 1 auto; order: 0; min-width: 96px; }
.fm-header.panel-titlebar .fm-refresh-btn { margin-left: auto; }
.fm-path-input { flex: 1; min-width: 0; padding: 4px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: var(--font-mono); }
.fm-search-input { flex: 1; padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: var(--font-sans); margin: 0 12px 4px; }
.fm-toolbar { display: flex; gap: 6px; padding: 6px 12px; background: var(--bg); border-bottom: 1px solid var(--border); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.fm-upload-label { cursor: pointer; }
.fm-drop-overlay {
    position: absolute;
    inset: 126px 12px 12px;
    z-index: 24;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--accent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent-hover);
    font-weight: 700;
    text-align: center;
    padding: 16px;
    backdrop-filter: blur(8px);
    pointer-events: none;
}
.file-manager.drag-over .fm-drop-overlay { display: flex; }

.fm-list { flex: 1; overflow-y: auto; padding: 8px; }

.fm-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; width: 100%; padding: 8px 12px;
    border-bottom: 1px solid var(--border); cursor: pointer;
    animation: fadeInItem 0.2s ease-out; transition: background 0.1s;
}
.fm-item:hover { background: var(--bg); }
@keyframes fadeInItem {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.fm-item span { flex: 1; pointer-events: none; }
.fm-item-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.fm-item-actions button { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; line-height: 1; opacity: 0.8; transition: opacity 0.15s; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.fm-item-actions button:hover { opacity: 1; }

/* 编辑器模态框 */
.fm-editor-modal {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--surface); display: flex; flex-direction: column; z-index: 25; padding: 12px;
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.975);
    filter: blur(8px);
    pointer-events: none;
    transition:
        opacity 0.24s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.26s ease;
    will-change: opacity, transform, filter;
}
.fm-editor-modal.open {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}
.fm-editor-modal.closing {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
    filter: blur(6px);
    pointer-events: none;
}
.fm-editor-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; min-width: 0; }
.fm-editor-header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-editor-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#fmCloseBtn,
#infoCloseBtn,
#dockerCloseBtn {
    display: none !important;
}
.fm-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px;
    margin-bottom: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-secondary);
}
.fm-editor-toolbar label { display: inline-flex; align-items: center; gap: 5px; }
.fm-editor-select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 12px;
    max-width: 150px;
}
.fm-editor-check input { accent-color: var(--accent); }
.fm-editor-status { margin-left: auto; font-family: var(--font-mono); color: var(--text-secondary); }
.fm-editor-code-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
    overflow: hidden;
}
.fm-editor-main {
    --editor-font-size: 13px;
    --editor-line-height: 20.15px;
    --editor-gutter-width: 48px;
    --editor-code-padding-x: 12px;
    --editor-code-padding-y: 12px;
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 40%, transparent);
    box-shadow: inset 0 0 0 1px rgba(139,148,158,0.08);
}
.fm-editor-highlight,
.fm-editor-textarea,
.fm-editor-indent-guides {
    font-family: var(--font-mono);
    font-size: var(--editor-font-size);
    line-height: var(--editor-line-height);
    tab-size: 4;
    padding: var(--editor-code-padding-y) var(--editor-code-padding-x) var(--editor-code-padding-y) calc(var(--editor-gutter-width) + var(--editor-code-padding-x));
}
.fm-editor-indent-guides {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    margin: 0;
    pointer-events: none;
    overflow: visible;
    color: transparent;
    background: transparent;
    white-space: pre;
    transform: translate3d(0, 0, 0);
    transform-origin: 0 0;
}
.fm-editor-main.wrap-enabled .fm-editor-indent-guides {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}
.fm-editor-main:not(.wrap-enabled) .fm-editor-indent-guides {
    width: max-content;
    min-width: 100%;
}
.fm-indent-guide-line {
    position: relative;
    display: block;
    height: var(--editor-indent-line-height, var(--editor-line-height));
    min-height: var(--editor-line-height);
}
.fm-indent-guide-line::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--editor-indent-guide-width, 0px);
    pointer-events: none;
    opacity: 0.95;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--editor-indent-step, 32px) - 1px),
        rgba(139,148,158,0.18) calc(var(--editor-indent-step, 32px) - 1px),
        rgba(139,148,158,0.18) var(--editor-indent-step, 32px)
    );
    background-position: 0 0;
    background-size: var(--editor-indent-step, 32px) 100%;
}
:root[data-theme="light"] .fm-indent-guide-line::before {
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--editor-indent-step, 32px) - 1px),
        rgba(101,109,118,0.22) calc(var(--editor-indent-step, 32px) - 1px),
        rgba(101,109,118,0.22) var(--editor-indent-step, 32px)
    );
}
.fm-editor-line-numbers {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 3;
    width: var(--editor-gutter-width);
    min-height: 100%;
    padding: var(--editor-code-padding-y) 8px var(--editor-code-padding-y) 6px;
    border-right: 1px solid rgba(139,148,158,0.16);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    color: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    font-family: var(--font-mono);
    font-size: var(--editor-font-size);
    line-height: var(--editor-line-height);
    text-align: right;
    user-select: none;
    pointer-events: none;
    white-space: pre;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}
.fm-editor-line-numbers span {
    display: block;
    height: var(--editor-line-number-height, var(--editor-line-height));
    line-height: var(--editor-line-height);
}
.fm-editor-highlight {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    margin: 0;
    pointer-events: none;
    color: var(--text);
    white-space: pre;
    overflow: visible;
    background: transparent;
    transform: translate3d(0, 0, 0);
    transform-origin: 0 0;
}
.fm-editor-main.wrap-enabled .fm-editor-highlight {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}
.fm-editor-main:not(.wrap-enabled) .fm-editor-highlight {
    width: max-content;
    min-width: 100%;
}
.fm-editor-textarea {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    resize: none;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--accent-hover);
    outline: none;
    white-space: pre-wrap;
    scrollbar-color: rgba(88,166,255,0.55) transparent;
}
.fm-editor-main:not(.wrap-enabled) .fm-editor-textarea {
    white-space: pre;
}
.fm-editor-textarea::selection {
    background: rgba(88,166,255,0.28);
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.fm-editor-minimap {
    --minimap-view-top: 0%;
    --minimap-view-height: 100%;
    --minimap-scale: 0.22;
    --minimap-font-size: 3px;
    --minimap-line-height: 4.4px;
    --minimap-padding-top: 4px;
    --minimap-padding-left: 12px;
    --minimap-code-top: 0px;
    position: relative;
    width: 148px;
    flex: 0 0 148px;
    padding: 0;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 66%, transparent);
    overflow: hidden;
    cursor: pointer;
    touch-action: none;
    transition: width 0.22s ease, flex-basis 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
}
.fm-editor-minimap.dragging { cursor: grabbing; }
.fm-editor-minimap.dragging::after {
    border-color: rgba(121,192,255,0.95);
    background: rgba(88,166,255,0.24);
}
.fm-editor-minimap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, transparent 0, transparent calc(100% - 18px), rgba(0,0,0,0.10));
    pointer-events: none;
}
.fm-editor-minimap::after {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: var(--minimap-view-top);
    height: var(--minimap-view-height);
    min-height: 18px;
    border: 1.5px solid rgba(88,166,255,0.62);
    border-radius: var(--radius-sm);
    background: rgba(88,166,255,0.14);
    box-shadow: 0 0 0 999px rgba(13,17,23,0.08), 0 6px 16px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 3;
}
.fm-minimap-code {
    position: absolute;
    z-index: 2;
    top: var(--minimap-code-top);
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: var(--minimap-padding-top) 7px 6px var(--minimap-padding-left);
    border: 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--minimap-font-size);
    line-height: var(--minimap-line-height);
    white-space: pre;
    pointer-events: none;
    opacity: 0.92;
}
.fm-minimap-line {
    display: block;
    width: 100%;
    height: var(--minimap-line-height);
    margin: 0;
    overflow: hidden;
    white-space: pre;
    text-overflow: clip;
    color: color-mix(in srgb, var(--text) 68%, var(--text-secondary));
    opacity: 0.74;
}
.fm-minimap-seg {
    display: inline;
    background: transparent;
    opacity: inherit;
}
.fm-minimap-seg.indent { opacity: 1; }
.fm-minimap-seg.comment { color: #8b949e; opacity: 0.42; }
.fm-minimap-seg.keyword { color: #ff7b72; opacity: 0.78; }
.fm-minimap-seg.string { color: #a5d6ff; opacity: 0.72; }
.fm-minimap-seg.number,
.fm-minimap-seg.literal { color: #79c0ff; opacity: 0.72; }
.fm-minimap-seg.function { color: #d2a8ff; opacity: 0.78; }
.fm-minimap-seg.tag { color: #7ee787; opacity: 0.72; }
:root[data-theme="light"] .fm-minimap-seg.comment { color: #6e7781; }
:root[data-theme="light"] .fm-minimap-seg.keyword { color: #cf222e; }
:root[data-theme="light"] .fm-minimap-seg.string { color: #0a3069; }
:root[data-theme="light"] .fm-minimap-seg.number,
:root[data-theme="light"] .fm-minimap-seg.literal { color: #0550ae; }
:root[data-theme="light"] .fm-minimap-seg.function { color: #8250df; }
:root[data-theme="light"] .fm-minimap-seg.tag { color: #116329; }
.fm-editor-modal.minimap-hidden .fm-editor-minimap {
    width: 0;
    flex-basis: 0;
    padding-inline: 0;
    margin-left: -10px;
    opacity: 0;
    pointer-events: none;
}
.fm-editor-modal.minimap-hidden .fm-editor-code-shell { gap: 0; }
.tok-comment { color: #8b949e; font-style: italic; }
.tok-keyword { color: #ff7b72; font-weight: 650; }
.tok-string { color: #a5d6ff; }
.tok-number,
.tok-literal { color: #79c0ff; }
.tok-function { color: #d2a8ff; }
.tok-tag { color: #7ee787; }
.tok-attr,
.tok-property { color: #79c0ff; }
.tok-variable,
.tok-type { color: #ffa657; }
.tok-operator { color: #ff7b72; }
.tok-punctuation { color: #8b949e; }
:root[data-theme="light"] .tok-comment { color: #6e7781; }
:root[data-theme="light"] .tok-keyword,
:root[data-theme="light"] .tok-operator { color: #cf222e; }
:root[data-theme="light"] .tok-string { color: #0a3069; }
:root[data-theme="light"] .tok-number,
:root[data-theme="light"] .tok-literal,
:root[data-theme="light"] .tok-attr,
:root[data-theme="light"] .tok-property { color: #0550ae; }
:root[data-theme="light"] .tok-function { color: #8250df; }
:root[data-theme="light"] .tok-tag { color: #116329; }
:root[data-theme="light"] .tok-variable,
:root[data-theme="light"] .tok-type { color: #953800; }
.fm-editor-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fm-editor-actions .btn {
    width: auto;
    min-width: 96px;
    flex: 0 1 auto;
    height: 36px;
    padding: 8px 16px;
    margin-top: 0;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
}
.btn-secondary {
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-sm); cursor: pointer;
    padding: 8px 16px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-secondary:hover { border-color: var(--text-secondary); background: var(--surface); }

/* 通用 Toast */
.toast-container {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    min-width: 180px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text);
    box-shadow: 0 14px 40px rgba(0,0,0,0.3);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    font-size: 13px;
    opacity: 0;
    transform: translate3d(14px, -6px, 0) scale(0.98);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease;
}
.toast.show { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.toast.success { border-color: rgba(63,185,80,0.45); box-shadow: 0 14px 40px rgba(63,185,80,0.12), 0 14px 40px rgba(0,0,0,0.26); }
.toast.error { border-color: rgba(248,81,73,0.5); color: var(--danger); }
.toast.info { border-color: rgba(88,166,255,0.45); }

/* ===== Docker 管理面板 ===== */
.docker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}
.docker-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docker-header-actions { display: flex; align-items: center; gap: 6px; }
.docker-status {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    min-height: 38px;
}
.docker-status[data-type="success"] { color: var(--success); }
.docker-status[data-type="warning"] { color: var(--warning); }
.docker-status[data-type="error"] { color: var(--danger); }
.docker-status.loading::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.docker-install-hint {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 24px;
}
.docker-empty-icon { font-size: 42px; }
.docker-install-hint h3 { font-size: 18px; }
.docker-install-hint p { color: var(--text-secondary); }
.docker-install-hint code {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    word-break: break-all;
}
.docker-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.docker-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.docker-tab {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.docker-tab.active {
    border-color: var(--accent);
    background: rgba(88,166,255,0.16);
    color: var(--accent-hover);
    box-shadow: 0 0 0 3px rgba(88,166,255,0.08) inset;
}
.docker-tab-panel {
    display: none;
    flex: 1;
    min-height: 0;
    padding: 10px;
    overflow: auto;
}
.docker-tab-panel.active { display: block; }
.docker-table-wrap { width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.docker-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 12px; }
.docker-table th,
.docker-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.docker-table th { color: var(--text-secondary); background: var(--bg); position: sticky; top: 0; z-index: 1; }
.docker-table tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.docker-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.docker-actions .tool-btn { padding: 3px 7px; }
.danger-text { color: var(--danger) !important; border-color: rgba(248,81,73,0.35) !important; }
.danger-text:hover { background: rgba(248,81,73,0.1) !important; }
.docker-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
}
.docker-badge.running { color: var(--success); border-color: rgba(63,185,80,0.42); background: rgba(63,185,80,0.1); }
.docker-badge.stopped { color: var(--text-secondary); background: rgba(139,148,158,0.1); }
.docker-pull-row { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.docker-pull-row input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
}
.docker-log-box,
.docker-container-log {
    min-height: 86px;
    max-height: 180px;
    overflow: auto;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #05070a;
    color: #d1e7ff;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
}
:root[data-theme="light"] .docker-log-box,
:root[data-theme="light"] .docker-container-log { background: #f6f8fa; color: #1f2328; }
.docker-settings-desc { color: var(--text-secondary); font-size: 12px; margin-bottom: 10px; }
.docker-mirror-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.docker-mirror-item { display: flex; align-items: center; gap: 8px; }
.docker-mirror-item input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}
.docker-log-drawer {
    position: absolute;
    inset: auto 12px 12px 12px;
    height: min(290px, 48%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
    overflow: hidden;
    animation: dockerDrawerIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dockerDrawerIn { from { transform: translateY(22px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.docker-log-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg); font-weight: 700; }
.docker-log-actions { display: flex; gap: 6px; align-items: center; }
.docker-container-log { flex: 1; max-height: none; border: 0; border-radius: 0; margin: 0; }

/* ===== 实时监控面板 ===== */
.info-modal {
    position: absolute;
    top: 52px; left: calc(100% - 500px);
    width: 480px; height: min(620px, 72vh); max-width: 95vw;
    min-width: 430px;
    min-height: 340px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 30;
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: perspective(1200px) scale(0.78) translate3d(0, -26px, 0);
    transform-origin: top right;
    filter: blur(8px);
    transition:
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.28s ease,
        filter 0.32s ease;
    will-change: transform, opacity, filter;
}
.info-modal.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}
.info-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border); font-weight: 600;
    position: sticky; top: 0; z-index: 2;
}
.info-modal-body { padding: 10px; overflow-y: auto; }
.info-modal-body,
.info-modal-body > :last-child,
.info-modal-body .doughnut-row:last-child,
.info-modal-body .ip-section:last-child,
.info-modal-body .disk-card-row:last-child,
.info-modal-body .doughnut-item:last-child,
.info-modal-body .ip-box:last-child {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}
.info-modal-body > :last-child,
.info-modal-body .doughnut-row:last-child,
.info-modal-body .ip-section:last-child,
.info-modal-body .disk-card-row:last-child {
    margin-bottom: 0;
}
.info-loading {
    padding: 24px 14px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 13px;
}
.info-loading.error { color: var(--danger); }

/* 环形进度条行 */
.doughnut-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.doughnut-row.two-col .doughnut-item { flex: 1 1 calc(50% - 10px); min-width: 140px; }
.doughnut-item.full-width { min-width: 100%; }
.doughnut-item {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 10px; flex: 1;
    display: flex; flex-direction: column; align-items: center;
}
.doughnut-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.doughnut-wrap { width: 100px; height: 100px; margin: 0 auto 6px; position: relative; display: flex; justify-content: center; }
.doughnut-text { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.doughnut-sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.disk-card-row { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.disk-card { flex: 1 1 calc(50% - 10px); min-width: 240px; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
.disk-card-meta { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.disk-card .doughnut-wrap { width: 72px; height: 72px; margin: 0 0 0 12px; }
.disk-card .doughnut-label { margin-bottom: 4px; }

/* 小折线图行 */
.sparkline-row { display: flex; gap: 8px; margin-top: 8px; justify-content: center; }
.sparkline-row canvas, .line-canvas { flex: 1; height: 30px !important; max-width: 120px; }

/* IP 信息区块 */
.ip-section { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ip-box {
    display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font-mono); font-size: 12px; gap: 8px;
}
.ip-box span { font-weight: 600; color: var(--text-secondary); min-width: 40px; }
.ip-box code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.copy-ip-btn {
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
    padding: 2px 6px; font-size: 14px; color: var(--text); flex-shrink: 0; transition: background 0.15s;
}
.copy-ip-btn:hover { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
    .file-manager,
    .info-modal,
    .docker-panel {
        transition: opacity 0.12s ease, visibility 0.12s ease;
        transform: none;
        filter: none;
    }
    .file-manager.open,
    .info-modal.open,
    .docker-panel.open,
    .file-manager.front-switching,
    .info-modal.front-switching,
    .docker-panel.front-switching,
    .fm-editor-modal.open,
    .fm-editor-modal.closing {
        animation: none;
        transform: none;
        filter: none;
    }
}

/* ===== 响应式调整 ===== */
@media (max-width: 480px) and (hover: none) and (pointer: coarse) {
    .login-card { padding: 24px 16px 18px; border-radius: 12px; }
    .login-card h1 { font-size: 19px; }
    .form-row { flex-direction: column; gap: 0; }
    .form-row .form-group.port-group { flex: 1; }
    .terminal-topbar { padding: 6px 10px; font-size: 11px; display: flex; flex-wrap: wrap; }
    .terminal-topbar .status { flex: 0 0 auto; }
    .terminal-topbar .info { flex: 1 1 100px; max-width: 100%; min-width: 80px; order: 2; }
    .topbar-actions {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        gap: 6px;
        padding: 6px 0 2px 0;
        margin-top: 4px;
    }
    .topbar-actions::-webkit-scrollbar { height: 0; }
    .topbar-actions.scroll-active::-webkit-scrollbar,
    .topbar-actions:hover::-webkit-scrollbar,
    .topbar-actions:focus-within::-webkit-scrollbar { height: 3px; }
    .btn-sm { padding: 5px 10px; min-height: 28px; font-size: 11px; }
    .wterm-theme-toggle { min-width: 70px; }
    .toolbar { padding: 5px 8px; }
    .toolbar-row { gap: 3px; }
    .tool-btn { padding: 3px 8px; font-size: 10px; min-width: max-content; max-width: none; }
    .tool-btn.combo,
    .tool-btn.modifier { max-width: none; }
    .font-size-btn { max-width: none; min-width: 30px; }
    .cmd-send-btn { padding: 4px 8px; font-size: 11px; }
    .file-manager,
    .info-modal,
    .docker-panel {
        min-width: 260px;
        min-height: 240px;
        max-width: none;
        width: calc(100vw - 20px);
        height: auto;
        max-height: min(85vh, 600px);
    }
    .fm-header { padding: 7px 8px; }
    .fm-path-box { flex-basis: 100%; order: 3; }
    .fm-header.panel-titlebar {
        gap: 4px;
        padding-inline: 6px;
    }
    .fm-header.panel-titlebar .tool-btn { padding-inline: 7px; }
    .fm-header.panel-titlebar .fm-back-btn {
        max-width: 38px;
        overflow: hidden;
        text-overflow: clip;
    }
    .fm-header.panel-titlebar .fm-path-box {
        flex: 1 1 92px;
        min-width: 82px;
    }
    .fm-header.panel-titlebar .fm-path-input { font-size: 12px; padding-inline: 7px; }
    .fm-header.panel-titlebar .fm-refresh-btn { margin-left: 0; }
    .fm-toolbar { padding-inline: 8px; overflow-x: auto; gap: 4px; }
    .toast-container { left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px)); }
    .toast { width: 100%; max-width: none; }
    .panel-resize-handle { width: 26px; height: 26px; }
    .fm-editor-minimap { width: 112px; flex-basis: 112px; }
    .fm-editor-actions { flex-wrap: wrap; }
    .fm-editor-actions .btn { min-width: 90px; }
    #view-settings .settings-content {
        padding: 12px;
    }
    #view-settings input,
    #view-settings textarea,
    #view-settings select {
        min-width: 0;
        max-width: 100%;
    }
    #view-settings .check-line {
        align-items: flex-start;
        flex-wrap: wrap;
        line-height: 1.45;
    }
    #view-settings .check-line input {
        flex: 0 0 auto;
        margin-top: 2px;
    }
    #view-remote .section-head { margin-bottom: 12px; }
    .remote-servers,
    .remote-command,
    .result-card { padding: 10px; border-radius: var(--radius); }
    .remote-servers { grid-template-columns: 1fr; max-height: 220px; }
    .server-check { padding: 11px; grid-template-columns: 22px minmax(0, 1fr); }
    .server-check span { font-size: 13px; }
    .server-check em { font-size: 11px; }
    .remote-command label { font-size: 11px; }
    .remote-command input,
    .remote-command textarea { padding: 10px; font-size: 12px; }
    .remote-results { gap: 10px; margin-top: 12px; }
    .result-card h3 { font-size: 14px; }
    .result-card pre { max-height: 260px; font-size: 11px; padding: 9px; }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body:has(.terminal-page),
    body:has(.guac-page) {
        min-height: 100dvh;
    }

    .terminal-page {
        inset: 0;
        height: 100dvh;
        max-height: 100dvh;
        padding-bottom: 0;
        box-shadow: none;
        will-change: auto;
    }

    html.viewport-updating .terminal-page {
        transition: background-color 0.24s ease, border-color 0.24s ease;
    }

    html.keyboard-open .terminal-page {
        transform: translate3d(0, 0, 0);
    }

    .terminal-container {
        order: 1;
        flex: 1 1 auto;
    }

    .terminal-input-panel {
        order: 2;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
        transform: translate3d(0, calc(-1 * var(--keyboard-inset, 0px)), 0);
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
        box-shadow: 0 -1px 0 var(--border);
    }

    html.keyboard-open .terminal-input-panel {
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .file-manager,
    .info-modal,
    .docker-panel {
        min-width: 260px;
        min-height: 240px;
        max-width: none;
        width: calc(100vw - 20px);
        height: auto;
        max-height: min(85vh, 600px);
    }
    .terminal-topbar { align-items: flex-start; flex-wrap: wrap; }
    .topbar-actions {
        flex-basis: 100%;
        order: 3;
        margin-top: 4px;
        padding: 6px 0 2px 0;
    }
    .topbar-actions::-webkit-scrollbar { height: 0; }
    .topbar-actions.scroll-active::-webkit-scrollbar,
    .topbar-actions:hover::-webkit-scrollbar,
    .topbar-actions:focus-within::-webkit-scrollbar { height: 3px; }
    .btn-sm { font-size: 11px; }
    .fm-header.panel-titlebar {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .fm-header.panel-titlebar::-webkit-scrollbar { height: 0; }
    .fm-header.panel-titlebar .fm-path-box { min-width: 82px; }
    .docker-table { min-width: 640px; font-size: 11px; }
    .docker-table th,
    .docker-table td { padding: 6px 8px; }
    .docker-log-header { align-items: flex-start; flex-direction: column; }
    .docker-log-actions { width: 100%; overflow-x: auto; gap: 4px; }
    .panel-resize-handle { width: 26px; height: 26px; }
    .fm-editor-code-shell { gap: 6px; padding: 6px; }
    .fm-editor-minimap { width: 98px; flex-basis: 98px; }
}

/* ===== Guacamole / VNC 页面 ===== */
.guac-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--visual-vh, var(--stable-vh, 100vh));
    max-height: var(--visual-vh, var(--stable-vh, 100vh));
    min-height: 0;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
}

.guac-topbar {
    position: relative;
    z-index: 5;
}

.guac-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(88,166,255,.12), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(240,136,62,.10), transparent 30%),
        #05070a;
    display: grid;
    place-items: center;
    outline: none;
    contain: layout paint;
}

.guac-display-shell {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: none;
    background:
        linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.025) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.025) 75%),
        #05070a;
    background-size: 28px 28px;
    background-position: 0 0, 0 14px, 14px -14px, -14px 0;
}

.guac-display {
    position: relative;
    min-width: 1px;
    min-height: 1px;
    display: grid;
    place-items: center;
    transform-origin: center center;
}

.guac-display-element {
    display: block;
    transform-origin: 0 0;
    outline: none;
}

.guac-display canvas,
.guac-display img {
    image-rendering: auto;
    max-width: none;
    max-height: none;
}

.guac-stage .terminal-overlay {
    z-index: 10;
}

.guac-stage .terminal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.guac-mobile-keyboard-input {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    border: 0;
    opacity: 0.01;
    color: transparent;
    background: transparent;
    resize: none;
    outline: none;
    caret-color: transparent;
    pointer-events: none;
}

.guac-floating-panel {
    position: absolute;
    z-index: 30;
    min-width: 300px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid rgba(139,148,158,.34);
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, rgba(255,255,255,.12)), color-mix(in srgb, var(--surface) 82%, transparent)),
        color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 28px 90px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter: blur(28px) saturate(1.62);
    -webkit-backdrop-filter: blur(28px) saturate(1.62);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.985);
    transition:
        opacity .24s ease,
        visibility .24s ease,
        transform .34s cubic-bezier(.16,1,.3,1),
        box-shadow .24s ease,
        left .34s cubic-bezier(.16,1,.3,1),
        top .34s cubic-bezier(.16,1,.3,1),
        width .34s cubic-bezier(.16,1,.3,1),
        height .34s cubic-bezier(.16,1,.3,1);
}

.guac-floating-panel[hidden] {
    display: flex !important;
    pointer-events: none;
}

.guac-floating-panel.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.guac-floating-panel.front {
    z-index: 42;
    box-shadow: 0 34px 110px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.13);
}

.guac-floating-panel.front-switching {
    animation: panelFrontSwitch .28s cubic-bezier(.2,.8,.2,1);
}

.guac-floating-panel.dragging,
.guac-floating-panel.resizing {
    transition: none;
    user-select: none;
    touch-action: none;
}

.guac-floating-panel.layout-animating {
    transition:
        left .62s var(--ios-open),
        top .62s var(--ios-open),
        width .62s var(--ios-open),
        height .62s var(--ios-open),
        transform .72s var(--ios-bounce),
        opacity .2s ease;
}

.guac-floating-panel .panel-drag-handle {
    height: 30px;
    background: color-mix(in srgb, var(--border) 30%, rgba(255,255,255,.08));
}

.guac-panel-content {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.guac-panel-head,
.guac-panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.guac-panel-head strong {
    font-size: 14px;
}

.guac-panel-head .icon-btn {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}

.guac-panel-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.guac-panel-textarea {
    width: 100%;
    min-height: 76px;
    max-height: 160px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.45;
    outline: none;
    resize: vertical;
    user-select: text;
    -webkit-user-select: text;
}

.guac-panel-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88,166,255,.12);
}

.guac-panel-textarea[readonly] {
    color: color-mix(in srgb, var(--text) 88%, var(--text-secondary));
}

.guac-panel-hint {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.guac-panel-hint[data-level="success"] {
    color: var(--success);
}

.guac-panel-hint[data-level="warning"] {
    color: var(--warning);
}

.guac-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.guac-shortcut-grid .tool-btn {
    min-width: 0;
    width: 100%;
    min-height: 34px;
    padding: 6px 7px;
    font-size: 11px;
    background: var(--bg);
}

@media (max-width: 480px) and (pointer: coarse) {
    .guac-page .terminal-topbar {
        padding: 6px 10px;
    }

    .guac-stage {
        margin: 4px;
        border-radius: 10px;
    }

    .guac-display-shell {
        place-items: center;
    }

    .guac-floating-panel {
        min-width: 260px;
        min-height: 220px;
        border-radius: 18px;
    }

    .guac-panel-content {
        padding: 10px;
    }

    .guac-panel-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .guac-panel-actions .btn-sm {
        flex: 1 1 auto;
    }

    .guac-shortcut-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .guac-shortcut-grid .tool-btn {
        min-height: 36px;
        padding-inline: 5px;
    }

    .guac-panel-textarea {
        min-height: 68px;
        max-height: 120px;
        font-size: 12px;
    }
}

.smartbar-trash-target {
    position: fixed;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 1001;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 1px solid rgba(248,81,73,.42);
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.24), transparent 34%), linear-gradient(180deg, rgba(248,81,73,.28), rgba(248,81,73,.13));
    color: #ffb4ad;
    box-shadow: 0 24px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 18px, 0) scale(.72);
    transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .22s ease, background .22s ease, box-shadow .22s ease;
}
.smartbar-dragging-dock .smartbar-trash-target {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
}
.smartbar-trash-target span { font-size: 38px; line-height: .9; font-weight: 300; transform: translateY(-2px); }
.smartbar-trash-target.hover,
body.smartbar-trash-hover .smartbar-trash-target {
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.30), transparent 34%), linear-gradient(180deg, rgba(248,81,73,.48), rgba(248,81,73,.22));
    box-shadow: 0 28px 80px rgba(248,81,73,.25), 0 0 0 7px rgba(248,81,73,.13), inset 0 1px 0 rgba(255,255,255,.20);
    transform: translate3d(-50%, -6px, 0) scale(1.12);
}
.smartbar-drag-ghost {
    transition: filter .18s ease, opacity .18s ease;
}
.smartbar-drag-ghost-closing {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(.28) !important;
    filter: blur(8px) saturate(.6) !important;
}
.terminal-window.dock-drop-target::after {
    content: '释放以替换此窗口';
    position: absolute;
    inset: 10px;
    z-index: 6;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(88,166,255,.72);
    border-radius: 18px;
    background: rgba(88,166,255,.10);
    color: rgba(255,255,255,.88);
    font-size: 13px;
    font-weight: 800;
    pointer-events: none;
    animation: dockDropTargetPulse .82s cubic-bezier(.16,1,.3,1) infinite alternate;
}
@keyframes dockDropTargetPulse {
    from { opacity: .72; transform: scale(.992); }
    to { opacity: 1; transform: scale(1); }
}

/* Android-style floating panel open/close motion */
.file-manager,
.docker-panel,
.info-modal,
.guac-floating-panel,
.snippet-panel,
.shortcut-panel {
    --panel-origin-x: 50%;
    --panel-origin-y: 0%;
    transform-origin: var(--panel-origin-x) var(--panel-origin-y);
}
.file-manager.panel-opening,
.docker-panel.panel-opening,
.info-modal.panel-opening,
.guac-floating-panel.panel-opening,
.snippet-panel.panel-opening,
.shortcut-panel.panel-opening {
    animation: floatingPanelOpenFromButton .36s cubic-bezier(.16, 1, .3, 1) both;
}
.file-manager.panel-closing,
.docker-panel.panel-closing,
.info-modal.panel-closing,
.guac-floating-panel.panel-closing,
.snippet-panel.panel-closing,
.shortcut-panel.panel-closing {
    animation: floatingPanelCloseToButton .28s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes floatingPanelOpenFromButton {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(.82);
        filter: blur(10px) saturate(.9);
        border-radius: 30px;
    }
    62% {
        opacity: 1;
        transform: translate3d(0, -3px, 0) scale(1.018);
        filter: blur(0) saturate(1.04);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
}
@keyframes floatingPanelCloseToButton {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(.86);
        filter: blur(8px) saturate(.88);
        border-radius: 30px;
    }
}

/* macOS-like terminal window layout morph */
.terminal-workspace.terminal-layout-morphing {
    contain: layout paint;
}
.terminal-workspace.terminal-layout-morphing .terminal-window {
    will-change: transform, filter, box-shadow;
    transform-origin: top left;
}
.terminal-window.layout-morphing .terminal-frame,
.terminal-window.layout-morphing .terminal-placeholder {
    pointer-events: none;
}
.terminal-window.layout-morphing .terminal-window-body {
    filter: saturate(.96) brightness(.98);
}

/* SSH snippets and shortcut floating panels */
.snippet-panel,
.shortcut-panel {
    position: absolute;
    top: 64px;
    left: 42px;
    width: min(460px, calc(100vw - 24px));
    height: min(520px, 62vh);
    min-width: 300px;
    min-height: 240px;
    display: none;
    flex-direction: column;
    z-index: 30;
    border: 1px solid rgba(139,148,158,.34);
    border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, rgba(255,255,255,.1)), color-mix(in srgb, var(--surface) 84%, transparent));
    box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter: blur(28px) saturate(1.55);
    -webkit-backdrop-filter: blur(28px) saturate(1.55);
    overflow: hidden;
    opacity: 0;
    transform: perspective(1200px) scale(.78) translate3d(0, 32px, 0);
    transform-origin: top center;
    filter: blur(8px);
    transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .28s ease, filter .32s ease;
    will-change: transform, opacity, filter;
}
.shortcut-panel { width: min(420px, calc(100vw - 24px)); height: min(360px, 46vh); }
.snippet-panel.open,
.shortcut-panel.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}
.snippet-panel.front,
.shortcut-panel.front { z-index: 47; }
.snippet-panel.dragging,
.snippet-panel.resizing,
.shortcut-panel.dragging,
.shortcut-panel.resizing { transition: none; user-select: none; touch-action: none; }
.snippet-panel.layout-animating,
.shortcut-panel.layout-animating {
    transition: left .62s var(--ios-open), top .62s var(--ios-open), width .62s var(--ios-open), height .62s var(--ios-open), transform .72s var(--ios-bounce), opacity .28s ease, filter .32s ease;
}
.snippet-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 68%, transparent); }
.snippet-panel-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; padding: 12px; overflow: hidden; }
.snippet-search { width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); outline: none; }
.snippet-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,.12); }
.snippet-list { display: grid; gap: 8px; overflow: auto; min-height: 0; }
.snippet-item { display: grid; gap: 4px; text-align: left; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--bg) 86%, transparent); color: var(--text); cursor: pointer; }
.snippet-item:hover { border-color: rgba(88,166,255,.42); background: rgba(88,166,255,.12); transform: translateY(-1px); }
.snippet-item em, .snippet-settings-item em { color: var(--text-secondary); font-size: 11px; font-style: normal; }
.snippet-item code, .snippet-settings-item code { display: block; max-height: 72px; overflow: hidden; white-space: pre-wrap; color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; }
.snippet-empty { color: var(--text-secondary); font-size: 12px; }
.shortcut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 12px; overflow: auto; }
.shortcut-grid .tool-btn { min-width: 0; width: 100%; min-height: 36px; padding-inline: 6px; font-size: 11px; }
.shortcut-grid .fn-key,
.guac-shortcut-grid .tool-btn[data-keyseq^="f"] { order: 20; }
.snippet-form { max-width: min(720px, 100%); }
.snippet-settings-list { display: grid; gap: 10px; margin-top: 12px; }
.snippet-settings-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
@media (max-width: 480px) and (pointer: coarse) {
    .snippet-settings-item { grid-template-columns: 1fr; }
    .shortcut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== 移动端终端全屏 Dock 与键盘控制：仅触控窄屏生效 ===== */
.mobile-fullscreen-dock-toggle { display: none; }
.smartbar-exit-fullscreen { display: none; }
.cmd-keyboard-btn { display: none; }

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-handle {
        display: none;
    }
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle {
        position: fixed;
        top: max(7px, env(safe-area-inset-top));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        z-index: 96;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 72%, transparent);
        box-shadow: 0 14px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.22);
        backdrop-filter: blur(18px) saturate(1.55);
        -webkit-backdrop-filter: blur(18px) saturate(1.55);
        pointer-events: auto;
    }
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--text-secondary) 76%, transparent);
        box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 14px rgba(88,166,255,.22);
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(54px, calc(env(safe-area-inset-top) + 54px));
        right: max(8px, env(safe-area-inset-right));
        left: auto;
        width: 92px;
        height: auto;
        z-index: 94;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        top: 0;
        right: 0;
        left: auto;
        width: 84px;
        max-width: 84px;
        max-height: calc(100dvh - 120px);
        padding: 10px 8px;
        border-radius: 28px;
        transform-origin: top right;
        transform: translate3d(18px, -12px, 0) scale3d(.34, .18, 1);
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
    body.terminal-custom-fullscreen-open .smartbar-panel .smartbar-dock,
    body.terminal-custom-fullscreen-open .smartbar-dock {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: 0;
        max-height: calc(100dvh - 142px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 6px 4px;
        gap: 10px;
        scroll-padding-block: 18px;
    }
    body.terminal-custom-fullscreen-open .smartbar-session,
    body.terminal-custom-fullscreen-open .smartbar-add,
    body.terminal-custom-fullscreen-open .smartbar-exit-fullscreen {
        width: 60px;
        min-width: 60px;
        min-height: 64px;
        padding: 0;
    }
    body.terminal-custom-fullscreen-open .smartbar-session-icon,
    body.terminal-custom-fullscreen-open .smartbar-add::before,
    body.terminal-custom-fullscreen-open .smartbar-exit-fullscreen span {
        width: 48px;
        height: 48px;
        border-radius: 17px;
    }
    body.terminal-custom-fullscreen-open .smartbar-session strong,
    body.terminal-custom-fullscreen-open .smartbar-exit-fullscreen strong {
        max-width: 62px;
        font-size: 10px;
    }
    body.terminal-custom-fullscreen-open .smartbar-session.active::after {
        left: 3px;
        top: 24px;
        bottom: auto;
        transform: translateY(-50%);
    }
    body.terminal-custom-fullscreen-open .smartbar-exit-fullscreen {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        gap: 5px;
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        font: inherit;
    }
    body.terminal-custom-fullscreen-open .smartbar-exit-fullscreen span {
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
        border: 1px solid rgba(139,148,158,.24);
        color: var(--accent-hover);
        font-size: 24px;
        font-weight: 900;
        box-shadow: 0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.16);
    }
    body.terminal-custom-fullscreen-open .smartbar-picker {
        right: max(100px, calc(env(safe-area-inset-right) + 100px));
        left: auto !important;
        top: max(72px, env(safe-area-inset-top)) !important;
        width: min(360px, calc(100vw - 126px));
        min-height: 260px;
        max-height: calc(100dvh - 96px);
        transform-origin: 100% 20px;
    }

    .terminal-page .cmd-keyboard-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        min-width: 38px;
        height: 34px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text);
        font-size: 17px;
        font-weight: 800;
    }
    .terminal-page .cmd-keyboard-btn.keyboard-visible {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
        font-size: 22px;
        line-height: 1;
    }
    .terminal-page .cmd-input[readonly] {
        caret-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }
    .terminal-page .terminal-container {
        flex-basis: 0;
        height: auto;
        max-height: none;
        margin-bottom: 4px;
    }
    html.keyboard-open .terminal-page .terminal-container {
        flex: 0 1 calc(100dvh - var(--keyboard-inset, 0px) - 116px - env(safe-area-inset-top));
        max-height: calc(100dvh - var(--keyboard-inset, 0px) - 116px - env(safe-area-inset-top));
    }
    html.keyboard-open .terminal-page .wterm-wrapper {
        max-height: 100%;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-workspace.compact:not(.custom-fullscreen) .mobile-fullscreen-dock-toggle {
        position: absolute;
        top: 10px;
        right: max(14px, env(safe-area-inset-right));
        z-index: 35;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 74%, transparent);
        box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.24);
        backdrop-filter: blur(18px) saturate(1.55);
        -webkit-backdrop-filter: blur(18px) saturate(1.55);
        pointer-events: auto;
    }
    .terminal-workspace.compact:not(.custom-fullscreen) .mobile-fullscreen-dock-toggle span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--text-secondary) 78%, transparent);
        box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 14px rgba(88,166,255,.20);
    }
    .terminal-workspace.compact:not(.custom-fullscreen) .terminal-window-titlebar {
        padding-right: 54px;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body:has(.terminal-page),
    body:has(.guac-page) {
        position: static;
        inset: auto;
        width: auto;
        height: auto;
        min-height: 100dvh;
        overflow: auto;
    }
    body.app-body.terminal-mode {
        overflow: hidden;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "input"
            "term"
            "tools";
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        position: fixed;
        inset: 0;
    }
    .terminal-page .terminal-input-panel {
        position: relative;
        grid-area: input;
        order: unset;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 1px 0 var(--border);
        padding-bottom: 0;
        transform: none !important;
    }
    .terminal-page .terminal-container {
        grid-area: term;
        order: unset;
        min-height: 0;
        height: auto;
        margin: 5px 8px;
        align-self: stretch;
        overflow: hidden;
        contain: layout paint;
    }
    .terminal-page .terminal-topbar {
        grid-area: tools;
        order: unset;
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 6px 8px max(6px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        box-shadow: 0 -1px 0 rgba(255,255,255,.08);
    }
    .terminal-page .terminal-topbar .status,
    .terminal-page .terminal-topbar .info {
        display: none;
    }
    .terminal-page .topbar-actions {
        flex: 1 1 auto;
        order: unset;
        flex-basis: auto;
        margin: 0;
        padding: 0 2px;
        gap: 7px;
        width: 100%;
    }
    .terminal-page .topbar-actions .btn-sm {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 14px;
        font-size: 0;
        gap: 0;
    }
    .terminal-page .topbar-actions .btn-sm::before {
        content: attr(data-mobile-icon);
        font-size: 18px;
        line-height: 1;
    }
    .terminal-page .topbar-actions .wterm-theme-toggle {
        min-width: 38px;
    }
    html.keyboard-open .terminal-page {
        grid-template-rows: auto minmax(0, calc(100dvh - var(--keyboard-inset, 0px) - 56px)) auto;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }
    html.keyboard-open .terminal-page .terminal-container {
        flex: unset;
        max-height: none;
        height: auto;
    }
    html.keyboard-open .terminal-page .terminal-topbar {
        display: none;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle {
        position: fixed;
        top: max(7px, env(safe-area-inset-top));
        right: 50%;
        transform: translateX(50%);
        z-index: 1004;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 74%, transparent);
        box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.24);
        backdrop-filter: blur(18px) saturate(1.55);
        -webkit-backdrop-filter: blur(18px) saturate(1.55);
        pointer-events: auto;
    }
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--text-secondary) 78%, transparent);
        box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 14px rgba(88,166,255,.20);
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions #reconnectBtn,
    .terminal-page .topbar-actions #disconnectBtn {
        display: none !important;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-window > .mobile-fullscreen-dock-toggle {
        position: absolute;
        top: 4px;
        right: 10px;
        z-index: 60;
        display: grid;
        place-items: center;
        width: 40px;
        height: 28px;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 76%, transparent);
        box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.26);
        backdrop-filter: blur(18px) saturate(1.55);
        -webkit-backdrop-filter: blur(18px) saturate(1.55);
        pointer-events: auto;
    }
    .terminal-window > .mobile-fullscreen-dock-toggle span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--text-secondary) 78%, transparent);
        box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 14px rgba(88,166,255,.20);
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: 4px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        position: absolute;
        z-index: 70;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-workspace.compact.custom-fullscreen .terminal-smartbar.open,
    body.terminal-custom-fullscreen-open .terminal-smartbar.open {
        display: block !important;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .terminal-container .wterm-wrapper.wterm {
        height: 100% !important;
        min-height: 0 !important;
        contain: layout paint style;
    }
    .terminal-page .terminal-container .wterm-wrapper .term-grid {
        min-height: 0 !important;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm::before {
        content: '';
        position: relative;
        display: block;
        width: 21px;
        height: 21px;
        font-size: 0;
        background: currentColor;
        -webkit-mask: var(--mobile-icon-mask) center / contain no-repeat;
        mask: var(--mobile-icon-mask) center / contain no-repeat;
    }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="file"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v1H3V6zm0 4h18l-2 9H5l-2-9z'/%3E%3C/svg%3E"); color: #d7a21f; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="stats"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20V4h16v2H6v12h14v2H4zm3-3V9h3v8H7zm5 0V6h3v11h-3zm5 0v-5h3v5h-3z'/%3E%3C/svg%3E"); color: #4aa3df; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="docker"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 13h18c-.6 4-3.8 7-8.8 7C7.5 20 4 17.8 3 13zm2-5h3v3H5V8zm4 0h3v3H9V8zm4 0h3v3h-3V8zM9 4h3v3H9V4zm4 0h3v3h-3V4zm4 4h3v3h-3V8z'/%3E%3C/svg%3E"); color: #2aa9c9; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="snippet"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7z'/%3E%3C/svg%3E"); color: #d9aa18; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="keyboard"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v12H3V6zm2 2v8h14V8H5zm1 1h2v2H6V9zm3 0h2v2H9V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM6 12h2v2H6v-2zm3 0h6v2H9v-2zm7 0h2v2h-2v-2z'/%3E%3C/svg%3E"); color: #6b7684; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="copy"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7V3h14v14h-4v4H3V7h4zm2 0h8v8h2V5H9v2zm-4 2v10h10V9H5z'/%3E%3C/svg%3E"); color: #7a6042; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="paste"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h3v16H5V5h3l1-2zm1 4h4l1-2h-6l1 2zm-3 1v11h10V8h-2v2H9V8H7z'/%3E%3C/svg%3E"); color: #9a6a3a; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="term-theme"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20V2z'/%3E%3C/svg%3E"); color: #5b6672; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="theme"] { --mobile-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a9 9 0 1 0 9 9c-1 4-5 7-9 7V2z'/%3E%3C/svg%3E"); color: #246f88; }
    .terminal-page .cmd-keyboard-btn::before {
        content: '';
        width: 22px;
        height: 22px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v12H3V6zm2 2v8h14V8H5zm1 1h2v2H6V9zm3 0h2v2H9V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM6 12h2v2H6v-2zm3 0h6v2H9v-2zm7 0h2v2h-2v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v12H3V6zm2 2v8h14V8H5zm1 1h2v2H6V9zm3 0h2v2H9V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM6 12h2v2H6v-2zm3 0h6v2H9v-2zm7 0h2v2h-2v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .terminal-page .cmd-keyboard-btn.keyboard-visible::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 16-7-7h14l-7 7z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 16-7-7h14l-7 7z'/%3E%3C/svg%3E");
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm {
        color: transparent !important;
        overflow: hidden;
        text-indent: -9999px;
    }
    .terminal-page .topbar-actions .btn-sm::before {
        text-indent: 0;
        color: inherit;
        flex: 0 0 auto;
    }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="file"]::before { background: #d7a21f; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="stats"]::before { background: #4aa3df; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="docker"]::before { background: #2aa9c9; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="snippet"]::before { background: #d9aa18; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="keyboard"]::before { background: #6b7684; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="copy"]::before { background: #7a6042; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="paste"]::before { background: #9a6a3a; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="term-theme"]::before { background: #5b6672; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="theme"]::before { background: #246f88; }
}

.mobile-secure-keyboard-proxy {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0.01;
    color: transparent;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    outline: none;
    caret-color: transparent;
    z-index: -1;
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm {
        position: relative;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        letter-spacing: 0 !important;
        overflow: hidden !important;
        text-indent: 0 !important;
        white-space: nowrap;
    }
    .terminal-page .topbar-actions .btn-sm::before {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .terminal-smartbar,
    .terminal-workspace.compact.custom-fullscreen ~ .terminal-smartbar,
    .terminal-smartbar.open {
        display: block !important;
        pointer-events: none;
    }
    .terminal-smartbar.open .smartbar-panel {
        pointer-events: auto;
    }
}

/* 移除移动端手动键盘按钮/安全键盘代理后的最终覆盖 */
.cmd-keyboard-btn,
.mobile-secure-keyboard-proxy { display: none !important; }

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    html.keyboard-open .terminal-page {
        height: 100dvh;
        max-height: 100dvh;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }
    html.keyboard-open .terminal-page .terminal-topbar {
        display: flex;
    }
    html.keyboard-open .terminal-page .terminal-input-panel {
        transform: none !important;
    }
    html.keyboard-open .terminal-page .terminal-container {
        height: auto !important;
        max-height: none !important;
        min-height: 0;
    }
    html.keyboard-open .terminal-page .wterm-wrapper {
        max-height: none !important;
    }
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .terminal-container .wterm-wrapper.wterm,
    .terminal-page .terminal-container .wterm-wrapper {
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        overflow-anchor: none;
    }
}

/* ===== 修正：桌面端保留文字，移动端才隐藏为图标 ===== */
.terminal-page .topbar-actions .btn-sm {
    font-size: 12px;
    line-height: 1.2;
    color: var(--text);
    -webkit-text-fill-color: currentColor;
    text-indent: 0;
}
.terminal-page .topbar-actions .btn-sm::before {
    content: none;
}
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    .terminal-page .topbar-actions .btn-sm::before {
        content: '';
        display: block;
    }
}

/* ===== 独立移动端竖排 Dock：从小圆点中心展开，不污染桌面 Dock ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        position: fixed;
        top: max(42px, calc(env(safe-area-inset-top) + 42px));
        left: 50%;
        right: auto;
        width: 86px;
        transform: translateX(-50%);
        z-index: 1002;
        pointer-events: none;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        position: static;
        width: 86px;
        max-width: 86px;
        min-height: 0;
        max-height: calc(100dvh - 76px - env(safe-area-inset-bottom));
        padding: 9px 7px;
        border-radius: 28px;
        transform-origin: 50% -22px;
        transform: translate3d(0, -16px, 0) scale3d(.22, .08, 1);
        opacity: 0;
        pointer-events: none;
        transition:
            transform .46s cubic-bezier(.16, 1, .3, 1),
            opacity .24s ease,
            filter .38s ease;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        opacity: 1;
        pointer-events: auto;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-dock {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-height: calc(100dvh - 98px - env(safe-area-inset-bottom));
        overflow-y: auto;
        overflow-x: hidden;
        gap: 10px;
        padding: 6px 2px;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-session,
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-add {
        width: 64px;
        min-width: 64px;
        height: auto;
        min-height: 66px;
        flex: 0 0 auto;
        padding: 0;
        flex-direction: column;
        gap: 5px;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-session-icon,
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-add::before {
        width: 50px;
        height: 50px;
        border-radius: 18px;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-session strong {
        display: block;
        max-width: 66px;
        font-size: 10px;
        line-height: 1.1;
        text-align: center;
    }
}

/* ===== 桌面端工具栏：文字 + CSS 图标，移动端仍保持纯图标 ===== */
.terminal-page .topbar-actions .btn-sm[data-mobile-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.terminal-page .topbar-actions .btn-sm[data-mobile-icon]::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    background: currentColor;
    -webkit-mask: var(--terminal-toolbar-icon) center / contain no-repeat;
    mask: var(--terminal-toolbar-icon) center / contain no-repeat;
}
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="file"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v1H3V6zm0 4h18l-2 9H5l-2-9z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="stats"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20V4h16v2H6v12h14v2H4zm3-3V9h3v8H7zm5 0V6h3v11h-3zm5 0v-5h3v5h-3z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="docker"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 13h18c-.6 4-3.8 7-8.8 7C7.5 20 4 17.8 3 13zm2-5h3v3H5V8zm4 0h3v3H9V8zm4 0h3v3h-3V8zM9 4h3v3H9V4zm4 0h3v3h-3V4zm4 4h3v3h-3V8z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="snippet"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="keyboard"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v12H3V6zm2 2v8h14V8H5zm1 1h2v2H6V9zm3 0h2v2H9V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM6 12h2v2H6v-2zm3 0h6v2H9v-2zm7 0h2v2h-2v-2z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="copy"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7V3h14v14h-4v4H3V7h4zm2 0h8v8h2V5H9v2zm-4 2v10h10V9H5z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="paste"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h3v16H5V5h3l1-2zm1 4h4l1-2h-6l1 2zm-3 1v11h10V8h-2v2H9V8H7z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="term-theme"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20V2z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="theme"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a9 9 0 1 0 9 9c-1 4-5 7-9 7V2z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="reconnect"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.7 6.3A8 8 0 1 0 20 12h-2a6 6 0 1 1-1.76-4.24L13 11h8V3l-3.3 3.3z'/%3E%3C/svg%3E"); }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="disconnect"] { --terminal-toolbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v2H7V3zm4 4h2v7h-2V7zm-5.6 3.2 1.5 1.3A6 6 0 1 0 17.1 11.5l1.5-1.3a8 8 0 1 1-13.2 0z'/%3E%3C/svg%3E"); }
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon] {
        gap: 0;
    }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon]::before {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }
}

/* 仅保留：移动端全屏小白点放回右上角，不改 SSH 输入/复制逻辑 */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: max(8px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        left: auto !important;
        transform: none !important;
        position: fixed !important;
        z-index: 1006 !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(48px, calc(env(safe-area-inset-top) + 48px)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        left: auto !important;
        transform: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        transform-origin: 100% -18px !important;
    }
}

/* ===== 最终修复：移动端图标不要继承透明文字色，使用明确颜色 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon]::before {
        content: '' !important;
        display: block !important;
        width: 21px !important;
        height: 21px !important;
        flex: 0 0 21px !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        background: var(--mobile-icon-color, currentColor) !important;
        color: var(--mobile-icon-color, currentColor) !important;
        -webkit-text-fill-color: var(--mobile-icon-color, currentColor) !important;
        -webkit-mask: var(--mobile-icon-mask, var(--terminal-toolbar-icon)) center / contain no-repeat !important;
        mask: var(--mobile-icon-mask, var(--terminal-toolbar-icon)) center / contain no-repeat !important;
    }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="file"] { --mobile-icon-color: #d7a21f; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="stats"] { --mobile-icon-color: #4aa3df; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="docker"] { --mobile-icon-color: #2aa9c9; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="snippet"] { --mobile-icon-color: #d9aa18; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="keyboard"] { --mobile-icon-color: #6b7684; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="copy"] { --mobile-icon-color: #7a6042; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="paste"] { --mobile-icon-color: #9a6a3a; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="term-theme"] { --mobile-icon-color: #5b6672; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="theme"] { --mobile-icon-color: #246f88; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="reconnect"] { --mobile-icon-color: #2f81f7; }
    .terminal-page .topbar-actions .btn-sm[data-mobile-icon="disconnect"] { --mobile-icon-color: #f85149; }
}

/* ===== 桌面端工具栏图标也使用与移动端一致的彩色图标 ===== */
.terminal-page .topbar-actions .btn-sm[data-mobile-icon]::before {
    background: var(--toolbar-icon-color, currentColor);
}
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="file"] { --toolbar-icon-color: #d7a21f; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="stats"] { --toolbar-icon-color: #4aa3df; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="docker"] { --toolbar-icon-color: #2aa9c9; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="snippet"] { --toolbar-icon-color: #d9aa18; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="keyboard"] { --toolbar-icon-color: #6b7684; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="copy"] { --toolbar-icon-color: #7a6042; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="paste"] { --toolbar-icon-color: #9a6a3a; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="term-theme"] { --toolbar-icon-color: #5b6672; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="theme"] { --toolbar-icon-color: #246f88; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="reconnect"] { --toolbar-icon-color: #2f81f7; }
.terminal-page .topbar-actions .btn-sm[data-mobile-icon="disconnect"] { --toolbar-icon-color: #f85149; }

/* ===== 移动端全屏小圆点：移进顶部分界线区域，并保持右上角展开 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: max(2px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        left: auto !important;
        width: 40px !important;
        height: 28px !important;
        transform: none !important;
        position: fixed !important;
        z-index: 1006 !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(34px, calc(env(safe-area-inset-top) + 34px)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        left: auto !important;
        transform: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        transform-origin: calc(100% - 22px) -16px !important;
    }
}

/* ===== 移动端 Dock 最终交互修正：小圆点等大、去椭圆框、Picker 在 Dock 左侧 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: max(7px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        width: 42px !important;
        height: 22px !important;
        border: 1px solid rgba(139,148,158,.20) !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--surface) 72%, rgba(0,0,0,.10)) !important;
        box-shadow: 0 3px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
        backdrop-filter: blur(18px) saturate(1.22) !important;
        -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
    }
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle span,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle span,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle span {
        width: 5px !important;
        height: 5px !important;
        border-radius: 50% !important;
        background: color-mix(in srgb, var(--text-secondary) 72%, transparent) !important;
        box-shadow: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(34px, calc(env(safe-area-inset-top) + 34px)) !important;
        right: max(6px, env(safe-area-inset-right)) !important;
        left: auto !important;
        width: 92px !important;
        transform: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        transform-origin: calc(100% - 27px) -11px !important;
    }
    body.terminal-custom-fullscreen-open .smartbar-picker {
        left: max(12px, calc(100vw - 390px)) !important;
        right: auto !important;
        top: max(64px, calc(env(safe-area-inset-top) + 64px)) !important;
        width: min(340px, calc(100vw - 112px)) !important;
        min-height: 260px !important;
        max-height: calc(100dvh - 88px) !important;
        z-index: 1010 !important;
        pointer-events: auto !important;
    }
}

/* 移动端未全屏时不显示右上角 Dock 小点 */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-workspace.compact:not(.custom-fullscreen) .mobile-fullscreen-dock-toggle {
        display: none !important;
    }
}

/* ===== 移动 Dock 对齐和触屏手感修正 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: max(12px, env(safe-area-inset-top)) !important;
        right: max(22px, env(safe-area-inset-right)) !important;
        width: 42px !important;
        height: 22px !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(42px, calc(env(safe-area-inset-top) + 42px)) !important;
        right: max(16px, env(safe-area-inset-right)) !important;
        width: 92px !important;
        pointer-events: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        pointer-events: auto !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-dock {
        touch-action: manipulation !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-session,
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-add {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent;
        transition: transform .22s cubic-bezier(.16,1,.3,1), filter .22s ease, opacity .18s ease !important;
    }
    .terminal-smartbar:not(.open) .smartbar-panel {
        pointer-events: none !important;
    }
}

/* ===== 移动全屏小圆点：圆形外层 + 与标题栏三点同源岛动画 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        width: 34px !important;
        height: 34px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(139,148,158,.20) !important;
        background:
            radial-gradient(circle at 50% 12%, rgba(255,255,255,.16), transparent 42%),
            linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.015)),
            color-mix(in srgb, var(--surface) 72%, rgba(0,0,0,.20)) !important;
        box-shadow:
            0 3px 10px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.08) !important;
        backdrop-filter: blur(18px) saturate(1.22) !important;
        -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
        transition:
            transform .24s cubic-bezier(.34,1.56,.64,1),
            border-color .24s ease,
            background .24s ease,
            box-shadow .36s ease,
            opacity .12s ease,
            backdrop-filter .24s ease,
            -webkit-backdrop-filter .24s ease !important;
        touch-action: none !important;
    }
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle:active,
    body.terminal-custom-fullscreen-open .terminal-smartbar.open ~ .mobile-fullscreen-dock-toggle {
        transform: scale(.94) !important;
        border-color: rgba(88,166,255,.36) !important;
        box-shadow:
            0 6px 16px rgba(0,0,0,.20),
            0 0 0 3px rgba(88,166,255,.07) !important;
    }
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle span,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle span,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle span {
        width: 7px !important;
        height: 7px !important;
        border-radius: 50% !important;
        background: color-mix(in srgb, var(--text-secondary) 72%, transparent) !important;
        box-shadow: 0 0 9px rgba(255,255,255,.08) !important;
        transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .18s ease, background-color .18s ease !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar .smartbar-panel {
        border-radius: 22px !important;
        transform-origin: calc(100% - 25px) -18px !important;
        transform: translate3d(18px, -18px, 0) scale3d(.22, .10, 1) !important;
        opacity: 0;
        transition:
            transform .52s cubic-bezier(0.32, 0.72, 0, 1),
            width .52s cubic-bezier(0.32, 0.72, 0, 1),
            height .52s cubic-bezier(0.32, 0.72, 0, 1),
            border-radius .52s cubic-bezier(0.32, 0.72, 0, 1),
            opacity .12s ease !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open .smartbar-panel {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
        opacity: 1 !important;
        border-radius: 28px !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.closing .smartbar-panel {
        transform: translate3d(18px, -18px, 0) scale3d(.22, .10, 1) !important;
        opacity: 0 !important;
        border-radius: 999px !important;
        transition:
            transform .42s cubic-bezier(0.4, 0, 0.6, 1),
            border-radius .42s cubic-bezier(0.4, 0, 0.6, 1),
            opacity .18s ease .16s !important;
    }
}

/* ===== 最终：小圆点与标题栏三点同线，Dock 打开时 iframe 不抢触摸 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        top: max(10px, env(safe-area-inset-top)) !important;
        right: max(24px, env(safe-area-inset-right)) !important;
        width: 34px !important;
        height: 34px !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar.open ~ .terminal-workspace .terminal-frame,
    body.terminal-custom-fullscreen-open .terminal-smartbar.open + .terminal-frame {
        pointer-events: none !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(50px, calc(env(safe-area-inset-top) + 50px)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
    }
}

/* ===== 最终对齐：小圆点挂在标题栏内，和三点同一水平线一起出现 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        z-index: 72 !important;
        display: grid !important;
        place-items: center !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 999px !important;
    }
    body.terminal-custom-fullscreen-open .terminal-window-titlebar > .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        display: grid !important;
    }
    body.terminal-custom-fullscreen-open .terminal-smartbar {
        top: max(40px, calc(env(safe-area-inset-top) + 40px)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
    }
}

/* ===== 缩小移动全屏小圆点一圈，并继续对齐标题栏 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-window-titlebar > .mobile-fullscreen-dock-toggle,
    body.terminal-custom-fullscreen-open .terminal-window-titlebar > .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window-titlebar > .mobile-fullscreen-dock-toggle,
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .mobile-fullscreen-dock-toggle,
    .terminal-workspace.compact.custom-fullscreen .terminal-window > .mobile-fullscreen-dock-toggle {
        width: 28px !important;
        height: 28px !important;
        top: 50% !important;
        right: 12px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        border-radius: 999px !important;
    }
    .terminal-window-titlebar > .mobile-fullscreen-dock-toggle span,
    body.terminal-custom-fullscreen-open .mobile-fullscreen-dock-toggle span {
        width: 6px !important;
        height: 6px !important;
    }
}

/* 稳健版：每个标题栏自带小圆点，只显示 active 全屏窗口那一个 */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: none !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window.active .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: grid !important;
    }
}

/* 删除旧版被搬运到窗口主体里的小圆点，只保留标题栏右上角那个 */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .terminal-window > .mobile-fullscreen-dock-toggle {
        display: none !important;
    }
    .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: none !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window.active .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: grid !important;
    }
}

/* ===== 终版：全局隐藏所有旧小圆点，只允许 active 标题栏右上角一个显示 ===== */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
    .mobile-fullscreen-dock-toggle {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .terminal-workspace.compact.custom-fullscreen .terminal-window.active .terminal-window-titlebar > .mobile-fullscreen-dock-toggle {
        display: grid !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        width: 28px !important;
        height: 28px !important;
        z-index: 72 !important;
        place-items: center !important;
        border-radius: 999px !important;
    }
}