:root { color-scheme: light dark; --page: var(--tg-theme-bg-color, #f7f2ea); --surface: var(--tg-theme-secondary-bg-color, #fffdf9); --text: var(--tg-theme-text-color, #231d2c); --muted: var(--tg-theme-hint-color, #81798a); --line: color-mix(in srgb, var(--text) 12%, transparent); --violet: #6550bd; --soft: color-mix(in srgb, var(--violet) 14%, var(--surface)); --coral: #ed7464; font-family: Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--page); color: var(--text); }
button, input { font: inherit; }
.admin-shell { width: min(100%, 620px); min-height: 100dvh; margin: auto; padding: calc(14px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
.admin-shell > header { display: grid; grid-template-columns: 40px 1fr 40px; gap: 10px; align-items: center; }
.admin-shell > header a, .admin-shell > header button, .admin-editor header button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); text-decoration: none; }
.admin-shell > header div { text-align: center; }
.admin-shell > header span { color: var(--violet); font-size: 9px; font-weight: 750; letter-spacing: .16em; }
h1 { margin: 2px 0 0; font-size: 24px; } h2 { margin: 0; font-size: 18px; }
.intro { margin: 16px auto; max-width: 460px; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
.submission-section { margin: 18px 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 8px; }
.section-heading h2 { font-size: 15px; }
.section-heading span { min-width: 25px; padding: 4px 8px; border-radius: 999px; background: var(--soft); color: var(--violet); font-size: 10px; font-weight: 750; text-align: center; }
.catalog-tools { position: sticky; top: 0; z-index: 4; padding: 8px 0 10px; background: var(--page); }
.catalog-tools input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); font-size: 16px; }
.catalog-tools small { display: block; margin: 7px 4px 0; color: var(--muted); font-size: 10px; }
.admin-products { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: var(--surface); }
.admin-product { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 13px 15px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; }
.admin-product:last-child { border-bottom: 0; }
.admin-product span { display: grid; gap: 3px; min-width: 0; }
.admin-product strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.admin-product small { color: var(--muted); font-size: 9px; }
.admin-product b { align-self: center; font-size: 12px; }
.admin-product.submission { background: color-mix(in srgb, var(--violet) 5%, var(--surface)); }
.admin-backdrop { position: fixed; z-index: 10; inset: 0; background: rgba(23,18,31,.45); backdrop-filter: blur(3px); }
.admin-editor { position: fixed; z-index: 11; left: 50%; bottom: 0; width: min(100%, 620px); max-height: 95dvh; overflow-y: auto; transform: translateX(-50%); padding: 9px 16px calc(22px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--page); }
.handle { width: 42px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: var(--line); }
.admin-editor header { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; text-align: center; }
.admin-editor label { display: grid; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.admin-editor input { width: 100%; min-height: 45px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font-size: 16px; }
.nutrition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
fieldset { margin: 14px 0 0; padding: 0; border: 0; } legend { color: var(--muted); font-size: 10px; }
fieldset > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } fieldset label { position: relative; margin: 7px 0 0; }
fieldset input { position: absolute; opacity: 0; } fieldset span { min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; }
fieldset input:checked + span { border-color: var(--violet); background: var(--soft); color: var(--violet); }
.label-photo { margin: 14px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.label-photo img { display: block; width: 100%; max-height: 300px; object-fit: contain; }
.save, .remove, .reject { width: 100%; min-height: 48px; margin-top: 14px; border-radius: 15px; font-weight: 650; }
.save { border: 0; background: var(--violet); color: white; }
.remove, .reject { border: 1px solid var(--coral); background: transparent; color: var(--coral); }
.admin-error { margin: 10px 0; padding: 11px 12px; border-radius: 13px; background: color-mix(in srgb, var(--coral) 12%, var(--surface)); color: var(--coral); font-size: 11px; }
.loading { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; background: var(--page); color: var(--muted); font-size: 13px; }
.recipe-review-card { align-items: flex-start; }
.recipe-review-card > img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; }
.recipe-review-card p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; white-space: pre-line; }
.recipe-review-ingredients { display: grid; gap: 4px; margin: 8px 0 0; padding: 8px 10px; border-radius: 12px; background: var(--page); list-style: none; }
.recipe-review-ingredients li { font-size: 11px; line-height: 1.35; }
.recipe-report-card p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }