/* HMS premium theme — written fresh for this app.
   Palette: dark navy #0B0F1A, card #141A2E, secondary #1B2340,
   cyan #00E5FF (hover #5CEEFF), pink #FF2E88 (light-mode pink #DB2777).
   The glowing border is a CSS-only rotating conic beam. There is
   deliberately no motion-suppression rule disabling it: the
   animation must keep running (no rule here suppresses it). */
:root {
  --hms-bg: #0B0F1A;
  --hms-card: #141A2E;
  --hms-card2: #1B2340;
  --hms-cyan: #00E5FF;
  --hms-cyan-hover: #5CEEFF;
  --hms-pink: #FF2E88;
  --hms-pink-light: #DB2777;
  --hms-btn-text: #06202A;
}
html.dark body { background: var(--hms-bg); color: #fff; }
.hms-card { background: var(--hms-card); color: #fff; }
.hms-card2 { background: var(--hms-card2); color: #fff; }
.hms-headline {
  background: linear-gradient(90deg, var(--hms-cyan), var(--hms-pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hms-btn {
  background: var(--hms-cyan); color: var(--hms-btn-text);
  font-weight: 700; border-radius: 9999px;
  box-shadow: 0 0 18px rgba(0, 229, 255, .45);
}
.hms-btn:hover { background: var(--hms-cyan-hover); }
.hms-input {
  width: 100%; border-radius: 9999px; padding: .75rem 1.1rem;
  background: #0B0F1A; color: #fff; border: 1px solid #334155;
  outline: none;
}
.hms-input:focus { border-color: var(--hms-cyan); box-shadow: 0 0 0 3px rgba(0, 229, 255, .35), 0 0 18px rgba(0, 229, 255, .35); }
.hms-input::placeholder { color: #94a3b8; }
select.hms-input option { background: #141A2E; color: #fff; }
/* Rotating glowing border: wrapper hides overflow, beam rotates ~5s. */
.glow-wrap { position: relative; border-radius: 26px; padding: 4px; overflow: hidden; isolation: isolate; }
.glow-wrap::before {
  content: ""; position: absolute; inset: -60%; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0%, var(--hms-cyan) 12%, transparent 28%, transparent 50%, var(--hms-pink) 62%, transparent 78%, transparent 100%);
  animation: hms-beam 5s linear infinite;
}
.glow-card { position: relative; z-index: 1; background: var(--hms-card); border-radius: 22px; }
@keyframes hms-beam { to { transform: rotate(360deg); } }
/* Light variant: same cyan/pink accents, pink deepens for readability. */
html:not(.dark) .hms-headline {
  background: linear-gradient(90deg, #0891b2, var(--hms-pink-light));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html:not(.dark) .hms-input { background: #fff; color: #0f172a; border-color: #cbd5e1; }
html:not(.dark) .hms-input::placeholder { color: #64748b; }
html:not(.dark) select.hms-input option { background: #fff; color: #0f172a; }