/* Anatolian Export — panel login + demo. Quiet, Apple-like surfaces in the brand's navy and teal. */
:root {
  --bg: #E9EDF1;
  --card: #FFFFFF;
  --ink: #0B2233;
  --ink-2: #1D3346;
  --sub: #4E5B67;
  --line: rgba(11, 34, 51, .11);
  --field: #C9CFD6;
  --teal: #008B8E;
  --teal-ink: #00686B;
  --teal-bright: #34C6C3;
  --teal-soft: #E3F3F2;
  --amber: #B5541C;
  --amber-soft: #FBEEE4;
  --night: #05101A;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --shadow: 0 0 0 1px rgba(11,34,51,.06), 0 1px 2px rgba(11,34,51,.06), 0 14px 34px -16px rgba(11,34,51,.26);
  --radius: 22px;
  --surface: #FFFFFF; --surface-hi: #FFFFFF; --surface-2: #F0F3F6; --surface-3: #E3E8ED; --hover: #F3F6F8;
  --glass: rgba(246,248,250,.92); --glass-2: rgba(255,255,255,.92); --tint: rgba(11,34,51,.07);
  --veil-a: rgba(233,237,241,.2); --veil-b: rgba(233,237,241,.75);
  --demo-grad: linear-gradient(160deg, #F2FAF9 0%, #F7F8FA 100%); --ok-soft: #E9F7EF; --ok-ink: #11683B;
  --btn-bg: #0B2233; --btn-fg: #fff; --cta-bg: #0B2233;
  --rail: #D5DCE2; --chip-a: #E4F5F4; --chip-b: #CBEAE8; --chip-ring: rgba(0,139,142,.22);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B1117; --card: #121A22; --ink: #EAF0F4; --ink-2: #C8D3DB; --sub: #93A1AC;
  --line: rgba(255,255,255,.09); --field: rgba(255,255,255,.16);
  --teal: #19A7A9; --teal-ink: #5BD3D0; --teal-bright: #3FD1CE; --teal-soft: rgba(52,198,195,.14);
  --amber: #F0A06A; --amber-soft: rgba(240,160,106,.14);
  --surface: #121A22; --surface-hi: #1E2933; --surface-2: #18222C; --surface-3: #1F2B36; --hover: #17212A;
  --glass: rgba(14,21,28,.82); --glass-2: rgba(20,29,38,.92); --tint: rgba(255,255,255,.06);
  --veil-a: rgba(11,17,23,.2); --veil-b: rgba(11,17,23,.8);
  --demo-grad: linear-gradient(160deg, rgba(52,198,195,.1) 0%, rgba(255,255,255,.03) 100%); --ok-soft: rgba(31,162,90,.16); --ok-ink: #6FD39B;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 16px 40px -18px rgba(0,0,0,.6);
  --btn-bg: #EAF0F4; --btn-fg: #0B1117; --cta-bg: #1A2B37;
  --rail: #26333E; --chip-a: #17393C; --chip-b: #0F2B2E; --chip-ring: rgba(63,209,206,.28);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; letter-spacing: -.01em; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.025em; line-height: 1.1; font-weight: 600; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--teal-ink); }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid rgba(0,139,142,.45); outline-offset: 2px; border-radius: 10px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.ribbon { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 400; font: 500 11.5px/1 var(--font); letter-spacing: 0; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.72); color: var(--sub); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; pointer-events: none; }
.on-dark .ribbon, body.showing .ribbon { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.12); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; border: 0; font-weight: 600; font-size: 15.5px; text-decoration: none; transition: transform .15s var(--ease), background .2s, box-shadow .2s; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.dark { background: var(--btn-bg); color: var(--btn-fg); }
.btn.dark:hover { filter: brightness(1.12); }
.btn.teal { background: var(--teal); color: #fff; box-shadow: 0 8px 24px -10px rgba(0,139,142,.7); }
.btn.teal:hover { background: #00797C; }
.btn.light { background: var(--surface); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--field); }
.btn.block { width: 100%; }
.btn.sm { height: 38px; padding: 0 16px; font-size: 14px; }
.link { background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* fields */
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field input, .field select { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--field); background: var(--surface); font-size: 16px; transition: border-color .15s, box-shadow .15s; width: 100%; }
.field input:focus, .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,139,142,.14); }
.field input[aria-invalid="true"] { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(181,84,28,.1); }
.field .err { font-size: 12.5px; color: var(--amber); min-height: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.phone { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }

/* ================= login ================= */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 46%) 1fr; }
.login .lside { display: flex; flex-direction: column; padding: 36px clamp(28px, 5vw, 72px); background: var(--surface); }
.login .lside .logo { width: 150px; height: auto; }
.login .lform { margin: auto 0; width: 100%; max-width: 400px; display: grid; gap: 18px; padding: 40px 0; }
.login h1 { font-size: 38px; }
.login .lead { color: var(--sub); font-size: 16px; margin-top: -8px; }
.login form { display: grid; gap: 14px; }
.login .row-between { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.login .msg { font-size: 13.5px; color: var(--ink-2); background: var(--teal-soft); border-radius: 12px; padding: 10px 12px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--sub); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.democard { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: var(--demo-grad); border: 1px solid rgba(0,139,142,.18); }
.democard b { font: 600 17px/1.25 var(--display); letter-spacing: -.02em; }
.democard p { color: var(--sub); font-size: 14.5px; }
.login .lfoot { font-size: 12.5px; color: var(--sub); }

.login .rside { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 70% 20%, #0E3446 0%, #071A26 45%, var(--night) 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 96px); }
.rside h2 { font-size: clamp(40px, 4.6vw, 64px); letter-spacing: -.04em; line-height: 1.02; }
.rside h2 span { color: var(--teal-bright); }
.rside p { color: rgba(255,255,255,.66); font-size: 17px; max-width: 460px; margin-top: 18px; }
.mock { margin-top: 48px; width: min(560px, 100%); border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: 20px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.mock .mrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mock .mk { border-radius: 14px; background: rgba(255,255,255,.06); padding: 12px; }
.mock .mk small { display: block; font-size: 11.5px; color: rgba(255,255,255,.55); }
.mock .mk b { font: 600 24px/1.15 var(--display); letter-spacing: -.03em; }
.mock svg { display: block; width: 100%; margin-top: 14px; }
.reveal { opacity: 0; transform: translateY(16px); animation: rv .9s var(--ease) forwards; }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .25s; } .d3 { animation-delay: .45s; }
@keyframes rv { to { opacity: 1; transform: none; } }

/* ================= show ================= */
.show { position: fixed; inset: 0; z-index: 300; background: #000; color: #fff; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.show .stop { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; }
.show .stop img { width: 120px; opacity: .9; }
.show .skip { background: rgba(255,255,255,.1); border: 0; color: #fff; height: 36px; padding: 0 16px; border-radius: 999px; font-weight: 500; font-size: 14px; }
.show .skip:hover { background: rgba(255,255,255,.18); }
.show .scene { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; padding: 0 24px; }
.show .cap { text-align: center; min-height: 140px; display: grid; align-content: end; gap: 10px; padding-top: 2vh; }
.show .cap h2 { font-size: clamp(36px, 5.2vw, 68px); letter-spacing: -.045em; }
.show .cap p { color: rgba(255,255,255,.55); font-size: clamp(16px, 1.5vw, 20px); }
.show .viz { position: relative; width: min(980px, 100%); height: min(46vh, 420px); margin-top: 3vh; }
.show .prog { display: flex; gap: 6px; justify-content: center; padding: 26px; }
.show .prog i { width: 28px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.show .prog i b { display: block; height: 100%; width: 0; background: #fff; }

.bub { position: absolute; max-width: 420px; padding: 14px 16px; border-radius: 20px; background: #1C1C1E; border: 1px solid rgba(255,255,255,.08); font-size: 16px; line-height: 1.45; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); opacity: 0; }
.bub .meta { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: rgba(255,255,255,.5); margin-bottom: 6px; }
.bub.in { left: 6%; top: 8%; border-bottom-left-radius: 6px; }
.bub.ai { right: 6%; top: 38%; background: #0D3B3D; border-color: rgba(52,198,195,.25); border-bottom-right-radius: 6px; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font: 700 11px/1 var(--font); letter-spacing: .02em; background: var(--teal-bright); color: #042324; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.chip.t { background: rgba(52,198,195,.16); color: #9FECE9; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.7); animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.person { position: absolute; right: 8%; top: 22%; width: 300px; padding: 20px; border-radius: 22px; background: #1C1C1E; border: 1px solid rgba(255,255,255,.08); opacity: 0; display: grid; gap: 12px; }
.person .who { display: flex; gap: 12px; align-items: center; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 600 17px/1 var(--display); background: linear-gradient(135deg, #34C6C3, #008B8E); color: #032527; flex: none; }
.person b { font-size: 17px; display: block; }
.person small { color: rgba(255,255,255,.55); font-size: 13px; }
.mini { position: absolute; left: 8%; top: 22%; width: 300px; padding: 16px; border-radius: 22px; background: #1C1C1E; border: 1px solid rgba(255,255,255,.08); opacity: 0; display: grid; gap: 8px; font-size: 14px; }
.mini .l { display: flex; justify-content: space-between; color: rgba(255,255,255,.6); font-size: 13px; }
.wire { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wire path { fill: none; stroke: var(--teal-bright); stroke-width: 2; stroke-linecap: round; }
.track { position: absolute; left: 6%; right: 6%; top: 40%; opacity: 0; }
.track .rail { position: absolute; left: 30px; right: 30px; top: 29px; height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; }
.track .rail b { display: block; height: 100%; width: 0; background: var(--teal-bright); border-radius: 2px; box-shadow: 0 0 12px rgba(52,198,195,.7); }
.track .steps { position: relative; display: flex; justify-content: space-between; }
.step { display: grid; justify-items: center; gap: 12px; text-align: center; width: 200px; opacity: .35; transition: opacity .5s; }
.step .dot { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #1C1C1E; border: 1px solid rgba(255,255,255,.14); transition: background .5s, border-color .5s, box-shadow .5s; }
.step .dot svg { width: 26px; height: 26px; }
.step b { font: 600 20px/1.2 var(--display); letter-spacing: -.02em; }
.step small { color: rgba(255,255,255,.55); font-size: 14px; }
.step.on { opacity: 1; }
.step.on .dot { background: var(--teal); border-color: var(--teal-bright); box-shadow: 0 0 0 8px rgba(52,198,195,.12), 0 0 30px rgba(52,198,195,.5); }

/* panel arriving inside the show */
body.showing .app { position: fixed; inset: 0; z-index: 310; transform-origin: 50% 0%; border-radius: 28px; overflow: hidden; pointer-events: none; box-shadow: 0 60px 120px -30px rgba(52,198,195,.35), 0 0 0 1px rgba(255,255,255,.12); }

/* ================= panel ================= */
.app { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; background: var(--bg); }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 22px 14px 18px; background: var(--glass); border-right: 1px solid var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.side .brand { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 18px; }
.side .brand img { width: 128px; }
.pill { font: 600 11px/1 var(--font); letter-spacing: .02em; padding: 5px 8px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); }
.side nav { display: grid; gap: 2px; }
.nl { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.nl svg { width: 19px; height: 19px; flex: none; color: var(--sub); }
.nl:hover { background: var(--tint); }
.nl[aria-current="page"] { background: var(--surface); box-shadow: var(--shadow); color: var(--ink); }
.nl[aria-current="page"] svg { color: var(--teal); }
.nl .lock { margin-left: auto; width: 14px; height: 14px; color: #A0A8AF; }
.side .cta { margin-top: auto; padding: 16px; border-radius: 18px; background: var(--cta-bg); color: #fff; display: grid; gap: 10px; }
.side .cta b { font: 600 15.5px/1.3 var(--display); letter-spacing: -.02em; }
.side .cta p { font-size: 13px; color: rgba(255,255,255,.65); }
.side .cta.done { background: var(--teal-soft); color: var(--ink); }
.side .cta.done p { color: var(--sub); }
.side .exit { margin-top: 10px; font-size: 13px; color: var(--sub); text-decoration: none; padding: 6px 10px; }
.main { min-width: 0; padding: 44px clamp(20px, 4vw, 56px) 80px; }
.wrap { max-width: 1160px; margin: 0 auto; display: grid; gap: 22px; }
.head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.eyebrow { font-size: 13.5px; color: var(--sub); font-weight: 500; }
.head h1 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.04em; margin-top: 6px; max-width: 760px; }
.head h1 em { font-style: normal; color: var(--teal); }
.head .sub { color: var(--sub); font-size: 17px; margin-top: 10px; max-width: 700px; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--tint); }
.seg button { border: 0; background: none; height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--surface-hi); box-shadow: 0 1px 3px rgba(11,34,51,.12); color: var(--ink); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; min-width: 0; }
.card > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.card h2 { font-size: 20px; letter-spacing: -.025em; }
.card .note { font-size: 12.5px; color: var(--sub); }

/* the flow */
.flow { position: relative; padding: 30px 28px 28px; }
.flow .stages { position: relative; display: grid; grid-template-columns: 1.15fr repeat(3, 1fr) 1.3fr; gap: 12px; }
.flow .line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow .line path { fill: none; stroke: var(--rail); stroke-width: 2; }
.flow .line path.lit { stroke: var(--teal); stroke-width: 2; }
.flow .line circle { fill: var(--teal); }
.stage { position: relative; z-index: 1; display: grid; align-content: start; gap: 6px; padding: 0 14px 16px; border-radius: 16px; background: transparent; text-align: left; border: 0; color: inherit; transition: background .2s, box-shadow .2s; }
button.stage:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.stage .k { font-size: 13px; font-weight: 600; color: var(--sub); display: grid; justify-items: start; gap: 12px; margin-bottom: 2px; }
/* opaque chip on a card-coloured ring: the rail stops at the ring instead of showing through */
.stage .k i { position: relative; z-index: 2; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background-color: var(--card); background-image: linear-gradient(150deg, var(--chip-a), var(--chip-b)); color: var(--teal-ink); box-shadow: 0 0 0 6px var(--card), inset 0 0 0 1px var(--chip-ring), 0 6px 14px -8px rgba(0,104,107,.45); }
.stage .k i svg { width: 19px; height: 19px; stroke-width: 1.8; }
.stage .v { font: 600 44px/1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stage .d { font-size: 13.5px; color: var(--sub); }
.stage .warn { color: var(--amber); font-weight: 500; }
.srcs { display: grid; gap: 6px; margin-top: 4px; }
.srcs div { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
.srcs b { font-variant-numeric: tabular-nums; }
.deal { display: grid; gap: 8px; margin-top: 4px; }
.deal div { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 14px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.deal div b { font: 600 18px/1 var(--display); letter-spacing: -.02em; }
.bump { animation: bump .6s var(--ease); }
@keyframes bump { 40% { transform: scale(1.08); color: var(--teal); } }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; padding-top: 0; }
.cc { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px/1 var(--font); background: var(--surface-3); color: var(--ink-2); flex: none; letter-spacing: .02em; }
.list .tx { min-width: 0; flex: 1; }
.list .tx b { display: block; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .tx small { color: var(--sub); font-size: 13px; }
.list .tm { font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.list li.new { animation: newrow 1.2s var(--ease); }
@keyframes newrow { from { background: var(--teal-soft); } to { background: transparent; } }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.tag.t { background: var(--teal-soft); color: var(--teal-ink); }
.tag.a { background: var(--amber-soft); color: var(--amber); }
.prio .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--amber-soft); color: var(--amber); }
.prio .ic svg { width: 17px; height: 17px; }
.prio .ic.t { background: var(--teal-soft); color: var(--teal-ink); }
.big { font: 600 34px/1 var(--display); letter-spacing: -.04em; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.kv small { display: block; font-size: 12.5px; color: var(--sub); margin-bottom: 4px; }
.bars { display: block; width: 100%; height: auto; }

/* buyers table */
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--sub); padding: 0 12px 10px; }
.tbl td { padding: 14px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl td:first-child { border-radius: 12px 0 0 12px; } .tbl td:last-child { border-radius: 0 12px 12px 0; }
.tbl .co { display: flex; gap: 12px; align-items: center; }
.tbl .co b { font-weight: 600; }
.tbl .co small { display: block; color: var(--sub); font-size: 13px; }
.tbl button.rowbtn { all: unset; cursor: pointer; display: flex; gap: 12px; align-items: center; }
.tbl button.rowbtn:focus-visible { outline: 3px solid rgba(0,139,142,.45); outline-offset: 4px; border-radius: 8px; }

/* locked sections */
.locked { position: relative; overflow: hidden; }
.locked .ghost { filter: blur(6px); opacity: .55; pointer-events: none; user-select: none; }
.locked .over { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, var(--veil-a), var(--veil-b)); }
.locked .over > div { text-align: center; display: grid; gap: 12px; justify-items: center; max-width: 420px; padding: 28px; background: var(--glass-2); border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.locked .over h2 { font-size: 24px; }
.locked .over p { color: var(--sub); }
.ghostbox { height: 120px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.ghostgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }

/* toast */
.toast { position: fixed; top: 18px; right: 18px; z-index: 250; display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--glass-2); box-shadow: 0 20px 40px -18px rgba(11,34,51,.35), 0 0 0 1px var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); max-width: 340px; transform: translateY(-14px); opacity: 0; transition: transform .45s var(--ease), opacity .45s; }
.toast.on { transform: none; opacity: 1; }
.toast .ti { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--teal); color: #fff; flex: none; }
.toast .ti svg { width: 18px; height: 18px; }
.toast b { display: block; font-size: 14px; }
.toast small { color: var(--sub); font-size: 13px; }

/* sheets (lead form, buyer detail) */
.scrim { position: fixed; inset: 0; z-index: 260; background: rgba(5,16,26,.32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.scrim.on { opacity: 1; }
.sheet { position: fixed; z-index: 270; left: 50%; top: 50%; width: min(540px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; background: var(--surface); border-radius: 28px; box-shadow: 0 40px 100px -30px rgba(5,16,26,.5); padding: 30px 30px 26px; transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .45s var(--ease), opacity .35s; }
.sheet.on { transform: translate(-50%, -50%); opacity: 1; }
.sheet .x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--ink-2); font-size: 16px; display: grid; place-items: center; }
.sheet h2 { font-size: 28px; letter-spacing: -.035em; padding-right: 30px; }
.sheet .lead { color: var(--sub); font-size: 15.5px; margin-top: 8px; }
.sheet form { display: grid; gap: 14px; margin-top: 22px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--sub); }
.consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--teal); flex: none; }
.sheet .acts { display: grid; gap: 10px; margin-top: 4px; }
.sheet .fine { font-size: 12px; color: var(--sub); text-align: center; }
.sheet .icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-ink); margin-bottom: 16px; }
.sheet .icon svg { width: 26px; height: 26px; }
.done { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 18px 0 4px; }
.done svg { width: 72px; height: 72px; }
.done circle { fill: none; stroke: var(--teal); stroke-width: 3; stroke-dasharray: 202; stroke-dashoffset: 202; animation: draw .7s var(--ease) forwards; }
.done path { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s .55s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.drawer { position: fixed; z-index: 270; top: 12px; right: 12px; bottom: 12px; width: min(520px, calc(100vw - 24px)); background: var(--surface); border-radius: 26px; box-shadow: 0 40px 100px -30px rgba(5,16,26,.5); overflow: auto; padding: 28px; transform: translateX(30px); opacity: 0; transition: transform .45s var(--ease), opacity .35s; }
.drawer.on { transform: none; opacity: 1; }
.drawer h2 { font-size: 26px; letter-spacing: -.035em; padding-right: 40px; }
.drawer .x { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--ink-2); font-size: 16px; }
.msgs { display: grid; gap: 10px; margin-top: 8px; }
.m { max-width: 88%; padding: 11px 14px; border-radius: 18px; background: var(--surface-2); font-size: 14.5px; }
.m.out { justify-self: end; background: var(--teal-soft); }
.m small { display: block; font-size: 12px; color: var(--sub); margin-bottom: 3px; }
.m .tr { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; }
.tl { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.tl li { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; padding: 8px 0; align-items: start; font-size: 14.5px; }
.tl li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.tl li.f::before { background: var(--surface); border: 2px solid #A0A8AF; box-shadow: none; }
.tl small { color: var(--sub); font-size: 13px; }

/* mobile */
.tabbar { display: none; }
@media (max-width: 1100px) {
  .grid3 { grid-template-columns: 1fr 1fr; }
  .flow .stages { grid-template-columns: 1fr 1fr; }
  .flow .line { display: none; }
}
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login .rside { display: none; }
  .login .lside { padding: 28px 20px; }
  .login .lform { padding: 28px 0; }
  .login h1 { font-size: 32px; }
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .main { padding: 84px 16px 110px; }
  .grid3 { grid-template-columns: 1fr; }
  .flow .stages { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .stage[data-i="0"], .stage[data-i="4"] { grid-column: span 2; }
  .stage { padding: 0 6px 6px; }
  .stage .v { font-size: 38px; }
  .ribbon { display: none; }
  .mhead .pill { margin-left: 8px; }
  .card { padding: 22px 18px; border-radius: 20px; }
  .tabbar { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 200; justify-content: space-around; padding: 6px; border-radius: 22px; background: var(--glass-2); box-shadow: 0 10px 30px -10px rgba(11,34,51,.3), 0 0 0 1px var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; font-size: 10.5px; font-weight: 500; color: var(--sub); text-decoration: none; padding: 6px 4px; min-width: 56px; border-radius: 14px; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--teal-ink); }
  .mhead { display: flex !important; }
  .show .cap { min-height: 120px; }
  .show .viz { height: 52vh; }
  .bub { max-width: 82%; font-size: 15px; }
  .bub.in { left: 0; top: 2%; } .bub.ai { right: 0; top: 40%; }
  .person, .mini { width: 78%; }
  .mini { left: 0; top: 4%; } .person { right: 0; top: 46%; }
  .track { left: 0; right: 0; }
  .step { width: 100px; } .step b { font-size: 16px; } .step small { font-size: 12.5px; }
  .step .dot { width: 50px; height: 50px; }
  .track .rail { top: 24px; }
  .ghostgrid { grid-template-columns: 1fr 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .tbl .hide-sm { display: none; }
}
.mhead { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 190; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.mhead img { width: 104px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
}

/* live mode */
.pill.live { background: var(--ok-soft); color: var(--ok-ink); display: inline-flex; align-items: center; gap: 6px; }
.pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1FA25A; box-shadow: 0 0 0 3px rgba(31,162,90,.18); }
.livecard { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--ok-soft); border: 1px solid rgba(31,162,90,.25); }
.livecard b { font-size: 14.5px; display: block; }
.livecard p { font-size: 13px; color: var(--sub); }
.livecard > div { flex: 1; min-width: 0; }
.livecard.warn { background: var(--amber-soft); border-color: rgba(181,84,28,.3); display: block; }
.dotlive { width: 10px; height: 10px; border-radius: 50%; background: #1FA25A; box-shadow: 0 0 0 4px rgba(31,162,90,.18); flex: none; }
.livebox p + p { margin-top: 4px; }
body.is-live .ribbon { display: none; }

/* ===== v3: theme, login photo, controls, support, connections, entry ===== */
.logo-w { display: none; }
:root[data-theme="dark"] .logo-c { display: none; }
:root[data-theme="dark"] .logo-w { display: block; }
:root[data-theme="dark"] .login .lside .logo.logo-w { display: block; }
:root[data-theme="dark"] .side .cta.done, :root[data-theme="dark"] .livebox { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .tbl td { border-top-color: var(--line); }
:root[data-theme="dark"] .scrim { background: rgba(0,0,0,.5); }
:root[data-theme="dark"] .field input::placeholder { color: #6B7A86; }
body, .card, .side, .login .lside { transition: background-color .35s var(--ease), color .35s var(--ease); }

.ctrlbar { display: inline-flex; align-items: center; gap: 8px; }
.side .ctrlbar { margin: 10px 8px 0; }
.seg.sm button { height: 28px; padding: 0 10px; font-size: 12.5px; letter-spacing: .02em; }
.iconbtn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--tint); color: var(--ink-2); display: grid; place-items: center; }
.iconbtn:hover { color: var(--ink); }
.iconbtn svg { width: 18px; height: 18px; }
.mhead .ctrlbar.compact .seg.sm button { padding: 0 8px; }

.login .ltop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login .lfoot { margin-top: 8px; }
.login .rside { padding: 0; justify-content: flex-end; }
.rphoto, .rphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rphoto img { filter: saturate(.55) contrast(1.05) brightness(.62); transform: scale(1.04); animation: kb 22s var(--ease) forwards; }
@keyframes kb { to { transform: scale(1.12) translate(-1%, -1%); } }
.rside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,16,26,.35) 0%, rgba(5,16,26,.15) 35%, rgba(5,16,26,.88) 100%), linear-gradient(90deg, rgba(5,16,26,.55), rgba(5,16,26,0) 60%); }
.rtext { position: relative; z-index: 1; padding: clamp(40px, 6vw, 88px); }
.rtext h2 { font-size: clamp(42px, 4.8vw, 72px); letter-spacing: -.045em; line-height: 1.0; color: #fff; }
.rtext h2 span { color: var(--teal-bright); }
.rtext p { color: rgba(255,255,255,.72); font-size: 17.5px; max-width: 520px; margin-top: 18px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chips-row span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 13.5px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chips-row svg { width: 16px; height: 16px; color: var(--teal-bright); }
.ribbon { display: none !important; }

/* support widget */
.support { position: fixed; right: 18px; bottom: 18px; z-index: 280; display: grid; justify-items: end; gap: 10px; }
.sup-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: #1FA25A; color: #fff; font-weight: 600; font-size: 14.5px; box-shadow: 0 14px 30px -12px rgba(31,162,90,.7); }
.sup-btn svg { width: 22px; height: 22px; }
.sup-btn:hover { filter: brightness(1.06); }
.sup-card { width: 300px; padding: 18px; border-radius: 22px; background: var(--glass-2); color: var(--ink); box-shadow: 0 30px 60px -24px rgba(5,16,26,.45), 0 0 0 1px var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: grid; gap: 8px; }
.sup-card b { font: 600 17px/1.25 var(--display); letter-spacing: -.02em; }
.sup-card p { font-size: 13.5px; color: var(--sub); }
.sup-card .sup-num { font-size: 12.5px; text-align: center; margin-top: -4px; font-variant-numeric: tabular-nums; }
.btn.wa { background: #1FA25A; color: #fff; }
body.showing .support, .entry ~ .support { display: none; }

/* connections (3D) */
.cx { overflow: hidden; }
.cx > header { align-items: flex-start; }
.cx-stage { position: relative; perspective: 1500px; perspective-origin: 50% 0%; margin: 0 -8px -8px; height: clamp(300px, 30vw, 390px); }
.cx-plane { position: absolute; left: 5%; right: 5%; top: -16%; aspect-ratio: 1000 / 540; transform: rotateX(46deg); transform-origin: 50% 50%; transform-style: preserve-3d; border-radius: 28px;
  background: radial-gradient(60% 70% at 66% 55%, rgba(0,139,142,.10), transparent 70%), repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 54px), repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 54px); }
.cx-plane > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cx-edge { fill: none; stroke-width: 3; stroke-linecap: round; }
.cx-pad { opacity: .14; }
.cx-nodes { position: absolute; inset: 0; transform-style: preserve-3d; }
.cx-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%) rotateX(-46deg); transform-origin: 50% 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); box-shadow: 0 18px 36px -18px rgba(5,16,26,.45); text-align: left; white-space: nowrap; backface-visibility: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.cx-node:hover, .cx-node:focus-visible { transform: translate(-50%, -100%) rotateX(-46deg) translateY(-4px); box-shadow: 0 26px 44px -20px rgba(0,139,142,.55); }
.cx-node::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 2px; height: 10px; background: currentColor; opacity: .25; }
.cx-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-ink); flex: none; }
.cx-ic svg { width: 18px; height: 18px; }
.cx-txt { display: grid; gap: 1px; }
.cx-txt b { font-size: 13.5px; font-weight: 600; }
.cx-txt small { font-size: 12px; color: var(--sub); }
.cx-txt .cx-sub { font-size: 11.5px; opacity: .85; }
.cx-node[data-st="warn"] .cx-ic { background: var(--amber-soft); color: var(--amber); }
.cx-node[data-st="error"] .cx-ic { background: rgba(229,72,77,.14); color: #E5484D; }
.cx-node[data-st="off"] .cx-ic, .cx-node[data-st="unknown"] .cx-ic { background: var(--surface-3); color: var(--sub); }
.cx-node.hub { padding: 12px 16px 12px 12px; background: linear-gradient(135deg, #0B2233, #0E3A44); color: #fff; border-color: rgba(52,198,195,.35); box-shadow: 0 22px 50px -18px rgba(0,139,142,.65); }
.cx-node.hub .cx-ic { width: 44px; height: 44px; background: rgba(255,255,255,.08); }
.cx-node.hub small { color: #9FECE9; }
.cx-logo { width: 32px; height: auto; }
.cx-node.hub .cx-ic::before { content: ""; position: absolute; width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 0 rgba(52,198,195,.5); animation: hubpulse 2.8s ease-out infinite; }
@keyframes hubpulse { to { box-shadow: 0 0 0 16px rgba(52,198,195,0); } }
@media (max-width: 860px) {
  .cx-stage { height: 175px; perspective: 900px; margin: 0 -12px -6px; }
  .cx-plane { left: 0; right: 0; top: -6%; transform: rotateX(42deg); }
  .cx-node { padding: 7px; gap: 0; }
  .cx-node .cx-txt { display: none; }
  .cx-node.hub .cx-txt { display: grid; }
  .cx > header .note:last-child { display: none; }
}

/* misc */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 4px; }
.kpi { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); display: grid; gap: 4px; align-content: start; }
.kpi small { font-size: 12.5px; color: var(--sub); }
.kpi .big { font-size: 28px; }
.h3 { font-size: 15.5px; margin: 20px 0 8px; }
.h3 span { color: var(--sub); font-weight: 500; font-size: 13px; }
.kvt { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.kvt th { text-align: left; font-weight: 500; color: var(--sub); padding: 9px 12px 9px 0; vertical-align: top; width: 42%; border-top: 1px solid var(--line); }
.kvt td { padding: 9px 0; border-top: 1px solid var(--line); word-break: break-word; }
.muted-row { color: var(--sub); }
.tx.bare { all: unset; cursor: pointer; flex: 1; min-width: 0; }
.tx.bare:focus-visible { outline: 3px solid rgba(0,139,142,.45); outline-offset: 3px; border-radius: 8px; }
.list .tx b { color: var(--ink); }
.team .list li { padding: 10px 0; }
.shimmer { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: sh 1.3s linear infinite; }
@keyframes sh { to { background-position: -200% 0; } }
.card header .note { text-align: right; }

/* sign-in moment */
.entry { position: fixed; inset: 0; z-index: 400; background: radial-gradient(80% 70% at 50% 45%, #0E2633 0%, #060E14 70%); color: #fff; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.entry-field { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.entry-chip { position: absolute; left: -32px; top: -15px; width: 64px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font: 600 12px/1 var(--font); letter-spacing: .06em; backdrop-filter: blur(6px); }
.entry-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 8px var(--teal-bright); }
.entry-scan { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: linear-gradient(180deg, transparent, var(--teal-bright), transparent); box-shadow: 0 0 24px 6px rgba(52,198,195,.35); opacity: 0; }
.entry-box { position: absolute; left: 50%; top: 50%; width: 300px; height: 120px; border-radius: 8px; transform: translate(-50%, 60vh); opacity: 0; overflow: hidden; display: grid; place-items: center; gap: 4px;
  background: repeating-linear-gradient(90deg, #0F3640 0 10px, #0C2C35 10px 14px); border: 1px solid rgba(52,198,195,.45); box-shadow: 0 30px 80px -20px rgba(0,139,142,.6), inset 0 0 0 4px rgba(0,0,0,.18); }
.entry-box img { width: 120px; position: relative; z-index: 2; }
.entry-box em { font-style: normal; font: 600 11.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #9FECE9; position: relative; z-index: 2; }
.entry-door { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; background: repeating-linear-gradient(90deg, #12404B 0 9px, #0D303A 9px 13px); transform: scaleX(0); }
.entry-door.l { left: 0; transform-origin: 0 50%; } .entry-door.r { right: 0; transform-origin: 100% 50%; }
.entry-cap { position: absolute; bottom: 12vh; left: 0; right: 0; text-align: center; font: 500 14px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
@media (max-width: 860px) {
  .support { right: 14px; bottom: 92px; }
  .sup-btn { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .sup-btn span { display: none; }
  .sup-card { width: min(300px, calc(100vw - 28px)); }
  body:not(.is-live) .support { bottom: 18px; }
  body.is-live .support, body:has(.tabbar) .support { bottom: 92px; }
}

/* ---------- v4: grouped nav, auto refresh, long names, new sections ---------- */
.ngroup { margin: 14px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); opacity: .8; }
.side nav .ngroup:first-child { margin-top: 0; }
.side { overflow-y: auto; }
.autoline { display: flex; align-items: center; gap: 8px; color: var(--ink-2) !important; font-weight: 500; }
.dotlive { width: 8px; height: 8px; border-radius: 50%; background: #1FA25A; box-shadow: 0 0 0 0 rgba(31,162,90,.5); animation: livepulse 2.4s ease-out infinite; flex: none; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(31,162,90,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(31,162,90,0); } }
.menusheet { display: grid; gap: 2px; margin-top: 14px; }
.menusheet .ngroup { margin-left: 10px; }

/* long, non-Latin or odd names never break a box */
.list .tx b, .list .tx small, .tbl .co b, .tbl .co small, .srow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.list .tx { overflow: hidden; }
.list .tx.bare { display: block; overflow: hidden; }
.tbl .co, .tbl .co > span { min-width: 0; max-width: 100%; }
.tbl button.rowbtn { max-width: min(340px, 52vw); }
.tbl .co > span { overflow: hidden; }
.tbl td.clip { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="auto"], .list .tx b { unicode-bidi: plaintext; }

/* team card */
.facts { margin: 0; display: grid; }
.facts > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 13.5px; color: var(--sub); }
.facts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts dd small { display: block; font-weight: 400; font-size: 12px; color: var(--sub); }
.facts dd .muted-row { font-weight: 500; }

/* deal stage links */
.deal .dl { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 14px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: inherit; text-decoration: none; transition: background .15s, box-shadow .15s; }
.deal .dl b { font: 600 18px/1 var(--display); letter-spacing: -.02em; }
.deal .dl:hover { box-shadow: inset 0 0 0 1px var(--line); background: var(--hover); }
.deal .dl.muted-row { color: var(--sub); }

/* export news */
.news > header { align-items: flex-start; flex-wrap: wrap; }
.news .ctrlbar { display: flex; gap: 8px; flex-wrap: wrap; }
.nlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; counter-reset: n; }
.nlist li { counter-increment: n; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; row-gap: 4px; padding: 13px 0; border-top: 1px solid var(--line); min-width: 0; }
.nlist li::before { content: counter(n); grid-row: span 2; font: 600 15px/1.35 var(--display); color: var(--sub); font-variant-numeric: tabular-nums; }
.nlist li.lead { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
.nlist li.lead::before { color: var(--teal); }
.nlist li.lead b { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.nlist a { color: var(--ink); text-decoration: none; min-width: 0; }
.nlist a b { font-weight: 600; font-size: 14.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nlist a:hover b { color: var(--teal-ink); }
.nmeta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--sub); min-width: 0; }
.nmeta > span:first-child { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nfoot { margin-top: 14px; }

/* samples / meetings */
.slist { list-style: none; margin: 0; padding: 0; display: grid; }
.slist > li { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--line); min-width: 0; }
.slist > li:first-child { border-top: 0; padding-top: 0; }
.srow { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; }
.srow > b, .srow > button { min-width: 0; flex: 1; }
.srow b { font-weight: 600; font-size: 15.5px; }
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 2px; }
.steps4 span { display: grid; gap: 6px; font-size: 12px; color: var(--sub); }
.steps4 i { height: 5px; border-radius: 3px; background: var(--surface-3); }
.steps4 .on { color: var(--ink-2); font-weight: 500; }
.steps4 .on i { background: var(--teal); }

/* empty state */
.emptystate { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 26px 12px; }
.emptystate .avatar { background: var(--surface-2); color: var(--sub); width: 52px; height: 52px; }
.emptystate .avatar svg { width: 24px; height: 24px; }
.emptystate b { font: 600 17px/1.3 var(--display); letter-spacing: -.02em; }
.emptystate p { color: var(--sub); max-width: 460px; font-size: 14px; }

/* websites & SEO */
.site > header { align-items: flex-start; }
.site > header h2 + .note { margin-top: 4px; text-align: left; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 10px; }
.chk { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.chk i { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 12px/1 var(--font); font-style: normal; }
.chk.ok i { background: var(--ok-soft); color: var(--ok-ink); }
.chk.no i { background: var(--amber-soft); color: var(--amber); }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cbox { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 18px; border-radius: 16px; border: 1px dashed var(--field); background: var(--surface-2); }
.cbox b { font: 600 15.5px/1.3 var(--display); }
.cbox p { font-size: 13.5px; color: var(--sub); }

@media (max-width: 860px) {
  .nlist { grid-template-columns: 1fr; }
  .cgrid { grid-template-columns: 1fr; }
  .steps4 span { font-size: 0; }
  .tbl button.rowbtn { max-width: 58vw; }
}
@media (prefers-reduced-motion: reduce) { .dotlive { animation: none; } }
.wrap > .kpis .kpi { background: var(--card); box-shadow: var(--shadow); }
.livebox .autoline { justify-content: center; text-align: left; }
.side .nl { height: 38px; }
.news > header .note { text-align: left; }

/* ---------- v5: account footer, AI link, add/edit forms ---------- */
.sidefoot { margin-top: auto; display: grid; gap: 10px; padding-top: 14px; }
.sidefoot .ctrlbar { margin: 0 8px; }
.side .sidefoot .exit { margin-top: 0; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; font-size: 13px; }
.side .sidefoot .exit:hover { color: var(--ink); }
.acct { display: grid; gap: 2px; margin: 0 8px; padding: 12px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.acct b { font: 600 14.5px/1.3 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct small { font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpick select { width: 100%; height: 34px; border-radius: 9px; border: 1px solid var(--field); background: var(--surface-2); padding: 0 8px; font-weight: 600; font-size: 14px; }
.nsep { display: block; height: 1px; background: var(--line); margin: 12px 10px 8px; }
.menusheet-foot { display: grid; gap: 10px; margin-top: 16px; }
.menusheet-foot .acct { margin: 0; box-shadow: none; background: var(--surface-2); }
.head > .btn { align-self: flex-end; }
.btn svg + * { margin: 0; }
.iconbtn.sm { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.iconbtn.sm svg { width: 15px; height: 15px; }
.srow .tag { flex: none; }
.tform { display: grid; gap: 14px; margin-top: 18px; }
.tform textarea { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--field); background: var(--surface); font: inherit; font-size: 15px; resize: vertical; width: 100%; }
.tform textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,139,142,.14); }
.tform .err { font-size: 13px; color: var(--amber); margin: 0; }
.tform .err:empty { display: none; }
.tform .fine { font-size: 12.5px; color: var(--sub); }
.pick { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; max-height: 280px; overflow: auto; }
.pick:empty { display: none; }
.pick button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border-radius: 10px; min-width: 0; }
.pick button:hover, .pick button:focus-visible { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.pick button > span:last-child { min-width: 0; display: grid; }
.pick b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick small { font-size: 12.5px; color: var(--sub); }
.pick .note { padding: 8px 10px; }

/* ---------- v6: ads selection, creatives, admin assignment ---------- */
.adpick { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-end; }
.adpick select { height: 38px; border-radius: 10px; border: 1px solid var(--field); background: var(--surface); padding: 0 10px; font-weight: 500; font-size: 14px; max-width: 320px; }
.scope-note { margin-top: -8px; }
.crgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cr { border-radius: 16px; background: var(--surface-2); overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.crimg { position: relative; aspect-ratio: 1 / 1; background: var(--surface-3); display: grid; place-items: center; overflow: hidden; }
.crimg img { width: 100%; height: 100%; object-fit: cover; }
.crimg span svg { width: 34px; height: 34px; color: var(--sub); }
.crv { position: absolute; left: 10px; top: 10px; font: 600 11px/1 var(--font); font-style: normal; padding: 5px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; }
.crbody { padding: 12px 14px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.crbody .srow b { font-size: 14.5px; }
.crtext { font-size: 13.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.acclist label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); cursor: pointer; min-width: 0; }
.acclist input { accent-color: var(--teal); width: 18px; height: 18px; flex: none; }
.acclist span { display: grid; min-width: 0; }
.acclist b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acclist small { font-size: 12px; color: var(--sub); }
.admeta .err { color: var(--amber); font-size: 13px; margin-top: 8px; }
.admeta .err:empty { display: none; }
@media (max-width: 860px) { .adpick { width: 100%; } .adpick select { flex: 1; max-width: none; } .crgrid { grid-template-columns: 1fr 1fr; } }

/* ---------- v7: sound toggle in the demo show ---------- */
.show .stopr { display: flex; gap: 8px; align-items: center; }
.show .snd { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; }
.show .snd:hover { background: rgba(255,255,255,.18); }
.show .snd svg { width: 18px; height: 18px; }
.show .snd[aria-pressed="false"] { color: rgba(255,255,255,.55); }

/* ---------- v7: picker, CRM, meetings, devices, news images ---------- */
.picker { position: relative; min-width: 0; }
.pk-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; padding: 0 12px 0 14px; border-radius: 12px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; text-align: left; transition: border-color .15s, box-shadow .15s; }
.pk-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-btn svg { width: 16px; height: 16px; flex: none; color: var(--sub); transition: transform .2s var(--ease); }
.pk-btn[aria-expanded="true"] { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,139,142,.12); }
.pk-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.pk-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); min-width: 220px; max-height: 300px; overflow: auto; list-style: none; margin: 0; padding: 6px; border-radius: 14px; background: var(--glass-2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(11,34,51,.35); animation: pkin .16s var(--ease); }
.picker.up .pk-list { top: auto; bottom: calc(100% + 6px); }
@keyframes pkin { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.pk-list button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; padding: 9px 10px; border-radius: 10px; font-size: 14px; color: var(--ink); }
.pk-list button span { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-list button small { grid-column: 1; font-size: 12px; color: var(--sub); }
.pk-list button svg { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--teal); }
.pk-list button:hover, .pk-list button:focus-visible { background: var(--hover); }
.pk-list button[aria-selected="true"] span { color: var(--teal-ink); font-weight: 600; }
.acct .picker { margin: -2px -4px 2px; }
.acct .pk-btn { height: 36px; border: 0; background: var(--surface-2); }
.adpick { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-end; }
.adpick .picker { width: 300px; max-width: 100%; }

.num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.prio .tx b.num { font-size: 14.5px; }
.manual { color: var(--teal); margin-left: 6px; font-size: 10px; vertical-align: middle; }
.crm-prio { border: 1px solid rgba(0,139,142,.22); }
.crm-facts { margin-top: 12px; }
.crm-edit { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--line); }
.crm-edit .acts { display: flex; gap: 12px; align-items: center; }
.custfield .cf-top { display: flex; justify-content: space-between; align-items: baseline; }
.custfield .link { font-size: 13px; }

.devgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.dev { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); transition: background .15s, box-shadow .15s, transform .15s var(--ease); min-width: 0; }
.dev:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.dev:active { transform: scale(.99); }
.dev:focus-visible { outline: 3px solid rgba(0,139,142,.45); outline-offset: 2px; }
.dev-ic { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.dev-ic svg { width: 22px; height: 22px; }
.dev-ic.on::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #1FA25A; box-shadow: 0 0 0 2.5px var(--surface-2); }
.dev-ic .star { position: absolute; left: -3px; top: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #F4B43A; color: #fff; box-shadow: 0 0 0 2.5px var(--surface-2); }
.dev-ic .star svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.dev-ic.big { width: 64px; height: 64px; }
.dev-ic.big svg { width: 28px; height: 28px; }
.dev-tx { display: grid; min-width: 0; }
.dev-tx b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-tx small { font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-tx .dev-meta { color: var(--ink-2); }
.dev-n { min-width: 30px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font: 600 12.5px/1 var(--font); background: var(--surface); color: var(--sub); }
.devhead { display: flex; gap: 14px; align-items: center; }
.wkbars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; height: 90px; align-items: end; margin-top: 8px; }
.wkbars span { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 4px; }
.wkbars i { align-self: end; display: block; min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--teal); opacity: .85; }
.wkbars small { font-size: 10.5px; color: var(--sub); text-align: center; height: 14px; }
.devhist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.devhist li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.devhist li:first-child { border-top: 0; }
.devhist span { color: var(--sub); font-variant-numeric: tabular-nums; }

.nlist li.has-img { grid-template-columns: 26px 1fr 84px; }
.nlist li.has-img .nimg { grid-column: 3; grid-row: 1 / span 2; width: 84px; height: 60px; object-fit: cover; border-radius: 10px; background: var(--surface-3); }
.nlist li.lead.has-img { grid-template-columns: 26px 1fr 220px; column-gap: 18px; }
.nlist li.lead.has-img .nimg { width: 220px; height: 128px; border-radius: 14px; }
@media (max-width: 860px) {
  .adpick .picker { width: 100%; }
  .devgrid { grid-template-columns: 1fr; }
  .nlist li.lead.has-img { grid-template-columns: 26px 1fr; }
  .nlist li.lead.has-img .nimg { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 170px; margin-bottom: 8px; }
}
.acct .pk-list { min-width: 0; right: 0; }
.crm-prio > header { align-items: center; }

/* ---------- v8: ads screen ---------- */
.adhero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 85% 0%, #0f5e63 0%, #0B2233 55%, #08161f 100%); box-shadow: 0 24px 60px -30px rgba(0,60,70,.7); }
.adhero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(52,198,195,.28), transparent 60%); animation: adglow 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes adglow { to { transform: translate(-120px, 80px) scale(1.15); } }
.adh-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.livebadge { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--display); padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.livebadge i { width: 9px; height: 9px; border-radius: 50%; background: #3BE08A; box-shadow: 0 0 0 0 rgba(59,224,138,.6); animation: livepulse 1.8s ease-out infinite; }
.adh-range { font-size: 13px; color: rgba(255,255,255,.65); }
.adh-flow { position: relative; display: grid; grid-template-columns: 1fr 90px 1fr 90px 1fr; align-items: center; gap: 6px; margin: 26px 0 18px; }
.adh-step { display: grid; justify-items: center; text-align: center; gap: 6px; }
.adh-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.adh-ic svg { width: 22px; height: 22px; color: #9FF0EC; }
.adh-step b { font: 700 clamp(26px, 3.4vw, 40px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.adh-step small { font-size: 13px; color: rgba(255,255,255,.7); }
.adh-pipe { position: relative; height: 2px; background: linear-gradient(90deg, rgba(159,240,236,.15), rgba(159,240,236,.5), rgba(159,240,236,.15)); border-radius: 2px; }
.adh-pipe i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #9FF0EC; box-shadow: 0 0 12px #34C6C3; animation: flowdot 2.4s linear infinite; opacity: 0; }
.adh-pipe i:nth-child(2) { animation-delay: .8s; } .adh-pipe i:nth-child(3) { animation-delay: 1.6s; }
@keyframes flowdot { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.adh-foot { position: relative; display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,.72); }
.adh-foot b { color: #fff; font-weight: 600; margin-left: 4px; }
.adh-strip { position: relative; margin: 22px -28px -26px; padding: 14px 0 16px; overflow: hidden; background: rgba(0,0,0,.18); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.adh-track { display: flex; gap: 12px; width: max-content; animation: adstrip 46s linear infinite; }
.adh-strip:hover .adh-track { animation-play-state: paused; }
@keyframes adstrip { to { transform: translateX(-50%); } }
.adh-tile { position: relative; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; flex: none; background: rgba(255,255,255,.08); }
.adh-tile img { width: 100%; height: 100%; object-fit: cover; }
.adh-tile i { position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #3BE08A; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.adtabs { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.seg .cnt { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--tint); font-size: 11.5px; margin-left: 4px; }
.adgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.adc { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s; min-width: 0; }
.adc:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(11,34,51,.06), 0 22px 40px -22px rgba(11,34,51,.45); }
.adc.is-hidden { opacity: .55; }
.adc-img { position: relative; aspect-ratio: 1 / 1; background: var(--surface-3); display: grid; place-items: center; overflow: hidden; }
.adc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.adc:hover .adc-img img { transform: scale(1.04); }
.adc-img .noimg svg { width: 34px; height: 34px; color: var(--sub); }
.adc-st { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 600 11.5px/1 var(--font); color: #fff; background: rgba(8,22,31,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.adc.on .adc-st i { width: 7px; height: 7px; border-radius: 50%; background: #3BE08A; animation: livepulse 1.8s ease-out infinite; }
.adc-hid { position: absolute; right: 10px; top: 10px; display: inline-flex; gap: 5px; align-items: center; padding: 5px 9px; border-radius: 999px; font: 600 11px/1 var(--font); background: rgba(181,84,28,.9); color: #fff; }
.adc-hid svg { width: 13px; height: 13px; }
.adc-body { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.adc-body b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adc-body p { font-size: 13px; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.adc-stats span { display: grid; font: 600 14.5px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.adc-stats small { font: 500 11px/1.3 var(--font); color: var(--sub); }
.adc-vis { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; justify-self: start; }
.adc-vis svg { width: 15px; height: 15px; }
.addetail > summary { cursor: pointer; font: 600 15px/1.3 var(--display); list-style: none; }
.addetail > summary::after { content: "▾"; margin-left: 8px; color: var(--sub); }
.addetail[open] > summary { margin-bottom: 16px; }

/* ---------- v8: CRM drag-to-create, quick actions, sessions, demo CTA ---------- */
.tbl tr[data-row] { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.tbl tr.dragging td { background: var(--teal-soft); }
.dragghost { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font: 600 13.5px/1 var(--font); box-shadow: 0 16px 34px -12px rgba(11,34,51,.5); max-width: 260px; }
.dragghost span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dragghost svg { width: 16px; height: 16px; flex: none; }
.dropdock { position: fixed; z-index: 390; right: 22px; top: 50%; transform: translate(30px, -50%); opacity: 0; transition: transform .25s var(--ease), opacity .25s; display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: var(--glass-2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 0 0 1px var(--line), 0 24px 50px -20px rgba(11,34,51,.45); width: 200px; }
.dropdock.on { transform: translate(0, -50%); opacity: 1; }
.dropdock p { font-size: 12.5px; color: var(--sub); margin: 0 4px 2px; }
.dz { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding: 12px; border-radius: 16px; border: 1.5px dashed var(--field); transition: background .15s, border-color .15s, transform .15s; }
.dz svg { grid-row: span 2; width: 22px; height: 22px; color: var(--teal-ink); }
.dz b { font: 600 14.5px/1.2 var(--display); } .dz small { font-size: 12px; color: var(--sub); }
.dz.over { background: var(--teal-soft); border-color: var(--teal); transform: scale(1.03); }
.quick { display: grid; gap: 8px; margin: 14px 0 4px; }
.quick > div { display: flex; gap: 8px; flex-wrap: wrap; }
.quick .btn svg { width: 16px; height: 16px; }
.sesslist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.sesslist li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.sesslist li span { display: grid; } .sesslist small { font-size: 12px; color: var(--sub); }
.btn.danger { color: var(--amber); border-color: rgba(181,84,28,.35); }
.btn.danger[data-sure="1"] { background: var(--amber); color: #fff; border-color: transparent; }
.sidefoot .democta { margin: 0 8px; justify-content: center; }
.sidefoot .democta svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .adh-flow { grid-template-columns: 1fr 34px 1fr 34px 1fr; }
  .adh-strip { margin: 18px -18px -22px; }
  .dropdock { right: 50%; top: auto; bottom: 96px; transform: translate(50%, 30px); width: calc(100% - 32px); max-width: 420px; grid-template-columns: repeat(3, 1fr); }
  .dropdock.on { transform: translate(50%, 0); }
  .dropdock p { grid-column: 1 / -1; }
  .dz { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px 6px; }
  .dz svg { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .adh-track, .adh-pipe i, .adhero::before, .livebadge i, .adc.on .adc-st i { animation: none; } }
.adc-st { left: auto; right: 10px; bottom: auto; top: 10px; }
.adc-hid { right: auto; left: 10px; top: auto; bottom: 10px; }

/* ---------- v9: branded loader ---------- */
.aeload { display: grid; justify-items: center; gap: 16px; padding: 46px 12px 40px; }
.aeload.sm { padding: 18px 12px 14px; gap: 10px; }
.ael-rail { display: flex; align-items: center; gap: 0; }
.ael-node { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background-color: var(--card); background-image: linear-gradient(150deg, var(--chip-a), var(--chip-b)); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--chip-ring); animation: aelnode 2.4s ease-in-out infinite; }
.ael-node:nth-child(3) { animation-delay: .8s; } .ael-node:nth-child(5) { animation-delay: 1.6s; }
.ael-node svg { width: 20px; height: 20px; }
.ael-node.box { border-radius: 10px; }
.aeload.sm .ael-node { width: 34px; height: 34px; border-radius: 11px; } .aeload.sm .ael-node svg { width: 16px; height: 16px; }
.ael-line { position: relative; width: 74px; height: 2px; background: var(--rail); overflow: visible; }
.aeload.sm .ael-line { width: 50px; }
.ael-line i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgba(0,139,142,.6); opacity: 0; animation: aeldot 1.6s linear infinite; }
.ael-line i:nth-child(2) { animation-delay: .53s; } .ael-line i:nth-child(3) { animation-delay: 1.06s; }
@keyframes aeldot { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes aelnode { 0%, 100% { transform: none; box-shadow: inset 0 0 0 1px var(--chip-ring); } 50% { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--chip-ring), 0 10px 18px -10px rgba(0,104,107,.55); } }
.aeload p { font-size: 14px; color: var(--sub); margin: 0; }
@media (prefers-reduced-motion: reduce) { .ael-node, .ael-line i { animation: none; } .ael-line i:first-child { opacity: 1; left: 45%; } }

/* ---------- v10: trackers, order totals, meetings, chart tokens, sites, reports, news tiles, support hint ---------- */
:root { --c1: #00999A; --c2: #4C5FD5; --gold: #B98A4E; --gold-soft: rgba(185,138,78,.14); }
:root[data-theme="dark"] { --c1: #19A7A9; --c2: #6577E0; --gold: #D9B07A; --gold-soft: rgba(217,176,122,.14); }

/* icon KPIs */
.kpi.kpi-ic { grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.kpi.kpi-ic .kic { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-ink); }
.kpi.kpi-ic .kic svg { width: 19px; height: 19px; }
.kpi.kpi-ic > small:last-child { grid-column: 1 / -1; }
.kpi small svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; color: var(--teal); }

/* shipment tracker (samples & orders) */
.shipcard.is-canceled { opacity: .62; }
.amount { font: 600 15px/1 var(--display); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ship { position: relative; margin: 10px 0 4px; padding-top: 2px; }
.ship ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); position: relative; z-index: 1; }
.ship li { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.ship li small { font-size: 11.5px; color: var(--sub); line-height: 1.25; }
.ship-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--sub); box-shadow: 0 0 0 4px var(--card), inset 0 0 0 1px var(--line); transition: background .3s, color .3s; }
.ship-ic svg { width: 17px; height: 17px; }
.ship li.done .ship-ic { background: var(--teal-soft); color: var(--teal-ink); box-shadow: 0 0 0 4px var(--card), inset 0 0 0 1px rgba(0,139,142,.25); }
.ship li.now .ship-ic { background: var(--teal); color: #fff; box-shadow: 0 0 0 4px var(--card), 0 0 0 7px rgba(0,153,154,.18); }
.ship li.now small, .ship li.done small { color: var(--ink-2); }
.ship li.now small { font-weight: 600; }
.ship-line { position: absolute; left: calc(50% / var(--n, 4)); right: calc(50% / var(--n, 4)); top: 18px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--surface-3) 0 6px, transparent 6px 10px); }
.ship-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct); border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--teal-bright)); }
.ship-veh { position: absolute; z-index: 2; top: -13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--teal); box-shadow: 0 4px 12px -4px rgba(0,104,107,.5), inset 0 0 0 1.5px var(--teal); left: calc(var(--pct) - 14px); animation: drive 3.2s var(--ease) infinite; }
.ship-veh svg { width: 16px; height: 16px; }
.ship.moving .ship-line::after { content: ""; position: absolute; top: 0; bottom: 0; left: max(0px, calc(var(--pct) - 60px)); width: min(60px, var(--pct)); background: linear-gradient(90deg, transparent, rgba(52,198,195,.55)); animation: trail 3.2s var(--ease) infinite; }
.ship.moving li.now .ship-ic { opacity: 0; }
@keyframes drive { 0% { transform: translateX(-46px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes trail { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
.shipfoot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.carrier { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 500; }
.carrier svg { width: 15px; height: 15px; color: var(--teal); }

/* order totals by period */
.ordsum header { flex-wrap: wrap; gap: 12px; }
.ordsum .seg button { padding: 0 11px; }
.ordsum .kpis { margin-top: 4px; }
.mbars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 120px; margin-top: 18px; }
.mbars span { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; min-width: 0; }
.mbars i { align-self: end; display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--c1); transition: height .5s var(--ease); }
.mbars span:hover i { background: var(--teal-ink); }
.mbars small { font-size: 11px; color: var(--sub); text-align: center; white-space: nowrap; overflow: hidden; }

/* meetings */
.mtggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.mtg { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 16px; border-radius: 18px; background: var(--surface-2); min-width: 0; }
.mtg-date { display: grid; align-content: start; justify-items: center; gap: 2px; padding: 10px 0 9px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); text-align: center; }
.mtg-date b { font: 700 24px/1 var(--display); letter-spacing: -.03em; }
.mtg-date span { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--teal-ink); letter-spacing: .04em; }
.mtg-date small { font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; margin-top: 4px; }
.mtg-body { display: grid; gap: 6px; min-width: 0; align-content: start; }
.mtg-topic { font-size: 14px; color: var(--ink-2); }
.mtg-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--sub); }
.mtg-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.mtg-meta svg { width: 14px; height: 14px; color: var(--teal); flex: none; }
.mtg-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.mtg-acts .btn svg { width: 16px; height: 16px; margin-right: 6px; }
.calpick .pk-btn { height: 34px; width: auto; border-radius: 999px; padding: 0 14px; font-size: 13px; gap: 6px; justify-content: flex-start; }
.calpick .pk-btn svg { color: var(--teal); }
.calpick .pk-list { min-width: 210px; right: auto; }
.calpick .pk-list a, .calpick .pk-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-decoration: none; font: 500 14px/1.2 var(--font); text-align: left; }
.calpick .pk-list a:hover, .calpick .pk-list button:hover { background: var(--hover); }
.calpick .pk-list svg { width: 16px; height: 16px; color: var(--teal); }

/* CRM filter tabs with icons */
.seg-ic button { display: inline-flex; align-items: center; gap: 7px; }
.seg-ic button svg { width: 15px; height: 15px; color: var(--sub); transition: color .2s, transform .25s var(--ease); }
.seg-ic button:hover svg { transform: scale(1.12); }
.seg-ic button[aria-pressed="true"] svg { color: var(--teal); }
.seg-ic .f-priority[aria-pressed="true"] svg { color: var(--gold); }
.seg-ic .f-hot[aria-pressed="true"] svg { color: #D9622B; }
.seg-ic .f-cold[aria-pressed="true"] svg { color: var(--c2); }
.seg-ic .f-passive[aria-pressed="true"] svg { color: var(--sub); }
.head .seg-ic { flex-wrap: wrap; }

/* ads hero: deep navy with champagne accents, matching the creatives */
.adhero { background: radial-gradient(110% 140% at 88% -10%, #3A2E22 0%, #16243A 46%, #0C1626 100%); box-shadow: 0 24px 60px -30px rgba(12,22,38,.75); }
.adhero::before { background: radial-gradient(circle, rgba(214,178,122,.26), transparent 62%); }
.adhero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(231,207,165,.07) 50%, transparent); }
.adh-ic { background: rgba(231,207,165,.1); box-shadow: inset 0 0 0 1px rgba(231,207,165,.22); }
.adh-ic svg { color: #E7CFA5; }
.adh-pipe { background: linear-gradient(90deg, rgba(231,207,165,.12), rgba(231,207,165,.5), rgba(231,207,165,.12)); }
.adh-pipe i { background: #F1DDB8; box-shadow: 0 0 12px #C9A46F; }
.adh-step b { color: #FBF6EE; }
.adh-foot b { color: #F1DDB8; }
.livebadge { background: rgba(231,207,165,.1); box-shadow: inset 0 0 0 1px rgba(231,207,165,.22); }
.adh-tile { box-shadow: 0 0 0 1px rgba(231,207,165,.18); }
.adc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 2px; }
.adc-meta > span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; min-width: 0; max-width: 100%; }
.adc-meta svg { width: 13px; height: 13px; flex: none; }
.adc-lang { background: var(--gold-soft); color: #7A5A2E; }
:root[data-theme="dark"] .adc-lang { color: #E7CFA5; }
.adc-mkt { background: var(--surface-2); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adc-mkt svg { color: var(--teal); }
.adc-hl { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* charts */
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin: 2px 0 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 4px; border-radius: 2px; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font: 500 9.5px var(--font); fill: var(--sub); font-variant-numeric: tabular-nums; }
.chart .gl { stroke: var(--line); stroke-dasharray: 2 4; }
.chart .bl { stroke: var(--line); }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { opacity: .1; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .xh { stroke: var(--ink); stroke-opacity: .25; stroke-width: 1; opacity: 0; }
.chart .xh.on { opacity: 1; }
.ctip { position: absolute; top: -6px; pointer-events: none; padding: 7px 10px; border-radius: 10px; background: var(--ink); color: var(--card); font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); transform: translateY(-100%); font-variant-numeric: tabular-nums; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hbars li { display: grid; grid-template-columns: minmax(120px, 210px) 1fr auto 44px; gap: 12px; align-items: center; font-size: 13.5px; }
.hb-l { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-t { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.hb-t i { display: block; height: 100%; border-radius: 0 5px 5px 0; background: var(--c1); }
.hbars b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hbars small { color: var(--sub); text-align: right; font-variant-numeric: tabular-nums; }
.donut { position: relative; width: 120px; height: 120px; flex: none; }
.donut svg { width: 100%; height: 100%; }
.donut circle { fill: none; stroke-width: 9; }
.donut .d-bg { stroke: var(--surface-2); }
.donut .d-fg { stroke: var(--c1); stroke-linecap: round; transition: stroke-dasharray .8s var(--ease); }
.donut > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut b { font: 700 24px/1 var(--display); letter-spacing: -.03em; }
.donut small { font-size: 11px; color: var(--sub); margin-top: 3px; }

/* sites & SEO */
.sitehero { display: grid; grid-template-columns: 1fr 240px; gap: 18px; align-items: center; background: linear-gradient(135deg, var(--card) 40%, var(--teal-soft)); }
.sitehero h2 { font: 600 22px/1.25 var(--display); letter-spacing: -.02em; margin-top: 4px; }
.sh-k { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.sh-k > span { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.sh-k svg { grid-row: span 2; width: 18px; height: 18px; color: var(--teal); }
.sh-k b { font: 700 18px/1.1 var(--display); }
.sh-k small { font-size: 12px; color: var(--sub); }
.art { width: 100%; height: auto; }
.art-ln { stroke-dasharray: 200; stroke-dashoffset: 200; animation: artdraw 1.6s .2s var(--ease) forwards; }
@keyframes artdraw { to { stroke-dashoffset: 0; } }
.sitecharts { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin-top: 14px; }
.sc-donut { display: grid; justify-items: center; gap: 6px; text-align: center; }
.sc-line { min-width: 0; }

/* news: every story has the same thumbnail slot */
.nlist .nph { display: grid; place-items: center; color: var(--teal); background: linear-gradient(135deg, var(--teal-soft), var(--surface-2)); box-shadow: inset 0 0 0 1px var(--line); }
.nlist .nph svg { width: 24px; height: 24px; opacity: .85; }
.nlist li.lead .nph svg { width: 40px; height: 40px; }
.nlist .nph[data-k="ship"], .nlist .nph[data-k="plane"] { background: linear-gradient(135deg, rgba(76,95,213,.12), var(--surface-2)); color: var(--c2); }
.nlist .nph[data-k="chart"] { background: linear-gradient(135deg, var(--gold-soft), var(--surface-2)); color: var(--gold); }

/* support: hover hint */
.support { position: fixed; }
.sup-hint { position: absolute; right: calc(100% + 12px); bottom: 2px; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 290px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--glass-2); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(11,34,51,.4), 0 0 0 1px var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transform: translateX(8px); transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
.sup-hint b { display: block; font-size: 13.5px; font-weight: 600; }
.sup-hint small { display: block; font-size: 12.5px; color: var(--sub); }
.sup-click { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(31,162,90,.12); color: #1FA25A; flex: none; }
.sup-click svg { width: 18px; height: 18px; animation: tap 1.4s ease-in-out infinite; }
@keyframes tap { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(-2px, -2px); } 55% { transform: translate(1px, 1px) scale(.9); } }
.support:hover .sup-hint, .sup-btn:focus-visible ~ .sup-hint { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .sitehero { grid-template-columns: 1fr; } .sitehero .art { max-width: 220px; justify-self: center; }
  .sitecharts { grid-template-columns: 1fr; justify-items: center; } .sc-line { width: 100%; }
  .hbars li { grid-template-columns: 1fr auto 40px; } .hb-t { grid-column: 1 / -1; grid-row: 2; }
  .mtggrid { grid-template-columns: 1fr; }
  .mbars { gap: 3px; } .mbars small { font-size: 10px; }
  .ship li small { font-size: 10.5px; }
  .sup-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ship-veh, .ship.moving .ship-line::after, .sup-click svg, .art-ln { animation: none; }
  .art-ln { stroke-dashoffset: 0; }
}
.adc { grid-template-columns: minmax(0, 1fr); }
.adc-body { min-width: 0; }
.adc-hl[dir="auto"] { unicode-bidi: plaintext; }
.mtg-date { align-self: start; }
.calpick .pk-list { z-index: 70; }
.adc-body { grid-template-columns: minmax(0, 1fr); }
.adc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adc-meta { min-width: 0; }
@media (max-width: 760px) {
  .ordsum .kpis { grid-template-columns: 1fr 1fr; }
  .ordsum .kpi .big { font-size: 22px; }
  .ship li small { visibility: hidden; }
  .ship li.now small { visibility: visible; white-space: nowrap; }
  .ship-ic { width: 30px; height: 30px; } .ship-ic svg { width: 15px; height: 15px; }
}
.adc-meta .adc-mkt { height: auto; align-items: flex-start; padding: 5px 10px; border-radius: 10px; white-space: normal; line-height: 1.35; display: flex; }
.adc-mkt svg { margin-top: 2px; }

/* ---------- v11: record windows, documents & viewer, business pages ---------- */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tag.w { background: var(--gold-soft); color: #7A5A2E; }
:root[data-theme="dark"] .tag.w { color: #E7CFA5; }
.kpi.warnk .kic { background: var(--amber-soft); color: var(--amber); }
.num-r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.link.danger, .btn.danger, .iconbtn.danger { color: var(--amber); }
.checkline { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-2); margin: 2px 0 4px; }
.checkline input { width: 18px; height: 18px; accent-color: var(--teal); }
.dchip-t { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--sub); margin-left: 4px; white-space: nowrap; }
.dchip-t.soon { background: var(--gold-soft); color: #7A5A2E; } .dchip-t.late { background: var(--amber-soft); color: var(--amber); }
:root[data-theme="dark"] .dchip-t.soon { color: #E7CFA5; }

/* clickable records */
.rec { cursor: pointer; position: relative; border-radius: 14px; transition: background .2s; }
.slist > li.rec { padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
.rec:hover { background: var(--hover); }
.rec:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rec-n { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-go { color: var(--sub); display: grid; place-items: center; transform: rotate(-90deg); transition: transform .2s var(--ease), color .2s; }
.rec-go svg { width: 16px; height: 16px; }
.rec:hover .rec-go { color: var(--teal); transform: rotate(-90deg) translateY(2px); }
.rec-flags { display: flex; gap: 8px; flex-wrap: wrap; }
.flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.flag svg { width: 13px; height: 13px; }
.flag.miss { background: var(--amber-soft); color: var(--amber); } .flag.soon { background: var(--gold-soft); color: #7A5A2E; }
/* document chips on order cards */
.dchips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 10px; border: 1px dashed var(--field); background: transparent; color: var(--sub); font-size: 12.5px; font-weight: 600; transition: transform .15s var(--ease), background .2s; }
.dchip svg { width: 15px; height: 15px; }
.dchip.on { border: 1px solid transparent; background: var(--teal-soft); color: var(--teal-ink); }
.dchip.on:hover { background: var(--teal); color: #fff; transform: translateY(-1px); }
.dchip.miss { border-color: rgba(181,84,28,.45); color: var(--amber); background: var(--amber-soft); }
.dchip:not(.on):hover { background: var(--hover); }

/* the record window */
.drawer.wide { width: min(860px, calc(100vw - 24px)); }
.drawer.busy { opacity: .6; pointer-events: none; }
.ky { display: grid; gap: 16px; }
.ky .eyebrow { margin: 0; }
.ky-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 40px; }
.ky-head h2 { padding-right: 0; flex: 1 1 auto; min-width: 0; }
.ky-amt { display: grid; justify-items: end; font: 700 22px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fxeq { font: 500 12px/1.3 var(--font); color: var(--sub); letter-spacing: 0; }
.ky-lead { font-size: 16px; color: var(--ink-2); margin-top: -8px; }
.ky-warn { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--amber-soft); color: var(--amber); font-size: 13.5px; font-weight: 500; }
.ky-warn.soft { background: var(--gold-soft); color: #7A5A2E; }
:root[data-theme="dark"] .ky-warn.soft { color: #E7CFA5; }
.ky-warn svg { width: 18px; height: 18px; flex: none; }
.ky-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ky-acts .btn svg, .ky-docs .btn svg, .mtg-acts .btn svg, .vc-acts .btn svg { width: 15px; height: 15px; margin-right: 6px; }
.ky-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ky-card { background: var(--surface-2); border-radius: 18px; padding: 16px 18px; min-width: 0; }
.ky-card h3, .ky-docs h3, .ky-notes h3, .ky-hist h3 { display: flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--font); color: var(--ink); margin: 0 0 10px; }
.ky-card h3 svg, .ky-docs h3 svg, .ky-notes h3 svg, .ky-hist h3 svg { width: 17px; height: 17px; color: var(--teal); }
.ky-docs h3 small { font-weight: 400; color: var(--sub); font-size: 12.5px; margin-left: 4px; }
.ky-dl { display: grid; gap: 8px; margin: 0; }
.ky-dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: 13.5px; }
.ky-dl dt { color: var(--sub); }
.ky-dl dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ky-p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.ky-next { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13.5px; }
.ky-next svg { width: 16px; height: 16px; color: var(--teal); margin-top: 2px; }
.ky-next small { display: block; color: var(--sub); }
.paybar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin: 2px 0 8px; }
.paybar i { display: block; height: 100%; border-radius: 4px; background: var(--c1); transition: width .6s var(--ease); }
.paybar.overdue i { background: var(--amber); } .paybar.due_soon i { background: var(--gold); }
.paynote { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.ky-docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ky-doc { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px dashed var(--field); min-width: 0; }
.ky-doc.on { border: 1px solid transparent; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -12px rgba(11,34,51,.35); }
.ky-doc.miss { border-color: rgba(181,84,28,.4); background: var(--amber-soft); }
.kd-ic { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--sub); }
.ky-doc.on .kd-ic { background: var(--teal-soft); color: var(--teal-ink); } .ky-doc.miss .kd-ic { background: #fff; color: var(--amber); }
.kd-ic svg { width: 19px; height: 19px; }
.kd-t { min-width: 0; } .kd-t b { display: block; font-size: 13.5px; font-weight: 600; } .kd-t small { display: block; font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ky-doc.miss .kd-t small { color: var(--amber); font-weight: 600; }
.kd-a { grid-column: 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ky-others { display: grid; gap: 10px; margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ky-add { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 12px; border-radius: 16px; border: 1px dashed var(--field); background: transparent; color: var(--teal-ink); text-align: left; font-weight: 600; font-size: 13.5px; }
.ky-add svg { grid-row: span 2; width: 20px; height: 20px; }
.ky-add small { color: var(--sub); font-weight: 400; font-size: 12px; }
.ky-add:hover { background: var(--teal-soft); }
.ky-kinds { display: flex; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; }
.ky-notes textarea { width: 100%; border-radius: 14px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); padding: 12px 14px; font: inherit; resize: vertical; }
.ky-notes .acts { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.ky-tl li { font-size: 13.5px; }
.ky-mtg { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.mtg-date.big { width: 128px; padding: 16px 0 14px; } .mtg-date.big b { font-size: 40px; } .mtg-date.big span { font-size: 13px; } .mtg-date.big small { font-size: 12px; text-align: center; }
/* quote steps */
.qsteps { list-style: none; margin: 4px 0; padding: 0; display: flex; align-items: center; gap: 0; }
.qsteps li { display: grid; justify-items: center; gap: 4px; flex: 1; position: relative; }
.qsteps li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--surface-3); z-index: 0; }
.qsteps li:first-child::before { display: none; }
.qsteps li.done::before, .qsteps li.now::before { background: var(--teal); }
.qsteps span { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--sub); box-shadow: 0 0 0 4px var(--card); }
.qsteps span svg { width: 15px; height: 15px; }
.qsteps li.done span { background: var(--teal-soft); color: var(--teal-ink); } .qsteps li.now span { background: var(--teal); color: #fff; }
.qsteps li.end span { background: var(--amber-soft); color: var(--amber); }
.qsteps small { font-size: 11.5px; color: var(--sub); }
.qsteps li.now small, .qsteps li.end small { color: var(--ink); font-weight: 600; }
/* customer 360 */
.c360-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.c360-k > span { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.c360-k svg { grid-row: span 2; width: 16px; height: 16px; color: var(--teal); }
.c360-k b { font: 700 15px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c360-k small { font-size: 11.5px; color: var(--sub); }
.c360-list li { gap: 10px; }

/* document viewer + printable report */
.pdfv { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-rows: auto 1fr; background: rgba(9,18,26,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .22s; }
.pdfv.on { opacity: 1; }
body.pv-open { overflow: hidden; }
.pv-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(11,24,36,.92); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08); flex-wrap: wrap; }
.pv-t { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pv-t > span:last-child { min-width: 0; } .pv-t b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; } .pv-t small { color: rgba(255,255,255,.65); font-size: 12.5px; }
.pv-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(52,198,195,.16); color: #9FF0EC; flex: none; }
.pv-ic svg { width: 19px; height: 19px; }
.pv-acts { display: flex; gap: 8px; align-items: center; }
.pv-acts .iconbtn { background: rgba(255,255,255,.08); color: #fff; } .pv-acts .iconbtn:disabled { opacity: .35; }
.pv-acts .btn.ghost { color: #fff; border-color: rgba(255,255,255,.25); background: transparent; } .pv-acts .btn.dark { background: #fff; color: #0B2233; }
.pv-acts .btn svg { width: 16px; height: 16px; margin-right: 6px; }
.pv-pages { font-size: 12.5px; color: rgba(255,255,255,.7); margin-right: 4px; }
.pv-body { overflow: auto; padding: 22px 16px 60px; outline: none; }
.pv-pagesbox { display: grid; justify-items: center; gap: 18px; }
.pv-page { background: #fff; border-radius: 4px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); max-width: 100%; }
.pv-img { max-width: min(980px, 100%); border-radius: 6px; background: #fff; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); }
.pv-loading { display: grid; justify-items: center; gap: 10px; margin-top: 18vh; color: rgba(255,255,255,.8); font-size: 14px; }
.pv-loading svg { width: 34px; height: 34px; animation: pvpulse 1.4s ease-in-out infinite; } .pv-loading.err svg { animation: none; color: #F0A06A; }
@keyframes pvpulse { 50% { opacity: .35; transform: translateY(-3px); } }
#pvPrint { display: none; }
.weekly { width: min(820px, 100%); background: #fff; color: #0B2233; border-radius: 6px; padding: 40px 44px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); font-size: 14px; }
.weekly header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid #00999A; padding-bottom: 16px; margin-bottom: 18px; }
.weekly header img { width: 150px; height: auto; } .weekly header div { text-align: right; } .weekly h1 { font-size: 24px; letter-spacing: -.02em; margin: 0; } .weekly header p { color: #4E5B67; margin-top: 4px; }
.wk-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.wk-k div { padding: 12px; border-radius: 10px; background: #F0F5F7; } .wk-k small { display: block; color: #4E5B67; font-size: 11.5px; } .wk-k b { font-size: 17px; }
.weekly section { margin-top: 16px; } .weekly h2 { font-size: 15px; margin: 0 0 6px; color: #00686B; } .weekly ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.weekly footer { margin-top: 26px; padding-top: 10px; border-top: 1px solid #E3E8ED; color: #6E7C88; font-size: 11.5px; }
@media print {
  body.pv-printing > *:not(#pvPrint) { display: none !important; }
  body.pv-printing #pvPrint { display: block; } #pvPrint img { width: 100%; page-break-after: always; break-after: page; display: block; }
  body.pv-printing-weekly > *:not(.weeklyv) { display: none !important; }
  body.pv-printing-weekly .weeklyv { position: static; background: none; backdrop-filter: none; display: block; }
  body.pv-printing-weekly .pv-bar { display: none; } body.pv-printing-weekly .pv-body { padding: 0; overflow: visible; }
  body.pv-printing-weekly .weekly { box-shadow: none; width: 100%; padding: 0; }
}

/* lists on business pages */
.payrow { gap: 8px; }
.payok { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 7px 0; border-top: 1px solid var(--line); }
.payok span { display: inline-flex; gap: 6px; align-items: center; min-width: 0; } .payok svg { width: 15px; height: 15px; color: var(--teal); }
.qcard .qsteps { max-width: 420px; }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.funnel li { display: grid; grid-template-columns: minmax(110px, 170px) 1fr auto 44px; gap: 12px; align-items: center; font-size: 13.5px; }
.fn-l { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-2); } .fn-l svg { width: 16px; height: 16px; color: var(--teal); }
.fn-t { height: 14px; border-radius: 7px; background: var(--surface-2); overflow: hidden; } .fn-t i { display: block; height: 100%; border-radius: 0 7px 7px 0; background: linear-gradient(90deg, var(--c1), var(--teal-bright)); }
.funnel b { font-variant-numeric: tabular-nums; } .funnel small { color: var(--sub); text-align: right; font-variant-numeric: tabular-nums; }

/* calendar */
.callegend { display: flex; flex-wrap: wrap; gap: 8px; }
.evk { display: inline-flex; gap: 6px; align-items: center; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; border: 0; background: var(--card); box-shadow: var(--shadow); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.evk svg { width: 15px; height: 15px; } .evk[aria-pressed="false"] { opacity: .45; box-shadow: none; background: var(--surface-2); }
.ev-meeting { --ev: #4C5FD5; } .ev-eta { --ev: #00999A; } .ev-etd { --ev: #2F7FBF; } .ev-sample { --ev: #5BA7A5; } .ev-due { --ev: #B5541C; } .ev-quote { --ev: #B98A4E; } .ev-cert { --ev: #7E57C2; } .ev-fair { --ev: #C2185B; } .ev-support { --ev: #2E7D32; }
:root[data-theme="dark"] .ev-meeting { --ev: #8C9BF0; } :root[data-theme="dark"] .ev-due { --ev: #F0A06A; } :root[data-theme="dark"] .ev-cert { --ev: #B39DDB; } :root[data-theme="dark"] .ev-fair { --ev: #F06292; } :root[data-theme="dark"] .ev-support { --ev: #81C784; }
.evk svg, .ev-ic { color: var(--ev); }
.calwrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.calcard header { display: flex; justify-content: space-between; align-items: center; }
.calcard h2 { text-transform: capitalize; }
.calnav { display: flex; gap: 6px; align-items: center; }
.calnav [data-cm="-1"] svg { transform: rotate(90deg); } .calnav [data-cm="1"] svg { transform: rotate(-90deg); }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.calgrid .wd { font-size: 11.5px; color: var(--sub); text-align: center; padding: 4px 0; text-transform: capitalize; }
.cday { display: grid; align-content: start; gap: 3px; min-height: 84px; padding: 6px; border-radius: 12px; border: 0; background: var(--surface-2); text-align: left; color: var(--ink); min-width: 0; transition: background .15s; }
.cday:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.cday.out { opacity: .45; } .cday.today .dn { background: var(--teal); color: #fff; } .cday.sel { box-shadow: inset 0 0 0 2px var(--teal); }
.cday .dn { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; }
.cday .dots { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; min-height: 6px; }
.cday .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ev); } .cday .dots small { font-size: 10px; color: var(--sub); }
.cev { font-size: 10.5px; line-height: 1.25; padding: 2px 5px; border-radius: 5px; background: color-mix(in srgb, var(--ev) 14%, transparent); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ev { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); cursor: pointer; transition: background .15s, transform .15s var(--ease); }
.ev:hover { background: var(--hover); transform: translateX(2px); }
.ev-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--ev) 14%, var(--card)); }
.ev-ic svg { width: 17px; height: 17px; }
.ev-t { min-width: 0; } .ev-t b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-t small { display: block; font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-d { font-size: 12.5px; font-weight: 600; text-align: right; white-space: nowrap; } .ev-d small { display: block; font-weight: 400; color: var(--sub); }

/* vault, distributors, supports cards */
.vgrid, .spgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.vcard, .dcard, .spcard { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 18px; background: var(--surface-2); min-width: 0; }
.vcard b, .dcard b, .spcard b { font-size: 15px; } .vcard > small, .dcard > small { color: var(--sub); font-size: 12.5px; }
.vc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.vc-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--card); color: var(--teal); box-shadow: 0 0 0 1px var(--line); }
.vc-ic svg { width: 20px; height: 20px; }
.v-expired .vc-ic, .v-soon .vc-ic { color: var(--amber); }
.vbar, .tgtbar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 4px; }
.vbar i, .tgtbar i { display: block; height: 100%; border-radius: 3px; background: var(--c1); }
.v-soon .vbar i { background: var(--gold); } .v-expired .vbar i { background: var(--amber); }
.vdate { font-size: 12px; color: var(--sub); }
.vc-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.dcard.rec:hover, .vcard:hover { background: var(--hover); }
.sphero { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(135deg, var(--card) 50%, var(--teal-soft)); }
.sp-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--teal); color: #fff; flex: none; } .sp-ic svg { width: 24px; height: 24px; }
.sphero p { margin-top: 6px; color: var(--ink-2); font-size: 14px; } .sphero a svg { width: 13px; height: 13px; vertical-align: -1px; }
.spcard p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.spcard.on { box-shadow: inset 0 0 0 1.5px var(--teal); }
.sp-rate { display: grid; justify-items: end; font: 700 22px/1 var(--display); color: var(--teal-ink); } .sp-rate small { font: 500 11px/1.3 var(--font); color: var(--sub); }
.sp-plan { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--ink-2); }

/* fairs */
.fairlist { display: grid; gap: 12px; }
.fair { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 16px; border-radius: 18px; background: var(--surface-2); }
.fair.fp-attending, .fair.fp-applied { box-shadow: inset 0 0 0 1.5px var(--teal); }
.fair-date { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 10px 0; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.fair-date b { font: 700 24px/1 var(--display); } .fair-date span { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #C2185B; } .fair-date small { font-size: 11px; color: var(--sub); }
.fair-b { display: grid; gap: 6px; min-width: 0; }
.fair-b .note svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.fair-note { font-size: 13px; color: var(--ink-2); }
.fair-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.fair-tags span { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--card); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.fair-tags .ok { background: var(--teal-soft); color: var(--teal-ink); box-shadow: none; } .fair-tags svg { width: 12px; height: 12px; }

/* B2B platforms */
.platgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.plat { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 18px; border: 0; background: var(--card); box-shadow: var(--shadow); color: var(--ink); }
.plat.on { box-shadow: inset 0 0 0 2px var(--teal), var(--shadow); }
.pl-n { font-size: 13px; font-weight: 600; color: var(--teal-ink); } .plat b { font: 700 26px/1.1 var(--display); } .plat small { font-size: 12px; color: var(--sub); } .plat .pl-v { color: var(--ink-2); font-weight: 600; }

/* markets map */
.mapcard header { flex-wrap: wrap; gap: 10px; }
.map { position: relative; margin-top: 6px; }
.map svg { width: 100%; height: auto; display: block; }
.map path { stroke: var(--card); stroke-width: .6; transition: opacity .15s; }
.map path.m0 { fill: var(--surface-3); } .map path.m1 { fill: #CDEDEB; } .map path.m2 { fill: #9BD9D6; } .map path.m3 { fill: #5DBFBC; } .map path.m4 { fill: #1F9C9A; } .map path.m5 { fill: #006D6F; }
:root[data-theme="dark"] .map path.m1 { fill: #1D4446; } :root[data-theme="dark"] .map path.m2 { fill: #22605F; } :root[data-theme="dark"] .map path.m3 { fill: #23807E; } :root[data-theme="dark"] .map path.m4 { fill: #2EA6A3; } :root[data-theme="dark"] .map path.m5 { fill: #5FD3CF; }
.map path[data-tip] { cursor: pointer; } .map path.hov { stroke: var(--ink); stroke-width: 1.2; }
.map .mb { fill: var(--c2); fill-opacity: .82; stroke: var(--card); stroke-width: 1.5; pointer-events: none; }
.map .ctip { transform: translateY(-100%); }
.mlegend { display: flex; gap: 4px; align-items: center; font-size: 11.5px; color: var(--sub); flex-wrap: wrap; }
.mlegend i { width: 18px; height: 10px; border-radius: 2px; display: inline-block; }
.mlegend i.m1 { background: #CDEDEB; } .mlegend i.m2 { background: #9BD9D6; } .mlegend i.m3 { background: #5DBFBC; } .mlegend i.m4 { background: #1F9C9A; } .mlegend i.m5 { background: #006D6F; }
.mlegend .mb-l { display: inline-flex; gap: 5px; align-items: center; margin-left: 10px; } .mlegend .mb-l i { width: 10px; height: 10px; border-radius: 50%; background: var(--c2); }
.mk-insight { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); font-size: 14px; color: var(--ink-2); }
.mk-insight svg { width: 18px; height: 18px; color: var(--teal); flex: none; }
.mbar { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--surface-2); margin-right: 8px; vertical-align: middle; overflow: hidden; } .mbar i { display: block; height: 100%; background: var(--c1); }

/* targets */
.tghero { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.tg-ring .donut { width: 150px; height: 150px; } .tg-ring .donut b { font-size: 30px; }
.tg-k h2 { font: 600 22px/1.25 var(--display); letter-spacing: -.02em; } .tg-k .kpis { margin-top: 14px; }
.tglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tglist li { display: grid; grid-template-columns: auto minmax(90px, 160px) 1fr auto auto; gap: 12px; align-items: center; font-size: 13.5px; }
.tglist .tgtbar { margin: 0; height: 10px; border-radius: 5px; } .tglist small { color: var(--sub); white-space: nowrap; }
.tgrows { display: grid; gap: 8px; } .tgrow { display: grid; grid-template-columns: 70px 1fr; gap: 8px; }
.tgrow input { height: 40px; border-radius: 12px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); padding: 0 12px; font: inherit; }
.tgrow [data-cc] { text-transform: uppercase; text-align: center; }

/* overview: coming up + exchange rates; digital channels */
.ovbiz { margin: 0; }
.alerts { display: grid; gap: 8px; margin-bottom: 12px; }
.alert { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--amber-soft); color: var(--amber); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.alert svg { width: 17px; height: 17px; flex: none; } .alert span { flex: 1; } .alert svg:last-child { transform: rotate(-90deg); width: 15px; height: 15px; }
.fxcard header .tag svg { width: 13px; height: 13px; margin-right: 4px; }
.fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.fxgrid div { padding: 12px; border-radius: 14px; background: var(--surface-2); } .fxgrid small { display: block; font-size: 11.5px; color: var(--sub); } .fxgrid b { font: 700 19px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.chstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ch { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); opacity: .7; }
.ch.on { opacity: 1; } .ch > svg { width: 22px; height: 22px; color: var(--teal); } .ch b { display: block; font-size: 14.5px; } .ch small { font-size: 12px; color: var(--sub); }
.gads .kpis { margin-top: 6px; }

@media (max-width: 980px) {
  .calwrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .grid2, .ky-grid { grid-template-columns: 1fr; }
  .ky-dl > div { grid-template-columns: 110px 1fr; }
  .ky-mtg { grid-template-columns: 1fr; } .mtg-date.big { width: 100%; grid-template-columns: auto auto 1fr; justify-items: start; align-items: baseline; gap: 8px; padding: 12px 16px; }
  .c360-k { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cday { min-height: 54px; padding: 4px; } .cev { display: none; }
  .funnel li { grid-template-columns: 1fr auto 40px; } .fn-t { grid-column: 1 / -1; grid-row: 2; }
  .tghero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .tglist li { grid-template-columns: auto 1fr auto; } .tglist .tgtbar { grid-column: 1 / -1; grid-row: 2; } .tglist small { display: none; }
  .wk-k { grid-template-columns: repeat(2, 1fr); } .weekly { padding: 24px 20px; }
  .pv-t b { max-width: 60vw; } .pv-acts .btn span { display: none; } .pv-acts .btn svg { margin: 0; }
  .fair { grid-template-columns: 58px 1fr; gap: 12px; }
}

/* ---------- v11 intro scenes ---------- */
.show .stg { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.show .sc { width: min(520px, 92%); padding: 20px 22px; border-radius: 24px; background: #1C1C1E; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); display: grid; gap: 16px; }
.show .sc-h { display: flex; gap: 12px; align-items: center; }
.show .sc-h > span:nth-child(2) { flex: 1; min-width: 0; } .show .sc-h b { display: block; font: 600 19px/1.2 var(--display); letter-spacing: -.02em; } .show .sc-h small { color: rgba(255,255,255,.55); font-size: 13.5px; }
.show .sc-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(52,198,195,.14); color: #9FF0EC; flex: none; } .show .sc-ic svg { width: 22px; height: 22px; }
.show .sc-f { display: flex; gap: 8px; align-items: center; color: rgba(255,255,255,.6); font-size: 14px; } .show .sc-f svg { width: 16px; height: 16px; color: #9FF0EC; }
.show .sc-pdf { display: inline-flex; gap: 6px; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.45); font-size: 12.5px; font-weight: 600; transition: background .4s, color .4s; }
.show .sc-pdf svg { width: 15px; height: 15px; } .show .sc-pdf.on { background: var(--teal); color: #fff; }
/* channels → inbox */
.show .st-ch { grid-template-columns: 1fr auto; gap: 40px; padding: 0 4%; }
.show .chs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; justify-self: end; }
.show .chp { display: inline-flex; gap: 10px; align-items: center; height: 46px; padding: 0 18px 0 14px; border-radius: 999px; background: #1C1C1E; border: 1px solid rgba(255,255,255,.1); font-size: 15px; font-weight: 500; transition: transform .7s cubic-bezier(.22,.8,.2,1), opacity .7s, background .3s; }
.show .chp svg { width: 19px; height: 19px; color: #9FF0EC; }
.show .chp.go { transform: translateX(28px) scale(.96); background: #0D3B3D; border-color: rgba(52,198,195,.35); }
.show .inbox { display: grid; justify-items: center; gap: 6px; width: 200px; padding: 26px 0; border-radius: 30px; background: radial-gradient(circle at 50% 30%, rgba(52,198,195,.28), rgba(52,198,195,.05) 70%); border: 1px solid rgba(52,198,195,.3); }
.show .inbox span { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--teal); } .show .inbox span svg { width: 26px; height: 26px; }
.show .inbox b { font: 700 46px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .show .inbox small { color: rgba(255,255,255,.6); font-size: 14px; }
/* quote steps */
.show .sq { list-style: none; margin: 0; padding: 0; display: flex; }
.show .sq li { flex: 1; display: grid; justify-items: center; gap: 8px; position: relative; opacity: .35; transition: opacity .4s; }
.show .sq li::before { content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 2px; background: rgba(255,255,255,.12); } .show .sq li:first-child::before { display: none; }
.show .sq li.on { opacity: 1; } .show .sq li.on::before { background: var(--teal-bright); box-shadow: 0 0 10px rgba(52,198,195,.6); }
.show .sq span { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #2A2A2D; transition: background .4s, box-shadow .4s; } .show .sq span svg { width: 20px; height: 20px; }
.show .sq li.on span { background: var(--teal); box-shadow: 0 0 0 7px rgba(52,198,195,.14); } .show .sq small { font-size: 13.5px; color: rgba(255,255,255,.7); }
/* sample tracker */
.show .ss { position: relative; padding-top: 4px; }
.show .ss ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; }
.show .ss li { display: grid; justify-items: center; gap: 8px; opacity: .35; transition: opacity .4s; } .show .ss li.on { opacity: 1; }
.show .ss li span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #2A2A2D; box-shadow: 0 0 0 5px #1C1C1E; transition: background .4s; } .show .ss li span svg { width: 19px; height: 19px; }
.show .ss li.on span { background: rgba(52,198,195,.2); color: #9FF0EC; } .show .ss small { font-size: 13px; color: rgba(255,255,255,.7); }
.show .ss-line { position: absolute; left: 12.5%; right: 12.5%; top: 26px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 6px, transparent 6px 11px); }
.show .ss-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 33%; border-radius: 2px; background: var(--teal-bright); transition: width 1.5s cubic-bezier(.45,0,.2,1); box-shadow: 0 0 12px rgba(52,198,195,.6); }
.show .ss-veh { position: absolute; top: -17px; left: calc(33% - 18px); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #00686B; box-shadow: 0 6px 18px -4px rgba(52,198,195,.7); opacity: 0; transition: left 1.5s cubic-bezier(.45,0,.2,1), opacity .3s; } .show .ss-veh svg { width: 19px; height: 19px; }
.show .ss.moving .ss-veh { opacity: 1; left: calc(66% - 18px); } .show .ss.moving .ss-line i { width: 66%; }
.show .ss.done .ss-veh { left: calc(100% - 18px); } .show .ss.done .ss-line i { width: 100%; }
/* order papers */
.show .st-d { grid-template-columns: auto auto; gap: 28px; justify-content: center; }
.show .sd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.show .sdc { display: inline-flex; gap: 8px; align-items: center; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.18); color: rgba(255,255,255,.45); font-size: 14px; font-weight: 600; transition: all .4s; }
.show .sdc svg { width: 17px; height: 17px; } .show .sdc.on { border: 1px solid transparent; background: rgba(52,198,195,.18); color: #9FF0EC; transform: translateY(-2px); }
.show .sheet-pdf { width: 170px; height: 230px; border-radius: 6px; background: #fff; color: #0B2233; padding: 18px 16px; display: grid; align-content: start; gap: 9px; position: relative; overflow: hidden; transform: translateY(30px) rotate(4deg); opacity: 0; transition: transform .8s cubic-bezier(.22,.8,.2,1), opacity .6s; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.show .sheet-pdf::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: #0B2233; }
.show .sheet-pdf b { position: relative; margin-top: 18px; font-size: 11px; letter-spacing: .04em; color: #00686B; } .show .sheet-pdf i { height: 6px; border-radius: 3px; background: #E3E8ED; } .show .sheet-pdf i.s { width: 60%; }
.show .sheet-pdf span { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%) rotate(-30deg); font: 800 30px/1 var(--display); color: rgba(0,139,142,.12); }
.show .sheet-pdf.on { opacity: 1; transform: none; }
/* payment */
.show .sp { height: 12px; border-radius: 6px; background: #2A2A2D; overflow: hidden; } .show .sp i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--teal), var(--teal-bright)); transition: width .9s cubic-bezier(.45,0,.2,1); }
.show .sp.a i { width: 30%; } .show .sp.b i { width: 100%; }
.show .st-p .sc-f b { color: #fff; }
/* markets + target */
.show .smk { display: grid; grid-template-columns: auto auto; gap: 34px; align-items: center; }
.show .sm-map { display: grid; gap: 8px; justify-items: center; } .show .sm-map svg { width: min(460px, 56vw); height: auto; border-radius: 18px; background: #141416; border: 1px solid rgba(255,255,255,.08); }
.show .sm-map .grid line { stroke: rgba(255,255,255,.06); stroke-width: .3; } .show .sm-map small, .show .sm-ring small { color: rgba(255,255,255,.6); font-size: 13.5px; }
.show .sm-map circle { fill: var(--teal-bright); fill-opacity: .7; transform-origin: center; transform-box: fill-box; transform: scale(0); transition: transform .6s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--i) * 120ms); }
.show .st-m.on .sm-map circle { transform: scale(1); }
.show .sm-ring { position: relative; width: 170px; display: grid; justify-items: center; gap: 6px; }
.show .sm-ring svg { width: 170px; height: 170px; } .show .sm-ring circle { fill: none; stroke-width: 9; } .show .sm-ring .bg { stroke: #2A2A2D; } .show .sm-ring .fg { stroke: var(--teal-bright); stroke-linecap: round; stroke-dasharray: 0 264; transition: stroke-dasharray 1.4s cubic-bezier(.45,0,.2,1) .3s; }
.show .st-m.on .sm-ring .fg { stroke-dasharray: 169 264; }
.show .sm-ring b { position: absolute; top: 62px; font: 700 34px/1 var(--display); }
/* calendar, fair, support */
.show .st-c { grid-template-columns: auto auto; gap: 26px; justify-content: center; }
.show .scal { width: 280px; padding: 18px; border-radius: 22px; background: #1C1C1E; border: 1px solid rgba(255,255,255,.08); display: grid; gap: 12px; } .show .scal > b { font: 600 18px/1 var(--display); }
.show .scg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.show .scg span { height: 28px; border-radius: 7px; background: #2A2A2D; display: grid; place-items: center; }
.show .scg i { width: 8px; height: 8px; border-radius: 50%; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.show .scg i.e0 { background: #8C9BF0; } .show .scg i.e1 { background: var(--teal-bright); } .show .scg i.e2 { background: #F06292; } .show .scg i.e3 { background: #F0A06A; }
.show .st-c.on .scg i { transform: scale(1); }
.show .scards { display: grid; gap: 12px; }
.show .sc.mini2 { width: 320px; grid-template-columns: auto 1fr; gap: 12px; align-items: center; opacity: .25; transform: translateX(12px); transition: all .5s cubic-bezier(.22,.8,.2,1); }
.show .sc.mini2 > svg { width: 24px; height: 24px; color: #9FF0EC; } .show .sc.mini2 b { display: block; font-size: 15px; } .show .sc.mini2 small { color: rgba(255,255,255,.55); font-size: 13px; }
.show .sc.mini2.on { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .show .st-ch { grid-template-columns: 1fr; gap: 18px; justify-items: center; } .show .chs { justify-self: center; gap: 8px; } .show .chp { height: 38px; font-size: 13px; padding: 0 12px 0 10px; } .show .chp.go { transform: translateY(-4px); }
  .show .inbox { width: 160px; padding: 14px 0; } .show .inbox b { font-size: 34px; }
  .show .st-d, .show .st-c, .show .smk { grid-template-columns: 1fr; gap: 14px; justify-items: center; } .show .sheet-pdf { width: 120px; height: 150px; display: none; }
  .show .sm-map svg { width: 86vw; } .show .sm-ring, .show .sm-ring svg { width: 120px; height: 120px; } .show .sm-ring b { top: 44px; font-size: 26px; }
  .show .scal { width: 86vw; } .show .sc.mini2 { width: 86vw; } .show .scg span { height: 20px; }
  .show .sq small, .show .ss small { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .show .chp, .show .ss-veh, .show .ss-line i, .show .sp i, .show .sm-map circle, .show .sm-ring .fg, .show .scg i, .show .sheet-pdf { transition: none; } }
.shipfoot svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--teal); }
.shipfoot > span { display: inline-flex; align-items: center; gap: 2px; }
.kpi .big { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .kpis .kpi .big { font-size: 21px; line-height: 1.15; }
  .kpi.kpi-ic { grid-template-columns: 1fr; } .kpi.kpi-ic .kic { grid-row: auto; width: 32px; height: 32px; }
}
.dns { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; font-size: 11.5px; font-weight: 600; color: var(--amber); }
.dns svg { width: 12px; height: 12px; } .dns.ok { color: var(--teal-ink); }
.head .tag svg { width: 13px; height: 13px; margin-right: 5px; }

/* ---------- intro v2: scattered data → one panel, ads stream, web & news, your data ---------- */
.show .viz { overflow: visible; }
.show .st-hub { place-items: stretch; }
.show .hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .6s; }
.show .st-hub.lines .hub-lines { opacity: 1; }
.show .hub-lines path { fill: none; stroke: rgba(52,198,195,.35); stroke-width: 1.4; stroke-dasharray: 600; stroke-dashoffset: 600; animation: hubdraw 1.1s cubic-bezier(.22,.8,.2,1) forwards; }
.show .hub-lines circle { fill: #9FF0EC; filter: drop-shadow(0 0 4px #34C6C3); }
@keyframes hubdraw { to { stroke-dashoffset: 0; } }
.show .isl { position: absolute; left: var(--x); top: var(--y); display: flex; gap: 9px; align-items: center; padding: 9px 13px 9px 9px; border-radius: 16px; background: #1C1C1E; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 40px -24px rgba(0,0,0,.9); white-space: nowrap;
  transform: translate(-50%, -50%) rotate(var(--r)) scale(.7); opacity: 0; filter: blur(4px); transition: left 1.1s cubic-bezier(.65,0,.2,1), top 1.1s cubic-bezier(.65,0,.2,1), transform .9s cubic-bezier(.22,.8,.2,1), opacity .5s, filter .6s, border-color .6s; }
.show .isl.in { opacity: .92; filter: blur(.4px); transform: translate(-50%, -50%) rotate(var(--r)) scale(.92); animation: isldrift 4.5s ease-in-out var(--d) infinite alternate; }
@keyframes isldrift { to { margin-top: -10px; margin-left: 6px; } }
.show .st-hub.join .isl { transform: translate(-50%, -50%) rotate(0) scale(.86); filter: none; opacity: 1; border-color: rgba(52,198,195,.35); animation: none; margin: 0; }
.show .isl-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: #9FF0EC; flex: none; } .show .isl-ic svg { width: 16px; height: 16px; }
.show .isl b { display: block; font-size: 13px; } .show .isl small { display: block; font-size: 11.5px; color: rgba(255,255,255,.55); }
.show .hub { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center;
  background: radial-gradient(circle at 50% 35%, #0f5e63, #0B2233 70%); border: 1px solid rgba(52,198,195,.45); box-shadow: 0 0 0 10px rgba(52,198,195,.06), 0 0 80px rgba(52,198,195,.35);
  transform: translate(-50%, -50%) scale(.3); opacity: 0; transition: transform 1s cubic-bezier(.34,1.56,.64,1) .2s, opacity .6s .2s; z-index: 2; }
.show .st-hub.join .hub { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: hubpulse 2.4s ease-in-out 1.4s infinite; }
@keyframes hubpulse { 50% { box-shadow: 0 0 0 18px rgba(52,198,195,.04), 0 0 110px rgba(52,198,195,.5); } }
.show .hub img { width: 84px; margin-bottom: 6px; } .show .hub b { font: 700 30px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .show .hub small { font-size: 11.5px; color: rgba(255,255,255,.6); }
.show .hub-t { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9FF0EC; }
/* ads stream */
.show .st-ads { display: grid; place-items: center; align-content: center; gap: 18px; }
.show .ads-k { display: flex; gap: 12px; }
.show .ads-k div { position: relative; min-width: 150px; padding: 12px 16px; border-radius: 18px; background: #1C1C1E; border: 1px solid rgba(255,255,255,.08); text-align: center; }
.show .ads-k small { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); } .show .ads-k b { font: 700 28px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.show .ads-k i { position: absolute; top: -10px; right: -6px; padding: 3px 8px; border-radius: 999px; background: #3BE08A; color: #04260f; font: 700 11.5px/1 var(--font); font-style: normal; opacity: 0; transform: translateY(6px); transition: all .4s; } .show .ads-k i.on { opacity: 1; transform: none; }
.show .ads-rows { width: min(980px, 100vw); overflow: hidden; display: grid; gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.show .ads-row { display: flex; gap: 10px; width: max-content; animation: adflow 26s linear infinite; } .show .ads-row.rev { animation-direction: reverse; animation-duration: 30s; }
.show .ads-row img { width: 104px; height: 104px; border-radius: 14px; object-fit: cover; box-shadow: 0 10px 24px -14px rgba(0,0,0,.9); }
@keyframes adflow { to { transform: translateX(-50%); } }
.show .ads-src { display: flex; gap: 10px; } .show .ads-src span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 13px; } .show .ads-src svg { width: 15px; height: 15px; color: #9FF0EC; }
/* website health + news */
.show .st-web { grid-template-columns: auto auto; gap: 18px; justify-content: center; align-items: stretch; align-content: center; }
.show .wcard, .show .ncard { width: min(400px, 44vw); }
.show .wrow { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.show .wring { position: relative; width: 110px; height: 110px; display: grid; place-content: center; text-align: center; } .show .wring svg { position: absolute; inset: 0; }
.show .wring circle { fill: none; stroke-width: 8; } .show .wring .bg { stroke: #2A2A2D; } .show .wring .fg { stroke: #3BE08A; stroke-linecap: round; stroke-dasharray: 0 264; transition: stroke-dasharray 1.2s cubic-bezier(.45,0,.2,1) .2s; }
.show .st-web.on .wring .fg { stroke-dasharray: 264 264; } .show .wring b { position: relative; font: 700 22px/1 var(--display); } .show .wring small { position: relative; font-size: 11px; color: rgba(255,255,255,.55); }
.show .wbars { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 80px; padding-bottom: 18px; }
.show .wbars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--teal-bright); opacity: .85; height: 0; transition: height .6s cubic-bezier(.22,.8,.2,1); transition-delay: calc(var(--i) * 40ms); }
.show .st-web.on .wbars i { height: var(--h); } .show .wbars small { position: absolute; left: 0; bottom: 0; font-size: 12px; color: rgba(255,255,255,.6); }
.show .nlist2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.show .nlist2 li { padding: 9px 12px; border-radius: 12px; background: #2A2A2D; opacity: .2; transform: translateX(10px); transition: all .45s cubic-bezier(.22,.8,.2,1); min-height: 40px; }
.show .nlist2 li.on { opacity: 1; transform: none; } .show .nlist2 li b { display: block; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .show .nlist2 li small { font-size: 11px; color: rgba(255,255,255,.5); }
.show .nlist2 li i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.1); margin: 4px 0; } .show .nlist2 li i.s { width: 55%; }
/* your data */
.show .ycard { width: min(460px, 92%); }
.show .ysw { display: flex; gap: 12px; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.show .ysw span:first-child { color: #fff; } .show .ysw span:last-child { color: rgba(255,255,255,.4); } .show .ysw.on span:first-child { color: rgba(255,255,255,.4); } .show .ysw.on span:last-child { color: #9FF0EC; }
.show .ysw button { width: 56px; height: 30px; border-radius: 999px; border: 0; background: #3A3A3D; position: relative; transition: background .4s; }
.show .ysw button i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .4s cubic-bezier(.34,1.56,.64,1); } .show .ysw.on button { background: var(--teal); } .show .ysw.on button i { left: 29px; }
.show .ylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.show .ylist li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: #2A2A2D; }
.show .yi { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: #9FF0EC; } .show .yi svg { width: 16px; height: 16px; }
.show .ylist b { font-size: 14px; } .show .ylist small { font-size: 12px; color: rgba(255,255,255,.45); }
.show .yc { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: transparent; transition: all .35s; } .show .yc svg { width: 13px; height: 13px; }
.show .ylist li.on small { color: #3BE08A; } .show .ylist li.on .yc { background: #3BE08A; color: #04260f; transform: scale(1.1); }
@media (max-width: 760px) {
  .show .isl:nth-child(n+9) { display: none; } .show .isl { padding: 6px 9px 6px 6px; } .show .isl small { display: none; } .show .isl b { font-size: 11.5px; } .show .isl-ic { width: 24px; height: 24px; }
  .show .hub { width: 140px; height: 140px; } .show .hub img { width: 60px; } .show .hub b { font-size: 22px; }
  .show .ads-k { gap: 6px; } .show .ads-k div { min-width: 0; padding: 8px 10px; } .show .ads-k b { font-size: 18px; } .show .ads-row img { width: 72px; height: 72px; }
  .show .st-web { grid-template-columns: 1fr; gap: 10px; } .show .wcard, .show .ncard { width: 88vw; } .show .ncard .nlist2 li:nth-child(n+3) { display: none; } .show .wring { width: 86px; height: 86px; }
}
@media (prefers-reduced-motion: reduce) { .show .ads-row, .show .isl.in, .show .hub { animation: none; } }
.show { grid-template-columns: minmax(0, 1fr); }
.show .scene { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.show .cap { max-width: 100%; min-width: 0; }
.show .viz { max-width: 100%; min-width: 0; }
.show .ads-rows { max-width: 100%; }

/* shared demo link: one tap to start the story with sound */
.show .gate { grid-row: 1 / -1; align-self: center; justify-self: center; display: grid; justify-items: center; gap: 16px; text-align: center; padding: 24px; animation: gatein .9s cubic-bezier(.22,.8,.2,1); }
.show .gate img { width: 150px; margin-bottom: 18px; opacity: .95; }
.show .gate h1 { font-size: clamp(32px, 5vw, 60px); letter-spacing: -.045em; line-height: 1.05; max-width: 20ch; }
.show .gate p { color: rgba(255,255,255,.6); font-size: clamp(16px, 1.6vw, 19px); }
.show .gate-play { display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 30px 0 22px; margin-top: 14px; border: 0; border-radius: 999px; background: var(--teal); color: #fff; font: 600 18px/1 var(--font); box-shadow: 0 0 0 10px rgba(52,198,195,.12), 0 18px 50px -12px rgba(52,198,195,.7); animation: gatepulse 2.2s ease-in-out infinite; }
.show .gate-play svg { width: 22px; height: 22px; } .show .gate-play:hover { background: #00797C; } .show .gate-play:focus-visible { outline: 3px solid #9FF0EC; outline-offset: 4px; }
.show .gate small { display: inline-flex; gap: 6px; align-items: center; color: rgba(255,255,255,.5); font-size: 13.5px; } .show .gate small svg { width: 16px; height: 16px; }
@keyframes gatein { from { opacity: 0; transform: translateY(18px); } }
@keyframes gatepulse { 50% { box-shadow: 0 0 0 18px rgba(52,198,195,.06), 0 18px 60px -10px rgba(52,198,195,.8); } }
@media (prefers-reduced-motion: reduce) { .show .gate, .show .gate-play { animation: none; } }
.crm-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pick .pick-add .cc { background: var(--teal-soft); color: var(--teal-ink); } .pick .pick-add .cc svg { width: 15px; height: 15px; }
.pick .pick-add b { color: var(--teal-ink); }