:root {
  color: #18282d;
  background: #eef1ef;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  font-synthesis: none;
  --ink: #18282d;
  --muted: #5a686c;
  --paper: #ffffff;
  --soft: #f5f7f6;
  --line: #dfe5e2;
  --green: #176b5b;
  --green-dark: #0e5145;
  --green-soft: #e2f1eb;
  --gold: #d8973c;
  --red: #b84a3d;
  --shadow: 0 16px 42px rgba(28, 54, 49, 0.08);
}

* { box-sizing: border-box; }
body { min-width: 0; min-height: 100vh; margin: 0; background: #eef1ef; }
button, input, textarea, select { min-height: 44px; font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(23, 107, 91, 0.25);
  outline-offset: 3px;
}
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.boot {
  display: grid;
  width: min(500px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  place-content: center;
  justify-items: center;
  text-align: center;
}
.boot-mark, .brand-mark {
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--green);
  font-weight: 900;
}
.boot-mark { width: 64px; height: 64px; border-radius: 22px; box-shadow: 0 18px 36px rgba(23, 107, 91, 0.2); font-size: 24px; }
.boot h1 { margin: 16px 0 6px; font-size: 30px; }
.boot p:not(.eyebrow) { margin: 0 0 18px; color: var(--muted); line-height: 1.7; }
.boot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.boot-actions a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.boot .boot-help { max-width: 34rem; margin-top: 14px; font-size: 13px; }

.workspace { min-height: 100vh; }
.sidebar {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
}
.brand, .identity-card { display: none; }
.main-nav { display: grid; grid-template-columns: repeat(6, 1fr); }
.nav-item {
  display: grid;
  min-width: 0;
  min-height: 62px;
  gap: 3px;
  place-items: center;
  padding: 6px 2px max(6px, env(safe-area-inset-bottom));
  border: 0;
  color: var(--muted);
  background: transparent;
}
.nav-item span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 9px; font-size: 12px; }
.nav-item strong { overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.active { color: var(--green-dark); }
.nav-item.active span { color: #fff; background: var(--green); }

.main-shell { padding: 0 0 86px; }
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 22px 18px 14px;
}
.eyebrow { margin: 0 0 4px; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; }
.topbar h1 { margin: 0; font-size: clamp(26px, 8vw, 38px); letter-spacing: -0.04em; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.scope-chip { display: none; padding: 7px 11px; border: 1px solid rgba(23, 107, 91, 0.18); border-radius: 999px; color: var(--green-dark); background: var(--green-soft); font-size: 12px; font-weight: 800; }
.mobile-account { position: relative; }
.mobile-account summary {
  display: grid;
  min-width: 52px;
  min-height: 44px;
  padding: 8px 12px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--green-dark);
  background: var(--paper);
  font-size: 13px;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}
.mobile-account summary::-webkit-details-marker { display: none; }
.mobile-account summary:focus-visible { outline: 3px solid rgba(23, 107, 91, 0.25); outline-offset: 3px; }
.mobile-account-card {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: min(280px, calc(100vw - 28px));
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 18px 48px rgba(28, 54, 49, 0.18);
}
.mobile-account-card > span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.mobile-account-card > strong { overflow-wrap: anywhere; }
.mobile-account-card p { margin: 3px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.portal-home-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--green-dark);
  background: var(--paper);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.portal-home-link:focus-visible { outline: 3px solid rgba(23, 107, 91, 0.25); outline-offset: 3px; }
main { padding: 0 14px; }
.view { width: min(1260px, 100%); margin: 0 auto; }

.hero-strip {
  position: relative;
  display: grid;
  gap: 18px;
  overflow: hidden;
  padding: 24px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(135deg, #0e5145, #1b7664);
  box-shadow: var(--shadow);
}
.hero-strip::after { position: absolute; right: -40px; bottom: -70px; width: 180px; height: 180px; border: 28px solid rgba(255, 255, 255, 0.09); border-radius: 50%; content: ""; }
.hero-strip p, .hero-strip h2, .hero-strip span { position: relative; z-index: 1; margin: 0; }
.hero-strip p { color: #bfe4d8; font-size: 12px; font-weight: 800; }
.hero-strip h2 { margin-top: 5px; font-size: clamp(24px, 7vw, 36px); }
.hero-strip span { display: block; margin-top: 8px; color: rgba(255, 255, 255, 0.76); line-height: 1.6; }

.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.metric-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.metric-grid span { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.metric-grid strong { display: block; margin-top: 7px; color: var(--green-dark); font-size: 28px; }

.today-columns, .split-view, .two-column { display: grid; gap: 14px; }
.panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); }
.panel-head, .section-head, .detail-heading { display: flex; justify-content: space-between; gap: 14px; align-items: start; }
.panel-head span, .section-head span { color: var(--muted); font-size: 12px; }
.panel-head h2, .section-head h2, .detail-heading h2 { margin: 4px 0 0; font-size: 20px; }
.section-head { margin-bottom: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); }
.section-head > div > span { display: block; margin-top: 6px; line-height: 1.6; }

.case-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--soft);
}
.case-filter {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
}
.case-filter.active {
  border-color: var(--line);
  color: var(--green-dark);
  background: #fff;
  box-shadow: 0 4px 14px rgba(19, 55, 48, 0.06);
}

