/* ==========================================================
	XENTRON MAIN STYLESHEET
	========================================================== */

/* 1. Variables */
:root { --color-bg:#fff; --color-bg-alt:#f5f9fb; --color-surface:rgba(255,255,255,0.95); --color-border:#d8f7ff; --color-primary:#00b7eb; --color-primary-accent:#00e5ff; --color-primary-rgb:0,183,235; --color-primary-accent-rgb:0,229,255; --color-text:#0a0a1f; --color-text-soft:#2d2f44; --color-text-muted:#546071; --shadow-soft:0 5px 20px rgba(var(--color-primary-rgb),0.12); --shadow-hover:0 10px 30px rgba(var(--color-primary-rgb),0.25),0 0 25px rgba(var(--color-primary-accent-rgb),0.3); --radius-sm:10px; --radius:20px; --radius-lg:32px; --radius-pill:60px; --gradient-primary:linear-gradient(135deg,var(--color-primary),var(--color-primary-accent)); --gradient-surface:linear-gradient(135deg,rgba(245,245,245,0.9),rgba(255,255,255,0.95)); --transition:.35s cubic-bezier(.4,.2,.2,1); }
body.dark { --color-bg:#000; --color-bg-alt:#0a0a0a; --color-surface:rgba(10,10,10,0.95); --color-border:#1f1f1f; --color-text:#f2f2f2; --color-text-soft:#e0e0e0; --color-text-muted:#a6a6a6; --shadow-soft:0 5px 20px rgba(0,0,0,0.6); --gradient-surface:linear-gradient(135deg,rgba(10,10,10,0.92),rgba(16,16,16,0.96)); }

/* 2. Base */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Roboto',sans-serif; line-height:1.6; color:var(--color-text); background:linear-gradient(140deg,var(--color-bg-alt),var(--color-bg)); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
a.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; z-index:-999; }
a.skip-link:focus { left:1rem; top:1rem; width:auto; height:auto; background:var(--color-primary); color:#021016; padding:.75rem 1.25rem; border-radius:var(--radius-pill); z-index:10000; box-shadow:0 0 0 3px #fff,0 0 0 6px var(--color-primary-accent); }

/* 3. Header */
header { position:fixed; inset:0 0 auto 0; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 3.2rem; background:rgba(255,255,255,0.75); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px); width:100%; z-index:800; border-bottom:1px solid rgba(var(--color-primary-rgb),0.15); transition:background 0.3s ease, box-shadow 0.3s ease; }
body.dark header { background:rgba(0,0,0,0.75); }
header.scrolled { box-shadow:0 4px 30px rgba(var(--color-primary-rgb),0.15); }
.logo { font-family:'Poppins',sans-serif; font-size:2rem; font-weight:700; letter-spacing:.5px; display:inline-flex; align-items:center; gap:.15rem; text-decoration:none; color:var(--color-text); }
.brand-x { color:var(--color-primary); text-shadow:0 0 20px rgba(var(--color-primary-rgb),0.6); animation:glowPulse 2s ease-in-out infinite; }
.brand-rest { color:var(--color-text); }
nav { margin-left:3rem; }
nav ul { list-style:none; display:flex; gap:2.2rem; font-family:'Poppins',sans-serif; flex-wrap:nowrap; }
nav li { flex:0 0 auto; }
nav a { text-decoration:none; color:var(--color-text-soft); font-weight:500; position:relative; padding:.35rem 0; transition:var(--transition); white-space:nowrap; }
nav a::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--gradient-primary); border-radius:2px; transition:var(--transition); box-shadow:0 0 6px rgba(var(--color-primary-rgb),0.8); }
nav a:hover,nav a:focus { color:var(--color-text); }
nav a:hover::after,nav a:focus::after,nav a.active::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:1rem; }
.dark-toggle,.hamburger { background:rgba(var(--color-primary-rgb),0.1); border:1px solid rgba(var(--color-primary-rgb),0.3); color:var(--color-text); padding:.65rem .9rem; border-radius:8px; cursor:pointer; font-size:.85rem; font-weight:600; letter-spacing:.5px; display:flex; align-items:center; gap:.4rem; backdrop-filter:blur(6px); transition:var(--transition); }
.dark-toggle:hover,.hamburger:hover { background:var(--gradient-primary); color:#061018; box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.25),0 10px 25px rgba(var(--color-primary-rgb),0.35); }
.hamburger { display:none; }
.hamburger span { display:block; width:20px; height:2px; background:currentColor; position:relative; }
.hamburger span::before,.hamburger span::after { content:""; position:absolute; left:0; width:100%; height:100%; background:currentColor; transition:var(--transition); }
.hamburger span::before { top:-6px; }
.hamburger span::after { top:6px; }
.hamburger.active span { background:transparent; }
.hamburger.active span::before { transform:translateY(6px) rotate(45deg); }
.hamburger.active span::after { transform:translateY(-6px) rotate(-45deg); }
.auth-buttons { display:flex; align-items:center; gap:1rem; }
.auth-buttons button { background:var(--gradient-primary); color:#061018; padding:.75rem 1.6rem; font-weight:600; font-family:'Poppins',sans-serif; border:none; border-radius:8px; cursor:pointer; letter-spacing:.5px; position:relative; box-shadow:0 0 0 1px rgba(var(--color-primary-rgb),0.4),0 4px 18px rgba(var(--color-primary-rgb),0.5); transition:var(--transition); }
.auth-buttons button::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,rgba(255,255,255,0.35),rgba(255,255,255,0) 40%); mix-blend-mode:overlay; opacity:.8; pointer-events:none; }
.auth-buttons button:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(var(--color-primary-rgb),0.55),0 0 22px rgba(var(--color-primary-accent-rgb),0.7); }

