/* cwidget.css —— 自定义小组件 + 主题工坊 */

/* ---------- 组件本体：系统给 .hw 加的底色/边框/阴影/内边距全清掉，视觉交给内部图层 ---------- */
:is(#desktop,#cwPrev,.cw-cardprev) .hw.hw-custom{
  position:relative;display:block;padding:0!important;min-height:0!important;margin:0;
  background:transparent!important;border:none!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  overflow:visible!important;border-radius:0!important;cursor:pointer;width:auto;
  /* 文字属性放在根上，这样用户写 & {color:red;font-size:30px} 也能生效 */
  color:var(--cw-tc,#fff);font-size:var(--cw-fs,20px);font-weight:var(--cw-fw,500);line-height:var(--cw-lh,1.3);
  letter-spacing:var(--cw-ls,0);font-family:var(--cw-ff,inherit);text-align:var(--cw-ta,center);text-shadow:var(--cw-tsh,none);
}
.hw-custom .cw-rot{position:absolute;inset:0;transform:rotate(var(--cw-rot,0deg));opacity:var(--cw-op,1);pointer-events:none}
.hw-custom .cw-fill{position:absolute;inset:0;background:var(--cw-bg,transparent);opacity:var(--cw-fillop,1);
  border-radius:var(--cw-radius,22px);box-shadow:var(--cw-shadow,none);
  backdrop-filter:var(--cw-bf,none);-webkit-backdrop-filter:var(--cw-bf,none);
  -webkit-mask:var(--cw-mask,none);mask:var(--cw-mask,none)}
.hw-custom .cw-line{position:absolute;inset:0;box-sizing:border-box;border-radius:var(--cw-radius,22px);border:var(--cw-bw,0px) var(--cw-bs,solid) var(--cw-bc,transparent)}
.hw-custom .cw-linesvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hw-custom .cw-sh{position:absolute;inset:0;transform:translate(var(--cw-shx,0),var(--cw-shy,0));filter:blur(var(--cw-shb,0px))}
.hw-custom .cw-sh i{position:absolute;inset:0;background:var(--cw-shc,#000);-webkit-mask:var(--cw-mask,none);mask:var(--cw-mask,none)}
.hw-custom .cw-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:var(--cw-va,center);align-items:var(--cw-al,center);
  padding:var(--cw-pad,12px);overflow:hidden;word-break:break-word;color:inherit;font:inherit;text-align:inherit;text-shadow:inherit;letter-spacing:inherit}
.hw-custom .cw-text{max-width:100%;width:100%;color:inherit}
.hw-custom .cw-text a{color:inherit}
.hw-custom .cw-text img{max-width:100%;height:auto}
/* 编辑状态下的 ✕ / 设计 按钮要浮在图层上面 */
#desktop .hw-custom .hm-x,#desktop .hw-custom .hm-sz{z-index:5}

/* ---------- 编辑面板 ---------- */
.cw-sheet{padding-bottom:20px}
.cw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cw-head b{font-size:16px;color:var(--text-main)}
.cw-pb{display:flex;gap:4px}
.cw-pb button{border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-main);border-radius:999px;padding:3px 10px;font-size:11px;cursor:pointer}
.cw-pb button.on{background:var(--theme-color);color:var(--on-accent);border-color:transparent}
.cw-prevwrap{position:sticky;top:-16px;z-index:30;background:var(--bg-color);padding:6px 0 8px;margin:0 0 8px;border-bottom:1px solid var(--border-color)}
.cw-prevgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;padding:12px 10px;border-radius:16px;min-height:80px;align-content:start;background-size:cover;background-position:center}
.cw-prevgrid.bg-wall,.cw-cardprev.bg-wall{background:linear-gradient(135deg,#d9c7dc,#f2c4cf 52%,#bfd0e2)}
.cw-prevgrid.bg-light{background:#f4f1f2}
.cw-prevgrid.bg-dark{background:#26232b}
.cw-tabs{margin-bottom:8px}
.cw-sec{margin-top:16px;font-weight:600}
.cw-r{display:flex;align-items:center;gap:10px;margin:8px 2px;font-size:13px;color:var(--text-main)}
.cw-r>span{flex:none;min-width:84px;color:var(--text-sub)}
.cw-r input[type=range]{flex:1;min-width:80px}
.cw-r em{flex:none;min-width:46px;text-align:right;font-style:normal;font-size:12px;color:var(--text-sub)}
.cw-r input[type=color]{width:38px;height:30px;border:1px solid var(--border-color);border-radius:8px;padding:0;background:none}
.cw-r.col{flex-direction:column;align-items:stretch;gap:4px}
.cw-r.col>span{min-width:0}
.cw-r input[type=text],.cw-r select,.cw-imgrow input[type=text]{width:100%;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-main);border-radius:10px;padding:8px 10px;font-size:13px;font-family:inherit;outline:none}
.cw-r select{flex:1}
.cw-ta{width:100%;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-main);border-radius:12px;padding:10px;font-size:13px;line-height:1.5;font-family:inherit;resize:vertical;outline:none;box-sizing:border-box;margin:4px 0}
.cw-code{font-family:Consolas,Menlo,monospace;font-size:12px}
.cw-imgrow{display:flex;gap:8px;align-items:center;margin:6px 0;flex-wrap:wrap}
.cw-imgrow input[type=text]{flex:1;min-width:120px}
.cw-imgrow button,.cd-chip .pri-b{border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-main);border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer}
.cd-chip .pri-b{background:var(--theme-color);color:var(--on-accent);border-color:transparent}
.cw-chips{margin:4px 0 8px}
.cw-vars button{padding:5px 10px;font-size:12px}
.cw-sheet code,.st-note code{background:rgba(128,128,128,.16);border-radius:5px;padding:1px 5px;font-size:11.5px}
.cw-chk{font-size:13px;color:var(--text-main);display:flex;align-items:center;gap:6px}

/* 模板画廊 */
.cw-gal{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 10px}
.cw-card{border:1px solid var(--border-color);background:var(--card-bg);border-radius:14px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:0}
.cw-card b{font-size:12px;font-weight:500;color:var(--text-main);text-align:center}
.cw-card:active{transform:scale(.97)}
.cw-cardprev{border-radius:10px;padding:10px;min-height:70px;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}
.cw-cardprev .hw.hw-custom{width:100%!important;pointer-events:none}
.cw-tabs button{padding:7px 4px;font-size:12.5px;white-space:nowrap}
.cw-card.blank .cw-cardprev{background:rgba(128,128,128,.1);border:1.5px dashed var(--border-color);font-size:28px;color:var(--text-sub)}

/* 主题工坊 */
.cw-snip{display:flex;align-items:center;gap:8px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:14px;padding:8px 10px;margin-bottom:8px}
.cw-snip .nm{flex:1;min-width:0;display:flex;flex-direction:column}
.cw-snip .nm b{font-size:14px;font-weight:500;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-snip .nm small{font-size:11px;color:var(--text-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-snip button{border:1px solid var(--border-color);background:transparent;color:var(--text-main);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer}
.cw-var{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px;color:var(--text-main)}
.cw-var>span{flex:1;min-width:0;display:flex;flex-direction:column}
.cw-var small{font-size:10px;color:var(--text-sub)}
.cw-var input[type=range]{width:90px}
.cw-var input[type=color]{width:38px;height:28px;border:1px solid var(--border-color);border-radius:8px;padding:0;background:none}
.cw-var em{font-style:normal;font-size:11px;color:var(--text-sub);min-width:34px}
.cw-var i{font-style:normal;font-size:10px;color:var(--theme-color);min-width:24px}
.cw-var button{border:none;background:transparent;font-size:16px;color:var(--text-sub);cursor:pointer}
.cw-var code{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-ch{display:flex;gap:8px;align-items:center;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:8px 10px;margin-bottom:8px}
.cw-ch>div{flex:1;min-width:0}
.cw-ch b{font-size:13px;font-weight:500;color:var(--text-main)}
.cw-ch pre{margin:4px 0 0;font-size:10.5px;line-height:1.4;color:var(--text-sub);white-space:pre-wrap;word-break:break-all;max-height:64px;overflow:hidden;font-family:Consolas,Menlo,monospace}
.cw-ch button{flex:none;border:none;background:var(--theme-color);color:var(--on-accent);border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer}

/* ---------- 让「背后模糊」真的生效 ----------
   1) 「流畅模式」（旧手机会自动开）会把全站的毛玻璃一刀切关掉，连自己在设计器里明明调了的模糊也被吃掉。
      这个组件的模糊是用户专门设的，所以不受流畅模式影响（没设模糊的组件本来就没有，不增加负担）。
   2) 设了「整体透明度」时，整组降透明度会让浏览器把整个组件当成独立图层，模糊就看不到后面的壁纸了。
      这种情况改成每一层各自降透明度（cw-lay，由 cwidget.js 在「有模糊 + 透明度<100」时加上）。 */
html.lowfx .hw-custom .cw-fill { backdrop-filter: var(--cw-bf, none) !important; -webkit-backdrop-filter: var(--cw-bf, none) !important; }
.hw-custom.cw-lay .cw-rot { opacity: 1; }
.hw-custom.cw-lay .cw-fill { opacity: calc(var(--cw-fillop, 1) * var(--cw-op, 1)); }
.hw-custom.cw-lay .cw-line, .hw-custom.cw-lay .cw-linesvg, .hw-custom.cw-lay .cw-sh, .hw-custom.cw-lay .cw-body { opacity: var(--cw-op, 1); }