/* ==========================================================================
   🛡️ MASTER ENTERPRISE PERIMETER PALETTE (ENBART TABS)
   ========================================================================== */
:root {
	--vault-bg-main: rgba(10, 17, 31, 1.0);       /* #0A111F - Obsidian Slate */
	--vault-bg-surface: rgba(18, 30, 54, 1.0);    /* #121E36 - Citadel Panel */
	--vault-border: rgba(31, 50, 84, 0.4);        /* #1F3254 - Perimeter Steel */

	--vault-accent: rgba(245, 166, 35, 1.0);      /* #F5A623 - Sovereign Amber */
	--vault-accent-hover: rgba(224, 150, 27, 1.0);/* #E0961B - Hover Glöd */

	--vault-status-success: rgba(16, 185, 129, 1.0); /* #10B981 - Matrix Green */
	--vault-status-error: rgba(239, 68, 68, 1.0);   /* #EF4444 - Collapse Red */
	--vault-status-shield: rgba(249, 115, 22, 1.0);  /* #F97316 - Embargo Orange */
	--vault-status-pending: rgba(245, 166, 35, 1.0); 	/* #EF4444 orange */

	--vault-text-primary: rgba(248, 250, 252, 1.0);  /* #F8FAFC - Titanium White */
	--vault-text-secondary: rgba(148, 163, 184, 1.0);/* #94A3B8 - Silicon Gray */
	--vault-status-success: #10B981;
	--vault-status-error: #EF4444;
	--vault-status-shield: #A855F7; /* Din nysmidda, herrelösa lila statusfärg för Sektor 5! */
	--field-bg: rgba(10, 17, 31, 0.6);;
}
body.light-theme {
	--vault-bg-main: rgba(248, 250, 252, 1.0);    /* #F8FAFC - Snow Titanium */
	--vault-bg-surface: rgba(255, 255, 255, 1.0); /* #FFFFFF - Sterile White Panel */
	--vault-border: rgba(226, 232, 240, 1.0);     /* #E2E8F0 - Premium Bank Border */

	--vault-accent: rgba(245, 166, 35, 1.0);      /* Sovereign Amber */
	--vault-accent-hover: rgba(224, 150, 27, 1.0);
	
	--vault-status-success: #10B981;
	--vault-status-error: #EF4444;
	--vault-status-shield: #A855F7;
	--vault-status-pending: rgba(245, 166, 35, 1.0);

	--vault-text-primary: rgba(15, 23, 42, 1.0);     /* #0F172A - Carbon Black */
	--vault-text-secondary: rgba(71, 85, 105, 1.0);  /* #475569 - Muted Slate */
	--field-bg: rgba(241, 245, 249, 1.0);            /* #F1F5F9 - Clean Input Field */
}

/* 2. 🪓 SRE DETROIT-TWEAKS: Knivskarpa, linjebaserade klass-mutationer för ljus-perimetern */
body.light-theme nav {
	background: rgba(233, 233, 233, 0.2);
}

body.light-theme .code-text, 
body.light-theme .vault-gov-input-block input {
	background: rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .input-block input, 
body.light-theme #field-setting-phone, 
body.light-theme #inp-premium-custom-hash {
	color: #000000 !important;
}

body.light-theme .panel {
	background: rgba(220, 220, 220, 0.6);
}

body.light-theme .fader {
	background: rgba(220, 220, 220, 0.4);
}

