@keyframes dose-spin      { to { transform: rotate(360deg); } }
@keyframes dose-shimmer   { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes dose-pulse     { 0%,100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes dose-float-up  { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dose-card-in   { from { opacity: 0; transform: translateY(40px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dose-drift     { 0%,100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(18px,-14px) rotate(1deg); } 66% { transform: translate(-12px,10px) rotate(-0.5deg); } }
@keyframes dose-slow-spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes dose-badge-in  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dose-tag-in    { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dose-glow-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ── ROOT ── */
#dose-login-root {
    all: initial;
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw; height: 100vh;
    z-index: 9999;
    overflow: hidden;

    --dl-crimson:       #a12124;
    --dl-crimson-dark:  #5c1012;
    --dl-crimson-deep:  #2e0507;
    --dl-crimson-light: #d64444;
    --dl-gold:          #c9a84c;
    --dl-gold-light:    #e8c96b;
    --dl-cream:         #fdf5ee;
    --dl-ink:           #1a0a0b;
    --dl-muted:         #8a7070;
    --dl-font:          'Century Gothic', CenturyGothic, 'AppleGothic', 'Nunito', sans-serif;
}

#dose-login-root *, #dose-login-root *::before, #dose-login-root *::after {
    box-sizing: border-box; margin: 0; padding: 0;
    font-family: var(--dl-font);
}

/* ══════════════════════════════════════════
   FULL-BLEED BACKGROUND CANVAS
══════════════════════════════════════════ */
/* #dose-login-root .dl-canvas {
    position: absolute; inset: 0; */
    /* Diagonal split: cream top-left, deep crimson bottom-right */
    /* background: linear-gradient(
        128deg,
        var(--dl-cream) 0%,
        #fdf0e6 38%,
        #f5d5d5 52%,
        #8b1a1c 58%,
        #5c1012 72%,
        var(--dl-crimson-deep) 100%
    );
} */


#dose-login-root .dl-canvas {
    position: absolute; inset: 0;
   background: url('/Onestop/assets/img/DOSEDesktopBackground.png') center center / cover no-repeat;
}
/* Remove the noise texture — not needed over a photo */
#dose-login-root .dl-canvas::after {
    display: none;
}

/* Noise texture overlay for tactility */
/* #dose-login-root .dl-canvas::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
} */

#dose-login-root .dl-hero-heading {
    color: var(--dl-ink) !important; /* keep dark — background is light on left */
}
#dose-login-root .dl-hero-sub {
    color: var(--dl-muted) !important; /* keep muted gray */
}
#dose-login-root .dl-hf-icon {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(161, 33, 36, 0.2) !important;
}
#dose-login-root .dl-hero-steps {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(12px) !important;
}

/* Cream-side ambient glow */
#dose-login-root .dl-glow-cream {
    z-index:2;
    position: absolute;
    width: 700px; height: 700px; border-radius: 50%;
    /* background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 65%); */
    top: -150px; left: -150px;
    animation: dose-drift 18s ease-in-out infinite;
    pointer-events: none;
}

/* Crimson-side ambient glow */
#dose-login-root .dl-glow-crimson {
      z-index:2;
    position: absolute;
    width: 600px; height: 600px; border-radius: 50%;
    /* background: radial-gradient(circle, rgba(214,68,68,0.2) 0%, transparent 65%); */
    bottom: -120px; right: -120px;
    animation: dose-drift 14s ease-in-out infinite reverse;
    pointer-events: none;
}

/* Large rotating ring — decorative */
#dose-login-root .dl-ring-deco {
      z-index:2;
    position: absolute;
    width: 900px; height: 900px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.07);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: dose-slow-spin 80s linear infinite;
    pointer-events: none;
}
#dose-login-root .dl-ring-deco-2 {
      z-index:2;
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.05);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: dose-slow-spin 50s linear infinite reverse;
    pointer-events: none;
}
#dose-login-root .dl-canvas::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}
/* Dot grid — only on cream side */
/* #dose-login-root .dl-dots {
    position: absolute;
    inset: 0; right: 45%;
    background-image: radial-gradient(circle at 1px 1px, rgba(161,33,36,0.1) 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
} */

