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 { background:#3c3c3c; border-bottom:1px solid #555; display:flex; align-items:center; padding:5px 10px; gap:5px; flex-shrink:0; flex-wrap:wrap; min-height:40px; }
#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; }

#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; overflow:visible !important; }
.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 { display: block !important; visibility: visible !important; font-size: 12px !important; color: #aaa !important; text-transform: uppercase !important; }
.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 { font-size:12px; padding:4px 8px;  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; }

/* Модальные окна */
.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%;
}

/* Стили для группировки папок в проводнике */
.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; }

/* Стили вкладок ассетов */
.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; }

/* Стили для используемых ассетов */
.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; }

/* Стили для информации об использовании */
.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%; }

/* Стили для фильтра папок */
.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; }

/* === СТИЛИ МОДАЛЬНЫХ ОКОН СОХРАНЕНИЯ/ЗАГРУЗКИ === */

.save-options, .load-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.save-option-btn {
    background: #3a3a3a;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    color: #e0e0e0;
}

.save-option-btn:hover {
    background: #4a4a4a;
    border-color: #6495ed;
    transform: translateY(-2px);
}

.save-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.save-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.save-desc {
    font-size: 12px;
    color: #888;
}

.save-status {
    padding: 10px;
    border-radius: 4px;
    font-size: 13px;
}

.save-status.success {
    background: rgba(100, 200, 100, 0.2);
    color: #8f8;
}

.save-status.error {
    background: rgba(200, 100, 100, 0.2);
    color: #f88;
}

.save-status.info {
    background: rgba(100, 150, 255, 0.2);
    color: #8bf;
}

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

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

.project-card {
    background: #3a3a3a;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-info {
    margin-bottom: 15px;
}

.project-info strong {
    display: block;
    color: #e0e0e0;
    font-size: 14px;
    margin-bottom: 5px;
    word-break: break-all;
}

.project-info small {
    display: block;
    color: #888;
    font-size: 11px;
    margin-bottom: 3px;
}

.project-actions {
    display: flex;
    gap: 8px;
}

.btn-load-project {
    flex: 1;
    background: #4a6fa5;
    color: #fff;
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

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

.btn-delete-project {
    background: #8b3a3a;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

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

/* === СТИЛИ МОДАЛЬНОГО ОКНА СПРАВКИ === */

.help-content {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;
}

.help-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #555;
}

.help-section:last-child {
    border-bottom: none;
}

.help-section h3 {
    color: #ffd57f;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
}

.help-section p {
    color: #e0e0e0;
    line-height: 1.6;
    margin: 0;
}

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

.help-item {
    background: #3a3a3a;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 15px;
}

.help-item h4 {
    color: #6495ed;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 8px;
}

.help-item p {
    color: #aaa;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.help-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.help-list li {
    padding: 8px 0;
    color: #e0e0e0;
    font-size: 13px;
    border-bottom: 1px solid #444;
}

.help-list li:last-child {
    border-bottom: none;
}

.help-list strong {
    color: #ffd57f;
}

/* === СТИЛИ СТАРТОВОГО ЭКРАНА === */

#welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e1e1e 0%, #2b2b2b 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}

.welcome-content {
    text-align: center;
    max-width: 800px;
    padding: 40px;
}

.welcome-content h1 {
    font-size: 48px;
    color: #ffd57f;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(255, 213, 127, 0.3);
}

.welcome-subtitle {
    color: #aaa;
    font-size: 18px;
    margin-bottom: 40px;
}

.welcome-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.welcome-btn {
    background: #3a3a3a;
    border: 2px solid #555;
    border-radius: 12px;
    padding: 30px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    color: #e0e0e0;
}

.welcome-btn:hover {
    background: #4a4a4a;
    border-color: #6495ed;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(100, 149, 237, 0.3);
}

.welcome-btn.primary {
    border-color: #4a6fa5;
}

.welcome-btn.primary:hover {
    border-color: #6495ed;
}

.welcome-btn.continue {
    border-color: #2d5a2d;
    width: 100%;
}

.welcome-btn.continue:hover {
    border-color: #4a9a4a;
}

.welcome-icon {
    font-size: 64px;
    margin-bottom: 15px;
}

.welcome-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.welcome-desc {
    font-size: 14px;
    color: #888;
}

.welcome-presets {
    margin-top: 20px;
    padding: 15px;
    background: #3a3a3a;
    border-radius: 8px;
}

.welcome-presets h4 {
    color: #aaa;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.preset-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.preset-buttons button {
    background: #2b2b2b;
    border: 1px solid #555;
    color: #e0e0e0;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.preset-buttons button:hover {
    background: #4a6fa5;
    border-color: #6495ed;
}

/* === СТИЛИ ДЛЯ ЗУМА И ВЬЮПОРТА === */

/* === СТИЛИ ДЛЯ ЗУМА И ВЬЮПОРТА === */

#zoom-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #3a3a3a;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 100;
}

#zoom-controls button {
    background: #4a4a4a;
    border: none;
    color: #e0e0e0;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
}

#zoom-controls button:hover {
    background: #6495ed;
    color: #fff;
}

#zoom-level {
    color: #e0e0e0;
    font-size: 13px;
    font-weight: bold;
    min-width: 50px;
    text-align: center;
    user-select: none;
}

/* Удалено: margin auto больше не нужно */

/* === ПАНЕЛЬ ЗУМА В САЙДБАРЕ === */
#hierarchy-panel {
    display: flex;
    flex-direction: column;
}

#hierarchy-tree {
    flex: 1; /* Растягивает дерево, чтобы зум уехал вниз */
}

#zoom-controls {
    position: static !important; /* Убираем прилипание к холсту */
    transform: none !important;
    background: #2b2b2b;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    box-shadow: none;
}

