.concrete-calculator-container{max-width:800px;margin:0 auto;padding-bottom:4rem}.converter-card{background:#ffffffb3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.4);border-radius:2rem;padding:2.5rem;box-shadow:0 25px 60px #0000000d;display:flex;flex-direction:column;gap:2.5rem}.dark .converter-card{background:#0f172ab3;border:1px solid rgba(255,255,255,.05)}.mix-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.mix-btn{padding:1rem;border-radius:1rem;border:2px solid transparent;background:#f1f5f980;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#64748b}.dark .mix-btn{background:#1e293b80}.mix-btn svg{width:2rem;height:2rem}.mix-btn span{font-size:.875rem;font-weight:700}.mix-btn.active{background:#f0fdf4;border-color:#22c55e;color:#166534;box-shadow:0 10px 20px #22c55e1a;transform:translateY(-2px)}.dark .mix-btn.active{background:#22c55e1a;color:#4ade80}.input-header{margin-bottom:1rem}.input-header label{font-size:.75rem;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em}.volume-control{display:flex;flex-direction:column;gap:1.5rem}.calc-mode-selector{display:flex;gap:.5rem;background:#f1f5f9cc;padding:.4rem;border-radius:1rem;align-self:flex-start}.dark .calc-mode-selector{background:#1e293bcc}.mode-btn{padding:.6rem 1.25rem;border-radius:.75rem;border:none;background:transparent;color:#64748b;font-size:.8125rem;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.mode-btn svg{width:1rem;height:1rem}.mode-btn.active{background:#fff;color:#1e293b;box-shadow:0 4px 12px #0000000d}.dark .mode-btn.active{background:#1e293b;color:#fff}.dimensions-helper,.direct-volume-input{display:none}.dimensions-helper.active,.direct-volume-input.active{display:flex}.dimensions-helper{background:#f1f5f980;padding:1.5rem;border-radius:1.5rem;flex-direction:column;gap:1rem;border:1px dashed #cbd5e1}.direct-volume-input{flex-direction:column}.dark .dimensions-helper{background:#1e293b4d;border-color:#334155}.helper-title{font-size:.75rem;font-weight:800;color:#64748b;text-transform:uppercase;display:flex;align-items:center;gap:.5rem}.dim-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.dim-field{display:flex;flex-direction:column;gap:.5rem}.dim-field label{font-size:.7rem;font-weight:700;color:#94a3b8}.dim-input-wrapper{position:relative;display:flex;align-items:center}.dim-input-wrapper input{width:100%;padding:.75rem 2.5rem .75rem .75rem;border-radius:.75rem;border:2px solid #e2e8f0;background:#fff;font-size:1rem;font-weight:700;color:#1e293b;outline:none}.dark .dim-input-wrapper input{background:#0f172a;border-color:#1e293b;color:#fff}.dim-unit{position:absolute;right:.75rem;font-size:.7rem;font-weight:800;color:#94a3b8}.volume-input-wrapper{position:relative;display:flex;align-items:center}.volume-input-wrapper input{width:100%;padding:1rem 4rem 1rem 1.5rem;border-radius:1rem;border:2px solid #e2e8f0;background:#fff;font-size:1.5rem;font-weight:800;color:#1e293b;outline:none;transition:all .2s ease}.dark .volume-input-wrapper input{background:#0f172a;border-color:#1e293b;color:#fff}.volume-input-wrapper input:focus{border-color:#22c55e;box-shadow:0 0 0 4px #22c55e1a}.unit-tag{position:absolute;right:1.5rem;font-weight:900;color:#94a3b8;font-size:1.25rem}.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.result-card{background:#fff;padding:1.5rem;border-radius:1.5rem;border:1px solid #e2e8f0;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;transition:all .3s ease;position:relative;overflow:hidden}.dark .result-card{background:#1e293b;border-color:#334155}.result-card svg{width:2rem;height:2rem;color:#22c55e}.result-info{display:flex;flex-direction:column}.result-value{font-size:2rem;font-weight:900;color:#1e293b;line-height:1}.dark .result-value{color:#fff}.result-unit{font-size:.75rem;font-weight:800;color:#64748b;text-transform:uppercase;margin-top:.25rem}.result-label{font-size:.875rem;font-weight:600;color:#475569}.dark .result-label{color:#94a3b8}.proportions-banner{background:#f8fafc;border-radius:1.25rem;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.dark .proportions-banner{background:#1e293b4d}.proportion-header{font-size:.75rem;font-weight:800;color:#64748b;text-transform:uppercase;display:flex;align-items:center;gap:.5rem}.proportion-header svg{width:1rem;height:1rem}.proportion-bar{height:1.5rem;background:#e2e8f0;border-radius:.5rem;display:flex;overflow:hidden}.dark .proportion-bar{background:#1e293b}.bar-segment{height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}.segment-cement{background:#64748b}.segment-sand{background:#fbbf24}.segment-gravel{background:#94a3b8}.proportion-labels{display:flex;justify-content:center;gap:1.5rem}.prop-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:#475569}.dark .prop-label{color:#94a3b8}.dot{width:.5rem;height:.5rem;border-radius:50%}.info-banner{display:flex;gap:1rem;padding:1.25rem;background:#f0fdf4;border-radius:1.25rem;color:#166534;font-size:.875rem;line-height:1.5}.dark .info-banner{background:#22c55e1a;color:#4ade80}.info-banner svg{width:1.5rem;height:1.5rem;flex-shrink:0}@media(max-width:640px){.results-grid,.mix-selector{grid-template-columns:1fr}.converter-card{padding:1.5rem}}.volume-display-summary{background:linear-gradient(135deg,#10b981,#059669);padding:2rem;border-radius:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;box-shadow:0 15px 30px #10b98133;margin-top:.5rem;position:relative;overflow:hidden}.volume-display-summary:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none}.summary-label{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;opacity:.9;margin-bottom:.25rem}.summary-value-wrapper{display:flex;align-items:baseline;gap:.5rem}.summary-value{font-size:3rem;font-weight:900;line-height:1}.summary-unit{font-size:1.25rem;font-weight:700;opacity:.8}.binder-selector{display:flex;justify-content:center;gap:1rem;margin-bottom:.5rem}.binder-option{display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.6rem 1rem;border-radius:1rem;background:#f1f5f980;border:2px solid transparent;transition:all .2s ease}.dark .binder-option{background:#1e293b80}.binder-option.active{background:#fff;border-color:#10b981;box-shadow:0 10px 20px #0000000d}.dark .binder-option.active{background:#1e293b;border-color:#10b981}.binder-circle{width:1rem;height:1rem;border-radius:50%;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.binder-option.active .binder-circle{border-color:#10b981;background:#10b981}.binder-inner{width:.4rem;height:.4rem;background:#fff;border-radius:50%;transform:scale(0);transition:transform .2s ease}.binder-option.active .binder-inner{transform:scale(1)}.binder-label{font-size:.8125rem;font-weight:700;color:#64748b}.binder-option.active .binder-label{color:#1e293b}.dark .binder-option.active .binder-label{color:#fff}@media(max-width:480px){.binder-selector{flex-direction:column;align-items:stretch}}.price-summary-card{background:linear-gradient(135deg,#3b82f6,#2563eb);padding:2.5rem;border-radius:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;box-shadow:0 20px 40px #3b82f633;margin-top:1.5rem;position:relative;overflow:hidden}.price-summary-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);pointer-events:none}.price-label{font-size:.875rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.9;margin-bottom:.5rem}.price-value-wrapper{display:flex;align-items:baseline;gap:.25rem}.price-value{font-size:4rem;font-weight:950;line-height:1}.price-unit{font-size:1.5rem;font-weight:800;opacity:.9}.price-inputs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2rem;width:100%}.price-input-field{display:flex;flex-direction:column;gap:.5rem;text-align:left}.price-input-field label{font-size:.7rem;font-weight:800;text-transform:uppercase;opacity:.8}.editable-price-wrapper{position:relative;display:flex;align-items:center}.editable-price{width:100%;background:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:.75rem;padding:.6rem 1.5rem .6rem .75rem;color:#fff;font-weight:800;font-size:1rem;outline:none;transition:all .2s ease}.editable-price:focus{background:#ffffff40;border-color:#fff}.editable-unit{position:absolute;right:.75rem;font-size:.75rem;font-weight:800;opacity:.7}.price-disclaimer{margin-top:1.5rem;font-size:.7rem;opacity:.6;font-style:italic}@media(max-width:640px){.price-inputs-grid{grid-template-columns:1fr}}