:root {
  --ink: #0b2347;
  --muted: #5f748c;
  --line: rgba(25, 74, 116, 0.12);
  --soft: #f5fbff;
  --panel: rgba(255, 255, 255, 0.86);
  --cyan: #21c7df;
  --blue: #3578ff;
  --violet: #7a6df5;
  --coral: #ff7b69;
  --peach: #ffe3d7;
  --mint: #54c9a5;
  --amber: #ffb64b;
  --danger: #f05252;
  --shadow: 0 18px 48px rgba(39, 108, 171, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #edf9ff;
}

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  background:
    linear-gradient(112deg, rgba(53, 120, 255, 0.12) 0%, transparent 28%),
    linear-gradient(248deg, rgba(255, 123, 105, 0.12) 0%, transparent 26%),
    linear-gradient(180deg, #dff7ff 0%, #f8fbff 42%, #eef6fb 100%);
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
}

.stage-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(28, 148, 190, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 148, 190, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, black 0%, transparent 68%);
}

.app-shell {
  position: relative;
  width: min(1180px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 18px 14px 88px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0 12px;
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 14px 28px rgba(40, 134, 238, 0.28);
}

.brand-mark::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 4px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
}

.brand-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brand-title {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

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

.desktop-nav {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 12px 30px rgba(40, 105, 155, 0.08);
}

.nav-pill,
.bottom-nav button,
.tab-button,
.ghost-button,
.primary-button,
.small-action,
.chip-button {
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.nav-pill {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: #315875;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.nav-pill svg,
.bottom-nav svg,
.small-action svg,
.primary-button svg,
.ghost-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.nav-pill.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 10px 22px rgba(35, 139, 231, 0.2);
}

.route-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.route-actions .ghost-button {
  display: none;
}

.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 10px 28px rgba(48, 106, 157, 0.12);
  cursor: pointer;
}

.icon-button svg {
  width: 19px;
  height: 19px;
}

.page {
  display: grid;
  gap: 16px;
  animation: pageIn 360ms ease both;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero {
  position: relative;
  display: grid;
  min-height: 318px;
  align-items: end;
  overflow: hidden;
  padding: 24px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 8px;
  background:
    linear-gradient(118deg, rgba(31, 106, 238, 0.98) 0%, rgba(65, 150, 255, 0.96) 58%, rgba(35, 202, 225, 0.88) 100%),
    linear-gradient(180deg, #1d69ed, #4aa3ff);
  box-shadow: 0 24px 60px rgba(19, 94, 211, 0.28);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, transparent 0 40%, rgba(255, 255, 255, 0.24) 47%, transparent 55%),
    repeating-linear-gradient(128deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 74px);
  transform: translateX(-30%);
  animation: scan 5s ease-in-out infinite;
}

@keyframes scan {
  0%,
  100% {
    transform: translateX(-32%);
  }

  52% {
    transform: translateX(32%);
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  max-width: 68%;
  gap: 10px;
}

.home-hero .eyebrow {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.13);
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  color: #245c83;
  border: 1px solid rgba(33, 199, 223, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 900;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 5px rgba(84, 201, 165, 0.16);
}

h1,
h2,
h3,
p {
  margin: 0;
}

.hero h1 {
  max-width: 420px;
  color: #fff;
  font-size: 29px;
  line-height: 1.15;
}

.hero p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  line-height: 1.65;
}

.hero-bot {
  position: absolute;
  right: -24px;
  top: 54px;
  z-index: 1;
  width: 178px;
  max-width: 48%;
  animation: floatBot 4.8s ease-in-out infinite;
}

@keyframes floatBot {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.hero-cta,
.hero-ghost {
  min-height: 40px;
}

.hero-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
}

.hero-risk-chip {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 10px 7px 7px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(13, 45, 100, 0.34);
  backdrop-filter: blur(14px);
}

.mini-risk-ring {
  display: grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border: 5px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#1c66db, #1c66db) padding-box,
    conic-gradient(#fff 0 var(--score), rgba(255, 255, 255, 0.22) var(--score) 360deg) border-box;
}

.mini-risk-ring strong {
  font-size: 12px;
  line-height: 1;
}

.hero-risk-chip span {
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.home-tool-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.home-tool-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 76px;
  gap: 10px;
  overflow: hidden;
  padding: 11px;
  color: #163153;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(232, 247, 255, 0.96), rgba(190, 229, 255, 0.9)),
    #dff4ff;
  box-shadow: 0 18px 38px rgba(21, 82, 165, 0.2);
  cursor: pointer;
}

.home-tool-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: 8px;
  width: 86px;
  height: 22px;
  opacity: 0.1;
  background: currentColor;
  transform: skewX(-22deg);
}

.home-tool-card.featured {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(37, 119, 255, 0.98), rgba(83, 180, 255, 0.96)),
    #2f7cff;
}

.home-tool-card.primary {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(37, 119, 255, 0.98), rgba(83, 180, 255, 0.96)),
    #2f7cff;
}

.home-tool-card.warm {
  background:
    linear-gradient(145deg, rgba(255, 248, 228, 0.98), rgba(255, 218, 175, 0.94)),
    #fff0d8;
}

.home-tool-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 14px 26px rgba(39, 127, 238, 0.24);
}

.home-tool-card.featured .home-tool-icon,
.home-tool-card.primary .home-tool-icon {
  color: var(--blue);
  background: rgba(255, 255, 255, 0.92);
}

.home-tool-card.warm .home-tool-icon {
  background: linear-gradient(135deg, var(--amber), var(--coral));
}

.home-tool-icon svg {
  width: 22px;
  height: 22px;
}

.home-tool-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-tool-copy strong {
  font-size: 15px;
  line-height: 1.15;
}

.home-tool-copy span {
  color: rgba(22, 49, 83, 0.64);
  font-size: 12px;
  line-height: 1.35;
}

.home-tool-card.featured .home-tool-copy span,
.home-tool-card.primary .home-tool-copy span {
  color: rgba(255, 255, 255, 0.82);
}

.home-tool-action {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  color: #1167d8;
  font-size: 13px;
  font-weight: 950;
}

.home-tool-action svg {
  width: 15px;
  height: 15px;
}

.home-tool-card.featured .home-tool-action,
.home-tool-card.primary .home-tool-action {
  color: #fff;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.section-title {
  display: grid;
  gap: 4px;
}

.section-title h2 {
  font-size: 20px;
  line-height: 1.2;
}

.section-title p {
  color: var(--muted);
  font-size: 13px;
}

.grid {
  display: grid;
  gap: 12px;
}

.action-card,
.task-row,
.employee-card,
.surface,
.plan-card,
.admin-tile,
.table-card,
.ticket-lane,
.template-row,
.timeline-row,
.document-row,
.reminder-row {
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.home-priority-grid,
.home-service-grid {
  display: grid;
  gap: 12px;
}

.risk-ring-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 14px;
}

.risk-ring {
  display: grid;
  width: 118px;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(var(--blue) 0 var(--score), rgba(11, 35, 71, 0.09) var(--score) 360deg) border-box;
  border: 11px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(11, 35, 71, 0.06);
}

.risk-ring strong {
  font-size: 30px;
  line-height: 1;
}

.risk-ring span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.risk-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.risk-summary-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.risk-summary-copy > strong {
  font-size: 16px;
}

.risk-summary-copy > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.risk-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.risk-mini-stats b {
  display: grid;
  gap: 3px;
  min-height: 44px;
  place-items: center;
  color: var(--ink);
  border: 1px solid rgba(37, 137, 189, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 17px;
}

.risk-mini-stats small {
  color: var(--muted);
  font-size: 11px;
}

.risk-ring-stats {
  display: grid;
  gap: 8px;
}

.risk-ring-stats div {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid rgba(37, 137, 189, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.risk-ring-stats strong {
  font-size: 17px;
}

.risk-ring-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.priority-row {
  background: rgba(255, 255, 255, 0.72);
}

.legal-ai-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(53, 120, 255, 0.28);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(222, 244, 255, 0.9)),
    var(--panel);
  box-shadow: 0 20px 46px rgba(35, 117, 221, 0.16);
}

.legal-ai-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.advisor-panel {
  display: grid;
  gap: 14px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(255, 236, 228, 0.8)),
    var(--panel);
}

.advisor-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.advisor-steps div {
  min-height: 70px;
  padding: 12px;
  border: 1px solid rgba(255, 123, 105, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.advisor-steps strong {
  display: block;
  color: var(--coral);
  font-size: 18px;
}

.advisor-steps span {
  display: block;
  margin-top: 8px;
  color: #395f79;
  font-size: 13px;
  font-weight: 900;
}

.business-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.business-card {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  border: 1px solid rgba(37, 137, 189, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(236, 248, 255, 0.78)),
    #fff;
  cursor: pointer;
}

.business-card strong {
  font-size: 15px;
}

.business-card > span:last-child {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.knowledge-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.knowledge-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 10px;
  color: var(--ink);
  text-align: left;
  border: 1px solid rgba(37, 137, 189, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  cursor: pointer;
}

.knowledge-row > svg {
  width: 16px;
  height: 16px;
  color: #507491;
}

.template-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.template-chip-grid button {
  min-height: 40px;
  color: #245c83;
  border: 1px solid rgba(37, 137, 189, 0.14);
  border-radius: 8px;
  background: rgba(230, 249, 255, 0.72);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.case-panel {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.82)),
    var(--panel);
}

.case-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.case-grid div {
  display: grid;
  gap: 7px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(37, 137, 189, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.case-grid strong {
  font-size: 15px;
}

.case-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.surface {
  padding: 14px;
}

.surface.tight {
  padding: 10px;
}

.today-list,
.doc-list,
.reminder-list,
.timeline-list,
.ticket-list,
.company-list,
.template-list {
  display: grid;
  gap: 10px;
}

.task-row,
.document-row,
.reminder-row,
.timeline-row,
.template-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 10px;
  box-shadow: none;
}

.status-dot {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.status-dot.warn {
  background: linear-gradient(135deg, var(--amber), var(--coral));
}

.status-dot.safe {
  background: linear-gradient(135deg, var(--mint), var(--cyan));
}

.status-dot.risk {
  background: linear-gradient(135deg, var(--danger), var(--coral));
}

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

.row-main strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-main span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  color: #2e5f7f;
  border: 1px solid rgba(45, 157, 206, 0.2);
  border-radius: 8px;
  background: rgba(230, 249, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.badge.hot {
  color: #9f3329;
  border-color: rgba(255, 123, 105, 0.26);
  background: rgba(255, 227, 215, 0.72);
}

.badge.ok {
  color: #21755e;
  border-color: rgba(84, 201, 165, 0.24);
  background: rgba(227, 250, 244, 0.76);
}

.badge.dark {
  color: #fff;
  border-color: transparent;
  background: #0b2347;
}

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

.action-card {
  display: grid;
  min-height: 116px;
  align-content: space-between;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(38, 113, 177, 0.1);
}

.action-card:hover,
.nav-pill:hover,
.bottom-nav button:hover,
.primary-button:hover,
.ghost-button:hover,
.small-action:hover,
.chip-button:hover,
.employee-card:hover {
  transform: translateY(-2px);
}

.primary-button:disabled,
.ghost-button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
}

.action-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--violet));
}

.action-icon svg {
  width: 22px;
  height: 22px;
}

.action-card strong {
  font-size: 16px;
}

.action-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.ai-panel {
  display: grid;
  gap: 12px;
}

.ai-input {
  display: grid;
  gap: 10px;
}

.ai-input textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  color: var(--ink);
  border: 1px solid rgba(37, 137, 189, 0.18);
  border-radius: 8px;
  outline: 0;
  background: rgba(255, 255, 255, 0.74);
  padding: 12px;
}

.ai-result {
  display: none;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(84, 201, 165, 0.22);
  border-radius: 8px;
  background: rgba(235, 255, 249, 0.76);
}

.ai-result.visible {
  display: grid;
}

.ai-answer {
  overflow: auto;
  margin: 0;
  color: #375d78;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.65;
}

.result-grid {
  display: grid;
  gap: 8px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #315875;
  font-size: 13px;
}

.primary-button,
.ghost-button,
.small-action,
.chip-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 12px 24px rgba(35, 139, 231, 0.22);
  padding: 0 14px;
}

.ghost-button {
  color: #245c83;
  border: 1px solid rgba(39, 134, 184, 0.18);
  background: rgba(255, 255, 255, 0.74);
  padding: 0 14px;
}

.small-action {
  min-height: 34px;
  padding: 0 10px;
  color: #245c83;
  background: rgba(230, 249, 255, 0.9);
}

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip-button {
  min-height: 36px;
  padding: 0 12px;
  flex: 0 0 auto;
  color: #416780;
  background: rgba(255, 255, 255, 0.74);
}

.chip-button.active {
  color: #fff;
  background: #0b2347;
}

.employees-layout {
  display: grid;
  gap: 12px;
}

.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(37, 137, 189, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
}

.searchbar svg {
  width: 18px;
  height: 18px;
  color: #62839b;
}

.searchbar input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.employee-list {
  display: grid;
  gap: 10px;
}

.employee-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
  cursor: pointer;
}

.avatar {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  font-weight: 950;
}

.employee-card.selected {
  outline: 2px solid rgba(33, 199, 223, 0.52);
}

.employee-meta {
  min-width: 0;
}

.employee-meta strong {
  display: block;
  font-size: 15px;
}

.employee-meta span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-score {
  display: grid;
  gap: 5px;
  text-align: right;
}

.risk-score strong {
  font-size: 18px;
}

.risk-score span {
  color: var(--muted);
  font-size: 11px;
}

.detail-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.detail-item {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(37, 137, 189, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}

.detail-item span {
  color: var(--muted);
  font-size: 12px;
}

.detail-item strong {
  font-size: 14px;
}

.timeline-list {
  margin-top: 12px;
}

.timeline-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.timeline-step {
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(53, 120, 255, 0.12);
}

.timeline-step.done {
  background: var(--mint);
  box-shadow: 0 0 0 5px rgba(84, 201, 165, 0.14);
}

.timeline-step.warn {
  background: var(--coral);
  box-shadow: 0 0 0 5px rgba(255, 123, 105, 0.14);
}

.split-layout {
  display: grid;
  gap: 12px;
}

.doc-board {
  display: grid;
  gap: 12px;
}

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

.file-input {
  display: none;
}

.document-row.uploaded {
  border-color: rgba(84, 201, 165, 0.28);
  background: rgba(244, 255, 251, 0.82);
}

.upload-preview {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 8px !important;
  white-space: normal !important;
}

.upload-preview img {
  width: 54px;
  height: 40px;
  object-fit: cover;
  border: 1px solid rgba(37, 137, 189, 0.14);
  border-radius: 8px;
}

.upload-preview b {
  color: #21755e;
  font-size: 11px;
}

.reminder-date {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: #0b2347;
}

.reminder-date strong {
  font-size: 16px;
  line-height: 1;
}

.reminder-date span {
  font-size: 11px;
}

.ticket-form {
  display: grid;
  gap: 10px;
}

.form-grid {
  display: grid;
  gap: 10px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  color: #315875;
  font-size: 12px;
  font-weight: 900;
}

.field input,
.field select,
.field textarea {
  min-height: 44px;
  width: 100%;
  color: var(--ink);
  border: 1px solid rgba(37, 137, 189, 0.16);
  border-radius: 8px;
  outline: 0;
  background: rgba(255, 255, 255, 0.74);
  padding: 10px 12px;
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.quick-form-panel {
  border-color: rgba(53, 120, 255, 0.22);
}

.quick-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.full-field {
  grid-column: 1 / -1;
}

.member-page {
  gap: 14px;
}

.member-hero {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  min-height: 260px;
  padding: 18px;
  color: #fff;
  border-radius: 8px;
  background:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 62px),
    linear-gradient(135deg, #10316f 0%, #2f7cff 58%, #22c7de 100%);
  box-shadow: 0 24px 56px rgba(25, 95, 204, 0.24);
}

.member-hero .eyebrow {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.14);
}

.member-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  max-width: 680px;
  gap: 10px;
}

.member-hero h1 {
  max-width: 560px;
  color: #fff;
  font-size: 28px;
  line-height: 1.2;
}

.member-hero p {
  max-width: 580px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.6;
}

.member-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.member-visual {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  width: 154px;
  height: 154px;
  place-items: center;
}

.member-core {
  display: grid;
  width: 94px;
  height: 94px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
}

.member-core svg {
  width: 22px;
  height: 22px;
}

.member-core strong {
  margin-top: 3px;
  font-size: 24px;
  line-height: 1;
}

.member-core span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
}

.motion-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 14px 28px rgba(35, 119, 221, 0.24);
  animation: iconFloat 3.8s ease-in-out infinite;
}

.motion-icon svg {
  width: 21px;
  height: 21px;
}

.motion-icon.one,
.motion-icon.two,
.motion-icon.three {
  position: absolute;
}

.motion-icon.one {
  top: 0;
  left: 18px;
}

.motion-icon.two {
  right: 0;
  top: 42px;
  animation-delay: 0.6s;
}

.motion-icon.three {
  bottom: 8px;
  left: 0;
  animation-delay: 1.2s;
}

.motion-icon.small {
  width: 38px;
  height: 38px;
}

.plan-motion {
  color: var(--blue);
  background: rgba(230, 249, 255, 0.92);
  box-shadow: none;
}

@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.member-benefit-grid {
  display: grid;
  gap: 10px;
}

.member-benefit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 34px rgba(38, 113, 177, 0.08);
}

.member-benefit strong {
  font-size: 15px;
}

.member-benefit p {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.premium-lawyer-card {
  position: relative;
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 16px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(10, 36, 78, 0.96), rgba(25, 101, 177, 0.92) 58%, rgba(27, 184, 198, 0.88)),
    var(--ink);
  box-shadow: 0 20px 46px rgba(23, 87, 158, 0.2);
}

.premium-lawyer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 28px 28px;
}

.premium-lawyer-copy,
.premium-lawyer-actions {
  position: relative;
  z-index: 1;
}

.premium-lawyer-copy {
  display: grid;
  gap: 8px;
}

.premium-lawyer-copy h2 {
  color: #fff;
  font-size: 24px;
}

.premium-lawyer-copy p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.7;
}

.premium-lawyer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lawyer-badge-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #08284e;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  animation: iconFloat 4s ease-in-out infinite;
}

.lawyer-badge-icon svg {
  width: 22px;
  height: 22px;
}

.member-plan-panel {
  padding: 14px;
}

.plans-grid {
  display: grid;
  gap: 12px;
}

