/* ============================================================
   TechSchool Skin v2 · techschool.top
   设计语言：靛蓝强调色 + 海军蓝墨色 + Inter（延续 v1 的 token，不改设计方向）
   本版目标：让皮肤「完整生效」——
     · 覆盖 v1 漏掉的组件（顶栏布局、左栏当前项、代码语法分色、浮窗、抽屉、表格、右栏）
     · 用 !important 压过页面内联 style 里的 runoob 风格（绿色高亮等）
     · runoob 主题 style.css / qa.css 不再加载；版式由 base.css（自托管骨架）提供
   暗色：兼容 html[data-theme="dark"] 与 body.dark 两种开关
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* ── B 方向 · Apple 开发者文档 ── */
  --ts-accent:#0071E3;
  --ts-accent-ink:#0058B8;
  --ts-accent-soft:#EAF3FE;
  --ts-link:#0066CC;
  --ts-ink:#1D1D1F;
  --ts-ink-2:#424245;
  --ts-ink-3:#515154;
  --ts-line:#D2D2D7;
  --ts-line-soft:#E8E8ED;
  --ts-paper:#FFFFFF;
  --ts-paper-2:#F5F5F7;
  --ts-paper-3:#FAFAFC;
  --ts-surface:#FFFFFF;
  --ts-code-shell:#1D1D1F;
  --ts-code-ink:#F5F5F7;
  --ts-nav-bg:rgba(255,255,255,.82);
  --ts-shadow:0 1px 3px rgba(0,0,0,.06), 0 12px 32px -12px rgba(0,0,0,.12);
  --ts-link-line:rgba(0,102,204,.28);
  --ts-note-bg:#EAF3FE;
  --ts-note-line:#CBE1FA;
  --ts-r-sm:6px; --ts-r-md:12px; --ts-r-lg:18px; --ts-r-pill:999px;
  --ts-s1:4px; --ts-s2:8px; --ts-s3:12px; --ts-s4:16px; --ts-s5:24px; --ts-s6:32px; --ts-s7:48px; --ts-s8:64px;
  --ts-h1:40px; --ts-hero:44px; --ts-h2:26px; --ts-h3:19px; --ts-body:16px; --ts-sm:14px; --ts-meta:12.5px;
  --ts-font-sans:'Instrument Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ts-font-mono:'JetBrains Mono','SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --ts-dk-bg:#000000; --ts-dk-paper:#1D1D1F; --ts-dk-paper2:#2C2C2E; --ts-dk-line:#3A3A3C; --ts-dk-ink:#F5F5F7; --ts-dk-ink2:#A1A1A6;
  --ts-syn-key:#FF7AB2; --ts-syn-str:#7FDBCA; --ts-syn-num:#F78C6C;
  --ts-syn-com:#8E8E93; --ts-syn-fn:#82AAFF; --ts-syn-pun:#A1A1A6; --ts-syn-typ:#FFCB6B;
}

html[data-theme="dark"],body.dark{
    --ts-accent:#4DA3FF;        /* 暗色模式下的强调色（提亮，保证对比度）*/
  --ts-accent-ink:#9CCBFF;
  --ts-accent-soft:#16273B;
  --ts-link:#6FB3FF;
  --ts-link-line:rgba(111,179,255,.32);
  --ts-ink:#F5F5F7;
  --ts-ink-2:#C7C7CC;
  --ts-ink-3:#A1A1A6;
  --ts-line:#3A3A3C;
  --ts-line-soft:#2C2C2E;
  --ts-paper:#000000;
  --ts-paper-2:#1D1D1F;
  --ts-paper-3:#161617;
  --ts-surface:#1D1D1F;
  --ts-code-shell:#111113;
  --ts-code-ink:#F5F5F7;
  --ts-note-bg:#14243A;
  --ts-note-line:#26405F;
  --ts-nav-bg:rgba(0,0,0,.72);
  --ts-shadow:0 1px 3px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7);

}

