/* Tartibli — shared static stylesheet, served at /style.css.
   Pulled in by portal, dashboard, admin, join and signup, so this file owns the
   design tokens for every surface; the per-surface sheets (portal.css,
   admin.css) only add layout on top and must not redefine a token.

   Dark theme ONLY — there is no light variant and none is planned, so no
   prefers-color-scheme branch and no colour is written to survive inversion. */

/* ---- Webfonts ------------------------------------------------------------
   Self-hosted, same-origin. NEVER load these from fonts.googleapis.com /
   fonts.gstatic.com: that hands every visitor's IP to a US server on page load,
   and LG München I (3 O 17493/20) awarded damages for exactly that. We address
   the German market, so the GDPR exposure is real, not theoretical.

   Both families are VARIABLE fonts: ONE file per unicode subset covers the
   whole weight range (Sora 200–600, JetBrains Mono 400–500). Do not add
   per-weight @font-face blocks — that would download the same file N times.

   The files live in web/landing/fonts/ and are served at /fonts/* by
   tartibli-core (allow-listed as /fonts/* in deploy/prod/Caddyfile), which is
   why these URLs are absolute: this sheet is served from /style.css, so a
   relative url() would resolve against the site root anyway, but the absolute
   form keeps it obvious that the directory is NOT next to this file.
   Licence: both SIL Open Font License 1.1 — self-hosting is permitted. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url("/fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url("/fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design tokens -------------------------------------------------------
   The --tb-* set is the Tartibli brand contract (electric violet #7C5CFF +
   warm off-white #F7F3EA). It is copied verbatim from the design package and
   is the ONLY place a raw brand colour may be written down. */
:root {
  /* Surfaces */
  --tb-bg: #0a0912; /* page background */
  --tb-bg-nav: rgba(10, 9, 18, 0.7); /* sticky nav, with backdrop-filter */
  --tb-surf: #14121f; /* card, panel */
  --tb-surf-2: #1d1a2b; /* card inside a card, stat block */
  --tb-sidebar: #0f0d1a; /* portal / admin sidebar */

  /* Accent */
  --tb-a1: #7c5cff; /* primary accent, primary button */
  --tb-a1-hover: #6b4af5;
  --tb-a2: #a78bfa; /* gradient end, link, label text */
  --tb-a3: #c4b2ff; /* link hover, active nav text */
  --tb-a-10: rgba(124, 92, 255, 0.1); /* soft fill (pill, badge) */
  --tb-a-14: rgba(124, 92, 255, 0.14);
  --tb-a-15: rgba(124, 92, 255, 0.15); /* active sidebar item */
  --tb-a-16: rgba(124, 92, 255, 0.16); /* hero radial gradient */
  --tb-a-35: rgba(124, 92, 255, 0.35); /* ::selection */
  --tb-a-38: rgba(124, 92, 255, 0.38); /* pill border */
  --tb-a-45: rgba(124, 92, 255, 0.45); /* card hover border */

  /* Text */
  --tb-ink: #f7f3ea; /* primary text, warm off-white (NOT pure white) */
  --tb-muted: #9a93ae; /* lead paragraph */
  --tb-muted-2: #8a83a0; /* secondary text, nav */
  --tb-faint: #625b78; /* mono label, meta */

  /* Semantic */
  --tb-ok: #3fd68c;
  --tb-warn: #f0b23e;
  --tb-err: #f2555a;
  --tb-sys: #7c5cff; /* AI / system = accent */
  --tb-ok-soft: rgba(63, 214, 140, 0.13);
  --tb-warn-soft: rgba(240, 178, 62, 0.13);
  --tb-err-soft: rgba(242, 85, 90, 0.13);

  /* Lines & depth. ONE shadow in the whole system; no inner shadows. */
  --tb-border: rgba(255, 255, 255, 0.09);
  --tb-border-soft: rgba(255, 255, 255, 0.07);
  --tb-border-str: rgba(255, 255, 255, 0.14); /* ghost button */
  --tb-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);

  /* Radius */
  --tb-r-sm: 6px; /* mono chip */
  --tb-r-md: 9px; /* input, button */
  --tb-r-lg: 11px; /* list row */
  --tb-r-xl: 12px; /* stat card */
  --tb-r-2xl: 14px; /* card */
  --tb-r-3xl: 18px; /* hero panel, mockup */
  --tb-r-pill: 999px;

  /* Type */
  --tb-font: "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --tb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  /* Motion. Every colour/border/background transition is this one value.
     No spring, no bounce, no scale — an explicit brand prohibition. */
  --tb-t: 0.15s ease;

  /* ---- Legacy aliases ----------------------------------------------------
     Everything below is the PRE-REBRAND variable set, re-pointed at the --tb-*
     tokens above. They exist so that ~2400 lines of portal/admin/dashboard CSS
     (and web/admin/app.js, which injects `style="color:var(--warn)"` at
     runtime) keep resolving while call sites migrate surface by surface.

     Why aliases and not a find-and-replace: deleting a variable that is still
     referenced does NOT throw. The declaration is simply dropped as invalid and
     the element silently renders with an inherited or initial colour — white
     text on white, or an untinted button. That failure is invisible in a diff
     and easy to miss in review, so the old names are kept alive deliberately.
     They hold NO literal colours of their own: every one forwards to a token,
     so there is exactly one place to change a brand colour. */
  --bg: var(--tb-bg);
  --bg-elev: var(--tb-surf);
  --bg-elev-2: var(--tb-surf-2);
  --border: var(--tb-border);
  --border-strong: var(--tb-border-str);
  --text: var(--tb-ink);
  --text-dim: var(--tb-muted-2);
  --text-faint: var(--tb-faint);
  --accent: var(--tb-a1);
  --accent-hover: var(--tb-a1-hover);
  --accent-soft: var(--tb-a-14);
  --ok: var(--tb-ok);
  --ok-soft: var(--tb-ok-soft);
  --err: var(--tb-err);
  --err-soft: var(--tb-err-soft);
  --warn: var(--tb-warn);
  --radius: var(--tb-r-2xl);
  --radius-sm: var(--tb-r-md);
  --shadow: var(--tb-shadow);
  --font: var(--tb-font);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--tb-font);
  /* Flat --tb-bg with the two documented low-opacity radials on top. These two
     are the ONLY background gradients the brand permits; blocks, cards and
     buttons never carry one. background-color is set separately from
     background-image so the flat base survives if an image fails to paint. */
  background-color: var(--tb-bg);
  background-image:
    radial-gradient(900px 520px at 84% -10%, var(--tb-a-16), transparent 62%),
    radial-gradient(700px 420px at 4% 4%, rgba(167, 139, 250, 0.08), transparent 60%);
  background-attachment: fixed;
  color: var(--tb-ink);
  min-height: 100vh;
  /* Body copy is weight 300 across the brand; headings step up to 500 and only
     buttons reach 600. Setting it here means every surface inherits it. */
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--tb-a-35);
  color: var(--tb-ink);
}

