@font-face{font-family:Manrope;src:url('/fonts/manrope-latin-400-normal.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-latin-500-normal.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-latin-600-normal.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
:root{color-scheme:dark;--bg:#111214;--fg:#f4f1ea;--muted:#a4a4a8;--dim:#929295;--accent:#f0c789;--positive:#b0dcae;--line:rgba(244,241,234,.17);--surface:rgba(23,23,25,.64);--hover:rgba(255,255,255,.04);--button:#f4f0e7;--button-text:#161616}
:root[data-theme=tide]{--accent:#97c9d4;--positive:#a7d7c6}
:root[data-theme=pearl]{color-scheme:light;--bg:#e9e6e0;--fg:#242426;--muted:#626164;--dim:#6d6c70;--accent:#876039;--positive:#356047;--line:rgba(35,32,28,.19);--surface:rgba(247,245,240,.74);--hover:rgba(0,0,0,.035);--button:#252527;--button-text:#f8f5ed}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.5 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button,a{touch-action:manipulation}button{color:inherit}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500}button{background:none;border:0}svg{display:block;flex-shrink:0}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}::selection{background:#9f724d;color:white}#ambient-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.app{max-width:1920px;margin:auto}.app-header{min-height:90px;display:flex;align-items:center;gap:24px;padding:20px 56px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:18px;white-space:nowrap;font-size:22px;letter-spacing:-.035em}.bridge-mark{color:var(--accent)}.demo-badge{display:inline-flex;align-items:center;border:1px solid var(--line);padding:3px 11px;background:var(--hover);font-size:12px;color:var(--muted);border-radius:4px;white-space:nowrap}.navigation{margin-left:auto;display:flex;gap:38px;align-items:center;height:100%}.nav-link{color:var(--muted);position:relative;padding:8px 0}.nav-link.active{color:var(--fg)}.nav-link.active:after{content:'';position:absolute;bottom:-6px;left:0;right:0;height:1px;background:var(--accent)}.nav-link:hover{color:var(--fg)}.button{border:1px solid var(--line);border-radius:5px;min-height:44px;padding:10px 22px;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;background:transparent;transition:background .15s,border-color .15s}.button:hover{border-color:var(--muted);background:var(--hover)}.button.primary{background:var(--button);color:var(--button-text);border-color:transparent;font-weight:500}.button.primary:hover{filter:brightness(.92)}.button.danger{color:#eca8a1;border-color:#8d5e58}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:42px;padding:8px;border-radius:5px}.icon-button:hover{background:var(--hover)}.icon-button.bordered{border:1px solid var(--line)}.text-button{display:inline-flex;gap:10px;align-items:center;padding:8px 0;min-height:40px;color:var(--muted)}.text-button:hover{color:var(--fg)}.content{padding:34px 56px 22px}.dashboard{display:flex;flex-direction:column;min-height:calc(100svh - 147px)}.filter-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.select,input:not([type=checkbox]){border:1px solid var(--line);border-radius:5px;min-height:44px;color:var(--fg);background:transparent;padding:10px 18px}.select{appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='none' stroke='%23999999' d='m1 2 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;min-width:145px}.select option{background:var(--bg);color:var(--fg)}.date-label{margin-left:10px}.timezone{font-size:14px;color:var(--muted);border-left:1px solid var(--line);padding-left:26px}.metrics-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);flex:1;margin:32px 0 32px;min-height:530px}.hero-metric{padding:0 64px 8px 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start}.metric-label{padding:0;text-align:left;font-size:24px;letter-spacing:.035em;min-height:38px;font-weight:500}.metric-label:hover{color:var(--accent)}.metric-value{font-variant-numeric:tabular-nums;font-size:clamp(92px,11.4vw,178px);font-weight:400;letter-spacing:-.063em;line-height:1.16;white-space:nowrap;margin:8px 0 0 -6px}.comparison-row{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-top:7px}.comparison{font-variant-numeric:tabular-nums;font-size:38px;letter-spacing:-.025em;color:var(--positive)}.comparison.negative{color:#e4b1a4}.comparison-caption{font-size:16px;color:var(--muted)}.metric-source{color:var(--dim);font-size:15px;margin-top:14px}.supporting-metrics{border-left:1px solid var(--line);padding-left:58px;display:flex;flex-direction:column}.supporting-metric{padding:0 0 32px;flex:1;min-width:0}.supporting-metric+.supporting-metric{border-top:1px solid var(--line);padding:30px 0 0}.supporting-metric .metric-value{font-size:clamp(56px,7.45vw,115px);letter-spacing:-.055em;margin-top:7px;margin-left:-3px}.supporting-metric .comparison{font-size:32px}.supporting-metric .metric-source{margin-top:12px}.trend{width:100%;margin-top:auto;padding-top:30px}.eyebrow{letter-spacing:.16em;font-size:12px;color:var(--muted)}.chart-label{display:block;margin-bottom:20px}.trend-svg{width:100%;height:auto;max-height:200px;overflow:visible}.chart-dates{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:0 9px}.dashboard-footer{display:flex;align-items:center;gap:24px;border-top:1px solid var(--line);padding-top:28px;min-height:76px;flex-wrap:wrap}.source-list{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.source-status{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12px;white-space:nowrap}.source-status:hover{color:var(--accent)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--positive);box-shadow:0 0 8px #b0dcae28}.status-dot.offline{background:var(--dim)}.refresh-control{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;border-left:1px solid var(--line);padding:6px 0 6px 24px}.appearance-controls{display:flex;align-items:center;gap:16px;margin-left:auto}.appearance-controls .text-button{border-left:1px solid var(--line);padding-left:20px;font-size:12px}.theme-select{min-width:125px;font-size:12px}.feedback{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 18px;border:1px solid var(--line);background:var(--surface);border-radius:5px;margin-bottom:22px;color:var(--positive);font-size:14px}.feedback.error{color:#e4b1a4}.detail-panel,.customize-panel,.date-editor{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:22px 26px;margin:0 0 24px}.detail-panel p{margin:10px 0;max-width:850px;color:var(--muted)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.metric-pickers{display:flex;gap:24px;flex-wrap:wrap}.metric-pickers label{display:flex;flex:1;flex-direction:column;gap:10px;font-size:13px;color:var(--muted)}.date-editor{display:flex;gap:18px;margin-top:18px;align-items:flex-end;flex-wrap:wrap}.date-editor label{display:flex;flex-direction:column;gap:8px;font-size:12px}.empty-state{flex:1;min-height:520px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:24px}.empty-state h1{font-size:42px;letter-spacing:-.04em}.empty-state p{color:var(--muted)}.button-row{display:flex;gap:12px;flex-wrap:wrap}.muted{color:var(--muted)}.small{font-size:12px}.connections-screen{min-height:calc(100svh - 147px);display:flex;flex-direction:column}.connections-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);gap:48px}.connections-heading{display:flex;align-items:center;gap:28px;padding-top:9px}.connections-heading h1{font-size:46px;letter-spacing:-.04em}.subtitle{font-size:22px;color:var(--muted);margin-top:0}.provider-list{margin-top:30px;border-top:1px solid var(--line)}.provider-row{width:100%;display:flex;align-items:center;text-align:left;gap:24px;border-bottom:1px solid var(--line);min-height:99px;padding:18px 22px;position:relative}.provider-row:hover{background:var(--hover)}.provider-row.selected{background:rgba(222,183,119,.07);border:1px solid rgba(222,183,119,.14);border-radius:4px}.provider-row.selected:before{content:'';position:absolute;inset:0 auto 0 -1px;width:4px;background:var(--accent);border-radius:3px}.provider-mark{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;letter-spacing:-.08em;flex-shrink:0}.provider-mark.revenuecat{color:#fa7181;font-size:28px}.provider-mark.stripe{color:#8a80f9;font-size:42px;font-weight:600}.provider-mark.apple{background:#169cdd;color:white;border-radius:10px;font-size:29px;letter-spacing:0;width:40px;height:40px;margin:3px}.provider-mark.firebase{color:#ffc637;font-size:49px}.provider-info{display:flex;flex-direction:column;gap:4px;flex:1}.provider-name{font-size:18px;font-weight:500}.provider-description{font-size:13px;color:var(--muted)}.connection-status{font-size:12px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--muted)}.connection-status:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dim);flex-shrink:0}.connection-status.connected:before{background:#97d597;box-shadow:0 0 7px #b0dcae25}.source-mappings{margin-top:30px;border-top:1px solid var(--line);padding-top:18px}.source-mappings h2{font-size:17px;margin-bottom:14px}.source-mapping{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}.mapping-note{font-size:11px;color:var(--muted);margin-top:16px}.connection-editor{border:1px solid var(--line);border-radius:6px;background:rgba(20,21,23,.24);padding:32px 36px;align-self:start}.editor-heading{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding-bottom:27px}.editor-heading h2{font-size:25px;letter-spacing:-.035em}.editor-heading .connection-status{margin-left:auto;color:var(--positive)}.editor-fields{padding:24px 0 27px}.editor-fields label{display:flex;flex-direction:column;gap:9px;color:var(--muted);font-size:13px;margin-bottom:21px}.editor-fields label:last-of-type{margin-bottom:8px}.editor-fields input{width:100%;font-size:14px}.editor-metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}.editor-metrics h3{font-size:14px;margin-bottom:13px}.checkbox-row{display:flex;gap:12px;align-items:center;margin:13px 0;font-size:14px;cursor:pointer}.checkbox-row input{width:19px;height:19px;margin:0;accent-color:var(--accent);cursor:pointer}.sync-details{padding:22px 0;font-size:13px}.sync-details p{margin-top:6px}.editor-actions{display:flex;gap:16px}.editor-actions .button{flex:1}.disconnect{display:flex;margin:12px auto 0;font-size:12px}.editor-disclaimer{font-size:11px;color:var(--dim);text-align:center;margin-top:8px}.full-width{width:100%}.connections-footer{margin-top:auto;padding-top:38px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}.disconnect-confirm{border:1px solid var(--line);padding:18px;border-radius:4px}.disconnect-confirm h3{font-size:15px}.disconnect-confirm p{font-size:13px;color:var(--muted);margin:10px 0 16px}.studio-header{border-bottom:0;gap:28px}.studio-header .back-button{font-size:14px;color:var(--fg)}.studio-title{font-size:25px;letter-spacing:-.035em;padding-left:28px;border-left:1px solid var(--line)}.export-actions{display:flex;gap:16px;margin-left:auto}.studio-content{padding-top:8px}.studio-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(320px,1fr);gap:54px;min-height:calc(100svh - 130px)}.preview-column{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 16px}.snapshot-frame{width:min(100%,calc(100svh - 172px));border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--bg);aspect-ratio:1}.snapshot-frame.portrait{aspect-ratio:4/5;width:min(100%,calc((100svh - 172px)*.8))}.snapshot-frame.wide{aspect-ratio:16/9;width:100%;margin-top:65px}#snapshot-canvas{width:100%;height:100%;display:block;object-fit:contain}.snapshot-caption{align-self:flex-start;font-size:12px;color:var(--muted);margin-top:15px;margin-left:calc((100% - min(100%,100svh - 172px))/2)}.studio-editor{border-left:1px solid var(--line);padding:12px 0 28px 46px}.studio-editor h2{font-size:24px;letter-spacing:-.02em;margin-bottom:28px}.studio-control{margin-bottom:25px}.studio-control h3{font-size:16px;margin-bottom:10px}.theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.theme-option{text-align:left;padding:0;font-size:12px;color:var(--muted)}.theme-swatch{height:72px;display:block;border:1px solid var(--line);border-radius:5px;margin-bottom:9px;position:relative;overflow:hidden;background:#191719}.theme-swatch:before{content:'';position:absolute;width:140%;height:70%;top:30%;left:-30%;border-top:1px solid #dbaa66;border-radius:50%;transform:rotate(-26deg);box-shadow:0 -8px 16px #c28a442b,0 4px 18px #e3b46570}.theme-swatch.ember{background:linear-gradient(145deg,#151515 10%,#34291d 70%,#131313)}.theme-swatch.tide{background:linear-gradient(155deg,#131a1c 30%,#31545b 80%,#1a2328)}.theme-swatch.tide:before{border-color:#a0ccd0;box-shadow:0 4px 19px #8bb9c59c;transform:rotate(20deg)}.theme-swatch.pearl{background:linear-gradient(145deg,#dad6cd,#b8b4aa 40%,#f6f0e3)}.theme-swatch.pearl:before{border-color:#fff7e2;box-shadow:0 4px 19px #faf3eac2}.theme-option.selected .theme-swatch{border:2px solid var(--accent)}.segmented-control{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}.segment{flex:1;padding:11px 4px;font-size:12px}.segment+.segment{border-left:1px solid var(--line)}.segment.selected{background:var(--button);color:var(--button-text)}.format-hint{font-size:12px;color:var(--muted);margin-top:7px}.studio-control .select{width:100%}.switch-row{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;border-top:1px solid var(--line);padding:11px 0;font-size:13px}.switch{width:41px;height:23px;padding:3px;display:flex;align-items:center;border-radius:14px;background:#5e5e60}.switch-knob{width:17px;height:17px;background:#f9f6ef;border-radius:50%;display:block;transition:transform .15s}.switch.on{background:var(--accent)}.switch.on .switch-knob{transform:translateX(18px)}.privacy-note{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:15px}.export-ready{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:22px}.skip-link{position:fixed;top:-80px;left:24px;z-index:5;background:var(--button);color:var(--button-text);padding:12px 24px}.skip-link:focus{top:10px}
@media(min-width:1700px){.content{padding-left:72px;padding-right:72px}.app-header{padding-left:72px;padding-right:72px}.metrics-layout{margin-top:50px}.hero-metric{padding-right:80px}.metric-value{font-size:190px}.supporting-metric .metric-value{font-size:130px}.trend-svg{max-height:300px}}
@media(max-width:1250px){.app-header{padding:20px 32px;gap:18px}.content{padding:28px 32px 22px}.navigation{gap:24px}.brand{font-size:19px;gap:12px}.metrics-layout{grid-template-columns:1.7fr 1fr}.hero-metric{padding-right:36px}.supporting-metrics{padding-left:36px}.metric-value{font-size:10.9vw}.supporting-metric .metric-value{font-size:7.7vw}.source-list{gap:16px}.appearance-controls{margin-left:0}.dashboard-footer{gap:18px}.connections-grid{gap:28px}.provider-row{gap:15px;padding:18px 12px}.connection-editor{padding:26px}.editor-heading{gap:10px}.editor-heading h2{font-size:21px}.editor-heading .connection-status{font-size:10px}.studio-grid{gap:30px;grid-template-columns:minmax(0,1.7fr) 340px}.studio-editor{padding-left:28px}.preview-column{padding:0}.snapshot-frame{width:100%}.snapshot-caption{margin-left:0}}
@media(max-width:980px){.app-header{gap:14px;flex-wrap:wrap}.navigation{gap:20px}.brand{font-size:18px}.app-header .button{padding:9px 15px}.timezone{padding-left:16px}.filter-row{gap:12px}.date-label{margin-left:0}.metric-label{font-size:20px}.comparison{font-size:29px}.comparison-caption{font-size:13px}.supporting-metric .comparison{font-size:26px}.connections-grid{grid-template-columns:1fr}.connection-editor{max-width:none}.connections-footer{padding-top:24px}.provider-row{padding:18px 22px}.connections-heading h1{font-size:40px}.studio-grid{grid-template-columns:1fr 300px;gap:24px}.studio-editor{padding-left:22px}.studio-title{font-size:21px;padding-left:18px}.studio-header{gap:18px}.theme-options{gap:8px}.theme-swatch{height:55px}.export-actions{gap:8px}}
@media(max-width:760px){.app-header{padding:18px 22px;gap:13px}.brand{font-size:18px}.brand .bridge-mark{width:38px}.app-header>.demo-badge{margin-left:auto}.navigation{order:3;margin-left:0;gap:30px}.app-header>.button{order:4;margin-left:auto;min-height:40px;font-size:12px}.content{padding:24px 22px}.filter-row{gap:10px}.filter-row .select{min-width:135px;flex:1}.date-label{font-size:13px}.timezone{font-size:12px}.metrics-layout{display:flex;flex-direction:column;min-height:0;margin:30px 0}.hero-metric{padding:0 0 32px}.metric-value{font-size:clamp(70px,16vw,120px)}.comparison-row{gap:14px}.comparison{font-size:30px}.trend{padding-top:36px}.trend-svg{max-height:170px}.supporting-metrics{border-left:0;border-top:1px solid var(--line);padding:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:22px}.supporting-metric{padding:0!important}.supporting-metric+.supporting-metric{border-top:0;border-left:1px solid var(--line);padding-left:22px!important}.supporting-metric .metric-label{font-size:15px}.supporting-metric .metric-value{font-size:clamp(32px,9vw,66px)}.supporting-metric .comparison{font-size:23px}.metric-source{font-size:12px}.dashboard-footer{padding-top:20px;gap:20px}.source-list{gap:12px 20px}.source-status{font-size:11px}.refresh-control{border-left:0;padding-left:0}.appearance-controls{width:100%;gap:12px}.appearance-controls .text-button{margin-left:auto;font-size:11px;padding-left:12px}.appearance-controls .text-button .icon{display:none}.connections-heading{gap:14px;flex-wrap:wrap}.connections-heading h1{font-size:36px}.subtitle{font-size:18px}.provider-row{gap:14px;padding:16px 12px}.provider-row .connection-status{font-size:10px;gap:5px}.provider-mark{width:38px}.provider-name{font-size:16px}.provider-description{font-size:11px}.provider-row>.icon{display:none}.connection-editor{padding:24px 20px}.editor-heading h2{font-size:22px}.connections-footer{gap:20px}.source-mapping{font-size:12px}.studio-header .demo-badge{margin-left:0}.studio-header .back-button{font-size:12px}.studio-title{font-size:22px;padding-left:14px}.export-actions{width:100%;justify-content:flex-end}.export-actions .button{flex:1;font-size:13px}.studio-grid{display:flex;flex-direction:column;min-height:0;gap:28px}.studio-editor{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}.snapshot-frame{width:100%;max-width:600px}.snapshot-frame.portrait{width:min(100%,430px)}.snapshot-frame.wide{margin-top:0}.studio-editor h2{font-size:24px}.theme-swatch{height:90px}.snapshot-caption{align-self:center}.preview-column{padding:0}.feedback{font-size:12px}.empty-state h1{font-size:32px}.metric-pickers{flex-direction:column;gap:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.hero-metric,.supporting-metric{container-type:inline-size}
.hero-metric .metric-value{font-size:min(clamp(70px,11.4vw,178px),calc(150cqw / var(--digits,7)))}
.supporting-metric .metric-value{font-size:min(clamp(36px,7.45vw,115px),calc(150cqw / var(--digits,5)))}
@media(max-width:760px){.hero-metric .metric-value{font-size:min(clamp(60px,16vw,120px),calc(150cqw / var(--digits,7)))}.supporting-metric .metric-value{font-size:min(clamp(28px,9vw,66px),calc(150cqw / var(--digits,5)))}}


/* Center the app content independently of the full-viewport shader. */
.app{max-width:none}
.app-header{max-width:1240px;margin-inline:auto;padding-inline:48px}
.content:not(.landing-content){max-width:1320px;margin-inline:auto}
.content.dashboard-content{max-width:1120px;padding:48px 48px 56px;min-height:calc(100svh - 90px);display:flex;flex-direction:column;justify-content:center}
.dashboard{min-height:0}
.dashboard .metrics-layout{flex:none;min-height:350px;margin:36px 0;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)}
.dashboard .hero-metric{padding-right:52px}
.dashboard .metric-label{font-size:20px;min-height:32px}
.dashboard .hero-metric .metric-value{font-size:min(112px,calc(150cqw / var(--digits,7)))}
.dashboard .supporting-metric .metric-value{font-size:min(72px,calc(150cqw / var(--digits,5)))}
.dashboard .comparison{font-size:28px}
.dashboard .comparison-caption{font-size:13px}
.dashboard .metric-source{font-size:13px;margin-top:10px}
.dashboard .supporting-metrics{padding-left:42px}
.dashboard .supporting-metric{padding-bottom:24px}
.dashboard .supporting-metric+.supporting-metric{padding-top:24px}
.dashboard .trend{padding-top:28px}
.dashboard .trend-svg{max-height:118px}
.dashboard .chart-label{margin-bottom:12px;font-size:10px}
.dashboard .dashboard-footer{padding-top:20px;gap:16px;min-height:64px}
.dashboard .source-list{gap:16px}
.dashboard .source-status{font-size:11px;gap:7px}
.dashboard .refresh-control{font-size:11px;padding-left:16px;gap:8px}
.dashboard .appearance-controls{gap:10px}
.dashboard .appearance-controls .text-button{font-size:11px;padding-left:12px}
.dashboard .theme-select{min-width:108px;padding-left:12px}

/* Product landing: a short introduction and an honest, isolated demo. */
.landing-header{border-bottom:0;min-height:88px}
.landing-header .brand{font-size:19px;gap:14px}
.landing-nav-action{margin-left:auto;font-size:13px;gap:8px}
.content.landing-content{padding:0 40px 48px;max-width:1120px;margin-inline:auto}
.landing-hero{text-align:center;padding:52px 0 46px;max-width:680px;margin:auto}
.landing-eyebrow{font-size:10px;letter-spacing:.23em;color:var(--accent)}
.landing-title{font-size:clamp(42px,4.5vw,64px);line-height:1.08;letter-spacing:-.055em;margin-top:22px;font-weight:400}
.headline-line{display:block}
.landing-description{font-size:16px;line-height:1.8;color:var(--muted);max-width:480px;margin:22px auto 26px;text-wrap:pretty}
.landing-cta{min-height:48px;padding:12px 26px;font-size:14px;gap:18px}
.landing-note{font-size:11px;color:var(--muted);margin-top:13px}
.landing-preview{max-width:860px;margin:auto;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--bg) 70%,transparent);box-shadow:0 24px 90px #00000014;padding:24px 32px 0}
.preview-heading{display:flex;align-items:center;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.preview-heading h2{font-size:13px;font-weight:500}
.preview-heading .demo-badge{font-size:9px;padding:2px 7px}
.preview-period{margin-left:auto;font-size:11px;color:var(--muted)}
.preview-metrics{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);padding:28px 0 24px;gap:36px}
.preview-primary{min-width:0}
.preview-secondary{border-left:1px solid var(--line);padding-left:36px;display:flex;flex-direction:column;gap:20px}
.preview-secondary .preview-metric+.preview-metric{border-top:1px solid var(--line);padding-top:20px}
.preview-metric-label{font-size:13px;letter-spacing:.015em;color:var(--muted)}
.preview-value{font-size:40px;line-height:1.2;letter-spacing:-.055em;display:block;margin-top:6px;font-variant-numeric:tabular-nums}
.preview-hero-metric .preview-value{font-size:64px}
.preview-change-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:7px}
.preview-change{color:var(--positive);font-size:15px}
.preview-comparison{color:var(--muted);font-size:10px}
.preview-source{font-size:10px;color:var(--dim);margin-top:8px}
.preview-primary .trend{padding-top:24px}
.preview-primary .chart-label{font-size:8px;margin-bottom:6px}
.preview-primary .trend-svg{max-height:70px}
.preview-primary .chart-dates{font-size:9px}
.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:8px 0}
.preview-caption{font-size:11px;color:var(--muted)}
.preview-footer .text-button{font-size:11px;color:var(--fg)}
.preview-loading{padding:90px 0;text-align:center;color:var(--muted)}
.landing-footer{text-align:center;padding-top:34px}
.landing-footer .eyebrow{font-size:9px;letter-spacing:.19em}
.landing-providers{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 30px;font-size:12px;color:var(--muted);margin:15px auto 0}
.landing-footer .landing-note{font-size:10px;margin-top:17px}

@media(min-width:1700px){.landing-hero{padding-top:76px;padding-bottom:54px}}
@media(max-width:980px){
  .app-header{padding-inline:32px}
  .content.dashboard-content{padding:40px 40px 48px;justify-content:flex-start}
  .dashboard .hero-metric{padding-right:32px}
  .dashboard .supporting-metrics{padding-left:30px}
  .dashboard .hero-metric .metric-value{font-size:min(96px,calc(150cqw / var(--digits,7)))}
  .dashboard .supporting-metric .metric-value{font-size:min(64px,calc(150cqw / var(--digits,5)))}
  .dashboard .appearance-controls{margin-left:auto}
}
@media(max-width:760px){
  .app-header{padding-inline:24px}
  .content.dashboard-content{padding:32px 26px 40px;min-height:0}
  .dashboard .metrics-layout{display:flex;min-height:0;margin:32px 0}
  .dashboard .hero-metric{padding:0 0 28px}
  .dashboard .hero-metric .metric-value{font-size:min(clamp(60px,15vw,96px),calc(150cqw / var(--digits,7)))}
  .dashboard .supporting-metrics{padding:24px 0 0}
  .dashboard .supporting-metric .metric-value{font-size:min(clamp(28px,8.5vw,60px),calc(150cqw / var(--digits,5)))}
  .dashboard .metric-label{font-size:18px}
  .dashboard .supporting-metric .metric-label{font-size:14px}
  .dashboard .supporting-metric .comparison{font-size:21px}
  .dashboard .metric-source{font-size:11px}
  .dashboard .appearance-controls{width:100%}
  .dashboard .refresh-control{border-left:0;padding-left:0}
  .landing-header{min-height:78px;flex-wrap:nowrap;gap:16px}
  .landing-header .brand{font-size:16px;gap:10px}
  .landing-nav-action{font-size:12px;white-space:nowrap}
  .content.landing-content{padding:0 24px 36px}
  .landing-hero{padding:38px 0 34px}
  .landing-title{font-size:clamp(38px,9vw,54px)}
  .landing-description{font-size:14px;max-width:380px;margin-top:20px}
  .landing-preview{padding:18px 20px 0}
  .preview-heading{flex-wrap:wrap;gap:9px;padding-bottom:18px}
  .preview-period{width:100%;margin-left:0;font-size:10px}
  .preview-metrics{grid-template-columns:1fr;gap:24px;padding-top:22px}
  .preview-hero-metric .preview-value{font-size:56px}
  .preview-primary .trend-svg{max-height:80px}
  .preview-secondary{border-left:0;border-top:1px solid var(--line);padding:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .preview-secondary .preview-metric+.preview-metric{border-top:0;border-left:1px solid var(--line);padding:0 0 0 18px}
  .preview-value{font-size:32px}
  .preview-metric-label{font-size:12px}
  .preview-footer{gap:8px}
  .preview-caption{font-size:10px;max-width:110px}
  .landing-providers{gap:12px 22px;font-size:11px}
}

@media(min-width:761px) and (max-height:820px){
  .content.dashboard-content{padding-top:32px;padding-bottom:40px}
  .dashboard .metrics-layout{min-height:320px;margin:24px 0}
  .dashboard .metric-label{font-size:18px;min-height:28px}
  .dashboard .hero-metric .metric-value{font-size:min(96px,calc(150cqw / var(--digits,7)));line-height:1.08}
  .dashboard .supporting-metric .metric-value{font-size:min(60px,calc(150cqw / var(--digits,5)));line-height:1.08}
  .dashboard .comparison{font-size:24px;line-height:1.3}
  .dashboard .metric-source{font-size:12px;margin-top:8px}
  .dashboard .supporting-metric{padding-bottom:20px}
  .dashboard .supporting-metric+.supporting-metric{padding-top:20px}
  .dashboard .trend{padding-top:20px}
  .dashboard .trend-svg{max-height:76px}
}

/* The message carries the page; motion adds hierarchy without hiding content. */
.landing-title{margin-top:0}
.landing-description{max-width:420px}
.landing-hero{padding-top:64px}
.landing-header .landing-motion{margin-left:auto;color:var(--muted)}
.landing-header .landing-nav-action{margin-left:0}
@media(max-width:760px){
  .landing-hero{padding-top:38px}
  .landing-header{gap:10px}
  .landing-header .brand{font-size:15px}
  .landing-header .landing-motion{min-width:32px;width:32px;padding:4px}
  .landing-header .landing-nav-action{font-size:11px;gap:3px}
}

/* Projects, metric provenance and accessible chart inspection. */
.connections-screen{max-width:1120px;margin:auto;min-height:0}
.projects-heading{margin:12px 0 28px}.projects-heading h1{font-size:36px;letter-spacing:-.04em}.projects-heading p{font-size:13px;margin-top:6px}
.project-filter{margin-bottom:24px}.project-filter .text-button{margin-left:auto;font-size:12px}
.connections-grid{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:32px}
.provider-list{margin-top:0}.provider-row{min-height:82px;padding:14px 16px;gap:14px}.provider-name{font-size:14px}.provider-description{font-size:11px}
.add-source-row{display:flex;gap:12px;margin-top:20px}.add-source-row .select{flex:1;min-width:0;font-size:12px}.add-source-row .button{font-size:12px}
.empty-sources{padding:32px 0;font-size:13px}.source-empty p{margin-top:14px;font-size:13px}
.connection-editor{padding:24px;background:var(--surface)}.editor-fields{padding:20px 0}.editor-heading{padding-bottom:20px}.editor-heading h2{font-size:20px}
.import-actions{padding-top:22px}.metric-hint{display:block;font-size:10px}.source-mappings h2{margin-bottom:6px}.imported-metric-row{border-bottom:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:1fr 1.2fr;gap:8px 12px;align-items:center}.imported-metric-row h3{font-size:13px}.imported-metric-row .select{width:100%;font-size:11px;min-width:0;padding-left:10px}.imported-metric-row .text-button{grid-column:2;font-size:11px;min-height:24px;padding:0;justify-self:start}.conflict-note{color:var(--accent);font-size:11px;margin-top:5px}
.metric-attention{display:flex;align-items:center;gap:18px;margin-bottom:20px}.metric-attention .text-button{font-size:12px}
.breakdown-row{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:12px 0;font-variant-numeric:tabular-nums}.breakdown-name{display:flex;flex-direction:column;gap:4px}.breakdown-toggle{font-size:12px}
.dashboard .supporting-metric .metric-label{font-size:16px;letter-spacing:0}.dashboard .detail-panel{font-size:13px}
.chart-plot{position:relative;height:118px}.chart-plot .trend-svg{height:100%;max-height:none;width:100%}.chart-point{position:absolute;z-index:1;width:32px;height:32px;transform:translate(-50%,-50%);padding:0;border-radius:50%;cursor:crosshair}.chart-point:hover,.chart-point:focus{z-index:3;outline:1px solid var(--accent);background:var(--hover)}.chart-tooltip{display:none;position:absolute;bottom:35px;left:50%;transform:translateX(-50%);padding:9px 13px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--fg);min-width:112px;font-size:10px;white-space:nowrap;box-shadow:0 6px 25px #0003;text-align:left;pointer-events:none}.chart-tooltip strong{font-size:15px;display:block;margin-top:3px;font-weight:500;font-variant-numeric:tabular-nums}.chart-point:hover .chart-tooltip,.chart-point:focus .chart-tooltip{display:block}.chart-point.first .chart-tooltip{left:0;transform:none}.chart-point.last .chart-tooltip{left:auto;right:0;transform:none}.preview-primary .chart-plot{height:70px}
@media(min-width:761px) and (max-height:820px){.dashboard .chart-plot{height:76px}}
@media(max-width:980px){.connections-grid{grid-template-columns:1fr}.connection-editor{max-width:620px;width:100%}}
@media(max-width:760px){.projects-heading{gap:12px}.projects-heading h1{font-size:30px}.projects-heading .button{padding:10px 13px;font-size:12px}.projects-heading p{max-width:185px}.project-filter .text-button{margin-left:0}.provider-row .connection-status{font-size:9px}.imported-metric-row{grid-template-columns:1fr}.imported-metric-row .text-button{grid-column:1}.metric-attention{align-items:flex-start;flex-direction:column;gap:3px}.dashboard .supporting-metric .metric-label{font-size:12px;min-height:36px}.dashboard .chart-plot{height:118px}}

.share-mode{margin-bottom:26px}.public-intro{font-size:13px;margin-bottom:25px}.public-intro p+p{margin-top:12px}.public-link-controls{border-top:1px solid var(--line);padding-top:20px}.public-link-controls>.button{margin:14px 0}.public-link-controls>h3{font-size:15px;margin-top:28px}.public-link-item{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.public-url{display:block;overflow-wrap:anywhere;font-size:12px;margin-bottom:8px;color:var(--accent)}.public-link-item .text-button{font-size:12px}.studio-editor:has(.public-intro){max-width:430px}.snapshot-caption{max-width:600px}

/* One brand component and shared dimensions across every app route. */
.brand-mark{display:inline-block;flex-shrink:0;background:var(--accent);-webkit-mask:url('/brand/analytics-bridge-mark-v2.png') center/contain no-repeat;mask:url('/brand/analytics-bridge-mark-v2.png') center/contain no-repeat}
.app-header,.landing-header{min-height:90px;padding:20px 48px;gap:24px;max-width:1240px}
.landing-header{border-bottom:1px solid transparent}
.app-header .brand,.landing-header .brand{font-size:19px;line-height:1.2;gap:12px;font-weight:400;letter-spacing:-.035em}
.app-header .brand-mark{width:34px;height:34px}
.studio-header{gap:20px}.studio-header .studio-title{font-size:18px;padding-left:20px}.studio-header .back-button{font-size:12px}.studio-header .export-actions{gap:10px}.studio-header .export-actions .button{font-size:12px;padding-inline:16px}

/* Every metric is an independent tile. Order never determines chart ownership. */
.content.dashboard-content{padding-bottom:120px;justify-content:flex-start}
.dashboard .metric-board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row;grid-auto-rows:minmax(204px,auto);gap:16px;margin:30px 0;align-items:stretch}
.dashboard .metric-card{container-type:inline-size;position:relative;min-width:0;grid-column:span 2;display:flex;flex-direction:column;padding:23px 25px 16px;border:0;border-radius:14px;background:color-mix(in srgb,var(--fg) 4%,transparent);scroll-margin:28px}
.dashboard .metric-card.tile-wide{grid-column:span 4}
.dashboard .metric-card.with-chart{grid-row:span 2}

.metric-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.dashboard .metric-card .metric-label{font-size:14px;letter-spacing:0;min-height:0;overflow-wrap:anywhere}
.dashboard .metric-card .metric-value{font-size:min(56px,calc(150cqw / var(--digits,5)));margin:12px 0 4px -3px;line-height:1.1;letter-spacing:-.055em}
.dashboard .metric-card.tile-wide .metric-value{font-size:min(80px,calc(150cqw / var(--digits,7)))}
.dashboard .metric-card .comparison{font-size:19px;line-height:1.3}
.dashboard .metric-card .comparison-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 9px}
.dashboard .metric-card .comparison-caption{font-size:10px;white-space:normal}
.metric-card-heading .metric-drag-handle{margin-right:-7px;color:var(--muted)}
.metric-card .metric-source{font-size:11px;margin-top:8px}
.tile-history{margin-top:auto;padding-top:28px;width:100%;min-width:0}
.dashboard .tile-history .trend{padding:0;margin:0}
.dashboard .tile-history .chart-plot{height:130px}
.tile-history .chart-label{font-size:9px;letter-spacing:.1em}
.tile-history .chart-dates{font-size:10px}
.tile-history-empty{margin-top:20px;color:var(--muted);font-size:11px}
.tile-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:16px;margin-top:auto}
.with-chart .tile-footer{margin-top:0}
.tile-chart-toggle,.tile-size-toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:11px;padding:3px 0;color:var(--muted);white-space:nowrap}
.tile-chart-toggle:hover:not(:disabled),.tile-size-toggle:hover{color:var(--fg)}
.tile-chart-toggle[aria-pressed=true]{color:var(--accent)}
.metric-card .metric-tools{margin:8px 0 0;padding-bottom:5px;border-bottom:1px solid var(--line)}
.metric-board .metric-source{max-width:100%;overflow-wrap:anywhere}
.dashboard-empty{min-height:360px}.dashboard-empty h1{font-size:32px}
.metric-tools{display:flex;align-items:center;gap:4px;width:100%;margin-bottom:14px;color:var(--muted)}
.metric-drag-handle,.metric-tool{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border:1px solid transparent;border-radius:5px;padding:5px}
.metric-drag-handle{cursor:grab;touch-action:none}.metric-drag-handle:active{cursor:grabbing}.metric-drag-handle path{stroke-width:3}
.metric-drag-handle:hover,.metric-tool:hover:not(:disabled){color:var(--fg);background:var(--hover);border-color:var(--line)}
.metric-tool:disabled{opacity:.25}.metric-position{font-size:10px;flex:1;padding-left:3px}.metric-tool.remove-metric{margin-left:4px}
.rearranging .metric-card[data-dragging=true]{opacity:.35}.rearranging .metric-card[data-drop-target=true]{outline:1px dashed var(--accent);outline-offset:3px;background:var(--hover)}
.rearrange-hint{font-size:11px;color:var(--muted);margin:-12px 0 22px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.metric-picker-scrim{position:fixed;inset:0;z-index:79;background:#0005;backdrop-filter:blur(5px);cursor:default}
.metric-picker{position:fixed;z-index:80;top:50%;left:50%;translate:-50% -50%;width:min(480px,calc(100% - 32px));max-height:min(85svh,740px);display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--bg);box-shadow:0 24px 80px #0005}
.metric-picker h2{font-size:19px;letter-spacing:-.03em}.metric-picker .section-heading{margin-bottom:18px}.metric-picker .section-heading .small{display:block;margin-top:3px;font-size:11px}
.metric-picker input{width:100%;font-size:12px;flex-shrink:0}
.metric-picker-list{overflow:auto;overscroll-behavior:contain;margin:12px -8px 0;min-height:50px}
.metric-picker-row{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;text-align:left;min-height:65px;padding:12px;border-radius:6px;border:1px solid transparent}
.metric-picker-row:hover:not(:disabled){background:var(--hover);border-color:var(--line);color:var(--accent)}
.metric-picker-row:disabled{opacity:1;color:var(--muted);cursor:default}.metric-picker-row:disabled>.icon{color:var(--positive)}
.picker-metric-copy{display:flex;flex-direction:column;gap:3px}.picker-metric-name{font-size:13px}.picker-metric-copy .small{font-size:11px;font-variant-numeric:tabular-nums}
.picker-manage{align-self:flex-start;font-size:11px;margin-top:12px}.picker-empty{font-size:12px;padding:22px 12px}
@media(max-width:1100px){.studio-header{flex-wrap:wrap}.studio-header .export-actions{margin-left:auto}.studio-header .studio-title{font-size:16px}}
@media(max-width:760px){
  .app-header,.landing-header{padding:18px 24px;min-height:80px;gap:12px}
  .app-header .brand,.landing-header .brand{font-size:16px;gap:10px}
  .landing-header>.landing-nav-action{margin-left:0;font-size:11px;padding:9px 12px}
  .landing-header .landing-motion{margin-left:auto}
  .studio-header .brand{margin-right:auto}.studio-header .back-button{order:2}.studio-header .studio-title{order:3}.studio-header .export-actions{order:4}
  .content.dashboard-content{padding:32px 26px 120px}
  .metric-tools{gap:8px}.metric-tool,.metric-drag-handle{width:36px;height:36px}.metric-position{flex:1}.metric-picker{max-height:65svh;padding:18px}
  .dashboard-empty h1{font-size:28px}.dashboard .appearance-controls .text-button .icon{display:block}
}
@media(prefers-reduced-motion:reduce){.add-metric-button{transition:none}}

@media(max-width:380px){.app-header,.landing-header{padding-inline:18px;gap:8px}.app-header .brand,.landing-header .brand{font-size:14px;gap:8px}.landing-header .landing-motion{min-width:28px;width:28px;flex-shrink:0}.landing-header>.landing-nav-action{font-size:10px;padding-inline:8px;margin-left:0}}

.demo-update-note{font-size:11px;color:var(--muted);margin-top:14px}.chart-point{min-width:2px}

/* Bento reflows without discarding saved desktop tile preferences. */
@media(max-width:980px){
  .app-header,.landing-header{padding-inline:32px;gap:18px}
  .dashboard .metric-board{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dashboard .metric-card.tile-wide{grid-column:span 2}
  .dashboard .metric-board.count-1 .metric-card{grid-column:span 4}
  .dashboard .metric-card{padding:20px}
}
@media(max-width:600px){
  .content.dashboard-content{padding-inline:20px}
  .dashboard .metric-board{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:14px;margin:24px 0}
  .dashboard .metric-board .metric-card,.dashboard .metric-board.count-1 .metric-card{grid-column:1;grid-row:auto;min-height:210px;padding:20px}
  .dashboard .metric-card .metric-value,.dashboard .metric-card.tile-wide .metric-value{font-size:min(60px,calc(150cqw / var(--digits,5)))}
  .dashboard .metric-card.with-chart{min-height:365px}
  .tile-size-toggle{display:none}
  .tile-chart-toggle{min-height:38px;font-size:11px}
  .dashboard .tile-history .chart-plot{height:110px}
  .metric-card .metric-tools{gap:8px}
}

.account-card,.policy-card {max-width:560px;margin:70px auto 120px;padding:36px;border:1px solid var(--border, #ffffff20);border-radius:22px;background:rgba(15,16,19,.74);backdrop-filter:blur(20px);}
.account-card h1,.policy-card h1 {font-size:32px;letter-spacing:-1.2px;margin:0 0 16px;}
.account-card p,.policy-card p {line-height:1.7;margin:18px 0;}
.account-card h2,.policy-card h2 {font-size:18px;margin:24px 0 12px;}
.account-section {padding:8px 0 24px;border-top:1px solid #ffffff15;margin-top:24px;}
.account-card input {display:block;width:100%;margin:12px 0;}
.policy-card {max-width:760px;}
.policy-links {display:flex;gap:22px;justify-content:center;margin:22px 0; font-size:12px;}
.policy-links a,.policy-card a,.account-card a {color:inherit;text-decoration:underline;text-underline-offset:4px;}
@media(max-width:650px) {.account-card,.policy-card{margin:40px auto;padding:24px;}.account-card h1{font-size:26px;}}


/* The public ranking shares the demo card's width and quiet surface. */
.landing-leaderboard{max-width:860px;margin:28px auto 0;padding:28px 32px 20px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.leaderboard-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.leaderboard-heading h2{font-size:23px;font-weight:500;letter-spacing:-.8px;margin:0}
.leaderboard-description{min-height:1.7em;font-size:12px;color:var(--muted);line-height:1.7;margin-top:5px}
.leaderboard-heading .demo-badge{flex-shrink:0;font-size:10px}
.leaderboard-verified{font-size:10px;color:var(--positive);border:1px solid var(--line);border-radius:6px;padding:5px 9px;white-space:nowrap}
.leaderboard-table{width:100%;border-collapse:collapse;text-align:left}
.leaderboard-table thead th{font-size:10px;font-weight:400;color:var(--muted);padding:0 0 12px;border-bottom:1px solid var(--line)}
.leaderboard-table .leaderboard-rank{width:52px;color:var(--dim);font-variant-numeric:tabular-nums;font-size:11px;font-weight:400}
.leaderboard-row{border-bottom:1px solid var(--line);transition:background .18s ease}
.leaderboard-row:hover{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.leaderboard-row:last-child{border-bottom:0}
.leaderboard-row>th,.leaderboard-row>td{padding:18px 0;font-weight:400}
.leaderboard-project{display:flex;align-items:center;gap:13px;min-width:0}
.leaderboard-avatar{display:block;position:relative;isolation:isolate;overflow:hidden;flex-shrink:0;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--bg));border:1px solid var(--line)}
.leaderboard-avatar:before{content:'';position:absolute;inset:6px;z-index:-1;border-radius:50%;background:linear-gradient(135deg,#9881b980,#afba9550 50%,#c0906855);filter:blur(7px);transform:rotate(-25deg)}
.leaderboard-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.leaderboard-filters{display:flex;width:fit-content;gap:4px;padding:4px;margin:-6px 0 24px;background:color-mix(in srgb,var(--fg) 3%,transparent);border:1px solid var(--line);border-radius:8px}
.leaderboard-filter{padding:8px 16px;border-radius:5px;font-size:12px;color:var(--muted);transition:background .18s,color .18s}
.leaderboard-filter:hover{color:var(--fg);background:var(--hover)}
.leaderboard-filter.selected{color:var(--fg);background:color-mix(in srgb,var(--fg) 9%,transparent)}
.leaderboard-filter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.leaderboard-identity{display:flex;flex-direction:column;gap:5px;min-width:0}
.leaderboard-project-name{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.leaderboard-owner{font-size:10px;color:var(--muted);line-height:1.4}
a.leaderboard-owner{text-decoration:none;width:fit-content}
a.leaderboard-owner:hover{text-decoration:underline;text-underline-offset:3px;color:var(--fg)}
.leaderboard-table .leaderboard-number{text-align:right;white-space:nowrap;padding-left:20px}
.leaderboard-value{font-size:23px;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.leaderboard-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;border-top:1px solid var(--line);padding-top:16px;font-size:10px;color:var(--muted);line-height:1.6}
.leaderboard-privacy{font-size:10px;color:var(--dim);line-height:1.6;margin-top:7px}
.leaderboard-results{position:relative;min-height:max(120px,calc(var(--leaderboard-rows,0)*75.5px + 31px))}
.leaderboard-updating{position:absolute;top:-21px;right:0;font-size:10px;color:var(--muted);pointer-events:none}
.leaderboard-results.updating .leaderboard-table{opacity:.55}
.leaderboard-state{padding:12px 0 28px;font-size:13px;color:var(--muted);line-height:1.7}
.leaderboard-state .text-button{margin-top:8px;font-size:12px}
.landing-leaderboard .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:650px){
  .landing-leaderboard{padding:22px 20px 18px;margin-top:20px}
  .leaderboard-heading{gap:12px;margin-bottom:22px}
  .leaderboard-heading h2{font-size:21px}
  .leaderboard-description{min-height:3.4em}
  .leaderboard-results{min-height:max(120px,calc(var(--leaderboard-rows,0)*69px + 31px))}
  .leaderboard-table .leaderboard-rank{width:30px}
  .leaderboard-row>th,.leaderboard-row>td{padding-block:16px}
  .leaderboard-avatar{width:30px;height:30px;border-radius:8px;font-size:13px}
  .leaderboard-project{gap:9px}
  .leaderboard-project-name{font-size:12px}
  .leaderboard-table .leaderboard-number{padding-left:10px}
  .leaderboard-value{font-size:19px}
}

/* Explicit image selection stays independent of dashboard and link settings. */
.share-metric-hint{font-size:12px;color:var(--muted);margin:7px 0 12px;line-height:1.6}
.share-metric-options{display:flex;flex-direction:column;gap:6px;max-height:290px;overflow:auto;padding:2px;scrollbar-width:thin}
.share-metric-option{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;text-align:left;border-radius:7px;background:var(--hover);border:1px solid transparent}
.share-metric-option:hover{border-color:var(--line)}
.share-metric-option.selected{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.share-metric-check{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;border:1px solid var(--muted);border-radius:4px}
.selected .share-metric-check{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.share-metric-copy{display:flex;flex:1;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.share-metric-name{font-size:12px;overflow-wrap:anywhere}.share-metric-value{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.share-selection-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:var(--muted);margin-top:5px}.share-selection-summary .text-button{font-size:11px;min-height:30px}

/* Menus use the same typography and palette as the board, including options. */
.select-menu{position:relative;min-width:145px;font-size:13px;flex-shrink:0}
.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--bg) 32%,transparent);cursor:pointer;list-style:none;user-select:none;transition:background .2s,border-color .2s}
.select-trigger::-webkit-details-marker{display:none}.select-trigger>.icon{rotate:90deg;color:var(--muted);transition:rotate .2s}
.select-menu[open]>.select-trigger{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--hover)}
.select-menu[open]>.select-trigger>.icon{rotate:270deg}
.select-menu-panel{position:absolute;z-index:70;top:calc(100% + 8px);left:0;min-width:max(100%,230px);max-width:min(340px,calc(100vw - 40px));padding:7px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg) 97%,transparent);box-shadow:0 16px 55px #0005;backdrop-filter:blur(24px)}
.select-options{max-height:280px;overflow:auto;scrollbar-width:thin}
.select-option{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;text-align:left;padding:11px 12px;font-size:12px;border-radius:6px;white-space:normal}
.select-option:hover,.select-option:focus-visible{background:var(--hover);outline:none;color:var(--accent)}
.select-option[aria-selected=true]{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.select-menu-actions{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.select-menu-action{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;text-align:left;font-size:12px;border-radius:6px;color:var(--muted)}
.select-menu-action:hover,.select-menu-action:focus-visible{color:var(--fg);background:var(--hover)}
.studio-control>.select-menu,.metric-picker>.select-menu{width:100%}.metric-picker>.select-menu{margin-bottom:10px}.metric-picker .select-menu-panel{z-index:90;width:100%}
.select-menu.theme-select{min-width:112px}.appearance-controls .select-menu-panel{top:auto;bottom:calc(100% + 8px)}
/* The empty board tile is the dashboard's entry point for metrics and sources. */
.metric-add-tile{grid-column:span 2;min-height:204px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px dashed color-mix(in srgb,var(--fg) 18%,transparent);border-radius:14px;background:color-mix(in srgb,var(--fg) 1.5%,transparent);color:var(--muted);font-size:13px;transition:background .2s,border-color .2s,color .2s,opacity .6s}
.metric-add-tile:hover,.metric-add-tile:focus-visible{background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:var(--accent);color:var(--fg)}
.metric-add-tile>.icon{opacity:.7}.dashboard-start{margin-top:36px}.dashboard-start h1{font-size:28px;letter-spacing:-.04em}.dashboard-start p{font-size:13px;color:var(--muted);margin-top:10px}
.metric-picker .section-heading{align-items:flex-start}.metric-picker h2:focus{outline:none}.metric-picker .section-heading .small{line-height:1.5;max-width:335px}
.metric-picker-list{flex:1}.picker-back{min-height:30px;font-size:12px;padding:2px 0 12px;align-self:flex-start}
.source-picker-row{gap:14px}.source-picker-row .provider-mark{width:30px;height:32px;font-size:23px}.source-picker-row .provider-mark.apple{font-size:21px}.source-picker-row .picker-metric-copy{flex:1}.source-picker-row>span:not(.provider-mark){flex:1}
.picker-connect{border-top:1px solid var(--line);padding-top:15px;margin-top:12px;flex-shrink:0;font-size:12px}.picker-demo{font-size:10px;margin-top:8px}.picker-context{font-size:11px;line-height:1.6;margin-top:12px}.picker-replacement{font-size:10px;line-height:1.5;color:var(--accent);max-width:310px}
.metric-picker .select-menu-actions,.metric-picker .picker-connect{flex-shrink:0}.project-creator{margin-bottom:10px}
/* Controls fade without reflowing the metrics; activity restores them. */
.ambient-chrome{transition:opacity .55s ease}.ambient-context{position:fixed;top:36px;left:0;width:100%;display:flex;justify-content:center;gap:18px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .55s ease}
.dashboard .metric-board{transition:translate .7s ease}
html[data-dashboard-idle=true] .ambient-chrome{opacity:0!important;pointer-events:none}
html[data-dashboard-idle=true] .ambient-context{opacity:1}
html[data-dashboard-idle=true] .dashboard .metric-board{translate:0 var(--ambient-shift,0px)}
html[data-dashboard-idle=true] .dashboard,html[data-dashboard-idle=true] .dashboard *{cursor:none}
.ambient-toggle[aria-pressed=true]{color:var(--accent)}
@media(max-width:980px){.dashboard .appearance-controls{flex-wrap:wrap}.select-menu-panel{min-width:max(100%,210px)}}
@media(max-width:600px){.metric-add-tile{grid-column:1;min-height:145px}.filter-row>.select-menu{flex:1;min-width:135px}.appearance-controls{gap:12px}.appearance-controls .select-menu{min-width:100px}.ambient-context{top:24px;gap:10px;font-size:10px}.metric-picker{max-height:85svh;padding:20px}.select-menu-panel{min-width:100%;width:230px;max-width:calc(100vw - 40px)}}
@media(prefers-reduced-motion:reduce){.ambient-chrome,.ambient-context,.dashboard .metric-board,.select-trigger,.select-trigger>.icon,.metric-add-tile{transition:none}}

/* Theme previews mirror the soft mesh gradient. */
.theme-swatch:before{display:none}
.theme-swatch.ember{background:radial-gradient(ellipse at 85% 90%,#89472e,transparent 80%),radial-gradient(ellipse at 0 60%,#45385c,transparent 85%),#141621}
.theme-swatch.tide{background:radial-gradient(ellipse at 85% 90%,#265d76,transparent 80%),radial-gradient(ellipse at 0 60%,#443f71,transparent 85%),#121923}
.theme-swatch.pearl{background:radial-gradient(ellipse at 85% 90%,#d2bdaa,transparent 80%),radial-gradient(ellipse at 0 60%,#c6bfd0,transparent 85%),#eee9e2}

.wallpaper-help{font-size:12px;color:var(--muted);text-align:right;margin-top:12px;line-height:1.5}

/* RevenueCat project import keeps credentials masked and selection readable. */
.project-import { max-width: 720px; margin: 24px auto; text-align: left; }
.project-import > label { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.project-import > .import-project-choice { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.045); }
.project-import .import-project-choice input { width: 18px; height: 18px; accent-color: var(--accent, #efb59a); }
.project-import hr { border: 0; height: 1px; background: rgba(255,255,255,.08); margin: 28px 0; }
.project-import .button-row { flex-wrap: wrap; }

/* Project-first import flow; provider choices share the dashboard's soft cards. */
.import-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.import-heading h2{margin:0 0 8px}.import-heading p{margin:0 0 22px;max-width:580px}
.import-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.import-method{display:grid;grid-template-columns:36px 1fr 20px;align-items:center;gap:8px 12px;padding:22px;text-align:left;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:18px;font:inherit;cursor:pointer;transition:background .2s,transform .2s}
.import-method:hover{background:var(--hover);transform:translateY(-2px)}
.import-method .small{grid-column:2;line-height:1.6}.import-method>.icon:last-child{grid-column:3;grid-row:1/3}
.import-method.planned{grid-column:1/-1;cursor:default;opacity:.6;background:transparent;transform:none}
.import-fallback{margin:22px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.import-fallback-title{cursor:pointer;font-size:13px}.import-fallback label{display:block;margin:16px 0}
.import-project-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.import-project-choice{display:flex;align-items:center;gap:12px}.import-project-choice>span{display:grid;gap:5px}
.import-project-choice input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--accent)}
.import-project-row .select-menu{min-width:195px}.project-import>.text-button{margin-top:18px}.project-import .button-row{flex-wrap:wrap}
@media(max-width:680px){.import-methods{grid-template-columns:1fr}.import-project-row{align-items:flex-start;flex-direction:column}.import-project-row .select-menu{width:100%}}

.project-import>p{margin:14px 0}.project-import>.button+.text-button{margin-left:18px}.project-import>.connection-status{display:inline-block;margin:4px 0 8px}.project-import .button-row{gap:16px;margin:12px 0}
@media(prefers-reduced-motion:reduce){.import-method{transition:none}.import-method:hover{transform:none}}

/* Source identity stays with the number, including in Wallpaper mode. */
.metric-providers{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0}
.metric-provider{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:4px;border-radius:8px;background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--muted);transition:background .15s,color .15s}
.metric-provider:hover,.metric-provider:focus-visible{background:var(--hover);color:var(--fg)}
.metric-provider .provider-mark{display:flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:15px;line-height:1;font-weight:600;letter-spacing:-.06em}
.metric-provider .provider-mark.apple{font-size:16px}
.import-capacity{margin:0 0 12px}.import-limit-note{padding:14px 16px;margin-bottom:20px;border-radius:8px;background:var(--hover);color:var(--muted);font-size:12px;line-height:1.6}.import-limit-note .text-button{font-size:12px;margin-top:6px}

/* Compact connector surfaces: one context, clear rows, optional details. */
.metric-picker{border-radius:16px;padding:24px}
.metric-picker .section-heading{margin-bottom:16px}
.metric-picker .section-heading .small{font-size:12px;margin-top:5px}
.metric-picker input{font-size:13px}
.metric-picker-row{min-height:54px;gap:12px;padding:10px 12px;border-radius:8px}
.picker-metric-copy{flex:1;min-width:0}
.picker-metric-name{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.picker-metric-value{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.metric-picker-row>.icon{flex-shrink:0}
.source-picker-row .provider-mark{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:8px;background:var(--hover);font-size:19px}
.source-picker-row>.picker-availability{flex:none;font-size:11px}
.source-picker-row:disabled{opacity:.55}
.picker-connect{display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;min-height:44px}
.picker-demo{margin-top:4px}
.connections-screen{max-width:960px}
.connections-screen .projects-heading{margin-bottom:22px;align-items:center}
.connections-screen .projects-heading h1{font-size:30px}
.connections-screen .provider-row{min-height:72px}
.connections-screen .provider-row .provider-mark{font-size:26px;width:34px;height:34px}
.connections-screen .connection-editor{border-radius:14px}
.connections-screen.live-sources{max-width:680px;width:100%}
.source-workspace{width:100%;max-width:680px;margin:0 auto}
.source-workspace>h2{font-size:20px;margin:28px 0 8px}
.source-workspace>p{font-size:13px;line-height:1.6;margin-bottom:18px}
.source-workspace>label{display:grid;gap:8px;margin:16px 0;font-size:12px}
.source-card{padding:22px 24px;border-radius:14px;background:var(--surface);margin-bottom:20px}
.source-card-heading{display:flex;align-items:center;gap:14px}
.source-card-heading>.provider-mark{width:36px;height:36px;font-size:26px;flex-shrink:0}
.source-card-identity{min-width:0;flex:1}.source-card-identity h3{font-size:16px;font-weight:500;overflow-wrap:anywhere}
.source-card-identity .small{display:block;margin-top:5px;font-size:11px}
.source-card-heading .connection-status{font-size:11px;white-space:nowrap}
.source-card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:22px}
.source-card-actions .button,.source-card-actions .text-button{font-size:12px}
.source-card-notice{font-size:12px;line-height:1.6;color:var(--accent);margin-top:16px}
.source-card-details{margin-top:20px;border-top:1px solid var(--line);padding-top:14px;font-size:12px}
.source-card-details summary{color:var(--muted);cursor:pointer;width:fit-content}
.source-card-details p{margin:14px 0;line-height:1.6}
.source-card-details .text-button{font-size:12px}
.project-import{max-width:600px;border-radius:14px}
.import-heading{align-items:center;margin-bottom:18px}.import-heading h2{font-size:20px;margin:0}
.import-methods{grid-template-columns:1fr;gap:8px}
.import-method{grid-template-columns:32px 1fr 16px;gap:3px 14px;padding:16px;border-radius:10px;border-color:transparent}
.import-method>.provider-mark,.import-method>.icon:first-child{grid-column:1;grid-row:1/3;align-self:center}
.import-method>strong{grid-column:2;grid-row:1;font-size:14px;font-weight:500}
.import-method .small{grid-column:2;grid-row:2;font-size:12px}
.import-method:hover{transform:none;border-color:var(--line)}
.import-method.planned{padding-block:12px}
.import-method.planned>strong{font-size:13px;grid-row:1/3;align-self:center}
.import-method.planned .small{grid-column:3;grid-row:1/3;white-space:nowrap;font-size:11px}
.import-method.planned{grid-template-columns:32px 1fr auto}
.import-fallback{margin:18px 0;padding:14px 0}
.project-import>p{font-size:13px;line-height:1.6}
.project-import>p.small{font-size:11px}
.connections-screen .editor-fields{padding:18px 0 10px}
.connections-screen .editor-metrics:empty{display:none}
.connections-screen .import-actions{padding-top:16px}
@media(max-width:600px){
  .metric-picker{padding:20px}.metric-picker-row{gap:10px}
  .source-card{padding:18px}.source-card-heading{flex-wrap:wrap;gap:10px}
  .source-card-heading .connection-status{margin-left:46px}
  .source-card-heading .source-card-identity{flex-basis:calc(100% - 46px)}
  .import-method{padding:14px}.import-limit-note{padding:12px}
}

/* Add projects uses the same compact card from method choice through import. */
.project-import{width:100%;max-width:520px;margin:16px auto 24px;padding:24px}
.project-import .import-heading{gap:10px;margin:0 0 24px}
.project-import .import-heading h2{flex:1;min-width:0;font-size:20px;letter-spacing:-.035em}
.project-import .import-heading h2:focus{outline:none}
.project-import .import-heading>.icon-button{width:32px;height:32px;flex-shrink:0}
.project-import .import-back{margin-left:-6px}
.project-import .import-body{min-width:0}
.project-import .import-method{padding:16px 12px;gap:4px 14px;background:var(--hover)}
.project-import .import-method>.provider-mark{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:23px}
.project-import .import-method>.icon:first-child{margin:auto}
.project-import .import-coming-soon{font-size:11px;text-align:center;margin:18px 0 0;line-height:1.5}
.project-import .import-intro{font-size:13px;line-height:1.6;margin:0 0 20px}
.project-import .import-trust{font-size:11px;text-align:center;margin:12px 0 0}
.project-import .import-field{display:flex;flex-direction:column;gap:8px;font-size:12px;margin:0}
.project-import .import-field input{width:100%;min-width:0;font-size:13px}
.project-import .import-hint{font-size:12px;line-height:1.6;margin:10px 0 18px}
.project-import .import-fallback{border-bottom:0;margin:22px 0 0;padding:16px 0 0}
.project-import .import-fallback .import-field{margin:16px 0}
.project-import .import-fallback .button-row{justify-content:space-between;margin:16px 0 0;gap:10px}
.project-import .import-fallback .button,.project-import .import-fallback .text-button{font-size:12px}
.project-import .import-plan{border-top:1px solid var(--line);padding-top:16px;margin-top:22px}
.project-import .import-plan-row{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px}
.project-import .import-capacity{margin:0;font-variant-numeric:tabular-nums}
.project-import .import-plan p{font-size:11px;line-height:1.6;margin:6px 0 0}
.project-import .import-plan .text-button{font-size:11px;min-height:24px;padding:0}
.project-import .import-demo{display:block;margin-top:18px;font-size:11px}
.project-import .import-provider-context{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:18px}
.project-import .import-provider-context>.provider-mark{width:22px;height:24px;font-size:18px}
.project-import .import-provider-context>span:last-child{margin-left:auto;font-size:11px}
.project-import #import-project-search{width:100%;font-size:13px}
.project-import .import-selection-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0}
.project-import .import-selection-tools .text-button{font-size:11px;min-height:32px}
.project-import .import-project-list{max-height:340px;overflow:auto;overscroll-behavior:contain}
.project-import .import-project-row{gap:10px;padding:12px 8px;border:0;border-radius:8px;margin-bottom:3px;min-height:62px}
.project-import .import-project-row.is-selected{background:var(--hover)}
.project-import .import-project-choice{flex:1;min-width:0;cursor:pointer}
.project-import .import-project-choice>span{min-width:0;gap:3px}
.project-import .import-project-choice strong{font-size:13px;font-weight:500;overflow-wrap:anywhere}
.project-import .import-project-choice .small{font-size:11px;line-height:1.5}
.project-import .import-project-choice input{flex-shrink:0}
.project-import .import-project-row .select-menu{min-width:155px;max-width:190px}
.project-import .import-project-row .select-trigger{font-size:11px;padding:10px;min-height:36px}
.project-import .import-selection-summary{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin:18px 0 12px;font-variant-numeric:tabular-nums}
.project-import .import-cancel{display:flex;margin:12px auto 0;font-size:12px;min-height:32px}
.project-import .import-empty{font-size:13px;text-align:center;padding:24px 12px}
@media(max-width:600px){
  .project-import{padding:20px;margin:12px auto 20px}
  .project-import .import-heading{margin-bottom:20px}
  .project-import .import-heading h2{font-size:18px}
  .project-import .import-project-row{flex-direction:column;align-items:stretch}
  .project-import .import-project-row .select-menu{max-width:none;width:calc(100% - 30px);margin-left:30px}
  .project-import .import-project-list{max-height:45svh}
  .project-import .import-method{gap:4px 10px}
}

.project-onboarding{width:100%;padding-top:12px}
/* Let destination menus escape the scroller while they are open. */
.project-import .import-project-list:has(.select-menu[open]){overflow:visible;max-height:none}

/* Launch: shared polish. */
.button.secondary{background:color-mix(in srgb,var(--bg) 35%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.provider-soon{font-size:9px;letter-spacing:.06em;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:1px 5px;margin-left:7px}
.leaderboard-slot{display:none}
.account-card .text-button .icon{opacity:.7}

/* Landing v2. Centered hero, left-aligned reading sections. The memorable
   element is the stage: the board with a real exported image lifting off it. */
html{scroll-behavior:smooth}
.landing [id]{scroll-margin-top:28px}
.landing-header .landing-nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.landing-anchors{display:flex;gap:28px}
.landing-header .nav-link{font-size:14px;white-space:nowrap}
.landing-header .landing-nav-action{margin-left:4px}
.content.landing-content{max-width:1180px}
.landing-hero{max-width:760px}
.landing-description{max-width:520px;font-size:17px}
.landing-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.landing-note{font-size:12px}

.landing-stage{position:relative;max-width:1060px;margin:18px auto 0;padding-right:200px}
.stage-window{border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 40px 120px #00000047;padding:16px 18px 6px}
.stage-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 2px 14px;border-bottom:1px solid var(--line)}
.stage-project{font-size:13px;font-weight:500}
.stage-chip{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.stage-dates{font-size:11px;color:var(--muted)}
.stage-toolbar .demo-badge{margin-left:auto;font-size:9px;padding:2px 7px}
.stage-board{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:repeat(3,auto);gap:10px;padding:14px 0}
.stage-tile{border-radius:12px;background:color-mix(in srgb,var(--fg) 4.5%,transparent);padding:16px 18px;min-width:0}
.stage-tile-hero{grid-row:1/4;display:flex;flex-direction:column;padding:20px 22px 14px}
.stage-tile-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stage-tile-heading h3{font-size:13px;font-weight:500;color:var(--muted)}
.stage-provider{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.stage-provider .provider-mark{width:auto;height:auto;margin:0;font-size:13px;letter-spacing:-.04em}
.stage-provider .provider-mark.stripe{font-size:15px}
.stage-provider .provider-mark.firebase{font-size:16px}
.stage-provider .provider-mark.apple{width:17px;height:17px;font-size:11px;border-radius:4px}
.stage-value{display:block;font-size:30px;line-height:1.15;letter-spacing:-.05em;margin-top:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stage-tile-hero .stage-value{font-size:clamp(44px,5.4vw,66px);margin-top:12px}
.stage-change-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px}
.stage-change{font-size:13px;color:var(--positive);font-variant-numeric:tabular-nums}
.stage-change.negative{color:#e4b1a4}
.stage-caption{font-size:10px;color:var(--dim)}
.stage-tile-hero .trend{margin-top:auto;padding-top:22px}
.stage-tile-hero .chart-label{font-size:9px;margin-bottom:8px}
.stage-tile-hero .trend-svg{max-height:112px}
.stage-tile-hero .chart-dates{font-size:9px}
.landing-stage .preview-footer{padding:10px 2px;justify-content:flex-start;gap:18px}
.stage-snapshot{position:absolute;right:0;bottom:-58px;width:236px;margin:0;transform:rotate(3deg);transform-origin:50% 100%;animation:snapshot-lift 1s cubic-bezier(.2,.7,.2,1) .35s both}
.stage-snapshot canvas,.showcase-item canvas{display:block;width:100%;height:auto;border-radius:10px;border:1px solid #ffffff1f;background:linear-gradient(150deg,#1a1922,#3a2a20 70%,#171515);box-shadow:0 30px 70px #00000066}
.stage-snapshot canvas{aspect-ratio:4/5}
.stage-snapshot figcaption{font-size:11px;color:var(--muted);text-align:center;margin-top:12px;transform:rotate(-3deg)}
@keyframes snapshot-lift{from{opacity:0;transform:translateY(28px) rotate(0deg)}to{opacity:1;transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.stage-snapshot{animation:none}html{scroll-behavior:auto}}

.landing-section{max-width:1060px;margin:150px auto 0}
.section-intro{max-width:600px;margin-bottom:40px}
.section-intro h2{font-size:clamp(30px,3.4vw,40px);font-weight:400;letter-spacing:-.045em;line-height:1.12}
.section-intro p{font-size:15px;line-height:1.7;color:var(--muted);margin-top:14px;text-wrap:pretty}
.section-footnote{font-size:11px;color:var(--dim);margin-top:18px}

/* How it works: three steps joined by one accent line. */
.landing-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;list-style:none;margin:0;padding:0}
.landing-steps:before{content:'';position:absolute;top:14px;left:14px;right:0;height:1px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent) 75%,transparent)}
.landing-step{position:relative;min-width:0}
.step-node{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;border:1px solid var(--accent);background:var(--bg);color:var(--accent);font-size:12px;font-variant-numeric:tabular-nums}
.step-visual{height:96px;display:flex;align-items:center;margin:16px 0 18px}
.landing-step h3{font-size:17px;font-weight:500;letter-spacing:-.015em}
.landing-step p{font-size:14px;line-height:1.7;color:var(--muted);margin-top:8px;max-width:34ch;text-wrap:pretty}
.step-providers{display:flex;gap:10px}
.step-provider{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 65%,transparent);opacity:.38;filter:grayscale(1)}
.step-provider.live{opacity:1;filter:none;border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.step-provider .provider-mark{width:auto;height:auto;margin:0;font-size:20px}
.step-provider .provider-mark.stripe{font-size:24px}
.step-provider .provider-mark.firebase{font-size:26px}
.step-provider .provider-mark.apple{width:24px;height:24px;font-size:16px;border-radius:6px}
.step-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:260px}
.step-tile{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:8px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 65%,transparent)}
.step-tile-label{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step-tile-value{font-size:18px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.step-swatches{display:flex;padding-left:4px}
.step-swatch{width:54px;height:68px;border-radius:7px;border:1px solid #ffffff24;box-shadow:0 12px 26px #0000004d}
.step-swatch+.step-swatch{margin-left:-14px}
.step-swatch.ember{background:linear-gradient(150deg,#1b1a22 15%,#5a3422 75%,#1a1616);transform:rotate(-6deg)}
.step-swatch.tide{background:linear-gradient(155deg,#121a20 25%,#2f5866 80%,#18232a);transform:translateY(-6px)}
.step-swatch.pearl{background:linear-gradient(145deg,#e4e0d8,#c3bdb2 45%,#f6f0e3);transform:rotate(6deg)}

/* Sharing: real exports from the Share Studio renderer. */
.showcase-row{display:grid;grid-template-columns:1080fr 864fr 1920fr;gap:18px;align-items:end}
.showcase-item{margin:0;min-width:0}
.showcase-item.square canvas{aspect-ratio:1}
.showcase-item.portrait canvas{aspect-ratio:4/5}
.showcase-item.wide canvas{aspect-ratio:16/9}
.showcase-item figcaption{display:flex;align-items:baseline;gap:10px;margin-top:12px;font-size:11px;color:var(--muted)}
.showcase-item figcaption strong{font-size:13px;font-weight:500;color:var(--fg)}

/* Your data. */
.trust-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;list-style:none;margin:0;padding:0}
.trust-list li{border-top:1px solid var(--line);padding-top:22px}
.trust-list h3{font-size:17px;font-weight:500;letter-spacing:-.015em}
.trust-list p{font-size:14px;line-height:1.7;color:var(--muted);margin-top:8px;max-width:34ch}

/* Pricing. */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:800px}
.plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:28px 28px 26px;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.plan.featured{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 6%,color-mix(in srgb,var(--bg) 76%,transparent))}
.plan h3{font-size:15px;font-weight:500}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-top:14px}
.plan-amount{font-size:52px;line-height:1;letter-spacing:-.055em}
.plan-period{font-size:14px;color:var(--muted)}
.plan-note{font-size:12px;color:var(--muted);margin-top:10px;min-height:18px}
.plan ul{list-style:none;margin:24px 0 28px;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14px}
.plan li{display:flex;gap:10px;align-items:center}
.plan li .icon{color:var(--accent)}
.plan .plan-action{margin-top:auto;width:100%}
.plan .plan-action.quiet{background:transparent;color:var(--fg);border-color:var(--line)}
.plan .plan-action.quiet:hover{background:var(--hover);filter:none}

.landing-closing{text-align:center;margin:160px auto 0;max-width:700px}
.landing-closing h2{font-size:clamp(32px,4vw,48px);font-weight:400;letter-spacing:-.05em;margin-bottom:28px}

.landing-footer{text-align:left;max-width:1060px;margin:140px auto 0;padding-top:40px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-brand .brand{font-size:17px;gap:10px}
.footer-brand .brand-mark{width:26px!important;height:26px!important}
.footer-brand p{font-size:13px;color:var(--muted);margin-top:14px;max-width:260px;line-height:1.6}
.footer-column{display:flex;flex-direction:column;gap:10px;font-size:13px}
.footer-column h2{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:4px}
.footer-column a:hover{color:var(--accent)}
.footer-legal{font-size:11px;color:var(--dim);margin-top:44px}

@media(max-width:1080px){
  .landing-stage{padding-right:0}
  .stage-snapshot{position:relative;right:auto;bottom:auto;width:210px;margin:-70px 24px 0 auto}
}
@media(max-width:980px){
  .landing-anchors{display:none}
  .landing-section{margin-top:110px}
  .landing-steps,.trust-list{grid-template-columns:1fr;gap:32px}
  .landing-steps:before{bottom:0;right:auto;width:1px;height:auto;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent) 75%,transparent)}
  .landing-step{padding-left:52px}
  .step-node{position:absolute;left:0;top:0}
  .step-visual{height:auto;margin:4px 0 18px}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:760px){
  .landing-header .landing-nav{gap:16px}
  .landing-header .nav-link{font-size:12px}
  .landing-description{font-size:15px}
  .landing-actions .landing-cta{flex:1;max-width:220px}
  .stage-window{padding:12px 12px 4px;border-radius:12px}
  .stage-board{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .stage-tile-hero{grid-row:auto;grid-column:1/-1}
  .stage-tile:not(.stage-tile-hero):last-child{grid-column:1/-1}
  .stage-value{font-size:24px}
  .stage-tile{padding:14px}
  .stage-dates{display:none}
  .stage-snapshot{width:150px;margin:-56px 12px 0 auto}
  .showcase-row{grid-template-columns:1080fr 864fr;gap:12px}
  .showcase-item.wide{grid-column:1/-1}
  .showcase-item figcaption{flex-direction:column;gap:2px}
  .plans{grid-template-columns:1fr}
  .landing-closing{margin-top:110px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){.landing-header .landing-sign-in{display:none}}

/* Dashboard toolbar: scope on the left, freshness/refresh/customize on the
   right. Replaces the former bottom control strip. */
.dashboard .dashboard-toolbar{gap:14px;row-gap:12px}
.dashboard-toolbar .toolbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.dashboard-toolbar .freshness{font-size:12px;color:var(--muted);white-space:nowrap;margin-right:4px}
.toolbar-button,.dashboard-toolbar .customize-menu>.select-trigger{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:5px;font-size:13px;color:var(--fg);background:transparent;white-space:nowrap}
.toolbar-button:hover:not(:disabled){background:var(--hover);border-color:var(--muted)}
.dashboard-toolbar .customize-menu{flex:none;width:auto;min-width:0;margin:0}
.dashboard-toolbar .customize-menu>.select-trigger>.icon:last-child{opacity:.7}
.dashboard-toolbar .customize-menu .select-menu-panel{top:calc(100% + 8px);bottom:auto;left:auto;right:0;width:250px;min-width:250px}
.dashboard-toolbar .toolbar-done{min-height:44px;padding:0 18px}
@media(max-width:760px){
  .dashboard-toolbar .toolbar-actions{width:100%;margin-left:0}
  .dashboard-toolbar .freshness{flex:1;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:760px){
  /* Brand, demo badge and Share share the first row; navigation goes below. */
  .app-header:not(.landing-header):not(.studio-header)>.button{order:2;margin-left:12px;min-height:38px;padding:8px 14px}
  .app-header:not(.landing-header):not(:has(>.demo-badge))>.button{margin-left:auto}
  .app-header:not(.landing-header) .navigation{order:3;width:100%}
}
@media(max-width:420px){
  .app-header:not(.landing-header):not(.studio-header)>.button{font-size:0;gap:0;padding:8px 11px;min-width:42px}
}

/* Projects: sources first, then add a source, then the danger zone. */
.live-sources .sources-title,.add-source h2{font-size:13px;font-weight:500;color:var(--muted);margin:8px 0 12px}
.add-source{margin-top:32px}
.add-source-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.add-source-option{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;font-size:13px;text-align:left;color:var(--fg)}
.add-source-option:hover{border-style:solid;background:var(--hover)}
.add-source-option>span:not(.provider-mark){flex:1}
.add-source-option .provider-mark{width:28px;height:28px;font-size:17px;margin:0}
.add-source-option .provider-mark.stripe{font-size:21px}
.add-source-option .provider-mark.apple{width:24px;height:24px;font-size:15px;border-radius:6px}
.add-source-option .icon{color:var(--muted)}
.project-danger{margin-top:48px;padding-top:18px;border-top:1px solid var(--line)}
.project-danger .text-button.danger{font-size:12px;color:#d9a199}
.project-danger .text-button.danger:hover{color:#f0b8af}
.project-danger .button-row{align-items:center}
.sign-in-points{list-style:none;padding:0;margin:4px 0 2px;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--muted)}
.sign-in-points li{display:flex;align-items:center;gap:10px}
.sign-in-points .icon{color:var(--accent)}
.sign-in-points{margin-top:18px}
.account-identity{display:flex;align-items:center;justify-content:space-between;gap:16px}
.account-identity .text-button{font-size:13px}
.usage-meter{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin:10px 0 18px;max-width:320px}
.usage-meter span{display:block;height:100%;min-width:4px;background:var(--accent);border-radius:2px}
.account-card .text-button.danger{color:#d9a199}
.account-card .text-button.danger:hover{color:#f0b8af}

/* Dashboard v3: project pills, segmented period, richer tiles, breakdown drawer. */
.project-bar{display:flex;align-items:center;gap:10px;margin:0 0 18px}
.project-pills{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.project-pills::-webkit-scrollbar{display:none}
.project-pill{display:inline-flex;align-items:center;gap:9px;flex:none;height:40px;padding:0 16px 0 6px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 45%,transparent);font-size:13px;color:var(--muted);white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.project-pill:hover{color:var(--fg);border-color:color-mix(in srgb,var(--fg) 35%,transparent)}
.project-pill.selected{background:var(--button);color:var(--button-text);border-color:transparent;font-weight:500}
.project-pill.add{padding:0 16px 0 12px;gap:7px;border-style:dashed;background:transparent}
.project-pill-name{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.project-monogram,.project-count{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:10px;font-weight:600;letter-spacing:.02em;flex:none}
.project-monogram{color:#fff}
.project-monogram.tone-0{background:#b8693f}
.project-monogram.tone-1{background:#5b78c0}
.project-monogram.tone-2{background:#3f8f76}
.project-monogram.tone-3{background:#9a5a8a}
.project-monogram.tone-4{background:#a8862f}
.project-count{background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg);font-size:11px}
.project-pill.selected .project-count{background:color-mix(in srgb,var(--button-text) 14%,transparent);color:var(--button-text)}
.project-manage{flex:none;width:40px;height:40px;min-width:40px;border:1px solid var(--line);border-radius:50%;color:var(--muted)}
.project-manage:hover{color:var(--fg)}

.period-control{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg) 45%,transparent);max-width:100%;overflow-x:auto;scrollbar-width:none}
.period-control::-webkit-scrollbar{display:none}
.period-option{height:36px;padding:0 15px;border-radius:999px;font-size:13px;color:var(--muted);white-space:nowrap;flex:none}
.period-option:hover{color:var(--fg)}
.period-option.selected{background:color-mix(in srgb,var(--fg) 13%,transparent);color:var(--fg)}
.period-context{display:flex;align-items:center;gap:14px;min-width:0}
.dashboard-toolbar .period-context .date-label{margin-left:4px;font-size:14px}
.dashboard-toolbar .period-context .timezone{font-size:12px;padding-left:14px}

/* Tiles */
.metric-card .metric-label{color:var(--muted);font-size:14px}
.metric-card .metric-label:hover{color:var(--fg)}
.metric-card .comparison-row{align-items:center;gap:6px 10px;margin-top:10px}
.dashboard .metric-card .comparison{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;font-size:14px;line-height:1;letter-spacing:0;background:color-mix(in srgb,var(--positive) 15%,transparent)}
.dashboard .metric-card .comparison.negative{background:color-mix(in srgb,#e4b1a4 16%,transparent)}
.dashboard .metric-card .comparison.neutral{color:var(--muted);background:color-mix(in srgb,var(--fg) 7%,transparent)}
.dashboard .metric-card .comparison-caption{font-size:12px;color:var(--muted)}
.chart-endpoint{position:absolute;z-index:2;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);pointer-events:none}
.chart-point:hover,.chart-point:focus{outline:0;background:none}
.chart-point:after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .1s}
.chart-point:hover:after,.chart-point:focus-visible:after{opacity:1}
.chart-point:focus-visible{outline:1px solid var(--accent)}

/* Breakdown drawer */
.drawer-layer{position:fixed;inset:0;z-index:85;display:flex;justify-content:flex-end}
.drawer-scrim{position:absolute;inset:0;width:100%;height:100%;background:#0008;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:default}
.detail-panel.breakdown-drawer{position:relative;width:min(440px,100vw);height:100%;margin:0;border:0;border-left:1px solid var(--line);border-radius:0;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(24px);overflow-y:auto;padding:22px 28px 40px;animation:drawer-in .22s ease-out both}
@keyframes drawer-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.detail-panel.breakdown-drawer{animation:none}}
.drawer-eyebrow{font-size:12px;color:var(--muted)}
.drawer-metrics{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 22px}
.drawer-metric{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.drawer-metric.selected{background:var(--button);color:var(--button-text);border-color:transparent}
.breakdown-drawer h3{font-size:15px;font-weight:500;color:var(--muted);margin-top:8px}
.drawer-total{display:block;font-size:44px;letter-spacing:-.05em;line-height:1.15;margin:6px 0 6px;font-variant-numeric:tabular-nums}
.detail-panel.breakdown-drawer p{max-width:none}
.breakdown-drawer .drawer-definition{color:var(--fg);opacity:.85;font-size:14px;line-height:1.6;margin:18px 0 8px}
.breakdown-list{margin-top:18px;border-top:1px solid var(--line)}
.breakdown-drawer .breakdown-row{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
.breakdown-line{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.breakdown-drawer .breakdown-name{display:flex;flex-direction:column;gap:2px;font-size:14px}
.breakdown-value{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.breakdown-bar{height:4px;border-radius:2px;background:var(--line);margin-top:10px;overflow:hidden}
.breakdown-bar span{display:block;height:100%;min-width:3px;border-radius:2px;background:var(--accent)}

@media(max-width:760px){
  .project-bar{margin-bottom:14px}
  .project-pill{height:36px}
  .project-monogram,.project-count{width:24px;height:24px}
  .project-manage{width:36px;height:36px;min-width:36px}
  .period-control{width:100%}
  .period-option{flex:1;padding:0 10px}
  .period-context{width:100%}
  .detail-panel.breakdown-drawer{padding:18px 20px 32px}
}

/* Dashboard v4 "Single focus" (mockup 04-dashboard-v2-b). The first metric is a
   centered hero with a large smooth area chart; the rest sit in a quiet
   hairline row beneath. No tile containers. */
:root{--change-up:#79d39e;--change-down:#f0a493}
:root[data-theme=pearl]{--change-up:#2f7a4f;--change-down:#a2483c}
.content.dashboard-content{max-width:1240px}

.project-pill.selected,.period-option.selected{background:var(--accent);color:#1b1610;border-color:transparent;font-weight:500}
.project-pill.selected .project-count{background:#1b161024;color:#1b1610}
.project-pill.add{border:0;background:none;margin-left:10px;position:relative;overflow:visible}
.project-pill.add:before{content:'';position:absolute;left:-10px;top:9px;bottom:9px;width:1px;background:var(--line)}
.project-manage{border:0}
.period-control{border:0;background:none;padding:0;gap:8px;overflow:visible}
.period-option{height:36px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 45%,transparent)}
.period-option:hover{border-color:color-mix(in srgb,var(--fg) 35%,transparent)}
.dashboard-toolbar .toolbar-label,.dashboard-toolbar .customize-menu>.select-trigger>.icon:last-child{display:none}
.dashboard-toolbar .toolbar-button,.dashboard-toolbar .customize-menu>.select-trigger{width:40px;min-height:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
.dashboard-toolbar .customize-menu>.select-trigger>.icon:first-child{display:block}

.metric-board.focus-board{display:block;margin:30px 0 0}
.focus-board .metric-card{background:none;border-radius:0;min-height:0;container-type:normal}
.focus-board .metric-card-heading{min-height:0;gap:10px}
.focus-board .metric-providers{margin-left:0;gap:12px}
.focus-board .metric-provider{width:auto;height:auto;padding:0;gap:7px;background:none;border-radius:0;font-size:12px;color:var(--muted)}
.focus-board .metric-provider:hover{background:none;color:var(--fg)}
.focus-board .metric-provider .provider-mark{width:20px;height:20px;font-size:12px;margin:0}
.focus-board .metric-provider .provider-mark.stripe{font-size:15px}
.focus-board .metric-provider .provider-mark.firebase{font-size:15px}
.focus-board .metric-provider .provider-mark.apple{width:18px;height:18px;font-size:11px;border-radius:5px}
.focus-board .metric-drag-handle{margin-left:auto}
.dashboard .focus-board .comparison{display:inline;height:auto;padding:0;background:none;font-size:20px;line-height:1.2;letter-spacing:-.01em;color:var(--change-up)}
.dashboard .focus-board .comparison.negative{background:none;color:var(--change-down)}
.dashboard .focus-board .comparison.neutral{background:none;color:var(--muted)}
.dashboard .focus-board .comparison-caption{font-size:14px;color:var(--muted)}
.focus-board .comparison-row{align-items:baseline;gap:4px 12px;margin-top:6px}

.metric-card.focus-hero{padding:4px 0 0;align-items:center;text-align:center}
.focus-hero .metric-card-heading{justify-content:center;position:relative;width:100%}
.focus-hero .metric-drag-handle{position:absolute;right:0}
.dashboard .focus-hero .metric-label{font-size:20px;color:var(--fg);margin-top:8px}
.dashboard .focus-board .focus-hero .metric-value{font-size:clamp(60px,7.6vw,104px);font-weight:600;letter-spacing:-.05em;line-height:1.05;margin:6px 0 0}
.focus-hero .comparison-row{justify-content:center;margin-top:10px}
.dashboard .focus-hero .comparison{font-size:26px}
.dashboard .focus-hero .comparison-caption{font-size:17px}
.focus-hero .tile-history{width:100%;margin-top:22px}
.focus-hero .trend{padding-top:0}
.focus-hero .chart-label{display:none}
.dashboard .focus-hero .chart-plot{height:clamp(190px,24vw,290px)}
.focus-hero .chart-dates{font-size:12px;margin-top:8px}
.focus-hero .tile-history-empty{margin:28px 0 8px}
.focus-hero .metric-tools{width:100%}

.focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--line)}
.dashboard .metric-board .focus-grid>*{border-left:1px solid var(--line);padding:30px 34px 32px;min-height:0}
.dashboard .metric-board .focus-grid>:nth-child(3n+1){border-left:0;padding-left:0}
.dashboard .metric-board .focus-grid>:nth-child(n+4){border-top:1px solid var(--line)}
.dashboard .focus-item .metric-label{font-size:16px;color:var(--fg);margin-top:10px}
.dashboard .focus-board .focus-item .metric-value{font-size:clamp(38px,4.2vw,58px);font-weight:600;letter-spacing:-.045em;line-height:1.08;margin:6px 0 0}
.focus-item .tile-history{margin-top:16px}
.focus-item .chart-label{display:none}
.dashboard .focus-item .chart-plot{height:64px}
.focus-item .chart-dates{display:none}
.focus-grid .metric-add-tile{grid-column:auto;min-height:0;flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;border:0;border-left:1px solid var(--line);border-radius:0;background:none;font-size:14px}
.dashboard .metric-board .focus-grid>.metric-add-tile:nth-child(3n+1){border-left:0}
.dashboard .metric-board .focus-grid>.metric-add-tile:nth-child(n+4){border-top:1px solid var(--line)}
.focus-grid .metric-add-tile:hover,.focus-grid .metric-add-tile:focus-visible{background:var(--hover);border-color:var(--line)}
.focus-board .metric-tools{margin:10px 0 0}
.focus-board[data-dragging],.focus-board .metric-card[data-drop-target=true]{outline-offset:6px}

@media(max-width:980px){
  .focus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard .metric-board .focus-grid>*{border-left:1px solid var(--line);padding:26px 24px;border-top:0}
  .dashboard .metric-board .focus-grid>:nth-child(3n+1){border-left:1px solid var(--line);padding-left:24px}
  .dashboard .metric-board .focus-grid>:nth-child(2n+1){border-left:0;padding-left:0}
  .dashboard .metric-board .focus-grid>:nth-child(n+3){border-top:1px solid var(--line)}
  .dashboard .metric-board .focus-grid>.metric-add-tile:nth-child(3n+1){border-left:1px solid var(--line)}
  .dashboard .metric-board .focus-grid>.metric-add-tile:nth-child(2n+1){border-left:0}
}
@media(max-width:760px){
  .project-pill.add{margin-left:8px}
  .period-control{gap:6px;overflow-x:auto}
  .period-option{flex:none;padding:0 13px}
  .focus-grid{grid-template-columns:1fr;margin-top:32px}
  .dashboard .metric-board .focus-grid>*,.dashboard .metric-board .focus-grid>:nth-child(3n+1),.dashboard .metric-board .focus-grid>:nth-child(2n+1),.dashboard .metric-board .focus-grid>.metric-add-tile:nth-child(3n+1){border-left:0;padding:22px 0;border-top:0}
  .dashboard .metric-board .focus-grid>*+*{border-top:1px solid var(--line)!important}
  .dashboard .focus-board .focus-hero .metric-value{font-size:clamp(46px,13vw,64px)}
  .dashboard .focus-hero .comparison{font-size:20px}
  .dashboard .focus-hero .comparison-caption{font-size:13px}
}
.dashboard .metric-board .focus-grid>*{grid-column:auto;grid-row:auto}
.dashboard .metric-board .focus-grid>.metric-card{grid-column:auto;grid-row:auto}
:root[data-theme=pearl] .project-pill.selected,:root[data-theme=pearl] .period-option.selected{color:#f8f5ed}
:root[data-theme=pearl] .project-pill.selected .project-count{background:#f8f5ed2e;color:#f8f5ed}