.hfb{--bg:#07101d;--panel:#0d1828;--panel2:#111f32;--line:#22344d;--text:#f7fbff;--muted:#8fa3bc;--accent:#6ae0cf;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;position:fixed;inset:0;z-index:2147483000;width:100vw;max-width:none;height:100dvh;min-height:0;margin:0;border:0;border-radius:0;overflow:hidden}.hfb *{box-sizing:border-box}.hfb-active{overflow:hidden!important}.hfb-top{height:68px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);gap:14px;min-width:0;overflow:hidden}.hfb-back{color:var(--muted);text-decoration:none;white-space:nowrap;flex:0 0 auto}.hfb-title{display:flex;flex-direction:column;min-width:110px;flex:1 1 auto;overflow:hidden}.hfb-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hfb-title span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hfb-actions{display:flex;gap:7px;flex:0 1 auto;flex-wrap:nowrap;align-items:center;overflow-x:auto;overflow-y:hidden;min-width:0;scrollbar-width:thin;padding-bottom:1px}.hfb button,.hfb-export{border:1px solid var(--line);background:var(--panel2);color:#fff;padding:8px 11px;border-radius:8px;text-decoration:none;font-weight:700;cursor:pointer;font-size:13px;white-space:nowrap;flex:0 0 auto}.hfb button:hover,.hfb-export:hover{border-color:#446080}.hfb button.primary{background:var(--accent);color:#07101d;border-color:var(--accent)}.hfb button:disabled{opacity:.4;cursor:not-allowed}.hfb-workspace{display:grid;grid-template-columns:220px minmax(360px,1fr) minmax(360px,1fr);height:calc(100dvh - 68px);min-height:0}.hfb-sidebar{border-right:1px solid var(--line);background:#0a1422;overflow:auto;min-height:0}.hfb-sidehead,.hfb-editorbar,.hfb-devicebar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.06em}.hfb-sidehead button{font-size:18px;line-height:1;padding:4px 9px}.hfb-files{padding:8px}.hfb-file{display:block;width:100%;text-align:left;background:transparent!important;border:0!important;color:#b9c7d8!important;padding:8px 9px!important;border-radius:7px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:12px!important;overflow:hidden;text-overflow:ellipsis}.hfb-file:hover,.hfb-file.is-active{background:#142239!important;color:#fff!important}.hfb-editor{display:grid;grid-template-rows:48px minmax(0,1fr) 110px;min-width:0;min-height:0;border-right:1px solid var(--line)}.hfb-editorbar{letter-spacing:0}.hfb-editorbar>span{font-family:ui-monospace,monospace;color:#a9bbcf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hfb-editorbar>div{display:flex;gap:6px}.hfb-editor textarea{width:100%;height:100%;min-height:0;border:0;resize:none;outline:none;background:#08111e;color:#d9e6f5;padding:17px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2}.hfb-log{background:#050b14;border-top:1px solid var(--line);padding:11px 14px;overflow:auto;white-space:pre-wrap;font:12px/1.5 ui-monospace,monospace;color:#91a6c0}.hfb-preview{display:grid;grid-template-rows:48px minmax(0,1fr);min-width:0;min-height:0}.hfb-devicebar{justify-content:center;gap:5px;letter-spacing:0;overflow-x:auto}.hfb-devicebar button{padding:6px 8px;background:transparent}.hfb-devicebar button.is-active{background:#1b2d46;border-color:#385478}.hfb-stage{overflow:auto;background:radial-gradient(circle at center,#17243a,#09111f 58%);display:grid;place-items:center;padding:32px;min-height:0}.hfb-device{background:#000;border:8px solid #1f2937;box-shadow:0 24px 70px rgba(0,0,0,.42);overflow:hidden;transition:.2s;border-radius:32px;width:375px;height:667px;max-height:calc(100dvh - 165px)}.hfb-device.android{width:412px;height:732px;border-radius:24px}.hfb-device.tablet{width:768px;height:620px;border-radius:24px}.hfb-device.desktop{width:min(1000px,calc(100vw - 80px));height:600px;border-width:5px;border-radius:10px}.hfb-device iframe{width:100%;height:100%;border:0;background:#fff}.hfb-dialog{border:1px solid var(--line);background:#101b2c;color:#fff;border-radius:16px;padding:24px;min-width:min(480px,90vw);z-index:2147483647}.hfb-dialog::backdrop{background:rgba(0,0,0,.7)}.hfb-dialog .x{float:right;font-size:20px}.hfb-dialog input{width:100%;padding:11px;border-radius:8px;border:1px solid var(--line);background:#07101d;color:#fff}.hfb-check{display:flex;gap:8px;margin:8px 0;color:#b8c7d8}.hfb-check.good:before{content:'✓';color:var(--accent)}.hfb-check.bad:before{content:'×';color:#ff7f96}
@media(max-width:1150px){.hfb-workspace{grid-template-columns:190px minmax(0,1fr)}.hfb-preview{position:fixed;inset:68px 0 0 0;background:#09111f;border:0;border-radius:0;z-index:2147483100;display:none}.hfb-preview.is-open{display:grid}.hfb-stage{padding:20px}}
@media(max-width:700px){.hfb-top{height:auto;min-height:68px;flex-wrap:wrap;padding:8px 10px;gap:7px}.hfb-title{min-width:120px}.hfb-actions{width:100%;order:3}.hfb-workspace{grid-template-columns:1fr;height:calc(100dvh - 116px)}.hfb-sidebar{height:170px;border-right:0;border-bottom:1px solid var(--line)}.hfb-editor{border-right:0}.hfb-preview{inset:0}.hfb-device{transform:scale(.88);transform-origin:center}}