/*
 * Z-Mulation Lab design system.
 * Served before sign-in and linked by every page, so it holds the shared tokens,
 * the global lab bar, the z-* component primitives and the account pages.
 * Theme: follows the OS by default. <html data-theme="dark"> forces the dark
 * theme (the simulator workspaces, which draw dark-tuned monitor traces).
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: light;
  --z-bg: #f5f4ef;
  --z-bg-sunken: #eeece5;
  --z-surface: #ffffff;
  --z-surface-2: #faf9f6;
  --z-surface-3: #f2f1ec;
  --z-ink: #15201e;
  --z-ink-2: #4a5754;
  --z-ink-3: #75817e;
  --z-line: #e5e3dc;
  --z-line-2: #d5d2c9;
  --z-accent: #0f5f4f;
  --z-accent-hover: #0b4d40;
  --z-accent-ink: #0d5245;
  --z-accent-soft: #e5f0eb;
  --z-accent-softer: #f1f7f4;
  --z-on-accent: #ffffff;
  --z-amber: #9a5a17;
  --z-amber-soft: #fbf1e2;
  --z-amber-line: #efd7b5;
  --z-rose: #a2412a;
  --z-rose-soft: #fbece6;
  --z-rose-line: #f0c9bd;
  --z-violet: #6a4fc2;
  --z-violet-soft: #efebfb;
  --z-focus: #2b8c76;
  /* Monitor trace colours, shared by the simulators' charts. */
  --z-trace-1: #0f8f78;
  --z-trace-2: #c07a22;
  --z-trace-3: #6a4fc2;
  --z-trace-4: #c2533a;
  --z-shadow-sm: 0 1px 2px rgb(20 32 30 / .05);
  --z-shadow: 0 1px 2px rgb(20 32 30 / .04), 0 8px 24px -8px rgb(20 32 30 / .10);
  --z-shadow-lg: 0 24px 64px -16px rgb(20 32 30 / .28);
  --z-radius-xs: 6px;
  --z-radius-sm: 9px;
  --z-radius: 14px;
  --z-radius-lg: 18px;
  --z-bar-h: 60px;
  --z-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --z-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --z-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --z-ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --z-bg: #0d1312;
    --z-bg-sunken: #0a0f0e;
    --z-surface: #141c1b;
    --z-surface-2: #182120;
    --z-surface-3: #1d2726;
    --z-ink: #e7ecea;
    --z-ink-2: #aab5b2;
    --z-ink-3: #7d8a87;
    --z-line: #243030;
    --z-line-2: #2f3c3b;
    --z-accent: #4fc2a2;
    --z-accent-hover: #6dd3b6;
    --z-accent-ink: #7fd8be;
    --z-accent-soft: #15302a;
    --z-accent-softer: #122522;
    --z-on-accent: #06221b;
    --z-amber: #e3a865;
    --z-amber-soft: #2a2117;
    --z-amber-line: #4a3820;
    --z-rose: #ec8d74;
    --z-rose-soft: #2f1a15;
    --z-rose-line: #5a2c22;
    --z-violet: #b49cf5;
    --z-violet-soft: #221c33;
    --z-focus: #6dd3b6;
    --z-trace-1: #5fd6c0;
    --z-trace-2: #e9b46a;
    --z-trace-3: #b49cf5;
    --z-trace-4: #f08a72;
    --z-shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
    --z-shadow: 0 1px 2px rgb(0 0 0 / .25), 0 10px 28px -10px rgb(0 0 0 / .5);
    --z-shadow-lg: 0 28px 70px -18px rgb(0 0 0 / .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --z-bg: #0d1312;
  --z-bg-sunken: #0a0f0e;
  --z-surface: #141c1b;
  --z-surface-2: #182120;
  --z-surface-3: #1d2726;
  --z-ink: #e7ecea;
  --z-ink-2: #aab5b2;
  --z-ink-3: #7d8a87;
  --z-line: #243030;
  --z-line-2: #2f3c3b;
  --z-accent: #4fc2a2;
  --z-accent-hover: #6dd3b6;
  --z-accent-ink: #7fd8be;
  --z-accent-soft: #15302a;
  --z-accent-softer: #122522;
  --z-on-accent: #06221b;
  --z-amber: #e3a865;
  --z-amber-soft: #2a2117;
  --z-amber-line: #4a3820;
  --z-rose: #ec8d74;
  --z-rose-soft: #2f1a15;
  --z-rose-line: #5a2c22;
  --z-violet: #b49cf5;
  --z-violet-soft: #221c33;
  --z-focus: #6dd3b6;
  --z-trace-1: #5fd6c0;
  --z-trace-2: #e9b46a;
  --z-trace-3: #b49cf5;
  --z-trace-4: #f08a72;
  --z-shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  --z-shadow: 0 1px 2px rgb(0 0 0 / .25), 0 10px 28px -10px rgb(0 0 0 / .5);
  --z-shadow-lg: 0 28px 70px -18px rgb(0 0 0 / .7);
}

