:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --bg: #06111b;
  --panel: #0b1824;
  --panel-2: #102333;
  --line: #20384a;
  --text: #edf7fb;
  --muted: #8fa9b9;
  --cyan: #28d7e5;
  --cyan-soft: rgba(40, 215, 229, 0.14);
  --blue: #4e9cff;
  --green: #54d6a2;
  --orange: #ffb657;
  --danger: #ff6f75;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); }

button, input, select { font: inherit; }

.app-shell { display: grid; grid-template-columns: 370px minmax(0, 1fr); width: 100%; height: 100%; }

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, #0d1d2a 0%, var(--panel) 100%);
  border-right: 1px solid var(--line);
  box-shadow: 18px 0 44px rgba(0, 0, 0, 0.22);
  z-index: 2;
}

.brand { display: flex; align-items: center; gap: 14px; padding: 22px 22px 18px; border-bottom: 1px solid var(--line); }
.brand-logo { display: block; width: 52px; height: 52px; border: 1px solid #2d5367; border-radius: 15px; object-fit: cover; box-shadow: 0 10px 28px rgba(40, 164, 229, 0.2); }
.brand h1 { margin: 0; font-size: 20px; font-weight: 700; }
.brand p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.brand-owner { display: inline-block; margin-top: 4px; color: var(--cyan); font-size: 10px; text-decoration: none; }
.brand-owner:hover { text-decoration: underline; }
.brand-owner:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.auth-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 8px 22px; border-bottom: 1px solid var(--line); background: rgba(5, 20, 31, 0.72); }
.auth-status { display: inline-flex; align-items: center; min-width: 0; gap: 7px; color: var(--muted); font-size: 11px; }
.auth-status i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #45d483; box-shadow: 0 0 10px rgba(69, 212, 131, 0.7); }
.auth-status strong { overflow: hidden; max-width: 135px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.auth-actions { display: inline-flex; align-items: center; gap: 6px; }
.auth-bar button, .auth-bar a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 28px; padding: 0 10px; border: 1px solid #31576a; border-radius: 7px; background: #163042; color: var(--text); font-size: 11px; text-decoration: none; cursor: pointer; }
.auth-bar button:hover, .auth-bar a:hover { border-color: var(--cyan); background: #1b3b50; }
.auth-bar button:disabled { cursor: wait; opacity: 0.65; }
.auth-bar button:focus-visible, .auth-bar a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.selector-block { padding: 18px 22px 14px; }
.selector-block label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.route-search-field { position: relative; }
.route-search-icon { position: absolute; left: 13px; top: 50%; color: #7596a8; font-size: 22px; line-height: 1; pointer-events: none; transform: translateY(-53%) rotate(-18deg); }
.route-search-field input { width: 100%; height: 44px; padding: 0 42px 0 40px; border: 1px solid #2b4b5f; border-radius: 10px; background: #0d202f; color: var(--text); font-size: 13px; outline: none; appearance: none; }
.route-search-field input::placeholder { color: #708c9c; }
.route-search-field input::-webkit-search-cancel-button { display: none; }
.route-search-field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.route-search-field input:disabled { cursor: wait; opacity: 0.7; }
.route-search-field button { position: absolute; right: 7px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #91abba; font-size: 20px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.route-search-field button:hover { background: #193548; color: var(--text); }
.route-search-field button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.route-search-field button[hidden] { display: none; }
.route-search-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 27px; padding: 6px 1px 5px; color: var(--muted); font-size: 10px; }
.route-search-meta.no-results { color: var(--danger); }
.route-search-hint { flex: 0 0 auto; padding: 2px 5px; border: 1px solid #29485a; border-radius: 5px; color: #6f8c9d; font-size: 9px; }
.selector-block .route-select-label { margin-top: 2px; }
.selector-block select { width: 100%; height: 44px; padding: 0 38px 0 12px; border: 1px solid #2b4b5f; border-radius: 10px; background: var(--panel-2); color: var(--text); outline: none; }
.selector-block select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.selector-block select:disabled { cursor: not-allowed; opacity: 0.65; }

.route-summary { margin: 0 22px 16px; padding: 16px; border: 1px solid #244152; border-radius: 14px; background: rgba(16, 35, 51, 0.8); }
.route-heading { display: flex; gap: 12px; align-items: flex-start; }
.route-number { flex: 0 0 auto; display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 8px; border-radius: 12px; background: var(--cyan); color: #031820; font-size: 18px; font-weight: 800; }
.route-heading h2 { margin: 0; font-size: 16px; line-height: 1.55; font-weight: 700; }
.route-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.facts div { min-width: 0; }
.facts dt { margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.facts dd { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 13px; }

.promo-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; gap: 11px; align-items: center; margin: 0 22px 16px; padding: 11px 12px; border: 1px solid #2b5366; border-radius: 13px; background: linear-gradient(135deg, rgba(40, 215, 229, 0.12), rgba(78, 156, 255, 0.07)); color: var(--text); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease, background 160ms ease; }
.promo-card:hover { border-color: var(--cyan); background: linear-gradient(135deg, rgba(40, 215, 229, 0.18), rgba(78, 156, 255, 0.11)); transform: translateY(-1px); }
.promo-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.promo-card img { display: block; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.promo-copy { display: block; min-width: 0; }
.promo-kicker { display: block; margin-bottom: 2px; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; }
.promo-copy strong { display: block; font-size: 13px; line-height: 1.4; }
.promo-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.promo-arrow { color: var(--cyan); font-size: 18px; }

.community-card { margin: 0 22px 10px; padding: 9px 10px; border: 1px solid #294d62; border-radius: 13px; background: rgba(10, 27, 40, 0.78); }
.community-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.community-badge { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid rgba(40, 215, 229, 0.55); border-radius: 10px; background: var(--cyan-soft); color: var(--cyan); font-size: 11px; font-weight: 800; }
.community-heading h3 { margin: 0; font-size: 13px; line-height: 1.4; }
.community-heading p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.community-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.community-links a { position: relative; display: block; min-width: 0; min-height: 50px; padding: 7px 30px 7px 8px; border: 1px solid #25485b; border-radius: 9px; background: #0d2231; color: var(--text); text-decoration: none; transition: border-color 160ms ease, background 160ms ease; }
.community-links a:hover { border-color: var(--cyan); background: #123044; }
.community-links a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.community-links a > span { min-width: 0; }
.community-links strong { display: -webkit-box; overflow: hidden; font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.community-links small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.community-links b { position: absolute; right: 6px; top: 50%; padding: 3px 5px; border-radius: 6px; background: rgba(40, 215, 229, 0.14); color: var(--cyan); font-size: 9px; font-weight: 700; transform: translateY(-50%); }

.stops-section { display: flex; flex: 1; min-height: 0; flex-direction: column; padding: 0 22px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.section-title h3 { margin: 0; font-size: 14px; }
.section-title span { color: var(--muted); font-size: 12px; }
.stop-list { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0 3px 6px 0; list-style: none; }
.stop-list li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 9px 0; }
.stop-list li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 36px; bottom: -8px; width: 1px; background: #2d5364; }
.stop-index { display: grid; place-items: center; width: 29px; height: 29px; border: 2px solid var(--cyan); border-radius: 50%; background: #0b1a25; color: var(--text); font-size: 12px; font-weight: 700; z-index: 1; }
.stop-copy strong { display: block; font-size: 13px; line-height: 1.45; }
.stop-copy span { color: var(--muted); font-size: 11px; }

.site-footer { flex: 0 0 auto; padding: 12px 22px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.55; }
.site-footer p { margin: 0; }
.site-footer p + p { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer .footer-owner { color: var(--cyan); }
.site-footer a:hover { color: var(--cyan); }
.site-footer a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.map-panel { position: relative; isolation: isolate; min-width: 0; min-height: 0; overflow: hidden; background: #dedede; }
.map-image { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; will-change: transform; transition: filter 120ms ease, opacity 120ms ease; }
.map-image[hidden] { display: none; }
.map-image.is-loading { filter: saturate(0.72) brightness(0.78); opacity: 0.86; }
#map-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#map-canvas.dragging { cursor: grabbing; }

.map-render-status { position: absolute; left: 50%; top: 50%; z-index: 3; max-width: min(430px, calc(100% - 36px)); padding: 10px 14px; border: 1px solid #31576a; border-radius: 10px; background: rgba(7, 20, 29, 0.92); color: var(--text); font-size: 12px; text-align: center; pointer-events: none; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); backdrop-filter: blur(10px); transform: translate(-50%, -50%); }
.map-render-status[data-state="loading"]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border: 2px solid rgba(40, 215, 229, 0.3); border-top-color: var(--cyan); border-radius: 50%; vertical-align: -1px; animation: map-status-spin 0.75s linear infinite; }
.map-render-status[data-state="error"] { border-color: rgba(255, 111, 117, 0.65); color: #ffd9dc; }
.map-render-status[hidden] { display: none; }
@keyframes map-status-spin { to { transform: rotate(360deg); } }

.map-toolbar { position: absolute; top: 18px; right: 18px; z-index: 3; display: flex; gap: 8px; padding: 6px; border: 1px solid #294556; border-radius: 12px; background: rgba(8, 23, 33, 0.88); backdrop-filter: blur(12px); }
.map-toolbar button { height: 34px; min-width: 36px; padding: 0 11px; border: 1px solid transparent; border-radius: 8px; background: #163042; color: var(--text); cursor: pointer; }
.map-toolbar button:hover { border-color: #3a6478; background: #1b3b50; }
.map-toolbar button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.map-settings {
  position: absolute;
  top: 76px;
  right: 18px;
  width: min(270px, calc(100% - 36px));
  padding: 14px;
  border: 1px solid #294556;
  border-radius: 13px;
  background: rgba(7, 20, 29, 0.95);
  color: var(--text);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  z-index: 4;
}
.map-settings[hidden] { display: none; }
.map-settings-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.map-settings-title strong { font-size: 14px; }
.map-settings-title button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: #163042; color: var(--text); font-size: 20px; cursor: pointer; }
.color-setting, .check-setting, .range-setting { display: flex; align-items: center; min-height: 34px; gap: 10px; color: var(--muted); font-size: 12px; }
.color-setting input[type="color"] { width: 38px; height: 25px; padding: 2px; border: 1px solid #496579; border-radius: 5px; background: #f4f4f4; cursor: pointer; }
.check-setting input { width: 16px; height: 16px; accent-color: var(--cyan); }
.range-setting { justify-content: space-between; margin-top: 3px; }
.range-setting output { color: var(--text); font-variant-numeric: tabular-nums; }
.label-scale { width: 100%; accent-color: var(--cyan); }
.reset-map-settings { width: 100%; height: 36px; margin-top: 12px; border: 1px solid #31576a; border-radius: 9px; background: #163042; color: var(--text); cursor: pointer; }
.reset-map-settings:hover { border-color: var(--cyan); background: #1b3b50; }
.map-settings button:focus-visible, .map-settings input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.map-legend { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 12px; border: 1px solid #294556; border-radius: 10px; background: rgba(8, 23, 33, 0.88); color: var(--muted); font-size: 11px; backdrop-filter: blur(12px); }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-line { display: inline-block; width: 26px; height: 0; border-top: 4px solid var(--cyan); border-radius: 4px; }
.legend-line.ferry { border-top-color: var(--blue); border-top-style: dashed; }
.legend-stop { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 2px solid var(--cyan); border-radius: 50%; background: #0b1a25; }
.map-protection-note { position: absolute; left: 18px; bottom: 68px; z-index: 2; max-width: min(490px, calc(100% - 36px)); padding: 7px 10px; border: 1px solid rgba(84, 214, 162, 0.6); border-radius: 8px; background: rgba(6, 24, 27, 0.88); color: #c8f8e4; font-size: 11px; line-height: 1.45; pointer-events: none; backdrop-filter: blur(10px); }
.map-protection-note::before { content: "🔒"; margin-right: 6px; }
.map-hint { position: absolute; right: 18px; bottom: 18px; z-index: 2; padding: 6px 9px; border: 1px solid rgba(77, 118, 139, 0.65); border-radius: 8px; background: rgba(6, 17, 27, 0.82); color: #edf7fb; font-size: 11px; pointer-events: none; backdrop-filter: blur(10px); }

.captcha-overlay { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 20px; background: rgba(2, 7, 12, 0.94); color: var(--text); }
.captcha-overlay[hidden] { display: none; }
.captcha-card { width: min(440px, 100%); padding: 28px; border: 1px solid #31576a; border-radius: 8px; background: #091721; text-align: center; box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55); }
.captcha-kicker { margin: 0 0 7px; color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.captcha-card h2 { margin: 0 0 12px; font-size: 24px; }
.captcha-status { min-height: 42px; margin: 0 0 14px; color: #bdcbd4; font-size: 13px; line-height: 1.6; }
.captcha-status[data-state="error"] { color: #ffd2d5; }
.captcha-status[data-state="success"] { color: #c8f8e4; }
.captcha-element { width: 100%; min-height: 40px; }
.captcha-card button { min-width: 120px; height: 40px; margin-top: 16px; border: 1px solid #3a6478; border-radius: 6px; background: #163042; color: var(--text); cursor: pointer; }
.captcha-card button:hover { border-color: var(--cyan); background: #1b3b50; }
.captcha-note { margin: 14px 0 0; color: #8fa3af; font-size: 11px; line-height: 1.55; }
.captcha-open, .captcha-open body { overflow: hidden; }

.security-ban-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(2, 7, 12, 0.96); color: var(--text); }
.security-ban-overlay[hidden] { display: none; }
.security-ban-card { width: min(560px, 100%); padding: 34px; border: 1px solid rgba(255, 111, 117, 0.72); border-radius: 18px; background: linear-gradient(160deg, #17121b, #09141e); text-align: center; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 45px rgba(255, 111, 117, 0.12); }
.security-ban-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 17px; border: 2px solid var(--danger); border-radius: 50%; color: var(--danger); font-size: 31px; font-weight: 800; }
.security-ban-kicker { margin: 0 0 8px; color: var(--danger); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; }
.security-ban-card h2 { margin: 0 0 16px; font-size: clamp(25px, 5vw, 38px); }
.security-ban-card p { margin: 10px 0 0; color: #bdcbd4; font-size: 14px; line-height: 1.75; }
.security-ban-card a { color: var(--cyan); font-weight: 700; }
.security-locked, .security-locked body { overflow: hidden; }

@media (min-width: 851px) {
  .sidebar { overflow-y: auto; scrollbar-color: #35586b transparent; scrollbar-width: thin; }
  .sidebar::-webkit-scrollbar { width: 7px; }
  .sidebar::-webkit-scrollbar-thumb { border-radius: 8px; background: #35586b; }
  .stops-section { flex: 0 0 160px; min-height: 160px; }
}

@media (max-width: 850px) {
  html, body { overflow: auto; }
  .app-shell { grid-template-columns: 1fr; grid-template-rows: auto 68vh; height: auto; min-height: 100%; }
  .sidebar { max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .stops-section { max-height: 260px; }
  .map-panel { min-height: 520px; }
  .map-hint { display: none; }
  .route-search-field input { font-size: 16px; }
}