/* ==========================================================================
   MINIMAL STOREFRONT THEME
   --------------------------------------------------------------------------
   Replaces the previous dark-gradient treatment with a light, typographic
   layout: monospace for headings/prices, thin borders instead of shadows,
   one accent colour instead of multi-stop gradients.

   Appended as a single block rather than edited in place so the whole
   redesign can be reviewed — and reverted — as one unit.
   ========================================================================== */

:root {
  --ink:        #10152d;   /* near-black, faint blue cast */
  --ink-soft:   #384056;
  --muted:      #515a6f;
  --muted-2:    #7b8398;
  --line:       #e3e6ee;
  --line-2:     #d5d9e3;
  --paper:      #ffffff;
  --paper-2:    #f9fafd;
  --accent:     #1159b8;
  --accent-2:   #396bcc;
  --accent-bg:  #eef3fc;
  --ok:         #009966;
  --ok-bg:      #e7f8f1;
  --warn:       #e17100;
  --warn-bg:    #fdf3e7;
  --danger:     #b91121;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 12px;
}

/* Kill the decorative dark-mode scaffolding wholesale. */
.neural-bg, .orb, .grid-glow { display: none !important; }

body {
  background: var(--paper-2) !important;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
}

/* Fluid width. The old 1280px cap left ~290px of dead margin each side on a
   1850px screen, which read as the whole page sitting inside a card. The cap is
   now high enough to use a wide monitor and the padding scales with the viewport. */
.site-shell {
  max-width: none; width: 100%; margin: 0;
  padding: 0 clamp(16px, 2.8vw, 56px) 72px;
}
/* Line length is capped on the TEXT itself (h1 24ch, lede 64ch, legal copy 82ch)
   rather than on the page, so the layout can run edge to edge on a wide monitor
   without producing unreadable 200-character lines. */

/* ---------- header ---------- */
/* The white band runs edge to edge; its CONTENTS line up with the page body.
   `calc(50vw - 50%)` reproduces whatever inline padding .site-shell is using at
   this width, so the logo sits on exactly the same left edge as the product
   cards and the catalogue heading below it, and the Create-account button on
   the same right edge. It tracks the shell automatically — change the shell's
   padding and the header follows.

   This used to read max(..., calc(50vw - 700px)), which centred the header in a
   1400px column. Past ~1483px viewport that term won, and the header pulled
   visibly inward while the body stayed near the edges. */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-inline: calc(50% - 50vw);
  padding-block: 14px;
  padding-inline: clamp(16px, 2.8vw, 56px);   /* == .site-shell's own padding */
  background: var(--paper); border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
/* Brand marks.
   The base stylesheet sizes .brand-logo img at a FIXED 52px, chosen for the old
   58px box. Shrinking only the box left a 52px image inside a 38px container
   with overflow:hidden — which clipped the top and bottom of the mark. Every
   logo image is now sized from its own box instead of a hardcoded pixel value,
   so the two can never drift apart again. */
.brand-logo {
  width: 54px; height: 54px; border-radius: 0; overflow: visible;
  background: transparent; border: 0; box-shadow: none;
  display: grid; place-items: center; flex: 0 0 auto;
}
.brand-logo img,
.op-footer-logo img,
.bh-logo img,
.acct-brand-logo img {
  width: 100% !important; height: 100% !important;
  object-fit: contain; display: block;
}
.op-footer-logo, .bh-logo, .acct-brand-logo {
  overflow: visible; background: none; box-shadow: none; border: 0;
  display: grid; place-items: center; flex: 0 0 auto;
}
.bh-logo { width: 46px; height: 46px; }
.acct-brand-logo { width: 46px; height: 46px; }
.brand-copy strong { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.brand-copy small { color: var(--muted-2); font-size: 11.5px; }

.header-search {
  flex: 1; display: flex; align-items: center; gap: 8px; max-width: 430px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 0 12px; height: 38px; box-shadow: none;
}
.header-search span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.header-search input { flex: 1; border: 0; background: transparent; color: var(--ink); font-size: 13.5px; outline: none; }
.header-search input::placeholder { color: var(--muted-2); }

.header-nav { display: flex; align-items: center; gap: 8px; }
.nav-chip {
  padding: 7px 13px; border-radius: 9px; font-size: 13px; font-weight: 500;
  text-decoration: none; color: var(--ink-soft) !important;
  background: var(--paper) !important; border: 1px solid var(--line-2) !important;
}
.nav-chip:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.nav-cta {
  padding: 8px 15px; border-radius: 9px; font-size: 13px; font-weight: 600;
  text-decoration: none; color: #fff !important; background: var(--accent); border: 1px solid var(--accent);
}
.nav-cta:hover { background: var(--accent-2); }

.cur-switch { display: inline-flex; padding: 2px; gap: 2px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 9px; }
.cur-opt {
  padding: 5px 11px; border-radius: 7px; font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  background: transparent; color: var(--muted); border: 0;
}
.cur-opt.is-on { background: var(--accent); color: #fff; }

/* ---------- hero ----------
   The hero is declared ONCE, further down, under the block that resets
   public_page.css. It used to be declared here as well; the two copies
   drifted and the later one silently reverted this one, which is why the
   mobile hero rules had stopped applying. Do not add hero rules here. */

/* The old 4-step strip and the featured rail are redundant next to the
   catalogue and were the main source of visual noise. */
.trust-strip, .featured { display: none !important; }

/* ---------- catalogue ---------- */
.catalog { padding-top: 46px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head h2 {
  margin: 0; font-family: var(--mono); font-size: 21px; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink);
  background: none; -webkit-text-fill-color: currentColor;
}
.section-head span { color: var(--muted); font-size: 13.5px; }
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 6px; background: none; -webkit-text-fill-color: currentColor;
}

.catalog-search {
  width: min(420px, 100%); display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px;
}
.catalog-search span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.catalog-search input { flex: 1; border: 0; background: transparent; color: var(--ink); font-size: 13.5px; outline: none; }

.category-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-soft);
  cursor: pointer; transition: border-color .12s, color .12s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
