:root {
  color-scheme: dark;
  --bg: #061d18;
  --surface: #0b2a23;
  --card: #0d3129;
  --card-hover: #123b31;
  --text: #f5f2e9;
  --muted: #9aaba2;
  --line: rgba(231, 238, 229, .11);
  --accent: #d6b367;
  --live: #7ac7a5;
  --shadow: 0 14px 30px rgba(0,0,0,.20);
}
body.light {
  color-scheme: light;
  --bg: #f5f2ea;
  --surface: #fffdf9;
  --card: #fffefa;
  --card-hover: #f7f5ec;
  --text: #15382f;
  --muted: #718078;
  --line: rgba(20, 55, 46, .12);
  --accent: #a67b36;
  --live: #227557;
  --shadow: 0 10px 22px rgba(20, 54, 45, .08);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
.app-shell { width: min(100%, 460px); min-height: 100svh; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom)); background: var(--bg); }
.masthead { padding: 1px 4px 15px; }
.brand-row { display:flex; align-items:center; justify-content:space-between; }
.brand-mark { color: var(--accent); font: 800 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing:.2em; }
.theme-toggle { width:38px; height:38px; border:1px solid var(--line); border-radius:12px; display:grid; place-items:center; color:var(--text); background:var(--surface); cursor:pointer; }
.theme-toggle:active { transform:scale(.95); }
.theme-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.title-wrap { padding-top:15px; }
h1 { margin:0; font-size:clamp(34px, 9.2vw, 40px); line-height:1; letter-spacing:-.07em; font-weight:800; }
.english { margin:8px 0 0; color:var(--muted); font:700 10px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing:.15em; }
.tagline { margin:7px 0 0; color:var(--muted); font-size:14px; line-height:1.35; }
.tools-panel { border-top:1px solid var(--line); padding-top:13px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; padding:0 2px; margin-bottom:10px; }
.section-heading h2 { margin:0; font-size:15px; letter-spacing:-.03em; }
.section-heading span { color:var(--muted); font-size:11px; }
.tools-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px; }
.tool-card { min-height:112px; border:1px solid var(--line); border-radius:16px; padding:13px 8px 11px; background:var(--card); color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; cursor:pointer; box-shadow:var(--shadow); transition:background .18s ease, border-color .18s ease, transform .18s ease; }
.tool-card:hover { background:var(--card-hover); border-color:color-mix(in srgb, var(--accent) 38%, var(--line)); transform:translateY(-2px); }
.tool-card:active { transform:scale(.97); }
.tool-card.live { border-color:color-mix(in srgb, var(--live) 36%, var(--line)); }
.tool-icon { width:27px; height:27px; margin-bottom:11px; color:var(--accent); display:grid; place-items:center; }
.tool-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tool-name { min-height:30px; display:grid; place-items:center; font-size:13px; line-height:1.18; letter-spacing:-.035em; font-weight:740; }
.status { margin-top:6px; min-height:14px; color:var(--muted); font-size:10px; line-height:1.4; }
.status.live { color:var(--live); font-weight:800; }
.footer-note { margin:16px 0 0; color:var(--muted); text-align:center; font-size:11px; }
.dialog { position:fixed; inset:0; z-index:10; display:grid; align-items:end; }
.dialog[hidden] { display:none; }
.dialog-backdrop { position:absolute; inset:0; border:0; background:rgba(2, 17, 13, .54); }
.dialog-card { position:relative; width:min(100%, 460px); min-height:30svh; max-height:35svh; margin:0 auto; padding:20px 22px max(20px, env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; background:var(--surface); box-shadow:0 -16px 38px rgba(0,0,0,.18); animation:sheet-in .2s ease-out; }
.dialog-close { position:absolute; right:16px; top:12px; width:31px; height:31px; padding:0; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:transparent; font-size:23px; line-height:1; cursor:pointer; }
.dialog-summary { display:flex; align-items:center; gap:13px; padding-right:32px; }
.dialog-icon { width:35px; height:35px; flex:none; color:var(--accent); }
.dialog-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dialog-status { margin:0 0 4px; color:var(--live); font-size:11px; font-weight:800; }
.dialog-status.soon { color:var(--accent); }
.dialog-card h2 { margin:0; font-size:20px; letter-spacing:-.045em; }
.dialog-card > p { margin:14px 0 15px; color:var(--muted); font-size:13px; line-height:1.55; }
#dialog-action { width:100%; min-height:42px; border:0; border-radius:12px; background:var(--text); color:var(--surface); font-weight:800; cursor:pointer; }
@keyframes sheet-in { from { transform:translateY(18px); opacity:.4; } to { transform:translateY(0); opacity:1; } }
@media (max-width:350px) { .app-shell { padding-left:12px; padding-right:12px; } .tools-grid { gap:7px; } .tool-card { min-height:105px; border-radius:14px; padding:11px 5px 9px; } .tool-name { font-size:12px; } .tool-icon { width:25px; height:25px; margin-bottom:9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* 仅 ?admin=1 显示的本地排序演示界面。 */
.admin-toolbar { margin:0 0 14px; padding:12px; border:1px solid color-mix(in srgb, var(--accent) 33%, var(--line)); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.admin-toolbar > div:first-child { display:flex; justify-content:space-between; align-items:baseline; }
.admin-toolbar strong { font-size:14px; }
.admin-toolbar span, .admin-feedback { color:var(--muted); font-size:11px; }
.admin-actions { display:grid; grid-template-columns:1fr 1fr 1.05fr; gap:7px; margin-top:10px; }
.admin-actions button { min-height:35px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:transparent; font-size:11px; font-weight:700; cursor:pointer; }
.admin-actions .save-sort { border-color:var(--accent); background:var(--accent); color:#17342b; }
.admin-feedback { min-height:16px; margin:9px 0 0; }
.is-admin .tool-card { cursor:grab; touch-action:pan-y; }
.is-admin .tool-card:active { cursor:grabbing; }
.tool-placeholder { border:1px dashed color-mix(in srgb, var(--accent) 68%, var(--line)); border-radius:16px; background:var(--accent); opacity:.15; }
.drag-ghost { position:fixed !important; z-index:30; margin:0; pointer-events:none; opacity:.96; cursor:grabbing!important; box-shadow:0 22px 36px rgba(0,0,0,.30); transition:none!important; }
.sorting-active { cursor:grabbing; user-select:none; }
.sorting-active .tool-card { transition:none; }
@media (max-width:350px) { .admin-toolbar { padding:10px; border-radius:14px; } .admin-actions { gap:5px; } .admin-actions button { font-size:10px; padding:0 3px; } }


/* 仅在手机视口展示的官方小程序入口；不含未验证的跳转链接。 */
.miniprogram-guide { display:grid; grid-template-columns:108px minmax(0, 1fr); align-items:center; gap:14px; margin:0 0 16px; padding:10px; border:1px solid var(--line); border-radius:15px; background:var(--card); }
.miniprogram-guide img { display:block; width:108px; height:108px; padding:5px; border-radius:10px; background:#fff; object-fit:contain; }
.miniprogram-guide p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.miniprogram-guide .guide-title { margin-bottom:5px; color:var(--text); font-size:13px; font-weight:800; }
.miniprogram-guide .guide-step + .guide-step { margin-top:6px; }
.miniprogram-guide .guide-step strong { color:var(--text); font-weight:800; }
.miniprogram-guide .guide-note { margin-top:8px; font-size:11px; }
.dialog-card.has-miniprogram-guide { min-height:0; max-height:68svh; }
@media (max-width:350px) { .miniprogram-guide { grid-template-columns:82px minmax(0, 1fr); gap:10px; padding:8px; } .miniprogram-guide img { width:82px; height:82px; } .miniprogram-guide p { font-size:11px; } }
@media (min-width:900px) {
  .app-shell { width:min(100%, 1180px); padding:30px 34px 28px; }
  .masthead { display:flex; align-items:flex-end; justify-content:space-between; padding:3px 4px 26px; }
  .brand-row { align-self:flex-start; width:112px; }
  .title-wrap { width:calc(100% - 112px); padding:0 0 0 28px; }
  h1 { font-size:48px; }
  .tools-panel { padding-top:19px; }
  .section-heading { margin-bottom:15px; }
  .tools-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
  .tool-card { min-height:154px; border-radius:18px; }
  .tool-name { font-size:15px; }
  .tool-icon { width:28px; height:28px; }
  .footer-note { margin-top:22px; }
  .dialog-card { width:min(480px, calc(100% - 32px)); min-height:0; max-height:420px; border-radius:22px; margin:0 auto 28px; }
  .dialog { align-items:end; }
}

.miniprogram-guide[hidden] { display:none; }