:root {
  --primary: #FF6B35;
  --primary-light: #FFF0E8;
  --accent: #4ECDC4;
  --accent-light: #E8FAF8;
  --dark: #2D3436;
  --gray: #636E72;
  --light-gray: #B2BEC3;
  --bg: #F8F9FA;
  --card: #FFFFFF;
  --past: #DFE6E9;
  --past-text: #B2BEC3;
  --current: #FF6B35;
  --current-bg: #FFF0E8;
  --future-text: #2D3436;
  --warning: #FDCB6E;
  --warning-bg: #FFF9E6;
  --star: #6C5CE7;
  --star-bg: #F0EDFF;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  max-width: 500px;
  margin: 0 auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
/* iOS standalone 模式顶部安全区 */
.hero {
  position: relative;
  padding: calc(32px + env(safe-area-inset-top, 0px)) 20px 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #FF6B35 0%, #F7971E 50%, #FFD200 100%);
}
.hero-bg {
  position: absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M30 0L60 30L30 60L0 30z'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-content { position:relative; z-index:1; text-align:center; color:#fff; }
.hero h1 { font-size:22px; font-weight:800; letter-spacing:1px; }
.hero .subtitle { font-size:13px; margin-top:4px; opacity:0.9; }
.hero .meta { font-size:11px; margin-top:2px; opacity:0.75; }
.countdown {
  margin-top:8px;
  display:inline-block;
  background:rgba(255,255,255,0.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:4px 14px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
}
/* Day Tabs */
.day-tabs {
  display:flex;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:8px 10px 0;
  gap:5px;
  background:#fff;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
/* iOS standalone 模式下 sticky 位置补偿 */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (display-mode: standalone) {
    .day-tabs { top: 0; }
  }
}
.day-tabs::-webkit-scrollbar { display:none; }
.tab {
  flex-shrink:0;
  border:none;
  background:var(--bg);
  color:var(--gray);
  font-size:12px;
  font-weight:600;
  padding:6px 12px 8px;
  border-radius:10px 10px 0 0;
  cursor:pointer;
  text-align:center;
  line-height:1.3;
  transition:all .2s;
  min-width:48px;
}
.tab span { font-size:10px; font-weight:400; opacity:0.7; }
.tab.active {
  background:var(--primary);
  color:#fff;
}
.tab.active span { opacity:1; }
.tab.past-tab { opacity:0.5; }
.tab.today-tab { animation: pulse 2s infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,107,53,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(255,107,53,0); }
}
/* Main */
main { padding:12px 14px; }
/* Timeline */
.timeline { position:relative; padding-left:28px; }
.timeline::before {
  content:'';
  position:absolute;
  left:10px; top:8px; bottom:8px;
  width:2px;
  background:linear-gradient(to bottom, var(--primary), var(--accent));
  border-radius:2px;
}
.tl-item {
  position:relative;
  margin-bottom:16px;
  transition:all .3s;
}
.tl-dot {
  position:absolute;
  left:-22px; top:12px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--primary);
  border:2px solid #fff;
  box-shadow:0 0 0 2px var(--primary);
  z-index:2;
}
.tl-item.past .tl-dot { background:var(--light-gray); box-shadow:0 0 0 2px var(--light-gray); }
.tl-item.current .tl-dot {
  background:var(--current);
  box-shadow:0 0 0 3px var(--current), 0 0 12px rgba(255,107,53,0.4);
  animation: dotPulse 1.5s infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow:0 0 0 3px var(--current), 0 0 12px rgba(255,107,53,0.4); }
  50% { box-shadow:0 0 0 5px var(--current), 0 0 20px rgba(255,107,53,0.6); }
}
.tl-card {
  background:var(--card);
  border-radius:var(--radius);
  padding:14px 16px;
  box-shadow:var(--shadow);
  border-left:3px solid var(--primary);
}
.tl-item.past .tl-card {
  background:#F5F6F7;
  border-left-color:var(--light-gray);
  opacity:0.6;
}
.tl-item.current .tl-card {
  border-left-color:var(--current);
  background:var(--current-bg);
  box-shadow:0 4px 20px rgba(255,107,53,0.15);
}
.tl-time {
  font-size:12px;
  font-weight:700;
  color:var(--primary);
  margin-bottom:4px;
}
.tl-item.past .tl-time { color:var(--past-text); }
.tl-item.current .tl-time { color:var(--current); }
.tl-title {
  font-size:15px;
  font-weight:700;
  margin-bottom:4px;
}
.tl-item.past .tl-title { color:var(--past-text); }
.tl-desc {
  font-size:13px;
  color:var(--gray);
  line-height:1.6;
}
.tl-item.past .tl-desc { color:var(--past-text); }
.tl-transport {
  display:inline-block;
  margin-top:6px;
  font-size:11px;
  background:var(--accent-light);
  color:var(--accent);
  padding:2px 8px;
  border-radius:6px;
  font-weight:600;
}
.tl-item.past .tl-transport { background:var(--past); color:var(--past-text); }
/* Tags */
.tag {
  display:inline-block;
  font-size:11px;
  padding:2px 8px;
  border-radius:6px;
  font-weight:600;
  margin-right:4px;
  margin-top:4px;
}
.tag-star { background:var(--star-bg); color:var(--star); }
.tag-warn { background:var(--warning-bg); color:#E17055; }
.tag-food { background:#FFF3E0; color:#E67E22; }
.tag-scenic { background:#E8F5E9; color:#27AE60; }
/* Map */
.map-container {
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  margin:12px 0;
  box-shadow:var(--shadow);
}
.map-header {
  padding:10px 16px;
  font-size:13px;
  font-weight:700;
  background:linear-gradient(135deg, var(--accent), #45B7AA);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.map-toggle {
  font-size:11px;
  font-weight:600;
  opacity:0.9;
}
.map-wrap {
  transition:max-height .35s ease, opacity .25s ease;
  max-height:300px;
  opacity:1;
  overflow:hidden;
}
.map-wrap.collapsed {
  max-height:0;
  opacity:0;
}
.map-frame {
  width:100%;
  height:260px;
  border:none;
}
/* Info cards */
.info-card {
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.info-card h3 {
  font-size:16px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:6px;
}
.info-card p, .info-card li {
  font-size:13px;
  color:var(--gray);
  line-height:1.8;
}
.info-card ul { padding-left:18px; }
/* Checklist */
.checklist { list-style:none; padding:0; }
.checklist li {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid #F0F0F0;
  font-size:13px;
  color:var(--dark);
}
.checklist li:last-child { border:none; }
.checklist input[type="checkbox"] {
  width:18px; height:18px;
  accent-color:var(--primary);
  flex-shrink:0;
}
.checklist li.checked { color:var(--light-gray); text-decoration:line-through; }
/* Warning box */
.warn-box {
  background:var(--warning-bg);
  border-left:3px solid var(--warning);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:12px 14px;
  margin:12px 0;
  font-size:13px;
  line-height:1.7;
  color:#6D4C00;
}
.warn-box strong { color:#E17055; }
/* Tips section */
.tip-item {
  display:flex;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #F0F0F0;
  font-size:13px;
  line-height:1.6;
}
.tip-item:last-child { border:none; }
.tip-num {
  flex-shrink:0;
  width:22px; height:22px;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
}
/* Budget table */
.budget-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.budget-table th {
  background:var(--primary-light);
  color:var(--primary);
  padding:8px;
  text-align:left;
  font-weight:600;
}
.budget-table td {
  padding:8px;
  border-bottom:1px solid #F0F0F0;
}
.budget-table tr:last-child td {
  font-weight:700;
  color:var(--primary);
  border-top:2px solid var(--primary);
}
/* Day summary */
.day-summary {
  background:#FFFFFF;
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:12px;
  border-left:4px solid var(--primary);
  box-shadow:var(--shadow);
}
.day-summary .day-date {
  font-size:12px;
  color:var(--primary);
  font-weight:600;
  margin-bottom:4px;
}
.day-summary h2 {
  font-size:20px;
  font-weight:800;
  margin-bottom:6px;
  color:#1A1A2E !important;
}
.day-summary .day-theme {
  font-size:13px;
  color:#555;
  line-height:1.6;
}
.day-summary .day-accom {
  margin-top:6px;
  font-size:12px;
  color:#888;
}
/* Weather card */
.weather-placeholder {
  margin-bottom:12px;
}
.weather-loading {
  text-align:center;
  padding:12px;
  font-size:12px;
  color:var(--gray);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  animation:weatherFadeIn .6s ease;
}
@keyframes weatherFadeIn {
  from { opacity:0; transform:translateY(-4px); }
  to { opacity:1; transform:translateY(0); }
}
.weather-card {
  background:linear-gradient(135deg, #E3F2FD, #BBDEFB);
  border-radius:var(--radius);
  padding:14px 16px;
  box-shadow:var(--shadow);
  animation:weatherFadeIn .4s ease;
}
.weather-card.weather-error {
  background:var(--card);
  text-align:center;
  font-size:12px;
  color:var(--gray);
  padding:12px;
}
.weather-main {
  display:flex;
  align-items:center;
  gap:12px;
}
.weather-icon {
  font-size:36px;
  line-height:1;
  flex-shrink:0;
}
.weather-temp {
  flex-shrink:0;
  display:flex;
  align-items:baseline;
  gap:2px;
}
.weather-temp-max {
  font-size:26px;
  font-weight:800;
  color:#1565C0;
}
.weather-temp-sep {
  font-size:16px;
  color:#64B5F6;
  margin:0 1px;
}
.weather-temp-min {
  font-size:18px;
  font-weight:600;
  color:#64B5F6;
}
.weather-desc {
  flex:1;
  min-width:0;
}
.weather-desc-text {
  font-size:15px;
  font-weight:700;
  color:#1565C0;
}
.weather-city {
  font-size:11px;
  color:#42A5F5;
  margin-top:2px;
}
.weather-details {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(21,101,192,0.1);
}
.weather-detail-item {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:#1976D2;
  background:rgba(255,255,255,0.5);
  padding:3px 8px;
  border-radius:8px;
}
.weather-detail-icon {
  font-size:12px;
}
.weather-tip {
  margin-top:8px;
  font-size:12px;
  font-weight:600;
  color:#E65100;
  background:rgba(255,255,255,0.6);
  padding:6px 10px;
  border-radius:8px;
  text-align:center;
}
/* Dark mode weather */
@media (prefers-color-scheme: dark) {
  .weather-card {
    background:linear-gradient(135deg, #1A237E, #283593);
  }
  .weather-temp-max { color:#90CAF9; }
  .weather-temp-sep { color:#5C6BC0; }
  .weather-temp-min { color:#7986CB; }
  .weather-desc-text { color:#90CAF9; }
  .weather-city { color:#7986CB; }
  .weather-details { border-top-color:rgba(144,202,249,0.15); }
  .weather-detail-item { color:#90CAF9; background:rgba(255,255,255,0.08); }
  .weather-tip { color:#FFB74D; background:rgba(255,255,255,0.08); }
}
/* Distance badge */
.dist-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  background:#EDF2F7;
  color:#4A5568;
  padding:2px 8px;
  border-radius:6px;
  margin-top:4px;
}
/* Accommodation */
.accom-card {
  background:linear-gradient(135deg, #667eea22, #764ba222);
  border-radius:var(--radius);
  padding:14px;
  margin-top:16px;
}
.accom-card h4 { font-size:14px; margin-bottom:6px; }
.accom-card p { font-size:12px; color:var(--gray); line-height:1.6; }
/* Current indicator */
.current-badge {
  display:inline-block;
  background:var(--current);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:10px;
  margin-left:6px;
  animation: pulse 2s infinite;
}
/* Smooth scroll */
html { scroll-behavior:smooth; }
/* Guides tab styles */
.guides-header {
  text-align:center;
  padding:8px 0 12px;
}
.guides-header h2 {
  font-size:20px;
  font-weight:800;
  color:#1A1A2E;
  margin-bottom:4px;
}
.guides-header p {
  font-size:12px;
  color:var(--gray);
}

/* ===== 小红书专区 ===== */
.xhs-section {
  background:linear-gradient(135deg, #FFF5F5, #FFF0F0);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:14px;
  border:1.5px solid #FFD4D4;
}
.xhs-section-header {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  background:linear-gradient(135deg, #FF2442, #FF4D6A);
}
.xhs-logo { font-size:28px; }
.xhs-section-title {
  font-size:15px;
  font-weight:800;
  color:#fff;
}
.xhs-section-desc {
  font-size:11px;
  color:rgba(255,255,255,0.85);
  margin-top:2px;
}
.xhs-keyword-list {
  padding:8px 12px;
}
.xhs-keyword-item {
  padding:10px 12px;
  border-bottom:1px solid #FFE8E8;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
  border-radius:8px;
  margin-bottom:2px;
}
.xhs-keyword-item:last-child { border-bottom:none; }
.xhs-keyword-item:active { background:#FFE0E0; }
.xhs-keyword-main {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.xhs-keyword-text {
  font-size:14px;
  font-weight:700;
  color:#CC1E36;
}
.xhs-copy-btn {
  flex-shrink:0;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, #FF2442, #FF6B81);
  padding:4px 12px;
  border-radius:12px;
  border:none;
  white-space:nowrap;
}
.xhs-open-btn {
  flex-shrink:0;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, #FF2442, #FF6B81);
  padding:4px 12px;
  border-radius:12px;
  border:none;
  white-space:nowrap;
}
.xhs-keyword-desc {
  font-size:11px;
  color:#999;
  margin-top:4px;
  padding-left:20px;
}
.xhs-tip {
  text-align:center;
  font-size:11px;
  color:#CC1E36;
  padding:8px 14px 12px;
  background:rgba(255,36,66,0.04);
}

/* ===== 分隔线 ===== */
.guides-divider {
  display:flex;
  align-items:center;
  margin:16px 0 12px;
  font-size:14px;
  font-weight:700;
  color:var(--dark);
}
.guides-divider::before,
.guides-divider::after {
  content:'';
  flex:1;
  height:1px;
  background:#E0E0E0;
}
.guides-divider::before { margin-right:10px; }
.guides-divider::after { margin-left:10px; }

/* ===== 攻略卡片 ===== */
.guide-section {
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.guide-section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  background:linear-gradient(135deg, var(--primary), #F7971E);
  color:#fff;
  font-size:14px;
  font-weight:700;
}
.guide-list {
  padding:4px 0;
}
.guide-item {
  display:flex;
  align-items:center;
  padding:10px 14px;
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid #F0F0F0;
  transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.guide-item:last-child { border-bottom:none; }
.guide-item:active { background:#F8F8F8; }
.guide-item-content { flex:1; min-width:0; }
.guide-item-title {
  font-size:13px;
  font-weight:600;
  color:var(--dark);
  line-height:1.5;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.guide-item-meta {
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
}
.guide-source-tag {
  font-size:10px;
  font-weight:600;
  padding:2px 8px;
  border-radius:8px;
  white-space:nowrap;
}
/* 来源标签颜色 */
.src-toutiao { background:#FFF3E6; color:#E6770A; }
.src-douyin { background:#F0F0F0; color:#161823; }
.src-zhihu { background:#E8F4FD; color:#0066CC; }
.src-sohu { background:#FFF0E6; color:#E65C00; }
.src-ctrip { background:#E6F3FF; color:#0085FF; }
.src-dianping { background:#FFF3E6; color:#FF6633; }
.src-qyer { background:#E6FFF5; color:#00A870; }
.src-smzdm { background:#FFE8E8; color:#E02E2E; }
.src-official { background:#E8F8E8; color:#2E8B2E; }
.src-bendibao { background:#E6F0FF; color:#3366CC; }
.src-taobao { background:#FFF0E0; color:#FF5000; }
.src-netease { background:#FFE8E8; color:#CC0000; }
.src-tencent { background:#E6F0FF; color:#0052D9; }
.src-default { background:#F0F0F0; color:#666; }

.guide-item-arrow {
  flex-shrink:0;
  font-size:18px;
  color:var(--light-gray);
  margin-left:8px;
  font-weight:300;
}

/* ===== 复制提示 toast ===== */
.copy-toast {
  position:fixed;
  bottom:100px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(0,0,0,0.85);
  color:#fff;
  padding:12px 20px;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  text-align:center;
  z-index:9999;
  opacity:0;
  transition:opacity .3s, transform .3s;
  pointer-events:none;
  max-width:80vw;
}
.copy-toast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.copy-toast small {
  font-weight:400;
  opacity:0.8;
}

/* ===== 微信引导蒙层 ===== */
.wx-guide-overlay {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.82);
  z-index:99999;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:12px;
  opacity:0;
  transition:opacity .3s;
}
.wx-guide-overlay.show {
  opacity:1;
}
.wx-guide-arrow {
  position:absolute;
  top:8px;
  right:24px;
  animation:wx-bounce 1.2s infinite;
}
@keyframes wx-bounce {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}
.wx-guide-content {
  margin-top:90px;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:16px;
  padding:24px 20px;
  width:calc(100% - 48px);
  max-width:340px;
  color:#fff;
}
.wx-guide-step {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  line-height:1.6;
  margin-bottom:14px;
}
.wx-guide-step:last-of-type {
  margin-bottom:0;
}
.wx-guide-step-num {
  flex-shrink:0;
  font-size:18px;
}
.wx-guide-step strong {
  color:#FF6B81;
}
.wx-guide-divider {
  height:1px;
  background:rgba(255,255,255,0.15);
  margin:18px 0;
}
.wx-guide-alt {
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,0.7);
  margin-bottom:12px;
}
.wx-guide-web-btn {
  display:block;
  text-align:center;
  padding:12px 16px;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  font-size:14px;
  font-weight:600;
  border-radius:12px;
  text-decoration:none;
  transition:background .2s;
}
.wx-guide-web-btn:active {
  background:rgba(255,255,255,0.25);
}
.wx-guide-close {
  margin-top:20px;
  color:rgba(255,255,255,0.6);
  font-size:14px;
  cursor:pointer;
  padding:8px 16px;
  -webkit-tap-highlight-color:transparent;
}
.wx-guide-close:active {
  color:#fff;
}

/* ===== 车票图片展示 ===== */
.tickets-header {
  text-align:center;
  padding:8px 0 12px;
}
.tickets-header h2 {
  font-size:20px;
  font-weight:800;
  color:#1A1A2E;
  margin-bottom:4px;
}
.tickets-header p {
  font-size:12px;
  color:var(--gray);
}
.tickets-grid {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ticket-card {
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.ticket-card:active {
  transform:scale(0.98);
  box-shadow:0 1px 6px rgba(0,0,0,0.1);
}
.ticket-img-wrap {
  width:100%;
  overflow:hidden;
  background:#F0F0F0;
  position:relative;
}
.ticket-img-wrap img {
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.ticket-info {
  padding:10px 14px;
}
.ticket-title {
  font-size:14px;
  font-weight:700;
  color:var(--dark);
  margin-bottom:2px;
}
.ticket-desc {
  font-size:12px;
  color:var(--gray);
}

/* ===== 图片查看器 ===== */
.img-viewer-overlay {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.92);
  z-index:99999;
  display:flex;
  flex-direction:column;
  opacity:0;
  transition:opacity .3s;
}
.img-viewer-overlay.show {
  opacity:1;
}
.img-viewer-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 10px;
  color:#fff;
}
.img-viewer-counter {
  font-size:13px;
  font-weight:600;
  opacity:0.8;
}
.img-viewer-close {
  font-size:20px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  -webkit-tap-highlight-color:transparent;
}
.img-viewer-close:active {
  background:rgba(255,255,255,0.25);
}
.img-viewer-body {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:10px;
}
.img-viewer-img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 4px 30px rgba(0,0,0,0.4);
}
.img-viewer-caption {
  text-align:center;
  padding:8px 16px;
  color:#fff;
}
.img-viewer-title {
  font-size:15px;
  font-weight:700;
}
.img-viewer-desc {
  font-size:12px;
  opacity:0.7;
  margin-top:4px;
}
.img-viewer-nav {
  display:flex;
  justify-content:center;
  gap:16px;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.img-viewer-btn {
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  font-size:14px;
  font-weight:600;
  padding:10px 24px;
  border-radius:12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
}
.img-viewer-btn:active {
  background:rgba(255,255,255,0.3);
}
.img-viewer-btn.disabled {
  opacity:0.3;
  pointer-events:none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#1A1A2E;
    --card:#16213E;
    --dark:#E8E8E8;
    --gray:#A0A0B0;
    --light-gray:#555;
    --past:#2A2A3E;
    --past-text:#666;
    --shadow:0 2px 12px rgba(0,0,0,0.2);
  }
  .tl-item.past .tl-card { background:#1E1E30; }
  body { background:var(--bg); color:var(--dark); }
}