/* The JS sets class "active" (not "is-active"); both are matched so a future
   rename of either does not silently drop the selected state. */
.chip.active, .chip.is-active, .chip[aria-pressed="true"] {
  background: var(--accent-bg) !important; background-image: none !important;
  border-color: #b9cdf0; color: var(--accent) !important; font-weight: 600;
}
.chip .chip-count { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.chip.is-active .chip-count { color: var(--accent); }
.chip img, .chip tg-emoji img { width: 15px; height: 15px; border-radius: 4px; }

/* ---------- product cards ---------- */
/* auto-fill + minmax means the column count follows the actual space available,
   so it works on a phone, a laptop and a 4K monitor without a breakpoint each. */
.product-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
}
.product-card {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: none; transition: border-color .14s, transform .14s;
  /* The old grid forced 340px per card, which left a dead band under every
     short title. Let content set the height and the grid equalise the row. */
  min-height: 0;
}
.pc-body { flex: 0 0 auto; }
.product-card::before, .product-card::after { display: none !important; }
.product-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.pc-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 18px 0; }
.pc-icon {
  width: 62px; height: 62px; border-radius: 13px; display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; font-size: 26px;
}
.pc-icon img { width: 100%; height: 100%; object-fit: contain; padding: 9px; }
.pc-stock {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--ok-bg); color: var(--ok);
}
.pc-stock::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pc-stock.is-out { background: #fdeaec; color: var(--danger); }

.pc-body { padding: 15px 18px 0; flex: 1; }
.pc-cat {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2);
  margin: 0 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-title {
  margin: 0; font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding: 13px 18px 16px; border-top: 1px solid var(--line);
}
.pc-price { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pc-price b { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.pc-price span { font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); }
.pc-deliv { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.pc-deliv svg { width: 12px; height: 12px; }
.pc-deliv.auto { color: var(--accent); }
.pc-deliv.manual { color: var(--warn); }

/* ---------- buttons / modal ---------- */
.btn {
  border-radius: 9px; font-size: 13px; font-weight: 600; padding: 9px 16px;
  border: 1px solid transparent; box-shadow: none;
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: var(--paper); color: var(--ink-soft); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.sold-button { background: #fdeaec !important; color: var(--danger) !important; border-color: #f5c6cc !important; }

.modal-backdrop { background: rgba(16, 21, 45, .42); backdrop-filter: blur(3px); }
.product-modal {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(16, 21, 45, .18);
}
.product-modal h2 { font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; }
.modal-visual { background: var(--paper-2); border-right: 1px solid var(--line); }
.modal-close { background: var(--paper-2); color: var(--muted); border: 1px solid var(--line-2); border-radius: 8px; }

.muted { color: var(--muted); }

@media (max-width: 900px) {
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 620px) {
  .site-header { gap: 10px; }
  .brand-copy small { display: none; }
  .op-info-card { padding: 24px 20px; }
}


/* ---------- footer: payment badges ---------- */
.pay-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid var(--line, #e3e6ee);
}
.pay-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2, #7b8398);
}
.pay-list { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pay-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; }
.pay-badge svg { height: 22px; width: auto; display: block; }
.pay-word { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
/* A method we cannot actually take is shown greyed with a "soon" tag, never as
   an accepted logo - a customer who picks a dead method is a lost sale. */
.pay-badge.is-soon { filter: grayscale(1); opacity: .42; }
.pay-soon {
  font-family: var(--mono); font-size: 8.5px; font-style: normal; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2, #7b8398);
  border: 1px solid currentColor; border-radius: 4px; padding: 0 3px; line-height: 1.5;
}
.pay-more { margin-left: auto; font-size: 12.5px; color: var(--accent, #1159b8); text-decoration: underline; }


/* ---------- panels flattened ----------
   .featured/.catalog carried a translucent card with a 32px radius and a blur;
   in a light minimal layout that reads as a stray box around the whole grid. */
.featured, .catalog {
  margin-top: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; backdrop-filter: none; color: var(--ink);
  box-shadow: none;
}

/* ---------- hero — the ONLY hero declaration ----------
   One short band instead of a full screen: headline and the live product count
   on the left, trust facts on the right, stacking on narrow screens. It used to
   be declared twice — once up near the header rules and again here — and since
   this copy loads later it silently reverted the other, which is why the mobile
   hero rules had stopped working. Everything hero now lives here. Do not add
   hero rules above this point.

   Loads after public_page.css, so that file's dark/rounded/pill treatment is
   reset here rather than fought with !important.

   Full-bleed: the negative inline margin pulls the band out to the viewport
   edges and the padding puts the copy back on the page grid, on the same left
   edge as the header above and the product cards below. Removing either half of
   that pair makes the tint draw a rectangle mid-page. */
.op-hero-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
  align-items: center;
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 20px;
  margin-top: 0;
  margin-inline: calc(50% - 50vw);
  padding-block: 30px 30px;
  padding-inline: clamp(16px, 2.8vw, 56px);   /* == .site-shell's own padding */
  background: linear-gradient(180deg, #f4f7fd 0%, var(--paper-2) 100%);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.op-hero-copy { min-width: 0; }

.op-hero-eyebrow {
  display: flex; align-items: center; gap: 10px; width: fit-content;
  margin: 0 0 9px; padding: 0;
  background: none; border-radius: 0; color: var(--accent);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  line-height: 1.5; letter-spacing: .18em; text-transform: uppercase;
}
.op-hero-eyebrow::before {
  content: ""; width: 22px; height: 1.5px; flex: none; background: var(--accent);
}

/* 34ch is deliberate: wide enough to hold "Genuine AI & SaaS subscriptions," on
   one line, narrow enough to push "delivered instantly" onto a second. Widen it
   and the headline runs to one very long line; narrow it and it breaks to three. */
.op-hero-h1 {
  margin: 0; max-width: 34ch;
  font-family: var(--mono); font-size: clamp(23px, 2.7vw, 34px); font-weight: 600;
  line-height: 1.14; letter-spacing: -.03em; color: var(--ink);
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
.op-hero-grad {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: var(--accent); font-weight: 600;
}

.op-hero-lede {
  margin: 9px 0 0; max-width: 64ch;
  color: var(--muted); font-size: 14px; line-height: 1.55;
}
.op-hero-lede strong { color: var(--ink); font-weight: 600; }

/* Trust facts — the right half of the band, behind a hairline rule. Kept in
   --sans rather than --mono on purpose: JetBrains Mono carries no Bengali
   glyphs, so a mono fact row would drop to a mismatched fallback face the
   moment the Bangla translation renders. Only the exchange rate stays mono,
   because it is digits. */
.hero-badges {
  display: grid; gap: 9px; margin: 0;
  padding: 2px 0 2px clamp(20px, 2.4vw, 34px);
  list-style: none;
  border-left: 1px solid var(--line);
}
.hero-badge {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12.8px; line-height: 1.35; color: var(--ink-soft);
}
.hero-badge svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.hero-badge b { font-weight: 600; color: var(--ink); }
.hero-badge .mono { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ---------- hero: responsive ----------
   These MUST stay below the hero block. At their old position further up the
   file the unconditional rules here won on load order and they never applied. */
@media (max-width: 900px) {
  /* Stack: copy first, facts below it behind a hairline instead of beside it. */
  .op-hero-intro {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: 16px;
    padding-block: 26px 26px;
  }
  .op-hero-h1 { max-width: 30ch; }
  .hero-badges {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    width: 100%; padding: 14px 0 0;
    border-left: 0; border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .op-hero-intro { padding-block: 22px 22px; row-gap: 14px; }
  .op-hero-eyebrow { margin-bottom: 8px; font-size: 10px; letter-spacing: .15em; }
  .op-hero-eyebrow::before { width: 16px; }
  .op-hero-h1 { max-width: none; font-size: clamp(21px, 6.4vw, 27px); line-height: 1.18; }
  .op-hero-lede { max-width: none; margin-top: 8px; font-size: 13.5px; }
  .hero-badges { gap: 7px 16px; padding-top: 12px; }
  .hero-badge { font-size: 12.2px; }
  .hero-badge svg { width: 13px; height: 13px; }
  .hero-badge .mono { font-size: 11.5px; }
}

@media (max-width: 380px) {
  /* 320-380px: the facts each take their own line, so tighten them rather than
     let the band grow back. */
  .hero-badges { gap: 6px; }
  .hero-badge { font-size: 11.8px; gap: 7px; }
}

/* ---------- legal / info pages ---------- */
.op-info-hero {
  padding: 56px 0 34px; margin-bottom: 30px; border-radius: 0;
  background: none; border: 0; border-bottom: 1px solid var(--line); box-shadow: none;
}
.op-info-hero .eyebrow {
  display: block; padding: 0; border-radius: 0; background: none; color: var(--accent);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px;
}
.op-info-hero h1 {
  font-family: var(--mono); font-size: clamp(26px, 3.6vw, 40px); font-weight: 600;
  line-height: 1.1; letter-spacing: -.03em; color: var(--ink); margin: 0 0 14px;
}
.op-info-hero p { color: var(--muted); font-size: 15.5px; line-height: 1.7; max-width: 70ch; }
/* The original two-column layout (content + sticky sidebar) is restored — my
   earlier `display:block` collapsed it and the 82ch cap left most of a wide
   screen empty. Pages without a sidebar let the card span both columns. */
.op-info-grid {
  display: grid; align-items: start; gap: 26px;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
}
.op-info-card:only-child { grid-column: 1 / -1; }
.op-info-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: none; color: var(--ink); padding: clamp(24px, 2.4vw, 40px);
  max-width: none; margin: 0 0 26px; min-width: 0;
}
/* The card fills the width; the prose inside keeps a sane measure so a 1850px
   monitor does not produce 200-character lines. Headings, rules and tables
   still span the full card. */
.op-info-card > p, .op-info-card > ul, .op-info-card > ol { max-width: 88ch; }

.op-info-aside {
  position: sticky; top: 22px; padding: 22px; border-radius: var(--r);
  background: var(--accent-bg); border: 1px solid #b9cdf0; color: var(--ink-soft);
}
.op-info-aside h3 {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--ink); margin: 0 0 12px;
}
.op-info-aside p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.65; }
.op-info-aside strong { color: var(--ink); }
.op-info-aside .btn-aside {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600; text-decoration: none;
}
.op-info-aside .btn-aside:hover { background: var(--accent-2); }

/* Table of contents inside the card. */
.op-info-toc {
  background: var(--paper-2) !important; border: 1px solid var(--line) !important;
  border-radius: 10px; padding: 13px 16px;
}
.op-info-toc a {
  background: var(--paper); border: 1px solid var(--line-2);
  color: var(--muted) !important; font-size: 12.5px; text-decoration: none;
}
.op-info-toc a:hover { border-color: var(--accent); color: var(--accent) !important; }

@media (max-width: 980px) {
  .op-info-grid { grid-template-columns: 1fr; }
  .op-info-aside { position: static; }
}
.op-info-card h2 {
  font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); margin: 30px 0 10px; padding-top: 22px; border-top: 1px solid var(--line);
}
.op-info-card h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.op-info-card h3 { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); margin: 20px 0 7px; }
.op-info-card p, .op-info-card li { color: var(--ink-soft); font-size: 14.5px; line-height: 1.72; }
.op-info-card strong { color: var(--ink); }
.op-info-card a { color: var(--accent); }
.op-info-card ul, .op-info-card ol { padding-left: 20px; }
.op-info-card li { margin: 5px 0; }
.op-info-card code {
  font-family: var(--mono); font-size: 12.5px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--ink);
}

/* ---------- footer ----------
   The dark panel lives on .op-footer-inner, not .op-footer — overriding only the
   outer element left dark links on a dark card. Both are reset here. */
.op-footer { background: var(--paper); border-top: 1px solid var(--line); color: var(--ink); margin-top: 60px; padding: 0; }
.op-footer-inner {
  max-width: none; width: auto; margin: 0; padding: 52px clamp(16px, 2.8vw, 56px) 30px;
  background: none; border: 0; border-radius: 0;
}
.op-footer-cols { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 30px; }
.op-footer-logo { width: 52px; height: 52px; border-radius: 0; }
.op-footer-brand-copy strong { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink); text-transform: none; }
.op-footer-brand-copy small { color: var(--muted-2); }
.op-footer-col h4 {
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink);
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 13px;
}
.op-footer-col ul { list-style: none; margin: 0; padding: 0; }
.op-footer-col li { margin: 0 0 8px; }
.op-footer-col a { color: var(--muted) !important; font-size: 13.5px; font-weight: 400; text-decoration: none; }
.op-footer-col a:hover { color: var(--accent); text-decoration: underline; }
.op-footer-brand strong { font-family: var(--mono); color: var(--ink); }
.op-footer-brand small, .op-footer-tag { color: var(--muted-2); }
.op-footer-bottom { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; }
.op-footer-tag { color: var(--muted-2); }
.op-footer-col a:hover { color: var(--accent) !important; }
.op-footer-bottom small { color: var(--muted-2); font-size: 12px; }


/* ==========================================================================
   ACCOUNT + CHECKOUT
   --------------------------------------------------------------------------
   The buyer area (checkout, deposits, orders, support, sign-in) shipped with
   its own dark treatment from account_dashboard.css / account.css. These rules
   bring it onto the same light system as /shop so a buyer never crosses a
   visual seam between browsing and paying.
   ========================================================================== */

.acct-bg, .acct-orb { display: none !important; }

/* Gradient-filled headings.
   Several headings paint a light gradient INTO the glyphs (background-clip:text
   + color:transparent). That was legible on the old dark panels and is invisible
   on white. Every such heading is listed here rather than patched one at a time
   as it is reported: .acct-title (sign-in), .page-title (account + checkout),
   .stat-value (dashboard tiles), .receipt-card h2 (order receipt). */
.acct-title, .page-title, .stat-value, .receipt-card h2 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.acct-title, .page-title, .receipt-card h2 {
  font-family: var(--mono); font-weight: 600; letter-spacing: -.025em;
}
.stat-value { font-family: var(--mono); font-weight: 600; }

body { background: var(--paper-2) !important; color: var(--ink); font-family: var(--sans); }

.page-shell {
  max-width: none; width: 100%; margin: 0;
  padding: 34px clamp(16px, 2.8vw, 56px) 72px;
}

/* ---------- buyer header: same centred band as the shop header ---------- */
.bh-bar {
  background: var(--paper); border: 0; border-bottom: 1px solid var(--line);
  box-shadow: none; backdrop-filter: none;
}
.bh-inner {
  max-width: none; width: 100%;
  padding-inline: clamp(16px, 2.8vw, 56px);   /* == .site-shell's own padding */
  justify-content: space-between; gap: 16px;
}
.bh-brand { text-decoration: none; }
.bh-logo { background: none; box-shadow: none; border: 0; }
.bh-name { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink); }
.bh-tagline { color: var(--muted-2); font-size: 11.5px; }
.bh-tabs { gap: 6px; }
.bh-tab {
  color: var(--ink-soft) !important; background: var(--paper) !important;
  border: 1px solid var(--line-2) !important; border-radius: 9px;
  font-size: 13px; font-weight: 500; padding: 7px 13px;
}
.bh-tab:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.bh-tab.is-active, .bh-tab[aria-current="page"] {
  background: var(--accent-bg) !important; border-color: #b9cdf0 !important;
  color: var(--accent) !important; font-weight: 600;
}
.bh-balance {
  background: var(--ok-bg) !important; border: 1px solid #b7e6d3 !important;
  color: var(--ok) !important; border-radius: 9px; font-family: var(--mono); font-weight: 600;
}
.bh-balance-label { color: var(--ok) !important; opacity: .75; }
.bh-signin, .bh-logout {
  background: var(--paper) !important; border: 1px solid var(--line-2) !important;
  color: var(--ink-soft) !important; border-radius: 9px; font-size: 13px;
}
.bh-signup {
  background: var(--accent) !important; border: 1px solid var(--accent) !important;
  color: #fff !important; border-radius: 9px; font-size: 13px; font-weight: 600;
}

/* ---------- sign-in / register screens ----------
   account.css ships its own :root with --ink: #f1f5ff (near-white) for a dark
   background. Our tokens win by load order, but rules written with a LITERAL
   #fff do not — those are the ones that turned invisible on white, so each is
   restated here. */
.acct-stage, .acct-card-wrap { background: none; }
.acct-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 6px 28px rgba(16, 21, 45, .06); backdrop-filter: none;
}
.acct-subtitle { color: var(--muted); }
.acct-feature-list li { color: var(--ink-soft); }
.acct-feature-list strong { color: var(--ink); font-weight: 600; }
.acct-feature-list svg { stroke: var(--ok); }
.acct-btn-secondary {
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--line-2);
}
.acct-btn-secondary:hover { background: var(--paper-2); border-color: var(--accent); color: var(--accent); }
.acct-helper { color: var(--muted-2); }
.acct-divider { color: var(--muted-2); }
.acct-divider::before, .acct-divider::after { background: var(--line); }
.acct-input {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
}
.acct-input::placeholder { color: var(--muted-2); }
.acct-field-icon { color: var(--muted-2); }
.acct-checkbox { color: var(--ink-soft); }
.acct-trust, .acct-footer { color: var(--muted-2); }
.acct-toplink {
  color: var(--ink-soft) !important; background: var(--paper) !important;
  border: 1px solid var(--line-2) !important; border-radius: 9px;
}
.acct-toplink:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.acct-brand-copy strong { color: var(--ink); font-family: var(--mono); }
.acct-brand-copy small, .acct-brand-copy span { color: var(--muted-2); }
.acct-brand-logo { background: none; box-shadow: none; border: 0; }
.acct-icon { background: var(--accent); box-shadow: none; }

