-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.css
More file actions
176 lines (158 loc) · 40.8 KB
/
Copy pathapp.css
File metadata and controls
176 lines (158 loc) · 40.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
:root{
color-scheme:dark;
--bg:#0b0c0f;
--sidebar:rgba(17,18,22,.82);
--surface:#15171b;
--surface-raised:#1b1d22;
--surface-soft:#202329;
--hairline:rgba(255,255,255,.085);
--hairline-strong:rgba(255,255,255,.14);
--text:#f5f5f7;
--secondary:#a1a1a6;
--tertiary:#6e6e73;
--blue:#2997ff;
--blue-soft:#64d2ff;
--orange:#ff9f0a;
--green:#30d158;
--red:#ff453a;
--shadow:0 18px 55px rgba(0,0,0,.22);
--radius:18px;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif;
--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",sans-serif;
--mono:"SF Mono",ui-monospace,Menlo,Monaco,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button,input,select{outline:none}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex="0"]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 35%,transparent);border-color:var(--blue)!important}
button:disabled{opacity:.34;cursor:default}
svg{display:block}
h1,h2,h3,p{margin:0}
::selection{background:color-mix(in srgb,var(--blue) 42%,transparent);color:var(--text)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--hairline-strong);border:3px solid transparent;border-radius:10px;background-clip:padding-box}
.app-shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:28px 18px 22px;border-right:1px solid var(--hairline);background:var(--sidebar);backdrop-filter:blur(24px) saturate(125%);display:flex;flex-direction:column;z-index:8}
.brand{display:flex;align-items:center;gap:12px;padding:0 10px 30px;text-decoration:none;color:inherit}
.brand-mark{width:31px;height:31px;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:6px;border-radius:9px;background:var(--text)}
.brand-mark i{display:block;width:4px;border-radius:2px;background:var(--bg)}
.brand-mark i:nth-child(1){height:10px}.brand-mark i:nth-child(2){height:18px}.brand-mark i:nth-child(3){height:14px}
.brand-copy{display:grid;line-height:1.12}.brand-copy strong{font-size:16px;letter-spacing:-.25px}.brand-copy small{font-size:10px;color:var(--secondary);margin-top:4px}
.nav-list{display:grid;gap:5px}
.nav-item{height:44px;border:0;border-radius:11px;background:transparent;color:var(--secondary);display:flex;align-items:center;gap:12px;padding:0 12px;text-align:left;transition:background .16s cubic-bezier(.16,1,.3,1),color .16s cubic-bezier(.16,1,.3,1)}
.nav-item:hover{background:var(--surface-raised);color:var(--text)}
.nav-item.active{background:var(--surface-soft);color:var(--text)}
.nav-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.privacy-note{margin-top:auto;padding:16px 12px 3px;border-top:1px solid var(--hairline)}
.privacy-status{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--secondary)}
.privacy-status i,.demo-badge i,.snapshot-status i{display:block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 12%,transparent)}
.privacy-note p{font-size:10px;color:var(--tertiary);margin-top:8px;line-height:1.55}
.main{width:100%;max-width:1640px;margin:0 auto;padding:26px 38px 30px;min-width:0}
.topbar{height:40px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tertiary)}
.breadcrumb svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6}.breadcrumb strong{color:var(--secondary);font-weight:500}
.top-actions{display:flex;align-items:center;gap:8px}
.language-switch{height:34px;display:flex;align-items:center;padding:3px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface)}.language-switch button{height:26px;min-width:30px;border:0;border-radius:7px;background:transparent;color:var(--tertiary);font:600 9px var(--mono);transition:background .16s,color .16s}.language-switch button.active{background:var(--surface-soft);color:var(--text)}
.demo-badge{height:32px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--hairline);border-radius:10px;color:var(--secondary);font-size:11px;background:var(--surface)}
.demo-badge i{background:var(--orange);box-shadow:none}
.icon-button,.export-button{height:34px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center;transition:background .16s,border-color .16s,transform .12s}
.icon-button:hover,.export-button:hover{background:var(--surface-raised);border-color:var(--hairline-strong)}
.icon-button:active,.export-button:active{transform:scale(.97)}
.icon-button{width:34px;padding:0}.icon-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-light-icon{display:none}
.export-button{gap:7px;padding:0 12px}.export-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.export-button span{font-size:11px}
.refresh-cluster{position:relative;display:flex;align-items:center}.refresh-button{height:36px;display:flex;align-items:center;gap:8px;border:0;border-radius:11px;padding:0 13px;background:var(--blue);color:#fff;box-shadow:0 5px 15px color-mix(in srgb,var(--blue) 24%,transparent);transition:transform .14s,box-shadow .18s,background .18s}.refresh-button:hover{background:color-mix(in srgb,var(--blue) 88%,#000);box-shadow:0 7px 19px color-mix(in srgb,var(--blue) 29%,transparent)}.refresh-button:active{transform:scale(.97)}.refresh-button.loading{pointer-events:none;opacity:.82}.refresh-button.loading svg{animation:refresh-spin .7s linear infinite}.refresh-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.refresh-button span{font-size:11px;font-weight:560;white-space:nowrap}.refresh-info{width:25px;height:25px;margin-left:-4px;border:1px solid var(--hairline);border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--tertiary);transform:translate(8px,-14px);transition:color .15s,background .15s}.refresh-info:hover,.refresh-info[aria-expanded="true"]{color:var(--blue);background:var(--surface-raised)}.refresh-info svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.refresh-popover{position:absolute;z-index:20;right:0;top:46px;width:310px;padding:17px;border:1px solid var(--hairline-strong);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);animation:popover-in .18s cubic-bezier(.16,1,.3,1)}.refresh-popover[hidden]{display:none}.refresh-eyebrow{display:block;color:var(--tertiary);font:8px var(--mono);letter-spacing:.08em;text-transform:uppercase}.refresh-popover strong{display:block;margin-top:5px;font-size:13px}.refresh-popover p{margin-top:8px;color:var(--secondary);font-size:10px;line-height:1.55}.refresh-note{display:flex;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--hairline);color:var(--tertiary);font-size:9px;line-height:1.5}.refresh-note i{width:6px;height:6px;margin-top:4px;border-radius:50%;background:var(--green);flex:0 0 auto}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:54px 0 30px}
.hero h1{font:650 clamp(34px,4.2vw,58px)/1.06 var(--display);letter-spacing:-.045em;max-width:760px}
.hero p{color:var(--secondary);font-size:15px;margin-top:13px;max-width:620px}
.snapshot-status{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 8px;flex:0 0 auto;color:var(--secondary);font-size:11px;text-align:right}
.snapshot-status i{grid-row:1/3}.snapshot-status strong{font:10px var(--mono);font-weight:400;color:var(--tertiary)}
.quota-layout{display:grid;grid-template-columns:1fr 1fr .86fr;gap:14px;margin-bottom:18px}
.quota-card,.quota-advice,.kpi-rail,.model-card,.panel,.methodology{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline);border-radius:var(--radius)}
.quota-card{padding:23px 24px 18px;min-height:176px}
.quota-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.quota-top>div{display:grid}.quota-top span{font-size:14px;font-weight:560}.quota-top>div small{color:var(--tertiary);font-size:10px;margin-top:3px}
.quota-top>strong{display:flex;align-items:baseline;gap:6px;font:500 36px/1 var(--mono);letter-spacing:-.06em}.quota-top>strong small{font:500 10px/1.2 var(--sans);letter-spacing:0;color:var(--secondary);white-space:nowrap}
.quota-meter{height:7px;margin:25px 0 12px;border-radius:7px;overflow:hidden;background:var(--surface-soft)}
.quota-meter i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--blue-soft));transform:scaleX(var(--quota));transform-origin:left;animation:meter-in .7s cubic-bezier(.16,1,.3,1) both}
.quota-meter.warning i{background:linear-gradient(90deg,var(--orange),#ffd60a)}
.quota-bottom{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--tertiary)}.quota-bottom b{font:500 10px var(--mono);color:var(--secondary)}
.quota-estimate{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:10px;border-top:1px solid var(--hairline);font-size:9px;color:var(--secondary)}.quota-estimate>span:first-child{font:500 8px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);background:var(--surface-soft);padding:2px 5px;border-radius:5px;white-space:nowrap}.quota-estimate>span:last-child{min-width:0}
.quota-advice{padding:22px;display:flex;align-items:flex-start;gap:14px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 88%,var(--orange) 12%))}
.advice-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--orange) 14%,transparent);color:var(--orange);flex:0 0 auto}.advice-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.quota-advice strong{font-size:13px}.quota-advice p{font-size:11px;color:var(--secondary);margin-top:7px;line-height:1.6}.status-source{display:block;margin-top:9px;color:var(--tertiary);font:8px var(--mono);letter-spacing:.02em}
.filter-dock{position:sticky;top:12px;z-index:7;margin-bottom:14px;padding:10px 12px;border:1px solid var(--hairline);border-radius:15px;background:color-mix(in srgb,var(--bg) 76%,transparent);backdrop-filter:blur(22px) saturate(140%);box-shadow:0 8px 30px rgba(0,0,0,.16);display:flex;justify-content:space-between;align-items:center;gap:12px}
.filter-controls{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.segmented{display:flex;padding:3px;background:var(--surface);border-radius:10px;box-shadow:inset 0 0 0 1px var(--hairline)}
.segmented button{height:29px;border:0;border-radius:8px;padding:0 11px;background:transparent;color:var(--secondary);font-size:11px;transition:background .16s,color .16s,box-shadow .16s}
.segmented button.active{color:var(--text);background:var(--surface-soft);box-shadow:0 1px 3px rgba(0,0,0,.22)}
.filter-dock select,.custom-range input{height:35px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface);padding:0 30px 0 11px;font-size:11px;color:var(--text)}
.custom-range{display:none;align-items:center;gap:6px}.custom-range.visible{display:flex}.custom-range span{font-size:10px;color:var(--tertiary)}.custom-range input{width:130px;padding-right:8px}
.reset-button{height:33px;border:0;background:transparent;color:var(--secondary);font-size:11px;padding:0 9px;border-radius:8px}.reset-button:hover{background:var(--surface);color:var(--text)}
.filter-context{text-align:right;display:grid;white-space:nowrap;font-size:10px;color:var(--secondary)}.filter-context small{color:var(--tertiary);font-size:9px;margin-top:1px}
.kpi-rail{display:grid;grid-template-columns:1.18fr 1fr 1fr 1fr 1fr;margin-bottom:18px;overflow:hidden}
.kpi-rail>div{min-width:0;padding:21px 24px;position:relative}.kpi-rail>div+div:before{content:"";position:absolute;left:0;top:21px;bottom:21px;width:1px;background:var(--hairline)}
.kpi-rail span{display:block;color:var(--secondary);font-size:10px}.kpi-rail strong{display:block;margin:5px 0 2px;font:500 28px/1.25 var(--mono);letter-spacing:-.045em;white-space:nowrap}.kpi-primary strong{color:var(--blue-soft)}.kpi-rail small{display:block;color:var(--tertiary);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.change{font:500 8.5px var(--mono);white-space:nowrap}.change.up{color:var(--orange)}.change.down,.change.neutral{color:var(--tertiary)}.change.new{color:var(--blue)}
.insights-panel{margin-bottom:18px;padding-bottom:18px}.insights-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:17px 23px 0}.usage-insight{min-width:0;padding:14px 15px;border:1px solid var(--hairline);border-radius:12px;background:var(--surface-raised);position:relative;overflow:hidden}.usage-insight:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tertiary)}.usage-insight.warning:before,.usage-insight.orange:before{background:var(--orange)}.usage-insight.blue:before{background:var(--blue)}.usage-insight.green:before{background:var(--green)}.usage-insight>span{display:block;color:var(--tertiary);font:8px var(--mono);letter-spacing:.06em;text-transform:uppercase}.usage-insight strong{display:block;margin-top:6px;font-size:12px}.usage-insight p{margin-top:5px;color:var(--secondary);font-size:10px;line-height:1.55}.empty-state{padding:34px 20px;text-align:center;color:var(--tertiary);font-size:10px}
.session-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px;margin-bottom:18px;scroll-margin-top:84px}.session-health-panel,.context-watch-panel{padding-bottom:16px;min-width:0}.session-health-body{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;padding:16px 23px 4px}.health-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.health-stat{padding:13px 12px;border-radius:11px;background:var(--surface-raised);border:1px solid var(--hairline);min-width:0}.health-stat span{display:block;color:var(--tertiary);font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.health-stat strong{display:block;margin-top:4px;font:500 20px var(--mono)}.health-stat.stable strong{color:var(--green)}.health-stat.growing strong{color:var(--blue-soft)}.health-stat.heavy strong{color:var(--orange)}.baseline-summary{display:grid;align-content:center;gap:8px;padding:4px 0}.baseline-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px solid var(--hairline);font-size:9px;color:var(--tertiary)}.baseline-row:last-child{border-bottom:0}.baseline-row strong{font:500 10px var(--mono);color:var(--text);white-space:nowrap}.context-watch-list{display:grid;padding:10px 13px 0}.context-watch-item{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border:0;border-radius:11px;background:transparent;padding:10px;text-align:left}.context-watch-item:hover{background:var(--surface-raised)}.context-watch-copy{min-width:0}.context-watch-copy strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.context-watch-copy small{display:block;color:var(--tertiary);font-size:8.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.context-growth-meter{height:4px;margin-top:7px;border-radius:4px;background:var(--surface-soft);overflow:hidden}.context-growth-meter i{display:block;height:100%;width:100%;transform:scaleX(var(--growth));transform-origin:left;background:linear-gradient(90deg,var(--blue),var(--orange));border-radius:inherit}.context-watch-value{text-align:right}.context-watch-value strong{display:block;font:500 12px var(--mono)}.context-watch-value small{display:block;color:var(--tertiary);font-size:8px;margin-top:2px}.health-chip{display:inline-flex;align-items:center;height:21px;padding:0 7px;border-radius:7px;background:var(--surface-soft);color:var(--secondary);font-size:8px;white-space:nowrap}.health-chip.stable{color:var(--green);background:color-mix(in srgb,var(--green) 9%,var(--surface-raised))}.health-chip.growing{color:var(--blue-soft);background:color-mix(in srgb,var(--blue) 9%,var(--surface-raised))}.health-chip.heavy{color:var(--orange);background:color-mix(in srgb,var(--orange) 10%,var(--surface-raised))}.health-chip.limited{color:var(--tertiary)}
.model-card{overflow:hidden;margin-bottom:18px;scroll-margin-top:84px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px}.model-section-head{padding:25px 27px 21px}
.section-head h2{font:620 20px/1.2 var(--display);letter-spacing:-.025em}.section-head p{font-size:11px;color:var(--secondary);margin-top:6px}
.formula-chip{border:1px solid var(--hairline);border-radius:11px;background:var(--surface-raised);padding:9px 12px;text-align:right;flex:0 0 auto}.formula-chip span{display:block;color:var(--tertiary);font-size:9px}.formula-chip strong{display:block;font:500 10px var(--mono);margin-top:3px}
.insight-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.insight-item{padding:14px 27px;min-width:0}.insight-item+.insight-item{border-left:1px solid var(--hairline)}.insight-item span{display:block;font-size:9px;color:var(--tertiary)}.insight-item strong{display:block;font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.insight-item b{font:500 11px var(--mono);color:var(--secondary);margin-left:5px}
.model-columns{display:grid;grid-template-columns:1fr 1fr}
.rank-panel{padding:21px 27px 23px;min-width:0}.rank-panel+.rank-panel{border-left:1px solid var(--hairline)}
.rank-title{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:7px;gap:12px}.rank-title span{display:block;font:9px var(--mono);letter-spacing:.12em;color:var(--tertiary);text-transform:uppercase}.rank-title h3{font-size:15px;margin-top:3px}.rank-title>small{font:9px var(--mono);color:var(--tertiary)}
.metric-switch{display:flex;padding:3px;border-radius:9px;background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--hairline)}.metric-switch button{height:26px;border:0;border-radius:7px;background:transparent;color:var(--tertiary);padding:0 8px;font-size:9px;white-space:nowrap}.metric-switch button.active{background:var(--surface-soft);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.rank-list{display:grid}.rank-row{padding:13px 0 11px;border-bottom:1px solid var(--hairline)}.rank-row:last-child{border-bottom:0}
.rank-meta{display:grid;grid-template-columns:25px minmax(0,1fr) auto;gap:8px;align-items:baseline}.rank-index{font:9px var(--mono);color:var(--tertiary)}.rank-model{font:500 12px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-value{font:500 14px var(--mono);letter-spacing:-.02em}.rank-value small{font:9px var(--sans);color:var(--tertiary);letter-spacing:0;font-weight:400}
.rank-bar{height:6px;margin:8px 0 6px 33px;border-radius:4px;background:var(--surface-soft);overflow:hidden}.rank-bar i{display:block;width:100%;height:100%;border-radius:inherit;transform:scaleX(var(--bar));transform-origin:left;background:linear-gradient(90deg,color-mix(in srgb,var(--orange) 58%,transparent),var(--orange));animation:bar-grow .58s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--delay)}.volume-panel .rank-bar i{background:linear-gradient(90deg,var(--blue),var(--blue-soft))}
.rank-detail{margin-left:33px;font-size:9px;color:var(--tertiary)}.rank-empty{padding:46px 10px;text-align:center;color:var(--tertiary);font-size:11px}
.model-footnote{display:flex;justify-content:space-between;gap:14px;padding:11px 27px 13px;border-top:1px solid var(--hairline);color:var(--tertiary);font-size:9px}.model-footnote span{display:flex;align-items:center;gap:7px}.model-footnote i{width:6px;height:6px;border-radius:50%}.speed-key{background:var(--orange)}.volume-key{background:var(--blue-soft)}
.analytics-grid,.diagnostics-grid,.attribution-grid{display:grid;gap:14px;margin-bottom:18px}.analytics-grid{grid-template-columns:minmax(0,1.75fr) minmax(280px,.7fr)}.diagnostics-grid{grid-template-columns:1fr 1fr}.attribution-grid{grid-template-columns:minmax(260px,.65fr) minmax(0,1.65fr);scroll-margin-top:84px}
.panel{overflow:hidden;min-width:0}.section-head.compact{padding:21px 23px 0;align-items:center}.section-head.compact h2{font-size:15px}.section-head.compact p{font-size:10px;margin-top:4px}.scope-label{color:var(--tertiary);font-size:9px;white-space:nowrap}
.legend{display:flex;gap:13px;color:var(--tertiary);font-size:9px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:6px;height:6px;border-radius:2px}.legend .cache{background:#0a84ff}.legend .input{background:#64d2ff}.legend .output{background:var(--orange)}
.chart-frame{height:285px;padding:7px 16px 0;position:relative}.chart-frame svg{width:100%;height:100%;overflow:visible}.chart-grid{stroke:var(--hairline);stroke-dasharray:2 6;shape-rendering:crispEdges}.chart-axis{fill:var(--tertiary);font:9px var(--mono)}.timeline-group{cursor:pointer;transform-box:fill-box;transform-origin:bottom;animation:timeline-in .55s cubic-bezier(.16,1,.3,1) both}.timeline-group:hover{opacity:.78}.timeline-group rect{shape-rendering:geometricPrecision}.chart-caption{display:flex;justify-content:space-between;gap:12px;padding:5px 23px 17px;color:var(--tertiary);font-size:9px}.chart-tooltip{display:none;position:absolute;z-index:3;pointer-events:none;background:color-mix(in srgb,var(--surface-raised) 95%,transparent);border:1px solid var(--hairline-strong);box-shadow:var(--shadow);border-radius:10px;padding:9px 11px;font-size:10px;white-space:nowrap;backdrop-filter:blur(15px)}.chart-tooltip strong{font:500 12px var(--mono)}
.composition-panel{padding-bottom:19px}.composition-total{display:block;padding:22px 23px 12px;font:500 31px var(--mono);letter-spacing:-.05em}.composition-total small{font:10px var(--sans);color:var(--tertiary);letter-spacing:0;margin-left:5px}.composition-track{height:10px;display:flex;gap:2px;margin:0 23px 18px;border-radius:5px;overflow:hidden;background:var(--surface-soft)}.composition-track i{height:100%;transition:transform .28s cubic-bezier(.16,1,.3,1);transform-origin:left}.composition-list{padding:0 23px}.composition-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--hairline);font-size:10px}.composition-row:last-child{border-bottom:0}.composition-row i{width:7px;height:7px;border-radius:2px}.composition-row span{color:var(--secondary)}.composition-row strong{font:500 10px var(--mono)}.composition-row strong small{color:var(--tertiary);font:9px var(--sans);margin-left:5px}.panel-note{margin:15px 23px 0;padding-top:12px;border-top:1px solid var(--hairline);color:var(--tertiary);font-size:9px}
.matrix-panel,.outlier-panel{padding-bottom:18px}.matrix-section-head{align-items:flex-start}.matrix-header-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}.matrix-view-switch{display:flex;padding:3px;border:1px solid var(--hairline);border-radius:9px;background:var(--surface-raised);flex:0 0 auto}.matrix-view-switch button{height:25px;border:0;border-radius:6px;background:transparent;color:var(--tertiary);padding:0 8px;font-size:9px;white-space:nowrap}.matrix-view-switch button.active{background:var(--surface-soft);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}.heatmap-scroll{overflow:auto;padding:14px 23px 5px;overscroll-behavior:contain}.heatmap-scroll.expanded{max-height:470px}.heatmap{display:grid;grid-template-columns:var(--matrix-label-width,142px) repeat(var(--matrix-cols,4),minmax(var(--matrix-cell-min,78px),1fr));gap:6px;align-items:stretch}.heatmap-label{min-height:38px;display:flex;align-items:center;font-size:10px;color:var(--secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heatmap-row{position:sticky;left:0;z-index:2;padding-right:9px;background:var(--surface);border-radius:7px}.heatmap-column{position:sticky;top:0;z-index:2;justify-content:center;text-align:center;font:9px var(--mono);color:var(--tertiary);padding:0 6px;background:var(--surface);border-radius:7px}.heatmap-corner{position:sticky;left:0;top:0;z-index:3;background:var(--surface)}.heat-cell{min-height:42px;border:0;border-radius:8px;display:grid;place-items:center;background:var(--surface-raised);font:500 10px var(--mono);color:var(--text);transition:transform .14s,box-shadow .14s,opacity .14s;white-space:nowrap}.heat-cell:not(.is-empty){cursor:pointer}.heat-cell:not(.is-empty):hover,.heat-cell:not(.is-empty):focus-visible{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18)}.heat-cell.is-empty{min-width:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hairline) 55%,transparent);opacity:.72}.matrix-empty{grid-column:1/-1;padding:48px 16px;text-align:center;color:var(--tertiary);font-size:11px}
.outlier-frame{height:260px;padding:6px 17px 0;position:relative}.outlier-frame svg{width:100%;height:100%;overflow:visible}.outlier-point{cursor:pointer}.outlier-point circle{stroke-width:1.2;transition:r .15s,opacity .15s}.outlier-point:hover circle,.outlier-point:focus-visible circle{opacity:.78;stroke-width:2}.outlier-label{fill:var(--secondary);font:9px var(--sans);pointer-events:none}.outlier-axis{fill:var(--tertiary);font:8.5px var(--mono)}#outlier-tooltip{width:min(260px,calc(100% - 16px));white-space:normal}.task-tooltip-title{font-size:11px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}.task-tooltip-meta{margin-top:3px;color:var(--tertiary);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-tooltip-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin-top:8px;padding-top:7px;border-top:1px solid var(--hairline);font-size:9px;color:var(--secondary)}.task-tooltip-grid span{display:flex;justify-content:space-between;gap:8px}.task-tooltip-grid strong{font:500 9px var(--mono);color:var(--text)}
.projects-panel{padding-bottom:10px}.project-list{padding:12px 13px}.project-item{width:100%;border:0;border-radius:11px;background:transparent;padding:12px 10px;text-align:left;transition:background .14s,box-shadow .14s}.project-item:hover{background:var(--surface-raised);box-shadow:0 6px 18px rgba(0,0,0,.05)}.project-item.selected{background:var(--surface-soft)}.project-line{display:flex;align-items:center;justify-content:space-between;gap:10px}.project-name{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-value{font:10px var(--mono);color:var(--secondary)}.project-sub{display:flex;justify-content:space-between;gap:10px;margin-top:4px;color:var(--tertiary);font-size:8.5px}.project-meter{height:4px;margin-top:8px;border-radius:4px;background:var(--surface-soft);overflow:hidden}.project-meter i{display:block;height:100%;width:100%;transform:scaleX(var(--share));transform-origin:left;background:var(--blue-soft);border-radius:inherit;transition:transform .24s cubic-bezier(.16,1,.3,1)}
.expensive-panel{padding-bottom:10px}.expensive-list{padding:12px 13px}.expensive-item{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;border:0;border-radius:11px;background:transparent;padding:10px;text-align:left;transition:background .14s}.expensive-item:hover{background:var(--surface-raised)}.expensive-index{color:var(--tertiary);font:9px var(--mono)}.expensive-copy,.expensive-value{display:grid;min-width:0}.expensive-copy strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.expensive-copy small{display:flex;min-width:0;gap:4px;color:var(--tertiary);font-size:8.5px;margin-top:3px}.expensive-project{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.expensive-model{flex:0 0 auto;white-space:nowrap}.expensive-value{text-align:right}.expensive-value strong{font:500 11px var(--mono)}.expensive-value small{color:var(--tertiary);font-size:8.5px;margin-top:2px}
.task-table-panel{margin-bottom:18px}.task-table-panel table{min-width:860px;table-layout:fixed}.task-table-panel th:nth-child(1){width:31%}.task-table-panel th:nth-child(2){width:12%}.task-table-panel th:nth-child(3){width:13%}.task-table-panel th:nth-child(4){width:13%}.task-table-panel th:nth-child(5){width:12%}.task-table-panel th:nth-child(6){width:8%}.task-table-panel th:nth-child(7){width:11%}.numeric-cell{text-align:right;font-family:var(--mono)}
.tasks-panel input{width:180px;height:34px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface-raised);padding:0 11px;font-size:10px}.section-head h2 small{font:10px var(--mono);color:var(--tertiary);margin-left:4px}
.table-scroll{overflow-x:auto;margin-top:14px}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left}th{padding:10px 15px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);color:var(--tertiary);font-size:9px;font-weight:500}td{padding:12px 15px;border-bottom:1px solid var(--hairline);font-size:10px}th:first-child,td:first-child{padding-left:23px}th:last-child,td:last-child{padding-right:23px;text-align:right}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:color-mix(in srgb,var(--surface-raised) 70%,transparent)}
th button{border:0;background:transparent;color:inherit;padding:0;font:inherit}.task-link{display:block;max-width:100%;border:0;background:transparent;padding:0;font-size:11px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-link:hover{color:var(--blue-soft)}.task-project{display:block;max-width:100%;color:var(--tertiary);font-size:9px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.model-tag{font:9px var(--mono);color:var(--secondary);padding:3px 6px;border-radius:6px;background:var(--surface-raised)}.driver-tag{display:inline-flex;align-items:center;min-height:21px;padding:2px 7px;border-radius:6px;background:var(--surface-raised);color:var(--secondary);font:8.5px var(--mono);white-space:nowrap}.speed-value{color:var(--orange);font-family:var(--mono)}.table-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 23px;border-top:1px solid var(--hairline);color:var(--tertiary);font-size:9px}.table-footer div{display:flex;align-items:center;gap:8px}.table-footer button{height:28px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface-raised);padding:0 9px;font-size:9px}.table-empty{text-align:center;padding:42px!important;color:var(--tertiary)}
.methodology{scroll-margin-top:84px;display:flex;align-items:flex-start;gap:13px;padding:17px 20px;color:var(--secondary)}.methodology>svg{width:18px;height:18px;fill:none;stroke:var(--blue-soft);stroke-width:1.7;stroke-linecap:round;flex:0 0 auto;margin-top:1px}.methodology strong{display:block;color:var(--text);font-size:11px}.methodology p{font-size:10px;margin-top:4px;line-height:1.6}.source-link{color:var(--blue-soft);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--blue-soft) 35%,transparent)}.source-link:hover{border-color:var(--blue-soft)}
.page-footer{display:flex;justify-content:space-between;gap:20px;padding:22px 2px 2px;color:var(--tertiary);font-size:9px}.page-footer div{display:flex;gap:14px}.page-footer button{border:0;background:transparent;color:var(--tertiary);padding:0;font-size:9px}.page-footer button:hover{color:var(--text)}
.drawer-backdrop{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.46);backdrop-filter:blur(6px);display:none;justify-content:flex-end}.drawer-backdrop.open{display:flex}.drawer{position:relative;width:min(520px,100%);height:100%;overflow-y:auto;background:var(--surface);box-shadow:-22px 0 70px rgba(0,0,0,.28);padding:34px;animation:drawer-in .27s cubic-bezier(.16,1,.3,1)}.drawer-close{position:absolute;right:22px;top:22px;width:34px;height:34px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface-raised);display:grid;place-items:center}.drawer-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.drawer-label{font-size:10px;color:var(--tertiary)}.drawer h2{font-size:24px;letter-spacing:-.035em;margin:18px 40px 6px 0}.drawer-subtitle{color:var(--secondary);font-size:11px}.drawer-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:27px 0}.drawer-metric{padding:15px;border-radius:12px;background:var(--surface-raised)}.drawer-metric span{display:block;font-size:9px;color:var(--tertiary)}.drawer-metric strong{display:block;font:500 18px var(--mono);margin-top:4px}.drawer-note{margin-top:18px;padding:12px;border-radius:10px;background:var(--surface-raised);color:var(--tertiary);font-size:10px;line-height:1.6}.drawer h3{font-size:12px;margin:25px 0 9px}.driver-list{display:flex;flex-wrap:wrap;gap:6px}.driver-reasons{margin:12px 0 0;padding-left:18px;color:var(--secondary);font-size:10px;line-height:1.7}.breakdown-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.breakdown-list span{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;border-bottom:1px solid var(--hairline);color:var(--secondary);font-size:9px}.breakdown-list b{font:500 9px var(--mono);color:var(--text)}.call-row{display:grid;grid-template-columns:1fr auto auto;gap:13px;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:10px}.call-row span{color:var(--secondary)}.call-row strong{font:500 10px var(--mono)}.call-row em{font:normal 9px var(--mono);color:var(--orange)}
.context-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.context-metric{padding:11px;border-radius:10px;background:var(--surface-raised);min-width:0}.context-metric span{display:block;color:var(--tertiary);font-size:8px}.context-metric strong{display:block;margin-top:4px;font:500 12px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.context-chart{margin-top:10px;height:148px;border:1px solid var(--hairline);border-radius:11px;background:var(--surface-raised);padding:8px}.context-chart svg{width:100%;height:100%}.context-line{fill:none;stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke}.context-area{fill:color-mix(in srgb,var(--blue) 12%,transparent)}.context-dot{fill:var(--blue)}.context-dot.peak{fill:var(--orange)}.context-axis{fill:var(--tertiary);font:8px var(--mono)}
.toast{position:fixed;left:50%;bottom:24px;z-index:50;transform:translate(-50%,14px);opacity:0;pointer-events:none;background:var(--surface-raised);border:1px solid var(--hairline-strong);box-shadow:var(--shadow);border-radius:11px;padding:10px 15px;font-size:11px;transition:opacity .18s,transform .18s cubic-bezier(.16,1,.3,1)}.toast.show{opacity:1;transform:translate(-50%,0)}
body.light{color-scheme:light;--bg:#f5f5f7;--sidebar:rgba(250,250,252,.82);--surface:#fff;--surface-raised:#f4f4f6;--surface-soft:#e9e9ed;--hairline:rgba(0,0,0,.075);--hairline-strong:rgba(0,0,0,.13);--text:#1d1d1f;--secondary:#636366;--tertiary:#8e8e93;--blue:#0071e3;--blue-soft:#0a84ff;--orange:#d97706;--green:#248a3d;--shadow:0 18px 55px rgba(0,0,0,.10)}
body.light .theme-dark-icon{display:none}body.light .theme-light-icon{display:block}
body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@keyframes meter-in{from{transform:scaleX(0)}}
@keyframes bar-grow{from{transform:scaleX(0)}}
@keyframes timeline-in{from{transform:scaleY(.05);opacity:.35}}
@keyframes drawer-in{from{transform:translateX(24px);opacity:.75}}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
@keyframes popover-in{from{transform:translateY(-5px);opacity:0}}
@media(max-width:1220px){
.app-shell{grid-template-columns:78px minmax(0,1fr)}
.sidebar{padding:25px 12px}.brand{justify-content:center;padding-inline:0}.brand-copy,.nav-item span,.privacy-note{display:none}.nav-item{justify-content:center;padding:0}.main{padding-inline:26px}
.quota-layout{grid-template-columns:1fr 1fr}.quota-advice{grid-column:1/-1;min-height:auto}.filter-dock{align-items:flex-start}.filter-context{padding-top:5px}.kpi-rail>div{padding-inline:18px}.insights-list{grid-template-columns:1fr 1fr}.session-health-body{grid-template-columns:1fr}.health-summary{grid-template-columns:repeat(4,1fr)}.insight-item{padding-inline:20px}.rank-panel{padding-inline:22px}.diagnostics-grid{grid-template-columns:1.1fr .9fr}.attribution-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1080px){.demo-badge{display:none}.export-button span{display:none}.export-button{width:34px;padding:0}.refresh-button span{font-size:10px}}
@media(max-width:1320px){.kpi-rail{grid-template-columns:repeat(3,1fr)}.kpi-rail>div:nth-child(4):before{display:none}.kpi-rail>div:nth-child(n+4){border-top:1px solid var(--hairline)}.session-grid{grid-template-columns:1fr}.session-health-body{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){.matrix-header-tools .scope-label{display:none}.task-table-panel th:nth-child(5),.task-table-panel td:nth-child(5){display:none}.task-table-panel table{min-width:740px}.task-table-panel th:nth-child(1){width:35%}}
@media(max-width:920px){
.main{padding-inline:22px}.hero{padding-top:44px}.snapshot-status{display:none}.filter-dock{position:relative;top:auto;display:block}.filter-context{display:flex;justify-content:space-between;text-align:left;padding:8px 2px 0}.kpi-rail{grid-template-columns:1fr 1fr}.kpi-rail>div:nth-child(odd):before{display:none}.kpi-rail>div:nth-child(n+3){border-top:1px solid var(--hairline)}.model-columns{grid-template-columns:1fr}.rank-panel+.rank-panel{border-left:0;border-top:1px solid var(--hairline)}.analytics-grid,.diagnostics-grid{grid-template-columns:1fr}.attribution-grid{grid-template-columns:1fr}.project-list{display:grid;grid-template-columns:1fr 1fr}.outlier-frame{height:285px}
}
@media(max-width:640px){
.app-shell{display:block}.sidebar{position:relative;width:100%;height:66px;padding:10px 14px;border-right:0;border-bottom:1px solid var(--hairline);flex-direction:row;align-items:center;justify-content:space-between}.brand{padding:0}.brand-copy{display:grid}.nav-list{display:flex}.nav-item{width:39px;height:39px}.main{padding:16px 14px 24px}.breadcrumb{display:none}.topbar{justify-content:flex-end}.language-switch{margin-right:auto}#theme-toggle,.export-button{display:none}.refresh-button span{display:none}.refresh-button{width:36px;padding:0;justify-content:center}.refresh-info{transform:translate(7px,-13px)}.refresh-popover{position:fixed;left:14px;right:14px;top:76px;width:auto}.hero{padding:34px 2px 24px}.hero h1{font-size:38px}.hero p{font-size:13px;line-height:1.6}.quota-layout{grid-template-columns:1fr;gap:10px}.quota-advice{grid-column:auto}.quota-card{min-height:170px}.filter-controls{display:grid;grid-template-columns:1fr 1fr;width:100%}.segmented{grid-column:1/-1}.segmented button{flex:1;padding:0 8px}.filter-dock select{width:100%}.custom-range{grid-column:1/-1}.custom-range input{width:calc(50% - 14px)}.reset-button{grid-column:1/-1}.filter-context{font-size:9px;gap:10px}.filter-context small{text-align:right}.kpi-rail>div{padding:18px}.kpi-rail strong{font-size:24px}.insights-list{grid-template-columns:1fr;padding-inline:18px}.session-health-body{padding-inline:18px}.health-summary{grid-template-columns:1fr 1fr}.context-watch-list{padding-inline:8px}.model-section-head{display:block;padding:21px 18px 17px}.formula-chip{text-align:left;margin-top:14px;width:max-content;max-width:100%}.insight-row{grid-template-columns:1fr 1fr}.insight-item{padding:12px 18px}.insight-item:nth-child(3){border-left:0}.insight-item:nth-child(n+3){border-top:1px solid var(--hairline)}.rank-panel{padding:19px 18px}.model-footnote{display:block;padding-inline:18px}.model-footnote span+span{margin-top:5px}.section-head.compact{padding:18px 18px 0;align-items:flex-start}.legend{display:none}.chart-frame{height:250px;padding-inline:7px}.chart-caption{padding-inline:18px}.composition-total{padding-inline:18px}.composition-track{margin-inline:18px}.composition-list{padding-inline:18px}.panel-note{margin-inline:18px}.heatmap-scroll{padding-inline:18px}.scope-label{display:none}.matrix-section-head{gap:10px}.matrix-header-tools{display:block}.matrix-view-switch{display:flex}.matrix-view-switch button{padding-inline:7px}.task-table-panel th:nth-child(4),.task-table-panel td:nth-child(4),.task-table-panel th:nth-child(7),.task-table-panel td:nth-child(7){display:none}.task-table-panel table{min-width:520px}.task-table-panel th:nth-child(1){width:52%}.project-list{grid-template-columns:1fr}.tasks-panel input{width:138px}.table-footer{padding-inline:18px}.table-footer>span{max-width:140px}.methodology{padding:16px}.page-footer{display:block}.page-footer div{margin-top:7px;justify-content:space-between}.drawer{padding:28px 22px}.drawer-metrics{gap:8px}.drawer-metric strong{font-size:17px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}