/* ---------- 基础 ---------- */
html{
  font-size:16px !important;          /* 干掉 runoob 的 8px 基准 */
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  font-family:var(--ts-font-sans) !important;
  font-size:16px !important;
  line-height:1.7;
  color:var(--ts-ink) !important;
  background:var(--ts-paper) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.dark,html[data-theme="dark"] body{background:var(--ts-paper) !important}
a{transition:color .12s ease,border-color .12s ease,background-color .12s ease}
::selection{background:var(--ts-accent);color:#fff}
:focus-visible{outline:2px solid var(--ts-accent);outline-offset:2px}

/* ---------- 版式容器 ---------- */
.container{max-width:1440px}
.container.main{margin-top:20px !important}
.container.main > .row{
  display:flex !important;align-items:flex-start;gap:24px;
}
.runoob-col-md2{width:212px !important;flex:0 0 212px;margin-right:0 !important}
.middle-column{flex:1 1 auto;min-width:0;width:auto !important;padding:0 !important}
.right-column,.fivecol.last.right-column{
  width:280px !important;flex:0 0 280px;padding:0 !important;text-align:left !important;
}

/* ---------- 顶部品牌条 ---------- */
.container.logo-search{
  background:var(--ts-nav-bg) !important;
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ts-line) !important;
  display:flex !important;align-items:center;gap:16px;
  min-height:64px;padding:8px 16px !important;
}
.ts-wordmark{
  font-weight:800;font-size:var(--ts-h3);letter-spacing:-.01em;
  color:var(--ts-accent-ink) !important;text-decoration:none !important;
  white-space:nowrap;display:inline-flex;align-items:center;line-height:1;
}
.ts-wordmark em{font-style:normal;color:var(--ts-accent)}
.ts-wordmark:hover em{opacity:.85}
.logo-search .col.search{min-width:0}
.logo-search .row{margin-left:auto !important;display:flex;align-items:center;gap:12px}
.logo-search .search-desktop{width:420px;max-width:42vw}
.logo-search form{width:100%}
.logo-search input#s,
.logo-search input.placeholder,
.logo-search input[name="q"]{
  font-family:var(--ts-font-sans) !important;
  font-size:var(--ts-meta) !important;line-height:1.4;
  height:40px;width:100%;
  background:var(--ts-paper-2) !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md)!important;
  color:var(--ts-ink) !important;
  padding:0 12px !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
}
.logo-search input#s:focus,
.logo-search input.placeholder:focus,
.logo-search input[name="q"]:focus{
  border-color:var(--ts-accent) !important;background:var(--ts-surface) !important;outline:0;
}
/* 搜索图标（内联 SVG，无额外请求） */
.logo-search input#s,
.logo-search input.placeholder,
.logo-search input[name="q"]{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697386' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.6-3.6'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:12px center !important;
  padding-left:40px !important;
}
.logo-search input#s:focus,
.logo-search input.placeholder:focus,
.logo-search input[name="q"]:focus{
  background-color:var(--ts-surface) !important;
}
.logo-search .row-search-mobile{display:none}
.logo-search .btn-responsive-nav,#pull{display:none}

/* ---------- 主导航 ---------- */
nav.container.navigation{
  background:var(--ts-nav-bg) !important;
  border-bottom:1px solid var(--ts-line) !important;
  padding:0 16px !important;
  position:sticky;top:0;z-index:900;
  backdrop-filter:blur(8px);
}
nav.container.navigation .pc-nav{
  display:flex !important;align-items:center;gap:4px;flex-wrap:wrap;
  list-style:none !important;margin:0 !important;padding:0 !important;
}
.pc-nav li{list-style:none !important;margin:0 !important}
.pc-nav a{
  display:inline-block;
  font-family:var(--ts-font-sans) !important;
  font-size:var(--ts-meta) !important;font-weight:500;
  color:var(--ts-ink-2) !important;
  padding:12px 12px !important;
  border-bottom:1px solid transparent;
  text-decoration:none !important;white-space:nowrap;
}
.pc-nav a:hover{color:var(--ts-accent-ink) !important;border-bottom-color:var(--ts-line) !important}
.pc-nav a.active{color:var(--ts-accent-ink) !important;border-bottom-color:var(--ts-accent) !important;font-weight:600}
.pc-nav li.nav-theme-toggle{margin-left:auto !important;display:flex;align-items:center}
.pc-nav li.nav-theme-toggle button{
  height:32px;min-width:32px;margin-left:4px;cursor:pointer;
  border:1px solid var(--ts-line) !important;
  background:var(--ts-surface) !important;
  color:var(--ts-ink-2) !important;
  border-radius:var(--ts-r-pill)!important;
}
.pc-nav li.nav-theme-toggle button:hover{border-color:var(--ts-accent) !important;color:var(--ts-accent) !important}
/* 下拉子菜单（Vue / AI 等 data-id 项） */
.pc-nav li ul,.pc-nav .sub-menu,.pc-nav .dropdown-menu{
  background:var(--ts-surface) !important;border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md)!important;box-shadow:var(--ts-shadow) !important;
  padding:4px !important;min-width:170px;
}
.pc-nav li ul a{display:block;padding:8px 12px !important;border:0 !important;border-radius:var(--ts-r-sm)!important}
.pc-nav li ul a:hover{background:var(--ts-paper-2) !important;color:var(--ts-accent) !important}

