:root {
  --bg: #E7E1D7;
  --stage: #F5F2EC;
  --panel: #FFFFFF;
  --ink: #1D282D;
  --ink2: #3F4C52;
  --muted: #7A868C;
  --line: #E4DDD2;
  --line2: #EFEAE2;
  --sage: #2E7A64;
  --sage2: #E2EFE9;
  --sage3: #B9D8CA;
  --amber: #B06D12;
  --amber2: #FBEFD9;
  --amber3: #EFCF95;
  --red: #BD4A38;
  --red2: #F8E3DE;
  --blue: #3563A6;
  --blue2: #E3EBF7;
  --rosa: #B4644A;
  --lucia: #3563A6;
  --maria: #9A4D6E;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
b { font-weight: 600; }

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1600px; height: 900px;
  transform: translate(-50%, -50%);
  background: var(--stage);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(40, 35, 25, .18);
}

/* ---------- icons ---------- */
.ic { display: inline-flex; width: 1em; height: 1em; flex: none; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- top bar ---------- */
#top { height: 78px; flex: none; display: flex; align-items: center; gap: 30px; padding: 0 30px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; width: 228px; flex: none; }
.mark { width: 28px; height: 28px; border-radius: 50%; position: relative; background: var(--sage2); }
.mark::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--sage); }
.mark::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--sage3); animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0; } }
.wm { font-family: var(--serif); font-size: 27px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.brand small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.narr { flex: 1; min-width: 0; }
.narr h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 25px; letter-spacing: -.01em; }
.narr p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink2); max-width: 980px; }
.clock { text-align: right; flex: none; }
.clock span { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.clock b { font-family: var(--serif); font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- main grid ---------- */
#main { flex: 1; min-height: 0; display: grid; grid-template-columns: 452px 300px 1fr 300px; gap: 18px; padding: 14px 22px 12px; }
.col { display: flex; flex-direction: column; gap: 8px; min-height: 0; transition: opacity .6s ease, filter .6s ease; }
.col.dim { opacity: .36; filter: saturate(.25); }
.col-label { height: 20px; flex: none; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.col-label i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.col-label em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; }
.col.focus .col-label { color: var(--ink); }

.frame { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(30,40,45,.04), 0 8px 24px rgba(30,40,45,.05); transition: box-shadow .5s; }
.col.focus .frame, .col.focus .phone, .col.focus .tv { box-shadow: 0 0 0 3px var(--sage3), 0 18px 40px rgba(30,40,45,.14); }

/* ---------- generic UI ---------- */
.in { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade { animation: fade .6s ease both; animation-delay: var(--d, 0s); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 99px; align-self: flex-start; white-space: nowrap; }
.tag.sage { background: var(--sage2); color: var(--sage); }
.tag.amber { background: var(--amber2); color: var(--amber); }
.tag.blue { background: var(--blue2); color: var(--blue); }
.tag.red { background: var(--red2); color: var(--red); }
.tag.grey { background: #EEEDEA; color: var(--muted); }
.live { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.h2 { font-family: var(--serif); font-size: 21px; line-height: 1.2; font-weight: 500; margin: 0; letter-spacing: -.01em; }
.h3 { font-family: var(--serif); font-size: 17px; line-height: 1.25; font-weight: 500; margin: 0; }
.p { font-size: 12.5px; line-height: 1.45; color: var(--ink2); margin: 0; }
.p.small, .small { font-size: 11px; color: var(--muted); line-height: 1.4; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 0 12px; cursor: default; flex: none; white-space: nowrap; }
.btn.primary { background: var(--sage); border-color: var(--sage); color: #fff; }
.btn.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btnrow { display: flex; gap: 8px; }
.btnrow .btn { flex: 1; }
.cta { cursor: pointer; animation: cta 1.8s ease-in-out infinite; }
.cta.primary, .cta.btn:not(.primary):not(.blue) { --c: 46,122,100; }
.cta.blue { --c: 53,99,166; }
@keyframes cta { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--c, 46,122,100), .55); } 60% { box-shadow: 0 0 0 8px rgba(var(--c, 46,122,100), 0); } }
.av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; flex: none; }
.av.lg { width: 44px; height: 44px; font-size: 15px; }
.sec-t { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }

/* ---------- home card ---------- */
.home-card { flex: 1; min-height: 0; padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.plan { width: 100%; height: auto; display: block; flex: none; }
.plan .room { fill: #FBF9F5; stroke: #D8CFC1; stroke-width: 1.5; }
.plan .furn { fill: #EEE8DE; }
.plan .furn2 { fill: #E3DBCF; }
.plan .tvbar { fill: #33444C; }
.plan .rl { font-size: 8.5px; fill: #9CA4A8; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; font-family: var(--sans); }
.plan .door { stroke: #FBF9F5; stroke-width: 4; }
.sensor .dot { fill: #BCC3C6; transition: fill .4s; }
.sensor .halo { fill: none; stroke: transparent; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.sensor.on .dot { fill: var(--sage); }
.sensor.on .halo { stroke: var(--sage); animation: halo 2.6s ease-out infinite; }
.sensor.flag .dot { fill: #D08A22; }
.sensor.flag .halo { stroke: #D08A22; stroke-width: 2; animation: halo 1.3s ease-out infinite; }
.sensor.evt .dot { fill: var(--blue); }
.sensor.evt .halo { stroke: var(--blue); stroke-width: 2; animation: halo 1.1s ease-out infinite; }
.sensor text { font-size: 8px; fill: var(--muted); font-weight: 600; text-anchor: middle; font-family: var(--sans); }
@keyframes halo { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.person { transition: transform 1.5s cubic-bezier(.45,0,.2,1), opacity .7s; }
.person circle { stroke: #fff; stroke-width: 2.5; }
.person.rosa circle { fill: var(--rosa); }
.person.lucia circle { fill: var(--lucia); }
.person text { fill: #fff; font-size: 10px; font-weight: 700; text-anchor: middle; font-family: var(--sans); }
.legend { display: flex; gap: 12px; font-size: 10.5px; color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.legend .priv { margin-left: auto; color: var(--sage); font-weight: 600; }

.sigs { display: flex; flex-direction: column; }
.sig-head, .sig { display: grid; grid-template-columns: 74px 1fr 84px 80px; align-items: center; gap: 8px; }
.sig-head { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; padding: 0 2px 4px; }
.sig { height: 29px; border-top: 1px solid var(--line2); font-size: 12.5px; padding: 0 2px; }
.sig .n { font-weight: 600; }
.sig .t { transition: color .4s; }
.sig.warn .t { color: var(--amber); font-weight: 600; }
.sig .u { color: var(--muted); font-size: 11.5px; }
.chip { justify-self: end; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; transition: background .4s, color .4s; white-space: nowrap; }
.chip.ok { background: var(--sage2); color: var(--sage); }
.chip.warn { background: var(--amber2); color: var(--amber); }
.chip.info { background: var(--blue2); color: var(--blue); }
.chip.idle { background: #F1EEE8; color: var(--muted); }

.esc { border-top: 1px solid var(--line2); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.esc-top { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; }
.esc-top b { font-weight: 600; }
.agree { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); }
.agree i { width: 9px; height: 9px; border-radius: 50%; background: #E4DFD6; transition: background .4s; }
.agree i.on { background: #D08A22; }
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.rung { height: 30px; border-radius: 8px; background: #F2EFE9; font-size: 10.5px; font-weight: 600; color: #A7AEB1; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all .5s; }
.rung em { font-style: normal; font-size: 9.5px; opacity: .8; }
.rung.past { background: #ECE8E0; color: var(--ink2); }
.rung.on { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.rung.on.l1 { background: var(--sage); }
.rung.on.l2 { background: #3F8C8A; }
.rung.on.l3 { background: #C98322; }
.rung.on.l4 { background: var(--blue); }
.rung.l5 { border: 1px dashed #E3BDB5; background: #FBF4F2; color: #D39A8F; }
.esc-note { font-size: 10.5px; color: var(--muted); display: none; }

/* ---------- TV ---------- */
.tv { height: 234px; flex: none; background: #0C1317; border-radius: 14px; padding: 8px; position: relative; margin-bottom: 6px; }
.tv::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 110px; height: 6px; margin-left: -55px; background: #0C1317; border-radius: 0 0 8px 8px; }
.tv-screen { height: 100%; border-radius: 8px; background: radial-gradient(130% 100% at 20% 0%, #24424D 0%, #122630 55%, #0E1D25 100%); color: #F3EEE6; overflow: hidden; position: relative; }
.tvs { position: absolute; inset: 0; padding: 18px 22px 14px; display: flex; flex-direction: column; }
.tvs.dim { filter: brightness(.55); }
.tv-time { font-family: var(--serif); font-size: 54px; font-weight: 400; line-height: 1; letter-spacing: -.02em; }
.tv-date { font-size: 14px; color: #B9C7CB; margin-top: 6px; }
.tv-today { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 15px; background: rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; }
.tv-today span { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9FC4B6; }
.tvs h2 { font-family: var(--serif); font-weight: 400; font-size: 29px; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
.tvs p { font-size: 15.5px; color: #C8D4D7; margin: 8px 0 0; line-height: 1.4; }
.tv-kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9FC4B6; margin-bottom: 10px; }
.tv-kicker .wave { display: inline-flex; gap: 2px; align-items: center; height: 12px; }
.tv-kicker .wave i { width: 2px; background: #9FC4B6; border-radius: 2px; animation: wave 1s ease-in-out infinite; }
.tv-kicker .wave i:nth-child(2) { animation-delay: .15s; } .tv-kicker .wave i:nth-child(3) { animation-delay: .3s; } .tv-kicker .wave i:nth-child(4) { animation-delay: .45s; }
@keyframes wave { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.tvbtns { display: flex; gap: 12px; margin-top: auto; }
.tvbtn { flex: 1; height: 50px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.2); color: #fff; font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tvbtn.cta { background: #F3EEE6; color: #10202A; border-color: #F3EEE6; --c: 243,238,230; }
.tvfoot { font-size: 11px; color: #8FA3A9; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.tvfoot .on { display: flex; align-items: center; gap: 6px; }
.tvfoot .on i { width: 6px; height: 6px; border-radius: 50%; background: #6FC2A2; }
.tvfoot .pz { display: flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: 3px 9px; }
.tv-visitor { display: flex; gap: 14px; align-items: center; margin-top: auto; background: rgba(255,255,255,.07); border-radius: 14px; padding: 10px 12px; }
.tv-visitor .av { width: 50px; height: 50px; font-size: 17px; border: 2px solid rgba(255,255,255,.5); }
.tv-visitor b { font-size: 16px; display: block; }
.tv-visitor span { font-size: 13px; color: #B9C7CB; }

/* ---------- phones ---------- */
.phone { width: 292px; flex: 1; min-height: 0; margin: 0 auto; background: #151B1E; border-radius: 42px; padding: 9px; box-shadow: 0 12px 30px rgba(30,40,45,.14); transition: box-shadow .5s; }
.phone-screen { width: 100%; height: 100%; background: #FAF8F4; border-radius: 34px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.sbar { height: 38px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 22px 0 28px; font-size: 12.5px; font-weight: 600; }
.island { width: 84px; height: 24px; background: #151B1E; border-radius: 14px; }
.sb-r { display: flex; gap: 4px; align-items: center; }
.bars { display: flex; gap: 1.5px; align-items: flex-end; height: 10px; }
.bars i { width: 3px; background: var(--ink); border-radius: 1px; }
.bars i:nth-child(1) { height: 4px; } .bars i:nth-child(2) { height: 6px; } .bars i:nth-child(3) { height: 8px; } .bars i:nth-child(4) { height: 10px; }
.batt { width: 20px; height: 10px; border: 1.5px solid var(--ink); border-radius: 3px; padding: 1px; }
.batt i { display: block; height: 100%; width: 75%; background: var(--ink); border-radius: 1px; }
.app { flex: 1; min-height: 0; overflow: hidden; padding: 6px 15px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.apphead { display: flex; align-items: center; gap: 10px; }
.ah-t { flex: 1; min-width: 0; }
.ah-t b { display: block; font-size: 15px; }
.ah-t span { font-size: 11.5px; color: var(--muted); }
.ah-i { width: 32px; height: 32px; border-radius: 50%; background: #F0ECE5; display: flex; align-items: center; justify-content: center; color: var(--ink2); font-size: 15px; }
.back { display: flex; align-items: center; gap: 2px; font-size: 13px; color: var(--sage); font-weight: 600; margin-left: -4px; }

.status { border-radius: 18px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; }
.status.calm { background: linear-gradient(160deg, #E5F1EC, #D8EAE2); }
.status h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 22px; color: #1F5A48; }
.status p { margin: 4px 0 0; font-size: 12px; color: #3C6557; line-height: 1.4; }
.pulse { width: 16px; height: 16px; border-radius: 50%; background: var(--sage); flex: none; margin-top: 6px; position: relative; }
.pulse::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--sage); animation: breathe 3s ease-in-out infinite; }
.tl { display: flex; flex-direction: column; }
.tl div { display: grid; grid-template-columns: 62px 1fr; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--line2); }
.tl div span { color: var(--muted); font-variant-numeric: tabular-nums; }
.rowcard { display: flex; align-items: center; gap: 10px; }
.rowcard b { display: block; font-size: 13px; }
.rowcard span { font-size: 11.5px; color: var(--muted); }
.circle { display: flex; gap: 14px; }
.circle div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: var(--ink2); }

.banner { position: absolute; top: 44px; left: 10px; right: 10px; z-index: 5; background: rgba(255,255,255,.96); border-radius: 18px; padding: 11px 12px; box-shadow: 0 10px 30px rgba(20,30,35,.22); display: flex; gap: 10px; animation: drop .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drop { from { transform: translateY(-120%); opacity: 0; } to { transform: none; opacity: 1; } }
.bn-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--sage); color: #fff; font-family: var(--serif); font-size: 17px; display: flex; align-items: center; justify-content: center; flex: none; }
.banner .bn-h { display: flex; justify-content: space-between; font-size: 11.5px; }
.banner .bn-h span { color: var(--muted); }
.banner p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.35; }

.quote { background: var(--amber2); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; color: #6B4A15; border-left: 3px solid #D9A04A; }
.cmp { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cmp div { display: grid; grid-template-columns: 62px .9fr 1.4fr; font-size: 12px; padding: 7px 10px; border-top: 1px solid var(--line2); }
.cmp div:first-child { border-top: none; background: #F7F4EF; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cmp .u { color: var(--muted); }
.cmp .t { color: var(--amber); font-weight: 600; }

.prog { display: flex; flex-direction: column; gap: 0; }
.pr { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 8px 0; font-size: 12.5px; line-height: 1.35; position: relative; }
.pr .d { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; background: #EEEAE3; color: var(--muted); }
.pr.done .d { background: var(--sage); color: #fff; }
.pr.fail .d { background: var(--red2); color: var(--red); }
.pr.act .d { background: var(--blue2); color: var(--blue); }
.pr.act .d::after { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--blue); border-top-color: transparent; animation: spin .8s linear infinite; }
.pr.wait { color: var(--muted); }
.pr small { display: block; color: var(--muted); font-size: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }

.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.badges span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink2); background: #F4F1EC; padding: 6px 8px; border-radius: 9px; line-height: 1.2; }
.badges .ic { color: var(--sage); }
.eta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; background: var(--blue2); color: var(--blue); border-radius: 12px; padding: 9px 12px; font-weight: 600; }

.tasks { display: flex; flex-direction: column; }
.task { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 7px 0; border-top: 1px solid var(--line2); transition: color .4s; }
.task:first-child { border-top: none; }
.task .cb { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #CFC7BA; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; transition: all .35s; }
.task.done .cb { background: var(--sage); border-color: var(--sage); }
.task.done .tx { color: var(--muted); text-decoration: line-through; text-decoration-color: #B9C1C4; }
.task .tm { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.note { background: #FFFDF8; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink2); }
.note .who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11.5px; color: var(--muted); }
.note .who .av { width: 22px; height: 22px; font-size: 9px; }

/* bottom sheet */
.scrim { position: absolute; inset: 0; background: rgba(20,28,32,.35); z-index: 4; animation: fade .4s both; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: #fff; border-radius: 24px 24px 0 0; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 9px; animation: up .55s cubic-bezier(.2,.8,.2,1) both; }
.sheet .grab { width: 36px; height: 4px; border-radius: 4px; background: #DDD6CB; align-self: center; margin-bottom: 4px; }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
.conflict { display: flex; align-items: center; gap: 7px; background: var(--red2); color: var(--red); border-radius: 10px; padding: 8px 10px; font-size: 11.5px; font-weight: 600; }

/* care summary */
.cs-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cs-head > div { min-width: 0; }
.cs-head b { font-family: var(--serif); font-size: 18px; white-space: nowrap; font-weight: 500; display: block; }
.cs-head span { font-size: 11.5px; color: var(--muted); }
.cs { display: flex; flex-direction: column; gap: 7px; }
.cs-item { display: grid; grid-template-columns: 74px 1fr; gap: 8px; font-size: 11.8px; line-height: 1.4; padding-bottom: 7px; border-bottom: 1px solid var(--line2); }
.cs-item:last-child { border-bottom: none; padding-bottom: 0; }
.cs-item > span:first-child { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.why { background: var(--amber2); border-radius: 12px; padding: 9px 11px; font-size: 12px; line-height: 1.4; color: #6B4A15; }
.why b { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.hidden-note { display: flex; gap: 7px; align-items: flex-start; font-size: 10.8px; color: var(--muted); line-height: 1.35; background: #F4F1EC; border-radius: 10px; padding: 8px 10px; }
.hidden-note .ic { margin-top: 1px; }
.lock { display: flex; align-items: center; gap: 8px; font-size: 12px; background: #F4F1EC; border-radius: 12px; padding: 9px 11px; color: var(--ink2); }
.lock b { display: block; }
.lock span { color: var(--muted); font-size: 11px; }
.lock .ic { font-size: 17px; color: var(--blue); }
.lock.exp .ic { color: var(--muted); }

.nfc { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.nfc-t { width: 130px; height: 130px; border-radius: 50%; background: var(--blue2); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 46px; position: relative; }
.nfc-t::before, .nfc-t::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue); animation: ring 1.8s ease-out infinite; }
.nfc-t::after { animation-delay: .9s; }
@keyframes ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }
.nfc p { margin: 0; font-size: 13px; color: var(--ink2); max-width: 200px; line-height: 1.45; }
.checked { display: flex; align-items: center; gap: 10px; background: var(--sage2); border-radius: 14px; padding: 11px 12px; color: #1F5A48; }
.checked .ok { width: 30px; height: 30px; border-radius: 50%; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; animation: popin .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes popin { from { transform: scale(0); } to { transform: scale(1); } }
.checked b { display: block; font-size: 13.5px; }
.checked span { font-size: 11px; opacity: .8; }

/* ---------- agency ---------- */
.browser { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.browser-bar { height: 34px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #FAF8F4; }
.browser-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #DDD5C9; }
.url { margin-left: 10px; flex: 1; height: 21px; border-radius: 6px; background: #F0ECE5; font-size: 10.5px; color: var(--muted); display: flex; align-items: center; padding: 0 9px; }
.browser-body { flex: 1; min-height: 0; overflow: hidden; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ag-head { display: flex; justify-content: space-between; align-items: flex-end; }
.ag-head b { font-family: var(--serif); font-size: 19px; font-weight: 500; display: block; }
.ag-head small { font-size: 11px; color: var(--muted); }
.tabs { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.tabs span { padding-bottom: 4px; }
.tabs .on { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--sage); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpi { border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px; transition: background .5s, border-color .5s; }
.kpi span { font-size: 10.5px; color: var(--muted); display: block; white-space: nowrap; }
.kpi b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; transition: color .4s; }
.kpi.bad { background: #FDF3F1; border-color: #F0C9C1; }
.kpi.bad b { color: var(--red); }
.kpi.good b { color: var(--sage); }
.sched { display: flex; flex-direction: column; }
.srow { display: grid; grid-template-columns: 58px 1fr 1fr 124px; gap: 8px; align-items: center; font-size: 12px; padding: 6px 8px; border-top: 1px solid var(--line2); border-radius: 8px; transition: background .5s; }
.srow.h { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); border-top: none; padding-bottom: 4px; }
.srow.hl { background: #FFF7EA; border-top-color: transparent; }
.srow.hl.okhl { background: #F0F7F3; }
.srow .tm { font-variant-numeric: tabular-nums; color: var(--ink2); }
.srow .tm s { color: var(--muted); font-size: 10.5px; display: block; }
.srow .who b { display: block; font-weight: 600; }
.srow .who span { font-size: 10.5px; color: var(--muted); }
.srow .chip { justify-self: start; }
.chip.bad { background: var(--red2); color: var(--red); }
.alerts { display: flex; flex-direction: column; gap: 6px; }
.al { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.4; padding: 9px 11px; border-radius: 11px; background: #F6F3EE; color: var(--ink2); }
.al.warn { background: var(--amber2); color: #6B4A15; }
.al.ok { background: var(--sage2); color: #1F5A48; }
.al .ic { font-size: 15px; margin-top: 1px; }
.al b { color: inherit; }

.gap { display: flex; flex-direction: column; gap: 6px; background: #FDF3F1; border: 1px solid #F0C9C1; border-radius: 12px; padding: 10px 12px; }
.gap-t { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.gap-t b { color: var(--red); }
.gap p { margin: 0; font-size: 11.5px; color: #7A4035; }
.needs { display: flex; flex-wrap: wrap; gap: 5px; }
.needs span { font-size: 10.5px; font-weight: 600; background: #fff; border: 1px solid #F0C9C1; color: #8E3F31; padding: 2px 7px; border-radius: 6px; }
.funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.fs { border-radius: 10px; padding: 7px 8px; background: #F4F1EB; transition: all .4s; opacity: .35; position: relative; }
.fs.on { opacity: 1; background: var(--blue2); }
.fs b { display: block; font-size: 19px; color: var(--blue); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fs span { font-size: 10px; color: var(--ink2); line-height: 1.25; display: block; margin-top: 2px; }
.cands { display: flex; flex-direction: column; gap: 7px; }
.cand { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cand.top { border-color: var(--sage3); background: #F5FAF7; }
.cand .nm { font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.cand .nm span { font-size: 11px; color: var(--muted); font-weight: 500; }
.mini { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.m { font-size: 10.5px; padding: 2px 6px; border-radius: 6px; background: #F1EEE8; color: var(--ink2); white-space: nowrap; }
.m.y { background: var(--sage2); color: var(--sage); }
.m.n { background: var(--red2); color: var(--red); }
.cand .right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.score { font-size: 11px; color: var(--muted); }
.score b { font-size: 18px; color: var(--sage); font-variant-numeric: tabular-nums; }
.cand .btn { height: 30px; font-size: 12px; flex: none; padding: 0 12px; border-radius: 9px; }
.rules { font-size: 10.5px; color: var(--muted); }
.covered { display: flex; align-items: center; gap: 12px; background: var(--sage2); border-radius: 12px; padding: 11px 13px; color: #1F5A48; }
.covered .ok { width: 32px; height: 32px; border-radius: 50%; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.covered b { display: block; font-size: 14px; }
.covered span { font-size: 11.5px; }
.fan { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fan div { display: flex; align-items: center; gap: 7px; font-size: 11.5px; background: #F6F3EE; padding: 7px 9px; border-radius: 9px; color: var(--ink2); line-height: 1.3; }
.fan .ic { color: var(--sage); font-size: 13px; }
.record { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.record .ic { font-size: 20px; color: var(--ink2); }
.record div { flex: 1; font-size: 12px; }
.record b { display: block; font-size: 13px; }
.record span { color: var(--muted); font-size: 11px; }
.record .btn { flex: none; height: 32px; font-size: 12px; }

/* ---------- bottom ---------- */
#bottom { height: 54px; flex: none; display: flex; align-items: center; gap: 18px; padding: 0 22px; border-top: 1px solid var(--line); }
.steps { display: flex; gap: 4px; flex: 1; }
.st { flex: 1; font-size: 10.5px; font-weight: 600; color: #A6ADB0; padding-top: 7px; border-top: 3px solid #E0D9CE; cursor: pointer; transition: all .3s; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font-family: inherit; }
.st.done { border-top-color: var(--sage3); color: var(--ink2); }
.st.cur { border-top-color: var(--sage); color: var(--ink); }
.ctrls { display: flex; gap: 6px; align-items: center; }
.kbtn { height: 30px; min-width: 30px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 11.5px; cursor: pointer; padding: 0 9px; color: var(--ink2); font-weight: 600; font-family: inherit; display: flex; align-items: center; gap: 5px; }
.kbtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.kbtn kbd { font-family: inherit; font-size: 10px; opacity: .6; }

/* ---------- overlays ---------- */
#overlay { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; transition: opacity .7s ease; display: flex; align-items: center; justify-content: center; background: rgba(245, 242, 236, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#overlay.show { opacity: 1; pointer-events: auto; }
.title-card { text-align: center; max-width: 980px; display: flex; flex-direction: column; align-items: center; }
.title-card .mark { width: 64px; height: 64px; margin-bottom: 22px; }
.title-card .mark::before { inset: 19px; }
.big-wm { font-family: var(--serif); font-size: 128px; font-weight: 500; letter-spacing: -.04em; line-height: .9; }
.tagline { font-family: var(--serif); font-size: 32px; color: var(--sage); margin: 18px 0 0; font-weight: 400; font-style: italic; }
.title-card .sub { font-size: 18px; color: var(--ink2); margin: 18px 0 0; line-height: 1.5; max-width: 720px; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 38px; width: 760px; text-align: left; }
.pillar { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.pillar b { font-family: var(--serif); font-size: 20px; font-weight: 500; display: block; }
.pillar span { font-size: 14px; color: var(--ink2); line-height: 1.45; display: block; margin-top: 5px; }
.pillar i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.hint { margin-top: 36px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hint kbd { font-family: inherit; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 2px 8px; font-size: 12px; color: var(--ink2); box-shadow: 0 1px 0 var(--line); }

.close-card { text-align: center; max-width: 1180px; display: flex; flex-direction: column; align-items: center; }
.close-card .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.close-card h2 { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1.15; margin: 14px 0 0; letter-spacing: -.02em; white-space: nowrap; }
.close-card h2 em { color: var(--sage); font-style: italic; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; width: 1120px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px; text-align: left; }
.stat b { font-family: var(--serif); font-size: 48px; font-weight: 500; letter-spacing: -.02em; line-height: 1; display: block; color: var(--ink); }
.stat b small { font-size: 24px; margin-left: 2px; }
.stat span { display: block; font-size: 14px; color: var(--ink2); margin-top: 10px; line-height: 1.4; }
.loop { display: flex; align-items: center; gap: 10px; margin-top: 40px; font-size: 15px; color: var(--ink2); }
.loop span { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 8px 16px; }
.loop i { color: var(--muted); font-style: normal; }
.close-card .tagline { font-size: 26px; margin-top: 34px; }