:root{
	--bg-dark:#041029;
	--bg-darker:#02061a;
	--surface:rgba(6,10,23,0.38);
	--panel-border:linear-gradient(90deg,#06b6d4,#7c3aed,#f59e0b);
	--accent-1:#06b6d4;
	--accent-2:#7c3aed;
	--accent-3:#f59e0b;
	--muted:rgba(255,255,255,0.7);
	--text:#ffffff;
	--glass-radius:12px;
}

body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:var(--bg-dark);color:var(--text);-webkit-font-smoothing:antialiased}

/* Starfield background: multiple animated layers create parallax-like depth */
.bg-starfield{
	background: radial-gradient(ellipse at bottom, rgba(2,6,23,0.7) 0%, rgba(3,8,20,0.9) 60%), linear-gradient(120deg,#04102a 0%, #071428 60%);
	overflow-x:hidden;
}
.bg-starfield::before,
.bg-starfield::after{
	content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-repeat:repeat;opacity:0.85;mix-blend-mode:screen;
}
.bg-starfield::before{background-image:radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.98), transparent), radial-gradient(1.6px 1.6px at 70% 80%, rgba(255,240,200,0.8), transparent), radial-gradient(0.6px 0.6px at 80% 20%, rgba(200,255,200,0.6), transparent);background-size:1200px 1200px;animation:starMove 60s linear infinite}
.bg-starfield::after{background-image:radial-gradient(0.9px 0.9px at 40% 20%, rgba(180,200,255,0.8), transparent), radial-gradient(1.8px 1.8px at 60% 40%, rgba(255,220,160,0.7), transparent), radial-gradient(0.5px 0.5px at 30% 70%, rgba(255,180,220,0.6), transparent);background-size:1600px 1600px;animation:starMove 120s linear infinite reverse}
@keyframes starMove{from{transform:translateY(0)}to{transform:translateY(-200px)}}

/* Galactic clouds via layered radial gradients */
.bg-galaxy{position:fixed;inset:0;z-index:-3;pointer-events:none;background-image:radial-gradient(ellipse at 10% 10%, rgba(124,58,237,0.12), transparent 18%), radial-gradient(ellipse at 90% 80%, rgba(245,158,11,0.08), transparent 20%), radial-gradient(ellipse at 50% 40%, rgba(6,182,212,0.04), transparent 25%);filter:blur(18px);opacity:0.9}

/* Layout */
.app-layout{display:flex;min-height:calc(100vh - 72px);position:relative;z-index:1}
.side-panel{width:260px;padding:1.25rem;box-sizing:border-box;background:linear-gradient(180deg,rgba(2,6,23,0.28),rgba(4,8,18,0.22));backdrop-filter:blur(6px);border-right:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(124,58,237,0.04);}
.main-area{flex:1;padding:2rem;max-width:1100px;margin:0 auto}

/* Top nav */
.top-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;position:relative;z-index:2}
.brand{display:flex;gap:.75rem;align-items:center}
.logo{width:44px;height:44px}
.brand-text{font-weight:700;font-size:1.05rem;letter-spacing:.4px}
.nav-actions{display:flex;gap:.75rem;align-items:center}
.nav-link{color:var(--text);text-decoration:none;padding:.4rem .6rem;border-radius:8px}

/* Buttons */
.btn{display:inline-block;padding:.5rem .9rem;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));color:black;color:var(--bg-darker);box-shadow:0 8px 30px rgba(124,58,237,0.12)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}

/* Panels and cards */
.card{background:var(--surface);border-radius:var(--glass-radius);padding:1.25rem;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 40px rgba(2,6,23,0.6)}
.panel{border-radius:12px;padding:1rem;background:rgba(6,10,20,0.55);position:relative;overflow:visible;backdrop-filter:blur(8px);z-index:1}
.panel::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:transparent;pointer-events:none;box-shadow:0 0 26px rgba(6,182,212,0.08),0 0 48px rgba(124,58,237,0.08),0 0 72px rgba(245,158,11,0.06);z-index:0}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--panel-border);-webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);opacity:0.95;z-index:0}

/* Ensure panel children render above pseudo-elements */
.panel > *{position:relative;z-index:2}

/* Floating title styling - let headings sit above panel */
.panel .floating-title{display:inline-block;margin:-1.25rem 0 0 0;padding:0.25rem 0.6rem;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));backdrop-filter:blur(6px);color:var(--text);font-weight:700;box-shadow:0 6px 18px rgba(2,6,23,0.6);}

/* Stronger display text */
.panel .display{font-size:2.6rem;text-shadow:0 10px 30px rgba(0,0,0,0.7);color:var(--text)}

