* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #0f1216;
  color: #e6e8eb;
}
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px;
  background: #14181d;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid #22262b;
}
.sidebar .brand {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 16px;
  color: #6ea8ff;
}
.sidebar a {
  color: #cfd3d8;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
}
.sidebar a:hover { background: #1e242b; }
.logout-form { margin-top: auto; }
.logout-form button {
  width: 100%;
  padding: 8px;
  background: #2a1f1f;
  color: #ff9a9a;
  border: 1px solid #402626;
  border-radius: 6px;
  cursor: pointer;
}
.content { flex: 1; padding: 28px 36px; max-width: 1100px; }
h1 { font-size: 22px; margin-bottom: 6px; }
.subtitle { color: #9aa1a9; margin-bottom: 24px; font-size: 14px; }
.card {
  background: #161b20;
  border: 1px solid #22262b;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
.card h2 { margin-top: 0; font-size: 16px; color: #9fc3ff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #22262b; }
th { color: #9aa1a9; font-weight: 500; }
input, select, textarea {
  width: 100%;
  padding: 9px 10px;
  background: #0f1216;
  border: 1px solid #2a2f36;
  border-radius: 6px;
  color: #e6e8eb;
  margin-bottom: 12px;
  font-size: 14px;
}
label { font-size: 13px; color: #9aa1a9; display: block; margin-bottom: 4px; }
button, .btn {
  background: #2563eb;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
button:hover, .btn:hover { background: #1d4ed8; }
.btn-danger { background: #a33; }
.btn-danger:hover { background: #822; }
.tag {
  display: inline-block;
  background: #1e2a3a;
  color: #8fb8ff;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  margin-right: 4px;
}
.warning-box {
  background: #2a2214;
  border: 1px solid #4a3a1a;
  color: #ffd89a;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 20px;
}
.error-box {
  background: #2a1414;
  border: 1px solid #4a1a1a;
  color: #ff9a9a;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.qr-box { text-align: center; padding: 20px; }
.qr-box img { border-radius: 8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.pill-ok { background: #14301c; color: #7fe08a; }
.pill-off { background: #301414; color: #ff8a8a; }
iframe.embed-frame {
  width: 100%;
  height: 420px;
  border: 1px solid #22262b;
  border-radius: 8px;
}
.widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.widget {
  background: #161b20;
  border: 1px solid #22262b;
  border-radius: 10px;
  padding: 18px 20px;
}
.widget-label {
  font-size: 12px;
  color: #9aa1a9;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.widget-value {
  font-size: 30px;
  font-weight: 700;
  color: #e6e8eb;
  line-height: 1.1;
}
.widget-sub {
  font-size: 12px;
  color: #7a828a;
  margin-top: 6px;
  min-height: 16px;
}
code, pre {
  background: #0b0e11;
  color: #9fe08a;
  padding: 10px;
  border-radius: 6px;
  display: block;
  overflow-x: auto;
  font-size: 13px;
}