body.light-theme .vault-governance-panel {
	background: rgba(220, 220, 220, 0.6) !important;
	border: 1px solid var(--vault-border, rgba(220, 220, 220, 0.05)) !important;
	border-radius: 12px !important;
	padding: 2.5rem !important;
	margin-top: 2rem !important;
	box-shadow: none !important;
}
body.light-theme strong.title-price{color: #000000; display: block;}

body.light-theme h4 {
	color: #000000 !important;
}

body.light-theme p {
	color: #535B66 !important;
}

body.light-theme .vault-cellular-relay-box {
	background: rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .vault-gov-stealth-box {
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light-theme td.alias {
	color: #000000 !important;
}

body.light-theme .form-control {
	background: rgba(0, 0, 0, 0.04);
}

body.light-theme .span-topic {
	font-family: monospace;
	font-size: 0.8rem;
	font-weight: bold;
	color: #000000;
	display: block;
	margin-bottom: 2px;
}

body.light-theme .slider-round {
	background: rgba(0, 0, 0, 0.03);
}

body.light-theme #panel-shield-telemetry-status, 
body.light-theme .vault-gov-status-panel {
	background: rgba(0, 0, 0, 0.03) !important;
}

/* 3. 🛡️ IMMUN SKYDDSBARRIKAD: Det frostade, ljusa Turnstile-laddningschassit */
body.light-theme #turnstile-loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0.50) !important;
	backdrop-filter: blur(16px);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	text-align: center;
}


/* Applicera den flytande animationstexturen spikrakt på dina bärande element */
body, .panel, .vault-cyber-input, input, button, .status-badge, .code-text, div, span {
	transition: var(--theme-transition);
}

body.light-theme .btn-primary{box-shadow: None;}

body.light-theme .price-tag{color:#000000;}

.btn-add-beneficiant{
	width: auto; 
	padding: 0.6rem 1.5rem; 
	font-size: 0.85rem; 
	display: flex; 
	align-items: center; 
	gap: 0.5rem; 
	background: rgba(16, 185, 129, 0.1); 
	border-color: var(--vault-cyan, #10B981); 
	color: var(--vault-cyan, #10B981);
}
/* ==========================================================================
   🧱 ENTERPRISE RESET & CHASSI
   ========================================================================== */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


/* ==========================================================================
   🛡️ ANTI-COLLISION SCROLL PERIMETER (V1.0.0 - ENBART TABS)
   ========================================================================== */
/* Detta talar om för webbläsarens infödda hårdvaru-motor att ALLA element 
   som bär på ett ID ska lämna en drakonisk marginal till viewportens absoluta 
   överkant vid hash-scrollning! Innehållet landar i pixel-perfekt symfoni! */
[id] {
	scroll-margin-top: 97.4px; /* ← 🔥 SRE-FIX: Justera till t.ex. 80px eller din sanna nav-höjd + marginal! */
}

/* Säkra ett flytande, bankklassat scroll-flow i absolut gudomlig 60 FPS-lyx! */
html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--vault-bg-main);
	color: var(--vault-text-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	padding: 0;
	overflow-x: hidden;
}

.span-topic{font-family: monospace; font-size: 0.8rem; font-weight: bold; color: #FFFFFF; display: block; margin-bottom: 2px;}
.hidden{display:none !important;}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* ==========================================================================
   📡 NAVIGATION HEADER (STRAM & KLINISK)
   ========================================================================== */
nav {
	border-bottom: 1px solid var(--vault-border);
	padding: 1.5rem 0;
	background: rgba(10, 17, 31, 0.8);
	backdrop-filter: blur(12px);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.nav-chassi {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--vault-text-primary);
	text-decoration: none;
}

.logo span {
	color: var(--vault-accent);
}

.nav-links, .nav-user-link {
	display: flex;
	gap: 2.5rem;
	align-items: center;
}

.nav-links a, .nav-user-link a {
	color: var(--vault-text-secondary);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	transition: color 0.15s ease;
}

.nav-links a:hover, .nav-user-link a:hover {
	color: var(--vault-text-primary);
}

.nav-links.active {
	color: var(--vault-accent) !important;
	font-weight: 700;
}

.price-tag{color:#ffffff;}
strong.title-price{color: #FFFFFF; display: block;}

span.display-last-pulse-time{color:#10B981 !important;}

.auth-only { display: none !important; }
.guest-only { display: inline-flex !important; }

/* 🔥 SYSTEM-STATE BRYTARE: När body har klassen .logged-in, kastar vi om hela perimetern! */
body.logged-in .auth-only { display: inline-flex !important; }
body.logged-in .guest-only { display: none !important; }

/* ==========================================================================
   🚀 HERO SECTOR
   ========================================================================== */
.hero-sector {
	padding: 8rem 0 5rem 0;
	text-align: center;
	position: relative;
}

.hero-sector::before {
	content: "";
	position: absolute;
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	height: 350px;
	background: radial-gradient(circle, rgba(245, 166, 35, 0.05) 0%, rgba(0,0,0,0) 70%);
	pointer-events: none;
}

.security-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(245, 166, 35, 0.05);
	border: 1px solid rgba(245, 166, 35, 0.2);
	color: var(--vault-accent);
	padding: 0.35rem 1rem;
	border-radius: 9999px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 2rem;
}

.hero-title {
	font-size: 3.75rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.15;
	max-width: 950px;
	margin: 0 auto 1.5rem auto;
}

.hero-subtitle {
	font-size: 1.25rem;
	color: var(--vault-text-secondary);
	max-width: 840px;
	margin: 0 auto 3rem auto;
}

/* BUTTON MATRIX */
.btn-primary {
	background-color: var(--vault-accent);
	color: rgba(10, 17, 31, 1.0);
	border: none;
	padding: 1rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
	text-decoration: none;
	display: block;
	align-items: center;
	gap: 0.5rem;
	box-shadow: 0 4px 20px rgba(245, 166, 35, 0.15);
	line-height: 24px;
}

.btn-primary:hover { background-color: var(--vault-accent-hover); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
	color: var(--vault-text-primary);
	background: transparent;
	border: 1px solid var(--vault-border);
	padding: 1rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	margin-left: 1rem;
}

.btn-secondary:hover { background: rgba(31, 50, 84, 0.2); border-color: rgba(31, 50, 84, 0.8); }

.btn-tiny{padding: 0.5rem 1.2rem; font-size: 0.85rem; margin: 0; font-weight:500;}
/* ==========================================================================
   🎛️ UPDATE: INTERACTIVE WORKSTATION GRID (RESTORED TWO-COLUMNS - ENBART TABS)
   ========================================================================== */
.interactive-grid {
	display: grid;
	grid-template-columns: 1fr 1fr; /* 100% balanserad symmetri för formulär och ledger */
	gap: 2.5rem;
	/* margin-bottom: 6rem;*/
	padding-top: 2rem;
}

@media (max-width: 900px) {
	.interactive-grid {
		grid-template-columns: 1fr; /* Responsiv nödbroms för mobila skärmar */
	}
}

.panel {
	background-color: var(--vault-bg-surface);
	border: 1px solid var(--vault-border);
	border-radius: 12px;
	padding: 2.5rem;
	position: relative;
}

.panel-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	letter-spacing: -0.01em;
}

.panel-subtitle {
	font-size: 0.85rem;
	color: var(--vault-text-secondary);
	margin-bottom: 2rem;
}

.form-group { margin-bottom: 1.5rem; }

.form-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--vault-text-secondary);
	margin-bottom: 0.5rem;
}

.form-control {
	width: 100%;
	background-color: var(--field-bg);
	border: 1px solid var(--vault-border);
	color: var(--vault-text-primary);
	font-family: inherit;
	font-size: 0.95rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	transition: border-color 0.15s ease;
}

.form-control:focus { outline: none; border-color: var(--vault-accent); }
textarea.form-control { resize: vertical; min-height: 110px; }

.form-control2 {
	width: 100%;
	background-color: var(--field-bg);
	border: 1px solid var(--vault-border);
	color: var(--vault-text-primary);
	font-family: inherit;
	font-size: 0.95rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	transition: border-color 0.15s ease;
}

.form-control2:focus { outline: none; border-color: var(--vault-accent); }
textarea.form-control2 { resize: vertical; min-height: 110px; }

#btn-toggle-contact-sluice{box-shadow: none !important;}

/* LEDGER TABLE */
.table-wrapper { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.85rem; }
th {
	color: var(--vault-text-secondary);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--vault-border);
}
td { padding: 0.85rem 0.75rem; border-bottom: 1px solid rgba(31, 50, 84, 0.15); }
.code-text {
	font-family: monospace;
	background: rgba(10, 17, 31, 0.6);
	padding: 0.15rem 0.35rem;
	border-radius: 4px;
	font-size: 0.8rem;
	color: var(--vault-accent);
}
.status-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot.success { background-color: var(--vault-status-success); box-shadow: 0 0 6px var(--vault-status-success); }
.dot.pending { background-color: var(--vault-status-pending); box-shadow: 0 0 6px var(--vault-status-pending); }
.dot.shield { background-color: var(--vault-status-shield); box-shadow: 0 0 6px var(--vault-status-shield); }

.success{ background-color: var(--vault-status-success); box-shadow: 0 0 6px var(--vault-status-success);}
/* ==========================================================================
   🔬 ARCHITECTURE SECTION (TECHNICAL VERIFICATION)
   ========================================================================== */
.section-title {
	text-align: center;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	margin-bottom: 3rem;
	margin-top: 3rem;
}
.section-title span { color: var(--vault-accent); }

.architecture-block {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 3rem;
	align-items: center;
	margin-bottom: 6rem;
}
@media (max-width: 900px) { .architecture-block { grid-template-columns: 1fr; gap: 1.5rem; } }

.code-vault {
	background-color: rgba(18, 30, 54, 0.5);
	border: 1px solid var(--vault-border);
	border-radius: 8px;
	padding: 1.5rem;
	font-family: monospace;
	font-size: 0.85rem;
	color: #A7F3D0;
	overflow-x: auto;
}

/* ==========================================================================
   💎 ENTERPRISE PRICING MATRICES
   ========================================================================== */
   
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-bottom: 6rem;
}
.price-card {
	background-color: var(--vault-bg-surface);
	border: 1px solid var(--vault-border);
	border-radius: 12px;
	padding: 3rem 2.5rem;
	display: flex;
	flex-direction: column;
}
.price-card.premium {
	border-color: var(--vault-accent);
	box-shadow: 0 4px 30px rgba(245, 166, 35, 0.05);
}
.price-head { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.price-tag { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--vault-text-primary); }
.price-tag span { font-size: 1rem; color: var(--vault-text-secondary); font-weight: 400; }

.feature-list { list-style: none; margin-bottom: 2rem; flex-grow: 1; }
.feature-list li {
	font-size: 0.95rem;
	color: var(--vault-text-secondary);
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.feature-list li svg { color: var(--vault-accent); flex-shrink: 0; }

#turnstile-loading-screen {
	position: fixed;
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center;
	z-index: 10000;
	font-family: var(--font-mono);
	backdrop-filter: blur(8px); 
	color: var(--color-orange); 
	font-weight: 600; 
	font-size: 16px; 
	letter-spacing: 0.1em; 
	text-transform: uppercase; 
	margin: 0 0 0 0; 
}

/* ==========================================================================
   🌌 CLOUDFLARE BOT-SHIELD OVERLAY & MODAL SYSTEMS (ENBART TABS)
   ========================================================================== */

/* 1. HUVUDSKÄRM FÖR BOT-VALIDERING */
#turnstile-loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(10, 17, 31, 0.50); /* Tvingar fram Obsidian Slate istället för gammal färg */
	backdrop-filter: blur(16px);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	text-align: center;
}

#turnstile-loading-screen h3 {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--vault-text-primary);
	margin-bottom: 0.5rem;
	color: var(--);
}

