:root{--bg-dark: #000A12;--bg-card: #1A2630;--bg-input: #223340;--text-primary: #F3F6F9;--text-secondary: #9BAAB7;--accent-primary: #5b9bd5;--accent-glow: #4a8bc4;--accent-secondary: #7ec8e3;--border-color: #2E3E4A;--shadow-glow: rgba(91, 155, 213, .25)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden}body{font-family:"Exo 2",-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-dark);color:var(--text-primary);position:relative;touch-action:pan-y;overscroll-behavior:none}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 20% 30%,rgba(91,124,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(247,37,133,.06) 0%,transparent 50%);pointer-events:none;z-index:0}.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle 3s infinite}@keyframes twinkle{0%,to{opacity:.3}50%{opacity:1}}#root{position:relative;z-index:2;height:100%}.app{height:100%;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.header{text-align:center;margin-bottom:1.5rem;flex-shrink:0}.title{font-size:clamp(1.3rem,5vw,2.2rem);font-weight:700;background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.25rem;letter-spacing:1px;text-transform:uppercase}.subtitle{font-size:.8rem;color:var(--text-secondary);font-weight:300;letter-spacing:2px}.calculator-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;max-width:480px;width:100%;box-shadow:0 10px 40px #0006,0 0 30px var(--shadow-glow);position:relative;overflow:hidden;flex-shrink:0;animation:slideUp .4s ease-out .1s backwards}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.calculator-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary))}.form-group{margin-bottom:1rem}.label{display:block;margin-bottom:.35rem;font-weight:600;color:var(--text-primary);font-size:.85rem;letter-spacing:.5px}.input,.select{width:100%;padding:.7rem .85rem;background:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:16px;font-family:inherit;transition:border-color .2s ease;outline:none}.input:focus,.select:focus{border-color:var(--accent-primary);box-shadow:0 0 12px #5b7cff26;transition:border-color .2s ease,box-shadow .2s ease}.select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235b9bd5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.5rem}.result-section{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border-color);text-align:center;animation:slideUp .4s ease-out .2s backwards}.result-label{font-size:.8rem;color:var(--text-secondary);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600}.result-value{font-size:clamp(2.5rem,10vw,3.5rem);font-weight:700;background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.25rem;line-height:1.1}.result-unit{font-size:1rem;color:var(--text-secondary);font-weight:300}.instructions{background:var(--bg-input);border-left:3px solid var(--accent-primary);border-radius:8px;padding:1rem 1.25rem;margin-top:1.25rem}.instructions-title{font-weight:700;margin-bottom:.5rem;font-size:.95rem;display:flex;align-items:center;gap:.5rem}.instructions ol{padding-left:1.25rem;color:var(--text-secondary);line-height:1.6;font-size:.85rem}.instructions li{margin-bottom:.25rem}.footer{margin-top:1.5rem;padding-bottom:1rem;text-align:center;color:var(--text-secondary);font-size:.75rem;opacity:.7;flex-shrink:0}.footer-link{color:var(--accent-primary);text-decoration:none}.footer-link:hover{text-decoration:underline}.install-btn{position:fixed;bottom:1.25rem;right:1.25rem;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-card);color:var(--accent-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;box-shadow:0 4px 16px #0000004d;transition:border-color .2s ease}.install-btn:hover{border-color:var(--accent-primary)}.modal-overlay{position:fixed;inset:0;background:#000a12d9;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;animation:fadeIn .2s ease-out}.modal{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:1.75rem;max-width:360px;width:100%;position:relative;animation:slideUp .3s ease-out}.modal-close{position:absolute;top:.75rem;right:1rem;background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;line-height:1;padding:0}.modal-close:hover{color:var(--text-primary)}.modal-title{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin-bottom:1.25rem}.install-steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:1rem}.install-step{display:flex;align-items:center;gap:.75rem;color:var(--text-secondary);font-size:.9rem;line-height:1.4}.install-step-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;background:var(--bg-input);display:flex;align-items:center;justify-content:center;color:var(--accent-primary)}
