kaan1233/bistelligence-api
0
1:root {
2 --bg-dark: #0a0f1e;
3 --bg-card: #111827;
4 --sidebar-bg: rgba(10, 15, 30, 0.95);
5 --glass-bg: rgba(17, 24, 39, 0.85);
6 --glass-border: rgba(255, 255, 255, 0.08);
7 --glass-border-hover: rgba(255, 255, 255, 0.15);
8 --text-primary: #f1f5f9;
9 --text-muted: #94a3b8;
10 --accent: #3b82f6;
11 --accent-hover: #2563eb;
12 --accent-glow: rgba(59, 130, 246, 0.15);
13 --success: #10b981;
14 --success-bg: rgba(16, 185, 129, 0.1);
15 --danger: #ef4444;
16 --danger-bg: rgba(239, 68, 68, 0.1);
17 --warning: #f59e0b;
18 --warning-bg: rgba(245, 158, 11, 0.1);
19 --purple: #8b5cf6;
20 --cyan: #06b6d4;
21}
22
23[data-theme="light"] {
24 --bg-dark: #f8fafc;
25 --bg-card: #ffffff;
26 --sidebar-bg: #f1f5f9;
27 --glass-bg: rgba(255, 255, 255, 0.9);
28 --glass-border: rgba(0, 0, 0, 0.1);
29 --glass-border-hover: rgba(0, 0, 0, 0.2);
30 --text-primary: #0f172a;
31 --text-muted: #64748b;
32 --accent: #2563eb;
33 --accent-hover: #1d4ed8;
34 --accent-glow: rgba(37, 99, 235, 0.15);
35 --success: #059669;
36 --success-bg: rgba(5, 150, 105, 0.1);
37 --danger: #dc2626;
38 --danger-bg: rgba(220, 38, 38, 0.1);
39 --warning: #d97706;
40 --warning-bg: rgba(217, 119, 6, 0.1);
41 --purple: #7c3aed;
42 --cyan: #0891b2;
43 --btn-text: #0f172a;
44}
45
46* {
47 margin: 0;
48 padding: 0;
49 box-sizing: border-box;
50 font-family: 'Inter', sans-serif;
51}
52
53body {
54 background-color: var(--bg-dark);
55 color: var(--text-primary);
56 min-height: 100vh;
57 overflow-x: hidden;
58 transition: background-color 0.3s ease, color 0.3s ease;
59 background:
60 radial-gradient(ellipse at 20% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
61 radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
62 var(--bg-dark);
63}
64
65/* ==================== Glassmorphism ==================== */
66.glass-form, .glass-table, .metric-card, .rec-card {
67 background: var(--glass-bg);
68 backdrop-filter: blur(16px);
69 -webkit-backdrop-filter: blur(16px);
70 border: 1px solid var(--glass-border);
71 border-radius: 16px;
72 padding: 24px;
73 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
74 transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
75}
76
77.glass-form:hover, .metric-card:hover, .rec-card:hover {
78 border-color: var(--glass-border-hover);
79}
80
81.rec-card:hover {
82 transform: translateY(-2px);
83}
84
85/* ==================== App Layout ==================== */
86.app-container {
87 display: flex;
88 min-height: 100vh;
89}
90
91/* ==================== Sidebar ==================== */
92.sidebar {
93 width: 260px;
94 background: var(--sidebar-bg);
95 border-right: 1px solid var(--glass-border);
96 display: flex;
97 flex-direction: column;
98 padding: 24px 0;
99 position: fixed;
100 height: 100%;
101 z-index: 100;
102 backdrop-filter: blur(20px);
103}
104
105.logo {
106 font-size: 22px;
107 font-weight: 700;
108 text-align: center;
109 margin-bottom: 40px;
110 background: linear-gradient(135deg, var(--accent), var(--purple));
111 -webkit-background-clip: text;
112 -webkit-text-fill-color: transparent;
113 background-clip: text;
114 position: relative;
115}
116
117.version-badge {
118 font-size: 10px;
119 background: var(--accent);
120 -webkit-text-fill-color: white;
121 padding: 2px 6px;
122 border-radius: 6px;
123 vertical-align: super;
124 font-weight: 600;
125}
126
127.nav-links {
128 list-style: none;
129 flex: 1;
130}
131
132.nav-links li {
133 padding: 14px 28px;
134 font-size: 15px;
135 color: var(--text-muted);
136 cursor: pointer;
137 transition: all 0.3s ease;
138 border-left: 3px solid transparent;
139 display: flex;
140 align-items: center;
141 gap: 10px;
142}
143
144.nav-links li:hover, .nav-links li.active {
145 background: var(--accent-glow);
146 color: var(--text-primary);
147 border-left: 3px solid var(--accent);
148}
149
150.nav-links li i {
151 width: 20px;
152 text-align: center;
153 font-size: 14px;
154}
155
156.sidebar-footer {
157 padding: 0 20px;
158 margin-top: auto;
159}
160
161.regime-badge {
162 display: flex;
163 align-items: center;
164 gap: 8px;
165 padding: 12px 16px;
166 background: rgba(59, 130, 246, 0.1);
167 border-radius: 10px;
168 border: 1px solid var(--glass-border);
169 font-size: 12px;
170 color: var(--text-muted);
171}
172
173/* ==================== Main Content ==================== */
174.content {
175 flex: 1;
176 margin-left: 260px;
177 padding: 40px;
178 position: relative;
179}
180
181.page {
182 display: none;
183 animation: fadeIn 0.4s ease-in-out;
184}
185
186.page.active {
187 display: block;
188}
189
190@keyframes fadeIn {
191 from { opacity: 0; transform: translateY(8px); }
192 to { opacity: 1; transform: translateY(0); }
193}
194
195header h1 {
196 font-size: 30px;
197 margin-bottom: 5px;
198 font-weight: 700;
199}
200header p {
201 color: var(--text-muted);
202 margin-bottom: 28px;
203 font-size: 15px;
204}
205
206/* ==================== Market Regime Banner ==================== */
207.regime-banner {
208 display: flex;
209 justify-content: space-between;
210 align-items: center;
211 padding: 20px 28px;
212 border-radius: 16px;
213 margin-bottom: 28px;
214 border: 1px solid var(--glass-border);
215 background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(30, 41, 59, 0.6));
216}
217
218.regime-banner.strong_bull { border-left: 4px solid var(--success); }
219.regime-banner.weak_bull { border-left: 4px solid #22c55e; }
220.regime-banner.weak_bear { border-left: 4px solid var(--warning); }
221.regime-banner.strong_bear { border-left: 4px solid var(--danger); }
222
223.regime-info {
224 display: flex;
225 flex-direction: column;
226 gap: 4px;
227}
228
229.regime-label {
230 font-size: 22px;
231 font-weight: 700;
232}
233
234.regime-desc {
235 font-size: 13px;
236 color: var(--text-muted);
237 max-width: 500px;
238}
239
240.regime-stats {
241 display: flex;
242 gap: 30px;
243}
244
245.regime-stat {
246 display: flex;
247 flex-direction: column;
248 align-items: center;
249}
250
251.rs-title {
252 font-size: 11px;
253 color: var(--text-muted);
254 text-transform: uppercase;
255 letter-spacing: 1px;
256}
257
258.rs-value {
259 font-size: 20px;
260 font-weight: 600;
261 margin-top: 4px;
262}
263
264/* ==================== Metrics Grid ==================== */
265.metrics-grid {
266 display: grid;
267 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
268 gap: 20px;
269 margin-bottom: 36px;
270}
271
272.metric-card .m-title {
273 font-size: 12px;
274 color: var(--text-muted);
275 text-transform: uppercase;
276 letter-spacing: 1px;
277}
278
279.metric-card h2 {
280 font-size: 26px;
281 margin-top: 10px;
282 font-weight: 600;
283}
284
285/* ==================== Recommendations ==================== */
286.recommendations-section h3, .warnings-section h3 {
287 margin-bottom: 16px;
288 font-size: 18px;
289 font-weight: 600;
290}
291
292.recs-grid {
293 display: grid;
294 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
295 gap: 20px;
296 margin-bottom: 36px;
297}
298
299.rec-card {
300 cursor: pointer;
301 position: relative;
302 overflow: hidden;
303}
304
305.rec-card::before {
306 content: '';
307 position: absolute;
308 top: 0;
309 left: 0;
310 right: 0;
311 height: 3px;
312 background: linear-gradient(90deg, var(--accent), var(--purple));
313 opacity: 0;
314 transition: opacity 0.3s;
315}
316
317.rec-card:hover::before {
318 opacity: 1;
319}
320
321.rec-card h4 {
322 font-size: 20px;
323 color: var(--accent);
324 margin-bottom: 8px;
325 display: flex;
326 align-items: center;
327 gap: 10px;
328}
329
330.rec-card p { margin-bottom: 5px; font-size: 14px; }
331.rec-card .reason { color: var(--text-muted); font-size: 12px; margin-top: 10px; font-style: italic; }
332.rec-card.warn h4 { color: var(--danger); }
333
334/* ==================== Signal Badge ==================== */
335.signal-badge {
336 display: inline-flex;
337 align-items: center;
338 padding: 4px 10px;
339 border-radius: 6px;
340 font-size: 11px;
341 font-weight: 700;
342 letter-spacing: 0.5px;
343 white-space: nowrap;
344}
345
346.signal-badge.strong-buy { background: var(--success-bg); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.3); }
347.signal-badge.buy { background: rgba(34, 197, 94, 0.1); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
348.signal-badge.hold { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.3); }
349.signal-badge.sell { background: rgba(249, 115, 22, 0.1); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.3); }
350.signal-badge.strong-sell{ background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.3); }
351
352/* ==================== Score Bar ==================== */
353.score-bar-container {
354 width: 100%;
355 height: 6px;
356 background: rgba(255,255,255,0.08);
357 border-radius: 3px;
358 margin-top: 8px;
359 overflow: hidden;
360}
361
362.score-bar {
363 height: 100%;
364 border-radius: 3px;
365 transition: width 0.6s ease;
366}
367
368/* ==================== Category Scores ==================== */
369.category-scores {
370 display: grid;
371 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
372 gap: 12px;
373 margin-top: 16px;
374}
375
376.cat-score-item {
377 text-align: center;
378}
379
380.cat-score-item .cat-label {
381 font-size: 11px;
382 color: var(--text-muted);
383 text-transform: uppercase;
384 display: block;
385 margin-bottom: 4px;
386}
387
388.cat-score-item .cat-value {
389 font-size: 20px;
390 font-weight: 700;
391}
392
393/* ==================== Forms & Layouts ==================== */
394.pf-layout {
395 display: flex;
396 gap: 30px;
397}
398
399.pf-sidebar {
400 width: 300px;
401 flex-shrink: 0;
402}
403
404.pf-table-container {
405 flex: 1;
406 overflow-x: auto;
407}
408
409.mt-2 { margin-top: 20px; }
410
411form label, .form-group label {
412 display: block;
413 margin-top: 15px;
414 margin-bottom: 5px;
415 font-size: 13px;
416 color: var(--text-muted);
417}
418
419form select, form input, form textarea, .form-group select, .form-group input, .form-group textarea {
420 width: 100%;
421 padding: 10px 12px;
422 background: rgba(10, 15, 30, 0.6);
423 border: 1px solid var(--glass-border);
424 border-radius: 8px;
425 color: var(--text-primary);
426 font-family: 'Inter';
427 font-size: 14px;
428 transition: border-color 0.3s;
429}
430
431form select:focus, form input:focus, form textarea:focus, .form-group select:focus, .form-group input:focus, .form-group textarea:focus {
432 outline: none;
433 border-color: var(--accent);
434 box-shadow: 0 0 0 3px var(--accent-glow);
435}
436
437.btn {
438 width: 100%;
439 padding: 12px;
440 border: none;
441 border-radius: 8px;
442 font-size: 14px;
443 font-weight: 600;
444 cursor: pointer;
445 transition: all 0.3s;
446 margin-top: 20px;
447 color: var(--btn-text, white);
448 display: inline-flex;
449 align-items: center;
450 justify-content: center;
451 gap: 8px;
452}
453
454.btn.primary { background: var(--accent); color: white !important; }
455.btn.primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-glow); }
456
457.btn.secondary { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary) !important; }
458.btn.secondary:hover { background: var(--glass-border-hover); }
459
460.btn.success { background: var(--success); color: white !important; }
461.btn.success:hover { filter: brightness(1.1); }
462
463.btn.danger-sm {
464 background: rgba(239, 68, 68, 0.15);
465 color: var(--danger);
466 width: auto;
467 padding: 6px 12px;
468 margin: 0;
469 border: 1px solid rgba(239, 68, 68, 0.3);
470 font-size: 12px;
471}
472.btn.danger-sm:hover { background: var(--danger); color: white; }
473
474.btn.info-sm {
475 background: rgba(59, 130, 246, 0.15);
476 color: var(--primary);
477 width: auto;
478 padding: 6px 12px;
479 margin: 0;
480 margin-right: 4px;
481 border: 1px solid rgba(59, 130, 246, 0.3);
482 font-size: 12px;
483}
484.btn.info-sm:hover { background: var(--primary); color: white; }
485
486/* ==================== Tables ==================== */
487.data-table {
488 width: 100%;
489 border-collapse: collapse;
490}
491
492.data-table th, .data-table td {
493 padding: 12px 14px;
494 text-align: left;
495 border-bottom: 1px solid var(--glass-border);
496 font-size: 14px;
497}
498
499.data-table th {
500 color: var(--text-muted);
501 font-weight: 500;
502 font-size: 12px;
503 text-transform: uppercase;
504 letter-spacing: 0.5px;
505}
506
507.data-table tbody tr {
508 transition: background 0.2s;
509}
510
511.data-table tbody tr:hover {
512 background: rgba(59, 130, 246, 0.05);
513}
514
515.data-table tbody tr.clickable {
516 cursor: pointer;
517}
518
519.slim-table th, .slim-table td {
520 padding: 8px 10px;
521 font-size: 13px;
522}
523.slim-table-container {
524 max-height: 280px;
525 overflow-y: auto;
526}
527
528/* ==================== Rotation Signals ==================== */
529.rotation-tag {
530 display: inline-flex;
531 align-items: center;
532 padding: 3px 8px;
533 border-radius: 4px;
534 font-size: 11px;
535 font-weight: 600;
536}
537
538.rotation-tag.inflow { background: var(--success-bg); color: var(--success); }
539.rotation-tag.outflow { background: var(--danger-bg); color: var(--danger); }
540.rotation-tag.strong { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
541.rotation-tag.weak { background: rgba(249, 115, 22, 0.1); color: #f97316; }
542.rotation-tag.neutral { background: rgba(148, 163, 184, 0.1); color: var(--text-muted); }
543
544/* ==================== AI Page ==================== */
545.ai-btn {
546 background: linear-gradient(135deg, var(--purple), var(--accent));
547}
548.ai-btn:hover {
549 box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
550 transform: translateY(-1px);
551}
552.ai-output {
553 margin-top: 30px;
554 line-height: 1.7;
555}
556.ai-output h1, .ai-output h2, .ai-output h3 {
557 margin-top: 20px;
558 margin-bottom: 10px;
559 color: var(--accent);
560}
561.ai-output p { margin-bottom: 15px; }
562.ai-output ul, .ai-output ol { margin-left: 20px; margin-bottom: 15px; }
563.ai-output li { margin-bottom: 5px; }
564.hidden { display: none !important; }
565
566/* ==================== Modal ==================== */
567.modal-overlay {
568 position: fixed;
569 top: 0;
570 left: 0;
571 width: 100%;
572 height: 100%;
573 background: rgba(0, 0, 0, 0.6);
574 backdrop-filter: blur(4px);
575 z-index: 9999;
576 display: flex;
577 align-items: center;
578 justify-content: center;
579 animation: fadeIn 0.2s ease;
580}
581
582.modal-content {
583 width: 90%;
584 max-width: 800px;
585 max-height: 85vh;
586 overflow-y: auto;
587 border-radius: 20px;
588 border: 1px solid var(--glass-border);
589}
590
591.modal-header {
592 display: flex;
593 justify-content: space-between;
594 align-items: center;
595 margin-bottom: 24px;
596 padding-bottom: 16px;
597 border-bottom: 1px solid var(--glass-border);
598}
599
600.modal-header h2 {
601 font-size: 24px;
602 display: flex;
603 align-items: center;
604 gap: 12px;
605}
606
607.modal-close {
608 background: none;
609 border: 1px solid var(--glass-border);
610 color: var(--text-muted);
611 font-size: 18px;
612 cursor: pointer;
613 padding: 8px 12px;
614 border-radius: 8px;
615 transition: all 0.2s;
616}
617
618.modal-close:hover {
619 background: var(--danger-bg);
620 color: var(--danger);
621 border-color: var(--danger);
622}
623
624.modal-section {
625 margin-bottom: 24px;
626}
627
628.modal-section h3 {
629 font-size: 16px;
630 margin-bottom: 12px;
631 color: var(--accent);
632}
633
634.modal-grid {
635 display: grid;
636 grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
637 gap: 12px;
638}
639
640.modal-stat {
641 padding: 12px;
642 background: rgba(10, 15, 30, 0.5);
643 border-radius: 10px;
644 border: 1px solid var(--glass-border);
645}
646
647.modal-stat .ms-label {
648 font-size: 11px;
649 color: var(--text-muted);
650 text-transform: uppercase;
651 display: block;
652 margin-bottom: 4px;
653}
654
655.modal-stat .ms-value {
656 font-size: 20px;
657 font-weight: 600;
658}
659
660/* Fibonacci Levels */
661.fib-levels {
662 display: flex;
663 flex-direction: column;
664 gap: 6px;
665}
666
667.fib-level {
668 display: flex;
669 justify-content: space-between;
670 align-items: center;
671 padding: 6px 12px;
672 background: rgba(10, 15, 30, 0.4);
673 border-radius: 6px;
674 font-size: 13px;
675}
676
677.fib-level .fib-name { color: var(--text-muted); }
678.fib-level .fib-price { font-weight: 600; }
679
680/* Feature Importance */
681.feature-bar {
682 display: flex;
683 align-items: center;
684 gap: 10px;
685 margin-bottom: 6px;
686 font-size: 13px;
687}
688
689.feature-bar .fb-name {
690 width: 140px;
691 color: var(--text-muted);
692 flex-shrink: 0;
693}
694
695.feature-bar .fb-bar-bg {
696 flex: 1;
697 height: 8px;
698 background: rgba(255,255,255,0.06);
699 border-radius: 4px;
700 overflow: hidden;
701}
702
703.feature-bar .fb-bar {
704 height: 100%;
705 background: linear-gradient(90deg, var(--accent), var(--purple));
706 border-radius: 4px;
707 transition: width 0.5s ease;
708}
709
710.feature-bar .fb-value {
711 width: 40px;
712 text-align: right;
713 font-weight: 600;
714 font-size: 12px;
715}
716
717/* ==================== Loader ==================== */
718.loader-overlay {
719 position: absolute;
720 top: 0; left: 0; right: 0; bottom: 0;
721 background: var(--bg-dark);
722 display: flex;
723 flex-direction: column;
724 align-items: center;
725 justify-content: center;
726 z-index: 1000;
727}
728.spinner {
729 width: 48px;
730 height: 48px;
731 border: 3px solid var(--glass-border);
732 border-top-color: var(--accent);
733 border-radius: 50%;
734 animation: spin 1s linear infinite;
735 margin-bottom: 20px;
736}
737@keyframes spin { 100% { transform: rotate(360deg); } }
738
739/* ==================== Scrollbar ==================== */
740::-webkit-scrollbar {
741 width: 6px;
742 height: 6px;
743}
744::-webkit-scrollbar-track {
745 background: transparent;
746}
747::-webkit-scrollbar-thumb {
748 background: rgba(255,255,255,0.12);
749 border-radius: 3px;
750}
751::-webkit-scrollbar-thumb:hover {
752 background: rgba(255,255,255,0.2);
753}
754
755/* ==================== Text Utilities ==================== */
756.text-muted { color: var(--text-muted); }
757.text-success { color: var(--success); }
758.text-danger { color: var(--danger); }
759.text-warning { color: var(--warning); }
760
761/* ==================== AI PF Layout ==================== */
762.ai-pf-layout {
763 display: grid;
764 grid-template-columns: 1fr 350px;
765 gap: 20px;
766 margin-top: 20px;
767}
768
769/* ==================== Responsive (Native App Feel) ==================== */
770@media (max-width: 768px) {
771 body {
772 overflow-x: hidden;
773 -webkit-tap-highlight-color: transparent;
774 }
775
776 .app-container {
777 flex-direction: column;
778 }
779
780 /* Content Padding to clear the Bottom Bar and iOS SafeArea */
781 .content {
782 margin-left: 0;
783 padding: 15px;
784 padding-bottom: calc(80px + env(safe-area-inset-bottom));
785 }
786
787 /* Bottom Navigation Bar */
788 .sidebar {
789 width: 100%;
790 height: calc(65px + env(safe-area-inset-bottom));
791 position: fixed;
792 bottom: 0;
793 left: 0;
794 z-index: 9999;
795 flex-direction: row;
796 justify-content: space-around;
797 align-items: flex-start;
798 padding: 10px 0 env(safe-area-inset-bottom) 0;
799 background: rgba(10, 15, 30, 0.95);
800 backdrop-filter: blur(15px);
801 border-top: 1px solid var(--glass-border);
802 border-right: none;
803 }
804
805 .logo { display: none; }
806 .sidebar-footer { display: none; }
807
808 .nav-links {
809 display: flex;
810 width: 100%;
811 justify-content: space-around;
812 gap: 0;
813 }
814
815 .nav-links li {
816 flex: 1;
817 display: flex;
818 flex-direction: column;
819 align-items: center;
820 justify-content: center;
821 padding: 5px;
822 border-left: none;
823 border-bottom: none;
824 font-size: 10px;
825 color: var(--text-muted);
826 gap: 5px;
827 }
828
829 .nav-links li i {
830 font-size: 20px;
831 margin-right: 0;
832 }
833
834 .nav-links li.active {
835 color: var(--accent);
836 border-left: none;
837 border-bottom: none;
838 background: transparent;
839 }
840
841 /* Layout Overrides */
842 .pf-layout { flex-direction: column; }
843 .pf-sidebar { width: 100%; }
844 .regime-banner { flex-direction: column; gap: 16px; }
845 .metrics-grid { grid-template-columns: repeat(2, 1fr); }
846 .recs-grid { grid-template-columns: 1fr; }
847 .dashboard-grid { grid-template-columns: 1fr 1fr; }
848 .ai-pf-layout { grid-template-columns: 1fr; }
849 .modal-content { width: 95%; max-height: 90vh; padding: 15px; }
850
851 /* Better Table Readability for Mobile Touch */
852 .data-table th, .data-table td {
853 padding: 15px 10px;
854 font-size: 13px;
855 }
856
857 input[type="number"], input[type="text"], input[type="email"], input[type="password"] {
858 font-size: 16px; /* Prevents auto-zoom on iOS Safari */
859 }
860}
861
862
863/* ==========================================================================
864 Premium Login Screen Styles
865 ========================================================================== */
866.login-overlay {
867 background: radial-gradient(circle at center, rgba(10, 15, 30, 0.85) 0%, rgba(5, 8, 15, 0.98) 100%);
868 backdrop-filter: blur(12px);
869 -webkit-backdrop-filter: blur(12px);
870}
871
872.login-card {
873 background: rgba(17, 24, 39, 0.7);
874 border: 1px solid rgba(255, 255, 255, 0.1);
875 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
876 border-radius: 24px;
877 width: 100%;
878 max-width: 420px;
879 padding: 40px;
880 backdrop-filter: blur(20px);
881 -webkit-backdrop-filter: blur(20px);
882 transform: translateY(0);
883 animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1);
884}
885
886@keyframes slideUpFade {
887 0% { opacity: 0; transform: translateY(40px) scale(0.95); }
888 100% { opacity: 1; transform: translateY(0) scale(1); }
889}
890
891.login-header {
892 text-align: center;
893 margin-bottom: 35px;
894}
895
896.login-logo {
897 width: 64px;
898 height: 64px;
899 background: linear-gradient(135deg, var(--primary), var(--accent));
900 border-radius: 18px;
901 display: flex;
902 align-items: center;
903 justify-content: center;
904 font-size: 30px;
905 color: white;
906 margin: 0 auto 24px auto;
907 box-shadow: 0 12px 24px rgba(59, 130, 246, 0.35);
908 border: 1px solid rgba(255,255,255,0.2);
909}
910
911.login-header h2 {
912 font-size: 26px;
913 font-weight: 700;
914 color: white;
915 margin-bottom: 10px;
916 letter-spacing: -0.5px;
917}
918
919.login-header p {
920 color: var(--text-muted);
921 font-size: 15px;
922}
923
924.input-group {
925 position: relative;
926 margin-bottom: 22px;
927}
928
929.input-icon {
930 position: absolute;
931 left: 18px;
932 top: 50%;
933 transform: translateY(-50%);
934 color: #6b7280;
935 font-size: 16px;
936 transition: color 0.3s ease;
937 z-index: 2;
938}
939
940.input-group input {
941 width: 100%;
942 padding: 15px 15px 15px 50px;
943 background: rgba(0, 0, 0, 0.25);
944 border: 1px solid rgba(255, 255, 255, 0.1);
945 border-radius: 14px;
946 color: white;
947 font-size: 15px;
948 transition: all 0.3s ease;
949}
950
951.input-group input::placeholder {
952 color: #6b7280;
953}
954
955.input-group input:focus {
956 outline: none;
957 border-color: var(--primary);
958 background: rgba(0, 0, 0, 0.4);
959 box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
960}
961
962.input-group input:focus ~ .input-icon {
963 color: var(--primary);
964}
965
966.login-actions {
967 display: flex;
968 justify-content: flex-end;
969 margin-bottom: 25px;
970}
971
972.forgot-password {
973 color: var(--text-muted);
974 font-size: 14px;
975 font-weight: 500;
976 text-decoration: none;
977 transition: all 0.2s ease;
978}
979
980.forgot-password:hover {
981 color: var(--primary);
982}
983
984.btn-premium {
985 width: 100%;
986 padding: 16px;
987 background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
988 color: white;
989 border: none;
990 border-radius: 14px;
991 font-size: 16px;
992 font-weight: 600;
993 cursor: pointer;
994 display: flex;
995 justify-content: center;
996 align-items: center;
997 gap: 12px;
998 transition: all 0.3s ease;
999 box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
1000}
1001
1002.btn-premium:hover {
1003 transform: translateY(-2px);
1004 box-shadow: 0 10px 25px rgba(37, 99, 235, 0.5);
1005 background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
1006}
1007
1008.btn-premium:active {
1009 transform: translateY(1px);
1010 box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
1011}
1012
1013.divider {
1014 display: flex;
1015 align-items: center;
1016 margin: 28px 0;
1017 color: #6b7280;
1018 font-size: 14px;
1019 font-weight: 500;
1020}
1021
1022.divider::before, .divider::after {
1023 content: '';
1024 flex: 1;
1025 height: 1px;
1026 background: rgba(255, 255, 255, 0.08);
1027}
1028
1029.divider span {
1030 padding: 0 16px;
1031}
1032
1033.btn-google {
1034 width: 100%;
1035 padding: 15px;
1036 background: rgba(255, 255, 255, 0.05);
1037 color: white;
1038 border: 1px solid rgba(255, 255, 255, 0.1);
1039 border-radius: 14px;
1040 font-size: 15px;
1041 font-weight: 500;
1042 cursor: pointer;
1043 display: flex;
1044 justify-content: center;
1045 align-items: center;
1046 gap: 14px;
1047 transition: all 0.3s ease;
1048}
1049
1050.btn-google img {
1051 width: 22px;
1052 height: 22px;
1053}
1054
1055.btn-google:hover {
1056 background: rgba(255, 255, 255, 0.1);
1057 border-color: rgba(255, 255, 255, 0.2);
1058 transform: translateY(-1px);
1059}
1060
1061.login-error-msg {
1062 color: #fca5a5;
1063 font-size: 14px;
1064 font-weight: 500;
1065 text-align: center;
1066 margin-top: 24px;
1067 display: none;
1068 background: rgba(239, 68, 68, 0.15);
1069 padding: 12px;
1070 border-radius: 10px;
1071 border: 1px solid rgba(239, 68, 68, 0.3);
1072 animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
1073}
1074
1075@keyframes shake {
1076 10%, 90% { transform: translate3d(-1px, 0, 0); }
1077 20%, 80% { transform: translate3d(2px, 0, 0); }
1078 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
1079 40%, 60% { transform: translate3d(4px, 0, 0); }
1080}
1081
1082@media (max-width: 480px) {
1083 .login-card {
1084 border-radius: 20px;
1085 padding: 30px 20px;
1086 }
1087}
1088
1089/* Theme Switch */
1090#theme-switch-checkbox:checked ~ .slider {
1091 background-color: var(--primary) !important;
1092}
1093#theme-switch-checkbox:checked ~ .slider-circle {
1094 transform: translateX(20px);
1095 background-color: #fff !important;
1096}
1097
1098/* ==================== TOAST NOTIFICATIONS ==================== */
1099#toast-container {
1100 position: fixed;
1101 top: 20px;
1102 right: 20px;
1103 z-index: 99999;
1104 display: flex;
1105 flex-direction: column;
1106 gap: 10px;
1107}
1108
1109.toast {
1110 display: flex;
1111 align-items: center;
1112 background: var(--glass-bg);
1113 border: 1px solid var(--glass-border);
1114 backdrop-filter: blur(10px);
1115 -webkit-backdrop-filter: blur(10px);
1116 padding: 16px 20px;
1117 border-radius: 12px;
1118 box-shadow: 0 10px 30px rgba(0,0,0,0.5);
1119 color: var(--text-primary);
1120 font-size: 14px;
1121 transform: translateX(120%);
1122 transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1123 min-width: 300px;
1124 max-width: 400px;
1125}
1126
1127.toast.show {
1128 transform: translateX(0);
1129}
1130
1131.toast-icon {
1132 font-size: 20px;
1133 margin-right: 15px;
1134}
1135
1136.toast-success .toast-icon { color: var(--success); }
1137.toast-error .toast-icon { color: var(--danger); }
1138.toast-warning .toast-icon { color: var(--warning); }
1139.toast-info .toast-icon { color: var(--accent); }
1140
1141.toast-message {
1142 flex-grow: 1;
1143 font-weight: 500;
1144}
1145