/* ============ tokens: Apple dark (overrides the Clawpilot palette, by Artur's choice) ============ */
:root, html[data-theme="dark"], html[data-theme="light"] {
  color-scheme: dark;
  --cp-bg: #000000; --cp-bg-elevated: #0d0d0f; --cp-surface: #1c1c1e; --cp-surface-soft: #2c2c2e; --cp-border: rgba(84,84,88,.55); --cp-border-strong: rgba(120,120,128,.7);
  --cp-text: #ffffff; --cp-text-muted: rgba(235,235,245,.6); --cp-text-soft: rgba(235,235,245,.78); --cp-accent: #0a84ff; --cp-accent-hover: #409cff; --cp-accent-soft: rgba(10,132,255,.16); --cp-accent-fg: #ffffff;
  --cp-success: #30d158; --cp-danger: #ff453a; --cp-warning: #ffd60a; --cp-link: #409cff; --cp-shadow: 0 18px 48px rgba(0,0,0,.45); --cp-overlay: rgba(0,0,0,.6); --cp-panel: rgba(28,28,30,.72); --cp-panel-strong: rgba(28,28,30,.94); --cp-sheen: rgba(255,255,255,.05); --cp-highlight: rgba(10,132,255,.14);
  --blue: #0a84ff; --green: #30d158; --orange: #ff9f0a; --red: #ff453a; --yellow: #ffd60a; --purple: #bf5af2; --pink: #ff375f; --teal: #64d2ff; --indigo: #5e5ce6; --mint: #66d4cf; --brown: #ac8e68; --gray: #8e8e93;
  --l2: rgba(235,235,245,.62); --l3: rgba(235,235,245,.32); --fill: rgba(120,120,128,.36); --fill2: rgba(120,120,128,.24); --fill3: rgba(118,118,128,.18); --fill4: rgba(116,116,128,.12);
  --sep: rgba(84,84,88,.6); --glass: rgba(44,44,46,.62); --glass-stroke: rgba(255,255,255,.1);
  --ease: cubic-bezier(.32,.72,0,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --font: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Aptos, sans-serif; --mono: "SF Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--cp-text); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.sym { display: inline-block; flex: none; vertical-align: middle; }
.plate { display: inline-grid; place-items: center; flex: none; border-radius: 22%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.plate img { width: 72%; height: 72%; object-fit: contain; display: block; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- app chrome ---------- */
.app { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(120% 90% at 50% -10%, #17171c 0%, #050506 55%, #000 100%); }
.top { display: flex; align-items: center; gap: 18px; padding: 14px 22px 10px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(140deg, #0a84ff, #5e5ce6 55%, #bf5af2); box-shadow: 0 6px 18px rgba(94,92,230,.35), inset 0 0 0 .5px rgba(255,255,255,.3); }
.brand b { font-size: 17px; letter-spacing: -.02em; display: block; }
.brand small { display: block; font-size: 12px; color: var(--l2); margin-top: 1px; }
.seg { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--fill3); gap: 2px; }
.seg button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--l2); transition: background .25s, color .25s; }
.seg button.on { background: #636366; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25), inset 0 .5px 0 rgba(255,255,255,.15); }
.seg button:disabled { opacity: .45; cursor: default; }
.top .spacer { flex: 1; }
.rail { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: var(--fill4); box-shadow: inset 0 0 0 .5px var(--glass-stroke); }
.rail button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--l2); white-space: nowrap; transition: background .2s, color .2s; }
.rail button .n { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--fill2); color: var(--l2); }
.rail button.done { color: var(--cp-text-soft); }
.rail button.done .n { background: rgba(48,209,88,.22); color: var(--green); }
.rail button.on { background: var(--cp-accent); color: #fff; }
.rail button.on .n { background: rgba(255,255,255,.25); color: #fff; }
.rail .dots { display: inline-flex; gap: 5px; padding: 0 6px 0 2px; }
.rail .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fill); cursor: pointer; transition: all .25s; }
.rail .dots i.on { background: var(--purple); width: 18px; border-radius: 4px; }
.rail .dots i.done { background: rgba(191,90,242,.55); }
.navb { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fill3); color: #fff; transition: background .2s; }
.navb:hover { background: var(--fill); }
.navb.prom { background: var(--cp-accent); }

.stagewrap { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 26px; padding: 6px 26px 0; min-height: 0; }
.lbl { position: absolute; top: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--l3); }
.col { position: relative; min-height: 0; display: flex; flex-direction: column; }
.col > .lbl { position: static; margin: 0 0 8px 4px; display: flex; justify-content: space-between; }
.phonebox { flex: 1; min-height: 0; position: relative; }
.screenbox { flex: 1; min-height: 0; position: relative; }
.scaled { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.note { display: flex; align-items: center; gap: 16px; padding: 12px 26px 14px; min-height: 64px; }
.note .what { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--cp-text-soft); }
.note .what b { color: #fff; font-weight: 600; }
.note .tech { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 52%; }
.note .tech > span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: 14px; background: var(--fill4); box-shadow: inset 0 0 0 .5px var(--glass-stroke); font-size: 12px; font-weight: 600; color: var(--cp-text-soft); white-space: nowrap; }
.note .kbd { font-size: 11.5px; color: var(--l3); white-space: nowrap; }
.note .kbd kbd { font: 600 11px var(--font); padding: 2px 6px; border-radius: 5px; background: var(--fill3); color: var(--l2); }

/* ---------- iPhone ---------- */
.iphone { width: 410px; height: 864px; border-radius: 68px; padding: 10px; background: linear-gradient(140deg, #4b4b50, #1e1e21 22%, #3b3b40 60%, #18181b); box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.12); position: relative; }
.iphone::before { content: ""; position: absolute; inset: 3px; border-radius: 65px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.6); pointer-events: none; }
.scr { position: relative; width: 390px; height: 844px; border-radius: 58px; overflow: hidden; background: #000; isolation: isolate; }
.island { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 124px; height: 36px; border-radius: 20px; background: #000; z-index: 50; }
.status { position: absolute; left: 0; right: 0; top: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 46px; font-size: 16px; font-weight: 600; z-index: 40; pointer-events: none; }
.status .ic { display: flex; align-items: center; gap: 6px; }
.homebar { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 136px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.75); z-index: 60; }
.pv { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 54px; }
.pv-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 10px; }
.pv-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pv-brand .bm { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: var(--fill3); color: var(--cp-text-soft); white-space: nowrap; }
.pv-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 16px 16px; scrollbar-width: none; }
.pv-body::-webkit-scrollbar { display: none; }
.pv-foot { padding: 10px 16px 30px; background: linear-gradient(transparent, rgba(0,0,0,.9) 30%); }
.h1 { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.08; margin: 4px 0 6px; }
.sub { font-size: 15px; color: var(--l2); line-height: 1.38; margin: 0 0 14px; }
.sec { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--l2); margin: 16px 2px 8px; display: flex; align-items: center; justify-content: space-between; }
.sec em { font-style: normal; color: var(--cp-text-soft); font-weight: 500; }
.btn { width: 100%; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 600; background: var(--cp-accent); color: #fff; transition: transform .15s, filter .2s; }
.btn:active { transform: scale(.98); }
.btn.gray { background: var(--fill2); }
.btn.green { background: var(--green); color: #00210b; }
.btn:disabled { opacity: .4; }
.card { border-radius: 16px; background: var(--cp-surface); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.06); }
.viewer { position: relative; height: 252px; border-radius: 22px; overflow: hidden; background: #111; margin: 0 -4px; }
.viewer canvas { width: 100%; height: 100%; display: block; }
.viewer .vtabs { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: center; }
.viewer .vtabs .seg { background: rgba(30,30,32,.7); backdrop-filter: blur(16px); }
.viewer .vtabs .seg button { height: 26px; padding: 0 10px; font-size: 12px; }
.viewer .hint { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.75); padding: 4px 9px; border-radius: 10px; background: rgba(0,0,0,.35); backdrop-filter: blur(10px); }
.viewer.light .hint { color: #1c1c1e; background: rgba(255,255,255,.6); }
.opt-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.opt-seg button, .opt-card { border-radius: 12px; background: var(--cp-surface); padding: 9px 6px; text-align: center; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s, background .2s; }
.opt-seg button b { display: block; font-size: 14px; font-weight: 600; }
.opt-seg button small { display: block; font-size: 11px; color: var(--l2); margin-top: 2px; white-space: nowrap; }
.opt-seg button.on, .opt-card.on { box-shadow: inset 0 0 0 2px var(--cp-accent); background: rgba(10,132,255,.12); }
.opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt-card { display: flex; align-items: center; gap: 10px; padding: 10px; text-align: left; }
.opt-card .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--fill3); color: var(--cp-text-soft); }
.opt-card b { display: block; font-size: 14px; }
.opt-card small { display: block; font-size: 11.5px; color: var(--l2); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatches button { width: 40px; height: 40px; border-radius: 50%; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform .2s var(--spring); }
.swatches button::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px transparent; transition: box-shadow .2s; }
.swatches button.on::after { box-shadow: 0 0 0 2.5px var(--cp-accent); }
.swatches button.on { transform: scale(.88); }
.toggles { border-radius: 14px; background: var(--cp-surface); overflow: hidden; }
.tg { display: flex; align-items: center; gap: 11px; padding: 10px 12px; }
.tg + .tg { box-shadow: inset 0 .5px 0 var(--sep); }
.tg .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--fill3); color: var(--cp-text-soft); }
.tg span { flex: 1; min-width: 0; }
.tg b { display: block; font-size: 15px; font-weight: 500; }
.tg small { display: block; font-size: 12px; color: var(--l2); }
.tg em { font-style: normal; font-size: 12.5px; color: var(--l2); margin-right: 4px; white-space: nowrap; }
.switch { width: 51px; height: 31px; border-radius: 16px; background: var(--fill); position: relative; flex: none; transition: background .25s; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25); transition: transform .3s var(--spring); }
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(20px); }
.pricebar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 18px; background: rgba(44,44,46,.82); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .5px var(--glass-stroke); margin-bottom: 10px; }
.pricebar .p { flex: 1; min-width: 0; }
.pricebar b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.pricebar small { display: block; font-size: 11.5px; color: var(--l2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pricebar .btn { width: auto; height: 42px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.flash { animation: flash .6s var(--ease); }
@keyframes flash { 0% { color: var(--yellow); transform: scale(1.06); } 100% { color: inherit; transform: none; } }

/* chat */
.chat { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.msg { max-width: 86%; padding: 9px 13px; border-radius: 19px; font-size: 15.5px; line-height: 1.35; animation: msgIn .35s var(--ease) both; }
.msg.me { align-self: flex-end; background: var(--cp-accent); color: #fff; border-bottom-right-radius: 6px; }
.msg.ai { align-self: flex-start; background: #262628; border-bottom-left-radius: 6px; }
.msg.sys { align-self: center; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--l2); background: var(--fill4); }
.msg.sys.ok { color: var(--green); background: rgba(48,209,88,.12); }
.msg .who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--l2); margin-bottom: 3px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 19px; background: #262628; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--l2); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.acard { margin-top: 8px; border-radius: 12px; background: rgba(255,255,255,.06); padding: 10px 11px; }
.acard .bar { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12.5px; margin-bottom: 6px; }
.acard .bar i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--fill2); overflow: hidden; }
.acard .bar i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--tint, var(--blue)); border-radius: 3px; }
.acard table { width: 100%; border-collapse: collapse; font-size: 13px; }
.acard td { padding: 4px 0; } .acard td + td { text-align: right; font-weight: 600; }
.acard .big { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.acard .small { font-size: 12.5px; color: var(--l2); }
.srcs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.srcs span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--l2); padding: 3px 7px; border-radius: 8px; background: rgba(255,255,255,.06); }
.act { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; background: rgba(10,132,255,.2); color: var(--cp-link); font-size: 13.5px; font-weight: 600; }
.act.done { background: rgba(48,209,88,.16); color: var(--green); }
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 18px; background: var(--cp-surface); box-shadow: inset 0 0 0 .5px var(--glass-stroke); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s, transform .15s; }
.chip:active { transform: scale(.96); }
.chip.used { opacity: .45; }
.chipgrid { display: flex; flex-wrap: wrap; gap: 7px; }
.chipgrid .chip { height: auto; min-height: 36px; padding: 7px 12px; white-space: normal; text-align: left; line-height: 1.2; }
.inputbar { display: flex; align-items: center; gap: 8px; }
.inputbar .in { flex: 1; height: 38px; border-radius: 19px; background: var(--cp-surface); box-shadow: inset 0 0 0 .5px var(--glass-stroke); display: flex; align-items: center; padding: 0 14px; font-size: 15px; color: var(--l3); }
.inputbar .in input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: inherit; }
.inputbar .rb { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--fill3); }
.inputbar .rb.send { background: var(--cp-accent); }

