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

/* === TyapTerm Dark Theme (default) === */
:root, [data-theme="dark"] {
    --bg: #1e1e1e;
    --surface: #252526;
    --surface-variant: #2d2d2d;
    --text: #e0e0e0;
    --text-secondary: #969696;
    --text-disabled: #5a5a5a;
    --border: #3c3c3c;
    --border-light: #454545;
    --accent: #0e639c;
    --accent-hover: #1177bb;
    --accent-text: #ffffff;
    --success: #2ea043;
    --danger: #d32f2f;
    --warning: #ffb74d;
    --hover: #353839;
    --pressed: #444444;
    --input-bg: #3c3c3c;
    --input-border: #444444;
    --title-bar: #121212;
    --title-bar-text: #cccccc;
    --sidebar-bg: #252526;
    --online: #2ea043;
    --offline: #F44336;
    --scrollbar-bg: #151515;
    --scrollbar-handle: #444444;
    --selection: #094771;
    --tab-border-ssh: #69ffb4;
    --tab-border-local: #ffb74d;
    --tab-border-ps: #42a5f5;
    --tab-border-telnet: #ff8a80;
    --login-title: #0e639c;
    --term-bg: #1a1a1a;
    --term-fg: #e0e0e0;
    --term-cursor: #ffffff;
    --term-selection: #264f78;
    --modkey-bg: #2d2d2d;
    --modkey-btn: #3c3c3c;
    --modkey-btn-active: #0e639c;
    --modkey-text: #cccccc;
}

/* === TyapTerm Light Theme === */
[data-theme="light"] {
    --bg: #f3f3f3;
    --surface: #ffffff;
    --surface-variant: #e5e5e5;
    --text: #202020;
    --text-secondary: #505050;
    --text-disabled: #a0a0a0;
    --border: #c0c0c0;
    --border-light: #d0d0d0;
    --accent: #007acc;
    --accent-hover: #0062a3;
    --accent-text: #ffffff;
    --success: #2da44e;
    --danger: #d32f2f;
    --warning: #f9a825;
    --hover: #e0e0e0;
    --pressed: #d0d0d0;
    --input-bg: #ffffff;
    --input-border: #c0c0c0;
    --title-bar: #f3f3f3;
    --title-bar-text: #404040;
    --sidebar-bg: #f3f3f3;
    --online: #2da44e;
    --offline: #d32f2f;
    --scrollbar-bg: #f3f3f3;
    --scrollbar-handle: #c0c0c0;
    --selection: #add6ff;
    --tab-border-ssh: #2e7d32;
    --tab-border-local: #e65100;
    --tab-border-ps: #1565c0;
    --tab-border-telnet: #c62828;
    --login-title: #007acc;
    --term-bg: #f5f5f5;
    --term-fg: #1a1a1a;
    --term-cursor: #000000;
    --term-selection: #add6ff;
    --modkey-bg: #e5e5e5;
    --modkey-btn: #d0d0d0;
    --modkey-btn-active: #007acc;
    --modkey-text: #202020;
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}

/* Views */
.view { display: none; width: 100%; height: 100%; flex-direction: column; }
.view.active { display: flex; }

/* === Login === */
#view-login { justify-content: center; align-items: center; }
.login-box {
    background: var(--surface);
    padding: 40px 44px;
    border-radius: 8px;
    width: 420px;
    max-width: 95vw;
    border: 1px solid var(--border);
}
.login-box h1 {
    text-align: center;
    margin-bottom: 24px;
    font-size: 21px;
    color: var(--login-title);
    font-weight: 600;
    letter-spacing: 0.5px;
}
.login-box input {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    color: var(--text);
    font-size: 17px;
    outline: none;
    transition: border-color 0.15s;
}
.login-box input:focus { border-color: var(--accent); }
.login-box input::placeholder { color: var(--text-disabled); }
.login-box button {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: 4px;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}
.login-box button:hover { background: var(--accent-hover); }
.error { color: var(--danger); margin-top: 8px; font-size: 15px; text-align: center; }

/* === Topbar === */
.topbar {
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 46px;
    background: var(--title-bar);
    border-bottom: 1px solid var(--border);
    gap: 6px;
    flex-shrink: 0;
}
.topbar-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--title-bar-text);
    padding-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-btn {
    background: transparent;
    border: none;
    color: var(--title-bar-text);
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.1s;
    white-space: nowrap;
}
.topbar-btn:hover { background: var(--hover); }

.theme-toggle {
    background: transparent;
    border: none;
    color: var(--title-bar-text);
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.1s;
    line-height: 1;
}
.theme-toggle:hover { background: var(--hover); }

/* === Dashboard === */
.instances-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.instances-list::-webkit-scrollbar { width: 8px; }
.instances-list::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
.instances-list::-webkit-scrollbar-thumb { background: var(--scrollbar-handle); border-radius: 4px; }

.empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 60px 0;
    font-size: 17px;
}

