/* 竞品情报门户 · 共享主题层
   布局 CSS 只管排版；颜色与质感全部在 [data-theme] 块里。
   三个主题：d 暖纸 / e 亮色科技 / g 春日学宫（像素）
   铺到新页面 = 引这个 css + portal-theme.js，并保证 class 名对得上。 */

/* ── 布局（与主题无关） ───────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;position:relative;overflow-x:hidden;
 font:15px/1.7 "PingFang SC","Microsoft YaHei",system-ui,sans-serif}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px 76px;position:relative;z-index:2}
.top{display:flex;align-items:center;gap:15px;padding:44px 0 0;flex-wrap:wrap}
h1{font-size:1.55rem;font-weight:700}
.sub{font-size:.72rem;display:flex;align-items:center;gap:9px;padding:7px 13px}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:26px 0 34px}
.cell{padding:16px 17px;position:relative;overflow:hidden}
.cell .n{font-size:1.55rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.cell .n em{font-style:normal;font-size:.7rem;margin-left:3px;font-weight:600}
.cell .k{font-size:.69rem;margin-top:6px;letter-spacing:.1em}
.lane{display:flex;align-items:center;gap:11px;font-size:.72rem;letter-spacing:.26em;margin:34px 0 14px}
.lane::after{content:"";flex:1;height:1px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
a.card{position:relative;display:flex;flex-direction:column;padding:19px 20px 16px;
 text-decoration:none;overflow:hidden;transition:.2s}
.hd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ic{width:37px;height:37px;display:grid;place-items:center;flex:none;position:relative}
.ic svg{width:18px;height:18px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
h2{font-size:.98rem;font-weight:700}
.card p{font-size:.79rem;line-height:1.75;margin-bottom:13px}
.prev{padding:12px 13px;margin-bottom:12px}
.prow{display:flex;align-items:center;gap:9px;font-size:.73rem;margin:6px 0}
.prow b{font-variant-numeric:tabular-nums;font-weight:700;min-width:32px;text-align:right}
.bar{flex:1;height:7px;overflow:hidden}
.bar i{display:block;height:100%}
.ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px}
.btn{font-size:.76rem;font-weight:700;padding:7px 15px;position:relative;overflow:hidden}
.stamp{font-size:.67rem}
.tag{font-size:.66rem;padding:2px 9px;font-weight:600}
.dim{opacity:.55;pointer-events:none}
footer{margin-top:38px;padding-top:16px;font-size:.73rem;line-height:1.95}
@media(max-width:900px){.strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.strip{grid-template-columns:repeat(2,1fr)}h1{white-space:normal!important}}

/* ── 风格切换控件（自身也跟主题变色） ──────────────── */
.tsw{margin-left:auto;position:relative;z-index:50}
.tsw-btn{display:flex;align-items:center;gap:8px;padding:7px 13px;font-size:.75rem;
 cursor:pointer;border:0;font-family:inherit;font-weight:600}
.tsw-btn svg{width:15px;height:15px;fill:none;stroke-width:1.8;stroke-linecap:round}
.tsw-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:158px;padding:6px;
 display:none;flex-direction:column;gap:2px}
.tsw.open .tsw-menu{display:flex}
.tsw-item{display:flex;align-items:center;gap:10px;padding:9px 11px;font-size:.8rem;
 cursor:pointer;border:0;background:transparent;font-family:inherit;text-align:left;width:100%}
.tsw-sw{width:26px;height:18px;flex:none}
.tsw-item .nm{flex:1;font-weight:600}
.tsw-item .ck{font-size:.8rem;opacity:0}
.tsw-item[aria-checked="true"] .ck{opacity:1}

/* ══════════ 主题 D · 暖纸 ══════════ */
[data-theme="d"]{--bg:#f6f4ef;--card:#fffdf9;--card2:#fffbf2;--line:#ddd7cc;--line2:#eae4d9;
 --tx:#1b1a17;--tx2:#55504a;--tx3:#8b847a;--ac:#8b3a2f;--ac2:#a8802c;--ac3:#5d7a5a;
 --c1:#8b3a2f;--c2:#a8802c;--c3:#5d7a5a;--c4:#a8802c;--c5:#c4bbab;
 --serif:"Noto Serif SC",Georgia,serif}
