:root { --ink:#17202e; --muted:#697386; --line:#e5e9f0; --surface:#fff; --canvas:#08090c; --accent:#ff4757; --accent-dark:#e63a49; }
* { box-sizing:border-box; }
body { min-width:320px; color:var(--ink); background:#f4f6f9; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.app-shell { max-width:1280px; }
.card-heading p { margin:0; color:var(--muted); }
.editor-card,.preview-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 34px rgba(20,31,48,.06); }.editor-card,.preview-card { padding:1.35rem; }
.card-heading { display:flex; align-items:center; justify-content:flex-start; gap:1rem; margin-bottom:1.6rem; }.card-heading h2 { margin:0; font-size:1.05rem; font-weight:750; }.card-heading p { margin-top:.18rem; font-size:.8rem; }.heading-icon { display:grid; width:2.55rem; height:2.55rem; place-items:center; color:var(--accent-dark); background:#fff0f2; border-radius:.7rem; }
.form-label { font-size:.84rem; font-weight:700; }.form-control,.input-group-text { border-color:#dfe4ec; }.form-control:focus { border-color:#ff8792; box-shadow:0 0 0 .22rem rgba(255,71,87,.12); }.input-group-text { color:var(--muted); background:#fafbfd; }.time-zone { font-size:.77rem; font-weight:750; }.form-text { color:var(--muted); font-size:.74rem; } fieldset { min-width:0; }
.upload-control { display:grid; grid-template-columns:2rem 1fr 1rem; align-items:center; gap:.7rem; width:100%; padding:.75rem; color:#475467; cursor:pointer; background:#fafbfd; border:1px dashed #cfd7e3; border-radius:.7rem; transition:.18s ease; }.upload-control:hover { color:#c82d3b; background:#fff7f8; border-color:#ff8b96; }.upload-icon { display:grid; width:2rem; height:2rem; place-items:center; color:var(--accent-dark); background:#fff0f2; border-radius:.45rem; }.upload-control strong,.upload-control small { display:block; }.upload-control strong { font-size:.78rem; }.upload-control small { margin-top:.08rem; color:var(--muted); font-size:.68rem; }.upload-arrow { font-size:.78rem; }.btn-remove-photo { margin-top:.55rem; padding:0; color:#a63843; font-size:.73rem; background:transparent; border:0; }.btn-remove-photo:hover { text-decoration:underline; }
.location-list { display:grid; gap:.55rem; }.btn-location { display:grid; grid-template-columns:1.1rem 1fr 1rem; align-items:center; gap:.7rem; width:100%; padding:.78rem .85rem; color:#475467; text-align:left; background:#fff; border:1px solid #e1e6ee; border-radius:.7rem; transition:.18s ease; }.btn-location:hover { border-color:#ff9ba4; background:#fffafb; }.btn-location.active { color:#c82d3b; background:#fff4f5; border-color:#ff7784; box-shadow:0 0 0 3px rgba(255,71,87,.08); }.check-icon { display:none; font-size:.76rem; }.btn-location.active .check-icon { display:block; }
.btn-export { padding:.83rem 1rem; color:#fff; background:var(--accent); border:0; font-weight:750; }.btn-export:hover,.btn-export:focus { color:#fff; background:var(--accent-dark); }.btn-export i { margin-right:.4rem; }.export-status { min-height:1.25rem; margin-top:.7rem!important; color:var(--muted); font-size:.77rem; text-align:center; }.export-status.error { color:#bd2735; }
.preview-stage { padding:.65rem; background:#edf0f5; border-radius:.95rem; }
/* Output template: 4:3 photo with a fixed GeoTag anchored to the bottom. */
.geo-canvas { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; color:#fff; background:var(--canvas); isolation:isolate; container-type:inline-size; }.photo-base { position:absolute; inset:0; background:radial-gradient(ellipse at 20% 72%,rgba(255,255,255,.05) 0,transparent 23%),radial-gradient(ellipse at 78% 22%,rgba(255,255,255,.035) 0,transparent 29%),repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.042) 0 1px,transparent 1px 5px),#111316; }
.uploaded-photo { position:absolute; inset:0; z-index:0; display:none; width:100%; height:100%; object-fit:cover; object-position:center center; image-orientation:from-image; }.geo-canvas.has-upload .uploaded-photo { display:block; }
/* Dedicated 80% transparent background: it covers the information card only, never the photo. */
.overlay-black-80 { position:absolute; z-index:1; bottom:8%; left:31.5%; right:14.5%; height:22.8%; background:rgba(18,20,23,.62); border:1px solid rgba(255,255,255,.10); border-radius:1.05cqw 0 1.05cqw 1.05cqw; }
.watermark-brand { position:absolute; z-index:2; right:14.5%; bottom:30.8%; display:flex; align-items:center; justify-content:center; width:16.2%; height:7.1%; overflow:hidden; background:rgba(18,20,23,.62); border:1px solid rgba(255,255,255,.10); border-bottom:0; border-radius:1.52cqw 1.52cqw 0 0; }.watermark-brand img { display:block; width:88%; height:64%; object-fit:contain; }.watermark-fallback { display:none; align-items:center; gap:.35em; color:#fff; font-size:1.35cqw; font-weight:500; }.watermark-brand.is-fallback .watermark-fallback { display:flex; }.watermark-brand.is-fallback img { display:none; }.watermark-fallback i { display:grid; width:1.35em; height:1.35em; place-items:center; color:#ffdc3f; background:#2a96d6; border-radius:.2em; font-size:.84em; }
.tag-layout { position:absolute; z-index:2; bottom:8%; left:13.7%; right:14.5%; height:22.8%; display:flex; align-items:stretch; gap:2%; } /* The map and caption are deliberately separated by a fixed photo-relative gap. */
.map-container { flex:0 0 22.8%; align-self:stretch; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:.78cqw; }.map-container img { display:block; width:100%; height:100%; object-fit:fill; }.tag-details { flex:1; min-width:0; padding:1.08cqw 1.1cqw .58cqw 1.1cqw; font-family:Roboto,Arial,Helvetica,sans-serif; text-shadow:0 1px 1px rgba(0,0,0,.12); }.tag-details p { margin:0; font-weight:400; letter-spacing:.02em; }.city-line { display:flex; align-items:center; gap:.33em; font-size:2.95cqw; line-height:1.14; white-space:nowrap; }.address-line { margin-top:.27em!important; font-size:1.58cqw; line-height:1.34; }.coordinate-line,.date-time-line,.note-line { margin-top:.23em!important; font-size:1.58cqw; line-height:1.25; white-space:nowrap; }.note-line { margin-top:.39em!important; }.flag-id { display:block; width:auto; height:.78em; object-fit:contain; border-radius:.08em; box-shadow:0 .02em .1em rgba(0,0,0,.3); }
@media (max-width:575.98px) { .app-shell { padding-right:.85rem; padding-left:.85rem; }.editor-card,.preview-card { padding:1rem; border-radius:14px; }.preview-stage { padding:.35rem; }.overlay-black-80 { left:27.2%; right:5%; bottom:5.3%; height:25%; }.tag-layout { left:5%; right:5%; bottom:5.3%; height:25%; gap:2%; }.watermark-brand { right:5%; bottom:30.3%; } }