/* Administration: readable controls and a single-row navigation. */
.admin-header.admin-header-inline { display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px; align-items: center; gap: 18px; min-height: 108px; padding: 12px clamp(12px, 2vw, 36px); }
.admin-header-inline .admin-header-top { display: contents; }
.admin-header-inline .admin-brand { order: 1; flex: 0 0 88px; }
.admin-header-inline .admin-brand img { width: 88px; height: 66px; object-fit: contain; }
.admin-header-inline .admin-nav { order: 2; min-width: 0; align-items: stretch; gap: 8px; padding: 4px 2px 8px; border: 0; scrollbar-width: thin; scrollbar-color: #b5c9b7 transparent; }
.admin-header-inline .admin-nav::-webkit-scrollbar { display: block; height: 4px; }
.admin-header-inline .admin-nav::-webkit-scrollbar-thumb { background: #b5c9b7; border-radius: 4px; }
.admin-header-inline .admin-nav a { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; min-width: 78px; min-height: 72px; padding: 10px 12px; border: 1px solid #e2e9df; border-radius: 13px; background: #f8faf7; font-size: 14px; line-height: 1.2; white-space: nowrap; color: #48594d; transition: background .16s, border-color .16s, box-shadow .16s; }
.admin-header-inline .admin-nav a:first-of-type { margin-left: auto; }
.admin-header-inline .admin-nav a:last-of-type { margin-right: auto; }
.admin-header-inline .admin-nav .admin-preview-link { margin-left: 0; border-color: #cbdcc5; background: #f0f7ed; }
.admin-header-inline .admin-nav .admin-preview-link:first-of-type { margin-left: auto; }
.admin-header-inline .admin-nav a:hover { background: #eef6e9; border-color: #b8d0b0; color: #236337; box-shadow: 0 3px 9px #244a2910; }
.admin-header-inline .admin-nav a:focus-visible { outline: 2px solid #38804b; outline-offset: 2px; }
.admin-header-inline .admin-nav a.is-active { color: #1e592f; background: #e4f2de; border-color: #91bc83; box-shadow: inset 0 -3px 0 #3d8449, 0 3px 9px #244a2910; }
.admin-header-inline .admin-nav a::after { display: none; }
.admin-header-inline .admin-nav-icon { width: 25px; height: 25px; margin: 0; background: transparent; border-radius: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.admin-header-inline .admin-nav-divider { align-self: center; flex: 0 0 1px; height: 36px; margin: 0 5px; background: #d4dfd0; }
.admin-header-inline .admin-user { order: 3; justify-self: end; gap: 12px; }
.admin-header-inline .admin-user strong { font-size: 14px; }
.admin-header-inline .admin-user span { font-size: 13px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.admin-shell .field > label, .admin-shell .field input, .admin-shell .field select, .admin-shell .field textarea { font-size: 16px; }
.admin-shell .field-hint, .admin-shell .form-section-heading p, .admin-shell .form-save-hint, .admin-shell .publish-note p, .admin-shell .switch-row small { font-size: 14px; line-height: 1.55; }
.admin-shell .button { font-size: 15px; min-height: 44px; }
.admin-shell .button-small { font-size: 14px; }
.admin-shell .form-section-heading h2 { font-size: 20px; }
.admin-shell .rich-editor-toolbar button { min-height: 38px; font-size: 14px; }
.admin-shell .rich-editor-content { font-size: 16px; line-height: 1.7; }
.auth-form label, .auth-form input, .auth-form .button { font-size: 16px; }
.auth-security-note, .auth-form .field-hint { font-size: 14px; }
.gallery-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin-bottom: 18px; font-size: 14px; line-height: 1.5; color: #58675c; }
.gallery-summary strong { color: #236337; font-size: 15px; }
.photo-gallery .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: start; gap: 16px; }
.photo-gallery .gallery-item { padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 3px 12px #183c2007; min-width: 0; }
.gallery-photo { position: relative; overflow: hidden; border-radius: 10px; background: #f3f6f1; }
.photo-gallery .gallery-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #f3f6f1; }
.photo-status { position: absolute; top: 8px; left: 8px; padding: 5px 9px; border: 1px solid #dce5dc; border-radius: 7px; background: #ffffffed; color: #405046; font-size: 12px; font-weight: 750; }
.photo-status[data-state="new"] { background: #e6f4e9; color: #226137; border-color: #c2dfc7; }
.photo-status[data-state="edited"] { background: #fff3d8; color: #805010; border-color: #ebd8aa; }
.gallery-item-actions { display: grid; gap: 6px; }
.gallery-item-actions .button { padding: 8px; font-size: 14px; }
.gallery-remove { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; color: #a32f2f; cursor: pointer; font-size: 14px; font-weight: 650; }
.gallery-remove input { width: 17px; height: 17px; accent-color: #a32f2f; }
.gallery-item.is-removed { border-color: #e4b3b3; background: #fff6f6; }
.gallery-item.is-removed .gallery-photo { opacity: .4; }
.gallery-item.is-removed .gallery-remove { text-decoration: line-through; }
.gallery-filename { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: #59675d; }
.gallery-empty { padding: 28px 18px; margin-bottom: 18px; border-radius: 12px; background: #f6f8f4; text-align: center; color: #607064; font-size: 15px; }
.photo-gallery .file-drop { position: relative; min-height: 150px; gap: 8px; border: 2px dashed #bbcdb7; transition: background .15s, border-color .15s; }
.photo-gallery .file-drop:hover, .photo-gallery .file-drop.is-dragging { border-color: #38804b; background: #eef7eb; }
.photo-gallery .file-drop strong { font-size: 17px; }
.photo-gallery .file-drop span { font-size: 14px; line-height: 1.5; }
.photo-gallery .file-drop .gallery-add-icon { display: grid; place-items: center; justify-self: center; width: 36px; height: 36px; border-radius: 10px; color: #236337; background: #e7f1e2; font-size: 27px; }
.photo-gallery.is-enhanced [data-gallery-input] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.photo-gallery.is-enhanced .gallery-upload-field:focus-within .file-drop { outline: 2px solid #38804b; outline-offset: 3px; }
.photo-editor { width: min(1040px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #dce5db; border-radius: 22px; color: #203427; background: #fff; box-shadow: 0 24px 100px #071e2860; }
.photo-editor::backdrop { background: #102319bc; backdrop-filter: blur(5px); }
.photo-editor-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid #e4eae2; }
.photo-editor-header p { margin: 0 0 5px; color: #4e7751; font-size: 11px; letter-spacing: .12em; font-weight: 800; }
.photo-editor-header h2 { margin: 0; font-size: 24px; }
.photo-editor-close { border: 0; background: #f0f4ef; border-radius: 50%; width: 40px; height: 40px; font-size: 28px; cursor: pointer; }
.photo-editor-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; }
.photo-editor-workspace { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: #edf1ec; min-width: 0; overflow: hidden; }
.photo-editor-workspace > p { margin: 0; font-size: 13px; line-height: 1.5; color: #58685c; text-align: center; }
.photo-editor-stage { position: relative; overflow: hidden; flex-shrink: 0; background: repeating-conic-gradient(#e3e8df 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.photo-editor-stage canvas { display: block; width: 100%; height: auto; }
.photo-crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px #10231980; cursor: move; touch-action: none; background: linear-gradient(to right, transparent 33%, #ffffff50 33%, #ffffff50 33.3%, transparent 33.3%, transparent 66%, #ffffff50 66%, #ffffff50 66.3%, transparent 66.3%), linear-gradient(to bottom, transparent 33%, #ffffff50 33%, #ffffff50 33.3%, transparent 33.3%, transparent 66%, #ffffff50 66%, #ffffff50 66.3%, transparent 66.3%); }
.photo-crop-box:focus-visible { outline: 3px solid #80d274; outline-offset: -5px; }
.photo-crop-box i { position: absolute; width: 22px; height: 22px; border: 3px solid #fff; }
.photo-crop-box [data-corner="nw"] { top: -2px; left: -2px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.photo-crop-box [data-corner="ne"] { top: -2px; right: -2px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.photo-crop-box [data-corner="sw"] { bottom: -2px; left: -2px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.photo-crop-box [data-corner="se"] { bottom: -2px; right: -2px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.photo-crop-dimensions { color: #49624e; font-size: 13px; font-variant-numeric: tabular-nums; }
.photo-editor-controls { display: flex; flex-direction: column; gap: 20px; padding: 24px 20px; }
.photo-editor-controls label { display: grid; gap: 10px; font-size: 14px; font-weight: 700; }
.photo-editor-controls select { width: 100%; min-height: 44px; border: 1px solid #ccd8c9; border-radius: 8px; padding: 8px; background: #fff; font: inherit; }
.photo-editor-controls input[type="range"] { width: 100%; accent-color: #287140; cursor: pointer; }
.photo-editor-controls p { margin: 0; color: #657267; font-size: 13px; line-height: 1.6; }
.photo-control-label { font-size: 14px; font-weight: 700; margin-bottom: -10px; }
.photo-orientation { display: flex; flex-wrap: wrap; gap: 7px; }
.photo-orientation button { flex: 1 0 44%; padding: 10px 6px; min-height: 42px; border: 1px solid #d6e1d2; border-radius: 8px; background: #f8faf6; color: #285437; cursor: pointer; font: inherit; font-size: 14px; }
.photo-editor footer { display: flex; justify-content: flex-end; gap: 12px; padding: 18px 26px; border-top: 1px solid #e4eae2; }
.photo-editor .button { min-height: 44px; font-size: 15px; }
.photo-editor-error { margin: 0; padding: 0 24px; color: #a32f2f; font-size: 14px; }
.photo-editor-error:not(:empty) { padding-block: 12px; }
.photo-editor [hidden], .photo-gallery [hidden], .image-upload [hidden] { display: none !important; }
@media (max-width: 1650px) { .admin-header-inline .admin-user > div { display: none; } }
@media (min-width: 1651px) { .admin-header.admin-header-inline { grid-template-columns: 240px minmax(0, 1fr) 240px; } }
@media (max-width: 1100px) { .admin-header.admin-header-inline { gap: 10px; } .admin-header-inline .admin-nav a { padding-inline: 11px; } }
@media (max-width: 640px) {
    .admin-header.admin-header-inline { grid-template-columns: 50px minmax(0, 1fr) 50px; min-height: 90px; gap: 8px; padding: 8px; }
    .admin-header-inline .admin-brand { flex-basis: 50px; }
    .admin-header-inline .admin-brand img { width: 50px; height: 48px; }
    .admin-header-inline .admin-user .button { padding-inline: 9px; font-size: 13px; }
    .admin-header-inline .admin-nav a { min-height: 62px; font-size: 13px; }
    .photo-gallery .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .photo-gallery .gallery-item { padding: 7px; }
    .gallery-item-actions .button { font-size: 13px; }
    .photo-editor { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
    .photo-editor-body { grid-template-columns: 1fr; }
    .photo-editor-header { padding: 16px; }
    .photo-editor-header h2 { font-size: 21px; }
    .photo-editor-workspace { padding: 16px; }
    .photo-editor-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 16px; }
    .photo-control-label { display: none; }
    .photo-editor-controls p { grid-column: 1 / -1; }
    .photo-editor footer { position: sticky; bottom: 0; background: #fff; padding: 12px 16px; }
}
