/* 程序员开发笔记 —— 共享样式
   旧版暗色霓虹风格：深色网格背景 + 青色强调 + 顶栏/页脚固定、中间滚动，文章以弹窗阅读。
   无外部字体 / 图片 / 依赖。 */

:root{
  --bg:#080a0f; --panel:#0e1219; --panel-hi:#131926;
  --fg:#e6ebf5; --muted:#818c9e; --body:#aab4c4;
  --line:#1c2331; --line-hi:#2b3446; --accent:#22d3ee;
  --d-ops:#22d3ee; --d-selfhost:#34d399; --d-frontend:#4dabf7; --d-runtime:#a78bfa; --d-workflow:#f472b6;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15.5px/1.7 system-ui,-apple-system,"Segoe UI","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:44px 44px;
  /* 应用外壳：顶栏与页脚固定，只有中间区域滚动 */
  height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
[hidden]{display:none !important}
.mono{font-family:var(--mono)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.glow{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(660px 320px at 50% -8%, rgba(34,211,238,.16), transparent 70%),
    radial-gradient(520px 280px at 88% 6%, rgba(167,139,250,.12), transparent 72%);
}

/* ================= 顶栏 ================= */
.top{flex:none; z-index:20; border-bottom:1px solid var(--line); background:rgba(8,10,15,.85)}
@supports (backdrop-filter:blur(6px)){ .top{backdrop-filter:blur(9px)} }
.top .inner{
  max-width:980px; margin:0 auto; padding:13px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.top .brand{display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600}
.top .brand .mark{display:block; flex:none}
.top nav{display:flex; align-items:center; gap:18px}
.top nav a{color:var(--muted); text-decoration:none; font-size:13.5px}
.top nav a:hover{color:var(--accent)}

/* 中间滚动区 */
.scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
}
.wrap{position:relative; z-index:1; flex:none; width:100%; max-width:980px; margin:0 auto; padding:0 22px 44px}

/* ================= hero ================= */
.hero{text-align:center; padding:clamp(34px,5.5vh,56px) 0 0}
.hero h1{
  margin:0 0 10px; font-size:clamp(26px,4.4vh,34px); line-height:1.25;
  letter-spacing:-.025em; font-weight:740; color:var(--fg);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{
    background:linear-gradient(92deg,#e6ebf5 24%,var(--accent));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
}
.hero .sub{margin:0 auto; max-width:58ch; color:var(--muted); font-size:14.5px}

.searchwrap{max-width:640px; margin:clamp(14px,2.6vh,26px) auto 0}
.searchbox{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--panel); border:1px solid var(--line-hi); border-radius:14px;
  padding:11px 12px 11px 18px; transition:border-color .15s, box-shadow .15s;
}
.searchbox:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px rgba(34,211,238,.09)}
.searchbox .ico{color:var(--accent); font-size:15px; line-height:1; flex:none}
.searchbox input{
  flex:1; min-width:0; background:transparent; border:0; outline:0; padding:0;
  color:var(--fg); font-size:16px; font-family:inherit;
}
.searchbox input::placeholder{color:#5d6a80}
.searchbox .kbd{
  flex:none; font-family:var(--mono); font-size:11px; color:var(--muted);
  border:1px solid var(--line); border-radius:5px; padding:2px 7px;
}
.searchbox .go{
  flex:none; color:var(--accent); background:rgba(34,211,238,.12);
  border:1px solid rgba(34,211,238,.3); border-radius:8px; padding:6px 14px;
  font-size:13px; transition:background .15s;
}
.searchbox .go:hover{background:rgba(34,211,238,.2)}
.searchnote{margin:8px 0 0; color:#6b7688; font-size:11.5px}

/* ================= 区块标题 ================= */
section{margin-top:clamp(16px,3.2vh,32px)}
h2{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font-size:12px; letter-spacing:.16em; color:var(--muted); font-weight:600;
}
h2::after{content:""; flex:1; height:1px; background:var(--line)}
h2 .hint{letter-spacing:0; font-weight:400; white-space:nowrap}
h2.split{justify-content:space-between}
h2.split::after{display:none}

/* ================= 分类 ================= */
.domains{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:0; padding:0; list-style:none}
.dom{
  position:relative; display:block; width:100%; text-align:left; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 13px 10px; color:inherit;
  transition:border-color .15s, transform .15s, background .15s;
}
.dom::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent)}
.dom[data-domain="服务器运维"]::before{background:var(--d-ops)}
.dom[data-domain="自托管服务"]::before{background:var(--d-selfhost)}
.dom[data-domain="前端工程"]::before{background:var(--d-frontend)}
.dom[data-domain="运行时与数据"]::before{background:var(--d-runtime)}
.dom[data-domain="工程工作流"]::before{background:var(--d-workflow)}
.dom:hover{border-color:var(--line-hi); transform:translateY(-1px)}
.dom.on{border-color:var(--accent); background:var(--panel-hi)}
.dom b{display:block; font-size:14.5px; font-weight:620; line-height:1.35}
.dom em{display:block; font-style:normal; margin-top:3px; color:var(--muted); font-size:11.5px; font-family:var(--mono)}

/* ================= 条目卡片 ================= */
.entries{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.entry{
  position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:15px 17px; cursor:pointer; transition:border-color .15s, background .15s;
}
.entry:hover,.entry:focus-visible{border-color:var(--line-hi); background:var(--panel-hi); outline:none}
.entry::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--d-ops); border-radius:12px 0 0 12px;
}
.entry[data-domain="服务器运维"]::before{background:var(--d-ops)}
.entry[data-domain="自托管服务"]::before{background:var(--d-selfhost)}
.entry[data-domain="前端工程"]::before{background:var(--d-frontend)}
.entry[data-domain="运行时与数据"]::before{background:var(--d-runtime)}
.entry[data-domain="工程工作流"]::before{background:var(--d-workflow)}
.entry .head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.entry h3{
  margin:0; font-size:16px; font-weight:640; letter-spacing:-.01em;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.entry time{flex:none; font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.entry .sum{
  margin:6px 0 0; color:var(--muted); font-size:13.5px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.entry .tags{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; font-size:11.5px; font-family:var(--mono)}
.entry .tags span{
  color:var(--accent); background:rgba(34,211,238,.09);
  border:1px solid rgba(34,211,238,.22); border-radius:5px; padding:1px 7px;
}
.noresult{
  border:1px dashed var(--line); border-radius:12px; padding:22px; text-align:center;
  color:var(--muted); font-size:14px; background:rgba(14,18,25,.6);
}

/* ================= 弹窗 ================= */
body.modal-locked .scroll{overflow:hidden}
.modal{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px}
.modal-backdrop{position:absolute; inset:0; background:rgba(4,6,10,.72)}
@supports (backdrop-filter:blur(4px)){ .modal-backdrop{backdrop-filter:blur(4px)} }
.modal-card{
  position:relative; width:100%; max-width:720px; max-height:84vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line-hi); border-radius:16px;
  padding:26px 30px 32px; box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.modal-x{
  position:absolute; top:14px; right:16px; color:var(--muted); font-size:15px;
  border:1px solid var(--line); border-radius:8px; padding:3px 9px;
}
.modal-x:hover{color:var(--accent); border-color:var(--accent)}
.modal-meta{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.modal-meta .badge{border:1px solid var(--line); border-radius:5px; padding:1px 7px}
#modal-title{
  display:block; margin:12px 0 0; font-size:21px; line-height:1.42;
  letter-spacing:-.015em; font-weight:660; color:var(--fg);
}
.modal-tags{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; font-size:11.5px; font-family:var(--mono)}
.modal-tags span{
  color:var(--accent); background:rgba(34,211,238,.09);
  border:1px solid rgba(34,211,238,.22); border-radius:5px; padding:1px 7px;
}
.modal-body{margin-top:16px; padding-top:18px; border-top:1px solid var(--line)}

/* 弹窗正文（文章内容） */
.modal-body p{margin:0 0 13px; color:var(--body); font-size:14.5px; line-height:1.8}
.modal-body p:last-child{margin-bottom:0}
.modal-body .lead{color:var(--fg); font-size:15px}
.modal-body h2{
  display:flex; align-items:center; gap:10px; margin:26px 0 10px;
  font-size:12.5px; letter-spacing:.12em; color:var(--muted); font-weight:600;
}
.modal-body h2::after{content:""; flex:1; height:1px; background:var(--line)}
.modal-body h2:first-child{margin-top:0}
.modal-body h3{margin:20px 0 8px; font-size:14.5px; font-weight:640; letter-spacing:-.005em; color:var(--fg)}
.modal-body a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(34,211,238,.32)}
.modal-body a:hover{border-bottom-color:var(--accent)}
.modal-body strong{color:var(--fg); font-weight:640}
.modal-body ul,.modal-body ol{margin:0 0 14px; padding-left:22px; color:var(--body); font-size:14.5px}
.modal-body li{margin:4px 0}
.modal-body li::marker{color:var(--muted)}
.modal-body code{
  padding:1px 5px; border:1px solid rgba(34,211,238,.2); border-radius:4px;
  background:rgba(34,211,238,.07); color:#9fe8f2;
  font-family:var(--mono); font-size:.88em; word-break:break-word;
}
.modal-body pre{
  margin:0 0 15px; padding:13px 15px; overflow-x:auto;
  background:#0a0e15; border:1px solid var(--line); border-radius:10px;
  font:12.5px/1.72 var(--mono); color:#c8d3e0; tab-size:2;
}
.modal-body pre code{padding:0; border:0; background:none; color:inherit; font-size:inherit; white-space:pre; word-break:normal}
.modal-body blockquote{
  margin:0 0 15px; padding:2px 0 2px 14px; border-left:2px solid var(--line-hi);
  color:var(--muted); font-size:14.5px;
}
.modal-body blockquote p:last-child{margin-bottom:0}
.modal-body hr{margin:22px 0; border:0; border-top:1px solid var(--line)}
.modal-body .callout{
  margin:0 0 16px; padding:12px 15px; border:1px solid var(--line-hi);
  border-left:2px solid var(--accent); border-radius:8px; background:rgba(34,211,238,.05);
}
.modal-body .callout p{margin:0}
.modal-body table{width:100%; margin:0 0 16px; display:block; overflow-x:auto; border-collapse:collapse; font-size:13px; line-height:1.6}
.modal-body th,.modal-body td{border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top}
.modal-body th{background:var(--panel-hi); color:var(--fg); font-weight:600; white-space:nowrap}

/* ================= 滚动条 ================= */
/* 暗色细滚动条：默认几乎隐形，悬停才亮起来；避免弹窗里出现一条突兀的白条 */
.scroll,.modal-card,.modal-body pre,.modal-body table{
  scrollbar-width:thin; scrollbar-color:var(--line-hi) transparent;
}
.scroll::-webkit-scrollbar,.modal-card::-webkit-scrollbar{width:10px; height:10px}
.modal-body pre::-webkit-scrollbar,.modal-body table::-webkit-scrollbar{width:8px; height:8px}
.scroll::-webkit-scrollbar-track,.modal-card::-webkit-scrollbar-track,
.modal-body pre::-webkit-scrollbar-track,.modal-body table::-webkit-scrollbar-track{background:transparent}
.scroll::-webkit-scrollbar-thumb,.modal-card::-webkit-scrollbar-thumb,
.modal-body pre::-webkit-scrollbar-thumb,.modal-body table::-webkit-scrollbar-thumb{
  background:var(--line-hi); border-radius:999px; border:3px solid transparent; background-clip:padding-box;
}
.scroll::-webkit-scrollbar-thumb:hover,.modal-card::-webkit-scrollbar-thumb:hover,
.modal-body pre::-webkit-scrollbar-thumb:hover,.modal-body table::-webkit-scrollbar-thumb:hover{
  background:var(--accent); border:3px solid transparent; background-clip:padding-box;
}
.modal-card{overscroll-behavior:contain}

/* ================= 页脚（备案位） ================= */
.site-foot{
  flex:none; border-top:1px solid var(--line);
  color:#6b7688; font-size:11.5px; font-family:var(--mono);
}
.foot-inner{max-width:980px; margin:0 auto; padding:11px 22px}
.site-foot .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:6px 20px; flex-wrap:wrap;
}
.site-foot .desc{flex:1 1 auto; min-width:240px}
.site-foot .filings{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.site-foot a{color:#7d889b; text-decoration:none; border-bottom:1px solid #222a37; padding-bottom:1px}
.site-foot a:hover{color:var(--accent); border-bottom-color:var(--accent)}

/* ================= 响应式 ================= */
@media (min-width:900px){
  .entries{grid-template-columns:1fr 1fr; gap:12px}
  .entry .sum{-webkit-line-clamp:2}
  .hero{padding-top:clamp(28px,4.5vh,48px)}
}
@media (max-width:899px){
  .domains{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
  .hero{padding-top:36px}
}
@media (max-width:640px){
  .domains{grid-template-columns:repeat(2,1fr)}
  .entry .head{flex-direction:column; gap:2px}
  .entry h3{-webkit-line-clamp:3}
  .searchbox .kbd{display:none}
  .modal{padding:12px}
  .modal-card{padding:22px 18px 26px; max-height:90vh}
  .foot-inner{padding:10px 16px}
  .site-foot .row{gap:4px 12px}
}