/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#1565C0;
  --primary-light:#1E88E5;
  --primary-dark:#0D47A1;
  --tsurugi:#43A047;
  --tsurugi-light:#66BB6A;
  --komatsu:#FB8C00;
  --komatsu-light:#FFA726;
  --inbound:#1E88E5;
  --inbound-light:#42A5F5;
  --bg:#F0F2F5;
  --card:#FFFFFF;
  --text:#1A1A2E;
  --text-secondary:#5F6368;
  --text-light:#9AA0A6;
  --border:#E0E0E0;
  --shadow:0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.12);
  --radius:12px;
  --radius-sm:8px;
  --nav-height:64px;
  --header-height:56px;
}
/* ===== Dark Theme ===== */
[data-theme="dark"]{
  --primary:#64B5F6;
  --primary-light:#90CAF9;
  --primary-dark:#42A5F5;
  --bg:#121212;
  --card:#1E1E1E;
  --text:#E0E0E0;
  --text-secondary:#9E9E9E;
  --text-light:#757575;
  --border:#333333;
  --shadow:0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.4);
}
[data-theme="dark"] header{background:#1A237E}
[data-theme="dark"] #bottom-nav{background:#1E1E1E;border-top-color:#333}
[data-theme="dark"] .trip-item{border-color:#333}
[data-theme="dark"] .trip-item.past{opacity:0.5}
[data-theme="dark"] .trip-item.selected{background:#263238;border-color:var(--primary)}
[data-theme="dark"] .trip-item.next-dep{border-color:#43A047}
[data-theme="dark"] select,
[data-theme="dark"] input{background-color:#2A2A2A;color:#E0E0E0;border-color:#444}
[data-theme="dark"] .map-legend{background:rgba(30,30,30,0.9);color:#ccc}
[data-theme="dark"] .map-info-bar{background:rgba(30,30,30,0.95);color:#E0E0E0}
[data-theme="dark"] .stop-tooltip{background:#333!important;color:#E0E0E0!important;border-color:#555!important}
[data-theme="dark"] .seg-transfer{background:transparent;color:#9E9E9E}
[data-theme="dark"] .bus-label{text-shadow:0 0 3px #000,0 0 3px #000,0 0 3px #000;color:#fff}
[data-theme="dark"] .swap-btn{background:#333}
[data-theme="dark"] .countdown-hero{background:linear-gradient(135deg,#1A237E,#283593)}

html{font-size:17px;-webkit-text-size-adjust:100%}
body{
  font-family:'Noto Sans JP',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow:hidden;
  height:100vh;
  height:100dvh;
  width:100vw;
}
button{font-family:inherit;border:none;cursor:pointer;background:none}
input,select{font-family:inherit}

/* ===== App Layout ===== */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%}
header{
  height:var(--header-height);
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  padding:0 12px;
  flex-shrink:0;
  z-index:1000;
}
.header-side{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
}
.header-right{justify-content:flex-end}
.header-center{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-size:0.9rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  white-space:nowrap;
}
.header-center .header-time{
  font-size:1.25rem;
  font-weight:700;
  margin-left:4px;
}
.header-center #header-dow{
  display:inline-block;
  width:3em;
  text-align:center;
}
header .about-link{
  color:#fff;
  opacity:0.7;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  transition:opacity 0.2s,background 0.2s;
  text-decoration:none;
  flex-shrink:0;
}
header .about-link:hover{opacity:1;background:rgba(255,255,255,0.15)}
/* Language dropdown */
.lang-dropdown{position:relative;flex-shrink:0}
.lang-dropdown-btn{
  color:#fff;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.5px;
  background:rgba(255,255,255,0.2);
  padding:3px 6px 3px 10px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:3px;
  height:26px;
  transition:background 0.2s;
  cursor:pointer;
}
.lang-dropdown-btn:hover{background:rgba(255,255,255,0.35)}
.lang-dropdown-chevron{
  transition:transform 0.2s;
  opacity:0.8;
  flex-shrink:0;
}
.lang-dropdown.open .lang-dropdown-chevron{transform:rotate(180deg)}
.lang-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  background:var(--card);
  border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,0.18);
  overflow:hidden;
  min-width:130px;
  z-index:100;
  animation:langDropIn 0.15s ease;
}
.lang-dropdown.open .lang-dropdown-menu{display:block}
@keyframes langDropIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.lang-option{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 14px;
  font-size:0.82rem;
  font-weight:600;
  color:var(--text);
  background:none;
  cursor:pointer;
  transition:background 0.15s;
}
.lang-option:hover{background:var(--bg)}
.lang-option.active{color:var(--primary)}
.lang-option-name{font-weight:400;color:var(--text-secondary);font-size:0.78rem}
/* Theme toggle button */
.theme-toggle-btn{
  color:#fff;
  opacity:0.7;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  transition:opacity 0.2s,background 0.2s;
  flex-shrink:0;
}
.theme-toggle-btn:hover{opacity:1;background:rgba(255,255,255,0.15)}
.theme-toggle-btn .icon-moon{display:none}
[data-theme="dark"] .theme-toggle-btn .icon-sun{display:none}
[data-theme="dark"] .theme-toggle-btn .icon-moon{display:block}
main{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 8px);
  min-height:0;
}
.tab-content{display:none;padding:12px 16px;animation:fadeIn 0.2s ease}
.tab-content.active{display:block}
#tab-search.active{
  display:flex;flex-direction:column;
  height:100%;overflow:hidden;
  padding-bottom:0;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ===== Bottom Nav ===== */
#bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:var(--nav-height);
  background:var(--card);
  border-top:1px solid var(--border);
  display:flex;
  z-index:10;
  padding-bottom:env(safe-area-inset-bottom);
}
#bottom-nav button{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:var(--text-light);
  font-size:0.75rem;
  font-weight:500;
  transition:color 0.2s;
  padding:4px 0;
}
#bottom-nav button.active{color:var(--primary)}
#bottom-nav button svg{width:24px;height:24px;transition:transform 0.2s}
#bottom-nav button.active svg{transform:scale(1.1)}

/* ===== Cards ===== */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:12px;
}

/* ===== Common ===== */
.no-results{
  text-align:center;
  padding:32px 16px;
  color:var(--text-secondary);
  font-size:0.95rem;
}

/* ===== Scrollbar ===== */
main::-webkit-scrollbar{width:4px}
main::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}

/* ===== Responsive ===== */
@media(min-width:600px){
  .tab-content{padding:16px 24px}
}
@media(min-width:900px){
  #app{max-width:480px;margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border)}
  #bottom-nav{max-width:480px;left:50%;transform:translateX(-50%)}
}