:root{
  /* Tells the browser our light palette should drive its own native UI
     (scrollbars, <select> dropdown lists, checkboxes, date pickers,
     etc.) — without this, a browser/OS set to prefer dark mode renders
     those native bits dark even while our page is explicitly in light
     mode, which is exactly what made the site look "not fully white"
     even when the theme toggle was set to light. */
  color-scheme: light;
  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --surface-alt:#F3F3F1;
  --border:#E6E5E1;
  --border-strong:#D6D5CF;
  --ink:#1B1C1E;
  --ink-dim:#63656B;
  --ink-faint:#9A9C9E;
  --ink-solid:#1B1C1E;
  --accent:#E23E32;
  --accent-hover:#CB362B;
  --accent-bg:#FDECEA;
  --blue:#2F6FED;
  --blue-bg:#EBF1FE;
  --success:#1F9D62;
  --success-bg:#E9F8EF;
  --danger:#D42F2F;
  --danger-bg:#FBEAEA;
  --map-ocean:#FFFFFF;
  --map-land-fill:#E4E4DF;
  --map-land-stroke:#B7B7B0;
  --header-bg:rgba(250,250,248,0.92);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow-sm: 0 1px 2px rgba(20,20,15,0.05);
  --shadow-md: 0 6px 20px rgba(20,20,15,0.07);
  --shadow-lg: 0 16px 40px rgba(20,20,15,0.12);
}
/* Dark mode — same variable names, different values, so every
   component that already reads var(--bg)/var(--ink)/etc. picks this up
   automatically with zero per-component changes. --ink-solid, unlike
   --ink, deliberately stays a fixed dark color in both themes: a few
   components (the active filter pill, the upgrade banner, Scout's
   button) are solid-dark-with-white-text by design in both themes, and
   using --ink for that would flip them to a solid *white* background
   with white text in dark mode. */
html[data-theme="dark"]{
  color-scheme: dark;
  --bg:#121214;
  --surface:#1B1C1F;
  --surface-alt:#222226;
  --border:#2E2F33;
  --border-strong:#3A3B40;
  --ink:#F1F1EE;
  --ink-dim:#A8AAAE;
  --ink-faint:#75777C;
  --ink-solid:#2E2F33;
  --blue:#6C97FF;
  --blue-bg:#182449;
  --success:#3FCB86;
  --success-bg:#123122;
  --danger:#FF6B6B;
  --danger-bg:#3A1717;
  --map-ocean:#1B1C1F;
  --map-land-fill:#2C2D31;
  --map-land-stroke:#45464B;
  --header-bg:rgba(18,18,20,0.85);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.5);
}
*{box-sizing:border-box; margin:0; padding:0;}
/* iOS Safari zooms in on a double-tap by default; manipulation tells it
   to treat a double-tap as two ordinary taps instead (panning and pinch-
   zoom are unaffected). touch-action doesn't inherit by default though,
   so setting it on html alone only ever covered the (empty) html
   element's own hit area — every real tappable thing (cards, panels,
   buttons) was still on the browser's default 'auto' and free to
   double-tap-zoom, which is what made tapping a card look like it was
   "expanding to fill the screen". Setting it on body too and inheriting
   it down to every element actually gets the whole page covered. */
html,body{touch-action:manipulation;}
*, *::before, *::after{touch-action:inherit;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Archivo',sans-serif; font-weight:500; -webkit-font-smoothing:antialiased; line-height:1.4; transition:background-color .25s ease, color .25s ease;}
a{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Archivo Black', sans-serif; font-weight:400; letter-spacing:-0.01em;}
::selection{background:var(--accent); color:#fff;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit; background:var(--surface); border:1.5px solid var(--border-strong); color:var(--ink); border-radius:var(--radius-sm); padding:11px 13px; font-size:14.5px; width:100%; transition:border-color .15s, box-shadow .15s;}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg);}
::placeholder{color:var(--ink-faint);}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px;}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:40; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.headbar{display:flex; align-items:center; justify-content:space-between; height:68px;}
.logo{display:flex; align-items:center; gap:8px; font-family:'Archivo Black', sans-serif; font-size:19px; letter-spacing:-0.01em;}
.logo-mark{display:block; height:26px; width:auto;}
nav{display:flex; align-items:center; gap:4px;}
/* Base (desktop) look for the account-actions cluster — kept in the
   stylesheet rather than as an inline style on the element so the
   max-width:720px rule further down can actually override its
   `display` on mobile. An inline style attribute always wins over any
   stylesheet rule bar !important, so as long as this lived inline the
   mobile "hide until the hamburger opens it" rule could never take
   effect and the buttons stayed on-screen at all times. */
#headerActions{display:flex; align-items:center; gap:8px;}
.navlink{background:none; border:none; color:var(--ink-dim); font-size:14.5px; font-weight:700; padding:8px 14px; border-radius:var(--radius-sm); transition:all .15s;}
.navlink:hover{color:var(--ink); background:var(--surface-alt);}
.navlink.active{color:var(--ink); background:var(--surface-alt);}
.btn{border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink); padding:10px 18px; border-radius:var(--radius-sm); font-size:14px; font-weight:700; transition:all .15s; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.btn:hover{border-color:var(--ink-dim); background:var(--surface-alt);}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover);}
.btn-ghost{background:none; border-color:transparent;}
.btn-ghost:hover{border-color:var(--border-strong); background:var(--surface-alt);}
.btn-sm{padding:7px 14px; font-size:13px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn:disabled:hover{background:inherit; border-color:var(--border-strong);}

/* ---------- hero ---------- */
.hero{padding:64px 0 56px; border-bottom:1px solid var(--border);}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:52px; align-items:center;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:9px; margin-bottom:18px;}
.eyebrow::before{content:""; width:18px; height:1.5px; background:var(--accent);}
.hero h1{font-family:'Archivo Black', sans-serif; font-weight:400; font-size:52px; line-height:1.05; letter-spacing:-0.01em; color:var(--ink);}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero p.lede{margin-top:18px; font-size:16.5px; color:var(--ink-dim); max-width:480px; line-height:1.6;}
.stat-row{display:flex; gap:30px; margin-top:30px; flex-wrap:wrap;}
.stat-row div{}
.stat-row .n{font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--ink); font-weight:500; display:block;}
.stat-row .l{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.searchbar{margin-top:30px; display:flex; gap:10px; max-width:520px;}
.searchbar input{padding:13px 16px; font-size:15px; box-shadow:var(--shadow-sm);}

.hero-map-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden;}
.hero-map-card .map-caption{padding:12px 16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;}
.hero-map-card .map-caption span{font-size:12.5px; color:var(--ink-dim);}
.hero-map-card .map-caption .swatch{display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-faint);}

