/* White-label visual layer: Obsidian Prism */
:root {
  --cyan: var(--brand-primary, #a78bfa);
  --cyan2: var(--brand-secondary, #f59e0b);
  --pink: var(--brand-accent, #fb7185);
  --pink2: #fda4af;
  --gold: var(--brand-secondary, #f59e0b);
  --bg: var(--brand-bg, #090712);
  --bg2: var(--brand-bg-alt, #120d1d);
  --bg3: var(--brand-surface, #171126);
  --text: #dcd5ec;
  --text-hi: var(--brand-text, #eee9ff);
  --text-lo: var(--brand-muted, #958ca8);
  --border: color-mix(in srgb, var(--cyan) 22%, transparent);
  --border2: color-mix(in srgb, var(--cyan) 44%, transparent);
  --card-bg: rgba(18, 13, 29, .94);
  --radius: 20px;
  --radius-sm: 12px;
}

body.white-label-theme {
  font-family: Bahnschrift, "Segoe UI Variable", "Microsoft JhengHei", sans-serif;
  background:
    radial-gradient(circle at 9% 13%, color-mix(in srgb, var(--brand-primary) 19%, transparent), transparent 28%),
    radial-gradient(circle at 90% 84%, color-mix(in srgb, var(--brand-secondary) 13%, transparent), transparent 31%),
    linear-gradient(122deg, var(--brand-bg) 0%, #0d0918 48%, #07050d 100%);
}

body.white-label-theme::before {
  opacity: .72;
  background-image:
    linear-gradient(115deg, transparent 0 47%, color-mix(in srgb, var(--brand-primary) 9%, transparent) 48% 49%, transparent 50%),
    linear-gradient(25deg, transparent 0 47%, color-mix(in srgb, var(--brand-secondary) 5%, transparent) 48% 49%, transparent 50%);
  background-size: 86px 86px;
  mask-image: linear-gradient(to bottom, #000, transparent 94%);
  animation: prism-grid-shift 32s linear infinite;
}

body.white-label-theme::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 22%, transparent 78%, rgba(0,0,0,.48)),
    radial-gradient(ellipse at 50% -12%, color-mix(in srgb, var(--brand-primary) 22%, transparent), transparent 45%);
  animation: prism-ambient 10s ease-in-out infinite;
}

.white-label-theme .login-screen {
  background:
    linear-gradient(138deg, rgba(7, 5, 14, .98), rgba(19, 12, 31, .97)),
    var(--brand-bg);
}

.white-label-theme .login-bg-glow {
  background:
    radial-gradient(circle at 22% 45%, color-mix(in srgb, var(--brand-primary) 24%, transparent), transparent 30%),
    radial-gradient(circle at 78% 52%, color-mix(in srgb, var(--brand-secondary) 12%, transparent), transparent 28%);
}

.white-label-theme .scanlines { opacity: .32; }

.white-label-theme .login-card {
  width: min(820px, calc(100% - 36px));
  max-width: none;
  min-height: 460px;
  padding: 35px 46px 31px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 50px;
  align-content: center;
  text-align: left;
  border-radius: 30px 8px 30px 8px;
  border-color: color-mix(in srgb, var(--brand-primary) 54%, transparent);
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--brand-primary) 7%, transparent), transparent 40%),
    rgba(13, 9, 23, .96);
  box-shadow: 0 36px 110px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06);
  animation: prism-enter .7s cubic-bezier(.2,.8,.2,1) both;
}

.white-label-theme .terminal-dot-row,
.white-label-theme .login-status-row,
.white-label-theme .login-note { grid-column: 1 / -1; }
.white-label-theme .terminal-dot-row { margin-bottom: 22px; }
.white-label-theme .login-core {
  grid-column: 1;
  grid-row: 2 / span 7;
  align-self: center;
  width: 152px;
  height: 152px;
  margin: 0 auto;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  border-radius: 0;
  border-color: var(--brand-primary);
  background: linear-gradient(145deg, rgba(167,139,250,.16), rgba(245,158,11,.04));
  animation: prism-float 5s ease-in-out infinite;
}
.white-label-theme .login-core::before,
.white-label-theme .login-core::after { border-color: color-mix(in srgb, var(--brand-primary) 58%, transparent); }
.white-label-theme .login-core strong {
  color: var(--brand-secondary);
  font-size: 42px;
  text-shadow: 0 0 28px color-mix(in srgb, var(--brand-secondary) 60%, transparent);
}
.white-label-theme .login-card > :not(.terminal-dot-row):not(.login-core):not(.login-status-row):not(.login-note) { grid-column: 2; }
.white-label-theme .login-card h1 { font-size: clamp(29px, 5vw, 46px); letter-spacing: 2.5px; }
.white-label-theme .login-card h2 { color: var(--brand-secondary); font-size: 14px; letter-spacing: 3px; }
.white-label-theme .eyebrow { color: var(--brand-primary); }
.white-label-theme .password-row input {
  border-radius: 14px 4px 4px 14px;
  background: rgba(8, 5, 16, .74);
}
.white-label-theme .password-row button {
  min-width: 118px;
  border-radius: 4px 14px 14px 4px;
  color: #1b1100;
  border-color: var(--brand-secondary);
  background: linear-gradient(135deg, #fbbf24, #d97706);
}
.white-label-theme .password-row button:hover {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  box-shadow: 0 10px 32px rgba(245,158,11,.22);
}

.white-label-theme .app-header {
  min-height: 88px;
  border-bottom: 0;
  background: rgba(10, 7, 17, .88);
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
}
.white-label-theme .app-header::after {
  left: clamp(18px, 4vw, 54px);
  right: clamp(18px, 4vw, 54px);
  width: auto;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary), transparent);
  animation: none;
}
.white-label-theme .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px 3px 13px 3px;
  border-color: var(--brand-primary);
  background: linear-gradient(145deg, rgba(167,139,250,.23), rgba(245,158,11,.08));
  transform: rotate(45deg);
}
.white-label-theme .brand-block h1 { letter-spacing: 2.2px; }
.white-label-theme .node-chip { color: var(--brand-secondary); border-color: rgba(245,158,11,.34); }

.white-label-theme .screen-panel { padding-top: clamp(34px, 6vw, 70px); }
.white-label-theme .screen-panel::before { display: none; }
.white-label-theme .panel-card {
  border-radius: 28px 7px 28px 7px;
  border-color: color-mix(in srgb, var(--brand-primary) 34%, transparent);
  background:
    linear-gradient(132deg, color-mix(in srgb, var(--brand-primary) 7%, transparent), transparent 36%),
    rgba(16, 11, 27, .92);
  box-shadow: 0 30px 85px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.055);
}
.white-label-theme .settings-card { width: min(980px, 100%); }
.white-label-theme .settings-card::before,
.white-label-theme .result-card::before,
.white-label-theme .signal-card::before {
  left: 28px;
  right: 28px;
  width: auto;
  background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary), transparent);
}
.white-label-theme .panel-intro {
  padding-left: 20px;
  border-left: 3px solid var(--brand-secondary);
}
.white-label-theme .step-indicator {
  border-radius: 50% 50% 12px 50%;
  border-color: var(--brand-primary);
}
.white-label-theme .settings-card .field label::before { color: var(--brand-secondary); }
.white-label-theme .field input,
.white-label-theme .field select {
  border-radius: 16px 5px 16px 5px;
  border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
  background: rgba(8, 5, 15, .72);
}
.white-label-theme .field input:focus,
.white-label-theme .field select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(167,139,250,.10), inset 4px 0 0 var(--brand-secondary);
}
.white-label-theme .primary-btn {
  border-radius: 16px 5px 16px 5px;
  border-color: var(--brand-secondary);
  color: #211500;
  background: linear-gradient(115deg, #fbbf24, #d97706);
  box-shadow: 0 14px 34px rgba(245,158,11,.12);
}
.white-label-theme .primary-btn:hover { box-shadow: 0 16px 38px rgba(245,158,11,.24); }

.white-label-theme .processing-card {
  border-radius: 32px 8px 32px 8px;
  border-color: var(--brand-primary);
  background: rgba(15,10,26,.95);
}
.white-label-theme .progress-bar { background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary)); }
.white-label-theme .processing-percent { color: var(--brand-secondary); }

