:root{--bg:#f5f7fb;--panel:#fff;--ink:#172033;--muted:#667085;--line:#d8dee9;--teal:#0f9f9a;--green:#22a85a;--blue:#2563eb;--orange:#f97316;--red:#e5484d;--shadow:0 18px 44px #10182817}*{box-sizing:border-box}body{background:linear-gradient(180deg, #0f9f9a14, transparent 330px), var(--bg);min-height:100vh;color:var(--ink);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.app-shell{width:min(1480px,100%);margin:0 auto;padding:18px}.topbar,.brand,.top-actions,.nav,.panel-heading,.tracker-heading{align-items:center;display:flex}.topbar{justify-content:space-between;gap:16px;margin-bottom:14px}.brand{gap:12px}.logo{color:#fff;background:linear-gradient(135deg, var(--teal), var(--blue));width:52px;height:52px;box-shadow:var(--shadow);border-radius:8px;place-items:center;display:grid}.brand p,.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:0;margin:0;font-size:12px;font-weight:800}.brand h1{letter-spacing:0;margin:1px 0 0;font-size:30px;line-height:1}.top-actions{gap:8px}.icon-action,.delete-button,.tracker-heading button{border:1px solid var(--line);color:#344054;background:#fff;border-radius:8px;place-items:center;width:40px;height:40px;display:grid}.nav{flex-wrap:wrap;gap:8px;margin-bottom:16px}.nav button,.panel-heading button,.primary-button{border:1px solid var(--line);color:#344054;background:#fff;border-radius:8px;align-items:center;gap:8px;padding:10px 13px;font-weight:800;display:inline-flex}.nav button.active,.primary-button{color:#fff;background:var(--blue);border-color:#0000}.hero-panel,.panel,.stat,.quick-add{background:var(--panel);box-shadow:var(--shadow);border:1px solid #d8dee9e6;border-radius:8px}.hero-panel{grid-template-columns:1fr 178px;align-items:center;gap:24px;min-height:188px;margin-bottom:16px;padding:24px;display:grid}.hero-panel h2{letter-spacing:0;margin:6px 0;font-size:clamp(34px,5vw,58px);line-height:.95}.hero-panel p{max-width:760px;color:var(--muted);margin:0;line-height:1.55}.hero-ring,.donut{border-radius:50%;place-items:center;display:grid}.hero-ring{background:conic-gradient(var(--teal) var(--progress), #edf1f7 0);width:162px;height:162px}.hero-ring:before,.donut:before{content:"";position:absolute}.hero-ring{position:relative}.hero-ring>*{z-index:1;position:relative}.hero-ring:before{background:#fff;border-radius:50%;inset:18px}.hero-ring strong,.hero-ring span{text-align:center;display:block}.hero-ring strong{font-size:31px;line-height:1}.hero-ring span{color:var(--muted);font-size:12px;font-weight:800}.stats-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;display:grid}.stat{gap:8px;padding:16px;display:grid}.stat svg{color:var(--teal)}.stat span{color:var(--muted);text-transform:uppercase;font-size:12px;font-weight:800}.stat strong{font-size:25px;line-height:1.05}.overview-grid{grid-template-columns:1.1fr 1fr .9fr;gap:16px;display:grid}.panel{min-width:0;padding:16px}.panel-heading{justify-content:space-between;gap:12px;margin-bottom:14px}.panel-heading h2,.quick-add h2{letter-spacing:0;margin:0;font-size:20px}.panel-heading button{padding:8px 10px;font-size:13px}.donut-layout{grid-template-columns:210px 1fr;align-items:center;gap:18px;display:grid}.donut{width:204px;height:204px;position:relative}.donut:before{background:#fff;border-radius:50%;inset:31px}.donut div{z-index:1;text-align:center;position:relative}.donut strong{font-size:22px;display:block}.donut span{color:var(--muted);font-size:12px;font-weight:800}.legend,.compact-list,.bar-chart,.page-stack{gap:10px;display:grid}.legend div{color:#344054;grid-template-columns:12px 1fr auto;align-items:center;gap:8px;display:grid}.legend i{border-radius:4px;width:12px;height:12px}.bar-row{grid-template-columns:82px 1fr 110px;align-items:center;gap:10px;font-size:13px;font-weight:800;display:grid}.bar-row div{background:#edf1f7;border-radius:999px;height:15px;overflow:hidden}.bar-row i{border-radius:999px;height:100%;display:block}.compact-list article{border:1px solid #edf1f7;border-left:4px solid var(--teal);border-radius:8px;gap:3px;padding:11px;display:grid}.compact-list span,.focus-card p,.empty-text,.table-note,.tracker-card p{color:var(--muted)}.focus-card{background:#fbfcff;border:1px solid #edf1f7;border-radius:8px;min-height:132px;padding:14px}.focus-card strong{color:var(--blue);font-size:38px}.focus-card h3{margin:8px 0 4px}.quick-add{padding:16px}.quick-add h2{align-items:center;gap:8px;margin-bottom:14px;display:flex}.quick-fields{grid-template-columns:repeat(5,minmax(130px,1fr));gap:10px;margin-bottom:12px;display:grid}label{color:#344054;gap:6px;font-size:12px;font-weight:800;display:grid}input,select{width:100%;color:var(--ink);background:#fff;border:1px solid #cfd6e2;border-radius:8px;min-height:40px;padding:10px}input:focus,select:focus{border-color:var(--teal);outline:3px solid #0f9f9a29}.three-column{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:720px;font-size:13px}th{text-align:left;color:#475467;background:#f2f5f9;padding:9px}td{border-bottom:1px solid #edf1f7;padding:7px}td input{background:0 0;border-color:#0000}td input:focus{background:#fff}.card-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.tracker-card{background:#fbfcff;border:1px solid #edf1f7;border-radius:8px;padding:14px}.tracker-heading{gap:8px;margin-bottom:12px}.tracker-heading svg{color:var(--teal)}.tracker-heading input{background:0 0;border-color:#0000;font-size:18px;font-weight:900}.tracker-values{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.progress-line{background:#edf1f7;border-radius:999px;height:14px;margin-bottom:12px;overflow:hidden}.progress-line span{background:linear-gradient(90deg, var(--green), var(--teal));border-radius:999px;height:100%;display:block}.empty-text{border:1px dashed var(--line);background:#fbfcff;border-radius:8px;margin:0;padding:14px}@media (width<=1120px){.overview-grid,.three-column,.card-grid{grid-template-columns:1fr}.quick-fields{grid-template-columns:repeat(2,minmax(150px,1fr))}}@media (width<=760px){.app-shell{padding:12px}.topbar,.hero-panel{grid-template-columns:1fr;align-items:start}.topbar{display:grid}.brand h1{font-size:24px}.hero-panel{padding:18px}.hero-panel h2{font-size:36px}.stats-grid,.quick-fields,.donut-layout,.tracker-values{grid-template-columns:1fr}.bar-row{grid-template-columns:72px 1fr}.bar-row strong{grid-column:2}}
