@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');
:root{
  --peach:#ffd9c2; --coral:#ff8a65; --lavender:#9089b0; --mint:#7ec4a1;
  --ink:#4a3f6b; --muted:#8f87ad; --card:#ffffff; --bg:#f7f5fb;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Quicksand',sans-serif; color:var(--ink); background:var(--bg); min-height:100vh;}
a{color:inherit;}

.admin-wrap{display:flex; min-height:100vh;}
.sidebar{
  width:220px; background:#fff; border-right:1px solid #eee0f0;
  padding:20px 14px; position:fixed; top:0; bottom:0; left:0; overflow-y:auto;
  transform:translateX(-100%); transition:transform .25s ease; z-index:100;
}
.sidebar.open{transform:translateX(0);}
@media (min-width:900px){ .sidebar{transform:translateX(0);} }

.sidebar .brand{display:flex; align-items:center; gap:8px; margin-bottom:24px; padding:0 8px;}
.sidebar .brand img{height:32px;}
.sidebar .brand span{font-family:'Fredoka'; font-weight:600; font-size:14px;}

.sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  text-decoration:none; color:var(--ink); font-weight:600; font-size:13.5px; margin-bottom:4px;
}
.sidebar nav a.active, .sidebar nav a:hover{background:#fff2e8; color:var(--coral);}
.sidebar .logout{margin-top:20px; display:block; text-align:center; padding:10px; border-radius:12px; background:#fbeaea; color:#c94040; font-weight:700; font-size:13px; text-decoration:none;}

.main{flex:1; margin-left:0; padding:18px 5vw 40px;}
@media (min-width:900px){ .main{margin-left:220px;} }

.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.menu-toggle{background:#fff; border:1px solid #eee; border-radius:10px; padding:9px 12px; cursor:pointer;}
@media (min-width:900px){ .menu-toggle{display:none;} }
.topbar h1{font-family:'Fredoka'; font-size:19px; font-weight:600;}

.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:26px;}
@media (min-width:700px){ .stat-grid{grid-template-columns:repeat(4,1fr);} }
.stat-card{background:#fff; border-radius:16px; padding:18px; box-shadow:0 6px 16px rgba(144,137,176,0.10);}
.stat-card .num{font-family:'Fredoka'; font-size:24px; font-weight:700; color:var(--coral);}
.stat-card .label{font-size:12px; color:var(--muted); margin-top:4px;}

.panel{background:#fff; border-radius:18px; padding:20px; box-shadow:0 6px 16px rgba(144,137,176,0.10); margin-bottom:20px;}

.btn{font-family:'Quicksand'; font-weight:700; font-size:13px; padding:10px 20px; border-radius:999px; text-decoration:none; display:inline-block; border:none; cursor:pointer;}
.btn-primary{background:var(--coral); color:#fff;}
.btn-outline{background:#fff; color:var(--ink); border:1px solid #eee;}
.btn-danger{background:#fbeaea; color:#c94040;}
.btn-sm{padding:7px 14px; font-size:11.5px;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th, td{text-align:left; padding:10px 8px; border-bottom:1px solid #f1eefb;}
th{color:var(--muted); font-weight:700; font-size:11.5px; text-transform:uppercase;}
.badge{padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:700;}
.badge-terbit{background:#e6f6ec; color:#3f8f68;}
.badge-draft{background:#fff2e2; color:#a1512b;}
.table-scroll{overflow-x:auto;}

.form-group{margin-bottom:16px;}
.form-group label{display:block; font-weight:700; font-size:13px; margin-bottom:6px;}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid #e3ddf5; font-family:'Quicksand'; font-size:14px;
}
.form-group small{color:var(--muted); font-size:11.5px;}
.radio-group{display:flex; gap:16px;}
.radio-group label{display:flex; align-items:center; gap:6px; font-weight:600; font-size:13px;}

.alert{padding:12px 16px; border-radius:12px; font-size:13px; margin-bottom:16px; font-weight:600;}
.alert-success{background:#e6f6ec; color:#3f8f68;}
.alert-error{background:#fbeaea; color:#c94040;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(170deg,#fff6ee,#eef4ff);}
.login-box{background:#fff; border-radius:22px; padding:34px 28px; width:100%; max-width:360px; box-shadow:0 14px 34px rgba(144,137,176,0.2); text-align:center;}
.login-box img{height:48px; margin-bottom:14px;}
.login-box h2{font-family:'Fredoka'; font-size:19px; margin-bottom:6px;}
.login-box p.sub{color:var(--muted); font-size:12.5px; margin-bottom:20px;}