/* ---------- Primitives (opt-in classes; page CSS may also mirror these specs) ---------- */
.z-eyebrow { color: var(--z-accent-ink); font: 600 .74rem/1.3 var(--z-sans); letter-spacing: .09em; text-transform: uppercase; }
.z-display { font-family: var(--z-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.08; }
.z-display em { font-style: italic; color: var(--z-accent-ink); }
.z-muted { color: var(--z-ink-2); }
.z-fine { color: var(--z-ink-3); font-size: .8rem; line-height: 1.5; }
.z-card { background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--z-radius); box-shadow: var(--z-shadow-sm); }
.z-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font: 550 .9rem/1 var(--z-sans); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .06s;
}
.z-btn:active:not(:disabled) { transform: translateY(1px); }
.z-btn:disabled { opacity: .45; cursor: not-allowed; }
.z-btn--primary { background: var(--z-accent); color: var(--z-on-accent); }
.z-btn--primary:hover:not(:disabled) { background: var(--z-accent-hover); }
.z-btn--secondary { background: var(--z-surface); color: var(--z-ink); border-color: var(--z-line-2); box-shadow: var(--z-shadow-sm); }
.z-btn--secondary:hover:not(:disabled) { background: var(--z-surface-2); border-color: var(--z-ink-3); }
.z-btn--ghost { background: transparent; color: var(--z-ink-2); }
.z-btn--ghost:hover:not(:disabled) { background: var(--z-surface-3); color: var(--z-ink); }
.z-btn--sm { min-height: 34px; padding: 0 12px; font-size: .84rem; border-radius: 8px; gap: 6px; }
.z-input, .z-select {
  width: 100%; height: 42px; padding: 0 13px; border: 1px solid var(--z-line-2); border-radius: 10px;
  background: var(--z-surface); color: var(--z-ink); font: inherit; box-shadow: var(--z-shadow-sm);
}
.z-input:focus, .z-select:focus { outline: none; border-color: var(--z-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--z-accent) 18%, transparent); }
.z-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: 999px; font: 500 .8rem/1.2 var(--z-sans); color: var(--z-accent-ink); background: var(--z-accent-softer); border: 1px solid color-mix(in srgb, var(--z-accent) 22%, transparent); }
.z-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 .68rem/1 var(--z-sans); letter-spacing: .04em; color: var(--z-amber); background: var(--z-amber-soft); border: 1px solid var(--z-amber-line); }
.z-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Global lab bar (rendered by the server on every page) ---------- */
header.lab-bar {
  all: unset; box-sizing: border-box; display: block; position: sticky; top: 0; z-index: 1000;
  height: auto; min-height: var(--z-bar-h); padding: 0; margin: 0;
  border-bottom: 1px solid var(--z-line);
  background: color-mix(in srgb, var(--z-bg) 84%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  color: var(--z-ink); font: 500 15px/1.4 var(--z-sans); -webkit-font-smoothing: antialiased; letter-spacing: normal;
}
.lab-bar *, .lab-bar *::before, .lab-bar *::after { box-sizing: border-box; }
.lab-bar .lab-bar-inner {
  display: flex; align-items: center; gap: 18px; min-height: var(--z-bar-h);
  width: min(1440px, calc(100% - 40px)); margin-inline: auto; padding: 0;
}
.lab-bar a { text-decoration: none; }
.lab-bar a:hover { text-decoration: none; }
.lab-bar :focus-visible { outline: 2.5px solid var(--z-focus); outline-offset: 2px; border-radius: 8px; }
.lab-bar .lab-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--z-ink); }
.lab-bar .lab-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--z-accent); color: var(--z-on-accent); box-shadow: var(--z-shadow-sm); }
.lab-bar .lab-mark svg { width: 18px; height: 18px; display: block; }
.lab-bar .lab-wordmark { font: 650 1rem/1 var(--z-sans); letter-spacing: -.015em; white-space: nowrap; }
.lab-bar .lab-wordmark b { font-weight: 650; color: var(--z-accent-ink); }
.lab-bar nav.lab-nav {
  all: unset; display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto;
  scrollbar-width: none; margin: 0 0 0 8px; padding: 0;
}
.lab-bar nav.lab-nav::-webkit-scrollbar { display: none; }
.lab-bar .lab-nav a {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 9px;
  color: var(--z-ink-2); font: 500 .87rem/1 var(--z-sans); white-space: nowrap; background: none;
}
.lab-bar .lab-nav a:hover { background: var(--z-surface-3); color: var(--z-ink); }
.lab-bar .lab-nav a[aria-current="page"] { background: var(--z-accent-soft); color: var(--z-accent-ink); font-weight: 600; }
.lab-bar .lab-nav svg { width: 16px; height: 16px; flex: none; }
.lab-bar .lab-bar-end { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.lab-bar .lab-bar-link {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px;
  color: var(--z-ink-2); font: 500 .85rem/1 var(--z-sans); background: none; border: 0; cursor: pointer;
}
.lab-bar .lab-bar-link:hover { background: var(--z-surface-3); color: var(--z-ink); }
.lab-bar .lab-bar-link svg { width: 16px; height: 16px; }
.lab-bar .lab-who { display: flex; align-items: center; gap: 9px; margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--z-line); }
.lab-bar .lab-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--z-accent-soft); color: var(--z-accent-ink); font: 650 .78rem/1 var(--z-sans); text-transform: uppercase; }
.lab-bar .lab-email { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--z-ink-2); font: 400 .83rem/1.2 var(--z-sans); }
.lab-bar form { all: unset; display: inline-flex; }
.lab-bar button.lab-signout {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--z-line-2); background: var(--z-surface); color: var(--z-ink); font: 550 .82rem/1 var(--z-sans);
}
.lab-bar button.lab-signout:hover { background: var(--z-surface-2); border-color: var(--z-ink-3); }
.lab-bar button.lab-signout:focus-visible { outline: 2.5px solid var(--z-focus); outline-offset: 2px; }
.lab-bar .lab-signin { height: 34px; padding: 0 14px; border-radius: 9px; display: inline-flex; align-items: center; background: var(--z-accent); color: var(--z-on-accent); font: 600 .85rem/1 var(--z-sans); }
/* Compact levels, set by the bar's own script only as far as needed to fit (every tab keeps its name
   as a tooltip): 1 drops the email (the avatar stays), 2 the wordmark and link labels, 3 tab labels
   except the current page's, 4 every tab label. */