#zoom-controls button {
    width: 28px;
    height: 28px;
    font-size: 14px;
}

/* === МОДАЛЬНОЕ ОКНО ПРЕДПРОСМОТРА === */

.preview-window-header h2 {
    margin: 0;
    font-size: 18px;
    color: #ffd57f;
}

/* Убираем выделение в режиме предпросмотра */
#preview-window-modal 

/* === ПРЕДПРОСМОТР ПРОЕКТА (ИЗОЛИРОВАННЫЙ ПОЛНЫЙ ЭКРАН) === */
#preview-window-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100000 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

#preview-window-modal .modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
}

.preview-window-header {
    height: 48px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px !important;
    background: #1e1e1e !important;
    border-bottom: 1px solid #444 !important;
}

.preview-window-header h2 {
    margin: 0 !important;
    font-size: 16px !important;
    color: #ffd57f !important;
}

.preview-window-body {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    background: #111 !important;
    position: relative !important;
    padding: 0 !important;
}

#preview-canvas {
    position: relative !important;
    background: #2b2b2b !important;
    box-shadow: 0 0 60px rgba(0,0,0,0.7) !important;
    transform-origin: center center !important;
    will-change: transform !important;
}

#preview-window-modal .preview-element {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* === ИСПРАВЛЕНИЕ ЧЕКСОКСОВ В ИНСПЕКТОРЕ === */
.inspector-field input[type="checkbox"] {
    margin: 0 !important;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.inspector-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}


/* Стили для Pickr */
.pickr-container .pcr-button {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 2px solid #555;
}
.pcr-app {
    background: #2a2a2a !important;
    border: 1px solid #555 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}
.pcr-app .pcr-interaction input {
    background: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
}
.pcr-app .pcr-interaction .pcr-save {
    background: #4a6fa5 !important;
    color: #fff !important;
}
.pcr-app .pcr-interaction .pcr-clear {
    background: #8b3a3a !important;
    color: #fff !important;
}

/* Вкладки в модальном окне облака */
.cloud-tabs { display: flex; gap: 10px; border-bottom: 1px solid #555; padding-bottom: 10px; }
.cloud-tab { background: #2a2a2a; border: 1px solid #555; color: #aaa; padding: 8px 16px; cursor: pointer; border-radius: 4px 4px 0 0; font-size: 14px; }
.cloud-tab.active { background: #4a6fa5; color: #fff; border-color: #4a6fa5; }
.cloud-tab:hover:not(.active) { background: #3a3a3a; }

/* Список проектов */
.cloud-project-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #444; transition: background 0.2s; }
.cloud-project-item:hover { background: #3a3a3a; }
.cloud-project-name { font-size: 14px; color: #fff; cursor: pointer; flex: 1; }
.cloud-project-name:hover { color: #4a9a4a; }
.cloud-project-actions { display: none; gap: 5px; }
.cloud-project-item:hover .cloud-project-actions { display: flex; }
.cloud-action-btn { background: none; border: 1px solid #555; color: #aaa; padding: 4px 8px; cursor: pointer; border-radius: 3px; font-size: 12px; }
.cloud-action-btn:hover { background: #555; color: #fff; }
.cloud-action-btn.delete:hover { background: #8b3a3a; border-color: #8b3a3a; color: #fff; }

/* Исправление для модалки шрифтов */
.upload-section input[type="file"],
.upload-section button {
    box-sizing: border-box;
    max-width: 100%;
}

.upload-section {
    overflow: hidden;
}

#font-upload-input {
    box-sizing: border-box;
}

.btn-primary {
    box-sizing: border-box;
}

/* ==========================================
   СТИЛИ ТИПОГРАФИКИ
   ========================================== */

.typography-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}

.typography-card {
    background: #2b2b2b;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s;
}

.typography-card:hover {
    border-color: #6495ed;
    box-shadow: 0 2px 8px rgba(100, 149, 237, 0.2);
}

.typography-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
}

.typography-info {
    margin-bottom: 15px;
}

.typography-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}

.typography-row span {
    display: inline-block;
    margin-right: 10px;
}

.typography-previews {
    background: #1a1a1a;
    border-radius: 6px;
    padding: 15px;
    margin-top: 10px;
}

.typography-preview {
    padding: 8px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    word-wrap: break-word;
}

.typography-preview:last-child {
    margin-bottom: 0;
}

/* === ХОЛСТ И ЗУМ (РАБОЧАЯ ВЕРСИЯ) === */

/* === ИНСПЕКТОР: ВОЗВРАЩАЕМ ПОДПИСИ X, Y === */


/* === ХОЛСТ И ЗУМ (ЧИСТАЯ ВЕРСИЯ) === */






#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;
}

/* === ИНСПЕКТОР: ПОДПИСИ X, Y === */










/* === ИДЕАЛЬНЫЙ ЗУМ И СКРОЛЛ === */
#canvas-area {
    flex: 1;
    background: #1e1e1e;
    overflow: auto;
    position: relative;
    padding: 20px;
}
#canvas-viewport {
    margin: auto; /* Центрирует если меньше, прижимает к 0,0 если больше! */
    position: relative;
}
#canvas-wrapper {
    background: #2b2b2b;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    transform-origin: 0 0; /* Масштабируем строго от левого верхнего угла */
    position: relative;
}


/* === СВОРАЧИВАНИЕ ДЕРЕВА === */
.collapse-toggle {
    display: inline-block;
    width: 16px;
    cursor: pointer;
    color: #888;
    font-size: 10px;
    user-select: none;
}
.collapse-toggle:hover {
    color: #fff;
}
.collapse-placeholder {
    display: inline-block;
    width: 16px;
}
.tree-children.collapsed {
    display: none;
}