*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #f7f7f5; color: #1f2933; }
a { color: #0b5cad; }
a:hover { color: #084a8a; }

.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid #e4e7eb; }
.brand { font-weight: 700; font-size: 1.2rem; color: #1f2933; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; min-width: 0; }
.inline-form { display: inline; margin: 0; }

.page { width: 100%; max-width: 30rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; flex: 1; }
.page-wide { max-width: 60rem; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: .5rem 0 1rem; }
.muted { color: #52606d; }

.form { display: grid; gap: 1rem; margin: 1rem 0; }
.field { display: grid; gap: .3rem; }
.field label { font-weight: 600; }
.field input { width: 100%; max-width: 100%; padding: .7rem .75rem; font: inherit; border: 1px solid #9aa5b1; border-radius: .5rem; background: #fff; }
.field input:focus { outline: 3px solid #b3d4f5; border-color: #0b5cad; }
.field input[type="file"] { padding: .45rem; font-size: .95rem; }
.field input[type="checkbox"],
.field input[type="radio"] { width: 1.15rem; height: 1.15rem; margin: .2rem .5rem 0 0; padding: 0; border: 0; border-radius: .25rem; background: transparent; accent-color: #0b5cad; flex: 0 0 auto; }
.field input[type="checkbox"]:focus,
.field input[type="radio"]:focus { outline: 3px solid #b3d4f5; outline-offset: 2px; }
.field label:has(input[type="checkbox"]),
.field label:has(input[type="radio"]) { display: flex; align-items: flex-start; font-weight: 500; line-height: 1.45; }
.field-help { font-size: .9rem; color: #52606d; }
.field-error { font-size: .9rem; color: #a40000; }

.button { display: inline-block; padding: .75rem 1.1rem; font: inherit; font-weight: 600; text-align: center; text-decoration: none; color: #fff; background: #0b5cad; border: 0; border-radius: .5rem; cursor: pointer; }
.button:hover { background: #084a8a; color: #fff; }
.button-small { padding: .4rem .8rem; }
.form .button { width: 100%; }
.link-button { padding: 0; font: inherit; color: #0b5cad; background: none; border: 0; text-decoration: underline; cursor: pointer; }

.flash { padding: .75rem 1rem; border-radius: .5rem; margin: 0 0 1rem; }
.flash-success { background: #e3f4e8; color: #1a5e2c; }
.flash-error { background: #fde8e8; color: #8a1c1c; }
.flash-info { background: #e6f0fa; color: #0b3d6e; }

.site-footer { padding: 1rem; text-align: center; font-size: .9rem; color: #52606d; border-top: 1px solid #e4e7eb; }

@media (min-width: 40rem) {
    .site-header { padding: 1rem 2rem; }
    .page { padding-top: 2.5rem; }
}

.filters { display: grid; gap: .75rem; margin: 1rem 0 1.5rem; padding: 1rem; background: #fff; border: 1px solid #e4e7eb; border-radius: .6rem; }
.filters .field input, .filters .field select { width: 100%; padding: .55rem .6rem; font: inherit; border: 1px solid #9aa5b1; border-radius: .45rem; background: #fff; }
.filter-row { display: grid; gap: .75rem; }
.filters .button { justify-self: start; }
.result-count { margin: 0 0 .75rem; }

.product-grid { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.product-card { padding: 1rem; background: #fff; border: 1px solid #e4e7eb; border-radius: .6rem; }
.product-type { margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #52606d; }
.product-title { font-size: 1.15rem; margin: 0 0 .35rem; }
.product-title a { text-decoration: none; }
.product-title a:hover { text-decoration: underline; }
.product-meta { margin: .35rem 0; font-size: .9rem; color: #52606d; }
.product-price { margin: .6rem 0 0; font-weight: 700; }
.product-price-large { font-size: 1.5rem; }
.empty-state { padding: 2rem 1rem; text-align: center; color: #52606d; background: #fff; border: 1px dashed #cbd2d9; border-radius: .6rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.lead { font-size: 1.1rem; margin: .25rem 0 1rem; }
.product-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1rem 0; }
.product-facts dt { font-weight: 600; }
.product-facts dd { margin: 0; }
.product-description { white-space: normal; }

@media (min-width: 40rem) {
    .filter-row { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
    .filter-row { grid-template-columns: repeat(4, 1fr); }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}

.product-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .45rem; margin: 0 0 .6rem; background: #e4e7eb; }
.product-cover-large { margin-bottom: 1rem; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: #fff; }
.data-table th, .data-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid #e4e7eb; vertical-align: top; font-size: .95rem; }
.badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #e4e7eb; color: #3e4c59; }
.badge-published { background: #e3f4e8; color: #1a5e2c; }
.badge-admin_review { background: #fdf3e0; color: #8a5a10; }
.badge-rejected, .badge-suspended { background: #fde8e8; color: #8a1c1c; }
.stack { display: grid; gap: 1.25rem; }
.panel { padding: 1rem; background: #fff; border: 1px solid #e4e7eb; border-radius: .6rem; }
.panel h2 { margin-top: 0; font-size: 1.1rem; }
.form textarea, .panel textarea { width: 100%; max-width: 100%; min-height: 6rem; padding: .7rem .75rem; font: inherit; border: 1px solid #9aa5b1; border-radius: .5rem; resize: vertical; }
.form select, .panel select { width: 100%; max-width: 100%; padding: .7rem .75rem; font: inherit; border: 1px solid #9aa5b1; border-radius: .5rem; background: #fff; }
.field textarea:focus, .field select:focus,
.form textarea:focus, .form select:focus,
.panel textarea:focus, .panel select:focus,
.filters .field select:focus,
.day-title-form input:focus { outline: 3px solid #b3d4f5; border-color: #0b5cad; }
.field input:disabled, .field textarea:disabled, .field select:disabled,
.form textarea:disabled, .form select:disabled,
.panel textarea:disabled, .panel select:disabled { background: #f0f2f4; color: #52606d; cursor: not-allowed; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #a40000; }
.field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus, .field select[aria-invalid="true"]:focus { outline-color: #f3b4b4; }
.form-row { display: grid; gap: 1rem; }
.button-secondary { background: #fff; color: #0b5cad; border: 1px solid #0b5cad; }
.button-secondary:hover { background: #eef5fc; color: #084a8a; }
.button-danger { background: #a40000; }
.button-danger:hover { background: #870000; }
.inline-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }

.file-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .95rem; }

.footer-links a { margin: 0 .5rem; color: #52606d; }
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
.legal h3 { font-size: 1rem; margin: 1.25rem 0 .4rem; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin: .3rem 0; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .95rem; }
.checklist li { position: relative; padding-left: 1.5rem; }
.checklist li::before { position: absolute; left: 0; font-weight: 700; }
.checklist-done { color: #1a5e2c; }
.checklist-done::before { content: "\2713"; }
.checklist-todo { color: #8a5a10; }
.checklist-todo::before { content: "\25CB"; }
details.panel > summary { font-weight: 600; cursor: pointer; }
details.panel[open] > summary { margin-bottom: .75rem; }

.password-wrap { position: relative; display: block; }
.password-wrap input { width: 100%; padding-right: 3rem; }
.password-toggle { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; color: #52606d; background: none; border: 0; border-radius: .4rem; cursor: pointer; }
.password-toggle:hover { color: #0b5cad; background: #eef5fc; }
.password-toggle:focus-visible { outline: 3px solid #b3d4f5; }

.badge-goal-active { background: #e6f0fa; color: #0b3d6e; }
.badge-goal-achieved { background: #e3f4e8; color: #1a5e2c; }
.badge-goal-abandoned { background: #e4e7eb; color: #3e4c59; }
.goal-countdown { margin-left: .35rem; font-weight: 700; color: #0b3d6e; }
.goal-late { margin-left: .35rem; font-weight: 700; color: #a40000; }

.badge-plan-active { background: #e6f0fa; color: #0b3d6e; }
.badge-plan-completed { background: #e3f4e8; color: #1a5e2c; }
.badge-plan-abandoned { background: #e4e7eb; color: #3e4c59; }
.plan-today { font-size: 1.15rem; font-weight: 600; margin: .25rem 0 .35rem; }
.plan-progress { width: 100%; height: 1rem; margin: .25rem 0 .5rem; }
.plan-behind { font-weight: 700; color: #8a5a10; }
.plan-ontrack { font-weight: 700; color: #1a5e2c; }
.plan-row-today td { background: #f0f6fd; }

.day-title-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.day-title-form input[type="text"] { flex: 1 1 14rem; min-width: 9rem; padding: .35rem .5rem; font: inherit; border: 1px solid #9aa5b1; border-radius: .35rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }