/* Mobile-first dark theme */
:root{--bg:#0b0b0b;--card:#121212;--accent:#00c67a;--muted:#bdbdbd;--white:#ffffff}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--white);-webkit-font-smoothing:antialiased}
.login-page{display:flex;align-items:center;justify-content:center;height:100vh;padding:1rem}
.login-box{width:100%;max-width:420px;background:var(--card);padding:1.5rem;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.6);text-align:center}
.logo{width:72px;height:72px;object-fit:contain;margin:0 auto 8px;filter: hue-rotate(80deg) brightness(1.2)}
.login-box h1{color:var(--accent);margin:0 0 12px;font-size:1.6rem}
.form input{width:100%;padding:0.8rem;border-radius:8px;border:none;background:#161616;color:var(--white);margin-bottom:8px}
.form button{width:100%;padding:0.9rem;border-radius:8px;border:none;background:var(--accent);color:#000;font-weight:700;font-size:1rem}
.msg{color:#ffcccb;margin-top:8px}

/* App layout */
.app-page{display:flex;min-height:100vh}
.sidebar{width:72px;background:#0e0e0e;padding:12px 8px;display:flex;flex-direction:column;align-items:center}
.sidebar .brand{display:flex;flex-direction:column;align-items:center;margin-bottom:12px}
.sidebar .brand img{width:40px;height:40px;object-fit:contain;margin-bottom:6px;filter: hue-rotate(80deg) brightness(1.2)}
.sidebar .brand span{font-size:0.75rem;color:var(--accent);font-weight:700}
.sidebar nav{display:flex;flex-direction:column;gap:6px;width:100%}
.sidebar nav button{background:transparent;border:none;color:var(--white);padding:10px;border-radius:8px;cursor:pointer;text-align:left;width:100%}
.sidebar nav button.active, .sidebar nav button:hover{background:rgba(0,198,122,0.08);color:var(--accent)}

.main{flex:1;padding:12px}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.card{background:var(--card);padding:12px;border-radius:10px;margin-bottom:12px;box-shadow:0 6px 18px rgba(0,0,0,0.6)}
.top-row{display:flex;justify-content:space-between;align-items:center}
.table-wrap{overflow:auto;max-height:50vh}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #1a1a1a;text-align:left}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:6px 8px;border-radius:6px;margin-right:6px;cursor:pointer;color:var(--white)}
.hidden{display:none}
@media(min-width:900px){
  .sidebar{width:220px;align-items:flex-start;padding:18px}
  .sidebar nav button{padding:12px 10px;font-weight:600}
  .brand img{width:48px;height:48px}
}