:root {
  --ink: #111714; --paper: #f3f4ef; --white: #fff; --line: #dce1da;
  --muted: #68736c; --accent: #dfff5f; --accent-ink: #111714; --accent-border: #c9e650; --purple: #6857d9; --soft: #eceee8;
  --control: #fff; --subtle: #fafbf8; --sidebar: #111714; --sidebar-ink: #fff;
  --sidebar-muted: #aeb7b1; --sidebar-nav: #bec7c1; --sidebar-hover: #28302c;
  --purple-soft: #eeebff; --purple-ink: #41359a;
  --warning-bg: #fff5eb; --warning-border: #efd1b8; --warning-ink: #744019;
  --success-bg: #eef9f1; --success-border: #bcdac4; --success-ink: #245332;
  --danger-bg: #fff0f2; --danger-border: #e5b7bd; --danger-ink: #8b2635;
  --shadow: 0 10px 30px rgba(21, 31, 25, .045); --focus: rgba(104, 87, 217, .12);
  color-scheme: light;
  font: 16px "DM Sans", Inter, system-ui, sans-serif; color: var(--ink); background: var(--paper);
}
[data-theme="dark"] {
  --ink: #edf2ed; --paper: #101512; --white: #171d19; --line: #303a33;
  --muted: #9aa69e; --purple: #aaa0ff; --soft: #232b26; --control: #1d251f;
  --subtle: #1b221d; --sidebar: #0b0f0d; --sidebar-ink: #f6faf7; --sidebar-muted: #8e9a92;
  --sidebar-nav: #aab4ad; --sidebar-hover: #242c27; --purple-soft: #292543; --purple-ink: #c5bdff;
  --warning-bg: #2a2118; --warning-border: #5e452f; --warning-ink: #f0bd8d;
  --success-bg: #17271c; --success-border: #355841; --success-ink: #9bd3aa;
  --danger-bg: #2a191d; --danger-border: #603641; --danger-ink: #f0a8b5;
  --shadow: 0 14px 38px rgba(0, 0, 0, .2); --focus: rgba(170, 160, 255, .18);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; transition: transform 140ms cubic-bezier(.23, 1, .32, 1), border-color 160ms ease, background-color 160ms ease, color 160ms ease; }
