:root {
  --ink: #172033;
  --muted: #687184;
  --paper: #f5f4f8;
  --card: rgba(255, 255, 252, .86);
  --line: rgba(30, 45, 78, .13);
  --forest: #293f7c;
  --moss: #7184c7;
  --lime: #8edce5;
  --coral: #d46b55;
  --shadow: 0 22px 70px rgba(31, 52, 44, .10);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; transition: background-color .25s ease; }
body[data-page="overview"] { background-color: #f6f3ee; }
body[data-page="memories"] { background-color: #eef4fb; }
body[data-page="retrieval"] { background-color: #f3effa; }
body[data-page="overview"] .ambient-one { background: radial-gradient(circle, rgba(142,220,229,.30), rgba(142,220,229,0) 70%); }
body[data-page="memories"] .ambient-one { background: radial-gradient(circle, rgba(120,178,231,.28), rgba(120,178,231,0) 70%); }
body[data-page="memories"] .ambient-two { background: radial-gradient(circle, rgba(82,105,177,.13), rgba(82,105,177,0) 70%); }
body[data-page="retrieval"] .ambient-one { background: radial-gradient(circle, rgba(178,151,224,.28), rgba(178,151,224,0) 70%); }
body[data-page="retrieval"] .ambient-two { background: radial-gradient(circle, rgba(103,125,201,.13), rgba(103,125,201,0) 70%); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.ambient-one { width: 540px; height: 540px; right: -190px; top: -210px; background: radial-gradient(circle, rgba(216,242,121,.42), rgba(216,242,121,0) 70%); }
.ambient-two { width: 480px; height: 480px; left: -240px; bottom: -220px; background: radial-gradient(circle, rgba(135,167,92,.18), rgba(135,167,92,0) 70%); }

.topbar { position: relative; max-width: 1400px; margin: 0 auto; padding: 26px 42px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--lime); background: var(--forest); font: 700 21px Georgia, serif; box-shadow: 0 8px 24px rgba(23,63,50,.18); }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: -.02em; }
.brand small { margin-top: 1px; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 20px; }
.top-actions a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 650; }
.top-actions a:hover { color: var(--ink); }
.service-pill { display: flex; align-items: center; gap: 8px; padding: 9px 13px; color: var(--muted); background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #d5a74e; box-shadow: 0 0 0 4px rgba(213,167,78,.13); }
.service-pill.online .status-dot { background: #609a65; box-shadow: 0 0 0 4px rgba(96,154,101,.13); }
.service-pill.offline .status-dot { background: var(--coral); box-shadow: 0 0 0 4px rgba(212,107,85,.13); }
.site-nav { position: absolute; left: 50%; top: 26px; z-index: 10; display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,252,.68); box-shadow: 0 10px 30px rgba(41,63,124,.07); backdrop-filter: blur(16px); transform: translateX(-50%); }
.site-nav::before { display: none; }
.site-nav a { padding: 8px 13px; color: var(--muted); border-radius: 999px; text-decoration: none; font-size: 11px; font-weight: 750; }
.site-nav a::before { display: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: white; background: var(--forest); box-shadow: 0 7px 18px rgba(23,63,50,.14); }

.shell { max-width: 1400px; margin: 0 auto; padding: 36px 42px 80px; }
.hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; padding: 42px 0 38px; }
.eyebrow, .section-index { margin: 0 0 14px; color: #6377bb; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 780px; margin: 0; font: 500 clamp(48px, 6vw, 86px)/.95 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
h1 span { color: var(--forest); font-style: italic; }
.hero-copy { max-width: 680px; margin: 26px 0 0; color: var(--muted); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.link-button { min-width: 205px; text-decoration: none; }
.button.link-button { display: flex; align-items: center; justify-content: center; }
.button.primary.link-button { justify-content: space-between; }
.hero-seal { width: 190px; height: 190px; padding: 28px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(23,63,50,.18); border-radius: 50%; text-align: center; background: rgba(255,255,250,.58); box-shadow: var(--shadow); transform: rotate(3deg); }
.hero-seal .seal-kicker { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.hero-seal strong { margin: 5px 0; color: var(--forest); font: 600 30px Georgia, serif; }
.hero-seal span:last-child { color: var(--muted); font-size: 11px; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,252,.66); overflow: hidden; }
.metric { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric span { color: var(--muted); font-size: 12px; font-weight: 700; }
.metric strong { font: 600 24px Georgia, serif; }
.audit-metric strong { color: var(--forest); font: 800 12px Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); gap: 24px; align-items: start; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 24px; align-items: start; }
.evidence-wide { grid-column: 1 / -1; }
.gate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gate-card { min-height: 170px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(248,248,243,.68); }
.gate-card > span { display: block; margin-bottom: 26px; color: #769052; font: 800 10px ui-monospace, monospace; }
.gate-card strong { font: 600 18px Georgia, serif; }
.gate-card p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.formula { display: flex; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: var(--forest); color: white; }
.formula span { color: #d8e0da; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.formula code { color: var(--lime); font-size: 11px; }
.directory-list { display: grid; gap: 8px; }
.directory-list article { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 12px; }
.directory-list article > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--forest); background: #e7ecf8; border-radius: 10px; font-size: 11px; font-weight: 900; }
.directory-list strong, .directory-list small { display: block; }
.directory-list strong { font-size: 11px; }
.directory-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.text-link { padding-top: 5px; color: var(--forest); font-size: 10px; font-weight: 800; text-decoration: none; }
.dashboard-activity { height: 145px; }

.page-shell { padding-top: 18px; }
.page-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 36px; padding: 38px 0 36px; }
.page-hero h1 { font-size: clamp(42px, 5vw, 68px); }
.page-hero p:last-child { max-width: 640px; margin: 20px 0 0; color: var(--muted); font-size: 15px; }
.page-number { min-width: 178px; padding: 16px; color: var(--forest); border: 1px solid rgba(23,63,50,.2); border-radius: 14px; background: rgba(255,255,252,.62); text-decoration: none; }
.page-number span, .page-number strong { display: block; }
.page-number span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.page-number strong { margin-top: 5px; font-size: 12px; }
.workflow-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 24px; align-items: start; }
.workflow-side, .retrieval-side { display: grid; gap: 24px; }
.next-action { display: block; margin-top: 16px; padding: 13px 15px; color: var(--forest); border: 1px solid rgba(23,63,50,.2); border-radius: 12px; background: rgba(216,242,121,.16); font-size: 11px; font-weight: 800; text-align: center; text-decoration: none; }
.hidden { display: none !important; }

.retrieval-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr); gap: 24px; align-items: start; }
.retrieval-controls { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(280px, 1.3fr); gap: 14px; align-items: end; }
.retrieval-search { min-height: 48px; }
.selected-caller { display: grid; grid-template-columns: 46px 1fr auto; gap: 13px; align-items: center; margin: 16px 0 20px; padding: 15px; border: 1px solid rgba(23,63,50,.22); border-radius: 15px; background: rgba(216,242,121,.13); }
.selected-caller > span { width: 46px; height: 46px; display: grid; place-items: center; color: white; background: var(--forest); border-radius: 13px; font-weight: 900; }
.selected-caller strong, .selected-caller small { display: block; }
.selected-caller strong { font-size: 13px; }
.selected-caller small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.selected-caller dl { display: flex; gap: 22px; margin: 0; }
.selected-caller dl div { min-width: 86px; }
.selected-caller dt { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.selected-caller dd { margin: 3px 0 0; font-size: 10px; font-weight: 800; }
.selected-caller.outsider { border-color: rgba(212,107,85,.3); background: rgba(212,107,85,.08); }
.selected-caller.outsider > span { background: var(--coral); }
.retrieval-results { min-height: 330px; max-height: 520px; }
.policy-list { display: grid; gap: 4px; }
.policy-list article { display: grid; grid-template-columns: 28px 1fr; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.policy-list article:last-child { border-bottom: 0; }
.policy-list article > span { width: 26px; height: 26px; display: grid; place-items: center; color: var(--forest); background: #e7ecf8; border-radius: 50%; font-size: 9px; font-weight: 900; }
.policy-list strong { font-size: 11px; }
.policy-list p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.policy-list code { color: var(--forest); font-size: 9px; }
.side-stack { display: grid; gap: 24px; }
.panel { position: relative; padding: 28px; border: 1px solid rgba(20,34,29,.1); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.panel-heading.compact { margin-bottom: 18px; }
.panel-heading h2 { margin: 0; font: 500 27px/1.1 Georgia, serif; letter-spacing: -.02em; }
.text-button { padding: 6px 0; color: var(--muted); background: transparent; border: 0; font-size: 12px; font-weight: 700; }
.text-button:hover { color: var(--ink); }

form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
input, textarea, select { width: 100%; padding: 13px 14px; color: var(--ink); background: rgba(248,248,243,.8); border: 1px solid var(--line); border-radius: 12px; outline: none; text-transform: none; letter-spacing: 0; transition: border-color .18s, box-shadow .18s, background .18s; }
textarea { resize: vertical; min-height: 110px; }
input:focus, textarea:focus, select:focus { border-color: rgba(23,63,50,.45); background: #fff; box-shadow: 0 0 0 4px rgba(135,167,92,.12); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-help { margin: -7px 0 0; color: var(--muted); font-size: 10px; }
.access-preview { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(235,239,249,.72); }
.access-preview strong, .access-preview span { display: block; }
.access-preview strong { margin-top: 2px; font-size: 12px; }
.preview-kicker { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.preview-callers { display: flex; flex-wrap: wrap; gap: 6px; }
.caller-access { padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.caller-access.allowed { color: #293f7c; background: rgba(113,132,199,.20); }
.caller-access.blocked { color: #7d8883; background: rgba(20,34,29,.07); }
.primary-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 20px 0 24px; }
.button { min-height: 48px; padding: 0 18px; border-radius: 13px; font-size: 13px; font-weight: 800; }
.button.primary { display: flex; align-items: center; justify-content: space-between; color: white; background: var(--forest); border: 1px solid var(--forest); box-shadow: 0 9px 24px rgba(23,63,50,.16); }
.button.primary b { color: var(--lime); font-size: 20px; }
.button.primary:hover { background: #0f3328; transform: translateY(-1px); }
.button.secondary { color: var(--forest); background: transparent; border: 1px solid rgba(23,63,50,.24); }
.button:disabled, button:disabled { cursor: not-allowed; opacity: .55; transform: none !important; }

.journey { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.journey li { position: relative; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.step-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: #e9edf7; font-size: 11px; font-weight: 800; }
.journey strong, .journey small { display: block; }
.journey strong { font-size: 13px; }
.journey small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.journey em { color: #929d98; font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.journey li.running .step-number { color: var(--forest); background: var(--lime); animation: pulse 1.2s infinite; }
.journey li.passed .step-number { color: white; background: var(--forest); }
.journey li.passed em { color: #4e815b; }
.journey li.failed .step-number { color: white; background: var(--coral); }
.journey li.failed em { color: var(--coral); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(216,242,121,0); } 0%,100% { box-shadow: 0 0 0 0 rgba(216,242,121,.45); } }

.decision-bar { margin-top: 20px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 13px; background: #e9edf7; }
.decision-bar > span { overflow: hidden; color: var(--muted); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.decision-bar div { display: flex; gap: 7px; }
.decision-bar button { padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line); background: white; font-size: 11px; font-weight: 800; }
.decision-bar #approve-button { color: white; background: var(--forest); }
.decision-bar #reject-button { color: var(--coral); }

.search-box { grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 6px 6px 13px; border: 1px solid var(--line); border-radius: 13px; background: #f8f8f3; }
.search-box span { color: var(--muted); font-size: 21px; }
.search-box input { padding: 7px 4px; border: 0; background: transparent; box-shadow: none; }
.search-box button { padding: 9px 13px; color: white; background: var(--forest); border: 0; border-radius: 9px; font-size: 11px; font-weight: 800; }
.caller-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 8px; }
.caller-heading span { font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.caller-heading small { color: var(--muted); font-size: 9px; text-align: right; }
.persona-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0 18px; }
.persona { display: grid; grid-template-columns: 32px 1fr; column-gap: 9px; padding: 11px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: transparent; }
.persona > span { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; color: var(--forest); background: #e8eddf; border-radius: 10px; font-size: 11px; font-weight: 900; }
.persona b { font-size: 11px; }
.persona small { color: var(--muted); font-size: 9px; }
.persona.active { border-color: rgba(23,63,50,.36); background: rgba(216,242,121,.19); box-shadow: inset 0 0 0 1px rgba(23,63,50,.06); }
.persona.outsider > span { color: #8d4a3d; background: #f4e6e1; }
.results-header { display: flex; justify-content: space-between; padding: 12px 0; color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.results { min-height: 174px; max-height: 330px; overflow-y: auto; }
.empty-state { height: 174px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.empty-state span { font-size: 28px; color: #9aa99f; }
.empty-state p { max-width: 270px; margin: 0; font-size: 12px; }
.result-card { padding: 14px 0; border-top: 1px solid var(--line); }
.result-card:first-child { border-top: 0; }
.result-card .result-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.result-card h3 { margin: 6px 0 5px; font: 600 17px Georgia, serif; }
.result-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

.activity-log { height: 180px; overflow-y: auto; padding-right: 4px; }
.activity-item { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.activity-item i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #7d9e6d; }
.activity-item.error i { background: var(--coral); }
.activity-item b, .activity-item small { display: block; }
.activity-item b { font-size: 11px; }
.activity-item small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.activity-item time { color: #97a19d; font-size: 9px; }
.integrity-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.integrity-actions button { padding: 10px; color: var(--forest); border: 1px solid rgba(23,63,50,.18); border-radius: 10px; background: transparent; font-size: 10px; font-weight: 800; }

/* Operational dashboard */
.dashboard-body { min-height: 100vh; background: #f7f8fb; }
.dashboard-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 15; width: 238px; display: flex; flex-direction: column; padding: 28px 18px; border-right: 1px solid #e5e8ef; background: #fff; }
.dashboard-brand { margin: 0 10px 36px; }
.dashboard-nav { display: grid; gap: 5px; }
.dashboard-nav a { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; min-height: 43px; padding: 0 12px; color: #596273; border-radius: 10px; text-decoration: none; font-size: 13px; font-weight: 700; }
.dashboard-nav a:hover { color: var(--forest); background: #f4f6fa; }
.dashboard-nav a.active { color: #fff; background: var(--forest); }
.dashboard-nav a > span { font-size: 17px; }
.dashboard-nav a b { min-width: 22px; padding: 2px 6px; border-radius: 999px; color: #fff; background: #e06a4f; font-size: 9px; text-align: center; }
.advanced-nav { margin-top: 28px; padding-top: 22px; border-top: 1px solid #edf0f4; }
.advanced-nav p { margin: 0 12px 9px; color: #9aa1ad; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-health { width: 100%; justify-content: center; margin-top: auto; }
.dashboard-main { min-width: 0; min-height: 100vh; margin-left: 238px; padding: 34px clamp(28px, 4vw, 64px) 64px; }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1240px; margin: 0 auto 30px; }
.dashboard-header h1 { margin: 0; font: 700 clamp(25px, 3vw, 34px)/1.2 Inter, sans-serif; letter-spacing: -.035em; }
.dashboard-header p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--forest); border-radius: 50%; font-size: 10px; font-weight: 850; text-decoration: none; }
.mobile-menu { display: none; padding: 8px; border: 0; background: transparent; font-size: 21px; }
.dashboard-stats { max-width: 1240px; margin: 0 auto 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.summary-card { display: grid; grid-template-columns: 44px 1fr; gap: 14px; min-height: 136px; padding: 23px; border: 1px solid #e4e7ed; border-radius: 16px; background: #fff; box-shadow: 0 10px 35px rgba(31,45,75,.05); }
.summary-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 19px; font-weight: 800; }
.summary-card.warning .summary-icon { color: #a75635; background: #fff0e8; }
.summary-card.progress .summary-icon { color: #4260a0; background: #eaf0ff; }
.summary-card.ready .summary-icon { color: #387a57; background: #e5f6ec; }
.summary-card p { margin: 1px 0 7px; color: #667085; font-size: 12px; font-weight: 700; }
.summary-card strong { display: block; font-size: 28px; line-height: 1; }
.summary-card small { display: block; margin-top: 8px; color: #98a0ad; font-size: 10px; }
.dashboard-section { max-width: 1240px; margin: 0 auto 28px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: 16px; letter-spacing: -.015em; }
.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.section-heading a { color: var(--forest); font-size: 11px; font-weight: 800; text-decoration: none; }
.workflow-list { display: grid; gap: 12px; }
.workflow-card { min-width: 0; padding: 22px; border: 1px solid #e4e7ed; border-radius: 16px; background: #fff; box-shadow: 0 10px 35px rgba(31,45,75,.04); }
.workflow-top { display: flex; justify-content: space-between; gap: 18px; }
.workflow-top > div { min-width: 0; }
.workflow-top h3 { margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.workflow-top p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.state-badge { align-self: start; padding: 5px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: capitalize; }
.state-badge.pending { color: #9b5634; background: #fff0e8; }
.state-badge.approved { color: #34704e; background: #e5f6ec; }
.state-badge.rejected { color: #a54c4c; background: #fdeaea; }
.workflow-steps { margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; }
.workflow-steps li { position: relative; padding-top: 27px; color: #9aa1ad; font-size: 9px; font-weight: 750; text-align: center; }
.workflow-steps li::before { content: ''; position: absolute; z-index: 1; top: 4px; left: 50%; width: 17px; height: 17px; border: 3px solid #fff; border-radius: 50%; background: #dfe3ea; box-shadow: 0 0 0 1px #dfe3ea; transform: translateX(-50%); }
.workflow-steps li::after { content: ''; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: #dfe3ea; }
.workflow-steps li:first-child::after { display: none; }
.workflow-steps li.done { color: #315d49; }
.workflow-steps li.done::before, .workflow-steps li.done::after { background: #4a8968; }
.workflow-steps li.current { color: var(--forest); }
.workflow-steps li.current::before { background: #fff; box-shadow: 0 0 0 2px var(--forest); }
.dashboard-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 22px; }
.dashboard-grid .dashboard-section { width: 100%; }
.review-card, .evidence-section, .activity-section { padding: 22px; border: 1px solid #e4e7ed; border-radius: 16px; background: #fff; box-shadow: 0 10px 35px rgba(31,45,75,.04); }
.review-card h3 { margin: 0; font-size: 15px; }
.review-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 18px; }
.review-meta span { max-width: 100%; padding: 5px 8px; overflow-wrap: anywhere; color: #667085; border-radius: 7px; background: #f2f4f7; font-size: 9px; font-weight: 750; }
.review-card p { margin: 0 0 18px; color: var(--muted); font-size: 11px; }
.review-card .button { width: 100%; text-decoration: none; }
.empty-card { padding: 28px; border: 1px dashed #d8dde6; border-radius: 14px; color: var(--muted); background: #fff; font-size: 11px; text-align: center; }
.evidence-list { display: grid; gap: 0; }
.evidence-item { padding: 13px 0; border-top: 1px solid #edf0f4; }
.evidence-item:first-child { padding-top: 0; border-top: 0; }
.evidence-item strong, .evidence-item span { display: block; }
.evidence-item strong { font-size: 11px; }
.evidence-item span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.loading-state { padding: 24px; color: var(--muted); border: 1px dashed #d8dde6; border-radius: 14px; background: #fff; font-size: 11px; text-align: center; }
.activity-section { max-width: 1240px; }
.audit-result { display: grid; grid-template-columns: 10px auto 1fr; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 11px; background: #f5f7fa; }
.audit-result strong { font-size: 11px; }
.audit-result > span:last-child { color: var(--muted); font-size: 10px; }
.activity-section .dashboard-activity { height: auto; max-height: 140px; margin-top: 8px; }
.bottom-nav { display: none; }

/* Shared request and retrieval workspaces */
body.workspace-page { background: #f7f8fb; }
.workspace-main { padding-top: 30px; }
.workspace-header { max-width: 1240px; margin: 0 auto 25px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.workspace-header .mobile-menu { grid-row: 1; align-self: start; }
.workspace-heading > a, .workspace-heading > span { display: inline; color: #8b93a1; font-size: 10px; font-weight: 750; text-decoration: none; }
.workspace-heading > span { margin-left: 5px; }
.workspace-heading h1 { max-width: none; margin: 14px 0 0; font: 700 clamp(27px, 3.5vw, 40px)/1.15 Inter, sans-serif; letter-spacing: -.04em; }
.workspace-heading p { max-width: 680px; margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.workspace-switch { min-height: 40px; display: grid; place-items: center; padding: 0 15px; text-decoration: none; white-space: nowrap; }
.workspace-layout { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 22px; align-items: start; }
.workspace-card { min-width: 0; padding: 24px; border: 1px solid #e4e7ed; border-radius: 16px; background: #fff; box-shadow: 0 10px 35px rgba(31,45,75,.04); }
.workspace-side { min-width: 0; display: grid; gap: 18px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.card-heading.compact { margin-bottom: 16px; }
.card-heading h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.02em; }
.card-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.section-kicker { color: #6377bb; font-size: 8px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.workspace-card form { gap: 17px; }
.workspace-card input, .workspace-card textarea, .workspace-card select { background: #f8f9fb; }
.workspace-card .access-preview { background: #f4f6fb; }
.workspace-card .primary-actions { margin-bottom: 16px; }
.workspace-card .decision-bar { background: #f2f4f8; }
.workspace-card .journey { border-top-color: #edf0f4; }
.activity-panel .activity-log { min-height: 120px; }
.retrieval-workspace { grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); }
.retrieval-workspace .retrieval-results { min-height: 370px; }
.retrieval-workspace .selected-caller { background: #f4f6fb; }
.queue-card { max-width: 1240px; margin: 0 auto; }
.queue-card h2 strong { display: inline-grid; min-width: 25px; height: 25px; margin-left: 6px; place-items: center; color: #fff; background: #e06a4f; border-radius: 999px; font-size: 10px; vertical-align: 3px; }
.review-page-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.review-page-list .review-card { border: 1px solid #e5e8ee; box-shadow: none; }
.evidence-workspace { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr); gap: 22px; align-items: start; }
.evidence-page-list { max-height: 650px; overflow-y: auto; padding-right: 5px; }
.evidence-page-list .evidence-item { padding: 16px 0; }
.audit-panel { position: sticky; top: 24px; }
.audit-panel .audit-result { grid-template-columns: 10px 1fr; }
.audit-panel .audit-result > span:last-child { grid-column: 2; }
.audit-button { width: 100%; margin: 14px 0 8px; }
.audit-panel .activity-log { height: auto; max-height: 220px; }

.toast { position: fixed; right: 26px; bottom: 26px; z-index: 20; max-width: min(380px, calc(100vw - 36px)); padding: 13px 16px; color: white; background: var(--forest); border-radius: 12px; box-shadow: 0 15px 44px rgba(20,34,29,.24); font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(14px); pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #9e4f40; }

@media (max-width: 980px) {
  .dashboard-sidebar { width: 210px; }
  .dashboard-main { margin-left: 210px; padding-left: 24px; padding-right: 24px; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .summary-card { min-height: 0; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .workspace-layout, .retrieval-workspace { grid-template-columns: 1fr; }
  .evidence-workspace { grid-template-columns: 1fr; }
  .workspace-side { grid-template-columns: 1fr 1fr; align-items: start; }
  .workspace-grid { grid-template-columns: 1fr; }
  .overview-grid, .workflow-layout, .retrieval-layout { grid-template-columns: 1fr; }
  .evidence-wide { grid-column: auto; }
  .side-stack { grid-template-columns: 1fr 1fr; align-items: start; }
  .hero-seal { width: 160px; height: 160px; }
  .site-nav { position: static; order: 3; width: 100%; flex-direction: row; justify-content: center; margin: 0; padding: 5px; border-radius: 999px; box-shadow: none; transform: none; }
  .site-nav::before, .site-nav a::before { display: none; }
  .site-nav a { padding: 8px 13px; border-radius: 999px; }
  .topbar { flex-wrap: wrap; gap: 16px; }
  .shell { margin: 0 auto; }
}
@media (max-width: 720px) {
  .dashboard-sidebar { visibility: hidden; width: min(82vw, 280px); transform: translateX(-100%); transition: transform .2s, visibility .2s; }
  .dashboard-body.nav-open .dashboard-sidebar { visibility: visible; transform: translateX(0); }
  .dashboard-main { margin-left: 0; padding: 24px 18px 88px; }
  .dashboard-header { align-items: flex-start; }
  .dashboard-header > div { flex: 1; }
  .mobile-menu { display: block; }
  .dashboard-stats { gap: 10px; }
  .workspace-main { padding-top: 22px; }
  .workspace-header { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .workspace-header .mobile-menu { grid-column: 1; }
  .workspace-heading { grid-column: 2; }
  .workspace-switch { grid-column: 1 / -1; width: 100%; }
  .workspace-side { grid-template-columns: 1fr; }
  .workspace-card { padding: 20px; }
  .card-heading { margin-bottom: 18px; }
  .workspace-card .primary-actions { gap: 8px; }
  .decision-bar { align-items: flex-start; flex-direction: column; }
  .decision-bar div { width: 100%; }
  .decision-bar button { flex: 1; }
  .summary-card { grid-template-columns: 40px 1fr; padding: 18px; }
  .workflow-steps li { font-size: 8px; }
  .section-heading { align-items: flex-start; }
  .audit-result { grid-template-columns: 10px 1fr; }
  .audit-result > span:last-child { grid-column: 2; }
  .review-page-list { grid-template-columns: 1fr; }
  .audit-panel { position: static; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 14; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 6px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #e4e7ed; background: rgba(255,255,255,.96); }
  .bottom-nav a { display: grid; justify-items: center; gap: 2px; color: #7b8492; font-size: 8px; font-weight: 750; text-decoration: none; }
  .bottom-nav a span { font-size: 17px; }
  .bottom-nav a.active { color: var(--forest); }
  .topbar, .shell { padding-left: 20px; padding-right: 20px; }
  .top-actions a { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 26px; }
  .page-hero { grid-template-columns: 1fr; padding-top: 20px; }
  .hero-seal { display: none; }
  h1 { font-size: clamp(46px, 15vw, 70px); }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .side-stack { grid-template-columns: 1fr; }
  .field-row, .persona-row, .gate-grid, .retrieval-controls { grid-template-columns: 1fr; }
  .primary-actions { grid-template-columns: 1fr; }
  .journey li { grid-template-columns: 36px 1fr; }
  .journey em { grid-column: 2; }
  .panel { padding: 22px; border-radius: 18px; }
  .site-nav { overflow-x: auto; justify-content: flex-start; }
  .site-nav a { white-space: nowrap; }
  .selected-caller { grid-template-columns: 42px 1fr; }
  .selected-caller dl { grid-column: 1 / -1; justify-content: space-between; }
  .formula { flex-direction: column; }
}

/* Home design system applied to the request and retrieval workspaces. */
.reference-dashboard.workspace-page { background: #f7f8fa; }
.reference-dashboard.workspace-page .dashboard-sidebar { width: 250px; padding: 25px 14px 22px; border-right-color: var(--dash-border); }
.reference-dashboard.workspace-page .dashboard-brand { gap: 11px; margin: 0; padding: 6px 10px 26px; }
.reference-dashboard.workspace-page .brand-mark { width: 34px; height: 34px; color: #fff; background: var(--dash-blue); border-radius: 10px; font: 700 17px Inter, sans-serif; box-shadow: 0 5px 14px rgba(49,94,251,.24); }
.reference-dashboard.workspace-page .dashboard-brand strong { font-size: 14px; letter-spacing: 0; }
.reference-dashboard.workspace-page .dashboard-brand small { margin-top: 1px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.reference-dashboard.workspace-page .dashboard-nav { gap: 3px; }
.reference-dashboard.workspace-page .dashboard-nav a { display: flex; min-height: 0; gap: 11px; padding: 10px 11px; color: #475467; border-radius: 10px; font-size: 14px; font-weight: 500; }
.reference-dashboard.workspace-page .dashboard-nav a:hover { color: var(--dash-blue); background: #f5f7fb; }
.reference-dashboard.workspace-page .dashboard-nav a.active { color: var(--dash-blue); background: #eef3ff; font-weight: 650; box-shadow: none; }
.reference-dashboard.workspace-page .dashboard-nav a > span { width: 17px; font-size: 13px; text-align: center; }
.reference-dashboard.workspace-page .advanced-nav { margin-top: 26px; padding-top: 19px; border-top-color: var(--dash-border); }
.reference-dashboard.workspace-page .advanced-nav p { margin: 0 11px 8px; color: #667085; font-size: 12px; letter-spacing: .07em; }
.reference-dashboard.workspace-page .dashboard-health { min-height: 40px; color: #667085; border-color: var(--dash-border); border-radius: 10px; background: #fff; }
.reference-dashboard.workspace-page .workspace-main { position: relative; min-height: 100vh; margin-left: 250px; padding: 35px 38px 56px; overflow: hidden; }
.reference-dashboard.workspace-page .dashboard-ambient { inset: 0 0 0 250px; opacity: .55; }
.reference-dashboard.workspace-page .workspace-header, .reference-dashboard.workspace-page .workspace-layout { position: relative; z-index: 1; max-width: 1450px; }
.reference-dashboard.workspace-page .workspace-header { margin: 0 auto 28px; align-items: start; }
.reference-dashboard.workspace-page .workspace-heading > a, .reference-dashboard.workspace-page .workspace-heading > span { color: #667085; font-size: 12px; font-weight: 600; }
.reference-dashboard.workspace-page .workspace-heading h1 { margin: 12px 0 0; color: #172033; font: 700 30px/1.15 Inter, sans-serif; letter-spacing: -.8px; }
.reference-dashboard.workspace-page .workspace-heading p { margin-top: 8px; color: #667085; font-size: 14px; }
.reference-dashboard.workspace-page .workspace-switch { min-height: 48px; padding: 0 15px; color: #172033; border-color: var(--dash-border); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; }
.reference-dashboard.workspace-page .workspace-switch:hover { color: var(--dash-blue); background: #f5f7fb; }
.reference-dashboard.workspace-page .workspace-layout { gap: 18px; }
.reference-dashboard.workspace-page .workspace-card { padding: 20px; border-color: var(--dash-border); border-radius: 16px; background: rgba(255,255,255,.95); box-shadow: 0 8px 28px rgba(23,32,51,.06); }
.reference-dashboard.workspace-page .workspace-side { gap: 18px; }
.reference-dashboard.workspace-page .card-heading { margin-bottom: 20px; }
.reference-dashboard.workspace-page .card-heading h2 { margin-top: 4px; color: #172033; font-size: 17px; }
.reference-dashboard.workspace-page .card-heading p, .reference-dashboard.workspace-page .field-help { color: #667085; font-size: 12px; }
.reference-dashboard.workspace-page .section-kicker, .reference-dashboard.workspace-page .preview-kicker { color: var(--dash-blue); font-size: 11px; }
.reference-dashboard.workspace-page label { color: #475467; font-size: 12px; letter-spacing: 0; text-transform: none; }
.reference-dashboard.workspace-page .workspace-card input, .reference-dashboard.workspace-page .workspace-card textarea, .reference-dashboard.workspace-page .workspace-card select { min-height: 46px; padding: 12px 13px; color: #172033; border-color: var(--dash-border); border-radius: 10px; background: #fff; font-size: 14px; }
.reference-dashboard.workspace-page .workspace-card textarea { min-height: 128px; }
.reference-dashboard.workspace-page .workspace-card input:focus, .reference-dashboard.workspace-page .workspace-card textarea:focus, .reference-dashboard.workspace-page .workspace-card select:focus { border-color: var(--dash-blue); box-shadow: 0 0 0 4px rgba(49,94,251,.12); }
.reference-dashboard.workspace-page .workspace-card .access-preview, .reference-dashboard.workspace-page .workspace-card .decision-bar, .reference-dashboard.workspace-page .retrieval-workspace .selected-caller { border: 1px solid var(--dash-border); border-radius: 11px; background: #f8faff; }
.reference-dashboard.workspace-page .caller-access.allowed { color: #16875a; background: #eaf8f1; }
.reference-dashboard.workspace-page .caller-access.blocked { color: #667085; background: #f2f4f7; }
.reference-dashboard.workspace-page .button { min-height: 46px; border-radius: 10px; font-size: 14px; }
.reference-dashboard.workspace-page .button.primary, .reference-dashboard.workspace-page .search-box button, .reference-dashboard.workspace-page .decision-bar #approve-button { background: var(--dash-blue); border-color: var(--dash-blue); box-shadow: 0 8px 18px rgba(49,94,251,.18); }
.reference-dashboard.workspace-page .button.primary:hover { background: #244cdb; }
.reference-dashboard.workspace-page .button.primary b { color: #fff; }
.reference-dashboard.workspace-page .button.secondary { color: #172033; border-color: var(--dash-border); background: #fff; }
.reference-dashboard.workspace-page .text-button, .reference-dashboard.workspace-page .next-action { color: var(--dash-blue); }
.reference-dashboard.workspace-page .next-action { border-color: #cdd9ff; border-radius: 10px; background: #f4f7ff; font-size: 13px; }
.reference-dashboard.workspace-page .journey { border-top-color: var(--dash-border); }
.reference-dashboard.workspace-page .journey li { border-bottom-color: var(--dash-border); }
.reference-dashboard.workspace-page .step-number, .reference-dashboard.workspace-page .policy-list article > span { color: var(--dash-blue); background: #eef3ff; }
.reference-dashboard.workspace-page .journey li.running .step-number { color: var(--dash-blue); background: #eef3ff; }
.reference-dashboard.workspace-page .journey li.passed .step-number { color: var(--dash-green); background: #eaf8f1; }
.reference-dashboard.workspace-page .journey strong, .reference-dashboard.workspace-page .policy-list strong { color: #172033; font-size: 13px; }
.reference-dashboard.workspace-page .journey small, .reference-dashboard.workspace-page .policy-list p { color: #667085; font-size: 12px; }
.reference-dashboard.workspace-page .journey em { color: #667085; font-size: 10px; }
.reference-dashboard.workspace-page .search-box { border-color: var(--dash-border); border-radius: 10px; background: #fff; }
.reference-dashboard.workspace-page .search-box button { border-radius: 8px; }
.reference-dashboard.workspace-page .selected-caller > span { color: var(--dash-blue); background: #e8edff; }
.reference-dashboard.workspace-page .selected-caller strong { color: #172033; font-size: 14px; }
.reference-dashboard.workspace-page .selected-caller small, .reference-dashboard.workspace-page .selected-caller dt, .reference-dashboard.workspace-page .results-header { color: #667085; }
.reference-dashboard.workspace-page .selected-caller dd { color: #172033; }
.reference-dashboard.workspace-page .results-header, .reference-dashboard.workspace-page .result-card, .reference-dashboard.workspace-page .policy-list article, .reference-dashboard.workspace-page .activity-item { border-color: var(--dash-border); }
.reference-dashboard.workspace-page .result-card h3 { color: #172033; font: 650 17px/1.3 Inter, sans-serif; }
.reference-dashboard.workspace-page .result-card p, .reference-dashboard.workspace-page .activity-item small { color: #667085; font-size: 12px; }
.reference-dashboard.workspace-page .activity-item b { color: #172033; font-size: 13px; }

@media (max-width: 900px) {
  .reference-dashboard.workspace-page .dashboard-sidebar { width: 220px; }
  .reference-dashboard.workspace-page .workspace-main { margin-left: 220px; padding: 26px; }
  .reference-dashboard.workspace-page .dashboard-ambient { inset: 0 0 0 220px; }
}

@media (max-width: 720px) {
  .reference-dashboard.workspace-page .dashboard-sidebar { visibility: hidden; width: min(82vw, 280px); transform: translateX(-100%); }
  .reference-dashboard.workspace-page.nav-open .dashboard-sidebar { visibility: visible; transform: translateX(0); }
  .reference-dashboard.workspace-page .workspace-main { margin-left: 0; padding: 20px 16px 100px; }
  .reference-dashboard.workspace-page .dashboard-ambient { inset: 0; }
  .reference-dashboard.workspace-page .workspace-header { gap: 14px; }
  .reference-dashboard.workspace-page .workspace-heading h1 { font-size: 27px; }
  .reference-dashboard.workspace-page .workspace-heading p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Reference-matched operational dashboard */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 30; padding: 8px 18px; color: #fff; background: #315efb; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 8px; }
body.reference-dashboard { --dash-blue: #315efb; --dash-green: #16875a; --dash-warn: #c98200; --dash-border: #e4e7ec; color: #172033; background: #f7f8fa; }
.reference-dashboard .dashboard-sidebar { width: 250px; padding: 25px 14px 22px; overflow-y: auto; border-right-color: var(--dash-border); }
.reference-dashboard .dashboard-brand { gap: 11px; margin: 0; padding: 6px 10px 26px; }
.reference-dashboard .brand-mark { width: 34px; height: 34px; color: #fff; background: var(--dash-blue); border-radius: 10px; font: 700 17px Inter, sans-serif; box-shadow: 0 5px 14px rgba(49,94,251,.24); }
.reference-dashboard .dashboard-brand strong { font-size: 14px; letter-spacing: 0; }
.reference-dashboard .dashboard-brand small { margin-top: 1px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.dashboard-nav-label { margin: 0; padding: 14px 11px 7px; color: #667085; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.reference-dashboard .dashboard-nav { gap: 3px; }
.reference-dashboard .dashboard-nav a { display: flex; min-height: 0; gap: 11px; padding: 10px 11px; color: #475467; border-radius: 10px; font-size: 14px; font-weight: 500; }
.reference-dashboard .dashboard-nav a:hover { color: var(--dash-blue); background: #f5f7fb; }
.reference-dashboard .dashboard-nav a.active { color: var(--dash-blue); background: #eef3ff; font-weight: 650; box-shadow: none; }
.reference-dashboard .dashboard-nav a > span { width: 17px; font-size: 13px; text-align: center; }
.reference-dashboard .dashboard-nav a b { min-width: 21px; height: 21px; margin-left: auto; display: grid; place-items: center; padding: 0 6px; color: var(--dash-warn); background: #fff4d9; font-size: 11px; }
.advanced-drawer { margin-top: 6px; }
.advanced-drawer summary { display: flex; align-items: center; gap: 11px; padding: 10px 11px; color: #667085; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.advanced-drawer summary::-webkit-details-marker { display: none; }
.advanced-drawer summary::after { content: '⌄'; margin-left: auto; }
.advanced-drawer[open] summary::after { transform: rotate(180deg); }
.advanced-drawer summary:hover { background: #f5f7fb; }
.advanced-drawer .dashboard-nav { margin-top: 3px; }
.reference-dashboard .dashboard-main { position: relative; min-height: 100vh; margin-left: 250px; padding: 35px 38px 56px; overflow: hidden; }
.dashboard-content { position: relative; z-index: 1; max-width: 1450px; margin: auto; }
.dashboard-ambient { position: fixed; inset: 0 0 0 250px; pointer-events: none; opacity: .55; }
.ambient-glow { position: absolute; top: -180px; right: 4%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(49,94,251,.08), transparent 65%); animation: dashboard-drift 14s ease-in-out infinite alternate; }
.ambient-flow { position: absolute; top: 90px; right: 4%; width: 70%; height: 320px; }
.ambient-flow::before, .ambient-flow::after { content: ''; position: absolute; top: 52%; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(49,94,251,.13), transparent); transform: rotate(-5deg); }
.ambient-flow::after { top: 67%; transform: rotate(7deg); }
.ambient-flow i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--dash-blue); box-shadow: 0 0 0 5px rgba(49,94,251,.05); animation: dashboard-travel 8s linear infinite; }
.ambient-flow i:nth-child(1) { left: 5%; top: 65%; }
.ambient-flow i:nth-child(2) { left: 31%; top: 34%; animation-delay: 2s; }
.ambient-flow i:nth-child(3) { left: 57%; top: 61%; animation-delay: 4s; }
.ambient-flow i:nth-child(4) { left: 82%; top: 28%; animation-delay: 6s; }
.reference-dashboard .dashboard-header { align-items: flex-start; max-width: none; margin: 0 0 30px; }
.reference-dashboard .dashboard-header > div { min-width: 0; }
.reference-dashboard .dashboard-header h1 { margin: 0; font: 700 30px/1.15 Inter, sans-serif; letter-spacing: -.8px; }
.reference-dashboard .dashboard-header p { margin: 8px 0 0; color: #667085; font-size: 14px; }
.dashboard-eyebrow { display: block; margin-bottom: 5px; color: var(--dash-blue); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dashboard-top-actions { display: flex; gap: 10px; }
.dashboard-top-actions > a, .dashboard-user { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 9px 13px; color: #172033; border: 1px solid var(--dash-border); border-radius: 10px; background: #fff; font-size: 14px; text-decoration: none; }
.dashboard-user { min-width: 0; max-width: min(260px, 30vw); flex: 0 1 auto; overflow: hidden; cursor: pointer; }
.dashboard-top-actions > a:hover { background: #f5f7fb; }
.dashboard-user > span:first-child { width: 28px; height: 28px; display: grid; flex: 0 0 28px; place-items: center; color: var(--dash-blue); background: #e8edff; border-radius: 50%; font-size: 11px; font-weight: 750; }
.dashboard-user > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-dashboard .dashboard-stats { max-width: none; margin: 0 0 22px; gap: 14px; }
.reference-dashboard .summary-card { position: relative; display: block; min-height: 132px; padding: 20px; border-color: var(--dash-border); border-radius: 16px; box-shadow: 0 8px 28px rgba(23,32,51,.06); }
.reference-dashboard .summary-icon { position: absolute; top: 17px; right: 17px; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
.reference-dashboard .summary-card.warning .summary-icon { color: var(--dash-warn); background: #fff5dc; }
.reference-dashboard .summary-card.progress .summary-icon { color: var(--dash-blue); background: #edf2ff; }
.reference-dashboard .summary-card.ready .summary-icon { color: var(--dash-green); background: #eaf8f1; }
.reference-dashboard .summary-card p { margin: 0; color: #667085; font-size: 13px; font-weight: 600; }
.reference-dashboard .summary-card strong { margin: 8px 0 3px; font-size: 28px; line-height: 1.2; }
.reference-dashboard .summary-card small { margin: 0; color: #667085; font-size: 12px; }
.reference-dashboard .dashboard-section { max-width: none; margin: 22px 0 0; }
.reference-dashboard .section-heading { margin-bottom: 11px; }
.reference-dashboard .workflow-section .section-heading { margin-bottom: 14px; }
.reference-dashboard .section-heading h2 { font-size: 16px; }
.reference-dashboard .section-heading a { color: var(--dash-blue); font-size: 13px; font-weight: 650; }
.reference-dashboard .workflow-list { display: block; }
.retrieval-access { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dash-border); }
.retrieval-access summary { color: var(--dash-blue); cursor: pointer; font-size: 13px; font-weight: 650; }
.retrieval-access > div { display: flex; gap: 12px; align-items: end; margin-top: 13px; }
.retrieval-access label { flex: 1; }
.retrieval-access small { display: block; margin-top: 8px; }
.reference-dashboard .workflow-card { min-height: 195px; padding: 20px 20px 35px; border-color: var(--dash-border); border-radius: 16px; box-shadow: 0 8px 28px rgba(23,32,51,.06); }
.reference-dashboard .workflow-top h3 { font-size: 15px; }
.reference-dashboard .workflow-top p { margin-top: 4px; color: #667085; font-size: 13px; }
.reference-dashboard .state-badge { padding: 5px 10px; font-size: 11px; }
.reference-dashboard .state-badge.pending { color: var(--dash-warn); background: #fff5dc; }
.reference-dashboard .state-badge.approved { color: var(--dash-green); background: #eaf8f1; }
.reference-dashboard .workflow-steps { position: relative; grid-template-columns: repeat(5, 1fr); margin-top: 21px; }
.reference-dashboard .workflow-steps::before { content: ''; position: absolute; top: 14px; left: 5%; right: 5%; height: 2px; background: #e9edf3; }
.reference-dashboard .workflow-steps li { position: relative; z-index: 1; padding-top: 0; color: #172033; }
.reference-dashboard .workflow-steps li::before, .reference-dashboard .workflow-steps li::after { display: none; }
.reference-dashboard .workflow-steps li > span { width: 29px; height: 29px; display: grid; place-items: center; margin: 0 auto 8px; color: #98a2b3; background: #fff; border: 2px solid #d9dee8; border-radius: 50%; font-size: 11px; font-weight: 750; }
.reference-dashboard .workflow-steps li.done > span { color: var(--dash-green); background: #eaf8f1; border-color: #9ed8bc; }
.reference-dashboard .workflow-steps li.current > span { color: var(--dash-blue); background: #eef3ff; border-color: #9db4ff; box-shadow: 0 0 0 5px rgba(49,94,251,.06); }
.reference-dashboard .workflow-steps strong, .reference-dashboard .workflow-steps small { display: block; }
.reference-dashboard .workflow-steps strong { font-size: 11px; font-weight: 650; }
.reference-dashboard .workflow-steps small { margin-top: 2px; color: #667085; font-size: 11px; font-weight: 400; }
.reference-dashboard .dashboard-grid { max-width: none; margin: 22px 0 0; grid-template-columns: 1.25fr .75fr; gap: 18px; align-items: start; }
.reference-dashboard .review-card, .reference-dashboard .evidence-section, .reference-dashboard .activity-section { padding: 20px; border: 1px solid var(--dash-border); border-radius: 16px; background: rgba(255,255,255,.95); box-shadow: 0 8px 28px rgba(23,32,51,.06); }
.dashboard-review-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.dashboard-review-head h2 { margin: 0; font-size: 17px; }
.dashboard-review-head p { margin: 4px 0 0; color: #667085; font-size: 13px; }
.dashboard-review-head > span { padding: 5px 10px; color: #7357d9; background: #f1edff; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.review-recommendation { margin-top: 16px; padding: 15px; background: #f8f9fd; border: 1px solid #e7eaf2; border-radius: 12px; }
.review-recommendation strong { color: #7357d9; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.review-recommendation p { margin: 7px 0 0; color: #344054; font-size: 13px; }
.review-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.review-minis > div { min-width: 0; padding: 13px; border: 1px solid var(--dash-border); border-radius: 11px; }
.review-minis strong, .review-minis span { display: block; overflow-wrap: anywhere; font-size: 12px; }
.review-minis span { margin-top: 4px; color: #667085; }
.reference-dashboard .dashboard-review .button { margin-top: 18px; background: var(--dash-blue); border-color: var(--dash-blue); }
.reference-dashboard .evidence-section .section-heading { margin-bottom: 13px; }
.reference-dashboard .evidence-list { gap: 10px; }
.reference-dashboard .evidence-item { padding: 13px; border: 1px solid var(--dash-border); border-radius: 11px; }
.reference-dashboard .evidence-item strong { font-size: 13px; }
.reference-dashboard .evidence-item span { margin-top: 5px; color: #667085; font-size: 12px; }
.reference-dashboard .activity-section { margin-top: 22px; }
@keyframes dashboard-drift { to { transform: translate(30px,35px) scale(1.08); } }
@keyframes dashboard-travel { 0% { transform: translate(0,0); opacity:.15; } 20% { opacity:.75; } 80% { opacity:.55; } 100% { transform: translate(80px,-20px); opacity:.08; } }

@media (max-width: 1050px) {
  .reference-dashboard .dashboard-sidebar { width: 220px; }
  .reference-dashboard .dashboard-main { margin-left: 220px; padding: 26px; }
  .dashboard-ambient { inset: 0 0 0 220px; }
  .reference-dashboard .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .reference-dashboard .dashboard-sidebar { visibility: hidden; width: min(82vw, 280px); transform: translateX(-100%); }
  .reference-dashboard.nav-open .dashboard-sidebar { visibility: visible; transform: translateX(0); }
  .reference-dashboard .dashboard-main { margin-left: 0; padding: 20px 16px 100px; }
  .reference-dashboard .mobile-menu { display: block; }
  .reference-dashboard .dashboard-header { flex-wrap: wrap; }
  .reference-dashboard .dashboard-header > div:not(.dashboard-top-actions) { flex: 1; }
  .reference-dashboard .dashboard-top-actions { width: 100%; }
  .reference-dashboard .dashboard-stats { grid-template-columns: 1fr; }
  .reference-dashboard .workflow-steps { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .reference-dashboard .workflow-steps::before { display: none; }
  .reference-dashboard .review-minis { grid-template-columns: 1fr; }
}

/* Authentication */
.auth-body { min-height: 100vh; margin: 0; color: #172033; background: #f7f8fa; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr); }
.auth-story { position: relative; display: flex; flex-direction: column; padding: 38px 48px; overflow: hidden; color: #fff; background: linear-gradient(145deg, #17255f 0%, #294fd4 55%, #315efb 100%); }
.auth-story::before, .auth-story::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.auth-story::before { width: 520px; height: 520px; right: -260px; top: 14%; }
.auth-story::after { width: 300px; height: 300px; right: -80px; bottom: -150px; }
.auth-brand { position: relative; z-index: 1; color: #fff; }
.auth-brand .brand-mark { background: #fff; color: #315efb; }
.auth-brand small { color: rgba(255,255,255,.72); }
.auth-story-copy { position: relative; z-index: 1; max-width: 560px; margin: auto 0; }
.auth-story-copy .section-kicker { color: #bfcaff; }
.auth-story-copy h1 { max-width: 520px; margin: 14px 0 20px; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.05; letter-spacing: -2px; }
.auth-story-copy p { max-width: 540px; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.7; }
.auth-story-copy ul { display: grid; gap: 13px; margin: 32px 0 0; padding: 0; list-style: none; }
.auth-story-copy li { display: flex; gap: 11px; align-items: center; font-size: 14px; font-weight: 600; }
.auth-story-copy li span { width: 25px; height: 25px; display: grid; place-items: center; color: #0f7b55; background: #dff7eb; border-radius: 50%; }
.auth-environment { position: relative; z-index: 1; color: rgba(255,255,255,.65); }
.auth-panel { display: grid; place-items: center; padding: 42px; background: radial-gradient(circle at 85% 10%, rgba(49,94,251,.08), transparent 34%), #f7f8fa; }
.auth-card { width: min(100%, 480px); padding: 42px; border: 1px solid #e4e7ec; border-radius: 20px; background: rgba(255,255,255,.97); box-shadow: 0 24px 60px rgba(23,32,51,.11); }
.auth-mobile-mark { display: none; }
.auth-heading h2 { margin: 8px 0 7px; font-size: 28px; letter-spacing: -.7px; }
.auth-heading p { margin: 0; color: #667085; font-size: 14px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 28px 0 23px; padding: 4px; background: #f1f3f7; border-radius: 11px; }
.auth-tabs button { padding: 10px; color: #667085; border: 0; border-radius: 8px; background: transparent; font-weight: 650; cursor: pointer; }
.auth-tabs button.active { color: #315efb; background: #fff; box-shadow: 0 2px 8px rgba(23,32,51,.08); }
.auth-form { display: grid; gap: 17px; }
.auth-form label { display: grid; gap: 7px; color: #344054; font-size: 13px; font-weight: 650; }
.auth-form input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #d8dde7; border-radius: 10px; background: #fff; color: #172033; font: inherit; box-sizing: border-box; }
.auth-form input:focus { outline: 3px solid rgba(49,94,251,.12); border-color: #315efb; }
.auth-form .button { min-height: 49px; display: flex; justify-content: space-between; margin-top: 5px; }
.auth-message { min-height: 20px; margin: 15px 0 0; color: #16875a; font-size: 13px; }
.auth-message.error { color: #b42318; }
.auth-note { margin: 12px 0 0; color: #98a2b3; font-size: 11px; line-height: 1.5; text-align: center; }
@media (max-width: 860px) { .auth-shell { grid-template-columns: 1fr; } .auth-story { display: none; } .auth-panel { min-height: 100vh; padding: 22px; } .auth-card { padding: 28px 22px; } .auth-mobile-mark { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 24px; color: #fff; background: #315efb; border-radius: 11px; font-weight: 750; } }

/* Shared truthful service states. */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.capability-card {
  min-height: 150px;
  padding: 20px;
  border: 1px solid #dce2ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(30 45 75 / 6%);
}

.capability-card h3 {
  margin: 18px 0 8px;
  text-transform: capitalize;
}

.capability-card p {
  color: #5d6980;
  line-height: 1.5;
}

.capability-card .state-badge {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf1f7;
  color: #526078;
  font-size: 12px;
  text-transform: capitalize;
}

.capability-card.available .state-badge { background: #e6f6ef; color: #197451; }
.capability-card.degraded .state-badge { background: #fff3d7; color: #8a5b00; }
.capability-card.unavailable .state-badge,
.capability-card.not_configured .state-badge { background: #f3f4f7; color: #687286; }

@media (max-width: 700px) {
  .capability-grid { grid-template-columns: 1fr; }
}

.workflow-list { display: grid; gap: 16px; }
.workflow-card { padding: 20px; border: 1px solid #dce2ec; border-radius: 16px; background: #fff; }
.workflow-top, .review-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.workflow-card p { color: #5d6980; overflow-wrap: anywhere; white-space: pre-line; }
.review-actions { justify-content: flex-start; margin-top: 16px; }
.toast.visible { opacity: 1; transform: translateY(0); }
.integration-form { margin-bottom: 20px; padding: 20px; border: 1px solid #dce2ec; border-radius: 16px; background: #fff; }
.integration-form .button { justify-self: start; }
.member-list { display: grid; }
.member-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 20px; align-items: center; padding: 16px 4px; border-top: 1px solid #edf0f4; }
.member-row:first-child { border-top: 0; }
.member-person { display: grid; gap: 5px; }
.member-person strong { font-size: 12px; }
.member-person span { color: var(--muted); font-size: 10px; }
.member-controls { display: flex; align-items: center; gap: 10px; }
.member-controls select { min-width: 190px; padding: 9px 10px; border: 1px solid #d8dde7; border-radius: 9px; background: #fff; font: inherit; }
@media (max-width: 600px) { .member-row { grid-template-columns: 1fr; } .member-controls { align-items: stretch; flex-direction: column; } .member-controls select { width: 100%; } }
.button.danger { color: #a83232; border-color: #efcaca; background: #fff4f4; }
.error-state { color: #a83232; }
.dashboard-top-actions { display: flex; gap: 10px; margin-left: auto; }
.dashboard-top-actions .button, .summary-card { text-decoration: none; }
.summary-card { color: inherit; }
.dependency-alert { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 22px; padding: 16px 18px; border: 1px solid #f0d7a5; border-radius: 14px; background: #fff9eb; }
.dependency-alert strong { font-size: 13px; }
.dependency-alert p { margin: 3px 0 0; color: #78643c; font-size: 11px; }
.dependency-alert .button { flex: 0 0 auto; text-decoration: none; }
.home-workflow { min-height: 0 !important; padding: 18px 20px 20px !important; }
.home-workflow p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.home-workflow.interrupted { border-color: #f2c7c7; background: linear-gradient(135deg, #fff 70%, #fff5f5); }
.home-progress-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #edf0f4; }
.home-progress-status strong { color: #182230; font-size: 11px; }
.home-progress-status span { color: #667085; font-size: 10px; font-weight: 650; }
.home-progress { display: grid; grid-template-columns: repeat(5, 1fr); margin: 14px 0 0; padding: 0; list-style: none; }
.home-progress li { position: relative; display: grid; justify-items: center; gap: 6px; color: #98a2b3; text-align: center; }
.home-progress li::before { content: ''; position: absolute; top: 12px; right: 50%; width: 100%; height: 3px; background: #e4e7ec; }
.home-progress li:first-child::before { display: none; }
.home-progress li > span { position: relative; z-index: 1; display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid #dfe3ea; border-radius: 50%; background: #fff; font-size: 9px; font-weight: 800; }
.home-progress li > strong { color: inherit; font-size: 9px; }
.home-progress li.done::before, .home-progress li.done > span { color: #fff; border-color: #16875a; background: #16875a; }
.home-progress li.done > strong { color: #16875a; }
.home-progress li.current > span { color: #315efb; border-color: #315efb; background: #eef3ff; box-shadow: 0 0 0 5px rgba(49,94,251,.1); animation: home-current-step 1.8s ease-in-out infinite; }
.home-progress li.current > strong { color: #182230; font-weight: 800; }
.home-progress li.current.interrupted > span { color: #b42318; border-color: #d92d20; background: #fff1f0; box-shadow: 0 0 0 5px rgba(217,45,32,.1); }
@keyframes home-current-step { 50% { box-shadow: 0 0 0 9px rgba(49,94,251,0); transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .home-progress li.current > span { animation: none; } }
@media (max-width: 600px) { .home-progress li > strong { font-size: 8px; } .home-progress-status { align-items: flex-start; flex-direction: column; gap: 4px; } }
.reference-dashboard .dashboard-grid .dashboard-section { margin-top: 0; }
@media (max-width: 720px) { .dashboard-top-actions { width: 100%; order: 3; } .dependency-alert { align-items: flex-start; flex-direction: column; } }
@media (max-width: 520px) { .dashboard-user { max-width: 150px; } }
.workflow-stats { margin-bottom: 22px; }
.workflow-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 18px; align-items: start; }
.workflow-workspace-grid .dashboard-section { margin-top: 0; }
.workflow-create-panel, .workflow-guide { padding: 22px; border: 1px solid #e4e7ed; border-radius: 16px; background: #fff; box-shadow: 0 10px 35px rgba(31,45,75,.04); }
.workflow-create-panel .integration-form { margin: 0; padding: 0; border: 0; box-shadow: none; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.form-footer span { color: var(--muted); font-size: 10px; }
.workflow-guide h2 { margin: 0 0 16px; font-size: 16px; }
.workflow-guide ol { display: grid; gap: 10px; margin: 0; padding-left: 22px; color: #344054; font-size: 11px; }
.workflow-guide p { margin: 18px 0 0; color: var(--muted); font-size: 10px; }
.compact-filter { width: min(280px, 45vw); font-size: 9px; }
.compact-filter input { padding: 9px 11px; }
.workflow-detail-card { padding: 22px; }
.workflow-metadata { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.workflow-metadata span { padding: 6px 9px; color: #667085; border-radius: 8px; background: #f2f4f7; font-size: 10px; }
.workflow-progress { display: grid; grid-template-columns: repeat(5, 1fr); margin: 22px 0 4px; padding: 0; list-style: none; }
.workflow-progress li { position: relative; display: grid; justify-items: center; gap: 4px; color: #98a2b3; text-align: center; }
.workflow-progress li > span { position: relative; z-index: 1; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #dfe3ea; border-radius: 50%; background: #fff; font-size: 10px; font-weight: 800; }
.workflow-progress li > strong { color: #667085; font-size: 11px; }
.workflow-progress li > small { font-size: 9px; font-weight: 500; }
.workflow-progress li::after { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: #dfe3ea; }
.workflow-progress li:first-child::after { display: none; }
.workflow-progress li.done > span, .workflow-progress li.done::after { color: #fff; border-color: #16875a; background: #16875a; }
.workflow-progress li.current > span { color: #315efb; border-color: #315efb; background: #eef3ff; box-shadow: 0 0 0 4px #eef3ff; }
.workflow-progress li.current > strong { color: #182230; }
.workflow-audit-preview { margin-top: 18px; padding: 14px; border-radius: 12px; background: #f8f9fb; }
@media (max-width: 900px) { .workflow-workspace-grid { grid-template-columns: 1fr; } }
.workflow-header-actions { display: flex; align-items: end; gap: 12px; }
.workflow-header-actions label { min-width: 290px; }
.workflow-header-actions select { padding: 10px 12px; }
.workflow-new-request { margin: 0 0 18px; border: 1px solid #e4e7ed; border-radius: 14px; background: #fff; }
.workflow-new-request summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; color: var(--forest); font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; }
.workflow-new-request summary::-webkit-details-marker { display: none; }
.workflow-new-request summary > span:first-child { display: grid; gap: 3px; }
.workflow-new-request summary small { color: var(--muted); font-size: 10px; font-weight: 500; }
.workflow-new-request .integration-form { margin: 0; border: 0; border-top: 1px solid #edf0f4; border-radius: 0 0 14px 14px; box-shadow: none; }
#workflow-detail { display: grid; gap: 16px; }
.workflow-detail-panel { min-width: 0; padding: 20px; border: 1px solid #e4e7ed; border-radius: 14px; background: #fff; box-shadow: 0 8px 25px rgba(31,45,75,.04); }
.workflow-detail-panel h2 { margin: 0 0 14px; font-size: 15px; }
.workflow-detail-panel h3 { margin: 20px 0 10px; font-size: 12px; }
.workflow-detail-panel p { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.workflow-identity-strip { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid #e4e7ed; border-radius: 12px; background: #e4e7ed; }
.workflow-technical-details { overflow: hidden; border: 1px solid #dfe4ec; border-radius: 14px; background: #fff; }
.workflow-technical-details > summary { padding: 16px 18px; color: #344054; cursor: pointer; font-size: 12px; font-weight: 700; }
.workflow-technical-details[open] > summary { border-bottom: 1px solid #e8ebf0; }
.workflow-technical-details > :not(summary) { margin: 16px; }
.workflow-fact { display: grid; gap: 5px; min-width: 0; padding: 13px 15px; background: #fff; }
.workflow-fact small { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.workflow-fact strong { overflow-wrap: anywhere; color: #182230; font-size: 11px; }
.workflow-checkpoint-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.workflow-stage-mark { color: #182230; font-size: 20px; font-weight: 750; text-transform: capitalize; }
.workflow-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; margin: 16px 0; border: 1px solid #e8ebf0; border-radius: 10px; background: #e8ebf0; }
.workflow-detail-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 16px; align-items: start; }
.workflow-detail-side { display: grid; gap: 12px; }
.workflow-detail-side .button { width: 100%; margin-top: 10px; }
.workflow-action-card { border-color: #cfdafd; background: linear-gradient(145deg, #fff, #f8faff); }
.workflow-detail-side code { display: block; margin-top: 8px; overflow-wrap: anywhere; color: #344054; font-size: 9px; }
.workflow-reference-list { border: 1px solid #edf0f4; border-radius: 10px; overflow: hidden; }
.workflow-reference-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid #edf0f4; }
.workflow-reference-list > div:first-child { border-top: 0; }
.workflow-reference-list strong { overflow-wrap: anywhere; font-size: 10px; }
.workflow-reference-list span { flex: 0 0 auto; color: var(--muted); font-size: 9px; }
.workflow-agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.workflow-agent-card { padding: 12px; border: 1px solid #e5e8ee; border-radius: 10px; }
.workflow-agent-card strong { display: block; margin-bottom: 8px; font-size: 11px; }
.workflow-agent-card p { margin: 9px 0 0; }
.workflow-history-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(140px, .7fr) 170px minmax(180px, .8fr); gap: 14px; padding: 12px 4px; border-top: 1px solid #edf0f4; align-items: center; }
.workflow-history-row:first-of-type { border-top: 0; }
.workflow-history-row div { display: grid; gap: 3px; }
.workflow-history-row strong { font-size: 10px; text-transform: capitalize; }
.workflow-history-row small, .workflow-history-row span, .workflow-history-row code { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 9px; }
.workflow-exceptions { border-color: #f0c9c9; background: #fffafa; }
.workflow-exception-row { display: grid; grid-template-columns: auto minmax(130px, .35fr) minmax(240px, 1fr) minmax(180px, .6fr); gap: 12px; padding: 11px 0; border-top: 1px solid #f4dddd; align-items: center; }
.workflow-exception-row p { margin: 0; }
.workflow-exception-row code { overflow-wrap: anywhere; font-size: 9px; }
.workflow-audit-row { display: grid; grid-template-columns: 160px minmax(150px, .8fr) minmax(140px, .7fr) minmax(220px, 1fr); gap: 14px; padding: 11px 4px; border-top: 1px solid #edf0f4; align-items: center; }
.workflow-audit-row span, .workflow-audit-row code { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 9px; }
.workflow-audit-row strong { font-size: 10px; }
@media (max-width: 900px) { .workflow-detail-grid { grid-template-columns: 1fr; } .workflow-header-actions { align-items: stretch; flex-direction: column; } .workflow-header-actions label { min-width: 0; } .workflow-identity-strip, .workflow-facts { grid-template-columns: repeat(2, 1fr); } .workflow-audit-row, .workflow-history-row, .workflow-exception-row { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 620px) { .workflow-progress { grid-template-columns: 1fr; gap: 10px; } .workflow-progress li { grid-template-columns: 30px 1fr; justify-items: start; text-align: left; } .workflow-progress li > span { grid-row: 1 / 3; } .workflow-progress li::after { display: none; } .workflow-agent-grid, .workflow-identity-strip, .workflow-facts { grid-template-columns: 1fr; } }
.workflow-example-dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; color: #172033; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 30px 90px rgba(18,31,67,.28); }
.workflow-example-dialog::backdrop { background: rgba(17,28,56,.62); backdrop-filter: blur(5px); }
.workflow-example-shell { padding: 28px; }
.workflow-example-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.workflow-example-header h2 { margin: 7px 0; font-size: 26px; letter-spacing: -.6px; }
.workflow-example-header p { margin: 0; color: var(--muted); font-size: 11px; }
.example-close { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: #667085; border: 1px solid #dfe3ea; border-radius: 50%; background: #fff; font-size: 22px; cursor: pointer; }
.example-stepper { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 28px 0; padding: 0; list-style: none; }
.example-stepper::before { content: ''; position: absolute; top: 16px; left: 10%; right: 10%; height: 2px; background: #dfe5f0; }
.example-stepper li { position: relative; z-index: 1; display: grid; justify-items: center; }
.example-stepper button { min-width: 78px; padding: 9px 10px; color: #667085; border: 1px solid #dfe5f0; border-radius: 999px; background: #fff; font-size: 10px; font-weight: 750; cursor: pointer; transition: color .25s ease, background .25s ease, transform .25s ease; }
.example-stepper li.complete button { color: #167554; border-color: #b9e2d3; background: #eaf8f2; }
.example-stepper li.current button { color: #fff; border-color: #315efb; background: #315efb; box-shadow: 0 6px 18px rgba(49,94,251,.25); transform: translateY(-2px); }
.example-scene { display: grid; grid-template-columns: 72px 1fr; gap: 22px; min-height: 230px; padding: 30px; overflow: hidden; border: 1px solid #dce4fb; border-radius: 18px; background: radial-gradient(circle at 90% 10%, rgba(49,94,251,.12), transparent 32%), #f8faff; }
.example-scene-number { display: grid; width: 64px; height: 64px; place-items: center; color: #315efb; border: 1px solid #cfdafd; border-radius: 18px; background: #fff; font-size: 28px; font-weight: 800; box-shadow: 0 10px 25px rgba(49,94,251,.12); }
.example-scene-copy > span { color: #315efb; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.example-scene-copy h3 { margin: 10px 0; font-size: 22px; }
.example-scene-copy > p { max-width: 670px; margin: 0; color: #4f5e75; font-size: 13px; line-height: 1.7; }
.example-result { display: grid; gap: 5px; margin-top: 22px; padding: 14px 16px; border-left: 3px solid #16875a; border-radius: 0 10px 10px 0; background: #fff; }
.example-result strong { color: #16875a; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.example-result span { color: #344054; font-size: 11px; }
.example-scene-enter .example-scene-copy { animation: example-enter .45s ease both; }
.example-controls { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@keyframes example-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .example-scene-enter .example-scene-copy { animation: none; } .example-stepper button { transition: none; } }
@media (max-width: 700px) { .workflow-example-shell { padding: 20px; } .example-stepper { grid-template-columns: 1fr; } .example-stepper::before { display: none; } .example-stepper li { justify-items: stretch; } .example-stepper button { width: 100%; } .example-scene { grid-template-columns: 1fr; padding: 22px; } .example-controls { align-items: stretch; flex-direction: column; } }
.settings-content { max-width: 1180px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.settings-card { padding: 24px; border: 1px solid #e2e6ed; border-radius: 16px; background: #fff; box-shadow: 0 10px 32px rgba(31,45,75,.04); }
.settings-card h2 { margin: 5px 0 0; font-size: 18px; }
.settings-card > p { color: var(--muted); font-size: 11px; line-height: 1.6; }
.settings-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-avatar { display: grid; width: 42px; height: 42px; place-items: center; color: #315efb; border-radius: 50%; background: #eef3ff; font-weight: 800; }
.settings-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin-top: 22px; border: 1px solid #e8ebf0; border-radius: 12px; background: #e8ebf0; }
.settings-facts > div, .settings-provider-model { display: grid; gap: 6px; min-width: 0; padding: 14px; background: #fff; }
.settings-facts small, .settings-provider-model small { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.settings-facts strong { overflow-wrap: anywhere; font-size: 11px; text-transform: capitalize; }
.settings-provider-model { margin: 18px 0 12px; border: 1px solid #e8ebf0; border-radius: 10px; background: #f8faff; }
.settings-agent-list { display: grid; gap: 8px; }
.settings-agent-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #e8ebf0; border-radius: 10px; }
.settings-agent-list strong, .settings-agent-list span { font-size: 10px; }
.settings-agent-list span { color: var(--muted); }
.settings-secret-card { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 18px; }
.settings-secret-form { display: grid; align-content: start; gap: 12px; }
.settings-secret-form .button { justify-self: start; }
@media (max-width: 800px) { .settings-grid, .settings-secret-card { grid-template-columns: 1fr; } }
.connector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.connector-card { padding: 18px; border: 1px solid #e2e6ed; border-radius: 14px; background: #fff; }
.connector-card.active { border-color: #b9e1d1; }
.connector-card-heading, .settings-connector summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.connector-card h3 { margin: 0; font-size: 14px; }
.connector-card p, .settings-connector p { color: var(--muted); font-size: 10px; line-height: 1.55; }
.connector-card > small { color: #667085; font-weight: 700; }
.connector-operations { margin-top: 13px; color: #315efb; font-size: 9px; font-weight: 700; }
.connector-activity { display: grid; }
.connector-activity-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(170px, .5fr); gap: 14px; padding: 14px 4px; border-top: 1px solid #edf0f4; align-items: center; }
.connector-activity-row:first-child { border-top: 0; }
.connector-activity-row > div { display: grid; gap: 4px; }
.connector-activity-row strong { font-size: 11px; }
.connector-activity-row span, .connector-activity-row summary, .connector-activity-row code { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.settings-connectors-card { margin-top: 18px; }
.settings-connector-list { display: grid; gap: 10px; margin-top: 18px; }
.settings-connector { padding: 14px; border: 1px solid #e6e9ef; border-radius: 11px; }
.settings-connector summary { cursor: pointer; list-style: none; }
.settings-connector summary::-webkit-details-marker { display: none; }
.settings-connector-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid #e8ebf0; border-radius: 9px; background: #e8ebf0; }
.settings-connector-facts > div { display: grid; gap: 5px; min-width: 0; padding: 11px; background: #fff; }
.settings-connector-facts small { color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.settings-connector-facts strong { overflow-wrap: anywhere; font-size: 10px; }
.connector-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.connector-settings-form label { display: grid; gap: 6px; color: #344054; font-size: 9px; font-weight: 700; text-transform: capitalize; }
.connector-settings-form input { width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid #d8dde7; border-radius: 9px; color: #172033; background: #fff; font: inherit; }
.connector-settings-form .button { align-self: end; justify-self: start; }
.auth-alternative { margin-top: 20px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: #98a2b3; font-size: 11px; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: #e2e6ee; content: ""; }
.jira-login { min-height: 49px; box-sizing: border-box; justify-content: center; text-decoration: none; }
.legal-body { margin: 0; background: #f5f7fb; color: #17233c; }
.legal-page { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 64px; }
.legal-page article { margin-top: 36px; }
.legal-page h1 { margin: 8px 0 24px; font-size: 40px; letter-spacing: 0; }
.legal-page h2 { margin: 28px 0 8px; font-size: 20px; letter-spacing: 0; }
.legal-page p { color: #43506a; line-height: 1.7; }
.legal-page a { color: #1745c7; }
.legal-links { display: flex; gap: 20px; margin-top: 36px; padding-top: 20px; border-top: 1px solid #d9dfeb; }
@media (max-width: 700px) { .connector-activity-row, .settings-connector-facts { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .connector-settings-form { grid-template-columns: 1fr; } }