[data-theme="d"] body{background:var(--bg);color:var(--tx);
 background-image:radial-gradient(#e6e0d5 .5px,transparent .5px);background-size:22px 22px}
[data-theme="d"] h1,[data-theme="d"] h2,[data-theme="d"] .cell .n,[data-theme="d"] .prow b,
[data-theme="d"] .lane{font-family:var(--serif)}
[data-theme="d"] .top{border-bottom:2px solid var(--tx);padding-bottom:13px}
[data-theme="d"] .kick{color:var(--ac);font-size:.66rem;letter-spacing:.4em;font-weight:700}
[data-theme="d"] .sub{color:var(--tx3);margin-left:14px;padding:0}
[data-theme="d"] .strip{gap:0;background:var(--card);border:1px solid var(--line);border-top:0;margin-top:0}
[data-theme="d"] .cell{border-right:1px solid var(--line2)}
[data-theme="d"] .cell:last-child{border-right:0}
[data-theme="d"] .cell .n{color:var(--tx)}
[data-theme="d"] .cell .k,[data-theme="d"] .lane{color:var(--tx3)}
[data-theme="d"] .lane::after{background:var(--line)}
[data-theme="d"] a.card{background:var(--card);border:1px solid var(--line);color:var(--tx)}
[data-theme="d"] a.card:hover{border-color:var(--ac);box-shadow:0 2px 0 var(--ac);transform:translateY(-2px)}
[data-theme="d"] .ic{background:#faf7f1;border:1px solid var(--line)}
[data-theme="d"] .ic svg{stroke:var(--ac)}
[data-theme="d"] .card p{color:var(--tx2)}
[data-theme="d"] .prev{background:#faf8f3;border:1px solid var(--line2)}
[data-theme="d"] .prow{color:var(--tx2)}
[data-theme="d"] .prow b{color:var(--tx)}
[data-theme="d"] .bar{background:#eae4d9}
[data-theme="d"] .ft{border-top:1px solid var(--line2)}
[data-theme="d"] .btn{background:none;color:var(--ac);padding:0;font-family:var(--serif)}
[data-theme="d"] .stamp{color:var(--tx3)}
[data-theme="d"] .tag{border:1px solid var(--line);color:var(--tx3);background:#faf8f3}
[data-theme="d"] footer{border-top:2px solid var(--tx);color:var(--tx3)}
[data-theme="d"] .tsw-btn{background:var(--card);border:1px solid var(--line);color:var(--tx2)}
[data-theme="d"] .tsw-btn svg{stroke:var(--ac)}
[data-theme="d"] .tsw-menu{background:var(--card);border:1px solid var(--line);box-shadow:0 8px 26px rgba(120,100,70,.14)}
[data-theme="d"] .tsw-item{color:var(--tx)}
[data-theme="d"] .tsw-item:hover{background:#faf6ee}
[data-theme="d"] .tsw-item .ck{color:var(--ac)}

/* ══════════ 主题 E · 亮色科技 ══════════ */
[data-theme="e"]{--bg:#f2f5ff;--panel:rgba(255,255,255,.74);--panel2:rgba(255,255,255,.93);
 --line:rgba(120,140,200,.24);--line2:rgba(90,110,190,.42);
 --tx:#141c33;--tx2:#55618a;--tx3:#8a94b4;
 --bl:#0aa2ff;--vi:#7c3aed;--mg:#ff2d9b;--te:#00c2a8;--am:#ff9f0a;
 --c1:#0aa2ff;--c2:#ff2d9b;--c3:#00c2a8;--c4:#ff9f0a;--c5:#7c3aed;
 --mono:ui-monospace,"SF Mono",Menlo,monospace}
[data-theme="e"] body{background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
[data-theme="e"] body::before{content:"";position:fixed;inset:-25%;z-index:0;pointer-events:none;
 background:radial-gradient(42% 34% at 10% 6%,rgba(10,162,255,.34),transparent 62%),
  radial-gradient(40% 32% at 92% 10%,rgba(255,45,155,.26),transparent 60%),
  radial-gradient(46% 38% at 76% 92%,rgba(124,58,237,.28),transparent 62%),
  radial-gradient(38% 30% at 16% 88%,rgba(0,194,168,.24),transparent 60%);
 filter:blur(30px);animation:eDrift 26s ease-in-out infinite alternate}
@keyframes eDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2%,0) scale(1.07)}}
[data-theme="e"] body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(rgba(60,80,160,.055) 1px,transparent 1px),
            linear-gradient(90deg,rgba(60,80,160,.055) 1px,transparent 1px);
 background-size:44px 44px;mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent)}
[data-theme="e"] .kick{font-family:var(--mono);font-size:.62rem;letter-spacing:.4em;padding:6px 12px;
 border-radius:99px;color:#fff;background:linear-gradient(92deg,var(--bl),var(--vi),var(--mg));
 font-weight:700;box-shadow:0 6px 18px rgba(124,58,237,.3)}
[data-theme="e"] h1{letter-spacing:.02em;white-space:nowrap;
 background:linear-gradient(92deg,var(--bl),var(--vi) 55%,var(--mg));
 -webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="e"] .sub{font-family:var(--mono);color:var(--tx2);border-radius:99px;
 background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(12px)}
[data-theme="e"] .cell{border-radius:15px;background:var(--panel);backdrop-filter:blur(14px);
 border:1px solid var(--line);box-shadow:0 8px 24px rgba(80,100,180,.1)}
[data-theme="e"] .cell::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c,var(--bl))}
[data-theme="e"] .cell .n{font-family:var(--mono);color:var(--c,var(--bl))}
[data-theme="e"] .cell .k{font-family:var(--mono);color:var(--tx2)}
[data-theme="e"] .cell .n em{color:var(--tx3)}
[data-theme="e"] .lane{font-family:var(--mono);color:var(--tx2)}
[data-theme="e"] .lane::before{content:"◆";color:var(--mg);font-size:.6rem}
[data-theme="e"] .lane::after{background:linear-gradient(90deg,var(--line2),transparent)}
[data-theme="e"] a.card{border-radius:17px;background:var(--panel);backdrop-filter:blur(14px);
 border:1px solid var(--line);color:var(--tx);box-shadow:0 10px 28px rgba(80,100,180,.1)}
[data-theme="e"] a.card:hover{background:var(--panel2);transform:translateY(-3px);
 box-shadow:0 18px 44px rgba(100,80,220,.2)}
[data-theme="e"] .ic{border-radius:12px;
 background:linear-gradient(150deg,var(--c,var(--bl)),color-mix(in srgb,var(--c,var(--bl)) 55%,#fff));
 box-shadow:0 6px 16px color-mix(in srgb,var(--c,var(--bl)) 34%,transparent)}
[data-theme="e"] .ic svg{stroke:#fff;stroke-width:1.9}
[data-theme="e"] .card p{color:var(--tx2)}
[data-theme="e"] .prev{background:rgba(255,255,255,.66);border:1px solid var(--line);border-radius:12px}
[data-theme="e"] .prow{color:var(--tx2);font-family:var(--mono)}
[data-theme="e"] .prow b{color:var(--c,var(--bl))}
[data-theme="e"] .bar{border-radius:99px;background:rgba(90,110,190,.14)}
[data-theme="e"] .bar i{border-radius:99px}
[data-theme="e"] .ft{border-top:1px solid var(--line)}
[data-theme="e"] .btn{font-family:var(--mono);letter-spacing:.06em;border-radius:99px;color:#fff;
 background:linear-gradient(92deg,var(--bl),var(--vi));box-shadow:0 6px 16px rgba(10,162,255,.3)}
[data-theme="e"] .btn::after{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
 transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent)}
[data-theme="e"] a.card:hover .btn::after{animation:eShine .85s ease-out}
@keyframes eShine{to{left:160%}}
[data-theme="e"] .stamp{font-family:var(--mono);color:var(--tx3)}
[data-theme="e"] .tag{border-radius:99px;font-family:var(--mono);color:#a35d00;
 background:rgba(255,159,10,.14);border:1px solid rgba(255,159,10,.5)}
[data-theme="e"] footer{border-top:1px solid var(--line);color:var(--tx3);font-family:var(--mono)}
[data-theme="e"] .tsw-btn{border-radius:99px;background:var(--panel);border:1px solid var(--line);
 color:var(--tx2);backdrop-filter:blur(12px)}
[data-theme="e"] .tsw-btn svg{stroke:var(--vi)}
[data-theme="e"] .tsw-menu{border-radius:14px;background:rgba(255,255,255,.94);border:1px solid var(--line);
 backdrop-filter:blur(14px);box-shadow:0 16px 40px rgba(90,110,190,.22)}
[data-theme="e"] .tsw-item{border-radius:10px;color:var(--tx)}
[data-theme="e"] .tsw-item:hover{background:rgba(120,140,220,.1)}
[data-theme="e"] .tsw-item .ck{color:var(--vi)}

/* ══════════ 主题 G · 春日学宫（像素） ══════════ */
[data-theme="g"]{--lawn:#aed488;--lawn2:#c4e2a2;--lawn3:#94c471;
 --cream:#f7f3e3;--cream2:#fffdf2;--cream3:#e8e0c6;
 --tx:#4a5240;--tx2:#6f7862;--tx3:#9aa38b;--edge:#5d6b4a;
 --zhu:#c94f3d;--sakura:#f0a8bc;--jade:#7fc4b0;--bamboo:#6faa4a;--gold:#e0b64a;
 --c1:#c94f3d;--c2:#7fc4b0;--c3:#6faa4a;--c4:#e0b64a;--c5:#f0a8bc;
 --px:"Press Start 2P",monospace}
[data-theme="g"] body{color:var(--tx);image-rendering:pixelated;
 background:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 2px,transparent 2px 34px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 2px,transparent 2px 34px),
  linear-gradient(170deg,var(--lawn2) 0%,var(--lawn) 45%,var(--lawn3) 100%);
 background-attachment:fixed}
[data-theme="g"] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
 background-image:radial-gradient(rgba(90,130,60,.5) 1px,transparent 1px);background-size:11px 11px}
[data-theme="g"] .top{background:rgba(58,64,50,.82);padding:11px 14px;margin-top:34px;
 box-shadow:0 0 0 3px rgba(40,46,34,.35)}
[data-theme="g"] .kick{font-family:var(--px);font-size:.44rem;color:#f4f1e2;letter-spacing:.2em;
 background:var(--zhu);padding:6px 8px;box-shadow:0 0 0 2px rgba(40,46,34,.5)}
[data-theme="g"] h1{color:#f4f1e2;font-size:1.15rem;letter-spacing:.06em}
[data-theme="g"] .sub{font-family:var(--px);font-size:.44rem;color:#d9e3c8;padding:0}
[data-theme="g"] .strip{gap:14px}
[data-theme="g"] .cell{background:var(--cream2);
 box-shadow:0 0 0 3px var(--edge),0 4px 0 3px rgba(60,70,45,.2)}
[data-theme="g"] .cell .n{font-family:var(--px);font-size:.92rem;color:var(--zhu);text-shadow:1px 1px 0 var(--cream3)}
[data-theme="g"] .cell .n em{font-size:.44rem;color:var(--tx3)}
[data-theme="g"] .cell .k{color:var(--tx2)}
[data-theme="g"] .lane span.tx{background:var(--cream);padding:5px 12px;font-weight:700;
 font-size:.8rem;color:var(--tx);letter-spacing:0;
 box-shadow:0 0 0 3px var(--edge),0 3px 0 3px rgba(60,70,45,.22)}
[data-theme="g"] .lane::after{height:3px;
 background:repeating-linear-gradient(90deg,var(--cream) 0 9px,transparent 9px 18px)}
[data-theme="g"] a.card{background:var(--cream2);color:var(--tx);
 box-shadow:0 0 0 3px var(--edge),0 5px 0 3px rgba(60,70,45,.22);
 transition:transform .09s steps(2),box-shadow .09s steps(2)}
[data-theme="g"] a.card:hover{transform:translate(-2px,-2px);
 box-shadow:0 0 0 3px var(--zhu),0 7px 0 3px rgba(60,70,45,.26)}
[data-theme="g"] .ic{background:var(--cream);box-shadow:0 0 0 3px var(--edge)}
[data-theme="g"] .ic svg{stroke:var(--bamboo);stroke-width:2.2;shape-rendering:crispEdges;stroke-linecap:square}
[data-theme="g"] .card p{color:var(--tx2)}
[data-theme="g"] .prev{background:var(--cream);box-shadow:inset 0 0 0 2px var(--cream3)}
[data-theme="g"] .prow{color:var(--tx2)}
[data-theme="g"] .prow b{font-family:var(--px);font-size:.54rem;color:var(--zhu)}
[data-theme="g"] .bar{height:11px;background:var(--cream3);padding:2px;box-shadow:0 0 0 2px rgba(93,107,74,.35)}
[data-theme="g"] .ft{border-top:3px solid var(--cream3)}
[data-theme="g"] .btn{background:var(--cream);color:var(--tx);
 box-shadow:0 0 0 3px var(--edge),0 3px 0 3px rgba(60,70,45,.22);transition:.08s steps(2)}
[data-theme="g"] a.card:hover .btn{background:var(--zhu);color:#fff9f2}
[data-theme="g"] .stamp{font-family:var(--px);font-size:.42rem;color:var(--tx3)}
[data-theme="g"] .tag{color:#fff9f2;background:var(--gold);box-shadow:0 0 0 2px var(--edge)}
[data-theme="g"] footer{background:var(--cream2);padding:18px 22px;color:var(--tx2);margin-top:40px;
 box-shadow:0 0 0 3px var(--edge),0 5px 0 3px rgba(60,70,45,.22)}
[data-theme="g"] .tsw-btn{background:var(--cream);color:var(--tx);
 box-shadow:0 0 0 3px var(--edge),0 3px 0 3px rgba(60,70,45,.22)}
[data-theme="g"] .tsw-btn svg{stroke:var(--zhu)}
[data-theme="g"] .tsw-menu{background:var(--cream2);
 box-shadow:0 0 0 3px var(--edge),0 6px 0 3px rgba(60,70,45,.24)}
[data-theme="g"] .tsw-item{color:var(--tx)}
[data-theme="g"] .tsw-item:hover{background:var(--cream)}
[data-theme="g"] .tsw-item .ck{color:var(--zhu)}