/* 4. Hero */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; padding:7rem 2rem 5rem; }
.hero::before,.hero::after { content:""; position:absolute; width:900px; height:900px; background:radial-gradient(circle at 30% 30%,rgba(var(--color-primary-accent-rgb),0.45),transparent 65%); top:-300px; left:-250px; filter:blur(40px); opacity:.55; animation:floatBlob 18s linear infinite; }
.hero::after { left:auto; right:-280px; top:auto; bottom:-320px; background:radial-gradient(circle at 70% 70%,rgba(var(--color-primary-rgb),0.45),transparent 65%); animation:floatBlobAlt 22s linear infinite; }
@keyframes floatBlob { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(60px,40px) scale(1.15);} 100%{transform:translate(0,0) scale(1);} }
@keyframes floatBlobAlt { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(-70px,-50px) scale(1.2);} 100%{transform:translate(0,0) scale(1);} }
.hero-content { position:relative; z-index:2; max-width:1000px; }
.badge { display:inline-flex; align-items:center; gap:.55rem; padding:.55rem 1.1rem; border:1px solid rgba(var(--color-primary-rgb),0.4); background:rgba(var(--color-primary-rgb),0.08); border-radius:8px; font-size:.75rem; letter-spacing:1px; font-weight:600; text-transform:uppercase; color:var(--color-primary); margin-bottom:1.3rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15); }
.hero h1 { font-family:'Poppins',sans-serif; font-size:clamp(2.6rem,6.5vw,4.5rem); line-height:1.05; margin:0 0 1.3rem; letter-spacing:-1px; background:linear-gradient(100deg,var(--color-text) 30%,var(--color-primary) 85%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 10px 40px rgba(var(--color-primary-rgb),0.25); animation:glowPulse 3.2s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{filter:drop-shadow(0 0 8px rgba(var(--color-primary-rgb),0.35));} 50%{filter:drop-shadow(0 0 22px rgba(var(--color-primary-accent-rgb),0.75));} }
.hero p { font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--color-text-muted); max-width:760px; margin:0 auto 2.4rem; }
.hero-cta { display:flex; flex-wrap:wrap; justify-content:center; gap:1.1rem; }
.btn { --btn-bg:var(--gradient-primary); background:var(--btn-bg); color:#061018; padding:1.05rem 2.4rem; border:none; font-weight:700; font-family:'Poppins',sans-serif; letter-spacing:.6px; border-radius:8px; cursor:pointer; position:relative; isolation:isolate; overflow:hidden; transition:var(--transition); box-shadow:0 4px 18px rgba(var(--color-primary-rgb),0.45),0 0 0 1px rgba(var(--color-primary-accent-rgb),0.45); }
.btn::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,0.65),rgba(255,255,255,0) 42%); mix-blend-mode:overlay; opacity:.85; pointer-events:none; }
.btn:hover { /* glow only, no pop-up */ transform:none; box-shadow:0 12px 35px rgba(var(--color-primary-rgb),0.6), 0 0 25px rgba(var(--color-primary-accent-rgb),0.7), 0 0 50px rgba(var(--color-primary-accent-rgb),0.5); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(var(--color-primary-accent-rgb),0.35), 0 0 18px rgba(var(--color-primary-accent-rgb),0.6); }
.btn.secondary { --btn-bg:linear-gradient(135deg,#0f1825,#172231); color:var(--color-primary-accent); box-shadow:0 4px 18px rgba(0,0,0,0.35),0 0 0 1px rgba(var(--color-primary-rgb),0.3); }
.btn.secondary:hover { color:#09131d; background:var(--gradient-primary); transform:none; }

/* Ensure button text readability across themes */
.btn, .btn-mini { color: #061018; }
body.dark .btn, body.dark .btn-mini { color: #eaeaea; }

/* Disable pop-up hover animation for non-hero CTAs (login/register/send message) */
.modal .btn:hover,
.contact .btn:hover {
	transform:none;
	box-shadow:0 4px 18px rgba(var(--color-primary-rgb),0.45), 0 0 0 1px rgba(var(--color-primary-accent-rgb),0.45), 0 0 14px rgba(var(--color-primary-accent-rgb),0.6), 0 0 28px rgba(var(--color-primary-accent-rgb),0.45);
}

/* 5. Generic Sections */
main { display:block; }
section { padding:7rem 3rem; max-width:1500px; margin:0 auto; position:relative; }
section.compact { padding:4.5rem 3rem; }
h2 { font-family:'Poppins',sans-serif; font-size:clamp(2.1rem,4.2vw,3.1rem); text-align:center; margin:0 0 3.7rem; letter-spacing:-.5px; color:var(--color-text); position:relative; }
h2 span.gradient { background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2::after { content:""; display:block; width:110px; height:4px; margin:1.35rem auto 0; border-radius:4px; background:var(--gradient-primary); box-shadow:0 0 0 4px rgba(var(--color-primary-rgb),0.2),0 0 12px rgba(var(--color-primary-accent-rgb),0.8); }

/* 6. About */
.about { background:var(--color-surface); border-radius:var(--radius-lg); padding:5rem clamp(1.5rem,3.5vw,5rem); box-shadow:0 10px 40px rgba(var(--color-primary-rgb),0.18),0 0 0 1px rgba(var(--color-primary-rgb),0.18); backdrop-filter:blur(7px); display:grid; gap:2.1rem; }
.about p { font-size:1.07rem; line-height:1.65; color:var(--color-text-soft); text-align:justify; }
.about-highlight { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.8rem; margin-top:1.2rem; }
.about-stat { background:var(--gradient-surface); padding:1.4rem 1.2rem; border-radius:var(--radius); text-align:center; position:relative; overflow:hidden; border:1px solid rgba(var(--color-primary-rgb),0.2); }
.about-stat strong { display:block; font-size:1.8rem; font-family:'Poppins',sans-serif; background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.35rem; }
.about-stat span { font-size:.8rem; letter-spacing:1px; text-transform:uppercase; font-weight:600; color:var(--color-text-muted); }

/* 7. How It Works */
.how-it-works { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:2.2rem; padding-bottom:.5rem; }
.how-it-works::-webkit-scrollbar { height:6px; }
.how-it-works::-webkit-scrollbar-thumb { background:rgba(var(--color-primary-rgb),0.4); border-radius:4px; }
.step { flex:0 0 260px; position:relative; background:var(--gradient-surface); padding:2.2rem 1.6rem 2.4rem; border-radius:var(--radius); box-shadow:var(--shadow-soft); border:1px solid rgba(var(--color-primary-rgb),0.25); overflow:hidden; transition:var(--transition); }
.step::before { content:attr(data-step); position:absolute; top:10px; right:12px; font-size:.65rem; font-weight:700; letter-spacing:1.2px; padding:.35rem .6rem; border-radius:var(--radius-pill); background:rgba(var(--color-primary-rgb),0.15); color:var(--color-primary); }
.step h3 { font-size:1.15rem; margin:0 0 .55rem; font-family:'Poppins'; color:var(--color-primary); }
.step p { font-size:.8rem; color:var(--color-text-muted); }

/* 8. Features */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2.6rem; }
.feature { position:relative; text-align:left; padding:2.4rem 2rem 2.6rem; border-radius:var(--radius); background:var(--gradient-surface); border:1px solid rgba(var(--color-primary-rgb),0.22); box-shadow:var(--shadow-soft); overflow:hidden; transition:var(--transition); }
.feature::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 14% 18%,rgba(var(--color-primary-accent-rgb),0.4),transparent 65%); opacity:.55; mix-blend-mode:plus-lighter; pointer-events:none; }
.feature h3 { font-size:1.25rem; color:var(--color-primary); margin:0 0 .75rem; letter-spacing:.4px; }
.feature p { font-size:.95rem; color:var(--color-text-muted); margin:0; }
.feature:hover { transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow-hover); }

/* 9. Tokenomics */
.tokenomics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2.2rem; }
.token-card { background:var(--gradient-surface); border:1px solid rgba(var(--color-primary-rgb),0.2); padding:2rem 1.6rem 2.2rem; border-radius:var(--radius); position:relative; overflow:hidden; backdrop-filter:blur(4px); }
.token-card h4 { margin:0 0 .6rem; font-family:'Poppins'; font-size:1.05rem; letter-spacing:.5px; color:var(--color-primary); }
.token-card p { margin:0; font-size:.9rem; color:var(--color-text-muted); }
.progress { margin-top:.6rem; width:100%; height:8px; background:rgba(var(--color-primary-rgb),0.15); border-radius:6px; position:relative; overflow:hidden; }
.progress span { position:absolute; inset:0 auto 0 0; background:var(--gradient-primary); width:0; animation:growBar 2.4s ease forwards; border-radius:inherit; }
@keyframes growBar { from{width:0;} to{width:var(--val);} }
.token-note { font-size:.7rem; text-transform:uppercase; letter-spacing:1px; margin-top:1.2rem; color:var(--color-text-muted); text-align:center; }

/* 10. Roadmap */
.roadmap-timeline { position:relative; margin:2rem auto 0; max-width:900px; }
.roadmap-timeline::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; background:linear-gradient(to bottom,var(--color-primary),var(--color-primary-accent)); transform:translateX(-50%); border-radius:3px; }
.roadmap-item { position:relative; width:50%; padding:1.6rem 2.2rem 2rem; }
.roadmap-item:nth-child(odd) { left:0; text-align:right; }
.roadmap-item:nth-child(even) { left:50%; }
.roadmap-item .card { background:var(--gradient-surface); border:1px solid rgba(var(--color-primary-rgb),0.25); border-radius:var(--radius); padding:1.3rem 1.35rem 1.5rem; box-shadow:var(--shadow-soft); position:relative; }
.roadmap-item .dot { position:absolute; top:1.2rem; width:16px; height:16px; border-radius:50%; background:var(--gradient-primary); box-shadow:0 0 0 4px rgba(var(--color-primary-rgb),0.25),0 0 12px rgba(var(--color-primary-accent-rgb),0.9); }
.roadmap-item:nth-child(odd) .dot { right:-8px; }
.roadmap-item:nth-child(even) .dot { left:-8px; }
.roadmap-item h4 { margin:0 0 .35rem; font-family:'Poppins'; font-size:1rem; letter-spacing:.5px; color:var(--color-primary); }
.roadmap-item p { margin:0; font-size:.85rem; color:var(--color-text-muted); }

