:root{--ol-bg:#f6f7f8;--ol-card:#fff;--ol-border:#e6e7e9;--ol-text:#1f2937;--ol-muted:#6b7280;--ol-primary:#0d6efd;--ol-success:#22c55e;--ol-radius:16px}
html,body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.bg-body{background:var(--ol-bg)}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:8px;top:8px;background:#000;color:#fff;padding:.5rem .75rem;border-radius:.5rem}
.card-soft{background:var(--ol-card);border:1px solid var(--ol-border);border-radius:var(--ol-radius);box-shadow:0 1px 1px rgba(0,0,0,.02)}
.stepper{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.stepper .step{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--ol-border);border-radius:999px;background:#fff;color:var(--ol-muted);font-weight:600}
.stepper .step.active{border-color:var(--ol-primary);color:var(--ol-primary);background:rgba(13,110,253,.06)}
.stepper .step .num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid currentColor;font-size:.8rem}
.dragzone{border:2px dashed var(--ol-border);border-radius:12px;background:#fff;padding:2rem;text-align:center;transition:.2s ease}
.dragzone.dragover{border-color:var(--ol-primary);background:rgba(13,110,253,.05)}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;margin-top:1rem}
.preview-grid .thumb{position:relative;border:1px solid var(--ol-border);border-radius:12px;overflow:hidden;background:#fff}
.preview-grid .thumb img{width:100%;height:120px;object-fit:cover;display:block}
.preview-grid .thumb .btn-del{position:absolute;top:6px;right:6px}
.progress-thin{height:6px;border-radius:999px;overflow:hidden;background:#e5e7eb}.progress-thin .bar{height:100%;width:0%;background:var(--ol-primary);transition:width .2s}
.spinner-hero{display:inline-block;width:1.25rem;height:1.25rem;border-radius:50%;border:3px solid #cbd5e1;border-top-color:var(--ol-primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.city-card:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.06)}