/* OX Billing 1.1.27 — six selectable portal themes. */
body[data-theme="classic"] { color-scheme: dark; }

body[data-theme="teal"] {
  color-scheme: dark;
  --app-bg:#07131d; --app-surface:#0d202d; --app-surface-hover:#143344;
  --primary:#12bfc4; --neon-cyan:#42dce0; --neon-pink:#ee76a8; --neon-green:#39d98a;
  --neon-amber:#f2bd55; --neon-purple:#5db4ff; --text:#eaf6f9; --text-muted:#95aeb8;
  --border-subtle:rgba(112,210,220,.17);
  background:var(--app-bg); color:var(--text);
}
body[data-theme="blue"] {
  color-scheme: light;
  --app-bg:#f3f8ff; --app-surface:#ffffff; --app-surface-hover:#edf4fd;
  --primary:#1769d2; --neon-cyan:#147ab8; --neon-pink:#c43f83; --neon-green:#138656;
  --neon-amber:#a75b12; --neon-purple:#7151b8; --text:#132238; --text-muted:#52667c;
  --border-subtle:#d8e4f1;
  background:var(--app-bg); color:var(--text);
}
body[data-theme="violet"] {
  color-scheme: dark;
  --app-bg:#0b0d17; --app-surface:#151827; --app-surface-hover:#20243a;
  --primary:#7567f8; --neon-cyan:#77a8ff; --neon-pink:#e675c8; --neon-green:#50d6a0;
  --neon-amber:#f0bb62; --neon-purple:#a68aff; --text:#f1efff; --text-muted:#a5a8bf;
  --border-subtle:rgba(166,138,255,.20);
  background:var(--app-bg); color:var(--text);
}
body[data-theme="warm"] {
  color-scheme: light;
  --app-bg:#f5f2eb; --app-surface:#fffdf7; --app-surface-hover:#ede8dc;
  --primary:#28784c; --neon-cyan:#327b8c; --neon-pink:#b74771; --neon-green:#28784c;
  --neon-amber:#9b651b; --neon-purple:#6c5a9a; --text:#202a25; --text-muted:#69756e;
  --border-subtle:#ded8cc;
  background:var(--app-bg); color:var(--text);
}
body[data-theme="green"] {
  color-scheme: dark;
  --app-bg:#071b18; --app-surface:#0d2a23; --app-surface-hover:#14392f;
  --primary:#22c995; --neon-cyan:#55e9bd; --neon-pink:#ee80a1; --neon-green:#46d99a;
  --neon-amber:#e6bd63; --neon-purple:#8e9cff; --text:#e8f8f0; --text-muted:#91b3a4;
  --border-subtle:rgba(91,218,172,.17);
  background:var(--app-bg); color:var(--text);
}

