:root {
  --mfs-ink: #17191d;
  --mfs-ink-2: #23262b;
  --mfs-paper: #f8f8f6;
  --mfs-surface: #ffffff;
  --mfs-line: #deded8;
  --mfs-signal: #a92122;
  --mfs-muted: #777a80;
}

.mfs-topbar,
.mfs-dock,
.mfs-sheet,
.mfs-scrim { display: none; }

/* 隐藏页面右侧默认滚动条（保留滚动功能），观感更干净 */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

@media (max-width: 760px) {
  html { scroll-padding-top: 4.5rem; }
  body.mobile-function-ready {
    min-width: 0 !important;
    max-width: 100vw;
    overflow-x: hidden !important;
    padding-top: 4.25rem !important;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important;
    background: var(--mfs-paper) !important;
  }

  .mfs-topbar {
    position: fixed;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .7rem;
    inset: 0 0 auto;
    box-sizing: border-box;
    border-radius: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    text-align: left;
    min-height: 4.25rem;
    padding: max(.62rem, env(safe-area-inset-top)) .9rem .62rem;
    color: #f4f4f1;
    background: rgba(23,25,29,.96);
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 .8rem 2rem rgba(23,25,29,.2);
    backdrop-filter: blur(18px) saturate(110%);
    z-index: 1200;
  }

  /* Keep mfs-topbar dark/fixed even on school-content-enabled pages */
  body.school-content-enabled > header.mfs-topbar {
    position: fixed !important;
    display: grid !important;
    inset: 0 0 auto !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 4.25rem !important;
    padding: max(.62rem, env(safe-area-inset-top)) .9rem .62rem !important;
    color: #f4f4f1 !important;
    background: rgba(23,25,29,.96) !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 .8rem 2rem rgba(23,25,29,.2) !important;
    text-align: left !important;
    z-index: 1200 !important;
  }

  body.mobile-function-ready .mobile-nav { top: 4.25rem !important; z-index: 1250 !important; }
  body.mobile-function-ready .main-nav { position: static !important; top: auto !important; }

  /* 子页面：只显示底部导航栏，不显示顶部栏 */
  body.mfs-bottom-only.mobile-function-ready .mfs-topbar { display: none !important; }
  body.mfs-bottom-only.mobile-function-ready { padding-top: var(--nav-height, 4.25rem) !important; }
  body.mfs-bottom-only.mobile-function-ready .mobile-nav { top: var(--nav-height, 56px) !important; }
  /* 学校详情页不显示底部导航，保留顶部导航 */
  body.mfs-no-dock.mobile-function-ready .mfs-dock { display: none !important; }
  body.mfs-no-dock.mobile-function-ready { padding-bottom: env(safe-area-inset-bottom) !important; }

  /* 手机端隐藏页面左上角旧返回区域 */
  .back-nav { display: none !important; }


  .mfs-icon-btn,
  .mfs-menu-btn,
  .mfs-dock button,
  .mfs-dock a {
    appearance: none;
    border: 0;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  .mfs-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .32rem;
    min-width: 2.55rem;
    height: 2.55rem;
    padding: 0 .55rem;
    color: #f4f4f1;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .78rem;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .mfs-back-btn span {
    line-height: 1;
  }

  .mfs-icon-btn svg,
  .mfs-menu-btn svg,
  .mfs-dock svg,
  .mfs-sheet svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: round; }

  .mfs-title { min-width: 0; line-height: 1.08; text-align: left; }
  .mfs-title small {
    display: block;
    margin-bottom: .25rem;
    color: #d98a8a;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
  }
  .mfs-title strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: .94rem;
    font-weight: 650;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mfs-menu-btn {
    display: none !important;
  }

  .mfs-dock {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .35rem;
    inset: auto .7rem calc(.65rem + env(safe-area-inset-bottom));
    padding: .42rem;
    background: rgba(248,248,246,.96);
    border: 1px solid rgba(169,33,34,.36);
    border-radius: 1.08rem;
    box-shadow: 0 1rem 2.6rem rgba(23,25,29,.2), inset 0 1px rgba(255,255,255,.8);
    backdrop-filter: blur(18px) saturate(110%);
    z-index: 1190;
  }

  .mfs-dock button,
  .mfs-dock a {
    display: flex;
    min-width: 0;
    min-height: 3.1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    color: #777a80;
    background: transparent;
    border-radius: .76rem;
    font-size: .66rem;
    font-weight: 600;
    text-decoration: none;
  }
  .mfs-dock .is-primary { color: #fff; background: #a92122; box-shadow: inset 0 1px rgba(255,255,255,.28); }

  .mfs-scrim {
    position: fixed;
    display: block;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    background: rgba(15,17,20,.5);
    backdrop-filter: blur(3px);
    transition: opacity .24s ease, visibility .24s ease;
    z-index: 1300;
  }
  .mfs-scrim.is-open { visibility: visible; opacity: 1; }

  .mfs-sheet {
    position: fixed;
    display: block;
    inset: auto 0 0;
    max-height: min(82dvh, 46rem);
    overflow: auto;
    padding: .7rem .9rem calc(1.1rem + env(safe-area-inset-bottom));
    color: #f4f4f1;
    background: var(--mfs-ink);
    border-radius: 1.45rem 1.45rem 0 0;
    box-shadow: 0 -1.5rem 4rem rgba(15,17,20,.3);
    transform: translateY(102%);
    transition: transform .34s cubic-bezier(.22,.8,.24,1);
    z-index: 1310;
  }
  .mfs-sheet.is-open { transform: translateY(0); }
  .mfs-sheet__handle { width: 2.8rem; height: .25rem; margin: 0 auto .85rem; background: rgba(255,255,255,.25); border-radius: 1rem; }
  .mfs-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
  .mfs-sheet__head small { display: block; color: #d98a8a; font-size: .66rem; letter-spacing: .13em; }
  .mfs-sheet__head strong { display: block; margin-top: .22rem; font-size: 1.18rem; letter-spacing: -.025em; }
  .mfs-sheet__close { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: #fff; background: rgba(255,255,255,.08); border: 0; border-radius: .72rem; }
  .mfs-group { margin-top: 1rem; }
  .mfs-group > b { display: flex; align-items: center; gap: .32rem; margin: 0 0 .5rem .15rem; color: #a6abb3; font-size: .67rem; font-weight: 650; letter-spacing: .1em; }
  .mfs-group > b svg { width: .88rem; height: .88rem; flex: none; opacity: .85; }
  .mfs-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .48rem; }
  .mfs-grid a {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 3.2rem;
    padding: .72rem .78rem;
    color: #f2f2ee;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: .78rem;
    font-size: .78rem;
    font-weight: 560;
    line-height: 1.25;
    text-decoration: none;
  }
  .mfs-grid a svg { width: 1.05rem; height: 1.05rem; flex: none; color: #d98a8a; }
  .mfs-grid a[aria-current="page"] { color: #fff; background: #a92122; border-color: #d98a8a; }
  .mfs-grid a[aria-current="page"] svg { color: #fff; }

  /* Shared responsive guardrails: preserve each tool's content, remove desktop-only width assumptions. */
  body.mobile-function-ready :where(.container,.page,.page-content,.main-content,.content,.wrapper,.nav-container) {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.mobile-function-ready :where(img,svg,canvas) { max-width: 100%; }
  body.mobile-function-ready :where(input,select,textarea,button) { max-width: 100%; }
  body.mobile-function-ready :where(.filter-bar,.filter-row,.filter-section,.filter-group,.controls,.control-row,.search-wrap) {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }
  body.mobile-function-ready :where(.filter-bar,.controls,.card,.table-wrap,.search-box) { border-radius: .85rem !important; }
  body.mobile-function-ready :where(table) { font-variant-numeric: tabular-nums; }
  body.mobile-function-ready :where(.table-wrap,.table-container,.data-table-wrap) {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.mobile-function-ready :where(dialog,[role="dialog"],.modal-overlay,.modal-box,.popup,.drawer) {
    max-width:100vw;
  }
  body.mobile-function-ready :where(.modal-box,dialog[open]) {
    max-height:calc(100dvh - 5.2rem - env(safe-area-inset-bottom))!important;
    overflow:auto!important;
    overscroll-behavior:contain;
  }
  body.mobile-function-ready :where(.filter-options,.filter-buttons,.btn-group,.school-tags) {
    scrollbar-width:none;
  }
  body.mobile-function-ready :where(.filter-options,.filter-buttons,.btn-group,.school-tags)::-webkit-scrollbar { display:none; }
  body.mobile-function-ready :where(.filter-options,.filter-buttons,.school-tags) {
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.mobile-function-ready :where(.filter-options>*,.filter-buttons>*,.school-tags>*) { flex:0 0 auto; }
  body.mobile-function-ready :where(.chart-container,[id*="chart"],[class*="chart"]) { max-width:100%; }
  body.mobile-function-ready :where(.chart-container) { overflow:hidden; }
  body.mobile-function-ready :where(.sidebar) { max-width: min(88vw,20rem) !important; }
  /* The shell owns mobile back/home navigation; legacy floating returns often use conflicting top/bottom rules. */
  body.mobile-function-ready :where(.floating-back-btn,.back-to-home,.back-home-btn) { display: none !important; }
  body.mobile-function-ready :where(.site-header,.main-nav,.topbar,.navbar) { top: 4.25rem !important; }

  .mfs-icon-btn:active,.mfs-menu-btn:active,.mfs-dock a:active,.mfs-dock button:active,.mfs-grid a:active { transform: scale(.97); }
  .mfs-icon-btn:focus-visible,.mfs-menu-btn:focus-visible,.mfs-dock a:focus-visible,.mfs-dock button:focus-visible,.mfs-grid a:focus-visible,.mfs-sheet__close:focus-visible { outline: 2px solid #a92122; outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .mfs-sheet,.mfs-scrim { transition: none !important; }
}