.lab-bar:is([data-fit="1"], [data-fit="2"], [data-fit="3"], [data-fit="4"]) .lab-email { display: none; }
.lab-bar:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) .lab-wordmark,
.lab-bar:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) .lab-bar-link span { display: none; }
.lab-bar:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) .lab-nav a { padding: 0 8px; gap: 6px; font-size: .82rem; }
.lab-bar:is([data-fit="3"], [data-fit="4"]) .lab-nav a:not([aria-current]) span,
.lab-bar[data-fit="4"] .lab-nav a span { display: none; }
.lab-bar:is([data-fit="3"], [data-fit="4"]) .lab-nav a:not([aria-current]),
.lab-bar[data-fit="4"] .lab-nav a { width: 38px; padding: 0; justify-content: center; }
.lab-bar[data-scroll] nav.lab-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
@media (max-width: 860px) {
  .lab-bar .lab-bar-inner { width: calc(100% - 24px); gap: 8px; }
  .lab-bar .lab-wordmark { display: none; }
  .lab-bar nav.lab-nav { margin-left: 0; flex: 1; }
  .lab-bar .lab-nav a { padding: 0 9px; }
  .lab-bar .lab-bar-link span, .lab-bar .lab-avatar { display: none; }
  .lab-bar .lab-who { margin-left: 0; padding-left: 6px; }
}
@media (max-width: 560px) {
  .lab-bar .lab-nav a span { display: none; }
  .lab-bar .lab-nav a { width: 38px; padding: 0; justify-content: center; }
}
@media print { header.lab-bar { display: none !important; } }