/* ---------- 语言切换器 ---------- */
#wiki-lang-switch{
  font-family:var(--ts-font-sans) !important;
  background:var(--ts-surface) !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-pill)!important;
  box-shadow:var(--ts-shadow) !important;
  padding:4px !important;gap:2px !important;
}
#wiki-lang-switch a{
  color:var(--ts-ink-3) !important;border-radius:var(--ts-r-pill)!important;
  font-size:var(--ts-meta) !important;font-weight:600;padding:4px 8px !important;
  text-decoration:none !important;line-height:1.4;
}
#wiki-lang-switch a:hover{background:var(--ts-paper-2) !important;color:var(--ts-ink) !important}
#wiki-lang-switch a.on,#wiki-lang-switch a[aria-current="true"]{background:var(--ts-accent) !important;color:#fff !important}

/* ---------- 左栏目录 ---------- */
.left-column{background:var(--ts-surface) !important;border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md)!important;overflow:hidden;padding:0 0 8px !important}
.left-column .tab{
  font-family:var(--ts-font-sans) !important;
  font-weight:700;font-size:14px;color:var(--ts-accent-ink) !important;
  background:var(--ts-paper-2) !important;border:0 !important;
  border-bottom:1px solid var(--ts-line) !important;
  padding:12px 12px !important;line-height:1.4;
  display:flex;align-items:center;gap:8px;
}
.left-column .tab i{color:var(--ts-accent) !important;font-size:var(--ts-meta)}
.sidebar-box.gallery-list{background:transparent !important;border:0 !important;padding:4px 0 0 !important}
.design#leftcolumn{background:transparent !important;padding:0 8px !important}
.design#leftcolumn a{
  display:block;
  font-family:var(--ts-font-sans) !important;
  font-size:14px !important;line-height:1.55 !important;
  color:var(--ts-ink-2) !important;
  background-color:transparent !important;   /* 压掉内联的绿色高亮 */
  border-left:0 !important;
  border-radius:var(--ts-r-sm);
  padding:8px 8px !important;margin:0 0 2px !important;
  text-decoration:none !important;
}
.design#leftcolumn a:hover{
  background-color:var(--ts-paper-2) !important;color:var(--ts-accent) !important;
}
.design#leftcolumn a i{color:var(--ts-ink-3) !important;margin-right:4px;font-size:var(--ts-meta)}
/* 当前所在教程：原站用内联 style 打绿色背景（background-color: rgb(150, 185, 125)），
   这里按内联色值精确命中，只高亮真正当前的一项，不误伤其它 data-p="par" 父项。 */
.design#leftcolumn a[style*="150, 185, 125"],
.design#leftcolumn a[style*="150,185,125"]{
  font-weight:600 !important;color:var(--ts-accent-ink) !important;
  background-color:var(--ts-accent-soft) !important;
  border-left-color:var(--ts-accent) !important;
}
.design#leftcolumn a[style*="150, 185, 125"] i{color:var(--ts-accent) !important}
.design#leftcolumn a[data-p="par"]{font-weight:600 !important;color:var(--ts-ink) !important}
.design#leftcolumn a.current,.design#leftcolumn a.active{
  color:var(--ts-accent) !important;font-weight:600 !important;
  border-left-color:var(--ts-accent) !important;background-color:var(--ts-accent-soft) !important;
}
.left-column .sidebar-box{border:0 !important;background:transparent !important}

/* ---------- 正文 ---------- */
.article,.article-intro{background:transparent !important}
.article-body{font-size:16px !important;line-height:1.78;color:var(--ts-ink) !important}
.article-intro h1,.article-body h1{
  font-family:var(--ts-font-sans) !important;
  font-size:var(--ts-h1) !important;font-weight:700;letter-spacing:-.021em;
  color:var(--ts-ink) !important;line-height:1.12 !important;
  margin:4px 0 20px !important;
}
.article-body h2,.article-intro h2,.left_h2{
  font-family:var(--ts-font-sans) !important;
  font-size:var(--ts-h2) !important;font-weight:600;letter-spacing:-.018em;
  color:var(--ts-ink) !important;line-height:1.26 !important;
  margin:var(--ts-s7) 0 var(--ts-s4) !important;padding-bottom:var(--ts-s2);
  border-bottom:1px solid var(--ts-line-soft) !important;
}
.article-body h3{font-size:var(--ts-h3) !important;font-weight:600;letter-spacing:-.01em;color:var(--ts-ink) !important;border-bottom:0 !important;margin:var(--ts-s6) 0 var(--ts-s2) !important}
.article-body h4{font-size:var(--ts-body) !important;font-weight:700;color:var(--ts-accent-ink) !important;margin:20px 0 8px !important}
.article-body p{color:var(--ts-ink) !important;margin:12px 0;font-size:16px !important;text-wrap:pretty}
.article-body li{font-size:16px !important;margin:4px 0;color:var(--ts-ink) !important}
.article-body ul,.article-body ol{padding-left:24px !important;margin:12px 0}
.article-body a{color:var(--ts-accent) !important;text-decoration:none !important;
  border-bottom:1px solid var(--ts-link-line)}
