/* 主题：孔版（silkscreen） — 丝网印的手作感：奶油纸、墨绿线、酸性青柠与胶带
   作者：DSH
   气质：像一张手工丝网印海报——厚纸、错版、半调网点、斜贴的纸胶带、大色块。
   与已有主题的区别：
     1. 首个「浅色底 + 高饱和荧光绿」的组合（包豪斯是红黄蓝原色，报纸/水墨是低饱和纸感）；
     2. 首个用 clip-path 做「手撕毛边」的主题，也是首个「纸胶带」元素；
     3. 边框不匀（1px 起 + 粗底边）、阴影是有颜色的硬色块而非灰阴影、圆角仅 2-6px；
     4. 版式密度最高：正文行高 1.6、卡片内边距收紧、标签与编号用等宽大写小字。 */
html[data-theme="silkscreen"]{
  --paper:#f2ebdc;
  --paper2:#e8dfcb;
  --paper-hi:#fbf6e9;
  --ink:#20291f;
  --gray:#5d6b52;
  --line:#cfc3a6;
  --cinnabar:#d0452a;
  --gold:#7e9010;
  --mist:#7a5cc4;
  --card:#fffdf4;
  --shadow:8px 8px 0 rgba(32,41,31,.10);
  --nav-bg:rgba(242,235,220,.94);
  --text-2:#48553d;
  --muted:#8b9179;
  --input-bg:#fffdf4;
  --on-ink:#f7f2e4;
  --accent-soft:rgba(208,69,42,.16);
  --panel-bg:#1c241b;
  --panel-bg2:#283127;
  --panel-line:#3d4a38;
  --panel-text:#d5dcc4;
  --panel-text2:#e9eed8;
  --panel-dim:#a9b199;
  --footer-bg:#1c241b;
  --footer-text:#d5dcc4;
  --footer-muted:#989f88;
  --footer-line:#3d4a38;
  --sun-1:#c9e021;
  --sun-2:#4f8f5a;
  --radius-lg:8px;
  --radius:5px;
  --radius-sm:4px;
  --radius-xs:2px;
  --radius-pill:3px;
  --serif:"Noto Serif SC",Georgia,"Songti SC",serif;
  --sans:"Noto Sans SC",system-ui,-apple-system,"PingFang SC",sans-serif;
}

html[data-theme="silkscreen"] .wgl-board{
  --wgl-paper:#f2ebdc;
  --wgl-ink:#20291f;
  --wgl-gray:#5d6b52;
  --wgl-line:#cfc3a6;
  --wgl-cinnabar:#d0452a;
  --wgl-gold:#7e9010;
  --wgl-mist:#7a5cc4;
  --wgl-card:#fffdf4;
  --wgl-canvas-paper:#fbf6e9;   /* 画布纸色（画板绘制区），独立于界面配色 */
}

/* 孔版 专属样式 */
/* 1. 底：奶油厚纸 + 半调网点。网点用 radial-gradient 画，透明度压到几乎不可见，
      只在近看时给底子一点「印上去的」颗粒，不喧哗。 */
html[data-theme="silkscreen"] body{
  background-color:var(--paper);
  background-image:
    radial-gradient(rgba(32,41,31,.055) 1px,transparent 1.4px),
    radial-gradient(rgba(126,144,16,.20) 1px,transparent 1.4px);
  background-size:5px 5px,19px 19px;
  background-position:0 0,3px 4px;
  background-attachment:fixed;
  font-weight:400;
  line-height:1.62;
}
html[data-theme="silkscreen"] .grain{mix-blend-mode:multiply;opacity:.34}
html[data-theme="silkscreen"] ::selection{background:var(--gold);color:var(--ink)}

