/* Blue-and-white theme. Shared by the storefront, order page and admin. */
:root {
  color-scheme: light;
  --bg: #f7faff;
  --panel: #ffffff;
  --panel-light: #eef5ff;
  --line: #d8e3f2;
  --muted: #5d708b;
  --text: #162b4b;
  --cyan: #2463eb;
  --cyan-strong: #174fd1;
  --danger: #bc3042;
  --green: #187346;
}

body { background: linear-gradient(180deg, #ffffff 0, #f5f9ff 700px, #ffffff 1500px, #f7faff 100%); }
::selection { background: #d5e5ff; color: #123b8b; }
input:focus, textarea:focus, select:focus { outline-color: #2463eb30; border-color: #4f82e8; }
.site-grid {
  background: radial-gradient(ellipse at 76% 25%, #d9eaff9c, transparent 55%), linear-gradient(#3865a808 1px, transparent 1px), linear-gradient(90deg, #3865a808 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
}
.site-header { border-bottom-color: #dce6f2; background: #ffffff9c; }
.brand { color: #16355e; }
.brand-mark, .footer-top .brand-mark { background: #2463eb; color: #fff; box-shadow: 0 4px 12px #2463eb18; }
.brand small { color: #627995; }
.site-header nav { color: #49617e; }
.site-header nav a:hover, .text-link:hover, .site-footer a:hover { color: #164ec8; }
.button { border-radius: 8px; }
.button-primary { background: #2463eb; border-color: #2463eb; color: #fff; box-shadow: 0 5px 15px #2463eb1f; }
.button-primary:hover { background: #194fd2; border-color: #194fd2; box-shadow: 0 7px 20px #2463eb28; }
.button-ghost { color: #24529c; border-color: #c4d6ee; background: #ffffffc9; }
.button-ghost:hover { background: #edf4ff; border-color: #8cafe9; color: #174fc4; }
.button-subtle { color: #2454a0; background: #edf4ff; border-color: #c9daf2; }
.button-subtle:hover { background: #dceaff; }
.button:disabled { color: #6a7890; background: #edf1f7; border-color: #d8e0eb; opacity: 1; box-shadow: none; cursor: not-allowed; transform: none; }
.text-link { color: #355b8e; font-size: 13px; }
.eyebrow { color: #537099; }
.tiny-dot { background: #3277f1; box-shadow: 0 0 0 3px #3277f112; }
h1 { color: #132f58; font-weight: 650; }
h1 > span { background-image: linear-gradient(100deg, #2057d0 0%, #3a8aec 100%); }
.hero-description { color: #546b88; }
.hero-points { color: #59718d; font-size: 12px; }
.hero-points i { color: #3470c7; }
.hero-actions .button-primary { min-height: 50px; padding-inline: 25px; }

/* Light glass and precise orbital lines keep the technology visual airy. */
.art-grid { background-image: linear-gradient(#4a83ce12 1px, transparent 1px), linear-gradient(90deg, #4a83ce12 1px, transparent 1px); }
.orbital-glow { background: radial-gradient(ellipse, #b8d9ff85, transparent 67%); filter: blur(18px); }
.orbit { border-color: #5b96e95c; box-shadow: 0 -1px 1px #ffffffcc; }
.orbit-two { border-color: #75a2dc35; }
.orbit-three { border-color: #75a2dc22; }
.core-card {
  border-color: #ffffff;
  background: linear-gradient(145deg, #f7fcff 0%, #c9e4ff 38%, #accff7 72%, #e7f4ff 100%);
  box-shadow: 14px 24px 48px #3c78bf22, inset 1px 1px 1px #ffffff, inset -3px -1px 1px #85b1e4;
}
.core-card:before { background: linear-gradient(90deg, transparent, #ffffffa8, transparent); }
.core-top { color: #3d6597; }
.core-symbol { color: #2c6cdf; text-shadow: 1px 2px 0 #ffffffcf, 4px 7px 0 #8eb9ee, 0 12px 22px #2f76cf25; }
.core-bottom { color: #4c7099; }
.core-bottom b { color: #275488; }
.core-arrow { color: #2c65ad; }
.orbit-dot { background: #367ce8; box-shadow: 0 0 0 5px #428bf014, 0 4px 8px #397fde24; }
.art-tag { border-color: #cfdef2; background: #ffffffeb; box-shadow: 0 10px 26px #4674a912; }
.tag-top { color: #4f73a0; }
.tag-bottom { color: #244974; }
.tag-bottom small { color: #627c9d; }
.tag-icon { color: #3378e0; }
.tag-arrow { color: #3777c6; }
.coordinates { color: #7391b5; }
.coord-bottom span { color: #6493cf; }

.preview-notice { color: #365d90; background: #edf5ff; border-color: #cee0f7; font-size: 12px; }
.notice-symbol { color: #3679dc; }
.notice-label { color: #3263a5; background: #fff; border-color: #bfd4ef; }
.section-heading h2, .faq h2 { color: #19385f; font-weight: 600; }
.section-heading > p { color: #5c7390; font-size: 12px; }
.product-card { background: #ffffff; border-color: #d5e1f0; border-radius: 15px; box-shadow: 0 6px 22px #2d58810a; }
.product-card.featured { border-color: #6c97ef; background: linear-gradient(155deg, #f0f6ff, #ffffff 62%); box-shadow: 0 10px 30px #3975d514; }
.product-card.featured:before { height: 2px; background: linear-gradient(90deg, transparent, #4080ee, transparent); box-shadow: none; }
.product-icon { color: #3269b9; border-color: #d0dff3; background: #edf4ff; }
.featured .product-icon { color: #fff; background: #2c68e4; border-color: #2c68e4; }
.badge { color: #285fc0; border-color: #c8daf8; background: #e9f2ff; font-size: 10px; }
.product-card h3 { color: #17375f; font-size: 21px; }
.product-subtitle { color: #627693; font-size: 12px; }
.price { color: #183b6f; }
.price-value { font-weight: 600; }
.price-unit { color: #627793; font-size: 12px; }
.product-description { color: #5c7190; font-size: 12px; min-height: 42px; }
.product-features { color: #385577; border-color: #e0e9f5; font-size: 12px; }
.feature-check { color: #2e77cf; font-weight: 650; }
.product-card .button { min-height: 47px; font-size: 13px; }
.product-card .button-ghost:not(:disabled) { color: #235ac2; border-color: #9ebcf0; background: #f0f6ff; }
.product-card .button-ghost:not(:disabled):hover { background: #e3eeff; }
.product-note { color: #607591; font-size: 10px; }
.section-footnote { color: #607591; font-size: 11px; }
.loading-card { background: #ffffffa6; }
/* Keep the approved background; six offers form two rows, with a five-offer fallback. */
.product-grid.five-plans, .product-grid.six-plans { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 22px; }
.five-plans > .product-card, .six-plans > .product-card { grid-column: span 2; }
.five-plans > .product-card:nth-child(4) { grid-column: 2 / span 2; }
.five-plans > .product-card:nth-child(5) { grid-column: 4 / span 2; }
.how { border-color: #dae5f2; }
.small-label { color: #6a81a1; }
.step:not(:last-child):after { background: linear-gradient(90deg, #b9ceeb, transparent); }
.step-num { color: #ceddf0; }
.step-icon { color: #326bca; background: #edf4ff; border-color: #d0dff3; }
.step h3 { color: #244264; }
.step p { color: #607691; font-size: 12px; }
.faq-intro > p:not(.eyebrow) { color: #607691; }
.faq-list details { border-color: #dce5f2; }
.faq-list summary { color: #29496f; font-size: 14px; }
.faq-list summary span, .faq-list details[open] summary span { color: #4b7cc4; }
.faq-list details p { color: #5d728f; font-size: 12px; }
.closing { background: radial-gradient(ellipse at 90% 80%, #d5e8ff8c, transparent 65%), linear-gradient(100deg, #edf5ff, #f7fbff); border-color: #cfdef3; }
.closing h2 { color: #224575; }
.closing:before { color: #82a9df25; }
.footer-top > p, .footer-top > div { color: #5e7693; font-size: 11px; }
.footer-bottom { color: #637a95; border-color: #dbe5f2; font-size: 10px; }
.footer-bottom .tiny-dot { background: #5c8fd6; }

/* High-contrast forms and transaction states across both workspaces. */
.checkout-dialog { background: #fff; border-color: #ccdcef; box-shadow: 0 24px 80px #23457533; }
.checkout-dialog::backdrop { background: #203b5b47; backdrop-filter: blur(6px); }
.dialog-heading h2 { color: #1a3b66; }
.icon-button { color: #45668d; border-color: #d1deef; background: #f8fbff; }
.icon-button:hover { background: #eaf2ff; }
.checkout-product { background: #f0f6ff; border-color: #d0e0f7; }
.checkout-product strong { color: #225bc0; }
.field label { color: #2d496a; font-weight: 550; font-size: 13px; }
.field input, .field textarea, .field select, .table-input, .table-select { background: #fff; border-color: #bacce3; color: #243d5d; }
.field input::placeholder, .field textarea::placeholder { color: #7789a1; }
.field small { color: #627894; font-size: 11px; }
.check-field { color: #526a88; font-size: 11px; }
.dialog-note { color: #667e9b; font-size: 11px; }
.toast { color: #1d4b87; border-color: #c0d8f3; background: #f1f7ff; box-shadow: 0 8px 28px #28599120; }
.page-intro h1 { color: #1a3c66; }
.page-intro p:not(.eyebrow) { color: #5f7794; }
.panel { background: #fff; border-color: #d4e1f1; box-shadow: 0 5px 18px #315b8e07; }
.panel h2 { color: #23466e; }
.panel p.muted, .muted { color: #607894; }
.order-id { color: #5b7594; }
.status-badge { color: #2e61a6; border-color: #bed4f2; background: #edf4ff; font-size: 11px; }
.status-delivered { color: #1e714d; border-color: #b9dec8; background: #eff9f3; }
.status-needs_attention, .status-expired, .status-cancelled { color: #975024; border-color: #e9d0b7; background: #fff6eb; }
.order-data dt { color: #617a97; }
.order-data dd { color: #2e4e74; }
.payment-area { border-color: #dce7f4; }
.payment-area > p { color: #5c7390; font-size: 12px; }
.token-panel { background: #eef5ff; border-color: #b9d3f6; }
.token-panel h2 { color: #235ba5; }
.token-panel p { color: #4c6b91; }
.token-panel .token-box { color: #174d98; background: #ffffff; border-color: #c4d8f2; }
.token-panel .token-actions small { color: #617c9c; }
.timeline li { border-left-color: #c9d9ee; }
.timeline li:before { background: #4381df; box-shadow: 0 0 0 4px #edf4ff; }
.timeline strong { color: #2b4d77; }
.timeline time { color: #637e9e; font-size: 11px; }
.timeline p { color: #5c7798; font-size: 12px; }
.delivery-box { color: #235c79; background: #f0f9fc; border-color: #c3dfea; }
.order-actions small { color: #637c99; font-size: 11px; }
.empty-state { color: #627a98; }
.connection-state { color: #5679a2; }
.admin-tabs { border-color: #d2dfef; }
.admin-tab { color: #577291; }
.admin-tab:hover { background: #f0f6ff; }
.admin-tab[aria-selected=true] { background: #e6efff; color: #2158b6; font-weight: 600; }
.metric { background: #fff; border-color: #d5e2f2; }
.metric span { color: #637b98; font-size: 12px; }
.metric strong { color: #2358a0; }
.data-table th, .data-table td { border-bottom-color: #e0e9f5; }
.data-table th { color: #5c7392; font-size: 11px; background: #f8fbff; }
.data-table td { color: #334f72; font-size: 12px; }
.data-table small { color: #6a809b; font-size: 11px; }
.data-table tbody tr:hover { background: #f8fbff; }
.config-item { background: #f5f9ff; border-color: #d4e3f5; }
.config-item span { color: #627d9d; }
.config-item strong { color: #31567e; }
.admin-help { color: #607995; font-size: 12px; }
.login-demo { color: #416992; background: #edf5ff; border-color: #c8dcf5; }
.login-demo code { color: #2357a3; }
.danger-button { color: #a53a45; border-color: #edc3ca; background: #fff2f4; }

@media(min-width:761px) and (max-width:1050px) {
  .orbit-three { width: 460px; }
  .product-grid.five-plans, .product-grid.six-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .five-plans > .product-card:nth-child(4) { grid-column: span 2; }
  .five-plans > .product-card:nth-child(5) { grid-column: 2 / span 2; }
}

@media(max-width:760px) {
  .product-grid.five-plans, .product-grid.six-plans { grid-template-columns: minmax(0, 1fr); }
  .five-plans > .product-card:nth-child(n), .six-plans > .product-card:nth-child(n) { grid-column: auto; }
  .hero-points { font-size: 10px; gap: 19px; }
  .hero-description { font-size: 14px; }
  .hero-actions .button-primary { padding-inline: 20px; }
  .preview-notice { font-size: 11px; }
  .product-card { padding: 25px; }
  .product-card .button { min-height: 48px; }
  .section-footnote { font-size: 10px; }
  .step:not(:last-child):after { background: #cfddf0; }
  .faq-list summary { font-size: 13px; }
  .footer-top > div { font-size: 10px; gap: 16px; }
  .footer-bottom { font-size: 9px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .token-panel p { font-size: 12px; }
  .order-data { font-size: 12px; }
}