.app{width: min(1280px, calc(100% - 32px));margin: 22px auto 20px;background:#fffdf8;border:1px solid #e2d8c8;border-radius:14px;box-shadow:0 8px 30px rgba(20,30,50,.08);display:flex;flex-direction:column;overflow:hidden}
.top{padding:16px 18px 12px;border-bottom:1px solid #e5e9f0}
h1{font-size:20px;margin:0 0 5px}
.sub{font-size:13px;color:#697386}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
button,.file-label{border:1px solid #d5dbe5;background:#fff;border-radius:7px;font-size:13px;cursor:pointer;color:#263246;margin:0}
button{padding:7px 11px;line-height:1.2}
.file-label{padding:6px 11px}
button:hover,.file-label:hover{background:#f1f4f8}
.primary{background:#1f2937;color:#fff;border-color:#1f2937}.primary:hover{background:#111827}
.danger{color:#b42318}
.status{margin-left:auto;font-size:12px;align-self:center;color:#667085}
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr}
.panel{min-width:0;display:flex;flex-direction:column;border:0;border-radius:0}
.panel+.panel{border-left:1px solid #e5e9f0}
.panel-head{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #e5e9f0;background:#fafbfc;font-size:13px;font-weight:600}
.editor-wrap{position:relative;flex:1;min-height:0}
.editor-with-lines{display:flex;overflow:hidden}
.line-numbers{flex:0 0 52px;padding:16px 10px 16px 0;text-align:right;overflow:hidden;user-select:none;color:#98a2b3;background:#f8fafc;border-right:1px solid #e5e9f0;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;white-space:pre}
textarea{width:100%;height:100%;resize:none;border:0;outline:0;padding:16px 18px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;color:#172033;background:#fff;tab-size:2;box-sizing:border-box}
.editor-with-lines textarea{flex:1;min-width:0;overflow:auto}
pre{height:100%;margin:0;padding:16px 18px;overflow:auto;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;white-space:pre-wrap;word-break:break-word;background:#fbfcfe;box-sizing:border-box}
.error{padding:12px 14px;background:#fff2f0;color:#b42318;border-bottom:1px solid #ffd8d2;font:12px/1.5 ui-monospace,monospace;display:none}
.footer{padding:8px 12px;border-top:1px solid #e5e9f0;font-size:11px;color:#667085;display:flex;gap:18px}
input[type=file]{display:none}

@media(max-width:850px){
  body{padding:0}
  .app{width:100%;height:auto;min-height:100vh;margin:0;border-radius:0;overflow:visible}
  .workspace{display:flex;flex-direction:column;height:auto;overflow:visible;flex:none}
  .workspace>.panel{height:auto;min-height:0;flex:none}
  .panel+.panel{border-left:0;border-top:1px solid #e5e9f0}
  .workspace .editor-wrap{height:220px;min-height:220px;flex:none}
  .status{width:100%;margin:0}
  .toolbar{margin:8px 0 2px}
}
@media(max-width:480px){
  .top{padding:14px 12px 10px}
  h1{font-size:18px}
  .sub{font-size:12px}
  .toolbar{gap:6px}
  button,.file-label{font-size:12px;padding:7px 9px}
  .line-numbers{flex-basis:42px;padding-right:7px}
  textarea,pre{padding:12px;font-size:12px}
}