/* SPDX-License-Identifier: AGPL-3.0-or-later */
:root {
  --bg: #0a0e13;
  --bg-2: #0f141b;
  --surface: #131a23;
  --surface-2: #19222d;
  --border: #243142;
  --text: #e7edf4;
  --muted: #94a3b6;
  --faint: #64748b;
  --cyan: #22d3ee;
  --cyan-2: #67e8f9;
  --cyan-dim: rgba(34, 211, 238, 0.14);
  --violet: #a78bfa;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --radius: 14px;
  --maxw: 1180px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--cyan-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
code, pre { font-family: var(--mono); font-size: 0.9em; }
code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 0.1em 0.4em; }
pre {
  background: #070a0e; border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto; line-height: 1.5; margin: 12px 0;
}
pre code { background: none; border: 0; padding: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 750; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
.section { padding: 72px 0; }
.section.alt { background: var(--bg-2); border-block: 1px solid #151c26; }
.eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 12px;
}
.lede { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--muted); max-width: 46ch; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 14, 19, 0.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid #151c26;
}
.nav .wrap { display: flex; align-items: center; gap: 16px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.brand svg { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: 0.93rem; padding: 8px 10px; border-radius: 8px;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); background: var(--surface); }
.nav-links .hide-sm { display: none; }
@media (min-width: 760px) { .nav-links .hide-sm { display: inline-block; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 10px; font-weight: 650; font-size: 0.97rem;
  text-decoration: none; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer; font-family: inherit; transition: transform .15s, background .15s, border-color .15s;
}
.btn:hover { background: var(--surface-2); border-color: #33445a; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--cyan); color: #04232a; border-color: var(--cyan); }
.btn.primary:hover { background: var(--cyan-2); border-color: var(--cyan-2); color: #04232a; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row { justify-content: center; }

/* Hero */
.hero { padding: 64px 0 28px; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -200px 0 auto; height: 620px; pointer-events: none;
  background: radial-gradient(600px 300px at 50% 30%, rgba(34, 211, 238, 0.13), transparent 70%),
              radial-gradient(400px 220px at 80% 10%, rgba(167, 139, 250, 0.08), transparent 70%);
}
.hero .wrap { position: relative; }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero h1 em { font-style: normal; color: var(--cyan); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted);
  border: 1px solid var(--border); background: var(--surface); padding: 5px 12px; border-radius: 999px; margin-bottom: 20px;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

/* Cards / grids */
.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid.c2 { grid-template-columns: repeat(2, 1fr); } .grid.c3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid.c3 { grid-template-columns: repeat(3, 1fr); } .grid.c4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 959px) { .grid.c4 { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
}
.card p:last-child { margin-bottom: 0; }
.card .icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--cyan-dim); color: var(--cyan); margin-bottom: 14px;
}
.card .icon svg { width: 22px; height: 22px; }
button.card { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; transition: border-color .15s, background .15s; }
button.card:hover { border-color: #33506a; background: var(--surface-2); }
.tag {
  display: inline-block; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  vertical-align: middle; margin-left: 6px;
}
.tag.ok { color: var(--green); border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08); }
.tag.warn { color: var(--amber); border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .08); }
.tag.cyan { color: var(--cyan); border-color: rgba(34, 211, 238, .35); background: var(--cyan-dim); }

.split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }

.checks { list-style: none; padding: 0; margin: 0 0 1em; }
.checks li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.checks li::before {
  content: ""; position: absolute; left: 2px; top: 0.45em; width: 14px; height: 8px;
  border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg);
}
.checks.no li::before { border: 0; width: 12px; height: 12px; top: 0.4em; background:
  linear-gradient(45deg, transparent 43%, var(--red) 43% 57%, transparent 57%),
  linear-gradient(-45deg, transparent 43%, var(--red) 43% 57%, transparent 57%); transform: none; }

