:root{
  --bg:#0e1117; --card:#161b22; --text:#e6edf3; --muted:#9da7b3; --primary:#2f81f7; --primaryHover:#1f6feb;
  --border:#30363d; --success:#2ea043; --danger:#f85149; --warning:#d29922;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text); background: radial-gradient(1200px 600px at 10% -10%, #1a2332, transparent), var(--bg);
  padding:24px;
}

.site-header{max-width:1100px;margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.2px}
.brand a{color:var(--text);text-decoration:none}
.nav a{color:var(--muted);text-decoration:none;margin-left:14px}
.nav a:hover{color:var(--text)}

.container{max-width:1100px; margin:0 auto; display:block}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width: 900px){.grid{grid-template-columns:1fr}}

.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow: 0 10px 30px rgba(0,0,0,.35)}
.media{position:relative; aspect-ratio: 4/3; overflow:hidden}
.media img{width:100%; height:100%; object-fit:cover; display:block}
.badge{position:absolute; left:12px; top:12px; background:rgba(0,0,0,.55); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.12)}

.title{font-size:28px; margin:0 0 10px}
.subtitle{color:var(--muted); margin:0 0 18px}

.btn{appearance:none; border:1px solid transparent; background:var(--primary); color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600; transition:.2s background; display:inline-block}
.btn:hover{background:var(--primaryHover)}
.btn.secondary{background:transparent; border-color:var(--border); color:var(--text)}
.btn.success{background:var(--success)}
.btn.danger{background:var(--danger)}
.btn.warning{background:var(--warning)}
.btn.primary{background:var(--primary)}

input,select,textarea{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0b0f16; color:var(--text)}
label{display:block; margin:10px 0 6px; color:var(--muted)}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 700px){form .row{grid-template-columns:1fr}}

table{width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden; border:1px solid var(--border)}
th,td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left}
th{color:var(--muted); font-weight:600}
tr:last-child td{border-bottom:0}

.muted{color:var(--muted)}
.spacer{height:16px}

.footer{max-width:1100px;margin:20px auto 0; color:var(--muted); font-size:12px; text-align:center}

.orders{display:grid; gap:12px}
.order{border:1px solid var(--border); border-radius:10px; padding:12px; background:#0f141b}

/* Toggle switch styling for checkboxes */
input.switch{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:44px; height:24px; border-radius:999px; border:1px solid var(--border);
  background:#0b0f16; position:relative; cursor:pointer; vertical-align:middle; outline:none; transition:background .2s ease;
}
input.switch:after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s ease, background .2s ease;
}
input.switch:checked{ background:var(--success); }
input.switch:checked:after{ left:22px; background:#fff; }
label.switch-wrap{display:flex; align-items:center; gap:10px}