:root {
  --ink: #18162b;
  --muted: #716d82;
  --line: #e9e6f0;
  --canvas: #f8f8fb;
  --surface: #ffffff;
  --purple: #6f4af2;
  --purple-deep: #5532ce;
  --purple-soft: #eee9ff;
  --mint: #e6f8ef;
  --danger: #a93446;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { min-height: 100dvh; margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
[hidden] { display: none !important; }

.product-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 850; letter-spacing: -.035em; }
.pulse-mark { display: inline-flex; align-items: center; gap: 3px; }
.pulse-mark i { display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--purple); }
.pulse-mark i:nth-child(2) { width: 18px; }
.pulse-mark i:nth-child(3) { width: 5px; opacity: .45; }
.eyebrow, .card-kicker { margin: 0 0 7px; color: var(--purple); font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }

.leader-topbar { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 72px; padding: 0 max(24px, calc((100% - 1160px) / 2)); border-bottom: 1px solid #eceaf1; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.leader-nav { display: flex; align-items: center; gap: 5px; padding: 4px; border-radius: 12px; background: #f3f1f7; }
.leader-nav a { padding: 8px 15px; border-radius: 9px; color: #777282; text-decoration: none; font-size: 13px; font-weight: 750; }
.leader-nav a.is-active { color: var(--ink); background: white; box-shadow: 0 2px 7px rgba(36,27,67,.08); }
.profile-link { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px; color: var(--ink); background: #f3f1f7; text-decoration: none; font-size: 12px; }
.profile-link > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: white; background: #26213a; font-size: 10px; font-weight: 850; }

.leader-page { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 72px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-heading h1 { margin: 0; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.055em; }
.page-heading > div > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #eadfc9; border-radius: 999px; color: #8a611f; background: #fff8e9; font-size: 12px; font-weight: 750; }
.status-badge i { width: 7px; height: 7px; border-radius: 50%; background: #d59429; box-shadow: 0 0 0 4px rgba(213,148,41,.1); }
.status-badge.is-ready { border-color: #d3edde; color: #24704f; background: #f0fbf6; }
.status-badge.is-ready i { background: #2bb477; box-shadow: 0 0 0 4px rgba(43,180,119,.1); }

.surface-card { border: 1px solid #eceaf1; border-radius: 22px; background: white; box-shadow: 0 8px 30px rgba(37,29,63,.05); }
.surface-card h2, .attention-card h2 { margin: 0; font-size: 21px; letter-spacing: -.025em; }
.surface-card p:not(.card-kicker), .attention-card p:not(.card-kicker) { color: var(--muted); font-size: 13px; line-height: 1.55; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.muted-label { color: var(--muted); font-size: 11px; }

.waiting-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 28px; }
.waiting-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: var(--purple-deep); background: var(--purple-soft); font-size: 22px; font-weight: 900; }
.waiting-card p { margin: 7px 0 0; }
.attention-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; margin-bottom: 18px; padding: 22px 24px; border: 1px solid #edddcb; border-radius: 20px; background: linear-gradient(115deg, #fff8ef, #fffdf9); box-shadow: 0 8px 24px rgba(84,58,27,.05); }
.attention-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #995a15; background: #ffe8c8; font-size: 20px; font-weight: 900; }
.attention-card p { margin: 5px 0 0; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr); gap: 18px; margin-bottom: 18px; }
.score-card, .prompt-card, .domains-card, .reasons-card, .add-member-card, .member-list-card { padding: 24px; }
.score-pill { padding: 8px 11px; border-radius: 12px; color: var(--purple-deep); background: var(--purple-soft); font-size: 18px; font-weight: 850; }
.score-pill small { font-size: 10px; }
.participation-row { display: flex; align-items: center; gap: 14px; margin: 28px 0 20px; }
.participation-row > div { display: flex; flex-direction: column; }
.participation-row strong { font-size: 34px; line-height: 1; letter-spacing: -.05em; }
.participation-row span:not(.percentage-pill) { margin-top: 5px; color: var(--muted); font-size: 11px; }
.percentage-pill { margin-left: auto; padding: 9px 12px; border-radius: 999px; color: #24704f; background: var(--mint); font-size: 12px; font-weight: 850; }
.trend-list { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 8px; min-height: 112px; padding-top: 14px; border-top: 1px solid #f0eef4; }
.trend-list div { display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 6px; height: 100%; text-align: center; }
.trend-list progress { width: 100%; height: 78px; writing-mode: vertical-lr; direction: rtl; border: 0; border-radius: 7px; overflow: hidden; accent-color: var(--purple); }
.trend-list small { color: #9994a3; font-size: 9px; }
.prompt-card { display: flex; flex-direction: column; color: white; background: linear-gradient(145deg, #29243f, #181526); }
.prompt-card .card-kicker { color: #bdaeff; }
.prompt-card blockquote { margin: 20px 0; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.06); font-size: 15px; font-weight: 650; line-height: 1.55; }
.positive-note { margin-top: auto; color: #c8c3d2 !important; }
.positive-note strong { color: #8ee0b7; }

.domains-card, .reasons-card { margin-bottom: 18px; }
.domain-list { margin-top: 20px; }
.domain-row { display: grid; grid-template-columns: 170px minmax(140px, 1fr) 42px 54px; align-items: center; gap: 16px; min-height: 54px; border-top: 1px solid #f1eff4; }
.domain-row strong { font-size: 13px; }
.domain-row progress { width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; accent-color: var(--purple); }
.domain-row > span { font-size: 13px; font-weight: 850; }
.domain-row small { font-size: 11px; font-weight: 800; text-align: right; }
.domain-row small.is-up { color: #25845a; }
.domain-row small.is-down { color: #b66a13; }
.reason-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.reason-summary span { padding: 9px 11px; border-radius: 999px; color: #625d70; background: #f5f3f8; font-size: 12px; }
.reason-summary strong { color: var(--purple-deep); }
.privacy-footnote { margin: 20px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

.primary-button, .secondary-button { display: inline-flex; min-height: 46px; padding: 0 17px; align-items: center; justify-content: center; border-radius: 13px; cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 800; }
.primary-button { border: 0; color: white; background: linear-gradient(135deg, var(--purple), var(--purple-deep)); box-shadow: 0 10px 24px rgba(92,54,211,.18); }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: white; }
.primary-button:disabled, .secondary-button:disabled { opacity: .45; cursor: wait; }

.team-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.5fr); gap: 18px; align-items: start; }
.member-form { display: grid; gap: 9px; margin-top: 20px; }
.member-form label, .auth-card label, .invite-dialog label { font-size: 12px; font-weight: 800; }
.member-form label span { color: var(--muted); font-size: 10px; font-weight: 600; }
input, select { width: 100%; min-height: 47px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fbfafd; }
input:focus, select:focus { outline: 3px solid rgba(111,74,242,.13); border-color: #b8a5fb; }
.member-form .primary-button { margin-top: 7px; }
.team-feedback { margin: 13px 0 0 !important; padding: 10px 12px; border-radius: 11px; font-weight: 700; }
.team-feedback.is-success { color: #176d4a; background: var(--mint); }
.team-feedback.is-error { color: var(--danger); background: #feecef; }
.member-list { margin-top: 14px; }
.member-row { display: grid; grid-template-columns: 38px minmax(130px, 1fr) auto auto; align-items: center; gap: 12px; min-height: 70px; border-top: 1px solid #f0eef3; }
.member-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--purple-deep); background: var(--purple-soft); font-size: 11px; font-weight: 850; }
.member-identity { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.member-identity strong { font-size: 13px; }
.member-identity small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.member-state { padding: 6px 8px; border-radius: 999px; color: #8b6e43; background: #fff4df; font-size: 10px; font-weight: 800; }
.member-state.is-done { color: #24704f; background: #e8f8f0; }
.member-actions { display: flex; gap: 5px; }
.member-actions button { padding: 7px 8px; border: 0; border-radius: 8px; color: var(--purple-deep); background: #f3efff; cursor: pointer; font-size: 10px; font-weight: 800; }
.member-actions .danger-link { color: var(--danger); background: #fff0f2; }
.empty-state { padding: 20px 0; color: var(--muted); text-align: center; }

.invite-dialog { width: min(520px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 22px; color: var(--ink); box-shadow: 0 28px 90px rgba(22,17,42,.24); }
.invite-dialog::backdrop { background: rgba(24,20,43,.45); backdrop-filter: blur(3px); }
.dialog-body { padding: 28px; }
.dialog-body > p:not(.card-kicker) { color: var(--muted); line-height: 1.55; }
.dialog-actions { display: flex; gap: 9px; margin-top: 17px; }

.auth-body { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 10%, rgba(111,74,242,.11), transparent 28rem), var(--canvas); }
.auth-shell { width: min(460px, 100%); }
.auth-brand { margin: 0 0 18px 4px; }
.auth-card { padding: clamp(27px, 5vw, 40px); border: 1px solid #e8e4ef; border-radius: 26px; background: white; box-shadow: 0 24px 70px rgba(43,30,87,.1); }
.auth-card h1 { margin: 0; font-size: clamp(31px, 7vw, 42px); line-height: 1.05; letter-spacing: -.05em; }
.auth-card > p:not(.eyebrow):not(.form-error) { margin: 14px 0 24px; color: var(--muted); line-height: 1.55; }
.auth-card form { display: grid; gap: 9px; }
.auth-card .primary-button { margin-top: 9px; }
.form-error { margin: 8px 0 !important; padding: 10px 12px; border-radius: 10px; color: var(--danger) !important; background: #feecef; font-size: 12px; font-weight: 750; }
.notice-success { display: flex; flex-direction: column; gap: 5px; padding: 14px; border-radius: 13px; color: #176d4a; background: var(--mint); font-size: 13px; }
.notice-success span { line-height: 1.45; }
.setup-shell { width: min(720px, 100%); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0; }
.form-grid > div { display: grid; gap: 7px; }

@media (max-width: 820px) {
  .leader-topbar { grid-template-columns: 1fr auto; min-height: 66px; padding: 0 16px; }
  .leader-nav { position: fixed; z-index: 30; right: 14px; bottom: 14px; left: 14px; justify-content: center; box-shadow: 0 9px 26px rgba(29,23,49,.17); }
  .leader-nav a { flex: 1; text-align: center; }
  .profile-link strong { display: none; }
  .profile-link { padding-right: 5px; }
  .leader-page { width: min(100% - 24px, 660px); padding: 34px 0 100px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-grid, .team-grid { grid-template-columns: 1fr; }
  .waiting-card { grid-template-columns: auto 1fr; }
  .waiting-card .secondary-button { grid-column: 1 / -1; }
  .domain-row { grid-template-columns: 120px 1fr 38px; gap: 10px; }
  .domain-row small { display: none; }
}

@media (max-width: 560px) {
  .leader-topbar .product-mark { font-size: 16px; }
  .score-card, .prompt-card, .domains-card, .reasons-card, .add-member-card, .member-list-card { padding: 20px 17px; }
  .member-row { grid-template-columns: 34px 1fr auto; padding: 10px 0; }
  .member-actions { grid-column: 2 / -1; }
  .member-actions button { flex: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .dialog-actions { flex-direction: column; }
  .dialog-actions button { width: 100%; }
}

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