.card { margin-bottom: 20px; }
.card h3, .card-title { margin-top: 0; }
.text-muted { color: #888; font-size: 13px; }
.login-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: #f5f7fb; }
.login-box { background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.08); width: 100%; max-width: 380px; }
.login-box h1 { font-size: 22px; margin-bottom: 20px; text-align: center; }
.login-box .field { margin-bottom: 16px; }
.login-box input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; }
.login-attempt-hint { font-size: 13px; }
.captcha-field { margin-bottom: 16px; }
.captcha-label { display: block; margin-bottom: 6px; font-size: 13px; color: #555; }
.captcha-row { display: flex; gap: 8px; align-items: center; }
.captcha-row input { flex: 1; min-width: 0; }
.captcha-img { border: 1px solid #ddd; border-radius: 6px; cursor: pointer; flex-shrink: 0; background: #fff; }
.captcha-refresh { margin-top: 6px; padding: 0; border: none; background: none; color: #33cabb; font-size: 12px; cursor: pointer; }
.captcha-refresh:hover { text-decoration: underline; }
form.is-locked { opacity: .65; pointer-events: none; }
.sidebar-main .nav-drawer a .mdi { font-size: 18px; width: 22px; margin-right: 8px; text-align: center; vertical-align: -2px; }

.upload-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; }
.upload-field label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #333; }
.upload-field .form-control { width: 100%; height: 34px; font-size: 13px; }
.text-danger { color: #f96868; }
.upload-zone { border: 2px dashed #d0d0d0; border-radius: 10px; padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; background: #fafafa; }
.upload-zone:hover, .upload-zone.dragover { border-color: #33cabb; background: #f0fffd; }
.upload-zone-inner { pointer-events: none; }
.upload-icon { font-size: 48px; color: #33cabb; line-height: 1; }
.upload-progress { margin-top: 16px; }
.upload-status { margin-top: 8px; font-size: 13px; }
.upload-results { margin-top: 20px; }

.result-item { border: 1px solid #eee; border-radius: 8px; padding: 16px; margin-bottom: 12px; display: flex; gap: 16px; align-items: flex-start; background: #fff; }
.result-item.fail { border-color: #fcc; background: #fff8f8; }
.result-thumb { width: 64px; height: 64px; max-width: 100px; max-height: 40px; object-fit: contain; border-radius: 4px; flex-shrink: 0; background: #f0f0f0; }
.result-body { flex: 1; min-width: 0; }
.result-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; word-break: break-all; }
.result-meta { font-size: 12px; margin-bottom: 8px; }
.result-error { color: #f96868; font-size: 13px; }
.link-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.link-row .form-control { flex: 1; min-width: 0; font-size: 12px; height: 30px; padding: 4px 8px; }
.link-row .btn { flex-shrink: 0; }
.btn-copy.copied { background: #33cabb; border-color: #33cabb; color: #fff; }

.images-page { max-width: 100%; }
.images-total { margin-bottom: 16px; }
.site-section { margin-bottom: 36px; }
.site-section-title { font-size: 20px; font-weight: 800; color: #1a1a1a; margin: 0 0 18px; letter-spacing: .02em; }
.site-empty { margin: 8px 0 0; color: #999; font-size: 13px; }
.sites-table { text-align: center; font-size: 13px; margin-bottom: 0; }
.sites-table thead th { text-align: center; vertical-align: middle !important; white-space: nowrap; background: #fafafa; }
.sites-table tbody td { vertical-align: middle !important; }
.sites-col-actions { width: 140px; }
.sites-actions-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px !important; }
.sites-actions-single .btn { width: 88px; margin: 0; }
.images-list-table { font-size: 13px; }
.images-thumb-cell { padding: 6px !important; width: 120px; }
.images-thumb-img { max-height: 40px; max-width: 100px; border-radius: 4px; vertical-align: middle; object-fit: contain; }
.images-url-cell { max-width: 280px; text-align: left !important; padding: 8px 10px !important; }
.images-url-cell .form-control { font-size: 12px; height: 30px; padding: 4px 8px; }

@media (max-width: 768px) {
    .upload-form-grid { grid-template-columns: 1fr; }
    .result-item { flex-direction: column; }
    .result-thumb { width: auto; height: auto; max-width: 100px; max-height: 40px; }
}