.plan-card {
  position: relative;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 16px;
}

.plan-card.recommended {
  border-color: rgba(53, 120, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(232, 249, 255, 0.95), rgba(255, 255, 255, 0.86)),
    var(--panel);
}

.plan-card.selected {
  outline: 2px solid rgba(53, 120, 255, 0.36);
}

.plan-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.plan-name .badge {
  margin-left: auto;
}

.plan-name h3 {
  font-size: 18px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price strong {
  font-size: 34px;
}

.price span {
  color: var(--muted);
  font-size: 13px;
}

.feature-list {
  display: grid;
  gap: 8px;
}

.feature-item {
  display: flex;
  gap: 8px;
  color: #395f79;
  font-size: 13px;
  line-height: 1.45;
}

.feature-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--mint);
  margin-top: 1px;
}

.annual-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.member-delivery-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  min-height: 76px;
  align-items: center;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  border: 1px solid rgba(37, 137, 189, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.member-delivery-card strong {
  font-size: 14px;
}

.member-delivery-card > span:last-child {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.admin-page {
  gap: 18px;
}

.admin-hero {
  display: grid;
  gap: 14px;
  padding: 18px;
  color: #fff;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 84px),
    linear-gradient(135deg, rgba(11, 35, 71, 0.96), rgba(21, 79, 125, 0.92));
  box-shadow: 0 22px 52px rgba(9, 31, 64, 0.22);
}

.admin-hero h1 {
  font-size: 26px;
}

.admin-hero p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.6;
}

.admin-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-tile {
  min-height: 104px;
  padding: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: none;
}

.admin-tile span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-tile strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
}

.admin-tile small {
  display: block;
  margin-top: 8px;
  color: #47708e;
  font-size: 12px;
}

.admin-grid {
  display: grid;
  gap: 12px;
}

.backend-panel {
  border-color: rgba(53, 120, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(231, 248, 255, 0.86)),
    var(--panel);
}

.backend-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.api-config-form,
.upload-queue {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(37, 137, 189, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.api-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.backend-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.upload-queue-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 8px;
  border: 1px solid rgba(84, 201, 165, 0.16);
  border-radius: 8px;
  background: rgba(244, 255, 251, 0.78);
}

.upload-queue-row img {
  width: 54px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
}

.chart {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.bar-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  color: #395f79;
  font-size: 12px;
}

.bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(11, 35, 71, 0.08);
}

.bar-fill {
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  overflow: hidden;
  font-size: 12px;
}

.data-table th,
.data-table td {
  padding: 11px 8px;
  border-bottom: 1px solid rgba(11, 35, 71, 0.08);
  text-align: left;
  white-space: nowrap;
}

.data-table th {
  color: #56738c;
  font-weight: 900;
}

.data-table td {
  color: #244864;
}

.table-wrap {
  overflow-x: auto;
}