.article-body a:hover{border-bottom-color:var(--ts-accent);background:var(--ts-accent-soft)}
.article-body strong,.article-body b{color:var(--ts-accent-ink) !important;font-weight:700}
.article-body h5,.article-body h6{font-weight:700 !important;color:var(--ts-accent-ink) !important;margin:16px 0 8px !important}
.article-body dt,.article-body th,.article-body .key{font-weight:600 !important}
.article-body .tutintro{font-style:normal !important}
.article-body .tutintro p{font-style:normal !important}
.article-body hr{border:0 !important;border-top:1px solid var(--ts-line) !important;margin:40px 0 !important;height:0}
.article-body img{max-width:100% !important;height:auto;border-radius:var(--ts-r-md);margin:4px 0;
  border:1px solid var(--ts-line-soft)}
.article-body blockquote{
  margin:16px 0 !important;padding:12px 16px !important;
  background:var(--ts-paper-2) !important;border-left:1px solid var(--ts-note-line) !important;
  border-radius:var(--ts-r-md);color:var(--ts-ink-2) !important;
}
.article-body code{
  font-family:var(--ts-font-mono) !important;font-size:var(--ts-sm) !important;
  background:var(--ts-paper-2) !important;color:var(--ts-accent-ink) !important;
  padding:2px 4px !important;border-radius:var(--ts-r-sm)!important;border:0 !important;
}
/* 提示块（原站 note/tip/warning 体系） */
.article-body .note,.article-body .important,.article-body .warning,.article-body .tip,
.design-note,.design-important{
  border-radius:var(--ts-r-md)!important;padding:12px 16px !important;margin:16px 0 !important;
  background:var(--ts-paper-2) !important;border:1px solid var(--ts-note-line) !important;color:var(--ts-ink) !important;
}
.py-version-badge{font-size:var(--ts-meta) !important;border-radius:var(--ts-r-pill)!important}

/* ---------- 表格 ---------- */
.article-body table,.dataintable,.reference,.table{
  width:100% !important;border-collapse:separate !important;border-spacing:0;
  margin:16px 0 !important;font-size:var(--ts-meta) !important;
  border:1px solid var(--ts-line) !important;border-radius:var(--ts-r-md);overflow:hidden;
}
.article-body th,.dataintable th,.article-body td,.dataintable td{
  padding:8px 12px !important;border:0 !important;
  border-bottom:1px solid var(--ts-line-soft) !important;
  text-align:left;vertical-align:top;
}
.article-body th,.dataintable th{
  background:var(--ts-paper-2) !important;color:var(--ts-accent-ink) !important;
  font-weight:600 !important;white-space:nowrap;
}
.article-body tr:last-child td{border-bottom:0 !important}
.article-body tr:hover td{background:var(--ts-paper-2) !important}