/* ---------- how it works ---------- */
.how-it-works{background:var(--surface-alt); border-bottom:1px solid var(--border); padding:36px 0;}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.how-step{display:flex; flex-direction:column; gap:6px;}
.how-num{font-family:'Archivo Black',sans-serif; font-size:15px; color:#fff; background:var(--accent); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
.how-title{font-weight:800; font-size:15.5px; color:var(--ink);}
.how-text{font-size:13.5px; color:var(--ink-dim); line-height:1.55;}
@media (max-width:720px){ .how-grid{grid-template-columns:1fr; gap:22px;} }

/* ---------- filter rail ---------- */
.filterbar{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:24px 0; border-bottom:1px solid var(--border);}
.pill{border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink-dim); font-size:13px; font-weight:700; padding:7px 14px; border-radius:20px; display:inline-flex; align-items:center; gap:6px; transition:all .15s;}
.pill:hover{border-color:var(--ink-dim); color:var(--ink);}
.pill.active{background:var(--ink-solid); border-color:var(--ink-solid); color:#fff;}
.filterbar select{width:auto; padding:7px 30px 7px 13px; font-size:13px; border-radius:20px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2363656B'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center;}
.filterbar .spacer{flex:1;}
.filterbar .count{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-faint);}

/* ---------- grid / cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(272px,1fr)); gap:22px; padding:32px 0 64px;}
.slider-wrap{overflow:hidden;}
.slider-grid{grid-template-columns:repeat(auto-fill, minmax(272px,1fr)); padding-bottom:8px; animation:viewFadeIn .3s cubic-bezier(.22,.8,.36,1) both;}
@keyframes slideInFromRight{ from{opacity:0; transform:translateX(28px);} to{opacity:1; transform:translateX(0);} }
@keyframes slideInFromLeft{ from{opacity:0; transform:translateX(-28px);} to{opacity:1; transform:translateX(0);} }
.slider-grid.slide-next{ animation:slideInFromRight .32s cubic-bezier(.22,.8,.36,1) both; }
.slider-grid.slide-prev{ animation:slideInFromLeft .32s cubic-bezier(.22,.8,.36,1) both; }
.slider-nav{display:flex; align-items:center; justify-content:center; gap:18px; padding-bottom:56px;}
.slider-arrow{min-width:96px; justify-content:center;}
.slider-pageinfo{font-size:12.5px; color:var(--ink-faint);}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; cursor:pointer; transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.thumb{height:156px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.thumb .icon-watermark{font-size:38px; opacity:.5;}
.thumb .country-tag{position:absolute; left:12px; bottom:12px; font-size:12px; font-weight:600; color:var(--ink); background:rgba(255,255,255,0.92); padding:4px 9px; border-radius:20px; display:flex; align-items:center; gap:5px;}
.thumb .photo-count-tag{position:absolute; right:12px; bottom:12px; font-size:11.5px; font-weight:700; color:var(--ink); background:rgba(255,255,255,0.92); padding:4px 9px; border-radius:20px; display:flex; align-items:center; gap:4px;}

.cat-cars{background:#FCF2E8;} .cat-cars .icon-watermark{color:#B5651D;}
.cat-portraits{background:#FBEEF8;} .cat-portraits .icon-watermark{color:#A6408C;}
.cat-architecture{background:#EAF2FB;} .cat-architecture .icon-watermark{color:#2F6FB0;}
.cat-nature{background:#EAF7EE;} .cat-nature .icon-watermark{color:#2F8F55;}
.cat-aerial{background:#EEEEFB;} .cat-aerial .icon-watermark{color:#5457C7;}
.cat-street{background:#FAF3E5;} .cat-street .icon-watermark{color:#9C6B1F;}
.cat-interiors{background:#FAEEF6;} .cat-interiors .icon-watermark{color:#9A4A83;}
.cat-night{background:#ECEDFA;} .cat-night .icon-watermark{color:#3F4399;}

.card-body{padding:16px; flex:1; display:flex; flex-direction:column; gap:10px;}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.card-title{font-family:'Archivo Black', sans-serif; font-size:21px; line-height:1.2; color:var(--ink);}
.rating{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-dim); white-space:nowrap; padding-top:3px;}
.rating.has-rating{color:var(--accent);}
.tags{display:flex; gap:6px; flex-wrap:wrap;}
.tag{font-size:11.5px; font-weight:700; color:var(--ink-dim); background:var(--surface-alt); padding:4px 9px; border-radius:6px;}
.tag.time{color:var(--blue); background:var(--blue-bg);}
.tag.time.warm{color:var(--accent); background:var(--accent-bg);}
.card-desc{font-size:13.5px; color:var(--ink-dim); line-height:1.55; flex:1;}
.card-foot{font-size:12px; color:var(--ink-faint); display:flex; justify-content:space-between; border-top:1px solid var(--border); padding-top:11px; align-items:center;}
.card-foot .authorlink{color:var(--ink-dim); font-weight:600;}
.card-foot .authorlink:hover{color:var(--accent);}
.card-like-row{display:flex; align-items:center; gap:4px;}
.like-btn{background:none; border:none; color:var(--ink-faint); font-size:13px; display:inline-flex; align-items:center; gap:4px; padding:2px 4px; border-radius:6px;}
.like-btn:hover{color:var(--accent);}
.like-btn.liked{color:var(--accent);}

.empty{padding:80px 20px; text-align:center; color:var(--ink-dim);}
.empty .display{font-size:26px; margin-bottom:8px; color:var(--ink);}

/* ---------- modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(20,20,18,0.5); backdrop-filter:blur(2px); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:44px 20px; overflow-y:auto;}
.modal{background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:580px; margin-bottom:44px; box-shadow:var(--shadow-lg);}
.modal.wide{max-width:720px;}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--border);}
.modal-head h2{font-family:'Archivo Black', sans-serif; font-size:26px; color:var(--ink);}
.modal-close{background:none; border:none; color:var(--ink-faint); font-size:22px; line-height:1; padding:4px 8px; border-radius:6px;}
.modal-close:hover{color:var(--ink); background:var(--surface-alt);}
.modal-body{padding:24px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px;}
.field-row{display:flex; gap:12px;}
.field-row .field{flex:1;}
.checkgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.check{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-dim); border:1.5px solid var(--border-strong); padding:9px 11px; border-radius:var(--radius-sm); cursor:pointer; transition:all .15s;}
.check input{width:auto; accent-color:var(--accent);}
.check.checked{border-color:var(--accent); color:var(--ink); background:var(--accent-bg);}
.helptext{font-size:12.5px; color:var(--ink-faint); margin-top:6px; line-height:1.5;}
.errtext{font-size:13px; color:var(--danger); margin-top:9px; background:var(--danger-bg); padding:9px 12px; border-radius:var(--radius-sm);}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:24px;}

/* ---------- world map component ---------- */
.worldmap-svg{width:100%; height:auto; display:block;}
/* transform-box:fill-box makes the hover scale grow from the pin's own
   centre rather than the SVG viewport's top-left corner, which is the
   default (and wrong-looking) transform origin for an SVG <g>. */
.map-pin-hit{cursor:pointer; transform-box:fill-box; transform-origin:center; transition:transform .12s ease;}
.map-pin-hit:hover, .map-pin-hit:focus-visible{transform:scale(1.18);}
.map-pin-hit:focus-visible{outline:none;}
.map-picker{border:1.5px solid var(--border-strong); border-radius:var(--radius-md); overflow:hidden; cursor:crosshair;}
.map-picker:hover{border-color:var(--accent);}
.map-readout{font-size:13px; color:var(--ink-dim); margin-top:9px; display:flex; align-items:center; gap:7px;}
.map-readout .val{color:var(--accent); font-weight:500;}
.map-static-wrap{border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
.coord-row{display:flex; gap:10px; margin-top:10px;}
.coord-row .field{flex:1; margin-bottom:0;}
.coord-row label{font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; font-weight:600; margin-bottom:5px;}
.coord-row input{font-family:'IBM Plex Mono',monospace; font-size:13.5px;}
.coord-apply-row{display:flex; gap:8px; margin-top:10px; align-items:center; flex-wrap:wrap;}
.coord-apply-row input{flex:1; min-width:180px; font-family:'IBM Plex Mono',monospace; font-size:13.5px;}

/* ---------- detail view ---------- */
.detail-hero{height:280px; position:relative; border-radius:var(--radius-lg); overflow:hidden;}
.detail-hero img{width:100%; height:100%; object-fit:cover;}
.detail-hero .meta-strip{position:absolute; bottom:0; left:0; right:0; padding:16px; display:flex; gap:8px; flex-wrap:wrap;}
.detail-hero .meta-strip .tag{background:rgba(255,255,255,0.94);}
.kv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:24px 0; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
.kv{background:var(--surface); padding:16px;}
.kv .l{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; font-weight:600;}
.kv .v{font-size:14.5px; color:var(--ink); margin-top:5px; font-weight:500;}
.section-title{font-family:'Archivo Black', sans-serif; font-size:22px; color:var(--ink); margin-bottom:12px;}
.location-section{margin:30px 0;}
.maplink{font-size:13px; margin-top:10px; display:inline-flex; align-items:center; gap:5px; color:var(--blue); font-weight:500;}
.review{border-top:1px solid var(--border); padding:16px 0;}
.review-head{display:flex; justify-content:space-between; font-size:13.5px;}
.review-head .who{font-weight:600;}
.review-head .who:hover{color:var(--accent);}
.review-head .stars{color:var(--accent); letter-spacing:1px;}
.review-body{font-size:13.5px; color:var(--ink-dim); margin-top:6px; line-height:1.55;}
.review-foot{display:flex; justify-content:space-between; align-items:center; margin-top:5px;}
.review-date{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-faint);}
.review-actions{display:flex; gap:12px;}
.review-action-btn{background:none; border:none; padding:0; font-size:11.5px; font-weight:700; color:var(--ink-faint); cursor:pointer;}
.review-action-btn:hover{color:var(--ink);}
.stars-input{display:flex; gap:5px; font-size:24px; cursor:pointer;}
.stars-input span{color:var(--border-strong); transition:color .1s;}
.stars-input span.on{color:var(--accent);}

.upload-drop{border:1.5px dashed var(--border-strong); border-radius:var(--radius-md); padding:26px; text-align:center; color:var(--ink-dim); font-size:13.5px; cursor:pointer; transition:all .15s; background:var(--surface-alt);}
.upload-drop:hover{border-color:var(--accent); background:var(--accent-bg);}
.upload-preview{width:100%; max-height:220px; object-fit:cover; border-radius:var(--radius-sm); margin-top:12px;}
.upload-preview-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:10px; margin-top:12px;}
.upload-preview-item{position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border);}
.upload-preview-item img{width:100%; height:100%; object-fit:cover; display:block;}
.upload-preview-remove{position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(20,20,18,0.65); color:#fff; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0;}
.new-photo-badge{position:absolute; bottom:5px; left:5px; font-size:9px; font-weight:800; letter-spacing:.04em; color:#fff; background:var(--accent); padding:2px 6px; border-radius:4px;}
.upload-preview-remove:hover{background:var(--danger);}
.gallery-strip{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:2px;}
.gallery-thumb{width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; border:2px solid transparent; flex-shrink:0; padding:0; background:none;}
.gallery-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-thumb.active{border-color:var(--accent);}
.gallery-thumb:hover{border-color:var(--border-strong);}
.moderation-box{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-dim); padding:13px 15px; background:var(--surface-alt); border-radius:var(--radius-sm); margin-top:16px;}
.moderation-box.ok{background:var(--success-bg); color:var(--success);}
.moderation-box.fail{background:var(--danger-bg); color:var(--danger);}
.spinner{width:14px; height:14px; border:2px solid var(--border-strong); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- pro / subscription / settings ---------- */
.pro-badge{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; letter-spacing:.03em; color:#fff; background:linear-gradient(135deg,var(--accent),#F2795A); padding:4px 9px; border-radius:20px; white-space:nowrap;}
.pro-badge-btn{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; letter-spacing:.03em; color:#fff; background:linear-gradient(135deg,var(--accent),#F2795A); border:none; padding:0 12px; border-radius:20px; white-space:nowrap;}
.pro-badge-btn:hover{filter:brightness(1.06); background:linear-gradient(135deg,var(--accent),#F2795A); border-color:transparent;}
.pro-badge.mini{font-size:9px; padding:2px 6px;}
.ribbon-pro{position:absolute; top:10px; left:10px; z-index:2;}
.gopro-btn{border-color:var(--accent); color:var(--accent);}
.gopro-btn:hover{background:var(--accent-bg); border-color:var(--accent);}

/* ---------- theme toggle ---------- */
.theme-toggle-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink-dim); padding:0; transition:all .15s ease;}
/* Hamburger menu button — hidden on desktop, shown only on phone (see
   the max-width:720px block below), where it replaces the horizontally
   scrolling row of nav tabs with a proper dropdown list. */
.mobile-nav-toggle{display:none; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; border-radius:8px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink); padding:0;}
.mobile-nav-toggle:active{background:var(--surface-alt);}
/* Three bars that morph into an X. Absolutely positioned within a fixed
   box so each bar's rotate/translate/fade is a plain transform+opacity
   transition — cheap to animate and automatically skipped by the
   prefers-reduced-motion rule near the bottom of this file (it zeroes
   out `transition` globally, so the open state just snaps instead). */
.hamburger{position:relative; width:18px; height:13px; display:inline-block;}
.hamburger-line{position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform .25s ease, opacity .2s ease, top .25s ease;}
.hamburger-line:nth-child(1){top:0;}
.hamburger-line:nth-child(2){top:5.5px;}
.hamburger-line:nth-child(3){top:11px;}
.headbar.mobile-menu-open .hamburger-line:nth-child(1){top:5.5px; transform:rotate(45deg);}
.headbar.mobile-menu-open .hamburger-line:nth-child(2){opacity:0;}
.headbar.mobile-menu-open .hamburger-line:nth-child(3){top:5.5px; transform:rotate(-45deg);}
.theme-toggle-btn:hover{border-color:var(--ink-dim); color:var(--ink); background:var(--surface-alt);}
.theme-toggle-btn:active{transform:scale(.9);}
.theme-icon{display:block;}
.theme-icon-moon{display:none;}
html[data-theme="dark"] .theme-icon-sun{display:none;}
html[data-theme="dark"] .theme-icon-moon{display:block;}
.danger-zone .btn:hover{background:var(--danger-bg); border-color:var(--danger);}

.upgrade-banner{background:var(--ink-solid); color:#fff;}
.upgrade-banner-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0; font-size:13.5px; flex-wrap:wrap;}
.upgrade-banner-actions{display:flex; align-items:center; gap:10px;}
.upgrade-banner .btn-primary{background:var(--accent); border-color:var(--accent);}
.banner-dismiss{background:none; border:none; color:rgba(255,255,255,0.65); font-size:19px; line-height:1; padding:3px 7px; border-radius:6px;}
.banner-dismiss:hover{color:#fff; background:rgba(255,255,255,0.12);}

.plan-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px;}
.plan-card{border:1.5px solid var(--border-strong); border-radius:var(--radius-lg); padding:24px; background:var(--surface); display:flex; flex-direction:column; gap:14px;}
.plan-card.pro{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg);}
.plan-name{font-weight:800; font-size:13px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.05em;}
.plan-card.pro .plan-name{color:var(--accent);}
.plan-price{font-family:'Archivo Black',sans-serif; font-size:32px; color:var(--ink);}
.plan-price span{font-family:'Archivo',sans-serif; font-size:13.5px; font-weight:600; color:var(--ink-faint);}
.plan-list{list-style:none; display:flex; flex-direction:column; gap:9px; font-size:13.5px; color:var(--ink-dim); flex:1; padding:0;}
.plan-list li{padding-left:20px; position:relative;}
.plan-list li::before{content:"✓"; position:absolute; left:0; color:var(--success); font-weight:700;}
@media (max-width:640px){ /* plan-grid stays 2 columns on phone now — sized down in the main mobile block below instead of stacking */ }

.settings-section{padding:20px 0; border-bottom:1px solid var(--border);}
.saved-list{display:flex; flex-direction:column; gap:8px;}
.saved-row{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; padding:10px 13px; background:var(--surface-alt); border-radius:var(--radius-sm);}
.swatch-row{display:flex; gap:10px; flex-wrap:wrap;}
.color-swatch{width:32px; height:32px; border-radius:50%; border:2.5px solid transparent; cursor:pointer; padding:0;}
.color-swatch.selected{border-color:var(--ink); box-shadow:0 0 0 2px var(--surface);}
.icon-swatch{width:36px; height:36px; border-radius:50%; border:2px solid var(--border-strong); background:var(--surface); cursor:pointer; padding:0; font-size:16px; display:flex; align-items:center; justify-content:center;}
.icon-swatch.selected{border-color:var(--ink); box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border-strong);}
.icon-swatch:hover{transform:scale(1.08);}
.icon-swatch:active{transform:scale(.94);}

.save-btn{position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; border:none; background:rgba(255,255,255,0.92); color:var(--ink-dim); font-size:16px; display:flex; align-items:center; justify-content:center; transition:all .15s; z-index:2;}
.save-btn:hover{color:var(--accent);}
.save-btn.saved{color:var(--accent);}
.detail-save{position:static; width:auto; height:auto; border-radius:20px; padding:7px 13px; background:var(--surface-alt); font-size:12.5px; font-weight:700; gap:6px;}

/* ---------- profile / people search ---------- */
.profile-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.avatar-circle{border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent-hover)); color:#fff; font-family:'Archivo Black',sans-serif; box-shadow:0 3px 10px rgba(20,20,15,0.12);}
.avatar-circle img{width:100%; height:100%; object-fit:cover; display:block;}
.avatar-circle.brand-logo{background:var(--surface); border:1px solid var(--border);}
.avatar-circle.brand-logo img{width:62%; height:62%; object-fit:contain;}
.avatar-circle.lg{width:64px; height:64px; font-size:24px;}
.avatar-circle.md{width:38px; height:38px; font-size:14px; box-shadow:none;}
.avatar-circle.sm{width:22px; height:22px; font-size:10px; box-shadow:none;}
.verified-badge{flex-shrink:0; vertical-align:-2px;}
.handle-btn{display:inline-flex; align-items:center; gap:7px;}
.profile-idrow{display:flex; align-items:center; gap:16px;}
.profile-stats{display:flex; gap:26px; margin-top:18px; flex-wrap:wrap;}
.profile-stats div{font-size:13px; color:var(--ink-dim);}
.profile-stats .n{font-family:'IBM Plex Mono',monospace; color:var(--ink); font-weight:600; margin-right:5px; font-size:14px;}
.profile-tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin:28px 0 22px;}
.profile-tab{background:none; border:none; padding:10px 4px; margin-right:24px; font-size:13.5px; font-weight:700; color:var(--ink-faint); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer;}
.profile-tab:hover{color:var(--ink);}
.profile-tab.active{color:var(--ink); border-bottom-color:var(--accent);}
.mini-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:16px;}
.mini-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; box-shadow:var(--shadow-sm);}
.mini-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.mini-thumb{height:88px; display:flex; align-items:center; justify-content:center; font-size:22px; position:relative;}
.mini-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.mini-body{padding:10px 11px;}
.mini-title{font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.3;}
.mini-sub{font-size:11px; color:var(--ink-faint); margin-top:4px;}
.follow-btn{white-space:nowrap;}
.follow-btn.following{border-color:var(--accent); color:var(--accent); background:var(--accent-bg);}
.people-result{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:10px; background:var(--surface); transition:box-shadow .15s ease, border-color .15s ease;}
.people-result:hover{box-shadow:var(--shadow-sm); border-color:var(--border-strong);}
.people-result-info{flex:1; display:flex; align-items:center; gap:12px; cursor:pointer; min-width:0;}