/* ---------- dark-theme leftovers on account + checkout ----------
   Each of these was measured in the browser rather than guessed: the panels
   still painted a near-black background, and a blanket `b { color: #fff }`
   made every bold value (order total, wallet balance) invisible on white. */
.bh-inner  { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; border-radius: 0 !important; }
.bh-tabs   { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
.qty-row   { background: var(--paper-2) !important; border: 1px solid var(--line) !important; border-radius: 10px; }
.qty-row span { color: var(--muted); font-size: 13px; }

/* Bold text must never inherit the old white. Scoped to the buyer surfaces so
   it cannot leak into the admin panel, which keeps its own palette. */
.page-shell b, .page-shell strong,
.acct-card b, .acct-card strong,
.panel b, .panel strong,
.total-card b, .total-card strong,
.bh-bar b, .bh-bar strong { color: inherit; }
.tc-final b, .tc-final strong { color: var(--ink) !important; }
.bh-balance b, .bh-balance strong { color: var(--ok) !important; }

/* Primary action follows the site accent instead of the old green gradient. */
.btn-cta, .acct-btn-primary {
  background: var(--accent) !important; background-image: none !important;
  color: #fff !important; border: 1px solid var(--accent) !important;
  box-shadow: none !important;
}
.btn-cta:hover, .acct-btn-primary:hover { background: var(--accent-2) !important; filter: none; }
.acct-btn-telegram { background: #229ed9 !important; background-image: none !important; box-shadow: none !important; color: #fff !important; }

/* Badges: readable, and colour-coded by meaning rather than decoration. */
.po-badge {
  background: var(--paper-2) !important; border: 1px solid var(--line-2) !important;
  color: var(--muted) !important;
}
.pay-option.is-selected .po-badge, .pay-option:has(input:checked) .po-badge {
  background: #fff !important; border-color: #b9cdf0 !important; color: var(--accent) !important;
}

/* Payment-method label and everything inside it: the selected row painted its
   label white for the old dark card. Descendants included, since the label wraps
   a <strong> and a custom-emoji element. */
.po-label, .po-label *, .pay-option .po-label strong { color: var(--ink) !important; }
.btn-cta, .btn-cta *, .acct-btn-primary, .acct-btn-primary * { color: #fff !important; stroke: #fff; }

/* ---------- deposit page leftovers ---------- */
.method-dd-trigger {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important; border-radius: 10px; box-shadow: none !important;
}
.method-dd-trigger:hover { border-color: var(--accent) !important; }
.method-dd-trigger * { color: var(--ink) !important; }
.method-dd-menu, .method-dd-item {
  background: var(--paper) !important; color: var(--ink) !important;
  border-color: var(--line-2) !important;
}
.method-dd-item:hover { background: var(--accent-bg) !important; color: var(--accent) !important; }

/* Inline code (wallet addresses, Pay IDs) — was white on a pale violet tint. */
.page-shell code, .acct-card code, .panel code {
  background: var(--paper-2) !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important; border-radius: 6px;
  font-family: var(--mono); font-size: 12.5px; padding: 2px 7px;
}

/* Quick-amount chips on the deposit form carry no class of their own, so they
   are matched structurally. .btn-cta / .qty-btn are excluded so the primary
   action and the quantity steppers keep their own treatment. */
.page-shell .form-field button:not(.btn-cta):not(.qty-btn):not(.btn-ghost) {
  background: var(--paper) !important; color: var(--ink-soft) !important;
  border: 1px solid var(--line-2) !important; border-radius: 9px;
  font-weight: 500; box-shadow: none !important;
}
.page-shell .form-field button:not(.btn-cta):not(.qty-btn):not(.btn-ghost):hover {
  border-color: var(--accent) !important; color: var(--accent) !important;
}

/* ---------- every remaining dark panel, in one pass ----------
   Enumerated by grepping the buyer stylesheets for dark backgrounds rather than
   fixing them one screenshot at a time, so no buyer page is left half-converted. */
.stat-tile, .action-card, .delivered-box, .tbl-wrap, .method-dd-panel,
.api-endpoint-row, .blog-related-card, .blog-share, .op-hero-pill,
.op-info-toc, .op-pd-desc, .op-pd-stats {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r);
  color: var(--ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.stat-tile *, .action-card *, .delivered-box *, .op-pd-stats *, .op-pd-desc * { color: inherit; }
.stat-tile .stat-label, .action-card small, .action-card span { color: var(--muted) !important; }
.stat-tile.green .stat-value { color: var(--ok) !important; }
.stat-tile.gold  .stat-value { color: var(--warn) !important; }
.action-card:hover { border-color: var(--accent) !important; }
.op-hero-pill {
  border-radius: 999px !important; color: var(--accent) !important;
  background: var(--accent-bg) !important; border-color: #b9cdf0 !important;
}
.tbl th { background: var(--paper-2) !important; color: var(--muted-2) !important; }
.tbl td { color: var(--ink-soft); }
.delivered-box code, .delivered-box pre {
  background: var(--paper-2) !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
}
.op-info-toc a { color: var(--muted) !important; }
.op-info-toc a:hover { color: var(--accent) !important; }

/* ---------- page headings ---------- */
.page-head { margin-bottom: 24px; }
.page-eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  background: none; -webkit-text-fill-color: currentColor; padding: 0; border-radius: 0;
}
.page-title {
  font-family: var(--mono); font-size: clamp(24px, 3vw, 34px); font-weight: 600;
  letter-spacing: -.03em; color: var(--ink);
  background: none; -webkit-text-fill-color: currentColor;
}
.page-subtitle { color: var(--muted); font-size: 14.5px; }

/* ---------- panels / cards ---------- */
.panel, .total-card, .product-summary, .dash-card, .acct-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: none; color: var(--ink); backdrop-filter: none;
}
.panel-h {
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink);
  background: none; -webkit-text-fill-color: currentColor;
}
.panel-sub { color: var(--muted); font-size: 13px; }

/* ---------- forms ---------- */
.form-field label, .form-label { color: var(--ink-soft); font-weight: 600; font-size: 13px; }
.form-input, .form-select, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important; border-radius: 9px;
}
.form-input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(17, 89, 184, .12);
}
.form-input::placeholder, input::placeholder, textarea::placeholder { color: var(--muted-2); }
.form-help { color: var(--muted-2); font-size: 12.5px; }