/* ══════════════════════════════════════════
   FLOATING INFO CARDS — premium redesign
══════════════════════════════════════════ */

@keyframes dose-float-card  { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }
@keyframes dose-float-card2 { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } }
@keyframes dose-float-card3 { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-7px); } }
@keyframes dose-float-card4 { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-4px); } }

#dose-login-root .dl-info-tags {
    position: absolute; inset: 0;
    pointer-events: none;
}

/* ── BASE CARD ── */
#dose-login-root .dl-tag {
    position: absolute;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px 11px 12px;
    border-radius: 16px;
    white-space: nowrap;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ── LEFT CARDS (cream side) ── */
#dose-login-root .dl-tag:not(.dl-tag-dark) {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow:
        0 8px 32px rgba(161,33,36,0.10),
        0 2px 8px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,1);
    color: var(--dl-ink);
}

/* Icon box — left cards */
#dose-login-root .dl-tag:not(.dl-tag-dark) .dl-tag-icon {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    background: rgba(161,33,36,0.08);
    border: 1px solid rgba(161,33,36,0.14);
}

/* Text stack — left cards */
#dose-login-root .dl-tag-label {
    display: flex; flex-direction: column; gap: 1px;
}
#dose-login-root .dl-tag-title {
    font-size: 11.5px; font-weight: 800;
    color: var(--dl-ink);
    line-height: 1;
    letter-spacing: 0.1px;
}
#dose-login-root .dl-tag-sub {
    font-size: 9.5px; font-weight: 500;
    color: var(--dl-muted);
    line-height: 1;
}

/* ── RIGHT CARDS (crimson side) ── */
#dose-login-root .dl-tag-dark {
    background: rgba(10,2,2,0.35);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.25),
        0 2px 8px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.08);
    color: #fff;
}

/* Step badge inside dark card */
#dose-login-root .dl-tag-dark .dl-tag-step {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900;
    background: rgba(201,168,76,0.18);
    border: 1.5px solid rgba(201,168,76,0.55);
    color: var(--dl-gold-light);
    line-height: 1;
}

#dose-login-root .dl-tag-dark .dl-tag-title {
    font-size: 11.5px; font-weight: 800;
    color: #ffffff; line-height: 1; letter-spacing: 0.1px;
}
#dose-login-root .dl-tag-dark .dl-tag-sub {
    font-size: 9.5px; font-weight: 500;
    color: rgba(255,255,255,0.5); line-height: 1;
}

/* ── POSITIONS & INDIVIDUAL FLOAT ANIMATIONS ── */
#dose-login-root .dl-tag-1 {
    top: 12%; left: 3.5%;
    animation: dose-tag-in 0.7s 0.7s ease both, dose-float-card 5s 1.4s ease-in-out infinite;
}
#dose-login-root .dl-tag-2 {
    top: 30%; left: 2.5%;
    animation: dose-tag-in 0.7s 0.9s ease both, dose-float-card2 6s 1.6s ease-in-out infinite;
}
#dose-login-root .dl-tag-3 {
    bottom: 30%; left: 2.5%;
    animation: dose-tag-in 0.7s 1.1s ease both, dose-float-card3 5.5s 1.8s ease-in-out infinite;
}
#dose-login-root .dl-tag-4 {
    bottom: 12%; left: 3.5%;
    animation: dose-tag-in 0.7s 1.3s ease both, dose-float-card4 6.5s 2.0s ease-in-out infinite;
}
#dose-login-root .dl-tag-5 {
    top: 12%; right: 3.5%;
    animation: dose-badge-in 0.7s 0.8s ease both, dose-float-card2 6s 1.5s ease-in-out infinite;
}
#dose-login-root .dl-tag-6 {
    top: 30%; right: 2.5%;
    animation: dose-badge-in 0.7s 1.0s ease both, dose-float-card 5s 1.7s ease-in-out infinite;
}
#dose-login-root .dl-tag-7 {
    bottom: 30%; right: 2.5%;
    animation: dose-badge-in 0.7s 1.2s ease both, dose-float-card4 6.5s 1.9s ease-in-out infinite;
}
#dose-login-root .dl-tag-8 {
    bottom: 12%; right: 3.5%;
    animation: dose-badge-in 0.7s 1.4s ease both, dose-float-card3 5.5s 2.1s ease-in-out infinite;
}

