* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --bg-primary: #0b0d10;
    --bg-secondary: #12151a;
    --bg-tertiary: #191d24;
    --bg-hover: #232934;
    --bg-modal: rgba(15, 18, 23, 0.97);
    --bg-gradient: linear-gradient(145deg, #0b0d10 0%, #111820 100%);
    --bg-active: rgba(91, 156, 246, 0.14);

    --text-primary: #eef2f6;
    --text-secondary: #aeb8c5;
    --text-muted: #818c9b;

    --border-color: rgba(190, 205, 220, 0.12);
    --border-hover: rgba(190, 205, 220, 0.22);

    --accent-primary: #5b9cf6;
    --accent-primary-glow: rgba(91, 156, 246, 0.26);
    --accent-secondary: #7e8fa6;
    --accent-tertiary: #6fcf97;

    --success-color: #54c985;
    --success-glow: color-mix(in srgb, var(--success-color) 40%, transparent);
    --warning-color: #d9a441;
    --warning-glow: color-mix(in srgb, var(--warning-color) 40%, transparent);
    --error-color: #e26666;
    --error-glow: color-mix(in srgb, var(--error-color) 40%, transparent);
    --info-color: #5b9cf6;

    --btn-primary-gradient-end: #3978c8;
    --btn-primary-text: #ffffff;
    --btn-danger-gradient-end: #c93030;
    --btn-danger-text: #ffffff;
    --btn-primary-shadow: rgba(91, 156, 246, 0.22);
    --btn-primary-shadow-hover: rgba(91, 156, 246, 0.34);
    --accent-on-text: #ffffff; 

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--accent-primary-glow);

    --font-sans: "Sora", "Space Grotesk", "Syne", "Noto Sans", sans-serif;
    --font-mono: "IBM Plex Mono", "JetBrains Mono", "Source Code Pro", monospace;

    --term-background: #10141a;
    --term-foreground: #e9eef4;
    --term-black: #3f4650;
    --term-red: #de6b6b;
    --term-green: #62c98d;
    --term-yellow: #d6ad5f;
    --term-blue: #6ba5e7;
    --term-magenta: #ad88cf;
    --term-cyan: #63b9c7;
    --term-white: #d7dde5;
    --term-bright-black: #68717e;
    --term-bright-red: #ed8b8b;
    --term-bright-green: #85d9a9;
    --term-bright-yellow: #e7c77f;
    --term-bright-blue: #8dbcef;
    --term-bright-magenta: #c5a5df;
    --term-bright-cyan: #86cbd6;
    --term-bright-white: #ffffff;

    --theme-background-image: none;
    --theme-background-opacity: 0;
    --theme-surface-shell: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    --theme-surface-modal: color-mix(in srgb, var(--bg-modal) 84%, transparent);
    --theme-surface-card: color-mix(in srgb, var(--bg-secondary) 80%, transparent);

    --touch-target-min: 44px;
    --font-size-mobile: 12px;
    --font-size-tablet: 13px;
    --font-size-desktop: 14px;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-gradient);
    color: var(--text-primary);
    overflow: hidden;
    overflow-x: hidden !important;
    height: 100vh;
    height: 100dvh; 
    display: flex;
    flex-direction: column;
    overscroll-behavior: none;
    width: 100vw;
    max-width: 100vw;
    position: relative;
    isolation: isolate;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--theme-background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: var(--theme-background-opacity);
}

html {
    overflow: hidden;
    overflow-x: hidden !important;
    overscroll-behavior: none;
    width: 100vw;
    max-width: 100vw;
}

