/* The backdrop carries the surface; the editor itself has no visible frame. */
body .beer-shelf-modal,
body #addBeerModal,
body #editBeerModal {
  background:radial-gradient(ellipse at 50% 42%,rgba(12,13,17,.93),rgba(8,10,14,.7) 55%,rgba(8,10,14,.52))!important;
  backdrop-filter:blur(22px) saturate(.8)!important;
  -webkit-backdrop-filter:blur(22px) saturate(.8)!important;
  padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  overscroll-behavior:contain;
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}
body .beer-shelf-modal {place-items:center;z-index:12060}
body #addBeerModal,body #editBeerModal {z-index:12060!important}
body .beer-shelf-modal .beer-shelf-modal__dialog,
body #addBeerModal>div,
body #editBeerModal>div {
  width:min(100%,560px);max-width:560px;
  max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff1cf;
}
body .beer-shelf-modal .beer-shelf-modal__head {border:0;padding:12px 18px}
body .beer-shelf-modal .beer-shelf-modal__head h1 {color:#ffd886;font-size:19px}
body .beer-shelf-modal .beer-shelf-modal__close {border:0;background:transparent;box-shadow:none}
body .beer-shelf-modal .modal-footer {border:0;background:transparent;backdrop-filter:none}
body .beer-shelf-modal .modal-scroll {padding-top:6px}
body .beer-shelf-modal .modal-fields input,
body .beer-shelf-modal .cs-trigger {border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.065);box-shadow:none}
body .beer-shelf-modal .modal-fields label {color:#c9bdac}
body .beer-shelf-modal .modal-fields {grid-template-columns:repeat(2,minmax(0,1fr))}
body .beer-shelf-modal .cs-trigger {white-space:nowrap}
body .beer-shelf-modal .modal-preview img[hidden] {display:none!important}
body .beer-shelf-modal .modal-actions button {white-space:nowrap;text-shadow:none}
body #addBeerModal>div,body #editBeerModal>div {padding:18px;overflow:auto;scrollbar-width:thin}
body #addBeerModal h3,body #editBeerModal h3 {color:#ffd886;font-size:19px;margin-bottom:18px}
body #addBeerModal input,body #editBeerModal input,
body #addBeerModal .cs-btn,body #editBeerModal .cs-btn,
body #addBeerModal>div>button,body #editBeerModal>div>button {
  border:1px solid rgba(255,255,255,.09);border-color:rgba(255,255,255,.09)!important;background:rgba(255,255,255,.065)!important;
  box-shadow:none;color:#fff1cf;min-width:0;
}
body #addBeerModal input,body #editBeerModal input {font-size:12px}
.beer-form-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.beer-form-fields label {display:flex;flex-direction:column;gap:5px;min-width:0;color:#c9bdac;font-size:9px}
.beer-form-fields input,.beer-form-fields .cs {margin:0!important;width:100%}
.beer-form-fields .cs-btn {font-size:11px;padding:9px 10px;min-height:39px}
.beer-form-fields .cs-label {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body #addBeerPhotoBtn,body #editBeerPhotoBtn {min-height:56px;white-space:nowrap}
body #addBeerModal>div>.flex:last-child,body #editBeerModal>div>.flex:last-child {position:sticky;bottom:-18px;padding:12px 0;background:linear-gradient(transparent,rgba(12,13,17,.92) 25%);margin-bottom:-12px;z-index:2}
body #addBeerModal>div>.flex:last-child button,body #editBeerModal>div>.flex:last-child button {white-space:nowrap;text-shadow:none;box-shadow:none;font-size:12px}
@media(max-width:430px){body .beer-shelf-modal .beer-shelf-modal__head {padding:12px 14px}body #addBeerModal>div,body #editBeerModal>div {padding:14px}body .beer-shelf-modal .modal-scroll {padding:6px 14px 12px}body .beer-shelf-modal .modal-footer {padding:8px 14px 10px}.beer-form-fields .cs-btn {font-size:10px}}
@media(max-width:430px){body .beer-shelf-modal .cs-trigger {font-size:10px;padding-inline:8px}}
@media(max-width:350px){body .beer-shelf-modal .cs-trigger {font-size:9px;padding-inline:6px}}