:root{
      --bg: radial-gradient(1200px 800px at 10% 10%, #102033 0%, #0b1322 45%, #08121f 100%);
      --ink:#0b1726; --ink-2:#0e2037; --glass:#0f2338cc; --glass-2:#0f1d30cc; --border: rgba(120,200,255,.25);
      --ring: #00c3ff; --ring-2:#65f1ff; --ring-soft: rgba(0,195,255,.25);
      --text:#e6f3ff; --text-dim:#aac6da; --muted:#8fb2c7; --ok:#6af0a7; --warn:#ffd166; --bad:#ff6b6b;
      --white:#fff; --shadow: 0 20px 60px rgba(2,10,20,.55), inset 0 1px 0 rgba(255,255,255,.06);
      --radius:18px; --radius-lg:24px; --radius-pill:999px; --blur:14px; --pop:cubic-bezier(.22,1,.36,1);
      --card-gap:18px; --card-pad:18px; --z-modal:50; --z-fab:40; --focus:#7ce3ff;
      /* Ad/promo palette */
--ad-bg:    #2a2412cc;   /* dark amber wash */
--ad-bg-2:  #1f1a0dcc;   /* deeper base */
--ad-border:#ffb30055;   /* amber border glow */
--ad-accent:#ffbf47;     /* headline accent */
    }
    @media (prefers-color-scheme: light){
      :root{ --bg: radial-gradient(1200px 800px at 10% 10%, #f0fbff 0%, #dfefff 45%, #cfe7ff 100%);
             --ink:#e8f6ff; --glass:#ffffffcc; --glass-2:#f6fbffcc; --text:#0a2235; --text-dim:#27445c;
             --muted:#3f6a89; --shadow: 0 20px 60px rgba(0,40,80,.18), inset 0 1px 0 rgba(255,255,255,.85);
             --border: rgba(0,60,120,.15);
            --ad-bg:    #fff7e6cc;
            --ad-bg-2:  #fff2d6cc;
            --ad-border:#ffb30055;
            --ad-accent:#b35c00; }
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0; background:var(--bg); color:var(--text);
         font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
    [hidden]{display:none !important}

    /* ────────────────────────────── */
    /* .shell — keep your width; add vertical stretch */
    /* ────────────────────────────── */
    .shell{
      max-width:1200px;
      margin-inline:auto;
      padding:clamp(16px,2vw,24px);

      /* added: let the grid fill the viewport height under the header */
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header.app{display:flex; align-items:center; gap:14px; margin-bottom:24px}
    .brand{display:flex; align-items:center; gap:12px}
    .logo{width:42px; height:42px; border-radius:12px; background:linear-gradient(160deg,var(--ring),var(--ring-2));
          box-shadow:0 10px 30px var(--ring-soft), inset 0 0 20px rgba(255,255,255,.3)}
    .title{font-size:clamp(22px,2vw,28px); font-weight:700; letter-spacing:.2px}
    .subtitle{color:var(--text-dim); font-size:14px}

    /* === 4-column grid (shapes • inputs • results • ads) === */
.grid{
  display:grid;
  /* Rectangles • Inputs • Results • Ads (min 320px) */
  grid-template-columns:
    minmax(200px, .9fr)
    minmax(300px, 1.2fr)
    minmax(600px, 1.8fr)
    minmax(320px, 1.1fr);
  gap:var(--card-gap);
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
@media (min-width:1101px){
  .grid{ grid-template-rows: 1fr; }
}
/* Tablet: 2 columns; Results span both; Ads drops below Results */
@media (max-width:1100px){
  .grid{ grid-template-columns: 1fr 1fr; }
  #card-shapes{  order:1; }
  #card-inputs{  order:2; }
  #card-results{ order:3; grid-column: 1 / -1; }
  #card-ads{     order:4; grid-column: 1 / -1; }
}
/* Phone: single column */
@media (max-width:820px){
  .grid{ grid-template-columns: 1fr; }
  #card-results, #card-ads{ grid-column:auto; }
}


    .card{position:relative; background:linear-gradient(180deg,var(--glass),var(--glass-2));
          border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow);
          padding:var(--card-pad); backdrop-filter: blur(var(--blur)); transition: box-shadow .35s var(--pop);}
    /* === Ads column look & feel === */
#card-ads{
  background: linear-gradient(180deg, var(--ad-bg), var(--ad-bg-2));
  border-color: var(--ad-border);
  box-shadow:
    0 20px 60px rgba(255, 179, 0, .18),
    inset 0 1px 0 rgba(255,255,255,.10);
}
#card-ads:hover{
  box-shadow:
    0 30px 80px rgba(255, 179, 0, .28),
    inset 0 1px 0 rgba(255,255,255,.12);
}
#card-ads h2{ color: var(--ad-accent); }
#card-ads .muted{ color: rgba(255, 191, 71, .85); }

    #card-ads .ad-wrap{
  background:#fff;
  color:#222;
  border:2px solid #ba372a;
  border-radius:12px;
  padding:10px;
  box-shadow:0 0 10px rgba(0,0,0,.08);
  font-family: 'Segoe UI', system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial;
}
#card-ads .ad-title{
  color:#ba372a;
  text-align:center;
  margin:0 0 8px;
  font-size:20px;
  font-weight:800;
}
#card-ads .ad-row{ text-align:center; margin:10px 0; font-weight:600; font-size:14px; }
#card-ads .ad-row a{ color:#ba372a; text-decoration: underline; }

/* contact tiles: 3-up when there’s room, otherwise stack */
#card-ads .ad-contacts{ display:grid; grid-template-columns: 1fr; gap:8px; }
@media (min-width: 380px){ #card-ads .ad-contacts{ grid-template-columns: repeat(3, 1fr); } }

#card-ads .person{
  text-align:center; border:1px solid #ccc; border-radius:10px; padding:6px;
}
#card-ads .person img.avatar{ width:60px; height:60px; border-radius:50%; display:block; margin:6px auto; }
#card-ads .person img.whatsapp{ width:55px; height:55px; margin-top:4px; }

#card-ads .hosted{ text-align:center; margin-top:8px; font-size:12px; color:#555; }
#card-ads .hosted img{ max-width:100%; height:auto; display:block; margin:8px auto 0; }

/* Make the Ads card a container so its children can respond to its width */
#card-ads{ container-type: inline-size; }

/* Default: stack */
#card-ads .ad-contacts{ display:grid; grid-template-columns: 1fr; gap:8px; }

/* Grow to 2-up and then 3-up as the ad column widens */
@container (min-width: 460px){
  #card-ads .ad-contacts{ grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 640px){
  #card-ads .ad-contacts{ grid-template-columns: repeat(3, 1fr); }
}

    .card:hover{ box-shadow: 0 30px 80px rgba(0,40,80,.55) }
    .card h2{margin:0 0 12px 0; font-size:18px; letter-spacing:.3px}

    /* Results card gets a positioned PDF button */
#card-results{ position: relative; z-index: 1; }

/* PDF export button */
#export-pdf{
  z-index: var(--z-fab, 40); pointer-events:auto;
  position:absolute; top:10px; right:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border); color:var(--text);
  font-weight:800; cursor:pointer; backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .15s var(--pop), box-shadow .2s;
}
#export-pdf:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.32); }
#export-pdf svg{ width:22px; height:22px; display:block; }
#export-pdf .txt{ font-size:12px; letter-spacing:.3px }
@media (max-width: 720px){ #export-pdf .txt{ display:none; } }



    /* rows for inputs */
    .row{display:grid; grid-template-columns: repeat(12, 1fr); gap:10px}
    .span-12{grid-column:span 12}.span-6{grid-column:span 6}.span-4{grid-column:span 4}.span-3{grid-column:span 3}
    @media (max-width:700px){ .span-6,.span-4,.span-3{grid-column:span 12} }

    label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
    .input{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04);
           border:1px solid var(--border); border-radius:14px; padding:10px 12px}
    .input input{all:unset; flex:1; min-width:0; font-weight:600; line-height:1.2; padding:3px 0}
    .input input::placeholder{color:var(--text-dim); opacity:.85}
    .unit{flex:0 0 auto; min-width:3ch; text-align:right; color:var(--text-dim)}

    /* === NEW: vertical tab list (left column) === */
    .tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
    .tabs.vertical{flex-direction:column; gap:10px; margin-bottom:0}
    .tab{
      appearance:none; border:none; padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:700; color:var(--text);
      background:rgba(255,255,255,.06); border:1px solid var(--border); width:100%; text-align:left;
      transition: transform .2s var(--pop), background .2s, box-shadow .2s;
    }
    .tab[aria-pressed="true"], .tab:hover{
      background:linear-gradient(160deg, rgba(0,195,255,.12), rgba(140,255,255,.12));
      box-shadow: inset 0 0 0 1px var(--ring-soft);
      transform: translateX(2px);
    }

    .muted{color:var(--text-dim)} .hint{font-size:12px; color:var(--muted)}
    .kpi{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
    .kpi .tile{background: rgba(255,255,255,.05); border:1px solid var(--border); border-radius:14px; padding:14px}
    .kpi .big{font-size:28px; font-weight:800; letter-spacing:.2px}

    .btn-row{display:flex; gap:10px; flex-wrap:wrap}
    .btn{appearance:none; border:none; background:linear-gradient(160deg, var(--ring), var(--ring-2)); color:#00121a; font-weight:800;
         padding:10px 14px; border-radius:14px; cursor:pointer; box-shadow: 0 10px 30px var(--ring-soft), inset 0 1px 0 rgba(255,255,255,.4);
         transition: transform .2s var(--pop), box-shadow .2s}
    .btn:hover{ transform: translateY(-2px) }
    .btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border) }

    .divider{height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); margin:10px 0}
    .fab{position:fixed; right:18px; bottom:18px; z-index:40}

    .modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(4,10,18,.55); backdrop-filter: blur(10px); z-index:50}
    .modal[open]{display:grid}
    .dialog{width:min(820px, 92vw); max-height:82vh; overflow:auto; background:linear-gradient(180deg,var(--glass),var(--glass-2));
            border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius-lg); padding:18px}
    .dialog h3{margin:0 0 12px 0}
    .footer{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px}
    .mini{font-size:11px; color:var(--muted)} .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

    .preview{background: rgba(255,255,255,.05); border:1px solid var(--border); border-radius:14px; height:340px; display:grid; place-items:center; overflow:hidden}
    .preview .note{font-size:12px; color:var(--muted)}

    /* === shape icons for left-column buttons (pure black lines) === */
    :root { --shape-ico-stroke: #000; } /* keep lines black in light/dark */

    .tabs.vertical .tab{ display:flex; align-items:center; gap:10px; }
    .tab .shape-ico{
      width:22px; height:22px; flex:0 0 22px;
      display:inline-grid; place-items:center;
    }
    .tab .shape-ico svg{ width:22px; height:22px; display:block; }
    .tab .shape-ico .stroke{
      stroke: var(--shape-ico-stroke);
      stroke-width: 2;
      fill: none;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    /* small emphasis for the selected tab only (no color change) */
    .tab[aria-pressed="true"] .shape-ico .stroke{ stroke-width: 2.2; }

    /* Make the inputs card a container so we can reflow by its width (not viewport) */
    #card-inputs{ container-type: inline-size; }

    #card-ads > h2{
  text-align:center;
  margin: 0 auto 12px;   /* keep your bottom spacing */
}

    /* When the inputs column is very narrow: stack everything (1-up) */
    @container (max-width: 360px){
      #card-inputs .span-4,
      #card-inputs .span-6,
      #card-inputs .span-3 { grid-column: span 12; }
    }

    /* Narrow-to-medium inputs column: show two fields per row where sensible */
    @container (min-width: 361px) and (max-width: 560px){
      /* 3-ups become 2-ups; single wide items stay full width */
      #card-inputs .span-4 { grid-column: span 6; }
      #card-inputs .span-3 { grid-column: span 6; }
      #card-inputs .span-6 { grid-column: span 12; }
    }

    /* Medium+ column: restore your original 3-up behavior (no override needed) */
    /* @container (min-width: 561px){ }  // default .span-* rules apply */

    #card-inputs .unit{ min-width: 2.5ch; }

    /* ───────────────────────────────────────────── */
    /* ADDITIONS: stacked logo + WhatsApp button */
    /* ───────────────────────────────────────────── */
    .brand-logos{
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:center;     /* keeps the two icons centered as a column */
    }
    /* enhance .logo to support images + subtle 3D tilt (keeps your size) */
    .logo{
      background-size:cover;
      background-position:center;
      transform: perspective(800px) rotateX(0) rotateY(0) translateZ(0);
      transition: transform .25s var(--pop), box-shadow .25s var(--pop), filter .25s var(--pop);
      /* slightly stronger outer shadow to read on dark bg */
      box-shadow:
        0 10px 20px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.15);
    }
    .logo:hover,
    .logo:focus{
      transform: perspective(800px) rotateX(8deg) rotateY(-10deg) translateZ(0);
      box-shadow:
        0 16px 30px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.18);
      outline:none;
    }
    /* your icon */
    .logo-marcel{
      background-image:url("https://my-axolotl.co.za/assets/images/marcel128.png");
    }
    /* WhatsApp icon, same size; make link block-level and clickable */
    .logo-wa{
      display:block;
      background-image:url("https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg");
      cursor:pointer;
    }