/* 2. 卡片：厚纸 + 粗底边（像一叠裁好的纸）+ 有颜色的硬阴影，不用灰阴影 */
html[data-theme="silkscreen"] .card,
html[data-theme="silkscreen"] .work,
html[data-theme="silkscreen"] .cat,
html[data-theme="silkscreen"] .letter-form,
html[data-theme="silkscreen"] .letter-wall li,
html[data-theme="silkscreen"] .board-wrap,
html[data-theme="silkscreen"] .mobile-menu{
  background:var(--card);
  border:1px solid var(--line);
  border-bottom:5px solid var(--ink);
  border-radius:var(--radius-xs);
  box-shadow:7px 7px 0 rgba(32,41,31,.10);
}
html[data-theme="silkscreen"] .card:hover,
html[data-theme="silkscreen"] .work:hover,
html[data-theme="silkscreen"] .cat:hover{
  transform:translate(-3px,-3px);
  box-shadow:10px 10px 0 rgba(122,92,196,.26);
  border-bottom-color:var(--cinnabar);
}
html[data-theme="silkscreen"] .card::before{
  height:7px;
  background:repeating-linear-gradient(90deg,var(--cinnabar) 0 16px,var(--gold) 16px 32px,var(--mist) 32px 48px,var(--ink) 48px 64px);
}
/* 卡片的「错版色块」：左上角一枚半调网点小方块，图省事的套色偏移感 */
html[data-theme="silkscreen"] .card::after{
  content:"";position:absolute;top:-9px;right:14px;width:46px;height:18px;
  background:repeating-linear-gradient(45deg,rgba(126,144,16,.90) 0 4px,rgba(126,144,16,.34) 4px 8px);
  border:1px solid rgba(32,41,31,.30);
  transform:rotate(-3.5deg);
  pointer-events:none;
}

/* 3. 标题：丝网印的厚重衬线 + 大写字距；主标题压一层青柠「错版」描边 */
html[data-theme="silkscreen"] .hero{background:transparent}
html[data-theme="silkscreen"] .hero-title{
  font-weight:900;
  letter-spacing:.02em;
  text-shadow:4px 4px 0 rgba(126,144,16,.34),8px 8px 0 rgba(208,69,42,.16);
}
html[data-theme="silkscreen"] .hero-title .char:nth-child(3){
  color:var(--cinnabar);
  text-shadow:0 0 0 transparent;
}
html[data-theme="silkscreen"] .hero-kicker,
html[data-theme="silkscreen"] .scroll-hint,
html[data-theme="silkscreen"] .theme-badge,
html[data-theme="silkscreen"] .num,
html[data-theme="silkscreen"] .card-no,
html[data-theme="silkscreen"] .cat-ch{
  font-family:ui-monospace,"SFMono-Regular",Consolas,var(--sans);
  letter-spacing:.30em;
}
html[data-theme="silkscreen"] .sec-head h2{font-weight:700;letter-spacing:.04em}
html[data-theme="silkscreen"] .sec-head h2 em{color:var(--mist);letter-spacing:.16em;font-family:var(--sans)}
html[data-theme="silkscreen"] .red-sun{
  background:var(--gold);
  box-shadow:9px 9px 0 var(--cinnabar),18px 18px 0 rgba(122,92,196,.22);
  filter:none;
  opacity:1;
}
html[data-theme="silkscreen"] .scroll-hint span{background:var(--ink);width:3px}

/* 4. 分区标题：像印在纸边的一条标签 */
html[data-theme="silkscreen"] .sec-head{
  border-bottom:2px solid var(--ink);
  padding-bottom:12px;
  align-items:center;
}
html[data-theme="silkscreen"] .num{
  background:var(--gold);border:1px solid var(--ink);border-radius:0;
  color:var(--ink);padding:2px 12px;font-size:12px;font-weight:500;
  transform:rotate(-1.5deg);
}
html[data-theme="silkscreen"] .card-no{
  -webkit-text-stroke:2px var(--cinnabar);font-size:46px;letter-spacing:.02em;
}
html[data-theme="silkscreen"] .lead{font-size:clamp(17px,2.7vw,23px);line-height:1.85;letter-spacing:.01em}
html[data-theme="silkscreen"] .poem{
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  background:repeating-linear-gradient(45deg,rgba(122,92,196,.07) 0 8px,transparent 8px 16px);
}

