:root {
  --bg: #06141d;
  --surface: #0e2530;
  --surface-2: #0b1e28;
  --ink: #eaf6f8;
  --muted: #86aab5;
  --cyan: #2dd7e6;
  --cyan-dim: rgba(45, 215, 230, .22);
  --amber: #ffb648;
  --border: rgba(94, 214, 230, .22);
  --radius: 1.1rem;
  --glow: 0 0 0 1px rgba(45,215,230,.32), 0 0 26px rgba(45,215,230,.22);
  --font-display: 'Rajdhani', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--cyan); text-decoration: none; }
img { max-width: 100%; }

/* ---- nav ---- */
.ax-nav { position: sticky; top: 0; z-index: 30; background: rgba(6,20,29,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.ax-nav-inner { max-width: 1100px; margin: 0 auto; padding: .9rem 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.ax-brand { display: inline-flex; align-items: center; }
.ax-brand img { display: block; width: 7.2rem; height: auto; }
.ax-nav-links { display: flex; gap: 1.25rem; font-size: .92rem; font-weight: 600; }
.ax-nav-links a { color: var(--muted); }
.ax-nav-links a:hover { color: var(--cyan); }
.ax-nav-links a.ax-nav-donate { color: #04141a; background: var(--amber); padding: .4rem 1rem; border-radius: 999px; font-weight: 700; }
.ax-nav-links a.ax-nav-donate:hover { color: #04141a; filter: brightness(1.08); }

.ax-flash { max-width: 1100px; margin: 1rem auto 0; padding: .8rem 1.1rem; border-radius: .7rem; font-size: .92rem; }
.ax-flash-danger { background: rgba(255,80,80,.12); border: 1px solid rgba(255,80,80,.35); color: #ffb0b0; }
.ax-flash-success { background: rgba(45,215,230,.1); border: 1px solid var(--border); color: var(--cyan); }

/* ---- admin (Bootstrap-driven) ---- */
body.ax-admin { background: #f4f7f8; color: #16262c; }
body.ax-admin .ax-nav { background: #06141d; }
body.ax-admin .ax-main { color: #16262c; }
body.ax-admin .card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ================= public pages ================= */
.ax-hero { max-width: 720px; margin: 0 auto; padding: 2.6rem 1.25rem 1rem; text-align: center; }
.ax-hero .eyebrow { color: var(--cyan); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; margin: 0 0 .6rem; }
.ax-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 0 0 .7rem; }
.ax-hero p { color: var(--muted); line-height: 1.6; margin: 0; }

.ax-tour-grid { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; display: grid; gap: 1.25rem; }
.ax-tour-card { display: block; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; transition: transform .2s ease, box-shadow .2s ease; }
.ax-tour-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.4), var(--glow); }
.ax-tour-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; background-color: var(--surface-2); }
.ax-tour-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,20,29,.15) 0%, rgba(6,20,29,.9) 100%); }
.ax-tour-body { position: relative; z-index: 1; padding: 1.4rem 1.4rem 1.6rem; }
.ax-tour-body .loc { color: var(--cyan); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ax-tour-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: .3rem 0 .5rem; }
.ax-tour-body p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0; }
.ax-empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }

/* ---- tour detail ---- */
.ax-tour-header { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem 1rem; }
.ax-tour-header .loc { color: var(--cyan); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ax-tour-header h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4.5vw, 2.2rem); margin: .4rem 0 .8rem; }
.ax-tour-header p { color: var(--muted); line-height: 1.6; }

