:root {
    --primary-color: #3498db;
    --primary-dark: #2980b9;
    --secondary-color: #2c3e50;
    --secondary-light: #34495e;
    --accent-color: #e74c3c;
    --accent-dark: #c0392b;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --light-color: #ecf0f1;
    --light-gray: #f8f9fa;
    --dark-color: #34495e;
    --text-color: #333;
    --text-light: #7f8c8d;
    --border-color: #ddd;
    --border-light: #eee;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-heavy: 0 4px 20px rgba(0,0,0,0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f5f7fa;
    color: var(--text-color);
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
    font-size: 14px;
}

.container {
    display: flex;
    height: 100vh;
}

/* 左侧组件面板 */
.components-panel {
    width: 280px;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--dark-color) 100%);
    color: white;
    padding: 20px;
    overflow-y: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

.components-panel.collapsed {
    width: 60px;
}

.components-panel.collapsed .component-category > *:not(.category-title),
.components-panel.collapsed .category-title span {
    display: none;
}

.components-panel.collapsed .category-title {
    justify-content: center;
    padding: 10px 0;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.panel-header h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
}

.toggle-panel {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-panel:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.05);
}

.component-category {
    margin-bottom: 30px;
}

.category-title {
    font-size: 0.95rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #bdc3c7;
}

.category-title i {
    margin-right: 10px;
    opacity: 0.8;
}

.component-item {
    background: rgba(255,255,255,0.05);
    padding: 14px;
    margin-bottom: 8px;
    border-radius: 8px;
    cursor: move;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    backdrop-filter: blur(10px);
}

.component-item:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.component-item i {
    margin-right: 12px;
    font-size: 1.2rem;
    opacity: 0.9;
}

.component-item span {
    font-weight: 500;
}

/* 中间画布区域 */
.canvas-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--light-color);
    position: relative;
}

.toolbar {
    background: white;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
    gap: 20px;
    border-bottom: 1px solid var(--border-light);
    position: relative;
    z-index: 5;
}

.toolbar-section {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.toolbar-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.toolbar-title::before {
    content: "🎨";
    font-size: 1.2em;
}

.page-manager {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--light-gray);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.page-selector {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: white;
    min-width: 160px;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.page-selector:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.toolbar-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.toolbar-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.toolbar-btn:hover::before {
    left: 100%;
}

.toolbar-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.toolbar-btn:active {
    transform: translateY(0);
}

.toolbar-btn.delete {
    background: var(--accent-color);
}

.toolbar-btn.delete:hover {
    background: var(--accent-dark);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.toolbar-btn:disabled {
    background: #95a5a6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.toolbar-btn:disabled:hover::before {
    left: -100%;
}

.toolbar-btn.small {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.canvas-area {
    flex: 1;
    padding: 25px;
    overflow: auto;
    display: flex;
    justify-content: center;
    background: 
        radial-gradient(circle at 20% 80%, rgba(52, 152, 219, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(46, 204, 113, 0.1) 0%, transparent 50%);
}

.canvas {
    width: 100%;
    max-width: 1200px;
    min-height: 800px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-heavy);
    padding: 35px;
    position: relative;
    border: 1px solid var(--border-light);
    transition: all 0.3s;
}

.canvas:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.placeholder-text {
    text-align: center;
    color: var(--text-light);
    font-size: 1.2rem;
    margin-top: 80px;
    line-height: 1.8;
}

.placeholder-text .toolbar-btn {
    margin: 20px auto 0;
}

/* 右侧属性面板 */
.properties-panel {
    width: 350px;
    background: white;
    padding: 25px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    border-left: 1px solid var(--border-light);
}

.properties-panel.collapsed {
    width: 60px;
    padding: 20px 10px;
}

.properties-panel.collapsed .property-content {
    display: none;
}

.properties-panel.collapsed .panel-header {
    flex-direction: column;
    gap: 15px;
}

.properties-panel.collapsed .panel-header h2 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.property-group {
    margin-bottom: 25px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    background: var(--light-gray);
    transition: all 0.3s;
}

.property-group:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
}

.property-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 14px 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    user-select: none;
}

.property-header:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
}

.property-content {
    padding: 20px;
    background: white;
}

.property-item {
    margin-bottom: 18px;
    position: relative;
}

.property-item:last-child {
    margin-bottom: 0;
}

.property-item label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--text-color);
    font-weight: 600;
}

