@tokagent/tokagentos 2.0.24 → 2.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/scaffold-patches/packages/app-core/src/api/automations-compat-routes.ts +924 -0
- package/templates/fullstack-app/plugins/plugin-tokagent-billing/package.json +1 -1
- package/templates/fullstack-app/plugins/plugin-tokagent-billing/src/__tests__/routes/estimate-routes.test.ts +5 -2
- package/templates/fullstack-app/plugins/plugin-tokagent-billing/src/dashboard/app.js +896 -19
- package/templates/fullstack-app/plugins/plugin-tokagent-billing/src/dashboard/index.html +280 -94
- package/templates/fullstack-app/plugins/plugin-tokagent-billing/src/dashboard/style.css +969 -235
- package/templates/fullstack-app/plugins/plugin-tokagent-billing/src/routes/keys-routes.ts +170 -0
- package/templates-manifest.json +1 -1
|
@@ -1,41 +1,89 @@
|
|
|
1
|
-
/* Dashboard — dark
|
|
1
|
+
/* Tokamak Billing Dashboard — Aave/Uniswap-class dark utility.
|
|
2
2
|
*
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* (hidden topbar, session-strip relocation, edge-to-edge padding).
|
|
3
|
+
* Surface stack:
|
|
4
|
+
* bg-0 #0a0a0f page background
|
|
5
|
+
* bg-1 #141420 card surface
|
|
6
|
+
* bg-2 #0d0d15 input/recessed surface (sits inside cards)
|
|
7
|
+
* bg-3 #1c1c2a borders / dividers
|
|
9
8
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
9
|
+
* Brand accent: #c4f547 (lime) — reserved for primary CTAs, balance numbers,
|
|
10
|
+
* active states, status dots. Never use as bulk fill.
|
|
11
|
+
*
|
|
12
|
+
* Typography:
|
|
13
|
+
* Inter → body, labels, UI chrome
|
|
14
|
+
* JetBrains Mono → numbers, addresses, tx hashes (tabular-nums always on)
|
|
15
|
+
*
|
|
16
|
+
* Embed mode (`html[data-embed="1"]`): standalone topbar hides; the wallet/
|
|
17
|
+
* chain/logout chips are relocated by app.js into a slim `.session-strip`
|
|
18
|
+
* inside #view-app. Every load-bearing #id selector is preserved.
|
|
19
|
+
*/
|
|
13
20
|
|
|
14
21
|
* { box-sizing: border-box; }
|
|
22
|
+
|
|
15
23
|
:root {
|
|
16
|
-
/*
|
|
17
|
-
|
|
18
|
-
--bg-
|
|
19
|
-
--bg-
|
|
20
|
-
--bg-
|
|
21
|
-
--
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
--
|
|
24
|
+
/* === Surfaces === */
|
|
25
|
+
--bg-0: #0a0a0f;
|
|
26
|
+
--bg-1: #141420;
|
|
27
|
+
--bg-2: #0d0d15;
|
|
28
|
+
--bg-3: #1c1c2a;
|
|
29
|
+
--bg-hover: #1a1a28;
|
|
30
|
+
|
|
31
|
+
/* === Borders === */
|
|
32
|
+
--border: #1c1c2a;
|
|
33
|
+
--border-strong: #2a2a3a;
|
|
34
|
+
--border-soft: rgba(255, 255, 255, 0.06);
|
|
35
|
+
|
|
36
|
+
/* === Text === */
|
|
37
|
+
--text: #ffffff;
|
|
38
|
+
--text-soft: #d4d4dc;
|
|
39
|
+
--muted: #9ca3af;
|
|
25
40
|
--muted-strong: #6b7280;
|
|
26
|
-
--
|
|
41
|
+
--muted-faint: #4a4a55;
|
|
42
|
+
|
|
43
|
+
/* === Brand accent === */
|
|
44
|
+
--accent: #c4f547;
|
|
27
45
|
--accent-hover: #d5f972;
|
|
28
|
-
--accent-foreground: #0a0a0f;
|
|
29
|
-
--accent-
|
|
30
|
-
--accent-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
--
|
|
35
|
-
--
|
|
46
|
+
--accent-foreground: #0a0a0f;
|
|
47
|
+
--accent-glow: rgba(196, 245, 71, 0.18);
|
|
48
|
+
--accent-subtle: rgba(196, 245, 71, 0.08);
|
|
49
|
+
|
|
50
|
+
/* === Legacy aliases (kept so postMessage theme pushes from the host
|
|
51
|
+
still hit something) === */
|
|
52
|
+
--bg-1-legacy: rgba(255, 255, 255, 0.05);
|
|
53
|
+
--line: var(--border);
|
|
54
|
+
--line-strong: var(--border-strong);
|
|
55
|
+
--accent-2: var(--accent);
|
|
56
|
+
|
|
57
|
+
/* === Status === */
|
|
58
|
+
--ok: #6be48e;
|
|
59
|
+
--ok-soft: rgba(107, 228, 142, 0.12);
|
|
60
|
+
--warn: #ffd641;
|
|
61
|
+
--warn-soft: rgba(255, 214, 65, 0.14);
|
|
62
|
+
--err: #ff494a;
|
|
63
|
+
--err-soft: rgba(255, 73, 74, 0.12);
|
|
64
|
+
|
|
65
|
+
/* === Radii === */
|
|
66
|
+
--radius-card: 14px;
|
|
67
|
+
--radius-md: 10px;
|
|
68
|
+
--radius-sm: 8px;
|
|
36
69
|
--radius-pill: 999px;
|
|
37
|
-
|
|
38
|
-
|
|
70
|
+
|
|
71
|
+
/* === Typography === */
|
|
72
|
+
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
73
|
+
--mono: "JetBrains Mono", "IBM Plex Mono", "Menlo", "Courier New", monospace;
|
|
74
|
+
|
|
75
|
+
/* === Spacing scale === */
|
|
76
|
+
--space-1: 4px;
|
|
77
|
+
--space-2: 8px;
|
|
78
|
+
--space-3: 12px;
|
|
79
|
+
--space-4: 16px;
|
|
80
|
+
--space-5: 20px;
|
|
81
|
+
--space-6: 24px;
|
|
82
|
+
--space-8: 32px;
|
|
83
|
+
|
|
84
|
+
/* === Shadows === */
|
|
85
|
+
--shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.4);
|
|
86
|
+
--shadow-hero: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 48px -24px rgba(0, 0, 0, 0.6);
|
|
39
87
|
}
|
|
40
88
|
|
|
41
89
|
html, body {
|
|
@@ -47,111 +95,180 @@ html, body {
|
|
|
47
95
|
font-size: 14px;
|
|
48
96
|
line-height: 1.5;
|
|
49
97
|
min-height: 100vh;
|
|
98
|
+
-webkit-font-smoothing: antialiased;
|
|
99
|
+
-moz-osx-font-smoothing: grayscale;
|
|
100
|
+
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
body {
|
|
104
|
+
background:
|
|
105
|
+
radial-gradient(1200px 600px at 100% -200px, rgba(196, 245, 71, 0.04), transparent 60%),
|
|
106
|
+
radial-gradient(900px 500px at -10% 100%, rgba(196, 245, 71, 0.025), transparent 60%),
|
|
107
|
+
var(--bg-0);
|
|
50
108
|
}
|
|
51
109
|
|
|
52
110
|
code, pre, kbd, .mono {
|
|
53
111
|
font-family: var(--mono);
|
|
112
|
+
font-feature-settings: "tnum";
|
|
54
113
|
}
|
|
55
114
|
|
|
56
|
-
|
|
115
|
+
a { color: var(--accent); text-decoration: none; }
|
|
116
|
+
a:hover { color: var(--accent-hover); }
|
|
117
|
+
|
|
118
|
+
::selection { background: var(--accent-glow); color: var(--text); }
|
|
119
|
+
|
|
120
|
+
/* ============================================================
|
|
121
|
+
TOPBAR
|
|
122
|
+
============================================================ */
|
|
57
123
|
.topbar {
|
|
58
124
|
display: flex;
|
|
59
125
|
align-items: center;
|
|
60
126
|
justify-content: space-between;
|
|
61
|
-
padding:
|
|
62
|
-
min-height:
|
|
63
|
-
border-bottom: 1px solid var(--
|
|
64
|
-
background: rgba(10, 10, 15, 0.
|
|
65
|
-
backdrop-filter: blur(
|
|
66
|
-
-webkit-backdrop-filter: blur(
|
|
127
|
+
padding: 14px 24px;
|
|
128
|
+
min-height: 56px;
|
|
129
|
+
border-bottom: 1px solid var(--border);
|
|
130
|
+
background: rgba(10, 10, 15, 0.72);
|
|
131
|
+
backdrop-filter: blur(20px) saturate(140%);
|
|
132
|
+
-webkit-backdrop-filter: blur(20px) saturate(140%);
|
|
67
133
|
position: sticky;
|
|
68
134
|
top: 0;
|
|
69
|
-
z-index:
|
|
135
|
+
z-index: 50;
|
|
70
136
|
}
|
|
71
137
|
.brand {
|
|
72
138
|
display: flex;
|
|
73
139
|
align-items: center;
|
|
74
|
-
gap:
|
|
75
|
-
font-size: 14px;
|
|
140
|
+
gap: 10px;
|
|
76
141
|
}
|
|
77
|
-
.brand strong { font-weight: 700; }
|
|
78
|
-
.brand em { color: var(--muted); font-style: normal; margin-left: 6px; }
|
|
79
142
|
.brand-mark {
|
|
80
|
-
display: inline-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
143
|
+
display: inline-flex;
|
|
144
|
+
align-items: center;
|
|
145
|
+
justify-content: center;
|
|
146
|
+
width: 26px; height: 26px;
|
|
147
|
+
flex-shrink: 0;
|
|
148
|
+
}
|
|
149
|
+
.brand-mark svg {
|
|
150
|
+
display: block;
|
|
151
|
+
width: 100%;
|
|
152
|
+
height: 100%;
|
|
153
|
+
}
|
|
154
|
+
.brand-text {
|
|
155
|
+
display: flex;
|
|
156
|
+
align-items: baseline;
|
|
157
|
+
gap: 6px;
|
|
158
|
+
line-height: 1;
|
|
159
|
+
}
|
|
160
|
+
.brand-text strong {
|
|
161
|
+
font-size: 15px;
|
|
162
|
+
font-weight: 700;
|
|
163
|
+
letter-spacing: -0.01em;
|
|
164
|
+
}
|
|
165
|
+
.brand-text .brand-sub {
|
|
166
|
+
color: var(--muted);
|
|
167
|
+
font-size: 13px;
|
|
168
|
+
font-weight: 500;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.topbar-right {
|
|
172
|
+
display: flex;
|
|
173
|
+
align-items: center;
|
|
174
|
+
gap: 8px;
|
|
88
175
|
}
|
|
89
|
-
.topbar-right { display: flex; align-items: center; gap: 10px; }
|
|
90
176
|
|
|
91
177
|
/* When embedded, hide the dashboard's own sticky topbar — the parent app
|
|
92
178
|
* supplies its breadcrumb + nav header above the iframe. `app.js` moves
|
|
93
|
-
* `.topbar-right` into a `.session-strip` inside
|
|
179
|
+
* `.topbar-right` into a `.session-strip` inside <main> on boot. */
|
|
94
180
|
html[data-embed="1"] .topbar { display: none; }
|
|
95
|
-
html[data-embed="1"] main { padding-top:
|
|
181
|
+
html[data-embed="1"] main { padding-top: 20px; }
|
|
96
182
|
|
|
97
|
-
/* Session strip — slim, non-sticky, right-aligned chip row inside <main>
|
|
98
|
-
* that hosts the relocated wallet / chain / logout controls when embedded.
|
|
99
|
-
* The strip is created by app.js, then `.topbar-right` is moved into it
|
|
100
|
-
* (preserves every load-bearing #id selector). */
|
|
101
183
|
.session-strip {
|
|
102
184
|
display: flex;
|
|
103
185
|
align-items: center;
|
|
104
186
|
justify-content: flex-end;
|
|
105
187
|
flex-wrap: wrap;
|
|
106
|
-
gap:
|
|
107
|
-
margin: 0 0
|
|
188
|
+
gap: 8px;
|
|
189
|
+
margin: 0 0 var(--space-5) 0;
|
|
108
190
|
}
|
|
109
191
|
.session-strip .topbar-right {
|
|
110
192
|
display: flex;
|
|
111
193
|
align-items: center;
|
|
112
|
-
gap:
|
|
194
|
+
gap: 8px;
|
|
113
195
|
}
|
|
114
196
|
|
|
197
|
+
/* ============================================================
|
|
198
|
+
PILLS
|
|
199
|
+
============================================================ */
|
|
115
200
|
.pill {
|
|
116
201
|
display: inline-flex;
|
|
117
202
|
align-items: center;
|
|
118
|
-
gap:
|
|
119
|
-
background: var(--bg-
|
|
120
|
-
border: 1px solid var(--
|
|
121
|
-
padding:
|
|
203
|
+
gap: 8px;
|
|
204
|
+
background: var(--bg-1);
|
|
205
|
+
border: 1px solid var(--border);
|
|
206
|
+
padding: 6px 12px;
|
|
122
207
|
border-radius: var(--radius-pill);
|
|
123
208
|
font-size: 12px;
|
|
124
209
|
color: var(--muted);
|
|
210
|
+
font-weight: 500;
|
|
211
|
+
height: 30px;
|
|
125
212
|
}
|
|
126
|
-
.pill code
|
|
213
|
+
.pill code,
|
|
214
|
+
.pill .pill-mono {
|
|
215
|
+
color: var(--text);
|
|
216
|
+
font-family: var(--mono);
|
|
217
|
+
font-size: 12px;
|
|
218
|
+
letter-spacing: -0.01em;
|
|
219
|
+
}
|
|
220
|
+
.pill-wallet {
|
|
221
|
+
background: var(--bg-1);
|
|
222
|
+
border-color: var(--border-strong);
|
|
223
|
+
}
|
|
224
|
+
.pill-wallet code,
|
|
225
|
+
.pill-wallet .pill-mono {
|
|
226
|
+
color: var(--text);
|
|
227
|
+
font-weight: 500;
|
|
228
|
+
}
|
|
229
|
+
|
|
127
230
|
.dot {
|
|
128
231
|
width: 8px; height: 8px;
|
|
129
|
-
background: var(--muted);
|
|
232
|
+
background: var(--muted-faint);
|
|
130
233
|
border-radius: 50%;
|
|
131
234
|
display: inline-block;
|
|
235
|
+
flex: 0 0 8px;
|
|
236
|
+
}
|
|
237
|
+
.dot-ok {
|
|
238
|
+
background: var(--ok);
|
|
239
|
+
box-shadow: 0 0 0 3px rgba(107, 228, 142, 0.18);
|
|
132
240
|
}
|
|
133
|
-
.dot-ok { background: var(--ok); box-shadow: 0 0 6px rgba(107, 228, 142, 0.7); }
|
|
134
241
|
|
|
135
|
-
.pill-ok { border-color: rgba(107, 228, 142, 0.
|
|
136
|
-
.pill-ok code
|
|
242
|
+
.pill-ok { border-color: rgba(107, 228, 142, 0.35); color: var(--ok); }
|
|
243
|
+
.pill-ok code, .pill-ok .pill-mono { color: var(--ok); }
|
|
244
|
+
.pill-ok .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(107, 228, 142, 0.18); }
|
|
137
245
|
.pill-warn { border-color: rgba(255, 214, 65, 0.45); color: var(--warn); }
|
|
138
|
-
.pill-warn code { color: var(--warn); }
|
|
139
|
-
.
|
|
246
|
+
.pill-warn code, .pill-warn .pill-mono { color: var(--warn); }
|
|
247
|
+
.pill-warn .dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(255, 214, 65, 0.18); }
|
|
140
248
|
|
|
141
|
-
/*
|
|
249
|
+
/* ============================================================
|
|
250
|
+
BUTTONS
|
|
251
|
+
============================================================ */
|
|
142
252
|
.btn {
|
|
143
253
|
appearance: none;
|
|
144
254
|
border: 1px solid transparent;
|
|
145
255
|
border-radius: var(--radius-sm);
|
|
146
|
-
padding:
|
|
256
|
+
padding: 9px 16px;
|
|
147
257
|
font-size: 13px;
|
|
148
258
|
font-weight: 600;
|
|
149
259
|
cursor: pointer;
|
|
150
|
-
transition: background
|
|
260
|
+
transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 80ms ease;
|
|
151
261
|
font-family: inherit;
|
|
262
|
+
letter-spacing: -0.005em;
|
|
263
|
+
white-space: nowrap;
|
|
264
|
+
line-height: 1.2;
|
|
152
265
|
}
|
|
153
|
-
.btn:disabled {
|
|
154
|
-
|
|
266
|
+
.btn:active:not(:disabled) { transform: translateY(1px); }
|
|
267
|
+
.btn:disabled { cursor: not-allowed; opacity: 0.45; }
|
|
268
|
+
.btn-block { width: 100%; }
|
|
269
|
+
.btn-small { padding: 6px 10px; font-size: 12px; }
|
|
270
|
+
.btn-cta { padding: 14px 18px; font-size: 14px; border-radius: var(--radius-md); }
|
|
271
|
+
|
|
155
272
|
.btn-primary {
|
|
156
273
|
background: var(--accent);
|
|
157
274
|
color: var(--accent-foreground);
|
|
@@ -161,223 +278,777 @@ html[data-embed="1"] main { padding-top: 16px; }
|
|
|
161
278
|
background: var(--accent-hover);
|
|
162
279
|
border-color: var(--accent-hover);
|
|
163
280
|
}
|
|
281
|
+
.btn-primary:disabled {
|
|
282
|
+
background: var(--bg-3);
|
|
283
|
+
color: var(--muted);
|
|
284
|
+
border-color: var(--border-strong);
|
|
285
|
+
opacity: 1;
|
|
286
|
+
}
|
|
287
|
+
|
|
164
288
|
.btn-ghost {
|
|
165
289
|
background: transparent;
|
|
166
290
|
color: var(--muted);
|
|
167
|
-
border-color: var(--
|
|
291
|
+
border-color: var(--border-strong);
|
|
168
292
|
}
|
|
169
293
|
.btn-ghost:not(:disabled):hover {
|
|
170
|
-
background: var(--bg-
|
|
294
|
+
background: var(--bg-hover);
|
|
171
295
|
color: var(--text);
|
|
172
|
-
border-color: var(--
|
|
296
|
+
border-color: var(--border-strong);
|
|
173
297
|
}
|
|
298
|
+
|
|
174
299
|
.btn-danger {
|
|
175
300
|
background: transparent;
|
|
176
301
|
color: var(--err);
|
|
177
|
-
border-color: rgba(255, 73, 74, 0.
|
|
302
|
+
border-color: rgba(255, 73, 74, 0.35);
|
|
303
|
+
}
|
|
304
|
+
.btn-danger:not(:disabled):hover {
|
|
305
|
+
background: var(--err-soft);
|
|
306
|
+
border-color: rgba(255, 73, 74, 0.55);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.link-btn {
|
|
310
|
+
background: transparent;
|
|
311
|
+
border: 0;
|
|
312
|
+
color: var(--accent);
|
|
313
|
+
font-family: inherit;
|
|
314
|
+
font-size: 11px;
|
|
315
|
+
font-weight: 600;
|
|
316
|
+
text-transform: uppercase;
|
|
317
|
+
letter-spacing: 0.06em;
|
|
318
|
+
padding: 2px 6px;
|
|
319
|
+
cursor: pointer;
|
|
320
|
+
border-radius: 4px;
|
|
321
|
+
transition: background 120ms ease;
|
|
178
322
|
}
|
|
179
|
-
.btn
|
|
323
|
+
.link-btn:hover { background: var(--accent-subtle); }
|
|
180
324
|
|
|
181
|
-
/*
|
|
325
|
+
/* ============================================================
|
|
326
|
+
LAYOUT
|
|
327
|
+
============================================================ */
|
|
182
328
|
main {
|
|
183
|
-
max-width:
|
|
329
|
+
max-width: 1180px;
|
|
184
330
|
margin: 0 auto;
|
|
185
|
-
padding:
|
|
331
|
+
padding: 28px 24px 80px 24px;
|
|
332
|
+
}
|
|
333
|
+
.view {
|
|
334
|
+
animation: fade .18s ease-out;
|
|
335
|
+
display: flex;
|
|
336
|
+
flex-direction: column;
|
|
337
|
+
gap: var(--space-5);
|
|
338
|
+
}
|
|
339
|
+
@keyframes fade {
|
|
340
|
+
from { opacity: 0; transform: translateY(6px); }
|
|
341
|
+
to { opacity: 1; transform: none; }
|
|
186
342
|
}
|
|
187
|
-
.view { animation: fade .15s ease-out; }
|
|
188
|
-
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
|
|
189
343
|
|
|
190
|
-
/*
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
344
|
+
/* ============================================================
|
|
345
|
+
LOGIN
|
|
346
|
+
============================================================ */
|
|
347
|
+
.view-login {
|
|
348
|
+
display: flex;
|
|
349
|
+
justify-content: center;
|
|
350
|
+
padding-top: 56px;
|
|
351
|
+
}
|
|
196
352
|
.view-login[hidden] { display: none; }
|
|
353
|
+
|
|
197
354
|
.login-card {
|
|
198
|
-
max-width:
|
|
355
|
+
max-width: 460px;
|
|
199
356
|
width: 100%;
|
|
200
357
|
background: var(--bg-1);
|
|
201
|
-
border: 1px solid var(--
|
|
202
|
-
border-radius: var(--radius);
|
|
358
|
+
border: 1px solid var(--border);
|
|
359
|
+
border-radius: var(--radius-card);
|
|
203
360
|
padding: 32px;
|
|
204
|
-
|
|
205
|
-
|
|
361
|
+
box-shadow: var(--shadow-card);
|
|
362
|
+
}
|
|
363
|
+
.login-eyebrow {
|
|
364
|
+
font-size: 11px;
|
|
365
|
+
text-transform: uppercase;
|
|
366
|
+
letter-spacing: 0.1em;
|
|
367
|
+
color: var(--muted);
|
|
368
|
+
font-weight: 600;
|
|
369
|
+
margin-bottom: 8px;
|
|
370
|
+
}
|
|
371
|
+
.login-card h1 {
|
|
372
|
+
margin: 0 0 8px 0;
|
|
373
|
+
font-size: 24px;
|
|
374
|
+
font-weight: 700;
|
|
375
|
+
letter-spacing: -0.02em;
|
|
376
|
+
}
|
|
377
|
+
.login-card .muted { color: var(--muted); margin: 0 0 24px 0; font-size: 13px; }
|
|
378
|
+
|
|
379
|
+
.login-steps {
|
|
380
|
+
list-style: none;
|
|
381
|
+
padding: 0;
|
|
382
|
+
margin: 0 0 24px 0;
|
|
383
|
+
display: flex;
|
|
384
|
+
flex-direction: column;
|
|
385
|
+
gap: 10px;
|
|
386
|
+
}
|
|
387
|
+
.login-steps li {
|
|
388
|
+
display: flex;
|
|
389
|
+
align-items: center;
|
|
390
|
+
gap: 12px;
|
|
391
|
+
font-size: 13px;
|
|
392
|
+
color: var(--text-soft);
|
|
393
|
+
}
|
|
394
|
+
.login-steps .step-num {
|
|
395
|
+
display: inline-flex;
|
|
396
|
+
align-items: center;
|
|
397
|
+
justify-content: center;
|
|
398
|
+
width: 22px; height: 22px;
|
|
399
|
+
border-radius: 50%;
|
|
400
|
+
background: var(--bg-2);
|
|
401
|
+
border: 1px solid var(--border-strong);
|
|
402
|
+
font-family: var(--mono);
|
|
403
|
+
font-size: 11px;
|
|
404
|
+
font-weight: 600;
|
|
405
|
+
color: var(--accent);
|
|
406
|
+
flex: 0 0 22px;
|
|
206
407
|
}
|
|
207
|
-
|
|
208
|
-
.login-
|
|
209
|
-
|
|
210
|
-
.login-actions { margin-top: 16px; display: flex; gap: 10px; }
|
|
408
|
+
|
|
409
|
+
.login-actions { display: flex; flex-direction: column; gap: 10px; }
|
|
410
|
+
|
|
211
411
|
.login-help { margin-top: 18px; }
|
|
212
|
-
.login-help summary {
|
|
412
|
+
.login-help summary {
|
|
413
|
+
cursor: pointer;
|
|
414
|
+
color: var(--muted);
|
|
415
|
+
font-size: 13px;
|
|
416
|
+
list-style: none;
|
|
417
|
+
}
|
|
418
|
+
.login-help summary::-webkit-details-marker { display: none; }
|
|
419
|
+
.login-help summary::before {
|
|
420
|
+
content: "▸";
|
|
421
|
+
display: inline-block;
|
|
422
|
+
margin-right: 6px;
|
|
423
|
+
transition: transform 120ms ease;
|
|
424
|
+
}
|
|
425
|
+
.login-help[open] summary::before { transform: rotate(90deg); }
|
|
426
|
+
|
|
213
427
|
.small { font-size: 12px; }
|
|
428
|
+
.xsmall { font-size: 11px; line-height: 1.5; }
|
|
214
429
|
|
|
215
430
|
.status-line {
|
|
216
|
-
margin-top:
|
|
431
|
+
margin-top: 10px;
|
|
217
432
|
min-height: 1.2em;
|
|
218
|
-
font-size:
|
|
433
|
+
font-size: 12px;
|
|
219
434
|
color: var(--muted);
|
|
435
|
+
font-family: var(--mono);
|
|
436
|
+
letter-spacing: -0.005em;
|
|
437
|
+
word-break: break-word;
|
|
220
438
|
}
|
|
221
439
|
.status-line.err { color: var(--err); }
|
|
222
440
|
.status-line.ok { color: var(--ok); }
|
|
441
|
+
.status-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
|
|
223
442
|
|
|
224
|
-
/*
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
443
|
+
/* ============================================================
|
|
444
|
+
HERO (balance)
|
|
445
|
+
============================================================ */
|
|
446
|
+
.hero {
|
|
447
|
+
background: linear-gradient(180deg, rgba(196, 245, 71, 0.04) 0%, transparent 50%), var(--bg-1);
|
|
448
|
+
border: 1px solid var(--border);
|
|
449
|
+
border-radius: var(--radius-card);
|
|
450
|
+
padding: 28px 32px;
|
|
451
|
+
display: grid;
|
|
452
|
+
grid-template-columns: 1fr auto;
|
|
453
|
+
gap: 32px;
|
|
454
|
+
align-items: center;
|
|
455
|
+
box-shadow: var(--shadow-hero);
|
|
456
|
+
position: relative;
|
|
457
|
+
overflow: hidden;
|
|
458
|
+
}
|
|
459
|
+
.hero::after {
|
|
460
|
+
content: "";
|
|
461
|
+
position: absolute;
|
|
462
|
+
top: 0; right: 0;
|
|
463
|
+
width: 240px; height: 240px;
|
|
464
|
+
background: radial-gradient(circle at top right, var(--accent-glow), transparent 70%);
|
|
465
|
+
pointer-events: none;
|
|
466
|
+
opacity: 0.6;
|
|
467
|
+
}
|
|
468
|
+
.hero-main { position: relative; z-index: 1; min-width: 0; }
|
|
469
|
+
.hero-eyebrow {
|
|
470
|
+
font-size: 11px;
|
|
471
|
+
text-transform: uppercase;
|
|
472
|
+
letter-spacing: 0.1em;
|
|
473
|
+
color: var(--muted);
|
|
474
|
+
font-weight: 600;
|
|
475
|
+
margin-bottom: 14px;
|
|
232
476
|
}
|
|
233
|
-
.
|
|
477
|
+
.hero-balance {
|
|
234
478
|
display: flex;
|
|
235
479
|
align-items: baseline;
|
|
236
|
-
|
|
237
|
-
flex-wrap: wrap;
|
|
238
|
-
gap: 8px;
|
|
480
|
+
gap: 12px;
|
|
239
481
|
margin-bottom: 12px;
|
|
482
|
+
flex-wrap: wrap;
|
|
240
483
|
}
|
|
241
|
-
.
|
|
242
|
-
|
|
243
|
-
font-size:
|
|
244
|
-
color: var(--muted);
|
|
484
|
+
.hero-num {
|
|
485
|
+
font-family: var(--mono);
|
|
486
|
+
font-size: 56px;
|
|
245
487
|
font-weight: 600;
|
|
488
|
+
color: var(--text);
|
|
489
|
+
letter-spacing: -0.03em;
|
|
490
|
+
line-height: 1;
|
|
491
|
+
font-feature-settings: "tnum";
|
|
492
|
+
word-break: break-all;
|
|
493
|
+
}
|
|
494
|
+
.hero-unit {
|
|
495
|
+
font-family: var(--mono);
|
|
496
|
+
font-size: 18px;
|
|
497
|
+
color: var(--muted);
|
|
498
|
+
font-weight: 500;
|
|
499
|
+
}
|
|
500
|
+
.hero-meta {
|
|
501
|
+
display: flex;
|
|
502
|
+
align-items: center;
|
|
503
|
+
gap: 10px;
|
|
504
|
+
flex-wrap: wrap;
|
|
505
|
+
font-size: 13px;
|
|
506
|
+
color: var(--muted);
|
|
507
|
+
}
|
|
508
|
+
.hero-meta .hero-usd { color: var(--text-soft); font-family: var(--mono); font-feature-settings: "tnum"; }
|
|
509
|
+
.hero-meta span:not(.hero-sep):not(.hero-usd) { font-family: var(--mono); font-feature-settings: "tnum"; }
|
|
510
|
+
.hero-sep { color: var(--muted-faint); }
|
|
511
|
+
|
|
512
|
+
.hero-side {
|
|
513
|
+
display: grid;
|
|
514
|
+
grid-template-columns: repeat(2, minmax(120px, 1fr));
|
|
515
|
+
gap: 16px 24px;
|
|
516
|
+
position: relative;
|
|
517
|
+
z-index: 1;
|
|
518
|
+
}
|
|
519
|
+
.hero-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
|
520
|
+
.stat-label {
|
|
521
|
+
font-size: 10px;
|
|
246
522
|
text-transform: uppercase;
|
|
247
|
-
letter-spacing: 0.
|
|
523
|
+
letter-spacing: 0.08em;
|
|
524
|
+
color: var(--muted);
|
|
525
|
+
font-weight: 600;
|
|
526
|
+
}
|
|
527
|
+
.stat-num {
|
|
528
|
+
font-family: var(--mono);
|
|
529
|
+
font-size: 15px;
|
|
530
|
+
color: var(--text);
|
|
531
|
+
font-weight: 500;
|
|
532
|
+
font-feature-settings: "tnum";
|
|
533
|
+
letter-spacing: -0.01em;
|
|
248
534
|
}
|
|
249
|
-
.card-sub { font-size: 12px; color: var(--muted); }
|
|
250
|
-
.section-card { margin-top: 20px; }
|
|
251
535
|
|
|
252
|
-
|
|
253
|
-
.
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
.
|
|
536
|
+
@media (max-width: 760px) {
|
|
537
|
+
.hero {
|
|
538
|
+
grid-template-columns: 1fr;
|
|
539
|
+
gap: 24px;
|
|
540
|
+
padding: 24px;
|
|
541
|
+
}
|
|
542
|
+
.hero-num { font-size: 40px; }
|
|
543
|
+
.hero-side { grid-template-columns: repeat(2, 1fr); }
|
|
259
544
|
}
|
|
260
545
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
546
|
+
/* ============================================================
|
|
547
|
+
KPI STRIP
|
|
548
|
+
============================================================ */
|
|
549
|
+
.kpi-strip {
|
|
550
|
+
display: grid;
|
|
551
|
+
grid-template-columns: repeat(4, 1fr);
|
|
552
|
+
gap: 1px;
|
|
553
|
+
background: var(--border);
|
|
554
|
+
border: 1px solid var(--border);
|
|
555
|
+
border-radius: var(--radius-card);
|
|
556
|
+
overflow: hidden;
|
|
557
|
+
}
|
|
558
|
+
.kpi {
|
|
559
|
+
background: var(--bg-1);
|
|
560
|
+
padding: 16px 20px;
|
|
561
|
+
display: flex;
|
|
562
|
+
flex-direction: column;
|
|
563
|
+
gap: 4px;
|
|
564
|
+
}
|
|
565
|
+
.kpi-label {
|
|
566
|
+
font-size: 11px;
|
|
567
|
+
text-transform: uppercase;
|
|
568
|
+
letter-spacing: 0.08em;
|
|
569
|
+
color: var(--muted);
|
|
570
|
+
font-weight: 600;
|
|
571
|
+
}
|
|
572
|
+
.kpi-val {
|
|
265
573
|
font-family: var(--mono);
|
|
574
|
+
font-size: 22px;
|
|
575
|
+
font-weight: 600;
|
|
266
576
|
color: var(--text);
|
|
577
|
+
font-feature-settings: "tnum";
|
|
578
|
+
letter-spacing: -0.02em;
|
|
579
|
+
display: flex;
|
|
580
|
+
align-items: baseline;
|
|
581
|
+
gap: 4px;
|
|
267
582
|
}
|
|
268
|
-
.
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
583
|
+
.kpi-val.ok { color: var(--ok); }
|
|
584
|
+
.kpi-val.err { color: var(--err); }
|
|
585
|
+
.kpi-val.muted { color: var(--muted); }
|
|
586
|
+
.kpi-unit {
|
|
587
|
+
font-size: 12px;
|
|
272
588
|
color: var(--muted);
|
|
273
|
-
|
|
274
|
-
font-family: var(--font-sans);
|
|
589
|
+
font-weight: 500;
|
|
275
590
|
}
|
|
276
|
-
.muted { color: var(--muted); }
|
|
277
591
|
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
592
|
+
@media (max-width: 760px) {
|
|
593
|
+
.kpi-strip { grid-template-columns: repeat(2, 1fr); }
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
/* ============================================================
|
|
597
|
+
CARDS
|
|
598
|
+
============================================================ */
|
|
599
|
+
.card {
|
|
600
|
+
background: var(--bg-1);
|
|
601
|
+
border: 1px solid var(--border);
|
|
602
|
+
border-radius: var(--radius-card);
|
|
603
|
+
padding: 24px;
|
|
604
|
+
box-shadow: var(--shadow-card);
|
|
605
|
+
}
|
|
606
|
+
.section-card { padding: 24px; }
|
|
607
|
+
|
|
608
|
+
.card-header {
|
|
609
|
+
display: flex;
|
|
610
|
+
align-items: flex-start;
|
|
611
|
+
justify-content: space-between;
|
|
612
|
+
flex-wrap: wrap;
|
|
613
|
+
gap: 12px;
|
|
614
|
+
margin-bottom: 20px;
|
|
615
|
+
}
|
|
616
|
+
.card-header-stack {
|
|
617
|
+
flex-direction: column;
|
|
618
|
+
align-items: flex-start;
|
|
619
|
+
gap: 16px;
|
|
620
|
+
}
|
|
621
|
+
.card-eyebrow {
|
|
622
|
+
font-size: 10px;
|
|
282
623
|
text-transform: uppercase;
|
|
283
|
-
letter-spacing: 0.
|
|
624
|
+
letter-spacing: 0.1em;
|
|
625
|
+
color: var(--muted);
|
|
284
626
|
font-weight: 600;
|
|
627
|
+
margin-bottom: 4px;
|
|
285
628
|
}
|
|
286
|
-
.
|
|
629
|
+
.card-title {
|
|
287
630
|
margin: 0;
|
|
631
|
+
font-size: 16px;
|
|
632
|
+
font-weight: 600;
|
|
633
|
+
color: var(--text);
|
|
634
|
+
letter-spacing: -0.01em;
|
|
635
|
+
}
|
|
636
|
+
.card-tag {
|
|
637
|
+
font-size: 11px;
|
|
288
638
|
color: var(--muted);
|
|
289
|
-
font-
|
|
290
|
-
|
|
639
|
+
font-family: var(--mono);
|
|
640
|
+
background: var(--bg-2);
|
|
641
|
+
border: 1px solid var(--border-strong);
|
|
642
|
+
padding: 4px 10px;
|
|
643
|
+
border-radius: var(--radius-pill);
|
|
644
|
+
white-space: nowrap;
|
|
291
645
|
}
|
|
292
|
-
.
|
|
646
|
+
.card-tag code {
|
|
647
|
+
font-size: 11px;
|
|
648
|
+
background: transparent;
|
|
649
|
+
padding: 0;
|
|
650
|
+
color: var(--text-soft);
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.muted { color: var(--muted); }
|
|
293
654
|
|
|
294
|
-
/*
|
|
295
|
-
.
|
|
655
|
+
/* Card grid (top up + swap) */
|
|
656
|
+
.grid-cards {
|
|
296
657
|
display: grid;
|
|
297
|
-
grid-template-columns:
|
|
298
|
-
gap:
|
|
299
|
-
align-items: end;
|
|
658
|
+
grid-template-columns: repeat(2, 1fr);
|
|
659
|
+
gap: var(--space-5);
|
|
300
660
|
}
|
|
301
|
-
@media (max-width:
|
|
302
|
-
.
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
661
|
+
@media (max-width: 880px) {
|
|
662
|
+
.grid-cards { grid-template-columns: 1fr; }
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
/* ============================================================
|
|
666
|
+
FORM PRIMITIVES
|
|
667
|
+
============================================================ */
|
|
668
|
+
.form-row {
|
|
669
|
+
display: flex;
|
|
670
|
+
flex-direction: column;
|
|
671
|
+
gap: 8px;
|
|
672
|
+
margin-bottom: 12px;
|
|
673
|
+
}
|
|
674
|
+
.field-label {
|
|
675
|
+
font-size: 11px;
|
|
307
676
|
text-transform: uppercase;
|
|
308
|
-
letter-spacing: 0.
|
|
677
|
+
letter-spacing: 0.08em;
|
|
678
|
+
color: var(--muted);
|
|
679
|
+
font-weight: 600;
|
|
680
|
+
}
|
|
681
|
+
.field-label-row {
|
|
682
|
+
display: flex;
|
|
683
|
+
align-items: center;
|
|
684
|
+
justify-content: space-between;
|
|
685
|
+
gap: 8px;
|
|
686
|
+
}
|
|
687
|
+
.field-meta {
|
|
688
|
+
font-size: 11px;
|
|
689
|
+
color: var(--muted);
|
|
690
|
+
font-family: var(--mono);
|
|
691
|
+
display: inline-flex;
|
|
692
|
+
align-items: center;
|
|
693
|
+
gap: 4px;
|
|
309
694
|
}
|
|
310
|
-
.
|
|
695
|
+
.field-meta span { color: var(--text-soft); }
|
|
696
|
+
|
|
697
|
+
.amount-input {
|
|
311
698
|
display: flex;
|
|
312
699
|
align-items: center;
|
|
313
700
|
background: var(--bg-2);
|
|
314
|
-
border: 1px solid var(--
|
|
315
|
-
border-radius: var(--radius-
|
|
316
|
-
padding:
|
|
317
|
-
transition: border-color
|
|
701
|
+
border: 1px solid var(--border-strong);
|
|
702
|
+
border-radius: var(--radius-md);
|
|
703
|
+
padding: 4px 16px;
|
|
704
|
+
transition: border-color 140ms ease, background 140ms ease;
|
|
705
|
+
min-height: 56px;
|
|
706
|
+
}
|
|
707
|
+
.amount-input:focus-within {
|
|
708
|
+
border-color: var(--accent);
|
|
709
|
+
background: var(--bg-2);
|
|
710
|
+
box-shadow: 0 0 0 3px var(--accent-subtle);
|
|
318
711
|
}
|
|
319
|
-
.
|
|
320
|
-
.topup-input input {
|
|
712
|
+
.amount-input input {
|
|
321
713
|
background: transparent;
|
|
322
714
|
border: 0;
|
|
323
715
|
color: var(--text);
|
|
324
|
-
font-size:
|
|
716
|
+
font-size: 24px;
|
|
717
|
+
font-family: var(--mono);
|
|
718
|
+
font-weight: 500;
|
|
719
|
+
font-feature-settings: "tnum";
|
|
325
720
|
flex: 1;
|
|
326
|
-
padding:
|
|
721
|
+
padding: 12px 0;
|
|
327
722
|
outline: none;
|
|
723
|
+
min-width: 0;
|
|
724
|
+
letter-spacing: -0.02em;
|
|
725
|
+
}
|
|
726
|
+
.amount-input input::placeholder { color: var(--muted-faint); }
|
|
727
|
+
.amount-input .amount-unit {
|
|
728
|
+
color: var(--muted);
|
|
729
|
+
font-size: 13px;
|
|
730
|
+
font-weight: 500;
|
|
328
731
|
font-family: var(--mono);
|
|
732
|
+
padding-left: 12px;
|
|
733
|
+
border-left: 1px solid var(--border-strong);
|
|
734
|
+
}
|
|
735
|
+
.amount-input-with-token { padding-right: 6px; }
|
|
736
|
+
|
|
737
|
+
/* Preset chips */
|
|
738
|
+
.preset-row {
|
|
739
|
+
display: flex;
|
|
740
|
+
flex-wrap: wrap;
|
|
741
|
+
gap: 6px;
|
|
742
|
+
margin-bottom: 16px;
|
|
329
743
|
}
|
|
330
|
-
.
|
|
331
|
-
.topup-presets { display: flex; gap: 6px; margin-top: 8px; }
|
|
332
|
-
.topup-presets button {
|
|
744
|
+
.chip {
|
|
333
745
|
background: transparent;
|
|
334
746
|
color: var(--muted);
|
|
335
|
-
border: 1px solid var(--
|
|
747
|
+
border: 1px solid var(--border-strong);
|
|
336
748
|
border-radius: var(--radius-pill);
|
|
337
|
-
padding:
|
|
749
|
+
padding: 5px 12px;
|
|
338
750
|
font-size: 12px;
|
|
751
|
+
font-weight: 500;
|
|
339
752
|
cursor: pointer;
|
|
340
753
|
font-family: inherit;
|
|
341
754
|
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
|
|
342
755
|
}
|
|
343
|
-
.
|
|
756
|
+
.chip:hover {
|
|
757
|
+
background: var(--bg-hover);
|
|
758
|
+
color: var(--text);
|
|
759
|
+
border-color: var(--border-strong);
|
|
760
|
+
}
|
|
761
|
+
.chip.is-active,
|
|
762
|
+
.chip.is-active:hover {
|
|
763
|
+
background: var(--accent-subtle);
|
|
764
|
+
color: var(--accent);
|
|
765
|
+
border-color: rgba(196, 245, 71, 0.35);
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
/* Estimate lines (Top up + Swap) */
|
|
769
|
+
.estimate-line {
|
|
770
|
+
display: flex;
|
|
771
|
+
align-items: center;
|
|
772
|
+
justify-content: space-between;
|
|
773
|
+
padding: 10px 14px;
|
|
344
774
|
background: var(--bg-2);
|
|
775
|
+
border: 1px solid var(--border);
|
|
776
|
+
border-radius: var(--radius-md);
|
|
777
|
+
margin-bottom: 8px;
|
|
778
|
+
font-size: 13px;
|
|
779
|
+
}
|
|
780
|
+
.estimate-line.subtle {
|
|
781
|
+
background: transparent;
|
|
782
|
+
border: 0;
|
|
783
|
+
padding: 2px 14px;
|
|
784
|
+
}
|
|
785
|
+
.estimate-line.compact { padding: 4px 0; }
|
|
786
|
+
.est-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
|
|
787
|
+
.est-val {
|
|
788
|
+
font-family: var(--mono);
|
|
345
789
|
color: var(--text);
|
|
346
|
-
|
|
790
|
+
font-feature-settings: "tnum";
|
|
791
|
+
font-weight: 500;
|
|
347
792
|
}
|
|
348
|
-
.
|
|
793
|
+
.estimate-line.subtle .est-val { color: var(--muted); }
|
|
349
794
|
|
|
350
|
-
/*
|
|
351
|
-
.card-
|
|
352
|
-
|
|
353
|
-
|
|
795
|
+
/* CTA spacing inside cards */
|
|
796
|
+
.card .btn-cta { margin-top: 14px; }
|
|
797
|
+
|
|
798
|
+
/* ============================================================
|
|
799
|
+
SWAP CARD specifics
|
|
800
|
+
============================================================ */
|
|
801
|
+
.token-select {
|
|
802
|
+
display: inline-flex;
|
|
803
|
+
align-items: center;
|
|
804
|
+
gap: 8px;
|
|
805
|
+
background: var(--bg-1);
|
|
806
|
+
border: 1px solid var(--border-strong);
|
|
807
|
+
border-radius: var(--radius-pill);
|
|
808
|
+
padding: 6px 12px 6px 6px;
|
|
809
|
+
cursor: pointer;
|
|
810
|
+
user-select: none;
|
|
354
811
|
position: relative;
|
|
812
|
+
font-weight: 600;
|
|
813
|
+
font-size: 13px;
|
|
814
|
+
color: var(--text);
|
|
815
|
+
transition: background 120ms ease, border-color 120ms ease;
|
|
816
|
+
flex: 0 0 auto;
|
|
817
|
+
outline: none;
|
|
818
|
+
}
|
|
819
|
+
.token-select:hover { background: var(--bg-hover); }
|
|
820
|
+
.token-select:focus-visible { border-color: var(--accent); }
|
|
821
|
+
.token-icon {
|
|
822
|
+
width: 22px;
|
|
823
|
+
height: 22px;
|
|
824
|
+
border-radius: 50%;
|
|
825
|
+
background: var(--bg-3);
|
|
826
|
+
flex: 0 0 22px;
|
|
827
|
+
display: block;
|
|
828
|
+
}
|
|
829
|
+
.token-select .caret { color: var(--muted); flex: 0 0 10px; }
|
|
830
|
+
|
|
831
|
+
.token-menu {
|
|
832
|
+
position: absolute;
|
|
833
|
+
top: calc(100% + 6px);
|
|
834
|
+
right: 0;
|
|
835
|
+
min-width: 180px;
|
|
836
|
+
background: var(--bg-1);
|
|
837
|
+
border: 1px solid var(--border-strong);
|
|
838
|
+
border-radius: var(--radius-md);
|
|
839
|
+
padding: 6px;
|
|
840
|
+
z-index: 30;
|
|
841
|
+
display: flex;
|
|
842
|
+
flex-direction: column;
|
|
843
|
+
gap: 2px;
|
|
844
|
+
box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.7);
|
|
845
|
+
}
|
|
846
|
+
.token-menu[hidden] { display: none; }
|
|
847
|
+
.token-option {
|
|
848
|
+
display: flex;
|
|
849
|
+
align-items: center;
|
|
850
|
+
gap: 10px;
|
|
851
|
+
padding: 8px 10px;
|
|
852
|
+
border-radius: var(--radius-sm);
|
|
355
853
|
background: transparent;
|
|
356
854
|
border: 0;
|
|
855
|
+
cursor: pointer;
|
|
856
|
+
font-family: inherit;
|
|
857
|
+
color: var(--text);
|
|
858
|
+
font-size: 13px;
|
|
859
|
+
font-weight: 500;
|
|
860
|
+
text-align: left;
|
|
861
|
+
}
|
|
862
|
+
.token-option:hover { background: var(--bg-hover); }
|
|
863
|
+
.token-option .token-option-sub {
|
|
864
|
+
margin-left: auto;
|
|
865
|
+
font-family: var(--mono);
|
|
866
|
+
font-size: 11px;
|
|
867
|
+
color: var(--muted);
|
|
868
|
+
}
|
|
869
|
+
|
|
870
|
+
.swap-arrow {
|
|
871
|
+
display: flex;
|
|
872
|
+
align-items: center;
|
|
873
|
+
justify-content: center;
|
|
874
|
+
width: 32px; height: 32px;
|
|
875
|
+
border-radius: 8px;
|
|
876
|
+
background: var(--bg-2);
|
|
877
|
+
border: 1px solid var(--border-strong);
|
|
878
|
+
color: var(--muted);
|
|
879
|
+
margin: -6px auto 6px auto;
|
|
880
|
+
position: relative;
|
|
881
|
+
z-index: 1;
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
.receive-box {
|
|
885
|
+
display: flex;
|
|
886
|
+
align-items: baseline;
|
|
887
|
+
gap: 8px;
|
|
888
|
+
padding: 14px 16px;
|
|
889
|
+
background: var(--bg-2);
|
|
890
|
+
border: 1px solid var(--border-strong);
|
|
891
|
+
border-radius: var(--radius-md);
|
|
892
|
+
min-height: 56px;
|
|
893
|
+
}
|
|
894
|
+
.receive-num {
|
|
895
|
+
font-family: var(--mono);
|
|
896
|
+
font-size: 24px;
|
|
897
|
+
font-weight: 500;
|
|
898
|
+
color: var(--text);
|
|
899
|
+
font-feature-settings: "tnum";
|
|
900
|
+
letter-spacing: -0.02em;
|
|
901
|
+
flex: 1;
|
|
902
|
+
word-break: break-all;
|
|
903
|
+
}
|
|
904
|
+
.receive-unit {
|
|
905
|
+
font-size: 13px;
|
|
906
|
+
color: var(--muted);
|
|
907
|
+
font-weight: 500;
|
|
908
|
+
font-family: var(--mono);
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
.route-section {
|
|
912
|
+
margin-top: 16px;
|
|
913
|
+
margin-bottom: 16px;
|
|
914
|
+
}
|
|
915
|
+
.route-label {
|
|
916
|
+
font-size: 11px;
|
|
917
|
+
text-transform: uppercase;
|
|
918
|
+
letter-spacing: 0.08em;
|
|
357
919
|
color: var(--muted);
|
|
920
|
+
font-weight: 600;
|
|
921
|
+
margin-bottom: 8px;
|
|
922
|
+
}
|
|
923
|
+
.route-chain {
|
|
924
|
+
display: flex;
|
|
925
|
+
align-items: center;
|
|
926
|
+
flex-wrap: wrap;
|
|
927
|
+
gap: 6px;
|
|
358
928
|
padding: 8px 12px;
|
|
929
|
+
background: var(--bg-2);
|
|
930
|
+
border: 1px solid var(--border);
|
|
931
|
+
border-radius: var(--radius-md);
|
|
932
|
+
}
|
|
933
|
+
.route-step {
|
|
934
|
+
display: inline-flex;
|
|
935
|
+
align-items: center;
|
|
936
|
+
padding: 4px 10px;
|
|
937
|
+
background: var(--bg-1);
|
|
938
|
+
border: 1px solid var(--border-strong);
|
|
939
|
+
border-radius: var(--radius-pill);
|
|
940
|
+
font-family: var(--mono);
|
|
941
|
+
font-size: 11px;
|
|
942
|
+
font-weight: 600;
|
|
943
|
+
color: var(--text-soft);
|
|
944
|
+
letter-spacing: 0.02em;
|
|
945
|
+
}
|
|
946
|
+
.route-step.route-step-end {
|
|
947
|
+
background: var(--accent-subtle);
|
|
948
|
+
color: var(--accent);
|
|
949
|
+
border-color: rgba(196, 245, 71, 0.3);
|
|
950
|
+
}
|
|
951
|
+
.route-arrow {
|
|
952
|
+
color: var(--muted-faint);
|
|
359
953
|
font-size: 12px;
|
|
954
|
+
font-family: var(--mono);
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
.slippage-row {
|
|
958
|
+
display: flex;
|
|
959
|
+
align-items: center;
|
|
960
|
+
justify-content: space-between;
|
|
961
|
+
margin-bottom: 8px;
|
|
962
|
+
gap: 12px;
|
|
963
|
+
}
|
|
964
|
+
.slippage-buttons { display: flex; gap: 6px; }
|
|
965
|
+
|
|
966
|
+
/* ============================================================
|
|
967
|
+
USAGE TABS
|
|
968
|
+
============================================================ */
|
|
969
|
+
.tabs {
|
|
970
|
+
display: flex;
|
|
971
|
+
gap: 0;
|
|
972
|
+
flex-wrap: wrap;
|
|
973
|
+
border-bottom: 1px solid var(--border);
|
|
974
|
+
width: 100%;
|
|
975
|
+
margin-top: 4px;
|
|
976
|
+
}
|
|
977
|
+
.tab {
|
|
978
|
+
position: relative;
|
|
979
|
+
background: transparent;
|
|
980
|
+
border: 0;
|
|
981
|
+
color: var(--muted);
|
|
982
|
+
padding: 10px 14px;
|
|
983
|
+
font-size: 13px;
|
|
360
984
|
cursor: pointer;
|
|
361
985
|
font-family: inherit;
|
|
362
|
-
font-weight:
|
|
986
|
+
font-weight: 500;
|
|
363
987
|
transition: color 120ms ease;
|
|
988
|
+
border-bottom: 2px solid transparent;
|
|
989
|
+
margin-bottom: -1px;
|
|
364
990
|
}
|
|
365
991
|
.tab:hover { color: var(--text); }
|
|
366
|
-
.tab.active
|
|
367
|
-
.tab.active
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
right: 12px;
|
|
372
|
-
bottom: -2px;
|
|
373
|
-
height: 3px;
|
|
374
|
-
background: var(--accent);
|
|
375
|
-
border-radius: 2px;
|
|
992
|
+
.tab.is-active,
|
|
993
|
+
.tab.active {
|
|
994
|
+
color: var(--text);
|
|
995
|
+
border-bottom-color: var(--accent);
|
|
996
|
+
font-weight: 600;
|
|
376
997
|
}
|
|
377
|
-
.tab-pane { padding-top:
|
|
998
|
+
.tab-pane { padding-top: 20px; }
|
|
378
999
|
.tab-pane[hidden] { display: none; }
|
|
379
1000
|
|
|
380
|
-
/*
|
|
1001
|
+
/* ============================================================
|
|
1002
|
+
METRIC GRID (Overview pane)
|
|
1003
|
+
============================================================ */
|
|
1004
|
+
.metric-grid {
|
|
1005
|
+
display: grid;
|
|
1006
|
+
grid-template-columns: repeat(3, 1fr);
|
|
1007
|
+
gap: 1px;
|
|
1008
|
+
background: var(--border);
|
|
1009
|
+
border: 1px solid var(--border);
|
|
1010
|
+
border-radius: var(--radius-md);
|
|
1011
|
+
overflow: hidden;
|
|
1012
|
+
}
|
|
1013
|
+
.metric {
|
|
1014
|
+
background: var(--bg-1);
|
|
1015
|
+
padding: 16px 18px;
|
|
1016
|
+
display: flex;
|
|
1017
|
+
flex-direction: column;
|
|
1018
|
+
gap: 6px;
|
|
1019
|
+
}
|
|
1020
|
+
.metric.metric-soft .metric-val { color: var(--text-soft); font-size: 18px; }
|
|
1021
|
+
.metric-label {
|
|
1022
|
+
font-size: 11px;
|
|
1023
|
+
text-transform: uppercase;
|
|
1024
|
+
letter-spacing: 0.08em;
|
|
1025
|
+
color: var(--muted);
|
|
1026
|
+
font-weight: 600;
|
|
1027
|
+
}
|
|
1028
|
+
.metric-val {
|
|
1029
|
+
font-family: var(--mono);
|
|
1030
|
+
font-size: 22px;
|
|
1031
|
+
font-weight: 600;
|
|
1032
|
+
color: var(--text);
|
|
1033
|
+
font-feature-settings: "tnum";
|
|
1034
|
+
letter-spacing: -0.02em;
|
|
1035
|
+
display: flex;
|
|
1036
|
+
align-items: baseline;
|
|
1037
|
+
gap: 6px;
|
|
1038
|
+
}
|
|
1039
|
+
.metric-unit {
|
|
1040
|
+
font-size: 12px;
|
|
1041
|
+
color: var(--muted);
|
|
1042
|
+
font-weight: 500;
|
|
1043
|
+
}
|
|
1044
|
+
@media (max-width: 760px) {
|
|
1045
|
+
.metric-grid { grid-template-columns: repeat(2, 1fr); }
|
|
1046
|
+
.metric-grid .metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
/* ============================================================
|
|
1050
|
+
TABLES
|
|
1051
|
+
============================================================ */
|
|
381
1052
|
.data-table {
|
|
382
1053
|
width: 100%;
|
|
383
1054
|
border-collapse: collapse;
|
|
@@ -385,45 +1056,65 @@ main {
|
|
|
385
1056
|
font-size: 13px;
|
|
386
1057
|
}
|
|
387
1058
|
.data-table th, .data-table td {
|
|
388
|
-
padding: 10px
|
|
1059
|
+
padding: 12px 10px;
|
|
389
1060
|
text-align: left;
|
|
390
|
-
border-bottom: 1px solid var(--
|
|
1061
|
+
border-bottom: 1px solid var(--border);
|
|
391
1062
|
font-family: var(--mono);
|
|
1063
|
+
font-feature-settings: "tnum";
|
|
392
1064
|
}
|
|
1065
|
+
.data-table tbody tr:last-child td { border-bottom: 0; }
|
|
393
1066
|
.data-table th {
|
|
394
1067
|
font-family: var(--font-sans);
|
|
395
1068
|
font-weight: 600;
|
|
396
1069
|
color: var(--muted);
|
|
397
1070
|
font-size: 11px;
|
|
398
1071
|
text-transform: uppercase;
|
|
399
|
-
letter-spacing: 0.
|
|
400
|
-
border-bottom-color: var(--
|
|
1072
|
+
letter-spacing: 0.08em;
|
|
1073
|
+
border-bottom-color: var(--border-strong);
|
|
1074
|
+
padding: 10px;
|
|
401
1075
|
}
|
|
402
1076
|
.data-table .num { text-align: right; }
|
|
403
|
-
.data-table tbody tr
|
|
1077
|
+
.data-table tbody tr {
|
|
1078
|
+
transition: background 100ms ease;
|
|
1079
|
+
}
|
|
1080
|
+
.data-table tbody tr:hover { background: var(--bg-2); }
|
|
404
1081
|
.data-table .empty {
|
|
405
1082
|
text-align: center;
|
|
406
1083
|
color: var(--muted);
|
|
407
|
-
padding:
|
|
1084
|
+
padding: 32px;
|
|
1085
|
+
font-family: var(--font-sans);
|
|
1086
|
+
}
|
|
1087
|
+
.data-table code {
|
|
1088
|
+
font-size: 12px;
|
|
1089
|
+
color: var(--text-soft);
|
|
1090
|
+
background: var(--bg-2);
|
|
1091
|
+
padding: 2px 6px;
|
|
1092
|
+
border-radius: 4px;
|
|
1093
|
+
border: 1px solid var(--border);
|
|
408
1094
|
}
|
|
409
1095
|
|
|
410
1096
|
.outcome-pill {
|
|
411
1097
|
display: inline-block;
|
|
412
|
-
padding:
|
|
1098
|
+
padding: 3px 9px;
|
|
413
1099
|
border-radius: var(--radius-pill);
|
|
414
|
-
font-size:
|
|
1100
|
+
font-size: 10px;
|
|
415
1101
|
font-weight: 600;
|
|
1102
|
+
font-family: var(--font-sans);
|
|
1103
|
+
text-transform: uppercase;
|
|
1104
|
+
letter-spacing: 0.06em;
|
|
416
1105
|
}
|
|
417
|
-
.outcome-success { background:
|
|
418
|
-
.outcome-failed { background:
|
|
419
|
-
.outcome-other { background:
|
|
1106
|
+
.outcome-success { background: var(--ok-soft); color: var(--ok); }
|
|
1107
|
+
.outcome-failed { background: var(--err-soft); color: var(--err); }
|
|
1108
|
+
.outcome-other { background: var(--warn-soft); color: var(--warn); }
|
|
420
1109
|
|
|
421
|
-
/*
|
|
1110
|
+
/* ============================================================
|
|
1111
|
+
CHARTS
|
|
1112
|
+
============================================================ */
|
|
422
1113
|
.chart-frame {
|
|
423
1114
|
background: var(--bg-2);
|
|
424
|
-
border: 1px solid var(--
|
|
425
|
-
border-radius: var(--radius-
|
|
426
|
-
padding:
|
|
1115
|
+
border: 1px solid var(--border);
|
|
1116
|
+
border-radius: var(--radius-md);
|
|
1117
|
+
padding: 16px;
|
|
427
1118
|
overflow: hidden;
|
|
428
1119
|
}
|
|
429
1120
|
.chart-frame canvas {
|
|
@@ -432,40 +1123,52 @@ main {
|
|
|
432
1123
|
display: block;
|
|
433
1124
|
}
|
|
434
1125
|
|
|
435
|
-
/*
|
|
1126
|
+
/* ============================================================
|
|
1127
|
+
PAGER
|
|
1128
|
+
============================================================ */
|
|
436
1129
|
.pager {
|
|
437
1130
|
display: flex;
|
|
438
1131
|
justify-content: space-between;
|
|
439
1132
|
align-items: center;
|
|
440
|
-
margin-top:
|
|
1133
|
+
margin-top: 16px;
|
|
441
1134
|
gap: 12px;
|
|
442
1135
|
}
|
|
443
1136
|
|
|
444
|
-
/*
|
|
1137
|
+
/* ============================================================
|
|
1138
|
+
KEY FORM
|
|
1139
|
+
============================================================ */
|
|
445
1140
|
.key-create {
|
|
446
1141
|
display: flex;
|
|
447
1142
|
gap: 8px;
|
|
448
|
-
margin-top:
|
|
1143
|
+
margin-top: 4px;
|
|
449
1144
|
}
|
|
450
1145
|
.key-create input {
|
|
451
1146
|
flex: 1;
|
|
452
1147
|
background: var(--bg-2);
|
|
453
|
-
border: 1px solid var(--
|
|
1148
|
+
border: 1px solid var(--border-strong);
|
|
454
1149
|
color: var(--text);
|
|
455
1150
|
border-radius: var(--radius-sm);
|
|
456
|
-
padding:
|
|
1151
|
+
padding: 10px 14px;
|
|
457
1152
|
font-family: inherit;
|
|
458
1153
|
font-size: 13px;
|
|
459
1154
|
outline: none;
|
|
460
1155
|
transition: border-color 120ms ease;
|
|
461
1156
|
}
|
|
462
|
-
.key-create input
|
|
1157
|
+
.key-create input::placeholder { color: var(--muted-faint); }
|
|
1158
|
+
.key-create input:focus {
|
|
1159
|
+
border-color: var(--accent);
|
|
1160
|
+
box-shadow: 0 0 0 3px var(--accent-subtle);
|
|
1161
|
+
}
|
|
463
1162
|
|
|
464
|
-
/*
|
|
1163
|
+
/* ============================================================
|
|
1164
|
+
MODAL
|
|
1165
|
+
============================================================ */
|
|
465
1166
|
.modal {
|
|
466
1167
|
position: fixed;
|
|
467
1168
|
inset: 0;
|
|
468
1169
|
background: rgba(10, 10, 15, 0.78);
|
|
1170
|
+
backdrop-filter: blur(8px);
|
|
1171
|
+
-webkit-backdrop-filter: blur(8px);
|
|
469
1172
|
display: flex;
|
|
470
1173
|
justify-content: center;
|
|
471
1174
|
align-items: center;
|
|
@@ -475,34 +1178,65 @@ main {
|
|
|
475
1178
|
.modal[hidden] { display: none; }
|
|
476
1179
|
.modal-body {
|
|
477
1180
|
background: var(--bg-1);
|
|
478
|
-
border: 1px solid var(--
|
|
479
|
-
border-radius: var(--radius);
|
|
480
|
-
padding:
|
|
1181
|
+
border: 1px solid var(--border-strong);
|
|
1182
|
+
border-radius: var(--radius-card);
|
|
1183
|
+
padding: 32px;
|
|
481
1184
|
max-width: 560px;
|
|
482
1185
|
width: 100%;
|
|
483
|
-
|
|
484
|
-
|
|
1186
|
+
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8);
|
|
1187
|
+
}
|
|
1188
|
+
.modal-eyebrow {
|
|
1189
|
+
font-size: 11px;
|
|
1190
|
+
text-transform: uppercase;
|
|
1191
|
+
letter-spacing: 0.1em;
|
|
1192
|
+
color: var(--accent);
|
|
1193
|
+
font-weight: 600;
|
|
1194
|
+
margin-bottom: 6px;
|
|
485
1195
|
}
|
|
486
|
-
.modal-body h2 { margin: 0 0
|
|
1196
|
+
.modal-body h2 { margin: 0 0 8px 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
|
|
487
1197
|
.key-value {
|
|
488
1198
|
background: var(--bg-2);
|
|
489
|
-
border: 1px solid var(--
|
|
490
|
-
border-radius: var(--radius-
|
|
491
|
-
padding:
|
|
1199
|
+
border: 1px solid var(--border-strong);
|
|
1200
|
+
border-radius: var(--radius-md);
|
|
1201
|
+
padding: 14px;
|
|
492
1202
|
word-break: break-all;
|
|
493
1203
|
font-family: var(--mono);
|
|
494
1204
|
font-size: 13px;
|
|
495
|
-
margin:
|
|
1205
|
+
margin: 16px 0;
|
|
1206
|
+
color: var(--accent);
|
|
496
1207
|
}
|
|
497
1208
|
.modal-actions { display: flex; gap: 10px; }
|
|
498
1209
|
|
|
1210
|
+
/* ============================================================
|
|
1211
|
+
FOOTER
|
|
1212
|
+
============================================================ */
|
|
499
1213
|
footer {
|
|
500
1214
|
text-align: center;
|
|
501
|
-
padding:
|
|
502
|
-
border-top: 1px solid var(--
|
|
503
|
-
margin-top:
|
|
1215
|
+
padding: 24px;
|
|
1216
|
+
border-top: 1px solid var(--border);
|
|
1217
|
+
margin-top: 48px;
|
|
504
1218
|
}
|
|
505
|
-
footer a { color: var(--muted); }
|
|
506
|
-
|
|
507
|
-
* inside the iframe so we don't double up on attribution / source links. */
|
|
1219
|
+
footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
|
|
1220
|
+
footer a:hover { color: var(--text); }
|
|
508
1221
|
html[data-embed="1"] footer { display: none; }
|
|
1222
|
+
|
|
1223
|
+
/* ============================================================
|
|
1224
|
+
RESPONSIVE — narrow phone (<=520px)
|
|
1225
|
+
============================================================ */
|
|
1226
|
+
@media (max-width: 520px) {
|
|
1227
|
+
main { padding: 20px 14px 60px 14px; }
|
|
1228
|
+
.topbar { padding: 12px 14px; }
|
|
1229
|
+
.card { padding: 18px; }
|
|
1230
|
+
.hero { padding: 20px; }
|
|
1231
|
+
.hero-num { font-size: 36px; }
|
|
1232
|
+
.grid-cards { gap: 14px; }
|
|
1233
|
+
.card-header { flex-direction: column; align-items: flex-start; }
|
|
1234
|
+
.key-create { flex-direction: column; }
|
|
1235
|
+
.key-create .btn { width: 100%; }
|
|
1236
|
+
.topbar-right { gap: 6px; }
|
|
1237
|
+
.pill { padding: 5px 10px; font-size: 11px; height: 28px; }
|
|
1238
|
+
.brand-text .brand-sub { display: none; }
|
|
1239
|
+
.data-table { font-size: 12px; }
|
|
1240
|
+
.data-table th, .data-table td { padding: 8px 6px; }
|
|
1241
|
+
.modal-body { padding: 22px; }
|
|
1242
|
+
}
|