:root {
  color: #18201d;
  background: #f5f6f0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #18201d;
  --muted: #6d756f;
  --line: #dde2db;
  --green: #174f42;
  --green-bright: #b9eecf;
  --cream: #f5f6f0;
  --panel: #fff;
  --yellow: #f6ce67;
  --violet: #7665c9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--cream); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 30px 22px 20px; border-right: 1px solid var(--line); background: rgba(250,251,247,.9); display: flex; flex-direction: column; z-index: 10; }
.brand, .mobile-brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 760; font-size: 19px; letter-spacing: -.02em; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; color: var(--green); flex: 0 0 auto; }
nav { margin-top: 52px; display: grid; gap: 7px; }
.nav-item { min-height: 44px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; gap: 12px; color: #737a75; font-size: 14px; font-weight: 580; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.nav-item:hover { color: var(--ink); background: #eef1eb; transform: translateX(2px); }
.nav-item.active { color: var(--green); background: #e3eee7; }
.nav-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:first-child svg { fill: currentColor; stroke: none; }
.nav-count { margin-left: auto; min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: rgba(23,79,66,.09); font-size: 11px; }
.sidebar-bottom { margin-top: auto; }
.launch-mini { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.launch-mini-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.launch-mini-top span { color: var(--muted); }
.launch-mini-top strong { color: var(--green); }
.progress-track { height: 5px; margin: 11px 0 8px; border-radius: 99px; overflow: hidden; background: #e6ebe6; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .45s cubic-bezier(.22,1,.36,1); }
.launch-mini p { margin: 0; color: #8a918c; font-size: 10px; }
.profile { width: 100%; margin-top: 16px; padding: 9px 6px; border: 0; background: transparent; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.profile > span:nth-child(2) { min-width: 0; }
.profile strong, .profile small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile strong { font-size: 12px; }
.profile small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.workspace { min-width: 0; }
.topbar { height: 76px; padding: 0 clamp(24px, 4vw, 56px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(245,246,240,.86); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 8; }
.mobile-brand { display: none; }
.project-switcher { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 650; cursor: default; }
.project-switcher svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.project-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--yellow); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { width: 38px; height: 38px; border: 0; border-radius: 11px; display: grid; place-items: center; background: transparent; cursor: pointer; position: relative; }
.icon-button:hover { background: #e9ece6; }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notification > span { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #e36d58; border: 1.5px solid var(--cream); }
.avatar-stack { display: flex; margin: 0 6px; }
.avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--cream); }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #28322e; font-size: 10px; font-weight: 760; }
.avatar-blue { background: #cfe1f6; }
.avatar-yellow { background: #f6dda1; }
.avatar-coral { background: #efc4b5; }
.avatar-mint { background: #bfe4d3; }
.avatar-violet { background: #dad1f4; }
.primary-button, .secondary-button { min-height: 40px; padding: 0 17px; border-radius: 11px; font-weight: 680; font-size: 13px; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.primary-button { border: 1px solid var(--green); background: var(--green); color: #fff; box-shadow: 0 5px 14px rgba(23,79,66,.15); }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; white-space: nowrap; }
.primary-button:hover { background: #103f35; transform: translateY(-1px); }
.primary-button svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.primary-button span { display: block; line-height: 1; }
.secondary-button { border: 1px solid var(--line); background: #fff; }
.secondary-button:hover { background: #f2f4ef; }

main { width: min(1300px, 100%); margin: 0 auto; padding: 48px clamp(24px, 4vw, 56px) 100px; }
.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 32px; }
.eyebrow { margin: 0 0 10px; color: #7b847d; font-size: 10px; line-height: 1; font-weight: 780; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(35px, 4vw, 53px); line-height: 1.04; letter-spacing: -.045em; font-weight: 650; }
.page-heading > div > p:last-child { margin: 11px 0 0; color: var(--muted); font-size: 15px; }
.range-picker { padding: 3px; border-radius: 10px; background: #e8ece6; display: flex; }
.range-picker button { min-width: 76px; height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #717974; font-size: 11px; font-weight: 670; cursor: pointer; }
.range-picker button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(34,44,39,.08); }

.metric-grid { display: grid; grid-template-columns: 1.06fr 1fr 1fr; gap: 16px; }
.metric-card { min-height: 176px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; }
.metric-featured { background: var(--green); border-color: var(--green); color: #fff; }
.metric-label, .metric-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.metric-label { color: #737c76; font-size: 12px; font-weight: 620; }
.metric-featured .metric-label { color: rgba(255,255,255,.68); }
.trend { padding: 4px 7px; border-radius: 99px; font-size: 9px; font-weight: 750; }
.trend.positive { color: #19754e; background: #e0f3e7; }
.metric-featured .trend.positive { color: #c8f6d7; background: rgba(255,255,255,.11); }
.metric-value { margin-top: 24px; line-height: 1; white-space: nowrap; }
.metric-value strong { font-size: clamp(36px, 4vw, 50px); letter-spacing: -.045em; font-weight: 650; }
.metric-value span { margin-left: 3px; color: #a3aaa5; font-size: 21px; }
.metric-featured .metric-value span { color: rgba(255,255,255,.58); }
.metric-card > p { margin: 14px 0 0; color: #8a918c; font-size: 10px; }
.metric-featured > p { color: rgba(255,255,255,.57); }
.metric-featured .progress-track { margin-top: 20px; background: rgba(255,255,255,.16); }
.metric-featured .progress-track span { background: var(--green-bright); }
.progress-track.large { height: 6px; }
.metric-row { align-items: flex-end; }
.sparkline { width: 43%; height: 48px; overflow: visible; }
.sparkline path { fill: none; stroke: #3a936e; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sparkline .fill { fill: rgba(58,147,110,.08); stroke: none; }
.sparkline.violet path { stroke: var(--violet); }
.sparkline.violet .fill { fill: rgba(118,101,201,.08); stroke: none; }

.content-grid { margin-top: 16px; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(330px,.86fr); gap: 16px; }
.panel, .activity-panel { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.panel { padding: 24px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
h2 { margin: 0; font-size: 21px; letter-spacing: -.025em; font-weight: 650; }
.text-button { padding: 5px 0; border: 0; background: transparent; color: var(--green); font-size: 11px; font-weight: 700; cursor: pointer; }
.text-button span { margin-left: 4px; }
.task-list { margin: 20px -24px -24px; }
.task { min-height: 67px; padding: 12px 24px; border-top: 1px solid #eaede8; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; cursor: pointer; transition: background .18s ease; }
.task:hover { background: #fafbf8; }
.task input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-ui { width: 21px; height: 21px; border: 1.5px solid #cbd1cb; border-radius: 7px; display: grid; place-items: center; transition: background .18s ease, border-color .18s ease; }
.checkbox-ui svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.task input:checked + .checkbox-ui { background: var(--green); border-color: var(--green); }
.task input:checked + .checkbox-ui svg { opacity: 1; }
.task-copy { min-width: 0; }
.task-copy strong, .task-copy small { display: block; }
.task-copy strong { font-size: 12px; font-weight: 640; }
.task-copy small { margin-top: 5px; color: #929993; font-size: 10px; }
.task.completed .task-copy strong { text-decoration: line-through; color: #929993; }
.task .avatar { width: 28px; height: 28px; font-size: 9px; }
.live-badge { padding: 5px 8px; border-radius: 99px; background: #edf5ef; color: #45715e; font-size: 9px; font-weight: 700; }
.live-badge i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #42a675; }
.score-block { margin-top: 25px; display: flex; align-items: center; gap: 16px; }
.score strong { font-size: 43px; letter-spacing: -.05em; font-weight: 650; }
.score span { color: #929993; font-size: 12px; }
.stars { color: #e8ad35; font-size: 13px; letter-spacing: 2px; }
.score-block p { margin: 5px 0 0; color: #959b97; font-size: 9px; }
.feedback-bars { margin-top: 24px; display: grid; gap: 12px; }
.feedback-bars > div { display: grid; grid-template-columns: 96px 1fr 30px; gap: 10px; align-items: center; font-size: 9px; }
.feedback-bars i { height: 5px; border-radius: 99px; background: #edf0eb; overflow: hidden; }
.feedback-bars b { display: block; height: 100%; border-radius: inherit; background: #7fb69a; }
.feedback-bars strong { color: #737b76; font-size: 9px; }
blockquote { margin: 24px 0 14px; padding-top: 20px; border-top: 1px solid #eaede8; font-family: Georgia, serif; font-size: 15px; line-height: 1.45; color: #46504b; }
.quote-author { display: flex; align-items: center; gap: 10px; }
.quote-author strong, .quote-author small { display: block; }
.quote-author strong { font-size: 10px; }
.quote-author small { margin-top: 3px; color: #999f9a; font-size: 9px; }
.quote-author .avatar { width: 29px; height: 29px; font-size: 8px; }

.activity-panel { margin-top: 16px; padding: 22px 24px 8px; }
.activity-list { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #eaede8; }
.activity-list > div { min-width: 0; padding: 20px 18px 18px 0; display: flex; gap: 11px; align-items: flex-start; }
.activity-list > div + div { padding-left: 18px; border-left: 1px solid #eaede8; }
.activity-icon { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; }
.activity-icon.green { background: #e2f2e8; color: #317c5b; }
.activity-icon.yellow { background: #fbf0d1; color: #a97b1c; }
.activity-icon.violet { background: #ebe6fa; color: #7160bf; }
.activity-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.activity-list p { margin: 0; min-width: 0; font-size: 10px; line-height: 1.4; }
.activity-list p small { display: block; margin-top: 5px; color: #989f99; font-size: 9px; }

.aidrop-chip { position: fixed; right: 20px; bottom: 18px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(23,79,66,.18); border-radius: 999px; background: rgba(255,255,255,.92); color: var(--green); box-shadow: 0 8px 30px rgba(31,51,43,.14); backdrop-filter: blur(10px); font-size: 11px; font-weight: 720; cursor: pointer; z-index: 20; }
.aidrop-chip > span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #35aa72; box-shadow: 0 0 0 4px rgba(53,170,114,.12); }
.aidrop-chip b { margin-left: 5px; font-size: 12px; }
.backdrop { position: fixed; inset: 0; background: rgba(16,25,21,.35); backdrop-filter: blur(2px); z-index: 30; opacity: 0; transition: opacity .25s ease; }
.backdrop.visible { opacity: 1; }
.proof-drawer { position: fixed; top: 0; right: 0; width: min(440px, 100%); height: 100vh; padding: 46px 38px; background: #fff; box-shadow: -24px 0 70px rgba(17,33,26,.16); z-index: 40; transform: translateX(105%); transition: transform .32s cubic-bezier(.22,1,.36,1); overflow-y: auto; }
.proof-drawer.open { transform: translateX(0); }
.proof-drawer h2 { max-width: 310px; font-size: 36px; line-height: 1.05; letter-spacing: -.04em; }
.proof-intro { margin: 18px 0 30px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.close-button { position: absolute; top: 22px; right: 22px; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 23px; line-height: 1; cursor: pointer; }
.proof-drawer dl { margin: 0 0 26px; }
.proof-drawer dl div { padding: 13px 0; border-bottom: 1px solid #e8ebe7; }
.proof-drawer dt { margin-bottom: 5px; color: #8a928c; font-size: 10px; }
.proof-drawer dd { margin: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 640; }
.ok { color: #26895d; }
.proof-cta { margin-top: 30px; min-height: 58px; padding: 0 18px; border-radius: 13px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; text-decoration: none; }

.modal { position: fixed; inset: 0; padding: 20px; background: rgba(16,25,21,.36); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 50; }
.modal-card { width: min(460px, 100%); padding: 32px; border-radius: 20px; background: #fff; box-shadow: 0 30px 90px rgba(17,33,26,.2); position: relative; }
.modal-card h2 { font-size: 29px; }
.modal-card form { margin-top: 25px; }
.modal-card label { display: block; margin-bottom: 8px; color: #59625c; font-size: 11px; font-weight: 650; }
.modal-card input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #cfd5cf; border-radius: 11px; outline: none; }
.modal-card input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,79,66,.09); }
.modal-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 9px; }
.toast { position: fixed; left: 50%; bottom: 22px; padding: 12px 17px; border-radius: 10px; background: #172c25; color: #fff; box-shadow: 0 12px 35px rgba(20,40,32,.2); font-size: 11px; font-weight: 650; z-index: 70; transform: translate(-50%, 120px); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
[hidden] { display: none !important; }

@media (max-width: 1020px) {
  .app-shell { grid-template-columns: 82px 1fr; }
  .sidebar { padding-inline: 15px; align-items: center; }
  .brand > span { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  nav { width: 100%; }
  .nav-item { justify-content: center; padding: 0; font-size: 0; }
  .nav-item svg { width: 21px; height: 21px; }
  .nav-count { display: none; }
  .launch-mini, .profile > span:not(.avatar) { display: none; }
  .profile { display: flex; justify-content: center; padding: 0; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-featured { grid-column: 1 / -1; }
  .content-grid { grid-template-columns: 1fr; }
  .activity-list { grid-template-columns: 1fr; }
  .activity-list > div + div { padding-left: 0; border-left: 0; border-top: 1px solid #eaede8; }
}

@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .topbar { height: 66px; padding: 0 16px; }
  .mobile-brand { display: inline-flex; font-size: 15px; }
  .mobile-brand .brand-mark { width: 30px; height: 30px; }
  .project-switcher, .icon-button:first-child, .avatar-stack { display: none; }
  .top-actions { margin-left: auto; }
  .top-actions .primary-button { padding: 0 12px; font-size: 11px; }
  main { padding: 34px 16px 92px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 25px; }
  h1 { font-size: 38px; }
  .range-picker { width: 100%; }
  .range-picker button { flex: 1; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-featured { grid-column: auto; }
  .metric-card { min-height: 160px; }
  .panel { padding: 20px; }
  .task-list { margin: 18px -20px -20px; }
  .task { padding-inline: 20px; }
  .activity-panel { padding: 20px 20px 6px; }
  .aidrop-chip { right: 12px; bottom: 12px; }
  .proof-drawer { padding: 60px 24px 32px; }
  .proof-drawer h2 { font-size: 31px; }
}

@media (max-width: 420px) {
  .mobile-brand strong { display: none; }
  .notification { display: none; }
  .page-heading > div > p:last-child { max-width: 300px; line-height: 1.5; }
  .metric-value strong { font-size: 42px; }
  .feedback-bars > div { grid-template-columns: 86px 1fr 29px; }
  .task-copy strong { font-size: 11px; }
  .task .avatar { display: none; }
  .task { grid-template-columns: auto 1fr; }
  .panel-heading .text-button { display: none; }
}

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