:root {
  --bl-blue: #155eef;
  --bl-blue-strong: #0b4fd4;
  --bl-cyan: #0891b2;
  --bl-ink: #102a43;
  --bl-muted: #62758a;
  --bl-canvas: #f3f7fb;
  --bl-surface: #ffffff;
  --bl-soft: #eaf1f8;
  --bl-line: #d6e1ec;
  --bl-danger: #d92d20;
  --bl-radius: 8px;
  --bl-shadow: 0 14px 36px rgba(16, 42, 67, 0.08);
  color-scheme: light;
}

html,
body,
#app {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

html[data-brand="beilu"] body {
  min-height: 100dvh;
  color: var(--bl-ink) !important;
  background-color: var(--bl-canvas) !important;
  background-image:
    linear-gradient(rgba(21, 94, 239, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 94, 239, 0.045) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

html[data-brand="beilu"] body::before,
html[data-brand="beilu"] body::after {
  display: none !important;
}

html[data-brand="beilu"] #app {
  position: relative;
  isolation: isolate;
}

html[data-brand="beilu"] #app main,
html[data-brand="beilu"] #app [class*="layout" i] {
  background: transparent !important;
}

html[data-brand="beilu"] #app h1,
html[data-brand="beilu"] #app h2,
html[data-brand="beilu"] #app h3,
html[data-brand="beilu"] #app h4,
html[data-brand="beilu"] #app .text-gray-900,
html[data-brand="beilu"] #app .text-dark-100 {
  color: var(--bl-ink) !important;
  letter-spacing: 0 !important;
}

html[data-brand="beilu"] #app .text-gray-400,
html[data-brand="beilu"] #app .text-gray-500,
html[data-brand="beilu"] #app .text-gray-600,
html[data-brand="beilu"] #app .text-dark-300,
html[data-brand="beilu"] #app .text-dark-400,
html[data-brand="beilu"] #app .text-dark-500 {
  color: var(--bl-muted) !important;
}

html[data-brand="beilu"] #app a {
  color: var(--bl-blue) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html[data-brand="beilu"] #app :focus-visible {
  outline: 3px solid rgba(21, 94, 239, 0.28) !important;
  outline-offset: 2px !important;
}

/* Shared controls */
html[data-brand="beilu"] #app .card,
html[data-brand="beilu"] #app .modal-content,
html[data-brand="beilu"] #app .glass {
  border: 1px solid var(--bl-line) !important;
  border-radius: var(--bl-radius) !important;
  background: var(--bl-surface) !important;
  box-shadow: var(--bl-shadow) !important;
  backdrop-filter: none !important;
  transform: none !important;
}

html[data-brand="beilu"] #app .btn,
html[data-brand="beilu"] #app button {
  min-height: 42px;
  border-radius: 6px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

html[data-brand="beilu"] #app .btn-primary,
html[data-brand="beilu"] #app button[class*="primary"] {
  border-color: var(--bl-blue) !important;
  background: var(--bl-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(21, 94, 239, 0.18) !important;
}

html[data-brand="beilu"] #app .btn-primary:hover,
html[data-brand="beilu"] #app button[class*="primary"]:hover {
  border-color: var(--bl-blue-strong) !important;
  background: var(--bl-blue-strong) !important;
}

html[data-brand="beilu"] #app .btn-secondary,
html[data-brand="beilu"] #app .btn-ghost {
  border-color: var(--bl-line) !important;
  background: #ffffff !important;
  color: var(--bl-ink) !important;
}

html[data-brand="beilu"] #app .input,
html[data-brand="beilu"] #app input,
html[data-brand="beilu"] #app textarea,
html[data-brand="beilu"] #app select,
html[data-brand="beilu"] #app .select-trigger,
html[data-brand="beilu"] #app .date-picker-trigger {
  min-height: 42px;
  border: 1px solid #c7d5e3 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--bl-ink) !important;
  box-shadow: none !important;
}

html[data-brand="beilu"] #app input:focus,
html[data-brand="beilu"] #app textarea:focus,
html[data-brand="beilu"] #app select:focus,
html[data-brand="beilu"] #app .input:focus {
  border-color: var(--bl-blue) !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
  outline: 0 !important;
}

html[data-brand="beilu"] #app .badge {
  border-radius: 4px !important;
  font-weight: 650 !important;
}

html[data-brand="beilu"] #app .bg-white,
html[data-brand="beilu"] #app .bg-gray-50,
html[data-brand="beilu"] #app .dark\:bg-dark-800,
html[data-brand="beilu"] #app .dark\:bg-dark-900 {
  background-color: #ffffff !important;
}