@media (max-width: 767px) {
    html {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
    }

    body {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

body[data-theme="glass"] {
    --theme-background-image: url("../images/theme-backgrounds/carbon-glass.png");
    --theme-background-opacity: 0.07;
}

body[data-theme="retro"] {
    --bg-primary: #0c0b09;
    --bg-secondary: #14110d;
    --bg-tertiary: #1b1711;
    --bg-hover: #292116;
    --bg-modal: rgba(16, 13, 10, 0.97);
    --bg-gradient: linear-gradient(145deg, #0c0b09 0%, #18120b 100%);
    --bg-active: rgba(227, 162, 59, 0.15);
    --text-primary: #f2eadf;
    --text-secondary: #bfb2a0;
    --text-muted: #928675;
    --border-color: rgba(227, 162, 59, 0.16);
    --border-hover: rgba(227, 162, 59, 0.3);
    --accent-primary: #e3a23b;
    --accent-primary-glow: rgba(227, 162, 59, 0.24);
    --accent-secondary: #a97945;
    --accent-tertiary: #7abf9b;
    --success-color: #61c98b;
    --warning-color: #e0ae4b;
    --error-color: #de6b61;
    --btn-primary-gradient-end: #b77824;
    --btn-primary-text: #000000;
    --btn-primary-shadow: rgba(227, 162, 59, 0.24);
    --btn-primary-shadow-hover: rgba(227, 162, 59, 0.36);
    --accent-on-text: #000000;
    --term-background: #100d09;
    --term-foreground: #eee4d6;
    --term-yellow: #dca144;
    --term-bright-yellow: #efbd65;
    --theme-background-image: url("../images/theme-backgrounds/retro-amber.png");
    --theme-background-opacity: 0.16;
}

body[data-theme="solar"] {
    --bg-primary: #07111f;
    --bg-secondary: #0c1726;
    --bg-tertiary: #122033;
    --bg-hover: #1a2b41;
    --bg-modal: rgba(8, 18, 31, 0.97);
    --bg-gradient: linear-gradient(145deg, #07111f 0%, #0b1a2d 100%);
    --bg-active: rgba(79, 143, 232, 0.14);
    --text-primary: #edf4fb;
    --text-secondary: #b4c0cf;
    --text-muted: #8392a6;
    --border-color: rgba(118, 162, 213, 0.16);
    --border-hover: rgba(118, 162, 213, 0.3);
    --accent-primary: #4f8fe8;
    --accent-primary-glow: rgba(79, 143, 232, 0.24);
    --accent-secondary: #7aa7d9;
    --accent-tertiary: #6ec6b0;
    --success-color: #65c49c;
    --warning-color: #d9aa52;
    --error-color: #df6d6d;
    --btn-primary-gradient-end: #326dbd;
    --btn-primary-shadow: rgba(79, 143, 232, 0.24);
    --btn-primary-shadow-hover: rgba(79, 143, 232, 0.36);
    --term-background: #0a1422;
    --term-foreground: #e8f0f8;
    --term-blue: #65a0ed;
    --term-bright-blue: #8ab9f3;
    --theme-background-image: url("../images/theme-backgrounds/navy-topography.png");
    --theme-background-opacity: 0.065;
}

body[data-theme="paper"] {
    --bg-primary: #dce5ee;
    --bg-secondary: #e3eaf2;
    --bg-tertiary: #d4dfe9;
    --bg-hover: #c5d3df;
    --bg-modal: rgba(229, 236, 244, 0.97);
    --bg-gradient: linear-gradient(145deg, #e4ebf2 0%, #d4e0ea 100%);
    --bg-active: rgba(36, 95, 158, 0.14);
    --text-primary: #15283a;
    --text-secondary: #3e5368;
    --text-muted: #52677b;
    --border-color: #afc1d2;
    --border-hover: #8fa8bd;
    --accent-primary: #245f9e;
    --accent-primary-glow: rgba(36, 95, 158, 0.24);
    --accent-secondary: #557aa0;
    --accent-tertiary: #3f8b68;
    --success-color: #287a50;
    --warning-color: #8a6400;
    --error-color: #b43f3f;
    --btn-primary-gradient-end: #194b80;
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: rgba(36, 95, 158, 0.22);
    --btn-primary-shadow-hover: rgba(36, 95, 158, 0.34);
    --shadow-sm: 0 1px 3px rgba(45, 38, 33, 0.08);
    --shadow-md: 0 4px 12px rgba(45, 38, 33, 0.1);
    --shadow-lg: 0 8px 24px rgba(45, 38, 33, 0.12);
    --term-background: #e7edf3;
    --term-foreground: #17293b;
    --term-black: #26313d;
    --term-red: #a83e3e;
    --term-green: #2f754e;
    --term-yellow: #806000;
    --term-blue: #315f9f;
    --term-magenta: #76518f;
    --term-cyan: #26727a;
    --term-white: #7a8490;
    --term-bright-black: #53606d;
    --term-bright-red: #c34d4d;
    --term-bright-green: #3e9161;
    --term-bright-yellow: #9b7600;
    --term-bright-blue: #3b76c5;
    --term-bright-magenta: #9165ab;
    --term-bright-cyan: #328b94;
    --term-bright-white: #15283a;
    --theme-background-image: url("../images/theme-backgrounds/paper-blueprint.png");
    --theme-background-opacity: 0.18;
    --theme-surface-shell: color-mix(in srgb, var(--bg-secondary) 62%, transparent);
    --theme-surface-modal: color-mix(in srgb, var(--bg-modal) 68%, transparent);
    --theme-surface-card: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
}

body[data-theme="noir"] {
    --bg-primary: #080a0f;
    --bg-secondary: #0f1219;
    --bg-tertiary: #151a24;
    --bg-hover: #202735;
    --bg-modal: rgba(9, 11, 16, 0.97);
    --bg-gradient: linear-gradient(145deg, #080a0f 0%, #101525 100%);
    --bg-active: rgba(122, 134, 217, 0.14);
    --text-primary: #edf0f7;
    --text-secondary: #aab2c2;
    --text-muted: #838da1;
    --border-color: rgba(130, 145, 180, 0.15);
    --border-hover: rgba(130, 145, 180, 0.28);
    --accent-primary: #7a86d9;
    --accent-primary-glow: rgba(122, 134, 217, 0.24);
    --accent-secondary: #8693a8;
    --accent-tertiary: #68baa8;
    --success-color: #62bf96;
    --warning-color: #d1a45d;
    --error-color: #d86d79;
    --btn-primary-gradient-end: #5b65ad;
    --btn-primary-shadow: rgba(122, 134, 217, 0.22);
    --btn-primary-shadow-hover: rgba(122, 134, 217, 0.34);

    --term-background: #111620;
    --term-foreground: #eff3fc;
    --term-black: #1c2433;
    --term-red: #ff8fa3;
    --term-green: #4de6c4;
    --term-yellow: #ffc769;
    --term-blue: #7f91ff;
    --term-magenta: #c792ff;
    --term-cyan: #70e0ff;
    --term-white: #d4dce8;
    --term-bright-black: #3e4a5f;
    --term-bright-red: #ffaab8;
    --term-bright-green: #70f0d4;
    --term-bright-yellow: #ffd999;
    --term-bright-blue: #a0b3ff;
    --term-bright-magenta: #deaeff;
    --term-bright-cyan: #a0f0ff;
    --term-bright-white: #ffffff;
    --theme-background-image: url("../images/theme-backgrounds/noir-architecture.png");
    --theme-background-opacity: 0.06;
}

body[data-theme="arctic-ice"] {
    --bg-primary: #091012;
    --bg-secondary: #10191c;
    --bg-tertiary: #172327;
    --bg-hover: #203136;
    --bg-modal: rgba(10, 17, 19, 0.97);
    --bg-gradient: linear-gradient(145deg, #091012 0%, #122126 100%);
    --bg-active: rgba(72, 163, 177, 0.14);
    --text-primary: #edf4f5;
    --text-secondary: #adc0c4;
    --text-muted: #80969b;
    --border-color: rgba(111, 160, 170, 0.16);
    --border-hover: rgba(111, 160, 170, 0.3);
    --accent-primary: #48a3b1;
    --accent-primary-glow: rgba(72, 163, 177, 0.23);
    --accent-secondary: #829da4;
    --accent-tertiary: #78b89c;
    --success-color: #69bd93;
    --warning-color: #d4ad61;
    --error-color: #db7376;
    --btn-primary-gradient-end: #347a85;
    --btn-primary-shadow: rgba(72, 163, 177, 0.22);
    --btn-primary-shadow-hover: rgba(72, 163, 177, 0.34);
    --accent-on-text: #000000;

    --term-background: #14252c;
    --term-foreground: #ecf8fb;
    --term-black: #1c2d36;
    --term-red: #ff99ad;
    --term-green: #4de6c4;
    --term-yellow: #f5dba8;
    --term-blue: #70d0ff;
    --term-magenta: #c0b0ff;
    --term-cyan: #06b6d4;
    --term-white: #d4e8ed;
    --term-bright-black: #3d5460;
    --term-bright-red: #ffb3c2;
    --term-bright-green: #70f0d4;
    --term-bright-yellow: #fde68a;
    --term-bright-blue: #a0e8ff;
    --term-bright-magenta: #dac8ff;
    --term-bright-cyan: #56d8f0;
    --term-bright-white: #ffffff;
    --theme-background-image: url("../images/theme-backgrounds/arctic-frost.png");
    --theme-background-opacity: 0.07;
}

body[data-theme="rose-gold"] {
    --bg-primary: #100d0f;
    --bg-secondary: #171216;
    --bg-tertiary: #20191d;
    --bg-hover: #2b2227;
    --bg-modal: rgba(17, 13, 16, 0.97);
    --bg-gradient: linear-gradient(145deg, #100d0f 0%, #20171c 100%);
    --bg-active: rgba(200, 117, 139, 0.14);
    --text-primary: #f3edef;
    --text-secondary: #c3b2b8;
    --text-muted: #99838b;
    --border-color: rgba(195, 134, 151, 0.16);
    --border-hover: rgba(195, 134, 151, 0.29);
    --accent-primary: #c8758b;
    --accent-primary-glow: rgba(200, 117, 139, 0.23);
    --accent-secondary: #b69575;
    --accent-tertiary: #6fae9b;
    --success-color: #65b692;
    --warning-color: #d0a15f;
    --error-color: #d66d72;
    --btn-primary-gradient-end: #9d5367;
    --btn-primary-shadow: rgba(200, 117, 139, 0.22);
    --btn-primary-shadow-hover: rgba(200, 117, 139, 0.34);

    --term-background: #2c1320;
    --term-foreground: #fff2f6;
    --term-black: #3a1f2b;
    --term-red: #ff6b81;
    --term-green: #5eead4;
    --term-yellow: #fbbf24;
    --term-blue: #ff8fa3;
    --term-magenta: #f49ac2;
    --term-cyan: #7ee0c4;
    --term-white: #f0d4dc;
    --term-bright-black: #5c3a48;
    --term-bright-red: #ff8fa3;
    --term-bright-green: #80ffe0;
    --term-bright-yellow: #ffd366;
    --term-bright-blue: #ffaab8;
    --term-bright-magenta: #ffb8d4;
    --term-bright-cyan: #a0f0dc;
    --term-bright-white: #ffffff;
    --theme-background-image: url("../images/theme-backgrounds/rose-brushed-metal.png");
    --theme-background-opacity: 0.06;
}

body[data-theme="cyberpunk-neon"] {
    --bg-primary: #080a12;
    --bg-secondary: #0e111c;
    --bg-tertiary: #151a28;
    --bg-hover: #22283a;
    --bg-modal: rgba(9, 11, 19, 0.97);
    --bg-gradient: linear-gradient(145deg, #080a12 0%, #141027 100%);
    --bg-active: rgba(208, 93, 221, 0.16);
    --text-primary: #f1edf5;
    --text-secondary: #beb4ca;
    --text-muted: #8c91a7;
    --border-color: rgba(149, 111, 180, 0.18);
    --border-hover: rgba(149, 111, 180, 0.34);
    --accent-primary: #d05ddd;
    --accent-primary-glow: rgba(208, 93, 221, 0.27);
    --accent-secondary: #4cbdd5;
    --accent-tertiary: #8bcf78;
    --success-color: #6fc491;
    --warning-color: #d7a84b;
    --error-color: #e05f75;
    --btn-primary-gradient-end: #9f3ead;
    --btn-primary-shadow: rgba(208, 93, 221, 0.25);
    --btn-primary-shadow-hover: rgba(208, 93, 221, 0.38);
    --accent-on-text: #000000;
    --term-background: #0d101a;
    --term-foreground: #fbf3ff;
    --term-black: #2a1c38;
    --term-red: #ff3366;
    --term-green: #b8ff57;
    --term-yellow: #ffba00;
    --term-blue: #5588ff;
    --term-magenta: #d946ef;
    --term-cyan: #00e5ff;
    --term-white: #e8d4f5;
    --term-bright-black: #4d3a5f;
    --term-bright-red: #ff5580;
    --term-bright-green: #d4ff80;
    --term-bright-yellow: #ffd433;
    --term-bright-blue: #77a3ff;
    --term-bright-magenta: #f070ff;
    --term-bright-cyan: #33f5ff;
    --term-bright-white: #ffffff;
    --theme-background-image: url("../images/theme-backgrounds/neon-circuit.png");
    --theme-background-opacity: 0.14;
}

body[data-theme="emerald-matrix"] {
    --bg-primary: #050806;
    --bg-secondary: #090d0a;
    --bg-tertiary: #0e140f;
    --bg-hover: #172019;
    --bg-modal: rgba(6, 9, 7, 0.97);
    --bg-gradient: linear-gradient(145deg, #050806 0%, #09120b 100%);
    --bg-active: rgba(69, 216, 111, 0.15);
    --text-primary: #ecf5ee;
    --text-secondary: #abc4b1;
    --text-muted: #789782;
    --border-color: rgba(74, 173, 101, 0.18);
    --border-hover: rgba(74, 173, 101, 0.34);
    --accent-primary: #45d86f;
    --accent-primary-glow: rgba(69, 216, 111, 0.25);
    --accent-secondary: #5aa2d6;
    --accent-tertiary: #d0a94f;
    --success-color: #5ad3b0;
    --warning-color: #d0a94f;
    --error-color: #dd6868;
    --btn-primary-gradient-end: #2aa951;
    --btn-primary-text: #000000;
    --btn-primary-shadow: rgba(69, 216, 111, 0.23);
    --btn-primary-shadow-hover: rgba(69, 216, 111, 0.36);
    --accent-on-text: #000000;
    --term-background: #070b08;
    --term-foreground: #e8f3ea;
    --term-black: #1a2a26;
    --term-red: #ff8875;
    --term-green: #10b981;
    --term-yellow: #f59e0b;
    --term-blue: #06b6d4;
    --term-magenta: #4de6c4;
    --term-cyan: #34d399;
    --term-white: #c4e8d4;
    --term-bright-black: #2d4a42;
    --term-bright-red: #ffab9a;
    --term-bright-green: #34d399;
    --term-bright-yellow: #fbbf24;
    --term-bright-blue: #56d8f0;
    --term-bright-magenta: #70f0d4;
    --term-bright-cyan: #6ee7b7;
    --term-bright-white: #ffffff;
    --theme-background-image: url("../images/theme-backgrounds/matrix-signal.png");
    --theme-background-opacity: 0.18;
}

body[data-theme="obsidian"] {
    --bg-primary: #08090b;
    --bg-secondary: #101114;
    --bg-tertiary: #181a1e;
    --bg-hover: #24272c;
    --bg-modal: rgba(9, 10, 12, 0.98);
    --bg-gradient: linear-gradient(145deg, #08090b 0%, #141619 100%);
    --bg-active: rgba(205, 211, 218, 0.1);
    --text-primary: #edf0f2;
    --text-secondary: #afb5bc;
    --text-muted: #858b94;
    --border-color: rgba(205, 211, 218, 0.13);
    --border-hover: rgba(205, 211, 218, 0.24);
    --accent-primary: #cdd3da;
    --accent-primary-glow: rgba(205, 211, 218, 0.2);
    --accent-secondary: #7b8794;
    --accent-tertiary: #d1a24d;
    --success-color: #60bd8c;
    --warning-color: #d1a24d;
    --error-color: #d76565;
    --btn-primary-gradient-end: #a9b0b8;
    --btn-primary-text: #000000;
    --btn-primary-shadow: rgba(205, 211, 218, 0.16);
    --btn-primary-shadow-hover: rgba(205, 211, 218, 0.27);
    --accent-on-text: #000000;
    --term-background: #0a0b0d;
    --term-foreground: #edf0f2;
    --term-black: #1a1a1a;
    --term-red: #ff5555;
    --term-green: #10b981;
    --term-yellow: #f59e0b;
    --term-blue: #5588ff;
    --term-magenta: #d946ef;
    --term-cyan: #06b6d4;
    --term-white: #d0d0d0;
    --term-bright-black: #4d4d4d;
    --term-bright-red: #ff7777;
    --term-bright-green: #34d399;
    --term-bright-yellow: #fbbf24;
    --term-bright-blue: #77a3ff;
    --term-bright-magenta: #f070ff;
    --term-bright-cyan: #56d8f0;
    --term-bright-white: #ffffff;
    --theme-background-image: url("../images/theme-backgrounds/obsidian-glass.png");
    --theme-background-opacity: 0.055;
}

body:is([data-theme="glass"], [data-theme="solar"], [data-theme="paper"], [data-theme="noir"], [data-theme="arctic-ice"], [data-theme="rose-gold"], [data-theme="obsidian"]) .main-content,
body:is([data-theme="glass"], [data-theme="solar"], [data-theme="paper"], [data-theme="noir"], [data-theme="arctic-ice"], [data-theme="rose-gold"], [data-theme="obsidian"]) .terminal-pane {
    background-image: var(--theme-background-image);
    background-blend-mode: soft-light;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body:is([data-theme="retro"], [data-theme="cyberpunk-neon"], [data-theme="emerald-matrix"]) .main-content,
body:is([data-theme="retro"], [data-theme="cyberpunk-neon"], [data-theme="emerald-matrix"]) .terminal-pane {
    background-image: var(--theme-background-image);
    background-blend-mode: normal;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body[data-theme="paper"] .main-content,
body[data-theme="paper"] .terminal-pane {
    background-blend-mode: normal;
}

.header {
    background: var(--bg-secondary);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 16px;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 1000;
    overflow-x: visible; 
    overflow-y: visible; 
    width: 100%;
    max-width: 100vw;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

.header-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-menu-btn {
    display: none;
    margin-left: 12px;
}

.app-title {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    text-shadow: none;
}

.header-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
    overflow: visible; 
    position: relative; 
}

.header-buttons.is-open {
    display: flex;
}

.session-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-top: 10px;
    padding-bottom: 2px;
    max-width: 100%;
    min-width: 0;
}

.session-tabs::-webkit-scrollbar {
    height: 4px;
}

.session-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.session-tabs::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 2px;
}

.session-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

.session-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    position: relative;
}

.session-tab::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255,255,255,0.9);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.session-tab:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.session-tab.active {
    background: var(--bg-primary);
    border-bottom-color: var(--bg-primary);
    box-shadow: none;
}

.session-tab.disconnected {
    opacity: 0.65;
}

.session-tab.active::before {
    opacity: 1;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--warning-color);
    box-shadow: 0 0 8px rgba(243, 201, 105, 0.6);
}

.status-dot.connected {
    background: var(--success-color);
    box-shadow: 0 0 8px rgba(56, 217, 169, 0.6);
}

.status-dot.disconnected {
    background: var(--error-color);
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
}

.session-tab:has(.status-dot.connected) {
    border-left-color: var(--success-color, #3fb950);
}

.session-tab:has(.status-dot.disconnected) {
    border-left-color: var(--error-color, #f85149);
}

.status-dot.connecting {
    background: var(--warning-color);
    box-shadow: 0 0 8px rgba(243, 201, 105, 0.7);
}

.tab-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    user-select: none;
    cursor: default;
    min-width: 0;
}

.tab-host-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.tab-user-name {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.tab-display-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.tab-jump-badge {
    font-size: 11px;
    margin-left: 2px;
    opacity: 0.85;
    cursor: help;
}

.tab-tmux-badge {
    font-size: 11px;
    margin-left: 2px;
    opacity: 0.85;
    cursor: help;
}

.terminal-scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    z-index: 10;
    cursor: pointer;
}

.terminal-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 1px;
    width: 10px;
    min-height: 30px;
    background: rgba(255,255,255,0.35);
    border-radius: 5px;
    cursor: grab;
    transition: background 0.15s;
}

.terminal-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.55);
}

.terminal-scrollbar-thumb:active {
    cursor: grabbing;
    background: rgba(255,255,255,0.7);
}

.tab-label:hover {
    cursor: text;
}

.tab-rename-input {
    background: var(--bg-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    padding: 2px 6px;
    width: 120px;
    max-width: 200px;
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}

.tab-rename-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.tab-edit {
    font-size: 14px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    user-select: none;
    opacity: 0.3;
    margin-left: auto;
}

.session-tab:hover .tab-edit {
    opacity: 1;
}

.tab-edit:hover {
    color: var(--accent-primary);
    background: var(--accent-primary-glow);
}

.tab-close {
    font-size: 16px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    user-select: none;
    opacity: 0.6;
    flex-shrink: 0;
}

.tab-close:hover {
    color: var(--error-color);
    background: rgba(248, 81, 73, 0.1);
    opacity: 1;
}

.tab-reconnect {
    font-size: 16px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    user-select: none;
    opacity: 0.4;
    flex-shrink: 0;
}

.session-tab:hover .tab-reconnect {
    opacity: 1;
}

.tab-reconnect:hover {
    color: var(--accent-primary);
    background: var(--accent-primary-glow);
    opacity: 1;
}

.session-tabs-row {
    display: flex;
    align-items: flex-end;
    min-width: 0;
    overflow: hidden;
    flex: 1;
    gap: 0;
}

.tab-row-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 0 6px 2px 10px;
    border-left: 1px solid var(--border-color);
    margin-left: 4px;
}

.tab-row-actions .split-controls {
    display: flex;
    gap: 2px;
}

.tab-row-actions .split-btn {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    min-width: 28px;
    text-align: center;
}

.tab-row-actions .split-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.tab-row-actions .split-btn.active {
    background: var(--bg-active);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.tab-row-divider {
    width: 1px;
    height: 16px;
    background: var(--border-color);
    margin: 0 2px;
    flex-shrink: 0;
}

.tab-row-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.tab-row-icon-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tab-row-icon-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.tab-row-icon-btn.active {
    color: var(--accent-primary);
    background: var(--bg-active);
    border-color: var(--accent-primary);
}

.btn-new-tab {
    flex-shrink: 0;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    transition: all 0.2s ease;
    user-select: none;
}

.btn-new-tab:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    color: var(--accent-primary);
}

/* Session-bar: desktop shows only mobile-input (hidden on desktop since it's mobile-only) */
@media (min-width: 768px) {
    .session-bar {
        display: none !important;
    }
}

/* On mobile: tab-row-actions wraps below tabs */
@media (max-width: 767px) {
    .session-tabs-row {
        flex-wrap: wrap;
        overflow: visible;
    }
    .session-tabs {
        flex: 1;
        min-width: 0;
    }
    .tab-row-actions {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-color);
        margin-left: 0;
        padding: 6px 4px 4px;
        justify-content: flex-start;
        gap: 6px;
    }
}

.main-content {
    flex: 1;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
    background: var(--bg-primary);
    z-index: 1; 
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: 100vw;
    isolation: isolate; 
}

.session-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    min-width: 0;
    flex-wrap: wrap;
    max-width: 100%;
    overflow-x: hidden;
}

.session-bar.hidden {
    display: none;
}

.session-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
}

.session-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mobile-input-bar {
    display: none;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.mobile-input-bar input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-mono);
    outline: none;
    transition: border-color 0.2s;
}

.mobile-input-bar input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}

.mobile-input-bar input::placeholder {
    color: var(--text-muted);
}

.mobile-send-btn {
    padding: 8px 12px !important;
    min-width: 40px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-send-btn .material-icons {
    font-size: 18px;
}

.split-controls {
    display: inline-flex;
    gap: 6px;
}

.split-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 13px;
    border-radius: 8px;
    color: var(--text-secondary);
}

.split-btn.active {
    color: var(--text-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}

.toolbar-btn {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.toolbar-btn::before {
    display: none;
}

.toolbar-btn:hover {
    color: var(--accent-primary);
    border-color: var(--border-hover);
}

.toolbar-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.toolbar-btn:hover .toolbar-icon {
    stroke: currentColor;
}

/* Broadcast-input: active toggle + clear marking of every target pane */
.toolbar-btn.active {
    color: var(--accent-on-text);
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toolbar-btn.active .toolbar-icon {
    stroke: currentColor;
}

body.broadcast-active .terminal-wrapper:not(.unassigned) {
    box-shadow: inset 0 0 0 2px var(--accent-primary), 0 0 16px var(--accent-primary-glow);
    border-radius: 6px;
}

.broadcast-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.broadcast-toggle.active {
    color: var(--accent-on-text);
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.broadcast-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 0 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-primary);
    border-left: 3px solid var(--accent-primary);
    border-radius: 8px;
    box-shadow: 0 0 16px var(--accent-primary-glow);
}

.broadcast-bar.hidden {
    display: none;
}

.broadcast-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.broadcast-bar-icon {
    font-size: 16px;
}

.broadcast-input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 14px;
}

.broadcast-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.broadcast-close {
    min-width: 38px;
    padding: 8px 12px;
    font-size: 18px;
    line-height: 1;
}

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

.session-meta-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-meta-notes {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 520px;
    word-break: break-word;
    overflow: hidden;
}

.session-meta-notes.empty {
    color: var(--text-muted);
}

.session-via {
    color: var(--accent-primary);
    font-weight: 600;
}

.drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 26, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    border: 2px dashed var(--accent-primary);
}

.drop-overlay-content {
    text-align: center;
    padding: 24px 32px;
    border-radius: 16px;
    background: rgba(23, 27, 34, 0.9);
    box-shadow: var(--shadow-lg);
}

.drop-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.drop-subtitle {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.session-overlay {
    position: absolute;
    inset: 0;
    background: rgba(12, 14, 20, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.session-overlay.hidden {
    display: none;
}

.session-overlay-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 20px 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.session-overlay-card h3 {
    margin-bottom: 8px;
    font-size: 16px;
    color: var(--text-primary);
}

.session-overlay-card p {
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.terminals-container {
    width: 100%;
    height: 100%;
    position: relative;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    overflow-x: hidden !important;
    max-width: 100%;
}

.terminal-search-bar {
    position: absolute;
    top: 16px;
    right: 32px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.terminal-search-bar.hidden {
    display: none;
}

.terminal-search-bar input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 6px 10px;
    width: 200px;
    outline: none;
}

.terminal-search-bar input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}

.terminal-search-bar .search-count {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 70px;
    text-align: center;
}

.terminal-search-bar .search-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    transition: all 0.15s ease;
}

.terminal-search-bar .search-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.terminal-search-bar .search-close {
    color: var(--text-muted);
}

.terminal-search-bar .search-close:hover {
    color: var(--danger-color, #f85149);
}

.workspace {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--notepad-width, clamp(240px, 24vw, 320px));
    min-height: 0;
    overflow: hidden;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

.terminal-area {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    overflow-x: hidden !important;
    width: 100%;
}

.resize-handle {
    width: 0;
    cursor: col-resize;
    background: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--notepad-width, clamp(240px, 24vw, 320px));
    user-select: none;
    z-index: 10;
    transition: background 0.2s ease;
    overflow: visible;
}

.resize-handle:hover {
    background: var(--accent-primary-glow);
}

.resize-handle:active {
    background: var(--accent-primary-glow);
}

.resize-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    width: 12px;
    cursor: col-resize;
    background: transparent;
}

.resize-handle-line {
    width: 2px;
    height: 40px;
    background: var(--border-color);
    border-radius: 2px;
    transition: all 0.2s ease;
    position: absolute;
    top: 50%;
    left: -1px;
    transform: translateY(-50%);
}

.resize-handle:hover .resize-handle-line {
    background: var(--accent-primary);
    height: 60px;
}

.resize-handle:active .resize-handle-line {
    background: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-primary-glow);
}

.notepad-panel {
    border-left: 1px solid var(--border-color);
    background: var(--bg-secondary);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    min-width: 180px;
    overflow: hidden;
    max-width: 100%;
}

.notepad-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.notepad-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.notepad-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.notepad-save-status {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.notepad-save-status.saving {
    opacity: 1;
    color: var(--text-muted);
}

.notepad-save-status.saved {
    opacity: 1;
    color: var(--success-color, #4caf50);
}

.notepad-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.notepad-input {
    flex: 1;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    resize: none;
    outline: none;
    min-width: 0;
    overflow-x: hidden;
}

.notepad-input:disabled {
    color: var(--text-muted);
}

.terminal-grid {
    height: 100%;
    display: grid;
    gap: 12px;
    padding: 16px;
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow-x: hidden !important;
    overflow-y: hidden;
}

.terminal-grid.split-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.terminal-grid.split-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.terminal-grid.split-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.terminal-pane {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-tertiary);
    overflow: hidden;
    overflow-x: hidden !important;
    overflow-y: hidden;
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    width: 100%;
    padding: 8px;
}

.terminal-pane .xterm {
    flex: 1;
    padding: 0;
    background-color: var(--term-background);
}

.terminal-pane .xterm-viewport {
    background-color: var(--term-background);
}

.terminal-pane.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}

.session-command-launcher {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 60;
}

.session-command-trigger {
    min-height: 36px;
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--accent-primary);
    border-radius: 0 9px 0 10px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 600 12px/1 var(--font-sans);
    cursor: pointer;
    opacity: 0.62;
    box-shadow: -4px 4px 14px rgba(0, 0, 0, 0.2);
    transition: opacity 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.session-command-trigger .material-icons {
    font-size: 17px;
}

.session-command-trigger:hover,
.session-command-trigger:focus-visible,
.session-command-trigger[aria-expanded="true"] {
    opacity: 1;
    background: var(--bg-secondary);
    box-shadow: -5px 5px 18px rgba(0, 0, 0, 0.38);
}

.session-command-trigger:focus-visible,
.session-command-close:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.session-command-popover {
    position: absolute;
    top: 43px;
    right: 0;
    width: min(560px, calc(100vw - 64px));
    max-height: min(660px, calc(100vh - 190px));
    border: 1px solid var(--border-hover);
    border-radius: 12px 0 12px 12px;
    background: color-mix(in srgb, var(--bg-modal) 96%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(88, 166, 255, 0.08);
    backdrop-filter: blur(18px);
}

.session-command-popover-header {
    padding: 16px 16px 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.session-command-popover-header h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.session-command-popover-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.session-command-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.session-command-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.session-command-close .material-icons {
    font-size: 19px;
}

.session-command-search {
    margin: 0 16px 12px;
    width: calc(100% - 32px);
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: 13px/1.4 var(--font-sans);
}

.session-command-search:focus {
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}

.session-command-sudo-option {
    margin: 0 16px 12px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 12px/1.3 var(--font-sans);
    cursor: pointer;
}

.session-command-sudo-option:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}

.session-command-sudo-option input {
    margin: 0;
    accent-color: var(--accent-primary);
}

.session-command-results {
    min-height: 110px;
    overflow-y: auto;
    padding: 0 8px 10px;
}

.session-command-group h4 {
    margin: 4px 8px 7px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.session-command-group + .session-command-group {
    margin-top: 12px;
}

.session-command-item {
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.session-command-item:hover {
    border-color: var(--border-color);
    background: var(--bg-hover);
}

.session-command-item.unavailable {
    opacity: 0.62;
}

.session-command-item-details {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.session-command-item-details strong,
.session-command-item-details span,
.session-command-item-details code,
.session-command-item-details small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-command-item-details strong {
    font-size: 13px;
}

.session-command-item-details span,
.session-command-item-details small {
    color: var(--text-secondary);
    font-size: 11px;
}

.session-command-item-details code {
    color: var(--accent-tertiary);
    font: 11px/1.4 var(--font-mono);
}

.session-command-empty {
    padding: 30px 16px;
    color: var(--text-secondary);
    text-align: center;
}

.session-command-popover-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--text-secondary);
    font-size: 11px;
}

@media (max-width: 767px) {
    .session-command-trigger {
        min-height: 40px;
    }

    .session-command-popover {
        width: calc(100vw - 34px);
        max-height: calc(100dvh - 150px);
    }

    .session-command-item {
        align-items: end;
    }

    .session-command-popover-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

.pane-empty {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    padding: 24px;
    text-align: center;
}

.pane-empty-icon {
    flex: 0 0 auto;
    font-size: 42px;
    line-height: 1;
    opacity: 0.4;
}

.profile-launcher-title {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
}

.profile-launcher-hint {
    color: var(--text-secondary);
    font-size: 13px;
}

.profile-launcher-search,
.profile-launcher-sections {
    width: min(1120px, 100%);
}

.profile-launcher-search {
    flex: 0 0 auto;
}

.profile-launcher-sections {
    max-height: min(48vh, 420px);
    min-height: 0;
    padding: 4px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.profile-launcher-section + .profile-launcher-section {
    margin-top: 14px;
}

.profile-launcher-section-title,
.profile-management-section-title {
    margin: 0 0 7px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

.profile-launcher-list {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 10px;
}

.profile-launcher-card {
    position: relative;
    min-width: 0;
    min-height: var(--touch-target-min);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.profile-launcher-card:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.profile-launcher-card:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.profile-launcher-name,
.profile-launcher-endpoint {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-launcher-name {
    font-weight: 700;
}

.profile-launcher-favorite {
    position: absolute;
    top: 5px;
    left: 5px;
    color: var(--warning-color);
    font-size: 16px;
}

.profile-launcher-card.is-favorite {
    padding-left: 34px;
}

.profile-launcher-endpoint {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
}

.profile-launcher-action {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--text-secondary);
    font-size: 11px;
    white-space: nowrap;
}

.profile-launcher-action.mode-connect {
    color: var(--success-color);
}

.profile-launcher-action.mode-password,
.profile-launcher-action.mode-jump-host-password {
    color: var(--warning-color);
}

.profile-launcher-new {
    flex: 0 0 auto;
    margin-top: 2px;
}

@media (max-width: 767px) {
    .profile-launcher {
        justify-content: flex-start;
        padding: 18px 12px;
        overflow: hidden;
    }

    .profile-launcher-list {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .profile-launcher-search,
    .profile-launcher-sections {
        width: 100%;
    }

    .profile-launcher-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }

    .profile-launcher-action {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
}

.terminal-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    animation: fadeIn 0.3s ease;
    position: relative;
    overflow: hidden;
    overflow-x: hidden !important;
    overflow-y: hidden;
    min-width: 0;
    max-width: 100%;
}

.terminal-wrapper.unassigned {
    display: none;
}

.xterm-char-measure-element,
.xterm .xterm-char-measure-element {
    position: absolute !important;
    visibility: hidden !important;
    opacity: 0 !important;
    left: -9999px !important;
    top: 0 !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap; 
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--btn-primary-gradient-end) 100%);
    color: var(--btn-primary-text);
    box-shadow: 0 4px 12px var(--btn-primary-shadow);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--btn-primary-shadow-hover);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, var(--error-color) 0%, var(--btn-danger-gradient-end) 100%);
    color: var(--btn-danger-text);
    box-shadow: 0 4px 12px var(--error-glow);
}

.btn-danger:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--error-glow);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.modal {
    display: none;
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 9000; 
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 32px);
    animation: modalFadeIn 0.3s ease;
}

.modal.show {
    display: flex;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: var(--bg-modal);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: min(100%, 720px);
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Centered dialog size variants ── */
.modal-wide .modal-content {
    width: min(100%, 900px);
}

.modal-large .modal-content {
    width: min(100%, 1100px);
    height: min(90vh, 900px);
    height: min(90dvh, 900px);
}

.modal-xlarge .modal-content {
    width: min(100%, 1400px);
    height: min(90vh, 900px);
    height: min(90dvh, 900px);
}

.modal-small .modal-content,
.modal-content.modal-small {
    width: min(100%, 440px);
}

.ssh-auth-banner-modal {
    z-index: 9200;
}

.ssh-auth-banner-modal .modal-content {
    width: min(100%, 680px);
}

.ssh-auth-banner-body {
    display: grid;
    gap: 14px;
}

.ssh-auth-banner-body > p {
    margin: 0;
}

.ssh-auth-banner-target {
    color: var(--text-secondary);
    font-size: 13px;
}

.ssh-auth-banner-text {
    min-height: 140px;
    max-height: min(42vh, 360px);
    margin: 0;
    padding: 14px;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: 13px/1.55 var(--font-mono, monospace);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ssh-auth-banner-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.palette-list,
.shortcuts-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.palette-item {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font: inherit;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.palette-item.active,
.palette-item:hover,
.palette-item:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
    outline: none;
}

.palette-section-title {
    padding: 6px 4px 0;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.palette-item-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.palette-item-label,
.palette-item-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette-item-label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.palette-item-description,
.palette-item-hint {
    color: var(--text-secondary);
    font-size: 12px;
}

.palette-item-hint {
    flex: 0 0 auto;
    max-width: 40%;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--bg-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette-item-hint:empty {
    display: none;
}

.palette-empty {
    padding: 20px 12px;
    color: var(--text-secondary);
    text-align: center;
}

.shortcut-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    font-size: 13px;
}

.shortcut-row strong {
    color: var(--text-primary);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.modal-header h2,
.modal-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.close {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    background: transparent;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
    padding: 4px;
    border-radius: 6px;
    user-select: none; 
}

.close:hover {
    color: var(--error-color);
    background: rgba(248, 81, 73, 0.1);
    transform: rotate(90deg);
}

.close:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    min-height: 0;
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.form-row .flex-1 {
    flex: 1;
}

.form-row .flex-2 {
    flex: 2;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    background: var(--bg-secondary);
    outline: none;
}

.form-control:hover:not(:focus) {
    border-color: var(--border-hover);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control.is-valid {
    border-color: rgba(61, 220, 132, 0.6);
    box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.12);
}

.form-control.is-invalid {
    border-color: rgba(255, 107, 107, 0.7);
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.12);
}

.field-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    min-height: 16px;
}

.field-hint.hint-error {
    color: var(--error-color);
}

.field-hint.hint-success {
    color: var(--success-color);
}

.input-wrapper.with-toggle {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper.with-toggle .form-control {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

.password-toggle.active {
    color: var(--accent-primary);
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    font-family: var(--font-mono);
    resize: vertical;
    min-height: 120px;
}

.recent-connections-list {
    display: grid;
    gap: 8px;
    grid-auto-rows: 42px;
    max-height: calc((5 * 42px) + (4 * 8px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.recent-connections-empty {
    margin: 0;
    padding: 16px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.recent-connection-item {
    width: 100%;
    height: 42px;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.recent-connection-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.recent-connection-item:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.recent-conn-label {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-conn-time {
    color: var(--text-muted);
    font-size: 11px;
}

.auth-type-selector {
    display: flex;
    gap: 24px;
}

.radio-label,
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.radio-label:hover,
.checkbox-label:hover {
    background: var(--bg-hover);
}

.radio-label input,
.checkbox-label input {
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.hidden {
    display: none !important;
}

.key-upload-section,
.keys-list-section {
    margin-bottom: 32px;
}

.manager-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.manager-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin-bottom: 20px;
}

.manager-card-header > .material-icons {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
    font-size: 20px;
}

.manager-card-header :is(h3, p) {
    margin: 0;
}

.manager-card-header p {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.connection-asset-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    align-items: start;
    gap: 18px;
}

.connection-asset-layout .manager-card {
    margin-bottom: 0;
}

.connection-asset-layout .keys-list {
    max-height: 440px;
}

.key-upload-section h3,
.keys-list-section h3,
.transfer-section h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
    padding-left: 12px;
    border-left: 3px solid var(--accent-primary);
}

.manager-card .manager-card-header h3 {
    margin: 0;
    padding-left: 0;
    border-left: 0;
}

.keys-list {
    max-height: 320px;
    overflow-y: auto;
}

.key-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.key-item:hover {
    border-color: var(--border-hover);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.key-item.replacing {
    flex-wrap: wrap;
}

.key-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.key-info strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.key-type,
.key-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.key-type {
    display: inline-block;
    padding: 2px 8px;
    background: var(--accent-primary-glow);
    border-radius: 4px;
    color: var(--accent-primary);
    font-weight: 600;
}

.profile-inline-key {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    margin-top: 10px;
}

.profile-inline-key-panel {
    width: 100%;
    padding: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.profile-inline-key-panel textarea {
    width: 100%;
    resize: vertical;
}

.profile-inline-key-actions,
.key-item-actions,
.key-rename-editor {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.profile-inline-key-actions {
    justify-content: flex-end;
}

.key-rename-editor .form-control {
    min-width: 0;
}

.key-replace-editor {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.key-replace-editor textarea {
    width: 100%;
    resize: vertical;
    font-family: var(--font-mono, monospace);
}

.key-replace-warning {
    margin: 0;
    color: var(--warning-color, #f3c969);
    line-height: 1.5;
}

.key-replace-status {
    min-height: 1.25em;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.key-replace-status.error {
    color: var(--error-color, #e57373);
}

.profile-inline-key-status {
    min-height: 1.25em;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.profile-inline-key-status.error {
    color: var(--error-color, #e57373);
}

@media (max-width: 375px) {
    .key-item {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        transform: none;
    }

    .key-item:hover {
        transform: none;
    }

    .key-item-actions,
    .profile-inline-key-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .key-replace-editor {
        width: 100%;
    }

    .key-item-actions .btn,
    .profile-inline-key-actions .btn,
    .profile-inline-key > .btn {
        width: 100%;
        min-height: 44px;
    }
}

.no-items {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 20px;
    font-size: 14px;
}

.transfer-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-color);
}

.transfer-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.progress-container {
    margin-top: 16px;
}

.progress-bar {
    width: 100%;
    height: 28px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
    box-shadow: 0 0 20px var(--accent-primary-glow);
}

.progress-text {
    text-align: center;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.notification-container {
    position: fixed; 
    top: 24px;
    right: 24px;
    z-index: 17000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; 
}

.notification {
    pointer-events: auto; 
    padding: 16px 20px;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    max-width: 380px;
    font-size: 14px;
    font-weight: 500;
    animation: notificationSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.notification-info {
    background: var(--accent-primary);
    color: var(--accent-on-text);
    box-shadow: 0 4px 20px var(--accent-primary-glow);
}

.notification-success {
    background: linear-gradient(135deg, var(--success-color) 0%, color-mix(in srgb, var(--success-color) 80%, black) 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 20px var(--success-glow);
}

.notification-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, color-mix(in srgb, var(--warning-color) 80%, black) 100%);
    color: #000;
    box-shadow: 0 4px 20px var(--warning-glow);
}

.notification-error {
    background: linear-gradient(135deg, var(--error-color) 0%, color-mix(in srgb, var(--error-color) 80%, black) 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 20px var(--error-glow);
}

.notification.fade-out {
    animation: notificationSlideOut 0.3s ease;
}

@keyframes notificationSlideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes notificationSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

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

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 6px;
    border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.lang-option:focus-visible,
.theme-option:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}

.btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.98);
    transition: transform 0.1s;
}

.session-tab:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    z-index: 10;
}

.fm-file-item:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.btn.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

@media (max-width: 768px) {

    .header {
        position: sticky;
        top: 0;
        padding: 12px 16px;
        padding-top: max(12px, env(safe-area-inset-top));
        overflow: visible;
        z-index: 1000;
    }

    .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        overflow: visible;
        margin-bottom: 8px;
    }

    .header-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        font-size: 20px;
    }

    .header-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        display: none;
        gap: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
        margin-top: 8px;
        overflow: visible;
    }

    .header-buttons.is-open {
        display: flex;
    }

    .header-buttons .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .theme-selector,
    .language-selector,
    .account-selector {
        width: 100%;
    }

    .header-group {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .header-divider {
        display: none;
    }

    .theme-dropdown-header,
    .lang-dropdown-header,
    .account-dropdown-header {
        position: fixed;
        left: 16px;
        right: 16px;
        width: auto;
        max-height: 50vh;
        overflow-y: auto;
    }

    /* Keep the Theme/Language sub-menus inline inside the (fixed) account menu */
    .account-dropdown-header .theme-dropdown-header,
    .account-dropdown-header .lang-dropdown-header {
        position: static;
        left: auto;
        right: auto;
        max-height: none;
        overflow-y: visible;
    }

    .session-tabs {
        padding: 8px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: flex;
        gap: 6px;
    }

    .session-tabs::-webkit-scrollbar {
        display: none;
    }

    .session-tab {
        flex-shrink: 0;
        min-height: 40px;
    }

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

    .session-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 12px;
    }

    .session-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .session-toolbar {
        display: none;
    }

    .mobile-input-bar {
        display: flex;
    }

    .split-controls {
        display: none;
    }

    .workspace {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr auto;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .notepad-panel {
        display: flex;
        border-left: none;
        border-top: 1px solid var(--border-color);
        min-height: 200px;
        max-height: 300px;
    }

    .resize-handle {
        display: none;
    }

    .terminal-area {
        flex: 1;
        min-height: 300px;
        height: 100%;
    }

    .terminals-container {
        height: 100%;
    }

    .terminal-grid {
        padding: 8px;
        gap: 8px;
        height: 100%;
    }

    .terminal-grid.split-2,
    .terminal-grid.split-4 {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
    }

    .terminal-grid.split-2 .terminal-pane:not(:first-child),
    .terminal-grid.split-4 .terminal-pane:not(:first-child) {
        display: none;
    }

    .terminal-pane {
        height: 100%;
        min-height: 250px;
    }

    .btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 14px;
        touch-action: manipulation;
    }

    .toolbar-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .modal-content {
        width: 100%;
        max-width: none;
        margin: 0;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 12px;
    }

    .form-row {
        flex-direction: column;
        gap: 12px;
    }

    .form-group {
        width: 100%;
    }

    .form-control {
        min-height: 44px;
        font-size: 16px; 
    }

    .app-title {
        font-size: 18px;
    }

    .notification {
        left: 16px;
        right: 16px;
        max-width: none;
        width: auto;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 8px 12px;
        padding-top: max(8px, env(safe-area-inset-top));
    }

    .app-title {
        font-size: 16px;
    }

    .btn {
        padding: 12px 14px;
        font-size: 13px;
        min-height: 44px;
    }

    .modal {
        padding: 8px;
    }

    .modal-content {
        width: 100%;
        margin: 0;
        border-radius: 12px;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .modal-header {
        padding: 16px;
    }

    .modal-body {
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .terminal-grid {
        padding: 4px;
        gap: 4px;
    }

    .xterm {
        padding: 4px;
        border-radius: 6px;
    }

    .session-tab {
        padding: 7px 12px;
        font-size: 12px;
        min-height: 36px;
    }

    .header-buttons .btn {
        padding: 8px 14px;
        font-size: 12px;
    }

    .form-control {
        padding: 12px;
        font-size: 16px;
    }

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

body.keyboard-open:not(.notepad-focused) .notepad-panel {
    display: none;
}

body.keyboard-open .workspace {
    grid-template-rows: 1fr;
}

body.keyboard-open .header {
    display: none;
}

body.keyboard-open:not(.notepad-focused) .session-tabs,
body.keyboard-open:not(.notepad-focused) .session-info {
    display: none;
}

body.keyboard-open:not(.notepad-focused) .session-bar {
    padding: 4px 8px;
}

body.keyboard-open.notepad-focused .terminal-area {
    display: none;
}

body.keyboard-open.notepad-focused .resize-handle {
    display: none;
}

body.keyboard-open.notepad-focused .notepad-panel {
    width: 100% !important;
    max-width: 100% !important;
}

@media (pointer: coarse) {
    .btn,
    .session-tab,
    .toolbar-btn,
    .close,
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
    }

    .modal .close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
    }

    .tab-close,
    .tab-edit {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }

    .password-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    select {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .header {
        padding: 8px 16px;
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }

    .header-content {
        flex-direction: row;
        align-items: center;
    }

    .header-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 0;
        border-top: none;
        margin-top: 0;
    }

    .header-buttons .btn {
        width: auto;
    }

    .session-tabs {
        padding: 4px 0;
    }

    .terminal-area {
        min-height: 200px;
    }

    .modal-content {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }
}

@media (max-width: 359px) {
    .header {
        padding: 6px 8px;
    }

    .app-title {
        font-size: 14px;
    }

    .btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    .session-tab {
        padding: 6px 8px;
        font-size: 11px;
    }

    .modal-header h2 {
        font-size: 16px;
    }
}

@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 767px) {
        .header {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }

        .notification {
            left: max(16px, env(safe-area-inset-left));
            right: max(16px, env(safe-area-inset-right));
        }

        .main-content {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        .session-bar {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }

        .modal-body {
            padding-bottom: max(24px, env(safe-area-inset-bottom));
        }
    }
}

.xterm {
    height: 100%;
    padding: 8px;
    border-radius: 8px;
    overflow-x: hidden !important;
    max-width: 100%;
    width: 100%;
}

.xterm-viewport {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) transparent;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.xterm-viewport::-webkit-scrollbar {
    width: 8px;
}

.xterm-viewport::-webkit-scrollbar-track {
    background: transparent;
}

.xterm-viewport::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 8px;
}

.xterm-viewport::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.glow-text {
    text-shadow: 0 0 10px var(--accent-primary-glow);
}

.glass {
    background: var(--bg-modal);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
}

.lang-btn-header {
    min-width: 50px;
    padding: 8px 12px;
    position: relative; 
}

.theme-btn-header {
    min-width: 120px;
    padding: 8px 12px;
    position: relative; 
}

.theme-btn-header::after,
.lang-btn-header::after {
    content: '▼';
    font-size: 10px;
    margin-left: 6px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.theme-selector:has(.theme-dropdown-header.show) .theme-btn-header::after,
.language-selector:has(.lang-dropdown-header.show) .lang-btn-header::after {
    transform: rotate(180deg);
}

.theme-selector,
.language-selector,
.account-selector {
    position: relative;
    z-index: 10000;
}

/* Header tools grouping + account menu (pure GUI structure, no behavior change) */
.header-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-divider {
    width: 1px;
    align-self: stretch;
    min-height: 24px;
    background: var(--border-color);
    margin: 0 2px;
}

.account-btn-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
}

.account-avatar {
    font-size: 15px;
    line-height: 1;
}

.account-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-dropdown-header {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-modal);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    max-height: 80vh;
    min-width: 310px;
    z-index: 10001;
    padding: 6px;
}

.account-dropdown-header.show {
    display: block;
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.account-profile-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
}

.account-profile-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: var(--accent-primary);
    color: var(--accent-on-text);
    font-weight: 800;
}

.account-profile-copy,
.account-pulse-current-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.account-profile-copy strong,
.account-pulse-current-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-profile-copy span,
.account-pulse-current-copy span {
    color: var(--text-muted);
    font-size: 11px;
}

.account-workspace-pulse {
    margin: 4px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.account-pulse-heading,
.account-pulse-metrics,
.account-pulse-current {
    display: flex;
    align-items: center;
}

.account-pulse-heading {
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.account-pulse-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 10px;
}

.account-pulse-live > span:first-child,
.account-pulse-status {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--accent-primary);
}

.account-pulse-metrics {
    gap: 18px;
    margin: 12px 0;
    color: var(--text-muted);
    font-size: 11px;
}

.account-pulse-metrics strong {
    margin-right: 3px;
    color: var(--text-primary);
    font-size: 17px;
}

.account-pulse-current {
    gap: 9px;
    min-width: 0;
}

.account-pulse-status.is-offline {
    background: var(--text-muted);
}

.account-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.account-item:hover {
    background: var(--bg-hover);
}

.account-item-icon {
    font-size: 15px;
    line-height: 1;
    width: 18px;
    text-align: center;
}

.account-expander-label {
    white-space: nowrap;
}

.account-caret {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.account-selector:has(.account-dropdown-header.show) > .account-btn-header .account-caret {
    transform: rotate(180deg);
}

.account-expander .account-current {
    margin-left: auto;
}

.account-current {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.account-item > .account-current {
    margin-left: auto;
}

.connection-asset-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.connection-asset-nav-item {
    flex: 1;
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.connection-asset-nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.connection-asset-nav-item.active {
    background: var(--accent-primary);
    color: var(--accent-on-text);
}

.settings-modal-body {
    display: grid;
    gap: 24px;
}

.settings-section {
    display: grid;
    gap: 16px;
}

.settings-section h3 {
    margin: 0;
}

.settings-field {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr);
    align-items: center;
    gap: 16px;
}

.settings-number-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-number-control input {
    max-width: 140px;
}

.settings-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.settings-toggle input {
    margin-top: 4px;
}

.settings-toggle span {
    display: grid;
    gap: 4px;
}

.settings-toggle small {
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .connection-asset-nav {
        flex-direction: column;
    }

    .settings-field {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.account-current-flag {
    font-size: 16px;
    overflow: visible;
}

.account-expander:has(+ .account-submenu.show) .account-caret {
    transform: rotate(180deg);
}

.account-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 4px;
}

.account-menu-group {
    display: none;
}

.account-menu-group.show {
    display: block;
}

.account-menu-group > .account-item {
    padding-left: 36px;
    font-size: 13px;
}

.account-scrollback {
    cursor: default;
}

.account-scrollback:hover {
    background: transparent;
}

.account-scrollback-input {
    width: 58px;
    margin-left: auto;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    text-align: right;
}

.account-unit {
    font-size: 11px;
    opacity: 0.6;
}

/* Theme/Language sub-menus rendered inline (accordion) inside the account menu */
.account-dropdown-header .theme-dropdown-header,
.account-dropdown-header .lang-dropdown-header {
    position: static;
    min-width: 0;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    z-index: auto;
}

.account-dropdown-header .theme-option,
.account-dropdown-header .lang-option {
    padding-left: 52px;
    font-size: 13px;
    border-radius: 6px;
}

.lang-dropdown-header {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-modal);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 0, 0, 0.5); 
    overflow: visible; 
    min-width: 180px;
    z-index: 10001; 
    pointer-events: auto;
}

.theme-dropdown-header {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-modal);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 0, 0, 0.5); 
    overflow: visible; 
    min-width: 200px;
    z-index: 10001; 
    pointer-events: auto;
}

.lang-dropdown-header.show {
    display: block;
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-dropdown-header.show {
    display: block;
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lang-dropdown-header .lang-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease; 
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none; 
    border-left: 3px solid transparent; 
}

.theme-dropdown-header .theme-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease; 
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none; 
    border-left: 3px solid transparent; 
}

.lang-dropdown-header .lang-option:hover {
    background: var(--bg-hover);
    border-left-color: var(--accent-primary); 
}

.theme-dropdown-header .theme-option:hover {
    background: var(--bg-hover);
    border-left-color: var(--accent-primary); 
}

.lang-dropdown-header .lang-option.active {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: var(--accent-on-text);
    border-left-color: var(--accent-on-text);
}

.theme-dropdown-header .theme-option.active {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: var(--accent-on-text);
    border-left-color: var(--accent-on-text);
}

.theme-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.theme-btn-header .theme-color-dot {
    width: 10px;
    height: 10px;
    margin-right: 8px;
}

.pane-assignment-info {
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
}

.pane-assignment-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pane-assignment-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.pane-assignment-item {
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.pane-assignment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.pane-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: var(--accent-on-text);
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.pane-assignment-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.pane-assignment-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pane-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pane-option:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.pane-option.selected {
    border-color: var(--accent-primary);
    background: var(--accent-primary-glow);
}

.pane-option input[type="radio"] {
    cursor: pointer;
    accent-color: var(--accent-primary);
    flex-shrink: 0;
}

.pane-option-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pane-option-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pane-option-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

#filePreviewModal {
    z-index: 15000; 
}

.modal-xlarge .modal-header,
.modal-content.modal-xlarge .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.preview-header-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.preview-header-info h2 {
    margin: 0;
}

.preview-filename {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent-primary);
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 4px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-size {
    font-size: 12px;
    color: var(--text-muted);
}

.preview-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.btn-icon .material-icons {
    font-size: 20px;
}

.preview-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding: 0 !important;
}

.preview-loading,
.preview-error,
.preview-binary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: var(--text-muted);
}

.preview-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.preview-error {
    color: var(--danger-color, #f85149);
}

.preview-error .material-icons,
.preview-binary .material-icons {
    font-size: 48px;
    opacity: 0.6;
}

.preview-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    overflow: auto;
    background: var(--bg-tertiary);
}

.preview-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.preview-content {
    display: flex;
    flex: 1;
    /* Single vertical scroll container so the line-number gutter and the code
       always scroll together; horizontal scrolling is handled by the <pre>. */
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin: 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
}

.preview-line-numbers {
    flex: 0 0 auto;
    padding: 16px 12px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-muted);
    text-align: right;
    user-select: none;
    border-right: 1px solid var(--border-color);
    min-width: 50px;
}

.preview-content pre {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 16px;
    /* Own horizontal scroll for long lines; vertical scroll is delegated to
       the parent so the gutter stays in sync. */
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent !important;
}

.preview-content code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: transparent !important;
    padding: 0;
}

.preview-content .hljs {
    background: transparent !important;
    padding: 0;
}

.preview-truncated {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 193, 7, 0.1);
    border-top: 1px solid rgba(255, 193, 7, 0.3);
    color: var(--warning-color, #ffc107);
    font-size: 12px;
}

.preview-truncated .material-icons {
    font-size: 18px;
}

/* Inline file editor (additive to the preview modal) */
/* While editing, expand the preview modal to near-fullscreen for editing room. */
#filePreviewModal.editing .modal-content {
    width: 96vw;
    max-width: 96vw;
    height: 94vh;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
}

.file-editor {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    margin: 16px;
    gap: 10px;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-status {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted, var(--text-secondary));
}

.editor-content {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    padding: 16px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre;
    overflow: auto;
}

.editor-content:focus {
    outline: none;
    border-color: var(--accent-primary, var(--border-color));
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.command-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-input {
    flex: 1;
    padding: 12px 16px;
    font-size: 15px;
}

.os-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 14px;
}

.os-filter-toolbar > span {
    color: var(--text-secondary);
    font-weight: 600;
}

.os-filter-buttons {
    display: flex;
    gap: 6px;
    flex: 1;
}

.os-filter-btn {
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.os-filter-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.os-filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--accent-on-text);
}

.os-detected {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 13px;
}

.os-detected strong {
    color: var(--accent-primary);
}

.commands-table-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.commands-table-header {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 3fr 1fr;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-secondary);
}

.commands-table-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.command-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 3fr 1fr;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.command-row:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateX(4px);
}

