* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; }
body { background:#f5f7fa; color:#1a1a1a; min-height:100vh; }

.login-screen { display:flex; justify-content:center; align-items:center; min-height:100vh; padding:20px; background:linear-gradient(135deg,#dc2626,#991b1b); }
.login-box { background:#fff; padding:45px; border-radius:16px; width:100%; max-width:400px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
.login-box h1 { margin-bottom:25px; color:#1a1a1a; font-size:1.5rem; }
.login-box input { width:100%; padding:14px; margin:10px 0; border:1px solid #e5e7eb; background:#f9fafb; color:#1a1a1a; border-radius:8px; outline:none; font-size:1rem; }
.login-box input:focus { border-color:#dc2626; background:#fff; }
.login-box button { width:100%; padding:14px; background:#dc2626; color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:1rem; font-weight:600; margin-top:10px; }
.login-box button:hover { background:#b91c1c; }
#loginError { color:#dc2626; margin-top:10px; font-size:0.9rem; }

.dashboard { display:flex; min-height:100vh; }
.sidebar { width:250px; background:#1a1a1a; padding:25px 15px; color:#fff; }
.sidebar h2 { margin-bottom:25px; color:#dc2626; font-size:1.2rem; padding:0 10px; }
.menu-btn { display:block; width:100%; padding:12px 15px; margin:4px 0; background:transparent; color:rgba(255,255,255,0.8); border:none; border-radius:8px; cursor:pointer; text-align:left; transition:0.2s; font-size:0.9rem; font-weight:500; }
.menu-btn:hover { background:rgba(255,255,255,0.1); color:#fff; }
.menu-btn.active { background:#dc2626; color:#fff; }
.menu-btn.logout { background:transparent; margin-top:30px; color:#f87171; }
.menu-btn.logout:hover { background:rgba(220,38,38,0.15); }

.content { flex:1; padding:35px; overflow-y:auto; }
.tab { display:none; max-width:900px; }
.tab.active { display:block; }
.content h1 { margin-bottom:25px; font-size:1.8rem; font-weight:800; }
.content h2 { margin:25px 0 12px; font-size:1.2rem; font-weight:700; color:#dc2626; }

label { display:block; margin:15px 0 6px; font-weight:500; font-size:0.9rem; color:#4b5563; }
input, textarea, select { width:100%; padding:12px; border:1px solid #e5e7eb; background:#fff; color:#1a1a1a; border-radius:8px; outline:none; font-size:0.95rem; font-family:inherit; }
input:focus, textarea:focus, select:focus { border-color:#dc2626; }
textarea { min-height:100px; resize:vertical; }

button { padding:12px 25px; background:#dc2626; color:#fff; border:none; border-radius:8px; cursor:pointer; margin:5px 5px 5px 0; font-size:0.95rem; font-weight:600; }
button:hover { background:#b91c1c; }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.stat-card { background:#fff; padding:30px; border-radius:12px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.05); border-left:4px solid #dc2626; }
.stat-card h3 { color:#6b7280; margin-bottom:12px; font-size:0.95rem; font-weight:500; }
.stat-card p { font-size:2.5rem; font-weight:800; color:#1a1a1a; }

.post-item { background:#fff; padding:18px; margin:12px 0; border-radius:10px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.post-item h3 { color:#1a1a1a; font-size:1rem; margin-bottom:5px; }
.post-item small { color:#6b7280; font-size:0.8rem; }
.post-actions button { padding:8px 15px; margin-left:5px; font-size:0.85rem; }
.btn-edit { background:#3b82f6; }
.btn-edit:hover { background:#2563eb; }
.btn-delete { background:#dc2626; }

.sub-item { background:#fff; padding:12px 18px; margin:6px 0; border-radius:8px; display:flex; justify-content:space-between; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.sub-item small { color:#6b7280; }

hr { border:none; border-top:1px solid #e5e7eb; margin:25px 0; }

@media (max-width:768px) {
  .dashboard { flex-direction:column; }
  .sidebar { width:100%; padding:15px; }
  .content { padding:20px; }
}