html[data-brand="beilu"] #app .border-gray-100,
html[data-brand="beilu"] #app .border-gray-200,
html[data-brand="beilu"] #app .dark\:border-dark-700,
html[data-brand="beilu"] #app .dark\:border-dark-800 {
  border-color: var(--bl-line) !important;
}

/* Navigation and work surfaces */
html[data-brand="beilu"].brand-page-app body {
  background-color: #eef4f9 !important;
  background-image: none !important;
}

html[data-brand="beilu"] #app .sidebar {
  border-right: 1px solid var(--bl-line) !important;
  background: #ffffff !important;
  box-shadow: 8px 0 28px rgba(16, 42, 67, 0.04) !important;
}

html[data-brand="beilu"] #app .sidebar-header {
  border-bottom: 1px solid var(--bl-line) !important;
  background: #ffffff !important;
}

html[data-brand="beilu"] #app .sidebar-logo {
  width: 144px !important;
  height: auto !important;
  max-height: 44px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

html[data-brand="beilu"] #app .sidebar-brand-title,
html[data-brand="beilu"] #app .sidebar-label,
html[data-brand="beilu"] #app .sidebar-section-title {
  color: #60758a !important;
}

html[data-brand="beilu"] #app .sidebar-link {
  margin: 2px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: #435b71 !important;
}

html[data-brand="beilu"] #app .sidebar-link:hover {
  border-color: #dce7f2 !important;
  background: #f4f8fc !important;
  color: var(--bl-blue) !important;
}

html[data-brand="beilu"] #app .sidebar-link.router-link-active,
html[data-brand="beilu"] #app .sidebar-link[aria-current="page"] {
  border-color: #cfe0ff !important;
  background: #eaf1ff !important;
  color: var(--bl-blue) !important;
  box-shadow: inset 3px 0 0 var(--bl-blue) !important;
}

html[data-brand="beilu"] #app .navigation-progress-bar,
html[data-brand="beilu"] #app .from-primary-500 {
  background: var(--bl-blue) !important;
}

html[data-brand="beilu"] #app .bg-mesh-gradient {
  background: #eef4f9 !important;
}

html[data-brand="beilu"] #app .shadow-glow,
html[data-brand="beilu"] #app .shadow-lg,
html[data-brand="beilu"] #app .shadow-sm {
  box-shadow: var(--bl-shadow) !important;
}

html[data-brand="beilu"] #app .empty-state {
  border-radius: var(--bl-radius) !important;
}

html[data-brand="beilu"] #app .empty-state-icon {
  border: 1px solid #d7e3ef !important;
  border-radius: 6px !important;
  background: #f4f8fc !important;
  color: var(--bl-cyan) !important;
}

html[data-brand="beilu"] #app .modal-overlay,
html[data-brand="beilu"] #app .driver-overlay {
  background: rgba(9, 30, 52, 0.58) !important;
}

html[data-brand="beilu"] #app .modal-content,
html[data-brand="beilu"] #app .driver-popover {
  color: var(--bl-ink) !important;
  background: #ffffff !important;
}

/* Public home */
html[data-brand="beilu"].brand-page-home body {
  background-color: #f6f9fc !important;
}

html[data-brand="beilu"].brand-page-home #app main {
  padding-top: clamp(32px, 6vw, 82px) !important;
}

html[data-brand="beilu"].brand-page-home #app main > div {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-inline: 24px !important;
}

html[data-brand="beilu"].brand-page-home #app main > div > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(300px, 0.86fr) minmax(440px, 1.14fr) !important;
  align-items: center !important;
  gap: clamp(44px, 7vw, 96px) !important;
  min-height: 430px !important;
  margin-bottom: 40px !important;
}

html[data-brand="beilu"].brand-page-home #app main > div > div:first-child > div:first-child {
  max-width: 500px !important;
  text-align: left !important;
}

html[data-brand="beilu"].brand-page-home #app main h1 {
  margin: 0 0 20px !important;
  color: var(--bl-ink) !important;
  font-size: clamp(52px, 7vw, 88px) !important;
  font-weight: 750 !important;
  line-height: 0.98 !important;
}

html[data-brand="beilu"].brand-page-home #app main p {
  max-width: 500px !important;
  color: #546b81 !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

html[data-brand="beilu"].brand-page-home #app .terminal-container {
  width: min(100%, 560px) !important;
}

html[data-brand="beilu"].brand-page-home #app .terminal-window {
  overflow: hidden !important;
  border: 1px solid #193a59 !important;
  border-radius: var(--bl-radius) !important;
  box-shadow: 18px 18px 0 #dfe9f3 !important;
}

html[data-brand="beilu"].brand-page-home #app main > div > div:nth-child(2) {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 0 32px !important;
}

