/* Compatibility aliases for native forms while screens are ported to upstream markup. */
:root {
  --bg: rgb(var(--color-dark-950));
  --sidebar: rgb(var(--color-dark-950));
  --panel: rgb(var(--color-dark-900));
  --panel2: rgb(var(--color-dark-800));
  --line: rgba(var(--color-dark-700), 0.5);
  --text: rgb(var(--color-dark-50));
  --muted: rgb(var(--color-dark-400));
  --green: rgb(var(--color-accent-400));
  --greenText: rgb(var(--color-on-accent));
  --danger: rgb(var(--color-error-400));
  --accent: rgb(var(--color-accent-500));
  --surface: rgb(var(--color-dark-900));
  --border: rgba(var(--color-dark-700), 0.4);
}
:root[data-theme="light"] {
  --bg: rgb(var(--color-dark-950));
  --sidebar: rgb(var(--color-dark-950));
  --panel: rgb(var(--color-dark-900));
  --panel2: rgb(var(--color-dark-800));
  --line: rgba(var(--color-dark-700), 0.5);
  --text: rgb(var(--color-dark-50));
  --muted: rgb(var(--color-dark-400));
  --green: rgb(var(--color-accent-400));
  --danger: rgb(var(--color-error-400));
}
.clone-shell h1,
.clone-shell h2,
.clone-shell h3,
.clone-shell p {
  margin-top: 0;
}
.clone-shell .clone-glass-card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  border-color: rgba(255, 255, 255, 0.07);
}
.clone-shell .clone-track {
  background: rgba(255, 255, 255, 0.06);
}
.clone-glass-border {
  border-color: rgba(255, 255, 255, 0.07);
}
.light .clone-glass-card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.88)
  );
  border-color: rgba(0, 0, 0, 0.1);
}
.light .clone-track {
  background: rgba(0, 0, 0, 0.06);
}
.clone-demo-label {
  position: fixed;
  left: 10px;
  bottom: 5px;
  font-size: 8px;
  color: rgb(var(--color-dark-500));
  z-index: 1;
  pointer-events: none;
}
.btn.primary {
  background: rgb(var(--color-accent-500));
  border-color: transparent;
  color: rgb(var(--color-on-accent));
  box-shadow: 0 10px 15px -3px rgba(var(--color-accent-500), 0.2);
}
.btn.primary:hover {
  background: rgb(var(--color-accent-400));
}
.clone-shell .card.balance-card {
  background: rgb(var(--color-dark-900));
}
.clone-shell .page-heading .eyebrow {
  display: none;
}
.clone-shell .page-heading h1 {
  font-size: 30px;
  letter-spacing: normal;
}
.clone-shell .icon-btn {
  color: rgb(var(--color-dark-400));
}
.clone-shell .wheel {
  background: conic-gradient(
    rgb(var(--color-accent-400)) 0 60deg,
    rgb(var(--color-dark-700)) 60deg 120deg,
    #8fb6ef 120deg 180deg,
    rgb(var(--color-dark-700)) 180deg 240deg,
    #ddebc3 240deg 300deg,
    rgb(var(--color-dark-700)) 300deg
  );
}
.original-auth {
  display: flex;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.original-auth .login-inner {
  max-width: 448px;
  width: 100%;
}
.original-auth .auth-brand {
  text-align: center;
  margin-bottom: 20px;
}
.original-auth .auth-brand h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: normal;
}
.original-auth .auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  height: 48px;
  width: 48px;
  border-radius: 12px;
  border: 1px solid rgba(var(--color-dark-700), 0.5);
  background: rgba(var(--color-dark-800), 0.8);
  color: rgb(var(--color-accent-400));
  font-size: 18px;
  font-weight: 700;
}
.original-auth .login-tabs {
  margin-top: 0;
  border: 0;
  background: rgb(var(--color-dark-800));
  padding: 4px;
  border-radius: 8px;
}
.original-auth .login-tabs button {
  padding: 8px;
  border-radius: 6px;
  border: 0;
  font-size: 14px;
  font-weight: 500;
}
.original-auth .login-tabs button.active {
  background: rgb(var(--color-accent-500));
  color: rgb(var(--color-on-accent));
}
.original-auth .login-inner form {
  margin-top: 16px;
}
.original-auth .login-inner form label.field {
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
}
.original-auth input {
  border-radius: 12px;
  background: rgba(var(--color-dark-800), 0.5);
  border-color: rgba(var(--color-dark-700), 0.5);
  padding: 12px 16px;
}
.original-auth .demo-login {
  background: transparent;
  border: 1px dashed rgba(var(--color-dark-700), 0.5);
  margin-top: 16px;
}
.original-auth .demo-login strong {
  color: rgb(var(--color-dark-400));
}
.original-auth .login-divider {
  margin: 16px 0;
}
.original-auth .auth-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 10px;
  color: rgb(var(--color-dark-500));
  margin-top: 20px;
}
.original-auth .auth-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 16px 0;
  font-size: 12px;
  color: rgb(var(--color-dark-300));
  background: transparent;
  border: 0;
}
.original-auth .auth-toggle:before,
.original-auth .auth-toggle:after {
  content: "";
  height: 1px;
  background: rgb(var(--color-dark-700));
  flex: 1;
}
.original-auth .auth-toggle span {
  border: 1px solid rgb(var(--color-dark-700));
  background: rgba(var(--color-dark-800), 0.6);
  border-radius: 99px;
  padding: 6px 14px;
}
.original-auth [data-auth-error][hidden] {
  display: none;
}
.original-auth [hidden] {
  display: none;
}
@media (max-width: 1023px) {
  .clone-shell #page {
    padding-bottom: calc(var(--mobile-nav-clearance) + 8px);
  }
  .clone-shell .page-heading h1 {
    font-size: 24px;
  }
  .clone-demo-label {
    display: none;
  }
}
.source-poll-dialog {
  width: calc(100% - 2rem);
  max-width: 32rem;
  padding: 1.5rem;
  background: rgb(var(--color-dark-900));
  border: 1px solid rgb(var(--color-dark-700));
  border-radius: 1rem;
}
/* TopUpResult: original SVG marks, with native equivalents of motion effects. */
.source-result-state { animation: source-result-appear .25s ease-out; }
.source-result-mark { animation: source-result-pop .4s .1s both; }
.source-result-mark path { stroke-dasharray: 1; animation: source-result-stroke .4s .3s both; }
@keyframes source-result-appear { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes source-result-pop { from { transform: scale(0); } 75% { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes source-result-stroke { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .source-result-state, .source-result-mark, .source-result-mark path { animation: none; } }
.source-device-limit-dialog { width:calc(100% - 32px); max-width:448px; max-height:calc(100dvh - 32px); padding:0; border:1px solid rgb(var(--color-dark-700)); border-radius:16px; background:rgb(var(--color-dark-900)); }
.source-device-limit-dialog .modal-title { padding:20px 20px 12px; margin:0; border:0; }
.source-device-limit-dialog .modal-title h2 { font-size:18px; color:rgb(var(--color-dark-50)); }
@media(max-width:639px) { .source-device-limit-dialog { margin:auto 0 0; width:100%; max-width:none; max-height:90dvh; border-radius:24px 24px 0 0; } }