/*
 * Br3eze Africa — Power Connect
 * Design System: Power Connect Black
 * Palette: Near-black canvas · indigo accent · pure white type
 */
/* Barlow: a free DIN-like grotesk for the public pages (PAGE LAYER "public
   pages, Starlink × ChatGPT"). Falls back to the system font offline. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');


:root {
  /* ── Theme channels (light values in FOUNDATION → Theme) ──
     --ink is the colour of tints, hairlines and glass edges as "r g b",
     so any alpha works: rgb(var(--ink) / 0.08). White on dark. */
  --ink: 255 255 255;
  --canvas-rgb: 7 10 15;
  --panel-rgb: 14 17 23;
  --info-tint: 32 48 96;
  --color-raised: #171c22;

  /* ── Backgrounds ── */
  --color-background: #070A0F;
  --color-panel: #0E1117;
  --color-sidebar: #080B10;
  --color-bg-glass: rgba(10, 13, 20, 0.88);
  --color-surface: rgb(var(--ink) / 0.04);
  --color-surface-hover: rgb(var(--ink) / 0.07);

  /* ── Type ── */
  --color-text-light: #F5F7FA;
  --color-text-medium: #8A94A6;
  --color-text-muted: #808A9C;          /* ≥ 4.5:1 on #212121 (was #4A5568, 2.4:1); still dimmer than medium */

  /* ── Borders ── */
  --color-border: rgb(var(--ink) / 0.08);
  --color-border-hover: rgb(var(--ink) / 0.16);
  --color-active: rgb(var(--ink) / 0.06);

  /* ── Accent — indigo ── */
  --color-accent: #6366f1;
  --color-accent-dim: #4f46e5;
  --color-accent-glow: rgba(99, 102, 241, 0.30);
  --color-accent-subtle: rgba(99, 102, 241, 0.10);

  /* ── Semantic ── */
  --color-success: rgba(22, 101, 52, 0.4);
  --color-success-text: #4ADE80;
  --color-danger: rgba(127, 29, 29, 0.4);
  --color-danger-text: #FC8181;
  --color-info: rgba(99, 102, 241, 0.15);
  --color-info-text: #818CF8;
  --color-primary: #ffffff;
  --color-warning-text: #FBBF24;

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgb(var(--ink) / 0.05);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.7);
  --shadow-btn: 0 4px 16px rgba(99, 102, 241, 0.35);
  --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);

  /* ── Motion ── */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.25s ease;
  --transition-slow: all 0.4s ease;

  /* ── Safe Area ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Global Reset and Typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html {
  scroll-behavior: smooth;
}



        /* home.html styles live in PAGE LAYERS (:where(.page-home)). Kept here: the
           keyframes that layer uses, and the global reduced-motion override. */
        @keyframes home-signal-pulse {
            0% { opacity: 0.8; transform: scale(0.55); }
            80%, 100% { opacity: 0; transform: scale(1.2); }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                transition-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }
        }
body {
  font-family: var(--pc-font-system, system-ui, -apple-system, sans-serif);
  background-color: var(--color-background);
  color: var(--color-text-light);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  /* Subtle noise grain for depth */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

/* Keyboard focus ring: one owner, FOUNDATION's :where(…):focus-visible (--pc-focus). */

::selection {
  background: rgba(85, 170, 255, 0.35);
  color: var(--color-text-light);
}

/* Slim, theme-matched scrollbars instead of the OS default */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 8px;
}

@media (hover: hover) and (pointer: fine) {
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-active);
}
}

.hidden {
  display: none !important;
}

.text-medium {
  color: var(--color-text-medium);
}

/* --- Header Styling --- */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  background-color: rgb(var(--canvas-rgb) / 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  box-shadow: 0 1px 0 rgb(var(--ink) / 0.04);
}

.header-left {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.logo {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--color-text-light) 0%, #6366f1 60%, #818CF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: opacity 0.2s;
}

@media (hover: hover) and (pointer: fine) {
.logo:hover {
  opacity: 0.85;
}
}

.header-right {
  display: flex;
  align-items: center;
}

.header-right i {
  cursor: pointer;
}

.user-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;                                                                    
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--color-border);
  transition: 0.2s;
}

.user-icon:active {
  transform: scale(0.95);
}

/* --- Dropdown Styles --- */
.user-dropdown {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 250px;
  background-color: var(--color-panel);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

.dropdown-header {
  padding: 15px;
  border-bottom: 1px solid var(--color-border);
}

.dropdown-header p {
  font-size: 0.9rem;
  color: var(--color-text-medium);
}

.dropdown-header strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li {
  padding: 12px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.15s;
  font-size: 0.95rem;
}

@media (hover: hover) and (pointer: fine) {
.dropdown-menu li:hover {
  background-color: var(--color-active);
}
}

.dropdown-menu li i {
  margin-right: 15px;
  width: 15px;
  color: var(--color-text-medium);
}

.dropdown-menu li.is-destructive {
  border-top: 1px solid var(--color-border);
  margin-top: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* --- Main Dashboard Layout --- */
.dashboard-container {
  display: flex;
  flex: 1;
  padding-top: 1px;
  position: relative;
  /* Removed overflow: hidden to allow sticky sidebar to work relative to body scroll */
}

/* --- Sidebar Navigation --- */
.sidebar {
  width: 220px;
  background-color: var(--color-sidebar);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 2px;
  transition: var(--transition-base);
  z-index: 40;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  overflow-y: auto;
}

.sidebar ul {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar li {
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  color: var(--color-text-medium);
  letter-spacing: 0.01em;
}

.sidebar li i {
  margin-right: 12px;
  width: 16px;
  font-size: 0.85rem;
}

@media (hover: hover) and (pointer: fine) {
.sidebar li:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text-light);
}
}

.sidebar li.active {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  border-left: 2px solid var(--color-accent);
  padding-left: 12px;
  font-weight: 600;
}

/* Collapsible sidebar (desktop / large windows; phones keep the tab bar).
   <html data-sidebar="expanded|collapsed"> is set by js/theme.js before
   first paint. Expanded: icon + label (220px). Collapsed: a 72px icon rail
   (Material 3 navigation rail) whose rows show the label as a tooltip. */
.sidebar-toggle { display: none; }
@media (min-width: 781px) {
  .sidebar {
    width: 220px;
    overflow-x: hidden;
    transition: width var(--dur-sheet) var(--ease-standard);
  }
  .sidebar-toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin: 0 0 8px 2px;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: none;
    color: var(--color-text-medium);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--dur-small) var(--ease-standard), color var(--dur-small) var(--ease-standard);
  }
  .sidebar-toggle:hover { background: var(--color-surface-hover); color: var(--color-text-light); }
  .sidebar-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .sidebar li { min-height: 44px; white-space: nowrap; }
  .sidebar li .nav-text { overflow: hidden; text-overflow: ellipsis; transition: opacity var(--dur-small) var(--ease-standard); }

  [data-sidebar="collapsed"] .sidebar { width: 72px; padding-inline: 12px; }
  [data-sidebar="collapsed"] .sidebar-toggle { margin-inline: auto; }
  [data-sidebar="collapsed"] .sidebar li {
    justify-content: center;
    padding-inline: 0;
    border-left: 0;
  }
  [data-sidebar="collapsed"] .sidebar li i { margin-right: 0; width: auto; font-size: 1rem; }
  [data-sidebar="collapsed"] .sidebar li .nav-text {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }
  [data-sidebar="collapsed"] .sidebar li.active { padding-left: 0; }
}
@media (min-width: 781px) and (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar li .nav-text { transition: none; }
}

/* --- Main Content --- */
.content-panel {
  flex: 1;
  padding: 40px 48px;
  background-color: var(--color-background);
  min-width: 0;
  padding-bottom: 96px;
  max-width: 1200px;
}

.content-panel h1 {
  margin-bottom: 8px;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.content-panel h1+p,
.content-panel h1+.text-medium {
  margin-bottom: 28px;
}

.content-panel h2 {
  margin: 32px 0 16px;
  font-size: 1.2rem;
  font-weight: 600;
}

.content-panel h3 {
  margin: 24px 0 12px;
  font-size: 1rem;
  font-weight: 600;
}

/* Cards */
.card {
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 16px;
  background-color: var(--color-panel);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s;
}

@media (hover: hover) and (pointer: fine) {
.card:hover {
  border-color: var(--color-border-hover);
}
}

/* --- Buttons --- */
.btn {
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  background: var(--color-surface);
  color: var(--color-text-medium);
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
.btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-hover);
  color: var(--color-text-light);
}
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--color-accent);
  color: #ffffff;
  border: none;
  box-shadow: var(--shadow-btn);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
.btn-primary:hover {
  background: var(--color-accent-dim);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.50);
  color: #fff;
  transform: translateY(-1px);
}
}

.btn-info {
  background: var(--color-info);
  color: var(--color-info-text);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-danger-text);
  border: 1px solid rgba(127, 29, 29, 0.3);
}

.btn-sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.8rem;
}

.btn-block {
  width: 100%;
}

.btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Forms */
.form-group {
  margin-bottom: 15px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.9rem;
  color: var(--color-text-medium);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  background: var(--color-sidebar);
  color: var(--color-text-light);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.form-group input:disabled {
  background-color: var(--color-active);
  color: var(--color-text-medium);
  cursor: not-allowed;
}

#transactionHistoryContainer,
#ticketListContainer,
#userListContainer,
#planListAdminContainer,
#voucherListContainer,
#hotspotClientList {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 0.9rem;
  white-space: nowrap;
}

.admin-table th {
  font-weight: 400;
  color: var(--color-text-medium);
  text-transform: uppercase;
  font-size: 0.8rem;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

/* Message/Ticket Specific Styles */
.ticket-status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-block;
}

.status-open {
  color: var(--color-info-text);
  background: rgb(var(--info-tint) / 0.5);
}

.status-closed {
  color: var(--color-success-text);
  background: rgba(32, 80, 32, 0.5);
}

.status-archived {
  color: var(--color-text-medium);
  background: rgba(51, 51, 51, 0.5);
}

/* Generic small badges (role badges, data tags, etc.) */
.tag {
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.tag-req,
.tag-danger {
  color: var(--color-danger-text);
  background: rgba(128, 48, 48, 0.5);
}

.tag-opt,
.tag-warn {
  color: var(--color-info-text);
  background: rgb(var(--info-tint) / 0.5);
}

.tag-auto,
.tag-success {
  color: var(--color-success-text);
  background: rgba(32, 80, 32, 0.5);
}

/* =================================== */
/* LAYOUT & MODALS */
/* =================================== */

/* --- Grid System --- */
.grid {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* --- Stat Card Styling --- */
.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.stat-icon {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 5px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--color-text-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Admin Stat Enhancements --- */
.admin-header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.time-filter-select {
  padding: 8px 12px;
  background: var(--color-panel);
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}

.stat-card.clickable {
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
.stat-card.clickable:hover {
  transform: translateY(-3px);
  border-color: var(--color-info-text);
  background-color: var(--color-panel);
}
}

.stat-card.clickable::after {
  content: 'View Details';
  position: absolute;
  bottom: 5px;
  font-size: 0.65rem;
  opacity: 0.7;
  color: var(--color-info-text);
}

.ai-analysis-btn {
  background: linear-gradient(135deg, #121620, #220505);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  transition: transform 0.2s var(--ease-standard, ease-out), background-color 0.2s, box-shadow 0.2s;
}

@media (hover: hover) and (pointer: fine) {
.ai-analysis-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.5);
}
}

/* Plan Card */
.plan-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 25px 0;
  background-color: var(--color-panel);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--color-border);
}

@media (hover: hover) and (pointer: fine) {
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
}

.plan-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.plan-image-container {
  width: 100%;
  height: 160px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-sidebar);
}

.plan-card h3,
.plan-card p,
.plan-card .price,
.plan-card ul {
  padding: 0 25px;
}

.plan-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-image-placeholder .fas {
  font-size: 50px;
  color: var(--color-border);
}

.plan-card h3 {
  margin: 15px 20px 5px;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
}

.plan-card p {
  padding: 0 20px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-medium);
  margin-bottom: 10px;
}

.plan-card .price {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 5px 0 15px;
  text-align: center;
  color: var(--color-text-light);
}

.plan-button-wrapper {
  padding: 20px;
  margin-top: auto;
  display: flex;
  justify-content: center;

}

.plan-card ul {
  list-style: none;
  padding: 0 20px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.plan-card li {
  font-size: 0.9rem;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  color: var(--color-text-light);
  gap: 8px;
}

.plan-card li i {
  color: var(--color-success-text);
  margin-right: 5px;
}

.plan-card .btn {
  width: auto;
  margin: 20px 25px 25px 25px !important;
  margin-top: auto !important;
  margin: 0 !important;
  align-self: stretch;
}

/* Admin Image Preview*/
.image-preview-container {
  width: 100%;
  height: 200px;
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-sidebar);
  position: relative;
  overflow: hidden;
}

.image-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.image-preview.visible {
  display: block;
}

.pagination-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15px;
  gap: 10px;
  border-top: 1px solid var(--color-border);
}

.pagination-controls button {
  background: var(--color-sidebar);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.pagination-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-info {
  font-size: 0.9rem;
  color: var(--color-text-medium);
  margin-right: 10px;
}

/* Admin Specific */
.admin-section {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-sidebar);
  margin-bottom: 20px;
}

.admin-section h3 {
  margin-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 5px;
}

/* Ticket Detail Styling */
.ticket-detail-field {
  background-color: var(--color-sidebar);
  padding: 15px;
  border-radius: 4px;
  margin-top: 5px;
  color: var(--color-text-light);
  white-space: pre-wrap;
}

/* Ticket Conversation Styling */
.ticket-message {
  margin-bottom: 15px;
  padding: 12px 15px;
  border-radius: 8px;
  max-width: 85%;
  position: relative;
  line-height: 1.5;
}

.ticket-message .meta {
  font-size: 0.75rem;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-message .body {
  font-size: 0.95rem;
  white-space: pre-wrap;
}

/* Original Message Style */
.original-message {
  background-color: var(--color-panel);
  border: 1px solid var(--color-border);
  width: 100%;
  max-width: 100%;
  margin-bottom: 25px;
  border-left: 3px solid var(--color-info-text);
}

/* My Replies (Right aligned) */
.reply-me {
  background-color: var(--color-info);
  color: white;
  margin-left: auto;
  /* Pushes to right */
  border-bottom-right-radius: 2px;
}

/* Others Replies (Left aligned) */
.reply-other {
  background-color: #333;
  color: #ddd;
  margin-right: auto;
  border-bottom-left-radius: 2px;
}

/* Admin/Support specific styling when viewing as User */
.reply-other.is-admin {
  background-color: #2a2a2a;
  border: 1px solid var(--color-success);
}

.badge-admin {
  background-color: var(--color-success);
  color: white;
  font-size: 0.6rem;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: bold;
}

/* Telegram-style date separator + message meta footer */
.chat-date-separator {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.chat-date-separator span {
  background: rgb(var(--ink) / 0.08);
  color: var(--color-text-medium);
  font-size: 0.7rem;
  padding: 3px 12px;
  border-radius: 12px;
}

.message-meta-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.message-time {
  font-size: 0.65rem;
  opacity: 0.65;
}

.message-status-icon {
  font-size: 0.7rem;
}

.status-delivered {
  color: rgba(255, 255, 255, 0.6);
}

.status-read {
  color: #4fc3f7;
}

/* Telegram-style chat/conversation list (Messages inbox) */
.chat-list {
  display: flex;
  flex-direction: column;
}

.chat-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

@media (hover: hover) and (pointer: fine) {
.chat-list-item:hover {
  background-color: var(--color-active);
}
}

.chat-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-border), #333);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}

.chat-list-body {
  flex: 1;
  min-width: 0;
}

.chat-list-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.chat-list-name {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-list-time {
  font-size: 0.7rem;
  color: var(--color-text-medium);
  flex-shrink: 0;
}

.chat-list-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.chat-list-snippet {
  font-size: 0.85rem;
  color: var(--color-text-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-info-text);
  flex-shrink: 0;
}

/* Input Area */
textarea.form-control {
  background: var(--color-background);
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 10px;
}

textarea.form-control:focus {
  outline: none;
  border-color: var(--color-info-text);
}

/* --- Modal Styles — glassmorphic --- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 3000;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.modal.active {
  display: flex;
  pointer-events: auto;
  opacity: 1;
}

.modal-content {
  background: rgb(var(--panel-rgb) / 0.96);
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-modal);
  transform: translateY(-24px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(24px);
}

.modal.active .modal-content {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal-close {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  color: var(--color-text-medium);
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
.modal-close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-light);
}
}

.modal-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/* --- Authentication Screen Styles --- */
#authScreen {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  /* Deep-space hero: radial accent glow + subtle grid */
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(99, 102, 241, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 110%, rgba(99, 102, 241, 0.10) 0%, transparent 60%),
    var(--color-background);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* subtle orbital ring behind the card */
#authScreen::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.08);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#authScreen::after {
  content: '';
  position: absolute;
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.04);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  width: 100%;
  background-color: transparent;
  position: relative;
  z-index: 1;
}

.auth-card {
  max-width: 420px;
  width: 100%;
  padding: 40px 36px;
  background: rgb(var(--panel-rgb) / 0.85);
  border: 1px solid rgb(var(--ink) / 0.09);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgb(var(--ink) / 0.04);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  text-align: center;
  animation: cardSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-header h2 {
  margin-bottom: 6px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-header p {
  color: var(--color-text-medium);
  margin-bottom: 24px;
  font-size: 0.9rem;
}

.btn-block {
  width: 100%;
  margin-top: 15px;
}

.auth-toggle {
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--color-text-medium);
}

.auth-toggle a {
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 500;
}

/* --- Auth Divider & Google Sign-In --- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--color-text-medium);
  font-size: 0.8rem;
}

.auth-divider hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--color-border);
}

.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.96);
  color: #111;
  border: 1px solid rgb(var(--ink) / 0.15);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) and (pointer: fine) {
.google-btn:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}
}

.google-btn:active {
  transform: scale(0.98);
}

/* --- Auth logo & icon-prefixed inputs (login.html) --- */
.auth-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  margin-bottom: 12px;
  object-fit: contain;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper i {
  position: absolute;
  left: 12px;
  color: var(--color-text-medium);
  pointer-events: none;
}

.input-wrapper input {
  padding-left: 38px;
}

/* (in-field action buttons — QR scan / show password — live in the
   design-refinements section at the bottom as .input-action) */

/* --- Toast Notification Styles --- */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s;
}

.toast.hidden {
  opacity: 0;
  transform: translateY(20px);
}

/* --- Spinner Styles --- */
.spinner {
  border: 4px solid rgb(var(--ink) / 0.1);
  border-left-color: var(--color-info-text);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ---Chart Styles --- */
/* Scrollable Charts Container */
.chart-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  max-width: 100%;
  display: block;
}

.chart-container {
  min-width: 600px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 250px;
  padding: 20px 10px 0;
  background: var(--color-sidebar);
  border-radius: 8px;
  margin-top: 0;
  border-top: none;
}

/* REVENUE CHART SPECIFIC */
#revenueChart {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 250px;
  min-width: 600px;
  border-top: none;
}

/* PLAN PERFORMANCE CHART SPECIFIC */
#popularityChart {
  display: block;
  overflow-y: auto;
  height: auto;
  min-height: 250px;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.chart-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
  margin: 0 2px;
  position: relative;
}

.grid-2 .card {
  min-width: 0;
  width: 100%;
}

.chart-bar {
  width: 70%;
  background: linear-gradient(to top, var(--color-info), var(--color-info-text));
  border-radius: 4px 4px 0 0;
  transition: height 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  min-height: 2px;
}

.chart-bar.is-peak {
  background: linear-gradient(to top, #b8860b, #ffd700);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.chart-bar.is-low {
  background: linear-gradient(to top, #502020, #ff6666);
  opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
.chart-bar-wrapper:hover .chart-bar::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  margin-bottom: 5px;
}
}

@media (hover: hover) and (pointer: fine) {
.chart-bar:hover {
  filter: brightness(1.2);
}
}

.chart-bar .value {
  position: absolute;
  top: -20px;
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--color-text-light);
}

.chart-label {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--color-text-medium);
  text-align: center;
}

/* --- Progress Bar Styles --- */
.progress-track {
  width: 100%;
  height: 12px;
  background-color: var(--color-active);
  border-radius: 6px;
  overflow: hidden;
  margin: 10px 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-fill {
  height: 100%;
  background-color: var(--color-success);
  width: 0%;
  transition: width 1s linear, background-color 0.3s ease;
  box-shadow: 0 0 10px rgba(102, 204, 102, 0.4);
}

/* Pulse animation for active status */
@keyframes statusPulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

.status-active-indicator {
  animation: statusPulse 2s infinite;
}

/* --- Advanced Admin Plans Progress --- */
.plan-stat-row {
  width: 100%;
  margin-bottom: 5px;
  padding: 12px;
  background: rgb(var(--ink) / 0.03);
  border-radius: 6px;
  box-sizing: border-box;
}

.plan-stat-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 5px;
}

.multi-progress-track {
  display: flex;
  height: 16px;
  background: var(--color-active);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 5px;
}

.prog-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #000;
  font-weight: bold;
  transition: width 0.5s ease;
}

.prog-active {
  background-color: var(--color-success-text);
  color: #000;
}

.prog-expired {
  background-color: var(--color-danger-text);
  color: #000;
}

.prog-total {
  background-color: var(--color-info-text);
}


/* --- Emoji Picker & Mobile Chat Fixes --- */
.emoji-picker-container {
  position: absolute;
  bottom: 60px;
  /* Above input */
  left: 10px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px;
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
  z-index: 5000;
  width: 280px;
}

.emoji-picker-container.active {
  display: grid;
}

.emoji-btn-select {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
.emoji-btn-select:hover {
  background-color: var(--color-active);
}
}

.emoji-trigger-btn {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 10px;
  color: var(--color-text-medium);
}

/* Chat Box Mobile Fixes */
#chatBoxModal .modal-content {
  display: flex;
  flex-direction: column;
  height: 80vh;
  /* Desktop default */
  max-height: 800px;
  overflow: hidden;
  /* Prevent double scrollbars */
}

.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* Crucial for nested flex scroll */
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: var(--color-sidebar);
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.chat-input-area {
  display: flex;
  gap: 10px;
  padding: 15px;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-panel);
  flex-shrink: 0;
}

.chat-input-area input {
  flex: 1;
}

.chat-message {
  max-width: 85%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 5px;
  animation: popIn 0.2s ease;
}

.chat-message.user {
  align-self: flex-end;
  justify-content: flex-end;
}

.chat-message.bot {
  align-self: flex-start;
}

.bubble {
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.5;
  font-size: 0.95rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  word-wrap: break-word;
}

.bubble.bot {
  background: #000;
  color: white;
  border-bottom-left-radius: 6px;
}

.bubble.user {
  background: var(--color-info);
  display: flex;
  color: white;
  border-bottom-right-radius: 6px;
}

.bot-avatar {
  width: 30px;
  height: 30px;
  background-color: var(--color-info);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Chat input action button (mic / send toggle) — status.html chat modal.
   No 44x44 tap target existed, making the control invisible/untappable. */
.chat-action-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s, color 0.15s;
}

.chat-action-btn.mode-mic {
  background: var(--color-active);
  color: var(--color-text-medium);
}

@media (hover: hover) and (pointer: fine) {
.chat-action-btn.mode-mic:hover {
  color: var(--color-text-light);
}
}

.chat-action-btn.mode-send {
  background: var(--color-info-text);
  color: #fff;
}

.chat-action-btn:active {
  transform: scale(0.92);
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Mobile specific adjustments --- */
@media (max-width: 780px) {
  .main-header {
    padding: 10px 15px;
  }

  .dashboard-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-top: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    flex-direction: row;
    padding: 0;
    background: rgb(var(--panel-rgb) / 0.95);
    backdrop-filter: blur(10px);
    z-index: 2000;

    /* Reset desktop sticky props for mobile */
    top: auto;
    height: 65px;
    overflow-y: visible;
  }

  .sidebar ul {
    display: flex;
    position: sticky;
    padding: 0;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin: 0;
  }

  .sidebar ul::-webkit-scrollbar { display: none; }

  .sidebar li {
    padding: 0 2px;
    font-size: 0.7rem;
    border-left: none !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    line-height: 1.2;
    gap: 4px;
    margin: 0;
    background: none !important;
    box-shadow: none !important;
    color: var(--color-text-medium);
    border-radius: 0;
    flex: 0 0 max(48px, calc(100vw / 6));
    scroll-snap-align: start;
    justify-content: center;
    height: 100%;
  }

  .sidebar li i {
    margin: 0;
    font-size: 1.2rem;
    width: auto;
  }

  /* Keep a six-item viewport so role-specific tabs remain reachable by swiping. */
  .sidebar .nav-text {
    display: block;
    font-size: 10px;
    font-weight: 500;
    margin-top: 2px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar li.active {
    border-bottom: 3px solid var(--color-text-light);
    background-color: transparent;
    padding-bottom: 5px;
  }

  .card {
    padding: 15px;
  }

  .content-panel {
    padding: 20px;
    padding-bottom: calc(80px + var(--safe-bottom));
  }

  /* minmax(0, …): columns may shrink below a button's no-wrap text. With plain 1fr,
     "Disconnect WiFi" (168px) pushed status.html to 376px on a 360px phone, and the
     fixed bottom nav (width: 100%) stretched with it. */
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-4 > .btn {
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* CHART FIX ON MOBILE */
  .chart-container {
    min-width: 500px;
  }

  #revenueChart {
    min-width: 500px;
  }

  /* --- MOBILE CHAT FULLSCREEN --- */
  #chatBoxModal {
    padding: 0;
    align-items: flex-end;
  }

  #chatBoxModal .modal-content {
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    border: none;
    transform: none;
    padding: 0;
    background-color: var(--color-background);
  }

  #chatBoxModal .modal-header {
    padding: calc(15px + var(--safe-top)) 15px 15px 15px;
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
  }

  #chatBoxModal .chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: 0;
    border: none;
  }

  #chatBoxModal .chat-log {
    border-radius: 0;
    flex: 1 1 auto;
    padding: 15px;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
  }

  #chatBoxModal .chat-input-area {
    flex: 0 0 auto;
    width: 100%;
    background-color: var(--color-panel);
    padding: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    position: relative;
    z-index: 20;
  }

  /* Smaller Bubbles for Mobile */
  .bubble {
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 18px;
  }

  .chat-message {
    margin: 10px 0;
  }

  .bot-avatar,
  .user-avatar {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   DESIGN REFINEMENTS — mobile-app-ui-design skill
   Applied 2026-07-08: tap targets, tabular numerals, 8-pt spacing, soft
   tinted shadows, accessible focus. Scoped overrides, later = wins.
   ========================================================================== */

/* 1. Tap targets — every interactive control ≥44×44pt (skill: "all tap
   targets at least 44×44pt"). */
.btn {
  min-height: 44px;
}

.btn-sm {
  min-height: 40px;
}

input,
select,
textarea {
  min-height: 44px;
}

/* min-height 48px only on desktop sidebar; mobile tab bar handles height via the fixed 65px container */
@media (min-width: 781px) {
  .sidebar li {
    min-height: 48px;
  }
}

/* 2. Numbers use tabular figures so digits align and don't jitter as values
   change (skill: "monospace variants for large numbers — prices, stats"). */
.stat-value,
.plan-card .price,
#dropdownFullname,
[id*="alance"],
[id*="redit"],
[id*="rice"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* 3. 8-point grid — replace off-grid 20/5px rhythm on stat cards (skill:
   "all spacing divisible by 8 or 4"). */
.stat-card {
  padding: 24px 16px;
  gap: 4px;
}

.stat-icon {
  margin-bottom: 8px;
}

.stat-value {
  margin-bottom: 4px;
  line-height: 1.1;
}

/* 4. Soft, tinted shadows for depth without heaviness (skill: "always use
   soft shadows — never harsh; match shadow color to the background"). */
.card,
.stat-card,
.plan-card,
.auth-card {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.btn-primary {
  box-shadow: 0 2px 12px rgb(var(--ink) / 0.08),
    inset 0 1px 0 rgb(var(--ink) / 0.25);
}

/* 5. Keyboard focus: see FOUNDATION (:where(…):focus-visible, --pc-focus). */

/* 6. Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 7. Dashboard hierarchy — Balance is the hero (clear "notice first"), Plans &
   Devices are a compact 2-up row (skill: create rhythm, emphasize values). */
.stat-hero {
  text-align: center;
  padding: 28px 24px;
  margin-bottom: 16px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(85, 170, 255, 0.10), transparent 60%),
    var(--color-panel);
  border: 1px solid var(--color-border);
}

.stat-hero-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-medium);
  margin-bottom: 8px;
}

.stat-hero-value {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

.dash-stats-2 {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Keep the two secondary stats side-by-side on mobile (don't stack). */
@media (max-width: 780px) {
  .dash-stats-2 {
    grid-template-columns: 1fr 1fr;
  }

  .stat-hero-value {
    font-size: 2.5rem;
  }
}

/* 8. Peak moment — celebratory success overlay (skill: Peak-End rule; success
   states should feel rewarding, not just a toast). Used for voucher redeem,
   credits received, plan activation. */
.celebrate-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(6px);
  animation: celebrate-fade 0.25s ease;
}

@keyframes celebrate-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.celebrate-check {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  color: #fff;
  margin-bottom: 8px;
  background: var(--color-success, #205020);
  box-shadow: 0 0 0 0 rgba(102, 204, 102, 0.6);
  animation: celebrate-pop 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28), celebrate-glow 1.6s ease-out 0.2s;
}

@keyframes celebrate-pop {
  0% {
    transform: scale(0);
  }

  70% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes celebrate-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 204, 102, 0.55);
  }

  100% {
    box-shadow: 0 0 0 28px rgba(102, 204, 102, 0);
  }
}

.celebrate-title {
  font-size: 1.5rem;
  font-weight: 800;
}

.celebrate-sub {
  color: var(--color-text-medium);
  font-size: 0.95rem;
  max-width: 300px;
}

.celebrate-amount {
  font-size: 2.25rem;
  font-weight: 800;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
  color: var(--color-success-text, #66cc66);
}

.celebrate-spark {
  position: absolute;
  font-size: 1.4rem;
  animation: celebrate-rise 1.1s ease-out forwards;
  opacity: 0;
}

@keyframes celebrate-rise {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.6);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-90px) scale(1.1);
  }
}

/* 9. Login screen (login.html) — captive-portal sign-in, mobile-first.
   8-pt spacing, 16px card radius, soft brand glow behind the logo, 48px
   inputs (16px font stops iOS auto-zoom), and explicit loading / error /
   one-tap-prefilled states. */
#authScreen {
  min-height: 100dvh;
  height: auto;
  padding: 24px 16px;
  padding-bottom: max(24px, var(--safe-bottom));
}

.auth-card {
  border-radius: 16px;
  padding: 32px 24px;
  border: 1px solid rgb(var(--ink) / 0.08);
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(var(--ink) / 0.05), transparent 55%),
    var(--color-panel);
}

.auth-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-bottom: 16px;
  /* soft glow tinted to the page's dark-red vignette, not gray */
  box-shadow: 0 0 48px rgba(255, 90, 70, 0.28);
}