/* ══════════════════════════════════════════
   HEADER — floats above card
══════════════════════════════════════════ */
#dose-login-root .dl-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 40px;
    z-index: 10;
    animation: dose-float-up 0.6s 0.1s ease both;
}

#dose-login-root .dl-header-logo {
    display: flex; align-items: center; gap: 10px;
}
#dose-login-root .dl-header-logo img {
    height: 36px; width: auto;
    filter: drop-shadow(0 2px 8px rgba(161,33,36,0.2));
}
#dose-login-root .dl-header-tagline {
    font-size: 10px; font-weight: 700;
    color: white; letter-spacing: 1.5px; text-transform: uppercase;
}

#dose-login-root .dl-header-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 16px;
    border: 1px solid rgba(161,33,36,0.2);
    border-radius: 50px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    font-size: 10px; font-weight: 700;
    color: var(--dl-crimson); letter-spacing: 1.5px; text-transform: uppercase;
}
#dose-login-root .dl-header-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--dl-crimson);
    animation: dose-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   MAIN STAGE — centers the card + headline
══════════════════════════════════════════ */
#dose-login-root .dl-stage {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 80px 20px 20px;
    z-index: 5;
}

/* Wide wrapper: big headline LEFT, card RIGHT */
#dose-login-root .dl-stage-inner {
    display: flex; align-items: center;
    gap: 60px;
    width: 100%; max-width: 1100px;
}

/* ── LEFT: BIG HEADLINE BLOCK ── */
#dose-login-root .dl-hero {
    flex: 1;
    min-width: 0;
    animation: dose-float-up 0.7s 0.25s ease both;
}

#dose-login-root .dl-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px;
    border: 1.5px solid rgba(161,33,36,0.3);
    border-radius: 50px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(8px);
    font-size: 10px; font-weight: 800;
    color: var(--dl-crimson);
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(161,33,36,0.08);
}
#dose-login-root .dl-hero-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--dl-crimson);
    animation: dose-pulse 2s ease-in-out infinite;
}

#dose-login-root .dl-hero-heading {
    font-size: clamp(38px, 4.5vw, 68px) !important;
    font-weight: 900 !important;
    line-height: 1.0 !important;
    color: var(--dl-ink) !important;
    letter-spacing: -1.5px !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
}
#dose-login-root .dl-hero-heading-white {
    display: block !important;
    color: white !important;
    text-shadow: none !important;
}
#dose-login-root .dl-hero-heading-gold {
    display: block !important;
    /* background: linear-gradient(90deg, var(--dl-gold), #b8920a, var(--dl-gold), #d4a820) !important; */
    color:white !important;
    /* background-size: 200% auto !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; */
    background-clip: text !important;
    animation: dose-shimmer 3s linear infinite !important;
}

#dose-login-root .dl-hero-sub {
    font-size: 17px !important;
    color: var(--dl-muted) !important;
    line-height: 1.7 !important;
    max-width: 320px !important;
    margin-bottom: 28px !important;
    font-weight: 500 !important;
}

/* Stat chips */
#dose-login-root .dl-hero-stats {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 28px;
}
#dose-login-root .dl-stat-chip {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 18px;
    background: #ffffff;
    border: 1.5px solid rgba(161,33,36,0.15);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(161,33,36,0.1);
    min-width: 72px;
}
#dose-login-root .dl-stat-chip-num {
    font-size: 22px !important; font-weight: 900 !important;
    color: var(--dl-crimson) !important; line-height: 1 !important;
    margin-bottom: 3px !important;
}
#dose-login-root .dl-stat-chip-label {
    font-size: 9px !important; font-weight: 700 !important;
    color: var(--dl-muted) !important;
    letter-spacing: 0.8px !important; text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Feature rows */
#dose-login-root .dl-hero-features {
    display: flex; flex-direction: column; gap: 10px;
}
#dose-login-root .dl-hf-row {
    display: flex; align-items: center; gap: 12px;
    font-size: 12.5px; color: var(--dl-ink);
    font-weight: 600;
}
#dose-login-root .dl-hf-icon {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    background: rgba(161,33,36,0.08);
    border: 1.5px solid rgba(161,33,36,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}