/* ---------- analytics (Recce official account) ---------- */
.analytics-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px; margin-bottom:32px;}
.analytics-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; box-shadow:var(--shadow-sm);}
.analytics-card-label{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; font-weight:600;}
.analytics-card-value{font-family:'Archivo Black',sans-serif; font-size:26px; color:var(--ink); margin-top:6px; line-height:1.1;}
.analytics-card-sub{font-size:11.5px; color:var(--ink-dim); margin-top:5px;}
.analytics-charts{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:34px;}
.analytics-chart-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow-sm);}
.bar-chart{display:flex; align-items:flex-end; gap:5px; height:120px; margin-top:14px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:6px; min-width:0;}
.bar-track{width:100%; height:100%; display:flex; align-items:flex-end;}
.bar-fill{width:100%; background:linear-gradient(180deg,var(--accent),var(--accent-hover)); border-radius:4px 4px 0 0; min-height:2px; transition:height .3s ease;}
.bar-label{font-size:9px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; white-space:nowrap;}
.rank-list{display:flex; flex-direction:column; gap:6px; margin-top:12px;}
.rank-row{display:flex; align-items:center; gap:12px; padding:10px 13px; background:var(--surface-alt); border-radius:var(--radius-sm); font-size:13.5px;}
.rank-num{color:var(--ink-faint); width:26px; flex-shrink:0;}
.rank-name{flex:1; font-weight:700; color:var(--ink);}
.rank-value{color:var(--ink-dim); font-size:12.5px;}
.cat-rows{display:flex; flex-direction:column; gap:9px; margin-top:12px;}
.cat-row{display:flex; align-items:center; gap:10px; font-size:13px;}
.cat-row-label{width:190px; flex-shrink:0; color:var(--ink-dim);}
.cat-row-track{flex:1; height:8px; background:var(--surface-alt); border-radius:4px; overflow:hidden;}
.cat-row-fill{height:100%; background:var(--accent); border-radius:4px;}
.cat-row-count{width:28px; text-align:right; color:var(--ink-faint);}
@media (max-width:720px){
  .analytics-charts{grid-template-columns:1fr;}
  .cat-row-label{width:140px; font-size:12px;}
}

