.brand {
  height: 82px;
  padding: 0 16px;
}
.brand-logo {
  position: relative;
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  overflow: hidden;
  border-radius: 11px !important;
  background: #000 !important;
  flex: 0 0 auto;
}
.brand-logo img {
  position: absolute;
  width: 76px;
  height: 76px;
  max-width: none;
  left: -14px;
  top: -8px;
  object-fit: contain;
}
.brand b {
  font-size: 14px;
  white-space: nowrap;
  letter-spacing: 0.5px !important;
}
.brand small {
  font-size: 9px !important;
}
.system-tools {
  display: flex;
  gap: 7px;
}
.system-button {
  height: 38px;
  min-width: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #445165;
  font-size: 11px;
  font-weight: 700;
}
.account-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 12px;
}
.account-button .mini-avatar {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1d2f49;
  color: #fff;
  font-size: 9px;
}
.sidebar nav em,
.badge,
.notify i {
  background: #e53935 !important;
  color: #fff !important;
}
.toast,
.toast.error {
  background: #c92e2e !important;
  border-left-color: #ffbbb9 !important;
}
.toast small {
  color: #ffe3e2 !important;
}
.seat-state {
  min-width: 82px;
  white-space: nowrap;
  padding: 5px 8px;
  border: 1px solid #d7dee8;
  border-radius: 12px;
  background: #f7f9fc;
  justify-content: flex-start;
}
.seat-state.online {
  border-color: #a7ddc9;
  background: #eaf8f1;
}
.seat-state.disabled {
  border-color: #efb9b9;
  background: #fff0f0;
}
.risk-explain {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: var(--line);
}
.risk-explain > div {
  padding: 15px;
  background: #fff;
}
.risk-explain h3 {
  margin: 0 0 5px;
  font-size: 14px;
}
.risk-explain p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.risk-explain b {
  display: block;
  margin-bottom: 5px;
  color: #4a5668;
  font-size: 11px;
}
.fixed-permission {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #b8dccf;
  border-radius: 8px;
  background: #eef9f4;
  color: #28644f;
  font-size: 11px;
}
.login-screen {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: none;
  place-items: center;
  background: linear-gradient(145deg, #050505, #191919);
}
.login-screen.open {
  display: grid;
}
.login-card {
  width: min(420px, 92vw);
  padding: 28px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 80px #0008;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 23px;
}
.login-brand .login-logo {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  object-fit: cover;
}
.login-brand h2 {
  margin: 0 0 3px;
}
.login-brand small {
  color: #768295;
}
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 13px 0;
  color: #465366;
  font-size: 11px;
  font-weight: 700;
}
.login-card input {
  height: 41px;
  padding: 0 11px;
  border: 1px solid #dbe1e9;
  border-radius: 8px;
}
.login-card .primary {
  width: 100%;
  margin-top: 9px;
}
.logout-note {
  text-align: center;
  color: #8490a0;
  font-size: 10px;
  margin: 14px 0 0;
}
body.theme-dark {
  --bg: #0e1117;
  --text: #edf1f7;
  --muted: #8f9bad;
  --line: #2a3340;
  --navy: #050608;
  background: #0e1117;
  color: #edf1f7;
}
body.theme-dark main > header,
body.theme-dark .panel,
body.theme-dark .metrics article,
body.theme-dark .month-overview,
body.theme-dark .month-metrics p,
body.theme-dark .v4-head,
body.theme-dark .reply-library,
body.theme-dark .rule-list,
body.theme-dark .quick-item,
body.theme-dark .rule-item,
body.theme-dark .seat,
body.theme-dark .conversation,
body.theme-dark .messages,
body.theme-dark .drawer,
body.theme-dark .drawer > header,
body.theme-dark .trace,
body.theme-dark .tech-card,
body.theme-dark .drawer-events,
body.theme-dark .modal,
body.theme-dark .risk-explain > div {
  background: #171c24;
  color: #edf1f7;
}
body.theme-dark th,
body.theme-dark .modal-foot,
body.theme-dark .steps,
body.theme-dark .message-body,
body.theme-dark .billing,
body.theme-dark .assignment-preview,
body.theme-dark .allocation-card {
  background: #11161d;
}
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .secondary,
body.theme-dark .system-button,
body.theme-dark .seat-actions button,
body.theme-dark .allocation-seat {
  background: #1d242e;
  color: #edf1f7;
  border-color: #35404e;
}
body.theme-dark .sidebar {
  background: #050608;
}
body.theme-dark .alert,
body.theme-dark .readonly,
body.theme-dark .danger-note {
  background: #251d1d;
  color: #ffc8c5;
  border-color: #653836;
}
body.theme-dark .first-charge {
  background: #14251e;
  color: #8ed4b9;
  border-color: #29533f;
}
body.theme-dark .message-body p {
  background: #222a35;
}
body.theme-dark .message-body p.out {
  background: #193257;
}
body.theme-dark .login-card {
  background: #171c24;
  color: #fff;
}
body.theme-dark .status,
body.theme-dark .seat-state {
  border-color: #394553;
}
.theme-fade * {
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.auth-menu {
  position: fixed;
  z-index: 210;
  right: 28px;
  top: 108px;
  width: 210px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 15px 35px #101f3926;
}
.auth-menu button {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  color: #455267;
}
.auth-menu button:hover {
  background: #f3f6fa;
}
.auth-menu .logout {
  color: var(--red);
}
body.theme-dark .auth-menu {
  background: #1b222c;
}
body.theme-dark .auth-menu button {
  color: #e6ebf2;
}
body.theme-dark .auth-menu button:hover {
  background: #252e3a;
}
@media (max-width: 900px) {
  .risk-explain {
    grid-template-columns: 1fr 1fr;
  }
  .system-button span {
    display: none;
  }
  .account-button span {
    display: none;
  }
}