.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding-block: 3rem; }
.login-card, .form-card { width: min(100%, 28rem); display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--card)); box-shadow: var(--shadow-lg); }
.login-logo { margin-inline: auto; width: 72px; height: 72px; }
.login-card h1 { font-size: 1.875rem; text-align: center; }
.login-card .eyebrow, .login-hint { text-align: center; }
.login-hint { color: hsl(var(--muted-foreground)); }
.admin-layout { display: grid; gap: 2rem; align-items: start; }
.admin-layout .form-card { width: 100%; box-shadow: var(--shadow-sm); }
#product-form { display: grid; gap: 1rem; }
.admin-products { display: grid; gap: 1rem; }
.admin-list { display: grid; gap: 1rem; }
.admin-item { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); box-shadow: var(--shadow-sm); }
.admin-item img { width: 5rem; height: 6rem; object-fit: cover; border-radius: calc(var(--radius) - 2px); background: hsl(var(--muted)); }
.admin-item-info { display: grid; gap: 0.5rem; }
.admin-item-info p { color: hsl(var(--muted-foreground)); }
@media (min-width: 900px) { .admin-layout { grid-template-columns: 24rem 1fr; } .admin-layout .form-card { position: sticky; top: 6rem; } }