.property-item input, .property-item select, .property-item textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.3s;
    background: white;
}

.property-item input:focus, .property-item select:focus, .property-item textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    transform: translateY(-1px);
}

.property-item textarea {
    resize: vertical;
    min-height: 80px;
    font-family: 'Courier New', monospace;
}

.color-picker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-preview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.color-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.property-item input[type="color"] {
    height: 40px;
    padding: 4px;
    cursor: pointer;
}

.link-properties,
.flex-properties {
    display: none;
}

.internal-pages-select {
    width: 100%;
    margin-top: 8px;
}

.small-btn {
    background: var(--secondary-light);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    margin-top: 8px;
    transition: all 0.3s;
}

.small-btn:hover {
    background: var(--secondary-color);
}

/* 组件样式 */
.draggable-component {
    margin-bottom: 25px;
    padding: 25px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    position: relative;
    cursor: move;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.draggable-component:hover {
    border-color: #bdc3c7;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.draggable-component.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15), 0 4px 20px rgba(52, 152, 219, 0.2);
    background: linear-gradient(135deg, #f8f9fa, white);
}

.component-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-light);
}

.component-title {
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary-color);
}

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

.component-actions button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    font-size: 1rem;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.3s;
}

.component-actions button:hover {
    background: var(--light-gray);
    color: var(--accent-color);
    transform: scale(1.1);
}

/* 图标样式 */
.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
}

.components-panel .icon {
    filter: none;
}

.component-title .icon {
    filter: none;
    opacity: 0.7;
}