/* Steps pill */
#dose-login-root .dl-hero-steps {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: nowrap; margin-top: 20px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1.5px solid rgba(161,33,36,0.15);
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(161,33,36,0.08);
    width: fit-content;
}
#dose-login-root .dl-hs-item {
    display: flex; align-items: center; gap: 4px;
    font-size: 9.5px; color: var(--dl-muted);
    font-weight: 700; white-space: nowrap;
}
#dose-login-root .dl-hs-num {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
    background: var(--dl-crimson);
    border: 1px solid var(--dl-crimson);
    color: #ffffff;
    font-size: 8px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
#dose-login-root .dl-hs-arrow { color: rgba(161,33,36,0.3); font-size: 9px; }

/* ── RIGHT: GLASS FORM CARD ── */
#dose-login-root .dl-card {
    width: 100%; max-width: 400px;
    flex-shrink: 0;
    animation: dose-card-in 0.75s 0.3s cubic-bezier(0.22,1,0.36,1) both;
}

#dose-login-root .dl-glass-card {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-radius: 28px !important;
    padding: 36px !important;
    border: 1px solid rgba(255,255,255,0.9) !important;
    box-shadow:
        0 0 0 1px rgba(161,33,36,0.08),
        0 30px 80px rgba(0,0,0,0.18),
        0 8px 32px rgba(161,33,36,0.12),
        inset 0 1px 0 rgba(255,255,255,1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Gold accent bar at top of card */
#dose-login-root .dl-glass-card::before {
    content: '' !important;
    position: absolute !important; top: 0 !important; left: 15% !important; right: 15% !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, var(--dl-gold), var(--dl-crimson), var(--dl-gold), transparent) !important;
    border-radius: 0 0 8px 8px !important;
}

/* Subtle inner glow on card */
#dose-login-root .dl-glass-card::after {
    content: '' !important;
    position: absolute !important; inset: 0 !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

/* Card logo */
#dose-login-root .dl-card-logo {
    text-align: center; margin-bottom: 20px;
    position: relative; z-index: 1;
}
#dose-login-root .dl-card-logo img {
    max-height: 64px; width: auto; display: inline-block;
    filter: drop-shadow(0 2px 10px rgba(161,33,36,0.18));
}
#dose-login-root .dl-card-gold-line {
    width: 36px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--dl-gold), transparent);
    margin: 10px auto 10px;
}
#dose-login-root .dl-card-title {
    font-size: 17px !important; font-weight: 800 !important;
    color: var(--dl-ink) !important; line-height: 1.2 !important;
    text-align: center !important; margin-bottom: 3px !important;
    letter-spacing: -0.3px !important; text-transform: none !important;
}
#dose-login-root .dl-card-sub {
    font-size: 11.5px !important; color: var(--dl-muted) !important;
    font-weight: 400 !important; text-align: center !important; margin: 0 !important;
}

/* Form elements */
#dose-login-root .dl-form-body { position: relative; z-index: 1; margin-top: 22px; }

#dose-login-root .dl-field-group { margin-bottom: 14px !important; }
#dose-login-root .dl-field-label {
    display: block !important; font-size: 10.5px !important; font-weight: 800 !important;
    color: var(--dl-ink) !important; letter-spacing: 1px !important; text-transform: uppercase !important;
    margin-bottom: 6px !important;
}
#dose-login-root .dl-field-input {
    display: block !important; width: 100% !important; padding: 12px 15px !important;
    font-size: 14px !important; color: var(--dl-ink) !important;
    background: rgba(250,248,248,0.8) !important;
    border: 1.5px solid rgba(232,220,220,0.9) !important;
    border-radius: 12px !important; outline: none !important;
    transition: all 0.22s !important; box-shadow: none !important;
    line-height: 1.5 !important; -webkit-appearance: none !important; appearance: none !important;
}
#dose-login-root .dl-field-input:focus {
    border-color: var(--dl-crimson) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3.5px rgba(161,33,36,0.09) !important;
}
#dose-login-root .dl-field-input::placeholder { color: #c5bcbc !important; opacity: 1 !important; }