.ax-scan-cta { display: block; max-width: 720px; margin: 1rem auto; padding: 1.1rem; text-align: center; background: var(--cyan); color: #04141a; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; border-radius: 999px; box-shadow: var(--glow); }
.ax-scan-cta:hover { color: #04141a; transform: translateY(-2px); }

.ax-stop-list { max-width: 720px; margin: 1.5rem auto 4rem; padding: 0 1.25rem; display: grid; gap: .9rem; }
.ax-stop-item { display: flex; gap: .9rem; align-items: center; padding: .8rem; border-radius: .9rem; border: 1px solid var(--border); background: var(--surface); }
.ax-stop-thumb { width: 64px; height: 64px; border-radius: .6rem; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.ax-stop-thumb-placeholder { width: 64px; height: 64px; border-radius: .6rem; background: var(--surface-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.4rem; }
.ax-stop-item .txt { flex: 1; min-width: 0; }
.ax-stop-item h4 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 700; }
.ax-stop-item p { margin: 0; color: var(--muted); font-size: .85rem; }
.ax-stop-num { color: var(--cyan); font-family: var(--font-display); font-weight: 700; font-size: .85rem; width: 1.4rem; text-align: center; flex-shrink: 0; }
.ax-discovered-count { max-width: 720px; margin: .5rem auto 0; padding: 0 1.25rem; color: var(--muted); font-size: .85rem; text-align: center; }

/* ---- scan screen ---- */
.ax-scan-wrap { position: fixed; inset: 0; background: #000; z-index: 10; }
.ax-scan-video { width: 100%; height: 100%; object-fit: cover; }
.ax-scan-topbar { position: absolute; top: 0; left: 0; right: 0; padding: 1rem; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); z-index: 2; }
.ax-scan-back { color: #fff; font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: .4rem; }
.ax-scan-status { position: absolute; top: 4.2rem; left: 0; right: 0; text-align: center; color: #fff; font-size: .9rem; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,.6); padding: 0 1rem; }
.ax-scan-reticle { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.ax-scan-reticle .box { position: relative; width: min(60vw, 280px); height: min(60vw, 280px); }
.ax-scan-reticle .corner { position: absolute; width: 32px; height: 32px; border-color: rgba(45,215,230,.75); transition: border-color .25s ease, box-shadow .25s ease; }
.ax-scan-reticle .tl { top: 0; left: 0; border-top: 3px solid; border-left: 3px solid; border-radius: 8px 0 0 0; }
.ax-scan-reticle .tr { top: 0; right: 0; border-top: 3px solid; border-right: 3px solid; border-radius: 0 8px 0 0; }
.ax-scan-reticle .bl { bottom: 0; left: 0; border-bottom: 3px solid; border-left: 3px solid; border-radius: 0 0 0 8px; }
.ax-scan-reticle .br { bottom: 0; right: 0; border-bottom: 3px solid; border-right: 3px solid; border-radius: 0 0 8px 0; }
.ax-scan-reticle.is-locked .corner { border-color: var(--cyan); box-shadow: 0 0 24px rgba(45,215,230,.8); }
.ax-scan-sweep { position: absolute; left: 0; right: 0; height: 40%; top: -40%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(45,215,230,0) 0%, rgba(45,215,230,.35) 50%, rgba(45,215,230,0) 100%); opacity: 0; }
.ax-scan-sweep.is-sweeping { animation: axSweep 1.4s linear infinite; opacity: 1; }
@keyframes axSweep { 0% { top: -40%; } 100% { top: 100%; } }
.ax-lock-flash { position: absolute; inset: 0; z-index: 4; background: var(--cyan); opacity: 0; pointer-events: none; }
.ax-lock-flash.is-flashing { animation: axFlash .5s ease-out; }
@keyframes axFlash { 0% { opacity: 0; } 15% { opacity: .35; } 100% { opacity: 0; } }
.ax-scan-start-overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(6,20,29,.92); text-align: center; padding: 2rem; }
.ax-scan-start-overlay h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 0; }
.ax-scan-start-overlay p { color: var(--muted); max-width: 320px; margin: 0; }
.ax-scan-start-overlay p.tip { font-size: .82rem; color: var(--cyan); opacity: .85; }
.ax-scan-start-error { color: #ffb0b0; background: rgba(255,80,80,.12); border: 1px solid rgba(255,80,80,.4); border-radius: .6rem; padding: .7rem 1rem; max-width: 320px; font-size: .88rem; font-weight: 600; }
.ax-btn { display: inline-block; padding: .9rem 2rem; border-radius: 999px; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; background: var(--cyan); color: #04141a; box-shadow: var(--glow); font-family: var(--font-display); }
.ax-btn:disabled { background: var(--surface-2); color: var(--muted); box-shadow: none; cursor: not-allowed; }

.ax-card-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: linear-gradient(180deg, rgba(14,37,48,.82), rgba(6,20,29,.94)); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-radius: 1.4rem 1.4rem 0 0; border: 1px solid rgba(45,215,230,.4); border-bottom: none; box-shadow: 0 0 40px rgba(45,215,230,.2), 0 -10px 40px rgba(0,0,0,.5); transform: translateY(105%); transition: transform .35s cubic-bezier(.2,.8,.3,1); max-height: 78vh; overflow: hidden; display: flex; flex-direction: column; }
.ax-card-sheet.is-open { transform: translateY(0); }
.ax-card-sheet-inner { padding: 0 1.4rem 2rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.ax-card-sheet .grabber { width: 40px; height: 4px; background: rgba(45,215,230,.4); border-radius: 4px; margin: .7rem auto 1rem; flex-shrink: 0; }
.ax-card-sheet > .ax-keep-scanning { width: calc(100% - 2.8rem); margin: 0 1.4rem 1rem; flex-shrink: 0; text-align: center; }
.ax-card-sheet::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(6,20,29,.85)); border-radius: 0 0 1.4rem 1.4rem; }
.ax-card-sheet img.cover { width: 100%; max-height: 220px; object-fit: cover; border-radius: .8rem; margin-bottom: 1rem; box-shadow: 0 0 0 1px rgba(45,215,230,.25); }
.ax-card-sheet h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 .6rem; opacity: 0; transform: translateY(6px); animation: axMaterialize .4s ease-out .15s forwards; }
.ax-card-sheet p.desc { color: var(--muted); line-height: 1.6; margin: 0 0 1rem; opacity: 0; transform: translateY(6px); animation: axMaterialize .4s ease-out .25s forwards; }
@keyframes axMaterialize { to { opacity: 1; transform: translateY(0); } }
.ax-card-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.ax-card-links a { padding: .5rem 1rem; border-radius: 999px; background: var(--cyan-dim); border: 1px solid rgba(45,215,230,.3); font-size: .85rem; font-weight: 600; }
.ax-card-sheet .media-slot { margin-bottom: 1rem; }
.ax-card-sheet .media-slot video, .ax-card-sheet .media-slot iframe { width: 100%; aspect-ratio: 16/9; border-radius: .8rem; border: none; box-shadow: 0 0 0 1px rgba(45,215,230,.25); }
.ax-card-sheet .media-slot audio { width: 100%; }
.ax-card-sheet .audio-slot { display: flex; align-items: center; gap: .6rem; background: var(--cyan-dim); border: 1px solid rgba(45,215,230,.3); border-radius: .8rem; padding: .8rem 1rem; }
.ax-card-sheet .audio-slot .icon { font-size: 1.3rem; flex-shrink: 0; }

/* ---- no-camera stop detail page ---- */
.ax-stop-detail { max-width: 640px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.ax-stop-detail img { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.2rem; }
.ax-stop-detail h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; margin: 0 0 .8rem; }
.ax-stop-detail p { color: var(--muted); line-height: 1.7; }

@media (max-width: 700px) { .ax-nav-links a { font-size: .85rem; } }

body.ax-scan-mode { overflow: hidden; }
body.ax-scan-mode .ax-nav, body.ax-scan-mode .ax-flash { display: none; }
body.ax-scan-mode .ax-main { padding: 0; }