/* Minimal responsive styles - based on Bootstrap-ish layout but lightweight */
:root{
	--admin-bg: #0f172a;
	--admin-panel: #0b1220;
	--accent: #ff6b35;
	--accent-2: #8be9fd;
	--muted:#9aa4b2;
	--card:#0b1220;
	--glass: rgba(255,255,255,0.08);
	--glass-strong: rgba(255,255,255,0.12);
	--border: rgba(255,255,255,0.18);
	--shadow: 0 20px 70px rgba(0,0,0,0.35);
}
*{box-sizing:border-box}
body{
	font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	margin:0; color:#e6eef6; min-height:100vh; position:relative;
	background:
		radial-gradient(circle at 18% 20%, rgba(139,233,253,0.20), transparent 32%),
		radial-gradient(circle at 85% -4%, rgba(255,184,108,0.18), transparent 32%),
		radial-gradient(circle at 42% 72%, rgba(80,250,123,0.14), transparent 32%),
		linear-gradient(135deg, #0f172a 0%, #111827 45%, #0b1221 100%);
	overflow-x:hidden;
}
body::before, body::after{
	content:""; position:fixed; width:520px; height:520px; filter:blur(120px); z-index:-1; pointer-events:none;
	background:radial-gradient(circle, rgba(139,233,253,0.32), rgba(139,233,253,0));
	animation:float 16s ease-in-out infinite;
}
body::after{background:radial-gradient(circle, rgba(255,184,108,0.32), rgba(255,184,108,0)); animation-duration:18s; animation-delay:-3s; right:-140px; bottom:-120px}
body::before{left:-180px; top:-140px}
.container{max-width:1100px;margin:0 auto;padding:20px}
.page-panel{
	background: linear-gradient(145deg, var(--glass), rgba(255,255,255,0.05));
	border: 1px solid var(--border);
	backdrop-filter: blur(12px);
	box-shadow: var(--shadow);
	border-radius: 20px;
	padding: 22px;
	margin-top: 24px;
}
.card, .card-body, .card-title, .card-text, .table{
	color: #e6eef6;
	background: rgba(255,255,255,0.05);
	border-color: var(--border);
}
.card a{color: var(--accent-2);} 
.card img{border-radius: 12px;}
.site-header{background:linear-gradient(90deg, rgba(255,107,53,0.12), rgba(0,180,216,0.06)); color:var(--accent); padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.04)}
.site-header h1{margin:0;font-size:1.25rem; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.4)}
.site-header nav{margin-top:6px}
.site-header nav a{color:var(--muted); text-decoration:none; margin-right:12px}
.site-header .user{float:right;color:var(--muted)}
.site-footer{background:transparent;padding:14px 0;margin-top:32px;color:var(--muted);text-align:center}
main.container{padding-top:22px}
h1,h2{color:#fff}
.error{color:#ffb4a2}
.msg{background:#05233a;padding:10px;border-radius:8px;color:var(--muted);border:1px solid rgba(255,255,255,0.03)}
.admin-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:14px;border-radius:10px;box-shadow:0 6px 18px rgba(3,6,12,0.6); margin-bottom:16px}
.admin-table{width:100%;border-collapse:collapse;background:transparent}
.admin-table th,.admin-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,0.03);text-align:left;color:var(--muted)}
.admin-table thead th{color:var(--muted);font-weight:600}
.admin-table tbody tr:hover{background:rgba(255,255,255,0.012)}
.btn-plain{background:transparent;color:var(--accent);border:1px solid rgba(255,255,255,0.03);padding:8px 10px;border-radius:6px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.btn-plain:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.6)}
button{background:var(--accent);color:#0b1220;border:none;padding:8px 12px;border-radius:8px; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease}
button:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(255,107,53,0.12)}
input,textarea,select{padding:10px;border:1px solid rgba(255,255,255,0.04);border-radius:8px;width:100%;max-width:100%;background:rgba(255,255,255,0.02);color:var(--muted)}

/* Animations */
.fade-in{animation:fadeIn .45s ease both}
.slide-up{animation:slideUp .48s cubic-bezier(.2,.9,.3,1) both}
.pulse{animation:pulse 2.2s ease-in-out infinite}

@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes float{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(20px,-20px,0) scale(1.05)}100%{transform:translate3d(0,0,0) scale(1)}}

/* responsive tweaks */
@media(min-width:900px){.site-header h1{font-size:1.6rem}}