@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:#0f0f0f;color:#fff;min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.header{background:#1a1a1a;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2a2a2a}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,#10b981,#059669);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.logo-text h1{font-size:1.25rem;font-weight:700}.logo-text span{font-size:.75rem;color:#888}.header-badge{background:#222;padding:.5rem 1rem;border-radius:20px;font-size:.8rem;color:#10b981}.main-container{display:flex;flex:1;overflow:hidden}.sidebar{width:300px;background:#1a1a1a;padding:1.5rem;overflow-y:auto;border-right:1px solid #2a2a2a;flex-shrink:0}.sidebar-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #2a2a2a}.sidebar-header-icon{width:32px;height:32px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:8px;display:flex;align-items:center;justify-content:center}.sidebar-header h2{font-size:.9rem;font-weight:600}.config-card{background:#222;border-radius:12px;padding:1rem;margin-bottom:1rem}.config-card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.config-number{width:24px;height:24px;background:#10b981;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#000}.config-card-header h3{font-size:.85rem;font-weight:600}.config-card p{font-size:.75rem;color:#888;margin-bottom:.75rem}.option-group{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:#1a1a1a;border-radius:8px;cursor:pointer;border:1px solid transparent}.option-item:hover{background:#252525}.option-item.selected{background:#10b9811a;border-color:#10b981}.option-item input{display:none}.radio-custom{width:16px;height:16px;border:2px solid #555;border-radius:50%;display:flex;align-items:center;justify-content:center}.option-item.selected .radio-custom{border-color:#10b981}.option-item.selected .radio-custom:after{content:"";width:8px;height:8px;background:#10b981;border-radius:50%}.option-item span{font-size:.8rem;color:#ccc}.option-item.selected span{color:#fff}.select-wrapper{position:relative}.select-wrapper select{width:100%;padding:.75rem;background:#1a1a1a;border:1px solid #333;border-radius:8px;color:#fff;font-size:.85rem;cursor:pointer;appearance:none}.select-wrapper select:focus{outline:none;border-color:#10b981}.select-wrapper:after{content:"▼";position:absolute;right:.75rem;top:50%;transform:translateY(-50%);font-size:.6rem;color:#888;pointer-events:none}.content-area{flex:1;padding:1.5rem 2rem;overflow-y:auto;background:#0f0f0f}.content-header{margin-bottom:1.5rem}.content-header h2{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.content-header p{font-size:.85rem;color:#888}.formula-card{background:#1a1a1a;border-radius:16px;border:1px solid #2a2a2a}.formula-header{padding:1.25rem 1.5rem;border-bottom:1px solid #2a2a2a;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.formula-title{display:flex;align-items:center;gap:.75rem}.formula-badge{padding:.35rem .75rem;border-radius:20px;font-size:.65rem;font-weight:600;text-transform:uppercase}.formula-badge.permanent{background:#10b98126;color:#10b981;border:1px solid #10b981}.formula-badge.non-permanent{background:#f59e0b26;color:#f59e0b;border:1px solid #f59e0b}.formula-title h3{font-size:1.1rem;font-weight:600}.formula-equation{background:#0f0f0f;padding:.6rem 1rem;border-radius:8px;font-family:Courier New,monospace;font-size:.85rem;color:#10b981;border:1px solid #2a2a2a}.formula-body{padding:1.5rem}.inputs-label{font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.inputs-label:before{content:"";width:16px;height:2px;background:#10b981}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem}.input-group{display:flex;flex-direction:column;gap:.4rem}.input-group label{font-size:.75rem;color:#aaa}.input-group input{padding:.75rem;background:#0f0f0f;border:1px solid #333;border-radius:8px;color:#fff;font-size:.9rem;font-family:Courier New,monospace}.input-group input:focus{outline:none;border-color:#10b981}.input-group input::placeholder{color:#555}.formula-note{background:#222;border-left:3px solid #f59e0b;padding:.75rem 1rem;border-radius:0 8px 8px 0;margin-bottom:1.5rem}.formula-note p{font-size:.8rem;color:#aaa}.btn-calculate{width:100%;padding:1rem;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:10px;color:#000;font-size:.9rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .2s,box-shadow .2s}.btn-calculate:hover{transform:translateY(-2px);box-shadow:0 8px 25px #10b9814d}.result-container{margin-top:1.5rem;padding:1.25rem;background:#10b9811a;border:2px solid #10b981;border-radius:12px;display:flex;align-items:center;gap:1rem}.result-icon{width:48px;height:48px;background:#10b981;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.result-content h4{font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.05em}.result-content p{font-size:1.5rem;font-weight:700;color:#10b981;font-family:Courier New,monospace}@media(max-width:900px){.main-container{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid #2a2a2a}.formula-header{flex-direction:column;align-items:flex-start}.formula-equation{width:100%;overflow-x:auto}}@media(max-width:600px){.header{flex-direction:column;gap:.75rem;text-align:center}.inputs-grid{grid-template-columns:1fr}.result-container{flex-direction:column;text-align:center}}