/*
 * 建筑渲染优化版 — 模块化高级排版
 * 2026 重设计：极简、克制、高信噪比
 */

/* ===== 全局基础 ===== */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --c-bg:        #F6F8FA;
    --c-surface:   #FFFFFF;
    --c-border:    #E5E9EF;
    --c-border-s:  #D1D9E0;
    --c-text:      #0F172A;
    --c-text-2:    #475569;
    --c-text-3:    #94A3B8;
    --c-primary:   #008d94;
    --c-primary-d: #006b70;
    --c-primary-l: rgba(0,141,148,0.08);
    --c-warn:      #F59E0B;
    --c-warn-l:    rgba(245,158,11,0.08);
    --radius-s:    6px;
    --radius-m:    10px;
    --radius-l:    14px;
    --shadow-s:    0 1px 4px rgba(15,23,42,0.05);
    --shadow-m:    0 4px 16px rgba(15,23,42,0.07);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    background: var(--c-bg) !important;
    color: var(--c-text) !important;
}

/* ===== 顶部导航栏 ===== */
.header {
    height: 52px !important;
    padding: 0 !important;
    background: var(--c-surface) !important;
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}
.header-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
/* 减小 logo 高度 */
.header .logo img,
.header img[alt="交立方"] {
    height: 32px !important;
    width: auto !important;
}
.credits-badge {
    background: var(--c-primary) !important;
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.user-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: var(--c-text-2) !important;
}

/* ===== 主布局网格 ===== */
.container {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 16px !important;
    max-width: 100% !important;
    height: calc(100vh - 52px) !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

/* ===== 侧边栏 ===== */
.sidebar {
    background: var(--c-surface) !important;
    border-radius: var(--radius-l) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--shadow-s) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 侧边栏头部（页面标题区） */
.page-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 18px 4px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--c-text) !important;
    background: none !important;
    border-bottom: none !important;
}
.page-title .page-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important; height: 32px !important;
    background: var(--c-primary-l) !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

.page-desc {
    padding: 2px 18px 12px !important;
    font-size: 12px !important;
    color: var(--c-text-3) !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid var(--c-border) !important;
    margin-bottom: 0 !important;
}

/* 提示框 */
.info-box {
    margin: 10px 12px !important;
    padding: 10px 14px !important;
    background: var(--c-warn-l) !important;
    border: 1px solid rgba(245,158,11,0.2) !important;
    border-radius: var(--radius-m) !important;
    border-left: 3px solid var(--c-warn) !important;
    font-size: 12px !important;
    color: #92400E !important;
    line-height: 1.6 !important;
}

/* ===== 模块卡片 ===== */
.module-card {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--c-border) !important;
    transform: none !important;
    transition: background 0.15s ease !important;
    overflow: visible !important;
}
.module-card:last-child { border-bottom: none !important; }
.module-card:hover { transform: none !important; box-shadow: none !important; }

.module-header {
    padding: 12px 18px !important;
    background: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    user-select: none !important;
    transition: background 0.15s !important;
}
.module-header:hover {
    background: var(--c-primary-l) !important;
}
.module-header:active { transform: none !important; }

.module-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.15s !important;
}
.module-card:hover .module-title { color: var(--c-primary) !important; }

.module-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important; height: 26px !important;
    background: var(--c-border) !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
}
.module-card:hover .module-icon {
    background: var(--c-primary-l) !important;
}

.module-arrow,
.module-toggle {
    color: var(--c-text-3) !important;
    font-size: 10px !important;
    transition: transform 0.25s ease !important;
    flex-shrink: 0 !important;
}
.module-card.collapsed .module-arrow,
.module-card.collapsed .module-toggle {
    transform: rotate(-90deg) !important;
}
.module-card:hover .module-arrow,
.module-card:hover .module-toggle { color: var(--c-primary) !important; }

.module-content {
    padding: 4px 18px 16px !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease !important;
    opacity: 1 !important;
}
.module-card.collapsed .module-content {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
}

/* ===== 上传区域 ===== */
.upload-area {
    border: 2px dashed var(--c-border-s) !important;
    border-radius: var(--radius-m) !important;
    background: var(--c-bg) !important;
    padding: 28px 16px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}
