* { box-sizing: border-box; }
body { margin: 0; color: #1d2430; background: #f2f4f7; font-family: system-ui, sans-serif; }
.page { max-width: 1100px; margin: auto; padding: 2rem 1rem 4rem; }
header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1.5rem; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: .35rem; } header p, .help { color: #596477; }
.panel { background: white; border-radius: .75rem; padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 1px 3px #15233b18; }
.back-link, button { border: 0; border-radius: .45rem; background: #1769aa; color: white; font: inherit; padding: .7rem 1rem; text-decoration: none; cursor: pointer; }
.interval-form { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; } label { font-weight: 600; } input[type=number] { display: block; margin-top: .35rem; width: 9rem; padding: .65rem; border: 1px solid #aeb8c6; border-radius: .4rem; font: inherit; }
.drop-zone { min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .35rem; border: 2px dashed #7b90a9; border-radius: .6rem; color: #425267; cursor: pointer; text-align: center; }
.drop-zone.dragging { background: #e4f2ff; border-color: #1769aa; } .drop-zone small { color: #6c7889; } #file-input { display: none; }
.status { min-height: 1.5rem; margin: .8rem 0 0; } .status.error { color: #b42318; } .status.success { color: #087443; }
.image-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.image-card { position: relative; overflow: hidden; border: 1px solid #d7dce3; border-radius: .55rem; background: #fff; cursor: grab; } .image-card.dragging { opacity: .4; }
.image-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .image-name { padding: .55rem 2.6rem .55rem .55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.delete { position: absolute; top: .45rem; right: .45rem; padding: .25rem .55rem; background: #a91b1b; } .delete:hover { background: #7e1010; }
@media (max-width: 500px) { header { flex-direction: column; } }