/* small friendly banner at top of the modal */
.callout{
  background: rgba(124,227,255,.10);
  border:1px solid var(--border);
  border-left:4px solid var(--ring);
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0 14px 0;
}
.callout strong{ font-weight:800 }
    
/* inline cm/mm toggle next to the "Tank Inputs" title */
.unit-switch{
  display:inline-flex; gap:6px; align-items:center; margin-left:6px;
  font-size:14px; vertical-align:middle;
}
.unit-switch button{
  appearance:none; border:1px solid var(--border); background:rgba(255,255,255,.06);
  color:var(--text); padding:2px 8px; border-radius:999px; cursor:pointer;
}
.unit-switch .slash{opacity:.55; user-select:none}
.unit-switch button[aria-pressed="true"]{
  background:linear-gradient(160deg, rgba(0,195,255,.18), rgba(140,255,255,.18));
  box-shadow: inset 0 0 0 1px var(--ring-soft);
  font-weight:800;
}

/* input mode toggle for polygons (a vs F) */
.mode-toggle{
  display:inline-flex; gap:6px; align-items:center; margin:0 0 6px;
  font-size:14px;
}
.mode-toggle button{
  appearance:none; border:1px solid var(--border); background:rgba(255,255,255,.06);
  color:var(--text); padding:2px 8px; border-radius:999px; cursor:pointer;
}
.mode-toggle button[aria-pressed="true"]{
  background:linear-gradient(160deg, rgba(0,195,255,.18), rgba(140,255,255,.18));
  box-shadow: inset 0 0 0 1px var(--ring-soft);
  font-weight:800;
}

