:root{
  --bg:#0a0f1a;
  --bg2:#0f1726;
  --panel:#111a2e;
  --card:#0e1628;
  --accent:#4fc3f7;
  --accent-2:#8ab4ff;
  --text:#e6eefc;
  --muted:#97a3b6;
  --success:#2ecc71;
  --danger:#ff6b6b;
  --warning:#f1c40f;
  --shadow:0 10px 25px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;min-height:100%}
a{color:var(--accent)}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{display:flex;align-items:center;gap:14px;padding:16px 20px;background:rgba(255,255,255,.02);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:10}
.header img.logo{width:36px;height:36px;border-radius:10px;box-shadow:var(--shadow)}
.header h1{font-size:20px;margin:0;font-weight:700;letter-spacing:.3px}
.btn{border:0;cursor:pointer;padding:10px 14px;border-radius:12px;background:var(--accent);color:#001628;font-weight:700;box-shadow:var(--shadow);transition:.2s transform,.2s opacity}
.btn:hover{transform:translateY(-1px);opacity:.95}
.btn.secondary{background:#1f2a44;color:var(--text)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;background:#1c2742;color:var(--muted);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 12;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.card .top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.card .body{padding:16px}
.card .meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.card img.post-image{width:100%;height:auto;border-radius:14px;margin-top:10px}
.footer{opacity:.7;text-align:center;padding:40px 0}

@media (min-width:720px){
  .card{grid-column:span 6}
}
@media (min-width:1020px){
  .card{grid-column:span 4}
}

.notice{margin:12px 0;padding:10px 12px;border-left:3px solid var(--accent);background:#101a31;border-radius:8px}
.form{background:var(--panel);padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.form h2{margin-top:0}
.form .row{display:flex;gap:12px;flex-wrap:wrap}
.form input[type="text"], .form input[type="number"], .form textarea{width:100%;background:#0b1324;border:1px solid rgba(255,255,255,.07);border-radius:12px;color:var(--text);padding:10px 12px}
.form input[type="file"]{color:var(--muted)}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{padding:10px 12px;background:#0b1426;border:1px solid rgba(255,255,255,.06)}
.table th:first-child,.table td:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}
.table th:last-child,.table td:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}
.switch{appearance:none;width:44px;height:26px;background:#25304d;border-radius:999px;position:relative;outline:none;cursor:pointer;transition:.2s}
.switch:checked{background:var(--accent)}
.switch:before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;background:white;border-radius:50%;transition:.2s}
.switch:checked:before{left:21px}
.help{color:var(--muted);font-size:13px}
.footer small{color:var(--muted)}