/* ========================================================================== đŸȘ VAULTFORWARD UNIFIED ENGINE CHASSIS — STRUCTURAL LAYER ========================================================================== */ /* 🌌 1. GLOBAL RESET LAYER */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { width: 100% !important; height: auto !important; overflow-x: hidden !important; overflow-y: auto !important; /* LĂ„ser upp naturlig skroll för laptops rakt över systemet */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* 🚀 MODERNA WEBBLÄSARE (Firefox/Chrome): Ändrar skrollistan pĂ„ roten nĂ€r body Ă€r mörk */ html:has(body.dark-theme) { scrollbar-color: #00ff66 #06070B !important; color-scheme: dark !important; /* Tvingar systemelement att bli mörka */ } /* 🍏 WEBKIT-SÄKRING (Chrome, Safari, Edge, Opera) */ body.dark-theme::-webkit-scrollbar { width: 10px !important; height: 100% !important; } html:has(body.dark-theme) ::-webkit-scrollbar-track { background: #06070B !important; /* Din obsidian-svarta botten */ } html:has(body.dark-theme) ::-webkit-scrollbar-thumb { background: #00ff66 !important; /* Kiselgrön skroll-tumme */ border-radius: 10px !important; } /* 🚀 MODERNA WEBBLÄSARE (Firefox/Chrome): Ändrar skrollistan pĂ„ roten nĂ€r body Ă€r ljus */ html:has(body.light-theme) { scrollbar-color: #0A2540 #F8FAFC !important; color-scheme: light !important; } /* 🍏 WEBKIT-SÄKRING (Chrome, Safari, Edge, Opera) */ body.light-theme::-webkit-scrollbar { width: 10px !important; height: 100% !important; } html:has(body.light-theme) ::-webkit-scrollbar-track { background: #F8FAFC !important; /* Krispig ljusgrĂ„ skena */ } html:has(body.light-theme) ::-webkit-scrollbar-thumb { background: #0A2540 !important; /* MidnattsblĂ„ skroll-tumme */ border-radius: 10px !important; } /* đŸ“± 2. APP HARDWARE HEADER & PORT VIEWPORT STRUCTURE (Mobil-first) */ nav.vault-app-header { position: fixed !important; top: 0; left: 0; width: 100vw; height: 60px !important; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem !important; z-index: 9999; } .logo { display: inline-flex; align-items: center; gap: 0.4rem !important; text-decoration: none; font-weight: 700; font-size: 1.05rem !important; } .logo svg { width: 16px !important; height: 16px !important; flex-shrink: 0; } .vault-header-right-actions { display: flex !important; align-items: center !important; gap: 0.6rem !important; } .vfbtn-theme-toggle, .vfbtn-gate-trigger { background: transparent; border: none; font-weight: 700; cursor: pointer; font-size: 0.75rem !important; } .vfbtn-gate-trigger { padding: 6px 10px !important; border-radius: 4px; color: inherit; } .desktop-nav-links { display: none !important; } /* đŸŽ›ïž DYNAMIC APPLICATION WRAPPERS */ .vault-app-viewport { position: relative !important; width: 100vw !important; height: calc(100vh - 124px) !important; margin-top: 60px !important; overflow: hidden !important; /* LĂ„ser fast ramen för mobilens touch-swipe karusell */ touch-action: pan-y !important; box-sizing: border-box !important; } /* đŸȘ LANDING PERIMETER: Absolut lĂ„sta vyer för mobil-swipe */ .vault-app-viewport > .vault-app-view { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto !important; box-sizing: border-box !important; display: flex !important; flex-direction: column; gap: 1.5rem; touch-action: pan-y !important; transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s !important; will-change: transform, opacity; } .vault-app-viewport > .vault-app-view.active { transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 100 !important; } .vault-app-viewport > .vault-app-view.exit-left { transform: translateX(-100%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* đŸ—‚ïž INLOGGAT LÄGE: DASHBOARD CHASSIS FLOW */ .vault-dashboard-wrapper { display: flex; width: 100vw; min-height: calc(100vh - 60px); margin-top: 60px; padding-bottom: 80px; /* Luft för bottenbalken pĂ„ mobil */ } .vault-dashboard-wrapper .vault-sidebar { display: none !important; /* Gömmer undan skrivbords-sidebar pĂ„ mobil */ } .vault-dashboard-wrapper .vault-app-viewport { position: relative; width: 100%; height: auto; overflow: visible !important; } /* Alla vyer syns samtidigt i ett vackert, linjĂ€rt flöde pĂ„ dashboarden */ .vault-dashboard-wrapper .vault-app-view { display: flex !important; position: relative !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; width: 100%; height: auto; box-sizing: border-box; flex-direction: column; gap: 1.5rem; } /* INTERIÖRA ELEMENT & GRIDKOMPONENTER */ .vault-hero-content-mesh, .vault-section-inner { margin-top:2rem; width: 100%; max-width: 90%; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; margin: auto; } .vault-main-title { font-size: 2.15rem !important; font-weight: 800; line-height: 1.15 !important; letter-spacing: -0.03em; margin-top: 0.5rem; } .vault-hero-sub-text, .vault-section-header p, .vault-faq-item p { font-size: 0.95rem; line-height: 1.5; } .vault-hero-capture-form { display: flex; flex-direction: column; width: 100%; gap: 0.75rem; } .vault-capture-input-wrapper { position: relative; width: 100%; display: flex; align-items: center; } .vault-input-icon-mail { position: absolute; left: 1rem; pointer-events: none; z-index: 5; } .vault-capture-field { width: 100% !important; height: 3.5rem !important; border-radius: 6px !important; padding: 0 1rem 0 2.5rem !important; font-size: 0.95rem !important; outline: none; box-sizing: border-box; } .vault-hero-capture-form button, .vfbtn { width: 100%; height: 3.5rem !important; border-radius: 6px !important; border: none; font-size: 0.9rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .vault-section-header { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .vault-section-header h2 { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; } .dashboard-metrics-grid, .vault-feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: 100%; } .vault-feature-card { padding: 1.75rem 1.25rem; border-radius: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; box-sizing: border-box; width: 100% !important; } .vault-feature-card h3 { font-size: 1.35rem !important; font-weight: 800; word-break: break-word !important; } .vault-feature-card label { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 1rem; } .vault-feature-card label span { font-size: 0.9rem; line-height: 1.4; } .vault-card-icon-wrap { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .vault-card-icon-wrap svg { width: 18px; height: 18px; } .vault-split-layout { display: flex; flex-direction: column; gap: 2rem; width: 100%; } .vault-split-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .vault-telemetry-status-box { padding: 0.85rem; border-radius: 6px; display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; } .vault-status-indicator { width: 8px; height: 8px; border-radius: 50%; position: relative; } .vault-status-indicator.active::after { content: ""; position: absolute; width: 100%; height: 100%; background: inherit; border-radius: 50%; animation: pulseGlow 2s infinite; top: 0; left: 0; } .vault-architecture-visualization { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .visual-node { width: 100%; padding: 1.25rem; border-radius: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; } .visual-node span { font-weight: 700; font-size: 0.95rem; } .visual-node small { font-size: 0.72rem; } .vault-faq-stack { display: flex; flex-direction: column; width: 100%; } .vault-faq-item { padding: 1.25rem 0; display: flex; flex-direction: column; gap: 0.4rem; } .vault-faq-item h4 { font-size: 1.05rem; font-weight: 700; } .vault-landing-footer { width: 100%; text-align: center; font-size: 0.75rem; padding: 1.5rem 0; display: flex; flex-direction: column; gap: 0.5rem; } .vault-footer-meta-links { display: flex; gap: 1.25rem; justify-content: center; } .vault-footer-meta-links a { text-decoration: none; font-weight: 600; } .code-text { width: 100%; border-radius: 6px; padding: 12px 18px; font-weight: 600; font-family: monospace; font-size: 0.85rem; word-break: break-all; } /* 🔒 UTILITY BADGES & AUTH FORM SYSTEM */ .vault-military-badge, .vault-section-tag { padding: 5px 10px; border-radius: 4px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; width: max-content; margin-bottom:2rem;} #vault-auth-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; z-index: 99999; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.3s ease; } #vault-auth-modal-overlay.modal-open { opacity: 1; pointer-events: auto; visibility: visible; } .vault-auth-modal-card { position: relative; width: 92% !important; max-width: 440px; border-radius: 16px; padding: 2.5rem 2rem !important; box-sizing: border-box; display: flex; flex-direction: column; gap: 2rem !important; transform: translateY(15px); transition: transform 0.3s ease; } #vault-auth-modal-overlay.modal-open .vault-auth-modal-card { transform: translateY(0); } .vault-auth-close-missile { position: absolute; top: 1.25rem; right: 1.25rem; background: transparent; border: none; cursor: pointer; padding: 0.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50% !important; } .vault-auth-tab-rail { display: flex; gap: 1.5rem; width: 100%; } .vault-auth-tab-btn { background: transparent; border: none; padding-bottom: 0.75rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; position: relative; } .vault-auth-tab-btn::after { content: "" !important; position: absolute !important; bottom: -1px !important; left: 0 !important; width: 100% !important; height: 2px !important; transform: scaleX(0) !important; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .vault-auth-tab-btn.tab-active::after { transform: scaleX(1) !important; } .vault-auth-form-sector { display: none !important; width: 100% !important; flex-direction: column !important; gap: 1.5rem !important; } .vault-auth-form-sector.sector-active { display: flex !important; } .vault-input-block { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; } .form-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } .form-ctrl { width: 100%; height: 3.25rem; border-radius: 6px; padding: 0 1rem; font-size: 0.95rem; outline: none; } .vault-military-badge { padding: 6px 10px !important; border-radius: 4px !important; font-size: 0.65rem !important; /* DĂ€mpar textstorleken minimalt pĂ„ mobil */ font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; /* 🚀 CORE FIX: TillĂ„t texten att radbrytas snyggt istĂ€llet för att trycka ut layouten */ width: auto !important; max-width: 100% !important; white-space: normal !important; /* SlĂ„r ut 'nowrap' sĂ„ att lĂ„nga strĂ€ngar kan brytas */ word-break: normal !important; overflow-wrap: break-word !important; line-height: 1.4 !important; text-align: left !important; } /* SĂ€kra Ă€ven att span-taggen inuti (om du anvĂ€nder en sĂ„dan) följer med */ .vault-military-badge span { display: inline-block !important; max-width: 100% !important; white-space: normal !important; } /* Plocka bort hĂ„rdkodade gap- och paddingsfel, synka ikoner i rutorna */ .vault-input-block { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; } .vault-input-block .vault-capture-input-wrapper { position: relative; width: 100%; display: flex; align-items: center; } .vault-input-block .vault-input-icon-mail { position: absolute; left: 1.25rem; pointer-events: none; z-index: 5; transition: color 0.2s ease; } .form-ctrl { width: 100% !important; height: 3.5rem !important; border-radius: 8px !important; padding: 0 1rem 0 3rem !important; /* Ger plats för ikonen till vĂ€nster */ font-size: 0.95rem !important; outline: none; font-family: inherit; box-sizing: border-box !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } /* ========================================================================== đŸŽ›ïž STRUCTURAL LAYER — HYBRID 2FA INGRESS PERIMETER ========================================================================== */ #auth-login-2fa-perimeter { display: none; /* Dold transient i minnet som standard */ flex-direction: column !important; gap: 1.25rem !important; width: 100% !important; } /* JavaScript-aktiverad tull öppnar upp flödet helgrönt */ #auth-login-2fa-perimeter.perimeter-2fa-active { display: flex !important; animation: authSectorSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .vault-auth-2fa-telemetry-text { font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.25rem; padding:1rem; } #text-masked-phone-target { font-family: monospace; font-weight: 700; padding: 2px 6px; border-radius: 4px; } /* Tvinga PIN-kods-fĂ€ltet att andas ren kod och stram symmetri */ #inp-auth-login-2fa { font-family: monospace !important; font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: 0.35em !important; /* Ger en brutal, utspridd krypterings-look */ text-align: center !important; padding-left: 1.6rem !important; /* Centrerar den utspridda texten i fĂ€ltet */ } body.dark-theme .vault-auth-2fa-telemetry-text { color: #64748B; } body.dark-theme #text-masked-phone-target { color: #00FF66; /* Telefon-hashen lyser kiselgrönt */ background: #07080E; border: 1px solid rgba(255, 255, 255, 0.04); } body.dark-theme #inp-auth-login-2fa { color: #00FF66 !important; background: #07080E !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } body.dark-theme #inp-auth-login-2fa:focus { border-color: #00FF66 !important; box-shadow: 0 0 0 4px rgba(0, 255, 102, 0.04) !important; } body.light-theme .vault-auth-2fa-telemetry-text { color: #64748B; } body.light-theme #text-masked-phone-target { color: #0A2540; /* Solid mörkröd/blĂ„ bank-ton */ background: #F1F5F9; border: 1px solid #E2E8F0; } body.light-theme #inp-auth-login-2fa { color: #0A2540 !important; background: #ffffff !important; border: 1px solid #CBD5E1 !important; } body.light-theme #inp-auth-login-2fa:focus { border-color: #0A2540 !important; box-shadow: 0 0 0 4px rgba(10, 37, 64, 0.04) !important; } /* SYSTEM ERROR BARRIER */ #auth-error-display { font-size: 0.82rem !important; font-weight: 600 !important; color: #EF4444 !important; display: none; border: 1px solid #EF4444; padding:1rem; text-align: center; background-color: #2d0000; } #auth-error-display.visible { display: block !important; } @keyframes authSectorSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* đŸ“± BOTTENBALK (Endast aktiv pĂ„ mobil) */ .vault-bottom-command-rail { position: fixed !important; bottom: 0; left: 0; width: 100vw; height: 64px; display: flex !important; justify-content: space-around !important; align-items: center !important; z-index: 9999; } .vault-rail-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.15rem !important; background: transparent; border: none; cursor: pointer; width: 25% !important; height: 100% !important; } .vault-rail-item svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; fill: none !important; display: block !important; margin: 0 auto !important; flex-shrink: 0 !important; } .vault-rail-item span { font-size: 0.65rem !important; display: block !important; font-weight: 600; } /* ========================================================================== đŸ–„ïž DESKTOP & LAPTOP SKÄRMMATRIS (≄ 1024px) ========================================================================== */ @media (min-width: 1024px) { /* LĂ„ser upp fullstĂ€ndig linjĂ€r rullning för laptops */ .vault-app-viewport { width: 100% !important; height: auto !important; margin-top: 64px !important; overflow: visible !important; touch-action: auto !important; } /* 1. Dölj skrivbordsmenyn stenhĂ„rt pĂ„ mobilen sĂ„ dashboard-innehĂ„llet fĂ„r plats (Fixar Bild 1) */ .vault-sidebar { display: none !important; } /* 2. NollstĂ€ll dashboard-marginalen pĂ„ mobilen eftersom sidomenyn Ă€r borta (Fixar Bild 1) */ .vault-dashboard-wrapper .vault-app-viewport { margin-left: 0 !important; width: 100% !important; } /* 3. LĂ€gg till skyddande inre marginaler sĂ„ inte innehĂ„llet klistras mot skĂ€rmkanterna (Fixar Bild 1 & 4) */ .vault-hero-content-mesh, .vault-section-inner { width: 100% !important; max-width: 100% !important; padding: 0 1.25rem !important; /* Ger perfekt andningsrum pĂ„ sidorna */ box-sizing: border-box !important; } /* 4. Göm desktop-lĂ€nkarna i headern pĂ„ mobilen sĂ„ logotypen stannar pĂ„ sin plats (Fixar Bild 4) */ .desktop-nav-links { display: none !important; } /* 1. Aktivera sidomenyn enbart pĂ„ bĂ€rbara datorer och stora skĂ€rmar */ .vault-sidebar { display: flex !important; } /* 2. ÅterstĂ€ll utrymmet till vĂ€nster för instrumentpanelen pĂ„ datorn */ .vault-dashboard-wrapper .vault-app-viewport { margin-left: 240px !important; width: calc(100% - 240px) !important; } /* 3. Visa navigeringen i sidhuvudet enbart pĂ„ desktop (Fixar Bild 3) */ .desktop-nav-links { display: flex !important; } /* Landningssidans vyer staplas linjĂ€rt pĂ„ datorer */ .vault-app-viewport > .vault-app-view { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; overflow: visible !important; touch-action: auto !important; padding: 4.5rem 4.5rem !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: block !important; } nav.vault-app-header { padding: 0 4rem !important; height: 64px !important; } .logo { font-size: 1.15rem !important; gap: 0.5rem !important; } .logo svg { width: 18px !important; height: 18px !important; } .desktop-nav-links { display: flex !important; gap: 2rem; margin-right: 1.5rem; } .nav-link-item { text-decoration: none; font-size: 0.88rem; font-weight: 400; transition: color 0.15s ease; } .vault-header-right-actions { gap: 1.25rem !important; } .vfbtn-theme-toggle, .vfbtn-gate-trigger { font-size: 0.88rem !important; } .vfbtn-gate-trigger { padding: 6px 14px !important; border-radius: 6px; border: 1px solid; } .vault-bottom-command-rail { display: none !important; } /* INLOGGADE: TRANSFORMATION TILL FIXERAD SIDEBAR */ .vault-dashboard-wrapper { min-height: 100vh; margin-top: 0 !important; padding-bottom: 0; } .vault-dashboard-wrapper .vault-sidebar { display: flex !important; position: fixed !important; top: 0 !important; left: 0; bottom: 0; width: 240px; flex-direction: column; justify-content: space-between; padding: 1.5rem 0; z-index: 999; } .sidebar-brand-zone { padding: 0.5rem 1.5rem 2rem 1.5rem; } .sidebar-menu-links { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; flex-grow: 1; } .sidebar-footer-zone { padding: 1rem 1.5rem; border-top: 1px solid; } .sidebar-footer-zone .vfbtn-theme-toggle { width: 100%; padding: 8px; border: 1px solid; border-radius: 6px; } .vault-sidebar-item { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 0.85rem 1.5rem; background: transparent; border: none; border-left: 3px solid transparent; font-size: 0.95rem; font-weight: 600; text-align: left; cursor: pointer; transition: all 0.2s ease; } .vault-sidebar-item svg { width: 18px; height: 18px; stroke: currentColor; fill: none; } /* Viewporten anpassas klockrent bredvid den fixerade sidomenyn */ .vault-dashboard-wrapper .vault-app-viewport { margin-left: 240px !important; width: calc(100% - 240px) !important; margin-top: 0 !important; } .vault-dashboard-wrapper .vault-app-view { padding: 6rem 4rem !important; gap: 2rem; } /* STRUKTURELLA GRIDS FÖR LAPTOPS */ .vault-hero-container { min-height: calc(100vh - 64px) !important; display: flex !important; align-items: center !important; } .vault-hero-content-mesh { max-width: 720px !important; gap: 1.75rem !important; margin: 0 auto !important; } .vault-main-title { font-size: 4.25rem !important; line-height: 1.08 !important; margin-top: 0 !important; } .vault-hero-sub-text { font-size: 1.25rem !important; max-width: 680px !important; } .vault-hero-capture-form { flex-direction: row !important; max-width: 640px !important; gap: 0 !important; margin-top: 2rem !important; } .vault-capture-field { border-radius: 8px 0 0 8px !important; } .vault-hero-capture-form button { width: auto !important; min-width: 160px !important; height: 3.5rem !important; border-radius: 0 8px 8px 0 !important; flex-shrink: 0 !important; } .vault-section-inner { max-width: 1100px !important; gap: 3.5rem !important; } .vault-section-header h2 { font-size: 2.5rem !important; } .dashboard-metrics-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem; } .vault-feature-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem; } .vault-feature-card { padding: 3rem 2.25rem !important; } .vault-split-layout { grid-template-columns: 1fr 1fr !important; gap: 4rem !important; display: grid !important; } .vault-architecture-visualization { flex-direction: row !important; max-width: 100% !important; gap: 2rem !important; } .visual-node { width: 280px !important; } .vault-landing-footer { text-align: left !important; padding: 4rem 0 2rem 0 !important; flex-direction: row !important; justify-content: space-between !important; display: flex !important; } } @keyframes pulseGlow { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } /* ========================================================================== ⚫ THE TRUE OBSIDIAN DARK MATRIX — COLOR VALUE PROPERTIES ========================================================================== */ body.dark-theme { background-color: #06070B !important; color: #F1F5F9 !important; } body.dark-theme nav.vault-app-header { background-color: #06070B; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } body.dark-theme .logo { color: #ffffff; } body.dark-theme .logo svg { stroke: #00FF66; } body.dark-theme .nav-link-item { color: #00ff66; } body.dark-theme .nav-link-item:hover { color: #ffffff; } body.dark-theme .vfbtn-gate-trigger { border-color: rgba(255, 255, 255, 0.15); color: #ffffff; } body.dark-theme .vfbtn-gate-trigger:hover { border-color: #00FF66; color: #00FF66; } body.dark-theme .vault-feature-card { background: #0C0E17; border: 1px solid rgba(255, 255, 255, 0.04); } body.dark-theme .vault-capture-field { background: #0C0E17; border: 1px solid rgba(255, 255, 255, 0.08); color: #ffffff; } body.dark-theme .vault-capture-field:focus { border-color: #00FF66; box-shadow: 0 0 0 4px rgba(0, 255, 102, 0.04); } body.dark-theme .vault-input-icon-mail { color: #475569; } body.dark-theme .vfbtn, body.dark-theme .vault-hero-capture-form button { background-color: #00FF66; color: #05050A; box-shadow: 0 0 20px rgba(0, 255, 102, 0.15); } body.dark-theme .vault-bottom-command-rail { background: rgba(6, 7, 11, 0.95); backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 255, 255, 0.05); } body.dark-theme .vault-rail-item { color: #475569; } body.dark-theme .vault-rail-item.active { color: #00FF66; } body.dark-theme .vault-military-badge { background: rgba(0, 255, 102, 0.08); color: #00FF66; border: 1px solid rgba(0, 255, 102, 0.15); } body.dark-theme .vault-section-tag { color: #00E5FF; background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.15); } body.dark-theme .vault-hero-sub-text, body.dark-theme .vault-section-header p, body.dark-theme .vault-faq-item p { color: #94A3B8; } body.dark-theme .vault-telemetry-status-box { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); } body.dark-theme .vault-status-indicator { background-color: #10B981; } body.dark-theme .visual-node { background: #0C0E17; border: 1px solid rgba(255, 255, 255, 0.05); color: #ffffff; } body.dark-theme .visual-node.centrally-locked { border-color: rgba(239, 68, 68, 0.3); } body.dark-theme .visual-node.sovereign-sharded { border-color: #00FF66; box-shadow: 0 0 15px rgba(0, 255, 102, 0.1); } body.dark-theme .visual-node small { color: #64748B; } body.dark-theme .vault-faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } body.dark-theme .vault-faq-item h4 { color: #ffffff; } body.dark-theme .vault-landing-footer { color: #64748B; } body.dark-theme .vault-footer-meta-links a { color: #64748B; } body.dark-theme .vault-footer-meta-links a:hover { color: #ffffff; } body.dark-theme .code-text { background: #07080E; border: 1px solid rgba(255, 255, 255, 0.08); color: #00FF66; } /* 🔒 AUTH MODAL & SIDEBAR COMPLEX FOR DARK THEME */ body.dark-theme #vault-auth-modal-overlay { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(16px); } body.dark-theme .vault-auth-modal-card { background: #0C0E17; border: 1px solid rgba(255, 255, 255, 0.05); } body.dark-theme .vault-auth-close-missile { color: #64748B; } body.dark-theme .vault-auth-close-missile:hover { background: rgba(255, 255, 255, 0.03); color: #ffffff; } body.dark-theme .vault-auth-tab-rail { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } body.dark-theme .vault-auth-tab-btn { color: #475569; } body.dark-theme .vault-auth-tab-btn.tab-active { color: #ffffff; } body.dark-theme .vault-auth-tab-btn.tab-active::after { background-color: #00FF66; } body.dark-theme .form-label { color: #64748B; } body.dark-theme .form-ctrl { background: #07080E; border: 1px solid rgba(255, 255, 255, 0.08); color: #ffffff; } body.dark-theme .form-ctrl:focus { border-color: #00FF66; } body.dark-theme .vault-sidebar { background: #0A0B12; border-right: 1px solid rgba(255, 255, 255, 0.03); } body.dark-theme .sidebar-footer-zone { border-top-color: rgba(255, 255, 255, 0.03); } body.dark-theme .sidebar-footer-zone .vfbtn-theme-toggle { border-color: rgba(255, 255, 255, 0.1); color: #64748B; } body.dark-theme .vault-sidebar-item { color: #64748B; } body.dark-theme .vault-sidebar-item:hover { background: rgba(255, 255, 255, 0.02); color: #ffffff; } body.dark-theme .vault-sidebar-item.active { background: rgba(0, 255, 102, 0.06); color: #00FF66; border-left-color: #00FF66; } body.dark-theme .form-ctrl { background: #07080E; border: 1px solid rgba(255, 255, 255, 0.08); color: #ffffff; } body.dark-theme .form-ctrl:focus { border-color: #00FF66; box-shadow: 0 0 0 4px rgba(0, 255, 102, 0.04); } body.dark-theme .vault-input-block:focus-within .vault-input-icon-mail { color: #00FF66 !important; /* Ikonen lyser grönt vid fokus */ } body.dark-theme .vault-auth-2fa-telemetry-text { background-color: #07080E; border: 1px solid rgba(255, 255, 255, 0.04); color: #94A3B8; } body.dark-theme #auth-error-display { color: #FF4A4A; } /* ========================================================================== âšȘ THE TRUE SNOW TITANIUM MATRIX — COLOR VALUE PROPERTIES ========================================================================== */ body.light-theme { background-color: #F8FAFC !important; color: #0F172A !important; } body.light-theme nav.vault-app-header { background-color: #F8FAFC; border-bottom: 1px solid #E2E8F0; } body.light-theme .logo { color: #0A2540; } body.light-theme .logo svg { stroke: #0A2540; } body.light-theme .nav-link-item { color: #64748B; } body.light-theme .nav-link-item:hover { color: #0A2540; } body.light-theme .vfbtn-gate-trigger { border-color: #CBD5E1; color: #0A2540; } body.light-theme .vfbtn-gate-trigger:hover { border-color: #0A2540; background: rgba(10, 37, 64, 0.02); } body.light-theme .vault-feature-card { background: #ffffff; border: 1px solid #E2E8F0; box-shadow: 0 4px 20px rgba(10, 37, 64, 0.005); } body.light-theme .vault-capture-field { background: #ffffff; border: 1px solid #CBD5E1; color: #0F172A; } body.light-theme .vault-capture-field:focus { border-color: #0A2540; box-shadow: 0 0 0 4px rgba(10, 37, 64, 0.04); } body.light-theme .vault-input-icon-mail { color: #94A3B8; } body.light-theme .vfbtn, body.light-theme .vault-hero-capture-form button { background-color: #0A2540; color: #ffffff; } body.light-theme .vault-bottom-command-rail { background: #ffffff; border-top: 1px solid #E2E8F0; } body.light-theme .vault-rail-item { color: #94A3B8; } body.light-theme .vault-rail-item.active { color: #0A2540; } body.light-theme .vault-military-badge { background: #FEF3C7; color: #B45309; } body.light-theme .vault-section-tag { color: #3B82F6; background: rgba(59, 130, 246, 0.06); border: 1px solid rgba(59, 130, 246, 0.15); } body.light-theme .vault-hero-sub-text, body.light-theme .vault-section-header p, body.light-theme .vault-faq-item p { color: #64748B; } body.light-theme .vault-telemetry-status-box { background: #ffffff; border: 1px solid #E2E8F0; } body.light-theme .vault-status-indicator { background-color: #10B981; } body.light-theme .visual-node { background: #ffffff; border: 1px solid #E2E8F0; color: #0A2540; } body.light-theme .visual-node.centrally-locked { border-color: #FCA5A5; background: #FEF2F2; } body.light-theme .visual-node.sovereign-sharded { border-color: #3B82F6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08); } body.light-theme .visual-node small { color: #64748B; } body.light-theme .vault-faq-item { border-bottom: 1px solid #E2E8F0; } body.light-theme .vault-faq-item h4 { color: #0A2540; } body.light-theme .vault-landing-footer { color: #94A3B8; } body.light-theme .vault-footer-meta-links a { color: #94A3B8; } body.light-theme .vault-footer-meta-links a:hover { color: #0A2540; } body.light-theme .code-text { background: #F1F5F9; border: 1px solid #E2E8F0; color: #0F172A; } /* 🔒 AUTH MODAL & SIDEBAR COMPLEX FOR LIGHT THEME */ body.light-theme #vault-auth-modal-overlay { background-color: rgba(15, 23, 42, 0.15); backdrop-filter: blur(12px); } body.light-theme .vault-auth-modal-card { background: #ffffff; border: 1px solid #E2E8F0; box-shadow: 0 20px 50px rgba(10, 37, 64, 0.08); } body.light-theme .vault-auth-close-missile { color: #94A3B8; } body.light-theme .vault-auth-close-missile:hover { background: #F1F5F9; color: #0F172A; } body.light-theme .vault-auth-tab-rail { border-color: #E2E8F0; } body.light-theme .vault-auth-tab-btn { color: #94A3B8; } body.light-theme .vault-auth-tab-btn.tab-active { color: #0A2540; } body.light-theme .vault-auth-tab-btn.tab-active::after { background-color: #0A2540; } body.light-theme .form-label { color: #64748B; } body.light-theme .form-ctrl { background: #ffffff; border: 1px solid #CBD5E1; color: #0F172A; } body.light-theme .form-ctrl:focus { border-color: #0A2540; } body.light-theme .vault-sidebar { background: #ffffff; border-right: 1px solid #E2E8F0; } body.light-theme .sidebar-footer-zone { border-top-color: #E2E8F0; } body.light-theme .sidebar-footer-zone .vfbtn-theme-toggle { border-color: #CBD5E1; color: #64748B; } body.light-theme .vault-sidebar-item { color: #64748B; } body.light-theme .vault-sidebar-item:hover { background: #F8FAFC; color: #0A2540; } body.light-theme .vault-sidebar-item.active { background: rgba(10, 37, 64, 0.04); color: #0A2540; border-left-color: #0A2540; } body.light-theme .form-ctrl { background: #ffffff; border: 1px solid #CBD5E1; color: #0F172A; } body.light-theme .form-ctrl:focus { border-color: #0A2540; box-shadow: 0 0 0 4px rgba(10, 37, 64, 0.04); } body.light-theme .vault-input-block:focus-within .vault-input-icon-mail { color: #0A2540 !important; /* Ikonen mörknar vid fokus */ } body.light-theme .vault-auth-2fa-telemetry-text { background-color: #F8FAFC; border: 1px solid #E2E8F0; color: #334155; } body.light-theme #auth-error-display { color: #D92D2D; } @media (min-width: 1024px) { .vault-app-view{margin-top:3rem; margin-bottom:6rem;} /* 1. Aktivera sidomenyn enbart pĂ„ bĂ€rbara datorer och stora skĂ€rmar */ .vault-sidebar { display: flex !important; } /* 2. ÅterstĂ€ll utrymmet till vĂ€nster för instrumentpanelen pĂ„ datorn */ .vault-dashboard-wrapper .vault-app-viewport { margin-left: 240px !important; width: calc(100% - 240px) !important; } /* 3. Visa navigeringen i sidhuvudet enbart pĂ„ desktop (Fixar Bild 3) */ .desktop-nav-links { display: flex !important; } #mobile-nav{opacity: 0; display:none;} .vault-dashboard-wrapper .vault-app-view { display: flex !important; /* Tvingar fram alla vyer under varandra pĂ„ datorn */ position: relative !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; width: 100%; height: auto; padding: 6rem 4rem !important; box-sizing: border-box; flex-direction: column; gap: 1.5rem; } /* 1. Skapa ett snyggt vertikalt andningsrum för landningssidans vyer pĂ„ mobilen (Fixar Bild 1) */ .vault-app-viewport > .vault-app-view { padding-top: 6rem !important; /* Flyttar ner rubriken "Divide your trust" sĂ„ den inte krockar med loggan */ padding-bottom: 1rem !important; /* Ger luft innan bottenmenyn */ } /* 2. Se till att dashboard-vyerna pĂ„ mobilen ocksĂ„ har samma sköna luft i toppen (Fixar Bild 4) */ .vault-dashboard-wrapper .vault-app-view { padding-top: 2rem !important; padding-bottom: 6rem !important; /* Extra utrymme sĂ„ inte bottenbalken klipper sista kortet */ } } /* ========================================================================== đŸ“± MOBIL-AVSTÅND KORRIGERINGAR (< 1024px) ========================================================================== */ @media (max-width: 1023px){ .vault-dashboard-wrapper{margin-top:0;} .vault-app-viewport{margin-top: 0px !important;} .vault-app-viewport { position: relative !important; width: 100vw !important; height: calc(100vh - 124px) !important; margin-top: 60px !important; overflow: hidden !important; /* LĂ„ser fast ramen i sidled */ /* ✹ TRICKET: TillĂ„t skroll upp/ned, men lĂ„t JS ta hand om sidledssvep */ touch-action: pan-y !important; box-sizing: border-box !important; } .vault-dashboard-wrapper .vault-app-view { display: none !important; /* Dölj alla vyer som standard pĂ„ mobilen */ width: 100%; height: auto; box-sizing: border-box; flex-direction: column; gap: 1.5rem; } /* Visa enbart den vy som JS sĂ€tter som aktiv vid svep */ .vault-dashboard-wrapper .vault-app-view.active { display: flex !important; } /* 1. Skapa ett snyggt vertikalt andningsrum för landningssidans vyer pĂ„ mobilen (Fixar Bild 1) */ .vault-app-viewport > .vault-app-view { padding-top: 6rem !important; /* Flyttar ner rubriken "Divide your trust" sĂ„ den inte krockar med loggan */ padding-bottom: 1rem !important; /* Ger luft innan bottenmenyn */ } /* 2. Se till att dashboard-vyerna pĂ„ mobilen ocksĂ„ har samma sköna luft i toppen (Fixar Bild 4) */ .vault-dashboard-wrapper .vault-app-view { padding-top: 2rem !important; padding-bottom: 6rem !important; /* Extra utrymme sĂ„ inte bottenbalken klipper sista kortet */ } .vault-ping-telemetry-box{margin-bottom:2.5rem;} } /* ========================================================================== đŸŠŸ THE VOLATILE TURNSTILE INGRESS CONTROLLER (V1350.0.0 - DUAL-THEME) ========================================================================== */ /* 🌌 1. CORE SPATIAL LAYOUT (Gemensamma dimensioner transient i RAM) */ #turnstile-loading-screen { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; z-index: 99999 !important; /* LĂ„ser fast skĂ€rmen absolut överst innan JIT-booten */ box-sizing: border-box !important; transition: opacity 0.9s ease-in-out, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Tona ut vackert nĂ€r tullen slĂ€pper igenom! */ } #turnstile-loading-screen.loading-screen-dismantled { opacity: 0 !important; /* Tvingar fram fullstĂ€ndig osynlighet */ pointer-events: none !important; /* SlĂ€pper igenom alla klick direkt till panelen */ transform: scale(1.02) !important; /* Subtil, exklusiv ut-zoomnings-haptik! */ } #turnstile-loading-screen .vault-core-shield-logo { width: 48px !important; height: 48px !important; margin-bottom: 2rem !important; animation: vaultShieldPulse 1.6s ease-in-out infinite !important; /* Mjuk, stratosfĂ€risk glöd-puls! */ } #turnstile-loading-screen .vault-radar-rail { width: 160px !important; height: 2px !important; border-radius: 1px !important; overflow: hidden !important; margin-bottom: 2.5rem !important; position: relative !important; } #turnstile-loading-screen .vault-fluid-radar-line { position: absolute !important; height: 100% !important; width: 60px !important; animation: vaultRadarSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; /* Glider i gudalika 60 FPS */ } #turnstile-loading-screen h3 { font-size: 1.1rem !important; font-weight: 700 !important; margin-bottom: 0.5rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } #turnstile-loading-screen p { font-size: 0.88rem !important; max-width: 400px !important; text-align: center !important; line-height: 1.5 !important; margin: 0 !important; } /* ========================================================================== âšȘ LIGHT THEME SKIN: SNOW TITANIUM PERIMETER ========================================================================== */ body.light-theme #turnstile-loading-screen { background-color: #F8FAFC !important; /* Det sanna, krispiga Snow Titanium-golvet! */ } body.light-theme #turnstile-loading-screen .vault-core-shield-logo { color: #0A2540 !important; /* Solid Carbon Blue */ } body.light-theme #turnstile-loading-screen .vault-radar-rail { background-color: #E2E8F0 !important; /* Den dĂ€mpade baslinjen */ } body.light-theme #turnstile-loading-screen .vault-fluid-radar-line { background: linear-gradient(to right, transparent, #0A2540, transparent) !important; /* Monokrom laser-strimma */ } body.light-theme #turnstile-loading-screen h3 { color: #0A2540 !important; } body.light-theme #turnstile-loading-screen p { color: #64748B !important; } /* ========================================================================== ⚫ DARK THEME SKIN: OBSIDIAN QUARTZ METRICS (THE FINAL DEFIANCE) ========================================================================== */ body.dark-theme #turnstile-loading-screen { background-color: #05050A !important; /* Det sanna Obsidian Black – totalt mörker */ } body.dark-theme #turnstile-loading-screen .vault-core-shield-logo { color: #00FF66 !important; /* 🚀 LASER-GRÖN: Skölden lyser direct ur mörkret! */ filter: drop-shadow(0 0 15px rgba(0, 255, 102, 0.3)) !important; /* Magisk kiselglöd */ } body.dark-theme #turnstile-loading-screen .vault-radar-rail { background-color: rgba(255, 255, 255, 0.04) !important; /* Extremt dĂ€mpat mörkt spĂ„r */ } body.dark-theme #turnstile-loading-screen .vault-fluid-radar-line { background: linear-gradient(to right, transparent, #00E5FF, transparent) !important; /* 🚀 IS-BLÅ CYAN: Elektrisk radarstrimma över fibern! */ } body.dark-theme #turnstile-loading-screen h3 { color: #ffffff !important; /* Platinum White rubrik */ text-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important; } body.dark-theme #turnstile-loading-screen p { color: #94A3B8 !important; /* Krispig ljusskiffer för undertexten */ } /* ========================================================================== 🔄 CORE ANIMATIONS (HĂ„rdvaruaccelererade via GPU-celler) ========================================================================== */ @keyframes vaultShieldPulse { 0% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.05); opacity: 1; filter: brightness(1.1); } 100% { transform: scale(1); opacity: 0.9; } } @keyframes vaultRadarSweep { 0% { left: -60px; } 100% { left: 160px; } } .vault-feature-card h3 { font-size: 1.35rem !important; font-weight: 800; /* Ändra frĂ„n 'break-all' eller 'word-break: break-word' till: */ word-break: normal !important; overflow-wrap: break-word !important; /* LĂ„ter lĂ„nga ord brytas enbart om de Ă€r absolut nödvĂ€ndigt */ line-height: 1.3 !important; width: 100%; } /* ========================================================================== 🔒 FIX: CLOUDFLARE TURNSTILE INGRESS CONTROLLER ========================================================================== */ .cf-turnstile { width: 100% !important; margin: 0.25rem 0 !important; display: flex; justify-content: center; } /* Om skĂ€rmen Ă€r under 380px bred krymper vi Turnstile sĂ„ den aldrig klipper */ @media (max-width: 380px) { .cf-turnstile > iframe { transform: scale(0.88) !important; transform-origin: center center !important; } } /* Strukturella element för Forge-vyn */ section#view-forge .form-ctrl.select-custom { appearance: none; cursor: pointer; } section#view-forge .form-ctrl-textarea { width: 100% !important; min-height: 5.5rem !important; border-radius: 8px !important; padding: 1rem !important; font-size: 0.95rem !important; outline: none; font-family: inherit; resize: vertical; box-sizing: border-box !important; transition: all 0.2s ease; } section#view-forge.form-ctrl-textarea:focus{border:0;} /* Filuppladdningszon */ section#view-forge .vault-file-dropzone { width: 100%; padding: 1.75rem; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; text-align: center; position: relative; box-sizing: border-box; transition: all 0.2s ease; } section#view-forge .vault-file-dropzone svg { transition: transform 0.2s ease; } section#view-forge .vault-file-dropzone:hover svg { transform: translateY(-2px); } section#view-forge .dropzone-text { font-size: 0.85rem; } section#view-forge .browse-link { text-decoration: underline; } /* Fil-badge vid vald fil */ section#view-forge .file-badge-pill { display: none; /* JS visar denna */ align-items: center; gap: 0.5rem; padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; margin-top: 0.25rem; animation: authSectorSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1); } section#view-forge .file-badge-pill button { background: transparent; border: none; font-size: 1.1rem; cursor: pointer; font-weight: 700; color: inherit; line-height: 1; } /* Avancerade detaljer (Details/Summary) */ section#view-forge .vault-advanced-details { width: 100%; cursor: pointer; } section#view-forge .vault-advanced-details summary { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0; outline: none; } section#view-forge .advanced-details-content { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem 0 0.5rem 0; cursor: default; } section#view-forge .slider-control-group { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; } section#view-forge .slider-labels { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; } section#view-forge .vault-range-slider { width: 100%; height: 6px; border-radius: 3px; appearance: none; outline: none; cursor: pointer; } section#view-forge .vault-range-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; transition: transform 0.1s ease; } section#view-forge .vault-range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } section#view-forge textarea{ min-height: 5rem; padding: 1rem; background:transparent; } body.dark-theme .form-ctrl-textarea { background: #07080E; border: 1px solid rgba(255, 255, 255, 0.08); color: #ffffff; } body.dark-theme .form-ctrl-textarea:focus { border-color: #00FF66; box-shadow: 0 0 0 4px rgba(0, 255, 102, 0.04); } body.dark-theme .vault-file-dropzone { border: 2px dashed rgba(255, 255, 255, 0.1); background: #07080E; color: #64748B; } body.dark-theme .vault-file-dropzone:hover { border-color: #00FF66; color: #94A3B8; } body.dark-theme .file-badge-pill { background: rgba(0, 255, 102, 0.08); color: #00FF66; border: 1px solid rgba(0, 255, 102, 0.15); } body.dark-theme .vault-advanced-details summary { color: #64748B; } body.dark-theme .vault-advanced-details summary:hover { color: #ffffff; } body.dark-theme .vault-range-slider { background: rgba(255, 255, 255, 0.08); } body.dark-theme .vault-range-slider::-webkit-slider-thumb { background: #00FF66; box-shadow: 0 0 10px rgba(0, 255, 102, 0.4); } body.dark-theme textarea{background: rgba(0, 255, 102, 0.08); border: 1px solid rgba(0, 255, 102, 0.15); color: #00FF66;} body.light-theme .form-ctrl-textarea { background: #ffffff; border: 1px solid #CBD5E1; color: #0F172A; } body.light-theme .form-ctrl-textarea:focus { border-color: #0A2540; box-shadow: 0 0 0 4px rgba(10, 37, 64, 0.04); } body.light-theme .vault-file-dropzone { border: 2px dashed #CBD5E1; background: #F8FAFC; color: #64748B; } body.light-theme .vault-file-dropzone:hover { border-color: #0A2540; color: #0A2540; } body.light-theme .file-badge-pill { background: rgba(10, 37, 64, 0.04); color: #0A2540; border: 1px solid #E2E8F0; } body.light-theme .vault-advanced-details summary { color: #64748B; } body.light-theme .vault-advanced-details summary:hover { color: #0A2540; } body.light-theme .vault-range-slider { background: #E2E8F0; } body.light-theme .vault-range-slider::-webkit-slider-thumb { background: #0A2540; } body.light-theme textarea{ background: rgba(10, 37, 64, 0.04); border: 1px solid #E2E8F0; color: #0A2540;} div.vault-feature-card p{font-size:1rem !important;} #vault-forge-system-form .vfbtn, .vault-section-inner .vfbtn, #btn-submit-sudo-unlock{ font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.dark-theme #vault-forge-system-form .vfbtn:hover, body.dark-theme .vault-section-inner .vfbtn:hover, body.dark-theme #btn-submit-sudo-unlock:hover { background-color: #00FF66 !important; box-shadow: 0 0 25px rgba(0, 255, 102, 0.3) !important; /* Ökar glöden enbart vid hover */ } /* ========================================================================== đŸŽ›ïž HIGH-CLASS STRUCTURAL LAYER — PREMIUM VAULT PEERS TABLE ========================================================================== */ .vault-table-card .vault-hero-sub-text{font-size: 1rem !important;} .vault-table-card { padding: 0 !important; /* LĂ„ter tabellen flyta ut spikrakt mot kortets kanter */ overflow: hidden !important; } .vault-table-header-zone { padding: 1.75rem 1.5rem 1.25rem 1.5rem !important; display: flex; flex-direction: column; gap: 0.25rem; } .vault-table-responsive-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .vault-peers-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem; min-width: 640px; /* Förhindrar att tabellen mosas ihop pĂ„ mobilen */ } .vault-peers-table th, .vault-peers-table td { padding: 1rem 1.5rem !important; vertical-align: middle !important; box-sizing: border-box; } .vault-peers-table th { font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } .peer-identity-cell { display: flex !important; flex-direction: column !important; gap: 0.2rem !important; } .peer-identity-cell strong { font-size: 0.92rem; font-weight: 700; } .peer-identity-cell small { font-size: 0.78rem; font-family: monospace; } .table-inline-code { font-family: monospace !important; font-weight: 600 !important; font-size: 0.82rem !important; padding: 4px 8px !important; border-radius: 4px !important; letter-spacing: 0.02em; } /* Premium Status Badges */ .peer-status-pill { font-size: 0.68rem !important; font-weight: 700 !important; padding: 4px 8px !important; border-radius: 4px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; display: inline-block !important; border: 1px solid transparent; } /* Strama, sofistikerade Revoke-knappar */ .btn-table-action-danger { background: transparent !important; border: 1px solid transparent !important; padding: 5px 12px !important; border-radius: 4px !important; font-size: 0.78rem !important; font-weight: 700 !important; cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* 2. SĂ€kra perfekt centrerad text inuti tabellens Revoke-knappar */ .btn-table-action-danger { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; height: 1.75rem !important; /* LĂ„ser höjden för stram symmetri */ } /* Dark Mode: The Obsidian Telemetry Matrix */ body.dark-theme .vault-table-header-zone { border-bottom: 1px solid rgba(255, 255, 255, 0.03); } body.dark-theme .vault-peers-table th { color: #475569 !important; background: #090B12 !important; /* LĂ€tt mörkare remsa i toppen */ border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; } body.dark-theme .vault-peers-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important; } /* Snygg subtil zebra-randning som ger lyxigt djup */ body.dark-theme .vault-peers-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.01) !important; } body.dark-theme .peer-identity-cell strong { color: #ffffff; } body.dark-theme .peer-identity-cell small { color: #475569; } body.dark-theme .table-inline-code { background: #07080E !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; color: #00FF66 !important; } /* Cyberpunk Neon Glow-piller för mörkt lĂ€ge */ body.dark-theme .peer-status-pill.verified { background: rgba(0, 255, 102, 0.06) !important; color: #00FF66 !important; border-color: rgba(0, 255, 102, 0.15) !important; box-shadow: 0 0 10px rgba(0, 255, 102, 0.03); } body.dark-theme .peer-status-pill.opt-out { background: rgba(59, 130, 246, 0.06) !important; color: #3B82F6 !important; border-color: rgba(59, 130, 246, 0.15) !important; } body.dark-theme .peer-status-pill.rejected { background: rgba(239, 68, 68, 0.06) !important; color: #FF4A4A !important; border-color: rgba(239, 68, 68, 0.15) !important; } body.dark-theme .peer-status-pill.pending { background: rgba(245, 166, 35, 0.06) !important; color: #F5A623 !important; border-color: rgba(245, 166, 35, 0.15) !important; } /* Revoke-knapparnas mörka hot-zone */ body.dark-theme .btn-table-action-danger { border-color: rgba(255, 255, 255, 0.04) !important; color: #64748B !important; } body.dark-theme .btn-table-action-danger:hover { background: rgba(239, 68, 68, 0.08) !important; border-color: #EF4444 !important; color: #ffffff !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.15); } /* Light Mode: The Snow Titanium Matrix */ body.light-theme .vault-table-header-zone { border-bottom: 1px solid #E2E8F0; } body.light-theme .vault-peers-table th { color: #94A3B8 !important; background: #F8FAFC !important; border-bottom: 1px solid #E2E8F0 !important; } body.light-theme .vault-peers-table td { border-bottom: 1px solid #F1F5F9 !important; } body.light-theme .vault-peers-table tbody tr:nth-child(even) { background: rgba(10, 37, 64, 0.01) !important; } body.light-theme .peer-identity-cell strong { color: #0A2540; } body.light-theme .peer-identity-cell small { color: #94A3B8; } body.light-theme .table-inline-code { background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important; color: #0A2540 !important; } /* Strama, klara piller för ljust lĂ€ge */ body.light-theme .peer-status-pill.verified { background: #D1FAE5 !important; color: #065F46 !important; border-color: #A7F3D0 !important; } body.light-theme .peer-status-pill.opt-out { background: #DBEAFE !important; color: #1E40AF !important; border-color: #BFDBFE !important; } body.light-theme .peer-status-pill.rejected { background: #FEE2E2 !important; color: #991B1B !important; border-color: #FCA5A5 !important; } body.light-theme .peer-status-pill.pending { background: #FEF3C7 !important; color: #92400E !important; border-color: #FDE68A !important; } /* Revoke-knapparnas ljusa hot-zone */ body.light-theme .btn-table-action-danger { border-color: #CBD5E1 !important; color: #64748B !important; } body.light-theme .btn-table-action-danger:hover { background: #FEF2F2 !important; border-color: #EF4444 !important; color: #991B1B !important; } /* Strukturella element för Settings-vyn */ .vault-setting-row { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; gap: 1.5rem !important; cursor: pointer; } .setting-text-wrap { display: flex; flex-direction: column; gap: 0.25rem; flex-grow: 1; } .setting-text-wrap strong { font-size: 0.95rem; font-weight: 700; } .setting-text-wrap small { font-size: 0.82rem; line-height: 1.4; } .vault-divider { border: 0; height: 1px; width: 100%; } /* Stilrent premium-reglage (Checkbox Toggle) */ .vault-switch-wrapper { display: flex; align-items: center; flex-shrink: 0; } .vault-system-toggle { appearance: none; width: 44px !important; height: 24px !important; border-radius: 12px !important; cursor: pointer; position: relative !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box; } .vault-system-toggle::before { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; top: 3px; left: 3px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .vault-system-toggle:checked::before { transform: translateX(20px); } body.dark-theme .setting-text-wrap strong { color: #ffffff; } body.dark-theme .setting-text-wrap small { color: #64748B; } body.dark-theme .vault-divider { background-color: rgba(255, 255, 255, 0.04); } /* Switch FĂ€rgskala - Mörkt lĂ€ge */ body.dark-theme .vault-system-toggle { background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); } body.dark-theme .vault-system-toggle::before { background-color: #64748B; } body.dark-theme .vault-system-toggle:checked { background-color: rgba(0, 255, 102, 0.1); border-color: #00FF66; } body.dark-theme .vault-system-toggle:checked::before { background-color: #00FF66; box-shadow: 0 0 8px rgba(0, 255, 102, 0.4); } body.light-theme .setting-text-wrap strong { color: #0A2540; } body.light-theme .setting-text-wrap small { color: #64748B; } body.light-theme .vault-divider { background-color: #F1F5F9; } /* Switch FĂ€rgskala - Ljust lĂ€ge */ body.light-theme .vault-system-toggle { background-color: #E2E8F0; border: 1px solid #CBD5E1; } body.light-theme .vault-system-toggle::before { background-color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } body.light-theme .vault-system-toggle:checked { background-color: #0A2540; border-color: #0A2540; } body.light-theme .vault-system-toggle:checked::before { background-color: #ffffff; } /* ========================================================================== đŸŽ›ïž STRUCTURAL COMPONENT CLASSES FOR DASHBOARD OVERVIEW ========================================================================== */ /* Ping-kortets inre layoutregler */ section#view-dashboard .vault-ping-telemetry-box { justify-content: space-between !important; } section#view-dashboard .vault-ping-timer-wrap { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.25rem; } section#view-dashboard .vault-ping-timer-wrap small { font-size: 0.75rem; font-weight: 500; } /* Den minimalistiska inline-pingknappen */ section#view-dashboard .vault-action-ping-btn, section#view-dashboard .vault-copy-hash-trigger { display: inline-flex; align-items: center; gap: 0.4rem; padding: 6px 12px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; border: 1px solid transparent; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); margin-top: 0.5rem; } section#view-dashboard .vault-action-ping-btn svg { flex-shrink: 0; } /* Det skyddande chassit runt din ID-hash */ section#view-dashboard .vault-identity-hash-shield-chassis { display: flex; width: 100%; height: 3.5rem; border-radius: 8px; overflow: hidden; align-items: center; box-sizing: border-box; } section#view-dashboard .hash-code-zone { display: flex; align-items: center; gap: 0.75rem; flex-grow: 1; overflow: hidden; height: 100%; } section#view-dashboard .vault-raw-hash-string { font-family: monospace; font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Klipper hashen snyggt med punkter pĂ„ smĂ„ skĂ€rmar */ } section#view-dashboard .hash-code-zone svg { flex-shrink: 0; } /* Kopieringsknappen i chassits kant */ /* Ping-komponenter i mörkt lĂ€ge */ body.dark-theme .vault-ping-timer-wrap small { color: #475569; } body.dark-theme .vault-action-ping-btn { background-color: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.05); color: #94A3B8; } body.dark-theme .vault-action-ping-btn:hover, body.dark-theme .vault-copy-hash-trigger:hover { background-color: rgba(0, 255, 102, 0.05); border-color: #00FF66 !important; color: #00FF66 !important; } /* ID-hash-boxen i mörkt lĂ€ge */ body.dark-theme .vault-identity-hash-shield-chassis { background-color: #07080E; border: 1px solid rgba(255, 255, 255, 0.05); } body.dark-theme .hash-code-zone { color: #64748B; } body.dark-theme .vault-raw-hash-string { color: #00FF66; } /* Klassisk ljusgrön krypto-text */ body.dark-theme .vault-copy-hash-trigger { background-color: rgba(255, 255, 255, 0.02); border-left: 1px solid rgba(255, 255, 255, 0.05); color: #94A3B8; } body.dark-theme .vault-identity-hash-shield-chassis { background-color: #07080E !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; } body.dark-theme .hash-code-zone { color: #475569 !important; } body.dark-theme .vault-raw-hash-string { color: #00FF66 !important; } /* Snygg krypto-grön */ body.dark-theme .vault-copy-hash-trigger { background-color: rgba(255, 255, 255, 0.02) !important; border-left: 1px solid rgba(255, 255, 255, 0.05) !important; color: #94A3B8 !important; } /* Ping-komponenter i ljust lĂ€ge */ body.light-theme .vault-ping-timer-wrap small { color: #94A3B8; } body.light-theme .vault-action-ping-btn { background-color: #F1F5F9; border-color: #E2E8F0; color: #475569; } body.light-theme .vault-action-ping-btn:hover, body.light-theme .vault-copy-hash-trigger:hover { background-color: #0A2540; border-color: #0A2540; color: #ffffff; } /* ID-hash-boxen i ljust lĂ€ge */ body.light-theme .vault-identity-hash-shield-chassis { background-color: #F8FAFC; border: 1px solid #E2E8F0; } body.light-theme .hash-code-zone { color: #94A3B8; } body.light-theme .vault-raw-hash-string { color: #0F172A; } /* ========================================================================== đŸ“± HORISONTELL STATISTIK-GRID FÖR MOBILER (< 1024px) ========================================================================== */ .dashboard-metrics-grid { display: grid !important; /* Ändra frĂ„n '1fr' till tvĂ„ kolumner för de tvĂ„ första korten, medan ping-kortet tar hela bredden */ grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; /* NĂ„got tĂ€tare mellanrum pĂ„ mobil för att maximera ytan */ width: 100% !important; } /* Tvinga ping-kortet (tredje kortet i griddet) att strĂ€cka sig över bĂ„da kolumnerna under de tvĂ„ smĂ„ */ .dashboard-metrics-grid > .vault-feature-card:nth-child(3) { grid-column: span 2 !important; } /* Justera text- och badge-storlekar inuti korten sĂ„ de inte trycks ihop pĂ„ smala skĂ€rmar */ .dashboard-metrics-grid .vault-feature-card { padding: 1.25rem 1rem !important; /* Lite tajtare inre padding */ } .dashboard-metrics-grid .vault-feature-card h3 { font-size: 1.35rem !important; /* DĂ€mpar rubrikstorleken nĂ„got nĂ€r de delar pĂ„ bredden */ font-weight: 800; } .dashboard-metrics-grid .vault-feature-card p { font-size: 0.8rem !important; /* Gör undertexten mer kompakt och lĂ€ttlĂ€st */ line-height: 1.3; } /* ========================================================================== đŸ“± HORISONTELL STATISTIK-GRID FÖR MOBILER (< 1024px) — FIX BREDD ========================================================================== */ .dashboard-metrics-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; width: 100% !important; box-sizing: border-box !important; /* HĂ„ller hela griddet pĂ„ plats */ padding: 0 !important; /* Tar bort eventuell extra yttre tryck */ } /* Fixa till de individuella korten sĂ„ de inte svĂ€ller utanför kanterna */ .dashboard-metrics-grid .vault-feature-card { padding: 1.25rem 1rem !important; width: 100% !important; box-sizing: border-box !important; /* đŸ”„ SÄKRAR ATT PADDING STANNAR PÅ INSIDAN */ } /* Tvinga ping-kortet att strĂ€cka sig över bĂ„da kolumnerna */ .dashboard-metrics-grid > .vault-feature-card:nth-child(3) { grid-column: span 2 !important; width: 100% !important; box-sizing: border-box !important; } /* ========================================================================== đŸȘ VAULTFORWARD TOAST INFRASTRUCTURE — STRUCTURAL LAYER ========================================================================== */ /* ========================================================================== đŸȘ STRUCTURAL TOAST OVERHAUL (Anpassad för original-JS) ========================================================================== */ #vault-notification-sluice-container { position: fixed !important; bottom: 1.5rem !important; right: 1.5rem !important; display: flex !important; flex-direction: column !important; gap: 0.75rem !important; z-index: 9999999 !important; pointer-events: none !important; } @media (max-width: 1023px) { #vault-notification-sluice-container { left: 1.25rem !important; right: 1.25rem !important; bottom: calc(64px + 1.25rem) !important; /* Landar vackert ovanför din mobila command-rail */ } } .vault-bank-toast { z-index: 99999 !important; pointer-events: auto !important; border-radius: 8px !important; border: 1px solid !important; padding: 1.1rem 1.25rem !important; /* Lyxig, balanserad padding runt hela insidan */ width: 100% !important; min-width: 280px !important; max-width: 400px !important; box-sizing: border-box !important; /* 🚀 FLEX-MAGI: Ger textbehĂ„llaren i mitten all överbliven plats, vilket automatiskt */ /* trycker ut pricken till vĂ€nsterkanten och stĂ€ngningsknappen till högerkanten */ display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 0.85rem !important; /* GPU-interferens */ transform: translateY(20px); opacity: 0; animation: vaultToastFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s linear !important; } @keyframes vaultToastFadeIn { to { transform: translateY(0); opacity: 1; } } .vault-bank-toast.toast-fade-out { animation: none !important; transform: translateX(40px) scale(0.98) !important; opacity: 0 !important; } /* Pricken förblir stum i kanten */ .vault-toast-indicator-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; margin-top: 5px !important; /* Expanderar vertikalt sĂ„ den balanserar med första raden text */ flex-shrink: 0 !important; } /* TextbehĂ„llaren expanderar i mitten och tar upp allt ledigt utrymme */ .vault-toast-core-content { display: flex !important; flex-direction: column !important; gap: 0.2rem !important; flex-grow: 1 !important; /* Tar upp all plats emellan pricken och krysset */ overflow: hidden; } .vault-toast-title { font-size: 0.88rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; } .vault-toast-msg { font-size: 0.82rem !important; line-height: 1.4 !important; } /* StĂ€ngningskrysset lĂ„ser fast sig stramt till höger */ .vault-toast-close-btn { background: transparent !important; border: none !important; padding: 4px !important; margin-top: -2px !important; /* Justerar krysset i höjdled mot rubriken */ margin-right: -4px !important; cursor: pointer; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: color 0.15s ease, transform 0.15s ease !important; } .vault-toast-close-btn svg { width: 14px !important; height: 14px !important; display: block !important; } .vault-toast-close-btn:active { transform: scale(0.9) !important; } /* ========================================================================== ⚫ DARK THEME PROPERTIES — VAULT OBSIDIAN TOAST ========================================================================== */ body.dark-theme .vault-bank-toast { background: #0C0E17 !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important; } body.dark-theme .vault-toast-title { color: #ffffff !important; } body.dark-theme .vault-toast-msg { color: #64748B !important; } /* Statuslysen med neonglow för mörkt lĂ€ge */ body.dark-theme .vault-bank-toast.toast-success .vault-toast-indicator-dot { background-color: #00FF66 !important; box-shadow: 0 0 8px #00FF66 !important; } body.dark-theme .vault-bank-toast.toast-error .vault-toast-indicator-dot { background-color: #FF4A4A !important; box-shadow: 0 0 8px #FF4A4A !important; } body.dark-theme .vault-bank-toast.toast-info .vault-toast-indicator-dot { background-color: #00E5FF !important; box-shadow: 0 0 8px #00E5FF !important; } body.dark-theme .vault-toast-close-btn { color: #475569 !important; } body.dark-theme .vault-toast-close-btn:hover { color: #ffffff !important; } /* ========================================================================== âšȘ LIGHT THEME PROPERTIES — SNOW TITANIUM BANK TOAST ========================================================================== */ body.light-theme .vault-bank-toast { background: #ffffff !important; border-color: #E2E8F0 !important; box-shadow: 0 10px 25px rgba(10, 37, 64, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important; } body.light-theme .vault-toast-title { color: #0A2540 !important; } body.light-theme .vault-toast-msg { color: #64748B !important; } /* Tydliga bank-dots för ljust lĂ€ge */ body.light-theme .vault-bank-toast.toast-success .vault-toast-indicator-dot { background-color: #10B981 !important; box-shadow: 0 0 5px rgba(16, 185, 129, 0.4) !important; } body.light-theme .vault-bank-toast.toast-error .vault-toast-indicator-dot { background-color: #EF4444 !important; box-shadow: 0 0 5px rgba(239, 68, 68, 0.4) !important; } body.light-theme .vault-bank-toast.toast-info .vault-toast-indicator-dot { background-color: #F5A623 !important; box-shadow: 0 0 5px rgba(245, 166, 35, 0.4) !important; } body.light-theme .vault-toast-close-btn { color: #A0AEC0 !important; } body.light-theme .vault-toast-close-btn:hover { color: #4A5568 !important; } /* ========================================================================== 🌀 GOOGLE AI-INSPIRED GRADIENT THINKING BUTTON LAYER ========================================================================== */ .vfbtn-loading { position: relative !important; overflow: hidden !important; pointer-events: none !important; /* StĂ€ng av klick under betĂ€nketid */ transition: all 0.2s ease !important; } /* Den roterande laserskölden i bakgrunden */ .vfbtn-loading::before { content: "" !important; position: absolute !important; top: -50% !important; left: -50% !important; width: 200% !important; height: 200% !important; z-index: 1 !important; animation: vaultThinkingOrbit 2s linear infinite !important; will-change: transform; } /* Det inre skrovet som tĂ€cker mitten av knappen sĂ„ att enbart kanten (bordern) syns */ /* Det inre skrovet som tĂ€cker mitten av knappen */ .vfbtn-loading::after { /* 🚀 MAGIN: LĂ€ser av data-text frĂ„n JS dynamiskt i realtid! */ content: attr(data-text) !important; position: absolute !important; top: 2px !important; left: 2px !important; right: 2px !important; bottom: 2px !important; border-radius: 5px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; font-weight: 700 !important; font-size: 0.85rem !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } /* GPU-accelererad 360-graders rotationsbana */ @keyframes vaultThinkingOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Mörkt lĂ€ge: Kosmisk kisel-gradient */ body.dark-theme .vfbtn-loading::before { background: conic-gradient( from 0deg, #00FF66 0%, #00E5FF 25%, #a855f7 50%, #00E5FF 75%, #00FF66 100% ) !important; } /* Knappen behĂ„ller sin mörka bakgrund inuti kanten */ body.dark-theme .vfbtn-loading::after { background-color: #0C0E17 !important; color: #00FF66 !important; /* Texten lyser cyber-grönt medan den tĂ€nker */ box-shadow: inset 0 0 10px rgba(0, 255, 102, 0.05) !important; } /* Ljust lĂ€ge: Sofistikerad stĂ„l/kisel-gradient */ body.light-theme .vfbtn-loading::before { background: conic-gradient( from 0deg, #0A2540 0%, #3B82F6 25%, #94A3B8 50%, #3B82F6 75%, #0A2540 100% ) !important; } /* Knappen behĂ„ller sin rena, vita bakgrund inuti kanten */ body.light-theme .vfbtn-loading::after { background-color: #ffffff !important; color: #0A2540 !important; /* Texten blir stramt mörkblĂ„ */ } .vault-feature-card-marg{margin-top:-2.5rem;} .vault-system-twin-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; /* Delar skĂ€rmen 50/50 spikrak haptiskt */ gap: 1.25rem !important; /* BehĂ„ller exakt samma andningsrum som dina andra block */ width: 100% !important; box-sizing: border-box !important; } /* đŸ“± Mobil-brytpunkt: Om skĂ€rmen Ă€r under 600px staplas de vertikalt sĂ„ rutorna inte blir för trĂ„nga */ @media (max-width: 599px) { .vault-system-twin-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } } /* TOTP */ /* ========================================================================== đŸŽ›ïž STRUCTURAL LAYER — TOTP ESCROW CORE LAYOUT ========================================================================== */ #container-totp-escrow { display: flex !important; flex-direction: row !important; /* LĂ€gger QR och kontroller sida vid sida */ align-items: center !important; gap: 2rem !important; margin: 1.25rem 0 !important; padding: 1.5rem !important; border-radius: 8px !important; box-sizing: border-box !important; width: 100% !important; /* Garanterar att padding rĂ€knas INSIDAN av bredden sĂ„ den inte sprĂ€cker skĂ€rmen (Fixar Bild 2) */ box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } #container-totp-qr-slot { flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #container-totp-escrow img { display: block !important; width: 200px !important; height: 200px !important; padding: 10px !important; border-radius: 6px !important; box-sizing: border-box !important; } /* Högra kolumnen som staplar fĂ€ltet över knappen */ .vault-totp-controls-column { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; flex-grow: 1 !important; width: 100% !important; } .form-label-qr { display: block !important; margin-bottom: 0.5rem !important; font-size: 0.72rem !important; letter-spacing: 0.06em !important; font-weight: 700 !important; text-transform: uppercase !important; } #field-totp-verification-code { width: 100% !important; height: 3.5rem !important; border-radius: 6px !important; text-align: center !important; font-size: 1.5rem !important; letter-spacing: 6px !important; font-family: monospace !important; padding: 0 1rem !important; box-sizing: border-box !important; outline: none !important; } /* Anpassa knappen i högerkolumnen till den nya höjden */ .vault-totp-controls-column .vfbtn { height: 3.25rem !important; text-transform: uppercase !important; font-size: 0.82rem !important; letter-spacing: 0.04em !important; width: 100% !important; } /* đŸ“± MobilskĂ€rms-responsivitet: Om skĂ€rmen Ă€r smal vĂ€xlar vi till vertikal stapling */ @media (max-width: 540px) { #container-totp-escrow { flex-direction: column !important; align-items: center !important; gap: 1.25rem !important; padding: 1.25rem !important; } /* Tvingar QR-facket att stanna inom ramen och inte trycka ut kortet */ #container-totp-qr-slot { width: 100% !important; display: flex !important; justify-content: center !important; box-sizing: border-box !important; } #container-totp-escrow img, .qr-code-image { max-width: 160px !important; /* Krymper QR-boxen nĂ„got pĂ„ smĂ„ mobiler */ height: auto !important; } } body.dark-theme .qr-code-image { border: 1px solid rgba(0, 255, 102, 0.2) !important; background: #040A05 !important; /* Djup obsidian-grön botten */ box-shadow: 0 0 20px rgba(0, 255, 102, 0.08) !important; /* Subtil, lyxig kiselglöd */ } /* Dark Mode: Hermetisk militĂ€rgrön militĂ€r-chassi */ body.dark-theme #container-totp-escrow { border: 1px solid rgba(0, 255, 102, 0.15) !important; background: rgba(7, 19, 11, 0.4) !important; /* DĂ€mpad kisel-ton */ box-shadow: 0 8px 32px rgba(0, 255, 102, 0.03) !important; } body.dark-theme #container-totp-escrow img { border: 1px solid rgba(0, 255, 102, 0.2) !important; background: #040A05 !important; box-shadow: 0 0 20px rgba(0, 255, 102, 0.05) !important; } body.dark-theme .form-label-qr { color: #00FF66 !important; /* Snygg stram grĂ„ rubrik, matchar din form-label */ } body.dark-theme #field-totp-verification-code { border: 1px solid rgba(0, 255, 102, 0.2) !important; background: #040A05 !important; color: #00FF66 !important; /* Grön, lysande monospaced text */ box-shadow: inset 0 0 10px rgba(0, 255, 102, 0.03) !important; } body.dark-theme #field-totp-verification-code:focus { border-color: #00FF66 !important; box-shadow: 0 0 0 4px rgba(0, 255, 102, 0.06) !important; } body.dark-theme #container-totp-qr-slot img, body.dark-theme .qr-code-image { border: 1px solid rgba(0, 255, 102, 0.2) !important; background: #040A05 !important; box-shadow: 0 0 20px rgba(0, 255, 102, 0.08) !important; /* 🚀 KRYPTO-TRICK: Om QR-koden rĂ„kar ha lila pixlar i sin kĂ€llfil, filtrerar detta bort det och skiftar fĂ€rgtonen till din kiselgröna matris! */ } /* Light Mode: Rent bank-verifieringschassi */ body.light-theme #container-totp-escrow { border: 1px solid #E2E8F0 !important; background: #F8FAFC !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.01) !important; } body.light-theme #container-totp-escrow img { border: 1px solid #CBD5E1 !important; background: #ffffff !important; } body.light-theme .form-label-qr { color: #64748B !important; } body.light-theme #field-totp-verification-code { border: 1px solid #CBD5E1 !important; background: #ffffff !important; color: #0A2540 !important; /* Stram midnattsblĂ„ text */ } body.light-theme #field-totp-verification-code:focus { border-color: #0A2540 !important; box-shadow: 0 0 0 4px rgba(10, 37, 64, 0.04) !important; } body.light-theme .qr-code-image { border: 1px solid #CBD5E1 !important; /* Stram, ljusgrĂ„ linje */ background: #ffffff !important; /* Krispigt vit botten */ box-shadow: 0 4px 12px rgba(10, 37, 64, 0.02) !important; /* Minimalistisk mjuk skugga */ } #vault-settings-lock-gate { display: none; width: 100% !important; max-width: 100% !important; min-height: 380px !important; align-items: center !important; justify-content: center !important; /* đŸ”„ CENTRERAR KORTET HORISONTELLT */ box-sizing: border-box !important; padding: 2rem 0 !important; } #vault-settings-lock-gate.vault-sudo-gate-active { display: flex; } /* SjĂ€lva kortet som hĂ„ller i din ikon och textinstruktion */ .vault-sudo-gate-card { width: 100% !important; max-width: 420px !important; /* Stram, fin bredd pĂ„ datorn */ border-radius: 12px !important; padding: 2.5rem 2rem !important; display: flex !important; flex-direction: column !important; align-items: center !important; /* đŸ”„ CENTRERAR IKON + RUBRIK + TEXT INUTI KORTET */ text-align: center !important; /* Centrerar textraderna */ box-sizing: border-box !important; } /* SĂ€kra att textrubrikerna inuti kortet inte Ă€rver vĂ€nsterjustering */ .vault-sudo-gate-card h3 { font-size: 1.4rem !important; font-weight: 800; letter-spacing: -0.02em; margin-top: 0.25rem; width: 100%; } .vault-sudo-gate-card .vault-hero-sub-text { font-size: 0.88rem !important; line-height: 1.5; width: 100%; margin-bottom: 0.5rem; } /* Kontrollera att inputfĂ€ltet tar upp hela kortets bredd */ .vault-sudo-gate-card form { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 1rem !important; } /* ========================================================================== đŸŽ›ïž STRUCTURAL LAYER — MULTI-FACTOR HYBRID SLUICE RAIL ========================================================================== */ .vault-mfa-selector-rail { display: flex !important; width: 100% !important; gap: 0.5rem !important; background: rgba(0,0,0,0.05); padding: 4px; border-radius: 6px; box-sizing: border-box; } .vault-mfa-toggle-btn { flex: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; padding: 8px 12px !important; border: none !important; background: transparent !important; border-radius: 4px !important; font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .vault-mfa-toggle-btn svg { flex-shrink: 0; } /* Panel-vĂ€xlare */ .vault-mfa-panel { display: none !important; width: 100% !important; flex-direction: column !important; gap: 1rem !important; } .vault-mfa-panel.panel-active { display: flex !important; animation: authSectorSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Strama kiselfokuserade inmatningsrutor för koderna */ .mfa-code-input { font-family: monospace !important; font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: 0.3em !important; text-align: center !important; padding-left: 1.6rem !important; } body.dark-theme .vault-mfa-selector-rail { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255,255,255,0.03); } body.dark-theme .vault-mfa-toggle-btn { color: #64748B; } body.dark-theme .vault-mfa-toggle-btn.mfa-active { background: #07080E !important; color: #00FF66 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.04) !important; } body.light-theme .vault-mfa-selector-rail { background: #F1F5F9; } body.light-theme .vault-mfa-toggle-btn { color: #64748B; } body.light-theme .vault-mfa-toggle-btn.mfa-active { background: #ffffff !important; color: #0A2540 !important; box-shadow: 0 2px 6px rgba(10,37,64,0.06); } small{color:#5d5d5d;} /* ========================================================================== 👑 PREMIUM DROPDOWN VISUALIZER ========================================================================== */ .premium-select-option { font-weight: 700 !important; } /* --- Mörkt lĂ€ge --- */ body.dark-theme .premium-select-option { color: #00E5FF !important; /* Lyser i en skarp cyan/diamantblĂ„ fĂ€rg */ background-color: #0C0E17 !important; } /* --- Ljust lĂ€ge --- */ body.light-theme .premium-select-option { color: #B45309 !important; /* Elegant bĂ€rnsten/guld i ljust lĂ€ge */ background-color: #ffffff !important; } /* ========================================================================== 👑 STRUCTURAL LAYER — TITAN PREMIUM EMERGENCY RECOVERY PERIMETER ========================================================================== */ .vault-premium-border { position: relative; border-width: 1px; border-style: solid; } .premium-badge-wrapper { width: 100%; display: flex; justify-content: flex-start; margin-bottom: -0.25rem; } .vault-emergency-recovery-zone { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; } .vault-recovery-visual-info { display: flex; gap: 0.75rem; padding: 1rem; border-radius: 6px; align-items: flex-start; box-sizing: border-box; width: 100%; } .vault-recovery-visual-info p { font-size: 0.82rem !important; line-height: 1.45 !important; margin: 0; } .info-icon-chassis { flex-shrink: 0; margin-top: 2px; } .info-icon-chassis svg { display: block; } /* Premium-detaljer i mörkt lĂ€ge (Obsidian Cyan Glint) */ body.dark-theme .vault-premium-border { border-color: rgba(0, 229, 255, 0.2) !important; background: linear-gradient(135deg, #0C0E17 0%, #080A10 100%); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.02) !important; } body.dark-theme .premium-tag { color: #00E5FF !important; background: rgba(0, 229, 255, 0.08) !important; border: 1px solid rgba(0, 229, 255, 0.2) !important; } body.dark-theme .vault-recovery-visual-info { background: rgba(0, 229, 255, 0.02); border: 1px solid rgba(0, 229, 255, 0.05); color: #64748B; } body.dark-theme .vault-recovery-visual-info b, body.dark-theme .vault-recovery-visual-info strong { color: #00E5FF; } body.dark-theme .info-icon-chassis { color: #00E5FF; } /* Reglage och knappar för premium-funktioner */ body.dark-theme .vault-system-toggle.premium-toggle:checked { background-color: rgba(0, 229, 255, 0.1); border-color: #00E5FF; } body.dark-theme .vault-system-toggle.premium-toggle:checked::before { background-color: #00E5FF; box-shadow: 0 0 8px rgba(0, 229, 255, 0.4); } body.dark-theme .premium-action-btn { background-color: #00E5FF !important; color: #06070B !important; box-shadow: 0 0 20px rgba(0, 229, 255, 0.15) !important; } body.dark-theme .premium-action-btn:hover { box-shadow: 0 0 30px rgba(0, 229, 255, 0.3) !important; } /* Premium-detaljer i ljust lĂ€ge (Snow Amber Gold) */ body.light-theme .vault-premium-border { border-color: #FDE68A !important; background: #ffffff; box-shadow: 0 10px 25px rgba(180, 83, 9, 0.02) !important; } body.light-theme .premium-tag { color: #B45309 !important; background: #FEF3C7 !important; border: 1px solid #FDE68A !important; } body.light-theme .vault-recovery-visual-info { background: #F8FAFC; border: 1px solid #E2E8F0; color: #64748B; } body.light-theme .vault-recovery-visual-info b, body.light-theme .vault-recovery-visual-info strong { color: #B45309; } body.light-theme .info-icon-chassis { color: #B45309; } body.light-theme .vault-system-toggle.premium-toggle:checked { background-color: #B45309; border-color: #B45309; } body.light-theme .premium-action-btn { background-color: #B45309 !important; color: #ffffff !important; } /* ========================================================================== 👑 STRUCTURAL LAYER — TITAN PREMIUM FORGE PRE-TRIGGER BUFFER ========================================================================== */ .premium-buffer-card { width: 100% !important; padding: 2rem 1.5rem !important; border-radius: 10px !important; border-width: 1px; border-style: solid; box-sizing: border-box !important; } .premium-buffer-controls { width: 100%; } .premium-select { cursor: pointer; font-weight: 600; } /* Premium Forge-buffer i mörkt lĂ€ge */ body.dark-theme .premium-buffer-card { border-color: rgba(0, 229, 255, 0.15) !important; background: rgba(7, 19, 21, 0.2) !important; /* Subtil mörk cyan-antydan */ box-shadow: 0 8px 32px rgba(0, 229, 255, 0.02) !important; } body.dark-theme .premium-tag { color: #00E5FF !important; background: rgba(0, 229, 255, 0.08) !important; border: 1px solid rgba(0, 229, 255, 0.2) !important; } body.dark-theme .premium-select { border-color: rgba(0, 229, 255, 0.2) !important; color: #ffffff !important; background-color: #07080E !important; } body.dark-theme .premium-select:focus { border-color: #00E5FF !important; box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.04) !important; } body.dark-theme .premium-buffer-card .vault-recovery-visual-info { background: rgba(0, 229, 255, 0.01) !important; border: 1px solid rgba(0, 229, 255, 0.04) !important; color: #64748B; } body.dark-theme .premium-buffer-card .vault-recovery-visual-info strong { color: #00E5FF !important; } body.dark-theme .premium-buffer-card .info-icon-chassis { color: #00E5FF !important; } /* Premium Forge-buffer i ljust lĂ€ge */ body.light-theme .premium-buffer-card { border-color: #FDE68A !important; background: #FEFBF6 !important; /* Mycket mjuk, lyxig ljus bakgrund */ box-shadow: 0 6px 20px rgba(180, 83, 9, 0.01) !important; } body.light-theme .premium-tag { color: #B45309 !important; background: #FEF3C7 !important; border: 1px solid #FDE68A !important; } body.light-theme .premium-select { border-color: #CBD5E1 !important; color: #0A2540 !important; background-color: #ffffff !important; } body.light-theme .premium-select:focus { border-color: #B45309 !important; box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.04) !important; } body.light-theme .premium-buffer-card .vault-recovery-visual-info { background: #ffffff; border: 1px solid #E2E8F0; color: #64748B; } body.light-theme .premium-buffer-card .vault-recovery-visual-info strong { color: #B45309 !important; } body.light-theme .premium-buffer-card .info-icon-chassis { color: #B45309 !important; } /* ========================================================================== đŸŽ›ïž STRUCTURAL LAYER — SYSTEM AUDIT TRAIL LOG ========================================================================== */ /* ========================================================================== đŸŽ›ïž STRUCTURAL LAYER — PREMIUM STREAMLINED AUDIT FEED ========================================================================== */ .vault-audit-feed-wrapper { display: flex !important; flex-direction: column !important; width: 100% !important; box-sizing: border-box; } .vault-audit-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 1.1rem 1.5rem !important; border-bottom: 1px solid transparent; gap: 1rem; box-sizing: border-box; } .audit-left-core { display: flex !important; align-items: center !important; gap: 1rem !important; overflow: hidden; } /* SmĂ„ strama cirkel-badgar för ikonerna */ .audit-icon-badge { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; border: 1px solid transparent; } .audit-details-wrap { display: flex !important; flex-direction: column !important; gap: 0.15rem !important; } .audit-title-line { display: flex !important; align-items: baseline !important; gap: 0.5rem !important; } .audit-title-line strong { font-size: 0.9rem !important; font-weight: 700; } .audit-feed-time { font-size: 0.72rem !important; font-weight: 500; font-family: monospace; } .audit-sub-meta { display: flex !important; align-items: center !important; gap: 0.4rem !important; } .audit-alias-text { font-size: 0.78rem !important; font-weight: 500; } /* Högra sidan: Aktioner eller status */ .audit-right-actions { display: flex !important; align-items: center !important; flex-shrink: 0 !important; } .vault-audit-table { min-width: 720px !important; /* Ger lite mer andningsrum för tidsstĂ€mplar och knappar */ } .audit-time-stamp { font-family: monospace !important; font-weight: 600; font-size: 0.8rem; } .audit-vector-cell { display: flex !important; align-items: center !important; gap: 0.6rem !important; } .audit-vector-cell strong { font-size: 0.85rem; } /* De minimala, strama hĂ€ndelsetaggarna */ .audit-type-tag { font-size: 0.62rem !important; font-weight: 800 !important; padding: 2px 5px !important; border-radius: 3px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; display: inline-block; border: 1px solid transparent; } .audit-node-alias { font-size: 0.78rem; font-weight: 500; margin-left: 0.25rem; } /* Statustext pĂ„ högersidan */ .audit-meta-status { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } /* Interaktionsknappar för inkommande ansökningar */ .audit-action-btn-group { display: inline-flex !important; gap: 0.4rem !important; } /* ========================================================================== đŸŽ›ïž STRUCTURAL LAYER — AUDIT FEED ACTION BUTTONS ========================================================================== */ .audit-right-actions { display: inline-flex !important; gap: 0.5rem !important; /* Ger ett perfekt, luftigt avstĂ„nd mellan knapparna */ align-items: center !important; } .btn-audit-accept, .btn-audit-reject { background: transparent !important; border: 1px solid !important; padding: 6px 14px !important; /* Ger en stram, rektangulĂ€r profil */ border-radius: 4px !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; height: 1.85rem !important; /* LĂ„ser höjden för total symmetri pĂ„ raden */ transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .btn-audit-accept:active, .btn-audit-reject:active { transform: scale(0.96) !important; /* Mikroskopisk haptisk krympning vid klick */ } /* ========================================================================== 📊 AUDIT TRAIL LOG SYSTEM MATRIX — THEMES & ALIGNMENT ========================================================================== */ /* HĂ€ndelsetaggar i mörkt lĂ€ge */ body.dark-theme .audit-type-tag.type-request { background: rgba(59, 130, 246, 0.08) !important; color: #3B82F6 !important; border-color: rgba(59, 130, 246, 0.15) !important; } body.dark-theme .audit-type-tag.type-connected { background: rgba(0, 255, 102, 0.08) !important; color: #00FF66 !important; border-color: rgba(0, 255, 102, 0.15) !important; } body.dark-theme .audit-type-tag.type-optout { background: rgba(239, 68, 68, 0.08) !important; color: #FF4A4A !important; border-color: rgba(239, 68, 68, 0.15) !important; } body.dark-theme .audit-type-tag.type-deleted { background: rgba(148, 163, 184, 0.08) !important; color: #94A3B8 !important; border-color: rgba(148, 163, 184, 0.15) !important; } body.dark-theme .text-green { color: #00FF66; } body.dark-theme .text-red { color: #FF4A4A; } body.dark-theme .text-muted { color: #475569; } /* ACCEPT: GĂ„r frĂ„n dĂ€mpad grĂ„ till lysande kiselgrön */ body.dark-theme .btn-audit-accept { border-color: rgba(255, 255, 255, 0.08) !important; color: #64748B !important; } body.dark-theme .btn-audit-accept:hover { background: rgba(0, 255, 102, 0.06) !important; border-color: #00FF66 !important; color: #00FF66 !important; box-shadow: 0 0 14px rgba(0, 255, 102, 0.2) !important; /* LĂ€cker kisel-glow */ } /* REJECT: GĂ„r frĂ„n dĂ€mpad grĂ„ till skarp SRE-varningsröd */ body.dark-theme .btn-audit-reject { border-color: rgba(255, 255, 255, 0.08) !important; color: #64748B !important; } body.dark-theme .btn-audit-reject:hover { background: rgba(239, 68, 68, 0.06) !important; border-color: #FF4A4A !important; color: #FF4A4A !important; box-shadow: 0 0 14px rgba(239, 68, 68, 0.15) !important; } /* HĂ€ndelsetaggar i ljust lĂ€ge */ body.light-theme .audit-type-tag.type-request { background: #DBEAFE !important; color: #1E40AF !important; } body.light-theme .audit-type-tag.type-connected { background: #D1FAE5 !important; color: #065F46 !important; } body.light-theme .audit-type-tag.type-optout { background: #FEE2E2 !important; color: #991B1B !important; } body.light-theme .audit-type-tag.type-deleted { background: #F1F5F9 !important; color: #475569 !important; } body.light-theme .text-green { color: #10B981; } body.light-theme .text-red { color: #EF4444; } body.light-theme .text-muted { color: #94A3B8; } /* ACCEPT: Klassisk solid bank-grön vid hover */ body.light-theme .btn-audit-accept { border-color: #CBD5E1 !important; color: #475569 !important; } body.light-theme .btn-audit-accept:hover { background: #D1FAE5 !important; border-color: #10B981 !important; color: #065F46 !important; } /* REJECT: Distinkt stĂ„l-röd vid hover */ body.light-theme .btn-audit-reject { border-color: #CBD5E1 !important; color: #475569 !important; } body.light-theme .btn-audit-reject:hover { background: #FEE2E2 !important; border-color: #EF4444 !important; color: #991B1B !important; } /* Dark Mode: Obsidian Audit Feed Colorization */ body.dark-theme .vault-audit-row { border-bottom-color: rgba(255, 255, 255, 0.02) !important; } body.dark-theme .vault-audit-row:nth-child(even) { background: rgba(255, 255, 255, 0.005) !important; } body.dark-theme .audit-title-line strong { color: #ffffff; } body.dark-theme .audit-feed-time { color: #475569; } body.dark-theme .audit-alias-text { color: #475569; } /* Ikonernas semitransparenta lyskraft */ body.dark-theme .audit-icon-badge.type-request { background: rgba(59, 130, 246, 0.06) !important; color: #3B82F6 !important; border-color: rgba(59, 130, 246, 0.15) !important; } body.dark-theme .audit-icon-badge.type-connected { background: rgba(0, 255, 102, 0.06) !important; color: #00FF66 !important; border-color: rgba(0, 255, 102, 0.15) !important; } body.dark-theme .audit-icon-badge.type-optout { background: rgba(239, 68, 68, 0.06) !important; color: #FF4A4A !important; border-color: rgba(239, 68, 68, 0.15) !important; } body.dark-theme .text-green { color: #00FF66; } body.dark-theme .text-red { color: #FF4A4A; } /* Light Mode: Snow Titanium Audit Feed Colorization */ body.light-theme .vault-audit-row { border-bottom-color: #F1F5F9 !important; } body.light-theme .vault-audit-row:nth-child(even) { background: rgba(10, 37, 64, 0.005) !important; } body.light-theme .audit-title-line strong { color: #0A2540; } body.light-theme .audit-feed-time { color: #94A3B8; } body.light-theme .audit-alias-text { color: #94A3B8; } body.light-theme .audit-icon-badge.type-request { background: #DBEAFE !important; color: #1E40AF !important; } body.light-theme .audit-icon-badge.type-connected { background: #D1FAE5 !important; color: #065F46 !important; } body.light-theme .audit-icon-badge.type-optout { background: #FEE2E2 !important; color: #991B1B !important; } body.light-theme .text-green { color: #10B981; } body.light-theme .text-red { color: #EF4444; }