/* 充值与卡券买家页样式(/cards 全部页面共用)。 2026-11-09 从 cards/_style.blade.php 抽成静态文件:原来 520 行内联在每个页面里(每页 ~45KB、不缓存),现在走浏览器 / CDN 缓存, 模板里只剩一行 (版本号跟文件修改时间走)。规则顺序保持原样(后面的块覆盖前面的,是历次改版叠出来的),新规则加在最后。 规矩:不要「一根线包着的边框」,用浅底色块 / 留白 / 柔和阴影分层;选中 = 浅主色底 + 对勾;宽度 1320 不动。 */ /* ===== 充值与卡券(127e)买家页 ===== */ .cd{--cd-pri:var(--t-primary,#2563eb);--cd-pri-soft:var(--t-primary-soft,#eef4ff);--cd-ink:var(--t-text,#0f172a);--cd-mut:var(--t-text-3,#64748b);--cd-line:var(--t-line,#e5e7eb);--cd-card:var(--t-surface,#fff);--cd-ok:#059669;--cd-ok-soft:#ecfdf5;--cd-warn:#b45309;--cd-warn-soft:#fffbeb;color:var(--cd-ink);width:100%;max-width:1320px;margin:0 auto;padding:16px 24px 56px} html[data-theme="dark"] .cd{--cd-ok-soft:rgba(5,150,105,.14);--cd-warn-soft:rgba(180,83,9,.14);--cd-ok:var(--t-success-text);--cd-warn:var(--t-warning-text)}/* 2026-11-05 深色下绿 / 橙字换亮色档;上面 --cd-mut 原来引用不存在的 --t-muted,深色下一直是浅色模式的灰蓝 */ .cd a{color:inherit;text-decoration:none} .cd-crumb{font-size:12.5px;color:var(--cd-mut);margin-bottom:12px}.cd-crumb a{color:var(--cd-mut)}.cd-crumb span{margin:0 6px} .cd-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap} .cd-top h1{font-size:22px;margin:0;font-weight:800}.cd-sub{color:var(--cd-mut);margin-top:4px;font-size:13px} .cd-search{display:flex;align-items:center;gap:8px;border:1px solid var(--cd-line);background:var(--cd-card);border-radius:10px;padding:0 12px;height:40px;width:320px;color:var(--cd-mut)} .cd-search input{border:0;outline:0;flex:1;font-size:14px;background:transparent;color:var(--cd-ink)} .cd-sec{margin-top:26px}.cd-sec-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}.cd-sec-hd h2{font-size:16px;margin:0;font-weight:700}.cd-sec-hd span{color:var(--cd-mut);font-size:12.5px} .cd-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px} .cd-tile{background:var(--cd-card);border:1px solid var(--cd-line);border-radius:10px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;transition:border-color .15s,transform .15s} .cd-tile:hover{border-color:var(--cd-pri);transform:translateY(-1px)} .cd-tile img,.cd-tile .ph{width:40px;height:40px;border-radius:10px;object-fit:cover;border:1px solid var(--cd-line);background:#fff} .cd-tile .ph{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--cd-mut)} .cd-tile b{font-size:13.5px;font-weight:600;line-height:1.3}.cd-tile small{color:var(--cd-mut);font-size:12px} .cd-tile.is-hide{display:none} .cd-empty{padding:48px 16px;text-align:center;color:var(--cd-mut);background:var(--cd-card);border:1px solid var(--cd-line);border-radius:12px} .cd-row{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start} .cd-card{background:var(--cd-card);border:1px solid var(--cd-line);border-radius:12px;padding:18px} .cd-brand{display:flex;gap:12px;align-items:center;margin-bottom:6px}.cd-brand__s{color:var(--cd-mut);font-size:12.5px;margin-top:2px}.cd-brand img,.cd-brand .ph{width:44px;height:44px;border-radius:10px;border:1px solid var(--cd-line);background:#fff;flex:0 0 56px}.cd-brand .ph{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--cd-mut);font-size:20px} .cd-brand h1{font-size:18px;margin:0;font-weight:700}.cd-tags{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}.cd-tag{font-size:12px;color:var(--cd-ok);background:var(--cd-ok-soft);border-radius:6px;padding:2px 8px}.cd-tag.g{color:var(--cd-mut);background:var(--t-surface-2,#f6f7f9)} .cd-step{margin-top:14px}.cd-step .t{font-weight:600;font-size:13px;color:var(--cd-mut);margin-bottom:8px;display:flex;align-items:center;gap:8px}.cd-step--row{display:flex;align-items:center;gap:12px}.cd-step--row .t{margin:0}.cd-qty__n{color:var(--cd-mut);font-size:12.5px}.cd-step .t i{display:inline-flex;width:20px;height:20px;border-radius:6px;background:var(--cd-ink);color:var(--cd-card);font-size:12px;font-style:normal;align-items:center;justify-content:center}.cd-step .t small{color:var(--cd-mut);font-weight:400} .cd-regions{display:flex;flex-wrap:wrap;gap:8px}.cd-reg{border:1px solid var(--cd-line);border-radius:6px;padding:5px 10px;background:var(--cd-card);font-size:13px;cursor:pointer;user-select:none}.cd-reg.on{border-color:var(--cd-pri);background:var(--cd-pri-soft);color:var(--cd-pri);font-weight:600}.cd-reg small{color:var(--cd-mut);margin-left:4px;font-size:11.5px} .cd-denoms{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px} .cd-den{border:1px solid var(--cd-line);border-radius:8px;padding:8px 4px;background:var(--cd-card);text-align:center;cursor:pointer;user-select:none}.cd-den.on{border-color:var(--cd-pri);background:var(--cd-pri-soft);box-shadow:0 0 0 1px var(--cd-pri) inset} .cd-den b{display:block;font-size:14px;font-weight:600}.cd-den .p{color:var(--cd-mut);font-size:12.5px;margin-top:1px}.cd-den.on .p{color:var(--cd-pri);font-weight:600}.cd-den small{display:block;color:var(--cd-warn);font-size:11px;margin-top:1px}.cd-den.out{opacity:.45;cursor:not-allowed} .cd-qty{display:inline-flex;border:1px solid var(--cd-line);border-radius:8px;overflow:hidden;vertical-align:middle;background:var(--cd-card)}.cd-qty button{width:36px;height:36px;border:0;background:transparent;font-size:16px;color:var(--cd-ink);cursor:pointer}.cd-qty input{width:56px;border:0;border-left:1px solid var(--cd-line);border-right:1px solid var(--cd-line);text-align:center;font-size:14px;background:transparent;color:var(--cd-ink)} .cd-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cd-fields label{font-size:12.5px;color:var(--cd-mut);display:block}.cd-fields input,.cd-fields select{width:100%;height:40px;border:1px solid var(--cd-line);border-radius:8px;padding:0 10px;font-size:14px;margin-top:4px;background:var(--cd-card);color:var(--cd-ink)} .cd-check{margin-top:8px;font-size:12.5px;color:var(--cd-mut)}.cd-check.ok{color:var(--cd-ok)}.cd-check.bad{color:var(--t-danger-text,#dc2626)}.cd-check button{border:1px solid var(--cd-line);background:var(--cd-card);border-radius:6px;padding:3px 10px;font-size:12.5px;color:var(--cd-ink);margin-right:8px;cursor:pointer} /* 2026-11-09 下滑后头部会固定在顶上(约 108px),原来 top:16px 的购买栏正好钻到头部底下;和游戏账号详情页用同一个偏移量 */ .cd-sum{position:sticky;top:calc(var(--site-sticky-top, 104px) + 16px)}.cd-sum .l{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--cd-line);font-size:13.5px}.cd-sum .l span{color:var(--cd-mut);flex:0 0 auto}.cd-sum .l b{font-weight:500;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cd-sum .tot{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0 4px}.cd-sum .tot b{font-size:24px;color:var(--cd-pri)} .cd-gw{margin-top:10px}.cd-gw .lbl{font-size:12.5px;color:var(--cd-mut);margin-bottom:6px}.cd-gw-opt{display:flex;align-items:center;gap:8px;border:1px solid var(--cd-line);border-radius:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer;font-size:13px}.cd-gw-opt.on{border-color:var(--cd-pri);background:var(--cd-pri-soft)}.cd-gw-opt img{width:20px;height:20px;border-radius:4px}.cd-gw-opt small{margin-left:auto;color:var(--cd-mut);white-space:nowrap} .cd-buy{display:block;width:100%;border:0;background:var(--cd-pri);color:#fff;border-radius:10px;height:46px;font-size:15px;font-weight:700;margin-top:12px;cursor:pointer}.cd-buy[disabled]{opacity:.55;cursor:not-allowed} .cd-note{background:var(--cd-warn-soft);color:var(--cd-warn);border-radius:8px;padding:10px 12px;font-size:12.5px;margin-top:12px} .cd-tips{margin-top:16px}.cd-tips h3{font-size:13.5px;margin:0 0 6px}.cd-tips p{margin:0 0 6px;color:var(--cd-mut);font-size:13px} .cd-err{color:#dc2626;font-size:12.5px;margin-top:8px;min-height:18px} .cd-list{display:flex;flex-direction:column;gap:10px}.cd-o{background:var(--cd-card);border:1px solid var(--cd-line);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center}.cd-o .n{font-weight:600}.cd-o .m{font-size:12.5px;color:var(--cd-mut)}.cd-o .s{font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:6px;background:var(--t-surface-2,#f6f7f9);color:var(--cd-mut);white-space:nowrap}.cd-o .s.ok{background:var(--cd-ok-soft);color:var(--cd-ok)}.cd-o .s.bad{background:#fef2f2;color:#dc2626}.cd-o .s.wait{background:var(--cd-warn-soft);color:var(--cd-warn)}.cd-o .p{font-weight:700;text-align:right} .cd-codes{margin-top:12px}.cd-code{display:flex;align-items:center;gap:10px;border:1px solid var(--cd-line);border-radius:8px;padding:10px 12px;margin-bottom:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:var(--t-surface-2,#f6f7f9);word-break:break-all}.cd-code button{margin-left:auto;border:1px solid var(--cd-line);background:var(--cd-card);border-radius:6px;padding:4px 10px;font-size:12.5px;color:var(--cd-ink);cursor:pointer;white-space:nowrap} .cd-wait{display:flex;align-items:center;gap:10px;padding:14px;border:1px dashed var(--cd-line);border-radius:10px;color:var(--cd-mut);font-size:13.5px}.cd-wait i{width:10px;height:10px;border-radius:50%;background:var(--cd-pri);animation:cdpulse 1.2s infinite} @keyframes cdpulse{0%,100%{opacity:.3}50%{opacity:1}} @media (max-width:900px){.cd-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.cd-row{grid-template-columns:1fr}.cd-denoms{grid-template-columns:repeat(3,minmax(0,1fr))}.cd-search{width:100%}.cd-sum{position:static}.cd-fields{grid-template-columns:1fr}.cd-o{grid-template-columns:1fr}.cd-o .p{text-align:left}} @media (max-width:480px){.cd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .cd-hint{margin:12px 0 0;font-size:12.5px;color:var(--cd-mut)}.cd-sum__f{color:var(--cd-mut);font-size:12px;margin-top:8px;text-align:center}.cd-card{padding:16px}@media (max-width:900px){.cd{padding:10px 10px 48px}.cd-card{padding:12px}.cd-denoms{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cd-den{padding:9px 4px}.cd-den b{font-size:14px}.cd-den .p{font-size:12.5px}.cd-regions{gap:6px}.cd-row{gap:12px}}/* 品牌页重做:卡片预览 + 紧凑面值 + 手机底栏 */ .cd-preview{margin:4px 0 6px;border-radius:14px;background:#0f172a;color:#fff;padding:16px 18px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden} .cd-preview:after{content:'';position:absolute;right:-40px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)} .cd-preview__top{display:flex;align-items:center;gap:8px;font-size:13px}.cd-preview__top img{width:24px;height:24px;border-radius:6px;background:#fff}.cd-preview__brand{font-weight:600}.cd-preview__kind{margin-left:auto;font-size:12px;opacity:.7} .cd-preview__val{font-size:30px;font-weight:800;letter-spacing:.3px;margin:8px 0 4px} .cd-preview__bot{display:flex;justify-content:space-between;font-size:13px;opacity:.85} .cd-step .t small{color:var(--cd-mut);font-weight:400;margin-left:auto} .cd-denoms{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px} .cd-den{border:1px solid var(--cd-line);border-radius:8px;padding:9px 4px;background:var(--cd-card);text-align:center;cursor:pointer;user-select:none;line-height:1.2} .cd-den b{display:block;font-size:13.5px;font-weight:600}.cd-den small{display:block;color:var(--cd-warn);font-size:10.5px} .cd-den.on{border-color:var(--cd-pri);background:var(--cd-pri);color:#fff;box-shadow:none}.cd-den.on small{color:#fff} /* 第四版:分步流程 + 支付弹层 + 手机底栏替代底部导航 */ .cd-den b{white-space:nowrap;font-size:13px} .cd--brand .cd-step .t{font-size:14px;color:var(--cd-ink);font-weight:600}.cd--brand .cd-step .t i{background:var(--cd-pri);color:#fff;border-radius:50%;width:20px;height:20px;font-size:11.5px} .cd--brand .cd-step .t small{color:var(--cd-mut);font-weight:400;font-size:12.5px;margin-left:auto} .cd--brand .cd-step{margin-top:18px}.cd--brand .cd-step[hidden]{display:none} .cd-preview__val.is-empty{font-size:16px;font-weight:500;opacity:.6} .cd-sum__f{display:flex;justify-content:space-between;color:var(--cd-mut);font-size:12px;margin-top:10px}.cd-sum__f a{color:var(--cd-pri)} .cd-bar{display:none}.cd-den--x{display:none}.cd-den--more{grid-column:1/-1;color:var(--cd-pri);background:transparent;border-style:dashed;padding:7px 4px;font:inherit;font-size:12.5px} /* 支付弹层:底部抽屉(手机)/居中窄窗(电脑) */ .cdp-mask{position:fixed;inset:0;z-index:11000;background:rgba(15,23,42,.45);opacity:0;visibility:hidden;transition:opacity .22s,visibility 0s .22s}.cdp-mask.on{opacity:1;visibility:visible;transition:opacity .22s} .cdp{position:fixed;left:50%;bottom:0;z-index:11010;width:100%;max-width:520px;max-height:calc(100% - 1rem);background:var(--cd-card);color:var(--cd-ink);border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.14);display:flex;flex-direction:column;transform:translate(-50%,100%);opacity:0;visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s,visibility 0s .2s} .cdp.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s,visibility 0s} .cdp__hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px}.cdp__hd b{font-size:16px}.cdp__x{border:0;background:var(--t-surface-2,#f1f3f6);color:var(--cd-mut);width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer} .cdp__bd{padding:4px 18px 12px;overflow:auto;min-height:0} .cdp__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--t-surface-2,#f6f7f9)}.cdp__item img,.cdp__item .ph{width:44px;height:44px;border-radius:10px;background:#fff;border:1px solid var(--cd-line);flex:0 0 44px}.cdp__item .ph{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--cd-mut)} .cdp__item-t{flex:1;min-width:0}.cdp__item-t b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdp__item-t small{color:var(--cd-mut);font-size:12.5px}.cdp__item-p{font-weight:700;white-space:nowrap} .cdp__lbl{font-size:13px;color:var(--cd-mut);margin:14px 0 8px} .cdp-gw{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1.5px solid var(--cd-line);border-radius:12px;background:var(--cd-card);color:var(--cd-ink);padding:10px 12px;cursor:pointer;font:inherit} .cdp-gw.on{border-color:var(--cd-pri);background:var(--cd-pri-soft)}.cdp-gw--bal{margin-bottom:8px;min-height:56px}.cdp-gw.is-short{cursor:default;opacity:.8} .cdp-gw__ico{width:28px;height:28px;border-radius:8px;background:var(--cd-pri-soft);color:var(--cd-pri);display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 28px}.cdp-gw img{width:28px;height:28px;border-radius:8px;flex:0 0 28px} .cdp-gw__m{display:flex;flex-direction:column;min-width:0;flex:1}.cdp-gw__n{font-weight:700;font-size:14px}.cdp-gw__s{font-size:12px;color:var(--cd-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cdp-gw__r{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;color:#dc2626;white-space:nowrap}.cdp-gw__r a{color:var(--cd-pri);font-weight:600} .cdp__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cdp-gw--tile{padding:9px 10px;min-height:54px} .cdp__tip{font-size:12px;color:var(--cd-mut);margin-top:12px} .cdp__ft{display:flex;align-items:center;gap:14px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--cd-line)} .cdp__tot{flex:1;min-width:0;display:flex;flex-direction:column}.cdp__tot span{font-size:12px;color:var(--cd-mut)}.cdp__tot b{font-size:22px;color:var(--cd-pri);line-height:1.1}.cdp__tot small{font-size:11.5px;color:var(--cd-mut)} .cdp__ok{border:0;background:var(--cd-pri);color:#fff;border-radius:12px;height:46px;padding:0 26px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}.cdp__ok[disabled]{opacity:.6} body.cdp-open{overflow:hidden} .cd-buy[disabled]{background:var(--t-surface-2,#eef0f3);color:var(--cd-mut);opacity:1;cursor:not-allowed} @media (min-width:901px){.cdp{bottom:auto;top:50%;transform:translate(-50%,-45%);border-radius:16px;max-height:calc(100vh - 48px)}.cdp.on{transform:translate(-50%,-50%)}} @media (max-width:900px){ .cd{padding:8px 12px 24px}.cd-card{padding:12px}.cd-row{gap:10px}.cd--brand .cd-step{margin-top:14px} .cd-preview{min-height:116px;padding:14px}.cd-preview__val{font-size:26px} .cd-denoms{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.cd-den{padding:8px 2px}.cd-den b{font-size:13px} .cd-sum{display:none} /* 和商品详情页一样:本页隐藏站点底部导航,购买栏独占底部 */ #vue-mobile-nav .mobile-bottom-nav,.mobile-bottom-nav{display:none !important} /* 和商品详情页一样:手机上有底部购买栏时不显示右下角浮动按钮 */ .cd--brand ~ .fab-dock-wrapper,body:has(.cd--brand) .fab-dock-wrapper{display:none !important} body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important} .cd-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1001;background:var(--cd-card);border-top:1px solid var(--cd-line);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));gap:12px;align-items:center;box-shadow:0 -4px 16px rgba(0,0,0,.06)} .cd-bar__l{flex:1;min-width:0;display:flex;flex-direction:column}.cd-bar__t{font-size:12px;color:var(--cd-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cd-bar__p{font-size:18px;color:var(--cd-pri);line-height:1.2}.cd-bar__p:empty{display:none} .cd-bar__btn{border:0;background:var(--cd-pri);color:#fff;border-radius:10px;height:42px;padding:0 22px;font-size:14px;font-weight:700;white-space:nowrap}.cd-bar__btn[disabled]{background:var(--t-surface-2,#eef0f3);color:var(--cd-mut)} html.pwa-app .cd-bar{left:var(--pwa-side,0)} .cdp__tiles{grid-template-columns:repeat(2,minmax(0,1fr))} } /* 第五版:去掉一圈线的边框,改用底色/留白/阴影分层;品牌图放大成方形主视觉 */ .cd{--cd-tint:var(--t-surface-2,#f4f5f7);--cd-tint-2:var(--t-surface-3,#e9ebef)} .cd-top{margin-bottom:22px}.cd-top h1{font-size:24px} .cd-search{border:0;background:var(--cd-tint);height:42px;border-radius:12px} .cd-sec{margin-top:30px}.cd-sec-hd{align-items:baseline}.cd-sec-hd h2{font-size:17px}.cd-sec-hd span{font-size:12.5px;color:var(--cd-mut)} .cd-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 18px} .cd-tile{border:0;background:transparent;padding:0;gap:0;align-items:stretch;text-align:left;border-radius:0;transition:none} .cd-tile:hover{border:0;transform:none} .cd-tile__art{display:block;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--cd-tint);position:relative;transition:transform .18s,box-shadow .18s}.cd-tile__art:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(15,23,42,.07);pointer-events:none} .cd-tile:hover .cd-tile__art{transform:translateY(-3px);box-shadow:0 12px 26px -12px rgba(15,23,42,.35)} .cd-tile__art img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;background:#fff} .cd-tile__art .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:0;border-radius:0;background:var(--cd-ink);color:#fff;font-size:44px;font-weight:800;letter-spacing:-1px} .cd-tile b{margin-top:10px;font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cd-tile small{margin-top:2px;font-size:12.5px;color:var(--cd-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cd-empty{border:0;background:var(--cd-tint)} /* 品牌页 */ .cd--brand .cd-card{border:0;padding:0;background:transparent;border-radius:0} .cd--brand .cd-sum{background:var(--cd-tint);border-radius:18px;padding:20px} .cd--brand .cd-sum .l{border-bottom:0;padding:5px 0}.cd--brand .cd-sum .tot{border-top:1px solid rgba(15,23,42,.06);margin-top:6px;padding-top:12px} .cd-brand{margin-bottom:12px}.cd-brand img,.cd-brand .ph{width:56px;height:56px;border:0;border-radius:16px;flex:0 0 56px;box-shadow:0 2px 10px -4px rgba(15,23,42,.35);object-fit:cover}.cd-brand h1{font-size:20px} .cd-preview{border-radius:18px;padding:18px 20px;min-height:140px} .cd-reg{border:0;background:var(--cd-tint);border-radius:9px;padding:7px 14px;font-size:13.5px}.cd-reg.on{background:var(--cd-pri);color:#fff;font-weight:600} .cd-den{border:0;background:var(--cd-tint);border-radius:10px;padding:11px 4px}.cd-den.on{background:var(--cd-pri);color:#fff}.cd-den.out{opacity:.4} .cd-den--more{border:0;background:transparent;color:var(--cd-pri)} .cd-qty{border:0;background:var(--cd-tint);border-radius:10px}.cd-qty input{border:0;background:transparent;font-weight:600}.cd-qty button{width:38px;height:38px} .cd-fields input,.cd-fields select{border:0;background:var(--cd-tint);border-radius:10px;height:42px}.cd-fields input:focus,.cd-fields select:focus{outline:2px solid var(--cd-pri);outline-offset:0} .cd-check button{border:0;background:var(--cd-tint);border-radius:8px;padding:5px 12px} .cd-hint{color:var(--cd-mut)} /* 支付弹层 */ .cdp__item{background:var(--cd-tint)}.cdp__item img,.cdp__item .ph{border:0;border-radius:12px;object-fit:cover} .cdp-gw{border:0;background:var(--cd-tint);box-shadow:none}.cdp-gw.on{background:var(--cd-pri-soft);box-shadow:inset 0 0 0 2px var(--cd-pri)} .cdp__x{background:var(--cd-tint)}.cdp__ft{border-top:0;padding-top:4px} /* 记录/订单页 */ .cd-o{border:0;background:var(--cd-tint)}.cd-code{border:0;background:var(--cd-tint)}.cd-code button{border:0;background:#fff}.cd-wait{border:0;background:var(--cd-tint)} @media (max-width:900px){ .cd-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}.cd-tile__art{border-radius:16px}.cd-tile b{font-size:13px;margin-top:8px} .cd-top{margin-bottom:12px}.cd-top h1{font-size:21px}.cd-sec{margin-top:22px} .cd-brand img,.cd-brand .ph{width:48px;height:48px;flex-basis:48px;border-radius:14px}.cd-brand h1{font-size:18px} .cd-preview{border-radius:16px} .cd-bar{border-top:0;box-shadow:0 -8px 24px -12px rgba(15,23,42,.25)} } @media (max-width:480px){.cd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* 深色模式:卡面反转成浅色卡(深底上更像一张实体卡),白底品牌图压暗,线框一律去掉,按钮底色跟随主题 */ html[data-theme="dark"] .cd-preview{background:#eef2f7;color:#0f172a} html[data-theme="dark"] .cd-preview:after{background:rgba(15,23,42,.06)} html[data-theme="dark"] .cd-preview__top img{box-shadow:0 1px 4px rgba(15,23,42,.18)} html[data-theme="dark"] .cd-preview__kind,html[data-theme="dark"] .cd-preview__bot{opacity:.7} html[data-theme="dark"] .cd-preview__val.is-empty{opacity:.5} html[data-theme="dark"] .cd-brand img,html[data-theme="dark"] .cd-brand .ph{box-shadow:0 2px 10px -2px rgba(0,0,0,.6)} html[data-theme="dark"] .cd-tile__art img{filter:brightness(.86)} html[data-theme="dark"] .cd-tile:hover .cd-tile__art img{filter:brightness(1)} html[data-theme="dark"] .cd-tile__art:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} html[data-theme="dark"] .cd-tile:hover .cd-tile__art{box-shadow:0 12px 26px -12px rgba(0,0,0,.8)} html[data-theme="dark"] .cd-tile__art .ph{background:var(--cd-tint-2)} html[data-theme="dark"] .cd--brand .cd-sum .tot{border-top-color:rgba(255,255,255,.08)} html[data-theme="dark"] .cd-den.on,html[data-theme="dark"] .cd-reg.on{background:var(--cd-pri);color:#fff} html[data-theme="dark"] .cd-code button,html[data-theme="dark"] .cd-check button{background:var(--cd-tint-2)} html[data-theme="dark"] .cdp{box-shadow:0 -8px 32px rgba(0,0,0,.5)} html[data-theme="dark"] .cdp__item img,html[data-theme="dark"] .cd-brand img{background:#fff} html[data-theme="dark"] .cd-bar{box-shadow:0 -8px 24px -10px rgba(0,0,0,.7)} html[data-theme="dark"] .cd-buy[disabled],html[data-theme="dark"] .cd-bar__btn[disabled]{background:var(--cd-tint-2);color:var(--cd-mut)} /* 品牌页(多地区):地区图片卡 */ .cd--regions .cd-brand--lg{margin-bottom:6px}.cd--regions .cd-brand--lg h1{font-size:22px} .cd--regions .cd-step{margin-top:14px}.cd--regions .cd-step .t{font-size:14px;color:var(--cd-ink);font-weight:600}.cd--regions .cd-step .t small{margin-left:auto;color:var(--cd-mut);font-weight:400;font-size:12.5px} .cd-grid--regions{margin-top:10px} @media (max-width:900px){.cd--regions .cd-brand--lg h1{font-size:19px}} /* 卡面:页头并进卡面(logo 用品牌原图);面值格子文字可换行不截断 */ .cd-preview{min-height:0;padding:18px 20px 16px} .cd-preview__hd{display:flex;align-items:flex-start;gap:12px} .cd-preview__hd img,.cd-preview__hd .ph{width:44px;height:44px;border-radius:12px;background:#fff;flex:0 0 44px;object-fit:cover;display:flex;align-items:center;justify-content:center;font-weight:800;color:#0f172a} .cd-preview__ttl{flex:1;min-width:0}.cd-preview__ttl h1{font-size:18px;margin:0;font-weight:700;line-height:1.3;color:inherit}.cd-preview__s{font-size:12.5px;opacity:.7;margin-top:3px} .cd-preview__kind{font-size:12px;opacity:.7;white-space:nowrap;padding-top:2px} .cd-preview__val{margin:22px 0 2px;font-size:32px} .cd-den{padding:9px 6px}.cd-den b{white-space:normal;font-size:13px;line-height:1.25;word-break:break-word} @media (max-width:900px){.cd-preview{padding:14px 14px 12px}.cd-preview__ttl h1{font-size:16px}.cd-preview__val{margin-top:16px;font-size:26px}.cd-den b{font-size:12.5px}} /* 卡面:中部面值+售价两栏,底部事实条(地区/面值范围/起价),不再空一大块 */ .cd-preview{padding:18px 20px 14px} .cd-preview__mid{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:20px 0 14px} .cd-preview__lbl{font-size:11.5px;opacity:.6;letter-spacing:.3px;margin-bottom:2px} .cd-preview__val{margin:0;font-size:34px;line-height:1.1}.cd-preview__val.is-empty{font-size:17px;font-weight:500;opacity:.6;line-height:1.5} .cd-preview__pr{text-align:right;flex:0 0 auto}.cd-preview__price{font-size:22px;font-weight:700;line-height:1.1} .cd-preview__facts{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)} .cd-fact{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:9px;padding:6px 10px;font-size:12.5px;line-height:1.2} .cd-fact img{width:22px;height:16px;border-radius:3px;object-fit:cover}.cd-fact b{font-weight:600}.cd-fact small{opacity:.65;font-size:11.5px} html[data-theme="dark"] .cd-preview__facts{border-top-color:rgba(15,23,42,.1)}html[data-theme="dark"] .cd-fact{background:rgba(15,23,42,.06)} @media (max-width:900px){.cd-preview{padding:14px 14px 12px}.cd-preview__mid{margin:14px 0 10px}.cd-preview__val{font-size:28px}.cd-preview__price{font-size:19px}.cd-fact{padding:5px 9px;font-size:12px}} /* 发货页:卡面 + 进度条 + 卡密区 + 右侧小结 */ .cd--order .od-hero{margin-bottom:14px} .od-pill{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:9px;white-space:nowrap;background:rgba(255,255,255,.12)} .od-pill--ok{background:rgba(16,185,129,.25)}.od-pill--bad{background:rgba(239,68,68,.25)}.od-pill--wait{background:rgba(245,158,11,.28)} html[data-theme="dark"] .od-pill{background:rgba(15,23,42,.08)}html[data-theme="dark"] .od-pill--ok{background:rgba(5,150,105,.18);color:#047857}html[data-theme="dark"] .od-pill--bad{background:rgba(220,38,38,.14);color:#b91c1c}html[data-theme="dark"] .od-pill--wait{background:rgba(217,119,6,.16);color:#b45309} .od-copy{border:0;background:transparent;color:inherit;opacity:.7;cursor:pointer;padding:0 0 0 2px;font-size:15px;line-height:1} .od-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 18px;padding:14px 8px 10px;border-radius:14px;background:var(--cd-tint)} .od-step{position:relative;text-align:center;padding:0 4px} .od-step i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;margin:0 auto 6px;background:var(--cd-card);color:var(--cd-mut);font-style:normal;font-size:12px;font-weight:700;position:relative;z-index:1;box-shadow:inset 0 0 0 2px var(--cd-tint-2)} .od-step:before{content:'';position:absolute;left:-50%;right:50%;top:11px;height:2px;background:var(--cd-tint-2)}.od-step:first-child:before{display:none} .od-step.done i{background:var(--cd-pri);color:#fff;box-shadow:none}.od-step.done:before{background:var(--cd-pri)} .od-step.active i{background:var(--cd-card);color:var(--cd-pri);box-shadow:inset 0 0 0 2px var(--cd-pri);animation:odpulse 1.6s infinite}.od-step.active:before{background:var(--cd-pri)} .od-step.bad i{background:#dc2626;color:#fff;box-shadow:none}.od-step.bad:before{background:#dc2626} .od-step b{display:block;font-size:13px;font-weight:600}.od-step small{display:block;font-size:11.5px;color:var(--cd-mut);margin-top:2px;min-height:14px} .od-step.active b{color:var(--cd-pri)}.od-step.bad b{color:var(--t-danger-text,#dc2626)} @keyframes odpulse{0%,100%{box-shadow:inset 0 0 0 2px var(--cd-pri)}50%{box-shadow:inset 0 0 0 2px var(--cd-pri),0 0 0 6px rgba(37,99,235,.15)}} .od-sec{border-radius:14px;background:var(--cd-tint);padding:16px 18px}.od-sec--wait{background:var(--cd-warn-soft)}.od-sec--bad{background:#fef2f2}html[data-theme="dark"] .od-sec--bad{background:rgba(220,38,38,.12)} .od-sec__hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}.od-sec__hd h3{font-size:15px;margin:0;font-weight:700}.od-sec__hd h3 small{margin-left:6px;font-size:12px;color:var(--cd-mut);font-weight:500} .od-sec__act{margin-left:auto;display:flex;gap:8px} .od-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:var(--cd-card);color:var(--cd-ink);padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap} .od-btn--pri{background:var(--cd-pri);color:#fff}.od-btn--lg{height:44px;padding:0 24px;font-size:14px;margin-top:4px} .od-p{margin:0 0 10px;font-size:13.5px;color:var(--cd-ink);line-height:1.6}.od-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} .cd--order .cd-codes{margin-top:4px}.cd--order .cd-code{background:var(--cd-card);border:0;border-radius:10px;font-size:15px;letter-spacing:.3px;padding:11px 14px} .cd--order .cd-code button{border:0;background:var(--cd-tint);border-radius:8px;padding:5px 12px} #odCodes.is-mask .od-code{filter:blur(6px);user-select:none} .od-guide{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--cd-card);font-size:13px}.od-guide b{display:block;margin-bottom:4px;font-size:12.5px;color:var(--cd-mut)}.od-guide p{margin:0;color:var(--cd-ink);line-height:1.6} .cd--order .cd-hint{margin-top:10px} .od-count{margin-left:auto;font-size:13px;font-weight:700;color:var(--cd-warn);font-variant-numeric:tabular-nums} .od-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--cd-mut)}.od-live i{width:8px;height:8px;border-radius:50%;background:var(--cd-pri);animation:cdpulse 1.2s infinite} .od-sum .l b{white-space:normal;text-align:right}.od-sum__acts{display:flex;gap:8px;margin-top:14px}.od-sum__acts .od-btn{flex:1;height:40px} .cd--order .cd-sum__f{justify-content:center;gap:16px} @media (max-width:900px){ .cd--order .cd-sum{display:block;background:var(--cd-tint);border-radius:14px;padding:14px;margin-top:12px} .od-steps{padding:12px 4px 8px;margin-bottom:12px}.od-step b{font-size:12px}.od-step small{font-size:10.5px} .od-sec{padding:14px}.cd--order .cd-code{font-size:14px} } .cd-fact small{opacity:.6;font-size:11px;margin-right:2px}/* 链接形态的主按钮文字保持白色(.cd a{color:inherit} 的优先级比按钮类高) */ .cd a.od-btn--pri,.cd a.cdp__ok,.cd a.cd-buy,.cd a.cd-bar__btn,.cd a.cd-buy--link{color:#fff}.cd a.od-btn{color:var(--cd-ink)}.cd a.od-btn.od-btn--pri{color:#fff} /* 卡面右侧放品牌 logo:白底 logo → 反白水印(深色卡)/ 深色水印(浅色卡);整幅品牌图 → 圆形徽章。有 logo 时不再画那个空圆圈 */ .cd-preview.has-art:after{display:none} .cd-preview > *{position:relative;z-index:1} .cd-preview__art{position:absolute !important;z-index:0 !important;pointer-events:none;display:block} .cd-preview__art img{display:block;width:100%;height:100%} .cd-preview__art.is-mark{right:-4%;top:50%;width:46%;max-width:420px;aspect-ratio:1/1;transform:translateY(-50%);opacity:.13;mix-blend-mode:screen} .cd-preview__art.is-mark img{object-fit:contain;filter:grayscale(1) invert(1) contrast(1.4)} .cd-preview__art.is-badge{right:-46px;top:-64px;width:230px;height:230px;border-radius:50%;overflow:hidden;opacity:.55} .cd-preview__art.is-badge img{object-fit:cover} html[data-theme="dark"] .cd-preview__art.is-mark{mix-blend-mode:multiply;opacity:.14} html[data-theme="dark"] .cd-preview__art.is-mark img{filter:grayscale(1) contrast(1.4)} html[data-theme="dark"] .cd-preview__art.is-badge{opacity:.75} @media (max-width:900px){.cd-preview__art.is-mark{width:62%;right:-12%;opacity:.11}.cd-preview__art.is-badge{right:-60px;top:-70px;width:200px;height:200px}} /* 面值选择区:做醒目——两行瓷砖(面值 + 售价)、底色加深、选中主色 + 对勾;没选时标题旁有提示 */ .cd--brand .cd-pick__t{font-size:16px;font-weight:700;margin-bottom:10px} .cd-pick__n{font-style:normal;font-size:12px;font-weight:600;color:var(--cd-mut);background:var(--cd-tint);border-radius:8px;padding:2px 8px}.cd-pick__n:empty{display:none} .cd-pick__tip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--cd-pri)}.cd-pick__tip[hidden]{display:none} .cd-pick__tip i{width:8px;height:8px;border-radius:50%;background:var(--cd-pri);animation:odpulse2 1.4s infinite} @keyframes odpulse2{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.4)}60%{box-shadow:0 0 0 5px rgba(37,99,235,0)}} .cd--brand .cd-denoms{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .cd--brand .cd-den{position:relative;background:var(--cd-tint-2);border-radius:12px;padding:11px 6px 10px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .12s,background .12s,box-shadow .12s} .cd--brand .cd-den:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(15,23,42,.35)} .cd--brand .cd-den b{font-size:15px;font-weight:700;white-space:nowrap}.cd--brand .cd-den .p{font-size:12px;color:var(--cd-mut);font-weight:500;margin:0} .cd--brand .cd-den.on{background:var(--cd-pri);color:#fff;box-shadow:0 8px 18px -8px rgba(37,99,235,.7)}.cd--brand .cd-den.on .p{color:rgba(255,255,255,.85)} .cd--brand .cd-den.on:after{content:'';position:absolute;right:7px;top:7px;width:14px;height:14px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%232563eb' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat} .cd--brand .cd-den.out{opacity:.45}.cd--brand .cd-den.out .p{color:var(--cd-warn)} html[data-theme="dark"] .cd--brand .cd-den{background:var(--cd-tint-2)} /* 水印别压住售价:略上移、再淡一点 */ .cd-preview__art.is-mark{top:44%;opacity:.11} @media (max-width:900px){.cd--brand .cd-denoms{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.cd--brand .cd-den{min-height:54px;padding:9px 2px 8px;border-radius:11px}.cd--brand .cd-den b{font-size:13.5px}.cd--brand .cd-den .p{font-size:11px}.cd--brand .cd-pick__t{font-size:15px}.cd--brand .cd-den.on:after{right:4px;top:4px;width:12px;height:12px}} /* 卡面水印只用品牌图形(透明底 PNG,不带字样):深色卡反白,浅色卡压黑 */ .cd-preview__art.is-mark{right:5%;top:50%;width:auto;height:74%;max-width:38%;aspect-ratio:auto;transform:translateY(-50%);opacity:.12;mix-blend-mode:normal} .cd-preview__art.is-mark img{width:auto;height:100%;max-width:100%;object-fit:contain;object-position:right center;filter:brightness(0) invert(1) blur(1.6px)} html[data-theme="dark"] .cd-preview__art.is-mark{mix-blend-mode:normal;opacity:.1}html[data-theme="dark"] .cd-preview__art.is-mark img{filter:brightness(0) blur(1.6px)} .cd-preview__hd img.is-markimg{object-fit:contain;padding:8px} @media (max-width:900px){.cd-preview__art.is-mark{right:4%;top:46%;width:auto;height:60%;max-width:44%;opacity:.1}} /* 品牌图标用矢量字体(清晰):卡面水印、左上角小标、确认单、选地区页头 */ .cd-preview__art.is-glyph{right:6%;top:50%;transform:translateY(-50%);font-size:168px;line-height:1;color:#fff;opacity:.12} html[data-theme="dark"] .cd-preview__art.is-glyph{color:#0f172a;opacity:.1} .cd-preview__ico{width:44px;height:44px;border-radius:12px;background:#fff;color:#0f172a;display:flex;align-items:center;justify-content:center;font-size:26px;flex:0 0 44px;line-height:1} .cdp__item .cdp__ico{background:#fff;color:#0f172a;font-size:24px;border:0} .cd-brand .cd-brand__ico{background:#fff;color:#0f172a;font-size:30px;border:0;box-shadow:0 2px 10px -4px rgba(15,23,42,.35)} @media (max-width:900px){.cd-preview__art.is-glyph{font-size:128px;right:5%;top:46%;opacity:.1}} /* 卡面品牌图标的摆法:右下角超大出血(品牌色、低透明度)做底纹,底边一条品牌色;和地区卡面图同一套语言 */ .cd-preview.has-brand{box-shadow:inset 0 -4px 0 var(--cd-brand,#3b82f6)} .cd-preview__art.is-glyph{right:-18px;top:auto;bottom:-70px;transform:none;font-size:300px;line-height:1;color:var(--cd-brand,#fff);opacity:.2} html[data-theme="dark"] .cd-preview__art.is-glyph{color:#0f172a;opacity:.07} @media (max-width:900px){.cd-preview__art.is-glyph{font-size:230px;right:-22px;top:auto;bottom:-56px;opacity:.18}} /* 面值瓷砖文字:一律可换行、不溢出;规格名长的减少列数 */ .cd--brand .cd-den{min-width:0;overflow:hidden} .cd--brand .cd-den b{white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.25;text-align:center;max-width:100%} .cd--brand .cd-denoms.is-long{grid-template-columns:repeat(4,minmax(0,1fr))}.cd--brand .cd-denoms.is-long .cd-den b{font-size:14px} .cd--brand .cd-denoms.is-xlong{grid-template-columns:repeat(2,minmax(0,1fr))}.cd--brand .cd-denoms.is-xlong .cd-den{align-items:flex-start;padding:11px 14px}.cd--brand .cd-denoms.is-xlong .cd-den b{font-size:14px;text-align:left} /* 首页:每个分区先放前 18 个,其余点「显示全部」;搜索时不折叠 */ .cd-tile--more{display:none}.cd-sec.is-open .cd-tile--more,.cd-sec.is-search .cd-tile--more{display:flex}.cd-sec.is-search .cd-tile.is-hide{display:none} .cd-more{display:block;margin:18px auto 0;border:0;background:var(--cd-tint);color:var(--cd-ink);border-radius:10px;padding:10px 22px;font-size:13.5px;font-weight:600;cursor:pointer}.cd-more:hover{background:var(--cd-tint-2)}.cd-sec.is-search .cd-more{display:none} @media (max-width:900px){.cd--brand .cd-denoms.is-long{grid-template-columns:repeat(2,minmax(0,1fr))}.cd--brand .cd-denoms.is-xlong{grid-template-columns:1fr}.cd--brand .cd-denoms.is-long .cd-den b{font-size:13.5px}} /* 卡面图按主题切换:浅色模式用浅色卡面(和页面融合),深色模式用深色卡面 */ .cd-tile__art img.cd-art--d{display:none} html[data-theme="dark"] .cd-tile__art img.cd-art--l{display:none}html[data-theme="dark"] .cd-tile__art img.cd-art--d{display:block} html[data-theme="dark"] .cd-tile__art img.cd-art--d{filter:none} /* 大卡面跟随主题(和列表里的卡面图一致):浅色模式浅卡、深色模式深卡。--cd-ghost = 浅底上用的底纹色(品牌色太浅时换石板灰) */ .cd-preview{background:#eef1f6;color:#0f172a} .cd-preview:after{background:rgba(15,23,42,.05)} .cd-preview__facts{border-top-color:rgba(15,23,42,.1)} .cd-fact{background:rgba(15,23,42,.06)} .cd-preview__art.is-glyph{color:var(--cd-ghost,var(--cd-brand,#64748b));opacity:.22} .cd-preview__art.is-mark{mix-blend-mode:normal;opacity:.1}.cd-preview__art.is-mark img{filter:brightness(0) blur(1.6px)} .cd-preview__art.is-badge{opacity:.8} .cd-preview__ico,.cd-preview__hd img{box-shadow:0 1px 4px rgba(15,23,42,.12)} .od-pill{background:rgba(15,23,42,.08);color:#0f172a}.od-pill--ok{background:rgba(5,150,105,.16);color:#047857}.od-pill--bad{background:rgba(220,38,38,.12);color:#b91c1c}.od-pill--wait{background:rgba(217,119,6,.16);color:#b45309} html[data-theme="dark"] .cd-preview{background:#0f172a;color:#fff} html[data-theme="dark"] .cd-preview:after{background:rgba(255,255,255,.06)} html[data-theme="dark"] .cd-preview__facts{border-top-color:rgba(255,255,255,.12)} html[data-theme="dark"] .cd-fact{background:rgba(255,255,255,.08)} html[data-theme="dark"] .cd-preview__art.is-glyph{color:var(--cd-brand,#fff);opacity:.2} html[data-theme="dark"] .cd-preview__art.is-mark{opacity:.12}html[data-theme="dark"] .cd-preview__art.is-mark img{filter:brightness(0) invert(1) blur(1.6px)} html[data-theme="dark"] .cd-preview__art.is-badge{opacity:.55} html[data-theme="dark"] .cd-preview__ico,html[data-theme="dark"] .cd-preview__hd img{box-shadow:none} html[data-theme="dark"] .od-pill{background:rgba(255,255,255,.12);color:#fff}html[data-theme="dark"] .od-pill--ok{background:rgba(16,185,129,.25);color:#fff}html[data-theme="dark"] .od-pill--bad{background:rgba(239,68,68,.25);color:#fff}html[data-theme="dark"] .od-pill--wait{background:rgba(245,158,11,.28);color:#fff} /* 充值账号:醒目的一块,带填写提示、核对按钮和结果;没填标红 */ .cd-acct__req{font-style:normal;font-size:11.5px;font-weight:600;color:var(--cd-warn,#b45309);background:var(--cd-warn-soft);border-radius:6px;padding:1px 7px} .cd-acct__box{background:var(--cd-tint);border-radius:14px;padding:16px} .cd-acct .cd-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px} .cd-fld label{display:block;font-size:13px;font-weight:600;color:var(--cd-ink);margin-bottom:6px} .cd-fld input,.cd-fld select{width:100%;height:44px;border:0;border-radius:10px;background:var(--cd-card);color:var(--cd-ink);padding:0 12px;font-size:15px;margin:0;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .12s} .cd-fld input:focus,.cd-fld select:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--cd-pri)} .cd-fld input.is-bad,.cd-fld select.is-bad{box-shadow:inset 0 0 0 1.5px #dc2626} .cd-fld small{display:block;margin-top:6px;font-size:12px;color:var(--cd-mut);line-height:1.45} .cd-acct__ft{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap} .cd-acct__btn{border:0;background:var(--cd-card);color:var(--cd-pri);font-weight:600;font-size:13px;border-radius:9px;padding:8px 16px;cursor:pointer}.cd-acct__btn[disabled]{opacity:.6} .cd-acct .cd-check{margin:0;font-size:13px;color:var(--cd-mut)}.cd-acct .cd-check.ok{color:var(--cd-ok);font-weight:600}.cd-acct .cd-check.bad{color:var(--t-danger-text,#dc2626);font-weight:600} .cdp__acct{margin-top:8px;padding:9px 12px;border-radius:10px;background:var(--cd-warn-soft);color:var(--cd-ink);font-size:13px;font-weight:600;word-break:break-all} #sAcct{white-space:normal;word-break:break-all;text-align:right} @media (max-width:900px){.cd-acct .cd-fields{grid-template-columns:1fr}.cd-acct__box{padding:14px}} /* 维护提示(后台营业状态 = 维护) */ .cd-maint{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:12px 16px;border-radius:14px;background:#fff6e5;color:#8a5a00;font-size:14px;font-weight:600;line-height:1.5} .cd-maint i{flex:none;font-size:20px} .cd-maint.is-flash{animation:cdMaintFlash .9s ease} @keyframes cdMaintFlash{0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,0)}35%{box-shadow:0 0 0 5px rgba(217,119,6,.28)}} .cd.is-maint .cd-buy,.cd.is-maint .cd-bar__btn{opacity:.5} html[data-theme="dark"] .cd-maint{background:rgba(217,119,6,.16);color:#fbbf24} @media (max-width:767px){.cd-maint{margin:0 0 12px;padding:10px 12px;font-size:13px;border-radius:12px}} /* ===== Telegram Stars / Premium 专门版式(11-05):先填收件人,星星可填任意数量,图标用站长给的立体图 ===== */ .cd--tg .cd-main{display:flex;flex-direction:column;min-width:0} .cd--tg .cd-main > *{min-width:0;max-width:100%} .cd--tg .cd-main > .cd-tgsw{order:-1} .cd--tg .cd-main > .cd-preview{order:0} .cd--tg #cdFieldsStep{order:1} .cd--tg #cdDenomStep{order:2} .cd--tg .cd-main > .cd-hint{order:4} .cd--tg #cdQtyStep,.cd--tg #cdCheckBtn,.cd--tg #cdPickTip,.cd--tg #cdPickN{display:none !important} .cd--tg .cd-preview__art{display:none} .cd-preview__tgart{position:absolute;right:26px;top:50%;width:150px;height:150px;object-fit:contain;transform:translateY(-54%);filter:drop-shadow(0 14px 22px rgba(15,23,42,.18));pointer-events:none} .cd-preview__tgbox{position:absolute;right:26px;top:50%;width:150px;height:150px;transform:translateY(-54%);pointer-events:none} /* 换图:原地交叉淡入淡出,只带一点缩放(旧图略放大淡出、新图由略小淡入),不旋转不位移。阴影放在容器上,两张图叠着时不会各带一层 */ .cd-preview__tgbox{filter:drop-shadow(0 14px 22px rgba(15,23,42,.18))} .cd-preview__tgbox img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;will-change:transform,opacity;backface-visibility:hidden} .cd-preview__tgbox img.is-in{animation:cdArtIn .34s cubic-bezier(.22,.61,.36,1) both} .cd-preview__tgbox img.is-out{animation:cdArtOut .34s cubic-bezier(.22,.61,.36,1) both} @keyframes cdArtIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}} @keyframes cdArtOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}} @media (prefers-reduced-motion:reduce){.cd-preview__tgbox img.is-in,.cd-preview__tgbox img.is-out{animation-duration:.01s}} .cd--tg .cd-preview__mid,.cd--tg .cd-preview__hd{padding-right:170px} .cd--tg .cd-preview__kind{display:none} /* 收件人 */ .cd--tg .cd-acct__box{padding:14px 16px} .cd--tg .cd-fld label{display:none} .cd-at{display:flex;align-items:center;gap:0;border-radius:12px;background:var(--cd-card,#fff);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s} .cd-at:focus-within{box-shadow:inset 0 0 0 1.5px var(--t-primary,#0d6efd)} .cd-at > i{flex:none;padding:0 2px 0 14px;font-style:normal;font-size:17px;font-weight:600;color:var(--t-text-3,#8a94a6)} .cd-at > input{flex:1;width:0;min-width:0;border:0 !important;background:none !important;box-shadow:none !important;outline:0;padding:12px 14px 12px 2px;font-size:16px;font-weight:600;color:var(--t-text,#0f172a)} .cd-at:has(input.is-bad){box-shadow:inset 0 0 0 1.5px #dc2626} .cd--tg .cd-acct__ft{margin-top:6px;min-height:0} /* 卡面上直接填数量 */ .cd-pvq{min-width:0;flex:1} .cd-pvq__in{display:flex;align-items:baseline;gap:8px;margin:2px 0 0;max-width:340px;cursor:text;box-shadow:inset 0 -2px 0 color-mix(in srgb,currentColor 16%,transparent);transition:box-shadow .15s} .cd-pvq__in:focus-within{box-shadow:inset 0 -2px 0 var(--t-primary,#0d6efd)} .cd-pvq__in input{flex:1;width:0;min-width:0;border:0;background:none;outline:0;padding:0 0 4px;font:inherit;font-size:34px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:inherit} .cd-pvq__in input::placeholder{font-size:22px;font-weight:600;color:currentColor;opacity:.38} .cd-pvq__in span{flex:none;font-size:15px;font-weight:600;opacity:.6} .cd-pvq #cdCustomNote.is-bad{color:#dc2626;font-weight:700;opacity:1}html[data-theme="dark"] .cd-pvq #cdCustomNote.is-bad{color:#ff8a8a}/* 深色下卡面是深蓝底,用浅红 */ html[data-theme="dark"] .cd-pvq__in input{background-color:transparent !important;color:inherit !important}/* 2026-11-05 全站深色输入框规则(选择器很重)把这里刷成了灰块 */ @media (max-width:767px){.cd-pvq__in{max-width:none}.cd-pvq__in input{font-size:26px}.cd-pvq__in input::placeholder{font-size:17px}} /* Stars / Premium 切换 */ .cd-tgsw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px} .cd-tgsw__i{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border-radius:14px;background:var(--cd-tint,#f1f5f9);color:var(--t-text,#0f172a) !important;text-decoration:none !important;transition:background .15s,box-shadow .15s} .cd-tgsw__i img{flex:none;width:34px;height:34px;object-fit:contain} .cd-tgsw__i span{display:flex;flex-direction:column;min-width:0} .cd-tgsw__i b{font-size:14.5px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cd-tgsw__i small{font-size:12px;color:var(--t-text-3,#8a94a6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cd-tgsw__i:hover{background:var(--cd-tint-2,#e8edf4)} .cd-tgsw__i.on{background:color-mix(in srgb,var(--t-primary,#0d6efd) 9%,var(--cd-card,#fff))} .cd-tgsw__i.on b{color:var(--t-primary,#0d6efd)} /* 2026-11-05 选中不再用一圈描边(站长不要「一根线包着的边框」),改浅底 + 右侧对勾 */ .cd-tgsw__i{position:relative;padding-right:42px} .cd-tgsw__i.on::after{content:'';position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--t-primary,#0d6efd) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") center/11px no-repeat} html[data-theme="dark"] .cd-tgsw__i.on b{color:var(--t-primary-text)} /* 收件人预览 */ .cd--tg .cd-acct__box{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 20px;align-items:center;padding:10px 12px} .cd--tg .cd-acct__ft{margin:0 !important;min-height:0 !important} .cd--tg .cd-acct__ft .cd-check:empty{display:none} .cd--tg .cd-acct__ft .cd-check{display:block;margin:8px 2px 0} .cd--tg .cd-fld{margin:0} .cd--tg .cd-at > input{padding-top:10px;padding-bottom:10px} .cd--tg .cd-rcp__av{width:38px;height:38px;font-size:15px} .cd--tg .cd-acct__box > .cd-acct__ft{grid-column:1 / -1} .cd-rcp{display:flex;align-items:center;gap:12px;min-width:0} .cd-rcp__av{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:var(--cd-card,#fff);color:var(--t-text-3,#8a94a6);font-size:17px;font-weight:700} .cd-rcp__av img{width:100%;height:100%;object-fit:cover;display:block} .cd-rcp__tx{display:flex;flex-direction:column;min-width:0} .cd-rcp__tx b{font-size:14.5px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t-text,#0f172a)} .cd-rcp__tx small{font-size:12px;line-height:1.4;color:var(--t-text-3,#8a94a6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cd-rcp[data-state="idle"] .cd-rcp__tx b{font-weight:600;color:var(--t-text-2,#475569)} .cd-rcp[data-state="loading"] .cd-rcp__av{animation:cdRcpPulse 1s ease-in-out infinite} .cd-rcp[data-state="found"] .cd-rcp__av{box-shadow:0 0 0 2px #22c55e} .cd-rcp[data-state="notfound"] .cd-rcp__tx small,.cd-rcp[data-state="warn"] .cd-rcp__tx small{color:#dc2626;font-weight:600} @keyframes cdRcpPulse{0%,100%{opacity:1}50%{opacity:.45}} @media (max-width:767px){.cd--tg .cd-acct__box{grid-template-columns:1fr;gap:10px 0}.cd-tgsw__i{padding:10px 10px;gap:9px}.cd-tgsw__i img{width:28px;height:28px}.cd-tgsw__i small{display:none}} @media (max-width:767px){.cd-tgsw__i{padding-right:29px;gap:7px}.cd-tgsw__i img{width:24px;height:24px}.cd-tgsw__i.on::after{right:9px;width:14px;height:14px;margin-top:-7px;background-size:9px}} /* 发货页:Telegram 订单的收件人 */ .od-rcp{display:flex;align-items:center;gap:14px;margin:14px 0 0;padding:14px 16px;border-radius:16px;background:var(--cd-tint,#f1f5f9)} .od-rcp .cd-rcp__av{width:48px;height:48px;font-size:18px} .od-rcp__k{flex:none;font-size:12px;color:var(--t-text-3,#8a94a6);margin-left:auto;text-align:right;line-height:1.5} .od-rcp__k b{display:block;font-size:15px;font-weight:700;color:var(--t-text,#0f172a)} .cd--order.cd--tg .cd-preview__tgart{width:128px;height:128px;transform:translateY(-50%)} @media (max-width:767px){.od-rcp{padding:12px;gap:11px}.od-rcp .cd-rcp__av{width:42px;height:42px}.cd--order.cd--tg .cd-preview__tgart{width:84px;height:84px}} /* 数量:大号输入 */ .cd-cq{display:flex;align-items:baseline;gap:10px;margin:2px 0 0;padding:6px 2px 8px;cursor:text;box-shadow:inset 0 -2px 0 var(--cd-line,rgba(148,163,184,.3));transition:box-shadow .15s} .cd-cq:focus-within{box-shadow:inset 0 -2px 0 var(--t-primary,#0d6efd)} .cd-cq input{flex:1;width:0;min-width:0;border:0;background:none;outline:0;padding:0;font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--t-text,#0f172a)} .cd-cq input::placeholder{color:var(--t-text-3,#b6bfcc);opacity:.6} .cd-cq span{flex:none;font-size:14px;color:var(--t-text-3,#8a94a6)} .cd-cq__note{margin:8px 0 0;font-size:12.5px;color:var(--t-text-3,#8a94a6)} .cd-cq__note.is-bad{color:#dc2626;font-weight:600} .cd-cq__sub{margin:18px 0 10px;font-size:12.5px;color:var(--t-text-3,#8a94a6)} /* 档位瓷砖:左字右图 */ .cd--tg .cd-denoms{grid-template-columns:repeat(4,minmax(0,1fr))} .cd--telegram-premium .cd-denoms{grid-template-columns:repeat(3,minmax(0,1fr))} .cd--tg .cd-acct .cd-fields{grid-template-columns:1fr} .cd--brand .cd-den.cd-den--tg{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;text-align:left;padding:14px 12px 14px 16px;min-height:76px} .cd-den--tg .tx{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;text-align:left} .cd-den--tg .tx b{font-size:16px;line-height:1.2;white-space:nowrap} .cd-den--tg .tx .p{font-size:13px} .cd-den--tg .tx .pm{font-size:11.5px;opacity:.7} .cd-den--tg img{flex:none;width:46px;height:46px;object-fit:contain} .cd--telegram-premium .cd-den--tg{min-height:92px} .cd--telegram-premium .cd-den--tg img{width:56px;height:56px} /* 首页瓷砖:立体图标不裁切 */ .cd-tile__art.is-icon{background:linear-gradient(0deg,rgba(42,171,238,.10),rgba(42,171,238,.10)),var(--cd-tint,#f1f5f9)} .cd-tile__art.is-icon img{width:56% !important;height:56% !important;object-fit:contain !important;border:0 !important;background:none !important;border-radius:0 !important;position:absolute;left:22%;top:22%;filter:drop-shadow(0 10px 14px rgba(15,23,42,.16))} html[data-theme="dark"] .cd-at{background:rgba(255,255,255,.06)} html[data-theme="dark"] .cd-at > input,html[data-theme="dark"] .cd-cq input{color:#f1f5f9} @media (max-width:767px){ .cd-preview__tgart,.cd-preview__tgbox{width:92px;height:92px;right:14px;transform:translateY(-58%)} .cd--tg .cd-preview__mid,.cd--tg .cd-preview__hd{padding-right:100px} .cd--tg .cd-denoms,.cd--telegram-premium .cd-denoms{grid-template-columns:repeat(2,minmax(0,1fr))} .cd--telegram-premium .cd-denoms{grid-template-columns:1fr} .cd-cq input{font-size:28px} .cd-den.cd-den--tg{padding:12px 10px 12px 12px;min-height:68px} .cd-den--tg img{width:38px;height:38px} } /* ===== 2026-11-05 站长:充值账号这块不要这么高;卡面右上角的圆形游戏图会压住「充值」和售价 ===== */ /* 充值账号(Telegram 页另有版式,不动):输入框和「核对账号」放一行;只有一个填写项时标签不单独占一行;说明文字点进输入框才出现 */ .cd:not(.cd--tg) .cd-acct__box{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:12px} .cd:not(.cd--tg) .cd-acct .cd-fields{flex:1 1 0;min-width:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .cd:not(.cd--tg) .cd-fields.is-one .cd-fld label{display:none} .cd:not(.cd--tg) .cd-fld label{font-size:12px;margin-bottom:4px} .cd:not(.cd--tg) .cd-acct .cd-fld small{display:none;margin-top:5px} .cd:not(.cd--tg) .cd-acct .cd-fld:focus-within small{display:block} .cd:not(.cd--tg) .cd-acct__ft{display:contents} .cd:not(.cd--tg) .cd-acct__btn{flex:0 0 auto;height:44px;padding:0 16px;border-radius:10px} .cd:not(.cd--tg) .cd-acct .cd-check{flex-basis:100%} .cd:not(.cd--tg) .cd-acct .cd-check:empty{display:none} @media (max-width:900px){.cd:not(.cd--tg) .cd-acct__box{padding:10px}.cd:not(.cd--tg) .cd-acct .cd-fields{grid-template-columns:1fr}} /* 卡面有圆形游戏图时,文字给它让位;右上角「充值 / 礼品卡」小字在这种卡面上不显示(标题下面已经写了「付款后自动充值 / 立即发卡」) */ .cd:not(.cd--tg) .cd-preview.has-badge .cd-preview__kind{display:none} .cd:not(.cd--tg) .cd-preview.has-badge .cd-preview__hd,.cd:not(.cd--tg) .cd-preview.has-badge .cd-preview__mid{padding-right:196px} @media (max-width:900px){ .cd:not(.cd--tg) .cd-preview.has-badge .cd-preview__art.is-badge{right:-34px;top:-34px;width:146px;height:146px} .cd:not(.cd--tg) .cd-preview.has-badge .cd-preview__hd{padding-right:114px} /* 圆图在手机上露出约 112px */ .cd:not(.cd--tg) .cd-preview.has-badge .cd-preview__mid{padding-right:70px;flex-direction:column;align-items:flex-start;gap:4px} /* 长档位名第一行别伸到圆图下沿 */ .cd:not(.cd--tg) .cd-preview.has-badge .cd-preview__pr{text-align:left;display:flex;align-items:baseline;gap:8px} /* 「售价 $0.87」一行 */ } /* 2026-11-05 付款弹层:选中的支付方式不再用一圈描边,改浅底 + 对勾(站长不要「一根线包着的边框」) */ .cdp-gw{position:relative} .cdp-gw.on{box-shadow:none !important;border-color:transparent !important} .cdp-gw.on:after{content:'';position:absolute;right:12px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--cd-pri,#0d6efd) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") center/11px no-repeat} .cdp-gw--tile.on:after{top:7px;right:7px;margin-top:0;width:16px;height:16px;background-size:10px} /* ===== 页头(cards/_hero.blade.php) ===== */ .cdh{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:16px;align-items:center;background:var(--cd-tint);border-radius:20px;padding:28px 30px;overflow:hidden;min-height:220px;margin:2px 0 20px} .cdh__txt{position:relative;z-index:1;min-width:0} .cdh h1{font-size:28px;font-weight:800;margin:0 0 8px;color:var(--cd-ink);line-height:1.25} .cdh p{margin:0;color:var(--cd-mut);font-size:14px;line-height:1.75;max-width:600px} .cdh__facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .cdh__facts span{background:var(--cd-card);border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;color:var(--cd-ink)} .cdh__search{display:flex;align-items:center;gap:8px;background:var(--cd-card);border-radius:12px;height:46px;padding:0 14px;margin:16px 0 0;max-width:460px;cursor:text} .cdh__search i{color:var(--cd-mut);font-size:17px} .cdh__search input{flex:1;min-width:0;border:0 !important;outline:0;background:transparent !important;box-shadow:none !important;font-size:15px;color:var(--cd-ink);height:42px;padding:0} .cdh__art{position:relative;align-self:stretch;min-height:190px} .cdh__tiles{position:absolute;right:-24px;top:50%;transform:translateY(-50%) rotate(-12deg);display:grid;grid-template-columns:repeat(5,66px);gap:14px} .cdh__t{width:66px;height:66px;border-radius:17px;display:flex;align-items:center;justify-content:center;background:var(--tb);color:var(--tf);font-size:31px;box-shadow:0 8px 20px rgba(15,23,42,.13);overflow:hidden} .cdh__t img{width:100%;height:100%;object-fit:cover} .cdh__t:nth-child(5n+2),.cdh__t:nth-child(5n+4){transform:translateY(22px)} .cdh__covers{position:absolute;right:-56px;top:50%;transform:translateY(-50%) rotate(-9deg);display:grid;grid-template-columns:repeat(3,176px);gap:12px} .cdh__covers img{width:176px;aspect-ratio:460/215;border-radius:10px;object-fit:cover;box-shadow:0 8px 22px rgba(15,23,42,.18);background:var(--cd-tint-2)} .cdh__covers img:nth-child(3n+2){transform:translateY(26px)} html[data-theme="dark"] .cdh__t,html[data-theme="dark"] .cdh__covers img{box-shadow:0 8px 22px rgba(0,0,0,.45)} .cdh--few{min-height:200px} .cdh--few .cdh__art::before{content:"";position:absolute;right:6%;top:50%;width:230px;height:230px;margin-top:-115px;border-radius:50%;background:var(--cd-tint-2)} .cdh--few .cdh__tiles{right:6%;margin-right:115px;transform:translate(50%,-50%);display:flex;gap:0;align-items:center} .cdh--few .cdh__t{width:118px;height:118px;border-radius:30px;font-size:56px;box-shadow:0 14px 34px rgba(15,23,42,.18);transform:none} .cdh--few .cdh__t + .cdh__t{margin-left:-26px} .cdh--few .cdh__t:nth-child(1){transform:rotate(-8deg) translateY(6px)}.cdh--few .cdh__t:nth-child(2){transform:rotate(7deg) translateY(-10px)}.cdh--few .cdh__t:nth-child(3){transform:rotate(-4deg) translateY(8px)}.cdh--few .cdh__t:nth-child(4){transform:rotate(6deg) translateY(-6px)}.cdh--few .cdh__t:nth-child(5){transform:rotate(-6deg) translateY(4px)} .cdh--n1 .cdh__t{width:132px;height:132px;transform:rotate(-6deg)} .cdh--n4 .cdh__t,.cdh--n5 .cdh__t{width:96px;height:96px;font-size:44px;border-radius:24px} @media (max-width:991px){.cdh{grid-template-columns:minmax(0,1fr) 38%}.cdh__tiles{right:-70px}.cdh__covers{right:-160px}.cdh--few .cdh__tiles{right:6%}} @media (max-width:680px){ .cdh{grid-template-columns:1fr;padding:18px 16px 18px;min-height:0;border-radius:16px} .cdh__art{order:-1;min-height:0;height:104px;margin:-18px -16px 8px;overflow:hidden} .cdh__tiles{right:auto;left:-10px;top:14px;transform:rotate(-6deg);grid-template-columns:repeat(8,48px);gap:10px} .cdh__t:nth-child(5n+2),.cdh__t:nth-child(5n+4){transform:none} .cdh__t{width:48px;height:48px;border-radius:13px;font-size:22px} .cdh__covers{right:auto;left:-24px;top:6px;transform:rotate(-5deg);grid-template-columns:repeat(4,128px);gap:8px} .cdh__covers img:nth-child(3n+2){transform:none} .cdh__covers img{width:128px} .cdh h1{font-size:22px}.cdh p{font-size:13.5px} .cdh--few .cdh__art::before{display:none} .cdh--few .cdh__tiles{left:50%;right:auto;margin:0;top:52px;transform:translate(-50%,-50%)} .cdh--few .cdh__t,.cdh--n1 .cdh__t{width:66px;height:66px;border-radius:17px;font-size:30px} .cdh--few .cdh__t + .cdh__t{margin-left:-12px} } /* ===== 分类独立页(cards/category.blade.php) ===== */ .cd--cat .cd-sec--flat{margin-top:6px} .cdc-faq,.cdc-more,.cdc-about{margin-top:34px} .cdc-about h2{font-size:17px;font-weight:700;margin:0 0 10px;color:var(--cd-ink)} .cdc-about p{margin:0 0 10px;font-size:14px;line-height:1.85;color:var(--cd-mut);max-width:980px} .cdc-faq h2,.cdc-more h2{font-size:17px;font-weight:700;margin:0 0 12px;color:var(--cd-ink)} .cdc-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .cdc-qa > div{background:var(--cd-tint);border-radius:14px;padding:14px 16px} .cdc-qa h3{font-size:14.5px;font-weight:700;margin:0 0 6px;color:var(--cd-ink)} .cdc-qa p{margin:0;font-size:13.5px;line-height:1.7;color:var(--cd-mut)} .cdc-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .cdc-cats a{display:flex;align-items:center;gap:12px;background:var(--cd-tint);border-radius:14px;padding:12px 14px;color:var(--cd-ink) !important;text-decoration:none !important;transition:background .15s} .cdc-cats a:hover{background:var(--cd-tint-2)} .cdc-cats i{font-size:22px;color:var(--cd-pri);flex:none} .cdc-cats b{display:block;font-size:14px}.cdc-cats small{color:var(--cd-mut);font-size:12px} @media (max-width:900px){.cdc-cats{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:680px){.cdc-qa{grid-template-columns:1fr}.cdc-faq,.cdc-more{margin-top:26px}} /* ===== 首页(cards/index.blade.php) ===== */ .cd-sec-hd h2 a{color:inherit !important;text-decoration:none !important}.cd-sec-hd h2 a:hover{color:var(--cd-pri) !important} .cd-sec-all{margin-left:auto;font-size:13px;font-weight:600;color:var(--cd-pri) !important;text-decoration:none !important;white-space:nowrap}.cd-sec.is-search .cd-sec-all{display:none} a.cd-more{width:max-content;text-decoration:none !important;text-align:center} /* ===== 2026-11-09 卡面图只下发一张(原来浅 / 深色各一张 ,/cards 首页 1,064 张图): 服务端按主题 cookie 出当前那张,另一张放 data-alt-src,切换主题时由 _style 里的小脚本换 src。旧的 .cd-art--l/--d 规则留着,选地区页 / 同类推荐还在用 ===== */ html[data-theme="dark"] .cd-tile__art img.cd-art[data-v="d"]{filter:none} /* 首页分类区:先放前 12 个,其余在