/* ---------- buttons ---------- */
.btn-cta, .qty-btn {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 9px; font-weight: 600; box-shadow: none;
}
.btn-cta:hover { background: var(--accent-2); }
.qty-btn { background: var(--paper); color: var(--ink); border-color: var(--line-2); font-family: var(--mono); }
.qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost {
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--line-2); border-radius: 9px; box-shadow: none;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- checkout specifics ---------- */
.checkout-grid { gap: 20px; }
.pay-options { display: grid; gap: 10px; }
.pay-option {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--ink); box-shadow: none;
}
.pay-option:hover { border-color: var(--accent); }
.pay-option.is-selected, .pay-option[aria-checked="true"], .pay-option:has(input:checked) {
  border-color: var(--accent); background: var(--accent-bg);
}
.po-label { color: var(--ink); font-weight: 600; font-size: 14px; }
.po-badge {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; background: var(--paper-2); border: 1px solid var(--line-2);
  color: var(--muted); border-radius: 5px; padding: 2px 6px;
}
.tc-row { color: var(--ink-soft); font-size: 14px; }
.tc-row span { color: var(--muted); }
.tc-final {
  font-family: var(--mono); font-weight: 600; color: var(--ink);
  border-top: 1px solid var(--line); padding-top: 12px;
}
.tc-final b, .tc-final strong { font-size: 20px; letter-spacing: -.02em; }
/* Scoped so it tints VALUES, not the primary button (which is class
   "btn-cta green" — the utility was overriding the button's own colour). */
