:root {
  --bg: #0d131c; --panel: #121b27; --panel-2: #172332; --line: #253548;
  --text: #e7edf5; --muted: #8b9bb1; --accent: #66e3b4; --accent-2: #53b7ff;
  --danger: #ff7e88; --shadow: 0 20px 60px rgb(0 0 0 / .25);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: radial-gradient(1200px 600px at 75% -10%, #173750 0%, transparent 55%), var(--bg); min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; }
.hidden { display: none !important; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); background: rgb(18 27 39 / .9); border: 1px solid var(--line); border-radius: 24px; padding: 36px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.brand { display:flex; align-items:center; gap: 12px; margin-bottom: 30px; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display:grid; place-items:center; color:#082319; font-weight:800; background: linear-gradient(135deg,var(--accent),#92f3d2); }
.brand h1 { font-size: 22px; letter-spacing: -.03em; margin:0; } .brand small { color:var(--muted); display:block; margin-top:2px; }
.field { display:flex; flex-direction:column; gap:7px; margin: 16px 0; color: var(--muted); font-size: 13px; }
.field input, .field select, .field textarea { width:100%; background:#0d1621; border:1px solid var(--line); color:var(--text); border-radius:10px; padding:11px 12px; outline:none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgb(83 183 255 / .12); }
.primary { width:100%; padding:12px 16px; border-radius:10px; background: linear-gradient(135deg,#61dfaf,#43b9d4); color:#07241c; font-weight:700; margin-top:10px; }
.primary:hover { filter:brightness(1.08); } .error { color:var(--danger); min-height:20px; font-size:13px; margin-top:10px; }
.app-shell { min-height:100vh; display:grid; grid-template-rows: 64px 1fr; }
.topbar { border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 22px; background:rgb(13 19 28 / .78); backdrop-filter: blur(16px); }
.topbar .brand { margin:0; } .top-actions { display:flex; align-items:center; gap:10px; }
.icon-btn, .ghost-btn { background: transparent; color:var(--muted); padding:8px 10px; border-radius:8px; } .icon-btn:hover,.ghost-btn:hover { background:var(--panel-2); color:var(--text); }
.user-chip { color:var(--muted); font-size:13px; border-left:1px solid var(--line); padding-left:14px; }
.workspace { display:grid; grid-template-columns: 268px 1fr; min-height:0; }
.sidebar { border-right:1px solid var(--line); background:rgb(18 27 39 / .72); padding:18px 14px; overflow:auto; }
.section-head { display:flex; justify-content:space-between; align-items:center; margin:4px 6px 13px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.09em; }
.server-list { display:flex; flex-direction:column; gap:5px; }
.server-item { display:flex; align-items:center; gap:10px; width:100%; padding:11px 10px; background:transparent; border-radius:10px; text-align:left; color:var(--text); }
.server-item:hover { background:var(--panel-2); } .server-item.active { background:linear-gradient(90deg,rgb(102 227 180 / .16),transparent); }
.status-dot { width:8px; height:8px; border-radius:99px; background:#66778d; flex:0 0 auto; } .status-dot.connected { background:var(--accent); box-shadow:0 0 10px var(--accent); }
.server-meta { min-width:0; flex:1; } .server-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; } .server-host { display:block; color:var(--muted); font-size:11px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .server-edit { color:var(--muted); font-size:18px; line-height:1; padding:3px 2px; opacity:.65; } .server-edit:hover { color:var(--accent); opacity:1; }
.empty { color:var(--muted); font-size:13px; padding:15px 8px; line-height:1.5; }
.main { min-width:0; display:grid; grid-template-rows: 48px 1fr; background: #0b1119; }
.tabs { display:flex; align-items:stretch; border-bottom:1px solid var(--line); overflow:auto; background:#0e1722; }
.tab { display:flex; align-items:center; gap:8px; min-width:150px; max-width:220px; border-right:1px solid var(--line); padding:0 12px; color:var(--muted); font-size:13px; cursor:pointer; }
.tab.active { color:var(--text); background:#141f2d; box-shadow: inset 0 -2px var(--accent); } .tab .close { margin-left:auto; color:#718197; font-size:16px; } .tab .close:hover { color:var(--danger); }
.content { min-height:0; position:relative; } .welcome { height:100%; display:grid; place-items:center; text-align:center; color:var(--muted); padding:30px; }
.welcome-card { max-width:500px; } .welcome h2 { color:var(--text); font-size:28px; letter-spacing:-.04em; margin:0 0 10px; } .welcome p { line-height:1.6; }
.session { position:absolute; inset:0; display:grid; grid-template-rows:1fr 48px; min-height:0; } .terminal-wrap { min-height:0; padding:14px; } .terminal { height:100%; width:100%; }
.session-bar { display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding:0 12px; color:var(--muted); font-size:12px; } .session-bar .grow { flex:1; }
.keybar { display:none; gap:6px; overflow:auto; padding:7px 10px; background:#101b28; border-top:1px solid var(--line); } .keybar button { background:#1a2a3c; padding:7px 11px; border-radius:7px; font-size:12px; }
.sftp-panel { position:absolute; inset:0; background:#0f1824; display:grid; grid-template-rows:50px 1fr; } .sftp-toolbar { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--line); } .path-input { flex:1; background:#0b131d; border:1px solid var(--line); color:var(--text); padding:8px 10px; border-radius:8px; font-size:13px; }
.file-list { overflow:auto; padding:10px 14px; } .file-row { display:grid; grid-template-columns:1fr 100px 130px 70px; gap:10px; align-items:center; padding:11px 10px; border-bottom:1px solid rgb(37 53 72 / .55); font-size:13px; } .file-row.head { color:var(--muted); font-size:11px; text-transform:uppercase; } .file-name { cursor:pointer; } .file-name:hover { color:var(--accent); } .file-actions { display:flex; gap:4px; justify-content:flex-end; } .file-actions button { background:transparent; color:var(--muted); padding:4px; } .file-actions button:hover { color:var(--text); }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgb(2 7 12 / .7); backdrop-filter: blur(8px); } .modal { width:min(600px,100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); } .modal-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); } .modal-head h3 { margin:0; font-size:17px; } .modal-body { padding:6px 20px 20px; } .modal-actions { display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line); } .modal-actions .primary { width:auto; margin:0; } .secondary { padding:10px 15px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--muted); } .danger { color:var(--danger); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } .auth-toggle { display:flex; gap:8px; margin:12px 0; } .auth-toggle button { flex:1; padding:9px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--muted); } .auth-toggle button.active { background:rgb(102 227 180 / .12); color:var(--accent); border-color:rgb(102 227 180 / .35); }
@media (max-width: 760px) { .app-shell { grid-template-rows:56px 1fr; } .topbar { padding:0 12px; } .topbar .brand small,.user-chip { display:none; } .workspace { grid-template-columns:1fr; } .sidebar { position:absolute; z-index:5; top:56px; bottom:0; left:0; width:min(84vw,300px); transform:translateX(-100%); transition:transform .2s; box-shadow:var(--shadow); } .sidebar.open { transform:translateX(0); } .main { grid-template-rows:45px 1fr; } .keybar { display:flex; } .session { grid-template-rows:1fr auto 48px; } .file-row { grid-template-columns:1fr 70px 45px; } .file-row > :nth-child(3) { display:none; } .grid-2 { grid-template-columns:1fr; } .modal { border-radius:14px; } }