/* 11. Token Symbol */
.token-symbol { color:#d4af37; font-weight:600; }
body.dark .token-symbol { color:#ffcf40; }

/* 12. Contact & Forms */
.contact { background:var(--color-surface); box-shadow:0 10px 40px rgba(var(--color-primary-rgb),0.18); border-radius:var(--radius-lg); padding:5rem clamp(1.5rem,3.5vw,5rem); display:grid; gap:3rem; }
.contact-wrapper { display:grid; gap:2.6rem; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); align-items:start; }
form { display:flex; flex-direction:column; width:100%; }
label { font-size:.75rem; font-weight:600; letter-spacing:.7px; text-transform:uppercase; margin:0 0 .4rem; color:var(--color-text-muted); }
input,textarea,select { font-family:inherit; margin:0 0 1.55rem; padding:1rem 1.1rem 1.05rem; border:1px solid var(--color-border); background:linear-gradient(135deg,rgba(255,255,255,0.75),rgba(255,255,255,0.55)); color:var(--color-text); border-radius:8px; font-size:.95rem; transition:var(--transition); resize:vertical; min-height:52px; }
body.dark input,body.dark textarea,body.dark select { background:linear-gradient(135deg,rgba(18,18,18,0.95),rgba(22,22,22,0.95)); border-color:#2a2a2a; color:#f0f0f0; }
body.dark ::placeholder { color:#8d8d8d; }
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--color-primary-accent); box-shadow:0 0 0 3px rgba(var(--color-primary-accent-rgb),0.3); }
::placeholder { color:var(--color-text-muted); }
.password-field { position:relative; display:flex; align-items:center; margin:0 0 .85rem; }
.password-field input { margin:0; width:100%; padding-right:3rem; }
.toggle-password { position:absolute; right:0; top:0; bottom:0; background:none; border:none; cursor:pointer; padding:0 1rem; color:var(--color-text-muted); transition:var(--transition); z-index:10; display:flex; align-items:center; justify-content:center; }
.toggle-password:hover { color:var(--color-primary); }
.toggle-password:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:4px; }
.toggle-password .eye-icon { width:20px; height:20px; stroke:currentColor; transition:var(--transition); }
.form-row { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.form-footnote { font-size:.65rem; color:var(--color-text-muted); letter-spacing:.6px; text-align:center; margin-top:.6rem; }
.forgot-password-link:hover { text-decoration:underline; }
.status { font-size:.78rem; margin-top:-.8rem; margin-bottom:1.3rem; min-height:18px; font-weight:600; letter-spacing:.6px; }
.status.ok { color:#1d8650; }
.status.err { color:#b02b2b; }

/* FAQ section styling */
#faq { max-width:1100px; margin:0 auto; }
#faq .faq { margin-top:2.2rem; display:flex; flex-direction:column; gap:1.1rem; }
.faq-item { background:var(--gradient-surface); border-radius:var(--radius); border:1px solid rgba(var(--color-primary-rgb),0.26); box-shadow:0 14px 40px rgba(var(--color-primary-rgb),0.16); padding:1.1rem 1.3rem 1.25rem; position:relative; overflow:hidden; }
.faq-item::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 0 0,rgba(var(--color-primary-accent-rgb),0.35),transparent 60%); opacity:.45; mix-blend-mode:screen; pointer-events:none; }
.faq-question { position:relative; z-index:1; font-family:'Poppins',sans-serif; font-size:1rem; font-weight:600; color:var(--color-text); display:flex; align-items:center; justify-content:space-between; gap:.75rem; cursor:pointer; }
.faq-question::after { content:""; flex:0 0 22px; height:22px; border-radius:50%; border:1px solid rgba(var(--color-primary-rgb),0.6); box-shadow:0 0 0 1px rgba(var(--color-primary-rgb),0.2); position:relative; }
.faq-question::before { content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); width:22px; text-align:center; font-size:1.05rem; color:var(--color-primary); transition:transform .25s ease; }
.faq-item.open .faq-question::before { transform:translateY(-50%) rotate(45deg); }
.faq-answer { position:relative; z-index:1; margin-top:.35rem; padding-top:.65rem; border-top:1px dashed rgba(var(--color-primary-rgb),0.3); font-size:.9rem; color:var(--color-text-muted); line-height:1.7; max-height:0; overflow:hidden; opacity:0; transform:translateY(6px); transition:max-height .35s ease, opacity .25s ease, transform .25s ease; }
.faq-item.open .faq-answer { max-height:260px; opacity:1; transform:translateY(0); }
.faq-answer p { margin:.1rem 0 .4rem; }
.faq-answer ul { margin:.1rem 0 0 1.1rem; padding:0; list-style:disc; }
.faq-answer li { margin:.2rem 0; }
@media (max-width:700px){
	#faq .faq { gap:.8rem; }
	.faq-item { padding:.95rem 1rem 1.05rem; }
}

