:root{
--bg:#0b0f14; --panel:#0f1720; --muted:#9aa4ad; --accent:#7dd3fc; --text:#e6eef6;
--radius:12px; --gap:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue';background:var(--bg);color:var(--text);}
.container{max-width:980px;margin:24px auto;padding:16px}
.app-header{margin-bottom:18px}
h1{margin:.2rem 0}
.muted{color:var(--muted)}
.cards{display:flex;gap:12px}
.card{flex:1;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:12px;text-decoration:none;color:var(--text);box-shadow:0 6px 18px rgba(2,6,23,0.6);}
.card.disabled{opacity:.5;pointer-events:none}
.generator{background:var(--panel);padding:18px;border-radius:16px}
.grid{display:grid;gap:12px}
label{display:block;font-size:14px}
input,textarea,select{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--text);font-size:14px}
.actions{display:flex;gap:8px;}
.btn{padding:8px 12px;border-radius:10px;border:none;background:var(--accent);color:#042027;cursor:pointer}
.btn.secondary{background:transparent;color:var(--accent);border:1px solid rgba(125,211,252,0.14)}
.btn.ghost{background:transparent;border:1px dashed rgba(255,255,255,0.04);color:var(--muted)}
.msg{min-height:20px;color:var(--accent);font-weight:600}
.small{font-size:12px}

/* Backlink styling used on generator pages */
.blacklink{display:inline-block;color:var(--muted);text-decoration:none;margin-bottom:8px;font-weight:600}
.blacklink:hover{color:var(--accent)}

/* Fancy site-wide animated background */
body{position:relative;overflow-x:hidden}
body::before{
	content:'';position:fixed;inset:0;z-index:-3;pointer-events:none;
	/* layered soft gradients to create depth */
	background:
		radial-gradient(ellipse at 10% 20%, rgba(125,211,252,0.06) 0 6%, transparent 18%),
		radial-gradient(ellipse at 90% 80%, rgba(124,58,237,0.045) 0 8%, transparent 20%),
		radial-gradient(ellipse at 70% 10%, rgba(255,182,193,0.03) 0 6%, transparent 18%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(5,8,15,0.9));
	background-blend-mode: screen, screen, screen, normal;
	filter: blur(26px) saturate(110%);
	transform-origin: center;
	animation: bgShift 20s ease-in-out infinite;
}

body::after{
	content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0.06;
	mix-blend-mode:overlay;
	/* subtle moving diagonal stripes for texture */
	background: linear-gradient(120deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.02) 100%);
	background-size:200% 200%;
	animation: stripeMove 14s linear infinite;
}

@keyframes bgShift{
	0%{transform: scale(1) rotate(0deg)}
	50%{transform: scale(1.04) rotate(2deg)}
	100%{transform: scale(1) rotate(0deg)}
}

@keyframes stripeMove{
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}

/* Soften and lift panels so they read above the background */
.generator, .card{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}

/* Slight vignette to focus content */
html::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);}

/* Canvas placed by assets/js/universe.js */
#universeCanvas{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-4;pointer-events:none}