/* Rodeo Labs - Gateway Portal Modern Dark Glassmorphism Theme */
:root {
  --brand-page: #0b0e14;
  --brand-surface: rgba(22, 27, 38, 0.88);
  --brand-soft: #161b26;
  --brand-ink: #f0f4fc;
  --brand-muted: #94a3b8;
  --brand-primary: #3b82f6;
  --brand-on-primary: #ffffff;
  --brand-primary-hover: #2563eb;
  --brand-border: rgba(255, 255, 255, 0.08);
  --brand-control-border: rgba(255, 255, 255, 0.16);
  --brand-focus: #60a5fa;
  --brand-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(59, 130, 246, 0.1);
  --brand-page-image: radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.15) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.12) 0px, transparent 50%);
  --brand-radius: 18px;
  --brand-banner-image: none;
  --brand-banner-height: 0px;
}

body.basic-theme {
  background-color: var(--brand-page) !important;
  background-image: var(--brand-page-image) !important;
  color: var(--brand-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  min-height: 100vh;
}

.basic-theme .app-page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 24px !important;
}

.basic-theme .app-content {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}

.basic-theme .app-container {
  background: var(--brand-surface) !important;
  border: 1px solid var(--brand-border) !important;
  box-shadow: var(--brand-shadow) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: var(--brand-radius) !important;
  padding: 36px 32px !important;
}

.basic-theme .brand-banner {
  display: none !important;
}

.basic-theme .logo-box {
  margin-bottom: 28px !important;
  text-align: center !important;
}

.basic-theme .logo-img {
  filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.3)) !important;
  margin: 0 auto 12px auto !important;
}

.basic-theme .logo-txt {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.basic-theme .app-inp-lbl {
  color: var(--brand-muted) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.basic-theme .app-inp-box {
  background: rgba(11, 14, 20, 0.85) !important;
  border: 1px solid var(--brand-control-border) !important;
  border-radius: 12px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}

.basic-theme .app-inp-box:focus-within {
  border-color: var(--brand-focus) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

/* REMOVE PERSON AND PASSWORD ICONS IN FRONT OF INPUT TEXT */
.basic-theme .app-inp-prf-img {
  display: none !important;
}

.basic-theme .app-inp-txt {
  color: #ffffff !important;
  background: transparent !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: none !important;
  outline: none !important;
}

/* REMOVE QR CODE TOGGLE AND VIEW */
#bookmarks,
#show-qrcode,
#close-qrcode,
#qr,
.app-qr-view,
.app-qr-toggle {
  display: none !important;
}

.basic-theme .app-btn-pri,
.basic-theme .app-btn {
  background: var(--brand-primary) !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 12px 20px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
}

.basic-theme .app-btn-pri:hover,
.basic-theme .app-btn:hover {
  background: var(--brand-primary-hover) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px) !important;
}

.basic-theme .app-btn-sec {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: 12px !important;
  color: var(--brand-muted) !important;
  padding: 12px 16px !important;
  transition: all 0.2s ease !important;
}

.basic-theme .app-btn-sec:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.basic-theme .app-footer, .basic-theme footer {
  color: #64748b !important;
  font-size: 12px !important;
  text-align: center !important;
  margin-top: 24px !important;
}

.basic-theme .app-footer a, .basic-theme footer a {
  color: #94a3b8 !important;
  text-decoration: none !important;
}

.basic-theme .app-footer a:hover, .basic-theme footer a:hover {
  color: #ffffff !important;
}