/* /ps1/image-zone/style.css */
body { font-family: -apple-system, sans-serif; background: #f9fafb; margin: 0; padding: 20px; color: #333; }
.header { display: flex; justify-content: space-between; align-items: center; background: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; }
.header h2 { margin: 0; font-size: 18px; }

.tabs { display: flex; gap: 20px; margin-bottom: 15px; border-bottom: 1px solid #e5e7eb; }
.tab { padding: 10px 5px; cursor: pointer; color: #6b7280; font-weight: 500; }
.tab.active { color: #10b981; border-bottom: 2px solid #10b981; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; }
.card { background: white; border-radius: 8px; border: 1px solid #e5e7eb; padding: 10px; position: relative; text-align: center; }
.thumb { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; cursor: zoom-in; }
.thumb img { max-height: 100%; max-width: 100%; border-radius: 4px; }

.filename { font-size: 12px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px; color: #2563eb; cursor: pointer; }
.meta { font-size: 10px; color: #9ca3af; }
.dim-text { color: #10b981; font-weight: bold; }

button.primary { background: #10b981; color: white; border: none; font-weight: bold; }
.btn-delete { position: absolute; top: 5px; right: 5px; border: none; background: none; color: #ccc; cursor: pointer; font-size: 18px; }
.btn-delete:hover { color: #ef4444; }

/* Modal */
#rotate-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; }
.modal-content { background: white; padding: 20px; border-radius: 10px; width: 800px; text-align: center; }
.preview-stage { background: #eee; padding: 10px; border-radius: 6px; margin: 15px 0; height: 700px; display: flex; align-items: center; justify-content: center; }
#rotate-preview { max-width: 100%; max-height: 100%; transition: transform 0.3s; }
.modal-btns { display: flex; gap: 10px; justify-content: center; }

#upload-progress-container { display: none; background: white; border: 1px solid #e5e7eb; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.progress-bar-bg { background: #f3f4f6; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 10px; }
#progress-bar-fill { background: #10b981; width: 0%; height: 100%; transition: width 0.2s; }