/* task-136-93 W4 預覽（/tools/etsy-shop-analyzer 免帳號預覽）：站上既有 token 與元件<b>逐字</b>抽出（⛔ 手改，要改先改來源再重抽；
   抽法同 W6 public-photo-check.css）。只在店分析那一頁載入（⛔ 整支載 ls-ui.css／ls-research.css：那兩支帶 rail／body 全站樣式）。
   ⛔ 新造顏色：最後一段 sp-* 只有版面（寬度、間距、斷點），顏色一律吃上面的 token。 */
/* ── verbatim from static/css/ls-ui.css (tokens) ── */
:root{
--warn-bg:oklch(0.965 0.06 88);--warn-bg2:oklch(0.99 0.025 88);--warn-text:oklch(0.42 0.12 70);--warn-border:oklch(0.88 0.10 87);--warn-accent:oklch(0.74 0.16 85);
--bad-bg:oklch(0.975 0.025 25);--bad-bg2:oklch(0.99 0.010 25);--bad-text:oklch(0.50 0.18 25);--bad-border:oklch(0.88 0.06 25);--bad-accent:oklch(0.62 0.22 25);
--good-bg:oklch(0.97 0.04 155);--good-bg2:oklch(0.99 0.018 155);--good-text:oklch(0.42 0.12 155);--good-text-soft:oklch(0.55 0.10 155);--good-border:oklch(0.86 0.08 155);--good-accent:oklch(0.62 0.18 155);
--code-bg:oklch(0.96 0.06 65);--code-text:oklch(0.45 0.13 50);--code-border:oklch(0.88 0.10 65);
--accent:#D97757;--page:#FAF9F5;--card:#fff;--card-2:#fbfaf8;--card-bd:rgb(226 232 240);--rail:#fff;--ink:#0f172a;--muted:#64748b;--faint:#94a3b8;--hair:#f1f5f9}
html.dark{
--warn-bg:oklch(0.32 0.08 75 / 0.35);--warn-bg2:oklch(0.28 0.04 75 / 0.12);--warn-text:oklch(0.82 0.13 88);--warn-border:oklch(0.45 0.12 80 / 0.5);--warn-accent:oklch(0.74 0.16 85);
--bad-bg:oklch(0.32 0.10 25 / 0.30);--bad-bg2:oklch(0.28 0.06 25 / 0.10);--bad-text:oklch(0.75 0.15 25);--bad-border:oklch(0.45 0.15 25 / 0.5);--bad-accent:oklch(0.65 0.22 25);
--good-bg:oklch(0.30 0.08 155 / 0.28);--good-bg2:oklch(0.26 0.04 155 / 0.10);--good-text:oklch(0.78 0.13 155);--good-text-soft:oklch(0.65 0.10 155);--good-border:oklch(0.42 0.12 155 / 0.5);--good-accent:oklch(0.66 0.16 155);
--code-bg:oklch(0.30 0.08 65 / 0.28);--code-text:oklch(0.80 0.13 70);--code-border:oklch(0.45 0.12 65 / 0.5);
--page:#0b1c30;--card:#0f2438;--card-2:#0d2033;--card-bd:#1e3a52;--rail:#081627;--ink:#f8fafc;--muted:#94a3b8;--faint:#64748b;--hair:#16304a}
/* ── verbatim from static/css/ls-ui.css ── */
.material-symbols-outlined{font-variation-settings:'FILL' 1}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.lbl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.mono-chip{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:11px;line-height:1;padding:4px 8px;border-radius:9999px;border:1px solid;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.mono-chip .material-symbols-outlined{font-size:12px}
.chip-neutral{background:var(--hair);color:var(--muted);border-color:var(--card-bd)}
.card{background:var(--card);border:1px solid var(--card-bd);border-radius:16px}
html.dark .card{box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 36px -16px rgba(0,0,0,.5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Work Sans';font-weight:600;font-size:13.5px;padding:10px 17px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s ease,border-color .15s ease}
.btn:active{transform:scale(.97)}
.btn .material-symbols-outlined{font-size:17px}
.btn-cta{background:#D97757;color:#FAF9F5;box-shadow:0 1px 3px rgba(180,90,30,.35),0 2px 6px rgba(180,90,30,.2),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-cta:hover{background:#c56a48;color:#FAF9F5}
/* task-136-93（Claude Design 次要鈕 B＋Wayne 9/25「畫面變得很白…白色以外不能用我們本來的淺色底嗎」）：次要鈕底色
   --card → 暖白 --page（既有 token，淺 #FAF9F5／深 #0b1c30）；邊框／字色／hover 不動。 */
.btn-ghost{background:var(--page);border-color:var(--card-bd);color:var(--ink)}
.btn-ghost:hover{border-color:var(--faint);color:var(--ink)}
.btn-sm{font-size:12.5px;padding:8px 13px;border-radius:10px}
.btn-sm .material-symbols-outlined{font-size:15px}
.striped{background-image:repeating-linear-gradient(45deg,color-mix(in oklch,var(--muted) 18%,transparent) 0 4px,transparent 4px 9px);background-color:var(--card-2)}
.thumb{border-radius:9px;border:1px solid var(--card-bd);display:grid;place-items:center;overflow:hidden}
.thumb span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:8px;letter-spacing:.06em;color:var(--faint)}
.thumb>img{width:100%;height:100%;object-fit:cover;display:block}
/* ── verbatim from static/css/ls-research.css（完整報告 #st-shop 同一組） ── */
.vtrue{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px 2px 5px;border-radius:5px;background:var(--good-bg);color:var(--good-text);border:1px solid var(--good-border)}
.vtrue .material-symbols-outlined{font-size:11px}
.est{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px 2px 5px;border-radius:5px;background:var(--warn-bg2);color:var(--warn-text);border:1px dashed var(--warn-border)}
.est .material-symbols-outlined{font-size:11px}
.qbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-radius:14px;border:1px solid var(--card-bd);background:var(--card-2)}
.qbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px oklch(0.72 0.11 45 / .18)}
.qbar input{flex:1;min-width:180px;background:transparent;border:0;outline:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:15px;color:var(--ink)}
.qbar input::placeholder{color:var(--faint)}
.qbar>.material-symbols-outlined{font-size:20px;color:var(--faint)}
.stat{background:var(--card);border:1px solid var(--card-bd);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:9px}
.stathead{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.statnum{font-family:'Work Sans';font-weight:700;font-size:29px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.statsub{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0;text-wrap:pretty}
.trank{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--faint)}
.spin{animation:lsspin 1s linear infinite}
@keyframes lsspin{to{transform:rotate(360deg)}}
.skel{border-radius:9px;background:linear-gradient(90deg,var(--hair) 0%,color-mix(in oklch,var(--muted) 14%,transparent) 50%,var(--hair) 100%);background-size:200% 100%;animation:lssk 1.3s linear infinite}
@keyframes lssk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.notebox{border:1px dashed var(--card-bd);border-radius:13px;background:var(--card-2);padding:13px 15px;display:flex;gap:12px;align-items:flex-start}
.notebox p{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0;text-wrap:pretty}
.notebox .material-symbols-outlined{font-size:18px;color:var(--faint);flex-shrink:0}
.thumb .material-symbols-outlined{font-family:'Material Symbols Outlined';font-size:22px;letter-spacing:normal}
.sa-stat4{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.sa-statnum-sm{font-family:'Work Sans';font-weight:600;font-size:15px;color:var(--muted);margin-left:4px}
.sa-starsym{color:var(--warn-accent);font-size:22px;margin-left:3px}
.sa-cardhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 15px;border-bottom:1px solid var(--card-bd);background:var(--card-2)}
.sa-cardhead h3{font-family:'Work Sans';font-weight:600;font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:8px}
.sa-cardhead h3 .material-symbols-outlined{font-size:18px;color:var(--accent)}
.sa-lhead,.sa-lrow{display:grid;grid-template-columns:28px minmax(0,1fr) 78px 92px 92px 104px 124px;gap:11px;align-items:center;padding:10px 15px}
.sa-lhead{border-bottom:1px solid var(--card-bd)}
.sa-lrow{border-bottom:1px solid var(--hair)}
.sa-lrow:hover{background:color-mix(in oklch,var(--muted) 5%,transparent)}
.sa-num{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--ink);text-align:right}
.sa-lhead .lbl.r{text-align:right}
.sa-lt{display:flex;align-items:center;gap:10px;min-width:0}
.sa-lt .thumb{width:38px;height:38px;flex-shrink:0}
.sa-lt a{font-size:13px;color:var(--ink);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sa-sort{display:inline-flex;align-items:center;justify-content:flex-end;gap:2px;width:100%;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);background:none;border:0;padding:0;cursor:pointer}
.sa-sort .material-symbols-outlined{font-size:14px}
.sa-sort.on{color:var(--ink)}
.sa-estv{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;width:100%}
.sa-estv .sa-num{color:var(--warn-text)}
.sa-cl{display:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-right:5px;font-style:normal}
.btn[disabled]{opacity:.5;cursor:not-allowed}
@media(max-width:1180px){.sa-stat4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sa-stat4{grid-template-columns:1fr}}
@media(max-width:1080px){
  .sa-lhead{display:none}
  .sa-lrow{grid-template-columns:28px repeat(2,minmax(0,1fr));grid-template-areas:"r t t" ". p v" ". f a" ". e e";row-gap:6px}
  .sa-lrow>*:nth-child(1){grid-area:r}.sa-lrow>*:nth-child(2){grid-area:t}.sa-lrow>*:nth-child(3){grid-area:p}.sa-lrow>*:nth-child(4){grid-area:v}.sa-lrow>*:nth-child(5){grid-area:f}.sa-lrow>*:nth-child(6){grid-area:a}.sa-lrow>*:nth-child(7){grid-area:e}
  .sa-num{text-align:left}.sa-estv{justify-content:flex-start}.sa-cl{display:inline}
}
/* ── 預覽自己的版面（稿 Shop Analyzer Page.dc.html：工具區 960 寬、輸入卡 16 內距 14 間距；⛔ 顏色） ── */
.sp-wrap{max-width:960px;margin:0 auto}
.sp-box{padding:16px;display:flex;flex-direction:column;gap:14px}
.sp-stack{display:flex;flex-direction:column;gap:14px}
.sp-foot{display:flex;flex-direction:column;gap:10px;padding:12px 0 16px}
.qbar.sp-bad{border-color:var(--bad-border)}
.sp-bad-text{color:var(--bad-text)}
.sp-faint{color:var(--faint)}
.sp-muted{color:var(--muted)}
.sp-ink{color:var(--ink)}
/* 店網址那一條連結＝完整報告同色（token --accent）。⛔ 抄 ls-research 那條 :where(#st-shop) a:not(.btn)：它會把鎖定卡
   <a class="btn-cta"> 的字也塗成 accent（＝底色，字看不見；第一輪截圖實證）。 */
.sp-link{color:var(--accent)}
.sp-shown{text-align:right;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--faint);margin:0 15px}
@media(max-width:1080px){.sp-sortnote{display:none}}
/* 稿 390：Analyse shop 自己一整行（btnFlex 1 1 100%）。 */
@media(max-width:560px){#sp-qbar .btn{flex:1 1 100%}}