/* Links default to the accent's lighter step so they read on --tb-surf. */
a {
  color: var(--tb-a2);
  text-decoration: none;
  transition: color var(--tb-t);
}

a:hover {
  color: var(--tb-a3);
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

.wrap--wide {
  max-width: 640px;
}

/* Header / brand */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* The mark is the real brand SVG (/brand/tartibli/mark.svg) — the "Kaskad"
   form: one gradient bar over two blocks. The artwork carries its own colours,
   so this rule only reserves the box. Keep the 40x40 size: width/height are
   also set as attributes on the <img> so nothing reflows while it loads.

   The file is cropped to the ink box (viewBox="8 8 32 32"). Do not swap in an
   un-cropped 48x48 export: the mark would render ~33% smaller than every other
   40px element next to it, which is the exact trap the logo spec calls out. */
.brand__mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: block;
}

.brand__name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--tb-ink);
}

/* Sub-label under the wordmark. Mono, because it is a meta label — but NOT
   uppercased: on the portal sidebar this same node holds the customer's own
   company name, and shouting a company name back at them reads as an error. */
.brand__tag {
  color: var(--tb-faint);
  font-family: var(--tb-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.greeting {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 22px 0 6px;
  color: var(--tb-ink);
}

.lede {
  color: var(--tb-muted);
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* Stepper */
.steps {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
  list-style: none;
  padding: 0;
}

.steps li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tb-faint);
  padding: 8px 10px;
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-lg);
  background: var(--tb-surf-2);
  transition: color var(--tb-t), border-color var(--tb-t), background var(--tb-t);
}

.steps li .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--tb-font-mono);
  font-size: 11px;
  font-weight: 500;
  background: var(--tb-surf);
  color: var(--tb-faint);
  flex: 0 0 auto;
}

.steps li.is-active {
  color: var(--tb-ink);
  border-color: var(--tb-a-38);
  background: var(--tb-a-10);
}

/* Dark digit on the violet dot. Off-white on #7C5CFF does not clear contrast —
   the same reason the primary button's label is --tb-bg and not white. */
