/*! 外壳 v2：对齐主站 789.work（OneNav）视觉语言 */
:root{
  --m-nav-h:60px;
  --m-blur:rgba(245,245,245,.78);
  --m-aside-w:218px;
  --m-maxw:1260px;
  --m-radius:12px;
  --m-shadow:0 5px 20px rgba(0,0,0,.10);
}
html[data-theme="dark"]{ --m-blur:rgba(36,38,42,.78); }

/* ---- 固定毛玻璃顶栏 ---- */
.m-header{
  position:fixed;top:0;left:0;right:0;z-index:120;padding:8px 14px;
}
.m-header .m-bar{
  max-width:var(--m-maxw);margin:0 auto;height:44px;border-radius:12px;
  background:var(--m-blur);
  -webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px);
  box-shadow:var(--m-shadow);display:flex;align-items:center;gap:18px;padding:0 14px;
}
.m-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;color:var(--title-color);white-space:nowrap;}
.m-brand:hover{color:var(--theme-color);}
.m-brand .m-logo{
  width:28px;height:28px;border-radius:9px;flex:0 0 28px;background:linear-gradient(135deg,#f1404b,#d12768);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}
.m-menu{display:flex;align-items:center;gap:4px;margin-left:6px;}
.m-menu a{padding:6px 12px;border-radius:8px;font-size:14px;color:var(--main-color);white-space:nowrap;}
.m-menu a:hover{background:var(--muted-bg-color-l);color:var(--theme-color);}
.m-actions{margin-left:auto;display:flex;align-items:center;gap:6px;}
.m-icobtn{
  width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--main-color);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.2s;
}
.m-icobtn:hover{background:var(--muted-bg-color-l);color:var(--theme-color);}
.m-icobtn svg{width:18px;height:18px;}

/* ---- 照片 Hero ---- */
.m-hero{
  position:relative;padding-top:var(--m-nav-h);
  background:#1b1d1d center/cover no-repeat;
  background-image:linear-gradient(180deg,rgba(20,22,25,.45),rgba(20,22,25,.55)),url("../img/hero.jpg");
  background-blend-mode:normal;
}
/* Hero 内容在「侧栏右侧的内容列」内居中，避免盖到侧栏（对齐主站） */
.m-hero-in{max-width:var(--m-maxw);margin:0 auto;padding:0 16px 0 calc(var(--m-aside-w) + 31px);display:flex;align-items:center;justify-content:center;}
/* 定位锚点：让搜索建议层与搜索框同宽，不会横跨整页被左侧栏挡住 */
.m-bigsearch{position:relative;width:100%;max-width:800px;color:#fff;padding:18px 0;}
.m-searchform{position:relative;display:flex;align-items:center;}
.m-searchform input{
  width:100%;height:50px;border:0;border-radius:12px;padding:0 62px 0 20px;
  background:#fff;color:#333;font-family:inherit;font-size:15px;outline:none;box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.m-hero-tool .m-searchform input{height:42px;}
.m-searchbtn{
  position:absolute;right:4px;top:4px;width:42px;height:42px;border:0;border-radius:10px;
  background:var(--theme-color);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.m-searchbtn:hover{background:var(--hover-color);}
.m-searchbtn svg{width:20px;height:20px;}
.m-hero-tool .m-searchbtn{width:34px;height:34px;top:4px;}
.m-searchpop{
  position:absolute;left:0;right:0;top:74px;background:var(--main-bg-color);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);
  max-height:380px;overflow:auto;z-index:50;color:var(--main-color);display:none;
}
.m-hero-tool .m-searchpop{top:66px;}
.m-searchpop.show{display:block;}
.m-searchpop a{display:block;padding:9px 16px;border-bottom:1px solid var(--line-color);}
.m-searchpop a:last-child{border-bottom:0;}
.m-searchpop a:hover,.m-searchpop a.on{background:var(--muted-bg-color-l);}
.m-searchpop b{display:block;font-size:14px;color:var(--title-color);}
.m-searchpop mark{background:transparent;color:var(--theme-color);font-weight:700;}
.m-searchpop span{font-size:12px;color:var(--muted-color);}
.m-searchpop .empty{padding:16px;color:var(--muted-color);font-size:13px;}
.m-hotchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;}
.m-hotchips a{
  font-size:12px;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);
  padding:3px 12px;border-radius:20px;backdrop-filter:blur(4px);
}
.m-hotchips a:hover{background:rgba(255,255,255,.32);color:#fff;}

/* ---- 两栏主体 ---- */
.m-wrap{max-width:var(--m-maxw);margin:0 auto;padding:18px 16px 30px;}
.m-two-col{display:flex;align-items:flex-start;gap:15px;}
/* 左侧分类栏：固定悬浮，顶边紧贴吸顶导航下沿；页面上下滚动时它保持不动，
   自身内容超高时内部滚动且不显示滚动条（对齐主站 789.work 的做法） */
.m-aside{
  position:fixed;
  top:64px;
  left:max(16px, calc(50% - var(--m-maxw) / 2 + 16px));
  width:var(--m-aside-w);
  max-height:calc(100vh - 74px);
  overflow-y:auto;overflow-x:hidden;
  background:var(--main-bg-color);border-radius:var(--m-radius);box-shadow:var(--shadow);
  padding:10px;z-index:90;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;
}
.m-aside::-webkit-scrollbar{width:0;height:0;display:none;}
.m-aside ul{list-style:none;margin:0;padding:0;}
.m-aside .mcat{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:14px;color:var(--main-color);
}
.m-aside .mcat:hover{background:var(--muted-bg-color-l);}
.m-aside .mcat.on{background:var(--theme-color);color:#fff;}
.m-aside .mcat svg{width:18px;height:18px;flex:0 0 18px;}
/* 侧栏已脱离文档流，用左内边距为它留出位置 */
.m-content{flex:1 1 auto;min-width:0;margin-left:calc(var(--m-aside-w) + 15px);}
/* 工具页底部「其他工具」卡片与上方「关于本工具」卡片之间留出间距 */
#m-other{margin-top:15px;}

/* ---- 内容卡片 ---- */
.m-ccard{background:var(--main-bg-color);border-radius:var(--m-radius);box-shadow:var(--shadow);padding:14px 16px;}
.m-ccard + .m-ccard{margin-top:15px;}
.m-ccard-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.m-ccard-head .c-ico{
  width:30px;height:30px;border-radius:9px;flex:0 0 30px;background:var(--muted-bg-color-l);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--theme-color);font-weight:700;
}
.m-ccard-head h2{font-size:16px;}
.m-ccard-head .more{margin-left:auto;font-size:13px;color:var(--muted-color);}
.m-ccard-head .more:hover{color:var(--theme-color);}
.m-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
.m-grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr));}
.m-sitem{display:flex;align-items:center;gap:10px;padding:9px;border-radius:10px;min-width:0;}
.m-sitem:hover{background:var(--muted-bg-color-l);}
.m-sitem .s-ico{
  width:40px;height:40px;border-radius:10px;flex:0 0 40px;background:var(--muted-bg-color-l);
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:var(--theme-color);
}
.m-sitem .s-txt{min-width:0;}
.m-sitem .s-txt b{display:block;font-size:14px;color:var(--title-color);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-sitem .s-txt span{display:block;font-size:12px;color:var(--muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 面包屑（新外壳下） */
.m-crumb{font-size:13px;color:var(--muted-color);margin:2px 0 12px;}
.m-crumb a{color:var(--muted-color);}
.m-crumb a:hover{color:var(--theme-color);}
.m-crumb span{margin:0 6px;opacity:.6;}

/* ---- 弱化页脚 ---- */
.m-footer{max-width:var(--m-maxw);margin:0 auto;padding:26px 16px 40px;color:var(--muted-color);}
/* 兜底：页脚只保留一行版权信息，声明内容统一放在 statement.html */
.m-footer .m-foot-disc,.m-footer .m-foot-block,.m-footer .wb-fl{display:none !important;}
.m-footer a{color:var(--muted-color);text-decoration:underline;}
.m-footer a:hover{color:var(--theme-color);}
.m-footer .m-foot-copy{text-align:center;font-size:12px;margin-top:14px;line-height:1.9;word-break:keep-all;}
.m-footer .m-foot-disc,.m-footer .m-foot-block{max-width:1000px;margin:8px auto 0;font-size:12px;line-height:1.75;color:var(--muted-color);}
.m-footer .m-foot-disc h4,.m-footer .m-foot-block h4{margin:0 0 3px;font-size:12px;font-weight:600;color:var(--main-color);text-align:center;letter-spacing:.5px;}
.m-footer .m-foot-disc p,.m-footer .m-foot-block p{margin:0;text-align:justify;}
.m-footer .m-foot-block{margin-top:8px;}
.m-footer .m-foot-disc code,.m-footer .m-foot-block code{font-size:11px;color:var(--main-color);}

/* ---- 响应式 ---- */
@media (max-width:991px){
  html,body{max-width:100%;overflow-x:hidden;}
  .m-two-col{flex-direction:column;align-items:stretch;}
  .m-aside{position:static;left:auto;top:auto;width:100%;flex:none;max-height:none;overflow:visible;z-index:auto;}
  .m-hero-in{padding:0 16px;}
  .m-aside ul{display:flex;overflow-x:auto;scrollbar-width:none;}
  .m-aside ul::-webkit-scrollbar{display:none;}
  .m-aside .mcat{white-space:nowrap;}
  .m-content{width:100%;flex:none;min-width:0;margin-left:0;}
  .m-content .card{min-width:0;max-width:100%;}
  .m-crumb{min-width:0;white-space:normal;}
  .m-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .m-content img,.m-content canvas,.m-content video,.m-content svg{max-width:100%;height:auto;}
  #gomoku-board{margin:0 auto;display:block;touch-action:manipulation;}
}
@media (max-width:640px){
  .m-menu{display:none;}
  .m-bar{gap:10px;padding:0 10px;}
  .m-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .m-sitem .s-txt span{display:none;}
  .m-content pre,.m-content code,.m-content .mono{white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;}
  .m-content textarea,.m-content input{max-width:100%;}
  .m-content .tb-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .cal-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
  .cal-cell{min-width:0;}
}

/* Static page introductions and crawlable usage guidance. */
.geo-intro{margin-top:0}.geo-intro h1{font-size:22px;line-height:1.5;margin:0 0 8px}.geo-intro .pg-desc{margin-bottom:0}.geo-help h2{font-size:18px;margin:0 0 16px}.geo-help h3{font-size:15px;margin:18px 0 6px}.geo-help p{font-size:14px;line-height:1.8;margin:0}.m-aside li{list-style:none}
/* Nonvisual headings/scripts must not break spacing between content modules. */
.m-content > :is(.card, .m-ccard):not([hidden], .hide) ~ :is(.card, .m-ccard):not([hidden], .hide){margin-top:16px}
@media print{.geo-help{display:none}}