/* Light theme: enhance visibility for Get in Touch inputs only */
body:not(.dark) #contactForm input,
body:not(.dark) #contactForm textarea,
body:not(.dark) #contactForm select {
	background:#eef2f6;
	border-color:#cfd8e3;
	color:var(--color-text);
}
body:not(.dark) #contactForm input::placeholder,
body:not(.dark) #contactForm textarea::placeholder {
	color:#5f6b7a;
	opacity:1;
}
body:not(.dark) #contactForm input:focus,
body:not(.dark) #contactForm textarea:focus,
body:not(.dark) #contactForm select:focus {
	background:#e9eef4;
	border-color:var(--color-primary);
	box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.25);
}

/* Ensure select visibility for registration and profile country code */
#registerForm select,
body.dark #registerForm select,
#countryCode,
body.dark #countryCode {
	color: var(--color-text);
}
/* Improve contrast for dark theme select option text */
body.dark #registerForm select option,
body.dark #countryCode option { color: #eaeaea; background:#111; }

/* Inline phone row spacing */
#registerForm .inline-two > div select,
#registerForm .inline-two > div input { margin-bottom: 0; }

/* 13. Newsletter */
.newsletter { background:var(--gradient-surface); border:1px solid rgba(var(--color-primary-rgb),0.25); border-radius:var(--radius); padding:2.3rem 2rem 2.6rem; box-shadow:var(--shadow-soft); position:relative; overflow:hidden; }
.newsletter h3 { margin:0 0 .8rem; font-family:'Poppins'; font-size:1.25rem; color:var(--color-primary); }
.newsletter p { margin:0 0 1.4rem; font-size:.85rem; line-height:1.5; color:var(--color-text-muted); }
.newsletter form { display:flex; flex-direction:row; gap:.75rem; }
.newsletter input { flex:1; margin:0; border-radius:8px; }
.newsletter .btn { padding:.9rem 1.6rem; border-radius:8px; }

/* 14. Footer */
footer { background:linear-gradient(to top,var(--color-bg-alt),var(--color-bg)); color:var(--color-text-muted); padding:3.2rem 3rem 2.8rem; font-size:.85rem; position:relative; border-top:1px solid rgba(var(--color-primary-rgb),0.15); }
.footer-grid { display:grid; gap:2.6rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); max-width:1500px; margin:0 auto 2.8rem; }
.footer-col h5 { margin:0 0 1rem; font-size:.85rem; letter-spacing:1px; font-family:'Poppins'; color:var(--color-primary); font-weight:600; }
.footer-col ul { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.footer-col a { color:var(--color-text-muted); text-decoration:none; font-size:.78rem; letter-spacing:.4px; transition:var(--transition); }
.footer-col a:hover { color:var(--color-primary); }
.socials { display:flex; gap:.75rem; }
.socials a { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg,rgba(var(--color-primary-rgb),0.15),rgba(var(--color-primary-accent-rgb),0.15)); color:var(--color-primary); text-decoration:none; font-size:1rem; box-shadow:0 0 0 1px rgba(var(--color-primary-rgb),0.25); transition:var(--transition); }
.socials a:hover { background:var(--gradient-primary); color:#061018; box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.3),0 10px 25px rgba(var(--color-primary-rgb),0.45); transform:translateY(-3px); }
.legal { text-align:center; font-size:.7rem; letter-spacing:.7px; text-transform:uppercase; }
.legal a { color:var(--color-primary); text-decoration:none; }
.legal a:hover { text-decoration:underline; }

/* 15. Modals */
.modal { display:none; position:fixed; inset:0; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.8); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:1rem; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.modal.open { display:flex; }
.modal-content { background:var(--gradient-surface); padding:1.4rem 1.1rem 1.4rem; border-radius:16px; width:100%; max-width:360px; max-height:90vh; overflow-y:auto; overflow-x:hidden; position:relative; box-shadow:0 12px 30px -12px rgba(0,0,0,0.6),0 0 0 1px rgba(var(--color-primary-rgb),0.3); }
.modal-content.register-modal { max-width:520px; padding:2rem 2.2rem 2rem; }
body.dark .modal-content { background:linear-gradient(135deg,rgba(12,12,12,0.98),rgba(18,18,18,0.98)); box-shadow:0 12px 30px -12px rgba(0,0,0,0.9),0 0 0 1px #222; }
.close { position:absolute; top:8px; right:10px; background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--color-primary); text-shadow:0 0 12px rgba(var(--color-primary-accent-rgb),0.55); transition:var(--transition); transform-origin:center; }
.close:hover { transform:scale(1.05); }
.modal h2 { font-family:'Poppins'; font-size:1.35rem; margin:0 0 1rem; letter-spacing:-.3px; color:var(--color-primary); }
.checkbox { display:flex; align-items:flex-start; gap:.6rem; margin:0 0 1.3rem; font-size:.75rem; color:var(--color-text-muted); line-height:1.35; }
.checkbox input { margin-top:2px; }
.alt-link { font-size:.75rem; text-align:center; margin-top:.8rem; }
.alt-link button { background:none; border:none; color:var(--color-primary); font-weight:600; cursor:pointer; }
.alt-link button:hover { text-decoration:underline; }
.forgot-password-link:hover { text-decoration:underline !important; }

/* Compact form controls inside modals only */
.modal form label { font-size:.7rem; margin:0 0 .25rem; }
.modal input, .modal textarea, .modal select { min-height:42px; padding:.7rem .9rem; margin:0 0 .9rem; font-size:.9rem; }
.modal .btn { padding:.78rem 1.2rem; font-size:.95rem; }
.modal .checkbox { margin:0 0 .9rem; font-size:.72rem; }
.modal .status { font-size:.72rem; margin-top:-.4rem; margin-bottom:.8rem; }

/* Register modal professional spacing */
#registerModal form label { font-size:.75rem; margin:0 0 .35rem; }
#registerModal input, #registerModal textarea, #registerModal select { min-height:48px; padding:.85rem 1rem; margin:0 0 1.15rem; font-size:.95rem; }
#registerModal .password-field { margin:0 0 1.15rem; }
#registerModal .password-field input { margin:0; }
#registerModal .form-row { margin-bottom:0; }
#registerModal .form-row input, #registerModal .form-row select { margin-bottom:1.15rem; }
#registerModal .form-row.inline-two { display:grid; align-items:start; }
#registerModal .form-row.inline-two > div { display:flex; flex-direction:column; }
#registerModal .form-row.inline-two select, #registerModal .form-row.inline-two input { width:100%; }
#registerModal .btn { padding:.95rem 1.6rem; font-size:1rem; margin-top:.4rem; }
#registerModal .checkbox { margin:0 0 1.15rem; font-size:.8rem; }
#registerModal .status { font-size:.78rem; margin-top:-.5rem; margin-bottom:1rem; }
#registerModal h2 { margin-bottom:1.4rem; }

/* Wide modal for long content */
.modal-content.wide { max-width: 820px; }
.modal .modal-body { font-size:.92rem; color:var(--color-text-soft); line-height:1.65; }

/* Fix: Align checkbox text with checkbox in Register modal */
#registerModal .checkbox { align-items: center; line-height: 1; }
#registerModal .checkbox label { margin: 0; align-self: center; display: inline-block; line-height: 1; }
#registerModal .checkbox input[type="checkbox"] {
	margin: 0; /* override generic .modal input margin */
	padding: 0; /* ensure no inner space */
	width: 16px; height: 16px; min-height: 16px; /* standardize size */
	box-sizing: border-box;
	align-self: center;
	position: relative; top: -1px; /* slight visual nudge for Windows */
}
.modal .modal-body h3 { font-family:'Poppins',sans-serif; font-size:1.05rem; margin:1rem 0 .5rem; color:var(--color-primary); }
.modal .modal-body p { margin:.35rem 0; }
.modal .modal-body ul { margin:.35rem 0 .8rem 1.1rem; }

