/* ==========================================================================
   Foxtemp · "Aurora Mist" design system (aura/mist.css)
   Base layer shared by every page: tokens, reset, typography, surfaces,
   buttons, nav capsule, footer, form controls, helpers.
   Page-specific layouts live in each page's own <style> block.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Palette */
  --mist-bg: #f5f6fa;
  --mist-ice: #dfe9ff;
  --mist-lilac: #e8e4fb;
  --mist-pearl: #fdfdff;
  --ink: #1c1f2a;
  --ink-soft: #5a5f73;
  --ink-faint: #8a8fa3;
  --accent: #6355e8;
  --accent-deep: #4f43c9;
  --accent-soft: #efedfc;
  --accent-line: #d9d4f8;
  --ok: #2e9e6b;
  --warn: #c2703d;
  --danger: #c94f5e;
  --hairline: #e2e4f2;

  /* Glass surfaces */
  --glass-fill: rgba(255, 255, 255, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-blur: 18px;
  --inset-fill: rgba(244, 245, 252, 0.72);

  /* Shape & elevation: ambient light + contact shadow */
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-float: 0 24px 48px -20px rgba(60, 66, 110, 0.22),
                  0 4px 12px -4px rgba(60, 66, 110, 0.12);
  --shadow-rest: 0 14px 32px -18px rgba(60, 66, 110, 0.18),
                 0 2px 8px -3px rgba(60, 66, 110, 0.1);
  --shadow-chip: 0 1px 3px rgba(60, 66, 110, 0.1);

  /* Type scale */
  --font-display: "Space Grotesk", "Avenir Next", "Segoe UI", -apple-system, "Helvetica Neue", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-hero: clamp(1.9rem, 4.2vw, 2.75rem);
  --fs-h2: clamp(1.4rem, 2.6vw, 1.9rem);
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.78rem;

  --wrap: 1120px;
  --nav-h: 64px;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--mist-bg);
  overflow-x: hidden;
}
img, svg { max-width: 100%; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-deep); }
.faq-body a, .notice a, .ar-body a, .document-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.015em; line-height: 1.3; margin: 0 0 0.6em; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
[hidden] { display: none !important; }
::selection { background: var(--accent-line); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- 3. Aurora backdrop (breathing halo, drifts slowly on scroll) ---------- */
.aurora-field {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--mist-bg);
  overflow: hidden;
}
.aurora-field::before,
.aurora-field::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px); will-change: transform, opacity;
  animation: aurora-breathe 8s ease-in-out infinite;
}
.aurora-field::before {
  width: 62vw; height: 62vw; min-width: 540px; min-height: 540px;
  left: -12vw; top: -18vh;
  background: radial-gradient(circle at 40% 40%, var(--mist-ice) 0%, rgba(223, 233, 255, 0) 70%);
}
.aurora-field::after {
  width: 56vw; height: 56vw; min-width: 480px; min-height: 480px;
  right: -14vw; top: 22vh;
  background: radial-gradient(circle at 55% 45%, var(--mist-lilac) 0%, rgba(232, 228, 251, 0) 70%);
  animation-delay: -4s;
}
.aurora-drift { transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
@keyframes aurora-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1) translateY(0); }
  50% { opacity: 1; transform: scale(1.06) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-field::before, .aurora-field::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 4. Layout helpers ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section-head { max-width: 640px; margin: 0 0 36px; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-tiny); font-weight: 600; letter-spacing: 0.08em;
  color: var(--accent-deep); text-transform: uppercase;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill); padding: 4px 14px;
}
.section-head .kicker { margin-bottom: 14px; }
.ar-head .kicker { margin: 0 0 22px; }
.section-head p { color: var(--ink-soft); }

/* ---------- 5. Glass surfaces ---------- */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.glass-float { box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.9); }

.inset-well {
  background: var(--inset-fill);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 6px rgba(60, 66, 110, 0.06);
}

