:root {
  color-scheme: dark;
  --navy: #080d19;
  --navy-2: #111b30;
  --ink: #f3f7ff;
  --muted: #9babca;
  --blue: #6ca2ff;
  --blue-2: #3a7af0;
  --green: #5cdbbc;
  --line: #273650;
  --soft: #142038;
  --paper: #111a2b;
  --shadow: 0 14px 36px #02081340;
}

body { background: #080d19; }
input, select, textarea { color: var(--ink); }
select { border: 1px solid #32445f; border-radius: 6px; background: #0e1727; }
input::placeholder, textarea::placeholder { color: #8193b1; opacity: 1; }
.card, .product-card, .faq-item { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow); }
.site-header { background: #0d1525; border-top: 3px solid #172844; border-bottom: 1px solid #21314d; box-shadow: none; }
.site-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(45deg, #6e84a522 25%, transparent 25%, transparent 75%, #6e84a522 75%), linear-gradient(45deg, #6e84a522 25%, transparent 25%, transparent 75%, #6e84a522 75%); background-size: 8px 8px; background-position: 0 0, 4px 4px; }
.header-inner { position: relative; }
.brand-mark { color: #66a5ff; }
.account-button { background: #152137; border-color: #33435c; }
.preview-banner { color: #a9c7f9; background: #101d32; border-color: #253c60; }
.site-footer { color: #aebcd3; background: #0c1424; border-top: 1px solid var(--line); }
.footer-inner nav a, .footer-inner > span { color: #99aac5; }
.eyebrow, .text-link, .link-button { color: #83b4ff; }
.outline-button, .subtle-button, .dark-button, .glass-button { color: #e8effd; background: #18253b; border: 1px solid #344863; box-shadow: none; }
.outline-button:hover, .subtle-button:hover, .dark-button:hover, .glass-button:hover { color: #fff; background: #213453; border-color: #669dff; }
.gradient-button, .primary-button { color: #fff; background: #286dea; box-shadow: 0 8px 22px #0d4abe35; }
.gradient-button:hover, .primary-button:hover { background: #3d80f4; }
.light-button { color: #f3f7ff; background: #234f9e; border: 1px solid #3971ca; }
.light-button:hover { color: #fff; background: #3169c6; }
.product-glyph { background: linear-gradient(145deg, #237df8, #1d4cb9); box-shadow: 0 7px 18px #001d6138; }
.chips span, .demo-tag { color: #a9c8f7; background: #1b2b46; border-color: #2e4e7c; }
.product-price, .purchase-price { color: #f6f9ff; }
.product-points, .check-list { color: #b6c3d8; }
.product-points li::before { color: #63a0ff; }
.stock { color: var(--green); }
.badge { background: #2658a5; }
.page-title p, .section-heading p, .panel-heading p { color: var(--muted); }
.product-card:hover, .help-topic:hover { border-color: #42699d; }

/* Shared, stationary navigation for every route. */
.desktop-nav { margin-left: 8px; gap: 24px; }
.desktop-nav a { color: #b9c9df; font-weight: 500; }
.desktop-nav a:hover, .desktop-nav a.active { color: #fff; border-color: #6ca2ff; }
.header-actions { margin-left: auto; }
.site-layout { width: min(100% - 80px, 1440px); display: grid; grid-template-columns: 258px minmax(0, 1fr); align-items: start; gap: 28px; margin-inline: auto; }
.site-layout #main { grid-column: 2; min-width: 0; }
.site-layout #main .container { width: 100%; margin-inline: 0; }
.site-sidebar { position: sticky; top: 18px; max-height: calc(100vh - 36px); margin-top: 28px; padding: 19px 14px 16px; overflow-y: auto; border: 1px solid #294268; border-radius: 18px; background: #111b2e; scrollbar-color: #5679a9 #142035; scrollbar-width: thin; }
.site-sidebar-heading { padding: 0 5px 13px; }
.site-sidebar-heading h2 { margin: 0 0 3px; font-size: 18px; }
.site-category-nav { display: grid; gap: 5px; }
.site-category-nav a { display: flex; align-items: center; min-height: 42px; padding: 8px 11px; border: 1px solid #263a58; border-radius: 9px; color: #b9c9df; background: #152238; font-size: 13px; line-height: 1.35; }
.site-category-nav a:hover, .site-category-nav a.active { color: #fff; border-color: #4a73a9; background: #1d3658; }
.site-category-nav a.active { box-shadow: inset 3px 0 #6ca2ff; }
.sidebar-message { margin: 13px 5px 4px; color: var(--muted); font-size: 12px; }
.sidebar-retry { margin-left: 5px; }
.home-page { padding-top: 28px; }
.home-hero { min-height: 456px; border: 1px solid #263751; border-radius: 23px; overflow: hidden; background: linear-gradient(90deg, #111a2b 4%, #111a2be8 38%, #101a2b55 100%), url('./assets/hero-globe.png') 70% center / cover; box-shadow: inset 0 1px 0 #ffffff0a; }
.hero-content { min-height: 456px; padding: 30px; }
.hero-copy { max-width: 570px; }
.hero-copy .eyebrow { color: #6e9dff; }
.hero-copy h1 { font-size: clamp(34px, 3.5vw, 48px); letter-spacing: -.035em; line-height: 1.13; }
.hero-copy p { max-width: 510px; color: #b8c6db; line-height: 1.75; }
.home-page .home-info-grid { margin-top: 16px; }
.catalog-root .page-title, .catalog-page .page-title { padding-top: 26px; }
.catalog-search { width: min(100%, 420px); min-height: 42px; margin: 0 0 20px; }
.catalog-search input { flex: 1; width: 100%; }
.catalog-search button { font-size: 22px; line-height: 1; }
.catalog-intro { min-height: 220px; padding: 28px; }
.catalog-intro h2 { margin: 0 0 8px; font-size: 20px; }
.catalog-intro p { margin: 0; color: var(--muted); }
.process-panel { border: 1px solid var(--line); background: #121e32; }
.process-panel p { color: #acbdd8; }
.supply-panel { border: 1px solid #26466d; background: linear-gradient(95deg, #122849e6, #102039ce), url('./assets/hero-globe.png') center / cover; }
.supply-panel p { color: #b8cdea; }

/* Catalog, forms, and transaction surfaces share the same dark controls. */
.inline-search, .view-switch, .amount-input, .number-input, .form-stack input, .review-form textarea, .stepper, .cart-quantity input, .bulk-row select, .bulk-row input { color: var(--ink); background: #0e1727; border-color: #32445f; }
.inline-search input, .amount-input input { color: var(--ink); }
.inline-search:focus-within, .amount-input:focus-within { border-color: #6ca2ff; box-shadow: 0 0 0 3px #296df32b; }
.site-layout .bulk-search, .site-layout .bulk-search:focus-within { padding: 0; border: 0; background: transparent; box-shadow: none; }
.site-layout .bulk-search input { flex: 1 1 0; width: auto; height: 40px; padding: 0 12px; border: 1px solid #32445f; border-radius: 7px; background: #0e1727; }
.site-layout .bulk-search input:focus { border-color: #6ca2ff; box-shadow: 0 0 0 3px #296df32b; }
.site-layout .bulk-search .primary-button { min-height: 40px; }
.site-layout .bulk-main { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.site-layout .bulk-list { min-width: 0; }
.form-stack input:focus, .review-form textarea:focus { border-color: #6ca2ff; box-shadow: 0 0 0 3px #296df32b; }
.view-switch button { color: #8ea4c3; }
.view-switch button[aria-pressed='true'] { color: #fff; background: #275ca9; }
.pagination button { color: #c7d7ef; background: #152238; border-color: var(--line); }
.pagination button.selected { color: #fff; background: #245cae; }
.empty-state { color: var(--muted); }
.spec-grid dl > div, .cart-row, .checkout-item, .order-line, .compact-row { border-color: var(--line); }
.spec-grid dt, .readonly-field, .subtotal, .wallet-summary, .payment-facts > div, .pricing-preview, .muted-result { color: #bfd0e9; background: #182842; }
.spec-grid dd, .summary-line strong, .wallet-summary strong { color: var(--ink); }
.summary-line { color: #9eafca; }
.summary-line.total, .purchase-benefits, .profile-balance, .tabs, .order-row, .file-row, .compact-table > div { border-color: var(--line); }
.warning-alert { color: #f3ce8d; background: #392a1b; }
.inline-alert, .notice-panel, .help-strip { color: #a9caff; background: #172c49; }
.help-strip strong { color: #e2ecff; }
.help-strip p { color: #a6b9d5; }
.payment-method { background: #172b43; border-color: #4479c4; }
.payment-method small, .wallet-summary span, .amount-input > span, .balance-amount p, .wallet-notes ul { color: #a2b4cf; }
.wallet-summary span + span, .order-facts > div, .files-table, .orders-table, .simple-list { border-color: var(--line); }
.balance-icon, .avatar { color: #99c0ff; background: #203654; }
.amount-options button { color: #cbdaf1; background: #1a2a43; border-color: #32445f; }
.amount-options button.selected { color: #fff; background: #286dea; border-color: #629af8; }
.tabs button { color: #a3b6d1; }
.tabs button.selected { color: #9fc5ff; background: #1b3150; }
.orders-head, .files-head, .bulk-table-head, .compact-table > div:first-child { color: #a9bbd4; background: #192941; }
.order-id, .order-row time, .file-row, .order-facts small { color: #a9bad3; }
.timeline > div:not(:last-child)::after { background: #33445f; }
.timeline span, .timeline .current span { background: #203451; }
.timeline .done { color: #83b4ff; }
.timeline .current { color: #a4c7ff; }
.status-completed { color: #6be0b5; background: #173d36; }
.status-processing { color: #92bbff; background: #1a355b; }
.status-failed { color: #f0c484; background: #3b2c1f; }
.auth-visual { border: 1px solid var(--line); background: linear-gradient(90deg, #0b172bd9, #0b172b55), url('./assets/hero-globe.png') 57% / cover; }
.auth-tabs { background: #17263c; }
.auth-tabs button { color: #a7b9d1; }
.auth-tabs button.selected { color: #fff; background: #244e8a; }
.auth-divider span { background: var(--paper); }
.faq-item button { color: #e3ebfa; }
.help-topic-icon { color: #92bdff; background: #203958; }
.help-topic-icon.buy { color: #74dcbe; background: #1b3a35; }
.help-topic-icon.topup { color: #f0ca88; background: #3a3022; }
.help-topic-icon.orders { color: #b6a8ff; background: #302d50; }
.help-topic-icon.faq { color: #edafc7; background: #432838; }
.toast, .review-card { color: var(--ink); background: #15233a; border-color: #3a5476; }
.toast button { color: #a6b8d4; }
.app-alert { color: #b9d5ff; background: #152b49; }
.app-alert.error { color: #f0afa4; background: #3d2326; }

@media (max-width: 1300px) {
  .site-layout { width: min(100% - 48px, 1440px); grid-template-columns: 240px minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .mobile-menu-button { display: inline-flex; padding: 8px; }
  .mobile-nav { display: none; }
  .mobile-nav.open { width: min(100% - 48px, 1440px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0 auto; padding: 12px; border: 1px solid #294268; border-radius: 0 0 12px 12px; background: #111b2e; }
  .mobile-nav a, .mobile-nav button { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 7px; color: #d9e6fb; background: transparent; text-align: left; }
  .mobile-nav a:hover, .mobile-nav a.active, .mobile-nav button:hover { color: #fff; background: #1d3658; }
  .mobile-nav-actions { display: none; }
  .site-layout .detail-layout, .site-layout .checkout-layout, .site-layout .wallet-layout { grid-template-columns: 1fr; }
  .site-layout .purchase-panel, .site-layout .summary-panel { position: static; }
  .site-layout .catalog-grid:not(.list-view) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mobile-menu-button { margin-left: auto; }
  .mobile-nav { display: none; }
  .mobile-nav.open { display: grid; }
  .mobile-nav-actions { display: contents; }
  .site-layout { width: min(100% - 48px, 1440px); display: block; }
  .site-sidebar { display: none; position: static; max-height: min(72vh, 600px); margin: 16px 0 0; }
  .site-sidebar.open { display: block; }
  .site-layout #main .container { width: 100%; }
}
@media (max-width: 720px) {
  .mobile-nav.open { width: min(100% - 28px, 1440px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-layout { width: min(100% - 28px, 1440px); }
  .home-hero { order: 1; min-height: 410px; background-position: 64% center; }
  .hero-content { min-height: 410px; align-items: end; padding: 22px; }
  .hero-copy h1 { font-size: clamp(30px, 7vw, 38px); }
  .hero-copy p { font-size: 14px; }
}
@media (max-width: 520px) {
  .site-layout .catalog-grid:not(.list-view) { grid-template-columns: 1fr; }
  .home-hero { min-height: 390px; }
  .hero-content { min-height: 390px; padding: 20px; }
  .hero-copy h1 { font-size: 30px; }
  .hero-copy p { line-height: 1.55; }
  .catalog-intro { min-height: 170px; padding: 20px; }
}