:root{
    /* ==== Brand hierarchy — sampled from official Solaris GreenTech Hub quotation ==== */
    --brand-primary:#00B050;       /* primary — Solaris green, exact brand green */
    --brand-primary-mid:#0A7A3B;   /* primary, mid tone — gradients */
    --brand-primary-dark:#062617;  /* primary, dark tone — header/logo-banner black-green */
    --brand-primary-soft:#3FC97A;  /* primary, soft tone — fills, secondary highlights */
    --brand-accent:#FFA500;        /* accent — Solaris yellow, used for CTAs & key highlights only */
    --brand-accent-tint:#FFF59D;   /* accent, light tint — text/icons on dark surfaces only */
    --brand-base:#FFFFFF;          /* base — page background, white */
    --brand-ink:#101010;           /* text — near-black, matches logo banner */
    --brand-surface:#F4F7F5;       /* light neutral fill — input fields, cards */
    --brand-track:#E3EAE5;         /* light neutral fill — progress tracks, bars */

    /* ==== Functional status colors — not brand identity, used for signal only ==== */
    --status-alert:#D64545;        /* diesel spend, high urgency */
    --status-caution:#E2921D;      /* due soon, medium urgency */
    --line: rgba(16,16,16,0.14);

    /* Aliases — existing rules below reference these names */
    --forest-deep: var(--brand-primary-dark);
    --forest: var(--brand-primary-mid);
    --forest-soft: var(--brand-primary-soft);
    --gold: var(--brand-accent);
    --gold-soft: var(--brand-accent-tint);
    --cream: var(--brand-base);
    --ink: var(--brand-ink);
    --rust: var(--status-alert);
    --amber: var(--status-caution);
  }
  /* Alternating link colors — brand green then brand gold, in the order
     links appear on the page, giving them visual variety instead of one
     flat link color everywhere. */
  .link-alt-green{color:var(--brand-primary);font-weight:600;}
  .link-alt-yellow{color:var(--brand-accent);font-weight:600;}
  .link-alt-green:hover, .link-alt-yellow:hover{text-decoration:underline;}
  /* Very light, subtle tints — NOT the bold brand green/gold themselves —
     used as a full-page background wash behind each tab's content, so
     white cards and dark body text stay perfectly readable on top. */
  :root{
    --section-tint-green:#EAF8EF;
    --section-tint-yellow:#FFF6E0;
  }
  body{transition:background-color 0.25s ease;}
  *{box-sizing:border-box;}
  body{margin:0;background:var(--cream);color:var(--ink);font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.6;}
  .display{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-weight:800;letter-spacing:-0.02em;}
  .accent-text{color:var(--brand-accent);}
  .mono{font-family:'IBM Plex Mono',monospace;}

  .site-topbar{
    background:var(--brand-primary-dark);color:rgba(255,255,255,0.75);
    display:flex;justify-content:space-between;align-items:center;
    padding:9px 24px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:13px;
    flex-wrap:wrap;gap:6px;
  }
  .topbar-back, .topbar-phone{color:rgba(255,255,255,0.85);text-decoration:none;font-weight:600;}
  .topbar-back:hover, .topbar-phone:hover{color:var(--brand-accent);}

  header{
    background:linear-gradient(160deg,var(--forest-deep),var(--forest) 130%);
    color:var(--cream);
    padding:36px 24px 30px;
    position:relative;
    overflow:hidden;
    text-align:center;
  }
  .header-signup-btn{
    position:absolute;top:18px;right:20px;z-index:2;
    background:var(--brand-accent);color:var(--brand-primary-dark);
    border:none;border-radius:999px;padding:10px 20px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:700;
    cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.25);
    transition:transform .15s ease;
  }
  .header-signup-btn:hover{transform:scale(1.05);}
  @media (max-width:560px){
    .header-signup-btn{position:static;display:inline-block;margin-bottom:16px;}
  }
  header::after{
    content:"";
    position:absolute; right:-60px; top:-60px;
    width:220px;height:220px;border-radius:50%;
    border:1px solid rgba(255,245,157,0.25);
  }
  header::before{
    content:"";
    position:absolute; right:20px; top:40px;
    width:140px;height:140px;border-radius:50%;
    border:1px solid rgba(255,245,157,0.18);
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--gold-soft); margin:0 0 10px;
  }
  h1.display{font-size:clamp(30px,5vw,46px);margin:0 0 6px;line-height:1.1;}
  header p.sub{max-width:580px;color:rgba(255,255,255,0.82);font-size:17px;line-height:1.55;margin:0 auto;}

  .trust-strip{
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-top:20px;position:relative;z-index:1;
  }
  .trust-item{
    display:flex;align-items:center;gap:6px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:13px;font-weight:600;
    color:rgba(255,255,255,0.88);
  }
  .trust-icon{font-size:14px;line-height:1;}

  .trust-row{display:flex;flex-wrap:wrap;gap:8px 12px;margin-bottom:20px;}
  .trust-row.on-dark{margin:16px 0 0;}
  .trust-row.on-dark .trust-chip{
    background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.85);
  }
  .trust-chip{
    display:inline-flex;align-items:center;gap:6px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:13px;font-weight:600;
    color:var(--brand-primary-dark);background:var(--brand-surface);
    border:1px solid var(--line);padding:6px 12px;border-radius:999px;
  }

  .tab-nav-bar{
    background:var(--brand-primary-dark);padding:8px 24px;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
    position:sticky;top:0;z-index:100;
  }
  .site-logo{height:30px;width:auto;display:block;}
  /* Solaris (parent company) + GreenShift (product brand) shown together.
     Both logos have dark-green text that would disappear against the
     very dark nav bar background (#062617), so they sit on a light chip
     instead — guarantees legibility regardless of the surrounding page.
     GreenShift renders slightly smaller than Solaris to keep the visual
     hierarchy clear: Solaris is the parent, GreenShift is the product. */
  .site-logo-group{
    display:flex;align-items:center;gap:14px;background:#fff;
    border-radius:12px;padding:5px 12px;
    justify-self:start;
  }
  .site-logo-divider{width:1px;height:32px;background:rgba(6,38,23,0.15);}
  .site-logo-sub{height:24px;}
  @media (max-width:600px){
    .tab-nav-bar{padding:6px 14px;grid-template-columns:1fr;justify-items:center;}
    .site-logo-group{justify-self:center;}
  }

  /* Lives in the footer's HTML (below the copyright line), but fixed to
     the bottom of the VIEWPORT rather than sitting in normal document
     flow there — genuinely always visible regardless of scroll
     position, not just once the footer itself has been scrolled into
     view. Needs its own explicit background/shadow since fixed
     positioning takes it out of the footer's own visual context. z-index
     60 sits above .wa-float (50, see its own comment for the paired
     bottom-offset adjustment that keeps the two from overlapping). */
  .tab-quick-nav{
    display:none; /* toggled to 'flex' by showTab() — hidden entirely on Home, where there's nothing to navigate away from */
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
    background:var(--brand-primary-dark);padding:10px 16px;
    box-shadow:0 -4px 14px rgba(0,0,0,0.18);
  }
  @media (max-width:600px){ .tab-quick-nav{gap:6px;padding:8px 10px;} }

  /* account dashboard */
  .dash-hero{
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary-mid) 140%);
    color:#fff;border-radius:16px;padding:26px 24px;margin-bottom:22px;position:relative;overflow:hidden;
  }
  .dash-hero::after{
    content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
    border:1px solid rgba(255,255,255,0.12);
  }
  .dash-avatar{
    width:64px;height:64px;border-radius:50%;background:var(--brand-accent);color:var(--brand-primary-dark);
    display:flex;align-items:center;justify-content:center;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-weight:700;
    font-size:23px;letter-spacing:0;flex-shrink:0;position:relative;z-index:1;
  }
  .dash-hero-text{flex:1;min-width:180px;position:relative;z-index:1;}
  .dash-welcome{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--brand-accent-tint);margin:0 0 4px;}
  .dash-name{font-size:28px;margin:0 0 6px;line-height:1;}
  .dash-contact-row{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,0.75);}
  .dash-member-badge{
    background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
    padding:6px 12px;border-radius:999px;position:relative;z-index:1;white-space:nowrap;
  }

  .dash-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px;}
  @media (max-width:560px){ .dash-stat-grid{grid-template-columns:1fr;} }
  .dash-stat-card{
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
    border-left:3px solid var(--line);
  }
  .dash-stat-card.is-ready{border-left-color:var(--brand-primary);}
  .dash-stat-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(16,16,16,0.5);margin-bottom:6px;}
  .dash-stat-value{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-weight:700;font-size:21px;color:var(--brand-primary-dark);letter-spacing:0;}
  .dash-stat-sub{font-size:13px;color:rgba(16,16,16,0.55);margin-top:4px;}

  .dash-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;}
  @media (max-width:700px){ .dash-actions{grid-template-columns:1fr 1fr;} }
  .dash-action-card{
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 14px;
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;cursor:pointer;
    text-align:left;transition:all .15s ease;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
  .dash-action-card:hover{border-color:var(--brand-primary);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.08);}
  .dash-action-icon{font-size:23px;}
  .dash-action-title{font-weight:700;font-size:14px;color:var(--brand-primary-dark);}
  .dash-action-desc{font-size:12px;color:rgba(16,16,16,0.55);}

  .dash-signout{
    background:none;border:1px solid var(--line);color:rgba(16,16,16,0.55);
    padding:9px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
  .dash-signout:hover{border-color:var(--status-alert);color:var(--status-alert);}

  .tab-nav{
    display:flex;gap:8px;background:rgba(0,0,0,0.18);
    border-radius:11px;padding:5px;width:fit-content;margin:20px 0 0;position:relative;z-index:1;
    flex-wrap:wrap;justify-content:flex-start;align-self:flex-start;
  }
  /* Hamburger toggle — only ever shown on narrow screens (see media query
     below). Displays the currently active tab's name so it's always
     clear which tab you're on even with the menu collapsed. */
  .tab-menu-toggle{
    display:none;width:100%;align-items:center;justify-content:space-between;
    background:rgba(0,0,0,0.18);border:none;border-radius:11px;padding:12px 16px;
    color:#fff;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px;font-weight:700;
    cursor:pointer;margin-top:16px;
  }
  #tabMenuChevron{transition:transform .2s ease;font-size:13px;}
  .tab-menu-toggle[aria-expanded="true"] #tabMenuChevron{transform:rotate(180deg);}
  /* On narrow screens, the full tab grid is always shown directly
     (matching desktop's own always-visible behavior) rather than
     being collapsed behind the hamburger toggle above, which is
     hidden here since there's nothing left for it to toggle. */
  @media (max-width:760px){
    .tab-menu-toggle{display:none;}
    .tab-nav{
      display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
      width:100%;max-width:100%;margin:8px 0 0;padding:6px;
    }
    .tab-btn{justify-content:center;text-align:center;padding:12px 10px;font-size:13px;}
  }
  @media (max-width:420px){
    .tab-nav{grid-template-columns:1fr;}
  }
  .tab-btn{
    border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:700;
    padding:11px 18px;border-radius:8px;cursor:pointer;transition:all .15s ease;
    display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  }
  .tab-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--forest-deep);}
  .tab-ico{font-size:16px;line-height:1;}
  .tab-btn.active{background:var(--gold);border-color:var(--gold);color:var(--forest-deep);}

  main{max-width:1080px;margin:0 auto;padding:36px 24px 80px;}
  @media (max-width:480px){ main{padding:24px 14px 64px;} }
  .tabpanel{display:none;}
  .tabpanel.active{display:block;}

  .sector-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;}
  .pill{
    border:1px solid var(--line); background:#fff;
    padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;
    cursor:pointer;transition:all .15s ease; color:var(--ink);
  }
  .pill:hover{border-color:var(--forest-soft);}
  .pill.active{background:var(--forest);border-color:var(--forest);color:#fff;}

  .grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start;}
  .grid>*{min-width:0;}
  @media (max-width:820px){ .grid{grid-template-columns:1fr;} }

  .card{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:22px 22px 24px;
  }
  .card h2.display{font-size:26px;margin:0 0 4px;letter-spacing:-0.02em;}
  .card .hint{font-size:13px;color:rgba(16,16,16,0.55);margin:0 0 16px;}

  /* Scoped to button.card specifically (the 8 clickable Home
     navigation cards) rather than .card generally, since .card is
     also used throughout the app for plain, non-clickable content
     containers (admin panels, the Terms display, etc.) — those
     shouldn't gain hover/press feedback that implies an interactivity
     they don't have. Mirrors .btn:active's existing scale(0.97) press
     feedback for consistency with the rest of the app's buttons. */
  button.card{transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;}
  button.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,16,16,0.1);border-color:rgba(16,16,16,0.2);}
  button.card:active{transform:scale(0.97);box-shadow:0 2px 6px rgba(16,16,16,0.08);}

  /* Wraps just the title text inside each Home navigation card in its
     own solid-fill badge — matching the same visual weight as the
     header's Cart button — rather than leaving it as plain text
     floating inside the card's own, separate white/bordered shape.
     inline-block so it sizes to the title text itself, not the full
     card width. */
  .card-title-btn{
    display:inline-block;background:var(--forest);color:#fff;
    padding:9px 16px;border-radius:8px;font-weight:700;font-size:16px;
    margin:0 0 8px;transition:background 0.15s ease, color 0.15s ease;
  }
  /* Triggered by the whole card being hovered, not just this badge on
     its own — the card is the actual clickable target, so hovering
     anywhere on it (not only this small inner element) should show the
     feedback. Swaps to the same gold/dark-text pairing already used by
     the Sign Up/Sign In button, rather than just darkening the
     existing green. */
  button.card:hover .card-title-btn{background:var(--gold);color:var(--forest-deep);}

  table{width:100%;border-collapse:collapse;font-size:14px;}
  /* iOS Safari automatically zooms the whole page in when a tapped input's
     font-size is under 16px — happens on every text field, select, and
     textarea in this app, since most were styled at 13-14px for visual
     consistency with the surrounding text. Rather than hunting down every
     scattered inline font-size across 11 admin panels and dozens of forms,
     this one rule guarantees no input can trigger that zoom, while leaving
     the visual size unchanged on desktop where the bug doesn't happen. */
  @media (max-width:600px){
    input, select, textarea{font-size:17px !important;}
  }
  /* Tables (appliance builder, quotation breakdown) have enough columns
     that squeezing them to fit a narrow phone makes text unreadable.
     display:block + overflow-x:auto lets the table keep its natural
     width and simply scroll sideways within its own row, rather than
     breaking the surrounding page layout or wrapping cell text illegibly. */
  @media (max-width:560px){
    table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
    table thead, table tbody{display:table;width:100%;min-width:480px;}
  }
  th{
    text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11px;
    text-transform:uppercase;letter-spacing:0.08em;color:rgba(16,16,16,0.5);
    padding:0 6px 8px;border-bottom:1px solid var(--line);font-weight:600;
  }
  td{padding:7px 6px;border-bottom:1px solid rgba(16,16,16,0.07);vertical-align:middle;}
  td input{
    width:100%;border:1px solid var(--line);border-radius:6px;padding:6px 7px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;background:#F4F7F5;
  }
  td input.name{min-width:110px;}
  .rm-btn{
    background:none;border:none;color:var(--rust);cursor:pointer;font-size:17px;
    line-height:1;padding:4px;
  }
  .add-row{
    margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;
  }
  .add-row input{
    border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:14px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background:#F4F7F5;
  }
  #newName{flex:1.4;min-width:120px;}
  #newWatts,#newQty,#newHours{width:78px;}
  .btn{
    border:none;border-radius:8px;padding:9px 16px;font-weight:600;font-size:14px;
    cursor:pointer;transition:transform .1s ease;
  }
  .btn:active{transform:scale(0.97);}
  .btn-gold{background:var(--gold);color:var(--forest-deep);}
  .btn-forest{background:var(--forest);color:#fff;}
  .btn-outline{background:none;border:1px solid var(--line);color:var(--ink);}

  .meter-card{position:sticky;top:20px;background:var(--brand-surface);padding:28px 24px;}
  @media (max-width:820px){ .meter-card{position:static;} }
  .meter-wrap{display:flex;flex-direction:column;align-items:center;padding:6px 0 4px;}
  .dial-svg{max-width:260px;}
  .meter-figures{display:flex;justify-content:space-between;width:100%;margin-top:14px;}
  .fig{text-align:center;flex:1;min-width:0;}
  .fig .num{font-family:'IBM Plex Mono',monospace;font-size:23px;font-weight:600;color:var(--forest-deep);}
  .fig .lbl{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(16,16,16,0.5);margin-top:2px;}
  .divider{width:1px;background:var(--line);margin:2px 4px;}
  @media (max-width:480px){
    .meter-card{padding:16px 16px 18px;}
    .meter-card h2.display{font-size:21px;}
    .dial-svg{max-width:200px;}
    .fig .num{font-size:20px;}
    .fig .lbl{font-size:10px;}
  }

  .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px;}
  .field-grid>div{min-width:0;}
  @media (max-width:480px){ .field-grid{grid-template-columns:1fr;} }
  @media (max-width:520px){ .field-grid{grid-template-columns:1fr;} }
  label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:rgba(16,16,16,0.7);}
  .field-grid input, .field-grid select{
    width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;background:#F4F7F5;
  }

  .generate-wrap{text-align:center;margin:30px 0 6px;}
  .generate-wrap .btn{padding:14px 34px;font-size:15px;border-radius:10px;background:var(--gold);color:var(--forest-deep);}
  .generate-wrap .btn:disabled{opacity:0.55;cursor:progress;}
  .gen-hint{font-size:13px;color:rgba(16,16,16,0.5);margin-top:8px;}

  #results{display:none;margin-top:40px;}
  .section-label{
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--forest);margin:0 0 10px;
  }
  .sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px;}
  @media (max-width:700px){ .sys-grid{grid-template-columns:1fr;} }
  .sys-card{
    background:var(--forest-deep);color:var(--cream);border-radius:12px;padding:18px 18px 16px;
  }
  .sys-card .big{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-weight:800;font-size:36px;color:var(--gold-soft);line-height:1.1;}
  .sys-card .lbl{font-size:12px;color:rgba(255,255,255,0.7);margin-top:6px;}
  .sys-card .sub{font-size:13px;color:rgba(255,255,255,0.55);margin-top:8px;line-height:1.4;}

  .spend-card{
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:26px;
  }
  .bar-row{display:flex;align-items:center;gap:12px;margin:10px 0;}
  .bar-lbl{width:130px;font-size:13px;font-weight:600;flex-shrink:0;}
  .bar-track{flex:1;background:#E3EAE5;border-radius:6px;height:22px;overflow:hidden;}
  .bar-fill{height:100%;border-radius:6px 0 0 6px;display:flex;align-items:center;}
  .bar-fill.rust{background:var(--rust);}
  .bar-fill.forest{background:var(--forest-soft);}
  .bar-val{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;width:130px;text-align:right;}

  .narrative{
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:26px;
    font-size:15px;line-height:1.65;
  }
  .narrative h3{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:21px;margin:0 0 10px;letter-spacing:0.03em;color:var(--forest-deep);}
  .narrative ul{margin:10px 0 0;padding-left:20px;}
  .narrative li{margin-bottom:6px;}
  #loadingNote, #diagLoadingNote, #dieselLoadingNote{font-size:14px;color:rgba(16,16,16,0.55);font-style:italic;}

  .cta-block{
    background:linear-gradient(160deg,var(--forest-deep),var(--forest) 140%);
    border-radius:16px;padding:28px 26px 26px;color:var(--cream);
  }
  .cta-block h2.display{font-size:32px;margin:0 0 6px;line-height:1.1;}
  .cta-block p.lead{font-size:14px;color:rgba(255,255,255,0.75);margin:0 0 20px;max-width:520px;}
  .tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .tier-grid>*{min-width:0;}
  .tier-grid.tier-grid-3{grid-template-columns:repeat(3,1fr);}
  @media (max-width:820px){ .tier-grid.tier-grid-3{grid-template-columns:1fr 1fr;} }
  /* Both rules below need to explicitly name .tier-grid-3, not just
     .tier-grid — the 820px rule above has higher specificity (two
     classes) than a plain .tier-grid rule (one class), so without this,
     a plain .tier-grid{grid-template-columns:1fr} rule would lose to the
     820px rule even on the narrowest phones, since CSS specificity wins
     regardless of which media query comes later. This is exactly what
     was causing Base/Premium/Quotation to stay squeezed into 2 columns
     instead of stacking, even on small screens. */
  @media (max-width:600px){
    .tier-grid{grid-template-columns:1fr;}
    .tier-grid.tier-grid-3{grid-template-columns:1fr;}
  }
  .tier{
    background:rgba(255,255,255,0.06);border:1px solid rgba(255,245,157,0.3);
    border-radius:12px;padding:18px 18px 20px;
  }
  .tier.premium{border-color:var(--gold);background:rgba(255,245,157,0.1);}
  .tier .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-soft);}
  .tier .price{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-weight:800;font-size:34px;margin:6px 0 10px;}
  .tier ul{margin:0;padding-left:18px;font-size:13px;line-height:1.7;color:rgba(255,255,255,0.85);}
  .tier-note{font-size:12px;color:rgba(255,255,255,0.55);margin-top:16px;}
  .tier-pay-btn{
    display:block;width:100%;box-sizing:border-box;text-align:center;text-decoration:none;
    margin-top:16px;padding:11px;font-size:14px;
  }

  /* maintenance-specific */
  .profile-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px;}
  .mini-field{flex:1;min-width:110px;}
  .mini-field label{font-size:12px;}
  .mini-field input{
    width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;background:#F4F7F5;
  }
  .sched-table th{padding-bottom:8px;}
  .status-badge{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.04em;
    padding:3px 9px;border-radius:999px;font-weight:600;display:inline-block;
  }
  .status-ok{background:rgba(46,122,79,0.14);color:var(--forest);}
  .status-soon{background:rgba(201,122,43,0.16);color:var(--amber);}
  .status-overdue{background:rgba(214,69,69,0.18);color:var(--rust);}

  .diag-input{
    width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px;background:#F4F7F5;
    resize:vertical;min-height:76px;
  }
  .urgency-badge{
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
    padding:5px 12px;border-radius:999px;font-weight:700;display:inline-block;margin-bottom:12px;
  }
  .urgency-low{background:rgba(46,122,79,0.14);color:var(--forest);}
  .urgency-medium{background:rgba(201,122,43,0.16);color:var(--amber);}
  .urgency-high{background:rgba(214,69,69,0.2);color:var(--rust);}

  /* diesel calculator */
  .share-preview{
    background:linear-gradient(160deg,var(--brand-primary-dark),var(--brand-primary-mid) 140%);
    border-radius:16px;padding:32px 26px;text-align:center;color:#fff;position:relative;overflow:hidden;
  }
  .share-preview::after{
    content:"";position:absolute;right:-30px;bottom:-30px;width:140px;height:140px;border-radius:50%;
    border:1px solid rgba(255,255,255,0.12);
  }
  .share-preview-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--brand-accent-tint);margin-bottom:14px;position:relative;z-index:1;}
  .share-preview-figure{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-weight:800;font-size:clamp(36px,7vw,58px);letter-spacing:-0.02em;color:var(--brand-accent);position:relative;z-index:1;}
  .share-preview-sub{font-size:16px;color:rgba(255,255,255,0.85);margin-top:8px;position:relative;z-index:1;}
  .share-preview-cta{font-size:13px;color:rgba(255,255,255,0.6);margin-top:18px;position:relative;z-index:1;}
  .referral-progress{margin-top:18px;}
  .referral-track{background:var(--brand-track);border-radius:999px;height:10px;overflow:hidden;}
  .referral-fill{height:100%;background:var(--brand-primary);border-radius:999px;transition:width .4s ease;}
  .referral-label{font-size:13px;color:rgba(16,16,16,0.6);margin-top:8px;text-align:center;}
  .diesel-hero{
    background:linear-gradient(160deg,var(--forest-deep),#1a2e1f 140%);
    border-radius:16px;padding:30px 26px 26px;color:var(--cream);margin-bottom:26px;position:relative;overflow:hidden;
  }
  .diesel-hero::before{
    content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;
    background:radial-gradient(circle,rgba(214,69,69,0.25),transparent 70%);
  }
  .ticker-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:6px;}
  .ticker-num{font-family:'IBM Plex Mono',monospace;font-size:clamp(30px,6vw,52px);font-weight:600;color:#FFA500;position:relative;z-index:1;}
  .ticker-sub{font-size:13px;color:rgba(255,255,255,0.6);margin-top:6px;}

  .diesel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0;}
  @media (max-width:700px){ .diesel-stats{grid-template-columns:1fr;} }
  .stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;}
  .stat-card .num{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-weight:700;font-size:32px;color:#FFA500;line-height:1.1;}
  .stat-card .lbl{font-size:12px;color:rgba(16,16,16,0.55);margin-top:6px;}

  .timeline-wrap{display:flex;align-items:flex-end;gap:12px;height:180px;margin:22px 0 8px;padding:0 4px;}
  .tl-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
  .tl-bar{width:100%;max-width:56px;background:linear-gradient(180deg,var(--amber),var(--rust));border-radius:6px 6px 0 0;transition:height .6s ease;}
  .tl-val{font-family:'IBM Plex Mono',monospace;font-size:11px;margin-top:6px;color:rgba(16,16,16,0.65);text-align:center;}
  .tl-year{font-size:12px;color:rgba(16,16,16,0.5);margin-top:2px;}

  /* light iq a-z */
  .quiz-card{}
  .quiz-progress-row{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:rgba(16,16,16,0.6);margin-bottom:8px;}
  .quiz-progress-track{background:var(--brand-track);border-radius:999px;height:8px;overflow:hidden;margin-bottom:22px;}
  .quiz-progress-fill{height:100%;background:var(--brand-primary);border-radius:999px;transition:width .3s ease;}
  .quiz-question{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-weight:700;font-size:19px;margin:0 0 18px;color:var(--brand-primary-dark);line-height:1.35;}
  .quiz-options{display:flex;flex-direction:column;gap:10px;}
  .quiz-option{
    text-align:left;padding:13px 16px;border:1px solid var(--line);border-radius:10px;background:var(--brand-surface);
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s ease;color:var(--brand-ink);
  }
  .quiz-option:hover:not(:disabled){border-color:var(--brand-primary);transform:translateX(2px);}
  .quiz-option.correct{background:rgba(0,176,80,0.14);border-color:var(--brand-primary);color:var(--brand-primary-dark);}
  .quiz-option.wrong{background:rgba(214,69,69,0.1);border-color:var(--status-alert);color:var(--status-alert);}
  .quiz-option:disabled{cursor:default;}

  .lightiq-hero{
    background:linear-gradient(160deg,var(--forest-deep),var(--forest) 140%);
    border-radius:16px;padding:28px 26px 26px;color:var(--cream);margin-bottom:26px;
    position:relative;overflow:hidden;text-align:center;
  }
  .lightiq-hero::before{
    content:"";position:absolute;left:-40px;top:-50px;width:180px;height:180px;border-radius:50%;
    border:1px solid rgba(255,245,157,0.2);
  }
  .totd-letter{font-size:68px;color:var(--gold-soft);line-height:1;position:relative;z-index:1;}
  .totd-title{font-size:28px;margin:6px 0 8px;position:relative;z-index:1;}
  .totd-tagline{font-size:14px;color:rgba(255,255,255,0.8);max-width:480px;margin:0 auto;position:relative;z-index:1;}

  .letter-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:8px;}
  @media (max-width:700px){ .letter-grid{grid-template-columns:repeat(7,1fr);} }
  @media (max-width:420px){ .letter-grid{grid-template-columns:repeat(6,1fr);} }
  .letter-btn{
    aspect-ratio:1;border:1px solid var(--line);background:#F4F7F5;border-radius:8px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-weight:700;font-size:18px;color:var(--forest-deep);
    cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;
  }
  .letter-btn:hover{border-color:var(--forest-soft);}
  .letter-btn.active{background:var(--gold);border-color:var(--gold);color:var(--forest-deep);}

  .letter-detail-head{display:flex;gap:16px;align-items:center;margin-bottom:16px;}
  .letter-detail-big{
    font-size:55px;color:var(--gold);background:var(--forest-deep);border-radius:12px;
    width:66px;height:66px;flex-shrink:0;display:flex;align-items:center;justify-content:center;line-height:1;
  }
  .detail-tips{margin:0;padding-left:20px;font-size:14px;line-height:1.8;}
  .detail-tips li{margin-bottom:6px;}

  /* footer */
  .site-footer{
    background:var(--brand-primary-dark);color:rgba(255,255,255,0.85);
    padding:36px 24px 75px;margin-top:20px; /* bottom raised from 20px to clear .tab-quick-nav, fixed at the very bottom of the screen on non-Home tabs */
  }
  .footer-inner{
    max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
  }
  .footer-brand{flex:1.6;min-width:220px;}
  .footer-col, .footer-contact{flex:1;min-width:130px;}
  .footer-name{font-size:23px;color:var(--brand-accent-tint);margin:0 0 6px;letter-spacing:0.04em;}
  .footer-tag{font-size:14px;color:rgba(255,255,255,0.65);max-width:360px;line-height:1.5;margin:0 0 12px;}
  .footer-badges{display:flex;gap:8px;flex-wrap:wrap;}
  .footer-badge{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;
    border:1px solid rgba(255,255,255,0.25);padding:5px 10px;border-radius:999px;color:rgba(255,255,255,0.8);
  }
  .footer-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin:0 0 10px;}
  .footer-link{display:block;color:#fff;font-size:15px;font-weight:600;text-decoration:none;margin-bottom:8px;}
  .footer-link:hover{color:var(--brand-accent-tint);}
  .footer-loc{font-size:14px;color:rgba(255,255,255,0.65);margin:10px 0 0;}
  .footer-bottom{
    max-width:1080px;margin:26px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,0.12);
    font-size:12px;color:rgba(255,255,255,0.45);text-align:center;
  }

  /* floating WhatsApp CTA */
  /* Campaign banner — styled and animated like an old-school LED
     scrolling sign: dark background, glowing amber monospace text,
     continuous right-to-left scroll. The two .campaign-led-item spans
     inside the track are identical copies placed back-to-back — the
     animation slides the whole track left by exactly one copy's width,
     then snaps back to 0, which (since the two copies are identical)
     is visually seamless — no visible jump or gap in the loop. */
  .campaign-led-item{
    font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;
    color:#FFB300;letter-spacing:1.5px;padding-right:64px;flex-shrink:0;
    text-shadow:0 0 4px rgba(255,179,0,0.65), 0 0 10px rgba(255,179,0,0.35);
  }
  @keyframes ledScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  #campaignBannerTrack.led-scrolling{animation:ledScroll 16s linear infinite;}
  /* Respect users who've asked their device to reduce motion — the
     message still shows, it just doesn't scroll. */
  @media (prefers-reduced-motion: reduce){
    #campaignBannerTrack.led-scrolling{animation:none;}
    #campaignBanner{overflow-x:auto;}
  }

  /* Recent Projects gallery — continuous horizontal slider. Same
     reliable approach used for the campaign banner marquee: the image
     set is duplicated back-to-back in the track, and a fixed-duration
     CSS animation slides exactly one copy's width left before snapping
     to 0 — since both copies are identical, the loop point is invisible.
     Deliberately NOT using JS to measure widths/set durations dynamically
     (an earlier attempt at that for the campaign banner turned out to be
     a real reliability risk) — everything here is plain CSS. */
  .gallery-slider-track{
    display:inline-flex;gap:12px;padding:0 22px;will-change:transform;
  }
  .gallery-slider-track.sliding{animation:gallerySlide 40s linear infinite;}
  .gallery-slider:hover .gallery-slider-track.sliding{animation-play-state:paused;}
  @keyframes gallerySlide{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .gallery-card{
    flex-shrink:0;width:220px;border-radius:10px;overflow:hidden;
    background:var(--brand-surface);
  }
  .gallery-img-wrap{width:100%;height:150px;}
  .gallery-card .cap{padding:8px 10px;}
  @media (max-width:480px){
    .gallery-card{width:170px;}
    .gallery-img-wrap{height:115px;}
  }
  @media (prefers-reduced-motion: reduce){
    .gallery-slider-track.sliding{animation:none;}
    .gallery-slider{overflow-x:auto;}
  }

  .site-footer{
    background:var(--brand-primary-dark);color:rgba(255,255,255,0.85);
    padding:36px 24px 75px;margin-top:40px; /* bottom raised from 20px to clear .tab-quick-nav, fixed at the very bottom of the screen on non-Home tabs */
  }
  .footer-inner{
    max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;
    justify-content:space-between;gap:28px;
  }
  .footer-brand{display:flex;flex-direction:column;gap:8px;}
  /* align-self:flex-start prevents the exact flexbox-stretch bug found
     and fixed earlier: footer-brand is a flex-direction:column container,
     and column-direction flex containers default to stretching their
     items along the width (the cross-axis for a column) — without this,
     the logo group would distort/stretch to fill the footer's full width. */
  .footer-brand .site-logo-group{align-self:flex-start;}
  .footer-tagline{margin:0;font-size:13px;color:rgba(255,255,255,0.55);letter-spacing:0.02em;}
  .footer-contact{display:flex;flex-direction:column;gap:10px;}
  .footer-item{display:flex;align-items:flex-start;gap:9px;font-size:14px;}
  .footer-icon{flex-shrink:0;font-size:16px;line-height:1.4;}
  .footer-item a{color:rgba(255,255,255,0.85);text-decoration:none;}
  .footer-item a:hover{color:#FFA500;text-decoration:underline;}
  .footer-copyright{
    max-width:1080px;margin:28px auto 0;padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.12);font-size:12px;
    color:rgba(255,255,255,0.4);text-align:center;
  }
  @media (max-width:600px){
    .footer-inner{flex-direction:column;gap:20px;}
  }

  /* FAQ accordion — native <details>/<summary>, no JS needed at all, so
     it can't be affected by any script error elsewhere on the page. */
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item:last-child{border-bottom:none;}
  .faq-item summary{
    list-style:none;cursor:pointer;padding:16px 4px;font-weight:700;
    font-size:15px;display:flex;justify-content:space-between;
    align-items:center;gap:12px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:'+';flex-shrink:0;font-size:21px;font-weight:400;
    color:var(--brand-primary);line-height:1;transition:transform .2s ease;
  }
  .faq-item[open] summary::after{content:'−';}
  .faq-item summary:hover{color:var(--brand-primary);}
  .faq-item p{margin:0 0 16px;padding:0 4px;font-size:14px;color:rgba(16,16,16,0.65);line-height:1.6;}

  .wa-float{
    position:fixed;right:20px;bottom:76px;z-index:50; /* bottom raised from the original 20px to clear .tab-quick-nav, a fixed bar of its own at the very bottom of the screen */
    width:56px;height:56px;border-radius:50%;
    background:#25D366;color:#fff;font-size:28px;
    display:flex;align-items:center;justify-content:center;
    text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,0.28);
    transition:transform .15s ease;
  }
  .wa-float:hover{transform:scale(1.08);}

  /* Mobile-only floating cart button, mirroring .wa-float but on the
     left side — desktop keeps the existing header cart button
     unchanged, this is purely a mobile-view replacement for it. Hidden
     by default (display:none) and only switched on within the mobile
     breakpoint below, alongside hiding the header button there. */
  .cart-float{
    display:none;
    position:fixed;left:20px;bottom:76px;z-index:50; /* same bottom offset as .wa-float, for the same reason: clears .tab-quick-nav */
    width:56px;height:56px;border-radius:50%;
    background:var(--brand-primary-dark);color:#fff;font-size:28px;
    align-items:center;justify-content:center;
    text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,0.28);
    transition:transform .15s ease;
  }
  .cart-float:hover{transform:scale(1.08);}
  .cart-float-badge{
    position:absolute;top:-4px;right:-4px;
    background:var(--brand-accent);color:#1A1A1A;
    font-size:12px;font-weight:700;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    min-width:20px;height:20px;border-radius:10px;padding:0 5px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
  }
  /* Hides the header's own Cart button and shows the floating one
     instead — decoupled from .tab-nav-bar's own, narrower single-
     column breakpoint (600px) since this is a different concern: at
     medium widths, wider than 600px but too narrow to comfortably fit
     all 3 header buttons side by side, the header row itself doesn't
     need to stack yet, but the 3-button row would otherwise wrap the
     Cart button onto an awkward second line. Switching to the floating
     button here avoids that entirely, the same way it already does on
     genuinely narrow/mobile screens. */
  @media (max-width:920px){
    #headerCartBtn{display:none;}
    .cart-float{display:flex;}
  }

  /* sign-up gate */
  .signup-overlay{
    position:fixed;inset:0;background:rgba(6,38,23,0.72);z-index:100;
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  /* Opened by clicking a Recent Projects photo — a darker, image-focused
     overlay (not the white signup-modal card style) so the enlarged
     photo itself is the focus, with its caption/location overlaid
     directly on top of the image rather than in a separate block below
     it. Clicking the dark backdrop closes it, matching standard
     lightbox behavior; clicking the image/caption itself doesn't
     (stopPropagation on that inner wrapper), so the photo remains
     clickable/readable without accidentally closing the view. */
  .project-lightbox-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:200;
    display:none;align-items:center;justify-content:center;padding:20px;
    cursor:zoom-out;
  }
  .project-lightbox-inner{
    position:relative;max-width:90vw;max-height:85vh;cursor:default;
  }
  .project-lightbox-inner img{
    max-width:90vw;max-height:85vh;display:block;border-radius:8px;
    object-fit:contain;
  }
  .project-lightbox-caption{
    position:absolute;left:0;right:0;bottom:0;
    background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
    padding:36px 20px 16px;border-radius:0 0 8px 8px;
    color:#fff;text-align:left;
  }
  .project-lightbox-close{
    position:absolute;top:-44px;right:0;background:none;border:none;
    color:#fff;font-size:28px;cursor:pointer;padding:6px 10px;line-height:1;
  }
  .signup-modal{
    background:#fff;border-radius:16px;padding:30px 26px 24px;max-width:400px;width:100%;
    position:relative;box-shadow:0 20px 50px rgba(0,0,0,0.3);text-align:center;
  }
  .signup-fields input, .signup-fields select, .signup-fields textarea{text-align:left;}
  .signup-close{
    position:absolute;top:14px;right:14px;background:none;border:none;font-size:17px;
    cursor:pointer;color:rgba(16,16,16,0.45);padding:6px;
  }
  .signup-eyebrow{
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--status-alert);margin:0 0 6px;font-weight:600;
  }
  .signup-modal h2.display{font-size:28px;margin:0 0 8px;line-height:1;}
  .signup-fields{display:flex;flex-direction:column;gap:10px;margin:18px 0 6px;}
  /* Toggled on #accountTabContent only while signed out (signup/signin/
     forgot-password forms) — centers the heading, hint text, and
     inline-block buttons within the wide <main> container instead of
     them sitting at its left edge. Removed once signed in, since the
     dashboard view (Quick Actions, Danger Zone, etc.) is meant to stay
     left-aligned. The descendant rule below centers .signup-fields
     itself (a flex block with its own max-width set inline) only in
     this scoped context — .signup-fields is also reused by every admin
     panel's password-unlock field elsewhere, which must stay
     left-aligned within its own card, so this can't be a global change. */
  .centered-form{text-align:center;}
  .centered-form .signup-fields{margin-left:auto;margin-right:auto;}
  /* Password show/hide toggle — wraps any <input type="password"> with a
     tap-to-reveal eye button, mainly for mobile where re-checking a typo
     without a visible keyboard/mouse cursor is much harder than on
     desktop. Deliberately defensive on width/box-sizing so it behaves
     the same whether the field sits inside a flex column (.signup-fields)
     or a plain block container — both patterns exist across the app's 19
     password fields, and this needed to work identically in either. */
  .pw-field-wrap{position:relative;width:100%;}
  .pw-field-wrap input{width:100%;box-sizing:border-box;padding-right:42px !important;}
  .pw-toggle-btn{
    position:absolute;right:4px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;font-size:18px;line-height:1;
    padding:8px;color:rgba(16,16,16,0.45);
  }
  .pw-toggle-btn:hover{color:rgba(16,16,16,0.75);}
  .signup-fields input, .signup-fields select{
    border:1px solid var(--line);border-radius:8px;padding:11px 13px;font-size:15px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;background:var(--brand-surface);
  }
  .signup-error{color:var(--status-alert);font-size:13px;margin:0 0 10px;font-weight:600;}
  .signup-fineprint{font-size:12px;color:rgba(16,16,16,0.5);text-align:center;margin:12px 0 0;}
  .usage-badge{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(16,16,16,0.55);margin-top:8px;
  }

  ::selection{background:var(--gold-soft);}