/* 5. 按钮与标签：反色的硬色块，按下时整体下沉重印 */
html[data-theme="silkscreen"] .btn{
  background:var(--ink);color:var(--on-ink);border:1px solid var(--ink);border-radius:0;
  box-shadow:5px 5px 0 var(--cinnabar);letter-spacing:.16em;font-weight:500;
}
html[data-theme="silkscreen"] .btn:hover{
  transform:translate(3px,3px);box-shadow:2px 2px 0 var(--cinnabar);
  background:var(--cinnabar);border-color:var(--cinnabar);color:#fff;
}
html[data-theme="silkscreen"] .btn.ghost{background:var(--card);color:var(--ink);box-shadow:5px 5px 0 rgba(32,41,31,.18)}
html[data-theme="silkscreen"] .btn.ghost:hover{background:var(--gold);border-color:var(--ink);color:var(--ink);box-shadow:2px 2px 0 rgba(32,41,31,.18)}
html[data-theme="silkscreen"] .btn-small{
  border:1px solid var(--ink);border-radius:0;background:var(--gold);color:var(--ink);font-weight:500;
}
html[data-theme="silkscreen"] .btn-small:hover,
html[data-theme="silkscreen"] .links .btn-small:hover{background:var(--ink);color:var(--gold) !important}
html[data-theme="silkscreen"] .links a::after{height:3px;background:var(--gold)}
html[data-theme="silkscreen"] .links a:hover::after{background:var(--cinnabar)}
html[data-theme="silkscreen"] .menu-btn{border-radius:0;background:var(--card)}
html[data-theme="silkscreen"] .filter button{
  border-radius:0;border:1px solid var(--ink);color:var(--ink);background:var(--card);
  letter-spacing:.14em;box-shadow:3px 3px 0 rgba(32,41,31,.14);
}
html[data-theme="silkscreen"] .filter button.active,
html[data-theme="silkscreen"] .filter button:hover{
  background:var(--gold);color:var(--ink);border-color:var(--ink);
  transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(32,41,31,.18);
}
html[data-theme="silkscreen"] .tags span{
  background:none;border:1px dashed var(--ink);border-radius:0;color:var(--text-2);
  letter-spacing:.10em;font-family:ui-monospace,"SFMono-Regular",Consolas,var(--sans);
}
html[data-theme="silkscreen"] .letter-wall .msg-like{
  border-radius:0;border:1px solid var(--ink);background:var(--card);color:var(--cinnabar);
  box-shadow:3px 3px 0 rgba(208,69,42,.22);
}
html[data-theme="silkscreen"] .letter-wall .msg-like:hover:not(:disabled){
  background:var(--cinnabar);color:#fff;border-color:var(--cinnabar);transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(208,69,42,.30);
}
html[data-theme="silkscreen"] .cat-ch{background:var(--mist);box-shadow:3px 3px 0 var(--gold)}
html[data-theme="silkscreen"] .cat:hover .cat-ch{background:var(--cinnabar)}
html[data-theme="silkscreen"] .cat-list a:hover{color:var(--cinnabar);border-bottom-color:var(--cinnabar)}
html[data-theme="silkscreen"] .work-link{color:var(--mist);font-family:ui-monospace,"SFMono-Regular",Consolas,var(--sans);letter-spacing:.08em}
html[data-theme="silkscreen"] .work-link:hover{color:var(--cinnabar);border-bottom-color:var(--cinnabar)}