button:active:not(:disabled) { transform: scale(.98); }
button:disabled { cursor: not-allowed; opacity: .55; }
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
aside { display: flex; flex-direction: column; gap: 32px; padding: 28px 20px; color: var(--sidebar-ink); background: var(--sidebar); }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand > b { display: grid; width: 44px; height: 44px; place-items: center; color: var(--accent-ink); background: var(--accent); border-radius: 12px; }
.brand span { font-weight: 700; }
.brand small { display: block; margin-top: 2px; color: var(--sidebar-muted); font-size: 11px; font-weight: 500; }
nav { display: grid; gap: 7px; }
nav button, .sidebar-signout { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; color: var(--sidebar-nav); text-align: left; border: 0; border-radius: 9px; background: transparent; }
nav button.active, nav button:hover:not(:disabled) { color: var(--sidebar-ink); background: var(--sidebar-hover); }
.nav-icon { width: 20px; flex: 0 0 20px; text-align: center; font-weight: 800; }
.account { display: grid; gap: 2px; padding: 0 12px; color: var(--sidebar-muted); font-size: 12px; }
.account strong { color: var(--sidebar-ink); font-size: 13px; }
.sidebar-signout { margin-top: auto; }
.sidebar-signout:hover { color: var(--sidebar-ink); background: var(--sidebar-hover); }
.sidebar-collapse { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; padding: 0; color: var(--sidebar-nav); border: 1px solid var(--sidebar-hover); border-radius: 8px; background: transparent; font-size: 21px; }
.sidebar-collapsed { grid-template-columns: 84px 1fr; }
.sidebar-collapsed aside { padding-inline: 14px; }
.sidebar-collapsed .brand span, .sidebar-collapsed .account, .sidebar-collapsed .nav-label { display: none; }
.sidebar-collapsed .brand-row { justify-content: center; flex-direction: column; }
.sidebar-collapsed nav button, .sidebar-collapsed .sidebar-signout { justify-content: center; padding-inline: 10px; }
main { min-width: 0; padding: 42px clamp(24px, 4vw, 68px) 72px; }
header, .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
header { margin-bottom: 30px; }
.header-actions { display: flex; gap: 10px; }
.theme-toggle { min-width: 105px; }
.eyebrow { margin: 0 0 7px; color: var(--purple); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 780px; margin-bottom: 8px; font-size: clamp(32px, 5vw, 58px); line-height: .98; letter-spacing: -.055em; }
h2 { margin-bottom: 8px; font-size: 22px; letter-spacing: -.025em; }
.lede, .section-head p, .login p { max-width: 700px; margin-bottom: 0; color: var(--muted); line-height: 1.55; }
.card { border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow); }
.login { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px; }
.primary, .secondary { min-height: 42px; padding: 0 17px; border-radius: 10px; font-weight: 750; }
.primary { color: var(--accent-ink); border: 1px solid var(--accent-border); background: var(--accent); }
.secondary { color: var(--ink); border: 1px solid var(--line); background: var(--control); }
.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.status-grid article { padding: 20px; }
.status-grid span, .connection-grid small, .user small { display: block; color: var(--muted); font-size: 12px; }
.status-grid strong { display: block; margin-top: 7px; font-size: 18px; }
.activity-total { display: grid; justify-items: end; color: var(--muted); }
.activity-total strong { color: var(--ink); font-size: 38px; line-height: 1; }
.activity-total small { margin-top: 5px; }
.target-progress { margin-top: 22px; }
.target-progress progress { width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 99px; background: var(--soft); accent-color: var(--purple); }
.activity-chart { display: grid; grid-template-columns: repeat(7, minmax(34px, 1fr)); gap: 12px; min-height: 180px; margin-top: 24px; }
.activity-day { display: grid; grid-template-rows: auto 1fr auto; gap: 7px; min-width: 0; text-align: center; }
.activity-day strong { font-size: 13px; }
.activity-day small { color: var(--muted); font-size: 11px; }
.activity-bar { display: flex; min-height: 125px; flex-direction: column; justify-content: flex-end; gap: 3px; }
.activity-bar span { height: 9px; border-radius: 3px; background: var(--soft); }
.activity-bar span[data-filled="true"] { background: var(--purple); }
.block { margin-top: 14px; padding: 28px; }
.empty { margin-top: 22px; padding: 25px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 12px; background: var(--paper); }
.connection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.connection-grid > div { padding: 18px; border-radius: 12px; background: var(--paper); }
.connection-grid strong { display: inline-block; margin: 4px 0; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.guide-grid > div { padding: 18px; border-radius: 12px; background: var(--paper); }
.guide-grid p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; }
.setup-form { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; align-items: end; margin-top: 22px; }
.compact-form { grid-template-columns: minmax(280px, 1fr) auto; }
.mapping-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.label-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.field-title { margin: 24px 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.choice-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
#launchPic, #launchProductsFilter { max-height: 170px; overflow-y: auto; padding-right: 4px; }
.product-toggle { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); font-size: 13px; font-weight: 700; }
.product-toggle input { width: auto; min-height: auto; }
.notice { margin-top: 18px; padding: 14px 16px; color: var(--warning-ink); border: 1px solid var(--warning-border); border-radius: 10px; background: var(--warning-bg); line-height: 1.45; }
.notice.complete { color: var(--success-ink); border-color: var(--success-border); background: var(--success-bg); }
.import-row { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: end; margin-top: 22px; }
.users { display: grid; gap: 10px; margin-top: 22px; }
.user { display: grid; grid-template-columns: minmax(150px, 1.1fr) repeat(4, minmax(105px, .7fr)) minmax(130px, .8fr) auto minmax(125px, auto) auto; gap: 11px; align-items: end; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.admin-user { grid-template-columns: minmax(170px, 1fr) auto minmax(150px, .6fr) auto; }
.hunt-target-control small { margin-top: -3px; }
.admin-tag { justify-self: end; padding: 7px 10px; color: var(--purple-ink); border-radius: 999px; background: var(--purple-soft); font-size: 12px; font-weight: 750; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
input, select, textarea { width: 100%; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; outline: none; background: var(--control); }
input, select { min-height: 40px; padding: 0 11px; }
textarea { min-height: 230px; padding: 13px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--focus); }
.intake { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr); gap: 22px; }
.intake textarea { margin-top: 18px; }
.cache-panel { align-self: start; margin-top: 27px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.cache-panel strong { display: block; margin-bottom: 7px; }
.cache-panel p:not(.eyebrow), .cache-panel small { display: block; color: var(--muted); line-height: 1.45; }
.cache-panel p:not(.eyebrow) { margin-bottom: 14px; }
.cache-panel small { margin-top: 11px; font-size: 11px; }
.intake-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 11px; color: var(--muted); font-size: 13px; }
.draft-meta { display: grid; gap: 2px; }
.draft-meta small { color: var(--muted); font-size: 11px; }
.candidate-list { display: grid; gap: 10px; margin-top: 22px; }
.candidate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.checked-result { background: var(--subtle); }
.candidate small { display: block; margin-top: 3px; color: var(--muted); overflow-wrap: anywhere; }
.platform { min-width: 38px; padding: 7px 9px; color: var(--purple-ink); text-align: center; border-radius: 8px; background: var(--purple-soft); font-size: 11px; font-weight: 850; }
.state { color: var(--muted); font-size: 12px; font-weight: 750; }
.status-pill { padding: 7px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 12px; font-weight: 750; white-space: nowrap; }
.status-pill[data-tone="success"] { color: var(--success-ink); border-color: var(--success-border); background: var(--success-bg); }
.status-pill[data-tone="warning"] { color: var(--warning-ink); border-color: var(--warning-border); background: var(--warning-bg); }
.review-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 14px; }
.chooser-panel { margin-top: 14px; }
.profile-link { display: block; margin: 28px 0; padding: 28px; color: var(--ink); text-align: center; text-decoration: none; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); font-size: 18px; font-weight: 800; }
.review-focus { padding: clamp(24px, 4vw, 46px); }
.review-focus-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.review-meta { display: grid; justify-items: end; gap: 8px; }
.compact-profile-link { color: var(--purple); font-size: 13px; font-weight: 750; text-decoration: none; }
.review-focus .review-actions { margin: 24px 0 12px; }
.approval-panel { padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); border-radius: 16px; background: var(--subtle); }
.approval-panel .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.danger-button { min-height: 48px; color: var(--danger-ink); border: 1px solid var(--danger-border); border-radius: 10px; background: var(--danger-bg); font-weight: 800; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
.choice-button { min-height: 48px; padding: 10px; color: var(--ink); text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-weight: 700; }
.choice-button:hover:not(:disabled) { border-color: var(--purple); background: var(--purple-soft); }
.start-controls { display: flex; gap: 10px; min-width: min(480px, 100%); }
.start-controls select { flex: 1; }
.owner-controls { min-width: min(430px, 100%); }
.account-toggle { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.account-toggle input { width: auto; min-height: auto; }
.candidate-actions { display: flex; gap: 8px; align-items: center; }
.wide-action { width: 100%; margin-top: 12px; }
.operation-list { display: grid; gap: 9px; margin-top: 18px; }
.operation-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); }
.operation-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; text-transform: capitalize; }
dialog { width: min(500px, calc(100% - 28px)); padding: 0; color: var(--ink); border: 0; border-radius: 16px; background: var(--white); box-shadow: 0 30px 80px rgba(0, 0, 0, .24); }
dialog::backdrop { background: rgba(5, 12, 8, .55); }
dialog form { display: grid; gap: 16px; padding: 26px; }
.dialog-grants { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--soft); font-size: 22px; }
#toast { position: fixed; right: 24px; bottom: 24px; max-width: min(390px, calc(100% - 48px)); padding: 13px 17px; color: var(--sidebar-ink); border-radius: 10px; background: var(--sidebar); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 180ms cubic-bezier(.23, 1, .32, 1), transform 180ms cubic-bezier(.23, 1, .32, 1); }
#toast.show { opacity: 1; transform: translateY(0); }
[hidden] { display: none !important; }
@media (max-width: 1050px) { .user { grid-template-columns: 1fr 1fr; } .admin-tag { justify-self: start; } .setup-form, .intake, .review-grid, .mapping-grid, .label-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .shell, .sidebar-collapsed { display: block; } aside, .sidebar-collapsed aside { position: static; padding: 18px; } .sidebar-collapse { display: none; } .sidebar-collapsed .brand span { display: block; } .sidebar-collapsed .account { display: grid; } .sidebar-collapsed .nav-label { display: inline; } .sidebar-collapsed .brand-row { justify-content: space-between; flex-direction: row; } nav { grid-template-columns: repeat(2, 1fr); } .account { padding-inline: 0; } .sidebar-signout { margin-top: 0; }
  main { padding: 28px 16px 50px; } header, .section-head, .login { flex-direction: column; } .header-actions { width: 100%; } .status-grid, .connection-grid, .guide-grid { grid-template-columns: 1fr; }
  .setup-form, .compact-form, .import-row, .intake, .review-grid, .user, .mapping-grid, .label-grid, .choice-grid.compact, .approval-panel .choice-grid { grid-template-columns: 1fr; } .review-focus-head { flex-direction: column; } .review-meta { justify-items: start; } .activity-total { justify-items: start; } .activity-chart { gap: 5px; } .candidate { grid-template-columns: auto 1fr; } .candidate .state, .candidate .status-pill, .candidate .candidate-actions { grid-column: 2; } .candidate-actions { align-items: stretch; flex-direction: column; } .operation-row { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { button, #toast { transition-duration: 0ms; } button:active:not(:disabled) { transform: none; } }

/* Work Louder-inspired design language: tactile controls, deep surfaces, and signal color. */
:root {
  --ink: #141510; --paper: #e8e8e2; --white: #f8f8f4; --line: #cecec6;
  --muted: #6f7069; --accent: #5145d8; --accent-ink: #ffffff; --accent-border: #4338ca;
  --purple: #4338ca; --soft: #deded7; --control: #f1f1ec; --subtle: #eeeeE8;
  --sidebar: #111210; --sidebar-ink: #f4f4ed; --sidebar-muted: #85867f; --sidebar-nav: #bfc0b8; --sidebar-hover: #292a26;
  --purple-soft: #e8e6ff; --purple-ink: #312e81;
  --warning-bg: #fff0d6; --warning-border: #e8c88f; --warning-ink: #6c4215;
  --success-bg: #e9f2bd; --success-border: #bfca70; --success-ink: #364000;
  --danger-bg: #ffe4e4; --danger-border: #e8a9aa; --danger-ink: #812c30;
  --shadow: 0 16px 50px rgba(15, 16, 12, .07); --focus: rgba(81, 69, 216, .2);
  --panel-radius: 28px; --control-radius: 999px; --ease-out: cubic-bezier(.23, 1, .32, 1);
  font-family: "Helvetica Neue", Helvetica, Arial, Inter, system-ui, sans-serif;
}
[data-theme="dark"] {
  --ink: #f2f2ec; --paper: #080906; --white: #171814; --line: #32332d;
  --muted: #96978f; --accent: #edff37; --accent-ink: #0d0e0a; --accent-border: #edff37;
  --purple: #edff37; --soft: #272822; --control: #242520; --subtle: #1d1e1a;
  --sidebar: #161713; --sidebar-ink: #f4f4ed; --sidebar-muted: #7f8078; --sidebar-nav: #b5b6ae; --sidebar-hover: #292a25;
  --purple-soft: #30341b; --purple-ink: #edff37;
  --warning-bg: #2a2115; --warning-border: #5c492c; --warning-ink: #f0c37f;
  --success-bg: #242914; --success-border: #4e5a22; --success-ink: #ddea79;
  --danger-bg: #321c1e; --danger-border: #673438; --danger-ink: #ff9da3;
  --shadow: 0 22px 70px rgba(0, 0, 0, .26); --focus: rgba(237, 255, 55, .16);
}

body {
  background:
    radial-gradient(circle at 86% -12%, color-mix(in srgb, var(--accent) 7%, transparent) 0, transparent 28rem),
    var(--paper);
  letter-spacing: -.012em;
}
.shell { grid-template-columns: 274px minmax(0, 1fr); gap: 10px; padding: 10px; }
aside {
  position: sticky; top: 10px; height: calc(100vh - 20px); overflow-y: auto;
  padding: 22px 16px; border: 1px solid #292a25; border-radius: 28px;
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 18px 60px rgba(0,0,0,.18);
}
.brand-row { padding: 2px 3px 0; }
.brand { gap: 10px; }
.brand > b {
  width: 48px; height: 48px; border-radius: 16px; font-size: 13px; letter-spacing: -.04em;
  box-shadow: inset 0 -3px rgba(0,0,0,.14), 0 8px 20px color-mix(in srgb, var(--accent) 12%, transparent);
}
.brand span { font-size: 15px; letter-spacing: -.025em; }
.brand small { margin-top: 4px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.account { padding: 14px 15px; border: 1px solid #30312b; border-radius: 18px; background: #1d1e1a; }
.account strong { font-size: 14px; }
nav { gap: 5px; }
nav button, .sidebar-signout {
  min-height: 48px; padding: 0 15px; border-radius: var(--control-radius); font-size: 14px; font-weight: 680;
}
nav button.active, nav button.active:hover:not(:disabled) { color: var(--accent-ink); background: var(--accent); box-shadow: inset 0 -2px rgba(0,0,0,.13); }
.nav-icon { font-size: 15px; }
.sidebar-collapse { border-radius: 50%; background: #22231f; }
.sidebar-collapsed { grid-template-columns: 94px minmax(0, 1fr); }
.sidebar-collapsed aside { padding-inline: 12px; }

main { width: min(100%, 1560px); padding: 48px clamp(22px, 4vw, 72px) 86px; }
header { align-items: flex-end; margin-bottom: 38px; padding: 0 4px; }
.eyebrow { margin-bottom: 10px; color: var(--purple); font-size: 11px; letter-spacing: .18em; }
h1 { max-width: 900px; margin-bottom: 12px; font-size: clamp(44px, 6.6vw, 88px); line-height: .88; letter-spacing: -.075em; font-weight: 580; }
h2 { font-size: clamp(22px, 2.1vw, 31px); line-height: 1; letter-spacing: -.048em; font-weight: 620; }
.lede, .section-head p, .login p { line-height: 1.5; }

.card {
  border-color: var(--line); border-radius: var(--panel-radius); box-shadow: var(--shadow);
  background: linear-gradient(145deg, color-mix(in srgb, var(--white) 94%, white 6%), var(--white));
}
.block { margin-top: 12px; padding: clamp(24px, 3.2vw, 42px); }
.status-grid { gap: 12px; margin-bottom: 12px; }
.status-grid article { min-height: 142px; padding: 24px; border-radius: 24px; }
.status-grid article:first-child { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.status-grid article:first-child span { color: color-mix(in srgb, var(--accent-ink) 72%, transparent); }
.status-grid strong { margin-top: 24px; font-size: clamp(26px, 3vw, 44px); letter-spacing: -.055em; }
.activity-total strong { font-size: 52px; letter-spacing: -.065em; }
.activity-chart { gap: 9px; }
.activity-bar span { border-radius: 999px; }
.activity-bar span[data-filled="true"] { background: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 18%, transparent); }

.primary, .secondary, .danger-button {
  min-height: 46px; padding: 0 19px; border-radius: var(--control-radius); font-size: 13px; font-weight: 720;
  letter-spacing: -.015em; box-shadow: inset 0 -2px rgba(0,0,0,.09);
}
.primary { border-color: var(--accent); background: var(--accent); }
.secondary { background: var(--control); }
.danger-button { min-height: 48px; }
button { transition: transform 140ms var(--ease-out), border-color 170ms ease, background-color 170ms ease, color 170ms ease, opacity 170ms ease; }
button:active:not(:disabled) { transform: scale(.97); }

input, select, textarea { border-radius: 16px; }
input, select { min-height: 46px; padding-inline: 14px; }
textarea { padding: 18px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
.empty { padding: 30px; border-radius: 20px; }
.notice { border-radius: 18px; }
.connection-grid > div, .guide-grid > div, .cache-panel { border-radius: 20px; }
.cache-panel { padding: 23px; }

.candidate-list { gap: 8px; }
.candidate {
  min-height: 76px; padding: 14px 16px; border-radius: 20px; background: var(--subtle);
  transition: transform 180ms var(--ease-out), border-color 180ms ease, background-color 180ms ease;
}
.platform { min-width: 42px; padding: 10px; border-radius: 13px; }
.status-pill, .admin-tag { border-radius: var(--control-radius); }
.choice-grid { gap: 10px; }
.choice-button {
  min-height: 62px; padding: 14px 16px; border-radius: 18px; background: var(--control);
  box-shadow: inset 0 -3px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.05);
  transition: transform 150ms var(--ease-out), border-color 170ms ease, background-color 170ms ease, color 170ms ease;
}
.choice-button:disabled { box-shadow: none; text-decoration: line-through; }
.approval-panel { margin-top: 12px; padding: clamp(24px, 4vw, 52px); border-radius: 24px; }
.approval-panel .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review-focus { overflow: hidden; padding: clamp(26px, 4vw, 54px); }
.review-focus::before {
  content: ""; display: block; width: 62px; height: 6px; margin: -18px 0 28px;
  border-radius: 99px; background: var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent);
}
.review-focus-head h2 { font-size: clamp(34px, 5vw, 68px); }
.review-meta { padding-top: 5px; }
.review-actions { gap: 8px; }
.review-workspace-tools, .review-utilities, .session-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.review-workspace-tools { margin: 26px 0 10px; }
.review-launch { display: grid; justify-items: end; gap: 10px; }
.catalog-status { margin-top: 14px; color: var(--muted); font-size: 12px; }
.compact-profile-link { color: var(--purple); }
.start-controls { min-width: min(500px, 100%); }
.product-toggle, .availability-option { border-radius: 16px; }

dialog { border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 36px 100px rgba(0,0,0,.48); }
dialog::backdrop { background: rgba(4,5,3,.76); backdrop-filter: blur(8px); }
.product-dialog { width: min(760px, calc(100% - 28px)); }
.product-dialog form { padding: clamp(24px, 4vw, 40px); }
.product-availability-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-height: 48vh; margin-top: 24px; overflow: auto; }
.availability-option {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 11px 14px;
  color: var(--ink); border: 1px solid var(--line); background: var(--subtle); font-size: 13px; font-weight: 680;
}
.availability-option input { width: 18px; min-height: 18px; accent-color: var(--accent); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.close { background: var(--control); }
#toast { right: 28px; bottom: 28px; border: 1px solid #35362f; border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.34); }

#workspace > div:not([hidden]) { animation: workspace-enter 220ms var(--ease-out) both; }
@keyframes workspace-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) {
  .candidate:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
  .choice-button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); background: var(--purple-soft); }
  .secondary:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
}

@media (max-width: 1050px) {
  .shell { grid-template-columns: 220px minmax(0, 1fr); }
  .review-launch { justify-items: stretch; }
  .review-utilities { justify-content: flex-end; }
  .product-availability-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .shell, .sidebar-collapsed { padding: 0; }
  aside, .sidebar-collapsed aside { position: static; width: auto; height: auto; margin: 8px; border-radius: 24px; }
  main { width: 100%; padding: 30px 14px 56px; }
  header { align-items: flex-start; }
  h1 { font-size: clamp(42px, 15vw, 64px); }
  .status-grid article { min-height: 110px; }
  .review-utilities, .review-workspace-tools, .session-actions { width: 100%; }
  .review-utilities button, .review-workspace-tools button, .session-actions button { flex: 1; }
  .start-controls { min-width: 0; flex-direction: column; }
  .product-availability-list, .approval-panel .choice-grid { grid-template-columns: 1fr; }
  .review-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #workspace > div:not([hidden]) { animation: none; }
  .candidate, .choice-button { transition: border-color 170ms ease, background-color 170ms ease; }
}

/* Lighter geometric typography, matching Work Louder's HK Nova Medium treatment. */
:root {
  font-family: "Avenir Next", Avenir, "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-synthesis-weight: none;
}
body { font-weight: 400; }
h1 {
  max-width: 920px; font-size: clamp(42px, 6vw, 78px); font-weight: 400;
  line-height: .94; letter-spacing: -.045em;
}
h2 { font-weight: 500; line-height: 1.06; letter-spacing: -.035em; }
strong, b { font-weight: 600; }
.brand span, nav button, .sidebar-signout { font-weight: 500; }
.brand small { font-weight: 400; }
.eyebrow { font-weight: 600; letter-spacing: .16em; }
.primary, .secondary, .danger-button, .choice-button { font-weight: 600; }
.field-title, .product-toggle, label, .availability-option { font-weight: 500; }
.admin-tag, .state, .status-pill, .compact-profile-link { font-weight: 600; }
.platform, .profile-link { font-weight: 600; }
.review-focus-head h2 { font-weight: 400; letter-spacing: -.045em; }

.sidebar-footer { margin-top: auto; display: grid; gap: 10px; }
.sidebar-footer .sidebar-signout { margin-top: 0; }
.sidebar-footer .theme-toggle { min-width: 0; }
.sidebar-collapsed .sidebar-footer .theme-toggle { padding-inline: 8px; justify-content: center; }
.review-actions { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.review-toolbar { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) minmax(220px, 2fr); gap: 8px; margin: 26px 0 10px; }
.review-toolbar .review-reject { width: 100%; }
#reviewFocusCard, #reviewSavedDecisions, #reassignmentFocusCard, #reassignmentSavedDecisions, #launchFocusCard, #launchSavedDecisions, #huntResultsCard { scroll-margin-top: 24px; }
.sidebar-footer .theme-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 16px; width: 100%; text-align: left; background: transparent; color: inherit; border: 1px solid var(--line); border-radius: 18px; }
.testing-tools { position: relative; display: grid; gap: 8px; }
.testing-tools-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; color: var(--sidebar-nav); text-align: left; border: 1px solid #34362f; border-radius: 18px; background: transparent; }
.testing-tools-toggle[aria-expanded="true"] { color: var(--sidebar-ink); border-color: #4a4c42; background: #22231f; }
.testing-chevron { margin-left: auto; transition: transform 180ms var(--ease-out); }
.testing-tools-toggle[aria-expanded="true"] .testing-chevron { transform: rotate(180deg); }
.testing-tools-panel { position: absolute; right: 0; bottom: calc(100% + 8px); left: 0; z-index: 20; display: grid; gap: 7px; padding: 12px; border: 1px solid #34362f; border-radius: 18px; background: #1d1e1a; box-shadow: 0 18px 42px rgba(0,0,0,.25); }
.testing-tools-panel small { padding: 2px 3px 7px; color: var(--sidebar-muted); font-size: 10px; line-height: 1.45; }
.testing-reset { width: 100%; min-height: 38px; padding: 0 11px; color: #ffb5b9; text-align: left; border: 1px solid #60383a; border-radius: 12px; background: #2d2020; font-size: 11px; font-weight: 600; }
.sidebar-collapsed .testing-tools-toggle { justify-content: center; padding-inline: 8px; }
.theme-orbit { position: relative; display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; overflow: hidden; }
.theme-sun, .theme-moon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 23px; }
.theme-sun { transform: translateY(0) rotate(0deg); opacity: 1; }
.theme-moon { transform: translateY(28px) rotate(-90deg); opacity: 0; }
[data-theme="light"] .theme-sun { transform: translateY(-28px) rotate(90deg); opacity: 0; }
[data-theme="light"] .theme-moon { transform: translateY(0) rotate(0deg); opacity: 1; }
.theme-toggle[data-animate="true"] .theme-sun, .theme-toggle[data-animate="true"] .theme-moon { transition: transform 250ms cubic-bezier(0.77,0,0.175,1), opacity 200ms ease; }
#reviewProgress, #reassignmentProgress, #launchProgress { font-size: clamp(26px, 3vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -.04em; text-transform: none; margin-bottom: 16px; }
.launch-filter-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 12px; margin: 22px 0; }
.launch-start { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.launch-creator-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.launch-creator-facts span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
.intake { display: block; }
.intake-description { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 8px; }
.intake-description .lede { margin: 0; }
.cache-action { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; margin: 0; }
.action-dialog { width: min(480px, calc(100vw - 32px)); }
.action-dialog p { line-height: 1.6; }
.action-dialog .dialog-actions { justify-content: flex-end; gap: 12px; margin-top: 28px; }
.product-dialog-actions { flex-wrap: wrap; }
.product-dialog-actions .primary { min-width: 130px; }
#buttonTooltip { position: fixed; z-index: 3000; width: max-content; max-width: min(270px, calc(100vw - 24px)); padding: 9px 11px; color: #f4f4ed; border: 1px solid #3b3c35; border-radius: 10px; background: #111210; box-shadow: 0 12px 34px rgba(0,0,0,.28); font-size: 11px; line-height: 1.4; pointer-events: none; }
.guide-grid { align-items: start; }
.guide-grid h3 { font-size: 22px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle[data-animate="true"] .theme-sun, .theme-toggle[data-animate="true"] .theme-moon { transition: opacity 150ms ease; }
  .testing-chevron { transition: none; }
}

/* Help & About is a visual operating guide. Keep these diagrams in sync with feature changes. */
.help-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--white)), var(--white) 55%); }
.help-hero .lede { max-width: 650px; }
.help-flow-list { display: grid; gap: 18px; margin-top: 18px; }
.help-flow { overflow: hidden; }
.help-flow-heading { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
.help-flow-heading h2 { margin-bottom: 6px; }
.help-flow-heading p:last-child { margin: 0; color: var(--muted); }
.help-number { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; color: var(--accent-ink); border-radius: 16px; background: var(--accent); font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent); }
.flow-diagram { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.flow-diagram-wide { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr); }
.flow-step { display: grid; align-content: center; justify-items: start; min-height: 128px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--subtle); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.flow-step strong { font-size: 15px; line-height: 1.25; }
.flow-step small { margin-top: 7px; color: var(--muted); line-height: 1.35; }
.flow-icon { display: grid; width: 32px; height: 32px; margin-bottom: 16px; place-items: center; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--control)); font-size: 16px; }
.flow-arrow { display: grid; align-self: center; width: 28px; height: 28px; place-items: center; color: var(--accent); border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--control)); font-size: 17px; }
.flow-step-stack { justify-items: center; gap: 4px; text-align: center; }
.flow-step-stack span { width: 100%; padding: 7px 9px; border-radius: 8px; background: var(--control); font-size: 12px; }
.flow-step-stack i { color: var(--accent); font-style: normal; line-height: .8; }
.flow-step-split { align-content: start; gap: 8px; }
.flow-step-split span { padding: 9px 10px; border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--control); color: var(--muted); font-size: 12px; }
.flow-step-branch { align-content: start; }
.outcome-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.outcome-legend span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--control); color: var(--muted); font-size: 11px; font-weight: 600; }
.outcome-legend span[data-tone="success"] { color: var(--success-ink); border-color: var(--success-border); background: var(--success-bg); }
.outcome-legend span[data-tone="warning"] { color: var(--warning-ink); border-color: var(--warning-border); background: var(--warning-bg); }
.help-button-map, .help-callouts, .checklist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.help-button-map span, .help-callouts span, .checklist-grid span { padding: 12px 14px; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 12px; line-height: 1.45; }
.help-button-map b, .help-callouts b { color: var(--ink); font-weight: 600; }

