@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap";:root{--ocean-blue-hue: 215;--ocean-blue: hsl(var(--ocean-blue-hue), 100%, 55%);--ocean-blue-glow: hsla(var(--ocean-blue-hue), 100%, 55%, .35);--aqua-teal-hue: 175;--aqua-teal: hsl(var(--aqua-teal-hue), 100%, 45%);--aqua-teal-glow: hsla(var(--aqua-teal-hue), 100%, 45%, .3);--purple-accent-hue: 265;--purple-accent: hsl(var(--purple-accent-hue), 100%, 65%);--purple-accent-glow: hsla(var(--purple-accent-hue), 100%, 65%, .3);--deep-navy: #090d16;--bg-primary: #f1f5f9;--bg-secondary: #ffffff;--bg-gradient: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 30%, #e0e7ff 65%, #fae8ff 100%);--text-primary: #0f172a;--text-secondary: #475569;--glass-bg: rgba(255, 255, 255, .68);--glass-bg-hover: rgba(255, 255, 255, .88);--glass-border: rgba(15, 23, 42, .12);--glass-border-hover: rgba(15, 23, 42, .22);--glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, .06);--glass-glow: 0 0 16px 0 rgba(0, 102, 255, .05);--card-bg: rgba(255, 255, 255, .5);--empty-track: rgba(15, 23, 42, .08);--timeline-line: rgba(15, 23, 42, .08);--timeline-bullet-pending: rgba(15, 23, 42, .08);--water-btn-bg: linear-gradient(135deg, rgba(0, 102, 255, .15) 0%, rgba(0, 242, 254, .3) 100%);--water-btn-border: rgba(0, 102, 255, .4);--water-btn-text: #004ecc;--status-excellent: #047857;--status-good: #1d4ed8;--status-moderate: #b45309;--status-poor: #b91c1c;--font-display: "Outfit", "Inter", sans-serif;--font-body: "Inter", sans-serif}[data-theme=dark]{--bg-primary: #0a0b16;--bg-secondary: #0c0e20;--bg-gradient: linear-gradient(135deg, #0f1233 0%, #29114d 25%, #471254 50%, #07384b 75%, #03201f 100%);--text-primary: #f8fafc;--text-secondary: #94a3b8;--glass-bg: rgba(15, 12, 30, .45);--glass-bg-hover: rgba(22, 18, 42, .6);--glass-border: rgba(255, 255, 255, .14);--glass-border-hover: rgba(255, 255, 255, .25);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .45);--glass-glow: 0 0 24px 0 rgba(0, 242, 254, .12);--card-bg: rgba(18, 20, 44, .45);--empty-track: rgba(255, 255, 255, .12);--timeline-line: rgba(255, 255, 255, .08);--timeline-bullet-pending: rgba(255, 255, 255, .06);--water-btn-bg: linear-gradient(135deg, rgba(0, 102, 255, .12) 0%, rgba(0, 242, 254, .25) 100%);--water-btn-border: rgba(0, 242, 254, .5);--water-btn-text: #ffffff;--status-excellent: #10b981;--status-good: #3b82f6;--status-moderate: #f59e0b;--status-poor: #ef4444}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--bg-primary);color:var(--text-primary);overflow:hidden;-webkit-user-select:none;user-select:none}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:20px;transition:all .3s cubic-bezier(.25,.8,.25,1)}.glass-panel:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover)}.glass-card{background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px;transition:all .25s ease}.glass-card:hover{border-color:var(--glass-border-hover);transform:translateY(-2px)}.liquid-glass{background:linear-gradient(135deg,#fff3,#ffffff0d);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,.25);box-shadow:inset 0 2px 4px #ffffff26,var(--glass-shadow)}.custom-scroll::-webkit-scrollbar{width:5px;height:5px}.custom-scroll::-webkit-scrollbar-track{background:transparent}.custom-scroll::-webkit-scrollbar-thumb{background:var(--glass-border-hover);border-radius:10px}@keyframes ripple{0%{transform:scale(0);opacity:.8}to{transform:scale(4);opacity:0}}.ripple-effect{position:absolute;border-radius:50%;background:radial-gradient(circle,#00f2fe99,#7c3aed00 70%);animation:ripple 1.6s cubic-bezier(.1,.8,.3,1) infinite;pointer-events:none}@keyframes fall{0%{transform:translateY(-50px) scale(.6);opacity:0}30%{opacity:1}80%{transform:translateY(220px) scale(1);opacity:1}to{transform:translateY(240px) scale(1.4);opacity:0}}.droplet-fall{width:18px;height:18px;background:linear-gradient(180deg,var(--aqua-teal) 0%,var(--purple-accent) 100%);border-radius:0 50% 50%;transform:rotate(45deg);box-shadow:0 0 12px var(--purple-accent-glow);animation:fall 1.5s cubic-bezier(.6,.04,.98,.335) forwards}@keyframes float-liquid{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(2deg)}}.liquid-float{animation:float-liquid 3s ease-in-out infinite}@keyframes scan{0%{top:0%;opacity:.1}50%{opacity:.8}to{top:100%;opacity:.1}}.scan-shimmer{position:absolute;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--aqua-teal),#ffffff,var(--purple-accent),transparent);box-shadow:0 0 15px var(--aqua-teal);animation:scan 2.5s ease-in-out infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 12px var(--ocean-blue-glow)}50%{box-shadow:0 0 24px #7c3aed99}}.pulse-glow{animation:glow-pulse 2s infinite ease-in-out}.fade-in{animation:fadeIn .4s cubic-bezier(.16,1,.3,1) forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes particle-float{0%{transform:translateY(0) scale(1) rotate(0);opacity:.8}to{transform:translateY(-80px) scale(.4) rotate(360deg);opacity:0}}.particle{position:absolute;background:radial-gradient(circle,#ffffffe6,#7c3aed66 70%);border-radius:50%;pointer-events:none;animation:particle-float 2.5s ease-out forwards}.status-badge{padding:4px 10px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;gap:4px}.status-badge.excellent{background:#05966926;color:var(--status-excellent);border:1px solid rgba(5,150,105,.25)}.status-badge.good{background:#2563eb26;color:var(--status-good);border:1px solid rgba(37,99,235,.25)}.status-badge.moderate{background:#d9770626;color:var(--status-moderate);border:1px solid rgba(217,119,6,.25)}.status-badge.poor{background:#dc262626;color:var(--status-poor);border:1px solid rgba(220,38,38,.25)}.bg-blob-1{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--purple-accent-glow) 0%,transparent 75%);filter:blur(45px);pointer-events:none}.bg-blob-2{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--aqua-teal-glow) 0%,transparent 75%);filter:blur(50px);pointer-events:none}.bg-blob-3{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(244,63,94,.22) 0%,transparent 75%);filter:blur(45px);pointer-events:none}@keyframes water-pulse{0%,to{box-shadow:0 0 10px #00f2fe40,inset 0 0 4px #00f2fe26;border-color:#00f2fe59;transform:translateY(0) scale(1)}50%{box-shadow:0 0 22px #00f2feb3,inset 0 0 12px #00f2fe66;border-color:#00f2fef2;transform:translateY(-2px) scale(1.04)}}.water-glow-btn{animation:water-pulse 2s infinite ease-in-out;background:var(--water-btn-bg)!important;border:1px solid var(--water-btn-border)!important;color:var(--water-btn-text)!important}@keyframes ripple-ring{0%{transform:translate(-50%,-50%) scale(.8);opacity:.95}to{transform:translate(-50%,-50%) scale(1.6);opacity:0}}.ripple-ring-active{position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:12px;border:2px solid rgba(0,242,254,.8);pointer-events:none;animation:ripple-ring 2.2s infinite cubic-bezier(.1,.8,.3,1);z-index:0}@keyframes water-drip-center{0%{transform:translate(0) scale(0) rotate(45deg);opacity:0}30%{transform:translate(0) scale(1) rotate(45deg);opacity:.95}50%{transform:translateY(4px) scale(.95) rotate(45deg);opacity:1}75%{transform:translateY(22px) scale(.7) rotate(45deg);opacity:.5}to{transform:translateY(30px) scale(.4) rotate(45deg);opacity:0}}@keyframes water-drip-left{0%{transform:translate(0) scale(0) rotate(25deg);opacity:0}30%{transform:translate(0) scale(1) rotate(25deg);opacity:.95}50%{transform:translate(-3px,3px) scale(.95) rotate(15deg);opacity:1}75%{transform:translate(-14px,18px) scale(.7) rotate(-5deg);opacity:.5}to{transform:translate(-20px,24px) scale(.4) rotate(-15deg);opacity:0}}@keyframes water-drip-right{0%{transform:translate(0) scale(0) rotate(65deg);opacity:0}30%{transform:translate(0) scale(1) rotate(65deg);opacity:.95}50%{transform:translate(3px,3px) scale(.95) rotate(75deg);opacity:1}75%{transform:translate(14px,18px) scale(.7) rotate(95deg);opacity:.5}to{transform:translate(20px,24px) scale(.4) rotate(105deg);opacity:0}}.dripping-drop-center{position:absolute;left:50%;top:72%;margin-left:-3px;width:6px;height:8px;background:var(--aqua-teal);border-radius:0 50% 50%;animation:water-drip-center 2s infinite cubic-bezier(.6,.04,.98,.335);pointer-events:none;z-index:10;box-shadow:0 2px 4px #00f2fe66}.dripping-drop-left{position:absolute;left:28%;top:52%;margin-left:-3px;width:6px;height:8px;background:var(--aqua-teal);border-radius:0 50% 50%;animation:water-drip-left 2s infinite cubic-bezier(.6,.04,.98,.335);pointer-events:none;z-index:10;box-shadow:-2px 2px 4px #00f2fe66}.dripping-drop-right{position:absolute;left:72%;top:52%;margin-left:-3px;width:6px;height:8px;background:var(--aqua-teal);border-radius:0 50% 50%;animation:water-drip-right 2s infinite cubic-bezier(.6,.04,.98,.335);pointer-events:none;z-index:10;box-shadow:2px 2px 4px #00f2fe66}[data-easymode=true]{font-size:17px}[data-easymode=true] h1{font-size:1.6rem!important}[data-easymode=true] h2{font-size:1.45rem!important}[data-easymode=true] h3{font-size:1.35rem!important}[data-easymode=true] h4{font-size:1.15rem!important}[data-easymode=true] h5{font-size:1rem!important}[data-easymode=true] p,[data-easymode=true] span,[data-easymode=true] label,[data-easymode=true] input,[data-easymode=true] textarea,[data-easymode=true] button{font-size:.88rem!important}[data-easymode=true] .status-badge{font-size:.78rem!important;padding:6px 12px!important}[data-easymode=true] button:not(.segmented-control-btn){min-height:46px!important;padding:10px 16px!important}[data-easymode=true] input,[data-easymode=true] textarea,[data-easymode=true] select{font-size:.88rem!important;padding:12px!important;border-width:1.5px!important}[data-easymode=true] .segmented-control-btn{font-size:.72rem!important;padding:10px 2px!important}