/* Apply floating title style to common headings inside panels */
.panel h1, .panel h2{display:inline-block;margin:-1.25rem 0 0 0;padding:0.25rem 0.6rem;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));backdrop-filter:blur(6px);color:var(--text);font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,0.7);}

/* Headline styles */
.display{font-size:3rem;margin:0;background:linear-gradient(90deg,var(--accent-2),var(--accent-1));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.6px;text-shadow:0 8px 28px rgba(2,6,23,0.65)}
.lead{color:var(--muted);margin-top:.5rem}

/* Side links */
.side-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.side-links a{color:var(--text);text-decoration:none;padding:.5rem;border-radius:8px;display:inline-block}
.side-links a svg{vertical-align:middle;margin-right:.4rem}
.side-links a:hover{background:rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(124,58,237,0.06)}

/* Ensure readable text contrast inside panels */
h1,h2,h3,h4,h5,h6,p,a,li{color:var(--text)}
.nav-link{color:var(--text);font-weight:600}
.top-nav .nav-actions .btn, .top-nav .nav-actions .nav-link{box-shadow:0 6px 18px rgba(2,6,23,0.5)}

/* Top nav stronger contrast */
.top-nav{background:linear-gradient(180deg, rgba(2,6,23,0.95), rgba(6,10,20,0.85));border-bottom:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(6px)}
.top-nav .brand{color:#ffffff;font-weight:800;text-shadow:0 4px 18px rgba(0,0,0,0.7)}
.top-nav .nav-link{color:#f8fafc;font-weight:700;padding:0.6rem 0.9rem}
.top-nav .nav-link:hover{color:#ffffff;background:rgba(255,255,255,0.03);border-radius:8px}
.top-nav .nav-actions .btn{background:linear-gradient(90deg,var(--accent-2),var(--accent-1));color:#001020;border-radius:10px;padding:.5rem .8rem}
.top-nav .nav-actions .btn:hover{filter:brightness(1.05);box-shadow:0 10px 30px rgba(124,58,237,0.12)}
.side-links a svg{vertical-align:middle;margin-right:.4rem}
.side-links a:hover{background:rgba(255,255,255,0.02);box-shadow:0 6px 18px rgba(124,58,237,0.04)}
.side-links a:hover{background:rgba(255,255,255,0.02)}

/* Utilities */
.muted{color:var(--muted)}

/* Responsive */
@media (max-width:900px){
	.side-panel{display:none}
	.display{font-size:2rem}
}

/* Forms */
.form{display:flex;flex-direction:column;gap:.5rem}
.input{padding:.6rem .75rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--text)}
.form-actions{margin-top:.75rem}
.pre-key{word-break:break-all;background:rgba(255,255,255,0.02);padding:.75rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03);}


/* Design system / style guide variables */
:root{
	--bg:#f7fafc;
	--text:#0f172a;
	--muted:#64748b;
	--accent-1:#7c3aed;
	--accent-2:#06b6d4;
	--surface:#ffffff;
	--radius:10px;
	--max-width:1100px;
}

/* Layout */
.app-layout{display:flex;min-height:100vh;background:var(--bg)}
.side-panel{width:260px;background:linear-gradient(180deg,var(--surface),#f1f5f9);border-right:1px solid #e2e8f0;padding:1.25rem;box-sizing:border-box}
.main-area{flex:1;padding:1.5rem;max-width:var(--max-width);margin:0 auto}

/* Top nav (informational + auth) */
.top-nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:transparent}
.brand{display:flex;gap:.75rem;align-items:center}
.nav-actions{display:flex;gap:.5rem;align-items:center}

/* Buttons */
.btn{display:inline-block;padding:.5rem .9rem;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:white}
.btn-ghost{background:transparent;border:1px solid #e2e8f0;color:var(--text)}

/* Login modal (simple) */
.login-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--surface);padding:1.25rem;border-radius:var(--radius);box-shadow:0 8px 30px rgba(2,6,23,0.08);width:360px;max-width:90%;z-index:1000}
.login-modal h3{margin:0 0 .5rem 0}
.overlay{position:fixed;inset:0;background:rgba(2,6,23,0.35);z-index:900}

/* Cards & utilities */
.card{background:var(--surface);border-radius:8px;padding:1rem;border:1px solid #eef2f7}
.muted{color:var(--muted)}
.kbd{font-family:monospace;background:#f1f5f9;padding:.1rem .35rem;border-radius:4px}

/* Responsive */
@media (max-width:800px){
	.side-panel{display:none}
	.main-area{padding:.75rem}
}