/* ==========================================================================
   卡片里的界面示意（原版是产品截图叠在油画色块底上；这里用 HTML/SVG 画界面）
   尺寸全部跟随卡片宽度（容器查询单位 cqi），缩放时比例不变
   ========================================================================== */
.frame-bg{container-type:inline-size}
.ui-center{position:absolute;inset:0;display:grid;place-items:center;padding:7cqi}
.ui{font-family:var(--f-sans);color:#1c1c14}
.win{width:100%;background:#fffffb;border-radius:clamp(6px,1.6cqi,14px);box-shadow:0 2.4cqi 6cqi rgba(28,20,8,.34),0 0 0 1px rgba(0,0,0,.04);overflow:hidden;font-size:clamp(8px,1.9cqi,14px);line-height:1.35}
.win.narrow{width:78%}
.bar{height:2.4em;display:flex;align-items:center;gap:.5em;padding:0 1em;border-bottom:1px solid #ecece4;color:#77776b;font-weight:600}
.bar i{width:.62em;height:.62em;border-radius:50%;background:#dcdcd2}
.bar b{margin-left:.4em;color:#3a3a30}
.bar .r{margin-left:auto;font-weight:500}
.wb{padding:1.2em}
.k{color:#8a8a7e;font-weight:500;font-size:.86em}
.v{font-weight:800;font-size:1.5em;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.row{display:flex;justify-content:space-between;align-items:center;gap:1em}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;margin-top:1em;padding-top:1em;border-top:1px solid #efefe6}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.pill{display:inline-flex;align-items:center;gap:.4em;padding:.35em .8em;border-radius:99em;background:#f1f1e8;font-weight:600;font-size:.9em;white-space:nowrap}
.pill.dark{background:#292919;color:#f7f7ee}
.pill.ok::before,.pill.warn::before,.pill.off::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#2e9a5c}
.pill.warn::before{background:#d08a1c}.pill.off::before{background:#b9b9ad}
.btnui{display:inline-flex;align-items:center;justify-content:center;padding:.5em 1em;border-radius:99em;background:#292919;color:#f7f7ee;font-weight:700;font-size:.9em}
.btnui.l{background:#ececE2;color:#292919}
.muted{color:#8a8a7e}
.gold{color:#9a7120}
.sv{width:100%;height:auto;display:block}
/* 手机 */
.phone{width:60%;aspect-ratio:9/19;border-radius:clamp(14px,6cqi,34px);background:#141410;padding:clamp(3px,1.2cqi,8px);box-shadow:0 3cqi 8cqi rgba(28,20,8,.4);font-size:clamp(7px,3.6cqi,13px);line-height:1.35}
.cc.w2 .phone{width:31%;font-size:clamp(7px,1.95cqi,11px)}
@media (max-width:768px){.cc.w2 .frame-bg{aspect-ratio:1/1!important}.cc.w2 .phone{width:40%;font-size:clamp(7px,2.6cqi,11px)}}

.phone.big{width:82%;font-size:clamp(7px,5.2cqi,13px)}
.cc.q .phone.big{width:auto;height:100%;max-width:82%}
.scr{height:100%;border-radius:clamp(11px,5cqi,28px);background:#f6f6ef;overflow:hidden;padding:2.6em .9em 1em;display:flex;flex-direction:column;gap:.7em;position:relative}
.scr::before{content:"";position:absolute;top:.7em;left:50%;width:30%;height:1.1em;border-radius:99em;background:#141410;transform:translateX(-50%)}
.scr .h{font-weight:800;font-size:1.25em;letter-spacing:-.01em}
.notif{background:#fff;border-radius:1em;padding:.9em;box-shadow:0 .4em 1.2em rgba(0,0,0,.08)}
.notif .t{display:flex;align-items:center;gap:.5em;font-weight:700;font-size:.92em}
.notif .t i{width:1.5em;height:1.5em;border-radius:.4em;background:#292919;display:grid;place-items:center}
.notif p{margin-top:.4em}
.li{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.7em .1em;border-bottom:1px solid #e8e8de}
.li:last-child{border:0}
.chk{display:flex;align-items:center;gap:.7em;padding:.55em 0;border-bottom:1px solid #efefe6}
.chk:last-child{border:0}
.chk i{width:1.2em;height:1.2em;border-radius:.3em;border:1.5px solid #c6c6ba;flex:none;display:grid;place-items:center}
.chk.done i{background:#292919;border-color:#292919}
.chk.done i::after{content:"";width:.5em;height:.28em;border:2px solid #f7f7ee;border-top:0;border-right:0;transform:rotate(-45deg) translate(.05em,-.05em)}
.chk.now{font-weight:700}
.chk.now i{border-color:#9a7120;box-shadow:0 0 0 .25em rgba(154,113,32,.18)}
/* 深色玻璃（放在油画上） */
.glass{background:rgba(24,22,14,.58);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);border:1px solid rgba(247,247,238,.16);color:#f7f7ee;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.35);font-size:clamp(12px,1.05vw,15px);line-height:1.5;overflow:hidden}
.glass .bar{border-color:rgba(247,247,238,.12);color:#c9c9bb}
.glass .bar i{background:rgba(247,247,238,.25)}
.glass .bar b{color:#f7f7ee}
.chat{padding:1.3em;display:flex;flex-direction:column;gap:1em}
.chat .q{align-self:flex-end;max-width:78%;background:rgba(247,247,238,.14);padding:.7em 1em;border-radius:1em 1em .3em 1em}
.chat .a{display:flex;gap:.8em;max-width:94%}
.chat .av{width:1.9em;height:1.9em;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#fff3cf,#c99a3e 55%,#6b4a14);box-shadow:0 0 1.2em rgba(214,168,76,.5)}
.chat .a b{color:#fff}
.chat .hl{color:#f1cf87;font-weight:700}
.chat .acts{display:flex;gap:.5em;flex-wrap:wrap;margin-top:.8em}
.chat .acts span{padding:.45em .9em;border-radius:99em;background:rgba(247,247,238,.12);font-weight:700;font-size:.9em}
.chat .acts span:first-child{background:#f7f7ee;color:#292919}
.chat .mini{margin-top:.8em;border-radius:.8em;background:rgba(247,247,238,.06);padding:.7em .9em .4em}
.chat .ask{margin:0 1.3em 1.3em;display:flex;align-items:center;gap:.6em;padding:.7em .7em .7em 1em;border-radius:.9em;background:rgba(247,247,238,.07);border:1px solid rgba(247,247,238,.1);color:#bdbdae}
.chat .ask i{margin-left:auto;width:1.8em;height:1.8em;border-radius:50%;background:#f7f7ee}
/* 代码窗口 */
.code{background:#1b1a12;color:#e6e4d6;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(28,20,8,.35);font-size:13px}
.code .bar{border-color:#ffffff14;color:#9d9b8a}
.code .bar i{background:#3a392c}
.code .bar b{color:#cfccb8;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-weight:500}
.code pre{margin:0;padding:18px 20px 22px;overflow-x:auto;font:400 13px/1.75 "SF Mono",ui-monospace,Menlo,Consolas,monospace}
.code .kw{color:#e0b36a}.code .s{color:#a9cf8e}.code .f{color:#9ec3e6}.code .c{color:#77756a}.code .n{color:#e8906f}
/* 海报 */
.poster svg{position:absolute;inset:0;width:100%;height:100%}
.poster .pt{position:absolute;left:4.5%;bottom:7%;color:#f7f7ee}
.poster .pt small{display:block;font:500 clamp(9px,1.2cqi,13px)/1.2 var(--f-serif);opacity:.85;letter-spacing:.02em}
.poster .pt b{display:block;font:700 clamp(14px,3.4cqi,34px)/1.05 var(--f-sans);letter-spacing:-.02em;margin-top:.2em}
.vcard{container-type:inline-size}
.vcard-s .vcard{aspect-ratio:16/9}
/* 案例卡里的大数字 */
.metric{width:74%;background:#fffffb;border-radius:clamp(6px,1.8cqi,14px);padding:7cqi 7cqi 6cqi;box-shadow:0 2.4cqi 6cqi rgba(28,20,8,.3);font-size:clamp(9px,3.4cqi,15px)}
.metric .big{font:800 clamp(28px,15cqi,72px)/.9 var(--f-sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.metric .big small{font-size:.36em;letter-spacing:0;margin-left:.12em;font-weight:700}
.metric .lab{margin-top:.6em;font-weight:700}
.metric .sub{margin-top:.25em;color:#8a8a7e;font-size:.86em}
/* 开发者卡 */
.devc{padding-top:22px;border-top:1px solid #29291926}
.dev-ic{width:44px;height:44px;border-radius:6px;background:var(--dark);color:var(--light);display:grid;place-items:center;margin-bottom:6px}
.dev-ic svg{width:22px;height:22px}
.win .doc::before{content:"";display:inline-block;width:.72em;height:.92em;margin-right:.45em;vertical-align:-.1em;border:1.5px solid #9a9a8e;border-radius:2px;background:linear-gradient(#9a9a8e,#9a9a8e) 50% 35%/60% 1px no-repeat,linear-gradient(#9a9a8e,#9a9a8e) 50% 62%/60% 1px no-repeat}
.win .q-line{padding:.6em .8em;border-radius:.6em;background:#f4f4ec}