body, html { margin:0; padding:0; height:100%; font-family:sans-serif; overflow:hidden; background:#2b2b2b; color:#e0e0e0; }
#app { display:flex; flex-direction:column; height:100vh; }
#toolbar { height:40px; background:#3c3c3c; border-bottom:1px solid #555; display:flex; align-items:center; padding:0 10px; gap:10px; flex-shrink:0; }
#main-layout { flex:1; display:flex; overflow:hidden; }
#hierarchy-panel { width:250px; background:#333; border-right:1px solid #555; padding:10px; overflow-y:auto; flex-shrink:0; }
#canvas-area { flex:1; background:#1e1e1e; position:relative; overflow:auto; display:flex; justify-content:flex-start; align-items:flex-start; padding:20px; }
#canvas-wrapper { background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.5); position:relative; flex-shrink:0; }
#inspector-panel { width:300px; background:#333; border-left:1px solid #555; padding:10px; overflow-y:auto; flex-shrink:0; }
h3 { margin-top:0; font-size:14px; text-transform:uppercase; color:#aaa; border-bottom:1px solid #555; padding-bottom:5px; }

#hierarchy-tree { list-style:none; padding-left:0; margin:0; }
#hierarchy-tree ul { list-style:none; padding-left:15px; margin:0; border-left:1px dashed #555; }
.tree-item { padding:3px 0; }
.tree-label { cursor:pointer; padding:2px 5px; display:inline-block; border-radius:3px; font-size:13px; }
.tree-label:hover { background:#4a4a4a; }
.tree-coords { color:#888; font-size:11px; margin-left:5px; }

.vis-toggle, .lock-toggle { cursor:pointer; margin-right:4px; font-size:13px; user-select:none; opacity:0.8; }
.vis-toggle:hover, .lock-toggle:hover { opacity:1; }

.canvas-element { box-sizing:border-box; cursor:grab; transition:outline 0.1s; }
.canvas-element.locked { cursor:not-allowed !important; opacity:0.85; }
.lock-badge { position:absolute; top:4px; right:4px; font-size:14px; background:rgba(0,0,0,0.7); padding:2px 4px; border-radius:3px; pointer-events:none; }

.el-rect { background:rgba(100,150,255,0.1); }
.el-text { background:transparent; border:1px dashed rgba(150,255,150,0.4); }

.element-info { position:absolute; font-size:11px; color:#fff; background:rgba(0,0,0,0.7); padding:2px 5px; border-radius:2px; pointer-events:none; white-space:nowrap; z-index:10; left:0; letter-spacing:normal !important; text-shadow:none !important; -webkit-text-stroke:0 !important; text-transform:none !important; font-family:sans-serif !important; font-weight:normal !important; font-style:normal !important; text-decoration:none !important; line-height:1.2 !important; }

.inspector-header { background:#4a4a4a; padding:10px; margin-bottom:15px; border-radius:4px; font-size:13px; }
.inspector-form { display:flex; flex-direction:column; gap:8px; }
.inspector-field { display:flex; flex-direction:column; gap:3px; }
.inspector-field label { font-size:12px; color:#aaa; text-transform:uppercase; }
.inspector-field input, .inspector-field select, .inspector-field textarea { background:#2b2b2b; border:1px solid #555; color:#e0e0e0; padding:5px; border-radius:3px; font-size:13px; width:100%; box-sizing:border-box; }
.inspector-field input:focus, .inspector-field select:focus, .inspector-field textarea:focus { outline:none; border-color:#6495ed; }
.inspector-separator { margin-top:10px; margin-bottom:5px; font-size:11px; color:#888; text-transform:uppercase; border-bottom:1px solid #555; padding-bottom:3px; }
.btn-delete { margin-top:15px; background:#8b3a3a; color:#fff; border:none; padding:8px; border-radius:3px; cursor:pointer; font-size:13px; }
.btn-delete:hover { background:#a54a4a; }

.canvas-element.selected { outline:2px solid #ff6b6b !important; outline-offset:2px; }
.tree-label.selected { background:#6495ed !important; color:#fff; }

#toolbar button { background:#4a4a4a; color:#e0e0e0; border:1px solid #666; padding:6px 12px; border-radius:3px; cursor:pointer; font-size:13px; transition:background 0.2s; }
#toolbar button:hover { background:#5a5a5a; }
.toolbar-separator { display:inline-block; width:1px; height:20px; background:#666; margin:0 10px; vertical-align:middle; }

.canvas-element.dragging { opacity:0.8; cursor:grabbing !important; z-index:1000; }
.canvas-element.hidden { opacity:0.3; border-style:dotted !important; }
.tree-item.hidden > .tree-label { color:#666; text-decoration:line-through; }

.inspector-child-buttons { display:grid; grid-template-columns:1fr; gap:6px; margin-bottom:10px; }
.btn-add-child { background:#4a6fa5; color:#fff; border:none; padding:8px; border-radius:3px; cursor:pointer; font-size:13px; }
.btn-add-child:hover { background:#5a85c0; }

.tree-project > .tree-label { font-weight:bold; color:#ffd57f; border:1px dashed #ffd57f; padding:4px; border-radius:4px; }
.tree-project.selected > .tree-label { background:#ffd57f; color:#000; }

.image-upload-input { font-size:12px; }
.image-preview { width:100%; height:80px; margin-top:5px; border:1px solid #555; border-radius:3px; background-size:cover; background-position:center; background:#2b2b2b; }
.btn-remove-image { margin-top:5px; background:#8b3a3a; color:#fff; border:none; padding:5px; border-radius:3px; cursor:pointer; font-size:12px; }
.align-btn { background:#3a3a3a; border:1px solid #555; color:#e0e0e0; padding:5px 10px; border-radius:3px; cursor:pointer; flex:1; }
.align-btn:hover { background:#4a4a4a; }
.align-btn.active { background:#6495ed; border-color:#6495ed; color:#fff; }

#canvas-wrapper.preview-mode { box-shadow:none; }
#canvas-wrapper.preview-mode .element-info, #canvas-wrapper.preview-mode .lock-badge { display:none !important; }
#canvas-wrapper.preview-mode .canvas-element.selected { outline:none !important; }
#canvas-wrapper.preview-mode .canvas-element { cursor:default !important; border:none !important; box-shadow:none !important; }

/* Модальные окна */
.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:flex; justify-content:center; align-items:center; z-index:10000; }
.modal-content { background:#2b2b2b; border-radius:8px; width:90%; max-width:700px; max-height:80vh; overflow:hidden; display:flex; flex-direction:column; }
.modal-small { max-width:500px; }
.modal-header { background:#3c3c3c; padding:15px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #555; }
.modal-header h2 { margin:0; font-size:18px; color:#e0e0e0; }
.modal-close { background:none; border:none; color:#aaa; font-size:24px; cursor:pointer; padding:0; width:30px; height:30px; }
.modal-close:hover { color:#fff; }
.modal-body { padding:20px; overflow-y:auto; }

.type-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.type-btn { background:#3a3a3a; border:1px solid #555; color:#e0e0e0; padding:15px; border-radius:4px; cursor:pointer; font-size:16px; transition:all 0.2s; text-align:left; }
.type-btn:hover { background:#4a6fa5; border-color:#6495ed; transform:translateY(-2px); }

.upload-section, .fonts-list-section { margin-bottom:30px; }
.upload-section h3, .fonts-list-section h3 { margin-top:0; color:#aaa; font-size:14px; text-transform:uppercase; border-bottom:1px solid #555; padding-bottom:8px; }
#font-upload-input { display:block; width:100%; margin-bottom:10px; padding:10px; background:#3a3a3a; border:1px solid #555; border-radius:4px; color:#e0e0e0; }
.btn-primary { background:#4a6fa5; color:#fff; border:none; padding:10px 20px; border-radius:4px; cursor:pointer; font-size:14px; }
.btn-primary:hover { background:#5a85c0; }
#upload-progress { margin-top:10px; padding:8px; border-radius:4px; font-size:13px; }
#upload-progress.success { background:rgba(100,200,100,0.2); color:#8f8; }
#upload-progress.error { background:rgba(200,100,100,0.2); color:#f88; }
.fonts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; }
.font-item { background:#3a3a3a; border:1px solid #555; border-radius:4px; padding:12px; display:flex; justify-content:space-between; align-items:center; }
.font-info strong { color:#e0e0e0; font-size:14px; }
.font-info small { color:#888; font-size:11px; }
.btn-delete-font { background:#8b3a3a; color:#fff; border:none; padding:6px 10px; border-radius:3px; cursor:pointer; font-size:12px; }
.btn-delete-font:hover { background:#a54a4a; }

/* ==========================================
   СТИЛИ ПРОВОДНИКА АССЕТОВ
   ========================================== */

.assets-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #555;
}

.assets-section {
    margin-bottom: 30px;
}

.assets-section h3 {
    margin-top: 0;
    color: #aaa;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 1px solid #555;
    padding-bottom: 8px;
}

.assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.asset-item {
    background: #3a3a3a;
    border: 1px solid #555;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.asset-item.used {
    border-color: #4a6fa5;
}

.asset-item.server {
    border-color: #2d5a2d;
}

.asset-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: #2b2b2b;
}

.asset-info {
    padding: 10px;
    flex: 1;
}

.asset-info strong {
    display: block;
    color: #e0e0e0;
    font-size: 13px;
    margin-bottom: 3px;
    word-break: break-all;
}

.asset-info small {
    color: #888;
    font-size: 11px;
}

.asset-actions {
    display: flex;
    gap: 5px;
    padding: 10px;
    border-top: 1px solid #555;
}

.btn-apply {
    flex: 1;
    background: #4a6fa5;
    color: #fff;
    border: none;
    padding: 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.btn-apply:hover {
    background: #5a85c0;
}

.btn-delete-asset {
    background: #8b3a3a;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.btn-delete-asset:hover {
    background: #a54a4a;
}

/* Стили для группировки папок в проводнике */
.asset-folder {
    margin-bottom: 20px;
}

.asset-folder h4 {
    color: #ffd57f;
    font-size: 13px;
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #555;
}

/* Стили для используемых ассетов */
.asset-item.used {
    border-color: #4a6fa5;
    background: rgba(74, 111, 165, 0.1);
}

.asset-item.used .btn-apply {
    background: #2d5a2d;
}

.asset-item.used .btn-apply:hover {
    background: #3d7a3d;
}

/* ==========================================
   СТИЛИ ВКЛАДОК АССЕТОВ
   ========================================== */

.assets-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #555;
    padding-bottom: 0;
}

.tab-btn {
    background: #3a3a3a;
    border: 1px solid #555;
    border-bottom: none;
    color: #aaa;
    padding: 10px 20px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    position: relative;
    top: 1px;
}

.tab-btn:hover {
    background: #4a4a4a;
    color: #e0e0e0;
}

.tab-btn.active {
    background: #2b2b2b;
    color: #e0e0e0;
    border-color: #6495ed;
}

.tab-count {
    background: #555;
    color: #e0e0e0;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 5px;
}

.tab-btn.active .tab-count {
    background: #6495ed;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==========================================
   СТИЛИ ВКЛАДОК АССЕТОВ
   ========================================== */

.assets-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #555;
    padding-bottom: 0;
}

.tab-btn {
    background: #3a3a3a;
    border: 1px solid #555;
    border-bottom: none;
    color: #aaa;
    padding: 10px 20px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    position: relative;
    top: 1px;
}

.tab-btn:hover {
    background: #4a4a4a;
    color: #e0e0e0;
}

.tab-btn.active {
    background: #2b2b2b;
    color: #e0e0e0;
    border-color: #6495ed;
}

.tab-count {
    background: #555;
    color: #e0e0e0;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 5px;
}

.tab-btn.active .tab-count {
    background: #6495ed;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Стили для фильтра папок */
.folder-filter {
    flex: 1;
    background: #3a3a3a;
    border: 1px solid #555;
    color: #e0e0e0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    max-width: 300px;
}

.folder-filter:hover {
    border-color: #6495ed;
}

.folder-filter:focus {
    outline: none;
    border-color: #6495ed;
}

/* Стили для информации об использовании */
.asset-item.expanded {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 280px;
}

.asset-item.expanded .asset-preview {
    height: 150px;
}

.usage-count {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #555;
    color: #4a6fa5;
    font-size: 11px;
    font-weight: bold;
}

.asset-usages {
    margin-top: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    max-height: 150px;
    overflow-y: auto;
}

.usage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    margin-bottom: 3px;
    background: #3a3a3a;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 12px;
}

.usage-item:hover {
    background: #4a6fa5;
}

.usage-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.usage-name {
    color: #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usage-item:hover .usage-name {
    color: #fff;
}

/* Кнопка Применить в используемых ассетах */
.asset-item.expanded .asset-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #555;
}

.asset-item.expanded .btn-apply {
    width: 100%;
}