/* Hallmark · macrostructure: Workbench · tone: technical-utilitarian · anchor hue: cobalt 250deg
 * genre: modern-minimal · nav: N1a (page has 2 destinations) · footer: Ft2 inline
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 * remediation pass 2026-07-31 — closes 5 critical / 6 major / 5 minor from hallmark audit.
 * Single accent, no gradients, no ambient glow, roman display, real typeface, focus-visible.
 * admin redesign 2026-07-31 — type scale down one rung; settings moved to .field rows
 *   (label + control + hint in one block) after hints read as belonging to the next field.
 * settings tabs 2026-07-31 — 3 tabs grouped by who the knob affects (guest /
 *   operator / domain); held to an 880px measure so label and control stay paired.
 * khung 2026-08-01 — gom 6 bề rộng container rời rạc về 2 token (--shell 1440,
 *   --measure 880); sửa lệch 30px giữa header và trang chủ.
 * public type pass 2026-07-31 — display scale down one rung to meet the admin side
 *   (hero 68→46, card head 31→22, mail subject 34→25); body gets a real 15px baseline.
 */

:root {
  color-scheme: light;

  /* paper + ink */
  --bg: #f5f2ed;
  --surface: #ffffff;
  --surface-2: #eae6de;
  --surface-3: #ddd7cd;
  --ink: #18151d;
  --muted: #67616e;
  --faint: #958e9a;
  --line: #dcd5cc;

  /* vibrant purple-pink gradient accent */
  --accent: #7c5cff;
  --accent-2: #e05cff;
  --accent-soft: #f2edff;
  --focus: #7c5cff;
  --danger: #c83f58;
  --success: #108e66;

  /* mail canvas stays light in both themes: email HTML is authored for white. */
  --mail-canvas: #ffffff;
  --mail-canvas-ink: #241f27;

  /* type */
  --font-display: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Bề rộng container. Chỉ HAI con số, và mọi vùng phải lấy từ đây.
     Trước đó có sáu giá trị rời rạc (1220/1160/940/880…) nên header và nội
     dung trang chủ lệch nhau 30px — vừa đủ để mắt thấy, quá nhỏ để trông
     có chủ đích. Thêm trang mới mà tự gõ số là lệch lại từ đầu. */
  --shell: 1440px;    /* header · footer · trang chủ · hộp thư · admin */
  --measure: 880px;   /* đọc mail · tài liệu · cài đặt — cột chữ, KHÔNG nới */
  --gutter: 40px;

  /* elevation */
  --shadow-card: 0 18px 50px rgba(30, 24, 40, .08);
  --shadow-raised: 0 12px 30px rgba(30, 24, 40, .12);
  --radius: 14px;

  /* z-index scale — never arbitrary values */
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 500;

  /* motion */
  --dur-short: 120ms;
  --dur-mid: 180ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  font-family: var(--font-body);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0c12;
  --surface: #17141e;
  --surface-2: #221d2b;
  --surface-3: #2d2739;
  --ink: #f5f0f8;
  --muted: #b7aeba;
  --faint: #887f8c;
  --line: #322b3d;
  --accent: #a855f7;
  --accent-2: #ec4899;
  --accent-soft: #2c183b;
  --focus: #a855f7;
  --danger: #ff6b87;
  --success: #34d399;
  --shadow-card: 0 20px 60px rgba(0, 0, 0, .45);
  --shadow-raised: 0 12px 32px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  /* A real baseline. Without it, any paragraph that doesn't declare a size falls
     back to the browser's 16px — a rung above everything around it. */
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-style: normal; letter-spacing: -.03em; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
code, pre { font-family: var(--font-mono); }
svg { flex-shrink: 0; }

/* Focus ring: instant, never transitioned, visible on every interactive element. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.site-header, .admin-header {
  width: min(var(--shell), calc(100% - var(--gutter)));
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrap thay vì cắt: html/body đặt overflow-x: clip nên nếu hàng này chật, phần
     thừa bị CẮT ÂM THẦM chứ không hiện thanh cuộn để mà biết. Thêm nút VI|EN làm
     hàng này chật thêm, nên cho nó xuống dòng khi hết chỗ. */
  flex-wrap: wrap;
  gap: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px;
  font-size: 20px; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px rgba(124, 92, 255, 0.32);
  flex: none;
}
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-family: var(--font-display); font-size: 15px; letter-spacing: .01em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 20px; color: var(--muted); font-size: 13px; font-weight: 600; }
.header-actions > a { white-space: nowrap; }
.header-actions > a:hover { color: var(--ink); }
.icon-button {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted); background: var(--surface); cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.icon-button:hover { color: var(--ink); border-color: var(--ink); }
.theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: none; }
[data-theme="dark"] .theme-moon { display: block; }