/* ---------- 代码块：深色窗体 ---------- */
.article-body pre,.example,.example_code{
  background:var(--ts-code-shell) !important;
  color:var(--ts-code-ink) !important;
  font-family:var(--ts-font-mono) !important;
  font-size:14px !important;line-height:1.7 !important;
  border:0 !important;border-radius:var(--ts-r-md)!important;
  padding:16px 20px !important;
  overflow-x:auto;tab-size:2;
  box-shadow:var(--ts-shadow);
}
.article-body pre{border-left:0 !important}
.example{padding:0 !important;overflow:hidden;margin:20px 0 !important}
.example h2.example,.example .example_title{
  background:rgba(255,255,255,.06) !important;
  color:var(--ts-ink-3) !important;
  font-size:var(--ts-meta) !important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 20px !important;margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.example .example_code{border-radius:0 !important;box-shadow:none !important;padding:16px 20px !important}
/* 语法分色：压过 runoob / prettify 的浅色规则，保证在深色窗体上可读 */
.article-body pre span,.example_code span{color:inherit}
.article-body pre .pln,.example_code .pln,
.article-body pre .pun,.example_code .pun,
.article-body pre .lit,.example_code .lit,
.article-body pre .typ,.example_code .typ,
.article-body pre .tag,.example_code .tag{color:var(--ts-syn-pun) !important}
.article-body pre .kwd,.example_code .kwd,
.article-body pre .key,.example_code .key,
.article-body pre .k,.example_code .k{color:var(--ts-syn-key) !important}
.article-body pre .str,.example_code .str,
.article-body pre .s,.example_code .s{color:var(--ts-syn-str) !important}
.article-body pre .com,.example_code .com,
.article-body pre .c,.example_code .c{color:var(--ts-syn-com) !important;font-style:italic}
.article-body pre .num,.example_code .num,
.article-body pre .n,.example_code .n{color:var(--ts-syn-num) !important}
.article-body pre .typ,.example_code .typ{color:var(--ts-syn-typ) !important}
.article-body pre .atn,.example_code .atn{color:var(--ts-syn-fn) !important}
.article-body pre a,.example_code a{color:var(--ts-syn-fn) !important;border:0 !important}
/* 代码块内的高亮行/选区 */
.article-body pre::selection,.article-body pre *::selection{background:rgba(0,113,227,.42);color:#fff}
.copy-code-button,.code-copy{
  background:rgba(255,255,255,.08) !important;color:var(--ts-ink-3) !important;
  border:1px solid rgba(255,255,255,.14) !important;border-radius:var(--ts-r-sm)!important;
  font-size:var(--ts-meta) !important;padding:4px 8px !important;cursor:pointer;
  opacity:0;transition:opacity .15s;
}
.article-body pre:hover .copy-code-button,.example_code:hover .copy-code-button{opacity:1}
.copy-code-button:hover{background:rgba(255,255,255,.16) !important;color:#fff !important}

/* ---------- 上一页 / 下一页 ---------- */
.previous-next-links{
  display:flex !important;gap:8px;flex-wrap:wrap;
  margin:0 0 20px !important;padding:0 !important;
  border:0 !important;background:transparent !important;
}
.next-design-link,.previous-next-links > div{display:flex;gap:8px;align-items:center}
.previous-next-links a,.next-design-link a,.design-link a{
  font-family:var(--ts-font-sans) !important;
  display:inline-flex !important;align-items:center;gap:4px;
  border:1px solid var(--ts-line) !important;border-radius:var(--ts-r-md)!important;
  background:var(--ts-surface) !important;
  color:var(--ts-ink) !important;
  padding:8px 16px !important;font-size:14px !important;font-weight:600;
  text-decoration:none !important;line-height:1.4;
}
.previous-next-links a:hover,.next-design-link a:hover,.design-link a:hover{
  border-color:var(--ts-accent) !important;color:var(--ts-accent) !important;
  box-shadow:var(--ts-shadow);
}

/* ---------- 右侧栏 ---------- */
.right-column .sidebar-box,.re-box,.recommend-here{
  background:var(--ts-surface) !important;border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md)!important;padding:12px !important;margin:0 0 12px !important;
}
.right-column .sidebar-box.re-box-large,.right-column .re-box-large{border:0 !important;background:transparent !important;padding:0 !important}
.right-column .recommend-here a{color:var(--ts-ink) !important;font-size:14px !important;font-weight:600 !important;text-decoration:none !important}
.right-column .recommend-here a:hover{color:var(--ts-accent) !important}
.right-column h4,.right-column .sidebar-box b,.right-column .sidebar-box strong{
  display:block;font-size:var(--ts-meta) !important;color:var(--ts-ink-3) !important;
  font-weight:600 !important;letter-spacing:.02em;margin:0 0 8px !important;
  background:transparent !important;border:0 !important;
}
.right-column ul{list-style:none !important;margin:0 !important;padding:0 !important}
.right-column li{margin:0 0 4px !important;line-height:1.55 !important}
.right-column li a{
  display:block;color:var(--ts-ink-2) !important;font-size:14px !important;line-height:1.5;
  text-decoration:none !important;padding:8px 8px !important;border-radius:var(--ts-r-sm)!important;
}
.right-column li a:hover{background:var(--ts-paper-2) !important;color:var(--ts-accent) !important}
/* 原站右栏广告位降噪 */
.right-column .sidebar-box img{max-width:100%;height:auto;border-radius:var(--ts-r-sm)}
.sidebar-box .double-li li{width:47% !important;border-bottom:0 !important;float:none !important;display:inline-block !important;vertical-align:top}

/* ---------- 浮窗：左上抽屉 + 右下按钮组 ---------- */
#runoob-nav-btn{
  position:fixed !important;top:50% !important;left:0 !important;transform:translateY(-50%) !important;
  background:var(--ts-surface) !important;color:var(--ts-ink-2) !important;
  border:1px solid var(--ts-line) !important;border-left:0 !important;
  border-radius:var(--ts-r-md)!important;
  padding:12px 8px !important;cursor:pointer;z-index:1200;
  box-shadow:var(--ts-shadow);font-size:var(--ts-meta) !important;
}
#runoob-nav-btn:hover{color:var(--ts-accent) !important;border-color:var(--ts-accent) !important}
#runoob-nav-mask{background:rgba(10,37,64,.42) !important;backdrop-filter:blur(2px)}
#runoob-nav-drawer{
  background:var(--ts-surface) !important;border-right:2px solid var(--ts-line) !important;
  box-shadow:var(--ts-shadow) !important;width:340px !important;max-width:86vw;z-index:1300;
}
#runoob-nav-drawer .runoob-search-box{display:flex;align-items:center;gap:8px;padding:12px 16px !important;
  border-bottom:1px solid var(--ts-line) !important;background:var(--ts-paper-2) !important}
