:root{--bg:#f6f7f2;--surf:#fff;--ink:#102322;--mute:#546563;--line:#dfe5df;--brand:#0f5c4d;--bi:#fff;--accent:#f2a33a;--soft:#e4efe6;--err:#b3261e;--bub:#d9fdd3}
@media(prefers-color-scheme:dark){:root{--bg:#0b1716;--surf:#122221;--ink:#e8f1ee;--mute:#9bb0ac;--line:#24403c;--brand:#3fbf9a;--bi:#06211b;--soft:#16302c;--err:#ff8a80;--bub:#145c45}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Bricolage Grotesque",system-ui,sans-serif}a{color:inherit;text-decoration:none}
.hide{display:none!important}h2{margin:0 0 6px;font-size:22px}h3{margin:18px 0 8px;font-size:16px}p{margin:0 0 10px;color:var(--mute)}
#app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}aside{background:var(--surf);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.logo{font-weight:800;font-size:18px;padding:4px 10px 16px}nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}nav a,.sb a{padding:9px 12px;border-radius:9px;color:var(--mute);cursor:pointer;display:block}
nav a.on{background:var(--soft);color:var(--ink);font-weight:600}nav a:hover,.sb a:hover{color:var(--ink)}main{padding:24px;min-width:0}
.card{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}.auth{max-width:400px;margin:60px auto}
.btn{padding:9px 16px;border-radius:9px;font:600 14px inherit;font-family:inherit;border:1.5px solid var(--brand);background:var(--brand);color:var(--bi);cursor:pointer}.btn.o{background:transparent;color:var(--ink);border-color:var(--line)}.btn.s{padding:4px 10px;font-size:13px}.btn.d{border-color:var(--err);background:transparent;color:var(--err)}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
input,textarea,select{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--line);font:inherit;background:var(--bg);color:var(--ink);margin-bottom:8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}.row>*{flex:1;min-width:130px}.row>.btn{flex:0 0 auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}.stat{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:14px}.stat b{display:block;font-size:26px}.stat span{color:var(--mute);font-size:13px}
.sc{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--mute);font-weight:600}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;background:var(--soft);font-size:12px}.pill.g{background:#cdeedb;color:#0a5b34}.pill.r{background:#fbd9d6;color:#8c1d18}.pill.y{background:#fdebc8;color:#7a4a00}
#note .msg{padding:10px 14px;border-radius:10px;background:var(--soft);margin-bottom:14px}#note .e{color:var(--err)}
.inbox{display:grid;grid-template-columns:300px 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surf);height:calc(100vh - 110px);min-height:420px}
.cl{border-right:1px solid var(--line);overflow:auto}.ci{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}.ci.on{background:var(--soft)}.ci small{display:block;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ci b span{float:right;background:var(--brand);color:var(--bi);border-radius:99px;font-size:11px;padding:0 7px}
.th{display:flex;flex-direction:column;min-width:0}.thh{padding:10px 14px;border-bottom:1px solid var(--line)}.msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.b{max-width:75%;padding:7px 11px;border-radius:10px;background:var(--surf);border:1px solid var(--line);word-wrap:break-word}.b.o{align-self:flex-end;background:var(--bub);border-color:transparent}.b small{display:block;color:var(--mute);font-size:11px;text-align:right}
.rp{padding:10px;border-top:1px solid var(--line)}.rp .row{flex-wrap:nowrap}.rp input{margin:0}
pre{background:#0d1f1d;color:#cfe8df;border-radius:10px;padding:14px;overflow:auto;font-size:13px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.amt{font-size:30px;font-weight:800}
.bar{display:flex;align-items:flex-end;gap:10px;height:120px}.bar div{flex:1;background:var(--brand);border-radius:6px 6px 0 0;min-height:2px;position:relative}.bar span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:11px;color:var(--mute)}
@media(max-width:800px){#app{grid-template-columns:1fr}aside{position:static;height:auto}nav{flex-direction:row;flex-wrap:wrap}.inbox{grid-template-columns:1fr;height:auto}.cl{max-height:220px}.msgs{height:340px}}

/* Workspace dashboard */
:root{--shadow:0 12px 32px rgba(20,54,46,.07);--brand-wash:rgba(15,92,77,.09)}
@media(prefers-color-scheme:dark){:root{--shadow:0 14px 34px rgba(0,0,0,.2);--brand-wash:rgba(63,191,154,.12)}}
#app{grid-template-columns:248px minmax(0,1fr)}
#app>aside{padding:24px 16px;background:var(--surf);box-shadow:4px 0 24px rgba(20,54,46,.025)}
#app .logo{padding:6px 12px 24px;font-size:19px;letter-spacing:-.03em}
#app nav{gap:5px}
#app nav a,#app .sb a{padding:11px 13px;border-radius:11px;transition:background .2s ease,color .2s ease,transform .2s ease}
#app nav a:hover,#app .sb a:hover{background:var(--bg);transform:translateX(2px)}
#app nav a.on{background:var(--brand-wash);color:var(--brand);box-shadow:inset 3px 0 var(--brand)}
#app main{padding:38px clamp(22px,4vw,58px);min-height:100vh;max-width:1600px;width:100%;margin:0 auto}
#view>h2{font-size:30px;letter-spacing:-.04em}
.dash-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:32px;align-items:center;overflow:hidden;padding:32px 36px;margin-bottom:18px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(120deg,var(--surf) 34%,var(--soft));box-shadow:var(--shadow);animation:dash-enter .55s both}
.dash-hero:after{content:"";position:absolute;width:270px;height:270px;border:1px solid var(--brand-wash);border-radius:50%;right:150px;top:-185px;box-shadow:0 0 0 34px var(--brand-wash),0 0 0 68px rgba(15,92,77,.035);pointer-events:none}
.dash-welcome,.workspace-status{position:relative;z-index:1}
.eyebrow{display:block;color:var(--brand);font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:7px}
.dash-welcome h1{font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.045em;margin:0 0 10px}
.dash-welcome p,.card-heading p{max-width:570px;color:var(--mute);margin:0}
.dash-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.workspace-status{display:flex;flex-direction:column;align-items:flex-start;padding:21px;border:1px solid var(--line);border-radius:17px;background:var(--surf);box-shadow:0 9px 24px rgba(20,54,46,.06)}
.status-orb{width:43px;height:43px;display:grid;place-items:center;margin-bottom:15px;border-radius:14px;background:var(--bg);color:var(--mute);font-size:13px;font-weight:800}
.status-orb.is-connected{background:var(--brand);color:var(--bi);box-shadow:0 0 0 6px var(--brand-wash)}
.status-caption{font-size:9px;letter-spacing:.14em;color:var(--mute);font-weight:800}
.workspace-status strong{font-size:19px;margin:2px 0 3px}
.workspace-status>small{font-size:12px;line-height:1.45;color:var(--mute)}
.status-link{border:0;background:none;color:var(--brand);padding:11px 0 0;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer}
.plan-strip{display:grid;grid-template-columns:minmax(170px,1fr) minmax(100px,1.3fr) 44px auto;gap:18px;align-items:center;padding:17px 22px;margin-bottom:29px;border:1px solid var(--line);border-radius:15px;background:var(--surf);box-shadow:var(--shadow);animation:dash-enter .55s .06s both}
.plan-copy{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:9px}
.plan-copy .eyebrow{grid-column:1/-1}
.plan-copy strong,.no-plan strong{font-size:15px}
.plan-copy small,.no-plan small{font-size:11px;color:var(--mute)}
.usage-meter{height:9px;overflow:hidden;border-radius:99px;background:var(--bg)}
.usage-meter span{display:block;height:100%;min-width:3px;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#47b98f);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.usage-number{font-size:14px}
.plan-strip.no-plan{grid-template-columns:1fr auto}
.no-plan .eyebrow{margin-bottom:3px}
.no-plan small{display:block}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:13px}
.section-heading .eyebrow{margin-bottom:2px}
.section-heading h2{margin:0;font-size:22px;letter-spacing:-.035em}
.period-chip{border:1px solid var(--line);border-radius:99px;padding:5px 10px;color:var(--mute);font-size:11px;background:var(--surf)}
.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:16px}
.metric-card{min-width:0;display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surf);box-shadow:0 5px 16px rgba(20,54,46,.035);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;animation:dash-enter .5s both}
.metric-card:nth-child(2){animation-delay:.04s}.metric-card:nth-child(3){animation-delay:.08s}.metric-card:nth-child(4){animation-delay:.12s}
.metric-card:nth-child(5){animation-delay:.16s}.metric-card:nth-child(6){animation-delay:.2s}.metric-card:nth-child(7){animation-delay:.24s}.metric-card:nth-child(8){animation-delay:.28s}
.metric-card:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow)}
.metric-icon{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--brand-wash);color:var(--brand);font-size:18px;font-weight:800}
.metric-card>div{min-width:0}
.metric-label,.metric-card strong,.metric-card small{display:block}
.metric-label{color:var(--mute);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric-card strong{font-size:23px;line-height:1.25;letter-spacing:-.035em}
.metric-card small{font-size:10px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-lower{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:14px}
.card.activity-card,.card.getting-started,.card.test-number-card{padding:20px;margin-bottom:14px;border-radius:16px;box-shadow:var(--shadow);animation:dash-enter .55s .15s both}
.card-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.card-heading h3,.getting-started h3{margin:0 0 3px;font-size:17px}
.card-heading p{font-size:12px}
.activity-total{text-align:right;font-size:21px;font-weight:800;line-height:1.1}
.activity-total small{display:block;color:var(--mute);font-size:10px;font-weight:500;margin-top:4px}
.bar{position:relative;height:146px;align-items:stretch;gap:12px;margin:20px 4px 25px;padding-top:10px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--line) 36px,var(--line) 37px)}
.bar .bar-column{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;background:transparent;border-radius:0}
.bar-column i{display:block;width:min(34px,70%);min-height:3px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#52c79f,var(--brand));transform-origin:bottom;animation:bar-rise .8s cubic-bezier(.2,.7,.25,1) both}
.bar .bar-column span{position:static;flex:0 0 14px;width:auto;font-size:10px}
.chart-footnote{display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-size:10px}
.chart-footnote>span{display:flex;align-items:center;gap:6px}
.chart-footnote i{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.getting-started h3{margin:1px 0 12px}
.getting-started>button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 0;text-align:left;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.getting-started>button:hover b,.getting-started>button:hover>i{color:var(--brand)}
.getting-started>button>span:nth-child(2){flex:1}
.getting-started>button b,.getting-started>button small{display:block}
.getting-started>button b{font-size:12px}
.getting-started>button small{font-size:10px;color:var(--mute)}
.getting-started>button>i{font-style:normal;color:var(--mute)}
.quick-icon{width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:var(--soft);color:var(--brand);font-size:14px;font-weight:700}
.test-number-card .card-heading{margin-bottom:18px}
.test-number-card .row{margin:14px 0}
.test-number-card .row input{margin:0}
@keyframes dash-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bar-rise{from{transform:scaleY(.08);opacity:.45}to{transform:scaleY(1);opacity:1}}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-lower{grid-template-columns:1fr 1fr}#app main{padding:28px 24px}}
@media(max-width:800px){#app{grid-template-columns:1fr}#app>aside{padding:14px 16px;box-shadow:0 3px 18px rgba(20,54,46,.04)}#app .logo{padding:3px 7px 12px}#app main{padding:24px 16px}.dash-hero{grid-template-columns:1fr;padding:25px}.workspace-status{display:grid;grid-template-columns:45px 1fr;column-gap:14px;align-items:center}.status-orb{grid-row:1/4;margin:0}.workspace-status .status-caption,.workspace-status strong,.workspace-status>small{grid-column:2}.status-link{grid-column:2}.plan-strip{grid-template-columns:1fr auto}.plan-strip .usage-meter{grid-column:1/2}.plan-strip .usage-number{grid-column:2;grid-row:2}.plan-strip>.btn{grid-column:2;grid-row:1}.dash-lower{grid-template-columns:1fr}}
@media(max-width:500px){#app main{padding:18px 12px}.dash-hero{padding:21px 18px}.dash-welcome h1{font-size:28px}.dash-actions .btn{flex:1;padding:9px 10px;font-size:12px}.metric-grid{gap:8px}.metric-card{gap:8px;padding:12px 9px}.metric-icon{flex-basis:32px;width:32px;height:32px;font-size:15px;border-radius:10px}.metric-card strong{font-size:20px}.metric-label{font-size:10px}.metric-card small{font-size:9px}.period-chip{font-size:9px}.plan-copy{grid-template-columns:1fr}.plan-copy .eyebrow{grid-column:auto}.plan-copy small{max-width:210px}.bar{gap:6px}.activity-card,.getting-started{padding:16px!important}.chart-footnote small{max-width:140px;text-align:right}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.setup-connect,.setup-connected,.setup-api,.setup-test{max-width:980px;padding:24px}
.setup-connect h3,.setup-test h3{margin-bottom:5px}
.setup-connect>p,.setup-api>p,.setup-test>p{max-width:720px}
.setup-connect .row,.setup-copy-row{align-items:center}
.setup-connect .row input,.setup-copy-row input{margin-bottom:8px}
.setup-connect>.btn,.setup-test>.btn{margin-top:5px}
.setup-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:15px}
.setup-heading .eyebrow{margin-bottom:3px}
.setup-warning{padding:10px 12px;border-radius:9px;background:#fdebc8;color:#7a4a00;font-size:12px}
.setup-edit-form{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.setup-edit-form>p{font-size:12px}
.setup-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}
.setup-details>div{min-width:0;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.setup-details small,.setup-details strong{display:block}
.setup-details small{color:var(--mute);font-size:9px;font-weight:800;letter-spacing:.1em;margin-bottom:4px}
.setup-details strong{overflow-wrap:anywhere;font-size:13px}
.setup-webhook{border-top:1px solid var(--line);padding-top:14px}
.setup-webhook summary{font-size:13px}
.setup-webhook p{margin-top:10px}
.setup-webhook label,.setup-api label,.setup-test label{display:block;margin:12px 0 5px;color:var(--mute);font-size:11px;font-weight:700}
.setup-webhook pre,.setup-api pre{min-width:0;margin:0 0 10px;overflow-wrap:anywhere;white-space:pre-wrap}
.setup-copy-row{flex-wrap:nowrap}
.setup-copy-row input{min-width:0;margin:0}
.setup-copy-row .btn{flex:0 0 auto}
.setup-test select,.setup-test input{max-width:440px}
.setup-test>.btn:disabled{opacity:.55;cursor:not-allowed}
.setup-hint{display:block;margin-top:10px;color:var(--mute);font-size:11px}
@media(max-width:700px){.setup-connect,.setup-connected,.setup-api,.setup-test{padding:18px}.setup-details{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.setup-details{grid-template-columns:1fr}.setup-copy-row{flex-wrap:wrap}.setup-copy-row input{flex:1 1 100%}}