:root{
  --blue:#0B5FA5; --bg:#006994; --text:#ffffff; --muted:#e0e6eb; --line:#1a5a7a; --card:#0d4a66;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);font-size:16px;font-weight:600}
.top{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border-bottom:1px solid var(--line);background:var(--bg)}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:40px;height:40px;border-radius:12px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px}
.title{font-weight:900;line-height:1;font-size:20px}
.tagline{font-size:14px;color:var(--muted);margin-top:2px;max-width:360px;font-weight:600}
.lang{display:flex;gap:6px;flex-wrap:wrap}
.langBtn{border:2px solid #00d4ff;background:transparent;border-radius:12px;padding:6px 10px;font-weight:800;cursor:pointer;height:36px;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none}
.langBtn img{height:24px;width:auto;border-radius:4px;opacity:0.9;transition:opacity 0.2s}
.view{padding:14px 14px 78px;max-width:740px;margin:0 auto;background:var(--bg)}
.card{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:14px;margin:10px 0;color:#fff}
.h1{font-size:32px;font-weight:950;margin:0 0 12px;line-height:1.2}
.p{color:var(--muted);margin:0 0 14px;line-height:1.5;font-size:16px}
.grid{display:grid;grid-template-columns:1fr;gap:10px}
.routeBtn{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:14px;text-align:left;color:#fff;cursor:pointer;transition:background-color 0.2s,border-color 0.2s}
.routeBtn:hover{background-color:#0d4a66;border-color:#00d4ff}
.routeBtn strong{display:block;font-size:18px;font-weight:900;color:#fff !important}
.routeBtn span{display:block;color:#e0e6eb;margin-top:6px;font-size:14px}
.cta{display:block;width:100%;border:0;border-radius:16px;background:#00d4ff;color:#000;padding:18px;font-weight:950;font-size:18px;cursor:pointer;transition:background-color 0.2s,transform 0.1s}
.cta:hover{background:#00e6ff;transform:scale(1.02)}
.cta:active{transform:scale(0.98)}
.small{font-size:13px;color:var(--muted);margin-top:12px;font-weight:600}
.tabbar{position:fixed;left:0;right:0;bottom:0;border-top:1px solid var(--line);background:var(--bg);display:grid;grid-template-columns:repeat(4,1fr)}
.tab{padding:14px 8px;border:0;background:var(--bg);color:#fff;font-weight:900;font-size:16px}
.tab.active{color:#00d4ff}

/* Force white text on route buttons */
.routeBtn strong {
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 16px !important; /* Normal size since we're using SVG */
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG icons styling */
.routeBtn strong svg {
  width: 32px !important;
  height: 32px !important;
  color: #fff !important;
  fill: none !important;
  stroke: #fff !important;
}

/* Additional force for any text in route buttons */
.routeBtn * {
  color: inherit !important;
}

/* Special class for forced white text */
.force-white {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1;
}

/* Minimalist Icons */
.tab::before{content:'';display:inline-block;width:20px;height:20px;margin-right:4px;vertical-align:middle;background:transparent}
.tab[data-tab="start"]::before{content:'▶';font-size:16px;width:auto;margin-right:6px}
.tab[data-tab="route"]::before{content:'🗺';font-size:16px;width:auto;margin-right:6px;filter:grayscale(100%)}
.tab[data-tab="stops"]::before{content:'⊙';font-size:16px;width:auto;margin-right:6px}
.tab[data-tab="help"]::before{content:'?';font-size:16px;font-weight:900;width:auto;margin-right:6px}

/* Icon transitions */
.tab{transition:color 0.2s,background-color 0.2s}
.langBtn{transition:border-color 0.2s,background-color 0.2s}
.langBtn:hover{border-color:#fff}
.tab:hover{color:#00d4ff}

/* Page Title */
.pageTitle{
  text-align:center;
  font-weight:900;
  font-size:26px;
  margin-bottom:24px;
  color:#00d4ff;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:12px 0;
  border-bottom:2px solid #00d4ff;
  border-top:2px solid #00d4ff;
}

/* Route Info Grid */
.routeInfo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.infoItem{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px;
  background:rgba(0,212,255,0.1);
  border-radius:12px;
  border-left:3px solid #00d4ff;
}

.infoLabel{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.infoValue{
  font-size:20px;
  font-weight:900;
  color:#00d4ff;
}

/* Route List */
.routeList{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.routeList li{
  font-size:16px;
  color:var(--muted);
  font-weight:600;
  line-height:1.5;
}

/* Secondary Button */
.secondaryBtn{
  display:block;
  width:100%;
  border:2px solid #00d4ff;
  background:transparent;
  color:#00d4ff;
  padding:16px;
  border-radius:16px;
  font-weight:950;
  font-size:16px;
  cursor:pointer;
  transition:background-color 0.2s,color 0.2s;
}

.secondaryBtn:hover{
  background:#00d4ff;
  color:#000;
}