/* 16. Utilities */
.gradient-text { background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.divider { width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--color-primary),transparent); margin:2.5rem 0 2.8rem; opacity:.5; }
.note { font-size:.65rem; letter-spacing:.6px; color:var(--color-text-muted); text-transform:uppercase; }
.badge-inline { display:inline-block; background:rgba(var(--color-primary-rgb),0.12); color:var(--color-primary); padding:.3rem .7rem; font-size:.6rem; letter-spacing:.6px; font-weight:600; border-radius:var(--radius-pill); margin-left:.5rem; }
.reveal { opacity:0; transform:translateY(20px); will-change:transform, opacity; }
.reveal.visible { animation:fadeInUp .9s cubic-bezier(.4,.2,.1,1) forwards; }
@keyframes fadeInUp { from{opacity:0; transform:translateY(40px);} to{opacity:1; transform:translateY(0);} }
.testimonials,.testimonial,.testimonial-grid { display:none !important; }

/* 17. Responsive */
@media (max-width:1180px) { header { padding:1rem 1.5rem; } nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--gradient-surface); padding:1.6rem 2rem 2rem; box-shadow:0 30px 40px -15px rgba(var(--color-primary-rgb),0.3); border-bottom:1px solid rgba(var(--color-primary-rgb),0.25); z-index:900; } nav.open { display:block; } nav ul { flex-direction:column; gap:1.1rem; } nav a { white-space:normal; } .hamburger { display:flex; } header.scrolled { padding:1rem 1.5rem; } }
@media (max-width:900px) { .roadmap-timeline::before { left:6px; } .roadmap-item,.roadmap-item:nth-child(even),.roadmap-item:nth-child(odd) { left:0; width:100%; text-align:left; padding-left:2.5rem; } .roadmap-item .dot { left:-2px; right:auto; } }
@media (max-width:780px) {
	header { padding:.8rem 1rem; }
	header.scrolled { padding:.8rem 1rem; }
	nav { margin-left:1rem; }
	nav ul { gap:1rem; }
	.hero { padding:6.5rem 1rem 4rem; }
	section { padding:5.5rem 1rem; }
	.about { padding:3.6rem 1.2rem; }
	.contact { padding:3.8rem 1.2rem; }
	.newsletter form { flex-direction:column; }
	.newsletter .btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* End of stylesheet */

/* 18. Splash Screen */
.splash { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,var(--color-bg-alt),var(--color-bg)); pointer-events:none; opacity:1; transition:opacity .6s ease; }
.splash-x { font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(6rem, 20vw, 18rem); letter-spacing:.05em; line-height:1; color:var(--color-primary); text-shadow:0 0 22px rgba(var(--color-primary-rgb),0.85), 0 0 48px rgba(var(--color-primary-accent-rgb),0.75), 0 0 120px rgba(var(--color-primary-accent-rgb),0.5); filter:drop-shadow(0 0 30px rgba(var(--color-primary-accent-rgb),0.25)); animation:splashPulse 2.2s ease-in-out infinite; }
body.dark .splash-x { color:var(--color-primary-accent); text-shadow:0 0 24px rgba(var(--color-primary-accent-rgb),0.95), 0 0 56px rgba(var(--color-primary-rgb),0.8), 0 0 140px rgba(var(--color-primary-rgb),0.55); }
@keyframes splashPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.06); opacity:.95; } }
body:not(.loading) .splash { opacity:0; }

/* Fade-in site content after splash */
body.loading header,
body.loading main,
body.loading footer { opacity:0; transform:translateY(8px); transition:opacity .8s ease, transform .8s ease; }
body:not(.loading) header,
body:not(.loading) main,
body:not(.loading) footer { opacity:1; transform:none; }

/* 19. Register modal scrollbar theme (adaptive: white+blue in light, black+blue in dark) */
#registerModal .modal-content,
#registerModal #registerForm {
	scrollbar-color: var(--color-primary) #fff; /* thumb track */
	scrollbar-width: thin;
}
body.dark #registerModal .modal-content,
body.dark #registerModal #registerForm {
	scrollbar-color: var(--color-primary) #000;
}
#registerModal .modal-content::-webkit-scrollbar,
#registerModal #registerForm::-webkit-scrollbar { width: 10px; height: 10px; }
#registerModal .modal-content::-webkit-scrollbar-track,
#registerModal #registerForm::-webkit-scrollbar-track { background: #fff; border-radius: 8px; }
body.dark #registerModal .modal-content::-webkit-scrollbar-track,
body.dark #registerModal #registerForm::-webkit-scrollbar-track { background: #000; }
#registerModal .modal-content::-webkit-scrollbar-thumb,
#registerModal #registerForm::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--color-primary), var(--color-primary-accent));
	border-radius: 8px;
	border: 2px solid #fff; /* creates separation from white track */
	box-shadow: inset 0 0 6px rgba(0,0,0,0.15);
}
body.dark #registerModal .modal-content::-webkit-scrollbar-thumb,
body.dark #registerModal #registerForm::-webkit-scrollbar-thumb {
	border-color: #000;
	box-shadow: inset 0 0 6px rgba(255,255,255,0.2);
}
#registerModal .modal-content::-webkit-scrollbar-thumb:hover,
#registerModal #registerForm::-webkit-scrollbar-thumb:hover { background: var(--color-primary-accent); }