.eyebrow {
  display: block; color: var(--muted); font-size: 12px; font-weight: 600;
  letter-spacing: .01em;
}

.home-main {
  width: min(var(--shell), calc(100% - var(--gutter))); margin: 0 auto;
  /* Cột phải chặn ở 520px: form ba ô mà kéo tới 600px thì các ô giãn ra vô
     duyên. Phần dư dồn sang cột chữ bên trái, nơi nó có ích. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(48px, 8vw, 120px); align-items: center;
  padding: 52px 0 68px;
}
.home-copy h1, .docs-hero h1 {
  max-width: 660px; margin: 14px 0 22px;
  font-size: clamp(30px, 3.7vw, 46px); line-height: 1.08; letter-spacing: -.035em;
  overflow-wrap: anywhere; min-width: 0;
}
.home-copy h1 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(105deg, var(--accent), var(--accent-2));
  background-clip: text;
  -webkit-background-clip: text;
}
.home-copy > p { max-width: 540px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.trust-row span {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); background: var(--surface); font-size: 12px;
}

.address-card, .mail-card, .login-card, .admin-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.address-card { padding: clamp(22px, 3vw, 32px); }
.card-index { color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.address-card h2 { margin: 0 0 22px; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.2; }
label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
input, select {
  min-width: 0; height: 44px; padding: 0 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--surface-2);
  transition: border-color var(--dur-short) var(--ease-out);
}
input:hover, select:hover { border-color: var(--faint); }

.address-composer {
  display: grid; grid-template-columns: minmax(100px, 1fr) auto minmax(120px, 1fr);
  align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  padding: 0 8px;
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.address-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.address-composer input, .address-composer select {
  width: 100%; height: 44px; padding: 0 4px; border: 0; border-radius: 0; background: transparent;
  font-family: var(--font-mono); font-size: 14px; color: var(--ink); outline: 0; box-shadow: none;
}
.address-composer input:hover, .address-composer select:hover { border: 0; }
.address-composer select { cursor: pointer; padding-right: 12px; }
.address-composer > span { color: var(--muted); font-family: var(--font-mono); font-size: 15px; font-weight: 700; padding: 0 6px; user-select: none; }
.form-error { min-height: 20px; margin: 8px 0 4px; color: var(--danger); font-size: 12px; }
.button-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 8px; }

/* Kiểu B — Minimal Tech Sharp: Bo nhẹ 8px, viền kép mượt, phản hồi cơ học chính xác */
.button {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 13px; white-space: nowrap;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.button:active { transform: translateY(1px); }

.button-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 16px rgba(124, 92, 255, 0.28);
}
.button-primary:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 24px rgba(124, 92, 255, 0.4);
}
[data-theme="dark"] .button-primary { color: #ffffff; }

.button-muted {
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.04);
}
.button-muted:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.button-small { min-height: 36px; padding: 0 12px; font-size: 12px; border-radius: 7px; }
.card-note { margin: 24px 0 0; color: var(--faint); font-size: 12px; line-height: 1.55; }
.notice { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.notice-danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.is-hidden { display: none !important; }

.site-footer {
  width: min(var(--shell), calc(100% - var(--gutter))); min-height: 76px; margin: 0 auto; padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--line); color: var(--faint); font-size: 12px;
}
.site-footer a { white-space: nowrap; }
.site-footer a:hover { color: var(--ink); }