.card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-rest);
  padding: 26px 24px;
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-body);
  border-radius: var(--radius); padding: 12px 24px; line-height: 1.2;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn-prime {
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(99, 85, 232, 0.55), 0 2px 6px -2px rgba(99, 85, 232, 0.4);
}
.btn-prime:hover { background: var(--accent-deep); color: #fff; transform: translateY(-2px); }
.btn-prime:active { transform: translateY(0); }
.btn-quiet {
  background: rgba(255, 255, 255, 0.7); color: var(--ink);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-chip);
}
.btn-quiet:hover { border-color: var(--accent-line); color: var(--accent-deep); transform: translateY(-2px); }
.btn-ghost { color: var(--ink-soft); padding: 12px 14px; }
.btn-ghost:hover { color: var(--accent-deep); }
.btn-small { padding: 8px 16px; font-size: var(--fs-small); border-radius: 10px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ---------- 7. Floating capsule nav ---------- */
.skybar-wrap {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 60;
  padding: 0 16px; pointer-events: none;
}
.skybar {
  pointer-events: auto;
  max-width: var(--wrap); margin: 0 auto; height: var(--nav-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px 0 18px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-rest), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.skybar-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.03em; flex-shrink: 0; white-space: nowrap; }
.skybar-brand img { width: 30px; height: 30px; }
.skybar-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.skybar-links a {
  color: var(--ink-soft); font-size: var(--fs-small); font-weight: 500;
  padding: 8px 13px; border-radius: var(--radius-pill);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.skybar-links a:hover { color: var(--accent-deep); background: rgba(99, 85, 232, 0.08); }
.skybar-links a.is-here { color: var(--accent-deep); background: var(--accent-soft); }
.skybar-cta { margin-left: 6px; flex-shrink: 0; }
.skybar-cta .cta-short { display: none; }

/* Language picker (custom popover, no native select) */
.langdock { position: relative; flex-shrink: 0; }
.langdock-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small); color: var(--ink-soft); font-weight: 500;
  padding: 8px 12px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap; /* label must never wrap inside the pill when the bar gets tight */
}
.langdock-btn:hover { color: var(--accent-deep); background: rgba(99, 85, 232, 0.08); }
.langdock-btn .caret { transition: transform 0.2s ease; }
.langdock-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.langdock-menu {
  /* Anchored to .langdock (position:relative) instead of the viewport: the glass .skybar
     has backdrop-filter, which makes it the containing block for fixed descendants, so
     viewport-based fixed coords drift. Absolute + top/right needs no JS math at all. */
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; z-index: 80;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-edge); border-radius: var(--radius);
  box-shadow: var(--shadow-float); padding: 6px; margin: 0; list-style: none;
}
.langdock-menu [role="option"] {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border-radius: 9px; font-size: var(--fs-small);
  color: var(--ink); cursor: pointer;
}
.langdock-menu [role="option"]:hover,
.langdock-menu [role="option"].is-focused { background: var(--accent-soft); color: var(--accent-deep); }
.langdock-menu [role="option"][aria-selected="true"] { font-weight: 600; color: var(--accent-deep); }

/* Mobile nav */
.skybar-burger { display: none; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; }
.mobtray {
  display: none; position: fixed; top: calc(var(--nav-h) + 22px); left: 16px; right: 16px; z-index: 59;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-edge); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float); padding: 10px;
}
.mobtray.is-open { display: block; }
.mobtray a { display: block; padding: 12px 16px; border-radius: 10px; color: var(--ink); font-weight: 500; }
.mobtray a:hover { background: var(--accent-soft); color: var(--accent-deep); }
.mobtray a.is-here { background: var(--accent-soft); color: var(--accent-deep); }

