/* ============================================================================
 * 3D 镜头控制器 · CameraShot 样式
 * ========================================================================== */
.cs-root {
    --bg: #0f141c;
    --bg-panel: #161c28;
    --bg-panel-2: #1e2430;
    --bg-panel-3: #2b3140;
    --border: #2b3140;
    --text: #e6edf7;
    --text-2: #cfd5e0;
    --text-3: #8c99b3;
    --text-4: #6b7a95;
    --brand: #4aa3ff;
    --brand-2: #3a91ed;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #f87171;

    background: var(--bg);
    color: var(--text);
    min-height: calc(100vh - 60px);
    padding: 20px;
    box-sizing: border-box;
}

.cs-wrap { display:flex; flex-direction:column; gap:16px; max-width:1600px; margin:0 auto; }

/* 顶部标题栏 */
.cs-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    background: var(--bg-panel); border:1px solid var(--border);
    border-radius:12px; padding:16px 20px;
}
.cs-header-title { display:flex; gap:14px; align-items:flex-start; }
.cs-header-title > i {
    font-size:26px; color: var(--brand);
    background: linear-gradient(135deg, rgba(74,163,255,.15), rgba(74,163,255,.05));
    width:46px; height:46px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
}
.cs-title { font-size:18px; font-weight:600; color: var(--text); }
.cs-sub { font-size:12px; color: var(--text-3); margin-top:4px; line-height:1.5; max-width:820px; }
.cs-sub a { color: var(--brand); text-decoration:none; }
.cs-sub a:hover { text-decoration:underline; }
.cs-header-actions { display:flex; gap:8px; }