/* 6. 作品图版：四色套印的青柠/珊瑚/紫，块面感而非顺滑渐变 */
html[data-theme="silkscreen"] .work-art{
  font-family:ui-monospace,"SFMono-Regular",Consolas,var(--sans);
  font-weight:700;font-size:52px;letter-spacing:.16em;
  border-bottom:2px solid var(--ink);
}
html[data-theme="silkscreen"] .art-1{background:linear-gradient(135deg,#20291f,#4f8f5a)}
html[data-theme="silkscreen"] .art-2{background:linear-gradient(135deg,#d0452a,#f08a3c);color:#1c241b !important}
html[data-theme="silkscreen"] .art-3{background:linear-gradient(135deg,#c9e021,#4f8f5a);color:#1c241b !important}
html[data-theme="silkscreen"] .art-4{background:linear-gradient(135deg,#7a5cc4,#c9b8f0);color:#1c241b !important}
html[data-theme="silkscreen"] .art-5{background:linear-gradient(135deg,#1c241b,#7a5cc4)}
html[data-theme="silkscreen"] .art-6{background:linear-gradient(135deg,#e8dfcb,#c9d98a);color:#1c241b !important}

/* 7. 深色面板 / 跑马灯 / 页脚：收进墨绿体系，保持印刷的硬边 */
html[data-theme="silkscreen"] .blank{
  border-radius:0;border:1px solid var(--ink);border-bottom:6px solid var(--gold);
  margin:0 3vw;
}
html[data-theme="silkscreen"] .blank-bar{border-radius:0;background:var(--panel-line);height:12px}
html[data-theme="silkscreen"] .blank-bar div{border-radius:0;background:repeating-linear-gradient(45deg,var(--gold) 0 7px,#5e6f08 7px 14px)}
html[data-theme="silkscreen"] .blank-value b{font-family:ui-monospace,"SFMono-Regular",Consolas,var(--sans)}
html[data-theme="silkscreen"] .blank-list li{border-radius:0;border-left:4px solid var(--gold)}
html[data-theme="silkscreen"] .blank-demo{background:var(--paper-hi);border:1px solid var(--line);border-radius:0}
html[data-theme="silkscreen"] .blank-demo .ring{stroke:var(--cinnabar);opacity:1}
html[data-theme="silkscreen"] .blank-demo .stroke{stroke:var(--mist)}
html[data-theme="silkscreen"] .blank-demo .dot{fill:var(--cinnabar)}
html[data-theme="silkscreen"] .blank-right blockquote{border-left:5px solid var(--gold);padding-left:20px}
html[data-theme="silkscreen"] .side-bar{border-radius:0;background:var(--panel-line);height:10px}
html[data-theme="silkscreen"] .side-bar i{border-radius:0}
html[data-theme="silkscreen"] .marquee{
  background:var(--gold);color:var(--ink);border-color:var(--ink);letter-spacing:.24em;
  font-family:ui-monospace,"SFMono-Regular",Consolas,var(--sans);font-weight:500;
}
html[data-theme="silkscreen"] .footer{border-top:3px solid var(--gold);margin-top:44px}
html[data-theme="silkscreen"] .footer .seal,
html[data-theme="silkscreen"] .foot-brand .seal,
html[data-theme="silkscreen"] .brand-text .seal{
  background:var(--cinnabar);color:#fff;border:1px solid var(--ink);
  border-radius:0;box-shadow:4px 4px 0 var(--gold);
}
html[data-theme="silkscreen"] .copyright{border-top:1px solid var(--footer-line)}
html[data-theme="silkscreen"] .cursor{
  border-radius:0;border-color:var(--cinnabar);mix-blend-mode:multiply;
  transform:translate(-50%,-50%) rotate(45deg);border-width:3px;
}
html[data-theme="silkscreen"] .cursor.big{background:rgba(126,144,16,.32)}

/* 8. 画板：工具栏/状态栏用厚纸与硬边，圆角收到最小
   注意：board.css 把工具栏底色、画布棋盘格、缩略图底色写死成了浅纸色，
   若不在主题里覆盖，深色主题下画布会出现一块米色棋盘格。 */
html[data-theme="silkscreen"] .wgl-board{border-radius:0;box-shadow:8px 8px 0 rgba(32,41,31,.10)}
html[data-theme="silkscreen"] .wgl-toolbar{
  background:var(--paper2);
  border-bottom:2px solid var(--wgl-line);
}
html[data-theme="silkscreen"] .wgl-status{background:var(--paper2)}
html[data-theme="silkscreen"] .wgl-gallery{background:var(--card)}
html[data-theme="silkscreen"] .wgl-gallery-head{background:none}
html[data-theme="silkscreen"] .wgl-thumb{background:var(--paper2)}
html[data-theme="silkscreen"] .wgl-empty{color:var(--wgl-gray)}
html[data-theme="silkscreen"] .wgl-viewport{
  background:
    radial-gradient(rgba(32,41,31,.05) 1px,transparent 1.4px) 0 0/6px 6px,
    repeating-conic-gradient(var(--paper2) 0% 25%,var(--card) 0% 50%) 50%/22px 22px;
}
html[data-theme="silkscreen"] .wgl-brush,
html[data-theme="silkscreen"] .wgl-btn,
html[data-theme="silkscreen"] .wgl-input,
html[data-theme="silkscreen"] .wgl-color,
html[data-theme="silkscreen"] .wgl-thumb{border-radius:0;background:var(--card);color:var(--wgl-ink)}
html[data-theme="silkscreen"] .wgl-brush.active,
html[data-theme="silkscreen"] .wgl-btn.active{background:var(--wgl-ink);color:var(--on-ink);border-color:var(--wgl-ink)}
html[data-theme="silkscreen"] .wgl-btn.primary{background:var(--wgl-cinnabar);border-color:var(--wgl-cinnabar);color:#fff}
html[data-theme="silkscreen"] .wgl-stage{box-shadow:6px 6px 0 rgba(32,41,31,.16)}
html[data-theme="silkscreen"] .wgl-modal{background:rgba(28,36,27,.92)}
html[data-theme="silkscreen"] .wgl-modal img{border-radius:0;border:3px solid var(--gold)}
html[data-theme="silkscreen"] .wgl-modal figcaption{color:var(--gold);letter-spacing:.20em;font-family:ui-monospace,"SFMono-Regular",Consolas,var(--sans)}
html[data-theme="silkscreen"] .wgl-modal .wgl-close{border-radius:0;border-color:var(--gold);color:var(--gold)}