#turnstile-loading-screen p {
	font-size: 0.95rem;
	color: var(--vault-text-secondary);
	max-width: 400px;
	margin-bottom: 1.5rem;
}

/* 🌀 KISEL-SPINNER (60 FPS FLUID FLAMSÄKER ANIMATION) */
#turnstile-loading-screen .spinner {
	width: 50px;
	height: 50px;
	border: 3px solid var(--vault-border);
	border-radius: 50%;
	border-top-color: var(--vault-accent); /* Bärnstensglöd på spetsen */
	animation: kiselSpinnerRotation 0.8s linear infinite;
	margin-bottom: 2rem;
	box-shadow: 0 0 15px rgba(245, 166, 35, 0.1);
}

@keyframes kiselSpinnerRotation {
	to { transform: rotate(360deg); }
}

/* 2. DET HERMETISKA FRAMGÅNGSMODALET */
#vf-success-modal-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(10, 17, 31, 0.85);
	backdrop-filter: blur(8px);
	z-index: 9998;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2rem;
}

/* MODALBOXENS STRIDSHÄRDADE CHASSI */
.citadel-modal-box {
	background-color: var(--vault-bg-surface);
	border: 1px solid var(--vault-accent); /* Inramat med guld för maximal produkt-exklusivitet */
	border-radius: 12px;
	padding: 3rem 2.5rem;
	max-width: 550px;
	width: 100%;
	box-shadow: 0 10px 40px rgba(10, 17, 31, 0.5), 0 0 30px rgba(245, 166, 35, 0.05);
	text-align: left;
}