.ticket-lane {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lane-head strong {
  font-size: 15px;
}

.ticket-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(37, 137, 189, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.ticket-item p {
  color: #395f79;
  font-size: 12px;
  line-height: 1.5;
}

.toast {
  position: fixed;
  right: 14px;
  bottom: 82px;
  z-index: 30;
  max-width: min(340px, calc(100% - 28px));
  padding: 12px 14px;
  color: #fff;
  border-radius: 8px;
  background: #0b2347;
  box-shadow: 0 18px 42px rgba(11, 35, 71, 0.26);
  transform: translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.bottom-nav {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  max-width: 560px;
  margin: 0 auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 48px rgba(34, 92, 145, 0.2);
  backdrop-filter: blur(18px);
}

.bottom-nav button {
  display: grid;
  min-height: 54px;
  place-items: center;
  gap: 2px;
  color: #65819a;
  border-radius: 8px;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
}

.bottom-nav button.active {
  color: #fff;
  background: #0b2347;
}

.bottom-nav button:nth-child(n + 6) {
  display: none;
}

.empty-state {
  padding: 20px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed rgba(37, 137, 189, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

@media (min-width: 720px) {
  .app-shell {
    padding: 22px 22px 34px;
  }

  .desktop-nav {
    display: flex;
  }

  .bottom-nav {
    display: none;
  }

  .hero {
    min-height: 340px;
    padding: 32px 28px 24px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .hero p {
    font-size: 15px;
  }

  .hero-bot {
    right: 18px;
    top: 50px;
    width: 240px;
  }

  .home-tool-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-tool-card.featured {
    grid-row: auto;
    min-height: 92px;
  }

  .home-priority-grid,
  .home-service-grid,
  .split-layout,
  .employees-layout,
  .doc-board,
  .admin-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .business-grid,
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .backend-grid {
    grid-template-columns: 0.95fr 1.05fr;
  }

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

  .premium-lawyer-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .premium-lawyer-actions {
    justify-content: flex-end;
    min-width: 270px;
  }

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

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

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

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

  .admin-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .route-actions .ghost-button {
    display: inline-flex;
  }
}

@media (min-width: 1020px) {
  .app-shell.admin-mode {
    width: min(1440px, 100%);
  }

  .hero-content {
    max-width: 56%;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero-bot {
    width: 270px;
  }

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

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

  .admin-grid {
    grid-template-columns: 1.1fr 1fr 0.9fr;
  }

  .admin-wide {
    grid-column: span 2;
  }

  .admin-hero {
    grid-template-columns: 1fr 1.4fr;
    align-items: center;
  }
}

@media (max-width: 430px) {
  .app-shell {
    padding-right: 12px;
    padding-left: 12px;
  }

  .brand-title {
    font-size: 17px;
  }

  .hero {
    min-height: 318px;
  }

  .hero-content {
    max-width: 68%;
  }

  .hero h1 {
    font-size: 27px;
  }

  .hero-bot {
    right: -36px;
    top: 64px;
    width: 164px;
  }

  .member-hero {
    min-height: 318px;
    padding-bottom: 124px;
  }

  .member-hero h1 {
    font-size: 24px;
  }

  .member-visual {
    right: 8px;
    bottom: 6px;
    transform: scale(0.86);
    transform-origin: right bottom;
  }

  .upload-queue-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .upload-queue-row .badge {
    grid-column: 2;
    justify-self: start;
  }

  .home-tool-card {
    min-height: 76px;
    padding: 10px;
  }

  .home-tool-card.featured {
    min-height: 76px;
  }

  .home-tool-copy strong {
    font-size: 15px;
  }

  .home-tool-copy span {
    font-size: 12px;
  }

  .risk-ring-wrap {
    grid-template-columns: 1fr;
  }

  .risk-ring {
    width: 98px;
    justify-self: center;
  }

  .risk-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

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

  .task-row,
  .document-row,
  .reminder-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .task-row .badge,
  .document-row .doc-row-actions,
  .reminder-row .badge {
    grid-column: 2;
    justify-self: start;
  }

  .doc-row-actions {
    justify-content: flex-start;
  }

  .route-actions .ghost-button {
    display: none;
  }
}

/* 2026 ecosystem workspace */
.portal-home {
  gap: 18px;
}

.portal-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 24px;
  color: #fff;
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(12, 46, 92, 0.98), rgba(28, 102, 187, 0.96) 64%, rgba(29, 155, 172, 0.92)),
    #123d71;
  box-shadow: 0 18px 44px rgba(20, 77, 137, 0.22);
}

.portal-welcome > div:first-child {
  display: grid;
  gap: 9px;
  max-width: 780px;
}

.portal-welcome .eyebrow {
  color: #fff;
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
}

.portal-welcome h1 {
  font-size: 30px;
  line-height: 1.25;
}

.portal-welcome p {
  color: rgba(255,255,255,.76);
  line-height: 1.7;
}

.portal-date {
  display: grid;
  min-width: 112px;
  place-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
}

.portal-date strong { font-size: 34px; }
.portal-date span { font-size: 12px; }

.portal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  overflow: hidden;
}

.portal-metrics > div {
  display: flex;
  min-height: 96px;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-right: 1px solid var(--line);
}

.portal-metrics > div:last-child { border-right: 0; }
.portal-metrics p { display: grid; grid-template-columns: auto auto; align-items: end; gap: 3px; color: var(--muted); font-size: 12px; }
.portal-metrics p > span { grid-column: 1 / -1; }
.portal-metrics strong { color: var(--ink); font-size: 28px; line-height: 1; }
.portal-metrics small { color: var(--muted); }

.metric-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
}
.metric-icon svg { width: 22px; }
.metric-icon.cyan { color:#0d8f99; background:#dff8f5; }
.metric-icon.blue { color:#276ee8; background:#e6efff; }
.metric-icon.amber { color:#bd7414; background:#fff2d9; }
.metric-icon.violet { color:#6755c9; background:#eeeaff; }

.portal-tools {
  display: grid;
  gap: 12px;
}

.portal-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.portal-tool {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 226px;
  align-items: start;
  gap: 16px;
  overflow: hidden;
  padding: 24px;
  color: var(--ink);
  text-align: left;
  border: 1px solid rgba(53,120,255,.18);
  border-radius: 8px;
  background: linear-gradient(145deg,#f4f8ff,#fff 68%);
  box-shadow: 0 14px 34px rgba(24, 71, 114, 0.1);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.portal-tool::after {
  content:"";
  position:absolute;
  right:-48px;
  bottom:-70px;
  width:180px;
  height:180px;
  border:32px solid rgba(53,120,255,.055);
  border-radius:50%;
  pointer-events:none;
}

.portal-tool:hover { transform: translateY(-4px); border-color:rgba(53,120,255,.42); box-shadow:0 22px 46px rgba(24,71,114,.16); }
.portal-tool:active { transform:translateY(-1px); }
.portal-tool.red { border-color:rgba(231,90,85,.2); background:linear-gradient(145deg,#fff5f3,#fff 68%); }
.portal-tool.green { border-color:rgba(43,169,140,.2); background:linear-gradient(145deg,#effbf7,#fff 68%); }
.portal-tool.violet { border-color:rgba(118,101,216,.2); background:linear-gradient(145deg,#f5f2ff,#fff 68%); }
.portal-tool.red::after { border-color:rgba(231,90,85,.055); }
.portal-tool.green::after { border-color:rgba(43,169,140,.055); }
.portal-tool.violet::after { border-color:rgba(118,101,216,.055); }
.portal-tool-content { display:grid; gap:8px; min-width:0; }
.portal-tool small { color:#557086; font-size:11px; font-weight:800; }
.portal-tool strong { font-size:22px; line-height:1.2; }
.portal-tool em { max-width:390px; color:var(--muted); font-size:13px; font-style:normal; line-height:1.65; }

.portal-tool-icon {
  display:grid;
  width:56px;
  height:56px;
  place-items:center;
  color:#fff;
  border-radius:8px;
  background:#3178ec;
  box-shadow:0 12px 24px rgba(49,120,236,.24);
}
.portal-tool.red .portal-tool-icon { background:#e75a55; }
.portal-tool.green .portal-tool-icon { background:#2ba98c; }
.portal-tool.violet .portal-tool-icon { background:#7665d8; }
.portal-tool-icon svg { width:27px; }

.portal-tool-number {
  position:absolute;
  top:16px;
  right:18px;
  color:rgba(22,49,83,.12);
  font-size:28px;
  font-weight:950;
}

.portal-tool-features {
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  margin-top:3px;
}

.portal-tool-features i {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#355a75;
  font-size:11px;
  font-style:normal;
  font-weight:800;
}

.portal-tool-features svg { width:14px; color:#2ba98c; }

.portal-tool-action {
  display:inline-flex;
  width:fit-content;
  min-height:38px;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:0 13px;
  color:#fff;
  border-radius:8px;
  background:#3178ec;
  box-shadow:0 10px 20px rgba(49,120,236,.18);
  font-size:12px;
}

.portal-tool.red .portal-tool-action { background:#d8514c; }
.portal-tool.green .portal-tool-action { background:#238d76; }
.portal-tool.violet .portal-tool-action { background:#6857c5; }
.portal-tool-action svg { width:15px; }

.portal-main-grid {
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:14px;
}
.portal-main-grid.lower { grid-template-columns: .9fr 1.1fr; }
.portal-panel { min-width:0; }
.legal-portal-card { background:linear-gradient(145deg,#fff,#f3f7ff); }
.legal-portal-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; margin:18px 0; }
.advisor-profile { display:flex; align-items:center; gap:10px; }
.advisor-profile > span { display:grid; width:42px; height:42px; place-items:center; flex:0 0 auto; color:#fff; border-radius:8px; background:linear-gradient(135deg,#276ee8,#2ba98c); font-weight:900; }
.advisor-profile div { display:grid; gap:4px; }
.advisor-profile p { color:var(--muted); font-size:12px; line-height:1.5; }
.service-speed { display:grid; justify-items:end; gap:3px; }
.service-speed b { font-size:22px; color:#276ee8; }
.service-speed span { color:var(--muted); font-size:11px; }
.legal-quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.legal-quick-actions button { display:flex; min-height:44px; align-items:center; justify-content:center; gap:6px; color:#28536f; border:1px solid var(--line); border-radius:8px; background:#fff; font-weight:800; cursor:pointer; }
.legal-quick-actions svg { width:16px; }

.usage-chart { display:flex; height:150px; align-items:end; justify-content:space-around; gap:12px; padding:16px 8px 0; border-bottom:1px solid var(--line); }
.usage-chart span { position:relative; width:54px; height:var(--value); border-radius:6px 6px 0 0; background:linear-gradient(180deg,#2f7cf2,#45b9cb); }
.usage-chart b { position:absolute; bottom:-28px; left:50%; width:72px; color:var(--muted); text-align:center; transform:translateX(-50%); font-size:11px; }

.calculator-heading { padding-bottom:0; }
.calculator-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:14px; align-items:start; }
.calculator-form-card,.scenario-card { display:grid; gap:18px; }
.protection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.protection-grid label { display:flex; min-height:42px; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#f8fbfd; font-size:12px; }
.calculator-warning { padding:11px 12px; color:#8a5614; border:1px solid #f2d39a; border-radius:8px; background:#fff8e9; font-size:12px; line-height:1.6; }
.scenario-group { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.scenario-group summary { display:flex; min-height:48px; align-items:center; justify-content:space-between; padding:0 14px; color:var(--ink); background:#f4f8fb; font-weight:900; cursor:pointer; }
.scenario-group summary span { color:var(--muted); font-size:11px; }
.scenario-list { display:grid; max-height:320px; overflow:auto; }
.scenario-option { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; min-height:54px; padding:9px 12px; text-align:left; border-top:1px solid var(--line); background:#fff; cursor:pointer; }
.scenario-option.active { background:#eaf3ff; box-shadow:inset 3px 0 #3578ff; }
.scenario-option > span { display:flex; align-items:center; gap:8px; }
.scenario-option b { color:#6c8296; font-size:11px; }
.scenario-option strong { font-size:12px; line-height:1.4; }
.comp-type { display:inline-flex; min-width:38px; min-height:25px; align-items:center; justify-content:center; padding:0 7px; border-radius:6px; color:#1d6fb5; background:#e2f2ff; font-size:11px; font-style:normal; font-weight:900; }
.type-0 { color:#178269; background:#def7ed; }
.type-Nplus1 { color:#6550bd; background:#eee9ff; }
.type-2N { color:#bd3c38; background:#ffe8e6; }
.calculator-submit { width:100%; }
.severance-result { display:grid; gap:16px; padding:0; overflow:hidden; }
.result-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; color:#fff; background:linear-gradient(110deg,#143d71,#2a7bd7); }
.result-hero span { color:rgba(255,255,255,.72); font-size:12px; }
.result-hero h2 { margin-top:4px; }
.result-hero > strong { font-size:30px; }
.result-comparison { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0 18px; }
.result-comparison article { display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#f9fbfd; }
.result-comparison article p { color:var(--muted); font-size:11px; line-height:1.5; }
.severance-result > .legal-disclaimer,.severance-result > .hero-cta-row { margin-right:18px; margin-left:18px; }
.severance-result > .hero-cta-row { margin-bottom:18px; }

.knowledge-toolbar { display:grid; gap:12px; }
.search-field { display:flex; align-items:center; gap:8px; min-height:46px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:#f7fafc; }
.search-field svg { width:18px; color:var(--muted); }
.search-field input { width:100%; border:0; outline:0; background:transparent; }
.knowledge-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.knowledge-tabs button { min-height:34px; padding:0 12px; color:#567087; border-radius:8px; background:#eef3f7; cursor:pointer; }
.knowledge-tabs button.active { color:#fff; background:#205fa9; }
.knowledge-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.policy-card { display:grid; min-height:220px; gap:12px; align-content:start; }
.policy-card .lane-head > span:last-child { color:var(--muted); font-size:11px; }
.policy-card h2 { font-size:17px; line-height:1.45; }
.policy-card p { color:var(--muted); font-size:13px; line-height:1.7; }
.policy-meta { display:flex; justify-content:space-between; gap:8px; margin-top:auto; color:#74889a; font-size:11px; }

.legal-dept-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:28px; color:#fff; border-radius:8px; background:linear-gradient(120deg,#123967,#1c5b9c 62%,#247f8d); box-shadow:0 18px 44px rgba(17,68,120,.22); }
.legal-dept-hero > div:first-child { display:grid; gap:10px; max-width:780px; }
.legal-dept-hero .eyebrow { color:#fff; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.1); }
.legal-dept-hero h1 { font-size:30px; }
.legal-dept-hero p { color:rgba(255,255,255,.78); line-height:1.7; }
.legal-service-badge { display:grid; min-width:140px; place-items:center; padding:18px; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:rgba(255,255,255,.1); }
.legal-service-badge strong { font-size:27px; }
.legal-service-badge span { margin-top:4px; font-weight:900; }
.legal-service-badge small { margin-top:8px; color:rgba(255,255,255,.66); }
.legal-dept-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.legal-dept-stats > div { display:grid; gap:6px; padding:15px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 10px 24px rgba(24,71,114,.07); }
.legal-dept-stats span { color:var(--muted); font-size:11px; }
.legal-dept-stats strong { font-size:19px; }
.legal-dept-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:14px; align-items:start; }
.legal-dept-side { display:grid; gap:14px; }
.legal-team-card,.service-report-card { display:grid; gap:14px; }
.report-mini-row { display:flex; min-height:38px; align-items:center; justify-content:space-between; gap:12px; padding:0 10px; border-radius:8px; background:#f4f8fb; color:var(--muted); font-size:12px; }
.report-mini-row b { color:var(--ink); }

@media (max-width: 900px) {
  .portal-tool-grid,.portal-metrics,.legal-dept-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal-main-grid,.portal-main-grid.lower,.calculator-layout,.legal-dept-layout { grid-template-columns:1fr; }
  .knowledge-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .portal-welcome,.legal-dept-hero { grid-template-columns:1fr; padding:20px 18px; }
  .portal-welcome h1,.legal-dept-hero h1 { font-size:24px; }
  .portal-date,.legal-service-badge { display:none; }
  .portal-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal-metrics > div { min-height:76px; padding:12px; }
  .portal-metrics strong { font-size:22px; }
  .portal-tool-grid { grid-template-columns:1fr; }
  .portal-tool { grid-template-columns:48px minmax(0,1fr); min-height:206px; padding:18px; }
  .portal-tool-icon { width:48px; height:48px; }
  .portal-tool-icon svg { width:23px; }
  .portal-tool strong { font-size:19px; }
  .legal-portal-summary,.protection-grid { grid-template-columns:1fr; }
  .service-speed { justify-items:start; }
  .legal-quick-actions { grid-template-columns:1fr; }
  .result-comparison,.knowledge-card-grid { grid-template-columns:1fr; }
  .result-hero { align-items:flex-start; }
  .result-hero > strong { font-size:24px; }
  .compliance-question .segmented { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

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

.admin-login-body {
  background:
    linear-gradient(118deg, rgba(21, 112, 255, 0.16), transparent 34%),
    linear-gradient(242deg, rgba(33, 199, 223, 0.18), transparent 32%),
    #eef9ff;
}

.admin-auth-shell,
.admin-console {
  position: relative;
  width: min(1180px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 28px 14px 88px;
}

.admin-auth-shell {
  display: grid;
  place-items: center;
}

.admin-auth-card,
.member-login-card {
  width: min(430px, 100%);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.admin-auth-card {
  display: grid;
  gap: 22px;
}

.captcha-row {
  display: grid;
  grid-template-columns: 1fr 128px;
  gap: 10px;
  align-items: end;
}

.captcha-image {
  display: grid;
  min-height: 48px;
  place-items: center;
  overflow: hidden;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef9ff;
  font-weight: 900;
  cursor: pointer;
}

.captcha-image img {
  display: block;
  width: 120px;
  height: 44px;
}

.admin-console-top {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0 14px;
  backdrop-filter: blur(18px);
}

.employee-admin-list,
.member-download-list,
.member-file-list {
  display: grid;
  gap: 10px;
}

.admin-employee-row {
  grid-template-columns: auto 1fr auto;
  cursor: default;
}

.member-file-center {
  margin-top: 16px;
}

.member-download-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.member-login-card {
  align-self: end;
  justify-self: end;
}

.member-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 22, 44, 0.42);
  backdrop-filter: blur(12px);
}

.modal-card {
  width: min(760px, 100%);
  max-height: min(86dvh, 760px);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(13, 56, 98, 0.28);
}

.chat-thread,
.compliance-question-list,
.lifecycle-table,
.crm-grid {
  display: grid;
  gap: 10px;
}

.chat-bubble {
  padding: 13px;
  border-radius: 8px;
  background: #f3f8fb;
}

.chat-bubble.user {
  margin-left: auto;
  background: #e8f3ff;
}

.chat-bubble.assistant {
  border: 1px solid rgba(53, 120, 255, 0.18);
}

.chat-bubble pre,
.ai-answer {
  overflow: auto;
  white-space: pre-wrap;
}

.legal-disclaimer {
  margin: 12px 0 0;
  padding: 12px;
  color: #4f6479;
  border: 1px solid rgba(255, 182, 75, 0.35);
  border-radius: 8px;
  background: rgba(255, 246, 225, 0.86);
  font-size: 13px;
  line-height: 1.7;
}

.check-hero {
  min-height: 260px;
}

.compliance-question {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.question-index {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  font-weight: 900;
}

.segmented {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 8px;
  background: #eef5fa;
}

.segmented button {
  min-width: 56px;
  min-height: 34px;
  color: #315875;
  border-radius: 8px;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.segmented button.active {
  color: #fff;
  background: var(--blue);
}

.report-summary-grid,
.current-plan-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

/* Home and customer tool workspaces */
.home-page {
  gap: 22px;
}

.compact-tool-surface {
  padding: 18px;
}

.ai-conversation-card {
  display: grid;
  min-height: 0;
  gap: 12px;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
}

.ai-chat-toolbar {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 252, 255, 0.94);
}

.ai-chat-toolbar > div {
  display: grid;
  gap: 3px;
}

.ai-chat-toolbar strong {
  font-size: 17px;
}

.ai-chat-toolbar span {
  color: var(--muted);
  font-size: 12px;
}

.ai-chat-scroll {
  display: grid;
  height: min(58dvh, 620px);
  align-content: start;
  gap: 12px;
  overflow-y: auto;
  padding: 18px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  background:
    linear-gradient(180deg, rgba(238, 248, 255, 0.72), rgba(255, 255, 255, 0.3)),
    #f8fbfd;
}

.ai-chat-scroll.compact {
  height: 330px;
}

.chat-message {
  display: grid;
  width: min(86%, 720px);
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid rgba(31, 103, 181, 0.11);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(35, 91, 144, 0.08);
}

.chat-message.user {
  justify-self: end;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #236fe9, #178fbd);
}

.chat-message.assistant {
  justify-self: start;
  border-left: 3px solid var(--mint);
}

.chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.chat-message-meta span {
  color: var(--muted);
  font-size: 11px;
}

.chat-message.user .chat-message-meta span {
  color: rgba(255, 255, 255, 0.72);
}

.chat-message-body {
  color: #345873;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.75;
}

.chat-message.user .chat-message-body {
  color: #fff;
}

.chat-message-body.clamped {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.chat-detail-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: #176fd1;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.chat-detail-link svg {
  width: 14px;
}

.chat-empty-state {
  display: grid;
  max-width: 520px;
  place-items: center;
  justify-self: center;
  align-self: center;
  gap: 10px;
  padding: 30px 18px;
  color: var(--muted);
  text-align: center;
}

.chat-empty-state strong {
  color: var(--ink);
  font-size: 17px;
}

.chat-empty-state p {
  font-size: 13px;
  line-height: 1.7;
}

.ai-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 0 14px;
}

.ai-chat-composer textarea {
  width: 100%;
  min-height: 56px;
  max-height: 140px;
  resize: vertical;
  padding: 11px 12px;
  color: var(--ink);
  border: 1px solid rgba(30, 105, 174, 0.18);
  border-radius: 8px;
  outline: 0;
  background: #f8fbfd;
  line-height: 1.55;
}

.ai-chat-composer textarea:focus {
  border-color: rgba(53, 120, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(53, 120, 255, 0.1);
}

.ai-send-button {
  width: 54px;
  min-height: 54px;
  padding: 0;
  align-self: end;
}

.ai-inline-note {
  padding: 0 16px 14px;
  color: #718397;
  font-size: 11px;
  line-height: 1.5;
}

.typing-dots {
  display: flex;
  gap: 5px;
  padding: 5px 0;
}

.typing-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  animation: typingPulse 1s ease-in-out infinite;
}

.typing-dots i:nth-child(2) { animation-delay: 140ms; }
.typing-dots i:nth-child(3) { animation-delay: 280ms; }

@keyframes typingPulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

.tool-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px 8px;
}

.tool-page-heading > div {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.tool-page-heading h1 {
  font-size: 32px;
  line-height: 1.2;
}

.tool-page-heading p {
  color: var(--muted);
  line-height: 1.7;
}

.ai-workspace-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ai-workspace-actions .legal-disclaimer {
  flex: 1;
  margin: 0;
}

.advisor-banner {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 22px;
}

.advisor-banner .section-title {
  gap: 8px;
}

.advisor-banner .section-title p {
  max-width: 720px;
  line-height: 1.65;
}

.advisor-banner-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.question-category {
  color: #257297;
  font-size: 11px;
  font-weight: 900;
}

.category-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 20px;
}

.category-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248, 252, 255, 0.86);
}

.category-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.category-score strong {
  color: var(--ink);
}

.category-score i {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: #e5edf3;
}

.category-score i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--mint));
}

.report-action-title {
  margin: 6px 0 12px;
}

@media (min-width: 720px) {
  .home-page {
    gap: 26px;
  }

  .compact-tool-surface,
  .surface {
    padding: 20px;
  }

  .ai-conversation-card {
    padding: 0;
  }

  .home-tool-card {
    min-height: 108px;
    padding: 16px;
  }

  .home-tool-copy strong {
    font-size: 17px;
  }
}

@media (max-width: 719px) {
  .tool-page-heading,
  .ai-workspace-actions,
  .advisor-banner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tool-page-heading h1 {
    font-size: 25px;
  }

  .ai-workspace-actions .primary-button,
  .advisor-banner-actions,
  .advisor-banner-actions .primary-button {
    width: 100%;
  }

  .advisor-banner-actions {
    justify-items: stretch;
  }

  .category-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compliance-question {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .compliance-question .segmented {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .segmented button {
    min-width: 0;
    padding: 0 5px;
    font-size: 11px;
  }
}

@media (max-width: 430px) {
  .ai-chat-scroll.compact {
    height: 360px;
  }

  .chat-message {
    width: 94%;
  }

  .category-score-grid {
    grid-template-columns: 1fr;
  }

  .report-summary-grid {
    grid-template-columns: 1fr;
  }
}

.lifecycle-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) minmax(120px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.lifecycle-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eef6;
}

.lifecycle-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--mint));
}

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

.crm-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.crm-card.active {
  border-color: rgba(22, 115, 255, 0.42);
  box-shadow: 0 14px 32px rgba(22, 115, 255, 0.14);
}

.crm-admin-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100dvh;
  background:
    radial-gradient(circle at 2% 6%, rgba(50, 185, 255, 0.16), transparent 22%),
    linear-gradient(180deg, #eff8ff 0%, #f8fbff 48%, #f2f6fb 100%);
}

.crm-admin-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 18px 14px;
  color: #d8e7ff;
  background: linear-gradient(180deg, #1168e8 0%, #0d3c91 58%, #10294a 100%);
}

/* Operations console aligned with the high-fidelity CRM prototype */
.crm-admin-shell {
  background: #f4f6f9;
}

.crm-admin-sidebar {
  color: #d9e5f2;
  background: #173b63;
}

.crm-nav-item.active,
.crm-nav-item:hover {
  background: #2f7eea;
}

.crm-admin-topbar {
  color: var(--ink);
  border-bottom: 1px solid #e5eaf0;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 20px rgba(24,61,99,.06);
}

.crm-admin-tabs button {
  color: #315875;
  border-color: #dfe7ef;
  background: #f7f9fb;
}

.crm-admin-search {
  color: var(--muted);
  border: 1px solid #dfe7ef;
  background: #f7f9fb;
}

.crm-admin-search input { color: var(--ink); }
.crm-admin-search input::placeholder { color: #8da0b2; }
.crm-admin-topbar .ghost-button { color:#315875; border-color:#dfe7ef; background:#fff; }

.crm-hero-card {
  color: var(--ink);
  border: 1px solid #e4e9ef;
  background: #fff;
  box-shadow: 0 10px 26px rgba(24,61,99,.07);
}

.crm-hero-card p { color: var(--muted); }
.crm-hero-focus { color:#fff; background:linear-gradient(135deg,#286fd6,#2ea4b4); }
.admin-kpis-wide { grid-template-columns:repeat(6,minmax(0,1fr)); }
.admin-kpis-wide .admin-tile { position:relative; overflow:hidden; min-height:108px; border-top:3px solid #2f7eea; }
.admin-kpis-wide .admin-tile:nth-child(2) { border-top-color:#e75a55; }
.admin-kpis-wide .admin-tile:nth-child(3) { border-top-color:#d7922b; }
.admin-kpis-wide .admin-tile:nth-child(4) { border-top-color:#7665d8; }
.admin-kpis-wide .admin-tile:nth-child(5) { border-top-color:#2ba98c; }
.admin-kpis-wide .admin-tile:nth-child(6) { border-top-color:#df6a56; }
.crm-tool-data-grid { margin-top:14px; }
.crm-tool-content-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:18px; margin-top:16px; }

@media (max-width: 1180px) {
  .admin-kpis-wide { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .admin-kpis-wide,.crm-tool-content-layout { grid-template-columns:1fr; }
}

.crm-admin-brand {
  padding: 6px 6px 18px;
}

.crm-admin-brand .brand-title,
.crm-admin-brand .brand-subtitle {
  color: #fff;
}

.crm-nav-title {
  padding: 16px 10px 8px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 800;
}

.crm-nav-item {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  color: #d8e7ff;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.crm-nav-item.active,
.crm-nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.crm-nav-item small {
  color: rgba(255, 255, 255, 0.72);
}

.crm-admin-main {
  min-width: 0;
  padding: 16px;
}

.crm-admin-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(220px, 360px) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  margin: -16px -16px 16px;
  padding: 12px 16px;
  color: #fff;
  background: linear-gradient(90deg, #1673ff, #16a6ff);
  box-shadow: 0 12px 28px rgba(31, 108, 214, 0.16);
}

.crm-admin-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.crm-admin-tabs button {
  min-height: 32px;
  padding: 0 10px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 900;
  cursor: pointer;
}

.crm-admin-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
}

.crm-admin-search input {
  width: 100%;
  color: #fff;
  border: 0;
  outline: 0;
  background: transparent;
}

.crm-admin-search input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.crm-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  min-height: 130px;
  padding: 20px;
  overflow: hidden;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(105deg, #1371f6 0%, #19a8ff 72%);
  box-shadow: var(--shadow);
}

.crm-hero-card h1,
.crm-hero-card p {
  margin: 0;
}

.crm-hero-card p {
  max-width: 820px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
}

.crm-hero-focus {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 94px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
}

.crm-hero-focus b {
  font-size: 42px;
}

.crm-section {
  margin-top: 14px;
}

.crm-workbench-grid,
.crm-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  margin-top: 14px;
}

.crm-module-grid,
.crm-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.crm-module-grid button,
.crm-mini-grid div {
  min-height: 94px;
  padding: 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f7fbff);
  box-shadow: 0 8px 20px rgba(33, 112, 214, 0.06);
}

.crm-module-grid button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.crm-module-grid i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  font-style: normal;
}

.crm-mini-grid strong,
.crm-mini-grid span {
  display: block;
}

.crm-mini-grid span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.crm-filter-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 8px 0 12px;
}

.crm-filter-tabs button {
  min-height: 34px;
  padding: 0 12px;
  color: #335a78;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.crm-filter-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: var(--blue);
}

.crm-card-list {
  margin-top: 12px;
}

.crm-form-grid,
.crm-inline-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.crm-inline-form {
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.crm-inline-form .primary-button {
  min-height: 46px;
}

.member-auth-block {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.member-auth-block > .section-title {
  max-width: 760px;
}

.member-auth-block > .section-title p {
  line-height: 1.65;
}

.upgrade-title {
  margin-top: 16px;
}

@media (max-width: 760px) {
  .captcha-row,
  .member-hero,
  .compliance-question,
  .lifecycle-row,
  .report-summary-grid,
  .current-plan-detail,
  .crm-grid {
    grid-template-columns: 1fr;
  }

  .member-login-card {
    justify-self: stretch;
  }

  .admin-console-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .crm-admin-shell,
  .crm-admin-topbar,
  .crm-hero-card,
  .crm-workbench-grid,
  .crm-detail-layout,
  .crm-module-grid,
  .crm-mini-grid,
  .crm-form-grid,
  .crm-inline-form {
    grid-template-columns: 1fr;
  }

  .crm-admin-sidebar {
    position: static;
    height: auto;
  }

  .crm-admin-main {
    padding: 12px;
  }

  .crm-admin-topbar {
    margin: -12px -12px 12px;
  }
}

@media (min-width: 721px) {
  .crm-admin-shell { background:#f4f6f9; }
  .crm-admin-sidebar { color:#d9e5f2; background:#173b63; }
  .crm-nav-item.active,.crm-nav-item:hover { background:#2f7eea; }
  .crm-admin-topbar { color:var(--ink); border-bottom:1px solid #e5eaf0; background:rgba(255,255,255,.96); box-shadow:0 8px 20px rgba(24,61,99,.06); }
  .crm-admin-tabs button { color:#315875; border-color:#dfe7ef; background:#f7f9fb; }
  .crm-admin-search { color:var(--muted); border:1px solid #dfe7ef; background:#f7f9fb; }
  .crm-admin-search input { color:var(--ink); }
  .crm-admin-search input::placeholder { color:#8da0b2; }
  .crm-admin-topbar .ghost-button { color:#315875; border-color:#dfe7ef; background:#fff; }
  .crm-hero-card { color:var(--ink); border:1px solid #e4e9ef; background:#fff; box-shadow:0 10px 26px rgba(24,61,99,.07); }
  .crm-hero-card p { color:var(--muted); }
}

@media (max-width: 600px) {
  .compliance-question .segmented { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Public marketing homepage. Enterprise metrics remain member-only. */
.marketing-home {
  gap: 42px;
}

.marketing-hero {
  position: relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  min-height: 440px;
  align-items:center;
  gap:24px;
  overflow: hidden;
  padding: 48px 42px;
  color: #fff;
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 46%,rgba(28,189,198,.19),transparent 25%),
    linear-gradient(108deg, rgba(6,29,62,.99) 0%, rgba(14,64,119,.97) 58%, rgba(17,112,130,.94) 100%),
    #0c315f;
  box-shadow: 0 24px 56px rgba(13,57,105,.25);
}

.marketing-hero::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(125deg,transparent 0 74px,rgba(255,255,255,.055) 75px 76px);
}

.marketing-hero-copy {
  position:relative;
  z-index:2;
  display:grid;
  max-width:620px;
  gap:18px;
}

.marketing-hero .eyebrow {
  color:#fff;
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
}

.marketing-hero h1 {
  max-width:600px;
  font-size:40px;
  line-height:1.18;
}

.marketing-hero p {
  max-width:560px;
  color:rgba(255,255,255,.76);
  font-size:17px;
  line-height:1.75;
}

.marketing-primary,.marketing-secondary { min-height:48px; padding:0 18px; }
.marketing-secondary { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.1); }

.marketing-proof {
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:4px;
}

.marketing-proof span {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.72);
  font-size:12px;
}
.marketing-proof svg { width:15px; color:#65d7bb; }

.steward-visual {
  position:relative;
  z-index:2;
  width:100%;
  max-width:500px;
  min-height:360px;
  justify-self:end;
  isolation:isolate;
}

.steward-visual::before {
  content:"";
  position:absolute;
  inset:38px 54px 30px;
  z-index:-2;
  border:1px solid rgba(111,226,232,.2);
  border-radius:50%;
  background:radial-gradient(circle,rgba(25,196,207,.16),rgba(28,110,174,.05) 53%,transparent 70%);
  box-shadow:inset 0 0 48px rgba(70,210,224,.08);
}

.steward-core {
  position:absolute;
  inset:50% auto auto 50%;
  width:74%;
  max-height:330px;
  object-fit:contain;
  filter:drop-shadow(0 24px 30px rgba(1,17,43,.35));
  transform:translate(-50%,-50%);
  animation:steward-core-float 5.5s ease-in-out infinite;
}

.steward-orbit {
  position:absolute;
  inset:50% auto auto 50%;
  z-index:-1;
  border:1px solid rgba(108,221,230,.26);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.steward-orbit::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:#74e0d1; box-shadow:0 0 14px #74e0d1; }
.steward-orbit-one { width:82%; aspect-ratio:1.22; animation:steward-orbit 14s linear infinite; }
.steward-orbit-one::after { top:15%; right:9%; }
.steward-orbit-two { width:64%; aspect-ratio:1; border-style:dashed; animation:steward-orbit 18s linear infinite reverse; }
.steward-orbit-two::after { left:4%; bottom:25%; }

.steward-status {
  position:absolute;
  top:14px;
  left:50%;
  display:flex;
  min-height:30px;
  align-items:center;
  gap:8px;
  padding:0 11px;
  color:#dffdf8;
  border:1px solid rgba(111,226,210,.3);
  border-radius:16px;
  background:rgba(6,34,68,.78);
  box-shadow:0 8px 22px rgba(2,20,46,.22);
  font-size:11px;
  font-weight:800;
  transform:translateX(-50%);
  backdrop-filter:blur(10px);
}
.steward-status i { width:7px; height:7px; border-radius:50%; background:#69e0bd; box-shadow:0 0 0 5px rgba(105,224,189,.12); animation:steward-pulse 2s ease-out infinite; }

.steward-module {
  position:absolute;
  display:grid;
  grid-template-columns:34px auto;
  grid-template-rows:auto auto;
  min-width:150px;
  min-height:66px;
  align-content:center;
  column-gap:10px;
  padding:10px 12px;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
  background:rgba(7,37,72,.8);
  box-shadow:0 12px 28px rgba(1,17,39,.28);
  backdrop-filter:blur(12px);
  animation:steward-module-float 4.8s ease-in-out infinite;
}
.steward-module > span { grid-row:1 / 3; display:grid; width:34px; height:34px; align-self:center; place-items:center; color:#eafffb; border-radius:7px; background:rgba(42,183,188,.22); }
.steward-module svg { width:17px; }
.steward-module small { color:#87b6d1; font-size:10px; }
.steward-module strong { margin-top:2px; font-size:12px; }
.steward-contract { top:58px; left:0; }
.steward-risk { top:68px; right:0; animation-delay:-1.1s; }
.steward-archive { bottom:24px; left:8px; animation-delay:-2.2s; }
.steward-ticket { right:4px; bottom:30px; animation-delay:-3.3s; }

@keyframes steward-core-float { 0%,100% { transform:translate(-50%,-50%); } 50% { transform:translate(-50%,-53%); } }
@keyframes steward-module-float { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes steward-orbit { to { rotate:360deg; } }
@keyframes steward-pulse { 0% { box-shadow:0 0 0 0 rgba(105,224,189,.45); } 70%,100% { box-shadow:0 0 0 8px rgba(105,224,189,0); } }

.marketing-outcomes {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  margin-top:-18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--line);
  box-shadow:0 16px 38px rgba(24,71,114,.1);
}

.marketing-outcomes > div {
  display:grid;
  min-height:112px;
  gap:7px;
  padding:20px;
  background:#fff;
}
.marketing-outcomes strong { font-size:16px; }
.marketing-outcomes span { color:var(--muted); font-size:12px; line-height:1.65; }

.marketing-kicker {
  color:#2475c2;
  font-size:12px;
  font-weight:900;
}

.marketing-tools .section-title { gap:7px; }

.marketing-section {
  display:grid;
  gap:20px;
}

.marketing-section-head {
  display:grid;
  max-width:760px;
  gap:8px;
}

.marketing-section-head h2 { font-size:28px; }
.marketing-section-head p { color:var(--muted); line-height:1.7; }

.result-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.result-grid article {
  display:flex;
  min-height:112px;
  align-items:center;
  gap:15px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 26px rgba(24,71,114,.06);
}

.result-grid article > span {
  display:grid;
  width:44px;
  height:44px;
  flex:0 0 44px;
  place-items:center;
  color:#fff;
  border-radius:8px;
  background:#2475c2;
}

.result-grid article:nth-child(2) > span { background:#cf594e; }
.result-grid article:nth-child(3) > span { background:#258e79; }
.result-grid article:nth-child(4) > span { background:#7560c9; }
.result-grid svg { width:21px; }
.result-grid article > div { display:grid; gap:6px; }
.result-grid strong { font-size:16px; }
.result-grid p { color:var(--muted); font-size:12px; line-height:1.65; }

.advantage-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.advantage-grid article {
  display:grid;
  min-height:210px;
  align-content:start;
  gap:12px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 26px rgba(24,71,114,.07);
}
.advantage-grid article > span { color:#2f7eea; font-size:13px; font-weight:900; }
.advantage-grid strong { font-size:17px; line-height:1.4; }
.advantage-grid p { color:var(--muted); font-size:13px; line-height:1.75; }

.service-flow-section {
  padding:28px;
  border:1px solid rgba(48,121,220,.15);
  border-radius:8px;
  background:#eef6ff;
}

.service-flow {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:12px;
}

.service-flow > div {
  display:grid;
  min-height:130px;
  align-content:center;
  gap:8px;
  padding:18px;
  border:1px solid rgba(48,121,220,.12);
  border-radius:8px;
  background:#fff;
}
.service-flow b { display:grid; width:30px; height:30px; place-items:center; color:#fff; border-radius:50%; background:#2f7eea; }
.service-flow strong { font-size:15px; }
.service-flow span { color:var(--muted); font-size:12px; }
.service-flow > i { color:#70a0ca; }
.service-flow > i svg { width:18px; }

.solution-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.solution-card {
  position:relative;
  display:grid;
  min-height:350px;
  align-content:start;
  gap:12px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 28px rgba(24,71,114,.08);
}
.solution-card.recommended { border-color:rgba(47,126,234,.45); box-shadow:0 18px 40px rgba(47,126,234,.14); }
.solution-recommend { position:absolute; top:12px; right:12px; padding:5px 7px; color:#fff; border-radius:6px; background:#2f7eea; font-size:10px; font-weight:900; }
.solution-card > strong { padding-right:50px; font-size:18px; }
.solution-card > b { color:#1767b3; font-size:24px; }
.solution-card > p { min-height:54px; color:var(--muted); font-size:12px; line-height:1.65; }
.solution-card > div { display:grid; gap:9px; margin-bottom:8px; }
.solution-card > div span { display:flex; align-items:center; gap:6px; color:#395c74; font-size:12px; }
.solution-card > div svg { width:15px; color:#2ba98c; }
.solution-card > button { width:100%; margin-top:auto; }

.marketing-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:32px;
  color:#fff;
  border-radius:8px;
  background:#112f55;
}
.marketing-cta > div:first-child { display:grid; gap:8px; max-width:720px; }
.marketing-cta .marketing-kicker { color:#75cce2; }
.marketing-cta h2 { font-size:28px; }
.marketing-cta p { color:rgba(255,255,255,.7); line-height:1.7; }
.marketing-cta > div:last-child { display:flex; flex-wrap:wrap; gap:8px; }
.marketing-cta .ghost-button { color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.08); }

@media (max-width: 900px) {
  .marketing-hero { grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); padding:40px 28px; }
  .marketing-hero h1 { font-size:34px; }
  .steward-visual { min-height:330px; }
  .steward-module { min-width:132px; padding:9px; }
  .marketing-outcomes,.advantage-grid,.solution-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-flow > i { display:none; }
}

@media (max-width: 600px) {
  .marketing-home { gap:30px; }
  .marketing-hero { grid-template-columns:1fr; min-height:0; gap:20px; padding:26px 18px 18px; }
  .marketing-hero-copy { max-width:none; }
  .marketing-hero h1 { font-size:29px; }
  .marketing-hero p { font-size:14px; }
  .marketing-proof { display:flex; gap:8px 12px; }
  .steward-visual { min-height:286px; max-width:390px; justify-self:center; }
  .steward-visual::before { inset:30px 44px 24px; }
  .steward-core { width:68%; max-height:246px; }
  .steward-status { top:4px; }
  .steward-module { grid-template-columns:28px auto; min-width:126px; min-height:54px; column-gap:7px; padding:7px 8px; }
  .steward-module > span { width:28px; height:28px; }
  .steward-module svg { width:14px; }
  .steward-module strong { font-size:10px; }
  .steward-contract { top:42px; }
  .steward-risk { top:50px; }
  .steward-archive { bottom:10px; left:0; }
  .steward-ticket { right:0; bottom:15px; }
  .marketing-outcomes,.advantage-grid,.solution-grid,.service-flow,.result-grid { grid-template-columns:1fr; }
  .marketing-outcomes { margin-top:-12px; }
  .marketing-outcomes > div { min-height:88px; padding:15px; }
  .marketing-section-head h2,.marketing-cta h2 { font-size:23px; }
  .advantage-grid article { min-height:0; }
  .service-flow-section { padding:18px; }
  .service-flow > div { min-height:100px; }
  .solution-card { min-height:330px; }
  .marketing-cta { display:grid; padding:24px 18px; }
  .marketing-cta > div:last-child,.marketing-cta button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .steward-core,.steward-module,.steward-orbit,.steward-status i { animation:none; }
}

/* V5 brand and subscription comparison */
.brand-mark::before {
  content:"助";
  display:grid;
  width:auto;
  height:auto;
  place-items:center;
  color:#fff;
  border:0;
  border-radius:0;
  font-size:19px;
  font-weight:950;
  line-height:1;
}

.positioning-band {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:24px;
  align-items:center;
  padding:28px;
  border:1px solid rgba(43,169,140,.2);
  border-radius:8px;
  background:linear-gradient(120deg,#f0fbf8,#f5f9ff);
}

.positioning-band > div:first-child { display:grid; gap:9px; }
.positioning-band h2 { font-size:25px; line-height:1.35; }
.positioning-band p { color:var(--muted); line-height:1.7; }
.positioning-points { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.positioning-points span { display:flex; min-height:46px; align-items:center; gap:8px; padding:0 11px; color:#315875; border:1px solid rgba(37,116,174,.12); border-radius:8px; background:#fff; font-size:12px; font-weight:850; }
.positioning-points svg { width:17px; color:#258e79; }

.solution-price { display:flex; align-items:flex-end; gap:4px; }
.solution-price b { color:#1767b3; font-size:26px; line-height:1; }
.solution-price small { color:var(--muted); font-size:12px; }
.solution-card > em { color:#a36a16; font-size:11px; font-style:normal; font-weight:800; }
.version-section { scroll-margin-top:80px; }

.version-table-wrap {
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 28px rgba(24,71,114,.07);
}

.version-table {
  width:100%;
  min-width:820px;
  border-collapse:collapse;
}

.version-table th,.version-table td {
  height:54px;
  padding:10px 14px;
  text-align:center;
  border-bottom:1px solid var(--line);
  font-size:12px;
}
.version-table thead th { color:#fff; background:#173b63; font-size:13px; }
.version-table thead th:nth-child(4) { background:#236fc9; }
.version-table tbody th { color:var(--ink); text-align:left; background:#f7f9fb; }
.version-table td:nth-child(4) { background:#f1f7ff; }
.version-table td svg { width:14px; margin-right:4px; color:#2ba98c; vertical-align:middle; }
.version-table tr:last-child th,.version-table tr:last-child td { border-bottom:0; }

.annual-value {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px;
  color:#fff;
  border-radius:8px;
  background:#173b63;
}
.annual-value > div { display:grid; gap:7px; }
.annual-value .marketing-kicker { color:#73d5e5; }
.annual-value h3 { font-size:18px; line-height:1.45; }
.annual-value p { max-width:360px; color:rgba(255,255,255,.68); font-size:12px; line-height:1.65; }

.service-offer-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.service-offer-grid button { display:flex; min-height:72px; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 8px 22px rgba(24,71,114,.06); cursor:pointer; }
.service-offer-grid button:hover { border-color:rgba(47,126,234,.4); transform:translateY(-2px); }
.service-offer-grid strong { font-size:14px; }
.service-offer-grid span { color:#1767b3; font-size:12px; font-weight:900; white-space:nowrap; }

@media (max-width: 900px) {
  .positioning-band { grid-template-columns:1fr; }
  .service-offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .annual-value { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 600px) {
  .positioning-band { padding:20px 16px; }
  .positioning-band h2 { font-size:21px; }
  .positioning-points,.service-offer-grid { grid-template-columns:1fr; }
  .version-table-wrap { margin-right:-12px; }
  .annual-value { padding:18px; }
}

/* Logged-in enterprise member workspace */
.member-portal-page { gap:0; }

.member-login-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.member-login-points article { display:flex; min-height:110px; align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.member-login-points article > span { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; color:#fff; border-radius:8px; background:#2475c2; }
.member-login-points article:nth-child(2) > span { background:#29957f; }
.member-login-points article:nth-child(3) > span { background:#765fc4; }
.member-login-points svg { width:19px; }
.member-login-points article > div { display:grid; gap:5px; }
.member-login-points strong { font-size:13px; }
.member-login-points p { color:var(--muted); font-size:11px; line-height:1.55; }

.member-portal-shell {
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  min-height:760px;
  overflow:hidden;
  border:1px solid rgba(21,64,103,.12);
  border-radius:8px;
  background:#f4f7fa;
  box-shadow:0 24px 60px rgba(20,58,94,.14);
}

.member-side-nav {
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:18px 12px;
  color:#d9e9f7;
  background:#102d4d;
}

.member-company-mark {
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  padding:0 7px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.member-company-mark > span {
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  color:#fff;
  border-radius:8px;
  background:#2f7eea;
  font-size:18px;
  font-weight:900;
}

.member-company-mark > div { display:grid; min-width:0; gap:3px; }
.member-company-mark strong { overflow:hidden; color:#fff; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.member-company-mark small { color:#8fb0cb; font-size:11px; }
.member-side-nav nav { display:grid; gap:5px; padding:16px 0; }

.member-side-nav nav button,
.member-nav-tools button,
.member-logout {
  display:flex;
  min-height:42px;
  align-items:center;
  gap:10px;
  padding:0 11px;
  color:#b8d0e2;
  text-align:left;
  border-radius:7px;
  background:transparent;
  cursor:pointer;
}

.member-side-nav nav button:hover,
.member-nav-tools button:hover { color:#fff; background:rgba(255,255,255,.08); }
.member-side-nav nav button.active { color:#fff; background:#2874ce; box-shadow:0 8px 20px rgba(0,0,0,.14); }
.member-side-nav button svg { width:17px; height:17px; flex:0 0 auto; }
.member-side-nav button span { min-width:0; flex:1; font-size:12px; font-weight:800; }
.member-side-nav nav button b { display:grid; min-width:20px; height:20px; place-items:center; padding:0 5px; color:#102d4d; border-radius:10px; background:#f3bd5a; font-size:10px; }

.member-nav-tools {
  display:grid;
  gap:4px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
}

.member-nav-tools > small { padding:0 11px 7px; color:#6f94b1; font-size:10px; font-weight:900; }
.member-nav-tools button { min-height:37px; }
.member-nav-tools button svg { color:#6fc9c0; }
.member-logout { margin-top:auto; color:#89a7bf; }
.member-logout:hover { color:#fff; background:rgba(255,255,255,.08); }

.member-portal-main { display:grid; min-width:0; align-content:start; gap:20px; padding:26px; }

.member-portal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.member-portal-header > div { display:grid; gap:5px; }
.member-portal-header h1 { font-size:26px; }
.member-portal-header p { color:var(--muted); font-size:12px; line-height:1.65; }

.member-plan-chip {
  display:flex;
  min-width:190px;
  min-height:58px;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  color:var(--ink);
  text-align:left;
  border:1px solid rgba(37,117,194,.16);
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(21,71,114,.07);
  cursor:pointer;
}

.member-plan-chip > span { display:grid; width:34px; height:34px; place-items:center; color:#fff; border-radius:7px; background:#b58a2c; }
.member-plan-chip > span svg { width:17px; }
.member-plan-chip > div { display:grid; flex:1; gap:2px; }
.member-plan-chip small { color:var(--muted); font-size:10px; }
.member-plan-chip strong { font-size:13px; }
.member-plan-chip > svg { width:16px; color:#7b91a4; }

.member-overview { display:grid; gap:16px; }

.member-summary-hero {
  display:flex;
  min-height:242px;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  overflow:hidden;
  padding:30px;
  color:#fff;
  border-radius:8px;
  background:
    repeating-linear-gradient(125deg,transparent 0 72px,rgba(255,255,255,.045) 73px 74px),
    linear-gradient(110deg,#143d68,#246da9 62%,#238e85);
  box-shadow:0 18px 40px rgba(20,66,108,.18);
}

.member-summary-hero > div:first-child { display:grid; max-width:620px; gap:10px; }
.member-summary-hero .eyebrow { width:max-content; color:#fff; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.1); }
.member-summary-hero h2 { color:#fff; font-size:29px; line-height:1.3; }
.member-summary-hero p { color:rgba(255,255,255,.72); font-size:13px; line-height:1.7; }
.member-summary-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.member-summary-actions .ghost-button { color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.08); }

.member-service-seal {
  display:grid;
  width:126px;
  height:126px;
  flex:0 0 126px;
  place-items:center;
  align-content:center;
  gap:4px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.035);
}
.member-service-seal span { display:grid; width:38px; height:38px; place-items:center; color:#173c63; border-radius:50%; background:#7de0c8; }
.member-service-seal svg { width:19px; }
.member-service-seal strong { font-size:15px; }
.member-service-seal small { color:rgba(255,255,255,.68); font-size:10px; }

.member-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.member-kpi-grid > button {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  min-height:132px;
  align-items:start;
  gap:10px;
  padding:16px;
  color:var(--ink);
  text-align:left;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 22px rgba(23,70,110,.06);
  cursor:pointer;
  transition:transform 180ms ease,box-shadow 180ms ease;
}
.member-kpi-grid > button:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(23,70,110,.1); }
.member-kpi-grid > button > svg { width:15px; color:#91a2b0; margin-top:4px; }
.member-kpi-icon { display:grid; width:38px; height:38px; place-items:center; color:#fff; border-radius:8px; }
.member-kpi-icon svg { width:18px; }
.member-kpi-icon.blue { background:#3578df; }
.member-kpi-icon.amber { background:#d79b35; }
.member-kpi-icon.green { background:#29957f; }
.member-kpi-icon.violet { background:#765fc4; }
.member-kpi-grid > button > div { display:grid; min-width:0; gap:4px; }
.member-kpi-grid small { color:var(--muted); font-size:10px; }
.member-kpi-grid strong { font-size:25px; line-height:1; }
.member-kpi-grid strong em { margin-left:3px; color:var(--muted); font-size:10px; font-style:normal; }
.member-kpi-grid p { color:var(--muted); font-size:10px; line-height:1.5; }

.member-overview-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:12px; }
.member-focus-panel,.member-tool-launcher,.member-section-panel { padding:18px; }
.member-tool-launcher { display:grid; align-content:start; gap:15px; }
.member-tool-launcher > div:last-child { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.member-tool-launcher button { display:grid; grid-template-columns:auto 1fr auto; min-height:72px; align-items:center; gap:9px; padding:11px; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:8px; background:#f8fafc; cursor:pointer; }
.member-tool-launcher button > span { display:grid; width:32px; height:32px; place-items:center; color:#2475c2; border-radius:7px; background:#e5f1fc; }
.member-tool-launcher button svg { width:15px; }
.member-tool-launcher button > svg { color:#8ba0b2; }
.member-tool-launcher strong { font-size:11px; }

.member-upgrade-teaser {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px;
  border:1px solid rgba(181,138,44,.22);
  border-radius:8px;
  background:linear-gradient(110deg,#fffaf0,#fff 55%,#f0f7ff);
}
.member-upgrade-teaser > div { display:grid; gap:6px; }
.member-upgrade-teaser h2 { font-size:18px; }
.member-upgrade-teaser p { color:var(--muted); font-size:12px; line-height:1.65; }
.member-upgrade-teaser button { flex:0 0 auto; }

.member-section-panel { min-height:520px; }
.member-employee-table { min-width:780px; overflow:hidden; margin-top:15px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.member-section-panel:has(.member-employee-table) { overflow-x:auto; }
.member-employee-head,.member-employee-item { display:grid; grid-template-columns:1.3fr 1fr .8fr .65fr 1.1fr; align-items:center; gap:12px; padding:12px 14px; }
.member-employee-head { color:#678096; background:#edf3f7; font-size:10px; font-weight:900; }
.member-employee-item { min-height:78px; border-top:1px solid var(--line); font-size:12px; }
.member-employee-item > span { display:grid; gap:4px; color:#35546d; }
.member-employee-item small { color:var(--muted); font-size:10px; }
.member-employee-item button { display:flex; width:max-content; align-items:center; gap:4px; padding:0; color:#2475c2; background:transparent; font-size:10px; cursor:pointer; }
.member-employee-item button svg { width:12px; }
.employee-person { grid-template-columns:auto 1fr; align-items:center; }
.employee-person i { display:grid; width:34px; height:34px; place-items:center; color:#fff; border-radius:50%; background:#367bd0; font-style:normal; font-weight:900; }
.employee-person b { display:grid; gap:3px; color:var(--ink); }

.member-reminder-list { display:grid; gap:9px; margin-top:15px; }
.member-reminder-list article { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px; min-height:92px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.member-reminder-list article > div { display:grid; gap:5px; }
.member-reminder-list p,.member-reminder-list small { color:var(--muted); font-size:11px; line-height:1.5; }

.member-plan-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.member-current-plan,.member-next-plan { display:grid; min-height:450px; align-content:start; gap:16px; padding:24px; border-radius:8px; }
.member-current-plan { color:#fff; background:linear-gradient(145deg,#143b64,#1e658f 64%,#228d81); box-shadow:0 18px 40px rgba(20,65,102,.18); }
.member-plan-heading { display:flex; align-items:center; gap:11px; }
.member-plan-heading > span { display:grid; width:42px; height:42px; place-items:center; color:#173c63; border-radius:8px; background:#79dec6; }
.member-plan-heading svg { width:20px; }
.member-plan-heading > div { display:grid; flex:1; gap:2px; }
.member-plan-heading small { color:rgba(255,255,255,.65); }
.member-plan-heading h2 { color:#fff; font-size:22px; }
.member-plan-heading em { padding:6px 8px; color:#174364; border-radius:6px; background:#d9f5ec; font-size:10px; font-style:normal; font-weight:900; }
.member-plan-price { display:flex; align-items:baseline; gap:5px; }
.member-plan-price strong { font-size:42px; }
.member-plan-price span { color:rgba(255,255,255,.65); font-size:12px; }
.member-current-plan > p { color:rgba(255,255,255,.7); font-size:12px; line-height:1.65; }
.member-current-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:15px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(255,255,255,.06); }
.member-current-features span { display:flex; align-items:center; gap:6px; color:#e4f0f7; font-size:11px; }
.member-current-features svg { width:14px; color:#77dec4; }
.member-current-plan > button { width:100%; margin-top:auto; color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.08); }

.member-next-plan { border:1px solid rgba(181,138,44,.25); background:#fff; box-shadow:0 12px 30px rgba(29,70,105,.08); }
.member-next-plan h2 { font-size:24px; }
.member-next-plan > p,.member-next-plan > small { color:var(--muted); font-size:11px; line-height:1.65; }
.member-next-plan > div { display:grid; gap:9px; }
.member-next-plan > div > span { display:flex; align-items:center; gap:8px; min-height:42px; padding:8px 10px; color:#294e68; border-radius:7px; background:#f3f7fa; font-size:11px; }
.member-next-plan > div > span svg { width:15px; color:#b58a2c; }
.member-upgrade-price { display:flex !important; grid-template-columns:1fr auto; align-items:end; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.member-upgrade-price > span { padding:0 !important; background:transparent !important; }
.member-upgrade-price strong { color:#1767b3; font-size:30px; }
.member-upgrade-price small { margin-left:3px; color:var(--muted); font-size:10px; }
.annual-delivery { padding:18px; }

@media (max-width: 980px) {
  .member-portal-shell { grid-template-columns:190px minmax(0,1fr); }
  .member-portal-main { padding:20px; }
  .member-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-overview-grid { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  .member-login-points { grid-template-columns:1fr; }
  .member-portal-shell { display:block; }
  .member-side-nav { display:block; padding:12px; }
  .member-company-mark { padding:0 4px 12px; }
  .member-side-nav nav { display:flex; overflow-x:auto; padding:10px 0 6px; scrollbar-width:none; }
  .member-side-nav nav button { min-width:max-content; }
  .member-side-nav nav button b { display:none; }
  .member-nav-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-nav-tools > small { grid-column:1/-1; }
  .member-logout { display:none; }
  .member-portal-main { padding:16px; }
  .member-portal-header { align-items:flex-start; flex-direction:column; }
  .member-plan-chip { width:100%; }
  .member-summary-hero { min-height:360px; align-items:flex-start; flex-direction:column; padding:22px 18px; }
  .member-summary-hero h2 { font-size:24px; }
  .member-service-seal { width:96px; height:96px; flex-basis:96px; align-self:flex-end; }
  .member-kpi-grid,.member-plan-overview { grid-template-columns:1fr; }
  .member-kpi-grid > button { min-height:108px; }
  .member-tool-launcher > div:last-child { grid-template-columns:1fr; }
  .member-upgrade-teaser { align-items:flex-start; flex-direction:column; }
  .member-upgrade-teaser button { width:100%; }
  .member-reminder-list article { grid-template-columns:auto minmax(0,1fr); }
  .member-reminder-list article > .badge,.member-reminder-list article > button { grid-column:2; width:max-content; }
  .member-current-plan,.member-next-plan { min-height:0; padding:20px 16px; }
  .member-current-features { grid-template-columns:1fr; }
}

/* CRM service delivery and finance modules */
.service-hero .crm-hero-focus { background:linear-gradient(135deg,#2874ce,#29957f); }
.finance-hero .crm-hero-focus { background:linear-gradient(135deg,#805fae,#c18b35); }
.finance-kpis { margin-top:14px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.finance-kpis .admin-tile:nth-child(1) { border-top-color:#3578df; }
.finance-kpis .admin-tile:nth-child(2) { border-top-color:#29957f; }
.finance-kpis .admin-tile:nth-child(3) { border-top-color:#d79b35; }
.finance-kpis .admin-tile:nth-child(4) { border-top-color:#cf594e; }
.service-record-form,.finance-order-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
.data-table small { color:var(--muted); line-height:1.45; }
.data-table td b { color:var(--ink); }
.crm-detail-layout > form.surface { align-content:start; }
.crm-detail-layout > form.surface .crm-form-grid { max-height:720px; overflow:auto; padding-right:4px; }

@media (max-width: 1080px) {
  .finance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-record-form,.finance-order-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .finance-kpis,.service-record-form,.finance-order-form { grid-template-columns:1fr; }
  .crm-detail-layout > form.surface .crm-form-grid { max-height:none; }
}

/* AI interview tool */
.interview-page { display:grid; min-width:0; gap:18px; }
.interview-page > *,
.interview-builder-grid > *,
.interview-action-grid > *,
.interview-job-form .field,
.interview-resume-form .field,
.interview-score-form .field { min-width:0; }
.interview-heading { background:linear-gradient(120deg,#eff8ff,#fff 54%,#e9faf3); }
.interview-process { display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr auto; align-items:center; gap:10px; padding:14px 18px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.interview-process span { display:flex; align-items:center; gap:7px; color:#7890a3; font-size:11px; font-weight:800; }
.interview-process span b { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; background:#e8eef3; }
.interview-process span.active { color:#1767b3; }
.interview-process span.active b { color:#fff; background:#2678ca; box-shadow:0 6px 16px rgba(38,120,202,.22); }
.interview-process i { height:2px; background:#e3ebf1; }
.interview-builder-grid,.interview-action-grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr); gap:16px; }
.interview-job-form,.interview-method-card,.interview-resume-form,.interview-score-form { display:grid; align-content:start; gap:14px; padding:22px; }
.interview-job-form textarea { min-height:122px; }
.interview-privacy { padding:10px 12px; color:#607b8f; border-left:3px solid #2b9b82; background:#eef8f5; font-size:10px; line-height:1.65; }
.interview-method-card { color:#fff; background:linear-gradient(145deg,#153d64,#1d6f82 62%,#268c78); box-shadow:0 18px 36px rgba(18,63,96,.16); }
.interview-method-card h2 { color:#fff; font-size:24px; line-height:1.28; }
.interview-method-card p { color:rgba(255,255,255,.72); line-height:1.7; }
.interview-method-card > div { display:grid; gap:9px; margin-top:10px; }
.interview-method-card > div span { display:flex; align-items:center; gap:8px; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:7px; background:rgba(255,255,255,.06); font-size:11px; }
.interview-method-card svg { width:15px; color:#7be0c7; }
.interview-plan-panel,.interview-candidate-panel { min-width:0; padding:22px; }
.interview-candidate-panel { overflow-x:auto; }
.interview-question-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:16px; }
.interview-question-grid article { display:grid; align-content:start; gap:9px; min-height:230px; padding:15px; border:1px solid var(--line); border-radius:8px; background:#f7fafc; }
.interview-question-grid article > span { color:#2475c2; font-size:10px; font-weight:900; }
.interview-question-grid h3 { font-size:14px; line-height:1.55; }
.interview-question-grid p,.interview-question-grid small { color:var(--muted); font-size:10px; line-height:1.6; }
.interview-ai-guide { display:grid; gap:7px; margin-top:14px; padding:15px; border:1px solid #cfe4ef; border-radius:8px; background:#f1f8fb; }
.interview-ai-guide p { color:#42677e; white-space:pre-wrap; line-height:1.7; }
.interview-score-form { max-height:720px; overflow:auto; }
.interview-score-form textarea { min-height:82px; }
.interview-result-panel { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:24px; padding:22px; border:1px solid rgba(42,152,126,.24); background:linear-gradient(110deg,#effaf6,#fff 60%,#edf6ff); }
.interview-result-panel > div:first-child { display:grid; min-width:150px; gap:4px; padding-right:24px; border-right:1px solid var(--line); }
.interview-result-panel > div:first-child span { color:var(--muted); font-size:11px; }
.interview-result-panel > div:first-child strong { color:#17806c; font-size:44px; }
.interview-result-panel strong small { font-size:14px; }
.interview-result-panel h2 { font-size:22px; }
.interview-result-panel p { margin-top:6px; color:var(--muted); line-height:1.7; }
.member-knowledge-panel .knowledge-card-grid { margin-top:16px; }
.member-knowledge-panel .policy-card { box-shadow:none; }

@media (max-width: 1180px) {
  .interview-question-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .interview-page > * { width:100%; max-width:100%; }
  .interview-process { grid-template-columns:repeat(4,1fr); gap:6px; padding:10px; }
  .interview-process i { display:none; }
  .interview-process span { align-items:flex-start; flex-direction:column; font-size:9px; }
  .interview-builder-grid,.interview-action-grid { grid-template-columns:1fr; }
  .interview-job-form,.interview-method-card,.interview-resume-form,.interview-score-form,.interview-plan-panel,.interview-candidate-panel { padding:16px; }
  .interview-question-grid { grid-template-columns:1fr; }
  .interview-question-grid article { min-height:0; }
  .interview-score-form { max-height:none; overflow:visible; }
  .interview-result-panel { grid-template-columns:1fr; }
  .interview-result-panel > div:first-child { padding:0 0 14px; border-right:0; border-bottom:1px solid var(--line); }
}

/* V1.2 public homepage based on the YiGui marketing direction. */
.app-shell { width:min(1280px,100%); }
.brand-mark::before { content:"易"; }
.yg-home { gap:0; overflow:hidden; border:1px solid rgba(26,79,119,.08); border-radius:8px; background:#fff; box-shadow:0 30px 70px rgba(28,75,110,.09); }
.yg-home svg { width:18px; height:18px; }

.yg-hero {
  position:relative;
  display:grid;
  min-height:560px;
  align-content:center;
  gap:46px;
  overflow:hidden;
  padding:78px 48px 48px;
  background:
    linear-gradient(rgba(29,112,182,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,112,182,.045) 1px,transparent 1px),
    linear-gradient(140deg,#f7fbff 0%,#fff 56%,#effaf7 100%);
  background-size:40px 40px,40px 40px,auto;
}
.yg-hero::after { content:""; position:absolute; inset:auto 0 0; height:110px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.92)); }
.yg-hero-backdrop { position:absolute; z-index:0; right:2%; top:50%; width:min(480px,43%); max-height:500px; object-fit:contain; opacity:.1; filter:saturate(.8); transform:translateY(-50%); animation:yg-float 6s ease-in-out infinite; }
.yg-hero-copy { position:relative; z-index:2; display:grid; justify-items:center; max-width:920px; gap:20px; margin:auto; text-align:center; }
.yg-pill { display:inline-flex; min-height:34px; align-items:center; gap:7px; padding:0 13px; color:#176c64; border:1px solid rgba(36,151,133,.18); border-radius:18px; background:rgba(235,250,247,.88); font-size:12px; font-weight:900; }
.yg-pill svg { width:15px; }
.yg-hero h1 { max-width:900px; font-size:52px; line-height:1.16; }
.yg-hero h1 span { color:#0878c7; }
.yg-hero-copy > p { max-width:760px; color:#587083; font-size:18px; line-height:1.8; }
.yg-hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.yg-hero-actions button { min-height:50px; padding:0 22px; }
.yg-capability-strip { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:min(850px,100%); gap:1px; overflow:hidden; margin:auto; border:1px solid #e4edf3; border-radius:8px; background:#e4edf3; box-shadow:0 18px 36px rgba(26,76,113,.09); }
.yg-capability-strip > div { display:grid; min-height:94px; place-items:center; align-content:center; gap:5px; padding:14px; background:rgba(255,255,255,.94); }
.yg-capability-strip strong { color:#0878c7; font-size:25px; }
.yg-capability-strip div:nth-child(3) strong,.yg-capability-strip div:nth-child(4) strong { color:#218b75; }
.yg-capability-strip span { color:#758896; font-size:11px; }

.yg-section { display:grid; gap:30px; padding:68px 48px; }
.yg-section:nth-of-type(even) { background:#f7f9fb; }
.yg-section-heading { display:grid; max-width:780px; gap:9px; margin:0 auto; text-align:center; }
.yg-section-heading > span { color:#0878c7; font-size:12px; font-weight:950; }
.yg-section-heading h2 { font-size:32px; line-height:1.35; }
.yg-section-heading p { color:#687e8e; line-height:1.75; }

.yg-pain-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.yg-pain-card { display:grid; min-height:190px; align-content:start; gap:12px; padding:22px; border:1px solid #e7edf2; border-radius:8px; background:#fff; transition:transform 180ms ease,box-shadow 180ms ease; }
.yg-pain-card:hover { transform:translateY(-3px); box-shadow:0 16px 30px rgba(29,73,106,.09); }
.yg-pain-card > span { display:grid; width:42px; height:42px; place-items:center; color:#fff; border-radius:8px; background:#2f7fc7; }
.yg-pain-card.red > span { background:#c95b57; }
.yg-pain-card.amber > span { background:#d59532; }
.yg-pain-card.green > span { background:#278b76; }
.yg-pain-card h3 { font-size:18px; }
.yg-pain-card p { color:#6b7e8d; font-size:13px; line-height:1.7; }

.yg-solution-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.yg-solution-grid article { position:relative; display:grid; min-height:390px; align-content:start; gap:14px; padding:28px; border:1px solid #e2eaf0; border-radius:8px; background:#fff; box-shadow:0 12px 28px rgba(31,75,108,.06); }
.yg-solution-number { position:absolute; top:20px; right:22px; color:#d8e2e9; font-size:30px; font-weight:950; }
.yg-solution-icon { display:grid; width:52px; height:52px; place-items:center; color:#fff; border-radius:8px; background:#2479c6; }
.yg-solution-grid article:nth-child(2) .yg-solution-icon { background:#278b76; }
.yg-solution-grid article:nth-child(3) .yg-solution-icon { background:#6856aa; }
.yg-solution-grid h3 { font-size:21px; }
.yg-solution-grid article > p { min-height:66px; color:#687e8e; font-size:13px; line-height:1.7; }
.yg-solution-grid article > div:not(.yg-solution-icon) { display:grid; gap:9px; }
.yg-solution-grid article > div:not(.yg-solution-icon) span { display:flex; align-items:center; gap:7px; color:#4b687c; font-size:12px; }
.yg-solution-grid article > div:not(.yg-solution-icon) svg { width:14px; color:#258e79; }
.yg-solution-grid .small-action { justify-self:start; margin-top:auto; }

.yg-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.yg-feature-card { display:grid; min-height:350px; align-content:start; gap:11px; padding:23px; border:1px solid #e3eaf0; border-radius:8px; background:#fff; transition:border-color 180ms ease,transform 180ms ease,box-shadow 180ms ease; }
.yg-feature-card:hover { border-color:#b9d9ed; transform:translateY(-3px); box-shadow:0 18px 34px rgba(28,75,109,.09); }
.yg-feature-icon { display:grid; width:48px; height:48px; place-items:center; color:#fff; border-radius:8px; background:#2479c6; }
.yg-feature-card.amber .yg-feature-icon { background:#d59532; }
.yg-feature-card.green .yg-feature-icon { background:#278b76; }
.yg-feature-card.violet .yg-feature-icon { background:#7560b6; }
.yg-feature-card.cyan .yg-feature-icon { background:#168d9a; }
.yg-feature-card.navy .yg-feature-icon { background:#254f79; }
.yg-feature-card small { color:#2479c6; font-size:10px; font-weight:900; }
.yg-feature-card h3 { font-size:20px; }
.yg-feature-card > p { min-height:66px; color:#687e8e; font-size:13px; line-height:1.7; }
.yg-feature-points { display:grid; gap:7px; }
.yg-feature-points span { display:flex; align-items:center; gap:6px; color:#587083; font-size:11px; }
.yg-feature-points svg { width:13px; color:#278b76; }
.yg-feature-card > button { display:flex; min-height:40px; align-items:center; justify-content:space-between; margin-top:auto; padding:0 12px; color:#1768a7; border-radius:7px; background:#eef7fd; font-size:12px; font-weight:900; cursor:pointer; }

.yg-browser-preview { overflow:hidden; border:1px solid #dde7ee; border-radius:8px; background:#fff; box-shadow:0 24px 54px rgba(28,72,105,.13); }
.yg-browser-bar { display:flex; min-height:42px; align-items:center; gap:7px; padding:0 15px; border-bottom:1px solid #dde7ee; background:#eef2f5; }
.yg-browser-bar i { width:9px; height:9px; border-radius:50%; background:#d65c58; }
.yg-browser-bar i:nth-child(2) { background:#d49b35; }
.yg-browser-bar i:nth-child(3) { background:#2c9a7e; }
.yg-browser-bar span { flex:1; color:#80909c; text-align:center; font-size:10px; }
.yg-preview-canvas { position:relative; min-height:420px; overflow:hidden; background:#eef4f8; }
.yg-preview-canvas > img { position:relative; z-index:2; display:block; width:100%; min-height:420px; object-fit:cover; object-position:top center; }
.yg-preview-fallback { position:absolute; inset:0; z-index:1; display:grid; place-items:center; align-content:center; gap:12px; color:#315875; background:linear-gradient(145deg,#f4f9fc,#eaf5f4); }
.yg-preview-fallback > span { display:grid; width:72px; height:72px; place-items:center; color:#fff; border-radius:8px; background:#2479c6; }
.yg-preview-fallback svg { width:32px; height:32px; }
.yg-preview-fallback strong { font-size:24px; }
.yg-preview-fallback p { color:#6e8392; }
.yg-preview-canvas > button { position:absolute; z-index:3; left:50%; bottom:24px; display:flex; min-height:44px; align-items:center; gap:8px; padding:0 18px; color:#fff; border-radius:7px; background:#176fba; box-shadow:0 12px 26px rgba(20,88,145,.25); font-weight:900; cursor:pointer; transform:translateX(-50%); }

.yg-member-link-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.yg-member-link-grid button { display:grid; grid-template-columns:38px minmax(0,1fr) auto; grid-template-rows:auto auto; min-height:104px; align-content:center; gap:4px 10px; padding:14px; color:var(--ink); text-align:left; border:1px solid #e1e9ef; border-radius:8px; background:#fff; cursor:pointer; }
.yg-member-link-grid button > span { grid-row:1 / 3; display:grid; width:38px; height:38px; place-items:center; color:#fff; border-radius:8px; background:#2879c3; }
.yg-member-link-grid strong { font-size:13px; }
.yg-member-link-grid small { overflow:hidden; color:#718594; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.yg-member-link-grid button > svg { grid-row:1 / 3; width:14px; color:#8da0ae; }

.yg-plan-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:stretch; }
.yg-plan-card { position:relative; display:grid; min-height:390px; align-content:start; gap:13px; padding:24px 20px; border:1px solid #e1e8ed; border-radius:8px; background:#fff; }
.yg-plan-card.recommended { border:2px solid #1680ca; box-shadow:0 18px 38px rgba(22,128,202,.12); }
.yg-plan-card > em { position:absolute; top:-12px; left:50%; padding:5px 12px; color:#fff; border-radius:14px; background:#1680ca; font-size:10px; font-style:normal; font-weight:900; white-space:nowrap; transform:translateX(-50%); }
.yg-plan-card > span { color:#278b76; font-size:10px; font-weight:900; }
.yg-plan-card h3 { font-size:20px; }
.yg-plan-card > div { display:flex; align-items:baseline; gap:5px; }
.yg-plan-card > div strong { font-size:31px; }
.yg-plan-card > div small { color:#7d8d99; font-size:11px; }
.yg-plan-annual { color:#278b76; font-size:11px; }
.yg-plan-card ul { display:grid; gap:10px; margin:4px 0 10px; padding:0; list-style:none; }
.yg-plan-card li { display:flex; align-items:center; gap:7px; color:#5d7383; font-size:12px; }
.yg-plan-card li svg { width:14px; color:#278b76; }
.yg-plan-card > button { width:100%; margin-top:auto; }

.yg-final-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:52px 48px; color:#fff; background:#143e66; }
.yg-final-cta > div:first-child { display:grid; max-width:720px; gap:8px; }
.yg-final-cta span { color:#72d8c5; font-size:11px; font-weight:900; }
.yg-final-cta h2 { color:#fff; font-size:29px; }
.yg-final-cta p { color:rgba(255,255,255,.68); line-height:1.7; }
.yg-final-cta > div:last-child { display:flex; flex-wrap:wrap; gap:8px; }
.yg-final-cta .ghost-button { color:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.08); }
.yg-footer { display:grid; grid-template-columns:1fr auto; gap:18px 30px; padding:30px 48px; color:#b8c8d4; background:#0c273f; }
.yg-footer > div { display:grid; gap:4px; }
.yg-footer strong { color:#fff; font-size:20px; }
.yg-footer span,.yg-footer p { font-size:11px; }
.yg-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 18px; }
.yg-footer nav button { color:#dce7ee; background:transparent; font-size:11px; cursor:pointer; }
.yg-footer p { grid-column:1 / -1; color:#7890a1; }

@keyframes yg-float { 0%,100% { transform:translateY(-50%); } 50% { transform:translateY(calc(-50% - 8px)); } }

@media (max-width: 900px) {
  .yg-hero { padding:64px 28px 38px; }
  .yg-hero h1 { font-size:42px; }
  .yg-section { padding:56px 28px; }
  .yg-pain-grid,.yg-feature-grid,.yg-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .yg-solution-grid { grid-template-columns:1fr; }
  .yg-solution-grid article { min-height:0; }
  .yg-solution-grid article > p { min-height:0; }
  .yg-member-link-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .yg-preview-canvas,.yg-preview-canvas > img { min-height:330px; }
}

@media (max-width: 600px) {
  .yg-home { margin:0 -2px; }
  .yg-hero { min-height:620px; gap:28px; padding:50px 16px 26px; }
  .yg-hero-backdrop { top:54%; right:-18%; width:88%; opacity:.07; }
  .yg-hero-copy { gap:16px; }
  .yg-hero h1 { font-size:34px; }
  .yg-hero-copy > p { font-size:14px; }
  .yg-hero-actions,.yg-hero-actions button { width:100%; }
  .yg-capability-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .yg-capability-strip > div { min-height:78px; }
  .yg-section { gap:22px; padding:44px 16px; }
  .yg-section-heading { text-align:left; }
  .yg-section-heading h2 { font-size:25px; }
  .yg-section-heading p { font-size:13px; }
  .yg-pain-grid,.yg-feature-grid,.yg-plan-grid,.yg-member-link-grid { grid-template-columns:1fr; }
  .yg-pain-card { min-height:0; }
  .yg-feature-card { min-height:320px; }
  .yg-browser-bar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .yg-preview-canvas,.yg-preview-canvas > img { min-height:250px; }
  .yg-preview-fallback strong { font-size:19px; }
  .yg-preview-fallback p { font-size:11px; }
  .yg-preview-canvas > button { bottom:14px; width:calc(100% - 28px); justify-content:center; }
  .yg-final-cta { display:grid; padding:40px 18px; }
  .yg-final-cta h2 { font-size:24px; }
  .yg-final-cta > div:last-child,.yg-final-cta button { width:100%; }
  .yg-footer { grid-template-columns:1fr; padding:28px 18px 90px; }
  .yg-footer nav { justify-content:flex-start; }
  .yg-footer p { grid-column:auto; }
}

@media (prefers-reduced-motion:reduce) {
  .yg-hero-backdrop { animation:none; }
}
.landing-active {
  overflow: hidden;
  background: #fff;
}

.landing-active .stage-grid {
  display: none;
}

.landing-frame {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border: 0;
  background: #fff;
}

/* V1.3 enterprise auth, service delivery and commerce */
.member-auth-hero { min-height:620px; align-items:center; }
.member-auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; margin-bottom:20px; background:#edf4fa; border-radius:8px; }
.member-auth-tabs button { min-height:42px; color:#627d98; border-radius:6px; background:transparent; font-weight:800; cursor:pointer; }
.member-auth-tabs button.active { color:#0866c6; background:#fff; box-shadow:0 5px 16px rgba(20,62,102,.1); }
.auth-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.member-captcha { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:10px; }
.member-captcha button { height:48px; padding:0; overflow:hidden; border:1px solid #b9cce0; border-radius:6px; background:#eef6ff; cursor:pointer; }
.member-captcha img { width:100%; height:100%; object-fit:cover; }
.member-service-landing,.member-purchase-page { display:grid; gap:20px; }
.member-landing-hero { display:grid; grid-template-columns:minmax(0,1fr) 210px; align-items:center; min-height:300px; padding:40px; color:#fff; background:linear-gradient(125deg,#0d3b66 0%,#0866c6 55%,#009b82 100%); border-radius:8px; overflow:hidden; }
.member-landing-hero h2 { max-width:720px; margin:9px 0; color:#fff; font-size:30px; }
.member-landing-hero p { max-width:720px; color:rgba(255,255,255,.74); line-height:1.8; }
.member-landing-hero > div:first-child > div { display:flex; gap:10px; margin-top:24px; }
.member-landing-hero .ghost-button { color:#fff; border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.08); }
.member-landing-orbit { display:grid; place-items:center; position:relative; height:190px; }
.member-landing-orbit > span { display:grid; place-items:center; z-index:2; width:90px; height:90px; color:#0866c6; border:12px solid rgba(255,255,255,.25); border-radius:50%; background:#fff; box-shadow:0 0 50px rgba(114,216,197,.6); animation:service-pulse 2.8s ease-in-out infinite; }
.member-landing-orbit svg { width:38px; height:38px; }
.member-landing-orbit i { position:absolute; width:165px; height:76px; border:1px solid rgba(255,255,255,.5); border-radius:50%; transform:rotate(-15deg); }
.member-landing-orbit b { position:absolute; bottom:4px; font-size:12px; }
@keyframes service-pulse { 50% { transform:scale(1.07); box-shadow:0 0 70px rgba(114,216,197,.8); } }
.member-longtail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.member-longtail-grid button { display:grid; grid-template-columns:48px minmax(0,1fr) 20px; align-items:center; gap:14px; min-height:132px; padding:20px; text-align:left; border:1px solid #dce7f1; border-radius:8px; background:#fff; cursor:pointer; transition:.2s ease; }
.member-longtail-grid button:hover { border-color:#72b8f5; background:#f4faff; box-shadow:0 12px 28px rgba(20,62,102,.1); transform:translateY(-3px); }
.member-longtail-grid button > span { display:grid; place-items:center; width:48px; height:48px; color:#0866c6; border-radius:8px; background:#e9f4ff; }
.member-longtail-grid strong { display:block; margin-bottom:6px; color:#17324d; font-size:16px; }
.member-longtail-grid p { color:#70879a; font-size:12px; line-height:1.65; }
.member-conversion-band { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 32px; color:#17324d; border:1px solid #cfe0ec; border-radius:8px; background:linear-gradient(90deg,#edf8ff,#f1fbf7); }
.member-conversion-band span { color:#008f78; font-size:11px; font-weight:900; }
.member-conversion-band h2 { margin:5px 0; font-size:21px; }
.member-conversion-band p { color:#70879a; font-size:12px; }
.enterprise-tech-overview { display:grid; grid-template-columns:minmax(240px,1.2fr) 170px minmax(240px,1fr); align-items:center; gap:22px; padding:28px; color:#dff5ff; border:1px solid rgba(69,193,255,.22); border-radius:8px; background:#0b2945; box-shadow:inset 0 0 50px rgba(0,145,214,.09); }
.enterprise-tech-copy > span,.enterprise-signal-chart > span { color:#67d8ff; font-size:11px; font-weight:900; }
.enterprise-tech-copy h2 { margin:5px 0; color:#fff; font-size:23px; }
.enterprise-tech-copy p,.enterprise-tech-copy div,.enterprise-signal-chart small { color:#8fb4cc; font-size:11px; }
.enterprise-tech-copy div { display:flex; gap:12px; margin-top:18px; }
.enterprise-health-ring { display:grid; place-items:center; width:138px; height:138px; border-radius:50%; background:conic-gradient(#38d6b2 var(--health),#173f60 0); box-shadow:0 0 28px rgba(56,214,178,.2); }
.enterprise-health-ring:before { content:""; grid-area:1/1; width:108px; height:108px; border-radius:50%; background:#0b2945; }
.enterprise-health-ring strong,.enterprise-health-ring span { grid-area:1/1; z-index:1; }
.enterprise-health-ring strong { margin-top:-15px; color:#fff; font-size:31px; }
.enterprise-health-ring strong small { font-size:12px; }
.enterprise-health-ring span { margin-top:46px; color:#8fb4cc; font-size:10px; }
.enterprise-signal-chart { display:flex; align-items:flex-end; gap:7px; height:120px; padding-top:24px; position:relative; }
.enterprise-signal-chart > span { position:absolute; top:0; left:0; }
.enterprise-signal-chart i { flex:1; min-width:10px; border-radius:3px 3px 0 0; background:linear-gradient(#4de2c2,#168bd3); opacity:.86; }
.enterprise-signal-chart i b { display:none; }
.enterprise-signal-chart small { position:absolute; bottom:-20px; left:0; }
.member-background-layout { display:grid; grid-template-columns:minmax(360px,.8fr) minmax(420px,1.2fr); gap:18px; }
.member-background-form,.member-background-records { padding:28px; }
.background-consent { display:flex; align-items:flex-start; gap:10px; color:#627d98; font-size:12px; line-height:1.6; }
.background-consent input { margin-top:3px; }
.background-record-list { display:grid; gap:9px; margin-top:18px; }
.background-record-list article { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:15px; border:1px solid #e0eaf2; border-radius:6px; background:#f9fcff; }
.background-record-list article div { display:grid; gap:3px; }
.background-record-list article span,.background-record-list article small { color:#70879a; font-size:11px; }
.background-report-actions { display:flex; gap:6px; }
.member-purchase-heading { padding:10px 2px; }
.member-purchase-heading h2 { margin:5px 0; font-size:28px; }
.member-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.member-product-card { display:grid; gap:12px; padding:28px; border:1px solid #d7e4ee; border-radius:8px; background:#fff; box-shadow:0 12px 30px rgba(17,50,77,.06); }
.member-product-card > span { color:#008f78; font-size:11px; font-weight:900; }
.member-product-card h3 { font-size:21px; }
.member-product-card > strong { color:#0866c6; font-size:34px; }
.member-product-card strong small { font-size:12px; }
.member-product-annual { color:#008f78; font-size:12px; }
.member-product-card p { min-height:44px; color:#70879a; font-size:12px; line-height:1.7; }
.member-product-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto; }
.member-product-actions button { width:100%; }
.payment-checkout { display:grid; grid-template-columns:1fr 300px; align-items:center; gap:30px; padding:30px; }
.payment-checkout > div:first-child > strong { display:block; margin:15px 0 5px; color:#0866c6; font-size:34px; }
.payment-methods { display:grid; justify-items:center; gap:12px; }
.payment-methods > div:first-child { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:6px; }
.payment-methods button { padding:10px; border:1px solid #d7e4ee; border-radius:5px; background:#fff; cursor:pointer; }
.payment-methods button.active { color:#fff; border-color:#0866c6; background:#0866c6; }
.payment-methods img,.qr-empty { width:190px; height:190px; object-fit:contain; border:1px solid #d7e4ee; background:#fff; }
.qr-empty { display:grid; place-items:center; padding:20px; color:#829ab1; text-align:center; }
.member-order-list { padding:26px; }
.payment-config-preview { display:flex; gap:16px; }
.payment-config-preview figure { display:grid; gap:5px; justify-items:center; }
.payment-config-preview img { width:150px; height:150px; object-fit:contain; border:1px solid #d7e4ee; }
.payment-config-preview figcaption { color:#627d98; font-size:11px; }
.payment-plan-config-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.payment-plan-config { display:grid; gap:12px; padding:18px; border:1px solid #d7e4ee; border-radius:8px; background:#f8fbfe; }
.payment-plan-config h3 { color:#17324d; font-size:16px; }
.payment-plan-config .crm-form-grid { grid-template-columns:1fr 1fr; }

@media (max-width:900px) {
  .member-longtail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .enterprise-tech-overview { grid-template-columns:1fr 150px; }
  .enterprise-signal-chart { grid-column:1/-1; }
  .member-background-layout { grid-template-columns:1fr; }
  .payment-plan-config-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .member-auth-hero { min-height:0; }
  .auth-field-grid,.member-longtail-grid,.member-product-grid { grid-template-columns:1fr; }
  .member-captcha { grid-template-columns:1fr 128px; }
  .member-product-actions { grid-template-columns:1fr; }
  .member-landing-hero { grid-template-columns:1fr; padding:26px 20px; }
  .member-landing-hero h2 { font-size:24px; }
  .member-landing-orbit { display:none; }
  .member-landing-hero > div:first-child > div,.member-conversion-band { display:grid; }
  .enterprise-tech-overview { grid-template-columns:1fr; }
  .enterprise-health-ring { justify-self:center; }
  .payment-checkout { grid-template-columns:1fr; padding:20px; }
  .member-background-layout { display:block; }
  .member-background-records { margin-top:14px; }
  .background-record-list article { grid-template-columns:1fr auto; }
  .background-record-list article button,.background-record-list article small { grid-column:1/-1; }
}

/* V1.5 member SMS login and Aliyun SMS configuration */
.member-login-methods {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 18px;
}
.member-login-methods button {
  display:flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#627d98;
  border:1px solid #d6e3ee;
  border-radius:6px;
  background:#f7fafc;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}
.member-login-methods button:hover {
  color:#0866c6;
  border-color:#8fc4ef;
  background:#eff7ff;
}
.member-login-methods button.active {
  color:#fff;
  border-color:#0866c6;
  background:#0866c6;
  box-shadow:0 8px 20px rgba(8,102,198,.18);
}
.member-login-methods svg { width:16px; height:16px; }
.member-sms-code-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px;
  gap:10px;
}
.member-sms-code-row button {
  width:100%;
  min-height:48px;
  white-space:nowrap;
}
.member-sms-code-row button:disabled {
  color:#8ca2b5;
  border-color:#d9e3ec;
  background:#eef3f7;
  box-shadow:none;
  cursor:not-allowed;
}
.member-auth-note {
  color:#70879a;
  font-size:11px;
  line-height:1.65;
}
.sms-enabled-field { align-content:start; }
.switch-control {
  display:flex;
  min-height:46px;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.switch-control input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}
.switch-control span {
  position:relative;
  width:44px;
  height:24px;
  border-radius:12px;
  background:#b7c7d5;
  transition:.2s ease;
}
.switch-control span:after {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(20,62,102,.2);
  transition:.2s ease;
}
.switch-control input:checked + span { background:#008f78; }
.switch-control input:checked + span:after { transform:translateX(20px); }
.switch-control b { color:#49657d; font-size:12px; }
.sms-config-note {
  padding:16px 18px;
  border:1px solid #d5e5f1;
  border-left:4px solid #0866c6;
  border-radius:6px;
  background:#f4f9fd;
}
.sms-config-note strong { display:block; margin-bottom:6px; color:#17324d; font-size:13px; }
.sms-config-note p { color:#627d98; font-size:11px; line-height:1.7; }
.sms-config-note code { color:#0866c6; font-weight:800; }

@media (max-width:600px) {
  .member-login-methods { grid-template-columns:1fr; }
  .member-sms-code-row { grid-template-columns:minmax(0,1fr) 116px; }
  .member-sms-code-row button { padding:0 8px; font-size:11px; }
}

/* V1.6 H5-first homepage and enterprise member experience */
.member-mobile-auth-brand,
.member-mobile-header,
.member-mobile-dock {
  display:none;
}

@media (max-width:760px) {
  body:has(.member-page) {
    background:#f2f6f9;
  }

  .app-shell:has(.member-page) {
    width:100%;
    padding:0 0 90px;
  }

  .app-shell:has(.member-page) > .topbar,
  .app-shell:has(.member-page) > .bottom-nav {
    display:none;
  }

  .member-page {
    width:100%;
    gap:12px;
  }

  /* Member auth is a dedicated H5 screen instead of a stacked desktop panel. */
  .member-auth-hero {
    display:grid;
    min-height:100dvh;
    align-content:start;
    gap:0;
    padding:0 14px 28px;
    border-radius:0;
    background:
      radial-gradient(circle at 88% 11%,rgba(92,229,198,.28),transparent 25%),
      linear-gradient(155deg,#0b3157 0 34%,#0b66bd 58%,#f2f6f9 58.2%);
    box-shadow:none;
  }

  .member-mobile-auth-brand {
    display:flex;
    min-height:62px;
    align-items:center;
    justify-content:space-between;
  }

  .member-mobile-auth-brand > button {
    display:flex;
    min-width:0;
    align-items:center;
    gap:9px;
    padding:0;
    color:#fff;
    text-align:left;
    background:transparent;
  }

  .member-mobile-auth-brand > button > span {
    display:grid;
    width:35px;
    height:35px;
    place-items:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:11px;
    background:rgba(255,255,255,.12);
    font-size:16px;
    font-weight:900;
  }

  .member-mobile-auth-brand > button > div {
    display:grid;
    gap:2px;
  }

  .member-mobile-auth-brand strong {
    font-size:15px;
  }

  .member-mobile-auth-brand small {
    color:rgba(255,255,255,.58);
    font-size:9px;
  }

  .member-mobile-auth-brand > em {
    padding:6px 8px;
    color:#79e6cc;
    border:1px solid rgba(121,230,204,.25);
    border-radius:999px;
    background:rgba(0,0,0,.08);
    font-size:9px;
    font-style:normal;
    font-weight:800;
  }

  .member-auth-hero .member-hero-copy {
    max-width:330px;
    padding:27px 5px 33px;
  }

  .member-auth-hero .member-hero-copy .eyebrow {
    width:max-content;
    margin:0;
    padding:6px 9px;
    font-size:9px;
  }

  .member-auth-hero .member-hero-copy h1 {
    margin-top:5px;
    font-size:29px;
    letter-spacing:-.8px;
  }

  .member-auth-hero .member-hero-copy p {
    max-width:315px;
    font-size:11px;
    line-height:1.7;
  }

  .member-auth-hero .member-login-card {
    position:relative;
    z-index:3;
    width:100%;
    margin:0;
    padding:19px 17px 18px;
    border:1px solid rgba(20,70,107,.08);
    border-radius:22px;
    background:#fff;
    box-shadow:0 20px 45px rgba(12,55,89,.18);
  }

  .member-auth-tabs {
    gap:4px;
    margin-bottom:16px;
    padding:4px;
    border-radius:13px;
    background:#eef4f8;
  }

  .member-auth-tabs button {
    min-height:39px;
    border-radius:10px;
    font-size:12px;
  }

  .member-login-card > .section-title {
    gap:5px;
  }

  .member-login-card > .section-title h2 {
    color:#10283f;
    font-size:20px;
  }

  .member-login-card > .section-title p {
    color:#71889a;
    font-size:10px;
    line-height:1.55;
  }

  .member-login-methods {
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin:14px 0 12px;
  }

  .member-login-methods button {
    min-height:42px;
    padding:0 6px;
    border-radius:11px;
    font-size:10px;
  }

  .member-login-card .quick-form {
    gap:11px;
    margin-top:10px;
  }

  .member-login-card .field {
    gap:6px;
  }

  .member-login-card .field label {
    color:#46637a;
    font-size:10px;
  }

  .member-login-card input {
    min-height:49px;
    border-color:#d9e5ed;
    border-radius:12px;
    background:#f7fafc;
    font-size:13px;
  }

  .member-login-card .primary-button {
    width:100%;
    min-height:49px;
    justify-content:center;
    border-radius:12px;
    background:linear-gradient(135deg,#0866c6,#008f78);
    box-shadow:0 10px 24px rgba(8,102,198,.2);
  }

  .member-captcha {
    grid-template-columns:minmax(0,1fr) 112px;
  }

  .member-captcha button {
    height:49px;
    border-radius:12px;
  }

  .member-sms-code-row {
    grid-template-columns:minmax(0,1fr) 108px;
    gap:7px;
  }

  .member-sms-code-row button {
    min-height:49px;
    border-radius:12px;
  }

  .member-auth-note {
    padding:9px 10px;
    color:#70879a !important;
    border-radius:9px;
    background:#f3f7fa;
    font-size:9px;
  }

  .member-auth-hero .member-login-card .backend-note {
    color:#49657d;
  }

  .auth-field-grid {
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .auth-field-grid .field:nth-child(1),
  .auth-field-grid .field:nth-child(4) {
    grid-column:1/-1;
  }

  .member-login-points {
    display:flex;
    gap:9px;
    margin:-8px 14px 22px;
    overflow-x:auto;
    padding:0 0 5px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .member-login-points article {
    min-width:250px;
    min-height:88px;
    padding:13px;
    border-radius:16px;
    scroll-snap-align:start;
  }

  .member-login-points article > span {
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:12px;
  }

  /* Logged-in H5 workspace */
  .member-portal-page {
    min-height:100dvh;
  }

  .member-portal-shell {
    display:block;
    min-height:100dvh;
    overflow:visible;
    border:0;
    border-radius:0;
    background:#f2f6f9;
    box-shadow:none;
  }

  .member-side-nav {
    display:none;
  }

  .member-mobile-header {
    position:sticky;
    top:0;
    z-index:24;
    display:flex;
    min-height:64px;
    align-items:center;
    justify-content:space-between;
    padding:8px 14px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(11,49,87,.96);
    box-shadow:0 8px 24px rgba(13,48,78,.13);
    backdrop-filter:blur(18px);
  }

  .member-mobile-identity {
    display:flex;
    min-width:0;
    align-items:center;
    gap:9px;
  }

  .member-mobile-identity > span {
    display:grid;
    width:38px;
    height:38px;
    flex:0 0 38px;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(135deg,#2d83df,#22b99c);
    box-shadow:0 7px 18px rgba(0,0,0,.18);
    font-weight:900;
  }

  .member-mobile-identity > div {
    display:grid;
    min-width:0;
    gap:2px;
  }

  .member-mobile-identity small {
    color:#8eb5d0;
    font-size:9px;
  }

  .member-mobile-identity strong {
    max-width:210px;
    overflow:hidden;
    color:#fff;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .member-mobile-header > button {
    display:flex;
    align-items:center;
    gap:5px;
    padding:7px 9px;
    color:#f3d47c;
    border:1px solid rgba(243,212,124,.2);
    border-radius:10px;
    background:rgba(255,255,255,.07);
  }

  .member-mobile-header > button small {
    max-width:68px;
    overflow:hidden;
    font-size:9px;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .member-mobile-header > button svg {
    width:14px;
  }

  .member-portal-main {
    display:grid;
    gap:13px;
    padding:14px 13px 98px;
  }

  .member-portal-header {
    min-height:44px;
    align-items:center;
    padding:1px 2px 9px;
    border-bottom:0;
  }

  .member-portal-header .marketing-kicker,
  .member-portal-header p,
  .member-portal-header .member-plan-chip {
    display:none;
  }

  .member-portal-header h1 {
    font-size:22px;
    letter-spacing:-.4px;
  }

  .member-mobile-dock {
    position:fixed;
    z-index:35;
    right:9px;
    bottom:max(8px,env(safe-area-inset-bottom));
    left:9px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    min-height:64px;
    padding:5px 6px;
    border:1px solid rgba(17,65,99,.1);
    border-radius:20px;
    background:rgba(255,255,255,.95);
    box-shadow:0 15px 38px rgba(18,58,88,.22);
    backdrop-filter:blur(20px);
  }

  .member-mobile-dock button {
    position:relative;
    display:grid;
    place-items:center;
    align-content:center;
    gap:3px;
    color:#7790a3;
    border-radius:14px;
    background:transparent;
    font-size:9px;
    font-weight:800;
  }

  .member-mobile-dock button svg {
    width:19px;
    height:19px;
  }

  .member-mobile-dock button.active {
    color:#fff;
    background:linear-gradient(135deg,#176dcc,#008f78);
    box-shadow:0 7px 17px rgba(8,102,198,.2);
  }

  .member-mobile-dock button b {
    position:absolute;
    top:3px;
    right:8px;
    display:grid;
    min-width:16px;
    height:16px;
    place-items:center;
    padding:0 4px;
    color:#fff;
    border:2px solid #fff;
    border-radius:9px;
    background:#ef6b5e;
    font-size:8px;
  }

  .member-portal-main .surface {
    padding:16px 14px;
    border-color:rgba(21,69,104,.09);
    border-radius:17px;
    box-shadow:0 8px 23px rgba(18,62,94,.055);
  }

  .member-landing-hero {
    position:relative;
    display:block;
    min-height:286px;
    padding:23px 19px;
    border-radius:22px;
    background:
      radial-gradient(circle at 92% 12%,rgba(86,225,193,.4),transparent 26%),
      linear-gradient(140deg,#0b3157,#0866c6 62%,#008f78 130%);
    box-shadow:0 16px 34px rgba(15,65,103,.17);
  }

  .member-landing-hero:after {
    content:"";
    position:absolute;
    right:-30px;
    bottom:-50px;
    width:155px;
    height:155px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    box-shadow:0 0 0 28px rgba(255,255,255,.025);
  }

  .member-landing-hero h2 {
    max-width:310px;
    margin:10px 0;
    font-size:25px;
    line-height:1.28;
    letter-spacing:-.6px;
  }

  .member-landing-hero .marketing-kicker {
    color:#78ead1;
  }

  .member-landing-hero p {
    max-width:310px;
    font-size:11px;
    line-height:1.7;
  }

  .member-landing-hero > div:first-child > div {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:7px;
    margin-top:20px;
  }

  .member-landing-hero button {
    min-width:0;
    min-height:43px;
    justify-content:center;
    padding:0 8px;
    border-radius:12px;
    font-size:10px;
  }

  .member-landing-orbit {
    display:none;
  }

  .member-longtail-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .member-longtail-grid button {
    display:grid;
    grid-template-columns:1fr;
    min-height:165px;
    align-content:space-between;
    gap:8px;
    padding:15px;
    border-radius:17px;
  }

  .member-longtail-grid button > span {
    width:40px;
    height:40px;
    border-radius:12px;
  }

  .member-longtail-grid button > span svg {
    width:19px;
  }

  .member-longtail-grid button > div {
    align-self:end;
  }

  .member-longtail-grid strong {
    font-size:13px;
  }

  .member-longtail-grid p {
    display:-webkit-box;
    overflow:hidden;
    font-size:9px;
    line-height:1.5;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .member-longtail-grid button > svg {
    position:absolute;
    right:14px;
    top:17px;
    width:14px;
    color:#95aabd;
  }

  .member-conversion-band {
    display:grid;
    gap:15px;
    padding:19px;
    border-radius:18px;
    background:linear-gradient(135deg,#ecf7ff,#ecfaf5);
  }

  .member-conversion-band h2 {
    font-size:17px;
    line-height:1.4;
  }

  .member-conversion-band p {
    margin-top:5px;
    font-size:10px;
    line-height:1.55;
  }

  .member-conversion-band button {
    width:100%;
    min-height:43px;
    justify-content:center;
    border-radius:12px;
  }

  .member-summary-hero {
    position:relative;
    min-height:300px;
    padding:23px 19px;
    border-radius:22px;
  }

  .member-summary-hero h2 {
    font-size:25px;
  }

  .member-summary-hero p {
    font-size:11px;
  }

  .member-summary-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .member-summary-actions button {
    min-width:0;
    justify-content:center;
    padding:0 7px;
    font-size:10px;
  }

  .member-service-seal {
    position:absolute;
    right:17px;
    bottom:15px;
    width:76px;
    height:76px;
    flex-basis:76px;
  }

  .member-service-seal span {
    width:28px;
    height:28px;
  }

  .member-service-seal strong {
    font-size:11px;
  }

  .member-service-seal small {
    max-width:55px;
    overflow:hidden;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .enterprise-tech-overview {
    grid-template-columns:minmax(0,1fr) 92px;
    gap:13px;
    padding:19px 15px 27px;
    border-radius:18px;
  }

  .enterprise-tech-copy {
    min-width:0;
  }

  .enterprise-tech-copy h2 {
    max-width:190px;
    overflow:hidden;
    font-size:17px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .enterprise-tech-copy div {
    display:grid;
    gap:3px;
    margin-top:12px;
  }

  .enterprise-health-ring {
    width:88px;
    height:88px;
  }

  .enterprise-health-ring:before {
    width:68px;
    height:68px;
  }

  .enterprise-health-ring strong {
    margin-top:-11px;
    font-size:22px;
  }

  .enterprise-health-ring span {
    margin-top:34px;
    font-size:8px;
  }

  .enterprise-signal-chart {
    grid-column:1/-1;
    height:78px;
    margin-top:4px;
  }

  .member-kpi-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .member-kpi-grid > button {
    grid-template-columns:auto 1fr;
    min-height:118px;
    gap:8px;
    padding:14px 12px;
    border-radius:16px;
  }

  .member-kpi-grid > button > svg {
    display:none;
  }

  .member-kpi-icon {
    width:34px;
    height:34px;
    border-radius:11px;
  }

  .member-kpi-grid strong {
    font-size:22px;
  }

  .member-tool-launcher > div:last-child {
    grid-template-columns:1fr 1fr;
  }

  .member-tool-launcher button {
    grid-template-columns:auto 1fr;
    min-height:65px;
    border-radius:13px;
  }

  .member-tool-launcher button > svg {
    display:none;
  }

  .member-upgrade-teaser {
    gap:13px;
    padding:18px;
    border-radius:17px;
  }

  .member-upgrade-teaser h2 {
    font-size:17px;
  }

  .member-section-panel {
    min-height:0;
  }

  .member-section-panel:has(.member-employee-table) {
    overflow:visible;
  }

  .member-employee-table {
    display:grid;
    min-width:0;
    gap:9px;
    overflow:visible;
    border:0;
    background:transparent;
  }

  .member-employee-head {
    display:none;
  }

  .member-employee-item {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    min-height:0;
    padding:14px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
  }

  .member-employee-item > span:first-child,
  .member-employee-item > span:last-child {
    grid-column:1/-1;
  }

  .member-employee-item > span:nth-child(4) {
    position:absolute;
    top:14px;
    right:13px;
  }

  .employee-person i {
    border-radius:11px;
  }

  .member-reminder-list article {
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
    min-height:0;
    padding:13px;
    border-radius:14px;
  }

  .member-reminder-list article > .badge,
  .member-reminder-list article > button {
    grid-column:2;
  }

  .member-background-form,
  .member-background-records,
  .member-order-list {
    padding:16px 14px;
  }

  .member-background-layout {
    display:grid;
    gap:10px;
  }

  .member-product-grid {
    grid-template-columns:1fr;
  }

  .member-product-card {
    gap:10px;
    padding:19px;
    border-radius:17px;
  }

  .member-product-card p {
    min-height:0;
  }

  .member-product-actions {
    grid-template-columns:1fr 1fr;
  }

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

  .member-current-plan,
  .member-next-plan {
    border-radius:19px;
  }

  .member-current-features {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .payment-checkout {
    grid-template-columns:1fr;
    padding:18px;
    border-radius:17px;
  }

  .legal-ticket-panel,
  .member-file-center {
    margin:0;
  }
}

@media (max-width:370px) {
  .member-auth-hero {
    padding-right:10px;
    padding-left:10px;
  }

  .member-auth-hero .member-hero-copy h1 {
    font-size:26px;
  }

  .auth-field-grid,
  .member-login-methods {
    grid-template-columns:1fr;
  }

  .member-longtail-grid {
    grid-template-columns:1fr;
  }
}

/* V1.6 member data cockpit */
.member-dashboard {
  display:grid;
  gap:14px;
}

.member-dashboard-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  min-height:280px;
  align-items:center;
  gap:28px;
  overflow:hidden;
  padding:34px;
  color:#fff;
  border:1px solid rgba(103,220,255,.16);
  border-radius:18px;
  background:
    linear-gradient(rgba(97,220,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(97,220,255,.055) 1px,transparent 1px),
    radial-gradient(circle at 90% 10%,rgba(65,218,188,.31),transparent 31%),
    linear-gradient(135deg,#071d34,#0d3d68 58%,#086f75);
  background-size:28px 28px,28px 28px,auto,auto;
  box-shadow:0 22px 52px rgba(7,42,73,.22);
}

.member-dashboard-hero:after {
  content:"";
  position:absolute;
  right:-60px;
  bottom:-110px;
  width:280px;
  height:280px;
  border:1px solid rgba(106,233,209,.18);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(106,233,209,.035),0 0 0 82px rgba(106,233,209,.02);
}

.dashboard-hero-copy {
  position:relative;
  z-index:2;
  display:grid;
  gap:11px;
}

.dashboard-live {
  display:flex;
  width:max-content;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  color:#7fe9d2;
  border:1px solid rgba(127,233,210,.2);
  border-radius:999px;
  background:rgba(127,233,210,.07);
  font-size:10px;
  font-weight:900;
}

.dashboard-live i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#71f1cf;
  box-shadow:0 0 0 5px rgba(113,241,207,.11);
}

.dashboard-hero-copy h2 {
  max-width:640px;
  color:#fff;
  font-size:30px;
  line-height:1.25;
}

.dashboard-hero-copy p {
  max-width:600px;
  color:#9bbbd0;
  font-size:12px;
  line-height:1.75;
}

.dashboard-hero-actions {
  display:flex;
  gap:8px;
  margin-top:8px;
}

.dashboard-hero-actions button {
  display:flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 15px;
  color:#0a3653;
  border-radius:10px;
  background:#70e3cd;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.dashboard-hero-actions button:last-child {
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
}

.dashboard-hero-actions svg {
  width:16px;
}

.dashboard-health-ring {
  position:relative;
  z-index:2;
  display:grid;
  width:160px;
  height:160px;
  place-items:center;
  justify-self:center;
  padding:0;
  color:#fff;
  border-radius:50%;
  background:conic-gradient(#6be7cb var(--dashboard-health),rgba(255,255,255,.11) 0);
  box-shadow:0 0 45px rgba(75,224,194,.21);
  cursor:pointer;
}

.dashboard-health-ring:before {
  content:"";
  grid-area:1/1;
  width:128px;
  height:128px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  background:#0a2e4c;
  box-shadow:inset 0 0 28px rgba(66,218,189,.09);
}

.dashboard-health-ring > span {
  z-index:1;
  grid-area:1/1;
  display:grid;
  justify-items:center;
  gap:1px;
  margin-top:-8px;
}

.dashboard-health-ring strong {
  font-size:42px;
  line-height:1;
}

.dashboard-health-ring small {
  color:#8fb5cb;
  font-size:9px;
}

.dashboard-health-ring em {
  z-index:1;
  grid-area:1/1;
  align-self:end;
  margin-bottom:31px;
  color:#71e5cc;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}

.dashboard-kpi-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.dashboard-kpi-strip > button {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  min-height:118px;
  align-items:center;
  gap:12px;
  padding:16px;
  color:var(--ink);
  text-align:left;
  border:1px solid rgba(21,69,104,.1);
  border-radius:15px;
  background:#fff;
  box-shadow:0 9px 25px rgba(18,62,94,.06);
  cursor:pointer;
}

.dashboard-kpi-strip > button > span {
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  color:#fff;
  border-radius:13px;
}

.dashboard-kpi-strip > button > span.blue { background:linear-gradient(135deg,#347fe0,#5aa8f0); }
.dashboard-kpi-strip > button > span.amber { background:linear-gradient(135deg,#d89126,#f0b753); }
.dashboard-kpi-strip > button > span.green { background:linear-gradient(135deg,#14927b,#45c7a9); }
.dashboard-kpi-strip > button > span.violet { background:linear-gradient(135deg,#6f59bf,#9a83e5); }
.dashboard-kpi-strip svg { width:19px; }
.dashboard-kpi-strip > button > div { display:grid; min-width:0; gap:3px; }
.dashboard-kpi-strip small { color:#71889b; font-size:10px; }
.dashboard-kpi-strip strong { font-size:26px; line-height:1; }
.dashboard-kpi-strip strong em { margin-left:3px; color:#8297a8; font-size:9px; font-style:normal; }
.dashboard-kpi-strip b { overflow:hidden; color:#7d93a4; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }

.dashboard-chart-grid {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:12px;
}

.dashboard-chart-card,
.dashboard-reminder-card,
.dashboard-upload-card,
.dashboard-module-section {
  padding:19px;
  border:1px solid rgba(21,69,104,.1);
  border-radius:17px;
  background:#fff;
  box-shadow:0 10px 28px rgba(18,62,94,.06);
}

.dashboard-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.dashboard-card-head > div {
  display:grid;
  gap:3px;
}

.dashboard-card-head > div > span,
.dashboard-upload-heading small {
  color:#159b85;
  font-size:9px;
  font-weight:900;
  letter-spacing:.7px;
}

.dashboard-card-head h3,
.dashboard-upload-heading h3 {
  font-size:17px;
}

.dashboard-card-head > b {
  padding:6px 8px;
  border-radius:8px;
  font-size:10px;
}

.dashboard-card-head > b.up { color:#087e6b; background:#e4f7f2; }
.dashboard-card-head > b.down { color:#b8594f; background:#fff0ed; }
.dashboard-card-head > button { display:flex; align-items:center; gap:4px; padding:0; color:#3978ac; background:transparent; font-size:10px; font-weight:900; cursor:pointer; }
.dashboard-card-head > button svg { width:13px; }
.dashboard-card-head > small { color:#8ca0b0; font-size:9px; }

.dashboard-trend-card svg {
  width:100%;
  height:155px;
  margin-top:10px;
  overflow:visible;
}

.chart-grid-lines {
  fill:none;
  stroke:#e5edf2;
  stroke-width:1;
}

.health-trend-line {
  fill:none;
  stroke:#20b99c;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 5px 6px rgba(32,185,156,.2));
}

.dashboard-trend-card circle {
  fill:#fff;
  stroke:#20b99c;
  stroke-width:2;
}

.dashboard-trend-card circle.current {
  fill:#20b99c;
  stroke:#d9faf2;
  stroke-width:4;
}

.dashboard-axis {
  display:flex;
  justify-content:space-between;
  margin-top:-7px;
  color:#91a3b1;
  font-size:8px;
}

.dashboard-radar-card {
  display:grid;
  align-content:start;
}

.dashboard-bars {
  display:grid;
  gap:17px;
  margin-top:24px;
}

.dashboard-bars > div {
  display:grid;
  gap:7px;
}

.dashboard-bars span {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.dashboard-bars b {
  color:#425f75;
  font-size:10px;
}

.dashboard-bars em {
  color:#128c78;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}

.dashboard-bars i {
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#eaf0f4;
}

.dashboard-bars u {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#1677ce,#4fd6bc);
  box-shadow:0 0 12px rgba(67,201,177,.35);
  text-decoration:none;
}

.dashboard-reminder-list {
  display:grid;
  gap:8px;
  margin-top:15px;
}

.dashboard-reminder-list > button {
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto 15px;
  min-height:68px;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  color:var(--ink);
  text-align:left;
  border:1px solid #e3ebf1;
  border-radius:13px;
  background:#f9fbfc;
  cursor:pointer;
}

.dashboard-reminder-list > button > i {
  display:grid;
  width:29px;
  height:29px;
  place-items:center;
  color:#7b6a38;
  border-radius:9px;
  background:#fff0cd;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}

.dashboard-reminder-list > button > i.hot { color:#b3473e; background:#ffe8e4; }
.dashboard-reminder-list > button > span { display:grid; min-width:0; gap:4px; }
.dashboard-reminder-list strong { font-size:11px; }
.dashboard-reminder-list small { overflow:hidden; color:#8397a7; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-reminder-list em { color:#59758b; font-size:9px; font-style:normal; font-weight:800; white-space:nowrap; }
.dashboard-reminder-list > button > svg { width:14px; color:#8ba1b2; }

.dashboard-upload-card {
  position:relative;
  overflow:hidden;
  border-color:rgba(22,145,125,.2);
  background:
    radial-gradient(circle at 96% 0,rgba(78,214,189,.16),transparent 28%),
    linear-gradient(130deg,#f1fbf8,#fff 60%,#f1f8fd);
}

.dashboard-upload-card:after {
  content:"";
  position:absolute;
  right:-45px;
  bottom:-75px;
  width:160px;
  height:160px;
  border:1px solid rgba(23,151,129,.1);
  border-radius:50%;
}

.dashboard-upload-heading {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
}

.dashboard-upload-heading > span {
  display:grid;
  width:48px;
  height:48px;
  flex:0 0 48px;
  place-items:center;
  color:#fff;
  border-radius:15px;
  background:linear-gradient(135deg,#0875c9,#14a98f);
  box-shadow:0 9px 22px rgba(11,120,166,.2);
}

.dashboard-upload-heading > span svg { width:22px; }
.dashboard-upload-heading > div { display:grid; gap:3px; }
.dashboard-upload-heading p { color:#71899b; font-size:10px; }

.dashboard-upload-fields {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:16px;
}

.dashboard-upload-fields label {
  display:grid;
  gap:6px;
}

.dashboard-upload-fields label > span {
  color:#567287;
  font-size:9px;
  font-weight:800;
}

.dashboard-upload-fields select {
  width:100%;
  min-width:0;
  height:45px;
  padding:0 11px;
  color:#24475f;
  border:1px solid #d7e5ec;
  border-radius:11px;
  outline:0;
  background:#fff;
  font-size:11px;
}

.dashboard-upload-actions {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}

.dashboard-upload-actions input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.dashboard-upload-actions button {
  display:flex;
  min-height:45px;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#315a74;
  border:1px solid #cbdfe9;
  border-radius:11px;
  background:#fff;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.dashboard-upload-actions button.camera {
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#0874ca,#0aa18a);
  box-shadow:0 9px 22px rgba(10,119,165,.17);
}

.dashboard-upload-actions svg { width:16px; }
.dashboard-upload-card.uploading { opacity:.7; pointer-events:none; }
.dashboard-upload-card.uploading:before { content:"正在上传并归档…"; position:absolute; z-index:5; inset:0; display:grid; place-items:center; color:#fff; background:rgba(7,38,61,.78); font-size:13px; font-weight:900; backdrop-filter:blur(4px); }

.dashboard-recent-files {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:13px;
  overflow-x:auto;
  scrollbar-width:none;
}

.dashboard-recent-files > span {
  flex:0 0 auto;
  color:#7890a2;
  font-size:9px;
  font-weight:900;
}

.dashboard-recent-files button {
  display:flex;
  min-width:0;
  align-items:center;
  gap:5px;
  padding:7px 8px;
  color:#43627a;
  border:1px solid #dfe9ef;
  border-radius:9px;
  background:rgba(255,255,255,.85);
  white-space:nowrap;
}

.dashboard-recent-files button svg { width:13px; color:#168c78; }
.dashboard-recent-files button b { max-width:130px; overflow:hidden; font-size:9px; text-overflow:ellipsis; }
.dashboard-recent-files button small { color:#91a2ae; font-size:8px; }
.dashboard-recent-files p { color:#8ca0ad; font-size:9px; }

.dashboard-module-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:15px;
}

.dashboard-module-grid > button {
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 15px;
  min-height:88px;
  align-items:center;
  gap:9px;
  padding:12px;
  color:#183d58;
  text-align:left;
  border:1px solid #e0e9ef;
  border-radius:14px;
  background:#fbfcfd;
  cursor:pointer;
}

.dashboard-module-grid > button > span {
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  color:var(--module-color);
  border-radius:12px;
  background:var(--module-soft);
}

.dashboard-module-grid > button.blue { --module-color:#2779d4; --module-soft:#eaf3ff; }
.dashboard-module-grid > button.amber { --module-color:#bc7c18; --module-soft:#fff3dc; }
.dashboard-module-grid > button.green { --module-color:#148b76; --module-soft:#e5f7f2; }
.dashboard-module-grid > button.cyan { --module-color:#118eac; --module-soft:#e4f7fb; }
.dashboard-module-grid > button.violet { --module-color:#6e56bd; --module-soft:#f0ecff; }
.dashboard-module-grid > button.navy { --module-color:#315f8f; --module-soft:#e9f0f7; }
.dashboard-module-grid > button.red { --module-color:#bd5b50; --module-soft:#fff0ed; }
.dashboard-module-grid > button.mint { --module-color:#168c72; --module-soft:#e8f8f3; }
.dashboard-module-grid > button > span svg { width:19px; }
.dashboard-module-grid > button > strong { min-width:0; font-size:11px; }
.dashboard-module-grid > button > small { position:absolute; right:29px; bottom:15px; color:#8397a6; font-size:8px; }
.dashboard-module-grid > button > svg { width:13px; color:#92a5b4; }

@media (max-width:980px) {
  .member-dashboard-hero { grid-template-columns:minmax(0,1fr) 155px; }
  .dashboard-health-ring { width:140px; height:140px; }
  .dashboard-health-ring:before { width:112px; height:112px; }
  .dashboard-health-ring em { margin-bottom:27px; }
  .dashboard-kpi-strip,.dashboard-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .member-dashboard {
    gap:10px;
  }

  .member-dashboard-hero {
    grid-template-columns:minmax(0,1fr) 104px;
    min-height:245px;
    gap:10px;
    padding:20px 16px;
    border-radius:22px;
  }

  .dashboard-live {
    padding:5px 7px;
    font-size:8px;
  }

  .dashboard-hero-copy h2 {
    max-width:205px;
    font-size:22px;
  }

  .dashboard-hero-copy p {
    max-width:210px;
    font-size:9px;
    line-height:1.65;
  }

  .dashboard-hero-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    width:calc(100% + 104px);
  }

  .dashboard-hero-actions button {
    min-height:40px;
    padding:0 7px;
    border-radius:11px;
    font-size:9px;
  }

  .dashboard-health-ring {
    width:100px;
    height:100px;
  }

  .dashboard-health-ring:before {
    width:78px;
    height:78px;
  }

  .dashboard-health-ring strong {
    font-size:28px;
  }

  .dashboard-health-ring small {
    font-size:7px;
  }

  .dashboard-health-ring em {
    margin-bottom:17px;
    font-size:8px;
  }

  .dashboard-kpi-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .dashboard-kpi-strip > button {
    min-height:105px;
    gap:8px;
    padding:12px 10px;
    border-radius:16px;
  }

  .dashboard-kpi-strip > button > span {
    width:34px;
    height:34px;
    border-radius:11px;
  }

  .dashboard-kpi-strip > button > span svg {
    width:16px;
  }

  .dashboard-kpi-strip strong {
    font-size:22px;
  }

  .dashboard-chart-grid {
    grid-template-columns:1fr;
    gap:10px;
  }

  .dashboard-chart-card,
  .dashboard-reminder-card,
  .dashboard-upload-card,
  .dashboard-module-section {
    padding:16px 14px;
    border-radius:18px;
  }

  .dashboard-trend-card svg {
    height:128px;
  }

  .dashboard-reminder-list > button {
    grid-template-columns:29px minmax(0,1fr) 14px;
    gap:8px;
    padding:10px;
  }

  .dashboard-reminder-list > button > em {
    grid-column:2;
    grid-row:2;
  }

  .dashboard-reminder-list > button > svg {
    grid-column:3;
    grid-row:1/3;
  }

  .dashboard-upload-heading > span {
    width:44px;
    height:44px;
    flex-basis:44px;
  }

  .dashboard-upload-heading p {
    font-size:9px;
  }

  .dashboard-upload-fields {
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .dashboard-upload-fields select {
    height:44px;
    padding:0 8px;
    font-size:10px;
  }

  .dashboard-upload-actions button {
    min-height:44px;
    padding:0 5px;
    font-size:9px;
  }

  .dashboard-recent-files {
    margin-right:-14px;
    padding-right:14px;
  }

  .dashboard-module-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .dashboard-module-grid > button {
    grid-template-columns:36px minmax(0,1fr) 13px;
    min-height:82px;
    gap:7px;
    padding:10px;
    border-radius:15px;
  }

  .dashboard-module-grid > button > span {
    width:35px;
    height:35px;
    border-radius:11px;
  }

  .dashboard-module-grid > button > span svg {
    width:17px;
  }

  .dashboard-module-grid > button > small {
    right:25px;
    bottom:12px;
  }
}

@media (max-width:370px) {
  .member-dashboard-hero {
    grid-template-columns:minmax(0,1fr) 88px;
  }

  .dashboard-health-ring {
    width:86px;
    height:86px;
  }

  .dashboard-health-ring:before {
    width:66px;
    height:66px;
  }

  .dashboard-health-ring strong {
    font-size:24px;
  }

  .dashboard-health-ring em {
    margin-bottom:13px;
  }

  .dashboard-hero-actions {
    width:calc(100% + 88px);
  }
}

/* iOS 安全区适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .h5-dock, .h5-bottom-nav, .bottom-dock { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}