/* ---------- 8. Footer ---------- */
.groundfog {
  margin-top: 40px; padding: 56px 0 36px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 30%);
  border-top: 1px solid var(--glass-edge);
}
.groundfog-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.groundfog-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-bottom: 12px; }
.groundfog-brand img { width: 26px; height: 26px; }
.groundfog p { color: var(--ink-soft); font-size: var(--fs-small); max-width: 300px; }
.groundfog h4 { font-size: var(--fs-tiny); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.groundfog ul { list-style: none; padding: 0; margin: 0; }
.groundfog ul li { margin-bottom: 9px; }
.groundfog ul a { color: var(--ink-soft); font-size: var(--fs-small); }
.groundfog ul a:hover { color: var(--accent-deep); }
.groundfog-base {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  color: var(--ink-faint); font-size: var(--fs-tiny);
}
.groundfog-base a { color: var(--ink-faint); }
.groundfog-base a:hover { color: var(--accent-deep); }

/* ---------- 9. Chips, badges, notices ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-tiny); font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 11px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-line);
}
.chip-neutral { background: #f0f1f7; color: var(--ink-soft); border-color: var(--hairline); }
.chip-ok { background: #e7f5ee; color: var(--ok); border-color: #cfe9dc; }
.chip-warn { background: #f9efe7; color: var(--warn); border-color: #efd9c6; }

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; position: relative; }
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(99, 85, 232, 0.4); animation: dot-ping 2s ease-out infinite;
}
@keyframes dot-ping { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }

.notice {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--radius); padding: 14px 16px;
  font-size: var(--fs-small); color: var(--ink-soft);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.mail-detail .notice, #fd-dm-body .notice { margin-top: 14px; }
.notice strong { color: var(--ink); }

/* ---------- 10. Toast feedback ---------- */
.toast-roost {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; padding: 0 16px; max-width: 100%;
}
.toast {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(28, 31, 42, 0.92); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: 11px 18px; font-size: var(--fs-small);
  box-shadow: var(--shadow-float);
  animation: toast-in 0.25s ease;
  max-width: 92vw;
}
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; }
.toast .t-ok { color: #8be3b6; }
.toast .t-bad { color: #ff9aa7; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 11. Mono data (addresses, codes, countdowns) ---------- */
.mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.01em; }

/* ---------- 12. Tables ---------- */
.table-slide { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--hairline); background: rgba(255,255,255,0.7); }
.table-slide table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--fs-small); }
.table-slide th, .table-slide td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.table-slide th { font-family: var(--font-display); font-weight: 500; color: var(--ink); background: rgba(244,245,252,0.8); white-space: nowrap; }
.table-slide tr:last-child td { border-bottom: 0; }
.table-slide td { color: var(--ink-soft); }

/* ---------- 13. Temp-mailbox tool components (used with aura/foxcore.js) ---------- */
.fx-skeleton {
  display: inline-block; width: 220px; max-width: 60vw; height: 1em; border-radius: 6px;
  background: linear-gradient(90deg, #e6e8f3 25%, #f3f4fb 50%, #e6e8f3 75%);
  background-size: 200% 100%; animation: fx-shimmer 1.2s linear infinite;
}
@keyframes fx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.fx-addr-err { color: var(--danger); font-size: var(--fs-small); font-family: var(--font-body); }
.fx-dim { color: var(--ink-faint); font-size: var(--fs-small); }

.fx-maillist { list-style: none; margin: 0; padding: 0; }
.fx-mailrow { border-bottom: 1px solid var(--hairline); }
.fx-mailrow:last-child { border-bottom: 0; }
.fx-mailrow-open {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; text-align: left; border-radius: 10px;
  transition: background-color 0.15s ease;
}
.fx-mailrow-open:hover { background: rgba(99, 85, 232, 0.06); }
.fx-mailrow.is-open .fx-mailrow-open { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.fx-mail-ava {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: #fff;
  background: linear-gradient(135deg, #6b6f86, #3d4154);
}
.fx-mailrow.is-unread .fx-mail-ava { background: linear-gradient(135deg, #7a6ef0, #6355e8); }
.fx-mail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); flex: none; }
.fx-mailrow.is-unread .fx-mail-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(99, 85, 232, 0.18); }
.fx-mail-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fx-mail-from { font-weight: 600; font-size: var(--fs-small); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-mailrow.is-unread .fx-mail-from { color: var(--accent-deep); }
.fx-mail-subject { font-size: var(--fs-small); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-mail-clip { flex: none; }
.fx-mail-time { flex: none; font-size: var(--fs-tiny); color: var(--ink-faint); }

/* flex:0 0 auto — fitFrame stretches the iframe to full body height; flex-shrink would squeeze it back and clip long mail behind an inner scrollbar. */
.fx-mailframe { width: 100%; height: 80px; border: 0; border-radius: 10px; background: #fff; display: block; flex: 0 0 auto; }
.fx-mailtext { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-small); background: #fff; border-radius: 10px; padding: 16px; margin: 0; }
.fx-d-badge {
  display: inline-block; margin-bottom: 8px; padding: 2px 8px;
  border: 1px solid var(--hairline); border-radius: 999px;
  font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft);
}
.fx-d-badge.is-real { border-color: rgba(46, 160, 90, 0.35); color: #1f7a45; background: rgba(46, 160, 90, 0.08); }
.fx-letterhead {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}
.fx-lh-mark {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-weight: 700; background: linear-gradient(135deg, #7a6ef0, #6355e8);
}
.fx-lh-meta b { display: block; font-size: 0.92rem; }
.fx-lh-meta small { display: block; color: var(--ink-faint); font-size: 12px; overflow-wrap: anywhere; }
.inbox-split > .mail-detail.inset-well { box-shadow: none; background: rgba(255, 255, 255, 0.62); }
.inbox-split .mail-detail { display: flex; flex-direction: column; }
#fx-d-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ---------- 14. Form controls ---------- */
.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.textin {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86); color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.textin::placeholder { color: var(--ink-faint); }
.textin:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 85, 232, 0.16); }
.textin[aria-invalid="true"] { border-color: var(--danger); }
.field-hint { display: block; margin-top: 6px; font-size: var(--fs-tiny); color: var(--ink-faint); }
.field-err { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--danger); }

/* Input + fixed suffix combo (e.g. alias prefix + @domain).
   Container carries the focus ring via :focus-within; inner input has none. */
.joininput {
  display: flex; align-items: stretch;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.joininput:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 85, 232, 0.16); }
.joininput .textin { border: 0; box-shadow: none !important; background: transparent; flex: 1 1 auto; min-width: 0; }
.joininput .textin:focus { border: 0; box-shadow: none; }
.join-suffix {
  align-self: stretch; display: inline-flex; align-items: center; flex: none;
  padding: 0 14px; font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--ink-soft); background: var(--inset-fill);
  border-left: 1px solid var(--hairline);
  border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
}

/* 6-digit verification code cells */
.code-cells { display: flex; gap: 8px; justify-content: flex-start; }
.code-cell {
  width: 46px; height: 54px; text-align: center;
  font-family: var(--font-mono); font-size: 1.35rem; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.code-cell:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 85, 232, 0.16); }