.steps li.is-active .dot {
  background: var(--tb-a1);
  color: var(--tb-bg);
}

.steps li.is-done {
  color: var(--tb-ok);
  border-color: rgba(63, 214, 140, 0.4);
}

.steps li.is-done .dot {
  background: var(--tb-ok);
  color: var(--tb-bg);
}

/* Cards / panels. The one card pattern for the whole product: flat surface,
   hairline border, 14px radius, the single system shadow. No gradient fill and
   no coloured left-edge accent bar — both are explicit brand prohibitions. */
.card {
  background: var(--tb-surf);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-2xl);
  padding: 26px 28px;
  box-shadow: var(--tb-shadow);
}

.card + .card {
  margin-top: 18px;
}

.card__title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--tb-ink);
}

.card__sub {
  color: var(--tb-muted-2);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 20px;
  text-wrap: pretty;
}

/* Hidden helper */
[hidden] {
  display: none !important;
}

/* Forms */
.field {
  margin-bottom: 16px;
}

.field > label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 7px;
  color: var(--tb-ink);
}

.input,
.textarea {
  width: 100%;
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-md);
  color: var(--tb-ink);
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color var(--tb-t), box-shadow var(--tb-t);
}

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--tb-a1);
  box-shadow: 0 0 0 3px var(--tb-a-14);
}

.input::placeholder {
  color: var(--tb-faint);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--tb-t), background var(--tb-t);
}

.check:hover {
  border-color: var(--tb-border-str);
}

.check:has(input:checked) {
  border-color: var(--tb-a-45);
  background: var(--tb-a-10);
}

.check input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--tb-border-str);
  border-radius: var(--tb-r-sm);
  background: var(--tb-surf-2);
  cursor: pointer;
  transition: background var(--tb-t), border-color var(--tb-t);
}

.check input:checked {
  background: var(--tb-a1);
  border-color: var(--tb-a1);
}

/* Dark tick on the violet fill, same contrast rule as the primary button. */
.check input:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid var(--tb-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.check input:focus-visible {
  outline: 2px solid var(--tb-a-45);
  outline-offset: 2px;
}

.check__text strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--tb-ink);
}

.check__text span {
  font-size: 12.5px;
  color: var(--tb-muted-2);
}

/* Buttons. 600 is the ONLY place the type scale goes above 500. Transitions
   are colour-only: no scale, no bounce — an explicit brand prohibition. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  padding: 13px 22px;
  border-radius: var(--tb-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--tb-t), border-color var(--tb-t), color var(--tb-t),
    opacity var(--tb-t);
  text-decoration: none;
}

/* The label is DARK on the violet fill. Off-white on #7C5CFF fails contrast;
   the brand spec fixes the primary button's text at --tb-bg for that reason.
   Repeat the colour on :hover states elsewhere or the global `a` rule wins
   when a .btn--primary happens to be an <a>. */
.btn--primary {
  background: var(--tb-a1);
  color: var(--tb-bg);
  width: 100%;
}

.btn--primary:hover {
  background: var(--tb-a1-hover);
  color: var(--tb-bg);
}

/* Ghost = transparent, not a raised block. Hover moves the BORDER to the
   accent; the fill stays transparent. */
.btn--ghost {
  background: transparent;
  color: var(--tb-ink);
  border-color: var(--tb-border-str);
}

.btn--ghost:hover {
  border-color: var(--tb-a1);
  color: var(--tb-ink);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  gap: 10px;
  /* Tugma qatori har doim biror narsadan KEYIN keladi — matn, forma yoki xato
     xabari. Yuqori chekinishsiz u oldingi blokka yopishib qolardi: asoschi
     buni admin login ekranida ("Noto'g'ri parol" tugmaga yopishgan) va fikr
     formasida ko'rsatdi. Ikki joyda allaqachon `style="margin-top"` qo'lda
     yozib qo'yilgan edi — ya'ni kamchilik sezilgan, lekin har safar yamalgan.
     Endi qoida shu yerda. */
  margin-top: 16px;
}

/* Inline messages */
.msg {
  font-size: 13.5px;
  line-height: 1.6;
  padding: 11px 13px;
  border-radius: var(--tb-r-md);
  margin-top: 14px;
}

.msg--err {
  background: var(--tb-err-soft);
  color: var(--tb-err);
  border: 1px solid rgba(242, 85, 90, 0.3);
}

.msg--ok {
  background: var(--tb-ok-soft);
  color: var(--tb-ok);
  border: 1px solid rgba(63, 214, 140, 0.3);
}

