:root{
  --bg:#000;
  --fg:#d7d7d7;
  --bar-1:#2f2f2f;
  --bar-2:#141414;
  --green:#22c55e;
  --dim:#6b6b6b;
  --line:#1c1c1c;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:'JetBrains Mono','Cascadia Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}

.app{
  display:flex;
  flex-direction:column;
  height:100dvh;
  min-height:100dvh;
  background:var(--bg);
  position:relative;
}

/* ------------------------------------------------------------- title bar */
.bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  height:calc(38px + var(--safe-t));
  padding:var(--safe-t) 10px 0;
  background:linear-gradient(180deg,var(--bar-1),var(--bar-2));
  border-bottom:1px solid #000;
  user-select:none;
  -webkit-user-select:none;
  z-index:20;
}
.bar-dots{display:flex;gap:7px;flex:0 0 auto}
.bar-dots i{width:12px;height:12px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.35)}
.d-red{background:#ff5f57}.d-yellow{background:#febc2e}.d-green{background:#28c840}

.bar-title{
  flex:1 1 auto;
  text-align:center;
  font-size:12.5px;
  font-weight:500;
  color:#e6e6e6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.bar-actions{flex:0 0 auto;display:flex;gap:5px}
.bar-actions button{
  width:30px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:5px;
  color:#dcdcdc;
  cursor:pointer;
  padding:0;
}
.bar-actions button:hover{background:rgba(255,255,255,.16)}
.bar-actions button:active{transform:scale(.93)}
.bar-actions button.active{background:rgba(34,197,94,.22);border-color:rgba(34,197,94,.5);color:#86efac}

/* ----------------------------------------------------------------- screen */
.screen{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  background:var(--bg);
  overflow:hidden;
}
.term-host{position:absolute;inset:0;padding:6px 4px 2px}
.term-host .xterm{height:100%}
.term-host .xterm-viewport{background:transparent !important;overflow-y:auto;-webkit-overflow-scrolling:touch}
.term-host .xterm-viewport::-webkit-scrollbar{width:8px}
.term-host .xterm-viewport::-webkit-scrollbar-track{background:transparent}
.term-host .xterm-viewport::-webkit-scrollbar-thumb{background:#2e2e2e;border-radius:4px}

.kbd-proxy{
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  opacity:0;border:0;background:transparent;color:transparent;
  font-size:16px;z-index:3;pointer-events:none;
}

/* keyboard tap ripple */
.kb-float{
  position:absolute;bottom:14px;
  padding:4px 9px;
  font-size:15px;
  color:#86efac;
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.4);
  border-radius:6px;
  pointer-events:none;
  animation:kbf 700ms ease-out forwards;
}
@keyframes kbf{
  0%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-46px)}
}

/* ------------------------------------------------------------ boot overlay */
.boot{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;background:var(--bg);
  transition:opacity .45s ease;
}
.boot.gone{opacity:0;pointer-events:none}
.boot-logo{margin-bottom:14px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.boot-title{font-size:clamp(17px,4.4vw,26px);font-weight:700;color:var(--green)}
.boot-sub{margin-top:8px;font-size:clamp(11px,2.8vw,13px);color:#8a8a8a;min-height:1.4em}
.boot-bar{margin-top:18px;width:min(260px,72vw);height:3px;background:#161616;border-radius:99px;overflow:hidden}
.boot-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#16a34a,#4ade80);transition:width .35s ease}
.boot-note{margin-top:22px;font-size:clamp(10px,2.6vw,12px);line-height:1.7;color:#5f5f5f;max-width:44ch}
.boot-note b{color:#8f8f8f;font-weight:500}

/* -------------------------------------------------------------- key bar */
.keybar{
  flex:0 0 auto;
  display:flex;
  gap:5px;
  padding:5px 7px;
  overflow-x:auto;
  background:#0a0a0a;
  border-top:1px solid var(--line);
  scrollbar-width:none;
}
.keybar::-webkit-scrollbar{display:none}
.kb-key{
  flex:0 0 auto;
  min-width:34px;height:32px;
  padding:0 8px;
  font-family:inherit;font-size:12.5px;
  color:#cfcfcf;background:#161616;
  border:1px solid #262626;border-radius:6px;
  cursor:pointer;user-select:none;-webkit-user-select:none;
}
.kb-key.wide{min-width:46px}
.kb-key.danger{color:#fca5a5;border-color:#3b2020}
.kb-key.held{background:rgba(34,197,94,.24);border-color:rgba(34,197,94,.55);color:#bbf7d0}
.kb-key:active{transform:scale(.94)}

/* ------------------------------------------------------------ command tray */
.tray{
  flex:0 0 auto;
  display:flex;
  gap:7px;
  padding:6px 10px calc(6px + var(--safe-b));
  background:#0c0c0c;
  border-top:1px solid var(--line);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tray::-webkit-scrollbar{display:none}
.key{
  flex:0 0 auto;
  font-family:inherit;font-size:12.5px;
  color:#c9c9c9;background:#161616;
  border:1px solid #262626;border-radius:99px;
  padding:7px 13px;cursor:pointer;white-space:nowrap;min-height:30px;
}
.key:hover{border-color:#3a3a3a;color:#fff}
.key:active{background:#1f1f1f;transform:scale(.96)}

/* ------------------------------------------------------------- files panel */
.files-panel{
  position:absolute;
  inset:0;
  z-index:30;
  display:none;
  flex-direction:column;
  background:#070707;
  padding-top:var(--safe-t);
}
.files-panel.open{display:flex}
.fp-head{
  flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  height:44px;padding:0 12px;
  background:linear-gradient(180deg,#1b1b1b,#101010);
  border-bottom:1px solid var(--line);
}
.fp-close{
  width:30px;height:30px;flex:0 0 auto;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:6px;color:#ddd;font-size:19px;line-height:1;cursor:pointer;
}
.fp-title{font-size:13px;font-weight:600;color:#eaeaea}
.fp-crumb{
  flex:1 1 auto;font-size:11.5px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;
}
.fp-actions{display:flex;gap:5px;flex:0 0 auto}
.fp-btn{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:6px;color:#ddd;font-family:inherit;font-size:12px;
  padding:7px 11px;cursor:pointer;min-height:32px;
}
.fp-btn:hover{background:rgba(255,255,255,.14)}
.fp-btn:active{transform:scale(.96)}
.fp-btn.wide{flex:1 1 0}

.fp-path{flex:0 0 auto;padding:9px 12px;border-bottom:1px solid var(--line)}
.fp-input{
  width:100%;
  background:#000;border:1px solid #262626;border-radius:6px;
  color:#d7d7d7;font-family:inherit;font-size:12.5px;
  padding:9px 11px;outline:none;
}
.fp-input:focus{border-color:#2f7a45}

.fp-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 0;
}
.fp-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  border-bottom:1px solid #101010;
  cursor:pointer;
  font-size:12.5px;
}
.fp-row:hover{background:#111}
.fp-row.dir .fp-name{color:#93c5fd}
.fp-icon{flex:0 0 auto;font-size:13px;opacity:.85}
.fp-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-size{flex:0 0 auto;font-size:10.5px;color:#555}
.fp-mini{
  flex:0 0 auto;
  width:30px;height:30px;
  background:transparent;border:1px solid #242424;border-radius:6px;
  color:#9a9a9a;font-size:13px;cursor:pointer;
}
.fp-mini:hover{border-color:#3d3d3d;color:#fff}
.fp-mini.danger:hover{border-color:#7f1d1d;color:#fca5a5}
.fp-empty{padding:26px 14px;text-align:center;color:#4d4d4d;font-size:12px}

.fp-foot{
  flex:0 0 auto;
  display:flex;gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--line);
  background:#0b0b0b;
}
.fp-note{
  flex:0 0 auto;
  padding:0 12px calc(8px + var(--safe-b));
  font-size:10.5px;color:#4a4a4a;
  background:#0b0b0b;
  text-align:center;
}

/* --------------------------------------------------------------- responsive */
@media (max-width:520px){
  .bar{height:calc(34px + var(--safe-t))}
  .bar-title{font-size:11px}
  .bar-actions button{width:28px;height:25px}
  .kb-key{font-size:11.5px;min-width:30px;height:30px}
  .key{font-size:11.5px;padding:6px 11px}
  .fp-row{padding:10px 12px}
}
@media (max-height:560px){
  .tray{display:none}
}
@media (min-width:900px){
  .files-panel{
    inset:38px 0 0 auto;
    width:min(460px,42vw);
    border-left:1px solid var(--line);
    box-shadow:-18px 0 40px rgba(0,0,0,.6);
  }
  .files-panel.open{display:flex}
}

/* --------------------------------------------------------------- paywall */
.gate{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:#040404;
  transition:opacity .5s ease;
}
.gate.gone{opacity:0;pointer-events:none}
.gate-card{
  width:min(460px,96vw);
  max-height:94dvh;
  overflow-y:auto;
  background:#0a0a0a;
  border:1px solid #232323;
  border-radius:10px;
  padding:18px;
  box-shadow:0 0 0 1px rgba(34,197,94,.06), 0 18px 60px rgba(0,0,0,.8);
}
.gate-top{
  display:flex;align-items:center;gap:7px;
  padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid #1c1c1c;
}
.gate-dot{width:10px;height:10px;border-radius:50%;display:block}
.g-r{background:#ff5f57}.g-y{background:#febc2e}.g-g{background:#28c840}
.gate-host{
  margin-left:auto;font-size:11px;color:#5f5f5f;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gate-log{margin-bottom:14px;font-size:13px;line-height:1.75}
.gl-line{color:#9a9a9a;white-space:pre-wrap;word-break:break-word}
.gl-ok{color:#22c55e;margin-right:6px}
.gl-highlight{color:#d7d7d7}
.gl-price{color:#4ade80;font-size:20px;font-weight:700;margin-top:2px}

.gate-form{display:flex;flex-direction:column;gap:11px}
.g-label{display:flex;flex-direction:column;gap:5px}
.g-prompt{font-size:11px;color:#5f8c5f;letter-spacing:.04em}
.gate-form input{
  width:100%;
  background:#000;
  border:1px solid #242424;
  border-radius:7px;
  color:#e8e8e8;
  font-family:inherit;
  font-size:15px;
  padding:11px 12px;
  outline:none;
  transition:border-color .15s;
}
.gate-form input::placeholder{color:#3a3a3a}
.gate-form input:focus{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.gate-row{display:flex;gap:10px}
.gate-row .g-label{flex:1}
.gate-error{
  font-size:12px;color:#f87171;
  background:rgba(248,113,113,.08);
  border:1px solid rgba(248,113,113,.3);
  border-radius:7px;
  padding:9px 11px;
}
.gate-buy{
  margin-top:2px;
  font-family:inherit;font-size:14px;font-weight:700;
  color:#04150a;
  background:linear-gradient(180deg,#4ade80,#22c55e);
  border:0;border-radius:8px;padding:13px;cursor:pointer;
  transition:transform .12s, filter .12s;
}
.gate-buy:hover{filter:brightness(1.06)}
.gate-buy:active{transform:scale(.98)}
.gate-buy:disabled{opacity:.6;cursor:default}
.gate-fine{margin:0;text-align:center;font-size:10.5px;color:#4d4d4d}
.gate-link{
  text-align:center;
  font-size:12px;
  color:#4ade80;
  text-decoration:none;
}
.gate-link:hover{text-decoration:underline}

.gate-done{text-align:center;padding:12px 4px 4px}
.gate-ascii{
  color:#22c55e;
  font-size:11px;
  line-height:1.15;
  overflow-x:auto;
  margin:0 auto 10px;
  display:inline-block;
  text-align:left;
}
.gate-thanks{font-size:19px;color:#f2f2f2;margin-top:8px}
.gate-msg{font-size:12.5px;color:#8b8b8b;margin-top:6px}
.gate-spinwrap{margin-top:12px}
.gate-spin{
  display:inline-block;width:16px;height:16px;
  border:2px solid #1f4d30;border-top-color:#4ade80;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.confetti{
  position:absolute;
  top:42%;
  width:9px;height:14px;
  border-radius:2px;
  pointer-events:none;
  animation:conf 1.5s ease-in forwards;
}
@keyframes conf{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx), 340px) rotate(var(--rot));opacity:0}
}

/* ---------------------------------------------------- mobile refinements */
@media (max-width:600px){
  .boot-title{font-size:19px}
  .boot-note{font-size:11px}
  .keybar{padding:6px 6px}
  .kb-key{height:36px;min-width:38px;font-size:13px}
  .tray{padding-bottom:calc(8px + var(--safe-b))}
  .key{padding:8px 14px;font-size:13px}
}
@media (pointer:coarse){
  .fp-row{padding:12px 14px}
  .fp-btn{min-height:36px}
  .kb-key{min-height:38px}
}