.command-row.system-command {
    background: var(--bg-secondary);
    opacity: 0.9;
}

.command-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.command-name strong {
    color: var(--text-primary);
    font-size: 15px;
}

.command-os-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.os-badge {
    padding: 2px 8px;
    background: var(--accent-primary);
    color: var(--accent-on-text);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.command-text code,
.command-params code {
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--accent-secondary);
}

.command-desc {
    color: var(--text-secondary);
    font-size: 13px;
}

.command-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.btn-icon {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    opacity: 1;
    transform: scale(1.2);
}

.command-help {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.command-help p {
    margin: 4px 0;
}

.command-help kbd {
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: var(--accent-primary);
}

#connectionModal .modal-content {
    width: min(100%, 1080px);
}

#connectionModal .modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    padding: 0;
    overflow: hidden;
}

.quick-connect-form {
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.quick-connect-scroll-region {
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.quick-connect-actions {
    margin-top: 0;
    padding: 20px 24px;
    background: var(--bg-modal);
}

.quick-connect-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    align-items: start;
    gap: 18px;
}

.quick-connect-secondary {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.quick-connect-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.quick-connect-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 20px;
}

.quick-connect-details-card {
    padding: 0;
    overflow: clip;
}

.quick-connect-details-card .quick-connect-card-header {
    margin-bottom: 0;
    padding: 18px 20px;
}

.quick-connect-details-content {
    padding: 18px 20px 20px;
    border-top: 1px solid var(--border-color);
}

.quick-connect-auth-method {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 44%);
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.quick-connect-auth-method label {
    margin-bottom: 0;
}

.quick-connect-core-fields {
    display: grid;
    gap: 14px;
}

.quick-connect-core-fields :is(.form-row, .form-group, .connection-profile-context) {
    margin-bottom: 0;
}

.quick-connect-card-header.compact {
    margin-bottom: 14px;
}

.quick-connect-card-header > .material-icons,
:is(.connection-advanced-settings, .recent-connections-card) > summary > .material-icons:first-child {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 9px;
    background: var(--bg-tertiary);
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
    font-size: 20px;
}

.quick-connect-card-header h3,
.quick-connect-card-header p {
    margin: 0;
}

.quick-connect-card-header h3 {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
}

.quick-connect-card-header p {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.connection-profile-context {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid var(--accent-primary);
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
    border-radius: 9px;
    background: var(--bg-tertiary);
    background: color-mix(in srgb, var(--accent-primary) 9%, transparent);
    color: var(--text-secondary);
}

.connection-profile-context > .material-icons {
    color: var(--accent-primary);
    font-size: 20px;
}

.connection-profile-context > div:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.connection-profile-context small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.connection-profile-context strong {
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

.connection-profile-context > div > span {
    font-size: 12px;
    line-height: 1.4;
}

.connection-profile-jump-resolution {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-color));
    color: var(--warning-color);
    font-size: 12px;
    line-height: 1.45;
}

.connection-profile-jump-resolution .checkbox-label {
    width: fit-content;
    padding: 6px 8px;
    color: var(--text-primary);
    font-weight: 600;
}

:is(.connection-advanced-settings, .recent-connections-card) {
    margin: 0;
    padding: 0;
    overflow: clip;
}

:is(.connection-advanced-settings, .recent-connections-card) > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
}