.upload-area:hover {
    border-color: var(--c-primary) !important;
    background: var(--c-primary-l) !important;
}
.upload-icon img { width: 40px !important; height: 40px !important; opacity: 0.6 !important; }
.upload-text {
    font-size: 12px !important;
    color: var(--c-text-2) !important;
    line-height: 1.5 !important;
}

/* ===== 表单元素 ===== */
.form-group { margin-bottom: 12px !important; }

.form-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--c-text-2) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

.form-select,
select,
textarea,
input[type="text"],
input[type="number"] {
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--c-text) !important;
    background: var(--c-surface) !important;
    border: 1px solid var(--c-border-s) !important;
    border-radius: var(--radius-s) !important;
    outline: none !important;
    transition: border-color 0.15s !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.form-select:focus, select:focus, textarea:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,141,148,0.1) !important;
}
textarea { resize: vertical !important; min-height: 72px !important; }

/* ===== 标签云 ===== */
.tag-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
}
.tag {
    padding: 5px 11px !important;
    background: var(--c-bg) !important;
    border: 1px solid var(--c-border-s) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--c-text-2) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    position: static !important;
    overflow: visible !important;
}
.tag::before { display: none !important; }
.tag:hover {
    background: var(--c-primary-l) !important;
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}
.tag.active, .tag.selected {
    background: var(--c-primary) !important;
    color: #fff !important;
    border-color: var(--c-primary) !important;
    box-shadow: none !important;
}

/* 快捷提示词标签 */
.prompt-tpl {
    display: inline-block !important;
    padding: 4px 10px !important;
    background: var(--c-bg) !important;
    border: 1px solid var(--c-border-s) !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    color: var(--c-text-2) !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
.prompt-tpl:hover {
    background: var(--c-primary-l) !important;
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
}

/* ===== 滑块 ===== */
.slider-group { margin-bottom: 14px !important; }
.slider {
    width: 100% !important; height: 4px !important;
    border-radius: 2px !important;
    background: var(--c-border) !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 16px !important; height: 16px !important;
    border-radius: 50% !important;
    background: var(--c-primary) !important;
    cursor: pointer !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 6px rgba(0,141,148,0.4) !important;
}

/* ===== 主按钮 ===== */
.btn-primary,
#render-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: calc(100% - 24px) !important;
    margin: 8px 12px 14px !important;
    padding: 11px 20px !important;
    background: var(--c-primary) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--radius-m) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(0,141,148,0.3) !important;
}
.btn-primary:hover:not(:disabled),
#render-btn:hover:not(:disabled) {
    background: var(--c-primary-d) !important;
    box-shadow: 0 6px 18px rgba(0,141,148,0.38) !important;
    transform: translateY(-1px) !important;
}
.btn-primary:disabled { background: #D1D5DB !important; color: #9CA3AF !important; box-shadow: none !important; cursor: not-allowed !important; }

/* ===== 右侧主内容区 ===== */
.main-content {
    background: var(--c-surface) !important;
    border-radius: var(--radius-l) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--shadow-s) !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 顶部视图控制栏 */
.canvas-view-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--c-border) !important;
    background: var(--c-surface) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.view-mode-group {
    display: flex !important;
    gap: 2px !important;
    background: var(--c-bg) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 8px !important;
    padding: 3px !important;
}
.view-mode-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--c-text-2) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
.view-mode-btn:hover { background: var(--c-surface) !important; color: var(--c-text) !important; }
.view-mode-btn.active {
    background: var(--c-surface) !important;
    color: var(--c-primary) !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.08) !important;
    font-weight: 600 !important;
}
.view-info { font-size: 12px !important; color: var(--c-text-3) !important; font-weight: 500 !important; }

