:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --monitor-bg: #0b1120;
  --monitor-surface: #111a2d;
  --monitor-surface-2: #172238;
  --monitor-border: #26334b;
  --monitor-text: #f3f6fb;
  --monitor-muted: #8f9bb0;
  --monitor-primary: #6c7cff;
  --monitor-primary-bright: #8e9aff;
  --monitor-green: #35d39a;
  --monitor-orange: #ffb454;
  --monitor-red: #ff647c;
  --monitor-blue: #5aa9ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
.hidden { display: none !important; }

/* Secure login remains visually and technically separate. */
.auth-screen { width: 100%; min-width: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; overflow-x: hidden; padding: calc(28px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); background: #fff; color: #171717; }
.auth-card { width: 100%; max-width: 420px; min-width: 0; padding: 24px 22px 22px; overflow: hidden; border: 1px solid #ececec; border-radius: 24px; background: #fff; box-shadow: 0 16px 48px rgba(0,0,0,.08); }
.auth-card form, .auth-card .field { width: 100%; min-width: 0; max-width: 100%; }
.brand { display: flex; justify-content: center; margin: 0 auto 26px; }
.brand img { display: block; width: min(100%, 270px); height: auto; mix-blend-mode: multiply; }
.intro { margin-bottom: 26px; text-align: center; }
.intro h1 { margin: 0; font-size: 27px; line-height: 1.2; letter-spacing: -.025em; }
.intro p { margin: 9px 0 0; color: #767676; font-size: 14px; line-height: 1.45; }
.auth-card label { display: block; margin: 17px 0 8px; color: #363636; font-size: 13px; font-weight: 650; }
.field { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px; border: 1px solid #dedede; border-radius: 14px; background: #fafafa; transition: border-color .2s, box-shadow .2s; }
.field:focus-within { border-color: #202020; background: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.07); }
.field svg { width: 19px; flex: 0 0 19px; fill: none; stroke: #8b8b8b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #171717; font-size: 16px; }
.field input::placeholder { color: #a5a5a5; }
.toggle { flex: 0 0 auto; padding: 7px 0 7px 8px; border: 0; background: transparent; color: #626262; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.status { min-height: 20px; margin: 12px 2px 5px; color: #b42318; font-size: 13px; line-height: 1.4; }
.status.success { color: #177245; }
.hint { color: #777; font-size: 12px; }
.submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 54px; border: 0; border-radius: 14px; color: #fff; background: #171717; font-size: 15px; font-weight: 750; cursor: pointer; }
.submit:active { transform: scale(.985); }
.submit:disabled { cursor: wait; opacity: .58; }
.arrow { font-size: 20px; }
.support { margin: 20px 0 0; color: #8b8b8b; text-align: center; overflow-wrap: anywhere; font-size: 12px; line-height: 1.45; }
.support span { color: #414141; }
.security { margin-top: 18px; padding-top: 17px; border-top: 1px solid #eee; color: #a0a0a0; text-align: center; font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }

/* Tabler-based mobile operational monitor. */
body.theme-dark { color: var(--monitor-text); background: var(--monitor-bg); }
.dashboard-shell { min-height: 100vh; padding-bottom: calc(72px + env(safe-area-inset-bottom)); background:
  radial-gradient(circle at 82% -8%, rgba(108,124,255,.16), transparent 28rem),
  var(--monitor-bg); }
.monitor-container { width: min(100%, 820px); padding-right: 14px; padding-left: 14px; }
.monitor-navbar { min-height: 66px; padding: calc(8px + env(safe-area-inset-top)) 0 8px; border: 0; background: rgba(11,17,32,.88); backdrop-filter: blur(18px); }
.monitor-navbar .monitor-container { display: flex; align-items: center; justify-content: space-between; }
.navbar-brand { display: flex; align-items: center; gap: 11px; color: var(--monitor-text); }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, var(--monitor-primary-bright), #5865df); box-shadow: 0 8px 24px rgba(108,124,255,.28); font-size: 18px; font-weight: 900; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.brand-copy strong { font-size: 13px; letter-spacing: .08em; }
.brand-copy span { color: var(--monitor-muted); font-size: 10px; font-weight: 600; }
.refresh-button { width: 42px; height: 42px; border: 1px solid var(--monitor-border); border-radius: 13px; color: var(--monitor-text); background: rgba(23,34,56,.85); }
.refresh-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.refresh-button.loading svg { animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.page-wrapper { background: transparent; }
.page-body { margin-top: 0; padding: 14px 0 20px; }
.monitor-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 3px 2px 15px; }
.monitor-kicker, .section-kicker { margin: 0 0 4px; color: var(--monitor-primary-bright); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.monitor-intro .page-title { margin: 0; color: var(--monitor-text); font-size: clamp(25px, 7vw, 34px); font-weight: 760; letter-spacing: -.04em; }
.status-badge { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(53,211,154,.22); border-radius: 999px; color: var(--monitor-green); background: rgba(53,211,154,.08); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.status-badge span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(53,211,154,.09); }
.status-badge.loading { color: var(--monitor-muted); border-color: var(--monitor-border); background: var(--monitor-surface); }
.status-badge.warning { color: var(--monitor-orange); border-color: rgba(255,180,84,.2); background: rgba(255,180,84,.08); }
.status-badge.critical { color: var(--monitor-red); border-color: rgba(255,100,124,.23); background: rgba(255,100,124,.08); }
.card { color: var(--monitor-text); border-color: var(--monitor-border); background: linear-gradient(150deg, rgba(23,34,56,.98), rgba(16,25,43,.98)); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.monitor-ribbon { margin-bottom: 10px; border-radius: 15px; }
.monitor-ribbon .card-body { display: flex; align-items: center; gap: 10px; min-height: 55px; padding: 9px 10px 9px 13px; }
.source-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--monitor-green); box-shadow: 0 0 0 4px rgba(53,211,154,.1); }
.source-dot.delayed { background: var(--monitor-orange); box-shadow: 0 0 0 4px rgba(255,180,84,.1); }
.ribbon-copy { min-width: 0; }
.ribbon-copy strong, .ribbon-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ribbon-copy strong { font-size: 11px; }
.ribbon-copy small { margin-top: 2px; color: var(--monitor-muted); font-size: 9px; }
.period-filter { flex-wrap: nowrap; gap: 2px; margin-left: auto; padding: 3px; border-radius: 10px; background: #0a1020; }
.period-filter .nav-link, .metric-tabs .nav-link { border: 0; color: var(--monitor-muted); background: transparent; font-weight: 800; }
.period-filter .nav-link { min-width: 32px; height: 28px; padding: 0 7px; border-radius: 8px; font-size: 9px; }
.period-filter .nav-link.active, .metric-tabs .nav-link.active { color: #fff; background: var(--monitor-primary); }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.metric-card { overflow: hidden; border-radius: 18px; }
.metric-primary { grid-column: 1 / -1; border-color: rgba(108,124,255,.32); background:
  radial-gradient(circle at 90% 0, rgba(142,154,255,.2), transparent 45%),
  linear-gradient(145deg, #18213d, #111a2d); }
.metric-card .card-body { position: relative; padding: 16px; }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-label { display: block; color: #a7b1c4; font-size: 10px; font-weight: 700; }
.metric-value { display: block; margin-top: 6px; color: #fff; font-size: clamp(25px, 8vw, 36px); font-weight: 780; letter-spacing: -.045em; line-height: 1.05; }
.metric-value-main { margin: 9px 0 14px; font-size: clamp(36px, 11vw, 54px); }
.metric-card small { display: block; margin-top: 7px; color: var(--monitor-muted); font-size: 9px; }
.delta { padding: 6px 8px; border-radius: 9px; font-size: 10px; font-weight: 800; }
.delta.up { color: #062c20; background: var(--monitor-green); }
.delta.down { color: #fff; background: #b23f55; }
.delta.neutral { color: var(--monitor-muted); background: rgba(143,155,176,.12); }
.metric-progress { height: 5px; margin-bottom: 7px; background: #26304b; }
.metric-progress .progress-bar { width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--monitor-primary), var(--monitor-primary-bright)); transition: width .5s ease; }
.compact-card { min-height: 145px; }
.metric-icon { display: grid; width: 30px; height: 30px; margin-bottom: 15px; place-items: center; border-radius: 9px; color: #08111e; font-size: 13px; font-weight: 900; }
.metric-icon svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.metric-icon.blue { background: var(--monitor-blue); }
.metric-icon.orange { background: var(--monitor-orange); }
.monitor-card { margin-top: 10px; overflow: hidden; border-radius: 18px; }
.monitor-card .card-header { min-height: 66px; padding: 15px 16px; border-color: var(--monitor-border); }
.monitor-card .card-title { margin: 0; color: var(--monitor-text); font-size: 17px; font-weight: 720; letter-spacing: -.02em; }
.metric-tabs { gap: 2px; flex-wrap: nowrap; padding: 3px; border-radius: 10px; background: #0a1020; }
.metric-tabs .nav-link { width: 30px; height: 28px; padding: 0; border-radius: 7px; font-size: 10px; }
.chart-summary { margin-top: 15px; color: #fff; font-size: 24px; font-weight: 780; letter-spacing: -.035em; }
.trend-chart { display: block; width: 100%; height: auto; min-height: 160px; margin-top: 2px; overflow: visible; }
.trend-chart .grid { stroke: #27334c; stroke-width: 1; }
.trend-chart .area { fill: rgba(108,124,255,.1); }
.trend-chart .line { fill: none; stroke: var(--monitor-primary-bright); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.trend-chart .point { fill: var(--monitor-surface); stroke: var(--monitor-primary-bright); stroke-width: 4; }
.trend-chart .axis-label { fill: var(--monitor-muted); font-size: 18px; }
.count-badge { min-width: 28px; padding: 6px 8px; color: #b4bcff; background: rgba(108,124,255,.13); font-size: 9px; }
.restaurant-list { padding: 0 16px; }
.restaurant-item { padding: 13px 0; border-top: 1px solid var(--monitor-border); }
.restaurant-item:first-child { border-top: 0; }
.restaurant-main, .restaurant-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.restaurant-name { min-width: 0; overflow: hidden; color: #f2f5fa; font-size: 12px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.restaurant-value { flex: 0 0 auto; color: #fff; font-size: 12px; font-weight: 780; }
.restaurant-bar { height: 4px; margin: 8px 0 6px; overflow: hidden; border-radius: 4px; background: #27334c; }
.restaurant-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5664e5, var(--monitor-blue)); }
.restaurant-meta { color: var(--monitor-muted); font-size: 9px; }
.restaurant-location { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.restaurant-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 8px; color: #f5c47b; background: rgba(255,180,84,.12); font-size: 8px; font-weight: 800; }
.restaurant-status.not-configured { color: #a7b1c4; background: rgba(143,155,176,.12); }
.restaurant-no-data .restaurant-name { color: #b5bece; }
.restaurant-no-data .restaurant-meta { margin-top: 5px; }
.mini-delta.up { color: var(--monitor-green); }
.mini-delta.down { color: var(--monitor-red); }
.alert-count { color: #ff9bab; background: rgba(255,100,124,.12); }
.alerts-list { padding: 13px 14px 15px; }
.alert-item { display: flex; gap: 10px; padding: 12px; border: 1px solid rgba(255,180,84,.13); border-left: 3px solid var(--monitor-orange); border-radius: 11px; background: rgba(9,15,27,.48); }
.alert-item + .alert-item { margin-top: 8px; }
.alert-item.critical { border-left-color: var(--monitor-red); }
.alert-icon { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 8px; color: #111827; background: var(--monitor-orange); font-size: 11px; font-weight: 900; }
.alert-item.critical .alert-icon { color: #fff; background: var(--monitor-red); }
.alert-item strong, .alert-item span { display: block; }
.alert-item strong { color: #f5f7fb; font-size: 11px; }
.alert-item span { margin-top: 3px; color: var(--monitor-muted); font-size: 9px; line-height: 1.45; }
.ok-state { padding: 15px; border: 1px dashed rgba(53,211,154,.3); border-radius: 12px; color: #8fd9bd; font-size: 10px; text-align: center; }
.pending-card { border-style: dashed; box-shadow: none; }
.pending-card .card-body > p:not(.section-kicker) { margin: 9px 0 13px; color: var(--monitor-muted); font-size: 10px; line-height: 1.5; }
.pending-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pending-tags span { padding: 6px 8px; border-radius: 8px; color: #9aa5b8; background: #0c1424; font-size: 8px; font-weight: 700; }
.report-card { border-color: rgba(108,124,255,.34); }
.report-card .card-header { align-items: flex-start; gap: 9px; }
.report-card .card-header > div { min-width: 0; flex: 1 1 auto; }
.report-card .card-header .count-badge { flex: 0 0 auto; white-space: nowrap; }
.report-body { padding: 14px 16px 17px; }
.report-period, .report-lead { margin: 0; color: var(--monitor-muted); font-size: 10px; line-height: 1.55; }
.report-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.report-kpi-grid article { padding: 11px; border: 1px solid var(--monitor-border); border-radius: 12px; background: rgba(8,14,26,.44); }
.report-kpi-grid span, .report-kpi-grid strong, .report-kpi-grid small { display: block; }
.report-kpi-grid span { color: var(--monitor-muted); font-size: 8px; }
.report-kpi-grid strong { margin-top: 4px; color: #fff; font-size: 16px; }
.report-kpi-grid small { margin-top: 3px; font-size: 9px; }
.report-block { margin-top: 18px; }
.report-block h3 { margin: 0 0 8px; color: #f4f6fb; font-size: 13px; }
.price-table { margin-top: 10px; border-top: 1px solid var(--monitor-border); }
.price-row { padding: 12px 0; border-bottom: 1px solid var(--monitor-border); }
.price-row-head, .price-values { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price-row-head strong { color: #f2f5fa; font-size: 11px; }
.price-values { margin-top: 6px; color: var(--monitor-muted); font-size: 9px; }
.price-values b { color: #fff; }
.price-row small, .price-row em { display: block; margin-top: 6px; color: var(--monitor-muted); font-size: 8px; line-height: 1.45; }
.price-row em { color: #8793a8; font-style: normal; }
.report-list { margin: 0; padding-left: 17px; color: #c5ccda; font-size: 10px; line-height: 1.55; }
.report-list li + li { margin-top: 7px; }
.report-sources { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--monitor-border); color: var(--monitor-muted); font-size: 9px; }
.report-sources summary { color: #b4bcff; cursor: pointer; font-weight: 750; }
.report-sources p { line-height: 1.5; }
.report-sources a { display: block; margin-top: 7px; color: #9facff; overflow-wrap: anywhere; }
.voice-card { position: relative; overflow: hidden; min-height: 670px; border: 1px solid rgba(72,224,255,.34); border-radius: 4px; background:
  linear-gradient(rgba(42,184,225,.035) 1px, transparent 1px),
  linear-gradient(90deg, rgba(42,184,225,.035) 1px, transparent 1px),
  radial-gradient(circle at 50% 31%, rgba(25,193,255,.22), transparent 24%),
  linear-gradient(180deg, #020a10 0%, #06131c 58%, #02070c 100%);
  background-size: 22px 22px, 22px 22px, auto, auto;
  box-shadow: inset 0 0 90px rgba(0,174,255,.06), 0 0 42px rgba(0,183,255,.09); }
.voice-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(48,208,255,.018) 4px 5px); mix-blend-mode: screen; }
.voice-card::after { content: "HERMES // VOICE COMMAND SYSTEM // DNKFOOD"; position: absolute; top: 44%; right: -118px; color: rgba(96,225,255,.16); font: 700 7px/1 monospace; letter-spacing: .22em; transform: rotate(90deg); }
.voice-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0; min-height: 670px; padding: 24px 18px 22px; }
.hud-corners i { position: absolute; z-index: 3; width: 25px; height: 25px; border-color: #4bdfff; border-style: solid; opacity: .7; }
.hud-corners i:nth-child(1) { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
.hud-corners i:nth-child(2) { top: 12px; right: 12px; border-width: 1px 1px 0 0; }
.hud-corners i:nth-child(3) { bottom: 12px; left: 12px; border-width: 0 0 1px 1px; }
.hud-corners i:nth-child(4) { right: 12px; bottom: 12px; border-width: 0 1px 1px 0; }
.hud-telemetry { display: flex; position: relative; z-index: 3; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 34px 0; color: #598291; font: 600 7px/1.3 monospace; letter-spacing: .12em; }
.hud-telemetry span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.hud-telemetry b { color: #42e4c1; font-weight: 700; }
.assistant-stage { position: relative; width: 310px; height: 310px; max-width: 88vw; flex: 0 0 310px; margin-top: 2px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; }
.assistant-stage:focus-visible { outline: 2px solid #54e8ff; outline-offset: 4px; border-radius: 50%; }
.assistant-stage:active .assistant-core { transform: translate(-50%,-50%) scale(.94); }
.assistant-stage::before, .assistant-stage::after { content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%,-50%); }
.assistant-stage::before { width: 268px; height: 268px; border: 1px solid rgba(58,214,255,.13); box-shadow: inset 0 0 38px rgba(0,194,255,.06); }
.assistant-stage::after { width: 226px; height: 226px; border: 1px dashed rgba(60,219,255,.18); animation: orbit-spin 32s linear infinite reverse; }
.scanner-line { position: absolute; top: 50%; left: 10%; z-index: 1; width: 80%; height: 1px; background: linear-gradient(90deg, transparent, rgba(83,226,255,.72), transparent); box-shadow: 0 0 14px #30d9ff; animation: scanner-sweep 4s ease-in-out infinite; }
.core-orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%,-50%); }
.orbit-one { width: 276px; height: 276px; border: 2px solid transparent; border-top-color: #32d8ff; border-right-color: rgba(50,216,255,.15); animation: orbit-spin 13s linear infinite; }
.orbit-two { width: 214px; height: 214px; border: 1px dashed rgba(111,229,255,.55); animation: orbit-spin 22s linear infinite reverse; }
.orbit-three { width: 168px; height: 168px; border: 6px double rgba(62,213,255,.22); border-left-color: #3fe1ff; animation: orbit-spin 7s linear infinite; }
.assistant-core { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; width: 116px; height: 116px; place-items: center; overflow: hidden; border: 1px solid #8ff5ff; border-radius: 50%; color: #dfffff; background: radial-gradient(circle, #d9ffff 0 3%, #45e8ff 5%, #078fc0 24%, rgba(0,39,60,.95) 54%, #02080d 72%); box-shadow: 0 0 14px #52edff, 0 0 46px rgba(37,211,255,.8), 0 0 100px rgba(0,180,255,.3), inset 0 0 30px #3edfff; transform: translate(-50%,-50%); animation: core-breathe 2.8s ease-in-out infinite; }
.assistant-core strong { position: relative; z-index: 3; color: rgba(230,255,255,.92); font: 300 31px/1 monospace; text-shadow: 0 0 12px #fff, 0 0 28px #41ddff; }
.core-grid { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg, rgba(206,255,255,.7) 0 1deg, transparent 1deg 18deg); opacity: .45; animation: orbit-spin 10s linear infinite; }
.core-light { position: absolute; inset: 24px; border: 1px solid rgba(225,255,255,.88); border-radius: 50%; box-shadow: inset 0 0 16px #fff, 0 0 13px #7ff3ff; }
.waveform { position: absolute; right: 21px; bottom: 56px; left: 21px; display: flex; height: 27px; align-items: center; justify-content: center; gap: 5px; opacity: .55; }
.waveform i { display: block; width: 2px; height: 5px; background: #54e8ff; box-shadow: 0 0 7px #54e8ff; animation: wave-idle 1.5s ease-in-out infinite; }
.waveform i:nth-child(2), .waveform i:nth-child(8) { animation-delay: -.2s; }.waveform i:nth-child(3), .waveform i:nth-child(7) { animation-delay: -.5s; }.waveform i:nth-child(4), .waveform i:nth-child(6) { animation-delay: -.8s; }.waveform i:nth-child(5) { animation-delay: -1.1s; }
.voice-mic-hint { position: absolute; right: 0; bottom: 20px; left: 0; z-index: 5; color: #a9f6ff; font: 700 10px/1.2 monospace; letter-spacing: .12em; text-align: center; text-transform: uppercase; text-shadow: 0 0 12px rgba(84,232,255,.8); }
.voice-copy { margin-top: -22px; text-align: center; }
.voice-copy .section-kicker { margin: 0 0 5px; color: #50e1ff; font: 700 8px/1.2 monospace; letter-spacing: .2em; }
.voice-copy .card-title { margin: 0; color: #e9fdff; font: 300 clamp(32px,10vw,44px)/1 "Segoe UI",sans-serif; letter-spacing: .24em; text-indent: .24em; text-shadow: 0 0 19px rgba(81,226,255,.45); }
.assistant-subtitle { margin: 7px 0 0; color: #648796; font: 600 8px/1.2 monospace; letter-spacing: .16em; text-transform: uppercase; }
.voice-mode-panel { display: grid; justify-items: center; gap: 5px; margin-top: 14px; }
#voice-mode-label { color: #67eaff; font: 700 12px/1 monospace; letter-spacing: .28em; text-indent: .28em; text-shadow: 0 0 16px rgba(72,224,255,.7); }
.voice-state { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: #a3c5d0; font-size: 10px; }
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: #36e3bd; box-shadow: 0 0 10px #36e3bd; }
.voice-stop { display: inline-flex; min-height: 36px; margin-top: 14px; padding: 0 14px; align-items: center; gap: 8px; border: 1px solid rgba(255,89,118,.45); color: #ff9caf; background: rgba(83,13,31,.22); font: 700 8px/1 monospace; letter-spacing: .12em; text-transform: uppercase; }
.voice-stop span { width: 7px; height: 7px; background: currentColor; box-shadow: 0 0 9px currentColor; }
.voice-stop:active { transform: scale(.97); }
[data-voice-mode="ready"] .state-dot { background: #36e3bd; box-shadow: 0 0 10px #36e3bd; }
[data-voice-mode="listening"] .assistant-core { filter: hue-rotate(130deg) brightness(1.18); animation-duration: .65s; }
[data-voice-mode="listening"] #voice-mode-label, [data-voice-mode="listening"] .voice-mic-hint { color: #70ffd7; text-shadow: 0 0 15px #36e3bd; }
[data-voice-mode="listening"] .state-dot { background: #4cffc2; box-shadow: 0 0 13px #4cffc2; animation: thinking-pulse .65s ease-in-out infinite; }
[data-voice-mode="thinking"] .assistant-core { filter: saturate(.7); animation-duration: .85s; }
[data-voice-mode="thinking"] #voice-mode-label { color: #ffd36b; text-shadow: 0 0 15px rgba(255,190,50,.7); }
[data-voice-mode="thinking"] .state-dot { background: #ffd36b; box-shadow: 0 0 13px #ffd36b; }
[data-voice-mode="speaking"] .assistant-core { filter: brightness(1.3); animation-duration: .42s; }
[data-voice-mode="speaking"] #voice-mode-label { color: #8adfff; text-shadow: 0 0 18px #35caff; }
[data-voice-mode="speaking"] .waveform i { opacity: 1; animation-duration: .3s; }
[data-voice-mode="error"] #voice-mode-label, [data-voice-mode="error"] .voice-mic-hint { color: #ff7892; text-shadow: 0 0 15px rgba(255,70,104,.7); }
[data-voice-mode="error"] .assistant-core { filter: hue-rotate(285deg) saturate(1.6); }
[data-voice-mode="error"] .state-dot { background: #ff5677; box-shadow: 0 0 13px #ff5677; }
.voice-talk { display: flex; width: auto; min-width: 148px; height: 42px; margin-top: 17px; padding: 0 17px; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(78,221,255,.52); border-radius: 2px; color: #bff7ff; background: linear-gradient(90deg, rgba(15,127,162,.26), rgba(32,197,231,.12)); box-shadow: inset 0 0 18px rgba(53,213,255,.06), 0 0 18px rgba(0,187,255,.07); font: 700 9px/1 monospace; letter-spacing: .15em; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.voice-talk svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.voice-talk:active { transform: scale(.97); }.voice-talk:disabled { opacity: .4; }.voice-talk.listening { color: #fff; border-color: #ff6385; background: rgba(211,43,84,.3); box-shadow: 0 0 28px rgba(255,59,105,.28); }
.voice-card.listening .assistant-core { filter: hue-rotate(130deg); animation-duration: .65s; }.voice-card.listening .waveform i,.voice-card.speaking .waveform i { opacity: 1; animation-duration: .38s; }
.voice-card.processing .assistant-core { animation-duration: .85s; filter: saturate(.75); }
.voice-card.listening .voice-mic-hint { color: #fff; text-shadow: 0 0 15px #36e3bd; }
.voice-dialog { display: grid; width: 100%; gap: 8px; margin-top: 18px; }
.voice-chat { display: flex; flex-direction: column; gap: 8px; width: 100%; max-height: 300px; overflow-y: auto; padding: 4px 2px; scrollbar-width: thin; scrollbar-color: rgba(54,214,245,.4) transparent; }
.voice-chat::-webkit-scrollbar { width: 5px; }.voice-chat::-webkit-scrollbar-thumb { background: rgba(54,214,245,.35); border-radius: 3px; }
.voice-bubble { width: fit-content; max-width: 90%; margin: 0; padding: 10px 12px; border: 1px solid rgba(73,220,255,.12); border-radius: 2px; font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.voice-bubble.user { align-self: flex-end; justify-self: end; color: #dffaff; background: rgba(18,137,168,.16); }.voice-bubble.assistant { align-self: flex-start; color: #d7edf1; background: rgba(2,15,24,.75); box-shadow: inset 2px 0 #36cfee; }
.voice-bubble.thinking { color: #79a7b6; border-style: dashed; animation: thinking-pulse 1.1s ease-in-out infinite; }
@keyframes thinking-pulse { 50% { opacity: .45; } }
.voice-audio { width: min(100%,330px); height: 34px; }
.voice-play { width: min(100%,330px); min-height: 42px; border: 1px solid rgba(72,215,247,.58); color: #dffaff; background: rgba(18,137,168,.2); font: 700 10px/1 monospace; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 18px rgba(0,191,255,.1); }
.voice-play:active { transform: scale(.98); }
.assistant-command-form { display: grid; width: 100%; grid-template-columns: 1fr 40px; margin-top: 12px; border: 1px solid rgba(72,215,247,.22); background: rgba(0,8,13,.68); }
.assistant-command-form:focus-within { border-color: rgba(78,228,255,.68); box-shadow: 0 0 19px rgba(0,191,255,.08); }
.assistant-command-form input { min-width: 0; height: 42px; padding: 0 12px; border: 0; outline: 0; color: #dffaff; background: transparent; font-size: 11px; }.assistant-command-form input::placeholder { color: #52717c; }
.assistant-command-form button { display: grid; border: 0; border-left: 1px solid rgba(72,215,247,.2); place-items: center; color: #64e9ff; background: rgba(34,184,218,.09); }.assistant-command-form button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.voice-sound { display: flex; align-items: center; gap: 7px; align-self: flex-start; margin: 11px 0 0; color: #607f8b; font: 600 8px/1 monospace; letter-spacing: .08em; text-transform: uppercase; }.voice-sound input { accent-color: #36d7f5; }
.assistant-disclaimer { margin: 11px 0 0; color: #3d5b66; font: 600 7px/1.3 monospace; letter-spacing: .09em; text-align: center; text-transform: uppercase; }
@keyframes orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes core-breathe { 50% { filter: brightness(1.24); box-shadow: 0 0 20px #8ff8ff,0 0 62px rgba(37,211,255,.92),0 0 125px rgba(0,180,255,.4),inset 0 0 34px #8df6ff; transform: translate(-50%,-50%) scale(1.045); } }
@keyframes scanner-sweep { 0%,100% { transform: translateY(-90px); opacity: 0; } 15%,85% { opacity: .8; } 50% { transform: translateY(90px); } }
@keyframes wave-idle { 50% { height: 22px; opacity: 1; } }

.dashboard-error { position: sticky; bottom: 77px; z-index: 1035; margin: 10px 0 0; padding: 11px; border-radius: 11px; font-size: 10px; text-align: center; }
.monitor-footer { padding: 19px 4px 3px; color: #5f6b80; font-size: 8px; text-align: center; }
.mobile-nav { z-index: 1030; min-height: 66px; padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(38,51,75,.9); background: rgba(11,17,32,.94); backdrop-filter: blur(18px); }
.mobile-nav .container-xl { display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 820px); padding: 0 12px; }
.mobile-nav-link { display: flex; min-height: 54px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; color: #758197; font-size: 8px; font-weight: 700; text-decoration: none; }
.mobile-nav-link svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-nav-link.active { color: var(--monitor-primary-bright); background: rgba(108,124,255,.08); }

/* A report link opens only the requested decision surface, not the network monitor. */
body.report-only .monitor-intro,
body.report-only .monitor-ribbon,
body.report-only .metric-grid,
body.report-only .chart-card,
body.report-only #restaurants,
body.report-only #events,
body.report-only .mobile-nav { display: none !important; }
body.report-only .dashboard-shell { padding-bottom: env(safe-area-inset-bottom); }
body.report-only #nemo-report { margin-top: 12px; }
body.report-only .monitor-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
body.report-only .dashboard-error { bottom: 12px; }

.competitor-price-list { display: grid; gap: 7px; margin-top: 9px; }
.competitor-price { padding: 9px 10px; border: 1px solid rgba(148,163,184,.16); border-radius: 9px; background: rgba(15,23,42,.35); }
.competitor-price > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.competitor-price a, .competitor-price b { color: var(--monitor-primary-bright); font-weight: 700; text-decoration: none; }
.competitor-price strong { color: var(--monitor-text); font-size: 15px; white-space: nowrap; }
.competitor-price small, .competitor-price em { display: block; margin-top: 3px; color: var(--monitor-muted); font-size: 11px; font-style: normal; line-height: 1.35; }
.competitor-price em { color: rgba(148,163,184,.72); }

.report-charts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.report-chart { overflow: hidden; padding: 13px; border: 1px solid rgba(108,124,255,.18); border-radius: 14px; background: linear-gradient(145deg, rgba(15,24,43,.92), rgba(9,16,31,.92)); }
.report-chart-wide { grid-column: 1 / -1; }
.report-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.report-chart-head span { color: #7f8aa0; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.report-chart-head h3 { margin: 2px 0 0; color: #f4f6fb; font-size: 12px; }
.report-chart-head > b { padding: 4px 7px; border-radius: 7px; color: #aeb7ff; background: rgba(108,124,255,.1); font-size: 8px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: -4px 0 12px; color: #8792a6; font-size: 7px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.chart-legend i { display: inline-block; width: 10px; height: 4px; border-radius: 999px; }
.chart-legend .legend-nemo { background: #8e9aff; }
.chart-legend .legend-market { background: #35a783; }
.chart-legend .legend-nemo-dot { width: 7px; height: 7px; border: 1px solid #fff; border-radius: 50%; background: #6c7cff; }
.chart-legend .legend-range { background: linear-gradient(90deg,#35d39a,#ffb454); }
.price-bars, .price-ranges { display: grid; gap: 10px; }
.chart-item-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: #c7cfdd; font-size: 8px; }
.chart-item-label b { color: var(--monitor-green); font-size: 8px; }
.dual-bar { position: relative; display: grid; gap: 3px; }
.dual-bar i { display: block; min-width: 34px; height: 13px; border-radius: 4px; font-style: normal; }
.dual-bar i span { display: block; padding: 1px 5px; color: #fff; font-size: 7px; font-weight: 750; line-height: 11px; white-space: nowrap; }
.nemo-bar { background: linear-gradient(90deg,#6c7cff,#9aa5ff); }
.market-bar { background: linear-gradient(90deg,rgba(53,211,154,.28),rgba(53,211,154,.62)); }
.range-row > span { display: block; margin-bottom: 5px; color: #c7cfdd; font-size: 8px; }
.range-track { position: relative; height: 8px; border-radius: 999px; background: rgba(148,163,184,.1); }
.range-track i { position: absolute; top: 2px; height: 4px; border-radius: 999px; background: linear-gradient(90deg,#35d39a,#ffb454); }
.range-track b { position: absolute; top: 50%; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #6c7cff; box-shadow: 0 0 0 3px rgba(108,124,255,.18); transform: translate(-50%,-50%); }
.range-row small { display: flex; justify-content: space-between; gap: 7px; margin-top: 5px; color: #707c91; font-size: 7px; }
.range-row small em { font-style: normal; }
.range-row small strong { color: #aeb7ff; }
.sales-mix-panel { grid-column: 1 / -1; }
.sales-mix-layout { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 14px; }
.sales-donut { position: relative; width: 118px; height: 118px; border-radius: 50%; box-shadow: 0 0 28px rgba(108,124,255,.09); }
.sales-donut::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: #0d1628; }
.sales-donut span { position: absolute; inset: 29px; z-index: 1; display: grid; align-content: center; text-align: center; }
.sales-donut b, .sales-donut small { display: block; }
.sales-donut b { color: #fff; font-size: 10px; }
.sales-donut small { margin-top: 3px; color: var(--monitor-muted); font-size: 7px; }
.sales-legend { display: grid; gap: 6px; min-width: 0; }
.sales-legend > div { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 6px; font-size: 7px; }
.sales-legend i { width: 7px; height: 7px; border-radius: 2px; }
.sales-legend span { overflow: hidden; color: #aeb8ca; text-overflow: ellipsis; white-space: nowrap; }
.sales-legend b { color: #f4f6fb; font-size: 7px; }

@media (max-width: 640px) {
  .chart-card .card-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .chart-card .metric-tabs { align-self: flex-start; }
}
@media (min-width: 680px) {
  .metric-grid { grid-template-columns: 1.7fr 1fr 1fr; }
  .metric-primary { grid-column: auto; }
  .monitor-container { padding-right: 18px; padding-left: 18px; }
}
@media (max-width: 460px) {
  .auth-screen { place-items: start center; padding: 14px 10px calc(16px + env(safe-area-inset-bottom)); }
  .auth-card { padding: 20px 16px 18px; border-radius: 20px; box-shadow: none; }
  .brand { margin-bottom: 20px; }
  .intro { margin-bottom: 20px; }
  .intro h1 { font-size: 25px; }
  .field { padding-right: 12px; padding-left: 12px; }
  .toggle { padding-left: 6px; font-size: 11px; }
  .sales-mix-layout { grid-template-columns: 100px 1fr; gap: 11px; }
  .sales-donut { width: 100px; height: 100px; }
  .sales-donut::after { inset: 21px; }
  .sales-donut span { inset: 25px; }
  .brand img { width: 250px; }
  .monitor-container { padding-right: 10px; padding-left: 10px; }
  .metric-card .card-body { padding: 15px; }
  .monitor-card .card-header { padding-right: 14px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Curated mobile adaptation of eadmin2/jarvis_ai HUD. */
.jarvis-app { min-height: 100%; background: #01070b; }
.jarvis-app .dashboard-shell,.jarvis-app .page-wrapper,.jarvis-app .page-body { min-height: 100dvh; background: transparent; }
.jarvis-app .page-body { padding: 0; }
.jarvis-app .monitor-container { width: 100%; max-width: none; padding: 0; }
.jarvis-app #voice-assistant { margin: 0; border: 0; border-radius: 0; }
.jarvis-header-controls { display: flex; align-items: center; gap: 10px; }
.jarvis-text-button,.jarvis-icon-button { min-height: 30px; border: 1px solid rgba(53,221,255,.32); color: #66e8ff; background: rgba(3,25,34,.72); font: 700 7px/1 monospace; letter-spacing: .15em; }
.jarvis-text-button { padding: 0 11px; }
.jarvis-icon-button { width: 30px; padding: 6px; }
.jarvis-icon-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.jarvis-text-button:focus-visible,.jarvis-icon-button:focus-visible { outline: 2px solid #66e8ff; outline-offset: 2px; }
.voice-card[data-jarvis-hud] { min-height: 0; border-color: rgba(48,220,255,.42); background: #020b11; }
.voice-card[data-jarvis-hud]::after { content: none; }
#jarvis-grid { --jc: #35ddff; --jdim: #477482; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(142px,22%) minmax(0,1fr) minmax(142px,22%); grid-template-areas: "header header header" "left center right" "footer footer footer"; min-height: 100dvh; overflow: hidden; color: #a9dce8; font-family: "DejaVu Sans Mono","Liberation Mono",monospace; background: radial-gradient(circle at 50% 38%,rgba(0,106,145,.16),transparent 45%),linear-gradient(rgba(32,193,224,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(32,193,224,.04) 1px,transparent 1px),#020b11; background-size: auto,24px 24px,24px 24px,auto; }
#jarvis-grid::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(180deg,transparent 0 3px,rgba(75,223,255,.018) 3px 4px); }
.jarvis-header { grid-area: header; display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 12px 18px; border-bottom: 1px solid rgba(52,221,255,.28); background: linear-gradient(90deg,rgba(6,40,51,.92),rgba(2,14,21,.72)); }
.jarvis-header h1 { margin: 0; color: #d9fbff; font: 700 clamp(17px,3vw,27px)/1 monospace; letter-spacing: .18em; text-shadow: 0 0 16px rgba(53,221,255,.62); }
.jarvis-header span { display: block; margin-top: 7px; color: #518392; font-size: 7px; letter-spacing: .23em; }
#jarvis-clock { color: #65e9ff; font-size: clamp(11px,2.2vw,19px); letter-spacing: .14em; text-shadow: 0 0 10px rgba(53,221,255,.38); }
.jarvis-column { display: grid; align-content: start; gap: 9px; padding: 12px 9px; }
.jarvis-left { grid-area: left; border-right: 1px solid rgba(53,221,255,.14); }
.jarvis-right { grid-area: right; border-left: 1px solid rgba(53,221,255,.14); }
.jarvis-panel { position: relative; padding: 10px; border: 1px solid rgba(71,165,187,.27); background: rgba(3,22,30,.66); box-shadow: inset 0 0 24px rgba(0,157,202,.035); }
.jarvis-panel::before,.jarvis-panel::after { content: ""; position: absolute; width: 10px; height: 10px; border-color: var(--jc); border-style: solid; opacity: .65; }
.jarvis-panel::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.jarvis-panel::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.jarvis-panel h2 { display: flex; justify-content: space-between; margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid rgba(68,149,168,.23); color: #58dff8; font-size: 7px; letter-spacing: .16em; }
.jarvis-panel h2 span:last-child { color: #355d68; }
.jarvis-kv { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 7px 0; color: #6c9aa5; font-size: 6px; text-transform: uppercase; }
.jarvis-kv span { display: inline-flex; align-items: center; min-width: 0; }
.jarvis-kv b { color: #b5edf5; font-size: 6px; text-align: right; }
.jarvis-dot { display: inline-block; flex: 0 0 auto; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #31515a; box-shadow: 0 0 4px transparent; }
.jarvis-dot.on { background: #40e5c0; box-shadow: 0 0 7px #40e5c0; }
.jarvis-dot.error { background: #ff5076; box-shadow: 0 0 7px #ff5076; }
.jarvis-meter { height: 3px; margin-top: 9px; overflow: hidden; background: #09242c; }
.jarvis-meter i { display: block; width: 12%; height: 100%; background: linear-gradient(90deg,#188cb0,#60e8ff); box-shadow: 0 0 8px #36dcff; transition: width .2s ease; }
.jarvis-activity { min-height: 78px; max-height: 150px; overflow: hidden; color: #6f9eaa; font-size: 6px; line-height: 1.65; }
.jarvis-activity-row { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jarvis-activity-row.command { color: #b8edf4; }
.jarvis-activity-row.signal { color: #5edff7; }
.jarvis-activity-row.success { color: #40e5c0; }
.jarvis-activity-row.error { color: #ff6e8d; }
.jarvis-activity-row.cancelled { color: #ffc95e; }
#jarvis-center { grid-area: center; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 8px 14px 16px; }
#jarvis-center .hud-telemetry { align-self: stretch; width: 100%; padding: 7px 2px 0; }
#jarvis-center .assistant-stage { width: min(48vw,390px); height: min(48vw,390px); max-width: 390px; flex-basis: min(48vw,390px); margin: 4px 0 0; }
#jarvis-center #reactor { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
#jarvis-center .scanner-line { z-index: 3; opacity: .34; }
#jarvis-center .core-orbit { z-index: 1; opacity: .38; }
#coreState { position: absolute; top: 50%; left: 50%; z-index: 5; display: grid; width: 42%; place-items: center; transform: translate(-50%,-50%); pointer-events: none; }
#coreState strong { color: #001921; font: 800 clamp(8px,1.2vw,12px)/1 monospace; letter-spacing: .17em; text-shadow: 0 1px rgba(255,255,255,.45); }
#coreState .voice-mic-hint { position: static; margin-top: 8px; max-width: 120px; color: #06242c; font-size: clamp(5px,.8vw,8px); line-height: 1.25; text-shadow: 0 1px rgba(255,255,255,.45); transform: none; }
#jarvis-center .waveform { z-index: 4; bottom: 12%; }
/* No autonomous pseudo-voice activity: canvas and bars use measured RMS. */
#jarvis-center .scanner-line { display: none; }
#jarvis-center .assistant-stage::after, #jarvis-center .core-orbit,
#jarvis-center .waveform i { animation: none; }
#jarvis-center .waveform i { height: calc(2px + 22px * var(--input-energy, 0)); }
[data-voice-mode="speaking"] #jarvis-center .waveform i {
  height: calc(2px + 22px * var(--output-energy, 0));
}
#jarvis-center .voice-copy { margin-top: -18px; }
#jarvis-center .voice-copy .card-title { margin: 2px 0 4px; color: #d6faff; font-size: clamp(17px,2.4vw,24px); letter-spacing: .22em; text-shadow: 0 0 14px rgba(53,221,255,.45); }
#jarvis-center .voice-state { max-width: 480px; margin: 4px auto 0; }
#jarvis-center .voice-dialog,#jarvis-center .assistant-command-form { max-width: 620px; }
#jarvis-center .voice-chat { max-height: 210px; }
#jarvis-center .assistant-command-form { border-color: rgba(70,220,249,.38); background: rgba(1,18,26,.82); }
#jarvis-center .assistant-command-form input { font-family: inherit; }
.jarvis-footer { grid-area: footer; display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 8px 16px; border-top: 1px solid rgba(52,221,255,.24); color: #477682; font-size: 6px; letter-spacing: .16em; }
#jarvis-foot-state { color: #58e5ff; }

@media (max-width: 760px) {
  #jarvis-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "header header" "center center" "left right" "footer footer"; min-height: calc(100svh - 92px); }
  .jarvis-header { min-height: 54px; padding: 9px 12px; }
  .jarvis-column { padding: 8px; }
  .jarvis-left { border-top: 1px solid rgba(53,221,255,.12); border-right: 1px solid rgba(53,221,255,.12); }
  .jarvis-right { border-top: 1px solid rgba(53,221,255,.12); border-left: 0; }
  .jarvis-session-panel { display: none; }
  .jarvis-activity { min-height: 54px; max-height: 82px; }
  #jarvis-center { padding: 2px 10px 12px; }
  #jarvis-center .assistant-stage { width: min(88vw,350px); height: min(88vw,350px); flex-basis: min(88vw,350px); }
  #jarvis-center .voice-copy { margin-top: -22px; }
}
@media (max-width: 430px) {
  .jarvis-header h1 { font-size: 16px; }
  .jarvis-header span { font-size: 6px; }
  #jarvis-clock { font-size: 9px; }
  .jarvis-header-controls { gap: 5px; }
  .jarvis-text-button { padding: 0 7px; font-size: 6px; }
  #jarvis-center .hud-telemetry { padding-top: 5px; }
  #jarvis-center .assistant-stage { width: min(96vw,325px); height: min(96vw,325px); flex-basis: min(96vw,325px); }
  .jarvis-column { gap: 6px; padding: 6px 4px; }
  .jarvis-panel { padding: 8px 6px; }
  .jarvis-panel h2 { font-size: 6px; }
  .jarvis-kv,.jarvis-kv b { font-size: 5px; }
  .jarvis-footer { padding: 7px 8px; font-size: 5px; }
}

/* J.A.R.V.I.S. OS v3 — complete replacement surface */
#voice-assistant.jarvis-os { min-height:100dvh; border:0; border-radius:0; background:#00060a; box-shadow:none; isolation:isolate; }
#voice-assistant.jarvis-os::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(circle at 50% 40%,rgba(0,178,255,.13),transparent 33%),linear-gradient(90deg,transparent 49.8%,rgba(65,223,255,.035) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(65,223,255,.025) 50%,transparent 50.2%); }
.jarvis-command-deck { position:relative; display:grid; place-items:center; width:100%; min-height:390px; }
.jarvis-core-button { position:relative; display:grid; place-items:center; width:min(54vw,430px); height:min(54vw,430px); padding:0; border:0; border-radius:50%; color:inherit; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; filter:drop-shadow(0 0 25px rgba(0,196,255,.22)); }
.jarvis-core-button::before,.jarvis-core-button::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.jarvis-core-button::before { inset:5%; border:1px solid rgba(83,229,255,.5); background:conic-gradient(from 35deg,transparent 0 7%,rgba(46,216,255,.45) 7% 7.5%,transparent 7.5% 24%,rgba(255,167,56,.62) 24% 25%,transparent 25% 49%,rgba(46,216,255,.35) 49% 50%,transparent 50% 74%,rgba(255,167,56,.52) 74% 75%,transparent 75%); -webkit-mask:radial-gradient(circle,transparent 0 67%,#000 68%); mask:radial-gradient(circle,transparent 0 67%,#000 68%); animation:jarvis-os-spin 18s linear infinite; }
.jarvis-core-button::after { inset:15%; border:1px dashed rgba(86,231,255,.4); animation:jarvis-os-spin 12s linear infinite reverse; }
.jarvis-core-button #reactor { position:absolute; inset:21%; width:58%; height:58%; z-index:3; border-radius:50%; }
.jarvis-core-button .core-orbit { position:absolute; left:50%; top:50%; z-index:2; width:72%; height:72%; border:1px solid rgba(63,221,255,.25); border-radius:50%; transform:translate(-50%,-50%); }
.jarvis-core-button .orbit-two { width:52%; height:52%; border-style:dashed; border-color:rgba(255,172,73,.42); }
.jarvis-core-button .orbit-three { width:35%; height:35%; box-shadow:0 0 40px rgba(70,225,255,.2); }
.jarvis-core-button #coreState { position:absolute; inset:0; z-index:6; display:grid; place-content:center; text-align:center; pointer-events:none; }
.jarvis-core-button #coreState strong { color:#e9fdff; font:300 clamp(16px,3vw,26px)/1 monospace; letter-spacing:.32em; text-indent:.32em; text-shadow:0 0 18px #35ddff; }
.jarvis-core-button .voice-mic-hint { position:static; margin-top:13px; color:#63dff5; font:600 8px/1.2 monospace; letter-spacing:.15em; }
.jarvis-core-button .waveform { position:absolute; right:0; bottom:8%; left:0; z-index:6; display:flex; justify-content:center; gap:3px; height:22px; }
.jarvis-core-button .waveform i { width:2px; height:calc(2px + 20px * var(--input-energy,0)); background:#62e5ff; box-shadow:0 0 5px #23cfff; }
.jarvis-identity { position:absolute; top:52%; left:50%; z-index:5; transform:translate(-50%,-50%); width:100%; pointer-events:none; text-align:center; }
.jarvis-identity .section-kicker { margin:0 0 290px; color:rgba(82,224,255,.55); font:600 7px/1 monospace; letter-spacing:.27em; }
.jarvis-identity .card-title { margin:0; color:#e9fdff; font:200 clamp(25px,5vw,52px)/1 sans-serif; letter-spacing:.38em; text-indent:.38em; text-shadow:0 0 28px rgba(67,222,255,.55); }
.jarvis-transcript { position:relative; z-index:4; width:min(760px,96%); margin:-30px auto 0; }
.jarvis-transcript #voice-chat { display:flex; flex-direction:column; max-height:180px; overflow:auto; gap:6px; padding:6px 0; }
.jarvis-transcript .voice-bubble { max-width:85%; border:0; border-left:2px solid #30d9ff; border-radius:0; background:linear-gradient(90deg,rgba(20,138,178,.14),transparent); font:11px/1.5 monospace; }
.jarvis-command-line { display:grid; grid-template-columns:1fr 44px; width:min(760px,96%); margin:10px auto 0; border:0; border-bottom:1px solid rgba(61,219,255,.52); background:rgba(0,10,15,.72); }
.jarvis-command-line input { height:46px; border:0; outline:0; padding:0 12px; color:#dcfbff; background:transparent; font:11px monospace; }
.jarvis-command-line button { display:grid; place-items:center; border:0; color:#58e4ff; background:transparent; }
.jarvis-command-line button svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.jarvis-audio-control { display:flex; align-items:center; gap:8px; width:min(760px,96%); margin:9px auto 0; color:#4e7d88; font:600 7px monospace; letter-spacing:.1em; text-transform:uppercase; }
.jarvis-audio-control input { accent-color:#35ddff; }
.jarvis-system-note { margin:7px auto 0; color:#304f58; font:6px monospace; letter-spacing:.08em; text-align:center; }
.jarvis-playback { width:min(760px,96%); margin:0 auto; }
.jarvis-stop-control { pointer-events:auto; }
#voice-assistant.listening .jarvis-core-button::before { animation-duration:2s; filter:hue-rotate(100deg); }
#voice-assistant.processing .jarvis-core-button::after { animation-duration:1.8s; }
#voice-assistant.speaking .jarvis-core-button { filter:drop-shadow(0 0 42px rgba(64,223,255,.5)); }
@keyframes jarvis-os-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) {
  body.jarvis-app { background:#000; overflow:hidden; }
  body.jarvis-app::before { opacity:.14; background-size:22px 22px; }
  body.jarvis-app #dashboard,
  body.jarvis-app .page-wrapper,
  body.jarvis-app .page-body,
  body.jarvis-app .monitor-container { height:100dvh; min-height:100dvh; overflow:hidden; }
  #voice-assistant.jarvis-os { height:100dvh; min-height:100dvh; overflow:hidden; }
  #voice-assistant.jarvis-os #jarvis-grid {
    height:100%; min-height:0; display:grid; grid-template:66px minmax(0,1fr)/1fr;
    background:radial-gradient(circle at 50% 34%,rgba(39,220,255,.15),transparent 30%),linear-gradient(180deg,#02080c 0%,#000 68%);
  }
  #voice-assistant.jarvis-os .jarvis-header {
    grid-area:1/1; min-height:0; padding:max(14px,env(safe-area-inset-top)) 18px 9px;
    border-bottom:1px solid rgba(57,220,255,.24); background:rgba(0,6,9,.82);
  }
  #voice-assistant.jarvis-os .jarvis-header h1 { font-size:18px; letter-spacing:7px; }
  #voice-assistant.jarvis-os .jarvis-header span { display:none; }
  #voice-assistant.jarvis-os .jarvis-header-controls { gap:8px; }
  #voice-assistant.jarvis-os .jarvis-text-button { font-size:9px; padding:7px 9px; }
  #voice-assistant.jarvis-os .jarvis-column,
  #voice-assistant.jarvis-os .hud-telemetry,
  #voice-assistant.jarvis-os .hud-corners,
  #voice-assistant.jarvis-os .jarvis-footer,
  #voice-assistant.jarvis-os .section-kicker,
  #voice-assistant.jarvis-os .jarvis-system-note { display:none!important; }
  #voice-assistant.jarvis-os #jarvis-center {
    grid-area:2/1; min-height:0; padding:14px 16px calc(12px + env(safe-area-inset-bottom));
    display:grid; grid-template-rows:minmax(190px,34vh) auto minmax(70px,1fr) 52px 27px;
    align-items:center; gap:8px; overflow:hidden;
  }
  #voice-assistant.jarvis-os #jarvis-center::before {
    content:"JARVIS / MOBILE COMMAND INTERFACE"; position:absolute; top:8px; left:16px;
    font:7px/1 monospace; letter-spacing:2px; color:rgba(112,228,255,.42);
  }
  #voice-assistant.jarvis-os .jarvis-core-button {
    grid-row:1; position:relative; top:auto; left:auto; transform:none; justify-self:center;
    width:min(58vw,240px); height:auto; aspect-ratio:1; clip-path:none; border:0; background:transparent;
  }
  #voice-assistant.jarvis-os .jarvis-core-button::before {
    border:1px solid rgba(57,220,255,.34); border-radius:50%;
    box-shadow:0 0 35px rgba(38,213,255,.14),inset 0 0 30px rgba(38,213,255,.08);
  }
  #voice-assistant.jarvis-os .jarvis-core-button::after { display:none; }
  #voice-assistant.jarvis-os .jarvis-identity {
    grid-row:2; position:relative; top:auto; left:auto; transform:none; width:100%; margin:0;
  }
  #voice-assistant.jarvis-os .jarvis-identity .card-title { font-size:clamp(21px,7vw,29px); letter-spacing:7px; text-indent:7px; }
  #voice-assistant.jarvis-os .voice-state { max-width:340px; margin:7px auto 0; font-size:10px; }
  #voice-assistant.jarvis-os .jarvis-transcript {
    grid-row:3; width:100%; height:100%; min-height:70px; max-height:none; margin:0;
    border:1px solid rgba(57,220,255,.2); clip-path:none; background:rgba(1,12,17,.78); border-radius:12px; overflow:hidden;
  }
  #voice-assistant.jarvis-os #voice-chat { max-height:100%; padding:9px; }
  #voice-assistant.jarvis-os .jarvis-command-line {
    grid-row:4; width:100%; height:52px; margin:0; border:1px solid rgba(57,220,255,.38);
    clip-path:none; border-radius:14px; background:rgba(4,18,24,.96);
  }
  #voice-assistant.jarvis-os .jarvis-audio-control { grid-row:5; width:100%; margin:0; font-size:9px; }
  #voice-assistant.jarvis-os .jarvis-playback { position:absolute; right:18px; bottom:80px; z-index:4; width:auto; margin:0; }
  #voice-assistant.jarvis-os .jarvis-stop-control { margin-top:6px; }
}
@media (max-width:430px) {
  #voice-assistant.jarvis-os #jarvis-center { grid-template-rows:minmax(180px,31vh) auto minmax(68px,1fr) 50px 25px; }
  #voice-assistant.jarvis-os .jarvis-core-button { width:min(55vw,220px); }
}