/* screen-test 螢幕測試工具: 佈局形態源自 case-converter(cc-), 前綴 st-; 主欄 + 300px 右欄 widget */
.st-page{background:#f6f7f9;min-height:60vh;padding:24px 0 64px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang TC","Microsoft JhengHei",sans-serif;color:#1f2937}
.st-layout{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr;gap:22px}
.st-col-main{min-width:0;display:flex;flex-direction:column}
.st-col-side{display:flex;flex-direction:column;gap:16px}
@media (min-width:996px){
.st-layout{grid-template-columns:minmax(0,1fr) 300px}
}
/* 麵包屑 / 標題 */
.st-crumb{font-size:13px;color:#6b7280;margin-bottom:12px}
.st-crumb a{color:#6b7280;text-decoration:none}
.st-crumb a:hover{color:#18816a}
.st-crumb-sep{margin:0 7px;color:#d1d5db}
.st-titlebox h1{font-size:1.35rem;font-weight:700;margin:0 0 6px;color:#111827}
.st-titlebox p{font-size:.85rem;color:#6b7280;margin:0 0 18px;line-height:1.6}
/* 工具大卡 */
.st-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:18px}
.st-toolcard{padding:16px 18px 20px}
.st-modes{display:inline-flex;gap:4px;background:#f6f7f9;border:1px solid #e5e7eb;border-radius:10px;padding:4px;margin-bottom:16px}
.st-mode{border:none;background:none;color:#6b7280;border-radius:7px;padding:7px 16px;font-size:13.5px;cursor:pointer}
.st-mode:hover{color:#18816a}
.st-mode-on{background:#18816a;color:#fff;font-weight:600}
.st-pane{padding-top:2px}
/* 通用按鈕 */
.st-btn{border:1px solid #d1d5db;background:#fff;color:#374151;border-radius:8px;padding:10px 18px;font-size:14px;cursor:pointer}
.st-btn:hover{border-color:#18816a;color:#18816a}
.st-btn[disabled]{opacity:.45;cursor:not-allowed}
.st-btn-primary{background:#18816a;border:1px solid #18816a;color:#fff;font-weight:600;border-radius:8px;padding:10px 18px;font-size:14px;cursor:pointer}
.st-btn-primary:hover{background:#116a56}
.st-btn-primary.big{padding:12px 20px;font-size:15px;box-shadow:0 1px 3px rgba(24,129,106,.35)}
/* ===== 模式一：快速測試 ===== */
.st-cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 16px}
.st-cta-hint{font-size:12.5px;color:#9ca3af}
.st-board-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 12px}
.st-board-head h2{font-size:1.05rem;font-weight:700;color:#111827;margin:0}
.st-board-hint{font-size:.74rem;color:#9ca3af}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.st-tile{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;cursor:pointer;transition:all .15s;text-align:left;padding:0}
.st-tile:hover{border-color:#18816a;box-shadow:0 2px 10px rgba(24,129,106,.12)}
.st-tile-swatch{height:72px;border-bottom:1px solid #e5e7eb;box-shadow:inset 0 0 0 1px #c3cbd8}
.st-tile-body{padding:10px 12px 12px}
.st-tile-name{font-size:14px;font-weight:600;color:#111827;margin:0 0 3px}
.st-tile-desc{font-size:12px;color:#9ca3af;margin:0;line-height:1.5;min-height:36px}
/* ===== 模式二：驗機向導 ===== */
.st-scenes{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.st-chip{border:1px solid #e5e7eb;background:#fff;color:#374151;border-radius:999px;padding:8px 16px;font-size:13.5px;cursor:pointer}
.st-chip:hover{border-color:#6ee7b7}
.st-chip-on{background:#f0faf7;border-color:#18816a;color:#116a56;font-weight:600}
.st-main{margin-bottom:4px}
.st-progress{display:flex;gap:6px;margin-bottom:18px}
.st-progress i{flex:1;height:6px;border-radius:3px;background:#e5e7eb;min-width:8px}
.st-progress i.done{background:#10b981}
.st-progress i.now{background:#18816a}
.st-steptag{display:inline-block;font-size:12px;color:#116a56;background:#f0faf7;border-radius:5px;padding:2px 9px;font-weight:600;margin-bottom:10px}
.st-step h2{font-size:19px;margin:0 0 6px;font-weight:700;color:#111827}
.st-step .st-look{font-size:13.5px;color:#374151;line-height:1.8;margin:0 0 8px}
.st-step .st-look b{color:#111827}
.st-tips{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:10px 14px;font-size:12.5px;color:#92400e;line-height:1.7;margin:10px 0 14px}
.st-launch-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px}
.st-launch-hint{font-size:12px;color:#9ca3af}
.st-mark{display:flex;gap:10px;margin-top:14px}
.st-mark button{flex:1;border-radius:8px;padding:11px 0;font-size:14px;cursor:pointer;border:1px solid #e5e7eb;background:#fff}
.st-mark .ok:hover,.st-mark .ok.on{background:#ecfdf5;border-color:#10b981;color:#065f46;font-weight:600}
.st-mark .bad:hover,.st-mark .bad.on{background:#fef2f2;border-color:#ef4444;color:#991b1b;font-weight:600}
.st-mark-note{font-size:12px;color:#9ca3af;margin-top:8px}
.st-verdict{border-radius:10px;padding:16px 18px;margin-bottom:14px;line-height:1.8;font-size:14px}
.st-verdict.good{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.st-verdict.warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.st-verdict.bad{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.st-verdict b{font-size:15px}
.st-sumlist{list-style:none;margin:0 0 6px;padding:0}
.st-sumlist li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #f0f1f3;padding:9px 2px;font-size:13.5px}
.st-sumlist li:last-child{border-bottom:none}
.st-r{font-weight:600}
.st-r.ok{color:#059669}.st-r.bad{color:#dc2626}.st-r.na{color:#9ca3af}
.st-navbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #f0f1f3;margin-top:18px;padding-top:16px}
.st-nav-hint{font-size:12px;color:#9ca3af}
/* ===== 模式三：專業控制檯（淺色，同頁面風格） ===== */
.st-console{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start}
@media(max-width:760px){.st-console{grid-template-columns:1fr}}
.st-pnav{background:#f8fafc;border:1px solid #e5e7eb;border-radius:11px;padding:10px;position:sticky;top:76px}
.st-nav-group{font-size:11px;color:#9ca3af;letter-spacing:.12em;margin:12px 8px 5px}
.st-nav-group:first-child{margin-top:4px}
.st-pnav button{display:flex;justify-content:space-between;width:100%;background:none;border:none;color:#374151;font-size:13px;padding:8px 10px;border-radius:7px;cursor:pointer;text-align:left}
.st-pnav button:hover{background:#fff;color:#111827}
.st-pnav button.on{background:#18816a;color:#fff;font-weight:600}
.st-pnav button small{color:#9ca3af;font-size:11px}
.st-pnav button.on small{color:#d1fae5}
.st-panel{background:#fff;border:1px solid #e5e7eb;border-radius:11px;padding:20px}
.st-panel-head h2{font-size:18px;margin:0 0 6px;font-weight:700;color:#111827}
.st-panel-head p{font-size:13px;color:#6b7280;margin:0 0 16px;line-height:1.7}
.st-params{display:flex;flex-direction:column;gap:14px}
.st-param label{display:block;font-size:12px;color:#6b7280;margin-bottom:7px}
.st-swatches{display:flex;gap:8px;flex-wrap:wrap}
.st-sw{width:44px;height:44px;border-radius:8px;border:2px solid #c3cbd8;cursor:pointer;padding:0}
.st-sw.on{border-color:#18816a;box-shadow:0 0 0 2px rgba(24,129,106,.35)}
.st-seg{display:inline-flex;border:1px solid #d1d5db;border-radius:8px;overflow:hidden}
.st-seg button{background:#fff;border:none;color:#6b7280;font-size:12.5px;padding:7px 14px;cursor:pointer}
.st-seg button.on{background:#18816a;color:#fff;font-weight:600}
.st-range{width:100%;max-width:320px;accent-color:#18816a}
.st-rangeval{font-variant-numeric:tabular-nums;color:#374151}
.st-param-note{font-size:11.5px;color:#9ca3af;margin-top:5px;line-height:1.6}
.st-launch{display:flex;align-items:center;gap:14px;border-top:1px solid #f0f1f3;margin-top:18px;padding-top:16px}
/* ===== 文檔區 ===== */
.st-doc{margin-top:28px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:24px}
.st-doc h3{font-size:1.05rem;font-weight:700;margin:0 0 14px;color:#111827}
.st-doc h3+h3{margin-top:24px}
.st-steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:6px}
.st-step3{display:flex;gap:10px;align-items:flex-start}
.st-step3>b{flex:none;width:26px;height:26px;border-radius:50%;background:#18816a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;margin-top:2px}
.st-step3 h4{font-size:14px;margin:0 0 4px;color:#111827}
.st-step3 p{font-size:12.5px;color:#6b7280;margin:0;line-height:1.6}
.st-hot{color:#dc2626}.st-dead{color:#18816a}
.st-tablewrap{overflow-x:auto}
.st-table{width:100%;border-collapse:collapse;font-size:13px}
.st-table th,.st-table td{border-bottom:1px solid #f0f1f3;padding:9px 10px;text-align:left;vertical-align:top}
.st-table th{color:#6b7280;font-weight:600;white-space:nowrap}
/* ===== FAQ ===== */
.st-faqbox{margin-top:16px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:24px}
.st-faqbox h3{font-size:1.05rem;font-weight:700;margin:0 0 12px;color:#111827}
.st-faq{border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc;padding:0 16px;margin-bottom:10px}
.st-faq:last-child{margin-bottom:0}
.st-faq summary{cursor:pointer;font-weight:500;font-size:.95rem;color:#111827;padding:13px 8px 13px 24px;list-style:none;position:relative}
.st-faq summary::marker,.st-faq summary::-webkit-details-marker{content:none;display:none}
.st-faq summary::before{
    content:"";position:absolute;left:5px;top:50%;
    width:7px;height:7px;margin-top:-4.5px;
    border-right:2px solid #6b7280;border-bottom:2px solid #6b7280;
    transform:rotate(-45deg);transition:transform .15s;
}
.st-faq[open] summary::before{transform:rotate(45deg)}
.st-faq p{font-size:.88rem;color:#4b5563;line-height:1.65;margin:0;padding:0 8px 13px 24px}
/* ===== 右欄 widget ===== */
.st-widget{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px}
.st-widget-title{font-size:.95rem;font-weight:700;color:#111827;margin:0 0 12px}
.st-side-note{font-size:.76rem;color:#9ca3af;margin:10px 0 0;line-height:1.5}
.st-sysinfo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-sysinfo span{background:#f6f7f9;border:1px solid #f0f1f3;border-radius:8px;padding:8px 10px;font-size:11px;color:#9ca3af;line-height:1.5}
.st-sysinfo b{display:block;font-size:13.5px;color:#111827;margin-top:2px;font-variant-numeric:tabular-nums;word-break:break-all}
.st-side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.st-side-list li{display:flex;gap:10px;align-items:flex-start}
.st-side-list b{display:block;font-size:.86rem;font-weight:600;color:#111827}
.st-side-list li>div>span{display:block;font-size:.76rem;color:#6b7280;margin-top:2px;line-height:1.5}
.st-side-ico{
    flex:none;width:28px;height:28px;border-radius:7px;margin-top:1px;
    background:#f0faf7;color:#116a56;font-weight:700;font-size:.8rem;
    display:flex;align-items:center;justify-content:center;
}
.st-side-ico-bright{background:#fef3c7;color:#b45309}
.st-side-ico-clean{background:#eef2ff;color:#4338ca}
.st-side-ico-time{background:#fce7f3;color:#be185d}
.st-tool-link{
    display:flex;align-items:center;gap:10px;padding:8px 6px;margin:0 -6px;
    border-radius:9px;text-decoration:none;transition:background .15s;
}
.st-tool-link:hover{background:rgba(0,0,0,.05)}
.st-tool-link b{display:block;font-size:.86rem;color:#111827;font-weight:600}
.st-tool-link div>span{display:block;font-size:.76rem;color:#6b7280;margin-top:1px}
.st-tool-ico{
    flex:none;width:32px;height:32px;border-radius:8px;
    background:rgba(24,129,106,.1);color:#116a56;font-weight:700;font-size:.86rem;
    display:flex;align-items:center;justify-content:center;
}
.st-tool-ico-wc{background:#fef3c7;color:#b45309}
.st-tool-ico-zh{background:#eef2ff;color:#4338ca}
.st-widget-priv{background:#ecfdf5;border-color:#a7f3d0}
.st-widget-priv b{font-size:.86rem;color:#065f46}
.st-widget-priv p{font-size:.78rem;color:#047857;line-height:1.65;margin:6px 0 0}
/* ===== 統一全螢幕層 ===== */
.st-overlay{display:none;position:fixed;inset:0;z-index:9999;background:#000}
.st-overlay.st-on{display:block}
.st-stage{position:absolute;inset:0}
.st-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 64px 14px 20px;background:linear-gradient(rgba(0,0,0,.55),transparent);color:#fff;font-size:13px;opacity:1;transition:opacity .5s;pointer-events:none}
.st-hud.st-fade{opacity:0}
.st-hud-name{font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.st-hud-keys{font-size:12px;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.st-exit{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:15px;cursor:pointer}
.st-exit:hover{background:rgba(255,255,255,.32)}
.st-corner{position:absolute;width:56px;height:56px;pointer-events:none}
.st-corner::before,.st-corner::after{content:"";position:absolute;background:rgba(255,255,255,.4)}
.st-corner::before{width:100%;height:1px}
.st-corner::after{width:1px;height:100%}
.st-corner.tl{top:16px;left:16px}.st-corner.tr{top:16px;right:16px;transform:scaleX(-1)}
.st-corner.bl{bottom:16px;left:16px;transform:scaleY(-1)}.st-corner.br{bottom:16px;right:16px;transform:scale(-1)}
.st-graysteps{position:absolute;inset:0;display:grid}
.st-graysteps i{display:block}
.st-grad{position:absolute;inset:0}
.st-textsample{position:absolute;inset:0;background:#fff;color:#111;padding:7vh 8vw;display:flex;flex-direction:column;gap:2.2vh;overflow:hidden}
.st-textsample p{margin:0;line-height:1.5;color:#111}
.st-textsample .bg2{background:#111;color:#fff;padding:8px 12px;border-radius:6px}
.st-textsample.dark{background:#111}
.st-textsample.dark p{color:#eee}
.st-cdcheck{position:absolute;inset:0;display:grid;place-items:center}
.st-cdrect{width:34vmin;height:34vmin;border-radius:4px}
.st-smear{position:absolute;inset:0;overflow:hidden}
.st-smear i{position:absolute;width:11vmin;height:11vmin;background:#fff;border-radius:2px;top:50%;margin-top:-5.5vmin}
.st-touchgrid{position:absolute;inset:0;background:#111827}
.st-touchgrid canvas{position:absolute;inset:0;width:100%;height:100%}
.st-touchtip{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#9ca3af;font-size:13px;pointer-events:none;text-shadow:0 1px 2px #000}
/* ===== 響應式 ===== */
@media (max-width:760px){
.st-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
.st-grid{grid-template-columns:1fr}
}