:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --pink: #ff4da6;
  --gold: #f7c948;
  --text: #1f2937;
  --muted: #666;
  --shadow: rgba(0,0,0,0.15);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0;font-family:"Segoe UI",sans-serif;}
body{background: var(--bg); color: var(--text);}

/* ---------- LOADING ---------- */
#loading { position: fixed; inset:0; background: var(--bg); display:flex; justify-content:center; align-items:center; flex-direction:column; color: var(--gold); font-size:26px; font-weight:bold; z-index:9999;}
#loading .dots span{ animation: blink 1.2s infinite; }
#loading .dots span:nth-child(2){ animation-delay:0.2s;}
#loading .dots span:nth-child(3){ animation-delay:0.4s;}
@keyframes blink{0%,80%,100%{opacity:0;}40%{opacity:1;}}

/* ---------- LOGIN ---------- */
#login { max-width:400px; margin:100px auto; background: var(--card); padding:40px; border-radius:20px; box-shadow:0 10px 30px var(--shadow); text-align:center;}
#login img.logo{width:150px; margin-bottom:20px;}
#login h1{color: var(--gold); margin-bottom:10px;}
#login p{color: var(--muted); margin-bottom:20px;}
#login input, #login select, #login button{width:100%; padding:12px; margin:10px 0; border-radius:12px; border:none; outline:none;}
#login button{background: linear-gradient(135deg,var(--pink),var(--gold)); color:#fff; font-weight:bold; cursor:pointer;}

/* ---------- WRAPPER ---------- */
.wrapper{display:flex; height:100vh;}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:240px;min-width:240px; background:#fff; border-right:1px solid #e5e7eb; padding:20px 0; display:flex; flex-direction:column; justify-content:space-between;
}
.sidebar .logo-container{text-align:center; margin-bottom:20px;}
.sidebar .logo-container img{width:120px;}
.sidebar a{display:block; padding:12px 20px; text-decoration:none; color:#111827; font-size:14px;}
.sidebar a.active, .sidebar a:not(.logout):hover{background:#e0ebff; color:#2563eb; border-radius:8px; margin:0 10px;}
.sidebar .logout{margin:20px; padding:10px; background:#ef4444; color:#fff; border:none; border-radius:8px; cursor:pointer;text-align: center;}

/* ---------- MAIN ---------- */
.main{flex:1; padding:25px; overflow:auto;}

/* ---------- FILTERS ---------- */
.filters{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:15px; margin-bottom:20px;}
.filters select{padding:12px; border:1px solid #d1d5db; border-radius:8px; background:#fff; font-size:14px;}

/* ---------- TABLE ---------- */
.table-box{background:#fff; border-radius:14px; box-shadow:0 10px 25px rgba(0,0,0,0.05); overflow:auto;}
table{width:100%; border-collapse:collapse;}
thead{background:#1f2937; color:#fff;}
thead th{padding:6px 10px; font-size:13px; text-align:left;}
tbody td{padding:6px 10px; font-size:13px; border-bottom:1px solid #e5e7eb;}
tbody tr:hover{background:#f9fafb;}
.status{padding:5px 10px; border-radius:6px; font-size:12px; color:#fff;}
.active{background:#22c55e}
.pause{background:#f59e0b}
.apply-btn{padding:6px 12px; border:none; border-radius:6px; background:#2563eb; color:#fff; cursor:pointer; font-size:12px;}
.apply-btn:hover{background:#1d4ed8}