:is(.connection-advanced-settings, .recent-connections-card) > summary::-webkit-details-marker {
    display: none;
}

:is(.connection-advanced-settings, .recent-connections-card) > summary > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

:is(.connection-advanced-settings, .recent-connections-card) > summary strong {
    font-size: 15px;
}

:is(.connection-advanced-settings, .recent-connections-card) > summary small {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

:is(.connection-advanced-settings, .recent-connections-card) > summary:hover strong,
:is(.connection-advanced-settings, .recent-connections-card) > summary:focus-visible strong {
    color: var(--accent-primary);
}

:is(.connection-advanced-settings, .recent-connections-card) > summary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -3px;
    border-radius: 10px;
}

.connection-advanced-chevron {
    color: var(--text-muted);
    transition: transform 0.18s ease;
}

:is(.connection-advanced-settings, .recent-connections-card)[open] .connection-advanced-chevron {
    transform: rotate(180deg);
}

.recent-connections-content {
    padding: 18px 20px 20px;
    border-top: 1px solid var(--border-color);
}

.connection-advanced-content {
    padding: 18px 20px 20px;
    border-top: 1px solid var(--border-color);
}

.connection-advanced-content > .form-group:last-child {
    margin-bottom: 0;
}

.connection-advanced-content .post-connect-label {
    color: var(--text-primary);
    font-size: 13px;
    letter-spacing: 0.3px;
}