#dose-login-root .dl-pwd-wrap { position: relative !important; }
#dose-login-root .dl-pwd-wrap .dl-field-input { padding-right: 46px !important; }
#dose-login-root .dl-pwd-toggle {
    position: absolute !important; right: 13px !important; top: 50% !important;
    transform: translateY(-50%) !important; background: none !important; border: none !important;
    cursor: pointer !important; color: #c5bcbc !important;
    display: flex !important; align-items: center !important;
    padding: 0 !important; line-height: 1 !important;
    transition: color 0.2s !important; box-shadow: none !important;
}
#dose-login-root .dl-pwd-toggle:hover { color: var(--dl-crimson) !important; }

#dose-login-root .dl-forgot-link {
    display: block !important; text-align: right !important;
    font-size: 11.5px !important; font-weight: 700 !important;
    color: var(--dl-crimson) !important; text-decoration: none !important;
    margin-bottom: 16px !important; transition: opacity 0.2s !important;
}
#dose-login-root .dl-forgot-link:hover { opacity: 0.6 !important; color: var(--dl-crimson) !important; text-decoration: none !important; }

/* Alerts */
#dose-login-root .dl-alert {
    padding: 10px 14px !important; border-radius: 9px !important;
    font-size: 12.5px !important; margin-bottom: 14px !important;
    border-left: 3px solid !important;
}
#dose-login-root .dl-alert-danger  { background:#fff0f0 !important; border-color:#e53e3e !important; color:#c53030 !important; }
#dose-login-root .dl-alert-success { background:#f0fff4 !important; border-color:#38a169 !important; color:#276749 !important; }

/* Sign in button */
#dose-login-root .dl-btn-signin {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 9px !important; width: 100% !important; padding: 13.5px !important;
    font-size: 14px !important; font-weight: 800 !important; color: #fff !important;
    background: linear-gradient(135deg, #d04040 0%, var(--dl-crimson) 45%, #6d1315 100%) !important;
    border: none !important; border-radius: 12px !important; cursor: pointer !important;
    letter-spacing: 0.4px !important; position: relative !important; overflow: hidden !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 5px 20px rgba(161,33,36,0.4), 0 1px 0 rgba(255,255,255,0.1) inset !important;
    text-decoration: none !important; line-height: 1 !important;
}
#dose-login-root .dl-btn-signin::before {
    content: '' !important; position: absolute !important; inset: 0 !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%) !important;
    opacity: 0 !important; transition: opacity 0.2s !important;
}
#dose-login-root .dl-btn-signin:hover { transform: translateY(-2px) !important; box-shadow: 0 9px 26px rgba(161,33,36,0.48) !important; color: #fff !important; }
#dose-login-root .dl-btn-signin:hover::before { opacity: 1 !important; }
#dose-login-root .dl-btn-signin:active { transform: translateY(0) !important; }

/* Divider */
#dose-login-root .dl-divider {
    display: flex !important; align-items: center !important; gap: 10px !important;
    margin: 14px 0 !important; color: #888 !important; font-size: 10.5px !important; font-weight: 700 !important;
}
#dose-login-root .dl-divider::before, #dose-login-root .dl-divider::after {
    content: '' !important; flex: 1 !important; height: 1px !important; background: rgba(180,165,165,0.6) !important;
}

/* Enroll button */
#dose-login-root .dl-btn-enroll {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 7px !important; width: 100% !important; padding: 12px !important;
    font-size: 13px !important; font-weight: 700 !important;
    color: var(--dl-crimson) !important; background: transparent !important;
    border: 2px solid rgba(161,33,36,0.35) !important; border-radius: 12px !important;
    cursor: pointer !important; text-decoration: none !important; line-height: 1 !important;
    transition: all 0.22s !important;
    background: rgba(161,33,36,0.04) !important;
}
#dose-login-root .dl-btn-enroll:hover {
    background: var(--dl-crimson) !important; color: #fff !important;
    border-color: var(--dl-crimson) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 18px rgba(161,33,36,0.25) !important;
    text-decoration: none !important;
}

