:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #191c20; background: #f5f6f7; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.eyebrow { margin: 0 0 8px; color: #cf1729; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.muted { color: #626b73; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border: 1px solid transparent; border-radius: 6px; background: white; color: #191c20; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.button:hover { filter: brightness(.95); }
.button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ee6070; outline-offset: 2px; }
.primary { background: #d7192b; color: white; }
.secondary { background: #1d2328; color: white; }
.subtle { border-color: #dce0e3; }
.danger-outline { border-color: #d91d31; color: #b51526; }
.site-link { display: inline-block; margin: 0 0 30px; color: #4c555e; font-weight: 700; }
.login-shell { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; }
.login-shell > * { width: min(100%, 420px); }
.login-panel { padding: 32px; border: 1px solid #e0e3e5; border-radius: 8px; background: white; box-shadow: 0 16px 42px rgba(14,20,28,.08); }
.login-panel img { display: block; width: 128px; height: 68px; object-fit: contain; object-position: left center; margin-bottom: 24px; }
h1, h2, h3, p { margin-top: 0; }
.login-panel h1 { font-size: 30px; margin-bottom: 7px; }
.login-panel .muted { margin-bottom: 25px; }
.login-panel label, .form-grid label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.login-panel label { margin-bottom: 16px; }
input:not([type=file]), select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #cbd2d7; border-radius: 5px; background: #fff; color: #191c20; }
.login-panel .button { width: 100%; margin-top: 8px; }
.alert, .success { padding: 12px 14px; border-radius: 5px; font-size: 14px; }
.alert { background: #fff0f1; border: 1px solid #ecabb2; color: #a11224; }
.success { background: #e7f5ee; border: 1px solid #91cfaf; color: #12643b; }
.admin-header { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; border-bottom: 1px solid #dce0e3; background: white; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 76px; height: 47px; object-fit: contain; }
.brand span { display: grid; gap: 3px; }
.brand strong { font-size: 14px; }
.brand small { color: #69727b; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions form { margin: 0; }
.admin-layout { display: grid; grid-template-columns: 248px minmax(0,1fr); min-height: calc(100vh - 72px); }
.sidebar { padding: 28px 16px; border-right: 1px solid #dce0e3; background: white; }
.sidebar h2 { margin: 0 12px 14px; font-size: 12px; color: #687179; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 3px; }
.category-link { min-height: 43px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 5px; color: #343c43; font-size: 13px; }
.category-link:hover { background: #f3f4f5; }
.category-link.active { background: #fce9eb; color: #ad1123; font-weight: 700; }
.category-link span { overflow-wrap: anywhere; }
.category-link b { font-size: 11px; color: #6c747b; }
.category-form { display: grid; gap: 9px; margin: 30px 4px 0; padding-top: 22px; border-top: 1px solid #e2e5e7; }
.category-form h3 { margin-bottom: 3px; font-size: 13px; }
.workspace { min-width: 0; width: min(100%, 1480px); padding: 32px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-heading h1 { margin-bottom: 8px; font-size: 29px; }
.page-heading .muted { margin-bottom: 0; font-size: 14px; }
.upload-panel { display: grid; gap: 21px; padding: 23px; border: 1px solid #dce0e3; border-radius: 7px; background: white; }
.upload-panel h2 { margin: 0; font-size: 18px; }
.upload-form { display: grid; gap: 18px; }
.file-pick { display: grid; justify-items: start; gap: 10px; min-height: 118px; padding: 20px; border: 2px dashed #b8c1c8; border-radius: 6px; background: #fafbfb; font-size: 14px; font-weight: 700; }
.file-pick input { max-width: 100%; font-size: 13px; }
.file-pick small { color: #69727b; font-size: 12px; font-weight: 400; }
.preview-list { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-list:empty { display: none; }
.preview-list img { width: 74px; height: 58px; object-fit: cover; border-radius: 4px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.optional { color: #7b848b; font-weight: 400; }
.upload-form > .button { justify-self: start; }
.library { margin-top: 32px; }
.library-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 17px; }
.library-heading h2 { margin: 0; font-size: 20px; }
.library-heading span { color: #6e777f; font-size: 13px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(235px,1fr)); gap: 14px; }
.photo-item { overflow: hidden; border: 1px solid #dce0e3; border-radius: 6px; background: white; }
.photo-item.is-hidden { opacity: .58; }
.photo-item > img { display: block; width: 100%; height: 172px; object-fit: cover; background: #e5e8ea; }
.photo-info { display: grid; gap: 14px; padding: 14px; }
.photo-info h3 { margin-bottom: 5px; font-size: 14px; overflow-wrap: anywhere; }
.photo-info span { color: #778088; font-size: 12px; }
.photo-info .button { min-height: 34px; width: 100%; font-size: 12px; }
.empty { padding: 22px; border: 1px dashed #cbd2d7; border-radius: 6px; color: #69727b; }
@media (max-width: 850px) { .admin-layout { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid #dce0e3; padding: 18px; } .sidebar nav { display: flex; overflow-x: auto; gap: 5px; } .category-link { flex: 0 0 auto; } .category-form { max-width: 300px; margin-top: 18px; } .workspace { padding: 24px 18px; } }
@media (max-width: 580px) { .admin-header { height: auto; min-height: 70px; padding: 10px 14px; } .brand img { width: 52px; } .brand strong { max-width: 120px; font-size: 12px; } .header-actions { gap: 4px; } .header-actions .button { padding: 7px 8px; font-size: 11px; } .page-heading { align-items: flex-start; flex-direction: column; } .page-heading h1 { font-size: 25px; } .upload-panel { padding: 16px; } .form-grid { grid-template-columns: 1fr; } .photo-grid { grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); } }