* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#f7f3ea;
  color:#243128;
  font-family:system-ui
}
.w {
  width:min(1100px,calc(100% - 30px));
  margin:30px auto
}
h1,h2 {
  font-family:Georgia;
  color:#314638
}
.warn,.card {
  background:#fff;
  border-radius:16px;
  padding:14px;
  margin:10px 0
}
.warn {
  background:#fff1c9
}
.tabs {
  display:flex;
  gap:8px;
  margin:20px 0
}
.btn,.tabs button {
  border:0;
  border-radius:99px;
  padding:10px 15px;
  font-weight:700
}
.primary,.tabs .on {
  background:#314638;
  color:#fff
}
.panel {
  display:none
}
.panel.on {
  display:block
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.gallery-grid .card {
  margin:0
}
.grid {
  display:grid;
  grid-template-columns:105px 1fr;
  gap:12px
}
.thumb {
  width:105px;
  height:88px;
  object-fit:contain;
  background:#eee;
  border-radius:10px
}
input,textarea,select {
  width:100%;
  padding:9px;
  border:1px solid #ccc;
  border-radius:8px
}
label {
  display:block;
  font-weight:700;
  margin:7px 0 3px
}
.check {
  display:flex;
  align-items:center;
  gap:7px
}
.check input {
  width:auto;
  margin:0
}
.actions {
  display:flex;
  gap:7px;
  margin-top:10px;
  flex-wrap:wrap
}
.danger {
  background:#8f3535;
  color:#fff
}
.toast {
  position:fixed;
  right:20px;
  bottom:20px;
  padding:12px 16px;
  background:#314638;
  color:#fff;
  border-radius:10px;
  display:none
}
.toast.show {
  display:block
}
.toast.err {
  background:#8f3535
}
@media(max-width:800px) {
  .gallery-grid {
    grid-template-columns:1fr
  }
}
@media(max-width:550px) {
  .grid {
    grid-template-columns:1fr
  }
  .thumb {
    width:100%;
    height:180px
  }
}
button,.btn {
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease,background-color .12s ease
}
button:hover,.btn:hover {
  filter:brightness(1.06);
  box-shadow:0 5px 14px rgba(0,0,0,.14);
  transform:translateY(-1px)
}
button:active,.btn:active {
  transform:translateY(1px) scale(.98);
  box-shadow:0 2px 6px rgba(0,0,0,.16);
  filter:brightness(.96)
}
.gallery-toolbar {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:14px 0
}
.gallery-toolbar.bottom {
  justify-content:flex-end;
  margin-top:18px
}
.pic {
  position:relative
}
.pic.dragging {
  opacity:.45;
  outline:2px dashed #a0713c
}
.drag-handle {
  position:absolute;
  right:12px;
  top:9px;
  color:#a0713c;
  font-size:20px;
  cursor:grab;
  user-select:none
}
.drag-handle:active {
  cursor:grabbing
}
.select-label {
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 32px 9px 0
}
.select-label input {
  width:auto;
  margin:0
}
.has-unsaved #saveTop,.has-unsaved #saveBottom {
  box-shadow:0 0 0 3px rgba(160,113,60,.28)
}
.gallery-categories {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:14px 0 18px
}
.gallery-categories button {
  border:1px solid #31463826;
  border-radius:16px;
  background:#fff;
  color:#314638;
  padding:13px 16px;
  text-align:left;
  font:700 20px Georgia;
  cursor:pointer
}
.gallery-categories button small {
  display:block;
  margin-top:4px;
  color:#a0713c;
  font:500 12px system-ui
}
.gallery-categories button.on {
  background:#314638;
  color:#fff
}
.gallery-categories button.on small {
  color:#e3c89d
}
.pic-head {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  margin:-4px -2px 10px;
  padding:4px 2px 9px;
  border-bottom:1px solid #31463812;
  cursor:grab
}
.pic-head:active {
  cursor:grabbing
}
.drag-handle {
  position:static;
  font-size:18px
}
.filename {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px
}
.trash {
  border:0;
  background:transparent;
  color:#8f3535;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:17px;
  padding:0
}
.trash:hover {
  background:#8f353515
}
.move-dialog {
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  background:#0008;
  padding:20px
}
.move-dialog.open {
  display:flex
}
.move-panel {
  width:min(420px,100%);
  background:#f7f3ea;
  border-radius:18px;
  padding:22px;
  box-shadow:0 18px 50px #0004
}
.move-panel h3 {
  margin-top:0;
  font-family:Georgia;
  color:#314638
}
@media(max-width:650px) {
  .gallery-categories {
    grid-template-columns:1fr
  }
}