.connection-advanced-content .post-connect-preview-header {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 900px) {
    .quick-connect-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .connection-asset-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .manager-card {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .quick-connect-scroll-region {
        padding: 16px;
    }

    .quick-connect-actions {
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .quick-connect-card {
        padding: 16px;
    }

    .quick-connect-details-card {
        padding: 0;
    }

    .quick-connect-details-card .quick-connect-card-header,
    .quick-connect-details-content {
        padding: 16px;
    }

    .quick-connect-auth-method {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 20px;
    }

    :is(.connection-advanced-settings, .recent-connections-card) {
        padding: 0;
    }

    :is(.connection-advanced-settings, .recent-connections-card) > summary,
    .connection-advanced-content,
    .recent-connections-content {
        padding: 16px;
    }
}

/* Reusable post-connect command sets */
.post-connect-config {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.post-connect-label,
.post-connect-parameters-label,
.post-connect-preview-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

.post-connect-mode-selector {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.post-connect-mode {
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.post-connect-mode:hover,
.post-connect-mode:focus-visible {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.post-connect-mode.active {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
}

.post-connect-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-secondary);
}

.post-connect-config #connectionCommandPreview,
#profileEditorCommandPreview {
    display: block;
    min-height: 42px;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--accent-secondary);
    font-family: monospace;
}

.post-connect-config #connectionCommandPreview.error,
#profileEditorCommandPreview.error {
    border-color: var(--danger-color, #f85149);
    color: var(--danger-color, #f85149);
}

.info-tooltip-trigger {
    display: inline-grid;
    width: 19px;
    height: 19px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: help;
}

.info-tooltip {
    position: absolute;
    z-index: 20;
    top: calc(100% + 7px);
    left: 0;
    width: min(300px, 80vw);
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.info-tooltip-trigger:hover + .info-tooltip,
.info-tooltip-trigger:focus-visible + .info-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.profile-management-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.profile-management-modal-body > .connection-asset-nav {
    flex: 0 0 auto;
}

#profileManagementView:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#profileEditorView:not(.hidden) {
    display: flex;
    flex: 1;
    min-height: 0;
}

.profile-editor-form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: 100%;
    min-height: 0;
}

.profile-editor-scroll-region {
    min-height: 0;
    padding-right: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.profile-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: start;
    gap: 18px;
}

.profile-editor-actions {
    margin-top: 18px;
    padding-top: 18px;
    background: var(--bg-modal);
}

@media (max-width: 820px) {
    .profile-editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-editor-scroll-region {
        padding-right: 6px;
    }
}

.profile-management-toolbar,
.profile-management-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-management-toolbar {
    flex: 0 0 auto;
    justify-content: space-between;
}

.profile-management-toolbar p {
    margin: 0;
    color: var(--text-secondary);
}

.profile-management-toolbar {
    flex-wrap: wrap;
}

.profile-management-toolbar p {
    flex: 1 1 260px;
}

.profile-management-search {
    flex: 1 1 260px;
    max-width: 420px;
}

.profile-management-list {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    flex: 1;
    min-height: 0;
    gap: 12px;
    margin-top: 18px;
    padding-right: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.profile-management-section {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
}

.profile-management-section-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 34px;
    padding: 5px 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.profile-management-section-toggle:hover,
.profile-management-section-toggle:focus-visible {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.profile-management-section-toggle .material-icons {
    font-size: 18px;
}

.profile-management-section-count {
    min-width: 24px;
    margin-left: auto;
    padding: 2px 7px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.profile-management-section-items {
    display: grid;
    gap: 0;
}

.profile-management-section-items[hidden] {
    display: none;
}

.profile-management-section + .profile-management-section {
    margin-top: 8px;
}

.profile-management-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 14px 12px 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    box-shadow: 0 1px 2px color-mix(in srgb, black 9%, transparent);
    transition: border-color 140ms ease, box-shadow 140ms ease,
        opacity 140ms ease, transform 140ms ease;
}

.profile-management-item:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
    box-shadow: 0 5px 18px color-mix(in srgb, black 12%, transparent);
}

.profile-management-item.is-derived-favorite {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 14px;
}

.profile-management-item.is-dragging {
    opacity: 0.36;
    transform: scale(0.995);
}

.profile-management-item.is-pending {
    opacity: 0.68;
    pointer-events: none;
}

.profile-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: grab;
    touch-action: none;
}

.profile-drag-handle:hover:not(:disabled),
.profile-drag-handle:focus-visible {
    background: var(--bg-hover);
    color: var(--accent-primary);
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.profile-drag-handle:active:not(:disabled) {
    cursor: grabbing;
}

.profile-drag-handle:disabled {
    color: color-mix(in srgb, var(--text-secondary) 42%, transparent);
    cursor: not-allowed;
}

.profile-drag-handle .material-icons {
    font-size: 21px;
}

.profile-drop-slot {
    position: relative;
    height: 10px;
    margin: 0 8px;
}

.profile-drop-slot::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 6px;
    left: 6px;
    height: 2px;
    border-radius: 999px;
    background: var(--accent-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent),
        0 0 12px var(--accent-primary-glow);
    opacity: 0;
    transform: scaleX(0.96);
    transition: opacity 100ms ease, transform 100ms ease;
}

.profile-drop-slot::after {
    content: '';
    position: absolute;
    top: calc(50% - 4px);
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    opacity: 0;
    transition: opacity 100ms ease;
}

.profile-drop-slot.is-active::before,
.profile-drop-slot.is-active::after {
    opacity: 1;
}

.profile-drop-slot.is-active::before {
    transform: scaleX(1);
}

.profile-sort-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-color));
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary));
    color: var(--text-secondary);
    font-size: 12px;
}

