@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap";:root{--color-bg-deep: #071520;--color-bg-surface: #0a1e2d;--color-primary: #1282a2;--color-primary-glow: rgba(18, 130, 162, .6);--color-gold: #d4af37;--color-gold-glow: rgba(212, 175, 55, .4);--color-text-main: #e0f2fe;--color-text-muted: #94a3b8;--glass-bg: rgba(10, 30, 45, .75);--glass-border: rgba(255, 255, 255, .15);--glass-shadow: 0 15px 35px rgba(0, 0, 0, .5);--transition-smooth: all .3s cubic-bezier(.25, .8, .25, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,sans-serif;background-color:#000;color:var(--color-text-main);min-height:100vh;overflow:hidden;margin:0}#root{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.ocean-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(/clean_background.png);background-size:cover;background-position:center;transition:var(--transition-smooth);display:flex;justify-content:center;align-items:center}.app-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;width:90%;max-width:800px;margin:0 auto}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:24px;padding:10rem 3rem 3rem;width:100%;text-align:center;position:relative;overflow:hidden;transition:var(--transition-smooth)}.glass-panel:before{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:skew(-20deg);animation:shine 8s infinite}@keyframes shine{0%{left:-100%}20%{left:200%}to{left:200%}}.logo-container{display:flex;justify-content:center;align-items:center;z-index:10;margin-bottom:-130px;position:relative}.logo-img{width:500px;max-width:90vw;height:auto;object-fit:contain;filter:drop-shadow(0 15px 30px rgba(0,0,0,.8))}h1.title{font-size:4rem;font-weight:800;background:linear-gradient(135deg,var(--color-gold),#fff7d6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-transform:uppercase;letter-spacing:4px;text-shadow:0 0 20px var(--color-gold-glow)}.timer{font-size:6rem;font-weight:800;font-variant-numeric:tabular-nums;margin:2rem 0;color:var(--color-text-main);text-shadow:0 0 30px var(--color-primary-glow);letter-spacing:2px}.btn{background:#ffffff0d;border:1px solid var(--glass-border);color:var(--color-text-main);padding:1rem 2.5rem;font-size:1.25rem;font-weight:600;font-family:inherit;border-radius:9999px;cursor:pointer;transition:var(--transition-smooth);text-transform:uppercase;letter-spacing:2px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;outline:none}.btn:hover{background:#ffffff1a;transform:translateY(-2px);box-shadow:0 10px 20px #0003}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(135deg,var(--color-primary),#0d5c75);border:none;box-shadow:0 4px 15px var(--color-primary-glow)}.btn-primary:hover{background:linear-gradient(135deg,#169ac0,var(--color-primary));box-shadow:0 8px 25px var(--color-primary-glow)}.btn-gold{background:linear-gradient(135deg,var(--color-gold),#b8962a);color:#000;border:none;box-shadow:0 4px 15px var(--color-gold-glow)}.btn-gold:hover{background:linear-gradient(135deg,#ebd169,var(--color-gold));box-shadow:0 8px 25px var(--color-gold-glow)}.phase-indicator{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}.phase-dot{width:12px;height:12px;border-radius:50%;background:#fff3;transition:var(--transition-smooth)}.phase-dot.active{background:var(--color-primary);box-shadow:0 0 10px var(--color-primary);transform:scale(1.3)}.phase-dot.completed{background:var(--color-gold)}.controls{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.status-text{font-size:1.5rem;font-weight:600;color:var(--color-gold);margin-bottom:1rem;text-transform:uppercase;letter-spacing:2px;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.7}50%{opacity:1;text-shadow:0 0 15px var(--color-gold-glow)}to{opacity:.7}}.fade-enter{opacity:0;transform:translateY(10px)}.fade-enter-active{opacity:1;transform:translateY(0);transition:opacity .5s,transform .5s}.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity .5s}@media (max-width: 768px){.glass-panel{padding:7rem 1.5rem 2rem}.logo-container{margin-bottom:-90px}.timer{font-size:3.5rem;margin:1.5rem 0}.controls{flex-wrap:wrap;gap:.75rem}.btn{padding:.75rem 1.25rem;font-size:1rem;flex:1 1 auto}.phase-indicator{gap:.5rem;flex-wrap:wrap}}