.icon-text { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17h18v2H3zm0-4h18v2H3zm0-4h18v2H3zm0-6v2h18V3z"/></svg>'); }
.icon-header { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4h14v2H5zm0 4h14v2H5zm0 4h14v2H5zm0 4h14v2H5zm0 4h14v2H5z"/></svg>'); }
.icon-button { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V5H9v4H5v6h4v4h6v-4h4V9zm-2 4h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>'); }
.icon-image { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>'); }
.icon-divider { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 11h18v2H3z"/></svg>'); }
.icon-link { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>'); }
.icon-form { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/></svg>'); }
.icon-layout { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 13h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zm0 8h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm10 0h6c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zM13 4v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1z"/></svg>'); }
.icon-container { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/></svg>'); }
.icon-columns { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 5v14h18V5H3zm8 12H5V7h6v10zm8 0h-6V7h6v10z"/></svg>'); }
.icon-grid { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z"/></svg>'); }
.icon-interaction { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 11h-2v3H8v2h3v3h2v-3h3v-2h-3zm1-9H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>'); }
.icon-modal { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path d="M8 8h8v2H8zm0 4h8v2H8zm0 4h5v2H8z"/></svg>'); }
.icon-tab { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"/></svg>'); }
.icon-accordion { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H4v20h16V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>'); }
.icon-add { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>'); }
.icon-edit { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'); }
.icon-delete { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>'); }
.icon-preview { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>'); }
.icon-export { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>'); }
.icon-save { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>'); }
.icon-clear { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'); }
.icon-style { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86c-.41 1.02.08 2.19 1.09 2.61zm19.5-3.7L17.07 3.98c-.31-.75-1.04-1.21-1.81-1.23-.26 0-.53.04-.79.15L7.1 5.95c-.75.31-1.21 1.03-1.23 1.8-.01.27.04.54.15.8l4.96 11.97c.31.76 1.05 1.22 1.83 1.23.26 0 .52-.05.77-.15l7.36-3.05c1.02-.42 1.51-1.59 1.09-2.6zM7.88 8.75c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-2 11c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z"/></svg>'); }
.icon-script { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm.5 16h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3c.28 0 .5.22.5.5s-.22.5-.5.5zm0-3h-7c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h7c.28 0 .5.22.5.5s-.22.5-.5.5zm0-3h-7c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h7c.28 0 .5.22.5.5s-.22.5-.5.5zm-2-6V3.5L18.5 9H13z"/></svg>'); }

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal.large {
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80%;
    overflow: hidden;
    box-shadow: var(--shadow-heavy);
    animation: modalAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.modal.large .modal-content {
    max-width: 900px;
    max-height: 90%;
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--secondary-color), var(--dark-color));
    color: white;
}

.modal-header h3 {
    font-size: 1.3rem;
    font-weight: 600;
}

.close-modal {
    background: rgba(255,255,255,0.2);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    transition: all 0.3s;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}

.modal-body {
    padding: 25px;
    flex: 1;
    overflow-y: auto;
}

.modal-footer {
    padding: 20px 25px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--light-gray);
}

/* 编辑器标签页 */
.editor-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 20px;
    background: white;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.tab-btn {
    background: none;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
    flex: 1;
    text-align: center;
}

.tab-btn:hover {
    background: var(--light-gray);
    color: var(--primary-color);
}

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: rgba(52, 152, 219, 0.05);
}

.tab-content {
    display: none;
}

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

/* 样式编辑器特定样式 */
.editor-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.css-editor, .js-editor {
    width: 100%;
    height: 400px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    background: #f8f9fa;
}

.css-editor:focus, .js-editor:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* 类名管理 */
.classes-management, .variables-management, .responsive-management, .events-management {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    height: 400px;
}

.classes-list, .variables-list, .breakpoint-list, .events-list {
    background: var(--light-gray);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.classes-container, .variables-container, .breakpoints-container, .events-container {
    max-height: 300px;
    overflow-y: auto;
    margin: 10px 0;
}

.class-item, .variable-item, .breakpoint-item, .event-item {
    background: white;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.class-item:hover, .variable-item:hover, .breakpoint-item:hover, .event-item:hover {
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.class-item.selected, .variable-item.selected, .breakpoint-item.selected, .event-item.selected {
    border-color: var(--primary-color);
    background: rgba(52, 152, 219, 0.05);
}

.class-name, .variable-name, .breakpoint-name, .event-name {
    font-weight: 500;
    font-family: 'Courier New', monospace;
}

.class-editor, .variable-editor, .breakpoint-editor, .event-editor {
    background: var(--light-gray);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.editor-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* 脚本编辑器特定样式 */
.page-scripts-management {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.page-selector-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-selector-section label {
    font-weight: 600;
    color: var(--text-color);
}

/* 库管理 */
.libraries-management {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.libraries-list, .custom-libraries {
    background: var(--light-gray);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.library-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    background: white;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.library-version {
    font-size: 0.8rem;
    color: var(--text-light);
    background: var(--light-color);
    padding: 2px 6px;
    border-radius: 4px;
}

/* 导出选项 */
.export-options {
    margin-bottom: 25px;
}

.export-options h4, .export-preview h4 {
    margin-bottom: 15px;
    color: var(--secondary-color);
    font-size: 1.1rem;
}

.project-structure {
    background: var(--secondary-color);
    color: white;
    padding: 15px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
}

/* 表单组样式 */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color);
}

.form-group input[type="text"], 
.form-group input[type="url"],
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.form-group input[type="text"]:focus,
.form-group input[type="url"]:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-group input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .components-panel, .properties-panel {
        width: 250px;
    }
    
    .classes-management,
    .variables-management,
    .responsive-management,
    .events-management,
    .libraries-management {
        grid-template-columns: 1fr;
        height: auto;
    }
}

@media (max-width: 992px) {
    .components-panel, .properties-panel {
        width: 200px;
    }
    
    .toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .toolbar-section {
        width: 100%;
        justify-content: space-between;
    }
    
    .modal.large .modal-content {
        max-width: 95%;
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .components-panel, .properties-panel {
        width: 100%;
        height: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 40vh;
    }
    
    .components-panel {
        top: 0;
    }
    
    .properties-panel {
        top: auto;
    }
    
    .canvas-container {
        margin-top: 60px;
        margin-bottom: 60px;
    }
    
    .toolbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 8px 15px;
    }
    
    .toolbar-actions {
        justify-content: center;
        width: 100%;
    }
    
    .page-manager {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-gray);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* 选择文本样式 */
::selection {
    background: rgba(52, 152, 219, 0.2);
    color: inherit;
}

/* 焦点样式 */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* 加载动画 */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* 工具提示 */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary-color);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 1000;
}

.tooltip:hover::after {
    opacity: 1;
}