/* Downloads */
.dl {
  display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.dl:hover { border-color: var(--cyan); transform: translateY(-2px); color: inherit; }
.dl .os { display: flex; align-items: center; gap: 12px; }
.dl .os svg { width: 34px; height: 34px; color: var(--text); }
.dl .os strong { font-size: 1.15rem; display: block; }
.dl .os span { color: var(--muted); font-size: 0.88rem; font-family: var(--mono); }
.dl .go { margin-top: auto; color: var(--cyan); font-weight: 650; font-size: 0.95rem; }

/* Pricing */
.plans { display: grid; gap: 18px; }
@media (min-width: 820px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { display: flex; flex-direction: column; padding: 28px; }
.plan.featured { border-color: rgba(34, 211, 238, .5); box-shadow: 0 0 0 1px rgba(34, 211, 238, .15), 0 20px 60px -30px rgba(34, 211, 238, .35); }
.plan .price { font-size: 2.4rem; font-weight: 750; letter-spacing: -0.03em; margin: 6px 0 2px; }
.plan .price small { font-size: 1rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.plan .checks { margin: 18px 0 24px; }
.plan .btn { margin-top: auto; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 520px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--surface-2); font-weight: 650; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
tr:last-child td { border-bottom: 0; }
td.yes { color: var(--green); font-weight: 650; white-space: nowrap; }
td.no { color: var(--red); font-weight: 650; white-space: nowrap; }

/* Callouts */
.callout {
  border: 1px solid rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .06); border-radius: var(--radius);
  padding: 16px 20px; color: #f5e3b0;
}
.callout strong { color: var(--amber); }
.callout.info { border-color: rgba(34, 211, 238, .35); background: var(--cyan-dim); color: #cdeff6; }
.callout.info strong { color: var(--cyan); }

/* Steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps > li {
  counter-increment: step; position: relative; padding: 0 0 36px 60px; border-left: 1px solid var(--border); margin-left: 18px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: -19px; top: -4px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; background: var(--bg); border: 1px solid var(--cyan); color: var(--cyan);
}
.steps h3 { margin-top: 2px; }

/* FAQ */
details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0 18px; margin-bottom: 10px; }
summary { cursor: pointer; padding: 16px 0; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--cyan); font-size: 1.3rem; line-height: 1; }
details[open] summary::after { content: "–"; }
details > div { padding-bottom: 16px; color: var(--muted); }

/* Footer */
footer { border-top: 1px solid #151c26; padding: 40px 0 56px; color: var(--muted); font-size: 0.92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }

/* Diagram */
.diagram { width: 100%; height: auto; display: block; }
.diagram text { font-family: var(--font); }

/* ============ Device stage (animatics) ============ */
.showcase { padding: 8px 0 40px; }
.feature-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.feature-tabs button {
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--muted); background: transparent;
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: all .15s;
}
.feature-tabs button:hover { color: var(--text); border-color: #33445a; }
.feature-tabs button[aria-selected="true"] { color: #04232a; background: var(--cyan); border-color: var(--cyan); }

.stage { container-type: inline-size; position: relative; }
.stage-inner {
  position: relative; aspect-ratio: 2.75 / 1; font-size: 1cqw;
  border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(34, 211, 238, 0.08), transparent 70%),
    linear-gradient(180deg, #0d131a, #0a0e13);
  border: 1px solid #18212c;
}
.stage-caption {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; min-height: 3.2em;
}
.stage-caption p { margin: 0; color: var(--text); font-size: 1.05rem; text-align: center; transition: opacity .3s; max-width: 60ch; }
.stage-caption p.fade { opacity: 0; }
.stage-pause {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.stage-pause:hover { color: var(--text); }
.stage-pause svg { width: 14px; height: 14px; }

.dev { position: absolute; }
.dev .screen {
  position: relative; overflow: hidden; background: #0b1016; color: #e6edf5;
  font-size: 1em; line-height: 1.35;
}
.dev .layer { position: absolute; inset: 0; pointer-events: none; }

/* laptop */
.dev-laptop { left: 2%; bottom: 9%; width: 34%; }
.dev-laptop .bezel { background: #1d2530; border-radius: 1.1em 1.1em 0.3em 0.3em; padding: 0.9em 0.9em 1em; border: 1px solid #2b3644; }
.dev-laptop .screen { aspect-ratio: 16 / 10; border-radius: 0.3em; }
.dev-laptop .base {
  height: 1.4em; margin: 0 -7%; background: linear-gradient(#2b3542, #1a212a);
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); border-radius: 0 0 0.6em 0.6em; position: relative;
}
.dev-laptop .base::after { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 0.45em; background: #11171e; border-radius: 0 0 0.5em 0.5em; }

/* desktop */
.dev-desktop { left: 38.5%; bottom: 5%; width: 41%; }
.dev-desktop .bezel { background: #151b23; border-radius: 0.8em; padding: 0.7em; border: 1px solid #2b3644; }
.dev-desktop .screen { aspect-ratio: 16 / 9; border-radius: 0.3em; }
.dev-desktop .neck { width: 10%; height: 3.2em; margin: 0 auto; background: linear-gradient(90deg, #1b222c, #2a3441, #1b222c); }
.dev-desktop .foot { width: 32%; height: 0.8em; margin: 0 auto; background: #232c38; border-radius: 0.6em 0.6em 0.2em 0.2em; }

/* phone */
.dev-phone { left: 83.5%; bottom: 6%; width: 13.2%; }
.dev-phone .bezel { background: #10151b; border-radius: 2.2em; padding: 0.55em; border: 1px solid #2f3b4a; box-shadow: 0 0 0 0.25em #19212b; }
.dev-phone .screen { aspect-ratio: 9 / 19.5; border-radius: 1.75em; font-size: 0.82em; }
.dev-phone .screen::before {
  content: ""; position: absolute; top: 0.7em; left: 50%; width: 1.1em; height: 1.1em; margin-left: -0.55em;
  background: #000; border-radius: 50%; z-index: 30;
}

.dev-label {
  position: absolute; left: 0; right: 0; bottom: -2.3em; text-align: center; font-size: 1.05em;
  color: var(--faint); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.dev-desktop .dev-label { bottom: -2em; }

@container (max-width: 640px) {
  .stage-inner { aspect-ratio: 1 / 1.08; font-size: 2.05cqw; }
  .dev-desktop { left: 6%; width: 66%; bottom: auto; top: 4%; }
  .dev-desktop .neck { height: 2.2em; }
  .dev-laptop { left: 6%; width: 56%; bottom: 7%; }
  .dev-phone { left: 72%; width: 23%; bottom: 7%; }
  .dev-label { display: none; }
}

/* Generic screen chrome */
.wall { position: absolute; inset: 0; }
.wall.w1 { background: radial-gradient(120% 90% at 20% 0%, #17324a, #0b1016 60%); }
.wall.w2 { background: radial-gradient(120% 90% at 80% 10%, #1f2448, #0b1016 60%); }
.wall.w3 { background: radial-gradient(130% 80% at 50% 0%, #0f3a44, #081014 65%); }
.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.9em; background: rgba(12, 17, 23, 0.92);
  display: flex; align-items: center; justify-content: center; gap: 0.6em; border-top: 1px solid #1f2a36;
}
.taskbar i { display: block; width: 1.1em; height: 1.1em; border-radius: 0.3em; background: #2a3646; }
.taskbar i.on { background: var(--cyan); box-shadow: 0 0 0.6em rgba(34,211,238,.6); }
.taskbar .clock { position: absolute; right: 0.8em; font-size: 0.75em; color: #9fb0c3; font-style: normal; }

.win {
  position: absolute; left: 4%; top: 5%; right: 4%; bottom: 2.6em; background: #111821; border: 1px solid #263243;
  border-radius: 0.5em; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1em 2.5em rgba(0,0,0,.45);
}
.dev-desktop .win { left: 2.5%; right: 2.5%; top: 4%; }
.win-bar {
  height: 2em; flex: none; display: flex; align-items: center; gap: 0.4em; padding: 0 0.7em; background: #0d131a;
  border-bottom: 1px solid #1f2a36; font-size: 0.78em; color: #9fb0c3;
}
.win-bar .dots { display: flex; gap: 0.35em; margin-right: 0.5em; }
.win-bar .dots i { width: 0.65em; height: 0.65em; border-radius: 50%; background: #2c3846; display: block; }
.win-bar .tabs { display: flex; gap: 0.3em; margin-left: auto; margin-right: auto; }
.win-bar .tabs span { padding: 0.2em 0.8em; border-radius: 0.5em; }
.win-bar .tabs span.on { background: rgba(34,211,238,.14); color: var(--cyan); }
.win-body { flex: 1; min-height: 0; padding: 0.8em; display: flex; gap: 0.8em; position: relative; }
.win-body.col { flex-direction: column; }

/* phone UI */
.p-status { position: absolute; top: 0.6em; left: 1.4em; right: 1.4em; display: flex; justify-content: space-between; font-size: 0.8em; color: #c7d3df; z-index: 20; }
.p-lock { position: absolute; top: 18%; left: 0; right: 0; text-align: center; }
.p-lock b { display: block; font-size: 3.2em; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
.p-lock span { font-size: 0.85em; color: #9fb0c3; }
.p-app { position: absolute; inset: 0; padding: 2.6em 0.8em 0.8em; display: flex; flex-direction: column; background: #0d1319; }
.p-app h4 { margin: 0 0 0.6em; font-size: 1.05em; font-weight: 650; display: flex; align-items: center; gap: 0.5em; }
.p-app h4 .av { width: 1.7em; height: 1.7em; font-size: 0.8em; }
.p-home-bar { position: absolute; bottom: 0.45em; left: 35%; right: 35%; height: 0.25em; border-radius: 1em; background: #c7d3df; opacity: .6; z-index: 25; }

/* chat */
.thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.45em; min-height: 0; overflow: hidden; }
.bub {
  max-width: 82%; padding: 0.45em 0.75em; border-radius: 1em; font-size: 0.85em; line-height: 1.3; animation: pop .35s ease both;
}
.bub.in { background: #1e2835; align-self: flex-start; border-bottom-left-radius: 0.3em; }
.bub.out { background: #0e7490; color: #ecfeff; align-self: flex-end; border-bottom-right-radius: 0.3em; }
.bub small { display: block; font-size: 0.75em; opacity: 0.75; margin-top: 0.15em; }
.compose {
  margin-top: 0.6em; display: flex; align-items: center; gap: 0.4em; background: #18212c; border: 1px solid #263243;
  border-radius: 2em; padding: 0.4em 0.5em 0.4em 0.9em; font-size: 0.85em; min-height: 2.3em;
}
.compose .txt { flex: 1; color: #e6edf5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compose .txt:empty::before { content: attr(data-ph); color: #6b7a8c; }
.compose .send { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--cyan); flex: none; transition: transform .15s; position: relative; }
.compose .send::after { content: ""; position: absolute; left: 32%; top: 30%; border: 0.4em solid transparent; border-left: 0.6em solid #04232a; border-right: 0; }

/* avatars */
.av { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.85em; flex: none; color: #04232a; }
.av.a1 { background: #67e8f9; } .av.a2 { background: #c4b5fd; } .av.a3 { background: #fcd34d; } .av.a4 { background: #86efac; }

/* phone notification */
.notif {
  position: absolute; left: 0.6em; right: 0.6em; top: 2.4em; z-index: 15;
  background: rgba(30, 40, 53, 0.96); border: 1px solid #304055; border-radius: 1em; padding: 0.6em 0.7em;
  display: flex; gap: 0.55em; animation: dropin .45s cubic-bezier(.2,.9,.3,1.2) both; font-size: 0.9em; box-shadow: 0 0.6em 1.4em rgba(0,0,0,.4);
}
.notif .meta { font-size: 0.75em; color: #9fb0c3; }
.notif b { display: block; font-size: 0.95em; }
.notif .n-body { font-size: 0.88em; color: #d3dde8; }
.notif.done { border-color: rgba(52,211,153,.5); }
.notif.done .n-body { color: var(--green); }

/* desktop toast */
.toast {
  position: absolute; right: 0.8em; bottom: 2.8em; width: 46%; z-index: 15;
  background: #17202b; border: 1px solid #324357; border-radius: 0.7em; padding: 0.75em 0.85em;
  box-shadow: 0 1em 2em rgba(0,0,0,.5); animation: slidein .45s cubic-bezier(.2,.9,.3,1.1) both; font-size: 0.9em;
}
.dev-desktop .toast { width: 38%; }
.toast .t-head { display: flex; align-items: center; gap: 0.5em; font-size: 0.78em; color: #9fb0c3; margin-bottom: 0.4em; }
.toast .t-head .logo { width: 1.1em; height: 1.1em; border-radius: 0.3em; background: var(--cyan); }
.toast .t-main { display: flex; gap: 0.6em; align-items: center; }
.toast .t-main b { display: block; font-size: 0.98em; }
.toast .t-main span { font-size: 0.88em; color: #d3dde8; }
.toast .t-actions { display: flex; gap: 0.4em; margin-top: 0.6em; }
.toast .t-actions span {
  flex: 1; text-align: center; font-size: 0.8em; padding: 0.35em; border-radius: 0.4em; background: #223041; color: #d3dde8; transition: all .2s;
}
.toast .t-actions span.ok { background: rgba(52,211,153,.18); color: var(--green); }
.toast .t-actions span.bad { background: rgba(248,113,113,.15); color: var(--red); }
.toast .t-reply { display: none; margin-top: 0.6em; }
.toast.replying .t-reply { display: flex; }
.toast.replying .t-actions { display: none; }
.toast.out { animation: fadeout .4s ease both; }
.pressed { transform: scale(0.88); filter: brightness(1.4); }

/* keycap */
.keycap {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 20;
  background: #e6edf5; color: #0b1016; font-weight: 700; font-size: 1.1em; padding: 0.4em 0.9em; border-radius: 0.5em;
  box-shadow: 0 0.25em 0 #94a3b6, 0 1em 2em rgba(0,0,0,.5); animation: keypop 1.1s ease both;
}

/* doc editor lines */
.doc { flex: 1; background: #0d1319; border-radius: 0.4em; padding: 0.8em 1em; font-size: 0.85em; }
.doc p { margin: 0 0 0.55em; color: #c7d3df; }
.doc .line { display: block; height: 0.55em; background: #1f2a36; border-radius: 1em; margin-bottom: 0.6em; }
.sel { transition: background .3s; border-radius: 0.2em; padding: 0 0.1em; }
.sel.on { background: rgba(34, 211, 238, 0.35); color: #fff; }

/* side list (conversations, clipboard) */
.side { width: 34%; flex: none; display: flex; flex-direction: column; gap: 0.35em; }
.side .item {
  display: flex; gap: 0.55em; align-items: center; padding: 0.45em 0.5em; border-radius: 0.5em; font-size: 0.8em;
  background: #141c26; border: 1px solid transparent; transition: background .3s, border-color .3s;
}
.side .item.on { background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.35); }
.side .item b { display: block; font-size: 0.95em; }
.side .item span { color: #9fb0c3; font-size: 0.85em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .item > div { min-width: 0; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.panel-title { font-size: 0.8em; color: #9fb0c3; margin-bottom: 0.5em; text-transform: uppercase; letter-spacing: 0.08em; }

/* clipboard list */
.clip { display: flex; flex-direction: column; gap: 0.4em; }
.clip .ci {
  background: #141c26; border: 1px solid #222e3c; border-radius: 0.5em; padding: 0.5em 0.7em; font-size: 0.85em; animation: pop .4s ease both;
}
.clip .ci small { display: block; color: #9fb0c3; font-size: 0.78em; }
.clip .ci.new { border-color: rgba(34,211,238,.6); background: rgba(34,211,238,.08); }

/* paste chip */
.chip {
  align-self: flex-start; background: rgba(34,211,238,.14); color: var(--cyan); border: 1px solid rgba(34,211,238,.45);
  font-size: 0.75em; padding: 0.3em 0.7em; border-radius: 2em; margin-top: 0.5em; animation: pop .35s ease both; transition: transform .15s;
}

/* phone summary card */
.phone-card { background: #141c26; border: 1px solid #222e3c; border-radius: 0.6em; padding: 0.8em; display: flex; gap: 0.8em; align-items: center; }
.phone-card .ph { width: 2em; height: 3.4em; border: 0.18em solid #4a5a6e; border-radius: 0.45em; flex: none; }
.phone-card b { font-size: 0.95em; display: block; }
.phone-card span { font-size: 0.8em; color: var(--green); }
.stat-row { display: flex; gap: 0.5em; margin-top: 0.6em; }
.stat-row div { flex: 1; background: #141c26; border: 1px solid #222e3c; border-radius: 0.5em; padding: 0.5em 0.6em; font-size: 0.75em; color: #9fb0c3; }
.stat-row div b { display: block; color: #e6edf5; font-size: 1.25em; }

/* call screen */
.call { position: absolute; inset: 0; background: linear-gradient(180deg, #0f2a33, #0b1016 70%); display: flex; flex-direction: column; align-items: center; padding-top: 28%; }
.call .av { width: 4.4em; height: 4.4em; font-size: 1.1em; position: relative; }
.call .ring::before, .call .ring::after {
  content: ""; position: absolute; inset: -0.3em; border-radius: 50%; border: 0.15em solid rgba(103,232,249,.6); animation: ring 1.6s ease-out infinite;
}
.call .ring::after { animation-delay: .8s; }
.call b { margin-top: 0.8em; font-size: 1.15em; }
.call span { font-size: 0.8em; color: #9fb0c3; }
.call .btns { position: absolute; bottom: 14%; left: 0; right: 0; display: flex; justify-content: space-around; }
.call .btns i { width: 2.8em; height: 2.8em; border-radius: 50%; display: block; }
.call .btns i.g { background: #10b981; } .call .btns i.r { background: #ef4444; }
.call.live .btns i.g { display: none; }

/* camera */
.viewfinder { position: absolute; inset: 0; background:
  radial-gradient(40% 30% at 65% 40%, rgba(253, 224, 71, .55), transparent 70%),
  linear-gradient(170deg, #3b6f8f 0%, #5f8fa8 38%, #2c4d39 39%, #3c6a4c 70%, #233f2d 100%); }
.viewfinder .shutter { position: absolute; bottom: 9%; left: 50%; width: 3em; height: 3em; margin-left: -1.5em; border-radius: 50%; border: 0.25em solid #fff; background: rgba(255,255,255,.25); transition: transform .15s; }
.flash { position: absolute; inset: 0; background: #fff; z-index: 25; animation: flash .5s ease both; }
.rec { position: absolute; top: 2.6em; left: 0.9em; z-index: 5; font-size: 0.75em; display: flex; align-items: center; gap: 0.4em; background: rgba(0,0,0,.5); padding: 0.2em 0.6em; border-radius: 1em; }
.rec::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: #ef4444; animation: blink 1s infinite; }

.photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.photos i { display: block; aspect-ratio: 1; border-radius: 0.4em; background: #1f2a36; animation: pop .4s ease both; }
.photos i.p1 { background: linear-gradient(160deg, #f59e0b, #b45309); }
.photos i.p2 { background: linear-gradient(160deg, #60a5fa, #1e3a8a); }
.photos i.p3 { background: linear-gradient(160deg, #f472b6, #7c3aed); }
.photos i.p4 { background: linear-gradient(160deg, #34d399, #065f46); }
.photos i.p5 { background: linear-gradient(160deg, #e5e7eb, #6b7280); }
.photos i.new { background: linear-gradient(170deg, #5f8fa8 0 40%, #3c6a4c 41%); outline: 0.2em solid var(--cyan); }

.dropzone {
  flex: 1; border: 0.15em dashed #33506a; border-radius: 0.6em; display: grid; place-items: center; font-size: 0.8em; color: #9fb0c3;
  transition: all .3s; text-align: center; padding: 0.5em;
}
.dropzone.hot { border-color: var(--cyan); background: rgba(34,211,238,.08); color: var(--cyan); }
.file {
  display: flex; flex-direction: column; align-items: center; gap: 0.3em; font-size: 0.75em; width: 6em; transition: transform 1s cubic-bezier(.5,0,.2,1), opacity .3s;
}
.file i { width: 2.6em; height: 3.2em; background: #e6edf5; border-radius: 0.25em; position: relative; display: block; }
.file i::after { content: "PDF"; position: absolute; bottom: 0.4em; left: 0; right: 0; text-align: center; font-size: 0.65em; font-style: normal; font-weight: 800; color: #dc2626; }
.file.docx i::after { content: "DOC"; color: #2563eb; }

/* video call */
.vgrid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.vtile { border-radius: 0.6em; background: #18212c; position: relative; display: grid; place-items: center; overflow: hidden; }
.vtile .av { width: 3.6em; height: 3.6em; font-size: 1em; }
.vtile em { position: absolute; left: 0.6em; bottom: 0.5em; font-style: normal; font-size: 0.72em; background: rgba(0,0,0,.55); padding: 0.15em 0.55em; border-radius: 0.4em; }
.vtile .off { font-size: 0.8em; color: #9fb0c3; }
.vtile .live {
  position: absolute; inset: 0; opacity: 0; transition: opacity .8s;
  background: radial-gradient(22% 30% at 50% 45%, #f2c9a0 0 60%, transparent 62%),
              radial-gradient(40% 35% at 50% 100%, #2563eb 0 70%, transparent 72%),
              linear-gradient(170deg, #334155, #1e293b);
}
.vtile.on .live { opacity: 1; }
.vtile.on .off { display: none; }
.big-btn { margin-top: auto; background: var(--cyan); color: #04232a; text-align: center; font-weight: 700; border-radius: 0.7em; padding: 0.6em; font-size: 0.9em; transition: transform .15s, background .3s; }
.big-btn.stop { background: #ef4444; color: #fff; }
.opt { display: flex; justify-content: space-between; font-size: 0.82em; padding: 0.5em 0; border-bottom: 1px solid #1f2a36; color: #c7d3df; }
.opt b { color: var(--cyan); font-weight: 600; }

/* file manager */
.fm { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8em; align-content: start; padding: 0.4em; }
.fm .file { width: auto; position: relative; }
.fm .file.new { animation: pop .4s ease both; }
.badge { position: absolute; top: -0.3em; right: 18%; width: 1.2em; height: 1.2em; border-radius: 50%; font-size: 0.8em; display: grid; place-items: center; font-style: normal; }
.badge.sync { border: 0.2em solid var(--cyan); border-right-color: transparent; animation: spin .8s linear infinite; }
.badge.done { background: var(--green); }
.badge.done::after { content: ""; width: 0.5em; height: 0.28em; border-left: 0.15em solid #04232a; border-bottom: 0.15em solid #04232a; transform: rotate(-45deg) translate(0.05em, -0.05em); }

/* beam */
.beam {
  position: absolute; width: 1.1em; height: 1.1em; margin: -0.55em 0 0 -0.55em; border-radius: 50%; z-index: 40; pointer-events: none;
  background: #ecfeff; box-shadow: 0 0 0.6em 0.25em rgba(34,211,238,.9), 0 0 2em 0.8em rgba(34,211,238,.35);
}
.beam-trail { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 39; pointer-events: none; overflow: visible; }
.beam-trail path { fill: none; stroke: rgba(34,211,238,.35); stroke-width: 2; stroke-dasharray: 4 6; animation: dash 1s linear infinite, fadeout 1.2s ease 0.4s both; }

@keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes dropin { from { opacity: 0; transform: translateY(-120%); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateX(30%); } to { opacity: 1; transform: none; } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes keypop { 0% { opacity: 0; transform: translate(-50%,-30%) scale(.8); } 20%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-60%) scale(.95); } }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }
@keyframes blink { 50% { opacity: .2; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dash { to { stroke-dashoffset: -20; } }

@media (prefers-reduced-motion: reduce) {
  .dev *, .dev *::before, .dev *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 99; }