/* ---------- Account and feedback pages ---------- */
.lab-account {
  --la-bg: var(--z-bg);
  --la-surface: var(--z-surface);
  --la-surface-2: var(--z-surface-2);
  --la-surface-3: var(--z-surface-3);
  --la-ink: var(--z-ink);
  --la-muted: var(--z-ink-2);
  --la-faint: var(--z-ink-3);
  --la-border: var(--z-line);
  --la-border-2: var(--z-line-2);
  --la-teal: var(--z-accent);
  --la-teal-hover: var(--z-accent-hover);
  --la-teal-ink: var(--z-accent-ink);
  --la-teal-soft: var(--z-accent-soft);
  --la-on-teal: var(--z-on-accent);
  --la-amber: var(--z-amber);
  --la-amber-soft: var(--z-amber-soft);
  --la-rose: var(--z-rose);
  --la-rose-soft: var(--z-rose-soft);
  --la-focus: var(--z-focus);
  --la-shadow: var(--z-shadow);
  --la-serif: var(--z-serif);
  --la-sans: var(--z-sans);
  --la-star: var(--z-trace-2);
  --la-ring: 0 0 0 3px color-mix(in srgb, var(--z-accent) 18%, transparent);
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--la-ink);
  background: var(--la-bg);
  font: 15px/1.6 var(--la-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.lab-account > main { flex: 1 0 auto; }
.lab-account * { box-sizing: border-box; }
.lab-account h1, .lab-account h2, .lab-account p, .lab-account form, .lab-account fieldset { margin: 0; }
.lab-account h1, .lab-account h2 { line-height: 1.15; letter-spacing: -.02em; font-weight: 400; font-family: var(--la-serif); color: var(--la-ink); }
.lab-account h1 { font-size: clamp(1.9rem, 3.6vw, 2.4rem); }
.lab-account h2 { font-size: 1.4rem; }
.lab-account a { color: var(--la-teal-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lab-account a:hover { text-decoration-thickness: 2px; }
.lab-account button, .lab-account input, .lab-account textarea { font: inherit; }
.lab-account input, .lab-account textarea { color: inherit; }
.lab-account button { cursor: pointer; }
.lab-account :focus-visible { outline: 2.5px solid var(--la-focus); outline-offset: 2px; border-radius: 6px; }
.lab-account svg { flex: none; }
.la-width { width: min(1120px, calc(100% - 56px)); margin-inline: auto; }
.la-skip { position: absolute; top: -100px; left: 12px; z-index: 1001; padding: 8px 12px; background: var(--la-surface); border: 1px solid var(--la-border-2); border-radius: 8px; box-shadow: var(--z-shadow); }
.la-skip:focus { top: 8px; }
.la-sr, .la-star input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.lab-account .la-eyebrow { color: var(--la-teal-ink); font: 600 .74rem/1.3 var(--la-sans); letter-spacing: .09em; text-transform: uppercase; }

/* Shared card, form and button parts */
.la-card { border: 1px solid var(--la-border); border-radius: var(--z-radius); background: var(--la-surface); padding: clamp(24px, 3vw, 32px); min-width: 0; box-shadow: var(--z-shadow-sm); }
.lab-account .la-intro { color: var(--la-muted); margin: 6px 0 24px; font-size: .94rem; line-height: 1.55; }
.la-form { display: grid; gap: 20px; }
.la-field { display: grid; gap: 7px; }
.la-field label, .la-ratings legend { font-weight: 550; font-size: .87rem; line-height: 1.3; color: var(--la-ink); }
.la-field input, .la-field textarea {
  width: 100%; height: 42px; border: 1px solid var(--la-border-2); border-radius: 10px;
  padding: 0 13px; background: var(--la-surface); box-shadow: var(--z-shadow-sm);
  font-size: .95rem; transition: border-color .15s, box-shadow .15s;
}
.la-field input:hover, .la-field textarea:hover { border-color: color-mix(in srgb, var(--la-border-2) 50%, var(--la-faint)); }
.la-field input::placeholder, .la-field textarea::placeholder { color: var(--la-faint); }
.la-field textarea { height: auto; padding: 11px 13px; resize: vertical; min-height: 8.5em; line-height: 1.55; }
.la-field input:focus, .la-field textarea:focus { outline: none; border-color: var(--la-teal); box-shadow: var(--la-ring); }

/* Optional profile on the create-account form */
.la-profile { display: grid; gap: 16px; margin: 4px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--la-border); min-width: 0; }
.la-profile legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-weight: 600; font-size: .92rem; color: var(--la-ink); }
.la-profile legend + .la-hint { margin-top: -10px; }
.la-profile textarea { min-height: 4.6em; }
.la-field select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 42px; padding: 0 38px 0 13px;
  border: 1px solid var(--la-border-2); border-radius: 10px; background-color: var(--la-surface); color: var(--la-ink);
  box-shadow: var(--z-shadow-sm); font: inherit; font-size: .95rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%2375817e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 18px;
  transition: border-color .15s, box-shadow .15s;
}
.la-field select:focus { outline: none; border-color: var(--la-teal); box-shadow: var(--la-ring); }
.la-field select:invalid, .la-field select option[value=""] { color: var(--la-faint); }
.la-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .9rem; line-height: 1.45; color: var(--la-muted); cursor: pointer; }
.la-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--la-teal); cursor: pointer; }
.la-input-wrap { position: relative; }
.la-input-wrap input { padding-right: 72px; }
.la-reveal {
  position: absolute; top: 5px; right: 5px; height: 32px; min-width: 56px; padding: 0 10px;
  border: 0; border-radius: 7px; background: transparent; color: var(--la-muted);
  font: 550 .8rem/1 var(--la-sans); transition: background-color .15s, color .15s;
}
.la-reveal:hover { background: var(--la-surface-3); color: var(--la-ink); }
.la-reveal[aria-pressed="true"] { color: var(--la-teal-ink); }
.la-reveal[hidden] { display: none; }
.la-hint { color: var(--la-faint); font-size: .8rem; line-height: 1.45; }
.la-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  background: var(--la-teal); color: var(--la-on-teal); border: 1px solid transparent; border-radius: 10px;
  font: 550 .9rem/1 var(--la-sans); box-shadow: var(--z-shadow-sm);
  transition: background-color .15s, transform .06s;
}
.la-primary:hover { background: var(--la-teal-hover); }
.la-primary:active { transform: translateY(1px); }
.la-wide { width: 100%; min-height: 42px; margin-top: 4px; }
.lab-account .la-error, .lab-account .la-notice {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin: 0 0 20px;
  border-radius: 10px; font-size: .9rem; line-height: 1.45;
}
.la-msg-icon { width: 18px; height: 18px; margin-top: 1px; }
.la-error { background: var(--la-rose-soft); color: var(--la-rose); border: 1px solid var(--z-rose-line); }
.la-notice { background: var(--z-accent-softer); color: var(--la-teal-ink); border: 1px solid color-mix(in srgb, var(--la-teal) 24%, transparent); }