/* Footer note */
#dose-login-root .dl-footer-note {
    text-align: center !important; font-size: 10.5px !important; color: #888 !important;
    margin-top: 14px !important; margin-bottom: 0 !important; letter-spacing: 0.1px !important;
    position: relative !important; z-index: 1 !important; font-weight: 500 !important;
}

/* ══════════════════════════════════════════
   BOTTOM BAR
══════════════════════════════════════════ */
#dose-login-root .dl-bottom-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center; gap: 28px;
    padding: 13px 40px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.14);
    z-index: 10;
    animation: dose-float-up 0.6s 1.6s ease both;
    opacity: 0;
}
#dose-login-root .dl-bottom-item {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.82);
    letter-spacing: 0.4px; white-space: nowrap;
}
#dose-login-root .dl-bottom-item-icon { font-size: 14px; }
#dose-login-root .dl-bottom-divider {
    width: 1px; height: 16px;
    background: rgba(255,255,255,0.22);
    flex-shrink: 0;
}

/* Mobile footer — hidden on desktop */
#dose-login-root .dl-mobile-footer { display: none; }

/* ══════════════════════════════════════════
   RESPONSIVE — BEAUTIFUL MOBILE LAYOUT
══════════════════════════════════════════ */
@media (max-width: 960px) {
    #dose-login-root {
        position: relative !important;
        height: auto !important; min-height: 100vh !important;
        overflow-y: auto !important; overflow-x: hidden !important;
    }

    /* Fixed background layers so they cover full scroll */
    #dose-login-root .dl-canvas,
    #dose-login-root .dl-glow-cream,
    #dose-login-root .dl-glow-crimson,
    #dose-login-root .dl-ring-deco,
    #dose-login-root .dl-ring-deco-2,
    #dose-login-root .dl-dots { position: fixed !important; }

    /* Desktop-only elements hidden */
    #dose-login-root .dl-info-tags,
    #dose-login-root .dl-bottom-bar { display: none !important; }

    /* Compact header */
    #dose-login-root .dl-header { padding: 14px 20px !important; }
    #dose-login-root .dl-header-tagline { display: none !important; }

    /* Stage: vertical block layout, no flex centering */
    #dose-login-root .dl-stage {
        position: relative !important;
        padding: 70px 0 0 !important;
        min-height: 100vh !important;
        background: transparent !important;
        display: block !important;
        align-items: unset !important;
        justify-content: unset !important;
    }

    /* Column layout, card first (order:1), hero second (order:2) */
    #dose-login-root .dl-stage-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important; max-width: 100% !important;
    }

    /* ── CARD — top section, cream bg ── */
    #dose-login-root .dl-card {
        order: 1 !important;
        max-width: 100% !important; width: 100% !important;
        padding: 18px 16px 24px !important;
    }
    #dose-login-root .dl-glass-card {
        border-radius: 22px !important;
        padding: 28px 22px !important;
        background: rgba(255,255,255,0.96) !important;
        box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(161,33,36,0.1) !important;
    }

    /* ── HERO — bottom section, full crimson bg ── */
    #dose-login-root .dl-hero {
        order: 2 !important;
        text-align: center !important;
        padding: 40px 24px 20px !important;
        margin-top: 0 !important;
        /* background: linear-gradient(175deg, #8b1a1c 0%, #5c1012 45%, #2e0507 100%) !important; */
        position: relative !important; overflow: hidden !important;
    }
    /* Crimson radial layers behind hero */
    #dose-login-root .dl-hero::before {
        content: '' !important; position: absolute !important; inset: 0 !important;
        background:
            radial-gradient(ellipse at 15% 15%, rgba(214,68,68,0.28) 0%, transparent 55%),
            radial-gradient(ellipse at 85% 85%, rgba(90,12,14,0.5) 0%, transparent 50%) !important;
        pointer-events: none !important;
    }
    #dose-login-root .dl-hero::after {
        content: '' !important; position: absolute !important; inset: 0 !important;
        background-image:
            linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) !important;
        background-size: 38px 38px !important;
        pointer-events: none !important;
    }
    #dose-login-root .dl-hero > * { position: relative !important; z-index: 1 !important; }

    /* Eyebrow pill adapts to dark bg */
    #dose-login-root .dl-hero-eyebrow {
        background: rgba(255,255,255,0.1) !important;
        border-color: rgba(255,255,255,0.18) !important;
        color: rgba(255,255,255,0.88) !important;
        box-shadow: none !important;
        margin-left: auto !important; margin-right: auto !important;
    }
    #dose-login-root .dl-hero-eyebrow-dot { background: var(--dl-gold) !important; }

    /* Headings on dark */
    #dose-login-root .dl-hero-heading { font-size: 40px !important; color: #fff !important; }
    #dose-login-root .dl-hero-heading-white { color: rgba(255,255,255,0.88) !important; }

    /* Subtitle on dark */
    #dose-login-root .dl-hero-sub {
        color: rgba(255,255,255,0.65) !important;
        max-width: 100% !important; font-size: 13px !important;
    }

    /* Stat chips — dark glass */
    #dose-login-root .dl-stat-chip {
        background: rgba(0,0,0,0.28) !important;
        border-color: rgba(201,168,76,0.32) !important;
        box-shadow: none !important;
    }
    #dose-login-root .dl-stat-chip-num { color: var(--dl-gold-light) !important; }
    #dose-login-root .dl-stat-chip-label { color: rgba(255,255,255,0.48) !important; }
    #dose-login-root .dl-hero-stats { justify-content: center !important; }

    /* Feature rows on dark */
    #dose-login-root .dl-hf-row { color: rgba(255,255,255,0.8) !important; justify-content: center !important; }
    #dose-login-root .dl-hf-icon { background: rgba(201,168,76,0.14) !important; border-color: rgba(201,168,76,0.28) !important; }

    /* Steps strip on dark */
    #dose-login-root .dl-hero-steps {
        background: rgba(0,0,0,0.22) !important;
        border-color: rgba(255,255,255,0.1) !important;
        box-shadow: none !important;
        margin-left: auto !important; margin-right: auto !important;
    }
    #dose-login-root .dl-hs-item { color: rgba(255,255,255,0.6) !important; }
    #dose-login-root .dl-hs-num { background: var(--dl-crimson) !important; border-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
    #dose-login-root .dl-hs-arrow { color: rgba(255,255,255,0.2) !important; }
    #dose-login-root .dl-hero-steps { flex-wrap: wrap !important; border-radius: 14px !important; }

    /* Mobile footer — show below hero */
    #dose-login-root .dl-mobile-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 18px 24px 32px !important;
        background: rgba(0,0,0,0.35) !important;
        backdrop-filter: blur(12px) !important;
        text-align: center !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
    }
    #dose-login-root .dl-mobile-footer-school {
        font-size: 12px !important; font-weight: 700 !important;
        color: rgba(255,255,255,0.82) !important; letter-spacing: 0.4px !important;
    }
    #dose-login-root .dl-mobile-footer-detail {
        font-size: 10.5px !important; font-weight: 500 !important;
        color: rgba(255,255,255,0.42) !important; letter-spacing: 0.3px !important;
    }
}

