@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2) format("woff2"); }

/* Warm gold on a cool off-white canvas (Stitch "AuraSnapAI Redesign"). */
:root {
  --bg: #f7f9ff; --card: #fff; --low: #f1f4f9; --mid: #ebeef3; --high: #e5e8ee; --line: #e5e8ee;
  --fg: #181c20; --muted: #4d4638; --soft: #7e7666; --outline: #d0c5b3;
  --primary: #745b0f; --gold: #b89a4a; --gold-hi: #f2e07a; --brown: #745a37;
  --champ: #fedaae; --champ-soft: #fff1dc; --on-champ: #291800;
  --ink: #2d3135; --ink-fg: #eef1f6;
  --ok: #10b981; --warn: #b89a4a; --bad: #ba1a1a; --bad-bg: #ffdad6; --on-bad: #93000a; --accent: var(--gold);
  --shadow: 0 2px 8px -2px rgb(24 28 32 / .05), 0 8px 24px -4px rgb(24 28 32 / .04);
  --shadow-hi: 0 12px 32px -4px rgb(24 28 32 / .09), 0 4px 12px -2px rgb(24 28 32 / .04);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111315; --card: #1a1c1f; --low: #212428; --mid: #26292d; --high: #2d3135; --line: #2a2d31;
    --fg: #ebe7df; --muted: #b4ab9b; --soft: #8f8778; --outline: #4d4638;
    --primary: #e4c36e; --brown: #e3c197; --champ: #5a4322; --champ-soft: #2c2418; --on-champ: #ffddb4;
    --ink: #0b0c0e; --bad: #ffb4ab; --bad-bg: #3b1412; --on-bad: #ffdad6;
    --shadow: 0 1px 2px rgb(0 0 0 / .3); --shadow-hi: 0 12px 32px rgb(0 0 0 / .45);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
code, .mono { font-family: var(--mono); }
code { background: var(--mid); padding: 1px 6px; border-radius: 6px; font-size: .88em; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.ic { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.ic.big { width: 26px; height: 26px; }

/* Controls */
button, select, input { font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; }
button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background .15s, border-color .15s, filter .15s, transform .1s; }
button:active:not(:disabled) { transform: scale(.98); }
button:disabled { opacity: .5; cursor: default; }
button.danger { color: var(--bad); }
select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Pill buttons: .btn for links, button.* for buttons. Gold gradient is the primary action. */
.btn, button.primary, button.dark, button.ghost, button.danger.wide, button.gold-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; padding: 9px 18px; border: 0; }
.btn { background: var(--card); color: var(--fg); box-shadow: var(--shadow); font-size: 14px; }
.btn:hover { text-decoration: none; background: var(--low); }
.btn.primary, button.primary { background: linear-gradient(100deg, var(--gold), var(--gold-hi)); color: #241a00; box-shadow: 0 4px 14px -4px rgb(184 154 74 / .55); }
.btn.primary:hover, button.primary:hover:not(:disabled) { filter: brightness(1.05); background: linear-gradient(100deg, var(--gold), var(--gold-hi)); }
.btn.dark, button.dark { background: var(--ink); color: #fff; box-shadow: 0 4px 14px -6px rgb(0 0 0 / .5); }
.btn.dark:hover, button.dark:hover:not(:disabled) { background: #1d2023; }
.btn.gold-solid, button.gold-solid { background: var(--primary); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.gold-solid, button.gold-solid { color: #241a00; } }
.btn.soft, button.ghost { background: var(--mid); color: var(--fg); box-shadow: none; }
.btn.soft:hover, button.ghost:hover:not(:disabled) { background: var(--high); }
.btn.big { padding: 13px 26px; font-size: 16px; }
.btn.small { padding: 4px 12px; font-size: 12px; font-family: var(--mono); font-weight: 500; }
.btn.wide, button.wide { width: 100%; padding: 13px; font-size: 15px; }
button.danger.wide { background: #b3261e; color: #fff; }
button.danger.wide:hover:not(:disabled) { background: #9c1f18; }
button.link { background: none; border: 0; color: var(--primary); padding: 6px 4px; }
button.icon { background: none; border: 0; padding: 6px; border-radius: 999px; color: var(--muted); }
button.icon:hover { background: var(--mid); color: var(--fg); }
button.icon.danger:hover { color: var(--bad); background: var(--bad-bg); }
button.icon .ic { width: 17px; height: 17px; }
button.chip { border: 0; border-radius: 999px; background: var(--mid); color: var(--muted); font: 500 12px var(--mono); padding: 7px 14px; }
button.chip:hover { background: var(--high); color: var(--fg); }
button.chip[aria-pressed="true"] { background: var(--champ); color: var(--on-champ); font-weight: 600; }

/* Labels and small type */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin: 0 0 10px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.eyebrow.plain::before { display: none; }
.label { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font: 500 11px/1.6 var(--mono); background: var(--mid); color: var(--muted); white-space: nowrap; }
.tag.gold { background: var(--champ); color: var(--on-champ); }
.tag.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: #047857; }
@media (prefers-color-scheme: dark) { .tag.ok { color: #6ee7b7; } }
.tag.free { background: var(--champ-soft); color: var(--primary); padding: 8px 16px; font-size: 12px; }

/* Header */
#top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 8px rgb(24 28 32 / .05); }
#top[hidden] { display: none; }
.topin { max-width: 1080px; margin: 0 auto; height: 64px; padding: 0 16px; display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; color: var(--fg); letter-spacing: -.02em; white-space: nowrap; }
.brand em { font-style: normal; color: var(--brown); }
.brand:hover { text-decoration: none; }
#nav { flex: 1; display: flex; align-items: center; gap: 14px; font-size: 14px; min-width: 0; }
#nav > .signin { margin-left: auto; font-weight: 600; color: var(--fg); }

.rail { display: flex; gap: 2px; padding: 4px; background: var(--mid); border-radius: 999px; }
.tab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  color: var(--muted); font: 500 12px var(--mono); letter-spacing: .02em; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.tab .ic { width: 15px; height: 15px; }
.tab:hover { color: var(--fg); background: var(--high); text-decoration: none; }
.tab.active { color: var(--on-champ); background: var(--champ); font: 600 14px var(--sans); }
.acct { position: relative; margin-left: auto; }
.acctbtn { display: inline-flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border: 0; border-radius: 999px; background: none; font: 500 12px var(--mono); color: var(--fg); }
.acctbtn:hover, .acctbtn.active { background: var(--mid); }
.caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; opacity: .6; }
.acctbtn[aria-expanded="true"] .caret { transform: translateY(1px) rotate(225deg); }
.avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; background: var(--primary); }
.avatar.gold { background: var(--champ); color: var(--on-champ); }
.avatar.big { width: 56px; height: 56px; font-size: 22px; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 60%, var(--primary)); color: #241a00; }
@media (prefers-color-scheme: dark) { .avatar { color: #241a00; } }

.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 264px; background: var(--card); border-radius: 16px; padding: 8px;
  box-shadow: var(--shadow-hi); z-index: 20; animation: pop .14s ease-out; transform-origin: top right; border: 1px solid var(--line); }
.menu[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.mhead .label { margin-bottom: 2px; }
.mhead { padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.memail { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mitem { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 14px; color: var(--muted); }
.mitem:hover, .mitem:focus { background: var(--mid); color: var(--fg); outline: none; }
.mitem.danger { color: var(--bad); }
.mitem.danger:hover, .mitem.danger:focus { background: var(--bad-bg); color: var(--on-bad); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* Page layout */
#view { width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 16px 64px; flex: 1; }
#view[hidden] { display: none; }
h1 { margin: 0 0 8px; font-size: 40px; line-height: 1.15; letter-spacing: -.03em; font-weight: 650; }
h2 { font-size: 20px; letter-spacing: -.015em; margin: 0 0 8px; font-weight: 600; }
h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.01em; font-weight: 600; }
.lead { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 640px; margin: 0; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.pagehead > .grow { flex: 1 1 340px; min-width: 0; }
.pagehead .lead { display: flex; align-items: center; gap: 8px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.close { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mid); color: var(--muted); margin-bottom: 18px; }
.close:hover { background: var(--high); color: var(--fg); text-decoration: none; }
.back { margin: 28px 0 0; font-size: 14px; }
.back a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; }

.card { background: var(--card); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); }
.note { display: flex; gap: 10px; align-items: flex-start; background: var(--low); border-radius: 12px; padding: 11px 13px; font: 12px/1.55 var(--mono); color: var(--muted); }
.note .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--primary); }
.note.ok .ic { color: var(--ok); }
.note.gold { background: var(--champ-soft); color: var(--on-champ); }
@media (prefers-color-scheme: dark) { .note.gold { color: var(--brown); } }
.tile { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--champ-soft); color: var(--brown); }
.tile .ic { width: 24px; height: 24px; }
.tile.sm { width: 36px; height: 36px; border-radius: 50%; }
.tile.sm .ic { width: 18px; height: 18px; }
.cols { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
.stackc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

/* Landing */
.landing { display: grid; gap: 96px; padding-top: 24px; }
.hero { text-align: center; }
.hero h1 { font-size: clamp(36px, 6.4vw, 60px); line-height: 1.06; margin-bottom: 18px; }
.hero .lead { margin: 0 auto 30px; font-size: 17px; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mock { position: relative; margin: 56px auto 0; max-width: 960px; background: #16181c; border-radius: 22px; padding: 0 16px 16px; box-shadow: 0 40px 80px -30px rgb(24 28 32 / .45); text-align: left; }
.mockbar { display: flex; align-items: center; gap: 14px; height: 48px; color: #d6d8dc; font: 500 12px var(--mono); }
.lights { display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; }
.mockbar .tag { background: #2a2d33; color: #b8bcc4; }
.screen { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, #6a3d8f 0, transparent 55%), radial-gradient(90% 80% at 10% 100%, #233a7a 0, transparent 60%), linear-gradient(135deg, #2a1640, #121a35); }
.term { position: absolute; left: 6%; top: 12%; width: min(46%, 380px); background: #141519f0; border-radius: 10px; box-shadow: 0 20px 40px rgb(0 0 0 / .4); font: 12px/1.7 var(--mono); color: #c9cdd4; overflow: hidden; }
.term header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #1d1f24; color: #8a8f98; font-size: 11px; }
.term header .lights i { width: 9px; height: 9px; }
.term pre { margin: 0; padding: 10px 14px 14px; white-space: pre-wrap; font: inherit; }
.term .g { color: #e4c36e; } .term .ok { color: #6ee7b7; }
.floatbar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 999px; background: #16181ce6; color: #d6d8dc; font: 500 11px var(--mono); white-space: nowrap; box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.floatbar .badge { background: var(--gold); color: #241a00; }
.floatbar .stop { background: #c83a32; color: #fff; padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.sigil { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #16181ce6; color: #d6d8dc; font: 11px var(--mono); white-space: nowrap; }
.sigil .ic { width: 14px; height: 14px; color: var(--gold-hi); }
.sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.sechead h2 { font-size: 28px; letter-spacing: -.02em; margin: 0; }
.sechead p { max-width: 380px; margin: 0; color: var(--muted); font-size: 14px; }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature { display: grid; align-content: start; gap: 6px; }
.feature .tile { margin-bottom: 12px; }
.feature p { margin: 0; font-size: 14px; color: var(--muted); }
.setup { background: var(--mid); border-radius: 28px; padding: 48px 40px; }
.setup h2 { font-size: 28px; letter-spacing: -.02em; }
.setup > p { color: var(--muted); max-width: 560px; margin: 0 0 32px; font-size: 14px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { display: grid; align-content: start; gap: 8px; }
.stephead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--soft); }
.stephead .num, .howto .num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--champ); color: var(--on-champ); font: 600 12px var(--mono); flex: none; }
.stephead .num.dim, .howto .num.dim { background: var(--high); color: var(--fg); }
.step p { margin: 0; font-size: 14px; color: var(--muted); }
.final { text-align: center; padding-bottom: 16px; }
.final h2 { font-size: 30px; letter-spacing: -.02em; }
.final p { color: var(--muted); margin: 0 0 24px; }

/* Auth */
/* Ambient gold glows behind the auth card; .auth makes no stacking context, so z-index -1 lands behind it. */
.auth::before, .auth::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.auth::before { width: 420px; height: 420px; left: -140px; top: -80px; background: rgb(228 195 110 / .22); }
.auth::after { width: 520px; height: 520px; right: -180px; bottom: -120px; background: rgb(255 221 180 / .32); }
.auth { position: relative; max-width: 480px; margin: 24px auto; background: var(--card); border-radius: 20px; padding: 36px; box-shadow: var(--shadow); }
.auth h1 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 4px; }
.auth .sub { color: var(--muted); margin: 0 0 24px; font-size: 14px; }
.auth > .spinner { margin: 20px auto; }
.auth > .tile { margin-bottom: 18px; }
.auth > p { color: var(--muted); }
.form { display: grid; gap: 18px; }
.form label, .form .field { display: grid; gap: 7px; }
.form label > span:first-child, .form .field > span:first-child { font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
.form input, .form select, .form textarea { width: 100%; padding: 12px 14px; font-size: 15px; background: var(--low); border: 1px solid transparent; border-radius: 10px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; background: var(--card); border-color: var(--gold); box-shadow: 0 0 0 3px rgb(184 154 74 / .2); }
.form input[type="password"] { letter-spacing: .1em; }
.form textarea { resize: vertical; min-height: 120px; }
.form label.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth > .note { margin-bottom: 20px; }
.form small { font-size: 12px; }
.form label[hidden] { display: none; }
.form > button { margin-top: 4px; }
.msg { margin: 0; font-size: 14px; min-height: 1em; }
.msg:empty { display: none; }
.msg.err { color: var(--bad); }
.msg.ok { color: #047857; }
@media (prefers-color-scheme: dark) { .msg.ok { color: #6ee7b7; } }
.alt { text-align: center; font-size: 14px; color: var(--muted); margin: 20px 0 0; }
.alt a { font-weight: 600; }

/* Computers */
.fleet { display: grid; gap: 40px; }
.fleethead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fleethead h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0; }
.legend { display: flex; gap: 14px; font: 500 11px var(--mono); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.dev { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 12px; transition: box-shadow .2s; }
.dev:hover { box-shadow: var(--shadow-hi); }
.dev.offline > :not(.chead):not(.foot) { opacity: .55; }
.dev.offline .tile { background: var(--mid); color: var(--soft); }
.chead { display: flex; gap: 14px; align-items: flex-start; }
.dev .name { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.name { font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.dev.offline .name { color: var(--muted); }
.status { font: 500 11px/1.5 var(--mono); color: var(--muted); display: flex; align-items: flex-start; gap: 7px; margin-top: 4px; }
.status .dot { margin-top: 5px; }
.actions { display: flex; gap: 0; margin: -4px -6px 0 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--outline); display: inline-block; flex: none; }
.dot.on { background: var(--ok); }
.dot.busy { background: var(--gold); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opts label { display: grid; gap: 6px; min-width: 0; }
.opts select { width: 100%; min-width: 0; background-color: var(--low); border-color: transparent; font-size: 13px; padding: 9px 30px 9px 12px; }
.dev > button.primary, .dev > button.dark { padding: 12px; font-size: 16px; }
.dev > button.primary:disabled { background: var(--mid); color: var(--soft); box-shadow: none; opacity: 1; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--soft); }
.fp { font: 11px var(--mono); color: var(--muted); word-break: break-all; letter-spacing: .02em; }
.foot .ic { width: 15px; height: 15px; }
.sharedby { display: grid; gap: 2px; }
.sharedby strong { font-family: var(--sans); color: var(--primary); }
a.note:hover { text-decoration: none; background: var(--mid); }
.quotaline { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 12px var(--mono); color: var(--muted); }
.slot { display: grid; align-items: center; min-height: 26px; }
.slot > * { grid-area: 1 / 1; }
.slot.relay > :not(.quotaline), .slot:not(.relay) > .quotaline { visibility: hidden; }
.quotaline .btn.small { flex: none; padding: 3px 12px; }
.bad { color: var(--bad); }
.addcard { display: grid; place-items: center; align-content: center; text-align: center; gap: 10px; padding: 36px 28px; background: var(--mid); border-radius: 20px; min-height: 280px; }
.addcard .tile { width: 64px; height: 64px; background: var(--card); color: var(--primary); box-shadow: var(--shadow); border-radius: 16px; margin-bottom: 8px; }
.addcard p { margin: 0 0 8px; color: var(--muted); max-width: 380px; font-size: 14px; }
.addcard.only { grid-column: 1 / -1; }

/* Link */
.seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--mid); border-radius: 999px; justify-self: start; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 6px 14px; color: var(--muted); font: 500 12px var(--mono); }
.seg button:hover { color: var(--fg); background: var(--high); }
.seg button[aria-selected="true"] { background: var(--champ); color: var(--on-champ); font-weight: 600; }
.seg .ic { width: 15px; height: 15px; }
.howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.howto li { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--low); }
.howto li:first-child { padding-top: 0; }
.howto li:last-child { padding-bottom: 0; border-bottom: 0; }
.howto li > div { flex: 1; min-width: 0; }
.howto p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.cmd { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: var(--ink); color: var(--ink-fg); border-radius: 12px; padding: 12px 12px 12px 16px; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 600 12.5px var(--mono); background: none; padding: 0; color: inherit; scrollbar-width: none; }
.cmd button { flex: none; border: 0; border-radius: 999px; background: #ffffff1f; color: inherit; font: 500 11px var(--mono); padding: 5px 12px; }
.cmd button:hover { background: #ffffff33; }
.cmd .ic { width: 14px; height: 14px; }
.havecode { padding: 0; }
.havecode summary { display: flex; align-items: center; gap: 12px; padding: 20px 24px; cursor: pointer; list-style: none; font-weight: 500; }
.havecode summary::-webkit-details-marker { display: none; }
.havecode summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.havecode[open] summary::after { transform: rotate(225deg); }
.havecode summary .ic { color: var(--primary); }
.havecode .form { padding: 0 24px 24px; }
.waiting { display: grid; gap: 16px; }
.waiting .row { display: flex; align-items: center; justify-content: space-between; }
.devbox { display: flex; align-items: center; gap: 14px; background: var(--low); border-radius: 16px; padding: 16px; }
.confirm { max-width: 460px; margin: 0 auto; display: grid; gap: 18px; }
.confirm h2 { margin: 0; }
.confirm .alt { margin: 0; }

/* Account */
.accthead { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; }
.accthead h1 { margin: 0; font-size: 30px; }
.accthead .memail { font-weight: 400; color: var(--muted); }
.accthead .eyebrow { margin-bottom: 6px; }
.cardhead { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.cardhead h2 { margin: 0; font-size: 18px; }
.cardhead .ic { color: var(--primary); }
.cardhead.bad h2, .cardhead.bad .ic { color: var(--bad); }
.warnbox { background: var(--bad-bg); color: var(--on-bad); border-radius: 14px; padding: 16px 18px; font-size: 13.5px; margin-bottom: 22px; }
.warnbox strong { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; }
.warnbox .ic { width: 16px; height: 16px; }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.acct-grid .card.focus { box-shadow: 0 0 0 2px var(--champ), var(--shadow-hi); }

/* Sharing */
.sharelist { display: grid; gap: 12px; }
.sharerow { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; background: var(--low); border-radius: 16px; padding: 14px 16px; }
.sharerow .memail { font-weight: 600; }
.sharerow .when { font: 11px var(--mono); color: var(--muted); }
.sharerow .rowacts { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px; }
.sharerow .rowacts button { border: 0; background: none; padding: 4px 8px; font: 500 12px var(--mono); }
.sharerow .rowacts button:hover { background: var(--mid); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.formfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; }
.formfoot .label { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: .02em; }
.formfoot .ic { width: 15px; height: 15px; }

/* Usage, quota and admin */
.ugrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 24px; }
.ustat { display: grid; gap: 4px; align-content: start; }
.ustat .top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ustat .top .grow h3 { margin: 0; }
.uval { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.uval small { font-size: 16px; font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.uval .label { margin-left: 6px; text-transform: none; }
.uval.sm { font-size: 24px; }
.meter { height: 10px; border-radius: 99px; background: var(--high); overflow: hidden; margin: 12px 0 8px; }
.meter span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.meter.low span { background: var(--bad); }
.meterlegend { display: flex; justify-content: space-between; gap: 8px; font: 11px var(--mono); color: var(--muted); }
.quotabox { background: var(--low); border-radius: 16px; padding: 16px 18px; margin: 0; }
.quota { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.buy { display: grid; gap: 10px; align-content: start; }
.buy .tile { margin-bottom: 8px; }
.buy h2 { margin: 0; }
.buy .btn { justify-self: start; margin-top: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.buy p { margin: 0; font-size: 14px; color: var(--muted); }
.form.inline .row { display: flex; gap: 8px; }
.form.inline .row input { flex: 1; min-width: 0; text-transform: uppercase; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; }
.admin { display: grid; gap: 16px; }
.admin h1 { margin-bottom: 4px; }
.admin .ugrid { margin: 0; }
.subhead { font-size: 18px; margin: 20px 0 0; }
.cform { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; background: var(--card); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); }
.cform .msg { grid-column: 1 / -1; margin: 0; }
.tablewrap { overflow-x: auto; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); }
.tablewrap > p { padding: 16px 20px; margin: 0; }
.atable { width: 100%; border-collapse: collapse; font-size: 13px; }
.atable th, .atable td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.atable th { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.atable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.atable tr.dim td { opacity: .5; }
.atable tbody tr:last-child td { border-bottom: 0; }
.atable .tag { margin-left: 6px; }

/* Footer */
#foot { border-top: 1px solid var(--line); background: var(--card); }
body:has(#session:not([hidden])) #foot { display: none; }
.footin { max-width: 1080px; margin: 0 auto; padding: 20px 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 11px var(--mono); color: var(--muted); }
.footin a { color: inherit; }

/* Remote session: a dark studio around the video */
#session { position: fixed; inset: 0; background: #0b0c0e; display: flex; flex-direction: column; overflow: hidden; font-family: var(--sans); color: #e6e8eb; }
#session[hidden] { display: none; }
#session, #screen { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#screen { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: contain; outline: none; cursor: default; touch-action: none; will-change: transform; }
.rcursor { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 1; will-change: transform; }
#overlay { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #d6d8dc; background: #0b0c0ee0; font: 13px var(--mono); }
#overlay[hidden] { display: none; }
.spinner { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid #ffffff22; border-top-color: var(--gold-hi); border-radius: 50%; animation: spin 1s linear infinite; }
.spinner.dark { border-color: var(--high); border-top-color: var(--gold); }
@keyframes spin { to { transform: rotate(360deg); } }
/* Windowed: a fixed bar above the screen. Fullscreen: slides away, leaving a grab strip at the top. */
#toolbar { order: -1; display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: none; background: #16181c; color: #e6e8eb; padding: 7px 10px; z-index: 2; border-bottom: 1px solid #24272d; font-size: 13px; }
#session:fullscreen #toolbar { position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(-100% + 6px)); transition: transform .2s; background: #16181ce8;
  border: 0; border-radius: 0 0 18px 18px; max-width: calc(100vw - 16px); border-bottom: 3px solid var(--gold); box-shadow: 0 12px 30px rgb(0 0 0 / .45); }
#session:fullscreen #toolbar:hover, #session:fullscreen #toolbar:focus-within, #session:fullscreen #toolbar.pinned { transform: translate(-50%, 0); }
#toolbar button, #toolbar select { background: #24272d; border: 0; color: #e6e8eb; padding: 6px 11px; border-radius: 999px; font: 500 12px var(--mono); }
#toolbar select { padding-right: 28px; }
#toolbar button:hover, #toolbar select:hover { background: #2f333a; }
#toolbar button.tb { padding: 6px 9px; }
#toolbar button.gold, #filesPanel button.gold { background: #e4c36e26; color: #f2d98a; }
#toolbar button.gold:hover, #filesPanel button.gold:hover { background: #e4c36e40; }
#toolbar #byeBtn { background: #c83a32; color: #fff; font-weight: 600; padding: 6px 14px; }
#toolbar #byeBtn:hover { background: #b0312a; }
#toolbar .ic { width: 16px; height: 16px; }
#toolbar button, #toolbar select { transition: background-color .15s, transform .1s; }
#toolbar button:active { transform: scale(.95); }
/* Fingers: bigger targets, and keep clear of notches. */
@media (pointer: coarse) {
  #toolbar { padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); gap: 8px; }
  #toolbar button, #toolbar select, .toggle { min-height: 40px; }
  #toolbar button.tb { min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
  #filesPanel { top: 57px; }
  #filesPanel button { min-height: 40px; }
}
#toolbar::-webkit-scrollbar { display: none; }
#toolbar > * { flex: none; }
#toolbar > .spacer { flex: 1; }
#statsText { display: flex; gap: 10px; white-space: nowrap; font: 11px var(--mono); font-variant-numeric: tabular-nums; color: #a9adb5; }
#statsText span { text-align: right; }
#statsText .st-ms { color: #6ee7b7; }
.st-ms { min-width: 6.5ch; } .st-rate { min-width: 9ch; } .st-fps { min-width: 6ch; } .st-res { min-width: 9ch; }
@media (max-width: 700px) { .st-res, .tblabel { display: none; } }
.toggle { display: flex; gap: 6px; align-items: center; font: 500 12px var(--mono); color: #c9cdd4; }
.toggle input { accent-color: var(--gold); }
.spacer { flex: 1; }
.badge { padding: 4px 10px; border-radius: 999px; font: 600 11px var(--mono); background: #33363d; color: #fff; }
.badge.LAN { background: #10b981; color: #022c22; } .badge.P2P { background: var(--gold); color: #241a00; } .badge.Relay { background: #f59e0b; color: #241a00; }
#keyboard { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; background: #16181c; padding: 7px 10px; border-top: 1px solid #24272d; position: relative; }
#keyboard[hidden] { display: none; }
#keyboard::-webkit-scrollbar { display: none; }
#keyboard button { flex: none; min-width: 44px; min-height: 40px; background: #24272d; border: 0; border-radius: 10px; color: #e6e8eb; padding: 4px 10px; font: 500 12px var(--mono); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#keyboard button.on { background: var(--gold); color: #241a00; }
/* Kept focusable (it raises the phone's keyboard) but invisible; 16px stops iOS zooming in on focus. */
.kb-field { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; font-size: 16px; padding: 0; border: 0; resize: none; pointer-events: none; }
#filesPanel { position: absolute; right: 0; top: 47px; bottom: 0; width: min(380px, 100vw); background: #16181c; color: #e6e8eb; border-left: 1px solid #24272d;
  padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; z-index: 3; box-shadow: -20px 0 40px rgb(0 0 0 / .35); }
#filesPanel[hidden] { display: none; }
#filesPanel header { display: flex; justify-content: space-between; align-items: center; font-size: 18px; }
#filesPanel button, #filesPanel input { background: #24272d; border: 0; color: #e6e8eb; border-radius: 10px; font: 12px var(--mono); }
#filesPanel #filesClose { background: none; padding: 6px; border-radius: 999px; }
#filesPanel #filesClose:hover { background: #24272d; }
.drop { display: grid; justify-items: center; gap: 8px; border: 1.5px dashed #3a3e46; border-radius: 14px; padding: 22px 16px; text-align: center; cursor: pointer; font: 12px/1.6 var(--mono); color: #d6d8dc; }
.drop .muted { color: #8a8f98; }
.drop .ic { color: var(--gold-hi); }
.drop:hover, .drop.over { border-color: var(--gold); background: #e4c36e0d; }
.pathrow { display: flex; gap: 6px; } .pathrow input { flex: 1; min-width: 0; padding: 8px 12px; }
#listing { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; font: 12px var(--mono); }
#listing li { padding: 9px 10px; border-radius: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#listing li > span:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#listing li .ic { width: 16px; height: 16px; color: #8a8f98; }
#listing li .ic.dir { color: var(--gold-hi); }
#listing li .muted { color: #8a8f98; flex: none; }
#listing li:hover { background: #24272d; }
#transfers { list-style: none; margin: 0; padding: 0; font: 11px var(--mono); max-height: 30%; overflow: auto; display: grid; gap: 8px; }
#transfers li { background: #1f2227; border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
#transfers progress { width: 100%; height: 4px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 99px; background: #33363d; overflow: hidden; }
#transfers progress::-webkit-progress-bar { background: #33363d; }
#transfers progress::-webkit-progress-value { background: var(--gold); }
#transfers progress::-moz-progress-bar { background: var(--gold); }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--ink-fg); padding: 10px 18px; border-radius: 999px;
  max-width: min(600px, calc(100vw - 32px)); white-space: pre-wrap; word-break: break-word; z-index: 40; font-size: 13px; box-shadow: var(--shadow-hi); }

/* Responsive */
@media (max-width: 900px) {
  .features { grid-template-columns: 1fr 1fr; }
  .cols, .acct-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
  .setup { padding: 32px 20px; border-radius: 22px; }
  .tab .tablabel { display: none; }
  .tab { padding: 0 11px; }
  .acctbtn .tablabel { display: none; }
  h1 { font-size: 30px; }
  .landing { gap: 64px; }
  .term { width: 62%; font-size: 10px; }
  .floatbar .hide-sm { display: none; }
}
@media (max-width: 560px) {
  .topin { gap: 12px; }
  .brand { font-size: 16px; }
  .brand img { width: 26px; height: 26px; }
  .features { grid-template-columns: 1fr; }
  .menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .auth { padding: 24px 20px; }
  .card { padding: 20px; }
  #view { padding-top: 24px; }
  .mock { padding: 0 8px 8px; border-radius: 16px; }
  .mockbar .tag, .sigil { display: none; }
  .term { left: 4%; top: 22%; width: 80%; }
}