/* site/assets/css/oem-studio.css —— OEM「试试你的品牌」（R7 T2）：面板控件 + 模型上的 logo 挂点。面板只用逻辑属性；模型固定 LTR（r3b.css） */
/* 初始化成功（html.czs-on）才显示工作室；否则（无 JS / 脚本被拦）只显示一句「附上 logo 询价」 */
.czstudio{display:none;margin-block-start:var(--sp-4);padding-block-start:var(--sp-4);border-block-start:1px solid var(--line)}
.czs-on .czstudio{display:block}.czs-on .czs-nojs{display:none}
.czs-nojs{margin:var(--sp-3) 0 0;font-size:var(--fs-0);color:#5E646B}
.czstudio h4{margin:0 0 4px;font-size:var(--fs-2);font-weight:700;text-transform:none;letter-spacing:0;color:var(--navy)}
.czs-p{margin:0 0 var(--sp-3);font-size:var(--fs-0);color:#5E646B;max-inline-size:52ch}
.czs-mode{margin-block-end:var(--sp-2)}
.czstudio:not([data-mode=name]) [data-pane=name],.czstudio[data-mode=name] [data-pane=logo]{display:none}
/* 上传区：铜色虚线 = 模型铭牌上的「印刷区」虚线；拖文件经过时铭牌虚线跟着走动（见下方 [data-drop]） */
.czs-drop{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1.5px dashed var(--gold);border-radius:var(--r-2);background:var(--sky);cursor:pointer;transition:background-color .2s}
.czs-drop:hover,.czs-drop.over{background:#fff;border-style:solid}
.czs-drop:focus-within{outline:2px solid var(--navy);outline-offset:2px}
.czs-drop b{display:block;font-size:var(--fs-1);color:var(--navy);text-wrap:balance}
.czs-drop small{display:block;margin-block-start:2px;font-size:var(--fs-0);color:#5E646B}
.czs-ic{flex:0 0 48px;inline-size:48px;block-size:36px;fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.czs-ic .czs-up{stroke:var(--gold);stroke-width:2}
.czs-bar{display:none;inline-size:100%;block-size:4px;margin-block-start:var(--sp-1);accent-color:var(--navy)}
.czstudio[aria-busy=true] .czs-bar{display:block}
/* 已上传：缩略图放在棋盘格上，看得出透明与去背景的结果 */
.czs-file{display:none;flex-wrap:wrap;align-items:center;gap:10px;margin-block-start:var(--sp-2)}
.czstudio[data-has=logo] .czs-file{display:flex}
.czs-thumb{flex:0 0 auto;inline-size:76px;block-size:46px;border:1px solid var(--line);border-radius:var(--r-1);background:var(--img,none) center/contain no-repeat,repeating-conic-gradient(#E7E7E5 0 25%,#fff 0 50%) 0 0/10px 10px}
.czs-fname{flex:1 1 8em;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-0);font-weight:600;color:var(--navy);text-align:left}
[dir=rtl] .czs-fname{text-align:right}  /* 文件名 dir=auto（内容方向随文件名），对齐按页面方向贴着缩略图：阿语页里拉丁文件名也靠右 */
/* 品牌名与字形 */
.czs-field{display:grid;gap:6px;font-size:var(--fs-0);font-weight:600;color:var(--navy)}
.czs-field input{font:inherit;font-size:var(--fs-1);padding:10px 12px;border:1px solid #8E949B;border-radius:var(--r-1);background:#fff;color:var(--ink)}
[dir=rtl] .czs-field input:placeholder-shown{direction:rtl}
.czs-glyphs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-block-start:var(--sp-2)}
.czs-glyphs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;font:inherit;font-size:var(--fs-0);font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:var(--r-1);cursor:pointer}
.czs-glyphs span{font-size:1.375rem;font-weight:800;line-height:1.15}
.czs-glyphs [data-glyph-set=wide] span{font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.czs-glyphs [data-glyph-set=serif] span{font-family:Georgia,"Times New Roman",serif;font-weight:700}
.czs-glyphs button:hover{border-color:var(--navy)}
.czs-glyphs button[aria-pressed=true]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:var(--sky)}
/* 状态、说明、操作：在面板外（各标签都可用）；有品牌后操作行代替原「获取报价」按钮 */
.czs-out{display:none}.czs-on .czs-out{display:block}
.czs-status{min-block-size:1.5em;margin:var(--sp-2) 0 0;font-size:var(--fs-0);color:var(--navy)}
.czs-status.err{color:#DC2626;font-weight:600}
.czs-note{display:none;margin:4px 0 0;font-size:var(--fs-0);color:#5E646B}
.cz[data-brand=logo] .czs-note{display:block}
.czs-act{display:none;flex-wrap:wrap;gap:8px;margin-block-start:var(--sp-3)}
.cz[data-brand] .czs-act{display:flex}.czs-on .cz[data-brand] .czcta{display:none}
.czs-act .czs-reset{border-color:transparent;text-decoration:underline;text-underline-offset:3px}
.czs-priv{margin:var(--sp-2) 0 0;font-size:var(--fs-0);color:#5E646B}
@media (min-width:901px){.czs-on .czstage{position:sticky;inset-block-start:92px}
.czmodel .ill svg{transform-origin:50% 95%;transition:transform .5s ease}
.czmodel[data-brand][data-active=cz-logo]:is([data-layers="1"],[data-layers="2"],[data-layers="3"]) .ill svg{transform:scale(1.2)}}   /* 有品牌时在 Logo 标签里拉近一点看 logo */
.czs-hint{margin:calc(-1 * var(--sp-2)) 0 var(--sp-3);padding-inline-start:10px;border-inline-start:2px solid var(--gold);font-size:var(--fs-0);color:var(--navy)}.czs-hint:empty{display:none}
/* 模型：有品牌时收起示例字、印刷区虚线与彩盒占位框 */
.czmodel[data-brand=logo] .m-name,.czmodel[data-brand] .m-ph,.czmodel[data-brand] .czhl{display:none}
.czmodel[data-drop] .czhl{display:inline;stroke-width:2;animation:czants .9s linear infinite}
@keyframes czants{to{stroke-dashoffset:-14}}
.czstage.over{box-shadow:inset 0 0 0 2px var(--gold)}
/* App 启动页：切到「固件与 App」时先显示品牌启动页，约 1.5 秒后淡出到仪表盘 */
.czmodel .m-splash{opacity:0;visibility:hidden}
.czmodel .m-splash text{font-size:16px}
.czmodel[data-brand][data-active=cz-app] .m-splash{animation:czsplash 2.6s ease .2s both}
@keyframes czsplash{0%,55%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
/* 品牌名：三种字形；阿语不加字距（会拆开连写） */
.czmodel[data-brand=name] :is(.m-name,.m-etch){font-family:var(--font);font-weight:800;letter-spacing:.02em}
.czmodel[data-glyph=wide] :is(.m-name,.m-etch){font-weight:600;letter-spacing:.2em}
.czmodel[data-glyph=serif] :is(.m-name,.m-etch){font-family:Georgia,"Times New Roman","Noto Serif SC","Songti SC",serif;font-weight:700;letter-spacing:.03em}
.czmodel :is(.m-name,.m-etch)[direction=rtl]{letter-spacing:0}
@media (prefers-reduced-motion:reduce){.czmodel[data-brand][data-active=cz-app] .m-splash,.czmodel[data-drop] .czhl{animation:none}.czs-drop,.czmodel .ill svg{transition:none}}