.green:not(.btn-cta):not(.acct-btn-primary) { color: var(--ok) !important; }
.ps-head { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.ps-emoji { background: var(--paper-2); border: 1px solid var(--line); border-radius: 11px; }
.credit-tier-grid { gap: 10px; }

/* ---------- flash messages ---------- */
.acct-flash, .dash-flash {
  border-radius: 10px; font-size: 14px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--ink);
}
.acct-flash.success, .dash-flash.success { background: var(--ok-bg); border-color: #b7e6d3; color: var(--ok); }
.acct-flash.error, .dash-flash.error { background: #fdeaec; border-color: #f5c6cc; color: var(--danger); }
.acct-flash.info, .dash-flash.info { background: var(--accent-bg); border-color: #b9cdf0; color: var(--accent); }

/* ---------- tables ---------- */
table { border-collapse: collapse; }
th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
     color: var(--muted-2); font-weight: 600; border-bottom: 1px solid var(--line); }
td { color: var(--ink-soft); border-bottom: 1px solid var(--line); font-size: 14px; }

a { color: var(--accent); }

@media (max-width: 620px) {
  .page-shell { padding-top: 24px; }
  .bh-inner { gap: 10px; }
  .bh-tagline { display: none; }
}


/* ==========================================================================
   /tools — brought onto the same light system as /shop.
   public_tools.css was written for a dark treatment with its own header
   markup (.tools-header / .brand-lockup rather than .site-header / .brand),
   so those classes are mapped here instead of restyling the shop's.
   ========================================================================== */

.tools-shell {
  max-width: none; width: 100%; margin: 0;
  padding: 0 clamp(16px, 2.8vw, 56px) 72px;
  background: none;
}

/* ---------- header: same full-bleed band, same edges as the body, as /shop ---------- */
.tools-header {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-inline: calc(50% - 50vw);
  padding-block: 14px;
  padding-inline: clamp(16px, 2.8vw, 56px);   /* == .site-shell's own padding */
  background: var(--paper); border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none; backdrop-filter: none;
}
.brand-lockup { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark {
  width: 54px; height: 54px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.brand-mark img { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
.brand-title {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink); text-transform: uppercase;
}
.brand-subtitle { color: var(--muted-2); font-size: 11.5px; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bot-chip {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 10px;
}
.bot-chip b { color: var(--ink); }
.action-link {
  padding: 7px 13px; border-radius: 9px; font-size: 13px; font-weight: 500; text-decoration: none;
  color: var(--ink-soft) !important; background: var(--paper) !important;
  border: 1px solid var(--line-2) !important; box-shadow: none;
}
.action-link:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.action-primary {
  background: var(--accent) !important; border-color: var(--accent) !important;
  color: #fff !important; font-weight: 600;
}
.action-primary:hover { background: var(--accent-2) !important; }

/* Remaining dark panels from the old tools treatment, enumerated by parsing
   public_tools.css for low-luminance backgrounds rather than fixing them one
   screenshot at a time. */
body::before, .tools-hero { background: none !important; }
.code-vault {
  background: var(--paper-2) !important; background-image: none !important;
  border: 1px solid var(--line) !important; border-radius: var(--r);
  color: var(--ink) !important; box-shadow: none !important;
}
.code-vault * { color: inherit; }
.code-vault .muted, .code-vault small { color: var(--muted) !important; }
.code-vault .vault-label, .code-vault [class*="label"] {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2) !important;
}
.code-button {
  background: var(--paper) !important; background-image: none !important;
  border: 1px solid var(--line-2) !important; color: var(--ink) !important;
  font-family: var(--mono); box-shadow: none !important;
}
.code-button:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-danger-soft {
  background: #fdeaec !important; background-image: none !important;
  border: 1px solid #f5c6cc !important; color: var(--danger) !important;
}
.cli-output {
  background: var(--paper-2) !important; background-image: none !important;
  border: 1px solid var(--line) !important; color: var(--ink-soft) !important;
  font-family: var(--mono); font-size: 12px;
}
.hint-text code, #premium-head-note code {
  background: var(--paper-2) !important; border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
}

/* ---------- responsive containment ----------
   The 2FA history table carries `min-width: 700px` and lives inside a
   `.table-scroll` wrapper. That wrapper can only do its job if its ancestors are
   allowed to be narrower than their content — grid and flex items default to
   `min-width: auto`, so the 700px table was stretching the panel, the tab strip
   and the whole shell to 702px on a 390px phone. `min-width: 0` down the chain
   restores the intended horizontal scroll INSIDE the table only. */
.tools-shell, .tools-shell main, .tool-panel, .tool-panel > *,
.workspace-grid, .workspace-grid > *, .tool-card, .output-card,
.result-grid > *, .metric-grid > * { min-width: 0; }
.tools-shell, .tools-shell main { max-width: 100%; overflow-x: clip; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tool-card, .output-card, .result-box, .live-console { overflow-wrap: anywhere; }
.tools-shell pre, .tools-shell textarea { max-width: 100%; }

/* The tab strip wraps rather than running off the edge. */
.tool-tabs { max-width: 100%; }
.tool-tab { flex: 0 1 auto; min-width: 0; white-space: nowrap; }

/* Heading and its helper sentence stack instead of colliding. */
.panel-head { gap: 6px 18px; }
.panel-head > div { min-width: 0; }
.panel-head p { max-width: 62ch; }

/* ---------- tabs ---------- */
.tool-tabs {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 32px 0 22px; padding: 0; background: none; border: 0;
}
.tool-tab {
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-soft);
  box-shadow: none; transition: border-color .12s, color .12s;
}
.tool-tab:hover { border-color: var(--accent); color: var(--accent); }
.tool-tab.active {
  background: var(--accent-bg); border-color: #b9cdf0; color: var(--accent); font-weight: 600;
}

/* ---------- panels & cards ---------- */
.tool-panel { display: none; }
.tool-panel.active { display: block; }
.panel-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.panel-head h2 {
  margin: 0; font-family: var(--mono); font-size: 21px; font-weight: 600;
  letter-spacing: -.025em; color: var(--ink);
  background: none; -webkit-text-fill-color: currentColor;
}
.panel-head p { color: var(--muted); font-size: 13.5px; margin: 0; }
.section-kicker {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 6px; background: none; -webkit-text-fill-color: currentColor;
}
.tool-card, .output-card, .result-box, .live-console {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: none; color: var(--ink); backdrop-filter: none; padding: 20px;
}
.output-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink);
}
.workspace-grid { display: grid; gap: 16px; }
.workspace-grid.two-col   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.workspace-grid.three-col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.result-grid, .metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* ---------- form controls ---------- */
.tools-shell input[type="text"], .tools-shell input[type="number"],
.tools-shell input[type="password"], .tools-shell input:not([type]),
.tools-shell textarea, .tools-shell select {
  width: 100%; padding: 9px 12px; border-radius: 9px;
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important; font: inherit; font-size: 13.5px;
}
.tools-shell textarea { min-height: 150px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
.tools-shell input:focus, .tools-shell textarea:focus, .tools-shell select:focus {
  outline: none; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(17, 89, 184, .12);
}
.tools-shell ::placeholder { color: var(--muted-2); }
.option-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-soft); font-size: 13px; }
.option-row input[type="checkbox"] { width: auto !important; }
/* Only the short LABEL gets the uppercase mono treatment. .mini-section-head
   also wraps a full explanatory sentence, and uppercasing that made it shout. */
