* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Hind Siliguri', system-ui, sans-serif; background:#f2f4f8; color:#1e2430; font-size:15px; }
a { text-decoration:none; color:inherit; }

.app { display:flex; min-height:100vh; }

.sidebar { width:230px; background:#141a26; color:#e8ecf4; flex-shrink:0; position:sticky; top:0; height:100vh; }
.brand { font-size:20px; font-weight:700; padding:22px 20px; border-bottom:1px solid #232c3d; letter-spacing:.3px; }
.sidebar nav { padding:12px 10px; display:flex; flex-direction:column; gap:2px; }
.sidebar nav a { padding:11px 14px; border-radius:8px; color:#aab4c8; display:flex; align-items:center; gap:10px; font-weight:500; }
.sidebar nav a:hover { background:#1d2536; color:#fff; }
.sidebar nav a.active { background:#2d3a55; color:#fff; }
.sidebar .ic { width:20px; text-align:center; }

.main { flex:1; min-width:0; }
.topbar { background:#fff; padding:16px 28px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e4e8ef; position:sticky; top:0; z-index:10; }
.topbar h1 { font-size:20px; font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.whoami { color:#5a6478; font-size:13px; }

.content { padding:26px 28px; }

.card { background:#fff; border:1px solid #e4e8ef; border-radius:12px; padding:20px 22px; margin-bottom:20px; }
.card h2 { font-size:16px; font-weight:600; margin-bottom:14px; }

.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px; margin-bottom:22px; }
.stat { background:#fff; border:1px solid #e4e8ef; border-radius:12px; padding:18px 20px; }
.stat .label { color:#66708a; font-size:13px; margin-bottom:4px; }
.stat .value { font-size:26px; font-weight:700; }

table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; padding:10px 12px; color:#66708a; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; border-bottom:2px solid #edf0f5; }
td { padding:12px; border-bottom:1px solid #edf0f5; vertical-align:top; }
tr:hover td { background:#f8fafc; }
.muted { color:#7a8499; font-size:12.5px; }

.btn { display:inline-block; padding:9px 16px; border-radius:8px; border:0; cursor:pointer; font-family:inherit; font-size:14px; font-weight:500; background:#e6eaf1; color:#28303f; }
.btn:hover { filter:brightness(.96); }
.btn-blue { background:#2563eb; color:#fff; }
.btn-green { background:#16a34a; color:#fff; }
.btn-red { background:#dc2626; color:#fff; }
.btn-purple { background:#7c3aed; color:#fff; }
.btn-amber { background:#d97706; color:#fff; }
.btn-sm { padding:6px 11px; font-size:13px; border-radius:7px; }

.badge { display:inline-block; padding:3px 11px; border-radius:20px; font-size:12.5px; font-weight:600; }
.badge-blue  { background:#dbeafe; color:#1d4ed8; }
.badge-green { background:#dcfce7; color:#15803d; }
.badge-amber { background:#fef3c7; color:#b45309; }
.badge-red   { background:#fee2e2; color:#b91c1c; }
.badge-gray  { background:#e8ecf2; color:#475366; }

input[type=text], input[type=password], input[type=date], input[type=url], input[type=number], select {
  padding:9px 12px; border:1px solid #d4dae4; border-radius:8px; font-family:inherit; font-size:14px; background:#fff; width:100%;
}
input:focus, select:focus { outline:2px solid #93b4f5; border-color:#2563eb; }
label { display:block; font-size:13px; font-weight:600; color:#3a4356; margin-bottom:5px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-bottom:14px; }
.form-row { margin-bottom:14px; }
.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.filters > div { min-width:160px; }

.alert { padding:12px 16px; border-radius:9px; margin-bottom:18px; font-weight:500; }
.alert-success { background:#dcfce7; color:#15803d; }
.alert-error { background:#fee2e2; color:#b91c1c; }

.status-select { padding:5px 8px; border-radius:7px; font-size:13px; width:auto; }

.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#141a26; }
.login-box { background:#fff; border-radius:14px; padding:36px; width:100%; max-width:380px; }
.login-box h1 { font-size:22px; margin-bottom:6px; }
.login-box p { color:#66708a; margin-bottom:22px; font-size:14px; }

.site-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; }
.site-card { background:#fff; border:1px solid #e4e8ef; border-radius:12px; padding:18px 20px; }
.site-card h3 { font-size:16px; margin-bottom:4px; display:flex; justify-content:space-between; align-items:center; }
.site-card .url { color:#5a6478; font-size:13px; word-break:break-all; margin-bottom:10px; }
.site-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.inline-form { display:inline; }
code.copybox { background:#f1f4f9; border:1px solid #dde3ec; padding:6px 10px; border-radius:7px; font-size:12.5px; display:inline-block; word-break:break-all; }

@media (max-width: 860px) {
  .sidebar { width:64px; }
  .sidebar .brand { font-size:13px; padding:18px 8px; text-align:center; }
  .sidebar nav a span:not(.ic) { display:none; }
  .sidebar nav a { justify-content:center; }
  .content { padding:16px; }
  .topbar { padding:12px 16px; }
}