.auth-header h1,
.auth-header h2 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.auth-header p {
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.auth-card .form-group {
  margin-bottom: 16px;
}

.auth-card .form-group label {
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.auth-card .input-wrapper input {
  min-height: 48px;
  border-radius: 12px;
  font-size: 1rem;
  padding-left: 40px;
}

.auth-card .input-wrapper input.has-action {
  padding-right: 52px;
}

/* Trailing in-field action (QR scan, show/hide password) — full 44pt target */
.input-action {
  position: absolute;
  right: 4px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--color-text-medium);
  font-size: 1rem;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
.input-action:hover {
  color: var(--color-text-light);
}
}

.auth-card .btn-block {
  margin-top: 24px;
  border-radius: 12px;
}

.auth-divider {
  margin: 24px 0 16px;
}

.google-btn {
  min-height: 48px;
  border-radius: 12px;
}

.auth-toggle {
  margin-top: 24px;
  padding: 8px 0;
}

#qr-reader {
  margin: 0 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

/* Inline error state (kept separate from the transient toast) */
#error-message:not(:empty) {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--color-danger);
  background: rgba(128, 48, 48, 0.22);
  color: var(--color-danger-text);
  font-size: 0.9rem;
  text-align: left;
}

/* Submitting: spinner inside the CTA (.btn is inline-flex with gap) */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

.btn.is-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Credentials arrived via a one-tap link — pulse the CTA so the single
   remaining action is unmissable */
.auth-card.is-prefilled #login-submit-btn {
  animation: cta-pulse 1.5s ease-out 3;
}

@keyframes cta-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
  }

  100% {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
  }
}

/* ==========================================================================
   SHOP — branded merch (dark, bold, image-forward)
   ========================================================================== */
.shop-hero {
  margin-bottom: 24px;
}

.shop-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-info-text);
  font-weight: 700;
}

.shop-title {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 6px;
}

@media (max-width: 480px) {
  .shop-title {
    font-size: 1.75rem;
  }
}

.shop-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.shop-search {
  position: relative;
}

.shop-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-medium);
}

.shop-search input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border-radius: 10px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 0.95rem;
}

.shop-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* On phones wrap the chips instead of hiding "My Orders" off-screen */
@media (max-width: 780px) {
  .shop-filters {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  color: var(--color-text-medium);
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 40px;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.chip.active {
  background: var(--color-text-light);
  color: var(--color-background);
  border-color: var(--color-text-light);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

@media (max-width: 780px) {
  .shop-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

.shop-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, border-color 0.15s;
}

@media (hover: hover) and (pointer: fine) {
.shop-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-text-medium);
}
}

.shop-card.out {
  opacity: 0.6;
}

.shop-card-img {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(85, 170, 255, 0.10), #0d0d0d 70%);
}

.shop-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-card-emoji {
  font-size: 3.5rem;
}

.shop-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.shop-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.shop-card-cat {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--color-text-medium);
  font-weight: 700;
}

.shop-card-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.shop-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.shop-card-price {
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.shop-size {
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--color-sidebar);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 0.8rem;
  min-height: 36px;
}

/* Narrow 2-up cards can't fit price + size side by side — stack them */
@media (max-width: 600px) {
  .shop-card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .shop-size {
    width: 100%;
  }
}

.shop-add {
  margin-top: 6px;
}

.shop-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-medium);
}

.shop-empty i {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
  opacity: 0.5;
}

/* Floating cart button */
.cart-fab {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 1500;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--color-text-light);
  color: var(--color-background);
  font-size: 1.25rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Cart rows */
.cart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--color-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  overflow: hidden;
  flex: 0 0 auto;
}

.cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-row-info {
  flex: 1;
  min-width: 0;
}

.cart-row-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.cart-row-price {
  color: var(--color-text-medium);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.cart-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-qty button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-sidebar);
  color: var(--color-text-light);
  cursor: pointer;
  font-size: 1rem;
}

.cart-qty span {
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cart-remove {
  background: none;
  border: none;
  color: var(--color-text-medium);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px;
}

.cart-summary {
  margin-top: 14px;
}

.cart-line {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-variant-numeric: tabular-nums;
}

.cart-total {
  border-top: 1px solid var(--color-border);
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 800;
  font-size: 1.1rem;
}

/* Checkout */
.checkout-heading {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-medium);
  margin: 18px 0 10px;
}

.checkout-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-size: 0.9rem;
  cursor: pointer;
}

.checkout-toggle input {
  width: auto;
  min-height: auto;
}

.pay-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pay-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
}

.pay-option input {
  width: auto;
  min-height: auto;
}

.pay-option input:checked~span {
  color: var(--color-text-light);
}

/* Order cards */
.order-card {
  padding: 16px;
}

.order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: capitalize;
}

.status-paid {
  background: rgba(32, 80, 32, 0.5);
  color: var(--color-success-text);
}

.status-pending-payment {
  background: rgba(128, 96, 32, 0.4);
  color: #ffcc66;
}

.status-shipped,
.status-delivered {
  background: rgb(var(--info-tint) / 0.5);
  color: var(--color-info-text);
}

.order-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

/* ── Navbar cart button ── */
.nav-cart {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  cursor: pointer;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.15s, background 0.15s;
}

@media (hover: hover) and (pointer: fine) {
.nav-cart:hover {
  background: var(--color-active);
}
}

.nav-cart:active {
  transform: scale(0.92);
}

.nav-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ── Cart slide-in drawer ── */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}

.cart-drawer.active {
  opacity: 1;
  visibility: visible;
}

.cart-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 90vw);
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  padding: 20px;
  padding-top: max(20px, var(--safe-top));
}

.cart-drawer.active .cart-drawer-panel {
  transform: translateX(0);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 8px 0;
}

.cart-drawer-foot {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer-panel {
    transition: none;
  }
}

/* (The old .skel-* / .ui-skeleton-* loaders were unused; skeletons live in FOUNDATION "Skeleton screens".) */

/* ==========================================================================
   SHOP — fusertech-inspired e-commerce accents (blue primary, red prices)
   Scoped to the shop so the rest of the Power Connect app stays on-brand.
   ========================================================================== */
#shop-section {
  --fu-blue: #1f4fd6;
  /* royal blue primary */
  --fu-blue-deep: #002e9a;
  --fu-red: #fe1717;
  /* price / sale red */
}

/* Prices in red, like fusertech */
#shop-section .shop-card-price {
  color: var(--fu-red);
}

#shop-section .shop-was {
  color: var(--color-text-medium);
  text-decoration: line-through;
  font-size: 0.9rem;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}

/* Active category chip → blue */
#shop-section .chip.active {
  background: var(--fu-blue);
  border-color: var(--fu-blue);
  color: #fff;
}

/* Search: blue round button on the right, fusertech style */
.shop-search {
  display: flex;
  align-items: center;
}

.shop-search input {
  border-radius: 999px;
  padding-right: 52px;
}

.shop-search .shop-search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--fu-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-search i.fa-search {
  display: none;
}

/* replaced by the button icon */
/* SALE badge (blue circle, red text accent) */
.shop-sale-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--fu-red);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(254, 23, 23, 0.4);
}

/* Add-to-cart uses the blue primary in the shop */
#shop-section .shop-add.btn-primary {
  background: var(--fu-blue);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
#shop-section .shop-add.btn-primary:hover {
  background: var(--fu-blue-deep);
  opacity: 1;
}
}

/* 11. Settings — payment methods card + responsive two-column layout
   (mobile-app-ui-design skill, 2026-07-09) */
.pay-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  /* presets drop below the label on phones */
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
}

.pay-method:first-of-type {
  border-top: none;
}

.pay-method-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 180px;
  text-align: left;
}

.pay-method-head p {
  font-size: 0.8rem;
  margin-top: 2px;
}

.pay-method-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border-radius: 10px;
  background: var(--color-sidebar);
  border: 1px solid var(--color-border);
}

.topup-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.topup-presets .btn {
  padding: 0.5rem 0.9rem;
}

/* Settings: one centred column of grouped, collapsible rows (the layout
   phone settings apps use), at every width. Rules: MARKUP COMPONENTS →
   "Settings groups". */

/* ==========================================================================
   STARLINK PREMIUM POLISH — micro-interactions, form refinements, avatar
   ========================================================================== */

/* Upgraded user avatar */
.user-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #818CF8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1.5px solid rgba(99, 102, 241, 0.4);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
  transition: var(--transition-fast);
  letter-spacing: 0;
  overflow: hidden;
  position: relative;
}

.user-icon img,
.user-icon .user-avatar-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
.user-icon:hover {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
  transform: scale(1.05);
}
}

.user-icon:active {
  transform: scale(0.96);
}

/* Refined dropdown */
.user-dropdown {
  position: absolute;
  top: 56px;
  right: 16px;
  width: 260px;
  background: rgb(var(--panel-rgb) / 0.96);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgb(var(--ink) / 0.04);
  backdrop-filter: blur(24px);
  z-index: 1000;
  display: none;
  overflow: hidden;
  animation: dropdownSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.user-dropdown.active,
.user-dropdown.open {
  display: block;
}

@keyframes dropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

.dropdown-header p {
  font-size: 0.82rem;
  color: var(--color-text-medium);
}

.dropdown-header strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  font-size: 0.95rem;
}

.dropdown-menu ul {
  list-style: none;
  padding: 6px;
}

.dropdown-menu li {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 10px;
  transition: var(--transition-fast);
  font-size: 0.875rem;
  color: var(--color-text-medium);
}

@media (hover: hover) and (pointer: fine) {
.dropdown-menu li:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-light);
}
}

.dropdown-menu li i {
  margin-right: 12px;
  width: 15px;
}

.dropdown-menu li.is-destructive {
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 10px 10px;
  color: var(--color-danger-text);
}

@media (hover: hover) and (pointer: fine) {
.dropdown-menu li.is-destructive:hover {
  background: var(--color-danger);
}
}

/* Premium form inputs */
.form-group label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: rgb(var(--ink) / 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  transition: var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
  background: rgba(99, 102, 241, 0.05);
}

.form-group input::placeholder {
  color: var(--color-text-muted);
}

/* Refined stat cards */
.stat-card {
  background: var(--color-panel);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
.stat-card:hover {
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.12);
  transform: translateY(-2px);
}
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--color-text-light), var(--color-info-text));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Refined toast */
.toast {
  border-radius: var(--radius-pill) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgb(var(--ink) / 0.1);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Toast semantic colour variants */
.toast.toast-success { border-left: 3px solid #22c55e !important; }
.toast.toast-error   { border-left: 3px solid #ef4444 !important; }
.toast.toast-warn    { border-left: 3px solid #f59e0b !important; }
.toast.toast-info    { border-left: 3px solid #38bdf8 !important; }

@media (hover: hover) and (pointer: fine) {
/* Plan card hover: accent-glow border */
.plan-card:hover {
  border-color: rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15) !important;
}
}

/* Refined progress bar */
/* Plan time left: neutral ink while there is plenty; colour only means something
   (warn/low below). The old `!important` indigo gradient hid the level colours. */
#planProgressBar {
  transition: width 1s linear;   /* redrawn every second: steady drain */
  background: var(--color-text-light);
  border-radius: var(--radius-pill);
}

/* Dashboard: hero welcome strip above home cards */
#home-section>h1 {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--color-text-light) 0%, var(--color-info-text) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Admin table — tighter, crisper */
.admin-table th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}

@media (hover: hover) and (pointer: fine) {
.admin-table tr:hover td {
  background: var(--color-surface);
}
}

/* Chip filters in shop */
.chip {
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  transition: var(--transition-fast) !important;
}

.chip.active {
  background: var(--color-accent-subtle) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}
@media (hover: hover) and (pointer: fine) {
.chip:hover {
  background: var(--color-accent-subtle) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}
}

/* Scrollbar — thinner, minimal */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--ink) / 0.1) transparent;
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-thumb {
  background: rgb(var(--ink) / 0.1);
  border-radius: var(--radius-pill);
}

@media (hover: hover) and (pointer: fine) {
*::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--ink) / 0.2);
}
}

/* Focus ring: FOUNDATION owns it. An `!important` ring here used to override
   every component ring (and its light-theme colour) in the file. */

/* Selection highlight */
::selection {
  background: rgba(99, 102, 241, 0.35);
  color: #fff;
}

/* Mobile responsive content panel
   (note: .sidebar is the fixed bottom tab bar on mobile, set in the
   @media (max-width: 780px) block above — don't redeclare its position/width
   here, a stale left:-100% slide-in drawer variant previously hid the nav
   entirely since nothing ever toggled .sidebar.open) */
@media (max-width: 780px) {
  .main-header {
    padding: 0 16px;
    position: sticky;
    top: 0;
  }
}

@media (max-width: 600px) {
  .content-panel {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   PAYMENT METHOD — stacked-field card + billing-address sheet: full-width
   bordered fields with labels above, 2-up expiry/CVC row, Cancel/Save footer. Also used for the in-app
   pay-with-saved-card top-up flow, replacing the old prompt()+redirect.
   ========================================================================== */
.pay-field {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-sidebar);
  color: var(--color-text-light);
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pay-field:focus,
.pay-field:focus-within {
  outline: none;
  border-color: var(--color-info-text);
  box-shadow: 0 0 0 3px rgba(85, 170, 255, 0.15);
}

.pay-field::placeholder {
  color: var(--color-text-medium);
}

.pay-field-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}

.pay-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Stripe Elements mount inside a .pay-field div (not an <input>) */
.pay-field.StripeElement {
  display: flex;
  align-items: center;
}

.pay-field.StripeElement--focus {
  border-color: var(--color-info-text);
  box-shadow: 0 0 0 3px rgba(85, 170, 255, 0.15);
}

.pay-field.StripeElement--invalid {
  border-color: var(--color-danger-text);
}

/* Card sheet: grouped sections with real labels (autofill and screen
   readers both key off them), inline errors, a press response on buttons. */
.pay-form { display: grid; gap: 20px; }
.pay-section { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pay-section-title {
  padding: 0;
  margin-bottom: 4px;
  color: var(--color-text-light);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pay-label {
  display: block;
  margin-top: 4px;
  color: var(--color-text-medium);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.pay-optional { font-weight: 400; opacity: 0.75; }
.pay-form .pay-field-row > div { display: grid; gap: 8px; min-width: 0; }
.pay-field.pay-stripe { padding-block: 15px; cursor: text; }
.pay-field.StripeElement--complete { border-color: rgba(52, 199, 89, 0.55); }
/* The browser's own autofill tint on the plain inputs, kept readable */
.pay-form input.pay-field:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text-light);
  box-shadow: 0 0 0 1000px var(--color-sidebar) inset;
  caret-color: var(--color-text-light);
}
.pay-form select.pay-field {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23aeb8c6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.pay-error {
  margin: 2px 0 0;
  color: var(--color-danger-text, #ff6b6b);
  font-size: 0.875rem;
  font-weight: 500;
}
.pay-error[hidden] { display: none; }
.pay-secure-note {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 4px 0 0;
  color: var(--color-text-medium);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.pay-form .pay-footer .btn { min-height: 48px; transition: transform 100ms ease-out; }
.pay-form .pay-footer .btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .pay-form .pay-footer .btn:active { transform: none; }
}

.pay-field select.pay-field {
  padding-right: 8px;
}

.pay-country-field {
  display: grid;
  gap: 6px;
}

.pay-country-label {
  color: var(--color-text-light);
  font-size: 0.9rem;
  font-weight: 600;
}

.pay-country-field select.pay-field {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23aeb8c6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.pay-country-hint {
  color: var(--color-text-medium);
  font-size: 0.8rem;
}

.phone-input-container,
.payment-phone-input {
  display: grid;
  grid-template-columns: minmax(108px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.phone-input-container .select-box,
.payment-phone-input .select-box {
  position: relative;
  min-width: 108px;
}

/* Sign-in starts in identifier mode with the country picker hidden: the field
   takes the whole row instead of leaving the picker's column empty. */
.phone-input-container > .select-box[hidden] ~ *,
.payment-phone-input > .select-box[hidden] ~ * {
  grid-column: 1 / -1;
}

.phone-input-container .selected-option,
.payment-phone-input .selected-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-sidebar);
  color: var(--color-text-light);
  cursor: pointer;
}

.phone-input-container .selected-option > div,
.phone-input-container .options .option > div,
.payment-phone-input .selected-option > div,
.payment-phone-input .options .option > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-input-container .flags,
.payment-phone-input .flags {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
}

.phone-input-container .options,
.payment-phone-input .options {
  display: none;
  position: absolute;
  z-index: 1000;
  top: calc(100% + 6px);
  left: 0;
  width: min(300px, 82vw);
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.phone-input-container .options.active,
.payment-phone-input .options.active {
  display: block;
}

.phone-input-container .search-box,
.payment-phone-input .search-box {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-sidebar);
  color: var(--color-text-light);
}

.phone-input-container .options ol,
.payment-phone-input .options ol {
  max-height: 240px;
  margin: 8px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.phone-input-container .option,
.payment-phone-input .option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  color: var(--color-text-light);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
.phone-input-container .option:hover,
.payment-phone-input .option:hover {
  background: var(--color-sidebar);
}
}

.phone-input-container .option.hide,
.payment-phone-input .option.hide {
  display: none;
}

.phone-input-container > input,
.payment-phone-input > input {
  min-width: 0;
  min-height: 52px;
  border-radius: 12px;
}

@media (max-width: 380px) {
  .phone-input-container,
  .payment-phone-input {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 6px;
  }

  .phone-input-container .select-box,
  .payment-phone-input .select-box {
    min-width: 104px;
  }
}

.pay-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 20px 0 16px;
}

.pay-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pay-footer .btn-primary {
  flex: 1;
  max-width: 220px;
}

/* Saved card-on-file summary row (Settings) */
.card-on-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-sidebar);
}

.card-on-file i {
  font-size: 1.4rem;
  color: var(--color-text-light);
  flex-shrink: 0;
}

.card-on-file span {
  font-size: 0.9rem;
}

.card-on-file .btn {
  margin-left: auto;
}

/* Edit payment method (index.html #editPaymentModal, payments.js openEdit) */
.pay-edit-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-sidebar);
}
.pay-edit-brand { grid-row: span 2; font-size: 1.9rem; color: var(--color-text-light); }
.pay-edit-number { font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.pay-edit-exp { grid-column: 2; color: var(--color-text-medium); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.pay-edit-card .pay-edit-flag { grid-column: 3; grid-row: 1 / span 2; }
.pay-edit-flag {
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.pay-edit-flag.is-expiring { background: rgb(var(--ink) / 0.08); color: var(--color-warning-text, var(--color-text-light)); }
.pay-edit-flag.is-expired { background: rgb(var(--ink) / 0.08); color: var(--color-danger-text); }
.pay-edit-flag.hidden { display: none; }
.pay-edit-more {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.pay-edit-remove { color: var(--color-danger-text); }
.pay-edit-remove.hidden,
.pay-edit-confirm.hidden { display: none; }
.pay-edit-confirm {
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.pay-edit-confirm p { margin: 0 0 4px; line-height: 1.45; }
@media (max-width: 400px) {
  .pay-edit-card { grid-template-columns: auto 1fr; }
  .pay-edit-card .pay-edit-flag { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}

/* Amount picker (top-up) — reuses .chip look for visual consistency with the shop filters */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.amount-chip {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  padding: 14px 8px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  background: var(--color-sidebar);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.amount-chip.active {
  border-color: var(--color-info-text);
  background: rgba(85, 170, 255, 0.12);
  color: var(--color-info-text);
}

.top-up-card-hint {
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.top-up-card-hint a {
  color: var(--color-info-text);
  text-decoration: underline;
  cursor: pointer;
}

.top-up-card-hint i {
  margin-right: 6px;
}

/* Full-screen sheet on mobile — same technique already used for #chatBoxModal */
@media (max-width: 780px) {

  #paymentMethodModal,
  #topUpModal {
    padding: 0;
    align-items: flex-end;
  }

  #paymentMethodModal .modal-content,
  #topUpModal .modal-content {
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: none;
    transform: none;
    display: flex;
    flex-direction: column;
    padding: max(20px, var(--safe-top)) 20px max(20px, var(--safe-bottom));
  }

  #paymentMethodModal .modal-body-scroll,
  #topUpModal .modal-body-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ── Edge-to-Edge and Foldable Adaptive Layouts (Android 15, 16, 17) ── */
/* NOTE: body-level safe-area padding is intentionally omitted here.
   The header and the fixed bottom tab bar each apply their own
   env(safe-area-inset-*) padding, so adding it to <body> too would
   create double-insets on Android 16 edge-to-edge. */

/* Foldables (unfolded inner screen sw600dp+) & Tablets — only above the
   mobile breakpoint so the bottom tab-bar is never overridden. */
@media screen and (min-width: 781px) {
  :root {
    --foldable-gutter: 24px;
  }

  .app-container,
  .main-layout {
    display: flex;
    flex-direction: row;
    gap: var(--foldable-gutter);
  }

  .sidebar {
    width: 260px;
    flex-shrink: 0;
  }

  .content-panel {
    flex: 1;
    min-width: 0;
  }
}

/* Large Foldables & Landscape Tablets (sw840dp+) */
@media screen and (min-width: 840px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Book posture: keep the navigation and content inside separate panes. */
@media (horizontal-viewport-segments: 2) {
  #mainHeader:not([style*="display: none"]) {
    display: grid !important;
    grid-template-columns:
      calc(env(viewport-segment-width 0 0) - max(20px, var(--safe-left)))
      calc(env(viewport-segment-width 1 0) - max(20px, var(--safe-right)));
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
  }

  .header-left {
    min-width: 0;
    grid-column: 1;
  }

  .header-right {
    min-width: 0;
    grid-column: 2;
    justify-content: flex-end;
  }

  #mainApp:not([style*="display: none"]) {
    display: grid !important;
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
  }

  #mainApp .sidebar {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    height: calc(100vh - 64px - var(--safe-top));
    height: calc(100dvh - 64px - var(--safe-top));
    position: sticky;
    top: calc(64px + var(--safe-top));
    bottom: auto;
    flex-direction: column;
  }

  #mainApp .content-panel {
    grid-column: 2;
    min-width: 0;
    width: 100%;
  }

  @media (max-width: 780px) {
    #mainHeader:not([style*="display: none"]) {
      grid-template-columns:
        calc(env(viewport-segment-width 0 0) - max(15px, var(--safe-left)))
        calc(env(viewport-segment-width 1 0) - max(15px, var(--safe-right)));
    }

    #mainApp .sidebar {
      height: calc(100vh - 56px - var(--safe-top));
      height: calc(100dvh - 56px - var(--safe-top));
      top: calc(56px + var(--safe-top));
      padding: 16px 12px;
    }
  }
}

/* Tabletop posture: scroll the app in the upper pane and keep navigation
   in the lower pane, leaving the hinge area clear. */
@media (vertical-viewport-segments: 2) {
  #mainApp:not([style*="display: none"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      calc(env(viewport-segment-height 0 0) - 64px - var(--safe-top))
      env(viewport-segment-height 0 1);
    row-gap: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
    height: calc(100vh - 64px - var(--safe-top));
    height: calc(100dvh - 64px - var(--safe-top));
  }

  #mainApp .content-panel {
    grid-row: 1;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    padding-bottom: max(24px, var(--safe-bottom));
  }

  #mainApp .sidebar {
    grid-row: 2;
    align-self: end;
    position: static;
    width: 100%;
    height: calc(65px + var(--safe-bottom));
    flex-direction: row;
    padding: 0 0 var(--safe-bottom);
    border-right: none;
    border-top: 1px solid var(--color-border);
  }

  #mainApp .sidebar ul {
    flex-direction: row;
    justify-content: space-around;
  }

  #mainApp .sidebar li {
    flex: 1;
    justify-content: center;
  }
}

/* ==========================================================
   ANDROID 16 EDGE-TO-EDGE & SAFE AREA INSETS
   ========================================================== */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

.auth-container {
  min-height: 0;
  padding: 0;
}

#authScreen {
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  padding:
    max(16px, var(--safe-top))
    max(16px, var(--safe-right))
    max(16px, var(--safe-bottom))
    max(16px, var(--safe-left));
  overflow-x: hidden;
  overflow-y: auto;
}

@media (max-width: 480px) {
  #authScreen .auth-card {
    padding: 24px 18px;
  }
}

@media (max-height: 700px) {
  #authScreen,
  #authScreen .auth-container {
    align-items: flex-start;
  }
}

.main-header {
  padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
  padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
  height: calc(64px + env(safe-area-inset-top, 0px)) !important;
}

@media (max-width: 780px) {
  .main-header {
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-left: max(15px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(15px, env(safe-area-inset-right, 0px)) !important;
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }

  .sidebar {
    height: calc(65px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }

  .content-panel {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }
}

/* ==========================================================
   PAYMENT PROVIDER SELECTION & AFRICAN PAYMENTS UI
   ========================================================== */
.pay-provider-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.pay-provider-card {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 12px 16px;
  background: var(--color-surface, rgb(var(--ink) / 0.04));
  border: 1px solid var(--color-border, rgb(var(--ink) / 0.08));
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
.pay-provider-card:hover {
  background: var(--color-surface-hover, rgb(var(--ink) / 0.08));
  border-color: var(--color-border-hover, rgb(var(--ink) / 0.2));
}
}

.pay-provider-card.active {
  border-color: var(--color-accent, #6366f1);
  background: rgba(99, 102, 241, 0.12);
  box-shadow: 0 0 0 1px var(--color-accent, #6366f1);
}

.pay-provider-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.pay-provider-header strong {
  font-size: 0.95rem;
  color: var(--color-text-light, #ffffff);
  flex: 1;
}

.pay-provider-card small {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-medium, #8A94A6);
}

.pay-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.25);
  color: #818CF8;
}

.pay-badge.preferred {
  background: rgba(245, 158, 11, 0.25);
  color: #FBBF24;
}

/* ==========================================================
   STOREFRONT: shop, product, order, brand (html.page-store)
   Was css/storefront.css. Scoped so its bare a/h1/.btn/.grid rules
   only reach the storefront pages.
   ========================================================== */
/* storefront.css: shared shell for /shop, /product, /order, /brand */
:root:where(.page-store) {
  --sf-bg: #070a0f;
  --sf-surface: #0e131b;
  --sf-border: #1c2532;
  --sf-text: #d6dee6;
  --sf-muted: #8593a1;
  --sf-accent: #8b9cff;
  --sf-radius: 12px;
  color-scheme: dark;
}

:where(.page-store) * { box-sizing: border-box; }

:where(.page-store) body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sf-bg);
  color: var(--sf-text);
  font: 400 15px/1.55 var(--pc-font-system, system-ui, sans-serif);
}

:where(.page-store) a { color: var(--sf-accent); }

:where(.page-store) .sf-header {
  position: sticky;
  top: var(--titlebar-h, 0px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  background: rgb(var(--canvas-rgb) / 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--sf-border);
}

:where(.page-store) .sf-brand { font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-light); text-decoration: none; white-space: nowrap; }

:where(.page-store) .sf-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
:where(.page-store) .sf-nav a { color: var(--sf-text); text-decoration: none; }
:where(.page-store) .sf-nav a[aria-current="page"] { color: var(--sf-accent); }
@media (hover: hover) and (pointer: fine) {
:where(.page-store) .sf-nav a:hover { color: var(--sf-accent); }
}

:where(.page-store) .sf-main {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

:where(.page-store) h1 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); margin: 0 0 12px; overflow-wrap: anywhere; }

:where(.page-store) .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; }

:where(.page-store) .product-card,
:where(.page-store) .brand-card {
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgb(var(--ink) / .04) inset, 0 8px 24px rgba(0,0,0,.35);
  display: block;
  padding: 16px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  background: var(--sf-surface);
  color: var(--sf-text);
  text-decoration: none;
  transition: border-color 0.15s;
}
@media (hover: hover) and (pointer: fine) {
:where(.page-store) .product-card:hover,
:where(.page-store) .brand-card:hover { border-color: var(--sf-accent); }
}

:where(.page-store) .product-image,
:where(.page-store) .product-hero { display: block; width: 100%; border-radius: 8px; object-fit: cover; background: var(--color-panel); }
:where(.page-store) .product-image { aspect-ratio: 4 / 3; margin-bottom: 12px; }
:where(.page-store) .product-hero { max-height: 420px; margin-bottom: 18px; }
/* Lettered tile when a product has no photo or its photo fails to load. */
:where(.page-store) .product-placeholder {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  color: color-mix(in srgb, var(--color-accent) 70%, var(--color-text));
  font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 600; letter-spacing: -0.02em;
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 22%, var(--color-raised)), var(--color-raised) 75%);
}
:where(.page-store) .product-hero.product-placeholder { max-height: 420px; }
:where(.page-store) .product-name { font-weight: 600; margin-bottom: 4px; overflow-wrap: anywhere; }
:where(.page-store) .product-price { color: var(--sf-accent); font-weight: 600; }
:where(.page-store) .product-stock,
:where(.page-store) .empty,
:where(.page-store) .muted { color: var(--sf-muted); font-size: 0.9rem; }
:where(.page-store) .product-description { white-space: pre-line; max-width: 70ch; }

:where(.page-store) .product-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 18px 0 8px; }
:where(.page-store) .product-actions label { display: grid; gap: 4px; font-size: 0.85rem; color: var(--sf-muted); }
:where(.page-store) select,
:where(.page-store) input[type="number"] {
  min-height: 44px; min-width: 88px; padding: 8px 10px;
  border: 1px solid var(--sf-border); border-radius: 8px; background: var(--sf-surface); color: var(--sf-text); font: inherit;
}

:where(.page-store) .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--sf-accent); color: #070a0f; font: 600 14px/1 inherit;
  text-decoration: none; cursor: pointer;
}
:where(.page-store) .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

:where(.page-store) .cart-link { display: inline-flex; align-items: center; gap: 6px; }
:where(.page-store) .cart-link [data-cart-count] {
  min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--sf-accent); color: #070a0f; font-size: 12px; font-weight: 700; text-align: center;
}

:where(.page-store) .order-status { display: inline-block; margin-bottom: 16px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--sf-border); text-transform: capitalize; }
:where(.page-store) .order-items,
:where(.page-store) .order-list { list-style: none; padding: 0; margin: 0 0 16px; }
:where(.page-store) .order-items li,
:where(.page-store) .order-list li,
:where(.page-store) .order-line,
:where(.page-store) .order-total {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sf-border);
}
:where(.page-store) .order-total { font-weight: 700; margin-bottom: 18px; }
:where(.page-store) .order-tracking { display: grid; gap: 6px; margin: 4px 0 18px; padding: 14px 16px; border: 1px solid var(--sf-border); border-radius: 12px; background: var(--sf-surface); }
:where(.page-store) .order-tracking a { color: var(--sf-accent); font-weight: 650; }
.admin-order-tracking-list { display: grid; gap: 12px; margin-top: 14px; }
.admin-order-tracking-card { display: grid; gap: 8px; }
.admin-order-tracking-card h3, .admin-order-tracking-card p { margin: 0; }
.admin-order-tracking-card form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-order-tracking-card form label { display: grid; gap: 5px; color: var(--color-text-medium); font-size: 0.82rem; }
.admin-order-tracking-card form input, .admin-order-tracking-card form select { min-width: 0; width: 100%; }
.admin-order-tracking-card form button { justify-self: start; }
@media (max-width: 560px) { .admin-order-tracking-card form { grid-template-columns: 1fr; } }