/* 画布区域 */
.canvas-container {
    flex: 1 1 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--c-bg) !important;
}
.canvas-grid-texture {
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(var(--c-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--c-border) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    opacity: 0.5 !important;
}
.canvas-content {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
}

/* 空状态 */
.canvas-empty-state {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 40px !important;
    background: var(--c-surface) !important;
    border: 1px dashed var(--c-border-s) !important;
    border-radius: var(--radius-l) !important;
    box-shadow: var(--shadow-s) !important;
    text-align: center !important;
}
.empty-state-icon { font-size: 32px !important; opacity: 0.4 !important; }
.empty-state-title { font-size: 15px !important; font-weight: 600 !important; color: var(--c-text) !important; }
.empty-state-desc { font-size: 12px !important; color: var(--c-text-3) !important; max-width: 200px !important; }

/* 底部操作栏 */
.canvas-operations {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    border-top: 1px solid var(--c-border) !important;
    background: var(--c-surface) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.operations-left {
    display: flex !important;
    gap: 4px !important;
}
.operation-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 13px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--c-text-2) !important;
    background: var(--c-bg) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-s) !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
.operation-btn:hover:not(:disabled) {
    background: var(--c-surface) !important;
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
}
.operation-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

/* 生成按钮 */
.btn-primary-action,
#render-btn-canvas {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    background: var(--c-primary) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--radius-m) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0,141,148,0.3) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}
.btn-primary-action:hover,
#render-btn-canvas:hover {
    background: var(--c-primary-d) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0,141,148,0.38) !important;
}

/* ===== 滚动条 ===== */
.sidebar::-webkit-scrollbar { width: 4px !important; }
.sidebar::-webkit-scrollbar-track { background: transparent !important; }
.sidebar::-webkit-scrollbar-thumb { background: var(--c-border-s) !important; border-radius: 4px !important; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #9CA3AF !important; }

/* ===== 禁止一切深色背景残留 ===== */
.sidebar, .sidebar *, .module-card, .module-header,
.module-content, .form-group, .tag-cloud {
    background-image: none !important;
}
[style*="background: #2"], [style*="background-color: #2"],
[style*="background: #3"], [style*="background-color: #3"] {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}
[style*="color: #2"], [style*="color: #3"] { color: var(--c-text) !important; }

/* ===== 可见性保护 ===== */
.sidebar, .module-card, .module-header, .module-content,
.form-label, .tag, .page-title, .page-desc, .info-box {
    visibility: visible !important;
    opacity: 1 !important;
}
/* 排除 collapsed 状态的 module-content */
.module-card.collapsed .module-content { opacity: 0 !important; }

/* ===== 打印 ===== */
@media print { .sidebar { display: none !important; } }

/* ===== 覆盖 design-tokens 变量 + function-panel 冲突修复 2026 ===== */
:root {
    --layout-function-panel-width: 360px !important;
    --layout-function-panel-collapsed: 64px !important;
    --spacing-lg: 0px !important;
    --spacing-md: 0px !important;
    --spacing-sm: 0px !important;
}

/* 侧边栏：强制宽度 + 消除 flex gap */
.sidebar {
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    gap: 0 !important;
    padding: 0 !important;
}

/* 网格第一列跟着宽度走 */
.container {
    grid-template-columns: 360px 1fr !important;
}

/* 折叠按钮直接隐藏，不再允许图标模式 */
.panel-collapse-toggle,
.sidebar-collapse-btn,
.sidebar.collapsed,
[class*= collapse-toggle] {
    display: none !important;
}
/* 强制不收起 */
.sidebar.collapsed {
    width: 360px !important;
    padding: 0 !important;
}
/* 恢复被 collapsed 隐藏的元素 */
.sidebar.collapsed .page-title span:not(.page-icon),
.sidebar.collapsed .page-desc,
.sidebar.collapsed .info-box,
.sidebar.collapsed .module-title span:not(.module-icon),
.sidebar.collapsed .form-label,
.sidebar.collapsed .form-select,
.sidebar.collapsed .tag-cloud,
.sidebar.collapsed .checkbox-group,
.sidebar.collapsed .slider-group,
.sidebar.collapsed .upload-text,
.sidebar.collapsed .btn span:not(.btn-icon) {
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin: revert !important;
    padding: revert !important;
}

/* 模块内容之间不要有额外 margin/gap */
.module-card + .module-card { margin-top: 0 !important; }

/* 消除一切直接子元素的 margin */
.sidebar > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* info-box 紧跟 page-desc */
.info-box { margin: 8px 12px 0 !important; }

/* 重新给 render-btn 合适的 margin */
#render-btn.btn-primary, .btn.btn-primary {
    margin: 10px 12px 12px !important;
    width: calc(100% - 24px) !important;
}