*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--brand:#2C64F7;--brand-dark:#1a52e0;--brand-light:rgba(44,100,247,.15);--accent:#3b82f6;--text:#f0eeff;--muted:#9b8ec4;--border:rgba(255,255,255,.10);--bg:#0d0b1e;--surface:#1a1535;--surface2:#231d47;--white:#fff;--error:#f87171;--error-bg:rgba(248,113,113,.12);--warn:#fbbf24;--warn-bg:rgba(251,191,36,.12);--success:#34d399;--success-bg:rgba(52,211,153,.12);--radius:6px;--shadow:0 4px 20px rgba(0,0,0,.5)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
header{background:linear-gradient(135deg,#1a1535 0%,#0f0c26 100%);border-bottom:1px solid var(--border);padding:0 20px;height:60px;display:flex;align-items:center;gap:16px;flex-shrink:0;box-shadow:0 2px 20px rgba(0,0,0,.4);z-index:10}
.logo{display:flex;align-items:center;height:40px;flex-shrink:0;gap:10px}
.logo-link{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo-link img{height:38px;width:38px;object-fit:cover;border-radius:7px}
.logo-sub{font-size:15px;font-weight:700;background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.3px;white-space:nowrap;padding-left:10px;border-left:1px solid rgba(255,255,255,.15)}
.url-bar{flex:1;display:flex;gap:8px;align-items:center}
.url-bar input[type=url]{flex:1;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);background:var(--surface2);transition:border-color .15s}
.url-bar input[type=url]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(44,100,247,.25)}
.url-bar input[type=url]::placeholder{color:var(--muted)}
.btn{height:36px;padding:0 16px;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,opacity .15s;white-space:nowrap;touch-action:manipulation}
.btn-primary{background:var(--brand);color:var(--white)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:transparent;color:#6b9fff;border:1px solid rgba(44,100,247,.4)}
.btn-ghost:hover{background:var(--brand-light);border-color:#6b9fff}
.btn-sm{height:28px;padding:0 10px;font-size:12px}
.toolbar{background:var(--surface);border-bottom:1px solid var(--border);padding:6px 20px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.toolbar-top{justify-content:space-between;flex-wrap:nowrap}
.toolbar-devices{align-items:stretch;gap:0;padding:0}
.seo-heading{font-size:17px;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;margin:0}
.seo-heading strong{color:var(--text);font-weight:700}
.device-col-label{display:flex;align-items:center;justify-content:center;padding:8px 18px;border-right:1px solid var(--border);flex-shrink:0}
.device-row-label{font-size:13px;font-weight:700;color:#2C64F7;letter-spacing:0.2px;text-align:center;line-height:1.5}
.device-col-presets{display:flex;flex-direction:column;padding:8px 20px;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch}
.device-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 32px;width:100%}
.device-section{display:flex;flex-direction:column;gap:5px;padding:4px 0}
.device-section .toolbar-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.device-section .preset-group{display:flex;gap:4px;flex-wrap:wrap}
@media(max-width:860px){.device-grid{gap:5px 16px}.device-col-label{padding:6px 12px}.device-col-presets{padding:6px 12px}}
@media(max-width:600px){.toolbar-devices{flex-wrap:wrap}.device-col-label{width:100%;border-right:none;border-bottom:1px solid var(--border);padding:6px 14px;justify-content:flex-start}.device-grid{grid-template-columns:1fr 1fr;gap:4px 10px}.device-col-presets{padding:6px 10px}.preset-btn{padding:0 8px;font-size:10px;height:32px}}
.site-footer{background:linear-gradient(135deg,#1a1535 0%,#0f0c26 100%);border-top:1px solid var(--border);padding:14px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.footer-logo-link img{height:36px;width:36px;object-fit:cover;border-radius:6px;opacity:.85;transition:opacity .15s}
.footer-logo-link:hover img{opacity:1}
.footer-links{display:flex;gap:20px;align-items:center}
.footer-links a{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);text-decoration:none;transition:color .15s}
.footer-links a:hover{color:var(--text)}
.footer-copy{font-size:10px;color:rgba(155,142,196,.5);letter-spacing:.3px}
.toolbar-section{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.toolbar-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);white-space:nowrap}
.preset-group{display:flex;gap:3px;flex-wrap:wrap}
.preset-btn{height:34px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);font-size:11px;cursor:pointer;color:var(--text);transition:all .12s;white-space:nowrap;line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.preset-btn .sz{font-size:9px;color:var(--muted);display:block}
.preset-btn:hover{border-color:#6b9fff;color:#6b9fff;background:var(--brand-light)}
.preset-btn:hover .sz{color:#6b9fff}
.preset-btn.active{background:var(--brand);color:var(--white);border-color:var(--brand)}
.preset-btn.active .sz{color:rgba(255,255,255,.7)}
.group-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:0 2px;opacity:.7}
.divider{width:1px;height:28px;background:var(--border);margin:0 6px;flex-shrink:0}
.custom-size{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.custom-size input[type=number]{width:58px;height:30px;padding:0 6px;border:1px solid var(--border);border-radius:var(--radius);font-size:12px;text-align:center;background:var(--surface2);color:var(--text)}
.custom-size input[type=number]:focus{outline:none;border-color:var(--brand)}
.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.mode-toggle{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.mode-btn{height:30px;padding:0 12px;border:none;background:var(--surface2);font-size:12px;cursor:pointer;color:var(--muted);transition:all .12s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mode-btn.active{background:var(--brand);color:var(--white)}
.mode-btn:not(.active):hover{background:var(--brand-light);color:#6b9fff}
.canvas{flex:1;overflow:auto;padding:24px;display:flex;gap:24px;align-items:flex-start;justify-content:center;background:radial-gradient(ellipse at 50% 0%,rgba(44,100,247,.08) 0%,transparent 60%)}
.viewport-panel{display:flex;flex-direction:column;align-items:center;gap:10px}
.viewport-label{font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px}
.rotate-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 2px;line-height:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .12s,transform .2s}
.rotate-btn:hover{color:var(--text);transform:rotate(180deg)}
.status-badge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;display:none}
.status-badge.blocked{background:var(--error-bg);color:var(--error);display:inline-block}
.status-badge.warning{background:var(--warn-bg);color:var(--warn);display:inline-block}
.status-badge.ok{background:var(--success-bg);color:var(--success);display:inline-block}
.frame-wrapper{background:var(--surface);border-radius:var(--radius);box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(44,100,247,.15);overflow:hidden;position:relative;flex-shrink:0}
.device-chrome{background:#12102a;padding:10px 12px 8px;border-radius:var(--radius) var(--radius) 0 0;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border)}
.dot{width:10px;height:10px;border-radius:50%}
.dot-r{background:#ff5f57}
.dot-y{background:#ffbd2e}
.dot-g{background:#28c840}
.device-bar{flex:1;background:#2a2650;border-radius:3px;height:18px}
.iframe-container{position:relative;overflow:hidden;background:var(--white)}
.iframe-container iframe{border:none;display:block;transform-origin:top left}
.error-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:var(--surface);padding:32px;text-align:center;gap:12px}
.error-overlay.visible{display:flex}
.error-icon{font-size:36px}
.error-title{font-size:15px;font-weight:700;color:var(--text)}
.error-desc{font-size:13px;color:var(--muted);line-height:1.5;max-width:280px}
.error-code{font-family:monospace;font-size:12px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:6px 10px;color:var(--error)}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted);text-align:center}
.empty-state .big-icon{font-size:56px;opacity:.3}
.empty-state h2{font-size:20px;color:var(--text)}
.empty-state p{font-size:14px;max-width:320px;line-height:1.6}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--surface2);color:var(--text);border:1px solid rgba(44,100,247,.3);padding:10px 20px;border-radius:30px;font-size:13px;font-weight:600;box-shadow:var(--shadow);transition:transform .25s ease;z-index:100;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}
.canvas::-webkit-scrollbar{width:8px;height:8px}
.canvas::-webkit-scrollbar-track{background:transparent}
.canvas::-webkit-scrollbar-thumb{background:#2a2650;border-radius:4px}
.canvas::-webkit-scrollbar-thumb:hover{background:var(--brand)}