/* Keep major portal chrome and cards aligned to each theme's surface tokens. */
body[data-theme="teal"] .app-header-area,
body[data-theme="teal"] .app-bottom-bar,
body[data-theme="teal"] .service-card,
body[data-theme="teal"] .profile-action-row,
body[data-theme="teal"] .switch-wrap,
body[data-theme="teal"] .stat-card,
body[data-theme="teal"] .domain-table-wrap,
body[data-theme="teal"] .service-tool-panel,
body[data-theme="teal"] .input-group-pill,
body[data-theme="violet"] .app-header-area,
body[data-theme="violet"] .app-bottom-bar,
body[data-theme="violet"] .service-card,
body[data-theme="violet"] .profile-action-row,
body[data-theme="violet"] .switch-wrap,
body[data-theme="violet"] .stat-card,
body[data-theme="violet"] .domain-table-wrap,
body[data-theme="violet"] .service-tool-panel,
body[data-theme="violet"] .input-group-pill,
body[data-theme="green"] .app-header-area,
body[data-theme="green"] .app-bottom-bar,
body[data-theme="green"] .service-card,
body[data-theme="green"] .profile-action-row,
body[data-theme="green"] .switch-wrap,
body[data-theme="green"] .stat-card,
body[data-theme="green"] .domain-table-wrap,
body[data-theme="green"] .service-tool-panel,
body[data-theme="green"] .input-group-pill {
  background-color:var(--app-surface);
  border-color:var(--border-subtle);
}
body[data-theme="teal"] .cat-tab-btn.active,
body[data-theme="teal"] .theme-toggle { background:var(--primary); color:#06252a; }
body[data-theme="violet"] .cat-tab-btn.active,
body[data-theme="violet"] .theme-toggle { background:var(--primary); color:#fff; }
body[data-theme="green"] .cat-tab-btn.active,
body[data-theme="green"] .theme-toggle { background:var(--primary); color:#05251b; }
body[data-theme="teal"] .service-card,
body[data-theme="green"] .service-card { border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.16); }
body[data-theme="violet"] .service-card,
body[data-theme="violet"] .stat-card { border-radius:16px; box-shadow:0 10px 32px rgba(0,0,0,.24); }

/* The two light themes share readable, paper-like surfaces and controls. */
body[data-theme="blue"] .app-header-area,
body[data-theme="blue"] .app-bottom-bar,
body[data-theme="blue"] .service-card,
body[data-theme="blue"] .profile-action-row,
body[data-theme="blue"] .switch-wrap,
body[data-theme="blue"] .stat-card,
body[data-theme="blue"] .domain-table-wrap,
body[data-theme="blue"] .service-tool-panel,
body[data-theme="blue"] .input-group-pill,
body[data-theme="blue"] .cat-selector-card,
body[data-theme="blue"] .bottom-sheet,
body[data-theme="blue"] .profile-card,
body[data-theme="warm"] .app-header-area,
body[data-theme="warm"] .app-bottom-bar,
body[data-theme="warm"] .service-card,
body[data-theme="warm"] .profile-action-row,
body[data-theme="warm"] .switch-wrap,
body[data-theme="warm"] .stat-card,
body[data-theme="warm"] .domain-table-wrap,
body[data-theme="warm"] .service-tool-panel,
body[data-theme="warm"] .input-group-pill,
body[data-theme="warm"] .cat-selector-card,
body[data-theme="warm"] .bottom-sheet,
body[data-theme="warm"] .profile-card {
  background:var(--app-surface)!important;
  color:var(--text)!important;
  border-color:var(--border-subtle)!important;
  box-shadow:0 5px 18px rgba(20,35,50,.07);
}
body[data-theme="blue"] .service-card-main strong,
body[data-theme="blue"] .services-dashboard-head h1,
body[data-theme="blue"] .services-dashboard-head h2,
body[data-theme="blue"] .service-tool-panel>b,
body[data-theme="blue"] .service-tool-panel h3,
body[data-theme="blue"] .domain-hero-card strong,
body[data-theme="warm"] .service-card-main strong,
body[data-theme="warm"] .services-dashboard-head h1,
body[data-theme="warm"] .services-dashboard-head h2,
body[data-theme="warm"] .service-tool-panel>b,
body[data-theme="warm"] .service-tool-panel h3,
body[data-theme="warm"] .domain-hero-card strong { color:var(--text)!important; }
body[data-theme="blue"] [style*="color:#fff"],
body[data-theme="blue"] [style*="color: #fff"],
body[data-theme="blue"] [style*="color:#ffffff"],
body[data-theme="blue"] [style*="color: #ffffff"],
body[data-theme="warm"] [style*="color:#fff"],
body[data-theme="warm"] [style*="color: #fff"],
body[data-theme="warm"] [style*="color:#ffffff"],
body[data-theme="warm"] [style*="color: #ffffff"] { color:var(--text)!important; }
body[data-theme="blue"] input,
body[data-theme="blue"] select,
body[data-theme="blue"] textarea,
body[data-theme="warm"] input,
body[data-theme="warm"] select,
body[data-theme="warm"] textarea {
  background:var(--app-surface)!important; color:var(--text)!important; border-color:var(--border-subtle)!important;
}
body[data-theme="blue"] select option,
body[data-theme="warm"] select option { background:var(--app-surface); color:var(--text); }
body[data-theme="blue"] .theme-toggle,
body[data-theme="warm"] .theme-toggle { background:var(--app-surface); color:var(--primary); border-color:var(--border-subtle); }
body[data-theme="blue"] .theme-toggle:hover,
body[data-theme="warm"] .theme-toggle:hover { background:var(--app-surface-hover); border-color:var(--primary); }
body[data-theme="blue"] .announcement-ticker,
body[data-theme="warm"] .announcement-ticker { background:var(--app-surface); border-color:var(--border-subtle); }
body[data-theme="blue"] .announcement-ticker-item,
body[data-theme="warm"] .announcement-ticker-item,
body[data-theme="blue"] .announcement-ticker-item strong,
body[data-theme="warm"] .announcement-ticker-item strong { color:var(--text); }
body[data-theme="warm"] .service-card,
body[data-theme="warm"] .stat-card { border-radius:18px; box-shadow:0 9px 24px rgba(84,73,50,.08); }
body[data-theme="blue"] .service-card,
body[data-theme="blue"] .stat-card { border-radius:14px; }

/* Theme chooser: responsive, keyboard-friendly and branded to the active palette. */
.theme-picker-backdrop { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(3,8,18,.72); backdrop-filter:blur(9px); }
.theme-picker-backdrop[hidden] { display:none; }
.theme-picker-dialog { width:min(680px,100%); max-height:min(86dvh,760px); overflow:auto; padding:22px; border:1px solid var(--border-subtle); border-radius:22px; background:var(--app-surface); color:var(--text); box-shadow:0 24px 80px rgba(0,0,0,.35); }
.theme-picker-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.theme-picker-head h2 { margin:0 0 5px; font-size:20px; color:var(--text); }
.theme-picker-head p { margin:0; color:var(--text-muted); font-size:12px; line-height:1.55; }
.theme-picker-close { flex:0 0 36px; width:36px; height:36px; border:1px solid var(--border-subtle); border-radius:11px; background:var(--app-bg); color:var(--text); font-size:22px; cursor:pointer; }
.theme-picker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.theme-choice { display:flex; align-items:center; gap:12px; width:100%; min-height:74px; padding:12px; border:1px solid var(--border-subtle); border-radius:15px; background:var(--app-bg); color:var(--text); text-align:left; cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.theme-choice:hover { transform:translateY(-2px); border-color:var(--primary); }
.theme-choice[aria-pressed="true"] { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 24%,transparent); }
.theme-choice-swatches { display:flex; align-items:center; flex:0 0 52px; width:52px; height:44px; padding:7px; gap:5px; border:1px solid var(--border-subtle); border-radius:11px; background:var(--swatch-bg); }
.theme-choice-swatches i { display:block; width:11px; height:24px; border-radius:99px; background:var(--swatch-a); }
.theme-choice-swatches i:nth-child(2) { height:19px; background:var(--swatch-b); }
.theme-choice-swatches i:nth-child(3) { height:14px; background:var(--swatch-c); }
.theme-choice-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.theme-choice-copy strong { font-size:13px; }
.theme-choice-copy small { color:var(--text-muted); font-size:10px; line-height:1.35; }
.theme-picker-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:15px 0 0; color:var(--text-muted); font-size:11px; line-height:1.5; }
.theme-reset-default { flex:0 0 auto; padding:8px 11px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--app-bg); color:var(--primary); font:700 11px system-ui,sans-serif; cursor:pointer; }
.theme-reset-default:hover { border-color:var(--primary); }
@media(max-width:520px) {
  .theme-picker-backdrop { align-items:flex-end; padding:0; }
  .theme-picker-dialog { width:100%; max-height:88dvh; padding:20px 16px calc(18px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; }
  .theme-picker-grid { grid-template-columns:1fr; gap:8px; }
  .theme-choice { min-height:66px; }
  .theme-picker-foot { align-items:stretch; flex-direction:column; }
  .theme-reset-default { min-height:40px; }
}

/* Layout families inspired by the five responsive concepts: desktop rail, top navigation and catalog-first views. */
body[data-theme="teal"] { --nav-rail-width:218px; }
body[data-theme="violet"] { --nav-rail-width:236px; }
body[data-theme="green"] { --nav-rail-width:228px; }
@media(min-width:900px) {
  body[data-theme="teal"] .app-bottom-bar,
  body[data-theme="violet"] .app-bottom-bar,
  body[data-theme="green"] .app-bottom-bar {
    top:var(--header-h); right:auto; bottom:0; left:0; width:var(--nav-rail-width); height:auto;
    padding:18px 12px 20px; align-items:flex-start; justify-content:flex-start;
    border-top:0; border-right:1px solid var(--border-subtle); background:var(--app-surface);
  }
  body[data-theme="teal"] .footer-content,
  body[data-theme="violet"] .footer-content,
  body[data-theme="green"] .footer-content {
    width:100%; max-width:none; padding:10px 4px; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:8px;
  }
  body[data-theme="teal"] .bar-nav-btn,
  body[data-theme="violet"] .bar-nav-btn,
  body[data-theme="green"] .bar-nav-btn {
    width:100%; min-height:46px; padding:0 14px; flex-direction:row; justify-content:flex-start;
    gap:13px; border-radius:11px; text-align:left;
  }
  body[data-theme="teal"] .bar-nav-btn i,
  body[data-theme="violet"] .bar-nav-btn i,
  body[data-theme="green"] .bar-nav-btn i { width:20px; font-size:16px; text-align:center; }
  body[data-theme="teal"] .bar-nav-btn.active,
  body[data-theme="violet"] .bar-nav-btn.active,
  body[data-theme="green"] .bar-nav-btn.active { background:color-mix(in srgb,var(--primary) 15%,transparent); }
  body[data-theme="teal"] .bar-nav-btn.active::after,
  body[data-theme="violet"] .bar-nav-btn.active::after,
  body[data-theme="green"] .bar-nav-btn.active::after {
    top:0; bottom:0; left:0; width:3px; height:auto; border-radius:0 99px 99px 0; box-shadow:none;
  }
  body[data-theme="teal"] .app-header-area,
  body[data-theme="violet"] .app-header-area,
  body[data-theme="green"] .app-header-area { left:var(--nav-rail-width); right:0; }
  body[data-theme="teal"] .header-content,
  body[data-theme="violet"] .header-content,
  body[data-theme="green"] .header-content { max-width:none; padding:0 26px; }
  body[data-theme="teal"] .app-viewport,
  body[data-theme="violet"] .app-viewport,
  body[data-theme="green"] .app-viewport {
    top:var(--header-h); right:0; bottom:0; left:var(--nav-rail-width);
    padding:24px 28px 44px;
  }
  body[data-theme="teal"] .viewport-inner,
  body[data-theme="violet"] .viewport-inner,
  body[data-theme="green"] .viewport-inner { max-width:1400px; }

  body[data-theme="blue"] .app-bottom-bar,
  body[data-theme="warm"] .app-bottom-bar {
    top:var(--header-h); right:0; bottom:auto; left:0; width:100%; height:54px;
    border-top:0; border-bottom:1px solid var(--border-subtle); background:var(--app-surface);
  }
  body[data-theme="blue"] .footer-content,
  body[data-theme="warm"] .footer-content { max-width:1180px; justify-content:flex-start; gap:14px; padding:0 22px; }
  body[data-theme="blue"] .bar-nav-btn,
  body[data-theme="warm"] .bar-nav-btn {
    width:auto; min-width:76px; min-height:42px; padding:0 13px; flex-direction:row;
    justify-content:center; gap:8px; border-radius:11px;
  }
  body[data-theme="blue"] .bar-nav-btn i,
  body[data-theme="warm"] .bar-nav-btn i { font-size:14px; }
  body[data-theme="blue"] .bar-nav-btn.active::after,
  body[data-theme="warm"] .bar-nav-btn.active::after { bottom:-5px; width:20px; height:3px; border-radius:99px; box-shadow:none; }
  body[data-theme="blue"] .app-viewport,
  body[data-theme="warm"] .app-viewport { top:calc(var(--header-h) + 54px); bottom:0; padding:25px 24px 42px; }
  body[data-theme="blue"] .viewport-inner,
  body[data-theme="warm"] .viewport-inner { max-width:1180px; }
}

/* Catalog-specific treatments preserve the same working tariff/order controls. */
body[data-theme="teal"] .main-category-tabs,
body[data-theme="violet"] .main-category-tabs,
body[data-theme="green"] .main-category-tabs { border-radius:13px; }
body[data-theme="blue"] .main-category-tabs,
body[data-theme="warm"] .main-category-tabs { background:var(--app-surface); border-color:var(--border-subtle); box-shadow:0 6px 20px rgba(20,35,50,.06); }
body[data-theme="blue"] .grid-responsive-tariffs,
body[data-theme="warm"] .grid-responsive-tariffs { gap:16px; }
body[data-theme="warm"] .grid-responsive-tariffs .plan-card-3d { border-radius:18px; box-shadow:0 12px 28px rgba(65,56,40,.08); }
body[data-theme="blue"] .grid-responsive-tariffs .plan-card-3d { border-radius:15px; box-shadow:0 10px 28px rgba(26,72,125,.08); }
body[data-theme="violet"] .grid-responsive-tariffs .plan-card-3d { border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.22); }
body[data-theme="green"] .grid-responsive-tariffs .plan-card-3d { border-radius:12px; }