@import url(https://fonts.googleapis.com/css?family=Roboto:100,300);

[x-cloak] {
display:none!important;
}

body {
font-family:Inter, sans-serif;
background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
min-height:100vh;
padding-bottom:80px;
}

.glass-card {
background:rgba(255,255,255,0.95);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.2);
box-shadow:0 8px 32px 0 rgba(31,38,135,0.15);
}

.chart-container {
position:relative;
width:100%;
max-width:700px;
height:280px;
margin:auto;
}

#lock-screen {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
color:#fff;
z-index:9999;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.promo-card {
transition:all .3s cubic-bezier(0.4,0,0.2,1);
}

.promo-card:hover {
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

.highlight-shared-challenge {
box-shadow:0 0 20px 8px rgba(139,92,246,0.6);
transform:translateY(-4px);
}

.nav-btn,.nav-btn-mobile {
transition:all .2s ease;
}

.nav-btn.active {
background-image:linear-gradient(to right,#9333ea,#2563eb);
color:#FFF;
box-shadow:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.nav-btn-mobile.active {
color:#9333ea;
}

.progress-bar {
transition:width .5s ease;
}

.promo-details {
transition:all .3s ease-in-out;
max-height:0;
overflow:hidden;
opacity:0;
}

.group-progress-details {
transition:max-height .3s ease-in-out, opacity .3s ease-in-out, margin-top .3s ease-in-out;
max-height:0;
overflow:hidden;
opacity:0;
}

.prize-badge {
max-height:120px;
width:auto;
display:block;
}

#header-logo {
height:60px;
}

.e-c-base {
fill:none;
stroke:#374151;
stroke-width:4px;
}

.e-c-progress {
fill:none;
stroke:#8b5cf6;
stroke-width:4px;
transition:stroke-dashoffset .5s linear;
}

.e-c-pointer {
fill:#FFF;
stroke:#8b5cf6;
stroke-width:2px;
}

#e-pointer {
transition:transform .5s linear;
}

#lock-goal {
font-family:Roboto, sans-serif;
font-weight:100;
font-size:3.2rem;
line-height:1;
}

.lock-pause-btn {
outline:none;
background:transparent;
border:none;
margin-top:.5rem;
width:60px;
height:60px;
position:relative;
cursor:pointer;
opacity:0.8;
transition:opacity .2s;
}

.lock-pause-btn:hover {
opacity:1;
}

.modal-enter-active {
transition:opacity .2s ease-out, transform .2s ease-out;
}

.modal-leave-active {
transition:opacity .2s ease-in, transform .2s ease-in;
}

.notification-overlay {
position:fixed;
inset:0;
background-color:rgba(0,0,0,0.6);
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
padding:1rem;
}

.notification-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.notification-content {
background:rgba(255,255,255,0.98);
backdrop-filter:blur(10px);
border-radius:1rem;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
width:100%;
max-width:440px;
text-align:center;
color:#1f2937;
padding:2rem;
}

.notification-btn {
font-weight:600;
font-size:1rem;
border-radius:.75rem;
border:none;
cursor:pointer;
transition:all .2s ease;
padding:.75rem 1.5rem;
}

.notification-btn-primary {
background-image:linear-gradient(to right,#667eea,#764ba2);
color:#FFF;
}

.notification-btn-secondary {
background-color:#e5e7eb;
color:#374151;
}

.promo-details.expanded,.group-progress-details.expanded {
max-height:500px;
opacity:1;
margin-top:1rem;
}

.modal-enter,.modal-leave {
opacity:0;
transform:scale(0.9);
}


@media (min-width:768px){
.chart-container {
height:320px;
}

body {
padding-bottom:0;
}
}

/* Heartbeat Animation */
.heartbeat-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    width: 60px;
}

.heartbeat-dot {
    width: 8px;
    height: 8px;
    background-color: #34d399; /* Emerald-400 */
    border-radius: 50%;
    box-shadow: 0 0 10px #34d399;
    animation: pulse-calm var(--beat-speed, 1s) infinite ease-in-out;
}

.heartbeat-line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(52, 211, 153, 0.2);
    z-index: -1;
}

@keyframes pulse-calm {
    0% { transform: scale(0.9); opacity: 0.3; }
    10% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 15px #34d399; }
    20% { transform: scale(1); opacity: 0.6; }
    40% { transform: scale(0.9); opacity: 0.3; box-shadow: 0 0 5px #34d399; }
    100% { transform: scale(0.9); opacity: 0.3; }
}