.white-label-theme .result-wrap { width: min(1080px, 100%); }
.white-label-theme .result-data { background: rgba(167,139,250,.13); border-color: rgba(167,139,250,.16); }
.white-label-theme .result-data dt,
.white-label-theme .result-data dd { background: rgba(11,7,20,.91); }
.white-label-theme .result-data dt { border-left: 2px solid rgba(245,158,11,.42); color: #bbb1cb; }
.white-label-theme .signal-card h3,
.white-label-theme .eyebrow.gold { color: var(--brand-secondary); }
.white-label-theme .signal-plan {
  border-radius: 20px 6px 20px 6px;
  background: rgba(10,7,19,.78);
  border-color: rgba(167,139,250,.22);
}
.white-label-theme .signal-plan.primary {
  border-color: rgba(245,158,11,.74);
  background: linear-gradient(120deg, rgba(245,158,11,.12), rgba(167,139,250,.08), rgba(10,7,19,.88));
  animation: prism-enter .55s ease both, prism-highlight 4s ease-in-out 1s infinite;
}
.white-label-theme .signal-plan.primary .signal-plan-label,
.white-label-theme .signal-plan.primary h4,
.white-label-theme .signal-plan.primary .signal-item strong { color: #fbbf24; }
.white-label-theme .signal-item { border-radius: 16px 4px 16px 4px; background: rgba(15,10,27,.78); }

@keyframes prism-grid-shift { to { background-position: 86px 86px, -86px 86px; } }
@keyframes prism-ambient { 50% { opacity: .68; } }
@keyframes prism-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes prism-float { 50% { transform: translateY(-8px); filter: brightness(1.12); } }
@keyframes prism-highlight { 50% { box-shadow: 0 20px 55px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.08); } }

@media (max-width: 700px) {
  .white-label-theme .login-card {
    min-height: 0;
    display: block;
    padding: 30px 22px 26px;
    text-align: center;
    border-radius: 24px 7px 24px 7px;
  }
  .white-label-theme .login-core { width: 88px; height: 88px; margin: 8px auto 24px; animation: none; }
  .white-label-theme .login-core strong { font-size: 26px; }
  .white-label-theme .login-status-row { margin-top: 22px; }
  .white-label-theme .app-header { min-height: 76px; }
  .white-label-theme .settings-card { border-radius: 22px 6px 22px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .white-label-theme *,
  .white-label-theme *::before,
  .white-label-theme *::after { animation: none !important; }
}