/* ORION Build: laid out like the Caffeine builder (sidebar · chat · stage), ORION's dark palette. */
:root {
  --bg: #0b0b0c; --side: #131314; --panel: #161618; --raise: #1f1f22; --raise-2: #2a2a2e;
  --line: #26262a; --text: #ececee; --muted: #9a9aa2; --faint: #6c6c74;
  --blue: #3b82f6; --blue-hi: #5b9bff; --cyan: #5fd4ff; --ok: #3ddc97; --warn: #f5b454; --bad: #ff6b7a;
  --r: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
input, textarea, select { font: inherit; color: var(--text); }
.spacer { flex: 1; }
.orb { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--cyan); box-shadow: 0 0 12px rgba(95, 212, 255, .6), inset 0 0 0 3px transparent; position: relative; }
.orb::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--cyan); }
.orb.big { width: 44px; height: 44px; border-width: 3px; }
.orb.big::after { inset: 11px; }

.btn-blue { background: var(--blue); color: #fff; border-radius: 12px; padding: 11px 16px; font-weight: 600; }
.btn-blue:hover { background: var(--blue-hi); }
.btn-quiet { background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; }
.btn-quiet.small { padding: 5px 12px; font-size: 13px; border-radius: 999px; }
.wide { width: 100%; }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--muted); }
.icon-btn:hover { background: var(--raise); color: var(--text); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); font-weight: 500; }
.pill:hover:not(:disabled) { background: var(--raise-2); }
.pill.live { color: var(--ok); border-color: rgba(61, 220, 151, .35); }

