@import url('https://fonts.googleapis.com/css2?family=Geist:wght@200;300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');


/* === MAPOAC Design Tokens ===
   Source: 0901_MAPOAC textStyles.json + Default.tokens.json
   中文字體: Noto Sans TC   英文: Geist   Metadata/數字: Geist Mono
   ================================================================ */
:root {
  /* ── Font Families ─────────────────────────────── */
  --font-ch:   'Noto Sans TC', sans-serif;
  --font-en:   'Geist', 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', 'Menlo', monospace;

  /* ── Gray Scale ────────────────────────────────── */
  --gray-10: #F7F7F7;   /* 最淡背景 */
  --gray-20: #F2F2F2;
  --gray-30: #E5E5E5;   /* border 常用 */
  --gray-40: #D0D0CE;
  --gray-50: #A1A19F;   /* muted text */
  --gray-60: #72736E;   /* secondary text */
  --gray-70: #43423E;
  --gray-80: #14140C;   /* 主文字（幾乎黑）*/

  /* ── Accent ────────────────────────────────────── */
  --accent: #6537CF;    /* purple */

  /* ── Red ───────────────────────────────────────── */
  --red-10: #FDF0F1;
  --red-20: #FBDDE0;
  --red-30: #F5BBC0;
  --red-40: #E98A94;
  --red-50: #D8535F;
  --red-60: #C62A3A;

  /* ── Blue ──────────────────────────────────────── */
  --blue-10: #EEF3FE;
  --blue-20: #DBE5FD;
  --blue-30: #BCCEFB;
  --blue-40: #7C9FF5;
  --blue-50: #4A73E4;
  --blue-60: #2A51D0;

  /* ── Green ─────────────────────────────────────── */
  --green-10: #F1F6F1;
  --green-20: #E2EDE3;
  --green-30: #C4D8C6;
  --green-40: #94B897;
  --green-50: #6B9270;
  --green-60: #4C7350;

  /* ── Mask ──────────────────────────────────────── */
  --mask-white-50: rgba(255,255,255,0.50);
  --mask-white-90: rgba(247,247,247,0.90);
  --mask-black-10: rgba(20,20,12,0.10);
  --mask-black-20: rgba(20,20,12,0.20);
  --mask-black-50: rgba(20,20,12,0.50);
  --mask-black-80: rgba(20,20,12,0.80);

  /* ── Font Sizes ────────────────────────────────── */
  --fs-10: 10px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-60: 60px;

  /* ── Font Weights ──────────────────────────────── */
  --fw-thin:     200;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Letter Spacing ────────────────────────────── */
  --ls-0:  0;
  --ls-5:  0.05em;
  --ls-10: 0.10em;
  --ls-15: 1.5px;

  /* ── Semantic Aliases ──────────────────────────── */
  --text-primary:   var(--gray-80);
  --text-secondary: var(--gray-60);
  --text-muted:     var(--gray-50);
  --text-disabled:  var(--gray-40);
  --bg-base:        #ffffff;
  --bg-subtle:      var(--gray-10);
  --border-default: var(--gray-30);
  --border-muted:   var(--gray-20);
}
/* ── 直角鐵則：全站無圓角 ──────────────────────────── */
*, *::before, *::after { border-radius: 0 !important; }
/* 例外：圓形頭像與狀態小點（50% = 圓形，非圓角） */
img[class*="avatar"], [class*="avatar"] img,
.ig-avatar, .ig-comment-avatar,
.shared-trip-avatar, .shared-detail-avatar,
.like-anim-dot, .crawl-dot,
[class*="-dot"], [class*="dot-"] { border-radius: 50% !important; }
/* ── Global: 地圖統一灰白 ──────────────────────────── */
#map { filter: grayscale(100%) contrast(1.05); }
/* ── Text Style Mixins (utility classes) ───────────── */
/* Display */
.ts-display-xl-en { font-family: var(--font-en); font-weight: var(--fw-thin); font-size: var(--fs-60); }
.ts-display-m-en  { font-family: var(--font-en); font-weight: var(--fw-thin); font-size: var(--fs-40); }
.ts-display-l-ch  { font-family: var(--font-ch); font-weight: var(--fw-bold); font-size: var(--fs-56); }
/* Heading */
.ts-heading-xl-ch { font-family: var(--font-ch); font-weight: var(--fw-regular); font-size: var(--fs-36); letter-spacing: var(--ls-5); }
.ts-heading-l-ch  { font-family: var(--font-ch); font-weight: var(--fw-bold);    font-size: var(--fs-32); }
.ts-heading-l-en  { font-family: var(--font-en); font-weight: var(--fw-medium);  font-size: var(--fs-32); }
.ts-heading-m-ch  { font-family: var(--font-ch); font-weight: var(--fw-bold);    font-size: var(--fs-28); }
.ts-heading-m-en  { font-family: var(--font-en); font-weight: var(--fw-medium);  font-size: var(--fs-28); }
.ts-heading-s-ch  { font-family: var(--font-ch); font-weight: var(--fw-bold);    font-size: var(--fs-24); }
.ts-heading-s-en  { font-family: var(--font-en); font-weight: var(--fw-bold);    font-size: var(--fs-24); }
.ts-heading-xs-ch { font-family: var(--font-ch); font-weight: var(--fw-bold);    font-size: var(--fs-20); }
.ts-heading-xs-en { font-family: var(--font-en); font-weight: var(--fw-semibold);font-size: var(--fs-20); }
/* Subtitle */
.ts-subtitle-primary-ch   { font-family: var(--font-ch); font-weight: var(--fw-bold);    font-size: var(--fs-18); }
.ts-subtitle-primary-en   { font-family: var(--font-en); font-weight: var(--fw-semibold);font-size: var(--fs-18); }
.ts-subtitle-secondary-ch { font-family: var(--font-ch); font-weight: var(--fw-medium);  font-size: var(--fs-18); }
.ts-subtitle-secondary-en { font-family: var(--font-en); font-weight: var(--fw-semibold);font-size: var(--fs-16); }
/* Content */
.ts-content-ch   { font-family: var(--font-ch); font-weight: var(--fw-regular); font-size: var(--fs-16); }
.ts-content-en   { font-family: var(--font-en); font-weight: var(--fw-regular); font-size: var(--fs-16); }
.ts-content-em   { font-family: var(--font-ch); font-weight: var(--fw-bold);    font-size: var(--fs-16); }
/* Text */
.ts-text-primary-ch   { font-family: var(--font-ch); font-weight: var(--fw-bold);   font-size: var(--fs-14); }
.ts-text-secondary-ch { font-family: var(--font-ch); font-weight: var(--fw-medium); font-size: var(--fs-14); letter-spacing: var(--ls-5); }
.ts-text-secondary-en { font-family: var(--font-en); font-weight: var(--fw-regular);font-size: var(--fs-14); }
.ts-text-small        { font-family: var(--font-ch); font-weight: var(--fw-regular);font-size: var(--fs-10); }
/* Metadata (monospace) */
.ts-meta-l { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-16); }
.ts-meta-m { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-14); }
.ts-meta-s { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-12); letter-spacing: var(--ls-5); }
/* Button */
.ts-btn-nav { font-family: var(--font-en);  font-weight: var(--fw-regular); font-size: var(--fs-10); letter-spacing: var(--ls-10); text-transform: uppercase; }
.ts-btn-l   { font-family: var(--font-ch);  font-weight: var(--fw-bold);    font-size: var(--fs-16); letter-spacing: var(--ls-10); }
.ts-btn-m   { font-family: var(--font-ch);  font-weight: var(--fw-bold);    font-size: var(--fs-14); letter-spacing: var(--ls-10); }
.ts-btn-s   { font-family: var(--font-ch);  font-weight: var(--fw-bold);    font-size: var(--fs-12); letter-spacing: var(--ls-10); }
/* ── 全站底部 pill nav（統一由 bottomnavbar2.js 注入）── */

