:root{--green:#8dc53e;--green-dark:#79ab32;--purple:#704a9d;--purple-dark:#5d3c84;--light-grey:#f1f1f1;--mid-grey:#e6e6e6;--dark-grey:#858685;--text:#1c1c1e;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body{min-height:100vh;margin:0;padding:0}body{background:linear-gradient(#f7f7f9 0%,#eef0ef 100%)}button{cursor:pointer;font-family:inherit}input{font-family:inherit}.app{background:#fff;flex-direction:column;width:100%;max-width:600px;min-height:100vh;margin:0 auto;display:flex;box-shadow:0 0 40px #0000000f}@media (width>=640px){.app{border-radius:18px;min-height:calc(100vh - 48px);margin:24px auto;overflow:hidden}}.section-title{text-align:center;margin:0 0 12px;font-size:1.1rem;font-weight:800}.section-subtitle{text-align:center;color:var(--dark-grey);margin:0;font-size:.85rem}.btn{color:#fff;border:none;border-radius:12px;width:100%;padding:14px 16px;font-size:1rem;font-weight:700;transition:filter .15s,transform 50ms;display:block}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--purple)}.btn-primary:hover{background:var(--purple-dark)}.btn-green{background:var(--green)}.btn-green:hover{background:var(--green-dark)}.start-screen{justify-content:flex-start;align-items:center}.brand{text-align:center;padding:36px 16px 8px}.brand h1{letter-spacing:-.02em;color:var(--purple);margin:0;font-size:2.4rem;font-weight:900}.brand p{color:var(--green);text-transform:uppercase;letter-spacing:.12em;margin:2px 0 0;font-size:1rem;font-weight:700}.start-card{flex-direction:column;gap:20px;width:100%;max-width:440px;padding:16px 24px 32px;display:flex}.brix-selector{flex-direction:column;align-items:center;gap:14px;display:flex}.brix-display{flex-direction:column;align-items:center;line-height:1;display:flex}.brix-display-value{color:var(--text);font-size:2.6rem;font-weight:900}.brix-display-label{letter-spacing:.18em;color:var(--dark-grey);margin-top:4px;font-size:.75rem;font-weight:700}.brix-columns{gap:14px;width:100%;max-width:340px;display:flex}.brix-column{background:var(--light-grey);scroll-behavior:smooth;scrollbar-width:thin;border-radius:12px;flex:1;height:200px;padding:6px;overflow-y:auto}.brix-cell{width:100%;color:var(--text);background:0 0;border:none;border-radius:8px;padding:8px 0;font-size:1.4rem;font-weight:700;transition:background .12s,color .12s;display:block}.brix-cell:hover{background:#704a9d1a}.brix-cell.is-selected{background:var(--purple);color:#fff}.calc-header{border-bottom:1px solid var(--mid-grey);align-items:center;gap:8px;padding:14px 16px;display:flex}.header-back{color:var(--purple);background:0 0;border:none;border-radius:8px;padding:0 6px;font-size:1.8rem;line-height:1}.header-back:hover{background:var(--light-grey)}.header-title{text-align:center;flex:1;font-size:1.25rem;font-weight:900}.header-brand{color:var(--purple);font-size:1rem;font-weight:900}.tab-bar{border-bottom:1px solid var(--mid-grey);display:flex}.tab{color:#c8c8c8;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:14px 4px;font-size:1rem;font-weight:700;transition:color .12s,border-color .12s}.tab:hover{color:var(--dark-grey)}.tab.is-active{color:var(--text);border-bottom-color:#000}.calc-body{flex-direction:column;flex:1;display:flex}.tab-panel{flex-direction:column;flex:1;gap:16px;padding:20px 24px 28px;display:flex}.gravity-bar{background:var(--purple);color:#fff;border-radius:10px;justify-content:space-around;align-items:center;padding:10px 16px;font-size:1.05rem;font-weight:700;display:flex}.stat-grid{grid-template-columns:1fr 1fr;gap:18px 12px;padding:8px 0;display:grid}.stat{text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.stat-value{color:var(--text);font-size:1.7rem;font-weight:800}.stat-label{color:var(--green);font-size:.8rem;font-weight:800}.from-to{justify-content:space-around;align-items:center;display:flex}.from-to-item{flex-direction:column;align-items:center;display:flex}.from-to-value{font-size:2.6rem;font-weight:800;line-height:1}.from-to-label{color:var(--dark-grey);margin-top:4px;font-size:.8rem}.from-to-arrow{color:var(--dark-grey);font-size:2rem}.dilution-result{background:var(--purple);color:#fff;border-radius:12px;justify-content:space-around;align-items:center;padding:16px 12px;display:flex}.dilution-stat{flex-direction:column;align-items:center;gap:4px;display:flex}.dilution-value{font-size:1.7rem;font-weight:800}.dilution-label{font-size:.85rem;font-weight:700}.dilution-mode{opacity:.95;font-size:.95rem;font-weight:700}.juices-panel{gap:12px}.juices-header{flex-direction:column;gap:4px;display:flex}.juices-list{border:1px solid var(--mid-grey);border-radius:12px;flex-direction:column;flex:1;max-height:60vh;display:flex;overflow-y:auto}.juice-row{border:none;border-bottom:1px solid var(--light-grey);color:var(--dark-grey);background:0 0;justify-content:space-between;align-items:center;padding:12px 18px;font-size:1.15rem;font-weight:700;transition:background .12s,color .12s;display:flex}.juice-row:last-child{border-bottom:none}.juice-row:hover{background:var(--light-grey)}.juice-row.is-active{color:var(--text);background:#8dc53e29}.juice-name{text-align:left}.juice-brix{font-variant-numeric:tabular-nums;color:var(--purple)}.cost-panel{gap:18px}.cost-label{font-size:1.05rem;font-weight:800}.cost-input-row{align-items:center;gap:10px;display:flex}.cost-currency{color:var(--purple);font-size:1.6rem;font-weight:800}.cost-input{background:0 0;border:none;border-bottom:2px solid #000;outline:none;flex:1;min-width:0;padding:6px 2px;font-size:1.8rem;font-weight:800}.cost-input:focus{border-bottom-color:var(--purple)}.cost-brix-badge{background:var(--purple);color:#fff;border-radius:12px;flex-shrink:0;padding:8px 12px;font-size:.85rem;font-weight:700}.cost-options{flex-wrap:wrap;gap:8px;display:flex}.cost-option{border:1.5px solid var(--purple);color:var(--purple);background:#fff;border-radius:10px;flex:28%;padding:9px 6px;font-size:.85rem;font-weight:700;transition:background .12s,color .12s}.cost-option:hover{background:#704a9d1a}.cost-option.is-active{background:var(--purple);color:#fff}.cost-reset{border-color:var(--dark-grey);color:var(--dark-grey)}.cost-reset:hover{background:var(--light-grey)}.cost-results{background:var(--mid-grey);border-radius:12px;padding:18px 12px}.cost-hint{text-align:center;color:var(--dark-grey);margin:8px 0;font-size:.9rem}