*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--clr-bg: #12121e;--clr-surface: #1e1e30;--clr-surface-2: #252538;--clr-border: #30304a;--clr-accent: #7c6af8;--clr-accent-h: #6a5ae0;--clr-text: #d8d8f0;--clr-text-muted: #7070a0;--clr-danger: #e05353;--clr-sync-on: #4ade80;--clr-sync-off: #facc15;--header-h: 52px;--toolbar-h: 42px;--bottom-scrollbar-h: 14px;--frame-h: calc(100vh - var(--header-h) - var(--toolbar-h) - var(--bottom-scrollbar-h));--radius: 6px;--radius-s: 4px}html,body{height:100%;overflow:hidden;background:var(--clr-bg);color:var(--clr-text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.4}#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-header{flex-shrink:0;height:var(--header-h);background:var(--clr-surface);border-bottom:1px solid var(--clr-border);display:flex;align-items:center;padding:0 16px;gap:12px}.app-logo{font-size:15px;font-weight:700;color:var(--clr-accent);letter-spacing:.03em;white-space:nowrap;flex-shrink:0}.url-form{display:flex;align-items:center;gap:8px;flex:1;min-width:0}#url-input{flex:1;min-width:0;padding:6px 12px;background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius);color:var(--clr-text);font-size:14px;outline:none;transition:border-color .15s}#url-input:focus{border-color:var(--clr-accent)}#url-input::placeholder{color:var(--clr-text-muted)}.btn{flex-shrink:0;padding:6px 14px;border:none;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}.btn-primary{background:var(--clr-accent);color:#fff}.btn-primary:hover{background:var(--clr-accent-h)}.btn-secondary{background:transparent;color:var(--clr-text);border:1px solid var(--clr-border)}.btn-secondary:hover{border-color:var(--clr-accent);color:var(--clr-accent)}.sync-status{flex-shrink:0;font-size:11px;padding:3px 8px;border-radius:20px;white-space:nowrap;border:1px solid transparent;transition:all .2s}.sync-status:empty{display:none}.sync-on{color:var(--clr-sync-on);border-color:var(--clr-sync-on)}.sync-partial{color:var(--clr-sync-off);border-color:var(--clr-sync-off)}.sync-off{color:var(--clr-text-muted);border-color:var(--clr-border)}#viewports-container{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;gap:.3rem;background:var(--clr-border);min-height:0}.bottom-scrollbar{flex-shrink:0;height:var(--bottom-scrollbar-h);overflow-x:auto;overflow-y:hidden;background:var(--clr-surface);border-top:1px solid var(--clr-border)}.bottom-scrollbar.hidden{display:none}.bottom-scrollbar-content{height:1px}.viewport-wrapper{display:flex;flex-direction:column;flex-shrink:0;background:var(--clr-bg)}.viewport-toolbar{flex-shrink:0;height:var(--toolbar-h);display:flex;align-items:center;gap:6px;padding:0 8px;background:var(--clr-surface-2);border-bottom:1px solid var(--clr-border)}.viewport-select{padding:4px 6px;background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius-s);color:var(--clr-text);font-size:13px;cursor:pointer;outline:none;transition:border-color .15s}.viewport-select:focus{border-color:var(--clr-accent)}.custom-inputs{display:flex;align-items:center;gap:4px}.custom-w,.custom-h{width:58px;padding:3px 6px;background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius-s);color:var(--clr-text);font-size:12px;text-align:center;outline:none;transition:border-color .15s}.custom-w:focus,.custom-h:focus{border-color:var(--clr-accent)}.custom-x{color:var(--clr-text-muted);font-size:12px}.size-label{flex:1;font-size:11px;color:var(--clr-text-muted);text-align:right;white-space:nowrap}.sync-badge{font-size:11px;color:var(--clr-sync-off);cursor:help;flex-shrink:0}.close-btn{flex-shrink:0;width:22px;height:22px;padding:0;border:none;border-radius:var(--radius-s);background:transparent;color:var(--clr-text-muted);font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}.close-btn:hover{background:var(--clr-danger);color:#fff}.frame-wrap{overflow:hidden;flex-shrink:0;background:var(--clr-bg)}.viewport-frame{display:block;border:none;background:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--clr-bg)}::-webkit-scrollbar-thumb{background:var(--clr-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--clr-text-muted)}