/* Minimal, modern, mobile-first UI */
:root {
  --bg: #0f1226;
  --card: #171a36;
  --muted: #8b90b1;
  --text: #e7e9ff;
  --primary: #6b8bff;
  --accent: #9b78ff;
  --danger: #ff5d7a;
  --success: #35d399;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(80% 80% at 20% 20%, #121638, #0a0c1a); }
.bg { min-height: 100vh; }
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
.container.narrow { max-width: 460px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.06); position:sticky; top:0; backdrop-filter: blur(8px); }
.logo-sm { width:28px; height:28px; margin-right:8px; }
.appname { font-weight: 700; letter-spacing: 0.3px; }
.topbar-left { display:flex; align-items:center; gap:10px; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.username { opacity: 0.8; }

.card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.brand { text-align:center; }
.brand img { width:56px; height:56px; }
.brand h1 { margin:10px 0 0; font-size: 28px; }
.muted { color: var(--muted); }
.footer { text-align:center; margin-top: 30px; }

.form label { display:block; margin-top: 12px; font-size: 14px; opacity: .9; }
.form input[type=text], .form input[type=email], .form input[type=password], .form textarea, input[type=file] {
  width: 100%; padding: 12px 12px; border-radius: 12px; border:1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2); color: var(--text);
}
.form textarea { resize: vertical; }

.btn { display:inline-block; padding: 10px 14px; border-radius: 12px; border:1px solid rgba(255,255,255,0.12); color: var(--text); text-decoration:none; cursor:pointer; background: transparent; }
.btn.primary { background: linear-gradient(90deg, var(--primary), var(--accent)); border: none; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.alert { padding: 12px 14px; border-radius: 12px; margin: 10px 0 16px; }
.alert-danger { background: #2a0e1a; border: 1px solid rgba(255, 93, 122, 0.3); }
.alert-success { background: #0e2119; border: 1px solid rgba(53, 211, 153, 0.3); }

.grid { display:grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .grid { grid-template-columns: 1.2fr 0.8fr; } }

.kv { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,0.08); }
.kv span:first-child { color: var(--muted); }

.progress { height: 12px; width: 100%; background: rgba(255,255,255,0.08); border-radius: 999px; overflow:hidden; margin-top: 14px; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--success), var(--primary)); width:0%; transition: width .4s; }

.stats { background: rgba(0,0,0,0.25); padding: 12px; border-radius: 12px; border:1px solid rgba(255,255,255,0.1); height: 180px; overflow:auto; }

.row { display:flex; gap: 10px; }
.col { flex:1; }

.hint code { background: rgba(0,0,0,0.4); padding: 2px 4px; border-radius: 6px; }