* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0d1117; --panel: #161b22; --panel2: #1c2330; --border: #2d333b;
  --fg: #d6deeb; --dim: #8b949e; --accent: #58a6ff; --danger: #f85149; --ok: #3fb950;
}
html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--fg); font: 14px/1.45 system-ui, 'Segoe UI', sans-serif; }
.hidden { display: none !important; }
button { background: var(--panel2); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
button:hover { border-color: var(--accent); }
input { background: var(--panel2); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 13px; outline: none; min-width: 0; }
input:focus { border-color: var(--accent); }
.err { color: var(--danger); min-height: 18px; margin-top: 6px; font-size: 12px; }
.lnk { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* login */
.login { height: 100vh; display: flex; align-items: center; justify-content: center; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 28px; width: 300px; display: flex; flex-direction: column; gap: 10px; }
.card h1 { font-size: 18px; font-weight: 600; margin-bottom: 8px; letter-spacing: .5px; }
.card h1 span { color: var(--accent); }
.card button { padding: 8px; }

/* app layout */
#app { display: flex; height: 100vh; width: 100vw; max-width: 100%; overflow: hidden; }
.side { width: 300px; min-width: 300px; max-width: 40vw; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.side-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); flex: none; }
.side-head strong { color: var(--dim); }
.side-head #who { margin-left: auto; color: var(--ok); text-transform: none; letter-spacing: 0; }
.side-head #logout { padding: 2px 8px; }
.files-head { border-top: 1px solid var(--border); }
#wsName { margin-left: auto; color: var(--accent); text-transform: none; letter-spacing: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-create { display: flex; gap: 6px; padding: 10px 12px; flex: none; }
.ws-create input { flex: 1; }
.ws-list { list-style: none; overflow-y: auto; max-height: 30vh; flex: none; }
.ws-list li { display: flex; align-items: center; padding: 7px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #1c2128; }
.ws-list li:hover { background: var(--panel2); }
.ws-list li.active { background: #1f3a5f; }
.ws-name { flex: 1; min-width: 0; overflow: hidden; }
.ws-t { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-p { display: block; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, monospace; }
.ws-acts { display: flex; gap: 4px; opacity: 0; flex: none; }
.ws-list li:hover .ws-acts { opacity: 1; }
.mini { padding: 1px 6px; font-size: 11px; }

.drop { margin: 10px 12px; padding: 14px 8px; border: 1.5px dashed var(--border); border-radius: 8px; text-align: center; color: var(--dim); font-size: 12px; flex: none; }
.drop.over { border-color: var(--accent); background: #12263f; }
.file-list { list-style: none; overflow-y: auto; flex: 1; font-size: 12px; min-height: 40px; }
.file-list li.dim { color: var(--dim); font-style: italic; }
.tickets-head { border-top: 1px solid var(--border); }
#ticketList { max-height: 18vh; flex: none; }
.file-list li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #1c2128; min-width: 0; }
.f-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-size { color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.f-acts { display: flex; gap: 4px; opacity: 0; flex: none; }
.file-list li:hover .f-acts { opacity: 1; }

/* terminal */
.term-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--dim); flex: none; }
.term-bar .spacer { flex: 1; }
#termLabel { font-family: Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.badge { border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; color: var(--dim); }
#term { flex: 1; min-height: 0; padding: 6px 10px; background: #0d1117; overflow: hidden; }
#term .xterm { height: 100%; }

/* modal dir picker */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; width: 480px; max-width: 90vw; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pick-path { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-family: Consolas, monospace; font-size: 12px; color: var(--accent); }
.pick-path span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-dirs { list-style: none; overflow-y: auto; flex: 1; font-family: Consolas, monospace; font-size: 13px; }
.pick-dirs li { padding: 7px 14px; cursor: pointer; border-bottom: 1px solid #1c2128; }
.pick-dirs li:hover { background: var(--panel2); color: var(--accent); }
.pick-dirs li.dim { color: var(--dim); font-style: italic; cursor: default; }
.modal-foot { padding: 10px 14px; border-top: 1px solid var(--border); text-align: right; }