/* V.02: provider assets, deposit choices, responsive report and visual backdrop. */
body { isolation: isolate; background-color: #020b08; }
.cyber-background { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
#matrix-canvas { display: block; width: 100%; height: 100%; opacity: .6; }
.cyber-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, #020b08d9 8%, #020b0870 65%, #020b0820), linear-gradient(180deg, #020b0810 65%, #020b08d9); }
.cyber-scanline { position: absolute; left: 0; right: 0; height: 12vh; top: -12vh; background: linear-gradient(transparent, #72fa3209, transparent); animation: scanline-pass 14s linear infinite; }
.effects-paused .cyber-scanline { animation-play-state: paused; }
@keyframes scanline-pass { to { transform: translateY(115vh); } }
.app-shell { position: relative; z-index: 1; }
.intro { padding-top: 27px; padding-bottom: 22px; }
.intro-copy > p { font-size: 16px; }
.demo-badge { font: 600 11px/1.3 var(--mono); letter-spacing: .03em; }
.local-label { font-size: 10px; padding: 7px 9px; }
.session-counter { height: 51px; padding-right: 15px; }
.globe-art { width: 73px; height: 73px; left: 32px; top: -9px; border-radius: 50%; border: 1px solid #a8ed3559; background: repeating-linear-gradient(0deg, transparent 0 10px, #94d62c44 11px, transparent 12px), repeating-linear-gradient(90deg, transparent 0 14px, #94d62c44 15px, transparent 16px); transform: rotate(-15deg); mask-image: radial-gradient(circle, #000 50%, transparent 72%); box-shadow: inset 0 0 24px #90e93138; }
.system-cards { grid-template-columns: 1.25fr .95fr 1fr; }
.system-card { padding: 10px; gap: 8px; }
.system-card > div { min-width: 0; }
.system-card > .icon { width: 23px; height: 23px; }
.system-card strong { font: 700 12px/1.35 var(--mono); white-space: nowrap; }
#online-count { white-space: normal; }
.overview-footnote { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; font: 10px/1.4 var(--mono); color: #9ab19f; }
.overview-footnote button { border: 1px solid #386445; border-radius: 5px; background: #06140e; color: #b5caaa; font: inherit; padding: 5px 8px; white-space: nowrap; }
.overview-footnote button:disabled { opacity: .55; cursor: default; }
.provider-card { height: 107px; padding: 15px 10px 9px; gap: 8px; border-color: #294d3c; background: linear-gradient(145deg, #112319, #05100be6); }
.provider-logo-wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 46px; }
.provider-logo { display: block; width: 100%; height: 46px; max-width: 128px; object-fit: contain; object-position: center; }
.provider-logo.pragmatic { max-width: 118px; }
.provider-logo.pgsoft { max-width: 118px; }
.provider-logo.habanero { max-width: 130px; }
.provider-logo.jili { max-width: 88px; }
.provider-logo.spadegaming { max-width: 125px; }
.provider-logo.cq9 { max-width: 101px; }
.provider-name { font-size: 12px; font-weight: 500; color: #adbcaf; }
.provider-choice { top: 8px; right: 8px; width: 13px; height: 13px; }
.provider input:checked + .provider-card .provider-choice:after { left: 3px; top: 1px; }
.provider input:checked + .provider-card { border-width: 1px; box-shadow: 0 0 0 1px #a7ed2366, inset 0 0 28px #92f42a10; background: linear-gradient(140deg, #15351b, #09190d); }
.provider input:checked + .provider-card .provider-name { color: #d5f7b8; }
.selection-line { margin: 11px 0 17px; font-size: 11px; }
.deposit-fieldset { border-top: 1px solid #244536; padding-top: 14px; }
.deposit-fieldset legend { float: none; font-size: 14px; margin-bottom: 10px; padding-top: 12px; }
.deposit-select-wrap { position: relative; display: flex; align-items: center; border: 1px solid #45673b; border-radius: 7px; background: #020d09; min-height: 47px; }
.deposit-select-wrap > span:first-child { margin: 0 14px; padding-right: 14px; color: var(--green); font: 700 14px var(--mono); border-right: 1px solid #315039; pointer-events: none; }
.deposit-select-wrap select { width: 100%; min-width: 0; height: 45px; padding: 0 38px 0 0; border: 0; appearance: none; color: #e5f5de; background: transparent; font: 500 16px var(--mono); cursor: pointer; }
.deposit-select-wrap select option { color: #e5f5de; background: #0a1910; }
.deposit-select-wrap:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.deposit-select-wrap select:focus { outline: none; }
.select-chevron { position: absolute; right: 16px; color: var(--green); pointer-events: none; }
.deposit-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 8px 0 0; }
.deposit-presets button { min-width: 0; min-height: 35px; padding: 5px 2px; border: 1px solid #33573d; border-radius: 5px; color: #b0c4ad; font: 11px var(--mono); background: #0b1b11; }
.deposit-presets button[aria-pressed="true"] { border-color: #88c638; color: var(--green); background: #1c3110; }
.deposit-presets button:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.deposit-fieldset .field-hint { margin: 7px 0 0; font-size: 11px; }
.session-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 0 11px; color: #97af9d; font: 10px var(--mono); letter-spacing: .04em; }
.session-total strong { font: 700 16px var(--mono); color: #e4f5d7; letter-spacing: -.02em; }
.form-actions .primary-button { min-height: 49px; font-size: 16px; }
.privacy-line { font-size: 11px; }
.scanner-panel .panel-heading p { max-width: 38ch; }
.radar-area { min-height: 380px; }
.telemetry { align-self: center; margin-top: 0; }
.radar { box-shadow: 0 0 0 6px #11341822, 0 0 60px #95ee2410; }
.terminal-body { height: 103px; }
.history-row { grid-template-columns: 105px minmax(100px,1.1fr) minmax(100px,1fr) minmax(110px,.9fr) 95px 90px; gap: 13px; }
.completion-dialog { width: min(610px, calc(100% - 32px)); padding: 27px 28px 23px; text-align: left; }
.completion-eyebrow { margin: 0 25px 20px 0; color: #a6be9a; font-size: 10px; letter-spacing: .06em; }
.completion-hero { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.completion-hero .completion-symbol { margin: 0; width: 39px; height: 39px; flex-shrink: 0; }
.completion-hero > div:nth-child(2) { min-width: 0; }
.completion-hero h2 { margin: 0 0 3px; font-size: 23px; }
.completion-hero p { margin: 0; color: #9cae96; font-size: 12px; }
.completion-hero .completion-percent { margin-left: auto; font-size: 30px; flex-shrink: 0; }
.completion-hero .completion-percent span { font-size: 17px; }
.completion-dialog #completion-description { font-size: 12px; color: #9db699; padding: 10px 12px; border: 1px solid #3f603d; background: #172b1640; border-radius: 6px; }
.completion-summary { margin: 0 0 13px; padding-top: 15px; }
.completion-provider-banner { display: flex; align-items: center; gap: 21px; padding: 15px 17px; background: #0e2314; border: 1px solid #345c34; border-radius: 8px; }
.completion-provider-banner img { width: 119px; height: 44px; object-fit: contain; }
.completion-provider-banner > div { display: flex; flex-direction: column; min-width: 0; }
.completion-provider-banner > div span { color: #8aa27d; font: 9px var(--mono); letter-spacing: .06em; }
.completion-provider-banner strong { color: #e2f4d2; font-size: 16px; margin: 3px 0 2px; }
.completion-provider-banner small { color: #90b66a; font: 10px var(--mono); }
.provider-banner-check { margin-left: auto; color: var(--green); }
.completion-details { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 22px; margin: 11px 0 14px; padding: 0; }
.completion-details > div { display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid #244127; padding: 8px 0; min-width: 0; }
.completion-details dt { font: 11px/1.4 var(--sans); color: #9bab92; }
.completion-details dd { text-align: left; font: 12px/1.5 var(--mono); color: #dfebd4; width: 100%; }
.completion-details .detail-highlight { margin: 0; padding: 11px 12px; gap: 4px; background: #1b301644; }
.completion-details .detail-highlight dd { font: 600 16px/1.3 var(--mono); color: #d4ffa0; }
.completion-details .detail-wide { grid-column: 1 / -1; }
.detail-tag { font: 9px var(--mono); color: #b9db8d; border: 1px solid #547137; border-radius: 3px; padding: 3px 5px; margin-left: 4px; white-space: nowrap; }
.completion-checklist { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px; color: #adc28f; font: 10px var(--mono); padding: 0 0 17px; }
.completion-dialog .destination-hint { text-align: center; font-size: 10px; line-height: 1.6; }
@media (max-width: 1180px) and (min-width: 741px) {
  .topbar { flex-wrap: wrap; gap: 4px 20px; padding-top: 12px; }
  .main-nav { order: 3; flex-basis: 100%; min-height: 49px; }
  .topbar-right { margin-left: auto; }
  .intro { grid-template-columns: minmax(0,1.4fr) minmax(320px,1fr); padding-left: 0; padding-right: 0; }
  h1 { font-size: 39px; }
  .config-panel, .scanner-panel { padding: 20px; }
  .radar-area { display: flex; flex-direction: column; justify-content: center; gap: 28px; }
  .radar { width: min(245px, 85%); }
  .telemetry { width: 100%; margin: 0; }
  .telemetry .telemetry-status { display: none; }
  .telemetry .telemetry-metrics { margin-top: 8px; }
  .provider-grid { gap: 9px; }
  .provider-logo { max-width: 95%; }
  .provider-card { padding-left: 8px; padding-right: 8px; }
  .deposit-presets { gap: 4px; }
  .history-row { grid-template-columns: 95px 1fr 1fr 1fr 85px 80px; gap: 9px; padding: 13px; }
}
@media (max-width: 740px) {
  .topbar:after { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }
  .main-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; width: 100%; }
  .nav-link { flex-direction: column; gap: 5px; padding: 10px 1px 12px; font-size: 10px; min-height: 59px; }
  .nav-link .icon { width: 17px; height: 17px; }
  .nav-link.active:after { bottom: 2px; left: 10px; right: 10px; }
  .intro { padding: 22px 3px 18px; }
  .intro-copy > p { font-size: 13px; }
  .demo-badge { font-size: 9px; padding: 7px; gap: 5px; }
  .demo-badge .icon { width: 13px; height: 13px; }
  .system-card { padding: 10px 8px; gap: 7px; }
  .system-card > .icon { width: 19px; height: 19px; }
  .system-card span { font-size: 10px; }
  .system-card strong { font-size: 11px; }
  .overview-footnote { font-size: 9px; }
  .overview-footnote button { min-height: 32px; }
  .provider-card { height: 104px; padding-top: 14px; gap: 8px; }
  .provider-logo { max-width: 126px; height: 47px; }
  .provider-name { font-size: 12px; }
  .selection-line { margin-bottom: 17px; font-size: 10px; }
  .deposit-fieldset legend { font-size: 14px; padding-top: 10px; }
  .deposit-presets { grid-template-columns: repeat(3,1fr); gap: 7px; }
  .deposit-presets button { min-height: 39px; font-size: 12px; }
  .deposit-fieldset .field-hint { line-height: 1.6; margin-top: 9px; }
  .session-total { padding: 15px 0 0; }
  .privacy-line { font-size: 11px; margin-top: 13px; }
  .radar-area { min-height: 292px; }
  .terminal-body { height: 180px; }
  .history-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  .completion-dialog { width: 100%; max-width: 600px; padding: 30px 20px calc(20px + env(safe-area-inset-bottom,0px)); }
  .completion-eyebrow { max-width: 90%; margin: 5px 20px 18px 0; font-size: 9px; }
  .completion-hero { gap: 10px; }
  .completion-hero .completion-symbol { width: 32px; height: 32px; font-size: 20px; }
  .completion-hero h2 { font-size: 20px; }
  .completion-hero p { font-size: 10px; }
  .completion-hero .completion-percent { font-size: 24px; }
  .completion-provider-banner { padding: 12px; gap: 14px; }
  .completion-provider-banner img { width: 102px; height: 40px; }
  .completion-provider-banner strong { font-size: 15px; }
  .completion-provider-banner small { font-size: 9px; }
  .completion-details { gap: 6px 14px; }
  .completion-details .detail-highlight { padding: 10px; }
  .completion-details .detail-highlight dd { font-size: 15px; }
  .completion-details dt { font-size: 11px; }
  .completion-details dd { font-size: 11px; }
  .completion-checklist { font-size: 9px; padding-bottom: 15px; }
}
@media (max-width: 380px) {
  .system-card { gap: 5px; padding: 9px 6px; }
  .system-card > .icon { display: none; }
  .system-card strong { font-size: 11px; }
  .completion-dialog { padding-left: 16px; padding-right: 16px; }
  .completion-hero h2 { font-size: 18px; }
  .completion-hero .completion-percent { font-size: 21px; }
  .completion-hero .completion-percent span { font-size: 13px; }
  .completion-provider-banner img { width: 88px; }
  .completion-provider-banner strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cyber-scanline { animation: none; }
}