.compact-list, .card-list, .wide-card-list, .timeline { display: grid; gap: 9px; margin-top: 14px; }
.compact-card, .list-card, .wide-card, .timeline-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: var(--soft);
}
button.compact-card, button.list-card { width: 100%; text-align: left; }
.list-card.active { border-color: rgba(23, 107, 91, 0.38); background: var(--green-soft); }
.compact-card strong, .list-card strong, .wide-card strong { display: block; overflow-wrap: anywhere; }
.compact-card p, .list-card p, .wide-card p, .timeline-card p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.card-line { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.tag, .state-pill { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.tag { color: var(--green-dark); background: var(--green-soft); }
.state-pill { color: #77501a; background: #fff2d9; }

.primary-button, .secondary-button, .text-button, .mini-link {
  min-height: 44px;
  padding: 9px 14px;
  border-radius: 13px;
  font-weight: 850;
}
.primary-button { border: 1px solid var(--green); color: #fff; background: var(--green); }
.primary-button:hover { background: var(--green-dark); }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.text-button, .mini-link { padding: 4px; border: 0; color: var(--green-dark); background: transparent; }
.mini-link { min-height: 32px; font-size: 12px; }
.danger-text { color: var(--red); }
button:disabled { opacity: 0.58; cursor: wait; }

.list-panel { align-self: start; }
.detail-panel { align-self: start; }
.detail-heading { margin-bottom: 15px; }
.quote-card { padding: 15px; border-left: 4px solid var(--gold); border-radius: 0 14px 14px 0; background: #fff8ed; line-height: 1.72; white-space: pre-wrap; }
.subtle { color: var(--muted); font-size: 13px; }
.detail-block { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.detail-block h3 { margin: 0; font-size: 14px; }
.candidate-review { border-radius: 14px; background: #f5faf7; padding: 17px; }
.candidate-profile { display: grid; gap: 5px; margin-top: 10px; color: var(--muted); }
.candidate-profile strong { color: var(--ink); }
.candidate-profile p { margin: 0; line-height: 1.55; }
.case-follow-up {
  padding: 18px;
  border: 1px solid #d6e5df;
  border-radius: 18px;
  overflow-wrap: anywhere;
  background: linear-gradient(145deg, #f8fbfa, #eef6f2);
}
.case-follow-up .subtle { line-height: 1.65; }
.journey-readonly { padding: 18px; border: 1px solid #d6e5df; border-radius: 18px; background: linear-gradient(145deg, #f8fbfa, #eef6f2); }
.readonly-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.readonly-chip { padding: 4px 8px; border-radius: 999px; color: var(--green-dark); background: var(--green-soft); font-size: 10px; font-weight: 900; }
.journey-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.journey-summary .compact-card:first-child { grid-column: 1 / -1; border-color: rgba(23, 107, 91, 0.24); background: #fff; }

.stack-form { display: grid; gap: 14px; margin-top: 16px; }
.stack-form label, .resolution-row label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 800; }
.assignment-link-confirmation { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.assignment-link-confirmation h4, .assignment-link-confirmation p { margin: 0; }
input, textarea, select { width: 100%; padding: 10px 12px; border: 1px solid #cfd9d5; border-radius: 12px; color: var(--ink); background: #fff; }
textarea { resize: vertical; line-height: 1.6; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; }
.button-row > * { flex: 1 1 130px; }
.resolution-row { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.resolution-summary {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #cfe0da;
  border-radius: 15px;
  background: #f1f8f5;
}
.resolution-summary span { display: block; color: var(--muted); font-size: 12px; }
.resolution-summary strong { display: block; margin-top: 4px; color: var(--green-dark); }
.resolution-summary p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.case-confirmation {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #ead4a9;
  border-radius: 15px;
  background: #fff8e9;
}
.case-confirmation h3 { margin: 0; font-size: 16px; }
.case-confirmation p { margin: 7px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.transition-row { margin-top: 14px; }

@media (max-width: 520px) {
  .resolution-summary { align-items: stretch; flex-direction: column; }
  .resolution-summary .secondary-button { width: 100%; }
  .case-follow-up .readonly-heading { align-items: stretch; flex-direction: column; }
  .case-follow-up .readonly-heading button, .case-follow-up .stack-form > button { width: 100%; }
}

.panel-message { min-height: 20px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.panel-message.error { color: var(--red); font-weight: 800; }
.panel-message.success { color: var(--green-dark); font-weight: 800; }
.list-status { margin-top: 14px; padding: 14px; border: 1px solid #cfe0da; border-radius: 15px; color: var(--green-dark); background: #f1f8f5; }
.list-status strong { display: block; }
.list-status p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.list-status .secondary-button { margin-top: 10px; }
.list-status.error { border-color: #e4c0ba; color: var(--red); background: #fff4f2; }
.list-status.stale { border-color: #ead4a9; color: #77501a; background: #fff8e9; }
.empty-state { margin-top: 14px; padding: 22px; border-radius: 15px; color: var(--muted); background: var(--soft); text-align: center; }
.empty-state p { margin: 6px 0 0; }

.task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.task-actions button { min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12px; font-weight: 800; }
.business-note { margin-top: 10px !important; padding: 8px 10px; border-radius: 10px; color: #6d5429 !important; background: #fff4dd; }
.integrity-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.integrity-row span { padding: 4px 7px; border-radius: 999px; color: var(--green-dark); background: var(--green-soft); font-size: 10px; font-weight: 800; }

.search-field { display: block; margin-top: 14px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-row span { padding: 5px 8px; border-radius: 999px; color: var(--green-dark); background: var(--green-soft); font-size: 11px; }
.mini-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.mini-metrics div { padding: 11px; border-radius: 13px; background: var(--soft); }
.mini-metrics span { display: block; color: var(--muted); font-size: 10px; }
.mini-metrics strong { display: block; margin-top: 4px; }

.assistant-wakeup-panel { padding-bottom: 4px; }
.assistant-wakeup-panel .panel-head h3 { margin: 4px 0 0; }
.wakeup-batch-controls { display: grid; gap: 10px; margin-top: 14px; }
.wakeup-batch-controls > strong { color: var(--green-dark); font-size: 13px; }
.assistant-wakeup-list { display: grid; gap: 10px; margin-top: 14px; }
.assistant-wakeup-card { padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--soft); }
.assistant-wakeup-heading { display: flex; gap: 9px; align-items: start; line-height: 1.5; }
.assistant-wakeup-heading input { width: auto; margin-top: 3px; }
.assistant-wakeup-card > p { margin: 6px 0 10px; color: var(--muted); font-size: 11px; }
.assistant-wakeup-card textarea { background: #fff; }
.assistant-wakeup-preview-items { display: grid; gap: 6px; margin: 10px 0 14px; }
.assistant-wakeup-preview-items p { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.78); }

@media (max-width: 430px) {
  .journey-summary { grid-template-columns: 1fr; }
  .journey-summary .compact-card:first-child { grid-column: auto; }
}

.toast { position: fixed; z-index: 50; right: 16px; bottom: 82px; left: 16px; padding: 13px 15px; border-radius: 14px; color: #fff; background: #18332d; box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18); text-align: center; }
.toast.error { background: #8d382e; }

@media (min-width: 900px) {
  .workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; right: auto; bottom: auto; left: auto; display: flex; height: 100vh; flex-direction: column; padding: 24px 16px; border-top: 0; border-right: 1px solid var(--line); background: #f8faf9; backdrop-filter: none; }
  .brand { display: flex; gap: 11px; align-items: center; padding: 0 8px; }
  .brand-mark { width: 42px; height: 42px; border-radius: 14px; }
  .brand span, .identity-card span { display: block; color: var(--muted); font-size: 10px; }
  .brand strong { display: block; margin-top: 2px; }
  .main-nav { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 34px; }
  .nav-item { display: flex; min-height: 48px; gap: 11px; justify-content: start; padding: 8px 10px; border-radius: 14px; }
  .nav-item strong { font-size: 13px; }
  .identity-card { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; margin-top: auto; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
  .identity-card .avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; color: #fff; background: var(--green); font-size: 12px; font-weight: 900; }
  .identity-card .portal-home-link { grid-column: 1 / -1; }
  .identity-card .text-button { grid-column: 1 / -1; justify-self: start; min-height: 30px; }
  .main-shell { padding: 0 0 34px; }
  .topbar { padding: 32px 34px 20px; }
  .scope-chip { display: inline-flex; }
  .mobile-account { display: none; }
  main { padding: 0 32px; }
  .hero-strip { grid-template-columns: 1fr auto; align-items: center; padding: 32px; }
  .metric-grid { grid-template-columns: repeat(4, 1fr); }
  .today-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split-view { grid-template-columns: minmax(300px, 0.72fr) minmax(430px, 1.28fr); }
  .two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-panel, .detail-panel { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; }
  .toast { right: 28px; bottom: 28px; left: auto; max-width: 440px; }
}

@media (prefers-reduced-motion: no-preference) {
  .view:not(.hidden) { animation: view-in 200ms ease-out both; }
  @keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
}

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

/* The group roster is independent from conversation detail and message campaigns. */
.learner-group-access { grid-column: 1 / -1; }
.learner-group-access > summary { min-height: 44px; padding: 12px 0; color: var(--green-dark); cursor: pointer; font-weight: 800; }
.learner-group-access > summary span { float: right; margin-left: 12px; font-size: 12px; }
.learner-group-access .group-collapse-hint, .learner-group-access[open] .group-expand-hint { display: none; }
.learner-group-access[open] .group-collapse-hint { display: inline; }
.learner-group-access[open] > .panel-head { margin-top: 16px; }
.learner-group-roster { display: grid; gap: 12px; margin-top: 16px; max-height: min(60vh, 36rem); overflow-y: auto; padding: 2px; }
.learner-group-roster .compact-card { min-width: 0; overflow-wrap: anywhere; }
.learner-group-roster .check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.learner-group-roster input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 24px; }
@media (min-width: 900px) {
  .learner-group-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
 .case-history-list { max-height: 22rem; overflow-y: auto; overflow-wrap: anywhere; }
 .case-history-list article { padding: .6rem 0; border-bottom: 1px solid #dce6e2; }
 .case-history-list article p { white-space: pre-wrap; margin: .35rem 0; }

.case-batch-reply { white-space: pre-wrap; overflow-wrap: anywhere; }

.publication-panel { grid-column: 1 / -1; min-width: 0; }
#publication-editor { display: grid; gap: 12px; border: 0; padding: 0; min-width: 0; }
.publication-panel input, .publication-panel textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
.publication-groups, .publication-members, .publication-selected { display: grid; gap: 10px; min-width: 0; }
.publication-panel label { display: flex; align-items: center; gap: 8px; min-height: 44px; overflow-wrap: anywhere; }
.publication-panel input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 22px; }
.publication-members { max-height: 26rem; overflow-y: auto; }
.publication-selected { max-height: 12rem; overflow-y: auto; }
.publication-panel p { overflow-wrap: anywhere; white-space: pre-wrap; }
#publication-open { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 480px) {
  .publication-panel .panel-head { align-items: stretch; flex-direction: column; }
  .publication-panel button { width: 100%; white-space: normal; }
  .publication-groups, .publication-members, .publication-selected { grid-template-columns: minmax(0, 1fr); }
}

/* Shared batch form stays readable within either portal's existing panel. */
#creator-batch-panel > label { display: grid; gap: .4rem; margin-block: .8rem; }
#creator-batch-rows > section { border-top: 1px solid #d7e3e1; margin-top: 1rem; padding-top: .5rem; display: grid; gap: .65rem; }
#creator-batch-rows label { display: grid; gap: .35rem; }
#creator-batch-rows .creator-batch-consent { display: flex; align-items: center; gap: .6rem; }
#creator-batch-rows input[type="checkbox"] { width: 1.2rem; height: 1.2rem; min-height: 1.2rem; padding: 0; margin: 0; order: -1; flex: 0 0 auto; }
#creator-batch-panel button { margin-top: .8rem; margin-right: .4rem; }

/* Staff workspace: compact navigation, readable surfaces, clear actions. */
:root {
  --ink:#142f3a; --muted:#5c707b; --line:#dce7e8;
  --forest:#007d79; --forest-deep:#005b59; --mint:#e5f5f0;
  --green:#007d79; --green-dark:#005b59; --green-soft:#e5f5f0;
  --soft:#f6f9fa; --paper:#fff; --surface:#fff;
  --shadow:0 4px 16px rgba(20,47,58,.045); --radius:12px;
  font-family:"Segoe UI","Microsoft YaHei UI","PingFang SC",sans-serif;
}
body { background:#f5f7f8; color:var(--ink); font-size:14px; }
.topbar h1 { font-family:inherit; font-size:28px; line-height:1.25; letter-spacing:-.035em; }
.eyebrow { color:#476a73; font-size:11px; letter-spacing:.04em; }
.panel { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:20px; }
.panel h2,.panel h3 { color:var(--ink); font-size:18px; line-height:1.4; }
.section-heading h2,.section-head h2 { font-size:22px; line-height:1.35; }
input,select,textarea { border-radius:8px; border-color:#cfdee2; background:#fbfcfd; }
button { transition:background-color .15s,border-color .15s; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #f2aa63; outline-offset:3px; }
button:disabled { cursor:not-allowed; }
.primary,.primary-button { color:#fff; background:#007d79; border-radius:8px; box-shadow:none; }
.primary:hover:not(:disabled),.primary-button:hover:not(:disabled) { background:#006965; }
.secondary,.secondary-button { border-radius:8px; background:#fff; color:#315660; border-color:#d4e2e6; }
.tag,.state-pill,.status-pill { border-radius:5px; }
.sidebar { background:linear-gradient(160deg,#005655,#004a50); box-shadow:none; border:0; }
.sidebar .brand { color:#fff; }
.sidebar .brand strong { font-size:18px; color:#fff; }
.sidebar .brand small,.sidebar .brand span { color:#b9dad9; }
.sidebar .brand-mark { color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16); border-radius:11px; font-family:inherit; }
.sidebar .nav-button,.sidebar .nav-item { color:#d0e7e6; border-radius:8px; font-size:14px; font-weight:500; }
.sidebar .nav-button.active,.sidebar .nav-item.active { color:#fff; background:#087d79; box-shadow:inset 3px 0 #55d6bd; }
.sidebar .nav-button:hover,.sidebar .nav-item:hover { background:#086b6b; color:#fff; }
.nav-icon { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sidebar .role-card,.sidebar .identity-card { color:#effaf9; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); box-shadow:none; border-radius:10px; }
.sidebar .role-card small,.sidebar .identity-card span { color:#b9dad9; }
.sidebar .portal-home-link,.sidebar .portal-switcher-link { color:#e4f4f2; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); border-radius:7px; }
.sidebar .role-card > .text-button,.sidebar .identity-card .text-button { color:#d0e7e6; background:transparent; border:0; font-weight:500; }
.metric-grid { gap:14px; }
.metric-card,.metric-grid article { position:relative; border-radius:10px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.metric-card strong,.metric-grid strong { color:#153947; font-family:inherit; font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; }
.metric-card::after,.metric-grid article::after { content:""; position:absolute; top:18px; right:18px; width:8px; height:8px; border-radius:50%; background:#17a895; box-shadow:0 0 0 7px #e7f6f2; }
.metric-card:nth-child(3)::after,.metric-grid article:nth-child(3)::after { background:#ed9752; box-shadow:0 0 0 7px #fff2e7; }
.metric-card:nth-child(4)::after,.metric-grid article:nth-child(4)::after { background:#558dc1; box-shadow:0 0 0 7px #edf4fb; }
@media (prefers-reduced-motion:reduce) { button { transition:none; } }

.main-shell { min-width:0; }
.topbar { align-items:center; border-bottom:1px solid #e1e9eb; background:#fff; margin-bottom:24px; padding:22px 24px; }
.topbar .eyebrow { margin-bottom:6px; }
.scope-chip { color:#526f77; background:#f2f7f7; border:1px solid #e0ebec; font-weight:500; }
.hero-strip { grid-template-columns:1fr auto; align-items:center; gap:14px; padding:20px 24px; border-radius:12px; color:#163f47; background:linear-gradient(110deg,#e1f4ee,#f4faf8); border:1px solid #cfe8df; box-shadow:none; }
.hero-strip::after { display:none; }
.hero-strip p { color:#37766b; font-size:11px; }
.hero-strip h2 { font-size:22px; color:#163f47; margin-top:4px; }
.hero-strip span { color:#53776f; font-size:13px; margin-top:5px; }
.hero-strip .secondary-button { color:#fff; background:#007d79; border-color:#007d79; white-space:nowrap; }
.metric-grid article { padding:18px 20px; }
.metric-grid span { max-width:calc(100% - 20px); }
.today-columns { gap:16px; align-items:start; }
.today-columns > .panel { min-height:280px; }
.compact-list { gap:0; }
.compact-card { border:0; border-bottom:1px solid #edf1f2; background:#fff; border-radius:0; padding:16px 0; }
button.compact-card:hover { background:#f0f8f6; }
.compact-card:last-child { border-bottom:0; }
.compact-card strong { font-size:14px; font-weight:600; line-height:1.55; }
.compact-card p { color:#657a84; margin-top:6px; }
.panel-head h2 { font-size:18px; }
.panel-head > div > span { font-size:11px; }
.panel-message { font-size:12px; }
#today-status { margin:10px 0 16px; }
.section-head { border:0; padding:0 0 18px; box-shadow:none; background:transparent; border-radius:0; border-bottom:1px solid var(--line); }
.case-filters { border:0; background:transparent; border-bottom:1px solid var(--line); border-radius:0; padding:0; gap:18px; display:flex; }
.case-filter { border:0; border-radius:0; background:transparent; padding:10px 4px; }
.case-filter.active { border:0; border-bottom:2px solid #007d79; box-shadow:none; color:#005b59; background:transparent; }
#case-date-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#case-date-filters > p { grid-column:1/-1; font-size:12px; color:var(--muted); margin:0; }
.list-card { border-radius:8px; background:#fff; padding:14px; }
.list-card.active { border-color:#61b5a7; background:#edf9f5; box-shadow:inset 3px 0 #00857a; }
.task-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.task-column { background:#edf3f6; padding:14px; border-radius:10px; min-width:0; min-height:320px; border-top:3px solid #7db5d8; }
.task-column:first-child { background:#fff6eb; border-color:#edaa64; }
.task-column:last-child { background:#eaf6f1; border-color:#59b49e; }
.task-column h3 { display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; font-size:14px; }
.task-column h3 span { font-size:12px; border-radius:5px; padding:3px 7px; background:#fff; }
.task-column .wide-card { padding:16px; border:1px solid #e2e9ec; background:#fff; border-radius:8px; margin-bottom:12px; box-shadow:0 3px 8px #173b3b05; }
.task-column .wide-card > button { margin:12px 6px 0 0; border:1px solid #cfe1df; border-radius:6px; background:#f2f9f7; color:#005b59; padding:6px 10px; font-size:12px; }
.task-column .business-note { background:transparent; padding:0; font-size:11px; color:#667b83 !important; }
.task-column-empty { font-size:13px; color:#526d78; padding:20px 6px; text-align:center; }
.batch-tools { margin-top:16px; padding:0 12px; border:1px solid #dce7e8; border-radius:8px; background:#f7fafb; }
.batch-tools > summary { padding:12px 0; min-height:44px; color:#005b59; font-weight:600; cursor:pointer; }
.batch-tools[open] { padding-bottom:14px; }
#case-date-filters > .button-row { grid-column:1/-1; flex-direction:row; flex-wrap:wrap; }
#case-date-filters > .button-row > button { width:auto; flex:1 1 auto; }
.list-status:not(.error):not(.stale) { background:transparent; border:0; padding:0; }
.list-status:not(.error):not(.stale) strong { display:none; }
@media (min-width:900px) {
  #cases-view:has(#case-detail.hidden) { grid-template-columns:minmax(0,1fr); }
  #cases-view:has(#case-detail.hidden) .list-panel { max-height:none; position:static; }
  #cases-view:has(#case-detail.hidden) #case-date-filters { grid-template-columns:200px 200px minmax(0,1fr); align-items:end; }
  #cases-view:has(#case-detail.hidden) #case-date-filters > .button-row { grid-column:auto; }
  #cases-view:has(#case-detail.hidden) #case-list { gap:0; }
  #cases-view:has(#case-detail.hidden) .list-card { border:0; border-bottom:1px solid #e5edef; border-radius:0; padding:18px 12px; }
  #cases-view:has(#case-detail.hidden) .list-card:hover { background:#edf8f5; }
}
@media (min-width:900px) {
  .workspace { grid-template-columns:208px minmax(0,1fr); }
  .sidebar { padding:28px 14px 18px; overflow-y:auto; }
  .brand { padding:0 8px 22px; border-bottom:1px solid #ffffff1f; }
  .brand-mark { width:36px; height:40px; }
  .main-nav { margin-top:24px; gap:6px; }
  .nav-item { min-height:44px; padding:10px 14px; gap:12px; }
  .nav-item strong { font-size:14px; font-weight:500; }
  .nav-item span { color:inherit; background:transparent; width:20px; height:20px; }
  .nav-item.active span { background:transparent; }
  .identity-card { margin-top:auto; padding:12px; }
  .topbar { padding:22px 30px; }
  main { padding:0 28px; }
  .view { width:100%; max-width:1480px; }
  .today-columns { grid-template-columns:1.3fr 1fr 1fr; }
  .split-view { grid-template-columns:minmax(280px,.85fr) minmax(340px,1.15fr); }
}
@media (max-width:899px) {
  .sidebar .nav-item { color:#d0e7e6; border-radius:0; }
  .main-nav .nav-item span { color:inherit; background:transparent; }
  .hero-strip { padding:18px; }
  .hero-strip h2 { font-size:20px; }
  .task-board { grid-template-columns:1fr; }
  .task-column { min-height:0; }
  .topbar { padding:18px; margin-bottom:18px; }
  .topbar h1 { font-size:24px; }
}
@media (max-width:480px) {
  .hero-strip { grid-template-columns:1fr; }
  .hero-strip button { justify-self:start; }
  .metric-grid article { padding:16px 12px; }
  .metric-card::after,.metric-grid article::after { right:15px; }
}

#tasks-view > .section-head h2, #tasks-view > .section-head .eyebrow { display:none; }

/* Creator audience choices keep compact controls beside their labels. */
#proposal-creators { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 12px; border: 1px solid #d6e2e7; border-radius: 10px; min-width: 0; }
#proposal-creators[hidden] { display: none; }
#proposal-creators label { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 32px; }
#proposal-creators input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; flex: 0 0 18px; }

/* Shared operations links use the existing navigation layout. */
a.nav-button,a.nav-item,a.mobile-full-nav-button{text-decoration:none}

.case-media-preview { display: block; max-width: 100%; max-height: 480px; margin: 12px 0; border-radius: 8px; }