@media (max-width: 480px) {
    #dose-login-root .dl-header { padding: 12px 14px !important; }
    #dose-login-root .dl-stage { padding-top: 62px !important; }
    #dose-login-root .dl-card { padding: 14px 12px 20px !important; }
    #dose-login-root .dl-glass-card { padding: 22px 16px !important; border-radius: 18px !important; }
    #dose-login-root .dl-hero { padding: 32px 18px 18px !important; }
    #dose-login-root .dl-hero-heading { font-size: 34px !important; }
    #dose-login-root .dl-hero-stats { gap: 7px !important; }
    #dose-login-root .dl-stat-chip { padding: 8px 14px !important; min-width: 60px !important; }
}

/* Hero heading — white so it pops over the photo */
#dose-login-root .dl-hero-heading {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}

/* "Made" stays crimson but brighter + shadow */
#dose-login-root .dl-hero-heading-white {
    /* color: var(--dl-crimson) !important; */
    color:white !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}

/* "Easy." gold shimmer stays — just add shadow */
#dose-login-root .dl-hero-heading-gold {
    text-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)) !important;
    color:white !important;
}

/* Subtitle — white */
#dose-login-root .dl-hero-sub {
    color: rgba(255, 255, 255, 0.88) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}

/* Feature rows — white text */
#dose-login-root .dl-hf-row {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
}

