*,
*::before,
*::after {
  box-sizing:border-box;
}

/* =========================
   全站：日/夜主题切换按钮（首页同款图标）
   含 theme.js 的页面由其接管；仅在未引入 theme.js 时由 analytics-tracker.js 兜底
   ========================= */
.theme-toggle-btn{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:10060;
  width:38px;
  height:38px;
  margin:0;
  padding:0;
  border-radius:999px;
  cursor:pointer;
  background:rgba(15,23,42,.55);
  border:1px solid var(--border, rgba(148,163,184,.22));
  color:var(--text, #e2e8f0);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease, box-shadow .22s ease, background-color .2s ease, border-color .2s ease;
  backdrop-filter:blur(10px);
}
.theme-toggle-btn:hover{
  background:rgba(59,130,246,.25);
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 30px rgba(37,99,235,.28);
}
.theme-toggle-btn:active{transform:translateY(0) scale(.96);}
.theme-icon{width:18px;height:18px;display:block;fill:currentColor;}

@media (max-width: 520px){
  .theme-toggle-btn{right:10px;bottom:10px;width:38px;height:38px;}
}

@media (max-width: 768px) {
  html,
  body {
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  img,
  video,
  canvas,
  svg {
    max-width:100%;
  }

  input,
  select,
  textarea,
  button {
    max-width:100%;
  }

  .container,
  .page-shell,
  .app,
  .shell {
    width:100% !important;
    max-width:100% !important;
    margin-inline:auto !important;
    padding-left:max(12px, env(safe-area-inset-left)) !important;
    padding-right:max(12px, env(safe-area-inset-right)) !important;
  }

  .layout {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .grid,
  .layout,
  .dashboard-grid,
  .content-grid {
    grid-template-columns:1fr !important;
    min-width:0 !important;
  }

  .grid > *,
  .layout > *,
  .dashboard-grid > *,
  .content-grid > * {
    min-width:0 !important;
  }

  .card,
  .panel,
  .sheet,
  .section,
  .result-card,
  .summary-card {
    max-width:100% !important;
    min-width:0 !important;
  }

  .main,
  .page.active {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex-basis:auto !important;
  }

  .toolbar,
  .controls,
  .filters,
  .tabs,
  .tab-bar,
  .tool-subtabs {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  #giftNav,
  #sheetNav,
  #woam-sidebar {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:0 1 auto !important;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  #giftNav,
  #sheetNav {
    max-width:calc(100vw - 24px) !important;
  }

  #giftNav .nav-item,
  #sheetNav .nav-item {
    flex:0 0 min(180px, 72vw) !important;
  }

  #woam-sidebar .woam-sidebar-item,
  #woam-sidebar .woam-sidebar-exit {
    flex:0 0 auto !important;
  }

  .admin-toolbar {
    flex-wrap:wrap !important;
    overflow-x:visible !important;
  }

  .admin-toolbar input {
    min-width:0 !important;
    width:100% !important;
    flex:1 1 100% !important;
  }

  #giftWorkspace,
  .workspace-grid,
  .workspace-card,
  .section-card,
  .stats-grid,
  .section-grid,
  .image-grid,
  .stat-card {
    min-width:0 !important;
    max-width:100% !important;
  }

  #giftWorkspace,
  .workspace-grid {
    width:100% !important;
  }

  .workspace-title,
  .workspace-summary,
  .section-card h3,
  .stat-label,
  .stat-value {
    overflow-wrap:anywhere;
  }

  .section-table-wrap,
  .detail-table-wrap,
  .kasha-bundle-wrap {
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .table-wrap,
  .table-wrapper,
  .table-container,
  .result-table-wrapper {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .table-wrap > table,
  .table-wrapper > table,
  .table-container > table,
  .result-table-wrapper > table {
    width:max-content;
    min-width:100%;
  }

  .table-wrap img,
  .table-wrapper img,
  .table-container img,
  .result-table-wrapper img {
    max-width:72px;
    height:auto;
  }
}

@media (max-width: 680px) {
  .hero-list .hero-intro {
    grid-template-columns:1fr !important;
  }

  .hero-list .hero-image-wrap {
    min-height:0 !important;
    max-height:260px;
  }

  .hero-list .hero-image {
    width:min(72vw, 220px) !important;
    max-width:100% !important;
    max-height:250px;
  }

  .hero-list .info,
  .hero-list .obtain-grid {
    grid-template-columns:1fr !important;
  }

  .hero-list .info h3,
  .hero-list .line,
  .hero-list .line-obtain,
  .hero-list .skill-tab {
    white-space:normal !important;
  }

  .hero-list .skill-tabs {
    gap:6px;
  }
}

@media (max-width: 640px) {
  .sheet {
    min-width:0;
  }

  .sheet .title {
    font-size:22px !important;
    line-height:1.25;
  }

  .sheet .subtitle-row {
    align-items:flex-start !important;
    flex-direction:column;
    gap:4px;
  }

  .sheet .subtitle-row h2 {
    font-size:18px !important;
    line-height:1.3;
  }

  .sheet .note-card {
    border-radius:12px;
    padding:12px;
  }

  .sheet .note-body {
    font-size:13px !important;
    line-height:1.65;
  }

  .sheet .table-wrap {
    max-width:100%;
    margin-inline:-8px;
    padding-inline:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .sheet .table-wrap table {
    width:max-content;
    min-width:100%;
    border-collapse:collapse;
  }

  .sheet .table-wrap td,
  .sheet .table-wrap th {
    min-width:64px;
    padding:6px 8px !important;
    font-size:12px !important;
    line-height:1.35;
    white-space:pre-wrap;
  }

  .sheet .table-wrap img {
    max-width:56px !important;
    max-height:56px !important;
  }
}

@media (max-width: 520px) {
  .auth-bar {
    top:8px;
    right:8px;
    left:auto;
    justify-content:flex-end;
    gap:6px;
    padding:5px 8px;
    max-width:calc(100vw - 16px);
    overflow:hidden;
  }

  .auth-pill {
    max-width:92px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .version-tag {
    display:none !important;
  }

  body > .auth-bar ~ .container {
    padding-top:118px;
  }

  .featured-tools-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .card.featured-tool-card {
    min-height:96px !important;
    aspect-ratio:auto !important;
    overflow:hidden;
  }

  .featured-tool-link {
    gap:6px !important;
    min-height:96px !important;
    padding:8px !important;
  }

  .featured-tool-badge {
    min-height:20px !important;
    max-width:100%;
    padding:0 6px !important;
    border-radius:8px 8px 8px 0 !important;
    font-size:.68rem !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .featured-tool-main {
    display:flex !important;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:6px !important;
  }

  .featured-tool-icon {
    order:0;
    width:38px !important;
    height:38px !important;
    border-radius:12px !important;
    justify-self:end !important;
  }

  .tool-entry-title {
    font-size:.82rem !important;
    line-height:1.18 !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .featured-tool-card .desc {
    display:none !important;
  }

  .featured-tool-card .pill,
  .tool-tile-card .pill,
  .tool-tile-card .desc,
  .tool-tile-card .actions {
    display:none !important;
  }

  .tool-warehouse-grid {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .tool-tile-card {
    aspect-ratio:auto !important;
    min-height:82px !important;
    padding:8px 4px !important;
    overflow:hidden;
  }

  .tool-tile-link {
    align-content:center !important;
    gap:6px !important;
  }

  .tool-tile-icon {
    width:34px !important;
    height:34px !important;
    border-radius:10px !important;
    font-size:1rem !important;
  }

  .tool-tile-name {
    font-size:.78rem !important;
    line-height:1.16 !important;
    -webkit-line-clamp:2 !important;
    word-break:keep-all;
    overflow-wrap:anywhere;
  }

  .changelog-btn {
    max-width:calc(100vw - 116px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* 全站鸣谢页脚（大多数页面都会引入本 CSS） */
:root{
  --wjdr-thanks-text: "制作：2041茗子、飞菇\A数据：飞菇、甜甜、627贰叁、奶酪、719缥缈、2041茗子\A测试：2041茗子、飞菇、甜甜、627贰叁、奶酪、719缥缈、755脆脆、2144煤球\A\A感谢以上所有人对本攻略站的付出";
}
body::after{
  content: var(--wjdr-thanks-text);
  white-space: pre-wrap;
  display:block;
  margin: 22px auto 16px;
  max-width: min(1100px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 12px;
  background: rgba(15,23,42,.18);
  color: rgba(148,163,184,.95);
  font-size: 12px;
  line-height: 1.65;
  box-sizing: border-box;
}
body.theme-day::after{
  background: rgba(255,255,255,.55);
  border-color: rgba(15,23,42,.14);
  color: rgba(71,85,105,.95);
}

/* 如果页面有版权备案 footer，就把鸣谢放在 footer 上方更贴近 */
footer.wjdr-footer::before{
  content: var(--wjdr-thanks-text);
  white-space: pre-wrap;
  display:block;
  width:100%;
  max-width:min(100%,52rem);
  margin: 0 auto 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(148,163,184,.22));
  border-radius: 12px;
  background: rgba(15,23,42,.18);
  color: var(--muted,#94a3b8);
  font-size: 12px;
  line-height: 1.65;
  box-sizing: border-box;
}
html[data-theme="day"] footer.wjdr-footer::before,
body.theme-day footer.wjdr-footer::before{
  background: rgba(255,255,255,.55);
  border-color: rgba(15,23,42,.14);
  color: rgba(71,85,105,.95);
}

/* 避免有 footer 的页面重复显示（现代浏览器支持 :has） */
body:has(footer.wjdr-footer)::after{
  content: none;
  display:none;
}
@media (max-width: 520px){
  body::after{
    margin: 18px auto 14px;
    max-width: calc(100vw - 20px);
    padding: 10px 12px;
    font-size: 11px;
  }
  footer.wjdr-footer::before{
    padding: 10px 12px;
    font-size: 11px;
    margin-bottom: 10px;
  }
}

/* 避免被手机端底部固定菜单（tab-bar）遮挡 */
@media (max-width: 768px){
  body::after{
    margin-bottom: calc(14px + 94px + env(safe-area-inset-bottom, 0px));
  }
}