/* Sign in / create account */
.lab-account:has(> .la-auth) {
  background:
    radial-gradient(900px 520px at 12% -8%, color-mix(in srgb, var(--z-accent) 9%, transparent), transparent 70%),
    radial-gradient(700px 460px at 100% 100%, color-mix(in srgb, var(--z-trace-3) 5%, transparent), transparent 70%),
    var(--la-bg);
}
.la-auth {
  width: min(1120px, calc(100% - 56px)); margin: 0 auto; padding-block: clamp(40px, 9vh, 96px) 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(40px, 7vw, 96px); align-items: center; align-content: center;
}
.la-pitch { padding-block: 8px; max-width: 520px; }
.lab-account .la-pitch-title {
  margin-top: 14px; font-family: var(--la-serif); font-weight: 400;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance;
}
.la-pitch-title em { color: var(--la-teal-ink); font-style: italic; }
.lab-account .la-pitch-lead { margin-top: 16px; color: var(--la-muted); font-size: 1.02rem; line-height: 1.6; max-width: 46ch; }
.la-points { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 4px; }
.la-point { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--la-border); }
.la-point:first-child { border-top: 0; padding-top: 0; }
.la-point-icon {
  --tone: var(--z-accent);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 11%, var(--la-surface));
  border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
}
.la-point-icon svg { width: 18px; height: 18px; }
.la-point--vent .la-point-icon { --tone: var(--z-trace-1); }
.la-point--hemo .la-point-icon { --tone: var(--z-trace-4); }
.la-point--conv .la-point-icon { --tone: var(--z-trace-3); }
.la-point-body { display: grid; gap: 2px; padding-top: 1px; }
.la-point-body strong { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.la-point-body span { color: var(--la-muted); font-size: .89rem; line-height: 1.5; }
.la-auth-card { padding: clamp(26px, 3.4vw, 36px); box-shadow: var(--z-shadow); }
.la-auth-card h1 { font-size: clamp(1.85rem, 3vw, 2.15rem); }
.lab-account .la-other {
  margin-top: 24px; border-top: 1px solid var(--la-border); padding-top: 20px;
  font-size: .89rem; color: var(--la-muted); text-align: center;
}
.la-other a { font-weight: 600; margin-left: 3px; }

/* Footer */
.la-foot { border-top: 1px solid var(--la-border); color: var(--la-faint); font-size: .82rem; }
.la-foot-inner { width: min(1120px, calc(100% - 56px)); margin-inline: auto; display: flex; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; padding-block: 22px; }
.la-foot-brand { color: var(--la-muted); font-weight: 600; }

/* Feedback */
.la-feedback { padding-block: 32px 64px; }
.la-heading { padding-bottom: 28px; display: grid; gap: 10px; justify-items: start; }
.lab-account .la-back {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 6px; margin: 0 0 6px -6px;
  border-radius: 8px; color: var(--la-muted); font: 500 .87rem/1 var(--la-sans); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.lab-account .la-back:hover { background: var(--la-surface-3); color: var(--la-ink); }
.la-back svg { width: 16px; height: 16px; }
.lab-account .la-summary { margin-top: 6px; display: flex; gap: 4px 10px; align-items: center; flex-wrap: wrap; color: var(--la-muted); font-size: .92rem; }
.la-summary strong { font: 500 1.6rem/1 var(--la-sans); letter-spacing: -.02em; color: var(--la-ink); font-variant-numeric: tabular-nums; }
.la-summary-of { margin-left: -4px; }
.la-summary-count { color: var(--la-faint); font-variant-numeric: tabular-nums; }
.la-meter { position: relative; display: inline-flex; line-height: 0; margin-right: 2px; }
.la-meter-base, .la-meter-fill, .la-mini-stars { display: inline-flex; gap: 2px; line-height: 0; }
.la-meter svg { width: 20px; height: 20px; }
.la-meter-base { color: var(--la-border-2); }
.la-meter-base svg { fill: currentColor; }
.la-meter-fill { position: absolute; inset: 0 auto 0 0; width: var(--la-fill, 0%); overflow: hidden; color: var(--la-star); }
.la-meter-fill svg { fill: currentColor; }
.la-columns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; gap: 24px; }
.la-panel { padding: 0; overflow: hidden; }
.la-card-head { padding: 20px 24px 18px; border-bottom: 1px solid var(--la-border); }
.la-card-head h2 { font: 600 1.02rem/1.3 var(--la-sans); letter-spacing: -.01em; }
.lab-account .la-card-head .la-intro { margin: 4px 0 0; font-size: .88rem; }
.la-card-head--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.la-card-body { padding: 24px; }
.la-count {
  display: inline-flex; align-items: center; height: 22px; min-width: 22px; justify-content: center; padding: 0 8px;
  border-radius: 999px; background: var(--la-surface-3); color: var(--la-muted); border: 1px solid var(--la-border);
  font: 600 .74rem/1 var(--la-sans); font-variant-numeric: tabular-nums;
}

/* Star rating */
.la-ratings { margin: 0; padding: 0; border: 0; min-width: 0; }
.la-ratings legend { margin: 0 0 10px; padding: 0; }
.la-rating-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.la-star, .la-unrated { cursor: pointer; position: relative; }
.la-star { flex: 0 1 60px; min-width: 46px; }
.la-star-face {
  display: grid; place-items: center; align-content: center; gap: 5px; min-height: 60px; border-radius: 10px;
  border: 1px solid var(--la-border-2); background: var(--la-surface); box-shadow: var(--z-shadow-sm);
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .06s;
}
.la-star:active .la-star-face { transform: translateY(1px); }
.la-star-glyph { display: grid; place-items: center; color: var(--la-faint); line-height: 0; transition: color .15s; }
.la-star-glyph svg { width: 22px; height: 22px; fill: transparent; transition: fill .15s; }
.la-star-number { color: var(--la-faint); font: 600 .72rem/1 var(--la-sans); font-variant-numeric: tabular-nums; }
/* Hover previews the score: the hovered star and every star before it. */
.la-star:hover .la-star-glyph,
.la-star:has(~ .la-star:hover) .la-star-glyph { color: var(--la-star); }
.la-star:hover .la-star-face { border-color: var(--z-amber-line); background: var(--la-surface-2); }
/* Selected score: the chosen tile is tinted and every star up to it is filled. */
.la-star:has(~ .la-star input:checked) .la-star-glyph,
.la-star input:checked + .la-star-face .la-star-glyph { color: var(--la-star); }
.la-star:has(~ .la-star input:checked) .la-star-glyph svg,
.la-star input:checked + .la-star-face .la-star-glyph svg { fill: currentColor; }
.la-star:has(~ .la-star input:checked) .la-star-face { border-color: var(--z-amber-line); }
.la-star input:checked + .la-star-face { background: var(--la-amber-soft); border-color: var(--la-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--la-amber) 14%, transparent); }
.la-star input:checked + .la-star-face .la-star-number { color: var(--la-amber); }
.la-star input:focus-visible + .la-star-face { outline: 2.5px solid var(--la-focus); outline-offset: 2px; }
.la-unrated {
  display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 14px 0 12px; margin-left: 4px;
  border: 1px solid var(--la-border-2); border-radius: 999px; background: var(--la-surface);
  font-size: .86rem; color: var(--la-muted); transition: background-color .15s, border-color .15s, color .15s;
}
.la-unrated:hover { background: var(--la-surface-2); color: var(--la-ink); }
.la-unrated:has(input:checked) { background: var(--la-surface-3); color: var(--la-ink); border-color: var(--la-faint); }
.la-unrated input { margin: 0; width: 16px; height: 16px; accent-color: var(--la-teal); }
.la-optional { font-weight: 400; color: var(--la-faint); }
.la-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.la-delete {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 10px;
  justify-content: center; border: 1px solid transparent; background: transparent; color: var(--la-rose); font: 550 .88rem/1 var(--la-sans);
  transition: background-color .15s, border-color .15s;
}
.la-delete svg { width: 16px; height: 16px; }
.la-delete:hover { background: var(--la-rose-soft); border-color: var(--z-rose-line); }

