:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-raised: #ffffff;
  --text: #172033;
  --text-soft: #4f5b6d;
  --muted: #7b8493;
  --border: #e1e6ec;
  --border-strong: #cfd6df;
  --primary: #1769e0;
  --primary-hover: #1258bd;
  --primary-soft: #eaf2ff;
  --green: #16855b;
  --green-soft: #e7f7f0;
  --amber: #b66508;
  --amber-soft: #fff3df;
  --red: #c83c49;
  --red-soft: #ffebed;
  --cyan: #087f9c;
  --cyan-soft: #e4f6fa;
  --sidebar: #ffffff;
  --sidebar-width: 248px;
  --content-max: 1480px;
  --topbar-height: 68px;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(20, 30, 45, 0.05);
  --shadow-md: 0 12px 30px rgba(20, 30, 45, 0.1);
  --shadow-modal: 0 24px 70px rgba(8, 15, 28, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --row-height: 74px;
}

/* v1.2.248 link detail visit logs and log section switch polish. */
.detail-section-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 45%),
    color-mix(in srgb, var(--surface-raised) 90%, transparent);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--text) 6%, transparent);
}

.detail-section-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 160ms var(--ease),
    border-color 160ms var(--ease),
    background 160ms var(--ease),
    color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.detail-section-tabs button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-section-tabs button b {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
}

.detail-section-tabs button:hover,
.detail-section-tabs button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  color: var(--text);
  transform: translateY(-1px);
  outline: 0;
}

.detail-section-tabs button.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-contrast);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}

.detail-section-tabs button.is-active b {
  background: color-mix(in srgb, var(--primary-contrast) 18%, transparent);
  color: var(--primary-contrast);
}

.detail-section-panel[hidden] {
  display: none !important;
}

.detail-section-panel:not([hidden]) {
  animation: enter-up 180ms var(--ease) both;
}

.detail-panel-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
  color: var(--text-soft);
  text-align: center;
}

.detail-panel-empty strong {
  color: var(--text);
}

.detail-panel-empty p {
  margin: 0;
  line-height: 1.6;
}

.detail-visit-logs {
  display: grid;
  gap: 12px;
}

.detail-visit-logs > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-raised) 92%, transparent);
}

.detail-visit-logs > header div {
  display: grid;
  gap: 3px;
}

.detail-visit-logs > header strong {
  font-size: 16px;
}

.detail-visit-logs > header span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.detail-visit-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.detail-visit-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-raised));
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 150ms var(--ease), background-color 150ms ease, border-color 150ms ease;
}

.detail-visit-actions button:hover,
.detail-visit-actions button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-raised));
  transform: translateY(-1px);
}

.detail-visit-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.detail-visit-metrics span {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
}

.detail-visit-metrics small {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 900;
}

.detail-visit-metrics strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
}

.detail-visit-trend,
.detail-visit-insights {
  display: grid;
  gap: 10px;
}

.detail-visit-trend {
  grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr);
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
}

.detail-visit-trend strong,
.detail-visit-trend span {
  display: block;
}

.detail-visit-trend strong {
  font-size: 13px;
}

.detail-visit-trend span {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
}

.detail-visit-hourly {
  display: grid;
  grid-template-columns: repeat(24, minmax(3px, 1fr));
  align-items: end;
  gap: 3px;
  height: 54px;
}

.detail-visit-hourly span {
  display: flex;
  align-items: end;
  min-width: 0;
  height: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  overflow: hidden;
}

.detail-visit-hourly i {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--success) 72%, var(--primary)));
}

.detail-visit-insights {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-visit-distribution {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 9%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
}

.detail-visit-distribution > strong {
  font-size: 13px;
}

.detail-visit-distribution p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
}

.detail-visit-distribution span {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(44px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.detail-visit-distribution b,
.detail-visit-distribution small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.detail-visit-distribution b {
  color: var(--text);
}

.detail-visit-distribution small {
  color: var(--text-soft);
  font-weight: 800;
}

.detail-visit-distribution i {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.detail-visit-distribution i em {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 6px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--success) 68%, var(--primary)));
}

.detail-visit-list {
  display: grid;
  gap: 10px;
  max-height: min(52vh, 560px);
  overflow: auto;
  padding-right: 2px;
}

.detail-visit-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(148px, 0.34fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 9%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
  transition:
    transform 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.detail-visit-item:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 8%, transparent);
  transform: translateY(-1px);
}

.detail-visit-main,
.detail-visit-side {
  display: grid;
  min-width: 0;
}

.detail-visit-main {
  gap: 6px;
}

.detail-visit-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.detail-visit-row-head strong {
  font-size: 13px;
}

.detail-visit-row-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.detail-visit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.detail-visit-fields span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}

.detail-visit-fields b,
.detail-visit-fields em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-visit-fields b {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 900;
}

.detail-visit-fields em {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.detail-visit-side {
  align-content: start;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

.detail-visit-side b,
.detail-visit-side em,
.detail-visit-side small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-visit-side b,
.detail-visit-side em {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.detail-visit-side b {
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  color: var(--primary);
}

.detail-visit-side em {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.detail-visit-side small {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
}

.log-section-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.page-shell-logs .log-section-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.page-shell-logs .log-section-nav a[hidden],
.page-shell-logs [hidden] {
  display: none !important;
}

.page-shell-logs .log-section-nav a {
  min-width: 0;
}

.page-shell-logs .log-section-nav a span,
.page-shell-logs .log-section-nav a b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .detail-section-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .detail-section-tabs button {
    flex: 0 0 auto;
    min-width: 112px;
    scroll-snap-align: start;
  }

  .detail-visit-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-visit-logs > header {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-visit-actions {
    justify-content: flex-start;
  }

  .detail-visit-trend,
  .detail-visit-insights {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-visit-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-visit-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-visit-side {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: start;
    justify-items: start;
    text-align: left;
  }

  .page-shell-logs .log-section-nav,
  .log-section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .detail-section-tabs {
    margin-inline: -2px;
    padding: 6px;
  }

  .detail-section-tabs button {
    min-width: 104px;
    min-height: 46px;
    padding-inline: 8px;
  }

  .detail-visit-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-visit-distribution span {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .detail-visit-list {
    max-height: 58vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-section-panel:not([hidden]),
  .detail-section-tabs button,
  .detail-visit-item,
  .page-shell-logs .log-section-nav a {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.detail-visit-filterbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(130px, 1fr)) minmax(150px, auto);
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}

.detail-visit-filterbar label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.detail-visit-filterbar label span,
.detail-visit-filter-actions span {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.detail-visit-filterbar input,
.detail-visit-filterbar select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  outline: none;
}

.detail-visit-filterbar input {
  padding: 0 11px;
}

.detail-visit-filterbar select {
  padding: 0 30px 0 10px;
}

.detail-visit-filterbar input:focus,
.detail-visit-filterbar select:focus {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 10%, transparent);
}

.detail-visit-filter-actions {
  display: grid;
  align-content: end;
  gap: 6px;
}

.detail-visit-filter-actions button,
.detail-visit-row-actions button,
.link-access-row-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--text-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.detail-visit-filter-actions button:hover,
.detail-visit-filter-actions button:focus-visible,
.detail-visit-row-actions button:hover,
.detail-visit-row-actions button:focus-visible,
.link-access-row-actions button:hover,
.link-access-row-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  color: var(--primary);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 10%, transparent);
}

.detail-visit-row-actions,
.link-access-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.detail-visit-filter-empty {
  margin: 10px 0;
}

.link-access-log-panel {
  order: 20;
}

.link-access-log-panel .analytics-access-panel {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.link-access-log-panel .analytics-access-panel::before {
  opacity: .72;
}

.link-access-quickbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 94%, transparent), color-mix(in srgb, var(--primary) 5%, var(--surface-soft)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 42%, transparent), 0 10px 24px color-mix(in srgb, var(--primary) 6%, transparent);
}

.link-access-quickbar[hidden] {
  display: none;
}

.link-access-quickbar button {
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: transform 160ms var(--ease), color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.link-access-quickbar button:hover,
.link-access-quickbar button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
  color: var(--primary);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--primary) 10%, transparent);
}

.link-access-quickbar button.is-active,
.link-access-quickbar button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), color-mix(in srgb, var(--primary) 7%, var(--surface-raised)));
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent), 0 12px 22px color-mix(in srgb, var(--primary) 12%, transparent);
}

.link-access-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.link-access-item {
  animation: enter-up 420ms var(--ease) both;
}

@media (max-width: 1080px) {
  .detail-visit-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-visit-filterbar label:first-child,
  .detail-visit-filter-actions {
    grid-column: 1 / -1;
  }

  .link-access-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .detail-visit-filterbar,
  .link-access-quickbar,
  .link-access-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .link-access-quickbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
    padding: 7px;
  }

  .link-access-quickbar button {
    min-height: 40px;
    padding: 0 8px;
    font-size: 11px;
  }

  .detail-visit-filter-actions {
    align-content: stretch;
  }

  .detail-visit-filter-actions button,
  .detail-visit-row-actions button,
  .link-access-row-actions button {
    min-height: 38px;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121416;
  --surface: #1a1d20;
  --surface-soft: #202428;
  --surface-raised: #23272b;
  --text: #f1f3f5;
  --text-soft: #c0c6ce;
  --muted: #8f98a5;
  --border: #30353b;
  --border-strong: #40474f;
  --primary: #5b9cff;
  --primary-hover: #7bafff;
  --primary-soft: #1c3454;
  --green: #55c995;
  --green-soft: #17382c;
  --amber: #f0ad55;
  --amber-soft: #3d2d18;
  --red: #ff7b85;
  --red-soft: #472328;
  --cyan: #4fc7de;
  --cyan-soft: #17383f;
  --sidebar: #17191b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.28);
  --shadow-modal: 0 28px 80px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  transition: background-color 180ms ease, color 180ms ease;
}

button,
input,
select {
  font: inherit;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: 2px;
}

img,
svg {
  display: block;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button,
.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
  transition: transform 160ms var(--ease), background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.button {
  min-height: 40px;
  gap: 8px;
  padding: 0 16px;
  font-weight: 650;
  white-space: nowrap;
}

.button:hover,
.icon-button:hover {
  transform: translateY(-1px);
}

.button:active,
.icon-button:active {
  transform: translateY(0) scale(0.98);
}

.button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.button-primary {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(23, 105, 224, 0.18);
}

.button-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 8px 18px rgba(23, 105, 224, 0.24);
}

.button-secondary {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-soft);
}

.button-secondary:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--text);
}

.button-danger {
  background: var(--red);
  color: #ffffff;
}

.button-wide {
  width: 100%;
}

.icon-button {
  width: 40px;
  height: 40px;
  padding: 0;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-soft);
}

.icon-button:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-soft);
}

.icon-button.on-blue {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.eyebrow {
  display: block;
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-transform: uppercase;
}

.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100vh;
  padding: 20px 16px 16px;
  border-right: 1px solid var(--border);
  background: var(--sidebar);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 0 6px;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(23, 105, 224, 0.22);
}

.brand div,
.sidebar-user div {
  min-width: 0;
}

.brand strong,
.brand span,
.sidebar-user strong,
.sidebar-user span {
  display: block;
}

.brand strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.sidebar-compact-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  margin-top: 16px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface)) 0%, color-mix(in srgb, var(--surface-soft) 84%, transparent) 100%);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 8%, transparent);
  transition: transform 160ms var(--ease), color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.sidebar-compact-toggle:hover,
.sidebar-compact-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border-strong));
  color: var(--primary);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 13%, transparent);
  transform: translateY(-1px);
}

.sidebar-compact-toggle .icon {
  width: 16px;
  height: 16px;
}

.sidebar-nav {
  display: grid;
  gap: 4px;
  margin-top: 32px;
}

.sidebar-search {
  position: relative;
  margin: 18px 0 0;
}

.sidebar-search label {
  position: relative;
  display: flex;
  align-items: center;
}

.sidebar-search label .icon {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}

.sidebar-search input {
  width: 100%;
  height: 38px;
  padding: 0 38px 0 36px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 12px;
  outline: 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  font-size: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.sidebar-search input:focus {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border-strong));
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.sidebar-search-clear {
  position: absolute;
  top: 50%;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
}

.sidebar-search-clear:hover,
.sidebar-search-clear:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
}

.sidebar-search-clear .icon {
  width: 14px;
  height: 14px;
}

.sidebar-nav-empty {
  margin: 10px 4px 0;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 12px;
  text-align: center;
}

.sidebar-search + .sidebar-nav {
  margin-top: 14px;
}

.sidebar-search-meta {
  margin: 8px 2px 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.45;
}

.sidebar-search-meta + .sidebar-nav {
  margin-top: 12px;
}

.sidebar-section-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.sidebar-section-tools[hidden] {
  display: none;
}

.sidebar-section-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.sidebar-section-tools button:hover,
.sidebar-section-tools button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
  color: var(--primary);
  transform: translateY(-1px);
}

.sidebar-section-tools button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.sidebar-section-tools [data-sidebar-scroll-top]:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 70%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
  color: var(--primary);
}

.sidebar-section-tools .icon {
  width: 13px;
  height: 13px;
}

.sidebar-nav-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  margin: 13px 2px 3px;
  padding: 0 9px 0 10px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease);
}

.sidebar-nav-section:first-child {
  margin-top: 0;
}

.sidebar-nav-section[hidden] {
  display: none;
}

.sidebar-nav-section:hover,
.sidebar-nav-section:focus-visible {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-soft));
  color: var(--text);
  transform: translateX(1px);
}

.sidebar-nav-section.is-search-matched {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 13%, var(--surface-soft)), color-mix(in srgb, var(--surface-soft) 82%, transparent));
  color: var(--primary);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 44%, transparent);
}

.sidebar-nav-section span {
  display: grid;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar-nav-section b {
  color: color-mix(in srgb, var(--text) 88%, var(--primary));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.sidebar-nav-section small {
  overflow: hidden;
  max-width: 132px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.sidebar-section-count[hidden] {
  display: none;
}

.sidebar-section-count.is-filtered {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
  color: var(--primary);
}

.sidebar-nav-section .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform 160ms var(--ease);
}

.sidebar-nav-section.is-collapsed .icon {
  transform: rotate(-90deg);
}

.sidebar-nav-section.is-collapsed {
  min-height: 38px;
  margin-top: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, var(--border));
}

.sidebar-nav-section.is-collapsed small {
  display: none;
}

.sidebar-nav-section.is-static {
  cursor: default;
}

.sidebar-nav-section.is-static .icon {
  display: none;
}

.nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  padding: 0 12px;
  border-radius: 7px;
  color: var(--text-soft);
  font-weight: 600;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms var(--ease);
}

.nav-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item[hidden] {
  display: none;
}

.nav-item:hover {
  background: var(--surface-soft);
  color: var(--text);
  transform: translateX(2px);
}

.nav-item.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.nav-item.is-current-located {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background:
    radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--primary) 17%, transparent), transparent 36%),
    var(--primary-soft);
  color: var(--primary);
  animation: focus-target-ring 1.3s ease-out 1;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 12%, transparent);
}

.nav-item.is-search-focused {
  outline: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
  outline-offset: 2px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 11%, transparent), color-mix(in srgb, var(--surface-soft) 88%, transparent));
  color: var(--primary);
  transform: translateX(3px);
}

.nav-item.is-loading {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--surface-soft) 88%, transparent));
  color: var(--primary);
  cursor: progress;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 52%, transparent);
}

.nav-item.is-loading > .icon {
  animation: sidebar-nav-loading-pulse 780ms ease-in-out infinite;
}

.nav-item.is-loading > span::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-radius: 999px;
  background: currentColor;
  vertical-align: middle;
  animation: sidebar-nav-loading-dot 780ms ease-in-out infinite;
}

.nav-item.is-prefetching {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--primary) 28%, transparent);
}

.sidebar.is-nav-loading-lock .nav-item:not(.is-loading) {
  opacity: 0.58;
  pointer-events: none;
}

.nav-item b {
  min-width: 23px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  line-height: 17px;
  text-align: center;
}

.nav-item.is-active b {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

.nav-item mark {
  margin: 0 -1px;
  padding: 1px 3px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--amber) 28%, var(--surface));
  color: color-mix(in srgb, var(--text) 88%, var(--amber));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 24%, transparent);
}

.sidebar-status {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  gap: 8px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
}

.status-head {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.status-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-status p {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
}

.status-dot.is-success {
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent);
}

.status-dot.is-danger {
  background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 14%, transparent);
}

.status-dot.is-warning {
  background: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 16%, transparent);
}

.sidebar-user {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 5px 0;
  border-top: 1px solid var(--border);
}

.sidebar-user .avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 750;
}

.sidebar-user .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.sidebar-user strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user div span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

.sidebar-user .icon-button {
  width: 32px;
  height: 32px;
  border-color: transparent;
  background: transparent;
}

.sidebar-user .icon {
  width: 16px;
  height: 16px;
}

.sidebar-backdrop {
  display: none;
}

@media (min-width: 901px) {
  .app-layout.sidebar-compact {
    --sidebar-width: 82px;
  }

  .app-layout.sidebar-compact .sidebar {
    padding-inline: 12px;
  }

  .app-layout.sidebar-compact .brand {
    justify-content: center;
    padding-inline: 0;
  }

  .app-layout.sidebar-compact .brand div,
  .app-layout.sidebar-compact .sidebar-search,
  .app-layout.sidebar-compact .sidebar-search-meta,
  .app-layout.sidebar-compact .sidebar-nav-empty,
  .app-layout.sidebar-compact .sidebar-section-tools,
  .app-layout.sidebar-compact .sidebar-nav-section,
  .app-layout.sidebar-compact .sidebar-status p,
  .app-layout.sidebar-compact .status-head strong,
  .app-layout.sidebar-compact .sidebar-user div {
    display: none;
  }

  .app-layout.sidebar-compact .sidebar-compact-toggle {
    position: relative;
    min-height: 42px;
    padding-inline: 0;
    border-radius: 16px;
  }

  .app-layout.sidebar-compact .sidebar-compact-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .app-layout.sidebar-compact .sidebar-nav {
    gap: 8px;
    margin-top: 18px;
  }

  .app-layout.sidebar-compact .sidebar-search + .sidebar-nav {
    margin-top: 18px;
  }

  .app-layout.sidebar-compact .nav-item {
    position: relative;
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 46px;
    padding: 0;
    border-radius: 16px;
  }

  .app-layout.sidebar-compact .nav-item:hover {
    transform: translateY(-1px);
  }

  .app-layout.sidebar-compact .nav-item span {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    z-index: 45;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-6px, -50%);
    transition: opacity 150ms ease, transform 150ms ease;
    white-space: nowrap;
  }

  .app-layout.sidebar-compact .nav-item:hover span,
  .app-layout.sidebar-compact .nav-item:focus-visible span {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .app-layout.sidebar-compact .nav-item b {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 16px;
    transform: none;
  }

  .app-layout.sidebar-compact .sidebar-status {
    display: grid;
    place-items: center;
    padding: 13px 0;
    border-radius: 16px;
  }

  .app-layout.sidebar-compact .sidebar-user {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding-inline: 0;
  }

  .app-layout.sidebar-compact .sidebar-user .avatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .app-layout.sidebar-compact .sidebar-user .icon-button {
    width: 36px;
    height: 36px;
    border-color: var(--border);
    background: var(--surface-soft);
  }
}

/* v1.2.238 login short-screen button fit polish. */
@media (min-width: 721px) and (max-height: 760px) {
  body.auth-page .auth-shell {
    min-height: 0;
    max-height: calc(100vh - 28px);
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    body.auth-page .auth-shell {
      max-height: calc(100dvh - 28px);
    }
  }

  body.auth-page .auth-brand {
    padding: 34px 46px;
  }

  body.auth-page .auth-brand img {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
  }

  body.auth-page .auth-brand h1 {
    font-size: 30px;
  }

  body.auth-page .auth-brand-badges {
    margin-top: 14px;
  }

  body.auth-page .auth-metrics {
    height: 58px;
    margin-top: 24px;
  }

  body.auth-page .auth-security-card {
    margin-top: 14px;
    padding: 14px;
  }

  body.auth-page .auth-form-wrap {
    padding: 30px 50px;
  }

  body.auth-page .auth-form-head h2 {
    font-size: 24px;
  }

  body.auth-page .auth-time-panel {
    margin-top: 10px;
    padding: 10px 12px;
  }

  body.auth-page .auth-time-icon {
    width: 36px;
    height: 36px;
  }

  body.auth-page .auth-time-actions {
    gap: 7px;
  }

  body.auth-page .auth-time-action {
    min-height: 32px;
  }

  body.auth-page .auth-login-hints,
  body.auth-page .auth-quick-actions {
    gap: 7px;
    margin-top: 8px;
  }

  body.auth-page .auth-login-hints span,
  body.auth-page .auth-quick-actions a,
  body.auth-page .auth-quick-actions > span {
    min-height: 32px;
  }

  body.auth-page .auth-form {
    gap: 10px;
    margin-top: 14px;
  }

  body.auth-page .auth-form .field > span:first-child {
    margin-bottom: 5px;
  }

  body.auth-page .auth-input-wrap > input {
    min-height: 42px;
  }

  body.auth-page .auth-password-assist {
    gap: 5px;
    margin-top: -5px;
  }

  body.auth-page .auth-remember {
    min-height: 30px;
    margin-top: -5px;
  }

  body.auth-page .auth-form-status {
    min-height: 8px;
    margin: -5px 0;
  }

  body.auth-page .auth-passkey-actions {
    gap: 8px;
  }

  body.auth-page .auth-form .button.button-primary,
  body.auth-page .auth-passkey-actions .button {
    min-height: 42px;
  }

  body.auth-page .auth-form-wrap footer {
    display: none;
  }
}

.main-column {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: var(--topbar-height);
  padding: 0 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.topbar-title {
  min-width: 0;
}

.topbar-title span,
.topbar-title strong {
  display: block;
}

.topbar-title span {
  color: var(--muted);
  font-size: 10px;
}

.topbar-title strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.topbar-message-button {
  overflow: visible;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--primary) 12%, transparent), transparent 65%),
    var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
}

.topbar-message-button.has-unread {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.topbar-message-button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface));
  color: var(--primary);
}

.topbar-message-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 72%, #ffb4bb));
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 8px 16px color-mix(in srgb, var(--red) 24%, transparent);
}

.topbar-profile-button {
  position: relative;
  overflow: hidden;
}

.topbar-profile-button > .icon {
  position: relative;
  z-index: 0;
}

.topbar-profile-image {
  position: absolute;
  inset: 4px;
  z-index: 1;
  display: block;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 6px;
  background: var(--surface);
  object-fit: cover;
}

.mobile-menu {
  display: none;
  margin-right: 10px;
}

.content {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: 26px 76px 88px 28px;
  transition: max-width 220ms var(--ease), padding 220ms var(--ease);
}

.app-layout.is-narrow {
  --content-max: 1180px;
}

.page-shell {
  display: grid;
  gap: 20px;
  animation: enter-up 420ms var(--ease) both;
}

.page-shell-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.page-shell-head > div:first-child {
  max-width: 760px;
}

.page-shell-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface-raised));
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.page-shell-head h1 {
  margin: 12px 0 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
}

.page-shell-head p {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.8;
}

.page-shell-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.log-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, .85fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 24px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 48%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--primary) 10%, transparent);
  animation: enter-up 420ms var(--ease) both;
}

.log-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--text-soft);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}

.log-search:focus-within {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.log-search svg {
  flex: 0 0 auto;
}

.log-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.log-search input::placeholder {
  color: var(--text-muted);
}

.log-filter-group,
.log-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.log-filter-group {
  min-height: 46px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.log-filter-group button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.log-filter-group button:hover,
.log-filter-group button:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.log-filter-group button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #0f766e));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 25%, transparent);
  transform: translateY(-1px);
}

.log-toolbar-actions {
  justify-content: flex-end;
}

.log-auto-refresh-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 62%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.log-filter-empty {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px dashed color-mix(in srgb, var(--warning) 34%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--warning) 12%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-raised) 90%, transparent);
  color: var(--text-soft);
  animation: enter-up 220ms var(--ease) both;
}

.log-filter-empty strong {
  color: var(--text);
}

.log-filter-empty p {
  margin: 0;
  line-height: 1.7;
}

.log-section-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 7%, transparent);
}

.log-section-nav a {
  display: grid;
  gap: 4px;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 9%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  text-decoration: none;
  transition:
    transform 160ms var(--ease),
    border-color 160ms var(--ease),
    background 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.log-section-nav a:hover,
.log-section-nav a:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-1px);
  outline: 0;
}

.log-section-nav span {
  font-size: 13px;
  font-weight: 900;
}

.log-section-nav b {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

#documentLogPanel,
#allLogPanel,
#debugLogPanel {
  scroll-margin-top: 90px;
}

.page-shell-logs > .page-shell-head {
  order: 1;
}

.page-shell-logs > .log-overview-grid {
  order: 2;
}

.page-shell-logs > .log-health-panel {
  order: 3;
}

.page-shell-logs > .log-toolbar {
  order: 4;
}

.page-shell-logs > .log-filter-empty {
  order: 5;
}

.page-shell-logs > .log-section-nav {
  order: 6;
}

.page-shell-logs > .log-center-grid {
  display: contents;
}

.page-shell-logs > .log-utility-head {
  order: 20;
}

.page-shell-logs > .log-utility-content {
  order: 21;
}

.page-shell-logs > .log-file-index {
  order: 21;
}

.page-shell-logs > .log-issue-timeline {
  order: 22;
}

.log-overview-grid,
.log-center-grid {
  display: grid;
  gap: 16px;
}

.log-overview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.log-overview-card,
.log-panel {
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--shadow);
}

.log-overview-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.log-overview-card span,
.log-overview-card small,
.log-panel-head small,
.log-panel-head span,
.rd-log-file header span {
  color: var(--text-soft);
}

.log-overview-card strong {
  font-size: clamp(21px, 3vw, 31px);
  line-height: 1;
}

.log-overview-card-alerts {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--danger) 12%, transparent), transparent 36%),
    radial-gradient(circle at 100% 16%, color-mix(in srgb, var(--warning) 13%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-raised) 94%, transparent);
}

.log-overview-card-alerts strong {
  color: color-mix(in srgb, var(--danger) 82%, var(--text) 18%);
}

.log-health-panel {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 32%),
    radial-gradient(circle at 100% 10%, color-mix(in srgb, #10b981 10%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--shadow);
  animation: enter-up 390ms var(--ease) both;
}

.log-health-panel.is-danger {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--danger) 13%, transparent), transparent 34%),
    radial-gradient(circle at 100% 8%, color-mix(in srgb, var(--warning) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-raised) 94%, transparent);
}

.log-health-panel.is-warn {
  border-color: color-mix(in srgb, var(--warning) 24%, var(--border));
}

.log-health-panel.is-empty {
  border-style: dashed;
}

.log-health-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.log-health-panel header span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
}

.log-health-panel h2 {
  margin: 5px 0 0;
  font-size: 20px;
}

.log-health-panel p {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.75;
}

.log-health-score {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.log-health-score > strong {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 86%, #10b981), color-mix(in srgb, var(--primary) 58%, #0f766e));
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 18%, transparent);
}

.log-health-panel.is-danger .log-health-score > strong {
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 14px 28px color-mix(in srgb, #ef4444 18%, transparent);
}

.log-health-panel.is-warn .log-health-score > strong {
  background: linear-gradient(135deg, #f59e0b, color-mix(in srgb, var(--primary) 50%, #f59e0b));
}

.log-health-score > small {
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  color: var(--text-soft);
  font-weight: 850;
}

.log-health-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.log-health-metrics,
.log-health-details,
.log-health-lists {
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--border) 54%, transparent);
}

.log-health-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.log-health-details,
.log-health-lists {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.log-health-lists article:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.log-health-metrics article,
.log-health-details article,
.log-health-lists article {
  min-width: 0;
  padding: 15px 16px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
}

.log-health-metrics span,
.log-health-details span {
  display: block;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 850;
}

.log-health-metrics strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1;
}

.log-health-details strong,
.log-health-lists strong {
  display: block;
  overflow-wrap: anywhere;
}

.log-health-metrics small,
.log-health-details small {
  display: block;
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}

.log-health-lists ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
  list-style: none;
}

.log-health-lists li {
  position: relative;
  padding-left: 14px;
  overflow-wrap: anywhere;
}

.log-health-lists li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 72%, #10b981);
}

.log-file-index {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--shadow);
  animation: enter-up 420ms var(--ease) both;
}

.log-utility-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
}

.log-utility-head span {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.log-utility-head h2 {
  margin: 3px 0 0;
  font-size: 17px;
}

.log-utility-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.log-utility-metrics b {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 850;
}

.log-utility-toggle {
  min-height: 34px;
}

.log-utility-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 180ms var(--ease);
}

.log-utility-toggle.is-collapsed svg {
  transform: rotate(-90deg);
}

.log-utility-content {
  display: grid;
  gap: 12px;
}

.log-utility-content[hidden] {
  display: none;
}

.log-file-index > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.log-file-index header span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
}

.log-file-index h2 {
  margin: 5px 0 0;
  font-size: 20px;
}

.log-file-index p {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.75;
}

.log-file-index-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.log-file-index-actions b {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 12px;
}

.log-file-index-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.log-file-index-search {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-raised) 88%, transparent);
  color: var(--text-soft);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}

.log-file-index-search:focus-within {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.log-file-index-search svg {
  flex: 0 0 auto;
}

.log-file-index-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.log-file-index-search input::placeholder {
  color: var(--text-muted);
}

.log-file-index-filters {
  display: flex;
  flex: 2 1 420px;
  flex-wrap: wrap;
  gap: 8px;
}

.log-file-index-filters button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  color: var(--text-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.log-file-index-filters button:hover,
.log-file-index-filters button:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-raised));
}

.log-file-index-filters button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #0f766e));
  box-shadow: 0 9px 18px color-mix(in srgb, var(--primary) 20%, transparent);
  transform: translateY(-1px);
}

.log-file-index-empty {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
}

.log-file-index-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--border) 54%, transparent);
}

.log-file-index-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  transition: background 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease);
}

.log-file-index-item[data-log-file-target] {
  cursor: pointer;
}

.log-file-index-item[data-log-file-target]:hover,
.log-file-index-item[data-log-file-target]:focus-visible {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 50%),
    color-mix(in srgb, var(--surface-raised) 98%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
  transform: translateY(-1px);
  outline: 0;
}

.log-file-index-item strong,
.log-file-index-item small {
  display: block;
  overflow-wrap: anywhere;
}

.log-file-index-item strong {
  margin-top: 5px;
}

.log-file-index-item small {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 12px;
}

.log-file-source {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
  font-size: 11px;
  font-weight: 850;
}

.log-file-index-metrics {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.log-file-index-metrics span {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  font-size: 11px;
  font-weight: 850;
  line-height: 24px;
}

.log-file-index-metrics .is-error {
  color: #ef4444;
  background: color-mix(in srgb, #ef4444 10%, transparent);
}

.log-file-index-metrics .is-warn {
  color: #d97706;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
}

.log-file-index-metrics .is-hot {
  color: #ffffff;
  background: linear-gradient(135deg, #ef4444, #f59e0b);
}

.log-file-index-metrics .is-clean {
  color: #059669;
  background: color-mix(in srgb, #10b981 11%, transparent);
}

.log-issue-digest {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--danger) 13%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--danger) 10%, transparent), transparent 30%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--warning) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--shadow);
  animation: enter-up 440ms var(--ease) both;
}

.log-issue-timeline {
  border-color: color-mix(in srgb, var(--primary) 14%, var(--danger) 10%);
  background:
    radial-gradient(circle at 0% 8%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 32%),
    radial-gradient(circle at 100% 8%, color-mix(in srgb, var(--danger) 11%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-raised) 94%, transparent);
}

.log-timeline-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 68%, transparent);
}

.log-timeline-search {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  color: var(--text-soft);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}

.log-timeline-search:focus-within {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.log-timeline-search svg {
  flex: 0 0 auto;
}

.log-timeline-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.log-timeline-search input::placeholder {
  color: var(--text-muted);
}

.log-timeline-filters {
  display: flex;
  flex: 2 1 420px;
  flex-wrap: wrap;
  gap: 8px;
}

.log-timeline-filters button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 10%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  color: var(--text-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.log-timeline-filters button:hover,
.log-timeline-filters button:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-raised));
}

.log-timeline-filters button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 92%, #f59e0b), color-mix(in srgb, var(--primary) 72%, #0f766e));
  box-shadow: 0 9px 18px color-mix(in srgb, var(--danger) 18%, transparent);
  transform: translateY(-1px);
}

.log-timeline-empty {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
}

.log-issue-digest > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.log-issue-digest header span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
}

.log-issue-digest h2 {
  margin: 5px 0 0;
  font-size: 20px;
}

.log-issue-digest p {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.75;
}

.log-issue-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.log-issue-actions b {
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: color-mix(in srgb, var(--danger) 82%, var(--text));
  font-size: 12px;
}

.log-issue-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  background: color-mix(in srgb, var(--border) 54%, transparent);
  list-style: none;
}

.log-issue-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 13px 16px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
}

.log-issue-list li[data-log-issue-target] {
  cursor: pointer;
  transition: background 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.log-issue-list li[data-log-issue-target]:hover,
.log-issue-list li[data-log-issue-target]:focus-visible {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
  transform: translateY(-1px);
  outline: 0;
}

.log-issue-list li[data-level="error"] {
  background:
    linear-gradient(90deg, color-mix(in srgb, #ef4444 9%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-raised) 94%, transparent);
}

.log-issue-level {
  align-self: start;
  min-width: 42px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: #f59e0b;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.log-issue-list li[data-level="error"] .log-issue-level {
  background: #ef4444;
}

.log-issue-list strong,
.log-issue-list small,
.log-issue-list code {
  display: block;
  overflow-wrap: anywhere;
}

.log-issue-list small {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 12px;
}

.log-issue-list code {
  margin-top: 8px;
  color: var(--text);
  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
}

.log-timeline-list li {
  position: relative;
  padding-left: 20px;
}

.log-timeline-list li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 68%, #38bdf8), color-mix(in srgb, var(--danger) 68%, #f59e0b));
  opacity: .72;
}

.log-timeline-list strong em {
  display: inline-flex;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
  vertical-align: middle;
}

.log-issue-empty {
  padding: 22px 20px;
  color: var(--text-soft);
}

.log-issue-empty strong {
  display: block;
  color: var(--text);
}

.log-issue-empty.is-clean {
  background: color-mix(in srgb, #10b981 7%, transparent);
}

.log-center-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.log-panel {
  overflow: hidden;
}

.all-log-panel {
  order: 30;
}

.document-log-panel {
  order: 10;
}

.debug-log-digest {
  order: 1;
}

.rd-log-panel {
  order: 2;
}

.debug-log-section {
  display: grid;
  gap: 12px;
  order: 40;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--warning) 24%, var(--border));
  border-radius: 24px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warning) 8%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-raised) 76%, transparent);
}

.debug-log-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 4px 0;
}

.debug-log-section-head span {
  color: color-mix(in srgb, var(--warning) 76%, var(--text-soft));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.debug-log-section-head h2 {
  margin: 5px 0 0;
  font-size: 20px;
}

.debug-log-section-head p {
  margin: 7px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
}

.debug-log-section > .log-issue-digest,
.debug-log-section > .log-panel {
  box-shadow: none;
}

.log-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.log-panel-head h2 {
  margin: 4px 0 0;
  font-size: 20px;
}

.log-panel-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.log-collapse-toggle {
  width: 36px;
  height: 36px;
  color: var(--text-soft);
}

.log-collapse-toggle svg {
  transition: transform 180ms var(--ease);
}

.log-collapse-toggle.is-collapsed svg {
  transform: rotate(-90deg);
}

.log-panel.is-collapsed .log-panel-head,
.rd-log-file.is-collapsed > header {
  border-bottom-color: transparent;
}

.release-log-list,
.rd-log-file-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.release-log-item,
.rd-log-file {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.rd-log-file.is-focused {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
    0 16px 34px color-mix(in srgb, var(--primary) 16%, transparent);
  animation: log-line-pulse 900ms var(--ease) both;
}

.release-log-item > header,
.rd-log-file > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.release-log-title strong,
.rd-log-file > header strong {
  font-size: 15px;
}

.release-log-title,
.release-log-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.release-log-title span,
.release-log-meta > span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 850;
}

.release-log-title strong {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  line-height: 1;
}

.release-log-meta {
  justify-items: end;
  text-align: right;
}

.release-log-sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.release-log-sources em,
.release-log-doc-block > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  color: var(--text-soft);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.release-log-body {
  display: grid;
  gap: 10px;
  max-height: 280px;
  padding: 10px 12px 12px;
  overflow: auto;
}

.release-log-doc-block {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 9%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 62%, transparent);
}

.release-log-doc-readme {
  border-color: color-mix(in srgb, var(--green) 14%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 28%, transparent);
}

.release-log-doc-block > span {
  justify-self: start;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
}

.release-log-body h3 {
  margin: 4px 0 0;
  color: var(--primary);
  font-size: 12px;
}

.release-log-body p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.62;
}

.release-log-bullet {
  position: relative;
  padding-left: 13px;
}

.release-log-bullet::before {
  position: absolute;
  top: .72em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  content: "";
}

.document-log-panel {
  overflow: hidden;
}

.document-workspace {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 96%, transparent);
}

.document-workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.document-workspace-title {
  min-width: 0;
}

.document-workspace-title span,
.document-log-sidebar-head span,
.document-log-version {
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.document-workspace-title h2 {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.25;
}

.document-workspace-title p {
  max-width: 760px;
  margin: 7px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

.document-workspace-status {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
}

.document-workspace-status article {
  display: grid;
  min-width: 78px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
}

.document-workspace-status span {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 900;
}

.document-workspace-status strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.15;
}

.document-workspace-status .log-collapse-toggle {
  align-self: center;
}

.document-workspace-content {
  background: color-mix(in srgb, var(--surface-raised) 44%, transparent);
}

.document-log-reader {
  display: grid;
  min-height: 520px;
}

.document-log-commandbar {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.6fr);
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.document-log-searchbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text-soft);
}

.document-log-searchbox svg {
  width: 16px;
  height: 16px;
}

.document-log-searchbox input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.document-log-search-clear,
.document-log-action-group button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background 180ms var(--ease),
    border-color 180ms var(--ease),
    color 180ms var(--ease),
    box-shadow 180ms var(--ease);
}

.document-log-search-clear:hover,
.document-log-action-group button:hover,
.document-log-action-group button.is-active {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
}

.document-log-search-clear {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 76%, transparent);
}

.document-log-search-clear[hidden] {
  display: none;
}

.document-log-action-group button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 64%, var(--border));
  background: var(--primary);
  color: var(--primary-contrast);
}

.document-log-action-group button svg {
  width: 15px;
  height: 15px;
  margin-right: 6px;
}

.document-log-commandbar-actions,
.document-log-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.document-log-commandbar-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.document-log-action-group {
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
}

.document-log-reader-body {
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  min-height: 0;
}

.document-log-sidebar {
  display: grid;
  align-content: start;
  gap: 7px;
  max-height: min(70vh, 720px);
  padding: 12px;
  overflow: auto;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.document-log-sidebar-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 5px;
  padding: 0 0 7px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent) 0 84%, transparent);
}

.document-log-sidebar-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.document-log-sidebar-head strong,
.document-log-sidebar-head small {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.document-log-list-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 9px;
  width: 100%;
  min-height: 76px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background 180ms var(--ease),
    border-color 180ms var(--ease),
    box-shadow 180ms var(--ease),
    transform 180ms var(--ease);
}

.document-log-list-item[hidden] {
  display: none;
}

.document-log-list-item:hover,
.document-log-list-item.is-active {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}

.document-log-list-item.is-active {
  transform: translateY(-1px);
}

.document-log-list-item.is-unread:not(.is-active) {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 15%, transparent) 0 3px, transparent 3px),
    color-mix(in srgb, var(--surface) 92%, transparent);
}

.document-log-index {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}

.document-log-list-copy {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  min-width: 0;
  gap: 3px;
}

.document-log-list-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-log-list-copy small {
  color: var(--text-soft);
  font-size: 11px;
}

.document-log-list-tags {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.document-log-list-tags em,
.document-log-detail-meta em,
.document-log-detail-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--green-soft) 25%, transparent);
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.document-log-list-tags em {
  padding-inline: 5px;
  font-size: 9px;
}

.document-log-list-tags [data-document-log-read-status],
.document-log-detail-meta [data-document-log-read-status] {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
}

.document-log-list-tags .is-read,
.document-log-detail-meta .is-read {
  border-color: color-mix(in srgb, var(--green) 18%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 26%, transparent);
  color: var(--green);
}

.document-log-list-tags .is-unread,
.document-log-detail-meta .is-unread {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.document-log-main {
  max-height: min(70vh, 720px);
  overflow: auto;
  padding: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-raised) 70%, transparent));
}

.document-log-detail[hidden],
.document-log-empty[hidden],
.document-log-detail-body .release-log-doc-block[hidden] {
  display: none;
}

.document-log-detail {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.document-log-detail > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}

.document-log-detail > header h3 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.25;
}

.document-log-version {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  letter-spacing: 0;
}

.document-log-detail-meta {
  display: flex;
  align-content: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
  min-width: min(330px, 42%);
  text-align: right;
}

.document-log-detail-meta span {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  color: var(--text-soft);
}

.document-log-detail-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.document-log-detail-body .release-log-doc-block {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border-radius: 10px;
}

.document-log-detail-body h3 {
  margin: 6px 0 0;
  color: var(--primary);
  font-size: 13px;
  line-height: 1.45;
}

.document-log-detail-body p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.74;
  overflow-wrap: anywhere;
}

.document-log-empty {
  display: grid;
  gap: 8px;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  color: var(--text-soft);
}

.document-log-empty strong {
  color: var(--text);
}

@media (max-width: 900px) {
  .document-workspace-hero,
  .document-log-commandbar {
    grid-template-columns: 1fr;
  }

  .document-workspace-status,
  .document-log-commandbar-actions {
    justify-content: flex-start;
  }

  .document-log-commandbar-actions {
    align-items: stretch;
  }

  .document-log-reader-body {
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  }

  .document-log-detail > header {
    grid-template-columns: 1fr;
  }

  .document-log-detail-meta {
    justify-content: flex-start;
    min-width: 0;
    text-align: left;
  }
}

@media (max-width: 720px) {
  .document-workspace-hero {
    padding: 14px;
  }

  .document-workspace-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    width: 100%;
  }

  .document-workspace-status article {
    min-width: 0;
  }

  .document-log-searchbox,
  .document-log-search-clear,
  .document-log-action-group button {
    min-height: 44px;
  }

  .document-log-commandbar-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .document-log-action-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .document-log-commandbar-actions {
    gap: 8px;
  }

  .document-log-action-group button {
    width: 100%;
  }

  .document-log-reader-body {
    grid-template-columns: 1fr;
  }

  .document-log-sidebar {
    max-height: 330px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .document-log-main {
    max-height: none;
    padding: 16px;
  }

  .document-log-detail > header {
    grid-template-columns: 1fr;
  }

  .document-log-detail-meta {
    justify-content: flex-start;
    min-width: 0;
    text-align: left;
  }
}

@media (max-width: 430px) {
  .document-workspace-title h2,
  .document-log-detail > header h3 {
    font-size: 19px;
  }

  .document-workspace-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .document-workspace-status .log-collapse-toggle {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    min-height: 44px;
  }

  .document-log-commandbar,
  .document-log-sidebar,
  .document-log-main {
    padding: 12px;
  }

  .document-log-commandbar-actions {
    grid-template-columns: 1fr;
  }

  .document-log-action-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .document-log-list-item {
    min-height: 76px;
  }
}

@media (max-width: 390px) {
  .document-workspace-status article {
    padding: 8px;
  }

  .document-log-searchbox {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .document-log-searchbox .document-log-search-clear {
    grid-column: 1 / -1;
    width: 100%;
  }

  .document-log-detail-body p {
    font-size: 12px;
  }
}

.rd-log-file header b {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: 12px;
}

.rd-log-file-title {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.log-file-root-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.rd-log-file-title strong,
.rd-log-file-title span {
  overflow-wrap: anywhere;
}

.rd-log-file-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.log-entry-copy,
.log-entry-view {
  width: 36px;
  height: 36px;
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--primary);
}

.log-entry-copy:hover,
.log-entry-copy:focus-visible,
.log-entry-view:hover,
.log-entry-view:focus-visible {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-raised));
}

.rd-log-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rd-log-level {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
}

.rd-log-level.is-error {
  color: #ef4444;
  background: color-mix(in srgb, #ef4444 11%, transparent);
}

.rd-log-level.is-warn {
  color: #d97706;
  background: color-mix(in srgb, #f59e0b 13%, transparent);
}

.rd-log-level.is-ok {
  color: #059669;
  background: color-mix(in srgb, #10b981 12%, transparent);
}

.rd-log-level.is-info {
  color: var(--text-soft);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.rd-log-level.is-masked {
  color: color-mix(in srgb, var(--primary) 86%, var(--text));
  background: color-mix(in srgb, var(--primary) 11%, transparent);
}

.rd-log-lines {
  display: grid;
  gap: 1px;
  max-height: var(--dashboard-log-inline-max-height, 540px);
  margin: 0;
  padding: 0;
  overflow: auto;
  background: color-mix(in srgb, var(--border) 58%, transparent);
  list-style: none;
}

.rd-log-lines li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
}

.rd-log-lines li[data-has-line-number="1"] {
  grid-template-columns: 8px auto minmax(0, 1fr) auto;
}

.rd-log-lines li[data-masked="1"] {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-raised) 94%, transparent);
}

.rd-log-lines li.is-focused {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-raised) 98%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent),
    0 12px 28px color-mix(in srgb, var(--primary) 16%, transparent);
  animation: log-line-pulse 900ms var(--ease) both;
}

@keyframes log-line-pulse {
  0% {
    transform: scale(.995);
  }
  45% {
    transform: scale(1.006);
  }
  100% {
    transform: scale(1);
  }
}

.rd-log-lines li::before {
  width: 8px;
  border-radius: 999px;
  background: var(--text-muted);
  content: "";
}

.rd-log-lines li[data-level="ok"]::before {
  background: #10b981;
}

.rd-log-lines li[data-level="warn"]::before {
  background: #f59e0b;
}

.rd-log-lines li[data-level="error"]::before {
  background: #ef4444;
}

.rd-log-line-number {
  min-width: 38px;
  padding-top: 1px;
  color: var(--text-muted);
  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  line-height: 1.8;
  text-align: right;
  user-select: none;
}

.rd-log-lines code {
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  line-height: 1.65;
}

.rd-log-mask-badge {
  align-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.log-viewer-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  height: min(86dvh, 920px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--text);
}

.log-viewer-dialog::backdrop {
  background: color-mix(in srgb, #020617 68%, transparent);
  backdrop-filter: blur(8px);
}

.log-viewer-shell {
  display: flex;
  overflow: hidden;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: inherit;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)),
    var(--surface);
  box-shadow: var(--shadow-xl);
  flex-direction: column;
}

.log-viewer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.log-viewer-head span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.log-viewer-head h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 20px;
}

.log-viewer-head p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
}

.log-viewer-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

.log-viewer-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.log-viewer-tools .button {
  min-height: 44px;
}

.log-viewer-tools .button.is-active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-raised));
}

.log-viewer-tools [data-log-viewer-issue-nav]:not(:disabled),
.log-viewer-tools [data-log-viewer-issue-copy]:not(:disabled),
.log-viewer-tools [data-log-viewer-issue-export]:not(:disabled) {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
  color: color-mix(in srgb, var(--amber) 72%, var(--text));
  background: color-mix(in srgb, var(--amber-soft) 42%, var(--surface-raised));
}

.log-viewer-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.log-viewer-summary[hidden] {
  display: none;
}

.log-viewer-summary-item {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

button.log-viewer-summary-item {
  min-height: 44px;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
}

button.log-viewer-summary-item:hover,
button.log-viewer-summary-item:focus-visible,
button.log-viewer-summary-item.is-active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-raised));
}

.log-viewer-summary-item strong {
  margin-left: 6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.log-viewer-summary-item[data-kind="error"] {
  border-color: color-mix(in srgb, var(--red) 30%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 58%, var(--surface-raised));
}

.log-viewer-summary-item[data-kind="warn"] {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 58%, var(--surface-raised));
}

.log-viewer-summary-item[data-kind="match"] {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-raised));
}

.log-viewer-jump {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.log-viewer-jump span {
  padding: 0 10px 0 12px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.log-viewer-jump input {
  width: 96px;
  min-height: 42px;
  border: 0;
  border-left: 1px solid var(--border);
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.log-viewer-search {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(8, auto);
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.log-viewer-search-box,
.log-viewer-level,
.log-viewer-context-lines,
.log-viewer-context-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
}

.log-viewer-search-box span,
.log-viewer-level span,
.log-viewer-context-lines span,
.log-viewer-context-toggle span {
  flex: 0 0 auto;
  padding: 0 10px 0 12px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.log-viewer-context-toggle {
  gap: 8px;
  padding: 0 12px;
  cursor: pointer;
}

.log-viewer-context-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.log-viewer-context-toggle span {
  padding: 0;
}

.log-viewer-search-box input,
.log-viewer-level select,
.log-viewer-context-lines input {
  min-height: 42px;
  border: 0;
  border-left: 1px solid var(--border);
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.log-viewer-search-box input {
  width: 100%;
  min-width: 0;
  padding: 0 12px;
}

.log-viewer-level select {
  width: 112px;
  padding: 0 10px;
}

.log-viewer-context-lines input {
  width: 68px;
  min-width: 0;
  padding: 0 8px;
  text-align: center;
}

.log-viewer-search .button {
  min-height: 44px;
}

.log-viewer-status {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}

.log-viewer-status[data-state="loading"] {
  background: color-mix(in srgb, var(--amber-soft) 72%, transparent);
  color: color-mix(in srgb, var(--amber) 82%, var(--text));
}

.log-viewer-status[data-state="error"] {
  background: color-mix(in srgb, var(--red-soft) 72%, transparent);
  color: color-mix(in srgb, var(--red) 86%, var(--text));
}

.log-viewer-lines {
  display: grid;
  align-content: start;
  gap: 1px;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 0 16px;
  overflow: auto;
  background: color-mix(in srgb, var(--border) 58%, transparent);
  list-style: none;
}

.log-viewer-lines[aria-busy="true"] {
  cursor: progress;
}

.log-viewer-lines li {
  display: grid;
  grid-template-columns: 8px auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--surface-raised) 95%, transparent);
}

.log-viewer-lines li[data-masked="1"] {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-raised) 95%, transparent);
}

.log-viewer-lines li[data-context="1"] {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 8%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-raised) 94%, transparent);
}

.log-viewer-lines li[data-match="1"] {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--amber) 17%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-raised) 98%, transparent);
}

.log-viewer-lines li[data-new-line="1"] {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(90deg, color-mix(in srgb, #10b981 20%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-raised) 98%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #10b981 38%, transparent),
    0 10px 24px color-mix(in srgb, #10b981 12%, transparent);
  animation: log-line-pulse 900ms var(--ease) both;
}

.log-viewer-lines li::before {
  width: 8px;
  border-radius: 999px;
  background: var(--text-muted);
  content: "";
}

.log-viewer-lines li[data-match="1"]::before {
  background: var(--amber);
}

.log-viewer-lines li[data-level="ok"]::before {
  background: #10b981;
}

.log-viewer-lines li[data-level="warn"]::before {
  background: #f59e0b;
}

.log-viewer-lines li[data-level="error"]::before {
  background: #ef4444;
}

.log-viewer-lines li.is-focused {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-raised) 98%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent),
    0 12px 28px color-mix(in srgb, var(--primary) 16%, transparent);
  animation: log-line-pulse 900ms var(--ease) both;
}

.log-viewer-line-copy {
  min-width: 44px;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--primary);
  cursor: pointer;
  font: inherit;
}

.log-viewer-line-copy:hover,
.log-viewer-line-copy:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  outline: 0;
}

.log-viewer-lines code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  line-height: 1.65;
}

.log-viewer-lines code mark {
  border-radius: 5px;
  background: color-mix(in srgb, var(--amber) 34%, transparent);
  color: inherit;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 26%, transparent);
}

.log-viewer-match-badge {
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: color-mix(in srgb, var(--amber) 86%, var(--text));
}

.log-viewer-context-badge {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-soft);
}

.log-viewer-new-badge {
  background: color-mix(in srgb, #10b981 16%, transparent);
  color: color-mix(in srgb, #10b981 78%, var(--text));
}

.log-viewer-lines.is-nowrap li {
  min-width: max-content;
}

.log-viewer-lines.is-nowrap code {
  white-space: pre;
  overflow-wrap: normal;
}

.log-viewer-empty {
  display: block !important;
  padding: 24px !important;
  color: var(--text-soft);
  line-height: 1.7;
}

.log-viewer-empty::before {
  display: none;
}

.log-empty-state,
.rd-log-empty-line {
  margin: 16px;
  padding: 22px;
  border: 1px dashed color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  color: var(--text-soft);
}

.log-empty-state strong {
  display: block;
  color: var(--text);
}

.log-empty-state p,
.rd-log-empty-line {
  line-height: 1.7;
}

.log-scan-roots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.log-scan-roots span,
.log-scan-roots code {
  min-height: 28px;
  border-radius: 999px;
}

.log-scan-roots span {
  display: inline-flex;
  align-items: center;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 850;
}

.log-scan-roots code {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  color: var(--text);
  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}

@media (max-width: 920px) {
  .log-toolbar {
    grid-template-columns: 1fr;
  }

  .log-filter-group,
  .log-toolbar-actions {
    justify-content: flex-start;
  }

  .log-section-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .log-center-grid {
    grid-template-columns: 1fr;
  }

  .log-health-panel > header {
    flex-direction: column;
  }

  .log-health-score {
    justify-items: start;
  }

  .log-health-actions {
    justify-content: flex-start;
  }

  .log-health-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .log-health-details,
  .log-health-lists {
    grid-template-columns: 1fr;
  }

  .log-issue-digest > header {
    flex-direction: column;
  }

  .log-file-index > header {
    flex-direction: column;
  }

  .log-utility-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .log-utility-metrics {
    justify-content: flex-start;
  }

  .log-utility-toggle {
    justify-content: center;
  }

  .debug-log-section-head {
    flex-direction: column;
  }

  .debug-log-section-head .button {
    align-self: flex-start;
  }

  .log-file-index-actions {
    justify-content: flex-start;
  }

  .log-file-index-list {
    grid-template-columns: 1fr;
  }

  .log-file-index-tools,
  .log-timeline-tools {
    align-items: stretch;
  }

  .log-file-index-search,
  .log-file-index-filters,
  .log-timeline-search,
  .log-timeline-filters {
    flex-basis: 100%;
  }

  .log-issue-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .log-toolbar {
    border-radius: 20px;
  }

  .log-filter-group button,
  .log-toolbar-actions .button,
  .log-section-nav a,
  .debug-log-section-head .button {
    min-height: 44px;
  }

  .log-section-nav {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .debug-log-section {
    padding: 10px;
    border-radius: 20px;
  }

  .log-utility-head {
    border-radius: 16px;
  }

  .log-utility-metrics b {
    min-height: 32px;
  }

  .log-utility-toggle {
    width: 100%;
    min-height: 44px;
  }

  .log-overview-grid {
    grid-template-columns: 1fr;
  }

  .log-issue-digest {
    border-radius: 20px;
  }

  .log-health-panel {
    border-radius: 20px;
  }

  .log-health-panel > header,
  .log-health-metrics article,
  .log-health-details article,
  .log-health-lists article {
    padding: 15px;
  }

  .log-health-metrics {
    grid-template-columns: 1fr;
  }

  .log-health-score > strong {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    font-size: 27px;
  }

  .log-file-index {
    border-radius: 20px;
  }

  .log-file-index > header,
  .log-file-index-item {
    padding: 15px;
  }

  .log-file-index-item {
    flex-direction: column;
  }

  .log-file-index-search,
  .log-timeline-search {
    min-height: 48px;
  }

  .log-file-index-filters button,
  .log-timeline-filters button {
    min-height: 44px;
  }

  .log-file-index-metrics {
    justify-content: flex-start;
  }

  .log-issue-digest > header,
  .log-issue-list li {
    padding: 15px;
  }

  .log-issue-list li {
    grid-template-columns: 1fr;
  }

  .log-issue-level {
    justify-self: start;
  }

  .log-panel-head,
  .release-log-item > header,
  .rd-log-file > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .release-log-meta {
    justify-items: start;
    text-align: left;
  }

  .release-log-sources {
    justify-content: flex-start;
  }

  .release-log-body {
    max-height: 340px;
  }

  .rd-log-file-tools {
    width: 100%;
    justify-content: space-between;
  }

  .log-entry-copy,
  .log-entry-view {
    width: 44px;
    height: 44px;
  }

  .rd-log-lines li,
  .rd-log-lines li[data-has-line-number="1"] {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .rd-log-line-number,
  .rd-log-lines code {
    grid-column: 2;
  }

  .rd-log-line-number {
    min-width: 0;
    text-align: left;
  }

  .rd-log-mask-badge {
    grid-column: 2;
    justify-self: start;
  }

  .release-log-list,
  .rd-log-file-list {
    padding: 12px;
  }
}

@media (max-width: 720px) {
  .log-viewer-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .log-viewer-shell {
    border-width: 0;
    border-radius: 0;
  }

  .log-viewer-head {
    padding: max(14px, env(safe-area-inset-top)) 14px 12px;
  }

  .log-viewer-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 14px;
  }

  .log-viewer-tools .button,
  .log-viewer-tools .log-viewer-context-lines,
  .log-viewer-jump {
    width: 100%;
  }

  .log-viewer-tools .log-viewer-context-lines input {
    width: 100%;
  }

  .log-viewer-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 14px;
  }

  .log-viewer-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 14px;
  }

  .log-viewer-summary[hidden] {
    display: none;
  }

  .log-viewer-summary-item {
    justify-content: space-between;
    width: 100%;
    min-width: 0;
  }

  .log-viewer-search-box {
    grid-column: 1 / -1;
  }

  .log-viewer-search-box,
  .log-viewer-level,
  .log-viewer-context-lines,
  .log-viewer-context-toggle,
  .log-viewer-search .button {
    width: 100%;
  }

  .log-viewer-level select,
  .log-viewer-context-lines input {
    width: 100%;
  }

  .log-viewer-line-copy {
    min-height: 44px;
  }

  .log-viewer-jump {
    grid-column: 1 / -1;
  }

  .log-viewer-jump input {
    width: 100%;
  }

  .log-viewer-status {
    padding: 9px 14px;
  }

  .log-viewer-lines {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .log-viewer-lines li {
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .log-viewer-lines .rd-log-line-number,
  .log-viewer-lines code,
  .log-viewer-lines .rd-log-mask-badge {
    grid-column: 2;
  }

  .log-viewer-lines .rd-log-line-number {
    min-width: 0;
    text-align: left;
  }
}

@media (max-width: 430px) {
  .log-viewer-head h2 {
    font-size: 18px;
  }

  .log-viewer-tools {
    grid-template-columns: 1fr;
  }

  .log-viewer-search {
    grid-template-columns: 1fr;
  }

  .log-viewer-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .log-viewer-tools .button,
  .log-viewer-search .button {
    justify-content: center;
  }
}

@media (max-width: 390px) {
  .log-viewer-head {
    gap: 10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .log-viewer-head p,
  .log-viewer-status {
    font-size: 12px;
  }

  .log-viewer-tools {
    padding-right: 10px;
    padding-left: 10px;
  }

  .log-viewer-search {
    padding-right: 10px;
    padding-left: 10px;
  }

  .log-viewer-summary {
    grid-template-columns: 1fr;
    padding-right: 10px;
    padding-left: 10px;
  }
}

.workbench {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: var(--radius);
  background: linear-gradient(125deg, #1558c2 0%, #176fdd 58%, #087eaa 100%);
  color: #ffffff;
  box-shadow: 0 18px 35px rgba(24, 92, 190, 0.2);
  animation: enter-up 500ms var(--ease) both;
}

.workbench::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  mask-image: linear-gradient(90deg, transparent 12%, #000 100%);
  pointer-events: none;
}

.workbench > * {
  position: relative;
  z-index: 1;
}

.workbench-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.workbench-kicker {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 750;
}

.workbench h1 {
  margin: 5px 0 0;
  font-size: 25px;
  line-height: 1.25;
}

.workbench h2 {
  margin: 6px 0 0;
  font-size: 25px;
  line-height: 1.25;
}

.workbench-summary {
  margin: 12px 0 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.75;
}

.workbench-inline-action {
  align-self: flex-start;
  min-height: 40px;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: none;
}

.workbench-inline-action:hover {
  background: rgba(255, 255, 255, 0.18);
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  white-space: nowrap;
}

.live-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #91f2ba;
  box-shadow: 0 0 0 4px rgba(145, 242, 186, 0.13);
  animation: live-pulse 2.4s ease-in-out infinite;
}

.quick-create {
  margin-top: 22px;
}

.quick-create.is-disabled {
  opacity: 0.7;
  filter: saturate(0.88);
}

.quick-create.is-disabled .quick-options,
.quick-create.is-disabled .quick-options-summary,
.quick-create.is-disabled .bulk-create-panel,
.quick-create.is-disabled .schedule-helper-card {
  opacity: 0.78;
}

.create-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 430px);
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 23, 58, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.create-mode-switch label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  transition: transform 180ms var(--ease), background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.create-mode-switch label:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.create-mode-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.create-mode-switch input:checked + span,
.create-mode-switch input:checked + span + small {
  color: #0d2a4a;
}

.create-mode-switch label:has(input:checked) {
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 30, 75, 0.2);
}

.create-mode-switch small {
  color: rgba(255, 255, 255, 0.54);
  font-size: 10px;
  font-weight: 700;
}

.bulk-create-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 32%),
    rgba(0, 23, 58, 0.18);
  animation: options-open 220ms var(--ease) both;
}

.bulk-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.bulk-create-actions .button {
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 12px;
}

.bulk-create-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bulk-create-stats {
  display: grid;
  flex: 1 1 320px;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
}

.bulk-create-stat {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.bulk-create-stat small,
.bulk-create-stat strong {
  display: block;
}

.bulk-create-stat small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bulk-create-stat strong {
  margin-top: 6px;
  color: #ffffff;
  font-size: 15px;
}

.bulk-create-panel.is-over-limit {
  border-color: rgba(255, 184, 92, 0.38);
  box-shadow: 0 0 0 1px rgba(255, 184, 92, 0.08);
}

.bulk-create-stat.is-alert {
  border-color: rgba(255, 186, 108, 0.28);
  background: rgba(255, 186, 108, 0.12);
}

.bulk-create-stat.is-alert strong {
  color: #ffe0b6;
}

.bulk-create-stat.is-muted {
  border-color: rgba(158, 205, 255, 0.22);
  background: rgba(158, 205, 255, 0.08);
}

.bulk-create-stat.is-muted strong {
  color: #d4ebff;
}

.bulk-create-stat.is-security {
  border-color: rgba(251, 191, 36, 0.26);
  background: rgba(251, 191, 36, 0.1);
}

.bulk-create-stat.is-security strong {
  color: #fde68a;
}

.bulk-create-helper-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.bulk-create-helper-bar .button {
  min-height: 40px;
  border-radius: 12px;
}

.bulk-create-helper-bar .button[data-batch-security-fix],
.bulk-create-helper-bar .button[data-batch-copy-risks] {
  border-color: color-mix(in srgb, var(--amber) 36%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 13%, var(--surface)) 0%, var(--surface) 62%),
    var(--surface);
  color: color-mix(in srgb, var(--amber) 58%, var(--text));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.bulk-create-helper-bar .button[data-batch-security-fix]:hover,
.bulk-create-helper-bar .button[data-batch-copy-risks]:hover {
  border-color: color-mix(in srgb, var(--amber) 58%, var(--border-strong));
  color: var(--text);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--amber) 18%, transparent);
}

.bulk-create-helper-bar .button[data-batch-undo] {
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 12%, var(--surface)) 0%, var(--surface) 68%),
    var(--surface);
  color: color-mix(in srgb, var(--cyan) 58%, var(--text));
}

.bulk-create-helper-bar .button[data-batch-undo]:hover {
  border-color: color-mix(in srgb, var(--cyan) 56%, var(--border-strong));
  color: var(--text);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--cyan) 16%, transparent);
}

.bulk-create-helper-meta {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.7;
}

.bulk-create-draft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: -2px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 38%),
    rgba(255, 255, 255, 0.06);
  font-size: 11px;
  line-height: 1.55;
}

.bulk-create-draft.is-saving {
  border-color: color-mix(in srgb, var(--amber) 34%, rgba(255, 255, 255, 0.14));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 38%),
    rgba(255, 255, 255, 0.06);
}

.bulk-create-draft span {
  min-width: 0;
}

.bulk-create-draft button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.bulk-create-draft button:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
}

.bulk-create-readiness {
  --batch-readiness: 0%;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 36%),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: cardRise 380ms var(--ease) both;
}

.bulk-create-readiness[data-level="ready"] {
  border-color: color-mix(in srgb, var(--green) 38%, rgba(255, 255, 255, 0.14));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--green) 20%, transparent), transparent 36%),
    rgba(255, 255, 255, 0.06);
}

.bulk-create-readiness[data-level="warn"] {
  border-color: color-mix(in srgb, var(--amber) 42%, rgba(255, 255, 255, 0.14));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--amber) 20%, transparent), transparent 36%),
    rgba(255, 255, 255, 0.06);
}

.bulk-create-readiness[data-level="danger"] {
  border-color: color-mix(in srgb, var(--red) 42%, rgba(255, 255, 255, 0.14));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--red) 18%, transparent), transparent 36%),
    rgba(255, 255, 255, 0.06);
}

.bulk-create-readiness-meter {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(15, 23, 42, 0.72) 0 54%, transparent 56%),
    conic-gradient(color-mix(in srgb, var(--primary) 76%, #ffffff) var(--batch-readiness), rgba(255, 255, 255, 0.13) 0);
}

.bulk-create-readiness[data-level="ready"] .bulk-create-readiness-meter {
  background:
    radial-gradient(circle, rgba(15, 23, 42, 0.72) 0 54%, transparent 56%),
    conic-gradient(color-mix(in srgb, var(--green) 82%, #ffffff) var(--batch-readiness), rgba(255, 255, 255, 0.13) 0);
}

.bulk-create-readiness[data-level="warn"] .bulk-create-readiness-meter {
  background:
    radial-gradient(circle, rgba(15, 23, 42, 0.72) 0 54%, transparent 56%),
    conic-gradient(color-mix(in srgb, var(--amber) 82%, #ffffff) var(--batch-readiness), rgba(255, 255, 255, 0.13) 0);
}

.bulk-create-readiness[data-level="danger"] .bulk-create-readiness-meter {
  background:
    radial-gradient(circle, rgba(15, 23, 42, 0.72) 0 54%, transparent 56%),
    conic-gradient(color-mix(in srgb, var(--red) 82%, #ffffff) var(--batch-readiness), rgba(255, 255, 255, 0.13) 0);
}

.bulk-create-readiness-meter strong,
.bulk-create-readiness-meter span {
  grid-area: 1 / 1;
}

.bulk-create-readiness-meter strong {
  margin-top: -8px;
  color: #ffffff;
  font-size: 18px;
}

.bulk-create-readiness-meter span {
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 800;
}

.bulk-create-readiness-copy {
  min-width: 0;
}

.bulk-create-readiness-copy strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.bulk-create-readiness-copy p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  line-height: 1.6;
}

.bulk-create-readiness-advice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.bulk-create-readiness-advice span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
}

.bulk-create-actions-secondary {
  justify-content: flex-end;
}

.bulk-create-preview {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.bulk-create-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bulk-create-preview-title {
  display: grid;
  min-width: 220px;
  gap: 3px;
}

.bulk-create-preview-head strong {
  color: #ffffff;
  font-size: 13px;
}

.bulk-create-preview-head span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
}

.bulk-create-preview-filters {
  display: flex;
  flex: 1 1 260px;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}

.bulk-create-preview-filters::-webkit-scrollbar {
  display: none;
}

.bulk-create-preview-filters button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.bulk-create-preview-filters button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.bulk-create-preview-filters button.is-active {
  border-color: color-mix(in srgb, var(--primary) 72%, #ffffff 18%);
  color: #ffffff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 84%, #ffffff 8%), color-mix(in srgb, var(--primary) 56%, #0f172a));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}

.bulk-create-preview-filters span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  min-height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  color: inherit;
  background: rgba(255, 255, 255, 0.14);
  font-size: 10px;
}

.bulk-create-preview-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
}

.bulk-create-preview-search::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 76%, #ffffff);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent);
}

.bulk-create-preview-search input {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 32px;
  border: 0;
  outline: 0;
  color: #ffffff;
  background: transparent;
  font: inherit;
  font-size: 12px;
}

.bulk-create-preview-search input::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.bulk-create-preview-search button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.bulk-create-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.bulk-create-preview-actions .button {
  min-height: 36px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
}

.bulk-create-preview-actions .button:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.bulk-create-preview-actions .button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 58%, rgba(255, 255, 255, 0.18));
  color: #ffffff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 64%, transparent), rgba(255, 255, 255, 0.12));
}

.bulk-create-preview-actions .button[data-batch-preview-copy="ready"] {
  border-color: color-mix(in srgb, var(--green) 38%, rgba(255, 255, 255, 0.16));
  color: color-mix(in srgb, var(--green) 70%, #ffffff);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green) 22%, transparent), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.06);
}

.bulk-create-preview-actions .button[data-batch-preview-copy="ready"]:hover {
  border-color: color-mix(in srgb, var(--green) 58%, rgba(255, 255, 255, 0.22));
  color: #ffffff;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--green) 20%, transparent);
}

.bulk-create-preview-actions .button[data-batch-preview-export="risk"] {
  border-color: color-mix(in srgb, var(--red) 40%, rgba(255, 255, 255, 0.16));
  color: color-mix(in srgb, var(--red) 72%, #ffffff);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--red) 20%, transparent), color-mix(in srgb, var(--amber) 11%, transparent)),
    rgba(255, 255, 255, 0.06);
}

.bulk-create-preview-actions .button[data-batch-preview-export="risk"]:hover {
  border-color: color-mix(in srgb, var(--red) 62%, rgba(255, 255, 255, 0.22));
  color: #ffffff;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--red) 18%, transparent);
}

.bulk-create-preview-list {
  display: grid;
  gap: 8px;
}

.bulk-create-preview-item,
.bulk-create-preview-empty,
.bulk-create-preview-more {
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.bulk-create-preview-item.is-invalid {
  border-color: rgba(255, 186, 108, 0.32);
  background: rgba(255, 186, 108, 0.1);
}

.bulk-create-preview-item.is-duplicate {
  border-color: rgba(158, 205, 255, 0.28);
  background: rgba(158, 205, 255, 0.1);
}

.bulk-create-preview-item.is-security-warn {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(251, 191, 36, 0.11);
}

.bulk-create-preview-item.is-security-danger {
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(239, 68, 68, 0.12);
}

.bulk-create-preview-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bulk-create-preview-main strong,
.bulk-create-preview-main span {
  min-width: 0;
}

.bulk-create-preview-main strong {
  color: #ffffff;
  font-size: 12px;
}

.bulk-create-preview-main span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  white-space: nowrap;
}

.bulk-create-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.bulk-create-preview-meta span,
.bulk-create-preview-empty,
.bulk-create-preview-more {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
}

.bulk-create-preview-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.bulk-create-preview-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 9px;
}

.bulk-create-preview-row-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.bulk-create-preview-row-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.bulk-create-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.bulk-create-tips span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 650;
}

.url-entry {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 58px;
  gap: 8px;
  padding: 6px;
  padding-left: 17px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 36, 92, 0.18);
  transition: transform 200ms var(--ease), box-shadow 200ms ease;
}

.url-entry:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 36, 92, 0.24);
}

.url-entry .input-leading {
  color: #8190a4;
}

.url-entry input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 6px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172033;
}

.url-entry input::placeholder {
  color: #8c98a8;
}

.quick-submit {
  min-width: 128px;
  height: 46px;
  background: #112c50;
  color: #ffffff;
}

.quick-submit:hover {
  background: #0b213d;
}

.create-assistant-card {
  display: grid;
  gap: 13px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent);
}

.quick-create > .create-assistant-card {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 96%, #fff 4%), color-mix(in srgb, var(--surface) 96%, #fff 4%));
  color: var(--text);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14), inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent);
}

.create-assistant-style-clean {
  border-color: color-mix(in srgb, var(--primary) 10%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 98%, #fff 2%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent);
}

.quick-create > .create-assistant-card.create-assistant-style-clean {
  border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 98%, #fff 2%);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08), inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent);
}

.create-assistant-style-contrast {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 98%, var(--primary-soft) 18%), var(--surface));
}

.create-assistant-density-compact {
  gap: 10px;
  padding: 11px;
}

.create-assistant-density-comfortable {
  gap: 16px;
  padding: 16px;
}

.field-create-assistant {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.field-create-assistant .create-assistant-card {
  margin-top: 0;
}

.create-assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.create-assistant-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.create-assistant-head small,
.create-assistant-head strong {
  display: block;
}

.create-assistant-head small {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.quick-create > .create-assistant-card .create-assistant-head small {
  color: var(--text-soft);
}

.create-assistant-head strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 14px;
}

.quick-create > .create-assistant-card .create-assistant-head strong {
  color: var(--text);
}

.create-assistant-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 999px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.quick-create > .create-assistant-card .create-assistant-badge {
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
  color: var(--text-soft);
  background: color-mix(in srgb, var(--primary-soft) 54%, var(--surface-raised));
}

.create-assistant-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 780;
  transition: transform 160ms var(--ease), border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.create-assistant-toggle:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 52%, var(--surface-raised));
  color: var(--primary);
}

.create-assistant-toggle .icon {
  width: 14px;
  height: 14px;
  transition: transform 160ms var(--ease);
}

.create-assistant-card.is-collapsed {
  gap: 0;
}

.create-assistant-card.is-collapsed .create-assistant-toggle .icon {
  transform: rotate(-90deg);
}

.create-assistant-body {
  display: grid;
  gap: 13px;
  min-width: 0;
}

.create-assistant-density-compact .create-assistant-body {
  gap: 10px;
}

.create-assistant-density-comfortable .create-assistant-body {
  gap: 16px;
}

.create-assistant-body[hidden] {
  display: none;
}

.create-assistant-mini {
  --create-mini-columns: 4;
  --create-mini-mobile-columns: 2;
  display: none;
  min-width: 0;
}

.create-assistant-card.is-collapsed .create-assistant-mini {
  display: grid;
  grid-template-columns: repeat(var(--create-mini-columns), minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.create-assistant-summary-cols-1 .create-assistant-mini {
  --create-mini-columns: 1;
}

.create-assistant-summary-cols-2 .create-assistant-mini {
  --create-mini-columns: 2;
}

.create-assistant-summary-cols-3 .create-assistant-mini {
  --create-mini-columns: 3;
}

.create-assistant-summary-cols-4 .create-assistant-mini {
  --create-mini-columns: 4;
}

.create-assistant-summary-mobile-cols-1 .create-assistant-mini {
  --create-mini-mobile-columns: 1;
}

.create-assistant-summary-mobile-cols-2 .create-assistant-mini {
  --create-mini-mobile-columns: 2;
}

.create-assistant-summary-mobile-cols-3 .create-assistant-mini {
  --create-mini-mobile-columns: 3;
}

.create-assistant-summary-mobile-cols-4 .create-assistant-mini {
  --create-mini-mobile-columns: 4;
}

.create-assistant-mini span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 94%, var(--primary-soft));
}

.create-assistant-style-clean .create-assistant-mini span {
  border-color: color-mix(in srgb, var(--primary) 8%, var(--border));
  background: var(--surface);
}

.create-assistant-density-compact .create-assistant-mini span {
  padding: 7px 8px;
}

.create-assistant-mini span[data-create-mini-target] {
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}

.create-assistant-mini span[data-create-mini-target]:hover,
.create-assistant-mini span[data-create-mini-target]:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--primary-soft));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 12%, transparent);
}

.create-assistant-mini span[data-level="ok"] {
  border-color: color-mix(in srgb, var(--green) 26%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 66%, var(--surface-raised));
}

.create-assistant-mini span[data-level="warn"] {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 66%, var(--surface-raised));
}

.create-assistant-mini span[data-level="danger"] {
  border-color: color-mix(in srgb, var(--red) 32%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 68%, var(--surface-raised));
}

.create-assistant-mini strong,
.create-assistant-mini small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-assistant-mini strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.15;
}

.create-assistant-mini small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.create-draft-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 36%),
    color-mix(in srgb, var(--primary) 7%, var(--surface-raised));
  box-shadow: 0 16px 42px color-mix(in srgb, var(--primary) 12%, transparent);
  animation: cardRise 420ms var(--ease) both;
}

.quick-create > .create-assistant-card .create-draft-panel {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 36%),
    color-mix(in srgb, var(--primary-soft) 38%, var(--surface-raised));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 10%, transparent);
}

.create-draft-panel strong,
.create-draft-panel small {
  display: block;
}

.create-draft-panel strong {
  color: var(--text);
  font-size: 13px;
}

.quick-create > .create-assistant-card .create-draft-panel strong {
  color: var(--text);
}

.create-draft-panel small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.quick-create > .create-assistant-card .create-draft-panel small {
  color: var(--text-soft);
}

.create-draft-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.create-draft-button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 68%, #0f766e));
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  transition: transform 180ms var(--ease), filter 180ms ease, border-color 180ms ease;
}

.create-draft-button.is-muted {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-raised) 86%, var(--primary));
}

.quick-create > .create-assistant-card .create-draft-button.is-muted {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-raised);
}

.create-draft-button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.create-score {
  --score-deg: 0deg;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--primary-soft) 28%, var(--surface)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent);
}

.quick-create > .create-assistant-card .create-score {
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 94%, var(--primary-soft));
}

.create-score-ring {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface-raised) 54%, transparent 55%),
    conic-gradient(#10b981 var(--score-deg), color-mix(in srgb, var(--border) 70%, transparent) 0);
}

.quick-create > .create-assistant-card .create-score-ring {
  background:
    radial-gradient(circle, var(--surface-raised) 54%, transparent 55%),
    conic-gradient(#10b981 var(--score-deg), color-mix(in srgb, var(--border) 70%, transparent) 0);
}

.create-score[data-level="warn"] .create-score-ring {
  background:
    radial-gradient(circle, var(--surface-raised) 54%, transparent 55%),
    conic-gradient(#f59e0b var(--score-deg), color-mix(in srgb, var(--border) 70%, transparent) 0);
}

.create-score[data-level="danger"] .create-score-ring {
  background:
    radial-gradient(circle, var(--surface-raised) 54%, transparent 55%),
    conic-gradient(#ef4444 var(--score-deg), color-mix(in srgb, var(--border) 70%, transparent) 0);
}

.create-score-ring strong,
.create-score-ring span,
.create-score-copy strong,
.create-score-copy span {
  display: block;
}

.create-score-ring strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.quick-create > .create-assistant-card .create-score-ring strong {
  color: var(--text);
}

.create-score-ring span {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 10px;
}

.quick-create > .create-assistant-card .create-score-ring span {
  color: var(--text-soft);
}

.create-score-copy strong {
  color: var(--text);
  font-size: 13px;
}

.quick-create > .create-assistant-card .create-score-copy strong {
  color: var(--text);
}

.create-score-copy span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.quick-create > .create-assistant-card .create-score-copy span {
  color: var(--text-soft);
}

.create-check-grid {
  --create-check-columns: 4;
  --create-check-mobile-columns: 2;
  display: grid;
  grid-template-columns: repeat(var(--create-check-columns), minmax(0, 1fr));
  gap: 9px;
}

.create-assistant-cols-1 .create-check-grid {
  --create-check-columns: 1;
}

.create-assistant-cols-2 .create-check-grid {
  --create-check-columns: 2;
}

.create-assistant-cols-3 .create-check-grid {
  --create-check-columns: 3;
}

.create-assistant-cols-4 .create-check-grid {
  --create-check-columns: 4;
}

.create-assistant-cols-5 .create-check-grid {
  --create-check-columns: 5;
}

.create-assistant-cols-6 .create-check-grid {
  --create-check-columns: 6;
}

.create-assistant-mobile-cols-1 .create-check-grid {
  --create-check-mobile-columns: 1;
}

.create-assistant-mobile-cols-2 .create-check-grid {
  --create-check-mobile-columns: 2;
}

.create-assistant-mobile-cols-3 .create-check-grid {
  --create-check-mobile-columns: 3;
}

.create-check-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent);
  transition: transform 180ms var(--ease), border-color 180ms ease, background-color 180ms ease;
}

.quick-create > .create-assistant-card .create-check-item {
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 94%, var(--primary-soft));
}

.create-assistant-style-clean .create-check-item,
.quick-create > .create-assistant-card.create-assistant-style-clean .create-check-item {
  border-color: color-mix(in srgb, var(--primary) 8%, var(--border));
  background: color-mix(in srgb, var(--surface) 98%, #fff 2%);
  box-shadow: none;
}

.create-assistant-style-clean .create-check-item[data-level="muted"],
.quick-create > .create-assistant-card.create-assistant-style-clean .create-check-item[data-level="muted"] {
  border-color: color-mix(in srgb, var(--primary) 8%, var(--border));
  background: var(--surface);
}

.create-assistant-style-contrast .create-check-item[data-level="muted"] {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 38%, var(--surface-raised));
}

.create-assistant-density-compact .create-check-grid {
  gap: 7px;
}

.create-assistant-density-compact .create-check-item {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  padding: 8px;
}

.create-assistant-density-compact .create-check-item > span {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.create-assistant-density-compact .create-check-item small {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35;
  -webkit-line-clamp: 1;
}

.create-assistant-density-comfortable .create-check-item {
  padding: 12px;
}

.create-check-item > span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.quick-create > .create-assistant-card .create-check-item > span {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.create-check-item .icon {
  width: 15px;
  height: 15px;
}

.create-check-item strong,
.create-check-item small {
  display: block;
  min-width: 0;
}

.create-check-item strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-create > .create-assistant-card .create-check-item strong {
  color: var(--text);
}

.create-check-item small {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quick-create > .create-assistant-card .create-check-item small {
  color: var(--text-soft);
}

.create-check-item[data-level="ok"] {
  border-color: color-mix(in srgb, #10b981 34%, var(--border));
  background: color-mix(in srgb, #10b981 8%, var(--surface));
}

.create-check-item[data-level="warn"] {
  border-color: color-mix(in srgb, #f59e0b 38%, var(--border));
  background: color-mix(in srgb, #f59e0b 9%, var(--surface));
}

.create-check-item[data-level="danger"] {
  border-color: color-mix(in srgb, #ef4444 38%, var(--border));
  background: color-mix(in srgb, #ef4444 9%, var(--surface));
}

.create-check-item[data-level="muted"] {
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 96%, var(--primary-soft));
}

.quick-create > .create-assistant-card .create-check-item[data-level="ok"] {
  border-color: rgba(145, 242, 186, 0.3);
  background: rgba(16, 185, 129, 0.12);
}

.quick-create > .create-assistant-card .create-check-item[data-level="warn"] {
  border-color: rgba(255, 205, 124, 0.34);
  background: rgba(245, 158, 11, 0.13);
}

.quick-create > .create-assistant-card .create-check-item[data-level="danger"] {
  border-color: rgba(255, 138, 138, 0.34);
  background: rgba(239, 68, 68, 0.13);
}

.create-assistant-style-clean .create-check-item[data-level="muted"],
.quick-create > .create-assistant-card.create-assistant-style-clean .create-check-item[data-level="muted"] {
  border-color: color-mix(in srgb, var(--primary) 8%, var(--border));
  background: var(--surface);
}

.create-slug-suggestions,
.create-title-suggestions,
.create-url-tools,
.create-security-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.create-slug-suggestions > span,
.create-title-suggestions > span,
.create-url-tools > span,
.create-security-head span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 750;
}

.quick-create > .create-assistant-card .create-slug-suggestions > span,
.quick-create > .create-assistant-card .create-title-suggestions > span,
.quick-create > .create-assistant-card .create-url-tools > span,
.quick-create > .create-assistant-card .create-security-head span {
  color: var(--text-soft);
}

.create-slug-suggestions > div,
.create-title-suggestions > div,
.create-url-tools > div,
.create-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.create-slug-chip,
.create-title-chip,
.create-url-tool-chip,
.create-preset-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-raised));
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  transition: transform 180ms var(--ease), background-color 180ms ease, border-color 180ms ease;
}

.quick-create > .create-assistant-card .create-slug-chip,
.quick-create > .create-assistant-card .create-title-chip,
.quick-create > .create-assistant-card .create-url-tool-chip,
.quick-create > .create-assistant-card .create-preset-chip {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-raised));
}

.create-slug-chip:hover,
.create-title-chip:hover,
.create-url-tool-chip:hover,
.create-preset-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-raised));
}

.create-utility-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.quick-create > .create-assistant-card .create-utility-panel {
  border-color: color-mix(in srgb, var(--primary) 15%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 94%, var(--primary-soft));
}

.create-utility-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.create-utility-head-actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.create-utility-head span,
.create-utility-head small {
  display: block;
}

.create-utility-head span {
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.quick-create > .create-assistant-card .create-utility-head span {
  color: var(--text);
}

.create-utility-head small {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.5;
}

.quick-create > .create-assistant-card .create-utility-head small {
  color: var(--text-soft);
}

.create-utility-copy,
.create-utility-toggle,
.create-utility-brief button,
.create-utility-actions button,
.create-utm-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-raised) 90%, var(--primary-soft));
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  transition: transform 180ms var(--ease), border-color 180ms ease, background-color 180ms ease;
}

.quick-create > .create-assistant-card .create-utility-copy,
.quick-create > .create-assistant-card .create-utility-toggle,
.quick-create > .create-assistant-card .create-utility-brief button,
.quick-create > .create-assistant-card .create-utility-actions button,
.quick-create > .create-assistant-card .create-utm-actions button {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--surface-raised) 90%, var(--primary-soft));
}

.create-utility-copy:hover,
.create-utility-toggle:hover,
.create-utility-brief button:hover,
.create-utility-actions button:hover,
.create-utm-actions button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-raised));
}

.create-utility-copy .icon,
.create-utility-toggle .icon,
.create-utility-brief .icon,
.create-utility-actions .icon {
  width: 14px;
  height: 14px;
}

.create-utility-toggle .icon {
  transition: transform 160ms var(--ease);
}

.create-utility-panel.is-collapsed .create-utility-toggle .icon {
  transform: rotate(-90deg);
}

.create-utility-body {
  display: grid;
  gap: 10px;
}

.create-utility-body[hidden] {
  display: none;
}

.create-utility-brief {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.create-utility-brief[hidden] {
  display: none;
}

.create-utility-actions,
.create-utm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.create-utm-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.create-utm-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.create-utm-grid span {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 780;
}

.quick-create > .create-assistant-card .create-utm-grid span {
  color: var(--text-soft);
}

.create-utm-grid input {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 8px;
  outline: 0;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--text);
  font-size: 12px;
}

.quick-create > .create-assistant-card .create-utm-grid input {
  border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
  background: var(--surface-raised);
  color: var(--text);
}

.create-utm-grid input:focus {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.create-intent-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.create-intent-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 720;
}

.quick-create > .create-assistant-card .create-intent-summary span {
  border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--primary-soft));
  color: var(--text-soft);
}

.create-security-panel {
  display: grid;
  align-items: stretch;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 82%, transparent);
}

.quick-create > .create-assistant-card .create-security-panel {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-raised) 92%, var(--primary-soft));
}

.create-security-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.create-security-head small {
  color: var(--text-soft);
  font-size: 11px;
}

.quick-create > .create-assistant-card .create-security-head small {
  color: var(--text-soft);
}

.create-security-list {
  display: grid;
  gap: 8px;
}

.create-security-item {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
}

.create-security-item strong,
.create-security-item small {
  display: block;
  overflow-wrap: anywhere;
}

.create-security-item strong {
  color: var(--text);
  font-size: 12px;
}

.create-security-item small {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.55;
}

.create-security-item[data-level="ok"] {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 65%, var(--surface-raised));
}

.create-security-item[data-level="warn"] {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 68%, var(--surface-raised));
}

.create-security-item[data-level="danger"] {
  border-color: color-mix(in srgb, var(--red) 30%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 68%, var(--surface-raised));
}

.quick-create > .create-assistant-card .create-security-item {
  border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
}

.quick-create > .create-assistant-card .create-security-item strong {
  color: var(--text);
}

.quick-create > .create-assistant-card .create-security-item small {
  color: var(--text-soft);
}

.create-duplicate-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 25%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 8%, var(--surface));
}

.quick-create > .create-assistant-card .create-duplicate-panel {
  border-color: color-mix(in srgb, #f59e0b 25%, var(--border));
  background: color-mix(in srgb, #f59e0b 8%, var(--surface-raised));
}

.create-duplicate-head,
.create-duplicate-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.create-duplicate-head span {
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
}

.create-duplicate-head small {
  color: var(--text-soft);
  font-size: 11px;
}

.quick-create > .create-assistant-card .create-duplicate-head span {
  color: var(--text);
}

.quick-create > .create-assistant-card .create-duplicate-head small {
  color: var(--text-soft);
}

.create-duplicate-list {
  display: grid;
  gap: 8px;
}

.create-duplicate-item {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
}

.quick-create > .create-assistant-card .create-duplicate-item {
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
}

.create-duplicate-copy {
  min-width: 0;
}

.create-duplicate-copy strong,
.create-duplicate-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-duplicate-copy strong {
  color: var(--text);
  font-size: 12px;
}

.create-duplicate-copy small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.quick-create > .create-assistant-card .create-duplicate-copy strong {
  color: var(--text);
}

.quick-create > .create-assistant-card .create-duplicate-copy small {
  color: var(--text-muted);
}

.create-duplicate-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}

.create-duplicate-actions .icon-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
}

@media (max-width: 960px) {
  .create-check-grid {
    grid-template-columns: repeat(var(--create-check-mobile-columns), minmax(0, 1fr));
  }

  .create-assistant-card.is-collapsed .create-assistant-mini {
    grid-template-columns: repeat(var(--create-mini-mobile-columns), minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .create-assistant-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .create-assistant-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .create-assistant-badge,
  .create-assistant-toggle {
    min-height: 32px;
  }

  .create-draft-panel {
    grid-template-columns: 1fr;
  }

  .create-draft-actions {
    justify-content: stretch;
  }

  .create-draft-button {
    flex: 1 1 120px;
    min-height: 44px;
  }

  .create-score {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .create-score-ring {
    width: 56px;
    height: 56px;
  }

  .create-check-grid {
    grid-template-columns: repeat(var(--create-check-mobile-columns), minmax(0, 1fr));
  }

  .create-assistant-card.is-collapsed .create-assistant-mini {
    grid-template-columns: repeat(var(--create-mini-mobile-columns), minmax(0, 1fr));
  }

  .create-slug-chip,
  .create-title-chip,
  .create-url-tool-chip,
  .create-preset-chip {
    min-height: 44px;
  }

  .create-utility-head {
    align-items: stretch;
    flex-direction: column;
  }

  .create-utility-copy,
  .create-utility-toggle,
  .create-utility-brief button,
  .create-utility-actions button,
  .create-utm-actions button {
    min-height: 42px;
  }

  .create-utility-head-actions {
    justify-content: stretch;
  }

  .create-utility-head-actions > *,
  .create-utility-brief button,
  .create-utility-actions button,
  .create-utm-actions button {
    flex: 1 1 120px;
  }

  .create-utm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .create-duplicate-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .create-duplicate-actions .icon-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

.quick-options-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.77);
  cursor: pointer;
  font-size: 12px;
}

.quick-options-toggle .icon {
  width: 15px;
  height: 15px;
}

.quick-options-toggle .icon:last-child {
  margin-left: 2px;
  transition: transform 180ms var(--ease);
}

.quick-options-toggle[aria-expanded="true"] .icon:last-child {
  transform: rotate(180deg);
}

.quick-options-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  cursor: pointer;
}

.quick-options-summary[hidden] {
  display: none;
}

.quick-options-summary span {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.quick-options-summary span[data-active="1"] {
  border-color: rgba(145, 242, 186, 0.34);
  background: rgba(145, 242, 186, 0.14);
}

.quick-options-summary small,
.quick-options-summary strong {
  display: block;
  min-width: 0;
}

.quick-options-summary small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.1;
}

.quick-options-summary strong {
  margin-top: 4px;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-options-summary:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.32);
  outline-offset: 3px;
}

.quick-options {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(190px, 0.9fr);
  gap: 12px;
  margin-top: 13px;
  animation: options-open 220ms var(--ease) both;
}

.quick-options > .advanced-link-card {
  grid-column: 1 / -1;
}

.schedule-helper-card {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 12%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent);
}

.schedule-helper-card::after {
  position: absolute;
  inset: auto -18% -52% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 12%, transparent), transparent 64%);
  pointer-events: none;
}

.schedule-helper-card[data-state="success"] {
  border-color: color-mix(in srgb, #10b981 34%, var(--border));
}

.schedule-helper-card[data-state="danger"] {
  border-color: color-mix(in srgb, #ef4444 42%, var(--border));
}

.schedule-helper-card[data-state="info"] {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.schedule-helper-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.schedule-helper-head small {
  display: block;
  margin-bottom: 5px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

.schedule-helper-head strong {
  display: block;
  color: var(--text);
  font-size: 15px;
}

.schedule-helper-clear {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 84%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}

.schedule-helper-clear:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  color: var(--text);
}

.schedule-helper-summary {
  position: relative;
  z-index: 1;
  margin: 13px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.75;
}

.schedule-helper-badges,
.schedule-helper-preset-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.schedule-helper-badges {
  margin-top: 12px;
}

.schedule-helper-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 58%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.schedule-helper-badge.is-primary,
.schedule-helper-badge.is-info {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  color: color-mix(in srgb, var(--primary) 84%, var(--text));
}

.schedule-helper-badge.is-success {
  border-color: rgba(16, 185, 129, 0.24);
  color: #047857;
}

.schedule-helper-badge.is-danger {
  border-color: rgba(239, 68, 68, 0.22);
  color: #b91c1c;
}

.schedule-helper-badge.is-muted {
  opacity: .88;
}

.schedule-helper-preset-list {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.schedule-helper-preset-group {
  display: grid;
  gap: 10px;
}

.schedule-helper-preset-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.schedule-helper-toolbar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface-raised)), color-mix(in srgb, var(--surface-raised) 94%, transparent));
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 10%, transparent);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, background-color 180ms ease;
}

.schedule-helper-toolbar-action:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 14%, transparent);
}

.schedule-helper-preset-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.schedule-helper-preset-group-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.schedule-helper-preset-group small {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

.schedule-helper-preset-group-actions span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.schedule-helper-preset-search {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  min-width: 176px;
  flex: 0 1 200px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 8%, transparent);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.schedule-helper-preset-search:focus-within {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 12%, transparent);
}

.schedule-helper-preset-search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.schedule-helper-preset-search-input::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
}

.schedule-helper-preset-group-action,
.schedule-helper-preset-group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, background-color 160ms ease;
}

.schedule-helper-preset-group-action:hover,
.schedule-helper-preset-group-toggle:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  color: var(--text);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 10%, transparent);
}

.schedule-helper-preset-group-action.is-danger {
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border));
  color: color-mix(in srgb, var(--danger) 84%, var(--text));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-raised));
}

.schedule-helper-preset-group-action.is-danger:hover {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  color: color-mix(in srgb, var(--danger) 92%, var(--text));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--danger) 14%, transparent);
}

.schedule-helper-preset-group-action.is-active {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-raised));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 14%, transparent);
}

.schedule-helper-preset-group-body {
  display: grid;
  gap: 10px;
  max-height: 1200px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 240ms var(--ease), opacity 180ms var(--ease), transform 240ms var(--ease);
}

.schedule-helper-preset-group.is-collapsed .schedule-helper-preset-group-body {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.schedule-helper-preset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.schedule-helper-preset-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule-preset-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  color: var(--text);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.schedule-preset-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 12%, transparent);
}

.schedule-preset-button.is-smart {
  border-style: dashed;
}

.schedule-preset-button.is-custom {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
}

.schedule-preset-button.is-pinned {
  border-color: color-mix(in srgb, var(--amber) 48%, var(--primary));
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber-soft) 88%, var(--surface-raised)) 0%, color-mix(in srgb, var(--primary-soft) 72%, var(--surface-raised)) 100%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--amber) 12%, transparent);
}

.schedule-preset-favorite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.schedule-preset-favorite-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px);
}

.schedule-preset-favorite:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  color: var(--text);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 10%, transparent);
}

.schedule-preset-favorite.is-active {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-raised));
  color: color-mix(in srgb, var(--primary) 84%, var(--text));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 12%, transparent);
}

.schedule-preset-chip-tools {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.schedule-preset-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, background-color 160ms ease;
}

.schedule-preset-tool:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  color: var(--text);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 10%, transparent);
}

.schedule-preset-tool.is-active {
  border-color: color-mix(in srgb, var(--amber) 44%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 84%, var(--surface-raised));
  color: color-mix(in srgb, var(--amber) 90%, var(--text));
}

.schedule-preset-tool.is-copy {
  border-color: color-mix(in srgb, var(--cyan) 26%, var(--border));
  background: color-mix(in srgb, var(--cyan-soft) 78%, var(--surface-raised));
}

.schedule-helper-preset-empty {
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 76%, transparent);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.75;
}

.schedule-helper-card-workbench {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(circle at top right, rgba(114, 205, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(8, 32, 67, 0.30), rgba(3, 18, 39, 0.24));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.schedule-helper-card-workbench .schedule-helper-head small,
.schedule-helper-card-workbench .schedule-helper-clear,
.schedule-helper-card-workbench .schedule-helper-badge,
.schedule-helper-card-workbench .schedule-helper-summary,
.schedule-helper-card-workbench .schedule-helper-preset-group small,
.schedule-helper-card-workbench .schedule-helper-preset-group-actions span,
.schedule-helper-card-workbench .schedule-helper-preset-empty {
  color: rgba(255, 255, 255, 0.88);
}

.schedule-helper-card-workbench .schedule-helper-head small,
.schedule-helper-card-workbench .schedule-helper-preset-group small,
.schedule-helper-card-workbench .schedule-helper-preset-group-actions span {
  color: rgba(255, 255, 255, 0.58);
}

.schedule-helper-card-workbench .schedule-helper-head strong {
  color: #fff;
}

.schedule-helper-card-workbench .schedule-helper-clear,
.schedule-helper-card-workbench .schedule-helper-badge,
.schedule-helper-card-workbench .schedule-preset-button,
.schedule-helper-card-workbench .schedule-preset-favorite,
.schedule-helper-card-workbench .schedule-preset-tool,
.schedule-helper-card-workbench .schedule-helper-preset-group-action,
.schedule-helper-card-workbench .schedule-helper-preset-group-toggle,
.schedule-helper-card-workbench .schedule-helper-preset-empty {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

.schedule-helper-card-workbench .schedule-helper-badge.is-primary,
.schedule-helper-card-workbench .schedule-helper-badge.is-info,
.schedule-helper-card-workbench .schedule-preset-button,
.schedule-helper-card-workbench .schedule-preset-favorite,
.schedule-helper-card-workbench .schedule-preset-tool,
.schedule-helper-card-workbench .schedule-helper-preset-group-action,
.schedule-helper-card-workbench .schedule-helper-preset-group-toggle {
  color: rgba(255, 255, 255, 0.95);
}

.schedule-helper-card-workbench .schedule-preset-favorite.is-active {
  border-color: rgba(114, 205, 255, 0.42);
  background: rgba(114, 205, 255, 0.18);
  color: #fff;
}

.schedule-preset-tool.is-color-tag {
  min-width: 54px;
}

.schedule-preset-button.is-color-blue,
.schedule-preset-tool.is-color-tag.is-color-blue,
.schedule-helper-preset-group-action.is-color-blue {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface-raised));
  color: color-mix(in srgb, var(--primary) 88%, var(--text));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 12%, transparent);
}

.schedule-preset-button.is-color-emerald,
.schedule-preset-tool.is-color-tag.is-color-emerald,
.schedule-helper-preset-group-action.is-color-emerald {
  border-color: color-mix(in srgb, var(--green) 38%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 84%, var(--surface-raised));
  color: color-mix(in srgb, var(--green) 88%, var(--text));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--green) 12%, transparent);
}

.schedule-preset-button.is-color-amber,
.schedule-preset-tool.is-color-tag.is-color-amber,
.schedule-helper-preset-group-action.is-color-amber {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 86%, var(--surface-raised));
  color: color-mix(in srgb, var(--amber) 92%, var(--text));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--amber) 12%, transparent);
}

.schedule-preset-button.is-color-rose,
.schedule-preset-tool.is-color-tag.is-color-rose,
.schedule-helper-preset-group-action.is-color-rose {
  border-color: color-mix(in srgb, var(--red) 38%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 86%, var(--surface-raised));
  color: color-mix(in srgb, var(--red) 90%, var(--text));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--red) 12%, transparent);
}

.schedule-preset-button.is-color-violet,
.schedule-preset-tool.is-color-tag.is-color-violet,
.schedule-helper-preset-group-action.is-color-violet {
  border-color: color-mix(in srgb, #7c3aed 40%, var(--border));
  background: color-mix(in srgb, #efe7ff 86%, var(--surface-raised));
  color: color-mix(in srgb, #7c3aed 90%, var(--text));
  box-shadow: 0 12px 24px color-mix(in srgb, #7c3aed 12%, transparent);
}

.schedule-preset-button.is-color-slate,
.schedule-preset-tool.is-color-tag.is-color-slate,
.schedule-helper-preset-group-action.is-color-slate {
  border-color: color-mix(in srgb, #64748b 36%, var(--border));
  background: color-mix(in srgb, #edf2f7 88%, var(--surface-raised));
  color: color-mix(in srgb, #475569 92%, var(--text));
  box-shadow: 0 12px 24px color-mix(in srgb, #64748b 10%, transparent);
}

.schedule-helper-card-workbench .schedule-helper-badge.is-success {
  color: #d1fae5;
  border-color: rgba(167, 243, 208, 0.26);
}

.schedule-helper-card-workbench .schedule-helper-badge.is-danger {
  color: #fee2e2;
  border-color: rgba(252, 165, 165, 0.26);
}

.workbench-field > span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 650;
}

.workbench-field input {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  outline: 0;
  background: rgba(0, 25, 65, 0.18);
  color: #ffffff;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.workbench-field input::placeholder {
  color: rgba(255, 255, 255, 0.46);
}

.workbench-field input:focus {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(0, 25, 65, 0.27);
}

.workbench-field textarea {
  width: 100%;
  min-height: 132px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  outline: 0;
  background: rgba(0, 25, 65, 0.2);
  color: #ffffff;
  resize: vertical;
  line-height: 1.7;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.workbench-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.46);
}

.workbench-field textarea:focus {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(0, 25, 65, 0.29);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.workbench .prefix-input {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 25, 65, 0.18);
}

.workbench .prefix-input span {
  color: rgba(255, 255, 255, 0.6);
}

.workbench .prefix-input input {
  border: 0;
  background: transparent;
}

.create-result {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--green-soft) 70%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--green-soft) 42%, var(--surface-soft)));
  box-shadow: 0 18px 36px color-mix(in srgb, var(--green) 8%, transparent);
  animation: result-in 280ms var(--ease) both;
}

.create-result-main,
.create-result-heading,
.result-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.create-result-main {
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.create-result-heading {
  align-items: center;
}

.result-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: color-mix(in srgb, var(--green-soft) 86%, var(--surface-raised));
  color: var(--green);
}

.create-result small,
.create-result strong {
  display: block;
}

.create-result small {
  color: var(--text-soft);
  font-size: 10px;
}

.create-result strong {
  overflow: hidden;
  margin-top: 1px;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-result-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.create-result-meta,
.create-result-error {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.create-result-meta {
  color: var(--text-soft);
}

.create-result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.create-result-stat {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--green) 16%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
}

.create-result-stat span,
.create-result-stat strong {
  display: block;
}

.create-result-stat span {
  color: var(--text-soft);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.create-result-stat strong {
  margin-top: 6px;
  color: var(--text);
  font-size: 15px;
}

.create-result-error {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 36%, var(--border));
  border-radius: 12px;
  color: color-mix(in srgb, var(--amber) 88%, var(--text));
  background: color-mix(in srgb, var(--amber-soft) 74%, var(--surface-raised));
}

.create-result-error-details {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--amber-soft) 72%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface-raised) 90%, transparent);
}

.create-result-error-details-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.create-result-error-details-head strong,
.create-result-error-details-head span {
  color: var(--text);
}

.create-result-error-details-head span {
  font-size: 11px;
  opacity: 0.72;
}

.create-result-error-details-head button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--amber) 86%, var(--text));
  background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface-raised));
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 180ms var(--ease),
    background 180ms var(--ease),
    transform 180ms var(--ease),
    box-shadow 180ms var(--ease);
}

.create-result-error-details-head button:hover,
.create-result-error-details-head button:focus-visible {
  border-color: color-mix(in srgb, var(--amber) 48%, var(--border-strong));
  background: color-mix(in srgb, var(--amber-soft) 92%, var(--surface-raised));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--amber) 12%, transparent);
  transform: translateY(-1px);
}

.create-result-error-details-head button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--amber) 44%, transparent);
  outline-offset: 2px;
}

.create-result-error-details-head button[data-created-result-action="retry-errors"] {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  color: color-mix(in srgb, var(--green) 88%, var(--text));
  background: color-mix(in srgb, var(--green-soft) 76%, var(--surface-raised));
}

.create-result-error-details-head button[data-created-result-action="retry-errors"]:hover,
.create-result-error-details-head button[data-created-result-action="retry-errors"]:focus-visible {
  border-color: color-mix(in srgb, var(--green) 46%, var(--border-strong));
  background: color-mix(in srgb, var(--green-soft) 92%, var(--surface-raised));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--green) 12%, transparent);
}

.create-result-error-details-head button[data-created-result-action="copy-retry-lines"] {
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--border));
  color: color-mix(in srgb, var(--cyan) 88%, var(--text));
  background: color-mix(in srgb, var(--cyan-soft) 76%, var(--surface-raised));
}

.create-result-error-details-head button[data-created-result-action="copy-retry-lines"]:hover,
.create-result-error-details-head button[data-created-result-action="copy-retry-lines"]:focus-visible {
  border-color: color-mix(in srgb, var(--cyan) 46%, var(--border-strong));
  background: color-mix(in srgb, var(--cyan-soft) 92%, var(--surface-raised));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--cyan) 12%, transparent);
}

.create-result-error-details-head button[data-created-result-action="download-retry-txt"] {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
  color: color-mix(in srgb, var(--amber) 90%, var(--text));
  background: color-mix(in srgb, var(--amber-soft) 78%, var(--surface-raised));
}

.create-result-error-details-head button[data-created-result-action="download-retry-txt"]:hover,
.create-result-error-details-head button[data-created-result-action="download-retry-txt"]:focus-visible {
  border-color: color-mix(in srgb, var(--amber) 50%, var(--border-strong));
  background: color-mix(in srgb, var(--amber-soft) 94%, var(--surface-raised));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--amber) 13%, transparent);
}

.create-result-error-details-head button[data-created-result-action="download-error-csv"] {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border));
  color: color-mix(in srgb, var(--red) 88%, var(--text));
  background: color-mix(in srgb, var(--red-soft) 76%, var(--surface-raised));
}

.create-result-error-details-head button[data-created-result-action="download-error-csv"]:hover,
.create-result-error-details-head button[data-created-result-action="download-error-csv"]:focus-visible {
  border-color: color-mix(in srgb, var(--red) 46%, var(--border-strong));
  background: color-mix(in srgb, var(--red-soft) 92%, var(--surface-raised));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--red) 12%, transparent);
}

.create-result-error-details-head button[data-created-result-action="copy-error-summary"],
.create-result-error-details-head button[data-created-result-action="download-error-summary-csv"],
.create-result-error-details-head button[data-created-result-action="locate-first-error"] {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  color: color-mix(in srgb, var(--primary) 88%, var(--text));
  background: color-mix(in srgb, var(--primary-soft) 76%, var(--surface-raised));
}

.create-result-error-details-head button[data-created-result-action="copy-error-summary"]:hover,
.create-result-error-details-head button[data-created-result-action="copy-error-summary"]:focus-visible,
.create-result-error-details-head button[data-created-result-action="download-error-summary-csv"]:hover,
.create-result-error-details-head button[data-created-result-action="download-error-summary-csv"]:focus-visible,
.create-result-error-details-head button[data-created-result-action="locate-first-error"]:hover,
.create-result-error-details-head button[data-created-result-action="locate-first-error"]:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--border-strong));
  background: color-mix(in srgb, var(--primary-soft) 92%, var(--surface-raised));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 12%, transparent);
}

.create-result-error-list {
  display: grid;
  gap: 8px;
}

.create-result-error-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.create-result-error-summary span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--red) 18%, var(--border));
  border-radius: 13px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--red-soft) 62%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-raised) 88%, transparent);
}

.create-result-error-summary strong,
.create-result-error-summary em,
.create-result-error-summary small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-result-error-summary strong {
  margin: 0;
  color: color-mix(in srgb, var(--red) 86%, var(--text));
  font-size: 12px;
}

.create-result-error-summary em {
  color: var(--text);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.create-result-error-summary small {
  color: var(--text-soft);
  font-size: 11px;
}

.create-result-error-summary .is-muted {
  border-style: dashed;
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
}

.create-result-error-item,
.create-result-error-more {
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--amber) 16%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
}

.create-result-error-item.is-focused {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--border-strong));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary-soft) 72%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-raised) 92%, transparent);
  animation: focus-target-ring 1.4s ease-out 2;
  box-shadow: 0 16px 30px color-mix(in srgb, var(--primary) 13%, transparent);
}

.create-result-error-item strong,
.create-result-error-item span,
.create-result-error-item small {
  display: block;
}

.create-result-error-item span {
  margin-top: 4px;
  color: var(--text);
  font-size: 12px;
}

.create-result-error-item code {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 10px;
  color: color-mix(in srgb, var(--text) 88%, var(--primary));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 35%, transparent), transparent),
    color-mix(in srgb, var(--surface) 88%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-result-error-item small,
.create-result-error-more {
  overflow: hidden;
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-result-error-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.create-result-error-item-actions:empty {
  display: none;
}

.create-result-error-item button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--primary) 86%, var(--text));
  background: color-mix(in srgb, var(--primary-soft) 64%, var(--surface-raised));
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.create-result-error-item button:hover,
.create-result-error-item button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border-strong));
  background: color-mix(in srgb, var(--primary-soft) 88%, var(--surface-raised));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-1px);
}

textarea[name="bulk_targets"].is-line-focused {
  animation: focus-target-ring 1.4s ease-out 2;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent),
    0 18px 34px color-mix(in srgb, var(--primary) 12%, transparent);
}

.create-result-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.create-result-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.create-result-tools .button {
  min-height: 38px;
}

.create-result-tools .button[data-created-result-action="copy-markdown"],
.create-result-tools .button[data-created-result-action="copy-html"] {
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--border));
  color: color-mix(in srgb, var(--cyan) 82%, var(--text));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan-soft) 76%, var(--surface-raised)), var(--surface-raised));
}

.create-result-tools .button[data-created-result-action="copy-markdown"]:hover,
.create-result-tools .button[data-created-result-action="copy-html"]:hover {
  border-color: color-mix(in srgb, var(--cyan) 44%, var(--border-strong));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--cyan) 12%, transparent);
}

.create-result-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--border));
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  transition:
    border-color 180ms var(--ease),
    background 180ms var(--ease),
    transform 180ms var(--ease);
}

.create-result-item:hover {
  border-color: color-mix(in srgb, var(--green) 38%, var(--border-strong));
  background: color-mix(in srgb, var(--green-soft) 82%, var(--surface-raised));
  transform: translateY(-1px);
}

.create-result-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--green) 46%, transparent);
  outline-offset: 2px;
}

.create-result-item.is-muted {
  cursor: default;
  border-style: dashed;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  transform: none;
}

.create-result-item.is-muted:hover {
  border-color: color-mix(in srgb, var(--green) 18%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.create-result-item strong,
.create-result-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-result-item strong {
  margin: 0;
  font-size: 12px;
}

.create-result-item span {
  color: var(--text-soft);
  font-size: 11px;
}

.result-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.result-actions .button {
  min-height: 38px;
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 84%, transparent);
  color: var(--text);
}

.result-actions .button:hover {
  background: color-mix(in srgb, var(--green-soft) 74%, var(--surface-raised));
}

.button-compact {
  min-height: 36px;
  padding: 0 14px;
  font-size: 12px;
}

@media (max-width: 720px) {
  .bulk-create-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bulk-create-preview-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .create-result-tools .button {
    flex: 1 1 calc(50% - 5px);
  }

  .create-result-error-details-head {
    align-items: stretch;
  }

  .create-result-error-details-head button {
    min-height: 44px;
  }

  .create-result-error-item small,
  .create-result-error-more,
  .create-result-error-summary em,
  .create-result-error-summary small {
    white-space: normal;
    word-break: break-all;
  }
}

.creation-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.studio-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 76%, transparent),
    0 18px 34px rgba(15, 34, 68, 0.08);
}

.studio-card-accent {
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 74%, var(--surface-raised)), color-mix(in srgb, var(--surface-soft) 92%, transparent));
}

.studio-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.studio-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.8;
}

.studio-card-kicker {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.studio-feature-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-soft);
  line-height: 1.75;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.stat-tile {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  min-height: 108px;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 190ms var(--ease), border-color 190ms ease, box-shadow 190ms ease;
  animation: enter-up 460ms var(--ease) both;
}

.stat-tile:nth-child(2) { animation-delay: 45ms; }
.stat-tile:nth-child(3) { animation-delay: 90ms; }
.stat-tile:nth-child(4) { animation-delay: 135ms; }
.stat-tile:nth-child(5) { animation-delay: 180ms; }
.stat-tile:nth-child(6) { animation-delay: 225ms; }

.stat-tile:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.stat-icon.blue { background: var(--primary-soft); color: var(--primary); }
.stat-icon.green { background: var(--green-soft); color: var(--green); }
.stat-icon.amber { background: var(--amber-soft); color: var(--amber); }
.stat-icon.cyan { background: var(--cyan-soft); color: var(--cyan); }
.stat-icon.red { background: var(--red-soft); color: var(--red); }

.stat-tile > div:last-child {
  min-width: 0;
}

.stat-tile span,
.stat-tile strong,
.stat-tile small {
  display: block;
}

.stat-tile span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
}

.stat-tile strong {
  margin-top: 2px;
  font-size: 25px;
  line-height: 1.25;
}

.stat-tile strong.is-updating {
  animation: number-pop 260ms var(--ease);
}

.stat-tile small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.traffic-alert-strip {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(300px, 0.72fr);
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, var(--surface)), color-mix(in srgb, var(--surface-elevated) 92%, transparent));
  box-shadow: var(--shadow-sm);
  animation: enter-up 420ms 170ms var(--ease) both;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.traffic-alert-strip[data-level="warn"] {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber-soft) 72%, var(--surface)), color-mix(in srgb, var(--surface-elevated) 92%, transparent));
}

.traffic-alert-strip[data-level="danger"] {
  border-color: color-mix(in srgb, var(--red) 46%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--red-soft) 70%, var(--surface)), color-mix(in srgb, var(--surface-elevated) 92%, transparent));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--red) 12%, transparent);
}

.traffic-alert-strip[data-level="muted"] {
  border-color: var(--border);
  background: var(--surface-soft);
}

.traffic-alert-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
}

.traffic-alert-strip[data-level="warn"] .traffic-alert-icon {
  background: var(--amber-soft);
  color: var(--amber);
}

.traffic-alert-strip[data-level="danger"] .traffic-alert-icon {
  background: var(--red-soft);
  color: var(--red);
  animation: traffic-alert-pulse 1.8s ease-in-out infinite;
}

.traffic-alert-strip[data-level="muted"] .traffic-alert-icon {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
}

.traffic-alert-copy {
  min-width: 0;
}

.traffic-alert-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.traffic-alert-title-row > strong {
  color: var(--text);
  font-size: 15px;
}

.traffic-alert-copy p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
}

.traffic-alert-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  color: var(--primary);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.traffic-alert-strip[data-level="warn"] .traffic-alert-badge {
  border-color: color-mix(in srgb, var(--amber) 22%, transparent);
  background: color-mix(in srgb, var(--amber) 13%, transparent);
  color: var(--amber);
}

.traffic-alert-strip[data-level="danger"] .traffic-alert-badge {
  border-color: color-mix(in srgb, var(--red) 24%, transparent);
  background: color-mix(in srgb, var(--red) 13%, transparent);
  color: var(--red);
}

.traffic-alert-strip[data-level="muted"] .traffic-alert-badge {
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted);
}

.traffic-alert-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.traffic-alert-metrics > div {
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
}

.traffic-alert-metrics span,
.traffic-alert-metrics strong {
  display: block;
}

.traffic-alert-metrics span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.traffic-alert-metrics strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.traffic-alert-metrics strong.is-positive {
  color: var(--green);
}

.traffic-alert-metrics strong.is-negative {
  color: var(--red);
}

@keyframes traffic-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 22%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--red) 0%, transparent); }
}

.maintenance-strip {
  margin-top: 16px;
}

.maintenance-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.95fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), color-mix(in srgb, var(--cyan) 10%, var(--surface-elevated)));
  box-shadow: var(--shadow-md);
  animation: enter-up 360ms var(--ease) both;
  animation-delay: 270ms;
}

.maintenance-card::before {
  content: '';
  position: absolute;
  inset: auto -68px -88px auto;
  width: 196px;
  height: 196px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%);
  pointer-events: none;
}

.maintenance-card > * {
  position: relative;
  z-index: 1;
}

.maintenance-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--primary);
}

.maintenance-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.maintenance-title-row h2 {
  margin: 0;
  font-size: 24px;
}

.maintenance-copy p {
  margin: 10px 0 8px;
  max-width: 620px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
}

.maintenance-copy small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.maintenance-state-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.maintenance-state-badge.is-blue {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
}

.maintenance-state-badge.is-green {
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 22%, transparent);
}

.maintenance-state-badge.is-amber {
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 24%, transparent);
}

.maintenance-state-badge.is-red {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 22%, transparent);
}

.maintenance-state-badge.is-muted {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--text-soft);
  border-color: var(--border);
}

.maintenance-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.maintenance-metric {
  min-width: 0;
  padding: 14px 14px 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
  backdrop-filter: blur(10px);
}

.maintenance-metric span,
.maintenance-metric strong,
.maintenance-metric small {
  display: block;
}

.maintenance-metric span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
}

.maintenance-metric strong {
  margin-top: 5px;
  font-size: 24px;
  line-height: 1.15;
}

.maintenance-metric small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.maintenance-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.maintenance-actions .button {
  min-height: 46px;
  padding-inline: 16px;
  border-radius: 15px;
}

.maintenance-strip-compact {
  margin-top: 14px;
}

.metadata-maintenance-card {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
}

.metadata-maintenance-card .maintenance-copy {
  display: grid;
  gap: 12px;
}

.metadata-maintenance-card[data-state="warn"] {
  border-color: color-mix(in srgb, var(--amber) 26%, var(--border));
}

.metadata-maintenance-card[data-state="ok"] {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
}

.metadata-maintenance-card[data-state="muted"] {
  border-color: color-mix(in srgb, var(--border-strong) 84%, transparent);
}

#lifecycleMaintenanceCard {
  scroll-margin-top: calc(var(--topbar-height, 68px) + 18px);
}

.lifecycle-maintenance-card {
  border-color: color-mix(in srgb, var(--amber) 18%, var(--border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--amber) 14%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--amber-soft) 44%, transparent));
}

.lifecycle-maintenance-card[data-state="warn"] {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
}

.lifecycle-maintenance-card[data-state="ok"] {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
}

.lifecycle-maintenance-card[data-state="muted"] {
  border-color: color-mix(in srgb, var(--border-strong) 84%, transparent);
}

.lifecycle-preview-panel {
  display: grid;
  gap: 10px;
}

.lifecycle-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.lifecycle-preview-head strong {
  font-size: 13px;
  color: var(--text);
}

.lifecycle-preview-head small {
  color: var(--muted);
  font-size: 11px;
}

.lifecycle-preview-list {
  display: grid;
  gap: 10px;
}

.lifecycle-preview-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--amber) 18%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 96%, transparent), color-mix(in srgb, var(--amber-soft) 38%, transparent));
  color: inherit;
  text-align: left;
  transition:
    transform 180ms var(--ease),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.lifecycle-preview-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--amber) 10%, transparent);
}

.lifecycle-preview-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--amber) 44%, transparent);
  outline-offset: 2px;
}

.lifecycle-preview-item.is-on-page {
  border-color: color-mix(in srgb, var(--green) 20%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 96%, transparent), color-mix(in srgb, var(--green-soft) 34%, transparent));
}

.lifecycle-preview-copy,
.lifecycle-preview-side {
  min-width: 0;
}

.lifecycle-preview-copy strong,
.lifecycle-preview-copy small,
.lifecycle-preview-side em,
.lifecycle-preview-side i {
  display: block;
}

.lifecycle-preview-copy strong {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lifecycle-preview-copy small {
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.5;
}

.lifecycle-preview-side {
  text-align: right;
}

.lifecycle-preview-side em {
  color: var(--amber);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.lifecycle-preview-side i {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.lifecycle-preview-empty {
  padding: 13px 14px;
  border: 1px dashed color-mix(in srgb, var(--border-strong) 80%, transparent);
  border-radius: 18px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 720px) {
  .lifecycle-preview-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .lifecycle-preview-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .lifecycle-preview-side {
    text-align: left;
  }
}

#metadataMaintenanceCard,
#healthDashboard {
  scroll-margin-top: calc(var(--topbar-height, 68px) + 18px);
}

.is-focus-target {
  animation: focus-target-ring 1800ms var(--ease) both;
}

.maintenance-feedback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 96%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 64%, transparent);
}

.maintenance-feedback-pulse {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 72%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--muted) 12%, transparent);
}

.maintenance-feedback-copy {
  min-width: 0;
}

.maintenance-feedback-copy strong,
.maintenance-feedback-copy small {
  display: block;
}

.maintenance-feedback-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.maintenance-feedback-copy small {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}

.maintenance-feedback-time {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.maintenance-feedback[data-tone="ok"] {
  border-color: color-mix(in srgb, var(--green) 18%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--green-soft) 40%, var(--surface-elevated)), color-mix(in srgb, var(--surface-soft) 92%, transparent));
}

.maintenance-feedback[data-tone="ok"] .maintenance-feedback-pulse {
  background: color-mix(in srgb, var(--green) 74%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 12%, transparent);
}

.maintenance-feedback[data-tone="warn"] {
  border-color: color-mix(in srgb, var(--amber) 22%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--amber-soft) 42%, var(--surface-elevated)), color-mix(in srgb, var(--surface-soft) 92%, transparent));
}

.maintenance-feedback[data-tone="warn"] .maintenance-feedback-pulse {
  background: color-mix(in srgb, var(--amber) 74%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 12%, transparent);
}

.maintenance-feedback[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--red) 22%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--red-soft) 44%, var(--surface-elevated)), color-mix(in srgb, var(--surface-soft) 92%, transparent));
}

.maintenance-feedback[data-tone="danger"] .maintenance-feedback-pulse {
  background: color-mix(in srgb, var(--red) 76%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 12%, transparent);
}

.maintenance-feedback[data-tone="info"] {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 44%, var(--surface-elevated)), color-mix(in srgb, var(--surface-soft) 92%, transparent));
}

.maintenance-feedback[data-tone="info"] .maintenance-feedback-pulse {
  background: color-mix(in srgb, var(--primary) 74%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 12%, transparent);
}

.maintenance-feedback[data-tone="muted"] .maintenance-feedback-pulse,
.maintenance-feedback[data-tone="idle"] .maintenance-feedback-pulse {
  background: color-mix(in srgb, var(--muted) 72%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--muted) 12%, transparent);
}

@keyframes focus-target-ring {
  0% {
    outline: 2px solid transparent;
    outline-offset: 0;
  }
  22% {
    outline: 2px solid color-mix(in srgb, var(--primary) 52%, transparent);
    outline-offset: 4px;
  }
  68% {
    outline: 2px solid color-mix(in srgb, var(--primary) 26%, transparent);
    outline-offset: 7px;
  }
  100% {
    outline: 2px solid transparent;
    outline-offset: 10px;
  }
}

.links-utility-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), color-mix(in srgb, var(--surface-elevated) 94%, transparent));
  box-shadow: var(--shadow-sm);
  animation: enter-up 320ms var(--ease) both;
  animation-delay: 190ms;
}

.links-utility-copy {
  min-width: 0;
}

.links-utility-copy h3 {
  margin: 6px 0 6px;
  font-size: 19px;
}

.links-utility-copy p {
  margin: 0;
  max-width: 720px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

.links-utility-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.links-utility-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 58%, transparent);
}

.links-utility-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.links-utility-actions .button {
  min-height: 42px;
  padding-inline: 14px;
  border-radius: 14px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.7fr);
  gap: 12px;
  margin-top: 16px;
  scroll-margin-top: calc(var(--topbar-height) + 16px);
}

.top-links-panel {
  margin-top: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  animation: enter-up 480ms 180ms var(--ease) both;
}

.top-links-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.top-links-head span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.top-links-head h2 {
  margin: 3px 0 0;
  font-size: 16px;
  line-height: 1.3;
}

.top-links-state {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary) !important;
  line-height: 24px;
  white-space: nowrap;
}

.top-links-panel[data-state="disabled"] .top-links-state,
.top-links-panel[data-state="empty"] .top-links-state {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--muted) !important;
}

.top-links-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.top-links-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 10px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  transition: transform 170ms var(--ease), border-color 170ms ease, background-color 170ms ease;
}

.top-links-item:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: var(--surface-elevated);
}

.top-links-rank {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.top-links-item:nth-child(1) .top-links-rank {
  background: var(--amber-soft);
  color: var(--amber);
}

.top-links-copy,
.top-links-count {
  min-width: 0;
}

.top-links-copy strong,
.top-links-copy span,
.top-links-count strong,
.top-links-count span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-links-copy strong {
  color: var(--text);
  font-size: 13px;
}

.top-links-copy span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.top-links-count {
  text-align: right;
}

.top-links-count strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.top-links-count span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.top-links-empty {
  grid-column: 1 / -1;
  padding: 22px 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.analytics-access-panel {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 97%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent)),
    var(--surface);
  box-shadow: var(--shadow-sm);
  animation: enter-up 520ms 220ms var(--ease) both;
}

.analytics-access-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--green), var(--amber));
  opacity: .84;
}

.analytics-access-panel > * {
  position: relative;
  z-index: 1;
}

.analytics-access-head,
.analytics-access-toolbar,
.analytics-access-actions {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.analytics-access-head {
  justify-content: space-between;
}

.analytics-access-head span:first-child {
  display: block;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.analytics-access-head h2 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.analytics-access-head p {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.7;
}

.analytics-access-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.analytics-access-panel[data-state="logs_disabled"] .analytics-access-state,
.analytics-access-panel[data-state="stats_disabled"] .analytics-access-state,
.analytics-access-panel[data-state="empty"] .analytics-access-state {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--muted);
}

.analytics-access-toolbar {
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.analytics-access-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 132px;
  flex: 1 1 150px;
}

.analytics-access-toolbar label:first-child {
  flex: 2 1 280px;
}

.analytics-access-toolbar label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.analytics-access-toolbar input,
.analytics-access-toolbar select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.analytics-access-toolbar input {
  padding: 0 13px;
}

.analytics-access-toolbar select {
  padding: 0 34px 0 12px;
}

.analytics-access-toolbar input:focus,
.analytics-access-toolbar select:focus {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 11%, transparent);
}

.analytics-access-actions {
  align-items: flex-end;
  justify-content: flex-end;
  flex: 1 1 320px;
  flex-wrap: wrap;
}

.analytics-access-actions .button {
  min-height: 40px;
  border-radius: 12px;
}

.analytics-access-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.analytics-access-metrics span {
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 56%, transparent);
}

.analytics-access-metrics small,
.analytics-access-metrics strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-access-metrics small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.analytics-access-metrics strong {
  margin-top: 6px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
}

.analytics-access-insights {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 12px;
  margin-top: 14px;
}

.analytics-access-hourly,
.analytics-access-breakdown {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.analytics-access-hourly {
  display: flex;
  align-items: end;
  gap: 4px;
  min-height: 152px;
  padding: 18px 14px 14px;
}

.operation-log-hourly {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  padding: 14px;
}

.operation-log-chart-block {
  min-width: 0;
}

.operation-log-chart-block + .operation-log-chart-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.operation-log-chart-block > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 12px;
}

.operation-log-chart-bars {
  display: flex;
  align-items: end;
  gap: 4px;
  min-width: 0;
}

.analytics-access-hourly span,
.operation-log-chart-bars span {
  display: flex;
  align-items: end;
  flex: 1 1 0;
  min-width: 3px;
  height: 108px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-soft));
}

.operation-log-chart-bars span {
  height: 72px;
}

.analytics-access-hourly i,
.operation-log-chart-bars i {
  display: block;
  width: 100%;
  min-height: 6px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--green) 76%, var(--primary)));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 14%, transparent);
  animation: access-bar-rise 420ms var(--ease) both;
}

.analytics-access-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.analytics-access-breakdown section {
  min-width: 0;
}

.analytics-access-breakdown strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 12px;
}

.analytics-access-bar {
  display: grid;
  grid-template-columns: minmax(72px, .8fr) minmax(54px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 11px;
}

.analytics-access-bar b,
.analytics-access-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-access-bar b {
  color: var(--text);
  font-weight: 750;
}

.analytics-access-bar i {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 74%, transparent);
}

.analytics-access-bar em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--green));
}

.analytics-access-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.analytics-access-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  transition: transform 170ms var(--ease), border-color 170ms ease, box-shadow 170ms ease;
}

.analytics-access-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 8%, transparent);
}

.analytics-access-main,
.analytics-access-title,
.analytics-access-meta {
  min-width: 0;
}

.analytics-access-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analytics-access-title strong,
.analytics-access-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-access-title strong {
  color: var(--text);
  font-size: 13px;
}

.analytics-access-title span {
  flex: 0 0 auto;
  max-width: 160px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}

.analytics-access-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.analytics-access-meta span {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-soft);
}

.analytics-access-meta b,
.analytics-access-meta em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.analytics-access-meta b {
  color: var(--muted);
  font-size: 10px;
}

.analytics-access-meta em {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 11px;
}

.analytics-access-main code {
  display: block;
  overflow: hidden;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px dashed color-mix(in srgb, var(--border-strong) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-access-tags {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-direction: column;
  gap: 7px;
}

.analytics-access-tags b,
.analytics-access-tags em {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 168px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-access-tags b {
  background: var(--green-soft);
  color: var(--green);
}

.analytics-access-tags em {
  background: var(--surface-soft);
  color: var(--text-soft);
}

.analytics-access-empty {
  display: grid;
  place-items: center;
  min-height: 118px;
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.analytics-access-empty strong,
.analytics-access-empty p {
  margin: 0;
}

.analytics-access-empty strong {
  color: var(--text);
  font-size: 14px;
}

.analytics-access-empty.is-compact {
  min-height: 76px;
  padding: 12px;
}

.operation-log-dashboard::before {
  background: linear-gradient(90deg, var(--amber), var(--primary), var(--red));
}

.operation-log-breakdown {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operation-log-signal-section {
  grid-column: 1 / -1;
}

.operation-log-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.operation-log-signal-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}

.operation-log-signal-card span,
.operation-log-signal-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-log-signal-card span {
  color: var(--text-soft);
  font-size: 11px;
}

.operation-log-signal-card strong {
  margin: 3px 0;
  font-size: 16px;
}

.operation-log-signal-card small {
  color: var(--muted);
  font-size: 11px;
}

.operation-log-signal-danger {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border));
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}

.operation-log-signal-warning {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
}

.operation-log-signal-success {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}

.operation-log-item {
  position: relative;
}

.operation-log-item::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 4px;
  border-radius: 999px;
  background: var(--primary);
  opacity: .9;
}

.operation-log-tone-danger {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border));
}

.operation-log-tone-danger::before {
  background: var(--red);
}

.operation-log-tone-warning {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--border));
}

.operation-log-tone-warning::before {
  background: var(--amber);
}

.operation-log-tone-success::before {
  background: var(--green);
}

.operation-log-title span {
  background: color-mix(in srgb, var(--amber) 14%, var(--surface-soft));
  color: color-mix(in srgb, var(--amber) 82%, var(--text));
}

.operation-log-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.operation-log-url {
  margin-top: 7px;
  color: var(--text-soft);
}

.operation-log-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.operation-log-detail-tags em {
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-soft));
  color: var(--text-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
}

.operation-log-detail-tags .is-warning {
  background: color-mix(in srgb, var(--amber) 16%, var(--surface-soft));
  color: color-mix(in srgb, var(--amber) 82%, var(--text));
}

.operation-log-detail-insight {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}

.operation-log-detail-insight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.operation-log-detail-insight-head strong {
  color: var(--text);
  font-size: 12px;
}

.operation-log-detail-insight-head span,
.operation-log-detail-insight p {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
}

.operation-log-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.operation-log-detail-group {
  min-width: 0;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.operation-log-detail-group strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 11px;
}

.operation-log-detail-group div {
  display: grid;
  gap: 5px;
}

.operation-log-detail-group span {
  display: grid;
  grid-template-columns: minmax(54px, .45fr) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  color: var(--text-soft);
  font-size: 11px;
}

.operation-log-detail-group b,
.operation-log-detail-group em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.operation-log-detail-group b {
  color: var(--muted);
  font-weight: 650;
}

.operation-log-detail-group-change {
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.operation-log-detail-group-entity {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.operation-log-detail-group-number {
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.operation-log-admin-profile-section {
  grid-column: 1 / -1;
}

.operation-log-admin-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.operation-log-admin-signal {
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
}

.operation-log-admin-signal b,
.operation-log-admin-signal em,
.operation-log-admin-signal small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.operation-log-admin-signal b,
.operation-log-admin-signal small {
  color: var(--text-soft);
  font-size: 11px;
}

.operation-log-admin-signal em {
  margin: 2px 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}

.operation-log-admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.operation-log-admin-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
}

.operation-log-admin-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}

.operation-log-admin-body {
  min-width: 0;
}

.operation-log-admin-body strong,
.operation-log-admin-body span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-log-admin-body strong {
  color: var(--text);
  font-size: 12px;
}

.operation-log-admin-body span {
  color: var(--text-soft);
  font-size: 11px;
}

.operation-log-admin-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.operation-log-admin-metrics em {
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.operation-log-row-actions {
  margin-top: 10px;
}

.operation-log-tags b {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-soft));
  color: var(--primary);
}

.operation-log-panel .analytics-access-actions {
  flex-basis: 380px;
}

@keyframes access-bar-rise {
  from {
    opacity: .55;
    transform: scaleY(.28);
    transform-origin: bottom;
  }
  to {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

@media (max-width: 900px) {
  .analytics-access-insights {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-access-breakdown {
    grid-template-columns: minmax(0, 1fr);
  }

  .operation-log-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-log-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-log-admin-grid,
  .operation-log-admin-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-access-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-log-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .analytics-access-panel {
    padding: 16px;
    border-radius: 20px;
  }

  .analytics-access-head {
    display: grid;
    gap: 10px;
  }

  .analytics-access-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
  }

  .analytics-access-toolbar label,
  .analytics-access-toolbar label:first-child,
  .analytics-access-actions {
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
  }

  .analytics-access-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-access-actions .button {
    width: 100%;
    justify-content: center;
  }

  .analytics-access-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-access-hourly {
    min-height: 126px;
    padding: 14px 10px 12px;
  }

  .analytics-access-hourly span,
  .operation-log-chart-bars span {
    height: 88px;
  }

  .analytics-access-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-access-tags {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 430px) {
  .analytics-access-panel {
    margin-top: 10px;
    padding: 14px;
  }

  .analytics-access-head h2 {
    font-size: 16px;
  }

  .analytics-access-head p {
    font-size: 11px;
  }

  .analytics-access-state {
    width: fit-content;
  }

  .analytics-access-metrics,
  .analytics-access-meta,
  .analytics-access-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-access-metrics span,
  .analytics-access-item {
    padding: 12px;
    border-radius: 15px;
  }

  .analytics-access-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .analytics-access-title span {
    max-width: 100%;
  }

  .analytics-access-main code {
    white-space: normal;
    word-break: break-word;
  }

  .analytics-access-bar {
    grid-template-columns: minmax(58px, .82fr) minmax(50px, 1fr);
  }

  .analytics-access-bar small {
    grid-column: 1 / -1;
  }

  .operation-log-breakdown,
  .operation-log-meta,
  .operation-log-signal-grid,
  .operation-log-detail-grid,
  .operation-log-admin-grid,
  .operation-log-admin-signals {
    grid-template-columns: minmax(0, 1fr);
  }

  .operation-log-signal-card small,
  .operation-log-admin-signal small {
    white-space: normal;
  }

  .operation-log-detail-insight-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.analytics-panel {
  min-width: 0;
  min-height: 304px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  animation: enter-up 480ms 120ms var(--ease) both;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.section-heading span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.section-heading h2 {
  margin: 3px 0 0;
  font-size: 16px;
  line-height: 1.3;
}

.health-dashboard {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow: var(--shadow-sm);
  animation: enter-up 520ms 80ms var(--ease) both;
}

.health-dashboard::after {
  content: "";
  position: absolute;
  inset: auto -7% -32% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 11%, transparent), transparent 70%);
  pointer-events: none;
}

.health-dashboard > * {
  position: relative;
  z-index: 1;
}

.health-dashboard[data-level="danger"] {
  border-color: color-mix(in srgb, var(--red) 32%, var(--border));
}

.health-dashboard[data-level="warn"] {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--border));
}

.health-dashboard[data-level="ok"] {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
}

.health-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.health-overview-card,
.health-issues-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 65%, transparent);
}

.health-overview-head,
.health-issues-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.health-overview-head small,
.health-issues-head small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.health-overview-head strong,
.health-issues-head strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 16px;
}

.health-state-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
}

.health-dashboard[data-level="danger"] .health-state-badge {
  background: var(--red-soft);
  color: var(--red);
}

.health-dashboard[data-level="warn"] .health-state-badge {
  background: var(--amber-soft);
  color: var(--amber);
}

.health-dashboard[data-level="ok"] .health-state-badge {
  background: var(--green-soft);
  color: var(--green);
}

.health-overview-summary {
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.8;
}

.health-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.health-kpi-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 7%, transparent), transparent 32%),
    var(--surface-soft);
}

.health-kpi-grid span,
.health-kpi-grid strong,
.health-kpi-grid small {
  display: block;
}

.health-kpi-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.health-kpi-grid strong {
  margin-top: 6px;
  color: var(--text);
  font-size: 18px;
}

.health-kpi-grid small {
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.6;
}

.health-overview-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.health-overview-actions .button {
  min-height: 40px;
  border-radius: 14px;
}

@media (max-width: 720px) {
  .maintenance-feedback {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }

  .maintenance-feedback-time {
    grid-column: 2;
    padding-left: 0;
  }

  .health-overview-actions {
    justify-content: stretch;
  }

  .health-overview-actions .button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .maintenance-feedback {
    gap: 10px;
    padding: 12px;
  }

  .maintenance-feedback-copy strong {
    font-size: 12px;
  }

  .maintenance-feedback-copy small {
    font-size: 11px;
  }
}

@media (max-width: 390px) {
  .maintenance-feedback {
    grid-template-columns: 1fr;
  }

  .maintenance-feedback-pulse {
    display: none;
  }

  .maintenance-feedback-time {
    grid-column: auto;
  }
}

.health-issues-head span {
  color: var(--muted);
  font-size: 11px;
}

.health-issues-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.health-issue-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.health-issue-item strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.health-issue-item p {
  margin: 7px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.7;
}

.health-issue-item > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.health-issue-item.is-danger {
  border-color: color-mix(in srgb, var(--red) 22%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 58%, var(--surface-soft));
}

.health-issue-item.is-danger > span {
  background: var(--red-soft);
  color: var(--red);
}

.health-issue-item.is-warn {
  border-color: color-mix(in srgb, var(--amber) 26%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 58%, var(--surface-soft));
}

.health-issue-item.is-warn > span {
  background: var(--amber-soft);
  color: var(--amber);
}

.health-issue-item.is-empty {
  justify-content: center;
  color: var(--muted);
  text-align: center;
}

.chart-total {
  text-align: right;
}

.chart-total small,
.chart-total strong {
  display: block;
}

.chart-total small {
  color: var(--muted);
  font-size: 10px;
}

.chart-total strong {
  margin-top: 1px;
  font-size: 20px;
}

.chart-wrap {
  position: relative;
  height: 218px;
  margin-top: 14px;
}

.chart-wrap canvas {
  width: 100%;
  height: 100%;
}

.chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}

.device-visual {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 220px;
}

.device-ring {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0 25%, var(--green) 25% 50%, var(--amber) 50% 75%, var(--border) 75% 100%);
  transition: background 380ms var(--ease);
}

.device-ring::before {
  grid-area: 1 / 1;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--surface);
  content: "";
}

.device-ring div {
  z-index: 1;
  grid-area: 1 / 1;
  text-align: center;
}

.device-ring strong,
.device-ring span {
  display: block;
}

.device-ring strong {
  font-size: 22px;
}

.device-ring span {
  color: var(--muted);
  font-size: 10px;
}

.device-legend {
  display: grid;
  gap: 11px;
}

.device-legend > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-soft);
  font-size: 11px;
}

.device-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.device-legend strong {
  color: var(--text);
  font-size: 11px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.legend-dot.desktop { background: var(--primary); }
.legend-dot.mobile { background: var(--green); }
.legend-dot.tablet { background: var(--amber); }
.legend-dot.other { background: var(--border-strong); }

.links-section {
  margin-top: 16px;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--topbar-height) + 16px);
  animation: enter-up 500ms 180ms var(--ease) both;
}

.links-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 0 2px 14px;
}

.links-command-center {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(360px, 1.7fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 16%, transparent), transparent 38%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--green) 10%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow: var(--shadow-sm);
}

.links-command-center[data-state="attention"] {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--amber) 15%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--amber-soft) 64%, var(--surface-soft)));
}

.links-command-copy {
  min-width: 0;
}

.links-command-kicker {
  display: inline-flex;
  color: var(--primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.links-command-copy h2 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.links-command-copy p {
  margin: 7px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.links-command-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.links-command-metrics article {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.links-command-metrics span,
.links-command-metrics strong,
.links-command-metrics small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.links-command-metrics span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.links-command-metrics strong {
  margin-top: 7px;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.links-command-metrics small {
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 10px;
}

.links-command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.links-command-actions .button {
  min-height: 34px;
  white-space: nowrap;
}

.links-command-center.is-density-compact {
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
}

.links-command-center.is-density-compact .links-command-copy h2 {
  font-size: 16px;
}

.links-command-center.is-density-compact .links-command-copy p {
  margin-top: 5px;
  line-height: 1.45;
}

.links-command-center.is-density-compact .links-command-metrics article {
  padding: 9px 10px;
}

.links-command-center.is-density-compact .links-command-metrics strong {
  margin-top: 5px;
  font-size: 20px;
}

.links-command-center.is-density-compact .links-command-metrics small {
  margin-top: 5px;
}

.links-command-center.is-density-compact .links-command-actions .button {
  min-height: 32px;
}

.links-density-toggle {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.links-density-toggle button {
  min-width: 44px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.links-density-toggle button.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}

.links-filter-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--amber) 12%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent));
  box-shadow: var(--shadow-sm);
}

.links-filter-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--primary-soft) 44%, var(--surface-soft)));
  box-shadow: var(--shadow-sm);
}

.links-filter-summary[hidden] {
  display: none;
}

.links-filter-summary-copy {
  min-width: 0;
}

.links-filter-summary-kicker {
  display: inline-flex;
  color: var(--primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.links-filter-summary-copy strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 15px;
}

.links-filter-summary-copy p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.links-filter-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.links-filter-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  max-width: 100%;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, var(--primary-soft));
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 750;
}

.links-filter-summary-chip.is-clearable {
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.links-filter-summary-chip.is-clearable:hover,
.links-filter-summary-chip.is-clearable:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border-strong));
  background: color-mix(in srgb, var(--surface-raised) 76%, var(--primary-soft));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-1px);
}

.links-filter-summary-chip.is-clearable:active {
  transform: translateY(0) scale(0.98);
}

.links-filter-summary-chip b {
  color: var(--primary);
  font-size: 10px;
  letter-spacing: .04em;
}

.links-filter-summary-chip em {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.links-filter-summary-chip .icon {
  width: 13px;
  height: 13px;
  color: var(--muted);
}

.links-filter-summary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.links-filter-summary[data-actions="0"] {
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.5fr);
}

.links-filter-recent {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(240px, 1.6fr) auto;
  align-items: center;
  gap: 14px;
  margin: -4px 0 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--green) 16%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--green-soft) 15%, transparent), transparent 36%),
    color-mix(in srgb, var(--surface-raised) 92%, var(--green-soft));
}

.links-filter-recent[hidden] {
  display: none;
}

.links-filter-recent-copy {
  min-width: 0;
}

.links-filter-recent-kicker {
  display: inline-flex;
  color: color-mix(in srgb, var(--green) 78%, var(--text));
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.links-filter-recent-copy strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 14px;
}

.links-filter-recent-copy p {
  margin: 5px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
}

.links-filter-recent-list {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.links-filter-recent-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  flex: 0 0 min(240px, 78vw);
  gap: 4px;
  min-height: 48px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, var(--green-soft));
  color: var(--text);
  transition: transform 160ms var(--ease), border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.links-filter-recent-item:hover,
.links-filter-recent-item:focus-within {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border-strong));
  background: color-mix(in srgb, var(--surface-raised) 80%, var(--green-soft));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--green) 12%, transparent);
  transform: translateY(-1px);
}

.links-filter-recent-item.is-pinned {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--green));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 86%, var(--green-soft));
}

.links-filter-recent-apply {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 42px;
  padding: 3px 6px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.links-filter-recent-apply strong,
.links-filter-recent-apply span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.links-filter-recent-apply strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.links-filter-recent-apply span {
  color: var(--text-soft);
  font-size: 11px;
}

.links-filter-recent-pin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 16%, var(--surface));
  color: color-mix(in srgb, var(--amber) 78%, var(--text));
  font-size: 10px;
  font-weight: 850;
}

.links-filter-recent-actions {
  display: flex;
  gap: 4px;
}

.links-filter-recent-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--green) 16%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.links-filter-recent-action:hover,
.links-filter-recent-action:focus-visible {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border-strong));
  color: var(--green);
  background: color-mix(in srgb, var(--green-soft) 46%, var(--surface-raised));
  transform: translateY(-1px);
}

.links-filter-recent-item.is-pinned .links-filter-recent-action[data-filter-recent-pin] {
  color: color-mix(in srgb, var(--amber) 82%, var(--text));
  background: color-mix(in srgb, var(--amber-soft) 58%, var(--surface-raised));
}

.links-filter-recent-action.is-danger:hover,
.links-filter-recent-action.is-danger:focus-visible {
  border-color: color-mix(in srgb, var(--red) 36%, var(--border-strong));
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 54%, var(--surface-raised));
}

.links-filter-recent-action .icon {
  width: 15px;
  height: 15px;
}

.links-filter-note[data-state="warn"] {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
}

.links-filter-note[data-state="danger"] {
  border-color: color-mix(in srgb, var(--red) 30%, var(--border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--red-soft) 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent));
}

.links-filter-note[data-state="danger"] .links-filter-note-kicker {
  color: color-mix(in srgb, var(--red) 78%, var(--text));
}

.links-filter-note[data-state="danger"] .links-filter-note-metrics span {
  border-color: color-mix(in srgb, var(--red) 16%, var(--border));
  background: color-mix(in srgb, var(--surface) 90%, var(--red-soft));
}

.links-filter-note[data-state="danger"] .links-filter-note-metrics b {
  color: color-mix(in srgb, var(--red) 84%, var(--text));
}

.links-filter-note[data-state="success"] {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--green-soft) 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent));
}

.links-filter-note[data-state="success"] .links-filter-note-kicker {
  color: color-mix(in srgb, var(--green) 78%, var(--text));
}

.links-filter-note[data-state="success"] .links-filter-note-metrics span {
  border-color: color-mix(in srgb, var(--green) 16%, var(--border));
  background: color-mix(in srgb, var(--surface) 90%, var(--green-soft));
}

.links-filter-note[data-state="success"] .links-filter-note-metrics b {
  color: color-mix(in srgb, var(--green) 84%, var(--text));
}

.links-filter-note-created {
  margin-bottom: 12px;
}

.links-filter-note-recycle {
  margin-bottom: 12px;
}

.links-filter-note-copy {
  min-width: 0;
}

.links-filter-note-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--amber) 82%, var(--text));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.links-filter-note-copy strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 16px;
}

.links-filter-note-copy p {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.75;
}

.links-filter-note-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.links-filter-note-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--amber) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--amber-soft));
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
}

.links-filter-note-metrics b {
  color: color-mix(in srgb, var(--amber) 86%, var(--text));
  font-size: 15px;
}

.links-filter-note-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 900px) {
  .links-command-center {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .links-command-actions {
    justify-content: flex-start;
  }

  .links-filter-summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .links-filter-summary-actions {
    justify-content: flex-start;
  }

  .links-filter-recent {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .links-filter-recent-list {
    overflow-x: auto;
  }

  .links-filter-recent-action {
    width: 42px;
    height: 42px;
  }

  .links-filter-note {
    align-items: stretch;
    flex-direction: column;
  }

  .links-filter-note-metrics {
    justify-content: flex-start;
  }

  .links-filter-note-actions {
    justify-content: flex-start;
  }
}

.links-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.links-view-copy {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  color: var(--primary);
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 54%),
    color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.links-view-copy:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border-strong));
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-raised));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 14%, transparent);
}

.links-view-reset {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
  color: color-mix(in srgb, var(--amber) 82%, var(--text));
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 54%),
    color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.links-view-reset:hover {
  border-color: color-mix(in srgb, var(--amber) 46%, var(--border-strong));
  color: color-mix(in srgb, var(--amber) 72%, var(--text));
  background: color-mix(in srgb, var(--amber) 12%, var(--surface-raised));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--amber) 14%, transparent);
}

.taxonomy-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 12%, transparent), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow: var(--shadow-sm);
}

.taxonomy-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.taxonomy-card-head h3 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 18px;
}

.taxonomy-card-head p {
  margin: 8px 0 0;
  max-width: 760px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
}

.taxonomy-active {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.taxonomy-active-chip,
.taxonomy-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--primary-soft));
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.taxonomy-active-chip {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent);
}

.taxonomy-active-chip .icon {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

.taxonomy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.taxonomy-panel {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.taxonomy-panel-metadata {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 8%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface) 94%, transparent);
}

.taxonomy-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.taxonomy-panel header strong {
  color: var(--text);
  font-size: 13px;
}

.taxonomy-panel header span {
  color: var(--muted);
  font-size: 11px;
}

.taxonomy-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.taxonomy-chip {
  justify-content: space-between;
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.taxonomy-chip:hover,
.taxonomy-active-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
}

.taxonomy-chip.is-active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, var(--surface)), color-mix(in srgb, var(--primary) 8%, var(--surface)));
  color: color-mix(in srgb, var(--primary) 82%, var(--text));
  box-shadow: 0 10px 22px rgba(23, 105, 224, 0.12);
}

.taxonomy-chip-metadata.is-metadata-live {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 82%, var(--surface));
  color: color-mix(in srgb, var(--green) 86%, var(--text));
}

.taxonomy-chip-metadata.is-metadata-cache {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface));
  color: color-mix(in srgb, var(--primary) 86%, var(--text));
}

.taxonomy-chip-metadata.is-metadata-stale {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 82%, var(--surface));
  color: color-mix(in srgb, var(--amber) 88%, var(--text));
}

.taxonomy-chip-metadata.is-metadata-issue {
  border-color: color-mix(in srgb, var(--red) 30%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 84%, var(--surface));
  color: color-mix(in srgb, var(--red) 90%, var(--text));
}

.taxonomy-chip-metadata.is-metadata-empty,
.taxonomy-chip-metadata.is-metadata-disabled {
  border-color: color-mix(in srgb, var(--border-strong) 70%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 92%, var(--surface));
  color: var(--text-soft);
}

.taxonomy-chip-metadata.is-active {
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 12%, transparent);
}

.taxonomy-chip b {
  color: var(--muted);
  font-size: 11px;
}

.metadata-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.metadata-overview-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 8%, transparent), transparent 35%),
    var(--surface-soft);
  transition: transform 160ms var(--ease), border-color 160ms ease, box-shadow 160ms ease;
}

.metadata-overview-card:hover {
  transform: translateY(-1px);
}

.metadata-overview-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 10%, transparent);
}

.metadata-overview-card span,
.metadata-overview-card strong,
.metadata-overview-card small {
  display: block;
}

.metadata-overview-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.metadata-overview-card strong {
  margin-top: 8px;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.metadata-overview-card small {
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.65;
}

.metadata-overview-card.is-metadata-live {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--green) 10%, transparent), transparent 36%),
    color-mix(in srgb, var(--green-soft) 68%, var(--surface-soft));
}

.metadata-overview-card.is-metadata-cache {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
}

.metadata-overview-card.is-metadata-stale {
  border-color: color-mix(in srgb, var(--amber) 26%, var(--border));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--amber) 10%, transparent), transparent 36%),
    color-mix(in srgb, var(--amber-soft) 70%, var(--surface-soft));
}

.metadata-overview-card.is-metadata-issue {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--red) 10%, transparent), transparent 36%),
    color-mix(in srgb, var(--red-soft) 70%, var(--surface-soft));
}

.metadata-overview-card.is-metadata-disabled,
.metadata-overview-card.is-metadata-empty {
  border-color: color-mix(in srgb, var(--border-strong) 72%, transparent);
}

.taxonomy-empty {
  width: 100%;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--border-strong) 88%, transparent);
  border-radius: 14px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.batch-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 52%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-sm);
  animation: enter-up 220ms var(--ease) both;
}

.batch-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
}

.batch-select-all:hover {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text);
}

.batch-select-all input,
.row-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.batch-select-all > span,
.row-check > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease);
}

.batch-select-all > span::after,
.row-check > span::after {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  content: "";
  opacity: 0;
  transform: rotate(-45deg) translateY(-1px) scale(0.8);
  transition: opacity 130ms ease, transform 130ms var(--ease);
}

.batch-select-all input:checked + span,
.row-check input:checked + span,
.batch-select-all input:indeterminate + span {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.batch-select-all input:checked + span::after,
.row-check input:checked + span::after {
  opacity: 1;
  transform: rotate(-45deg) translateY(-1px) scale(1);
}

.batch-select-all input:indeterminate + span::after {
  width: 8px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  opacity: 1;
  transform: none;
}

.batch-summary {
  min-width: 0;
}

.batch-summary strong,
.batch-summary span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-summary strong {
  color: var(--text);
  font-size: 12px;
}

.batch-summary span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.batch-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.batch-actions .button {
  min-height: 34px;
  padding-inline: 12px;
  font-size: 12px;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 270px;
  height: 40px;
}

.search-box .icon {
  position: absolute;
  left: 12px;
  z-index: 1;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 37px;
  border: 1px solid var(--border);
  border-radius: 7px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.search-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.search-box input::placeholder {
  color: var(--muted);
}

.sort-select {
  position: relative;
  display: flex;
  align-items: center;
  width: 156px;
  height: 40px;
}

.sort-select .icon {
  position: absolute;
  left: 11px;
  z-index: 1;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}

.sort-select select {
  width: 100%;
  height: 40px;
  padding: 0 30px 0 34px;
  border: 1px solid var(--border);
  border-radius: 7px;
  outline: 0;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 650;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.sort-select select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(6, auto);
  height: 40px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.segmented button {
  min-width: 48px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.segmented button.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}

.table-wrap {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.links-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.links-table th,
.links-table td {
  padding: 0 14px;
  text-align: left;
}

.links-table th {
  height: 42px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.links-table th:nth-child(1) { width: 27%; }
.links-table th:nth-child(2) { width: 20%; }
.links-table th:nth-child(3) { width: 10%; }
.links-table th:nth-child(4) { width: 10%; }
.links-table th:nth-child(5) { width: 14%; }
.links-table th:nth-child(6) { width: 264px; }

.links-table tbody tr {
  height: var(--row-height);
  border-bottom: 1px solid var(--border);
  transition: background-color 150ms ease;
}

.links-table.is-density-compact th {
  height: 34px;
}

.links-table.is-density-compact th,
.links-table.is-density-compact td {
  padding-inline: 10px;
}

.links-table.is-density-compact tbody tr {
  height: 58px;
}

.links-table.is-density-compact .link-primary strong {
  font-size: 12px;
}

.links-table.is-density-compact .target-line,
.links-table.is-density-compact .short-link-cell span,
.links-table.is-density-compact .date-cell span {
  font-size: 10px;
}

.links-table.is-density-compact .link-advanced-badges,
.links-table.is-density-compact .link-tags,
.links-table.is-density-compact .link-group-badge,
.links-table.is-density-compact .link-note-inline {
  margin-top: 4px;
}

.links-table.is-density-compact .row-actions {
  gap: 4px;
}

.links-table.is-density-compact .row-actions .icon-button {
  width: 32px;
  height: 32px;
}

.links-table tbody tr:last-child {
  border-bottom: 0;
}

.links-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface));
}

.links-table tbody tr.is-created-focus {
  background: color-mix(in srgb, var(--green-soft) 72%, var(--surface));
  animation: created-link-glow 2.8s var(--ease) 1;
}

.links-table tbody tr.is-created-focus:hover {
  background: color-mix(in srgb, var(--green-soft) 82%, var(--surface));
}

.links-table tbody tr.is-created-focus td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--green) 78%, var(--primary) 22%);
}

@keyframes created-link-glow {
  0% {
    background: color-mix(in srgb, var(--green-soft) 92%, var(--surface));
  }

  55% {
    background: color-mix(in srgb, var(--green-soft) 74%, var(--surface));
  }

  100% {
    background: color-mix(in srgb, var(--green-soft) 72%, var(--surface));
  }
}

.links-table tbody tr.is-lifecycle-focus {
  background: color-mix(in srgb, var(--warning-soft) 78%, var(--surface));
  animation: lifecycle-link-glow 3s var(--ease) 1;
}

.links-table tbody tr.is-lifecycle-focus:hover {
  background: color-mix(in srgb, var(--warning-soft) 86%, var(--surface));
}

.links-table tbody tr.is-lifecycle-focus td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warning) 82%, var(--primary) 18%);
}

@keyframes lifecycle-link-glow {
  0% {
    background: color-mix(in srgb, var(--warning-soft) 94%, var(--surface));
  }

  55% {
    background: color-mix(in srgb, var(--warning-soft) 82%, var(--surface));
  }

  100% {
    background: color-mix(in srgb, var(--warning-soft) 78%, var(--surface));
  }
}

.link-primary,
.short-link-cell {
  min-width: 0;
}

.link-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.row-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.row-check > span {
  width: 17px;
  height: 17px;
  border-radius: 5px;
}

.link-primary strong,
.link-primary span,
.short-link-cell a,
.short-link-cell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-primary strong {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
}

.link-primary strong > span {
  min-width: 0;
  margin-top: 0;
  color: var(--text);
  font-size: 12px;
}

.link-primary > span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.link-primary em {
  display: block;
  overflow: hidden;
  max-width: 100%;
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 10px;
  font-style: normal;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--amber-soft) 48%, var(--surface));
  color: color-mix(in srgb, var(--amber) 72%, var(--muted));
  cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.star-mark .icon {
  width: 13px;
  height: 13px;
}

.star-mark:hover {
  transform: translateY(-1px) rotate(-4deg);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--amber) 16%, transparent);
}

.star-mark.is-active {
  border-color: color-mix(in srgb, var(--amber) 58%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 92%, #fff 8%), color-mix(in srgb, var(--amber) 68%, var(--primary) 18%));
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--amber) 24%, transparent);
}

.short-link-cell a {
  color: var(--primary);
  font-size: 11px;
  font-weight: 650;
}

.short-link-cell span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: 6px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.status-badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
}

.status-badge.active {
  background: var(--green-soft);
  color: var(--green);
}

.status-badge.active::before { background: var(--green); }

.status-badge.inactive {
  background: var(--red-soft);
  color: var(--red);
}

.status-badge.inactive::before { background: var(--red); }

.status-badge.expired {
  background: var(--amber-soft);
  color: var(--amber);
}

.status-badge.expired::before { background: var(--amber); }

.status-badge.scheduled {
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--surface));
  color: var(--primary);
}

.status-badge.scheduled::before {
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.status-badge.trashed {
  background: var(--red-soft);
  color: var(--red);
}

.status-badge.trashed::before {
  background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 14%, transparent);
}

.status-cell {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.status-badge-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.status-badge-note.is-expiring {
  color: color-mix(in srgb, var(--amber) 88%, var(--text));
  font-weight: 600;
}

.link-advanced-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.link-advanced-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  color: color-mix(in srgb, var(--primary) 88%, var(--text));
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.link-advanced-badge.is-metadata.is-live {
  border-color: color-mix(in srgb, var(--green) 26%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 78%, var(--surface));
  color: color-mix(in srgb, var(--green) 82%, var(--text));
}

.link-advanced-badge.is-metadata.is-cache {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--surface));
  color: color-mix(in srgb, var(--primary) 84%, var(--text));
}

.link-advanced-badge.is-metadata.is-warn {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 80%, var(--surface));
  color: color-mix(in srgb, var(--amber) 84%, var(--text));
}

.link-advanced-badge.is-metadata.is-muted {
  border-color: color-mix(in srgb, var(--surface-elevated) 42%, var(--border));
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--muted);
}

.tag-filter-trigger {
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.tag-filter-trigger:hover,
.tag-filter-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 46%, var(--surface));
  color: var(--primary);
}

.tag-filter-trigger:active {
  transform: translateY(1px);
}

.link-advanced-badge.is-group {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 78%, var(--surface));
  color: color-mix(in srgb, var(--amber) 78%, var(--text));
}

.link-advanced-badge.is-lifecycle.is-warn {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 80%, var(--surface));
  color: color-mix(in srgb, var(--amber) 84%, var(--text));
}

.link-advanced-badge.is-lifecycle.is-soon {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--border));
  background: color-mix(in srgb, #fef3c7 88%, var(--surface));
  color: color-mix(in srgb, #b45309 86%, var(--text));
}

.link-advanced-badge.is-lifecycle.is-critical {
  border-color: color-mix(in srgb, var(--red) 30%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 80%, var(--surface));
  color: color-mix(in srgb, var(--red) 86%, var(--text));
}

.group-filter-trigger {
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.group-filter-trigger:hover,
.group-filter-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--amber) 68%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 48%, var(--surface));
  color: color-mix(in srgb, var(--amber) 92%, var(--text));
}

.group-filter-trigger:active {
  transform: translateY(1px);
}

.click-count strong,
.click-count span,
.date-cell strong,
.date-cell span {
  display: block;
}

.click-count strong,
.date-cell strong {
  color: var(--text);
  font-size: 11px;
}

.click-count span,
.date-cell span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

.row-actions .icon-button {
  width: 32px;
  height: 32px;
  border-color: transparent;
  background: transparent;
}

.row-actions .icon {
  width: 15px;
  height: 15px;
}

.row-actions .danger:hover {
  background: var(--red-soft);
  color: var(--red);
}

.row-actions .restore:hover {
  background: var(--green-soft);
  color: var(--green);
}

.row-actions .power.is-off {
  color: var(--red);
}

.table-loading,
.modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.empty-state {
  display: grid;
  justify-items: center;
  padding: 54px 20px;
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
}

.empty-state h3 {
  margin: 14px 0 3px;
  font-size: 14px;
}

.empty-state p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.links-section .empty-state.is-error {
  min-height: 190px;
}

.links-section .empty-state.is-error h3 {
  color: var(--red);
}

.links-section .empty-state.is-error p {
  width: min(100%, 620px);
  margin-right: auto;
  margin-left: auto;
}

.database-alert {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--red) 26%, var(--border));
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--red) 10%, transparent), transparent 34%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  animation: alert-in 220ms var(--ease) both;
}

.database-alert-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--red-soft);
  color: var(--red);
}

.database-alert strong,
.database-alert p {
  display: block;
}

.database-alert strong {
  color: var(--text);
  font-size: 14px;
}

.database-alert p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  gap: 18px;
  color: var(--muted);
  font-size: 11px;
}

.pagination-bar strong {
  color: var(--text-soft);
}

.page-controls,
.page-controls label,
.page-buttons {
  display: flex;
  align-items: center;
  gap: 7px;
}

.page-controls select {
  height: 32px;
  padding: 0 26px 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.page-buttons button {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 11px;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms var(--ease);
}

.page-buttons button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.page-buttons button.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.page-buttons button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.modal,
.confirm-dialog,
.command-palette {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.modal::backdrop,
.confirm-dialog::backdrop,
.command-palette::backdrop {
  background: rgba(9, 14, 22, 0.55);
  backdrop-filter: blur(3px);
  animation: fade-in 180ms ease both;
}

.modal[open],
.confirm-dialog[open],
.command-palette[open] {
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-panel {
  width: min(100%, 610px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-modal);
  animation: modal-in 260ms var(--ease) both;
}

.message-center-panel {
  width: min(100%, 620px);
  max-height: min(78vh, 780px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent));
  box-shadow: var(--shadow-modal);
  animation: modal-in 260ms var(--ease) both;
}

.message-center-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
}

.message-center-toolbar h2 {
  margin: 6px 0 0;
  font-size: 22px;
}

.message-center-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-center-meta {
  padding: 12px 22px 14px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.7;
}

.message-center-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 22px 4px;
}

.message-center-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text-soft);
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.message-center-filter:hover {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  color: var(--text);
  transform: translateY(-1px);
}

.message-center-filter.is-active {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface));
  color: var(--primary);
}

.message-center-filter span,
.message-center-filter strong {
  display: block;
}

.message-center-filter span {
  font-size: 11px;
  font-weight: 700;
}

.message-center-filter strong {
  min-width: 20px;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.message-center-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 8px 22px 0;
  color: var(--muted);
  text-align: center;
}

.message-center-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary-soft) 88%, var(--surface));
  color: var(--primary);
}

.message-center-empty-icon .icon {
  width: 22px;
  height: 22px;
}

.message-center-empty strong {
  color: var(--text);
  font-size: 16px;
}

.message-center-empty p {
  margin: 0;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.8;
}

.message-center-list {
  display: grid;
  gap: 12px;
  padding: 10px 22px 22px;
  overflow: auto;
}

.message-center-item {
  padding: 16px 17px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 7%, transparent), transparent 34%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}

.message-center-item.is-unread {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.message-center-item.is-read {
  opacity: 0.88;
}

.message-center-item.is-danger {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--red) 9%, transparent), transparent 34%),
    var(--surface);
}

.message-center-item.is-warn {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--amber) 10%, transparent), transparent 34%),
    var(--surface);
}

.message-center-item-head,
.message-center-item-footer,
.message-center-item-actions {
  display: flex;
}

.message-center-item-head,
.message-center-item-footer {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.message-center-item-head {
  margin-bottom: 10px;
}

.message-center-level,
.message-center-status,
.message-center-read-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.message-center-level {
  background: color-mix(in srgb, var(--primary-soft) 80%, var(--surface));
  color: var(--primary);
}

.message-center-time {
  color: var(--muted);
  font-size: 11px;
}

.message-center-item h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

.message-center-item p {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.8;
}

.message-center-item-footer {
  margin-top: 14px;
}

.message-center-item-actions {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.message-center-status {
  background: var(--surface-soft);
  color: var(--text-soft);
}

.message-center-status.is-danger {
  background: var(--red-soft);
  color: var(--red);
}

.message-center-status.is-warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.message-center-status.is-info,
.message-center-status.is-ok {
  background: var(--green-soft);
  color: var(--green);
}

.message-center-read-indicator {
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--muted);
}

.detail-modal .modal-panel {
  width: min(100%, 720px);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 4px 0 0;
  font-size: 17px;
}

.modal-header .icon-button {
  width: 34px;
  height: 34px;
  border-color: transparent;
  background: transparent;
}

.modal-body {
  max-height: min(65vh, 620px);
  overflow: auto;
  padding: 20px 22px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.create-mode-switch-modal {
  width: 100%;
  margin: 0;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 58%, var(--surface)), var(--surface-soft));
}

.create-mode-switch-modal label {
  color: var(--text-soft);
}

.create-mode-switch-modal label:hover {
  color: var(--text);
}

.create-mode-switch-modal label:has(input:checked) {
  background: var(--surface-raised);
  color: var(--primary);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 14%, transparent);
}

.create-mode-switch-modal input:checked + span,
.create-mode-switch-modal input:checked + span + small {
  color: var(--primary);
}

.create-mode-switch-modal small {
  color: var(--muted);
}

.bulk-create-panel-modal {
  margin-top: 0;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-soft) 50%, transparent), transparent 38%),
    var(--surface-soft);
}

.bulk-create-panel-modal .bulk-create-tips span {
  border-color: var(--border);
  color: var(--text-soft);
  background: var(--surface);
}

.bulk-create-panel-modal .bulk-create-helper-meta {
  color: var(--muted);
}

.bulk-create-panel-modal .bulk-create-draft {
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--border));
  color: var(--text-soft);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--cyan-soft) 54%, transparent), transparent 38%),
    var(--surface);
}

.bulk-create-panel-modal .bulk-create-draft.is-saving {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--amber-soft) 58%, transparent), transparent 38%),
    var(--surface);
}

.bulk-create-panel-modal .bulk-create-draft button {
  border-color: var(--border);
  color: var(--text-soft);
  background: var(--surface-soft);
}

.bulk-create-panel-modal .bulk-create-draft button:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

.bulk-create-panel-modal .bulk-create-readiness {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary-soft) 58%, transparent), transparent 36%),
    var(--surface);
}

.bulk-create-panel-modal .bulk-create-readiness[data-level="ready"] {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--green-soft) 64%, transparent), transparent 36%),
    var(--surface);
}

.bulk-create-panel-modal .bulk-create-readiness[data-level="warn"] {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--amber-soft) 64%, transparent), transparent 36%),
    var(--surface);
}

.bulk-create-panel-modal .bulk-create-readiness[data-level="danger"] {
  border-color: color-mix(in srgb, var(--red) 36%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--red-soft) 64%, transparent), transparent 36%),
    var(--surface);
}

.bulk-create-panel-modal .bulk-create-readiness-meter {
  background:
    radial-gradient(circle, var(--surface) 0 54%, transparent 56%),
    conic-gradient(var(--primary) var(--batch-readiness), color-mix(in srgb, var(--border) 70%, transparent) 0);
}

.bulk-create-panel-modal .bulk-create-readiness[data-level="ready"] .bulk-create-readiness-meter {
  background:
    radial-gradient(circle, var(--surface) 0 54%, transparent 56%),
    conic-gradient(var(--green) var(--batch-readiness), color-mix(in srgb, var(--border) 70%, transparent) 0);
}

.bulk-create-panel-modal .bulk-create-readiness[data-level="warn"] .bulk-create-readiness-meter {
  background:
    radial-gradient(circle, var(--surface) 0 54%, transparent 56%),
    conic-gradient(var(--amber) var(--batch-readiness), color-mix(in srgb, var(--border) 70%, transparent) 0);
}

.bulk-create-panel-modal .bulk-create-readiness[data-level="danger"] .bulk-create-readiness-meter {
  background:
    radial-gradient(circle, var(--surface) 0 54%, transparent 56%),
    conic-gradient(var(--red) var(--batch-readiness), color-mix(in srgb, var(--border) 70%, transparent) 0);
}

.bulk-create-panel-modal .bulk-create-readiness-meter strong,
.bulk-create-panel-modal .bulk-create-readiness-copy strong {
  color: var(--text);
}

.bulk-create-panel-modal .bulk-create-readiness-meter span,
.bulk-create-panel-modal .bulk-create-readiness-copy p,
.bulk-create-panel-modal .bulk-create-readiness-advice span {
  color: var(--text-soft);
}

.bulk-create-panel-modal .bulk-create-readiness-advice span {
  background: var(--surface-soft);
}

.bulk-create-panel-modal .bulk-create-stat,
.bulk-create-panel-modal .bulk-create-preview,
.bulk-create-panel-modal .bulk-create-preview-item,
.bulk-create-panel-modal .bulk-create-preview-empty,
.bulk-create-panel-modal .bulk-create-preview-more {
  border-color: var(--border);
  background: var(--surface);
}

.bulk-create-panel-modal .bulk-create-stat small,
.bulk-create-panel-modal .bulk-create-preview-head span,
.bulk-create-panel-modal .bulk-create-preview-main span,
.bulk-create-panel-modal .bulk-create-preview-meta span,
.bulk-create-panel-modal .bulk-create-preview-empty,
.bulk-create-panel-modal .bulk-create-preview-more {
  color: var(--text-soft);
}

.bulk-create-panel-modal .bulk-create-stat strong,
.bulk-create-panel-modal .bulk-create-preview-head strong,
.bulk-create-panel-modal .bulk-create-preview-main strong {
  color: var(--text);
}

.bulk-create-panel-modal .bulk-create-stat.is-alert {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--border));
  background: var(--amber-soft);
}

.bulk-create-panel-modal .bulk-create-stat.is-alert strong {
  color: var(--amber);
}

.bulk-create-panel-modal .bulk-create-stat.is-muted {
  border-color: color-mix(in srgb, var(--cyan) 24%, var(--border));
  background: var(--cyan-soft);
}

.bulk-create-panel-modal .bulk-create-stat.is-muted strong {
  color: var(--cyan);
}

.bulk-create-panel-modal .bulk-create-stat.is-security {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
  background: var(--amber-soft);
}

.bulk-create-panel-modal .bulk-create-stat.is-security strong {
  color: var(--amber);
}

.bulk-create-panel-modal .bulk-create-preview-filters button {
  border-color: var(--border);
  color: var(--text-soft);
  background: var(--surface-soft);
}

.bulk-create-panel-modal .bulk-create-preview-filters button:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

.bulk-create-panel-modal .bulk-create-preview-filters button.is-active {
  border-color: color-mix(in srgb, var(--primary) 64%, var(--border));
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}

.bulk-create-panel-modal .bulk-create-preview-filters button span {
  color: inherit;
}

.bulk-create-panel-modal .bulk-create-preview-filters button.is-active span {
  background: rgba(255, 255, 255, 0.18);
}

.bulk-create-panel-modal .bulk-create-preview-search {
  border-color: var(--border);
  background: var(--surface);
}

.bulk-create-panel-modal .bulk-create-preview-search input {
  color: var(--text);
}

.bulk-create-panel-modal .bulk-create-preview-search input::placeholder {
  color: var(--muted);
}

.bulk-create-panel-modal .bulk-create-preview-search button {
  border-color: var(--border);
  color: var(--text-soft);
  background: var(--surface-soft);
}

.bulk-create-panel-modal .bulk-create-preview-search button:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.bulk-create-panel-modal .bulk-create-preview-actions .button {
  border-color: var(--border);
  color: var(--text-soft);
  background: var(--surface);
}

.bulk-create-panel-modal .bulk-create-preview-actions .button:hover {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border-strong));
  color: var(--text);
  background: var(--surface-soft);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 10%, transparent);
}

.bulk-create-panel-modal .bulk-create-preview-actions .button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}

.bulk-create-panel-modal .bulk-create-preview-actions .button[data-batch-preview-copy="ready"] {
  border-color: color-mix(in srgb, var(--green) 38%, var(--border));
  color: color-mix(in srgb, var(--green) 86%, var(--text));
  background: color-mix(in srgb, var(--green-soft) 72%, var(--surface));
}

.bulk-create-panel-modal .bulk-create-preview-actions .button[data-batch-preview-copy="ready"]:hover {
  border-color: color-mix(in srgb, var(--green) 56%, var(--border-strong));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--green) 14%, transparent);
}

.bulk-create-panel-modal .bulk-create-preview-actions .button[data-batch-preview-export="risk"] {
  border-color: color-mix(in srgb, var(--red) 38%, var(--border));
  color: color-mix(in srgb, var(--red) 88%, var(--text));
  background: color-mix(in srgb, var(--red-soft) 74%, var(--surface));
}

.bulk-create-panel-modal .bulk-create-preview-actions .button[data-batch-preview-export="risk"]:hover {
  border-color: color-mix(in srgb, var(--red) 56%, var(--border-strong));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--red) 13%, transparent);
}

.bulk-create-panel-modal .bulk-create-preview-meta span {
  background: var(--surface-soft);
}

.bulk-create-panel-modal .bulk-create-preview-row-actions button {
  border-color: var(--border);
  color: var(--text-soft);
  background: var(--surface-soft);
}

.bulk-create-panel-modal .bulk-create-preview-row-actions button:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

.bulk-create-panel-modal .bulk-create-preview-item.is-invalid {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
  background: var(--amber-soft);
}

.bulk-create-panel-modal .bulk-create-preview-item.is-duplicate {
  border-color: color-mix(in srgb, var(--cyan) 26%, var(--border));
  background: var(--cyan-soft);
}

.bulk-create-panel-modal .bulk-create-preview-item.is-security-warn {
  border-color: color-mix(in srgb, var(--amber) 40%, var(--border));
  background: var(--amber-soft);
}

.bulk-create-panel-modal .bulk-create-preview-item.is-security-danger {
  border-color: color-mix(in srgb, var(--red) 36%, var(--border));
  background: var(--red-soft);
}

.field {
  display: block;
  min-width: 0;
}

.field-full {
  grid-column: 1 / -1;
}

.field > span {
  display: block;
  margin-bottom: 7px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 650;
}

.field > span b {
  color: var(--red);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.field input,
.field select {
  height: 42px;
}

.field textarea {
  min-height: 104px;
  padding-top: 11px;
  padding-bottom: 11px;
  resize: vertical;
  line-height: 1.65;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
}

.advanced-link-card {
  position: relative;
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 13%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent)),
    var(--surface);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent),
    0 22px 46px rgba(15, 34, 68, 0.08);
  animation: advanced-card-in 360ms var(--ease) both;
}

.advanced-link-card::before,
.advanced-link-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.advanced-link-card::before {
  inset: -38% auto auto -12%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 12%, transparent), transparent 68%);
  opacity: 0.9;
}

.advanced-link-card::after {
  inset: auto -72px -96px auto;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #38bdf8 12%, transparent), transparent 70%);
  opacity: 0.85;
}

.advanced-link-card > * {
  position: relative;
  z-index: 1;
}

.advanced-link-card.is-collapsed {
  gap: 10px;
  padding-block: 16px;
}

.advanced-link-card-body {
  display: grid;
  gap: 14px;
}

.advanced-link-card-body[hidden] {
  display: none;
}

.advanced-link-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 8px;
}

.advanced-link-head-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.advanced-link-head small {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-raised));
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 65%, transparent);
}

.advanced-link-head strong {
  display: block;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.advanced-link-head p,
.advanced-link-hint {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.advanced-link-head p {
  max-width: 720px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
}

.advanced-link-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 820;
  transition: transform 160ms var(--ease), border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.advanced-link-toggle:hover,
.advanced-link-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  color: var(--primary);
}

.advanced-link-toggle .icon {
  width: 14px;
  height: 14px;
  transition: transform 180ms var(--ease);
}

.advanced-link-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.advanced-link-mini {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  cursor: pointer;
}

.advanced-link-mini[hidden] {
  display: none;
}

.advanced-link-mini span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent);
  transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease;
}

.advanced-link-mini:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
  outline-offset: 3px;
}

.advanced-link-mini span:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-raised));
}

.advanced-link-mini span[data-level="ok"] {
  border-color: color-mix(in srgb, var(--green) 25%, var(--border));
  background: color-mix(in srgb, var(--green) 8%, var(--surface-raised));
}

.advanced-link-mini span[data-level="info"] {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-raised));
}

.advanced-link-mini span[data-level="warn"] {
  border-color: color-mix(in srgb, #f59e0b 32%, var(--border));
  background: color-mix(in srgb, #f59e0b 9%, var(--surface-raised));
}

.advanced-link-mini strong,
.advanced-link-mini small {
  display: block;
  min-width: 0;
}

.advanced-link-mini strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-link-mini small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.advanced-link-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.advanced-link-mini-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.advanced-link-card:not(.is-collapsed) .advanced-link-mini-actions,
.advanced-link-card:not(.is-collapsed) .advanced-link-mini-tools {
  display: none;
}

.advanced-link-mini-actions button,
.advanced-link-mini-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 93%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 820;
  transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.advanced-link-mini-actions button:hover,
.advanced-link-mini-actions button:focus-visible,
.advanced-link-mini-actions button.is-active,
.advanced-link-mini-tools button:hover,
.advanced-link-mini-tools button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-raised));
  color: var(--primary);
}

.advanced-link-mini-tools button {
  min-height: 32px;
  border-style: dashed;
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  font-size: 10px;
}

.advanced-link-mini-tools button[data-advanced-mini-tool="clear"] {
  border-color: color-mix(in srgb, #ef4444 18%, var(--border));
  color: color-mix(in srgb, #ef4444 62%, var(--text-soft));
}

.advanced-link-mini-tools button[data-advanced-mini-tool="clear"]:hover,
.advanced-link-mini-tools button[data-advanced-mini-tool="clear"]:focus-visible {
  border-color: color-mix(in srgb, #ef4444 36%, var(--border));
  background: color-mix(in srgb, #ef4444 8%, var(--surface-raised));
  color: #ef4444;
}

.advanced-link-toolbox {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.72fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface-raised)), color-mix(in srgb, var(--green) 5%, var(--surface-soft)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

.advanced-link-toolbox-copy {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
}

.advanced-link-toolbox-copy small,
.advanced-link-inspector small {
  color: var(--primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
}

.advanced-link-toolbox-copy strong,
.advanced-link-inspector strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.advanced-link-toolbox-copy p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.advanced-link-toolbox-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.advanced-link-toolbox-stats span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 72px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.advanced-link-toolbox-stats b {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.advanced-link-toolbox-stats small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.advanced-link-tool-actions,
.advanced-link-presets,
.advanced-routing-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.advanced-link-tool-actions {
  grid-column: 1 / -1;
}

.advanced-link-tool-actions button,
.advanced-link-presets button,
.advanced-routing-tool-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.advanced-link-tool-actions button:hover,
.advanced-link-presets button:hover,
.advanced-routing-tool-row button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-raised));
  color: var(--primary);
}

.advanced-link-tool-actions .icon {
  width: 14px;
  height: 14px;
}

.advanced-link-presets {
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--green) 28%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--green) 5%, var(--surface-raised));
}

.advanced-link-presets button {
  border-color: color-mix(in srgb, var(--green) 18%, var(--border));
}

.advanced-link-presets button[data-advanced-preset="hide_target"] {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border));
  background: color-mix(in srgb, var(--green) 11%, var(--surface-raised));
  color: color-mix(in srgb, var(--green) 78%, var(--text));
}

.advanced-link-block[data-advanced-rule="redirect_page"] {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
}

.advanced-link-block[data-advanced-rule="redirect_page"]::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 92%, #7dd3fc), color-mix(in srgb, var(--primary) 56%, #22c55e));
}

.advanced-link-personal {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

.advanced-link-personal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.advanced-link-personal-head div {
  display: grid;
  gap: 5px;
}

.advanced-link-personal-head small {
  color: var(--primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
}

.advanced-link-personal-head strong {
  color: var(--text);
  font-size: 14px;
}

.advanced-link-personal-head button,
.advanced-personal-item div button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.advanced-link-personal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.advanced-personal-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent));
}

.advanced-personal-item > button {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.advanced-personal-item strong,
.advanced-personal-item span,
.advanced-personal-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-personal-item strong {
  color: var(--text);
  font-size: 12px;
}

.advanced-personal-item span,
.advanced-personal-item small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.advanced-personal-item div {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 6px;
}

.advanced-link-inspector {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--amber) 14%, var(--border));
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 7%, var(--surface-raised)), color-mix(in srgb, var(--surface-soft) 94%, transparent));
}

.advanced-link-inspector > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 108px;
}

.advanced-link-inspector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.advanced-inspector-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.advanced-inspector-pill.is-success,
.advanced-inspector-pill.is-ok {
  border-color: color-mix(in srgb, var(--green) 26%, var(--border));
  background: color-mix(in srgb, var(--green) 10%, var(--surface-raised));
  color: color-mix(in srgb, var(--green) 78%, var(--text));
}

.advanced-inspector-pill.is-info {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-raised));
  color: var(--primary);
}

.advanced-inspector-pill.is-warn {
  border-color: color-mix(in srgb, var(--amber) 36%, var(--border));
  background: color-mix(in srgb, var(--amber) 11%, var(--surface-raised));
  color: color-mix(in srgb, var(--amber) 78%, var(--text));
}

.advanced-link-block {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent),
    0 10px 24px rgba(15, 34, 68, 0.04);
  transition:
    transform 220ms var(--ease),
    border-color 200ms ease,
    box-shadow 220ms ease,
    background-color 200ms ease;
}

.advanced-link-block::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 94%, #7dd3fc), color-mix(in srgb, var(--primary) 48%, #22c55e));
  opacity: 0.9;
}

.advanced-link-block:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 78%, transparent),
    0 18px 32px rgba(15, 34, 68, 0.08);
}

.advanced-link-block[open] {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--surface-soft) 90%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 82%, transparent),
    0 22px 38px rgba(15, 34, 68, 0.1);
}

.advanced-link-block > summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 16px;
  min-height: 76px;
  padding: 16px 18px 16px 20px;
  cursor: pointer;
  list-style: none;
}

.advanced-link-block > summary::-webkit-details-marker {
  display: none;
}

.advanced-link-block > summary::after {
  justify-self: end;
  width: 10px;
  height: 10px;
  margin-right: 2px;
  border-right: 2px solid color-mix(in srgb, var(--text-soft) 92%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--text-soft) 92%, transparent);
  content: "";
  transform: rotate(45deg);
  transition: transform 220ms var(--ease), border-color 200ms ease;
}

.advanced-link-block[open] > summary::after {
  border-color: var(--primary);
  transform: rotate(225deg);
}

.advanced-link-block > summary span,
.advanced-link-block > summary small {
  display: block;
}

.advanced-link-block > summary span {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.advanced-link-block > summary small {
  max-width: min(100%, 420px);
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  text-align: left;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

.advanced-link-body {
  padding: 0 18px 18px;
}

.advanced-link-block[open] .advanced-link-body {
  animation: advanced-block-in 240ms var(--ease) both;
}

.advanced-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.advanced-link-grid .field.is-disabled {
  opacity: 0.58;
}

.advanced-link-grid .field.is-disabled input {
  cursor: not-allowed;
}

.advanced-link-subsection {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 10%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent),
    0 12px 26px rgba(15, 34, 68, 0.06);
  animation: advanced-block-in 220ms var(--ease) both;
}

.advanced-link-subsection.is-active {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 76%, transparent),
    0 18px 30px rgba(15, 34, 68, 0.09);
}

.advanced-link-subsection-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px 16px;
}

.advanced-link-subsection-head small,
.advanced-link-subsection-head strong {
  display: block;
}

.advanced-link-subsection-head small {
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.advanced-link-subsection-head strong {
  margin-top: 6px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.advanced-link-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.advanced-link-metric {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  text-align: center;
}

.advanced-link-metric.is-success {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
}

.advanced-link-metric b,
.advanced-link-metric small {
  display: block;
}

.advanced-link-metric b {
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
}

.advanced-link-metric small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.advanced-link-subgrid {
  gap: 12px;
}

.advanced-link-body .field {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 8%, var(--border));
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease;
}

.advanced-link-body .field:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 78%, transparent),
    0 10px 20px rgba(15, 34, 68, 0.05);
}

.advanced-link-body .field > span {
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--text-soft) 88%, var(--primary));
  font-size: 11px;
  font-weight: 700;
}

.advanced-link-body .field > .advanced-routing-tool-row {
  margin: 10px 0 0;
  color: inherit;
  font-size: 11px;
  font-weight: 800;
}

.advanced-inline-tools {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.advanced-inline-tools button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.advanced-inline-tools button:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-raised));
  color: var(--primary);
}

.advanced-routing-tool-row button {
  min-height: 32px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.advanced-landing-preview {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface-raised)), color-mix(in srgb, var(--surface-soft) 94%, transparent));
}

.advanced-landing-preview.is-disabled {
  opacity: 0.72;
}

.advanced-landing-preview-media {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 112px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.advanced-landing-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advanced-landing-preview-media span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.advanced-landing-preview-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.advanced-landing-preview-copy small {
  color: var(--primary);
  font-size: 10px;
  font-weight: 850;
}

.advanced-landing-preview-copy strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.advanced-landing-preview-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.advanced-landing-preview-copy div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.advanced-landing-preview-copy span,
.advanced-landing-preview-copy b {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.advanced-landing-preview-copy b {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green) 10%, var(--surface-raised));
  color: color-mix(in srgb, var(--green) 78%, var(--text));
}

.advanced-form-preview {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green) 7%, var(--surface-raised)), color-mix(in srgb, var(--primary) 5%, var(--surface-soft)));
}

.advanced-form-preview.is-disabled {
  opacity: 0.74;
}

.advanced-form-preview-head {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.advanced-form-preview-head small,
.advanced-form-preview-head em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.advanced-form-preview-head small {
  color: color-mix(in srgb, var(--green) 76%, var(--text));
}

.advanced-form-preview-head strong {
  color: var(--text);
  font-size: 14px;
}

.advanced-form-preview-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.advanced-form-preview-fields span {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.advanced-form-preview-fields b,
.advanced-form-preview-fields small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-form-preview-fields b {
  color: var(--text);
  font-size: 11px;
}

.advanced-form-preview-fields small {
  color: var(--muted);
  font-size: 10px;
}

.advanced-form-preview-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--green) 58%, var(--primary)));
  font-size: 11px;
  font-weight: 850;
}

.advanced-link-body .field input,
.advanced-link-body .field textarea,
.advanced-link-body .field select {
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, #ffffff);
}

.advanced-link-body .field select {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--border);
  outline: 0;
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.advanced-link-body .field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.advanced-link-body .field-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface-raised)), color-mix(in srgb, var(--surface-soft) 92%, transparent));
}

.advanced-link-body .field-switch > span {
  color: var(--text);
}

.advanced-link-hint {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-raised));
}

.advanced-routing-preview-shell {
  gap: 16px;
}

.advanced-routing-preview-shell[data-routing-mode="geo"] {
  border-color: color-mix(in srgb, var(--green) 20%, var(--border));
}

.advanced-routing-capabilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.advanced-routing-capability,
.advanced-routing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.advanced-routing-capability.is-on {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-raised));
  color: var(--primary);
}

.advanced-routing-capability.is-off {
  border-style: dashed;
  opacity: 0.72;
}

.advanced-routing-preview-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.advanced-routing-preview-meta span,
.advanced-routing-preview-summary,
.advanced-routing-preview-footer,
.advanced-routing-empty {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

.advanced-routing-preview-summary {
  color: var(--text);
  font-weight: 700;
}

.advanced-routing-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.advanced-routing-item {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 9%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent),
    0 14px 26px rgba(15, 34, 68, 0.06);
  animation: advanced-block-in 220ms var(--ease) both;
}

.advanced-routing-item.is-geo {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
}

.advanced-routing-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.advanced-routing-item-head strong,
.advanced-routing-item-head span {
  display: block;
}

.advanced-routing-item-head strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.advanced-routing-item-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.advanced-routing-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.advanced-routing-badge.is-region {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-raised));
}

.advanced-routing-badge.is-device {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
  background: color-mix(in srgb, var(--green) 10%, var(--surface-raised));
}

.advanced-routing-badge.is-language {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 24%, var(--border));
  background: color-mix(in srgb, var(--amber) 12%, var(--surface-raised));
}

.advanced-routing-badge.is-neutral {
  color: var(--text-soft);
  border-style: dashed;
}

.advanced-routing-url {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.7;
  word-break: break-all;
}

.advanced-routing-preview-footer {
  margin-top: 12px;
}

.advanced-routing-preview-footer span {
  color: var(--text);
  font-weight: 700;
}

.advanced-routing-preview-footer.is-soft {
  margin-top: 8px;
}

.advanced-routing-empty strong,
.advanced-routing-empty p {
  display: block;
  margin: 0;
}

.advanced-routing-empty strong {
  color: var(--text);
  margin-bottom: 6px;
  font-size: 13px;
}

@keyframes advanced-card-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes advanced-block-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.prefix-input {
  display: flex;
  align-items: center;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.prefix-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.prefix-input > span {
  padding-left: 11px;
  color: var(--muted);
}

.prefix-input input {
  height: 40px;
  border: 0;
  box-shadow: none;
}

.prefix-input input:focus {
  border: 0;
  box-shadow: none;
}

.confirm-dialog[open] {
  place-items: center;
}

.confirm-panel {
  width: min(100%, 400px);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-modal);
  text-align: center;
  animation: modal-in 230ms var(--ease) both;
}

.confirm-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 8px;
  background: var(--red-soft);
  color: var(--red);
}

.confirm-panel h2 {
  margin: 15px 0 5px;
  font-size: 17px;
}

.confirm-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.confirm-panel > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.prompt-dialog .confirm-panel {
  text-align: left;
}

.prompt-icon {
  background: var(--primary-soft);
  color: var(--primary);
}

.prompt-panel {
  width: min(100%, 460px);
}

.prompt-field {
  margin-top: 18px;
}

.prompt-field input {
  font-size: 15px;
}

.prompt-hint {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.command-panel {
  width: min(100%, 680px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 34%),
    var(--surface-raised);
  box-shadow: var(--shadow-modal);
  animation: modal-in 240ms var(--ease) both;
}

.command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border);
}

.command-head h2 {
  margin: 4px 0 0;
  font-size: 18px;
}

.command-head .icon-button {
  width: 36px;
  height: 36px;
  border-color: transparent;
  background: transparent;
}

.command-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 16px 18px 12px;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.command-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.command-search .icon {
  color: var(--primary);
}

.command-search input {
  width: 100%;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.command-search input::placeholder {
  color: var(--muted);
}

.command-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 430px);
  overflow: auto;
  padding: 0 18px 16px;
}

.command-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 9px 12px 9px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.command-item:hover,
.command-item.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.command-item-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
}

.command-item-icon .icon {
  width: 18px;
  height: 18px;
}

.command-item-copy {
  min-width: 0;
}

.command-item-copy strong,
.command-item-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-item-copy strong {
  font-size: 14px;
  line-height: 1.3;
}

.command-item-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.command-item-kbd {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.command-empty {
  margin: 0;
  padding: 22px 14px;
  color: var(--muted);
  text-align: center;
}

.command-hint {
  margin: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.toast-region {
  position: fixed;
  top: 82px;
  right: 20px;
  z-index: 80;
  display: grid;
  width: min(calc(100vw - 40px), 360px);
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  color: var(--text-soft);
  pointer-events: auto;
  animation: toast-in 300ms var(--ease) both;
}

.toast.is-leaving {
  animation: toast-out 180ms ease both;
}

.toast-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--green-soft);
  color: var(--green);
}

.toast.error .toast-mark {
  background: var(--red-soft);
  color: var(--red);
}

.toast span {
  overflow-wrap: anywhere;
  font-size: 11px;
  font-weight: 600;
}

.toast button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border-radius: 8px;
  background: var(--primary-soft);
}

.detail-hero small,
.detail-hero strong,
.detail-hero a {
  display: block;
}

.detail-hero small {
  color: var(--muted);
  font-size: 10px;
}

.detail-hero strong {
  overflow: hidden;
  margin-top: 3px;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-hero a {
  overflow: hidden;
  margin-top: 5px;
  color: var(--primary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-count {
  min-width: 86px;
  text-align: right;
}

.detail-count b {
  display: block;
  font-size: 25px;
}

.detail-count span {
  color: var(--muted);
  font-size: 10px;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.detail-meta-grid > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.detail-meta-grid span,
.detail-meta-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-meta-grid span {
  color: var(--muted);
  font-size: 9px;
}

.detail-meta-grid strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 12px;
}

.detail-note {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34%),
    var(--surface-soft);
}

.detail-note span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.detail-note p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.detail-advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.detail-advanced-card {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 92%, transparent), var(--surface-soft));
  box-shadow: var(--shadow-sm);
}

.detail-advanced-card strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.detail-advanced-card.is-summary {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

.detail-advanced-card.is-primary {
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}

.detail-advanced-card.is-info {
  border-color: color-mix(in srgb, var(--cyan) 20%, var(--border));
}

.detail-advanced-card.is-success {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
}

.detail-advanced-card.is-danger {
  border-color: color-mix(in srgb, var(--red) 20%, var(--border));
}

.detail-advanced-card.is-amber {
  border-color: color-mix(in srgb, var(--amber) 24%, var(--border));
}

.detail-advanced-card.is-abtest {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 10%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
}

.detail-variant-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.detail-variant-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.detail-variant-summary span,
.detail-variant-summary strong {
  display: block;
}

.detail-variant-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.detail-variant-summary strong {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.35;
}

.detail-variant-note {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.detail-variant-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.detail-variant-row {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.detail-variant-row-head,
.detail-variant-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-variant-row-head {
  margin-bottom: 10px;
}

.detail-variant-row-head > div {
  min-width: 0;
}

.detail-variant-row-head strong,
.detail-variant-row-head span,
.detail-variant-row-head b {
  display: block;
}

.detail-variant-row-head strong {
  font-size: 13px;
}

.detail-variant-row-head span,
.detail-variant-row-meta span {
  color: var(--text-soft);
  font-size: 11px;
}

.detail-variant-row-head b {
  color: var(--primary);
  font-size: 18px;
  line-height: 1;
}

.detail-variant-bar {
  position: relative;
  overflow: hidden;
  height: 8px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-soft));
}

.detail-variant-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 94%, #60a5fa), color-mix(in srgb, var(--cyan) 88%, #22d3ee));
  box-shadow: 0 0 0 1px color-mix(in srgb, #ffffff 20%, transparent);
}

.detail-variant-row-meta + .detail-variant-row-meta {
  margin-top: 6px;
}

.detail-variant-row-meta span:last-child {
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-variant-row-meta.is-devices span:last-child {
  max-width: none;
  white-space: normal;
}

.detail-advanced-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.detail-advanced-list li + li {
  margin-top: 6px;
}

.detail-advanced-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.detail-advanced-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--surface));
  color: color-mix(in srgb, var(--primary) 90%, var(--text));
  font-size: 11px;
  font-weight: 700;
}

.detail-comments {
  margin-top: 16px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 8%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-soft) 92%, transparent);
}

.detail-comments-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.detail-comments-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-comments-head strong {
  color: var(--text);
  font-size: 13px;
}

.detail-comments-head span,
.detail-comments-head small {
  color: var(--muted);
  font-size: 11px;
}

.detail-comments-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.detail-comment-item {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.detail-comment-item header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.detail-comment-meta {
  min-width: 0;
}

.detail-comment-meta strong,
.detail-comment-meta span {
  display: block;
}

.detail-comment-meta strong {
  color: var(--text);
  font-size: 12px;
}

.detail-comment-meta span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.detail-comment-side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.detail-comment-visibility {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--surface));
  color: color-mix(in srgb, var(--primary) 84%, var(--text));
  font-size: 11px;
  font-weight: 700;
}

.detail-comment-delete {
  width: 36px;
  height: 36px;
}

.detail-comment-item p {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.detail-comments-empty {
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--border-strong) 88%, transparent);
  border-radius: 14px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.detail-comment-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
}

.detail-comment-field textarea {
  min-height: 108px;
  resize: vertical;
}

.detail-comment-form-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.detail-comment-visibility-field {
  width: min(240px, 100%);
}

.detail-comment-visibility-field select {
  min-height: 42px;
}

.detail-audit {
  margin-top: 16px;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.detail-audit header,
.detail-audit li,
.detail-audit li > div {
  display: flex;
}

.detail-audit header,
.detail-audit li {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-audit header strong {
  color: var(--text);
  font-size: 12px;
}

.detail-audit header span,
.detail-audit small {
  color: var(--muted);
  font-size: 11px;
}

.detail-audit ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.detail-audit li {
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.detail-audit li > div {
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.detail-audit li strong,
.detail-audit li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-audit li strong {
  color: var(--text-soft);
  font-size: 12px;
}

.detail-audit li span {
  color: var(--muted);
  font-size: 11px;
}

.detail-url-history {
  margin-top: 16px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--cyan-soft) 42%, var(--surface-soft));
}

.detail-url-history header,
.detail-url-history li,
.detail-url-history-flow {
  display: flex;
}

.detail-url-history header,
.detail-url-history li {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-url-history header strong {
  color: var(--text);
  font-size: 12px;
}

.detail-url-history header span,
.detail-url-history small {
  color: var(--muted);
  font-size: 11px;
}

.detail-url-history ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.detail-url-history li {
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--cyan) 14%, var(--border));
}

.detail-url-history-flow {
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--text-soft);
  font-size: 11px;
}

.detail-url-history-flow span,
.detail-url-history-flow strong {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-url-history-flow strong {
  color: var(--text);
  font-size: 11px;
}

.detail-url-history-flow .icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--cyan);
}

.detail-version-history {
  margin-top: 16px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 42%, var(--surface-soft)), var(--surface-soft));
}

.detail-version-history header,
.detail-version-history li,
.detail-version-top,
.detail-version-flow {
  display: flex;
}

.detail-version-history header,
.detail-version-history li,
.detail-version-top {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-version-history header strong,
.detail-version-top strong,
.detail-version-history p {
  color: var(--text);
}

.detail-version-history header strong {
  font-size: 12px;
}

.detail-version-history header span,
.detail-version-history small,
.detail-version-top span,
.detail-version-current {
  color: var(--muted);
  font-size: 11px;
}

.detail-version-history ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.detail-version-history li {
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  flex-direction: column;
  align-items: stretch;
}

.detail-version-top > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.detail-version-history p {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 650;
}

.detail-version-flow {
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.detail-version-flow strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-soft);
  font-size: 11px;
}

.detail-version-history small {
  margin-top: 8px;
}

.detail-version-button {
  min-height: 34px;
  padding-inline: 12px;
}

.detail-version-current {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

@media (max-width: 720px) {
  .taxonomy-card-head,
  .taxonomy-panel header,
  .detail-comments-head,
  .detail-comment-item header,
  .detail-comment-form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .taxonomy-grid {
    grid-template-columns: 1fr;
  }

  .taxonomy-chip,
  .taxonomy-active-chip {
    width: 100%;
    justify-content: space-between;
  }

  .detail-comment-side {
    justify-content: space-between;
  }

  .detail-comment-visibility-field {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .taxonomy-card,
  .detail-comments {
    padding: 14px;
  }

  .taxonomy-chip-list {
    gap: 8px;
  }

  .detail-audit li {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .detail-url-history li {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .detail-url-history-flow {
    width: 100%;
  }

  .detail-url-history-flow span,
  .detail-url-history-flow strong {
    max-width: calc(50vw - 84px);
  }

  .detail-version-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-version-button,
  .detail-version-current {
    width: 100%;
    justify-content: center;
  }
}

.detail-chart {
  height: 190px;
  margin-top: 18px;
}

.detail-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.detail-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding-inline: 10px;
  font-size: 12px;
}

.detail-actions .button span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-chart canvas {
  width: 100%;
  height: 100%;
}

.detail-devices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.detail-qrcode {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), color-mix(in srgb, var(--surface-elevated) 92%, transparent));
  box-shadow: var(--shadow-sm);
  animation: enter-up 420ms 90ms var(--ease) both;
}

.detail-qrcode-shell {
  display: grid;
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.detail-qrcode-preview {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 232px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 94%, transparent), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 65%, transparent);
}

.detail-qrcode-preview::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 18px;
  pointer-events: none;
}

.detail-qrcode-preview svg {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 212px);
  height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--primary) 10%, transparent);
  transform-origin: center;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.detail-qrcode:hover .detail-qrcode-preview svg {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 22px 38px color-mix(in srgb, var(--primary) 14%, transparent);
}

.detail-qrcode-controls {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.detail-qrcode-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-qrcode-toolbar .button {
  min-height: 42px;
  padding-inline: 14px;
  border-radius: 15px;
}

.detail-qrcode-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.detail-qrcode-meta > div {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 58%, transparent);
}

.detail-qrcode-meta span,
.detail-qrcode-meta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-qrcode-meta span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.detail-qrcode-meta strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 12px;
}

.detail-qrcode-color {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 240px);
  min-height: 48px;
  padding: 8px 10px 8px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 54%, transparent);
}

.detail-qrcode-color input[type="color"] {
  width: 46px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.detail-qrcode-color input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.detail-qrcode-color input[type="color"]::-webkit-color-swatch {
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 10px;
}

.detail-qrcode-color input[type="color"]::-moz-color-swatch {
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 10px;
}

.detail-qrcode-hint {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.75;
}

.detail-qrcode-fallback {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  justify-items: center;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.detail-device {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
}

.detail-device span,
.detail-device strong {
  display: block;
}

.detail-device span {
  color: var(--muted);
  font-size: 9px;
}

.detail-device strong {
  margin-top: 2px;
  font-size: 15px;
}

.app-layout.is-compact {
  --row-height: 58px;
}

.app-layout.is-compact .links-table th {
  height: 36px;
}

.app-layout.is-compact .stat-tile {
  min-height: 92px;
  padding-block: 12px;
}

.app-layout.is-compact .stat-icon {
  width: 38px;
  height: 38px;
}

.settings-content {
  padding-right: 52px;
}

.settings-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 150px;
  padding: 26px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: var(--radius);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--primary) 13%, var(--surface)) 0%, var(--surface) 62%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  animation: enter-up 460ms var(--ease) both;
}

.settings-hero::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--primary) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cyan) 10%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  content: "";
  mask-image: linear-gradient(90deg, #000 0%, transparent 82%);
  pointer-events: none;
}

.settings-hero > * {
  position: relative;
  z-index: 1;
}

.settings-hero h1 {
  margin: 6px 0 0;
  font-size: 26px;
  line-height: 1.25;
}

.settings-mode-card {
  min-width: 150px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: var(--shadow-sm);
}

.settings-mode-card small,
.settings-mode-card strong {
  display: block;
}

.settings-mode-card small {
  color: var(--muted);
  font-size: 10px;
}

.settings-mode-card strong {
  margin-top: 3px;
  color: var(--primary);
  font-size: 17px;
}

.settings-search {
  display: grid;
  grid-template-columns: 16px minmax(150px, 250px);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.settings-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.settings-search .icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.settings-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.settings-search input::placeholder {
  color: var(--muted);
}

.settings-search small {
  grid-column: 2;
  min-height: 12px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}

.settings-panel[data-search-empty="1"] .settings-grid::after {
  grid-column: 1 / -1;
  padding: 28px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  color: var(--muted);
  content: "当前分类没有匹配的设置项";
  font-size: 12px;
  text-align: center;
}

.analytics-period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.analytics-period select {
  min-height: 28px;
  padding: 0 22px 0 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 11px;
}

.analytics-period select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.settings-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-top: 16px;
}

.settings-tabs {
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  animation: enter-up 480ms 60ms var(--ease) both;
}

.settings-tabs button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-weight: 650;
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease);
}

.settings-tabs button:hover {
  transform: translateX(2px);
  background: var(--surface-soft);
  color: var(--text);
}

.settings-tabs button.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.settings-tabs span {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-panels {
  min-width: 0;
}

.settings-mobile-switch {
  display: none;
}

.settings-panel {
  display: none;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.settings-panel.is-active {
  display: block;
  animation: enter-up 300ms var(--ease) both;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(160px, 1.05fr);
  align-items: center;
  min-height: 68px;
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  transition: transform 170ms var(--ease), border-color 170ms ease, background-color 170ms ease, box-shadow 170ms ease;
}

.setting-row:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.setting-row-wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
}

.setting-row span {
  min-width: 0;
}

.setting-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setting-row input:not([type="checkbox"]),
.setting-row select,
.setting-row textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.setting-row input:not([type="checkbox"]),
.setting-row select {
  height: 40px;
  padding: 0 10px;
}

.setting-row textarea {
  min-height: 96px;
  resize: vertical;
  padding: 10px;
  line-height: 1.55;
}

.setting-row input[type="color"] {
  padding: 4px;
}

.setting-row input:focus,
.setting-row select:focus,
.setting-row textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.setting-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.setting-input-wrap em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.setting-row-switch {
  grid-template-columns: minmax(0, 1fr) auto;
  cursor: pointer;
}

.setting-row-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.setting-row-switch i {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.setting-row-switch i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.22);
  content: "";
  transition: transform 180ms var(--ease);
}

.setting-row-switch input:checked + i {
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.setting-row-switch input:checked + i::after {
  transform: translateX(20px);
}

.settings-passkey-manager {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.settings-passkey-manager header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-passkey-manager header > div:first-child > span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
}

.settings-passkey-manager h3 {
  margin: 5px 0 6px;
  font-size: 17px;
}

.settings-passkey-manager p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.settings-passkey-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.settings-passkey-meta span {
  min-height: 28px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
}

.settings-passkey-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.settings-passkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.settings-passkey-item strong,
.settings-passkey-item small {
  display: block;
}

.settings-passkey-item strong {
  font-size: 13px;
}

.settings-passkey-item small,
.settings-passkey-empty,
.settings-passkey-status {
  color: var(--muted);
  font-size: 11px;
}

.settings-passkey-status {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .settings-passkey-manager {
    padding: 14px;
  }

  .settings-passkey-manager header,
  .settings-passkey-item {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-passkey-manager header .button,
  .settings-passkey-item .icon-button {
    min-height: 44px;
  }
}

.auth-page,
.install-page,
.error-page {
  min-height: 100vh;
  background: var(--bg);
}

.auth-page {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 32%),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--green) 14%, transparent), transparent 28%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--surface-soft) 56%, var(--bg)));
}

.auth-page::before,
.auth-page::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.auth-page::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 42%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 42%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.2;
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

.auth-page::after {
  background: linear-gradient(115deg, transparent 0%, color-mix(in srgb, #ffffff 20%, transparent) 44%, transparent 72%);
  opacity: 0.24;
  transform: translateX(-52%);
  animation: auth-page-sheen 9s ease-in-out infinite;
}

.auth-page-basic {
  background: var(--bg);
}

.auth-page-basic::before,
.auth-page-basic::after {
  display: none;
}

.auth-page-basic .auth-brand-badges,
.auth-page-basic .auth-security-card,
.auth-page-basic .auth-metrics,
.auth-page-basic .auth-brand-copy {
  display: none;
}

.install-page {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 32%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 30%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--surface-soft) 52%, var(--bg)));
}

.install-page::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 48%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 48%, transparent) 1px, transparent 1px);
  background-size: 38px 38px;
  content: "";
  opacity: 0.28;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

.auth-theme {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 5;
}

.auth-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(420px, 1.15fr);
  width: min(calc(100% - 40px), 1040px);
  min-height: 620px;
  margin: 6vh auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--text) 14%, transparent);
  animation: enter-up 500ms var(--ease) both;
}

.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(137, 241, 194, 0.22), transparent 30%),
    linear-gradient(145deg, #11345c 0%, #1661b7 52%, #0b7a88 100%);
  color: #ffffff;
}

.auth-brand::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  pointer-events: none;
}

.auth-brand > * {
  position: relative;
  z-index: 1;
}

.auth-brand img {
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 35, 90, 0.25);
}

.auth-brand .eyebrow {
  color: rgba(255, 255, 255, 0.65);
}

.auth-brand h1 {
  margin: 8px 0 0;
  font-size: 32px;
}

.auth-brand-copy {
  max-width: 320px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 1.8;
}

.auth-brand-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.auth-brand-badges span,
.auth-security-card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.auth-brand-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  gap: 7px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 760;
}

.auth-brand-badges .icon {
  width: 14px;
  height: 14px;
}

.auth-metrics {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100px;
  gap: 8px;
  margin-top: 52px;
  padding-top: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-metrics span {
  width: 100%;
  min-width: 4px;
  border-radius: 3px 3px 0 0;
  background: rgba(255, 255, 255, 0.28);
  transform-origin: bottom;
  animation: bars-in 650ms var(--ease) both;
}

.auth-metrics span:nth-child(1) { height: 25%; animation-delay: 60ms; }
.auth-metrics span:nth-child(2) { height: 48%; animation-delay: 100ms; }
.auth-metrics span:nth-child(3) { height: 37%; animation-delay: 140ms; }
.auth-metrics span:nth-child(4) { height: 72%; animation-delay: 180ms; }
.auth-metrics span:nth-child(5) { height: 58%; animation-delay: 220ms; }
.auth-metrics span:nth-child(6) { height: 84%; animation-delay: 260ms; }
.auth-metrics span:nth-child(7) { height: 67%; animation-delay: 300ms; }
.auth-metrics span:nth-child(8) { height: 94%; animation-delay: 340ms; background: rgba(158, 240, 196, 0.7); }

.auth-security-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 14px;
  border-radius: 12px;
}

.auth-security-card > .icon {
  width: 22px;
  height: 22px;
}

.auth-security-card strong,
.auth-security-card span {
  display: block;
}

.auth-security-card strong {
  color: #ffffff;
  font-size: 13px;
}

.auth-security-card span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  line-height: 1.6;
}

.auth-form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 54px;
}

.auth-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.auth-quick-actions a,
.auth-quick-actions > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 760;
  text-decoration: none;
  transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.auth-quick-actions a:hover,
.auth-quick-actions a:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
  color: var(--primary);
}

.auth-quick-actions .icon {
  width: 14px;
  height: 14px;
}

.auth-form-head h2 {
  margin: 7px 0 0;
  font-size: 25px;
}

.auth-form-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.auth-time-panel {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 10px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-soft) 86%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.auth-time-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--primary);
}

.auth-time-icon .icon {
  width: 18px;
  height: 18px;
}

.auth-time-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.auth-time-main small,
.auth-time-main span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.35;
}

.auth-time-main time {
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 820;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.auth-time-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 7px;
}

.auth-time-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
  transition: transform 160ms var(--ease), border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.auth-time-action:hover,
.auth-time-action:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
  color: var(--primary);
}

.auth-time-action .icon {
  width: 14px;
  height: 14px;
}

.auth-time-action[hidden] {
  display: none;
}

.auth-login-hints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.auth-login-hints span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 780;
}

.auth-login-hints b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-login-hints .icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--primary);
}

.auth-form {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.auth-form .button {
  margin-top: 4px;
}

.auth-passkey-button {
  min-height: 44px;
  gap: 8px;
}

.auth-passkey-button .icon {
  width: 17px;
  height: 17px;
}

.auth-input-wrap {
  position: relative;
  display: block;
}

.auth-input-with-icon > .icon {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 1;
  width: 17px;
  height: 17px;
  color: var(--muted);
  transform: translateY(-50%);
  transition: color 160ms ease;
}

.auth-form .field > .auth-input-wrap {
  margin-bottom: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.auth-input-wrap > input {
  padding-right: 48px;
}

.auth-input-with-icon > input {
  padding-left: 42px;
}

.auth-input-with-icon:focus-within > .icon {
  color: var(--primary);
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 160ms ease, background-color 160ms ease;
}

.auth-password-toggle:hover,
.auth-password-toggle.is-active {
  background: var(--surface-soft);
  color: var(--primary);
}

.auth-password-toggle .icon {
  width: 17px;
  height: 17px;
}

.auth-form-status {
  min-height: 17px;
  margin: -7px 0 -5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.auth-password-assist {
  display: grid;
  gap: 7px;
  margin-top: -8px;
  color: var(--muted);
  font-size: 11px;
}

.auth-password-meter {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.auth-password-meter span {
  display: block;
  width: var(--password-strength, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--password-strength-color, var(--muted));
  transition: width 180ms var(--ease), background-color 180ms ease;
}

.auth-caps-warning {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  gap: 7px;
  margin: -8px 0 0;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 26%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, #fef3c7 60%, var(--surface));
  color: color-mix(in srgb, #b45309 82%, var(--text));
  font-size: 11px;
  font-weight: 740;
}

.auth-caps-warning[hidden] {
  display: none;
}

.auth-caps-warning .icon {
  width: 15px;
  height: 15px;
}

.auth-remember {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  gap: 8px;
  margin-top: -6px;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
}

.auth-remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.auth-form-wrap footer {
  margin-top: 34px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.alert {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 11px;
  animation: alert-in 220ms var(--ease) both;
}

.alert-error {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border));
  background: var(--red-soft);
  color: var(--red);
}

.auth-form-wrap .alert {
  margin-top: 18px;
}

@keyframes auth-page-sheen {
  0%, 62%, 100% {
    opacity: 0;
    transform: translateX(-56%);
  }
  18%, 42% {
    opacity: 0.24;
    transform: translateX(56%);
  }
}

@media (max-width: 720px) {
  .auth-theme {
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
  }

  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
    width: min(calc(100% - 28px), 560px);
    min-height: 0;
    margin: 74px auto 28px;
  }

  .auth-brand {
    min-height: 300px;
    padding: 34px 28px;
  }

  .auth-brand h1 {
    font-size: 28px;
  }

  .auth-brand-copy {
    max-width: none;
  }

  .auth-brand-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .auth-brand-badges span {
    justify-content: center;
    min-height: 40px;
    padding-inline: 8px;
  }

  .auth-metrics {
    height: 72px;
    margin-top: 30px;
  }

  .auth-security-card {
    margin-top: 20px;
  }

  .auth-form-wrap {
    width: 100%;
    padding: 28px;
  }

  .auth-quick-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-time-panel {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .auth-time-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-time-action {
    min-height: 44px;
  }

  .auth-login-hints {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-quick-actions a,
  .auth-quick-actions > span,
  .auth-form .button,
  .auth-passkey-button,
  .auth-remember {
    min-height: 44px;
  }
}

@media (max-width: 430px) {
  .auth-shell {
    width: calc(100% - 18px);
    margin-top: 66px;
    border-radius: 12px;
  }

  .auth-brand {
    padding: 28px 20px;
  }

  .auth-brand-badges {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-brand-badges span {
    justify-content: flex-start;
  }

  .auth-security-card {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 12px;
  }

  .auth-form-wrap {
    padding: 24px 18px;
  }

  .auth-form {
    gap: 14px;
  }

  .auth-form-head h2 {
    font-size: 23px;
  }

  .auth-time-panel {
    padding: 11px;
  }

  .auth-time-main time {
    font-size: 13px;
  }

  .auth-time-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 390px) {
  .auth-shell {
    width: calc(100% - 12px);
  }

  .auth-brand {
    min-height: 280px;
    padding: 24px 16px;
  }

  .auth-form-wrap {
    padding: 22px 14px;
  }

  .auth-input-with-icon > input {
    padding-left: 38px;
  }
}

.install-shell {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 32px), 980px);
  margin: 34px auto;
}

.install-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.install-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.install-header img {
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 22%, transparent);
}

.install-header strong,
.install-header span {
  display: block;
}

.install-header strong {
  font-size: 17px;
}

.install-header span {
  color: var(--muted);
  font-size: 10px;
}

.install-theme-toggle span {
  font-size: 18px;
  line-height: 1;
}

.install-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.install-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--muted);
}

.install-steps li::before {
  position: absolute;
  top: 14px;
  right: 50%;
  left: -50%;
  z-index: 0;
  height: 1px;
  background: var(--border);
  content: "";
}

.install-steps li:first-child::before {
  display: none;
}

.install-steps li > span {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  font-size: 10px;
  font-weight: 700;
}

.install-steps li small {
  font-size: 9px;
  white-space: nowrap;
}

.install-steps li.is-current {
  color: var(--primary);
}

.install-steps li.is-current > span {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.install-steps li.is-done::before,
.install-steps li.is-current::before {
  background: var(--primary);
}

.install-steps li.is-done > span {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.install-panel {
  position: relative;
  min-height: 470px;
  padding: 42px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 92%, transparent), var(--surface)),
    var(--surface);
  box-shadow: var(--shadow-md);
  animation: enter-up 440ms var(--ease) both;
  overflow: hidden;
}

.install-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--cyan), var(--green));
  content: "";
}

.install-copy {
  margin-bottom: 27px;
}

.install-copy h1,
.install-result h1 {
  margin: 7px 0 5px;
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.install-copy p,
.install-result p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.install-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(230px, 0.7fr);
  align-items: stretch;
  gap: 18px;
  margin-bottom: 20px;
}

.install-hero-grid .install-copy {
  margin-bottom: 0;
}

.install-safe-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 188px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 34%),
    linear-gradient(145deg, var(--surface-soft), var(--surface));
}

.install-safe-card::before {
  position: absolute;
  right: -34px;
  top: -34px;
  width: 112px;
  height: 112px;
  border: 22px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 50%;
  content: "";
  animation: float-soft 4.8s ease-in-out infinite;
}

.install-safe-card span,
.install-safe-card p {
  color: var(--muted);
  font-size: 11px;
}

.install-safe-card strong {
  margin: 5px 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.install-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.install-feature-grid article {
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease;
}

.install-feature-grid article:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: var(--shadow-sm);
}

.install-feature-grid i {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.install-feature-grid strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.install-feature-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.install-feature-grid code {
  color: var(--primary);
  font-weight: 750;
}

.install-panel > .alert {
  margin-bottom: 18px;
}

.check-list {
  display: grid;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}

.check-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 54px;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  transition: background-color 160ms ease;
}

.check-row:hover {
  background: var(--surface-soft);
}

.check-row:last-child {
  border-bottom: 0;
}

.check-row strong {
  font-size: 12px;
}

.check-row small {
  max-width: 360px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.install-directory-list {
  margin-bottom: 14px;
}

.permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.permission-list code {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--text-soft);
  font-size: 11px;
}

.install-tip {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface));
  color: var(--text-soft);
  font-size: 12px;
}

.install-tip code {
  color: var(--primary);
  font-weight: 750;
}

.install-tip-warning {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 58%, var(--surface));
  color: var(--amber);
}

.install-mode-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.install-mode-card > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
}

.install-mode-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10px;
}

.install-mode-card strong {
  display: block;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.install-mode-card.is-recover > div:first-child {
  border-color: color-mix(in srgb, var(--green) 30%, var(--border));
  background: var(--green-soft);
  color: var(--green);
}

.install-permission-panel {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 80%, transparent), var(--surface)),
    var(--surface);
}

.install-permission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.install-permission-head strong,
.install-permission-head small {
  display: block;
}

.install-permission-head strong {
  font-size: 13px;
}

.install-permission-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.install-permission-head > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.install-permission-head > span.is-ok {
  background: var(--green-soft);
  color: var(--green);
}

.install-permission-head > span.is-warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.install-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.install-permission-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 40px;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.install-permission-item strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.install-permission-item small {
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.install-result {
  display: grid;
  justify-items: center;
  max-width: 460px;
  margin: 42px auto 0;
  text-align: center;
}

.result-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: 26px;
  font-weight: 700;
  animation: success-in 520ms var(--ease) both;
}

.install-result .button {
  margin-top: 26px;
}

.install-result-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 360px);
  gap: 10px;
  margin-top: 26px;
}

.install-result-actions .button {
  margin-top: 0;
}

.error-page {
  display: grid;
  place-items: center;
  padding: 24px;
}

.error-shell {
  width: min(100%, 440px);
  padding: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: enter-up 420ms var(--ease) both;
}

.error-shell img {
  margin: 0 auto 20px;
  border-radius: 8px;
}

.error-code {
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
}

.error-shell h1 {
  margin: 7px 0 5px;
  font-size: 23px;
}

.error-shell p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 11px;
}

.redirect-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
    linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--surface-soft) 76%, var(--bg)));
}

.redirect-page.is-gateway {
  background:
    radial-gradient(circle at 14% 14%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 30%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 24%),
    linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--surface-soft) 80%, var(--bg)));
}

.redirect-page.is-deeplink {
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--green) 15%, transparent), transparent 30%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 26%),
    linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--surface-soft) 82%, var(--bg)));
}

.redirect-shell {
  width: min(100%, 520px);
}

.redirect-page.is-compact-one-screen {
  align-items: center;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
}

.redirect-page.is-compact-one-screen .redirect-shell {
  display: grid;
  width: min(100%, 500px);
  min-height: calc(100svh - 32px);
  place-items: center;
}

.redirect-banner {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: var(--shadow-sm);
}

.redirect-banner strong,
.redirect-banner p,
.redirect-banner a {
  margin: 0;
}

.redirect-banner strong {
  font-size: 12px;
}

.redirect-banner p {
  color: var(--text-soft);
  font-size: 12px;
}

.redirect-banner a {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.redirect-panel {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: var(--redirect-card-radius, 24px);
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: var(--shadow-modal);
  animation: modal-in 280ms var(--ease) both;
}

.redirect-page.is-compact-one-screen .redirect-panel {
  width: 100%;
  padding: clamp(20px, 4vh, 30px);
  transform-origin: 50% 55%;
}

.redirect-page.is-gateway .redirect-panel {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  box-shadow: 0 28px 64px color-mix(in srgb, var(--primary) 14%, transparent), var(--shadow-modal);
}

.redirect-page.is-deeplink .redirect-panel {
  border-color: color-mix(in srgb, var(--green) 20%, var(--border));
  box-shadow: 0 28px 64px color-mix(in srgb, var(--green) 12%, transparent), var(--shadow-modal);
}

.redirect-panel::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--primary) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary) 9%, transparent) 1px, transparent 1px);
  background-size: 30px 30px;
  content: "";
  mask-image: linear-gradient(150deg, #000 0%, transparent 54%);
  pointer-events: none;
}

.redirect-panel::before {
  position: absolute;
  top: -1px;
  left: 18%;
  width: 64%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 62%, transparent), transparent);
  content: "";
  opacity: 0.8;
  pointer-events: none;
}

.redirect-panel > * {
  position: relative;
  z-index: 1;
}

.redirect-panel img {
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 16px;
  box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}

.redirect-page.is-compact-one-screen .redirect-panel > img {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 14px;
}

.redirect-client-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 62%, transparent);
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.redirect-panel h1 {
  margin: 7px 0 6px;
  font-size: 25px;
}

.redirect-page.is-compact-one-screen .redirect-panel h1 {
  margin: 5px 0 5px;
  font-size: clamp(21px, 3vh, 25px);
  line-height: 1.18;
}

.redirect-panel p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
}

.redirect-page.is-compact-one-screen .redirect-panel p {
  line-height: 1.58;
}

.redirect-target {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.redirect-page.is-target-hidden .redirect-target {
  display: none;
}

.redirect-page.is-compact-one-screen .redirect-target {
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 14px;
}

.redirect-hero-image {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.redirect-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
}

.redirect-target small,
.redirect-target strong {
  display: block;
}

.redirect-target small {
  color: var(--muted);
  font-size: 10px;
}

.redirect-target strong {
  overflow: hidden;
  margin-top: 3px;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redirect-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.redirect-page.is-compact-one-screen .redirect-actions {
  margin-top: 16px;
}

.redirect-actions .button {
  min-height: 44px;
  width: 100%;
  transition: transform 160ms var(--ease), box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.redirect-actions .button:hover {
  transform: translateY(-1px);
}

.redirect-actions .button:active {
  transform: translateY(0) scale(0.99);
}

.redirect-actions .button[disabled] {
  cursor: not-allowed;
  opacity: 0.72;
}

.redirect-loader {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}

.redirect-page.is-compact-one-screen .redirect-loader {
  margin-top: 12px;
}

.redirect-loader i {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-top-color: var(--primary);
  border-radius: 999px;
  animation: spin 1s linear infinite;
}

.redirect-loader span::before {
  content: "正在准备访问";
}

.redirect-page.is-gateway .redirect-loader span::before {
  content: "正在为社交应用准备安全引导";
}

.redirect-page.is-deeplink .redirect-loader span::before {
  content: "正在尝试唤醒 App";
}

.redirect-deeplink-card {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--green-soft) 54%, var(--surface-raised));
  animation: redirect-soft-rise 320ms var(--ease) both;
}

.redirect-deeplink-card strong,
.redirect-deeplink-card span {
  display: block;
}

.redirect-deeplink-card strong {
  color: var(--text);
  font-size: 13px;
}

.redirect-deeplink-card span {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
}

.redirect-deeplink-drawer {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--primary) 12%, transparent);
}

.redirect-deeplink-drawer strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.redirect-deeplink-drawer p {
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.7;
}

.redirect-deeplink-drawer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.redirect-deeplink-drawer-actions .button {
  min-height: 44px;
}

.redirect-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.redirect-page.is-compact-one-screen .redirect-meta-grid {
  gap: 8px;
  margin-top: 14px;
}

.redirect-meta-grid div {
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}

.redirect-page.is-compact-one-screen .redirect-meta-grid div {
  padding: 10px 11px;
  border-radius: 14px;
}

.redirect-meta-grid span,
.redirect-meta-grid strong {
  display: block;
}

.redirect-meta-grid span {
  color: var(--muted);
  font-size: 10px;
}

.redirect-meta-grid strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 12px;
  word-break: break-word;
}

@keyframes redirect-soft-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.redirect-page[data-visual-style="minimal"] {
  background: linear-gradient(180deg, var(--bg), var(--surface-soft));
}

.redirect-page[data-visual-style="minimal"] .redirect-panel::after {
  display: none;
}

.redirect-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}

.redirect-remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.redirect-guard-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.redirect-input-wrap {
  position: relative;
  display: block;
  margin-bottom: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.field > .redirect-input-wrap {
  margin-bottom: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.redirect-input-wrap > input {
  min-height: 48px;
  padding-right: 56px;
}

.redirect-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.redirect-password-toggle:hover,
.redirect-password-toggle.is-active {
  background: var(--surface-soft);
  color: var(--primary);
}

.redirect-password-toggle:active {
  transform: translateY(-50%) scale(0.94);
}

.redirect-password-toggle .icon {
  width: 18px;
  height: 18px;
}

.redirect-guard-form .redirect-actions .button {
  min-height: 48px;
}

.redirect-guard-form .button[aria-busy="true"] {
  cursor: wait;
}

.redirect-guard-form .button .spinner {
  width: 15px;
  height: 15px;
  border-width: 2px;
}

.redirect-guard-message {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.redirect-guard-message.is-error {
  color: var(--red);
}

.redirect-form-fields {
  display: grid;
  gap: 12px;
}

.redirect-form-field {
  margin: 0;
}

.redirect-form-field select {
  min-height: 48px;
}

.redirect-form-field textarea {
  min-height: 112px;
}

.redirect-form-field.is-invalid input,
.redirect-form-field.is-invalid textarea,
.redirect-form-field.is-invalid select {
  border-color: color-mix(in srgb, var(--red) 62%, var(--border));
  background: color-mix(in srgb, var(--red) 5%, var(--surface));
}

.redirect-form-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.redirect-form-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.redirect-form-options input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.redirect-form-error {
  display: block;
  margin-top: 7px;
  color: var(--red);
  font-size: 11px;
  line-height: 1.5;
}

.redirect-captcha-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent));
  overflow: hidden;
}

.redirect-captcha-art svg {
  display: block;
  width: min(100%, 240px);
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.14));
}

.redirect-captcha-slider {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
}

.redirect-captcha-target,
.redirect-captcha-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.redirect-captcha-target {
  flex-wrap: wrap;
}

.redirect-captcha-target span,
.redirect-captcha-value span {
  color: var(--muted);
  font-size: 12px;
}

.redirect-captcha-target strong,
.redirect-captcha-value strong {
  color: var(--text);
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1;
}

.redirect-captcha-target small {
  width: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.redirect-captcha-range {
  width: 100%;
  min-height: 48px;
  accent-color: var(--primary);
  cursor: pointer;
}

.redirect-captcha-range:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: 4px;
}

@media (max-width: 640px) {
  .redirect-captcha-art {
    padding: 14px;
  }

  .redirect-captcha-slider {
    padding: 16px;
  }

  .redirect-captcha-target strong,
  .redirect-captcha-value strong {
    font-size: 22px;
  }

  .redirect-form-options {
    grid-template-columns: 1fr;
  }
}

@keyframes enter-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes options-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes result-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.78); }
}

@keyframes number-pop {
  0% { transform: translateY(3px); opacity: 0.5; }
  100% { transform: translateY(0); opacity: 1; }
}

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

@keyframes toast-in {
  from { opacity: 0; transform: translateX(18px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(16px) scale(0.98); }
}

@keyframes bars-in {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes alert-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes success-in {
  0% { opacity: 0; transform: scale(0.7) rotate(-10deg); }
  70% { transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes float-soft {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-8px, 8px, 0) rotate(8deg); }
}

@keyframes sidebar-nav-loading-pulse {
  0%, 100% { opacity: 0.62; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes sidebar-nav-loading-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0) scale(0.72); }
  50% { opacity: 1; transform: translateY(-1px) scale(1); }
}

@media (max-width: 1180px) {
  :root {
    --sidebar-width: 220px;
  }

  .content {
    padding-right: 68px;
    padding-left: 20px;
  }

  .topbar {
    padding-inline: 20px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  }

  .links-utility-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .links-utility-actions {
    justify-content: flex-start;
  }

  .maintenance-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .traffic-alert-strip {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .traffic-alert-metrics {
    grid-column: 1 / -1;
    padding-top: 4px;
  }

  .maintenance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maintenance-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .links-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .links-tools {
    width: 100%;
  }

  .search-box {
    flex: 1;
    width: auto;
  }

  .sort-select {
    width: 166px;
  }

  .settings-content {
    padding-right: 24px;
  }

  .settings-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .app-layout {
    display: block;
  }

  .sidebar {
    position: fixed;
    left: 0;
    z-index: 30;
    transform: translateX(-102%);
    pointer-events: none;
    width: 248px;
    will-change: transform;
    box-shadow: var(--shadow-modal);
    transition: transform 240ms var(--ease);
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-search input {
    height: 44px;
    font-size: 13px;
  }

  .sidebar-search-clear {
    width: 34px;
    height: 34px;
  }

  .sidebar-compact-toggle {
    display: none;
  }

  .sidebar-section-tools {
    gap: 10px;
  }

  .sidebar-section-tools button {
    min-height: 44px;
    border-radius: 14px;
  }

  .sidebar-section-tools [data-sidebar-scroll-top] {
    grid-column: 1 / -1;
  }

  .sidebar-nav-section {
    min-height: 44px;
    margin-top: 12px;
    border-radius: 14px;
  }

  .sidebar-nav-section.is-collapsed {
    min-height: 40px;
    margin-top: 8px;
    padding-block: 0;
    border-radius: 13px;
  }

  .sidebar-nav-section b {
    font-size: 12px;
  }

  .sidebar-nav-section small {
    max-width: 170px;
    font-size: 10px;
  }

  .app-layout.sidebar-open .sidebar {
    pointer-events: auto;
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    display: block;
    background: rgba(7, 13, 22, 0.48);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
  }

  .app-layout.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 10px;
    isolation: isolate;
  }

  .topbar-actions {
    margin-left: 0;
  }

  .mobile-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin-right: 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    transition: transform 150ms var(--ease), background-color 150ms ease, box-shadow 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 18px;
  }

  .mobile-menu:active {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-soft));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 12%, transparent);
    transform: scale(0.96);
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .top-links-list {
    grid-template-columns: 1fr;
  }

  .links-utility-card {
    margin-top: 12px;
  }

  .maintenance-card {
    grid-template-columns: 1fr;
  }

  .traffic-alert-strip {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .traffic-alert-icon {
    width: 42px;
    height: 42px;
  }

  .maintenance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maintenance-actions {
    grid-column: auto;
    justify-content: flex-start;
  }

  .device-panel {
    min-height: auto;
  }

  .device-visual {
    grid-template-columns: 150px minmax(0, 1fr);
    min-height: 180px;
  }

  .health-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .message-center-item-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .message-center-item-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-options-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-options-summary span:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .quick-options .workbench-field:last-child {
    grid-column: 1 / -1;
  }

  .schedule-helper-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-shell {
    display: block;
  }

  .settings-tabs {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 12px;
  }

  .links-table th:nth-child(1) { width: 30%; }
  .links-table th:nth-child(2) { width: 22%; }
  .links-table th:nth-child(3) { width: 12%; }
  .links-table th:nth-child(4) { width: 11%; }
  .links-table th:nth-child(5) { display: none; }
  .links-table th:nth-child(6) { width: 144px; }
  .links-table td:nth-child(5) { display: none; }
}

@media (max-width: 720px) {
  :root {
    --topbar-height: 60px;
  }

  .schedule-helper-preset-toolbar {
    gap: 9px;
  }

  .schedule-helper-toolbar-action {
    flex: 1 1 calc(50% - 9px);
    min-height: 40px;
    padding-inline: 12px;
  }

  .topbar {
    padding: 0 14px;
  }

  .topbar-title span {
    display: none;
  }

  .topbar-actions {
    gap: 6px;
  }

  .topbar-actions .export-button span,
  .topbar-actions > .button-primary span {
    display: none;
  }

  .topbar-actions .export-button,
  .topbar-actions > .button-primary {
    width: 40px;
    padding: 0;
  }

  .topbar-message-button {
    width: 40px;
    height: 40px;
  }

  .content {
    padding: 14px 12px 104px;
  }

  .health-dashboard {
    padding: 16px;
    border-radius: 20px;
  }

  .health-overview-card,
  .health-issues-card {
    padding: 16px;
    border-radius: 18px;
  }

  .health-kpi-grid {
    grid-template-columns: 1fr;
  }

  .message-center-toolbar {
    padding: 18px 18px 14px;
  }

  .message-center-toolbar h2 {
    font-size: 20px;
  }

  .message-center-meta,
  .message-center-filters,
  .message-center-list,
  .message-center-empty {
    padding-left: 18px;
    padding-right: 18px;
  }

  .create-mode-switch {
    width: 100%;
    border-radius: 18px;
  }

  .create-mode-switch label {
    min-height: 48px;
    padding-inline: 10px;
  }

  .bulk-create-panel {
    padding: 12px;
    border-radius: 14px;
  }

  .bulk-create-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bulk-create-preview-head {
    align-items: flex-start;
  }

  .bulk-create-preview-title,
  .bulk-create-preview-filters {
    flex-basis: 100%;
  }

  .bulk-create-preview-title {
    min-width: 0;
  }

  .bulk-create-preview-filters {
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 4px;
  }

  .bulk-create-preview-filters button {
    min-height: 38px;
    padding-inline: 12px;
  }

  .bulk-create-preview-search {
    min-height: 46px;
    gap: 6px;
  }

  .bulk-create-preview-search input,
  .bulk-create-preview-search button {
    min-height: 36px;
  }

  .bulk-create-preview-search button {
    padding-inline: 12px;
  }

  .bulk-create-preview-actions {
    justify-content: stretch;
  }

  .bulk-create-preview-actions .button {
    flex: 1 1 calc(50% - 4px);
    min-height: 40px;
  }

  .bulk-create-preview-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .bulk-create-preview-main span {
    white-space: normal;
  }

  .bulk-create-preview-row-actions {
    justify-content: stretch;
  }

  .bulk-create-preview-row-actions button {
    flex: 1 1 calc(50% - 4px);
    min-height: 38px;
  }

  .bulk-create-draft {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .bulk-create-draft button {
    width: 100%;
    min-height: 44px;
  }

  .bulk-create-readiness {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .bulk-create-readiness-meter {
    width: 72px;
    height: 72px;
  }

  .bulk-create-readiness-advice span {
    flex: 1 1 100%;
    min-height: 34px;
  }

  .bulk-create-helper-bar .button,
  .bulk-create-actions .button {
    flex: 1 1 calc(50% - 5px);
  }

  .bulk-create-tips {
    gap: 6px;
  }

  .bulk-create-tips span {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 30px;
  }

  .settings-content {
    padding: 14px 12px 104px;
  }

  .settings-hero {
    min-height: 126px;
    padding: 20px 16px;
  }

  .settings-hero h1 {
    font-size: 22px;
  }

  .settings-mode-card {
    min-width: 132px;
    padding: 12px;
  }

  .settings-tabs {
    display: none;
  }

  .settings-mobile-switch {
    display: grid;
    gap: 7px;
    margin-bottom: 10px;
  }

  .settings-mobile-switch span {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 650;
  }

  .settings-mobile-switch select {
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
  }

  .settings-panel {
    padding: 16px;
  }

  .setting-row,
  .setting-row-wide {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 9px;
    min-height: 0;
    padding: 12px;
  }

  .setting-row-switch {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .workbench {
    padding: 20px 16px;
  }

  .workbench h1 {
    font-size: 21px;
  }

  .live-indicator {
    min-height: 27px;
    padding-inline: 8px;
  }

  .url-entry {
    grid-template-columns: 21px minmax(0, 1fr);
    padding: 8px 10px 10px 14px;
  }

  .quick-submit {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .quick-options {
    grid-template-columns: 1fr;
  }

  .quick-options-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .quick-options-summary span {
    padding: 8px;
  }

  .quick-options .workbench-field:last-child {
    grid-column: auto;
  }

  .schedule-helper-card {
    padding: 14px;
    border-radius: 16px;
  }

  .schedule-helper-preset-list {
    gap: 8px;
  }

  .schedule-helper-preset-group-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-helper-preset-group-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .schedule-helper-preset-search {
    width: 100%;
    min-width: 0;
    flex-basis: 100%;
  }

  .schedule-helper-preset-grid {
    gap: 8px;
  }

  .schedule-helper-preset-chip {
    width: 100%;
  }

  .schedule-preset-button,
  .schedule-helper-clear {
    width: 100%;
    justify-content: center;
  }

  .schedule-helper-preset-group-action,
  .schedule-helper-preset-group-toggle {
    min-height: 36px;
  }

  .schedule-preset-chip-tools {
    margin-left: auto;
  }

  .schedule-preset-favorite {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .create-result {
    align-items: flex-start;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .stat-tile {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 92px;
    gap: 10px;
    padding: 12px;
  }

  .stat-icon {
    width: 36px;
    height: 36px;
  }

  .stat-icon .icon {
    width: 16px;
    height: 16px;
  }

  .stat-tile strong {
    font-size: 20px;
  }

  .analytics-grid {
    gap: 10px;
    margin-top: 10px;
  }

  .analytics-panel {
    min-height: auto;
    padding: 16px;
  }

  .chart-wrap {
    height: 190px;
  }

  .links-section {
    margin-top: 12px;
    padding-top: 16px;
  }

  .links-section .empty-state.is-error {
    min-height: 170px;
    padding: 40px 14px;
  }

  .links-section .empty-state.is-error p {
    font-size: 12px;
    line-height: 1.75;
  }

  .database-alert {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: flex-start;
  }

  .database-alert .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .links-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .links-tools.has-view-copy {
    grid-template-columns: minmax(0, 1fr) 40px 40px;
  }

  .links-tools.has-view-reset {
    grid-template-columns: minmax(0, 1fr) 40px 40px;
  }

  .links-tools.has-view-copy.has-view-reset {
    grid-template-columns: minmax(0, 1fr) 40px 40px 40px;
  }

  .batch-toolbar {
    position: sticky;
    bottom: max(60px, calc(env(safe-area-inset-bottom) + 60px));
    z-index: 18;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .batch-select-all {
    justify-content: flex-start;
    width: 100%;
    padding-inline: 4px;
  }

  .batch-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .batch-actions .button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }

  .batch-actions .button .icon {
    display: none;
  }

  .search-box {
    grid-column: 1 / 2;
  }

  .segmented {
    grid-column: 1 / -1;
    grid-row: 2;
    order: 2;
  }

  #refreshLinks {
    grid-column: 2;
    grid-row: 1;
  }

  .links-tools.has-view-copy #copyCurrentView {
    grid-column: 2;
    grid-row: 1;
  }

  .links-tools.has-view-copy #refreshLinks {
    grid-column: 3;
    grid-row: 1;
  }

  .links-tools.has-view-reset #resetCurrentView {
    grid-column: 2;
    grid-row: 1;
  }

  .links-tools.has-view-reset #refreshLinks {
    grid-column: 3;
    grid-row: 1;
  }

  .links-tools.has-view-copy.has-view-reset #copyCurrentView {
    grid-column: 2;
    grid-row: 1;
  }

  .links-tools.has-view-copy.has-view-reset #resetCurrentView {
    grid-column: 3;
    grid-row: 1;
  }

  .links-tools.has-view-copy.has-view-reset #refreshLinks {
    grid-column: 4;
    grid-row: 1;
  }

  .sort-select {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }

  .segmented button {
    min-width: 0;
    padding-inline: 6px;
  }

  .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .links-table,
  .links-table tbody {
    display: block;
  }

  .links-table thead {
    display: none;
  }

  .links-table tbody {
    display: grid;
    gap: 8px;
  }

  .links-table tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    min-height: 132px;
    gap: 10px 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .links-table tbody tr:hover {
    background: var(--surface);
  }

  .links-table td {
    display: block;
    min-width: 0;
    padding: 0;
  }

  .links-table td:nth-child(1) {
    grid-column: 1 / -1;
    padding-right: 80px;
  }

  .link-cell {
    align-items: start;
  }

  .row-check {
    margin-top: 1px;
  }

  .links-table td:nth-child(2) {
    grid-column: 1 / -1;
  }

  .links-table td:nth-child(3) {
    position: absolute;
    top: 14px;
    right: 14px;
  }

  .links-table td:nth-child(4) {
    grid-column: 1;
  }

  .links-table td:nth-child(5) {
    display: block;
    grid-column: 2;
  }

  .links-table td:nth-child(6) {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  .row-actions {
    justify-content: flex-end;
  }

  .row-actions .icon-button {
    width: 36px;
    height: 34px;
    border-color: var(--border);
    background: var(--surface-soft);
  }

  .pagination-bar {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 2px 0;
  }

  .page-controls {
    width: 100%;
    justify-content: space-between;
  }

  .modal[open],
  .confirm-dialog[open],
  .command-palette[open] {
    align-items: end;
    padding: 0;
  }

  .modal-panel,
  .command-panel {
    width: 100%;
    max-height: calc(100vh - 18px);
    border-width: 1px 0 0;
    border-radius: 8px 8px 0 0;
    animation-name: sheet-in;
  }

  .command-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .message-center-panel {
    width: 100%;
    max-height: calc(100vh - 10px);
    border-width: 1px 0 0;
    border-radius: 28px 28px 0 0;
    animation-name: sheet-in;
  }

  .command-head {
    padding: 18px 18px 12px;
  }

  .command-search {
    margin: 12px 14px 10px;
  }

  .command-list {
    max-height: calc(100vh - 230px);
    padding: 0 14px 14px;
  }

  .command-item {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 62px;
    padding: 10px;
  }

  .command-item-kbd {
    grid-column: 2;
    justify-self: start;
    min-height: 22px;
    margin-top: -2px;
  }

  .command-hint {
    padding: 10px 16px 14px;
  }

  .modal-body {
    max-height: calc(100vh - 158px);
  }

  .confirm-dialog[open] {
    place-items: center;
    padding: 16px;
  }

  .prompt-panel {
    width: min(100%, 100%);
    padding: 22px 18px;
  }

  .prompt-actions {
    flex-direction: column-reverse;
  }

  .prompt-actions .button {
    width: 100%;
  }

  .message-center-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .message-center-toolbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .message-center-filters {
    gap: 8px;
  }

  .message-center-filter {
    min-height: 44px;
    padding-inline: 12px;
  }

  .message-center-toolbar-actions .button,
  .message-center-toolbar-actions .icon-button {
    min-height: 44px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .field-full {
    grid-column: auto;
  }

  .advanced-link-grid {
    grid-template-columns: 1fr;
  }

  .advanced-link-block > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .advanced-link-block > summary small {
    grid-column: 1 / -1;
    text-align: left;
  }

  .advanced-link-subsection-head {
    grid-template-columns: 1fr;
  }

  .advanced-routing-capabilities {
    justify-content: flex-start;
  }

  .advanced-routing-preview-meta,
  .advanced-routing-preview-grid {
    grid-template-columns: 1fr;
  }

  .advanced-routing-item-head {
    flex-direction: column;
  }

  .advanced-link-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-devices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-advanced-grid {
    grid-template-columns: 1fr;
  }

  .detail-variant-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-variant-row-head,
  .detail-variant-row-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-variant-row-meta span:last-child {
    max-width: none;
    white-space: normal;
  }

  .detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-qrcode-shell {
    grid-template-columns: 1fr;
  }

  .detail-qrcode-preview {
    min-height: 214px;
  }

  .detail-qrcode-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-qrcode-toolbar .button {
    flex: 1 1 132px;
  }

  .auth-shell {
    display: block;
    width: min(calc(100% - 24px), 520px);
    min-height: 0;
    margin: 50px auto 24px;
  }

  .auth-brand {
    min-height: 170px;
    padding: 28px;
  }

  .auth-brand img {
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
  }

  .auth-brand h1 {
    font-size: 25px;
  }

  .auth-metrics {
    position: absolute;
    right: 24px;
    bottom: 22px;
    width: 42%;
    height: 64px;
    margin: 0;
  }

  .auth-form-wrap {
    width: 100%;
    padding: 30px 24px;
  }

  .auth-password-toggle {
    width: 40px;
    height: 40px;
  }

  .install-shell {
    width: min(calc(100% - 24px), 560px);
    margin: 20px auto;
  }

  .install-header {
    margin-bottom: 18px;
  }

  .install-panel {
    min-height: 400px;
    padding: 28px 22px;
    border-radius: 18px;
  }

  .install-hero-grid {
    grid-template-columns: 1fr;
  }

  .install-safe-card {
    min-height: 150px;
  }

  .install-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .install-steps li small {
    display: none;
  }

  .install-mode-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .install-permission-grid {
    grid-template-columns: 1fr;
  }

  .check-row {
    grid-template-columns: 10px minmax(0, 1fr);
    padding-block: 9px;
  }

  .check-row small {
    grid-column: 2;
    max-width: none;
  }

  @keyframes sheet-in {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 480px) {
  .workbench-heading {
    gap: 10px;
  }

  .workbench-kicker {
    max-width: 160px;
    white-space: normal;
  }

  .live-indicator {
    font-size: 9px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-tile {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 76px;
  }

  .stat-tile > div:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
  }

  .stat-tile span,
  .stat-tile small {
    grid-column: 1;
  }

  .stat-tile strong {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .maintenance-strip {
    margin-top: 10px;
  }

  .traffic-alert-strip {
    margin-top: 10px;
  }

  .top-links-panel {
    margin-top: 10px;
    padding: 16px;
  }

  .top-links-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .top-links-item {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 10px;
  }

  .traffic-alert-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .traffic-alert-metrics > div {
    padding-left: 8px;
  }

  .traffic-alert-metrics strong {
    font-size: 16px;
  }

  .links-utility-card {
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
  }

  .links-utility-copy h3 {
    font-size: 17px;
  }

  .links-utility-tags span {
    min-height: 26px;
    padding-inline: 10px;
    font-size: 10px;
  }

  .links-utility-actions {
    width: 100%;
  }

  .links-utility-actions .button {
    flex: 1 1 108px;
  }

  .detail-qrcode {
    padding: 16px;
    border-radius: 20px;
  }

  .detail-qrcode-preview {
    min-height: 192px;
    padding: 16px;
  }

  .detail-qrcode-preview svg {
    width: min(100%, 186px);
  }

  .detail-qrcode-meta {
    grid-template-columns: 1fr;
  }

  .detail-qrcode-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-qrcode-toolbar .button,
  .detail-qrcode-color {
    width: 100%;
  }

  .maintenance-card {
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
  }

  .maintenance-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .maintenance-title-row h2 {
    font-size: 21px;
  }

  .maintenance-copy p {
    font-size: 13px;
    line-height: 1.65;
  }

  .maintenance-metric {
    padding: 12px;
    border-radius: 16px;
  }

  .maintenance-metric strong {
    font-size: 21px;
  }

  .maintenance-metrics {
    grid-template-columns: 1fr;
  }

  .maintenance-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .maintenance-actions .button {
    width: 100%;
    justify-content: center;
  }

  .device-visual {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
  }

  .device-ring {
    width: 108px;
    height: 108px;
  }

  .device-ring::before {
    width: 76px;
    height: 76px;
  }

  .device-ring strong {
    font-size: 18px;
  }

  .page-controls label span {
    display: none;
  }

  .page-buttons button:not(:first-child):not(:last-child):not(.is-active) {
    display: none;
  }

  .batch-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segmented {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .segmented::-webkit-scrollbar {
    display: none;
  }

  .segmented button {
    min-width: 54px;
  }

  .create-result {
    flex-direction: column;
  }

  .result-actions {
    width: 100%;
  }

  .result-actions .icon-button {
    flex: 1;
    width: auto;
  }

  .permission-list {
    grid-template-columns: 1fr;
  }

  .install-shell {
    width: min(calc(100% - 16px), 420px);
    margin: 12px auto;
  }

  .install-header {
    align-items: flex-start;
  }

  .install-header img {
    width: 40px;
    height: 40px;
  }

  .install-panel {
    min-height: 0;
    padding: 24px 16px;
    border-radius: 16px;
  }

  .install-copy {
    margin-bottom: 20px;
  }

  .install-safe-card,
  .install-feature-grid article {
    border-radius: 14px;
  }

  .install-feature-grid {
    grid-template-columns: 1fr;
  }

  .install-mode-card,
  .install-result-actions {
    grid-template-columns: 1fr;
  }

  .install-permission-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .install-permission-item {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .install-permission-item small {
    grid-column: 2;
  }

  .install-mode-card strong {
    white-space: normal;
  }

  .install-tip {
    font-size: 11px;
  }

  .form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-meta-grid {
    grid-template-columns: 1fr;
  }

  .error-shell {
    padding: 32px 22px;
  }

  .settings-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .settings-mode-card {
    width: 100%;
  }

  .settings-panel {
    padding: 14px;
  }

  .setting-row strong {
    white-space: normal;
  }
}

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

body[data-ui-motion-enabled="0"] *,
body[data-ui-motion-enabled="0"] *::before,
body[data-ui-motion-enabled="0"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

@media (hover: none), (pointer: coarse) {
  .button:hover,
  .icon-button:hover,
  .stat-tile:hover,
  .advanced-link-block:hover {
    transform: none;
  }
}

/* Public front page */
.public-page {
  overflow-x: hidden;
  background: var(--surface);
}

@supports (content-visibility: auto) {
  .public-page[data-content-visibility-enabled="1"] .front-live-stats,
  .public-page[data-content-visibility-enabled="1"] .front-updates-section,
  .public-page[data-content-visibility-enabled="1"] .front-pwa-guide-section,
  .public-page[data-content-visibility-enabled="1"] .front-support-section,
  .public-page[data-content-visibility-enabled="1"] .front-partners-section,
  .public-page[data-content-visibility-enabled="1"] .front-feedback-section,
  .public-page[data-content-visibility-enabled="1"] .front-deploy-section,
  .public-page[data-content-visibility-enabled="1"] .front-matrix-section,
  .public-page[data-content-visibility-enabled="1"] .front-checklist-section,
  .public-page[data-content-visibility-enabled="1"] .front-enterprise-section,
  .public-page[data-content-visibility-enabled="1"] .front-import-board,
  .public-page[data-content-visibility-enabled="1"] .front-scenarios,
  .public-page[data-content-visibility-enabled="1"] .front-feature-section,
  .public-page[data-content-visibility-enabled="1"] .front-flow-section,
  .public-page[data-content-visibility-enabled="1"] .front-faq-section,
  .public-page[data-content-visibility-enabled="1"] .front-reliability {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
  }
}

.front-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(16px);
}

.front-header-inner {
  display: flex;
  align-items: center;
  width: min(calc(100% - 48px), 1180px);
  min-height: 72px;
  margin: 0 auto;
  gap: 26px;
}

.front-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.front-brand img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  box-shadow: 0 7px 16px rgba(23, 105, 224, 0.18);
}

.front-brand span,
.front-brand strong,
.front-brand small {
  display: block;
}

.front-brand strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.15;
}

.front-brand small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.08em;
}

.front-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-right: auto;
  margin-left: 24px;
}

.front-nav a {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 650;
  transition: color 160ms ease;
}

.front-nav a:hover {
  color: var(--primary);
}

.front-nav-login,
.front-menu-button {
  display: none;
}

.front-mobile-quicknav {
  display: none;
}

.front-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.front-workspace-button {
  min-width: 126px;
}

.front-announcement {
  width: min(calc(100% - 48px), 1180px);
  margin: 18px auto 0;
  animation: enter-up 360ms var(--ease) both;
}

.front-announcement > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 54px;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.front-announcement span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--surface);
  color: var(--primary);
}

.front-announcement p {
  min-width: 0;
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.front-announcement a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.front-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(440px, 1.12fr);
  align-items: center;
  width: min(calc(100% - 48px), 1180px);
  min-height: 616px;
  margin: 0 auto;
  padding: 76px 0 64px;
  gap: clamp(44px, 7vw, 96px);
}

.front-hero-copy {
  min-width: 0;
}

.front-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.front-kicker i,
.front-availability i,
.front-product-live i {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.front-hero h1 {
  max-width: 590px;
  margin: 20px 0 18px;
  color: var(--text);
  font-size: 52px;
  font-weight: 780;
  line-height: 1.14;
  letter-spacing: 0;
}

.front-hero-copy > p {
  max-width: 470px;
  margin: 0;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.8;
}

.front-url-form {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  width: min(100%, 500px);
  min-height: 60px;
  gap: 10px;
  margin-top: 32px;
  padding: 7px 7px 7px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 14px 32px rgba(20, 35, 52, 0.08);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.front-url-form:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft), 0 14px 32px rgba(20, 35, 52, 0.08);
}

.front-url-leading {
  display: grid;
  place-items: center;
  color: var(--primary);
}

.front-url-form input {
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.front-url-form input::placeholder {
  color: var(--muted);
}

.front-url-form .button {
  min-height: 46px;
}

.front-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

.front-home-share-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.front-home-share-button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
}

.front-home-share-button .icon {
  width: 16px;
  height: 16px;
  transition: transform 180ms var(--ease);
}

.front-home-share-button:hover .icon {
  transform: translateY(-1px) rotate(-4deg);
}

.front-home-share-note {
  max-width: 260px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.front-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  transition: color 160ms ease, transform 160ms var(--ease);
}

.front-text-link .icon {
  width: 15px;
  height: 15px;
}

.front-text-link:hover {
  color: var(--primary);
  transform: translateX(2px);
}

.front-availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.front-availability i {
  width: 6px;
  height: 6px;
}

.front-product {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 24px 52px rgba(20, 35, 52, 0.14);
  animation: front-product-in 680ms var(--ease) both;
  transition: transform 220ms var(--ease), box-shadow 220ms ease;
}

.front-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 62px rgba(20, 35, 52, 0.18);
}

.front-product-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.front-window-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.front-window-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}

.front-window-dots i:nth-child(2) {
  background: var(--amber);
}

.front-window-dots i:nth-child(3) {
  background: var(--green);
}

.front-product-avatar {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
}

.front-product-body {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 382px;
}

.front-product-side {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 11px;
  padding: 16px 0;
  border-right: 1px solid var(--border);
  background: var(--surface-soft);
}

.front-product-side img {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 7px;
}

.front-product-side span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: var(--muted);
}

.front-product-side span.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.front-product-side .icon {
  width: 16px;
  height: 16px;
}

.front-product-content {
  min-width: 0;
  padding: 22px 24px;
}

.front-product-heading,
.front-product-chart-head,
.front-product-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.front-product-heading small,
.front-product-heading strong {
  display: block;
}

.front-product-heading small {
  color: var(--muted);
  font-size: 10px;
}

.front-product-heading strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.15;
}

.front-product-live {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.front-product-live i {
  width: 5px;
  height: 5px;
  animation: front-live-pulse 1.9s ease-in-out infinite;
}

.front-product-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.front-product-metrics > div {
  min-width: 0;
  padding: 15px 13px 14px;
  border-right: 1px solid var(--border);
}

.front-product-metrics > div:first-child {
  padding-left: 0;
}

.front-product-metrics > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.front-product-metrics span,
.front-product-metrics strong,
.front-product-metrics small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-product-metrics span,
.front-product-metrics small {
  color: var(--muted);
  font-size: 9px;
}

.front-product-metrics strong {
  margin: 5px 0 3px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.front-product-metrics .front-up {
  color: var(--green);
}

.front-product-chart {
  margin-top: 20px;
}

.front-product-chart-head span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 730;
}

.front-product-chart-head strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.front-chart-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  height: 94px;
  gap: 7px;
  margin-top: 13px;
  padding: 10px 0 0;
  border-bottom: 1px solid var(--border);
}

.front-chart-bars i {
  display: block;
  min-height: 13px;
  border-radius: 4px 4px 0 0;
  background: var(--primary-soft);
  transform-origin: bottom;
  animation: front-bar-in 680ms var(--ease) both;
}

.front-chart-bars i:nth-child(1) { height: 31%; animation-delay: 80ms; }
.front-chart-bars i:nth-child(2) { height: 45%; animation-delay: 120ms; }
.front-chart-bars i:nth-child(3) { height: 39%; animation-delay: 160ms; }
.front-chart-bars i:nth-child(4) { height: 60%; animation-delay: 200ms; }
.front-chart-bars i:nth-child(5) { height: 50%; animation-delay: 240ms; }
.front-chart-bars i:nth-child(6) { height: 72%; animation-delay: 280ms; background: var(--primary); }
.front-chart-bars i:nth-child(7) { height: 55%; animation-delay: 320ms; }
.front-chart-bars i:nth-child(8) { height: 80%; animation-delay: 360ms; background: var(--primary); }
.front-chart-bars i:nth-child(9) { height: 68%; animation-delay: 400ms; }
.front-chart-bars i:nth-child(10) { height: 84%; animation-delay: 440ms; background: var(--primary); }
.front-chart-bars i:nth-child(11) { height: 63%; animation-delay: 480ms; }
.front-chart-bars i:nth-child(12) { height: 92%; animation-delay: 520ms; background: var(--green); }

.front-product-link-row {
  min-height: 48px;
  margin-top: 16px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
}

.front-link-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
}

.front-link-mark .icon {
  width: 14px;
  height: 14px;
}

.front-product-link-row > div {
  min-width: 0;
  margin-right: auto;
}

.front-product-link-row strong,
.front-product-link-row small {
  display: block;
  overflow: hidden;
  max-width: 150px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-product-link-row strong {
  color: var(--text-soft);
  font-size: 10px;
}

.front-product-link-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.front-product-link-row b {
  color: var(--text);
  font-size: 11px;
}

.front-status {
  color: var(--green);
  font-size: 9px;
  font-weight: 750;
}

.front-preview {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto 72px;
  gap: clamp(28px, 6vw, 72px);
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, var(--primary-soft)), var(--surface));
  box-shadow: var(--shadow-sm);
}

.front-preview-copy {
  min-width: 0;
}

.front-preview-copy h2 {
  margin: 15px 0 12px;
  color: var(--text);
  font-size: 30px;
  line-height: 1.25;
}

.front-preview-copy p {
  max-width: 500px;
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.8;
}

.front-preview-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: 0 18px 40px rgba(20, 35, 52, 0.1);
}

.front-preview-form {
  display: grid;
  gap: 9px;
}

.front-preview-form > label {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 720;
}

.front-preview-form > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.front-preview-form > div:focus-within {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.front-preview-form > div > span {
  color: var(--primary);
}

.front-preview-form input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.front-preview-form input::placeholder {
  color: var(--muted);
}

.front-preview-result {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  animation: result-in 280ms var(--ease) both;
}

.front-preview-result.is-ok {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 62%, var(--surface));
}

.front-preview-result.is-warn {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 58%, var(--surface));
}

.front-preview-result.is-danger {
  border-color: color-mix(in srgb, var(--red) 30%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 58%, var(--surface));
}

.front-preview-result-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 10px;
}

.front-preview-result-head span {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font-size: 10px;
  font-weight: 780;
}

.front-preview-result.is-warn .front-preview-result-head span {
  color: var(--amber);
}

.front-preview-result.is-danger .front-preview-result-head span {
  color: var(--red);
}

.front-preview-result-head strong,
.front-preview-result-head small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-result-head strong {
  color: var(--text);
  font-size: 14px;
}

.front-preview-result-head small {
  color: var(--muted);
  font-size: 10px;
}

.front-preview-target {
  display: block;
  overflow: hidden;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--primary);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-domain,
.front-preview-risk {
  margin-top: 10px;
}

.front-preview-domain span,
.front-preview-domain strong,
.front-preview-risk strong {
  display: block;
}

.front-preview-domain span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.front-preview-domain strong {
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.front-preview-risk {
  padding: 12px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.front-preview-risk strong {
  color: var(--text);
  font-size: 12px;
}

.front-preview-risk p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.7;
}

.front-preview-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.front-preview-meta div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.front-preview-meta span,
.front-preview-meta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-meta span {
  color: var(--muted);
  font-size: 9px;
}

.front-preview-meta strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 12px;
}

.front-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.front-preview-actions .button {
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 14px;
}

.front-preview-actions .button.is-rich-copy {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 92%, var(--surface)), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 10%, transparent);
}

.front-preview-actions .button.is-rich-copy:hover {
  box-shadow: 0 18px 32px color-mix(in srgb, var(--primary) 14%, transparent);
}

.front-preview-actions-feedback {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.7;
}

.front-preview-actions-feedback.is-success {
  color: var(--green);
}

.front-preview-actions-feedback.is-error {
  color: var(--red);
}

.front-preview-qrcode {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--primary-soft)), color-mix(in srgb, var(--surface-raised) 95%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 52%, transparent);
}

.front-preview-qrcode-shell {
  display: grid;
  grid-template-columns: minmax(188px, 208px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.front-preview-qrcode-preview {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 188px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), var(--surface-raised));
}

.front-preview-qrcode-preview::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 14px;
  pointer-events: none;
}

.front-preview-qrcode-preview svg {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 164px);
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 32px color-mix(in srgb, var(--primary) 12%, transparent);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.front-preview-qrcode:hover .front-preview-qrcode-preview svg {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 22px 38px color-mix(in srgb, var(--primary) 15%, transparent);
}

.front-preview-qrcode-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.front-preview-qrcode-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.front-preview-qrcode-toolbar .button {
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 14px;
}

.front-preview-qrcode-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.front-preview-qrcode-meta div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.front-preview-qrcode-meta span,
.front-preview-qrcode-meta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-qrcode-meta span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.front-preview-qrcode-meta strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 12px;
}

.front-preview-qrcode-color {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 220px);
  min-height: 44px;
  padding: 7px 9px 7px 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
}

.front-preview-qrcode-color input[type="color"] {
  width: 42px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.front-preview-qrcode-color input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.front-preview-qrcode-color input[type="color"]::-webkit-color-swatch,
.front-preview-qrcode-color input[type="color"]::-moz-color-swatch {
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 10px;
}

.front-preview-qrcode-hint {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.7;
}

.front-preview-qrcode-hint.is-error {
  color: var(--red);
}

.front-preview-qrcode-fallback {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  justify-items: center;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.front-preview-history {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent);
  animation: result-in 320ms var(--ease) both;
}

.front-preview-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.front-preview-history-title {
  min-width: 0;
}

.front-preview-history-title strong,
.front-preview-history-title small {
  display: block;
}

.front-preview-history-title strong {
  color: var(--text);
  font-size: 13px;
}

.front-preview-history-title small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}

.front-preview-history-head .button {
  min-height: 36px;
  padding-inline: 13px;
  border-radius: 12px;
}

.front-preview-history-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 12px;
}

.front-preview-history-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.front-preview-history-actions .button {
  min-height: 36px;
  padding-inline: 13px;
  border-radius: 12px;
}

.front-preview-history-actions .button.is-rich-copy,
.front-preview-history-actions .button.is-restore-default,
.front-preview-history-actions .button.is-group-default,
.front-preview-history-actions .button.is-share-card {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 90%, var(--surface)), color-mix(in srgb, var(--surface) 96%, transparent));
  color: var(--primary);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--primary) 10%, transparent);
}

.front-preview-history-search {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.front-preview-history-search span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.front-preview-history-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.front-preview-history-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
}

.front-preview-history-search input::placeholder {
  color: var(--muted);
}

.front-preview-history-feedback {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.7;
}

.front-preview-history-feedback.is-success {
  color: var(--green);
}

.front-preview-history-feedback.is-error {
  color: var(--red);
}

.front-preview-history-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.front-preview-history-summary div {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.front-preview-history-summary div.is-detail strong {
  white-space: normal;
  line-height: 1.45;
  font-size: 13px;
}

.front-preview-history-summary span,
.front-preview-history-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-history-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}

.front-preview-history-summary strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 16px;
}

.front-preview-history-restore-preview {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent));
  box-shadow: 0 14px 30px rgba(20, 35, 52, 0.06);
}

.front-preview-history-restore-head {
  display: grid;
  gap: 4px;
}

.front-preview-history-restore-head strong {
  color: var(--text);
  font-size: 13px;
}

.front-preview-history-restore-head small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}

.front-preview-history-restore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.front-preview-history-restore-grid div {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}

.front-preview-history-restore-grid span,
.front-preview-history-restore-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-history-restore-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}

.front-preview-history-restore-grid strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
}

.front-preview-history-restore-note {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.8;
}

.front-preview-history-restore-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.front-preview-history-restore-actions .button {
  min-height: 38px;
  padding-inline: 14px;
  border-radius: 12px;
}

.front-preview-history-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.front-preview-history-filter,
.front-preview-history-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 720;
  transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.front-preview-history-filter:hover,
.front-preview-history-select:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
}

.front-preview-history-filter.is-active,
.front-preview-history-select.is-active {
  border-color: color-mix(in srgb, var(--primary) 58%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 88%, var(--surface));
  color: var(--primary);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 10%, transparent);
}

.front-preview-history-empty {
  margin-top: 12px;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.front-preview-history-empty strong,
.front-preview-history-empty p {
  display: block;
}

.front-preview-history-empty strong {
  color: var(--text);
  font-size: 12px;
}

.front-preview-history-empty p {
  margin: 5px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.75;
}

.front-preview-history-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.front-preview-history-item {
  width: 100%;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(20, 35, 52, 0.06);
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.front-preview-history-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  box-shadow: 0 16px 30px rgba(20, 35, 52, 0.1);
}

.front-preview-history-item:active {
  transform: translateY(0) scale(0.99);
}

.front-preview-history-item-shell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.front-preview-history-select {
  flex: 0 0 auto;
  min-width: 64px;
}

.front-preview-history-open {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
}

.front-preview-history-main {
  min-width: 0;
}

.front-preview-history-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.front-preview-history-line strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-history-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green-soft) 78%, var(--surface));
  color: var(--green);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.front-preview-history-badge.is-warn {
  background: color-mix(in srgb, var(--amber-soft) 74%, var(--surface));
  color: var(--amber);
}

.front-preview-history-badge.is-danger {
  background: color-mix(in srgb, var(--red-soft) 74%, var(--surface));
  color: var(--red);
}

.front-preview-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.front-preview-history-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-history-meta-mark {
  border-color: color-mix(in srgb, var(--amber) 26%, transparent);
  background: color-mix(in srgb, var(--amber-soft) 78%, var(--surface));
  color: var(--amber);
}

.front-preview-history-open > small {
  display: block;
  overflow: hidden;
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-history-favorite {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--amber) 22%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: color-mix(in srgb, var(--amber) 78%, var(--muted));
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.front-preview-history-favorite:hover {
  transform: translateY(-1px) rotate(-4deg);
  border-color: color-mix(in srgb, var(--amber) 38%, transparent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--amber) 18%, transparent);
}

.front-preview-history-favorite.is-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 90%, #fff 10%), color-mix(in srgb, var(--amber) 68%, var(--primary) 16%));
  color: #ffffff;
  border-color: color-mix(in srgb, var(--amber) 58%, transparent);
}

.front-evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.front-evidence-item {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  padding: 20px 24px;
  border-right: 1px solid var(--border);
}

.front-evidence-item:first-child {
  padding-left: 0;
}

.front-evidence-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.front-evidence-item > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
}

.front-evidence-item:nth-child(2) > span {
  background: var(--green-soft);
  color: var(--green);
}

.front-evidence-item:nth-child(3) > span {
  background: var(--amber-soft);
  color: var(--amber);
}

.front-evidence-item .icon {
  width: 17px;
  height: 17px;
}

.front-evidence-item strong,
.front-evidence-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-evidence-item strong {
  color: var(--text);
  font-size: 13px;
}

.front-evidence-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.front-live-stats {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 34px 0 10px;
}

.front-live-stats-shell {
  display: grid;
  gap: 28px;
  padding: 26px 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary-soft) 42%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-elevated) 96%, transparent), color-mix(in srgb, var(--primary-soft) 18%, var(--surface)));
  box-shadow: var(--shadow-sm);
}

.front-live-stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 18px;
  align-items: stretch;
}

.front-live-stats-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.front-live-stat-card {
  min-width: 0;
  min-height: 144px;
  padding: 18px 18px 17px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 14px 30px rgba(20, 35, 52, 0.06);
  transition: transform 200ms var(--ease), box-shadow 200ms ease, border-color 200ms ease;
}

.front-live-stat-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  box-shadow: 0 20px 34px rgba(20, 35, 52, 0.09);
}

.front-live-stat-card small,
.front-live-stat-card strong,
.front-live-stat-card p {
  display: block;
}

.front-live-stat-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.06em;
}

.front-live-stat-card strong {
  margin-top: 12px;
  color: var(--text);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.front-live-stat-card p {
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

.front-live-stats-visual {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 45%, transparent);
}

.front-live-stats-visual-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.front-live-stats-visual-head span,
.front-live-stats-visual-head strong {
  display: block;
}

.front-live-stats-visual-head span {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 740;
}

.front-live-stats-visual-head strong {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}

.front-live-stats-visual-head b {
  color: var(--primary);
  font-size: 26px;
  line-height: 1;
}

.front-live-trend-bars {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  align-items: end;
  height: 178px;
  gap: 8px;
  margin-top: 18px;
  padding: 16px 0 0;
  border-bottom: 1px solid var(--border);
}

.front-live-trend-bar {
  display: block;
  min-height: 12px;
  height: 12px;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface));
  opacity: 0;
  transform: translateY(10px) scaleY(0.2);
  transform-origin: bottom;
  transition: height 420ms var(--ease), opacity 320ms ease, transform 420ms var(--ease), background-color 200ms ease;
}

.front-live-stats-visual.is-ready .front-live-trend-bar {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

.front-live-trend-bar.is-peak {
  background: var(--primary);
}

.front-live-trend-bar.is-latest {
  background: var(--green);
}

.front-live-trend-axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.front-live-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.front-live-summary div {
  min-width: 0;
  padding: 14px 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
}

.front-live-summary span,
.front-live-summary strong,
.front-live-summary small {
  display: block;
}

.front-live-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}

.front-live-summary strong {
  margin-top: 6px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.front-live-summary small {
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.5;
}

.front-live-trend-disabled {
  display: grid;
  place-items: center;
  min-height: 240px;
  gap: 10px;
  padding: 20px;
  text-align: center;
}

.front-live-trend-disabled span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--primary-soft);
  color: var(--primary);
}

.front-live-trend-disabled .icon {
  width: 22px;
  height: 22px;
}

.front-live-trend-disabled strong {
  color: var(--text);
  font-size: 18px;
}

.front-live-trend-disabled p {
  max-width: 280px;
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
}

.front-updates-section {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 88px 0 12px;
}

.front-updates-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-soft) 38%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-soft) 92%, var(--surface)));
  box-shadow: var(--shadow-sm);
}

.front-updates-list {
  display: grid;
  gap: 12px;
}

.front-updates-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease;
}

.front-updates-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: var(--shadow-md);
}

.front-updates-index {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 14px;
  font-weight: 780;
  letter-spacing: 0.04em;
}

.front-updates-item:nth-child(2) .front-updates-index {
  background: var(--green-soft);
  color: var(--green);
}

.front-updates-item:nth-child(3) .front-updates-index {
  background: var(--amber-soft);
  color: var(--amber);
}

.front-updates-item:nth-child(4) .front-updates-index {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.front-updates-copy {
  min-width: 0;
}

.front-updates-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.front-updates-head strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
}

.front-updates-head b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 88%, var(--surface));
  color: var(--primary);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.06em;
}

.front-updates-item:nth-child(2) .front-updates-head b {
  background: color-mix(in srgb, var(--green-soft) 88%, var(--surface));
  color: var(--green);
}

.front-updates-item:nth-child(3) .front-updates-head b {
  background: color-mix(in srgb, var(--amber-soft) 88%, var(--surface));
  color: var(--amber);
}

.front-updates-item:nth-child(4) .front-updates-head b {
  background: color-mix(in srgb, var(--cyan-soft) 88%, var(--surface));
  color: var(--cyan);
}

.front-updates-copy p {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.8;
}

.front-support-section {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 76px 0 12px;
}

.front-support-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: start;
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, var(--border));
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cyan-soft) 46%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-soft) 92%, var(--surface)));
  box-shadow: var(--shadow-sm);
}

.front-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.front-support-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  min-height: 178px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease;
}

.front-support-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--border));
  box-shadow: var(--shadow-md);
}

.front-support-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--primary-soft);
  color: var(--primary);
}

.front-support-icon.is-green {
  background: var(--green-soft);
  color: var(--green);
}

.front-support-icon.is-amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.front-support-icon .icon {
  width: 20px;
  height: 20px;
}

.front-support-card > div {
  min-width: 0;
}

.front-support-card small {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.12em;
}

.front-support-card strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}

.front-support-card p {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.72;
}

.front-support-card code {
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 11px;
}

.front-support-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  margin-top: 12px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}

.front-support-link:hover {
  color: var(--primary-strong);
}

.front-support-link .icon {
  width: 15px;
  height: 15px;
  transition: transform 180ms ease;
}

.front-support-link:hover .icon {
  transform: translateX(3px);
}

.front-support-contact {
  margin-top: 10px;
  color: var(--text-soft) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

.front-pwa-guide-section {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 76px 0 12px;
}

.front-pwa-guide-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 24px;
  align-items: start;
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--primary-soft) 44%, transparent), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-soft) 92%, var(--surface)));
  box-shadow: var(--shadow-sm);
}

.front-pwa-guide-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow-sm);
}

.front-pwa-guide-preview {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.front-pwa-guide-icon-wrap {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--primary-soft) 88%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}

.front-pwa-guide-icon-wrap img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.front-pwa-guide-preview strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
}

.front-pwa-guide-preview small {
  display: block;
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
}

.front-pwa-guide-actions {
  margin-top: 18px;
}

.front-pwa-install-button {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
}

.front-pwa-install-button .icon {
  width: 16px;
  height: 16px;
}

.front-pwa-guide-feedback {
  margin: 12px 0 0;
  min-height: 22px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.7;
  transition: color 180ms ease;
}

.front-pwa-guide-feedback.is-success {
  color: var(--green);
}

.front-pwa-guide-feedback.is-error {
  color: var(--red);
}

.front-pwa-guide-points {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.front-pwa-guide-point {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
}

.front-pwa-guide-point span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--primary);
}

.front-pwa-guide-point strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.front-pwa-guide-point small {
  display: block;
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.7;
}

.front-partners-section {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 76px 0 12px;
}

.front-partners-shell {
  display: grid;
  gap: 28px;
}

.front-partners-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.front-partner-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--primary-soft) 22%, transparent), transparent 28%),
    color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease;
}

.front-partner-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  box-shadow: var(--shadow-md);
}

.front-partner-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary-soft) 88%, var(--surface));
  color: var(--primary);
}

.front-partner-copy {
  min-width: 0;
}

.front-partner-copy small {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1.6;
  word-break: break-all;
}

.front-partner-copy strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
}

.front-partner-copy p {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.75;
}

.front-partner-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  margin-top: 12px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}

.front-partner-link .icon {
  width: 15px;
  height: 15px;
  transition: transform 180ms ease;
}

.front-partner-link:hover .icon {
  transform: translateX(3px);
}

.front-feedback-section {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 76px 0 12px;
}

.front-feedback-shell {
  display: grid;
  gap: 28px;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary-soft) 26%, transparent), transparent 34%),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--cyan-soft) 24%, transparent), transparent 30%),
    color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow-md);
}

.front-feedback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.front-feedback-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.front-feedback-card::after {
  content: "";
  position: absolute;
  inset: auto -10% -42px auto;
  width: 118px;
  height: 118px;
  border-radius: 999px;
  opacity: 0.28;
  pointer-events: none;
  background: color-mix(in srgb, var(--primary-soft) 76%, transparent);
  filter: blur(4px);
}

.front-feedback-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: var(--shadow-md);
}

.front-feedback-card.is-cyan::after {
  background: color-mix(in srgb, var(--cyan-soft) 82%, transparent);
}

.front-feedback-card.is-violet::after {
  background: color-mix(in srgb, var(--primary-soft) 84%, transparent);
}

.front-feedback-card.is-green::after {
  background: color-mix(in srgb, var(--green-soft) 84%, transparent);
}

.front-feedback-card.is-amber::after {
  background: color-mix(in srgb, var(--amber-soft) 82%, transparent);
}

.front-feedback-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.front-feedback-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 14%, transparent);
}

.front-feedback-avatar.is-cyan {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 88%, #fff) 0%, color-mix(in srgb, var(--primary) 80%, #fff) 100%);
}

.front-feedback-avatar.is-violet {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, #fff) 0%, color-mix(in srgb, var(--cyan) 52%, #fff) 100%);
}

.front-feedback-avatar.is-green {
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 88%, #fff) 0%, color-mix(in srgb, var(--cyan) 72%, #fff) 100%);
}

.front-feedback-avatar.is-amber {
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 92%, #fff) 0%, color-mix(in srgb, var(--primary) 28%, #fff) 100%);
}

.front-feedback-meta {
  min-width: 0;
}

.front-feedback-meta strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  line-height: 1.4;
}

.front-feedback-meta small {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}

.front-feedback-head b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.front-feedback-card p {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.85;
}

.front-deploy-section {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 76px 0 12px;
}

.front-deploy-shell {
  display: grid;
  gap: 28px;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 30px;
  background:
    radial-gradient(circle at 0% 18%, color-mix(in srgb, var(--primary-soft) 28%, transparent), transparent 30%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--cyan-soft) 24%, transparent), transparent 26%),
    color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow-md);
}

.front-deploy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.front-deploy-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease;
}

.front-deploy-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: var(--shadow-md);
}

.front-deploy-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: #fff;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 14%, transparent);
}

.front-deploy-icon .icon {
  width: 20px;
  height: 20px;
}

.front-deploy-icon.is-blue {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 90%, #fff) 0%, color-mix(in srgb, var(--cyan) 45%, #fff) 100%);
}

.front-deploy-icon.is-cyan {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 88%, #fff) 0%, color-mix(in srgb, var(--primary) 72%, #fff) 100%);
}

.front-deploy-icon.is-green {
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 88%, #fff) 0%, color-mix(in srgb, var(--cyan) 62%, #fff) 100%);
}

.front-deploy-icon.is-amber {
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 90%, #fff) 0%, color-mix(in srgb, var(--primary) 26%, #fff) 100%);
}

.front-deploy-copy {
  min-width: 0;
}

.front-deploy-copy small {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.front-deploy-copy strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
}

.front-deploy-copy p {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.8;
}

.front-matrix-section {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 76px 0 12px;
}

.front-matrix-shell {
  display: grid;
  gap: 28px;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary-soft) 22%, transparent), transparent 28%),
    radial-gradient(circle at 0% 22%, color-mix(in srgb, var(--cyan-soft) 18%, transparent), transparent 24%),
    color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow-md);
}

.front-matrix-table-wrap {
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: var(--shadow-sm);
}

.front-matrix-mobile-hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin: -8px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.front-matrix-mobile-hint .icon {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

.front-matrix-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.front-matrix-table thead th {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: left;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.front-matrix-table tbody th,
.front-matrix-table tbody td {
  padding: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 8%, var(--border));
  vertical-align: top;
}

.front-matrix-table tbody tr:last-child th,
.front-matrix-table tbody tr:last-child td {
  border-bottom: 0;
}

.front-matrix-table tbody th {
  width: 180px;
  color: var(--text);
  font-size: 16px;
  font-weight: 760;
  line-height: 1.45;
}

.front-matrix-table tbody td {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.8;
}

.front-matrix-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 76%, var(--surface));
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.front-checklist-section {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 76px 0 12px;
}

.front-checklist-shell {
  display: grid;
  gap: 28px;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary-soft) 22%, transparent), transparent 28%),
    radial-gradient(circle at 100% 24%, color-mix(in srgb, var(--amber-soft) 18%, transparent), transparent 26%),
    color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow-md);
}

.front-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.front-checklist-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease;
}

.front-checklist-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: var(--shadow-md);
}

.front-checklist-badge {
  display: grid;
  gap: 10px;
  align-content: start;
}

.front-checklist-step,
.front-checklist-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
}

.front-checklist-step {
  background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface));
  color: var(--primary);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.front-checklist-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber-soft) 86%, var(--surface)) 0%, color-mix(in srgb, var(--primary-soft) 78%, var(--surface)) 100%);
  color: var(--text);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 10%, transparent);
}

.front-checklist-icon .icon {
  width: 20px;
  height: 20px;
}

.front-checklist-copy {
  min-width: 0;
}

.front-checklist-copy small {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.front-checklist-copy strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
}

.front-checklist-copy p {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.8;
}

.front-enterprise-section {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 76px 0 12px;
}

.front-enterprise-shell {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 26px;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary-soft) 34%, transparent), transparent 30%),
    radial-gradient(circle at 96% 16%, color-mix(in srgb, var(--cyan-soft) 28%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow: var(--shadow-md);
}

.front-enterprise-shell::after {
  content: "";
  position: absolute;
  inset: auto -92px -118px auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 16%, transparent), transparent 68%);
  pointer-events: none;
}

.front-enterprise-shell > * {
  position: relative;
  z-index: 1;
}

.front-enterprise-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.front-enterprise-summary div {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 44%, transparent);
}

.front-enterprise-summary span,
.front-enterprise-summary strong,
.front-enterprise-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-enterprise-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.front-enterprise-summary strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.15;
}

.front-enterprise-summary small {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 11px;
}

.front-enterprise-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.front-enterprise-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 218px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease;
}

.front-enterprise-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -42px;
  width: 118px;
  height: 118px;
  border-radius: 999px;
  opacity: 0.24;
  background: color-mix(in srgb, var(--primary-soft) 80%, transparent);
  pointer-events: none;
}

.front-enterprise-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: var(--shadow-md);
}

.front-enterprise-card.is-cyan::after { background: color-mix(in srgb, var(--cyan-soft) 86%, transparent); }
.front-enterprise-card.is-green::after { background: color-mix(in srgb, var(--green-soft) 86%, transparent); }
.front-enterprise-card.is-amber::after { background: color-mix(in srgb, var(--amber-soft) 86%, transparent); }
.front-enterprise-card.is-rose::after { background: color-mix(in srgb, var(--red-soft) 78%, transparent); }
.front-enterprise-card.is-slate::after { background: color-mix(in srgb, var(--surface-soft) 84%, transparent); }

.front-enterprise-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 17px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, #fff), color-mix(in srgb, var(--cyan) 42%, #fff));
  color: #fff;
  box-shadow: 0 16px 30px color-mix(in srgb, var(--primary) 16%, transparent);
}

.front-enterprise-card.is-cyan .front-enterprise-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 88%, #fff), color-mix(in srgb, var(--primary) 62%, #fff)); }
.front-enterprise-card.is-green .front-enterprise-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--green) 88%, #fff), color-mix(in srgb, var(--cyan) 58%, #fff)); }
.front-enterprise-card.is-amber .front-enterprise-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 90%, #fff), color-mix(in srgb, var(--primary) 26%, #fff)); }
.front-enterprise-card.is-rose .front-enterprise-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--red) 88%, #fff), color-mix(in srgb, var(--amber) 28%, #fff)); }
.front-enterprise-card.is-slate .front-enterprise-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--text-soft) 82%, #fff), color-mix(in srgb, var(--primary) 30%, #fff)); }

.front-enterprise-icon .icon {
  width: 20px;
  height: 20px;
}

.front-enterprise-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-top: 16px;
}

.front-enterprise-copy small {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.front-enterprise-copy strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
}

.front-enterprise-copy p {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.78;
}

.front-enterprise-section[data-enterprise-layout="compact"] .front-enterprise-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.front-enterprise-section[data-enterprise-layout="compact"] .front-enterprise-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 0;
}

.front-enterprise-section[data-enterprise-layout="compact"] .front-enterprise-copy {
  margin-top: 0;
}

.front-quick-actions {
  position: fixed;
  right: max(18px, calc((100vw - 1180px) / 2 - 18px));
  bottom: 96px;
  z-index: 42;
  display: grid;
  gap: 8px;
  width: 176px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.front-quick-actions > span {
  padding: 4px 8px 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.front-quick-actions a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px;
  border-radius: 16px;
  color: var(--text-soft);
  transition: transform 180ms var(--ease), background-color 180ms ease, color 180ms ease;
}

.front-quick-actions a:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary-soft) 72%, transparent);
  color: var(--primary);
}

.front-quick-actions .icon {
  width: 18px;
  height: 18px;
}

.front-quick-actions a > .icon,
.front-quick-actions a > svg {
  display: grid;
  place-items: center;
}

.front-quick-actions strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .front-quick-actions {
    display: none;
  }
}

.front-import-board {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 88px 0 12px;
}

.front-import-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}

.front-import-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 196px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 26%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease;
}

.front-import-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: var(--shadow-md);
}

.front-import-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
}

.front-import-card:nth-child(2) > span {
  background: var(--green-soft);
  color: var(--green);
}

.front-import-card:nth-child(3) > span {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.front-import-card .icon {
  width: 20px;
  height: 20px;
}

.front-import-card small {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
}

.front-import-card strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
}

.front-import-card p {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.75;
}

.front-scenarios {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 96px 0 16px;
}

.front-scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 36px;
}

.front-scenario-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease;
}

.front-scenario-card::after {
  position: absolute;
  right: -36px;
  bottom: -42px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  content: "";
  transition: transform 260ms var(--ease), opacity 260ms ease;
}

.front-scenario-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: var(--shadow-md);
}

.front-scenario-card:hover::after {
  opacity: 0.72;
  transform: scale(1.18);
}

.front-scenario-card > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
}

.front-scenario-card:nth-child(2) > span {
  background: var(--green-soft);
  color: var(--green);
}

.front-scenario-card:nth-child(3) > span {
  background: var(--amber-soft);
  color: var(--amber);
}

.front-scenario-card:nth-child(4) > span {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.front-scenario-card .icon {
  width: 20px;
  height: 20px;
}

.front-scenario-card strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 18px;
  color: var(--text);
  font-size: 16px;
}

.front-scenario-card p {
  position: relative;
  z-index: 1;
  margin: 9px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.75;
}

.front-section {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 112px 0;
}

.front-section-heading {
  max-width: 660px;
}

.front-section-heading h2,
.front-reliability h2 {
  margin: 15px 0 12px;
  color: var(--text);
  font-size: 34px;
  font-weight: 760;
  line-height: 1.24;
}

.front-section-heading p,
.front-reliability-copy > p {
  max-width: 560px;
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.8;
}

.front-feature-list {
  display: grid;
  margin-top: 54px;
  border-top: 1px solid var(--border);
}

.front-feature {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  min-height: 128px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  transition: padding 180ms var(--ease), background-color 180ms ease;
}

.front-feature:hover {
  padding-right: 14px;
  padding-left: 14px;
  background: var(--surface-soft);
}

.front-feature-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
}

.front-feature-icon.blue {
  background: var(--primary-soft);
  color: var(--primary);
}

.front-feature-icon.green {
  background: var(--green-soft);
  color: var(--green);
}

.front-feature-icon.amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.front-feature-icon.cyan {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.front-feature-icon .icon {
  width: 21px;
  height: 21px;
}

.front-feature h3,
.front-flow-step h3 {
  margin: 1px 0 7px;
  color: var(--text);
  font-size: 17px;
}

.front-feature p,
.front-flow-step p {
  max-width: 530px;
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
}

.front-feature-number {
  color: var(--border-strong);
  font-size: 14px;
  font-weight: 780;
}

.front-flow-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.front-flow-inner {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 104px 0;
}

.front-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-top: 50px;
}

.front-flow-step {
  position: relative;
  min-width: 0;
  padding-top: 52px;
}

.front-flow-step::before {
  position: absolute;
  top: 18px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--border-strong);
  content: "";
}

.front-flow-step > span {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--primary);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 760;
}

.front-flow-step:nth-child(2) > span {
  border-color: var(--green);
  color: var(--green);
}

.front-flow-step:nth-child(3) > span {
  border-color: var(--amber);
  color: var(--amber);
}

.front-faq-section {
  padding-top: 86px;
}

.front-faq-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 24px;
  align-items: start;
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-soft) 34%, transparent), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated) 96%, transparent), color-mix(in srgb, var(--surface-soft) 92%, var(--surface)));
  box-shadow: var(--shadow-sm);
}

.front-faq-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 720;
  text-decoration: none;
}

.front-faq-help .icon {
  width: 15px;
  height: 15px;
}

.front-faq-list {
  display: grid;
  gap: 12px;
}

.front-faq-item {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 14px 30px rgba(20, 35, 52, 0.05);
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.front-faq-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  box-shadow: 0 20px 36px rgba(20, 35, 52, 0.08);
}

.front-faq-item.is-open {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 26%, var(--surface)) 0%, color-mix(in srgb, var(--surface) 96%, transparent) 100%);
  box-shadow: 0 20px 38px color-mix(in srgb, var(--primary) 10%, transparent);
}

.front-faq-toggle {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.front-faq-index {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary-soft) 80%, var(--surface));
  color: var(--primary);
  font-size: 14px;
  font-weight: 780;
  letter-spacing: 0.04em;
}

.front-faq-copy {
  min-width: 0;
}

.front-faq-copy strong,
.front-faq-copy small {
  display: block;
}

.front-faq-copy strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
}

.front-faq-copy small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.front-faq-arrow {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--text-soft);
}

.front-faq-arrow .icon {
  width: 18px;
  height: 18px;
  transition: transform 220ms var(--ease), color 180ms ease;
}

.front-faq-item.is-open .front-faq-arrow .icon {
  transform: rotate(180deg);
  color: var(--primary);
}

.front-faq-answer {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 280ms var(--ease), opacity 180ms ease;
}

.front-faq-item.is-open .front-faq-answer {
  opacity: 1;
}

.front-faq-answer-inner {
  padding: 0 22px 22px 90px;
}

.front-faq-answer-inner p {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.8;
}

.front-reliability {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr);
  align-items: center;
  gap: clamp(44px, 9vw, 130px);
}

.front-reliability-copy .button {
  margin-top: 28px;
}

.front-reliability-points {
  display: grid;
  border-top: 1px solid var(--border);
}

.front-reliability-points > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px 13px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.front-reliability-points > div > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--green-soft);
  color: var(--green);
}

.front-reliability-points .icon {
  width: 18px;
  height: 18px;
}

.front-reliability-points strong,
.front-reliability-points small {
  display: block;
  min-width: 0;
}

.front-reliability-points strong {
  color: var(--text);
  font-size: 14px;
}

.front-reliability-points small {
  margin-top: -7px;
  color: var(--muted);
  font-size: 12px;
}


.back-top-button {
  display: inline-flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  right: max(18px, calc((100vw - 1180px) / 2));
  bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  z-index: 24;
  gap: 0;
  width: auto;
  min-width: 48px;
  max-width: 48px;
  min-height: 48px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 92%, transparent), color-mix(in srgb, var(--surface) 78%, transparent)),
    var(--surface);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.48) inset;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 740;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.96);
  visibility: hidden;
  transition: max-width 220ms var(--ease), transform 180ms var(--ease), opacity 180ms ease, visibility 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.back-top-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 54%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%);
  opacity: 0.82;
  pointer-events: none;
}

.back-top-button::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 7px;
  left: 9px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 42%, transparent);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 180ms ease, transform 180ms var(--ease);
  pointer-events: none;
}

.back-top-button > * {
  position: relative;
  z-index: 1;
}

.public-page .back-top-button {
  z-index: 43;
}

.app-page .back-top-button {
  right: 22px;
}

.back-top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.back-top-button:hover,
.back-top-button:focus-visible {
  max-width: 132px;
  gap: 8px;
  transform: translateY(-2px) scale(1);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, var(--primary-soft)), color-mix(in srgb, var(--surface) 82%, var(--primary-soft))),
    var(--surface);
  color: var(--text);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.58) inset;
}

.back-top-button:hover::after,
.back-top-button:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.back-top-button:active {
  transform: translateY(0) scale(0.98);
}

.back-top-button .icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 11%, var(--surface-soft));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.44) inset,
    0 8px 14px color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  transition: background-color 180ms ease, color 180ms ease, transform 180ms var(--ease);
}

.back-top-button:hover .icon,
.back-top-button:focus-visible .icon {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-1px);
}

.back-top-button span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  line-height: 1;
  white-space: nowrap;
  transition: max-width 220ms var(--ease), opacity 140ms ease;
}

.back-top-button:hover span,
.back-top-button:focus-visible span {
  max-width: 72px;
  opacity: 1;
}

[data-theme="dark"] .back-top-button {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border-strong));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 88%, transparent), color-mix(in srgb, var(--surface) 76%, transparent)),
    var(--surface);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

[data-theme="dark"] .back-top-button::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 54%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 16%, transparent), transparent 42%);
}

[data-theme="dark"] .back-top-button .icon {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-soft));
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .back-top-button:hover,
[data-theme="dark"] .back-top-button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border-strong));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 88%, var(--primary-soft)), color-mix(in srgb, var(--surface) 78%, var(--primary-soft))),
    var(--surface);
}

html.front-motion-ready .front-reveal {
  opacity: 0;
  transform: translateY(14px);
}

html.front-motion-ready .front-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}

.front-preview-error-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
}

.public-page[data-visual-style="aurora"] {
  background:
    radial-gradient(circle at 0% 12%, rgba(23, 105, 224, 0.17), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(102, 204, 255, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.98));
}

.public-page[data-visual-style="sunset"] {
  background:
    radial-gradient(circle at 15% 0%, rgba(251, 146, 60, 0.18), transparent 30%),
    radial-gradient(circle at 100% 20%, rgba(244, 114, 182, 0.17), transparent 30%),
    linear-gradient(180deg, #fffaf5 0%, #fff7ed 40%, #fff 100%);
}

.public-page[data-visual-style="midnight"] {
  background:
    radial-gradient(circle at 20% 0%, rgba(23, 105, 224, 0.14), transparent 26%),
    radial-gradient(circle at 100% 20%, rgba(15, 118, 110, 0.12), transparent 24%),
    linear-gradient(180deg, #f7f9fc 0%, #eef2f9 100%);
}

[data-theme="dark"] .public-page[data-visual-style="aurora"] {
  background:
    radial-gradient(circle at 0% 12%, rgba(56, 189, 248, 0.16), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.16), transparent 28%),
    linear-gradient(180deg, #07111f, #0a1323 42%, #0d1526 100%);
}

[data-theme="dark"] .public-page[data-visual-style="sunset"] {
  background:
    radial-gradient(circle at 15% 0%, rgba(251, 146, 60, 0.16), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(236, 72, 153, 0.16), transparent 26%),
    linear-gradient(180deg, #140d12 0%, #191118 45%, #120e15 100%);
}

[data-theme="dark"] .public-page[data-visual-style="midnight"] {
  background:
    radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.16), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(20, 184, 166, 0.15), transparent 28%),
    linear-gradient(180deg, #050b14 0%, #0b1220 45%, #0f1727 100%);
}

.redirect-page[data-visual-style="sunset"] .redirect-panel,
.error-page[data-visual-style="sunset"] .error-shell {
  background: linear-gradient(180deg, rgba(255, 250, 245, 0.96), rgba(255, 245, 238, 0.98));
}

.redirect-page[data-visual-style="midnight"] .redirect-panel,
.error-page[data-visual-style="midnight"] .error-shell {
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.95), rgba(236, 242, 252, 0.98));
}

[data-theme="dark"] .redirect-page[data-visual-style="sunset"] .redirect-panel,
[data-theme="dark"] .error-page[data-visual-style="sunset"] .error-shell {
  background: linear-gradient(180deg, rgba(31, 18, 24, 0.94), rgba(27, 17, 22, 0.98));
}

[data-theme="dark"] .redirect-page[data-visual-style="midnight"] .redirect-panel,
[data-theme="dark"] .error-page[data-visual-style="midnight"] .error-shell {
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.94), rgba(12, 20, 36, 0.98));
}

[data-theme="dark"] .redirect-page[data-visual-style="minimal"] {
  background: linear-gradient(180deg, #0d1524, #0a1220);
}

.pwa-standalone .front-header,
.pwa-standalone .topbar {
  padding-top: max(12px, env(safe-area-inset-top));
}

body[data-immersive-mobile="1"] {
  padding-bottom: env(safe-area-inset-bottom);
}

.front-evidence .front-reveal:nth-child(2),
.front-scenario-grid .front-reveal:nth-child(2),
.front-feature-list .front-reveal:nth-child(2),
.front-flow-steps .front-reveal:nth-child(2) {
  transition-delay: 75ms;
}

.front-evidence .front-reveal:nth-child(3),
.front-scenario-grid .front-reveal:nth-child(3),
.front-feature-list .front-reveal:nth-child(3),
.front-flow-steps .front-reveal:nth-child(3) {
  transition-delay: 150ms;
}

.front-scenario-grid .front-reveal:nth-child(4),
.front-feature-list .front-reveal:nth-child(4) {
  transition-delay: 225ms;
}

.auth-home-link {
  display: inline-flex;
  width: max-content;
}

.auth-home-link:focus-visible {
  outline-color: rgba(255, 255, 255, 0.62);
}

@keyframes front-product-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes front-bar-in {
  from { opacity: 0; transform: scaleY(0.1); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes front-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.72); }
}

@media (max-width: 980px) {
  .front-header-inner,
  .front-hero,
  .front-preview,
  .front-evidence,
  .front-live-stats,
  .front-enterprise-section,
  .front-import-board,
  .front-scenarios,
  .front-section,
  .front-flow-inner,
  .front-footer {
    width: min(calc(100% - 40px), 820px);
  }

  .front-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-top: 62px;
    gap: 44px;
  }

  .front-hero-copy {
    max-width: 610px;
  }

  .front-product {
    width: min(100%, 680px);
  }

  .front-preview {
    grid-template-columns: 1fr;
    width: min(calc(100% - 40px), 820px);
    margin-bottom: 58px;
  }

  .front-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-import-grid {
    grid-template-columns: 1fr;
  }

  .front-enterprise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-enterprise-section[data-enterprise-layout="compact"] .front-enterprise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-live-stats-grid {
    grid-template-columns: 1fr;
  }

  .front-updates-shell {
    grid-template-columns: 1fr;
  }

  .front-faq-shell {
    grid-template-columns: 1fr;
  }

  .front-reliability {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .back-top-button {
    right: 18px;
  }
}

@media (max-width: 720px) {
  .public-page.has-front-mobile-quicknav {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .front-header-inner {
    width: min(calc(100% - 28px), 640px);
    min-height: 64px;
    gap: 8px;
  }

  .front-brand img {
    width: 34px;
    height: 34px;
  }

  .front-brand strong {
    font-size: 14px;
  }

  .front-menu-button {
    display: inline-flex;
    margin-left: auto;
  }

  .front-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 14px;
    display: none;
    width: min(calc(100vw - 28px), 290px);
    margin: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
  }

  .front-menu-open .front-nav {
    display: grid;
  }

  .front-nav a {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 6px;
    line-height: 42px;
  }

  .front-nav a:hover {
    background: var(--surface-soft);
  }

  .front-nav-login {
    display: block;
    border-top: 1px solid var(--border);
    color: var(--primary) !important;
  }

  .front-workspace-button {
    display: none;
  }

  .front-header-actions {
    margin-left: 0;
  }

  .front-mobile-quicknav {
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: max(14px, env(safe-area-inset-left, 0px));
    z-index: 46;
    display: grid;
    grid-template-columns: repeat(var(--front-mobile-quicknav-columns, 5), minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .front-mobile-quicknav a {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 58px;
    padding: 10px 4px 8px;
    border-radius: 18px;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 760;
    transition: transform 180ms var(--ease), background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  }

  .front-mobile-quicknav a:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary-soft) 58%, transparent);
  }

  .front-mobile-quicknav a.is-active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
    transform: translateY(-2px);
  }

  .front-mobile-quicknav a .icon {
    width: 18px;
    height: 18px;
  }

  .front-mobile-quicknav a[data-front-mobile-nav-top="1"] .icon {
    transform: rotate(-90deg);
  }

  .front-mobile-quicknav a span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
  }

  .front-hero,
  .front-preview,
  .front-evidence,
  .front-live-stats,
  .front-enterprise-section,
  .front-import-board,
  .front-scenarios,
  .front-section,
  .front-flow-inner,
  .front-footer {
    width: min(calc(100% - 28px), 640px);
  }

  .front-hero {
    padding: 34px 0 28px;
    gap: 28px;
  }

  .front-preview {
    width: min(calc(100% - 28px), 640px);
    margin-bottom: 42px;
    padding: 20px 16px;
    border-radius: 10px;
  }

  .front-preview-copy h2 {
    font-size: 25px;
  }

  .front-preview-form > div {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .front-preview-form .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .front-preview-meta {
    grid-template-columns: 1fr;
  }

  .front-preview-actions .button {
    flex: 1 1 132px;
  }

  .front-preview-qrcode-shell {
    grid-template-columns: 1fr;
  }

  .front-preview-qrcode-preview {
    min-height: 204px;
  }

  .front-preview-qrcode-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-preview-history-head {
    flex-direction: column;
    align-items: stretch;
  }

  .front-preview-history-head .button {
    width: 100%;
  }

  .front-preview-history-tools {
    grid-template-columns: 1fr;
  }

  .front-preview-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-preview-history-restore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-preview-history-actions {
    justify-content: stretch;
  }

  .front-preview-history-actions .button {
    flex: 1 1 160px;
  }

  .front-preview-history-restore-actions .button {
    flex: 1 1 160px;
  }

  .front-preview-history-filter,
  .front-preview-history-select {
    flex: 1 1 130px;
  }

  .front-hero h1 {
    margin-top: 17px;
    font-size: 39px;
    line-height: 1.16;
  }

  .front-hero-copy > p {
    font-size: 15px;
  }

  .front-url-form {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 0;
    margin-top: 24px;
  }

  .front-url-form .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .front-product-body {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 294px;
  }

  .front-product-side {
    gap: 8px;
    padding-top: 13px;
  }

  .front-product-side img {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
  }

  .front-product-side span {
    width: 29px;
    height: 29px;
  }

  .front-product-content {
    padding: 18px 16px;
  }

  .front-product-metrics {
    margin-top: 18px;
  }

  .front-product-metrics > div {
    padding: 12px 8px;
  }

  .front-product-metrics strong {
    font-size: 17px;
  }

  .front-product-metrics span,
  .front-product-metrics small {
    font-size: 8px;
  }

  .front-chart-bars {
    height: 72px;
    gap: 4px;
  }

  .front-product-link-row {
    gap: 8px;
    min-height: 44px;
    padding: 0 8px;
  }

  .front-product-link-row b {
    display: none;
  }

  .front-evidence {
    grid-template-columns: 1fr;
  }

  .front-quick-actions {
    display: none;
  }

  .front-import-board {
    padding: 68px 0 10px;
  }

  .front-live-stats {
    padding: 56px 0 10px;
  }

  .front-live-stats-shell {
    gap: 22px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .front-live-stats-cards {
    grid-template-columns: 1fr 1fr;
  }

  .front-live-stat-card {
    min-height: 132px;
    padding: 16px;
    border-radius: 18px;
  }

  .front-live-stat-card strong {
    font-size: 24px;
  }

  .front-live-stat-card p {
    font-size: 12px;
  }

  .front-live-stats-visual {
    padding: 18px 16px;
    border-radius: 20px;
  }

  .front-live-trend-bars {
    height: 132px;
    gap: 6px;
  }

  .front-live-summary {
    grid-template-columns: 1fr;
  }

  .front-updates-section {
    padding: 56px 0 10px;
  }

  .front-updates-shell {
    gap: 22px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .front-updates-item {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
  }

  .front-updates-index {
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }

  .front-updates-head strong {
    font-size: 16px;
  }

  .front-updates-copy p {
    font-size: 13px;
  }

  .front-support-section {
    padding: 54px 0 10px;
  }

  .front-support-shell {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .front-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-support-card {
    min-height: 0;
    padding: 16px;
    border-radius: 20px;
  }

  .front-pwa-guide-section {
    padding: 54px 0 10px;
  }

  .front-pwa-guide-shell {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .front-pwa-guide-card {
    padding: 18px;
    border-radius: 22px;
  }

  .front-partners-section {
    padding: 54px 0 10px;
  }

  .front-partners-grid {
    grid-template-columns: 1fr;
  }

  .front-partner-card {
    padding: 16px;
    border-radius: 22px;
  }

  .front-feedback-section {
    padding: 54px 0 10px;
  }

  .front-feedback-shell {
    gap: 22px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .front-feedback-grid {
    grid-template-columns: 1fr;
  }

  .front-feedback-card {
    padding: 16px;
    border-radius: 20px;
  }

  .front-deploy-section {
    padding: 54px 0 10px;
  }

  .front-deploy-shell {
    gap: 22px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .front-deploy-grid {
    grid-template-columns: 1fr;
  }

  .front-deploy-card {
    padding: 16px;
    border-radius: 20px;
  }

  .front-matrix-section {
    padding: 54px 0 10px;
  }

  .front-matrix-shell {
    gap: 22px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .front-matrix-mobile-hint {
    display: inline-flex;
  }

  .front-matrix-table-wrap {
    border-radius: 20px;
  }

  .front-matrix-table {
    min-width: 640px;
  }

  .front-checklist-section {
    padding: 54px 0 10px;
  }

  .front-checklist-shell {
    gap: 22px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .front-checklist-grid {
    grid-template-columns: 1fr;
  }

  .front-checklist-card {
    padding: 16px;
    border-radius: 20px;
  }

  .front-enterprise-section {
    padding: 54px 0 10px;
  }

  .front-enterprise-shell {
    gap: 22px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .front-enterprise-summary {
    grid-template-columns: 1fr;
  }

  .front-enterprise-summary div {
    min-height: 92px;
    padding: 14px;
    border-radius: 18px;
  }

  .front-enterprise-grid,
  .front-enterprise-section[data-enterprise-layout="compact"] .front-enterprise-grid {
    grid-template-columns: 1fr;
  }

  .front-enterprise-card,
  .front-enterprise-section[data-enterprise-layout="compact"] .front-enterprise-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 16px;
    border-radius: 20px;
  }

  .front-enterprise-copy,
  .front-enterprise-section[data-enterprise-layout="compact"] .front-enterprise-copy {
    margin-top: 0;
  }

  .front-import-grid {
    margin-top: 28px;
  }

  .front-import-card {
    min-height: 0;
    padding: 17px;
  }

  .front-scenarios {
    padding: 68px 0 10px;
  }

  .front-scenario-grid {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 28px;
  }

  .front-scenario-card {
    min-height: 0;
    padding: 17px;
  }

  .front-evidence-item,
  .front-evidence-item:first-child,
  .front-evidence-item:last-child {
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .front-evidence-item:last-child {
    border-bottom: 0;
  }

  .front-section {
    padding: 76px 0;
  }

  .front-section-heading h2,
  .front-reliability h2 {
    font-size: 28px;
  }

  .front-feature-list {
    margin-top: 34px;
  }

  .front-feature {
    grid-template-columns: 45px minmax(0, 1fr) auto;
    gap: 13px;
    min-height: 0;
    padding: 22px 0;
  }

  .front-feature:hover {
    padding-right: 0;
    padding-left: 0;
    background: transparent;
  }

  .front-feature-icon {
    width: 40px;
    height: 40px;
  }

  .front-feature h3,
  .front-flow-step h3 {
    font-size: 16px;
  }

  .front-feature p,
  .front-flow-step p {
    font-size: 13px;
  }

  .front-flow-inner {
    padding: 76px 0;
  }

  .front-flow-steps {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 32px;
  }

  .front-flow-step {
    padding: 0 0 28px 54px;
  }

  .front-flow-step::before {
    top: 0;
    bottom: 0;
    left: 18px;
    width: 1px;
    height: auto;
  }

  .front-flow-step:last-child {
    padding-bottom: 0;
  }

  .front-flow-step:last-child::before {
    display: none;
  }

  .front-flow-step > span {
    top: 0;
  }

  .front-faq-section {
    padding-top: 58px;
  }

  .front-faq-shell {
    padding: 22px 18px;
    border-radius: 24px;
  }

  .front-faq-toggle {
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    gap: 12px;
    padding: 16px;
  }

  .front-faq-index {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 12px;
  }

  .front-faq-copy strong {
    font-size: 15px;
  }

  .front-faq-copy small {
    font-size: 11px;
  }

  .front-faq-answer-inner {
    padding: 0 16px 16px 72px;
  }

  .front-faq-answer-inner p {
    font-size: 13px;
  }

  .front-reliability {
    gap: 36px;
  }

  .back-top-button {
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 0;
    border-radius: 16px;
  }

  .back-top-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .back-top-button .icon {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 12px;
  }
}

@media (max-width: 430px) {
  .front-mobile-quicknav {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    gap: 6px;
    padding: 8px;
    border-radius: 22px;
  }

  .front-mobile-quicknav a {
    min-height: 56px;
    padding: 9px 2px 7px;
    border-radius: 16px;
    font-size: 10px;
  }

  .front-home-share-group,
  .front-home-share-button {
    width: 100%;
  }

  .front-home-share-button {
    justify-content: center;
  }

  .front-product-bar {
    min-height: 40px;
    padding: 0 12px;
  }

  .front-product-body {
    min-height: 238px;
  }

  .front-product-content {
    padding: 14px 13px;
  }

  .front-product-heading strong {
    font-size: 15px;
  }

  .front-product-live {
    font-size: 9px;
  }

  .front-product-metrics strong {
    font-size: 15px;
  }

  .front-product-metrics > div {
    padding-right: 6px;
    padding-left: 6px;
  }

  .front-product-metrics > div:first-child {
    padding-left: 0;
  }

  .front-product-metrics > div:last-child {
    padding-right: 0;
  }

  .front-product-chart {
    margin-top: 12px;
  }

  .front-chart-bars {
    height: 56px;
    margin-top: 9px;
  }

  .front-product-link-row {
    display: none;
  }

  .front-preview {
    padding: 18px 14px;
  }

  .front-preview-card {
    padding: 12px;
  }

  .front-preview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .front-preview-actions .button {
    width: 100%;
    justify-content: center;
  }

  .front-preview-qrcode {
    padding: 12px;
  }

  .front-preview-qrcode-preview {
    min-height: 184px;
    padding: 14px;
  }

  .front-preview-qrcode-preview svg {
    width: min(100%, 156px);
  }

  .front-preview-qrcode-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .front-preview-qrcode-toolbar .button,
  .front-preview-qrcode-color {
    width: 100%;
  }

  .front-preview-qrcode-meta {
    grid-template-columns: 1fr;
  }

  .front-preview-history-item {
    padding: 12px;
    border-radius: 14px;
  }

  .front-preview-history-item-shell {
    flex-direction: column;
  }

  .front-preview-history-select {
    width: 100%;
  }

  .front-preview-history-favorite {
    width: 100%;
    height: 38px;
  }

  .front-preview-history-line {
    flex-wrap: wrap;
  }

  .front-scenario-card {
    padding: 16px;
  }

  .front-preview-copy h2 {
    font-size: 23px;
  }

  .front-product-link-row strong,
  .front-product-link-row small {
    max-width: 102px;
  }

  .front-status {
    font-size: 8px;
  }

  .front-section-heading h2,
  .front-reliability h2 {
    font-size: 25px;
  }

  .front-import-board {
    padding-top: 56px;
  }

  .front-updates-shell {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .front-updates-item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
  }

  .front-updates-index {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 13px;
  }

  .front-updates-head strong {
    font-size: 14px;
  }

  .front-updates-head b {
    min-height: 22px;
    padding: 0 9px;
    font-size: 10px;
  }

  .front-updates-copy p {
    margin-top: 8px;
  }

  .front-support-section {
    padding-top: 54px;
  }

  .front-support-shell {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .front-support-grid {
    grid-template-columns: 1fr;
  }

  .front-support-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
    border-radius: 18px;
  }

  .front-support-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .front-support-card strong {
    font-size: 15px;
  }

  .front-pwa-guide-section {
    padding-top: 54px;
  }

  .front-pwa-guide-shell {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .front-pwa-guide-card {
    padding: 14px;
    border-radius: 18px;
  }

  .front-pwa-guide-preview {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .front-pwa-guide-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .front-pwa-install-button {
    width: 100%;
    justify-content: center;
  }

  .front-pwa-guide-point {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
  }

  .front-pwa-guide-point span {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .front-partners-section {
    padding-top: 54px;
  }

  .front-partner-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
    border-radius: 18px;
  }

  .front-partner-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .front-partner-copy strong {
    font-size: 15px;
  }

  .front-feedback-section {
    padding-top: 54px;
  }

  .front-feedback-shell {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .front-feedback-card {
    padding: 14px;
    border-radius: 18px;
  }

  .front-feedback-head {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .front-feedback-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 16px;
  }

  .front-feedback-meta strong {
    font-size: 15px;
  }

  .front-feedback-meta small {
    font-size: 11px;
  }

  .front-feedback-head b {
    grid-column: 2;
    justify-self: start;
    min-height: 24px;
    margin-top: 2px;
    padding: 0 9px;
    font-size: 9px;
  }

  .front-feedback-card p {
    margin-top: 12px;
    font-size: 13px;
  }

  .front-deploy-section {
    padding-top: 54px;
  }

  .front-deploy-shell {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .front-deploy-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
    border-radius: 18px;
  }

  .front-deploy-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .front-deploy-icon .icon {
    width: 18px;
    height: 18px;
  }

  .front-deploy-copy small {
    min-height: 24px;
    padding: 0 9px;
    font-size: 9px;
  }

  .front-deploy-copy strong {
    margin-top: 8px;
    font-size: 15px;
  }

  .front-deploy-copy p {
    font-size: 13px;
  }

  .front-matrix-section {
    padding-top: 54px;
  }

  .front-matrix-shell {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .front-matrix-mobile-hint {
    margin-top: -4px;
    font-size: 11px;
  }

  .front-matrix-table-wrap {
    margin-right: -2px;
    margin-left: -2px;
    border-radius: 18px;
  }

  .front-matrix-table {
    min-width: 560px;
  }

  .front-matrix-table thead th {
    padding: 14px 12px;
    font-size: 10px;
  }

  .front-matrix-table tbody th,
  .front-matrix-table tbody td {
    padding: 14px 12px;
  }

  .front-matrix-table tbody th {
    width: 136px;
    font-size: 14px;
  }

  .front-matrix-table tbody td {
    font-size: 13px;
  }

  .front-matrix-badge {
    min-height: 26px;
    padding: 0 10px;
    font-size: 10px;
  }

  .front-checklist-section {
    padding-top: 54px;
  }

  .front-checklist-shell {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .front-checklist-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
    border-radius: 18px;
  }

  .front-checklist-step,
  .front-checklist-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .front-checklist-step {
    font-size: 14px;
  }

  .front-checklist-icon .icon {
    width: 18px;
    height: 18px;
  }

  .front-checklist-copy small {
    min-height: 24px;
    padding: 0 9px;
    font-size: 9px;
  }

  .front-checklist-copy strong {
    margin-top: 8px;
    font-size: 15px;
  }

  .front-checklist-copy p {
    font-size: 13px;
  }

  .front-enterprise-section {
    padding-top: 54px;
  }

  .front-enterprise-shell {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .front-enterprise-summary div {
    min-height: 0;
  }

  .front-enterprise-summary strong {
    font-size: 21px;
  }

  .front-enterprise-card,
  .front-enterprise-section[data-enterprise-layout="compact"] .front-enterprise-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
    border-radius: 18px;
  }

  .front-enterprise-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .front-enterprise-icon .icon {
    width: 18px;
    height: 18px;
  }

  .front-enterprise-copy small {
    min-height: 24px;
    padding: 0 9px;
    font-size: 9px;
  }

  .front-enterprise-copy strong {
    margin-top: 8px;
    font-size: 15px;
  }

  .front-enterprise-copy p {
    font-size: 13px;
  }

  .front-live-stats-shell {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .front-live-stats-cards {
    grid-template-columns: 1fr;
  }

  .front-live-stat-card {
    min-height: 0;
  }

  .front-live-stats-visual-head {
    gap: 10px;
  }

  .front-live-stats-visual-head b {
    font-size: 22px;
  }

  .front-faq-shell {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .front-faq-item {
    border-radius: 20px;
  }

  .front-faq-toggle {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 14px;
  }

  .front-faq-index {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .front-faq-copy strong {
    font-size: 14px;
  }

  .front-faq-answer-inner {
    padding: 0 14px 14px 64px;
  }

  .front-live-trend-bars {
    height: 108px;
    gap: 4px;
  }

  .front-live-trend-axis {
    font-size: 9px;
  }

  .front-live-summary div {
    padding: 12px;
    border-radius: 14px;
  }

  .front-import-card {
    min-height: 0;
    padding: 16px;
  }

  .front-import-card strong {
    font-size: 15px;
  }

  .front-footer {
  }
}

@media (max-width: 390px) {
  .public-page.has-front-mobile-quicknav {
    padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px));
  }

  .front-mobile-quicknav {
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
    gap: 5px;
    padding: 7px;
    border-radius: 20px;
  }

  .front-mobile-quicknav a {
    min-height: 54px;
    padding: 8px 2px 6px;
  }

  .front-mobile-quicknav a .icon {
    width: 17px;
    height: 17px;
  }

  .front-enterprise-card,
  .front-enterprise-section[data-enterprise-layout="compact"] .front-enterprise-card {
    grid-template-columns: 1fr;
  }

  .front-enterprise-icon {
    width: 42px;
    height: 42px;
  }

  .front-enterprise-copy small {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .front-announcement {
    width: min(calc(100% - 28px), 640px);
    margin-top: 12px;
  }

  .front-announcement > div {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    padding: 12px;
  }

  .front-announcement span {
    width: 30px;
    height: 30px;
  }

  .front-announcement a {
    grid-column: 2;
    width: max-content;
  }

  .redirect-page {
    align-items: center;
    padding: 16px;
  }

  .redirect-page.is-compact-one-screen {
    padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
  }

  .redirect-page.is-compact-one-screen .redirect-shell {
    min-height: calc(100svh - 24px);
  }

  .redirect-panel {
    padding: 26px 22px;
  }

  .redirect-page.is-compact-one-screen .redirect-panel {
    padding: 22px 20px;
  }

  .redirect-page.is-compact-one-screen .redirect-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .redirect-page {
    padding: 10px;
  }

  .redirect-page.is-compact-one-screen {
    padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  }

  .redirect-panel {
    padding: 24px 18px;
  }

  .redirect-page.is-compact-one-screen .redirect-panel {
    padding: 18px 16px;
  }

  .redirect-meta-grid,
  .redirect-actions {
    grid-template-columns: 1fr;
  }

  .redirect-page.is-compact-one-screen .redirect-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .redirect-page.is-compact-one-screen .redirect-meta-grid span {
    font-size: 9px;
  }

  .redirect-page.is-compact-one-screen .redirect-meta-grid strong {
    font-size: 11px;
  }

  .redirect-panel h1 {
    font-size: 22px;
  }

  .redirect-page.is-compact-one-screen .redirect-actions {
    grid-template-columns: 1fr;
  }

  .redirect-page.is-gateway .redirect-panel {
    padding: 24px 18px;
  }

  .redirect-deeplink-drawer {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 30;
    border-radius: 22px 22px 18px 18px;
    background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
    backdrop-filter: blur(18px);
  }

  .redirect-deeplink-drawer-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px), (max-height: 700px) {
  .redirect-page.is-compact-one-screen .redirect-panel {
    padding: 16px 14px;
  }

  .redirect-page.is-compact-one-screen .redirect-panel > img {
    width: 42px;
    height: 42px;
    margin-bottom: 9px;
  }

  .redirect-page.is-compact-one-screen .redirect-panel h1 {
    font-size: 20px;
  }

  .redirect-page.is-compact-one-screen .redirect-meta-grid {
    gap: 7px;
  }

  .redirect-page.is-compact-one-screen .redirect-meta-grid div {
    padding: 8px 9px;
  }

  .redirect-page.is-compact-one-screen .redirect-actions {
    gap: 8px;
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .redirect-actions .button:hover,
  .redirect-actions .button:active {
    transform: none;
  }

  .redirect-deeplink-card {
    animation: none;
  }
}

/* v1.2.138: configurable redirect page vertical position. */
.redirect-page.is-position-top {
  place-items: start center;
}

.redirect-page.is-position-center {
  place-items: center;
}

.redirect-page.is-position-bottom {
  place-items: end center;
}

.redirect-page.is-position-top .redirect-shell {
  align-items: start;
}

.redirect-page.is-position-center .redirect-shell {
  align-items: center;
}

.redirect-page.is-position-bottom .redirect-shell {
  align-items: end;
}

.redirect-page.is-compact-one-screen.is-position-top .redirect-shell {
  place-items: start center;
  padding-top: clamp(14px, 5vh, 56px);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.redirect-page.is-compact-one-screen.is-position-center .redirect-shell {
  place-items: center;
}

.redirect-page.is-compact-one-screen.is-position-bottom .redirect-shell {
  place-items: end center;
  padding-top: 8px;
  padding-bottom: max(clamp(14px, 5vh, 56px), env(safe-area-inset-bottom));
}

@media (max-width: 430px) {
  .redirect-page.is-compact-one-screen.is-position-top .redirect-shell {
    padding-top: 10px;
  }

  .redirect-page.is-compact-one-screen.is-position-bottom .redirect-shell {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* v1.2.139: configurable redirect page motion and simple one-screen mode. */
.redirect-page.is-simple-one-screen {
  overflow-y: hidden;
}

.redirect-page.is-motion-calm .redirect-panel {
  animation-duration: 220ms;
}

.redirect-page.is-motion-lively .redirect-panel {
  animation: redirect-panel-lively 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.redirect-page.is-motion-lively .redirect-panel::before {
  opacity: 1;
  animation: redirect-line-sweep 1800ms ease-in-out infinite;
}

.redirect-page.is-motion-lively .redirect-loader i {
  animation-duration: 720ms;
}

.redirect-page.is-motion-lively .redirect-actions .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px color-mix(in srgb, var(--primary) 14%, transparent);
}

.redirect-page.is-motion-none .redirect-panel,
.redirect-page.is-motion-none .redirect-panel::before,
.redirect-page.is-motion-none .redirect-loader i {
  animation: none !important;
}

.redirect-page.is-motion-none .redirect-actions .button {
  transition: none;
}

.redirect-page.is-motion-none .redirect-actions .button:hover,
.redirect-page.is-motion-none .redirect-actions .button:active {
  transform: none;
}

@keyframes redirect-panel-lively {
  from { opacity: 0; transform: translateY(20px) scale(0.965); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.006); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes redirect-line-sweep {
  0%, 100% { transform: translateX(-14%); }
  50% { transform: translateX(14%); }
}

@media (prefers-reduced-motion: reduce) {
  .redirect-page.is-motion-lively .redirect-panel,
  .redirect-page.is-motion-lively .redirect-panel::before,
  .redirect-page.is-motion-lively .redirect-loader i {
    animation: none;
  }

  .redirect-page.is-motion-lively .redirect-actions .button:hover {
    transform: none;
  }
}

/* Import center */
.import-content {
  max-width: 1480px;
}

.import-page,
.import-page .main-column,
.import-page .content,
.import-page .import-shell,
.import-page .import-form {
  min-width: 0;
  max-width: 100%;
}

.import-page {
  overflow-x: hidden;
}

.import-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  padding: 30px 32px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--surface)), var(--surface) 62%);
  box-shadow: var(--shadow-soft);
}

.import-hero::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .35;
  background-image: linear-gradient(color-mix(in srgb, var(--primary) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(90deg, black, transparent 76%);
}

.import-hero > * {
  position: relative;
  z-index: 1;
}

.import-hero-copy {
  max-width: 690px;
}

.import-hero-copy h1 {
  margin: 7px 0 10px;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -.045em;
}

.import-hero-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.import-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  gap: 10px;
  min-width: min(100%, 380px);
}

.import-hero-stats article {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 100px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  backdrop-filter: blur(10px);
}

.import-hero-stats small,
.import-hero-stats span {
  color: var(--muted);
  font-size: 11px;
}

.import-hero-stats strong {
  margin: 8px 0 2px;
  color: var(--primary);
  font-size: 27px;
  letter-spacing: -.04em;
}

.import-shell {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.import-form {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 18px;
}

.import-panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  animation: rise-in 520ms var(--ease) both;
}

.import-options-panel {
  animation-delay: 70ms;
}

.import-preview-panel {
  animation-delay: 120ms;
}

.import-history-panel {
  animation-delay: 180ms;
}

.import-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.import-mode-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms var(--ease);
}

.import-mode-switch button:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.import-mode-switch button.is-active {
  color: var(--primary);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.source-pane {
  min-height: 0;
}

.dropzone {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  min-height: 248px;
  padding: 24px;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border-strong));
  border-radius: 18px;
  color: var(--text-soft);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%),
    var(--surface-soft);
  cursor: pointer;
  transition: border-color 170ms ease, background-color 170ms ease, transform 170ms var(--ease), box-shadow 170ms ease;
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-2px);
}

.dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.dropzone-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 5%, transparent);
}

.dropzone-icon .icon {
  width: 27px;
  height: 27px;
}

.dropzone strong {
  font-size: 16px;
}

.dropzone small {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.6;
}

.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--surface-soft);
  font-size: 12px;
}

.file-chip strong {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip span,
.file-chip.is-muted {
  color: var(--muted);
}

.import-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.field-switch > span {
  margin-bottom: 0;
}

.field-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.field-switch i {
  position: relative;
  display: block;
  width: 43px;
  height: 24px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 170ms ease, box-shadow 170ms ease;
}

.field-switch i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: "";
  background: #fff;
  box-shadow: 0 2px 4px rgba(20, 30, 60, .18);
  transition: transform 170ms var(--ease);
}

.field-switch input:checked + i {
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.field-switch input:checked + i::after {
  transform: translateX(19px);
}

.import-table-picks {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.import-format-showcase {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-soft) 88%, transparent);
}

.import-format-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.import-format-head strong {
  color: var(--text-soft);
  font-size: 13px;
}

.import-format-head small {
  max-width: 360px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: right;
}

.import-format-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.import-format-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: inherit;
  text-align: left;
  background: var(--surface);
  cursor: pointer;
  transition: transform 170ms var(--ease), border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease;
}

.import-format-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  box-shadow: var(--shadow-soft);
}

.import-format-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
}

.import-format-card small,
.import-format-card strong,
.import-format-card p {
  display: block;
  min-width: 0;
  margin: 0;
}

.import-format-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
}

.import-format-card strong {
  color: var(--text);
  font-size: 14px;
}

.import-format-card p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.import-table-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.import-table-head strong {
  color: var(--text-soft);
  font-size: 13px;
}

.import-table-head small {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.import-table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.table-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  min-width: 0;
  overflow: hidden;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease);
}

.table-pick:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  transform: translateY(-1px);
}

.table-pick input {
  accent-color: var(--primary);
}

.table-pick span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.table-pick strong {
  color: var(--text-soft);
  font-size: 12px;
}

.table-pick small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-tipbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 11px;
}

.import-tipbar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.import-tipbar .icon {
  width: 13px;
  height: 13px;
  color: var(--primary);
}

.import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.preview-empty,
.history-empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding: 20px;
  text-align: center;
}

.preview-empty h3,
.history-empty h3 {
  margin: 13px 0 6px;
  font-size: 16px;
}

.preview-empty p,
.history-empty p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.preview-shell {
  animation: rise-in 360ms var(--ease) both;
}

.preview-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.preview-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-height: 82px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary-soft) 54%, var(--surface));
}

.preview-stat small {
  display: block;
  align-self: flex-start;
  margin-right: auto;
  color: var(--muted);
  font-size: 11px;
}

.preview-stat strong {
  color: var(--primary);
  font-size: 23px;
  letter-spacing: -.03em;
}

.preview-stat span {
  color: var(--muted);
  font-size: 11px;
}

.preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 10px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 11px;
}

.preview-badge small {
  color: var(--muted);
}

.preview-badge.is-soft {
  color: var(--text-soft);
  background: var(--surface-soft);
}

.preview-warnings {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 24%, var(--border));
  border-radius: 12px;
  color: var(--amber);
  background: var(--amber-soft);
  font-size: 11px;
}

.preview-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.preview-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  transition: border-color 170ms ease, transform 170ms var(--ease), box-shadow 170ms ease;
}

.preview-card:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.preview-card.is-selected {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 36%, var(--surface-soft));
}

.preview-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.preview-card header span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.preview-card h3 {
  margin: 3px 0 0;
  font-size: 15px;
}

.preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 11px;
  margin: 12px 0;
  color: var(--muted);
  font-size: 10px;
}

.preview-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.preview-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 10px;
}

.preview-table th,
.preview-table td {
  max-width: 180px;
  padding: 8px 9px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-table th {
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-raised) 84%, transparent);
}

.preview-table td {
  color: var(--muted);
}

.preview-table tr:last-child td {
  border-bottom: 0;
}

.preview-mini-empty {
  padding: 18px 0 6px;
  color: var(--muted);
  font-size: 11px;
}

.history-list {
  display: grid;
  gap: 10px;
}

.history-card {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  transition: border-color 160ms ease, transform 160ms var(--ease);
}

.history-card:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  transform: translateY(-1px);
}

.history-card.status-failed {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border));
}

.history-head,
.history-foot,
.history-meta,
.history-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.history-head > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.history-head strong {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-head small,
.history-foot small {
  color: var(--muted);
  font-size: 10px;
}

.history-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 10px;
}

.status-failed .history-status {
  color: var(--red);
  background: var(--red-soft);
}

.history-meta,
.history-metrics {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 11px;
  color: var(--muted);
  font-size: 10px;
}

.history-metrics span {
  padding-right: 10px;
  border-right: 1px solid var(--border);
}

.history-metrics span:last-child {
  padding-right: 0;
  border-right: 0;
}

.history-foot {
  align-items: flex-start;
  margin-top: 12px;
}

.history-foot em {
  max-width: 50%;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-align: right;
}

.import-disabled {
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--amber-soft) 42%, var(--surface));
}

#refreshHistory.is-active .icon {
  animation: spin 700ms linear infinite;
}

@media (max-width: 1120px) {
  .import-form {
    grid-template-columns: 1fr;
  }

  .import-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .import-hero-stats {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .import-hero,
  .import-panel {
    padding: 20px;
    border-radius: 19px;
  }

  .import-hero-copy h1 {
    font-size: 32px;
  }

  .import-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }

  .import-hero-stats article {
    min-height: 88px;
    padding: 11px;
  }

  .import-option-grid,
  .import-table-grid,
  .import-format-rail,
  .preview-tables {
    grid-template-columns: 1fr;
  }

  .preview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .import-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .import-actions .button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .schedule-helper-preset-toolbar {
    gap: 8px;
  }

  .schedule-helper-toolbar-action {
    min-height: 40px;
    font-size: 11px;
    border-radius: 13px;
  }

  .schedule-helper-summary {
    font-size: 12px;
  }

  .schedule-helper-preset-group-actions span,
  .schedule-helper-preset-empty {
    font-size: 11px;
  }

  .schedule-helper-badge,
  .schedule-preset-button,
  .schedule-helper-clear {
    min-height: 36px;
    font-size: 11px;
  }

  .schedule-helper-preset-group-action,
  .schedule-helper-preset-group-toggle {
    font-size: 11px;
  }

  .import-hero,
  .import-panel {
    padding: 16px;
  }

  .import-hero-copy h1 {
    font-size: 27px;
  }

  .import-hero-copy p {
    font-size: 12px;
  }

  .import-hero-stats {
    grid-template-columns: 1fr;
  }

  .import-hero-stats article {
    min-height: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 8px;
  }

  .import-hero-stats strong {
    margin: 0;
    font-size: 22px;
  }

  .import-hero-stats small,
  .import-hero-stats span {
    font-size: 10px;
  }

  .dropzone {
    min-height: 210px;
    padding: 18px 12px;
  }

  .dropzone strong {
    font-size: 14px;
  }

  .dropzone small {
    font-size: 11px;
  }

  .import-table-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .import-format-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .import-table-head small {
    text-align: left;
  }

  .import-format-head small {
    max-width: none;
    text-align: left;
  }

  .import-format-showcase {
    padding: 12px;
  }

  .import-format-card {
    padding: 12px;
  }

  .preview-stat {
    min-height: 70px;
    padding: 10px;
  }

  .preview-stat strong {
    font-size: 19px;
  }

  .import-actions {
    grid-template-columns: 1fr;
  }

  .history-head,
  .history-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .history-foot em {
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 390px) {
  .schedule-helper-card {
    padding: 12px;
  }

  .schedule-helper-preset-toolbar {
    gap: 7px;
  }

  .schedule-helper-badges,
  .schedule-helper-preset-list {
    gap: 7px;
  }

  .schedule-helper-preset-chip {
    gap: 7px;
    flex-wrap: wrap;
  }

  .schedule-helper-preset-group-actions {
    gap: 7px;
  }

  .schedule-helper-preset-search {
    flex: 1 1 100%;
    width: 100%;
  }

  .schedule-helper-badge,
  .schedule-preset-button {
    width: 100%;
    justify-content: center;
  }

  .schedule-helper-preset-group-action,
  .schedule-helper-preset-group-toggle {
    flex: 1 1 calc(50% - 7px);
  }

  .schedule-helper-toolbar-action {
    flex: 1 1 100%;
    width: 100%;
  }

  .schedule-preset-chip-tools {
    width: 100%;
    justify-content: flex-end;
  }

  .schedule-preset-tool {
    min-height: 36px;
    flex: 0 0 auto;
  }

  .schedule-preset-favorite {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .front-preview-actions {
    grid-template-columns: 1fr;
  }

  .front-preview-qrcode {
    padding: 11px;
  }

  .front-preview-qrcode-preview {
    min-height: 166px;
    padding: 12px;
  }

  .front-preview-qrcode-preview svg {
    width: min(100%, 144px);
  }

  .front-preview-qrcode-meta div {
    padding: 9px;
  }

  .front-preview-qrcode-hint,
  .front-preview-qrcode-color,
  .front-preview-qrcode-meta strong {
    font-size: 11px;
  }

  .front-preview-history {
    padding: 12px;
  }

  .front-preview-history-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .front-preview-history-summary {
    grid-template-columns: 1fr;
  }

  .front-preview-history-restore-grid {
    grid-template-columns: 1fr;
  }

  .front-preview-history-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .front-preview-history-restore-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .front-preview-history-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-preview-history-meta span,
  .front-preview-history-open > small {
    font-size: 10px;
  }

  .detail-qrcode {
    padding: 14px;
    border-radius: 18px;
  }

  .detail-qrcode-preview {
    min-height: 176px;
    padding: 14px;
  }

  .detail-qrcode-preview svg {
    width: min(100%, 166px);
  }

  .detail-qrcode-meta > div {
    padding: 11px 12px;
    border-radius: 14px;
  }

  .detail-qrcode-meta strong,
  .detail-qrcode-hint,
  .detail-qrcode-color {
    font-size: 11px;
  }

  .detail-qrcode-toolbar .button {
    min-height: 40px;
    padding-inline: 12px;
  }
}

@media (max-width: 720px) {
  .front-footer > div {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .front-footer-meta {
    gap: 8px 12px;
  }
}

@media (max-width: 390px) {
  .front-footer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 980px) {
  .page-shell-head,
  .workbench-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-shell-actions {
    justify-content: flex-start;
  }

  .creation-notes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .page-shell-head h1 {
    font-size: 28px;
  }

  .page-shell-actions,
  .result-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .result-actions {
    flex-wrap: wrap;
  }

  .create-result {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Shared interaction polish: these states are driven by real form and request state. */
.advanced-link-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: -2px 0 2px;
  padding: 6px 10px;
  border: 1px dashed color-mix(in srgb, var(--border-strong) 72%, var(--border));
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.advanced-link-status.is-active {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border));
  background: color-mix(in srgb, var(--green) 9%, var(--surface-raised));
  color: color-mix(in srgb, var(--green) 78%, var(--text));
}

.advanced-link-block.is-enabled {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 12%, transparent), 0 12px 26px rgba(15, 34, 68, 0.06);
}

.advanced-link-block.is-enabled::before {
  background: var(--green);
}

.advanced-link-block.is-enabled > summary span::after {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 14%, var(--surface-raised));
  color: color-mix(in srgb, var(--green) 78%, var(--text));
  content: "已启用";
  font-size: 10px;
  font-weight: 800;
  vertical-align: 1px;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 720px) {
  .advanced-link-head {
    align-items: stretch;
    flex-direction: column;
  }

  .advanced-link-toggle {
    align-self: flex-start;
    min-height: 40px;
  }

  .advanced-link-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advanced-link-block > summary {
    grid-template-columns: minmax(0, 1fr) 18px;
    min-height: auto;
    padding: 14px 16px 14px 18px;
  }

  .advanced-link-block > summary small {
    max-width: none;
    border-radius: 14px;
  }

  .advanced-link-body {
    padding: 0 14px 14px;
  }

  .advanced-link-grid {
    grid-template-columns: 1fr;
  }

  .advanced-link-mini-actions button,
  .advanced-link-mini-tools button {
    min-height: 44px;
  }

  .advanced-link-toolbox,
  .advanced-link-inspector,
  .advanced-landing-preview,
  .advanced-form-preview {
    grid-template-columns: 1fr;
  }

  .advanced-link-toolbox-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .advanced-link-personal-list {
    grid-template-columns: 1fr;
  }

  .advanced-landing-preview-media {
    min-height: 150px;
  }

  .advanced-link-tool-actions button,
  .advanced-link-presets button,
  .advanced-routing-tool-row button,
  .advanced-inline-tools button {
    min-height: 44px;
  }

  .advanced-link-inspector > div:first-child {
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .advanced-link-card {
    padding: 14px;
    border-radius: 18px;
  }

  .advanced-link-mini {
    gap: 7px;
  }

  .advanced-link-mini span {
    padding: 8px;
  }

  .advanced-link-mini-actions,
  .advanced-link-mini-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advanced-link-mini-actions button,
  .advanced-link-mini-tools button {
    width: 100%;
    min-height: 44px;
  }

  .advanced-link-toolbox,
  .advanced-link-presets,
  .advanced-link-personal,
  .advanced-link-inspector,
  .advanced-landing-preview,
  .advanced-form-preview {
    padding: 12px;
    border-radius: 14px;
  }

  .advanced-link-toolbox-stats {
    grid-template-columns: 1fr;
  }

  .advanced-link-toolbox-stats span {
    min-height: 58px;
  }

  .advanced-link-tool-actions,
  .advanced-link-presets,
  .advanced-routing-tool-row,
  .advanced-inline-tools,
  .advanced-link-inspector-list,
  .advanced-form-preview-fields {
    display: grid;
    grid-template-columns: 1fr;
  }

  .advanced-link-tool-actions button,
  .advanced-link-presets button,
  .advanced-routing-tool-row button,
  .advanced-inline-tools button,
  .advanced-inspector-pill {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .advanced-link-block > summary {
    gap: 8px 10px;
    padding: 12px 14px 12px 16px;
  }

  .advanced-link-block > summary small {
    padding: 8px 10px;
    white-space: normal;
  }

  .advanced-link-body .field select {
    min-height: 44px;
  }

  .advanced-link-personal-head,
  .advanced-personal-item {
    grid-template-columns: 1fr;
  }

  .advanced-link-personal-head,
  .advanced-personal-item div {
    align-items: stretch;
  }

  .advanced-link-personal-head {
    flex-direction: column;
  }

  .advanced-link-personal-head button {
    width: 100%;
  }

  .advanced-personal-item div {
    flex-direction: row;
  }
}

.settings-save-state {
  display: inline-flex;
  align-items: center;
  min-width: 108px;
  min-height: 32px;
  padding: 5px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  transition: color 160ms ease, opacity 160ms ease;
}

.settings-save-state::before {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent);
  content: "";
}

.settings-save-state[data-state="dirty"] {
  color: var(--amber);
}

.settings-save-state[data-state="dirty"]::before {
  background: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 12%, transparent);
}

.settings-save-state[data-state="saving"] {
  color: var(--primary);
}

.settings-save-state[data-state="saving"]::before {
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
  animation: settings-save-pulse 880ms ease-in-out infinite;
}

.settings-save-state[data-state="error"] {
  color: var(--red);
}

.settings-save-state[data-state="error"]::before {
  background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent);
}

@keyframes settings-save-pulse {
  50% { transform: scale(0.68); opacity: 0.55; }
}

@media (max-width: 720px) {
  .settings-save-state {
    display: none;
  }

  .settings-hero {
    align-items: stretch;
  }

  .settings-search {
    grid-template-columns: 16px minmax(0, 1fr);
    width: 100%;
  }

  .analytics-period {
    width: 100%;
    justify-content: space-between;
  }

  .analytics-period select {
    flex: 1;
    max-width: 190px;
  }

  .advanced-link-block.is-enabled > summary span::after {
    margin-left: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-save-state[data-state="saving"]::before {
    animation: none;
  }
}

/* Unified front-office and dashboard polish. */
.front-main {
  position: relative;
  overflow: clip;
}

.front-header {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.front-header-inner {
  min-height: 72px;
  gap: clamp(14px, 2vw, 26px);
}

.front-brand {
  gap: 11px;
}

.front-nav a {
  position: relative;
  flex: 0 0 auto;
  padding: 9px 2px;
  white-space: nowrap;
}

.front-nav {
  min-width: 0;
  gap: clamp(12px, 1.8vw, 24px);
  overflow: hidden;
}

.front-nav a::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  content: '';
  background: var(--primary);
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 180ms ease, transform 180ms var(--ease);
}

.front-nav a:hover::after,
.front-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.front-hero {
  width: min(calc(100% - 64px), 1320px);
  min-height: min(720px, calc(100vh - 72px));
  grid-template-columns: minmax(0, 0.92fr) minmax(470px, 1.08fr);
  align-items: center;
  gap: clamp(42px, 6vw, 92px);
  padding: 68px 0 58px;
}

.front-hero-copy {
  max-width: 610px;
}

.front-kicker,
.page-shell-kicker,
.workbench-kicker,
.maintenance-kicker,
.settings-kicker {
  letter-spacing: 0;
}

.front-hero h1 {
  max-width: 11ch;
  margin-top: 18px;
  font-size: clamp(42px, 4.4vw, 68px);
  line-height: 1.09;
}

.front-hero-copy > p {
  max-width: 500px;
  font-size: 17px;
  line-height: 1.78;
}

.front-url-form {
  min-height: 62px;
  padding: 6px 6px 6px 18px;
  border-color: color-mix(in srgb, var(--border-strong) 82%, transparent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--text) 8%, transparent);
}

.front-url-form:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent), 0 18px 38px color-mix(in srgb, var(--text) 10%, transparent);
}

.front-url-form input {
  min-width: 0;
  font-size: 16px;
}

.front-url-form .button {
  min-height: 48px;
  padding-inline: 20px;
}

.front-hero-actions {
  align-items: center;
  gap: 14px 20px;
}

.front-product {
  width: min(100%, 670px);
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  border-radius: 8px;
  box-shadow: 0 28px 58px color-mix(in srgb, var(--text) 13%, transparent);
}

.front-product::before {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  border-radius: inherit;
  content: '';
  opacity: 0.6;
  transform: translate(10px, 10px);
}

.front-product:hover {
  transform: translateY(-5px) rotate(0.15deg);
  box-shadow: 0 34px 68px color-mix(in srgb, var(--text) 17%, transparent);
}

.front-product-bar {
  min-height: 48px;
}

.front-product-metrics > div,
.front-product-chart,
.front-product-link-row {
  border-color: color-mix(in srgb, var(--border) 92%, transparent);
}

.front-evidence {
  width: min(calc(100% - 64px), 1320px);
  margin-bottom: 72px;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.front-preview,
.front-live-stats,
.front-enterprise-section,
.front-import-board,
.front-scenarios,
.front-section,
.front-flow-inner,
.front-footer {
  width: min(calc(100% - 64px), 1320px);
}

.app-layout {
  background: var(--bg);
}

.sidebar {
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 32px color-mix(in srgb, var(--text) 3%, transparent);
}

.sidebar-nav {
  gap: 5px;
}

.nav-item {
  min-height: 44px;
  border-radius: 7px;
}

.nav-item::before {
  width: 3px;
  border-radius: 3px;
}

.topbar {
  min-height: 74px;
  padding-inline: clamp(20px, 3vw, 42px);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px);
}

.content {
  padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 42px) 72px;
}

.page-shell {
  gap: 30px;
}

.page-shell-head {
  align-items: end;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.page-shell-head h1 {
  font-size: clamp(27px, 3vw, 39px);
  line-height: 1.16;
}

.page-shell-head p {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.75;
}

.page-shell-actions {
  align-items: center;
}

.workbench,
.links-section,
.settings-panel,
.import-board {
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--text) 5%, transparent);
}

.workbench {
  padding: clamp(24px, 3vw, 38px);
}

.workbench-heading {
  gap: 22px;
  padding-bottom: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.workbench h2 {
  font-size: clamp(23px, 2.5vw, 32px);
}

.quick-create {
  gap: 16px;
  padding-top: 24px;
}

.url-entry {
  min-height: 60px;
  padding: 6px 6px 6px 18px;
  border-color: var(--border-strong);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent);
}

.url-entry:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.url-entry input {
  min-width: 0;
  font-size: 16px;
}

.url-entry .quick-submit {
  min-height: 48px;
  padding-inline: 20px;
}

.quick-options-toggle {
  min-height: 42px;
  border-radius: 7px;
}

.quick-options {
  gap: 16px;
  padding-top: 4px;
}

.workbench-field > span,
.field > span {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 750;
}

.workbench-field input,
.field input,
.field textarea,
.field select,
.analytics-period select,
.sort-select select,
.prompt-field input {
  border-color: var(--border);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 58%, transparent);
}

.workbench-field input,
.field input,
.field select,
.analytics-period select,
.sort-select select,
.prompt-field input {
  min-height: 44px;
}

.workbench-field input:focus,
.field input:focus,
.field textarea:focus,
.field select:focus,
.analytics-period select:focus,
.sort-select select:focus,
.prompt-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.links-header {
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
}

.links-header > div:first-child {
  flex: 1 1 260px;
  min-width: 0;
}

.links-tools {
  flex: 1 1 720px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
  min-width: 0;
}

.links-tools .search-box {
  flex: 1 1 260px;
  min-width: min(100%, 220px);
}

.links-tools .segmented {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.links-tools .segmented::-webkit-scrollbar {
  display: none;
}

.links-tools .segmented button {
  flex: 0 0 auto;
}

.links-command-center {
  clear: both;
  margin-top: 12px;
  z-index: 0;
}

@media (min-width: 901px) and (max-width: 1320px) {
  .links-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .links-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .links-tools .search-box {
    flex: 1 1 320px;
  }
}

.search-box,
.sort-select {
  min-height: 44px;
  border-color: var(--border);
  background: var(--surface-raised);
}

.search-box:focus-within,
.sort-select:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.segmented {
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.segmented button {
  min-height: 36px;
  border-radius: 5px;
}

.table-wrap {
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.table-wrap tbody tr {
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.table-wrap tbody tr:hover {
  background: color-mix(in srgb, var(--primary-soft) 40%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}

.button {
  min-height: 42px;
  border-radius: 7px;
  font-weight: 700;
}

.button-primary {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 25%, transparent);
}

.button-primary:hover {
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 30%, transparent);
}

.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 7px;
}

.modal-panel {
  border: 1px solid color-mix(in srgb, var(--border-strong) 82%, transparent);
  border-radius: 8px;
}

.modal-header {
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  min-height: 72px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}

.advanced-link-card,
.advanced-link-block {
  border-radius: 8px;
}

.settings-hero,
.import-hero {
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--text) 6%, transparent);
}

.settings-tabs,
.import-mode-switch {
  border-radius: 8px;
}

.front-hero-copy,
.front-product,
.page-shell-head,
.workbench,
.links-section,
.settings-hero,
.import-hero {
  animation: surface-enter 520ms var(--ease) both;
}

.front-product,
.workbench,
.links-section {
  animation-delay: 80ms;
}

/* Keep the creation surface focused without making the whole workspace a blue banner. */
.content-workbench .workbench {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--text) 5%, transparent);
}

.content-workbench .workbench::after {
  display: none;
}

.content-workbench .workbench-heading {
  border-bottom-color: var(--border);
}

.content-workbench .workbench-kicker {
  color: var(--primary);
}

.content-workbench .workbench-summary {
  color: var(--text-soft);
}

.content-workbench .workbench-inline-action {
  border-color: var(--border);
  background: var(--surface-raised);
  color: var(--text);
}

.content-workbench .workbench-inline-action:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

.content-workbench .live-indicator {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
  color: color-mix(in srgb, var(--green) 72%, var(--text));
}

.content-workbench .workbench-field > span {
  color: var(--text-soft);
}

.content-workbench .workbench-field input,
.content-workbench .workbench .prefix-input {
  border-color: var(--border);
  background: var(--surface-raised);
  color: var(--text);
}

.content-workbench .workbench-field input::placeholder {
  color: var(--muted);
}

.content-workbench .workbench-field input:focus,
.content-workbench .workbench .prefix-input:focus-within {
  border-color: var(--primary);
  background: var(--surface-raised);
}

.content-workbench .workbench .prefix-input span {
  color: var(--muted);
}

.content-workbench .quick-options-toggle {
  color: var(--text-soft);
}

.content-workbench .quick-options-summary span {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent);
}

.content-workbench .quick-options-summary span[data-active="1"] {
  border-color: color-mix(in srgb, #10b981 28%, var(--border));
  background: color-mix(in srgb, #10b981 10%, var(--surface-raised));
}

.content-workbench .quick-options-summary small {
  color: var(--muted);
}

.content-workbench .quick-options-summary:focus-visible {
  outline-color: color-mix(in srgb, var(--primary) 34%, transparent);
}

.content-workbench .schedule-helper-card-workbench {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
  background: var(--surface-soft);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 62%, transparent);
}

.content-workbench .schedule-helper-card-workbench .schedule-helper-head small,
.content-workbench .schedule-helper-card-workbench .schedule-helper-clear,
.content-workbench .schedule-helper-card-workbench .schedule-helper-badge,
.content-workbench .schedule-helper-card-workbench .schedule-helper-summary,
.content-workbench .schedule-helper-card-workbench .schedule-helper-preset-group small,
.content-workbench .schedule-helper-card-workbench .schedule-helper-preset-group-actions span,
.content-workbench .schedule-helper-card-workbench .schedule-helper-preset-empty {
  color: var(--text-soft);
}

.content-workbench .schedule-helper-card-workbench .schedule-helper-head strong {
  color: var(--text);
}

.content-workbench .schedule-helper-card-workbench .schedule-helper-clear,
.content-workbench .schedule-helper-card-workbench .schedule-helper-badge,
.content-workbench .schedule-helper-card-workbench .schedule-preset-button,
.content-workbench .schedule-helper-card-workbench .schedule-preset-favorite,
.content-workbench .schedule-helper-card-workbench .schedule-preset-tool,
.content-workbench .schedule-helper-card-workbench .schedule-helper-preset-group-action,
.content-workbench .schedule-helper-card-workbench .schedule-helper-preset-group-toggle,
.content-workbench .schedule-helper-card-workbench .schedule-helper-preset-empty {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
  background: var(--surface-raised);
  color: var(--text);
}

.content-workbench .schedule-helper-card-workbench .schedule-preset-favorite.is-active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-raised));
  color: var(--primary);
}

.content-workbench .create-result {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--green-soft) 82%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 98%, transparent), color-mix(in srgb, var(--green-soft) 48%, var(--surface)));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--green) 8%, transparent);
}

.content-workbench .create-result small {
  color: var(--text-soft);
}

.content-workbench .create-result strong {
  color: var(--text);
}

.content-workbench .create-result .icon-button.on-blue {
  border-color: var(--border);
  background: var(--surface-raised);
  color: var(--text-soft);
}

.content-workbench .create-result .icon-button.on-blue:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--text);
}

/* Rebuilt create console: scoped so the links list and settings pages keep their existing rhythm. */
.quick-create-rebuild {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 10px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 34%),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--green) 10%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 98%, #ffffff 2%), color-mix(in srgb, var(--surface) 98%, #ffffff 2%));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent), 0 18px 38px color-mix(in srgb, var(--text) 5%, transparent);
  overflow: hidden;
}

.quick-create-rebuild::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 0%, color-mix(in srgb, #ffffff 24%, transparent) 36%, transparent 68%);
  opacity: 0.38;
  transform: translateX(-46%);
  animation: create-console-sheen 8s ease-in-out infinite;
}

.create-rebuild-hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.create-rebuild-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 12%;
  left: 12%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, transparent), color-mix(in srgb, var(--green) 24%, transparent), color-mix(in srgb, #f59e0b 24%, transparent));
  transform: translateY(-50%);
  pointer-events: none;
}

.create-rebuild-hero article {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 7px;
  min-width: 0;
  min-height: 104px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 44%, var(--surface-raised)), var(--surface-raised));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 64%, transparent), 0 10px 24px color-mix(in srgb, var(--text) 4%, transparent);
  overflow: hidden;
  animation: create-card-rise 480ms var(--ease) both;
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.create-rebuild-hero article:nth-child(2) {
  animation-delay: 70ms;
}

.create-rebuild-hero article:nth-child(3) {
  animation-delay: 140ms;
}

.create-rebuild-hero article:hover,
.create-rebuild-hero article:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent), 0 18px 34px color-mix(in srgb, var(--primary) 10%, transparent);
}

.create-rebuild-hero article::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px auto;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}

.create-rebuild-hero article:nth-child(2)::after {
  background: color-mix(in srgb, var(--green) 30%, transparent);
}

.create-rebuild-hero article:nth-child(3)::after {
  background: color-mix(in srgb, #f59e0b 34%, transparent);
}

.create-rebuild-icon {
  position: relative;
  display: grid;
  grid-row: 1 / span 3;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface-raised));
  color: var(--primary);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

.create-rebuild-icon .icon {
  width: 18px;
  height: 18px;
}

.create-rebuild-hero article:nth-child(2) .create-rebuild-icon {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 74%, var(--surface-raised));
  color: color-mix(in srgb, var(--green) 76%, var(--text));
}

.create-rebuild-hero article:nth-child(3) .create-rebuild-icon {
  border-color: color-mix(in srgb, #f59e0b 30%, var(--border));
  background: color-mix(in srgb, #fef3c7 64%, var(--surface-raised));
  color: color-mix(in srgb, #b45309 82%, var(--text));
}

.create-rebuild-hero small,
.create-rebuild-hero strong,
.create-rebuild-hero span {
  position: relative;
  min-width: 0;
}

.create-rebuild-hero small {
  color: var(--primary);
  font-size: 11px;
  font-weight: 860;
  letter-spacing: 0.06em;
}

.create-rebuild-hero strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}

.create-rebuild-hero span {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.content-workbench .quick-create-rebuild .create-mode-switch,
.create-modal-rebuild .create-mode-switch-modal {
  width: 100%;
  max-width: none;
  margin: 0;
  border-color: var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 62%, transparent);
}

.content-workbench .quick-create-rebuild .create-mode-switch label,
.create-modal-rebuild .create-mode-switch-modal label {
  min-height: 44px;
  color: var(--text-soft);
}

.content-workbench .quick-create-rebuild .create-mode-switch label:has(input:checked),
.create-modal-rebuild .create-mode-switch-modal label:has(input:checked) {
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--text) 7%, transparent);
}

.content-workbench .quick-create-rebuild .create-mode-switch input:checked + span,
.content-workbench .quick-create-rebuild .create-mode-switch input:checked + span + small,
.create-modal-rebuild .create-mode-switch-modal input:checked + span,
.create-modal-rebuild .create-mode-switch-modal input:checked + span + small {
  color: var(--text);
}

.content-workbench .quick-create-rebuild .create-mode-switch small,
.create-modal-rebuild .create-mode-switch-modal small {
  color: var(--muted);
}

.content-workbench .quick-create-rebuild .url-entry {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 66px;
  padding: 8px 8px 8px 18px;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 8%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 66%, transparent);
}

.content-workbench .quick-create-rebuild .url-entry:focus-within {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent), 0 18px 34px color-mix(in srgb, var(--primary) 10%, transparent);
}

.content-workbench .quick-create-rebuild .input-leading {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  color: var(--primary);
}

.content-workbench .quick-create-rebuild .quick-submit {
  min-width: 138px;
  border-radius: 8px;
}

.quick-create-rebuild > .create-assistant-card,
.quick-create-rebuild .bulk-create-panel,
.quick-create-rebuild .quick-options,
.quick-create-rebuild .advanced-link-card {
  border-radius: 10px;
}

.quick-create-rebuild > .create-assistant-card {
  margin-top: 0;
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 64%, transparent);
}

.quick-create-rebuild .bulk-create-panel {
  margin-top: 0;
  padding: 15px;
  border-color: color-mix(in srgb, var(--primary) 13%, var(--border));
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface-raised));
  color: var(--text);
}

.quick-create-rebuild .bulk-create-panel:not([hidden]),
.create-modal-rebuild .bulk-create-panel-modal:not([hidden]) {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.quick-create-rebuild .bulk-create-panel .workbench-field,
.create-modal-rebuild .bulk-create-panel-modal .field {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.quick-create-rebuild .workbench-field textarea[name="bulk_targets"],
.create-modal-rebuild textarea[name="bulk_targets"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 220px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  background: var(--surface-raised);
  color: var(--text);
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 58%, transparent);
}

.create-modal-rebuild textarea[name="bulk_targets"] {
  min-height: 190px;
}

.quick-create-rebuild .workbench-field textarea[name="bulk_targets"]::placeholder,
.create-modal-rebuild textarea[name="bulk_targets"]::placeholder {
  color: var(--muted);
}

.quick-create-rebuild .workbench-field textarea[name="bulk_targets"]:focus,
.create-modal-rebuild textarea[name="bulk_targets"]:focus {
  border-color: var(--primary);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.batch-create-limit-field {
  display: grid;
  flex: 0 1 190px;
  min-width: 170px;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 54%, transparent);
}

.batch-create-limit-field span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.batch-create-limit-field input {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  outline: 0;
}

.batch-create-limit-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.batch-create-limit-field small {
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.35;
}

.batch-create-file-input[hidden] {
  display: none !important;
}

.quick-create-rebuild .bulk-create-stat,
.create-modal-rebuild .bulk-create-stat {
  border-color: color-mix(in srgb, var(--primary) 10%, var(--border));
  background: var(--surface-raised);
  color: var(--text);
}

.quick-create-rebuild .bulk-create-tips span,
.create-modal-rebuild .bulk-create-tips span {
  border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
  background: var(--surface-raised);
  color: var(--text-soft);
}

.quick-create-rebuild .bulk-create-stat small,
.create-modal-rebuild .bulk-create-stat small {
  color: var(--muted);
}

.quick-create-rebuild .bulk-create-stat strong,
.create-modal-rebuild .bulk-create-stat strong {
  color: var(--text);
}

.quick-create-rebuild .bulk-create-stat.is-alert,
.create-modal-rebuild .bulk-create-stat.is-alert {
  border-color: color-mix(in srgb, var(--red) 24%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 68%, var(--surface-raised));
}

.quick-create-rebuild .bulk-create-stat.is-alert strong,
.create-modal-rebuild .bulk-create-stat.is-alert strong {
  color: var(--red);
}

.quick-create-rebuild .bulk-create-stat.is-muted,
.create-modal-rebuild .bulk-create-stat.is-muted {
  border-color: color-mix(in srgb, var(--cyan) 24%, var(--border));
  background: color-mix(in srgb, var(--cyan-soft) 64%, var(--surface-raised));
}

.quick-create-rebuild .bulk-create-stat.is-muted strong,
.create-modal-rebuild .bulk-create-stat.is-muted strong {
  color: var(--cyan);
}

.quick-create-rebuild .bulk-create-stat.is-security,
.create-modal-rebuild .bulk-create-stat.is-security {
  border-color: color-mix(in srgb, var(--amber) 26%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 66%, var(--surface-raised));
}

.quick-create-rebuild .bulk-create-stat.is-security strong,
.create-modal-rebuild .bulk-create-stat.is-security strong {
  color: var(--amber);
}

.quick-create-rebuild .bulk-create-helper-meta,
.create-modal-rebuild .bulk-create-helper-meta,
.quick-create-rebuild .bulk-create-preview-head span,
.create-modal-rebuild .bulk-create-preview-head span,
.quick-create-rebuild .bulk-create-preview-main span,
.create-modal-rebuild .bulk-create-preview-main span,
.quick-create-rebuild .bulk-create-preview-empty,
.create-modal-rebuild .bulk-create-preview-empty,
.quick-create-rebuild .bulk-create-preview-more,
.create-modal-rebuild .bulk-create-preview-more {
  color: var(--text-soft);
}

.quick-create-rebuild .bulk-create-preview-head strong,
.create-modal-rebuild .bulk-create-preview-head strong,
.quick-create-rebuild .bulk-create-preview-main strong,
.create-modal-rebuild .bulk-create-preview-main strong,
.quick-create-rebuild .bulk-create-readiness-copy strong,
.create-modal-rebuild .bulk-create-readiness-copy strong {
  color: var(--text);
}

.quick-create-rebuild .bulk-create-readiness,
.create-modal-rebuild .bulk-create-readiness,
.quick-create-rebuild .bulk-create-preview,
.create-modal-rebuild .bulk-create-preview,
.quick-create-rebuild .bulk-create-preview-item,
.create-modal-rebuild .bulk-create-preview-item,
.quick-create-rebuild .bulk-create-preview-empty,
.create-modal-rebuild .bulk-create-preview-empty,
.quick-create-rebuild .bulk-create-preview-more,
.create-modal-rebuild .bulk-create-preview-more {
  border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
  background: var(--surface-raised);
  color: var(--text);
}

.quick-create-rebuild .bulk-create-readiness-copy p,
.create-modal-rebuild .bulk-create-readiness-copy p,
.quick-create-rebuild .bulk-create-readiness-advice span,
.create-modal-rebuild .bulk-create-readiness-advice span {
  color: var(--text-soft);
}

.quick-create-rebuild .bulk-create-readiness-advice span,
.create-modal-rebuild .bulk-create-readiness-advice span,
.quick-create-rebuild .bulk-create-preview-meta span,
.create-modal-rebuild .bulk-create-preview-meta span {
  background: color-mix(in srgb, var(--surface-soft) 86%, var(--surface-raised));
  color: var(--text-soft);
}

.quick-create-rebuild .bulk-create-readiness-meter,
.create-modal-rebuild .bulk-create-readiness-meter {
  background:
    radial-gradient(circle, var(--surface-raised) 0 54%, transparent 56%),
    conic-gradient(color-mix(in srgb, var(--primary) 76%, #ffffff) var(--batch-readiness), color-mix(in srgb, var(--border) 68%, transparent) 0);
}

.quick-create-rebuild .bulk-create-readiness-meter strong,
.create-modal-rebuild .bulk-create-readiness-meter strong {
  color: var(--text);
}

.quick-create-rebuild .bulk-create-readiness-meter span,
.create-modal-rebuild .bulk-create-readiness-meter span {
  color: var(--muted);
}

.quick-create-rebuild .bulk-create-preview-filters button,
.create-modal-rebuild .bulk-create-preview-filters button,
.quick-create-rebuild .bulk-create-preview-actions .button,
.create-modal-rebuild .bulk-create-preview-actions .button,
.quick-create-rebuild .bulk-create-preview-row-actions button,
.create-modal-rebuild .bulk-create-preview-row-actions button,
.quick-create-rebuild .bulk-create-draft button,
.create-modal-rebuild .bulk-create-draft button {
  border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
  background: var(--surface-raised);
  color: var(--text-soft);
}

.quick-create-rebuild .bulk-create-preview-filters button:hover,
.create-modal-rebuild .bulk-create-preview-filters button:hover,
.quick-create-rebuild .bulk-create-preview-actions .button:hover,
.create-modal-rebuild .bulk-create-preview-actions .button:hover,
.quick-create-rebuild .bulk-create-preview-row-actions button:hover,
.create-modal-rebuild .bulk-create-preview-row-actions button:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border-strong));
  background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface-raised));
  color: var(--primary);
}

.quick-create-rebuild .bulk-create-preview-filters span,
.create-modal-rebuild .bulk-create-preview-filters span {
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--border));
  color: inherit;
}

.quick-create-rebuild .bulk-create-preview-filters button.is-active,
.create-modal-rebuild .bulk-create-preview-filters button.is-active,
.quick-create-rebuild .bulk-create-preview-actions .button[aria-pressed="true"],
.create-modal-rebuild .bulk-create-preview-actions .button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface-raised));
  color: var(--primary);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 10%, transparent);
}

.quick-create-rebuild .bulk-create-preview-filters button[data-batch-preview-filter="ready"].is-active,
.create-modal-rebuild .bulk-create-preview-filters button[data-batch-preview-filter="ready"].is-active {
  border-color: color-mix(in srgb, var(--green) 36%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 78%, var(--surface-raised));
  color: var(--green);
}

.quick-create-rebuild .bulk-create-preview-filters button[data-batch-preview-filter="invalid"].is-active,
.create-modal-rebuild .bulk-create-preview-filters button[data-batch-preview-filter="invalid"].is-active {
  border-color: color-mix(in srgb, var(--red) 36%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 76%, var(--surface-raised));
  color: var(--red);
}

.quick-create-rebuild .bulk-create-preview-filters button[data-batch-preview-filter="duplicate"].is-active,
.create-modal-rebuild .bulk-create-preview-filters button[data-batch-preview-filter="duplicate"].is-active {
  border-color: color-mix(in srgb, var(--cyan) 36%, var(--border));
  background: color-mix(in srgb, var(--cyan-soft) 78%, var(--surface-raised));
  color: var(--cyan);
}

.quick-create-rebuild .bulk-create-preview-filters button[data-batch-preview-filter="security"].is-active,
.create-modal-rebuild .bulk-create-preview-filters button[data-batch-preview-filter="security"].is-active {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 78%, var(--surface-raised));
  color: var(--amber);
}

.quick-create-rebuild .bulk-create-preview-search,
.create-modal-rebuild .bulk-create-preview-search {
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
  background: var(--surface-raised);
}

.quick-create-rebuild .bulk-create-preview-search input,
.create-modal-rebuild .bulk-create-preview-search input {
  color: var(--text);
}

.quick-create-rebuild .bulk-create-preview-search input::placeholder,
.create-modal-rebuild .bulk-create-preview-search input::placeholder {
  color: var(--muted);
}

.quick-create-rebuild .bulk-create-preview-search button,
.create-modal-rebuild .bulk-create-preview-search button {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--text-soft);
}

.quick-create-rebuild .bulk-create-preview-item.is-ready,
.create-modal-rebuild .bulk-create-preview-item.is-ready {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 58%, var(--surface-raised));
}

.quick-create-rebuild .bulk-create-preview-item.is-invalid,
.create-modal-rebuild .bulk-create-preview-item.is-invalid,
.quick-create-rebuild .bulk-create-preview-item.is-security-danger,
.create-modal-rebuild .bulk-create-preview-item.is-security-danger {
  border-color: color-mix(in srgb, var(--red) 34%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 68%, var(--surface-raised));
}

.quick-create-rebuild .bulk-create-preview-item.is-duplicate,
.create-modal-rebuild .bulk-create-preview-item.is-duplicate {
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border));
  background: color-mix(in srgb, var(--cyan-soft) 68%, var(--surface-raised));
}

.quick-create-rebuild .bulk-create-preview-item.is-security-warn,
.create-modal-rebuild .bulk-create-preview-item.is-security-warn {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 68%, var(--surface-raised));
}

.bulk-create-preview-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.bulk-create-preview-status.is-ready {
  color: var(--green);
  background: color-mix(in srgb, var(--green-soft) 72%, transparent);
}

.bulk-create-preview-status.is-invalid,
.bulk-create-preview-status.is-security-danger {
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 72%, transparent);
}

.bulk-create-preview-status.is-duplicate {
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan-soft) 72%, transparent);
}

.bulk-create-preview-status.is-security-warn {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber-soft) 72%, transparent);
}

.quick-create-rebuild .quick-options-toggle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
}

.quick-create-rebuild .quick-options-toggle:hover,
.quick-create-rebuild .quick-options-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 54%, var(--surface-raised));
  color: var(--primary);
}

.quick-create-rebuild .quick-options-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.quick-create-rebuild .quick-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  background: var(--surface-soft);
  animation: options-open 220ms var(--ease) both;
}

.quick-create-rebuild .quick-options[hidden],
.quick-create-rebuild .quick-options-summary[hidden],
.quick-create-rebuild .bulk-create-panel[hidden] {
  display: none;
}

.quick-create-rebuild .quick-options .workbench-field {
  min-width: 0;
}

.quick-create-rebuild .quick-options .workbench-field:has(textarea),
.quick-create-rebuild .quick-options .field-full,
.quick-create-rebuild .quick-options .field-create-assistant,
.quick-create-rebuild .quick-options .advanced-link-card,
.quick-create-rebuild .quick-options .schedule-helper-card {
  grid-column: 1 / -1;
}

.quick-create-rebuild .advanced-link-card {
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 64%, transparent);
}

.quick-create-rebuild .advanced-link-presets button[data-advanced-preset="hide_target"],
.create-modal-rebuild .advanced-link-presets button[data-advanced-preset="hide_target"] {
  border-color: color-mix(in srgb, var(--green) 36%, var(--border));
  background: color-mix(in srgb, var(--green-soft) 72%, var(--surface-raised));
  color: color-mix(in srgb, var(--green) 76%, var(--text));
}

.create-modal-rebuild .modal-panel {
  width: min(100%, 920px);
  max-height: min(92vh, 840px);
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 26px 70px color-mix(in srgb, var(--text) 18%, transparent);
}

.create-modal-rebuild .modal-header {
  align-items: center;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 62%, var(--surface-raised)), var(--surface-raised));
}

.create-modal-rebuild .modal-header h2 {
  font-size: 20px;
}

.create-modal-rebuild .modal-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  padding: 22px 24px;
  background: var(--surface);
}

.create-modal-rebuild .field-full,
.create-modal-rebuild .field-create-assistant,
.create-modal-rebuild .bulk-create-panel-modal {
  grid-column: 1 / -1;
}

.create-modal-rebuild .field input,
.create-modal-rebuild .field textarea,
.create-modal-rebuild .field select,
.create-modal-rebuild .prefix-input {
  border-radius: 8px;
}

.create-modal-rebuild .bulk-create-panel-modal,
.create-modal-rebuild .advanced-link-card,
.create-modal-rebuild .schedule-helper-card,
.create-modal-rebuild .create-assistant-card {
  border-radius: 10px;
}

.create-modal-rebuild .modal-footer {
  min-height: 76px;
  background: color-mix(in srgb, var(--surface-soft) 86%, var(--surface));
}

@media (max-width: 720px) {
  .quick-create-rebuild {
    gap: 14px;
    padding: 14px;
  }

  .create-rebuild-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .create-rebuild-hero article {
    min-height: 0;
    padding: 13px 14px;
  }

  .content-workbench .quick-create-rebuild .create-mode-switch,
  .create-modal-rebuild .create-mode-switch-modal {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 10px;
  }

  .content-workbench .quick-create-rebuild .url-entry {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 12px;
  }

  .content-workbench .quick-create-rebuild .quick-submit {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
  }

  .quick-create-rebuild .quick-options-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .quick-create-rebuild .quick-options {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  .quick-create-rebuild .bulk-create-helper-bar,
  .quick-create-rebuild .bulk-create-actions,
  .quick-create-rebuild .bulk-create-preview-actions,
  .create-modal-rebuild .bulk-create-helper-bar,
  .create-modal-rebuild .bulk-create-actions,
  .create-modal-rebuild .bulk-create-preview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-create-rebuild .bulk-create-helper-bar .button,
  .quick-create-rebuild .bulk-create-actions .button,
  .quick-create-rebuild .bulk-create-preview-actions .button,
  .create-modal-rebuild .bulk-create-helper-bar .button,
  .create-modal-rebuild .bulk-create-actions .button,
  .create-modal-rebuild .bulk-create-preview-actions .button {
    width: 100%;
    min-height: 44px;
  }

  .quick-create-rebuild .bulk-create-preview-filters,
  .create-modal-rebuild .bulk-create-preview-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-create-rebuild .bulk-create-preview-filters button,
  .create-modal-rebuild .bulk-create-preview-filters button {
    min-height: 44px;
  }

  .create-modal-rebuild .modal-panel {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
  }

  .create-modal-rebuild .modal-header {
    padding: 18px;
  }

  .create-modal-rebuild .modal-body {
    grid-template-columns: minmax(0, 1fr);
    max-height: calc(100dvh - 170px);
    padding: 16px;
  }

  .create-modal-rebuild .modal-footer {
    min-height: 70px;
    padding: 12px 16px;
  }
}

@media (max-width: 430px) {
  .quick-create-rebuild {
    padding: 12px;
  }

  .create-rebuild-hero {
    gap: 10px;
  }

  .create-rebuild-hero article {
    padding: 12px;
  }

  .create-rebuild-hero strong {
    font-size: 15px;
  }

  .quick-create-rebuild .quick-options-toggle {
    min-height: 48px;
    padding-inline: 12px;
  }

  .quick-create-rebuild .quick-options-summary span {
    min-height: 48px;
  }

  .quick-create-rebuild .bulk-create-helper-bar,
  .quick-create-rebuild .bulk-create-actions,
  .quick-create-rebuild .bulk-create-preview-actions,
  .quick-create-rebuild .bulk-create-preview-filters,
  .create-modal-rebuild .bulk-create-helper-bar,
  .create-modal-rebuild .bulk-create-actions,
  .create-modal-rebuild .bulk-create-preview-actions,
  .create-modal-rebuild .bulk-create-preview-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .quick-create-rebuild .advanced-link-mini,
  .create-modal-rebuild .advanced-link-mini {
    grid-template-columns: minmax(0, 1fr);
  }

  .create-modal-rebuild .modal-panel {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
  }

  .create-modal-rebuild .modal-header {
    gap: 12px;
    padding: 16px 14px;
  }

  .create-modal-rebuild .modal-header h2 {
    font-size: 18px;
  }

  .create-modal-rebuild .modal-body {
    max-height: calc(100dvh - 178px);
    padding: 14px;
  }

  .create-modal-rebuild .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .create-modal-rebuild .modal-footer .button {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 390px) {
  .quick-create-rebuild {
    margin-top: 18px;
  }

  .content-workbench .quick-create-rebuild .url-entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-workbench .quick-create-rebuild .input-leading {
    display: none;
  }

  .create-rebuild-hero span {
    font-size: 11px;
  }

  .quick-create-rebuild .quick-options,
  .quick-create-rebuild .bulk-create-panel {
    padding: 12px;
  }

  .create-modal-rebuild .modal-header .icon-button {
    width: 44px;
    height: 44px;
  }
}

@keyframes surface-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .front-hero,
  .front-evidence,
  .front-preview,
  .front-live-stats,
  .front-enterprise-section,
  .front-import-board,
  .front-scenarios,
  .front-section,
  .front-flow-inner,
  .front-footer {
    width: min(calc(100% - 40px), 820px);
  }

  .front-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .front-product {
    justify-self: start;
  }

  .page-shell-head {
    align-items: start;
  }
}

@media (max-width: 720px) {
  .front-header-inner {
    min-height: 66px;
  }

  .front-hero,
  .front-evidence,
  .front-preview,
  .front-live-stats,
  .front-enterprise-section,
  .front-import-board,
  .front-scenarios,
  .front-section,
  .front-flow-inner,
  .front-footer {
    width: min(calc(100% - 28px), 640px);
  }

  .front-hero {
    gap: 36px;
    padding: 44px 0 46px;
  }

  .front-hero h1 {
    max-width: none;
    font-size: 40px;
  }

  .front-hero-copy > p {
    font-size: 16px;
  }

  .front-url-form {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    padding: 14px;
  }

  .front-url-form .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .front-product::before {
    transform: translate(6px, 6px);
  }

  .topbar {
    min-height: 68px;
    padding-inline: 14px;
  }

  .topbar-actions .button:not(.button-primary) span,
  .topbar-actions .icon-button + .button-secondary span {
    display: none;
  }

  .content {
    padding: 24px 14px calc(44px + env(safe-area-inset-bottom, 0px));
  }

  .page-shell {
    gap: 22px;
  }

  .page-shell-head {
    gap: 16px;
    padding-bottom: 20px;
  }

  .page-shell-head h1 {
    font-size: 28px;
  }

  .page-shell-head p {
    font-size: 14px;
  }

  .page-shell-actions {
    width: 100%;
  }

  .page-shell-actions .button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 12px;
  }

  .workbench {
    padding: 20px 16px;
  }

  .workbench-heading {
    align-items: start;
    padding-bottom: 18px;
  }

  .workbench-inline-action {
    width: 48px;
    min-width: 48px;
    padding: 0;
  }

  .workbench-inline-action span {
    display: none;
  }

  .url-entry {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .url-entry .quick-submit {
    grid-column: 1 / -1;
    width: 100%;
  }

  .quick-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .quick-options-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-options-summary span:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .links-section {
    padding: 16px;
  }

  .links-filter-summary {
    padding: 13px;
  }

  .links-filter-summary-chip {
    min-height: 36px;
    max-width: 100%;
  }

  .links-filter-summary-chip.is-clearable {
    min-height: 42px;
  }

  .links-header {
    align-items: stretch;
  }

  .links-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 10px;
  }

  .links-tools.has-view-copy {
    grid-template-columns: minmax(0, 1fr) 48px 48px;
  }

  .links-tools.has-view-reset {
    grid-template-columns: minmax(0, 1fr) 48px 48px;
  }

  .links-tools.has-view-copy.has-view-reset {
    grid-template-columns: minmax(0, 1fr) 48px 48px 48px;
  }

  .links-tools .search-box {
    grid-column: 1 / -1;
  }

  .links-tools.has-view-copy #copyCurrentView {
    grid-column: 2;
    grid-row: 2;
  }

  .links-tools.has-view-copy #refreshLinks {
    grid-column: 3;
    grid-row: 2;
  }

  .links-tools.has-view-reset #resetCurrentView {
    grid-column: 2;
    grid-row: 2;
  }

  .links-tools.has-view-reset #refreshLinks {
    grid-column: 3;
    grid-row: 2;
  }

  .links-tools.has-view-copy.has-view-reset #copyCurrentView {
    grid-column: 2;
    grid-row: 2;
  }

  .links-tools.has-view-copy.has-view-reset #resetCurrentView {
    grid-column: 3;
    grid-row: 2;
  }

  .links-tools.has-view-copy.has-view-reset #refreshLinks {
    grid-column: 4;
    grid-row: 2;
  }

  .links-tools .segmented {
    grid-column: 1 / -1;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .links-tools .segmented::-webkit-scrollbar {
    display: none;
  }

  .links-tools .segmented button {
    flex: 0 0 auto;
    min-height: 40px;
  }

  .button,
  .icon-button,
  .field input,
  .field select,
  .workbench-field input,
  .analytics-period select,
  .sort-select select,
  .prompt-field input {
    min-height: 48px;
  }

  .icon-button {
    width: 48px;
    height: 48px;
  }

  .links-tools.has-view-copy {
    grid-template-columns: minmax(0, 1fr) 48px 48px;
  }

  .links-tools.has-view-reset {
    grid-template-columns: minmax(0, 1fr) 48px 48px;
  }

  .links-tools.has-view-copy.has-view-reset {
    grid-template-columns: minmax(0, 1fr) 48px 48px 48px;
  }

  .links-tools.has-view-copy .search-box {
    grid-column: 1 / 2;
    grid-row: 1;
  }

  .links-tools.has-view-reset .search-box {
    grid-column: 1 / 2;
    grid-row: 1;
  }

  .links-tools.has-view-copy #copyCurrentView {
    grid-column: 2;
    grid-row: 1;
  }

  .links-tools.has-view-copy #refreshLinks {
    grid-column: 3;
    grid-row: 1;
  }

  .links-tools.has-view-reset #resetCurrentView {
    grid-column: 2;
    grid-row: 1;
  }

  .links-tools.has-view-reset #refreshLinks {
    grid-column: 3;
    grid-row: 1;
  }

  .links-tools.has-view-copy.has-view-reset #copyCurrentView {
    grid-column: 2;
    grid-row: 1;
  }

  .links-tools.has-view-copy.has-view-reset #resetCurrentView {
    grid-column: 3;
    grid-row: 1;
  }

  .links-tools.has-view-copy.has-view-reset #refreshLinks {
    grid-column: 4;
    grid-row: 1;
  }

  .links-tools.has-view-copy .segmented {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .links-tools.has-view-reset .segmented {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .links-tools.has-view-copy .sort-select {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }

  .links-tools.has-view-reset .sort-select {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }

  .links-density-toggle {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    min-height: 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 4px;
  }

  .links-density-toggle button {
    min-height: 38px;
    min-width: 0;
  }

  .links-command-center {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .links-command-copy h2 {
    font-size: 17px;
  }

  .links-command-copy p {
    line-height: 1.5;
  }

  .links-command-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .links-command-metrics article {
    padding: 10px;
    border-radius: 12px;
  }

  .links-command-metrics strong {
    font-size: 21px;
  }

  .links-command-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .links-command-actions .button {
    width: 100%;
    min-height: 46px;
    min-width: 0;
    justify-content: center;
    padding-inline: 7px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .links-command-actions .button .icon {
    flex: 0 0 auto;
  }

  .links-table tbody tr {
    min-height: 126px;
  }

  .links-table .row-actions .icon-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .links-table.is-density-compact tbody {
    gap: 6px;
  }

  .links-table.is-density-compact tbody tr {
    min-height: 112px;
    gap: 8px 10px;
    padding: 11px;
  }

  .links-table.is-density-compact td:nth-child(1) {
    padding-right: 74px;
  }

  .links-table.is-density-compact td:nth-child(3) {
    top: 11px;
    right: 11px;
  }

  .links-table.is-density-compact td:nth-child(6) {
    padding-top: 8px;
  }

  .links-table.is-density-compact .row-actions .icon-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .modal {
    padding: 12px;
  }

  .modal-header,
  .modal-body {
    padding: 18px;
  }

  .modal-footer {
    min-height: 68px;
    padding: 10px 18px;
  }
}

@media (max-width: 430px) {
  .links-command-center {
    padding: 12px;
  }

  .links-command-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .links-command-metrics article {
    padding: 9px;
  }

  .links-command-metrics strong {
    font-size: 19px;
  }

  .links-command-actions {
    gap: 6px;
  }

  .links-command-actions .button {
    flex-direction: column;
    gap: 4px;
    min-height: 58px;
    font-size: 11px;
  }

  .links-command-actions .button span {
    overflow-wrap: anywhere;
  }

  .links-table.is-density-compact .link-primary strong,
  .links-table.is-density-compact .target-line,
  .links-table.is-density-compact .short-link-cell span,
  .links-table.is-density-compact .date-cell span {
    white-space: normal;
  }
}

@media (max-width: 390px) {
  .links-command-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .links-command-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .links-command-actions .button {
    flex-direction: row;
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .front-hero-copy,
  .front-product,
  .page-shell-head,
  .workbench,
  .links-section,
  .settings-hero,
  .import-hero {
    animation: none;
  }

  .front-product:hover,
  .button:hover,
  .icon-button:hover {
    transform: none;
  }
}

/* Settings, imports, and analytics share the same compact operational surface. */
.settings-content {
  padding-right: 0;
}

.settings-hero,
.import-hero {
  min-height: 0;
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--text) 5%, transparent);
}

.settings-hero::after,
.import-hero::after {
  display: none;
}

.settings-hero {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(240px, 0.9fr) auto;
  align-items: center;
  min-height: 132px;
  padding: 24px;
}

.settings-hero h1,
.import-hero-copy h1 {
  font-size: 32px;
  letter-spacing: 0;
}

.settings-search,
.settings-mode-card {
  min-height: 46px;
  border-color: var(--border);
  border-radius: 7px;
  background: var(--surface-raised);
  box-shadow: none;
}

.settings-mode-card {
  min-width: 168px;
}

.settings-tabs,
.settings-panel,
.import-panel,
.analytics-panel,
.analytics-access-panel,
.top-links-panel,
.traffic-alert-strip,
.maintenance-card {
  border-radius: 8px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--text) 4%, transparent);
}

.settings-tabs,
.settings-panel,
.import-panel,
.analytics-panel,
.analytics-access-panel,
.top-links-panel,
.maintenance-card {
  border-color: var(--border);
  background: var(--surface);
}

.settings-tabs {
  padding: 7px;
}

.settings-tabs button {
  border-radius: 6px;
}

.setting-row {
  border-radius: 7px;
}

.import-hero {
  align-items: center;
  padding: 26px;
}

.import-hero-copy h1 {
  margin-top: 6px;
}

.import-hero-stats article {
  min-height: 92px;
  border-color: var(--border);
  border-radius: 7px;
  background: var(--surface-raised);
  box-shadow: none;
}

.import-hero-stats strong {
  font-size: 25px;
  letter-spacing: 0;
}

.import-mode-switch,
.import-mode-switch button {
  border-radius: 7px;
}

.traffic-alert-strip,
.maintenance-card {
  background: var(--surface);
}

@media (max-width: 980px) {
  .settings-hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .settings-search {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .settings-hero,
  .import-hero {
    padding: 18px;
  }

  .settings-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .settings-hero h1,
  .import-hero-copy h1 {
    font-size: 28px;
  }

  .settings-search {
    grid-column: auto;
  }

  .settings-mode-card {
    min-width: 0;
  }

  .import-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }

  .import-hero-stats article {
    min-width: 0;
    padding: 12px;
  }

  .import-hero-stats strong {
    font-size: 22px;
  }
}

/* Import center rebuild */
.import-page-rebuild .content {
  width: min(100%, var(--content-max));
  overflow-x: clip;
}

.import-page-rebuild .import-content {
  display: grid;
  gap: 14px;
}

.import-page-rebuild .panel-head {
  gap: 12px;
}

.import-page-rebuild .panel-head > div {
  min-width: 0;
}

.import-page-rebuild .panel-head p {
  margin-top: 3px;
}

.import-page-rebuild .panel-head .button,
.import-page-rebuild .panel-head .icon-button {
  flex: 0 0 auto;
}

.import-hero-rebuild {
  align-items: stretch;
  min-height: 0;
  padding: 22px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface) 62%),
    var(--surface);
}

.import-hero-rebuild .import-hero-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.import-hero-rebuild .import-hero-copy h1 {
  max-width: 820px;
  margin: 5px 0 8px;
  font-size: clamp(26px, 2.45vw, 38px);
  line-height: 1.12;
}

.import-hero-rebuild .import-hero-copy p {
  max-width: 880px;
  font-size: 13px;
  line-height: 1.7;
}

.import-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.import-hero-rebuild .import-hero-stats {
  min-width: min(100%, 360px);
}

.import-hero-rebuild .import-hero-stats article {
  min-height: 86px;
  border-radius: 9px;
}

.import-flow-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.import-flow-strip article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--text) 4%, transparent);
}

.import-flow-strip span {
  display: grid;
  grid-row: span 2;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 11px;
  font-weight: 800;
}

.import-flow-strip strong,
.import-flow-strip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-flow-strip strong {
  color: var(--text);
  font-size: 13px;
}

.import-flow-strip small {
  color: var(--muted);
  font-size: 11px;
}

.import-shell-rebuild .import-form {
  grid-template-columns: minmax(280px, .92fr) minmax(390px, 1.2fr) minmax(250px, .68fr);
  grid-template-areas: "source options ready";
  align-items: start;
  gap: 14px;
}

.import-shell-rebuild .import-source-panel {
  grid-area: source;
}

.import-shell-rebuild .import-options-panel {
  grid-area: options;
}

.import-shell-rebuild .import-readiness-panel {
  grid-area: ready;
  position: sticky;
  top: calc(var(--topbar-height) + 14px);
}

.import-page-rebuild .import-panel {
  padding: 18px;
  border-radius: 10px;
}

.import-readiness-score {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 60%, var(--surface)), var(--surface));
}

.import-readiness-score strong {
  color: var(--primary);
  font-size: 34px;
  line-height: 1;
}

.import-readiness-score span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 760;
}

.import-readiness-score small {
  color: var(--muted);
  font-size: 11px;
}

.import-readiness-list {
  display: grid;
  gap: 7px;
}

.readiness-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-soft);
  background: var(--surface-soft);
  font-size: 12px;
}

.readiness-item::before {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  content: "";
  background: var(--muted);
}

.readiness-item.is-ok::before {
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent);
}

.readiness-item.is-warn::before {
  background: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 13%, transparent);
}

.readiness-item.is-danger::before {
  background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent);
}

.import-plan {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--cyan-soft) 45%, var(--surface));
  color: var(--text-soft);
  font-size: 12px;
}

.import-plan strong {
  color: var(--text);
}

.import-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.import-template-actions .button {
  min-height: 34px;
  border-radius: 8px;
  font-size: 12px;
}

.import-format-search {
  display: flex;
  align-items: center;
  flex: 0 1 240px;
}

.import-format-search input,
.import-history-tools input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 11px;
  color: var(--text);
  background: var(--surface);
  outline: 0;
}

.import-format-search input:focus,
.import-history-tools input:focus {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.import-format-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  color: var(--muted);
  text-align: center;
  background: var(--surface);
}

.import-table-actions,
.import-preview-actions,
.import-history-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.import-preview-actions,
.import-history-tools {
  justify-content: flex-end;
}

.import-history-tools input {
  width: min(260px, 100%);
}

.import-mapping-card {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.import-mapping-card > strong {
  color: var(--text-soft);
  font-size: 13px;
}

.import-mapping-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mapping-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  font-size: 11px;
}

.mapping-chip strong,
.mapping-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-chip strong {
  color: var(--text-soft);
}

.mapping-chip span {
  color: var(--muted);
}

.source-pane textarea {
  resize: vertical;
  min-height: 220px;
}

.import-page-rebuild .dropzone {
  min-height: 224px;
  border-radius: 10px;
}

.import-page-rebuild .import-mode-switch {
  border-radius: 9px;
}

.import-page-rebuild .import-mode-switch button,
.import-page-rebuild .field-switch,
.import-page-rebuild .import-format-card,
.import-page-rebuild .table-pick,
.import-page-rebuild .preview-card,
.import-page-rebuild .history-card {
  border-radius: 8px;
}

.import-page-rebuild .preview-empty,
.import-page-rebuild .history-empty {
  min-height: 170px;
}

.import-page-rebuild .preview-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.import-page-rebuild .preview-stat {
  min-height: 70px;
  border-radius: 8px;
}

.import-page-rebuild .preview-tables {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  .import-shell-rebuild .import-form {
    grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr);
    grid-template-areas:
      "source ready"
      "options options";
  }

  .import-shell-rebuild .import-readiness-panel {
    position: static;
  }
}

@media (max-width: 980px) {
  .import-flow-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .import-shell-rebuild .import-form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "source"
      "ready"
      "options";
  }

  .import-hero-rebuild {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .import-page-rebuild .content {
    padding-inline: 12px;
  }

  .import-hero-rebuild,
  .import-page-rebuild .import-panel {
    padding: 14px;
    border-radius: 10px;
  }

  .import-hero-rebuild .import-hero-copy h1 {
    font-size: 26px;
  }

  .import-hero-rebuild .import-hero-copy p {
    font-size: 12px;
  }

  .import-flow-strip {
    grid-template-columns: 1fr;
  }

  .import-flow-strip article {
    padding: 10px 12px;
  }

  .import-format-head,
  .import-table-head,
  .import-page-rebuild .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .import-preview-actions,
  .import-history-tools,
  .import-table-actions,
  .import-hero-actions {
    justify-content: stretch;
    width: 100%;
  }

  .import-preview-actions .button,
  .import-history-tools .button,
  .import-table-actions .button,
  .import-hero-actions .button,
  .import-history-tools input {
    width: 100%;
    justify-content: center;
  }

  .import-format-search {
    flex: 1 1 100%;
    width: 100%;
  }

  .import-page-rebuild .preview-stats,
  .import-page-rebuild .preview-tables,
  .import-mapping-grid {
    grid-template-columns: 1fr;
  }

  .source-pane textarea {
    min-height: 180px;
  }
}

@media (max-width: 430px) {
  .import-page-rebuild .content {
    padding-inline: 10px;
  }

  .import-hero-rebuild .import-hero-stats {
    grid-template-columns: 1fr;
  }

  .import-readiness-score strong {
    font-size: 30px;
  }

  .import-page-rebuild .preview-stats {
    grid-template-columns: 1fr;
  }

.import-page-rebuild .button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Links management status filters: keep every status button visible. */
.links-tools .segmented {
  display: flex;
  flex: 1 1 520px;
  flex-wrap: wrap;
  align-items: center;
  height: auto;
  min-height: 44px;
  max-width: 100%;
  overflow: visible;
}

.links-tools .segmented button {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 36px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .links-tools .segmented {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .links-tools .segmented button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding-inline: 6px;
  }
}

@media (max-width: 430px) {
  .links-tools .segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact homepage composition and configurable footer. */
.front-home-hub,
.front-home-library {
  display: grid;
  width: min(calc(100% - 64px), 1320px);
  margin: 0 auto;
  gap: 16px;
}

.front-home-hub {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin-top: 42px;
}

.front-home-library {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  margin-top: 20px;
}

.front-home-hub > section,
.front-home-library > section,
.front-home-library .front-flow-inner {
  width: 100%;
  margin: 0;
}

.front-home-hub > section,
.front-home-library > section {
  padding: 0;
}

.front-home-hub .front-matrix-section,
.front-home-hub .front-checklist-section,
.front-home-library .front-enterprise-section {
  grid-column: 1 / -1;
}

.front-home-library .front-import-board,
.front-home-library .front-flow-section,
.front-home-library .front-reliability {
  grid-column: span 5;
}

.front-home-library .front-scenarios,
.front-home-library .front-feature-section,
.front-home-library .front-faq-section {
  grid-column: span 7;
}

.front-home-hub .front-updates-shell,
.front-home-hub .front-pwa-guide-shell,
.front-home-hub .front-support-shell,
.front-home-hub .front-feedback-shell,
.front-home-hub .front-deploy-shell,
.front-home-hub .front-matrix-shell,
.front-home-hub .front-checklist-shell,
.front-home-library .front-enterprise-shell,
.front-home-library .front-faq-shell {
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px;
  border-radius: 8px;
}

.front-home-hub .front-section-heading h2,
.front-home-library .front-section-heading h2,
.front-home-library .front-reliability h2 {
  margin-top: 10px;
  font-size: clamp(22px, 2.1vw, 28px);
}

.front-home-hub .front-section-heading p,
.front-home-library .front-section-heading p,
.front-home-library .front-reliability-copy > p {
  font-size: 14px;
  line-height: 1.68;
}

.front-home-hub .front-updates-item,
.front-home-hub .front-support-card,
.front-home-hub .front-feedback-card,
.front-home-hub .front-deploy-card,
.front-home-hub .front-checklist-card,
.front-home-library .front-enterprise-card,
.front-home-library .front-import-card,
.front-home-library .front-scenario-card {
  min-height: 0;
  padding: 15px;
  border-radius: 8px;
}

.front-home-hub .front-pwa-guide-card,
.front-home-hub .front-pwa-guide-point {
  border-radius: 8px;
}

.front-home-hub .front-support-grid,
.front-home-hub .front-feedback-grid,
.front-home-hub .front-deploy-grid,
.front-home-hub .front-checklist-grid {
  gap: 10px;
}

.front-home-library .front-enterprise-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.front-home-library .front-enterprise-summary {
  gap: 10px;
}

.front-home-library .front-enterprise-copy {
  margin-top: 12px;
}

.front-home-library .front-import-grid,
.front-home-library .front-scenario-grid {
  gap: 10px;
  margin-top: 18px;
}

.front-home-library .front-import-grid {
  grid-template-columns: 1fr;
}

.front-home-library .front-scenario-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.front-home-library .front-flow-section {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.front-home-library .front-flow-inner {
  padding: 20px;
}

.front-home-library .front-flow-steps {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 24px;
}

.front-home-library .front-flow-step {
  padding: 0 0 22px 52px;
}

.front-home-library .front-flow-step::before {
  top: 0;
  bottom: 0;
  left: 18px;
  width: 1px;
  height: auto;
}

.front-home-library .front-flow-step:last-child {
  padding-bottom: 0;
}

.front-home-library .front-flow-step:last-child::before {
  display: none;
}

.front-home-library .front-reliability {
  align-items: start;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.front-home-library .front-reliability-copy .button {
  margin-top: 18px;
}

.front-feature-section .front-feature-list {
  margin-top: 24px;
}

.front-home-library .front-feature {
  min-height: 0;
  padding: 18px 0;
}

.front-footer {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 54px 0 0;
  padding: 0 0 max(18px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 70%, var(--surface)), var(--surface)),
    var(--surface);
}

.front-footer > .front-footer-shell {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(220px, 0.72fr) minmax(320px, 0.95fr);
  width: min(calc(100% - 64px), 1320px);
  margin: 0 auto;
  gap: 24px;
  padding: 28px 0 24px;
}

.front-footer-notice {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 52%, var(--surface));
}

.front-footer-notice > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--primary);
}

.front-footer-notice .icon {
  width: 17px;
  height: 17px;
}

.front-footer-notice strong,
.front-footer-notice p {
  display: block;
}

.front-footer-notice strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.front-footer-notice p {
  margin: 3px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
}

.front-footer-notice a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.front-footer-brand {
  min-width: 0;
}

.front-footer-brand .front-brand img {
  width: 36px;
  height: 36px;
}

.front-footer-brand p {
  max-width: 520px;
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.72;
}

.front-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.front-footer-actions .button {
  min-height: 38px;
  padding-inline: 13px;
}

.front-footer-links,
.front-footer-side {
  min-width: 0;
}

.front-footer-links > strong,
.front-footer-badges + .front-footer-meta::before {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
}

.front-footer-links > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.front-footer-links a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
  gap: 8px;
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 720;
  transition: transform 180ms var(--ease), border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.front-footer-links a:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 46%, var(--surface));
  color: var(--primary);
}

.front-footer-links .icon {
  width: 16px;
  height: 16px;
}

.front-footer-links a > .icon {
  justify-self: center;
}

.front-footer-links span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-footer-side {
  display: grid;
  align-content: start;
  gap: 14px;
}

.front-footer-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.front-footer-badges > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
}

.front-footer-badges span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
}

.front-footer-badges .icon {
  width: 15px;
  height: 15px;
}

.front-footer-badges small,
.front-footer-badges strong {
  display: block;
}

.front-footer-badges small {
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.front-footer-badges strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.front-footer-meta {
  gap: 8px 12px;
  font-size: 11px;
  line-height: 1.6;
}

/* v1.2.218 front homepage mobile viewport hardening. */
@media (max-width: 720px) {
  .public-page {
    overflow-x: hidden;
  }

  .public-page.has-front-mobile-quicknav {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }

  .front-header {
    overflow: visible;
  }

  .front-header-inner,
  .front-hero,
  .front-preview,
  .front-evidence,
  .front-live-stats,
  .front-home-hub,
  .front-home-library,
  .front-footer > .front-footer-shell {
    width: min(calc(100% - 28px), 640px);
    max-width: 100%;
  }

  .front-header-inner {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 60px;
    padding: 8px 0;
  }

  .front-brand {
    min-width: 0;
  }

  .front-brand strong,
  .front-brand small,
  .front-footer-links span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .front-menu-button {
    justify-self: end;
    min-width: 44px;
    min-height: 44px;
  }

  .front-header-actions {
    justify-self: end;
  }

  .front-nav {
    left: 14px;
    right: 14px;
    width: auto;
    max-height: min(72vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .front-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    line-height: 1.2;
  }

  .front-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 22px;
    padding-top: 22px;
  }

  .front-hero-copy,
  .front-product,
  .front-product-body,
  .front-preview-card,
  .front-preview-result,
  .front-preview-history,
  .front-live-stats-shell,
  .front-home-hub > section,
  .front-home-library > section {
    min-width: 0;
    max-width: 100%;
  }

  .front-hero h1 {
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1.06;
    overflow-wrap: anywhere;
  }

  .front-hero-copy > p {
    font-size: 15px;
    line-height: 1.72;
  }

  .front-url-form,
  .front-preview-form > div {
    max-width: 100%;
    box-sizing: border-box;
  }

  .front-url-form {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
  }

  .front-url-form .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .front-preview-form > div {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .front-preview-form > div .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .front-url-form input,
  .front-preview-form input,
  .front-preview-history-search input {
    min-width: 0;
    font-size: 16px;
  }

  .front-url-form .button,
  .front-preview-form .button,
  .front-hero-actions .button,
  .front-home-share-button {
    min-height: 48px;
    justify-content: center;
  }

  .front-hero-actions,
  .front-home-share-group,
  .front-preview-actions,
  .front-preview-qrcode-toolbar,
  .front-preview-history-actions,
  .front-preview-history-restore-actions,
  .front-preview-history-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .front-hero-actions .button,
  .front-home-share-button,
  .front-preview-actions .button,
  .front-preview-qrcode-toolbar .button,
  .front-preview-history-actions .button,
  .front-preview-history-filter,
  .front-preview-history-select,
  .front-preview-history-restore-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 9px;
  }

  .front-product,
  .front-preview-card,
  .front-live-stats-shell {
    overflow: hidden;
    border-radius: 8px;
  }

  .front-preview {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 18px;
  }

  .front-preview-card {
    padding: 16px;
  }

  .front-preview-form {
    gap: 10px;
  }

  .front-preview-form > div {
    grid-template-columns: 20px minmax(0, 1fr);
    min-height: 48px;
  }

  .front-preview-result-head,
  .front-preview-domain,
  .front-preview-risk,
  .front-preview-history-head,
  .front-preview-history-tools,
  .front-preview-history-summary,
  .front-preview-history-restore-grid,
  .front-preview-qrcode-shell,
  .front-preview-qrcode-meta,
  .front-live-stats-grid,
  .front-live-stats-cards,
  .front-live-stats-visual-head {
    grid-template-columns: 1fr;
  }

  .front-preview-target,
  .front-preview-domain strong,
  .front-preview-risk p,
  .front-preview-history-title,
  .front-preview-history-line strong,
  .front-preview-history-meta span,
  .front-preview-rich-title,
  .front-preview-rich-desc {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .front-preview-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-preview-history-tools,
  .front-preview-history-search,
  .front-preview-history-actions,
  .front-preview-history-filters {
    width: 100%;
  }

  .front-preview-history-item-shell {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .front-preview-history-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .front-preview-history-line strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .front-preview-history-open {
    min-width: 0;
  }

  .front-preview-rich-shell,
  .front-preview-rich-facts {
    grid-template-columns: 1fr;
  }

  .front-preview-rich-media {
    min-height: 170px;
  }

  .front-live-stats-shell {
    padding: 16px;
  }

  .front-home-hub,
  .front-home-library {
    gap: 14px;
  }

  .front-home-hub .front-section-heading h2,
  .front-home-library .front-section-heading h2,
  .front-home-library .front-reliability h2 {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.16;
  }

  .front-home-hub .front-section-heading p,
  .front-home-library .front-section-heading p,
  .front-home-library .front-reliability-copy > p {
    overflow-wrap: anywhere;
  }

  .front-footer {
    margin-top: 34px;
  }

  .front-footer > .front-footer-shell {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 22px;
  }

  .front-footer-notice {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
  }

  .front-footer-notice a {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    border-radius: 7px;
    background: var(--surface-raised);
  }

  .front-footer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-footer-actions .button,
  .front-footer-links a {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .front-footer-links > div,
  .front-footer-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-footer-badges > div {
    min-width: 0;
  }

  .front-mobile-quicknav {
    width: min(calc(100% - 16px), 560px);
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 430px) {
  .front-header-inner,
  .front-hero,
  .front-preview,
  .front-evidence,
  .front-live-stats,
  .front-home-hub,
  .front-home-library,
  .front-footer > .front-footer-shell {
    width: calc(100% - 22px);
  }

  .front-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .front-header-actions {
    display: none;
  }

  .front-nav {
    left: 11px;
    right: 11px;
  }

  .front-brand small {
    display: none;
  }

  .front-hero {
    gap: 18px;
    padding-top: 16px;
  }

  .front-hero h1 {
    font-size: clamp(28px, 10.5vw, 38px);
  }

  .front-url-form,
  .front-preview-card,
  .front-live-stats-shell,
  .front-home-hub .front-updates-shell,
  .front-home-hub .front-pwa-guide-shell,
  .front-home-hub .front-support-shell,
  .front-home-hub .front-feedback-shell,
  .front-home-hub .front-deploy-shell,
  .front-home-hub .front-matrix-shell,
  .front-home-hub .front-checklist-shell,
  .front-home-library .front-enterprise-shell,
  .front-home-library .front-faq-shell,
  .front-home-library .front-flow-inner,
  .front-home-library .front-reliability {
    padding: 14px;
  }

  .front-url-form,
  .front-preview-form > div {
    grid-template-columns: 1fr;
  }

  .front-url-leading,
  .front-preview-form > div > span {
    display: none;
  }

  .front-hero-actions,
  .front-home-share-group,
  .front-preview-actions,
  .front-preview-qrcode-toolbar,
  .front-preview-history-actions,
  .front-preview-history-restore-actions,
  .front-preview-history-filters,
  .front-preview-meta,
  .front-footer-actions,
  .front-footer-links > div,
  .front-footer-badges {
    grid-template-columns: 1fr;
  }

  .front-preview-history-item-shell {
    grid-template-columns: 1fr;
  }

  .front-preview-history-select,
  .front-preview-history-favorite {
    justify-self: stretch;
  }

  .front-preview-history-favorite {
    width: 100%;
  }

  .front-preview-qrcode-preview {
    min-height: 176px;
  }

  .front-home-library .front-flow-step {
    padding-left: 44px;
  }

  .front-mobile-quicknav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: calc(100% - 12px);
    gap: 4px;
    padding-inline: 5px;
  }

  .front-mobile-quicknav a {
    min-height: 48px;
    padding: 5px 2px;
    font-size: 10px;
  }
}

@media (max-width: 390px) {
  .front-header-inner,
  .front-hero,
  .front-preview,
  .front-evidence,
  .front-live-stats,
  .front-home-hub,
  .front-home-library,
  .front-footer > .front-footer-shell {
    width: calc(100% - 18px);
  }

  .front-brand img {
    width: 30px;
    height: 30px;
  }

  .front-brand strong {
    font-size: 13px;
  }

  .front-menu-button {
    min-width: 42px;
    min-height: 42px;
  }

  .front-hero-copy > p,
  .front-preview-copy p,
  .front-home-hub .front-section-heading p,
  .front-home-library .front-section-heading p {
    font-size: 13px;
  }

  .front-url-form,
  .front-preview-card,
  .front-live-stats-shell,
  .front-home-hub .front-updates-shell,
  .front-home-hub .front-pwa-guide-shell,
  .front-home-hub .front-support-shell,
  .front-home-hub .front-feedback-shell,
  .front-home-hub .front-deploy-shell,
  .front-home-hub .front-matrix-shell,
  .front-home-hub .front-checklist-shell,
  .front-home-library .front-enterprise-shell,
  .front-home-library .front-faq-shell,
  .front-home-library .front-flow-inner,
  .front-home-library .front-reliability {
    padding: 12px;
  }

  .front-url-form .button,
  .front-preview-form .button,
  .front-hero-actions .button,
  .front-home-share-button,
  .front-preview-actions .button,
  .front-preview-history-actions .button,
  .front-preview-history-filter,
  .front-preview-history-select,
  .front-footer-actions .button,
  .front-footer-links a {
    padding-inline: 7px;
    font-size: 12px;
  }

  .front-preview-rich-media {
    min-height: 148px;
  }

  .front-mobile-quicknav a span {
    max-width: 100%;
  }
}

/* Settings organizer. */
.settings-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-tabs button {
  grid-template-columns: 20px minmax(0, 1fr);
  min-height: 48px;
}

.settings-tabs button span {
  display: grid;
  gap: 3px;
  overflow: hidden;
  white-space: normal;
}

.settings-tabs button b {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-tabs button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1;
}

.settings-tabs button.is-active small {
  color: color-mix(in srgb, var(--primary) 72%, var(--text-soft));
}

.settings-panel .section-heading p {
  max-width: 760px;
  margin: 7px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

.settings-panel-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.settings-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.settings-subnav button,
.settings-subsection-tools button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 760;
  transition: transform 160ms var(--ease), border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.settings-subnav button:hover,
.settings-subsection-tools button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 44%, var(--surface));
  color: var(--primary);
}

.settings-subnav small {
  color: var(--muted);
  font-size: 10px;
}

.settings-subsection-tools {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.settings-subsection {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
}

.settings-subsection::after {
  flex: 1;
  height: 1px;
  background: var(--border);
  content: "";
}

.settings-subsection > button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.settings-subsection span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}

.settings-subsection > button span {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.settings-subsection > button small {
  color: color-mix(in srgb, var(--primary) 62%, var(--muted));
  font-size: 10px;
  font-weight: 760;
}

.settings-subsection > button .icon {
  width: 14px;
  height: 14px;
  transition: transform 180ms var(--ease);
}

.settings-subsection > button:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
}

.settings-subsection.is-collapsed > button .icon {
  transform: rotate(-90deg);
}

.setting-row.is-subsection-collapsed {
  display: none;
}

.settings-panel.is-searching .setting-row.is-subsection-collapsed {
  display: grid;
}

.setting-row span small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .front-home-hub,
  .front-home-library {
    grid-template-columns: 1fr;
  }

  .front-home-library .front-import-board,
  .front-home-library .front-scenarios,
  .front-home-library .front-feature-section,
  .front-home-library .front-flow-section,
  .front-home-library .front-faq-section,
  .front-home-library .front-reliability {
    grid-column: 1;
  }

  .front-home-library .front-enterprise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-footer > .front-footer-shell {
    grid-template-columns: 1fr 1fr;
  }

  .front-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .front-home-hub,
  .front-home-library,
  .front-footer > .front-footer-shell {
    width: min(calc(100% - 40px), 820px);
  }

  .settings-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .front-home-hub,
  .front-home-library,
  .front-footer > .front-footer-shell {
    width: min(calc(100% - 28px), 640px);
  }

  .front-home-hub {
    margin-top: 30px;
  }

  .front-home-library .front-enterprise-grid,
  .front-home-library .front-scenario-grid,
  .front-footer > .front-footer-shell,
  .front-footer-links > div,
  .front-footer-badges,
  .settings-mode-grid {
    grid-template-columns: 1fr;
  }

  .front-home-hub .front-updates-shell,
  .front-home-hub .front-pwa-guide-shell,
  .front-home-hub .front-support-shell,
  .front-home-hub .front-feedback-shell,
  .front-home-hub .front-deploy-shell,
  .front-home-hub .front-matrix-shell,
  .front-home-hub .front-checklist-shell,
  .front-home-library .front-enterprise-shell,
  .front-home-library .front-faq-shell,
  .front-home-library .front-flow-inner,
  .front-home-library .front-reliability {
    padding: 16px;
  }

  .front-footer {
    margin-top: 36px;
  }

  .front-footer > .front-footer-shell {
    gap: 18px;
    padding-top: 22px;
  }

  .front-footer-notice {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .front-footer-notice a {
    grid-column: 2;
    justify-self: start;
  }

  .front-footer-actions .button {
    flex: 1 1 150px;
    justify-content: center;
  }

  .settings-subsection {
    margin-top: 2px;
  }

  .settings-panel-toolbar {
    grid-template-columns: 1fr;
  }

  .settings-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .settings-subnav button {
    flex: 0 0 auto;
  }

  .settings-subsection-tools {
    justify-content: stretch;
  }

  .settings-subsection-tools button {
    flex: 1 1 110px;
    justify-content: center;
  }
}


.detail-preview-metadata {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 36%),
    linear-gradient(140deg, color-mix(in srgb, var(--surface-elevated) 94%, transparent), color-mix(in srgb, var(--surface-soft) 96%, transparent));
  box-shadow: var(--shadow-sm);
  animation: enter-up 360ms 70ms var(--ease) both;
}

.detail-preview-metadata-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-preview-metadata-head small,
.detail-preview-metadata-head strong {
  display: block;
}

.detail-preview-metadata-head small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.detail-preview-metadata-head strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 15px;
}

.detail-preview-metadata-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.detail-preview-metadata-badge.is-live {
  background: color-mix(in srgb, var(--green-soft) 72%, var(--surface));
  color: var(--green);
}

.detail-preview-metadata-badge.is-cache {
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
  color: var(--primary);
}

.detail-preview-metadata-badge.is-warn {
  background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
  color: var(--amber);
}

.detail-preview-metadata-badge.is-muted {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--muted);
}

.detail-preview-metadata-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.detail-preview-metadata-toolbar.is-disabled {
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  color: var(--muted);
  font-size: 12px;
}

.detail-preview-metadata-toolbar .button {
  min-height: 42px;
  padding-inline: 16px;
}

.detail-preview-metadata-shell {
  display: grid;
  grid-template-columns: minmax(232px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 16px;
}

.detail-preview-metadata-media {
  position: relative;
  overflow: hidden;
  min-height: 182px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), var(--surface-raised));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 52%, transparent);
}

.detail-preview-metadata-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-preview-metadata-media.is-placeholder {
  display: grid;
  place-items: center;
}

.detail-preview-metadata-media.is-placeholder span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--primary-soft) 88%, var(--surface));
  color: var(--primary);
  font-size: 28px;
  font-weight: 800;
  box-shadow: 0 20px 38px color-mix(in srgb, var(--primary) 10%, transparent);
}

.detail-preview-metadata-placeholder-icon {
  width: 74px;
  height: 74px;
  padding: 16px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 20px 38px color-mix(in srgb, var(--primary) 10%, transparent);
}

.detail-preview-metadata-favicon {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 12px 28px rgba(18, 29, 40, 0.14);
  backdrop-filter: blur(10px);
}

.detail-preview-metadata-favicon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-preview-metadata-main {
  min-width: 0;
}

.detail-preview-metadata-site {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.detail-preview-metadata-site-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
}

.detail-preview-metadata-site-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-preview-metadata-site strong,
.detail-preview-metadata-site small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-preview-metadata-site strong {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 760;
}

.detail-preview-metadata-site small {
  color: var(--muted);
  font-size: 10px;
}

.detail-preview-metadata-title {
  display: block;
  margin-top: 12px;
  color: var(--text);
  font-size: 19px;
  line-height: 1.32;
}

.detail-preview-metadata-desc {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.detail-preview-metadata-desc.is-empty {
  color: var(--muted);
}

.detail-preview-metadata-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

.detail-preview-metadata-note.is-live {
  color: var(--text-soft);
}

.detail-preview-metadata-note.is-warn {
  color: var(--amber);
}

.detail-preview-metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.detail-preview-metadata-grid > div {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 56%, transparent);
}

.detail-preview-metadata-grid span,
.detail-preview-metadata-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-preview-metadata-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.detail-preview-metadata-grid strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 12px;
}

.detail-preview-metadata-links {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.detail-preview-metadata-link {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease;
}

.detail-preview-metadata-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: 0 16px 30px color-mix(in srgb, var(--primary) 8%, transparent);
}

.detail-preview-metadata-link span,
.detail-preview-metadata-link strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-preview-metadata-link span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.detail-preview-metadata-link strong {
  color: var(--primary);
  font-size: 12px;
}

.front-preview-rich-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-raised) 96%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 52%, transparent);
}

.front-preview-rich-shell {
  display: grid;
  grid-template-columns: minmax(132px, 164px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.front-preview-rich-media {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), var(--surface-raised));
}

.front-preview-rich-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.front-preview-rich-media.is-placeholder {
  display: grid;
  place-items: center;
}

.front-preview-rich-media.is-placeholder span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary-soft) 86%, var(--surface));
  color: var(--primary);
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 10%, transparent);
}

.front-preview-rich-placeholder-icon {
  width: 54px;
  height: 54px;
  padding: 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 10%, transparent);
}

.front-preview-rich-favicon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 12px 24px rgba(18, 29, 40, 0.14);
  backdrop-filter: blur(8px);
}

.front-preview-rich-favicon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.front-preview-rich-main {
  min-width: 0;
}

.front-preview-rich-top {
  display: grid;
  gap: 9px;
}

.front-preview-rich-flags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.front-preview-rich-badge,
.front-preview-rich-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.front-preview-rich-badge.is-live {
  background: color-mix(in srgb, var(--green-soft) 72%, var(--surface));
  color: var(--green);
}

.front-preview-rich-badge.is-cache {
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
  color: var(--primary);
}

.front-preview-rich-badge.is-warn {
  background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
  color: var(--amber);
}

.front-preview-rich-badge.is-muted {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--muted);
}

.front-preview-rich-chip {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text-soft);
}

.front-preview-rich-chip.is-warn {
  background: color-mix(in srgb, var(--amber-soft) 74%, var(--surface));
  color: var(--amber);
}

.front-preview-rich-chip.is-soft {
  color: var(--muted);
}

.front-preview-rich-site {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
}

.front-preview-rich-site-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
}

.front-preview-rich-site-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.front-preview-rich-site strong,
.front-preview-rich-site small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-rich-site strong {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 760;
}

.front-preview-rich-site small {
  color: var(--muted);
  font-size: 10px;
}

.front-preview-rich-title {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}

.front-preview-rich-desc {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.front-preview-rich-desc.is-empty {
  color: var(--muted);
}

.front-preview-rich-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.front-preview-rich-facts > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.front-preview-rich-facts span,
.front-preview-rich-facts strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.front-preview-rich-facts span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.front-preview-rich-facts strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 11px;
}

.clipboard-magic {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 75;
  display: grid;
  justify-items: end;
  pointer-events: none;
}

.clipboard-magic-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--border));
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 94%, #ffffff), color-mix(in srgb, var(--cyan) 72%, var(--primary))),
    var(--primary);
  color: #ffffff;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--primary) 30%, transparent);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}

.clipboard-magic-button::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}

.clipboard-magic-button:hover,
.clipboard-magic-button:focus-visible,
.clipboard-magic.is-open .clipboard-magic-button {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--primary) 38%, transparent);
}

.clipboard-magic-button:hover::after,
.clipboard-magic-button:focus-visible::after,
.clipboard-magic.is-open .clipboard-magic-button::after {
  opacity: 1;
  transform: scale(1);
}

.clipboard-magic-button:active {
  cursor: grabbing;
  transform: translateY(0) scale(0.98);
}

.clipboard-magic-button .icon {
  width: 22px;
  height: 22px;
}

.clipboard-magic-bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  animation: clipboardMagicIn 180ms var(--ease);
}

.clipboard-magic.is-short .clipboard-magic-bubble {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
}

.clipboard-magic-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.clipboard-magic-close:hover,
.clipboard-magic-close:focus-visible {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--text);
}

.clipboard-magic-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.clipboard-magic.is-short .clipboard-magic-kicker {
  background: color-mix(in srgb, var(--green-soft) 72%, var(--surface));
  color: var(--green);
}

.clipboard-magic-bubble strong {
  display: block;
  margin-top: 10px;
  padding-right: 26px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.clipboard-magic-bubble p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.clipboard-magic-bubble small {
  display: block;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clipboard-magic-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.clipboard-magic-actions .button {
  min-height: 44px;
}

.clipboard-magic-actions .button-ghost {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-soft);
}

@keyframes clipboardMagicIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 720px) {
  .clipboard-magic {
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .clipboard-magic-bubble {
    width: min(calc(100vw - 28px), 320px);
  }

  .clipboard-magic-actions .button {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }

  .detail-preview-metadata-shell {
    grid-template-columns: 1fr;
  }

  .detail-preview-metadata-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-preview-rich-shell {
    grid-template-columns: 1fr;
  }

  .front-preview-rich-media {
    min-height: 182px;
  }

  .front-preview-rich-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .clipboard-magic {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  .clipboard-magic-button {
    width: 50px;
    height: 50px;
  }

  .clipboard-magic-bubble {
    padding: 12px;
  }

  .clipboard-magic-actions {
    gap: 7px;
  }

  .clipboard-magic-actions .button {
    flex-basis: 100%;
    width: 100%;
  }

  .detail-preview-metadata {
    padding: 16px;
    border-radius: 18px;
  }

  .detail-preview-metadata-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-preview-metadata-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-preview-metadata-toolbar .button {
    width: 100%;
  }

  .detail-preview-metadata-badge {
    min-height: 30px;
  }

  .detail-preview-metadata-media {
    min-height: 170px;
  }

  .detail-preview-metadata-grid {
    grid-template-columns: 1fr;
  }

  .front-preview-rich-card {
    padding: 12px;
  }

  .front-preview-rich-media {
    min-height: 152px;
  }

  .front-preview-rich-facts {
    grid-template-columns: 1fr;
  }
}

.leads-page {
  overflow-x: hidden;
}

.leads-content {
  display: grid;
  gap: 18px;
}

.lead-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.86fr);
  gap: 24px;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface)), color-mix(in srgb, var(--green) 6%, var(--surface)) 62%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}

.lead-hero-copy {
  align-self: end;
}

.lead-hero-copy h1 {
  margin: 7px 0 10px;
  font-size: 36px;
  line-height: 1.18;
  letter-spacing: 0;
}

.lead-hero-copy p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.lead-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lead-hero-stats article {
  min-width: 0;
  min-height: 104px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 66%, transparent);
}

.lead-hero-stats small,
.lead-hero-stats span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-hero-stats strong {
  display: block;
  overflow: hidden;
  margin: 8px 0 3px;
  color: var(--primary);
  font-size: 28px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-filter-panel,
.lead-sla-panel,
.lead-insights-panel,
.lead-duplicate-panel,
.lead-kanban-panel,
.lead-list-panel,
.lead-disabled {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.lead-flash {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 22%, var(--border));
  border-radius: 8px;
  color: color-mix(in srgb, var(--green) 72%, var(--text));
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  font-size: 13px;
  font-weight: 760;
}

.lead-flash.is-error {
  border-color: color-mix(in srgb, var(--red) 26%, var(--border));
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 58%, var(--surface));
}

.lead-flash .icon {
  flex: 0 0 auto;
}

.lead-filter-form {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(120px, 0.7fr) repeat(4, minmax(116px, 0.62fr));
  align-items: end;
  gap: 12px;
}

.lead-filter-form .field {
  margin: 0;
}

.lead-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.lead-filter-actions .button {
  min-height: 44px;
}

.lead-filter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.lead-filter-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
  border-radius: 999px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  font-size: 11px;
  font-weight: 720;
}

.lead-sla-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lead-sla-grid article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

.lead-sla-grid article[data-lead-sla="warning"] {
  border-color: color-mix(in srgb, var(--amber) 24%, var(--border));
  background: color-mix(in srgb, var(--amber-soft) 44%, var(--surface));
}

.lead-sla-grid article[data-lead-sla="breached"],
.lead-sla-grid article[data-lead-sla="stale"] {
  border-color: color-mix(in srgb, var(--red) 22%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 52%, var(--surface));
}

.lead-sla-grid span,
.lead-sla-grid small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-sla-grid strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
}

.lead-sla-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  margin-top: 2px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 54%, var(--surface));
  font-size: 10px;
  font-weight: 820;
  text-decoration: none;
}

.lead-sla-grid a:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.lead-sla-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 760px;
  margin-top: 9px;
  padding: 8px 10px;
  border-left: 3px solid color-mix(in srgb, var(--amber) 56%, var(--border));
  border-radius: 8px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--amber-soft) 52%, var(--surface));
  font-size: 11px;
  line-height: 1.55;
}

.lead-sla-warning[data-lead-sla="breached"],
.lead-sla-warning[data-lead-sla="stale"] {
  border-left-color: color-mix(in srgb, var(--red) 58%, var(--border));
  background: color-mix(in srgb, var(--red-soft) 56%, var(--surface));
}

.lead-sla-warning b {
  flex: 0 0 auto;
  color: var(--amber);
  font-size: 10px;
}

.lead-sla-warning[data-lead-sla="breached"] b,
.lead-sla-warning[data-lead-sla="stale"] b {
  color: var(--red);
}

.lead-sla-warning span {
  min-width: 0;
  word-break: break-word;
}

.lead-sla-detail {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.lead-sla-detail header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lead-sla-detail header span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

.lead-sla-detail header strong {
  color: var(--text);
  font-size: 12px;
}

.lead-sla-detail p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.lead-sla-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lead-sla-metrics span {
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 760;
}

.lead-duplicate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lead-duplicate-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--amber) 20%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--amber-soft) 42%, var(--surface));
}

.lead-duplicate-card header,
.lead-duplicate-detail header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lead-duplicate-card header span,
.lead-duplicate-detail header span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

.lead-duplicate-card header strong,
.lead-duplicate-detail header strong {
  color: var(--amber);
  font-size: 12px;
}

.lead-duplicate-card p,
.lead-duplicate-detail p {
  overflow: hidden;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-duplicate-card small {
  color: var(--muted);
  font-size: 10px;
}

.lead-duplicate-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 760px;
  margin-top: 9px;
  padding: 8px 10px;
  border-left: 3px solid color-mix(in srgb, var(--amber) 54%, var(--border));
  border-radius: 8px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--amber-soft) 54%, var(--surface));
  font-size: 11px;
  line-height: 1.55;
}

.lead-duplicate-warning b {
  flex: 0 0 auto;
  color: var(--amber);
  font-size: 10px;
}

.lead-duplicate-warning span {
  min-width: 0;
  word-break: break-word;
}

.lead-duplicate-detail {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.lead-duplicate-matches,
.lead-duplicate-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lead-duplicate-matches span,
.lead-duplicate-codes a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 760;
  text-decoration: none;
}

.lead-duplicate-codes a {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface));
}

.lead-bulk-form {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
}

.lead-bulk-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.lead-bulk-heading > div:first-child {
  min-width: 0;
}

.lead-bulk-heading span,
.lead-bulk-heading small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.lead-bulk-heading strong {
  display: block;
  margin: 4px 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}

.lead-bulk-heading b {
  color: var(--primary);
}

.lead-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.lead-bulk-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  align-items: end;
  gap: 10px;
}

.lead-bulk-grid .field {
  margin: 0;
}

.lead-bulk-grid .field-full {
  grid-column: 1 / -2;
}

.lead-bulk-grid textarea {
  min-height: 72px;
  resize: vertical;
}

.lead-bulk-submit {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 100%;
}

.lead-bulk-submit .button,
.lead-bulk-actions .button {
  min-height: 44px;
}

.lead-bulk-form button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.lead-insights-panel .section-heading {
  margin-bottom: 16px;
}

.lead-insights-panel .section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.lead-insights-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lead-insight-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
}

.lead-insight-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lead-insight-card > header span,
.lead-insight-card > header strong {
  display: block;
}

.lead-insight-card > header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.lead-insight-card > header strong {
  color: var(--primary);
  font-size: 18px;
  line-height: 1.1;
}

.lead-insight-list {
  display: grid;
  gap: 9px;
}

.lead-insight-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
  background: var(--surface);
  text-decoration: none;
}

.lead-insight-row span,
.lead-insight-row b,
.lead-insight-row em,
.lead-insight-row small {
  min-width: 0;
}

.lead-insight-row b,
.lead-insight-row em,
.lead-insight-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-insight-row b {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.lead-insight-row em,
.lead-insight-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 720;
}

.lead-insight-row strong {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.2;
}

.lead-insight-row i {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface-soft));
}

.lead-insight-row i::before {
  display: block;
  width: var(--lead-insight-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--green) 70%, var(--primary)));
  content: "";
}

a.lead-insight-row:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 38%, var(--surface));
}

.lead-insight-empty {
  display: grid;
  place-items: center;
  min-height: 136px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  text-align: center;
  font-size: 12px;
}

.lead-kanban-panel .section-heading {
  margin-bottom: 16px;
}

.lead-kanban-panel .section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.lead-kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.lead-kanban-column {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

.lead-kanban-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 70px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.lead-kanban-column > header span,
.lead-kanban-column > header strong {
  display: block;
}

.lead-kanban-column > header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.lead-kanban-column > header strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.lead-kanban-column > header a,
.lead-kanban-card-actions a,
.lead-kanban-metrics a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}

.lead-kanban-column > header a {
  min-width: 58px;
  padding: 0 10px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 56%, var(--surface));
}

.lead-kanban-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 12px 0;
}

.lead-kanban-metrics a {
  min-height: 28px;
  padding: 0 9px;
  color: color-mix(in srgb, var(--green) 76%, var(--text));
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
}

.lead-kanban-metrics a.is-danger {
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 68%, var(--surface));
}

.lead-kanban-metrics a.is-warn {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber-soft) 68%, var(--surface));
}

.lead-kanban-items {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.lead-kanban-card,
.lead-kanban-column-empty {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.lead-kanban-card {
  display: grid;
  gap: 9px;
  padding: 11px;
}

.lead-kanban-card > strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lead-kanban-card .lead-status-row {
  margin-top: 0;
}

.lead-kanban-card-meta,
.lead-kanban-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lead-kanban-card-meta span,
.lead-kanban-card-meta time {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-kanban-card-actions {
  justify-content: flex-start;
}

.lead-kanban-card-actions a {
  min-width: 52px;
  padding: 0 10px;
  color: var(--text-soft);
  background: var(--surface-soft);
}

.lead-kanban-column-empty {
  margin: 12px;
  padding: 18px 12px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}

.lead-kanban-empty {
  min-height: 180px;
}

.lead-list-panel .section-heading {
  margin-bottom: 16px;
}

.lead-list-panel .section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.lead-empty {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 26px;
  text-align: center;
}

.lead-empty h3 {
  margin: 14px 0 6px;
  font-size: 17px;
}

.lead-empty p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.lead-table-wrap {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.lead-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.lead-table th,
.lead-table td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.lead-table th {
  height: 42px;
  padding-block: 0;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 800;
}

.lead-table th:nth-child(1) { width: 34%; }
.lead-table th:nth-child(2) { width: 22%; }
.lead-table th:nth-child(3) { width: 16%; }
.lead-table th:nth-child(4) { width: 14%; }
.lead-table th:nth-child(5) { width: 14%; }

.lead-table.has-selection th:nth-child(1) { width: 72px; }
.lead-table.has-selection th:nth-child(2) { width: 31%; }
.lead-table.has-selection th:nth-child(3) { width: 21%; }
.lead-table.has-selection th:nth-child(4) { width: 15%; }
.lead-table.has-selection th:nth-child(5) { width: 13%; }
.lead-table.has-selection th:nth-child(6) { width: 13%; }

.lead-table tbody tr:last-child td {
  border-bottom: 0;
}

.lead-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--surface));
}

.lead-main-cell strong,
.lead-link-cell a,
.lead-source-cell span,
.lead-time-cell time {
  display: block;
  color: var(--text);
}

.lead-main-cell strong {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.55;
  text-overflow: ellipsis;
}

.lead-select-cell {
  width: 72px;
}

.lead-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 780;
  user-select: none;
}

.lead-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
}

.lead-check-all {
  min-height: 42px;
}

.lead-field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.lead-contact-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-contact-tools.is-inline {
  margin-top: 10px;
}

.lead-contact-tools span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 7px 6px 9px;
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}

.lead-contact-tools b,
.lead-contact-tools em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-contact-tools b {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--green) 76%, var(--text));
  font-size: 10px;
}

.lead-contact-tools em {
  min-width: 0;
  color: var(--text-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.lead-contact-tools button,
.lead-contact-tools a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 820;
  text-decoration: none;
}

.lead-contact-tools button:hover,
.lead-contact-tools a:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.lead-contact-tools.is-compact {
  gap: 6px;
}

.lead-contact-tools.is-compact button {
  min-height: 28px;
  color: color-mix(in srgb, var(--green) 76%, var(--text));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
}

.lead-quality-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
  font-size: 11px;
  font-weight: 820;
}

.lead-quality-strip b,
.lead-quality-strip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-quality-strip b {
  color: var(--text);
}

.lead-quality-advice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 760px;
  margin-top: 9px;
  padding: 8px 10px;
  border-left: 3px solid color-mix(in srgb, var(--primary) 52%, var(--border));
  border-radius: 8px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--primary-soft) 38%, var(--surface));
  font-size: 11px;
  line-height: 1.55;
}

.lead-quality-advice b {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 10px;
}

.lead-quality-advice span {
  min-width: 0;
  word-break: break-word;
}

.lead-quality-detail {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.lead-quality-detail header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lead-quality-detail header span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

.lead-quality-detail header strong {
  color: var(--text);
  font-size: 12px;
}

.lead-quality-detail p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.lead-quality-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lead-quality-reasons span {
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 760;
}

.lead-quality-strip[data-lead-quality="hot"],
.lead-quality-advice[data-lead-quality="hot"],
.lead-quality-detail[data-lead-quality="hot"] .lead-quality-reasons span:first-child {
  color: color-mix(in srgb, var(--green) 74%, var(--text));
  background: color-mix(in srgb, var(--green) 11%, var(--surface));
}

.lead-quality-strip[data-lead-quality="warm"],
.lead-quality-advice[data-lead-quality="warm"] {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 52%, var(--surface));
}

.lead-quality-strip[data-lead-quality="nurture"],
.lead-quality-advice[data-lead-quality="nurture"] {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber-soft) 62%, var(--surface));
}

.lead-quality-strip[data-lead-quality="risk"],
.lead-quality-advice[data-lead-quality="risk"] {
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 66%, var(--surface));
}

.lead-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.lead-status-row span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 820;
}

.lead-status-row span[data-lead-status="new"] {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
}

.lead-status-row span[data-lead-status="qualified"],
.lead-status-row span[data-lead-status="won"] {
  color: color-mix(in srgb, var(--green) 76%, var(--text));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
}

.lead-status-row span[data-lead-status="lost"],
.lead-status-row span[data-lead-status="spam"] {
  color: var(--muted);
  border-style: dashed;
}

.lead-status-row span[data-lead-priority="high"],
.lead-status-row span[data-lead-priority="urgent"] {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber-soft) 70%, var(--surface));
}

.lead-status-row span[data-lead-priority="urgent"] {
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 68%, var(--surface));
}

.lead-status-row span[data-lead-follow="planned"] {
  color: color-mix(in srgb, var(--green) 70%, var(--text));
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
}

.lead-status-row span[data-lead-follow="overdue"] {
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 72%, var(--surface));
}

.lead-status-row span[data-lead-quality="hot"] {
  color: color-mix(in srgb, var(--green) 76%, var(--text));
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
}

.lead-status-row span[data-lead-quality="warm"] {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
}

.lead-status-row span[data-lead-quality="nurture"] {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber-soft) 68%, var(--surface));
}

.lead-status-row span[data-lead-quality="cold"],
.lead-status-row span[data-lead-quality="risk"] {
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 64%, var(--surface));
}

.lead-status-row span[data-lead-duplicate="1"] {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber-soft) 70%, var(--surface));
}

.lead-status-row span[data-lead-sla="fresh"],
.lead-status-row span[data-lead-sla="planned"] {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 54%, var(--surface));
}

.lead-status-row span[data-lead-sla="warning"] {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber-soft) 70%, var(--surface));
}

.lead-status-row span[data-lead-sla="breached"],
.lead-status-row span[data-lead-sla="stale"] {
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 66%, var(--surface));
}

.lead-status-row span[data-lead-sla="closed"] {
  color: var(--muted);
  border-style: dashed;
}

.lead-field-chips span {
  display: grid;
  gap: 3px;
  min-width: 92px;
  max-width: 160px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
}

.lead-field-chips b,
.lead-field-chips em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-field-chips b {
  color: var(--muted);
  font-size: 10px;
}

.lead-field-chips em {
  color: var(--text-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 720;
}

.lead-link-cell a {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-link-cell small,
.lead-source-cell small {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  text-overflow: ellipsis;
}

.lead-link-cell em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 8px;
  padding: 0 8px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--green) 76%, var(--text));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
}

.lead-source-cell span {
  width: fit-content;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface));
  font-size: 11px;
  font-weight: 800;
}

.lead-time-cell time {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
}

.lead-row:target > td {
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
  box-shadow: inset 3px 0 0 var(--primary);
}

.lead-detail {
  position: relative;
}

.lead-detail summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--surface-raised);
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  list-style: none;
}

.lead-detail summary::-webkit-details-marker {
  display: none;
}

.lead-detail summary:hover,
.lead-detail[open] summary {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface));
}

.lead-detail-panel {
  display: grid;
  gap: 12px;
  min-width: min(100%, 320px);
  margin-top: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.lead-detail-panel dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.lead-detail-panel dl > div {
  display: grid;
  grid-template-columns: minmax(72px, 0.34fr) minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.lead-detail-panel dl > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.lead-detail-panel dt,
.lead-detail-panel dd {
  min-width: 0;
  margin: 0;
  line-height: 1.55;
}

.lead-detail-panel dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.lead-detail-panel dd {
  color: var(--text);
  font-size: 12px;
  word-break: break-word;
}

.lead-detail-meta,
.lead-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-quick-actions {
  --lead-action-columns: 5;
  --lead-action-mobile-columns: 2;
  --lead-action-gap: 7px;
  --lead-action-min-height: 48px;
  --lead-action-padding-y: 6px;
  --lead-action-padding-x: 8px;
  display: grid;
  grid-template-columns: repeat(var(--lead-action-columns), minmax(0, 1fr));
  gap: var(--lead-action-gap);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.lead-quick-actions-cols-1 {
  --lead-action-columns: 1;
}

.lead-quick-actions-cols-2 {
  --lead-action-columns: 2;
}

.lead-quick-actions-cols-3 {
  --lead-action-columns: 3;
}

.lead-quick-actions-cols-4 {
  --lead-action-columns: 4;
}

.lead-quick-actions-cols-5 {
  --lead-action-columns: 5;
}

.lead-quick-actions-cols-6 {
  --lead-action-columns: 6;
}

.lead-quick-actions-mobile-cols-1 {
  --lead-action-mobile-columns: 1;
}

.lead-quick-actions-mobile-cols-2 {
  --lead-action-mobile-columns: 2;
}

.lead-quick-actions-mobile-cols-3 {
  --lead-action-mobile-columns: 3;
}

.lead-quick-actions-density-compact {
  --lead-action-gap: 5px;
  --lead-action-min-height: 42px;
  --lead-action-padding-y: 5px;
  --lead-action-padding-x: 6px;
}

.lead-quick-actions-density-comfortable {
  --lead-action-gap: 9px;
  --lead-action-min-height: 56px;
  --lead-action-padding-y: 8px;
  --lead-action-padding-x: 10px;
}

.lead-quick-actions button {
  --lead-action-tone: var(--primary);
  --lead-action-soft: var(--primary-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: var(--lead-action-min-height);
  padding: var(--lead-action-padding-y) var(--lead-action-padding-x);
  border: 1px solid color-mix(in srgb, var(--lead-action-tone) 18%, var(--border));
  border-radius: 8px;
  color: var(--lead-action-tone);
  background: color-mix(in srgb, var(--lead-action-soft) 46%, var(--surface));
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 820;
}

.lead-quick-action-tone-neutral {
  --lead-action-tone: var(--muted);
  --lead-action-soft: var(--surface-soft);
}

.lead-quick-action-tone-info {
  --lead-action-tone: #1769e0;
  --lead-action-soft: #eaf2ff;
}

.lead-quick-action-tone-warning {
  --lead-action-tone: #a15c00;
  --lead-action-soft: #fff4d6;
}

.lead-quick-action-tone-schedule {
  --lead-action-tone: #0f766e;
  --lead-action-soft: #dcfce7;
}

.lead-quick-action-tone-nurture {
  --lead-action-tone: #6d28d9;
  --lead-action-soft: #f1e8ff;
}

.lead-quick-action-tone-success {
  --lead-action-tone: #047857;
  --lead-action-soft: #dff7ec;
}

.lead-quick-action-tone-danger {
  --lead-action-tone: #b42318;
  --lead-action-soft: #ffe7e4;
}

[data-theme="dark"] .lead-quick-action-tone-info {
  --lead-action-tone: #8bbdff;
  --lead-action-soft: #183659;
}

[data-theme="dark"] .lead-quick-action-tone-warning {
  --lead-action-tone: #ffd166;
  --lead-action-soft: #4a3410;
}

[data-theme="dark"] .lead-quick-action-tone-schedule {
  --lead-action-tone: #5eead4;
  --lead-action-soft: #123d38;
}

[data-theme="dark"] .lead-quick-action-tone-nurture {
  --lead-action-tone: #c4b5fd;
  --lead-action-soft: #32245a;
}

[data-theme="dark"] .lead-quick-action-tone-success {
  --lead-action-tone: #86efac;
  --lead-action-soft: #173d29;
}

[data-theme="dark"] .lead-quick-action-tone-danger {
  --lead-action-tone: #fca5a5;
  --lead-action-soft: #4a1f1f;
}

.lead-quick-action-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.lead-quick-actions button .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.lead-quick-action-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-quick-actions button small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-quick-action-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

.lead-quick-action-meta strong {
  flex: 0 0 auto;
  padding: 1px 4px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--lead-action-tone) 82%, var(--text));
  background: color-mix(in srgb, var(--lead-action-soft) 72%, var(--surface));
  font-size: 9px;
  font-weight: 860;
  line-height: 1.1;
}

.lead-quick-actions button.is-current {
  border-color: color-mix(in srgb, var(--lead-action-tone) 48%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lead-action-tone) 18%, transparent);
}

.lead-quick-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.lead-quick-actions button:hover {
  border-color: color-mix(in srgb, var(--lead-action-tone) 38%, var(--border));
  background: color-mix(in srgb, var(--lead-action-soft) 66%, var(--surface));
}

.lead-quick-actions.is-collapsed .is-quick-action-extra {
  display: none;
}

.lead-quick-actions .lead-quick-actions-toggle {
  grid-column: 1 / -1;
  min-height: 34px;
  padding: 6px 10px;
  border-style: dashed;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
  font-size: 11px;
  font-weight: 800;
}

.lead-quick-actions .lead-quick-actions-toggle:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
}

.lead-detail-meta span {
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 7px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
}

.lead-detail-panel pre {
  overflow: auto;
  max-height: 220px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--surface-soft);
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.lead-follow-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
}

.lead-follow-form .field {
  margin: 0;
}

.lead-follow-form .field-full {
  grid-column: 1 / -1;
}

.lead-follow-form textarea {
  min-height: 86px;
  resize: vertical;
}

.lead-follow-form .button {
  min-height: 44px;
}

.lead-follow-readonly {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.lead-follow-readonly strong,
.lead-follow-readonly p {
  display: block;
  margin: 0;
}

.lead-follow-readonly strong {
  color: var(--text-soft);
  font-size: 11px;
}

.lead-follow-readonly p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.lead-pagination {
  margin-top: 14px;
}

.button.is-disabled {
  pointer-events: none;
  opacity: 0.52;
}

/* v1.2.249 lead management command center polish. */
.lead-section-nav {
  position: sticky;
  top: 12px;
  z-index: 18;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.lead-section-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.lead-section-nav a:hover,
.lead-section-nav a:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
}

.lead-section-nav .icon {
  width: 15px;
  height: 15px;
}

.lead-command-panel {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 42%),
    linear-gradient(315deg, color-mix(in srgb, var(--green) 7%, transparent), transparent 38%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}

.lead-command-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, transparent), transparent 36%);
  opacity: 0.28;
}

.lead-command-head,
.lead-command-grid,
.lead-command-body,
.lead-active-filters {
  position: relative;
  z-index: 1;
}

.lead-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.lead-command-head h2 {
  margin: 5px 0 6px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.lead-command-head p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.lead-command-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  max-width: 520px;
}

.lead-command-actions .button {
  min-height: 42px;
  white-space: nowrap;
}

.lead-command-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.lead-command-card {
  --lead-command-tone: var(--primary);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value"
    "icon hint";
  align-items: center;
  gap: 3px 10px;
  min-width: 0;
  min-height: 118px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--lead-command-tone) 21%, var(--border));
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  text-decoration: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.lead-command-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--lead-command-tone) 42%, var(--border));
  background: color-mix(in srgb, var(--lead-command-tone) 7%, var(--surface-raised));
}

.lead-command-card[data-tone="warning"] {
  --lead-command-tone: var(--amber);
}

.lead-command-card[data-tone="danger"] {
  --lead-command-tone: var(--red);
}

.lead-command-card[data-tone="success"] {
  --lead-command-tone: var(--green);
}

.lead-command-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: var(--lead-command-tone);
  background: color-mix(in srgb, var(--lead-command-tone) 12%, var(--surface));
}

.lead-command-icon .icon {
  width: 18px;
  height: 18px;
}

.lead-command-card small {
  grid-area: label;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-command-card strong {
  grid-area: value;
  overflow: hidden;
  color: var(--text);
  font-size: 26px;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-command-card em {
  grid-area: hint;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-command-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 14px;
}

.lead-command-queues {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.lead-command-queue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon label count"
    "icon hint hint";
  align-items: center;
  gap: 2px 8px;
  min-height: 58px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 8px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.lead-command-queue:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface));
}

.lead-command-queue .icon {
  grid-area: icon;
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.lead-command-queue span {
  grid-area: label;
  overflow: hidden;
  font-size: 12px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-command-queue strong {
  grid-area: count;
  color: var(--primary);
  font-size: 12px;
}

.lead-command-queue small {
  grid-area: hint;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-command-tips {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 20%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--amber-soft) 36%, var(--surface));
}

.lead-command-tips strong {
  color: var(--text);
  font-size: 12px;
}

.lead-command-tips p {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.55;
}

.lead-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-top: 2px;
}

.lead-active-filters strong,
.lead-active-filters span,
.lead-active-filters a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
  text-decoration: none;
}

.lead-active-filters strong {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
}

.lead-active-filters span {
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
}

.lead-active-filters a {
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 52%, var(--surface));
}

.lead-selection-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 54;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(960px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 8px;
  color: var(--text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: 0 18px 42px color-mix(in srgb, #000 18%, transparent);
  backdrop-filter: blur(16px);
  animation: lead-dock-pop 0.2s ease both;
}

.lead-selection-dock[hidden] {
  display: none;
}

.lead-selection-dock strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 13px;
}

.lead-selection-dock b {
  color: var(--primary);
  font-size: 18px;
}

.lead-selection-dock > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-selection-dock > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.lead-selection-dock .button {
  min-height: 38px;
}

body.lead-selection-active .app-back-top {
  bottom: 92px;
}

@keyframes lead-dock-pop {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.leads-content > section {
  animation: lead-panel-rise 0.22s ease both;
}

@keyframes lead-panel-rise {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

body[data-ui-motion-enabled="0"] .leads-content > section {
  animation: none;
}

body[data-ui-motion-enabled="0"] .lead-command-card,
body[data-ui-motion-enabled="0"] .lead-command-queue {
  transition: none;
}

body[data-ui-motion-enabled="0"] .lead-command-card:hover,
body[data-ui-motion-enabled="0"] .lead-command-queue:hover {
  transform: none;
}

body[data-ui-motion-enabled="0"] .lead-selection-dock {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .leads-content > section {
    animation: none;
  }

  .lead-command-card,
  .lead-command-queue,
  .lead-section-nav a {
    transition: none;
  }

  .lead-command-card:hover,
  .lead-command-queue:hover,
  .lead-section-nav a:hover {
    transform: none;
  }

  .lead-selection-dock {
    animation: none;
  }
}

@media (max-width: 1240px) {
  .lead-command-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lead-command-queues {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .lead-command-head,
  .lead-command-body {
    grid-template-columns: 1fr;
  }

  .lead-command-head {
    display: grid;
  }

  .lead-command-actions {
    justify-content: flex-start;
    max-width: none;
  }

  .lead-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-command-queues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .lead-section-nav {
    top: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px;
    scroll-snap-type: x proximity;
  }

  .lead-section-nav a {
    flex: 0 0 auto;
    min-height: 40px;
    scroll-snap-align: start;
  }

  .lead-command-panel {
    gap: 13px;
    padding: 14px;
  }

  .lead-command-head h2 {
    font-size: 20px;
  }

  .lead-command-actions,
  .lead-command-actions .button,
  .lead-copy-button {
    width: 100%;
  }

  .lead-command-grid,
  .lead-command-queues {
    grid-template-columns: 1fr;
  }

  .lead-command-card {
    min-height: 96px;
    padding: 12px;
  }

  .lead-command-card strong {
    font-size: 24px;
  }

  .lead-command-queue {
    min-height: 54px;
  }

  .lead-active-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .lead-active-filters strong,
  .lead-active-filters span,
  .lead-active-filters a {
    flex: 0 0 auto;
  }

  .lead-selection-dock {
    right: 10px;
    bottom: 10px;
    left: 10px;
    grid-template-columns: 1fr;
    width: auto;
    gap: 8px;
    padding: 10px;
  }

  .lead-selection-dock > span {
    white-space: normal;
  }

  .lead-selection-dock > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .lead-selection-dock .button {
    width: 100%;
    min-height: 42px;
  }

  body.lead-selection-active .app-back-top {
    bottom: 156px;
  }
}

@media (max-width: 1180px) {
  .lead-hero {
    grid-template-columns: 1fr;
  }

  .lead-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lead-filter-form .field-full {
    grid-column: 1 / -1;
  }

  .lead-bulk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lead-bulk-grid .field-full {
    grid-column: 1 / -1;
  }

  .lead-bulk-submit {
    grid-column: 1 / -1;
  }

  .lead-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-sla-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-duplicate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-insight-card.is-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .lead-hero,
  .lead-filter-panel,
  .lead-sla-panel,
  .lead-insights-panel,
  .lead-duplicate-panel,
  .lead-kanban-panel,
  .lead-list-panel,
  .lead-disabled {
    padding: 18px;
  }

  .lead-hero-copy h1 {
    font-size: 28px;
  }

  .lead-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-filter-form {
    grid-template-columns: 1fr;
  }

  .lead-filter-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lead-filter-actions .button {
    width: 100%;
  }

  .lead-bulk-form {
    padding: 12px;
  }

  .lead-bulk-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .lead-bulk-actions,
  .lead-bulk-actions .button {
    width: 100%;
  }

  .lead-bulk-grid {
    grid-template-columns: 1fr;
  }

  .lead-bulk-submit .button {
    width: 100%;
  }

  .lead-insights-grid {
    grid-template-columns: 1fr;
  }

  .lead-sla-grid {
    grid-template-columns: 1fr;
  }

  .lead-sla-warning {
    min-height: 44px;
  }

  .lead-sla-detail header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .lead-sla-metrics span {
    min-height: 32px;
  }

  .lead-duplicate-grid {
    grid-template-columns: 1fr;
  }

  .lead-duplicate-warning {
    min-height: 44px;
  }

  .lead-duplicate-card p {
    white-space: normal;
    word-break: break-word;
  }

  .lead-insight-card.is-wide {
    grid-column: auto;
  }

  .lead-insight-row {
    min-height: 64px;
  }

  .lead-kanban-board {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .lead-kanban-column {
    flex: 0 0 min(86vw, 320px);
    scroll-snap-align: start;
  }

  .lead-kanban-column > header a,
  .lead-kanban-card-actions a {
    min-height: 44px;
  }

  .lead-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .lead-table,
  .lead-table tbody {
    display: block;
  }

  .lead-table thead {
    display: none;
  }

  .lead-table tbody {
    display: grid;
    gap: 10px;
  }

  .lead-table tbody tr {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .lead-table th,
  .lead-table td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .lead-select-cell {
    width: auto;
  }

  .lead-check {
    min-height: 44px;
    width: fit-content;
  }

  .lead-field-chips span {
    min-width: min(100%, 132px);
  }

  .lead-contact-tools span {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-height: 44px;
  }

  .lead-contact-tools b {
    grid-column: 1 / -1;
  }

  .lead-contact-tools button,
  .lead-contact-tools a {
    min-height: 36px;
  }

  .lead-quality-strip {
    min-height: 36px;
  }

  .lead-quality-advice {
    min-height: 44px;
  }

  .lead-quality-detail header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .lead-quality-reasons span {
    min-height: 32px;
  }

  .lead-detail summary {
    width: 100%;
    min-height: 44px;
  }

  .lead-detail-panel {
    min-width: 0;
  }

  .lead-detail-actions .button {
    width: 100%;
  }

  .lead-quick-actions {
    grid-template-columns: repeat(var(--lead-action-mobile-columns), minmax(0, 1fr));
  }

  .lead-quick-actions button {
    min-height: max(50px, var(--lead-action-min-height));
  }

  .lead-follow-form {
    grid-template-columns: 1fr;
  }

  .lead-follow-form .button {
    width: 100%;
  }

  .lead-pagination {
    align-items: stretch;
  }

  .lead-pagination .page-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
}

@media (max-width: 430px) {
  .lead-hero-stats {
    grid-template-columns: 1fr;
  }

  .lead-hero-stats article {
    min-height: 84px;
  }

  .lead-field-chips {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lead-field-chips span {
    max-width: none;
  }
}

/* v1.2.135: settings console layout and configurable footer compliance. */
.settings-page .settings-hero {
  align-items: stretch;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 0.82fr) minmax(330px, 0.88fr);
  gap: 18px;
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 42%, var(--surface)) 0%, var(--surface) 48%, color-mix(in srgb, var(--cyan) 5%, var(--surface)) 100%),
    var(--surface);
}

.settings-hero-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.settings-hero-copy p {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.72;
}

.settings-page .settings-search {
  align-self: center;
  min-height: 50px;
  border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.settings-page.settings-search-focused .settings-search,
.settings-page.settings-is-searching .settings-search {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: var(--surface);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 10%, transparent);
}

.settings-page .settings-mode-grid {
  align-self: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-page .settings-mode-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 72px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--primary) 10%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 86%, transparent)),
    var(--surface-raised);
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease;
}

.settings-page .settings-mode-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: color-mix(in srgb, var(--primary) 72%, var(--cyan));
  content: "";
  opacity: 0.62;
}

.settings-page .settings-mode-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--text) 6%, transparent);
}

.settings-page .settings-mode-card small {
  font-weight: 760;
  letter-spacing: 0;
}

.settings-page .settings-mode-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-page .settings-tabs button {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

.settings-page .settings-tabs button::before {
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--primary);
  content: "";
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 180ms ease, transform 180ms var(--ease);
}

.settings-page .settings-tabs button:hover {
  border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
}

.settings-page .settings-tabs button.is-active::before {
  opacity: 1;
  transform: translateX(0);
}

.settings-page .settings-panel {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 8%, var(--border));
}

.settings-page .settings-panel.is-entering {
  animation: settings-panel-pop 280ms var(--ease) both;
}

.settings-page .settings-subnav button.is-active {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 64%, var(--surface));
  color: var(--primary);
}

.settings-page .setting-row {
  position: relative;
  overflow: hidden;
}

.settings-page .setting-row::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--primary);
  content: "";
  opacity: 0;
  transition: opacity 180ms ease;
}

.settings-page .setting-row:hover::before,
.settings-page .setting-row:focus-within::before {
  opacity: 0.78;
}

.settings-page .setting-row:focus-within {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 18%, var(--surface));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 8%, transparent);
}

.front-footer-compliance {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 88%, transparent)),
    var(--surface-raised);
}

.front-footer-compliance > strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.front-footer-compliance > div {
  display: grid;
  gap: 8px;
}

.front-footer-compliance div > a,
.front-footer-compliance div > span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
  gap: 8px;
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
  transition: transform 180ms var(--ease), border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.front-footer-compliance div > a:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 44%, var(--surface));
  color: var(--primary);
}

.front-footer-compliance .icon {
  justify-self: center;
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.front-footer-compliance span span,
.front-footer-compliance a span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@keyframes settings-panel-pop {
  from { opacity: 0.72; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) {
  .settings-page .settings-hero {
    grid-template-columns: 1fr;
  }

  .settings-page .settings-mode-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .settings-page .settings-hero {
    gap: 14px;
    padding: 18px;
  }

  .settings-page .settings-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-page .settings-mode-card,
  .front-footer-compliance div > a,
  .front-footer-compliance div > span {
    min-height: 44px;
  }
}

@media (max-width: 430px) {
  .settings-page .settings-mode-grid {
    grid-template-columns: 1fr;
  }

  .settings-hero-copy p {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-page .settings-panel.is-entering {
    animation: none;
  }

  .settings-page .settings-mode-card:hover,
  .settings-page .setting-row:focus-within,
  .front-footer-compliance div > a:hover {
    transform: none;
  }
}

/* v1.2.136: settings guide cards and switch overview. */
.settings-guide {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 78%, transparent)),
    var(--surface);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--text) 4%, transparent);
}

.settings-guide > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-guide h2 {
  margin: 5px 0 0;
  font-size: 20px;
  line-height: 1.25;
}

.settings-guide p {
  margin: 7px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

.settings-guide-summary {
  display: grid;
  min-width: 116px;
  min-height: 58px;
  place-items: center;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
  text-align: center;
}

.settings-guide-summary strong {
  color: var(--primary);
  font-size: 18px;
  line-height: 1.1;
}

.settings-guide-summary small {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 760;
}

.settings-guide-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.settings-guide-grid button {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  min-height: 118px;
  gap: 9px 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.settings-guide-grid button::after {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 56%, transparent);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: right center;
  transition: opacity 180ms ease, transform 180ms var(--ease);
}

.settings-guide-grid button:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 26%, var(--surface));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--text) 6%, transparent);
}

.settings-guide-grid button:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.settings-guide-grid button > span {
  display: grid;
  grid-row: span 3;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
}

.settings-guide-grid .icon {
  width: 16px;
  height: 16px;
}

.settings-guide-grid strong,
.settings-guide-grid small,
.settings-guide-grid em {
  min-width: 0;
}

.settings-guide-grid strong {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-guide-grid small {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.5;
}

.settings-guide-grid em {
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--primary) 72%, var(--text-soft));
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
}

@media (max-width: 1280px) {
  .settings-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .settings-guide {
    padding: 14px;
  }

  .settings-guide > header {
    display: grid;
  }

  .settings-guide-summary {
    justify-self: stretch;
  }

  .settings-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-guide-grid button {
    min-height: 132px;
  }
}

@media (max-width: 430px) {
  .settings-guide-grid {
    grid-template-columns: 1fr;
  }

  .settings-guide-grid button {
    min-height: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-guide-grid button:hover {
    transform: none;
  }
}



/* v1.2.140 basic SaaS operations */
.target-line {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  max-width: 100%;
}

.link-status-dot {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.link-status-dot.is-ok {
  border-color: color-mix(in srgb, var(--green) 36%, var(--border));
  background: var(--green-soft);
  color: var(--green);
}

.link-status-dot.is-redirect {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  background: var(--warning-soft);
  color: var(--warning);
}

.link-status-dot.is-danger {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
}

.link-status-dot.is-pending span {
  width: 6px;
  height: 6px;
  overflow: hidden;
  border-radius: 50%;
  background: currentColor;
  text-indent: -999px;
}

.links-table.is-column-note-hidden .link-note-inline,
.links-table.is-column-group-hidden .link-group-badges,
.links-table.is-column-expires-hidden .expires-inline,
.links-table.is-column-star-hidden .star-mark {
  display: none !important;
}

.column-manager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.column-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.column-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.trash-empty-open {
  border-color: color-mix(in srgb, var(--danger) 46%, var(--border));
}

.trash-empty-summary,
.batch-edit-preview,
.profile-2fa-box {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text-soft);
  font-size: 12px;
}

.trash-empty-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trash-empty-summary span,
.batch-edit-preview-row,
.profile-session-row,
.scheduled-export-row {
  min-width: 0;
}

.batch-edit-preview-row {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.batch-edit-preview-row:first-child {
  border-top: 0;
}

.batch-edit-preview-row p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.profile-panel,
.scheduled-export-panel {
  width: min(920px, calc(100vw - 32px));
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-card,
.scheduled-export-create,
.scheduled-export-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.profile-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-card-head h3 {
  margin: 0;
}

.profile-card-wide {
  grid-column: 1 / -1;
}

.profile-security-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 38%, var(--surface-soft)), var(--surface-soft));
}

.profile-security-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.profile-security-head h3 {
  margin: 0;
}

.profile-security-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.profile-security-score {
  display: grid;
  place-items: center;
  min-width: 84px;
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.profile-security-score strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.profile-security-score span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.profile-security-score.is-success {
  border-color: rgba(22, 163, 74, .3);
}

.profile-security-score.is-warning {
  border-color: rgba(202, 138, 4, .36);
}

.profile-security-score.is-danger {
  border-color: rgba(220, 38, 38, .36);
}

.profile-security-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.profile-security-metric {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.profile-security-metric span,
.profile-security-metric strong {
  display: block;
}

.profile-security-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.profile-security-metric strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.1;
}

.profile-security-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-security-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.profile-security-item > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.profile-security-item.is-success > span {
  color: #15803d;
  background: rgba(22, 163, 74, .1);
}

.profile-security-item.is-warning > span {
  color: #a16207;
  background: rgba(202, 138, 4, .12);
}

.profile-security-item.is-danger > span {
  color: #b91c1c;
  background: rgba(220, 38, 38, .1);
}

.profile-security-item strong {
  display: block;
}

.profile-security-item p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.profile-security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-activity-card .profile-card-head {
  align-items: flex-start;
}

.profile-activity-card .profile-card-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.profile-activity-card .profile-card-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.profile-activity-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-activity-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.profile-activity-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-soft);
}

.profile-activity-icon .icon {
  width: 17px;
  height: 17px;
}

.profile-activity-item strong,
.profile-activity-item p,
.profile-activity-item time {
  min-width: 0;
}

.profile-activity-item strong {
  display: block;
  color: var(--text);
}

.profile-activity-item p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.profile-activity-item time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-align: right;
  white-space: nowrap;
}

.profile-activity-item.is-success .profile-activity-icon {
  color: #15803d;
  background: rgba(22, 163, 74, .1);
}

.profile-activity-item.is-warning .profile-activity-icon {
  color: #a16207;
  background: rgba(202, 138, 4, .12);
}

.profile-activity-item.is-danger .profile-activity-icon {
  color: #b91c1c;
  background: rgba(220, 38, 38, .1);
}

.profile-activity-empty {
  margin: 0;
  min-height: 44px;
  color: var(--muted);
  font-size: 13px;
}

.profile-identity,
.profile-session-row,
.scheduled-export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-session-list,
.scheduled-export-list {
  display: grid;
  gap: 10px;
}

.profile-session-row small,
.scheduled-export-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.profile-session-row > span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.profile-session-row > span > .icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.profile-2fa-url {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
}

.profile-2fa-setup {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.profile-2fa-qr {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}

.profile-2fa-qr svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.profile-recovery-codes {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--warning-border, var(--border));
  border-radius: 8px;
  background: var(--warning-soft, var(--surface-soft));
}

.profile-recovery-codes > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-recovery-codes code,
.scheduled-export-cron code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.profile-recovery-codes p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.scheduled-export-cron {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--surface-soft);
}

.scheduled-export-cron span {
  font-weight: 700;
}

.scheduled-export-create {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.auth-2fa-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.totp-code-input {
  letter-spacing: 0.18em;
  text-align: center;
  font-weight: 800;
}

@media (max-width: 720px) {
  .link-status-dot {
    min-width: 18px;
    width: 18px;
    height: 18px;
    padding: 0;
  }

  .link-status-dot span {
    width: 7px;
    height: 7px;
    overflow: hidden;
    border-radius: 50%;
    background: currentColor;
    text-indent: -999px;
  }

  .column-manager-grid,
  .profile-grid,
  .profile-security-head,
  .profile-security-metrics,
  .profile-security-list,
  .profile-2fa-setup,
  .profile-recovery-codes > div,
  .scheduled-export-create,
  .scheduled-export-cron,
  .trash-empty-summary {
    grid-template-columns: 1fr;
  }

  .column-toggle,
  .profile-card button,
  .profile-security-actions .button,
  .profile-recovery-codes button,
  .scheduled-export-row button,
  .scheduled-export-row a,
  .scheduled-export-cron button,
  .scheduled-export-create button,
  .trash-empty-open,
  [data-batch-operation="edit"] {
    min-height: 44px;
  }

  .profile-dialog .modal-panel,
  .scheduled-export-dialog .modal-panel,
  #batchEditDialog .prompt-panel,
  #columnManagerDialog .prompt-panel,
  #trashEmptyDialog .prompt-panel {
    width: 100vw;
    max-width: 100vw;
    max-height: 88vh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    overflow: auto;
  }

  .profile-identity,
  .profile-card-head,
  .profile-activity-item,
  .profile-session-row,
  .scheduled-export-row {
    align-items: stretch;
  }

  .profile-identity,
  .profile-card-head,
  .profile-session-row,
  .scheduled-export-row {
    flex-direction: column;
  }

  .profile-activity-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .profile-activity-item time {
    grid-column: 2;
    text-align: left;
    white-space: normal;
  }

  .profile-security-score {
    min-height: 64px;
  }

  .scheduled-export-row > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }
}

@media (max-width: 390px) {
  .profile-activity-item,
  .profile-security-item {
    grid-template-columns: 1fr;
  }

  .profile-activity-item time {
    grid-column: auto;
  }

  .profile-security-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .profile-security-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* v1.2.143: fully editable homepage footer polish. */
.front-footer > .front-footer-shell {
  align-items: start;
}

.front-footer-notice,
.front-footer-links a,
.front-footer-badges > div,
.front-footer-compliance div > a,
.front-footer-compliance div > span {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 5%, transparent);
}

.front-footer-notice a,
.front-footer-actions .button,
.front-footer-links a,
.front-footer-compliance div > a,
.front-footer-compliance div > span {
  min-height: 44px;
}

.front-footer-links a,
.front-footer-compliance div > a,
.front-footer-compliance div > span {
  align-content: center;
}

.front-footer-links span,
.front-footer-meta > *,
.front-footer-badges strong,
.front-footer-compliance span span,
.front-footer-compliance a span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.front-footer-links span {
  display: block;
  overflow: visible;
  line-height: 1.3;
  text-overflow: clip;
  white-space: normal;
}

.front-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.front-footer-meta > * {
  max-width: 100%;
}

@media (max-width: 720px) {
  .front-footer > .front-footer-shell {
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
  }

  .front-footer-notice {
    align-items: start;
    padding: 13px;
  }

  .front-footer-notice a,
  .front-footer-actions .button {
    width: 100%;
    justify-content: center;
  }

  .front-footer-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .front-footer-links > div,
  .front-footer-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-footer-links a,
  .front-footer-compliance div > a,
  .front-footer-compliance div > span {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 7px 10px 7px 6px;
  }

  .front-footer-meta {
    gap: 8px;
  }
}

@media (max-width: 430px) {
  .front-footer > .front-footer-shell {
    width: min(calc(100% - 22px), 390px);
  }

  .front-footer-notice,
  .front-footer-links > div,
  .front-footer-badges {
    grid-template-columns: 1fr;
  }

  .front-footer-notice > span {
    display: none;
  }

  .front-footer-notice a {
    grid-column: 1;
  }

  .front-footer-badges > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
  }

  .front-footer-badges small,
  .front-footer-badges strong {
    margin-top: 0;
  }

  .front-footer-badges strong {
    font-size: 16px;
  }
}

@media (max-width: 430px) {
  .front-footer > .front-footer-shell {
    width: min(calc(100% - 22px), 390px);
  }

  .front-footer-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .front-footer-actions .button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
}

@media (max-width: 390px) {
  .front-footer-brand p,
  .front-footer-notice p {
    font-size: 12px;
  }

  .front-footer-links a,
  .front-footer-compliance div > a,
  .front-footer-compliance div > span {
    font-size: 11px;
  }
}

/* Homepage contact float. */
.public-page.has-front-contact-float {
  --front-contact-float-bottom: 92px;
}

.front-contact-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--front-contact-float-bottom, 92px) + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: grid;
  gap: 12px;
  width: min(340px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--text) 14%, transparent);
  color: var(--text);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.front-contact-float-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.front-contact-float-mark,
.front-contact-float-items .icon,
.front-contact-float-static .icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-soft));
  color: var(--primary);
}

.front-contact-float-mark .icon {
  width: 18px;
  height: 18px;
}

.front-contact-float-head strong {
  display: block;
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.front-contact-float-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.front-contact-float-items {
  display: grid;
  gap: 8px;
}

.front-contact-float-items a,
.front-contact-float-items button,
.front-contact-float-static {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  min-height: 44px;
  width: 100%;
  padding: 6px 9px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text-soft);
  font: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 5%, transparent);
}

.front-contact-float-items button {
  cursor: pointer;
}

.front-contact-float-items a:hover,
.front-contact-float-items button:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  color: var(--primary);
  transform: translateY(-1px);
}

.front-contact-float-items span:not(.spinner),
.front-contact-float-items small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.front-contact-float-items > a > span,
.front-contact-float-items > button > span:not(.spinner),
.front-contact-float-static > span {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.front-contact-float-items small {
  grid-column: 2;
  margin-top: -6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.front-contact-float-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.front-contact-float-actions .button {
  min-height: 44px;
  width: 100%;
  justify-content: center;
  padding-right: 10px;
  padding-left: 10px;
  overflow-wrap: anywhere;
}

.front-contact-float-actions .button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-theme="dark"] .front-contact-float {
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

@media (max-width: 720px) {
  .public-page.has-front-contact-float {
    padding-bottom: calc(182px + env(safe-area-inset-bottom, 0px));
  }

  .front-contact-float {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    width: auto;
    padding: 10px;
  }

  .front-contact-float-head {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .front-contact-float-mark {
    width: 32px;
    height: 32px;
  }

  .front-contact-float-head p {
    display: none;
  }

  .front-contact-float-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .front-contact-float-items a,
  .front-contact-float-items button,
  .front-contact-float-static {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px 8px;
    padding: 6px;
  }

  .front-contact-float-items .icon,
  .front-contact-float-static .icon {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 430px) {
  .public-page.has-front-contact-float {
    padding-bottom: calc(208px + env(safe-area-inset-bottom, 0px));
  }

  .front-contact-float {
    gap: 9px;
  }

  .front-contact-float-items {
    grid-template-columns: 1fr;
    max-height: 168px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .front-contact-float-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 390px) {
  .front-contact-float-head strong {
    font-size: 14px;
  }

  .front-contact-float-items > a > span,
  .front-contact-float-items > button > span:not(.spinner),
  .front-contact-float-static > span,
  .front-contact-float-actions .button {
    font-size: 12px;
  }
}

.feature-page .content {
  display: grid;
  gap: 18px;
}

.feature-hero,
.feature-panel,
.feature-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.feature-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
}

.feature-hero h1,
.feature-panel h2,
.feature-card h3 {
  margin: 0;
  letter-spacing: 0;
}

.feature-hero p,
.feature-panel p,
.feature-card p,
.feature-muted {
  color: var(--muted);
}

.feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.feature-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.feature-panel {
  padding: 18px;
}

.feature-card {
  padding: 16px;
}

.feature-review-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.feature-review-card strong {
  display: block;
}

.feature-review-card p {
  margin: 4px 0 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.feature-review-card .feature-pre {
  max-height: 220px;
  background: var(--surface);
}

.feature-list {
  display: grid;
  gap: 12px;
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.feature-row code,
.feature-code {
  display: block;
  max-width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-wrap: anywhere;
  background: var(--surface-soft);
}

.feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.feature-step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.feature-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.feature-step > span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.feature-step strong {
  display: block;
}

.feature-step p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.feature-permission-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.feature-permission {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.feature-permission strong {
  display: block;
}

.feature-permission span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--primary);
  background: var(--surface);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.feature-permission p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.feature-scope {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.feature-scope strong {
  display: block;
}

.feature-scope p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.feature-scope .feature-actions {
  margin-top: 0;
}

.feature-pill,
.risk-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
}

.feature-pill.is-success {
  color: #15803d;
  border-color: rgba(22, 163, 74, .34);
  background: rgba(22, 163, 74, .08);
}

.feature-pill.is-warning {
  color: #a16207;
  border-color: rgba(202, 138, 4, .35);
  background: rgba(202, 138, 4, .1);
}

.feature-pill.is-danger {
  color: #b91c1c;
  border-color: rgba(220, 38, 38, .34);
  background: rgba(220, 38, 38, .08);
}

.risk-pill.is-high {
  color: #b91c1c;
  border-color: rgba(220, 38, 38, .32);
  background: rgba(220, 38, 38, .08);
}

.risk-pill.is-mid {
  color: #a16207;
  border-color: rgba(202, 138, 4, .35);
  background: rgba(202, 138, 4, .1);
}

.feature-form {
  display: grid;
  gap: 12px;
}

.feature-form .field {
  display: grid;
  gap: 6px;
}

.feature-inline-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.feature-inline-form .field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.feature-inline-form input {
  min-height: 44px;
}

.feature-form textarea {
  min-height: 132px;
  resize: vertical;
}

.feature-table {
  display: grid;
  gap: 10px;
}

.feature-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.feature-stat {
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.feature-stat small,
.feature-note {
  color: var(--muted);
}

.feature-stat strong {
  font-size: 24px;
  letter-spacing: 0;
}

.feature-readiness-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.feature-readiness-head .feature-pill {
  min-height: 34px;
  font-weight: 750;
}

.feature-readiness-stats {
  margin-top: 14px;
}

.feature-readiness-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.feature-readiness-item {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.feature-readiness-item > span {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

.feature-readiness-item.is-success > span {
  color: #15803d;
  background: rgba(22, 163, 74, .1);
}

.feature-readiness-item.is-warning > span {
  color: #a16207;
  background: rgba(202, 138, 4, .12);
}

.feature-readiness-item.is-danger > span {
  color: #b91c1c;
  background: rgba(220, 38, 38, .1);
}

.feature-readiness-item strong {
  display: block;
}

.feature-readiness-item p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.feature-details {
  display: grid;
  gap: 12px;
}

.feature-details summary {
  cursor: pointer;
  font-weight: 750;
}

.feature-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.feature-check-list {
  display: grid;
  gap: 8px;
}

.feature-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.feature-check input {
  margin-top: 4px;
}

.feature-check strong {
  display: block;
}

.feature-check small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.feature-pre {
  max-height: 340px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feature-variable-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature-variable-bar button {
  min-height: 36px;
}

.feature-risk-bar {
  position: relative;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.feature-risk-bar span {
  display: block;
  height: 100%;
  width: var(--risk-width, 0%);
  background: linear-gradient(90deg, #16a34a, #eab308, #dc2626);
}

.feature-toast {
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 120;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.feature-toast.is-error {
  color: #b91c1c;
  border-color: rgba(220, 38, 38, .34);
  background: color-mix(in srgb, var(--surface) 90%, #fee2e2);
}

.feature-empty {
  padding: 22px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 720px) {
  .feature-hero,
  .feature-grid,
  .feature-review-grid,
  .feature-stat-grid,
  .feature-control-grid,
  .feature-inline-form,
  .feature-step-list,
  .feature-permission-list,
  .feature-readiness-head,
  .feature-readiness-list,
  .feature-row {
    grid-template-columns: 1fr;
  }

  .feature-actions,
  .feature-row .feature-actions {
    width: 100%;
  }

  .feature-actions .button,
  .feature-actions button,
  .feature-actions a {
    min-height: 44px;
  }

  .feature-check {
    min-height: 44px;
  }

  .feature-readiness-head .feature-pill,
  .feature-readiness-item > span {
    min-height: 44px;
  }
}

@media (max-width: 430px) {
  .feature-hero,
  .feature-panel,
  .feature-card {
    padding: 14px;
  }

  .feature-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .feature-inline-form .button,
  .feature-inline-form button {
    width: 100%;
  }

  .feature-actions .button,
  .feature-actions button,
  .feature-actions a {
    width: 100%;
  }

  .feature-toast {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 390px) {
  .feature-hero h1 {
    font-size: 24px;
  }

  .feature-card h3,
  .feature-panel h2 {
    font-size: 18px;
  }
}

@media (max-width: 430px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .topbar-title {
    display: none;
  }

  .topbar-actions {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .topbar-actions > * {
    flex-shrink: 0;
  }

  .topbar-actions > .icon-button,
  .topbar-actions > .button {
    min-width: 44px;
    min-height: 44px;
  }

  .topbar-actions::-webkit-scrollbar {
    display: none;
  }
}

/* v1.2.205: compact, task-first log center layout. */
.page-shell-logs {
  gap: 16px;
}

.page-shell-logs > .page-shell-head {
  align-items: center;
  gap: 18px;
  padding-bottom: 15px;
}

.page-shell-logs .page-shell-kicker {
  min-height: 24px;
  padding-inline: 9px;
}

.page-shell-logs .page-shell-head h1 {
  margin-top: 8px;
  font-size: clamp(26px, 2.7vw, 33px);
}

.page-shell-logs .page-shell-head p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
}

.page-shell-logs .page-shell-actions {
  gap: 8px;
}

.page-shell-logs .page-shell-actions .button {
  min-height: 40px;
}

.page-shell-logs .log-overview-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.page-shell-logs .log-overview-card {
  align-content: center;
  min-height: 88px;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 5%, transparent);
}

.page-shell-logs .log-overview-card strong {
  font-size: 24px;
}

.page-shell-logs .log-overview-card span {
  font-size: 12px;
  font-weight: 850;
}

.page-shell-logs .log-overview-card small {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell-logs .log-overview-card-alerts {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--danger) 7%, transparent), color-mix(in srgb, var(--warning) 5%, transparent)),
    color-mix(in srgb, var(--surface-raised) 96%, transparent);
}

.page-shell-logs .log-health-panel {
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--text) 5%, transparent);
}

.page-shell-logs .log-health-panel > header {
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
}

.page-shell-logs .log-health-panel.is-collapsed > header {
  border-bottom-color: transparent;
}

.page-shell-logs .log-health-heading {
  min-width: 0;
}

.page-shell-logs .log-health-heading h2 {
  margin-top: 3px;
  font-size: 18px;
}

.page-shell-logs .log-health-heading p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
}

.page-shell-logs .log-health-summary {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.page-shell-logs .log-health-score {
  display: flex;
  align-items: center;
  gap: 7px;
}

.page-shell-logs .log-health-score > strong {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  font-size: 23px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 16%, transparent);
}

.page-shell-logs .log-health-score > small {
  padding: 4px 8px;
}

.page-shell-logs .log-health-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.page-shell-logs .log-health-actions .button {
  min-height: 38px;
  padding-inline: 10px;
}

.page-shell-logs .log-health-toggle svg {
  transition: transform 180ms var(--ease);
}

.page-shell-logs .log-health-toggle.is-collapsed svg {
  transform: rotate(-90deg);
}

.page-shell-logs .log-health-content[hidden] {
  display: none;
}

.page-shell-logs .log-health-content {
  border-top: 1px solid var(--border);
}

.page-shell-logs .log-health-metrics article,
.page-shell-logs .log-health-details article,
.page-shell-logs .log-health-lists article {
  padding: 12px 14px;
}

.page-shell-logs .log-health-metrics strong {
  font-size: 24px;
}

.page-shell-logs .log-toolbar {
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 95%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--text) 5%, transparent);
}

.page-shell-logs .log-search,
.page-shell-logs .log-filter-group {
  min-height: 42px;
  border-radius: 7px;
}

.page-shell-logs .log-search {
  padding-inline: 11px;
}

.page-shell-logs .log-filter-group {
  gap: 3px;
  padding: 3px;
}

.page-shell-logs .log-filter-group button {
  min-height: 34px;
  padding-inline: 10px;
  border-radius: 6px;
  font-size: 12px;
}

.page-shell-logs .log-section-nav {
  position: sticky;
  top: 82px;
  z-index: 8;
  gap: 6px;
  padding: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 6%, transparent);
  backdrop-filter: blur(14px);
}

.page-shell-logs .log-section-nav a {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 6px;
}

.page-shell-logs .log-section-nav b {
  text-align: right;
}

.page-shell-logs .log-panel,
.page-shell-logs .log-file-index,
.page-shell-logs .log-issue-digest,
.page-shell-logs .debug-log-section {
  border-radius: 8px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 5%, transparent);
}

.page-shell-logs .log-utility-head {
  padding: 10px 12px;
  border-radius: 8px;
}

.page-shell-logs .log-panel-head,
.page-shell-logs .log-issue-digest > header,
.page-shell-logs .log-file-index > header {
  padding: 14px 16px;
}

.page-shell-logs .log-panel-head h2,
.page-shell-logs .log-issue-digest h2,
.page-shell-logs .debug-log-section-head h2 {
  font-size: 18px;
}

.page-shell-logs .log-empty-state,
.page-shell-logs .log-issue-empty {
  padding: 16px;
}

.page-shell-logs .document-workspace-hero {
  align-items: center;
  padding: 14px 16px;
}

.page-shell-logs .document-workspace-title h2 {
  font-size: 20px;
}

.page-shell-logs .document-workspace-title p {
  margin-top: 5px;
  line-height: 1.5;
}

.page-shell-logs .document-workspace-status article {
  min-width: 68px;
  padding: 7px 9px;
  border-radius: 6px;
}

.page-shell-logs .document-log-reader {
  min-height: 480px;
}

.page-shell-logs .debug-log-section {
  gap: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
}

.page-shell-logs .debug-log-section-head {
  align-items: center;
  padding: 6px 8px;
}

.page-shell-logs .debug-log-section-head h2 {
  margin-top: 3px;
}

.page-shell-logs .debug-log-section-head p,
.page-shell-logs .log-issue-digest p {
  margin-top: 4px;
  line-height: 1.5;
}

.page-shell-logs .debug-log-section > .log-issue-digest,
.page-shell-logs .debug-log-section > .log-panel {
  border-radius: 6px;
}

.page-shell-logs .rd-log-file-list {
  gap: 8px;
  padding: 10px;
}

.sidebar-section-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sidebar-section-tools button span {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .page-shell-logs .log-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) and (min-width: 721px) {
  .page-shell-logs .log-health-panel > header {
    flex-direction: row;
  }

  .page-shell-logs .log-health-score,
  .page-shell-logs .log-health-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  .page-shell-logs {
    gap: 12px;
  }

  .page-shell-logs > .page-shell-head {
    gap: 12px;
    padding-bottom: 12px;
  }

  .page-shell-logs .page-shell-actions .button,
  .page-shell-logs .log-health-actions .button {
    min-height: 44px;
  }

  .page-shell-logs .log-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .page-shell-logs .log-overview-card {
    min-height: 80px;
    padding: 10px 11px;
  }

  .page-shell-logs .log-health-panel > header {
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  .page-shell-logs .log-health-summary {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .page-shell-logs .log-health-score {
    justify-content: flex-start;
  }

  .page-shell-logs .log-health-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    width: 100%;
  }

  .page-shell-logs .log-health-actions .button {
    width: 100%;
    padding-inline: 7px;
    font-size: 12px;
  }

  .page-shell-logs .log-health-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shell-logs .log-toolbar {
    border-radius: 8px;
  }

  .page-shell-logs .log-filter-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .page-shell-logs .log-filter-group button {
    min-height: 44px;
    padding-inline: 5px;
  }

  .page-shell-logs .log-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .page-shell-logs .log-toolbar-actions .button {
    width: 100%;
    min-height: 44px;
    padding-inline: 8px;
  }

  .page-shell-logs .log-section-nav {
    top: 74px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
  }

  .page-shell-logs .log-section-nav a {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 4px;
    text-align: center;
  }

  .page-shell-logs .log-section-nav span,
  .page-shell-logs .log-section-nav b {
    font-size: 10px;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .page-shell-logs .document-workspace-hero,
  .page-shell-logs .log-panel-head,
  .page-shell-logs .log-issue-digest > header,
  .page-shell-logs .log-file-index > header {
    padding: 12px;
  }

  .page-shell-logs .debug-log-section-head {
    align-items: stretch;
    padding: 6px;
  }

  .page-shell-logs .debug-log-section-head .button {
    width: 100%;
  }
}

@media (min-width: 600px) and (max-width: 720px) {
  .page-shell-logs .log-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-shell-logs .log-toolbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .page-shell-logs .page-shell-head h1 {
    font-size: 25px;
  }

  .page-shell-logs .page-shell-head p {
    font-size: 12px;
  }

  .page-shell-logs .log-overview-card strong {
    font-size: 21px;
  }

  .page-shell-logs .log-overview-card small {
    font-size: 10px;
  }

  .page-shell-logs .log-health-metrics article,
  .page-shell-logs .log-health-details article,
  .page-shell-logs .log-health-lists article {
    padding: 11px;
  }

  .page-shell-logs .log-toolbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-shell-logs .log-toolbar-actions .button {
    gap: 5px;
    padding-inline: 5px;
    font-size: 11px;
  }
}

@media (max-width: 720px) {
  .app-page[data-dashboard-view="logs"] .clipboard-magic {
    display: none;
  }
}

/* v1.2.207: actionable log overview cards and scroll-aware section navigation. */
.page-shell-logs .log-overview-action {
  width: 100%;
  margin: 0;
  appearance: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 160ms var(--ease),
    border-color 160ms var(--ease),
    background 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.page-shell-logs .log-overview-action:hover,
.page-shell-logs .log-overview-action:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-raised));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-2px);
  outline: 0;
}

.page-shell-logs .log-overview-action:active {
  transform: translateY(0);
}

.page-shell-logs .log-overview-action small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  overflow: visible;
  text-overflow: clip;
}

.page-shell-logs .log-overview-action small > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell-logs .log-overview-action small svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--primary);
  transition: transform 160ms var(--ease);
}

.page-shell-logs .log-overview-action:hover small svg,
.page-shell-logs .log-overview-action:focus-visible small svg {
  transform: translateX(2px);
}

.page-shell-logs .log-section-nav a.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-contrast);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 24%, transparent);
}

.page-shell-logs .log-section-nav a.is-active b {
  color: color-mix(in srgb, var(--primary-contrast) 82%, transparent);
}

@media (max-width: 720px) {
  .page-shell-logs .log-overview-action {
    min-height: 80px;
    touch-action: manipulation;
  }
}

/* v1.2.208: document log resume and local reading progress. */
.page-shell-logs .document-log-resume {
  display: grid;
  grid-template-columns: 18px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}

.page-shell-logs .document-log-resume[hidden] {
  display: none;
}

.page-shell-logs .document-log-resume:hover,
.page-shell-logs .document-log-resume:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  outline: 0;
  transform: translateY(-1px);
}

.page-shell-logs .document-log-resume svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.page-shell-logs .document-log-resume span {
  min-width: 0;
  font-size: 12px;
  font-weight: 850;
}

.page-shell-logs .document-log-resume strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--primary);
  font-size: 11px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell-logs .document-log-sidebar-head > .document-log-progress {
  display: grid;
  align-items: initial;
  gap: 5px;
  width: 100%;
  padding: 4px 0 2px;
}

.page-shell-logs .document-log-progress > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-shell-logs .document-log-progress > span strong,
.page-shell-logs .document-log-progress > span small {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.3;
}

.page-shell-logs .document-log-progress > div {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--primary) 12%, var(--border));
}

.page-shell-logs .document-log-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 220ms var(--ease);
}

@media (max-width: 720px) {
  .page-shell-logs .document-log-resume {
    min-height: 46px;
    touch-action: manipulation;
  }

}

/* v1.2.209: document version comparison workspace. */
.page-shell-logs .document-log-action-group button[data-document-log-compare]:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.page-shell-logs .document-log-compare-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 70%, var(--surface));
}

.page-shell-logs .document-log-compare-panel[hidden] {
  display: none;
}

.page-shell-logs .document-log-compare-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.page-shell-logs .document-log-compare-panel > header > div:first-child {
  min-width: 0;
}

.page-shell-logs .document-log-compare-panel > header > div:first-child > span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
}

.page-shell-logs .document-log-compare-panel h3 {
  margin: 4px 0 6px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.3;
}

.page-shell-logs .document-log-compare-panel > header p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
}

.page-shell-logs .document-log-compare-panel > header p strong {
  color: var(--text);
}

.page-shell-logs .document-log-compare-panel > header p b {
  color: var(--primary);
  font-weight: 900;
}

.page-shell-logs .document-log-compare-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.page-shell-logs .document-log-compare-actions > button:not(.icon-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.page-shell-logs .document-log-compare-actions svg {
  width: 15px;
  height: 15px;
}

.page-shell-logs .document-log-compare-controls {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.page-shell-logs .document-log-compare-controls label {
  display: grid;
  flex: 1 1 360px;
  max-width: 560px;
  gap: 5px;
}

.page-shell-logs .document-log-compare-controls label > span {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 850;
}

.page-shell-logs .document-log-compare-controls select,
.page-shell-logs .document-log-compare-controls button {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.page-shell-logs .document-log-compare-controls select {
  width: 100%;
  padding: 0 34px 0 11px;
}

.page-shell-logs .document-log-compare-controls button {
  flex: 0 0 auto;
  padding: 0 12px;
  cursor: pointer;
}

.page-shell-logs .document-log-compare-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 480px);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.page-shell-logs .document-log-compare-metrics > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 7px 10px;
  border-right: 1px solid var(--border);
}

.page-shell-logs .document-log-compare-metrics > span:last-child {
  border-right: 0;
}

.page-shell-logs .document-log-compare-metrics small {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
}

.page-shell-logs .document-log-compare-metrics strong {
  color: var(--text);
  font-size: 17px;
}

.page-shell-logs .document-log-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-shell-logs .document-log-compare-grid > section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.page-shell-logs .document-log-compare-grid > section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}

.page-shell-logs .document-log-compare-grid > section > header strong {
  color: var(--text);
  font-size: 12px;
}

.page-shell-logs .document-log-compare-grid > section > header small {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 800;
}

.page-shell-logs .document-log-compare-grid ol {
  max-height: 260px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.page-shell-logs .document-log-compare-grid li {
  position: relative;
  padding: 8px 10px 8px 30px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  color: var(--text-soft);
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.page-shell-logs .document-log-compare-grid li:last-child {
  border-bottom: 0;
}

.page-shell-logs .document-log-compare-grid li::before {
  position: absolute;
  top: 8px;
  left: 11px;
  font-weight: 900;
}

.page-shell-logs .document-log-compare-grid .is-added li:not(.is-empty)::before {
  content: "+";
  color: var(--green);
}

.page-shell-logs .document-log-compare-grid .is-removed li:not(.is-empty)::before {
  content: "-";
  color: var(--red);
}

.page-shell-logs .document-log-compare-grid li.is-empty {
  padding-left: 10px;
  font-family: inherit;
}

/* v1.2.220 login visual pass after browser desktop/mobile review. */
.auth-page {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 34%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--green) 10%, transparent), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-soft) 74%, var(--bg)), var(--bg) 62%, color-mix(in srgb, var(--surface-soft) 68%, var(--bg)));
}

.auth-theme {
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--text) 10%, transparent);
  backdrop-filter: blur(14px);
}

.auth-shell {
  grid-template-columns: minmax(380px, 0.92fr) minmax(480px, 1.08fr);
  width: min(calc(100% - 48px), 1120px);
  min-height: 660px;
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--text) 13%, transparent);
}

.auth-brand {
  justify-content: flex-end;
  padding: 56px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.20), transparent 28%),
    radial-gradient(circle at 84% 88%, rgba(112, 226, 194, 0.28), transparent 34%),
    linear-gradient(150deg, #183b66 0%, #1766bf 56%, #0b8694 100%);
}

.auth-brand img {
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
}

.auth-brand h1 {
  font-size: 34px;
  letter-spacing: 0;
}

.auth-brand-copy {
  max-width: 360px;
}

.auth-brand-badges {
  margin-top: 20px;
}

.auth-brand-badges span {
  min-height: 34px;
  padding-inline: 12px;
}

.auth-metrics {
  height: 84px;
  margin-top: 42px;
  opacity: 0.78;
}

.auth-security-card {
  width: min(100%, 370px);
  margin-top: 24px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
}

.auth-form-wrap {
  width: min(100%, 500px);
  padding: 48px 60px;
}

.auth-form-head {
  display: grid;
  gap: 4px;
}

.auth-form-head h2 {
  margin-top: 2px;
  font-size: 28px;
  letter-spacing: 0;
}

.auth-form-head.has-time-panel p {
  color: var(--text-soft);
  font-size: 12px;
}

.auth-time-panel {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px 14px;
  margin-top: 18px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 42%, var(--surface)), color-mix(in srgb, var(--surface-raised) 92%, var(--surface))),
    var(--surface-raised);
}

.auth-time-icon {
  width: 42px;
  height: 42px;
}

.auth-time-main small {
  color: color-mix(in srgb, var(--primary) 68%, var(--text-soft));
}

.auth-time-main time {
  font-size: 13px;
  line-height: 1.28;
  white-space: nowrap;
}

.auth-time-main span {
  font-size: 10px;
}

.auth-time-actions {
  grid-column: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 230px);
}

.auth-time-action {
  min-height: 34px;
  padding-inline: 9px;
  border-radius: 7px;
}

.auth-login-hints {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-login-hints span {
  min-height: 36px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
}

.auth-quick-actions {
  margin-top: 14px;
}

.auth-form {
  gap: 15px;
  margin-top: 24px;
}

.auth-form .field > span:first-child {
  margin-bottom: 7px;
  color: var(--text);
  font-size: 12px;
}

.auth-input-wrap > input {
  min-height: 46px;
  border-radius: 8px;
}

.auth-form .button.button-primary {
  min-height: 48px;
  border-radius: 8px;
  box-shadow: 0 15px 28px color-mix(in srgb, var(--primary) 20%, transparent);
}

.auth-form-wrap footer {
  margin-top: 28px;
}

@media (max-width: 720px) {
  .auth-theme {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
  }

  .auth-shell {
    width: min(calc(100% - 26px), 560px);
    margin: 52px auto 24px;
    border-radius: 14px;
  }

  .auth-brand {
    min-height: 0;
    padding: 30px 28px 26px;
  }

  .auth-brand img {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .auth-brand h1 {
    font-size: 29px;
  }

  .auth-brand-copy {
    margin-top: 10px;
    line-height: 1.68;
  }

  .auth-brand-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
  }

  .auth-brand-badges span {
    min-height: 36px;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .auth-metrics {
    display: none;
  }

  .auth-security-card {
    width: 100%;
    margin-top: 14px;
    padding: 12px;
  }

  .auth-form-wrap {
    padding: 28px 24px 30px;
  }

  .auth-time-panel {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .auth-time-icon {
    width: 38px;
    height: 38px;
  }

  .auth-time-main time {
    font-size: 12px;
    white-space: normal;
  }

  .auth-time-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .auth-login-hints {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .auth-login-hints span {
    min-height: 42px;
    padding-inline: 6px;
  }

  .auth-login-hints b {
    font-size: 9px;
  }

  .auth-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .auth-quick-actions a,
  .auth-quick-actions > span {
    padding-inline: 8px;
  }

  .auth-page .auth-back-top {
    display: none;
  }
}

@media (max-width: 430px) {
  .auth-shell {
    width: calc(100% - 18px);
    margin-top: 50px;
    border-radius: 12px;
  }

  .auth-brand {
    padding: 26px 24px 22px;
  }

  .auth-brand h1 {
    font-size: 28px;
  }

  .auth-brand-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .auth-brand-badges span {
    justify-content: center;
    min-height: 34px;
    font-size: 10px;
  }

  .auth-brand-badges .icon {
    display: none;
  }

  .auth-security-card {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .auth-form-wrap {
    padding: 26px 22px 28px;
  }

  .auth-time-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .auth-time-icon {
    display: none;
  }

  .auth-time-main time {
    font-size: 12px;
  }

  .auth-time-actions,
  .auth-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-time-action span,
  .auth-quick-actions span span,
  .auth-quick-actions a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .auth-shell {
    width: calc(100% - 14px);
  }

  .auth-brand,
  .auth-form-wrap {
    padding-right: 18px;
    padding-left: 18px;
  }

  .auth-brand-badges,
  .auth-login-hints {
    grid-template-columns: 1fr;
  }

  .auth-login-hints b {
    font-size: 10px;
  }

  .auth-time-actions,
  .auth-quick-actions {
    grid-template-columns: 1fr;
  }
}

/* v1.2.220 final login composition trim. */
.auth-shell {
  grid-template-columns: minmax(390px, 0.9fr) minmax(470px, 1.1fr);
  min-height: 620px;
}

.auth-brand {
  justify-content: center;
  padding: 48px 54px;
}

.auth-metrics {
  margin-top: 36px;
}

.auth-security-card {
  margin-top: 20px;
}

.auth-form-wrap {
  padding: 44px 58px;
}

.auth-time-panel {
  margin-top: 16px;
}

.auth-login-hints,
.auth-quick-actions {
  gap: 8px;
}

.auth-form {
  margin-top: 22px;
}

@media (max-width: 720px) {
  .auth-shell {
    min-height: 0;
    margin-top: 44px;
  }

  .auth-brand {
    padding: 24px 26px 22px;
  }

  .auth-brand img {
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
  }

  .auth-brand h1 {
    font-size: 28px;
  }

  .auth-brand-copy {
    max-width: 100%;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.55;
  }

  .auth-brand-badges {
    margin-top: 12px;
  }

  .auth-brand-badges span {
    min-height: 32px;
  }

  .auth-security-card {
    display: none;
  }

  .auth-form-wrap {
    padding-top: 24px;
  }
}

@media (max-width: 430px) {
  .auth-theme {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  .auth-shell {
    margin-top: 44px;
  }

  .auth-brand {
    padding: 22px 20px 20px;
  }

  .auth-brand img {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
  }

  .auth-brand h1 {
    font-size: 27px;
  }

  .auth-brand-copy {
    font-size: 12px;
  }

  .auth-brand-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
  }

  .auth-brand-badges span {
    min-height: 32px;
    font-size: 10px;
  }

  .auth-form-wrap {
    padding-top: 24px;
  }
}

@media (max-width: 390px) {
  .auth-brand {
    padding-top: 20px;
    padding-bottom: 18px;
  }

  .auth-brand-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .auth-brand-badges span {
    padding-inline: 5px;
    font-size: 9px;
  }
}

/* v1.2.220 browser-reviewed login mobile polish. */
@media (max-width: 720px) {
  .auth-page {
    min-height: 100svh;
  }

  .auth-shell {
    margin-top: 42px;
    margin-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .auth-form-wrap {
    justify-content: flex-start;
  }

  .auth-form-head {
    gap: 2px;
  }

  .auth-form-head h2 {
    font-size: 24px;
  }

  .auth-time-panel {
    width: 100%;
    margin-top: 14px;
    box-shadow: none;
  }

  .auth-login-hints {
    margin-top: 8px;
  }
}

@media (max-width: 430px) {
  .auth-shell {
    margin-top: 40px;
  }

  .auth-brand {
    min-height: 0;
    padding: 20px 18px 18px;
  }

  .auth-brand img {
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
  }

  .auth-brand .eyebrow {
    font-size: 9px;
  }

  .auth-brand h1 {
    margin-top: 6px;
    font-size: 25px;
  }

  .auth-brand-copy {
    display: none;
    overflow: hidden;
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .auth-brand-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }

  .auth-brand-badges span {
    justify-content: center;
    min-height: 30px;
    padding-inline: 5px;
    border-radius: 8px;
    font-size: 9px;
  }

  .auth-form-wrap {
    padding: 18px 20px 22px;
  }

  .auth-time-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
  }

  .auth-time-main time {
    font-size: 12px;
    line-height: 1.35;
  }

  .auth-time-main span {
    font-size: 9px;
  }

  .auth-time-actions,
  .auth-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-time-action {
    min-height: 36px;
  }

  .auth-login-hints {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .auth-login-hints span {
    min-height: 34px;
    padding-inline: 4px;
  }

  .auth-login-hints .icon {
    display: none;
  }

  .auth-login-hints b {
    font-size: 9px;
  }

  .auth-quick-actions {
    margin-top: 8px;
  }

  .auth-quick-actions a,
  .auth-quick-actions > span {
    min-height: 38px;
  }

  .auth-form {
    gap: 12px;
    margin-top: 18px;
  }

  .auth-form .field > span:first-child {
    margin-bottom: 5px;
  }

  .auth-input-wrap > input {
    min-height: 44px;
  }

  .auth-form .button.button-primary {
    min-height: 46px;
  }

  .auth-form-wrap footer {
    margin-top: 18px;
  }
}

@media (max-width: 390px) {
  .auth-shell {
    width: calc(100% - 12px);
    margin-top: 38px;
  }

  .auth-theme {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
  }

  .auth-brand {
    padding: 18px 16px 16px;
  }

  .auth-brand img {
    width: 40px;
    height: 40px;
  }

  .auth-brand h1 {
    font-size: 24px;
  }

  .auth-form-wrap {
    padding: 18px 18px 22px;
  }

  .auth-time-actions,
  .auth-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-login-hints {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .auth-brand-badges .icon,
  .auth-login-hints .icon {
    display: none;
  }

  .auth-time-action span,
  .auth-quick-actions span span,
  .auth-quick-actions a span,
  .auth-login-hints b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 430px) and (max-height: 760px) {
  .auth-brand-copy {
    display: none;
  }

  .auth-brand-badges {
    margin-top: 8px;
  }

  .auth-form {
    margin-top: 18px;
  }
}

/* v1.2.221 login one-screen fit. */
.auth-document {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.auth-document body {
  overflow: hidden;
  overscroll-behavior: none;
}

.auth-page {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .auth-page {
    height: 100dvh;
    min-height: 100dvh;
  }
}

.auth-shell {
  margin: clamp(18px, 3.2vh, 32px) auto;
  max-height: calc(100vh - 36px);
}

@supports (height: 100dvh) {
  .auth-shell {
    max-height: calc(100dvh - 36px);
  }
}

@media (max-width: 720px) {
  .auth-shell {
    margin-top: 14px;
    margin-bottom: 14px;
    max-height: calc(100vh - 28px);
  }

  @supports (height: 100dvh) {
    .auth-shell {
      max-height: calc(100dvh - 28px);
    }
  }
}

@media (max-width: 430px) {
  .auth-theme {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .auth-shell {
    width: calc(100% - 10px);
    margin-top: 8px;
    margin-bottom: 8px;
    max-height: calc(100vh - 16px);
  }

  @supports (height: 100dvh) {
    .auth-shell {
      max-height: calc(100dvh - 16px);
    }
  }

  .auth-brand {
    padding: 12px 16px;
  }

  .auth-brand img {
    width: 34px;
    height: 34px;
    margin-bottom: 5px;
  }

  .auth-brand h1 {
    margin-top: 4px;
    font-size: 22px;
    line-height: 1.18;
  }

  .auth-brand-badges {
    gap: 5px;
    margin-top: 8px;
  }

  .auth-brand-badges span {
    min-height: 26px;
    padding-inline: 4px;
    font-size: 8px;
  }

  .auth-form-wrap {
    padding: 14px 18px 16px;
  }

  .auth-form-head h2 {
    margin-top: 1px;
    font-size: 22px;
    line-height: 1.18;
  }

  .auth-form-head p {
    margin-top: 2px;
    font-size: 10px;
  }

  .auth-time-panel {
    gap: 6px;
    margin-top: 8px;
    padding: 9px 10px;
  }

  .auth-time-main {
    gap: 1px;
  }

  .auth-time-main small {
    font-size: 9px;
  }

  .auth-time-main time {
    font-size: 11px;
    line-height: 1.25;
  }

  .auth-time-main span {
    display: none;
  }

  .auth-time-action {
    min-height: 34px;
    font-size: 10px;
  }

  .auth-login-hints {
    margin-top: 6px;
  }

  .auth-login-hints span {
    min-height: 30px;
    border-radius: 7px;
  }

  .auth-quick-actions {
    gap: 6px;
    margin-top: 6px;
  }

  .auth-quick-actions a,
  .auth-quick-actions > span {
    min-height: 34px;
    border-radius: 7px;
    font-size: 10px;
  }

  .auth-form {
    gap: 9px;
    margin-top: 12px;
  }

  .auth-form .field > span:first-child {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .auth-input-wrap > input {
    min-height: 42px;
  }

  .auth-password-assist {
    gap: 5px;
    margin-top: -6px;
    font-size: 10px;
  }

  .auth-remember {
    min-height: 32px;
    margin-top: -8px;
    font-size: 11px;
  }

  .auth-form .button.button-primary {
    min-height: 44px;
    margin-top: 0;
  }

  .auth-form-status {
    min-height: 14px;
    margin: -7px 0 -7px;
    font-size: 10px;
  }

  .auth-form-wrap footer {
    display: none;
  }
}

@media (max-width: 390px) {
  .auth-shell {
    width: calc(100% - 8px);
    margin-top: 6px;
    margin-bottom: 6px;
    max-height: calc(100vh - 12px);
  }

  @supports (height: 100dvh) {
  .auth-shell {
    max-height: calc(100dvh - 12px);
  }
}

/* v1.2.222 hard lock login page root scrolling. */
.auth-document,
.auth-document .auth-page {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

  .auth-brand {
    padding: 10px 14px;
  }

  .auth-form-wrap {
    padding: 12px 16px 14px;
  }

  .auth-time-panel {
    padding: 8px 9px;
  }
}

.page-shell-logs .document-log-compare-limit {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
}

@media (max-width: 720px) {
  .page-shell-logs .document-log-action-group[aria-label="快速跳转"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-shell-logs .document-log-compare-panel {
    padding: 12px;
    scroll-margin-top: 150px;
  }

  .page-shell-logs .document-log-compare-panel > header {
    align-items: stretch;
    flex-direction: column;
  }

  .page-shell-logs .document-log-compare-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    width: 100%;
  }

  .page-shell-logs .document-log-compare-actions > button {
    min-height: 44px;
  }

  .page-shell-logs .document-log-compare-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .page-shell-logs .document-log-compare-controls label {
    flex-basis: auto;
    max-width: none;
  }

  .page-shell-logs .document-log-compare-controls select,
  .page-shell-logs .document-log-compare-controls button {
    min-height: 44px;
  }

  .page-shell-logs .document-log-compare-grid {
    grid-template-columns: 1fr;
  }

  .page-shell-logs .document-log-compare-grid ol {
    max-height: 190px;
  }
}

/* v1.2.223: passkey device management polish. */
.settings-passkey-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: min(100%, 430px);
}

.settings-passkey-actions .button {
  justify-content: center;
  min-height: 44px;
  padding-inline: 12px;
  text-align: center;
  white-space: normal;
}

.settings-passkey-actions .button > span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.settings-passkey-actions .icon,
.profile-passkey-actions .icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.settings-passkey-manager,
.profile-passkey-card {
  position: relative;
  overflow: hidden;
}

.settings-passkey-manager::before,
.profile-passkey-card::before {
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--primary), var(--green));
  content: "";
  opacity: .8;
}

.settings-passkey-manager header,
.profile-passkey-card .profile-card-head {
  position: relative;
  z-index: 1;
}

.settings-passkey-item,
.profile-passkey-item {
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.settings-passkey-item:hover,
.profile-passkey-item:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 35%, var(--surface-soft));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 6%, transparent);
  transform: translateY(-1px);
}

.settings-passkey-item > div,
.profile-passkey-item > div {
  min-width: 0;
}

.settings-passkey-item strong,
.profile-passkey-item strong {
  overflow-wrap: anywhere;
}

.settings-passkey-item small,
.profile-passkey-item small {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.settings-passkey-item small em,
.profile-passkey-item small em {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-right: 3px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface));
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.settings-passkey-item .icon-button,
.profile-passkey-item .icon-button {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.profile-passkey-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 38%, var(--surface-soft)), var(--surface-soft));
}

.profile-passkey-card .profile-card-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface));
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.profile-passkey-card .profile-card-head p {
  max-width: 660px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.profile-passkey-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-passkey-actions .button {
  justify-content: center;
  min-height: 44px;
  padding-inline: 12px;
  text-align: center;
  white-space: normal;
}

.profile-passkey-list {
  display: grid;
  gap: 8px;
}

.profile-passkey-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.profile-passkey-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.profile-passkey-empty,
.profile-passkey-disabled {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 72%, var(--surface-soft));
  font-size: 12px;
  line-height: 1.6;
}

.profile-passkey-disabled {
  border-style: solid;
  color: var(--orange, #a16207);
  background: color-mix(in srgb, var(--orange-soft, rgba(202, 138, 4, .1)) 70%, var(--surface));
}

.auth-fingerprint-button {
  min-height: 46px;
  gap: 8px;
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 13%, transparent);
}

.auth-fingerprint-button .icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.auth-fingerprint-button:hover {
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 20%, transparent);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .settings-passkey-actions,
  .profile-passkey-actions {
    grid-template-columns: 1fr;
    min-width: 0;
    width: 100%;
  }

  .settings-passkey-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    flex-direction: initial;
  }

  .settings-passkey-item .icon-button {
    min-height: 40px;
  }

  #profileDialog {
    overflow-x: hidden;
  }

  #profileDialog .profile-panel {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 430px) {
  .settings-passkey-manager,
  .profile-passkey-card {
    padding: 12px;
  }

  .settings-passkey-manager::before,
  .profile-passkey-card::before {
    right: 12px;
    left: 12px;
  }

  .settings-passkey-manager h3,
  .profile-passkey-card h3 {
    font-size: 16px;
  }

  .settings-passkey-meta {
    gap: 6px;
  }

  .settings-passkey-meta span {
    flex: 1 1 calc(50% - 6px);
    min-height: 30px;
  }

  .settings-passkey-item,
  .profile-passkey-item {
    padding: 9px 10px;
  }

  .profile-passkey-card .profile-card-head > span {
    align-self: flex-start;
  }

  .auth-fingerprint-button,
  .auth-passkey-button {
    min-height: 46px;
  }
}

@media (max-width: 390px) {
  .settings-passkey-meta span {
    flex-basis: 100%;
  }

  .settings-passkey-actions .button,
  .profile-passkey-actions .button {
    min-height: 46px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-passkey-item,
  .profile-passkey-item,
  .auth-fingerprint-button {
    transition: none;
  }

  .settings-passkey-item:hover,
  .profile-passkey-item:hover,
  .auth-fingerprint-button:hover {
    transform: none;
  }
}

@media (max-width: 430px) {
  .page-shell-logs .document-log-action-group[aria-label="快速跳转"] button {
    padding-right: 4px;
    padding-left: 4px;
    font-size: 11px;
  }

  .page-shell-logs .document-log-action-group[aria-label="快速跳转"] button svg {
    display: none;
  }
}

/* v1.2.224 keep all login actions visible on short mobile screens. */
.auth-passkey-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  min-width: 0;
  gap: 8px;
}

.auth-passkey-actions .button {
  min-width: 0;
  min-height: 46px;
  margin-top: 0;
  padding-inline: 12px;
}

.auth-passkey-actions .button span {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 430px) {
  .auth-passkey-actions {
    gap: 7px;
  }

  .auth-passkey-actions .button {
    min-height: 44px;
    padding-inline: 8px;
    font-size: 11px;
  }
}

@media (max-width: 390px) {
  .auth-passkey-actions .button {
    gap: 6px;
    padding-inline: 6px;
    font-size: 10px;
  }
}

@media (max-width: 430px) and (max-height: 760px) {
  .auth-brand {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    padding: 8px 14px 7px;
  }

  .auth-brand .auth-home-link {
    display: grid;
    grid-column: 1;
    grid-row: 1 / span 2;
    place-items: center;
    width: 36px;
    height: 36px;
  }

  .auth-brand img {
    width: 36px;
    height: 36px;
    margin: 0;
  }

  .auth-brand > .eyebrow {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    line-height: 1.1;
  }

  .auth-brand h1 {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 1px 42px 0 0;
    font-size: 20px;
    line-height: 1.12;
  }

  .auth-brand-badges {
    grid-column: 1 / -1;
    grid-row: 3;
    gap: 4px;
    margin-top: 6px;
  }

  .auth-brand-badges span {
    min-height: 22px;
    border-radius: 6px;
    font-size: 8px;
  }

  .auth-form-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .auth-form {
    margin-top: 10px;
  }
}

@media (max-width: 430px) and (max-height: 680px) {
  .auth-form-wrap {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .auth-time-panel {
    margin-top: 5px;
    padding: 7px 8px;
  }

  .auth-time-action {
    min-height: 32px;
  }

  .auth-login-hints {
    margin-top: 4px;
  }

  .auth-login-hints span {
    min-height: 28px;
  }

  .auth-quick-actions {
    margin-top: 4px;
  }

  .auth-quick-actions a,
  .auth-quick-actions > span {
    min-height: 32px;
  }

  .auth-form {
    gap: 8px;
    margin-top: 8px;
  }
}

@media (max-width: 430px) and (max-height: 600px) {
  .auth-login-hints,
  .auth-quick-actions {
    display: none;
  }
}

@media (max-width: 900px) {
  .app-page {
    min-width: 0;
    overflow-x: hidden;
  }

  .sidebar {
    height: 100vh;
    max-height: 100vh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .sidebar-status {
    min-height: 30px;
    gap: 8px;
    padding: 4px 7px;
    border-radius: 7px;
  }

  .sidebar-status .status-head {
    gap: 6px;
  }

  .sidebar-status .status-head strong {
    font-size: 11px;
    white-space: nowrap;
  }

  .sidebar-status p {
    margin: 0 0 0 auto;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
  }

  @supports (height: 100dvh) {
    .sidebar {
      height: 100dvh;
      max-height: 100dvh;
    }
  }
}

/* v1.2.226 account identity and profile center rebuild. */
.sidebar-user {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 0 0;
}

.sidebar-user-main {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  gap: 9px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease);
}

.sidebar-user-main:hover,
.sidebar-user-main:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
  transform: translateY(-1px);
}

.sidebar-user-main:disabled {
  cursor: default;
  opacity: .72;
  transform: none;
}

.sidebar-user-main > .icon {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.sidebar-user .avatar-shell {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
}

.sidebar-user .avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--surface));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 12%, transparent);
}

.sidebar-user .avatar-shell > i {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--sidebar);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 12%, transparent);
}

.sidebar-user-copy,
.sidebar-user-copy strong,
.sidebar-user-copy span {
  min-width: 0;
}

.sidebar-user-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-copy > span {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}

.sidebar-user-copy b,
.sidebar-user-copy em {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-copy b {
  color: var(--primary);
}

.sidebar-user-copy em::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 5px 2px 0;
  border-radius: 50%;
  background: var(--muted);
}

.sidebar-user form {
  display: grid;
  place-items: center;
}

.sidebar-user .icon-button {
  width: 36px;
  height: 36px;
  border-color: transparent;
}

.sidebar-user .icon-button:hover,
.sidebar-user .icon-button:focus-visible {
  border-color: color-mix(in srgb, var(--red) 24%, var(--border));
  background: var(--red-soft);
  color: var(--red);
}

@media (min-width: 901px) {
  .app-layout.sidebar-compact .sidebar-user {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .app-layout.sidebar-compact .sidebar-user-main {
    grid-template-columns: 1fr;
    justify-items: center;
    width: 48px;
    padding: 4px;
  }

  .app-layout.sidebar-compact .sidebar-user-copy,
  .app-layout.sidebar-compact .sidebar-user-main > .icon {
    display: none;
  }
}

.profile-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 40px));
  max-height: min(92dvh, 900px);
  overflow: hidden;
}

.profile-modal-header {
  align-items: center;
  padding: 15px 18px;
  background: color-mix(in srgb, var(--surface-raised) 94%, var(--surface-soft));
}

.profile-modal-header h2 {
  margin-top: 2px;
  font-size: 16px;
}

.profile-body {
  max-height: none;
  min-height: 0;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface-raised));
  scrollbar-gutter: stable;
}

.profile-hero {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 6%, transparent);
}

.profile-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 132px;
  padding: 18px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary-soft) 46%, transparent), transparent 48%),
    var(--surface);
}

.profile-hero-avatar {
  position: relative;
  width: 88px;
  height: 88px;
}

.profile-hero-avatar > .profile-avatar {
  width: 88px;
  height: 88px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  font-size: 26px;
  box-shadow: 0 0 0 1px var(--border), 0 12px 26px color-mix(in srgb, var(--primary) 18%, transparent);
}

.profile-hero-avatar > i {
  position: absolute;
  right: 4px;
  bottom: 5px;
  width: 15px;
  height: 15px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--green);
}

.profile-avatar-edit {
  position: absolute;
  right: -5px;
  top: -5px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.profile-avatar-edit:hover,
.profile-avatar-edit:focus-within {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  transform: translateY(-1px);
}

.profile-avatar-edit .icon {
  width: 14px;
  height: 14px;
}

.profile-hero-copy {
  min-width: 0;
}

.profile-hero-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.profile-hero-status > span,
.profile-hero-status > em,
.profile-account-id,
.profile-feature-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.profile-hero-status > span {
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface));
  color: var(--primary);
}

.profile-hero-status > em {
  color: var(--green);
  background: var(--green-soft);
}

.profile-hero-status > em i {
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
}

.profile-hero-copy h3 {
  margin: 7px 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 22px;
  line-height: 1.2;
}

.profile-username,
.profile-bio {
  margin: 0;
  overflow-wrap: anywhere;
}

.profile-username {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
}

.profile-account-id {
  min-height: 20px;
  padding-inline: 7px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 9px;
}

.profile-bio {
  max-width: 620px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.profile-hero-actions,
.profile-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

.profile-hero-metrics > div {
  min-width: 0;
  min-height: 66px;
  padding: 12px 16px;
  border-right: 1px solid var(--border);
}

.profile-hero-metrics > div:last-child {
  border-right: 0;
}

.profile-hero-metrics span,
.profile-hero-metrics strong {
  display: block;
  min-width: 0;
}

.profile-hero-metrics span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.profile-hero-metrics strong {
  margin-top: 5px;
  overflow: hidden;
  color: var(--text);
  font-size: 19px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hero-metrics strong small {
  color: var(--muted);
  font-size: 10px;
}

.profile-hero-metrics strong.is-date {
  font-size: 12px;
  line-height: 1.45;
}

.profile-tabs {
  position: sticky;
  top: -16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--text) 5%, transparent);
  scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 38px;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.profile-tabs button:hover,
.profile-tabs button:focus-visible {
  color: var(--text);
  background: var(--surface-soft);
}

.profile-tabs button.is-active {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 75%, var(--surface));
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 5%, transparent);
}

.profile-tabs .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.profile-tab-content {
  min-width: 0;
  margin-top: 12px;
}

.profile-tab-panel {
  display: grid;
  min-width: 0;
  gap: 12px;
  animation: enter-up 220ms var(--ease) both;
}

.profile-tab-panel[hidden] {
  display: none;
}

.profile-overview-grid,
.profile-details-layout,
.profile-security-layout,
.profile-devices-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: 12px;
}

.profile-details-layout .profile-preferences-card,
.profile-devices-layout > *,
.profile-tab-panel > .profile-security-card,
.profile-tab-panel > .profile-activity-card {
  grid-column: 1 / -1;
}

.profile-card {
  min-width: 0;
  align-content: start;
  padding: 16px;
  background: var(--surface);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--text) 4%, transparent);
}

.profile-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.profile-card-head > div {
  min-width: 0;
}

.profile-card-head p,
.profile-password-card p,
.profile-two-factor-card p,
.profile-sessions-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.profile-card-head > .icon {
  width: 19px;
  height: 19px;
  color: var(--primary);
}

.profile-completion-value {
  color: var(--primary);
  font-size: 22px;
  line-height: 1;
}

.profile-completion-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.profile-completion-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--green));
  transition: width 420ms var(--ease);
}

.profile-completion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-completion-list li {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 28px;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 700;
}

.profile-completion-list li.is-complete {
  border-color: color-mix(in srgb, var(--green) 18%, var(--border));
  color: var(--green);
  background: color-mix(in srgb, var(--green-soft) 42%, var(--surface));
}

.profile-completion-list .icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.profile-completion-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.profile-quick-grid button,
.profile-quick-grid a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 52px;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease);
}

.profile-quick-grid button:hover,
.profile-quick-grid button:focus-visible,
.profile-quick-grid a:hover,
.profile-quick-grid a:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
  transform: translateY(-1px);
}

.profile-quick-grid > * > .icon {
  width: 17px;
  height: 17px;
  color: var(--primary);
}

.profile-quick-grid span,
.profile-quick-grid strong,
.profile-quick-grid small {
  min-width: 0;
}

.profile-quick-grid strong,
.profile-quick-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-quick-grid strong {
  font-size: 11px;
}

.profile-quick-grid small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.profile-avatar-manager-preview {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.profile-avatar-large {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border: 2px solid var(--surface);
  font-size: 21px;
  box-shadow: 0 0 0 1px var(--border), 0 8px 20px color-mix(in srgb, var(--primary) 14%, transparent);
}

.profile-avatar-manager-preview > div {
  min-width: 0;
}

.profile-avatar-manager-preview p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.profile-form-grid,
.profile-password-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.profile-form-grid .field,
.profile-password-fields .field {
  margin: 0;
}

.profile-form-grid textarea {
  min-height: 86px;
  resize: vertical;
}

.profile-form-grid .field > span,
.profile-password-fields .field > span:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.profile-form-grid .field > span small {
  color: var(--muted);
  font-size: 9px;
}

.profile-form-actions {
  margin-top: auto;
}

.profile-preferences-card {
  gap: 14px;
}

.profile-choice-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.profile-choice-group legend {
  margin-bottom: 7px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
}

.profile-choice-group > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.profile-choice {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.profile-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile-choice > span {
  display: grid;
  min-height: 54px;
  align-content: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.profile-choice strong,
.profile-choice small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-choice strong {
  color: var(--text);
  font-size: 11px;
}

.profile-choice small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.profile-choice input:checked + span {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent);
}

.profile-choice input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: 2px;
}

.profile-password-input {
  position: relative;
  display: block !important;
}

.profile-password-input input {
  width: 100%;
  padding-right: 46px;
}

.profile-password-input .icon-button {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 34px;
  height: 34px;
  border-color: transparent;
  background: transparent;
  transform: translateY(-50%);
}

.profile-password-strength {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.profile-password-strength > span {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.profile-password-strength i {
  height: 5px;
  border-radius: 999px;
  background: var(--border);
}

.profile-password-strength[data-score="1"] i:nth-child(-n+1),
.profile-password-strength[data-score="2"] i:nth-child(-n+2) {
  background: var(--red);
}

.profile-password-strength[data-score="3"] i:nth-child(-n+3) {
  background: var(--amber);
}

.profile-password-strength[data-score="4"] i {
  background: var(--green);
}

.profile-password-strength small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.profile-feature-status {
  gap: 5px;
}

.profile-feature-status.is-success {
  color: var(--green);
  background: var(--green-soft);
}

.profile-feature-status.is-warning {
  color: var(--amber);
  background: var(--amber-soft);
}

.profile-feature-status .icon {
  width: 12px;
  height: 12px;
}

.profile-2fa-box:empty {
  display: none;
}

.profile-session-list {
  gap: 7px;
}

.profile-session-row {
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
}

.profile-session-device {
  min-width: 0;
}

.profile-session-device > span {
  min-width: 0;
}

.profile-session-row small {
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.profile-session-row em {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.profile-session-row em.is-current {
  color: var(--green);
  background: var(--green-soft);
}

.profile-session-row em.is-revoked {
  color: var(--muted);
  background: var(--surface);
}

.profile-muted {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.profile-data-card {
  gap: 12px;
}

.profile-data-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  border-top: 1px solid var(--border);
}

.profile-data-tool {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding: 12px 12px 0 0;
}

.profile-data-tool + .profile-data-tool {
  padding-right: 0;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.profile-data-tool-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  color: var(--primary);
  background: var(--primary-soft);
}

.profile-data-tool-icon.is-security {
  color: var(--green);
  background: var(--green-soft);
}

.profile-data-tool-icon .icon {
  width: 18px;
  height: 18px;
}

.profile-data-tool > div {
  min-width: 0;
}

.profile-data-tool strong,
.profile-data-tool small {
  display: block;
  min-width: 0;
}

.profile-data-tool strong {
  color: var(--text);
  font-size: 11px;
}

.profile-data-tool small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.profile-activity-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 10px;
}

.profile-activity-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(48px, 1fr));
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
}

.profile-activity-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 32px;
  gap: 4px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 780;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.profile-activity-filters button small {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  color: inherit;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: 8px;
}

.profile-activity-filters button:hover,
.profile-activity-filters button:focus-visible {
  color: var(--text);
  background: var(--surface);
}

.profile-activity-filters button.is-active {
  color: var(--primary);
  background: var(--surface);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 8%, transparent);
}

.profile-activity-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.profile-activity-copy {
  min-width: 0;
}

.profile-activity-copy > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.profile-activity-copy > div > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-activity-copy > div > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 8px;
  font-weight: 800;
}

body[data-profile-density="compact"] .content {
  padding-top: 18px;
}

body[data-profile-density="compact"] .page-shell,
body[data-profile-density="compact"] .profile-tab-panel,
body[data-profile-density="compact"] .profile-overview-grid,
body[data-profile-density="compact"] .profile-details-layout,
body[data-profile-density="compact"] .profile-security-layout,
body[data-profile-density="compact"] .profile-devices-layout {
  gap: 9px;
}

body[data-profile-density="compact"] .profile-card {
  padding: 12px;
}

body[data-profile-density="comfortable"] .content {
  padding-top: 32px;
}

body[data-profile-density="comfortable"] .profile-card {
  padding: 20px;
}

body[data-profile-motion="reduced"] .page-shell,
body[data-profile-motion="reduced"] .modal-panel,
body[data-profile-motion="reduced"] .profile-tab-panel {
  animation: none !important;
}

body[data-profile-motion="reduced"] .profile-completion-track i,
body[data-profile-motion="reduced"] .profile-avatar-edit,
body[data-profile-motion="reduced"] .profile-quick-grid > *,
body[data-profile-motion="reduced"] .sidebar-user-main {
  transition: none !important;
}

@media (max-width: 720px) {
  .profile-dialog[open] {
    place-items: end center;
    padding: 0;
  }

  .profile-dialog .profile-panel {
    width: 100%;
    max-width: 100%;
    height: min(94dvh, 900px);
    max-height: 94dvh;
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }

  .profile-modal-header {
    padding: 12px 14px;
  }

  .profile-modal-header .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .profile-body {
    padding: 12px;
    scrollbar-gutter: auto;
  }

  .profile-hero-main {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 0;
    gap: 12px;
    padding: 14px;
  }

  .profile-hero-avatar,
  .profile-hero-avatar > .profile-avatar {
    width: 72px;
    height: 72px;
  }

  .profile-hero-avatar > .profile-avatar {
    font-size: 22px;
  }

  .profile-hero-copy h3 {
    font-size: 18px;
  }

  .profile-bio {
    font-size: 11px;
  }

  .profile-hero-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .profile-hero-actions .button {
    min-height: 44px;
    justify-content: center;
  }

  .profile-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-hero-metrics > div {
    min-height: 58px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--border);
  }

  .profile-hero-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .profile-hero-metrics > div:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .profile-tabs {
    top: -12px;
    margin-top: 9px;
    padding: 5px;
  }

  .profile-tabs button {
    min-width: 76px;
    min-height: 44px;
    padding-inline: 10px;
  }

  .profile-tab-content {
    margin-top: 0;
    padding-top: 14px;
  }

  .profile-overview-grid,
  .profile-details-layout,
  .profile-security-layout,
  .profile-devices-layout,
  .profile-form-grid,
  .profile-password-fields {
    grid-template-columns: 1fr;
  }

  .profile-password-strength {
    grid-column: auto;
  }

  .profile-card {
    padding: 13px;
  }

  .profile-card-head {
    flex-direction: row;
    align-items: flex-start;
  }

  .profile-card .button,
  .profile-form-actions .button,
  .profile-session-row .button {
    min-height: 44px;
  }

  .profile-form-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    width: 100%;
  }

  .profile-form-actions .button {
    width: 100%;
    justify-content: center;
  }

  .profile-password-input .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .profile-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-choice-group > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-session-row {
    flex-direction: row;
    align-items: center;
  }

  .profile-activity-item {
    align-items: center;
  }

  .profile-data-tools {
    grid-template-columns: 1fr;
  }

  .profile-data-tool,
  .profile-data-tool + .profile-data-tool {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px 0 0;
    border-left: 0;
  }

  .profile-data-tool + .profile-data-tool {
    margin-top: 12px;
    border-top: 1px solid var(--border);
  }

  .profile-data-tool > .button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .profile-activity-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-activity-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }

  .profile-activity-filters button {
    min-height: 44px;
    padding: 0 3px;
  }

  .profile-activity-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .profile-activity-actions .button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .profile-hero-status > span,
  .profile-bio,
  .profile-choice small {
    display: none;
  }

  .profile-choice > span {
    min-height: 48px;
    padding-inline: 6px;
    text-align: center;
  }

  .profile-choice strong {
    white-space: normal;
  }

  .profile-completion-list {
    grid-template-columns: 1fr;
  }

  .profile-session-row {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-session-row > .button,
  .profile-session-row > em {
    align-self: stretch;
    justify-content: center;
  }

  .profile-password-strength {
    grid-template-columns: 1fr;
  }

  .profile-password-strength small {
    white-space: normal;
  }

  .profile-activity-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .profile-activity-item time {
    grid-column: 2;
  }

  .profile-activity-copy > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .profile-activity-copy > div > strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .profile-activity-filters button {
    gap: 1px;
    padding-inline: 1px;
    font-size: 9px;
    white-space: nowrap;
  }

  .profile-activity-filters button > span {
    white-space: nowrap;
  }

  .profile-activity-filters button small {
    min-width: 14px;
    height: 14px;
    padding-inline: 2px;
    font-size: 7px;
  }
}

.sidebar-user-copy em {
  display: none;
}

/* v1.2.226: keep the settings console inside narrow mobile viewports. */
@media (max-width: 720px) {
  body.settings-page {
    min-width: 0;
    overflow-x: clip;
  }

  .settings-page .settings-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 14px 12px 104px;
    overflow-x: clip;
  }

  .settings-page .settings-hero,
  .settings-page .settings-guide,
  .settings-page .settings-shell,
  .settings-page .settings-panels,
  .settings-page #settingsForm,
  .settings-page .settings-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* v1.2.228: profile device controls, session filters and inline passkey rename. */
.profile-passkey-item {
  grid-template-columns: minmax(0, 1fr) auto;
  transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.profile-passkey-copy,
.profile-passkey-item-actions {
  min-width: 0;
}

.profile-passkey-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-passkey-copy small {
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.profile-passkey-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-passkey-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-right: 3px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.profile-passkey-item.is-revoked {
  border-style: dashed;
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
}

.profile-passkey-rename-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  align-items: center;
  min-width: 0;
  gap: 7px;
  animation: enter-up 180ms var(--ease) both;
}

.profile-passkey-rename-form[hidden] {
  display: none;
}

.profile-passkey-rename-form label,
.profile-passkey-rename-form input {
  min-width: 0;
  width: 100%;
}

.profile-passkey-rename-form input {
  min-height: 44px;
}

.profile-passkey-rename-form .icon-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
}

.profile-passkey-rename-form .icon-button.is-confirm {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  color: var(--green);
  background: var(--green-soft);
}

.profile-passkey-item.is-renaming > .profile-passkey-copy,
.profile-passkey-item.is-renaming > .profile-passkey-item-actions {
  display: none;
}

.profile-passkey-rename-form.is-busy {
  opacity: .72;
  pointer-events: none;
}

.profile-device-tools {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 11px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-block: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
}

.profile-device-tools-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 7px;
  color: var(--primary);
  background: var(--primary-soft);
}

.profile-device-tools-icon .icon {
  width: 18px;
  height: 18px;
}

.profile-device-tools > div {
  min-width: 0;
}

.profile-device-tools strong,
.profile-device-tools small {
  display: block;
  min-width: 0;
}

.profile-device-tools strong {
  color: var(--text);
  font-size: 12px;
}

.profile-device-tools small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-device-tools-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.profile-device-tools-actions .button {
  min-height: 40px;
}

.profile-session-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  gap: 5px;
}

.profile-session-filters button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--ease);
}

.profile-session-filters button:hover,
.profile-session-filters button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  color: var(--primary);
  transform: translateY(-1px);
}

.profile-session-filters button.is-active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface));
}

.profile-session-filters small {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 999px;
  color: inherit;
  background: var(--surface);
  font-size: 8px;
}

.profile-session-empty {
  min-height: 58px;
  padding: 17px 10px;
  border: 1px dashed var(--border);
  border-radius: 7px;
  text-align: center;
}

@media (max-width: 720px) {
  .profile-device-tools {
    grid-template-columns: 40px minmax(0, 1fr);
    margin-bottom: 10px;
    padding: 10px 0;
  }

  .profile-device-tools-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-device-tools-actions .button,
  .profile-session-filters button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .profile-passkey-item .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}

@media (max-width: 430px) {
  .profile-passkey-item {
    gap: 7px;
  }

  .profile-passkey-item-actions {
    gap: 3px;
  }

  .profile-passkey-copy strong {
    font-size: 12px;
  }

  .profile-passkey-copy small {
    font-size: 9px;
  }

  .profile-session-filters {
    gap: 3px;
  }

  .profile-session-filters button {
    gap: 2px;
    padding-inline: 2px;
    font-size: 9px;
    white-space: nowrap;
  }

  .profile-session-filters small {
    min-width: 16px;
    height: 16px;
    padding-inline: 2px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-passkey-item,
  .profile-passkey-rename-form,
  .profile-session-filters button {
    animation: none;
    transition: none;
  }

  .profile-session-filters button:hover,
  .profile-session-filters button:focus-visible {
    transform: none;
  }
}

/* v1.2.236 global front/back UI and motion polish. */
:root {
  --ui-motion-fast: 140ms;
  --ui-motion-medium: 240ms;
  --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  --ui-hover-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 10%, rgba(20, 30, 45, .10));
  --ui-panel-shadow: 0 18px 46px rgba(20, 30, 45, .09);
}

[data-theme="dark"] {
  --ui-hover-shadow: 0 18px 46px rgba(0, 0, 0, .34);
  --ui-panel-shadow: 0 22px 54px rgba(0, 0, 0, .28);
}

body.public-page,
body.app-page,
body.auth-page {
  accent-color: var(--primary);
}

body.public-page .button,
body.app-page .button,
body.auth-page .button,
body.public-page .icon-button,
body.app-page .icon-button,
body.auth-page .icon-button {
  isolation: isolate;
  overflow: hidden;
}

body.public-page .button::after,
body.app-page .button::after,
body.auth-page .button::after,
body.public-page .icon-button::after,
body.app-page .icon-button::after,
body.auth-page .icon-button::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 20%, color-mix(in srgb, #fff 36%, transparent), transparent 58%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(.82);
  transition: opacity var(--ui-motion-fast) ease, transform var(--ui-motion-medium) var(--ease);
}

body.public-page .button > *,
body.app-page .button > *,
body.auth-page .button > *,
body.public-page .icon-button > *,
body.app-page .icon-button > *,
body.auth-page .icon-button > * {
  position: relative;
  z-index: 1;
}

body.public-page .is-pressing,
body.app-page .is-pressing,
body.auth-page .is-pressing {
  transform: translateY(0) scale(.985) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.public-page .button:hover::after,
  body.app-page .button:hover::after,
  body.auth-page .button:hover::after,
  body.public-page .icon-button:hover::after,
  body.app-page .icon-button:hover::after,
  body.auth-page .icon-button:hover::after {
    opacity: .28;
    transform: scale(1);
  }

  .front-live-stat-card:hover,
  .front-support-card:hover,
  .front-partner-card:hover,
  .front-feedback-card:hover,
  .front-deploy-card:hover,
  .front-enterprise-card:hover,
  .front-import-card:hover,
  .front-scenario-card:hover,
  .front-feature:hover,
  .front-flow-step:hover,
  .front-preview-card:hover,
  .front-product:hover,
  .panel:hover,
  .content-card:hover,
  .health-card:hover,
  .log-overview-card:hover,
  .import-page-rebuild .source-pane:hover,
  .import-page-rebuild .target-pane:hover,
  .import-page-rebuild .preview-pane:hover,
  .import-page-rebuild .history-pane:hover,
  .profile-summary-card:hover,
  .profile-passkey-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    box-shadow: var(--ui-hover-shadow);
  }
}

.front-live-stat-card,
.front-support-card,
.front-partner-card,
.front-feedback-card,
.front-deploy-card,
.front-enterprise-card,
.front-import-card,
.front-scenario-card,
.front-feature,
.front-flow-step,
.front-preview-card,
.front-product,
.panel,
.content-card,
.health-card,
.log-overview-card,
.import-page-rebuild .source-pane,
.import-page-rebuild .target-pane,
.import-page-rebuild .preview-pane,
.import-page-rebuild .history-pane,
.profile-summary-card,
.profile-passkey-item {
  transition:
    transform var(--ui-motion-medium) var(--ease),
    border-color var(--ui-motion-fast) ease,
    background-color var(--ui-motion-fast) ease,
    box-shadow var(--ui-motion-medium) var(--ease);
  will-change: transform;
}

.front-section-heading,
.panel-head,
.section-heading,
.auth-copy,
.auth-card-head,
.profile-panel-head {
  text-wrap: balance;
}

.field input,
.field textarea,
.field select,
.auth-form input,
.auth-form select,
.auth-form textarea,
.front-url-form input,
.front-preview-form input,
.source-pane textarea,
.import-page-rebuild input,
.import-page-rebuild select,
.import-page-rebuild textarea,
.sort-select select,
.analytics-period select {
  transition:
    border-color var(--ui-motion-fast) ease,
    background-color var(--ui-motion-fast) ease,
    box-shadow var(--ui-motion-fast) ease,
    transform var(--ui-motion-fast) var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus,
.front-url-form input:focus,
.front-preview-form input:focus,
.source-pane textarea:focus,
.import-page-rebuild input:focus,
.import-page-rebuild select:focus,
.import-page-rebuild textarea:focus,
.sort-select select:focus,
.analytics-period select:focus {
  box-shadow: var(--ui-focus-ring);
  transform: translateY(-1px);
}

.sidebar-nav a,
.sidebar-nav button,
.sidebar-user-main,
.links-tools .segmented button,
.profile-session-filters button,
.import-format-card,
.import-source-tab,
.preview-card {
  transition:
    transform var(--ui-motion-fast) var(--ease),
    border-color var(--ui-motion-fast) ease,
    background-color var(--ui-motion-fast) ease,
    color var(--ui-motion-fast) ease,
    box-shadow var(--ui-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .sidebar-nav a:hover,
  .sidebar-nav button:hover,
  .sidebar-user-main:hover,
  .links-tools .segmented button:hover,
  .profile-session-filters button:hover,
  .import-format-card:hover,
  .import-source-tab:hover,
  .preview-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 8%, transparent);
  }
}

html.ui-polish-ready .page-shell,
html.ui-polish-ready .front-main,
html.ui-polish-ready .auth-shell,
body.public-page .front-main,
body.auth-page .auth-shell {
  animation: ui-polish-page-in 320ms var(--ease) both;
}

html.ui-polish-ready .links-tools,
html.ui-polish-ready .quick-create-rebuild,
html.ui-polish-ready .import-page-rebuild .import-workbench,
html.ui-polish-ready .profile-dialog-panel,
body.public-page .front-product,
body.public-page .front-preview-card,
body.auth-page .auth-card {
  animation: ui-polish-lift-in 260ms var(--ease) both;
}

@keyframes ui-polish-page-in {
  from {
    opacity: .001;
  }

  to {
    opacity: 1;
  }
}

@keyframes ui-polish-lift-in {
  from {
    opacity: .001;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast,
.toast-item,
.message-center-dialog,
.profile-dialog-panel,
.link-modal-card {
  backdrop-filter: blur(18px);
}

.dashboard-shell,
.page-shell,
.front-main,
.auth-shell {
  min-width: 0;
}

.links-tools,
.panel-head,
.topbar-actions,
.front-hero-actions,
.auth-actions,
.import-page-rebuild .panel-head {
  min-width: 0;
}

.links-tools > *,
.panel-head > *,
.topbar-actions > *,
.front-hero-actions > *,
.auth-actions > *,
.import-page-rebuild .panel-head > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .sidebar,
  .dashboard-sidebar {
    padding-bottom: max(96px, calc(96px + env(safe-area-inset-bottom)));
  }

  .topbar-actions,
  .links-tools,
  .panel-head,
  .import-page-rebuild .panel-head {
    gap: 8px;
  }

  .topbar-actions .button,
  .links-tools .button,
  .auth-actions .button,
  .front-hero-actions .button,
  .import-page-rebuild .panel-head .button {
    min-height: 44px;
  }
}

@media (max-width: 720px) {
  body.public-page .button,
  body.app-page .button,
  body.auth-page .button {
    white-space: normal;
    line-height: 1.25;
  }

  .front-live-stat-card,
  .front-support-card,
  .front-partner-card,
  .front-feedback-card,
  .front-deploy-card,
  .front-enterprise-card,
  .front-import-card,
  .front-scenario-card,
  .front-feature,
  .front-flow-step,
  .front-preview-card,
  .front-product,
  .panel,
  .content-card,
  .health-card,
  .log-overview-card,
  .import-page-rebuild .source-pane,
  .import-page-rebuild .target-pane,
  .import-page-rebuild .preview-pane,
  .import-page-rebuild .history-pane {
    box-shadow: 0 10px 26px rgba(20, 30, 45, .06);
  }

  .field input:focus,
  .field textarea:focus,
  .field select:focus,
  .auth-form input:focus,
  .auth-form select:focus,
  .auth-form textarea:focus,
  .front-url-form input:focus,
  .front-preview-form input:focus,
  .source-pane textarea:focus,
  .import-page-rebuild input:focus,
  .import-page-rebuild select:focus,
  .import-page-rebuild textarea:focus {
    transform: none;
  }
}

@media (max-width: 430px) {
  .front-section-heading,
  .panel-head,
  .section-heading,
  .auth-card-head {
    text-align: left;
  }

  .topbar-actions,
  .front-hero-actions,
  .auth-actions {
    width: 100%;
  }

  .topbar-actions .button,
  .front-hero-actions .button,
  .auth-actions .button {
    flex: 1 1 100%;
    width: 100%;
  }

  .toast-region,
  #toastRegion {
    right: 10px;
    left: 10px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ui-polish-ready .page-shell,
  html.ui-polish-ready .front-main,
  html.ui-polish-ready .auth-shell,
  body.public-page .front-main,
  body.auth-page .auth-shell,
  html.ui-polish-ready .links-tools,
  html.ui-polish-ready .quick-create-rebuild,
  html.ui-polish-ready .import-page-rebuild .import-workbench,
  html.ui-polish-ready .profile-dialog-panel,
  body.public-page .front-product,
  body.public-page .front-preview-card,
  body.auth-page .auth-card {
    animation: none !important;
  }

  .front-live-stat-card,
  .front-support-card,
  .front-partner-card,
  .front-feedback-card,
  .front-deploy-card,
  .front-enterprise-card,
  .front-import-card,
  .front-scenario-card,
  .front-feature,
  .front-flow-step,
  .front-preview-card,
  .front-product,
  .panel,
  .content-card,
  .health-card,
  .log-overview-card,
  .import-page-rebuild .source-pane,
  .import-page-rebuild .target-pane,
  .import-page-rebuild .preview-pane,
  .import-page-rebuild .history-pane,
  .profile-summary-card,
  .profile-passkey-item,
  .sidebar-nav a,
  .sidebar-nav button,
  .sidebar-user-main,
  .links-tools .segmented button,
  .profile-session-filters button,
  .import-format-card,
  .import-source-tab,
  .preview-card {
    transition: none !important;
    transform: none !important;
  }
}

/* v1.2.239 dashboard slim status and navigation micro-polish. */
.sidebar-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  gap: 8px;
  margin: 10px 0 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--border));
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green) 10%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-raised) 88%, var(--sidebar));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
}

.sidebar-status .status-head {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.sidebar-status .status-head strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-status p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.sidebar-status .status-dot.is-success {
  animation: rjdl-status-pulse 2.6s ease-in-out infinite;
}

.sidebar-status .status-dot.is-danger {
  animation: rjdl-status-danger-pulse 1.8s ease-in-out infinite;
}

@keyframes rjdl-status-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 6%, transparent);
  }
}

@keyframes rjdl-status-danger-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 7%, transparent);
  }
}

.topbar-actions .icon-button,
.topbar-actions .button,
.sidebar-user-main,
.sidebar-user .icon-button {
  will-change: transform;
}

.topbar-actions .icon-button:hover,
.topbar-actions .icon-button:focus-visible,
.topbar-actions .button:hover,
.topbar-actions .button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 11%, transparent);
}

.topbar-profile-button {
  position: relative;
  overflow: visible;
}

.topbar-profile-button::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 10%, transparent);
}

.app-layout.sidebar-compact .sidebar-status {
  justify-content: center;
  min-height: 40px;
  padding: 8px;
  border-radius: 12px;
}

.app-layout.sidebar-compact .sidebar-status .status-head strong,
.app-layout.sidebar-compact .sidebar-status p {
  display: none;
}

@media (max-width: 900px) {
  .sidebar-status {
    min-height: 32px;
    margin-top: 8px;
    padding: 6px 8px;
  }

  .sidebar-status .status-head strong,
  .sidebar-status p {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-status .status-dot.is-success,
  .sidebar-status .status-dot.is-danger {
    animation: none !important;
  }
}

/* v1.2.240 mobile front navigation and focus polish. */
.topbar-actions .icon-button:focus-visible,
.topbar-actions .button:focus-visible,
.front-mobile-quicknav a:focus-visible,
.front-contact-float-items a:focus-visible,
.front-contact-float-items button:focus-visible,
.front-contact-float-actions .button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 62%, #ffffff);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .front-mobile-quicknav {
    z-index: 64;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-raised) 96%, transparent)),
      var(--surface);
    box-shadow:
      0 -18px 34px color-mix(in srgb, var(--text) 11%, transparent),
      inset 0 1px 0 color-mix(in srgb, #ffffff 64%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .front-mobile-quicknav a {
    position: relative;
    min-height: 46px;
    border-radius: 12px;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease), box-shadow 160ms ease;
  }

  .front-mobile-quicknav a::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 5px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--primary);
    transform: translateX(50%);
    transition: width 180ms ease;
  }

  .front-mobile-quicknav a:hover,
  .front-mobile-quicknav a:focus-visible,
  .front-mobile-quicknav a.is-active {
    background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
    color: var(--primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
  }

  .front-mobile-quicknav a:hover::after,
  .front-mobile-quicknav a:focus-visible::after,
  .front-mobile-quicknav a.is-active::after {
    width: 18px;
  }

  .front-mobile-quicknav a.is-pressing {
    transform: translateY(1px) scale(.98);
  }

  .public-page.has-front-contact-float.has-front-mobile-quicknav {
    --front-contact-float-bottom: 132px;
  }

  .front-contact-float {
    z-index: 58;
    max-height: min(62vh, 430px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    box-shadow: 0 24px 56px color-mix(in srgb, var(--text) 16%, transparent);
  }

  .front-contact-float-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
  }

  .front-contact-float-items a,
  .front-contact-float-items button,
  .front-contact-float-actions .button {
    min-height: 44px;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease);
  }

  .front-contact-float-items a:hover,
  .front-contact-float-items a:focus-visible,
  .front-contact-float-items button:hover,
  .front-contact-float-items button:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
    color: var(--primary);
  }

  .front-contact-float-items a.is-pressing,
  .front-contact-float-items button.is-pressing,
  .front-contact-float-actions .button.is-pressing {
    transform: translateY(1px) scale(.99);
  }
}

@media (max-width: 430px) {
  .front-mobile-quicknav {
    right: 8px;
    bottom: 8px;
    left: 8px;
    gap: 4px;
    padding: 7px;
    border-radius: 18px;
  }

  .front-mobile-quicknav a {
    min-height: 42px;
    padding: 5px 3px;
  }

  .front-mobile-quicknav a span {
    max-width: 100%;
    font-size: 10px;
    white-space: nowrap;
  }

  .front-contact-float {
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .front-mobile-quicknav a,
  .front-mobile-quicknav a::after,
  .front-contact-float-items a,
  .front-contact-float-items button,
  .front-contact-float-actions .button {
    transition: none !important;
    transform: none !important;
  }
}

/* v1.2.241 topbar avatar image isolation. */
.topbar-profile-button.has-avatar,
.topbar-profile-button:has(.topbar-profile-image) {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 56%, var(--surface)), var(--surface));
}

.topbar-profile-button.has-avatar > .icon,
.topbar-profile-button:has(.topbar-profile-image) > .icon {
  opacity: 0;
  visibility: hidden;
}

.topbar-profile-button.has-avatar .topbar-profile-image,
.topbar-profile-button:has(.topbar-profile-image) .topbar-profile-image {
  z-index: 1;
  background: var(--surface);
  object-fit: cover;
}

.topbar-profile-button.has-avatar::before,
.topbar-profile-button:has(.topbar-profile-image)::before {
  z-index: 2;
  pointer-events: none;
}

/* v1.2.242 topbar avatar single-slot rendering. */
.topbar-profile-button.has-avatar {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  overflow: hidden;
}

.topbar-profile-button.has-avatar > .icon {
  display: none !important;
}

.topbar-profile-button .topbar-profile-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-soft);
}

.topbar-profile-button.avatar-failed .topbar-profile-fallback {
  display: inline-flex;
}

.topbar-profile-button.has-avatar .topbar-profile-fallback {
  display: none !important;
}

.topbar-profile-button.has-avatar .topbar-profile-image {
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 8px;
}

/* v1.2.243 topbar avatar visual polish. */
.topbar-actions .topbar-profile-button.has-avatar,
.topbar-actions .topbar-profile-button:has(.topbar-profile-image) {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  flex: 0 0 40px;
  padding: 0;
  overflow: visible;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: var(--surface);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, #ffffff 64%, transparent),
    0 8px 18px color-mix(in srgb, var(--primary) 10%, transparent);
}

.topbar-actions .topbar-profile-button.has-avatar:hover,
.topbar-actions .topbar-profile-button:has(.topbar-profile-image):hover {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
  background: var(--surface);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, #ffffff 72%, transparent),
    0 10px 22px color-mix(in srgb, var(--primary) 14%, transparent);
}

.topbar-actions .topbar-profile-button.has-avatar .topbar-profile-image,
.topbar-actions .topbar-profile-button:has(.topbar-profile-image) .topbar-profile-image {
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: none;
  object-fit: cover;
}

.topbar-actions .topbar-profile-button.has-avatar::before,
.topbar-actions .topbar-profile-button:has(.topbar-profile-image)::before {
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 24%, transparent);
}

@media (max-width: 430px) {
  .topbar-actions .topbar-profile-button.has-avatar,
  .topbar-actions .topbar-profile-button:has(.topbar-profile-image) {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    flex-basis: 38px;
  }
}

/* v1.2.244 topbar avatar compact polish. */
.topbar-actions .topbar-profile-button.has-avatar,
.topbar-actions .topbar-profile-button:has(.topbar-profile-image) {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #ffffff 66%, transparent),
    0 6px 14px color-mix(in srgb, var(--primary) 8%, transparent);
}

.topbar-actions .topbar-profile-button.has-avatar:hover,
.topbar-actions .topbar-profile-button:has(.topbar-profile-image):hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #ffffff 76%, transparent),
    0 8px 18px color-mix(in srgb, var(--primary) 12%, transparent);
}

.topbar-actions .topbar-profile-button.has-avatar .topbar-profile-image,
.topbar-actions .topbar-profile-button:has(.topbar-profile-image) .topbar-profile-image {
  inset: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}

.topbar-actions .topbar-profile-button.has-avatar::before,
.topbar-actions .topbar-profile-button:has(.topbar-profile-image)::before {
  right: 1px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border-color: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 84%, transparent);
}

/* v1.2.245 fixed sidebar dock, compact rail toggle and brand polish. */
.app-layout {
  transition: grid-template-columns 240ms var(--ease);
}

.sidebar {
  overflow: hidden;
  gap: 10px;
  padding: 16px 14px max(14px, env(safe-area-inset-bottom));
  transition:
    width 240ms var(--ease),
    padding 240ms var(--ease),
    transform 240ms var(--ease),
    box-shadow 240ms ease;
}

.brand {
  flex: 0 0 auto;
  min-height: 56px;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 44%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-raised) 92%, var(--sidebar));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 58%, transparent);
}

.brand img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 14px;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 18%, transparent);
  transition: transform 220ms var(--ease), box-shadow 220ms ease;
}

.brand:hover img {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 24%, transparent);
}

.brand strong {
  font-size: 16px;
  letter-spacing: 0;
}

.brand span {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .06em;
}

.sidebar-compact-toggle {
  position: absolute;
  top: 86px;
  right: -15px;
  z-index: 36;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  gap: 0;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-soft) 96%, transparent)),
    var(--surface);
  color: var(--primary);
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--text) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 74%, transparent);
}

.sidebar-compact-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sidebar-compact-toggle .icon {
  width: 17px;
  height: 17px;
  transition: transform 220ms var(--ease);
}

.sidebar-compact-toggle:hover,
.sidebar-compact-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border-strong));
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 76%, #63b3ff));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--primary) 25%, transparent);
  transform: translateX(2px);
}

.app-layout.sidebar-compact .sidebar-compact-toggle {
  position: absolute;
  top: 86px;
  right: -17px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
}

.app-layout.sidebar-compact .sidebar-compact-toggle .icon {
  transform: rotate(180deg);
}

.sidebar-search,
.sidebar-search-meta,
.sidebar-section-tools {
  flex: 0 0 auto;
}

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 2px 12px;
  scrollbar-width: thin;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.sidebar-status,
.sidebar-user {
  flex: 0 0 auto;
}

.sidebar-status {
  margin-top: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sidebar-user {
  margin-top: 0;
  padding-top: 9px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sidebar) 0%, transparent), color-mix(in srgb, var(--sidebar) 92%, transparent));
}

.app-layout.sidebar-compact .brand {
  min-height: 54px;
  padding: 7px;
}

.app-layout.sidebar-compact .brand img {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.app-layout.sidebar-compact .sidebar {
  gap: 9px;
  overflow: visible;
}

.app-layout.sidebar-compact .sidebar-nav {
  overflow: visible;
  padding-inline: 0;
}

@media (max-width: 900px) {
  .sidebar {
    height: 100dvh;
    max-height: 100dvh;
    gap: 10px;
    overflow: hidden;
    padding: 16px 14px max(14px, env(safe-area-inset-bottom));
  }

  .brand {
    min-height: 56px;
  }

  .brand img {
    width: 40px;
    height: 40px;
  }

  .sidebar-compact-toggle {
    display: none;
  }

  .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 12px;
  }

  .sidebar-status,
  .sidebar-user {
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-layout,
  .sidebar,
  .brand img,
  .sidebar-compact-toggle,
  .sidebar-compact-toggle .icon {
    transition: none !important;
    transform: none !important;
  }
}

/* v1.2.246 compact sidebar rail toggle lock. */
.app-layout.sidebar-compact .sidebar > .sidebar-compact-toggle {
  position: absolute;
  top: 86px;
  right: -17px;
  z-index: 40;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
}

/* v1.2.247 dashboard rendering and loading polish. */
.app-page[data-ui-motion-enabled="1"] .topbar,
.app-page[data-ui-motion-enabled="1"] .sidebar,
.app-page[data-ui-motion-enabled="1"] .page-shell,
.app-page[data-ui-motion-enabled="1"] .workbench,
.app-page[data-ui-motion-enabled="1"] .links-section {
  transition:
    opacity 180ms ease,
    transform 220ms var(--ease),
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.app-page[data-ui-motion-enabled="1"]:not(.is-app-ready) .topbar,
.app-page[data-ui-motion-enabled="1"]:not(.is-app-ready) .sidebar,
.app-page[data-ui-motion-enabled="1"]:not(.is-app-ready) .page-shell,
.app-page[data-ui-motion-enabled="1"]:not(.is-app-ready) .workbench,
.app-page[data-ui-motion-enabled="1"]:not(.is-app-ready) .links-section {
  opacity: .001;
  transform: translateY(4px);
}

.app-page.is-app-ready .topbar,
.app-page.is-app-ready .sidebar,
.app-page.is-app-ready .page-shell,
.app-page.is-app-ready .workbench,
.app-page.is-app-ready .links-section {
  opacity: 1;
  transform: none;
}

@supports (content-visibility: auto) {
  .app-page[data-content-visibility-enabled="1"] .health-dashboard,
  .app-page[data-content-visibility-enabled="1"] .creation-notes,
  .app-page[data-content-visibility-enabled="1"] .analytics-grid,
  .app-page[data-content-visibility-enabled="1"] .top-links-panel,
  .app-page[data-content-visibility-enabled="1"] .log-overview-grid,
  .app-page[data-content-visibility-enabled="1"] .log-health-panel,
  .app-page[data-content-visibility-enabled="1"] .log-toolbar,
  .app-page[data-content-visibility-enabled="1"] .log-utility-head,
  .app-page[data-content-visibility-enabled="1"] .log-file-index,
  .app-page[data-content-visibility-enabled="1"] .log-issue-digest,
  .app-page[data-content-visibility-enabled="1"] .log-center-grid,
  .app-page[data-content-visibility-enabled="1"] .links-command-center,
  .app-page[data-content-visibility-enabled="1"] .links-filter-summary,
  .app-page[data-content-visibility-enabled="1"] .links-filter-recent,
  .app-page[data-content-visibility-enabled="1"] .links-filter-note,
  .app-page[data-content-visibility-enabled="1"] .maintenance-strip,
  .app-page[data-content-visibility-enabled="1"] .taxonomy-card,
  .app-page[data-content-visibility-enabled="1"] .schedule-helper-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
  }
}

.table-loading,
.modal-loading {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.table-loading::after,
.modal-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, #ffffff 34%, transparent), transparent),
    color-mix(in srgb, var(--surface-soft) 82%, transparent);
  transform: translateX(-120%);
  animation: rjdl-loading-sheen 1.35s ease-in-out infinite;
}

@keyframes rjdl-loading-sheen {
  100% {
    transform: translateX(120%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .card,
  .stat-card,
  .stat-tile,
  .links-command-center,
  .create-rebuild-hero,
  .health-dashboard,
  .taxonomy-card {
    transition:
      transform 180ms var(--ease),
      box-shadow 180ms ease,
      border-color 180ms ease,
      background-color 180ms ease;
  }

  .links-command-center:hover,
  .create-rebuild-hero:hover,
  .health-dashboard:hover,
  .taxonomy-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--text) 8%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-page[data-ui-motion-enabled="1"] .topbar,
  .app-page[data-ui-motion-enabled="1"] .sidebar,
  .app-page[data-ui-motion-enabled="1"] .page-shell,
  .app-page[data-ui-motion-enabled="1"] .workbench,
  .app-page[data-ui-motion-enabled="1"] .links-section,
  .table-loading::after,
  .modal-loading::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* v1.2.248 mobile dashboard overflow and action-density polish. */
@media (max-width: 430px) {
  .content,
  .page-shell,
  .page-shell-head,
  .page-shell-head > div:first-child,
  .page-shell-actions,
  .workbench,
  .workbench-heading,
  .quick-create,
  .quick-create-rebuild,
  .create-rebuild-hero,
  .create-rebuild-hero article,
  .create-mode-switch,
  .content-workbench .quick-create-rebuild .create-mode-switch,
  .links-section,
  .links-header,
  .links-tools,
  .links-tools .segmented,
  .health-dashboard {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .page-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .content {
    overflow-x: clip;
    padding-inline: 14px;
  }

  .page-shell,
  .page-shell-head,
  .page-shell-actions,
  .content-workbench .workbench,
  .workbench-heading,
  .quick-create-rebuild,
  .create-rebuild-hero,
  .content-workbench .quick-create-rebuild .create-mode-switch,
  .health-dashboard {
    inline-size: auto !important;
    width: auto !important;
    justify-self: stretch;
  }

  .content-workbench .workbench {
    padding-inline: 14px;
  }

  .quick-create-rebuild {
    margin-inline: 0;
    padding-inline: 12px;
  }

  .create-rebuild-hero {
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .create-rebuild-hero article,
  .content-workbench .quick-create-rebuild .create-mode-switch label {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .topbar {
    align-items: center;
    gap: 6px;
  }

  .topbar-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
    overflow-x: clip;
    overflow-y: visible;
    padding-inline-end: 0;
  }

  .topbar-actions > .button,
  .topbar-actions > .icon-button {
    flex: 0 0 34px;
    inline-size: 34px;
    width: 34px;
    min-inline-size: 34px;
    min-width: 34px;
    block-size: 38px;
    min-block-size: 38px;
    min-height: 38px;
    padding-inline: 0;
    border-radius: 13px;
  }

  .topbar-actions > .topbar-profile-button.has-avatar,
  .topbar-actions > .topbar-profile-button:has(.topbar-profile-image) {
    flex-basis: 36px;
    inline-size: 36px;
    width: 36px;
    min-inline-size: 36px;
    min-width: 36px;
    max-inline-size: 36px;
    max-width: 36px;
    block-size: 38px;
    height: 38px;
  }

  .topbar-actions > .button {
    position: relative;
  }

  .topbar-actions > .button > span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .page-shell-head,
  .links-header,
  .workbench-heading {
    overflow-x: clip;
  }

  .page-shell-head > div:first-child,
  .page-shell-actions,
  .workbench-heading > div,
  .quick-create-rebuild > *,
  .links-header > *,
  .links-tools > * {
    max-inline-size: 100%;
  }

  .page-shell-actions .button {
    flex: 1 1 100%;
    inline-size: 100%;
    min-width: 0;
  }

  .health-dashboard {
    overflow-x: clip;
  }

  .health-dashboard *,
  .page-shell-head *,
  .workbench *,
  .links-section * {
    min-width: 0;
  }

  .health-dashboard p,
  .health-dashboard span,
  .health-dashboard strong,
  .page-shell-head p,
  .page-shell-head h1 {
    overflow-wrap: anywhere;
  }
}

/* v1.2.251 mobile backend sidebar default-close hardening. */
@media (max-width: 900px) {
  .app-layout:not(.sidebar-open) .sidebar {
    transform: translateX(-102%) !important;
    pointer-events: none !important;
  }

  .app-layout:not(.sidebar-open) .sidebar-backdrop {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .app-layout.sidebar-open .sidebar {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
}

/* v1.2.252 desktop backend shell visibility recovery. */
@media (min-width: 901px) {
  .app-layout {
    display: grid !important;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
    min-height: 100vh;
  }

  .app-layout .sidebar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    z-index: 30 !important;
    display: flex !important;
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .app-layout .sidebar-backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .app-layout .main-column {
    display: block !important;
    min-width: 0;
  }

  .app-layout .topbar {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* v1.2.253 lead management full rebuild layer. */
.leads-page {
  --lead-radius: 18px;
  --lead-radius-sm: 12px;
  --lead-glow: color-mix(in srgb, var(--primary) 14%, transparent);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 28%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--green) 8%, transparent), transparent 26%),
    var(--background);
}

.leads-content {
  gap: 16px;
  width: 100%;
  max-width: 1480px;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
  overflow-x: clip;
}

.leads-content > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.lead-hero,
.lead-command-panel,
.lead-filter-panel,
.lead-sla-panel,
.lead-insights-panel,
.lead-duplicate-panel,
.lead-kanban-panel,
.lead-list-panel,
.lead-disabled {
  border-radius: var(--lead-radius) !important;
  border-color: color-mix(in srgb, var(--primary) 12%, var(--border)) !important;
  box-shadow:
    0 18px 44px color-mix(in srgb, #0f172a 7%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 56%, transparent) !important;
}

.lead-hero {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  min-height: 262px;
  padding: 30px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 68%, var(--surface)) 0%, color-mix(in srgb, var(--surface-raised) 94%, transparent) 54%, color-mix(in srgb, var(--green-soft) 44%, var(--surface)) 100%),
    var(--surface);
}

.lead-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent) 0 1px, transparent 1px 16px);
  opacity: .64;
  pointer-events: none;
}

.lead-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 18%, transparent), transparent 66%);
  pointer-events: none;
}

.lead-hero > * {
  position: relative;
  z-index: 1;
}

.lead-hero-copy {
  display: grid;
  align-content: center;
  gap: 14px;
}

.lead-hero-copy .workbench-kicker,
.lead-command-head .workbench-kicker {
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.lead-hero-copy h1 {
  max-width: 620px;
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 900;
  line-height: 1.08;
}

.lead-hero-copy p {
  max-width: 650px;
  color: var(--text-soft);
  font-size: 14px;
}

.lead-hero-stats {
  align-self: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lead-hero-stats article {
  position: relative;
  min-height: 112px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 92%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease;
}

.lead-hero-stats article:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  box-shadow: 0 16px 32px var(--lead-glow);
}

.lead-hero-stats article::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--green) 78%, var(--primary)));
  opacity: .58;
}

.lead-hero-stats small {
  font-weight: 850;
  letter-spacing: .05em;
}

.lead-hero-stats strong {
  color: var(--text);
  font-size: 30px;
}

.lead-section-nav,
.lead-view-toolbar {
  scrollbar-width: none;
}

.lead-section-nav::-webkit-scrollbar,
.lead-view-toolbar::-webkit-scrollbar,
.lead-filter-meta::-webkit-scrollbar {
  display: none;
}

.lead-section-nav {
  position: sticky;
  top: calc(var(--topbar-height, 72px) + 8px);
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: 0 12px 26px color-mix(in srgb, #0f172a 7%, transparent);
  backdrop-filter: blur(14px);
}

.lead-section-nav a {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.lead-section-nav a:hover,
.lead-section-nav a.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 64%, var(--surface));
  color: var(--primary);
}

.lead-view-toolbar {
  position: sticky;
  top: calc(var(--topbar-height, 72px) + 62px);
  z-index: 23;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, #0f172a 5%, transparent);
  backdrop-filter: blur(12px);
}

.lead-view-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.lead-view-toolbar > * {
  box-sizing: border-box;
  max-width: 100%;
}

.lead-page-search {
  display: inline-flex;
  align-items: center;
  flex: 0 1 min(340px, 100%);
  gap: 8px;
  min-height: 38px;
  min-width: min(260px, 32vw);
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-soft);
}

.lead-page-search span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.lead-page-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.lead-page-search:focus-within {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: 0 12px 24px var(--lead-glow);
}

.lead-page-search-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--green-soft) 54%, var(--surface));
  color: color-mix(in srgb, var(--green) 82%, var(--text));
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.lead-row.is-page-filter-hidden {
  display: none !important;
}

.lead-page-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 24px;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--primary-soft) 58%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-raised) 92%, var(--primary-soft));
  color: var(--text);
  text-align: center;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--primary) 8%, transparent);
}

.lead-page-empty[hidden] {
  display: none !important;
}

.lead-page-empty h3 {
  margin: 0;
  font-size: 17px;
}

.lead-page-empty p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.lead-view-toolbar button:hover,
.lead-view-toolbar button.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface));
  color: var(--primary);
}

.lead-command-panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
}

.lead-command-panel::after {
  content: "";
  position: absolute;
  inset: auto -70px -120px auto;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--green) 13%, transparent), transparent 68%);
  pointer-events: none;
}

.lead-command-card,
.lead-command-queue,
.lead-insight-card,
.lead-kanban-column,
.lead-sla-grid article,
.lead-duplicate-card,
.lead-bulk-form,
.lead-table tbody tr {
  border-radius: var(--lead-radius-sm) !important;
}

.lead-command-card,
.lead-command-queue,
.lead-insight-row,
.lead-kanban-card {
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.lead-command-card:hover,
.lead-command-queue:hover,
.lead-insight-row:hover,
.lead-kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px color-mix(in srgb, #0f172a 8%, transparent);
}

.lead-command-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.lead-command-card {
  min-height: 124px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--lead-command-tone) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-raised) 90%, transparent);
}

.lead-command-icon {
  border-radius: 14px;
}

.lead-command-body {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .36fr);
}

.lead-command-queues {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.lead-command-queue {
  min-height: 66px;
}

.lead-command-tips {
  border-radius: 16px;
}

.lead-active-filters {
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.lead-filter-panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 92%, transparent), var(--surface));
}

.lead-filter-form {
  grid-template-columns: minmax(260px, 1.3fr) minmax(120px, .58fr) repeat(4, minmax(120px, .62fr));
}

.lead-filter-form .field span,
.lead-bulk-grid .field span,
.lead-follow-form .field span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.lead-filter-form input,
.lead-filter-form select,
.lead-bulk-grid input,
.lead-bulk-grid select,
.lead-bulk-grid textarea,
.lead-follow-form input,
.lead-follow-form select,
.lead-follow-form textarea {
  border-radius: 13px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.lead-filter-form input:focus,
.lead-filter-form select:focus,
.lead-bulk-grid input:focus,
.lead-bulk-grid select:focus,
.lead-bulk-grid textarea:focus,
.lead-follow-form input:focus,
.lead-follow-form select:focus,
.lead-follow-form textarea:focus {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: 0 12px 26px var(--lead-glow);
}

.lead-filter-meta {
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 2px;
}

.lead-filter-meta span {
  flex: 0 0 auto;
}

.lead-insights-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lead-insight-card.is-wide {
  grid-column: span 2;
}

.lead-insight-row i::before {
  animation: lead-meter-grow 620ms var(--ease) both;
  transform-origin: left center;
}

.lead-kanban-board {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.lead-kanban-column {
  overflow: hidden;
}

.lead-kanban-column > header {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 92%, transparent), color-mix(in srgb, var(--surface-soft) 80%, transparent));
}

.lead-kanban-items {
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}

.lead-list-panel {
  overflow: hidden;
}

.lead-table-wrap {
  border-radius: 18px;
}

.lead-table {
  border-collapse: separate;
  border-spacing: 0;
}

.lead-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
}

.lead-table tbody tr {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.lead-table tbody tr.is-open,
.lead-table tbody tr:has(.lead-detail[open]) {
  outline: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  outline-offset: -1px;
  background: color-mix(in srgb, var(--primary-soft) 24%, var(--surface));
}

.lead-detail summary {
  border-radius: 999px;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}

.lead-detail summary:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
  color: var(--primary);
}

.lead-detail[open] summary {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
}

.lead-detail-panel {
  border-radius: 16px;
  animation: lead-detail-open 180ms ease both;
}

.lead-quick-actions button,
.lead-contact-tools button,
.lead-contact-tools a {
  border-radius: 12px;
}

.lead-selection-dock {
  border-radius: 18px;
}

body.lead-density-compact .lead-hero {
  min-height: auto;
  padding: 22px;
}

body.lead-density-compact .lead-hero-stats article {
  min-height: 82px;
  padding: 12px;
}

body.lead-density-compact .lead-command-card {
  min-height: 92px;
  padding: 12px;
}

body.lead-density-compact .lead-command-card strong {
  font-size: 22px;
}

body.lead-density-compact .lead-table th,
body.lead-density-compact .lead-table td {
  padding-block: 10px;
}

body.lead-density-compact .lead-status-row {
  margin-top: 6px;
}

@keyframes lead-meter-grow {
  from {
    transform: scaleX(.12);
    opacity: .5;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes lead-detail-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .lead-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-hero-stats,
  .lead-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-insight-card.is-wide {
    grid-column: auto;
  }

  .lead-command-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .leads-content {
    gap: 12px;
  }

  .lead-hero,
  .lead-command-panel,
  .lead-filter-panel,
  .lead-sla-panel,
  .lead-insights-panel,
  .lead-duplicate-panel,
  .lead-kanban-panel,
  .lead-list-panel,
  .lead-disabled {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .lead-hero-copy h1 {
    font-size: 30px;
  }

  .lead-hero-stats {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .lead-hero-stats article {
    flex: 0 0 154px;
    scroll-snap-align: start;
  }

  .lead-section-nav {
    top: 8px;
    border-radius: 16px;
  }

  .lead-view-toolbar {
    top: 60px;
    border-radius: 16px;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .lead-command-actions,
  .lead-command-actions .button {
    width: 100%;
  }

  .lead-command-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lead-command-grid,
  .lead-command-queues,
  .lead-insights-grid,
  .lead-sla-grid,
  .lead-duplicate-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-filter-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-filter-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-filter-actions .button {
    width: 100%;
  }

  .lead-page-search {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .lead-page-search-count {
    flex: 1 1 auto;
  }

  .lead-table-wrap {
    overflow: visible;
  }

  .lead-table tbody {
    gap: 12px;
  }

  .lead-table tbody tr {
    position: relative;
    padding: 14px;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px color-mix(in srgb, #0f172a 5%, transparent);
  }

  .lead-table td {
    display: grid !important;
    grid-template-columns: minmax(96px, .36fr) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 0 !important;
    border: 0 !important;
  }

  .lead-table td::before {
    content: attr(data-lead-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .lead-table .lead-main-cell,
  .lead-table .lead-action-cell {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-table .lead-main-cell::before,
  .lead-table .lead-action-cell::before {
    display: none;
  }

  .lead-detail summary {
    min-height: 44px;
    justify-content: center;
  }

  .lead-detail-panel {
    padding: 12px;
  }

  .lead-follow-form,
  .lead-bulk-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .lead-bulk-grid .field-full {
    grid-column: auto;
  }
}

@media (max-width: 430px) {
  .content.leads-content {
    padding-inline: 10px;
  }

  .lead-hero,
  .lead-command-panel,
  .lead-filter-panel,
  .lead-sla-panel,
  .lead-insights-panel,
  .lead-duplicate-panel,
  .lead-kanban-panel,
  .lead-list-panel,
  .lead-disabled {
    padding: 13px !important;
  }

  .lead-hero-copy h1 {
    font-size: 26px;
  }

  .lead-hero-copy p,
  .lead-command-head p {
    font-size: 12px;
  }

  .lead-view-toolbar {
    top: 56px;
    padding: 7px;
  }

  .lead-view-toolbar button,
  .lead-section-nav a {
    min-height: 40px;
    padding-inline: 11px;
  }

  .lead-view-toolbar button {
    flex: 1 1 calc(50% - 6px);
  }

  .lead-view-toolbar [data-lead-page-search-clear] {
    flex-basis: 100%;
  }

  .lead-page-search-count {
    width: 100%;
  }

  .lead-command-card {
    min-height: 88px;
  }

  .lead-table td {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-table td::before {
    margin-bottom: -4px;
  }

  .lead-contact-tools span {
    grid-template-columns: minmax(0, 1fr);
  }
}

body[data-ui-motion-enabled="0"] .lead-hero-stats article,
body[data-ui-motion-enabled="0"] .lead-command-card,
body[data-ui-motion-enabled="0"] .lead-command-queue,
body[data-ui-motion-enabled="0"] .lead-insight-row,
body[data-ui-motion-enabled="0"] .lead-kanban-card,
body[data-ui-motion-enabled="0"] .lead-detail-panel {
  transition: none;
  animation: none;
}

body[data-ui-motion-enabled="0"] .lead-hero-stats article:hover,
body[data-ui-motion-enabled="0"] .lead-command-card:hover,
body[data-ui-motion-enabled="0"] .lead-command-queue:hover,
body[data-ui-motion-enabled="0"] .lead-insight-row:hover,
body[data-ui-motion-enabled="0"] .lead-kanban-card:hover {
  transform: none;
}