mohdbelal010/SecureAI-Gaurd
0
1/* ═══════════════════════════════════════════════════════════════2 SecureAI-Guard — SOC Dashboard Styles3 Premium dark-theme cybersecurity interface4 ═══════════════════════════════════════════════════════════════ */5 6/* ──── CSS Custom Properties ──── */7:root {8 /* Core palette */9 --bg-primary: #060a14;10 --bg-secondary: #0c1222;11 --bg-card: rgba(14, 22, 42, 0.75);12 --bg-card-hover: rgba(18, 28, 52, 0.85);13 --bg-sidebar: rgba(8, 14, 28, 0.92);14 --bg-input: rgba(10, 18, 36, 0.8);15 --bg-header: rgba(6, 10, 20, 0.95);16 17 /* Accent colors */18 --cyan: #00d4ff;19 --cyan-glow: rgba(0, 212, 255, 0.25);20 --cyan-dim: rgba(0, 212, 255, 0.08);21 --green: #00e68a;22 --green-glow: rgba(0, 230, 138, 0.25);23 --red: #ff4d6a;24 --red-glow: rgba(255, 77, 106, 0.25);25 --orange: #ffa726;26 --orange-glow: rgba(255, 167, 38, 0.25);27 --purple: #b388ff;28 --purple-glow: rgba(179, 136, 255, 0.25);29 --blue: #448aff;30 --blue-glow: rgba(68, 138, 255, 0.25);31 32 /* Text */33 --text-primary: #e8ecf4;34 --text-secondary: #8892a6;35 --text-muted: #4a5568;36 37 /* Borders & effects */38 --border-color: rgba(0, 212, 255, 0.12);39 --border-subtle: rgba(255, 255, 255, 0.05);40 --glass-blur: 16px;41 --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.06);42 43 /* Spacing */44 --sidebar-width: 300px;45 --header-height: 64px;46 --radius: 12px;47 --radius-sm: 8px;48 --radius-xs: 6px;49 50 /* Typography */51 --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;52 --font-mono: 'JetBrains Mono', 'Fira Code', monospace;53 54 /* Gauge */55 --gauge-circumference: 326.73; /* 2 * π * 52 */56}57 58/* ──── Reset & Base ──── */59*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }60 61html {62 font-size: 14px;63 scroll-behavior: smooth;64}65 66body {67 font-family: var(--font-sans);68 background: var(--bg-primary);69 color: var(--text-primary);70 line-height: 1.5;71 overflow-x: hidden;72 min-height: 100vh;73}74 75/* Animated background grid */76body::before {77 content: '';78 position: fixed;79 inset: 0;80 background:81 radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.04) 0%, transparent 50%),82 radial-gradient(ellipse at 80% 20%, rgba(179, 136, 255, 0.03) 0%, transparent 50%),83 radial-gradient(ellipse at 50% 100%, rgba(0, 230, 138, 0.02) 0%, transparent 40%);84 pointer-events: none;85 z-index: 0;86}87 88/* ═══════════════════ HEADER ═══════════════════ */89#app-header {90 position: fixed;91 top: 0;92 left: 0;93 right: 0;94 height: var(--header-height);95 background: var(--bg-header);96 backdrop-filter: blur(var(--glass-blur));97 -webkit-backdrop-filter: blur(var(--glass-blur));98 border-bottom: 1px solid var(--border-color);99 display: flex;100 align-items: center;101 justify-content: space-between;102 padding: 0 24px;103 z-index: 100;104 box-shadow: var(--shadow-glow);105}106 107.header-left { display: flex; align-items: center; }108 109.logo {110 display: flex;111 align-items: center;112 gap: 14px;113}114 115.shield-icon {116 width: 40px;117 height: 40px;118 color: var(--cyan);119 filter: drop-shadow(0 0 8px var(--cyan-glow));120 animation: shield-pulse 3s ease-in-out infinite;121}122 123@keyframes shield-pulse {124 0%, 100% { filter: drop-shadow(0 0 8px var(--cyan-glow)); }125 50% { filter: drop-shadow(0 0 16px rgba(0, 212, 255, 0.45)); }126}127 128.logo h1 {129 font-size: 1.3rem;130 font-weight: 700;131 background: linear-gradient(135deg, var(--cyan), var(--purple));132 -webkit-background-clip: text;133 -webkit-text-fill-color: transparent;134 background-clip: text;135 letter-spacing: -0.02em;136}137 138.logo .subtitle {139 display: block;140 font-size: 0.7rem;141 color: var(--text-secondary);142 letter-spacing: 0.12em;143 text-transform: uppercase;144 margin-top: -2px;145}146 147.header-center { display: flex; align-items: center; }148 149.status-pill {150 display: flex;151 align-items: center;152 gap: 8px;153 padding: 6px 16px;154 border-radius: 20px;155 background: rgba(0, 230, 138, 0.08);156 border: 1px solid rgba(0, 230, 138, 0.2);157 font-size: 0.8rem;158 font-weight: 500;159 color: var(--green);160 transition: all 0.5s ease;161}162 163.status-pill.error {164 background: rgba(255, 77, 106, 0.08);165 border-color: rgba(255, 77, 106, 0.2);166 color: var(--red);167}168 169.status-pill.running {170 background: rgba(0, 212, 255, 0.08);171 border-color: rgba(0, 212, 255, 0.2);172 color: var(--cyan);173}174 175.pulse-dot {176 width: 8px;177 height: 8px;178 border-radius: 50%;179 background: currentColor;180 animation: pulse 2s ease-in-out infinite;181}182 183@keyframes pulse {184 0%, 100% { opacity: 1; transform: scale(1); }185 50% { opacity: 0.4; transform: scale(0.8); }186}187 188.header-right {189 display: flex;190 gap: 24px;191}192 193.header-stat {194 text-align: center;195}196 197.stat-label {198 display: block;199 font-size: 0.65rem;200 color: var(--text-muted);201 text-transform: uppercase;202 letter-spacing: 0.08em;203}204 205.stat-value {206 display: block;207 font-size: 1.1rem;208 font-weight: 700;209 font-family: var(--font-mono);210 color: var(--cyan);211}212 213/* ═══════════════════ MAIN LAYOUT ═══════════════════ */214#app-main {215 display: flex;216 margin-top: var(--header-height);217 min-height: calc(100vh - var(--header-height));218 position: relative;219 z-index: 1;220}221 222/* ──── SIDEBAR ──── */223#sidebar {224 width: var(--sidebar-width);225 min-width: var(--sidebar-width);226 background: var(--bg-sidebar);227 backdrop-filter: blur(var(--glass-blur));228 border-right: 1px solid var(--border-color);229 padding: 20px 16px;230 overflow-y: auto;231 height: calc(100vh - var(--header-height));232 position: sticky;233 top: var(--header-height);234 display: flex;235 flex-direction: column;236 gap: 8px;237}238 239.sidebar-section {240 background: var(--bg-card);241 border: 1px solid var(--border-subtle);242 border-radius: var(--radius);243 padding: 18px 16px;244 transition: border-color 0.3s;245}246 247.sidebar-section:hover {248 border-color: var(--border-color);249}250 251.section-title {252 font-size: 0.85rem;253 font-weight: 600;254 color: var(--text-secondary);255 text-transform: uppercase;256 letter-spacing: 0.06em;257 margin-bottom: 14px;258 display: flex;259 align-items: center;260 gap: 8px;261}262 263.section-title .icon { font-size: 1rem; }264 265/* Form elements */266.form-group {267 margin-bottom: 14px;268}269 270.form-group label {271 display: block;272 font-size: 0.78rem;273 color: var(--text-secondary);274 margin-bottom: 6px;275 font-weight: 500;276}277 278select, input[type="number"], textarea {279 width: 100%;280 padding: 10px 12px;281 background: var(--bg-input);282 border: 1px solid var(--border-subtle);283 border-radius: var(--radius-sm);284 color: var(--text-primary);285 font-family: var(--font-sans);286 font-size: 0.85rem;287 transition: all 0.25s ease;288 outline: none;289}290 291select:focus, input[type="number"]:focus, textarea:focus {292 border-color: var(--cyan);293 box-shadow: 0 0 0 3px var(--cyan-dim);294}295 296select { cursor: pointer; -webkit-appearance: none; appearance: none; }297 298textarea { resize: vertical; min-height: 60px; }299 300/* Slider */301input[type="range"] {302 width: 100%;303 height: 6px;304 -webkit-appearance: none;305 background: rgba(255,255,255,0.06);306 border-radius: 3px;307 outline: none;308 margin-top: 4px;309}310 311input[type="range"]::-webkit-slider-thumb {312 -webkit-appearance: none;313 width: 18px;314 height: 18px;315 border-radius: 50%;316 background: var(--cyan);317 cursor: pointer;318 box-shadow: 0 0 8px var(--cyan-glow);319 transition: box-shadow 0.2s;320}321 322input[type="range"]::-webkit-slider-thumb:hover {323 box-shadow: 0 0 16px rgba(0, 212, 255, 0.5);324}325 326/* Radio Cards */327.radio-group {328 display: grid;329 grid-template-columns: 1fr 1fr;330 gap: 8px;331}332 333.radio-card {334 display: flex;335 flex-direction: column;336 align-items: center;337 gap: 4px;338 padding: 10px 8px;339 background: var(--bg-input);340 border: 1px solid var(--border-subtle);341 border-radius: var(--radius-sm);342 cursor: pointer;343 transition: all 0.25s ease;344 font-size: 0.78rem;345 font-weight: 500;346 color: var(--text-secondary);347 text-align: center;348}349 350.radio-card input { display: none; }351 352.radio-card:hover {353 border-color: rgba(255,255,255,0.15);354 background: var(--bg-card-hover);355}356 357.radio-card.active {358 border-color: var(--cyan);359 background: var(--cyan-dim);360 color: var(--cyan);361}362 363.radio-icon {364 font-size: 1.1rem;365 width: 28px;366 height: 28px;367 display: flex;368 align-items: center;369 justify-content: center;370 border-radius: 50%;371}372 373.radio-icon.safe { color: var(--green); }374.radio-icon.danger { color: var(--red); }375.radio-icon.warning { color: var(--orange); }376.radio-icon.info { color: var(--blue); }377 378/* Buttons */379.btn {380 width: 100%;381 padding: 11px 16px;382 border: none;383 border-radius: var(--radius-sm);384 font-family: var(--font-sans);385 font-size: 0.85rem;386 font-weight: 600;387 cursor: pointer;388 display: flex;389 align-items: center;390 justify-content: center;391 gap: 8px;392 transition: all 0.25s ease;393 margin-bottom: 8px;394 position: relative;395 overflow: hidden;396}397 398.btn::after {399 content: '';400 position: absolute;401 inset: 0;402 background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);403 opacity: 0;404 transition: opacity 0.25s;405}406 407.btn:hover::after { opacity: 1; }408 409.btn:disabled {410 opacity: 0.4;411 cursor: not-allowed;412}413 414.btn:disabled::after { display: none; }415 416.btn-primary {417 background: linear-gradient(135deg, #00b8d9, #0097a7);418 color: white;419 box-shadow: 0 4px 16px rgba(0, 184, 217, 0.25);420}421 422.btn-primary:hover:not(:disabled) {423 box-shadow: 0 6px 24px rgba(0, 184, 217, 0.4);424 transform: translateY(-1px);425}426 427.btn-accent {428 background: linear-gradient(135deg, #7c4dff, #651fff);429 color: white;430 box-shadow: 0 4px 16px rgba(124, 77, 255, 0.25);431}432 433.btn-accent:hover:not(:disabled) {434 box-shadow: 0 6px 24px rgba(124, 77, 255, 0.4);435 transform: translateY(-1px);436}437 438.btn-secondary {439 background: rgba(0, 212, 255, 0.1);440 color: var(--cyan);441 border: 1px solid rgba(0, 212, 255, 0.25);442}443 444.btn-secondary:hover:not(:disabled) {445 background: rgba(0, 212, 255, 0.18);446}447 448.btn-ghost {449 background: rgba(255,255,255,0.04);450 color: var(--text-secondary);451 border: 1px solid var(--border-subtle);452}453 454.btn-ghost:hover:not(:disabled) {455 background: rgba(255,255,255,0.08);456 color: var(--text-primary);457}458 459/* Task Info */460.task-info-section #task-info-content {461 font-size: 0.8rem;462 color: var(--text-secondary);463 line-height: 1.6;464}465 466.task-info-section .task-meta {467 margin-top: 10px;468 padding-top: 10px;469 border-top: 1px solid var(--border-subtle);470}471 472.task-info-section .task-meta span {473 display: block;474 margin-bottom: 4px;475}476 477/* ──── CONTENT AREA ──── */478#content {479 flex: 1;480 padding: 20px 24px;481 overflow-y: auto;482 display: flex;483 flex-direction: column;484 gap: 20px;485}486 487/* ──── Glass Card ──── */488.glass-card {489 background: var(--bg-card);490 backdrop-filter: blur(var(--glass-blur));491 border: 1px solid var(--border-subtle);492 border-radius: var(--radius);493 padding: 20px;494 transition: border-color 0.3s, box-shadow 0.3s;495}496 497.glass-card:hover {498 border-color: var(--border-color);499 box-shadow: var(--shadow-glow);500}501 502.card-title {503 font-size: 0.9rem;504 font-weight: 600;505 color: var(--text-secondary);506 margin-bottom: 16px;507 display: flex;508 align-items: center;509 gap: 8px;510}511 512/* ═══════════════════ GAUGES ═══════════════════ */513.gauges-row {514 display: grid;515 grid-template-columns: repeat(4, 1fr);516 gap: 16px;517}518 519.gauge-card {520 background: var(--bg-card);521 border: 1px solid var(--border-subtle);522 border-radius: var(--radius);523 padding: 20px 16px;524 text-align: center;525 transition: all 0.3s ease;526}527 528.gauge-card:hover {529 border-color: var(--border-color);530 box-shadow: var(--shadow-glow);531 transform: translateY(-2px);532}533 534.gauge-ring {535 position: relative;536 width: 110px;537 height: 110px;538 margin: 0 auto 12px;539}540 541.gauge-ring svg {542 transform: rotate(-90deg);543 width: 100%;544 height: 100%;545}546 547.gauge-track {548 fill: none;549 stroke: rgba(255,255,255,0.04);550 stroke-width: 8;551}552 553.gauge-fill {554 fill: none;555 stroke-width: 8;556 stroke-linecap: round;557 stroke-dasharray: var(--gauge-circumference);558 stroke-dashoffset: var(--gauge-circumference);559 transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.5s ease;560}561 562.trust-fill { stroke: var(--green); filter: drop-shadow(0 0 4px var(--green-glow)); }563.fatigue-fill { stroke: var(--green); filter: drop-shadow(0 0 4px var(--green-glow)); }564.risk-fill { stroke: var(--green); filter: drop-shadow(0 0 4px var(--green-glow)); }565 566.gauge-value {567 position: absolute;568 top: 50%;569 left: 50%;570 transform: translate(-50%, -50%);571 font-size: 1.6rem;572 font-weight: 800;573 font-family: var(--font-mono);574 color: var(--text-primary);575}576 577.gauge-label {578 font-size: 0.8rem;579 font-weight: 600;580 color: var(--text-secondary);581 text-transform: uppercase;582 letter-spacing: 0.05em;583}584 585.gauge-sub {586 font-size: 0.72rem;587 color: var(--green);588 margin-top: 2px;589 font-weight: 500;590}591 592/* Stat card */593.stat-card {594 display: flex;595 align-items: center;596}597 598.mini-stats {599 display: grid;600 grid-template-columns: 1fr 1fr;601 gap: 16px;602 width: 100%;603}604 605.mini-stat { text-align: center; }606 607.mini-stat-value {608 display: block;609 font-size: 1.3rem;610 font-weight: 700;611 font-family: var(--font-mono);612 color: var(--cyan);613}614 615.mini-stat-value.danger-text { color: var(--red); }616 617.mini-stat-label {618 display: block;619 font-size: 0.68rem;620 color: var(--text-muted);621 text-transform: uppercase;622 letter-spacing: 0.04em;623 margin-top: 2px;624}625 626/* ═══════════════════ EVENT PREVIEW ═══════════════════ */627.event-preview-card {628 border-left: 3px solid var(--cyan);629 animation: slideIn 0.4s ease;630}631 632@keyframes slideIn {633 from { opacity: 0; transform: translateY(-10px); }634 to { opacity: 1; transform: translateY(0); }635}636 637.event-preview-header {638 display: flex;639 justify-content: space-between;640 align-items: center;641 margin-bottom: 12px;642}643 644.event-preview-header h3 {645 font-size: 0.9rem;646 font-weight: 600;647 display: flex;648 align-items: center;649 gap: 8px;650}651 652.event-badges {653 display: flex;654 gap: 6px;655}656 657.badge {658 padding: 3px 10px;659 border-radius: 20px;660 font-size: 0.7rem;661 font-weight: 600;662 text-transform: uppercase;663 letter-spacing: 0.04em;664 background: rgba(0, 212, 255, 0.1);665 color: var(--cyan);666 border: 1px solid rgba(0, 212, 255, 0.2);667}668 669.badge.threat-phishing { background: rgba(255,77,106,0.1); color: var(--red); border-color: rgba(255,77,106,0.2); }670.badge.threat-malware { background: rgba(179,136,255,0.1); color: var(--purple); border-color: rgba(179,136,255,0.2); }671.badge.threat-spam { background: rgba(255,167,38,0.1); color: var(--orange); border-color: rgba(255,167,38,0.2); }672.badge.threat-social_engineering { background: rgba(255,77,106,0.1); color: var(--red); border-color: rgba(255,77,106,0.2); }673.badge.threat-safe { background: rgba(0,230,138,0.1); color: var(--green); border-color: rgba(0,230,138,0.2); }674 675.badge.channel-sms { background: rgba(0,212,255,0.1); color: var(--cyan); }676.badge.channel-email { background: rgba(68,138,255,0.1); color: var(--blue); }677.badge.channel-web { background: rgba(179,136,255,0.1); color: var(--purple); }678 679.event-sender {680 font-size: 0.85rem;681 color: var(--text-secondary);682 margin-bottom: 8px;683}684 685.event-content {686 font-family: var(--font-mono);687 font-size: 0.82rem;688 color: var(--text-primary);689 background: rgba(0,0,0,0.3);690 padding: 12px 14px;691 border-radius: var(--radius-sm);692 border: 1px solid var(--border-subtle);693 line-height: 1.6;694 max-height: 120px;695 overflow-y: auto;696}697 698.event-preview-footer {699 margin-top: 12px;700 font-size: 0.8rem;701 color: var(--text-secondary);702}703 704.event-preview-footer strong {705 font-family: var(--font-mono);706 color: var(--cyan);707}708 709/* ═══════════════════ BOTTOM ROW ═══════════════════ */710.bottom-row {711 display: grid;712 grid-template-columns: 2fr 1fr;713 gap: 16px;714}715 716/* ──── Event Feed Table ──── */717.event-feed { overflow: hidden; }718 719.table-wrapper {720 overflow-x: auto;721 overflow-y: auto;722 max-height: 350px;723}724 725#event-table {726 width: 100%;727 border-collapse: collapse;728 font-size: 0.78rem;729}730 731#event-table thead {732 position: sticky;733 top: 0;734 z-index: 2;735}736 737#event-table th {738 padding: 10px 12px;739 text-align: left;740 font-weight: 600;741 color: var(--text-muted);742 text-transform: uppercase;743 letter-spacing: 0.05em;744 font-size: 0.7rem;745 background: var(--bg-secondary);746 border-bottom: 1px solid var(--border-color);747}748 749#event-table td {750 padding: 9px 12px;751 border-bottom: 1px solid var(--border-subtle);752 color: var(--text-secondary);753 vertical-align: middle;754}755 756#event-table tbody tr {757 transition: background 0.2s;758}759 760#event-table tbody tr:hover {761 background: rgba(0, 212, 255, 0.04);762}763 764#event-table tbody tr.flash {765 animation: rowFlash 0.8s ease;766}767 768@keyframes rowFlash {769 0% { background: rgba(0, 212, 255, 0.15); }770 100% { background: transparent; }771}772 773.empty-row td {774 text-align: center;775 padding: 40px 12px;776 color: var(--text-muted);777 font-style: italic;778}779 780/* Decision badges in table */781.decision-allow { color: var(--green); font-weight: 600; }782.decision-block { color: var(--red); font-weight: 600; }783.decision-warn { color: var(--orange); font-weight: 600; }784.decision-investigate { color: var(--blue); font-weight: 600; }785 786.reward-positive { color: var(--green); font-family: var(--font-mono); font-weight: 600; }787.reward-negative { color: var(--red); font-family: var(--font-mono); font-weight: 600; }788 789/* ──── Charts Panel ──── */790.charts-panel {791 display: flex;792 flex-direction: column;793 gap: 16px;794}795 796/* Reward bars */797.reward-bars {798 display: flex;799 flex-direction: column;800 gap: 14px;801}802 803.reward-bar-item {804 display: grid;805 grid-template-columns: 80px 1fr 50px;806 align-items: center;807 gap: 10px;808}809 810.bar-label {811 font-size: 0.78rem;812 font-weight: 500;813 color: var(--text-secondary);814}815 816.bar-track {817 height: 10px;818 background: rgba(255,255,255,0.04);819 border-radius: 5px;820 overflow: hidden;821}822 823.bar-fill {824 height: 100%;825 border-radius: 5px;826 transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);827 min-width: 2px;828}829 830.security-bar { background: linear-gradient(90deg, #00c853, #00e676); }831.friction-bar { background: linear-gradient(90deg, #ff5252, #ff1744); }832.delay-bar { background: linear-gradient(90deg, #ff9800, #ffc107); }833.reasoning-bar { background: linear-gradient(90deg, #448aff, #82b1ff); }834 835.bar-value {836 font-family: var(--font-mono);837 font-size: 0.78rem;838 font-weight: 600;839 color: var(--text-secondary);840 text-align: right;841}842 843/* Canvas chart placeholder */844#reward-chart {845 width: 100%;846 border-radius: var(--radius-sm);847}848 849/* ═══════════════════ GRADE BANNER ═══════════════════ */850.grade-banner {851 display: flex;852 align-items: center;853 gap: 24px;854 padding: 24px 28px;855 border: 1px solid var(--cyan);856 animation: gradeIn 0.6s ease;857}858 859@keyframes gradeIn {860 from { opacity: 0; transform: scale(0.95); }861 to { opacity: 1; transform: scale(1); }862}863 864.grade-icon {865 font-size: 2.8rem;866 animation: trophy 1.5s ease-in-out infinite;867}868 869@keyframes trophy {870 0%, 100% { transform: rotate(0deg); }871 25% { transform: rotate(-5deg); }872 75% { transform: rotate(5deg); }873}874 875.grade-info { flex: 1; }876 877.grade-info h2 {878 font-size: 1.2rem;879 font-weight: 700;880 margin-bottom: 6px;881}882 883.grade-details {884 display: flex;885 gap: 24px;886 font-size: 0.9rem;887 color: var(--text-secondary);888}889 890.grade-details strong {891 color: var(--cyan);892 font-family: var(--font-mono);893}894 895.grade-banner .btn {896 width: auto;897 padding: 10px 24px;898 margin: 0;899}900 901/* ═══════════════════ TOAST ═══════════════════ */902#toast-container {903 position: fixed;904 bottom: 24px;905 right: 24px;906 z-index: 1000;907 display: flex;908 flex-direction: column;909 gap: 8px;910}911 912.toast {913 padding: 12px 20px;914 border-radius: var(--radius-sm);915 font-size: 0.82rem;916 font-weight: 500;917 backdrop-filter: blur(12px);918 animation: toastIn 0.3s ease;919 min-width: 280px;920 max-width: 400px;921 box-shadow: 0 8px 24px rgba(0,0,0,0.4);922}923 924.toast.success {925 background: rgba(0, 230, 138, 0.15);926 border: 1px solid rgba(0, 230, 138, 0.3);927 color: var(--green);928}929 930.toast.error {931 background: rgba(255, 77, 106, 0.15);932 border: 1px solid rgba(255, 77, 106, 0.3);933 color: var(--red);934}935 936.toast.info {937 background: rgba(0, 212, 255, 0.15);938 border: 1px solid rgba(0, 212, 255, 0.3);939 color: var(--cyan);940}941 942@keyframes toastIn {943 from { opacity: 0; transform: translateY(10px) scale(0.95); }944 to { opacity: 1; transform: translateY(0) scale(1); }945}946 947/* ═══════════════════ SCROLLBAR ═══════════════════ */948::-webkit-scrollbar {949 width: 6px;950 height: 6px;951}952 953::-webkit-scrollbar-track {954 background: transparent;955}956 957::-webkit-scrollbar-thumb {958 background: rgba(255,255,255,0.1);959 border-radius: 3px;960}961 962::-webkit-scrollbar-thumb:hover {963 background: rgba(255,255,255,0.2);964}965 966/* ═══════════════════ RESPONSIVE ═══════════════════ */967@media (max-width: 1200px) {968 .gauges-row { grid-template-columns: repeat(2, 1fr); }969 .bottom-row { grid-template-columns: 1fr; }970}971 972@media (max-width: 768px) {973 #sidebar {974 width: 100%;975 min-width: 100%;976 height: auto;977 position: static;978 border-right: none;979 border-bottom: 1px solid var(--border-color);980 }981 #app-main { flex-direction: column; }982 .header-right { display: none; }983 .gauges-row { grid-template-columns: 1fr 1fr; }984}985