ft-scout 5.0.1 → 5.0.3
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/.firebase/hosting.d2Vi.cache +4 -4
- package/bin/src/commands/agent.d.ts.map +1 -1
- package/bin/src/commands/agent.js +39 -15
- package/bin/src/commands/agent.js.map +1 -1
- package/bin/src/commands/audit.d.ts.map +1 -1
- package/bin/src/commands/audit.js +29 -10
- package/bin/src/commands/audit.js.map +1 -1
- package/bin/src/commands/dashboard.d.ts.map +1 -1
- package/bin/src/commands/dashboard.js +32 -18
- package/bin/src/commands/dashboard.js.map +1 -1
- package/bin/src/commands/risky.d.ts.map +1 -1
- package/bin/src/commands/risky.js +32 -13
- package/bin/src/commands/risky.js.map +1 -1
- package/bin/src/engine/agentEngine.d.ts.map +1 -1
- package/bin/src/engine/agentEngine.js +56 -12
- package/bin/src/engine/agentEngine.js.map +1 -1
- package/bin/src/engine/verifier.d.ts.map +1 -1
- package/bin/src/engine/verifier.js +10 -3
- package/bin/src/engine/verifier.js.map +1 -1
- package/bin/src/index.js +7 -7
- package/bin/src/index.js.map +1 -1
- package/bin/src/server/server.d.ts.map +1 -0
- package/bin/src/server/server.js +207 -0
- package/bin/src/server/server.js.map +1 -0
- package/bin/src/utils/auth.d.ts.map +1 -1
- package/bin/src/utils/auth.js +68 -0
- package/bin/src/utils/auth.js.map +1 -1
- package/bin/src/utils/branding.js +1 -1
- package/package.json +2 -2
- package/web/ScoutFavicon.png +0 -0
- package/web/app.js +563 -660
- package/web/styles.css +944 -526
- package/web/favicon.svg +0 -39
package/web/styles.css
CHANGED
|
@@ -1,51 +1,73 @@
|
|
|
1
1
|
/* ==========================================================================
|
|
2
|
-
FrontTerrain Scout —
|
|
2
|
+
FrontTerrain Scout — Minimal Ambient Developer Dashboard Design System
|
|
3
|
+
Google Material 3 Dark & DeepMind Aesthetic Guidelines
|
|
3
4
|
========================================================================== */
|
|
4
5
|
|
|
5
6
|
:root {
|
|
6
|
-
/*
|
|
7
|
-
--bg-
|
|
8
|
-
--bg-
|
|
9
|
-
--bg-
|
|
10
|
-
--bg-input: rgba(
|
|
7
|
+
/* Core Ambient Dark Palette */
|
|
8
|
+
--bg-canvas: #090d16;
|
|
9
|
+
--bg-surface: rgba(16, 22, 34, 0.65);
|
|
10
|
+
--bg-surface-elevated: rgba(22, 30, 46, 0.75);
|
|
11
|
+
--bg-input: rgba(11, 16, 26, 0.8);
|
|
11
12
|
|
|
12
|
-
|
|
13
|
-
--border-
|
|
13
|
+
/* Borders & Dividers */
|
|
14
|
+
--border-subtle: rgba(255, 255, 255, 0.07);
|
|
15
|
+
--border-hover: rgba(99, 102, 241, 0.3);
|
|
16
|
+
--border-focus: rgba(56, 189, 248, 0.5);
|
|
14
17
|
|
|
15
|
-
|
|
16
|
-
--primary
|
|
17
|
-
--primary-
|
|
18
|
+
/* Accent Tokens */
|
|
19
|
+
--accent-primary: #6366f1; /* Indigo */
|
|
20
|
+
--accent-primary-hover: #4f46e5;
|
|
21
|
+
--accent-cyan: #38bdf8; /* Electric Cyan */
|
|
22
|
+
--accent-purple: #a855f7; /* Violet */
|
|
23
|
+
--accent-emerald: #34d399; /* Mint Emerald */
|
|
24
|
+
--accent-amber: #fbbf24; /* Amber */
|
|
25
|
+
--accent-rose: #f87171; /* Rose Coral */
|
|
18
26
|
|
|
19
|
-
|
|
20
|
-
--
|
|
21
|
-
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--accent-amber: #f59e0b;
|
|
25
|
-
--accent-rose: #f43f5e;
|
|
26
|
-
|
|
27
|
-
--text-bright: #f8fafc;
|
|
28
|
-
--text-main: #e2e8f0;
|
|
29
|
-
--text-muted: #94a3b8;
|
|
30
|
-
--text-dim: #64748b;
|
|
27
|
+
/* Text Contrast */
|
|
28
|
+
--text-primary: #f8fafc;
|
|
29
|
+
--text-secondary: #94a3b8;
|
|
30
|
+
--text-tertiary: #64748b;
|
|
31
|
+
--text-dim: #475569;
|
|
31
32
|
|
|
33
|
+
/* Fonts */
|
|
32
34
|
--font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
33
35
|
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
34
36
|
--font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace;
|
|
35
37
|
|
|
38
|
+
/* Radii */
|
|
36
39
|
--radius-sm: 8px;
|
|
37
40
|
--radius-md: 14px;
|
|
38
41
|
--radius-lg: 20px;
|
|
39
42
|
--radius-pill: 9999px;
|
|
40
43
|
|
|
41
|
-
|
|
42
|
-
--shadow-
|
|
44
|
+
/* Shadows & Ambient Glows */
|
|
45
|
+
--shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
|
|
46
|
+
--shadow-glow-primary: 0 0 30px rgba(99, 102, 241, 0.18);
|
|
47
|
+
--shadow-glow-cyan: 0 0 30px rgba(56, 189, 248, 0.18);
|
|
43
48
|
|
|
49
|
+
/* Transitions */
|
|
44
50
|
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
45
51
|
--transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
46
52
|
}
|
|
47
53
|
|
|
48
|
-
/*
|
|
54
|
+
/* Custom Minimal Scrollbar */
|
|
55
|
+
::-webkit-scrollbar {
|
|
56
|
+
width: 6px;
|
|
57
|
+
height: 6px;
|
|
58
|
+
}
|
|
59
|
+
::-webkit-scrollbar-track {
|
|
60
|
+
background: transparent;
|
|
61
|
+
}
|
|
62
|
+
::-webkit-scrollbar-thumb {
|
|
63
|
+
background: rgba(255, 255, 255, 0.12);
|
|
64
|
+
border-radius: 4px;
|
|
65
|
+
}
|
|
66
|
+
::-webkit-scrollbar-thumb:hover {
|
|
67
|
+
background: rgba(99, 102, 241, 0.4);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Reset & Base Setup */
|
|
49
71
|
*, *::before, *::after {
|
|
50
72
|
box-sizing: border-box;
|
|
51
73
|
margin: 0;
|
|
@@ -53,10 +75,10 @@
|
|
|
53
75
|
}
|
|
54
76
|
|
|
55
77
|
body {
|
|
56
|
-
background-color: var(--bg-
|
|
57
|
-
color: var(--text-
|
|
78
|
+
background-color: var(--bg-canvas);
|
|
79
|
+
color: var(--text-primary);
|
|
58
80
|
font-family: var(--font-body);
|
|
59
|
-
font-size:
|
|
81
|
+
font-size: 14px;
|
|
60
82
|
line-height: 1.6;
|
|
61
83
|
min-height: 100vh;
|
|
62
84
|
overflow-x: hidden;
|
|
@@ -64,64 +86,69 @@ body {
|
|
|
64
86
|
-webkit-font-smoothing: antialiased;
|
|
65
87
|
}
|
|
66
88
|
|
|
67
|
-
/* Ambient Background
|
|
89
|
+
/* Diffused Ambient Radial Background Glows */
|
|
68
90
|
.bg-glow {
|
|
69
91
|
position: fixed;
|
|
70
92
|
border-radius: 50%;
|
|
71
|
-
filter: blur(
|
|
93
|
+
filter: blur(140px);
|
|
72
94
|
pointer-events: none;
|
|
73
95
|
z-index: 0;
|
|
74
|
-
opacity: 0.
|
|
75
|
-
animation:
|
|
96
|
+
opacity: 0.35;
|
|
97
|
+
animation: floatGlow 16s infinite alternate ease-in-out;
|
|
76
98
|
}
|
|
77
99
|
|
|
78
100
|
.bg-glow-1 {
|
|
79
|
-
width:
|
|
80
|
-
height:
|
|
81
|
-
background: var(--primary);
|
|
82
|
-
top: -
|
|
101
|
+
width: 500px;
|
|
102
|
+
height: 500px;
|
|
103
|
+
background: var(--accent-primary);
|
|
104
|
+
top: -120px;
|
|
83
105
|
left: -100px;
|
|
84
106
|
}
|
|
85
107
|
|
|
86
108
|
.bg-glow-2 {
|
|
87
|
-
width:
|
|
88
|
-
height:
|
|
89
|
-
background: var(--
|
|
109
|
+
width: 550px;
|
|
110
|
+
height: 550px;
|
|
111
|
+
background: var(--accent-purple);
|
|
90
112
|
bottom: -150px;
|
|
91
|
-
right: -
|
|
92
|
-
animation-delay: -
|
|
113
|
+
right: -120px;
|
|
114
|
+
animation-delay: -6s;
|
|
93
115
|
}
|
|
94
116
|
|
|
95
117
|
.bg-glow-3 {
|
|
96
|
-
width:
|
|
97
|
-
height:
|
|
118
|
+
width: 400px;
|
|
119
|
+
height: 400px;
|
|
98
120
|
background: var(--accent-cyan);
|
|
99
|
-
top:
|
|
121
|
+
top: 45%;
|
|
100
122
|
left: 50%;
|
|
101
123
|
transform: translate(-50%, -50%);
|
|
102
|
-
opacity: 0.
|
|
124
|
+
opacity: 0.12;
|
|
103
125
|
}
|
|
104
126
|
|
|
105
|
-
@keyframes
|
|
106
|
-
0% { transform: scale(1) translate(0, 0); opacity: 0.
|
|
107
|
-
100% { transform: scale(1.
|
|
127
|
+
@keyframes floatGlow {
|
|
128
|
+
0% { transform: scale(1) translate(0, 0); opacity: 0.25; }
|
|
129
|
+
100% { transform: scale(1.1) translate(25px, 25px); opacity: 0.4; }
|
|
108
130
|
}
|
|
109
131
|
|
|
110
|
-
/*
|
|
132
|
+
/* Frosted Glass Panel */
|
|
111
133
|
.glass-panel {
|
|
112
|
-
background: var(--bg-
|
|
113
|
-
backdrop-filter: blur(
|
|
114
|
-
-webkit-backdrop-filter: blur(
|
|
115
|
-
border: 1px solid var(--border-
|
|
134
|
+
background: var(--bg-surface);
|
|
135
|
+
backdrop-filter: blur(20px);
|
|
136
|
+
-webkit-backdrop-filter: blur(20px);
|
|
137
|
+
border: 1px solid var(--border-subtle);
|
|
116
138
|
border-radius: var(--radius-lg);
|
|
117
|
-
box-shadow: var(--shadow-
|
|
139
|
+
box-shadow: var(--shadow-card);
|
|
140
|
+
transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.glass-panel:hover {
|
|
144
|
+
border-color: rgba(255, 255, 255, 0.12);
|
|
118
145
|
}
|
|
119
146
|
|
|
120
147
|
/* App Wrapper Layout */
|
|
121
148
|
.app-wrapper {
|
|
122
149
|
position: relative;
|
|
123
150
|
z-index: 1;
|
|
124
|
-
max-width:
|
|
151
|
+
max-width: 1280px;
|
|
125
152
|
margin: 0 auto;
|
|
126
153
|
padding: 0 24px;
|
|
127
154
|
display: flex;
|
|
@@ -132,56 +159,67 @@ body {
|
|
|
132
159
|
/* Typography Helpers */
|
|
133
160
|
h1, h2, h3, h4, h5, h6 {
|
|
134
161
|
font-family: var(--font-heading);
|
|
135
|
-
color: var(--text-
|
|
162
|
+
color: var(--text-primary);
|
|
136
163
|
font-weight: 600;
|
|
137
164
|
letter-spacing: -0.02em;
|
|
138
165
|
}
|
|
139
166
|
|
|
140
167
|
.text-gradient {
|
|
141
|
-
background: linear-gradient(135deg, #
|
|
168
|
+
background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 40%, #38bdf8 100%);
|
|
142
169
|
background-clip: text;
|
|
170
|
+
-webkit-background-clip: text;
|
|
143
171
|
-webkit-text-fill-color: transparent;
|
|
144
172
|
}
|
|
145
173
|
|
|
146
|
-
.text-
|
|
174
|
+
.text-bright { color: var(--text-primary); }
|
|
175
|
+
.text-muted { color: var(--text-secondary); }
|
|
176
|
+
.text-dim { color: var(--text-tertiary); }
|
|
147
177
|
.text-danger { color: var(--accent-rose) !important; }
|
|
148
|
-
.text-primary { color: var(--
|
|
178
|
+
.text-primary { color: var(--accent-cyan) !important; }
|
|
149
179
|
.block { display: block; }
|
|
150
180
|
.hidden { display: none !important; }
|
|
151
181
|
|
|
152
|
-
/*
|
|
182
|
+
/* Header Navbar */
|
|
153
183
|
.navbar {
|
|
154
184
|
display: flex;
|
|
155
185
|
align-items: center;
|
|
156
186
|
justify-content: space-between;
|
|
157
|
-
padding:
|
|
158
|
-
border-bottom: 1px solid var(--border-
|
|
159
|
-
margin-bottom:
|
|
187
|
+
padding: 18px 0;
|
|
188
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
189
|
+
margin-bottom: 28px;
|
|
160
190
|
}
|
|
161
191
|
|
|
162
192
|
.nav-left {
|
|
163
193
|
display: flex;
|
|
164
194
|
align-items: center;
|
|
165
|
-
gap:
|
|
195
|
+
gap: 14px;
|
|
166
196
|
}
|
|
167
197
|
|
|
168
198
|
.brand-logo {
|
|
169
199
|
display: flex;
|
|
170
200
|
align-items: center;
|
|
171
|
-
gap:
|
|
201
|
+
gap: 10px;
|
|
172
202
|
}
|
|
173
203
|
|
|
174
204
|
.logo-icon {
|
|
175
|
-
width:
|
|
176
|
-
height:
|
|
177
|
-
background:
|
|
205
|
+
width: 38px;
|
|
206
|
+
height: 38px;
|
|
207
|
+
background: rgba(15, 23, 42, 0.6);
|
|
208
|
+
border: 1px solid rgba(56, 189, 248, 0.3);
|
|
178
209
|
border-radius: var(--radius-md);
|
|
179
210
|
display: flex;
|
|
180
211
|
align-items: center;
|
|
181
212
|
justify-content: center;
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
213
|
+
box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
|
|
214
|
+
overflow: hidden;
|
|
215
|
+
padding: 3px;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.brand-logo-img {
|
|
219
|
+
width: 100%;
|
|
220
|
+
height: 100%;
|
|
221
|
+
object-fit: contain;
|
|
222
|
+
border-radius: calc(var(--radius-md) - 2px);
|
|
185
223
|
}
|
|
186
224
|
|
|
187
225
|
.brand-text {
|
|
@@ -191,48 +229,48 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
191
229
|
|
|
192
230
|
.brand-title {
|
|
193
231
|
font-family: var(--font-heading);
|
|
194
|
-
font-size:
|
|
195
|
-
font-weight:
|
|
196
|
-
letter-spacing: 0.
|
|
197
|
-
color: var(--text-
|
|
232
|
+
font-size: 18px;
|
|
233
|
+
font-weight: 700;
|
|
234
|
+
letter-spacing: 0.06em;
|
|
235
|
+
color: var(--text-primary);
|
|
198
236
|
}
|
|
199
237
|
|
|
200
238
|
.brand-subtitle {
|
|
201
239
|
font-size: 11px;
|
|
240
|
+
color: var(--text-tertiary);
|
|
241
|
+
letter-spacing: 0.04em;
|
|
202
242
|
text-transform: uppercase;
|
|
203
|
-
letter-spacing: 0.12em;
|
|
204
|
-
color: var(--text-muted);
|
|
205
243
|
}
|
|
206
244
|
|
|
207
245
|
.version-badge {
|
|
208
|
-
background: rgba(99, 102, 241, 0.
|
|
209
|
-
border: 1px solid rgba(99, 102, 241, 0.
|
|
210
|
-
color:
|
|
246
|
+
background: rgba(99, 102, 241, 0.12);
|
|
247
|
+
border: 1px solid rgba(99, 102, 241, 0.25);
|
|
248
|
+
color: #a5b4fc;
|
|
211
249
|
font-size: 11px;
|
|
212
250
|
font-weight: 600;
|
|
213
251
|
padding: 2px 8px;
|
|
214
252
|
border-radius: var(--radius-pill);
|
|
215
253
|
}
|
|
216
254
|
|
|
217
|
-
/* Nav
|
|
255
|
+
/* Minimal Nav Pills */
|
|
218
256
|
.nav-links {
|
|
219
257
|
display: flex;
|
|
220
258
|
align-items: center;
|
|
221
|
-
gap:
|
|
222
|
-
background: rgba(
|
|
223
|
-
padding:
|
|
259
|
+
gap: 4px;
|
|
260
|
+
background: rgba(11, 16, 26, 0.6);
|
|
261
|
+
padding: 4px;
|
|
224
262
|
border-radius: var(--radius-pill);
|
|
225
|
-
border: 1px solid var(--border-
|
|
263
|
+
border: 1px solid var(--border-subtle);
|
|
226
264
|
}
|
|
227
265
|
|
|
228
266
|
.nav-btn {
|
|
229
267
|
background: transparent;
|
|
230
268
|
border: none;
|
|
231
|
-
color: var(--text-
|
|
269
|
+
color: var(--text-secondary);
|
|
232
270
|
font-family: var(--font-body);
|
|
233
|
-
font-size:
|
|
271
|
+
font-size: 13px;
|
|
234
272
|
font-weight: 500;
|
|
235
|
-
padding:
|
|
273
|
+
padding: 7px 16px;
|
|
236
274
|
border-radius: var(--radius-pill);
|
|
237
275
|
cursor: pointer;
|
|
238
276
|
display: flex;
|
|
@@ -242,132 +280,137 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
242
280
|
}
|
|
243
281
|
|
|
244
282
|
.nav-btn:hover {
|
|
245
|
-
color: var(--text-
|
|
283
|
+
color: var(--text-primary);
|
|
246
284
|
background: rgba(255, 255, 255, 0.05);
|
|
247
285
|
}
|
|
248
286
|
|
|
249
287
|
.nav-btn.active {
|
|
250
|
-
background: var(--primary);
|
|
288
|
+
background: var(--accent-primary);
|
|
251
289
|
color: white;
|
|
252
|
-
box-shadow: 0 4px
|
|
290
|
+
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
|
|
253
291
|
}
|
|
254
292
|
|
|
255
|
-
/* Nav Right
|
|
293
|
+
/* Nav Right Controls */
|
|
256
294
|
.nav-right {
|
|
257
295
|
display: flex;
|
|
258
296
|
align-items: center;
|
|
259
|
-
gap:
|
|
297
|
+
gap: 14px;
|
|
260
298
|
}
|
|
261
299
|
|
|
262
300
|
.auth-status-pill {
|
|
263
301
|
display: flex;
|
|
264
302
|
align-items: center;
|
|
265
303
|
gap: 8px;
|
|
266
|
-
background: rgba(
|
|
267
|
-
border: 1px solid rgba(
|
|
304
|
+
background: rgba(52, 211, 153, 0.08);
|
|
305
|
+
border: 1px solid rgba(52, 211, 153, 0.2);
|
|
268
306
|
color: var(--accent-emerald);
|
|
269
307
|
font-size: 12px;
|
|
270
308
|
font-weight: 600;
|
|
271
|
-
padding:
|
|
309
|
+
padding: 5px 12px;
|
|
272
310
|
border-radius: var(--radius-pill);
|
|
273
311
|
}
|
|
274
312
|
|
|
275
313
|
.pulse-dot {
|
|
276
|
-
width:
|
|
277
|
-
height:
|
|
314
|
+
width: 7px;
|
|
315
|
+
height: 7px;
|
|
278
316
|
background: var(--accent-emerald);
|
|
279
317
|
border-radius: 50%;
|
|
280
|
-
box-shadow: 0 0
|
|
281
|
-
animation: pulseDot
|
|
318
|
+
box-shadow: 0 0 8px var(--accent-emerald);
|
|
319
|
+
animation: pulseDot 2.5s infinite ease-in-out;
|
|
282
320
|
}
|
|
283
321
|
|
|
284
322
|
@keyframes pulseDot {
|
|
285
323
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
286
|
-
50% { transform: scale(1.3); opacity: 0.
|
|
324
|
+
50% { transform: scale(1.3); opacity: 0.5; }
|
|
287
325
|
}
|
|
288
326
|
|
|
327
|
+
/* User Menu & Dropdown */
|
|
289
328
|
.user-menu {
|
|
290
329
|
position: relative;
|
|
291
330
|
}
|
|
292
331
|
|
|
293
332
|
.user-menu-btn {
|
|
294
|
-
background: rgba(255, 255, 255, 0.
|
|
295
|
-
border: 1px solid var(--border-
|
|
296
|
-
color: var(--text-
|
|
297
|
-
padding:
|
|
333
|
+
background: rgba(255, 255, 255, 0.04);
|
|
334
|
+
border: 1px solid var(--border-subtle);
|
|
335
|
+
color: var(--text-primary);
|
|
336
|
+
padding: 5px 12px;
|
|
298
337
|
border-radius: var(--radius-pill);
|
|
299
338
|
display: flex;
|
|
300
339
|
align-items: center;
|
|
301
|
-
gap:
|
|
340
|
+
gap: 8px;
|
|
302
341
|
cursor: pointer;
|
|
303
342
|
transition: var(--transition-fast);
|
|
304
343
|
}
|
|
305
344
|
|
|
306
345
|
.user-menu-btn:hover {
|
|
307
|
-
background: rgba(255, 255, 255, 0.
|
|
308
|
-
border-color: rgba(255, 255, 255, 0.
|
|
346
|
+
background: rgba(255, 255, 255, 0.08);
|
|
347
|
+
border-color: rgba(255, 255, 255, 0.15);
|
|
309
348
|
}
|
|
310
349
|
|
|
311
350
|
.avatar {
|
|
312
|
-
width:
|
|
313
|
-
height:
|
|
314
|
-
background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
|
|
351
|
+
width: 26px;
|
|
352
|
+
height: 26px;
|
|
353
|
+
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-primary));
|
|
315
354
|
border-radius: 50%;
|
|
316
355
|
display: flex;
|
|
317
356
|
align-items: center;
|
|
318
357
|
justify-content: center;
|
|
319
358
|
font-weight: 700;
|
|
320
|
-
font-size:
|
|
359
|
+
font-size: 12px;
|
|
321
360
|
color: white;
|
|
322
361
|
}
|
|
323
362
|
|
|
324
|
-
/* User Dropdown */
|
|
325
363
|
.dropdown-menu {
|
|
326
364
|
position: absolute;
|
|
327
365
|
top: calc(100% + 8px);
|
|
328
366
|
right: 0;
|
|
329
|
-
width:
|
|
330
|
-
background:
|
|
331
|
-
border: 1px solid var(--border-
|
|
367
|
+
width: 210px;
|
|
368
|
+
background: #0d121d;
|
|
369
|
+
border: 1px solid var(--border-subtle);
|
|
332
370
|
border-radius: var(--radius-md);
|
|
333
|
-
padding:
|
|
334
|
-
box-shadow: var(--shadow-
|
|
371
|
+
padding: 6px;
|
|
372
|
+
box-shadow: var(--shadow-card);
|
|
335
373
|
display: none;
|
|
336
374
|
z-index: 100;
|
|
337
375
|
}
|
|
338
376
|
|
|
339
377
|
.dropdown-menu.show {
|
|
340
378
|
display: block;
|
|
341
|
-
animation: fadeInDown 0.
|
|
379
|
+
animation: fadeInDown 0.18s ease-out;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
@keyframes fadeInDown {
|
|
383
|
+
from { opacity: 0; transform: translateY(-6px); }
|
|
384
|
+
to { opacity: 1; transform: translateY(0); }
|
|
342
385
|
}
|
|
343
386
|
|
|
344
387
|
.dropdown-header {
|
|
345
|
-
padding: 10px;
|
|
388
|
+
padding: 8px 10px;
|
|
346
389
|
display: flex;
|
|
347
390
|
flex-direction: column;
|
|
348
391
|
}
|
|
349
392
|
|
|
350
393
|
.dropdown-header small {
|
|
351
|
-
color: var(--text-
|
|
352
|
-
font-size:
|
|
394
|
+
color: var(--text-tertiary);
|
|
395
|
+
font-size: 11px;
|
|
353
396
|
}
|
|
354
397
|
|
|
355
398
|
.dropdown-divider {
|
|
356
399
|
border: none;
|
|
357
|
-
border-top: 1px solid var(--border-
|
|
358
|
-
margin:
|
|
400
|
+
border-top: 1px solid var(--border-subtle);
|
|
401
|
+
margin: 4px 0;
|
|
359
402
|
}
|
|
360
403
|
|
|
361
404
|
.dropdown-item {
|
|
362
405
|
width: 100%;
|
|
363
406
|
background: transparent;
|
|
364
407
|
border: none;
|
|
365
|
-
color: var(--text-
|
|
366
|
-
padding: 8px
|
|
408
|
+
color: var(--text-secondary);
|
|
409
|
+
padding: 8px 10px;
|
|
367
410
|
border-radius: var(--radius-sm);
|
|
368
411
|
display: flex;
|
|
369
412
|
align-items: center;
|
|
370
|
-
gap:
|
|
413
|
+
gap: 8px;
|
|
371
414
|
font-size: 13px;
|
|
372
415
|
cursor: pointer;
|
|
373
416
|
text-align: left;
|
|
@@ -375,8 +418,8 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
375
418
|
}
|
|
376
419
|
|
|
377
420
|
.dropdown-item:hover {
|
|
378
|
-
background: rgba(255, 255, 255, 0.
|
|
379
|
-
color: var(--text-
|
|
421
|
+
background: rgba(255, 255, 255, 0.06);
|
|
422
|
+
color: var(--text-primary);
|
|
380
423
|
}
|
|
381
424
|
|
|
382
425
|
/* Buttons */
|
|
@@ -387,8 +430,8 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
387
430
|
gap: 8px;
|
|
388
431
|
font-family: var(--font-body);
|
|
389
432
|
font-weight: 600;
|
|
390
|
-
font-size:
|
|
391
|
-
padding:
|
|
433
|
+
font-size: 13px;
|
|
434
|
+
padding: 8px 16px;
|
|
392
435
|
border-radius: var(--radius-md);
|
|
393
436
|
border: 1px solid transparent;
|
|
394
437
|
cursor: pointer;
|
|
@@ -398,20 +441,19 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
398
441
|
}
|
|
399
442
|
|
|
400
443
|
.btn-lg {
|
|
401
|
-
padding:
|
|
402
|
-
font-size:
|
|
403
|
-
border-radius: var(--radius-md);
|
|
444
|
+
padding: 12px 24px;
|
|
445
|
+
font-size: 15px;
|
|
404
446
|
}
|
|
405
447
|
|
|
406
448
|
.btn-sm {
|
|
407
|
-
padding:
|
|
408
|
-
font-size:
|
|
449
|
+
padding: 5px 12px;
|
|
450
|
+
font-size: 12px;
|
|
409
451
|
border-radius: var(--radius-sm);
|
|
410
452
|
}
|
|
411
453
|
|
|
412
454
|
.btn-xs {
|
|
413
|
-
padding:
|
|
414
|
-
font-size:
|
|
455
|
+
padding: 3px 8px;
|
|
456
|
+
font-size: 11px;
|
|
415
457
|
border-radius: var(--radius-sm);
|
|
416
458
|
}
|
|
417
459
|
|
|
@@ -420,37 +462,37 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
420
462
|
}
|
|
421
463
|
|
|
422
464
|
.btn-primary {
|
|
423
|
-
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
|
|
465
|
+
background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
|
|
424
466
|
color: white;
|
|
425
|
-
box-shadow: 0 4px
|
|
467
|
+
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
|
|
426
468
|
}
|
|
427
469
|
|
|
428
470
|
.btn-primary:hover {
|
|
429
|
-
transform: translateY(-
|
|
430
|
-
box-shadow: 0 6px
|
|
471
|
+
transform: translateY(-1px);
|
|
472
|
+
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
|
|
431
473
|
}
|
|
432
474
|
|
|
433
475
|
.btn-success {
|
|
434
476
|
background: linear-gradient(135deg, var(--accent-emerald), #059669);
|
|
435
477
|
color: white;
|
|
436
|
-
box-shadow: 0 4px
|
|
478
|
+
box-shadow: 0 4px 14px rgba(52, 211, 153, 0.25);
|
|
437
479
|
}
|
|
438
480
|
|
|
439
481
|
.btn-success:hover {
|
|
440
|
-
transform: translateY(-
|
|
441
|
-
box-shadow: 0 6px
|
|
482
|
+
transform: translateY(-1px);
|
|
483
|
+
box-shadow: 0 6px 20px rgba(52, 211, 153, 0.4);
|
|
442
484
|
}
|
|
443
485
|
|
|
444
486
|
.btn-outline {
|
|
445
487
|
background: transparent;
|
|
446
|
-
border-color: var(--border-
|
|
447
|
-
color: var(--text-
|
|
488
|
+
border-color: var(--border-subtle);
|
|
489
|
+
color: var(--text-secondary);
|
|
448
490
|
}
|
|
449
491
|
|
|
450
492
|
.btn-outline:hover {
|
|
451
|
-
background: rgba(255, 255, 255, 0.
|
|
452
|
-
border-color: rgba(255, 255, 255, 0.
|
|
453
|
-
color: var(--text-
|
|
493
|
+
background: rgba(255, 255, 255, 0.05);
|
|
494
|
+
border-color: rgba(255, 255, 255, 0.15);
|
|
495
|
+
color: var(--text-primary);
|
|
454
496
|
}
|
|
455
497
|
|
|
456
498
|
/* ================= AUTH SECTION ================= */
|
|
@@ -458,87 +500,94 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
458
500
|
display: flex;
|
|
459
501
|
align-items: center;
|
|
460
502
|
justify-content: center;
|
|
461
|
-
padding:
|
|
462
|
-
min-height:
|
|
503
|
+
padding: 36px 0;
|
|
504
|
+
min-height: 65vh;
|
|
463
505
|
}
|
|
464
506
|
|
|
465
507
|
.auth-card {
|
|
466
508
|
width: 100%;
|
|
467
|
-
max-width:
|
|
468
|
-
padding:
|
|
469
|
-
|
|
470
|
-
border: 1px solid rgba(99, 102, 241, 0.2);
|
|
509
|
+
max-width: 440px;
|
|
510
|
+
padding: 36px;
|
|
511
|
+
border: 1px solid rgba(99, 102, 241, 0.18);
|
|
471
512
|
}
|
|
472
513
|
|
|
473
514
|
.auth-header {
|
|
474
515
|
text-align: center;
|
|
475
|
-
margin-bottom:
|
|
516
|
+
margin-bottom: 24px;
|
|
476
517
|
}
|
|
477
518
|
|
|
478
519
|
.auth-logo-badge {
|
|
479
520
|
width: 56px;
|
|
480
521
|
height: 56px;
|
|
481
|
-
background:
|
|
522
|
+
background: rgba(15, 23, 42, 0.6);
|
|
523
|
+
border: 1px solid rgba(168, 85, 247, 0.3);
|
|
482
524
|
border-radius: var(--radius-md);
|
|
483
|
-
margin: 0 auto
|
|
525
|
+
margin: 0 auto 14px;
|
|
484
526
|
display: flex;
|
|
485
527
|
align-items: center;
|
|
486
528
|
justify-content: center;
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
529
|
+
box-shadow: var(--shadow-glow-primary);
|
|
530
|
+
overflow: hidden;
|
|
531
|
+
padding: 6px;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
.auth-logo-img {
|
|
535
|
+
width: 100%;
|
|
536
|
+
height: 100%;
|
|
537
|
+
object-fit: contain;
|
|
538
|
+
border-radius: calc(var(--radius-md) - 2px);
|
|
490
539
|
}
|
|
491
540
|
|
|
492
541
|
.auth-header h2 {
|
|
493
|
-
font-size:
|
|
494
|
-
margin-bottom:
|
|
542
|
+
font-size: 22px;
|
|
543
|
+
margin-bottom: 6px;
|
|
495
544
|
}
|
|
496
545
|
|
|
497
546
|
.auth-header p {
|
|
498
|
-
color: var(--text-
|
|
499
|
-
font-size:
|
|
547
|
+
color: var(--text-secondary);
|
|
548
|
+
font-size: 13px;
|
|
500
549
|
}
|
|
501
550
|
|
|
502
551
|
.auth-tabs {
|
|
503
552
|
display: flex;
|
|
504
|
-
background: rgba(
|
|
505
|
-
padding:
|
|
553
|
+
background: rgba(11, 16, 26, 0.8);
|
|
554
|
+
padding: 3px;
|
|
506
555
|
border-radius: var(--radius-md);
|
|
507
|
-
border: 1px solid var(--border-
|
|
508
|
-
margin-bottom:
|
|
556
|
+
border: 1px solid var(--border-subtle);
|
|
557
|
+
margin-bottom: 20px;
|
|
509
558
|
}
|
|
510
559
|
|
|
511
560
|
.auth-tab {
|
|
512
561
|
flex: 1;
|
|
513
562
|
background: transparent;
|
|
514
563
|
border: none;
|
|
515
|
-
color: var(--text-
|
|
564
|
+
color: var(--text-secondary);
|
|
516
565
|
font-family: var(--font-body);
|
|
517
566
|
font-weight: 600;
|
|
518
|
-
font-size:
|
|
519
|
-
padding:
|
|
567
|
+
font-size: 13px;
|
|
568
|
+
padding: 8px;
|
|
520
569
|
border-radius: var(--radius-sm);
|
|
521
570
|
cursor: pointer;
|
|
522
571
|
transition: var(--transition-fast);
|
|
523
572
|
display: flex;
|
|
524
573
|
align-items: center;
|
|
525
574
|
justify-content: center;
|
|
526
|
-
gap:
|
|
575
|
+
gap: 6px;
|
|
527
576
|
}
|
|
528
577
|
|
|
529
578
|
.auth-tab.active {
|
|
530
|
-
background: var(--primary);
|
|
579
|
+
background: var(--accent-primary);
|
|
531
580
|
color: white;
|
|
532
|
-
box-shadow: 0
|
|
581
|
+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
|
|
533
582
|
}
|
|
534
583
|
|
|
535
584
|
.auth-form {
|
|
536
585
|
display: flex;
|
|
537
586
|
flex-direction: column;
|
|
538
|
-
gap:
|
|
587
|
+
gap: 16px;
|
|
539
588
|
}
|
|
540
589
|
|
|
541
|
-
/*
|
|
590
|
+
/* Forms */
|
|
542
591
|
.form-group {
|
|
543
592
|
display: flex;
|
|
544
593
|
flex-direction: column;
|
|
@@ -546,12 +595,12 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
546
595
|
}
|
|
547
596
|
|
|
548
597
|
.form-group label {
|
|
549
|
-
font-size:
|
|
598
|
+
font-size: 12px;
|
|
550
599
|
font-weight: 500;
|
|
551
|
-
color: var(--text-
|
|
600
|
+
color: var(--text-secondary);
|
|
552
601
|
display: flex;
|
|
553
602
|
align-items: center;
|
|
554
|
-
gap:
|
|
603
|
+
gap: 6px;
|
|
555
604
|
}
|
|
556
605
|
|
|
557
606
|
.input-wrapper {
|
|
@@ -563,33 +612,33 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
563
612
|
.input-wrapper input, .input-control {
|
|
564
613
|
width: 100%;
|
|
565
614
|
background: var(--bg-input);
|
|
566
|
-
border: 1px solid var(--border-
|
|
567
|
-
color: var(--text-
|
|
615
|
+
border: 1px solid var(--border-subtle);
|
|
616
|
+
color: var(--text-primary);
|
|
568
617
|
font-family: var(--font-body);
|
|
569
|
-
font-size:
|
|
570
|
-
padding:
|
|
618
|
+
font-size: 13px;
|
|
619
|
+
padding: 10px 14px;
|
|
571
620
|
border-radius: var(--radius-md);
|
|
572
621
|
outline: none;
|
|
573
622
|
transition: var(--transition-fast);
|
|
574
623
|
}
|
|
575
624
|
|
|
576
625
|
.input-wrapper input:focus, .input-control:focus {
|
|
577
|
-
border-color: var(--
|
|
578
|
-
box-shadow: 0 0 0 3px rgba(
|
|
626
|
+
border-color: var(--accent-cyan);
|
|
627
|
+
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
|
|
579
628
|
}
|
|
580
629
|
|
|
581
630
|
.btn-toggle-pwd {
|
|
582
631
|
position: absolute;
|
|
583
|
-
right:
|
|
632
|
+
right: 12px;
|
|
584
633
|
background: transparent;
|
|
585
634
|
border: none;
|
|
586
|
-
color: var(--text-
|
|
635
|
+
color: var(--text-tertiary);
|
|
587
636
|
cursor: pointer;
|
|
588
|
-
font-size:
|
|
637
|
+
font-size: 13px;
|
|
589
638
|
}
|
|
590
639
|
|
|
591
640
|
.btn-toggle-pwd:hover {
|
|
592
|
-
color: var(--text-
|
|
641
|
+
color: var(--text-secondary);
|
|
593
642
|
}
|
|
594
643
|
|
|
595
644
|
.form-row {
|
|
@@ -604,156 +653,180 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
604
653
|
.checkbox-label {
|
|
605
654
|
display: flex;
|
|
606
655
|
align-items: center;
|
|
607
|
-
gap:
|
|
608
|
-
font-size:
|
|
609
|
-
color: var(--text-
|
|
656
|
+
gap: 6px;
|
|
657
|
+
font-size: 12px;
|
|
658
|
+
color: var(--text-secondary);
|
|
610
659
|
cursor: pointer;
|
|
611
660
|
}
|
|
612
661
|
|
|
613
662
|
.checkbox-label input[type="checkbox"] {
|
|
614
|
-
accent-color: var(--primary);
|
|
615
|
-
width:
|
|
616
|
-
height:
|
|
663
|
+
accent-color: var(--accent-primary);
|
|
664
|
+
width: 14px;
|
|
665
|
+
height: 14px;
|
|
617
666
|
cursor: pointer;
|
|
618
667
|
}
|
|
619
668
|
|
|
620
669
|
.link-muted {
|
|
621
|
-
color: var(--text-
|
|
622
|
-
font-size:
|
|
670
|
+
color: var(--text-secondary);
|
|
671
|
+
font-size: 12px;
|
|
623
672
|
text-decoration: none;
|
|
624
673
|
}
|
|
625
674
|
|
|
626
675
|
.link-muted:hover {
|
|
627
|
-
color: var(--
|
|
628
|
-
text-decoration: underline;
|
|
629
|
-
}
|
|
630
|
-
|
|
631
|
-
.tenant-badge-footer {
|
|
632
|
-
margin-top: 10px;
|
|
633
|
-
text-align: center;
|
|
634
|
-
font-size: 12px;
|
|
635
|
-
color: var(--text-dim);
|
|
636
|
-
background: rgba(255, 255, 255, 0.03);
|
|
637
|
-
padding: 8px;
|
|
638
|
-
border-radius: var(--radius-sm);
|
|
639
|
-
border: 1px dashed var(--border-light);
|
|
640
|
-
}
|
|
641
|
-
|
|
642
|
-
.tenant-badge-footer code {
|
|
643
|
-
color: var(--accent-amber);
|
|
644
|
-
font-family: var(--font-mono);
|
|
676
|
+
color: var(--accent-cyan);
|
|
645
677
|
}
|
|
646
678
|
|
|
647
679
|
.auth-demo-box {
|
|
648
|
-
margin-top:
|
|
649
|
-
padding-top:
|
|
650
|
-
border-top: 1px solid var(--border-
|
|
680
|
+
margin-top: 20px;
|
|
681
|
+
padding-top: 16px;
|
|
682
|
+
border-top: 1px solid var(--border-subtle);
|
|
651
683
|
display: flex;
|
|
652
684
|
align-items: center;
|
|
653
685
|
justify-content: space-between;
|
|
654
|
-
font-size:
|
|
655
|
-
color: var(--text-
|
|
686
|
+
font-size: 12px;
|
|
687
|
+
color: var(--text-secondary);
|
|
656
688
|
}
|
|
657
689
|
|
|
658
690
|
/* ================= DASHBOARD SECTION ================= */
|
|
659
691
|
.dashboard-section {
|
|
660
692
|
display: flex;
|
|
661
693
|
flex-direction: column;
|
|
662
|
-
gap:
|
|
663
|
-
padding-bottom:
|
|
694
|
+
gap: 24px;
|
|
695
|
+
padding-bottom: 36px;
|
|
664
696
|
}
|
|
665
697
|
|
|
666
|
-
/*
|
|
698
|
+
/* Ambient Workspace Hero Banner */
|
|
667
699
|
.welcome-banner {
|
|
668
|
-
padding: 32px
|
|
700
|
+
padding: 24px 32px;
|
|
669
701
|
display: flex;
|
|
670
702
|
align-items: center;
|
|
671
703
|
justify-content: space-between;
|
|
672
|
-
background: linear-gradient(135deg, rgba(
|
|
673
|
-
border: 1px solid rgba(99, 102, 241, 0.
|
|
704
|
+
background: linear-gradient(135deg, rgba(16, 22, 34, 0.8), rgba(11, 16, 26, 0.9));
|
|
705
|
+
border: 1px solid rgba(99, 102, 241, 0.18);
|
|
674
706
|
position: relative;
|
|
675
707
|
overflow: hidden;
|
|
676
708
|
}
|
|
677
709
|
|
|
678
710
|
.banner-content {
|
|
679
|
-
max-width:
|
|
711
|
+
max-width: 620px;
|
|
680
712
|
}
|
|
681
713
|
|
|
682
714
|
.banner-badge {
|
|
683
715
|
display: inline-flex;
|
|
684
716
|
align-items: center;
|
|
685
717
|
gap: 6px;
|
|
686
|
-
background: rgba(
|
|
718
|
+
background: rgba(52, 211, 153, 0.12);
|
|
687
719
|
color: var(--accent-emerald);
|
|
688
|
-
font-size:
|
|
720
|
+
font-size: 11px;
|
|
689
721
|
font-weight: 600;
|
|
690
|
-
padding:
|
|
722
|
+
padding: 3px 10px;
|
|
691
723
|
border-radius: var(--radius-pill);
|
|
692
|
-
margin-bottom:
|
|
724
|
+
margin-bottom: 10px;
|
|
693
725
|
}
|
|
694
726
|
|
|
695
727
|
.banner-content h1 {
|
|
696
|
-
font-size:
|
|
697
|
-
margin-bottom:
|
|
728
|
+
font-size: 24px;
|
|
729
|
+
margin-bottom: 6px;
|
|
698
730
|
}
|
|
699
731
|
|
|
700
732
|
.banner-content p {
|
|
701
|
-
color: var(--text-
|
|
702
|
-
font-size:
|
|
733
|
+
color: var(--text-secondary);
|
|
734
|
+
font-size: 13px;
|
|
703
735
|
}
|
|
704
736
|
|
|
705
737
|
.banner-actions {
|
|
706
738
|
display: flex;
|
|
707
|
-
gap:
|
|
739
|
+
gap: 10px;
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
/* Monitored Repository Switcher & Scanner Bar */
|
|
743
|
+
.repo-switcher-bar {
|
|
744
|
+
display: flex;
|
|
745
|
+
align-items: center;
|
|
746
|
+
justify-content: space-between;
|
|
747
|
+
background: rgba(16, 22, 34, 0.6);
|
|
748
|
+
border: 1px solid var(--border-subtle);
|
|
749
|
+
border-radius: var(--radius-md);
|
|
750
|
+
padding: 12px 18px;
|
|
751
|
+
gap: 14px;
|
|
752
|
+
flex-wrap: wrap;
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
.repo-switcher-info {
|
|
756
|
+
display: flex;
|
|
757
|
+
align-items: center;
|
|
758
|
+
gap: 10px;
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
.repo-select-wrapper {
|
|
762
|
+
display: flex;
|
|
763
|
+
align-items: center;
|
|
764
|
+
gap: 8px;
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
.repo-select-input {
|
|
768
|
+
background: var(--bg-canvas);
|
|
769
|
+
border: 1px solid var(--border-subtle);
|
|
770
|
+
color: var(--accent-cyan);
|
|
771
|
+
font-family: var(--font-mono);
|
|
772
|
+
font-size: 12px;
|
|
773
|
+
padding: 7px 12px;
|
|
774
|
+
border-radius: var(--radius-sm);
|
|
775
|
+
outline: none;
|
|
776
|
+
cursor: pointer;
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
.repo-select-input:focus {
|
|
780
|
+
border-color: var(--accent-primary);
|
|
708
781
|
}
|
|
709
782
|
|
|
710
|
-
/* Metrics Grid */
|
|
783
|
+
/* Metrics Grid (Minimal 4 Stat Cards) */
|
|
711
784
|
.stats-grid {
|
|
712
785
|
display: grid;
|
|
713
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
714
|
-
gap:
|
|
786
|
+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
787
|
+
gap: 18px;
|
|
715
788
|
}
|
|
716
789
|
|
|
717
790
|
.stat-card {
|
|
718
|
-
padding:
|
|
791
|
+
padding: 20px;
|
|
719
792
|
display: flex;
|
|
720
793
|
align-items: flex-start;
|
|
721
|
-
gap:
|
|
794
|
+
gap: 16px;
|
|
722
795
|
transition: var(--transition-normal);
|
|
723
796
|
}
|
|
724
797
|
|
|
725
798
|
.stat-card:hover {
|
|
726
|
-
transform: translateY(-
|
|
727
|
-
border-color: rgba(99, 102, 241, 0.
|
|
799
|
+
transform: translateY(-2px);
|
|
800
|
+
border-color: rgba(99, 102, 241, 0.25);
|
|
728
801
|
}
|
|
729
802
|
|
|
730
803
|
.stat-icon {
|
|
731
|
-
width:
|
|
732
|
-
height:
|
|
804
|
+
width: 42px;
|
|
805
|
+
height: 42px;
|
|
733
806
|
border-radius: var(--radius-md);
|
|
734
807
|
display: flex;
|
|
735
808
|
align-items: center;
|
|
736
809
|
justify-content: center;
|
|
737
|
-
font-size:
|
|
810
|
+
font-size: 18px;
|
|
738
811
|
color: white;
|
|
739
812
|
flex-shrink: 0;
|
|
740
813
|
}
|
|
741
814
|
|
|
742
|
-
.icon-primary { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); }
|
|
743
|
-
.icon-secondary { background: linear-gradient(135deg, var(--
|
|
815
|
+
.icon-primary { background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover)); }
|
|
816
|
+
.icon-secondary { background: linear-gradient(135deg, var(--accent-purple), #7c3aed); }
|
|
744
817
|
.icon-warning { background: linear-gradient(135deg, var(--accent-amber), #d97706); }
|
|
745
818
|
.icon-success { background: linear-gradient(135deg, var(--accent-emerald), #059669); }
|
|
746
819
|
|
|
747
820
|
.stat-details {
|
|
748
821
|
display: flex;
|
|
749
822
|
flex-direction: column;
|
|
750
|
-
gap:
|
|
823
|
+
gap: 3px;
|
|
751
824
|
width: 100%;
|
|
752
825
|
}
|
|
753
826
|
|
|
754
827
|
.stat-label {
|
|
755
|
-
font-size:
|
|
756
|
-
color: var(--text-
|
|
828
|
+
font-size: 12px;
|
|
829
|
+
color: var(--text-secondary);
|
|
757
830
|
font-weight: 500;
|
|
758
831
|
}
|
|
759
832
|
|
|
@@ -765,46 +838,46 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
765
838
|
|
|
766
839
|
.stat-value {
|
|
767
840
|
font-family: var(--font-heading);
|
|
768
|
-
font-size:
|
|
841
|
+
font-size: 26px;
|
|
769
842
|
font-weight: 700;
|
|
770
|
-
color: var(--text-
|
|
843
|
+
color: var(--text-primary);
|
|
771
844
|
}
|
|
772
845
|
|
|
773
846
|
.stat-badge {
|
|
774
|
-
font-size:
|
|
847
|
+
font-size: 10px;
|
|
775
848
|
font-weight: 600;
|
|
776
|
-
padding: 2px
|
|
849
|
+
padding: 2px 7px;
|
|
777
850
|
border-radius: var(--radius-pill);
|
|
778
851
|
}
|
|
779
852
|
|
|
780
|
-
.stat-badge.positive { background: rgba(
|
|
781
|
-
.stat-badge.warning { background: rgba(
|
|
782
|
-
.stat-badge.info { background: rgba(
|
|
853
|
+
.stat-badge.positive { background: rgba(52, 211, 153, 0.12); color: var(--accent-emerald); }
|
|
854
|
+
.stat-badge.warning { background: rgba(251, 191, 36, 0.12); color: var(--accent-amber); }
|
|
855
|
+
.stat-badge.info { background: rgba(56, 189, 248, 0.12); color: var(--accent-cyan); }
|
|
783
856
|
|
|
784
857
|
.stat-sub {
|
|
785
|
-
font-size:
|
|
786
|
-
color: var(--text-
|
|
858
|
+
font-size: 11px;
|
|
859
|
+
color: var(--text-tertiary);
|
|
787
860
|
}
|
|
788
861
|
|
|
789
|
-
/* Tab Panels &
|
|
862
|
+
/* Tab Panels & Card Containers */
|
|
790
863
|
.tab-pane {
|
|
791
864
|
display: none;
|
|
792
865
|
}
|
|
793
866
|
|
|
794
867
|
.tab-pane.active {
|
|
795
868
|
display: block;
|
|
796
|
-
animation: fadeIn 0.
|
|
869
|
+
animation: fadeIn 0.25s ease-in-out;
|
|
797
870
|
}
|
|
798
871
|
|
|
799
872
|
@keyframes fadeIn {
|
|
800
|
-
from { opacity: 0; transform: translateY(
|
|
873
|
+
from { opacity: 0; transform: translateY(6px); }
|
|
801
874
|
to { opacity: 1; transform: translateY(0); }
|
|
802
875
|
}
|
|
803
876
|
|
|
804
877
|
.grid-2col {
|
|
805
878
|
display: grid;
|
|
806
879
|
grid-template-columns: 1fr 1fr;
|
|
807
|
-
gap:
|
|
880
|
+
gap: 20px;
|
|
808
881
|
}
|
|
809
882
|
|
|
810
883
|
@media (max-width: 900px) {
|
|
@@ -812,71 +885,71 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
812
885
|
}
|
|
813
886
|
|
|
814
887
|
.card {
|
|
815
|
-
padding:
|
|
888
|
+
padding: 24px;
|
|
816
889
|
}
|
|
817
890
|
|
|
818
891
|
.card-header {
|
|
819
892
|
display: flex;
|
|
820
893
|
align-items: flex-start;
|
|
821
894
|
justify-content: space-between;
|
|
822
|
-
margin-bottom:
|
|
823
|
-
padding-bottom:
|
|
824
|
-
border-bottom: 1px solid var(--border-
|
|
895
|
+
margin-bottom: 20px;
|
|
896
|
+
padding-bottom: 14px;
|
|
897
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
825
898
|
}
|
|
826
899
|
|
|
827
900
|
.card-header h3 {
|
|
828
|
-
font-size:
|
|
901
|
+
font-size: 16px;
|
|
829
902
|
display: flex;
|
|
830
903
|
align-items: center;
|
|
831
|
-
gap:
|
|
904
|
+
gap: 8px;
|
|
832
905
|
}
|
|
833
906
|
|
|
834
907
|
.card-header .subtitle {
|
|
835
|
-
font-size:
|
|
836
|
-
color: var(--text-
|
|
908
|
+
font-size: 12px;
|
|
909
|
+
color: var(--text-secondary);
|
|
837
910
|
font-weight: normal;
|
|
838
|
-
margin-top:
|
|
911
|
+
margin-top: 3px;
|
|
839
912
|
}
|
|
840
913
|
|
|
841
914
|
/* Badges */
|
|
842
915
|
.badge {
|
|
843
|
-
font-size:
|
|
916
|
+
font-size: 11px;
|
|
844
917
|
font-weight: 600;
|
|
845
|
-
padding: 3px
|
|
918
|
+
padding: 3px 9px;
|
|
846
919
|
border-radius: var(--radius-pill);
|
|
847
920
|
}
|
|
848
921
|
|
|
849
|
-
.badge-accent { background: rgba(99, 102, 241, 0.15); color:
|
|
850
|
-
.badge-success { background: rgba(
|
|
851
|
-
.badge-warning { background: rgba(
|
|
852
|
-
.badge-info { background: rgba(
|
|
922
|
+
.badge-accent { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
|
|
923
|
+
.badge-success { background: rgba(52, 211, 153, 0.15); color: var(--accent-emerald); }
|
|
924
|
+
.badge-warning { background: rgba(251, 191, 36, 0.15); color: var(--accent-amber); }
|
|
925
|
+
.badge-info { background: rgba(56, 189, 248, 0.15); color: var(--accent-cyan); }
|
|
853
926
|
|
|
854
|
-
/* Health Bars */
|
|
927
|
+
/* Health Progress Bars */
|
|
855
928
|
.health-item {
|
|
856
|
-
margin-bottom:
|
|
929
|
+
margin-bottom: 16px;
|
|
857
930
|
}
|
|
858
931
|
|
|
859
932
|
.health-meta {
|
|
860
933
|
display: flex;
|
|
861
934
|
justify-content: space-between;
|
|
862
|
-
font-size:
|
|
863
|
-
margin-bottom:
|
|
935
|
+
font-size: 13px;
|
|
936
|
+
margin-bottom: 6px;
|
|
864
937
|
}
|
|
865
938
|
|
|
866
939
|
.repo-name {
|
|
867
940
|
font-weight: 600;
|
|
868
|
-
color: var(--text-
|
|
941
|
+
color: var(--text-primary);
|
|
869
942
|
}
|
|
870
943
|
|
|
871
|
-
.health-score { font-weight: 600; font-size:
|
|
944
|
+
.health-score { font-weight: 600; font-size: 12px; }
|
|
872
945
|
.score-high { color: var(--accent-emerald); }
|
|
873
946
|
.score-med { color: var(--accent-cyan); }
|
|
874
947
|
.score-warn { color: var(--accent-amber); }
|
|
875
948
|
|
|
876
949
|
.progress-bar {
|
|
877
950
|
width: 100%;
|
|
878
|
-
height:
|
|
879
|
-
background: rgba(255, 255, 255, 0.
|
|
951
|
+
height: 6px;
|
|
952
|
+
background: rgba(255, 255, 255, 0.06);
|
|
880
953
|
border-radius: var(--radius-pill);
|
|
881
954
|
overflow: hidden;
|
|
882
955
|
}
|
|
@@ -884,46 +957,46 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
884
957
|
.progress-fill {
|
|
885
958
|
height: 100%;
|
|
886
959
|
border-radius: var(--radius-pill);
|
|
887
|
-
transition: width 0.
|
|
960
|
+
transition: width 0.5s ease-out;
|
|
888
961
|
}
|
|
889
962
|
|
|
890
963
|
.bg-success { background: var(--accent-emerald); }
|
|
891
964
|
.bg-info { background: var(--accent-cyan); }
|
|
892
965
|
.bg-warning { background: var(--accent-amber); }
|
|
893
966
|
|
|
894
|
-
/* Quick
|
|
967
|
+
/* Quick Scout Commands Bar */
|
|
895
968
|
.quick-actions-bar {
|
|
896
|
-
margin-top:
|
|
897
|
-
padding-top:
|
|
898
|
-
border-top: 1px dashed var(--border-
|
|
969
|
+
margin-top: 20px;
|
|
970
|
+
padding-top: 16px;
|
|
971
|
+
border-top: 1px dashed var(--border-subtle);
|
|
899
972
|
}
|
|
900
973
|
|
|
901
974
|
.quick-actions-bar h4 {
|
|
902
|
-
font-size:
|
|
903
|
-
margin-bottom:
|
|
904
|
-
color: var(--text-
|
|
975
|
+
font-size: 13px;
|
|
976
|
+
margin-bottom: 10px;
|
|
977
|
+
color: var(--text-secondary);
|
|
905
978
|
}
|
|
906
979
|
|
|
907
980
|
.cli-chips {
|
|
908
981
|
display: flex;
|
|
909
982
|
flex-wrap: wrap;
|
|
910
|
-
gap:
|
|
983
|
+
gap: 8px;
|
|
911
984
|
}
|
|
912
985
|
|
|
913
986
|
.cli-chip {
|
|
914
|
-
background: rgba(
|
|
915
|
-
border: 1px solid var(--border-
|
|
987
|
+
background: rgba(11, 16, 26, 0.9);
|
|
988
|
+
border: 1px solid var(--border-subtle);
|
|
916
989
|
color: var(--accent-cyan);
|
|
917
990
|
font-family: var(--font-mono);
|
|
918
|
-
font-size:
|
|
919
|
-
padding:
|
|
991
|
+
font-size: 12px;
|
|
992
|
+
padding: 5px 12px;
|
|
920
993
|
border-radius: var(--radius-sm);
|
|
921
994
|
cursor: pointer;
|
|
922
995
|
transition: var(--transition-fast);
|
|
923
996
|
}
|
|
924
997
|
|
|
925
998
|
.cli-chip:hover {
|
|
926
|
-
border-color: var(--primary);
|
|
999
|
+
border-color: var(--accent-primary);
|
|
927
1000
|
color: white;
|
|
928
1001
|
background: rgba(99, 102, 241, 0.2);
|
|
929
1002
|
}
|
|
@@ -933,25 +1006,23 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
933
1006
|
list-style: none;
|
|
934
1007
|
display: flex;
|
|
935
1008
|
flex-direction: column;
|
|
936
|
-
gap:
|
|
937
|
-
position: relative;
|
|
1009
|
+
gap: 16px;
|
|
938
1010
|
}
|
|
939
1011
|
|
|
940
1012
|
.timeline-item {
|
|
941
1013
|
display: flex;
|
|
942
|
-
gap:
|
|
943
|
-
position: relative;
|
|
1014
|
+
gap: 14px;
|
|
944
1015
|
}
|
|
945
1016
|
|
|
946
1017
|
.timeline-dot {
|
|
947
|
-
width:
|
|
948
|
-
height:
|
|
1018
|
+
width: 28px;
|
|
1019
|
+
height: 28px;
|
|
949
1020
|
border-radius: 50%;
|
|
950
1021
|
display: flex;
|
|
951
1022
|
align-items: center;
|
|
952
1023
|
justify-content: center;
|
|
953
1024
|
color: white;
|
|
954
|
-
font-size:
|
|
1025
|
+
font-size: 12px;
|
|
955
1026
|
flex-shrink: 0;
|
|
956
1027
|
}
|
|
957
1028
|
|
|
@@ -961,53 +1032,53 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
961
1032
|
}
|
|
962
1033
|
|
|
963
1034
|
.timeline-content strong {
|
|
964
|
-
color: var(--text-
|
|
965
|
-
font-size:
|
|
1035
|
+
color: var(--text-primary);
|
|
1036
|
+
font-size: 13px;
|
|
966
1037
|
}
|
|
967
1038
|
|
|
968
1039
|
.timeline-content p {
|
|
969
|
-
color: var(--text-
|
|
970
|
-
font-size:
|
|
1040
|
+
color: var(--text-secondary);
|
|
1041
|
+
font-size: 12px;
|
|
971
1042
|
}
|
|
972
1043
|
|
|
973
1044
|
.time-ago {
|
|
974
|
-
font-size:
|
|
975
|
-
color: var(--text-
|
|
976
|
-
margin-top:
|
|
1045
|
+
font-size: 10px;
|
|
1046
|
+
color: var(--text-tertiary);
|
|
1047
|
+
margin-top: 2px;
|
|
977
1048
|
}
|
|
978
1049
|
|
|
979
|
-
/*
|
|
1050
|
+
/* CLI Tokens Section */
|
|
980
1051
|
.token-display-box {
|
|
981
|
-
background: rgba(
|
|
982
|
-
border: 1px solid rgba(99, 102, 241, 0.
|
|
1052
|
+
background: rgba(11, 16, 26, 0.85);
|
|
1053
|
+
border: 1px solid rgba(99, 102, 241, 0.2);
|
|
983
1054
|
border-radius: var(--radius-md);
|
|
984
|
-
padding:
|
|
985
|
-
margin-bottom:
|
|
1055
|
+
padding: 18px;
|
|
1056
|
+
margin-bottom: 24px;
|
|
986
1057
|
}
|
|
987
1058
|
|
|
988
1059
|
.token-header {
|
|
989
1060
|
display: flex;
|
|
990
1061
|
justify-content: space-between;
|
|
991
1062
|
align-items: center;
|
|
992
|
-
margin-bottom:
|
|
993
|
-
font-size:
|
|
1063
|
+
margin-bottom: 10px;
|
|
1064
|
+
font-size: 13px;
|
|
994
1065
|
font-weight: 600;
|
|
995
1066
|
}
|
|
996
1067
|
|
|
997
1068
|
.token-code-row {
|
|
998
1069
|
display: flex;
|
|
999
|
-
gap:
|
|
1000
|
-
margin-bottom:
|
|
1070
|
+
gap: 10px;
|
|
1071
|
+
margin-bottom: 14px;
|
|
1001
1072
|
}
|
|
1002
1073
|
|
|
1003
1074
|
.token-input {
|
|
1004
1075
|
flex: 1;
|
|
1005
|
-
background: var(--bg-
|
|
1006
|
-
border: 1px solid var(--border-
|
|
1076
|
+
background: var(--bg-canvas);
|
|
1077
|
+
border: 1px solid var(--border-subtle);
|
|
1007
1078
|
color: var(--accent-amber);
|
|
1008
1079
|
font-family: var(--font-mono);
|
|
1009
|
-
font-size:
|
|
1010
|
-
padding:
|
|
1080
|
+
font-size: 12px;
|
|
1081
|
+
padding: 9px 12px;
|
|
1011
1082
|
border-radius: var(--radius-sm);
|
|
1012
1083
|
outline: none;
|
|
1013
1084
|
}
|
|
@@ -1015,11 +1086,11 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1015
1086
|
.token-cli-example {
|
|
1016
1087
|
display: flex;
|
|
1017
1088
|
align-items: center;
|
|
1018
|
-
gap:
|
|
1019
|
-
font-size:
|
|
1020
|
-
color: var(--text-
|
|
1021
|
-
background: rgba(255, 255, 255, 0.
|
|
1022
|
-
padding:
|
|
1089
|
+
gap: 10px;
|
|
1090
|
+
font-size: 12px;
|
|
1091
|
+
color: var(--text-secondary);
|
|
1092
|
+
background: rgba(255, 255, 255, 0.02);
|
|
1093
|
+
padding: 8px 12px;
|
|
1023
1094
|
border-radius: var(--radius-sm);
|
|
1024
1095
|
}
|
|
1025
1096
|
|
|
@@ -1029,14 +1100,14 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1029
1100
|
flex: 1;
|
|
1030
1101
|
}
|
|
1031
1102
|
|
|
1032
|
-
/* Table
|
|
1103
|
+
/* Session Data Table */
|
|
1033
1104
|
.session-table-wrapper {
|
|
1034
|
-
margin-top:
|
|
1105
|
+
margin-top: 20px;
|
|
1035
1106
|
}
|
|
1036
1107
|
|
|
1037
1108
|
.session-table-wrapper h4 {
|
|
1038
|
-
font-size:
|
|
1039
|
-
margin-bottom:
|
|
1109
|
+
font-size: 14px;
|
|
1110
|
+
margin-bottom: 12px;
|
|
1040
1111
|
}
|
|
1041
1112
|
|
|
1042
1113
|
.data-table {
|
|
@@ -1046,15 +1117,15 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1046
1117
|
}
|
|
1047
1118
|
|
|
1048
1119
|
.data-table th, .data-table td {
|
|
1049
|
-
padding: 14px
|
|
1050
|
-
border-bottom: 1px solid var(--border-
|
|
1051
|
-
font-size:
|
|
1120
|
+
padding: 12px 14px;
|
|
1121
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
1122
|
+
font-size: 13px;
|
|
1052
1123
|
}
|
|
1053
1124
|
|
|
1054
1125
|
.data-table th {
|
|
1055
|
-
color: var(--text-
|
|
1126
|
+
color: var(--text-secondary);
|
|
1056
1127
|
font-weight: 500;
|
|
1057
|
-
font-size:
|
|
1128
|
+
font-size: 11px;
|
|
1058
1129
|
text-transform: uppercase;
|
|
1059
1130
|
letter-spacing: 0.05em;
|
|
1060
1131
|
}
|
|
@@ -1062,111 +1133,151 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1062
1133
|
.flex-center-gap {
|
|
1063
1134
|
display: flex;
|
|
1064
1135
|
align-items: center;
|
|
1065
|
-
gap:
|
|
1136
|
+
gap: 10px;
|
|
1066
1137
|
}
|
|
1067
1138
|
|
|
1068
1139
|
/* Audit Section */
|
|
1069
1140
|
.audit-summary-grid {
|
|
1070
1141
|
display: grid;
|
|
1071
1142
|
grid-template-columns: repeat(3, 1fr);
|
|
1072
|
-
gap:
|
|
1073
|
-
margin-bottom:
|
|
1143
|
+
gap: 14px;
|
|
1144
|
+
margin-bottom: 24px;
|
|
1074
1145
|
}
|
|
1075
1146
|
|
|
1076
1147
|
.audit-metric-box {
|
|
1077
|
-
background: rgba(
|
|
1078
|
-
border: 1px solid var(--border-
|
|
1148
|
+
background: rgba(11, 16, 26, 0.6);
|
|
1149
|
+
border: 1px solid var(--border-subtle);
|
|
1079
1150
|
border-radius: var(--radius-md);
|
|
1080
|
-
padding:
|
|
1151
|
+
padding: 16px;
|
|
1081
1152
|
text-align: center;
|
|
1082
1153
|
}
|
|
1083
1154
|
|
|
1084
1155
|
.metric-num {
|
|
1085
1156
|
font-family: var(--font-heading);
|
|
1086
|
-
font-size:
|
|
1157
|
+
font-size: 28px;
|
|
1087
1158
|
font-weight: 700;
|
|
1088
1159
|
display: block;
|
|
1089
1160
|
}
|
|
1090
1161
|
|
|
1091
1162
|
.metric-title {
|
|
1092
|
-
font-size:
|
|
1093
|
-
color: var(--text-
|
|
1163
|
+
font-size: 12px;
|
|
1164
|
+
color: var(--text-secondary);
|
|
1165
|
+
}
|
|
1166
|
+
|
|
1167
|
+
.audit-controls-bar {
|
|
1168
|
+
display: flex;
|
|
1169
|
+
align-items: center;
|
|
1170
|
+
justify-content: space-between;
|
|
1171
|
+
gap: 12px;
|
|
1172
|
+
margin-bottom: 18px;
|
|
1173
|
+
flex-wrap: wrap;
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
.audit-filter-group {
|
|
1177
|
+
display: flex;
|
|
1178
|
+
align-items: center;
|
|
1179
|
+
gap: 6px;
|
|
1180
|
+
flex-wrap: wrap;
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
.audit-filter-btn {
|
|
1184
|
+
background: rgba(255, 255, 255, 0.03);
|
|
1185
|
+
border: 1px solid var(--border-subtle);
|
|
1186
|
+
color: var(--text-secondary);
|
|
1187
|
+
font-size: 11px;
|
|
1188
|
+
font-weight: 600;
|
|
1189
|
+
padding: 5px 12px;
|
|
1190
|
+
border-radius: var(--radius-pill);
|
|
1191
|
+
cursor: pointer;
|
|
1192
|
+
transition: var(--transition-fast);
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
.audit-filter-btn:hover {
|
|
1196
|
+
background: rgba(255, 255, 255, 0.07);
|
|
1197
|
+
color: var(--text-primary);
|
|
1198
|
+
}
|
|
1199
|
+
|
|
1200
|
+
.audit-filter-btn.active {
|
|
1201
|
+
background: var(--accent-primary);
|
|
1202
|
+
color: white;
|
|
1203
|
+
border-color: var(--accent-primary);
|
|
1204
|
+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
|
|
1094
1205
|
}
|
|
1095
1206
|
|
|
1096
1207
|
.audit-list {
|
|
1097
1208
|
display: flex;
|
|
1098
1209
|
flex-direction: column;
|
|
1099
|
-
gap:
|
|
1210
|
+
gap: 12px;
|
|
1100
1211
|
}
|
|
1101
1212
|
|
|
1102
1213
|
.audit-card-item {
|
|
1103
|
-
background: rgba(
|
|
1104
|
-
border: 1px solid var(--border-
|
|
1214
|
+
background: rgba(11, 16, 26, 0.7);
|
|
1215
|
+
border: 1px solid var(--border-subtle);
|
|
1105
1216
|
border-radius: var(--radius-md);
|
|
1106
|
-
padding:
|
|
1217
|
+
padding: 16px;
|
|
1107
1218
|
}
|
|
1108
1219
|
|
|
1109
1220
|
.audit-item-meta {
|
|
1110
1221
|
display: flex;
|
|
1111
1222
|
align-items: center;
|
|
1112
1223
|
justify-content: space-between;
|
|
1113
|
-
margin-bottom:
|
|
1224
|
+
margin-bottom: 6px;
|
|
1114
1225
|
}
|
|
1115
1226
|
|
|
1116
1227
|
.audit-file-path {
|
|
1117
1228
|
display: flex;
|
|
1118
1229
|
align-items: center;
|
|
1119
|
-
gap:
|
|
1230
|
+
gap: 8px;
|
|
1120
1231
|
}
|
|
1121
1232
|
|
|
1122
1233
|
.audit-file-path code {
|
|
1123
1234
|
font-family: var(--font-mono);
|
|
1124
|
-
color: var(--text-
|
|
1125
|
-
font-size:
|
|
1235
|
+
color: var(--text-primary);
|
|
1236
|
+
font-size: 13px;
|
|
1126
1237
|
}
|
|
1127
1238
|
|
|
1128
1239
|
.audit-desc {
|
|
1129
|
-
font-size:
|
|
1130
|
-
color: var(--text-
|
|
1131
|
-
margin-bottom:
|
|
1240
|
+
font-size: 12px;
|
|
1241
|
+
color: var(--text-secondary);
|
|
1242
|
+
margin-bottom: 10px;
|
|
1132
1243
|
}
|
|
1133
1244
|
|
|
1134
1245
|
.audit-item-actions {
|
|
1135
1246
|
display: flex;
|
|
1136
|
-
gap:
|
|
1247
|
+
gap: 6px;
|
|
1137
1248
|
}
|
|
1138
1249
|
|
|
1139
|
-
/* Toast
|
|
1250
|
+
/* Toast System */
|
|
1140
1251
|
.toast-container {
|
|
1141
1252
|
position: fixed;
|
|
1142
|
-
bottom:
|
|
1143
|
-
right:
|
|
1253
|
+
bottom: 20px;
|
|
1254
|
+
right: 20px;
|
|
1144
1255
|
display: flex;
|
|
1145
1256
|
flex-direction: column;
|
|
1146
|
-
gap:
|
|
1257
|
+
gap: 8px;
|
|
1147
1258
|
z-index: 1000;
|
|
1148
1259
|
pointer-events: none;
|
|
1149
1260
|
}
|
|
1150
1261
|
|
|
1151
1262
|
.toast {
|
|
1152
1263
|
pointer-events: auto;
|
|
1153
|
-
background:
|
|
1154
|
-
border: 1px solid var(--border-
|
|
1155
|
-
color: var(--text-
|
|
1156
|
-
padding:
|
|
1264
|
+
background: #0d121d;
|
|
1265
|
+
border: 1px solid var(--border-subtle);
|
|
1266
|
+
color: var(--text-primary);
|
|
1267
|
+
padding: 10px 16px;
|
|
1157
1268
|
border-radius: var(--radius-md);
|
|
1158
|
-
box-shadow: var(--shadow-
|
|
1269
|
+
box-shadow: var(--shadow-card);
|
|
1159
1270
|
display: flex;
|
|
1160
1271
|
align-items: center;
|
|
1161
|
-
gap:
|
|
1162
|
-
font-size:
|
|
1163
|
-
animation: slideInRight 0.
|
|
1164
|
-
min-width:
|
|
1272
|
+
gap: 10px;
|
|
1273
|
+
font-size: 13px;
|
|
1274
|
+
animation: slideInRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1275
|
+
min-width: 260px;
|
|
1165
1276
|
}
|
|
1166
1277
|
|
|
1167
|
-
.toast.toast-success { border-left:
|
|
1168
|
-
.toast.toast-error { border-left:
|
|
1169
|
-
.toast.toast-info { border-left:
|
|
1278
|
+
.toast.toast-success { border-left: 3px solid var(--accent-emerald); }
|
|
1279
|
+
.toast.toast-error { border-left: 3px solid var(--accent-rose); }
|
|
1280
|
+
.toast.toast-info { border-left: 3px solid var(--accent-cyan); }
|
|
1170
1281
|
|
|
1171
1282
|
@keyframes slideInRight {
|
|
1172
1283
|
from { transform: translateX(100%); opacity: 0; }
|
|
@@ -1176,60 +1287,56 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1176
1287
|
/* Footer */
|
|
1177
1288
|
.footer {
|
|
1178
1289
|
margin-top: auto;
|
|
1179
|
-
padding:
|
|
1180
|
-
border-top: 1px solid var(--border-
|
|
1290
|
+
padding: 20px 0;
|
|
1291
|
+
border-top: 1px solid var(--border-subtle);
|
|
1181
1292
|
}
|
|
1182
1293
|
|
|
1183
1294
|
.footer-content {
|
|
1184
1295
|
display: flex;
|
|
1185
1296
|
align-items: center;
|
|
1186
1297
|
justify-content: space-between;
|
|
1187
|
-
font-size:
|
|
1188
|
-
color: var(--text-
|
|
1298
|
+
font-size: 12px;
|
|
1299
|
+
color: var(--text-tertiary);
|
|
1189
1300
|
}
|
|
1190
1301
|
|
|
1191
1302
|
.footer-links {
|
|
1192
1303
|
display: flex;
|
|
1193
|
-
gap:
|
|
1304
|
+
gap: 16px;
|
|
1194
1305
|
}
|
|
1195
1306
|
|
|
1196
1307
|
.footer-links a {
|
|
1197
|
-
color: var(--text-
|
|
1308
|
+
color: var(--text-secondary);
|
|
1198
1309
|
text-decoration: none;
|
|
1199
1310
|
transition: var(--transition-fast);
|
|
1200
1311
|
}
|
|
1201
1312
|
|
|
1202
1313
|
.footer-links a:hover {
|
|
1203
|
-
color: var(--
|
|
1314
|
+
color: var(--accent-cyan);
|
|
1204
1315
|
}
|
|
1205
1316
|
|
|
1206
|
-
/*
|
|
1207
|
-
Mobile Gate Overlay
|
|
1208
|
-
========================================================================== */
|
|
1317
|
+
/* Mobile Gate Overlay */
|
|
1209
1318
|
.mobile-gate-overlay {
|
|
1210
1319
|
position: fixed;
|
|
1211
1320
|
top: 0;
|
|
1212
1321
|
left: 0;
|
|
1213
1322
|
width: 100vw;
|
|
1214
1323
|
height: 100vh;
|
|
1215
|
-
background: rgba(
|
|
1324
|
+
background: rgba(9, 13, 22, 0.94);
|
|
1216
1325
|
backdrop-filter: blur(16px);
|
|
1217
1326
|
-webkit-backdrop-filter: blur(16px);
|
|
1218
1327
|
z-index: 99999;
|
|
1219
1328
|
display: flex;
|
|
1220
1329
|
align-items: center;
|
|
1221
1330
|
justify-content: center;
|
|
1222
|
-
padding:
|
|
1223
|
-
animation: fadeIn 0.3s ease-out;
|
|
1331
|
+
padding: 20px;
|
|
1224
1332
|
}
|
|
1225
1333
|
|
|
1226
1334
|
.mobile-gate-card {
|
|
1227
|
-
max-width:
|
|
1335
|
+
max-width: 440px;
|
|
1228
1336
|
width: 100%;
|
|
1229
1337
|
text-align: center;
|
|
1230
|
-
padding:
|
|
1231
|
-
border: 1px solid rgba(
|
|
1232
|
-
box-shadow: 0 0 50px rgba(244, 63, 94, 0.15);
|
|
1338
|
+
padding: 32px 24px;
|
|
1339
|
+
border: 1px solid rgba(248, 113, 113, 0.3);
|
|
1233
1340
|
}
|
|
1234
1341
|
|
|
1235
1342
|
.mobile-gate-icon {
|
|
@@ -1237,195 +1344,155 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1237
1344
|
display: inline-flex;
|
|
1238
1345
|
align-items: center;
|
|
1239
1346
|
justify-content: center;
|
|
1240
|
-
gap:
|
|
1241
|
-
font-size:
|
|
1242
|
-
color: var(--accent-rose);
|
|
1243
|
-
margin-bottom: 20px;
|
|
1244
|
-
}
|
|
1245
|
-
|
|
1246
|
-
.mobile-ban-badge {
|
|
1247
|
-
position: absolute;
|
|
1248
|
-
top: -8px;
|
|
1249
|
-
right: -12px;
|
|
1250
|
-
font-size: 22px;
|
|
1347
|
+
gap: 10px;
|
|
1348
|
+
font-size: 32px;
|
|
1251
1349
|
color: var(--accent-rose);
|
|
1252
|
-
|
|
1253
|
-
border-radius: 50%;
|
|
1350
|
+
margin-bottom: 16px;
|
|
1254
1351
|
}
|
|
1255
1352
|
|
|
1256
1353
|
.mobile-gate-title {
|
|
1257
|
-
font-
|
|
1258
|
-
font-size: 24px;
|
|
1354
|
+
font-size: 22px;
|
|
1259
1355
|
font-weight: 700;
|
|
1260
|
-
|
|
1261
|
-
margin-bottom: 12px;
|
|
1356
|
+
margin-bottom: 10px;
|
|
1262
1357
|
}
|
|
1263
1358
|
|
|
1264
1359
|
.mobile-gate-notice {
|
|
1265
|
-
background: rgba(
|
|
1266
|
-
border: 1px dashed rgba(
|
|
1360
|
+
background: rgba(248, 113, 113, 0.1);
|
|
1361
|
+
border: 1px dashed rgba(248, 113, 113, 0.3);
|
|
1267
1362
|
color: #fca5a5;
|
|
1268
|
-
font-weight:
|
|
1269
|
-
font-size:
|
|
1270
|
-
padding:
|
|
1363
|
+
font-weight: 600;
|
|
1364
|
+
font-size: 13px;
|
|
1365
|
+
padding: 12px 16px;
|
|
1271
1366
|
border-radius: var(--radius-md);
|
|
1272
|
-
margin-bottom:
|
|
1273
|
-
box-shadow: 0 4px 12px rgba(244, 63, 94, 0.1);
|
|
1367
|
+
margin-bottom: 14px;
|
|
1274
1368
|
}
|
|
1275
1369
|
|
|
1276
1370
|
.mobile-gate-desc {
|
|
1277
|
-
font-size:
|
|
1278
|
-
color: var(--text-
|
|
1279
|
-
line-height: 1.
|
|
1280
|
-
margin-bottom:
|
|
1281
|
-
}
|
|
1282
|
-
|
|
1283
|
-
.mobile-gate-actions {
|
|
1284
|
-
display: flex;
|
|
1285
|
-
flex-direction: column;
|
|
1286
|
-
gap: 10px;
|
|
1287
|
-
}
|
|
1288
|
-
|
|
1289
|
-
@media (max-width: 768px) {
|
|
1290
|
-
.mobile-gate-overlay {
|
|
1291
|
-
display: flex !important;
|
|
1292
|
-
}
|
|
1371
|
+
font-size: 13px;
|
|
1372
|
+
color: var(--text-secondary);
|
|
1373
|
+
line-height: 1.5;
|
|
1374
|
+
margin-bottom: 20px;
|
|
1293
1375
|
}
|
|
1294
1376
|
|
|
1295
|
-
/*
|
|
1296
|
-
Embedded Scout CLI Shell UI
|
|
1297
|
-
========================================================================== */
|
|
1377
|
+
/* Scout CLI Embedded Terminal (Google Cloud Shell Style) */
|
|
1298
1378
|
.terminal-card {
|
|
1299
1379
|
padding: 0;
|
|
1300
1380
|
overflow: hidden;
|
|
1301
|
-
border: 1px solid rgba(99, 102, 241, 0.
|
|
1381
|
+
border: 1px solid rgba(99, 102, 241, 0.25);
|
|
1302
1382
|
}
|
|
1303
1383
|
|
|
1304
1384
|
.terminal-card .card-header {
|
|
1305
|
-
padding: 20px
|
|
1306
|
-
border-bottom: 1px solid var(--border-
|
|
1307
|
-
background: rgba(
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
.terminal-meta-pills {
|
|
1311
|
-
display: flex;
|
|
1312
|
-
align-items: center;
|
|
1313
|
-
gap: 10px;
|
|
1385
|
+
padding: 16px 20px;
|
|
1386
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
1387
|
+
background: rgba(11, 16, 26, 0.6);
|
|
1388
|
+
margin-bottom: 0;
|
|
1314
1389
|
}
|
|
1315
1390
|
|
|
1316
1391
|
.terminal-quick-chips {
|
|
1317
1392
|
display: flex;
|
|
1318
1393
|
align-items: center;
|
|
1319
1394
|
flex-wrap: wrap;
|
|
1320
|
-
gap:
|
|
1321
|
-
padding:
|
|
1322
|
-
background: rgba(
|
|
1323
|
-
border-bottom: 1px solid var(--border-
|
|
1395
|
+
gap: 6px;
|
|
1396
|
+
padding: 10px 16px;
|
|
1397
|
+
background: rgba(9, 13, 22, 0.7);
|
|
1398
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
1324
1399
|
}
|
|
1325
1400
|
|
|
1326
1401
|
.quick-chip-label {
|
|
1327
|
-
font-size:
|
|
1402
|
+
font-size: 11px;
|
|
1328
1403
|
font-weight: 600;
|
|
1329
|
-
color: var(--text-
|
|
1330
|
-
margin-right:
|
|
1404
|
+
color: var(--text-secondary);
|
|
1405
|
+
margin-right: 4px;
|
|
1331
1406
|
}
|
|
1332
1407
|
|
|
1333
1408
|
.btn-chip {
|
|
1334
|
-
background: rgba(
|
|
1335
|
-
border: 1px solid var(--border-
|
|
1336
|
-
color: var(--text-
|
|
1409
|
+
background: rgba(22, 30, 46, 0.7);
|
|
1410
|
+
border: 1px solid var(--border-subtle);
|
|
1411
|
+
color: var(--text-secondary);
|
|
1337
1412
|
font-family: var(--font-mono);
|
|
1338
|
-
font-size:
|
|
1339
|
-
padding:
|
|
1340
|
-
border-radius: var(--radius-
|
|
1413
|
+
font-size: 11px;
|
|
1414
|
+
padding: 4px 10px;
|
|
1415
|
+
border-radius: var(--radius-pill);
|
|
1341
1416
|
cursor: pointer;
|
|
1342
1417
|
transition: var(--transition-fast);
|
|
1343
1418
|
display: inline-flex;
|
|
1344
1419
|
align-items: center;
|
|
1345
|
-
gap:
|
|
1420
|
+
gap: 5px;
|
|
1346
1421
|
}
|
|
1347
1422
|
|
|
1348
1423
|
.btn-chip:hover {
|
|
1349
|
-
background: var(--primary);
|
|
1424
|
+
background: var(--accent-primary);
|
|
1350
1425
|
color: white;
|
|
1351
|
-
border-color: var(--primary);
|
|
1352
|
-
transform: translateY(-1px);
|
|
1426
|
+
border-color: var(--accent-primary);
|
|
1353
1427
|
}
|
|
1354
1428
|
|
|
1355
1429
|
.terminal-window {
|
|
1356
|
-
background: #
|
|
1357
|
-
font-family: var(--font-mono), 'Fira Code',
|
|
1430
|
+
background: #080c14;
|
|
1431
|
+
font-family: var(--font-mono), 'Fira Code', Consolas, monospace;
|
|
1358
1432
|
display: flex;
|
|
1359
1433
|
flex-direction: column;
|
|
1360
|
-
min-height:
|
|
1361
|
-
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
|
1434
|
+
min-height: 440px;
|
|
1362
1435
|
}
|
|
1363
1436
|
|
|
1364
1437
|
.terminal-topbar {
|
|
1365
1438
|
display: flex;
|
|
1366
1439
|
align-items: center;
|
|
1367
1440
|
justify-content: space-between;
|
|
1368
|
-
background: #
|
|
1369
|
-
padding:
|
|
1370
|
-
border-bottom: 1px solid #
|
|
1441
|
+
background: #0f172a;
|
|
1442
|
+
padding: 8px 14px;
|
|
1443
|
+
border-bottom: 1px solid #1e293b;
|
|
1371
1444
|
}
|
|
1372
1445
|
|
|
1373
1446
|
.window-controls {
|
|
1374
1447
|
display: flex;
|
|
1375
|
-
gap:
|
|
1448
|
+
gap: 6px;
|
|
1376
1449
|
}
|
|
1377
1450
|
|
|
1378
1451
|
.dot {
|
|
1379
|
-
width:
|
|
1380
|
-
height:
|
|
1452
|
+
width: 10px;
|
|
1453
|
+
height: 10px;
|
|
1381
1454
|
border-radius: 50%;
|
|
1382
1455
|
display: inline-block;
|
|
1383
1456
|
}
|
|
1384
1457
|
|
|
1385
|
-
.dot-red { background: #
|
|
1386
|
-
.dot-yellow { background: #
|
|
1387
|
-
.dot-green { background: #
|
|
1458
|
+
.dot-red { background: #f87171; }
|
|
1459
|
+
.dot-yellow { background: #fbbf24; }
|
|
1460
|
+
.dot-green { background: #34d399; }
|
|
1388
1461
|
|
|
1389
1462
|
.terminal-title {
|
|
1390
|
-
font-size:
|
|
1391
|
-
color: var(--text-
|
|
1392
|
-
font-family: var(--font-mono);
|
|
1393
|
-
}
|
|
1394
|
-
|
|
1395
|
-
.terminal-top-actions {
|
|
1396
|
-
display: flex;
|
|
1397
|
-
gap: 8px;
|
|
1463
|
+
font-size: 11px;
|
|
1464
|
+
color: var(--text-tertiary);
|
|
1398
1465
|
}
|
|
1399
1466
|
|
|
1400
1467
|
.btn-term-icon {
|
|
1401
1468
|
background: transparent;
|
|
1402
1469
|
border: none;
|
|
1403
|
-
color: var(--text-
|
|
1470
|
+
color: var(--text-tertiary);
|
|
1404
1471
|
cursor: pointer;
|
|
1405
|
-
padding:
|
|
1472
|
+
padding: 3px 6px;
|
|
1406
1473
|
border-radius: var(--radius-sm);
|
|
1407
|
-
font-size:
|
|
1474
|
+
font-size: 12px;
|
|
1408
1475
|
transition: var(--transition-fast);
|
|
1409
1476
|
}
|
|
1410
1477
|
|
|
1411
1478
|
.btn-term-icon:hover {
|
|
1412
|
-
color: var(--text-
|
|
1413
|
-
background: #
|
|
1479
|
+
color: var(--text-primary);
|
|
1480
|
+
background: #1e293b;
|
|
1414
1481
|
}
|
|
1415
1482
|
|
|
1416
1483
|
.terminal-body {
|
|
1417
|
-
padding:
|
|
1418
|
-
height:
|
|
1484
|
+
padding: 16px;
|
|
1485
|
+
height: 350px;
|
|
1419
1486
|
overflow-y: auto;
|
|
1420
1487
|
color: #e2e8f0;
|
|
1421
|
-
font-size:
|
|
1422
|
-
line-height: 1.
|
|
1488
|
+
font-size: 12px;
|
|
1489
|
+
line-height: 1.65;
|
|
1423
1490
|
white-space: pre-wrap;
|
|
1424
1491
|
word-break: break-word;
|
|
1425
1492
|
}
|
|
1426
1493
|
|
|
1427
1494
|
.term-line {
|
|
1428
|
-
margin-bottom:
|
|
1495
|
+
margin-bottom: 3px;
|
|
1429
1496
|
}
|
|
1430
1497
|
|
|
1431
1498
|
.term-welcome {
|
|
@@ -1445,7 +1512,7 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1445
1512
|
.term-code {
|
|
1446
1513
|
background: #1e293b;
|
|
1447
1514
|
color: #38bdf8;
|
|
1448
|
-
padding:
|
|
1515
|
+
padding: 1px 5px;
|
|
1449
1516
|
border-radius: 4px;
|
|
1450
1517
|
}
|
|
1451
1518
|
|
|
@@ -1456,29 +1523,29 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1456
1523
|
.term-cmd-entry {
|
|
1457
1524
|
color: #38bdf8;
|
|
1458
1525
|
font-weight: 600;
|
|
1459
|
-
margin-top:
|
|
1526
|
+
margin-top: 10px;
|
|
1460
1527
|
}
|
|
1461
1528
|
|
|
1462
1529
|
.term-output-text {
|
|
1463
1530
|
color: #cbd5e1;
|
|
1464
1531
|
padding-left: 8px;
|
|
1465
|
-
border-left: 2px solid #
|
|
1466
|
-
margin-bottom:
|
|
1532
|
+
border-left: 2px solid #38bdf8;
|
|
1533
|
+
margin-bottom: 10px;
|
|
1467
1534
|
}
|
|
1468
1535
|
|
|
1469
1536
|
.terminal-input-row {
|
|
1470
1537
|
display: flex;
|
|
1471
1538
|
align-items: center;
|
|
1472
|
-
background: #
|
|
1539
|
+
background: #0b1120;
|
|
1473
1540
|
border-top: 1px solid #1e293b;
|
|
1474
|
-
padding:
|
|
1475
|
-
gap:
|
|
1541
|
+
padding: 8px 14px;
|
|
1542
|
+
gap: 10px;
|
|
1476
1543
|
}
|
|
1477
1544
|
|
|
1478
1545
|
.terminal-prompt-symbol {
|
|
1479
|
-
color: #
|
|
1546
|
+
color: #34d399;
|
|
1480
1547
|
font-weight: 700;
|
|
1481
|
-
font-size:
|
|
1548
|
+
font-size: 13px;
|
|
1482
1549
|
user-select: none;
|
|
1483
1550
|
}
|
|
1484
1551
|
|
|
@@ -1488,7 +1555,7 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1488
1555
|
border: none;
|
|
1489
1556
|
color: #f8fafc;
|
|
1490
1557
|
font-family: var(--font-mono);
|
|
1491
|
-
font-size:
|
|
1558
|
+
font-size: 13px;
|
|
1492
1559
|
outline: none;
|
|
1493
1560
|
}
|
|
1494
1561
|
|
|
@@ -1496,17 +1563,12 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1496
1563
|
color: #475569;
|
|
1497
1564
|
}
|
|
1498
1565
|
|
|
1499
|
-
.btn-terminal-run {
|
|
1500
|
-
padding: 6px 14px;
|
|
1501
|
-
}
|
|
1502
|
-
|
|
1503
|
-
/* Holosene OAuth Button & Auth Divider */
|
|
1504
1566
|
.auth-divider {
|
|
1505
1567
|
display: flex;
|
|
1506
1568
|
align-items: center;
|
|
1507
1569
|
text-align: center;
|
|
1508
|
-
margin:
|
|
1509
|
-
color: var(--text-
|
|
1570
|
+
margin: 16px 0;
|
|
1571
|
+
color: var(--text-tertiary);
|
|
1510
1572
|
font-size: 11px;
|
|
1511
1573
|
font-weight: 700;
|
|
1512
1574
|
letter-spacing: 1px;
|
|
@@ -1516,12 +1578,11 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1516
1578
|
.auth-divider::after {
|
|
1517
1579
|
content: '';
|
|
1518
1580
|
flex: 1;
|
|
1519
|
-
border-bottom: 1px solid var(--border-
|
|
1581
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
1520
1582
|
}
|
|
1521
1583
|
|
|
1522
1584
|
.auth-divider span {
|
|
1523
|
-
padding: 0
|
|
1524
|
-
background: var(--bg-card);
|
|
1585
|
+
padding: 0 10px;
|
|
1525
1586
|
}
|
|
1526
1587
|
|
|
1527
1588
|
.btn-holosene {
|
|
@@ -1529,16 +1590,373 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
1529
1590
|
color: #ffffff;
|
|
1530
1591
|
border: none;
|
|
1531
1592
|
font-weight: 600;
|
|
1532
|
-
box-shadow: 0 4px 14px rgba(168, 85, 247, 0.
|
|
1533
|
-
transition: all 0.25s
|
|
1593
|
+
box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);
|
|
1594
|
+
transition: all 0.25s ease-in-out;
|
|
1534
1595
|
display: flex;
|
|
1535
1596
|
align-items: center;
|
|
1536
1597
|
justify-content: center;
|
|
1537
|
-
gap:
|
|
1598
|
+
gap: 8px;
|
|
1538
1599
|
}
|
|
1539
1600
|
|
|
1540
1601
|
.btn-holosene:hover {
|
|
1541
|
-
transform: translateY(-
|
|
1542
|
-
box-shadow: 0 6px
|
|
1543
|
-
|
|
1602
|
+
transform: translateY(-1px);
|
|
1603
|
+
box-shadow: 0 6px 18px rgba(168, 85, 247, 0.45);
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1606
|
+
/* ==========================================================================
|
|
1607
|
+
PAID TIERS & SUBSCRIPTION PRICING STYLES
|
|
1608
|
+
========================================================================== */
|
|
1609
|
+
.current-plan-banner {
|
|
1610
|
+
border-left: 4px solid var(--accent-amber);
|
|
1611
|
+
}
|
|
1612
|
+
|
|
1613
|
+
.align-center {
|
|
1614
|
+
align-items: center;
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
.tier-icon-badge {
|
|
1618
|
+
width: 48px;
|
|
1619
|
+
height: 48px;
|
|
1620
|
+
background: rgba(251, 191, 36, 0.12);
|
|
1621
|
+
border-radius: var(--radius-md);
|
|
1622
|
+
display: flex;
|
|
1623
|
+
align-items: center;
|
|
1624
|
+
justify-content: center;
|
|
1625
|
+
}
|
|
1626
|
+
|
|
1627
|
+
/* Billing Cycle Switch Toggle */
|
|
1628
|
+
.billing-cycle-toggle {
|
|
1629
|
+
display: flex;
|
|
1630
|
+
align-items: center;
|
|
1631
|
+
gap: 12px;
|
|
1632
|
+
background: var(--bg-surface-elevated);
|
|
1633
|
+
padding: 6px 16px;
|
|
1634
|
+
border-radius: var(--radius-pill);
|
|
1635
|
+
border: 1px solid var(--border-subtle);
|
|
1636
|
+
}
|
|
1637
|
+
|
|
1638
|
+
.toggle-label {
|
|
1639
|
+
font-size: 13px;
|
|
1640
|
+
font-weight: 500;
|
|
1641
|
+
color: var(--text-secondary);
|
|
1642
|
+
}
|
|
1643
|
+
|
|
1644
|
+
.switch {
|
|
1645
|
+
position: relative;
|
|
1646
|
+
display: inline-block;
|
|
1647
|
+
width: 42px;
|
|
1648
|
+
height: 22px;
|
|
1649
|
+
}
|
|
1650
|
+
|
|
1651
|
+
.switch input {
|
|
1652
|
+
opacity: 0;
|
|
1653
|
+
width: 0;
|
|
1654
|
+
height: 0;
|
|
1655
|
+
}
|
|
1656
|
+
|
|
1657
|
+
.slider {
|
|
1658
|
+
position: absolute;
|
|
1659
|
+
cursor: pointer;
|
|
1660
|
+
top: 0; left: 0; right: 0; bottom: 0;
|
|
1661
|
+
background-color: rgba(255, 255, 255, 0.15);
|
|
1662
|
+
transition: .3s;
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1665
|
+
.slider:before {
|
|
1666
|
+
position: absolute;
|
|
1667
|
+
content: "";
|
|
1668
|
+
height: 16px;
|
|
1669
|
+
width: 16px;
|
|
1670
|
+
left: 3px;
|
|
1671
|
+
bottom: 3px;
|
|
1672
|
+
background-color: white;
|
|
1673
|
+
transition: .3s;
|
|
1674
|
+
}
|
|
1675
|
+
|
|
1676
|
+
input:checked + .slider {
|
|
1677
|
+
background-color: var(--accent-primary);
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
input:checked + .slider:before {
|
|
1681
|
+
transform: translateX(20px);
|
|
1682
|
+
}
|
|
1683
|
+
|
|
1684
|
+
.slider.round {
|
|
1685
|
+
border-radius: 34px;
|
|
1686
|
+
}
|
|
1687
|
+
|
|
1688
|
+
.slider.round:before {
|
|
1689
|
+
border-radius: 50%;
|
|
1690
|
+
}
|
|
1691
|
+
|
|
1692
|
+
/* Pricing Grid */
|
|
1693
|
+
.tiers-pricing-grid {
|
|
1694
|
+
display: grid;
|
|
1695
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
1696
|
+
gap: 24px;
|
|
1697
|
+
margin-top: 16px;
|
|
1698
|
+
}
|
|
1699
|
+
|
|
1700
|
+
.pricing-card {
|
|
1701
|
+
position: relative;
|
|
1702
|
+
display: flex;
|
|
1703
|
+
flex-direction: column;
|
|
1704
|
+
justify-content: space-between;
|
|
1705
|
+
padding: 28px 24px;
|
|
1706
|
+
border-radius: var(--radius-lg);
|
|
1707
|
+
transition: all var(--transition-normal);
|
|
1708
|
+
}
|
|
1709
|
+
|
|
1710
|
+
.pricing-card:hover {
|
|
1711
|
+
transform: translateY(-4px);
|
|
1712
|
+
box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6);
|
|
1713
|
+
}
|
|
1714
|
+
|
|
1715
|
+
.popular-tier {
|
|
1716
|
+
border: 1px solid rgba(99, 102, 241, 0.4);
|
|
1717
|
+
box-shadow: var(--shadow-glow-primary);
|
|
1718
|
+
}
|
|
1719
|
+
|
|
1720
|
+
.popular-badge {
|
|
1721
|
+
position: absolute;
|
|
1722
|
+
top: -12px;
|
|
1723
|
+
right: 24px;
|
|
1724
|
+
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-purple) 100%);
|
|
1725
|
+
color: #ffffff;
|
|
1726
|
+
font-size: 11px;
|
|
1727
|
+
font-weight: 700;
|
|
1728
|
+
padding: 3px 12px;
|
|
1729
|
+
border-radius: var(--radius-pill);
|
|
1730
|
+
letter-spacing: 0.5px;
|
|
1731
|
+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
|
|
1732
|
+
}
|
|
1733
|
+
|
|
1734
|
+
.active-tier-card {
|
|
1735
|
+
border: 2px solid var(--accent-emerald) !important;
|
|
1736
|
+
box-shadow: 0 0 24px rgba(52, 211, 153, 0.2);
|
|
1737
|
+
}
|
|
1738
|
+
|
|
1739
|
+
.pricing-header {
|
|
1740
|
+
margin-bottom: 20px;
|
|
1741
|
+
}
|
|
1742
|
+
|
|
1743
|
+
.plan-icon {
|
|
1744
|
+
width: 42px;
|
|
1745
|
+
height: 42px;
|
|
1746
|
+
border-radius: var(--radius-md);
|
|
1747
|
+
background: rgba(255, 255, 255, 0.06);
|
|
1748
|
+
display: flex;
|
|
1749
|
+
align-items: center;
|
|
1750
|
+
justify-content: center;
|
|
1751
|
+
font-size: 20px;
|
|
1752
|
+
color: var(--text-primary);
|
|
1753
|
+
margin-bottom: 14px;
|
|
1754
|
+
}
|
|
1755
|
+
|
|
1756
|
+
.plan-name {
|
|
1757
|
+
font-size: 20px;
|
|
1758
|
+
font-weight: 700;
|
|
1759
|
+
margin-bottom: 4px;
|
|
1760
|
+
}
|
|
1761
|
+
|
|
1762
|
+
.plan-desc {
|
|
1763
|
+
color: var(--text-muted);
|
|
1764
|
+
font-size: 13px;
|
|
1765
|
+
margin-bottom: 16px;
|
|
1766
|
+
min-height: 38px;
|
|
1767
|
+
}
|
|
1768
|
+
|
|
1769
|
+
.plan-price {
|
|
1770
|
+
display: flex;
|
|
1771
|
+
align-items: baseline;
|
|
1772
|
+
gap: 4px;
|
|
1773
|
+
}
|
|
1774
|
+
|
|
1775
|
+
.price-currency {
|
|
1776
|
+
font-size: 20px;
|
|
1777
|
+
font-weight: 600;
|
|
1778
|
+
color: var(--text-secondary);
|
|
1779
|
+
}
|
|
1780
|
+
|
|
1781
|
+
.price-val {
|
|
1782
|
+
font-size: 38px;
|
|
1783
|
+
font-weight: 800;
|
|
1784
|
+
font-family: var(--font-heading);
|
|
1785
|
+
color: var(--text-primary);
|
|
1786
|
+
line-height: 1;
|
|
1787
|
+
}
|
|
1788
|
+
|
|
1789
|
+
.price-period {
|
|
1790
|
+
font-size: 13px;
|
|
1791
|
+
color: var(--text-tertiary);
|
|
1792
|
+
}
|
|
1793
|
+
|
|
1794
|
+
.plan-features {
|
|
1795
|
+
list-style: none;
|
|
1796
|
+
margin: 20px 0 28px 0;
|
|
1797
|
+
padding: 0;
|
|
1798
|
+
display: flex;
|
|
1799
|
+
flex-direction: column;
|
|
1800
|
+
gap: 12px;
|
|
1801
|
+
flex: 1;
|
|
1802
|
+
}
|
|
1803
|
+
|
|
1804
|
+
.plan-features li {
|
|
1805
|
+
display: flex;
|
|
1806
|
+
align-items: center;
|
|
1807
|
+
gap: 10px;
|
|
1808
|
+
font-size: 13px;
|
|
1809
|
+
color: var(--text-primary);
|
|
1810
|
+
}
|
|
1811
|
+
|
|
1812
|
+
.plan-features li.text-muted {
|
|
1813
|
+
color: var(--text-tertiary);
|
|
1814
|
+
}
|
|
1815
|
+
|
|
1816
|
+
.pricing-footer {
|
|
1817
|
+
margin-top: auto;
|
|
1818
|
+
}
|
|
1819
|
+
|
|
1820
|
+
/* ==========================================================================
|
|
1821
|
+
CREDIT USAGE & PROGRESS BAR STYLES
|
|
1822
|
+
========================================================================== */
|
|
1823
|
+
.credit-stats-grid {
|
|
1824
|
+
display: grid;
|
|
1825
|
+
grid-template-columns: repeat(3, 1fr);
|
|
1826
|
+
gap: 12px;
|
|
1827
|
+
margin-bottom: 20px;
|
|
1828
|
+
}
|
|
1829
|
+
|
|
1830
|
+
.credit-stat-box {
|
|
1831
|
+
background: var(--bg-surface-elevated);
|
|
1832
|
+
border: 1px solid var(--border-subtle);
|
|
1833
|
+
border-radius: var(--radius-md);
|
|
1834
|
+
padding: 12px 14px;
|
|
1835
|
+
display: flex;
|
|
1836
|
+
flex-direction: column;
|
|
1837
|
+
}
|
|
1838
|
+
|
|
1839
|
+
.credit-stat-label {
|
|
1840
|
+
font-size: 11px;
|
|
1841
|
+
font-weight: 600;
|
|
1842
|
+
color: var(--text-tertiary);
|
|
1843
|
+
text-transform: uppercase;
|
|
1844
|
+
letter-spacing: 0.5px;
|
|
1845
|
+
margin-bottom: 4px;
|
|
1846
|
+
}
|
|
1847
|
+
|
|
1848
|
+
.credit-stat-val {
|
|
1849
|
+
font-family: var(--font-heading);
|
|
1850
|
+
font-size: 20px;
|
|
1851
|
+
font-weight: 700;
|
|
1852
|
+
}
|
|
1853
|
+
|
|
1854
|
+
.credit-bar-wrapper {
|
|
1855
|
+
background: var(--bg-input);
|
|
1856
|
+
border: 1px solid var(--border-subtle);
|
|
1857
|
+
border-radius: var(--radius-md);
|
|
1858
|
+
padding: 16px;
|
|
1859
|
+
margin-bottom: 16px;
|
|
1860
|
+
}
|
|
1861
|
+
|
|
1862
|
+
.credit-bar-header {
|
|
1863
|
+
display: flex;
|
|
1864
|
+
justify-content: space-between;
|
|
1865
|
+
align-items: center;
|
|
1866
|
+
font-size: 13px;
|
|
1867
|
+
font-weight: 500;
|
|
1868
|
+
color: var(--text-secondary);
|
|
1869
|
+
margin-bottom: 10px;
|
|
1544
1870
|
}
|
|
1871
|
+
|
|
1872
|
+
.credit-progress-track {
|
|
1873
|
+
width: 100%;
|
|
1874
|
+
height: 10px;
|
|
1875
|
+
background: rgba(255, 255, 255, 0.08);
|
|
1876
|
+
border-radius: var(--radius-pill);
|
|
1877
|
+
overflow: hidden;
|
|
1878
|
+
position: relative;
|
|
1879
|
+
}
|
|
1880
|
+
|
|
1881
|
+
.credit-progress-fill {
|
|
1882
|
+
height: 100%;
|
|
1883
|
+
background: linear-gradient(90deg, #6366f1 0%, #38bdf8 60%, #34d399 100%);
|
|
1884
|
+
border-radius: var(--radius-pill);
|
|
1885
|
+
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1888
|
+
.credit-renew-box {
|
|
1889
|
+
display: flex;
|
|
1890
|
+
align-items: center;
|
|
1891
|
+
gap: 12px;
|
|
1892
|
+
background: rgba(56, 189, 248, 0.06);
|
|
1893
|
+
border: 1px dashed rgba(56, 189, 248, 0.25);
|
|
1894
|
+
border-radius: var(--radius-md);
|
|
1895
|
+
padding: 12px 16px;
|
|
1896
|
+
}
|
|
1897
|
+
|
|
1898
|
+
/* ==========================================================================
|
|
1899
|
+
MODAL & CHECKOUT STYLES
|
|
1900
|
+
========================================================================== */
|
|
1901
|
+
.modal-overlay {
|
|
1902
|
+
position: fixed;
|
|
1903
|
+
top: 0;
|
|
1904
|
+
left: 0;
|
|
1905
|
+
right: 0;
|
|
1906
|
+
bottom: 0;
|
|
1907
|
+
background: rgba(10, 10, 18, 0.82);
|
|
1908
|
+
backdrop-filter: blur(10px);
|
|
1909
|
+
-webkit-backdrop-filter: blur(10px);
|
|
1910
|
+
z-index: 9999;
|
|
1911
|
+
display: flex;
|
|
1912
|
+
align-items: center;
|
|
1913
|
+
justify-content: center;
|
|
1914
|
+
padding: 20px;
|
|
1915
|
+
animation: fadeIn 0.2s ease-out;
|
|
1916
|
+
}
|
|
1917
|
+
|
|
1918
|
+
.modal-card {
|
|
1919
|
+
max-width: 480px;
|
|
1920
|
+
width: 100%;
|
|
1921
|
+
background: var(--bg-surface-elevated);
|
|
1922
|
+
border: 1px solid var(--border-highlight);
|
|
1923
|
+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
|
|
1924
|
+
border-radius: var(--radius-lg);
|
|
1925
|
+
padding: 24px;
|
|
1926
|
+
animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
1927
|
+
}
|
|
1928
|
+
|
|
1929
|
+
.btn-icon-close {
|
|
1930
|
+
background: transparent;
|
|
1931
|
+
border: none;
|
|
1932
|
+
color: var(--text-muted);
|
|
1933
|
+
font-size: 18px;
|
|
1934
|
+
cursor: pointer;
|
|
1935
|
+
padding: 4px 8px;
|
|
1936
|
+
border-radius: var(--radius-sm);
|
|
1937
|
+
transition: var(--transition-fast);
|
|
1938
|
+
}
|
|
1939
|
+
|
|
1940
|
+
.btn-icon-close:hover {
|
|
1941
|
+
color: var(--text-bright);
|
|
1942
|
+
background: rgba(255, 255, 255, 0.1);
|
|
1943
|
+
}
|
|
1944
|
+
|
|
1945
|
+
.checkout-summary-box {
|
|
1946
|
+
background: var(--bg-input);
|
|
1947
|
+
border: 1px solid var(--border-subtle);
|
|
1948
|
+
border-radius: var(--radius-md);
|
|
1949
|
+
padding: 16px;
|
|
1950
|
+
}
|
|
1951
|
+
|
|
1952
|
+
@keyframes fadeIn {
|
|
1953
|
+
from { opacity: 0; }
|
|
1954
|
+
to { opacity: 1; }
|
|
1955
|
+
}
|
|
1956
|
+
|
|
1957
|
+
@keyframes slideUp {
|
|
1958
|
+
from { transform: translateY(20px); opacity: 0; }
|
|
1959
|
+
to { transform: translateY(0); opacity: 1; }
|
|
1960
|
+
}
|
|
1961
|
+
|
|
1962
|
+
|