:root { --bg:#0c0d12; --panel:#14151c; --panel2:#1c1d26; --line:#23252f; --line2:#33353f; --text:#d8dae5;
  --muted:#8a8da0; --accent:#7c5cff; --ok:#5fd08a; --warn:#ffb27a; --err:#ff9a9a; --vh:100vh; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--text); overflow:hidden;
  font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-tap-highlight-color:transparent; }
body { height:var(--vh); }
[hidden] { display:none !important; }
button { font:inherit; color:var(--text); background:#22242e; border:1px solid var(--line2); border-radius:9px;
  padding:6px 11px; cursor:pointer; touch-action:manipulation; }
button:hover { background:#2b2d39; } button:active { background:#34364a; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.ghost { background:transparent; border-color:transparent; }
button.small { padding:4px 9px; font-size:12.5px; }
button.ic { padding:5px 8px; min-width:32px; }
button.tog.on { background:var(--accent); border-color:var(--accent); color:#fff; }
button.warn { color:var(--warn); }
.grow { flex:1; min-width:0; }
.sub { color:var(--muted); }

.gate { position:fixed; inset:0; display:flex; padding:20px; background:var(--bg); z-index:50; }
.card { margin:auto; width:min(420px,100%); background:var(--panel); border:1px solid #2a2c37; border-radius:16px;
  padding:24px; text-align:center; }
.card h1 { font-size:18px; margin:6px 0; } .gate-icon { font-size:38px; }
.card p { margin:8px 0 16px; }

#app { display:flex; flex-direction:column; height:100%; padding-top:env(safe-area-inset-top,0); }
#bar { display:flex; align-items:center; gap:10px; padding:5px 10px; background:var(--panel); border-bottom:1px solid var(--line); }
.dot { width:9px; height:9px; border-radius:50%; background:var(--warn); flex:none; }
.dot.ok { background:var(--ok); } .dot.bad { background:#ff6b6b; }
.cwd { color:var(--muted); font:12px ui-monospace,Consolas,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; text-align:left; max-width:55vw; }
#main { flex:1; display:flex; min-height:0; position:relative; }
#termWrap { flex:1; min-width:0; position:relative; padding:4px 0 0 6px; }
#term { height:100%; }
.overlay { position:absolute; inset:0; background:rgba(12,13,18,.82); display:flex; padding:20px; z-index:5; }

.files { width:340px; flex:none; display:flex; flex-direction:column; background:var(--panel); border-left:1px solid var(--line); min-height:0; position:relative; }
.f-head { display:flex; gap:5px; padding:7px; border-bottom:1px solid var(--line); align-items:center; }
.path { flex:1; min-width:0; background:var(--panel2); border:1px solid var(--line2); border-radius:9px; color:var(--text);
  padding:6px 9px; font:12.5px ui-monospace,Consolas,monospace; outline:none; }
.path:focus { border-color:var(--accent); }
#fHidden.on { background:var(--accent); border-color:var(--accent); }
.f-sync { display:flex; gap:6px; align-items:center; padding:5px 8px; font-size:12px; color:var(--muted); background:#101117; border-bottom:1px solid var(--line); }
.f-sync span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; text-align:left; }
.f-list { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid #1a1b23; cursor:pointer; user-select:none; -webkit-user-select:none; }
.row:hover { background:#1a1b25; } .row.sel { background:#251f40; }
.row .ico { width:20px; text-align:center; flex:none; }
.row .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .tg { color:var(--muted); font-size:12px; }
.row .sz { color:var(--muted); font-size:11.5px; flex:none; }
.row.broken .nm { color:var(--err); text-decoration:line-through; }
.f-empty { padding:20px; text-align:center; color:var(--muted); }
.f-sel { display:flex; gap:6px; align-items:center; padding:7px 8px; border-top:1px solid var(--line); background:#101117; }
.f-sel #fSelName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; }
.drop-hint { position:absolute; inset:0; background:rgba(124,92,255,.25); border:2px dashed var(--accent); display:flex; align-items:center; justify-content:center; pointer-events:none; }

#keys { display:flex; gap:5px; padding:5px 6px calc(5px + env(safe-area-inset-bottom,0)); overflow-x:auto; background:var(--panel); border-top:1px solid var(--line); scrollbar-width:none; }
#keys::-webkit-scrollbar { display:none; }
#keys button { flex:none; min-width:38px; padding:7px 9px; }

.toast { position:fixed; left:50%; bottom:70px; transform:translateX(-50%); max-width:90vw; background:#2a2c3a; border:1px solid var(--line2);
  padding:9px 14px; border-radius:11px; z-index:100; box-shadow:0 6px 24px rgba(0,0,0,.5); }
.toast.err { border-color:#6a3030; color:var(--err); }
.only-narrow { display:none; }

@media (max-width:760px) {
  .files { position:absolute; left:0; right:0; bottom:0; width:auto; height:72%; border-left:none; border-top:1px solid var(--line2);
    border-radius:14px 14px 0 0; transform:translateY(105%); transition:transform .18s ease; z-index:20; box-shadow:0 -8px 30px rgba(0,0,0,.5); }
  .files.open { transform:none; }
  .only-narrow { display:inline-block; }
  .cwd { max-width:40vw; }
}
@media (min-width:761px) { #btnFiles { display:none; } }