:where(.page-store) .brand-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
:where(.page-store) .chip { padding: 3px 10px; border: 1px solid var(--sf-border); border-radius: 999px; font-size: 0.8rem; color: var(--sf-muted); }
:where(.page-store) .site-list { list-style: none; padding: 0; display: grid; gap: 8px; }
:where(.page-store) .site-list li { padding: 12px 14px; border: 1px solid var(--sf-border); border-radius: 10px; background: var(--sf-surface); }


/* ── Stepped checkout (/order?step=...) ─────────────────────────── */
:where(.page-store) .checkout-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; counter-reset: step; flex-wrap: wrap; }
:where(.page-store) .checkout-steps li {
  counter-increment: step; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--sf-border); border-radius: 999px; color: var(--sf-muted); font-size: 0.85rem;
}
:where(.page-store) .checkout-steps li::before { content: counter(step); font-weight: 700; }
:where(.page-store) .checkout-steps li.done { color: var(--sf-text); }
:where(.page-store) .checkout-steps li.done::before { content: '✓'; }
:where(.page-store) .checkout-steps li[aria-current="step"] { border-color: var(--sf-accent); color: var(--sf-text); font-weight: 600; }
:where(.page-store) .cart-lines li { align-items: center; flex-wrap: wrap; }
:where(.page-store) .cart-lines li.has-problem { border-left: 3px solid #f87171; padding-left: 10px; }
:where(.page-store) .line-problem,
:where(.page-store) .is-error { color: #f87171; }
:where(.page-store) .line-controls { display: flex; align-items: center; gap: 10px; }
:where(.page-store) .line-controls input[type="number"] { min-width: 72px; width: 72px; }
:where(.page-store) .checkout-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 16px 0; }
:where(.page-store) .btn-quiet { background: transparent; color: var(--sf-text); border: 1px solid var(--sf-border); }
:where(.page-store) .btn:focus-visible,
:where(.page-store) .checkout-form input:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
:where(.page-store) .checkout-form { display: grid; gap: 6px; max-width: 520px; }
:where(.page-store) .checkout-form label { font-size: 0.85rem; color: var(--sf-muted); margin-top: 6px; }
:where(.page-store) .checkout-form input[type="text"],
:where(.page-store) .checkout-form input[type="tel"] {
  min-height: 44px; padding: 8px 10px; border: 1px solid var(--sf-border); border-radius: 8px;
  background: var(--sf-surface); color: var(--sf-text); font: inherit;
}
:where(.page-store) .checkout-form fieldset { border: 1px solid var(--sf-border); border-radius: 10px; padding: 8px 12px 12px; margin: 0 0 12px; }
:where(.page-store) .checkout-form legend { padding: 0 6px; color: var(--sf-muted); font-size: 0.85rem; }
:where(.page-store) .pay-option { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 4px; cursor: pointer; color: var(--sf-text) !important; }
:where(.page-store) .pay-option input { margin-top: 4px; width: 18px; height: 18px; }
:where(.page-store) .checkout-note { padding: 10px 14px; border: 1px solid var(--sf-border); border-radius: 10px; background: var(--sf-surface); }
:where(.page-store) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media print { :where(.page-store) .checkout-steps,
:where(.page-store) .checkout-actions { display: none !important; } }

@media print {
  :where(.page-store) .sf-header,
:where(.page-store) .btn { display: none !important; }
  :where(.page-store) body { background: #fff; color: #000; }
}

/* ==========================================================
   SITE SHELL: header, drawer, cards for body.pc-shell pages
   (chat, profile, requests, shop, product, order, brand, dashboard drawer).
   Was css/shell.css.
   ========================================================== */
/* ==========================================================
   shell.css: the shared Power Connect shell (header, hamburger drawer,
   depth/artwork, cards) for chat, shop, product, order and brand pages.
   Tokens mirror css/index.css and home.html, so the shell sits beside
   the dashboard and marketing site without a visual seam.
   Markup is generated by js/site-shell.js.
   ========================================================== */
:root {
  --pc-bg: #070a0f;
  --pc-bg-2: #0b1018;
  --pc-surface: rgba(16, 22, 32, 0.72);
  --pc-surface-solid: #101620;
  --pc-line: rgba(199, 210, 254, 0.12);
  --pc-line-strong: rgba(199, 210, 254, 0.24);
  --pc-text: #e6ebf5;
  --pc-muted: #8e9bb0;
  --pc-accent: #6366f1;
  --pc-accent-2: #818cf8;
  --pc-accent-soft: #c7d2fe;
  --pc-good: #34d399;
  --pc-warn: #fbbf24;
  --pc-radius: 16px;
  --pc-header-h: 64px;
  --pc-shadow-1: 0 1px 0 rgb(var(--ink) / 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --pc-shadow-2: 0 1px 0 rgb(var(--ink) / 0.06) inset, 0 24px 60px rgba(0, 0, 0, 0.55);
  --pc-font: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI Variable Text', 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.pc-shell {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--pc-text);
  font: 400 15px/1.6 var(--pc-font);
  background: var(--pc-bg);
  overflow-x: hidden;
}

/* ── Artwork: three depth layers, all decorative and GPU-cheap ─────────── */
.pc-art {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(60vmax 60vmax at 8% -10%, rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(50vmax 50vmax at 110% 110%, rgba(52, 211, 153, 0.12), transparent 60%),
    linear-gradient(180deg, var(--pc-bg) 0%, var(--pc-bg-2) 100%);
}

.pc-art::before {
  /* signal grid */
  content: "";
  position: absolute;
  inset: -2px;
  background-image: radial-gradient(rgba(199, 210, 254, 0.09) 1px, transparent 1.2px);
  background-size: 28px 28px;
  mask-image: radial-gradient(80% 70% at 50% 30%, #000 40%, transparent 100%);
}

.pc-art::after {
  /* Africa glyph watermark (same artwork as the app icon) */
  content: "";
  position: absolute;
  right: -8vmax;
  top: 12vh;
  width: 62vmax;
  height: 62vmax;
  background: url("../img/icon-monochrome-512.png") center / contain no-repeat;
  opacity: 0.045;
  filter: blur(0.3px);
  transform: rotate(-8deg);
}

@media (prefers-reduced-motion: no-preference) {
  .pc-art::after { animation: pc-drift 40s ease-in-out infinite alternate; }
  @keyframes pc-drift { to { transform: rotate(-4deg) translate3d(-2vmax, 2vmax, 0); } }
}

/* ── Header ────────────────────────────────────────────────────────────── */
.pc-header {
  position: sticky;
  top: var(--titlebar-h, 0px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(var(--pc-header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  background: rgb(var(--canvas-rgb) / 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--pc-line);
}

.pc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-light);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.pc-brand img { width: 30px; height: 30px; border-radius: 50%; }

.pc-crumb {
  min-width: 0;
  overflow: hidden;
  color: var(--pc-muted);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pc-crumb::before { content: "/"; margin-right: 10px; opacity: 0.5; }

/* Phones: the wordmark gave way to "/ …", so the header never said where you are.
   Keep the logo (its link keeps the "Power Connect home" label) and show the page name. */
@media (max-width: 480px) {
  .pc-brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .pc-crumb { font-weight: 600; color: var(--pc-text, #fff); }
  .pc-crumb::before { content: none; }
}

.pc-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.pc-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pc-line-strong);
  border-radius: 12px;
  background: rgb(var(--ink) / 0.03);
  color: var(--pc-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.pc-icon-btn:hover { border-color: var(--pc-accent-soft); }
}
.pc-icon-btn:focus-visible, .pc-drawer a:focus-visible, .pc-btn:focus-visible { outline: 2px solid var(--pc-accent-2); outline-offset: 2px; }

.pc-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--pc-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.pc-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pc-accent), #22d3ee);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

/* Hamburger: the same three-line icon as home.html's menu */
.pc-burger span, .pc-burger span::before, .pc-burger span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.pc-burger span { position: relative; }
.pc-burger span::before, .pc-burger span::after { content: ""; position: absolute; left: 0; }
.pc-burger span::before { top: -6px; }
.pc-burger span::after { top: 6px; }
.pc-burger[aria-expanded="true"] span { background: transparent; }
.pc-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.pc-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ── Drawer ────────────────────────────────────────────────────────────── */
.pc-drawer { position: fixed; inset: 0; z-index: 100; }
.pc-drawer[hidden] { display: none; }

.pc-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 9, 0.6);
  backdrop-filter: blur(4px);
  animation: pc-fade 0.18s ease;
}

.pc-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(360px, 88vw);
  padding: calc(18px + env(safe-area-inset-top, 0px) + var(--titlebar-h, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(99, 102, 241, 0.18), transparent 60%),
    var(--pc-surface-solid);
  border-left: 1px solid var(--pc-line-strong);
  box-shadow: var(--pc-shadow-2);
  animation: pc-slide 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pc-fade { from { opacity: 0; } }
@keyframes pc-slide { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pc-drawer-backdrop, .pc-drawer-panel { animation: none; }
}

.pc-drawer-title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pc-muted); }

.pc-nav { display: grid; gap: 2px; }
.pc-nav a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--pc-text);
  text-decoration: none;
}
.pc-nav a small { display: block; color: var(--pc-muted); font-size: 12px; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) {
.pc-nav a:hover { background: rgb(var(--ink) / 0.05); }
}
.pc-nav a[aria-current="page"] {
  background: rgba(99, 102, 241, 0.16);
  box-shadow: inset 3px 0 0 var(--pc-accent-2);
}
.pc-nav a[aria-current="page"]::after { content: "●"; color: var(--pc-accent-2); font-size: 10px; }

.pc-account {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius);
  background: rgb(var(--ink) / 0.03);
}
.pc-account-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pc-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.pc-legal { display: flex; gap: 16px; margin-top: auto; font-size: 12px; }
.pc-legal a { color: var(--pc-muted); }

/* ── Building blocks for pages ─────────────────────────────────────────── */
.pc-main {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 28px max(16px, env(safe-area-inset-right, 0px)) calc(56px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

.pc-hero { margin: 8px 0 24px; }
.pc-eyebrow { color: var(--pc-accent-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.pc-hero h1 { margin: 6px 0 8px; font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; }
.pc-hero p { max-width: 62ch; margin: 0; color: var(--pc-muted); }

.pc-card {
  position: relative;
  padding: 18px;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--pc-shadow-1);
}
.pc-card::before {
  /* gradient edge light for depth */
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(199, 210, 254, 0.28), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pc-accent), var(--pc-accent-2));
  color: #fff;
  font: 600 14px/1 var(--pc-font);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.35);
}
.pc-btn-ghost { background: transparent; border-color: var(--pc-line-strong); box-shadow: none; color: var(--pc-text); }
.pc-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--pc-line-strong);
  border-radius: 999px;
  color: var(--pc-muted);
  font-size: 12px;
  font-weight: 500;
}

.pc-muted { color: var(--pc-muted); }
.pc-empty { color: var(--pc-muted); padding: 24px 0; }

@media print {
  .pc-header, .pc-drawer, .pc-art { display: none !important; }
}

/* Shell pages were authored on browser default spacing, not on the
   dashboard reset at the top of this file: give it back, at zero
   specificity so every component rule still wins. */
:where(.pc-shell *) { margin: revert; padding: revert; }

/* ==========================================================
   WINDOW SURFACES: edge-to-edge, large screens, foldables, PWA title bar.
   Was css/window.css.
   ========================================================== */
/* ==========================================================
   window.css: one window-surface layer for every host
     • Android SDK 36/37: edge-to-edge is mandatory and large screens
       (>= 600dp) ignore orientation/resizability locks, so any phone
       layout may be shown in a tablet, foldable or freeform window.
     • Windows / ChromeOS installed PWA: window-controls-overlay title bar.
     • Desktop browsers: wide windows, mouse + keyboard.
   Load AFTER css/index.css. html classes come from js/adaptive-orientation.js
   (device-phone | device-large-screen | device-foldable | device-tv, mode-*).
   ========================================================== */

:root {
  /* 0 unless the app is running with a custom (overlay) title bar. */
  --titlebar-h: 0px;
  --window-gutter: max(16px, var(--safe-left, 0px), var(--safe-right, 0px));
  --content-max: 1440px;
}

/* ── Text: honour the system font scale without layout breakage ──────────
   Android 14+ scales fonts non-linearly up to 200%, and the WebView applies
   it as text zoom. Disable browser "font boosting" so the scale is applied
   uniformly, and let long labels wrap instead of overflowing fixed widths. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1, h2, h3, h4,
.btn, button, label,
.sidebar li, .toast, .modal-header h3 {
  overflow-wrap: anywhere;
}

@media (pointer: coarse) {
  /* 48dp minimum touch targets (Material / Play large-screen quality). */
  .sidebar li,
  .btn,
  .modal-close {
    min-height: 44px;
  }
}

/* ── Edge-to-edge: floating UI clears the gesture bar and cutouts ─────── */
.toast {
  bottom: calc(20px + var(--safe-bottom, 0px));
  right: calc(20px + var(--safe-right, 0px));
}

.cart-fab {
  bottom: calc(84px + var(--safe-bottom, 0px));
  right: calc(20px + var(--safe-right, 0px));
}

/* ── Large screens, foldables, freeform/desktop windows ────────────────── */
.device-large-screen .dashboard-container,
.device-large-screen .dashboard-section {
  max-width: var(--content-max);
}

.device-large-screen .dashboard-container {
  margin-inline: auto;
}

.device-large-screen .modal-content {
  max-width: min(720px, calc(100vw - 2 * var(--window-gutter)));
}

/* Book-style foldable posture: keep content off the hinge. */
@media (horizontal-viewport-segments: 2) {
  .device-foldable .modal-content {
    max-width: calc(env(viewport-segment-width 0 0, 50vw) - 2 * var(--window-gutter));
    margin-inline-start: var(--window-gutter);
  }
}

/* Very short windows (landscape phones, split-screen, small desktop windows). */
@media (max-height: 480px) {
  .main-header {
    height: auto !important;
    min-height: 48px;
  }
}

/* ── TV (10-foot UI): Android/Google TV, Fire TV, smart-TV browsers ──────
   `device-tv` comes from js/adaptive-orientation.js, which also adds D-pad
   spatial navigation. Overscan margins follow Android TV's 48dp x 27dp
   safe area; focus is the only "hover" a remote has, so it must be loud. */
.device-tv {
  --tv-safe-x: 48px;
  --tv-safe-y: 27px;
  --window-gutter: var(--tv-safe-x);
  cursor: none;
}

.device-tv body {
  padding-inline: var(--tv-safe-x);
  padding-block: var(--tv-safe-y);
  box-sizing: border-box;
}

.device-tv :where(.main-header, .home-header, .pc-header) {
  padding-inline: var(--tv-safe-x);
}
/* home's full-bleed header pads through its gutter variable (PAGE LAYERS): keep the TV overscan margin. */
.device-tv :where(.page-home) .home-header { --home-gutter: var(--tv-safe-x); }

.device-tv .toast {
  bottom: var(--tv-safe-y);
  right: var(--tv-safe-x);
}

.device-tv .cart-fab {
  bottom: calc(64px + var(--tv-safe-y));
  right: var(--tv-safe-x);
}

/* Remote targets: big enough to land on from the sofa. */
.device-tv :where(button, [role="button"], .btn, .pc-btn, a.btn, .sidebar li, .nav-item, .tab,
  input, select) {
  min-height: 48px;
}

/* !important: the global :focus-visible ring (dashboard base) is !important. */
.device-tv :where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 4px solid var(--pc-focus, #a5b4fc) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgba(165, 180, 252, 0.22);
}

/* Focused cards and tiles lift, like the Android TV launcher. */
.device-tv :where(.card, .pc-card, .plan-card, .product-card, .stat-card):focus-within {
  scale: 1.03;
  transition: scale var(--dur-fast, 150ms) var(--ease-standard, ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .device-tv :where(.card, .pc-card, .plan-card, .product-card, .stat-card):focus-within { scale: none; }
}

/* No mouse: scrollbars and text selection are noise at ten feet. */
.device-tv ::-webkit-scrollbar { width: 0; height: 0; }
.device-tv body { -webkit-user-select: none; user-select: none; }
.device-tv :where(input, textarea) { -webkit-user-select: text; user-select: text; }

/* ── Windows / ChromeOS installed PWA: custom title bar ────────────────── */
@media (display-mode: window-controls-overlay) {
  :root {
    --titlebar-h: env(titlebar-area-height, 33px);
  }

  /* Draggable title strip beside the OS caption buttons. */
  body::before {
    content: "Power Connect";
    position: fixed;
    z-index: 2147483000;
    top: env(titlebar-area-y, 0px);
    left: env(titlebar-area-x, 0px);
    width: env(titlebar-area-width, 100%);
    height: var(--titlebar-h);
    box-sizing: border-box;
    padding-inline-start: 14px;
    display: flex;
    align-items: center;
    font: 600 12px/1 var(--pc-font-system, system-ui, sans-serif);
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.78);
    background: rgb(var(--canvas-rgb) / 0.94);
    border-bottom: 1px solid rgb(var(--ink) / 0.06);
    -webkit-app-region: drag;
    app-region: drag;
    pointer-events: auto;
  }

  body {
    padding-top: var(--titlebar-h);
  }

  .main-header,
  .home-header {
    top: var(--titlebar-h) !important;
  }

  .sidebar {
    top: calc(64px + var(--titlebar-h));
  }

  @media (min-width: 781px) {
    .sidebar {
      height: calc(100vh - 64px - var(--titlebar-h));
      height: calc(100dvh - 64px - var(--titlebar-h));
    }
  }

  .modal {
    top: var(--titlebar-h);
  }
}

/* Desktop windows with a mouse: calmer hover feedback, visible scrollbars. */
@media (hover: hover) and (pointer: fine) {
  .device-large-screen ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .device-large-screen ::-webkit-scrollbar-thumb {
    background: rgb(var(--ink) / 0.16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
}

/* ── Native feel on phones, tablets and TV (mobile-native skill baseline) ──
   Each rule is the fix for one "this is a website" tell; see the why. */
html {
  -webkit-tap-highlight-color: transparent; /* no gray flash on tap */
}

/* Controls fire instantly (no double-tap-zoom wait) and long-press does not
   select their labels. Body text stays selectable: never set this on body. */
button, [role="button"], .btn, .pc-btn, .pc-icon-btn, .chip, .pc-chip, .sidebar li, .tab {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Press feedback lives in FEEL (`scale: var(--pc-press-scale)`), which each
   platform look tunes. A transform-based shrink here used to override that,
   so Android/iOS/desktop shrank buttons their looks say must not shrink. */

/* iOS zooms into inputs under 16px and never zooms back out. */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* App-style screens own their scrolling: no pull-to-refresh hijack.
   The marketing page (home.html) keeps normal document overscroll. */
body.pc-shell, html:has(#mainApp) {
  overscroll-behavior: none;
}
.pc-drawer-panel, .modal-content, #chatsListContainer, .chat-log {
  overscroll-behavior: contain;
}

/* TV remotes / D-pad: a clearly visible focus ring on every control. */
@media (hover: none) and (pointer: none), (any-pointer: none) {
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible {
    outline: 3px solid #c7d2fe;
    outline-offset: 3px;
  }
}

/* ==========================================================
   FEEL: interaction + typography layer (press, focus, 44px targets,
   reduced motion/transparency, more contrast). Was css/feel.css.
   ========================================================== */
/* ==========================================================
   feel.css: the shared interaction + typography layer, linked right
   after css/window.css on every page (dashboard, shell pages, site).
   Rules follow Apple's interface guidance (apple-design skill):
   respond on press, system type with size-specific tracking, 44pt
   targets, visible focus, and gentler fallbacks for people who ask for
   reduced motion, reduced transparency or more contrast.
   It only adds behaviour; colours and layout stay in each page's CSS.
   ========================================================== */
:root {
  /* System font first: SF on Apple platforms, Segoe UI Variable on
     Windows, Roboto on Android/ChromeOS, each with its own optical sizing. */
  --pc-font-system: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pc-font: var(--pc-font-system);
  --pc-press-scale: 0.97;
  --pc-focus: #a5b4fc;              /* ≥ 8:1 on the dark canvases; light theme overrides */
  --pc-tap: 44px;
}

html { -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--pc-font-system);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tracking and leading change with size: tight and slightly negative for
   display text, neutral for body, a touch open for small labels. */
h1 { letter-spacing: -0.022em; line-height: 1.1; }
h2 { letter-spacing: -0.017em; line-height: 1.2; }
h3 { letter-spacing: -0.01em; line-height: 1.3; }
small, .pc-chip, .chip, .pc-badge, .badge, .pc-eyebrow { letter-spacing: 0.01em; }

/* Money and counters don't jiggle as digits change. */
.product-price, .order-total, .order-line, .pf-balance, .price, .balance, .credits, [data-cart-count],
.stat-value, .plan-price, .amount { font-variant-numeric: tabular-nums; }

/* ── Response: feedback on pointer-down, no 300ms tap delay ─────────── */
button, [role="button"], .btn, .pc-btn, .pc-icon-btn, a.btn, input[type="submit"], input[type="button"],
.google-btn, .nav-item, .tab, .chip-btn { touch-action: manipulation; }

/* `scale` is its own property, so this never fights a component's transform. */
button:not(:disabled):active, [role="button"]:active, .btn:not([disabled]):active, .pc-btn:not([disabled]):active,
.pc-icon-btn:active, a.btn:active, .google-btn:active, input[type="submit"]:not(:disabled):active {
  scale: var(--pc-press-scale);
}

/* ── Keyboard and remote (Android TV D-pad) focus ──────────────────── */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--pc-focus);
  outline-offset: 2px;
}

/* ── 44pt targets wherever the pointer is a finger ─────────────────── */
@media (pointer: coarse) {
  :where(button, [role="button"], .btn, .pc-btn, a.btn, .google-btn, input[type="submit"], input[type="button"]) {
    min-height: var(--pc-tap);
  }
  :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select) {
    min-height: var(--pc-tap);
    font-size: max(16px, 1em); /* 16px+ stops iOS zooming into focused fields */
  }
}

/* Desktop only: no rubber-band on the page itself (touch keeps pull-to-refresh). */
@media (pointer: fine) {
  html { overscroll-behavior-y: none; }
}

/* ── Accessibility preferences ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  :where(button, .btn, .pc-btn, [role="button"]):active { scale: none; }
}

/* Frosted surfaces become solid for people who find translucency hard to read. */
@media (prefers-reduced-transparency: reduce) {
  .pc-header, .pc-card, .pc-drawer-panel, .pc-drawer-backdrop, .modal, .modal-content, .main-header, .app-header,
  .glass, .card, .sidebar, .bottom-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .pc-header, .pc-card, .pc-drawer-panel, .modal-content, .main-header, .app-header, .glass, .card, .sidebar, .bottom-nav {
    background-color: var(--color-panel) !important;
  }
}

@media (prefers-contrast: more) {
  :root { --pc-line: rgb(var(--ink) / 0.45); --pc-line-strong: rgb(var(--ink) / 0.7); --pc-muted: var(--color-text-medium); }
  :where(.pc-card, .card, .modal-content, .pc-btn-ghost, .btn) { border: 1px solid rgb(var(--ink) / 0.6); }
}

/* Text-style actions ("Sign up", "Log in") are real buttons so keyboards,
   TV remotes and screen readers reach them; they keep the link look. */
.link-btn {
  display: inline-flex; align-items: center; min-height: var(--pc-tap); padding: 0 6px; margin: -10px 0;
  border: 0; background: none; color: var(--color-info-text, #a5b4fc); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .link-btn:hover { color: var(--color-text-light); } }

/* Icon controls that render below 44pt on touch screens. */
@media (pointer: coarse) {
  .user-icon, .drawer-close, .pc-icon-btn, .modal-close, .close-modal { min-width: var(--pc-tap); min-height: var(--pc-tap); }
}

/* ==========================================================
   FOUNDATION: one design language for every page
   (index.html is the base; apple-design skill)
   The dashboard tokens (--color-*, --radius-*) are the source of truth.
   The shell (--pc-*) and storefront (--sf-*) vocabularies are aliases of
   them, so a palette change here reaches home, map, legal, shell,
   storefront and auth pages alike. Page layers below may still
   override a token for their page only.
   ========================================================== */
:root {
  /* Palette: shell + storefront follow the dashboard */
  --pc-bg: var(--color-background);
  --pc-surface-solid: var(--color-panel);
  --pc-text: var(--color-text-light);
  --pc-muted: var(--color-text-medium);
  --pc-accent: var(--color-accent);
  --pc-accent-2: var(--color-info-text);
  --pc-radius: var(--radius-md);
  --sf-bg: var(--color-background);
  --sf-surface: var(--color-panel);
  --sf-border: var(--color-border-hover);
  --sf-text: var(--color-text-light);
  --sf-muted: var(--color-text-medium);
  --sf-accent: var(--color-info-text);
  --sf-radius: var(--radius-md);

  /* Type scale: size-specific tracking and leading, in rem so the
     user's text size (Android font scale, Dynamic Type) reflows layout. */
  --type-display: 600 clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem) / 1.08 var(--pc-font-system);
  --type-title: 600 clamp(1.25rem, 1rem + 1vw, 1.6rem) / 1.2 var(--pc-font-system);
  --type-headline: 600 1.0625rem / 1.3 var(--pc-font-system);
  --type-body: 400 1rem / 1.55 var(--pc-font-system);
  --type-caption: 500 0.8125rem / 1.4 var(--pc-font-system);
  --track-display: -0.022em;
  --track-title: -0.017em;
  --track-caption: 0.01em;

  /* Motion: critically damped (no overshoot) by default; short. */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-press: 100ms;
  --dur-small: 180ms;
  --dur-sheet: 280ms;

  /* Materials: one recipe for floating chrome (headers, sheets, menus). */
  --material-chrome: rgb(var(--canvas-rgb) / 0.72);
  --material-blur: blur(18px) saturate(160%);
  --material-edge: 1px solid var(--color-border);
  --material-scrim: rgba(3, 5, 9, 0.6);
}

/* ── Theme: js/theme.js sets <html data-theme> from Settings → Appearance
   (System / Light / Dark). Dark is the token set above; light redefines
   the same tokens, so every rule that uses a token follows. Hard-coded
   colours do not: use a token. ── */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] {
  --pc-focus: #4f46e5;              /* 6.3:1 on white; the dark value is ~1.9:1 here */
  color-scheme: light;
  --ink: 15 23 42;
  --canvas-rgb: 246 247 251;
  --panel-rgb: 255 255 255;
  --info-tint: 224 231 255;
  --color-raised: #ffffff;
  --color-background: #f6f7fb;
  --color-panel: #ffffff;
  --color-sidebar: #ffffff;
  --color-bg-glass: rgba(255, 255, 255, 0.86);
  --color-bg-secondary: #eef1f6;
  --color-surface: rgba(15, 23, 42, 0.035);
  --color-surface-hover: rgba(15, 23, 42, 0.06);
  --color-text-light: #0f172a;
  --color-text-medium: #526075;
  --color-text-muted: #5f6b7a;          /* 5.1:1 on #f6f7fb (was 4.3:1) */
  --color-border: rgba(15, 23, 42, 0.10);
  --color-border-hover: rgba(15, 23, 42, 0.18);
  --color-active: rgba(15, 23, 42, 0.05);
  --color-accent: #4f46e5;
  --color-accent-dim: #4338ca;
  --color-accent-glow: rgba(79, 70, 229, 0.22);
  --color-accent-subtle: rgba(79, 70, 229, 0.08);
  --color-success: rgba(22, 163, 74, 0.12);
  --color-success-text: #15803d;
  --color-danger: rgba(220, 38, 38, 0.10);
  --color-danger-text: #b91c1c;
  --color-info: rgba(79, 70, 229, 0.10);
  --color-info-text: #4338ca;
  --color-primary: #0f172a;
  --color-warning-text: #b45309;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.18);
  --shadow-btn: 0 4px 14px rgba(79, 70, 229, 0.25);
  --shadow-glow: 0 0 40px rgba(79, 70, 229, 0.10);
  --pc-bg-2: #eef1f6;
  --pc-surface: rgba(255, 255, 255, 0.82);
  --pc-line: rgba(15, 23, 42, 0.10);
  --pc-line-strong: rgba(15, 23, 42, 0.18);
  --pc-accent-soft: #4338ca;
  --pc-good: #047857;
  --pc-warn: #b45309;
  --pc-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px rgba(15, 23, 42, 0.08);
  --pc-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 24px 60px rgba(15, 23, 42, 0.16);
  --text-main: #0f172a;
  --text-dim: #526075;
  --material-chrome: rgba(255, 255, 255, 0.78);
  --material-scrim: rgba(15, 23, 42, 0.32);
  --bg-dark: #f6f7fb;
  --panel-bg: rgba(255, 255, 255, 0.92);
}

/* Floating chrome: the same translucent material on every page's top bar
   and drop-down menus. (Solid fallback is in FEEL: reduced transparency.) */
.pc-header,
.sf-header,
.user-dropdown {
  background: var(--material-chrome);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
}

/* Anchored origin: menus grow from the account button that opened them. */
.user-dropdown { transform-origin: top right; }

/* Screen-reader-only text (labels that the design shows by context). */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Shared type roles. Opt in with a class so existing page headings keep
   their sizes until each page is moved over. */
.t-display { font: var(--type-display); letter-spacing: var(--track-display); }
.t-title { font: var(--type-title); letter-spacing: var(--track-title); }
.t-headline { font: var(--type-headline); }
.t-body { font: var(--type-body); }
.t-caption { font: var(--type-caption); letter-spacing: var(--track-caption); color: var(--color-text-medium); }

/* One press response everywhere (FEEL sets the scale; this sets the clock). */
:where(button, [role="button"], .btn, .pc-btn, .pc-icon-btn, a.btn, .google-btn) {
  transition-property: scale, background-color, border-color, color, box-shadow, opacity;
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-standard);
}

/* Storefront primary action reads like the dashboard primary. */
:where(.page-store) .btn:not(.btn-quiet) {
  background: var(--color-primary);
  color: var(--color-background);
}

/* Admin commission review (js/commission-review.js): app-reported partner
   commissions waiting for an approve / reject decision. */
.commission-review-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.commission-review-info { flex: 1 1 260px; min-width: 0; }
.commission-review-row input { flex: 1 1 220px; }
.commission-review-actions { display: flex; gap: 8px; }

/* ── Way home: the brand is the home link (no floating back buttons) ──────
   Headers: the POWER CONNECT wordmark is a link (.logo-link), top-left where people
   look for it. Sign-in / sign-up screens have no header, so they get a brand bar
   (.auth-brand) at the top of the page that scrolls with it, never over the card.
   Legal pages' wordmark carries data-legal-back="brand" (back to home OR dashboard). */
.logo-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-fast, 120ms) var(--ease-standard, ease-out);
}
.logo-link:active { opacity: 0.6; transition-duration: 0ms; }