.profile-sort-notice .material-icons {
    color: var(--accent-primary);
    font-size: 18px;
}

.profile-management-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.profile-management-info span {
    color: var(--text-secondary);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.profile-management-info .profile-group-badge {
    align-self: flex-start;
    padding: 2px 7px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
}

.profile-favorite-button {
    width: var(--touch-target-min);
    min-width: var(--touch-target-min);
    height: var(--touch-target-min);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--warning-color);
    cursor: pointer;
}

.profile-favorite-button:hover,
.profile-favorite-button:focus-visible {
    background: var(--bg-hover);
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.profile-move-confirmation-content .modal-header {
    align-items: center;
}

.profile-confirmation-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-confirmation-heading > .material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--warning-color) 14%, transparent);
    color: var(--warning-color);
    font-size: 21px;
}

.profile-confirmation-close {
    border: 0;
    background: transparent;
}

.profile-confirmation-lead {
    margin: 0 0 16px;
    color: var(--text-primary);
    font-weight: 600;
}

.profile-confirmation-summary {
    display: grid;
    gap: 1px;
    margin: 0 0 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--border-color);
}

.profile-confirmation-summary > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
}

.profile-confirmation-summary dt {
    color: var(--text-secondary);
    font-size: 12px;
}

.profile-confirmation-summary dd {
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.profile-confirmation-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.profile-confirmation-actions {
    margin-top: 22px;
}

.command-set-selector-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.command-set-selector-row .form-control {
    flex: 1;
}

.command-set-selector-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.command-set-preview,
.legacy-command-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 12px;
}

