@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-app:#0f172a;--bg-card:#1e293b;--bg-input:#0f172a;--border-card:#334155;--text-main:#f8fafc;--text-muted:#94a3b8;--color-primary:#6366f1;--color-primary-hover:#4f46e5;--color-success:#10b981;--color-danger:#ef4444;--color-danger-hover:#dc2626;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--radius-sm:6px;--radius-md:10px;--radius-lg:16px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-main);font-family:var(--font-sans);flex-direction:column;min-height:100vh;display:flex;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--border-card);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.top-bar{background-color:var(--bg-card);border-bottom:1px solid var(--border-card);box-shadow:var(--shadow-sm);z-index:10;justify-content:space-between;align-items:center;padding:1.25rem 2rem;display:flex}.brand-section{align-items:center;gap:.75rem;display:flex}.brand-icon{font-size:1.75rem}.brand-name{letter-spacing:-.025em;background:linear-gradient(90deg,#a5b4fc,#818cf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.25rem;font-weight:700}.search-filter-controls{flex-grow:1;align-items:center;gap:1rem;max-width:600px;margin:0 2rem;display:flex}.search-input-wrapper{flex-grow:1;position:relative}.search-input{background-color:var(--bg-app);border:1px solid var(--border-card);border-radius:var(--radius-md);width:100%;color:var(--text-main);font-family:var(--font-sans);padding:.625rem 1rem .625rem 2.5rem;font-size:.875rem;transition:all .2s}.search-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #6366f133}.search-icon-svg{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:.875rem;transform:translateY(-50%)}.filter-select{background-color:var(--bg-app);border:1px solid var(--border-card);border-radius:var(--radius-md);color:var(--text-main);cursor:pointer;outline:none;padding:.625rem 1.5rem .625rem 1rem;font-size:.875rem}.filter-select:focus{border-color:var(--color-primary)}.view-actions{align-items:center;gap:.75rem;display:flex}.btn{border-radius:var(--radius-md);font-family:var(--font-sans);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover)}.btn-secondary{border-color:var(--border-card);color:var(--text-main);background-color:#0000}.btn-secondary:hover{background-color:#ffffff0d}.btn-danger{border-color:var(--color-danger);color:var(--color-danger);background-color:#0000}.btn-danger:hover{background-color:var(--color-danger);color:#fff}.btn-icon-only{padding:.625rem}.workspace{flex-grow:1;height:calc(100vh - 69px);display:flex;overflow:hidden}.left-pane{border-right:1px solid var(--border-card);flex-direction:column;flex:1;padding:1.5rem 2rem;display:flex;overflow-y:auto}.pane-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.rack-selection-controls{align-items:center;gap:.75rem;display:flex}.rack-dropdown{background-color:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-md);color:var(--text-main);cursor:pointer;outline:none;padding:.625rem 1rem;font-weight:500}.grid-container{border-radius:var(--radius-lg);background-color:#00000026;flex-grow:1;justify-content:center;align-items:center;padding:2rem;display:flex;position:relative;overflow:auto}.rack-grid{background-color:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);grid-template-rows:repeat(var(--grid-rows), 80px);grid-template-columns:repeat(var(--grid-cols), 80px);gap:.75rem;padding:1rem;display:grid}.grid-cell{aspect-ratio:1;border-radius:var(--radius-md);justify-content:center;align-items:center;min-width:80px;min-height:80px;transition:all .2s;display:flex;position:relative}.grid-cell:hover{z-index:50}.grid-cell.empty{background-color:#0000;border:2px dashed #ffffff1a}.grid-cell.empty.drag-over{border-color:var(--color-success);background-color:#10b9811a;transform:scale(1.03)}.bottle-card{border-radius:var(--radius-md);cursor:grab;-webkit-user-select:none;user-select:none;width:100%;height:100%;box-shadow:var(--shadow-sm);color:#fff;flex-direction:column;justify-content:space-between;align-items:center;padding:.4rem;font-weight:600;transition:opacity .2s,transform .1s;display:flex;position:relative}.bottle-card:active{cursor:grabbing}.bottle-producer{white-space:nowrap;text-overflow:ellipsis;text-align:center;opacity:.95;max-width:100%;font-size:.7rem;font-weight:700;line-height:1.2;overflow:hidden}.bottle-variety{white-space:nowrap;text-overflow:ellipsis;text-align:center;opacity:.85;max-width:100%;font-size:.6rem;font-weight:500;line-height:1.2;overflow:hidden}.bottle-vintage{opacity:.8;font-size:.7rem;font-weight:400;line-height:1.1}.dimmed{opacity:.15;filter:grayscale();pointer-events:none}.tooltip{border:1px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:100;pointer-events:none;opacity:0;visibility:hidden;background-color:#0b0f19;min-width:200px;padding:.75rem 1rem;transition:all .15s ease-out;position:absolute;bottom:110%;left:50%;transform:translate(-50%)translateY(4px)}.grid-cell:hover .tooltip{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.tooltip-title{margin-bottom:.25rem;font-size:.875rem;font-weight:700}.tooltip-row{color:var(--text-muted);justify-content:space-between;margin-top:.25rem;font-size:.75rem;display:flex}.tooltip-notes{border-top:1px solid var(--border-card);word-break:break-word;margin-top:.5rem;padding-top:.5rem;font-size:.75rem;font-style:italic}.right-pane{background-color:var(--bg-card);flex-direction:column;width:420px;display:flex;overflow-y:auto}.panel-section{border-bottom:1px solid var(--border-card);padding:1.5rem}.panel-title{align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1rem;font-weight:600;display:flex}.fast-add-form{flex-direction:column;gap:.875rem;display:flex}.form-row{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.form-group{flex-direction:column;gap:.375rem;display:flex;position:relative}.form-group label{color:var(--text-muted);font-size:.75rem;font-weight:500}.form-input{background-color:var(--bg-input);border:1px solid var(--border-card);border-radius:var(--radius-md);width:100%;color:var(--text-main);font-family:var(--font-sans);padding:.625rem .75rem;font-size:.875rem;transition:border-color .2s}.form-input:focus{border-color:var(--color-primary);outline:none}.suggestions-popup{border:1px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:150;background-color:#1e293b;max-height:200px;display:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.suggestion-item{cursor:pointer;padding:.5rem .75rem;font-size:.875rem;transition:background .15s}.suggestion-item:hover,.suggestion-item.active{background-color:var(--color-primary);color:#fff}.bench-drawer{flex-direction:column;flex-grow:1;min-height:200px;display:flex}.bench-scroll{flex-direction:column;flex-grow:1;gap:.75rem;padding:1.5rem;display:flex;overflow-y:auto}.bench-card{background-color:var(--bg-app);border:1px solid var(--border-card);border-radius:var(--radius-md);cursor:grab;justify-content:space-between;align-items:center;padding:.75rem 1rem;transition:border-color .2s,transform .1s;display:flex}.bench-card:hover{border-color:var(--text-muted)}.bench-card:active{cursor:grabbing}.bench-card-info{align-items:center;gap:.75rem;display:flex;overflow:hidden}.variety-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px}.bench-card-meta{overflow:hidden}.bench-bottle-name{white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:500;overflow:hidden}.bench-bottle-sub{color:var(--text-muted);font-size:.75rem}.bench-placeholder{height:100%;color:var(--text-muted);text-align:center;opacity:.6;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.bench-placeholder-icon{font-size:2rem}.list-view-container{background-color:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-lg);overflow-x:auto}.bottles-table{border-collapse:collapse;text-align:left;width:100%;font-size:.875rem}.bottles-table th{border-bottom:1px solid var(--border-card);color:var(--text-muted);background-color:#ffffff05;padding:.875rem 1rem;font-weight:600}.bottles-table td{border-bottom:1px solid var(--border-card);padding:.875rem 1rem}.bottles-table tr:hover{background-color:#ffffff03}.table-variety-badge{color:#fff;border-radius:50px;align-items:center;gap:.375rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;display:inline-flex}.dialog-overlay{z-index:1000;opacity:0;visibility:hidden;background-color:#000000bf;justify-content:center;align-items:center;transition:all .2s;display:flex;position:fixed;inset:0}.dialog-overlay.active{opacity:1;visibility:visible}.dialog-content{background-color:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);width:100%;max-width:440px;box-shadow:var(--shadow-lg);padding:2rem;transition:transform .2s;transform:scale(.95)}.dialog-overlay.active .dialog-content{transform:scale(1)}.dialog-header{margin-bottom:1.25rem;font-size:1.25rem;font-weight:700}.dialog-actions{justify-content:flex-end;gap:.75rem;margin-top:1.75rem;display:flex}.mobile-banner{background-color:var(--color-primary);color:#fff;text-align:center;z-index:500;justify-content:space-between;align-items:center;padding:1rem;font-weight:600;transition:transform .3s;display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -4px 10px #0000004d}.mobile-banner.active{transform:translateY(0)}.mobile-pulse-cell{animation:1.5s infinite pulse-border}@keyframes pulse-border{0%{border-color:#10b98166}50%{border-color:#10b981;box-shadow:0 0 8px #10b98166}to{border-color:#10b98166}}.variety-settings-list{flex-direction:column;gap:.75rem;max-height:250px;margin-bottom:1rem;padding-right:.5rem;display:flex;overflow-y:auto}.variety-settings-row{background-color:var(--bg-app);border-radius:var(--radius-md);border:1px solid var(--border-card);justify-content:space-between;align-items:center;padding:.5rem .75rem;display:flex}.variety-color-picker-wrapper{align-items:center;gap:.5rem;display:flex}.variety-color-picker{cursor:pointer;background:0 0;border:none;border-radius:50%;width:28px;height:28px}.variety-color-picker::-webkit-color-swatch-wrapper{padding:0}.variety-color-picker::-webkit-color-swatch{border:1px solid var(--border-card);border-radius:50%}@media (width<=1024px){.workspace{flex-direction:column;height:auto;overflow-y:auto}.left-pane{border-right:none;border-bottom:1px solid var(--border-card);flex:none;height:auto;padding:1.5rem 1rem}.right-pane{flex:none;width:100%;height:auto}.search-filter-controls{margin:0 1rem}.grid-container{padding:1rem}.rack-grid{grid-template-rows:repeat(var(--grid-rows), 65px);grid-template-columns:repeat(var(--grid-cols), 65px);gap:.5rem;padding:.75rem}.grid-cell{min-width:65px;min-height:65px}.bottle-vintage{font-size:.65rem}.bottle-producer{font-size:.6rem}.bottle-variety{font-size:.5rem}}