:root{--turq1:#6fe3e8;--turq2:#0fa6ad;--text-dark:#3a4444;--muted:#7f8b8b}*{box-sizing:border-box}html,body{height:100%;margin:0;font-family: 'Segoe UI', Roboto, Arial, sans-serif;background:linear-gradient(180deg,var(--turq1),var(--turq2));-webkit-font-smoothing:antialiased;color:var(--text-dark)}.texture{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);background-size:6px 6px;opacity:0.18}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px}.splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:9999;background:linear-gradient(135deg, rgba(15,166,173,0.98), rgba(111,227,232,0.95));backdrop-filter:blur(2px)}.logo-svg{width:220px;max-width:70vw;filter:drop-shadow(0 8px 20px rgba(0,0,0,0.18));transition:transform .25s ease}.splash h1{color:#fff;margin:0;font-size:18px;text-align:center;font-weight:700;letter-spacing:0.2px}.main-card{width:100%;max-width:720px;margin-top:18vh;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));border-radius:16px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,0.12)}.title h2{margin:0;color:var(--text-dark);font-size:18px;text-align:center}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}@media(max-width:720px){.controls{grid-template-columns:1fr}}.label{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}input[type=number], input[type=range], select{width:100%;padding:10px;border-radius:10px;border:none;background:rgba(255,255,255,0.95);font-size:15px}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.result{background:rgba(255,255,255,0.96);padding:12px;border-radius:10px;text-align:center}.water-result{margin-top:12px;padding:12px;border-radius:10px;background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(250,250,250,0.95));box-shadow:0 8px 20px rgba(0,0,0,0.06);opacity:0;transform:translateY(6px);transition:all .9s}.water-result.show{opacity:1;transform:translateY(0)}.row{display:flex;justify-content:flex-end;margin-top:10px}.btn{padding:10px 12px;border-radius:10px;border:none;background:rgba(255,255,255,0.95);font-weight:700}.signature{text-align:center;color:rgba(58,68,68,0.9);font-size:13px;margin-top:12px}.install-note{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:linear-gradient(180deg,var(--turq1),var(--turq2));color:#fff;padding:8px 12px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,0.18);display:none}.install-note.show{display:block;animation:fadeIn .6s}@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.install-banner{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);min-width:280px;padding:14px;border-radius:18px;background:linear-gradient(180deg,var(--turq1),var(--turq2));box-shadow:0 12px 30px rgba(0,0,0,0.25);z-index:2000;display:none;color:#fff}.install-banner.show{display:flex}.install-actions{display:flex;gap:8px;margin-top:8px}.install-actions .primary{background:#fff;color:var(--turq2);padding:8px 12px;border-radius:10px;border:none;font-weight:700}.install-actions .secondary{background:transparent;color:#fff;border:none}.fade-in{animation:fadeinMain .9s ease both}@keyframes fadeinMain{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}