.auth-brand {
  position: absolute;
  z-index: 1;
  top: max(12px, var(--safe-top, 0px));
  left: max(16px, var(--safe-left, 0px));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-right: 8px;
  color: var(--color-text-light);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-fast, 120ms) var(--ease-standard, ease-out);
}
.auth-brand img { width: 28px; height: 28px; border-radius: 50%; }
/* The mark is a black disc: on a dark canvas it sits on a white chip (as on home) so it stays visible. */
:root:not([data-theme="light"]) :is(.auth-brand img, .pc-brand img, .auth-logo) {
  padding: 2px;
  background: #fff;
}
:root:not([data-theme="light"]) .auth-logo { padding: 6px; }
.auth-brand:active { opacity: 0.6; transition-duration: 0ms; }
@media (hover: hover) and (pointer: fine) {
  .auth-brand:hover, .logo-link:hover { opacity: 0.8; }
}
/* Room for the brand bar above the card (index: .auth-container, register: the card). */
.auth-brand + .auth-container,
.auth-brand + .auth-card { margin-top: 56px; }

/* Header actions keep their own spacing beside the wordmark. */
.main-header .header-left ~ .header-right { flex-shrink: 0; gap: 8px; padding-left: 12px; }

/* Standalone pages without a sidebar (terms, privacy, 404): body is a flex row from the
   dashboard base and .content-panel stops at 1200px, so it hugged the left edge on wide
   screens. Center it. */
:where(.page-legal, .page-404) .content-panel {
  margin-inline: auto;
}

/* Small, quiet helper text inside an auth card (not body copy). */
.auth-note {
  margin: 4px 0 18px;
  color: var(--color-text-medium);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: left;
}

/* Touch targets: 44pt (Apple HIG) / 48dp (Material 3) for anything tapped.
   The account icon keeps its 34px look; a transparent border grows the hit box
   (it has overflow: hidden for avatars, so a ::after hit area would be clipped). */
.user-icon {
  width: 44px;
  height: 44px;
  border: 5px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1.5px rgba(99, 102, 241, 0.4), 0 0 12px rgba(99, 102, 241, 0.3);
}

/* ── Skeleton screens: the shape of the content while it loads ─────────────
   One component for every page. The container is a role="status" region with
   an .sr-only label (what is loading), so screen readers hear "Loading
   orders…" while sighted users see the layout that's coming. Shapes:
     .skeleton.is-list    rows like .list-row (tile + two lines)
     .skeleton.is-grid    product cards (image + two lines)
     .skeleton.is-detail  media + title + paragraph (product/order/brand/profile)
     .skeleton.is-chart   bars
     .skeleton-line       one inline line (a subtitle, a sentence)
   Static pages write the markup; dashboard scripts use window.skeleton() (index.js).
   The data renderer replaces the whole placeholder, so nothing needs removing. */
.skeleton,
.skeleton-line {
  --sk-shine: rgb(var(--ink) / 0.13);
}
.skeleton {
  display: grid;
  gap: 12px;
  padding: 12px 16px;
  width: 100%;
  list-style: none;
}
/* Motion (taste: loops 2.5-4 s, transform/opacity only): the placeholder
   waits 300ms before it shows, so a fast answer never flashes grey, then the
   shapes breathe in opacity, which the compositor runs without repainting
   (the old background-position sweep repainted every frame). */
.skeleton,
.skeleton-line {
  animation: sk-appear var(--dur-small, 180ms) var(--ease-standard, ease-out) 300ms both;
}
.skeleton .sk,
.skeleton-line {
  display: block;
  border-radius: var(--radius-element, 4px);
  background: var(--sk-shine);
}
.skeleton .sk { animation: sk-breathe 2.8s ease-in-out 300ms infinite alternate; }
.skeleton-line { animation: sk-appear var(--dur-small, 180ms) var(--ease-standard, ease-out) 300ms both, sk-breathe 2.8s ease-in-out 480ms infinite alternate; }
.sk-line { height: 12px; }
.sk-line.is-title { height: 18px; width: 55%; }
.sk-line.is-short { width: 40%; }
.sk-line.is-mid { width: 70%; }
.skeleton-line { display: inline-block; height: 0.9em; width: 12em; max-width: 100%; vertical-align: middle; }

.skeleton.is-list { gap: 0; padding: 0; }
.skeleton.is-list .sk-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 16px;
}
.skeleton.is-list .sk-row + .sk-row { border-top: 1px solid var(--color-border); }
.skeleton.is-list .sk-tile { width: 36px; height: 36px; border-radius: var(--radius-element, 4px); }
.skeleton.is-list .sk-lines { display: grid; gap: 8px; }
.skeleton.is-list .sk-trail { height: 12px; }

.skeleton.is-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: 16px;
  padding: 0;
}
.skeleton.is-grid .sk-card { display: grid; gap: 10px; }
.skeleton.is-grid .sk-media { aspect-ratio: 1; border-radius: 12px; }

.skeleton.is-detail { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0; }
.skeleton.is-detail .sk-media { aspect-ratio: 16 / 9; border-radius: 12px; }
@media (min-width: 781px) {
  .skeleton.is-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 28px; }
  .skeleton.is-detail .sk-media { aspect-ratio: 1; }
}
.skeleton.is-detail .sk-body { display: grid; gap: 14px; }
.skeleton.is-detail .sk-button { height: 44px; width: 60%; border-radius: var(--radius-element, 4px); margin-top: 6px; }

.skeleton.is-chart {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  height: 220px;
  gap: 10px;
  padding: 16px 8px 0;
}
.skeleton.is-chart .sk { border-radius: var(--radius-element, 4px) var(--radius-element, 4px) 0 0; height: var(--h, 50%); }
.skeleton.is-chart .sk:nth-child(3n + 1) { --h: 45%; }
.skeleton.is-chart .sk:nth-child(3n + 2) { --h: 75%; }
.skeleton.is-chart .sk:nth-child(3n) { --h: 60%; }

.skeleton.is-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }
.skeleton.is-chips .sk-chip { height: 34px; width: 120px; border-radius: var(--radius-element, 4px); }
.skeleton.is-chips .sk-chip:nth-child(odd) { width: 96px; }

/* Inside grid/flex parents (shop grid, chart row) the placeholder spans the row. */
.skeleton { grid-column: 1 / -1; flex: 1 1 100%; }
/* <ul> lists (community feed, requests) wrap it in an <li>. */
.skeleton-item { list-style: none; padding: 0; margin: 0; }

@keyframes sk-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sk-breathe {
  from { opacity: 1; }
  to { opacity: 0.45; }
}
/* Reduced motion: still shapes, shown at once (no delay, no pulse). */
@media (prefers-reduced-motion: reduce) {
  .skeleton, .skeleton .sk, .skeleton-line { animation: none; }
}
/* Windows high contrast: gradients vanish, so give the shapes an outline. */
@media (forced-colors: active) {
  .skeleton .sk, .skeleton-line { border: 1px solid CanvasText; background: none; }
}

/* ==========================================================
   PAGE LAYERS
   Each page sets <html class="page-NAME">. :where() adds no specificity,
   so these behave exactly like the old inline <style> blocks: they only
   win ties by coming last. Shared components belong above, not here.
   ========================================================== */

/* ── Legal pages (terms + privacy, html.page-legal) ── */
html:where(.page-legal),
:where(.page-legal) body { overflow: auto; }
    :where(.page-legal) body { -webkit-user-select: text; user-select: text; }
    /* Policy tables reuse .admin-table, whose cells don't wrap (795px wide in a 328px
       card), so phones panned the whole page sideways. Legal text wraps instead. */
    :where(.page-legal) .admin-table th,
    :where(.page-legal) .admin-table td { white-space: normal; overflow-wrap: break-word; vertical-align: top; }
    :where(.page-legal) .admin-table .tag { white-space: nowrap; }
    /* Phones: each row becomes a stacked block (name, detail, tag) instead of
       columns squeezed until words break mid-letter. Headers stay for screen readers. */
    @media (max-width: 480px) {
      :where(.page-legal) .admin-table thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
      }
      :where(.page-legal) .admin-table,
      :where(.page-legal) .admin-table tbody,
      :where(.page-legal) .admin-table tr,
      :where(.page-legal) .admin-table td { display: block; width: auto; }
      :where(.page-legal) .admin-table tr { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
      :where(.page-legal) .admin-table tr:last-child { border-bottom: none; }
      :where(.page-legal) .admin-table td { padding: 2px 0; border-bottom: none; }
      :where(.page-legal) .admin-table td:first-child { color: var(--color-text-light); font-weight: 600; }
      :where(.page-legal) .admin-table td:not(:first-child) { color: var(--color-text-medium); }
    }
    :where(.page-legal) .legal-wrap {
      max-width: 760px;
      margin: 0 auto;
      padding-bottom: var(--safe-bottom);
    }
    :where(.page-legal) .legal-hero {
      text-align: center;
      padding: 40px 0 32px;
      border-bottom: 1px solid var(--color-border);
      margin-bottom: 32px;
    }
    :where(.page-legal) .legal-hero .icon { font-size: 44px; margin-bottom: 12px; }
    :where(.page-legal) .legal-hero h1 { font-size: 20px; letter-spacing: 2px; margin-bottom: 6px; }
    :where(.page-legal) .legal-hero .sub { font-size: 12px; color: var(--color-text-medium); }
    :where(.page-legal) .legal-hero .badge {
      display: inline-block;
      margin-top: 14px;
      padding: 4px 14px;
      border: 1px solid var(--color-info-text);
      border-radius: 20px;
      font-size: 10px;
      color: var(--color-info-text);
      letter-spacing: 1.5px;
    }
    :where(.page-legal) .section-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    :where(.page-legal) .section-hdr .num { margin-left: auto; font-size: 11px; color: var(--color-text-medium); }
    :where(.page-legal) .card p { color: var(--color-text-medium); font-size: 13px; line-height: 1.7; margin-bottom: 10px; }
    :where(.page-legal) .card p:last-child { margin-bottom: 0; }
    :where(.page-legal) .card ul,
:where(.page-legal) .card ol { margin: 10px 0; padding-left: 20px; color: var(--color-text-medium); font-size: 13px; line-height: 1.65; }
    :where(.page-legal) .card li { margin-bottom: 6px; }
    :where(.page-legal) .card li strong { color: var(--color-text-light); }
    :where(.page-legal) .note-box { border-radius: 4px; padding: 12px 16px; margin: 14px 0; font-size: 12px; line-height: 1.6; }
    :where(.page-legal) .note-info { background: rgb(var(--info-tint) / 0.5); color: var(--color-info-text); }
    /* Low-alpha tint so the box reads on black and on white (the old dark-red fill made light-theme text 2-3:1). */
    :where(.page-legal) .note-danger { background: rgb(220 38 38 / 0.12); color: var(--color-danger-text); }
    :where(.page-legal) .contact-card {
      background: var(--color-sidebar);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    :where(.page-legal) .contact-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-medium); }
    :where(.page-legal) .contact-row .icon { width: 20px; text-align: center; }
    :where(.page-legal) .contact-row a { color: var(--color-info-text); }
    :where(.page-legal) .legal-footer { text-align: center; padding: 28px 0 10px; border-top: 1px solid var(--color-border); margin-top: 32px; }
    :where(.page-legal) .legal-footer p { color: var(--color-text-medium); font-size: 11px; line-height: 1.8; }
    :where(.page-legal) .legal-footer a { color: var(--color-text-medium); }

/* ── chat.html (html.page-chat) ── */
:where(.page-chat) .cm-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 900px) { :where(.page-chat) .cm-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
    :where(.page-chat) .cm-side { display: grid; gap: 14px; }
    @media (min-width: 900px) { :where(.page-chat) .cm-side { position: sticky; top: calc(var(--pc-header-h) + 20px); } }

    :where(.page-chat) .cm-composer textarea {
      width: 100%; min-height: 92px; resize: vertical; padding: 12px 14px;
      border: 1px solid var(--pc-line-strong); border-radius: 12px;
      background: rgba(0, 0, 0, 0.25); color: var(--pc-text); font: inherit;
    }
    :where(.page-chat) .cm-composer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
    :where(.page-chat) .cm-composer select {
      min-height: 44px; padding: 0 12px; border: 1px solid var(--pc-line-strong); border-radius: 12px;
      background: var(--pc-surface-solid); color: var(--pc-text); font: inherit;
    }
    :where(.page-chat) .cm-count { margin-left: auto; font-size: 12px; color: var(--pc-muted); }

    :where(.page-chat) .cm-feed { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
    :where(.page-chat) .cm-post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    :where(.page-chat) .cm-post-avatar {
      display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(34, 211, 238, 0.75));
      color: #fff; font-weight: 700; box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
    }
    :where(.page-chat) .cm-post-author { font-weight: 600; color: var(--pc-text); text-decoration: none; }
    :where(.page-chat) .cm-post-author:hover { color: var(--pc-accent-soft); }
    :where(.page-chat) .cm-post-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--pc-muted); }
    :where(.page-chat) .cm-post-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
    :where(.page-chat) .cm-kind-new_site { color: var(--pc-good); border-color: rgba(52, 211, 153, 0.4); }
    :where(.page-chat) .cm-kind-offer { color: var(--pc-accent-soft); border-color: rgba(129, 140, 248, 0.45); }
    :where(.page-chat) .cm-kind-outage { color: var(--pc-warn); border-color: rgba(251, 191, 36, 0.45); }

    :where(.page-chat) .cm-action { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; color: var(--pc-text); text-decoration: none; }
    :where(.page-chat) .cm-action:hover { background: rgb(var(--ink) / 0.05); }
    :where(.page-chat) .cm-action b { display: block; font-weight: 600; }
    :where(.page-chat) .cm-action small { color: var(--pc-muted); }
    :where(.page-chat) .cm-action-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: rgba(99, 102, 241, 0.16); font-size: 18px; }
    :where(.page-chat) .cm-status { min-height: 1.4em; font-size: 13px; color: var(--pc-muted); }

/* ── home.html (html.page-home) ── */
:where(.page-home) .home-page {
            --home-content-width: 1180px;
            min-height: 100vh;
        }

        :where(.page-home) .home-hero {
            position: relative;
            display: flex;
            min-height: min(850px, 100vh);
            min-height: min(850px, 100svh);
            align-items: flex-end;
            overflow: hidden;
            isolation: isolate;
            padding: 150px max(36px, calc((100vw - var(--home-content-width)) / 2)) 104px;
            background: var(--color-raised);
            color: #fff;
        }

        :where(.page-home) .home-hero-photo,
