.tool-layout-wrapper{background-color:var(--bg);flex-direction:column;height:calc(100vh - 104px);margin-top:0;padding:0;display:flex;overflow:hidden}.tool-layout-wrapper.scrollable{flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden}.tool-layout-wrapper.scrollable .tool-layout-inner{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.tester-dashboard{background:var(--bg);height:100%;color:var(--text-primary);flex-direction:column;display:flex;overflow:hidden}.tool-layout-inner{border-top:1px solid var(--border);flex-direction:column;flex:1;width:100%;max-width:100%;margin:0;display:flex;overflow:hidden}.tool-header{border-bottom:1px solid var(--border);background-color:var(--bg);justify-content:space-between;align-items:center;height:48px;min-height:48px;padding:0 24px;display:flex}.tool-header-left{align-items:center;gap:16px;display:flex}.tool-title{color:var(--text-primary);font-family:Rist Mono,monospace;font-size:16px}.tool-header-right{gap:16px;display:flex}.tool-header-btn{color:var(--text-secondary);font-size:13px}.tool-header-btn:hover{color:var(--text-primary)}.tool-panels{flex:1;display:flex;overflow:hidden}.panel-input,.panel-output{flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden}.panel-input{background-color:var(--bg);border-right:1px solid var(--border)}.panel-output{background-color:var(--surface)}.panel-header-bar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;min-height:33px;padding:8px 16px;display:flex}.panel-label{color:var(--text-muted);text-transform:uppercase;font-size:11px}.format-badge{background-color:var(--accent);color:var(--bg);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600}.editor-container{flex:1;display:flex;overflow:hidden}.line-numbers{border-right:1px solid var(--border);width:32px;min-width:32px;color:var(--text-muted);text-align:left;-webkit-user-select:none;user-select:none;background-color:#222;padding:12px 0 12px 8px;font-size:11px;overflow:hidden}.input-textarea{background-color:var(--bg);color:var(--text-primary);resize:none;border:none;flex:1;padding:12px 16px;font-family:Rist Mono,monospace;font-size:13px;line-height:1.5}.input-textarea:focus{box-shadow:none;outline:none}.output-tabs{border-bottom:1px solid var(--border);display:flex}.output-tab{color:var(--text-muted);border-bottom:2px solid #0000;padding:8px 16px;font-size:13px}.output-tab.active{color:var(--text-primary);border-bottom-color:var(--accent)}.output-tab:hover:not(.active){color:var(--text-secondary)}.output-blocks-container{flex:1;padding:16px;overflow-y:auto}.output-block{border:1px solid var(--border);border-radius:4px;margin-bottom:16px}.output-block-header{background-color:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.block-title{color:var(--text-primary);font-size:13px}.block-copy-btn{color:var(--text-muted);font-size:11px}.block-copy-btn:hover{color:var(--accent)}.output-code-area{background-color:var(--bg);border-bottom-right-radius:4px;border-bottom-left-radius:4px;padding:16px;font-family:Rist Mono,monospace;font-size:13px;overflow-x:auto}.output-footer{border-top:1px solid var(--border);background:var(--surface);color:var(--text-secondary);justify-content:space-between;align-items:center;padding:8px 16px;font-size:11px;display:flex}.footer-actions{gap:16px;display:flex}.mobile-convert-bar{background-color:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);z-index:10;justify-content:space-between;align-items:center;padding:12px 16px;display:none;position:sticky;top:0}.convert-btn{background-color:var(--accent);color:var(--bg);padding:6px 16px;font-size:13px;font-weight:600}@media (min-width:641px) and (max-width:1024px){.tool-layout-wrapper{padding:16px}}@media (max-width:640px){.tool-layout-wrapper{height:auto;padding:0;overflow:visible}.tool-layout-inner{border:none;overflow:visible}.tool-header{flex-direction:column;gap:12px;height:auto;padding:12px}.tool-header-left{flex-direction:column;align-items:flex-start;gap:8px}.tool-panels{flex-direction:column;overflow:visible}.panel-input{border-right:none;border-bottom:4px solid var(--border);flex:none;min-height:300px}.panel-output{flex:none;min-height:400px}.mobile-convert-bar{border-top:1px solid var(--accent);display:flex;position:sticky;top:auto;bottom:0;box-shadow:0 -4px 12px #00000080}}.tool-header{border-bottom:1px solid var(--border)}