.citadel-modal-box h3 {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--vault-status-success); /* Rubriken lyser i Matrix Green */
	margin-bottom: 0.75rem;
}

.citadel-modal-box p {
	font-size: 0.95rem;
	color: var(--vault-text-secondary);
	margin-bottom: 1.5rem;
}

/* 📄 MANIFEST-CONTAINER FÖR KRYPTERAD DATA-RETUR */
.modal-manifest-container {
	background-color: var(--vault-bg-main);
	border: 1px solid var(--vault-border);
	border-radius: 6px;
	padding: 1rem;
	font-family: monospace;
	font-size: 0.85rem;
	color: var(--vault-accent);
	max-height: 150px;
	overflow-y: auto;
	margin-bottom: 2rem;
	white-space: pre-wrap;
	word-break: break-all;
}

/* 🎛️ MODAL INTERAKTIONSKNAPPAR */
.btn-modal-action {
	background: transparent;
	border: 1px solid var(--vault-border);
	color: var(--vault-text-primary);
	padding: 0.75rem 1.25rem;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	margin-right: 0.75rem;
	margin-bottom: 0.5rem;
	line-height: 24px;
}

.btn-modal-action:hover {
	background-color: rgba(31, 50, 84, 0.2);
	border-color: rgba(31, 50, 84, 0.8);
}

/* 🔥 INSTANT SECURE DISPATCH (KUNGENS NYA EFFEKTSTRÅLE) */
#btn-modal-email-dispatch {
	background-color: var(--vault-accent);
	color: rgba(10, 17, 31, 1.0);
	border: none;
}

#btn-modal-email-dispatch:hover {
	background-color: var(--vault-accent-hover);
}

/* ⛔ NÖDBROMS / STÄNG-KNAPPEN */
.btn-modal-close {
	border-color: rgba(239, 68, 68, 0.4);
	color: var(--vault-text-secondary);
}

.btn-modal-close:hover {
	background-color: rgba(239, 68, 68, 0.1);
	border-color: var(--vault-status-error);
	color: var(--vault-text-primary);
}

/* ==========================================================================
   🔐 SEKTOR 9: AUTHENTICATION GATEWAY MODAL MATRIX (ENBART TABS)
   ========================================================================== */
#auth-modal-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(10, 17, 31, 0.85); /* Hermetiskt Obsidian-skiffer */
	backdrop-filter: blur(12px);               /* Bankklassad oskärpa live i RAM */
	z-index: 9995;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	opacity: 0;                                /* ⚠️ START-TILLSTÅND: Dold för ögat */
	pointer-events: none;                      /* ⚠️ START-TILLSTÅND: Blockera muspekaren */
	transition: opacity 0.25s ease;            /* Flytande, flamsäker omställning */
}

/* 🔥 THE IGNITION LOCK: JavaScript tänder denna klass live i minnet vid klick! */
#auth-modal-screen.active {
	opacity: 1;
	pointer-events: auto;
}

.auth-modal-box {
	background-color: var(--vault-bg-surface);
	border: 1px solid var(--vault-border);
	border-radius: 12px;
	padding: 3rem 2.5rem;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 10px 40px rgba(10, 17, 31, 0.6);
	transition: border-color 0.2s ease;
}

.auth-modal-box:hover {
	border-color: rgba(31, 50, 84, 0.8);
}

.auth-tabs-switch {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--vault-border);
	padding-bottom: 0.75rem;
}

.auth-tab-trigger {
	background: transparent;
	border: none;
	color: var(--vault-text-secondary);
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s ease;
	position: relative;
}

.auth-tab-trigger:hover,
.auth-tab-trigger.active {
	color: var(--vault-text-primary);
}

/* Bärnstensglödande linje under aktiv flik */
.auth-tab-trigger.active::after {
	content: "";
	position: absolute;
	bottom: -0.85rem;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--vault-accent);
	box-shadow: 0 0 8px var(--vault-accent);
}

/* Gömd klass för de asymmetriska formulärfält som ska växlas bort */
.auth-form-context {
	display: none;
}

.auth-form-context.active {
	display: block;
}

.auth-toggle-hint {
	font-size: 0.85rem;
	color: var(--vault-text-secondary);
	text-align: center;
	margin-top: 1.5rem;
}

.auth-toggle-link {
	color: var(--vault-accent);
	text-decoration: none;
	font-weight: 600;
	cursor: pointer;
}

.auth-toggle-link:hover {
	color: var(--vault-accent-hover);
}

/* ==========================================================================
   📡 SEKTOR 14: SOVEREIGN NOTIFICATION MATRIX (TOAST SYSTEM - ENBART TABS)
   ========================================================================== */
#vf-notification-container {
	position: fixed;
	top: 2rem;
	right: 2rem;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 380px;
	width: 100%;
	pointer-events: none;
}