:where(.page-home) .home-hero-shade {
            position: absolute;
            z-index: -1;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        :where(.page-home) .home-hero-photo {
            object-fit: cover;
            object-position: center 44%;
        }

        :where(.page-home) .home-hero-shade {
            background:
                linear-gradient(90deg, rgba(4, 7, 10, 0.79) 0%, rgba(4, 7, 10, 0.48) 48%, rgba(4, 7, 10, 0.08) 100%),
                linear-gradient(0deg, rgba(4, 7, 10, 0.67) 0%, rgba(4, 7, 10, 0.04) 75%);
        }

        :where(.page-home) .home-header {
            /* Full-bleed bar; the padding lines its content up with the page column. */
            --home-gutter: 36px;
            position: fixed;
            z-index: 20;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            width: auto;
            transform: none;
            padding-left: max(var(--home-gutter), env(safe-area-inset-left, 0px), calc((100% - var(--home-content-width)) / 2));
            padding-right: max(var(--home-gutter), env(safe-area-inset-right, 0px), calc((100% - var(--home-content-width)) / 2));
            min-height: 86px;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            border-bottom: 1px solid rgb(var(--ink) / 0.28);
            background: rgb(var(--canvas-rgb) / 0.88);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            color: var(--color-text-light);
        }

        :where(.page-home) .home-brand {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 11px;
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: 0.13em;
        }

        :where(.page-home) .home-brand img {
            width: 38px;
            height: 38px;
            padding: 4px;
            border-radius: 50%;
            background: #fff;
            object-fit: contain;
        }

        :where(.page-home) .home-nav {
            display: flex;
            align-items: center;
            gap: clamp(18px, 3vw, 38px);
            color: rgb(var(--ink) / 0.9);
            font-size: 0.83rem;
            font-weight: 600;
        }

        :where(.page-home) .home-nav a,
:where(.page-home) .home-footer a {
            transition: opacity 0.18s ease;
        }

        :where(.page-home) .home-nav a:hover,
:where(.page-home) .home-footer a:hover {
            opacity: 0.7;
        }

        :where(.page-home) .home-nav-actions {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 20px;
            font-size: 0.83rem;
            font-weight: 600;
        }

        :where(.page-home) .home-user-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        :where(.page-home) .home-user-actions[hidden] {
            display: none;
        }

        :where(.page-home) .home-auth-status {
            display: inline-block;
            min-height: 1.3em;
            margin-top: 12px;
            color: rgba(255, 255, 255, 0.76);
            font-size: 0.78rem;
        }

        :where(.page-home) .home-auth-status:empty {
            display: none;
        }

        :where(.page-home) .home-link-button {
            display: inline-flex;
            min-height: 48px; /* 48dp / 44pt touch target */
            align-items: center;
            justify-content: center;
            padding: 0 18px;
            border: 1px solid rgba(255, 255, 255, 0.85);
            border-radius: 3px;
            color: #101216;
            background: #fff;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-align: center;
            transition: background 0.18s ease, color 0.18s ease;
        }

        :where(.page-home) .home-link-button:hover {
            color: #fff;
            background: transparent;
        }

        :where(.page-home) .home-link-button-outline {
            color: #fff;
            background: transparent;
        }

        :where(.page-home) .home-link-button-outline:hover {
            color: #101216;
            background: #fff;
        }

        :where(.page-home) .home-hero-copy {
            width: min(100%, 690px);
        }

        :where(.page-home) .home-eyebrow {
            margin-bottom: 18px;
            color: rgba(255, 255, 255, 0.84);
            font-size: 0.77rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        :where(.page-home) .home-hero h1 {
            max-width: 720px;
            margin-bottom: 18px;
            font-size: clamp(3rem, 7vw, 5.7rem);
            font-weight: 600;
            line-height: 0.99;
            letter-spacing: -0.055em;
            text-wrap: balance;
        }

        :where(.page-home) .home-hero-copy p {
            max-width: 620px;
            margin-bottom: 27px;
            color: rgba(255, 255, 255, 0.86);
            font-size: clamp(1rem, 1.8vw, 1.14rem);
            line-height: 1.75;
        }

        :where(.page-home) .home-hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        :where(.page-home) .home-hero-proof {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 4px 0 14px;
            padding: 6px 14px;
            border: 1px solid rgba(199, 210, 254, 0.28);
            border-radius: 999px;
            background: rgb(var(--canvas-rgb) / 0.55);
            color: #dfe5ff;
            font-size: 0.86rem;
            font-weight: 500;
            text-decoration: none;
            backdrop-filter: blur(8px);
        }

        :where(.page-home) .home-hero-proof::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #34d399;
            box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
        }

        :where(.page-home) .home-hero-proof:hover { border-color: #c7d2fe; }
            /* display:inline-flex above would otherwise override the hidden attribute. */
            :where(.page-home) .home-hero-proof[hidden] { display: none; }

        /* Pre-launch notice (js/launch-status.js): shown while no payment method is
           live, so the hero never offers passes that can't be bought (Consumer
           Protection Act [Ch. 14:44]). Same pill as the proof line, amber dot. */
        :where(.page-home) .home-hero-launch {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            max-width: 560px;
            margin: 4px 0 14px;
            padding: 8px 14px;
            border: 1px solid rgba(251, 191, 36, 0.32);
            border-radius: 14px;
            background: rgb(var(--canvas-rgb) / 0.6);
            color: #fde9b8;
            font-size: 0.86rem;
            line-height: 1.45;
            backdrop-filter: blur(8px);
        }
        :where(.page-home) .home-hero-launch::before {
            content: "";
            flex: none;
            width: 8px;
            height: 8px;
            margin-top: 6px;
            border-radius: 50%;
            background: #fbbf24;
            box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18);
        }
        :where(.page-home) .home-hero-launch[hidden] { display: none; }

        :where(.page-home) .home-hero-note {
            margin-top: 18px;
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.8rem;
        }

        :where(.page-home) .home-content {
            width: min(calc(100% - 64px), var(--home-content-width));
            margin: 0 auto;
        }

        :where(.page-home) .home-intro {
            display: grid;
            grid-template-columns: 0.85fr 1.15fr;
            gap: 60px;
            align-items: start;
            padding: 100px 0;
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-section-label {
            margin-bottom: 15px;
            color: #a5b4fc;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        :where(.page-home) .home-intro h2,
:where(.page-home) .home-section-heading h2,
:where(.page-home) .home-cta h2 {
            font-size: clamp(2rem, 4vw, 3.1rem);
            font-weight: 600;
            line-height: 1.08;
            letter-spacing: -0.045em;
            text-wrap: balance;
        }

        :where(.page-home) .home-intro p,
:where(.page-home) .home-section-heading p,
:where(.page-home) .home-card p,
:where(.page-home) .home-cta p {
            color: var(--color-text-medium);
            line-height: 1.8;
        }

        :where(.page-home) .home-intro p {
            font-size: 1.03rem;
        }

        :where(.page-home) .home-steps-section,
:where(.page-home) .home-access-section {
            padding: 86px 0;
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-section-heading {
            max-width: 680px;
            margin-bottom: 38px;
        }

        :where(.page-home) .home-section-heading h2 {
            margin-bottom: 14px;
        }

        :where(.page-home) .home-steps {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-step {
            min-height: 215px;
            padding: 26px 28px 30px 0;
        }

        :where(.page-home) .home-step + .home-step {
            padding-left: 28px;
            border-left: 1px solid var(--color-border);
        }

        :where(.page-home) .home-step-number {
            display: block;
            margin-bottom: 35px;
            color: #a5b4fc;
            font-size: 0.76rem;
            font-weight: 700;
            letter-spacing: 0.14em;
        }

        :where(.page-home) .home-step h3,
:where(.page-home) .home-card h3 {
            margin-bottom: 10px;
            font-size: 1.1rem;
            font-weight: 600;
        }

        :where(.page-home) .home-step p,
:where(.page-home) .home-card p {
            font-size: 0.9rem;
        }

        :where(.page-home) .home-access-section {
            display: grid;
            grid-template-columns: 0.8fr 1.2fr;
            gap: 64px;
            align-items: start;
        }

        :where(.page-home) .home-access-section .home-section-heading {
            margin-bottom: 0;
        }

        :where(.page-home) .home-access-list {
            display: grid;
            gap: 0;
            border-top: 1px solid var(--color-border);
        }

        :where(.page-home) .home-access-item {
            display: grid;
            grid-template-columns: minmax(110px, 0.55fr) 1fr;
            gap: 22px;
            padding: 20px 0;
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-access-item h3 {
            font-size: 1rem;
            font-weight: 600;
        }
:where(.page-home) .header-right i {
  cursor: pointer;
}
        :where(.page-home) .home-access-item p {
            color: var(--color-text-medium);
            font-size: 0.9rem;
            line-height: 1.7;
        }

        :where(.page-home) .home-host-cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px;
            margin: 80px 0;
            padding: clamp(28px, 5vw, 52px);
            border: 1px solid var(--color-border);
            background:
                radial-gradient(ellipse at 85% 0%, rgba(99, 102, 241, 0.16), transparent 52%),
                var(--color-panel);
        }

        :where(.page-home) .home-host-cta h2 {
            margin-bottom: 12px;
        }

        :where(.page-home) .home-host-cta p {
            max-width: 600px;
        }

        :where(.page-home) .home-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            width: min(calc(100% - 64px), var(--home-content-width));
            margin: 0 auto;
            padding: 24px 0 calc(24px + var(--safe-bottom));
            border-top: 1px solid var(--color-border);
            color: var(--color-text-medium);
            font-size: 0.82rem;
        }

        :where(.page-home) .home-footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 22px;
        }

        :where(.page-home) .home-page [id] {
            scroll-margin-top: 24px;
        }

        :where(.page-home) .home-story {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 540px;
            margin: 24px 0 86px;
            overflow: hidden;
            background: var(--color-panel);
        }

        :where(.page-home) .home-story-image {
            position: center;
            min-height: 360px;
            overflow: hidden;
            background: #242b36;
        }

        :where(.page-home) .home-story-image img {
            width: 100%;
            height: 100%;
            min-height: 360px;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
        }

        :where(.page-home) .home-story:hover .home-story-image img {
            transform: scale(1.035);
        }

        :where(.page-home) .home-story-copy {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: clamp(30px, 6vw, 74px);
        }

        :where(.page-home) .home-story-copy h2,
:where(.page-home) .home-plans-heading h2,
:where(.page-home) .home-coverage h2 {
            margin-bottom: 16px;
            font-size: clamp(2rem, 4vw, 3.1rem);
            font-weight: 600;
            line-height: 1.08;
            letter-spacing: -0.045em;
            text-wrap: balance;
        }

        :where(.page-home) .home-story-copy p,
:where(.page-home) .home-plans-heading p,
:where(.page-home) .home-coverage p {
            color: var(--color-text-medium);
            line-height: 1.8;
        }

        :where(.page-home) .home-coverage-countries {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 14px 0 8px;
        }

        :where(.page-home) .home-coverage-country {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 10px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            background: rgba(99, 102, 241, 0.1);
            color: var(--color-text-light);
            font-size: 0.82rem;
        }

        :where(.page-home) .home-coverage-country img {
            width: 20px;
            height: 15px;
            object-fit: cover;
            border-radius: 2px;
        }

        :where(.page-home) .home-coverage-status {
            min-height: 1.3em;
            color: var(--color-text-medium);
            font-size: 0.8rem;
        }

        :where(.page-home) .home-story-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            width: fit-content;
            margin-top: 22px;
            font-weight: 600;
        }

        :where(.page-home) .home-plans-section {
            padding: 86px 0;
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-plans-heading {
            display: grid;
            grid-template-columns: 1fr 0.8fr;
            gap: 48px;
            align-items: end;
            margin-bottom: 38px;
        }

        :where(.page-home) .home-plans-heading h2 {
            margin-bottom: 0;
        }

        :where(.page-home) .home-plan-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-plan {
            min-height: 210px;
            padding: 24px 22px 26px 0;
        }

        :where(.page-home) .home-plan + .home-plan {
            padding-left: 22px;
            border-left: 1px solid var(--color-border);
        }

        :where(.page-home) .home-plan-duration {
            display: block;
            margin-bottom: 34px;
            color: #a5b4fc;
            font-size: 0.76rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        :where(.page-home) .home-plan h3 {
            margin-bottom: 9px;
            font-size: 1.2rem;
            font-weight: 600;
        }

        :where(.page-home) .home-plan p {
            color: var(--color-text-medium);
            font-size: 0.88rem;
            line-height: 1.65;
        }

        :where(.page-home) .home-plans-note {
            margin-top: 18px;
            color: var(--color-text-medium);
            font-size: 0.82rem;
            line-height: 1.6;
        }

        :where(.page-home) .home-plan-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 14px;
            margin-top: 24px;
        }

        :where(.page-home) .home-text-link {
            color: var(--color-text-light);
            font-size: 0.86rem;
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 4px;
        }

        :where(.page-home) .home-customer-journey,
:where(.page-home) .home-faq-section {
            padding: 86px 0;
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-customer-journey .home-section-heading,
:where(.page-home) .home-faq-section .home-section-heading {
            max-width: 760px;
        }

        :where(.page-home) .home-customer-steps {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-customer-step {
            min-height: 205px;
            padding: 24px 22px 26px 0;
        }

        :where(.page-home) .home-customer-step + .home-customer-step {
            padding-left: 22px;
            border-left: 1px solid var(--color-border);
        }

        :where(.page-home) .home-customer-step span {
            display: block;
            margin-bottom: 30px;
            color: #a5b4fc;
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.13em;
        }

        :where(.page-home) .home-customer-step h3 {
            margin-bottom: 9px;
            font-size: 1rem;
            font-weight: 600;
        }

        :where(.page-home) .home-customer-step p,
:where(.page-home) .home-faq-item p {
            color: var(--color-text-medium);
            font-size: 0.88rem;
            line-height: 1.75;
        }

        :where(.page-home) .home-customer-note {
            margin-top: 18px;
            color: var(--color-text-medium);
            font-size: 0.82rem;
            line-height: 1.7;
        }

        :where(.page-home) .home-faq-list {
            border-top: 1px solid var(--color-border);
        }

        :where(.page-home) .home-faq-item {
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-faq-item summary {
            display: flex;
            min-height: 64px;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            color: var(--color-text-light);
            cursor: pointer;
            font-size: 0.98rem;
            font-weight: 600;
            list-style: none;
        }

        :where(.page-home) .home-faq-item summary::-webkit-details-marker {
            display: none;
        }

        :where(.page-home) .home-faq-item summary::after {
            flex: 0 0 auto;
            color: #a5b4fc;
            content: "+";
            font-size: 1.25rem;
        }

        :where(.page-home) .home-faq-item[open] summary::after {
            content: "−";
        }

        :where(.page-home) .home-faq-item p {
            max-width: 850px;
            padding: 0 42px 20px 0;
        }

        :where(.page-home) .home-faq-item a {
            color: var(--color-text-light);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        :where(.page-home) .home-coverage {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            padding: 86px 0;
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-platform-section {
            padding: 86px 0;
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-platform-intro {
            max-width: 760px;
            margin-bottom: 38px;
        }

        :where(.page-home) .home-platform-intro h2 {
            margin-bottom: 14px;
            font-size: clamp(2rem, 4vw, 3.1rem);
            font-weight: 600;
            line-height: 1.08;
            letter-spacing: -0.045em;
            text-wrap: balance;
        }

        :where(.page-home) .home-platform-intro p,
:where(.page-home) .home-platform-card p,
:where(.page-home) .home-industry-intro p,
:where(.page-home) .home-industry-card p,
:where(.page-home) .home-value-card p {
            color: var(--color-text-medium);
            line-height: 1.8;
        }

        :where(.page-home) .home-platform-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-platform-card {
            padding: 24px 24px 28px 0;
        }

        :where(.page-home) .home-platform-card + .home-platform-card {
            padding-left: 24px;
            border-left: 1px solid var(--color-border);
        }

        :where(.page-home) .home-platform-card h3 {
            margin-bottom: 12px;
            font-size: 1.05rem;
            font-weight: 600;
        }

        :where(.page-home) .home-platform-tag {
            display: inline-flex;
            margin-bottom: 25px;
            color: #a5b4fc;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        :where(.page-home) .home-platform-note {
            margin-top: 20px;
            padding: 16px 18px;
            border: 1px solid var(--color-border);
            color: var(--color-text-medium);
            font-size: 0.83rem;
            line-height: 1.7;
        }

        :where(.page-home) .home-industries-section,
:where(.page-home) .home-value-section,
:where(.page-home) .home-benefits-section {
            padding: 86px 0;
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-industry-intro,
:where(.page-home) .home-value-intro,
:where(.page-home) .home-benefits-intro {
            max-width: 760px;
            margin-bottom: 36px;
        }

        :where(.page-home) .home-industry-intro h2,
:where(.page-home) .home-value-intro h2,
:where(.page-home) .home-benefits-intro h2 {
            margin-bottom: 14px;
            font-size: clamp(2rem, 4vw, 3.1rem);
            font-weight: 600;
            line-height: 1.08;
            letter-spacing: -0.045em;
            text-wrap: balance;
        }

        :where(.page-home) .home-industry-grid,
:where(.page-home) .home-value-grid,
:where(.page-home) .home-benefits-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-top: 1px solid var(--color-border);
        }

        :where(.page-home) .home-industry-card,
:where(.page-home) .home-value-card,
:where(.page-home) .home-benefit-card {
            min-height: 190px;
            padding: 24px 24px 26px 0;
            border-bottom: 1px solid var(--color-border);
        }

        :where(.page-home) .home-industry-card:not(:nth-child(3n + 1)),
:where(.page-home) .home-value-card:not(:nth-child(3n + 1)),
:where(.page-home) .home-benefit-card:not(:nth-child(3n + 1)) {
            padding-left: 24px;
            border-left: 1px solid var(--color-border);
        }

        :where(.page-home) .home-industry-card h3,
:where(.page-home) .home-value-card h3,
:where(.page-home) .home-benefit-card h3 {
            margin-bottom: 10px;
            font-size: 1.03rem;
            font-weight: 600;
        }

        :where(.page-home) .home-industry-card img {
            display: block;
            width: 100%;
            aspect-ratio: 1.8;
            margin-bottom: 19px;
            border: 1px solid var(--color-border);
            background: var(--color-raised);
            object-fit: cover;
        }

        :where(.page-home) .home-industry-card p,
:where(.page-home) .home-value-card p,
:where(.page-home) .home-benefit-card p {
            font-size: 0.88rem;
        }

        :where(.page-home) .home-use-case-note,
:where(.page-home) .home-ai-status {
            margin-top: 18px;
            padding: 15px 18px;
            border: 1px solid var(--color-border);
            color: var(--color-text-medium);
            font-size: 0.82rem;
            line-height: 1.7;
        }

        :where(.page-home) .home-ai-status strong {
            color: var(--color-text-light);
        }

        :where(.page-home) .home-inline-link {
            color: var(--color-text-light);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        :where(.page-home) .home-partner-flow {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0;
            margin-top: 30px;
        }

        :where(.page-home) .home-partner-step {
            padding: 18px 20px 0 0;
        }

        :where(.page-home) .home-partner-step + .home-partner-step {
            padding-left: 20px;
            border-left: 1px solid var(--color-border);
        }

        :where(.page-home) .home-partner-step span {
            display: block;
            margin-bottom: 12px;
            color: #a5b4fc;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
        }

        :where(.page-home) .home-partner-step h3 {
            margin-bottom: 8px;
            font-size: 0.95rem;
        }

        :where(.page-home) .home-partner-step p {
            color: var(--color-text-medium);
            font-size: 0.82rem;
            line-height: 1.65;
        }

        :where(.page-home) .home-signal-art {
            position: relative;
            display: grid;
            min-height: 310px;
            place-items: center;
            overflow: hidden;
            border: 1px solid var(--color-border);
            background:
                radial-gradient(ellipse at center, rgba(99, 102, 241, 0.2), transparent 62%),
                var(--color-panel);
        }

        :where(.page-home) .home-signal-art svg {
            width: min(78%, 330px);
            height: auto;
            overflow: visible;
        }

        :where(.page-home) .home-signal-ring {
            fill: none;
            stroke: #818cf8;
            stroke-width: 1.5;
            transform-origin: 160px 150px;
            animation: home-signal-pulse 3.6s ease-out infinite;
        }

        :where(.page-home) .home-signal-ring:nth-of-type(2) { animation-delay: 0.9s; }
        :where(.page-home) .home-signal-ring:nth-of-type(3) { animation-delay: 1.8s; }

        :where(.page-home) .home-coverage-status {
            display: inline-flex;
            width: fit-content;
            margin-top: 20px;
            padding: 8px 11px;
            border: 1px solid var(--color-border);
            color: var(--color-text-medium);
            font-size: 0.8rem;
        }

        :where(.page-home) .home-payment-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 24px;
        }

        :where(.page-home) .home-payment-heading {
            margin: 28px 0 0;
            font-size: 0.95rem;
        }

        :where(.page-home) .home-payment-method {
            display: inline-flex;
            min-height: 42px;
            align-items: center;
            gap: 9px;
            padding: 0 13px;
            border: 1px solid var(--color-border);
            background: var(--color-panel);
            font-size: 0.82rem;
            font-weight: 600;
        }

        :where(.page-home) .home-payment-mark {
            display: inline-grid;
            width: 24px;
            height: 18px;
            place-items: center;
            border-radius: 3px;
            color: #fff;
            background: #344054;
            font-size: 0.62rem;
            font-weight: 800;
        }

        :where(.page-home) .home-bottom-cta {
            margin: 80px 0;
        }

        :where(.page-home) .home-footer {
            display: block;
            width: 100%;
            padding: 54px max(32px, calc((100vw - var(--home-content-width)) / 2)) calc(24px + var(--safe-bottom));
            border-top: 1px solid var(--color-border);
            background: var(--color-panel);
        }

        :where(.page-home) .home-footer-grid {
            display: grid;
            grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
            gap: 36px;
            width: min(100%, var(--home-content-width));
            margin: 0 auto 42px;
        }

        :where(.page-home) .home-footer-brand {
            margin-bottom: 13px;
            color: var(--color-text-light);
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: 0.12em;
        }

        :where(.page-home) .home-footer-about p,
:where(.page-home) .home-footer-column p,
:where(.page-home) .home-newsletter-note {
            color: var(--color-text-medium);
            font-size: 0.84rem;
            line-height: 1.75;
        }

        :where(.page-home) .home-footer-column h2 {
            margin-bottom: 15px;
            color: var(--color-text-light);
            font-size: 0.9rem;
            font-weight: 600;
        }

        :where(.page-home) .home-footer-column ul {
            display: grid;
            gap: 11px;
            padding: 0;
            list-style: none;
        }

        :where(.page-home) .home-footer-column a {
            color: var(--color-text-medium);
            font-size: 0.84rem;
        }

        :where(.page-home) .home-newsletter {
            display: grid;
            gap: 8px;
            margin-top: 13px;
        }

        :where(.page-home) .home-newsletter-row {
            display: flex;
            gap: 8px;
        }

        :where(.page-home) .home-newsletter-row input[type="email"] {
            width: 100%;
            min-width: 0;
            min-height: 42px;
            padding: 0 12px;
            border: 1px solid var(--color-border);
            border-radius: 3px;
            color: var(--color-text-light);
            background: var(--color-panel);
            opacity: 0.7;
        }

        :where(.page-home) .home-newsletter-consent {
            display: flex;
            align-items: flex-start;
            gap: 7px;
            color: var(--color-text-medium);
            font-size: 0.72rem;
            line-height: 1.4;
        }

        :where(.page-home) .home-newsletter-consent input {
            margin-top: 2px;
        }

        :where(.page-home) .home-newsletter button {
            flex: 0 0 auto;
            min-height: 42px;
            padding: 0 13px;
            border: 0;
            border-radius: 3px;
            color: #101216;
            background: #fff;
            font-size: 0.78rem;
            font-weight: 700;
            opacity: 0.65;
        }

        :where(.page-home) .home-newsletter-note {
            margin-top: 9px;
            font-size: 0.75rem;
        }

        :where(.page-home) .home-footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            width: min(100%, var(--home-content-width));
            margin: 0 auto;
            padding-top: 20px;
            border-top: 1px solid var(--color-border);
            color: var(--color-text-medium);
            font-size: 0.8rem;
        }

        :where(.page-home) .home-footer-links {
            gap: 20px;
        }

        /* No scroll reveal (taste motion rules): sections stand as written;
           motion lives in the hover/press layer, not in scrolling. */

        @media (max-width: 1040px) {
            :where(.page-home) .home-header {
                --home-gutter: 20px;
                min-height: 74px;
                gap: 16px;
            }

            :where(.page-home) .home-nav {
                display: none;
            }

        }

        @media (max-width: 800px) {
            :where(.page-home) .home-hero {
                min-height: min(760px, 100vh);
                min-height: min(760px, 100svh);
                padding: 130px 32px 76px;
            }

            :where(.page-home) .home-hero-shade {
                background:
                    linear-gradient(90deg, rgba(4, 7, 10, 0.73), rgba(4, 7, 10, 0.2)),
                    linear-gradient(0deg, rgba(4, 7, 10, 0.75), rgba(4, 7, 10, 0.03) 82%);
            }

            :where(.page-home) .home-content,
:where(.page-home) .home-footer {
                width: calc(100% - 48px);
            }

            :where(.page-home) .home-footer {
                width: 100%;
                padding: 44px 24px calc(24px + var(--safe-bottom));
            }

            :where(.page-home) .home-intro,
:where(.page-home) .home-access-section,
:where(.page-home) .home-story,
:where(.page-home) .home-coverage,
:where(.page-home) .home-plans-heading {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            :where(.page-home) .home-story {
                margin: 0 0 68px;
            }

            :where(.page-home) .home-story-copy {
                padding: 30px;
            }

            :where(.page-home) .home-plan-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            :where(.page-home) .home-plan:nth-child(3) {
                padding-left: 0;
                border-left: 0;
                border-top: 1px solid var(--color-border);
            }

            :where(.page-home) .home-plan:nth-child(4) {
                border-top: 1px solid var(--color-border);
            }

            :where(.page-home) .home-coverage {
                padding: 68px 0;
            }

            :where(.page-home) .home-footer-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            :where(.page-home) .home-intro {
                padding: 70px 0;
            }

            :where(.page-home) .home-steps-section,
:where(.page-home) .home-access-section {
                padding: 68px 0;
            }

            :where(.page-home) .home-step {
                padding-right: 18px;
            }

            :where(.page-home) .home-step + .home-step {
                padding-left: 18px;
            }

            :where(.page-home) .home-host-cta {
                align-items: flex-start;
                flex-direction: column;
                margin: 60px 0;
            }

            :where(.page-home) .home-platform-grid {
                grid-template-columns: 1fr;
            }

            :where(.page-home) .home-industry-grid,
:where(.page-home) .home-value-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            :where(.page-home) .home-customer-steps {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            :where(.page-home) .home-customer-step:nth-child(3) {
                padding-left: 0;
                border-left: 0;
                border-top: 1px solid var(--color-border);
            }

            :where(.page-home) .home-customer-step:nth-child(4) {
                border-top: 1px solid var(--color-border);
            }

            :where(.page-home) .home-platform-card,
:where(.page-home) .home-platform-card + .home-platform-card {
                padding: 22px 0;
                border-left: 0;
                border-bottom: 1px solid var(--color-border);
            }

            :where(.page-home) .home-platform-card:last-child {
                border-bottom: 0;
            }

            :where(.page-home) .home-industry-card:not(:nth-child(3n + 1)),
:where(.page-home) .home-value-card:not(:nth-child(3n + 1)) {
                padding-left: 18px;
                border-left: 1px solid var(--color-border);
            }

            :where(.page-home) .home-industry-card:nth-child(2n + 1),
:where(.page-home) .home-value-card:nth-child(2n + 1) {
                padding-left: 0;
                border-left: 0;
            }

            :where(.page-home) .home-partner-flow {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: 20px;
            }

            :where(.page-home) .home-partner-step:nth-child(3) {
                padding-left: 0;
                border-left: 0;
            }
        }

        @media (max-width: 560px) {
            :where(.page-home) .home-header {
                --home-gutter: 16px;
                min-height: 68px;
            }

            :where(.page-home) .home-brand {
                gap: 8px;
                font-size: 0.72rem;
                letter-spacing: 0.1em;
            }

            :where(.page-home) .home-brand img {
                width: 32px;
                height: 32px;
            }

            :where(.page-home) .home-nav-actions {
                display: none;
            }

            :where(.page-home) .home-hero {
                min-height: 720px;
                min-height: 94svh;
                padding: 120px 24px 58px;
            }

            :where(.page-home) .home-hero-photo {
                object-position: 51% center;
            }

            :where(.page-home) .home-hero h1 {
                font-size: clamp(2.8rem, 13vw, 4.3rem);
            }

            :where(.page-home) .home-hero-copy p {
                font-size: 0.98rem;
            }

            :where(.page-home) .home-hero-actions {
                align-items: stretch;
                flex-direction: column;
                max-width: 310px;
            }

            :where(.page-home) .home-content {
                width: calc(100% - 40px);
            }

            :where(.page-home) .home-footer {
                width: 100%;
                padding: 40px 20px calc(20px + var(--safe-bottom));
            }

            :where(.page-home) .home-steps {
                grid-template-columns: 1fr;
            }

            :where(.page-home) .home-step,
:where(.page-home) .home-step + .home-step {
                min-height: auto;
                padding: 22px 0;
                border-left: 0;
            }

            :where(.page-home) .home-step-number {
                margin-bottom: 16px;
            }

            :where(.page-home) .home-access-item {
                grid-template-columns: 1fr;
                gap: 7px;
            }

            :where(.page-home) .home-host-cta {
                margin: 48px 0;
                padding: 26px 22px;
            }

            :where(.page-home) .home-footer {
                align-items: flex-start;
                flex-direction: column;
            }

            :where(.page-home) .home-footer-grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            :where(.page-home) .home-footer-bottom {
                align-items: flex-start;
                flex-direction: column;
            }

            :where(.page-home) .home-plan,
:where(.page-home) .home-plan + .home-plan {
                min-height: 185px;
                padding: 20px 12px 20px 0;
            }

            :where(.page-home) .home-plan:nth-child(even) {
                padding-left: 12px;
            }

            :where(.page-home) .home-plan-duration {
                margin-bottom: 24px;
            }

            :where(.page-home) .home-signal-art {
                min-height: 250px;
            }

            :where(.page-home) .home-partner-flow {
                grid-template-columns: 1fr;
            }

            :where(.page-home) .home-customer-steps {
                grid-template-columns: 1fr;
            }

            :where(.page-home) .home-customer-step,
:where(.page-home) .home-customer-step + .home-customer-step,
:where(.page-home) .home-customer-step:nth-child(3),
:where(.page-home) .home-customer-step:nth-child(4) {
                min-height: 0;
                padding: 20px 0;
                border-top: 1px solid var(--color-border);
                border-left: 0;
            }

            :where(.page-home) .home-customer-step:first-child {
                border-top: 0;
            }

            :where(.page-home) .home-customer-step span {
                margin-bottom: 14px;
            }

            :where(.page-home) .home-industries-section,
:where(.page-home) .home-value-section,
:where(.page-home) .home-benefits-section,
:where(.page-home) .home-platform-section,
:where(.page-home) .home-plans-section,
:where(.page-home) .home-customer-journey,
:where(.page-home) .home-faq-section {
                padding: 64px 0;
            }

            :where(.page-home) .home-industry-grid,
:where(.page-home) .home-value-grid,
:where(.page-home) .home-benefits-grid {
                grid-template-columns: 1fr;
            }

            :where(.page-home) .home-industry-card,
:where(.page-home) .home-industry-card:not(:nth-child(3n + 1)),
:where(.page-home) .home-industry-card:nth-child(2n + 1),
:where(.page-home) .home-value-card,
:where(.page-home) .home-value-card:not(:nth-child(3n + 1)),
:where(.page-home) .home-value-card:nth-child(2n + 1),
:where(.page-home) .home-benefit-card,
:where(.page-home) .home-benefit-card:not(:nth-child(3n + 1)),
:where(.page-home) .home-benefit-card:nth-child(2n + 1) {
                min-height: 0;
                padding: 20px 0;
                border-left: 0;
            }

            :where(.page-home) .home-partner-step,
:where(.page-home) .home-partner-step + .home-partner-step {
                padding: 16px 0;
                border-left: 0;
                border-top: 1px solid var(--color-border);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html:where(.page-home) {
                scroll-behavior: auto;
            }

            :where(.page-home) *,
:where(.page-home) *::before,
:where(.page-home) *::after {
                transition-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }
        }

/* ── index.html (html.page-index) ── */
:where(.page-index) #authScreen,
:where(.page-index) #mainApp,
:where(.page-index) #mainHeader {
        display: none; 
    }

/* ── map.html (html.page-map) ── */
:root:where(.page-map) {
            /* ── Map-page design tokens ── */
            --primary: #6366f1;
            --primary-glow: rgba(99, 102, 241, 0.4);
            --success: #22c55e;
            --warning: #f59e0b;
            --danger: #ef4444;
            --info: #38bdf8;
            --bg-dark: #070a0f;
            --panel-bg: rgba(13, 17, 23, 0.92);
            --border: rgb(var(--ink) / 0.08);
            --text-main: #f4f4f5;
            --text-dim: #94a3b8;

            /* ── Aliases matching index.css tokens (for shared components) ── */
            --color-background: #070A0F;
            --color-panel: #0E1117;
            --color-sidebar: #080B10;
            --color-bg-glass: rgba(10, 13, 20, 0.88);
            --color-surface: rgb(var(--ink) / 0.04);
            --color-surface-hover: rgb(var(--ink) / 0.07);
            --color-text-light: #F5F7FA;
            --color-text-medium: #8A94A6;
            --color-text-muted: #808A9C;
            --color-border: rgb(var(--ink) / 0.08);
            --color-border-hover: rgb(var(--ink) / 0.16);
            --color-active: rgb(var(--ink) / 0.06);
            --color-accent: #6366f1;
            --color-accent-dim: #4f46e5;
            --color-accent-glow: rgba(99, 102, 241, 0.30);
            --color-accent-subtle: rgba(99, 102, 241, 0.10);
            --color-success: rgba(22, 101, 52, 0.4);
            --color-success-text: #4ADE80;
            --color-danger: rgba(127, 29, 29, 0.4);
            --color-danger-text: #FC8181;
            --color-info: rgba(99, 102, 241, 0.15);
            --color-info-text: #818CF8;
            --color-primary: #ffffff;
            --color-warning-text: #FBBF24;
            --radius-sm: 6px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-pill: 999px;
            --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgb(var(--ink) / 0.05);
            --shadow-modal: 0 24px 80px rgba(0,0,0,0.7);
            --shadow-btn: 0 4px 16px rgba(99,102,241,0.35);
            --transition-fast: all 0.15s ease;
            --transition-base: all 0.25s ease;
        }

        :where(.page-map) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :where(.page-map) body {
            font-family: var(--pc-font-system, system-ui, sans-serif);
            background: var(--bg-dark);
            color: var(--text-main);
            overflow: hidden;
        }

        /* --- UI Layout --- */
        :where(.page-map) .container {
            /* 100% not 100vw (no scrollbar overflow); dvh so the bottom controls
               stay above a phone browser's toolbar (body is overflow: hidden). */
            width: 100%;
            height: 100vh;
            height: 100dvh;
            position: relative;
            display: flex;
        }

        :where(.page-map) .sidebar {
            position: fixed;
            inset: 0 auto 0 0;
            width: min(360px, calc(100vw - 48px));
            height: 100%;
            background: var(--panel-bg);
            backdrop-filter: blur(16px);
            border-right: 1px solid var(--border);
            z-index: 1201;
            display: flex;
            flex-direction: column;
            padding: 18px;
            overflow-y: auto;
            transform: translateX(-105%);
            transition: transform 0.25s ease;
        }

        :where(.page-map) .sidebar.drawer-open {
            transform: translateX(0);
        }

        :where(.page-map) .drawer-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1200;
            border: 0;
            background: rgba(0, 0, 0, 0.55);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }

        :where(.page-map) .drawer-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        :where(.page-map) .header-brand {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 14px;
        }

        :where(.page-map) .drawer-close {
            width: 40px;
            height: 40px;
            flex: 0 0 auto;
            border: 1px solid var(--border);
            border-radius: 50%;
            background: transparent;
            color: var(--color-text-light);
            cursor: pointer;
        }

        :where(.page-map) .drawer-diagnostics {
            margin: 0 0 16px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: rgb(var(--ink) / 0.03);
        }

        :where(.page-map) .drawer-diagnostics h2 {
            margin: 0 0 6px;
            color: var(--color-text-light);
            font-size: 0.88rem;
        }

        :where(.page-map) .drawer-diagnostics p {
            margin: 0 0 10px;
            color: var(--text-dim);
            font-size: 0.76rem;
            line-height: 1.4;
        }

        :where(.page-map) .drawer-diagnostics #mapDiagnosticsResult {
            margin-top: 9px;
            color: var(--color-text-light);
            font-size: 0.76rem;
            line-height: 1.5;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        :where(.page-map) .map-chat-modal {
            position: fixed;
            inset: 0;
            z-index: 1200;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(0, 0, 0, 0.72);
        }

        :where(.page-map) .map-chat-modal.active {
            display: flex;
        }

        :where(.page-map) .map-chat-card {
            display: flex;
            width: min(850px, 100%);
            height: min(680px, calc(100dvh - 36px));
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--color-panel);
            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
        }

        :where(.page-map) .map-chat-header {
            display: flex;
            min-height: 58px;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 18px;
            border-bottom: 1px solid var(--border);
        }

        :where(.page-map) .map-chat-header h2 {
            font-size: 1rem;
        }

        :where(.page-map) .map-chat-log {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 12px;
            overflow-y: auto;
            padding: 18px;
        }

        :where(.page-map) .map-chat-log .chat-message {
            display: flex;
            align-items: flex-end;
            gap: 8px;
        }

        :where(.page-map) .map-chat-log .chat-message.user {
            justify-content: flex-end;
        }

        :where(.page-map) .map-chat-log .bot-avatar {
            display: grid;
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            place-items: center;
            border-radius: 50%;
            background: #4f46e5;
            color: #fff;
        }

        :where(.page-map) .map-chat-log .bubble {
            max-width: min(78%, 600px);
            padding: 10px 13px;
            border: 1px solid var(--border);
            border-radius: 14px 14px 14px 4px;
            background: rgb(var(--ink) / 0.06);
            color: var(--text-main);
            font-size: 0.9rem;
            line-height: 1.5;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
        }

        :where(.page-map) .map-chat-log .chat-message.user .bubble {
            border-color: rgba(99, 102, 241, 0.45);
            border-radius: 14px 14px 4px 14px;
            background: rgba(99, 102, 241, 0.22);
        }

        :where(.page-map) .map-chat-composer {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            border-top: 1px solid var(--border);
        }

        :where(.page-map) .map-chat-composer input {
            min-width: 0;
            min-height: 42px;
            flex: 1;
            padding: 0 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            outline: none;
            background: var(--color-background);
            color: var(--text-main);
        }

        :where(.page-map) .map-chat-emoji-picker {
            display: none;
            flex-wrap: wrap;
            gap: 6px;
            padding: 10px 12px 0;
        }

        :where(.page-map) .map-chat-emoji-picker.active {
            display: flex;
        }

        :where(.page-map) .map-chat-emoji-picker button {
            padding: 5px 8px;
            border: 0;
            border-radius: 6px;
            background: rgb(var(--ink) / 0.08);
            cursor: pointer;
            font-size: 1.1rem;
        }

        @media (max-width: 560px) {
            :where(.page-map) .map-chat-modal {
                padding: 0;
            }

            :where(.page-map) .map-chat-card {
                width: 100%;
                height: 100dvh;
                border: 0;
                border-radius: 0;
            }

            :where(.page-map) .map-chat-log {
                padding: 14px;
            }
        }

        :where(.page-map) .header-brand h1 {
            font-size: 1.15rem;
            font-family: var(--pc-font-system, system-ui, sans-serif);
            font-weight: 700;
            background: linear-gradient(135deg, #a5b4fc 0%, #c084fc 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        :where(.page-map) .header-nav-link {
            font-size: 0.8rem;
            color: var(--text-dim);
            text-decoration: none;
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid var(--border);
            transition: 0.2s;
        }

        :where(.page-map) .header-nav-link:hover {
            color: var(--color-text-light);
            border-color: rgb(var(--ink) / 0.25);
            background: rgb(var(--ink) / 0.05);
        }

        /* Persistent hamburger: every navigation and map action lives in the drawer. */
        :where(.page-map) .map-top-nav {
            position: fixed;
            top: max(12px, env(safe-area-inset-top));
            right: 12px;
            z-index: 1100;
            display: flex;
            padding: 0;
            border-radius: 50%;
            background: transparent;
            backdrop-filter: none;
            box-shadow: none;
        }

        :where(.page-map) .map-menu-toggle {
            display: inline-flex;
            width: 48px;
            height: 48px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            border-radius: 50%;
            background: var(--panel-bg);
            color: #fff;
            cursor: pointer;
            font-size: 1.1rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
        }

        :where(.page-map) .header-right {
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
        }

        /* User Icon from home.html */
        :where(.page-map) .user-icon {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6366f1 0%, #818CF8 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
            border: 1.5px solid rgba(99, 102, 241, 0.4);
            box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
            transition: 0.2s;
            letter-spacing: 0;
            overflow: hidden;
            position: relative;
        }

        :where(.page-map) .user-icon:hover {
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
            transform: scale(1.05);
        }

        :where(.page-map) .user-icon:active {
            transform: scale(0.96);
        }

        :where(.page-map) .user-icon img,
:where(.page-map) .user-icon .user-avatar-photo {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            display: block;
        }

        /* Nav Cart — matches index.css .nav-cart circular style */

        :where(.page-map) .nav-cart-count {
            position: absolute;
            top: -4px;
            right: -4px;
            background: #ef4444;
            color: #fff;
            font-size: 0.68rem;
            font-weight: 700;
            min-width: 18px;
            height: 18px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
        }

        /* Toast notification — aligned to index.css .toast */
        :where(.page-map) .toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            padding: 12px 20px;
            border-radius: var(--radius-pill);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
            z-index: 9000;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.92rem;
            font-weight: 500;
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.3s, transform 0.3s;
            backdrop-filter: blur(16px);
            border: 1px solid rgb(var(--ink) / 0.12);
            background: rgb(var(--panel-rgb) / 0.95);
            color: var(--text-main);
            max-width: 340px;
            pointer-events: auto;
        }

        :where(.page-map) .toast.hidden {
            opacity: 0;
            transform: translateY(20px);
            pointer-events: none;
        }

        :where(.page-map) .toast.toast-success { border-left: 3px solid #22c55e; }
        :where(.page-map) .toast.toast-error   { border-left: 3px solid #ef4444; }
        :where(.page-map) .toast.toast-info    { border-left: 3px solid #38bdf8; }
        :where(.page-map) .toast.toast-warn    { border-left: 3px solid #f59e0b; }

        /* User Dropdown */
        :where(.page-map) .user-dropdown {
            position: absolute;
            top: 52px;
            right: 0;
            width: 260px;
            background: rgb(var(--panel-rgb) / 0.96);
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgb(var(--ink) / 0.04);
            backdrop-filter: blur(24px);
            z-index: 2000;
            display: none;
            overflow: hidden;
            animation: dropdownSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
            text-align: left;
        }

        :where(.page-map) .user-dropdown.active,
:where(.page-map) .user-dropdown.open {
            display: block;
        }

        :where(.page-map) .dropdown-header {
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
        }

        :where(.page-map) .dropdown-menu ul {
            list-style: none;
            padding: 6px;
            margin: 0;
        }

        :where(.page-map) .dropdown-menu li {
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 10px;
            transition: 0.2s;
            font-size: 0.85rem;
            color: var(--text-dim);
        }

        :where(.page-map) .dropdown-menu li:hover {
            background: rgb(var(--ink) / 0.06);
            color: var(--color-text-light);
        }

        :where(.page-map) .dropdown-menu li i {
            margin-right: 10px;
            width: 16px;
        }

        :where(.page-map) .dropdown-menu a {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            color: inherit;
            text-decoration: none;
        }

        /* View Toggle */
        :where(.page-map) .view-toggle {
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: rgba(0, 0, 0, 0.4);
            padding: 4px;
            border-radius: 8px;
            margin-bottom: 14px;
            border: 1px solid var(--border);
        }

        :where(.page-map) .view-btn {
            padding: 8px;
            border: none;
            background: transparent;
            color: var(--text-dim);
            cursor: pointer;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.82rem;
            transition: 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        :where(.page-map) .view-btn.active {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 14px var(--primary-glow);
        }

        /* Controls & Cards */
        :where(.page-map) .control-section {
            margin-bottom: 14px;
        }

        :where(.page-map) .section-label {
            display: block;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-dim);
            margin-bottom: 8px;
            font-weight: 700;
        }

        :where(.page-map) .input-group {
            display: flex;
            gap: 6px;
            margin-bottom: 8px;
        }

        :where(.page-map) input[type="text"] {
            flex: 1;
            background: rgb(var(--ink) / 0.04);
            border: 1px solid var(--border);
            padding: 9px 12px;
            border-radius: 8px;
            color: var(--color-text-light);
            font-size: 0.85rem;
            outline: none;
            transition: border-color 0.2s;
        }

        :where(.page-map) input[type="text"]:focus {
            border-color: var(--primary);
        }

        :where(.page-map) .btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 9px 14px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            transition: 0.2s;
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            text-decoration: none;
        }

        :where(.page-map) .btn:hover {
            opacity: 0.92;
            transform: translateY(-1px);
        }

        :where(.page-map) .btn.secondary {
            background: rgb(var(--ink) / 0.06);
            border: 1px solid var(--border);
            color: var(--text-main);
        }

        :where(.page-map) .btn.secondary:hover {
            background: rgb(var(--ink) / 0.1);
        }

        :where(.page-map) .btn.success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
        }

        :where(.page-map) .btn.warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }

        :where(.page-map) .btn.danger {
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.25);
        }

        /* Nearest Hotspot Card */
        :where(.page-map) .nearest-spot-card {
            background: linear-gradient(145deg, rgb(var(--panel-rgb) / 0.7) 0%, rgb(var(--canvas-rgb) / 0.85) 100%);
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 14px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        :where(.page-map) .nearest-spot-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, #6366f1, #38bdf8, #10b981);
        }

        :where(.page-map) .spot-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        :where(.page-map) .status-badge {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 999px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        :where(.page-map) .badge-compatible {
            background: rgba(34, 197, 94, 0.18);
            color: #4ade80;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        :where(.page-map) .badge-locked {
            background: rgba(245, 158, 11, 0.18);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        :where(.page-map) .badge-full {
            background: rgba(239, 68, 68, 0.18);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        :where(.page-map) .capacity-bar-track {
            height: 6px;
            background: rgb(var(--ink) / 0.08);
            border-radius: 4px;
            overflow: hidden;
            margin: 6px 0 10px 0;
        }

        :where(.page-map) .capacity-bar-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.4s ease, background-color 0.4s ease;
        }

        /* Marker List */
        :where(.page-map) .marker-list-container {
            flex: 1;
            overflow-y: auto;
            margin-top: 6px;
            padding-right: 2px;
        }

        :where(.page-map) .marker-item {
            background: rgb(var(--ink) / 0.03);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 12px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: border-color 0.2s, background 0.2s;
        }

        :where(.page-map) .marker-item:hover {
            border-color: rgba(99, 102, 241, 0.4);
            background: rgb(var(--ink) / 0.05);
        }

        :where(.page-map) .marker-item.is-nearest {
            border-color: var(--info);
            background: rgba(56, 189, 248, 0.06);
        }

        :where(.page-map) .marker-info h4 {
            font-size: 0.85rem;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        :where(.page-map) .marker-info p {
            font-size: 11px;
            color: var(--text-dim);
        }

        :where(.page-map) .marker-actions {
            display: flex;
            gap: 4px;
        }

        :where(.page-map) .action-btn {
            background: transparent;
            border: none;
            color: var(--text-dim);
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            transition: 0.2s;
        }

        :where(.page-map) .action-btn:hover {
            color: white;
            background: rgb(var(--ink) / 0.1);
        }

        /* Viewport & Canvas */
        :where(.page-map) .viewport {
            flex: 1;
            position: relative;
        }

        :where(.page-map) #canvas,
:where(.page-map) #map {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        :where(.page-map) .coordinates-overlay {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: var(--panel-bg);
            backdrop-filter: blur(12px);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            border: 1px solid var(--border);
            z-index: 900;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        /* User Pulse Marker for Leaflet */
        :where(.page-map) .user-pulse-marker {
            position: relative;
        }

        :where(.page-map) .user-pulse-dot {
            width: 16px;
            height: 16px;
            background: #38bdf8;
            border-radius: 50%;
            border: 3px solid #ffffff;
            box-shadow: 0 0 12px #38bdf8;
        }

        :where(.page-map) .user-pulse-ring {
            position: absolute;
            top: -8px;
            left: -8px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid #38bdf8;
            animation: radarPulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }

        @keyframes radarPulse {
            0% {
                transform: scale(0.5);
                opacity: 1;
            }

            100% {
                transform: scale(2.2);
                opacity: 0;
            }
        }

        :where(.page-map) .leaflet-container {
            background: var(--bg-dark);
        }

        /* Modal Dialog */
        :where(.page-map) .qr-modal {
            position: fixed;
            inset: 0; /* the visible viewport; 100vh runs under a phone toolbar */
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 3000;
        }

        :where(.page-map) .qr-modal.active {
            display: flex;
        }

        :where(.page-map) .qr-card {
            background: var(--color-panel);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
            width: 90%;
            max-width: 400px;
            text-align: center;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
        }

        @media (prefers-reduced-motion: reduce) {
            :where(.page-map) .sidebar,
:where(.page-map) .drawer-backdrop {
                transition: none;
            }
        }

/* ── privacy.html (html.page-privacy) ── */
/* ── Page layout (adapts index.css tokens/components to a long-form legal page) ── */
    :where(.page-privacy) .card h2 { font-size: 13px; letter-spacing: 1.5px; }

    :where(.page-privacy) .tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; }
    :where(.page-privacy) .tag-auto { background: rgb(var(--info-tint) / 0.5); color: var(--color-info-text); }
    :where(.page-privacy) .tag-req { background: rgba(128, 48, 48, 0.5); color: var(--color-danger-text); }
    :where(.page-privacy) .tag-opt { background: rgba(32, 80, 32, 0.5); color: var(--color-success-text); }

/* ── profile.html (html.page-profile) ── */
:where(.page-profile) .pc-main { width: min(1200px, 100%); padding: 40px 48px calc(96px + env(safe-area-inset-bottom, 0px)); }
:where(.page-profile) .profile-summary { max-width: 760px; margin: 0 0 16px; }
:where(.page-profile) .settings-profile-text .profile-account-reference { margin: 8px 0 0; color: var(--color-text-medium); font-size: 0.8rem; }
:where(.page-profile) .profile-account-reference strong { margin-left: 4px; color: var(--color-text-light); font-variant-numeric: tabular-nums; }
:where(.page-profile) .profile-settings-link { justify-self: end; }
:where(.page-profile) .pf-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); max-width: 1000px; }
:where(.page-profile) .pf-card { margin: 0; }
    @media (min-width: 900px) { :where(.page-profile) .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    :where(.page-profile) .pf-card h2 { margin: 0 0 12px; font-size: 1.05rem; }
    :where(.page-profile) .pf-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--pc-line); }
    :where(.page-profile) .pf-row:last-of-type { border-bottom: 0; }
    :where(.page-profile) .pf-row dt { color: var(--pc-muted); }
    :where(.page-profile) .pf-row dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
    :where(.page-profile) .pf-balance { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0 12px; }
    :where(.page-profile) .pf-form { display: grid; gap: 6px; margin-top: 8px; }
    :where(.page-profile) .pf-form label { font-size: 0.85rem; color: var(--pc-muted); }
    :where(.page-profile) .pf-form input {
      min-height: 44px; padding: 8px 12px; border: 1px solid var(--pc-line-strong); border-radius: 12px;
      background: rgba(0, 0, 0, 0.25); color: var(--pc-text); font: inherit;
    }
    :where(.page-profile) .pf-form input:focus-visible,
:where(.page-profile) .pf-card .pc-btn:focus-visible { outline: 2px solid var(--pc-accent-2); outline-offset: 2px; }
    :where(.page-profile) .pf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
    :where(.page-profile) .pf-status { min-height: 1.3em; margin: 8px 0 0; font-size: 0.9rem; }
    :where(.page-profile) .pf-status.is-error { color: #f87171; }
    :where(.page-profile) .pf-status.is-ok { color: #4ade80; }
@media (max-width: 760px) {
  :where(.page-profile) .pc-main { padding: 28px 20px calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 520px) {
  :where(.page-profile) .pc-main { padding: 24px 16px calc(88px + env(safe-area-inset-bottom, 0px)); }
  :where(.page-profile) .settings-profile { grid-template-columns: auto minmax(0, 1fr); }
  :where(.page-profile) .profile-settings-link { grid-column: 1 / -1; justify-self: start; }
}

/* ── requests.html (html.page-requests) ── */
:where(.page-requests) .rq-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--pc-line); border-radius: 999px; background: rgb(var(--ink) / .03); }
    :where(.page-requests) .rq-tabs button { min-height: var(--pc-tap); padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--pc-muted); font: 600 14px var(--pc-font); cursor: pointer; }
    /* Neutral ink tint + text colour: white-on-lavender was ~1.4:1 in light theme. */
    :where(.page-requests) .rq-tabs button[aria-selected="true"] { background: rgb(var(--ink) / .12); color: var(--color-text-light); }
    :where(.page-requests) .rq-grid { display: grid; gap: 16px; }
    @media (min-width: 900px) { :where(.page-requests) .rq-grid { grid-template-columns: 360px minmax(0, 1fr); align-items: start; } }
    :where(.page-requests) .rq-form { display: grid; gap: 10px; }
    :where(.page-requests) .rq-form label { display: grid; gap: 4px; font-size: 13px; color: var(--pc-muted); }
    :where(.page-requests) .rq-form input,
:where(.page-requests) .rq-form select,
:where(.page-requests) .rq-form textarea,
:where(.page-requests) .rq-inline input {
      min-height: 44px; padding: 8px 12px; border: 1px solid var(--pc-line-strong); border-radius: 12px;
      background: rgba(0,0,0,.25); color: var(--pc-text); font: inherit; width: 100%;
    }
    :where(.page-requests) .rq-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    :where(.page-requests) .rq-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
    :where(.page-requests) .rq-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
    :where(.page-requests) .rq-head h3 { margin: 0; font-size: 1rem; }
    :where(.page-requests) .rq-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
    :where(.page-requests) .rq-bid { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--pc-line); }
    :where(.page-requests) .rq-bid b { font-size: 1.05rem; }
    :where(.page-requests) .rq-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    :where(.page-requests) .rq-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    :where(.page-requests) .rq-inline input { flex: 1 1 140px; width: auto; }
    :where(.page-requests) .rq-banner { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
    :where(.page-requests) .rq-banner .pc-btn { margin-top: 8px; }
    :where(.page-requests) .rq-status-open { color: var(--pc-good); } :where(.page-requests) .rq-status-accepted,
:where(.page-requests) .rq-status-paid { color: var(--pc-accent-soft); }
    :where(.page-requests) .rq-msg { min-height: 1.3em; font-size: 13px; color: var(--pc-muted); margin: 6px 0 0; }
    :where(.page-requests) .pc-btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }

/* ── status.html (html.page-status) ── */
/* Captive Portal Status Overrides & Modifiers */
        :where(.page-status) .main-header {
            display: flex !important;
            /* Always visible on status page */
            background: var(--color-bg-glass) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
        }

        :where(.page-status) .dashboard-container {
            display: flex !important;
            /* Always visible on status page */
        }

        :where(.page-status) #authScreen {
            position: fixed;
            inset: 0; /* the visible viewport; 100vh runs under a phone toolbar */
            background: rgb(var(--panel-rgb) / 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        :where(.page-status) .auth-card {
            position: relative;
        }

        /* Firebase Prompt Card styling */
        :where(.page-status) .sync-prompt-card {
            border: 1px dashed var(--color-primary);
            background: rgba(0, 198, 255, 0.03) !important;
            box-shadow: 0 4px 30px rgba(0, 198, 255, 0.05) !important;
            margin-bottom: 25px;
            animation: fadeIn 0.5s ease;
        }

        :where(.page-status) .firebase-only {
            transition: opacity 0.3s ease;
        }

/* ── terms.html (html.page-terms) ── */
/* ── Page layout (adapts index.css tokens/components to a long-form legal page) ── */

    :where(.page-terms) .accept-banner {
      background: rgb(var(--info-tint) / 0.35);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 16px 20px;
      margin-bottom: 24px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    :where(.page-terms) .accept-banner .icon { font-size: 20px; flex-shrink: 0; }
    :where(.page-terms) .accept-banner .text { font-size: 13px; color: var(--color-text-medium); line-height: 1.65; }
    :where(.page-terms) .accept-banner .text strong { color: var(--color-text-light); }

    :where(.page-terms) .toc {
      background: var(--color-sidebar);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 18px 20px;
      margin-bottom: 24px;
      columns: 2;
      column-gap: 20px;
    }
    @media (max-width: 480px) { :where(.page-terms) .toc { columns: 1; } }
    :where(.page-terms) .toc-title { font-size: 11px; color: var(--color-info-text); letter-spacing: 2px; margin-bottom: 12px; column-span: all; font-weight: 600; }
    :where(.page-terms) .toc a { display: block; color: var(--color-text-medium); font-size: 12px; padding: 3px 0; }
    :where(.page-terms) .toc a:hover { color: var(--color-text-light); }
    /* Touch screens: 44px rows so a thumb hits the section it means; mouse keeps the compact list. */
    @media (pointer: coarse) { :where(.page-terms) .toc a { display: flex; align-items: center; min-height: 44px; padding: 0; } }
    :where(.page-terms) .note-warn { background: rgb(220 38 38 / 0.16); color: var(--color-danger-text); }

/* ── Account menu (js/account-menu.js on terms/privacy; same markup as home) ── */
.account-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.account-menu-header { display: flex; align-items: center; gap: 12px; }
.account-menu-who { min-width: 0; }
.account-menu-name,
.account-menu-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-email { margin: 0; font-size: 0.8rem; opacity: 0.8; }

/* ── home.html header: account then menu, together at the right edge,
   the same order as the legal pages (markup has the menu button first). ── */
:where(.page-home) .home-header .header-right { order: 2; margin-left: auto; }
:where(.page-home) .home-header #siteMenuButton { order: 3; margin-left: 8px; }

/* ── map.html top bar: tools · account · menu, one 44px target size and
   one gap, the same controls the other pages use. ── */
:where(.page-map) .map-top-nav { align-items: center; gap: 8px; }
:where(.page-map) .map-top-nav .map-menu-toggle,
:where(.page-map) .map-top-nav [data-account-menu] .user-icon,
:where(.page-map) .map-top-nav #siteMenuButton {
  width: var(--pc-tap);
  height: var(--pc-tap);
  flex-shrink: 0;
}
/* The globe stays dark in both themes, so the tools and menu buttons over it
   are dark glass with a light icon in both themes too (they vanished in light). */
:where(.page-map) .map-top-nav .map-menu-toggle,
:where(.page-map) .map-top-nav #siteMenuButton {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 50%;
  background: rgb(10 14 22 / 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
}

/* ==========================================================================
   PAGE LAYER: public pages, Starlink × ChatGPT.
   Every page outside the dashboard (home, sign-in, register, chat, profile,
   requests, storefront, legal, 404, map chrome). From Starlink's design
   language: a pure black canvas, a DIN-like grotesk (Barlow) with bold
   sentence-case headlines, solid white 4px buttons, a floating frosted
   header bar. From ChatGPT: neutral grey cards and inputs, quiet hairlines,
   no glow or shadow. Light theme inverts (white canvas, black buttons).
   Style only: no Starlink assets, copy or code.
   ========================================================================== */
html:is(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
  .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404, .page-map) {
  --ink: 255 255 255;
  --canvas-rgb: 0 0 0;
  --panel-rgb: 23 23 23;
  --color-background: #000000;
  --color-panel: #171717;
  --color-raised: #1f1f1f;
  --color-surface: rgb(255 255 255 / 0.05);
  --color-surface-hover: rgb(255 255 255 / 0.08);
  --color-text-light: #fafafa;
  --color-text-medium: #a3a3a3;
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-hover: rgb(255 255 255 / 0.2);
  --pc-surface: rgb(23 23 23 / 0.78);
  --pc-line: rgb(255 255 255 / 0.1);
  --pc-line-strong: rgb(255 255 255 / 0.22);
  --pc-shadow-1: none;
  --shadow-card: none;
  --pc-font-system: 'Barlow', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --pc-font: var(--pc-font-system);
  --sx-btn-bg: #fafafa;
  --sx-btn-fg: #000000;
  --sx-glass: rgb(24 24 24 / 0.72);
  background: var(--color-background);
}
html[data-theme="light"]:is(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
  .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404, .page-map) {
  --ink: 0 0 0;
  --canvas-rgb: 255 255 255;
  --panel-rgb: 247 247 247;
  --color-background: #ffffff;
  --color-panel: #f7f7f7;
  --color-raised: #ffffff;
  --color-surface: rgb(0 0 0 / 0.03);
  --color-surface-hover: rgb(0 0 0 / 0.06);
  --color-text-light: #0d0d0d;
  --color-text-medium: #5d5d5d;
  --color-border: rgb(0 0 0 / 0.1);
  --color-border-hover: rgb(0 0 0 / 0.18);
  --pc-surface: rgb(255 255 255 / 0.82);
  --pc-line: rgb(0 0 0 / 0.08);
  --pc-line-strong: rgb(0 0 0 / 0.18);
  --sx-btn-bg: #0d0d0d;
  --sx-btn-fg: #ffffff;
  --sx-glass: rgb(255 255 255 / 0.78);
}
:where(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
  .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404, .page-map) body {
  background: var(--color-background);
  font-family: var(--pc-font-system);
  letter-spacing: 0.005em;
}

/* Headlines: bold, sentence case, slightly tight (DIN feel). */
:where(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
  .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404) :is(h1, h2, h3) {
  font-family: var(--pc-font-system);
  font-weight: 700;
  letter-spacing: -0.01em;
}
html.page-home .home-hero h1 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; }

/* Buttons: solid white rectangle (black in light), bold 14px, 4px corners.
   html:is() outranks the shell/storefront and .look-* platform rules. */
html:is(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
  .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404, .page-map)
  :is(.pc-btn:not(.pc-btn-ghost), .btn.btn-primary, .home-link-button:not(.home-link-button-outline), .google-btn) {
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid var(--sx-btn-bg);
  border-radius: 4px;
  background: var(--sx-btn-bg);
  color: var(--sx-btn-fg);
  font-family: var(--pc-font-system);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: none;
  transform: none;
}
html:is(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
  .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404, .page-map)
  :is(.pc-btn-ghost, .home-link-button-outline, .btn:not(.btn-primary):not(.btn-danger)) {
  border-radius: 4px;
  border-color: var(--pc-line-strong);
  background: transparent;
  color: var(--color-text-light);
  box-shadow: none;
  font-weight: 700;
}
/* The home hero sits on a dark photo in both themes: keep its buttons light. */
html.page-home .home-hero .home-link-button:not(.home-link-button-outline) { background: #fafafa; border-color: #fafafa; color: #000; }
/* Doubled class on purpose: the rule above is (0,4,1) because :is() takes its
   heaviest argument (.btn:not():not()), so a plain (0,3,1) override lost in light theme. */
html.page-home .home-hero .home-link-button.home-link-button-outline { border-color: rgb(255 255 255 / 0.6); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  html:is(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
    .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404, .page-map)
    :is(.pc-btn, .btn, .home-link-button, .google-btn):hover {
    opacity: 0.86;
    box-shadow: none;
    transform: none;
  }
}

/* Floating frosted header bar on shell pages (Starlink's nav pill). */
@media (min-width: 781px) {
  html:is(.page-chat, .page-profile, .page-requests, .page-shop, .page-product, .page-order, .page-brand) .pc-header {
    top: calc(var(--titlebar-h, 0px) + 12px);
    width: min(calc(100% - 48px), 1130px);
    margin: 12px auto 0;
    border: 1px solid var(--pc-line);
    border-radius: 8px;
    background: var(--sx-glass);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
}
:where(.page-chat, .page-profile, .page-requests, .page-shop, .page-product, .page-order, .page-brand) .pc-brand {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* Cards and inputs: ChatGPT neutrals, no gradient edge, no glow. */
html:is(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
  .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404, .page-map)
  :is(.pc-card, .auth-card, .card) {
  border: 1px solid var(--pc-line);
  border-radius: 12px;
  background: var(--color-panel);
  box-shadow: none;
  backdrop-filter: none;
}
html:is(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
  .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404, .page-map)
  .pc-card::before { display: none; }
html:is(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
  .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404, .page-map)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  border-radius: 8px;
  border-color: var(--color-border);
  background: var(--color-raised);
  color: var(--color-text-light);
  font-family: var(--pc-font-system);
}
html:is(.page-home, .page-login, .page-register, .page-chat, .page-profile, .page-requests,
  .page-shop, .page-product, .page-order, .page-brand, .page-terms, .page-privacy, .page-404, .page-map)
  :is(input, select, textarea):focus-visible {
  border-color: var(--color-text-light);
  outline: none;
  box-shadow: 0 0 0 1px var(--color-text-light);
}

/* Home sections: Starlink's black bands with grey feature cards. */
html.page-home :is(.home-value-card, .home-benefit-card, .home-platform-card, .home-industry-card, .home-plan, .home-faq-item) {
  border: 1px solid var(--pc-line);
  border-radius: 12px;
  background: var(--color-panel);
  box-shadow: none;
}
html.page-home .home-eyebrow,
html.page-home .home-section-label { letter-spacing: 0.2em; font-weight: 600; }

/* ==========================================================================
   PAGE LAYER: dashboard (index, status), ChatGPT-style shell.
   Neutral greys instead of navy, a sidebar a shade off the main surface that
   visually runs full height, quiet 36px rows with a filled active state (no
   accent bar), a flat header, monochrome primary buttons, account at the
   bottom of the sidebar. Tokens are overridden here (html.page-* outranks
   :root), so every component on these pages follows. The wallet card keeps
   the brand gradient.
   ========================================================================== */
html.page-index,
html.page-status {
  --ink: 255 255 255;
  --canvas-rgb: 33 33 33;
  --panel-rgb: 40 40 40;
  --color-background: #212121;
  --color-panel: #2a2a2a;
  --color-raised: #2f2f2f;
  --color-sidebar: #181818;
  --color-surface: rgb(255 255 255 / 0.04);
  --color-surface-hover: rgb(255 255 255 / 0.07);
  --color-text-light: #ececec;
  --color-text-medium: #a3a3a3;
  --color-border: rgb(255 255 255 / 0.09);
  --shadow-card: none;
  --pc-primary-bg: #ececec;
  --pc-primary-fg: #0d0d0d;
  --pc-row-active: rgb(255 255 255 / 0.09);
  --pc-sidebar-w: 260px;
  background: var(--color-background);
}
html.page-index[data-theme="light"],
html.page-status[data-theme="light"] {
  --ink: 0 0 0;
  --canvas-rgb: 255 255 255;
  --panel-rgb: 255 255 255;
  --color-background: #ffffff;
  --color-panel: #ffffff;
  --color-raised: #ffffff;
  --color-sidebar: #f9f9f9;
  --color-surface: rgb(0 0 0 / 0.03);
  --color-surface-hover: rgb(0 0 0 / 0.05);
  --color-text-light: #0d0d0d;
  --color-text-medium: #5d5d5d;
  --color-border: rgb(0 0 0 / 0.1);
  --pc-primary-bg: #0d0d0d;
  --pc-primary-fg: #ffffff;
  --pc-row-active: rgb(0 0 0 / 0.07);
}
:where(.page-index, .page-status) body { background: var(--color-background); }

/* Monochrome primary action (ChatGPT's black / white button). */
:where(.page-index, .page-status) .btn.btn-primary,
:where(.page-index, .page-status) .btn-primary {
  background: var(--pc-primary-bg);
  color: var(--pc-primary-fg);
  box-shadow: none;
  border-radius: var(--radius-pill, 999px);
}
@media (hover: hover) and (pointer: fine) {
  :where(.page-index, .page-status) .btn-primary:hover {
    background: var(--pc-primary-bg);
    color: var(--pc-primary-fg);
    box-shadow: none;
    transform: none;
    opacity: 0.86;
  }
}
:where(.page-index, .page-status) .list-group,
:where(.page-index, .page-status) .settings-group { border-radius: 16px; }

/* Account home (index #home-section), ported from Starlink's account page:
   pure black canvas, a tinted banner, 32px title, a flat #121212 balance
   card with a light 36px amount and small outline buttons, a status card,
   and a 2-column grid of 1px-outlined 4px tiles (bold title, grey sub). */
html.page-index:not([data-theme="light"]) {
  --color-background: #000000;
  --color-sidebar: #000000;
  --color-panel: #121212;
  --color-raised: #181818;
  --canvas-rgb: 0 0 0;
  --panel-rgb: 18 18 18;
  --color-border: rgb(250 250 250 / 0.12);
  --color-text-light: #fafafa;
  --color-text-medium: #bdbdbd;
  --pc-row-active: rgb(255 255 255 / 0.14);
}
:where(.page-index) .acct-home { --acct-muted: rgb(var(--ink) / 0.7); --acct-line: rgb(var(--ink) / 0.12); }
:where(.page-index) .acct-home h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2px; }
:where(.page-index) .acct-home .account-info { margin-bottom: 16px; font-size: 0.875rem; }

.acct-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border-radius: 4px;
  background: rgb(var(--info-tint) / 0.08);
  border: 1px solid rgb(var(--info-tint) / 0.16);
}
.acct-banner-icon { flex: none; color: var(--color-text-light); font-size: 1.1rem; opacity: 0.8; }
.acct-banner-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.acct-banner-title { font-size: 0.875rem; font-weight: 700; color: var(--color-text-light); }
.acct-banner-sub { font-size: 0.8125rem; color: var(--acct-muted, var(--color-text-medium)); }
.acct-banner-action {
  flex: none;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--color-text-light);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.acct-balance {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  padding: 16px;
  /* ≈ #121212 on black; a soft grey on white */
  background: rgb(var(--ink) / 0.07);
  border-radius: 4px;
}
.acct-balance-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acct-balance-label { margin: 0; font-size: 0.875rem; color: var(--acct-muted, var(--color-text-medium)); }
.acct-balance-actions { display: flex; gap: 8px; }
.acct-ghost-btn {
  min-height: 32px;
  padding: 3px 12px;
  border: 1px solid var(--acct-line, var(--color-border));
  border-radius: 4px;
  background: none;
  color: var(--color-text-light);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  /* keep the global press `scale` in the list, or the press snaps */
  transition: scale var(--dur-press) var(--ease-standard), background-color var(--dur-small) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .acct-ghost-btn:hover { background: var(--color-surface-hover); }
}
.acct-ghost-btn:focus-visible, .acct-tile:focus-visible, .acct-banner-action:focus-visible { outline: 2px solid var(--color-text-light); outline-offset: 2px; }
.acct-balance-value {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

.acct-status {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--acct-line, var(--color-border));
  border-radius: 4px;
}
.acct-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acct-status-label { font-size: 0.875rem; font-weight: 700; color: var(--color-text-light); }
.acct-status-label i { margin-right: 8px; opacity: 0.56; }
.acct-status-value { font-size: 0.875rem; font-weight: 600; color: var(--color-text-light); }
.acct-status-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 0.8125rem; color: var(--acct-muted, var(--color-text-medium)); }

.acct-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.acct-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 16px;
  border: 1px solid var(--acct-line, var(--color-border));
  border-radius: 4px;
  background: none;
  color: var(--color-text-light);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: scale var(--dur-press) var(--ease-standard), background-color var(--dur-small) var(--ease-standard), border-color var(--dur-small) var(--ease-standard);
}
.acct-tile > i { flex: none; width: 24px; font-size: 1.15rem; text-align: center; opacity: 0.56; }
/* Hover only where a pointer hovers; on touch a tap would leave it stuck on. */
@media (hover: hover) and (pointer: fine) {
  .acct-tile:hover { background: var(--color-surface); border-color: rgb(var(--ink) / 0.24); }
  .acct-banner-action:hover { text-decoration: underline; }
}
.acct-tile-text { display: grid; gap: 2px; min-width: 0; }
.acct-tile-title { font-size: 1rem; font-weight: 700; }
.acct-tile-sub { font-size: 0.875rem; color: var(--color-text-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .acct-tiles { grid-template-columns: 1fr; gap: 10px; }
  .acct-tile { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-tile, .acct-ghost-btn { transition: none; }
}

@media (min-width: 781px) {
  html[data-sidebar="collapsed"]:is(.page-index, .page-status) { --pc-sidebar-w: 72px; }

  /* Flat header; its left part takes the sidebar tone so the sidebar reads
     as one full-height column with the wordmark at its top. */
  :where(.page-index, .page-status) .main-header {
    height: 56px;
    padding: 0 16px 0 0;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(to right, var(--color-sidebar) 0 var(--pc-sidebar-w), var(--color-background) var(--pc-sidebar-w));
    transition: background var(--dur-sheet) var(--ease-standard);
  }
  :where(.page-index, .page-status) .main-header .header-left {
    width: var(--pc-sidebar-w);
    padding-left: 20px;
    overflow: hidden;
    white-space: nowrap;
    transition: width var(--dur-sheet) var(--ease-standard);
  }
  [data-sidebar="collapsed"]:where(.page-index, .page-status) .main-header .logo { opacity: 0; pointer-events: none; }
  /* Account lives at the bottom of the sidebar on desktop. */
  :where(.page-index, .page-status) .main-header #navUsernameShort { display: none; }

  :where(.page-index, .page-status) .sidebar {
    width: var(--pc-sidebar-w);
    top: 56px;
    height: calc(100dvh - 56px);
    padding: 4px 8px 12px;
    border-right: 0;
    background: var(--color-sidebar);
  }
  :where(.page-index, .page-status) .sidebar ul { gap: 1px; }
  :where(.page-index, .page-status) .sidebar li {
    min-height: 44px;
    padding: 0 12px;
    gap: 12px;
    border: 0;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-text-light);
    letter-spacing: 0;
  }
  :where(.page-index, .page-status) .sidebar li i {
    width: 18px;
    margin-right: 0;
    font-size: 0.95rem;
    text-align: center;
    color: var(--color-text-medium);
    background: none;
  }
  :where(.page-index, .page-status) .sidebar li:hover { background: var(--color-surface-hover); color: var(--color-text-light); }
  :where(.page-index, .page-status) .sidebar li.active {
    padding-left: 10px;
    border: 0;
    background: var(--pc-row-active);
    color: var(--color-text-light);
    font-weight: 500;
  }
  :where(.page-index, .page-status) .sidebar li.active i { color: var(--color-text-light); background: none; }
  :where(.page-index, .page-status) .sidebar-toggle { margin: 0 0 6px 2px; border-radius: 10px; }
  [data-sidebar="collapsed"]:where(.page-index, .page-status) .sidebar { padding-inline: 12px; }
  [data-sidebar="collapsed"]:where(.page-index, .page-status) .sidebar li { padding: 0; }

  /* Account row pinned to the bottom. */
  :where(.page-index, .page-status) .sidebar-account {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--color-text-light);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  :where(.page-index, .page-status) .sidebar-account:hover { background: var(--color-surface-hover); }
  :where(.page-index, .page-status) .sidebar-account:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  :where(.page-index, .page-status) .sidebar-account-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #10a37f;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
  }
  :where(.page-index, .page-status) .sidebar-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
  :where(.page-index, .page-status) .sidebar-account-text { display: grid; min-width: 0; line-height: 1.25; }
  :where(.page-index, .page-status) .sidebar-account-name { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(.page-index, .page-status) .sidebar-account-meta { font-size: 0.75rem; color: var(--color-text-medium); }
  [data-sidebar="collapsed"]:where(.page-index, .page-status) .sidebar-account { justify-content: center; padding-inline: 0; }
  [data-sidebar="collapsed"]:where(.page-index, .page-status) .sidebar-account-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
}
/* The desktop platform layer (.look-desktop, later in the file) adds an
   accent bar and accent icon to the active row; this shell is monochrome.
   html:is(...) outranks it without !important. The app also stops being
   centred at 1440px: the sidebar is pinned to the window edge. */
@media (min-width: 781px) {
  /* padding-top 0: the base 1px left a strip of page colour between the
     header's sidebar-toned left part and the sidebar. */
  html:is(.page-index, .page-status) .dashboard-container { max-width: none; margin: 0; padding-top: 0; }
  html:is(.page-index, .page-status) .sidebar li { margin: 0; border-radius: 6px; }
  html:is(.page-index, .page-status) .sidebar li.active { background: var(--pc-row-active); font-weight: 500; }
  html:is(.page-index, .page-status) .sidebar li.active::before { display: none; }
  html:is(.page-index, .page-status) .sidebar li.active i { color: var(--color-text-light); background: none; }
  /* One opaque sidebar tone, the same as the header's left part (the desktop
     look's translucent pane left a visible seam under the wordmark), and it
     starts exactly under the 64px header (the safe-area layer pins that height). */
  html:is(.page-index, .page-status) .sidebar {
    top: 64px;
    height: calc(100dvh - 64px);
    background: var(--color-sidebar);
  }
}

/* ChatGPT refinements for the dashboard content (all widths):
   ghost icon buttons in the header, plain-ink large titles (no gradient
   text), sentence-case group labels, flat surfaces with no coloured glow,
   a thin progress bar. The wallet card keeps its brand gradient. */
html:is(.page-index, .page-status) .main-header .pc-icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-light);
  transition: background-color var(--dur-small) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  html:is(.page-index, .page-status) .main-header .pc-icon-btn:hover { background: var(--color-surface-hover); }
}
html:is(.page-index, .page-status) .user-icon { box-shadow: none; }
html:is(.page-index, .page-status) :is(#home-section, .dashboard-section) > h1:first-child {
  margin: 4px 0 4px;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--color-text-light);
}
html:is(.page-index, .page-status) .dashboard-section > h1:first-child + p.text-medium { margin: 0 0 24px; }
html:is(.page-index, .page-status) .section-label {
  margin: 28px 4px 8px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-medium);
}
html:is(.page-index, .page-status) .wallet-card { border-radius: 20px; box-shadow: none; }
html:is(.page-index, .page-status) .progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--ink) / 0.08);
  box-shadow: none;
}
html:is(.page-index, .page-status) .progress-fill { border-radius: inherit; box-shadow: none; }
/* Phones: the account row stays out of the tab bar (header avatar is used). */
@media (max-width: 780px) {
  :where(.page-index, .page-status) .sidebar-account { display: none; }
}