.bottom-nav {
  position: fixed !important;
  bottom: 12px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 24px) !important;
  max-width: 420px !important;
  display: flex !important;
  justify-content: space-around;
  align-items: center;
  background: #201F21 !important;
  border-radius: 28px !important;
  border-top: none !important;
  padding: 6px 4px max(6px, env(safe-area-inset-bottom)) !important;
  z-index: 1000 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.35) !important;
}

.bottom-nav .nav-item {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 10px 0 8px;
  border-radius: 22px;
  text-decoration: none;
  color: #757575 !important;
  font-size: 10px;
  transition: color .2s;
  min-width: 0;
}

.bottom-nav .nav-item span { display: none !important; }

.bottom-nav .nav-item i {
  font-size: 22px !important;
  margin-bottom: 0;
}

.bottom-nav .nav-item.active {
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}

.bottom-nav .nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

.bottom-nav .nav-item:not(.active):hover {
  color: #aaa !important;
}

/* 新增按鈕 */
.bottom-nav .add-button {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 10px 0 8px;
  border-radius: 22px;
  text-decoration: none;
  color: #fff !important;
}
.bottom-nav .add-button span { display: none !important; }
.bottom-nav .add-button i { font-size: 22px !important; }
.bottom-nav .add-button.active { background: rgba(255,255,255,.10) !important; }

/* 行程 badge */
.nav-trip-badge {
  position: absolute;
  top: -6px; right: -8px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
}