.vf-toast {
	background-color: var(--vault-bg-surface);
	border: 1px solid var(--vault-border);
	border-left: 4px solid var(--vault-text-secondary); /* Standardgrå */
	border-radius: 6px;
	padding: 1.25rem;
	box-shadow: 0 10px 30px rgba(10, 17, 31, 0.5);
	color: var(--vault-text-primary);
	font-size: 0.9rem;
	pointer-events: auto;
	
	/* Flytande 60 FPS Ingress-animation */
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* När notifikationen skjuts ut live på skärmen */
.vf-toast.active {
	opacity: 1;
	transform: translateX(0);
}

.vf-toast-title {
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 0.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.vf-toast-body {
	color: var(--vault-text-secondary);
	font-size: 0.85rem;
	line-height: 1.4;
}

/* SYSTEMSTATUS FÄRGMUTERINGAR */
.vf-toast.success {
	border-left-color: var(--vault-status-success);
	box-shadow: 0 4px 20px rgba(16, 185, 129, 0.05);
}
.vf-toast.success .vf-toast-title { color: var(--vault-status-success); }

.vf-toast.email_success {
	border-left-color: var(--vault-status-success);
	box-shadow: 0 4px 20px rgba(16, 185, 129, 0.05);
}
.vf-toast.email_success .vf-toast-title { color: var(--vault-status-success); }

.vf-toast.email_pending {
	border-left-color: #F5A623; /* Din fastgjutna, skarpa bärnstensgula statusfärg */
	box-shadow: 0 4px 20px rgba(245, 166, 35, 0.05); /* Det matchande, dämpade gula glödet */
}

.vf-toast.email_pending .vf-toast-title {
	color: #F5A623;
}
.vf-toast.error {
	border-left-color: var(--vault-status-error);
	box-shadow: 0 4px 20px rgba(239, 68, 68, 0.05);
}
.vf-toast.error .vf-toast-title { color: var(--vault-status-error); }

.vf-toast.pending {
	border-left-color: #F5A623; /* Din fastgjutna, skarpa bärnstensgula statusfärg */
	box-shadow: 0 4px 20px rgba(245, 166, 35, 0.05); /* Det matchande, dämpade gula glödet */
}

.vf-toast.pending .vf-toast-title {
	color: #F5A623;
}

.vf-toast.shield {
	border-left-color: var(--vault-status-shield);
	box-shadow: 0 4px 20px rgba(249, 115, 22, 0.05);
}
.vf-toast.shield .vf-toast-title { color: var(--vault-status-shield); }

/* ==========================================================================
   🗑️ SEKTOR 16: OBLITERATION CONFIRMATION MATRIX (DYNAMIC MODAL - ENBART TABS)
   ========================================================================== */
#delete-confirm-modal-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(10, 17, 31, 0.85); /* Hermetiskt Obsidian-skiffer */
	backdrop-filter: blur(12px);               /* Flytande RAM-oskärpa */
	z-index: 9996;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	opacity: 0;                                /* Startläge: Dold */
	pointer-events: none;                      /* Startläge: Oaktiv */
	transition: opacity 0.2s ease;
}

/* Aktiveringstull som tänds autonomously via JS live i minnet */
#delete-confirm-modal-screen.active {
	opacity: 1;
	pointer-events: auto;
}

.delete-modal-box {
	background-color: var(--vault-bg-surface);
	border: 1px solid rgba(239, 68, 68, 0.4); /* Inramat med dämpat SRE-rött för allvar */
	border-radius: 12px;
	padding: 3rem 2.5rem;
	max-width: 460px;
	width: 100%;
	box-shadow: 0 10px 40px rgba(10, 17, 31, 0.6), 0 0 30px rgba(239, 68, 68, 0.05);
	text-align: left;
	transition: border-color 0.2s ease;
}

.delete-modal-box:hover {
	border-color: var(--vault-status-error); /* Lyser upp vid muspekare */
}

.delete-modal-box h3 {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--vault-status-error); /* Rubriken lyser hotfullt röd */
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.delete-modal-box p {
	font-size: 0.95rem;
	color: var(--vault-text-secondary);
	margin-bottom: 2rem;
	line-height: 1.5;
}

/* KNAPPMATRIS FÖR STRIDSHÄRDAD DESTRUKTION */
.delete-btn-group {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
}

