.tool-screen-tester { color: var(--fg); max-width: 1100px; margin: 0 auto; }
.tool-screen-tester *, .tool-screen-tester *::before, .tool-screen-tester *::after { box-sizing: border-box; }
.tool-screen-tester [hidden] { display: none !important; }

.tool-screen-tester .st-info { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 12px; }
.tool-screen-tester .st-chip { font-size: .85rem; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); }
.tool-screen-tester .st-chip b { color: var(--fg); font-weight: 600; margin-right: 4px; }

.tool-screen-tester .st-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tool-screen-tester .st-tab { font: inherit; font-weight: 600; padding: 10px 14px; min-height: 44px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); border-radius: var(--radius); cursor: pointer; }
.tool-screen-tester .st-tab.is-on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.tool-screen-tester button:focus-visible, .tool-screen-tester input:focus-visible, .tool-screen-tester select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tool-screen-tester .st-pane { display: flex; flex-direction: column; gap: 12px; }
.tool-screen-tester .st-pane[hidden] { display: none; }
.tool-screen-tester .st-lead { margin: 0; }
.tool-screen-tester .st-note { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); font-size: .9rem; color: var(--muted); }
.tool-screen-tester .st-muted { color: var(--muted); font-size: .88rem; }

.tool-screen-tester .st-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.tool-screen-tester .st-controls { align-items: flex-end; }
.tool-screen-tester .st-f { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; font-weight: 600; color: var(--muted); min-width: 0; }
.tool-screen-tester .st-f select, .tool-screen-tester .st-f input[type=color] { font: inherit; font-weight: 400; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; min-height: 44px; max-width: 100%; }
.tool-screen-tester .st-f input[type=color] { width: 64px; padding: 3px; }
.tool-screen-tester .st-range { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; color: var(--fg); }
.tool-screen-tester .st-range input { width: 200px; max-width: 50vw; accent-color: var(--accent); }
.tool-screen-tester .st-range output { min-width: 72px; font-variant-numeric: tabular-nums; }
.tool-screen-tester .st-chk { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.tool-screen-tester .st-chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.tool-screen-tester .st-act { font: inherit; font-weight: 600; padding: 10px 16px; min-height: 44px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); border-radius: var(--radius); cursor: pointer; }
.tool-screen-tester .st-act:hover { border-color: var(--accent); }
.tool-screen-tester .st-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.tool-screen-tester .st-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tool-screen-tester .st-sw { height: 64px; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; display: flex; align-items: flex-end; padding: 0; overflow: hidden; }
.tool-screen-tester .st-sw span { display: block; width: 100%; padding: 2px 4px; font-size: .75rem; font-weight: 600; background: rgba(0, 0, 0, .55); color: #fff; text-align: center; }
.tool-screen-tester .st-sw:hover { border-color: var(--accent); }

.tool-screen-tester .st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.tool-screen-tester .st-stats-sm { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.tool-screen-tester .st-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.tool-screen-tester .st-stat-l { font-size: .78rem; color: var(--muted); font-weight: 600; }
.tool-screen-tester .st-stat-v { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tool-screen-tester .st-stat-big { border-color: var(--accent); }

.tool-screen-tester .st-graphwrap { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: 6px; overflow: hidden; }
.tool-screen-tester .st-graphwrap canvas { width: 100%; height: 200px; display: block; }
.tool-screen-tester .st-bar { position: absolute; left: 6px; bottom: 6px; width: 6px; height: 14px; background: var(--accent); border-radius: 2px; will-change: transform; }

.tool-screen-tester .st-motion, .tool-screen-tester .st-band { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #000; line-height: 0; }
.tool-screen-tester .st-motion canvas, .tool-screen-tester .st-band canvas { display: block; max-width: none; }
.tool-screen-tester .st-motion:fullscreen, .tool-screen-tester .st-band:fullscreen { border: 0; border-radius: 0; width: 100vw; height: 100vh; }

.tool-screen-tester .st-sample { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; --s-bg: #fff; --s-fg: #000; background: var(--s-bg); color: var(--s-fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.tool-screen-tester .st-sample[data-theme="dark"] { --s-bg: #000; --s-fg: #fff; }
.tool-screen-tester .st-sample[data-theme="blue"] { --s-bg: #0a2fa8; --s-fg: #ffe600; }
.tool-screen-tester .st-sample[data-theme="color"] { --s-bg: #12a844; --s-fg: #ff1e1e; }
.tool-screen-tester .st-sample[data-font="serif"] { font-family: Georgia, "Times New Roman", serif; }
.tool-screen-tester .st-sample[data-font="mono"] { font-family: Consolas, "Courier New", monospace; }
.tool-screen-tester .st-sample p { margin: 0 0 6px; line-height: 1.35; overflow-wrap: anywhere; }
.tool-screen-tester .st-patterns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.tool-screen-tester .st-patterns figure { margin: 0; }
.tool-screen-tester .st-patterns figcaption { font-size: .82rem; color: var(--muted); margin-top: 4px; }
.tool-screen-tester .st-pat { height: 90px; border: 1px solid var(--border); background-color: #fff; }
.tool-screen-tester .st-pat-vlines { background-image: repeating-linear-gradient(90deg, #000 0, #000 1px, #fff 1px, #fff 2px); }
.tool-screen-tester .st-pat-hlines { background-image: repeating-linear-gradient(0deg, #000 0, #000 1px, #fff 1px, #fff 2px); }
.tool-screen-tester .st-pat-check { background-image: conic-gradient(#000 25%, #fff 0 50%, #000 0 75%, #fff 0); background-size: 2px 2px; }
.tool-screen-tester .st-pat-grid { background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); background-size: 8px 8px; }