:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-nav-h: calc(64px + var(--safe-bottom));
  --accent-strong: #b23c59;
  --success: #247a55;
}

html { scroll-behavior: smooth; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select { touch-action: manipulation; }
.app { padding-bottom: calc(92px + var(--safe-bottom)); }
.hero-banner { background: radial-gradient(circle at 78% 20%, rgba(229,128,152,.42), transparent 28%), linear-gradient(145deg, #172039, #161016 62%, #4b1f2e); }
.hero-credit { display:none; }
.panel, #panel-expenses, #panel-japanese, #panel-practical { width:100%; max-width:100%; min-width:0; }
.quick-expense-fab { display:none !important; }
.route-photo:has(img[src=""]) { min-height: 120px; background: linear-gradient(135deg, #96324a, #33465f); }
.route-photo img[src=""] { display: none; }

/* Mobile dashboard */
.mobile-dashboard { display: none; }
.mobile-next {
  background: linear-gradient(145deg, #96324a, #6d2742);
  color: #fff; border-radius: 20px; padding: 18px; margin: 0 0 14px;
  box-shadow: 0 16px 36px -24px rgba(80,15,35,.85);
}
.mobile-next-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mobile-next-date { font-size:12px; letter-spacing:.08em; opacity:.84; }
.mobile-next-tools { display:flex; align-items:center; gap:6px; }
.mobile-weather,.mobile-reminder { min-height:34px; color:#fff; font-size:12px; border:1px solid rgba(255,255,255,.25); padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.06); }
.mobile-reminder { width:34px; padding:0; }
.mobile-next .kicker { margin-top:14px; font-size:12px; opacity:.78; }
.mobile-next h2 { margin:3px 0 2px; font-size:24px; color:#fff; }
.mobile-next .count { font-size:13px; opacity:.9; }
.mobile-actions { display:grid; grid-template-columns:1.25fr 1fr; gap:9px; margin-top:16px; }
.mobile-action, .action-btn {
  min-height:48px; border-radius:13px; border:1px solid var(--line); padding:10px 12px;
  display:flex; align-items:center; justify-content:center; gap:7px; text-align:center;
  background:var(--paper-raised); color:var(--ink); font-weight:700; text-decoration:none; cursor:pointer;
}
.mobile-next .mobile-action.primary { background:#fff; color:#7e2942; border-color:#fff; }
.mobile-next .mobile-action.ghost { color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); }
.quick-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 18px; }
.quick-chip { min-height:66px; padding:8px 5px; border:1px solid var(--line); border-radius:14px; background:var(--paper-raised); color:var(--ink); font-size:12px; font-weight:700; }
.quick-chip span { display:block; font-size:20px; line-height:1.2; margin-bottom:3px; }

/* Bottom navigation */
.mobile-bottom-nav { display:none; }
.mobile-more-sheet, .mobile-modal { display:none; }
.sheet-backdrop { position:fixed; inset:0; background:rgba(10,7,6,.56); backdrop-filter:blur(2px); z-index:78; }
.sheet-card {
  position:fixed; left:10px; right:10px; bottom:calc(10px + var(--mobile-nav-h)); z-index:79;
  max-height:70vh; overflow:auto; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:22px; padding:16px; box-shadow:0 24px 80px rgba(0,0,0,.32);
}
.sheet-handle { width:42px; height:4px; border-radius:4px; background:var(--line-strong); margin:0 auto 14px; }
.sheet-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sheet-title h2 { margin:0; font-size:19px; }
.sheet-close { width:44px; height:44px; border:0; border-radius:50%; background:var(--paper); color:var(--ink); font-size:20px; }
.more-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.more-item { min-height:72px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:15px; font-size:12px; font-weight:700; }
.more-item span { display:block; font-size:21px; margin-bottom:2px; }

/* New panels */
.route-day, .wallet-card, .live-card, .budget-card, .sync-card, .phrase-tabs {
  background:var(--paper-raised); border:1px solid var(--line); border-radius:17px; padding:15px; margin-bottom:12px;
}
.route-guide { display:grid; gap:8px; margin:12px 0; padding:12px; border-radius:13px; background:var(--paper); border:1px solid var(--line); }
.route-guide > div { display:grid; grid-template-columns:72px 1fr; gap:8px; font-size:12.5px; line-height:1.55; }
.route-guide strong { color:var(--accent); }
.route-guide span { color:var(--ink-soft); }
.route-credit { display:block; background:rgba(0,0,0,.56); color:#fff; font-size:9px; }
.shichahai-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.shichahai-tabs button { min-height:44px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font-weight:700; }
.shichahai-tabs button.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.shichahai-list { display:grid; gap:10px; }
.shichahai-place { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.shichahai-place h4 { margin:3px 0 5px; font-size:15px; }
.shichahai-place p { margin:0; color:var(--ink-soft); font-size:12.5px; line-height:1.6; }
.shichahai-place .place-type { color:var(--accent); font-size:10.5px; font-weight:800; letter-spacing:.04em; }
.shichahai-place .maplink { white-space:nowrap; }
.route-day h3, .wallet-card h3, .live-card h3 { margin:0 0 9px; font-size:17px; }
.route-stop { display:grid; grid-template-columns:30px 1fr auto; gap:9px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.route-stop:first-of-type { border-top:0; }
.route-num { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent); font-weight:800; font-size:12px; }
.route-stop strong { display:block; font-size:14px; }
.route-stop small { color:var(--ink-soft); }
.nav-mini { min-width:52px; min-height:44px; border:0; border-radius:12px; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; display:grid; place-items:center; }
.route-mode { display:flex; gap:7px; margin-top:10px; overflow:auto; }
.route-mode button { min-height:42px; flex:1; white-space:nowrap; border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--ink); }
.wallet-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.wallet-item { position:relative; min-height:134px; border-radius:15px; padding:13px; overflow:hidden; color:#fff; background:linear-gradient(145deg,#96324a,#33465f); border:0; text-align:left; }
.wallet-item .type { font-size:11px; opacity:.78; text-transform:uppercase; }
.wallet-item .name { font-size:15px; font-weight:800; margin-top:8px; }
.wallet-item .hint { position:absolute; bottom:10px; left:13px; font-size:11px; opacity:.78; }
.wallet-upload { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.wallet-upload input, .wallet-upload select { width:100%; min-height:46px; border:1px solid var(--line); border-radius:11px; padding:9px; background:var(--paper); color:var(--ink); }
.wallet-upload .wide { grid-column:1/-1; }
.full-ticket { position:fixed; inset:0; z-index:92; background:#080808; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px; }
.full-ticket img { max-width:100%; max-height:68vh; object-fit:contain; background:#fff; border-radius:12px; }
.full-ticket h2 { color:#fff; text-align:center; }
.full-ticket button { position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px; width:48px; height:48px; border-radius:50%; border:0; font-size:22px; }
.wallet-delete { margin-top:12px; color:#ffb6c4; border:0; background:transparent; min-height:44px; }

.weather-live-card { overflow:hidden; background:linear-gradient(155deg,var(--paper-raised),var(--accent-tint)); }
.weather-live-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.weather-live-head h3 { margin:2px 0 0; }
.weather-kicker { font:700 9px/1.4 "IBM Plex Mono",monospace; letter-spacing:.16em; color:var(--accent); }
.weather-refresh { width:44px; height:44px; flex:0 0 auto; border:1px solid var(--line); border-radius:50%; background:var(--paper-raised); color:var(--accent-strong); font-size:20px; }
.weather-refresh.spinning { animation:weather-spin .8s linear infinite; }
.weather-scenes { display:grid; gap:12px; }
.weather-loading { min-height:150px; display:grid; place-items:center; align-content:center; gap:6px; color:var(--ink-soft); }
.weather-loading span { font-size:44px; animation:weather-float 2.4s ease-in-out infinite; }
.weather-scene-card { position:relative; overflow:hidden; padding:16px; border:1px solid rgba(255,255,255,.38); border-radius:18px; background:linear-gradient(145deg,#8cc4db,#dceef3 72%); color:#163448; box-shadow:0 15px 36px -28px #173a4e; }
.weather-art { position:absolute; top:-10px; right:-4px; width:126px; height:88px; pointer-events:none; }
.weather-art span { position:absolute; line-height:1; }
.weather-art .sun { top:8px; right:12px; color:#ffd564; font-size:48px; animation:weather-spin 14s linear infinite; }
.weather-art .cloud { color:rgba(255,255,255,.94); filter:drop-shadow(0 5px 5px rgba(34,83,105,.12)); }
.weather-art .cloud-a { top:31px; right:7px; font-size:47px; animation:cloud-drift 4s ease-in-out infinite alternate; }
.weather-art .cloud-b { top:16px; right:67px; font-size:30px; opacity:.65; animation:cloud-drift 5s ease-in-out infinite alternate-reverse; }
.weather-art .drops { display:none; top:63px; right:29px; width:42px; color:#397ca5; font-size:26px; letter-spacing:4px; transform:rotate(90deg); animation:rain-fall .8s linear infinite; }
.weather-art.rainy .drops,.weather-art.stormy .drops { display:block; }
.weather-art.mist .sun,.weather-art.rainy .sun,.weather-art.stormy .sun { opacity:.25; }
.weather-art.snowy .drops { display:block; content:""; color:#fff; }
.weather-now { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; min-height:58px; padding-right:82px; }
.weather-now strong { display:block; font:700 19px/1.3 "Noto Serif TC",serif; }
.weather-now span { display:block; margin-top:3px; font-size:12px; opacity:.75; }
.weather-temp { font:600 36px/1 "IBM Plex Mono",monospace; letter-spacing:-.06em; }
.weather-feels { position:relative; z-index:1; margin:4px 0 12px; font-size:11px; opacity:.76; }
.forecast-strip { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,minmax(58px,1fr)); gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.forecast-strip::-webkit-scrollbar { display:none; }
.forecast-day { min-width:58px; padding:8px 4px; border:1px solid rgba(255,255,255,.42); border-radius:12px; background:rgba(255,255,255,.34); text-align:center; }
.forecast-day span,.forecast-day small,.forecast-day em { display:block; font-size:9.5px; font-style:normal; }
.forecast-day b { display:block; margin:3px 0; font-size:20px; }
.forecast-day em { margin-top:3px; color:#2b6788; }
.live-updated { color:var(--ink-soft); font-size:11px; margin-top:8px; }
.flight-live-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.flight-live-row a { min-height:44px; padding:8px 11px; border-radius:11px; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; text-decoration:none; font-size:12px; font-weight:700; }

.budget-meter { height:10px; background:var(--paper); border-radius:999px; overflow:hidden; margin:10px 0 5px; }
.budget-meter span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--success),var(--gold)); border-radius:inherit; }
.budget-row { display:flex; align-items:end; gap:9px; }
.budget-row label { flex:1; font-size:12px; color:var(--ink-soft); }
.budget-row input, .budget-row select { width:100%; min-height:46px; padding:8px; border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--ink); }
.expense-chart { display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--paper); margin:12px 0 8px; }
.expense-chart span { min-width:2px; }
.expense-legend { display:flex; flex-wrap:wrap; gap:7px 12px; font-size:11px; color:var(--ink-soft); }

.phrase-switch { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.phrase-switch button { min-height:44px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font-weight:700; }
.phrase-switch button.active { color:#fff; background:var(--accent); border-color:var(--accent); }
.cn-phrase .ja { font-size:21px; }
.phrase-show { width:100%; min-height:44px; border:1px solid var(--line); border-radius:11px; margin-top:7px; background:var(--paper); color:var(--ink); }
.phrase-full { position:fixed; inset:0; z-index:93; padding:28px; background:#fff; color:#111; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.phrase-full .native { font-size:clamp(38px,11vw,64px); font-weight:800; }
.phrase-full .roman { font-size:20px; color:#555; margin:12px 0; }
.phrase-full .meaning { font-size:18px; }
.phrase-full button { position:absolute; top:18px; right:18px; width:48px; height:48px; border-radius:50%; border:1px solid #ddd; background:#f7f7f7; }

.sync-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sync-status { margin-top:8px; font-size:12px; color:var(--success); }
.install-banner, .incoming-share { display:none; padding:12px; margin:0 0 12px; border:1px solid var(--gold); border-radius:14px; background:var(--gold-tint); }
.install-banner.show, .incoming-share.show { display:flex; align-items:center; gap:10px; }
.install-banner p, .incoming-share p { flex:1; margin:0; font-size:12px; }
.install-banner button, .incoming-share button { min-height:42px; border:0; border-radius:11px; padding:8px 11px; background:var(--accent); color:#fff; font-weight:700; }
.offline-pill { display:none; position:fixed; top:calc(8px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:100; background:#222; color:#fff; border-radius:999px; padding:7px 12px; font-size:12px; }
body.is-offline .offline-pill { display:block; }

/* Place filters and accessibility */
.spot-tools { display:grid; grid-template-columns:1fr auto; gap:8px; margin:12px 0 8px; }
.spot-tools input, .spot-tools select { min-height:46px; border:1px solid var(--line); border-radius:12px; padding:9px; background:var(--paper); color:var(--ink); }
.maplink { min-height:44px; display:inline-flex; align-items:center; }
.day-todo-add button, .fx-add-btn, .speak-btn, .del, .theme-toggle { min-height:44px; min-width:44px; }
.fx-live-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; padding:11px 12px; border-radius:14px; background:var(--accent-tint); }
.fx-live-bar strong,.fx-live-bar span { display:block; }
.fx-live-bar strong { font-size:13px; color:var(--accent-strong); }
.fx-live-bar span { margin-top:2px; font-size:10.5px; color:var(--ink-soft); }
.fx-live-bar button { flex:0 0 auto; }
.fx-live-bar button.is-loading { opacity:.65; }
:focus-visible { outline:3px solid #2f89d9 !important; outline-offset:2px; }

@keyframes weather-spin { to { transform:rotate(360deg); } }
@keyframes weather-float { 50% { transform:translateY(-7px); } }
@keyframes cloud-drift { to { transform:translateX(-7px); } }
@keyframes rain-fall { from { transform:translateY(-4px) rotate(90deg); opacity:.25; } to { transform:translateY(7px) rotate(90deg); opacity:1; } }

@media (max-width: 640px) {
  body { font-size:16px; padding-bottom:var(--mobile-nav-h); }
  .app { padding:8px 12px calc(30px + var(--mobile-nav-h)); }
  .hero-shell { display:none; }
  .hero-banner { min-height:126px; }
  .hero-content { padding:18px 18px 14px; }
  .hero-content h1 { font-size:26px; }
  .hero-date { font-size:10px; }
  .hero-credit, .particles { display:none; }
  .theme-toggle { top:10px; right:12px; }
  .tabs { display:none !important; }
  main { padding-top:0; }
  .section-head { margin-bottom:12px; }
  #panel-overview > .section-head, #panel-overview > #todayCard, #panel-overview > #countdownRow { display:none; }
  .mobile-dashboard { display:block; }
  .mobile-bottom-nav {
    display:grid; grid-template-columns:repeat(5,1fr); position:fixed; z-index:70; left:0; right:0; bottom:0;
    height:var(--mobile-nav-h); padding:6px 6px calc(6px + var(--safe-bottom));
    background:color-mix(in srgb, var(--paper-raised) 92%, transparent); backdrop-filter:blur(18px);
    border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,0,0,.08);
  }
  .bottom-item { border:0; background:transparent; color:var(--ink-soft); font-size:10px; font-weight:700; border-radius:12px; }
  .bottom-item span { display:block; font-size:20px; line-height:1.25; }
  .bottom-item.active { color:var(--accent); background:var(--accent-tint); }
  .mobile-more-sheet.open, .mobile-modal.open { display:block; }
  .quick-expense-fab { display:flex !important; }
  .quick-expense-fab.is-hidden { display:none !important; }
  .day-list { gap:9px; }
  .day-card { border-radius:14px; scroll-margin-top:10px; }
  .day-head { grid-template-columns:64px 1fr 18px; min-height:74px; }
  .day-head-text { padding:10px 7px 10px 11px; }
  .day-head-text h3 { font-size:14px; line-height:1.35; }
  .day-summary { font-size:11px; }
  .day-date-badge .d { font-size:20px; }
  .day-detail-inner { padding:12px; }
  .day-items li { grid-template-columns:54px 1fr; }
  .day-todo { margin:8px 0 0; padding-top:12px; }
  .day-todo-add { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:stretch; }
  .day-todo-add input { width:100%; min-width:0; min-height:48px; font-size:16px; }
  .day-todo-add button { width:64px; min-height:48px; padding:6px 10px; border-radius:10px; }
  .city-hero { min-height:150px; }
  .info-card { padding:14px; border-radius:15px; }
  .spot-grid { grid-template-columns:1fr; }
  .route-guide > div { grid-template-columns:1fr; gap:2px; }
  .shichahai-place { grid-template-columns:1fr; }
  .expense-form { grid-template-columns:1fr 1fr; }
  .ticket { grid-template-columns:1fr; }
  .ticket-stub { border-left:0; border-top:1px dashed var(--line-strong); }
  footer { padding-bottom:10px; }
}

@media (min-width:641px) {
  .mobile-dashboard { display:block; }
  .mobile-dashboard .quick-strip { max-width:520px; }
  #panel-overview > #todayCard { display:none; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; } }

/* 2026 blue editorial redesign */
:root {
  --paper:#f1f6f8;
  --paper-raised:#fffefd;
  --ink:#173247;
  --ink-soft:#687d8d;
  --line:rgba(35,78,104,.13);
  --line-strong:rgba(35,78,104,.24);
  --accent:#2f718f;
  --accent-strong:#235b78;
  --accent-tint:#dcecf2;
  --gold:#a77c49;
  --gold-tint:#f2e9dc;
  --navy:#244f6b;
  --navy-tint:#dce8ee;
  --success:#477d6c;
  --shadow:0 2px 4px rgba(23,50,71,.04),0 18px 42px -30px rgba(23,50,71,.38);
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper:#0d1921;
    --paper-raised:#142630;
    --ink:#edf5f7;
    --ink-soft:#9eb3bf;
    --line:rgba(219,237,243,.12);
    --line-strong:rgba(219,237,243,.22);
    --accent:#79b5cf;
    --accent-strong:#9cc9dc;
    --accent-tint:#1e3b4a;
    --gold:#d0a46b;
    --gold-tint:#392f23;
    --navy:#9bc6d8;
    --navy-tint:#1b3340;
    --shadow:0 14px 40px -26px rgba(0,0,0,.85);
  }
}

:root[data-theme="dark"] {
  --paper:#0d1921;
  --paper-raised:#142630;
  --ink:#edf5f7;
  --ink-soft:#9eb3bf;
  --line:rgba(219,237,243,.12);
  --line-strong:rgba(219,237,243,.22);
  --accent:#79b5cf;
  --accent-strong:#9cc9dc;
  --accent-tint:#1e3b4a;
  --gold:#d0a46b;
  --gold-tint:#392f23;
  --navy:#9bc6d8;
  --navy-tint:#1b3340;
  --shadow:0 14px 40px -26px rgba(0,0,0,.85);
}

body {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb,var(--accent-tint) 55%,transparent), transparent 30rem),
    var(--paper);
}
.app { max-width:980px; }
.hero-shell { border:1px solid rgba(255,255,255,.13); border-radius:28px; }
.hero-banner {
  min-height:260px;
  background:
    linear-gradient(90deg,rgba(7,25,38,.78) 0%,rgba(7,25,38,.34) 58%,rgba(7,25,38,.12) 100%),
    url("https://upload.wikimedia.org/wikipedia/commons/1/12/Night_view_of_Fukuoka_from_Atago_jinja.jpg") center 54%/cover no-repeat;
}
.hero-banner::before {
  display:none;
}
.hero-overlay { background:linear-gradient(0deg,rgba(5,21,32,.58),transparent 72%); }
.hero-content { padding:32px 34px 30px; }
.hero-content h1 { letter-spacing:.025em; text-shadow:0 2px 20px rgba(4,24,37,.3); }
.hero-credit { display:block; }
.theme-toggle { background:rgba(255,255,255,.12); }

.tabs {
  top:8px; gap:5px; margin:4px 0 28px; padding:8px;
  border:1px solid var(--line); border-radius:18px;
  background:color-mix(in srgb,var(--paper-raised) 89%,transparent);
  box-shadow:var(--shadow); backdrop-filter:blur(18px);
}
.tabs::after { display:none; }
.tab-btn { flex:1; min-width:74px; padding:8px 10px; border-radius:12px; }
.tab-btn.active { color:var(--accent-strong); background:var(--accent-tint); }
.tab-btn.active::after { display:none; }
.section-head { margin-bottom:20px; padding-left:14px; border-left:3px solid var(--accent); }
.section-head h2 { font-size:25px; color:var(--ink); }

.today-highlight,.mobile-next {
  background:
    radial-gradient(circle at 88% 10%,rgba(255,255,255,.17),transparent 30%),
    linear-gradient(145deg,#1e536e,#327896 62%,#769fac);
}
.mobile-next .mobile-action.primary { color:#1f5d79; }
.countdown-chip,.day-card,.ticket,.weather-card,.info-card,.event,.route-card,.phrase-item,.check-item,.expense-item,
.route-day,.wallet-card,.live-card,.budget-card,.sync-card,.phrase-tabs {
  box-shadow:var(--shadow);
}
.info-card,.live-card,.budget-card,.sync-card,.route-day,.wallet-card {
  border-color:var(--line); border-radius:20px;
}
.info-card h3,.route-section-title,.checklist-group h3,.phrase-group h3 {
  color:var(--accent-strong); letter-spacing:.11em;
}
.city-hero { border-radius:22px; box-shadow:var(--shadow); }
.section-desc { padding:13px 15px; border-left:3px solid var(--accent); background:var(--accent-tint); border-radius:0 14px 14px 0; }
.maplink { color:var(--accent-strong); font-weight:700; border-bottom:0; }
.action-btn,.mobile-action { border-radius:14px; }

.day-list { gap:10px; }
.day-card { border-radius:18px; }
.day-card.open { border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); }
.day-head { background:transparent; }
.day-banner { background:linear-gradient(155deg,var(--navy-tint),var(--accent-tint)); color:var(--accent-strong); }
.day-card.is-today { box-shadow:0 0 0 2px var(--accent),var(--shadow); }
.tag { border-radius:999px; }

.route-more { margin:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.route-more summary,.event-more summary { list-style:none; min-height:48px; display:flex; align-items:center; justify-content:space-between; color:var(--accent-strong); font-size:13px; font-weight:800; cursor:pointer; }
.route-more summary::-webkit-details-marker { display:none; }
.event-more { margin:10px 0 0; border-top:1px solid var(--line); }
.event-more summary::-webkit-details-marker { display:none; }
.route-more summary::after,.event-more summary::after { content:"＋"; font-size:18px; font-weight:500; }
.route-more[open] summary::after,.event-more[open] summary::after { content:"−"; }
.route-guide { margin:0 0 12px; background:var(--accent-tint); border:0; }
.route-guide strong { color:var(--accent-strong); }
.event-guide { display:grid; gap:9px; margin:0 0 10px; padding:12px; border-radius:13px; background:var(--accent-tint); }
.event-guide > div { display:grid; grid-template-columns:48px 1fr; gap:8px; font-size:12.5px; line-height:1.58; }
.event-guide strong { color:var(--accent-strong); }
.event-guide span { color:var(--ink-soft); }
.route-connector { color:var(--accent); }
.route-order { background:rgba(18,62,85,.8); }
.step-tip { color:var(--accent-strong); background:var(--accent-tint); padding:8px 10px; border-radius:10px; }
.shichahai-tabs button.active,.phrase-switch button.active { background:var(--accent-strong); border-color:var(--accent-strong); }

.mobile-masthead { display:none; }
.journey-progress { display:none; }
.sheet-title > div > span,.journey-label { font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em; color:var(--accent); }
.more-section + .more-section { margin-top:18px; }
.more-section h3 { margin:0 0 8px; font:800 11px/1.4 "Noto Sans TC",sans-serif; letter-spacing:.1em; color:var(--ink-soft); }
.more-item { background:var(--paper-raised); }
.more-item span { width:34px; height:34px; display:grid; place-items:center; margin:0 auto 5px; border-radius:50%; background:var(--accent-tint); color:var(--accent-strong); font:700 15px/1 "Noto Serif TC",serif; }

.recommendation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.recommend-card { padding:15px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.recommend-card.featured { background:linear-gradient(145deg,var(--accent-tint),var(--paper-raised)); border-color:color-mix(in srgb,var(--accent) 32%,var(--line)); }
.recommend-meta { color:var(--accent-strong); font-size:10.5px; font-weight:800; letter-spacing:.04em; }
.recommend-card h4 { margin:5px 0 6px; font-family:"Noto Serif TC",serif; font-size:15.5px; line-height:1.45; }
.recommend-card p { margin:0; color:var(--ink-soft); font-size:12.5px; line-height:1.65; }
.recommend-actions { display:flex; flex-wrap:wrap; gap:4px 14px; }
.business-evening { margin-bottom:18px; background:var(--accent-tint); border-style:solid; }

@media (max-width:640px) {
  body { background:var(--paper); }
  .app { padding:0 12px calc(30px + var(--mobile-nav-h)); }
  .mobile-masthead {
    display:flex; position:relative; min-height:162px; margin:0 -12px 14px; padding:calc(34px + env(safe-area-inset-top)) 16px 18px;
    flex-direction:column; justify-content:flex-end; overflow:hidden; color:#fff; border-radius:0 0 24px 24px;
    background:linear-gradient(0deg,rgba(6,24,36,.78),rgba(6,24,36,.2)),url("https://upload.wikimedia.org/wikipedia/commons/1/12/Night_view_of_Fukuoka_from_Atago_jinja.jpg") center 57%/cover no-repeat;
    box-shadow:0 18px 38px -28px rgba(7,34,50,.9);
  }
  .mobile-brand { font:600 10px/1.4 "IBM Plex Mono",monospace; letter-spacing:.16em; color:rgba(255,255,255,.82); }
  .mobile-masthead h1 { margin:4px 0 0; color:#fff; font-size:27px; letter-spacing:.01em; text-shadow:0 2px 15px rgba(0,0,0,.45); }
  .mobile-theme-toggle { position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; width:44px; height:44px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(11,35,50,.35); color:#fff; backdrop-filter:blur(10px); }
  .mobile-photo-credit { position:absolute; right:12px; bottom:7px; font-size:8px; color:rgba(255,255,255,.68); }
  .mobile-next { border-radius:22px; padding:19px; margin-bottom:10px; box-shadow:0 18px 38px -26px rgba(20,70,95,.75); }
  .mobile-next h2 { font-size:23px; line-height:1.35; }
  .mobile-actions { grid-template-columns:1.15fr 1fr; }
  .mobile-next .mobile-action.primary { color:#1f5d79; }
  .journey-progress { display:block; margin:0 0 20px; padding:14px 15px; background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
  .journey-cities { position:relative; display:grid; grid-template-columns:repeat(3,1fr); margin-top:9px; }
  .journey-cities::before { content:""; position:absolute; top:13px; left:16%; right:16%; height:1px; background:var(--line-strong); }
  .journey-city { position:relative; z-index:1; display:grid; justify-items:center; color:var(--ink-soft); }
  .journey-city > span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:var(--paper); border:1px solid var(--line-strong); font:600 10px/1 "IBM Plex Mono",monospace; }
  .journey-city strong { margin-top:5px; font-size:12px; }
  .journey-city small { font:500 9px/1.4 "IBM Plex Mono",monospace; }
  .journey-city.active { color:var(--accent-strong); }
  .journey-city.active > span { color:#fff; background:var(--accent-strong); border-color:var(--accent-strong); box-shadow:0 0 0 4px var(--accent-tint); }
  .mobile-bottom-nav { height:var(--mobile-nav-h); padding:7px 8px calc(6px + var(--safe-bottom)); background:color-mix(in srgb,var(--paper-raised) 94%,transparent); border-color:var(--line); }
  .bottom-item { letter-spacing:.02em; }
  .bottom-item span { color:inherit; font-size:18px; }
  .bottom-item.active { color:var(--accent-strong); }
  .sheet-backdrop { background:rgba(7,28,41,.58); }
  .sheet-card { left:8px; right:8px; border-radius:26px; padding:16px 16px 20px; }
  .sheet-title { align-items:flex-start; }
  .sheet-title h2 { margin:1px 0 0; font-size:22px; }
  .more-grid { gap:8px; }
  .more-item { min-height:76px; border-radius:16px; }
  .section-head { margin:12px 0 16px; }
  .section-head h2 { font-size:23px; }
  .section-head p { font-size:12.5px; }
  .city-hero { min-height:138px; margin-top:12px; }
  .section-desc { margin-bottom:16px; font-size:12.5px; }
  .day-card { border-radius:17px; }
  .day-head { grid-template-columns:58px 1fr 18px; }
  .day-banner { min-height:76px; }
  .day-head-text h3 { font-size:14px; }
  .day-detail-inner { padding:0 13px; }
  .day-card.open .day-detail-inner { padding:13px; }
  .info-card { border-radius:18px; }
  .route-card { border-radius:20px; }
  .route-photo { aspect-ratio:16/9; }
  .route-body { padding:15px; }
  .route-guide > div { padding:3px 0; }
  .event-guide > div { grid-template-columns:1fr; gap:2px; }
  .recommendation-grid { grid-template-columns:1fr; }
  .recommend-card { border-radius:15px; }
  .shichahai-place { border-radius:16px; }
  .weather-live-card { margin-top:4px; padding:14px; }
  .weather-scene-card { padding:14px; }
  .weather-now { padding-right:72px; }
  .weather-temp { font-size:32px; }
  .forecast-strip { margin-right:-14px; padding-right:14px; }
  .weather-card { grid-template-columns:50px minmax(0,1fr); gap:10px; padding:13px; }
  .quick-expense-fab { border-radius:999px !important; padding-inline:18px; background:var(--accent-strong) !important; }
}

@media (prefers-reduced-motion:reduce) {
  .weather-art span,.weather-loading span,.weather-refresh.spinning { animation:none !important; }
}