:root {
  --primary:#2563EB; --primary-dark:#1D4ED8; --primary-soft:#EAF1FD;
  --bg:#F3F7FD; --fg:#0F172A; --muted:#64748B; --card:#fff; --border:#E2E8F0;
  --ok:#15803D; --ok-bg:#DCFCE7; --amber:#B45309; --amber-bg:#FEF3C7;
  --grey:#475569; --grey-bg:#E2E8F0; --err:#B91C1C; --err-bg:#FEE2E2;
  --radius:12px; --shadow:0 4px 18px rgba(15,23,42,.07);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 "Noto Sans Thai", system-ui, sans-serif; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2 { line-height:1.3; margin:0 0 8px; }
h2 { font-size:1.1rem; }
.icon { flex:none; vertical-align:middle; }
.muted { color:var(--muted); }
.small-text { font-size:.85rem; }
.center { text-align:center; }

/* top bar */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 24px; background:var(--card); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; color:var(--fg); }
.brand:hover { text-decoration:none; }
.topbar nav { display:flex; align-items:center; gap:16px; }
/* top-bar links: icon + a highlight that GLIDES to the selected link (nav.js); hover = a different, lighter effect */
.nav-link { position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; color:var(--fg); font-size:.9rem; font-weight:500; transition:color .25s, transform .3s cubic-bezier(.2,1.5,.3,1); }
.user-chip { display:flex; align-items:center; gap:8px; font-size:.9rem; }
.avatar { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--primary-soft); color:var(--primary); font-weight:600; }
form.inline { display:inline; margin:0; }
button.link { background:none; border:0; padding:0; color:var(--muted); font:inherit; font-size:.85rem; cursor:pointer; }
button.link:hover { color:var(--fg); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border:1px solid var(--primary); border-radius:8px; background:var(--primary); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.btn:hover { background:var(--primary-dark); border-color:var(--primary-dark); text-decoration:none; }
.btn.small { padding:8px 16px; font-size:.85rem; }
.btn.block { width:100%; }
.btn.outline { background:var(--card); color:var(--primary); }
.btn.outline:hover { background:var(--primary-soft); }

.container { max-width:1080px; margin:0 auto; padding:24px 20px 48px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }

/* home */
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center; padding:32px 0; }
.hero h1 { font-size:2.2rem; font-weight:700; }
.lead { color:var(--muted); font-size:1.05rem; margin:12px 0 24px; }
.hero-art { position:relative; min-height:300px; }
.hero-art > img { width:100%; border-radius:var(--radius); display:block; }
.route-card { position:absolute; right:0; top:8%; width:240px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:8px 12px; }
.hero-art.no-img { background:linear-gradient(135deg,#dbe8fb,#eef4fd); border-radius:var(--radius); }
.hero-art.no-img .route-card { right:auto; left:50%; transform:translateX(-50%); top:50%; margin-top:-90px; }
.route-row { display:flex; align-items:center; gap:12px; padding:8px 0; }
.route-row + .route-row { border-top:1px solid var(--border); }
.route-row > span:nth-child(2) { flex:1; line-height:1.3; }
.maps-card { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:8px; }
.maps-card > div:nth-child(2) { flex:1; min-width:220px; }
.coords { display:grid; grid-template-columns:auto 1fr; gap:2px 16px; margin:0; font-size:.9rem; }
.coords dt { color:var(--muted); } .coords dd { margin:0; font-variant-numeric:tabular-nums; }
.actions { display:flex; gap:12px; flex-wrap:wrap; }

/* chips */
.chip { display:inline-flex; align-items:center; gap:4px; padding:2px 12px; border-radius:999px; font-size:.78rem; font-weight:600; white-space:nowrap; }
.chip.ok { color:var(--ok); background:var(--ok-bg); }
.chip.amber { color:var(--amber); background:var(--amber-bg); }
.chip.grey { color:var(--grey); background:var(--grey-bg); }
.chip.red { color:var(--err); background:var(--err-bg); }

/* auth pages */
body.auth { min-height:100vh; background:#EAF1FB; }
body.auth .topbar { background:rgba(255,255,255,.85); backdrop-filter:blur(6px); }
body.auth .container { display:grid; place-items:center; padding-top:48px; }
.auth-card { width:100%; max-width:440px; background:var(--card); border-radius:16px; box-shadow:0 12px 40px rgba(15,23,42,.12); padding:32px; }
.auth-card.wide { max-width:520px; }
.auth-card h1 { text-align:center; font-size:1.6rem; margin-bottom:20px; }
.auth-card label { display:block; font-weight:600; font-size:.9rem; margin-bottom:16px; }
.auth-card label .small-text { font-weight:400; }
.auth-card p.center { margin:20px 0 0; font-size:.9rem; }
.field { display:flex; align-items:center; gap:12px; margin-top:8px; padding:0 12px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--muted); }
.field:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.field input { flex:1; min-width:0; border:0; outline:0; padding:12px 0; background:transparent; color:var(--fg); font:inherit; font-weight:400; }
.eye { background:none; border:0; padding:4px; color:var(--muted); cursor:pointer; display:grid; }
.alert { display:flex; align-items:center; gap:8px; margin:0 0 16px; padding:12px 12px; border-radius:8px; background:var(--err-bg); color:var(--err); font-size:.9rem; }
.roles { border:0; padding:0; margin:0 0 20px; min-width:0; }
.roles legend { font-weight:600; font-size:.9rem; padding:0; margin-bottom:8px; }
.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.role-card { margin:0 !important; position:relative; cursor:pointer; }
.role-card input { position:absolute; opacity:0; }
.role-body { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:104px; padding:12px; text-align:center; border:1.5px solid var(--border); border-radius:10px; font-weight:500; color:var(--muted); background:#fff; }
.role-body .small-text { font-weight:400; }
.tick { position:absolute; top:8px; right:8px; display:none; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--primary); color:#fff; }
.role-card input:checked + .role-body { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); }
.role-card input:checked + .role-body .tick { display:grid; }
.role-card input:focus-visible + .role-body { box-shadow:0 0 0 3px rgba(37,99,235,.25); }

/* error page */
.error-page { text-align:center; padding:32px 0; }
.error-art { max-width:380px; width:100%; }
.error-code { font-size:5rem; font-weight:700; color:var(--primary); line-height:1.1; }

/* dashboard */
.app { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 51px); }
.sidebar { background:var(--card); border-right:1px solid var(--border); padding:16px 12px; }
.sidebar nav { display:flex; flex-direction:column; gap:4px; }
.sidebar a { display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:8px; color:var(--grey); font-size:.92rem; }
.sidebar a:hover { text-decoration:none; }
.sidebar a.active { background:var(--primary-soft); color:var(--primary); font-weight:600; }
.app-main { padding:24px 28px 48px; min-width:0; }
.sample-note { display:inline-block; margin:0 0 16px; padding:2px 12px; border-radius:999px; background:var(--amber-bg); color:var(--amber); font-size:.78rem; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.stat { display:flex; align-items:center; gap:16px; }
.stat-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#fff; }
.stat-icon.blue { background:var(--primary); } .stat-icon.amber { background:#F59E0B; } .stat-icon.green { background:#22A559; }
.stat-num { font-size:1.8rem; font-weight:700; line-height:1.2; } .stat-num small { font-size:.85rem; font-weight:400; color:var(--muted); }
.dash-grid { display:grid; grid-template-columns:1.7fr 1fr; gap:16px; }
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:.85rem; }
.trip-list { list-style:none; margin:0; padding:0; }
.trip-list li { display:grid; grid-template-columns:28px 1.6fr auto auto 1.2fr 16px; align-items:center; gap:12px; padding:16px 0; border-top:1px solid var(--border); font-size:.9rem; }
.num { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--primary); color:#fff; font-size:.78rem; font-weight:600; }
.trip-who { font-size:.8rem; }
.map-card { padding:0; overflow:hidden; min-height:220px; background:linear-gradient(135deg,#dbe8fb,#eef4fd); }
.map-card img { width:100%; height:100%; object-fit:cover; display:block; }

/* mobile */
@media (max-width:860px) {
  .hero { grid-template-columns:1fr; }
  .hero h1 { font-size:1.7rem; }
  .app { grid-template-columns:minmax(0,1fr); }
  .sidebar { border-right:0; border-bottom:1px solid var(--border); padding:8px; }
  .sidebar nav { flex-direction:row; overflow-x:auto; }
  .sidebar a { white-space:nowrap; }
  .app-main { padding:20px 16px 40px; }
  .stats, .dash-grid { grid-template-columns:1fr; }
  .trip-list li { grid-template-columns:28px 1fr auto 16px; }
  .trip-time, .trip-who { display:none; }
}
@media (max-width:520px) {
  .topbar { padding:12px 16px; }
  .user-name { display:none; }
  .container { padding-left:16px; padding-right:16px; }
  .auth-card { padding:24px 20px; }
  .route-card { position:static; width:auto; margin:12px 0 0; }
  .hero-art > img { display:none; }
}

/* ---- listing finder (search + chips) ---- */
.finder { background:linear-gradient(100deg,#d9f3ea 0%,#e4f0fb 55%,#f3f7fd 100%); border-bottom:1px solid var(--border); padding:20px 20px; }
.finder-inner { max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.finder-row { display:flex; gap:12px; align-items:center; }
.finder-row.chips { flex-wrap:wrap; }
.searchbox { flex:1; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--border); border-radius:999px; padding:0 20px; height:46px; color:var(--muted); box-shadow:0 2px 8px rgba(15,23,42,.05); }
.searchbox input { flex:1; border:0; outline:0; background:transparent; font:inherit; color:var(--fg); min-width:0; }
.finder { position:relative; z-index:20; }
.pill { position:relative; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 16px; background:#fff; border:1px solid var(--border); border-radius:999px; color:var(--primary); font-weight:500; transition:background .2s, border-color .2s, box-shadow .2s; }
.pill:hover { border-color:#c3d3ea; }
.pill.has-value, .pill.open { background:#EAF3FF; border-color:#5B9BF5; }
.pill.open { box-shadow:0 0 0 3px rgba(37,99,235,.14); }
.pill select { appearance:none; border:0; outline:0; background:transparent; font:inherit; font-weight:600; color:var(--fg); padding-right:20px; cursor:pointer; max-width:190px; }
.pill select.native-hidden { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; padding:0; }
.pill-btn { display:inline-flex; align-items:center; gap:12px; height:100%; padding:0; border:0; background:transparent; font:inherit; font-weight:600; color:var(--fg); cursor:pointer; outline:0; }
.pill.has-value .pill-btn, .pill.open .pill-btn { color:#3B82F6; }
.pill-btn:focus-visible { text-decoration:underline; }
.pill-chevron { color:var(--muted); transition:transform .25s cubic-bezier(.4,0,.2,1), color .2s; }
.pill.open .pill-chevron { transform:rotate(180deg); color:#3B82F6; }
.pill-menu { position:absolute; top:calc(100% + 8px); left:0; z-index:30; min-width:100%; width:max-content; max-width:280px; max-height:320px; overflow-y:auto; margin:0; padding:8px; list-style:none; background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:0 14px 40px rgba(15,23,42,.18);
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.97); transform-origin:top left; pointer-events:none;
  transition:opacity .18s ease, transform .24s cubic-bezier(.2,.9,.3,1.2), visibility 0s linear .24s; }
.pill.open .pill-menu { opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .18s ease, transform .24s cubic-bezier(.2,.9,.3,1.2), visibility 0s; }
.pill.sort .pill-menu { left:auto; right:0; transform-origin:top right; }
.pill-menu li { padding:12px 16px; border-radius:12px; font-weight:500; color:var(--fg); cursor:pointer; white-space:nowrap; opacity:0; transform:translateY(-4px); transition:background .12s, color .12s, opacity .2s, transform .2s; }
.pill.open .pill-menu li { opacity:1; transform:none; }
.pill.open .pill-menu li:nth-child(2) { transition-delay:.02s, 0s, .03s, .03s; }
.pill.open .pill-menu li:nth-child(3) { transition-delay:.04s, 0s, .06s, .06s; }
.pill.open .pill-menu li:nth-child(n+4) { transition-delay:.06s, 0s, .09s, .09s; }
.pill-menu li.active { background:#F1F5FB; }
.pill-menu li[aria-selected="true"] { background:#EAF3FF; color:#3B82F6; font-weight:600; }
@media (prefers-reduced-motion: reduce) { .pill-menu, .pill-menu li, .pill-chevron { transition:none !important; } }
.pill.sort { background:#fff; }
.seg { position:relative; display:inline-grid; grid-template-columns:1fr 1fr; background:#fff; border:1px solid var(--border); border-radius:999px; padding:4px; height:46px; }
.seg label { display:block; position:relative; z-index:1; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg span:not(.seg-thumb) { display:grid; place-items:center; height:36px; padding:0 24px; border-radius:999px; font-weight:600; color:var(--muted); cursor:pointer; transition:color .25s; }
.seg input:checked + span { color:#fff; }
.seg[data-value="rent"] label:first-of-type span, .seg[data-value="sale"] label:last-of-type span { color:#fff; }
.seg[data-value="sale"] label:first-of-type span, .seg[data-value="rent"] label:last-of-type span { color:var(--muted); }
.seg-thumb { position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:36px; border-radius:999px; background:linear-gradient(90deg,#2563EB,#4F8DF7); box-shadow:0 2px 8px rgba(37,99,235,.35); transition:transform .28s cubic-bezier(.4,0,.2,1); }
.seg[data-value="sale"] .seg-thumb { transform:translateX(100%); }
.seg input:focus-visible + span { box-shadow:0 0 0 3px rgba(37,99,235,.3); }
@media (prefers-reduced-motion: reduce) { .seg-thumb, .seg span { transition:none; } }
.container.wide { max-width:1180px; }
.list-title { font-size:1.35rem; }

/* ---- property card ---- */
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px; margin-top:16px; }
.pcard-wrap { position:relative; display:flex; }
.pcard-wrap:hover { z-index:5; }
.pcard { flex:1; min-width:0; position:relative; background:var(--card); border-radius:18px; overflow:hidden; box-shadow:0 2px 12px rgba(15,23,42,.08); border:1px solid #edf0f5; display:flex; flex-direction:column;
  transform:perspective(900px) translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1); will-change:transform;
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .25s ease, border-color .25s ease; }
.pcard.tilting { transition:transform .16s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
/* heavy hover shadow lives on its own layer so only opacity/transform animate (no per-frame blur repaint) */
.pcard-wrap::before { content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; opacity:0; will-change:transform;
  transform:perspective(900px) translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1);
  box-shadow:0 44px 64px -20px rgba(37,99,235,.5), 0 22px 34px -14px rgba(15,23,42,.28);
  transition:opacity .3s ease, transform .42s cubic-bezier(.22,1,.36,1); }
.pcard-wrap.tilting::before { transition:opacity .3s ease, transform .16s cubic-bezier(.22,1,.36,1); }
.pcard::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.42), rgba(255,255,255,0) 46%); }
.js .pcard:not(.in) { opacity:0; }
.pcard.in { animation:card-in .8s cubic-bezier(.2,.9,.25,1.15) backwards; animation-delay:calc(var(--i,0) * 90ms); }
@keyframes card-in {
  0% { opacity:0; transform:perspective(900px) translateY(70px) rotateX(18deg) scale(.86); filter:blur(8px); }
  60% { filter:blur(0); }
  100% { opacity:1; transform:perspective(900px) translateY(0) rotateX(0) scale(1); }
}
.pcard-photo img, .pcard-photo .ph { transition:transform .5s cubic-bezier(.22,1,.36,1); }
.pcard .avatar-ring, .pcard .badge, .pcard .cta { transition:transform .45s cubic-bezier(.2,1.6,.3,1), background .25s, box-shadow .3s; }
.cta svg { width:0; opacity:0; margin-left:-4px; transition:width .35s cubic-bezier(.2,1.4,.3,1), opacity .25s, margin .35s; }
.pcard-title, .pcard-price { transition:color .25s, transform .45s cubic-bezier(.2,1.4,.3,1); transform-origin:left center; }
@media (hover:hover) and (pointer:fine) {
  .pcard-wrap:hover .pcard { border-color:rgba(79,141,247,.75); transform:perspective(900px) translateY(-14px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.035); }
  .pcard-wrap:hover::before { opacity:1; transform:perspective(900px) translateY(-14px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.035); }
  .pcard-wrap:hover .pcard::after { opacity:1; }
  .pcard-wrap:hover .pcard .pcard-photo img, .pcard-wrap:hover .pcard .pcard-photo .ph { transform:translate(var(--px,0),var(--py,0)) scale(1.14); }
  .pcard-wrap:hover .pcard .badge { transform:translateY(-3px) scale(1.1) rotate(-2deg); box-shadow:0 8px 18px rgba(37,99,235,.5); }
  .pcard-wrap:hover .pcard .avatar-ring { transform:translateY(-6px) rotate(-8deg) scale(1.08); }
  .pcard-wrap:hover .pcard .cta { background:var(--primary); transform:scale(1.12); box-shadow:0 8px 20px rgba(37,99,235,.5); }
  .pcard-wrap:hover .pcard .cta svg { width:15px; opacity:1; margin-left:2px; }
  .pcard-wrap:hover .pcard .pcard-title { color:var(--primary); }
  .pcard-wrap:hover .pcard .pcard-price { transform:scale(1.07); color:var(--primary); }
  .pgrid:hover .pcard-wrap:not(:hover) .pcard { opacity:.7; transform:perspective(900px) scale(.975); }
}
.pcard-wrap:active .pcard { transform:perspective(900px) scale(.98); transition-duration:.12s; }
@media (prefers-reduced-motion: reduce) { .pcard, .pcard * { transition:none !important; animation:none !important; } .js .pcard:not(.in) { opacity:1; } }
.pcard-link { position:absolute; inset:0; z-index:2; }
.pcard-photo { position:relative; aspect-ratio:4/3; background:linear-gradient(135deg,hsl(var(--h,210) 70% 88%),hsl(calc(var(--h,210) + 10) 60% 94%)); display:grid; place-items:center; overflow:hidden; }
.pcard-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pcard-photo .ph { color:hsl(var(--h,210) 55% 62%); opacity:.7; }
.badge { position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:4px; padding:4px 12px 4px 12px; border-radius:999px; background:linear-gradient(90deg,#2563EB,#4F8DF7); color:#fff; font-size:.8rem; font-weight:600; box-shadow:0 2px 8px rgba(37,99,235,.3); }
.avatar-ring { position:absolute; left:14px; bottom:14px; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:#fff; color:var(--primary); font-weight:700; font-size:1.1rem; box-shadow:0 2px 10px rgba(15,23,42,.18); border:3px solid #fff; }
.cta { display:inline-flex; align-items:center; white-space:nowrap; position:absolute; right:14px; bottom:14px; padding:8px 20px; border-radius:999px; background:rgba(15,23,42,.62); color:#fff; font-weight:600; font-size:.9rem; }
.pcard-wrap:hover .pcard .cta { background:var(--primary); }
.pcard-body { padding:16px 16px 12px; display:flex; flex-direction:column; flex:1; }
.tags { display:flex; gap:8px; margin-bottom:8px; }
.tag { display:inline-flex; align-items:center; gap:4px; padding:4px 12px 4px 8px; border-radius:999px; font-size:.82rem; font-weight:600; border:1px solid; }
.tag.blue { color:#1D4ED8; background:linear-gradient(180deg,#F3F7FF,#E4EEFD); border-color:#c3d8fa; box-shadow:0 1px 2px rgba(37,99,235,.12), 0 4px 10px -3px rgba(37,99,235,.28); }
.tag.green { color:#15803D; background:linear-gradient(180deg,#F2FBF5,#DFF4E7); border-color:#b5e5c6; box-shadow:0 1px 2px rgba(21,128,61,.12), 0 4px 10px -3px rgba(21,128,61,.28); }
.tag.amber { color:#B45309; background:linear-gradient(180deg,#FFFAEB,#FDEFC8); border-color:#f6d98d; box-shadow:0 1px 2px rgba(180,83,9,.12), 0 4px 10px -3px rgba(217,119,6,.3); }
.pcard-title { font-size:1.02rem; font-weight:700; margin:0 0 8px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.pcard-loc { display:flex; align-items:center; gap:8px; margin:0 0 8px; color:var(--grey); font-size:.9rem; }
.pcard-specs { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 16px; color:var(--grey); font-size:.88rem; }
.pcard-specs span { display:inline-flex; align-items:center; gap:4px; }
.pcard-specs.big { font-size:1rem; gap:8px 24px; }
.pcard-price { font-size:1.55rem; font-weight:700; line-height:1.2; margin-top:auto; }
.pcard-price small { font-size:.9rem; font-weight:500; color:var(--muted); }
.pcard-price.big { font-size:2rem; }
.pcard-sub { color:var(--muted); font-size:.82rem; margin-bottom:12px; }
.pcard-foot { display:flex; justify-content:space-between; color:var(--muted); font-size:.82rem; padding-top:8px; }
.featured { margin-bottom:24px; }
.card-head.big h2 { font-size:1.3rem; margin:0; }
.card-head.big { margin-bottom:0; font-size:.95rem; }

/* ---- property detail ---- */
.back { display:inline-flex; align-items:center; gap:4px; margin-bottom:12px; font-size:.9rem; }
.detail { display:grid; grid-template-columns:1.7fr 1fr; gap:20px; align-items:start; }
.detail .card { margin-bottom:16px; }
.detail-photo { border-radius:18px; margin-bottom:16px; aspect-ratio:16/10; }
.detail h1 { font-size:1.5rem; }
.actions.col { flex-direction:column; margin:16px 0 12px; }
.agent-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.avatar.big { width:48px; height:48px; font-size:1.2rem; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width:860px) { .detail { grid-template-columns:1fr; } .finder-row { flex-wrap:wrap; } .searchbox { min-width:100%; } }
@media (max-width:520px) { .pgrid { grid-template-columns:1fr; } .finder { padding:16px 16px; } .pill select { max-width:140px; } }

/* keep the top bar on one line on phones */
.topbar nav .nav-link, .topbar nav .btn, .topbar nav button.link { white-space:nowrap; }
@media (max-width:560px) { .brand span { display:none; } .topbar nav { gap:12px; } .topbar nav .nav-link { font-size:.84rem; } .topbar nav .btn.small { padding:8px 12px; } }

/* profile pictures */
.avatar.has-img, .avatar-ring.has-img { padding:0; overflow:hidden; }
.avatar img, .avatar-ring img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.user-chip { color:inherit; border-radius:999px; transition:background .2s; padding:4px 8px 4px 4px; }
.user-chip:hover { text-decoration:none; background:var(--primary-soft); }
.user-chip .avatar { transition:box-shadow .2s; }
.user-chip:hover .avatar { box-shadow:0 0 0 3px rgba(37,99,235,.25); }

/* the `hidden` attribute must win over component display rules (e.g. .btn { display:inline-flex }) */
[hidden] { display:none !important; }

.nav-link::after { content:""; position:absolute; left:50%; bottom:3px; width:0; height:2px; border-radius:2px; transform:translateX(-50%);
  background:linear-gradient(90deg,#60A5FA,#2563EB); transition:width .35s cubic-bezier(.2,1.2,.3,1); }
.nav-link .nl-ico { display:grid; color:var(--muted); transition:transform .45s cubic-bezier(.2,1.8,.3,1), color .25s; }
.nav-link:hover, .nav-link:focus-visible { color:var(--primary); text-decoration:none; transform:translateY(-2px); }
.nav-link:hover::after, .nav-link:focus-visible::after { width:46%; }
.nav-link:hover .nl-ico, .nav-link:focus-visible .nl-ico, .nav-link.current .nl-ico { color:var(--primary); }
.nav-link:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.nav-link:active { transform:translateY(0) scale(.96); }
.nav-link.current { color:var(--primary); }
.nav-link.current::after { width:0; }
.nav-link[href="/map"]:hover .nl-ico { animation:nl-hop .6s cubic-bezier(.3,1.4,.5,1); }
.nav-link[href="/properties"]:hover .nl-ico { transform:rotate(-14deg) scale(1.2); }
.nav-link[href="/login"]:hover .nl-ico { transform:scale(1.2); }
@keyframes nl-hop { 0% { transform:translateY(0); } 40% { transform:translateY(-6px) scale(1.12); } 72% { transform:translateY(1px); } 100% { transform:translateY(0); } }
@media (max-width:480px) { .nav-link .nl-text { display:none; } .nav-link { padding:8px 12px; } }
@media (prefers-reduced-motion: reduce) { .nav-link, .nav-link::before, .nav-link::after, .nav-link .nl-ico { transition:none !important; animation:none !important; } }

.topbar nav { position:relative; }
.nav-link { z-index:1; }
.nav-thumb { position:absolute; left:0; top:0; width:0; height:0; z-index:0; border-radius:999px; pointer-events:none; opacity:0; transform:scale(.85);
  background:linear-gradient(135deg,var(--primary-soft),rgba(96,165,250,.32));
  box-shadow:0 6px 16px -6px rgba(37,99,235,.55), inset 0 0 0 1px rgba(37,99,235,.2);
  transition:transform .55s cubic-bezier(.3,1.15,.4,1), width .45s cubic-bezier(.3,1.15,.4,1), height .45s cubic-bezier(.3,1.15,.4,1), opacity .3s; }
.nav-thumb.on { opacity:1; }
.nav-thumb.fade-out { opacity:0; }
@media (prefers-reduced-motion: reduce) { .nav-thumb { transition:opacity .2s !important; } }

/* user chip in the top bar: never wrap or squash the avatar; shrink the label step by step as the bar gets narrow */
.user-chip { flex:0 1 auto; min-width:0; }
.user-chip .avatar { flex:none; }
.user-chip .user-name { min-width:0; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1000px) { .user-chip .user-name .muted { display:none; } .user-chip .user-name { max-width:140px; } }
@media (max-width:760px) { .user-chip .user-name { display:none; } .user-chip { padding:4px; } }

/* language switch (TH | EN), sits next to the theme toggle */
.lang-toggle { position:relative; flex:none; display:inline-flex; height:36px; padding:4px; gap:2px; border-radius:999px; border:1px solid var(--border); background:var(--card); }
.lang-toggle a { position:relative; z-index:1; display:grid; place-items:center; min-width:32px; padding:0 8px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.03em; color:var(--grey); transition:background .25s, color .25s; }
.lang-toggle a:hover { text-decoration:none; color:var(--fg); }
.lang-toggle a.on { background:var(--primary); color:#fff; }
@media (max-width:560px) { .lang-toggle { height:32px; } .lang-toggle a { min-width:28px; padding:0 8px; } }

/* "Translate / Show original" toggle: one per card, pinned to the card's top-right corner */
.ugc-host { position:relative; }
.ugc-tr { position:absolute; top:10px; right:10px; z-index:6; display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:4px 12px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--primary); font:inherit; font-size:.78rem; font-weight:600; line-height:1.4; letter-spacing:0; cursor:pointer; touch-action:manipulation; white-space:nowrap; transition:background .2s, border-color .2s; }
.ugc-tr:hover { background:var(--primary-soft); border-color:var(--primary); }
.ugc-tr:disabled { opacity:.6; cursor:progress; }
.ugc-tr svg { flex:none; }
.nb-body.ugc-has .nb-title { padding-right:92px; }
.pp .ugc-tr { position:static; margin-left:8px; }
.ugc-inline > .ugc-tr { position:static; display:inline-flex; align-self:flex-start; margin:12px 0 0; }
.pcard.ugc-has .promo-badge { top:48px; }
.pcard.ugc-has .ugc-tr { top:12px; right:12px; background:rgba(15,23,42,.72); color:#fff; border-color:rgba(255,255,255,.3); backdrop-filter:blur(4px); }
.pcard.ugc-has .ugc-tr:hover { background:var(--primary); border-color:var(--primary); }

/* the highlight slides between TH and EN (moved by static/lang.js before the page reloads in the new language) */
.lang-thumb { position:absolute; top:4px; left:0; height:calc(100% - 8px); width:0; border-radius:999px; background:var(--primary); box-shadow:0 4px 12px -3px rgba(37,99,235,.55); opacity:0;
  transition:transform .42s cubic-bezier(.3,1.2,.4,1), width .3s cubic-bezier(.3,1.2,.4,1); pointer-events:none; }
.lang-toggle.ready .lang-thumb { opacity:1; }
.lang-toggle.still .lang-thumb { transition:none; }
html.js .lang-toggle.ready a.on { background:transparent; }
.lang-toggle a { transition:color .25s; }
.lang-toggle.ready a.on { color:#fff; }
@media (prefers-reduced-motion: reduce) { .lang-thumb { transition:none; } }
.dash-actions { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 8px; }

/* detail gallery + description */
.gal-thumbs { display:flex; gap:8px; margin:12px 0 16px; overflow-x:auto; padding-bottom:4px; }
.gal-thumb { position:relative; flex:none; width:88px; height:66px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; background:var(--card); cursor:pointer; opacity:.75; transition:opacity .2s, border-color .2s, transform .2s; }
.gal-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gal-thumb.plan img { object-fit:contain; background:#fff; }
.gal-thumb:hover { opacity:1; transform:translateY(-2px); }
.gal-thumb.on { opacity:1; border-color:var(--primary); }
.gal-thumb span { position:absolute; left:4px; bottom:4px; padding:0 6px; border-radius:999px; background:var(--primary); color:#fff; font-size:.65rem; font-weight:600; }
#gal-main.is-plan { object-fit:contain; background:#fff; }
.detail-desc { margin-top:16px; }
.desc-text { margin:0; white-space:pre-line; line-height:1.8; color:var(--muted); }

.detail-photo { position:relative; }
.gal-arrow { position:absolute; top:50%; z-index:5; display:grid; place-items:center; width:44px; height:44px; margin-top:-22px; padding:0; border:0; border-radius:50%; background:rgba(15,23,42,.62); color:#fff; cursor:pointer; opacity:0; transition:opacity .2s, background .2s; }
.detail-photo:hover .gal-arrow, .gal-arrow:focus-visible { opacity:1; }
.gal-arrow:hover { background:var(--primary); }
.gal-arrow.prev { left:12px; } .gal-arrow.next { right:12px; }
.gal-count { position:absolute; right:12px; bottom:12px; z-index:5; padding:2px 12px; border-radius:999px; background:rgba(15,23,42,.7); color:#fff; font-size:.78rem; font-weight:600; }
@media (hover:none) { .gal-arrow { opacity:.9; } }

/* dashboard sidebar: one highlight that slides between items (moved by static/dash.js) */
.sidebar nav { position:relative; }
.sidebar a { position:relative; z-index:1; transition:color .25s, transform .2s; }
.sidebar a.soon { opacity:.55; cursor:default; }
.side-thumb { position:absolute; left:0; top:0; width:0; height:0; z-index:0; border-radius:8px; background:var(--primary-soft); box-shadow:inset 3px 0 0 var(--primary); opacity:0; pointer-events:none;
  transition:transform .45s cubic-bezier(.3,1.15,.4,1), width .35s cubic-bezier(.3,1.15,.4,1), height .35s cubic-bezier(.3,1.15,.4,1), opacity .2s; }
.side-thumb.on { opacity:1; }
.side-thumb.still { transition:none; }
.sidebar nav.ready a.active { background:transparent; }
.sidebar a:hover:not(.active) { transform:translateX(3px); }
.sidebar a:focus-visible { box-shadow:inset 0 0 0 2px var(--primary); }
@media (prefers-reduced-motion: reduce) { .side-thumb, .sidebar a { transition:none; } }

/* list: views + distance row on cards, origin note */
.pcard-meta { display:flex; flex-wrap:wrap; gap:4px 16px; padding-top:8px; color:var(--muted); font-size:.82rem; }
.pcard-meta span { display:inline-flex; align-items:center; gap:4px; }
.pcard-dist b { color:var(--fg); font-weight:600; }
.origin-note { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:-8px 0 16px; }
.origin-note .link { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--primary); font:inherit; font-weight:600; cursor:pointer; }
.origin-note .link:hover:not(:disabled) { background:var(--primary-soft); border-color:var(--primary); }
.origin-note .link[hidden] { display:none; }
.loc-msg { color:var(--muted); } .loc-msg.err { color:var(--err); }

/* like (heart) button: sits in the card meta row, above the card-wide link */
.like-btn { position:relative; z-index:6; margin-left:auto; display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:2px 10px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--muted); font:inherit; font-size:.82rem; cursor:pointer; touch-action:manipulation; transition:color .2s, border-color .2s, background .2s; }
.like-btn:hover { color:#E11D48; border-color:#E11D48; }
.like-btn svg { flex:none; }
.like-btn.on { color:#E11D48; border-color:#E11D48; background:rgba(225,29,72,.08); }
.like-btn.on svg { fill:currentColor; animation:like-pop .3s ease-out; }
.like-btn b { font-weight:600; }
.like-btn.big { min-height:36px; padding:4px 14px; font-size:.95rem; }
.detail-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.detail-top .like-btn { margin-left:0; }
@keyframes like-pop { 50% { transform:scale(1.25); } }
.liked-page h1 { margin:0 0 4px; }
.liked-page .pgrid { margin-top:16px; }
.liked-page .pcard-wrap { transition:opacity .25s, transform .25s; }
.liked-page .pcard-wrap.leaving { opacity:0; transform:scale(.97); }
.liked-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:40px 16px; margin-top:16px; text-align:center; }
.liked-empty p { margin:0; }
.liked-empty .btn { margin-top:10px; }
@media (prefers-reduced-motion: reduce) { .like-btn.on svg { animation:none; } .liked-page .pcard-wrap { transition:none; } }
.sidebar .side-sep { margin:12px 12px 4px; font-size:.7rem; font-weight:700; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }
@media (max-width:860px) { .sidebar .side-sep { display:none; } }

.lst-status { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.lst-status p { margin:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.lst-stale { color:#B45309; }
:root[data-theme="dark"] .lst-stale { color:#FBBF24; }

/* "Add to trip" button (cards, detail page) and its toast: used on many pages, so it lives here */
.trip-add-btn { position:relative; z-index:6; display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:2px 10px; border:1px solid var(--border); border-radius:99px; background:var(--card); color:var(--primary); font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; touch-action:manipulation; transition:background .15s, border-color .15s; }
.trip-add-btn:hover { background:var(--primary-soft); border-color:var(--primary); }
.trip-add-btn:disabled { opacity:.6; cursor:wait; }
.trip-add-btn.big { padding:8px 14px; font-size:.9rem; }
.trip-add-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:90; display:flex; align-items:center; gap:12px; max-width:calc(100vw - 32px); padding:12px 16px; border-radius:14px; background:var(--card); color:var(--fg); border:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.18); }
:root[data-theme="dark"] .trip-add-toast { background:#0D1C42; border-color:#22396F; box-shadow:none; }

/* promoted listing badge (always visible, never styled like a trust mark) */
.promo-badge { position:absolute; top:12px; right:12px; z-index:4; display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:99px; background:rgba(15,23,42,.72); color:#fff; font-size:.72rem; font-weight:600; }

/* logout: icon + text on wide screens, icon only on phones so the top bar fits */
.logout-btn { display:inline-flex; align-items:center; gap:6px; }
@media (max-width:560px) {
  .logout-btn span { display:none; }
  .logout-btn { width:36px; height:36px; justify-content:center; padding:0; border-radius:50%; }
  .topbar nav { gap:6px; }
  .topbar nav:has(.user-chip) .nav-map { display:none; }   /* signed in: the map is one tap away from the dashboard and search, keep the bar on one line */
  .topbar { padding-left:12px; padding-right:12px; }
}


/* ---- sidebar groups, lock marks, reminders bell, menu search, phone FAB ---- */
.sidebar .side-sep { margin:16px 12px 4px; }
.sidebar .side-sep-line { display:block; height:1px; margin:12px 12px 8px; background:var(--border); padding:0; }
.sidebar a .nav-label { flex:1; min-width:0; }
.sidebar a svg { flex:none; transition:transform .25s cubic-bezier(.2,1.5,.4,1); }
.sidebar a.active svg { transform:scale(1.12); }
.sidebar a.locked { color:var(--muted); }
.nav-lock { display:inline-flex; margin-left:auto; color:var(--muted); opacity:.8; }
.sidebar a.locked:hover .nav-lock { color:var(--primary); opacity:1; }
.nav-badge.urgent { background:#DC2626; }
@media (max-width:860px) { .sidebar .side-sep-line { display:none; } .nav-lock { margin-left:4px; } }

.bell { position:relative; display:inline-flex; }
.bell-btn { position:relative; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:none; color:inherit; cursor:pointer; transition:background .2s; }
.bell-btn:hover, .bell-btn[aria-expanded="true"] { background:var(--primary-soft); }
.bell-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.bell-dot { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#EF4444; color:#fff; font-size:.65rem; font-weight:700; display:grid; place-items:center; animation:bell-pop .4s cubic-bezier(.2,1.6,.4,1); }
.bell-dot[hidden] { display:none; }
@keyframes bell-pop { from { transform:scale(0); } to { transform:scale(1); } }
.bell-pop { position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:min(320px,calc(100vw - 24px)); padding:8px; border:1px solid var(--border); border-radius:16px; background:var(--card); color:var(--fg); box-shadow:0 12px 32px rgba(15,23,42,.18); animation:mo-fade .16s ease; }
.bell-pop[hidden] { display:none; }
.bell-head { display:flex; align-items:center; justify-content:space-between; padding:8px 8px 12px; }
.bell-item { display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; color:inherit; font-size:.88rem; }
.bell-item:hover { background:var(--primary-soft); text-decoration:none; }
.bell-item.unread { background:var(--primary-soft); }
.bell-item span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bell-empty { margin:0; padding:16px 8px; text-align:center; color:var(--muted); font-size:.88rem; }
@media (max-width:560px) { .bell-btn { width:32px; height:32px; } .bell-pop { position:fixed; left:12px; right:12px; top:56px; width:auto; } }

.pal-wrap { position:fixed; inset:0; z-index:97; display:grid; justify-items:center; align-items:start; padding:12vh 16px 16px; opacity:0; transition:opacity .14s; }
.pal-wrap.in { opacity:1; }
.pal-scrim { position:absolute; inset:0; background:rgba(15,23,42,.45); }
.pal { position:relative; width:min(480px,100%); max-height:min(420px,70vh); display:flex; flex-direction:column; border:1px solid var(--border); border-radius:16px; background:var(--card); color:var(--fg); box-shadow:0 16px 48px rgba(15,23,42,.25); overflow:hidden; transform:translateY(-6px); transition:transform .16s cubic-bezier(.2,.8,.3,1.1); }
.pal-wrap.in .pal { transform:none; }
.pal-input { padding:16px; border:0; border-bottom:1px solid var(--border); background:none; color:inherit; font:inherit; font-size:1rem; outline:none; }
.pal-list { overflow-y:auto; padding:8px; }
.pal-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-radius:8px; color:inherit; }
.pal-row.on, .pal-row:hover { background:var(--primary-soft); color:var(--primary); text-decoration:none; }

.fab-new { display:none; }
@media (max-width:860px) {
  .fab-new { position:fixed; right:16px; bottom:16px; z-index:40; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--primary); color:#fff; box-shadow:0 8px 20px rgba(37,99,235,.4); transition:transform .2s cubic-bezier(.2,1.5,.4,1), box-shadow .2s; animation:bell-pop .4s cubic-bezier(.2,1.6,.4,1); }
  .fab-new:hover { transform:scale(1.06); text-decoration:none; }
  .fab-new:active { transform:scale(.95); }
}
@media (prefers-reduced-motion: reduce) { .sidebar a svg, .bell-dot, .fab-new, .pal, .pal-wrap { transition:none !important; animation:none !important; } }
:root[data-theme="dark"] .bell-pop, :root[data-theme="dark"] .pal { background:#0D1C42; border-color:#22396F; box-shadow:0 12px 32px rgba(0,0,0,.4); }
:root[data-theme="dark"] .pal-scrim { background:rgba(1,7,54,.7); }
:root[data-theme="dark"] .pal-row.on, :root[data-theme="dark"] .pal-row:hover, :root[data-theme="dark"] .bell-item:hover, :root[data-theme="dark"] .bell-item.unread { background:rgba(79,141,247,.16); color:#fff; }
:root[data-theme="dark"] .fab-new { box-shadow:none; }

/* quieter card footer: a confirmed date reads as one line with a tick, "never confirmed" is a muted clock (full wording on the detail page) */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pcard-conf { display:inline-flex; align-items:center; gap:4px; }
.pcard-conf svg { color:#16A34A; }
.pcard-conf.none svg { color:var(--muted); opacity:.7; }
.promo-badge { overflow:hidden; }
.promo-badge::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); animation:promo-shine 1.2s .5s ease-out 1 both; }
@keyframes promo-shine { to { transform:translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .promo-badge::after { animation:none; display:none; } }

/* ---- "save to trip" popup: a playlist-style sheet (global: opened from cards and detail pages) ---- */
.trip-pop-wrap { position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:16px; opacity:0; transition:opacity .18s; }
.trip-pop-wrap.in { opacity:1; }
.trip-pop-scrim { position:absolute; inset:0; background:rgba(15,23,42,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.trip-pop { position:relative; width:min(380px,100%); max-height:min(600px,calc(100dvh - 32px)); display:flex; flex-direction:column; gap:16px; padding:20px; border:1px solid var(--border); border-radius:24px; background:var(--card); color:var(--fg); box-shadow:0 24px 64px rgba(15,23,42,.28); transform:translateY(16px) scale(.97); transition:transform .32s cubic-bezier(.2,1.25,.4,1); }
.trip-pop-wrap.in .trip-pop { transform:none; }
.trip-pop-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.trip-pop-head b { display:block; font-size:1.1rem; line-height:1.3; }
.trip-pop-head small { color:var(--muted); font-size:.82rem; }
.trip-pop-x { flex:none; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:var(--primary-soft); color:var(--muted); cursor:pointer; transition:background .2s, color .2s, transform .2s; }
.trip-pop-x:hover { color:var(--fg); transform:rotate(90deg); }
.trip-pop-list { display:flex; flex-direction:column; gap:8px; overflow-y:auto; min-height:56px; margin:0 -4px; padding:2px 4px; }
.trip-pop-load { padding:16px 4px; color:var(--muted); font-size:.88rem; text-align:center; }
.trip-pop-row { position:relative; display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:16px; cursor:pointer; transition:border-color .2s, background .2s, transform .15s; animation:trip-pop-in .35s both; animation-delay:calc(var(--i, 0) * 45ms); }
.trip-pop-row:hover { border-color:var(--primary); transform:translateY(-1px); }
.trip-pop-row:has(input:checked) { border-color:var(--primary); background:var(--primary-soft); }
.trip-pop-row.dis { opacity:.5; cursor:default; transform:none; }
.trip-pop-row input { position:absolute; opacity:0; pointer-events:none; }
.trip-pop-row:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:2px; }
@keyframes trip-pop-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.trip-pop-ico { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--primary-soft); color:var(--primary); transition:background .2s, color .2s; }
.trip-pop-row:has(input:checked) .trip-pop-ico { background:var(--primary); color:#fff; }
.trip-pop-ico.plus { border:1.5px dashed var(--primary); background:none; }
.trip-pop-txt { flex:1; min-width:0; }
.trip-pop-txt b { display:block; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trip-pop-txt small { color:var(--muted); font-size:.8rem; }
.trip-pop-tick { flex:none; display:grid; place-items:center; width:24px; height:24px; border:2px solid var(--border); border-radius:50%; color:transparent; transition:background .2s, border-color .2s, color .2s, transform .3s cubic-bezier(.2,1.6,.4,1); }
.trip-pop-row:has(input:checked) .trip-pop-tick { background:var(--primary); border-color:var(--primary); color:#fff; transform:scale(1.08); }
.trip-pop-new { display:flex; align-items:center; gap:12px; }
.trip-pop-newbtn { display:flex; align-items:center; gap:12px; width:100%; padding:8px 12px 8px 12px; border:1px dashed var(--border); border-radius:16px; background:none; color:var(--primary); font:inherit; font-weight:600; cursor:pointer; transition:border-color .2s, background .2s; }
.trip-pop-newbtn:hover { border-color:var(--primary); background:var(--primary-soft); }
.trip-pop-new.open { padding:8px 12px; border:1px solid var(--primary); border-radius:16px; }
.trip-pop-new input { flex:1; min-width:0; padding:8px 0; border:0; background:none; color:inherit; font:inherit; outline:none; }
.trip-pop-err { margin:0; color:#DC2626; font-size:.85rem; }
.trip-pop-foot { display:flex; gap:12px; }
.trip-pop-cancel, .trip-pop-ok { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 16px; border-radius:999px; font:inherit; font-weight:600; cursor:pointer; transition:background .2s, border-color .2s, transform .15s, opacity .2s; }
.trip-pop-cancel { border:1px solid var(--border); background:none; color:var(--fg); }
.trip-pop-cancel:hover { background:var(--primary-soft); }
.trip-pop-ok { flex:1.4; border:0; background:var(--primary); color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.3); }
.trip-pop-ok:hover:not(:disabled) { background:#1D4ED8; }
.trip-pop-ok:active:not(:disabled), .trip-pop-cancel:active { transform:scale(.97); }
.trip-pop-ok:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.trip-pop-x:focus-visible, .trip-pop-newbtn:focus-visible, .trip-pop-cancel:focus-visible, .trip-pop-ok:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
@media (max-width:520px) {
  .trip-pop-wrap { place-items:end center; padding:0; }
  .trip-pop { width:100%; max-height:85dvh; border-radius:24px 24px 0 0; padding-bottom:max(20px, env(safe-area-inset-bottom)); transform:translateY(100%); }
}
@media (prefers-reduced-motion: reduce) { .trip-pop-wrap, .trip-pop, .trip-pop-row, .trip-pop-tick, .trip-pop-x { transition:none !important; animation:none !important; } }
:root[data-theme="dark"] .trip-pop { background:#0D1C42; border-color:#22396F; box-shadow:0 24px 64px rgba(0,0,0,.5); }
:root[data-theme="dark"] .trip-pop-scrim { background:rgba(1,7,54,.7); }
:root[data-theme="dark"] .trip-pop-row { border-color:#22396F; }
:root[data-theme="dark"] .trip-pop-row:has(input:checked) { background:rgba(79,141,247,.16); border-color:#4F8DF7; }
:root[data-theme="dark"] .trip-pop-x { background:#16275A; }
:root[data-theme="dark"] .trip-pop-ok { box-shadow:none; }
:root[data-theme="dark"] .trip-pop-newbtn { border-color:#22396F; color:#8DB4FB; }
:root[data-theme="dark"] .trip-pop-ico.plus { border-color:#4F8DF7; }

/* ---- Ban Penguin brand: logo, mascot art, favicon-sized badge ---- */
.brand-logo { display:block; flex:none; width:30px; height:30px; object-fit:contain; border-radius:50%; transition:transform .35s cubic-bezier(.2,1.5,.4,1); }
.brand:hover .brand-logo { transform:rotate(-8deg) scale(1.08); }
.mascot { display:block; max-width:100%; height:auto; margin:0 auto 8px; user-select:none; -webkit-user-drag:none; }
.empty-art { display:flex; flex-direction:column; align-items:center; }
.auth-badge { display:block; margin:0 auto 8px; height:auto; animation:mascot-in .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes mascot-in { from { opacity:0; transform:translateY(8px) scale(.9); } to { opacity:1; transform:none; } }
.mascot-house, .mascot-think { animation:mascot-in .6s cubic-bezier(.2,1.4,.4,1) both; }
.sub-head { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.sub-head .mascot { flex:none; width:min(260px,36%); margin:0; }
@media (max-width:640px) { .sub-head { flex-direction:column; align-items:flex-start; } .sub-head .mascot { width:200px; } }
.chat-blank .mascot { margin-bottom:12px; }
.core.brand { background:linear-gradient(160deg,#CFE3FF,#EAF3FF 60%,#DDEBFF); }
.core.brand img { width:92%; height:auto; object-fit:contain; animation:core-bob 5s ease-in-out infinite alternate; }
.core.brand::after { display:none; }
@keyframes core-bob { from { transform:translate(-50%,-52%); } to { transform:translate(-50%,-48%); } }
@media (prefers-reduced-motion: reduce) { .brand-logo, .auth-badge, .mascot-house, .mascot-think, .core.brand img { animation:none !important; transition:none !important; } }
.mp-blank, .trip-map-blank { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 16px; text-align:center; color:var(--muted); font-size:.9rem; }
.mp-blank p, .trip-map-blank p { margin:0; max-width:260px; }
.mp-empty .mascot { margin-bottom:12px; }
.crm-buy { overflow:hidden; }
.crm-money { float:right; width:130px; margin:-4px 0 8px 16px; }
.loan-money { flex:none; width:88px; margin:0; align-self:center; }
.loan-head > div:first-of-type { flex:1; min-width:180px; }
@media (max-width:720px) { .loan-money { width:64px; } .crm-money { width:96px; } }
.sub-head-txt { min-width:0; }
.page-hello { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.page-hello-txt { min-width:0; }
.page-hello .mascot { flex:none; width:min(210px,34%); margin:0; animation:mascot-in .6s cubic-bezier(.2,1.4,.4,1) both; }
@media (max-width:560px) { .page-hello .mascot { width:120px; } }
@media (prefers-reduced-motion: reduce) { .page-hello .mascot { animation:none; } }