#runoob-nav-drawer .runoob-search-box i{color:var(--ts-ink-3) !important}
#runoob-nav-drawer input{
  flex:1;height:32px;border:1px solid var(--ts-line) !important;border-radius:var(--ts-r-md)!important;
  background:var(--ts-surface) !important;color:var(--ts-ink) !important;
  font-family:var(--ts-font-sans) !important;font-size:var(--ts-meta) !important;padding:0 12px !important;outline:0;
}
#runoob-nav-drawer .runoob-nav-title{
  display:flex;align-items:center;gap:8px;font-size:var(--ts-meta) !important;font-weight:700;
  color:var(--ts-accent-ink) !important;padding:12px 16px 4px !important;background:transparent !important;
}
#runoob-nav-drawer .runoob-nav-group a,#runoob-nav-list a{
  display:block;padding:8px 16px !important;font-size:14px !important;
  color:var(--ts-ink-2) !important;text-decoration:none !important;border-radius:0 !important;
}
#runoob-nav-drawer a:hover{background:var(--ts-paper-2) !important;color:var(--ts-accent) !important}
.fixed-btn{
  position:fixed !important;right:16px !important;bottom:34px !important;
  display:flex !important;flex-direction:column;gap:8px;
  background:transparent !important;box-shadow:none !important;border:0 !important;
}
.fixed-btn a{
  width:40px;height:40px;display:flex !important;align-items:center;justify-content:center;
  background:var(--ts-surface) !important;color:var(--ts-ink-2) !important;
  border:1px solid var(--ts-line) !important;border-radius:var(--ts-r-md)!important;
  box-shadow:var(--ts-shadow) !important;text-decoration:none !important;font-size:16px !important;
}
.fixed-btn a:hover{background:var(--ts-accent) !important;color:#fff !important;border-color:var(--ts-accent) !important}
/* 书签/历史浮层 */
#bm-toast-box{font-family:var(--ts-font-sans) !important}
#bm-toast-box > div{background:var(--ts-surface) !important;color:var(--ts-ink) !important;
  border:1px solid var(--ts-line) !important;border-radius:var(--ts-r-md)!important;box-shadow:var(--ts-shadow) !important}

/* ---------- 搜索结果面板（techschool-search.js 已用 ts- token，这里兜底） ---------- */
.ts-search-box{
  background:var(--ts-surface) !important;border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md)!important;box-shadow:var(--ts-shadow) !important;overflow:hidden;
}
.ts-search-item:hover{background:var(--ts-paper-2) !important}

/* ---------- 暗色下的代码窗体与图片 ---------- */
html[data-theme="dark"] .article-body pre,body.dark .article-body pre,
html[data-theme="dark"] .example,body.dark .example,
html[data-theme="dark"] .example_code,body.dark .example_code{
  box-shadow:0 8px 32px -12px rgba(0,0,0,.75);
}
html[data-theme="dark"] .article-body img,body.dark .article-body img{border-color:var(--ts-line)}
html[data-theme="dark"] .article-body code,body.dark .article-body code{color:var(--ts-syn-key) !important}

