@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{--ink:#1b302e;--muted:#87958e;--line:#e6ebe4;--lime:#d7f47b;--nav:#172b2a;--bg:#f5f7f1}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:DM Sans,sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}a{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:-.045em;font-family:Manrope,sans-serif}h1{font-size:38px;font-weight:700;line-height:1.15}h1 span{color:#b3d950}h2{font-size:22px}h3{font-size:19px}.shell{min-height:100vh;display:flex}.sidebar{background:var(--nav);color:#fff;flex-direction:column;flex:none;width:236px;padding:34px 20px 24px;display:flex;position:fixed;inset:0 auto 0 0}.brand{align-items:center;gap:11px;padding:0 8px;display:flex}.brand-mark{color:#243c30;background:var(--lime);border-radius:12px;place-items:center;width:38px;height:38px;display:grid}.brand b{letter-spacing:-.06em;font-family:Manrope;font-size:21px;line-height:1;display:block}.brand b span{color:var(--lime)}.brand small{letter-spacing:.17em;color:#a5b4a8;font-size:8px;font-weight:700}.nav-label{letter-spacing:.15em;color:#6f8780;margin:54px 11px 17px;font-size:9px;font-weight:700}nav{gap:6px;display:grid}nav button{color:#acbdb4;text-align:left;background:0 0;border:0;border-radius:10px;align-items:center;gap:12px;padding:13px 12px;font-weight:600;display:flex}nav button.active{color:#e7f6c1;background:#304541}nav button.active svg:first-child{color:var(--lime)}.nav-arrow{opacity:0;margin-left:auto}nav button.active .nav-arrow{opacity:1}.sidebar-bottom{border-top:1px solid #354b45;margin-top:auto;padding:22px 7px 0}.side-status{align-items:flex-start;gap:9px;display:flex}.status-dot{background:#b9c4b9;border-radius:50%;flex:none;width:7px;height:7px;display:inline-block}.status-dot.on{background:#a9dc57}.side-status .status-dot{margin-top:5px}.side-status b,.side-status small{display:block}.side-status b{font-size:12px}.side-status small{color:#81978c;margin-top:4px;font-size:11px}.side-link{color:#d9edac;background:0 0;border:0;align-items:center;gap:8px;padding:19px 0 0;font-size:11px;display:flex}.main{width:calc(100% - 236px);margin-left:236px}.topbar{border-bottom:1px solid #e6ebe3;justify-content:space-between;align-items:center;height:75px;padding:0 4.5%;display:flex}.breadcrumb,.eyebrow{letter-spacing:.14em;color:#97a79c;font-size:10px;font-weight:700}.breadcrumb span{color:#c9d2c9;margin:0 10px}.top-actions{align-items:center;gap:18px;display:flex}.connection{color:#7d8d82;align-items:center;gap:7px;font-size:11px;font-weight:700;display:flex}.icon-button{color:#60736a;background:#fff;border:1px solid #e1e8df;border-radius:10px;place-items:center;width:36px;height:36px;display:grid}.content{max-width:1600px;margin:auto;padding:39px 4.5% 50px}.content.narrow{max-width:1250px}.page-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px;display:flex}.page-heading p{color:#8a9990;margin-top:10px;font-size:14px}.eyebrow{color:#8fa195;font-size:9px}.page-heading .eyebrow{color:#7e9283;margin-bottom:12px}.page-heading .eyebrow span{vertical-align:middle;background:#b5d955;width:20px;height:2px;margin-right:8px;display:inline-block}.outline-button,.primary-button{white-space:nowrap;border-radius:9px;justify-content:center;align-items:center;gap:10px;padding:11px 15px;font-size:12px;font-weight:700;display:inline-flex}.outline-button{color:#52675c;background:#fff;border:1px solid #dfe7dc}.primary-button{background:var(--lime);color:#233a2b;border:1px solid #cbe875}.dashboard-grid{grid-template-columns:minmax(0,1fr) 280px;gap:22px;display:grid}.primary-column,.right-column{min-width:0}.card{background:#fff;border:1px solid #e8ede6;border-radius:17px;box-shadow:0 5px 20px #203a2b06}.hero{background:linear-gradient(125deg,#f4f9ef,#e7f1e4 65%,#edf5e7);min-height:350px;position:relative;overflow:hidden}.hero-top{z-index:1;justify-content:space-between;padding:25px 28px 0;display:flex;position:relative}.hero-top h2{margin-top:8px;font-size:24px}.hero-top p{color:#879b8b;margin-top:5px;font-size:12px}.hero-tag{color:#738679;background:#ffffffad;border:1px solid #fff;border-radius:20px;align-items:center;gap:7px;height:28px;padding:0 10px;font-size:10px;font-weight:700;display:flex}.car-wrap{justify-content:center;align-items:center;height:200px;display:flex;position:relative}.car-wrap img{object-fit:contain;z-index:1;width:min(85%,650px);height:100%;position:relative}.car-glow{filter:blur(55px);background:#d2e9c8;border-radius:50%;width:46%;height:120px;position:absolute}.hero-bottom{background:#ffffffa8;border-top:1px solid #fff;align-items:center;gap:55px;padding:15px 28px;display:flex}.hero-bottom span,.metric>span{letter-spacing:.12em;color:#99a99d;margin-bottom:7px;font-size:9px;font-weight:700;display:block}.hero-bottom b,.select-wrap select{color:#40564b;font-size:12px}.hero-bottom .round-arrow{margin-left:auto}.round-arrow{color:#46624b;background:#fff;border:1px solid #dbe5d7;border-radius:50%;place-items:center;width:34px;height:34px;display:grid}.select-wrap{align-items:center;display:flex;position:relative}.select-wrap select{appearance:none;background:0 0;border:0;max-width:190px;padding-right:20px;font-weight:700}.select-wrap svg{pointer-events:none;position:absolute;right:0}.section-heading{justify-content:space-between;align-items:end;margin:33px 0 15px;display:flex}.section-heading h2{margin-top:6px;font-size:19px}.section-heading>span{color:#a4b0a7;font-size:11px}.metric-grid{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.metric{min-height:157px;padding:18px 19px}.metric-top{color:#c4cfc5;justify-content:space-between;align-items:start;margin-bottom:17px;display:flex}.metric-icon{color:#708476;background:#f3f6f0;border-radius:11px;flex:none;place-items:center;width:37px;height:37px;display:grid}.metric-icon.green{color:#7ca642;background:#ecf7d9}.metric-icon.blue{color:#739b93;background:#e9f2ef}.metric-icon.peach{color:#c99778;background:#faf0e8}.metric strong{letter-spacing:-.05em;font-family:Manrope;font-size:26px;line-height:1.1;display:block}.metric small,.control-row small{color:#a1ada4;margin-top:6px;font-size:11px;display:block}.progress{background:#edf2e9;border-radius:4px;height:4px;margin-top:14px}.progress i{background:#b8d96d;border-radius:4px;height:100%;display:block}.control-card{padding:2px 20px}.control-row{border-bottom:1px solid #eff2ec;align-items:center;gap:13px;padding:14px 0;display:flex}.control-row:last-of-type{border:0}.control-icon{color:#77917e;background:#f4f7f1;border-radius:10px;place-items:center;width:39px;height:39px;display:grid}.control-row b{font-size:12px}.control-buttons{gap:6px;margin-left:auto;display:flex}.control-buttons button,.control-buttons input{color:#52695b;background:#fff;border:1px solid #e3ebe1;border-radius:7px;padding:8px 10px;font-size:11px;font-weight:700}.control-buttons input{width:58px}.control-note{color:#91a096;flex-wrap:wrap;align-items:center;gap:7px;padding:12px 0 17px;font-size:11px;line-height:1.5;display:flex}.control-note button{color:#648a4e;background:0 0;border:0;padding:0;font-weight:700}.welcome{background:#dff0c7;border:0;min-height:250px;padding:22px;position:relative;overflow:hidden}.welcome:after{content:"";border:1px solid #c4ddac;border-radius:50%;width:175px;height:175px;position:absolute;bottom:-75px;right:-70px;box-shadow:0 0 0 28px #d6eac0,0 0 0 29px #c9e1b3}.welcome-icon{color:#3b5b35;background:#bddf88;border-radius:10px;place-items:center;width:35px;height:35px;margin-bottom:24px;display:grid}.welcome .eyebrow{color:#839f76}.welcome h3{margin:9px 0;font-size:21px;line-height:1.23}.welcome p{color:#7d9876;max-width:185px;font-size:12px;line-height:1.6}.welcome-line{letter-spacing:.13em;color:#8aa47d;margin-top:24px;font-size:8px;font-weight:700}.welcome-line span{vertical-align:middle;background:#a3c987;width:22px;height:2px;margin-right:6px;display:inline-block}.activity{min-height:264px;margin-top:16px;padding:21px}.panel-title{justify-content:space-between;align-items:center;display:flex}.panel-title h3{margin-top:6px;font-size:18px}.empty{text-align:center;padding:37px 10px 15px}.empty>span{color:#b0beb1;background:#f5f8f2;border-radius:50%;place-items:center;width:45px;height:45px;margin:0 auto 13px;display:grid}.empty b{font-size:12px}.empty p{color:#a2afa5;max-width:160px;margin:7px auto;font-size:11px;line-height:1.6}.event{border-bottom:1px solid #f0f3ee;gap:10px;padding:13px 0;display:flex}.event-dot{background:#c5e78a;border-radius:50%;flex:none;width:8px;height:8px;margin-top:4px}.event b,.event small{font-size:11px;display:block}.event small{color:#9aa89d;margin-top:5px}.help-card{color:#839987;justify-content:space-between;gap:12px;padding:21px 4px;display:flex}.help-card b{color:#425b4c;font-size:12px}.help-card p{margin:6px 0 10px;font-size:11px;line-height:1.6}.help-card button,.text-link{color:#648d4d;background:0 0;border:0;align-items:center;gap:6px;padding:0;font-size:12px;font-weight:700;text-decoration:none;display:inline-flex}.help-card>svg{color:#b6c6b4}.notice{color:#405e43;background:#ecf6dd;border:1px solid #d7e8c4;border-radius:10px;justify-content:space-between;gap:10px;margin:15px 4.5% 0;padding:12px 15px;display:flex}.notice button{color:inherit;background:0 0;border:0}.setup-intro{gap:16px;margin-bottom:17px;padding:22px;display:flex}.setup-intro h3{font-size:16px}.setup-intro p,.step-content>p{color:#89998e;margin-top:7px;font-size:13px;line-height:1.7}.steps{gap:15px;display:grid}.form-card{gap:20px;padding:25px;display:flex}.step-number{color:#b5cd9d;font-family:Manrope;font-size:17px;font-weight:800}.step-content{flex:1;min-width:0}.step-content h2{font-size:19px}.step-content>.text-link{margin-top:14px}.step-content label{color:#809287;letter-spacing:.07em;margin-top:18px;font-size:10px;font-weight:700;display:block}.copy-field{background:#f5f8f3;border:1px solid #e7ede5;border-radius:8px;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;display:flex}.copy-field code{overflow-wrap:anywhere;color:#516c5c;flex:1;font-size:11px}.copy-field button{color:#799082;background:0 0;border:0}.setup-form{grid-template-columns:1fr 1fr;gap:0 15px;display:grid}.setup-form label,.key-form label{letter-spacing:0;color:#536b5d;font-size:12px}.setup-form input,.key-form input,.key-form select{color:#243e30;background:#fbfcfa;border:1px solid #e0e9df;border-radius:8px;outline-color:#b7d986;width:100%;margin-top:7px;padding:12px;display:block}.setup-form .primary-button{place-self:end start;margin-top:18px}.pairing a{color:#638b4c;font-weight:700}.pairing a svg{vertical-align:middle}.api-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.api-card .metric-icon{margin-bottom:18px}.key-form{grid-template-columns:1fr 1fr;gap:0 12px;display:grid}.key-form .primary-button{grid-column:1/-1;justify-self:start;margin-top:18px}.key-list{border-top:1px solid #edf1eb;margin-top:25px}.key-row{border-bottom:1px solid #edf1eb;justify-content:space-between;gap:10px;padding:15px 0;display:flex}.key-row b,.key-row small{display:block}.key-row small,.muted{color:#97a69c;margin-top:6px;font-size:11px}.key-row button{color:#ac7771;background:0 0;border:0;font-size:11px}.token-box{background:#f2f8e9;border-radius:10px;margin-top:20px;padding:15px}.token-box p{color:#80927f;margin-top:5px;font-size:12px}.token-box .text-link{margin-top:12px}.api-card pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#d8e8d4;background:#1e3431;border-radius:10px;padding:17px;font-size:11px;line-height:1.7}.api-info{color:#8b9b90;gap:10px;margin-top:24px;font-size:11px;line-height:1.5;display:flex}.api-info svg{flex:none}footer{letter-spacing:.03em;color:#a5b2a6;border-top:1px solid #e7ece4;padding:20px 4.5%;font-size:10px;font-weight:700}footer span{color:#c4d1c4;margin-left:8px}footer span:last-child{float:right}.modal-backdrop{z-index:10;background:#14251fc9;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{width:100%;max-width:430px;padding:28px;box-shadow:0 25px 80px #14251f50}.modal-icon{color:#6e9844;background:#e8f5d4;border-radius:13px;place-items:center;width:45px;height:45px;margin-bottom:18px;display:grid}.modal h2{font-size:22px}.modal p{color:#89998e;margin-top:10px;line-height:1.6}.modal-actions{justify-content:flex-end;gap:9px;margin-top:25px;display:flex}@media (width<=1050px){.dashboard-grid{grid-template-columns:1fr}.right-column{grid-template-columns:1fr 1fr;gap:15px;display:grid}.activity{margin:0}.help-card{grid-column:1/-1}.welcome{min-height:240px}}@media (width<=700px){.sidebar{width:100%;padding:15px 18px;position:static}.shell{display:block}.brand{padding:0}.brand-mark{width:33px;height:33px}.nav-label,.sidebar-bottom{display:none}nav{margin-top:14px;display:flex;overflow:auto}nav button{white-space:nowrap;padding:10px;font-size:12px}.nav-arrow{display:none}.main{width:100%;margin:0}.topbar{height:55px}.content{padding-top:28px}.page-heading{align-items:start}.page-heading h1{font-size:29px}.page-heading>.outline-button{padding:10px;font-size:0}.page-heading>.outline-button svg{width:17px}.dashboard-grid{gap:16px}.hero{min-height:300px}.hero-top{padding:22px 20px 0}.car-wrap{height:160px}.hero-bottom{gap:20px;padding:14px 20px}.metric-grid{gap:8px}.metric{min-height:145px;padding:13px}.metric strong{font-size:21px}.metric small{font-size:10px}.right-column{grid-template-columns:1fr}.help-card{grid-column:auto}.section-heading>span{font-size:10px}.control-card{padding:2px 14px}.control-row{gap:9px}.control-row small{max-width:135px}.control-buttons button{padding:8px}.api-grid,.setup-form,.key-form{grid-template-columns:1fr}.form-card{gap:13px;padding:20px}.key-form .primary-button{grid-column:auto}.connection{font-size:0}.connection .status-dot{width:8px;height:8px}}.login-page{background:radial-gradient(circle at 50% 20%,#e4f1dd,#f5f7f1 55%);place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{width:min(100%,420px);padding:36px}.login-brand{margin-bottom:45px}.login-brand b{color:#203a31}.login-brand small{color:#81978b}.login-card h1{margin-top:10px;font-size:32px}.login-card>p{color:#87998e;margin-top:10px;line-height:1.6}.login-card form{margin-top:26px}.login-card label{color:#526a5d;font-size:12px;font-weight:700;display:block}.login-card input{background:#fbfcfa;border:1px solid #dce7da;border-radius:9px;outline-color:#b7d986;width:100%;margin:8px 0 15px;padding:13px;display:block}.login-card .primary-button{width:100%}.login-notice{color:#a75d52;margin-top:20px;font-size:12px}.logout-button{color:#788c80;background:0 0;border:0;font-size:11px;font-weight:700}