/* Recent comments */
.la-comments { padding: 0; margin: 0; list-style: none; }
.la-comments li { padding: 18px 24px; border-top: 1px solid var(--la-border); }
.la-comments li:first-child { border-top: 0; }
.la-comment-meta { display: flex; gap: 6px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; color: var(--la-faint); font-size: .8rem; font-variant-numeric: tabular-nums; }
.la-comment-meta time { margin-left: auto; }
.la-comment-rating { display: inline-flex; align-items: center; gap: 8px; color: var(--la-muted); font-weight: 500; }
.la-mini-stars { color: var(--la-border-2); }
.la-mini-stars svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.4; }
.la-mini-stars svg.is-on { color: var(--la-star); }
.lab-account .la-comment { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .93rem; line-height: 1.6; color: var(--la-ink); }
.la-empty { display: grid; justify-items: center; text-align: center; gap: 4px; padding-block: 40px; }
.la-empty-icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px;
  background: var(--la-surface-3); color: var(--la-faint); border: 1px solid var(--la-border);
}
.la-empty-icon svg { width: 20px; height: 20px; }
.lab-account .la-empty .la-intro { margin: 0; color: var(--la-ink); font-weight: 550; font-size: .93rem; }

@media (max-width: 900px) {
  .la-auth { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 40px; padding-block: 28px 40px; max-width: 560px; }
  .la-pitch { order: 2; max-width: none; }
  .lab-account .la-pitch-title { font-size: 2rem; }
  .la-points { margin-top: 24px; }
}
@media (max-width: 760px) {
  .la-columns { grid-template-columns: minmax(0, 1fr); }
  .la-feedback { padding-block: 20px 40px; }
}
@media (max-width: 560px) {
  .la-auth, .la-width, .la-foot-inner { width: calc(100% - 32px); }
  .la-auth { padding-top: 20px; }
  .la-card { padding: 22px 20px; }
  .la-auth-card { padding: 24px 20px; }
  .la-panel { padding: 0; }
  .la-card-head { padding: 18px 20px 16px; }
  .la-card-body { padding: 20px; }
  .la-comments li { padding: 16px 20px; }
  .la-rating-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .la-star { min-width: 0; }
  .la-unrated { grid-column: 1 / -1; justify-self: start; margin: 4px 0 0; }
  .la-actions > * { flex: 1 1 auto; }
  .la-foot-inner { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-account *, .lab-account *::before, .lab-account *::after { transition: none !important; }
  .la-primary:active, .la-star:active .la-star-face { transform: none; }
}
@media (forced-colors: active) {
  .la-star input:checked + .la-star-face { outline: 2px solid SelectedItem; }
  .la-star-glyph svg { fill: none; }
  .la-star input:checked + .la-star-face .la-star-glyph svg { fill: CanvasText; }
}

/* Members (admin) */
.lab-bar .lab-bar-link[aria-current="page"] { background: var(--z-accent-soft); color: var(--z-accent-ink); }
.lab-account .la-members { width: min(1320px, calc(100% - 48px)); padding-block: 40px 64px; }
.la-members-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.la-members-head h1 { margin-top: 8px; }
.lab-account .la-members-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--la-muted); font-size: .92rem; }
.la-members-summary strong { color: var(--la-ink); font-variant-numeric: tabular-nums; }
.la-members-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lab-account .la-filter {
  display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 9px;
  border: 1px solid var(--la-border-2); background: var(--la-surface); color: var(--la-muted);
  font-size: .86rem; font-weight: 550; text-decoration: none;
}
.lab-account .la-filter:hover { color: var(--la-ink); border-color: var(--la-faint); }
.lab-account .la-filter.is-active { background: var(--la-teal-soft); border-color: color-mix(in srgb, var(--la-teal) 35%, transparent); color: var(--la-teal-ink); }
.lab-account a.la-download { color: var(--la-on-teal); }
.lab-account a.la-download:hover { color: var(--la-on-teal); text-decoration: none; }
.lab-account .la-download { gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 9px; font-size: .86rem; text-decoration: none; }
.la-download svg { width: 16px; height: 16px; }
.la-members-card { margin-top: 24px; padding: 0; overflow: hidden; }
.la-members-card .la-intro { padding: 24px; margin: 0; }
.la-table-scroll { overflow-x: auto; }
.la-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.la-table th, .la-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--la-border); }
.la-table thead th { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--la-faint); background: var(--la-surface-2); white-space: nowrap; }
.la-table tbody tr:last-child td { border-bottom: 0; }
.la-table tbody tr:hover { background: var(--la-surface-2); }
.la-table .la-nowrap { white-space: nowrap; }
.la-table .la-address { min-width: 180px; color: var(--la-muted); }
.la-table small { display: block; color: var(--la-faint); font-size: .76rem; margin-top: 2px; }
.la-none { color: var(--la-faint); }
.la-yes { color: var(--la-teal-ink); font-weight: 600; }
.lab-account .la-members-note { display: block; margin-top: 14px; }