.vault-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
}
.mini-section-head {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}
.mini-section-head > :first-child, .mini-section-head strong, .mini-section-head b {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--ink); text-transform: none;
}
.mini-section-head span:not(:first-child) { text-transform: none; font-size: 12.5px; line-height: 1.55; }

/* Leftover tints from the old dark treatment. */
.credential-block {
  background: var(--paper-2) !important; background-image: none !important;
  border: 1px solid var(--line) !important; border-radius: 10px;
  /* Grid rows stretch by default. The card is stretched to match the taller
     column beside it, and that spare height was being shared out between rows,
     leaving ~100px of blank space under the heading. Pack rows to the top. */
  align-content: start;
}
.tool-card, .output-card { align-content: start; }
.mini-section-head { align-self: start; }
#tool-gemini .panel-head p, .tool-panel .panel-head p {
  color: var(--muted) !important; font-weight: 400;
}
.tool-panel span[style*="gradient"], .tools-shell span[style*="linear-gradient"] {
  background-image: none !important; background: var(--accent) !important;
}

/* ---------- buttons ---------- */
.button-row { display: flex; gap: 9px; flex-wrap: wrap; }
.tools-shell .btn, .tools-shell .mini-btn {
  border-radius: 9px; font-size: 13px; font-weight: 600; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-soft); box-shadow: none;
}
.tools-shell .mini-btn { padding: 6px 11px; font-size: 12px; font-weight: 500; }
.tools-shell .btn:hover, .tools-shell .mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.tools-shell .btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.tools-shell .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.tools-shell .btn-secondary { background: var(--paper); color: var(--ink-soft); border-color: var(--line-2); }

