:root{--bg: #0b0f14; --bg-elev: #111823; --text: #e6edf3; --muted:#9fb0c0; --card:#121a26; --card-2:#0e1520; --primary:#58a6ff; --accent:#00d4ff; --ring: rgba(88,166,255,.35)}
:root.light{--bg:#f6f8fb; --bg-elev:#ffffff; --text:#0b1420; --muted:#506274; --card:#ffffff; --card-2:#f1f5fb; --primary:#0b57d0; --accent:#00bcd4; --ring: rgba(11,87,208,.22)}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background: radial-gradient(1200px 800px at 10% -10%, rgba(0,212,255,.15), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(88,166,255,.12), transparent 60%), var(--bg);
	color:var(--text);
	transition: background .4s ease, color .2s ease;
	display:flex; flex-direction:column; min-height:100svh;
}

.sr-only{position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.topbar{
	position:sticky; top:0; z-index:10;
	display:flex; align-items:center; justify-content:space-between;
	padding:16px clamp(12px, 2.5vw, 28px);
	background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent);
	backdrop-filter: blur(6px);
}
.title{margin:0; font-size:20px; letter-spacing:.5px}
.actions{display:flex; gap:8px}
.icon-btn{
	appearance:none; border:1px solid transparent; border-radius:10px;
	background:var(--bg-elev); color:var(--text);
	padding:10px 12px; cursor:pointer; font-size:16px; line-height:1;
	box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 0 0 0px var(--ring);
	transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.icon-btn:hover{transform: translateY(-1px); box-shadow: 0 0 0 3px var(--ring)}
.icon-btn:active{transform: translateY(0)}

.container{max-width:1000px; margin:24px auto; padding:0 clamp(12px,2.5vw,28px); flex:1; display:grid; place-content:center}
.grid{
	display:grid; grid-template-columns: repeat(3, 1fr);
	gap:16px; align-items:stretch;
}

.card{
	position:relative; isolation:isolate;
	border-radius:18px; overflow:hidden;
	background:linear-gradient(180deg, var(--card), var(--card-2));
	border:1px solid rgba(255,255,255,.06);
	min-height:180px;
    min-width: 180px;
	box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 2px 0 rgba(255,255,255,.04) inset;
	transform: translateZ(0);
	transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .2s ease;
}
.card::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background: radial-gradient(300px 180px at 0% 0%, rgba(88,166,255,.15), transparent 60%), radial-gradient(280px 160px at 100% 100%, rgba(0,212,255,.14), transparent 60%);
	opacity:.75; transition: opacity .25s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.34); border-color: rgba(255,255,255,.12)}
.card:hover::before{opacity:1}

.card.disabled{opacity:.6; filter:saturate(.6); cursor:not-allowed}

.card-inner{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; height:100%; padding:18px}

.logo{
	width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
	background: linear-gradient(135deg, var(--accent), var(--primary)); color:white;
	box-shadow: 0 8px 18px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
	font-weight:700; letter-spacing:.5px;
}
.logo img{width:60%; height:60%; object-fit:contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.3))}

.label{font-weight:600; font-size:16px; letter-spacing:.2px}
.sub{font-size:12px; color:var(--muted)}

.card a{ position:absolute; inset:0; text-decoration:none; color:inherit }
.card .focus-ring{ position:absolute; inset:-3px; border-radius:22px; pointer-events:none; box-shadow:0 0 0 0 var(--ring); transition: box-shadow .2s ease }
.card:focus-within .focus-ring{ box-shadow:0 0 0 4px var(--ring) }

.footer{ display:flex; justify-content:center; padding:20px; color:var(--muted)}

@media (max-width: 920px){ .grid{ grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 560px){ .grid{ grid-template-columns: 1fr } .card{ min-height:140px } .logo{ width:48px; height:48px } }