.app-header{height:var(--header-height);background:var(--bg-panel);border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;justify-content:center;padding:0 20px;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.2)}.url-bar{max-width:800px;margin:0 auto 15px auto;width:100%}.device-toolbar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.device-btn{display:flex;align-items:center;gap:6px;background:#2c2c2c;border:1px solid #444;color:#ccc;padding:6px 12px;border-radius:6px;transition:all .2s}.device-btn:hover{background:#3a3a3a;color:#fff}.device-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.dimension-inputs input{width:70px;text-align:center;background:#2c2c2c;border:1px solid #444;color:#fff}.viewport-container{flex:1;background-color:#0f0f0f;background-image:linear-gradient(#1a1a1a 1px,transparent 1px),linear-gradient(90deg,#1a1a1a 1px,transparent 1px);background-size:20px 20px;display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:40px;position:relative}.frame-wrapper{background:#fff;transition:width .3s ease,height .3s ease;box-shadow:0 0 50px rgba(0,0,0,.5);border-radius:4px;position:relative;transform-origin:top center}.frame-wrapper::after{content:attr(data-size);position:absolute;top:-25px;left:50%;transform:translateX(-50%);color:#666;font-size:.8rem;font-family:monospace;background:#1e1e1e;padding:2px 8px;border-radius:4px;border:1px solid #333}iframe{width:100%;height:100%;border:none;background:#fff;display:block}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#1e1e1e}::-webkit-scrollbar-thumb{background:#444;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#555}.scale-info{position:fixed;bottom:20px;right:20px;background:rgba(0,0,0,.7);color:#aaa;padding:5px 10px;border-radius:4px;font-size:.8rem;pointer-events:none}