/* Copy link box */
.copybox {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* The copied value is a URL/token — mono, so ambiguous glyph pairs (l/1, O/0)
   are distinguishable when a customer reads it out over the phone. */
.copybox .input {
  font-family: var(--tb-font-mono);
  font-size: 13px;
  color: var(--tb-a2);
}

/* Instruction list */
.howto {
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--tb-muted-2);
  font-size: 14px;
  line-height: 1.7;
}

.howto li {
  margin-bottom: 6px;
}

.howto code {
  background: var(--tb-surf-2);
  border: 1px solid var(--tb-border);
  padding: 1px 6px;
  border-radius: var(--tb-r-sm);
  color: var(--tb-a2);
  font-family: var(--tb-font-mono);
  font-size: 12px;
}

/* Info note */
.note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--tb-a-10);
  border: 1px solid var(--tb-a-38);
  border-radius: var(--tb-r-md);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tb-ink);
  /* Chekinish IKKALA tomonda. Ilgari faqat yuqorisi bor edi, shuning uchun
     izoh qutisidan keyin kelgan har qanday narsa (`.field` da yuqori chekinish
     yo'q, `.btn-row` da ham yo'q edi) unga yopishib qolardi. Asoschi buni ikki
     ekranda ko'rsatdi; kamchilik bitta — qutining pastki tomoni nafas olmaydi. */
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Trial notice reuses .note but in the warn hue. The old rule declared
   `background` twice (a flat --warn, then the tint) — a leftover fallback that
   only ever painted the tint. Collapsed to the single tint it always rendered. */
.note--trial {
  background: var(--tb-warn-soft);
  border-color: rgba(240, 178, 62, 0.35);
}

/* Team list */
.team {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.team li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--tb-border);
}

.team li:first-child {
  border-top: none;
}

.team .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tb-surf-2);
  border: 1px solid var(--tb-border);
  display: grid;
  place-items: center;
  font-family: var(--tb-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--tb-a2);
  flex: 0 0 auto;
}

.team .who strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--tb-ink);
}

.team .who span {
  font-size: 12.5px;
  color: var(--tb-muted-2);
}

.team__empty {
  color: var(--tb-faint);
  font-size: 13.5px;
  padding: 10px 0;
}

/* Board links */
.links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* Clickable row. Hover moves the border to the accent only — no translate and
   no scale here: rows sit in a tight stack and lifting one shifts the list. */
.linkrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--tb-surf-2);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-lg);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--tb-ink);
  transition: border-color var(--tb-t);
}

.linkrow:hover {
  border-color: var(--tb-a-45);
  color: var(--tb-ink);
}

.linkrow .who strong {
  font-size: 14px;
  font-weight: 500;
}

.linkrow .arrow {
  color: var(--tb-a2);
  font-size: 18px;
}

/* Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--tb-border-str);
  border-top-color: var(--tb-a1);
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

.provisioning {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tb-muted-2);
  font-size: 14px;
}

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

/* Success hero (join page) */
.hero {
  text-align: center;
  padding: 14px 0 6px;
}

.hero__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--tb-ok-soft);
  border: 1px solid rgba(63, 214, 140, 0.4);
  display: grid;
  place-items: center;
  font-size: 30px;
}

.hero__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  color: var(--tb-ink);
}

.hero__sub {
  color: var(--tb-muted);
  margin: 0 0 22px;
  text-wrap: pretty;
}

.footer {
  text-align: center;
  color: var(--tb-faint);
  font-size: 12.5px;
  margin-top: 32px;
}

.footer a {
  color: var(--tb-muted-2);
}

.footer a:hover {
  color: var(--tb-ink);
}

@media (max-width: 480px) {
  .wrap {
    padding: 28px 14px 60px;
  }
  .steps li span.lbl {
    display: none;
  }
}

/* ---- Language switcher (uz / en / de) ------------------------------------
   Injected by i18n.js into every [data-langsw] host. Purely additive: no
   existing selector is modified. */
.langsw {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-r-pill);
  background: var(--tb-surf-2);
  flex: 0 0 auto;
}

/* Language codes are two-letter labels, i.e. mono territory in this system. */
.langsw__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--tb-muted-2);
  font-family: var(--tb-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--tb-r-pill);
  cursor: pointer;
  line-height: 1;
  transition: background var(--tb-t), color var(--tb-t);
}

.langsw__btn:hover {
  color: var(--tb-ink);
  background: rgba(255, 255, 255, 0.04);
}

.langsw__btn.is-active {
  background: var(--tb-a1);
  color: var(--tb-bg);
}

.brand .langsw {
  margin-left: auto;
}