:root{--product-bg:#f6f8fb;--product-text:#17243a;--product-muted:#67758b;--product-line:#e2e8f0;--product-accent:#3159c9}
.app-layout{grid-template-columns:248px minmax(0,1fr);background:var(--product-bg);color:var(--product-text)}
.app-sidebar{background:#fff;color:var(--product-text);border-right:1px solid var(--product-line);padding:25px 15px}
.app-sidebar .brand{border-bottom:0;padding:5px 10px 31px;color:var(--product-text)}
.app-sidebar .brand-mark{fill:var(--product-accent)}
.app-sidebar .brand-sub{color:var(--product-accent)}
.side-label{color:#9aa7ba;font:700 10px Manrope,sans-serif;letter-spacing:.13em;margin:19px 12px 10px}
.side-nav{gap:5px}
.side-nav button{color:#5a6880;font-weight:650;border-radius:8px;padding:11px 13px}
.side-nav button:hover,.side-nav button.active{background:#edf2ff;color:#2449b1}
.side-nav button span{font-size:18px;width:29px;vertical-align:-1px}
.side-bottom{border-top:1px solid var(--product-line)}
.user-chip{color:var(--product-text);font-weight:700}
.user-chip small{color:var(--product-muted)}
.avatar{background:#e8edff;color:#3159c9}
.app-sidebar .side-bottom .button{background:#fff;border-color:var(--product-line);color:#46556c;border-radius:8px;margin-top:12px}
.app-top{background:#fff;border-bottom:1px solid var(--product-line);height:72px;padding:0 36px;backdrop-filter:none}
.workspace-select{background:#fff;color:var(--product-text);font-size:13px}
.app-content{max-width:1240px;padding:37px 38px 70px}
.app-layout .button{border-radius:8px}
.app-layout .button.dark{background:var(--product-accent)}
.app-layout .button.dark:hover{background:#2649ad}
.app-layout .button.ghost{border-color:var(--product-line);background:#fff;color:#344563}
.page-title{align-items:center;gap:20px;margin-bottom:25px}
.page-title h1{font:750 33px/1.18 Manrope,sans-serif;letter-spacing:-.04em;margin:7px 0 0}
.page-title p{color:var(--product-muted);font-size:13px}
.page-title .eyebrow{color:var(--product-accent);letter-spacing:.1em}
.page-title .eyebrow:before{display:none}
.plan-pill{display:inline-flex;white-space:nowrap;align-items:center;padding:8px 12px;border-radius:100px;background:#e8edff;color:#274bb3;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.overview-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);background:#fff;border:1px solid var(--product-line);border-radius:12px;overflow:hidden;margin-bottom:15px;box-shadow:0 3px 14px rgba(30,55,90,.03)}
.overview-usage,.overview-next{padding:30px}
.overview-next{background:#f0f4ff;border-left:1px solid #dfe7fa}
.section-kicker{color:#8795ab;font:800 10px Manrope,sans-serif;letter-spacing:.13em}
.overview-hero h2{font:750 28px/1.2 Manrope,sans-serif;letter-spacing:-.04em;margin:14px 0}
.overview-usage h2{font-size:39px}
.overview-usage h2 span{font-size:21px;color:#9eabc0;font-weight:600}
.overview-hero p,.billing-summary p{color:var(--product-muted);font-size:13px;line-height:1.65}
.overview-next .button{margin-top:7px}
.text-action{border:0;background:none;color:var(--product-accent);font-weight:800;font-size:12px;padding:7px 0;text-align:left}
.text-action:hover{text-decoration:underline}
.progress{height:9px;border-radius:100px;background:#e9edf5;margin:19px 0 12px;overflow:hidden}
.progress i{background:var(--product-accent);border-radius:100px}
.metric-grid{gap:15px}
.metric,.panel{background:#fff;border:1px solid var(--product-line);border-radius:10px;box-shadow:0 3px 14px rgba(30,55,90,.025)}
.metric{padding:21px 22px;min-height:127px}
.metric label{font:800 10px Manrope,sans-serif;letter-spacing:.1em;color:#8290a6}
.metric strong{font:750 26px Manrope,sans-serif;letter-spacing:-.04em;margin-top:11px;color:var(--product-text)}
.metric strong small{font-size:15px;color:#98a5b7}
.metric>span,.metric .trend{color:var(--product-muted);font-size:11px}
.content-grid{gap:15px;margin-top:15px;grid-template-columns:minmax(0,1.45fr) minmax(270px,.7fr)}
.panel{padding:25px}
.panel-head h2,.guide-panel h2{font:750 19px Manrope,sans-serif;letter-spacing:-.025em;margin:6px 0 0}
.guide-panel{background:#fff}
.guide-panel p{font-size:13px;line-height:1.7;color:var(--product-muted);margin:17px 0}
.project-row{color:var(--product-text);border-bottom-color:#eef1f6}
.project-row strong{font-size:13px}
.project-row small{color:var(--product-muted)}
.empty{border-color:var(--product-line);border-radius:8px}
.empty strong{font:750 19px Manrope,sans-serif;color:var(--product-text)}
.billing-summary .panel-head{margin-bottom:0}
.billing-summary .panel-head strong{font-size:21px}
.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:17px}
.price-card,.price-card.featured{background:#fff;color:var(--product-text);transform:none;border:1px solid var(--product-line);border-radius:10px;padding:24px;min-height:360px}
.price-card.featured{border:2px solid var(--product-accent)}
.plan-card-top{color:var(--product-accent);font-size:10px;font-weight:800;letter-spacing:.12em}
.price-card h2{font:750 22px Manrope,sans-serif;margin:15px 0 3px}
.price-card>p{font-size:12px;color:var(--product-muted);min-height:38px;margin:0}
.price{font:750 30px Manrope,sans-serif;letter-spacing:-.04em;margin:20px 0}
.price-card ul{color:#4e5e73;gap:11px}
.price-card li:before{color:var(--product-accent)}
.plan-card-note{margin-top:auto;padding-top:17px;border-top:1px solid var(--product-line);font-size:11px;color:var(--product-muted);font-weight:700}
.auth-page{background:#f7f9fc;color:var(--product-text)}
.auth-aside{background:#162b52;padding:clamp(40px,6vw,85px)}
.auth-aside h1{font:750 clamp(42px,4.5vw,68px)/1.06 Manrope,sans-serif;letter-spacing:-.055em;max-width:560px}
.auth-aside .eyebrow{color:#a9bbeb}
.auth-aside small{color:#8ea8d7}
.auth-form-wrap{background:#f7f9fc}
.auth-form{background:#fff;border:1px solid var(--product-line);border-radius:14px;padding:38px;box-shadow:0 20px 60px rgba(26,49,86,.06)}
.auth-form h2{font:750 30px Manrope,sans-serif;letter-spacing:-.04em}
.auth-form>p{font-size:13px;color:var(--product-muted)}
.auth-form .button.dark{background:var(--product-accent);border-radius:8px}
.auth-form .input{border-radius:8px;border-color:var(--product-line)}
.auth-form .form-note a{color:var(--product-accent)}
.modal{background:#fff;border-radius:12px}
.modal h2{font:750 26px Manrope,sans-serif;letter-spacing:-.03em}
@media(max-width:1050px){.overview-hero,.content-grid{grid-template-columns:1fr}.overview-next{border-left:0;border-top:1px solid #dfe7fa}.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:950px){.app-layout{grid-template-columns:76px 1fr}.app-sidebar .brand span{display:none}.side-nav button{font-size:0}.side-nav button span{font-size:18px}.app-content{padding:30px}.auth-aside{display:none}}
@media(max-width:620px){.app-layout{display:block}.app-sidebar{position:fixed;top:auto;left:0;right:0;bottom:0;height:68px;border-right:0;border-top:1px solid var(--product-line);padding:7px 5px}.app-sidebar>.brand,.side-label,.side-bottom{display:none}.side-nav{display:flex;justify-content:space-around}.side-nav button{font-size:0;padding:8px 10px}.side-nav button span{font-size:20px;width:auto}.app-top{padding:0 17px}.app-content{padding:23px 15px 90px}.page-title h1{font-size:28px}.overview-usage,.overview-next{padding:22px}.overview-usage h2{font-size:32px}.metric-grid,.pricing-grid{grid-template-columns:1fr 1fr}.metric{min-height:110px;padding:16px}.metric strong{font-size:23px}.price-card{grid-column:span 2}.auth-form{padding:25px;border:0;box-shadow:none}.auth-form-wrap{padding:20px}}