/* FOMOBOT desk v16 — served under the legacy /desk-v12.css route (no-cache route, no restart).
   1:1 rebuild of the reference stills: 2400x1622 native artboard, every coordinate below is a
   pixel measured on the reference frames; JS scales the board to the viewport. PAPER only. */
@font-face { font-family:"FxInter"; src:url("/static/fonts/inter-var.woff?v=16") format("woff"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"FxMono"; src:url("/static/fonts/jbmono-var.woff?v=16") format("woff"); font-weight:100 800; font-display:swap; }
:root {
  --fx-page:#4e63f4; --fx-ph:#070510; --fx-green:#03be49; --fx-green-t:#3fd170; --fx-orange:#ff5a1f;
  --fx-gray:#8b8996; --fx-gray2:#6f6d7a; --fx-blue:#5560f0; --fx-pink:#f064cf;
  --fx-sans:"FxInter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fx-mono:"FxMono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}
html, body { background:var(--fx-page) !important; }
body.authed { overflow:hidden; }
body.authed.fx-stacked { overflow-y:auto; overflow-x:hidden; height:auto; }
.drawer-close { display:none; }
/* mobile shell (#app) is only a drawer / overlay host now, at every width */
body.authed:not(.drawer-open) #app { display:none !important; }
body.authed.overlay-open:not(.drawer-open) #app:not(.hidden) {
  display:block !important; position:fixed; top:0; right:0; width:0; height:0; padding:0; overflow:visible; z-index:45;
}
body.authed.overlay-open:not(.drawer-open) #app > :not(.overlay):not(.confetti-layer):not(.sell-banner) { display:none !important; }
body.authed.drawer-open #app {
  display:block !important; position:fixed; top:0; right:0; bottom:0; width:min(440px, 100vw); z-index:45; overflow-y:auto;
  background:#000; border-left:1px solid #1b2236; box-shadow:-20px 0 60px rgba(0,0,0,.6); padding-bottom:calc(var(--tab-h) + 8px);
}
body.authed.drawer-open #app .tabbar { left:auto; right:0; width:min(440px, 100vw); }
body.authed.drawer-open .drawer-close {
  display:flex; position:fixed; top:8px; right:8px; z-index:46; width:36px; height:36px; align-items:center; justify-content:center;
  border-radius:18px; border:1px solid #1b2236; background:#111; color:#fff; cursor:pointer;
}
body.authed.drawer-open #app .nav { padding-right:52px; }
@media (min-width: 700px) { .overlay { left:auto; width:480px; border-left:1px solid #1b2236; } }

/* ---------------- stage + board ---------------- */
.fx-stage { position:fixed; inset:0; overflow:hidden; background:var(--fx-page); font-family:var(--fx-sans); color:#fff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; user-select:none; -webkit-user-select:none; }
.fx-stage.hidden { display:none !important; }
body.fx-stacked .fx-stage { position:relative; inset:auto; overflow:visible; min-height:100vh; }
.fx-board { position:absolute; left:0; top:0; width:2400px; height:1622px; transform-origin:0 0; }
.fx-panel { position:absolute; overflow:hidden; border-radius:24px; transform-origin:0 0; }
.fx-phone  { left:28px;   top:28px;  width:704px;  height:1564px; background:var(--fx-ph); border-radius:36px; }
.fx-office { left:760px;  top:28px;  width:1612px; height:922px;  background:#030712; border-radius:26px; }
.fx-chat   { left:760px;  top:976px; width:682px;  height:618px;  background:#0e0e0e; border-radius:22px; }
.fx-jev    { left:1468px; top:976px; width:446px;  height:618px;  background:#09080d; border-radius:22px; }
.fx-code   { left:1925px; top:976px; width:447px;  height:618px;  background:#0e0d12; border-radius:22px; }
button { font-family:inherit; }
.fx-stage button { -webkit-appearance:none; appearance:none; border:0; background:none; color:inherit; padding:0; cursor:pointer; }
.fx-stage svg { width:100%; height:100%; display:block; }

/* ================= PHONE ================= */
.ph-screen { position:absolute; inset:0; }
.ph-view { position:absolute; inset:0; transition:transform .38s var(--ease), opacity .3s; }
.ph-view.away { transform:translateX(-14%); opacity:0; pointer-events:none; }
.ph-head { position:absolute; left:0; top:0; width:704px; height:200px; }
.ph-back { position:absolute; left:33px; top:120px; width:30px; height:30px; color:#8a8896; }
.ph-back.dim { opacity:.35; }
.ph-av { position:absolute; left:83px; top:95px; width:80px; height:80px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 35% 30%, #2a2840, #121019); display:flex; align-items:center; justify-content:center;
  font:700 34px/1 var(--fx-sans); color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.06); }
.ph-av img { width:58%; height:auto; }
.ph-av.sm { left:30px; top:134px; width:76px; height:76px; font-size:30px; }
.ph-id { position:absolute; left:187px; top:96px; right:220px; }
.ph-name { display:flex; align-items:center; gap:10px; height:42px; white-space:nowrap; }
.ph-name #phTitle { font:500 31px/1 var(--fx-sans); letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; max-width:250px; }
.ph-chip { flex:none; width:30px; height:30px; border-radius:7px; background:#25232e; color:#e8e8ee; padding:5px; }
.ph-chip.sm { width:26px; height:26px; padding:4px; display:inline-block; vertical-align:middle; margin-left:8px; }
.ph-pill { flex:none; width:32px; height:32px; }
.ph-paper { flex:none; font:800 15px/1 var(--fx-sans); letter-spacing:.6px; color:#ff9f0a; padding:6px 9px; border-radius:8px;
  background:rgba(255,159,10,.12); box-shadow:inset 0 0 0 1.5px rgba(255,159,10,.45); }
.ph-sym { display:flex; align-items:center; gap:8px; margin-top:6px; height:30px; font:400 23px/1 var(--fx-sans); color:var(--fx-gray); }
.ph-copy { width:22px; height:22px; color:var(--fx-gray); }
.ph-tools { position:absolute; top:117px; right:28px; display:flex; gap:34px; }
.ph-tools button { width:36px; height:36px; color:#f2f2f5; }
.ph-tools button.off { color:#6f6d7a; }

.ph-price-row { position:absolute; left:0; top:200px; width:704px; height:118px; }
.ph-price { position:absolute; left:28px; top:18px; font:600 48px/1 var(--fx-sans); letter-spacing:-.6px; color:var(--fx-green-t);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.ph-price.white { color:#fff; } .ph-price.down { color:var(--fx-orange); }
.ph-chg { position:absolute; left:28px; top:76px; font:500 22px/1 var(--fx-sans); color:var(--fx-green-t); white-space:nowrap; }
.ph-chg.down { color:var(--fx-orange); } .ph-chg.flat { color:var(--fx-gray); }
.ph-chg .tri { font-size:13px; vertical-align:2px; margin-right:3px; }
.ph-mcap { position:absolute; right:30px; top:40px; text-align:right; }
.ph-mcap b { display:flex; align-items:center; justify-content:flex-end; gap:4px; font:600 30px/1 var(--fx-sans); letter-spacing:-.3px; white-space:nowrap; }
.ph-mcap b svg { width:22px; height:22px; color:#cfcfd6; }
.ph-mcap em { display:block; margin-top:12px; font:400 22px/1 var(--fx-sans); font-style:normal; color:var(--fx-gray); }

.ph-chart { position:absolute; left:0; top:318px; width:704px; height:480px; }
.ph-chart canvas { width:704px; height:480px; display:block; }
.ph-chart-empty { position:absolute; left:0; right:0; top:205px; text-align:center; font:500 21px/1.4 var(--fx-sans); color:#55535f; }

.ph-range { position:absolute; left:0; top:822px; width:704px; height:40px; }
.ph-range button { position:absolute; top:0; height:40px; font:600 20px/40px var(--fx-sans); color:#7c7a88; transform:translateX(-50%); }
.ph-range button[data-pr="LIVE"] { left:266px; width:76px; }
.ph-range button[data-pr="1H"] { left:349px; } .ph-range button[data-pr="4H"] { left:418px; } .ph-range button[data-pr="ALL"] { left:490px; }
.ph-range button.on { color:#fff; font-weight:700; background:#17151f; border-radius:10px; padding:0 14px; width:auto; min-width:60px; }
.ph-range button i { display:none; }
.ph-range button.on i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#5b6cff; margin-left:6px; vertical-align:2px; }
.ph-range .sep { position:absolute; left:537px; top:0; width:2px; height:40px; background:#24222d; }
.ph-ri { position:absolute; top:2px; width:36px; height:36px; color:#8a8896; }
.ph-ri.pulse { left:562px; color:#22c55e; } .ph-ri:not(.pulse) { left:624px; width:32px; top:4px; }

.ph-pos { position:absolute; left:28px; top:885px; width:648px; height:163px; border-radius:18px; background:#14121d; }
.ph-pos .t { position:absolute; left:24px; top:22px; font:500 25px/1 var(--fx-sans); color:#5865ff; display:flex; align-items:center; gap:10px; }
.ph-pos .t i { width:14px; height:14px; border-radius:50%; background:#4f5bff; box-shadow:0 0 0 4px rgba(79,91,255,.25); }
.ph-pos .t svg { width:20px; height:20px; color:#6f6d7a; }
.ph-pos .v { position:absolute; left:24px; top:70px; font:600 34px/1 var(--fx-sans); letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.ph-pos .s { position:absolute; left:24px; top:120px; font:400 22px/1 var(--fx-sans); color:#a9a7b3; }
.ph-pos .pv { position:absolute; right:26px; top:70px; font:600 34px/1 var(--fx-sans); letter-spacing:-.4px; color:var(--fx-green-t); }
.ph-pos .pp { position:absolute; right:26px; top:120px; font:400 22px/1 var(--fx-sans); color:#b8b6c2; }
.ph-pos .pv.down, .ph-pos .pp.down { color:var(--fx-orange); }

.ph-tabs { position:absolute; left:28px; top:900px; width:648px; height:56px; border-bottom:3px solid #1c1a26; }
.ph-tabs button { position:absolute; top:6px; width:216px; height:40px; font:500 23px/40px var(--fx-sans); color:#77757f; text-align:center; }
.ph-tabs button:nth-child(1) { left:0; } .ph-tabs button:nth-child(2) { left:216px; } .ph-tabs button:nth-child(3) { left:432px; }
.ph-tabs button.on { color:#fff; }
.ph-tabs .ul { position:absolute; left:0; bottom:-3px; width:216px; height:3px; background:var(--fx-blue); border-radius:2px; transition:left .25s var(--ease); }
.ph-follow { position:absolute; left:28px; top:984px; height:40px; display:flex; align-items:center; gap:15px; font:400 23px/1 var(--fx-sans); color:#cfcfd6; }
.ph-follow .tg { position:relative; width:70px; height:40px; border-radius:20px; background:#1a1824; box-shadow:inset 0 0 0 1.5px #2c2a36; }
.ph-follow .tg i { position:absolute; left:5px; top:5px; width:30px; height:30px; border-radius:50%; background:#fff; transition:left .2s; }
.ph-follow .tg.on { background:#03be49; box-shadow:none; } .ph-follow .tg.on i { left:35px; }
.ph-banner { position:absolute; left:28px; top:1047px; width:648px; height:74px; border-radius:18px; background:#110f1a !important;
  box-shadow:inset 0 0 0 1.5px #221f2e; display:flex; align-items:center; text-align:left; }
.ph-banner .w { position:absolute; left:20px; top:23px; width:28px; height:28px; color:var(--fx-pink); }
.ph-banner span { position:absolute; left:59px; top:24px; font:500 25px/1 var(--fx-sans); color:var(--fx-pink); }
.ph-banner .c { position:absolute; right:22px; top:27px; width:20px; height:20px; color:#6d6b78; }
.ph-body { position:absolute; left:0; top:1150px; width:704px; height:200px; overflow:hidden; }
.ph-row { position:absolute; left:0; width:704px; height:96px; cursor:pointer; }
.ph-row .a { position:absolute; left:26px; top:6px; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:700 24px/1 var(--fx-sans); color:#fff; overflow:hidden; }
.ph-row .a img { width:100%; height:100%; }
.ph-row .n { position:absolute; left:107px; top:8px; font:600 26px/1 var(--fx-sans); max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph-row .d { position:absolute; left:107px; top:44px; font:400 22px/1 var(--fx-sans); color:var(--fx-gray); max-width:400px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph-row .r { position:absolute; right:30px; top:8px; font:600 26px/1 var(--fx-sans); font-variant-numeric:tabular-nums; }
.ph-row .rs { position:absolute; right:30px; top:46px; font:500 21px/1 var(--fx-sans); color:var(--fx-green-t); }
.ph-row .rs.down { color:var(--fx-orange); } .ph-row .rs.gray { color:var(--fx-gray); }
.ph-empty { position:absolute; left:28px; right:28px; top:30px; font:400 22px/1.45 var(--fx-sans); color:#6c6a77; }

.ph-view.has-pos .ph-tabs { top:1180px; } .ph-view.has-pos .ph-follow { top:1264px; }
.ph-view.has-pos .ph-banner, .ph-view.has-pos .ph-body { display:none; }

.ph-warn { position:absolute; left:0; top:1364px; width:704px; height:32px; display:flex; align-items:center; justify-content:center; gap:12px;
  font:500 22px/1 var(--fx-sans); color:#a7a5b0; }
.ph-warn .t { width:26px; height:26px; color:#a7a5b0; } .ph-warn .i { width:24px; height:24px; color:#8a8896; }
.ph-actions { position:absolute; left:28px; top:1422px; width:648px; height:80px; }
.ph-buy, .ph-sell { position:absolute; top:0; height:80px; border-radius:14px; font:700 26px/80px var(--fx-sans) !important; color:#fff !important; }
.ph-buy { left:0; width:552px; background:var(--fx-green) !important; }
.ph-sell { left:0; width:268px; background:var(--fx-orange) !important; }
.ph-actions.two .ph-buy { left:284px; width:268px; }
.ph-buy.dim { background:#0f6b33 !important; color:#cfe9d8 !important; }
.ph-bolt { position:absolute; left:569px; top:0; width:79px; height:80px; border-radius:14px; background:#16141f; box-shadow:inset 0 0 0 1.5px #26242f;
  color:#fff; display:flex; align-items:center; justify-content:center; }
.ph-bolt svg { width:30px; height:30px; }
.ph-bolt.off { opacity:.45; pointer-events:none; }

/* keypad sheet */
.ph-sheet { position:absolute; inset:0; background:var(--fx-ph); transform:translateX(100%); transition:transform .38s var(--ease); }
.ph-sheet.open { transform:none; }
.ph-sback { position:absolute; left:12px; top:98px; width:24px; height:24px; color:#6f6d7a; }
.ph-shead { position:absolute; left:0; top:0; width:704px; height:220px; }
.ph-sid { position:absolute; left:132px; top:136px; }
.ph-sid b { font:500 28px/1 var(--fx-sans); vertical-align:middle; }
.ph-sid em { display:block; margin-top:14px; font:400 24px/1 var(--fx-sans); font-style:normal; color:var(--fx-gray); }
.ph-spx { position:absolute; right:30px; top:138px; text-align:right; }
.ph-spx b { font:700 28px/1 var(--fx-sans); font-variant-numeric:tabular-nums; }
.ph-spx em { display:block; margin-top:19px; font:500 22px/1 var(--fx-sans); font-style:normal; color:var(--fx-green-t); }
.ph-spx em.down { color:var(--fx-orange); }
.ph-sheet-amt { position:absolute; left:0; width:704px; top:430px; text-align:center; font:600 84px/1 var(--fx-sans); letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.ph-sheet-est { position:absolute; left:0; width:704px; top:540px; text-align:center; font:400 24px/1 var(--fx-sans); color:#77757f; }
.ph-pcts { position:absolute; left:40px; top:784px; width:622px; height:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.ph-pcts button { border-radius:14px; background:#16151d !important; font:600 28px/60px var(--fx-sans) !important; color:#fff !important; }
.ph-pcts button.on { box-shadow:inset 0 0 0 2px #3a3846; }
.ph-keys { position:absolute; left:0; top:886px; width:704px; height:412px; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:103px; }
.ph-keys button { font:500 44px/103px var(--fx-sans) !important; color:#fff !important; }
.ph-keys button svg { width:44px; height:33px; margin:0 auto; color:#fff; display:inline-block; vertical-align:middle; }
.ph-keys button:active { background:rgba(255,255,255,.04) !important; border-radius:16px; }
.ph-avail { position:absolute; left:28px; top:1328px; width:648px; height:30px; display:flex; align-items:center; gap:10px; font:400 24px/1 var(--fx-sans); color:#9b99a6; }
.ph-avail svg { width:26px; height:26px; color:#8a8896; }
.ph-avail .fee { margin-left:auto; color:#fff; font-weight:500; }
.ph-slide { position:absolute; left:34px; top:1388px; width:636px; height:82px; border-radius:14px; background:var(--fx-green); overflow:hidden; touch-action:none; }
.ph-slide .lbl { position:absolute; left:0; right:0; top:0; line-height:82px; text-align:center; font:700 28px/82px var(--fx-sans); color:rgba(255,255,255,.0); }
.ph-slide .thumb { position:absolute; right:4px; left:auto; top:4px; width:74px; height:74px; border-radius:11px; background:#05a53f; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:grab; }
.ph-slide .thumb svg { width:34px; height:34px; }
.ph-slide[data-side="buy"] .lbl { color:rgba(255,255,255,.92); padding-right:70px; }
.ph-slide[data-side="sell"] { background:#17151f; }
.ph-slide[data-side="sell"] .thumb { left:4px; right:auto; background:var(--fx-orange); box-shadow:none; }
.ph-slide[data-side="sell"] .lbl { color:#fff; padding-left:70px; }
.ph-slide[data-side="buy"] .thumb { left:4px; right:auto; }
.ph-sheet-note { position:absolute; left:34px; right:34px; top:1484px; margin:0; font:400 18px/1.3 var(--fx-sans); color:#5f5d6a; text-align:center; }
.ph-sheet-note code { font-family:var(--fx-mono); color:#8a8896; }

/* toast (reference t16 "Selling CHICO") */
.ph-toast { position:absolute; left:50%; top:110px; height:65px; padding:0 30px 0 22px; border-radius:33px; background:#0d0c18;
  box-shadow:inset 0 0 0 2.5px #5a5ff0, 0 10px 30px rgba(0,0,0,.55); display:flex; align-items:center; gap:16px;
  font:500 28px/1 var(--fx-sans); white-space:nowrap; transform:translate(-50%, -30px); opacity:0; pointer-events:none; transition:transform .3s var(--ease), opacity .25s; z-index:9; max-width:660px; }
.ph-toast span { overflow:hidden; text-overflow:ellipsis; }
.ph-toast.show { transform:translate(-50%, 0); opacity:1; }
.ph-toast .spin { flex:none; width:30px; height:30px; border-radius:50%; border:3.5px solid #2a2c6a; border-top-color:#6b72ff; animation:fxspin .8s linear infinite; }
.ph-toast.ok .spin { animation:none; border-color:#03be49; background:#03be49; }
.ph-toast.bad { box-shadow:inset 0 0 0 2.5px #ff5a1f, 0 10px 30px rgba(0,0,0,.55); }
.ph-toast.bad .spin { animation:none; border-color:#ff5a1f; background:#ff5a1f; }
.ph-toast.info .spin { animation:none; border:0; background:#5a5ff0; width:14px; height:14px; }
@keyframes fxspin { to { transform:rotate(360deg); } }

/* ================= OFFICE ================= */
.of-plate { position:absolute; left:0; top:0; width:1612px; height:922px; display:block; pointer-events:none; }
.of-cv { position:absolute; left:0; top:0; width:1612px; height:922px; pointer-events:none; }
.of-tick { position:absolute; font:700 13.5px/1 var(--fx-mono); color:#55df8f; text-shadow:0 0 6px rgba(60,220,130,.55); white-space:nowrap; overflow:hidden; }
.of-tick.top { left:398px; top:15px; width:716px; height:16px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.of-tick.top .mq { display:inline-block; padding-left:4px; animation:fxmq 60s linear infinite; will-change:transform; }
.of-tick.bot { left:410px; top:345px; width:700px; height:16px; text-align:center; }
@keyframes fxmq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.of-big { position:absolute; left:409px; top:70px; width:701px; height:269px; overflow:hidden; font-family:var(--fx-sans); color:#d9d9e2; }
.of-big .bg-head { position:absolute; left:0; top:0; width:701px; height:40px; }
.of-big .bg-av { position:absolute; left:8px; top:6px; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #34314c, #15131e);
  display:flex; align-items:center; justify-content:center; font:700 11px/1 var(--fx-sans); color:#fff; overflow:hidden; }
.of-big .bg-av img { width:62%; }
.of-big .bg-id { position:absolute; left:38px; top:7px; }
.of-big .bg-id b { display:block; font:600 11px/1 var(--fx-sans); color:#f1f1f5; }
.of-big .bg-id em { display:block; margin-top:4px; font:400 8px/1 var(--fx-sans); font-style:normal; color:#7d7b88; }
.of-big .bg-stats { position:absolute; right:6px; top:3px; display:flex; gap:4px; }
.of-big .bg-stats div { min-width:52px; height:32px; padding:4px 6px 0; border-radius:4px; background:#121119; text-align:center; }
.of-big .bg-stats div:first-child { background:transparent; }
.of-big .bg-stats i { display:block; font:400 7px/1 var(--fx-sans); font-style:normal; color:#8b8996; }
.of-big .bg-stats b { display:block; margin-top:4px; font:700 9px/1 var(--fx-sans); color:#f1f1f5; white-space:nowrap; }
.of-big .bg-stats b.up { color:#3fd170; } .of-big .bg-stats b.dn { color:#ff5a5a; } .of-big .bg-stats b.na { color:#5c5a66; }
.of-big .bg-tools { position:absolute; left:8px; top:42px; right:8px; height:14px; display:flex; gap:10px; align-items:center; font:500 8px/1 var(--fx-sans); color:#a9a7b3; }
.of-big .bg-tools .sep { width:1px; height:10px; background:#2a2834; }
.of-big .bg-tools i { font-style:normal; color:#6b72ff; }
.of-big .bg-tools .r { margin-left:auto; color:#ff9f0a; font-weight:800; letter-spacing:.5px; }
.of-big .bg-title { position:absolute; left:10px; top:63px; font:500 8.5px/1 var(--fx-sans); color:#d9d9e2; white-space:nowrap; }
.of-big .bg-title .o { color:#ff6b5a; } .of-big .bg-title .g { color:#3fd170; }
.of-big canvas { position:absolute; left:6px; top:84px; width:689px; height:160px; }
.of-big .bg-empty { position:absolute; left:0; right:0; top:150px; text-align:center; font:500 10px/1.5 var(--fx-mono); color:#4b495a; letter-spacing:.5px; }
.of-big .bg-foot { position:absolute; left:10px; right:8px; top:250px; height:12px; display:flex; gap:12px; font:500 7.5px/12px var(--fx-sans); color:#a9a7b3; }
.of-big .bg-foot .r { margin-left:auto; } .of-big .bg-foot .r2 { color:#a9a7b3; }
.of-big .bg-foot .r2.on { background:#2a2834; padding:0 4px; border-radius:2px; color:#e8e8ee; }

.of-actors { position:absolute; inset:0; }
.of-av { position:absolute; cursor:pointer; }
.of-av img { position:absolute; left:0; top:0; display:block; pointer-events:none; }
.of-av .bob { position:absolute; inset:0; animation:fxbob 2.8s ease-in-out infinite; }
.of-av.paused { opacity:.45; filter:saturate(.4); } .of-av.paused .bob { animation:none; }
.of-av.hop .bob { animation:fxhop .6s var(--ease) 2, fxbob 2.8s ease-in-out .9s infinite; }
.of-av .lb { position:absolute; left:50%; transform:translateX(-50%); top:-14px; font:700 11px/1 var(--fx-mono); letter-spacing:1px; white-space:nowrap; text-shadow:0 0 6px rgba(0,0,0,.9); }
.of-bub { position:absolute; padding:4px 7px; background:#0b0a19; border:1.5px solid #8a7cf0; border-radius:3px; font:500 10.5px/1.15 var(--fx-mono);
  color:#f0f0f7; white-space:nowrap; max-width:330px; overflow:hidden; text-overflow:ellipsis; opacity:0; transform:translateY(4px);
  transition:opacity .3s, transform .3s; pointer-events:none; }
.of-bub.on { opacity:1; transform:none; }
.of-bub.red { border-color:#ff4d5e; } .of-bub.amber { border-color:#ffb020; } .of-bub.green { border-color:#3fd170; }
@keyframes fxbob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes fxhop { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-12px); } }
.of-err { position:absolute; right:18px; bottom:14px; padding:6px 12px; border-radius:8px; background:rgba(255,69,58,.18); box-shadow:inset 0 0 0 1px rgba(255,69,58,.5);
  font:600 12px/1 var(--fx-mono); color:#ff8a80; }

/* ================= CHAT ================= */
.ch-tools { position:absolute; right:22px; top:17px; display:flex; gap:11px; }
.ch-tools button { width:46px; height:46px; border-radius:50%; background:#202020 !important; color:#fff !important; padding:12px !important; }
.ch-list { position:absolute; left:0; top:84px; width:682px; height:534px; overflow:hidden; }
.ch-row { position:absolute; left:15px; width:650px; height:68px; border-radius:14px; cursor:pointer; transition:top .45s var(--ease), background .2s; }
.ch-row.sel { background:#1f1f1f; }
.ch-row:hover { background:#181818; } .ch-row.sel:hover { background:#232323; }
.ch-row img { position:absolute; left:7px; top:8px; width:52px; height:52px; }
.ch-row b { position:absolute; left:67px; top:12px; font:700 20.5px/1 var(--fx-sans); color:#fff; }
.ch-row span { position:absolute; left:67px; top:37px; right:40px; font:400 19.5px/1.1 var(--fx-sans); color:#b3b3b3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-row i { position:absolute; right:10px; top:29px; width:11px; height:11px; border-radius:50%; background:#5b9cf5; }
.ch-row.paused span { color:#7a7a7a; }

/* ================= JEV · ANALYSIS ================= */
.jv-head { position:absolute; left:0; top:0; width:446px; height:42px; background:#0c0d13; }
.jv-head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,#ff4fa3,#7b5cff 70%,#3b2a7a); opacity:.9; }
.jv-head b { position:absolute; left:15px; top:9px; font:700 22px/1 var(--fx-mono); letter-spacing:3.2px; color:#f4f4f8; }
.jv-head span { position:absolute; right:14px; top:11px; font:700 18.5px/1 var(--fx-mono); letter-spacing:2.4px; color:#ff4fa3; }
.jv-chart { position:absolute; left:0; top:42px; width:446px; height:338px; background:#0a0910; overflow:hidden; }
.jv-ch-head { position:absolute; left:6px; top:4px; right:6px; height:26px; font-family:var(--fx-sans); }
.jv-ch-head .av { position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #34314c, #15131e);
  font:700 9px/20px var(--fx-sans); text-align:center; color:#fff; overflow:hidden; }
.jv-ch-head .av img { width:64%; margin-top:5px; }
.jv-ch-head .nm { position:absolute; left:26px; top:3px; font:700 9.5px/1 var(--fx-sans); color:#f0f0f5; max-width:110px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.jv-ch-head .sb { position:absolute; left:26px; top:15px; font:400 7px/1 var(--fx-sans); color:#7d7b88; }
.jv-ch-head .st { position:absolute; right:0; top:0; display:flex; gap:3px; }
.jv-ch-head .st div { min-width:44px; height:24px; padding:3px 4px 0; border-radius:3px; background:#13121a; text-align:center; }
.jv-ch-head .st i { display:block; font:400 6px/1 var(--fx-sans); font-style:normal; color:#8b8996; }
.jv-ch-head .st b { display:block; margin-top:3px; font:700 8px/1 var(--fx-sans); color:#f1f1f5; white-space:nowrap; }
.jv-ch-head .st b.up { color:#3fd170; } .jv-ch-head .st b.dn { color:#ff5a5a; } .jv-ch-head .st b.na { color:#5c5a66; }
.jv-chart canvas { position:absolute; left:0; top:34px; width:446px; height:270px; }
.jv-empty { position:absolute; left:0; right:0; top:140px; text-align:center; font:500 13px/1.5 var(--fx-mono); color:#454356; }
.jv-checks { position:absolute; left:275px; top:42px; width:165px; padding:3px 0; background:rgba(14,13,22,.88); border:1px solid #26243a; border-radius:3px; }
.jv-checks div { display:flex; justify-content:space-between; height:21px; padding:0 8px; font:400 13.5px/21px var(--fx-mono); color:#6e6c80; white-space:nowrap; }
.jv-checks div + div { border-top:1px solid #1b1a28; }
.jv-checks b { font-weight:700; color:#9a98a8; letter-spacing:1px; }
.jv-checks b.pass { color:#3fd170; letter-spacing:0; } .jv-checks b.drop { color:#ff4d5e; letter-spacing:0; }
.jv-coin { position:absolute; left:8px; top:281px; height:30px; padding:0 10px 0 22px; border-radius:4px; background:#0d0c16; box-shadow:inset 0 0 0 1.5px #2e2b3d;
  font:700 19px/30px var(--fx-mono); letter-spacing:1px; color:#fff; white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.jv-coin::before { content:""; position:absolute; left:9px; top:12px; width:7px; height:7px; border-radius:50%; background:#ff4fa3; }
.jv-coin:empty { display:none; }
.jv-rows { position:absolute; left:0; top:380px; width:446px; height:238px; padding-top:8px; background:#09080d; box-shadow:inset 0 1px 0 #17151f; }
.jv-row { position:relative; height:25px; font:400 16px/25px var(--fx-mono); white-space:nowrap; cursor:pointer; }
.jv-row .n { position:absolute; left:15px; width:95px; overflow:hidden; text-overflow:clip; font-weight:700; color:#e8e8ee; }
.jv-row .k { position:absolute; left:113px; width:225px; overflow:hidden; color:#8d8b99; }
.jv-row .v { position:absolute; left:345px; font-weight:700; color:#e2485c; }
.jv-row .v.pass { color:#3fd170; } .jv-row .v.watch { color:#f0b429; }
.jv-row .t { position:absolute; right:14px; color:#77758a; }
.jv-row:nth-child(6) { opacity:.75; } .jv-row:nth-child(7) { opacity:.5; } .jv-row:nth-child(8) { opacity:.3; } .jv-row:nth-child(n+9) { display:none; }
.jv-row:hover .n { color:#fff; text-decoration:underline; }
.jv-none { padding:14px 15px; font:400 15px/1.5 var(--fx-mono); color:#5d5b6c; }

/* ================= thresholds.py ================= */
.cd-head { position:absolute; left:0; top:0; width:447px; height:42px; border-bottom:1.5px solid #221d29; background:#100e14; }
.cd-head b { position:absolute; left:17px; top:9px; font:700 24px/1 var(--fx-mono); color:#f6f6fa; letter-spacing:.4px; }
.cd-head button { position:absolute; right:12px; top:8px; width:26px; height:26px; color:#4d4a5c !important; font:600 17px/26px var(--fx-sans) !important; }
.cd-head button:hover { color:#cfcfd6 !important; }
.cd-body { position:absolute; left:0; top:44px; width:447px; height:574px; font:400 16.5px/26px var(--fx-mono); white-space:nowrap; color:#d4d2de; }
.cd-l { position:absolute; left:17px; right:15px; height:26px; }
.cd-l .h { color:#ff4f8b; font-weight:700; } .cd-l .o { color:#8b88a0; } .cd-l .c { color:#6c6a7e; }
.cd-l .k { position:absolute; left:11px; color:#bfe3ff; } .cd-l .v { position:absolute; left:170px; color:#e6d38a; }
.cd-l .ob { position:absolute; right:22px; color:#f2f2f6; font-weight:600; } .cd-l .m { position:absolute; right:2px; font-weight:700; }
.cd-l .m.ok { color:#3fd170; } .cd-l .m.x { color:#ff4d5e; } .cd-l .m.na { color:#4d4b5c; }
.cd-l .sv { position:absolute; left:216px; color:#e6d38a; } .cd-l .sv i { font-style:normal; color:#a9a7b3; }
.cd-l .dd { position:absolute; right:22px; color:#4d4b5c; letter-spacing:2px; }
.cd-l.fail { background:#2f1520; border-radius:3px; }
.cd-sep { position:absolute; left:17px; right:15px; height:1.5px; background:#221d29; }
.cd-lbl { position:absolute; left:17px; font:400 14.5px/1 var(--fx-mono); color:#8b88a0; letter-spacing:.6px; }
.cd-pills { position:absolute; left:17px; height:26px; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.cd-pills span { height:25px; padding:0 7px; border-radius:5px; font:700 13.5px/22px var(--fx-mono); color:#76738a; box-shadow:inset 0 0 0 1.5px #3a3748; }
.cd-pills span.ok { color:#3fd170; box-shadow:inset 0 0 0 1.5px #2f9e5c; }
.cd-pills span.kill { color:#1a0a0e; background:#ff4d5e; box-shadow:none; }
.cd-pills span.watch { color:#1a1200; background:#f0b429; box-shadow:none; }
.cd-pills em { font-style:normal; color:#56536a; font-size:13px; }

/* ================= stacked (phones / narrow) ================= */
body.fx-stacked .fx-board { position:relative; }
@media (prefers-reduced-motion: reduce) {
  .of-av .bob, .of-tick.top .mq, .ph-toast .spin { animation:none !important; }
  .ph-view, .ph-sheet, .ch-row { transition:none !important; }
}

#phAvail.over{color:#ff6b4a}

/* ---- v17 office life: avatars walk measured floor aisles (real errands + decor strolls) ---- */
.of-av { will-change:transform; }
.of-av .lb { transition:opacity .25s; }
.of-av.away .lb { opacity:0; }
.of-av.walking .bob { animation:fxstep .36s ease-in-out infinite !important; }
.of-av.walking img { transform-origin:50% 100%; animation:fxlean .72s ease-in-out infinite; }
.of-av.walking.face-l img { animation-name:fxleanl; }
@keyframes fxstep { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes fxlean { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(4deg); } }
@keyframes fxleanl { 0%,100% { transform:rotate(4deg); } 50% { transform:rotate(-4deg); } }
.of-av .ab { position:absolute; bottom:calc(100% + 8px); left:50%; max-width:230px; width:max-content; padding:4px 7px; background:#0b0a19;
  border:1.5px solid #8a7cf0; border-radius:3px; font:500 10.5px/1.2 var(--fx-mono); color:#e8e6ff; white-space:normal;
  opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s; pointer-events:none; z-index:5; }
.of-av .ab.r { left:20%; } .of-av .ab.l { left:auto; right:20%; }
.of-av .ab.on { opacity:1; transform:none; }
.of-av .ab.red { border-color:#ff4d5e; } .of-av .ab.amber { border-color:#ffb020; } .of-av .ab.green { border-color:#3fd170; }
.of-av:not(.away) .ab { bottom:calc(100% + 18px); }
#ofBub { display:none !important; }
@media (prefers-reduced-motion: reduce) {
  .of-av, .of-av img, .of-av.walking .bob { animation:none !important; transition:none !important; }
}
.of-av.talk { z-index:2000 !important; }
.jv-checks b.lane { color:#f0b429; letter-spacing:0; }