* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--jg-bg); color: var(--jg-fg); font: var(--jg-font-size)/var(--jg-line-height) var(--jg-font); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; padding: 0; text-align: left; }
button:hover { color: var(--jg-accent); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 1px solid var(--jg-accent); outline-offset: 2px; }
input, textarea, select { background: var(--jg-bg); border: 1px solid var(--jg-border-strong); padding: .5em; width: 100%; }
.copy-buffer { position: fixed; top: -1000px; left: 0; }
textarea { min-height: 6em; resize: vertical; }
a { color: var(--jg-accent); overflow-wrap: anywhere; }
.frame { position: relative; max-width: var(--jg-layout-max-width); padding: 0 var(--jg-layout-pad-x); margin: auto; height: 100dvh; display: flex; flex-direction: column; }
header { display: flex; align-items: center; gap: 3ch; min-height: 3.4em; border-bottom: 1px solid var(--jg-border); }
.brand { color: var(--jg-accent); font-weight: bold; white-space: nowrap; }
nav { display: flex; gap: 2ch; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
nav button { color: var(--jg-muted); } nav kbd { color: var(--jg-dim); } nav .active { color: var(--jg-fg); font-weight: bold; } nav .active kbd { color: var(--jg-accent); }
.connection { margin-left: auto; color: var(--jg-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ok { color: var(--jg-ok); } .warn { color: var(--jg-warn); } .err { color: var(--jg-err); } .muted { color: var(--jg-muted); } .dim { color: var(--jg-dim); } .accent { color: var(--jg-accent); }
.content { overflow: auto; flex: 1; padding: 2em 0; min-height: 0; min-width: 0; }
.title { display: flex; justify-content: space-between; margin-bottom: 1.5em; letter-spacing: .04em; font-weight: bold; }
.panes { display: grid; grid-template-columns: minmax(25ch,var(--jg-layout-list-width)) minmax(0,1fr); gap: var(--jg-layout-gutter); }
.list { min-width: 0; } .row { display: block; width: 100%; padding: .35em 1ch; overflow-wrap: anywhere; } .row.selected { background: var(--jg-select-bg); } .row .cursor { color: var(--jg-accent); }
.table-row { display: grid; align-items: baseline; gap: .5ch; white-space: nowrap; overflow: hidden; }
.table-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-row { grid-template-columns: 2ch 2ch minmax(0,17ch) 6ch 5ch; }
.device-row .badge { text-align: right; }
.session-row { grid-template-columns: 2ch 14ch minmax(10ch,18ch) minmax(10ch,1fr) 12ch 9ch 8ch; column-gap: 1ch; }
.session-detail { margin-top: 2em; max-width: 80ch; }
.opencode-panes { grid-template-columns: minmax(0,65ch) minmax(0,1fr); }
.opencode-row { grid-template-columns: 2ch 2ch minmax(0,1fr) minmax(0,var(--oc-dir-width,12ch)) var(--oc-state-width,7ch) var(--oc-pending-width,3ch) var(--oc-time-width,7ch); column-gap: 2ch; }
.opencode-empty-row { grid-template-columns: 2ch minmax(0,1fr); }
.ssh-key-row { grid-template-columns: 2ch 15ch minmax(14ch,24ch) minmax(10ch,1fr) minmax(20ch,32ch); }
.web-session-row { grid-template-columns: 2ch minmax(14ch,24ch) 12ch minmax(14ch,1fr) 16ch; }
.account-row { grid-template-columns: 2ch 18ch 16ch 10ch minmax(14ch,1fr) 14ch; }
.section-label { margin: 1.5em 0 .4em; color: var(--jg-muted); }
.bridge-key { display: flex; align-items: baseline; gap: 2ch; min-width: 0; } .bridge-key code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail { min-width: 0; overflow-wrap: anywhere; } .detail h2 { font-size: 1em; margin: 0 0 .25em; } .detail dl { display: grid; grid-template-columns: 11ch minmax(0,1fr); gap: .8em 1ch; margin: 2em 0; } dt { color: var(--jg-muted); } dd { margin: 0; white-space: pre-wrap; }
.actions { display: flex; gap: 2ch; flex-wrap: wrap; margin-top: 1.5em; } .chip { color: var(--jg-muted); white-space: nowrap; } .chip kbd { color: var(--jg-fg); } kbd { font: inherit; } .actions .primary { color: var(--jg-accent-fg); } .actions .primary kbd { color: var(--jg-accent-fg); }
.actions .chip.err { color: var(--jg-err); }
.primary { background: var(--jg-accent); color: var(--jg-accent-fg); padding: .35em 1ch; } .primary:hover { color: var(--jg-accent-fg); }
footer { border-top: 1px solid var(--jg-border); padding: 1em 0; display: flex; gap: 3ch; min-height: 3.5em; align-items: flex-start; }
.hint-list { display: flex; flex: 1; min-width: 0; gap: .4em 3ch; overflow: hidden; white-space: nowrap; }
.hint-list .chip, .help-hint { flex: 0 0 auto; } .help-hint { margin-left: auto; }
.overlay { position: fixed; inset: 0; background: color-mix(in srgb,var(--jg-bg) 80%,transparent); display: grid; place-items: center; padding: 1em; z-index: 4; }
.overlay[hidden] { display: none; }
.modal { border: 1px solid var(--jg-border-strong); background: var(--jg-surface); padding: 2em 2ch; width: min(60ch,100%); max-height: 90dvh; overflow: auto; } .modal h2 { font-size: 1em; color: var(--jg-accent); margin: 0 0 1.5em; } .modal label { display: block; margin: 1em 0; color: var(--jg-muted); } .modal p { white-space: pre-wrap; overflow-wrap: anywhere; }
.modal { scrollbar-width: thin; scrollbar-color: var(--jg-border-strong) var(--jg-surface); } .modal::-webkit-scrollbar { width: .5ch; } .modal::-webkit-scrollbar-track { background: var(--jg-surface); } .modal::-webkit-scrollbar-thumb { background: var(--jg-border-strong); }
.help-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5em 2ch; } .help-grid p { margin: 0; }
.account-qr { display: block; width: min(220px,100%); height: auto; margin: 1em auto; } .account-qr .qr-light { fill: var(--jg-term-bright-white); } .account-qr .qr-dark { fill: var(--jg-bg); }
.account-secret, .account-uri, .recovery-codes { overflow-wrap: anywhere; white-space: pre-wrap; } .account-status { color: var(--jg-warn); }
.login-form { width: min(42ch,100%); text-align: left; margin-top: 1em; } .login-form label { display: block; margin: .7em 0; color: var(--jg-muted); } .login-form button { margin-top: .6em; } .login-form .login-error { color: var(--jg-warn); }
.ssh-hint { margin-top: 1em; max-width: 70ch; font-size: .9em; } .ssh-hint p { margin: .5em 0; overflow-wrap: anywhere; }
.toaststack { position: fixed; bottom: 5em; right: 2ch; z-index: 6; display: grid; gap: .5em; max-width: calc(100vw - 4ch); pointer-events: none; } .toast { background: var(--jg-raised); padding: .6em 1ch; overflow-wrap: anywhere; }
.message, .splash { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2ch; text-align: center; } .message h1 { font-size: 1em; margin-top: 2em; } .message code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.handoff-action { display: inline-block; margin-top: 1em; text-decoration: none; }
.logo { color: var(--jg-accent); line-height: 1.1; max-width: 100%; overflow: hidden; white-space: pre; animation: reveal var(--jg-splash-ms) steps(34,end); } @keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.terminal-content { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sessionbar { padding: .8em 0; display: flex; align-items: baseline; gap: 2ch; white-space: nowrap; min-width: 0; }
.sessionbar .session-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.sessionbar .session-count, .sessionbar .session-hint { flex: 0 0 auto; color: var(--jg-muted); }
.terminal { min-height: 0; min-width: 0; flex: 1; overflow: hidden; background: var(--jg-bg); }
.terminal .xterm { height: 100%; background: var(--jg-bg); }
.terminal .xterm .xterm-viewport { background: var(--jg-bg); scrollbar-width: none; }
.terminal .xterm .xterm-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
.terminal .xterm .xterm-scrollable-element > .scrollbar { display: none !important; }
.extra-keys { display: none; }
.extra-keys button { min-width: 0; min-height: 36px; text-align: center; background: var(--jg-raised); font-size: .85em; touch-action: manipulation; }
.extra-keys button.active { color: var(--jg-accent); background: var(--jg-accent-dim); }
.back { display: none; margin-bottom: 1em; } .too-small { display: none; }
@media (max-width: 760px) {
  header { flex-wrap: wrap; gap: .4em 2ch; padding: .6em 0; } nav { order: 3; width: 100%; } .connection { max-width: 60%; }
  .panes { display: block; } .panes .detail { display: none; } .panes.show-detail .list { display: none; } .panes.show-detail .detail, .panes.show-detail .back { display: block; }
  .device-row { grid-template-columns: 2ch 2ch minmax(0,1fr) 6ch 5ch; }
  .session-row { grid-template-columns: 2ch 14ch minmax(0,1fr) 9ch; }
  .session-row .cursor { grid-column: 1; grid-row: 1; } .session-row > span:nth-child(2) { grid-column: 2; grid-row: 1; } .session-row > span:nth-child(3) { grid-column: 3; grid-row: 1; }
  .session-row .session-state { grid-column: 4; grid-row: 1; } .session-row .session-kind { grid-column: 2; grid-row: 2; } .session-row .session-clients { grid-column: 3; grid-row: 2; } .session-row .session-age { grid-column: 4; grid-row: 2; }
  .opencode-row { grid-template-columns: 2ch 2ch minmax(0,1fr) minmax(0,min(var(--oc-dir-width,11ch),11ch)) var(--oc-pending-width,3ch); }
  .opencode-row .cursor { grid-column: 1; grid-row: 1; } .opencode-row > span:nth-child(2) { grid-column: 2; grid-row: 1; } .opencode-row > span:nth-child(3) { grid-column: 3; grid-row: 1; } .opencode-row > span:nth-child(4) { grid-column: 4; grid-row: 1; }
  .opencode-row .oc-pending { grid-column: 5; grid-row: 1; } .opencode-row .oc-state { grid-column: 3; grid-row: 2; } .opencode-row .oc-age { grid-column: 4 / 6; grid-row: 2; }
  .ssh-key-row { grid-template-columns: 2ch 12ch minmax(0,1fr) 10ch; } .ssh-key-row .key-meta { grid-column: 2 / -1; }
  .web-session-row { grid-template-columns: 2ch minmax(0,1fr) 16ch; } .web-session-row .web-seen { grid-column: 2; grid-row: 2; } .web-session-row .web-current { grid-column: 3; grid-row: 2; }
  .account-row { grid-template-columns: 2ch minmax(0,1fr) 14ch; } .account-row .account-disabled { grid-column: 2; grid-row: 2; } .account-row .account-login { grid-column: 2; grid-row: 3; } .account-row .account-recovery { grid-column: 3; grid-row: 3; }
  footer { gap: 1ch; } .hint-list { flex-wrap: wrap; max-height: calc(2 * var(--jg-font-size) * var(--jg-line-height) + .4em); }
  .sessionbar { gap: 1ch; } .sessionbar .session-hint { display: none; }
  .extra-keys { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 2px; padding: .5em 0 env(safe-area-inset-bottom); }
  .help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 319px), (max-height: 215px) { .frame { display: none; } .too-small { display: grid; place-items: center; min-height: 100dvh; text-align: center; color: var(--jg-muted); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; scroll-behavior: auto !important; } }