/* ---------- 15. Segmented tabs ---------- */
.segtabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, 0.62); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-chip);
  max-width: 100%; overflow-x: auto;
}
.segtabs [role="tab"] {
  flex: none; padding: 8px 18px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-small);
  color: var(--ink-soft); white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.segtabs [role="tab"]:hover { color: var(--accent-deep); }
.segtabs [role="tab"][aria-selected="true"] {
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(99, 85, 232, 0.5);
}

/* ---------- 16. Toggle switch ---------- */
.miston {
  position: relative; width: 44px; height: 24px; flex: none;
  border-radius: var(--radius-pill); background: #d5d7e6;
  transition: background-color 0.2s ease;
}
.miston::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(28, 31, 42, 0.3);
  transition: transform 0.2s ease;
}
.miston[aria-checked="true"] { background: var(--accent); }
.miston[aria-checked="true"]::after { transform: translateX(20px); }
.miston[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- 17. Custom dropdown (filter/select popover; no native <select>) ---------- */
.dropsel { position: relative; display: inline-block; max-width: 100%; }
.dropsel-btn {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 9px 14px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.8); border: 1px solid var(--hairline);
  font-size: var(--fs-small); color: var(--ink); box-shadow: var(--shadow-chip);
}
.dropsel-btn:hover { border-color: var(--accent-line); color: var(--accent-deep); }
.dropsel-btn .ds-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; }
.dropsel-btn .caret { flex: none; transition: transform 0.2s ease; }
.dropsel-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.dropsel-menu {
  /* Anchored to the .dropsel host (position:relative). Was position:fixed with
     JS viewport coords — backdrop-filter on the glass panel makes it the
     containing block for fixed descendants, so the menu drifted (2026-08-13). */
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: max(180px, 100%); max-width: min(320px, 92vw); max-height: 300px; overflow: auto;
  z-index: 80; margin: 0; padding: 6px; list-style: none;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-edge); border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.dropsel-menu [role="option"] {
  display: block; width: 100%; padding: 9px 12px; border-radius: 9px;
  font-size: var(--fs-small); color: var(--ink); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dropsel-menu [role="option"]:hover,
.dropsel-menu [role="option"].is-focused { background: var(--accent-soft); color: var(--accent-deep); }
.dropsel-menu [role="option"][aria-selected="true"] { font-weight: 600; color: var(--accent-deep); }

/* ---------- 18. Modal / dialog ---------- */
.veil {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(28, 31, 42, 0.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: veil-in 0.2s ease;
}
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
.modal-pane {
  width: 100%; max-width: 620px; max-height: 86vh; overflow: auto;
  background: rgba(253, 253, 255, 0.97);
  border: 1px solid var(--glass-edge); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float); padding: 26px;
  animation: pane-in 0.22s ease;
}
.modal-pane.is-narrow { max-width: 440px; }
@keyframes pane-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-head h3 { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.modal-x {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); background: var(--inset-fill); border: 1px solid var(--hairline);
}
.modal-x:hover { color: var(--danger); border-color: var(--danger); }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }

/* Branded confirm dialog (FoxShell.confirm) — fox mark in a soft halo, centered copy */
.fxask { max-width: 400px; text-align: center; padding: 30px 26px 24px; }
.fxask-mark {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  box-shadow: 0 8px 20px -10px rgba(99, 85, 232, 0.45);
}
.fxask-mark.is-danger { background: #f9e9ec; border-color: #f0d2d8; box-shadow: 0 8px 20px -10px rgba(201, 79, 94, 0.4); }
.fxask-title { margin: 0 0 8px; font-size: 1.12rem; }
.fxask-body { margin: 0; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.6; overflow-wrap: anywhere; }
.fxask-foot { justify-content: center; margin-top: 20px; }
.fxask-foot .btn { min-width: 108px; }

.btn-danger {
  background: var(--danger); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(201, 79, 94, 0.55), 0 2px 6px -2px rgba(201, 79, 94, 0.4);
}
.btn-danger:hover { background: #b03e4d; color: #fff; transform: translateY(-2px); }
.btn-danger:active { transform: translateY(0); }

/* ---------- 19. FAQ accordion ---------- */
.faq-stack { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { border-radius: var(--radius); overflow: hidden; padding: 0; }
/* faq-item reuses .card only for the glass background; card’s 26px padding would stack with summary’s own 18px into a ~90px hollow bar, so all padding moves to summary/faq-body. */
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; font-family: var(--font-display); font-weight: 500; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .qmark { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
.faq-item summary .flip { margin-left: auto; color: var(--ink-faint); transition: transform 0.2s ease; flex: none; }
.faq-item[open] summary .flip { transform: rotate(180deg); }
.faq-item .faq-body { padding: 0 20px 18px 58px; color: var(--ink-soft); font-size: var(--fs-small); }
.faq-more { text-align: center; margin-top: 22px; }

/* ---------- 20. Status chips, spinner, empty state, load-more ---------- */
.chip-danger { background: #f9e9ec; color: var(--danger); border-color: #f0d2d8; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.st-dot.is-forwarded { background: var(--ok); }
.st-dot.is-spam { background: var(--warn); }
.st-dot.is-failed { background: var(--danger); }
.st-dot.is-pending { background: var(--ink-faint); }

.spin {
  display: inline-block; width: 18px; height: 18px; flex: none;
  border: 2px solid var(--accent-line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin-turn 0.7s linear infinite;
}
@keyframes spin-turn { to { transform: rotate(360deg); } }

.hollow { text-align: center; padding: 44px 20px; color: var(--ink-faint); }
.hollow .hollow-ico {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center; color: var(--accent-deep);
}
.hollow p { margin: 0; font-size: var(--fs-small); }
.hollow .hollow-title { font-family: var(--font-display); font-weight: 500; color: var(--ink-soft); font-size: 1rem; margin-bottom: 4px; }

.pager-more { text-align: center; padding: 16px 0 4px; }

/* ---------- 21. Console components (rendered by aura/foxdesk.js) ---------- */
.fd-topline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fd-topline .fd-me { display: flex; flex-direction: column; min-width: 0; }
.fd-topline .fd-me .mono { font-size: 1.02rem; color: var(--ink); overflow-wrap: anywhere; }
.fd-topline .fd-me .fd-me-cap { font-size: var(--fs-tiny); color: var(--ink-faint); }
.fd-topline .fd-ops { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.fd-panel { padding: 22px; }
.fd-panel + .fd-panel { margin-top: 18px; }
.fd-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fd-panel-head h2 { margin: 0; font-size: 1.2rem; flex: 1 1 auto; }
.fd-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.fd-rowlist { list-style: none; margin: 0; padding: 0; }
.fd-row { display: flex; align-items: center; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.fd-row:last-child { border-bottom: 0; }
.fd-row-main { flex: 1 1 260px; min-width: 0; }
.fd-row-main .fd-row-title { display: block; min-width: 0; font-weight: 600; font-size: var(--fs-small); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-row-main .fd-row-sub { display: block; min-width: 0; font-size: var(--fs-tiny); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-row-ops { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.fd-row .chip { justify-self: start; }
.fd-row.is-off .fd-row-title { color: var(--ink-faint); text-decoration: line-through; }

.fd-arcbtn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 8px; text-align: left; border-radius: 10px;
  transition: background-color 0.15s ease;
}
.fd-arcbtn:hover { background: rgba(99, 85, 232, 0.06); }
.fd-arc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-arc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fd-arc-from { font-weight: 600; font-size: var(--fs-small); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fd-arc-subject { display: block; min-width: 0; font-size: var(--fs-small); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-arc-alias { display: block; min-width: 0; font-size: var(--fs-tiny); color: var(--ink-faint); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-arc-side { flex: none; text-align: right; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.fd-arc-side .fd-arc-time { font-size: var(--fs-tiny); color: var(--ink-faint); font-family: var(--font-mono); }
.fd-arc-side .fd-arc-days { font-size: var(--fs-tiny); color: var(--ink-faint); }

.fd-detail-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: var(--fs-small); margin-bottom: 14px; }
.fd-detail-meta dt { color: var(--ink-faint); }
.fd-detail-meta dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.fd-att-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }

.fd-qr { display: block; width: 180px; height: 180px; margin: 0 auto 14px; border-radius: var(--radius); border: 1px solid var(--hairline); background: #fff; }
.fd-secret { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fd-secret code {
  flex: 1 1 200px; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-small);
  background: var(--inset-fill); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 9px 12px; overflow-wrap: anywhere;
}

.fd-quota { display: flex; align-items: center; gap: 10px; }
.fd-quota-bar { flex: 1 1 120px; height: 6px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.fd-quota-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; }

/* ---------- 22. Responsive (kept last: mobile overrides must win) ---------- */
@media (max-width: 900px) {
  .groundfog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 56px 0; }
}
@media (max-width: 760px) {
  .skybar-links { display: none; }
  .skybar-burger { display: inline-flex; margin-left: auto; }
  .skybar { padding-right: 8px; }
  .langdock { margin-left: 0; }
}
@media (max-width: 560px) {
  /* Compact header: brand name stays visible (user requirement) — instead the
     language pill goes icon-only and the CTA swaps to its per-language short
     label (e.g. ja drops the login segment and keeps only the console word) so
     everything still fits on one line at 320px. Language names remain visible
     inside the popover; the button keeps its aria-label, so a11y is unaffected. */
  .skybar-wrap { padding-left: 10px; padding-right: 10px; }
  .skybar { gap: 5px; padding: 0 6px 0 10px; }
  .skybar-brand { font-size: 0.9rem; gap: 6px; }
  .skybar-brand img { width: 22px; height: 22px; }
  .langdock-btn { padding: 7px 6px; }
  .langdock-btn > span { display: none; }
  .skybar-cta { padding: 8px 10px; margin-left: 0; }
  .skybar-cta .cta-full { display: none; }
  .skybar-cta .cta-short { display: inline; }
  .skybar-burger { width: 34px; height: 34px; }
  .groundfog-grid { grid-template-columns: 1fr; gap: 26px; }
  .section { padding: 48px 0; }
  .code-cells { gap: 6px; }
  .code-cell { width: 40px; height: 48px; font-size: 1.15rem; }
  .modal-pane { padding: 18px; max-height: 92vh; }
  .fd-panel { padding: 16px 14px; }
  .fd-arc-side { text-align: left; align-items: flex-start; }
  .faq-item .faq-body { padding-left: 20px; }
}

/* Sticky-bottom footer: on short pages the footer still sits at the viewport bottom with no gap below. */
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
body>footer{margin-top:auto}
body>footer>:last-child{margin-bottom:0}
/* Random-prefix explicit feedback (flash + focus on fill). */
@keyframes ftInputFlash{0%{box-shadow:0 0 0 4px rgba(99,85,232,.4)}100%{box-shadow:0 0 0 4px rgba(99,85,232,0)}}
.textin.is-flash{animation:ftInputFlash .7s ease}
/* Archive list item wrapper (foxdesk.js template) */
.fd-mailitem{list-style:none}