/* 按钮 */
.cs-btn {
    padding:8px 14px; border-radius:6px;
    background: var(--bg-panel-3); border:1px solid var(--border);
    color: var(--text-2); font-size:12px; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
    transition: all .15s ease;
}
.cs-btn:hover:not(:disabled) { background:#3a3f4d; color: var(--text); }
.cs-btn:disabled { opacity:.45; cursor:not-allowed; }
.cs-btn.primary {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    border-color: transparent; color:#fff; font-weight:500;
}
.cs-btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.cs-btn.ghost { background:transparent; }
.cs-btn.ghost:hover:not(:disabled) { background: var(--bg-panel-2); }

/* 主区三栏 */
.cs-main {
    display:grid; grid-template-columns: 340px 1fr 300px;
    gap:16px;
}
.cs-col {
    background: var(--bg-panel); border:1px solid var(--border);
    border-radius:12px; padding:14px 16px;
    display:flex; flex-direction:column; min-width:0;
}
.cs-col-title {
    font-size:13px; font-weight:600; color: var(--text-2);
    padding-bottom:10px; margin-bottom:12px;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:6px;
}
.cs-col-title i { color: var(--brand); }
.cs-col-subtitle {
    font-size:11px; font-weight:600; color: var(--text-3);
    margin: 10px 0 6px; text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 左栏 · 图片上传 */
.cs-upload-zone {
    flex:1; min-height:260px;
    background: var(--bg-panel-2); border:2px dashed var(--border);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; overflow:hidden;
    transition: all .18s ease;
    position:relative;
}
.cs-upload-zone:hover { border-color: var(--brand-2); background: var(--bg-panel-3); }
.cs-upload-zone.is-dragover { border-color: var(--brand); background: rgba(74,163,255,.1); }
.cs-upload-zone.has-image {
    border-style: solid;
    border-color: var(--border);
    padding:4px;
}
.cs-upload-zone img {
    max-width:100%; max-height:100%;
    object-fit:contain; border-radius:6px;
}
.cs-upload-hint {
    text-align:center; color: var(--text-3);
    font-size:13px;
}
.cs-upload-hint i {
    font-size: 42px; color: var(--text-4);
    margin-bottom: 12px; display:block;
}
.cs-upload-tip { font-size:11px; color: var(--text-4); margin-top:4px; }
.cs-file-info {
    margin-top:8px; font-size:11px; color: var(--text-3);
    padding:6px 10px; background: var(--bg-panel-2);
    border:1px solid var(--border); border-radius:6px;
    display:flex; align-items:center; gap:6px;
}
.cs-file-info > i { color: var(--brand); }
.cs-remove {
    margin-left:auto; width:20px; height:20px;
    border-radius:4px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    color: var(--text-4);
}
.cs-remove:hover { background: rgba(248,113,113,.15); color: var(--danger); }

/* 中栏 · 3D 球体 */
.cs-col-sphere { min-width:0; }
.cs-sphere-wrap {
    position:relative;
    display:flex; justify-content:center; align-items:center;
    padding:10px;
    background: radial-gradient(ellipse at center, rgba(74,163,255,.04), transparent 70%);
    border-radius:8px;
    margin-bottom:14px;
    cursor: grab;
    user-select: none;
}
.cs-sphere-wrap:active { cursor: grabbing; }
.cs-sphere {
    width: 200px; height: 200px;
    filter: drop-shadow(0 8px 16px rgba(74,163,255,.2));
}
.cs-sphere-label {
    position:absolute; top:10px; right:10px;
    display:flex; flex-direction:column; gap:4px;
    font-size:10px;
}
.cs-axis {
    background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
    padding:3px 8px; border-radius:10px;
    color: var(--text-2);
    display:inline-flex; align-items:center; gap:4px;
}
.cs-axis i { color: var(--brand); opacity:.8; font-size:9px; }
.cs-axis b { color: var(--text); font-weight:600; margin-left:2px; }

/* 滑块组 */
.cs-slider-row { display:flex; flex-direction:column; gap:16px; }
.cs-slider { display:flex; flex-direction:column; gap:4px; }
.cs-slider label {
    font-size:12px; color: var(--text-2); font-weight:500;
    display:flex; align-items:center; gap:8px;
}
.cs-slider .cs-val {
    color: var(--brand); font-weight:600;
    font-family:'Menlo','Monaco',monospace;
    font-size:11px;
}
.cs-slider .cs-tag {
    margin-left:auto;
    font-size:10px; padding:1px 6px;
    background: rgba(74,163,255,.15); color: var(--brand);
    border-radius:8px;
}
.cs-slider input[type=range] {
    width:100%;
    -webkit-appearance:none;
    background: transparent;
    height: 20px;
}
.cs-slider input[type=range]::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(90deg, var(--bg-panel-3), var(--brand-2));
    border-radius:2px;
}
.cs-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:16px; height:16px; border-radius:50%;
    background: var(--brand); border:2px solid #fff;
    margin-top: -6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(74,163,255,.4);
    transition: transform .1s;
}
.cs-slider input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
.cs-slider input[type=range]::-moz-range-track {
    height:4px; background: var(--bg-panel-3); border-radius:2px;
}
.cs-slider input[type=range]::-moz-range-thumb {
    width:16px; height:16px; border-radius:50%;
    background: var(--brand); border:2px solid #fff;
    cursor: pointer;
}
.cs-range-ticks {
    display:flex; justify-content:space-between;
    font-size:10px; color: var(--text-4);
    padding: 0 2px;
}

/* 右栏 · 配置 */
.cs-field { margin-bottom: 14px; }
.cs-field > label {
    display:block; margin-bottom:6px;
    font-size:12px; font-weight:600; color: var(--text-2);
}
.cs-field select {
    width:100%; box-sizing:border-box;
    padding:7px 10px;
    background: var(--bg-panel-2);
    border:1px solid var(--border);
    color: var(--text);
    border-radius:6px;
    font-size:12px;
    outline:none;
}
.cs-field select:focus { border-color: var(--brand); }
.cs-hint { margin-top:6px; font-size:10.5px; color: var(--text-3); line-height:1.5; }