html[data-brand="beilu"].brand-page-home #app main > div > div:nth-child(2) > * {
  border: 1px solid var(--bl-line) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #38546e !important;
}

html[data-brand="beilu"].brand-page-home #app main > div > div:nth-child(3) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html[data-brand="beilu"].brand-page-home #app main > div > div:nth-child(3) > * {
  min-height: 190px !important;
  transform: none !important;
}

/* Login and registration */
html[data-brand="beilu"].brand-page-auth body {
  background-color: #edf4fa !important;
  background-image:
    linear-gradient(rgba(21, 94, 239, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 94, 239, 0.05) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

html[data-brand="beilu"].brand-page-auth #app .card {
  border-top: 4px solid var(--bl-blue) !important;
  box-shadow: 0 26px 64px rgba(16, 42, 67, 0.14) !important;
}

html[data-brand="beilu"].brand-page-auth #app {
  width: 58vw !important;
  margin-left: 42vw !important;
}

html[data-brand="beilu"].brand-page-auth #app img[src*="branding"] {
  display: none !important;
}

html[data-brand="beilu"] .brand-auth-panel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 42vw;
  overflow: hidden;
  padding: 9vh 5vw;
  border-right: 1px solid #36516a;
  background-color: #102a43;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size: 52px 52px;
  color: #ffffff;
}

html[data-brand="beilu"] .brand-auth-panel .auth-panel-code,
html[data-brand="beilu"] .brand-auth-panel small {
  font: 700 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #9bb4c9;
}

html[data-brand="beilu"] .brand-auth-panel > strong {
  display: block;
  margin-top: 20vh;
  font-size: 76px;
  line-height: .9;
  letter-spacing: 0;
}

html[data-brand="beilu"] .brand-auth-panel > strong span { color: #5da8ff; }
html[data-brand="beilu"] .brand-auth-panel p { margin: 28px 0; color: #bfd0de; font: 500 20px/1.45 ui-monospace,Consolas,monospace; }
html[data-brand="beilu"] .auth-panel-route { position: relative; height: 90px; margin: 48px 0; border-top: 1px solid #577188; }
html[data-brand="beilu"] .auth-panel-route::before { content:""; position:absolute; left:8%; right:8%; top:44px; border-top:1px solid #5da8ff; transform:skewY(-6deg); }
html[data-brand="beilu"] .auth-panel-route i { position:absolute; top:36px; width:14px; height:14px; border:3px solid #102a43; background:#5da8ff; }
html[data-brand="beilu"] .auth-panel-route i:nth-child(1){left:8%} html[data-brand="beilu"] .auth-panel-route i:nth-child(2){left:34%;top:47px} html[data-brand="beilu"] .auth-panel-route i:nth-child(3){left:65%;top:26px} html[data-brand="beilu"] .auth-panel-route i:nth-child(4){right:8%;top:36px}

html[data-brand="beilu"].brand-page-auth #app img[src*="branding"] {
  width: min(220px, 66vw) !important;
  height: auto !important;
  max-height: 64px !important;
  border-radius: 0 !important;
}

html[data-brand="beilu"] .brand-signature {
  position: fixed;
  right: 24px;
  bottom: 20px;
  z-index: 0;
  color: #6b8196;
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
}

@media (max-width: 900px) {
  html[data-brand="beilu"].brand-page-auth #app { width: 100% !important; margin-left: 0 !important; }
  html[data-brand="beilu"].brand-page-auth #app img[src*="branding"] { display: block !important; }
  html[data-brand="beilu"] .brand-auth-panel { display: none; }
  html[data-brand="beilu"].brand-page-home #app main > div > div:first-child {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 36px !important;
  }

  html[data-brand="beilu"].brand-page-home #app main > div > div:first-child > div:first-child {
    text-align: center !important;
    margin-inline: auto !important;
  }

  html[data-brand="beilu"].brand-page-home #app main > div > div:first-child > div:nth-child(2),
  html[data-brand="beilu"].brand-page-home #app main > div > div:nth-child(2) {
    justify-content: center !important;
  }

  html[data-brand="beilu"].brand-page-home #app main > div > div:nth-child(3) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  html[data-brand="beilu"].brand-page-home #app main {
    padding-top: 24px !important;
  }

  html[data-brand="beilu"].brand-page-home #app main > div {
    padding-inline: 16px !important;
  }

  html[data-brand="beilu"].brand-page-home #app main h1 {
    font-size: 48px !important;
  }

  html[data-brand="beilu"].brand-page-home #app main > div > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  html[data-brand="beilu"] .brand-signature {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-brand="beilu"] #app .btn,
  html[data-brand="beilu"] #app button,
  html[data-brand="beilu"] #app .sidebar-link,
  html[data-brand="beilu"] #app .card {
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
  }
}