.instance-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
}
.instance-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    gap: 10px;
    cursor: pointer;
    transition: background-color 0.1s;
}
.instance-header:hover { background: var(--hover); }
.instance-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.instance-dot.online { background: var(--online); }
.instance-dot.offline { background: var(--offline); }
.instance-name { flex: 1; font-weight: 600; font-size: 17px; }
.instance-meta { color: var(--text-secondary); font-size: 14px; }

.session-list { padding: 0 16px 12px 36px; }
.session-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 4px;
    gap: 10px;
    margin-bottom: 2px;
    transition: background-color 0.1s;
}
.session-item:hover { background: var(--hover); }
.session-title { flex: 1; font-size: 15px; font-weight: 500; color: var(--text); }
.session-protocol {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 2px 7px;
    background: var(--surface-variant);
    border-radius: 3px;
}
.session-btn {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 4px 14px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.1s;
}
.session-btn:hover { background: var(--accent); color: var(--accent-text); }
.new-session-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 14px;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.new-session-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Protocol color accents */
.session-item[data-protocol="local_xterm"] .session-protocol { border-left: 3px solid var(--tab-border-local); }
.session-item[data-protocol="local_powershell"] .session-protocol { border-left: 3px solid var(--tab-border-ps); }
.session-item[data-protocol="SSH"] .session-protocol { border-left: 3px solid var(--tab-border-ssh); }
.session-item[data-protocol="pty"] .session-protocol { border-left: 3px solid var(--tab-border-local); }

/* === Terminal view === */
.terminal-container { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.terminal-panel {
    flex: 1;
    padding: 6px 0 6px 10px;
    overflow: hidden;
    background: var(--term-bg);
}

.xterm-viewport::-webkit-scrollbar { width: 10px; }
.xterm-viewport::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
.xterm-viewport::-webkit-scrollbar-thumb { background: var(--scrollbar-handle); border-radius: 4px; }

/* === File panel === */
.file-panel {
    width: 340px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    flex-shrink: 0;
}
.file-panel.hidden { display: none; }
.file-toolbar {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.file-close-btn, .file-nav-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 17px;
    padding: 4px 8px;
    border-radius: 3px;
    transition: all 0.1s;
}
.file-close-btn:hover, .file-nav-btn:hover { color: var(--text); background: var(--hover); }
.file-path {
    flex: 1;
    font-size: 14px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Consolas', 'Courier New', monospace;
}
.file-list {
    flex: 1;
    overflow-y: auto;
    padding: 2px 0;
}
.file-list::-webkit-scrollbar { width: 6px; }
.file-list::-webkit-scrollbar-track { background: transparent; }
.file-list::-webkit-scrollbar-thumb { background: var(--scrollbar-handle); border-radius: 3px; }

.file-item {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.1s;
}
.file-item:hover { background: var(--hover); }
.file-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; }
.file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { color: var(--text-secondary); font-size: 13px; flex-shrink: 0; font-family: 'Consolas', monospace; }
.file-status {
    padding: 5px 10px;
    font-size: 13px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
    background: var(--surface);
}

/* === Modifier keys bar (mobile) === */
.modkeys-bar {
    display: none; /* shown via JS on touch devices */
    background: var(--modkey-bg);
    border-top: 1px solid var(--border);
    padding: 6px 4px;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
}
.modkeys-bar.visible { display: flex; }
.modkey {
    background: var(--modkey-btn);
    color: var(--modkey-text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 700;
    cursor: pointer;
    min-width: 44px;
    text-align: center;
    transition: background-color 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.modkey:active { background: var(--pressed); }
.modkey.sticky { position: relative; }
.modkey.sticky.active {
    background: var(--modkey-btn-active);
    color: var(--accent-text);
    border-color: var(--modkey-btn-active);
}
.modkey-sep {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 2px;
}

/* === Mobile === */
@media (max-width: 768px) {
    html, body { font-size: 16px; }

    .login-box {
        width: 100%;
        max-width: 100vw;
        border-radius: 0;
        border: none;
        padding: 32px 24px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .topbar { height: 44px; padding: 0 6px; }
    .topbar-title { font-size: 14px; padding-left: 4px; }
    .topbar-btn { padding: 8px 10px; font-size: 14px; min-height: 44px; }
    .theme-toggle { font-size: 18px; min-height: 44px; padding: 8px; }

    .instances-list { padding: 8px; }
    .instance-header { padding: 14px 12px; }
    .session-item { padding: 10px 8px; }
    .session-btn { padding: 6px 14px; min-height: 36px; }
    .new-session-btn { padding: 8px 14px; min-height: 36px; }

    .terminal-panel { padding: 4px 0 4px 6px; }

    /* File panel: full width on mobile */
    .file-panel {
        position: absolute;
        top: 44px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-left: none;
        z-index: 10;
    }
    .file-item { padding: 10px 12px; min-height: 44px; }
    .file-close-btn, .file-nav-btn { padding: 8px 12px; min-height: 44px; font-size: 18px; }

    /* Show modifier keys on mobile */
    .modkeys-bar { display: flex; }
}

/* Touch device detection override — also show on tablets in landscape */
@media (pointer: coarse) {
    .modkeys-bar { display: flex; }
}