.breadcrumb{height:30px;display:flex;align-items:center;gap:7px;padding:0 18px;border-bottom:1px solid #eee8f1;background:#fff;font-size:10px;color:#95899c;flex-shrink:0}.breadcrumb a{color:#7b4bc4;text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.breadcrumb span[aria-current="page"]{color:#6f6675;font-weight:600}
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#27242a;background:#faf8fc}
*{box-sizing:border-box}body{margin:0;height:100vh;min-height:520px;display:flex;flex-direction:column;overflow:hidden}
.topbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 18px;border-bottom:1px solid #e8e1ed;background:#fff;flex-shrink:0}
.brand{font-size:19px;font-weight:850;letter-spacing:-.04em}.beta{font-size:9px;letter-spacing:.08em;color:#7b4bc4;background:#f2eaff;border-radius:5px;padding:3px 5px;vertical-align:middle}.subtitle{font-size:11px;color:#8a7f91;margin-top:2px}
.controls,.head-actions{display:flex;gap:7px;align-items:center}select,button,.file-button{font:inherit;border:1px solid #ddd3e3;background:#fff;border-radius:9px;padding:8px 11px;color:#332c38;font-size:12px}
button,.file-button{cursor:pointer}button:hover,.file-button:hover{background:#f6f0f8}.primary{background:#7b4bc4;color:#fff;border-color:#7b4bc4;font-weight:700}.primary:hover{background:#6d3db7;color:#fff}.importbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:#fffafd;border-bottom:1px solid #e8e1ed;flex-shrink:0}
.github-form{display:flex;gap:6px;align-items:center;flex:1;min-width:250px}.github-mark{font-size:10px;font-weight:900;color:#7b4bc4;background:#f0e7fa;padding:7px;border-radius:7px}.github-form input{min-width:80px;flex:1}.importbar input:not([type=file]),.dialog-card input,.dialog-card textarea{font:inherit;border:1px solid #ddd3e3;border-radius:8px;padding:9px 10px;min-width:0}.file-button{display:inline-flex;align-items:center;white-space:nowrap}.file-button input{display:none}.importbar>button{white-space:nowrap}#project-status{font-size:10px;color:#92849c;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace{min-height:0;flex:1;display:grid;grid-template-columns:190px minmax(260px,1fr) minmax(260px,1fr);gap:1px;background:#ded8e2}
.panel{min-width:0;min-height:0;background:#fff;display:flex;flex-direction:column}.panel-head{height:36px;min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 10px;border-bottom:1px solid #eee8f1;font-size:10px;font-weight:800;letter-spacing:.08em;color:#796e80}.panel-head .mini{letter-spacing:0}.mini{font-size:10px;padding:4px 7px;border-radius:6px;white-space:nowrap}
.file-list{flex:1;overflow:auto;padding:7px 5px}.file-item{display:flex;align-items:center;gap:7px;width:100%;padding:7px 8px;border:0;border-radius:6px;text-align:left;background:transparent;font-size:11px;color:#554b5e;overflow:hidden}.file-item:hover{background:#f7f1fb}.file-item.active{background:#efe5fa;color:#6f39ad;font-weight:700}.file-icon{flex-shrink:0;width:17px;text-align:center;color:#a58abf;font-size:10px}.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-files{font-size:11px;line-height:1.6;color:#a096a8;padding:12px 8px}
#editor{flex:1;min-height:0}.preview-panel iframe{border:0;flex:1;width:100%;background:#fff}.console-panel{height:100px;min-height:65px;background:#17151a;color:#e8e2ec;display:flex;flex-direction:column;flex-shrink:0}.console-panel .panel-head{border-color:#302b33;color:#a99eae}.console-panel .mini{background:#242027;color:#ddd4e2;border-color:#3b3440}.console-panel pre{margin:0;padding:7px 12px;overflow:auto;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
footer{height:25px;min-height:25px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 12px;font-size:9px;color:#95899c;background:#fff;border-top:1px solid #e8e1ed;flex-shrink:0}
dialog{border:0;border-radius:16px;padding:0;width:min(620px,calc(100vw - 28px));box-shadow:0 20px 70px #30223c30}dialog::backdrop{background:#24162d66}.dialog-card{display:flex;flex-direction:column;gap:10px;padding:20px}.dialog-title{font-size:17px;font-weight:800}.dialog-card p{font-size:12px;color:#85788d;margin:0}.dialog-card textarea{height:45vh;resize:vertical;font:12px/1.5 ui-monospace,monospace}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:900px){.workspace{grid-template-columns:145px minmax(220px,1fr);grid-template-rows:minmax(260px,1fr) minmax(220px,.8fr)}.files-panel{grid-row:1 / span 2}.preview-panel{grid-column:2;grid-row:2}.editor-panel{grid-column:2;grid-row:1}.topbar{align-items:flex-start}.controls{flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:620px){body{height:auto;min-height:100vh;overflow:auto}.topbar{flex-direction:column}.controls{justify-content:flex-start}.workspace{flex:none;height:760px;grid-template-columns:100px minmax(220px,1fr);grid-template-rows:1fr 1fr}.files-panel{grid-row:1 / span 2}.importbar{align-items:stretch}.github-form{flex-basis:100%}#project-status{max-width:none}.console-panel{height:100px}footer span:last-child{display:none}}
.tool-link{display:inline-flex;align-items:center;padding:8px 10px;border-radius:9px;background:#f3eaff;color:#7543b5;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}.tool-link:hover{background:#eaddfb}
.console-actions{display:flex;gap:5px;align-items:center}
.about{display:flex;gap:13px;padding:13px 18px;background:#fff;border-top:1px solid #eee8f1;color:#716678;flex-shrink:0}.about-icon{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border-radius:10px;background:#f3eaff;color:#8050bd}.about-icon svg{width:21px;height:21px}.about strong{display:block;font-size:12px;color:#4d4059;margin-bottom:3px}.about p{font-size:10px;line-height:1.55;margin:0 0 5px;max-width:1000px}.about-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.about-links a{color:#7b4bc4;text-decoration:none;font-weight:700}.about-links span{color:#a197aa}
.toast-region{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{display:flex;align-items:center;gap:9px;max-width:min(420px,calc(100vw - 36px));padding:12px 15px;border:1px solid #e4d9ee;border-radius:12px;background:#fff;color:#51435e;box-shadow:0 8px 30px #33204420;font-size:12px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translateY(0)}.toast svg{width:18px;height:18px;flex-shrink:0;color:#7b4bc4}.toast-error svg{color:#d04f6c}
@media(max-width:900px){.about{padding:10px 12px}.about p{font-size:9px}}@media(max-width:620px){.about{padding:10px}.about-icon{display:none}.console-actions{gap:3px}.console-actions .mini{padding:4px 5px}.tool-link{font-size:11px}}

/* Modal-based help and opt-in console */
.about-dialog-card{gap:13px}.about-dialog-card ul{margin:0;padding-left:20px;color:#756980;font-size:12px;line-height:1.8}.about-dialog-card li+li{margin-top:5px}.about-dialog-card strong{color:#4d4059}.about-dialog-card .about-links{margin-top:2px}
.console-panel[hidden]{display:none!important}.console-panel:not([hidden]){display:flex}.controls #console-toggle.active{background:#f1e7fb;border-color:#d7c3ef;color:#6e3bb0}
#about-dialog{max-height:calc(100vh - 30px);overflow:auto}
@media(max-width:620px){.controls{width:100%;gap:5px}.controls button,.controls select{padding:7px 8px}}

/* SVG help control and console diagnostics */
.help-button{display:inline-flex;align-items:center;gap:6px}.help-button svg{width:17px;height:17px;display:block}
.console-panel pre{flex:1;min-height:0}
.console-line{display:flex;align-items:flex-start;gap:7px;padding:2px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.console-line-icon{width:14px;height:14px;flex:0 0 14px;margin-top:2px}
.console-error{color:#ff8294}.console-warn,.console-warning{color:#ffd36e}.console-info{color:#9acbff}.console-summary{height:32px;min-height:32px;display:flex;align-items:center;gap:12px;padding:0 10px;border-top:1px solid #302b33;background:#211e24;color:#cfc5d5;font-size:10px}
.console-summary-item,.console-details{display:inline-flex;align-items:center;gap:5px;padding:3px 4px;border:0;background:transparent;color:#b8adbf;font-size:10px;border-radius:5px}
.console-summary-item svg,.console-total svg,.console-details svg{width:15px;height:15px;display:block}
.console-summary-item.error-summary svg{color:#ff687f}.console-summary-item.warning-summary svg{color:#f6c85f}
.console-summary-item.has-count{font-weight:800;color:#fff}
.console-summary-spacer{flex:1}.console-total{display:inline-flex;align-items:center;gap:5px;color:#a99eae}.console-details{color:#ddd4e2}.console-details:hover,.console-summary-item:hover{background:#39323d}
@media(max-width:620px){.console-summary{gap:7px;padding:0 7px}.console-details span{display:none}.help-button span{display:none}}

/* Draggable console height */
.console-resizer{height:9px;min-height:9px;flex:0 0 9px;cursor:row-resize;display:flex;align-items:center;justify-content:center;background:#f4eef8;border-top:1px solid #e2d6eb;border-bottom:1px solid #e2d6eb;touch-action:none;user-select:none;position:relative;z-index:2}
.console-resizer::after{content:"";width:42px;height:3px;border-radius:4px;background:#b7a3c8;box-shadow:0 0 0 1px #b7a3c820}
.console-resizer:hover,.console-resizer:focus-visible{background:#eadcf5;outline:2px solid #b68ce0;outline-offset:-2px}
.console-resizer[hidden]{display:none!important}


/* Clickable runtime URLs and visible successful-preview state */
.console-link{color:#bda0ff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}
.console-link:hover{color:#e2d2ff;text-decoration-thickness:2px}
.preview-ready-banner{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f3fff8;border-bottom:1px solid #cdebd8;color:#285b40;flex-shrink:0}
.preview-ready-banner[hidden]{display:none!important}
.preview-ready-check{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:#d8f6e4;color:#237546;font-weight:900}
.preview-ready-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.preview-ready-copy strong{font-size:11px}
.preview-ready-copy a{font-size:10px;color:#26754b;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:2px}
.preview-ready-button{padding:7px 9px;border-radius:7px;background:#26754b;color:#fff;text-decoration:none;font-size:10px;font-weight:700;white-space:nowrap}
.preview-ready-button:hover{background:#1c603c}
@media(max-width:620px){.preview-ready-banner{gap:7px;padding:8px}.preview-ready-button{font-size:9px;padding:6px}.preview-ready-check{width:23px;height:23px;flex-basis:23px}}

/* File tree, per-file delete controls, and import progress in preview */
.file-actions{max-width:100px;letter-spacing:0;font-size:10px;padding:4px 5px;border:1px solid #e6dceb;border-radius:6px;background:#fff;color:#6c567d}
.file-row,.folder-row{display:flex;align-items:center;gap:3px;min-width:0;padding-right:3px}
.file-row .file-item{flex:1;min-width:0;padding:6px 5px;gap:5px}
.folder-row{padding-top:2px;padding-bottom:2px}
.folder-toggle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;border:0;background:transparent;color:#79628d;font-size:10px;font-weight:700;padding:6px 3px;border-radius:5px}
.folder-toggle:hover{background:#f7f1fb}
.file-delete{flex:0 0 20px;width:20px;height:22px;border:0;border-radius:5px;background:transparent;color:#b3a5bd;font-size:16px;line-height:1}
.file-delete:hover{background:#ffedf0;color:#c74461}
.preview-import-progress{padding:13px 14px;background:#faf6ff;border-bottom:1px solid #e9dcf6;flex-shrink:0}
.preview-import-progress[hidden]{display:none!important}
.preview-import-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;color:#67428d;font-size:11px}
.preview-import-top strong{overflow-wrap:anywhere}
.preview-import-top span{white-space:nowrap;font-size:10px;color:#8b73a2}
.preview-import-track{height:7px;margin-top:9px;border-radius:99px;background:#e8dcf3;overflow:hidden}
.preview-import-bar{height:100%;width:0;background:linear-gradient(90deg,#b58be8,#8050bd);border-radius:99px;transition:width .12s ease}
.preview-import-progress p{margin:7px 0 0;color:#9887a5;font-size:10px}
@media(max-width:620px){.file-actions{max-width:90px;font-size:9px}.preview-import-progress{padding:10px}}

/* SVG editor history controls + consistent native dialog replacements */
.icon-button{display:inline-grid;place-items:center;width:34px;height:34px;padding:7px;border-radius:9px;color:#75518e}
.icon-button svg{width:18px;height:18px;display:block}
.icon-button:hover{background:#f0e6fa;color:#6d3db7}
.small-dialog{width:min(440px,calc(100vw - 28px))}
#confirm-dialog-message{line-height:1.7;overflow-wrap:anywhere;white-space:pre-wrap}
#newfolder-name,#newfile-name{width:100%}
@media(max-width:620px){.icon-button{width:32px;height:32px;padding:6px}}

/* Mobile layout: keep import controls and file actions inside the viewport. */
.editor-head{gap:5px}
.editor-tools{display:flex;align-items:center;gap:5px;min-width:0;letter-spacing:0}
.editor-tools #status{font-weight:500;letter-spacing:0;white-space:nowrap}
.editor-tools .mini{padding:5px 8px}
@media(max-width:620px){
  .topbar{padding:10px 12px;gap:8px}
  .brand{font-size:18px}
  .subtitle{font-size:10px}
  .controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;width:100%;gap:5px}
  .controls select{max-width:100px;min-width:0}
  .controls button{font-size:11px;padding:7px 8px}
  .importbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:10px}
  .github-form{grid-column:1 / -1;display:flex;min-width:0;width:100%;gap:5px}
  .github-form input{width:0;min-width:0;font-size:12px;padding:9px 8px}
  .github-form button{flex-shrink:0;padding:8px 10px}
  .github-mark{flex-shrink:0}
  .importbar>.file-button,.importbar>button,.importbar>.tool-link{display:flex;justify-content:center;align-items:center;min-width:0;white-space:normal;text-align:center;font-size:11px;padding:9px 6px;line-height:1.35}
  #project-status{grid-column:1 / -1;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .workspace{height:auto;min-height:0;display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:minmax(330px,48vh) minmax(280px,42vh);gap:1px}
  .files-panel{grid-column:1;grid-row:1 / span 2;min-width:0}
  .editor-panel{grid-column:2;grid-row:1;min-width:0}
  .preview-panel{grid-column:2;grid-row:2;min-width:0}
  .panel-head{padding:0 6px;font-size:9px;letter-spacing:.04em;gap:3px}
  .files-panel .panel-head{height:auto;min-height:48px;align-items:flex-start;flex-direction:column;justify-content:center;padding:5px}
  .file-actions{width:100%;max-width:none;font-size:9px;padding:5px 2px}
  .file-list{padding:5px 3px}
  .file-row{gap:1px}
  .file-row .file-item{padding:7px 3px;gap:3px}
  .file-name{font-size:10px}
  .file-icon{width:12px;font-size:9px}
  .file-remove{padding:3px 2px}
  .editor-head{flex-wrap:wrap;align-content:center}
  .editor-tools{gap:3px}
  .editor-tools .mini{padding:5px 6px;font-size:10px}
  .editor-tools #status{display:none}
  #editor{min-width:0;touch-action:pan-x pan-y}
  .preview-panel .panel-head .head-actions{gap:3px}
  .preview-panel .panel-head .mini{padding:5px 5px;font-size:9px}
  dialog{max-width:calc(100vw - 20px)}
  .dialog-card{padding:15px;gap:9px}
  .dialog-card textarea{height:50vh;min-height:220px;font-size:16px}
  #paste-filename{font-size:16px}
  .toast-region{left:10px;right:10px;bottom:12px}
  .toast{max-width:100%;font-size:12px}
}

/* Native mobile editing textarea supports iOS long-press selection and clipboard actions. */
#paste-code{user-select:text;-webkit-user-select:text;touch-action:pan-x pan-y;white-space:pre;overflow:auto;tab-size:2}
@media(max-width:620px){
  .mobile-edit-button{white-space:normal;line-height:1.2;max-width:90px}
  #paste-dialog .dialog-card p{font-size:13px;line-height:1.55}
  #paste-dialog #paste-code{font-size:16px;line-height:1.5;min-height:45vh;-webkit-user-select:text;user-select:text}
}

/* Project export controls */
.export-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.export-actions button{white-space:nowrap}
@media(max-width:620px){
  .export-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}
  .export-actions button{min-width:0;white-space:normal;font-size:11px;line-height:1.3;padding:9px 5px}
}


/* Prevent accidental double-tap zoom on touch devices while preserving pinch zoom. */
html, body {
  touch-action: manipulation;
}
button, a, select, input, label, summary, [role="button"] {
  touch-action: manipulation;
}
#editor, #paste-code, .CodeMirror, .CodeMirror-scroll, .cm-editor, .cm-scroller {
  touch-action: pan-x pan-y pinch-zoom;
}