/* Match scrollbar theme for Privacy, Terms and Status modals */
#privacyModal .modal-content,
#tosModal .modal-content,
#statusModal .modal-content {
	scrollbar-color: var(--color-primary) #fff;
	scrollbar-width: thin;
}
body.dark #privacyModal .modal-content,
body.dark #tosModal .modal-content,
body.dark #statusModal .modal-content {
	scrollbar-color: var(--color-primary) #000;
}
#privacyModal .modal-content::-webkit-scrollbar,
#tosModal .modal-content::-webkit-scrollbar,
#statusModal .modal-content::-webkit-scrollbar { width: 10px; height: 10px; }
#privacyModal .modal-content::-webkit-scrollbar-track,
#tosModal .modal-content::-webkit-scrollbar-track,
#statusModal .modal-content::-webkit-scrollbar-track { background: #fff; border-radius: 8px; }
body.dark #privacyModal .modal-content::-webkit-scrollbar-track,
body.dark #tosModal .modal-content::-webkit-scrollbar-track,
body.dark #statusModal .modal-content::-webkit-scrollbar-track { background: #000; }
#privacyModal .modal-content::-webkit-scrollbar-thumb,
#tosModal .modal-content::-webkit-scrollbar-thumb,
#statusModal .modal-content::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--color-primary), var(--color-primary-accent));
	border-radius: 8px;
	border: 2px solid #fff;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.15);
}
body.dark #privacyModal .modal-content::-webkit-scrollbar-thumb,
body.dark #tosModal .modal-content::-webkit-scrollbar-thumb,
body.dark #statusModal .modal-content::-webkit-scrollbar-thumb {
	border-color: #000;
	box-shadow: inset 0 0 6px rgba(255,255,255,0.2);
}
#privacyModal .modal-content::-webkit-scrollbar-thumb:hover,
#tosModal .modal-content::-webkit-scrollbar-thumb:hover,
#statusModal .modal-content::-webkit-scrollbar-thumb:hover { background: var(--color-primary-accent); }

/* 20. Hide root page scrollbar but keep scroll functionality */
html, body { -ms-overflow-style: none; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: transparent; border: none; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; }

/* 21. Minting Animation */
.mint-anim { position:relative; width:180px; height:180px; margin:1rem auto 0; filter:drop-shadow(0 10px 30px rgba(var(--color-primary-rgb),0.35)); opacity:.85; }
.mint-anim .ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(var(--color-primary-rgb),0.25); box-shadow:0 0 0 2px rgba(var(--color-primary-accent-rgb),0.12) inset; transform:scale(0.95); }
.mint-anim .r1 { animation:mintSpin 8s linear infinite; }
.mint-anim .r2 { inset:12px; animation:mintSpin 6s linear infinite reverse; border-color:rgba(var(--color-primary-accent-rgb),0.35); }
.mint-anim .r3 { inset:24px; animation:mintSpin 4.5s linear infinite; border-color:rgba(var(--color-primary-rgb),0.5); }
.mint-anim .core { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:.5px; color:#061018; background:var(--gradient-primary); box-shadow:0 0 0 6px rgba(var(--color-primary-rgb),0.2), 0 18px 35px rgba(var(--color-primary-rgb),0.45); }
.mint-anim:not(.on) { filter:grayscale(0.7) opacity(.6); }
@keyframes mintSpin { from{ transform:rotate(0deg) scale(0.95); } to{ transform:rotate(360deg) scale(0.95);} }

/* ===================================================================== */
/* User portal layout                                                   */
/* ===================================================================== */

body.user-area {
	margin:0;
	min-height:100vh;
	font-family:'Roboto',sans-serif;
	background:linear-gradient(140deg,var(--color-bg-alt),var(--color-bg));
	color:var(--color-text);
	transition:background .35s ease,color .35s ease;
}
body.dark.user-area { color:var(--color-text); }

.user-shell {
	min-height: 100vh;
	margin: 0 auto;
	padding: 1.6rem;
	display: flex;
	gap: 1.4rem;
	width: 100%;
	max-width: 1440px;
}

.user-sidebar {
	flex: 0 0 230px;
	border-radius:16px;
	background:linear-gradient(145deg,#020617,#020617);
	border:1px solid rgba(15,23,42,0.9);
	box-shadow:0 16px 40px rgba(0,0,0,0.65);
	padding:1.4rem 1.1rem 1.6rem;
	display:flex;
	flex-direction:column;
	position:relative;
	overflow:hidden;
}
.user-sidebar::before,
.user-main::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 18% 14%,rgba(var(--color-primary-rgb),0.22),transparent 60%); opacity:.5; mix-blend-mode:plus-lighter; }
body.dark .user-sidebar::before,
body.dark .user-main::before { background:radial-gradient(circle at 18% 14%,rgba(var(--color-primary-accent-rgb),0.25),transparent 60%); }


.sidebar-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:.65rem;
	margin-bottom:1rem;
}

.sidebar-brand {
	font-family:'Poppins',sans-serif;
	font-weight:700;
	font-size:1.1rem;
	color:var(--color-primary);
	text-decoration:none;
	display:inline-flex;
	align-items:center;
	gap:.2rem;
}