/* ---------- 响应式 ---------- */
@media (max-width:1200px){
  .right-column,.fivecol.last.right-column{display:none !important}
}
@media (max-width:900px){
  .container.main > .row{flex-direction:column;gap:16px}
  .runoob-col-md2{width:100% !important;flex:1 1 auto}
  .left-column{max-height:260px;overflow:auto}
  .container.logo-search{flex-wrap:wrap;gap:8px;position:relative;z-index:1000}
  .logo-search .row-search-mobile{display:block;flex:1 1 100%;order:3;width:100%;max-width:100%}
  .logo-search .row-search-mobile .col,
  .logo-search .row-search-mobile input{width:100% !important;max-width:100% !important}
  .logo-search .search-desktop{display:none}
  /* 顶部导航：单行横向滑动，避免换行占掉半屏 */
  nav.container.navigation{overflow:hidden !important}
  nav.container.navigation .pc-nav{
    flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;
    width:100%;max-width:100%;-webkit-overflow-scrolling:touch;
  }
  nav.container.navigation .pc-nav::-webkit-scrollbar{display:none}
  .pc-nav a{padding:12px 12px !important;font-size:14px !important}
  .pc-nav li.nav-theme-toggle{margin-left:0 !important}
  /* 原站移动版导航条（与主导航重复，移动端隐藏） */
  .mobile-nav,.mobile-nav-sub,.nav-mobile,.mobile-nav-bar{display:none !important}
  /* 简介区的图文并排 → 移动端改为上下堆叠 */
  .tutintro img,.article-body img.pull-right{float:none !important;display:block;margin:0 auto 12px !important;max-width:68%}
  .article-intro h1,.article-body h1{font-size:var(--ts-h2) !important}
  .article-body h2,.left_h2{font-size:var(--ts-h2) !important}
  .article-body pre,.example,.example_code{font-size:13px !important;border-radius:var(--ts-r-md)!important}
  #wiki-lang-switch{position:fixed !important;top:auto !important;bottom:16px !important;right:12px !important;left:auto !important;z-index:2147483000 !important}
  .fixed-btn{bottom:76px !important}
}
@media (max-width:600px){
  .container.main{padding-left:12px;padding-right:12px}
  .ts-wordmark{font-size:16px}
}
@media print{
  nav.container.navigation,.left-column,.right-column,.fixed-btn,#runoob-nav-btn,#wiki-lang-switch{display:none !important}
}

/* 原站右栏「Subscribe / RSS」订阅框：RSS 指向已 404 的 ../feed.html，
  表单发往已停用的 QQ 邮件列表 —— 隐藏，避免展示死链接 */
.right-column .socialicons,
.right-column .tab.tab-light-blue{display:none !important}

/* ---------- 浅蓝提示框：说明文字型 <pre> 与 note/important 统一 ---------- */
.article-body .note,.article-body .important,.article-body .warning,.article-body .tip,
.design-note,.design-important{
  background:var(--ts-note-bg) !important;
  border:1px solid var(--ts-note-line) !important;
  border-radius:var(--ts-r-md)!important;
  color:var(--ts-ink) !important;
}
.article-body pre.ts-plain,
.example_code.ts-plain,
.example .example_code.ts-plain{
  background:var(--ts-note-bg) !important;
  color:var(--ts-ink) !important;
  border:1px solid var(--ts-note-line) !important;
  border-radius:var(--ts-r-md)!important;
  box-shadow:none !important;
  font-size:var(--ts-sm) !important;
  padding:var(--ts-s3) var(--ts-s4) !important;
}
.article-body pre.ts-plain span{color:var(--ts-ink) !important}

/* ---------- 内容框：与首页卡片同一套观感（浅色框线 + 悬停变浅蓝、微微抬升） ---------- */
.article,
.right-column .sidebar-box,
.re-box,
.recommend-here{
  background:var(--ts-surface) !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md)!important;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.article{padding:24px 24px !important}