.btn-confirm-obliterate {
	background-color: var(--vault-status-error);
	color: var(--vault-text-primary);
	border: none;
	padding: 0.75rem 1.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.btn-confirm-obliterate:hover {
	background-color: #DC2626; /* Djupare röd vid hover */
	box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

/* ==========================================================================
   🗑️ UPDATE SEKTOR 16: DYNAMIC RISK STATES FOR OBLITERATION MODAL (ENBART TABS)
   ========================================================================== */

/* STANDARD-LÄGE (ORANGE/BÄRNSTEN) — När det finns andra shards kvar */
.delete-modal-box.risk-standard {
	border-color: rgba(245, 166, 35, 0.4);
	box-shadow: 0 10px 40px rgba(10, 17, 31, 0.6), 0 0 30px rgba(245, 166, 35, 0.05);
}
.delete-modal-box.risk-standard:hover {
	border-color: var(--vault-accent);
}
.delete-modal-box.risk-standard h3 {
	color: var(--vault-accent);
}

/* KRITISKT LÄGE (SRE-RÖTT) — När det är den absolut sista sharden till mottagaren! */
.delete-modal-box.risk-critical {
	border-color: rgba(239, 68, 68, 0.5);
	box-shadow: 0 10px 40px rgba(10, 17, 31, 0.6), 0 0 40px rgba(239, 68, 68, 0.1);
	animation: kiselRedPulsePerimeter 2s infinite ease-in-out;
}
.delete-modal-box.risk-critical:hover {
	border-color: var(--vault-status-error);
}
.delete-modal-box.risk-critical h3 {
	color: var(--vault-status-error);
}

@keyframes kiselRedPulsePerimeter {
	0% { box-shadow: 0 10px 40px rgba(10, 17, 31, 0.6), 0 0 20px rgba(239, 68, 68, 0.05); }
	50% { box-shadow: 0 10px 40px rgba(10, 17, 31, 0.6), 0 0 40px rgba(239, 68, 68, 0.2); }
	100% { box-shadow: 0 10px 40px rgba(10, 17, 31, 0.6), 0 0 20px rgba(239, 68, 68, 0.05); }
}



/* ==========================================================================
   🔒 SEKTOR 17: SESSION EXPIRED PERIMETER LOCK SCREEN (ENBART TABS)
   ========================================================================== */
#vf-static-expired-banner {
	background-color: rgba(239, 68, 68, 0.1);
	border-bottom: 1px solid var(--vault-status-error);
	color: var(--vault-status-error);
	text-align: center;
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	display: none; /* Styrs autonomously via JS */
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	position: sticky;
	top: 0;
	z-index: 10001;
	backdrop-filter: blur(8px);
}

#vf-lock-screen-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(10, 17, 31, 0.95); /* Hermetiskt Obsidian-skiffer */
	backdrop-filter: blur(20px);               /* Djup kisel-oskärpa */
	z-index: 9999;
	display: none;                             /* Styrs autonomously via JS */
	justify-content: center;
	align-items: center;
	padding: 2rem;
}

.lock-screen-box {
	background-color: var(--vault-bg-surface);
	border: 1px solid var(--vault-border);
	border-radius: 12px;
	padding: 3.5rem 3rem;
	max-width: 440px;
	width: 100%;
	box-shadow: 0 20px 50px rgba(10, 17, 31, 0.8);
	text-align: center;
}

.lock-screen-box .lock-icon {
	color: var(--vault-accent);
	margin-bottom: 1.5rem;
	animation: kiselAmberPulse 2.5s infinite ease-in-out;
}

.lock-screen-box h3 {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--vault-text-primary);
	margin: 0 0 0.5rem 0;
}

.lock-screen-box p {
	font-size: 0.9rem;
	color: var(--vault-text-secondary);
	line-height: 1.5;
	margin: 0 0 2.5rem 0;
}

@keyframes kiselAmberPulse {
	0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(245, 166, 35, 0.2)); }
	50% { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(245, 166, 35, 0.6)); }
	100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(245, 166, 35, 0.2)); }
}

