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