.sidebar-theme-toggle {
	background:rgba(15,23,42,0.9);
	border:1px solid rgba(51,65,85,0.9);
	border-radius:999px;
	width:30px;
	height:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#e5e7eb;
	cursor:pointer;
	font-size:0.8rem;
	box-shadow:0 0 0 1px rgba(15,23,42,1);
	transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.sidebar-theme-toggle:hover {
	background:var(--gradient-primary);
	color:#020617;
	box-shadow:0 0 0 1px rgba(var(--color-primary-rgb),0.7),0 12px 26px rgba(0,0,0,0.9);
	transform:translateY(-1px);
}

.sidebar-user {
	display:flex;
	align-items:center;
	gap:.75rem;
	margin-bottom:1.4rem;
}

.sidebar-avatar {
	width:32px;
	height:32px;
	border-radius:999px;
	background:#020617;
	border:1px solid rgba(55,65,81,0.9);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:.85rem;
	font-weight:600;
	color:#e5e7eb;
}

.sidebar-user-meta { display:flex; flex-direction:column; gap:.1rem; }

.sidebar-name {
	display:flex;
	align-items:center;
	gap:.35rem;
	font-weight:600;
	font-size:.9rem;
	color:#e5e7eb;
}

.verify-badge {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:1.35rem;
	font-weight:900;
	line-height:1;
}
.verify-badge.badge-green { color:#22c55e; }
.verify-badge.badge-blue { color:#60a5fa; }

.sidebar-email {
	font-size:.76rem;
	color:#64748b;
	word-break:break-all;
}

.sidebar-nav ul {
	list-style:none;
	margin:.2rem 0 1.2rem;
	padding:0;
	display:grid;
	gap:.35rem;
}

.sidebar-nav .nav-link {
	display:flex;
	align-items:center;
	gap:.5rem;
	padding:.42rem .6rem;
	border-radius:8px;
	text-decoration:none;
	font-size:.83rem;
	color:#94a3b8;
	transition:background .14s ease,color .14s ease;
}
.sidebar-nav .nav-link .tab-dot {
	width:8px;
	height:8px;
	border-radius:999px;
	background:rgba(51,65,85,0.9);
}
.sidebar-nav .nav-link .tab-label { flex:1; }

.sidebar-nav .nav-link:hover {
	background:rgba(15,23,42,0.9);
	color:#e5e7eb;
}

.sidebar-nav .nav-link.active {
	background:rgba(15,23,42,0.9);
	color:var(--color-primary);
	font-weight:600;
}
.sidebar-nav .nav-link.active .tab-dot { background:var(--color-primary); box-shadow:0 0 0 3px rgba(56,189,248,0.4); }

.sidebar-nav .nav-link.disabled {
	color:rgba(148,163,184,0.4);
	pointer-events:none;
	background:transparent;
}

.sidebar-footer { margin-top:auto; }

.sidebar-logout .btn-mini { width:100%; }

.sidebar-meta {
	margin-top:1.1rem;
	font-size:.75rem;
	color:var(--color-text-muted);
}
.sidebar-meta a { color:var(--color-primary); text-decoration:none; }

.user-main {
	flex:1;
	border-radius:20px;
	background:var(--gradient-surface);
	border:1px solid rgba(var(--color-primary-rgb),0.35);
	box-shadow:0 18px 42px -8px rgba(var(--color-primary-rgb),0.28);
	padding:2rem 2.2rem 2.6rem;
	display:flex;
	flex-direction:column;
	gap:1.6rem;
	position:relative;
	overflow:hidden;
}

body.dark .user-main { background:linear-gradient(145deg,rgba(15,23,42,0.86),rgba(2,6,23,0.94)); }

.user-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.user-top h1 {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 1.6rem;
	color: var(--color-primary);
	letter-spacing: -0.25px;
}

.user-top .sub {
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
	color: var(--color-text-muted);
	max-width: 580px;
}

.user-meta-capsule {
	background: rgba(15, 23, 42, 0.12);
	border-radius: 14px;
	padding: 0.6rem 0.9rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 160px;
	border: 1px solid rgba(var(--color-primary-rgb), 0.2);
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

.user-meta-capsule .label {
	text-transform: uppercase;
	letter-spacing: 0.55px;
	font-weight: 600;
	font-size: 0.68rem;
	margin-bottom: 0.25rem;
}

.user-meta-capsule .value {
	color: var(--color-text-soft);
	font-size: 0.83rem;
	font-weight: 600;
}

.user-card,
body.user-area .card {
	background:var(--gradient-surface);
	border-radius:18px;
	border:1px solid rgba(148,163,184,0.25);
	padding:1.35rem 1.5rem 1.55rem;
	box-shadow:0 14px 34px -10px rgba(2,6,23,0.35);
	position:relative;
	overflow:hidden;
	transition:box-shadow .3s ease, transform .3s ease;
}
.user-card:hover, body.user-area .card:hover { box-shadow:0 20px 48px -10px rgba(var(--color-primary-rgb),0.35); transform:translateY(-4px); }
body.dark .user-card, body.dark .card { background:linear-gradient(135deg,rgba(15,23,42,0.75),rgba(2,6,23,0.82)); }

body.dark .user-card,
body.dark .card {
	background: rgba(15, 23, 42, 0.68);
}

.user-card h1,
.user-card h2,
body.user-area .card h1,
body.user-area .card h2 {
	margin-top: 0;
	font-family: 'Poppins', sans-serif;
}

.user-card.hero {
  background:linear-gradient(140deg,rgba(0,183,235,0.18),rgba(59,130,246,0.22));
  border-color:rgba(var(--color-primary-rgb),0.45);
}

.user-card.muted {
	background: rgba(15, 23, 42, 0.45);
}

.section-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.8rem;
	margin-bottom: 1.1rem;
}

.section-header h2 {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 1.12rem;
	color: var(--color-primary);
}

.section-header .section-sub {
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

.section-header .link {
	font-size: 0.78rem;
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 600;
}

.section-header .link:hover {
	text-decoration: underline;
}

.user-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.1rem;
}

.user-stat-card {
	background:linear-gradient(140deg,rgba(var(--color-primary-rgb),0.08),rgba(15,23,42,0.65));
	border-radius:16px;
	padding:1.1rem 1.25rem 1.2rem;
	border:1px solid rgba(var(--color-primary-rgb),0.28);
	box-shadow:0 12px 28px -6px rgba(var(--color-primary-rgb),0.28);
	display:flex;
	flex-direction:column;
	gap:.45rem;
	position:relative;
	overflow:hidden;
	transition:box-shadow .3s ease, transform .3s ease;
}
.user-stat-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 18%,rgba(var(--color-primary-accent-rgb),0.35),transparent 70%); opacity:.4; pointer-events:none; }
.user-stat-card:hover { box-shadow:0 18px 36px -6px rgba(var(--color-primary-rgb),0.45); transform:translateY(-3px); }

.user-stat-card .label {
	font-size: 0.72rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.user-stat-card .value {
	font-family: 'Poppins', sans-serif;
	font-size: 1.35rem;
	color: var(--color-primary);
}

.user-stat-card .meta {
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

.user-section-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.4rem;
}

/* Pro trading/mining dashboard layout */
.user-grid.pro-grid {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:1.4rem;
}
@media(max-width:980px){
	.user-grid.pro-grid { grid-template-columns:1fr; }
}

.pro-hero {
	display:flex;
	flex-direction:column;
	gap:1.1rem;
}
.pro-hero-main h2 { margin:0 0 .35rem; font-family:'Poppins',sans-serif; font-size:1.5rem; color:var(--color-primary); }
.pro-hero-main p { margin:0; font-size:.95rem; color:var(--color-text-muted); }
.pro-hero-metrics { display:flex; flex-wrap:wrap; gap:1rem; }
.pro-hero-metrics .metric { padding:.65rem .9rem; border-radius:999px; background:rgba(15,23,42,0.06); border:1px solid rgba(148,163,184,0.35); display:flex; flex-direction:column; min-width:150px; }
.pro-hero-metrics .metric .label { font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; color:var(--color-text-muted); margin-bottom:.2rem; }
.pro-hero-metrics .metric .value { font-size:.95rem; font-weight:600; color:var(--color-text-soft); }

.pro-balance .balance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.pro-balance .balance-item { padding:.75rem .9rem; border-radius:12px; background:rgba(15,23,42,0.05); border:1px solid rgba(148,163,184,0.3); }
.pro-balance .asset { font-size:.8rem; text-transform:uppercase; letter-spacing:.45px; color:var(--color-text-muted); margin-bottom:.25rem; }
.pro-balance .amount { font-family:'Poppins',sans-serif; font-size:1.15rem; color:var(--color-primary); margin-bottom:.15rem; }
.pro-balance .hint { font-size:.78rem; color:var(--color-text-muted); }

.pro-mining .pro-list { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pro-mining .pro-list li { display:flex; align-items:center; justify-content:space-between; padding:.55rem .7rem; border-radius:10px; background:rgba(15,23,42,0.06); border:1px solid rgba(148,163,184,0.28); font-size:.86rem; }
.pro-mining .pro-list .label { color:var(--color-text-muted); }
.pro-mining .pro-list .value { font-weight:600; color:var(--color-text-soft); }

.pro-market-grid { display:grid; gap:.65rem; }
.pro-market-grid .pair { display:grid; grid-template-columns:1.4fr 1fr .8fr; align-items:center; padding:.55rem .7rem; border-radius:10px; background:rgba(15,23,42,0.06); border:1px solid rgba(148,163,184,0.28); font-size:.84rem; }
.pro-market-grid .symbol { font-weight:600; color:var(--color-text-soft); }
.pro-market-grid .price { text-align:right; font-family:'Poppins',sans-serif; }
.pro-market-grid .change { text-align:right; font-size:.8rem; font-weight:600; }
.pro-market-grid .change.positive { color:#22c55e; }
.pro-market-grid .change.negative { color:#f97373; }

.timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.timeline li {
	border: 1px solid rgba(148, 163, 184, 0.18);
	border-radius: 14px;
	padding: 0.85rem 1rem;
	background: rgba(2, 6, 23, 0.55);
	display: grid;
	gap: 0.3rem;
}

.timeline .title {
	font-weight: 600;
	color: var(--color-text-soft);
}

.timeline .status {
	font-size: 0.7rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	display: inline-block;
	letter-spacing: 0.55px;
	text-transform: uppercase;
}

.timeline .status.badge-pending {
	background: rgba(250, 204, 21, 0.16);
	color: #facc15;
}

.timeline .status.badge-approved,
.timeline .status.badge-verified {
	background: rgba(34, 197, 94, 0.16);
	color: #22c55e;
}

.timeline .status.badge-rejected {
	background: rgba(248, 113, 113, 0.16);
	color: #f97373;
}

.timeline .time {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.milestones {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.65rem;
}

.milestones li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.88rem;
	color: var(--color-text-soft);
}

.milestones li .mark {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.78rem;
	background: rgba(148, 163, 184, 0.25);
	color: #e2e8f0;
}

.milestones li.done .mark {
	background: rgba(34, 197, 94, 0.22);
	color: #22c55e;
}

.milestones li.done {
	color: #22c55e;
}

.feed {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.feed li {
	border: 1px solid rgba(148, 163, 184, 0.18);
	border-radius: 14px;
	padding: 0.85rem 1rem;
	background: rgba(2, 6, 23, 0.45);
	display: grid;
	gap: 0.35rem;
}

.feed-title {
	font-weight: 600;
	color: var(--color-text-soft);
}

.feed-body {
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

.feed-meta {
	font-size: 0.74rem;
	color: rgba(148, 163, 184, 0.65);
}

body.user-area .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.2rem;
	background: linear-gradient(135deg, #00b7eb, #2563eb);
	color: #020617;
	border-radius: 999px;
	border: none;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

body.user-area .btn:hover {
	filter: brightness(1.05);
}

body.user-area .btn-mini {
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: rgba(148, 163, 184, 0.25);
	color: #f8fafc;
	border: none;
	cursor: pointer;
	font-size: 0.78rem;
}

body.user-area .btn-mini:hover {
	background: rgba(148, 163, 184, 0.45);
}

.portal-form {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.1rem;
}

.portal-form select,
.portal-form input[type="file"] {
	padding: 0.65rem 0.8rem;
	border-radius: 10px;
	border: 1px solid rgba(148, 163, 184, 0.35);
	background: rgba(2, 6, 23, 0.75);
	color: #e2e8f0;
}

body.user-area .alert {
	padding: 0.75rem 1rem;
	border-radius: 12px;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

body.user-area .alert.success {
	background: rgba(34, 197, 94, 0.18);
	border: 1px solid rgba(34, 197, 94, 0.4);
}

body.user-area .alert.error {
	background: rgba(248, 113, 113, 0.18);
	border: 1px solid rgba(248, 113, 113, 0.4);
}

body.user-area .alert.info {
	background: rgba(59, 130, 246, 0.18);
	border: 1px solid rgba(59, 130, 246, 0.4);
}

body.user-area .table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
}

body.user-area .table th,
body.user-area .table td {
	text-align: left;
	padding: 0.6rem 0.4rem;
	border-bottom: 1px solid rgba(148, 163, 184, 0.15);
	font-size: 0.88rem;
}

body.user-area .table th {
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: rgba(226, 232, 240, 0.65);
}

@media (max-width: 1080px) {
	.user-shell {
		flex-direction: column;
		padding: 1.1rem;
	}

	.user-sidebar {
		width: 100%;
		flex-direction: column;
	}

	.user-main {
		padding: 1.6rem 1.5rem 2rem;
	}

	.user-top {
		flex-direction: column;
		align-items: flex-start;
	}

	.user-meta-capsule {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

@media (max-width: 680px) {
	.user-shell {
		padding: 1rem;
	}

	.user-main {
		padding: 1.4rem 1.2rem 1.8rem;
	}

	.user-stat-grid {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}

	.sidebar-meta {
		text-align: center;
	}
}