/* 中华巴洛克视觉系统：砖红、石膏白、黄铜与拱券。保持原有信息层级和交互。 */
:root {
  --bk-ink: #24323a;
  --bk-wine: #632d2b;
  --bk-brick: #944738;
  --bk-brass: #b8894b;
  --bk-paper: #f7f2e9;
  --bk-ivory: #fffdf8;
  --bk-line: #ddcfb8;
  --bk-serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
}

/* 管理平台：像一本街区运营账册，而不是通用 SaaS 控制台。 */
.app-shell {
  color: var(--bk-ink);
  background: repeating-linear-gradient(90deg, transparent 0 63px, #a1703c06 64px), var(--bk-paper);
}
.app-shell .sidebar {
  width: 258px;
  padding: 26px 17px 21px;
  background: linear-gradient(180deg, #28292bfa 0%, #39272af9 62%, #592c2af5 100%), url('/static/route-photo-heritage-facade.png') center/cover;
  border-right: 3px double #b58a55;
  box-shadow: 5px 0 23px #38271f18;
}
.app-shell .sidebar::before {
  content: "HARBIN · LAODAO WAI";
  display: block;
  margin: 0 9px 25px;
  padding-bottom: 13px;
  border-bottom: 1px solid #d6b5856b;
  color: #dfc6a4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .29em;
}
.app-shell .brand {padding: 0 8px 28px; gap: 13px;}
.app-shell .brand-mark {
  width: 48px;
  height: 48px;
  border: 2px double #dfb879;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #d8b07822, inset 0 0 0 3px #252325;
  background: #753c35;
  color: #f8e2b7;
  font-family: var(--bk-serif);
}
.app-shell .brand strong {font: 700 20px var(--bk-serif); letter-spacing: .12em;}
.app-shell .brand small {color: #cfbca6; letter-spacing: .04em; line-height: 1.5;}
.app-shell .nav-label {color: #d2ae81; letter-spacing: .27em;}
.app-shell .sidebar nav {gap: 4px;}
.app-shell .sidebar nav button {
  position: relative;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #ddd1c8;
  transition: background .18s, color .18s, border-color .18s;
}
.app-shell .sidebar nav button span {color: #c6a57c; font-family: Georgia, serif;}
.app-shell .sidebar nav button:hover,
.app-shell .sidebar nav button.active {
  background: #efe0c918;
  border: 1px solid #dbb98968;
  color: #fff9eb;
}
.app-shell .sidebar nav button.active::after {
  content: "";
  position: absolute;
  right: 13px;
  width: 6px;
  height: 6px;
  background: #e0bd86;
  transform: rotate(45deg);
}
.app-shell .visitor-entry {
  border: 1px solid #d6b17b8f;
  border-radius: 4px;
  background: #e1c49512;
  color: #f7dfb5;
  font-weight: 600;
}
.app-shell .sidebar-bottom {border-top: 1px solid #d2ae806e; color: #cab9aa;}
.app-shell .sidebar-bottom strong {color: #f0d5a7;}
.app-shell .main {padding-top: 24px;}
.app-shell .topbar {
  position: relative;
  min-height: 188px;
  overflow: hidden;
  align-items: flex-end;
  padding: 28px 30px;
  border: 1px solid #9b6949;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(90deg, #45272be8 0%, #4c2a2edf 48%, #3928259c 100%), url('/static/route-photo-heritage-architecture.png') center 52%/cover;
  box-shadow: 0 12px 28px #49352b1d;
  color: #fff8ed;
}
.app-shell .topbar::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid #e4bd8888;
  border-radius: 3px;
  pointer-events: none;
}
.app-shell .topbar > * {position: relative; z-index: 1;}
.app-shell .topbar .eyebrow {color: #eacba0; font-size: 11px; letter-spacing: .2em;}
.app-shell .topbar h1 {font: 700 clamp(27px, 2.6vw, 39px) var(--bk-serif); color: #fff9ed; letter-spacing: .07em;}
.app-shell .topbar .top-right {
  max-width: 520px;
  padding: 10px 12px;
  border: 1px solid #e5bf8b66;
  border-radius: 3px;
  background: #2c2022b8;
}
.app-shell .topbar .pill.warn {background: #e6b97920; color: #ffdfaa;}
.app-shell .topbar .clock {color: #f2dfc5;}
.app-shell .topbar .admin-switch {border-color: #e0bd89; color: #fff2d7;}
.app-shell .topbar .admin-switch:hover {background: #e3c18c29;}
.app-shell .panel,
.app-shell .kpi {
  border: 1px solid var(--bk-line);
  border-radius: 6px;
  background: var(--bk-ivory);
  box-shadow: 0 5px 18px #6d453014;
}
.app-shell .panel {border-top: 2px solid #b88c59;}
.app-shell .panel h2 {color: #59312f; font: 700 19px var(--bk-serif); letter-spacing: .025em;}
.app-shell .panel h3 {color: #603631; font-family: var(--bk-serif);}
.app-shell .panel-head {border-bottom: 1px solid #e9ddc9; padding-bottom: 13px;}
.app-shell .kpi {
  position: relative;
  overflow: hidden;
  padding: 20px 21px;
  border-left: 4px solid var(--bk-brick);
  background: linear-gradient(120deg, #fffdf8, #f5ebdc);
}
.app-shell .kpi::after {
  content: "";
  position: absolute;
  top: -29px;
  right: -19px;
  width: 88px;
  height: 125px;
  border: 2px solid #b78b582c;
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}
.app-shell .kpi .label {color: #7e5d4b; font-weight: 600;}
.app-shell .kpi strong {color: #713631; font-family: Georgia, var(--bk-serif);}
.app-shell .pill {border-radius: 3px;}
.app-shell .pill.warn {background: #f9ead0; color: #7f4d21;}
.app-shell .pill.green {background: #eaf0e4; color: #3d6b53;}
.app-shell .pill.red {background: #f8e7e1; color: #9b4b37;}
.app-shell .btn {border-radius: 3px; background: #793e35;}
.app-shell .btn:hover {background: #a1533d;}
.app-shell .btn.secondary {border: 1px solid #d4b995; background: #f4e9d9; color: #713c30;}
.app-shell .btn.gold {background: #a9783e;}
.app-shell .bar {background: #a75641;}
.app-shell .bar.gold {background: #bd9054;}
.app-shell .bar-bg {background: #eee6d8;}
.app-shell th {background: #f2e9d9; color: #694634; font-weight: 700;}
.app-shell th, .app-shell td {border-bottom-color: #eadfce;}
.app-shell .note {background: #f6efe4; border-left-color: var(--bk-brick); color: #695449;}
.app-shell .mini,
.app-shell .status-card,
.app-shell .history-card {border-color: #e4d5be; border-radius: 4px; background: #faf5eb;}
.app-shell .history-card strong, .app-shell .live-metrics strong {color: #833e34;}
.app-shell .live-panel {background: linear-gradient(135deg, #fffdf8, #f6ead9); border-color: #d4ad77;}
.app-shell .live-dot {background: #a44d37; box-shadow: 0 0 0 4px #e7c6b7;}
.app-shell footer {color: #887b71;}

/* 游客端：一张可游览的老道外街巷画报。 */
body:has(.visitor-shell) {
  color: var(--bk-ink);
  background: radial-gradient(circle at 0 0, #e9ddc9 0, transparent 27%),
    repeating-linear-gradient(0deg, transparent 0 39px, #9f78510a 40px), var(--bk-paper);
}
.visitor-shell .site-header {
  height: 92px;
  border-bottom: 3px double #c8a675;
}
.visitor-shell .brand {color: #5a2c2d;}
.visitor-shell .brand-seal {
  width: 51px;
  height: 51px;
  border: 2px double #c99c63;
  border-radius: 50%;
  background: #773a33;
  box-shadow: 0 0 0 4px #e9d9c0, inset 0 0 0 3px #773a33;
  color: #fff2d4;
}
.visitor-shell .brand strong {font-size: 21px; letter-spacing: .1em;}
.visitor-shell .brand small {color: #8c604b;}
.visitor-shell .header-home {border-color: #bc986b; border-radius: 3px; color: #71392f; background: #fffbf4;}
.visitor-shell .header-home:hover {background: #f3e6d2; text-decoration: none;}
.visitor-shell .hero {
  min-height: 465px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 30px 0 34px;
  padding: 65px 49% 60px 7%;
  border: 1px solid #a87451;
  border-radius: 7px;
  background: linear-gradient(120deg, #44272d, #783a33 62%, #9b593d);
  box-shadow: 0 17px 33px #5733272b;
}
.visitor-shell .hero::before {
  content: "";
  position: absolute;
  top: 37px;
  right: 6%;
  bottom: 37px;
  width: 37%;
  border: 4px solid #e1ba81;
  border-radius: 48% 48% 4px 4px;
  background: url('/static/route-photo-flavour-night.png') center/cover;
  box-shadow: 0 0 0 7px #70332a, 0 0 0 9px #e7c18a8a, 13px 13px 26px #230e164f;
}
.visitor-shell .hero::after {
  inset: 11px;
  width: auto;
  height: auto;
  border: 1px solid #e2b78194;
  border-radius: 3px;
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
}
.visitor-shell .hero > * {position: relative; z-index: 1;}
.visitor-shell .hero-ornament {display: none;}
.visitor-shell .hero .eyebrow {color: #f1d3a4;}
.visitor-shell .hero h1 {font-size: clamp(35px, 4.6vw, 60px); line-height: 1.28; margin: 18px 0; color: #fff7e7;}
.visitor-shell .hero p {color: #f0dfcf; max-width: 420px;}
.visitor-shell .hero-button,
.visitor-shell .primary-link {border: 1px solid #f4d7a6; border-radius: 3px; background: #e6bf84; color: #4d2927;}
.visitor-shell .hero-button:hover,
.visitor-shell .primary-link:hover {background: #f4d5a2;}
.visitor-shell .weather-card {
  border: 1px solid #d7bf99;
  border-left: 5px solid var(--bk-brick);
  border-radius: 3px;
  background: linear-gradient(105deg, #fffaf1, #f1e5d1);
  box-shadow: 0 4px 15px #55371b12;
}
.visitor-shell .weather-card strong {color: #61302e;}
.visitor-shell .section-title {position: relative; padding-left: 21px;}
.visitor-shell .section-title::before {content: ""; position: absolute; left: 2px; top: 13px; width: 8px; height: 8px; background: var(--bk-brick); transform: rotate(45deg);}
.visitor-shell .section-title h2 {color: #512a2b; font-size: 32px;}
.visitor-shell .section-title span {color: #9c683d;}
.visitor-shell .feature-grid {gap: 14px;}
.visitor-shell .feature-card {
  min-height: 148px;
  overflow: hidden;
  border: 1px solid #dcc8ac;
  border-radius: 4px;
  background: linear-gradient(135deg, #fffdf7, #f3e9da);
  box-shadow: 4px 5px 0 #dfcbb039;
}
.visitor-shell .feature-card::before {
  content: "";
  position: absolute;
  right: 13px;
  bottom: -28px;
  width: 86px;
  height: 116px;
  border: 2px solid #b9946730;
  border-radius: 48% 48% 0 0;
  pointer-events: none;
}
.visitor-shell .feature-card strong {color: #5c302e;}
.visitor-shell .feature-card small {color: #695c53;}
.visitor-shell .feature-icon {color: #9a4c3b;}
.visitor-shell .card-arrow {color: #924b36;}
.visitor-shell .feature-card:nth-child(-n+2) {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, #1c252412 5%, #261b1acb 75%, #1f1b1be9), url('/static/route-photo-heritage-facade.png') center/cover;
  border-color: #b78d58;
}
.visitor-shell .feature-card:nth-child(2) {
  background-image: linear-gradient(180deg, #1c252412 5%, #261b1acb 75%, #1f1b1be9), url('/static/route-photo-flavour-lanterns.png');
}
.visitor-shell .feature-card:nth-child(-n+2)::before {display: none;}
.visitor-shell .feature-card:nth-child(-n+2) strong,
.visitor-shell .feature-card:nth-child(-n+2) small,
.visitor-shell .feature-card:nth-child(-n+2) .feature-icon,
.visitor-shell .feature-card:nth-child(-n+2) .card-arrow {color: #fff5e3;}
.visitor-shell .home-quote {
  position: relative;
  overflow: hidden;
  border: 1px solid #d3b889;
  border-radius: 4px;
  background: #ece0cc;
}
.visitor-shell .home-quote::after {content: ""; position: absolute; right: 40px; top: -50px; width: 180px; height: 240px; border: 3px solid #8d483923; border-radius: 48% 48% 0 0;}
.visitor-shell .home-quote p {position: relative; z-index: 1; color: #5b302e;}
.visitor-shell .page-intro {
  margin: 22px 0 0;
  padding: 29px 0 20px 22px;
  border-left: 3px solid var(--bk-brick);
  border-bottom: 1px solid #d8bea0;
}
.visitor-shell .page-intro h1 {color: #5b2c2b;}
.visitor-shell .content-card,
.visitor-shell .map-card,
.visitor-shell .progress-card,
.visitor-shell .editorial-card {
  border: 1px solid #dccbb2;
  border-top: 3px solid #a76747;
  border-radius: 5px;
  background: var(--bk-ivory);
  box-shadow: 0 6px 20px #583d2712;
}
.visitor-shell .content-card h2,
.visitor-shell .editorial-card h2 {color: #65332d;}
.visitor-shell .notice {background: #f6ecd9; border-left-color: var(--bk-brick);}
.visitor-shell .bottom-nav {
  border: 1px solid #cbaa79;
  border-top: 3px double #bc8e56;
  border-radius: 5px 5px 0 0;
  background: #fffbf3f7;
  box-shadow: 0 -7px 24px #462a251a;
}
.visitor-shell .bottom-nav a {color: #756b61;}
.visitor-shell .bottom-nav a.active {color: #8f4135;}
.visitor-shell .bottom-nav a.active::after {content: ""; width: 5px; height: 5px; background: #a85c3b; transform: rotate(45deg);}
.visitor-shell .premium-route-hero,
.visitor-shell .premium-route-detail-hero {
  border: 1px solid #d0a66d;
  border-radius: 5px;
  background: linear-gradient(105deg, #44282ee8, #74392fce), url('/static/route-photo-heritage-courtyard.png') center/cover;
}
.visitor-shell .premium-route-detail-hero.amber {background: linear-gradient(110deg, #5c2a2ccc, #8d4b35c4), url('/static/route-photo-flavour-lanterns.png') center/cover;}
.visitor-shell .premium-route-tile {border: 1px solid #c69b62; border-radius: 4px; background: linear-gradient(180deg, #33212520, #241b1beb), url('/static/route-photo-heritage-facade.png') center/cover;}
.visitor-shell .premium-route-tile.amber {background: linear-gradient(180deg, #33212520, #241b1beb), url('/static/route-photo-flavour-night.png') center/cover;}
.visitor-shell .premium-route-stop-body,
.visitor-shell .premium-route-photo {border-color: #ddc8aa; border-radius: 5px;}
.visitor-shell .premium-route-stop-index {background: #813f36; color: #fff2d8;}
.visitor-shell .premium-route-next {border-radius: 4px; background: #6d3530;}

/* 入口和登录页沿用同一砖红与黄铜识别。 */
.entry-brand .brand-seal {border-radius: 50%; background: #71382f; box-shadow: 0 0 0 4px #d9b47a55;}
.entry-hero, .login-panel {border: 2px double #e7bd7d; border-radius: 5px; background: #34242aca;}
.entry-card {border-radius: 4px;}
.visitor-card {background: #e9c48c; border-color: #e9c48c;}

@media (max-width: 900px) {
  .app-shell .topbar {align-items: flex-start; flex-direction: column; justify-content: flex-end;}
  .app-shell .topbar .top-right {max-width: 100%;}
  .visitor-shell .hero {padding-right: 47%;}
}
@media (max-width: 700px) {
  .app-shell .sidebar {width: 100%; padding: 12px 14px; border-right: 0; border-bottom: 3px double #b58a55;}
  .app-shell .sidebar::before {display: none;}
  .app-shell .brand {padding: 0 0 13px;}
  .app-shell .sidebar nav button.active::after {display: none;}
  .app-shell .main {padding: 16px 14px;}
  .app-shell .topbar {min-height: 185px; padding: 25px 21px; background-position: 60% 50%;}
  .app-shell .topbar .top-right {padding: 7px;}
  .app-shell .topbar h1 {font-size: 29px;}
  .visitor-shell .site-header {height: 76px;}
  .visitor-shell .brand-seal {width: 44px; height: 44px;}
  .visitor-shell .brand strong {font-size: 17px;}
  .visitor-shell .brand small {font-size: 9px; letter-spacing: .1em;}
  .visitor-shell .hero {min-height: 405px; padding: 58px 28px 42px; background: #542c2c;}
  .visitor-shell .hero::before {inset: 0; width: auto; border: 0; border-radius: 0; opacity: .28; background-position: center; box-shadow: none;}
  .visitor-shell .hero::after {inset: 8px;}
  .visitor-shell .hero h1 {font-size: clamp(34px, 9vw, 48px);}
  .visitor-shell .hero p {color: #fff3e4;}
  .visitor-shell .feature-grid {gap: 10px;}
  .visitor-shell .feature-card {padding: 16px;}
  .visitor-shell .feature-card:nth-child(-n+2) {min-height: 165px;}
  .visitor-shell .feature-card strong {font-size: 17px;}
  .visitor-shell .weather-card {margin-top: -10px;}
  .visitor-shell .bottom-nav {height: 66px;}
}
@media (max-width: 390px) {
  .visitor-shell .feature-grid {grid-template-columns: 1fr;}
  .visitor-shell .feature-card:nth-child(-n+2) {min-height: 150px;}
  .visitor-shell .header-home {padding: 6px 7px; font-size: 11px;}
  .visitor-shell .bottom-nav a {font-size: 9px;}
}
@media (prefers-reduced-motion: reduce) {
  .visitor-shell .feature-card {transition: none;}
}