*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-secondary: #f3f3f3;--bg-toolbar: #e8e8e8;--bg-tab-active: #ffffff;--bg-tab-inactive: #d0d0d0;--text-primary: #1e1e1e;--text-secondary: #666666;--border-color: #cccccc;--accent-color: #007acc;--accent-hover: #005a9e;--unsaved-indicator: #f48771}body.dark-theme{--bg-primary: #1e1e1e;--bg-secondary: #252526;--bg-toolbar: #2d2d30;--bg-tab-active: #1e1e1e;--bg-tab-inactive: #2d2d30;--text-primary: #cccccc;--text-secondary: #858585;--border-color: #3e3e42;--accent-color: #007acc;--accent-hover: #1e8ad6;--unsaved-indicator: #f48771}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--text-primary);background-color:var(--bg-primary);overflow:hidden;height:100vh;width:100vw}#app{display:flex;flex-direction:column;height:100vh;width:100vw}.btn{background:var(--accent-color);color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:13px;transition:background .2s}.btn:hover{background:var(--accent-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}#status-bar{display:flex;justify-content:space-between;align-items:center;padding:4px 12px;background-color:var(--bg-toolbar);border-top:1px solid var(--border-color);font-size:12px;color:var(--text-secondary);height:24px;flex-shrink:0}#status-bar .status-left,#status-bar .status-right{display:flex;gap:16px;align-items:center}#status-language{cursor:pointer;padding:2px 6px;border-radius:3px;transition:background .15s}#status-language:hover{background:var(--accent-color);color:#fff}@media (max-width: 600px){body{font-size:12px}.btn{padding:4px 8px;font-size:12px}}.toolbar{display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 12px;background-color:var(--bg-toolbar);border-bottom:1px solid var(--border-color);flex-shrink:0}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px}.app-logo{font-size:20px;margin-right:8px}.toolbar .btn{padding:5px 10px;font-size:12px}@media (max-width: 600px){.toolbar{height:36px;padding:0 8px}.toolbar-left,.toolbar-right{gap:4px}.toolbar .btn{padding:4px 6px;font-size:11px}.app-logo{font-size:16px;margin-right:4px}}.tab-bar{display:flex;align-items:center;height:36px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);overflow-x:auto;flex-shrink:0}.tabs-container{display:flex;flex:1;overflow-x:auto;scrollbar-width:thin}.tabs-container::-webkit-scrollbar{height:4px}.tabs-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.tab{display:flex;align-items:center;gap:8px;padding:6px 12px;background-color:var(--bg-tab-inactive);border-right:1px solid var(--border-color);cursor:pointer;white-space:nowrap;font-size:13px;transition:background .2s;min-width:100px;max-width:200px}.tab:hover{background-color:var(--bg-tab-active)}.tab.active{background-color:var(--bg-tab-active);border-bottom:2px solid var(--accent-color)}.tab-label{flex:1;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}.tab-unsaved{color:var(--unsaved-indicator);font-weight:700}.tab-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:16px;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:background .2s}.tab-close:hover{background:var(--border-color);color:var(--text-primary)}.btn-new-tab{background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:20px;padding:6px 12px;transition:background .2s}.btn-new-tab:hover{background:var(--bg-tab-inactive)}@media (max-width: 600px){.tab-bar{height:32px}.tab{padding:4px 8px;font-size:12px;min-width:80px;max-width:150px}.btn-new-tab{font-size:18px;padding:4px 8px}}.editor-container{flex:1;overflow:hidden;background-color:var(--bg-primary);position:relative}.status-bar{display:flex;justify-content:space-between;align-items:center;height:24px;padding:0 12px;background-color:var(--bg-toolbar);border-top:1px solid var(--border-color);font-size:12px;color:var(--text-secondary);flex-shrink:0}.status-bar span{margin-right:16px}.status-bar span:last-child{margin-right:0}@media (max-width: 600px){.status-bar{display:none}}.dialog-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;z-index:1000;backdrop-filter:blur(2px)}.dialog-overlay.visible{display:block}.keyboard-shortcuts-dialog{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:600px;max-height:80vh;background:var(--dialog-bg, #fff);border-radius:8px;box-shadow:0 4px 20px #0000004d;z-index:1001;overflow:hidden}.keyboard-shortcuts-dialog.visible{display:flex;flex-direction:column}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border-color, #ddd);background:var(--dialog-header-bg, #f5f5f5)}.dialog-header h2{margin:0;font-size:1.5rem;color:var(--text-color, #333)}.dialog-close{background:none;border:none;font-size:2rem;color:var(--text-color, #666);cursor:pointer;padding:0;width:32px;height:32px;line-height:1;border-radius:4px;transition:background .2s}.dialog-close:hover{background:#0000001a}.dialog-content{padding:20px;overflow-y:auto;color:var(--text-color, #333)}.shortcuts-section{margin-bottom:24px}.shortcuts-section h3{margin:0 0 12px;font-size:1.1rem;color:var(--primary-color, #007acc);border-bottom:2px solid var(--primary-color, #007acc);padding-bottom:4px}.shortcut-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-light, #eee)}.shortcut-row:last-child{border-bottom:none}.shortcut-keys{font-family:Courier New,monospace;font-weight:600}.shortcut-keys kbd{display:inline-block;padding:3px 8px;font-size:.85rem;color:var(--kbd-text, #333);background:var(--kbd-bg, #f7f7f7);border:1px solid var(--kbd-border, #ccc);border-radius:4px;box-shadow:0 1px 2px #0000001a;margin:0 2px}.shortcut-description{color:var(--text-secondary, #666)}.shortcuts-note{margin-top:20px;padding:12px;background:var(--note-bg, #fff3cd);border-left:4px solid var(--note-border, #ffc107);border-radius:4px;font-size:.9rem;color:var(--note-text, #856404)}.language-selector-dropdown{display:none;position:fixed;width:250px;max-height:400px;background:var(--dropdown-bg, #fff);border:1px solid var(--border-color, #ddd);border-radius:6px;box-shadow:0 4px 12px #0003;z-index:1000;overflow:hidden}.language-selector-header{padding:12px 16px;background:var(--dropdown-header-bg, #f5f5f5);border-bottom:1px solid var(--border-color, #ddd);font-weight:600;font-size:.9rem;color:var(--text-color, #333)}.language-selector-list{max-height:350px;overflow-y:auto}.language-selector-item{padding:10px 16px;cursor:pointer;color:var(--text-color, #333);transition:background .15s}.language-selector-item:hover{background:var(--dropdown-item-hover, #e8f4ff)}.language-selector-item.active{background:var(--primary-color, #007acc);color:#fff;font-weight:600}body.dark-theme{--dialog-bg: #2d2d2d;--dialog-header-bg: #252526;--text-color: #cccccc;--text-secondary: #999;--border-color: #3e3e3e;--border-light: #3e3e3e;--kbd-text: #cccccc;--kbd-bg: #1e1e1e;--kbd-border: #555;--note-bg: #3e3e1e;--note-border: #ffc107;--note-text: #ffd966;--dropdown-bg: #2d2d2d;--dropdown-header-bg: #252526;--dropdown-item-hover: #094771}@media (max-width: 768px){.keyboard-shortcuts-dialog{width:95%;max-height:90vh}.dialog-header{padding:16px}.dialog-header h2{font-size:1.2rem}.dialog-content{padding:16px}.shortcut-row{flex-direction:column;align-items:flex-start;gap:4px}.language-selector-dropdown{width:200px}}