/* qq1226 · 第十一套：柔和现代（靛紫渐变 + 蜜桃 + 雾白）
   前七套全是硬朗扁平（实色块/直角/硬边）。此处用渐变、大圆角、柔光阴影、玻璃质感。 */
:root{
  --ink:#241f3d; --ink-2:#332c52; --ink-3:#4a4270;
  --iris:#6c5ce7; --iris-2:#8b7ff0; --iris-3:#a29bfe; --iris-pale:#efecff;
  --peach:#ff9f8e; --peach-2:#ffc4b8; --peach-pale:#fff2ef;
  --pw:#fbfaff; --pw-2:#f4f2fc; --pw-3:#eae7f7;
  --ln:#e6e2f5; --ln-d:#3d3663;
  --tx:#1e1a33; --tx-2:#5f5880; --tx-3:#928bab; --tx-inv:#f2f0fb;
  --maxw:1160px; --r:20px; --rs:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--pw);color:var(--tx);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  font-size:15.5px;line-height:1.95;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 18px}}

/* 顶栏：玻璃 */
.topbar{background:rgba(251,250,255,.82);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(230,226,245,.8);position:sticky;top:0;z-index:60}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:800;color:var(--ink);letter-spacing:.2px}
.brand i{font-style:normal;width:34px;height:34px;border-radius:11px;
  background:linear-gradient(140deg,var(--iris) 0%,var(--iris-3) 100%);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:0 5px 14px rgba(108,92,231,.34)}
.topnav{display:flex;gap:5px;list-style:none;margin:0;padding:0}
.topnav a{color:var(--tx-2);font-size:14.4px;padding:8px 16px;border-radius:999px;transition:.2s}
.topnav a:hover{background:var(--iris-pale);color:var(--iris)}
.topnav a.on{background:var(--ink);color:#fff}
@media(max-width:900px){.topnav{display:none}}

/* 首屏：渐变光晕 */
.hero{padding:76px 0 84px;position:relative;overflow:hidden;
  background:
   radial-gradient(620px 420px at 12% 8%,rgba(108,92,231,.14),transparent 62%),
   radial-gradient(520px 380px at 88% 78%,rgba(255,159,142,.16),transparent 62%),
   linear-gradient(175deg,#fbfaff 0%,#f4f2fc 100%)}
.hero .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center;position:relative;z-index:2}
@media(max-width:900px){.hero{padding:52px 0 56px}.hero .wrap{grid-template-columns:1fr;gap:36px}}
.pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--ln);
  border-radius:999px;padding:7px 17px;font-size:12.5px;color:var(--tx-2);margin-bottom:22px;
  box-shadow:0 3px 12px rgba(36,31,61,.05)}
.pill b{color:var(--iris);font-weight:700}
.hero h1{font-size:clamp(31px,4.5vw,48px);line-height:1.2;margin:0 0 20px;font-weight:800;letter-spacing:-1.1px}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--iris),var(--peach));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--tx-2);font-size:16px;line-height:2.02;margin:0 0 30px;max-width:31em}
.btns{display:flex;gap:13px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:999px;
  font-size:14.6px;font-weight:700;transition:.24s}
.btn-a{background:linear-gradient(130deg,var(--iris) 0%,var(--iris-2) 100%);color:#fff;
  box-shadow:0 8px 22px rgba(108,92,231,.32)}
.btn-a:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(108,92,231,.42)}
.btn-b{background:#fff;color:var(--ink);border:1px solid var(--ln);box-shadow:0 3px 12px rgba(36,31,61,.05)}
.btn-b:hover{border-color:var(--iris-3);color:var(--iris)}
.hero-fig{margin:0;position:relative}
.hero-fig::before{content:"";position:absolute;inset:-16px;border-radius:30px;
  background:linear-gradient(140deg,rgba(108,92,231,.2),rgba(255,159,142,.2));filter:blur(26px)}
.hero-fig img{width:100%;height:auto;display:block;border-radius:var(--r);position:relative;
  box-shadow:0 2px 6px rgba(36,31,61,.06),0 18px 44px rgba(36,31,61,.13)}

/* 数据胶囊 */
.caps{margin-top:-34px;position:relative;z-index:3}
.caps .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:760px){.caps .wrap{grid-template-columns:1fr 1fr}}
.cap{background:#fff;border-radius:var(--rs);padding:20px 18px;text-align:center;
  box-shadow:0 2px 6px rgba(36,31,61,.05),0 10px 26px rgba(36,31,61,.07)}
