:root {
    color-scheme: light;
    font-family: Arial, Helvetica, sans-serif;
    background: #f8fafc;
    color: #172033;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
}

.container {
    width: min(100%, 680px);
    margin: 64px auto;
    padding: 48px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 40px rgb(15 23 42 / 8%);
}

.eyebrow {
    margin: 0 0 12px;
    color: #2563eb;
    font-weight: 700;
}

h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.5rem); }
.intro { font-size: 1.2rem; margin: 20px 0 8px; }
.note { color: #64748b; margin: 0; }

.site-header { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px max(24px, calc((100% - 1080px) / 2)); background: #fff; border-bottom: 1px solid #e2e8f0; }
.site-header a { color: #172033; text-decoration: none; margin-left: 14px; }
.site-header .brand { margin-left: 0; font-weight: 800; color: #2563eb; }
.inline { display: inline; }
.link-button { border: 0; padding: 0; margin-left: 14px; background: transparent; color: #172033; cursor: pointer; font: inherit; }
.card form { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-weight: 600; }
input, textarea, select { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
button { border: 0; border-radius: 8px; padding: 11px 16px; background: #2563eb; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.alert { padding: 12px 16px; border-radius: 8px; }
.alert.error { background: #fee2e2; color: #991b1b; }
.alert.success { background: #dcfce7; color: #166534; }
.auth-card { max-width: 460px; margin: 0 auto; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
.row form { display: inline; }
.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 18px; }
.product { padding: 24px; }
.product h2 { margin-top: 0; }
pre { padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: #f1f5f9; border-radius: 8px; }
.admin { width: min(100% - 32px, 800px); }