/* ---------- status, results, console ---------- */
.tool-message {
  border-radius: 10px; padding: 11px 14px; font-size: 13.5px;
  background: var(--accent-bg); border: 1px solid #b9cdf0; color: var(--accent);
  margin-bottom: 18px;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--paper-2); border: 1px solid var(--line-2); color: var(--muted);
}
.active-box  { border-color: rgba(0, 153, 102, .4) !important; }
.used-box    { border-color: rgba(225, 113, 0, .4) !important; }
.invalid-box { border-color: rgba(185, 17, 33, .35) !important; }
.live-console {
  background: var(--paper-2); font-family: var(--mono); font-size: 12px;
  color: var(--ink-soft); max-height: 260px; overflow-y: auto;
}
.progress-rail { background: var(--line); border-radius: 999px; overflow: hidden; height: 6px; }
.progress-rail > * { background: var(--accent); }
.table-scroll { overflow-x: auto; }
.tools-shell table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tools-shell th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); text-align: left; border-bottom: 1px solid var(--line); padding: 8px;
}
.tools-shell td { color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 8px; }
.tools-shell code, .tools-shell pre {
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 6px;
  color: var(--ink); font-family: var(--mono); font-size: 12.5px;
}
.muted { color: var(--muted); }

@media (max-width: 860px) {
  /* Below this the 320px minimum on the second column cannot be honoured
     without overflowing, so collapse to a single column. */
  .workspace-grid, .workspace-grid.two-col, .workspace-grid.three-col,
  .result-grid, .metric-grid { grid-template-columns: 1fr !important; }
  .panel-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .tools-shell { padding-left: clamp(12px, 4vw, 18px); padding-right: clamp(12px, 4vw, 18px); }
  .tool-tabs { margin-top: 20px; gap: 6px; }
  .tool-tab { font-size: 12px; padding: 6px 11px; }
  .brand-subtitle { display: none; }
  .brand-mark { width: 42px; height: 42px; }
  .tools-header { gap: 10px; padding-block: 11px; }
  .header-actions { gap: 6px; }
  .action-link, .bot-chip { font-size: 12px; padding: 6px 10px; }
  .tools-shell .btn, .tools-shell .mini-btn { width: 100%; justify-content: center; }
  .button-row { flex-direction: column; }
  .tool-card, .output-card, .result-box, .live-console { padding: 15px; }
  .panel-head h2 { font-size: 18px; }
  .tools-shell table { min-width: 560px; }
}