/* Numeric values under labels (L/W/H/etc.) */
.tv{
  /* bigger + bold */
  font-size:14px;
  font-weight:800;

  /* mid-green that pops on light & dark */
  fill:#22c55e;              /* ~emerald-500 */

  /* thin dark outline so it stays legible over arrows/edges */
stroke:rgba(255, 255, 255, 1);
stroke-width:2px;
/* SVG text ignores text-shadow; use a CSS filter drop-shadow instead */
filter: drop-shadow(5px 2px 2px rgba(0, 0, 0, 1));
paint-order:stroke fill;

  /* keep your alignment */
  text-anchor:middle;
  dominant-baseline:hanging;

  /* remove any previous opacity—full strength for readability */
}
@media (prefers-color-scheme: dark){
  /* slightly brighter green in dark mode */
  .tv{
    fill:#34d399;            /* ~emerald-400 */
    stroke:rgba(0,0,0,.8);   /* a bit stronger outline */
  }
}

/* Title row with right-aligned language picker */
.titles{ flex:1; min-width:0; }
.title-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

/* Language picker container (right of title) */
.lang-wrap{
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* Match the visual language of your pill inputs */
.lang-wrap select{
  appearance:none;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:600;
  line-height:1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.lang-wrap select:focus{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

.header-tools { margin-left: auto; display:flex; align-items:center; }
.lang-wrap { display:flex; align-items:center; gap:.5rem; }

.title-row{
  display:flex;
  align-items:center;
  gap:12px;       /* space between title and switch */
  flex-wrap:wrap; /* plays nice on narrow screens */
}
.lang-wrap{
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* 3D modal sizing — desktop */
#modal-3d .dialog-3d {
  width: min(1600px, 90vw);
  height: 90vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}
#modal-3d .dialog-3d .dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.viewer3d-host { position: relative; }
.viewer3d-host > canvas { display: block; width: 100%; height: 100%; }
.viewer3d-host.undocked { height: 100%; } /* fill modal when undocked */

/* 3D axis mini-view ------------------------------------------------ */
.viewer3d-axis {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 74px;
  height: 74px;
  pointer-events: none;
  z-index: 6; /* above controls (5) */
}

.viewer3d-axis canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* 3D controls overlay card */
.viewer3d-controls{
  position: absolute;
  top: 10px; left: 10px;
  z-index: 5;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.85);
  color: #0a2235;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.20);
  backdrop-filter: blur(6px);
  pointer-events: none; /* don’t block orbit controls */
}
.viewer3d-controls .ctrl-title{
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
  font-size: 13px;
}
.viewer3d-controls .ctrl-list{
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.viewer3d-controls .ctrl-list li{
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  column-gap: 8px;
  font-size: 12px;
  line-height: 1.3;
}
.viewer3d-controls .ctrl-icn{
  width: 18px; height: 18px;
  display: block;
}

/* 3D results overlay card — desktop */
.viewer3d-results{
  position: absolute;
  /* place right under the controls card; tweak if your controls grow */
  top: 140px; left: 10px;
  z-index: 5;
  max-width: 165px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.85);
  color: #0a2235;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.20);
  backdrop-filter: blur(6px);
  pointer-events: none; /* don’t block orbit controls */
}

.viewer3d-results .ctrl-title{
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
  font-size: 13px; /* same visual header size as controls */
}

.viewer3d-results .stat-list{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 6px;
}

.viewer3d-results .stat-list li{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 10px;
  font-size: 12px; /* keep it compact to fit width */
  line-height: 1.25;
}

.viewer3d-results .stat-list li.sep{
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 2px; padding-top: 4px;
}

.viewer3d-results .k{ opacity: .8; }
.viewer3d-results .v{ font-weight: 600; }
.viewer3d-results .sub{ opacity: .6; font-weight: 500; margin-left: 4px; }

#modal-3d[open] { position: fixed; inset: 0; }

/* The modal's 3D container spans full width; height set from JS */
#modal-3d #viewer3d { width: 100%; }

/* When the inline 3D host is undocked into the modal, let it fill its parent */
.viewer3d-host.undocked { height: 100%; }

/* Safety: canvas doesn't add baseline gaps */
.viewer3d-host > canvas { display: block; width: 100%; height: 100%; }

/* === Results toolbar (3D • centered 2D/3D switch • PDF) === */
#card-results .result-toolbar{
  display: grid;
  grid-template-columns: auto 1fr auto; /* left button • center flex • right button */
  align-items: center;                   /* align on the same row */
  gap: 12px;
  padding: 8px 8px 0;                    /* a bit of padding at the top */
  margin: 0 0 8px 0;                     /* small gap before heading */
}

/* center the pill in the middle column */
#card-results .result-toolbar .switch-slot{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* inside the toolbar, the PDF button must be in normal flow */
#card-results .result-toolbar #export-pdf{
  position: static;
  top: auto;
  right: auto;
  margin: 0;
}