/* ---------- film + door ---------- */
.film { position: fixed; inset: 0; background: #000; z-index: 20; }
.film video, .door-bg { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-skip { position: absolute; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); color: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 7px 16px; font-size: 13px; backdrop-filter: blur(8px); }
.door { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(900px 600px at 50% 30%, rgba(20, 60, 100, .35), transparent 70%), rgba(0, 0, 0, .55); z-index: 10; }
.door-card { width: min(430px, 100%); background: rgba(19, 19, 20, .86); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; display: grid; gap: 14px; backdrop-filter: blur(22px); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.door-mark { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .02em; font-size: 17px; }
.door-mark b { font-weight: 500; color: var(--muted); }
.door-card h1 { margin: 6px 0 0; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.door-sub { margin: 0; color: var(--muted); }
.door-note { margin: 0; color: var(--faint); font-size: 13px; }
.door-field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.door-field input { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.door-msg { margin: 0; min-height: 1.2em; color: var(--warn); font-size: 13px; }

/* ---------- builder layout ---------- */
.app { display: grid; grid-template-columns: 290px minmax(340px, 1fr) minmax(380px, 1.45fr); height: 100vh; height: 100dvh; }
.app.collapsed { grid-template-columns: 0 minmax(340px, 1fr) minmax(380px, 1.45fr); }
.app.collapsed .side { visibility: hidden; }
.only-collapsed { display: none; }
.app.collapsed .only-collapsed { display: grid; }
.app.nochat { grid-template-columns: 290px 0 1fr; }
.app.collapsed.nochat { grid-template-columns: 0 0 1fr; }
.app.nochat .chat { visibility: hidden; }
.app.market-open { grid-template-columns: 290px 1fr; }
.app.collapsed.market-open { grid-template-columns: 0 1fr; }
.app.market-open .chat, .app.market-open .stage { display: none; }

.side { background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 12px; gap: 10px; min-height: 0; overflow: hidden; }
.side-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; }
.side-title { font-size: 19px; font-weight: 600; }
.side-workspace { display: flex; align-items: center; padding: 10px 12px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.side-nav { display: grid; gap: 2px; }
.side-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; text-align: left; }
.side-item:hover, .side-item.active { background: var(--raise); }
.side-item svg { color: var(--muted); }
.side-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; color: var(--muted); margin: 6px 0; }
.side-search input { flex: 1; background: none; border: 0; outline: 0; padding: 10px 0; }
.side-lists { flex: 1; overflow: auto; min-height: 0; }
.side-lists summary { list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13.5px; padding: 12px 12px 6px; cursor: pointer; }
.side-lists summary::-webkit-details-marker { display: none; }
.side-lists summary::after { content: ""; width: 7px; height: 7px; border-left: 1.6px solid var(--muted); border-top: 1.6px solid var(--muted); transform: rotate(45deg); margin-right: 4px; transition: transform .15s; }
.side-lists details:not([open]) summary::after { transform: rotate(225deg); }
.app-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 12px; text-align: left; }
.app-row:hover { background: var(--raise); }
.app-row.active { background: var(--raise-2); }
.app-row .tile { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #b8e35f, #72c14a); display: grid; place-items: center; }
.app-row .tile::after { content: ""; width: 10px; height: 10px; background: linear-gradient(#1b3d0e 0 0) 0 0 / 4px 4px no-repeat, linear-gradient(#1b3d0e 0 0) 6px 0 / 4px 4px no-repeat, linear-gradient(#1b3d0e 0 0) 0 6px / 4px 4px no-repeat, linear-gradient(#1b3d0e 0 0) 6px 6px / 4px 4px no-repeat; }
.app-row svg { color: var(--muted); }
.app-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-empty { color: var(--faint); font-size: 13px; padding: 4px 12px 8px; }
.side-foot { display: grid; gap: 10px; position: relative; }
.quota-pill { background: var(--blue); color: #fff; text-align: center; border-radius: 999px; padding: 10px; font-weight: 500; }
.quota-pill.out { background: var(--raise-2); color: var(--warn); }
.account { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 12px; text-align: left; }
.account:hover { background: var(--raise); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #6f7c8a 40%, #1a1d22 75%); }
.account-text { flex: 1; display: grid; line-height: 1.25; }
.account-text small { color: var(--muted); }
.menu { position: absolute; bottom: 56px; left: 0; right: 0; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.menu button { width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; }
.menu button:hover { background: var(--raise-2); }

/* ---------- chat column ---------- */
.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }
.chat-bar, .stage-bar { height: 64px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 22px; }
.title-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; padding: 6px 8px; border-radius: 10px; min-width: 0; }
.chat-bar > .drop:first-of-type { min-width: 0; flex: 0 1 auto; }
.title-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A long app name on a narrow phone shortens with "…" instead of running under the buttons beside it. */
.chat-bar > .drop:first-of-type > .title-btn { max-width: 100%; }
.title-btn:hover { background: var(--raise); }
.version { background: none; border: 0; font-size: 17px; padding: 6px; border-radius: 10px; cursor: pointer; -webkit-appearance: none; appearance: none; text-align: center; }
.version:hover { background: var(--raise); }
.bar-icon { display: grid; place-items: center; color: var(--muted); padding: 0 4px; }
.thread { flex: 1; overflow: auto; padding: 12px 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.hello { color: var(--muted); margin-top: 18vh; text-align: center; padding: 0 16px; }
.hello h2 { color: var(--text); font-size: 24px; margin: 0 0 8px; letter-spacing: -.01em; }
.date-chip { align-self: center; background: var(--raise); color: var(--muted); font-size: 13px; padding: 3px 12px; border-radius: 999px; }
.u-msg { align-self: flex-end; max-width: 80%; background: var(--raise-2); padding: 11px 18px; border-radius: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.o-msg { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.o-msg.working { color: var(--muted); display: flex; align-items: center; gap: 10px; }
.o-msg.working::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 1.2s ease-in-out infinite; }
.o-msg.failed { color: var(--warn); }
.o-msg + .u-msg { margin-top: 10px; }
.o-divider { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
@keyframes pulse { 50% { opacity: .3; } }
.composer { margin: 0 22px 20px; background: var(--raise); border: 1px solid var(--line); border-radius: 22px; padding: 14px 14px 10px 20px; }
.composer textarea { width: 100%; background: none; border: 0; outline: 0; resize: none; max-height: 220px; font-size: 16px; line-height: 1.45; }
.composer textarea::placeholder { color: var(--faint); }
.composer-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dev-state { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.dev-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.dev-state.ok::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dev-state.off::before { background: var(--warn); }
.ask-msg { color: var(--warn); font-size: 13px; }
.send { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; }
.send:hover:not(:disabled) { background: var(--blue-hi); }
.send svg { stroke-width: 2.2; }

/* ---------- stage (preview / ORION Dev 1 / code) ---------- */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.stage-bar { padding-left: 12px; }
.seg { display: inline-flex; background: var(--raise); border-radius: 12px; padding: 4px; gap: 2px; }
.seg button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 9px; color: var(--muted); }
.seg button[aria-selected=true] { background: var(--raise-2); color: var(--text); }
.seg button:not([aria-selected=true]) .seg-label { display: none; }
.seg button.busy { color: var(--cyan); }
.eye { width: 44px; height: 44px; border-radius: 50%; background: #1d3a78; color: #9dc0ff; display: grid; place-items: center; }
.eye[aria-disabled=true] { opacity: .4; pointer-events: none; }
.stage-body { flex: 1; min-height: 0; padding: 0 16px 16px 12px; }
.view { height: 100%; position: relative; }
.frame { height: 100%; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.empty { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); text-align: center; padding: 20px; }
.empty p { margin: 0; }
.feed { height: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: #0d0e10; padding: 14px 16px; font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; }
.line { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1px 0; color: #c9ccd3; }
.line.orion { color: var(--cyan); font-weight: 600; margin-top: 8px; font-family: -apple-system, system-ui, sans-serif; font-size: 13px; }
.line.command { color: #c6a4ff; }
.line.output, .line.verify { color: var(--faint); }
.line.error { color: var(--bad); }
.feed-empty { color: var(--faint); font-family: -apple-system, system-ui, sans-serif; }
.code { display: grid; grid-template-columns: 220px 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #0d0e10; }
.files { border-right: 1px solid var(--line); overflow: auto; padding: 8px; font-size: 13px; }
.files button { display: block; width: 100%; text-align: left; padding: 5px 8px; border-radius: 7px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files button:hover { background: var(--raise); color: var(--text); }
.files button.active { background: var(--raise-2); color: var(--text); }
.file-body { margin: 0; overflow: auto; padding: 14px 16px; font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; color: #d6d8de; white-space: pre; tab-size: 2; }

.dlg { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 22px; width: min(380px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(0, 0, 0, .6); }
.dlg h3 { margin: 0 0 12px; }
.dlg input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.dlg-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.door-email { display: grid; gap: 8px; margin-top: 4px; }
.door-email input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; font: inherit; }
#ds-code { letter-spacing: .3em; text-align: center; font-size: 18px; }

/* ---------- menus, composer controls ---------- */
.drop { position: relative; }
.menu.down { top: calc(100% + 6px); bottom: auto; left: 0; right: auto; min-width: 190px; z-index: 30; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.menu.down.right { left: auto; right: 0; }
.menu.up { bottom: calc(100% + 8px); top: auto; left: 0; right: auto; min-width: 260px; z-index: 30; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.menu button b { display: block; font-weight: 500; }
.menu button small, .switch-row small, .danger small { display: block; color: var(--muted); font-size: 12.5px; }
.menu button.on { background: var(--raise-2); }
.menu-note { margin: 4px 8px 8px; color: var(--muted); font-size: 13px; }
.menu-link { display: block; margin: 0 8px 8px; color: var(--blue-hi); font-size: 13px; overflow-wrap: anywhere; }
.live-menu { min-width: 280px; }
.version svg { width: 17px; height: 17px; }
.versions { max-height: 60vh; overflow: auto; width: min(340px, calc(100vw - 32px)); }
.versions .v-head { padding: 6px 10px 8px; font-size: 13px; color: var(--muted); }
.versions .v-row { display: grid; gap: 4px; padding: 9px 10px; border-radius: 8px; }
.versions .v-row + .v-row { border-top: 1px solid var(--line); }
.versions .v-row.on { background: var(--raise-2); }
.versions .v-top { display: flex; gap: 8px; align-items: baseline; }
.versions .v-top small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.versions .v-tag { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.versions .v-tag.live { color: var(--blue-hi); border-color: currentColor; }
.versions .v-req { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.versions .v-acts { display: flex; gap: 6px; margin-top: 2px; }
.versions .v-acts button { width: auto; text-align: center; }
.versions .v-acts button:disabled { opacity: .45; }
.mode-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); padding: 6px 8px; border-radius: 10px; font-size: 14.5px; }
.mode-btn:hover { background: var(--raise-2); color: var(--text); }
.mode-btn svg { width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:not(:empty) { margin-bottom: 8px; }
.chip-x { display: inline-flex; align-items: center; gap: 6px; background: var(--raise-2); border-radius: 10px; padding: 4px 6px 4px 4px; font-size: 12.5px; color: var(--muted); max-width: 100%; }
.chip-x img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }
.chip-x span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.chip-x button { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.chip-x button:hover { background: var(--line); color: var(--text); }
.chat > .dev-state { margin: -10px 26px 12px; }
.msg-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--faint); font-size: 12px; }
.msg-actions button { color: var(--faint); padding: 0; display: grid; place-items: center; }
.msg-actions button:hover, .msg-actions button.on { color: var(--text); }
.msg-actions svg { width: 15px; height: 15px; }
.o-msg .ver { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.o-msg.answer { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; }

/* ---------- preview extras ---------- */
.frame.phone { width: 390px; max-width: 100%; margin: 0 auto; border-radius: 34px; border: 8px solid #26262a; }
.loading { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--muted); }
.loading p { margin: 0; font-size: 14px; }
.dots { display: flex; align-items: center; gap: 14px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #d7d9df; opacity: .8; animation: dot 1.4s ease-in-out infinite; }
.dots i:nth-child(1) { width: 22px; height: 22px; } .dots i:nth-child(2) { width: 14px; height: 14px; }
.dots i:nth-child(2) { animation-delay: .1s; } .dots i:nth-child(3) { animation-delay: .2s; } .dots i:nth-child(4) { animation-delay: .3s; }
.dots i:nth-child(5) { animation-delay: .4s; } .dots i:nth-child(6) { animation-delay: .5s; } .dots i:nth-child(7) { animation-delay: .6s; }
@keyframes dot { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(.5); opacity: .35; } }
.toolbar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: rgba(22, 22, 24, .92); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); z-index: 4; }
.toolbar button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #d9dbe0; }
.toolbar button:hover, .toolbar button.on { background: var(--raise-2); }
.toolbar button.on { color: var(--blue-hi); }
/* The toolbar sits in its own strip under the app, never over it: floating on the app it covered every
   bottom tab bar (phone apps) and footer (2026-10-25). Dragging it still puts it anywhere. */
#view-preview.tools .frame { height: calc(100% - 60px); }
/* A never-paid account's app: how long its free preview has left (app.js renderFree). */
.free-note { display: flex; align-items: center; justify-content: center; gap: 12px; height: 40px; margin-bottom: 8px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(255, 196, 0, .35); background: rgba(255, 196, 0, .08); color: var(--text); font-size: 13px; }
.free-note.ended { border-color: rgba(255, 120, 80, .45); background: rgba(255, 120, 80, .1); }
#view-preview.free .frame { height: calc(100% - 48px); }
#view-preview.free.tools .frame { height: calc(100% - 60px - 48px); }
#view-preview.tools .toolbar { bottom: 0; }
.tb-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.tb-handle { color: var(--faint); cursor: grab; display: grid; place-items: center; width: 22px; touch-action: none; }
.spec { height: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 22px 26px; line-height: 1.65; }
.spec h1, .spec h2, .spec h3 { line-height: 1.25; margin: 1.2em 0 .5em; }
.spec h1:first-child { margin-top: 0; }
.spec code { background: var(--raise-2); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.spec .muted { color: var(--muted); }
.code-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.code-main .feed { flex: 1; border: 0; border-radius: 0; }
.code-main .file-body { flex: 1; }
.feed-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--cyan); font-size: 13px; font-weight: 600; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 1.2s ease-in-out infinite; }
.files .dir { color: var(--faint); font-size: 12px; padding: 8px 8px 2px; }

/* ---------- market ---------- */
.market { overflow: auto; padding-bottom: 30px; }
.market-title { font-size: 19px; font-weight: 600; }
.market-sub { color: var(--muted); margin: 0 22px 18px; }
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; padding: 0 22px; }
.market-card { display: grid; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; color: var(--text); text-decoration: none; }
.market-card:hover { border-color: #3a3a40; background: var(--raise); }
.market-card small { color: var(--muted); }

/* ---------- dialogs ---------- */
.switch-row, .danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.switch-row input { width: 20px; height: 20px; accent-color: var(--blue); }
.ai-abilities { flex-wrap: wrap; }
.ability-picks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.ability-picks label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ability-picks input { width: 18px; height: 18px; }
.btn-danger { background: rgba(255, 107, 122, .12); color: var(--bad); border: 1px solid rgba(255, 107, 122, .35); border-radius: 10px; padding: 7px 14px; }
.share-row { display: grid; gap: 6px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.copy-field { display: flex; gap: 8px; }
.copy-field input { flex: 1; min-width: 0; }

/* ---------- TV sign-in ---------- */
.link-btn { color: var(--blue-hi); font-size: 14px; padding: 4px; }
.link-btn:hover, .link-btn:focus-visible { text-decoration: underline; }
.tv-card { width: min(760px, 100%); }
.tv-row { display: flex; gap: 28px; align-items: center; }
.tv-qr { background: #fff; padding: 14px; border-radius: 16px; flex: none; }
.tv-qr svg { display: block; width: min(300px, 60vw); height: auto; fill: #000; stroke: none; }
.tv-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 17px; color: var(--muted); }
.tv-steps b { color: var(--text); }
.tv-or { list-style: none; margin-left: -20px; padding-top: 6px; border-top: 1px solid var(--line); }
.tv-code { display: inline-block; margin-top: 6px; font: 700 34px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; color: var(--text); }
.approve-copy { line-height: 1.55; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
@media (max-width: 700px) { .tv-row { flex-direction: column; align-items: stretch; } .tv-qr { align-self: center; } }

/* ---------- next up + locked code ---------- */
.next-up { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.next-label { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.next-chip { background: var(--raise); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--text); text-align: left; }
.next-chip:hover { border-color: var(--blue); }
.code-locked { display: grid; gap: 8px; max-width: 420px; margin: 40px auto; text-align: center; white-space: normal; font-family: -apple-system, system-ui, sans-serif; color: var(--muted); }
.code-locked b { color: var(--text); font-size: 16px; }
.small-btn { justify-self: center; padding: 8px 16px; }

/* ---------- plans ---------- */
.quota-pill { border: 0; cursor: pointer; font: inherit; width: 100%; }
.plans { width: min(520px, calc(100vw - 32px)); }
.plans h4 { margin: 18px 0 8px; font-size: 15px; }
.plans h4 small { color: var(--muted); font-weight: 400; }
.plans-status { margin: 0 0 6px; color: var(--muted); }
.plans-fine { color: var(--faint); font-size: 12.5px; margin: 12px 0 0; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pack { display: grid; gap: 2px; text-align: left; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.pack:hover { border-color: var(--blue); }
.pack b { font-size: 16px; } .pack small { color: var(--muted); }
.plan-packs { margin-bottom: 4px; align-items: stretch; }
.plan-lines { margin: 6px 0 0; padding-left: 16px; font-size: 12px; color: var(--muted); display: grid; gap: 2px; }
.plan-now { color: var(--cyan) !important; }
.card-box { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: rgba(59, 130, 246, .08); border: 1px solid rgba(59, 130, 246, .35); border-radius: 12px; padding: 12px; }
.card-box p { margin: 0; } .card-box small { color: var(--muted); }
.menu-sep { border-top: 1px solid var(--line) !important; margin-top: 4px; }
@media (max-width: 520px) { .packs { grid-template-columns: 1fr; } .card-box { flex-direction: column; align-items: stretch; } }

/* ---------- fit mode: landscape screens of any size (see fitScreen in app.js) ---------- */
/* body is zoomed by --fit, so the app fills 100% of the real screen at every size. */
html.fit .app { height: var(--fit-h); min-height: 0; grid-template-rows: none; }
html.fit .app:not(.collapsed):not(.nochat):not(.market-open) { grid-template-columns: 290px minmax(340px, 1fr) minmax(380px, 1.45fr); }
html.fit .app.collapsed:not(.nochat):not(.market-open) { grid-template-columns: 0 minmax(340px, 1fr) minmax(380px, 1.45fr); }
html.fit .app.nochat:not(.collapsed) { grid-template-columns: 290px 0 1fr; }
html.fit .app.collapsed.nochat { grid-template-columns: 0 0 1fr; }
html.fit .app.market-open:not(.collapsed) { grid-template-columns: 290px 1fr; }
html.fit .app.collapsed.market-open { grid-template-columns: 0 1fr; }
html.fit .chat { border-right: 1px solid var(--line); border-bottom: 0; }
html.fit.zoom-clips-frames .frame iframe { width: calc(100% / var(--fit)); height: calc(100% / var(--fit)); }   /* see zoomClipsFrames() */
html.fit .film, html.fit .door { height: var(--fit-h); width: var(--fit-w); }

/* ---------- narrow screens: sidebar becomes a drawer, chat above the stage ---------- */
@media (max-width: 980px) {
  html.fit .side { position: static; width: auto; box-shadow: none; }
  html.fit .only-collapsed { display: none; }
  html.fit .app.collapsed .only-collapsed { display: grid; }
  .app, .app.collapsed { grid-template-columns: 1fr; grid-template-rows: minmax(420px, 58dvh) minmax(420px, 70dvh); height: auto; min-height: 100dvh; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 5; box-shadow: 20px 0 60px rgba(0, 0, 0, .6); }
  .app.collapsed .side { visibility: hidden; }
  .only-collapsed { display: grid; }
  .app.nochat, .app.collapsed.nochat { grid-template-rows: 0 minmax(480px, 88dvh); }
  .app.market-open, .app.collapsed.market-open { grid-template-rows: auto; }
  .chat { border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-bar { padding-left: 10px; }
  .thread { padding: 10px 16px 18px; }
  .composer { margin: 0 12px 14px; }
  .stage-body { padding: 0 12px 12px; }
  .stage-bar { padding: 0 12px; gap: 6px; }
  .pill-label { display: none; }
  #share { padding: 0 12px; }
  .code { grid-template-columns: 1fr; grid-template-rows: 140px 1fr; }
  .files { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* =====================================================================================
   ORION glass — the main app's look (ios/ORION/Theme/OrionTheme.swift + OrionGlass.swift):
   deep-navy backdrop with a faint grid, CLEAR tinted glass panes (never frosted: a blur
   smears what's behind into flat teal), a top sheen, an inner rim and a bright cyan outer
   rim with a soft glow. Layout is unchanged; only colour and surface.
   ===================================================================================== */
:root {
  --cyan: #00E5FF; --cyan-hi: #5FF0FF;
  --bg: #020810; --side: transparent; --panel: rgba(3, 13, 24, .55); --raise: rgba(14, 53, 88, .32); --raise-2: rgba(14, 53, 88, .55);
  --line: rgba(0, 229, 255, .16); --text: #F2F2F5; --muted: #B3B3B3; --faint: #7A8594;
  --blue: #00E5FF; --blue-hi: #5FF0FF; --ok: #00FF88; --warn: #F59E0B; --bad: #FF3366;
  --glass: linear-gradient(135deg, rgba(14, 53, 88, .30), rgba(3, 17, 31, .50));
  --sheen: linear-gradient(to bottom, rgba(159, 239, 255, .10), transparent 40%);
  --rim: linear-gradient(135deg, rgba(0, 229, 255, .55), rgba(0, 229, 255, .16) 50%, rgba(0, 229, 255, .40));
}
html, body {
  background:
    radial-gradient(ellipse at 18% 85%, rgba(0, 229, 255, .07), transparent 45%),
    radial-gradient(ellipse at 62% 45%, #0A1E36 0%, #04101F 45%, #020810 80%) fixed,
    #020810;
}
body::before {                                                   /* the faint 56px grid */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(0, 229, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
}
/* Only the app shell is lifted above the grid. .door and .film are full-screen fixed layers
   (z-index 10 / 20 above); making them relative shrank the film to a strip at the top of the
   sign-in page and left the card floating in empty space (2026-10-05). */
.app { position: relative; z-index: 1; }
.app { background: transparent; }

/* one glass recipe for every pane */
.side, .composer, .frame, .empty, .loading, .feed, .code, .spec, .door-card, .dlg, .menu, .market-card,
.u-msg, .o-msg.answer, .seg, .pill, .toolbar, .quota-pill, .pack, .card-box, .side-search, .tv-qr-wrap {
  position: relative;
  background: var(--sheen), var(--glass);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .09), 0 0 12px rgba(0, 229, 255, .12);
  backdrop-filter: none;
}
.side::after, .composer::after, .frame::after, .empty::after, .loading::after, .feed::after, .code::after, .spec::after,
.door-card::after, .dlg::after, .menu::after, .market-card::after, .u-msg::after, .o-msg.answer::after, .seg::after,
.pill::after, .toolbar::after, .quota-pill::after, .pack::after, .card-box::after, .side-search::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.side { margin: 10px 0 10px 10px; border-radius: 16px; height: calc(100% - 20px); }
.chat { border-right: 0; }
.chat-bar, .stage-bar { background: transparent; }
.frame { background: #fff; }                                      /* the user's app keeps its own colours */
.frame::after { z-index: 2; }

/* type: Orbitron for titles, like the app */
.side-title, .door-mark, .market-title, .dlg h3, .hello h2, .door-card h1, .tv-card h1 {
  font-family: "Orbitron", -apple-system, system-ui, sans-serif; letter-spacing: .06em;
}
.side-title { font-size: 16px; color: var(--cyan-hi); text-shadow: 0 0 12px rgba(0, 229, 255, .35); }
.door-card h1 { font-size: 24px; letter-spacing: .03em; }

/* cyan actions with dark text, glowing like the app's lit controls */
.btn-blue, .send, .quota-pill { background: linear-gradient(135deg, #00E5FF, #00B8D4); color: #021018; font-weight: 700; box-shadow: 0 0 16px rgba(0, 229, 255, .35); }
.btn-blue:hover, .send:hover:not(:disabled) { background: linear-gradient(135deg, #5FF0FF, #00D4EE); }
.quota-pill.out { background: var(--sheen), var(--glass); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .4); }
.eye { background: rgba(0, 229, 255, .14); color: var(--cyan-hi); box-shadow: 0 0 0 1px rgba(0, 229, 255, .35), 0 0 14px rgba(0, 229, 255, .25); }
.pill.live { color: var(--ok); }
.seg button[aria-selected=true] { background: rgba(0, 229, 255, .14); color: var(--cyan-hi); }
.app-row.active, .side-item:hover, .app-row:hover { background: rgba(0, 229, 255, .10); }
.app-row .tile { background: linear-gradient(135deg, #00E5FF, #00FF88); }
.u-msg { background: var(--sheen), linear-gradient(135deg, rgba(0, 229, 255, .16), rgba(14, 53, 88, .40)); }
.date-chip, .ver, .next-chip, .btn-quiet { background: rgba(14, 53, 88, .35); border-color: rgba(0, 229, 255, .22); }
.next-chip:hover, .pack:hover { box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .45), 0 0 14px rgba(0, 229, 255, .25); }
.dev-state.ok::before, .pulse, .o-msg.working::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.line.orion, .feed-head { color: var(--cyan-hi); }
.orb { border-color: var(--cyan); } .orb::after { background: var(--cyan); }
input, textarea, select { background: rgba(2, 8, 16, .55); border-color: rgba(0, 229, 255, .18); }
.dlg::backdrop { background: rgba(2, 8, 16, .7); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; box-shadow: 0 0 16px rgba(0, 229, 255, .45); }
/* overlays keep floating over the preview (the glass recipe above sets position: relative) */
.toolbar { position: absolute; }
.empty, .loading { position: absolute; }
/* things the glass recipe must not pull into the page flow */
.menu { position: absolute; }
dialog.dlg { position: fixed; }
@media (max-width: 980px) {
  html:not(.fit) .side { position: fixed; inset: 0 auto 0 0; margin: 0; height: auto; border-radius: 0 16px 16px 0; z-index: 5; }
}
/* Sheets and menus stay readable, like the app's sheets: near-opaque deep navy, same rim and glow. */
.dlg, .menu { background: var(--sheen), linear-gradient(135deg, rgba(10, 30, 54, .97), rgba(4, 16, 31, .98)); }

/* =====================================================================================
   Narrow screens (html.dev-narrow, set by fitScreen): the menu is a solid drawer over a dimmed page,
   closed until opened. Phones (html.dev-phone, under 700px) show one full screen at a time.
   Every other size is unchanged.
   ===================================================================================== */
.side-scrim, .phone-only { display: none; }
html.dev-narrow .side {
  position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); height: 100dvh; margin: 0; z-index: 20;
  border-radius: 0 16px 16px 0; background: var(--sheen), linear-gradient(135deg, rgba(10, 30, 54, .98), rgba(4, 16, 31, .99));
  transition: transform .22s ease, visibility .22s;
}
html.dev-narrow .app.collapsed .side { transform: translateX(-105%); visibility: hidden; }
html.dev-narrow .side-scrim { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(2, 8, 16, .6); }
html.dev-narrow .app.collapsed .side-scrim { display: none; }

/* phones: chat first; "Preview" switches to the app, the chat bubble switches back */
html.dev-phone .app, html.dev-phone .app.collapsed { display: block; height: 100dvh; min-height: 0; }
html.dev-phone .chat, html.dev-phone .stage, html.dev-phone .market { height: 100dvh; border: 0; }
html.dev-phone .app:not(.nochat) .stage { display: none; }
html.dev-phone .app.nochat .chat { display: none; }
html.dev-phone .app.market-open .chat, html.dev-phone .app.market-open .stage { display: none; }
html.dev-phone .phone-only { display: inline; }
html.dev-phone .not-phone { display: none; }
html.dev-phone #chat-toggle { width: auto; padding: 0 14px; border-radius: 999px; font-weight: 600; color: #021018;
  background: linear-gradient(135deg, #00E5FF, #00B8D4); box-shadow: 0 0 14px rgba(0, 229, 255, .3); }
html.dev-phone .hello h2 { font-size: 22px; }
html.dev-phone .composer { margin: 0 10px calc(10px + env(safe-area-inset-bottom)); }
html.dev-phone .stage-body { padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }

/* ---------- live build: ORION Dev's words in the chat, the code in the Code view ---------- */
.o-msg .say { margin: 0 0 8px; color: var(--text); line-height: 1.5; }
.work-status { display: flex; align-items: center; gap: 10px; color: var(--cyan-hi); font-size: 13px; }
.work-status canvas.wand { flex: none; }
.feed-head canvas.wand { flex: none; margin: -4px 0; }
.build-this { display: inline-flex; margin-top: 12px; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; }
.live-code { position: relative; padding: 0; overflow: auto; background: rgba(2, 8, 16, .55); }
.live-code pre { margin: 0; padding: 14px 16px 40px; font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; color: #d6f6ff; white-space: pre; tab-size: 2; }
.live-code pre::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.live-locked { height: 100%; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: var(--muted); font-size: 13.5px; }
.live-locked b { color: var(--cyan-hi); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; }
.live-locked span { max-width: 340px; }
.files button.writing { color: var(--cyan-hi); box-shadow: inset 2px 0 0 var(--cyan); }
@media (prefers-reduced-motion: reduce) { .live-code pre::after { animation: none; } }
.o-msg.working.running-build { display: block; color: var(--text); }
.o-msg.working.running-build::before { display: none; }
.live-locked { font-family: -apple-system, system-ui, sans-serif; }
/* Sign in with ORION ID */
.orion-id-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.oid-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cyan); box-shadow: 0 0 8px rgba(0, 229, 255, .5); }
.btn-blue .oid-dot { border-color: #021018; box-shadow: none; }

/* ORION AI */
.naira-in { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.naira-in input { width: 110px; background: rgba(2, 8, 16, .55); border: 1px solid rgba(0, 229, 255, .18); border-radius: 10px; padding: 8px 10px; color: var(--text); }

/* Wallet, market prices, domains */
.wallet-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.wallet-row span { display: grid; gap: 2px; } .wallet-row small { color: var(--muted); }
.w-num { font: 700 22px/1 "Orbitron", system-ui, sans-serif; color: var(--cyan-hi); }
.domain-box { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.domain-box small { color: var(--muted); }
.domain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.domain-list li { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 6px 10px; border-radius: 10px; background: rgba(2, 8, 16, .35); }
.domain-list small { color: var(--muted); }
.market-card { display: grid; gap: 6px; }
.market-card a { font-weight: 700; color: var(--text); }
#w-bank-code { background: rgba(2, 8, 16, .55); color: var(--text); border: 1px solid rgba(0, 229, 255, .18); border-radius: 10px; padding: 8px; max-width: 170px; }

/* P2P trades */
.trades-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trade { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(2, 8, 16, .45); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .12); }
.trade p { margin: 0; } .trade small { color: var(--muted); }
.trade-head { display: flex; justify-content: space-between; gap: 10px; }
.trade-state { color: var(--cyan-hi); font-size: 13px; }
.trade.appeal .trade-state { color: var(--warn); } .trade.completed .trade-state { color: var(--ok); }
.pay-to { font: 600 15px ui-monospace, "SF Mono", Menlo, monospace; color: var(--cyan-hi); user-select: all; }

/* Caffeine-style working / thinking card in the chat (no wand here; the wand lives in the Code view) */
.reason { display: grid; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(2, 8, 16, .42); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .14); }
.reason-head { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .12em; color: var(--cyan-hi); cursor: default; list-style: none; }
.reason-head::-webkit-details-marker { display: none; }
details.reason .reason-head { cursor: pointer; }
details.reason .reason-head::after { content: "⌄"; margin-left: auto; color: var(--muted); letter-spacing: 0; }
.reason-count { color: var(--muted); letter-spacing: .02em; font-size: 12.5px; }
.reason-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(0, 229, 255, .25); border-top-color: var(--cyan); animation: spin .8s linear infinite; flex: none; }
.reason-tick { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); flex: none; position: relative; box-shadow: 0 0 8px rgba(0, 255, 136, .4); }
.reason-tick::after { content: ""; position: absolute; left: 4px; top: 2px; width: 4px; height: 7px; border: solid #021018; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.reason-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.reason-list li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; font-size: 13.5px; line-height: 1.45; }
.reason-list li.done { color: var(--muted); }
.reason-list li.now { color: var(--text); }
.reason-list li i { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; border: 1.6px solid rgba(0, 229, 255, .45); box-sizing: border-box; }
.reason-list li.done i { background: rgba(0, 229, 255, .18); border-color: rgba(0, 229, 255, .6); position: relative; }
.reason-list li.done i::after { content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px; border: solid var(--cyan-hi); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.reason-list li.now i { border-color: var(--cyan); border-top-color: transparent; animation: spin .8s linear infinite; }
.reason-now { font: 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reason-spin, .reason-list li.now i { animation: none; } }

/* Code, clean: line numbers + colours by meaning (web/highlight.js) */
.file-body, .live-code pre { counter-reset: ln; font: 13px/1.65 "SF Mono", ui-monospace, Menlo, Consolas, monospace; color: #dbe7f5; tab-size: 2; }
.file-body .ln, .live-code pre .ln { counter-increment: ln; display: inline-block; min-width: 100%; }
.file-body .ln::before, .live-code pre .ln::before { content: counter(ln); display: inline-block; width: 3.2em; margin-right: 1.2em; text-align: right; color: rgba(159, 179, 200, .35); user-select: none; }
.file-body .ln:hover { background: rgba(0, 229, 255, .05); }
.hc { color: #6f8196; font-style: italic; }          /* comment */
.hs { color: #a5e8a0; }                              /* string */
.hk { color: #c9a7ff; }                              /* keyword / at-rule / heading */
.hn { color: #ffb477; }                              /* number, constant, colour */
.hf { color: #6fe3ff; }                              /* function */
.hy { color: #ffd479; }                              /* type, component, bold */
.ht { color: #ff8fc4; }                              /* tag, selector */
.ha, .hp { color: #9fd7ff; }                         /* attribute, property, JSON key */
.file-body, .live-code { background: rgba(2, 6, 12, .72); }

/* The ORION mark: the diamond (ORION's own; never Apple's logo) */
.built-by { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; font-size: 12px; letter-spacing: .06em; color: var(--cyan-hi); opacity: .85; }
.built-by svg { width: 15px; height: 15px; filter: drop-shadow(0 0 6px rgba(0, 229, 255, .5)); }
.built-by b { letter-spacing: .12em; }
.built-by.small { font-size: 11px; opacity: .6; margin: 0 0 4px; }

/* "Coming soon" */
.soon { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--muted); font-size: 13px; }
.soon-chip { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #021018; background: linear-gradient(135deg, #00E5FF, #00B8D4); }

/* Two ways in: ORION ID or a passkey */
.door-or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; margin: 4px 0; }
.door-or::before, .door-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.door-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .door-pair { grid-template-columns: 1fr; } }

/* One wallet: trial/builds pill + the coin balance beside it. */
.quota-row { display: flex; gap: 8px; align-items: stretch; }
.quota-row .quota-pill { flex: 1; min-width: 0; }
.coin-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(0,229,255,.35); background: rgba(0,229,255,.08); color: var(--text);
  border-radius: 999px; padding: 0 13px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.coin-chip:hover { background: rgba(0,229,255,.16); }
.coin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c9, #f5c542 45%, #b8860b 90%);
  box-shadow: inset 0 0 0 1.5px rgba(120,80,0,.55); flex: none; }

/* The notification bell. */
.bell-wrap { position: relative; }
.bell-n { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff;
  font-size: 10px; line-height: 16px; text-align: center; pointer-events: none; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; z-index: 50;
  background: #06121f; border: 1px solid rgba(0,229,255,.3); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.7); padding: 8px; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; }
#bell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#bell-list li { position: relative; display: grid; gap: 3px; padding: 9px 30px 9px 10px; border-radius: 10px; font-size: 13px; }
#bell-list li.unread { background: rgba(0,229,255,.07); }
#bell-list li small { color: var(--faint); font-size: 11px; }
#bell-list li.bell-empty { color: var(--faint); padding: 10px; }
.bell-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 6px; color: var(--muted); font-size: 16px; line-height: 1; }
.bell-x:hover { background: var(--raise-2); color: var(--text); }

/* While ORION works: the work column (wand, steps, files) BESIDE the code, never over the preview. */
.code.building { grid-template-columns: 280px 1fr; }
.code.building #files { display: none; }
.work-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; padding: 14px; border-right: 1px solid var(--line); background: rgba(2, 8, 16, .5); }
.work-side[hidden] { display: none; }
.work-head { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .12em; color: var(--cyan-hi); }
.work-side canvas.wand { align-self: center; }
.work-side .reason-now { white-space: normal; }
.work-files { border: 0; padding: 0; margin-top: auto; }
.live-code pre .ln.gap { color: var(--faint); }
@media (max-width: 980px) {
  .code.building { grid-template-columns: 1fr; grid-template-rows: minmax(120px, 34%) 1fr; }
  .work-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .work-side canvas.wand { display: none; }
}
.confirm-text { margin: 4px 0 16px; white-space: pre-wrap; max-width: 420px; }

/* Ask ORION: the customer's own assistant, as a sheet on the right. */
dialog.assistant { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(460px, 100vw); max-width: 100vw; padding: 0;
  border-radius: 0; border: 0; border-left: 1px solid rgba(0,229,255,.25); background: #040d18; display: none; flex-direction: column; }
dialog.assistant[open] { display: flex; }
/* fit mode zooms body, and Chrome scales dvh by that zoom too: a 100dvh sheet ran past the screen and hid its input. */
html.fit dialog.assistant { height: var(--fit-h); max-height: var(--fit-h); width: min(460px, var(--fit-w)); }
.as-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); letter-spacing: .14em; color: var(--cyan-hi); }
.as-mark svg { width: 20px; height: 20px; display: block; }
.as-head .icon-btn { font-size: 22px; }
.as-list { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.as-hello { color: var(--muted); margin: auto 0; text-align: center; font-size: 15px; }
.as-msg { max-width: 88%; display: grid; gap: 6px; padding: 10px 14px; border-radius: 16px; line-height: 1.45; font-size: 14px; }
.as-msg .as-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.as-msg.user { align-self: flex-end; background: var(--raise-2); }
.as-msg.assistant { align-self: flex-start; background: rgba(0,229,255,.07); box-shadow: inset 0 0 0 1px rgba(0,229,255,.16); }
.as-msg.owner { align-self: flex-start; background: rgba(61,220,151,.09); box-shadow: inset 0 0 0 1px rgba(61,220,151,.3); }
.as-msg.thinking { color: var(--muted); }
.as-who { color: var(--faint); font-size: 11px; letter-spacing: .06em; }
.as-act { justify-self: start; }
.as-form { border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: grid; gap: 8px; }
.as-form textarea { resize: none; min-height: 44px; max-height: 160px; background: rgba(2,8,16,.7); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; }
.as-row { display: flex; align-items: center; gap: 8px; }
#as-support.on { color: var(--cyan-hi); box-shadow: inset 0 0 0 1px var(--cyan); }
/* Photos in Ask ORION: in a bubble (tap to open full size), and dropped onto the sheet. */
.as-photos { display: flex; flex-wrap: wrap; gap: 6px; }
.as-photos a { display: block; }
.as-photos img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; display: block; background: var(--raise); }
.as-photos img:only-child { width: min(240px, 100%); height: auto; max-height: 260px; }
dialog.assistant.dropping .as-list { box-shadow: inset 0 0 0 2px var(--cyan); }

.legal-links { display: flex; justify-content: center; gap: 14px; font-size: 12px; }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--cyan); }

/* Buy coins: three plain steps (amount, receipt email, pay), apart from the Wallet. */
.plans .step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; font-size: 12px; color: #021018; background: var(--cyan); }
.pack.picked { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 16px rgba(0, 229, 255, .35); }
.pay-email { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
#pay-go { margin-top: 2px; }
.wallet-row .w-right { display: flex; align-items: center; gap: 10px; }

/* =====================================================================================
   PLACED LIKE CAFFEINE (2026-10-20): app-name menu, account popover, full-page App settings
   and Account settings, the App Market area, and a light theme.
   ===================================================================================== */
.app.nostage { grid-template-columns: 290px 1fr 0; }
.app.collapsed.nostage { grid-template-columns: 0 1fr 0; }
.app.nostage .stage { visibility: hidden; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.menu.pm, .menu.acct-pop { min-width: 236px; }
.menu.pm button, .menu.acct-pop > button { display: flex; align-items: center; gap: 10px; }
.menu.pm button svg, .menu.acct-pop > button svg { width: 17px; height: 17px; color: var(--muted); }
.menu .danger-item { color: var(--bad); }
.menu .danger-item svg { color: var(--bad) !important; }
.menu.acct-pop { bottom: calc(100% + 8px); z-index: 30; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); max-height: min(78vh, 640px); overflow: auto; }
.ap-email { margin: 6px 10px 6px; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-card { margin: 6px 4px; padding: 10px; border-radius: 12px; background: rgba(0, 229, 255, .07); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; }
.ap-card-top, .ap-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-card .btn-blue.small { padding: 5px 12px; font-size: 13px; border-radius: 999px; }
.menu .ap-link { width: auto; padding: 4px 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13.5px; }
.menu .ap-link svg { width: 14px; height: 14px; }
.ap-theme { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.ap-theme > svg { width: 17px; height: 17px; color: var(--muted); }
.theme-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.menu .theme-seg button { width: 30px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 999px; }
.theme-seg button svg { width: 15px; height: 15px; }
.theme-seg button[aria-checked=true] { background: var(--raise-2); color: var(--cyan); }
.tb-link { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #d9dbe0; }
.tb-link:hover { background: var(--raise-2); }
.tb-link[aria-disabled=true] { opacity: .4; pointer-events: none; }
.btn-blue.small { padding: 6px 14px; font-size: 13.5px; border-radius: 999px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; transition: .25s; z-index: 100; background: var(--sheen), var(--glass), #04101F; color: var(--text); padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .35), 0 10px 40px rgba(0, 0, 0, .5); font-size: 14px; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.badge { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.badge.live { color: var(--ok); box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .35); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.icon-btn.tiny { width: 24px; height: 24px; display: inline-grid; font-size: 13px; vertical-align: middle; }
.info-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 6px 0 4px; font-size: 14px; }
.info-list dt { color: var(--muted); }
.info-list dd { margin: 0; word-break: break-all; }
.info-list a { color: var(--cyan); }
.pw-state { margin: 0; font-size: 14px; }
.new-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-height: 60vh; overflow: auto; }
.new-list small { color: var(--faint); font-size: 12px; }
.new-list b { display: block; }
.new-list p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.dlg textarea, .fp-form input, .dlg input:not([type=checkbox]) { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }

/* ---------- full pages ---------- */
.fullpage { position: fixed; inset: 0; z-index: 12; display: grid; grid-template-columns: 260px 1fr; background: inherit;
  background: radial-gradient(ellipse at 62% 45%, #0A1E36 0%, #04101F 45%, #020810 80%), #020810; }
.fp-side { padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--line); overflow: auto; }
.fp-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; }
.fp-back svg { width: 16px; height: 16px; }
.fp-switch { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.fp-switch svg { width: 16px; height: 16px; color: var(--muted); }
.fp-switch select { flex: 1; min-width: 0; background: transparent; border: 0; font-weight: 600; }
.fp-switch select option { background: #04101F; }
.fp-nav { display: grid; gap: 2px; }
.fp-nav button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-align: left; color: var(--muted); }
.fp-nav button svg { width: 17px; height: 17px; }
.fp-nav button:hover { background: var(--raise); color: var(--text); }
.fp-nav button[aria-current=true] { background: var(--raise-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.fp-main { overflow: auto; padding: 28px clamp(16px, 4vw, 48px) 60px; }
.fp-sec { max-width: 920px; display: grid; gap: 14px; }
.fp-sec h2 { margin: 0; font-size: 20px; }
.fp-head { display: flex; align-items: center; gap: 12px; }
.fp-head select, .mk-filters select { background: var(--raise); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.fp-head select option, .mk-filters select option, #as-reports option { background: #04101F; }
#as-reports { background: var(--raise); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; max-width: 220px; }
.fp-card { position: relative; background: var(--sheen), var(--glass); border-radius: 16px; padding: 16px; box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .12), 0 0 12px rgba(0, 229, 255, .08); display: grid; gap: 10px; }
#as-general { gap: 0; }
.fp-card > .switch-row:first-child { border-top: 0; }
.fp-card .ask-msg:empty { display: none; }
.fp-card .ask-msg { margin: 8px 0; }
.fp-card .domain-box { display: grid; gap: 8px; }
.fp-row { display: flex !important; align-items: center; gap: 12px; }
.fp-grow { flex: 1; min-width: 0; }
.fp-grow small, .promo-box small { display: block; color: var(--muted); font-size: 13px; }
.fp-sub { margin: 0; font-size: 14px; color: var(--muted); font-weight: 500; }
.fp-form { max-width: 560px; }
.avatar.big { width: 44px; height: 44px; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.promo-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border-radius: 12px; background: rgba(0, 229, 255, .05); box-shadow: inset 0 0 0 1px var(--line); }
.promo-box .copy-field { flex: 0 1 280px; }
.kv { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.kv b { color: var(--text); font-weight: 600; }
.fp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fp-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12.5px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.fp-table td { padding: 10px 8px; border-bottom: 1px solid rgba(0, 229, 255, .07); vertical-align: middle; }
.fp-table td small { color: var(--muted); }
.fp-table .num { text-align: right; white-space: nowrap; }
.fp-table .neg { color: var(--text); }
.fp-table .pos { color: var(--ok); }
.click-row { cursor: pointer; }
.click-row:hover td { background: rgba(0, 229, 255, .05); }
.att-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: block; }
.stat-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
.stat { background: var(--sheen), var(--glass); border-radius: 14px; padding: 14px; box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .12); display: grid; gap: 6px; align-content: start; }
.stat small { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.stat b { font-size: 24px; font-weight: 600; }
.stat:first-child b { font-size: 34px; }
.stat .stat-sub { text-transform: none; letter-spacing: 0; font-size: 12px; }
.stat-wide { grid-column: 1 / -1; margin: 0; }
.day-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 6px; overflow-x: auto; }
.day-bar { flex: 1 0 22px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.day-bar i { width: 100%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, rgba(0, 229, 255, .35), var(--cyan)); }
.day-bar small { font-size: 10.5px; color: var(--faint); }
.country-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.country-list li { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; overflow: hidden; }
.cn-bar { position: absolute; inset: 0 auto 0 0; background: rgba(0, 229, 255, .10); border-radius: 10px; z-index: 0; }
.country-list li > :not(.cn-bar) { position: relative; z-index: 1; }
.cn-flag { font-size: 18px; }
.cn-name { flex: 1; }

/* ---------- App Market ---------- */
.market { overflow: hidden; display: flex; flex-direction: column; }
.mk-bar { gap: 10px; }
.mk-nav { display: flex; gap: 4px; margin: 0 auto; }
.mk-nav button { padding: 6px 12px; border-radius: 999px; color: var(--muted); font-size: 14.5px; }
.mk-nav button:hover { color: var(--text); }
.mk-nav button[aria-selected=true] { color: var(--text); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.mk-search { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.mk-search svg { width: 16px; height: 16px; color: var(--muted); }
.mk-search input { background: transparent; border: 0; outline: 0; width: 150px; }
.mk-body { flex: 1; overflow: auto; padding: 8px clamp(14px, 3vw, 34px) 60px; display: grid; gap: 22px; align-content: start; }
.mk-title { margin: 6px 0 0; font-size: 20px; }
.mk-hero { display: grid; gap: 10px; }
.mk-hero-card { display: grid; grid-template-columns: 1fr 1fr; min-height: 260px; border-radius: 22px; overflow: hidden; background: var(--sheen), var(--glass); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .18), 0 0 24px rgba(0, 229, 255, .1); }
.mk-hero-text { padding: 28px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; align-items: flex-start; }
.mk-hero-text small { color: var(--cyan); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.mk-hero-text h2 { margin: 0; font-size: 30px; font-family: Orbitron, sans-serif; letter-spacing: .02em; }
.mk-hero-text p { margin: 0 0 8px; color: var(--muted); max-width: 46ch; }
.mk-hero-art { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, .22), transparent 60%), linear-gradient(135deg, rgba(14, 53, 88, .5), rgba(2, 8, 16, .4)); }
.mk-hero-art .orb.big { width: 120px; height: 120px; border-width: 6px; }
.mk-hero-art .orb.big::after { inset: 32px; }
.mk-dots { display: flex; justify-content: center; gap: 8px; }
.mk-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--raise-2); padding: 0; }
.mk-dots .dot[aria-current=true] { background: var(--cyan); }
.mk-row { display: grid; gap: 10px; }
.mk-row-head { display: flex; align-items: center; gap: 8px; }
.mk-row-head h3 { margin: 0; font-size: 16px; }
.mk-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 280px); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.mk-card { position: relative; display: grid; gap: 10px; padding: 12px; border-radius: 18px; background: var(--sheen), var(--glass); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .12), 0 0 12px rgba(0, 229, 255, .06); cursor: pointer; align-content: start; }
.mk-card:hover { box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .35), 0 0 16px rgba(0, 229, 255, .14); }
.mk-pic { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, rgba(14, 53, 88, .6), rgba(2, 8, 16, .6)); }
.mk-pic img { width: 100%; height: 100%; object-fit: cover; }
.mk-pic-name { font-family: Orbitron, sans-serif; font-size: 18px; color: var(--cyan-hi); padding: 0 12px; text-align: center; }
.mk-head { display: flex; align-items: center; gap: 10px; }
.mk-icon { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--raise-2); font-weight: 700; color: var(--cyan); flex: none; }
.mk-icon img { width: 100%; height: 100%; object-fit: cover; }
.mk-titles { display: grid; min-width: 0; }
.mk-titles b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-titles small { color: var(--muted); font-size: 12.5px; }
.mk-titles small.link { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(0, 229, 255, .4); }
.mk-short { margin: 0; color: var(--muted); font-size: 13.5px; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-remix { font-size: 12.5px; color: var(--faint); }
.like { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; color: var(--muted); font-size: 13px; }
.like svg { width: 16px; height: 16px; }
.like:hover { background: var(--raise); }
.like.on { color: #ff5d8f; }
.like.on svg { fill: currentColor; }
.mk-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip { padding: 5px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.chip.on { color: var(--bg); background: var(--cyan); }
.mk-creator { display: grid; gap: 16px; }
.mk-banner { position: relative; height: 170px; border-radius: 20px; background: radial-gradient(ellipse at 30% 120%, rgba(0, 229, 255, .35), transparent 60%), linear-gradient(135deg, #0A1E36, #04101F 60%, #0E3558); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .18); margin-bottom: 30px; }
.mk-avatar { position: absolute; left: 24px; bottom: -34px; width: 92px; height: 92px; border-radius: 22px; display: grid; place-items: center; font-size: 38px; font-weight: 700; color: var(--cyan-hi); background: radial-gradient(circle, rgba(0, 229, 255, .35), #04101F 70%); box-shadow: 0 0 0 4px #04101F, 0 0 20px rgba(0, 229, 255, .35); }
.mk-cr-cols { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.mk-cr-left { display: grid; gap: 8px; }
.mk-cr-left h4 { margin: 10px 0 0; font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.mk-cr-left p { margin: 0; }
.mk-cr-name { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.mk-link { color: var(--cyan); font-size: 14px; word-break: break-all; }
.mk-cr-right { display: grid; gap: 12px; }
.mk-profile-empty { max-width: 520px; display: grid; gap: 12px; justify-items: start; padding-top: 30px; }
.mk-pub-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.mk-pub { display: grid; gap: 12px; max-width: 620px; }
.mk-pub h4 { margin: 8px 0 0; }
.mk-pub input, .mk-pub textarea, .mk-pub select { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mk-pub select option { background: #04101F; }
.pic-box { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.pic-prev { flex: none; width: 150px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: rgba(2, 8, 16, .6); box-shadow: inset 0 0 0 1px var(--line); }
.pic-prev.icon { width: 64px; aspect-ratio: 1; }
.pic-prev img { width: 100%; height: 100%; object-fit: cover; }
.pic-side { display: grid; gap: 4px; justify-items: start; }
.pic-side small { color: var(--muted); font-size: 12.5px; }
.rights { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.rights input { width: auto !important; margin-top: 3px; }
.mk-pub-btns { display: grid; gap: 6px; justify-items: center; }
.danger-link { color: var(--bad); }
.mk-pub-preview { position: sticky; top: 10px; display: grid; gap: 8px; }

@media (max-width: 860px) {
  .fullpage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .fp-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; gap: 10px; }
  .fp-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .mk-hero-card { grid-template-columns: 1fr; }
  .mk-hero-art { display: none; }
  .mk-cr-cols, .mk-pub-wrap { grid-template-columns: 1fr; }
  .mk-pub-preview { position: static; }
  .mk-bar { flex-wrap: wrap; }
  .mk-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .mk-search input { width: 110px; }
  .fp-table { font-size: 13px; }
}

/* ---------- light theme ---------- */
:root[data-theme=light] {
  color-scheme: light;
  --bg: #f4f8fb; --panel: rgba(255, 255, 255, .7); --raise: rgba(10, 60, 100, .06); --raise-2: rgba(10, 60, 100, .12);
  --line: rgba(0, 120, 160, .2); --text: #0b1a26; --muted: #4c5d6b; --faint: #74838f;
  --cyan: #0096b4; --cyan-hi: #007a93; --blue: #0096b4; --blue-hi: #00aacd; --ok: #00995a; --warn: #b26a00; --bad: #d01f4f;
  --glass: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(232, 243, 249, .9));
  --sheen: linear-gradient(to bottom, rgba(255, 255, 255, .6), transparent 40%);
  --rim: linear-gradient(135deg, rgba(0, 150, 180, .45), rgba(0, 150, 180, .15) 50%, rgba(0, 150, 180, .35));
}
:root[data-theme=light] html, :root[data-theme=light] body, html[data-theme=light], html[data-theme=light] body {
  background: radial-gradient(ellipse at 18% 85%, rgba(0, 150, 180, .08), transparent 45%), radial-gradient(ellipse at 62% 45%, #ffffff 0%, #eef5fa 60%, #e3eef5 100%) fixed, #eef5fa;
}
html[data-theme=light] body::before { background-image: linear-gradient(rgba(0, 120, 160, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 120, 160, .06) 1px, transparent 1px); }
html[data-theme=light] .fullpage { background: radial-gradient(ellipse at 62% 45%, #ffffff 0%, #eef5fa 60%, #e3eef5 100%), #eef5fa; }
html[data-theme=light] .btn-blue { color: #fff; }
html[data-theme=light] .menu, html[data-theme=light] .dlg, html[data-theme=light] .bell-panel { background: var(--sheen), var(--glass), #fff; }
html[data-theme=light] .toolbar { background: rgba(255, 255, 255, .95); }
html[data-theme=light] .toolbar button, html[data-theme=light] .tb-link { color: var(--text); }
html[data-theme=light] .fp-switch select option, html[data-theme=light] .fp-head select option, html[data-theme=light] .mk-filters select option, html[data-theme=light] .mk-pub select option, html[data-theme=light] #as-reports option { background: #fff; }
html[data-theme=light] .toast { background: #fff; }
html[data-theme=light] .mk-banner { background: radial-gradient(ellipse at 30% 120%, rgba(0, 150, 180, .3), transparent 60%), linear-gradient(135deg, #dff0f7, #f7fbfd 60%, #cfe7f1); }
html[data-theme=light] .mk-avatar { background: radial-gradient(circle, rgba(0, 150, 180, .25), #fff 70%); box-shadow: 0 0 0 4px #fff, 0 0 20px rgba(0, 150, 180, .25); }
html[data-theme=light] .mk-hero-art, html[data-theme=light] .mk-pic { background: linear-gradient(135deg, #dff0f7, #f2f8fb); }
html[data-theme=light] .eye { background: rgba(0, 150, 180, .12); }
html[data-theme=light] .pic-prev { background: #fff; }
.menu .ap-card .btn-blue { width: auto; }
a.btn-quiet, a.btn-blue { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
a.btn-blue { color: #021018; }
.mk-foot { flex-wrap: nowrap; }
.mk-foot .btn-quiet.small, .mk-foot .btn-blue.small { padding: 5px 11px; }
.mk-cr-left .dlg-row { justify-content: flex-start; }

/* ---- phone apps (2026-10-20): what kind of app, the phone QR, the Android app section ---- */
.kind-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 620px; margin: 22px auto 0; text-align: left; }
.kind-card { text-align: left; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(14, 53, 88, .22); color: var(--text); cursor: pointer; font: inherit; transition: border-color .15s, background .15s, box-shadow .15s; }
.kind-card:hover { border-color: rgba(0, 229, 255, .45); }
.kind-card[aria-checked="true"] { border-color: var(--cyan); background: rgba(0, 229, 255, .12); box-shadow: 0 0 0 1px rgba(0, 229, 255, .35), 0 0 18px rgba(0, 229, 255, .15); }
.kind-card .kind-icon { font-size: 20px; line-height: 1; }
.kind-card b { font-size: 14px; }
.kind-card small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
html.dev-phone .kind-cards, .kind-cards.narrow { grid-template-columns: 1fr; }
@media (max-width: 640px) { .kind-cards { grid-template-columns: 1fr; } }
.kind-badge { margin-left: auto; font-size: 12px; line-height: 1; opacity: .85; flex: none; }
.qr-dlg { max-width: 360px; }
.qr-box { display: grid; place-items: center; padding: 14px; margin: 6px 0 12px; background: #fff; border-radius: 14px; }
.qr-box svg { width: 220px; height: 220px; display: block; }
.and-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.and-row { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(2, 8, 16, .35); display: grid; gap: 8px; }
.and-row p { margin: 0; }
.and-top { display: flex; align-items: baseline; gap: 10px; }
.and-top small { color: var(--muted); margin-left: auto; }
.and-now { color: var(--cyan-hi); font-size: 13.5px; }
.and-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.and-acts a { text-decoration: none; }
.ios-key-form { display: grid; gap: 10px; margin-top: 8px; }
.ios-key-form label { display: grid; gap: 4px; font-size: 13px; color: var(--text); }
.ios-key-form label i { color: var(--faint); font-style: normal; }
.ios-key-form small { color: var(--faint); font-size: 12px; }
.ios-key-form .plans-fine { margin-top: 0; }
.ios-tf { font-size: 13px; color: var(--muted); }
.ios-tf.sent { color: var(--cyan-hi); }
.and-succeeded { border-color: rgba(0, 255, 136, .25); }

/* A website session opened from the ORION Build app outside the US App Store (server noBuy): no buying,
   prices, plans, offers or credit-earning invites anywhere (Apple's anti-steering rule). */
.no-buy #buy-menu, .no-buy #w-buy, .no-buy #pb-buy, .no-buy #ov-buy, .no-buy #ext-getcoins, .no-buy #wallet-menu,
.no-buy #ap-invite, .no-buy #ap-code, .no-buy #ov-invite-card, .no-buy .promo-box, .no-buy #domain-buy-row,
.no-buy button[data-sec="billing"], .no-buy section[data-sec="billing"],
.no-buy #plans-dlg, .no-buy #wallet-dlg, .no-buy #trades-dlg, .no-buy #promo-dlg { display: none !important; }

/* The daily-limit card (app.js showLimit): reset time, one offer, nothing pre-selected. */
.limit-dlg { width: min(420px, calc(100vw - 32px)); }
.limit-sub { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.limit-nudge { margin: 0 0 10px; color: var(--cyan); font-weight: 600; font-size: 14px; }
.limit-offer { display: grid; gap: 8px; margin: 6px 0 4px; }
.limit-offer .btn-blue { width: 100%; }
.limit-offer small { color: var(--muted); font-size: 12px; }
.limit-acts { display: grid; gap: 8px; margin-top: 8px; }
.limit-acts:empty { display: none; }
.limit-foot { justify-content: space-between; }

/* App stores: the App Store and Google Play checklists (pages.js renderStores) */
.store-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.store-head { display: flex; align-items: baseline; gap: 10px; }
.store-head h3 { margin: 0; font-size: 17px; }
.store-count { margin-left: auto; color: var(--muted); font-size: 13px; }
.store-bar { height: 4px; border-radius: 4px; background: rgba(0, 229, 255, .1); overflow: hidden; }
.store-bar i { display: block; height: 100%; background: var(--cyan); border-radius: 4px; }
.store-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.store-step { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 10px 6px; border-radius: 10px; }
.store-step.next { background: rgba(0, 229, 255, .06); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .18); }
.store-mark { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.store-step.next .store-mark { border-color: var(--cyan); }
.store-step.done .store-mark { background: rgba(0, 255, 136, .16); border-color: rgba(0, 255, 136, .5); color: #6dffb4; }
.store-body { display: grid; gap: 6px; min-width: 0; }
.store-body b { font-weight: 600; }
.store-body b small { font-weight: 400; color: var(--muted); }
.store-step.done .store-body > b { color: var(--muted); }
.store-body p { margin: 0; }
.store-fee { font-size: 12.5px; color: var(--cyan-hi); }
.store-body .and-acts a { display: inline-flex; align-items: center; }
html[data-theme=light] .store-step.done .store-mark { color: #0a7a45; }

/* App Market demo videos (pages.js demoVideo): a silent loop in the card; tall phone films sit in the
   middle over their own blurred first frame. The video is pinned to the card's 16:9 box. */
.mk-pic.has-video, .vid-prev.has-video { position: relative; overflow: hidden; background: #05080d; }
.mk-pic.has-video video, .vid-prev.has-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.mk-pic.has-video.tall video, .vid-prev.has-video.tall video { inset: 10px auto 0 50%; width: 46%; height: calc(100% - 10px); transform: translateX(-50%); object-fit: cover; object-position: top; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08), 0 8px 30px rgba(0, 0, 0, .5); }
.mk-pic.has-video.tall::before, .vid-prev.has-video.tall::before { content: ""; position: absolute; inset: -20px; background: var(--mk-poster) center / cover; filter: blur(18px) brightness(.55); }
.vid-prev { position: relative; overflow: hidden; display: grid; place-items: center; }
.vid-box .and-acts { margin-top: 4px; }
.vid-prev { width: 220px; }
.vid-prev .mk-pic-name { font-size: 12px; }
/* A first build that didn't say what kind of app (app.js askKind): ORION's question with the three cards. */
.kind-ask { margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 53, 88, .18); color: var(--text); }
.kind-ask > p { margin: 0; line-height: 1.45; }
.kind-ask .kind-cards { margin: 12px 0 0; max-width: none; }
/* App settings → Data (pages.js loadData): collections as chips, then the chosen one's records. */
.data-colls { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 14px; }
.data-coll { text-align: left; display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(14, 53, 88, .22); color: var(--text); cursor: pointer; font: inherit; }
.data-coll small { color: var(--muted); }
.data-coll .data-hint { font-size: 11px; opacity: .8; }
.data-coll.on { border-color: rgba(0, 229, 255, .6); box-shadow: 0 0 0 1px rgba(0, 229, 255, .25); }
.data-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.data-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; background: rgba(4, 16, 28, .35); }
.data-fields { display: grid; gap: 3px; }
.data-fields > div { display: grid; grid-template-columns: minmax(80px, 140px) 1fr; gap: 10px; align-items: baseline; }
.data-fields small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-fields span { overflow-wrap: anywhere; }
.data-foot { display: flex; align-items: center; gap: 8px; }
.data-foot > small { color: var(--muted); }
.data-add { display: grid; gap: 8px; margin-top: 6px; }
.data-edit { width: 100%; box-sizing: border-box; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); background: rgba(4, 16, 28, .5); border: 1px solid var(--line); border-radius: 10px; padding: 10px; resize: vertical; }
/* ORION Deals (pages.js renderDeals / openDeal / dealForm) */
.deal-tag { position: absolute; top: 8px; left: 8px; z-index: 2; border: 0; cursor: pointer; font: 600 11px/1 inherit; letter-spacing: .02em; padding: 6px 10px; border-radius: 999px; color: #021018; background: linear-gradient(135deg, #00E5FF, #00B8D4); box-shadow: 0 0 10px rgba(0, 229, 255, .35); }
.mk-pic { position: relative; }
.deal-intro { margin: 4px 0 16px; max-width: 760px; }
.deal-money { margin: 0; font-weight: 600; color: var(--text); }
.deal-page { display: grid; gap: 14px; max-width: 860px; }
.deal-page > .btn-quiet { justify-self: start; }
.deal-head { display: grid; gap: 6px; justify-items: start; }
.deal-head h2 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.deal-head > small { color: var(--accent, #00E5FF); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.deal-text { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.deal-conds { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.deal-accept { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.deal-accept input { margin-top: 3px; }
.deal-sha { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; }
.deal-cond { display: grid; gap: 8px; }
.deal-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.deal-month { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(4, 16, 28, .35); }
.deal-month small { color: var(--muted); }
.deal-month b { font-size: 18px; }
.deal-month.met { border-color: rgba(0, 255, 136, .45); }
.deal-month.missed { border-color: rgba(255, 90, 90, .45); }
.deal-upload { flex-wrap: wrap; align-items: center; }
.deal-upload input, .deal-upload select, .deal-why, .deal-cond-row input[type=number] { font: inherit; color: var(--text); background: rgba(4, 16, 28, .5); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.deal-why { min-width: 0; flex: 1; }
.deal-record { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.deal-record li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.deal-record li small { color: var(--muted); }
.deal-cond-box { display: grid; gap: 8px; }
.deal-cond-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.deal-cond-row input[type=number] { width: 110px; }
.deal-pitch { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.45; color: var(--text); background: rgba(4, 16, 28, .5); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; resize: vertical; }
.hello .free-hint { margin-top: 10px; font-size: 13px; color: #e8c56a; }
/* Competitions (pages.js openCompetition, competition.html): the live anonymous board and the prize proof. */
.comp-tag { background: rgba(255, 196, 0, .9) !important; color: #1b1300 !important; }
.comp-note { border-color: rgba(0, 229, 255, .35); background: rgba(0, 229, 255, .07); }
.comp-board { display: grid; gap: 6px; }
.comp-row { display: grid; grid-template-columns: minmax(110px, 1.4fr) repeat(3, minmax(64px, 1fr)) minmax(90px, 1.2fr); gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; }
.comp-row.comp-head { border: 0; color: var(--muted); font-size: 11px; padding-bottom: 0; }
.comp-row.mine { border-color: rgba(0, 229, 255, .6); background: rgba(0, 229, 255, .06); }
.comp-row.won { border-color: rgba(255, 196, 0, .7); background: rgba(255, 196, 0, .08); }
.comp-pct { position: relative; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.comp-pct i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #00b8d4, #00e5ff); }
.comp-pct small { position: relative; display: block; text-align: center; font-size: 11px; line-height: 18px; color: var(--text); }
.comp-proof-img { max-width: min(100%, 420px); border-radius: 12px; border: 1px solid var(--line); }
.comp-hash { display: block; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; color: #7fe9ff; }
.comp-won { padding: 12px 14px; border-radius: 12px; background: rgba(255, 196, 0, .1); border: 1px solid rgba(255, 196, 0, .4); }
.comp-proof-form { display: grid; gap: 8px; margin-top: 10px; }
@media (max-width: 640px) {
  .comp-row { grid-template-columns: 1fr 1fr 1fr; } .comp-row > :first-child, .comp-row > .comp-pct { grid-column: 1 / -1; }
  .comp-row.comp-head { display: none; }
  .comp-row [data-l]::before { content: attr(data-l); display: block; font-size: 10px; color: var(--muted, #8ea4b8); }
}
.comp-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 12px 10px; justify-content: flex-end; }
.comp-flag { color: #e8c56a; flex: 1; }