@layer components{.beer-cans-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3);width:100%}.beer-cans-container>*{content-visibility:auto;contain-intrinsic-size:auto 340px}@media(min-width:768px){.beer-cans-container{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4)}.beer-cans-container>*{contain-intrinsic-size:auto 380px}}.beer-can-card{position:relative;display:flex;flex-direction:column;height:100%;background-color:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}.beer-can-card:hover{transform:translateY(-2px);border-color:var(--color-border-strong);box-shadow:var(--shadow-2)}.beer-can-card:active{transform:scale(.99)}.beer-can-card.editing-grade{border-color:var(--color-border-accent);box-shadow:0 0 0 3px rgb(var(--rgb-accent) / .15)}.card-actions-container{position:absolute;top:var(--space-2);right:var(--space-2);z-index:2;display:flex;gap:var(--space-1)}.card-action-button{display:grid;place-content:center;width:34px;height:34px;border-radius:var(--radius-full);background-color:#0000008c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgb(255 255 255 / .12);color:var(--color-text);font-size:var(--text-sm);cursor:pointer;transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}.card-action-button:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px}.card-action-button{position:relative}.card-action-button:active{transform:scale(.9)}.card-action-button:disabled{opacity:.5;cursor:not-allowed}.add-action-button,.card-remove-button{width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border-radius:var(--radius-full);background:linear-gradient(180deg,#ffffff26,#ffffff0d),#00000080}.add-action-button svg,.card-remove-button svg{font-size:.8rem}.add-action-button:after,.card-remove-button:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px}.card-remove-confirm-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4)}.add-action-button:hover,.add-action-button.active{background:linear-gradient(180deg,#ffffff2e,#ffffff0f),var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse)}.card-remove-button:hover:not(:disabled){background:linear-gradient(180deg,#ffffff2e,#ffffff0f),var(--color-error);border-color:var(--color-error);color:var(--color-text-inverse)}.beer-can-image-container{position:relative;aspect-ratio:3 / 4;background-color:var(--color-surface-2);touch-action:pan-y}.beer-can-image-container.is-draggable{cursor:grab}.beer-can-image-container.is-draggable:active{cursor:grabbing}.beer-can-image{width:100%;height:100%;object-fit:contain;padding:var(--space-2)}.card-view-dots{position:absolute;bottom:var(--space-2);left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:var(--radius-full);background-color:#0a0a0c8c;pointer-events:none}.card-view-dots--raised{bottom:26px}.card-view-dots span{width:5px;height:5px;border-radius:var(--radius-full);background-color:#ffffff73;transition:background-color var(--dur-2) var(--ease-out)}.card-view-dots span.is-active{background-color:var(--color-accent)}.beer-can-card-body{display:flex;flex-direction:column;gap:var(--space-1);flex-grow:1;padding:var(--space-3)}.beer-can-identifier{font-size:var(--text-xs);font-weight:var(--weight-extrabold);letter-spacing:.06em;color:var(--color-accent);font-variant-numeric:tabular-nums;white-space:nowrap}.beer-can-name{font-size:var(--text-sm);font-weight:var(--weight-bold);line-height:1.35;text-align:left;padding:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.beer-can-name a{color:inherit;text-decoration:none}.beer-can-brewery{font-size:var(--text-xs);color:var(--color-text-3);line-height:1.4}.beer-can-caption{font-size:var(--text-xs);color:var(--color-text-2);font-style:italic;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.beer-can-labels{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:auto;padding-top:var(--space-2)}.beer-can-label{padding:1px var(--space-2);border-radius:var(--radius-full);font-size:.65rem;font-weight:var(--weight-bold);letter-spacing:.02em;white-space:nowrap}.label-oi{background-color:var(--color-accent-tint);color:var(--color-accent);border:1px solid var(--color-border-accent)}.label-irtp{background-color:var(--color-info-tint);color:var(--color-info);border:1px solid transparent}.label-wf{background-color:var(--color-success-tint);color:var(--color-success);border:1px solid transparent}.label-pre{background-color:var(--color-warning-tint);color:var(--color-warning);border:1px solid transparent}.label-ref{background-color:var(--color-surface-2);color:var(--color-text-2);border:1px solid var(--color-border-strong)}.card-type-banner{--type-dot: var(--color-text-2);position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:4px var(--space-2);background-color:#0a0a0ca8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid rgb(255 255 255 / .1);color:var(--color-text);font-size:.62rem;font-weight:var(--weight-extrabold);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;pointer-events:none}.card-type-banner:before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background-color:var(--type-dot);box-shadow:0 0 6px var(--type-dot)}.card-type-banner--flat{--type-dot: var(--color-info)}.card-type-banner--cone{--type-dot: var(--color-warning)}.card-type-banner--crowntainer{--type-dot: #c084fc}.card-type-banner--volume{--type-dot: var(--color-success)}.card-type-banner--specialty{--type-dot: var(--color-text-2)}.collection-item-details{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-xs)}.item-grade-display{display:flex;align-items:center;gap:var(--space-1)}.item-grade-label{color:var(--color-text-3)}.item-grade-value{color:var(--color-accent);font-weight:var(--weight-bold)}.edit-grade-button{position:relative;margin-left:auto;padding:1px var(--space-2);background-color:var(--color-surface-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-full);color:var(--color-text-2);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.04em;cursor:pointer;transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}.edit-grade-button:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px}.edit-grade-button:hover{color:var(--color-accent);border-color:var(--color-border-accent);background-color:var(--color-accent-tint)}.item-estimate-display{color:var(--color-text-2)}.item-estimate-display--unvalued{color:var(--color-text-3);font-style:italic}.item-value-sub{display:block;color:var(--color-text-3);font-size:var(--text-xs)}.item-value-badge{display:inline-block;padding:0 var(--space-2);border:1px solid var(--color-border-accent);border-radius:var(--radius-full);color:var(--color-accent);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.04em}.item-paid-display{color:var(--color-text-2)}}