/* tilt scaffold (JS toggles CSS vars) */
.tilt{
  will-change: transform, filter;
  transform: perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
}
.tilt[data-tilt-active="1"]{
  filter: brightness(1.05) saturate(1.08);
}
@media (prefers-reduced-motion: reduce){
  .tilt{ transform: none !important; }
}

/* Desktop: Powered by Synergetix badge top-right */
body:not(.mobile-shell) .desk-powered {
  position: absolute;
  top: 14px;
  right: 18px;

  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;

  padding: 4px 8px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(9,30,66,0.12);
  box-shadow: 0 8px 22px rgba(9,30,66,0.16);

  text-decoration: none;
  font-family: inherit;
  color: #071623;
  z-index: 40;
}

/* Text + logo */
body:not(.mobile-shell) .desk-powered .sb-powered-label {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

body:not(.mobile-shell) .desk-powered img {
  height: 22px;
  width: auto;
  display: block;
  opacity: 0.98;
}

body:not(.mobile-shell) .desk-powered .sb-powered-sub {
  margin-top: 1px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
  color: #257fda; /* subtle echo of brand blue */
}

/* No link-y blue/purple */
body:not(.mobile-shell) .desk-powered:link,
body:not(.mobile-shell) .desk-powered:visited,
body:not(.mobile-shell) .desk-powered:hover,
body:not(.mobile-shell) .desk-powered:active {
  color: inherit;
  text-decoration: none;
}

/* Tiny hover polish */
body:not(.mobile-shell) .desk-powered:hover {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 10px 26px rgba(9,30,66,0.22);
  transform: translateY(-1px);
}

/* Desktop Powered-by: +20% size & centered content */
body:not(.mobile-shell) .desk-powered {
  /* 20%-ish upscaling + centered layout */
  padding: 5px 10px 7px;              /* was 4px 8px 6px */
  border-radius: 14px;                /* a touch chunkier */
  align-items: center;                /* center contents horizontally */
  text-align: center;                 /* center all text */
}

/* Label slightly larger */
body:not(.mobile-shell) .desk-powered .sb-powered-label {
  font-size: 11px;                    /* was 9px */
}

/* Logo ~20% taller */
body:not(.mobile-shell) .desk-powered img {
  height: 26px;                       /* was 22px */
}

/* Subline bumped to match */
body:not(.mobile-shell) .desk-powered .sb-powered-sub {
  font-size: 11px;                    /* was 9px */
}

/* Desktop floating HOME icon (top-left) */
body:not(.mobile-shell) .desk-home-icon {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 2600;

  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  text-decoration: none;

  background: rgba(255, 255, 255, 0.96);
  color: #0b2238;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);

  font-size: 20px;
  line-height: 1;
}

/* Hover: tiny lift, same vibe as the other chips */
body:not(.mobile-shell) .desk-home-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

/* Focus: clear keyboard outline */
body:not(.mobile-shell) .desk-home-icon:focus-visible {
  outline: 2px solid #2ab5ff;
  outline-offset: 2px;
}