@media (max-width: 1040px) {
  .flow-diagram { grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) auto minmax(180px, 1fr); overflow-x: auto; padding-bottom: 8px; }
  .flow-diagram-wide { grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) auto minmax(210px, 1.2fr) auto minmax(180px, 1fr); }
  .help-button-map, .help-callouts, .checklist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .help-flow-heading { align-items: flex-start; }
  .flow-diagram { grid-template-columns: minmax(210px, 78vw) auto minmax(210px, 78vw) auto minmax(210px, 78vw); scroll-snap-type: x proximity; }
  .flow-diagram-wide { grid-template-columns: minmax(210px, 78vw) auto minmax(210px, 78vw) auto minmax(230px, 82vw) auto minmax(210px, 78vw); }
  .flow-step { scroll-snap-align: start; }
  .help-button-map, .help-callouts, .checklist-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1050px) {
  .review-toolbar { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .review-toolbar .review-reject { grid-column: 1 / -1; }
  .launch-filter-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}
@media (max-width: 720px) {
  .review-toolbar { grid-template-columns: 1fr; }
  .review-toolbar .review-reject { grid-column: auto; }
  .testing-tools-panel { position: static; }
  .intake-description { align-items: stretch; flex-direction: column; }
  .cache-action { align-items: stretch; flex-direction: column; }
  .launch-filter-grid { grid-template-columns: 1fr; }
  .launch-start { align-items: stretch; flex-direction: column; }
}

/* Team access uses calm, scannable member cards instead of a wide settings row. */
.permissions-card { overflow: hidden; }
.permissions-heading { align-items: flex-end; }
.permissions-actions { display: flex; align-items: center; gap: 12px; }
.member-count { color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.member-list { gap: 14px; }
.member-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--subtle); box-shadow: inset 0 1px color-mix(in srgb, var(--white) 80%, transparent); }
.member-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 21px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--white) 74%, transparent); }
.member-identity { display: flex; min-width: 0; align-items: center; gap: 13px; }
.member-identity > div { min-width: 0; }
.member-identity strong, .member-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-identity strong { font-size: 15px; font-weight: 650; }
.member-identity small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.member-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; color: var(--accent-ink); border-radius: 14px; background: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: -.02em; box-shadow: inset 0 -2px rgba(0,0,0,.1); }
.member-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.member-role { padding: 7px 10px; color: var(--purple-ink); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 999px; background: var(--purple-soft); font-size: 11px; font-weight: 700; }
.member-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px; padding: 20px 21px 0; }
.member-access-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; padding: 20px 21px; }
.access-field { min-width: 0; }
.member-card-footer { display: flex; align-items: flex-end; justify-content: flex-end; gap: 12px; padding: 16px 21px 20px; border-top: 1px solid var(--line); background: var(--paper); }
.member-target { display: grid; grid-template-columns: minmax(155px, 190px) auto; align-items: end; gap: 4px 10px; margin-right: auto; }
.member-target label { grid-row: 1 / 3; }
.member-target small { align-self: start; color: var(--muted); font-size: 10px; }
.member-target button { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.member-admin-note { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 21px; }
.member-admin-note > div:first-child strong, .member-admin-note > div:first-child small { display: block; }
.member-admin-note > div:first-child strong { font-size: 14px; font-weight: 650; }
.member-admin-note > div:first-child small { max-width: 440px; margin-top: 5px; color: var(--muted); line-height: 1.4; }
.invitation-list { margin-top: 14px; }
.invitation-list > .field-title { margin-bottom: 0; }
.invitation-card { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(170px, auto) auto; align-items: center; gap: 14px; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 18px; background: var(--paper); }
.invitation-expiry { color: var(--muted); }

@media (max-width: 1100px) {
  .member-profile-grid, .member-access-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .member-card-footer { flex-wrap: wrap; }
  .invitation-card { grid-template-columns: minmax(220px, 1fr) auto; }
}
@media (max-width: 720px) {
  .permissions-heading, .member-card-head, .member-admin-note { align-items: stretch; flex-direction: column; }
  .permissions-actions { width: 100%; justify-content: space-between; }
  .member-statuses { justify-content: flex-start; }
  .member-profile-grid { grid-template-columns: 1fr; padding: 17px 17px 0; }
  .member-access-grid { grid-template-columns: 1fr; padding: 17px; }
  .member-card-footer { display: grid; grid-template-columns: 1fr; padding: 17px; }
  .member-target { grid-template-columns: 1fr; margin: 0; }
  .member-target label, .member-target button { grid-column: 1; grid-row: auto; }
  .member-target button, .member-card-footer > button { width: 100%; }
  .invitation-card { grid-template-columns: 1fr; }
}