*{margin:0;padding:0;box-sizing:border-box}
body{height:100vh;display:flex;flex-direction:column;background:#f5f5f5;font-family:Tahoma,sans-serif;font-size:14px;overflow:hidden}

/* ===== نوار ابزار ریسپانسیو ===== */
.toolbar{background:#fff;padding:6px 10px;border-bottom:2px solid #ddd;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.toolbar h1{font-size:14px;color:#222;font-weight:bold;margin-left:auto;order:10}
.toolbar .btn{background:#e9ecef;border:1px solid #ccc;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:12px;transition:.2s;white-space:nowrap}
.toolbar .btn:hover{background:#d0d0d0}
.toolbar select{padding:4px 6px;border-radius:4px;border:1px solid #ccc;font-size:12px;background:#fff;cursor:pointer;max-width:140px}

/* ===== بدنه ریسپانسیو ===== */
.main-container{display:flex;flex:1;overflow:hidden;margin:4px;gap:4px;flex-wrap:nowrap}

/* ===== پنل درخت ===== */
.tree-panel{width:160px;min-width:100px;background:#fff;border:1px solid #ccc;border-radius:6px;padding:6px;overflow-y:auto;flex-shrink:0}
.tree-panel h3{font-size:12px;color:#444;margin-bottom:4px;border-bottom:1px solid #eee;padding-bottom:4px}
.tree-item{padding:3px 6px;cursor:pointer;font-size:11px;border-radius:3px;font-family:'Courier New',monospace;transition:.1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-item:hover{background:#e8f0fe}
.tree-item .icon{margin-left:3px}
.tree-item.function{color:#6f42c1}
.tree-item.define{color:#28a745;font-weight:bold}
.tree-item.variable{color:#005cc5}

/* ===== پنل ویرایشگر ===== */
.editor-panel{flex:1;display:flex;flex-direction:column;background:#fff;border:1px solid #ccc;border-radius:6px;overflow:hidden;min-width:0}

/* ===== تب‌ها ===== */
.tabs{display:flex;background:#f8f9fa;border-bottom:1px solid #ddd;padding:3px 6px 0 6px;gap:2px;align-items:center;flex-wrap:nowrap;overflow-x:auto}
.tab{padding:4px 10px;background:#e9ecef;border:1px solid #ddd;border-bottom:none;border-radius:4px 4px 0 0;cursor:pointer;font-size:11px;font-family:'Courier New',monospace;white-space:nowrap;flex-shrink:0}
.tab:hover{background:#dee2e6}
.tab.active{background:#fff;font-weight:bold;border-bottom:2px solid #6f42c1}
.tab .close{margin-right:5px;color:#999;font-weight:bold;cursor:pointer;font-size:12px}
.tab .close:hover{color:#d73a49}
.tab-add{font-size:18px;font-weight:bold;padding:0 8px;background:transparent;border:none;cursor:pointer;color:#6f42c1;transition:.2s;flex-shrink:0}
.tab-add:hover{color:#d73a49;transform:scale(1.1)}

#editor-container{flex:1;overflow:hidden;min-height:200px}
.CodeMirror{height:100%!important;font-size:14px;font-family:'Courier New',monospace}

/* ===== پنل تاریخچه ===== */
.history-panel{width:140px;min-width:80px;background:#fff;border:1px solid #ccc;border-radius:6px;padding:4px;max-height:120px;overflow-y:auto;display:none;flex-shrink:0}
.history-panel h3{font-size:11px;color:#444;margin-bottom:3px;border-bottom:1px solid #eee;padding-bottom:3px}
.history-item{padding:3px 5px;cursor:pointer;font-size:10px;border-radius:3px;border-bottom:1px solid #f0f0f0;transition:.1s;font-family:'Courier New',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-item:hover{background:#e8f0fe}
.history-item .time{color:#888;font-size:8px;display:block}

/* ===== ریسپانسیو برای موبایل ===== */
@media (max-width: 768px) {
    .toolbar h1{font-size:12px;order:0;margin-left:0}
    .toolbar .btn{padding:3px 8px;font-size:11px}
    .toolbar select{max-width:100px;font-size:11px;padding:3px 4px}
    .tree-panel{width:100px;min-width:60px;padding:4px}
    .tree-panel h3{font-size:10px}
    .tree-item{font-size:10px;padding:2px 4px}
    .history-panel{width:80px;min-width:50px;max-height:80px;padding:3px}
    .history-panel h3{font-size:9px}
    .history-item{font-size:9px;padding:2px 3px}
    .tab{padding:3px 6px;font-size:10px}
    .tab-add{font-size:16px;padding:0 4px}
    .CodeMirror{font-size:13px}
    .main-container{gap:3px;margin:3px}
}

@media (max-width: 480px) {
    .tree-panel{display:none}
    .history-panel{width:60px;min-width:40px;max-height:60px}
    .history-item{font-size:8px}
    .toolbar h1{font-size:10px}
    .tab{font-size:9px;padding:2px 4px}
    .CodeMirror{font-size:12px}
}