*{box-sizing:border-box}
:root{
  --bg:#0f172a;
  --panel:#111827;
  --panel2:#020617;
  --line:#1f2937;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --green:#22c55e;
  --blue:#3b82f6;
  --red:#ef4444;
  --amber:#f59e0b;
}
body{
  margin:0;
  background:linear-gradient(135deg,#0f172a,#020617);
  color:var(--text);
  font-family:Arial,system-ui,sans-serif;
}
a{color:inherit}
.sidebar{
  position:fixed;
  left:0;
  top:0;
  width:250px;
  min-height:100vh;
  background:rgba(2,6,23,.96);
  border-right:1px solid var(--line);
  padding:22px;
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:26px;
}
.brand-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:#052e16;
  font-weight:900;
  font-size:24px;
}
.brand small{
  display:block;
  color:var(--muted);
  margin-top:4px;
}
.sidebar nav a{
  display:block;
  padding:13px 14px;
  border-radius:14px;
  text-decoration:none;
  color:#cbd5e1;
  margin-bottom:8px;
}
.sidebar nav a:hover{
  background:#1e293b;
  color:white;
}
.sidebar .logout{color:#fca5a5}
.main{
  margin-left:250px;
  padding:26px;
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}
.title h1{margin:0;font-size:30px}
.title p{margin:6px 0 0;color:var(--muted)}
.card{
  background:rgba(17,24,39,.94);
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  box-shadow:0 20px 35px rgba(0,0,0,.28);
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
}
.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
input,select{
  background:#020617;
  color:white;
  border:1px solid #334155;
  border-radius:14px;
  padding:13px;
  min-width:160px;
}
button{
  background:var(--green);
  border:0;
  color:white;
  padding:13px 16px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
}
button.secondary{background:#334155}
button.blue{background:var(--blue)}
button.red{background:var(--red)}
button.amber{background:var(--amber)}
.table{
  width:100%;
  border-collapse:collapse;
}
.table th,.table td{
  padding:13px;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.stat{
  font-size:32px;
  font-weight:900;
  margin-top:8px;
}
.muted{color:var(--muted)}
.product-btn{
  width:100%;
  text-align:left;
  background:#1e293b;
  margin-bottom:10px;
}
.total{
  font-size:36px;
  font-weight:900;
}
.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.login-box{
  width:100%;
  max-width:980px;
}
.badge{
  background:#1e293b;
  border:1px solid #334155;
  color:#cbd5e1;
  border-radius:999px;
  padding:9px 12px;
}
.ticket-preview{
  background:white;
  color:black;
  padding:16px;
  border-radius:12px;
  font-family:monospace;
  white-space:pre-wrap;
}
@media(max-width:850px){
  .sidebar{position:relative;width:100%;min-height:auto}
  .main{margin-left:0;padding:16px}
}