/* Admin tabs (Members / Feedback) */
.la-admin-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--la-surface-2); border: 1px solid var(--la-border); }
.lab-account .la-admin-tabs a {
  padding: 5px 12px; border-radius: 7px; color: var(--la-muted); font-size: .82rem; font-weight: 600; text-decoration: none;
}
.lab-account .la-admin-tabs a:hover { color: var(--la-ink); }
.lab-account .la-admin-tabs a.is-active { background: var(--la-surface); color: var(--la-teal-ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.la-admin-tabs + h1 { margin-top: 14px; }
.la-table .la-feedback-text { min-width: 260px; max-width: 560px; color: var(--la-ink); line-height: 1.5; }
.la-table .la-comment-rating { display: inline-flex; align-items: center; gap: 6px; }

/* Feedback topic switcher */
.la-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; }
.la-topics-label { margin-right: 4px; color: var(--la-faint); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.lab-account .la-topics .la-filter { height: 32px; padding: 0 11px; font-size: .82rem; }

/* ---------- Forum ---------- */
.lf-page { padding-block: 32px 64px; }
.lab-account .lf-page h1 { font-family: var(--la-serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em; }
.lf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-bottom: 24px; }
.lf-head h1 { margin-top: 8px; }
.lab-account .lf-lede { margin-top: 8px; max-width: 60ch; color: var(--la-muted); font-size: .97rem; line-height: 1.55; }
.lf-head .la-primary svg, .lf-head .la-primary { text-decoration: none; }
.lf-head .la-primary svg { width: 17px; height: 17px; }
.lab-account a.la-primary { color: var(--la-on-teal); text-decoration: none; }
.lf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.lf-search-note { font-weight: 400; color: var(--la-faint); }

/* Thread list */
.lf-threads { list-style: none; margin: 0; padding: 0; }
.lf-thread { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 22px; border-top: 1px solid var(--la-border); transition: background-color .15s; }
.lf-thread:first-child { border-top: 0; }
.lf-thread:hover { background: var(--la-surface-2); }
.lf-thread.is-pinned { background: color-mix(in srgb, var(--la-teal-soft) 45%, var(--la-surface)); }
.lab-account .lf-thread-title { color: var(--la-ink); font-weight: 600; font-size: .98rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.lab-account .lf-thread-title:hover { color: var(--la-teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.lab-account .lf-thread-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; color: var(--la-faint); font-size: .82rem; }
.lab-account .lf-cat {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
  background: var(--la-surface-3); color: var(--la-muted); font-size: .76rem; font-weight: 600; text-decoration: none;
}
.lab-account .lf-cat:hover { color: var(--la-teal-ink); }
.lf-flag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--la-border-2); color: var(--la-muted); font-size: .72rem; font-weight: 600; vertical-align: 2px; }
.lf-flag svg { width: 12px; height: 12px; }
.lf-flag--pin { border-color: color-mix(in srgb, var(--la-teal) 35%, transparent); color: var(--la-teal-ink); background: var(--la-teal-soft); }
.lf-thread-meta .lf-flag { margin-left: 0; }
.lf-thread-stats { display: grid; justify-items: end; gap: 3px; text-align: right; white-space: nowrap; }
.lf-replies { color: var(--la-muted); font-size: .84rem; }
.lf-replies strong { color: var(--la-ink); font-variant-numeric: tabular-nums; }
.lf-last { color: var(--la-faint); font-size: .76rem; }
.lf-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px; border-top: 1px solid var(--la-border); color: var(--la-faint); font-size: .84rem; }

/* Avatars and bylines */
.lf-avatar {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  font: 600 .92rem/1 var(--la-sans); color: #fff; background: var(--lf-tone, var(--la-faint));
}
.lf-tone-1 { --lf-tone: #2f7d6b; } .lf-tone-2 { --lf-tone: #6a5bb5; } .lf-tone-3 { --lf-tone: #b5663b; }
.lf-tone-4 { --lf-tone: #3b6fb5; } .lf-tone-5 { --lf-tone: #a34d74; }
.lf-name { font-weight: 600; color: var(--la-ink); }
.lf-former { color: var(--la-faint); font-style: italic; font-weight: 500; }
.lf-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--la-surface-3); color: var(--la-muted); font-size: .72rem; font-weight: 600; }
.lf-badge--mod { background: var(--la-teal-soft); color: var(--la-teal-ink); }

/* Sidebar */
.lf-side { display: grid; gap: 16px; }
.lf-search { position: relative; }
.lf-search svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--la-faint); pointer-events: none; }
.lf-search input {
  width: 100%; height: 42px; padding: 0 12px 0 38px; border-radius: 10px; border: 1px solid var(--la-border-2);
  background: var(--la-surface); color: var(--la-ink); font: inherit; font-size: .92rem;
}
.lf-search input:focus { outline: none; border-color: var(--la-teal); box-shadow: var(--la-ring); }
.lab-account .lf-side-card { padding: 18px; }
.lf-side-card h2 { margin-bottom: 10px; font: 600 .74rem/1.3 var(--la-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--la-faint); }
.lf-cats { display: grid; gap: 2px; }
.lab-account .lf-cats a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--la-muted); font-size: .9rem; font-weight: 500; text-decoration: none;
}
.lab-account .lf-cats a:hover { background: var(--la-surface-2); color: var(--la-ink); }
.lab-account .lf-cats a.is-active { background: var(--la-teal-soft); color: var(--la-teal-ink); font-weight: 600; }
.lf-cat-count { color: var(--la-faint); font-size: .78rem; font-variant-numeric: tabular-nums; }
.lab-account .lf-you { padding: 0 4px; color: var(--la-muted); font-size: .86rem; line-height: 1.5; }
.lf-rules { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--la-muted); font-size: .85rem; line-height: 1.5; }
.lf-rules strong { color: var(--la-ink); font-weight: 600; }