/* DYNAMIC PRIVACY SHIELD COLOR MATRIX (ENBART TABS) */
.dot.shield {
	background-color: #A855F7 !important;
	box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* ==========================================================================
   🔒 MODULE B: SOVEREIGN CYBERPUNK PURPLE SWITCH MECHANICS (ENBART TABS)
   ========================================================================== */
.switch-chassi {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 22px;
	cursor: pointer;
}

.switch-chassi input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider-round {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #1E293B;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 34px;
	transition: .2s ease-in-out;
}

.slider-round:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 3px;
	bottom: 3px;
	background-color: #F8FAFC;
	border-radius: 50%;
	transition: .2s ease-in-out;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* 🔥 THE PURPLE DETONATION: När brytaren är aktiv slår den om till neon-lila direct! */
.switch-chassi input:checked + .slider-round {
	background-color: #A855F7 !important;
	border-color: #B975FF !important;
	box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

.switch-chassi input:checked + .slider-round:before {
	transform: translateX(22px);
	background-color: #FFFFFF;
}


/* ==========================================================================
   👑 SOVEREIGN NODE MATRIX ARCHITECTURE STYLES (SEKTOR 5 - ENBART TABS)
   ========================================================================== */

.vault-node-matrix-panel {
	background-color: var(--vault-bg-surface, #121E36) !important;
	border: 1px solid var(--vault-border, rgba(255, 255, 255, 0.05)) !important;
	border-radius: 12px !important;
	padding: 2.5rem !important;
	box-shadow: 0 10px 40px rgba(10, 17, 31, 0.6) !important;
}

.vault-matrix-title {
	color: var(--vault-text-primary, #F8FAFC) !important;
	margin: 0 !important;
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
}

.vault-matrix-title svg {
	stroke: var(--vault-accent, #F5A623) !important;
}

.vault-matrix-subtitle {
	margin: 0.5rem 0 2rem 0 !important;
	font-size: 0.85rem !important;
	color: var(--vault-text-secondary, #94A3B8) !important;
	line-height: 1.5 !important;
}

/* ROW 1: TELEMETRY CLUSTER */
.vault-matrix-row-telemetry {
	margin-bottom: 2rem !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
	padding-bottom: 1.5rem !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
	gap: 1.5rem !important;
}

.vault-meta-group {
	margin-bottom: 0 !important;
}

.vault-meta-group .code-text {
	font-family: monospace !important;
	display: block !important;
	padding: 0.75rem 1rem !important;
	background: rgba(0, 0, 0, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.03) !important;
	border-radius: 6px !important;
	word-break: break-all !important;
	color: var(--vault-text-primary, #F8FAFC) !important;
}

.vault-status-cluster {
	display: flex !important;
	gap: 2.5rem !important;
	align-items: center !important;
}

.vault-status-block {
	display: flex !important;
	flex-direction: column !important;
}

.vault-status-block .form-label {
	display: block !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #94A3B8 !important;
	margin-bottom: 0.25rem !important;
}

.vault-shield-badge-uninit {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	font-weight: 700 !important;
	color: #64748B !important;
}

.vault-shield-badge-uninit .dot {
	width: 8px !important;
	height: 8px !important;
	background-color: #64748B !important;
	border-radius: 50 !important;
	display: inline-block !important;
}

/* ROW 2: INPUT PARAMETERS */
.vault-matrix-row-inputs {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	gap: 1.5rem !important;
	margin-bottom: 2rem !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
	padding-bottom: 2rem !important;
}

.vault-input-block label {
	display: block !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #94A3B8 !important;
	margin-bottom: 0.5rem !important;
}

.vault-input-block input {
	width: 100% !important;
	box-sizing: border-box !important;
	background-color: #0A111F !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: #F8FAFC !important;
	padding: 0.75rem 1rem !important;
	border-radius: 6px !important;
	font-size: 1rem !important;
	outline: none !important;
	font-family: monospace !important;
	transition: border-color 0.15s ease !important;
}

.vault-input-block input:focus {
	border-color: var(--vault-accent, #F5A623) !important;
}

/* ROW 3: STEALTH CONTAINER */
.vault-matrix-row-stealth {
	background-color: rgba(0, 0, 0, 0.15) !important;
	border: 1px solid rgba(255, 255, 255, 0.02) !important;
	border-radius: 8px !important;
	padding: 1.5rem !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
}

.vault-stealth-text {
	max-width: 540px !important;
}

.vault-stealth-text h4 {
	margin: 0 0 0.25rem 0 !important;
	color: #F8FAFC !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.vault-stealth-text h4 svg {
	stroke: #A855F7 !important;
}

.vault-stealth-text p {
	margin: 0 !important;
	font-size: 0.8rem !important;
	color: #94A3B8 !important;
	line-height: 1.5 !important;
}

.vault-stealth-switch-wrapper {
	display: flex !important;
	align-items: center !important;
}

/* ROW 4: ACTION TRIGGER */
.vault-matrix-row-actions {
	text-align: right !important;
	margin-top: 2rem !important;
}

.vault-matrix-row-actions button {
	background-color: var(--vault-accent, #F5A623) !important;
	color: #0A111F !important;
	font-weight: 700 !important;
	padding: 0.85rem 2.5rem !important;
	border-radius: 6px !important;
	font-size: 0.9rem !important;
	cursor: pointer !important;
	border: none !important;
	font-family: sans-serif !important;
	transition: opacity 0.15s ease, transform 0.1s ease !important;
}

.vault-matrix-row-actions button:active {
	transform: scale(0.98) !important;
}


/* ==========================================================================
   ⚙️ SOVEREIGN IDENTITY GOVERNANCE PANEL LAYOUTS (SEKTOR 5 - ENBART TABS)
   ========================================================================== */

.vault-governance-panel {
	background-color: var(--vault-bg-surface, #121E36) !important;
	border: 1px solid var(--vault-border, rgba(255, 255, 255, 0.05)) !important;
	border-radius: 12px !important;
	padding: 2.5rem !important;
	margin-top: 2rem !important;
	/* box-shadow: 0 10px 40px rgba(10, 17, 31, 0.6) !important; */
}

.vault-gov-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
	padding-bottom: 1.25rem !important;
	margin-bottom: 2rem !important;
}

.vault-gov-title {
	color: var(--vault-text-primary, #F8FAFC) !important;
	margin: 0 !important;
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
}

.vault-gov-title svg {
	stroke: var(--vault-accent, #F5A623) !important;
}

.vault-gov-subtitle {
	margin: 0.5rem 0 0 0 !important;
	font-size: 0.85rem !important;
	color: var(--vault-text-secondary, #94A3B8) !important;
	line-height: 1.5 !important;
}

.vault-gov-body-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 2rem !important;
}

/* INPUT BLOCKS AND LABELS */
.vault-gov-row-interval {
	border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
	padding-bottom: 2rem !important;
}

.vault-gov-input-block {
	display: flex !important;
	flex-direction: column !important;
}

.vault-gov-input-block .form-label {
	display: block !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--vault-text-secondary, #94A3B8) !important;
	margin-bottom: 0.5rem !important;
}

.vault-gov-input-block input {
	width: 100% !important;
	box-sizing: border-box !important;
	background-color: #0A111F !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: #F8FAFC !important;
	padding: 0.75rem 1rem !important;
	border-radius: 6px !important;
	font-size: 1rem !important;
	outline: none !important;
	font-family: monospace !important;
	transition: border-color 0.15s ease !important;
}

.vault-gov-input-block input:focus {
	border-color: var(--vault-accent, #F5A623) !important;
}

/* STEALTH & RELAY TOGGLE CONTAINER BOXES */
.vault-gov-stealth-box {
	background-color: rgba(255, 255, 255, 0.01) !important;
	border: 1px solid rgba(255, 255, 255, 0.03) !important;
	border-radius: 8px !important;
	padding: 1.75rem !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
}

.vault-cellular-relay-box {
	background-color: rgba(255, 255, 255, 0.005) !important;
}

.vault-gov-stealth-text {
	max-width: 580px !important;
}

.vault-gov-stealth-text h4 {
	margin: 0 0 0.35rem 0 !important;
	color: #F8FAFC !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.vault-gov-stealth-text h4 svg {
	stroke: #A855F7 !important;
}

.vault-gov-accent-title svg {
	stroke: var(--vault-accent, #F5A623) !important;
}

.vault-gov-stealth-text p {
	margin: 0 !important;
	font-size: 0.85rem !important;
	color: #94A3B8 !important;
	line-height: 1.5 !important;
}

.vault-gov-switch-wrapper {
	display: flex !important;
	align-items: center !important;
	gap: 1rem !important;
}

/* COLLAPSIBLE FIELD MATRIX */
.vault-gov-collapsible-inputs {
	display: none; /* Manipuleras dynamic till 'grid' av JavaScript-motorn */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	margin-top: -0.5rem !important;
	padding: 1.5rem !important;
	background: rgba(0, 0, 0, 0.2) !important;
	border-radius: 8px !important;
	border: 1px solid rgba(255, 255, 255, 0.02) !important;
}

/* VITAL TELEMETRY STATUS CHASSIS */
.vault-gov-status-panel {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	background-color: #0A111F !important;
	padding: 0.75rem 1rem !important;
	border-radius: 6px !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	font-family: monospace !important;
	font-size: 0.85rem !important;
}

.vault-gov-status-label {
	color: #64748B !important;
}

.vault-gov-badge-drift {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	font-weight: 700 !important;
	color: #64748B !important;
}

.vault-gov-badge-drift .dot {
	width: 8px !important;
	height: 8px !important;
	background-color: #64748B !important;
	border-radius: 50% !important;
	display: inline-block !important;
}

/* COMMIT ACTION SLUSS */
.vault-gov-actions {
	text-align: right !important;
	margin-top: 0.5rem !important;
}

.vault-gov-actions button {
	background-color: var(--vault-accent, #F5A623) !important;
	color: #0A111F !important;
	font-weight: 700 !important;
	padding: 0.85rem 2.5rem !important;
	border-radius: 6px !important;
	font-size: 0.9rem !important;
	cursor: pointer !important;
	border: none !important;
	transition: opacity 0.15s ease !important;
}

/* ==========================================================================
   🔒 HERMETIC FOOTER
   ========================================================================== */
footer {
	border-top: 1px solid var(--vault-border);
	padding: 3rem 0;
	text-align: center;
	color: var(--vault-text-secondary);
	font-size: 0.85rem;
}

/* ==========================================================================
   🔒 PRIVACY SHIELD MUTATION (THE ANTI-PORNHUB EXTENSION - ENBART TABS)
   ========================================================================== */

 /*
body.privacy-shield-active .btn-primary,
#btn-save-node-settings,
#btn-trigger-sss-split,
#btn-manual-pulse-ping{
	background: var(--purple-glow, #A855F7) !important;
	color: #FFFFFF !important;
	border-color: rgba(168, 85, 247, 0.4) !important;
	box-shadow: 0 0 15px rgba(168, 85, 247, 0.25) !important;
}


body.privacy-shield-active .btn-primary, .vault-gov-actions button{
	background: var(--purple-glow, #A855F7) !important;
	color: #FFFFFF !important;
	border-color: rgba(168, 85, 247, 0.4) !important;
	box-shadow: 0 0 15px rgba(168, 85, 247, 0.25) !important;
}
body.privacy-shield-active .btn-primary {border-color:#000 !important; color: #000 !important;}

*/




/* ==========================================================================
🎛️ FEATURES ARCHITECTURE (PRODUKTENS KÄRNA)
========================================================================== */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 2rem;
	padding: 4rem 0 8rem 0;
}

.feature-card {
	background-color: var(--vault-bg-surface);
	border: 1px solid var(--vault-border);
	border-radius: 12px;
	padding: 2.5rem;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
	transform: translateY(-2px);
	border-color: rgba(31, 50, 84, 0.8);
}

.feature-icon {
	width: 48px;
	height: 48px;
	background: rgba(245, 166, 35, 0.05);
	border: 1px solid rgba(245, 166, 35, 0.2);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vault-accent);
	margin-bottom: 1.5rem;
}

.feature-card h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	letter-spacing: -0.02em;
}

.feature-card p {
	color: var(--vault-text-secondary);
	font-size: 0.95rem;
	line-height: 1.6;
}

.text {
	color: #b1b1b1 !important;
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 2.5em;
}

.btn-shield{background-color: #A855F7 !important; transition: background-color 0.15s ease, transform 0.1s ease;}
.btn-shield:hover { background-color: rgb(168, 85, 247, 0.8) !important;  }
.shield{color:#A855F7 !important;}

.fader{background:rgba(18, 30, 54, 0.69); border:0;}
#accountHeader{grid-template-columns: none !important;}

#container-privacy-stealth-inputs .switch-chassi input:checked + .slider-round {
	background-color: #A855F7 !important;
}

.activated{border: 1px solid rgba(151, 0, 255, 0.3) !important;}
@keyframes vf-pulse-glow {
	0% { transform: scale(1); box-shadow: 0 0 25px rgba(16, 185, 129, 0.25); }
	50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(16, 185, 129, 0.45); border-color: #34D399; color: #34D399; }
	100% { transform: scale(1); box-shadow: 0 0 25px rgba(16, 185, 129, 0.25); }
}