/* ---------- reports queue ---------- */
.report-list{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.report-row{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; transition:opacity .15s ease;}
.report-row-top{display:flex; align-items:center; gap:10px;}
.report-reason{font-size:13px; font-weight:700; color:var(--ink);}
.report-row-target{margin-top:8px; font-size:14px; font-weight:600;}
.report-row-details{margin-top:6px; font-size:13px; color:var(--ink-dim); line-height:1.5;}
.report-row-foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);}
/* ---------- feedback & bug reports ---------- */
.feedback-type-pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.02em; padding:3px 9px; border-radius:20px;}
.feedback-bulkbar{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface-alt); border-radius:var(--radius-md); margin-bottom:16px; flex-wrap:wrap;}
.feedback-bulkbar label{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-dim); cursor:pointer;}
.feedback-row-check{display:flex; align-items:flex-start; gap:10px;}
.feedback-row-check input{width:auto; margin-top:3px; accent-color:var(--accent);}
.feedback-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; font-size:11.5px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace;}
.fix-prompt-textarea{width:100%; min-height:320px; font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.55; white-space:pre-wrap; resize:vertical;}
.feedback-thumb{width:100%; max-width:220px; border-radius:var(--radius-sm); border:1px solid var(--border); margin-top:10px; display:block;}
footer{border-top:1px solid var(--border); padding:36px 0 52px; margin-top:24px;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
footer .fnote{font-size:12.5px; color:var(--ink-faint); max-width:520px; line-height:1.6;}

/* ---------- Scout AI chat (Recce Pro perk) ---------- */
.chat-fab{position:fixed; right:22px; bottom:22px; z-index:80; display:flex; align-items:center; gap:9px; background:var(--ink-solid); color:#fff; border:none; border-radius:30px; padding:13px 20px 13px 16px; font-weight:800; font-size:14px; box-shadow:var(--shadow-lg); transition:transform .15s ease, background .15s ease;}
.chat-fab:hover{transform:translateY(-2px);}
.chat-fab:active{transform:scale(.96);}
.chat-fab-icon{width:18px; height:18px; flex-shrink:0;}
.chat-fab.open{background:var(--accent);}
.chat-panel{display:none; position:fixed; right:22px; bottom:88px; z-index:80; width:360px; max-width:calc(100vw - 44px); height:520px; max-height:calc(100vh - 130px); max-height:calc(100dvh - 130px); background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--border); flex-direction:column; overflow:hidden;}
.chat-panel:not([hidden]){display:flex;}
.chat-panel-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0;}
.chat-panel-title{font-weight:800; font-size:15px; display:flex; align-items:center; gap:7px;}
.chat-panel-sub{font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
.chat-messages{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px;}
.chat-msg{display:flex; flex-direction:column; gap:8px; max-width:88%;}
.chat-msg.user{align-self:flex-end; align-items:flex-end;}
.chat-msg.assistant{align-self:flex-start; align-items:flex-start;}
.chat-bubble{padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; white-space:pre-wrap;}
.chat-msg.assistant .chat-bubble{background:var(--surface-alt); color:var(--ink); border-bottom-left-radius:4px;}
.chat-msg.user .chat-bubble{background:var(--accent); color:#fff; border-bottom-right-radius:4px;}
.chat-suggestions{display:flex; flex-direction:column; gap:8px; width:100%;}
.chat-suggestions .mini-card{display:flex; align-items:center; gap:10px; width:100%;}
.chat-suggestions .mini-thumb{width:52px; height:52px; flex-shrink:0;}
.chat-suggestions .mini-body{padding:8px 10px 8px 0; flex:1; min-width:0;}
.chat-typing{display:flex; gap:4px; padding:13px 15px;}
.chat-typing span{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:chatTypingBounce 1.1s ease-in-out infinite;}
.chat-typing span:nth-child(2){animation-delay:.15s;}
.chat-typing span:nth-child(3){animation-delay:.3s;}
@keyframes chatTypingBounce{ 0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;} }
.chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); flex-shrink:0;}
.chat-input-row input{flex:1;}