/* A discussion */
.lf-thread-head { padding-bottom: 20px; }
.lf-thread-head h1 { max-width: 32ch; overflow-wrap: anywhere; }
.lf-mod { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--la-border-2); }
.lf-mod-label { margin-right: 4px; color: var(--la-faint); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.lab-account .lf-mod .la-filter { height: 32px; font-size: .82rem; cursor: pointer; }
.lab-account .lf-mod .lf-danger { color: var(--la-rose); }
.lab-account .lf-mod .lf-danger:hover { background: var(--la-rose-soft); border-color: var(--z-rose-line); }
.lf-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 860px; }
.lab-account .lf-post { padding: 20px 22px; scroll-margin-top: 80px; }
.lf-post.is-first { border-color: color-mix(in srgb, var(--la-teal) 28%, var(--la-border)); }
.lf-post:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--la-teal) 22%, transparent); }
.lf-post-head { display: flex; align-items: center; gap: 12px; }
.lf-post-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.lab-account .lf-post-time { color: var(--la-faint); font-size: .8rem; text-decoration: none; white-space: nowrap; }
.lab-account .lf-post-time:hover { color: var(--la-ink); }
.lf-post-body { margin-top: 12px; padding-left: 48px; color: var(--la-ink); font-size: .95rem; line-height: 1.65; overflow-wrap: anywhere; }
.lf-post-body p + p { margin-top: 10px; }
.lab-account .lf-post-body a { color: var(--la-teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.lf-post-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; padding-left: 48px; }
.lf-post-foot .la-hint { margin-right: auto; }
.lab-account .lf-edit { display: inline-flex; align-items: center; gap: 5px; color: var(--la-muted); font-size: .82rem; font-weight: 550; text-decoration: none; }
.lab-account .lf-edit:hover { color: var(--la-teal-ink); }
.lf-edit svg { width: 14px; height: 14px; }
.lf-reply { margin-top: 20px; max-width: 860px; }
.lab-account .lf-locked { margin: 0; }
.lf-first-name { padding: 14px; border-radius: 10px; background: var(--la-surface-2); border: 1px solid var(--la-border); }
.lf-name-page .la-card { max-width: 560px; }

@media (max-width: 900px) {
  .lf-layout { grid-template-columns: 1fr; }
  .lf-side { order: -1; }
  .lf-side .lf-side-card:not(.lf-cats) { display: none; }
  .lf-cats { display: flex; gap: 6px; padding: 10px; overflow-x: auto; scrollbar-width: none; }
  .lf-cats::-webkit-scrollbar { display: none; }
  .lab-account .lf-cats a { flex: none; white-space: nowrap; }
  .lf-cats h2 { display: none; }
  .lab-account .lf-cats a { padding: 6px 10px; border: 1px solid var(--la-border); }
  .lf-compose .lf-side { display: none; }
}
@media (max-width: 560px) {
  .lf-thread { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .lf-thread-stats { grid-column: 2; justify-items: start; text-align: left; display: flex; gap: 10px; }
  .lf-post-body, .lf-post-foot { padding-left: 0; }
  .lab-account .lf-post { padding: 16px; }
}