/* PhoneCMD web client — same tokens as the site and the app. */
:root{
  --bg:#0a0a0f; --panel:#13131b; --panel2:#1a1a24; --line:#26262f; --line2:#33333f;
  --ink:#f2f2f7; --dim:#a0a0b0; --mute:#6b6b7a;
  --acc:#6b8cff; --acc-soft:rgba(107,140,255,.12);
  --ok:#3ecf8e; --warn:#f5a623; --danger:#ff6b6b;
  --grad:linear-gradient(135deg,#22d3ee 0%,#4b7bec 55%,#6b8cff 100%);
  --term:#0d0d12;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
code{font-family:var(--mono);font-size:.92em;background:var(--panel2);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* header */
header{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel);
}
.brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;
  font-family:var(--mono);font-weight:700;font-size:15px}
.brand img{border-radius:7px;display:block}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:700}
.status{margin-left:auto;display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--dim);font-family:var(--mono)}
header .usage{font-family:var(--mono);font-size:12px;color:var(--mute);margin-left:4px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--mute);flex:none}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(62,207,142,.15)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(245,166,35,.15)}
.dot.err{background:var(--danger);box-shadow:0 0 0 3px rgba(255,107,107,.15)}

/* buttons */
.btn{
  border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:var(--ink);
  font-family:var(--mono);font-size:13.5px;font-weight:600;padding:10px 16px;cursor:pointer;
  transition:border-color .15s,filter .15s;
}
.btn:hover{border-color:var(--acc)}
.btn:disabled{opacity:.6;cursor:default}
.btn.primary{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(75,123,236,.25)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.small{padding:6px 12px;font-size:12.5px}
.btn.wide{width:100%;padding:12px}

/* ── connect view ───────────────────────────────────────────── */
main{flex:1;min-height:0;display:flex;flex-direction:column}
/* `display:flex` above beats the default [hidden]{display:none}, so restore it
   explicitly — otherwise the terminal view shows behind the connect form. */
[hidden]{display:none !important}
.connect{
  max-width:520px;margin:auto;padding:32px 20px;width:100%;
}
.connect h1{font-family:var(--mono);font-size:24px;margin:0 0 10px;letter-spacing:-.02em}
.lede{color:var(--dim);margin:0 0 24px;font-size:15px}
label{display:block;font-family:var(--mono);font-size:12px;color:var(--mute);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
textarea{
  width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:12.5px;
  line-height:1.6;resize:vertical;word-break:break-all;
}
textarea:focus{outline:none;border-color:var(--acc)}
.check{display:flex;align-items:center;gap:9px;margin:14px 0 18px;
  text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:13.5px;color:var(--dim)}
.check input{accent-color:var(--acc);width:16px;height:16px}
.err{
  margin-top:14px;background:rgba(255,107,107,.10);border:1px solid rgba(255,107,107,.35);
  border-radius:9px;padding:11px 13px;color:#ffb3b3;font-size:13.5px;
}
.note{
  margin-top:26px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--acc);border-radius:10px;padding:14px 16px;
  color:var(--dim);font-size:13px;line-height:1.65;
}
.note b{color:var(--ink)}

/* ── app shell: tabs + panes ─────────────────────────────────── */
#appView{flex:1;min-height:0;display:flex;flex-direction:column}
.tabs{
  display:flex;gap:2px;padding:0 12px;background:var(--panel);
  border-bottom:1px solid var(--line);overflow-x:auto;
}
.tab{
  flex:none;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--dim);font-family:var(--mono);font-size:13px;font-weight:600;
  padding:12px 14px;cursor:pointer;white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.pane{flex:1;min-height:0;display:none;flex-direction:column;overflow-y:auto}
.pane.on{display:flex}
.pane h2{font-family:var(--mono);font-size:13px;color:var(--mute);text-transform:uppercase;
  letter-spacing:.06em;margin:18px 18px 10px}
.pane .hint{color:var(--dim);font-size:13px;margin:0 18px 12px}
.empty{color:var(--mute);font-size:13px;padding:16px 18px}

/* ── terminal pane ───────────────────────────────────────────── */
#pane-terminal{overflow:hidden}
.termbar{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;border-bottom:1px solid var(--line);background:var(--panel);
}
.shells{display:flex;gap:6px;overflow-x:auto;flex:1}
.shelltab{
  flex:none;background:var(--bg);color:var(--dim);border:1px solid var(--line);
  border-radius:8px;padding:6px 12px;font-family:var(--mono);font-size:12.5px;cursor:pointer;
}
.shelltab.on{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}
.screen{
  flex:1;min-height:0;margin:0;padding:16px 18px;overflow-y:auto;
  background:var(--term);color:#d6d6e2;
  font-family:var(--mono);font-size:13px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;
}
.keys{
  display:flex;gap:7px;padding:9px 18px;overflow-x:auto;
  border-top:1px solid var(--line);background:var(--panel);
}
.cap{
  flex:none;min-width:42px;padding:7px 11px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line2);border-radius:8px;
  font-family:var(--mono);font-size:12.5px;cursor:pointer;
}
.cap:hover{border-color:var(--acc)}
.cmdbar{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  border-top:1px solid var(--line);background:var(--panel);
}
.mode{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px;flex:none}
.mbtn{background:none;border:none;color:var(--dim);font-family:var(--mono);font-size:12px;
  font-weight:600;padding:6px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.mbtn.on{background:var(--acc);color:#fff}
.cmdbar input{
  flex:1;min-width:0;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:10px 13px;font-family:var(--mono);font-size:13.5px;
}
.cmdbar input:focus{outline:none;border-color:var(--acc)}

/* ── files pane ──────────────────────────────────────────────── */
.fbar,.hbar{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.hbar{justify-content:space-between}
.hbar h2{margin:0}
.fbar input{flex:1;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;font-family:var(--mono);font-size:12.5px}
.fbar input:focus{outline:none;border-color:var(--acc)}
.flist{flex:1;overflow-y:auto}
.frow{display:flex;align-items:center;gap:11px;padding:11px 18px;cursor:pointer;
  border-bottom:1px solid var(--line)}
.frow:hover{background:var(--acc-soft)}
.frow .fi{flex:none;font-size:16px}
.frow .fn{font-size:14px;word-break:break-all}
.editor{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.ebar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.epath{font-family:var(--mono);font-size:12px;color:var(--dim);word-break:break-all}
.espacer{flex:1}
.editor textarea{flex:1;min-height:0;resize:none;background:var(--term);color:#d6d6e2;
  border:none;padding:14px 16px;font-family:var(--mono);font-size:13px;line-height:1.55}
.editor textarea:focus{outline:none}

/* ── sessions / history lists ────────────────────────────────── */
.list{overflow-y:auto}
.srow,.hrow{display:flex;align-items:center;gap:12px;padding:11px 18px;
  border-bottom:1px solid var(--line)}
.srow .sn{flex:1;font-family:var(--mono);font-size:13.5px}
.srow.on .sn{color:var(--acc)}
.hrow .hc{flex:1;font-family:var(--mono);font-size:12.5px;color:var(--dim);word-break:break-all}
.hrow .btn,.srow .btn{flex:none}
.clis{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:0 18px 18px}
.cli{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;cursor:pointer;text-align:left;color:var(--ink)}
.cli:hover{border-color:var(--acc)}
.cli b{font-family:var(--mono);font-size:13.5px}
.cli span{font-family:var(--mono);font-size:11px;color:var(--ok)}
.cli.off{opacity:.5;cursor:default}
.cli.off span{color:var(--mute)}

/* ── settings pane ───────────────────────────────────────────── */
#pane-settings{padding:0 18px 24px;max-width:560px}
#pane-settings label{display:block;font-family:var(--mono);font-size:12px;color:var(--mute);
  text-transform:uppercase;letter-spacing:.06em;margin:14px 0 6px}
#pane-settings input[type=password],#pane-settings select{
  width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;font-family:var(--mono);font-size:13px}
#pane-settings input:focus,#pane-settings select:focus{outline:none;border-color:var(--acc)}
.warn{margin:12px 0;background:rgba(245,166,35,.10);border:1px solid rgba(245,166,35,.32);
  border-left:3px solid var(--warn);border-radius:10px;padding:13px 15px;color:var(--dim);font-size:13px;line-height:1.6}
.warn b{color:var(--ink)}
.ok{color:var(--ok);font-family:var(--mono);font-size:12.5px;margin-top:10px}
#saveSettingsBtn{margin-top:18px}

/* ── limit → upgrade modal ───────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.66);display:flex;
  align-items:center;justify-content:center;padding:24px;z-index:50}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px;max-width:380px;width:100%;text-align:center}
.mcard h3{margin:0 0 8px;font-family:var(--mono);font-size:19px}
.mcard p{color:var(--dim);font-size:14px;margin:0 0 20px;line-height:1.55}
.mcard .plans{display:flex;gap:12px;margin-bottom:18px}
.mcard .plan{flex:1;position:relative;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:16px 10px;color:var(--ink);text-decoration:none}
.mcard .plan.best{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.mcard .plan .pp{font-family:var(--mono);font-size:26px;font-weight:700}
.mcard .plan .pu{font-family:var(--mono);font-size:12px;color:var(--mute)}
.mcard .plan .tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;
  padding:2px 9px;border-radius:99px;white-space:nowrap}
.mcard .btn.wide{margin-top:8px}

/* ── toast ───────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:10px;
  padding:11px 16px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:600px){
  .connect{padding:22px 16px}
  .connect h1{font-size:21px}
  .tab{padding:12px 10px;font-size:12px}
}