:root {
  --rebrand-primary: #2454f0;
  --rebrand-primary-hover: #1b3fc4;
  --rebrand-primary-soft: rgba(36, 84, 240, 0.1);
  --rebrand-accent-bg: #f5f9ff;
  --rebrand-surface: #ffffff;
  --rebrand-surface-2: #f7f9ff;
  --rebrand-surface-3: #ffffff;
  --rebrand-line: rgba(22, 23, 27, 0.1);
  --rebrand-line-strong: rgba(22, 23, 27, 0.2);
  --rebrand-ink: #16171b;
  --rebrand-ink-2: #56627a;
  --rebrand-ink-3: #9aa2b8;
  --rebrand-success: #0f9d6b;
  --rebrand-warning: #b57a1f;
  --rebrand-danger: #d13b4f;
  --rebrand-radius: 12px;
  --rebrand-shadow-sm: 0 1px 2px rgba(22, 23, 27, 0.05), 0 10px 20px rgba(22, 23, 27, 0.06);
  --rebrand-shadow: 0 2px 8px rgba(22, 23, 27, 0.08), 0 14px 32px rgba(22, 23, 27, 0.12);
  --rebrand-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --rebrand-motion-duration: 0.25s;
  --rebrand-bg: var(--rebrand-accent-bg);
}

[data-theme="dark"] {
  --rebrand-accent-bg: #0b0c12;
  --rebrand-surface: #14161e;
  --rebrand-surface-2: #1a1f2c;
  --rebrand-surface-3: #1a202d;
  --rebrand-line: rgba(255, 255, 255, 0.12);
  --rebrand-line-strong: rgba(255, 255, 255, 0.23);
  --rebrand-ink: #edf2f7;
  --rebrand-ink-2: #9ca4b5;
  --rebrand-ink-3: #636c7f;
  --rebrand-bg: #0b0f1a;
}

.rebrand-shell {
  background: var(--rebrand-bg);
  color: var(--rebrand-ink);
  transition: background-color var(--rebrand-motion-duration) var(--rebrand-ease), color var(--rebrand-motion-duration) var(--rebrand-ease);
}

.rebrand-shell :is(.panel, .card, .tcard, .security-card, .overview-panel, .metering-panel, .alert-row, .activity-row, .uc-panel, .uc-cert, .uc-permission-box, .uc-wallet, .model-entry) {
  background: var(--rebrand-surface);
  border-color: var(--rebrand-line);
  box-shadow: var(--rebrand-shadow-sm);
  border-radius: var(--rebrand-radius);
}

.rebrand-shell :is(.btn, .btn-primary, .btn-ghost, .btn-quiet, .ghost, .good, .bad, .icon-btn, .acct-logout, .topbar-burger, .side-collapse, .side-expand, .notif-bell) {
  border-radius: 10px;
  transition: transform var(--rebrand-motion-duration) var(--rebrand-ease), background-color var(--rebrand-motion-duration) var(--rebrand-ease), border-color var(--rebrand-motion-duration) var(--rebrand-ease), box-shadow var(--rebrand-motion-duration) var(--rebrand-ease), color var(--rebrand-motion-duration) var(--rebrand-ease);
}

.rebrand-shell :is(.btn, .btn-primary, button.btn-primary, .btn-quiet) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  font-weight: 600;
  min-height: 36px;
  border: 1px solid transparent;
  background: var(--rebrand-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(36, 84, 240, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.rebrand-shell :is(.btn, .btn-primary, button.btn-primary, .btn-quiet):hover {
  transform: translateY(-1px);
  background: var(--rebrand-primary-hover);
  box-shadow: 0 8px 24px rgba(36, 84, 240, 0.26);
}

.rebrand-shell .btn-ghost,
.rebrand-shell button.ghost,
.rebrand-shell .acct-logout,
.rebrand-shell .topbar-burger,
.rebrand-shell .side-collapse,
.rebrand-shell .side-expand,
.rebrand-shell .notif-bell {
  background: var(--rebrand-surface);
  color: var(--rebrand-ink);
  border: 1px solid var(--rebrand-line);
}

.rebrand-shell .btn-ghost:hover,
.rebrand-shell button.ghost:hover,
.rebrand-shell .acct-logout:hover,
.rebrand-shell .topbar-burger:hover,
.rebrand-shell .side-collapse:hover,
.rebrand-shell .side-expand:hover,
.rebrand-shell .notif-bell:hover {
  border-color: var(--rebrand-line-strong);
  color: var(--rebrand-ink);
  transform: translateY(-1px);
}

.rebrand-shell button.good,
.rebrand-shell .pill2.ok,
.rebrand-shell .badge.approved,
.rebrand-shell .badge.success {
  background: rgba(15, 157, 107, 0.14);
  color: var(--rebrand-success);
}

.rebrand-shell button.bad {
  background: #d13b4f;
  border-color: #d13b4f;
  color: #fff;
}

.rebrand-shell i[class^="ti-"],
.rebrand-shell i[class*=" ti-"] {
  transition: transform var(--rebrand-motion-duration) var(--rebrand-ease), color var(--rebrand-motion-duration) var(--rebrand-ease);
}

.rebrand-shell .nav-item:hover i,
.rebrand-shell .admin-nav button:hover i,
.rebrand-shell .btn:hover i,
.rebrand-shell .icon-btn:hover i {
  transform: translateX(1px);
}

.rebrand-shell :is(.kpis, .grid2, .overview-metrics, .metering-grid, .metering-layout, .account-summary, .security-summary, .admin-content, .content, .view[data-view]) {
  --rebrand-stagger-step: 60ms;
}

@media (prefers-reduced-motion: no-preference) {
  .rebrand-shell .rebrand-fade {
    opacity: 0;
    transform: translateY(6px);
    animation: rebrandFadeIn var(--rebrand-motion-duration) var(--rebrand-ease) forwards;
  }

  .rebrand-shell .rebrand-stagger > * {
    animation-delay: calc(var(--rebrand-stagger-step, 50ms) * var(--i, 0));
  }

  .rebrand-shell .rebrand-stagger > *:nth-child(1) { --i: 1; }
  .rebrand-shell .rebrand-stagger > *:nth-child(2) { --i: 2; }
  .rebrand-shell .rebrand-stagger > *:nth-child(3) { --i: 3; }
  .rebrand-shell .rebrand-stagger > *:nth-child(4) { --i: 4; }
  .rebrand-shell .rebrand-stagger > *:nth-child(5) { --i: 5; }
  .rebrand-shell .rebrand-stagger > *:nth-child(6) { --i: 6; }
  .rebrand-shell .rebrand-stagger > *:nth-child(7) { --i: 7; }
  .rebrand-shell .rebrand-stagger > *:nth-child(8) { --i: 8; }
}

@keyframes rebrandFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.rebrand-shell .rebrand-loading-sheen {
  position: relative;
  overflow: hidden;
}

.rebrand-shell .rebrand-loading-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 42%, transparent 100%);
  transform: translateX(-120%);
  animation: rebrandShimmer 1.4s infinite;
}

@keyframes rebrandShimmer {
  to {
    transform: translateX(120%);
  }
}

.rebrand-shell .badge,
.rebrand-shell .pill2 {
  border-radius: 999px;
  border-color: var(--rebrand-line);
}

.rebrand-shell .pill2.ok,
.rebrand-shell .badge.success,
.rebrand-shell .badge.succeeded,
.rebrand-shell .pill2.good {
  color: #0a8e60;
  border-color: rgba(15, 157, 107, 0.28);
}

.rebrand-shell .btn-block { width: 100%; }