/* deal */
.nego { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--cp-surface); margin-bottom: 10px; }
.nego .face { width: 52px; height: 52px; flex: none; }
.nego .who b { display: block; font-size: 16px; } .nego .who small { font-size: 12px; color: var(--l2); }
.nego .mood { margin-left: auto; text-align: center; }
.nego .mood .e { font-size: 30px; line-height: 1; display: block; transition: transform .3s var(--spring); }
.nego .mood small { font-size: 10.5px; font-weight: 600; color: var(--l2); letter-spacing: .02em; }
.track { padding: 12px 14px 10px; border-radius: 16px; background: var(--cp-surface); margin-bottom: 10px; }
.track .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--l2); }
.track .row b { font-size: 21px; color: #fff; letter-spacing: -.02em; }
.track .row b.save { color: var(--green); font-size: 15px; }
.track .meter { position: relative; height: 10px; border-radius: 5px; margin: 10px 0 6px; background: linear-gradient(90deg, rgba(48,209,88,.5), rgba(255,214,10,.45), rgba(255,69,58,.45)); }
.track .meter i { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: left .8s var(--ease); }
.track .legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--l3); }
.rounds { display: flex; gap: 5px; }
.rounds i { width: 22px; height: 5px; border-radius: 3px; background: var(--fill2); }
.rounds i.on { background: var(--orange); }
.moves { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.move { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border-radius: 13px; background: var(--cp-surface); text-align: left; font-size: 13.5px; font-weight: 600; line-height: 1.15; box-shadow: inset 0 0 0 .5px var(--glass-stroke); transition: transform .15s, opacity .2s; }
.move .em { font-size: 20px; }
.move:disabled { opacity: .35; }
.move:active { transform: scale(.97); }
.deal-ok { text-align: center; padding: 8px 0 2px; }
.deal-ok .big { font-size: 46px; animation: pop .6s var(--spring) both; display: block; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

/* contract + sign */
.paper { border-radius: 14px; background: #fbfbf8; color: #1c1c1e; padding: 16px 16px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 12.5px; }
.paper h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.paper .meta { font-size: 11px; color: #6e6e73; margin: 2px 0 10px; display: flex; justify-content: space-between; }
.paper table { width: 100%; border-collapse: collapse; }
.paper td { padding: 5px 0; vertical-align: top; border-top: 1px solid #ececec; }
.paper td:first-child { color: #6e6e73; width: 32%; padding-right: 8px; }
.paper td:last-child { font-weight: 600; }
.clause { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #f0f0ec; }
.clause b { display: block; font-size: 12px; } .clause span { font-size: 12px; color: #48484a; }
.explain { margin-top: 10px; padding: 11px 12px; border-radius: 14px; background: rgba(10,132,255,.14); font-size: 14px; line-height: 1.38; animation: msgIn .35s var(--ease) both; }
.explain .who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--cp-link); margin-bottom: 4px; }
.sigpad { position: relative; height: 170px; border-radius: 16px; background: #fbfbf8; overflow: hidden; touch-action: none; cursor: crosshair; }
.sigpad canvas { width: 100%; height: 100%; display: block; }
.sigpad .line { position: absolute; left: 22px; right: 22px; bottom: 44px; border-top: 1.5px dashed #b8b8bd; pointer-events: none; }
.sigpad .x { position: absolute; left: 22px; bottom: 50px; font-size: 22px; color: #8e8e93; pointer-events: none; }
.sigpad .ph { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 12px; color: #8e8e93; pointer-events: none; }
.sigok { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; text-align: center; }
.sigok .tick { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #00210b; animation: pop .6s var(--spring) both; }
.syslist { border-radius: 14px; background: var(--cp-surface); overflow: hidden; }
.syslist .r { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; opacity: .35; transition: opacity .3s; }
.syslist .r + .r { box-shadow: inset 0 .5px 0 var(--sep); }
.syslist .r.on { opacity: 1; }
.syslist .r small { margin-left: auto; font-size: 12px; color: var(--green); font-weight: 600; }

/* lock / join / look-up */
.lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 110px; background: radial-gradient(90% 70% at 50% 30%, #1c2a4a, #07080d 70%); }
.lock .time { font-size: 92px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.lock .date { font-size: 18px; font-weight: 500; color: var(--cp-text-soft); margin-bottom: 70px; }
.lock .cam { width: 230px; height: 230px; border-radius: 26px; position: relative; display: grid; place-items: center; }
.lock .cam::before, .lock .cam::after { content: ""; position: absolute; inset: 0; border-radius: 26px; border: 4px solid #ffd60a; clip-path: polygon(0 0, 30% 0, 30% 4px, 4px 4px, 4px 30%, 0 30%, 0 70%, 4px 70%, 4px calc(100% - 4px), 30% calc(100% - 4px), 30% 100%, 70% 100%, 70% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 70%, 100% 70%, 100% 30%, calc(100% - 4px) 30%, calc(100% - 4px) 4px, 70% 4px, 70% 0, 0 0); }
.lock .cam img { width: 150px; height: 150px; border-radius: 10px; background: #fff; padding: 8px; }
.lock .toast { margin-top: 26px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(60,60,64,.75); backdrop-filter: blur(20px); font-size: 14px; animation: msgIn .6s var(--ease) 1s both; }
.join-hero { height: 200px; border-radius: 22px; margin: 0 -4px 16px; overflow: hidden; position: relative; }
.join-hero canvas { width: 100%; height: 100%; display: block; }
.field { height: 46px; border-radius: 12px; background: var(--cp-surface); display: flex; align-items: center; padding: 0 14px; font-size: 16px; }
.field.ph { color: var(--l3); }
.lookup { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 40px; }
.lookup .eyes { font-size: 64px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 14px; }
.kv + .kv { box-shadow: inset 0 .5px 0 var(--sep); }
.kv span { color: var(--l2); } .kv b { font-weight: 600; text-align: right; }
.takehome .chip { width: 100%; height: auto; padding: 10px 12px; white-space: normal; line-height: 1.3; }
.demo { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 17px; background: rgba(191,90,242,.18); color: #e0a8ff; font-size: 13px; font-weight: 700; }
.demo:hover { background: rgba(191,90,242,.28); }
.top { display: grid; grid-template-columns: auto auto 1fr auto 1fr auto auto; }
.pack { white-space: pre-wrap; }
@media (max-width: 1480px) { .brand small { display: none; } .rail button { padding: 0 8px; } }