.command-set-preview strong {
    color: var(--text-primary);
}

.command-set-preview.empty {
    border-style: dashed;
}

.legacy-command-notice {
    border-color: var(--warning-color, #d29922);
    color: var(--warning-color, #d29922);
}

.command-workspace-content {
    overflow: hidden;
}

.command-workspace-tabs {
    display: flex;
    gap: 4px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
}

.command-workspace-tab {
    padding: 12px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.command-workspace-tab:hover,
.command-workspace-tab:focus-visible {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.command-workspace-tab.active {
    border-bottom-color: var(--accent-primary);
    color: var(--accent-primary);
}

.command-workspace-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.command-workspace-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

#commandLibraryPanel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.command-set-modal-content .command-set-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#commandSetEditorView,
#commandSetForm {
    height: 100%;
    min-height: 0;
}

#commandSetForm {
    display: flex;
    flex-direction: column;
}

.command-set-sudo-option {
    margin-bottom: 14px;
}

.command-set-sudo-option label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.command-set-sudo-option p {
    margin: 5px 0 0 26px;
    color: var(--text-secondary);
    font-size: 12px;
}

.command-set-management-toolbar,
.command-set-steps-heading,
.command-set-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.command-set-management-toolbar p {
    color: var(--text-secondary);
}

.command-set-management-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.command-set-management-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.command-set-management-item > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.command-set-management-item span {
    color: var(--text-secondary);
    font-size: 12px;
}

.command-set-management-item .command-set-sudo-badge {
    align-self: flex-start;
    padding: 2px 7px;
    border: 1px solid var(--accent-primary);
    border-radius: 999px;
    color: var(--accent-primary);
    font-weight: 600;
}

.command-set-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.command-set-builder {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
    gap: 16px;
    min-height: 0;
}

.command-set-library-pane,
.command-set-steps-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.command-set-library-pane h4,
.command-set-steps-pane h4 {
    margin: 0 0 12px;
}

.command-set-os-filters {
    display: flex;
    gap: 5px;
    margin: 10px 0;
    overflow-x: auto;
    padding-bottom: 3px;
}

.command-set-library-results,
.command-set-steps {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
}

.command-set-library-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.command-set-library-item:hover,
.command-set-library-item:focus-visible {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.command-set-library-item code,
.command-set-step > code {
    color: var(--accent-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.command-set-step {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
}

.command-set-step[draggable="true"] {
    cursor: grab;
}

.command-set-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.command-set-step-header > div {
    display: flex;
    gap: 4px;
}

.command-set-default-params {
    display: flex !important;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

.command-set-editor-actions {
    margin-top: 16px;
    justify-content: flex-end;
}

@media (max-width: 850px) {
    .command-workspace-tabs {
        padding: 0 16px;
        overflow-x: auto;
    }

    .command-workspace-body,
    #commandLibraryPanel {
        overflow: auto;
    }

    .command-set-modal-content .command-set-modal-body {
        overflow: auto;
    }

    #commandSetEditorView,
    #commandSetForm {
        height: auto;
    }

    .command-set-builder {
        flex: none;
        grid-template-columns: 1fr;
    }

    .command-set-library-pane,
    .command-set-steps-pane {
        min-height: 360px;
    }

    .command-set-management-item,
    .command-set-management-toolbar,
    .profile-management-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-management-list {
        padding-right: 6px;
    }

    .profile-management-item {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .profile-management-item.is-derived-favorite {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-management-actions {
        grid-column: 2;
        flex-wrap: wrap;
    }

    .profile-management-item.is-derived-favorite .profile-management-actions {
        grid-column: 1;
    }
}

@media (max-width: 520px) {
    .command-set-selector-row {
        flex-direction: column;
    }

    .post-connect-mode-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    cursor: pointer;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.no-items {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 16px;
}

@media (max-width: 1200px) {
    .commands-table-header,
    .command-row {
        grid-template-columns: 1.5fr 1.5fr 1fr 2fr 0.8fr;
        font-size: 13px;
    }
}

@media (max-width: 900px) {
    .modal-large .modal-content {
        width: 100%;
        height: calc(100vh - 24px);
        height: calc(100dvh - 24px);
    }

    .commands-table-header,
    .command-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .command-cell {
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 8px;
    }

    .command-cell:last-child {
        border-bottom: none;
    }
}

.notepad-toggle-btn {
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    width: 24px;
    height: 48px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 6px 0 0 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 10;
    transition: all 0.2s;
}

.notepad-toggle-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.notepad-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
    padding: 0;
    border: none;
}

.workspace:has(.notepad-panel.collapsed) {
    grid-template-columns: 1fr 0px !important;
}

.workspace:has(.notepad-panel.collapsed) .resize-handle {
    right: 0;
}

.workspace:has(.notepad-panel.collapsed) .resize-handle-line {
    display: none;
}

.workspace:has(.notepad-panel.collapsed) .notepad-toggle-btn {
    left: -24px;
}

.reconnect-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: var(--warning-color, #f3c969);
    color: #000;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    z-index: 1000;
}

/* Carry each theme's visual material through the surrounding application chrome. */
.header,
.notepad-panel {
    background-color: var(--bg-secondary);
    background-image:
        linear-gradient(var(--theme-surface-shell), var(--theme-surface-shell)),
        var(--theme-background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto, cover;
}


.modal-content,
.account-dropdown-header,
.lang-dropdown-header,
.theme-dropdown-header {
    background-color: var(--bg-modal);
    background-image:
        linear-gradient(var(--theme-surface-modal), var(--theme-surface-modal)),
        var(--theme-background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto, cover;
}

.manager-card {
    background-color: var(--bg-secondary);
    background-image:
        linear-gradient(var(--theme-surface-card), var(--theme-surface-card)),
        var(--theme-background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto, cover;
}