.screenshot-workspace{--ss-accent:#136fb7;--ss-accent-dark:#0d568e;--ss-green:#16845a;--ss-red:#c43848;--ss-amber:#a96812;--ss-text:#10243a;--ss-muted:#61748a;--ss-border:#d5e0eb;--ss-panel:#fff;--ss-soft:#f3f7fb;border:1px solid var(--ss-border);border-radius:8px;background:var(--ss-panel);box-shadow:0 16px 38px rgba(25,53,83,.09);overflow:hidden}.screenshot-workspace [hidden]{display:none!important}.screenshot-workspace button,.screenshot-workspace input,.screenshot-workspace select{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.screenshot-grid{display:grid;grid-template-columns:minmax(360px,38%) minmax(0,62%);min-height:720px}.screenshot-input-panel,.screenshot-output-panel{min-width:0;background:var(--ss-panel)}.screenshot-input-panel{border-right:1px solid var(--ss-border)}
.screenshot-panel-head{height:55px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--ss-border);background:#f8fbfd;color:var(--ss-text);font-size:.8rem;font-weight:850}.screenshot-panel-head>span{display:flex;align-items:center;gap:8px}.screenshot-panel-head>span i{color:var(--ss-accent);font-size:.95rem}.screenshot-panel-head button{min-height:32px;padding:0 10px;border:1px solid #b8cadb;border-radius:4px;background:#fff;color:#185d96;font-size:.65rem;font-weight:800;cursor:pointer}.screenshot-panel-head button:hover{border-color:#6397c1;background:#edf6fd}.screenshot-head-actions{display:flex;gap:5px}.screenshot-head-actions button{display:inline-flex;align-items:center;gap:5px}
.screenshot-input-body{padding:17px;display:flex;flex-direction:column;gap:12px}.screenshot-input-body>label{color:var(--ss-text);font-size:.72rem;font-weight:850}.screenshot-url-control{min-height:49px;padding:0 7px 0 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;border:1px solid #acbfd2;border-radius:5px;background:#fff;transition:border-color .18s,box-shadow .18s}.screenshot-url-control:focus-within{border-color:#347fc0;box-shadow:0 0 0 3px rgba(19,111,183,.12)}.screenshot-url-control[data-tone="valid"]{border-color:#25986b;box-shadow:0 0 0 3px rgba(37,152,107,.08)}.screenshot-url-control[data-tone="invalid"]{border-color:#d33a4a;box-shadow:0 0 0 3px rgba(211,58,74,.08)}.screenshot-url-control>i{color:#6e849a}.screenshot-url-control input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ss-text);font-size:.76rem;font-weight:650}.screenshot-url-control button{width:34px;height:34px;border:1px solid #d3e0eb;border-radius:4px;background:#eef5fa;color:#355f83;cursor:pointer}.screenshot-url-control button:hover{border-color:#8fb3d1;background:#deedf8;color:#0f609f}.screenshot-help{margin:-4px 0 0;color:var(--ss-muted);font-size:.61rem;line-height:1.45}.screenshot-url-control[data-tone="valid"]+.screenshot-help{color:#14734e}.screenshot-url-control[data-tone="invalid"]+.screenshot-help{color:#b92536}
.screenshot-fieldset{min-width:0;margin:0;padding:0;border:0}.screenshot-fieldset legend{margin-bottom:7px;padding:0;color:var(--ss-text);font-size:.67rem;font-weight:850}.screenshot-device-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.screenshot-device-grid button{min-width:0;min-height:58px;padding:7px 4px;border:1px solid #c7d5e2;border-radius:4px;background:#f8fafc;color:#506a83;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}.screenshot-device-grid button:hover{border-color:#779fc2;background:#eef7fd;color:#1a669e}.screenshot-device-grid button.is-active{border-color:#267abe;background:#e8f4fd;color:#0a5d9e;box-shadow:0 0 0 2px rgba(38,122,190,.08)}.screenshot-device-grid button>i{font-size:.8rem}.screenshot-device-grid button>span{min-width:0;font-size:.56rem;font-weight:850;line-height:1.2}.screenshot-device-grid button small{margin-top:3px;display:block;color:#74899e;font-size:.46rem;font-weight:700;white-space:nowrap}.screenshot-custom-size{margin-top:8px;padding:9px;border:1px solid #d3e0ea;border-radius:4px;background:#f7fafc;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.screenshot-custom-size>span{color:#8495a7;font-weight:800}.screenshot-custom-size label{color:var(--ss-muted);font-size:.57rem;font-weight:800}.screenshot-custom-size input{width:100%;height:34px;margin-top:4px;padding:0 8px;border:1px solid #b8c9d9;border-radius:4px;background:#fff;color:var(--ss-text);font-size:.68rem;font-weight:750}.screenshot-custom-size small{display:block;margin-top:3px;font-size:.49rem;font-weight:600}
.screenshot-control-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.screenshot-segment{padding:3px;display:grid;grid-template-columns:1fr 1fr;border:1px solid #c6d4e1;border-radius:5px;background:#edf3f7}.screenshot-segment button{min-height:32px;border:1px solid transparent;border-radius:3px;background:transparent;color:#5b7187;font-size:.62rem;font-weight:800;cursor:pointer}.screenshot-segment button:hover{color:#165f98}.screenshot-segment button.is-active{border-color:#adc4d8;background:#fff;color:#0e619f;box-shadow:0 2px 7px rgba(30,66,98,.09)}
.screenshot-quality{padding:10px;border:1px solid #d3dfe9;border-radius:5px;background:#f8fafc}.screenshot-quality label,.screenshot-quality>div{display:flex;align-items:center;justify-content:space-between;color:var(--ss-muted);font-size:.57rem;font-weight:700}.screenshot-quality label strong{color:var(--ss-text);font-size:.63rem}.screenshot-quality input{width:100%;margin:9px 0 4px;accent-color:var(--ss-accent)}.screenshot-quality>div{font-size:.48rem}
.screenshot-select-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.screenshot-select-row label,.screenshot-advanced-grid>label{color:var(--ss-text);font-size:.62rem;font-weight:800}.screenshot-select-row select,.screenshot-advanced-grid select{width:100%;height:37px;margin-top:5px;padding:0 28px 0 9px;border:1px solid #b9cad9;border-radius:4px;background:#fff;color:var(--ss-text);font-size:.62rem;font-weight:700;cursor:pointer}
.screenshot-advanced{border:1px solid #d0dde8;border-radius:5px;background:#fafcfe;overflow:hidden}.screenshot-advanced summary{min-height:40px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#3f607c;font-size:.63rem;font-weight:850;cursor:pointer;list-style:none}.screenshot-advanced summary::-webkit-details-marker{display:none}.screenshot-advanced summary span{display:flex;align-items:center;gap:7px}.screenshot-advanced[open] summary{border-bottom:1px solid #d7e1ea;background:#f2f7fb}.screenshot-advanced[open] summary>i{transform:rotate(180deg)}.screenshot-advanced-grid{padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.screenshot-switch{grid-column:1/-1;min-height:48px;padding:8px 9px;border:1px solid #d1dde7;border-radius:4px;background:#fff;display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:9px;cursor:pointer}.screenshot-switch input{position:absolute;opacity:0;pointer-events:none}.screenshot-switch>span{width:34px;height:19px;padding:2px;border-radius:12px;background:#aab9c7;transition:background .18s}.screenshot-switch>span:before{content:"";display:block;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}.screenshot-switch input:checked+span{background:#1976b9}.screenshot-switch input:checked+span:before{transform:translateX(15px)}.screenshot-switch strong,.screenshot-switch small{display:block}.screenshot-switch strong{color:var(--ss-text);font-size:.61rem}.screenshot-switch small{margin-top:2px;color:var(--ss-muted);font-size:.52rem}.screenshot-switch.is-muted{opacity:.52;cursor:not-allowed}
.screenshot-primary{min-height:45px;border:1px solid #0b578e;border-radius:4px;background:linear-gradient(135deg,var(--ss-accent),var(--ss-accent-dark));box-shadow:0 9px 22px rgba(19,99,161,.2);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.77rem;font-weight:850;cursor:pointer}.screenshot-primary:hover{filter:brightness(.97);transform:translateY(-1px)}.screenshot-primary:disabled{opacity:.65;cursor:wait;transform:none}.screenshot-primary.is-loading i{animation:screenshot-camera 1s ease-in-out infinite}@keyframes screenshot-camera{50%{transform:scale(1.18);opacity:.72}}
.screenshot-safety{padding:10px;border-left:3px solid #247aad;background:#eef7fb;color:#285f7e;display:flex;align-items:flex-start;gap:9px}.screenshot-safety>i{margin-top:2px}.screenshot-safety p{margin:0}.screenshot-safety strong,.screenshot-safety span{display:block}.screenshot-safety strong{font-size:.64rem}.screenshot-safety span{margin-top:2px;font-size:.56rem;line-height:1.48}
.screenshot-empty,.screenshot-loading,.screenshot-error{min-height:665px;padding:30px;display:grid;place-items:center;align-content:center;text-align:center;background:linear-gradient(145deg,#fbfdff,#edf4f9)}.screenshot-empty-icon{width:76px;height:68px;border:1px solid #b8d5eb;border-radius:10px;background:#eaf6ff;color:var(--ss-accent);display:grid;place-items:center;font-size:1.75rem;box-shadow:0 9px 24px rgba(28,79,119,.08)}.screenshot-empty h2,.screenshot-loading h2,.screenshot-error h2{margin:14px 0 5px;color:var(--ss-text);font-size:1rem}.screenshot-empty p,.screenshot-loading p,.screenshot-error p{max-width:470px;margin:0;color:var(--ss-muted);font-size:.71rem;line-height:1.55}.screenshot-empty>div:last-child{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.screenshot-empty>div:last-child span{padding:5px 8px;border:1px solid #c9d8e4;border-radius:3px;background:#fff;color:#526d86;font-size:.56rem;font-weight:800}
.screenshot-loader{position:relative;width:76px;height:76px;display:grid;place-items:center;color:var(--ss-accent);font-size:1.3rem}.screenshot-loader span{position:absolute;inset:0;border:3px solid #cde0ee;border-top-color:var(--ss-accent);border-radius:50%;animation:screenshot-spin 1s linear infinite}@keyframes screenshot-spin{to{transform:rotate(360deg)}}.screenshot-loading-steps{width:180px;margin:17px auto 9px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.screenshot-loading-steps span{height:4px;border-radius:3px;background:#ccd9e4}.screenshot-loading-steps span.is-active{background:var(--ss-accent)}.screenshot-loading small{color:#7b8fa2;font-size:.54rem}
.screenshot-error>i{width:66px;height:60px;border:1px solid #e0aeb5;border-radius:9px;background:#fff0f2;color:var(--ss-red);display:grid;place-items:center;font-size:1.45rem}.screenshot-error button{min-height:35px;margin-top:16px;padding:0 12px;border:1px solid #b8c9d9;border-radius:4px;background:#fff;color:#315f83;font-size:.63rem;font-weight:800;cursor:pointer}.screenshot-error button:hover{border-color:#6e98ba;background:#edf6fc}
.screenshot-result{background:#fff}.screenshot-result-bar{min-height:112px;padding:15px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:15px;background:linear-gradient(135deg,#0e2032,#163d5d);color:#fff}.screenshot-result-identity{min-width:0}.screenshot-result-identity>span{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid #2d7a5e;border-radius:3px;background:#123e2e;color:#a6e5c8;font-size:.52rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.screenshot-result-identity h2{margin:9px 0 4px;color:#fff!important;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screenshot-result-identity a{display:block;color:#acd4ef;font-size:.57rem;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screenshot-result-identity a:hover{text-decoration:underline}.screenshot-result-size{min-width:155px;padding:10px 12px;border:1px solid #456b88;border-radius:5px;background:rgba(255,255,255,.06);text-align:right}.screenshot-result-size strong,.screenshot-result-size span{display:block}.screenshot-result-size strong{color:#8dd3ff;font-size:.8rem}.screenshot-result-size span{margin-top:4px;color:#c7ddeb;font-size:.57rem}
.screenshot-metadata{margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--ss-border);background:#f7fafc}.screenshot-metadata>div{min-width:0;padding:9px 10px}.screenshot-metadata>div+div{border-left:1px solid var(--ss-border)}.screenshot-metadata dt{color:var(--ss-muted);font-size:.49rem;font-weight:850;text-transform:uppercase;letter-spacing:.035em}.screenshot-metadata dd{margin:4px 0 0;color:var(--ss-text);font-size:.59rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screenshot-metadata dd[data-tone="success"]{color:#14734e}.screenshot-metadata dd[data-tone="warning"]{color:#a15e0d}
.screenshot-preview-toolbar{min-height:43px;padding:0 11px;border-bottom:1px solid var(--ss-border);background:#eef3f7;display:flex;align-items:center;justify-content:space-between;gap:10px}.screenshot-preview-toolbar>span{color:var(--ss-text);font-size:.61rem;font-weight:850}.screenshot-preview-toolbar>div{padding:2px;display:flex;gap:2px;border:1px solid #c5d3df;border-radius:4px;background:#dfe8ef}.screenshot-preview-toolbar button{min-height:26px;padding:0 8px;border:1px solid transparent;border-radius:3px;background:transparent;color:#576f85;font-size:.54rem;font-weight:800;cursor:pointer}.screenshot-preview-toolbar button.is-active{border-color:#afc2d2;background:#fff;color:#0d619f}.screenshot-preview-frame{height:520px;padding:18px;overflow:auto;background-color:#dfe7ed;background-image:linear-gradient(45deg,rgba(255,255,255,.6) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.6) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.6) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.6) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.screenshot-preview-frame img{display:block;height:auto;margin:0 auto;background:#fff;box-shadow:0 8px 25px rgba(17,40,61,.2)}.screenshot-preview-frame[data-zoom="fit"] img{width:auto!important;max-width:100%}.screenshot-preview-frame:not([data-zoom="fit"]) img{max-width:none}.screenshot-result-note{margin:0;padding:9px 12px;border-top:1px solid var(--ss-border);background:#f8fafc;color:var(--ss-muted);display:flex;align-items:flex-start;gap:7px;font-size:.55rem;line-height:1.45}.screenshot-result-note i{margin-top:2px;color:#3c789f}
.screenshot-footer{min-height:56px;padding:9px 12px;border-top:1px solid var(--ss-border);background:#f8fafc;display:flex;align-items:center;justify-content:space-between;gap:12px}.screenshot-footer .tool-station-status{color:var(--ss-muted);font-size:.66rem;font-weight:750}.screenshot-footer .tool-station-status[data-tone="success"]{color:#107149}.screenshot-footer .tool-station-status[data-tone="working"]{color:#176fae}.screenshot-footer .tool-station-status[data-tone="error"]{color:#bd2638}.screenshot-reset{min-height:34px;padding:0 11px;border:1px solid #b8cadb;border-radius:4px;background:#fff;color:#3e607f;display:inline-flex;align-items:center;gap:6px;font-size:.64rem;font-weight:800;cursor:pointer}.screenshot-reset:hover{border-color:#6f9abd;background:#edf6fc}
body.theme-dark .screenshot-workspace{--ss-text:#e8f0f8;--ss-muted:#96a9bc;--ss-border:#2b4057;--ss-panel:#101b29;--ss-soft:#152336;background:#101b29;box-shadow:none}body.theme-dark .screenshot-panel-head,body.theme-dark .screenshot-footer,body.theme-dark .screenshot-preview-toolbar{border-color:#30475f;background:#132136;color:#dceaf6}body.theme-dark .screenshot-panel-head button,body.theme-dark .screenshot-url-control,body.theme-dark .screenshot-url-control button,body.theme-dark .screenshot-segment button.is-active,body.theme-dark .screenshot-custom-size input,body.theme-dark .screenshot-select-row select,body.theme-dark .screenshot-advanced-grid select,body.theme-dark .screenshot-switch,body.theme-dark .screenshot-error button,body.theme-dark .screenshot-preview-toolbar button.is-active,body.theme-dark .screenshot-reset{border-color:#38516b;background:#17283a;color:#d7e8f6}body.theme-dark .screenshot-url-control input{color:#f0f6fc}body.theme-dark .screenshot-help{color:#91a5ba}body.theme-dark .screenshot-device-grid button{border-color:#354b62;background:#142334;color:#adc0d3}body.theme-dark .screenshot-device-grid button.is-active{border-color:#428dca;background:#153452;color:#b8ddf6}body.theme-dark .screenshot-custom-size,body.theme-dark .screenshot-quality,body.theme-dark .screenshot-advanced{border-color:#30465d;background:#132235}body.theme-dark .screenshot-segment{border-color:#354a60;background:#0e1926}body.theme-dark .screenshot-advanced[open] summary{border-color:#30465d;background:#15283b}body.theme-dark .screenshot-safety{background:#142c3d;color:#afd6ee}body.theme-dark .screenshot-empty,body.theme-dark .screenshot-loading,body.theme-dark .screenshot-error{background:linear-gradient(145deg,#101b29,#152437)}body.theme-dark .screenshot-empty-icon{border-color:#315a78;background:#142b40}body.theme-dark .screenshot-empty>div:last-child span{border-color:#354a61;background:#182739;color:#b2c3d4}body.theme-dark .screenshot-error>i{border-color:#6b3741;background:#2d1820}body.theme-dark .screenshot-result{background:#101b29}body.theme-dark .screenshot-metadata,body.theme-dark .screenshot-result-note{background:#132135}body.theme-dark .screenshot-preview-toolbar>div{border-color:#344b62;background:#0f1b29}body.theme-dark .screenshot-preview-frame{background-color:#182635;background-image:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.035) 75%)}
@media(max-width:1080px){.screenshot-grid{grid-template-columns:minmax(330px,42%) minmax(0,58%)}.screenshot-device-grid{grid-template-columns:repeat(3,1fr)}.screenshot-metadata{grid-template-columns:repeat(3,1fr)}.screenshot-metadata>div:nth-child(4){border-left:0;border-top:1px solid var(--ss-border)}.screenshot-metadata>div:nth-child(5){border-top:1px solid var(--ss-border)}}
@media(max-width:860px){.screenshot-grid{grid-template-columns:1fr}.screenshot-input-panel{border-right:0;border-bottom:1px solid var(--ss-border)}.screenshot-empty,.screenshot-loading,.screenshot-error{min-height:390px}.screenshot-preview-frame{height:480px}.screenshot-footer{align-items:flex-start;flex-direction:column}.screenshot-reset{width:100%;justify-content:center}}
@media(max-width:560px){.screenshot-input-body{padding:13px}.screenshot-panel-head{padding:0 12px}.screenshot-head-actions button{font-size:0;padding:0 9px}.screenshot-head-actions button i{font-size:.68rem}.screenshot-device-grid{grid-template-columns:repeat(2,1fr)}.screenshot-device-grid button:last-child{grid-column:1/-1}.screenshot-control-row,.screenshot-select-row,.screenshot-advanced-grid{grid-template-columns:1fr}.screenshot-switch{grid-column:auto}.screenshot-result-bar{grid-template-columns:1fr;padding:13px}.screenshot-result-size{text-align:left;min-width:0}.screenshot-metadata{grid-template-columns:1fr 1fr}.screenshot-metadata>div:nth-child(3),.screenshot-metadata>div:nth-child(5){border-left:0}.screenshot-metadata>div:nth-child(3){border-top:1px solid var(--ss-border)}.screenshot-preview-toolbar{align-items:flex-start;flex-direction:column;padding:8px 10px}.screenshot-preview-frame{height:400px;padding:10px}.screenshot-footer{padding:9px}}