/* AliasX — shared tokens and primitives for aliasx.io, app.aliasx.io and account.aliasx.io.
   Graphite, cream and one orange accent — the same look as the extension (approved 06.11, applied to web 09.11).
   Unbounded (display) + Onest (UI) + JetBrains Mono (addresses only). All OFL, served from our origin, no CDN.
   Font chain (09.11): font-display: optional + <link rel=preload> for the subsets a page paints first. If a
   web font is not ready by first paint (cold, slow network) the page keeps the local fallback for its whole
   life — no late re-render; the cached font is used from the next navigation. Each fallback face has
   size-adjust/ascent/descent measured against the shipped woff2 in Chromium, so both renders share metrics.
   Scripts the woff2 subsets do not cover (Vietnamese tone marks, Arabic, Persian, Devanagari, CJK) use one
   system stack for the whole page instead of mixing glyphs from two fonts in one word. */

@font-face { font-family: "Unbounded"; font-weight: 400 800; font-display: optional; src: url("fonts/unbounded-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-weight: 400 800; font-display: optional; src: url("fonts/unbounded-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-weight: 400 800; font-display: optional; src: url("fonts/unbounded-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 400 700; font-display: optional; src: url("fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 400 700; font-display: optional; src: url("fonts/onest-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-weight: 400 700; font-display: optional; src: url("fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 700; font-display: optional; 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+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-weight: 400 700; font-display: optional; 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+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 700; font-display: optional; src: url("fonts/jetbrains-mono-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* Metric-matched fallbacks: Onest ≈ Arial ×1.042, JetBrains Mono ≈ Menlo ×1.0. Unbounded is ×1.33 wider than Arial,
   but matching that width makes glyphs too tall for tight display leading — 1.12 keeps lines apart (REV2). */
@font-face { font-family: "Onest Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); size-adjust: 104.2%; ascent-override: 93%; descent-override: 28.8%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); size-adjust: 112%; ascent-override: 88.4%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Menlo"), local("Consolas"), local("Courier New"), local("Roboto Mono"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  color-scheme: light dark;
  --bg: #f5f4f2;          /* canvas, same as the extension */
  --bg-2: #ebe9e5;
  --surface: #ffffff;
  --surface-2: #f7f6f4;
  --ink: #18181b;
  --ink-2: #52525b;
  --ink-3: #5f5f68;
  --field: #8a8a93;     /* input boundary, 3:1 on white */
  --line: #e7e4df;
  --line-2: #d6d2cc;
  --pine: #18181b;        /* primary actions: graphite (name kept for compatibility) */
  --pine-2: #2e2e33;
  --on-pine: #ffffff;
  --mint: #fde3d3;        /* the alias: chips, highlights — soft orange (name kept) */
  --mint-2: #fdeee5;
  --on-mint: #7a3410;
  --danger: #b42318;
  --danger-tint: #fdeceb;
  --warn: #8a3b12;
  --warn-tint: #fdeee5;
  --focus: #f07a3a;
  --display: "Unbounded", "Unbounded Fallback", "Onest", system-ui, sans-serif;
  --sans: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
  --r-xl: 28px; --r-l: 18px; --r: 12px; --r-s: 8px;
  --shadow-1: 0 1px 2px rgb(24 24 27 / .06);
  --shadow-2: 0 1px 2px rgb(24 24 27 / .05), 0 8px 24px -8px rgb(24 24 27 / .16);
  --shadow-3: 0 2px 4px rgb(24 24 27 / .04), 0 24px 60px -18px rgb(24 24 27 / .28);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131315; --bg-2: #1b1b1e; --surface: #1c1c1f; --surface-2: #242428;
    --ink: #f4f4f5; --ink-2: #b4b4bb; --ink-3: #8f8f98; --line: #2c2c31; --line-2: #3d3d44; --field: #6b6b74;
    --pine: #f4f4f5; --pine-2: #ffffff; --on-pine: #18181b; --mint: #3a2518; --mint-2: #2a1d15; --on-mint: #ffc39f;
    --danger: #ff8f86; --danger-tint: #3a1b19; --warn: #ffc39f; --warn-tint: #3a2518; --focus: #f5894d;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4); --shadow-2: 0 1px 2px rgb(0 0 0 / .4), 0 10px 28px -10px rgb(0 0 0 / .7); --shadow-3: 0 30px 70px -20px rgb(0 0 0 / .8);
  }
}
:root[data-theme="dark"] {
  --bg: #131315; --bg-2: #1b1b1e; --surface: #1c1c1f; --surface-2: #242428;
    --ink: #f4f4f5; --ink-2: #b4b4bb; --ink-3: #8f8f98; --line: #2c2c31; --line-2: #3d3d44; --field: #6b6b74;
    --pine: #f4f4f5; --pine-2: #ffffff; --on-pine: #18181b; --mint: #3a2518; --mint-2: #2a1d15; --on-mint: #ffc39f;
    --danger: #ff8f86; --danger-tint: #3a1b19; --warn: #ffc39f; --warn-tint: #3a2518; --focus: #f5894d;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4); --shadow-2: 0 1px 2px rgb(0 0 0 / .4), 0 10px 28px -10px rgb(0 0 0 / .7); --shadow-3: 0 30px 70px -20px rgb(0 0 0 / .8);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01"; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--mint); color: var(--on-mint); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.mono { font-family: var(--mono); }
.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 30; padding: 10px 16px; border-radius: 999px; background: #18181b; color: #ffffff; font-weight: 600; text-decoration: none; }
.skip:focus { inset-block-start: 12px; }

/* Brand: pine squircle with a mint X + lowercase Unbounded wordmark. */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand__mark { inline-size: 30px; block-size: 30px; flex: none; }
.brand__word { font: 650 19px/1 var(--display); letter-spacing: -.03em; }

/* Buttons: pill-shaped, one filled style per view. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 46px; padding: 0 22px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-1);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--pine); border-color: var(--pine); color: var(--on-pine); box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 6px 16px -6px rgb(24 24 27 / .55); }
.btn--primary:hover { background: var(--pine-2); border-color: var(--pine-2); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); padding-inline: 14px; }
.btn--ghost:hover { background: var(--bg-2); color: var(--ink); border-color: transparent; }
.btn--danger { color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); background: var(--danger-tint); }
.btn--danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--block { inline-size: 100%; }
.btn--s { min-block-size: 36px; padding: 0 14px; font-size: 14px; }
.btn--l { min-block-size: 54px; padding: 0 28px; font-size: 16px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"]::after { content: ""; inline-size: 14px; block-size: 14px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: ax-spin .8s linear infinite; }

/* Fields */
.field { display: grid; gap: 7px; }
.field + .field { margin-block-start: 18px; }
.label { font-size: 14px; font-weight: 600; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.input, .select { inline-size: 100%; min-block-size: 48px; padding: 0 16px; border: 1px solid var(--field); border-radius: var(--r); background: var(--surface); color: var(--ink); font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.input:hover, .select:hover { border-color: var(--ink-3); }
.input:focus, .select:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 70%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-tint); }
.input--mono { font-family: var(--mono); font-size: 15px; }
.hint { color: var(--ink-3); font-size: 13.5px; line-height: 1.45; }
.err { color: var(--danger); font-size: 14px; font-weight: 500; }
.link { color: var(--pine); font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Notices: tinted, rounded. */
.note { padding: 12px 16px; border-radius: var(--r); background: var(--surface-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.note--mint { background: var(--mint-2); color: var(--on-mint); }
.note--warn { background: var(--warn-tint); color: var(--ink); }
.note--danger { background: var(--danger-tint); color: var(--ink); }
.note strong { color: var(--ink); }

/* The alias chip: the product's signature object. */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--mint); color: var(--on-mint); font: 600 14px/1.2 var(--mono); }
.chip::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }

.spinner { display: inline-block; inline-size: 18px; block-size: 18px; border: 2px solid var(--line-2); border-block-start-color: var(--pine); border-radius: 50%; animation: ax-spin .9s linear infinite; vertical-align: -3px; }
@keyframes ax-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
@media (forced-colors: active) { .btn, .input, .select, .chip { border: 1px solid ButtonText; } }

/* ── International (09.11) ─────────────────────────────────────────────────────────────────────
   One font per script, no downloads: the woff2 subsets cover Latin, Latin Extended and Cyrillic only. */
:root:lang(vi) { --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --display: var(--sans); }
:root:is(:lang(ar), :lang(fa)) { --sans: system-ui, -apple-system, "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; --display: var(--sans); }
:root:lang(hi) { --sans: system-ui, "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif; --display: var(--sans); }
:root:lang(ja) { --sans: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; --display: var(--sans); }
:root:lang(ko) { --sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --display: var(--sans); }
:root:lang(zh-Hans) { --sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; --display: var(--sans); }
:root:lang(zh-Hant) { --sans: system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; --display: var(--sans); }
/* Connected scripts and CJK: no tracking (it breaks Arabic joining), a little more leading. */
:root:is(:lang(ar), :lang(fa), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) body * { letter-spacing: 0 !important; }
:root:is(:lang(ar), :lang(fa), :lang(hi)) body { line-height: 1.7; }
/* Addresses, codes, passwords and file names stay left-to-right inside a right-to-left page. */
.mono, .input--mono, input[type="email"], input[type="password"], .ltr { unicode-bidi: isolate; direction: ltr; }
[dir="rtl"] :is(.input--mono, input[type="email"], input[type="password"]) { text-align: right; }
/* Language picker (09.11 REV3): [data-language-picker] = compact trigger + native popover panel of 20 autonyms.
   Base layout only; the shared /language-picker.css (separate session) may refine it. No JS here: open/close is native
   popover, choice + aria-pressed + data-language-current are filled by the locale runtime. */
.lang-picker { position: relative; display: inline-flex; }
.lang-picker__trigger { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; min-inline-size: 44px; padding-inline: 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 500 14px/1 var(--sans); cursor: pointer; }
.lang-picker__trigger:hover { color: var(--ink); border-color: var(--field); }
.lang-picker__current:empty { display: none; }
.lang-picker__chev { flex: none; opacity: .7; }
.lang-picker__panel { inset: auto; margin: auto; inline-size: min(520px, calc(100vw - 24px)); max-block-size: min(560px, calc(100dvh - 48px)); overflow: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); }
.lang-picker__panel:popover-open { position: fixed; inset: 0; }
.lang-picker__panel::backdrop { background: rgb(0 0 0 / .18); }
.lang-picker__title { margin-block-end: 10px; padding-inline: 6px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.lang-picker__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; list-style: none; }
.lang-picker__opt { display: flex; align-items: center; inline-size: 100%; min-block-size: 44px; padding-inline: 12px; border: 0; border-radius: var(--r); background: none; color: inherit; font: 500 15px/1.2 var(--sans); text-align: start; cursor: pointer; overflow-wrap: anywhere; }
.lang-picker__opt[dir="rtl"] { text-align: right; justify-content: flex-end; }
[dir="rtl"] .lang-picker__opt[dir="rtl"] { justify-content: flex-start; }
.lang-picker__opt:hover { background: var(--surface-2); }
.lang-picker__opt[aria-pressed="true"] { background: var(--mint); color: var(--on-mint); font-weight: 650; }
.lang-picker__opt[aria-pressed="true"]::after { content: "✓"; margin-inline-start: auto; padding-inline-start: 8px; }
.lang-picker__native { display: none; }
/* Browsers without popover: no floating panel, the native select is the control. */
@supports not selector(:popover-open) {
  .lang-picker__trigger, .lang-picker__panel { display: none; }
  .lang-picker__native { display: inline-flex; }
  .lang-picker__native select { min-block-size: 44px; padding-inline: 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); }
}
@media (max-width: 480px) { .lang-picker__panel { max-block-size: calc(100dvh - 32px); } }