/** * Hulyx Session Popup v2.0 *//* -- Overlay --------------------------------------------------- */#hsp-overlay {    position: fixed;    top: 0;    bottom: 60px;            /* au-dessus footer mobile */    left: 50%;    transform: translateX(-50%);    width: min(100vw, calc(101vh * 9 / 16));    z-index: 14;    display: flex;    align-items: center;    justify-content: center;    background: transparent;    opacity: 0;    pointer-events: none;    transition: opacity 0.3s ease;    overflow: hidden;}
/* PC : pas de footer fixe en bas */@media (min-width: 768px) {    #hsp-overlay {        bottom: 0;        top: 0;    }
}
#hsp-overlay.is-visible {    opacity: 1;    pointer-events: auto;    touch-action: none;}
body:has(#hsp-overlay.is-visible) .hulyx-video-shell video,body:has(#hsp-overlay.is-visible) .swiper-slide video,body:has(#hsp-overlay.is-visible) .hulyx-native-video {    opacity: 0.18 !important;}
/* -- Card base ------------------------------------------------- */.hsp-card {    background: rgba(15, 15, 15, 0.95);    border: 1px solid rgba(255, 255, 255, 0.08);    border-radius: 20px;    padding: 20px 32px 28px;    width: min(340px, 90vw);    display: flex;    flex-direction: column;    gap: 0;    animation: hspCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;}
@keyframes hspCardIn {    from { transform: scale(0.88) translateY(16px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
}
/* Active card � border follows current light (50% alpha via color-mix) */.hsp-card-active {    border-color: color-mix(in srgb, var(--hsp-light-color, #ff3c3c) 50%, transparent);    box-shadow: 0 0 18px var(--hsp-light-glow, rgba(255,60,60,0.06));    transition: border-color 0.5s ease, box-shadow 0.5s ease;}
.hsp-card-active.hsp-overload {    border-color: transparent;    animation: hspRainbowBorder 1.2s linear infinite;}
@keyframes hspRainbowBorder {    0%   { border-color: rgba(255,45,45,0.5);   box-shadow: 0 0 18px rgba(255,45,45,0.13); }
    20%  { border-color: rgba(255,214,0,0.5);   box-shadow: 0 0 18px rgba(255,214,0,0.13); }
    40%  { border-color: rgba(0,255,136,0.5);   box-shadow: 0 0 18px rgba(0,255,136,0.13); }
    60%  { border-color: rgba(180,77,255,0.5);  box-shadow: 0 0 18px rgba(180,77,255,0.13); }
    80%  { border-color: rgba(255,102,0,0.5);   box-shadow: 0 0 18px rgba(255,102,0,0.13); }
    100% { border-color: rgba(255,45,45,0.5);   box-shadow: 0 0 18px rgba(255,45,45,0.13); }
}
/* -- Header ---------------------------------------------------- */.hsp-header { text-align: center; }
.hsp-tag {    font-family: 'Montserrat', sans-serif;    font-size: 10px;    font-weight: 800;    letter-spacing: 0.3em;    color: rgba(255,255,255,0.3);    text-transform: uppercase;    margin-bottom: 8px;}
/* Live indicator pulsing */.hsp-tag-live {    color: #ff4444;    animation: hspPulse 1.4s ease-in-out infinite;}
@keyframes hspPulse {    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}
.hsp-title {    font-family: 'Montserrat', sans-serif;    font-size: 25px !important;    font-weight: 900;    color: #fff;    letter-spacing: 0.1em;    text-transform: uppercase;}
.hsp-sub {    font-size: 13px;    color: rgba(255,255,255,0.5);}
/* Live timer - slightly smaller to fit long durations */.hsp-title-timer {    font-size: 25px !important;    font-variant-numeric: tabular-nums;    letter-spacing: -0.02em;}
.hsp-sub {    font-family: 'Montserrat', sans-serif;    font-size: 12px;    color: rgba(255,255,255,0.4);}
/* -- Stats ----------------------------------------------------- */.hsp-stats {    display: flex;    align-items: center;    justify-content: center;    background: rgba(255,255,255,0.04);    border-radius: 12px;}
.hsp-stat { flex: 1; text-align: center; }
.hsp-stat-label {    font-family: 'Montserrat', sans-serif;    font-size: 10px;    font-weight: 600;    letter-spacing: 0.12em;    color: rgba(255,255,255,0.3);    text-transform: uppercase;    margin-bottom: 6px;}
.hsp-stat-value {    font-family: 'Montserrat', sans-serif;    font-size: 22px;    font-weight: 800;    color: #fff;    font-variant-numeric: tabular-nums;}
.hsp-stat-divider {    width: 1px;    height: 40px;    background: rgba(255,255,255,0.1);}
/* -- Actions --------------------------------------------------- */.hsp-actions {    display: flex;    gap: 10px;    margin-top: 30px;}
.hsp-btn-cancel {    flex: 1;    background: rgba(255,255,255,0.06);    border: 1px solid rgba(255,255,255,0.1);    border-radius: 10px;    padding: 12px;    font-family: 'Montserrat', sans-serif;    font-weight: 900 !important;    font-size: 13px;    color: #fff;    text-transform: uppercase;    cursor: pointer;    transition: background 0.2s;}
.hsp-btn-cancel:hover { background: rgba(255,255,255,0.1); }
.hsp-btn-start {    width: 70%;    margin: 0 auto;    padding: 10px 15px 10px 15px;    background: var(--hsp-btn-color1, #00ff88);    color: #000;    font-family: 'Montserrat', sans-serif;    font-size: 15px;    font-weight: 900;    text-transform: uppercase;    letter-spacing: 0.05em;    white-space: nowrap;    border: none;    border-radius: 50px;    cursor: pointer;    animation: hspBtnPulse 2s ease-in-out infinite;}
.hsp-btn-start:active {    transform: scale(0.98);}
@keyframes hspBtnPulse {    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}
/* Play/Resume button � color follows current light */.hsp-btn-play {    color: #000 !important;}
.hsp-btn-play {    flex: 2;    background: var(--hsp-light-color, #00ff88);    border: none;    border-radius: 10px;    padding: 12px;    font-family: 'Montserrat', sans-serif;    font-weight: 900;    font-size: 13px;    letter-spacing: 0.05em;    text-transform: uppercase;    color: #000 !important;    cursor: pointer;    transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.2s;    box-shadow: 0 0 10px var(--hsp-light-glow, rgba(0,0,0,0.2));}
.hsp-btn-play.hsp-btn-red {    background: #ff2d2d !important;    color: #000 !important;    box-shadow: 0 0 20px rgba(255,45,45,0.4) !important;}
.hsp-btn-play:hover  { filter: brightness(1.15); }
.hsp-btn-play:active { transform: scale(0.97); }
#hsp-play.hsp-overload { color: #000 !important; }
.hsp-btn-play.hsp-overload {    background: linear-gradient(90deg,#ff2d2d,#ffd600,#00ff88,#b44dff,#ff6600,#ff2d2d);    background-size: 300% 100%;    animation: hspRainbowBtn 1.2s linear infinite;    color: #000;}
@keyframes hspRainbowBtn {    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
/* -- Countdown ------------------------------------------------- */.hsp-countdown {    display: none;    align-items: center;    justify-content: center;}
.hsp-count-num {    font-family: 'Montserrat', sans-serif;    font-size: 120px;    font-weight: 900;    color: #fff;    line-height: 1;    text-align: center;    min-width: 200px;}
.hsp-count-pop {    animation: hspCountPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;}
@keyframes hspCountPop {    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
/* -- Settings button ------------------------------------------- */.hsp-settings-btn {    position: absolute;    top: 20px;    right: 12px;    background: rgba(255,255,255,0.06);    border: 1px solid rgba(255,255,255,0.1);    border-radius: 10px;    padding: 12px;    color: #fff;    cursor: pointer;    display: flex;    align-items: center;    justify-content: center;    z-index: 1;    transition: background 0.2s;}
.hsp-settings-btn svg {    width: 16px; height: 16px;    fill: currentColor;}
.hsp-settings-btn:hover { background: rgba(255,255,255,0.1); }
.hsp-settings-btn:active { opacity: 0.7; }
/* -- Options card ---------------------------------------------- */.hsp-card-options {    gap: 16px;}
.hsp-btn-back {    position: absolute;    left: 0;    top: 50%;    transform: translateY(-50%);    background: none;    border: none;    color: #fff;    font-size: 24px;    cursor: pointer;    padding: 4px 8px;    line-height: 1;}
.hsp-options-grid {    display: flex;    flex-direction: column;    gap: 12px;}
.hsp-opt-row {    display: flex;    align-items: center;    justify-content: space-between;}
.hsp-opt-label {    font-family: 'Montserrat', sans-serif;    font-size: 12px;    font-weight: 700;    color: rgba(255,255,255,0.7);    text-transform: uppercase;    letter-spacing: 0.08em;}
.hsp-opt-label small {    font-size: 10px;    color: rgba(255,255,255,0.3);    text-transform: none;    letter-spacing: 0;}
.hsp-opt-toggle {    padding: 5px 14px;    border-radius: 20px;    border: 1px solid rgba(255,255,255,0.2);    background: rgba(255,255,255,0.06);    font-family: 'Montserrat', sans-serif;    font-size: 11px;    font-weight: 800;    color: rgba(255,255,255,0.4);    cursor: pointer;    min-width: 48px;    text-align: center;}
.hsp-opt-toggle.active {    background: #fff;    color: #000;    border-color: #fff;}
/* -- Audio row ------------------------------------------------- */.hsp-audio-row {    justify-content: space-between;    gap: 8px;}
.hsp-audio-btn {    flex: 1;    display: flex;    flex-direction: column;    align-items: center;    gap: 5px;    padding: 10px 6px;    background: rgba(255,255,255,0.06);    border: 1px solid rgba(255,255,255,0.12);    border-radius: 10px;    cursor: pointer;    color: #fff;    font-family: 'Montserrat', sans-serif;    font-size: 9px;    font-weight: 700;    text-transform: uppercase;    letter-spacing: 0.08em;}
.hsp-audio-btn svg {    width: 18px; height: 18px;    fill: currentColor;}
.hsp-audio-btn.active {    background: rgba(0,234,255,0.12);    border-color: rgba(0,234,255,0.4);    color: #00eaff;}
/* -- Slider ---------------------------------------------------- */.hsp-slider-wrap {    background: rgba(255,255,255,0.04);    border-radius: 10px;    padding: 12px 14px;}
.hsp-slider-label {    display: flex;    justify-content: space-between;    margin-bottom: 8px;    font-family: 'Montserrat', sans-serif;    font-size: 10px;    font-weight: 700;    color: rgba(255,255,255,0.4);    text-transform: uppercase;    letter-spacing: 0.1em;}
.hsp-slider-label span:last-child {    color: #00eaff;}
.hsp-range {    -webkit-appearance: none;    width: 100%;    height: 3px;    border-radius: 2px;    background: rgba(255,255,255,0.15);    outline: none;    border: none;}
.hsp-range::-webkit-slider-thumb {    -webkit-appearance: none;    width: 16px; height: 16px;    border-radius: 50%;    background: #00eaff;    box-shadow: 0 0 8px rgba(0,234,255,0.6);    cursor: pointer;}
/* -- Settings button ------------------------------------------- */.hsp-settings-btn {    position: absolute;    top: 12px;    right: 12px;    background: rgba(255,255,255,0.06);    border: 1px solid rgba(255,255,255,0.1);    border-radius: 10px;    padding: 12px;    color: #fff;    cursor: pointer;    display: flex;    align-items: center;    justify-content: center;    z-index: 2;    transition: background 0.2s;}
.hsp-settings-btn:hover { background: rgba(255,255,255,0.1); }
/* -- Mode selector ---------------------------------------------- */.hsp-mode-section { text-align: center; }
.hsp-mode-title {    font-family: 'Montserrat', sans-serif;    font-size: 11px;    font-weight: 800;    text-transform: uppercase;    letter-spacing: 0.1em;    color: rgba(255,255,255,0.5);    margin-bottom: 10px;}
.hsp-mode-carousel {    margin: 15px 0;}
.hsp-mode-arrow {    position: absolute;    top: 50%;    transform: translateY(-50%);    z-index: 2;    width: 32px;    height: 32px;    border-radius: 50%;    background: rgba(0,0,0,0.5);    border: 1px solid rgba(255,255,255,0.10);    color: rgba(255,255,255,0.7);    cursor: pointer;    display: flex;    align-items: center;    justify-content: center;    transition: all 0.2s;    padding: 0;}
#hsp-mode-prev { left: 6px; }
#hsp-mode-next { right: 6px; }
.hsp-mode-arrow:hover { background: rgba(0,0,0,0.7); color: #fff; }
.hsp-mode-arrow svg { width: 14px; height: 14px; fill: currentColor; }
.hsp-mode-track {    position: relative;    overflow: hidden;    height: 150px;}
.hsp-mode-slides {    display: flex;    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);    height: 100%;}
.hsp-mode-slide {    min-width: 100%;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: 4px;    opacity: 0.4;    transform: scale(0.88);    transition: opacity 0.35s, transform 0.35s;    cursor: pointer;}
.hsp-mode-slide.is-active {    opacity: 1;    transform: scale(1);}
.hsp-mode-icon {    position: relative;    width: 108px;    height: 108px;    border-radius: 10px;    background: rgba(255,255,255,0.06);    border: 1px solid rgba(255,255,255,0.10);    display: flex;    align-items: center;    justify-content: center;    color: #fff;    transition: all 0.35s;}
.hsp-mode-slide.is-active .hsp-mode-icon {    background: rgba(0,234,255,0.12);    border-color: #00eaff80;    color: #00eaff;    box-shadow: 0 0 12px rgba(0,234,255,0.2);}
.hsp-mode-icon svg { width: 54px; height: 54px; fill: currentColor; }
.hsp-mode-play {    position: absolute;    bottom: 4px;    right: 4px;    width: 20px;    height: 20px;    border-radius: 50%;    background: rgba(0,0,0,0.6);    border: 1px solid rgba(255,255,255,0.2);    display: flex;    align-items: center;    justify-content: center;    color: rgba(255,255,255,0.7);    pointer-events: none;}
.hsp-mode-slide.is-active .hsp-mode-play {    background: rgba(0,234,255,0.2);    border-color: rgba(0,234,255,0.4);    color: #00eaff;}
.hsp-mode-name {    font-family: 'Montserrat', sans-serif;    font-size: 12px;    font-weight: 700;    text-transform: uppercase;    letter-spacing: 0.08em;    color: rgba(255,255,255,0.4);    transition: color 0.35s;}
.hsp-mode-slide.is-active .hsp-mode-name { color: #fff; }
/* -- Settings view --------------------------------------------- */.hsp-card-settings { max-height: 80vh; overflow-y: auto; }
.hsp-settings-body {    display: flex;    flex-direction: column;    gap: 10px;    margin-top: 8px;}
/* Music player */.hsp-player {    width: 100%;    font-family: 'Montserrat', sans-serif;}.hsp-player__bar {    display: flex;    align-items: center;    gap: 12px;    padding: 8px 0;}.hsp-player__album {    flex-shrink: 0;    width: 64px;    height: 64px;    border-radius: 50%;    overflow: hidden;    border: 2px solid rgba(255,255,255,0.1);    position: relative;}.hsp-player__albumImg {    width: 100%;    height: 100%;    background-size: cover;    background-position: center;    border-radius: 50%;}.is-playing .hsp-player__albumImg {    animation: hspPlayerSpin 4s linear infinite;}@keyframes hspPlayerSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }.hsp-player__controls {    display: flex;    align-items: center;    gap: 2px;}.hsp-player__prev,.hsp-player__next {    width: 36px;    height: 36px;    display: flex;    align-items: center;    justify-content: center;    background: rgba(255,255,255,0.06);    border: none;    border-radius: 8px;    cursor: pointer;    color: rgba(255,255,255,0.6);    transition: background 0.15s, color 0.15s;}.hsp-player__prev:hover,.hsp-player__next:hover {    background: rgba(255,255,255,0.12);    color: #fff;}.hsp-player__play {    width: 44px;    height: 44px;    display: flex;    align-items: center;    justify-content: center;    background: rgba(0,234,255,0.15);    border: none;    border-radius: 50%;    cursor: pointer;    color: #00eaff;    transition: background 0.15s;}.hsp-player__play:hover {    background: rgba(0,234,255,0.25);}.hsp-player-icon-pause {    display: none;}.is-playing .hsp-player-icon-play {    display: none;}.is-playing .hsp-player-icon-pause {    display: block;}.hsp-player__timeline {    padding: 4px 0 6px;}.hsp-player__info {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: 6px;}.hsp-player__title {    font-size: 12px;    font-weight: 700;    color: #fff;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;    max-width: 70%;}.hsp-player__bpm {    font-size: 10px;    font-weight: 600;    color: rgba(255,255,255,0.4);    letter-spacing: 0.05em;}.hsp-player__bar-track {    width: 100%;    height: 4px;    background: rgba(255,255,255,0.1);    border-radius: 2px;    overflow: hidden;}.hsp-player__playhead {    width: 0;    height: 100%;    background: #00eaff;    border-radius: 2px;    transition: width 0.1s linear;}/* Audio buttons row: 3 equal buttons */.hsp-settings-audio-row {    display: flex;    gap: 10px;}
/* Audio button */.hsp-audio-btn {    flex: 1;    background: rgba(255,255,255,0.08);    border: 1px solid rgba(255,255,255,0.12);    border-radius: 8px;    padding: 10px 8px;    color: rgba(255,255,255,0.6);    cursor: pointer;    display: flex;    align-items: center;    justify-content: center;    transition: all 0.2s;}
.hsp-audio-btn.is-active { background: rgba(0,234,255,0.15); border-color: #00eaff80; color: #00eaff; }
/* Slider panel */.hsp-slider-panel {    background: rgba(255,255,255,0.04);    border-radius: 8px;    padding: 12px 14px;    margin: -2px 0 6px;}
.hsp-slider-row {    display: flex;    align-items: center;    gap: 10px;}
.hsp-slider-label {    font-family: 'Montserrat', sans-serif;    font-size: 10px;    font-weight: 700;    color: rgba(255,255,255,0.4);    text-transform: uppercase;    letter-spacing: 0.1em;    min-width: 120px;}
.hsp-slider {    flex: 1;    -webkit-appearance: none;    height: 3px;    border-radius: 2px;    background: rgba(255,255,255,0.15);    outline: none;    border: none;}
.hsp-slider::-webkit-slider-thumb {    -webkit-appearance: none;    width: 14px;    height: 14px;    border-radius: 50%;    background: #00eaff;    box-shadow: 0 0 8px rgba(0,234,255,0.6);}
.hsp-slider-val {    font-family: 'Montserrat', sans-serif;    font-size: 10px;    font-weight: 800;    color: #00eaff;    min-width: 36px;    text-align: right;}
.hsp-btn-stop-active {    flex: 1 !important;    background: rgba(255,255,255,0.06) !important;    color: #fff !important;    border: 1px solid rgba(255,255,255,0.1) !important;    border-radius: 10px !important;    padding: 12px !important;    font-family: 'Montserrat', sans-serif !important;    font-weight: 900 !important;    font-size: 13px !important;    text-transform: uppercase !important;    letter-spacing: 0.05em !important;    cursor: pointer !important;    transition: background 0.2s !important;}
/* -- Login Dashboard ------------------------------------------ */.hsp-login-dash {    display: flex;    flex-direction: column;    align-items: center;    gap: 16px;    padding: 10px 0;}
.hsp-ld-status {    font-family: 'Montserrat', sans-serif;    font-size: 9px;    font-weight: 800;    letter-spacing: 0.2em;    color: #00ff88;    text-transform: uppercase;}
.hsp-ld-profile {    display: flex;    flex-direction: column;    align-items: center;    gap: 8px;}
.hsp-ld-avatar {    width: 64px;    height: 64px;    border-radius: 50%;    overflow: hidden;    border: 2px solid rgba(255,255,255,0.15);}
.hsp-ld-avatar img {    width: 100%;    height: 100%;    object-fit: cover;}
.hsp-ld-tier {    font-family: 'Montserrat', sans-serif;    font-size: 9px;    font-weight: 800;    letter-spacing: 0.15em;    color: #00eaff;    text-transform: uppercase;}
.hsp-ld-name {    font-family: 'Montserrat', sans-serif;    font-size: 16px;    font-weight: 700;    color: #fff;}
.hsp-ld-actions {    display: flex;    gap: 10px;    margin-top: 8px;}
.hsp-ld-btn {    font-family: 'Montserrat', sans-serif;    font-size: 13px;    font-weight: 900;    padding: 12px;    border-radius: 10px;    border: none;    cursor: pointer;    text-decoration: none;    text-align: center;    text-transform: uppercase;    letter-spacing: 0.05em;    transition: all 0.2s;}
.hsp-ld-btn.primary {    background: #fff;    color: #000;    margin-top: 20px;}
.hsp-ld-btn.primary:hover {    opacity: 0.9;}
.hsp-ld-btn.secondary {    background: rgba(255,255,255,0.06);    color: #fff;    border: 1px solid rgba(255,255,255,0.1);}
.hsp-ld-btn.secondary:hover {    background: rgba(255,255,255,0.1);}
/* -- Login Form ----------------------------------------------- */.hsp-login-form {    display: flex;    flex-direction: column;    gap: 12px;}
.hsp-login-form input[type="text"],.hsp-login-form input[type="email"],.hsp-login-form input[type="password"] {    width: 100%;    padding: 12px 14px;    background: rgba(255,255,255,0.06);    border: 1px solid #dddddd00 !important;    border-radius: 8px;    color: #fff;    font-family: 'Montserrat', sans-serif;    font-size: 13px;    outline: none;    transition: border-color 0.2s;    box-sizing: border-box;    margin-bottom: 0px;    margin-top: 10px;    height: 45px;}
.hsp-login-form input:focus {    border-color: #00eaff;}
.hsp-login-form input::placeholder {    color: rgba(255,255,255,0.3);}
.hsp-login-title {    font-family: 'Montserrat', sans-serif;    font-weight: 900;    color: #fff;    text-transform: uppercase;    letter-spacing: 0.05em;}
.hsp-login-title-big {    font-size: 20px;    text-align: center;    margin-bottom: 4px;}
.hsp-login-msg {    font-family: 'Montserrat', sans-serif;    font-size: 11px;    font-weight: 600;    text-align: center;    min-height: 16px;}
.hsp-login-msg.ok {    color: #00ff88;}
.hsp-login-msg.err {    color: #ff3b30;}
.hsp-access-btn {    width: 100%;    margin-top: 4px;}
.hsp-login-social {    display: flex;    flex-direction: column;    gap: 8px;}
.hsp-btn-social {    display: flex;    align-items: center;    justify-content: center;    gap: 8px;    padding: 10px 14px;    border-radius: 8px;    font-family: 'Montserrat', sans-serif;    font-size: 12px;    font-weight: 700;    text-decoration: none;    color: #fff;    transition: all 0.2s;}
.hsp-btn-social:hover {    opacity: 0.85;}
.hsp-btn-social svg {    flex-shrink: 0;}
.hsp-login-divider {    display: flex;    align-items: center;    gap: 12px;    margin: 4px 0;}
.hsp-login-divider::before,.hsp-login-divider::after {    content: '';    flex: 1;    height: 1px;    background: rgba(255,255,255,0.1);}
.hsp-login-divider span {    font-family: 'Montserrat', sans-serif;    font-size: 9px;    font-weight: 700;    letter-spacing: 0.1em;    color: rgba(255,255,255,0.35);    text-transform: uppercase;    white-space: nowrap;}
.hsp-login-switch {    font-family: 'Montserrat', sans-serif;    font-size: 13px;    font-weight: 900;    color: rgba(255,255,255,0.6);    text-align: center;    cursor: pointer;    padding: 12px;    border-radius: 10px;    background: rgba(255,255,255,0.06);    border: 1px solid rgba(255,255,255,0.1);    text-transform: uppercase;    letter-spacing: 0.05em;    transition: all 0.2s;}
.hsp-login-switch:hover {    background: rgba(255,255,255,0.1);    color: #fff;}
.hsp-card-login {    max-height: 80vh;    overflow-y: auto;}
/* -- Card Logo & Top Buttons ----------------------------------- */.hsp-card-logo-link {    display: block;    text-align: center;    margin-bottom: 0;    z-index: 2;}
.hsp-card-logo {    height: 90px;    opacity: 1;    transition: opacity 0.2s;    vertical-align: middle;}
.hsp-card-logo:hover {    opacity: 1;}
.hsp-login-top-btn {    position: absolute;    top: 20px;    left: 14px;    background: rgba(255,255,255,0.06);    border: 1px solid rgba(255,255,255,0.1);    border-radius: 10px;    padding: 12px;    color: #fff;    cursor: pointer;    display: flex;    align-items: center;    justify-content: center;    z-index: 2;    transition: background 0.2s;}
.hsp-login-top-btn:hover {    background: rgba(255,255,255,0.1);}
.hsp-login-back-btn {    position: absolute;    top: 20px;    right: 14px;    background: rgba(255,255,255,0.06);    border: 1px solid rgba(255,255,255,0.1);    border-radius: 10px;    padding: 12px;    color: #fff;    cursor: pointer;    display: flex;    align-items: center;    justify-content: center;    z-index: 2;    transition: background 0.2s;}
.hsp-login-back-btn:hover {    background: rgba(255,255,255,0.1);}
/* -- Duration Panel -------------------------------------------- */.hsp-dur-panel {    margin: 15px 0 0;}
.hsp-dur-head {    font-family: 'Montserrat', sans-serif;    font-size: 9px;    font-weight: 800;    letter-spacing: 0.15em;    color: rgba(255,255,255,0.4);    text-transform: uppercase;    margin-bottom: 4px;}
/* -- Custom Thermostat-Style Slider --------------------------- */.hsp-dur-slider-wrap {    position: relative;    width: 100%;    height: 56px;    margin: 0;}
.hsp-dur-track {    position: absolute;    top: 50%;    left: 0;    right: 0;    height: 20px;    transform: translateY(-50%);    border-radius: 999px;    background: rgba(255,255,255,0.08);    border: 1px solid rgba(255,255,255,0.1);    overflow: visible;    border: 1px solid rgba(255,255,255,0.1);}
.hsp-dur-mercury {    position: absolute;    left: 0;    top: 0;    height: 100%;    width: 0%;    background: var(--hsp-dur-color, #00ff88);    transition: width 0.12s linear, background 0.25s ease;    opacity: 0.95;    border-radius: inherit;}
.hsp-dur-mercury::before,.hsp-dur-mercury::after {    content: "";    position: absolute;    inset: 0;    border-radius: inherit;    filter: blur(6px);    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3), transparent 90%);    mix-blend-mode: color-dodge;    opacity: 0.2;    animation: hspPulseElectric 3s infinite ease-in-out alternate;}
.hsp-dur-mercury::after {    filter: blur(16px);    opacity: 0.12;    animation-delay: 1.5s;}
@keyframes hspPulseElectric {    0% { opacity: 0.15; transform: scaleY(1); }
    100% { opacity: 0.35; transform: scaleY(1.05); }
}
/* Step markers */.hsp-dur-steps {    position: absolute;    top: 50%;    left: 14px;    right: 14px;    transform: translateY(-50%);    display: flex;    justify-content: space-between;    pointer-events: none;    z-index: 2;}
.hsp-dur-step {    width: 4px;    height: 4px;    border-radius: 50%;    background: rgba(255,255,255,0.2);    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;}
.hsp-dur-step.active {    background: var(--hsp-dur-color, #00ff88);    transform: scale(1.4);}
/* Knob */.hsp-dur-knob {    position: absolute;    top: 50%;    left: 14px;    transform: translate(-50%, -50%);    width: 40px;    height: 40px;    border-radius: 999px;    background: rgba(10,10,10,0.65);    backdrop-filter: blur(16px) saturate(280%) brightness(1.3);    -webkit-backdrop-filter: blur(16px) saturate(280%) brightness(1.3);    border: 1px solid rgba(255,255,255,0.18);    cursor: grab;    z-index: 3;    transition: transform 0.15s ease;}
.hsp-dur-knob:active {    cursor: grabbing;    transform: translate(-50%, -50%) scale(1.08);}
.hsp-dur-knob-dot {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    width: 10px;    height: 10px;    border-radius: 50%;    background: var(--hsp-dur-color, #00ff88);    transition: background 0.25s;}
/* Ticks */.hsp-dur-ticks {    display: flex;    justify-content: space-between;    padding: 0 14px;    margin-top: -2px;}
.hsp-dur-tick {    font-family: 'Montserrat', sans-serif;    font-size: 11px;    font-weight: 700;    color: rgba(255,255,255,0.3);    cursor: pointer;    transition: color 0.2s;    user-select: none;}
.hsp-dur-tick.active {    color: var(--hsp-dur-color, #00ff88);}
.hsp-dur-tick-max {    font-weight: 800;}
/* Tier label */.hsp-dur-tier {    font-family: 'Montserrat', sans-serif;    font-size: 20px;    font-weight: 900;    color: var(--hsp-dur-color, #00ff88);    text-align: center;    margin-top: 15px;    letter-spacing: 0.05em;    transition: color 0.3s;}
/* -- Stats ----------------------------------------------------- */.hsp-stats-best {    display: flex;    justify-content: center;    gap: 20px;    max-height: 0;    opacity: 0;    overflow: hidden;    margin: 0;    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin 0.35s ease;}
.hsp-stats-best.is-visible {    max-height: 80px;    opacity: 1;    margin: 8px 0;    padding: 16px 0;}
.hsp-stat {    text-align: center;}
.hsp-stat-label {    font-family: 'Montserrat', sans-serif;    font-size: 9px;    font-weight: 700;    letter-spacing: 0.1em;    color: rgba(255,255,255,0.35);    text-transform: uppercase;    margin-bottom: 4px;}
.hsp-stat-value {    font-family: 'Montserrat', sans-serif;    font-size: 16px;    font-weight: 900;    color: #fff;}
/* -- Card Active (Session Running) ----------------------------- */.hsp-card-active {    position: relative;}
.hsp-card-active .hsp-header {    padding-top: 10px;}
.hsp-tag-live {    color: #ff3b30;}
.hsp-title-timer {    font-family: 'Montserrat', sans-serif;    font-size: 28px;    font-weight: 900;    color: #fff;    letter-spacing: -0.02em;}
.hsp-btn-cancel {    padding: 12px;    background: rgba(255,255,255,0.06);    color: #fff;    font-family: 'Montserrat', sans-serif;    font-size: 13px;    font-weight: 900;    text-transform: uppercase;    letter-spacing: 0.05em;    border: 1px solid rgba(255,255,255,0.1);    border-radius: 10px;    cursor: pointer;    transition: all 0.2s;}
.hsp-btn-cancel:hover {    background: rgba(255,255,255,0.1);}
.hsp-btn-play {    padding: 12px;    background: rgba(255,255,255,0.06);    color: #fff;    font-family: 'Montserrat', sans-serif;    font-size: 13px;    font-weight: 900;    text-transform: uppercase;    letter-spacing: 0.05em;    border: 1px solid rgba(255,255,255,0.1);    border-radius: 10px;    cursor: pointer;    transition: all 0.2s;}
.hsp-btn-red {    background: rgba(255,59,48,0.15);    color: #ff3b30;    border-color: rgba(255,59,48,0.3);}
.hsp-btn-red:hover {    background: rgba(255,59,48,0.25);}
/* -- Countdown ------------------------------------------------- */.hsp-countdown {    position: fixed;    inset: 0;    display: flex;    align-items: center;    justify-content: center;    z-index: 100;    pointer-events: none;}
.hsp-count-num {    font-family: 'Montserrat', sans-serif;    font-size: 120px;    font-weight: 900;    color: #fff;    text-shadow: 0 0 40px rgba(0,234,255,0.5);    animation: hsp-count-pulse 1s ease-in-out;}
@keyframes hsp-count-pulse {    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.hsp-count-pop {    animation: hsp-count-pop 0.3s ease;}
@keyframes hsp-count-pop {    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
/* -- Social Button Variants ------------------------------------ */.hsp-btn-social-text {    justify-content: flex-start;}
.hsp-btn-social-logo {    padding: 10px;}
.hsp-login-social-logo-only {    flex-direction: row;    flex-wrap: wrap;    justify-content: center;}
/* -- Upgrade Box ----------------------------------------------- */.h-upgrade-box {    background: rgba(255,255,255,0.04);    border: 1px solid rgba(255,255,255,0.08);    border-radius: 10px;    padding: 14px;    margin-top: 8px;}
.h-up-title {    font-family: 'Montserrat', sans-serif;    font-size: 10px;    font-weight: 800;    letter-spacing: 0.1em;    color: rgba(255,255,255,0.5);    text-transform: uppercase;    margin-bottom: 8px;}
.h-up-limits {    font-family: 'Montserrat', sans-serif;    font-size: 11px;    color: rgba(255,255,255,0.4);    line-height: 1.6;}
.h-btn-premium {    display: inline-block;    margin-top: 10px;    padding: 8px 16px;    background: #f4c025;    color: #000;    font-family: 'Montserrat', sans-serif;    font-size: 10px;    font-weight: 800;    text-transform: uppercase;    letter-spacing: 0.05em;    border-radius: 6px;    text-decoration: none;    transition: all 0.2s;}
.h-btn-premium:hover {    background: #e0ad1a;}