.beer-can-list-page{width:100%;max-width:var(--page-max-width);margin-inline:auto;padding:var(--space-4) var(--space-4) var(--space-8);flex-grow:1;overflow-anchor:none}.beer-can-list-page .page-title{margin-bottom:var(--space-2)}.list-controls{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:10;display:flex;flex-direction:column;gap:var(--space-3);margin-inline:calc(var(--space-4) * -1);padding:var(--space-3) var(--space-4);background-color:#121214e0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}.search-bar{display:flex;align-items:center;gap:var(--space-2)}.search-input-container{position:relative;flex-grow:1}.clear-button{position:absolute;right:var(--space-2);top:50%;transform:translateY(-50%);display:grid;place-content:center;width:32px;height:32px;border-radius:var(--radius-full);color:var(--color-text-3);cursor:pointer;transition:color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}.clear-button:hover{color:var(--color-text);background-color:var(--color-surface-3)}.share-button-container{position:relative;flex-shrink:0}.share-button{display:grid;place-content:center;width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-md);border:1px solid var(--color-border-strong);background-color:var(--color-surface-2);color:var(--color-text-2);cursor:pointer;transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}.share-button:hover{color:var(--color-accent);border-color:var(--color-border-accent)}.copy-success{position:absolute;top:calc(100% + 6px);right:0;padding:var(--space-1) var(--space-2);background-color:var(--color-surface-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);color:var(--color-accent);font-size:var(--text-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-out);z-index:20}.copy-success.show{opacity:1}.filter-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);max-height:240px;transition:max-height var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease-out),margin-top var(--dur-3) var(--ease-out)}.filter-bar.is-collapsed{max-height:0;opacity:0;margin-top:calc(-1 * var(--space-3));overflow:hidden;pointer-events:none}.filter-toggle{position:relative;display:grid;place-content:center;width:var(--touch-target);height:var(--touch-target);flex-shrink:0;border-radius:var(--radius-md);border:1px solid var(--color-border-strong);background-color:var(--color-surface-2);color:var(--color-text-2);cursor:pointer;transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}.filter-toggle:hover{color:var(--color-accent);border-color:var(--color-border-accent)}.filter-toggle.is-active{color:var(--color-accent);border-color:var(--color-border-accent);background-color:var(--color-accent-tint)}.filter-toggle__count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;display:grid;place-content:center;border-radius:var(--radius-full);background-color:var(--color-accent);color:var(--color-text-inverse);font-size:.65rem;font-weight:var(--weight-bold)}.filter-dropdown-anchor{display:inline-flex;flex-shrink:0}.results-count{margin:var(--space-4) 0 var(--space-3);color:var(--color-text-2);font-size:var(--text-sm)}.results-count b{color:var(--color-text)}.list-message{margin-top:var(--space-6);text-align:center;color:var(--color-text-3);font-size:var(--text-sm)}.list-message--error{color:var(--color-error)}.beer-cans-wrapper{display:flex;flex-direction:column;gap:var(--space-4)}.scroll-to-top{position:fixed;right:var(--space-4);bottom:calc(92px + env(safe-area-inset-bottom));z-index:50;display:grid;place-content:center;width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-full);background-color:var(--color-accent);color:var(--color-text-inverse);box-shadow:var(--shadow-2);cursor:pointer;transition:background-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}.scroll-to-top:hover{background-color:var(--color-accent-bright)}.scroll-to-top:active{transform:scale(.92)}@media(min-width:768px){.beer-can-list-page{padding-inline:var(--space-6)}.list-controls{position:static;margin-inline:0;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none}.search-bar{max-width:560px;margin-inline:auto;width:100%}.filter-bar{justify-content:center}.filter-bar,.filter-bar.is-collapsed{max-height:none;opacity:1;margin-top:0;overflow:visible;pointer-events:auto}.filter-toggle{display:none}.scroll-to-top{bottom:var(--space-6)}}