@media (max-width:480px){
  .chat-fab-label{display:none;}
  .chat-fab{padding:14px; right:16px; bottom:16px;}
  .chat-panel{right:10px; left:10px; width:auto; bottom:80px; max-height:calc(100vh - 110px); max-height:calc(100dvh - 110px);}
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:42px;}
}
@media (max-width:720px){
  .stat-row{gap:22px;}
  .kv-grid{grid-template-columns:1fr;}
  .checkgrid{grid-template-columns:1fr;}
  /* Closed state is just logo + hamburger — one line, hamburger pinned
     to the corner via space-between with nothing else sharing that row.
     #headerActions used to sit permanently visible right under this row
     and would itself wrap onto 2–3 lines (avatar handle, PRO badge,
     Submit button, Log out all fighting for the same width), which was
     both the wasted vertical space and the "gaps around the hamburger"
     — it wasn't actually alone in a corner, it had a whole second
     control row jammed underneath it. Folding #headerActions into the
     same collapsible panel as nav (both shown together, together toggled
     by .headbar.mobile-menu-open) removes that second row entirely
     until the person actually asks to see it. */
  .headbar{flex-wrap:wrap; height:auto; padding:10px 0; row-gap:0; position:relative;}
  .logo{order:1;}
  .mobile-nav-toggle{display:inline-flex; order:1;}
  /* Kept in flex layout at all times (not display:none) so max-height,
     opacity and transform can actually transition — a display toggle
     can't be animated, it's just instantly one value or the other.
     max-height uses a generous fixed value rather than the real content
     height since that's unknown in CSS; padding/margin/border-top are
     left off the transition list so they snap rather than animate,
     which is fine since it happens while opacity is still fading in. */
  nav{order:2; display:flex; flex-direction:column; align-items:stretch; width:100%; overflow-x:visible; overflow-y:hidden; gap:2px; padding:0; margin-top:0; max-height:0; opacity:0; transform:translateY(-6px); transition:max-height .3s ease, opacity .2s ease, transform .22s ease;}
  #headerActions{order:3; width:100%; flex-direction:column; align-items:stretch; gap:8px; padding:0; margin-top:0; overflow:hidden; max-height:0; opacity:0; transform:translateY(-6px); transition:max-height .3s ease, opacity .2s ease, transform .22s ease;}
  #authArea{flex-direction:column; align-items:stretch; gap:8px; width:100%;}
  #authArea > *{width:100%; justify-content:center;}
  .headbar.mobile-menu-open nav{max-height:600px; opacity:1; transform:translateY(0); padding:10px 0 2px; border-top:1px solid var(--border); margin-top:10px;}
  .headbar.mobile-menu-open #headerActions{max-height:600px; opacity:1; transform:translateY(0); padding:10px 0 2px; border-top:1px solid var(--border);}
  .navlink{width:100%; text-align:left; padding:12px 14px; font-size:14.5px;}
  .field-row{flex-direction:column; gap:0;}
}
@media (max-width:640px){
  /* Denser "shrunk-down desktop" look on phone: two location cards per
     row, smaller everything, less scrolling — rather than the earlier
     approach of stacking every section into one tall column. */
  .wrap{padding:0 20px;}
  .logo{font-size:16px; gap:6px;}
  .logo-mark{height:20px;}
  .theme-toggle-btn{width:32px; height:32px;}
  .navlink{font-size:12px; padding:6px 9px;}
  .btn{padding:8px 14px; font-size:12.5px;}
  .btn-sm{padding:5px 10px; font-size:11px;}
  .pro-badge,.pro-badge-btn{font-size:9px; padding:3px 8px;}
  .pro-badge-btn{padding:0 9px;}
  .pro-badge.mini{font-size:8px; padding:2px 5px;}
  .verified-badge{width:12px; height:12px;}
  .avatar-circle.sm{width:18px; height:18px; font-size:8px;}
  .handle-btn{gap:5px;}
  #headerActions{gap:6px;}
  #authArea{gap:6px;}
  .hero{padding:26px 0 22px;}
  .eyebrow{font-size:10px; margin-bottom:12px;}
  .hero h1{font-size:24px; line-height:1.1;}
  .hero p.lede{font-size:13px; margin-top:12px;}
  .stat-row{margin-top:18px; gap:16px;}
  .stat-row .n{font-size:16px;}
  .stat-row .l{font-size:10.5px;}
  .hero-actions{margin-top:18px; flex-direction:column; align-items:stretch;}
  .searchbar{max-width:none; margin-top:0;}
  .searchbar input{padding:10px 13px; font-size:13.5px;}
  .hero-map-card .map-caption{padding:9px 12px;}
  .hero-map-card .map-caption span{font-size:11px;}

  .how-it-works{padding:20px 0;}
  .how-grid{gap:14px;}
  .how-title{font-size:13.5px;}
  .how-text{font-size:12px;}

  .filterbar{padding:14px 0; gap:6px;}
  .pill{font-size:11.5px; padding:5px 11px;}
  .filterbar select{font-size:11.5px; padding:5px 24px 5px 10px;}

  /* Two cards per row instead of one, each scaled down to match */
  .grid{grid-template-columns:repeat(2,1fr); gap:10px; padding:14px 0 30px;}
  .thumb{height:96px;}
  .thumb .icon-watermark{font-size:24px;}
  .thumb .country-tag{font-size:9px; padding:2px 6px; left:6px; bottom:6px;}
  .thumb .photo-count-tag{font-size:9px; padding:2px 6px; right:6px; bottom:6px;}
  .card-body{padding:9px; gap:5px;}
  .card-title{font-size:14px; line-height:1.15;}
  .rating{font-size:9.5px;}
  .tags{gap:4px;}
  .tag{font-size:8.5px; padding:2px 5px; border-radius:4px;}
  .card-desc{font-size:10.5px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .card-foot{font-size:9.5px; padding-top:7px; flex-wrap:wrap; gap:4px;}
  .like-btn{font-size:10.5px;}
  .slider-nav{gap:10px; padding-bottom:36px;}
  .slider-arrow{min-width:0; padding:7px 12px; font-size:12px;}
  .slider-pageinfo{font-size:11px;}

  /* align-items intentionally left at its base value (flex-start) here —
     stretch was forcing every modal, even a small two-button confirm
     dialog, to fill the entire screen height on phone, which is what
     made panels feel like they "take over" unexpectedly. Modals still
     go full-width below (via .modal, .modal.wide) so forms have room,
     they just size to their own content vertically instead of being
     force-stretched. */
  .overlay{padding:0;}
  .modal, .modal.wide{max-width:none; width:100%; margin-bottom:0; border-radius:0;}
  .modal-body{padding:14px;}
  .modal-head{padding:12px 14px;}
  .modal-head h2{font-size:19px;}
  .field{margin-bottom:13px;}
  .field label{font-size:12px;}

  .detail-hero{height:170px; border-radius:var(--radius-md);}
  .kv .l{font-size:10px;}
  .kv .v{font-size:13px;}
  .section-title{font-size:17px;}
  .display{letter-spacing:-0.005em;}

  .profile-idrow{flex-wrap:wrap; gap:10px;}
  .profile-head{gap:10px;}
  .avatar-circle.lg{width:48px; height:48px; font-size:18px;}
  .profile-stats{gap:16px; margin-top:12px;}
  .profile-stats div{font-size:11px;}
  .mini-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .mini-thumb{height:64px;}
  .mini-title{font-size:11px;}
  .mini-sub{font-size:9.5px;}

  /* Subscription plans: keep side by side, just smaller */
  .plan-grid{gap:10px; margin-top:18px;}
  .plan-card{padding:14px; gap:9px; border-radius:var(--radius-md);}
  .plan-name{font-size:11px;}
  .plan-price{font-size:22px;}
  .plan-price span{font-size:11px;}
  .plan-list{font-size:11px; gap:6px;}
  .plan-list li{padding-left:16px;}

  .analytics-grid{grid-template-columns:repeat(2,1fr); gap:8px;}
  .analytics-card{padding:11px 12px;}
  .analytics-card-value{font-size:19px;}
  .analytics-card-label{font-size:9.5px;}
  .analytics-card-sub{font-size:10px;}
}

/* ---------- intro animation ---------- */
#introOverlay{position:fixed; inset:0; z-index:9999; background:#141416; display:flex; align-items:center; justify-content:center; overflow:hidden; clip-path:circle(150% at 50% 50%); animation:irisClose .7s cubic-bezier(.76,0,.24,1) .9s forwards;}
.intro-flash{position:absolute; inset:0; background:#fff; opacity:0; animation:flashPulse .35s ease .65s forwards;}
.intro-logo{position:relative; display:flex; align-items:center; gap:12px; opacity:0; transform:scale(.8); animation:introLogoIn .45s cubic-bezier(.34,1.56,.64,1) forwards, introLogoOut .25s ease .65s forwards;}
.intro-logo .logo-mark{height:52px; filter:drop-shadow(0 0 22px var(--accent));}
.intro-word{font-family:'Archivo Black',sans-serif; font-size:34px; color:#fff; letter-spacing:-0.01em;}
@keyframes introLogoIn{ to{opacity:1; transform:scale(1);} }
@keyframes introLogoOut{ to{opacity:0; transform:scale(1.06);} }
@keyframes flashPulse{ 0%{opacity:0;} 45%{opacity:.95;} 100%{opacity:0;} }
@keyframes irisClose{ to{clip-path:circle(0% at 50% 50%);} }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
.intro .eyebrow{animation:fadeInUp .55s ease both; animation-delay:1.05s;}
.intro h1{animation:fadeInUp .6s ease both; animation-delay:1.15s;}
.intro p.lede{animation:fadeInUp .6s ease both; animation-delay:1.25s;}
.intro .stat-row{animation:fadeInUp .6s ease both; animation-delay:1.35s;}
.intro .hero-actions{animation:fadeInUp .6s ease both; animation-delay:1.45s;}
.intro-map{animation:fadeInUp .7s ease both; animation-delay:1.2s;}

/* ---------- view transitions & tactile feedback ---------- */
@keyframes viewFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.fade-in{ animation:viewFadeIn .28s cubic-bezier(.22,.8,.36,1) both; }
#profileTabBody{ animation:viewFadeIn .22s ease both; }

.btn, .save-btn, .like-btn, .pill, .color-swatch, .follow-btn, .navlink, .profile-tab, .check{ transition:all .15s ease; }
.btn:active:not(:disabled){ transform:scale(.96); }
.save-btn:active, .like-btn:active{ transform:scale(1.22); }
.pill:active{ transform:scale(.95); }
.color-swatch{ transition:transform .15s ease, border-color .15s ease; }
.color-swatch:hover{ transform:scale(1.08); }
.color-swatch:active{ transform:scale(.94); }
.like-btn{ transform-origin:center; }
.save-btn{ transform-origin:center; }

.saved-row{ transition:opacity .18s ease, transform .18s ease; }
.card{ transition:transform .18s ease, box-shadow .18s ease; }
.mini-card{ transition:transform .15s ease, box-shadow .15s ease; }
.mini-card:hover{ box-shadow:var(--shadow-sm); }
.review{ animation:viewFadeIn .25s ease both; }

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  #introOverlay{display:none !important;}
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}