.cap b{display:block;font-size:25px;font-weight:800;line-height:1.15;
  background:linear-gradient(120deg,var(--iris),var(--peach));-webkit-background-clip:text;
  background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.cap span{font-size:12.6px;color:var(--tx-3)}

/* 分区 */
.sec{padding:72px 0}
.sec.tint{background:var(--pw-2)}
.sec.deep{background:linear-gradient(160deg,var(--ink) 0%,var(--ink-3) 100%);color:var(--tx-inv)}
.sec-head{margin-bottom:42px;max-width:38em}
.sec-head .em{display:inline-block;font-size:26px;line-height:1;margin-bottom:14px;
  filter:saturate(.85)}
.sec-head h2{font-size:clamp(23px,3vw,31px);margin:0 0 11px;font-weight:800;letter-spacing:-.6px;line-height:1.32}
.sec-head p{color:var(--tx-2);margin:0;font-size:15px}
.sec.deep .sec-head p{color:#b3aacf}

.soft{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.soft{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.soft{grid-template-columns:1fr}}
.sc{background:#fff;border-radius:var(--r);padding:28px 26px 30px;transition:.26s;
  box-shadow:0 2px 5px rgba(36,31,61,.04),0 8px 22px rgba(36,31,61,.05)}
.sc:hover{transform:translateY(-4px);box-shadow:0 4px 10px rgba(36,31,61,.06),0 18px 40px rgba(36,31,61,.1)}
.sc .ic{width:44px;height:44px;border-radius:13px;background:var(--iris-pale);color:var(--iris);
  display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:16px}
.sc:nth-child(3n+2) .ic{background:var(--peach-pale);color:var(--peach)}
.sc h3{margin:0 0 10px;font-size:16.6px;font-weight:800}
.sc p{margin:0;color:var(--tx-2);font-size:14.4px;line-height:1.94}
.sc b{color:var(--tx)}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.pair{grid-template-columns:1fr}}
.glass{background:rgba(255,255,255,.07);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:28px 30px 30px}
.glass h3{margin:0 0 12px;font-size:17.5px;font-weight:800;color:#fff}
.glass p{margin:0 0 12px;color:#bab2d6;font-size:14.6px;line-height:1.96}
.glass p:last-child{margin:0}
.glass b{color:var(--iris-3)}

.rank-list{list-style:none;margin:0;padding:0;background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 2px 5px rgba(36,31,61,.04),0 8px 22px rgba(36,31,61,.05)}
.rank-list li{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;
  padding:15px 24px;border-bottom:1px solid var(--pw-2)}
.rank-list li:last-child{border:0}
@media(max-width:560px){.rank-list li{grid-template-columns:36px 1fr;gap:12px}.rank-list li em{display:none}}
.rank-list .no{width:30px;height:30px;border-radius:10px;background:var(--iris-pale);color:var(--iris);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  font-variant-numeric:tabular-nums}
.rank-list li:nth-child(-n+3) .no{background:linear-gradient(135deg,var(--iris),var(--iris-3));color:#fff}
.rank-list b{font-size:15.4px;font-weight:700;display:block}
.rank-list small{color:var(--tx-3);font-size:13.2px;display:block;margin-top:2px}
.rank-list em{font-style:normal;font-size:12.6px;color:var(--tx-3);
  background:var(--pw-2);border-radius:999px;padding:4px 12px;white-space:nowrap}

details.qa{background:#fff;border-radius:var(--rs);margin-bottom:12px;overflow:hidden;
  box-shadow:0 2px 5px rgba(36,31,61,.04),0 6px 16px rgba(36,31,61,.04);transition:.22s}
details.qa[open]{box-shadow:0 4px 10px rgba(36,31,61,.06),0 14px 32px rgba(36,31,61,.09)}
details.qa summary{padding:18px 24px;cursor:pointer;font-weight:700;font-size:15.6px;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--iris);border-bottom:2px solid var(--iris);
  transform:rotate(45deg);transition:transform .26s;margin-right:4px}
details.qa[open] summary::after{transform:rotate(-135deg)}
details.qa .a{padding:0 24px 22px;color:var(--tx-2);font-size:14.6px;line-height:2.0}

.foot{background:var(--ink);color:#a79fc4;padding:52px 0 0;font-size:14.2px}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:34px}
@media(max-width:880px){.foot .cols{grid-template-columns:1fr 1fr}}
.foot h4{color:#fff;font-size:13px;margin:0 0 15px;font-weight:700;letter-spacing:1.2px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot a:hover{color:var(--iris-3)}
.foot .bot{border-top:1px solid var(--ln-d);padding:20px 0;text-align:center;font-size:13px;color:#7a719c}

/* 内页 */
.page-hd{background:radial-gradient(600px 300px at 20% 0%,rgba(108,92,231,.16),transparent 62%),
  linear-gradient(170deg,var(--pw) 0%,var(--pw-2) 100%);padding:48px 0 50px;border-bottom:1px solid var(--ln)}
.crumb{font-size:13px;color:var(--tx-3);margin-bottom:15px}
.crumb a:hover{color:var(--iris)}
.crumb i{font-style:normal;margin:0 8px;color:var(--ln)}
.page-hd .tag{display:inline-block;background:var(--iris-pale);color:var(--iris);border-radius:999px;
  padding:4px 14px;font-size:12.5px;margin-bottom:14px;font-weight:700}
.page-hd h1{font-size:clamp(23px,3.3vw,34px);line-height:1.4;margin:0;font-weight:800;letter-spacing:-.7px;max-width:22em}
.page-hd .meta{margin-top:15px;color:var(--tx-3);font-size:13.5px;display:flex;gap:20px;flex-wrap:wrap}
.shell{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:48px;max-width:var(--maxw);
  margin:0 auto;padding:46px 28px 70px;align-items:start}
@media(max-width:960px){.shell{grid-template-columns:1fr;gap:36px}}
.post{background:#fff;border-radius:var(--r);padding:36px 40px 40px;min-width:0;
  box-shadow:0 2px 6px rgba(36,31,61,.05),0 12px 32px rgba(36,31,61,.06)}
@media(max-width:640px){.post{padding:24px 20px 30px}}
.post .cover{margin:0 0 30px;border-radius:var(--rs);overflow:hidden}
.post .cover img{width:100%;height:auto;display:block}
.post-body{font-size:16.2px;line-height:2.05;color:#282341}
.post-body>*:first-child{margin-top:0}
.post-body p{margin:0 0 20px}
.post-body h2{font-size:20.5px;font-weight:800;margin:38px 0 15px;letter-spacing:-.3px;line-height:1.45;
  padding-left:15px;border-left:4px solid var(--iris);border-radius:2px}
.post-body h3{font-size:17.2px;font-weight:800;margin:28px 0 11px;color:var(--ink-3)}
.post-body ul,.post-body ol{margin:0 0 20px;padding-left:1.55em}
.post-body li{margin-bottom:8px}
.post-body img{max-width:100%;height:auto;border-radius:var(--rs);display:block;margin:26px auto}
.post-body figcaption{text-align:center;font-size:13px;color:var(--tx-3);margin-top:10px}
.post-body blockquote{margin:26px 0;padding:20px 24px;background:var(--iris-pale);border-radius:var(--rs);color:var(--tx-2)}
.post-body blockquote p:last-child{margin:0}
.post-body a{color:var(--iris);border-bottom:1px solid rgba(108,92,231,.32)}
.post-body table{width:100%;border-collapse:separate;border-spacing:0;margin:26px 0;font-size:14.8px;
  border-radius:var(--rs);overflow:hidden;box-shadow:0 0 0 1px var(--ln)}
.post-body th,.post-body td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--ln)}
.post-body th{background:var(--pw-2);font-weight:800;color:var(--ink)}
.side{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
@media(max-width:960px){.side{position:static}}
.box{background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 2px 5px rgba(36,31,61,.04),0 8px 22px rgba(36,31,61,.05)}
.box-h{padding:16px 20px 12px;font-size:12.5px;font-weight:800;letter-spacing:1.2px;color:var(--iris)}
.box-b{padding:0 20px 18px}
.side .list{list-style:none;margin:0;padding:0}
.side .list li{padding:11px 0;border-top:1px solid var(--pw-2);font-size:14px;line-height:1.68}
.side .list li:first-child{border:0}
.side .list a:hover{color:var(--iris)}
.side .cats{display:flex;flex-wrap:wrap;gap:8px}
.side .cats a{background:var(--pw-2);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--tx-2);transition:.2s}
.side .cats a:hover{background:var(--iris);color:#fff}
.side-cta{background:linear-gradient(150deg,var(--ink) 0%,var(--ink-3) 100%);color:var(--tx-inv);
  border-radius:var(--r);padding:26px}
.side-cta b{display:block;color:#fff;font-size:16px;margin-bottom:10px;font-weight:800}
.side-cta p{margin:0 0 18px;font-size:13.7px;color:#b3aacf;line-height:1.88}
.side-cta .btn{padding:10px 20px;font-size:13.5px;background:#fff;color:var(--ink);box-shadow:none}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
@media(max-width:640px){.post-nav{grid-template-columns:1fr}}
.post-nav a{background:#fff;border-radius:var(--rs);padding:18px 22px;transition:.24s;
  box-shadow:0 2px 5px rgba(36,31,61,.04),0 6px 16px rgba(36,31,61,.04)}
.post-nav a:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(36,31,61,.06),0 14px 30px rgba(36,31,61,.09)}
.post-nav small{color:var(--tx-3);font-size:12px;display:block;margin-bottom:7px}
.post-nav b{font-size:14.6px;font-weight:700;line-height:1.68;display:block}
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.arch-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.arch-grid{grid-template-columns:1fr}}
.arch-card{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.26s;
  box-shadow:0 2px 5px rgba(36,31,61,.04),0 8px 22px rgba(36,31,61,.05)}
.arch-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px rgba(36,31,61,.07),0 20px 44px rgba(36,31,61,.11)}
.arch-card .thumb{aspect-ratio:16/10;background:var(--pw-2);overflow:hidden}
.arch-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s}
.arch-card:hover .thumb img{transform:scale(1.05)}
.arch-card .in{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.arch-card .cat{font-size:11.6px;color:var(--iris);letter-spacing:.8px;margin-bottom:9px;font-weight:800}
.arch-card h3{font-size:15.8px;font-weight:800;line-height:1.62;margin:0 0 10px}
.arch-card p{font-size:13.8px;color:var(--tx-2);line-height:1.88;margin:0 0 14px;flex:1}
.arch-card time{font-size:12.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.pager{display:flex;justify-content:center;gap:8px;margin-top:38px;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:999px;font-size:14px;padding:0 14px;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 5px rgba(36,31,61,.04);transition:.2s}
.pager .current{background:linear-gradient(135deg,var(--iris),var(--iris-2));color:#fff}
.pager a:hover{color:var(--iris);transform:translateY(-2px)}
.empty{text-align:center;padding:76px 20px;color:var(--tx-2)}
.eyebrow{font-size:11.5px;letter-spacing:2px;color:var(--iris);text-transform:uppercase;font-weight:800}

/* ── 2026-08-13 中图 figglass：圆角玻璃卡，图上文下（本站独有版式） ── */
.figglass{padding:36px 0}
.figglass .glass{max-width:860px;margin:0 auto;background:rgba(255,255,255,.72);
  border:1px solid rgba(108,92,231,.16);border-radius:22px;overflow:hidden;
  box-shadow:0 18px 46px rgba(36,31,61,.09);backdrop-filter:blur(8px)}
.figglass img{width:100%;height:auto;display:block}
.figglass .bd{padding:22px 28px 24px;text-align:center}
.figglass .bd h4{margin:0 0 10px;font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.figglass .bd p{margin:0 0 15px;font-size:14.6px;line-height:2;color:var(--ink-3);text-align:left}
.figglass .bd b{color:var(--iris);font-weight:700}
.figglass .pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.figglass .pills span{background:var(--iris-pale);color:var(--iris);border-radius:999px;
  padding:5px 15px;font-size:12.6px;font-weight:700}
@media(max-width:820px){.figglass{padding:26px 0}.figglass .glass{border-radius:16px}
  .figglass .bd{padding:18px 18px 20px}}

.cta-top{display:inline-flex;align-items:center;gap:.38em;
 padding:.5em 1.15em;border:1.5px solid currentColor;border-radius:999px;
 font-size:.85rem;font-weight:700;line-height:1.15;white-space:nowrap;
 text-decoration:none;color:var(--iris);opacity:.92;transition:opacity .2s,transform .2s}
.cta-top:hover{opacity:1;transform:translateY(-1px)}
.cta-top .dot{width:.42em;height:.42em;border-radius:50%;background:currentColor;
 display:inline-block;flex:none}
@media(max-width:820px){.cta-top{padding:.44em .9em;font-size:.8rem}}
@media(max-width:560px){.cta-top{padding:.4em .78em;font-size:.75rem;gap:.3em}
 .cta-top .dot{width:.36em;height:.36em}}
@media(max-width:380px){.cta-top{padding:.36em .66em;font-size:.72rem}}