:root {
  --alluvia-blue: #5b2bbf;
  --alluvia-blue-dark: #3f1d8a;
  --alluvia-burgundy: #b832d4;
  --alluvia-bg-light: #ffffff;
  --alluvia-yellow: #f7d7ff;
  --alluvia-orange: #d946ef;
  --alluvia-turquoise: #a855f7;
  --alluvia-purple: #6d28d9;
  --text-dark: #333;
  --text-grey: #6d7680;
  --line: #d9e2ea;
  --soft: #f6f9fb;
  --danger: #b42318;
  --warn: #b54708;
  --ok: #067647;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", "PingFang TC", sans-serif;
  color: var(--text-dark);
  background: #fff;
  font-size: 14px;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border-radius: 0 !important; }
body.ai-busy button { cursor: wait; }
.topbar {
  min-height: 72px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 28px;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand img { width: 238px; max-width: 46vw; }
.brand strong { display: block; color: var(--alluvia-blue-dark); font-size: 18px; }
.brand span { color: var(--text-grey); }
.persona { display: flex; align-items: center; gap: 10px; }
#currentUser {
  color: var(--alluvia-blue-dark);
  font-weight: 700;
  white-space: nowrap;
}
.mainnav {
  height: 46px;
  background: var(--alluvia-blue);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 4px;
  overflow-x: auto;
}
.mainnav button {
  height: 46px;
  color: #fff;
  background: transparent;
  border: 0;
  padding: 0 14px;
  white-space: nowrap;
  font-weight: 600;
}
.mainnav button.active, .mainnav button:hover { background: var(--alluvia-blue-dark); }
.shell { max-width: 1540px; margin: 0 auto; padding: 20px 24px 48px; }
.app-footer {
  max-width: 1540px;
  margin: 0 auto;
  padding: 14px 24px 24px;
  color: #516171;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.view { display: none; }
.view.active { display: block; }
.page-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
h1 { margin: 0 0 4px; color: var(--alluvia-blue-dark); font-size: 28px; letter-spacing: 0; }
h2 { margin: 0; color: var(--alluvia-blue-dark); font-size: 18px; }
h3 { margin: 0 0 10px; font-size: 15px; color: #24384a; }
.muted { color: var(--text-grey); }
.toolbar, .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-select-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #455464;
  font-weight: 700;
}
input, select, textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 36px;
  padding: 7px 10px;
  background: #fff;
}
.btn {
  min-height: 36px;
  border: 1px solid var(--alluvia-blue);
  background: var(--alluvia-blue);
  color: #fff;
  padding: 7px 12px;
  font-weight: 700;
}
.send-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.send-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}
.btn.secondary { background: #fff; color: var(--alluvia-blue); }
.btn.warn { background: var(--alluvia-orange); border-color: var(--alluvia-orange); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--alluvia-blue-dark);
  font-weight: 800;
}
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}
.email-integration-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(420px, 1.6fr) auto;
  gap: 14px;
  align-items: center;
  border-top: 4px solid var(--alluvia-turquoise);
  margin-bottom: 16px;
}
.email-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
}
.email-status-grid span {
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 8px 10px;
}
.email-status-grid strong {
  display: block;
  color: var(--alluvia-blue-dark);
  font-size: 12px;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.gmail-sync-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #4ecdc4;
  background: #f7fbfc;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.gmail-sync-indicator strong {
  color: var(--alluvia-blue-dark);
  font-size: 22px;
  line-height: 1;
}
.gmail-sync-indicator span {
  color: #344054;
  font-size: 14px;
}
.gmail-sync-indicator.has-new {
  border-left-color: var(--alluvia-orange);
  background: #fff7ed;
}
.link-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.band {
  background: var(--soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px;
  margin: 14px -14px;
}
.advanced-search {
  margin-top: 12px;
  border: 1px solid var(--line);
  background: #fbfdff;
}
.advanced-search summary {
  padding: 10px 12px;
  cursor: pointer;
  color: var(--alluvia-blue-dark);
  font-weight: 800;
}
.advanced-search-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
  align-items: end;
}
.advanced-search-grid label {
  display: grid;
  gap: 5px;
  color: #455464;
  font-weight: 700;
}
.pagination-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-top: 12px;
  color: #455464;
  font-weight: 700;
}
.pagination-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 10px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: #516171; background: var(--soft); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
tr.case-row:hover { background: #f4fbfd; }
.confidence-cell {
  display: grid;
  gap: 4px;
  min-width: 134px;
}
.confidence-score {
  color: var(--alluvia-blue-dark);
  font-size: 16px;
  font-weight: 800;
}
.low-confidence .confidence-score { color: #b42318; }
.attention-badge {
  display: inline-flex;
  width: max-content;
  border: 1px solid #fdb022;
  background: #fef0c7;
  color: #7a3b00;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.sender-email {
  display: inline-block;
  margin-top: 3px;
  color: #475467;
  font-size: 12px;
  line-height: 1.25;
  word-break: break-word;
}
.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.category-tags span {
  display: inline-flex;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: #344054;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 700;
}
.thread-badge {
  display: inline-flex;
  width: max-content;
  margin-top: 6px;
  border: 1px solid #b9d8f3;
  background: #eef7ff;
  color: var(--alluvia-blue-dark);
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 800;
}
.duplicate-row { background: #fffaf0; }
.duplicate-badge {
  border-color: #fdb022;
  background: #fef0c7;
  color: #7a3b00;
}
.duplicate-panel {
  border-left: 4px solid #fdb022;
  background: #fffaf0;
}
.acting-banner {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 8px;
  border: 1px solid #b9d8f3;
  background: #eef7ff;
  color: var(--alluvia-blue-dark);
  font-size: 12px;
  font-weight: 800;
}
.delegation-manager {
  display: grid;
  gap: 14px;
}
.delegation-list {
  display: grid;
  gap: 10px;
}
.delegation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 4px solid var(--alluvia-blue);
  background: #fff;
  padding: 10px;
}
.recall-result-list {
  border: 1px solid var(--line);
  background: #fbfdff;
  padding: 10px;
}
.recall-table {
  margin-top: 6px;
}
.recall-table th,
.recall-table td {
  font-size: 12px;
}
.thread-recall-results {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #fffaf0;
}
.recall-message-modal {
  display: grid;
  gap: 16px;
  min-width: min(520px, 86vw);
}
.recall-message-modal p {
  margin: 4px 0 2px;
}
.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #344054;
}
.radio-row input {
  min-height: auto;
  width: 16px;
  height: 16px;
  padding: 0;
}
.recall-actions {
  justify-content: flex-end;
  margin-top: 10px;
}
.recall-actions .btn {
  min-width: 96px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.high { color: #fff; background: var(--danger); }
.low { color: #7a3b00; background: #ffecd1; }
.non { color: #344054; background: #eef2f6; }
.breached { color: #fff; background: var(--danger); }
.approaching { color: #7a3b00; background: #fef0c7; border-color: #fdb022; }
.track { color: #05603a; background: #d1fadf; }
.status { color: var(--alluvia-blue-dark); background: #e6f1fb; }
.case-layout { display: grid; grid-template-columns: minmax(340px, .95fr) minmax(520px, 1.35fr); gap: 16px; }
.meta { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; }
.email-body, .preview-box {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #fff;
  white-space: pre-wrap;
  max-height: 270px;
  overflow: auto;
}
.attachment, .source-card, .approval-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 8px;
  background: #fff;
}
.official-source { border-left: 4px solid var(--alluvia-blue); }
.official-link, .official-source a {
  color: var(--alluvia-blue-dark);
  font-weight: 700;
  text-decoration: underline;
}
.analysis-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.analysis-list div { background: var(--soft); padding: 8px; border-radius: 6px; }
.editor-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.editor-tools button {
  min-width: 36px;
  height: 34px;
  border: 1px solid #c7d7e5;
  background: linear-gradient(#fff, #f4f8fc);
  font-weight: 800;
  color: #1f4f7d;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.editor-tools button:hover { border-color: var(--alluvia-blue); background: #eef7ff; }
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.tool-btn.wide-tool { min-width: 54px; padding: 0 10px; }
.tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.strong-mark { font-size: 16px; }
.italic-mark { font-style: italic; }
.underline-mark { text-decoration: underline; }
.tool-lines {
  width: 15px;
  height: 12px;
  display: inline-block;
  background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 5px);
  opacity: .75;
}
.editor {
  min-height: 230px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  line-height: 1.5;
  background: #fff;
}
.ai-menu {
  position: fixed;
  z-index: 12;
  display: none;
  gap: 4px;
  padding: 6px;
  background: #172b3a;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(16, 24, 40, .24);
}
.ai-menu button { border: 0; border-radius: 5px; background: #fff; color: #172b3a; padding: 6px 8px; }
.outlook-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) 390px;
  gap: 16px;
  align-items: start;
}
.mail-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.case-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.case-summary-strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-right: 1px solid var(--line);
}
.case-summary-strip span:last-child { border-right: 0; }
.health {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
}
.health.good { color: #05603a; background: #d1fadf; }
.health.watch { color: #7a3b00; background: #fef0c7; }
.health.risk { color: #fff; background: var(--danger); }
.message-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.message-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}
.message-head h2 { font-size: 20px; }
.message-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: #455464;
}
.message-meta span, .compose-fields label {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: center;
}
.outlook-body {
  min-height: 250px;
  max-height: 430px;
  border: 0;
  border-radius: 0;
  padding: 18px 20px;
  font-size: 15px;
}
.thread-list {
  display: grid;
  gap: 0;
}
.thread-message {
  border-bottom: 1px solid var(--line);
}
.thread-message:last-child { border-bottom: 0; }
.thread-message summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  background: #fff;
}
.thread-message summary strong {
  display: block;
  color: var(--alluvia-blue-dark);
  margin-bottom: 2px;
}
.thread-message summary span:last-child {
  color: var(--text-grey);
  white-space: nowrap;
}
.thread-message.outgoing summary { background: #f8fbff; }
.thread-body {
  min-height: 120px;
  max-height: 310px;
}
.attachment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}
.attachment.compact {
  grid-template-columns: minmax(170px, 1fr) auto auto auto;
  align-items: center;
  min-width: min(100%, 520px);
}
.composer-card { border-top: 4px solid var(--alluvia-blue); }
.sent-compose-card {
  border-top-color: var(--green);
}
.sent-summary {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: #f7fbff;
  border-top: 1px solid var(--line);
  color: var(--text-grey);
}
.sent-summary strong {
  color: var(--alluvia-blue-dark);
}
.quality-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.quality-strip span {
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
}
.quality-strip .pass { color: #05603a; background: #d1fadf; }
.quality-strip .warn { color: #7a3b00; background: #fef0c7; }
.compose-fields {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.compose-fields input {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  min-height: 32px;
}
.outlook-toolbar {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}
.outlook-editor {
  min-height: 420px;
  max-height: 58vh;
  overflow: auto;
  border: 0;
  border-radius: 0;
  padding: 20px;
  font-size: 15px;
}
.composer-actions {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}
.copilot-panel {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 12px;
}
.copilot-card { padding: 0; overflow: hidden; }
.copilot-card summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.copilot-card summary::-webkit-details-marker { display: none; }
.copilot-card summary span { color: var(--text-grey); font-size: 12px; }
.recommendation-card {
  display: none;
}
.recommendation-card ul {
  margin: 8px 0 12px;
  padding-left: 18px;
  color: #516171;
}
.rationale-box p {
  margin: 0;
  padding: 8px 9px;
  border-left: 3px solid var(--alluvia-blue);
  background: #f6f9fb;
  border-radius: 0 6px 6px 0;
}
.rationale-box { display: none; }
.compact-analysis {
  grid-template-columns: 1fr;
  padding: 12px;
}
.analysis-card {
  display: grid;
  grid-template-columns: minmax(130px, .75fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border-left: 3px solid var(--alluvia-blue);
}
.analysis-card strong {
  color: #344054;
}
.analysis-card span {
  color: #24384a;
}
.side-section {
  display: grid;
  gap: 9px;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.side-section label { display: grid; gap: 4px; }
.source-group { background: #fbfdff; }
.grouped-source-card { margin-top: 3px; }
.source-action-btn { width: 100%; }
.source-action-btn.compact-source-btn {
  width: calc(100% - 16px);
  margin: 8px;
}
.official-html-preview iframe {
  width: 100%;
  min-height: 440px;
  border: 1px solid var(--line);
  background: #fff;
}
.status-select {
  width: 100%;
  min-width: 170px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px 8px;
  color: var(--alluvia-blue-dark);
  font-weight: 700;
}
.pdf-viewer {
  height: min(72vh, 680px);
  border: 1px solid var(--line);
  background: var(--soft);
}
.pdf-viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.image-viewer {
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 1px solid var(--line);
  background: var(--soft);
  padding: 12px;
}
.image-viewer img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: #fff;
}
.audit-mini {
  padding: 12px 14px;
  max-height: 310px;
  overflow: auto;
}
.audit-mini p {
  border-left: 3px solid var(--alluvia-turquoise);
  padding-left: 9px;
}
.workflow-panel { border-top: 4px solid var(--alluvia-orange); }
.progress-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-grey);
}
.progress-steps span {
  text-align: center;
  padding: 5px 4px;
  border-radius: 6px;
  background: #eef2f6;
}
.progress-steps span.done {
  color: #fff;
  background: var(--alluvia-blue);
}
.progress-bar {
  height: 8px;
  margin: 10px 0;
  border-radius: 999px;
  background: #e4edf4;
  overflow: hidden;
}
.progress-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--alluvia-orange);
}
.workflow-current { font-size: 13px; }
.alluvia-email-signature {
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 560px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 2px solid var(--alluvia-blue);
  color: #344054;
}
.alluvia-email-signature img {
  width: 180px;
  max-width: 36vw;
}
.demo-control {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.4fr) auto;
  align-items: center;
  gap: 14px;
  border-top: 4px solid var(--alluvia-blue);
}
.demo-control p { margin: 4px 0 0; }
.demo-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 6px;
}
.demo-steps span {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--soft);
  color: #455464;
  font-size: 12px;
  font-weight: 700;
}
.intelligence-card {
  display: grid;
  gap: 4px;
  border-top: 4px solid var(--alluvia-orange);
}
.dashboard-highlight { margin-bottom: 12px; }
.intelligence-card.compact {
  min-height: 88px;
  align-content: center;
  padding: 14px 16px;
}
.intelligence-card strong {
  color: var(--alluvia-blue-dark);
  font-size: 34px;
  line-height: 1;
}
.intelligence-card span { color: #344054; font-weight: 700; }
.kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.kpi { padding: 10px 12px; border-top: 4px solid var(--alluvia-turquoise); min-height: 72px; }
.kpi span { display: block; min-height: 30px; font-size: 13px; line-height: 1.2; }
.kpi strong { display: block; font-size: 24px; color: var(--alluvia-blue-dark); line-height: 1; }
.bars { display: grid; gap: 9px; }
.bar { display: grid; grid-template-columns: 140px 1fr 42px; gap: 8px; align-items: center; }
.bar span:nth-child(2) { height: 12px; background: #e4edf4; border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--alluvia-blue); border-radius: 999px; }
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, .35);
  z-index: 20;
}
.modal.open { display: flex; }
.modal-panel { width: min(980px, 96vw); max-height: 90vh; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 18px 48px rgba(16,24,40,.3); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 16px; overflow: auto; max-height: calc(90vh - 64px); }
.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #172b3a;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  display: none;
  z-index: 30;
}
.toast.show { display: block; }
.admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.setting { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--soft); min-height: 92px; }
.access-panel { border-top: 4px solid var(--alluvia-blue); }
.role-access-list { display: grid; gap: 10px; margin-top: 10px; }
.role-access-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}
.role-access-card p { margin: 6px 0 10px; color: #516171; }
.role-access-card label { display: grid; gap: 5px; }
.approval-settings-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
}
.section-title-row p {
  margin: 5px 0 0;
}
.approval-rule-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.approval-rule-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--alluvia-blue);
  background: #fff;
  padding: 12px;
}
.rule-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.rule-number {
  color: var(--alluvia-blue-dark);
  font-weight: 800;
}
.rule-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rule-config-grid label {
  display: grid;
  gap: 5px;
  color: #455464;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.rule-config-grid input, .rule-config-grid select {
  width: 100%;
  min-width: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 500;
}
.rule-config-grid .rule-wide {
  grid-column: 1 / -1;
}
.approval-path-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.approval-path-fields .rule-field-title,
.role-access-field .rule-field-title {
  grid-column: 1 / -1;
  color: #455464;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.role-access-field {
  display: grid;
  gap: 5px;
}
.multi-role-select {
  position: relative;
}
.multi-role-select summary {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: #172b3a;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.multi-role-select summary::-webkit-details-marker { display: none; }
.multi-role-select summary::after {
  content: "â–¾";
  float: right;
  color: #516171;
}
.multi-role-menu {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
}
.multi-role-menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  color: #24384a;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.multi-role-menu input {
  min-height: auto;
  width: 16px;
}
.config-row input, .config-row select {
  width: 100%;
  min-width: 150px;
}
.compact-btn {
  min-height: 32px;
  padding: 5px 9px;
}
.message-expand {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}
.message-expand summary {
  cursor: pointer;
  color: var(--alluvia-blue-dark);
  font-weight: 800;
}
.message-expand p {
  white-space: pre-wrap;
  margin-bottom: 0;
}
.team-review-card {
  gap: 12px;
}
.team-message-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.team-message-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  max-height: 320px;
  overflow: auto;
}
.team-message-block .draft-preview {
  line-height: 1.5;
}
.decision-modal {
  display: grid;
  gap: 14px;
}
.decision-hero {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #c7d7e5;
  border-radius: 10px;
  background: #f7fbff;
}
.decision-hero strong {
  color: var(--alluvia-blue-dark);
  font-size: 16px;
}
.decision-hero span { color: #516171; }
.decision-modal label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.decision-modal textarea {
  border-radius: 10px;
  resize: vertical;
}
.admin-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.admin-modal-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfdff;
  padding: 14px;
}
.admin-modal-grid label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.admin-modal-grid .form-full {
  grid-column: 1 / -1;
}
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: #455464;
  font-weight: 700;
}
.help-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--alluvia-blue);
  background: #fff;
  color: var(--alluvia-blue-dark);
  font-weight: 900;
}
.ai-star-btn {
  min-height: 28px;
  border: 1px solid var(--alluvia-blue);
  background: #eef7ff;
  color: var(--alluvia-blue-dark);
  padding: 4px 10px;
  font-weight: 800;
}
.prompt-field {
  display: grid;
  gap: 6px;
}
.prompt-guidance {
  border: 1px solid #c7d7e5;
  border-left: 4px solid var(--alluvia-blue);
  background: #f7fbff;
  padding: 12px;
}
.prompt-guidance p {
  margin: 6px 0 12px;
  color: #516171;
}
.library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}
.library-actions .btn {
  margin: 0;
  min-height: 32px;
}
.library-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.library-stat {
  border-top: 4px solid var(--alluvia-turquoise);
}
.library-stat strong {
  display: block;
  color: var(--alluvia-blue-dark);
  font-size: 26px;
}
.library-stat span {
  color: #516171;
}
.library-workbench {
  border-top: 4px solid var(--alluvia-blue);
}
.library-hint {
  margin-top: 10px;
}
.library-list {
  display: grid;
  gap: 10px;
}
.library-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.library-row p {
  margin: 8px 0 0;
  color: #516171;
  white-space: pre-line;
}
.library-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.library-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.library-form label {
  display: grid;
  gap: 5px;
  color: #455464;
  font-weight: 700;
}
.library-form textarea {
  resize: vertical;
  min-height: 140px;
}
.library-form .form-full {
  grid-column: 1 / -1;
}
@media (max-width: 1050px) {
  .grid.two, .grid.three, .case-layout, .outlook-layout { grid-template-columns: 1fr; }
  .demo-control { grid-template-columns: 1fr; }
  .demo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-row, .team-message-grid, .admin-modal-grid, .approval-settings-grid, .email-integration-panel, .advanced-search-grid { grid-template-columns: 1fr; }
  .library-actions { justify-content: flex-start; }
  .copilot-panel { position: static; }
  .kpis, .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (max-width: 720px) {
  .topbar { align-items: flex-start; flex-direction: column; padding: 10px 16px; }
  .brand img { width: min(238px, 84vw); max-width: 84vw; }
  .persona { align-items: flex-start; flex-wrap: wrap; width: 100%; }
  #currentUser { white-space: normal; }
  .shell { padding: 14px; }
  .page-head { flex-direction: column; }
  .panel { max-width: 100%; overflow-x: auto; }
  table { min-width: 760px; }
  .pagination-bar { align-items: flex-start; flex-direction: column; }
  .kpis, .admin-grid, .analysis-list, .email-status-grid { grid-template-columns: 1fr; }
  .rule-config-grid, .approval-path-fields { grid-template-columns: 1fr; }
  .library-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-form { grid-template-columns: 1fr; }
}