/* Feature icon boxes — semi-transparent white */
#dose-login-root .dl-hf-icon {
    background: rgba(255, 255, 255, 0.20) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Eyebrow pill — white glass */
#dose-login-root .dl-hero-eyebrow {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    text-shadow: none !important;
}
#dose-login-root .dl-hero-eyebrow-dot {
    background: #ffffff !important;
}

/* Steps pill — dark glass so text is readable */
#dose-login-root .dl-hero-steps {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px) !important;
}
#dose-login-root .dl-hs-item {
    color: rgba(255, 255, 255, 0.80) !important;
}
#dose-login-root .dl-hs-arrow {
    color: rgba(255, 255, 255, 0.30) !important;
}

/* Darken the overlay more on the LEFT side so text is legible */
#dose-login-root .dl-canvas::before {
    background: linear-gradient(
        118deg,
        rgba(10, 2, 2, 0.55) 0%,
        rgba(20, 5, 5, 0.45) 40%,
        rgba(46, 5, 7, 0.55) 75%,
        rgba(20, 3, 5, 0.65) 100%
    ) !important;
}
#dose-login-root .dl-glow-crimson {
    display: none !important;
}

#dose-login-root .dl-glow-cream {
    display: none !important;
}

#dose-login-root .dl-canvas::before {
    background: rgba(15, 5, 5, 0.45) !important;
}

@media (max-width: 960px) {
    #dose-login-root .dl-canvas {
        background-image: url('/Onestop/assets/img/DOSEMobileBackground.png') !important;
        background-position: center bottom !important;
    }

    #dose-login-root .dl-canvas::before {
        background: rgba(255, 248, 240, 0.15) !important;
    }
}
@media (max-width: 960px) {
    #dose-login-root .dl-hero {
        display: none !important;
    }
}

@media (max-width: 960px) {
    #dose-login-root .dl-stage {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 70px 16px 20px !important;
    }

    #dose-login-root .dl-stage-inner {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: calc(100vh - 90px) !important;
    }

    #dose-login-root .dl-card {
        max-width: 420px !important;
        width: 100% !important;
    }

    #dose-login-root .dl-glass-card {
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(161,33,36,0.12) !important;
    }

    /* Hide mobile footer since hero is gone */
    #dose-login-root .dl-mobile-footer {
        display: none !important;
    }
}

@media (max-width: 960px) {
    #dose-login-root .dl-stage {
        padding: 16px 16px 20px !important;
        align-items: flex-start !important;
    }

    #dose-login-root .dl-stage-inner {
        min-height: unset !important;
        justify-content: flex-start !important;
    }
}


@media (max-width: 960px) {
    #dose-login-root .dl-header {
        padding: 10px 16px !important;
        height: 48px !important;
    }
}
@media (max-width: 960px) {
    #dose-login-root {
        position: fixed !important;
        inset: 0 !important;
        overflow-y: auto !important;
    }

    #dose-login-root .dl-canvas,
    #dose-login-root .dl-glow-cream,
    #dose-login-root .dl-glow-crimson,
    #dose-login-root .dl-ring-deco,
    #dose-login-root .dl-ring-deco-2 {
        position: fixed !important;
    }

    #dose-login-root .dl-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important; right: 0 !important;
        padding: 10px 20px !important;
        z-index: 20 !important;
        background: rgba(255,255,255,0.15) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    #dose-login-root .dl-stage {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
        padding: 0 24px !important;
    }

    #dose-login-root .dl-stage-inner {
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
        min-height: unset !important;
    }

    #dose-login-root .dl-hero {
        display: none !important;
    }

    #dose-login-root .dl-card {
        width: 100% !important;
        max-width: 380px !important;
        padding: 0 !important;
    }

    #dose-login-root .dl-glass-card {
        border-radius: 24px !important;
        padding: 32px 24px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 24px 64px rgba(0,0,0,0.15) !important;
    }

    #dose-login-root .dl-mobile-footer,
    #dose-login-root .dl-bottom-bar {
        display: none !important;
    }
}