/* ── Sign-in scene (index, login, register, status #authScreen) ─────────
   Calm and local: a flat canvas and one solid card (no glow, no shadow, no
   moving background). From 1000px a real photo of a place people connect
   from fills the left side with one plain line about what this is for; it
   stays dark in both themes, like the home hero. Phones get the card alone. */
:where(.page-index, .page-login, .page-register, .page-status) #authScreen {
  --auth-scene-w: 0px;
  background: var(--color-background);
}
:where(.page-index, .page-login, .page-register, .page-status) #authScreen::before,
:where(.page-index, .page-login, .page-register, .page-status) #authScreen::after { content: none; }
:where(.page-index, .page-login, .page-register, .page-status) #authScreen .auth-card {
  background: var(--color-panel);
  border: 1px solid rgb(var(--ink) / 0.1);
  border-radius: 12px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: auth-card-in 420ms var(--ease-standard, ease-out) both;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(8px); }
}
.auth-scene { display: none; }
@media (min-width: 1000px) {
  :where(.page-index, .page-login, .page-register, .page-status) #authScreen {
    --auth-scene-w: min(46vw, 760px);
    padding-left: calc(var(--auth-scene-w) + 24px);
  }
  :where(.page-index, .page-login, .page-register, .page-status) #authScreen .auth-brand {
    left: calc(var(--auth-scene-w) + 24px);
  }
  .auth-scene {
    display: block;
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--auth-scene-w);
    margin: 0;
    background: #111;
    overflow: hidden;
  }
  .auth-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% center;
    display: block;
  }
  .auth-scene figcaption {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: 6px;
    padding: 24px 32px 32px;
    background: rgb(0 0 0 / 0.62);
    color: #fff;
    text-align: left;
  }
  .auth-scene figcaption strong {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .auth-scene figcaption span {
    font-size: 0.95rem;
    line-height: 1.45;
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(.page-index, .page-login, .page-register, .page-status) #authScreen .auth-card { animation: none; }
}

/* ==========================================================================
   MARKUP COMPONENTS: rules that used to be inline style="" attributes.
   index.css is the only owner of styles: pages and scripts add classes,
   never style="" or el.style.cssText. A value only a script knows (a
   progress width, a marker colour) is passed as a custom property and
   styled here. Kept after the page layers so these win the way the inline
   styles they replaced did.
   ========================================================================== */


/* Partner brand editor (partner-tools.js): a form inside a .list-group surface. */
.brand-form { display: grid; gap: 4px; padding: 14px 16px 16px; }
.brand-form .form-group { margin-bottom: 8px; }
/* Refund request action under a pass amount in Orders (refund-review.js). */
.list-trailing .refund-btn { display: block; margin: 6px 0 0 auto; }
/* Legal consent line under auth forms */
.legal-consent { margin-top: 20px; font-size: 0.72rem; color: var(--color-text-muted); line-height: 1.5; }
.legal-link { color: var(--color-info-text); text-decoration: underline; text-decoration-style: dotted; }
.legal-footnote,
:where(.page-legal) .legal-footer .legal-footnote { margin-top: 12px; font-size: 10px; letter-spacing: 1px; }

/* Account dropdown (home, map, status) */
.menu-link { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; width: 100%; }
.menu-link-danger { color: #f87171; }
.menu-link-accent { color: #60a5fa; font-weight: 500; }
.menu-divider { border-top: 1px solid rgb(var(--ink) / 0.08); margin-top: 4px; padding-top: 4px; }
.icon-center { display: flex; align-items: center; }
.user-icon-sm { width: 38px; height: 38px; min-width: 38px; font-size: 0.85rem; }
.user-icon-lg { width: 72px; height: 72px; font-size: 1.8rem; margin: 0 auto 10px; }
.dropdown-who { overflow: hidden; flex: 1; }
.dropdown-name,
.dropdown-header .dropdown-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-name { display: block; font-size: 0.95rem; }
.dropdown-header .dropdown-email { margin: 0; font-size: 0.8rem; opacity: 0.8; }

/* 404 */
.notfound-card { margin: 60px auto; }
.notfound-icon { font-size: 56px; color: var(--color-danger-text); margin-bottom: 16px; }

/* home */
.home-link-row { margin: 14px 0 20px 0; display: grid; align-items: center; gap: 8px; }
.inline-icon-label { display: inline-flex; align-items: center; gap: 8px; }

/* Modals: widths, scrolling, header, corner close */
.modal-w-420 { max-width: 420px; }
.modal-w-440 { max-width: 440px; }
.modal-w-450 { max-width: 450px; }
.modal-w-480 { max-width: 480px; }
.modal-w-520 { max-width: 520px; }
.modal-w-560 { max-width: 560px; }
.modal-w-700 { max-width: 700px; }
.modal-w-850 { max-width: 850px; }
.modal-scroll { max-height: 90vh; overflow-y: auto; }
.modal-column { display: flex; flex-direction: column; max-height: 85vh; }
.modal-header-fixed { margin-bottom: 0; height: auto; flex-shrink: 0; }
.modal-close-corner {
  position: absolute; right: 15px; top: 15px; z-index: 10;
  font-size: 1.5rem; color: var(--color-text-medium);
  background: none; border: none; cursor: pointer;
}
.modal-title-icon { font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }

/* Dashboard cards */
.card-header-bar { padding: 15px 25px; margin-bottom: 0; border-bottom: 1px solid var(--color-border); }
.card-header-bar .card-header-title { font-weight: 500; font-size: 1.1rem; }
.card-search { padding: 10px 15px 0; }
.support-fab-row { text-align: right; padding-top: 10px; }
.plan-progress-meta { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 5px; color: var(--color-text-medium); }
.progress-full { width: 100%; background-color: var(--color-success); }
.link-code { font-size: 2rem; font-weight: 700; letter-spacing: 0.3em; }
.token-code { display: block; word-break: break-all; padding: 12px; background: var(--color-bg-secondary); }
.flag-thumb { border-radius: 3px; flex-shrink: 0; }
.qr-frame { display: flex; justify-content: center; background: #fff; padding: 16px; border-radius: 12px; margin-bottom: 14px; }
.upload-placeholder { color: var(--color-text-medium); pointer-events: none; }
.field-label { display: block; margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--color-text-medium); }
.field-hint { display: block; margin-top: 4px; font-size: 0.75rem; }
.promo-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.promo-copy { flex: 1; min-width: 250px; }
.promo-copy .promo-title { color: var(--color-primary); margin-bottom: 5px; }
.promo-text { font-size: 0.88rem; margin: 0; line-height: 1.5; color: var(--color-text-medium); }
.contact-list { display: flex; flex-direction: column; gap: 10px; max-height: 250px; overflow-y: auto; margin-bottom: 15px; }
.section-divider { border-top: 1px solid var(--color-border); padding-top: 15px; }

/* Support tickets */
.ticket-meta-box { display: flex; justify-content: space-between; align-items: center; background: var(--color-sidebar); padding: 10px; border-radius: 4px; margin-bottom: 15px; }
.ticket-log { flex: 1; min-height: 300px; overflow-y: auto; background: var(--color-sidebar); border: 1px solid var(--color-border); border-radius: 4px; padding: 15px; margin-bottom: 15px; }
.ticket-reply-form { display: flex; gap: 10px; border-top: 1px solid var(--color-border); padding-top: 15px; }

/* Auth screens */
.auth-logo-80 { width: 80px; height: auto; margin: 0 auto 15px; display: block; }
.auth-divider-row { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.divider-line { flex: 1; border: none; border-top: 1px solid var(--color-border); }
.divider-label { font-size: 0.78rem; color: var(--color-text-medium); white-space: nowrap; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #3c4043; border: 1px solid #dadce0; font-weight: 500; }
.btn-icon-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-ghost-icon { font-size: 1.2rem; padding: 5px 10px; background: transparent; border: none; color: var(--color-text-medium); }

/* Voucher input with an inline scan button */
.input-with-action { position: relative; display: flex; align-items: center; }
.input-with-action .voucher-input { width: 100%; text-transform: uppercase; padding-right: 40px; box-sizing: border-box; }
.input-action-btn {
  position: absolute; right: 6px; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 4px; cursor: pointer; font-size: 1.25rem;
}
#qr-reader.qr-reader-box { width: 100%; margin-top: 10px; border-radius: 8px; overflow: hidden; }

/* map */
.nearest-ssid { font-size: 1rem; margin: 4px 0 2px 0; }
.nearest-sub { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.nearest-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); }
.filter-head { margin-top: 4px; margin-bottom: 6px; }
.user-loc-badge { color: #38bdf8; font-weight: 600; }
.spot-name { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 14px; }
.spot-info { background: rgb(var(--ink) / 0.05); padding: 10px; border-radius: 8px; font-size: 0.8rem; margin-bottom: 14px; }
.wifi-status-line { font-size: 0.8rem; margin: 10px 0; }

/* requests */
.req-heading { margin: 0 0 12px; font-size: 1.15rem; }

/* Bottom sheet: Wi-Fi QR (wifi-provision.js) and Get connected (connect-flow.js) */
.pc-sheet {
  position: fixed; inset: 0; z-index: 2147483500;
  display: grid; place-items: end center;
  background: var(--material-scrim);
}
.pc-sheet.is-top { z-index: 2147483600; }
.pc-sheet-card {
  width: min(420px, 100%);
  margin: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 20px;
  border-radius: 18px;
  background: var(--color-panel);
  color: var(--color-text-light);
  border: 1px solid rgb(var(--ink) / 0.12);
  box-shadow: var(--shadow-modal);
  font: 400 15px/1.5 system-ui, sans-serif;
}
.pc-sheet-card.is-center { text-align: center; }
.pc-sheet-title { margin: 0 0 4px; }
.pc-sheet-help { margin: 0 0 14px; color: var(--color-text-medium); font-size: 13px; }
.pc-sheet-qr { width: 200px; height: 200px; border-radius: 12px; background: #fff; }
.pc-sheet-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.pc-sheet-btn {
  min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(var(--ink) / 0.18);
  background: transparent; color: inherit;
  font: 600 14px system-ui; cursor: pointer;
}
.pc-sheet-btn.is-primary { border: 0; background: linear-gradient(135deg, #6366f1, #818cf8); color: #fff; }
.cf-card { width: min(480px, 100%); max-height: calc(100dvh - 24px); overflow: auto; border-radius: 20px; font-family: Poppins, system-ui, sans-serif; }
.cf-card .pc-sheet-btn { font-family: Poppins, system-ui; }
.cf-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cf-title { margin: 0; font-size: 1.15rem; }
.cf-platform { font-size: 12px; color: var(--color-text-medium); }
.cf-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cf-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cf-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgb(var(--ink) / 0.03); border: 1px solid rgb(var(--ink) / 0.10); }
.cf-step-body { min-width: 0; flex: 1; }
.cf-badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; flex-shrink: 0; color: var(--grade); background: color-mix(in srgb, var(--grade) 14%, transparent); }
.cf-step[data-grade="done"] { --grade: #34d399; }
.cf-step[data-grade="active"] { --grade: var(--color-info-text); }
.cf-step[data-grade="action"] { --grade: #fbbf24; }
.cf-step[data-grade="blocked"] { --grade: #f87171; }
.cf-step[data-grade="waiting"] { --grade: #5b6577; }
.cf-detail { font-size: 13px; color: var(--color-text-medium); }
.cf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cf-command { display: block; margin-top: 6px; padding: 10px; border-radius: 10px; background: #070a0f; color: #c7d2fe; font: 12px/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }

/* Floating banners and overlays built by scripts */
.perm-banner {
  position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 9000;
  margin: 0 auto; width: max-content; max-width: calc(100vw - 32px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--color-sidebar); border: 1px solid var(--color-border); box-shadow: var(--shadow-modal);
}
.file-protocol-banner {
  position: fixed; z-index: 2147483646; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 12px 16px; border-radius: 12px;
  background: #3a1d1d; color: #ffdede; border: 1px solid #7a3434;
  font: 500 14px/1.45 system-ui, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.file-protocol-banner-close { float: right; margin-left: 12px; background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; }
#loadingOverlay.loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: rgba(0, 0, 0, 0.8); color: #fff;
}
.voip-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.9);
}
.offline-queue-indicator {
  position: fixed; bottom: 80px; right: 20px; z-index: 1000;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 15px; border-radius: 20px;
  background: var(--color-accent); color: #fff; font-size: 0.85rem; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.wifi-qr-img { width: 240px; height: 240px; max-width: 100%; }
.login-flow-status { margin: 10px 0 0; min-height: 1.2em; font-size: 0.88rem; }
.login-flow-alt { display: grid; gap: 8px; margin-top: 10px; }
.login-flow-status:empty, .login-flow-alt:empty { display: none; }
.nearby-item { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.partner-app-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.partner-app-info { flex: 1 1 260px; }
#partnerApplyPhoneHint.is-error { color: var(--color-danger-text); }
.pay-availability { display: block; font-size: 0.72rem; opacity: 0.8; }

/* State colours set by scripts through data-* attributes */
.toast[data-type] { z-index: 10000; color: var(--color-text-light); background-color: var(--color-info); }
.toast[data-type="success"] { background-color: var(--color-success); }
.toast[data-type="error"] { background-color: var(--color-danger); }
/* Dark text on amber: light text on #ffaa00 is ~2:1, under WCAG AA. */
.toast[data-type="warning"] { background-color: #ffaa00; color: #1a1a1a; }
.toast { cursor: pointer; max-width: min(480px, calc(100vw - 32px)); }
.toast-message { overflow-wrap: anywhere; }
/* Phones: above the 65px tab bar (and its safe area), full width minus gutters. */
@media (max-width: 780px) {
  .toast {
    left: 16px;
    right: 16px;
    bottom: calc(65px + env(safe-area-inset-bottom, 0px) + 12px);
    max-width: none;
  }
}

/* Offline banner (index.js setOfflineBadge): pinned under the header while offline. */
.offline-badge {
  position: fixed;
  top: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px);
  left: 50%;
  translate: -50% 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 14px;
  border-radius: var(--radius-pill, 999px);
  background: #3a2a00;
  color: #ffe08a;
  border: 1px solid rgb(255 200 60 / 0.35);
  font-size: 0.85rem;
  line-height: 1.35;
}
.offline-badge[hidden] { display: none; }
:root[data-theme="light"] .offline-badge { background: #fff4d6; color: #5c3d00; border-color: #f0c96a; }
.toast-copy-btn.btn { margin-left: 15px; color: var(--color-background); background-color: var(--color-text-light); }
#planProgressBar[data-level="ok"] { background-color: var(--color-text-light); }
#planProgressBar[data-level="warn"] { background-color: var(--color-warning-text); }
#planProgressBar[data-level="low"] { background-color: var(--color-danger-text); }
#pulse-status[data-level="ok"] { color: var(--color-success-text); }
#pulse-status[data-level="warn"] { color: var(--color-warning-text); }
#pulse-status[data-level="low"] { color: var(--color-danger-text); }
#chatActionBtn.recording-pulse { color: var(--color-danger-text); }

/* Forgot password (js/forgot-password.js, beside every password input) */
.forgot-password-link {
  display: block; min-height: 44px; margin: 6px auto 0; padding: 10px 12px;
  background: none; border: 0; border-radius: 8px;
  color: var(--color-info-text); font: inherit; font-size: 0.9rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.forgot-password-link:hover { color: var(--color-text-light); }
.forgot-password-link:focus-visible { outline: 2px solid var(--color-info-text); outline-offset: 2px; }
.forgot-password-link[hidden] { display: none; }
.forgot-password-status { margin-top: 10px; min-height: 1.2em; }
.forgot-password-status.is-error { color: var(--color-danger-text); }
.forgot-password-status.is-ok { color: var(--color-success-text); }
.forgot-password-form input[aria-invalid="true"] { border-color: var(--color-danger-text); }

/* ── Native app layout for every dashboard section (iOS / Material 3):
   large title, one centred column, grouped lists with icon tiles. ── */
/* The app frame fills the window (up to its max-width) instead of shrinking
   to whatever the current section contains. */
.dashboard-container { width: 100%; }
.content-panel > .dashboard-section { max-width: 960px; margin-inline: auto; }
#orders-section, #messages-section, #settings-section, #home-section { max-width: 760px; }
.dashboard-section > h1:first-child {
  margin: 4px 0 2px;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
}
.dashboard-section > h1:first-child + p.text-medium { margin: 0 0 18px; font-size: 0.95rem; }
/* Tab switches happen dozens of times a day: keep the settle short. */
.dashboard-section:not(.hidden) { animation: section-in var(--dur-small) var(--ease-standard) both; }
@keyframes section-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dashboard-section:not(.hidden) { animation: none; } }

.section-label {
  margin: 22px 4px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-medium);
}
.section-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 8px; }
.section-label-row .section-label { margin: 0 4px; }

/* Grouped list: one rounded surface, rows separated by inset hairlines. */
.list-group {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
}
.permission-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "icon text action";
  align-items: center;
  column-gap: 14px;
}
.permission-row > .list-icon { grid-area: icon; align-self: start; }
.permission-row > .list-text { grid-area: text; }
.permission-row > .list-trailing { grid-area: action; }
.permission-row > .list-trailing:empty { display: none; }
/* Every state has the same shape: title, a coloured state line, the
   description, then at most one action (always the same button style).
   Nothing is truncated: a cut-off permission name is worse than a wrap. */
.permission-row .list-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.permission-row .list-title,
.permission-row .list-sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* Phones: the action drops under the text instead of squeezing it. */
@media (max-width: 560px) {
  .permission-row {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas: "icon text" ". action";
    row-gap: 8px;
  }
  .permission-row > .list-trailing { justify-self: start; margin-left: 0; text-align: start; }
}
.permission-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-medium);
  font-size: 0.78rem;
  font-weight: 600;
}
.permission-status::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.permission-status[data-tone="ok"] { color: var(--color-success-text); }
.permission-status[data-tone="warn"] { color: var(--color-warning-text); }
.permission-status[data-tone="off"] { color: var(--color-danger-text); }
.permission-row .list-trailing .btn { min-width: 112px; justify-content: center; }
.permission-row .list-trailing .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.list-row + .list-row::before,
.plan-row-progress + .list-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 64px;
  right: 0;
  border-top: 1px solid var(--color-border);
}
.list-row.is-link { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-small) var(--ease-standard); }
.list-row.is-link::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--color-text-medium);
  border-bottom: 2px solid var(--color-text-medium);
  transform: rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) { .list-row.is-link:hover { background: var(--color-surface); } }
.list-row.is-link:active { background: var(--color-surface-hover); }
.list-row.is-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.list-icon, .settings-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #fff;
  font-size: 0.95rem;
  background: var(--tile, #64748b);
}
.list-icon.is-indigo { --tile: #6366f1; }
.list-icon.is-blue { --tile: #3b82f6; }
.list-icon.is-slate { --tile: #64748b; }
.list-icon.is-green { --tile: #16a34a; }
.list-icon.is-teal { --tile: #0d9488; }
.list-icon.is-amber { --tile: #d97706; }
.list-icon.is-red { --tile: #dc2626; }
/* Material 3 list item leading avatar (40dp circle on the primary container)
   and trailing action cluster; used by the Backoffice lists. */
.list-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: rgb(var(--info-tint) / 0.18);
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.list-avatar img { width: 100%; height: 100%; object-fit: cover; }
.list-row.is-tall { min-height: 72px; }
.list-actions { flex: none; display: flex; gap: 6px; margin-left: 8px; }
.list-actions .btn-tonal { min-height: 36px; padding: 0 12px; }
.list-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.list-sub .is-success { color: var(--color-success-text); }
.list-sub .is-danger { color: var(--color-danger-text); }
.list-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.list-title { font-weight: 600; color: var(--color-text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-sub { font-size: 0.8125rem; color: var(--color-text-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-sub .order-status { margin-left: 6px; }
.list-trailing { flex: none; margin-left: auto; text-align: end; font-variant-numeric: tabular-nums; }
.list-empty { margin: 0; padding: 22px 16px; color: var(--color-text-medium); text-align: center; }
.list-group > .text-medium.p-25 { padding: 22px 16px; text-align: center; }

/* Conversations and tickets reuse the row look inside a list group. */
.list-group .chat-item,
.list-group .chat-list-item {
  position: relative;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--dur-small) var(--ease-standard);
}
.list-group .chat-item + .chat-item::before,
.list-group .chat-list-item + .chat-list-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 72px;
  right: 0;
  border-top: 1px solid var(--color-border);
}
@media (hover: hover) and (pointer: fine) {
  .list-group .chat-item:hover,
  .list-group .chat-list-item:hover { background: var(--color-surface); }
}
.list-group .chat-list { margin: 0; padding: 0; gap: 0; }

/* Home: nearby devices (nearby.js). */
.nearby-note { white-space: normal; }
.nearby-status { margin: 0; padding: 0 16px 12px 64px; font-size: 0.8125rem; color: var(--color-text-medium); }
.nearby-status:empty { display: none; }
.nearby-list { list-style: none; margin: 0; padding: 0 16px 8px 64px; }
.nearby-list:empty { display: none; }

/* Conversation rows (chat.js renderChatsList): avatar, name + time, preview. */
.messages-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.messages-heading-row > div { min-width: 0; }
.messages-compose-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, #a855f7, #7c3aed);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28);
  cursor: pointer;
  transition: transform var(--dur-small) var(--ease-standard), box-shadow var(--dur-small) var(--ease-standard);
}
.messages-compose-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(124, 58, 237, 0.36); }
.messages-compose-btn:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.messages-compose-btn:active { transform: scale(0.96); }
.list-group .chat-item { display: flex; align-items: center; gap: 14px; }
.notification-inbox-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.notification-inbox-item:last-child { border-bottom: 0; }
.notification-inbox-item.is-read .list-title { color: var(--color-text-medium); }
.chat-avatar-container { position: relative; flex: none; }
.chat-status-indicator { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-panel); background: var(--color-text-muted); }
.chat-status-indicator.status-online { background: #22c55e; }
.chat-info { position: relative; display: grid; gap: 2px; flex: 1; min-width: 0; padding-right: 28px; }
.chat-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.chat-name { font-weight: 600; color: var(--color-text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header .chat-time { flex: none; font-size: 0.75rem; color: var(--color-text-medium); }
.chat-preview { font-size: 0.8125rem; color: var(--color-text-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-info .unread-badge { position: absolute; right: 0; bottom: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-accent); color: #fff; font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }

/* Home: wallet card (Apple Wallet / Google Wallet style). */
.wallet-card {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 18px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(129, 140, 248, 0.55), transparent 55%),
    linear-gradient(135deg, #4338ca 0%, #6366f1 55%, #7c3aed 100%);
  box-shadow: 0 18px 40px rgba(79, 70, 229, 0.28);
}
.wallet-card-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; opacity: 0.92; }
.wallet-card-brand { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }
.wallet-card-value { margin: 14px 0 18px; font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wallet-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform var(--dur-press) var(--ease-standard), background-color var(--dur-small) var(--ease-standard);
}
.wallet-btn.is-primary { background: #fff; color: #3730a3; border-color: transparent; }
.wallet-btn:active { transform: scale(0.97); }
.wallet-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.plan-row .plan-progress-meta { display: flex; gap: 12px; margin: 0; font-size: 0.8125rem; color: var(--color-text-medium); }
.plan-row-progress { padding: 0 16px 14px 64px; }
.plan-row-progress .progress-track { margin: 0; }

.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.stat-tile {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  box-shadow: var(--shadow-card);
}
.stat-tile-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-tile-label { font-size: 0.8125rem; color: var(--color-text-medium); }

.action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.action-tile {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  color: var(--color-text-light);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) var(--ease-standard), background-color var(--dur-small) var(--ease-standard);
}
.action-tile .list-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 1.1rem; }
@media (hover: hover) and (pointer: fine) { .action-tile:hover { background: var(--color-surface-hover); } }
.action-tile:active { transform: scale(0.97); }
.action-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 420px) { .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Native search field: filled, rounded, magnifier inside. */
.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 14px;
  min-height: 44px;
  border-radius: 12px;
  background: var(--color-surface-hover);
  color: var(--color-text-medium);
}
.search-field input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-light);
  font: inherit;
  outline: none;
  box-shadow: none;
}
.search-field:focus-within { box-shadow: 0 0 0 2px var(--color-accent); }

/* Tonal button (Material 3): tinted fill, accent text. */
.btn.btn-tonal {
  background: var(--color-accent-subtle);
  color: var(--color-info-text);
  border-color: transparent;
  transition: background-color var(--dur-small, 180ms) var(--ease-standard, ease-out),
    color var(--dur-small, 180ms) var(--ease-standard, ease-out),
    transform var(--dur-press, 100ms) var(--ease-standard, ease-out);
}
/* Hover and press go stronger, never greyer: the generic .btn:hover would
   swap the indigo tint for neutral grey and make the action look disabled. */
@media (hover: hover) and (pointer: fine) {
  .btn.btn-tonal:not(:disabled):hover {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
    color: var(--color-info-text);
    border-color: transparent;
  }
}
.btn.btn-tonal:not(:disabled):active { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.support-cta { margin-top: 20px; }
.settings-signout { margin-top: 8px; }
.settings-backoffice { max-width: 760px; margin: 12px 0 24px; }
.settings-backoffice.hidden { display: none; }
.settings-signout .list-title { color: var(--color-danger-text); }

/* Phone tab bar: translucent material, Material 3 active indicator pill. */
@media (max-width: 780px) {
  .sidebar {
    background: var(--material-chrome);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    border-top: 1px solid var(--color-border);
  }
  .sidebar li { color: var(--color-text-medium); transition: color var(--dur-small) var(--ease-standard); }
  .sidebar li i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 28px;
    border-radius: var(--radius-pill);
    transition: background-color var(--dur-small) var(--ease-standard);
  }
  .sidebar li.active { border-bottom: 0; padding-bottom: 0; color: var(--color-text-light); }
  .sidebar li.active i { background: var(--color-accent-subtle); color: var(--color-info-text); }
  .sidebar li.active .nav-text { font-weight: 600; }
}

/* Settings groups (index.html #settings-section). Native <details>, so the
   header row is a real button for keyboard and screen readers. */
.settings-stack { display: grid; gap: 12px; max-width: 760px; }
.settings-profile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 16px;
  margin: 0;
}
.settings-profile .user-icon-lg.user-icon-lg { width: 64px; height: 64px; margin: 0; font-size: 1.5rem; }
.settings-profile-text { min-width: 0; }
.settings-profile-text h3 { margin: 0; font: var(--type-headline); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-profile-text p { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-profile-text .tag:empty { display: none; }
.settings-account-reference { margin-top: 8px !important; color: var(--color-text-medium); font-size: 0.8rem; }
.settings-account-reference strong { color: var(--color-text-light); font-variant-numeric: tabular-nums; }
.settings-profile-text .settings-account-reference,
.settings-profile-text .profile-account-reference { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.settings-profile-status { grid-column: 1 / -1; margin: 0; }
.settings-profile-status:empty { display: none; }
@media (max-width: 520px) {
  .settings-profile { grid-template-columns: auto 1fr; }
  .settings-profile-photo { grid-column: 1 / -1; justify-self: start; }
}

.settings-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.settings-group > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-small) var(--ease-standard);
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--color-text-medium);
  border-bottom: 2px solid var(--color-text-medium);
  transform: rotate(-45deg);
  transition: transform var(--dur-small) var(--ease-standard);
}
.settings-group[open] > summary::after { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .settings-group > summary:hover { background: var(--color-surface); }
}
.settings-group > summary:active { background: var(--color-surface-hover); }
.settings-group > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-md); }
.settings-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #fff;
  font-size: 0.95rem;
  background: var(--tile, #64748b);
}
.settings-icon.is-indigo { --tile: #6366f1; }
.settings-icon.is-blue { --tile: #3b82f6; }
.settings-icon.is-slate { --tile: #64748b; }
.settings-icon.is-green { --tile: #16a34a; }
.settings-icon.is-teal { --tile: #0d9488; }
.settings-icon.is-amber { --tile: #d97706; }
.settings-summary-text { display: grid; gap: 2px; min-width: 0; }
.settings-title { font-weight: 600; color: var(--color-text-light); }
.settings-sub { font-size: 0.8125rem; color: var(--color-text-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-body { padding: 4px 16px 18px 64px; }
.settings-body > :first-child { margin-top: 0; }
.settings-body form .btn,
.settings-body > .btn { margin-top: 8px; }
.settings-subsection { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.settings-subsection.hidden { display: none; }
.settings-subsection h4 { margin: 0 0 4px; }
@media (max-width: 600px) { .settings-body { padding-left: 16px; } }
/* Smooth open/close where the browser can animate to auto height. */
@supports (interpolate-size: allow-keywords) {
  .settings-group { interpolate-size: allow-keywords; }
  .settings-group::details-content {
    height: 0;
    overflow: clip;
    transition: height var(--dur-sheet) var(--ease-standard), content-visibility var(--dur-sheet) allow-discrete;
  }
  .settings-group[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .settings-group > summary::after,
  .settings-group::details-content { transition: none; }
}

/* Language (js/i18n.js). The page stays hidden until a non-English
   dictionary has been applied, so it never flashes English (1.5 s max). */
html.i18n-pending body { visibility: hidden; }
.lang-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-medium);
  font-size: 0.875rem;
}
.lang-picker:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
.lang-picker select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
  padding: 0 18px 0 0;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A94A6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center;
  color: var(--color-text-light);
  font: inherit;
  cursor: pointer;
  outline: none;
}
.lang-picker select option { color: initial; background: initial; }
.lang-picker select:focus-visible { outline: 2px solid var(--pc-focus); outline-offset: 2px; }
.auth-lang { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }
.auth-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pc-tap);             /* was 38px: under the 44px touch minimum */
  height: var(--pc-tap);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-medium);
  cursor: pointer;
  /* Was `background var(--ease-standard)`: a curve where the duration goes made it invalid. */
  transition: scale var(--dur-press) var(--ease-standard), background-color var(--dur-small) var(--ease-standard), border-color var(--dur-small) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .auth-theme-toggle:hover {
    background: var(--color-bg-elevated, #2a2a2a);
    color: var(--color-text-primary);
    border-color: var(--color-border-hover, #555);
  }
}
.auth-theme-toggle .fa-sun { display: none; }
.auth-theme-toggle .fa-moon { display: inline-block; }
[data-theme="dark"] .auth-theme-toggle .fa-sun { display: inline-block; }
[data-theme="dark"] .auth-theme-toggle .fa-moon { display: none; }
.pc-drawer-lang { margin: 4px 0 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.settings-row-label { font-weight: 600; }
.label-hint { font-weight: 400; color: var(--color-text-medium); }

/* Segmented control (Settings → Appearance). Native radios, so arrow keys,
   screen readers and forms work; the selected segment lifts onto the panel. */
.segmented {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 4px;
  margin: 14px 0 8px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  min-width: 0;
}
.segmented-option { position: relative; display: block; margin: 0; cursor: pointer; }
.segmented-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmented-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--color-text-medium);
  font: var(--type-caption);
  font-size: 0.875rem;
  white-space: nowrap;
  transition: background-color var(--dur-small) var(--ease-standard), color var(--dur-small) var(--ease-standard), box-shadow var(--dur-small) var(--ease-standard);
}
.segmented-option i { font-size: 0.95em; }
@media (hover: hover) and (pointer: fine) {
  .segmented-option:hover span { color: var(--color-text-light); }
}
.segmented-option input:checked + span {
  background: var(--color-panel);
  color: var(--color-text-light);
  box-shadow: var(--shadow-card);
}
:root[data-theme="dark"] .segmented-option input:checked + span { background: var(--color-surface-hover); }
.segmented-option input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .segmented-option span { transition: none; } }

/* Built by scripts: dashboard, chat, shop admin, map markers */
.card.mission-card { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; padding: 12px; border-left: 4px solid var(--color-border); }
.card.mission-card.is-done { border-left-color: var(--color-success-text); }
.mission-icon { font-size: 1.5rem; color: var(--color-text-medium); }
.is-done .mission-icon { color: var(--color-success-text); }
.badge.badge-delivered { background: var(--color-success); }
.badge.badge-pending { background: var(--color-warning); }
.bubble-time { font-size: 0.65rem; opacity: 0.6; margin-top: 5px; text-align: left; }
.bubble-time.is-mine { text-align: right; }
.stock-low { color: #ffcc66; font-weight: 700; }
.spot-dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #ffffff; background: var(--dot); box-shadow: 0 0 10px var(--dot);
}

/* ==========================================================================
   PLATFORM LOOKS: the same app wears each platform's own design language.
   js/adaptive-orientation.js puts one class on <html>:
     .look-android  Material 3 (APK, Android browser/PWA)
     .look-ios      iOS (Cordova iOS app, Safari/PWA on iPhone and iPad)
     .look-desktop  Windows / macOS / Linux window (Electron, desktop PWA)
   plus .app-native inside a packaged app. Preview with ?look=android|ios|desktop.
   Only shape, density, press feedback and chrome change here; colours stay the
   theme tokens, so light and dark keep working. Capability questions (hover,
   pointer, safe areas) stay on media queries, never on these classes.
   ========================================================================== */

/* ── Android · Material 3 ───────────────────────────────────────────────── */
:root.look-android {
  --pc-press-scale: 1;              /* M3 answers a press with a state layer, not a shrink */
  --radius-md: 16px;                /* cards: medium-large shape */
  --radius-lg: 28px;                /* sheets and dialogs: extra-large shape */
  --m3-state-press: rgb(var(--ink) / 0.10);
}
.look-android :is(.btn, .pc-btn, .list-row.is-link, .sidebar li, .settings-group > summary, .acct-tile, .acct-ghost-btn, .acct-banner-action):not(:disabled):active {
  box-shadow: inset 0 0 0 100vmax var(--m3-state-press);
}
.look-android :is(.card, .settings-group, .list-group, .stat-tile, .action-tile) {
  border-color: transparent;
  box-shadow: none;
  background: var(--color-raised);  /* tonal surface, no outline: an M3 filled card */
}
:root.look-android[data-theme="light"] :is(.card, .settings-group, .list-group, .stat-tile, .action-tile) {
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 1px 3px 1px rgb(15 23 42 / 0.05); /* elevation level 1 */
}
.look-android .btn { font-weight: 500; letter-spacing: 0.01em; }
/* Subheaders: sentence case in the primary colour (M3 list subheader). */
.look-android .section-label {
  text-transform: none;
  letter-spacing: 0.006em;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-info-text);
}
.look-android .main-header { border-bottom-color: transparent; box-shadow: none; }
@media (max-width: 780px) {
  /* Navigation bar: 80dp tall, 64x32 active indicator, 12sp labels. */
  .look-android .sidebar {
    height: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 0;
    background: var(--color-panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .look-android .sidebar li { gap: 4px; }
  .look-android .sidebar li i { width: min(64px, 100%); height: 32px; font-size: 1.15rem; }
  .look-android .sidebar .nav-text { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; }
  .look-android .sidebar li.active .nav-text { font-weight: 700; }
  .look-android .content-panel { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── iOS ────────────────────────────────────────────────────────────────── */
:root.look-ios {
  --pc-press-scale: 1;              /* iOS dims a control while touched */
  --radius-md: 22px;                /* inset-grouped cards, concentric with the screen */
  --radius-lg: 30px;
}
.look-ios :is(.btn, .pc-btn, .pc-icon-btn, .google-btn, .list-row.is-link, .settings-group > summary, .user-icon, .acct-tile, .acct-ghost-btn, .acct-banner-action):not(:disabled):active {
  opacity: 0.55;
  transition: opacity 0ms;          /* down instantly; the release fades back */
}
.look-ios :is(.btn, .pc-btn, .pc-icon-btn, .google-btn, .list-row.is-link, .settings-group > summary, .user-icon, .acct-tile, .acct-ghost-btn, .acct-banner-action) {
  transition: opacity 220ms var(--ease-standard, ease-out);
}
.look-ios :is(.card, .settings-group, .list-group, .stat-tile, .action-tile) {
  border-color: transparent;
  box-shadow: none;
  background: var(--color-raised);
}
.look-ios .btn { font-weight: 600; }
/* Navigation bar: translucent material with a hairline, content scrolls under it. */
.look-ios .main-header {
  background: var(--material-chrome);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
  border-bottom: 0.5px solid rgb(var(--ink) / 0.16);
  box-shadow: none;
}
/* Large title: 34pt bold, slightly open tracking at this size. */
.look-ios :is(.dashboard-section > h1:first-child, #home-section > h1) {
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: 0.011em;
}
@media (max-width: 780px) {
  /* Floating glass tab bar (iOS 26): a capsule above the home indicator. */
  .look-ios .sidebar {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: auto;
    height: 62px !important;
    padding: 0 4px !important;
    border: 0.5px solid rgb(var(--ink) / 0.14);
    border-radius: var(--radius-pill);
    background: var(--material-chrome);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.18), inset 0 0.5px 0 rgb(255 255 255 / 0.25);
  }
  .look-ios .sidebar li { gap: 2px; border-radius: var(--radius-pill); }
  .look-ios .sidebar li i { width: auto; height: 26px; background: none !important; font-size: 1.25rem; }
  .look-ios .sidebar .nav-text { font-size: 10px; font-weight: 600; letter-spacing: 0.01em; }
  /* Selected tab: tinted symbol and label on a soft glass lozenge, no M3 pill. */
  .look-ios .sidebar li.active { color: var(--color-info-text); background: rgb(var(--ink) / 0.08) !important; }
  .look-ios .sidebar li.active i { color: inherit; }
  .look-ios .content-panel { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .look-ios .main-header,
  .look-ios .sidebar { background: var(--color-panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── Navigation rail: medium windows and landscape phones ──────────────────
   Material 3 window classes: compact (< 600dp) keeps the bottom bar,
   medium (600-839dp: unfolded inner screens, small tablets, split screen)
   and short landscape phones get a side rail. A bottom bar plus header ate
   136 of 360px on a landscape phone. Desktop (>= 781px) keeps the sidebar;
   iOS keeps its floating tab bar (Apple keeps tab bars in landscape); TV and
   hinge postures keep their own layouts above. */
@media (max-width: 780px) and ((min-width: 600px) or ((orientation: landscape) and (max-height: 500px)))
  and (not (vertical-viewport-segments: 2)) and (not (horizontal-viewport-segments: 2)) {
  html:not(.look-ios):not(.device-tv) {
    --rail-w: calc(80px + env(safe-area-inset-left, 0px));
  }
  html:not(.look-ios):not(.device-tv) .main-header {
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }
  html:not(.look-ios):not(.device-tv) .sidebar {
    top: calc(56px + env(safe-area-inset-top, 0px));
    bottom: 0;
    left: 0;
    width: var(--rail-w);
    height: auto !important;
    padding: 8px 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
    border-top: 0;
    border-right: 1px solid var(--color-border);
  }
  html:not(.look-ios):not(.device-tv) .sidebar ul {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;
  }
  html:not(.look-ios):not(.device-tv) .sidebar li {
    flex: 0 0 56px;
    width: 100%;
    height: 56px;
  }
  html:not(.look-ios):not(.device-tv) .content-panel {
    padding-left: calc(var(--rail-w) + 16px) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html:not(.look-ios):not(.device-tv) .cart-fab {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* no bar below: just clear the toast */
  }
}

/* ── Modals in small windows: landscape phones, fold cover screens ─────── */
@media (max-height: 500px) {
  .modal-content {
    padding: 16px 20px;
    max-height: calc(100dvh - 16px);
  }
  .modal-header { margin-bottom: 12px; }
}
@media (max-width: 400px) {
  /* 344px cover screens: 32px padding left 246px for the form. */
  .modal-content {
    width: calc(100% - 24px);
    padding: 20px 16px;
  }
}

/* ── Desktop · Windows / macOS window (Electron, desktop PWA) ───────────── */
:root.look-desktop {
  --pc-press-scale: 1;              /* desktop controls darken on press, they don't shrink */
  --radius-md: 10px;
  --radius-lg: 14px;
}
.look-desktop :is(.btn, .pc-btn, .pc-icon-btn, .google-btn, .acct-tile, .acct-ghost-btn, .acct-banner-action):not(:disabled):active {
  filter: brightness(0.92);
}
.look-desktop :is(.card, .settings-group, .list-group, .stat-tile, .action-tile) {
  box-shadow: none;
  border-color: rgb(var(--ink) / 0.09);
}
@media (pointer: fine) {
  /* Mouse density: 36px controls, 14px text in the chrome. */
  .look-desktop .btn { min-height: 36px; padding-block: 0.5rem; font-size: 0.875rem; }
  .look-desktop .btn-sm { min-height: 30px; }
}
@media (min-width: 781px) {
  /* Navigation pane: compact rows, a subtle selection fill and the accent
     pill on the leading edge (Windows NavigationView / macOS source list). */
  .look-desktop .sidebar { background: rgb(var(--ink) / 0.025); }
  .look-desktop .sidebar li {
    position: relative;
    min-height: 38px;
    margin: 2px 8px;
    padding-block: 8px;
    border-left: 0 !important;
    border-radius: 6px;
    font-size: 0.875rem;
  }
  .look-desktop .sidebar li.active {
    background: rgb(var(--ink) / 0.07);
    color: var(--color-text-light);
    font-weight: 600;
  }
  .look-desktop .sidebar li.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 16px;
    border-radius: 3px;
    background: var(--color-accent);
    translate: 0 -50%;
  }
  .look-desktop .sidebar li.active i { color: var(--color-accent); }
}
/* In the installed app, controls use the arrow pointer like native windows;
   real links keep the hand. The chrome isn't selectable text. */
.app-native.look-desktop :is(button, [role="button"], .btn, .sidebar li, summary) { cursor: default; }
.app-native.look-desktop :is(.main-header, .sidebar) { -webkit-user-select: none; user-select: none; }

/* iOS app: the left-edge swipe-back chip (index.js EdgeSwipeBack).
   The script only sets --edge-x (travel, rubber-banded) and --edge-p
   (progress 0-1). It tracks the finger 1:1 with no transition while
   dragging (.is-tracking), then settles back on release. Translucent
   material: blur + saturate, a bright top edge, a heavier shadow once
   armed (past the commit point). */
.edge-back {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 3000;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgb(var(--ink) / 0.92);
  background: rgb(var(--panel-rgb) / 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgb(var(--ink) / 0.16);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
  pointer-events: none;
  opacity: var(--edge-p, 0);
  transform: translateX(calc(var(--edge-x, 0px) - 44px)) scale(var(--edge-scale, 0.86));
  transition: transform 320ms var(--ease-standard), opacity 220ms var(--ease-standard), box-shadow 160ms;
}
.edge-back.is-tracking { transition: box-shadow 160ms; }
.edge-back.is-armed { box-shadow: 0 8px 24px rgb(0 0 0 / 0.28); color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
  /* No travel or scale: the chip just fades in place. */
  .edge-back { transform: translateX(8px); transition: opacity 150ms linear; }
}
@media (prefers-reduced-transparency: reduce) {
  .edge-back { background: rgb(var(--panel-rgb)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .edge-back { background: rgb(var(--panel-rgb)); border: 1px solid rgb(var(--ink) / 0.6); }
}

/* Consent gate (index.html #consentModal, js/consent-gate.js): Terms, Privacy, age. */
.consent-docs { display: grid; gap: 6px; margin: 12px 0 16px; padding-left: 18px; }
.consent-age { display: grid; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.consent-age legend { padding: 0 6px; font-weight: 600; }
.consent-age label,
.consent-accept { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; cursor: pointer; }
.consent-age input,
.consent-accept input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--color-accent, currentColor); }
.consent-accept { margin-bottom: 8px; font-weight: 500; }
.consent-error { margin: 4px 0 0; color: var(--color-danger-text); }
.consent-error.hidden { display: none; }

/* ==========================================================================
   CALM LAYER: the power-connect-design rules applied across every page.
   Shapes: controls 8px, tags 6px, cards and sheets 12px (no pills). Depth:
   one border, never a glow. Indigo only where the person acts. Chat bubbles
   keep their round shape on purpose: conversation should feel like one.
   Later sections (UTILITIES, RUNTIME VALUES) still win where markup asks.
   ========================================================================== */
:root :is(.pc-btn, .ai-analysis-btn, .shop-search input, .auth-card .btn-block, .google-btn, .rq-tabs, .rq-tabs button, .offline-queue-indicator),
:root :where(.page-store) .btn { border-radius: 8px; }
:root :is(.chip, .pc-chip, .pc-badge, .order-status, .pay-badge, .shop-sale-badge, .status-badge, .home-hero-proof, .home-coverage-country, .legal-hero .badge, .checkout-steps li) { border-radius: 6px; }
:root :is(.modal-content, .user-dropdown, .settings-group, .pc-sheet-card, .cf-card, .map-chat-card, .qr-card, .auth-card, .auth-logo),
:root .wallet-card.wallet-card { border-radius: 12px; }

/* No glows: hover lifts and halos become a neutral border step. */
:root :is(.auth-logo, .ai-analysis-btn, .pc-btn, .stat-card:hover, .plan-card:hover, .btn-primary:hover, .ai-analysis-btn:hover) { box-shadow: none; }
:root .plan-card.plan-card:hover { box-shadow: none !important; } /* the original hover is !important */
:root :is(.stat-card, .plan-card):hover { border-color: rgb(var(--ink) / 0.2); }

/* The account avatar is a control, not a signal: neutral tile, no halo. */
:root .user-icon.user-icon {
  background: rgb(var(--ink) / 0.08);
  color: var(--color-text-light);
  box-shadow: none;
}
:root .user-icon.user-icon:hover { background: rgb(var(--ink) / 0.14); box-shadow: none; }

/* Eyebrow labels are words, not decoration: neutral, not indigo. */
:root :is(.home-eyebrow, .home-section-label, .section-eyebrow, .eyebrow, .home-step-number, .home-plan-duration, .home-customer-step span, .home-platform-tag, .home-partner-step span) { color: var(--color-text-muted); }

/* status.html signed out: account-only parts stay readable; controls are
   really disabled (status.html adds .is-unavailable + disabled). */
:root :where(.page-status) .is-unavailable { pointer-events: none; }
:root :where(.page-status) .is-unavailable :is(.stat-label, .stat-hero-label, h2, h3) { color: rgb(var(--ink) / 0.72); }
:root :where(.page-status) button.is-unavailable:disabled { opacity: 1; background: rgb(var(--ink) / 0.06); color: rgb(var(--ink) / 0.72); border-color: rgb(var(--ink) / 0.12); cursor: not-allowed; }

/* Empty states: one sentence of what is missing and one way forward
   (markup built by the page scripts). */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 420px;
  margin: 48px auto;
  padding: 0 16px;
  text-align: center;
}
.empty-state-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgb(var(--ink) / 0.06);
  color: var(--color-text-muted);
  font-size: 1.25rem;
}
.empty-state-title { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--color-text-light); }
.empty-state-text { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--color-text-muted); text-wrap: pretty; }
/* Spans the whole grid when it replaces a list of cards. */
:is(.grid, .shop-grid, [class*="-grid"]) > .empty-state { grid-column: 1 / -1; }
:root .empty-state .empty-state-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 18px;
  border: 1px solid rgb(var(--ink) / 0.18);
  border-radius: 8px;
  background: rgb(var(--ink) / 0.06);
  color: var(--color-text-light);
  font-weight: 600;
  text-decoration: none;
}
:root .empty-state .empty-state-action:hover { background: rgb(var(--ink) / 0.12); }
:root .empty-state .empty-state-action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Data tables (.admin-table) at any width and after any rotation.
   The container decides, not the device: a container query reflows the
   table when its own column is narrow (portrait phone, dashboard beside the
   sidebar, split screen) and back when the device turns to landscape.
   Wide: a real table that scrolls sideways inside its box, header pinned.
   Narrow (.is-stackable): each row becomes a card, every cell labelled from
   its data-label, which the renderers in app.js and shop.js write. */
:root :is(.table-scroll, #activeConnectionsContainer, #partnerUsageLogs) {
  container-type: inline-size;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
:root .admin-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}
:root .admin-table :is(th, td.fw-bold, td.table-actions, .btn) { white-space: nowrap; }
:root #activeConnectionsContainer .admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-panel);
}
@container (max-width: 560px) {
  :root .admin-table.is-stackable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  :root .admin-table.is-stackable :is(tbody, tr) { display: block; width: auto; }
  :root .admin-table.is-stackable tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
  }
  :root .admin-table.is-stackable tr:last-child { border-bottom: none; }
  :root .table-scroll > .admin-table.is-stackable tr { padding-inline: 16px; } /* inside a borderless card */
  /* Label in a fixed left column; the cell content (often several inline
     pieces: name, ID, device) stays together on the right. */
  :root .admin-table.is-stackable td {
    display: flow-root; /* contains the floated label, so a two-line label grows the cell */
    --label-w: 112px;
    padding: 4px 0 4px var(--label-w);
    border-bottom: none;
    text-align: left;
    white-space: normal;
  }
  :root .admin-table.is-stackable td::before {
    content: attr(data-label);
    float: left;
    width: calc(var(--label-w) - 12px);
    margin-left: calc(var(--label-w) * -1);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
  }
  :root .admin-table.is-stackable td.table-actions {
    display: inline-flex;
    margin: 8px 8px 0 0;
    padding: 0;
    text-align: left;
  }
  :root .admin-table.is-stackable td.table-actions::before { content: none; }
}

/* Short screens (a phone turned sideways is ~390px tall): drawers scroll
   instead of squashing their contents, and every control keeps 44px. */
:root :where(.page-map) .sidebar > * { flex-shrink: 0; }
/* The map tools drawer reuses the .sidebar class, so every dashboard
   sidebar rule leaked into it: the 72px collapsed rail (>= 781px), the
   80px side rail (landscape phones) and the bottom tab bar (portrait
   phones, 65px tall). Its geometry lives here, by id, at every size. */
html #mapSidebar.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(360px, calc(100vw - 48px));
  min-width: 0;
  height: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)) !important;
  background-color: var(--panel-bg) !important;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1201;
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  flex-shrink: 0;
}
@media (pointer: coarse) {
  html #mapSidebar :is(.btn, button) { min-height: 44px; }
}
@media (min-width: 781px) {
  :root .sidebar-toggle.sidebar-toggle { width: 44px; height: 44px; }
}

/* ==========================================================================
   UTILITIES: single-purpose classes for markup and for HTML built in
   scripts. Last in the file, and written as a doubled class (.x.x) so they
   beat element-qualified rules such as ".card p" the way the inline styles
   they replaced did, without !important. If the same set repeats, make a
   component class above instead. Name = property shorthand + value
   (mt-8 = margin-top: 8px, c-text-medium = color: var(--color-text-medium)).
   ========================================================================== */
.d-grid.d-grid { display: grid; }
.row.row { display: flex; }
.row-between.row-between { display: flex; justify-content: space-between; align-items: center; }
.row-center.row-center { display: flex; align-items: center; }
.row-end.row-end { display: flex; justify-content: flex-end; }
.stack.stack { display: flex; flex-direction: column; }
.flex-1.flex-1 { flex: 1; }
.flex-wrap.flex-wrap { flex-wrap: wrap; }
.justify-center.justify-center { justify-content: center; }
.jc-flex-end.jc-flex-end { justify-content: flex-end; }
.jc-space-between.jc-space-between { justify-content: space-between; }
.ai-center.ai-center { align-items: center; }
.gap-6.gap-6 { gap: 6px; }
.gap-8.gap-8 { gap: 8px; }
.gap-10.gap-10 { gap: 10px; }
.gap-12.gap-12 { gap: 12px; }
.gap-16.gap-16 { gap: 16px; }
.gap-20.gap-20 { gap: 20px; }
.cols-fit-130.cols-fit-130 { grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); }
.gcol-full.gcol-full { grid-column: 1 / -1; }
.grid-halves.grid-halves { grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-halves-8.grid-halves-8 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-relative.pos-relative { position: relative; }
.sticky.sticky { position: sticky; }
.inline-block.inline-block { display: inline-block; }
.is-hidden.is-hidden { display: none; } /* initial state; scripts reveal with el.style.display */
.w-0.w-0 { width: 0%; }
.w-50.w-50 { width: 50px; }
.w-auto.w-auto { width: auto; }
.w-full.w-full { width: 100%; }
.h-30.h-30 { height: 30px; }
.h-35.h-35 { height: 35px; }
.h-50.h-50 { height: 50px; }
.h-100pct.h-100pct { height: 100%; }
.minw-140.minw-140 { min-width: 140px; }
.minw-180.minw-180 { min-width: 180px; }
.minw-220.minw-220 { min-width: 220px; }
.minh-1_2em.minh-1_2em { min-height: 1.2em; }
.maxw-90pct.maxw-90pct { max-width: 90%; }
.maxw-400.maxw-400 { max-width: 400px; }
.maxh-80pct.maxh-80pct { max-height: 80%; }
.scroll-400.scroll-400 { max-height: 400px; overflow-y: auto; }
.ox-auto.ox-auto { overflow-x: auto; }
.fit-cover.fit-cover { object-fit: cover; }
.resize-none.resize-none { resize: none; }
.m-0.m-0 { margin: 0; }
.m-0-0-4-0.m-0-0-4-0 { margin: 0 0 4px 0; }
.m-0-0-6-0.m-0-0-6-0 { margin: 0 0 6px 0; }
.m-2-0-8-0.m-2-0-8-0 { margin: 2px 0 8px 0; }
.m-3-0-0-0.m-3-0-0-0 { margin: 3px 0 0 0; }
.m-4-0-12-0.m-4-0-12-0 { margin: 4px 0 12px 0; }
.m-5-0-0-0.m-5-0-0-0 { margin: 5px 0 0 0; }
.m-6-0.m-6-0 { margin: 6px 0; }
.m-6-0-0.m-6-0-0 { margin: 6px 0 0; }
.m-8-0-0.m-8-0-0 { margin: 8px 0 0; }
.m-10-0.m-10-0 { margin: 10px 0; }
.m-12-0-8.m-12-0-8 { margin: 12px 0 8px; }
.my-8.my-8 { margin: 8px 0; }
.my-12.my-12 { margin: 12px 0; }
.mt-0.mt-0 { margin-top: 0; }
.mt-4.mt-4 { margin-top: 4px; }
.mt-5.mt-5 { margin-top: 5px; }
.mt-6.mt-6 { margin-top: 6px; }
.mt-8.mt-8 { margin-top: 8px; }
.mt-10.mt-10 { margin-top: 10px; }
.mt-12.mt-12 { margin-top: 12px; }
.mt-14.mt-14 { margin-top: 14px; }
.mt-15.mt-15 { margin-top: 15px; }
.mt-16.mt-16 { margin-top: 16px; }
.mt-20.mt-20 { margin-top: 20px; }
.mt-24.mt-24 { margin-top: 24px; }
.mt-28.mt-28 { margin-top: 28px; }
.mt-n6.mt-n6 { margin-top: -6px; }
.mb-1rem.mb-1rem { margin-bottom: 1rem; }
.mb-2.mb-2 { margin-bottom: 2px; }
.mb-5.mb-5 { margin-bottom: 5px; }
.mb-6.mb-6 { margin-bottom: 6px; }
.mb-10.mb-10 { margin-bottom: 10px; }
.mb-12.mb-12 { margin-bottom: 12px; }
.mb-15.mb-15 { margin-bottom: 15px; }
.mb-16.mb-16 { margin-bottom: 16px; }
.mb-20.mb-20 { margin-bottom: 20px; }
.mb-25.mb-25 { margin-bottom: 25px; }
.ml-2.ml-2 { margin-left: 2px; }
.ml-4.ml-4 { margin-left: 4px; }
.ml-5.ml-5 { margin-left: 5px; }
.ml-8.ml-8 { margin-left: 8px; }
.mr-3.mr-3 { margin-right: 3px; }
.mr-4.mr-4 { margin-right: 4px; }
.mr-5.mr-5 { margin-right: 5px; }
.p-0.p-0 { padding: 0; }
.p-1-5.p-1-5 { padding: 1px 5px; }
.p-4-8.p-4-8 { padding: 4px 8px; }
.p-6-12.p-6-12 { padding: 6px 12px; }
.p-10.p-10 { padding: 10px; }
.p-12-25.p-12-25 { padding: 12px 25px; }
.p-15.p-15 { padding: 15px; }
.p-15-20.p-15-20 { padding: 15px 20px; }
.p-16-0.p-16-0 { padding: 16px 0; }
.p-20.p-20 { padding: 20px; }
.p-24.p-24 { padding: 24px; }
.p-24-0.p-24-0 { padding: 24px 0; }
.p-25.p-25 { padding: 25px; }
.p-30.p-30 { padding: 30px; }
.py-10.py-10 { padding: 10px 0; }
.pt-2.pt-2 { padding-top: 2px; }
.pt-4.pt-4 { padding-top: 4px; }
.b-2-solid-primary.b-2-solid-primary { border: 2px solid var(--color-primary); }
.b-none.b-none { border: none; }
.bb-1-dashed-ccc.bb-1-dashed-ccc { border-bottom: 1px dashed #ccc; }
.bb-1-solid-border.bb-1-solid-border { border-bottom: 1px solid var(--color-border); }
.bt-1-solid-255-255-255-0_2.bt-1-solid-255-255-255-0_2 { border-top: 1px solid rgb(var(--ink) / 0.2); }
.bt-1-solid-255-255-255-0_08.bt-1-solid-255-255-255-0_08 { border-top: 1px solid rgb(var(--ink) / 0.08); }
.bl-4-solid-primary.bl-4-solid-primary { border-left: 4px solid var(--color-primary); }
.r-4.r-4 { border-radius: 4px; }
.r-6.r-6 { border-radius: 6px; }
.r-8.r-8 { border-radius: 8px; }
.r-12.r-12 { border-radius: 12px; }
.r-20.r-20 { border-radius: 20px; }
.bg-38bdf8.bg-38bdf8 { background: #38bdf8; }
.bg-6366f1.bg-6366f1 { background: #6366f1; }
.bg-indigo.bg-indigo { background: #6366f1; }
.bg-primary-rgb-0_1.bg-primary-rgb-0_1 { background: rgba(var(--color-primary-rgb), 0.1); }
.bg-sidebar.bg-sidebar { background: var(--color-sidebar); }
.bg-success.bg-success { background: var(--color-success); }
.o-0_5.o-0_5 { opacity: 0.5; }
.o-0_7.o-0_7 { opacity: 0.7; }
.o-0_8.o-0_8 { opacity: 0.8; }
.text-center.text-center { text-align: center; }
.text-danger.text-danger { color: var(--color-danger-text); }
.text-main.text-main { color: var(--text-main); }
.text-right.text-right { text-align: right; }
.text-success.text-success { color: var(--color-success-text); }
.c-000.c-000 { color: #000; }
.c-38bdf8.c-38bdf8 { color: #38bdf8; }
.c-53bdeb.c-53bdeb { color: #53bdeb; }
.c-60a5fa.c-60a5fa { color: #60a5fa; }
.c-68ffd1.c-68ffd1 { color: #68FFD1; }
.c-555.c-555 { color: #555; }
.c-777.c-777 { color: #777; }
.c-900.c-900 { color: #900; }
.c-f87171.c-f87171 { color: #f87171; }
.c-ffcc66.c-ffcc66 { color: #ffcc66; }
.c-fff.c-fff { color: #fff; }
.c-ffffff.c-ffffff { color: #ffffff; }
.c-info-text.c-info-text { color: var(--color-info-text); }
.c-inherit.c-inherit { color: inherit; }
.c-primary.c-primary { color: var(--color-primary); }
.c-success.c-success { color: var(--color-success); }
.c-text.c-text { color: var(--text); }
.c-text-dim.c-text-dim { color: var(--text-dim); }
.c-text-light.c-text-light { color: var(--color-text-light); }
.c-text-medium.c-text-medium { color: var(--color-text-medium); }
.c-text-muted.c-text-muted { color: var(--color-text-muted); }
.icon-amber.icon-amber { color: #fbbf24; }
.icon-green.icon-green { color: #4ade80; }
.icon-indigo.icon-indigo { color: #818cf8; }
.icon-success.icon-success { color: #22c55e; }
.fs-0_7em.fs-0_7em { font-size: 0.7em; }
.fs-0_7rem.fs-0_7rem { font-size: 0.7rem; }
.fs-0_8em.fs-0_8em { font-size: 0.8em; }
.fs-0_8rem.fs-0_8rem { font-size: 0.8rem; }
.fs-0_9rem.fs-0_9rem { font-size: 0.9rem; }
.fs-0_75rem.fs-0_75rem { font-size: 0.75rem; }
.fs-0_82rem.fs-0_82rem { font-size: 0.82rem; }
.fs-0_85em.fs-0_85em { font-size: 0.85em; }
.fs-0_85rem.fs-0_85rem { font-size: 0.85rem; }
.fs-0_95rem.fs-0_95rem { font-size: 0.95rem; }
.fs-1_2rem.fs-1_2rem { font-size: 1.2rem; }
.fs-1_3rem.fs-1_3rem { font-size: 1.3rem; }
.fs-1_4em.fs-1_4em { font-size: 1.4em; }
.fs-1_4rem.fs-1_4rem { font-size: 1.4rem; }
.fs-1_5rem.fs-1_5rem { font-size: 1.5rem; }
.fs-1_05rem.fs-1_05rem { font-size: 1.05rem; }
.fs-3rem.fs-3rem { font-size: 3rem; }
.fs-9.fs-9 { font-size: 9px; }
.fs-10.fs-10 { font-size: 10px; }
.fs-11.fs-11 { font-size: 11px; }
.fs-12.fs-12 { font-size: 12px; }
.fs-13.fs-13 { font-size: 13px; }
.fw-500.fw-500 { font-weight: 500; }
.fw-600.fw-600 { font-weight: 600; }
.fw-700.fw-700 { font-weight: 700; }
.fw-bold.fw-bold { font-weight: bold; }
.fw-normal.fw-normal { font-weight: normal; }
.ff-sans-serif.ff-sans-serif { font-family: sans-serif; }
.mono.mono { font-family: monospace; }
.ls-2.ls-2 { letter-spacing: 2px; }
.td-none.td-none { text-decoration: none; }
.td-underline.td-underline { text-decoration: underline; }
.list-none.list-none { list-style: none; }
.cursor-help.cursor-help { cursor: help; }
.cursor-pointer.cursor-pointer { cursor: pointer; }

/* ==========================================================================
   RUNTIME VALUES: a value only a script knows (a bar height, a status
   colour) is set as a custom property, style="--w: 40%", and applied here.
   This is the only kind of style="" allowed in markup or templates.
   ========================================================================== */
.dyn-w.dyn-w { width: var(--w); }
.dyn-h.dyn-h { height: var(--h); }
.dyn-c.dyn-c { color: var(--c); }
.dyn-bg.dyn-bg { background: var(--bg); }
.dyn-outline.dyn-outline { color: var(--c); border-color: var(--c); white-space: nowrap; }