.inbox-shell {
  width: min(var(--shell), calc(100% - var(--gutter))); margin: 0 auto;
  display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 28px; padding: 30px 0 84px;
}
.inbox-sidebar { align-self: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sidebar-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 600; }
.sidebar-heading a {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  color: var(--muted); background: var(--surface-2);
  transition: color var(--dur-short) var(--ease-out);
}
.sidebar-heading a:hover { color: var(--ink); }
.address-history { display: grid; gap: 6px; }
.history-item { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 3px; align-items: center; border-radius: 9px; }
.history-item > a {
  min-width: 0; padding: 9px 10px; overflow: hidden; color: var(--muted);
  border: 1px solid transparent; border-radius: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.history-item > a:hover { color: var(--ink); background: var(--surface-2); }
.history-item button {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; border-radius: 6px; color: var(--faint); background: transparent; cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
/* Affordance must reach keyboard + touch, not hover only. */
.history-item:hover button,
.history-item:focus-within button,
.history-item button:focus-visible { opacity: 1; }
@media (hover: none) { .history-item button { opacity: 1; } }
.history-item button:hover { color: var(--danger); }
.history-item.is-active > a { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.new-address-link { display: block; margin-top: 15px; padding: 11px 0 2px; color: var(--accent); border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; white-space: nowrap; }

.inbox-panel { min-width: 0; }
.inbox-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 10px 2px 22px; }
.inbox-toolbar h1 {
  max-width: 640px; margin: 6px 0 0; overflow: hidden;
  font-family: var(--font-mono); font-weight: 600; font-size: clamp(16px, 1.9vw, 21px); letter-spacing: -.02em;
  text-overflow: ellipsis; white-space: nowrap;
}
.toolbar-buttons { display: flex; gap: 8px; }
.live-row { min-height: 32px; display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: 12px; }
.live-status { display: flex; align-items: center; gap: 7px; }
.live-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.live-status.is-live { color: var(--success); }
.live-status.is-live i { background: var(--success); }
#message-count { font-variant-numeric: tabular-nums; }

.message-list { display: grid; gap: 8px; }
.message-row {
  /* Cột người gửi chặn 240px thay vì .65fr: khung rộng 1440 thì .65fr đẩy
     nó lên ~300px cho một cái tên, để lại khoảng trống giữa tên và tiêu đề.
     Chặn lại thì phần dư chảy sang cột tiêu đề — chỗ thật sự cần. */
  display: grid; grid-template-columns: minmax(125px, 240px) minmax(0, 1fr) auto; gap: 20px; align-items: center;
  min-height: 76px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.message-row:hover { border-color: var(--ink); background: var(--surface-2); }
.message-row.is-new { border-color: var(--accent); }
.message-from { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.message-copy { min-width: 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.message-copy strong { color: var(--ink); font-weight: 600; }
.message-time { color: var(--faint); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* OTP: extracted code surfaced inline + in a docked bar. Additive — absent when no code is found. */
.otp-badge-wrap { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; flex-shrink: 0; }
.otp-badge {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent);
  font-family: var(--font-mono); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums;
}
.otp-copy-btn {
  padding: 3px 9px; border: 1px solid transparent; border-radius: 6px;
  color: var(--surface); background: var(--accent); cursor: pointer;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  transition: background-color var(--dur-short) var(--ease-out);
}
[data-theme="dark"] .otp-copy-btn { color: var(--bg); }
.otp-copy-btn:hover { background: var(--ink); }

.sticky-otp-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: var(--z-sticky);
  width: min(560px, calc(100% - 32px)); padding: 13px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-raised);
}
.sticky-otp-content { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sticky-otp-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.sticky-otp-code { color: var(--accent); font-family: var(--font-mono); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Native <dialog>: focus trap, Esc-to-close and inertness come from the platform. */
.dialog {
  width: min(430px, calc(100% - 32px)); padding: 26px;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); background: var(--surface); box-shadow: var(--shadow-raised);
}
.dialog::backdrop { background: rgb(12 10 16 / .48); }
.dialog[open] { animation: dialog-in var(--dur-mid) var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px); } }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dialog-head h2 { margin: 0; font-size: 18px; }
.dialog .button-row { margin-top: 10px; }

.loading-state, .empty-state { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.loading-state span { width: 26px; height: 26px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state p, .empty-state p { color: var(--muted); font-size: 14px; }
.empty-state h1 { margin: 14px 0 6px; font-size: 19px; }
.empty-state p { max-width: 420px; margin: 0 0 22px; }
.empty-glyph {
  display: grid; place-items: center; width: 46px; height: 46px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
}
.visibility-note { margin: 15px 2px 0; color: var(--faint); font-size: 12px; }

.mail-main { width: min(var(--measure), calc(100% - var(--gutter))); margin: 0 auto; padding: 36px 0 84px; }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.back-link:hover { color: var(--ink); }
.mail-card { overflow: hidden; }

.mail-otp-card { padding: 18px 24px; background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.otp-card-header { margin-bottom: 8px; color: var(--accent); font-size: 12px; font-weight: 600; }
.otp-card-body { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.otp-card-val { color: var(--ink); font-family: var(--font-mono); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

.mail-meta { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 28px 30px 22px; }
.mail-meta h1 { margin: 0; font-size: clamp(18px, 2.3vw, 25px); line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
.mail-meta time { color: var(--faint); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail-addresses { margin: 0; padding: 17px 30px; display: grid; gap: 8px; border-block: 1px solid var(--line); background: var(--surface-2); }
.mail-addresses div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; font-size: 12px; }
.mail-addresses dt { color: var(--faint); }
.mail-addresses dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }
.mail-body { padding: 0; background: var(--mail-canvas); }
.mail-body iframe { display: block; width: 100%; min-height: 520px; border: 0; background: var(--mail-canvas); }
.mail-body pre {
  min-height: 320px; margin: 0; padding: 30px;
  color: var(--mail-canvas-ink); background: var(--mail-canvas);
  font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
}
.mail-missing { min-height: 480px; }

.docs-main { width: min(var(--measure), calc(100% - var(--gutter))); margin: 0 auto; padding: 48px 0 68px; }
.docs-hero h1 { max-width: 660px; font-size: clamp(27px, 3.5vw, 40px); }
.docs-hero > p { max-width: 640px; color: var(--muted); font-size: 14px; line-height: 1.65; }

.docs-section { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }
.docs-section > h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.01em; }
.section-lead { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

/* Công thức đánh số: thứ tự là nội dung, nên nó phải đọc được cả khi CSS hỏng. */
.recipe { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 26px; }
.recipe-step { display: flex; align-items: start; gap: 12px; margin-bottom: 12px; }
.recipe-num {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}
.recipe-step h3 { margin: 3px 0 0; font-size: 15px; }
.recipe-step p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* Khối lệnh. KHÔNG vẽ thanh tiêu đề cửa sổ giả — trình duyệt và terminal của
   người đọc đã có khung thật rồi, thêm khung vẽ tay chỉ là trang trí. */
.code-block { position: relative; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.code-block pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.code-block code { font-size: 12.5px; line-height: 1.7; white-space: pre; }
.code-block.is-response { background: var(--surface-2); }
.code-block.is-response code { color: var(--muted); }
.code-copy {
  position: absolute; top: 8px; right: 8px; z-index: var(--z-raised);
  min-height: 28px; padding: 0 10px; cursor: pointer;
  color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
}
.code-copy:hover { color: var(--ink); border-color: var(--ink); }
.code-copy.is-done { color: var(--success); border-color: var(--success); }

.api-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.docs-section > .api-block:first-of-type { border-top: 0; padding-top: 4px; }
.api-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.api-head b { padding: 5px 8px; color: var(--surface); border-radius: 5px; background: var(--ink); font-size: 10px; letter-spacing: .06em; }
[data-theme="dark"] .api-head b { color: var(--bg); }
.api-head code { color: var(--accent); font-size: 13px; font-weight: 600; }
.api-block > p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.api-block > p b { color: var(--ink); }

.param-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 12.5px; }
.param-table th { color: var(--faint); text-align: left; font-size: 11px; font-weight: 600; }
.param-table th, .param-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.param-table tr:last-child td { border-bottom: 0; }
.param-table td:first-child { white-space: nowrap; }
.param-table td:nth-child(2) { color: var(--muted); white-space: nowrap; }
.param-table code { color: var(--accent); }

.compare-grid, .caveat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.compare-grid article, .caveat-list article { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.compare-grid h3, .caveat-list h3 { margin: 0; font-size: 14px; }
.compare-grid ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.caveat-list p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.docs-note { margin-top: 18px; padding: 16px 18px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 13px; line-height: 1.6; }
.docs-note strong { font-size: 13px; }
.docs-note span { color: var(--muted); }

/* Trang đăng nhập không có thanh header, nên nút đổi giao diện neo ở góc. */
.corner-actions { position: fixed; top: 20px; right: 20px; z-index: var(--z-raised); }
.login-main { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 28px; padding: 30px; }
.login-card { width: min(430px, 100%); padding: 34px; }
.login-card h1 { margin: 0 0 8px; font-size: 22px; }
.login-card > p { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
.login-card input, .login-card .button { width: 100%; }
.login-card .button { margin-top: 14px; }
.login-card .notice { margin-bottom: 16px; }

.admin-header { min-height: 66px; }
.admin-header .brand-mark { width: 32px; height: 32px; font-size: 17px; border-radius: 9px; }
.admin-header .icon-button { width: 34px; height: 34px; }
.admin-header nav { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 12px; font-weight: 600; }
/* Tab/trang đang mở: đổi màu + gạch chân để biết đang ở đâu */
.admin-header nav a { color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent; }
.admin-header nav a:hover { color: var(--ink); }
.admin-header nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-header form { margin: 0; }
.admin-header button { padding: 8px 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; white-space: nowrap; }
.admin-header button:hover { color: var(--ink); border-color: var(--ink); }
/* Admin runs one rung smaller than the public site: it is a dense control surface
   read at arm's length, not a page that has to carry a first impression. */
.admin-main { width: min(var(--shell), calc(100% - var(--gutter))); margin: 0 auto; padding: 16px 0 64px; }
.admin-main input, .admin-main select, .admin-main textarea { height: 38px; font-size: 13px; }
.admin-main textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.admin-title { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.admin-title h1 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; }
.admin-title > span { color: var(--muted); font-size: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat-grid article { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.stat-grid span { color: var(--muted); font-size: 12px; }
.stat-grid strong { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 24px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.admin-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.admin-card { padding: 20px 22px; box-shadow: none; }
.admin-card h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.admin-card > h2 + .card-note { margin-top: 6px; }
/* Bảng đếm mail theo domain: .admin-card không tự có lề trên vì bình thường nó
   nằm trong .admin-columns (grid đã lo khoảng cách), còn đây thì đứng một mình
   ngay dưới dãy số tổng quan. */
.domain-usage, .stats-card { margin-top: 14px; }
.domain-usage .card-note, .stats-card .card-note { margin: 6px 0 14px; }
.domain-usage .admin-table th:first-child, .domain-usage .admin-table td:first-child { width: 40%; }
/* Ô liệt kê nguồn/địa chỉ là thứ duy nhất trong bảng được xuống dòng — để
   nowrap như các ô khác thì một domain gửi nhiều địa chỉ đẩy bảng rộng ra vài
   màn hình. */
.admin-table td.cell-wrap { white-space: normal; min-width: 240px; line-height: 1.7; }
.stats-card + .stats-card { margin-top: 14px; }
.stats-filter { align-items: center; flex-wrap: wrap; }
/* Danh sách tài khoản Cloudflare: mỗi dòng là một tài khoản. */
/* Mỗi tài khoản Cloudflare một HÀNG. Nhiều cột nên khối cho cuộn ngang khi màn
   hẹp thay vì bóp méo; desktop rộng thì đủ chỗ. */
.cf-accounts { margin-top: 14px; display: grid; gap: 8px; overflow-x: auto; }
.cf-row {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(130px, 1fr) minmax(150px, 1.4fr) 34px 34px auto auto;
  gap: 8px; align-items: center; min-width: 720px;
}
.cf-row input[type="text"], .cf-row input[type="password"] { width: 100%; min-width: 0; }
.cf-c-id[readonly] { background: var(--surface-2); color: var(--muted); cursor: default; }
.cf-row-head { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: 0 2px; }
.cf-row-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-col-c { justify-self: center; }
.cf-token-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cf-token-cell input { flex: 1; min-width: 0; }
.cf-icon-btn { flex: none; width: 34px; height: 34px; padding: 0; font-size: 15px; line-height: 1; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; }
.cf-icon-btn:hover { border-color: var(--ink); }
.cf-del-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; line-height: 1; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--danger); cursor: pointer; }
.cf-del-btn svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.cf-del-btn:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.cf-account-flag { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.cf-account-flag input { width: 15px; height: 15px; min-width: 0; padding: 0; accent-color: var(--accent); }
/* Card token (tab Token API) — dạng thẻ, dùng lại token-cell/icon-btn. */
.cf-acct { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); display: grid; gap: 10px; }
.cf-acct-new { border-style: dashed; background: transparent; }
.cf-acct-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-acct-name { flex: 1 1 180px; min-width: 0; font-weight: 600; }
.cf-acct-head .cf-token-cell { flex: 1 1 240px; }
.cf-acct-new-tag { color: var(--muted); font-size: 12px; font-weight: 600; margin-left: auto; }
.cf-flag-del { color: var(--danger); }
.token-doms { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.token-doms-label { width: 100%; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.token-dom { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink); white-space: nowrap; }
.token-dom input { width: 15px; height: 15px; min-width: 0; padding: 0; accent-color: var(--accent); }
.cf-check-result { margin-top: 12px; }
.cf-check-result .cf-steps { margin-top: 6px; }
/* Khối Thêm tài khoản — mở/đóng bằng nút. */
.cf-add { margin-top: 14px; }
.cf-add-form { margin-top: 10px; border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
/* Thuộc tính hidden phải thắng display:grid ở trên, nếu không form luôn hiện. */
.cf-add-form[hidden] { display: none; }
.cf-guide .cf-steps { margin-top: 6px; }
.cf-perm li { padding: 4px 0; }
.cf-perm-row { display: inline-block; margin-top: 3px; margin-right: 8px; }
.cf-perm-row code { white-space: nowrap; }
/* Phần phụ gấp gọn trong tab Nhận mail — mở khi cần. */
.cf-fold { border-top: 1px solid var(--line); margin-top: 12px; }
.cf-fold > summary { cursor: pointer; padding: 10px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; }
.cf-fold > summary::-webkit-details-marker { display: none; }
.cf-fold > summary::before { content: "▸"; color: var(--muted); }
.cf-fold[open] > summary::before { content: "▾"; }
.cf-fold-body { padding: 2px 0 12px; display: grid; gap: 10px; }
.cf-sub-dot { align-self: center; color: var(--muted); font-weight: 600; }
.cf-sub-result { margin-top: 4px; }
.cf-add-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cf-add-fields .cf-add-name { flex: 0 1 200px; min-width: 140px; }
.cf-add-fields .cf-add-tokencell { flex: 1 1 240px; }
.cf-add-result .cf-steps { margin-top: 6px; }
@media (max-width: 900px) {
  .cf-accounts { font-size: 12px; }
  .cf-row, .cf-row-head { min-width: 640px; grid-template-columns: minmax(180px, 240px) minmax(110px, 1fr) minmax(120px, 1.3fr) 32px 32px auto auto; }
  .cf-icon-btn, .cf-del-btn { width: 32px; height: 32px; font-size: 14px; }
}
.filter-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; color: var(--muted); font-size: 12px; }
/* Cột tiêu đề mang thêm trích nội dung nên phải được xuống dòng, khác mọi ô
   khác trong bảng. Kẹp 2 dòng để một mail dài không đẩy hàng cao gấp năm lần
   hàng bên cạnh. */
.admin-table td.cell-subject { white-space: normal; max-width: 460px; }
.mail-preview {
  margin-top: 3px; color: var(--faint); font-size: 11px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Settings rows. The old layout put help text 24px below its input and 0px above
   the next label, so every hint read as belonging to the field underneath it.
   Each row now owns its label + hint in one column, control in the other. */
.field-list { margin-top: 14px; border-top: 1px solid var(--line); }
.field {
  display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 10px 20px;
  align-items: start; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.field:last-child { border-bottom: 0; padding-bottom: 2px; }
.field > label { margin: 0; align-self: center; color: var(--ink); font-size: 13px; font-weight: 600; }
.field-hint { grid-column: 1; margin: -4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.field-control { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; }
.field-control input, .field-control select, .field-control textarea { width: 100%; }
.field-unit { color: var(--faint); font-size: 12px; white-space: nowrap; }
/* Free-text rows (secrets, key lists) need the full card width, so they stack. */
.field.is-stacked { grid-template-columns: minmax(0, 1fr); }
.field.is-stacked .field-control { grid-column: 1; grid-row: auto; }
.field.is-stacked .field-hint { margin-top: 2px; }

.settings-actions {
  position: sticky; bottom: 0; z-index: var(--z-raised);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 16px; padding: 12px 0;
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.settings-actions .field-hint { flex: 1; margin: 0; }

/* Settings dùng cả bề ngang như dashboard thay vì bó vào cột chữ 880px (nửa phải
   màn hình bỏ trống nhìn cụt). Nỗi lo cũ — label và control cách nhau cả gang tay
   — được giải bằng cách xếp HAI card cạnh nhau (.is-split) chứ không kéo giãn một
   field: trong mỗi card, label vẫn kề control như cũ. */
.settings-view { width: min(var(--shell), 100%); }
@media (min-width: 860px) {
  /* Tab nhiều field ngắn → hai card một hàng, lấp chiều ngang, control giữ nguyên. */
  .tab-panel.is-split:not([hidden]) { grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
}
.tabs {
  display: flex; gap: 4px; margin: 18px 0 14px; padding-bottom: 2px;
  overflow-x: auto; border-bottom: 1px solid var(--line);
}
.tab {
  padding: 10px 14px; min-height: 40px; white-space: nowrap; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
  background: transparent; color: var(--muted);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: grid; gap: 14px; }
.tab-panel[hidden] { display: none; }

/* Cloudflare zone list */
.cf-toolbar { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.cf-toolbar .field-hint { margin: 0; }
.cf-zones:not(:empty) { margin-top: 14px; border-top: 1px solid var(--line); }
.cf-zone { padding: 13px 0; border-bottom: 1px solid var(--line); }
.cf-zone-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-zone-name { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }
/* Gom domain theo tài khoản Cloudflare (bảng tổng quan) */
.cf-acc { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px 10px; }
.cf-acc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; font-size: 14px; }
.cf-acc-head b { font-size: 14px; }
.cf-acc .cf-zone:last-child { border-bottom: 0; }
.cf-steps { margin: 10px 0 0; padding: 10px 12px; list-style: none; border-radius: 10px; background: var(--surface-2); font-size: 12px; }
.cf-steps li { padding: 3px 0; color: var(--muted); line-height: 1.5; }
.cf-steps b { color: var(--ink); font-weight: 600; }
.cf-ok { color: var(--success); }
.cf-fail { color: var(--danger); }

.inline-form, .filter-bar { display: flex; gap: 8px; margin-top: 20px; }
.inline-form input { flex: 1; }
.rule-list { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rule-list li { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; }
.rule-list form { margin: 0; }
.rule-list button, .danger-link { color: var(--danger); border: 0; background: transparent; cursor: pointer; font-family: var(--font-body); font-size: 12px; white-space: nowrap; }
.bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.bulk-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.bulk-check input { width: 16px; height: 16px; min-width: 0; height: 16px; padding: 0; accent-color: var(--accent); }
.admin-table .bulk-item { width: 16px; height: 16px; padding: 0; accent-color: var(--accent); }
.filter-bar { margin: 0 0 15px; }
.filter-bar input { width: min(400px, 100%); }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.admin-table th { color: var(--faint); text-align: left; font-size: 11px; font-weight: 600; }
.admin-table th, .admin-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td:nth-child(4) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--surface-2); }
.admin-table a:hover { color: var(--accent); }
.tag { padding: 4px 8px; color: var(--muted); border-radius: 6px; background: var(--surface-2); font-size: 11px; }

/* Combobox chọn nhóm (Kho iCloud) — field + dropdown tuỳ chỉnh, khớp token. */
.combo { position: relative; width: min(360px, 100%); }
.combo-field {
  display: flex; align-items: center; height: 38px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.combo-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.combo-input {
  flex: 1; height: 100%; padding: 0 6px 0 12px; border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: 13px; outline: 0; min-width: 0;
}
.combo-input:hover { border: 0; }
.combo-toggle {
  height: 100%; width: 36px; display: grid; place-items: center; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 10px; border-left: 1px solid var(--line);
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.combo-toggle:hover { color: var(--accent); }
.combo[data-open="true"] .combo-toggle { transform: rotate(180deg); color: var(--accent); }
.combo-menu {
  position: fixed; z-index: var(--z-overlay); /* fixed để không bị cắt bởi overflow của bảng/card; JS định vị */
  margin: 0; padding: 6px; list-style: none; max-height: 288px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-raised);
}
.combo-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink);
  transition: background-color var(--dur-short) var(--ease-out);
}
.combo-option:hover, .combo-option[aria-selected="true"] { background: var(--accent-soft); }
.combo-opt-name { font-weight: 600; }
.combo-opt-meta { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.combo-option.is-create { border-top: 1px dashed var(--line); border-radius: 0 0 8px 8px; margin-top: 2px; }
.combo-option.is-create .combo-opt-name { color: var(--accent); }
.combo-empty { padding: 12px 10px; color: var(--faint); font-size: 12px; text-align: center; }

/* Sub-tab trong "Kho & email" (Tất cả / Chưa phân nhóm / Cài đặt) — segmented control. */
.subtabs {
  display: flex; gap: 4px; flex-wrap: wrap; width: fit-content; max-width: 100%;
  margin: 4px 0 18px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.subtab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 7px;
  color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.subtab:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.subtab.is-active { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 2px 8px rgba(124, 92, 255, .25); }
.subtab-count { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-variant-numeric: tabular-nums; }
.subtab.is-active .subtab-count { background: rgba(255, 255, 255, .25); color: #fff; }
.tag-live { color: var(--success); }
.table-empty { height: 120px; color: var(--faint); text-align: center; }
.pagination { margin-top: 18px; display: grid; grid-template-columns: 1fr auto 1fr; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pagination > *:last-child { justify-self: end; }

@media (max-width: 899px) {
  /* Đổi token là mọi vùng theo, khỏi liệt kê lại từng selector — liệt kê
     tay là thứ đã làm sáu con số lệch nhau ngay từ đầu. */
  :root { --shell: 1000px; --gutter: 28px; }
  .home-main { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 46px 0 58px; }
  .home-copy h1 { max-width: 620px; font-size: clamp(29px, 6.4vw, 42px); }
  .address-card { max-width: 620px; }
  .inbox-shell { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 18px; }
  .inbox-sidebar { padding: 12px; }
  .sidebar-heading { margin-bottom: 8px; }
  .address-history { display: flex; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
  .history-item { min-width: 190px; }
  .new-address-link { display: none; }
  .message-row { grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr) auto; gap: 13px; }
  .admin-columns { grid-template-columns: minmax(0, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Label above control on narrow screens — a 148px control column next to a
     wrapping label reads as broken below ~900px. */
  .field { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .field-control { grid-column: 1; grid-row: auto; max-width: 220px; }
  .field-hint { margin-top: 0; }
}

@media (max-width: 620px) {
  :root { --gutter: 24px; }
  .site-header { min-height: 70px; }
  .header-actions { gap: 12px; }
  .home-main { padding-top: 34px; }
  .home-copy h1 { font-size: 30px; }
  .trust-row { margin-top: 24px; }
  .address-card { padding: 24px 19px; }
  .address-composer { grid-template-columns: minmax(80px, 1fr) auto minmax(105px, 1fr); }
  .address-composer input, .address-composer select { font-size: 13px; }
  .button-row { grid-template-columns: minmax(0, 1fr); }
  .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; }
  .inbox-toolbar { align-items: flex-start; flex-direction: column; padding-bottom: 15px; }
  .toolbar-buttons { width: 100%; }
  .toolbar-buttons > * { flex: 1; }
  .message-row { min-height: 90px; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .message-from { grid-column: 1; }
  .message-copy { grid-column: 1 / -1; grid-row: 2; }
  .message-time { grid-column: 2; grid-row: 1; }
  .mail-main, .docs-main { width: calc(100% - 24px); padding-top: 22px; }
  .mail-meta { flex-direction: column; gap: 8px; padding: 22px 19px; }
  .mail-addresses { padding: 15px 19px; }
  .mail-body iframe { min-height: 450px; }
  .mail-body pre { padding: 20px; }
  .compare-grid, .caveat-list { grid-template-columns: minmax(0, 1fr); }
  .docs-note { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .param-table td:nth-child(2) { white-space: normal; }
  .admin-header { min-height: 80px; align-items: flex-start; flex-direction: column; padding: 14px 0; }
  .admin-header nav { width: 100%; justify-content: space-between; gap: 8px; }
  .admin-title { align-items: flex-start; flex-direction: column; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid article { padding: 16px; }
  .stat-grid strong { font-size: 26px; }
  .filter-bar { align-items: stretch; flex-direction: column; }
  .filter-bar input { width: 100%; }
  .settings-actions { flex-wrap: wrap; }
  .settings-actions .field-hint { flex-basis: 100%; }
  .sticky-otp-content { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.digest { padding: 5px 9px; border-radius: 6px; background: var(--surface-2); font-size: 12px; letter-spacing: .04em; }

.route-form { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 8px; margin-top: 14px; }
@media (max-width: 620px) { .route-form { grid-template-columns: minmax(0, 1fr); } }

.domain-actions { display: inline-flex; align-items: center; gap: 10px; }
.domain-actions form { margin: 0; }
.link-button { color: var(--muted); border: 0; background: transparent; cursor: pointer; font-family: var(--font-body); font-size: 12px; white-space: nowrap; }
.link-button:hover { color: var(--accent); }

/* Nút đổi ngôn ngữ: hai chữ cạnh nhau, cái đang chọn đậm lên. */
.lang-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.lang-toggle a { padding: 4px 7px; border-radius: 6px; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.lang-toggle a:hover { color: var(--ink); }
.lang-toggle a.is-active { color: var(--surface); background: var(--ink); }
[data-theme="dark"] .lang-toggle a.is-active { color: var(--bg); }

/* Hai nút góc khối lệnh. .code-copy vẫn tự neo được khi không có JS — lúc đó
   nút "Mở thử" không tồn tại và nó đứng một mình như cũ. */
.code-actions { position: absolute; top: 8px; right: 8px; z-index: var(--z-raised); display: flex; gap: 6px; }
.code-actions > .code-copy { position: static; }
.code-open {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  color: var(--accent); border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.code-open:hover { border-color: var(--accent); }