:root {
  --ink: #16362d;
  --ink-soft: #49675f;
  --muted: #788d87;
  --green: #11845e;
  --green-deep: #096b4d;
  --mint: #69d8ad;
  --mint-soft: #dff5eb;
  --gold: #b58236;
  --paper: #f7faf7;
  --surface: rgba(255, 255, 255, .93);
  --line: rgba(20, 74, 58, .11);
  --line-strong: rgba(20, 74, 58, .19);
  --shadow: 0 18px 50px rgba(28, 72, 58, .08);
  --radius: 24px;
  --ease: cubic-bezier(.22, .75, .24, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(17, 132, 94, .22); outline-offset: 2px; }

.console-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: linear-gradient(145deg, #f9fcf9 0%, #f1f7f3 50%, #fbfaf5 100%); }
.console-bg::before { content: ""; position: absolute; inset: 0; opacity: .52; background-image: linear-gradient(rgba(16, 92, 68, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 92, 68, .035) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.console-bg i { position: absolute; width: 36vw; aspect-ratio: 1; border-radius: 50%; filter: blur(2px); opacity: .52; }
.console-bg i:nth-child(1) { top: -20vw; right: -8vw; background: radial-gradient(circle, rgba(83, 210, 163, .25), transparent 68%); }
.console-bg i:nth-child(2) { bottom: -26vw; left: 12vw; background: radial-gradient(circle, rgba(184, 130, 51, .14), transparent 68%); }
.console-bg i:nth-child(3) { top: 32%; left: 33%; background: radial-gradient(circle, rgba(160, 230, 202, .13), transparent 70%); }

.access-gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; transition: opacity .38s var(--ease), visibility .38s; }
.access-gate::before { content: ""; position: absolute; inset: 0; background: rgba(246, 250, 247, .6); backdrop-filter: blur(14px); }
.is-connected .access-gate { opacity: 0; visibility: hidden; pointer-events: none; }
.access-card { position: relative; width: min(100%, 480px); padding: 42px; overflow: hidden; background: rgba(255,255,255,.92); border: 1px solid rgba(17, 132, 94, .15); border-radius: 32px; box-shadow: 0 30px 90px rgba(20, 68, 54, .16); }
.access-card::after { content: ""; position: absolute; width: 250px; height: 250px; right: -110px; top: -110px; border: 1px solid rgba(17,132,94,.12); border-radius: 50%; box-shadow: 0 0 0 28px rgba(17,132,94,.035), 0 0 0 58px rgba(17,132,94,.025); }
.access-brand { height: 38px; margin-bottom: 48px; position: relative; z-index: 1; }
.access-brand img { display: block; width: 138px; height: 38px; object-fit: contain; object-position: left center; }
.access-orbit { position: absolute; top: 34px; right: 40px; width: 82px; height: 82px; border: 1px solid rgba(17, 132, 94, .14); border-radius: 50%; }
.access-orbit::before { content: ""; position: absolute; inset: 13px; border: 1px dashed rgba(17,132,94,.2); border-radius: inherit; animation: orbitSpin 12s linear infinite; }
.access-orbit span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 7px rgba(105,216,173,.14); }
.access-orbit span:first-child { top: 3px; left: 26px; }
.access-orbit span:nth-child(2) { right: 2px; bottom: 21px; background: var(--gold); }
.access-orbit b { position: absolute; inset: 34px; border-radius: 50%; background: var(--green); box-shadow: 0 0 22px rgba(17,132,94,.32); }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.console-kicker, .mini-label { margin: 0 0 8px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.access-card h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(30px, 6vw, 42px); line-height: 1.14; letter-spacing: -.04em; }
.access-copy { position: relative; z-index: 1; margin: 16px 0 28px; color: var(--ink-soft); line-height: 1.8; }
.secure-input { display: block; position: relative; z-index: 1; margin-bottom: 14px; }
.secure-input > span:first-child, .field-group > span { display: block; margin: 0 0 8px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.secure-input-row { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 7px 6px 18px; background: #f5f9f6; border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s, box-shadow .2s, background .2s; }
.secure-input-row:focus-within { background: #fff; border-color: rgba(17,132,94,.42); box-shadow: 0 0 0 4px rgba(17,132,94,.08); }
.secure-input-row input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
.icon-button { min-width: 52px; height: 40px; padding: 0 12px; border: 0; border-radius: 11px; background: #fff; color: var(--green-deep); cursor: pointer; font-size: 12px; font-weight: 800; }
.primary-action { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 56px; padding: 0 19px 0 22px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--green), #1aa474); box-shadow: 0 14px 30px rgba(17,132,94,.23); cursor: pointer; font-weight: 800; transition: transform .2s var(--ease), box-shadow .2s, filter .2s; }
.primary-action:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(17,132,94,.29); filter: saturate(1.08); }
.primary-action:active { transform: translateY(0) scale(.985); }
.primary-action[disabled] { cursor: wait; opacity: .7; transform: none; }
.primary-action i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16); font-style: normal; }
.primary-action.compact { width: auto; min-height: 44px; padding: 0 18px; }
.access-status { position: relative; z-index: 1; min-height: 20px; margin: 14px 0 2px; color: var(--muted); font-size: 12px; text-align: center; }
.access-status.is-error { color: #b44a42; }
.back-home { position: relative; z-index: 1; display: block; margin-top: 14px; color: var(--ink-soft); font-size: 13px; text-align: center; text-decoration: none; }
.back-home:hover { color: var(--green); }

.console-shell { position: relative; z-index: 1; display: grid; grid-template-columns: 254px minmax(0, 1fr); min-height: 100vh; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .42s var(--ease), transform .42s var(--ease), visibility .42s; }
.is-connected .console-shell { opacity: 1; visibility: visible; transform: none; }
.console-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 28px 22px 24px; background: rgba(250, 252, 250, .9); border-right: 1px solid var(--line); backdrop-filter: blur(16px); }
.console-brand { display: block; width: 122px; height: 34px; margin: 0 10px 22px; }
.console-brand img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.workspace-name { margin: 0 10px 30px; }
.workspace-name span { display: block; font-size: 14px; font-weight: 800; }
.workspace-name small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.console-nav { display: grid; gap: 7px; }
.console-nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 13px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: #587068; cursor: pointer; font-size: 14px; font-weight: 700; text-align: left; transition: color .18s, background .18s, transform .18s var(--ease), border-color .18s; }
.console-nav-item:hover { color: var(--green-deep); background: rgba(255,255,255,.72); border-color: var(--line); transform: translateX(2px); }
.console-nav-item.is-active { color: #fff; background: linear-gradient(135deg, #176e53, #0d8a60); box-shadow: 0 10px 24px rgba(12,112,79,.18); }
.nav-glyph { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(18,92,68,.13); border-radius: 9px; background: rgba(255,255,255,.7); color: var(--green); font-size: 17px; }
.console-nav-item.is-active .nav-glyph { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.12); color: #fff; }
.sidebar-spacer { flex: 1; min-height: 28px; }
.privacy-card { display: flex; gap: 10px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); }
.privacy-dot { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(105,216,173,.13); }
.privacy-card strong { font-size: 12px; }
.privacy-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.sidebar-link { padding: 8px 10px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; text-align: left; text-decoration: none; }
.sidebar-link:hover { color: var(--green); }

.console-main { min-width: 0; padding: 30px clamp(22px, 3.2vw, 48px) 64px; }
.console-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1600px; margin: 0 auto; }
.console-header h1 { margin: 0; font-size: clamp(29px, 3vw, 42px); letter-spacing: -.04em; line-height: 1.08; }
.view-subtitle { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.header-controls { display: flex; align-items: center; gap: 10px; }
.range-control { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.86); }
.range-control > span { color: var(--muted); font-size: 11px; }
.range-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 13px; min-width: 108px; min-height: 36px; padding: 0 8px 0 10px; border: 0; border-radius: 10px; outline: none; color: var(--ink); background: transparent; cursor: pointer; font: inherit; }
.range-trigger strong { font-size: 12px; font-weight: 850; white-space: nowrap; }
.range-trigger > i { position: relative; width: 16px; height: 16px; border-radius: 50%; background: rgba(17,132,94,.07); transition: transform .22s var(--ease), background .22s ease; }
.range-trigger > i::before, .range-trigger > i::after { content: ""; position: absolute; top: 7px; width: 6px; height: 1.5px; border-radius: 2px; background: var(--green-deep); }
.range-trigger > i::before { left: 3px; transform: rotate(42deg); }
.range-trigger > i::after { right: 3px; transform: rotate(-42deg); }
.range-trigger:hover, .range-trigger:focus-visible, .range-trigger[aria-expanded="true"] { color: var(--green-deep); background: rgba(222,246,235,.62); }
.range-trigger[aria-expanded="true"] > i { background: rgba(17,132,94,.13); transform: rotate(180deg); }
.range-menu[hidden] { display: none; }
.range-menu { position: absolute; z-index: 90; top: calc(100% + 10px); right: 0; display: grid; gap: 6px; width: min(310px,calc(100vw - 28px)); padding: 9px; border: 1px solid rgba(25,91,70,.14); border-radius: 20px; opacity: 0; background: rgba(253,255,253,.96); box-shadow: 0 24px 70px rgba(20,69,54,.18), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(22px) saturate(130%); transform: translateY(-7px) scale(.985); transform-origin: top right; pointer-events: none; transition: opacity .18s ease, transform .22s var(--ease); }
.range-menu::before { content: ""; position: absolute; top: -5px; right: 28px; width: 10px; height: 10px; border-top: 1px solid rgba(25,91,70,.13); border-left: 1px solid rgba(25,91,70,.13); background: rgba(253,255,253,.96); transform: rotate(45deg); }
.range-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.range-menu button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 62px; padding: 10px 12px 10px 15px; overflow: hidden; border: 1px solid transparent; border-radius: 14px; outline: none; color: var(--ink-soft); background: transparent; cursor: pointer; text-align: left; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.range-menu button::before { content: ""; position: absolute; inset: 7px auto 7px 0; width: 3px; border-radius: 0 4px 4px 0; opacity: 0; background: linear-gradient(180deg,var(--green),var(--mint)); transform: scaleY(.45); transition: opacity .18s ease, transform .18s ease; }
.range-menu button:hover, .range-menu button:focus-visible { color: var(--green-deep); border-color: rgba(17,132,94,.1); background: rgba(236,249,242,.72); transform: translateX(2px); }
.range-menu button[aria-selected="true"] { color: var(--green-deep); border-color: rgba(17,132,94,.14); background: linear-gradient(105deg,rgba(222,247,235,.9),rgba(250,253,250,.95)); }
.range-menu button[aria-selected="true"]::before { opacity: 1; transform: scaleY(1); }
.range-menu button > span { display: grid; gap: 5px; }
.range-menu button strong { color: inherit; font-size: 12px; }
.range-menu button small { color: var(--muted); font-size: 8px; font-weight: 600; }
.range-menu button > i { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; opacity: 0; color: #fff; background: linear-gradient(145deg,var(--green),var(--mint)); box-shadow: 0 7px 18px rgba(17,132,94,.18); font-size: 10px; font-style: normal; transform: scale(.72); transition: opacity .18s ease, transform .22s var(--ease); }
.range-menu button[aria-selected="true"] > i { opacity: 1; transform: scale(1); }
.range-native-select { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.control-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.86); color: var(--ink-soft); cursor: pointer; font-size: 12px; font-weight: 800; transition: transform .18s var(--ease), border-color .18s, color .18s, box-shadow .18s; }
.control-button:hover { color: var(--green); border-color: rgba(17,132,94,.3); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(23,82,63,.07); }
.control-button.is-strong { color: #fff; border-color: var(--green); background: var(--green); }
.refresh-icon.is-spinning { display: inline-block; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.data-freshness { display: flex; align-items: center; gap: 8px; max-width: 1600px; margin: 20px auto 12px; color: var(--muted); font-size: 11px; }
.auto-refresh-label { margin-left: auto; }
.live-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(105,216,173,.45); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 8px rgba(105,216,173,0); } 100% { box-shadow: 0 0 0 0 rgba(105,216,173,0); } }

.console-view { display: none; max-width: 1600px; margin: 0 auto; animation: viewIn .34s var(--ease) both; }
.console-view.is-active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.console-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.console-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.overview-intro { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 180px; padding: 34px clamp(28px, 4vw, 54px); background: linear-gradient(118deg, rgba(255,255,255,.98), rgba(229,247,239,.94)); }
.overview-intro::before { content: ""; position: absolute; right: 13%; width: 190px; height: 190px; border: 1px solid rgba(17,132,94,.12); border-radius: 50%; box-shadow: 0 0 0 34px rgba(17,132,94,.035), 0 0 0 68px rgba(17,132,94,.02); }
.overview-intro h2, .tools-intro h2 { max-width: 760px; margin: 0; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.035em; }
.overview-intro p:not(.mini-label), .tools-intro p:not(.mini-label) { max-width: 680px; margin: 12px 0 0; color: var(--ink-soft); line-height: 1.75; }
.live-visitor-count { position: relative; z-index: 1; flex: 0 0 176px; display: grid; place-items: center; padding: 19px; border: 1px solid rgba(17,132,94,.15); border-radius: 20px; background: rgba(255,255,255,.7); }
.live-visitor-count span, .live-visitor-count small { color: var(--muted); font-size: 11px; }
.live-visitor-count strong { margin: 3px 0; color: var(--green); font-size: 50px; line-height: 1; }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.metric-card { position: relative; min-height: 160px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 10px 34px rgba(30,72,59,.045); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.metric-card:hover { transform: translateY(-3px); border-color: rgba(17,132,94,.24); box-shadow: 0 16px 38px rgba(30,72,59,.085); }
.metric-card::before { content: ""; position: absolute; width: 80px; height: 80px; right: -28px; bottom: -28px; border-radius: 50%; background: rgba(105,216,173,.08); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-top span { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.metric-top i { color: rgba(17,132,94,.55); font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .12em; }
.metric-card > strong { display: block; margin: 19px 0 5px; font-size: clamp(28px, 3vw, 39px); letter-spacing: -.04em; line-height: 1; }
.metric-card > p, .metric-foot { margin: 0; color: var(--muted); font-size: 10px; }
.metric-card > p.is-up { color: var(--green); }
.metric-card > p.is-down { color: #bc6658; }
.metric-spark { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: flex-end; gap: 2px; width: 55px; height: 22px; }
.metric-spark i { flex: 1; min-height: 2px; border-radius: 3px 3px 1px 1px; background: linear-gradient(to top, rgba(17,132,94,.25), rgba(17,132,94,.65)); }
.metric-foot { position: absolute; bottom: 17px; left: 20px; }

.dashboard-grid { display: grid; gap: 12px; margin-top: 12px; }
.dashboard-grid-main { grid-template-columns: minmax(0, 1.72fr) minmax(300px, .72fr); }
.dashboard-grid-insights { grid-template-columns: 1fr 1fr 1fr; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 23px 24px 0; }
.card-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.card-heading p:not(.mini-label) { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.chart-legend { display: flex; gap: 12px; color: var(--muted); font-size: 10px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-legend i { width: 14px; height: 3px; border-radius: 2px; }
.legend-green { background: var(--green); }
.legend-mint { background: var(--mint); }
.chart-stage { position: relative; height: 310px; padding: 18px 14px 12px; }
.chart-stage canvas { display: block; width: 100%; height: 100%; }
.chart-tooltip { position: absolute; z-index: 5; min-width: 116px; padding: 10px 12px; pointer-events: none; color: #fff; border-radius: 11px; background: rgba(17,54,43,.92); box-shadow: 0 12px 30px rgba(17,54,43,.18); font-size: 10px; line-height: 1.7; transform: translate(-50%, -110%); }
.status-chip, .ai-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; color: var(--green-deep); background: var(--mint-soft); font-size: 9px; font-weight: 800; }
.status-chip::before { content: ""; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--mint); }
.status-chip.muted { color: var(--muted); background: #f1f5f2; }
.ai-chip { color: #8a642d; background: #fbf4e7; }
.visitor-stream { max-height: 310px; padding: 10px 18px 20px; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(17,132,94,.2) transparent; }
.visitor-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid rgba(20,74,58,.07); animation: streamIn .35s var(--ease) both; }
@keyframes streamIn { from { opacity: 0; transform: translateX(8px); } }
.visitor-item:last-child { border-bottom: 0; }
.visitor-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; color: var(--green); background: var(--mint-soft); font-size: 15px; }
.visitor-copy { min-width: 0; }
.visitor-copy strong, .visitor-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visitor-copy strong { font-size: 11px; }
.visitor-copy span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.visitor-time { color: var(--muted); font-size: 9px; }
.text-action { padding: 4px; border: 0; background: none; color: var(--green); cursor: pointer; font-size: 10px; font-weight: 800; }
.rank-list { padding: 14px 24px 24px; }
.rank-list.tall { min-height: 330px; }
.rank-item { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; }
.rank-number { color: var(--muted); font-size: 10px; font-weight: 800; }
.rank-copy { min-width: 0; }
.rank-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rank-copy-head strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rank-copy-head span { color: var(--muted); font-size: 9px; }
.rank-bar { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #edf3ef; }
.rank-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--mint)); transform-origin: left; animation: barGrow .6s var(--ease) both; }
@keyframes barGrow { from { transform: scaleX(0); } }
.rank-value { font-size: 11px; font-weight: 800; }
.source-overview { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 20px; padding: 13px 24px 24px; }
.mini-donut, .large-donut { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--green) 0 45%, var(--mint) 45% 70%, #d8e7df 70% 100%); }
.mini-donut::before, .large-donut::before { content: ""; position: absolute; inset: 18%; border-radius: inherit; background: #fff; }
.mini-donut span, .large-donut span { position: relative; z-index: 1; display: grid; place-items: center; font-size: 18px; font-weight: 900; }
.mini-donut small, .large-donut small { margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 700; }
.source-compact { display: grid; gap: 10px; }
.source-compact-item { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 8px; font-size: 10px; }
.source-compact-item i, .source-list-item i { width: 7px; height: 7px; border-radius: 50%; }
.source-compact-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-compact-item strong { font-size: 10px; }
.insight-list { display: grid; gap: 9px; padding: 14px 22px 22px; }
.insight-item { padding: 11px 12px; border-left: 3px solid var(--mint); border-radius: 6px 12px 12px 6px; background: #f6faf7; }
.insight-item.warning { border-left-color: #d7a457; background: #fdf9f1; }
.insight-item strong { display: block; font-size: 11px; }
.insight-item p { margin: 4px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.6; }
.empty-state { display: grid; place-items: center; min-height: 180px; color: var(--muted); font-size: 12px; text-align: center; }
.empty-state.compact { min-height: 90px; }

.geography-grid { grid-template-columns: minmax(0, 1.65fr) minmax(330px, .75fr); }
.signal-map-card { min-height: 620px; }
.signal-map { position: relative; height: 470px; margin: 20px 24px 0; overflow: hidden; border: 1px solid rgba(17,132,94,.12); border-radius: 20px; background: radial-gradient(circle at 68% 54%, rgba(105,216,173,.16), transparent 18%), linear-gradient(145deg, rgba(243,250,246,.96), rgba(252,252,248,.96)); }
.map-grid-lines { position: absolute; inset: 0; opacity: .65; background-image: linear-gradient(rgba(17,132,94,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(17,132,94,.07) 1px, transparent 1px); background-size: 62px 62px; }
.signal-map::before, .signal-map::after { content: ""; position: absolute; border: 1px solid rgba(17,132,94,.1); border-radius: 50%; }
.signal-map::before { width: 70%; height: 140%; left: 15%; top: -20%; }
.signal-map::after { width: 110%; height: 64%; left: -5%; top: 18%; }
.map-arc { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(17,132,94,.35), transparent); transform-origin: right; }
.arc-one { width: 52%; right: 30%; top: 48%; transform: rotate(-17deg); }
.arc-two { width: 46%; right: 30%; top: 49%; transform: rotate(21deg); }
.map-origin { position: absolute; z-index: 3; left: 67%; top: 51%; display: flex; align-items: center; gap: 8px; transform: translate(-50%,-50%); }
.map-origin i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 8px rgba(17,132,94,.12), 0 0 28px rgba(17,132,94,.42); }
.map-origin span { padding: 5px 8px; border-radius: 7px; color: var(--green-deep); background: rgba(255,255,255,.84); font-size: 9px; font-weight: 800; white-space: nowrap; }
.map-signal { position: absolute; z-index: 4; width: var(--size, 12px); height: var(--size, 12px); border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: var(--signal-color, var(--mint)); box-shadow: 0 0 0 7px color-mix(in srgb, var(--signal-color, var(--mint)) 18%, transparent), 0 7px 22px rgba(12,83,59,.18); transform: translate(-50%,-50%); cursor: pointer; animation: signalFloat 3.2s ease-in-out infinite alternate; }
@keyframes signalFloat { to { transform: translate(-50%,calc(-50% - 3px)); } }
.map-signal::after { content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 9px); min-width: max-content; padding: 5px 7px; opacity: 0; pointer-events: none; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.95); color: var(--ink); box-shadow: 0 8px 18px rgba(25,73,58,.1); font-size: 9px; font-weight: 800; transform: translate(-50%,4px); transition: opacity .18s, transform .18s; }
.map-signal:hover::after, .map-signal:focus::after { opacity: 1; transform: translate(-50%,0); }
.map-foot { display: flex; justify-content: space-between; gap: 20px; padding: 15px 25px 22px; color: var(--muted); font-size: 9px; }
.region-detail-card { min-height: 620px; }
.data-table-wrap { width: 100%; overflow: auto; }
.region-detail-card .data-table-wrap { padding: 14px 18px 20px; max-height: 548px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.data-table th { position: sticky; top: 0; z-index: 1; padding: 10px 9px; color: var(--muted); background: rgba(255,255,255,.98); font-size: 9px; font-weight: 800; text-align: left; white-space: nowrap; }
.data-table td { padding: 12px 9px; border-top: 1px solid rgba(20,74,58,.07); color: var(--ink-soft); white-space: nowrap; }
.data-table td strong { color: var(--ink); }
.table-location { display: flex; align-items: center; gap: 7px; }
.table-location span:first-child { font-size: 15px; }
.table-progress { width: 66px; height: 4px; overflow: hidden; border-radius: 9px; background: #edf3ef; }
.table-progress i { display: block; height: 100%; border-radius: inherit; background: var(--green); }

.acquisition-top { grid-template-columns: 1fr 1fr; }
.acquisition-bottom { grid-template-columns: 1fr 1fr; }
.source-analysis { display: grid; grid-template-columns: 220px minmax(0,1fr); align-items: center; gap: 30px; min-height: 350px; padding: 24px 30px 32px; }
.large-donut { width: 100%; max-width: 210px; margin: auto; }
.large-donut::before { inset: 23%; }
.large-donut strong { font-size: 33px; line-height: 1; }
.source-list { display: grid; gap: 13px; }
.source-list-item { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.source-list-item > span { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.source-list-item > strong { font-size: 11px; }
.source-list-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 500; }
.conversion-funnel { display: grid; gap: 7px; min-height: 350px; padding: 24px 28px 30px; }
.funnel-step { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 53px; padding: 8px 14px; overflow: hidden; border: 1px solid rgba(17,132,94,.1); border-radius: 14px; background: linear-gradient(90deg, rgba(223,245,235,.65), rgba(255,255,255,.75)); }
.funnel-step::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--funnel-width); background: rgba(105,216,173,.09); }
.funnel-index { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--green); background: #fff; font-size: 10px; font-weight: 900; }
.funnel-copy, .funnel-value { position: relative; z-index: 1; }
.funnel-copy strong, .funnel-copy small { display: block; }
.funnel-copy strong { font-size: 11px; }
.funnel-copy small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.funnel-value { font-size: 16px; }
.device-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; min-height: 330px; padding: 22px 24px 28px; }
.device-panels h3 { margin: 0 0 16px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.dimension-list { display: grid; gap: 15px; }
.dimension-item-head { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }
.dimension-item-head strong { font-size: 11px; }
.dimension-bar { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #edf3ef; }
.dimension-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--mint)); }

.customer-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.small-stat { padding: 22px 24px; }
.small-stat span, .small-stat small { display: block; color: var(--muted); font-size: 10px; }
.small-stat strong { display: block; margin: 14px 0 5px; font-size: 32px; }
.customer-directory { margin-top: 12px; }
.customer-heading { align-items: center; padding-bottom: 18px; }
.table-search { display: flex; align-items: center; gap: 7px; min-width: 240px; min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: #f7faf8; }
.table-search span { color: var(--green); font-size: 18px; }
.table-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.customer-directory .data-table-wrap { max-height: 430px; padding: 0 18px 20px; }
.customer-data-table .customer-row { cursor: pointer; outline: none; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.customer-data-table .customer-row:hover,
.customer-data-table .customer-row:focus-visible { background: rgba(221,246,235,.48); box-shadow: inset 3px 0 0 var(--green); }
.customer-data-table .customer-row:active { transform: scale(.998); }
.customer-row-arrow { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(17,132,94,.12); border-radius: 50%; color: var(--green); background: rgba(255,255,255,.86); transition: transform .18s ease, color .18s ease, background .18s ease; }
.customer-row:hover .customer-row-arrow,
.customer-row:focus-visible .customer-row-arrow { color: #fff; background: var(--green); transform: translateX(2px); }
.business-grid { grid-template-columns: 1fr 1fr; }
.business-grid .data-table-wrap { min-height: 220px; max-height: 370px; padding: 14px 18px 20px; }
.state-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; color: var(--green-deep); background: var(--mint-soft); font-size: 8px; font-weight: 800; }
.state-badge.pending { color: #956d31; background: #fbf1dd; }
.state-badge.expired { color: #8c625d; background: #f6e8e5; }

.tools-intro { padding: 32px 6px 18px; }
.tools-intro > p:not(.mini-label) span { display: block; }
.tools-grid { grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr); }
.action-workbench { padding-bottom: 26px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; padding: 24px; }
.field-group.field-wide { grid-column: 1 / -1; }
.field-group input, .field-group select { width: 100%; min-height: 49px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; outline: 0; background: #f7faf8; color: var(--ink); transition: border-color .18s, box-shadow .18s, background .18s; }
.field-group input:focus, .field-group select:focus { border-color: rgba(17,132,94,.4); background: #fff; box-shadow: 0 0 0 4px rgba(17,132,94,.07); }
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 24px; }
.admin-action { display: grid; grid-template-columns: 37px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 76px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; text-align: left; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.admin-action:hover { transform: translateY(-3px); border-color: rgba(17,132,94,.28); box-shadow: 0 12px 28px rgba(22,79,61,.08); }
.admin-action:active { transform: translateY(0) scale(.985); }
.admin-action:disabled { cursor: wait; opacity: .62; transform: none; }
.admin-action.primary { color: #fff; border-color: var(--green); background: linear-gradient(135deg, var(--green-deep), var(--green)); }
.admin-action.warning { background: #fdfaf4; }
.action-symbol { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: var(--green); background: var(--mint-soft); font-size: 18px; }
.admin-action.primary .action-symbol { color: #fff; background: rgba(255,255,255,.14); }
.admin-action span strong, .admin-action span small { display: block; }
.admin-action span strong { font-size: 11px; }
.admin-action span small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.admin-action.primary span small { color: rgba(255,255,255,.68); }
.admin-action > i { color: var(--green); font-style: normal; }
.admin-action.primary > i { color: #fff; }
.operation-result-card { padding-bottom: 22px; }
.operation-result { display: grid; place-items: center; min-height: 300px; padding: 28px; text-align: center; }
.result-orbit { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 16px; border: 1px solid rgba(17,132,94,.17); border-radius: 50%; color: var(--green); background: #f7fbf8; box-shadow: 0 0 0 12px rgba(17,132,94,.035); font-size: 22px; }
.operation-result h3 { margin: 0; font-size: 17px; }
.operation-result p { max-width: 280px; margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; word-break: break-word; }
.operation-result.is-success .result-orbit { color: #fff; background: var(--green); box-shadow: 0 0 0 12px rgba(17,132,94,.08); }
.operation-result.is-error .result-orbit { color: #fff; background: #b65f52; box-shadow: 0 0 0 12px rgba(182,95,82,.08); }
.result-codes { display: grid; gap: 6px; width: 100%; margin-top: 16px; }
.result-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px dashed rgba(17,132,94,.25); border-radius: 10px; background: #f6faf7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.copy-code { border: 0; background: none; color: var(--green); cursor: pointer; font-family: inherit; font-size: 9px; }
.safe-notice { margin: 0 18px; padding: 14px; border-radius: 14px; background: #f6faf7; }
.safe-notice strong { font-size: 10px; }
.safe-notice p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }

.toast-stack { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: grid; gap: 9px; width: min(360px, calc(100vw - 32px)); }
.toast { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 11px; padding: 13px 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 18px 50px rgba(25,67,54,.16); animation: toastIn .3s var(--ease) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
.toast > i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.toast.error > i { background: #c66557; }
.toast span { font-size: 11px; line-height: 1.5; }
.toast button { border: 0; background: none; color: var(--muted); cursor: pointer; }
.confirm-dialog[hidden] { display: none; }
.confirm-dialog { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; }
.dialog-backdrop { position: absolute; inset: 0; background: rgba(18,45,37,.3); backdrop-filter: blur(5px); }
.dialog-panel { position: relative; width: min(100%, 410px); padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(18,45,37,.2); text-align: center; animation: dialogIn .28s var(--ease) both; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.dialog-mark { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 15px; border-radius: 50%; color: #9a6d28; background: #fbf2df; font-size: 20px; font-weight: 900; }
.dialog-panel h2 { margin: 0; font-size: 20px; }
.dialog-panel p { margin: 10px 0 22px; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.dialog-actions { display: flex; justify-content: center; gap: 10px; }

body.customer-drawer-open { overflow: hidden; }
.customer-drawer[hidden] { display: none; }
.customer-drawer { position: fixed; inset: 0; z-index: 105; pointer-events: none; }
.customer-drawer.is-open { pointer-events: auto; }
.customer-drawer-backdrop { position: absolute; inset: 0; width: 100%; border: 0; opacity: 0; background: rgba(19,46,37,.3); backdrop-filter: blur(6px); cursor: default; transition: opacity .22s ease; }
.customer-drawer.is-open .customer-drawer-backdrop { opacity: 1; }
.customer-drawer-panel { position: absolute; top: 0; right: 0; display: grid; grid-template-rows: auto minmax(0,1fr); width: min(760px, calc(100vw - 28px)); height: 100dvh; border-left: 1px solid rgba(21,92,70,.12); background: #fbfdfb; box-shadow: -24px 0 80px rgba(18,61,47,.18); transform: translateX(102%); transition: transform .3s var(--ease); }
.customer-drawer.is-open .customer-drawer-panel { transform: translateX(0); }
.customer-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 28px 30px 23px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(18px); }
.customer-drawer-header h2 { margin: 4px 0 0; color: var(--ink); font-size: clamp(25px,3vw,36px); line-height: 1.08; }
.customer-drawer-header > div > p:last-child { margin: 8px 0 0; color: var(--green); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.customer-drawer-close { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); background: #fff; cursor: pointer; font-size: 25px; line-height: 1; transition: transform .18s ease, color .18s ease, border-color .18s ease; }
.customer-drawer-close:hover { color: var(--green); border-color: rgba(17,132,94,.28); transform: rotate(5deg); }
.customer-drawer-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 30px 44px; scrollbar-gutter: stable; }
.customer-profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.customer-profile-grid article { position: relative; min-height: 118px; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.customer-profile-grid article::after { content: ""; position: absolute; right: -18px; bottom: -26px; width: 90px; height: 90px; border: 1px solid rgba(17,132,94,.09); border-radius: 50%; }
.customer-profile-grid span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.customer-profile-grid strong { position: relative; z-index: 1; display: block; margin-top: 13px; color: var(--ink); font-size: 19px; word-break: break-word; }
.customer-profile-grid small { position: relative; z-index: 1; display: block; margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.customer-profile-grid button { position: relative; z-index: 1; margin-top: 10px; padding: 0; border: 0; color: var(--green); background: none; cursor: pointer; font-size: 9px; font-weight: 800; }
.customer-detail-section { margin-top: 26px; }
.customer-detail-section > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.customer-detail-section h3 { margin: 4px 0 0; color: var(--ink); font-size: 18px; }
.customer-detail-section > header > button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(17,132,94,.18); border-radius: 10px; color: var(--green); background: rgba(255,255,255,.8); cursor: pointer; font-size: 9px; font-weight: 800; }
.customer-detail-section > header > button.warning-link { color: #9b6b2d; border-color: rgba(181,130,54,.24); }
.security-state { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 999px; color: var(--green); background: var(--mint-soft); font-size: 9px; font-weight: 800; }
.customer-license-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.customer-license-card { min-height: 145px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.72); }
.customer-license-card.is-active { border-color: rgba(17,132,94,.2); background: linear-gradient(145deg,#f1fbf6,#fff); box-shadow: 0 14px 35px rgba(25,92,70,.07); }
.customer-license-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.customer-license-head i { padding: 4px 7px; border-radius: 999px; color: #8c625d; background: #f6e8e5; font-style: normal; font-size: 8px; }
.customer-license-card.is-active .customer-license-head i { color: var(--green-deep); background: var(--mint-soft); }
.customer-license-card > strong { display: block; margin-top: 20px; color: var(--ink); font-size: 25px; line-height: 1; }
.customer-license-card > p { margin: 10px 0 0; color: var(--ink-soft); font-size: 9px; }
.customer-license-card > small { display: block; margin-top: 8px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.password-security-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.9fr); gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.password-security-card strong { color: var(--ink); font-size: 13px; }
.password-security-card p { margin: 7px 0 10px; color: var(--ink-soft); font-size: 10px; line-height: 1.65; }
.password-security-card small { color: var(--muted); font-size: 8px; }
.customer-password-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; align-content: start; }
.customer-password-form label { grid-column: 1 / -1; }
.customer-password-form label span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; font-weight: 800; }
.customer-password-form input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); background: #f9fcfa; font: inherit; font-size: 11px; }
.customer-password-form input:focus { border-color: rgba(17,132,94,.35); box-shadow: 0 0 0 3px rgba(17,132,94,.07); }
.customer-password-form > button:not(.primary-action) { padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-soft); background: #fff; cursor: pointer; font-size: 9px; }
.customer-password-form .primary-action { min-height: 42px; font-size: 9px; }
.customer-code-list, .customer-order-list { display: grid; gap: 8px; }
.customer-code-row, .customer-order-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.customer-code-row > div { min-width: 0; }
.customer-code-row span, .customer-order-row span { color: var(--muted); font-size: 8px; }
.customer-code-row strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.customer-code-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
.customer-code-row > button { flex: 0 0 auto; min-height: 32px; padding: 0 11px; border: 1px solid rgba(17,132,94,.17); border-radius: 9px; color: var(--green); background: var(--mint-soft); cursor: pointer; font-size: 9px; font-weight: 800; }
.customer-code-row.is-masked { background: #f9fbf9; }
.customer-security-note { margin: 10px 2px 0; color: var(--muted); font-size: 8px; line-height: 1.6; }
.customer-order-row > div { display: grid; gap: 5px; }
.customer-order-row > div:last-child { justify-items: end; }
.customer-order-row strong { color: var(--ink); font-size: 10px; }

@media (max-width: 1200px) {
  .console-shell { grid-template-columns: 220px minmax(0,1fr); }
  .console-sidebar { padding-inline: 16px; }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .metric-card:nth-child(4), .metric-card:nth-child(5) { min-height: 130px; }
  .dashboard-grid-insights { grid-template-columns: 1fr 1fr; }
  .insight-card { grid-column: 1 / -1; }
  .geography-grid { grid-template-columns: 1fr; }
  .signal-map-card, .region-detail-card { min-height: auto; }
  .region-detail-card .data-table-wrap { max-height: 430px; }
  .source-analysis { grid-template-columns: 170px 1fr; }
}

@media (max-width: 900px) {
  .console-shell { display: block; padding-bottom: 74px; }
  .console-sidebar { position: fixed; z-index: 40; top: auto; right: 0; bottom: 0; left: 0; display: block; width: auto; height: auto; padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid var(--line); border-right: 0; background: rgba(250,252,250,.96); }
  .console-brand, .workspace-name, .privacy-card, .sidebar-spacer, .sidebar-link { display: none; }
  .console-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .console-nav-item { display: grid; place-items: center; gap: 2px; min-height: 52px; padding: 4px 2px; border-radius: 12px; font-size: 9px; text-align: center; }
  .console-nav-item:hover { transform: none; }
  .nav-glyph { width: 24px; height: 22px; border: 0; background: none; font-size: 16px; }
  .console-nav-item.is-active .nav-glyph { border: 0; background: none; }
  .console-main { padding: 22px 18px 34px; }
  .console-header { align-items: flex-start; }
  .console-header h1 { font-size: 30px; }
  .header-controls { display: grid; grid-template-columns: 1fr auto auto; }
  .range-control > span { display: none; }
  .dashboard-grid-main, .dashboard-grid-insights, .acquisition-top, .acquisition-bottom, .business-grid, .tools-grid { grid-template-columns: 1fr; }
  .insight-card { grid-column: auto; }
  .source-analysis { grid-template-columns: 190px 1fr; }
  .action-grid { grid-template-columns: 1fr; }
  .admin-action { min-height: 68px; }
}

@media (max-width: 680px) {
  :root { --radius: 19px; }
  .access-gate { padding: 14px; }
  .access-card { padding: 30px 22px 24px; border-radius: 24px; }
  .access-brand { margin-bottom: 42px; }
  .access-orbit { top: 25px; right: 24px; transform: scale(.8); transform-origin: top right; }
  .console-main { padding: 18px 12px 30px; }
  .console-header { display: block; }
  .header-controls { margin-top: 18px; }
  .range-control { min-width: 0; }
  .control-button { padding-inline: 12px; }
  #refreshButton span:last-child { display: none; }
  .data-freshness { margin-top: 14px; }
  .auto-refresh-label { display: none; }
  .overview-intro { display: block; min-height: 0; padding: 26px 22px; }
  .overview-intro::before { right: -30px; top: -50px; }
  .overview-intro h2 { max-width: 82%; font-size: 26px; }
  .overview-intro p:not(.mini-label) { position: relative; z-index: 1; font-size: 12px; }
  .live-visitor-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 22px; padding: 13px 15px; }
  .live-visitor-count strong { margin: 0; font-size: 30px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 8px; }
  .metric-card { min-height: 132px; padding: 16px; border-radius: 17px; }
  .metric-card:last-child { grid-column: 1 / -1; min-height: 116px; }
  .metric-card > strong { margin-top: 16px; font-size: 30px; }
  .metric-foot { left: 16px; bottom: 14px; }
  .dashboard-grid { gap: 8px; margin-top: 8px; }
  .card-heading { padding: 20px 18px 0; }
  .chart-legend { display: none; }
  .chart-stage { height: 250px; padding-inline: 6px; }
  .visitor-stream { max-height: 290px; padding-inline: 14px; }
  .rank-list, .insight-list { padding-inline: 18px; }
  .source-overview { grid-template-columns: 112px 1fr; padding-inline: 18px; gap: 14px; }
  .signal-map-card .card-heading { display: block; }
  #regionCountChip { margin-top: 10px; }
  .signal-map { height: 360px; margin: 16px 12px 0; }
  .map-origin { left: 69%; top: 54%; }
  .map-foot { display: grid; gap: 5px; padding-inline: 15px; }
  .region-detail-card .data-table-wrap { padding-inline: 8px; }
  .source-analysis { grid-template-columns: 1fr; gap: 16px; padding: 20px 18px 26px; }
  .large-donut { max-width: 165px; }
  .conversion-funnel { padding-inline: 16px; }
  .device-panels { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding-inline: 18px; }
  .customer-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .small-stat { padding: 18px; }
  .small-stat strong { font-size: 28px; }
  .customer-heading { display: block; }
  .table-search { min-width: 0; margin-top: 14px; }
  .customer-directory .data-table-wrap, .business-grid .data-table-wrap { padding-inline: 8px; }
  .admin-form-grid { grid-template-columns: 1fr; padding: 20px 18px; }
  .field-group.field-wide { grid-column: auto; }
  .action-grid { padding-inline: 18px; }
  .tools-intro { padding-inline: 4px; }
  .operation-result { min-height: 240px; }
  .toast-stack { right: 16px; bottom: 84px; }
  .dialog-panel { padding: 25px 20px; }
  .customer-drawer-panel { width: 100%; border-left: 0; }
  .customer-drawer-header { padding: 22px 18px 18px; }
  .customer-drawer-body { padding: 18px 14px 96px; }
  .customer-profile-grid, .customer-license-grid { grid-template-columns: 1fr; }
  .customer-profile-grid article { min-height: 105px; }
  .password-security-card { grid-template-columns: 1fr; padding: 17px; }
  .customer-code-row, .customer-order-row { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}