/* ============================================================================
   Language — English / Bangla
   ========================================================================= */

/* The switcher sits beside the currency toggle and behaves like it, but these
   are links (they hit /lang/<code>), so the button resets do not apply. */
.lang-switch {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 9px;
}
.lang-opt {
  padding: 5px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  line-height: 1.55; white-space: nowrap; text-decoration: none; border: 0;
  background: transparent; color: var(--muted) !important;
  /* "বাংলা" has to be legible even on an English page, where the Bengali
     webfont is deliberately not loaded — so name the system Bengali faces
     that Windows, Android, macOS and iOS ship with. */
  font-family: "JetBrains Mono", "Noto Sans Bengali", "Nirmala UI",
               "Shonar Bangla", "Bangla Sangam MN", "Kohinoor Bangla", ui-monospace, monospace;
}
.lang-opt:hover { color: var(--accent) !important; }
.lang-opt.is-on { background: var(--accent); color: #fff !important; }

/* Bengali text, wherever it appears. The Latin face stays FIRST in each stack:
   browsers resolve font-family per character, so prices and product names keep
   JetBrains Mono / Work Sans and only the Bengali glyphs fall through to Noto
   Sans Bengali. Putting the Bengali face first would silently restyle every
   number on the page. */
html[lang="bn"] {
  --mono: "JetBrains Mono", "Noto Sans Bengali", "Nirmala UI", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Work Sans", "Noto Sans Bengali", "Nirmala UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
/* Bengali sets tall matras above the line and descenders below it, so it needs
   more room than Latin, and the tight tracking used on Latin headings collapses
   conjunct clusters into each other. */
html[lang="bn"] body { line-height: 1.72; }
/* Tracking is reset page-wide rather than class by class. This theme letter-
   spaces roughly thirty small-caps Latin labels (.eyebrow, table headers, the
   search captions, the hero eyebrow), and every one of them breaks Bengali:
   a conjunct cluster is a single glyph and pulling it apart makes it unreadable.
   Nothing in Bengali typography wants tracking, and the Latin fragments that
   survive on a Bangla page -- prices, tickers, brand names -- are short enough
   that losing theirs is invisible. text-transform: uppercase is left alone; it
   is simply a no-op on Bengali. */
html[lang="bn"] body,
html[lang="bn"] body * { letter-spacing: normal; }

html[lang="bn"] .op-hero-h1 { line-height: 1.35; }
html[lang="bn"] .pc-title { line-height: 1.45; }

/* ---------- catalogue head: give the phone screen back to the products ----------
   On a 390x844 phone the header, hero and catalogue heading together pushed the
   first product card to 803px — technically above the fold, but only a sliver of
   it was visible. The eyebrow and the explanatory sentence are the two parts a
   shopper on a phone gains nothing from (the heading already says what the list
   is, and the header carries its own search box), so they come off below 620px
   and the products move up by roughly a card's worth. */
@media (max-width: 620px) {
  .catalog-head .eyebrow,
  .catalog-head > div > span { display: none; }
  /* Stack explicitly rather than relying on the wrap. .catalog-head is
     flex-wrap: wrap + space-between, and once the subtitle above is hidden the
     heading's wrapper shrinks to its own text width — a lone item on a wrapped
     line, which space-between then pushed to the right edge. Columnar layout
     removes the ambiguity instead of fighting it. */
  .catalog-head {
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px;
  }
  .catalog-head > div { width: 100%; }
  .catalog-head h2 { margin-bottom: 2px; }
}

/* The sign-in / register shell builds its own topbar, so the switcher needs a
   holder to sit beside the "Browse shop" link rather than being pushed to the
   opposite edge by the topbar's own space-between. */
.acct-topright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- category rail on a phone ----------
   30 chips wrapped to 409px — taller than the hero itself, and it pushed the
   first product card off the bottom of an 844px screen. One horizontally
   scrolling row instead: the same pattern Daraz and Amazon use, so nobody has
   to be taught it. The negative margin lets the row run to the screen edges so
   it visibly continues past the right-hand side, which is the affordance that
   says "scroll me"; the matching padding keeps the first chip on the page grid
   with everything else. */
@media (max-width: 620px) {
  .category-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(16px, 2.8vw, 56px));
    padding-inline: clamp(16px, 2.8vw, 56px);
    scroll-padding-inline: clamp(16px, 2.8vw, 56px);
  }
  .category-chips::-webkit-scrollbar { display: none; }
  .category-chips .chip { flex: 0 0 auto; }
}