/* 参数网格 */
.cs-param-grid {
    display:grid; grid-template-columns: 1fr 1fr; gap:6px;
    padding:10px;
    background: var(--bg-panel-2);
    border:1px dashed var(--border);
    border-radius:6px;
}
.cs-param-item {
    display:flex; justify-content:space-between; align-items:center;
    font-size:11px;
}
.cs-param-item span { color: var(--text-4); font-family:'Menlo','Monaco',monospace; }
.cs-param-item b { color: var(--brand); font-weight:600; font-family:'Menlo','Monaco',monospace; }

/* 预设 */
.cs-preset-grid {
    display:grid; grid-template-columns: repeat(2, 1fr);
    gap:6px;
}
.cs-preset-grid button {
    padding:7px 8px;
    background: var(--bg-panel-2);
    border:1px solid var(--border);
    color: var(--text-2);
    border-radius:6px;
    font-size:11.5px; cursor:pointer;
    display:flex; align-items:center; gap:5px; justify-content:flex-start;
    transition: all .15s ease;
}
.cs-preset-grid button:hover {
    background: var(--bg-panel-3);
    color: var(--text); border-color: var(--brand-2);
}
.cs-preset-grid button i { color: var(--brand); font-size:11px; }

/* 底部 · AI 生成 + 输出 */
.cs-bottom {
    background: var(--bg-panel); border:1px solid var(--border);
    border-radius:12px; padding:14px 18px;
}
.cs-bottom-head {
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.cs-bottom-title {
    font-size:13px; font-weight:600; color: var(--text);
    display:flex; align-items:center; gap:6px;
}
.cs-bottom-title i { color: var(--brand); }
.cs-bottom-actions { display:flex; gap:8px; flex-wrap:wrap; }

.cs-prompt-output {
    width:100%; box-sizing:border-box;
    background: var(--bg-panel-2);
    border:1px solid var(--border);
    color: var(--text);
    border-radius:8px;
    padding:12px 14px;
    font-family:'Menlo','Monaco','Consolas',monospace;
    font-size:12.5px; line-height:1.7;
    resize: vertical;
    outline:none;
    min-height: 140px;
}
.cs-prompt-output:focus { border-color: var(--brand); }

.cs-tip {
    margin-top:10px;
    padding:8px 12px;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.2);
    border-radius:6px;
    font-size:11px; color: var(--text-2); line-height:1.6;
    display:flex; align-items:flex-start; gap:6px;
}
.cs-tip i { color: var(--warning); margin-top:2px; }

/* 响应式 */
@media (max-width: 1280px) {
    .cs-main { grid-template-columns: 280px 1fr 260px; }
}
@media (max-width: 1024px) {
    .cs-main { grid-template-columns: 1fr; }
    .cs-col-image .cs-upload-zone { min-height: 220px; }
}

/* ---------- 无限画布「多视角」模态（CameraShot.openForNode） ---------- */
.cs-modal-mask {
    position: fixed; inset: 0; z-index: 10050;
    background: rgba(6, 10, 16, .72); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; box-sizing: border-box;
}
.cs-modal {
    width: min(1480px, 96vw); max-height: 92vh;
    display: flex; flex-direction: column;
    background: #0f141c; border: 1px solid #2b3140; border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,.55); overflow: hidden;
}
.cs-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-bottom: 1px solid #2b3140;
    background: #161c28; color: #e6edf7; font-weight: 600; font-size: 14px;
    flex: 0 0 auto;
}
.cs-modal-head span i { color: #4aa3ff; margin-right: 8px; }
.cs-modal-close {
    background: transparent; border: none; color: #8c99b3; cursor: pointer;
    font-size: 16px; width: 30px; height: 30px; border-radius: 8px;
}
.cs-modal-close:hover { background: #2b3140; color: #e6edf7; }
.cs-modal .cs-root { overflow: auto; min-height: 0; padding: 16px; }
.cs-modal .cs-root .cs-wrap { max-width: none; }