*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #1a1a2e;--bg-medium: #16213e;--bg-light: #0f3460;--bg-panel: #1e1e3a;--text-primary: #e0e0e0;--text-secondary: #a0a0b0;--accent: #5555ff;--accent-hover: #7777ff;--border: #333366;--active: #4444aa;--danger: #ff5555;--font-mono: "Courier New", "Consolas", monospace;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}html,body{height:100%;overflow:hidden;background:var(--bg-dark);color:var(--text-primary);font-family:var(--font-ui);font-size:13px}#app{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;overflow:hidden}#menu-bar-container{flex-shrink:0}.menu-bar{display:flex;align-items:center;background:var(--bg-medium);border-bottom:1px solid var(--border);padding:0 8px;height:32px;gap:2px}.menu-title{font-weight:700;color:var(--accent);margin-right:16px;font-size:14px;letter-spacing:.5px}.menu-item{position:relative}.menu-spacer{flex:1}.menu-label{background:none;border:none;color:var(--text-primary);padding:4px 10px;cursor:pointer;font-family:var(--font-ui);font-size:13px;border-radius:3px}.menu-label:hover,.menu-label.open{background:var(--bg-light)}.menu-dropdown{position:absolute;top:100%;left:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;min-width:220px;padding:4px 0;z-index:1000;box-shadow:0 4px 12px #00000080}.menu-entry{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;color:var(--text-primary);padding:6px 16px;cursor:pointer;font-family:var(--font-ui);font-size:13px;text-align:left}.menu-entry:hover{background:var(--accent);color:#fff}.menu-shortcut{color:var(--text-secondary);font-size:11px;margin-left:24px}.menu-entry:hover .menu-shortcut{color:#ffffffb3}.menu-source-link{color:var(--text-secondary);text-decoration:none;font-size:12px;padding:4px 10px;border-radius:3px}.menu-source-link:hover{color:var(--text-primary);background:var(--bg-light)}#tab-bar-container{flex-shrink:0}.tab-bar{display:flex;align-items:stretch;background:var(--bg-dark);border-bottom:1px solid var(--border);padding:0;height:30px;overflow-x:auto;overflow-y:hidden}.tab-item{display:flex;align-items:center;gap:6px;padding:0 12px;cursor:pointer;font-size:12px;color:var(--text-secondary);border-right:1px solid var(--border);white-space:nowrap;min-width:0;-webkit-user-select:none;user-select:none}.tab-item:hover{background:var(--bg-medium);color:var(--text-primary)}.tab-item.active{background:var(--bg-medium);color:var(--text-primary);border-bottom:2px solid var(--accent)}.tab-name{overflow:hidden;text-overflow:ellipsis;max-width:120px}.tab-close{background:none;border:none;color:var(--text-secondary);font-size:14px;cursor:pointer;padding:0 2px;line-height:1;border-radius:3px}.tab-close:hover{background:var(--danger);color:#fff}.tab-add{background:none;border:none;color:var(--text-secondary);font-size:16px;cursor:pointer;padding:0 10px;line-height:1}.tab-add:hover{color:var(--text-primary);background:var(--bg-medium)}.tab-rename-input{background:var(--bg-dark);border:1px solid var(--accent);color:var(--text-primary);font-family:var(--font-ui);font-size:12px;padding:1px 4px;border-radius:2px;outline:none;max-width:120px}#toolbar-container{flex-shrink:0}.toolbar{display:flex;align-items:center;background:var(--bg-medium);border-bottom:1px solid var(--border);padding:4px 8px;gap:4px;height:36px}.toolbar-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-panel);border:1px solid var(--border);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:15px;transition:all .15s}.toolbar-btn:hover{background:var(--bg-light);border-color:var(--accent)}.toolbar-btn.active{background:var(--active);border-color:var(--accent);color:#fff}#main-area{display:flex;flex:1;min-height:0;overflow:hidden}#left-panel{width:clamp(120px,16vw,180px);flex:0 1 clamp(120px,16vw,180px);background:var(--bg-panel);border-right:1px solid var(--border);overflow-y:auto;min-height:0;min-width:110px}.layer-panel{padding:0}.panel-header{padding:8px 10px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);border-bottom:1px solid var(--border)}.layer-actions{display:flex;padding:4px 6px;gap:4px;border-bottom:1px solid var(--border)}.layer-action-btn{flex:1;height:24px;background:var(--bg-medium);border:1px solid var(--border);color:var(--text-primary);border-radius:3px;cursor:pointer;font-size:14px}.layer-action-btn:hover{background:var(--bg-light)}.layer-list{padding:4px 0}.layer-item{display:flex;align-items:center;padding:4px 6px;gap:4px;cursor:pointer;border-left:3px solid transparent}.layer-item:hover{background:var(--bg-medium)}.layer-item.active{background:#5555ff26;border-left-color:var(--accent)}.layer-vis-btn,.layer-lock-btn,.layer-move-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:12px;padding:2px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.layer-vis-btn:hover,.layer-lock-btn:hover,.layer-move-btn:hover{color:var(--text-primary)}.layer-name{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#canvas-container{flex:1;min-width:0;min-height:0;display:flex;align-items:flex-start;justify-content:flex-start;overflow:auto;background:#0a0a1a;padding:16px}#ascii-canvas{flex-shrink:0;margin:auto;border:1px solid var(--border);image-rendering:pixelated}#right-panel{width:clamp(130px,18vw,200px);flex:0 1 clamp(130px,18vw,200px);background:var(--bg-panel);border-left:1px solid var(--border);overflow-y:auto;min-height:0;min-width:120px}.char-picker{padding:0}.current-char{padding:6px 10px;font-family:var(--font-mono);font-size:14px;color:var(--accent);border-bottom:1px solid var(--border)}.char-group-label{padding:6px 10px 2px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.char-grid{display:flex;flex-wrap:wrap;padding:2px 6px 6px;gap:1px}.char-cell{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--bg-medium);border:1px solid transparent;color:var(--text-primary);font-family:var(--font-mono);font-size:13px;cursor:pointer;border-radius:2px}.char-cell:hover{background:var(--bg-light);border-color:var(--accent)}.char-cell.selected{background:var(--active);border-color:var(--accent);color:#fff}.box-style-picker{border-top:1px solid var(--border)}.box-style-option{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;cursor:pointer;background:var(--bg-medium);border-left:3px solid transparent;font-size:13px}.box-style-option:hover{background:var(--bg-light);border-left-color:var(--accent)}.box-style-option.selected{background:var(--active);border-left-color:var(--accent);color:#fff}.box-style-preview{font-family:var(--font-mono);font-size:14px;letter-spacing:1px}.color-picker{padding:8px 10px;border-top:1px solid var(--border)}.color-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:4px;margin-top:8px}.color-label:first-child{margin-top:0}.color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin-bottom:4px}.color-swatch{aspect-ratio:1;border:2px solid transparent;border-radius:3px;cursor:pointer;min-height:18px}.color-swatch:hover{border-color:#fff;transform:scale(1.1)}.color-swatch.selected{border-color:#fff;box-shadow:0 0 4px #ffffff80}.color-swatch-transparent{background:#fff;position:relative;overflow:hidden}.color-swatch-transparent:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom right,transparent calc(50% - 1px),#ff0000 calc(50% - 1px),#ff0000 calc(50% + 1px),transparent calc(50% + 1px))}.color-preview{margin-top:8px;padding:6px 10px;font-family:var(--font-mono);font-size:18px;font-weight:700;text-align:center;border-radius:4px;border:1px solid var(--border)}#status-bar-container{flex-shrink:0}.status-bar{display:flex;align-items:center;background:var(--bg-medium);border-top:1px solid var(--border);padding:0 12px;height:24px;gap:4px}.status-item{font-size:11px;font-family:var(--font-mono);color:var(--text-secondary);padding:0 8px;border-right:1px solid var(--border);white-space:nowrap}.status-item:last-child{border-right:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--bg-light)}.tool-select-icon{display:inline-block;width:14px;height:12px;border:1.5px dashed var(--text-primary);border-radius:1px}.toolbar-btn.active .tool-select-icon{border-color:#fff}.tool-fill-icon{display:inline-block;width:12px;height:10px;background:var(--text-primary);border-radius:1px 1px 2px 2px;position:relative;transform:rotate(-30deg);margin-top:-2px}.tool-fill-drop{position:absolute;bottom:-5px;right:-1px;width:4px;height:4px;background:var(--text-primary);border-radius:50% 50% 50% 0;transform:rotate(45deg)}.toolbar-btn.active .tool-fill-icon,.toolbar-btn.active .tool-fill-drop{background:#fff}.menu-submenu-arrow{font-size:8px;margin-left:12px;color:var(--text-secondary)}.menu-entry:hover .menu-submenu-arrow{color:#ffffffb3}.menu-submenu{display:none;position:absolute;left:100%;top:-4px}.export-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:2000}.export-dialog{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:20px;width:640px;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #000000b3}.export-dialog-title{margin:0 0 12px;font-size:16px;color:var(--text-primary)}.export-dialog-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.export-dialog-label{font-size:13px;color:var(--text-secondary)}.export-dialog-select{background:var(--bg-medium);border:1px solid var(--border);color:var(--text-primary);padding:4px 8px;border-radius:4px;font-family:var(--font-ui);font-size:13px}.export-dialog-region{gap:12px}.export-dialog-input-group{display:flex;flex-direction:column;gap:2px}.export-dialog-input-label{font-size:11px;color:var(--text-secondary)}.export-dialog-input{background:var(--bg-medium);border:1px solid var(--border);color:var(--text-primary);padding:4px 6px;border-radius:4px;font-family:var(--font-mono);font-size:12px;width:70px}.export-dialog-preview{flex:1;min-height:300px;background:var(--bg-dark);border:1px solid var(--border);color:var(--text-primary);font-family:var(--font-mono);font-size:12px;padding:8px;border-radius:4px;resize:none;margin-bottom:12px;white-space:pre;overflow:auto}.export-dialog-checkbox{gap:8px;font-size:13px;color:var(--text-secondary)}.export-dialog-checkbox input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}.export-dialog-checkbox label{cursor:pointer}.export-dialog-checkbox input[type=checkbox]:disabled{opacity:.5;cursor:default}.export-dialog-checkbox input[type=checkbox]:disabled+label{opacity:.7;cursor:default}.export-dialog-buttons{display:flex;gap:8px;justify-content:flex-end}.export-dialog-btn{background:var(--bg-medium);border:1px solid var(--border);color:var(--text-primary);padding:6px 16px;border-radius:4px;cursor:pointer;font-family:var(--font-ui);font-size:13px}.export-dialog-btn:hover{background:var(--bg-light)}.export-dialog-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.export-dialog-btn-primary:hover{background:var(--accent-hover)}.replace-colors-palette{display:grid;grid-template-columns:repeat(9,22px);gap:2px;margin-top:4px}.replace-colors-selected{border-color:#fff!important;box-shadow:0 0 6px #fff9}.canvas-size-presets{display:flex;gap:8px;margin:6px 0 10px}.canvas-size-presets .export-dialog-btn{padding:5px 10px}.canvas-size-note{margin:0 0 12px;font-size:12px;color:var(--text-secondary)}