.left-column{border:1px solid var(--ts-line) !important;border-radius:var(--ts-r-md)!important;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
.article:hover,
.left-column:hover,
.right-column .sidebar-box:hover,
.re-box:hover,
.recommend-here:hover{
  border-color:var(--ts-accent) !important;
  box-shadow:0 4px 24px -6px rgba(10,37,64,.12), 0 2px 4px rgba(10,37,64,.05) !important;
}
.left-column:hover,
.right-column .sidebar-box:hover{transform:translateY(-2px)}
html[data-theme="dark"] .article:hover,
body.dark .article:hover,
html[data-theme="dark"] .left-column:hover,
body.dark .left-column:hover,
html[data-theme="dark"] .right-column .sidebar-box:hover,
body.dark .right-column .sidebar-box:hover{
  border-color:var(--ts-accent) !important;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6) !important;
}
/* 表格/引用等也跟随主题框线，不再出现深色实线 */
.article-body table,.dataintable,.article-body blockquote{
  border-color:var(--ts-line) !important;
}
.article-body hr{border-top-color:var(--ts-line) !important}
/* ================= B 方向 · Apple 开发者文档 收尾层 ================= */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/techschool/fonts/instrument-sans-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/techschool/fonts/instrument-sans-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/techschool/fonts/instrument-sans-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/techschool/fonts/instrument-sans-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/techschool/fonts/instrument-sans-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/techschool/fonts/instrument-sans-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/techschool/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/techschool/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/techschool/fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/techschool/fonts/jetbrains-mono-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* 1) 清掉 runoob 遗留的收藏浮窗/遮罩（实测其按钮跑到视口外）*/
#bm-panel-overlay,.bm-panel,.bm-ph,.bm-close,.bm-list,.bm-btn,.bm-tip,.bm-bar,
.bookmark-btn,.bm-panel-overlay,.fa-bookmark-o,[class^="bm-"],[class*=" bm-"]{display:none !important;visibility:hidden !important;pointer-events:none !important}

/* 2) 移动端溢出守卫：长链接/长单词/表格不再顶破视口 */
html,body{max-width:100%;overflow-x:hidden}
.article-body a,.article-body li,.article-body p,.article-body h1,.article-body h2,.article-body h3,
.article-body th,.article-body td,.article-body dt,.article-body dd{overflow-wrap:break-word;word-break:break-word}
.article-body pre,.article-body table,.article-body img,.example{max-width:100%}
.article-body table{display:block;overflow-x:auto;border-collapse:collapse}
@media(max-width:820px){
  .article-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .runoob-col-md2,.design#leftcolumn,nav,aside{min-width:0;max-width:100%}
}

/* 3) 链接与焦点：Apple 式（正文链接带下划线，仅悬停加深）*/
.article-body a{color:var(--ts-link) !important;text-decoration:none;border-bottom:1px solid var(--ts-link-line);transition:border-color .15s ease,color .15s ease}
.article-body a:hover{border-bottom-color:var(--ts-link)}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ts-accent);outline-offset:2px;border-radius:var(--ts-r-sm)}

/* 4) 现代 CSS：标题平衡换行 / 正文更少孤行 / 细滚动条 */
h1,h2,h3,.left_h2{text-wrap:balance}
.article-body p{text-wrap:pretty}
pre,.article-body table{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.article-body table::-webkit-scrollbar{height:8px}
.article-body table::-webkit-scrollbar-thumb{background:var(--ts-line);border-radius:var(--ts-r-pill)}
::selection{background:rgba(0,113,227,.16)}

/* 5) 可读性硬底线：移动端正文 16px（避免 iOS 自动放大）*/
@media(max-width:820px){
  .article-body,.article-body p,.article-body li{font-size:var(--ts-body) !important;line-height:1.72 !important}
  .article-intro h1,.article-body h1{font-size:32px !important;line-height:1.16 !important}
  .article-body h2,.left_h2{font-size:22px !important}
  .article-body h3{font-size:18px !important}
  .article-body pre,.example_code{font-size:13.5px !important}
}
/* 左目录激活态：Apple 式柔和填充（彻底取代旧「左侧色条」）*/
.design#leftcolumn a.current,
.design#leftcolumn a.active,
.design#leftcolumn a[style*="150, 185, 125"],
.design#leftcolumn a[style*="150,185,125"],
.design#leftcolumn a[style*="color:#000"],
.design#leftcolumn a[style*="color: #000"],
.design#leftcolumn a[style*="color:#000000"],
.design#leftcolumn a[style*="color: rgb(0, 0, 0)"]{
  background-color:var(--ts-accent-soft) !important;
  color:var(--ts-accent-ink) !important;
  font-weight:600 !important;
  border-left:0 !important;
  border-radius:var(--ts-r-sm) !important;
}


/* ==========================================================================
   2026-10 站点规范化（用户 5 项需求）
   1) 右栏「分类导航」整块去掉，宽度还给正文（.row 是 flex，middle-column flex:1 自动撑满）
   2) 笔记区彻底不显示：写笔记表单、他人笔记列表、笔记标题
   ========================================================================== */
.right-column,
.fivecol.last.right-column { display: none !important; }

#respond,
#comments,
#postcomments,
.comment-signarea,
.commentlist,
.comt-list,
.comt,
.comt-box,
.comt-ctrl,
#comment-status,
#user_add_note { display: none !important; }

/* 去掉右栏后，正文列拿到全部剩余宽度 */
.container.main > .row > .middle-column { flex: 1 1 auto !important; min-width: 0; }