:root{--calc-primary:#0d3460;--calc-secondary:#0075c9;--calc-accent:#0099cf;--calc-cyan:#00c3d1;--calc-teal:#00c698;--calc-lime:#77cb28}.calc-hero{background:linear-gradient(135deg,var(--calc-primary) 0,var(--calc-secondary) 50%,var(--calc-accent) 100%);padding:var(--spacing-3xl) 0;position:relative;overflow:hidden}.calc-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvgwidth='60'height='60'viewBox='006060'xmlns='http://www.w3.org/2000/svg'%3E%3Cgfill='none'fill-rule='evenodd'%3E%3Cgfill='%23ffffff'fill-opacity='0.05'%3E%3Cpathd='M3634v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM634v-4H4v4H0v2h4v4h2v-4h4v-2H6zM64V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:.3}.calc-hero-content{position:relative;z-index:1;text-align:center;color:white}.calc-hero h1{font-size:var(--font-size-4xl);font-weight:700;margin-bottom:var(--spacing-md);text-shadow:0 2px 4px rgba(0,0,0,0.2)}.calc-hero p{font-size:var(--font-size-lg);opacity:.95;max-width:600px;margin:0 auto}.calc-container{display:grid;grid-template-columns:380px 1fr;gap:var(--spacing-xl);margin-top:calc(-1 * var(--spacing-2xl));position:relative;z-index:2}@media(max-width:1024px){.calc-container{grid-template-columns:1fr;margin-top:var(--spacing-lg)}}.calc-sidebar{background:white;border-radius:var(--radius-xl);box-shadow:0 10px 40px rgba(13,52,96,0.15);overflow:hidden}.calc-sidebar-header{background:linear-gradient(135deg,var(--calc-primary) 0,var(--calc-secondary) 100%);padding:var(--spacing-lg);color:white}.calc-sidebar-header h3{margin:0;font-size:var(--font-size-xl);display:flex;align-items:center;gap:var(--spacing-sm)}.calc-sidebar-header h3 i{color:var(--calc-cyan)}.calc-sidebar-body{padding:var(--spacing-lg)}.calc-form-group{margin-bottom:var(--spacing-lg)}.calc-form-group label{display:block;font-weight:600;color:var(--calc-primary);margin-bottom:var(--spacing-sm);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.5px}.calc-select{width:100%;padding:12px 16px;border:2px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--font-size-base);background:white;transition:all var(--transition-fast);cursor:pointer}.calc-select:focus{outline:0;border-color:var(--calc-secondary);box-shadow:0 0 0 3px rgba(0,117,201,0.15)}.calc-formula-list{width:100%;height:220px;padding:0;border:2px solid var(--border-light);border-radius:var(--radius-md);overflow-y:auto;background:var(--bg-secondary)}.calc-formula-list option{padding:10px 14px;border-bottom:1px solid var(--border-light);cursor:pointer;transition:background var(--transition-fast)}.calc-formula-list option:hover{background:rgba(0,117,201,0.1)}.calc-formula-list option:checked{background:linear-gradient(135deg,var(--calc-secondary) 0,var(--calc-accent) 100%);color:white}.calc-batch-input{display:flex;gap:var(--spacing-sm)}.calc-batch-input input{flex:1;padding:12px 16px;border:2px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--font-size-lg);font-weight:600;text-align:center;transition:all var(--transition-fast)}.calc-batch-input input:focus{outline:0;border-color:var(--calc-secondary);box-shadow:0 0 0 3px rgba(0,117,201,0.15)}.calc-batch-input select{width:90px;padding:12px;border:2px solid var(--border-light);border-radius:var(--radius-md);font-weight:600;background:white;cursor:pointer}.calc-btn-primary{width:100%;padding:14px 24px;background:linear-gradient(135deg,var(--calc-teal) 0,var(--calc-lime) 100%);color:white;border:0;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:700;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px rgba(0,198,152,0.3)}.calc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,198,152,0.4)}.calc-btn-secondary{width:100%;padding:12px 24px;background:transparent;color:var(--text-secondary);border:2px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.calc-btn-secondary:hover{border-color:var(--calc-secondary);color:var(--calc-secondary)}.calc-btn-accent{width:100%;padding:14px 24px;background:linear-gradient(135deg,var(--calc-secondary) 0,var(--calc-accent) 100%);color:white;border:0;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-lg);box-shadow:0 4px 15px rgba(0,117,201,0.25)}.calc-btn-accent:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,117,201,0.35)}.calc-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-light),transparent);margin:var(--spacing-lg) 0}.calc-main{display:flex;flex-direction:column;gap:var(--spacing-lg)}.calc-card{background:white;border-radius:var(--radius-xl);box-shadow:0 4px 20px rgba(13,52,96,0.08);overflow:hidden}.calc-card-header{padding:var(--spacing-lg);background:var(--bg-secondary);border-bottom:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center}.calc-card-header h3{margin:0;color:var(--calc-primary);font-size:var(--font-size-xl);display:flex;align-items:center;gap:var(--spacing-sm)}.calc-card-header h3 i{color:var(--calc-secondary)}.calc-card-body{padding:var(--spacing-lg)}.calc-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-md)}.calc-info-item{text-align:center;padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-md)}.calc-info-item label{display:block;font-size:var(--font-size-xs);color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-xs)}.calc-info-item span{font-size:var(--font-size-base);font-weight:600;color:var(--calc-primary)}.calc-batch-display{background:linear-gradient(135deg,var(--calc-primary) 0,var(--calc-secondary) 100%);color:white;padding:var(--spacing-lg);border-radius:var(--radius-lg);text-align:center;margin-bottom:var(--spacing-lg)}.calc-batch-display label{display:block;font-size:var(--font-size-sm);opacity:.9;margin-bottom:var(--spacing-xs)}.calc-batch-display .value{font-size:var(--font-size-3xl);font-weight:700}.calc-table{width:100%;border-collapse:collapse}.calc-table thead{background:var(--calc-primary);color:white}.calc-table th{padding:14px 16px;text-align:left;font-weight:600;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.5px}.calc-table tbody tr{border-bottom:1px solid var(--border-light);transition:background var(--transition-fast)}.calc-table tbody tr:hover{background:rgba(0,117,201,0.05)}.calc-table td{padding:14px 16px;font-size:var(--font-size-sm)}.calc-table td:nth-child(2),.calc-table td:nth-child(3){font-weight:600;color:var(--calc-primary)}.calc-table .ingredient-name{font-weight:500}.calc-table .ingredient-function{color:var(--text-light);font-size:var(--font-size-xs)}.calc-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--border-light)}.calc-action-btn{flex:1;padding:12px 20px;background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-md);font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.calc-action-btn:hover{background:var(--calc-secondary);color:white;border-color:var(--calc-secondary)}.calc-safety{background:linear-gradient(135deg,#fff8e1 0,#fff3cd 100%);border:1px solid #ffc107;border-radius:var(--radius-lg);padding:var(--spacing-lg)}.calc-safety h4{color:#856404;margin:0 0 var(--spacing-md) 0;display:flex;align-items:center;gap:var(--spacing-sm)}.calc-safety ul{margin:0;padding-left:var(--spacing-lg);color:#856404}.calc-safety li{margin-bottom:var(--spacing-xs)}.calc-empty-state{text-align:center;padding:var(--spacing-3xl);color:var(--text-light)}.calc-empty-state i{font-size:4rem;color:var(--border-light);margin-bottom:var(--spacing-lg)}.calc-empty-state h3{color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.calc-difficulty-badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase}.calc-difficulty-badge.easy{background:rgba(119,203,40,0.15);color:#5a9a1f}.calc-difficulty-badge.medium{background:rgba(255,165,0,0.15);color:#cc8400}.calc-difficulty-badge.hard{background:rgba(220,53,69,0.15);color:#c82333}.calc-difficulty-badge.custom{background:rgba(0,117,201,0.15);color:var(--calc-secondary)}