/* ═══════════════════════════════════════════════════════ */
/* Strategy Map Editor Styles                               */
/* ═══════════════════════════════════════════════════════ */

.editor-scene {
    background: #12141c;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #ccc;
}

.ed-layout {
    display: flex;
    flex-direction: column;
    width: 960px;
    height: 540px;
    position: relative;
    background: #12141c;
}

/* ── Menubar: now uses studio-menubar (injected by editor-menubar.js) ── */

/* ── Content area ── */
.ed-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.ed-canvas-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #12141e;
    border-right: 1px solid #2a2d3a;
}

.ed-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Right panel ── */
.ed-panel-container {
    width: 240px;
    flex-shrink: 0;
    overflow: hidden;
}

.ed-panel {
    width: 100%;
    height: 100%;
    background: #232840;
    border-left: 1px solid #3C4660;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

.ed-section {
    padding: 8px;
    border-bottom: 1px solid #2A3040;
}

.ed-section-title {
    font-size: 11px;
    font-weight: bold;
    color: #AAA;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Tool buttons ── */
.ed-tool-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}

.ed-tool-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: #2A3A50;
    border: 1px solid #3C4660;
    border-radius: 3px;
    color: #CCC;
    font-size: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.ed-tool-btn:hover {
    background: #3A5070;
    color: #FFF;
}
.ed-tool-btn.active {
    background: #3C6090;
    border-color: #5A8AC0;
    color: #FFD700;
}

/* ── Input elements ── */
.ed-label {
    display: block;
    font-size: 10px;
    color: #888;
    margin: 8px 0 3px;
}

.ed-input {
    width: 100%;
    padding: 5px 8px;
    background: #1A1E28;
    border: 1px solid #3C4660;
    border-radius: 3px;
    color: #DDD;
    font-size: 11px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ed-input:focus {
    border-color: #5A8AC0;
    box-shadow: 0 0 0 2px rgba(90,138,192,0.3);
}

.ed-select {
    width: 100%;
    padding: 5px 8px;
    background: #1A1E28;
    border: 1px solid #3C4660;
    border-radius: 3px;
    color: #DDD;
    font-size: 11px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ed-select:focus {
    border-color: #5A8AC0;
    box-shadow: 0 0 0 2px rgba(90,138,192,0.3);
}

.ed-btn {
    padding: 4px 10px;
    background: #3C5A8C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    font-size: 11px;
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
    transition: background 0.15s, box-shadow 0.15s;
}
.ed-btn:hover {
    background: #4A6EA0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.ed-btn-add {
    background: #2A5A3C;
}
.ed-btn-add:hover {
    background: #3A7A50;
}

.ed-muted {
    color: #555;
    font-size: 10px;
    font-style: italic;
}

/* ── Building tags ── */
.ed-building-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 3px;
}

.ed-building-tag {
    padding: 2px 6px;
    background: #2A3A50;
    border-radius: 3px;
    color: #BBB;
    font-size: 9px;
}

/* ── Garrison rows ── */
.ed-garrison-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 2px 0;
}

.ed-unit-name {
    flex: 1;
    font-size: 10px;
    color: #BBB;
}

.ed-unit-count {
    width: 24px;
    text-align: center;
    font-size: 11px;
    color: #FFF;
    font-weight: bold;
}

.ed-sm-btn {
    width: 18px;
    height: 18px;
    background: #2A3A50;
    border: 1px solid #3C4660;
    border-radius: 3px;
    color: #CCC;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.ed-sm-btn:hover {
    background: #3A5070;
    color: #FFF;
}

/* ── Country list ── */
.ed-country-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 2px;
}
.ed-country-item:hover {
    background: #2A3A50;
}
.ed-country-item.active {
    background: #3A5070;
    outline: 1px solid #5A8AC0;
}

.ed-country-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.ed-country-name {
    flex: 1;
    font-size: 11px;
    color: #DDD;
}

.ed-country-count {
    font-size: 9px;
    color: #888;
}

/* ── Terrain palette ── */
.ed-terrain-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.ed-terrain-swatch {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: rgba(255,255,255,0.7);
    border: 2px solid transparent;
}
.ed-terrain-swatch:hover {
    border-color: rgba(255,255,255,0.5);
}
.ed-terrain-swatch.active {
    border-color: #FFD700;
    box-shadow: 0 0 4px rgba(255,215,0,0.4);
}

/* ── Brush sizes ── */
.ed-brush-sizes {
    display: flex;
    gap: 4px;
}

.ed-brush-btn {
    width: 28px;
    height: 28px;
    background: #2A3A50;
    border: 1px solid #3C4660;
    border-radius: 3px;
    color: #CCC;
    font-size: 11px;
    cursor: pointer;
}
.ed-brush-btn.active {
    background: #3C6090;
    border-color: #FFD700;
    color: #FFD700;
}

/* ── Place items ── */
.ed-place-item {
    padding: 4px 6px;
    font-size: 10px;
    color: #BBB;
    cursor: pointer;
    border-radius: 3px;
    margin-bottom: 2px;
}
.ed-place-item:hover {
    background: #2A3A50;
    color: #FFF;
}
.ed-place-item.active {
    background: #3A5070;
    color: #FFD700;
}

/* ── Toast notification ── */
.ed-toast {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(60,90,140,0.9);
    color: #FFF;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    z-index: 200;
}
.ed-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Scrollbar styling ── */
.ed-panel::-webkit-scrollbar {
    width: 4px;
}
.ed-panel::-webkit-scrollbar-track {
    background: transparent;
}
.ed-panel::-webkit-scrollbar-thumb {
    background: #3C4660;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════ */
/* Character Editor Styles  (.ced- prefix)                */
/* ═══════════════════════════════════════════════════════ */

/* ── Tab bar ── */
.ced-tab-bar {
    display: flex;
    gap: 0;
    background: linear-gradient(180deg, #1E2233 0%, #1A1E28 100%);
    border-bottom: 1px solid #3C4660;
    flex-shrink: 0;
    user-select: none;
}

.ced-tab {
    padding: 6px 16px;
    font-size: 12px;
    color: #888;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.ced-tab:hover {
    color: #CCC;
    background: #232840;
}
.ced-tab.active {
    color: #FFD700;
    border-bottom-color: #FFD700;
    background: #232840;
    box-shadow: inset 0 -2px 0 #FFD700, 0 1px 4px rgba(255,215,0,0.08);
}

/* ── Layout: edit area + preview ── */
.ced-edit-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: #1E2233;
}

.ced-preview-area {
    width: 280px;
    flex-shrink: 0;
    border-left: 1px solid #3C4660;
    background: #232840;
    overflow-y: auto;
}

/* ── Panel scrollable ── */
.ced-panel-scroll {
    padding: 12px 16px;
    height: 100%;
    overflow-y: auto;
}

.ced-panel-scroll::-webkit-scrollbar,
.ced-edit-area::-webkit-scrollbar,
.ced-preview-area::-webkit-scrollbar {
    width: 4px;
}
.ced-panel-scroll::-webkit-scrollbar-thumb,
.ced-edit-area::-webkit-scrollbar-thumb,
.ced-preview-area::-webkit-scrollbar-thumb {
    background: #3C4660;
    border-radius: 2px;
}

/* ── Form sections ── */
.ced-form-section {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #2A3040;
}
.ced-form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ced-form-title {
    font-size: 11px;
    font-weight: bold;
    color: #AAA;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ced-sub-title {
    font-size: 10px;
    font-weight: bold;
    color: #888;
    margin: 6px 0 4px;
    text-transform: uppercase;
}

.ced-input-short {
    width: 120px !important;
    display: inline-block;
}

.ced-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ced-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ced-stat-icon {
    width: 24px;
    text-align: center;
    font-size: 14px;
}
.ced-stat-label {
    width: 32px;
    font-size: 12px;
    font-weight: bold;
    color: #aaa;
}
.ced-stat-name {
    font-size: 12px;
    color: #666;
    min-width: 40px;
}
.ced-prof-desc {
    font-size: 12px;
    color: #888;
    margin: 4px 0 8px;
    min-height: 16px;
}

.ced-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.ced-agent-textarea {
    resize: vertical;
    min-height: 400px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    tab-size: 2;
}
.ced-agent-actions {
    display: flex;
    align-items: center;
    margin-top: 8px;
    padding-bottom: 12px;
}
.ced-agent-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Agent Memory tab */
.ced-mem-filter {
    background: #222244;
    border: 1px solid #444;
    color: #999;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
}
.ced-mem-filter:hover { border-color: #888; color: #ccc; }
.ced-mem-filter.active { background: #333366; border-color: #8b7355; color: #e0d8c8; }

.ced-mem-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ced-mem-item {
    background: #1e1e36;
    border-radius: 6px;
    padding: 8px 10px;
    border-left: 3px solid #8b7355;
}
.ced-mem-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}
.ced-mem-date { color: #8b7355; }
.ced-mem-world { color: #7b68ae; }
.ced-mem-imp { color: #666; }
.ced-mem-del {
    margin-left: auto;
    background: none;
    border: 1px solid #553333;
    color: #885555;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    padding: 1px 4px;
}
.ced-mem-del:hover { background: #442222; color: #cc6666; }

.ced-mem-text {
    font-size: 13px;
    color: #d0c8b8;
    line-height: 1.4;
    white-space: pre-wrap;
}
.ced-mem-tags {
    margin-top: 4px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.ced-mem-tag {
    background: #333355;
    color: #aaa;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
}
.ced-mem-diary {
    background: #1e1e36;
    border-radius: 6px;
    padding: 10px 12px;
    border-left: 3px solid #5b8a72;
    margin-bottom: 6px;
}
.ced-mem-diary-week {
    font-size: 12px;
    color: #5b8a72;
    font-weight: bold;
    margin-bottom: 4px;
}

.ced-btn-sm {
    width: auto !important;
    padding: 3px 10px;
    display: inline-block;
    margin: 0;
}

.ced-btn-library {
    background: rgba(167,139,250,0.15);
    color: #a78bfa;
    border: 1px solid rgba(167,139,250,0.3);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s;
}
.ced-btn-library:hover {
    background: rgba(167,139,250,0.3);
}

.ced-btn-danger {
    background: #8C3C3C !important;
}
.ced-btn-danger:hover {
    background: #A04848 !important;
}

.ced-x-btn {
    width: 18px;
    height: 18px;
    background: none;
    border: 1px solid #3C4660;
    border-radius: 3px;
    color: #888;
    font-size: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.ced-x-btn:hover {
    background: #8C3C3C;
    color: #FFF;
    border-color: #8C3C3C;
}

.ced-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #CCC;
    margin: 6px 0;
    cursor: pointer;
}

/* ── Tags ── */
.ced-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.ced-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: #2A3A50;
    border-radius: 10px;
    color: #CCC;
    font-size: 10px;
    transition: background 0.15s, transform 0.1s;
}
.ced-tag:hover {
    background: #334A60;
    transform: scale(1.05);
}

.ced-tag-x {
    cursor: pointer;
    color: #888;
    font-size: 9px;
}
.ced-tag-x:hover {
    color: #F66;
}

.ced-tag-add, .ced-add-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* ── Appearance panel ── */
.ced-appearance-layout {
    display: flex;
    height: 100%;
}

.ced-look-list {
    width: 140px;
    flex-shrink: 0;
    padding: 8px;
    border-right: 1px solid #2A3040;
    overflow-y: auto;
}

.ced-look-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 2px;
    font-size: 11px;
    color: #CCC;
    transition: background 0.15s, color 0.15s;
}
.ced-look-item:hover {
    background: #2A3A50;
}
.ced-look-item.active {
    background: #3A5070;
    color: #FFD700;
}

.ced-look-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ced-look-id {
    font-size: 9px;
    color: #666;
}

.ced-skin-panel {
    flex: 1;
    padding: 8px 12px;
    overflow-y: auto;
}

.ced-skin-list {
    margin: 6px 0;
}

.ced-skin-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
    cursor: pointer;
}

.ced-skin-idx {
    width: 16px;
    text-align: right;
    font-size: 10px;
    color: #666;
    flex-shrink: 0;
}

.ced-skin-name {
    flex: 1;
    min-width: 60px;
}

.ced-skin-price {
    width: 50px !important;
    text-align: right;
}

.ced-skin-g {
    font-size: 10px;
    color: #C8B432;
}

/* ── Dialogue panel ── */
.ced-dialogue-layout {
    display: flex;
    height: 100%;
}

.ced-tree-list {
    width: 130px;
    flex-shrink: 0;
    padding: 8px;
    border-right: 1px solid #2A3040;
    overflow-y: auto;
}

.ced-tree-item {
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 2px;
    font-size: 11px;
    color: #CCC;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.ced-tree-item:hover {
    background: #2A3A50;
}
.ced-tree-item.active {
    background: #3A5070;
    color: #FFD700;
}
.ced-recommend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    color: #8AB4F8;
}
.ced-recommend-item:hover:not(.disabled) {
    background: #2A3A50;
}
.ced-recommend-item.disabled {
    opacity: 0.4;
    cursor: default;
}
.ced-recommend-btn {
    font-weight: bold;
    white-space: nowrap;
}
.ced-recommend-desc {
    opacity: 0.6;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ced-variant-editor {
    flex: 1;
    padding: 8px 12px;
    overflow-y: auto;
}

.ced-variant-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ced-variant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ced-variant-card {
    background: linear-gradient(135deg, #232840 0%, #1E2538 100%);
    border: 1px solid #3C4660;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ced-variant-card:hover {
    border-color: #4A5A7A;
}

.ced-variant-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
    color: #CCC;
    font-weight: bold;
}

.ced-aff-label {
    font-size: 10px;
    color: #888;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ced-aff-input {
    width: 50px !important;
}

.ced-lines-section, .ced-choices-section {
    margin-top: 6px;
}

.ced-line-row {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
}

.ced-line-speaker {
    width: 42px !important;
    flex-shrink: 0;
}

.ced-line-expr {
    width: 72px !important;
    flex-shrink: 0;
}

.ced-line-text {
    flex: 1;
    min-width: 80px;
}

.ced-choice-row {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
}

.ced-choice-text {
    flex: 1;
    min-width: 100px;
}

.ced-choice-aff {
    width: 45px !important;
    text-align: center;
    flex-shrink: 0;
}

/* ── Relationship panel ── */
.ced-level-list {
    margin: 6px 0;
}

.ced-level-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
}

.ced-level-name {
    width: 80px !important;
}

.ced-level-num {
    width: 50px !important;
    text-align: center;
}

.ced-level-sep {
    color: #666;
    font-size: 11px;
}

/* ── Preview panel ── */
.ced-preview-panel {
    padding: 8px;
}

.ced-preview-title {
    font-size: 11px;
    font-weight: bold;
    color: #AAA;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ced-preview-canvas {
    position: relative;
    width: 100%;
    height: 260px;
    background: #1A1E28;
    border: 1px solid #3C4660;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}

.ced-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ced-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #555;
}
.ced-preview-placeholder span {
    font-size: 48px;
}
.ced-preview-placeholder small {
    font-size: 11px;
}

.ced-preview-info {
    text-align: center;
}

.ced-preview-name {
    font-size: 14px;
    color: #DDD;
    font-weight: bold;
    margin-bottom: 2px;
}

.ced-preview-sub {
    font-size: 10px;
    color: #888;
}

.ced-preview-faction {
    font-size: 10px;
    color: #6A9;
    margin-top: 2px;
}

.ced-preview-look {
    font-size: 9px;
    color: #666;
    margin-top: 2px;
}

/* ── Dialogue preview ── */
.ced-dlg-preview-empty {
    padding: 20px;
    text-align: center;
    color: #555;
    font-size: 11px;
}

.ced-dlg-preview-box {
    background: #1A1E28;
    border: 1px solid #3C4660;
    border-radius: 6px;
    padding: 10px;
}

.ced-dlg-variant-info {
    font-size: 9px;
    color: #666;
    margin-bottom: 8px;
}

.ced-dlg-speaker {
    font-size: 12px;
    color: #FFD700;
    font-weight: bold;
    margin-bottom: 2px;
}

.ced-dlg-expression {
    font-size: 9px;
    color: #6A9;
    margin-bottom: 4px;
}

.ced-dlg-text {
    font-size: 12px;
    color: #DDD;
    line-height: 1.5;
    margin-bottom: 8px;
    min-height: 36px;
}

.ced-dlg-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ced-dlg-nav-btn {
    padding: 2px 8px;
    background: #2A3A50;
    border: 1px solid #3C4660;
    border-radius: 3px;
    color: #CCC;
    font-size: 10px;
    cursor: pointer;
}
.ced-dlg-nav-btn:hover:not([disabled]) {
    background: #3A5070;
    color: #FFF;
}
.ced-dlg-nav-btn[disabled] {
    opacity: 0.3;
    cursor: default;
}

.ced-dlg-nav-idx {
    font-size: 10px;
    color: #888;
}

.ced-dlg-choices {
    border-top: 1px solid #2A3040;
    padding-top: 6px;
}

.ced-dlg-choice {
    padding: 4px 8px;
    margin-bottom: 3px;
    background: #2A3A50;
    border-radius: 4px;
    font-size: 11px;
    color: #CCC;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ced-dlg-choice-aff {
    font-size: 10px;
    color: #6A9;
    font-weight: bold;
}

/* ── AI tools section ── */
.ced-ai-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #2A3040;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ced-btn-ai {
    background: #4A3C8C !important;
}
.ced-btn-ai:hover {
    background: #5E4EA0 !important;
}

.ced-btn-rembg {
    background: #3C6A5A !important;
}
.ced-btn-rembg:hover {
    background: #4A8A70 !important;
}

.ced-btn-rembg-sm {
    margin-top: 8px;
    background: #3C6A5A !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
}
.ced-btn-rembg-sm:hover {
    background: #4A8A70 !important;
}

.ced-btn-3d {
    background: #2E7D5F !important;
}
.ced-btn-3d:hover {
    background: #3A9A76 !important;
}

.ced-3d-mode-select {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #CCC;
    margin-bottom: 8px;
}
.ced-3d-mode-select label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.ced-3d-image-info {
    font-size: 11px;
    color: #8A8;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.ced-preview-3d-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    font-size: 11px;
    background: rgba(46,125,95,0.8);
    color: #fff;
    border-radius: 4px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.ced-skin-row.ced-skin-selected {
    background: #2A3A50;
    border-radius: 3px;
}

/* ── Prompt modal ── */
.ced-prompt-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    animation: ced-fade-in 0.15s ease-out;
}
.ced-prompt-modal.hidden {
    display: none;
}

.ced-prompt-modal-inner {
    background: #232840;
    border: 1px solid #3C4660;
    border-radius: 6px;
    padding: 16px;
    width: 380px;
    max-width: 90%;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    animation: ced-slide-up 0.2s ease-out;
}

.ced-prompt-modal-title {
    font-size: 13px;
    font-weight: bold;
    color: #DDD;
    margin-bottom: 10px;
}

.ced-prompt-textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.ced-prompt-modal-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.ced-prompt-modal-buttons .ed-btn {
    flex: 1;
}

/* ── Loading overlay ── */
.ced-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 400;
    animation: ced-fade-in 0.15s ease-out;
}
.ced-loading.hidden {
    display: none;
}

.ced-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #3C4660;
    border-top-color: #5A8AC0;
    border-radius: 50%;
    animation: ced-spin 0.8s linear infinite;
}

@keyframes ced-spin {
    to { transform: rotate(360deg); }
}

@keyframes ced-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ced-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.ced-loading-text {
    font-size: 12px;
    color: #AAA;
}

/* ── Schedule panel ── */
.ced-schedule-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ced-schedule-preset-btn {
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.ced-schedule-preset-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
}

.ced-schedule-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ced-schedule-label {
    width: 48px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    flex-shrink: 0;
}

.ced-schedule-select {
    flex: 1;
    font-size: 12px;
    padding: 3px 6px;
}

.ced-schedule-room-select {
    width: 80px;
    font-size: 12px;
    padding: 3px 6px;
}

/* ── Combat panel — dynamic rows ── */
.ced-skill-row, .ced-drop-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.ced-skill-row .ced-field-name { flex: 2; }
.ced-skill-row .ced-field-value { flex: 1; }
.ced-skill-row .ced-field-desc { flex: 2; }

.ced-drop-row .ced-field-name { flex: 2; }
.ced-drop-row .ced-field-value { flex: 1; }

.ced-drop-pct {
    font-size: 12px;
    color: #888;
}

/* ── Appearance panel — sprite & module assets ── */
.ced-portrait-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ced-portrait-thumb {
    max-width: 80px;
    max-height: 80px;
    margin-top: 4px;
    border-radius: 4px;
    border: 1px solid #333;
}

.ced-sprite-block {
    margin-bottom: 8px;
    padding: 6px;
    background: #1A1E28;
    border-radius: 4px;
}

.ced-sprite-block-label {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 4px;
}

.ced-sprite-grid {
    display: grid;
    grid-template-columns: 1fr 60px 60px 60px 60px;
    gap: 4px;
    align-items: center;
}

.ced-sprite-grid .ed-input {
    font-size: 11px;
}

.ced-module-block {
    margin-bottom: 6px;
}

.ced-module-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}

.ced-module-grid .ed-input {
    font-size: 11px;
}

.ced-details-summary {
    cursor: pointer;
    font-size: 12px;
    color: #9B59B6;
}

.ced-details-body {
    padding: 6px 0;
}

.ced-scan-btn-wrap {
    margin-top: 8px;
    margin-bottom: 4px;
}

/* ── Agent panel — inline style replacements ── */
.ced-agent-empty {
    padding: 20px;
    color: #888;
}

.ced-agent-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ced-agent-ai-btn {
    margin-left: auto;
    background: #6c5ce7;
    color: #fff;
    font-size: 11px;
}
.ced-agent-ai-btn:hover {
    background: #7c6ef7;
}

.ced-agent-no-dir {
    font-size: 11px;
    color: #e67e22;
    margin: 0 0 8px;
}

.ced-agent-tab-bar {
    margin-bottom: 8px;
}

.ced-agent-save-all {
    margin-left: 8px;
}

.ced-mem-filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.ced-mem-filter-bar .ced-btn-sm {
    margin-left: auto;
}

.ced-mem-inject-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.ced-mem-inject-label {
    font-size: 11px;
    color: #888;
}

.ced-mem-inject-keywords {
    width: 140px;
}

.ced-mem-inject-importance {
    width: 60px;
}

.ced-mem-inject-world {
    width: 80px;
}

.ced-mem-empty {
    color: #666;
    text-align: center;
    padding: 20px;
}

.ced-mem-section-gap {
    margin-top: 12px;
}

/* ── Profile panel — inline style replacements ── */
.ced-ai-warning {
    font-size: 11px;
    color: #E67E22;
    margin: 4px 0 0;
}

.ced-ai-note {
    font-size: 11px;
    color: #888;
    margin: 0 0 8px;
}

.ced-advanced-summary {
    cursor: pointer;
    font-size: 12px;
    color: #9B59B6;
    margin-top: 6px;
}

/* ── Character picker ── */
/* ── Character Picker — Card Grid ── */
.ced-picker-panel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 520px; max-width: 90vw;
    max-height: 80vh;
    background: rgba(18,16,28,0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    z-index: 100;
}
.ced-picker-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 10px;
}
.ced-picker-title {
    font-size: 15px; font-weight: 600; color: rgba(220,230,255,0.85);
    letter-spacing: 0.3px;
}
.ced-picker-close {
    background: none; border: none; color: rgba(200,210,240,0.4);
    font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.ced-picker-close:hover { color: rgba(255,255,255,0.8); }
.ced-picker-search {
    margin: 0 16px 12px; padding: 8px 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; color: #e0e4f8; font-size: 12px; outline: none;
}
.ced-picker-search:focus { border-color: rgba(100,140,255,0.3); }
.ced-picker-search::placeholder { color: rgba(160,170,200,0.35); }
.ced-picker-body {
    flex: 1; overflow-y: auto; padding: 0 16px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.ced-picker-card {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 8px 4px 6px; cursor: pointer;
    transition: all 0.15s; position: relative;
}
.ced-picker-card:hover {
    background: rgba(100,140,255,0.08); border-color: rgba(100,140,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ced-picker-card-new {
    border-style: dashed; border-color: rgba(255,255,255,0.1);
}
.ced-picker-card-new:hover {
    border-color: rgba(100,200,140,0.4); background: rgba(100,200,140,0.06);
}
.ced-picker-thumb-wrap {
    width: 64px; height: 72px; border-radius: 8px; overflow: hidden;
    background: rgba(255,255,255,0.03); margin-bottom: 4px;
    position: relative;
}
.ced-picker-thumb {
    width: 100%; height: 100%; object-fit: cover;
    object-position: center 15%;  /* crop from upper area — show heads */
    display: block;
}
.ced-picker-thumb-err { opacity: 0.15; }
.ced-picker-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: rgba(200,210,240,0.3);
}
.ced-picker-card-name {
    font-size: 10px; color: rgba(200,210,240,0.7);
    text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; padding: 0 2px;
}
.ced-picker-section {
    width: 100%; grid-column: 1 / -1;
    padding: 8px 4px 4px;
    font-size: 11px; color: rgba(180,160,255,0.6);
    text-align: center; letter-spacing: 2px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}
.ced-picker-intel {
    position: absolute; top: 4px; right: 4px;
    font-size: 8px; padding: 1px 4px; border-radius: 4px;
    background: rgba(100,140,255,0.2); color: rgba(160,190,255,0.8);
    font-weight: 600;
}
.ced-picker-intel.agent {
    background: rgba(140,100,255,0.25); color: rgba(200,170,255,0.9);
}
.ced-picker-badge {
    font-size: 8px; color: rgba(160,170,200,0.4);
    margin-top: 1px;
}

/* Overlay (shared by all pickers) */
.ced-picker-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 90;
    animation: cedPickerFadeIn 0.15s ease;
}
@keyframes cedPickerFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Multi-select states */
.ced-picker-card-selected {
    border-color: rgba(155,89,182,0.6) !important;
    background: rgba(155,89,182,0.12) !important;
    box-shadow: 0 0 12px rgba(155,89,182,0.15);
}
.ced-picker-card-disabled {
    opacity: 0.4; cursor: not-allowed !important; pointer-events: none;
}
.ced-picker-check {
    position: absolute; bottom: 2px; right: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(155,89,182,0.85); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.ced-picker-count {
    font-size: 12px; color: rgba(200,180,240,0.6);
    margin-left: 8px;
}
.ced-picker-footer {
    padding: 10px 16px 14px;
    display: flex; justify-content: flex-end;
}
.ced-picker-done {
    padding: 8px 24px; border-radius: 8px;
    background: rgba(155,89,182,0.3); border: 1px solid rgba(155,89,182,0.4);
    color: rgba(230,210,255,0.9); font-size: 13px; cursor: pointer;
    transition: all 0.15s;
}
.ced-picker-done:hover {
    background: rgba(155,89,182,0.45);
}

/* ═══════════════════════════════════════════════════════ */
/* Character Editor — RPG Single-Page Layout              */
/* ═══════════════════════════════════════════════════════ */

/* ── Root & Top bar ── */
.ced-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: transparent;
    font-family: system-ui, -apple-system, sans-serif;
    color: #e0e4f8;
}
.ced-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 42px;
    border-bottom: none;
    z-index: 10;
}
.ced-back {
    padding: 4px 12px;
    font-size: 11px;
    cursor: pointer;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(200,210,255,0.6);
    transition: all 0.15s;
}
.ced-back:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.ced-topbar-name-input {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: rgba(200,210,255,0.9);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 12px;
    outline: none;
    transition: all 0.2s;
    max-width: 280px;
    margin: 0 auto;
}
.ced-topbar-name-input:hover { border-color: rgba(255,255,255,0.08); }
.ced-topbar-name-input:focus { border-color: rgba(90,138,192,0.4); background: rgba(0,0,0,0.2); }
.ced-topbar-intel {
    display: flex; gap: 2px; flex-shrink: 0;
}
.ced-intel-btn {
    font-size: 10px; padding: 4px 10px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
    color: rgba(200,210,240,0.5); cursor: pointer; transition: all 0.15s;
}
.ced-intel-btn:hover:not(:disabled) { background: rgba(255,255,255,0.06); }
.ced-intel-btn.active {
    background: rgba(90,138,192,0.15); border-color: rgba(90,138,192,0.35);
    color: rgba(180,200,255,0.9);
}
.ced-intel-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Main 3-column layout ── */
.ced-main {
    flex: 1;
    display: flex;
    overflow: hidden;
    gap: 0;
}

/* ── LEFT: Editor panel ── */
.ced-left {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: none;
    background: transparent;
    overflow: hidden;
}
.ced-left-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(200,210,240,0.35);
    font-size: 12px;
    text-align: center;
    padding: 20px;
}
.ced-left-welcome-icon {
    width: 36px;
    height: 36px;
    opacity: 0.25;
    filter: brightness(0) invert(1);
}
.ced-left-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: none;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #ddd;
}
.ced-left-header-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    opacity: 0.6;
}
.ced-left-close {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s;
}
.ced-left-close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.ced-left-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.ced-left-content::-webkit-scrollbar { width: 4px; }
.ced-left-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Doc editor (textarea) ── */
.ced-doc-textarea {
    width: 100%;
    min-height: 300px;
    resize: vertical;
    background: rgba(10,8,18,0.6);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #d0c8e8;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    padding: 12px;
    box-sizing: border-box;
    outline: none;
    tab-size: 2;
    white-space: pre-wrap;
    transition: border-color 0.15s;
}
.ced-doc-textarea:focus {
    border-color: rgba(140,100,255,0.3);
    box-shadow: 0 0 0 2px rgba(120,80,200,0.1);
}
.ced-doc-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.ced-doc-save {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(90,138,192,0.2);
    border: 1px solid rgba(90,138,192,0.3);
    border-radius: 8px;
    color: rgba(160,200,255,0.9);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.ced-doc-save:hover {
    background: rgba(90,138,192,0.35);
    color: #fff;
}
.ced-doc-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ced-btn-icon {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}
.ced-doc-status {
    font-size: 11px;
    color: rgba(200,210,240,0.5);
}
.ced-panel-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: rgba(200,210,240,0.35);
    font-size: 12px;
    text-align: center;
    white-space: pre-line;
    line-height: 1.6;
}

/* ── CENTER: Portrait + Arc Modules ── */
.ced-portrait-col {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 0;
    background:
        radial-gradient(ellipse 50% 70% at 65% 50%, rgba(90,138,192,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 60% 70%, rgba(140,100,255,0.04) 0%, transparent 60%);
}

/* Full-size portrait — right-aligned, full height */
.ced-portrait-full {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    flex-shrink: 0;
    margin-right: -10px;
}
.ced-portrait-full img {
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: bottom right;
    display: block;
    filter: drop-shadow(0 0 40px rgba(90,138,192,0.1));
}

/* Arc module icons — bow shape `)`, middle curves LEFT, positioned left of portrait */
.ced-arc-modules {
    position: absolute;
    left: 50px;
    top: 45%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    z-index: 2;
}
/* Bow shape: top/bottom push right, middle pushes left */
.ced-arc-btn:nth-child(1) { transform: translateX(22px); }
.ced-arc-btn:nth-child(2) { transform: translateX(10px); }
.ced-arc-btn:nth-child(3) { transform: translateX(3px); }
.ced-arc-btn:nth-child(4) { transform: translateX(0px); }
.ced-arc-btn:nth-child(5) { transform: translateX(3px); }
.ced-arc-btn:nth-child(6) { transform: translateX(10px); }
.ced-arc-btn:nth-child(7) { transform: translateX(22px); }
.ced-arc-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    background: rgba(10,8,18,0.55);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s, transform 0s;
    backdrop-filter: blur(8px);
    position: relative;
}
.ced-arc-btn::before {
    content: '';
    position: absolute; left: 0; top: 0; width: 3px; height: 100%;
    background: var(--mod-accent, #5A8AC0);
    opacity: 0; transition: opacity 0.2s; border-radius: 3px 0 0 3px;
}
.ced-arc-btn:hover { background: rgba(20,18,35,0.8); border-color: rgba(255,255,255,0.15); }
.ced-arc-btn:hover::before { opacity: 0.6; }
.ced-arc-btn.active { background: rgba(90,138,192,0.12); border-color: rgba(90,138,192,0.3); }
.ced-arc-btn.active::before { opacity: 1; }
.ced-arc-btn.locked { opacity: 0.3; cursor: default; }
.ced-arc-icon {
    width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: 0.55; flex-shrink: 0;
}
.ced-arc-btn.active .ced-arc-icon { opacity: 0.9; }
.ced-arc-label {
    font-size: 10px; color: rgba(200,210,240,0.55); white-space: nowrap;
}
.ced-arc-btn.active .ced-arc-label { color: rgba(200,210,240,0.9); }

/* Character meta — bottom-left overlay */
.ced-char-meta {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    max-width: 200px;
}
.ced-char-bio {
    font-size: 10px; color: rgba(200,210,240,0.4); line-height: 1.3;
    background: rgba(10,8,18,0.5); backdrop-filter: blur(6px);
    padding: 6px 10px; border-radius: 8px;
}
.ced-char-tags {
    display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px;
}
.ced-char-tag {
    font-size: 9px; padding: 1px 6px; border-radius: 8px;
    background: rgba(140,120,200,0.15); color: rgba(180,170,220,0.7);
    border: 1px solid rgba(140,120,200,0.2);
}

/* ── RIGHT sidebar sections ── */
.ced-right-section {
    display: flex; flex-direction: column; gap: 4px;
}
.ced-tool-danger .ced-tool-icon { filter: brightness(0) invert(0.6) sepia(1) saturate(5) hue-rotate(330deg); }
.ced-tool-danger span { color: rgba(255,120,120,0.6); }
.ced-tool-danger:hover span { color: #f88; }

/* ── Skill Picker ── */
.ced-skill-picker { margin-bottom: 8px; }
.ced-skill-picker-title {
    font-size: 11px; font-weight: 600; color: rgba(200,210,240,0.7);
    margin-bottom: 6px; letter-spacing: 0.5px;
}
.ced-skill-cat { margin-bottom: 6px; }
.ced-skill-cat-label {
    font-size: 9px; color: rgba(160,170,200,0.5); text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 3px; display: block;
}
.ced-skill-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ced-skill-chip {
    font-size: 10px; padding: 3px 8px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
    color: rgba(200,210,240,0.6); cursor: pointer; transition: all 0.15s;
    white-space: nowrap; user-select: none;
}
.ced-skill-chip:hover { background: rgba(100,140,255,0.1); border-color: rgba(100,140,255,0.3); }
.ced-skill-chip.active {
    background: rgba(100,140,255,0.2); border-color: rgba(100,140,255,0.5);
    color: rgba(180,200,255,0.95); box-shadow: 0 0 6px rgba(100,140,255,0.15);
}
.ced-cfg-advanced {
    margin-bottom: 6px;
}
.ced-cfg-advanced summary {
    font-size: 10px; color: rgba(160,170,200,0.5); cursor: pointer;
    margin-bottom: 4px; user-select: none;
}
.ced-cfg-advanced summary:hover { color: rgba(200,210,240,0.7); }

/* Skin strip */
.ced-skin-strip {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.ced-skin-strip::-webkit-scrollbar { display: none; }
.ced-skin-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: rgba(200,210,240,0.5);
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ced-skin-thumb:hover {
    border-color: rgba(90,138,192,0.4);
    background: rgba(90,138,192,0.1);
}

/* ── RIGHT: File actions + tools ── */
.ced-right {
    width: 110px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: none;
    background: transparent;
    overflow-y: auto;
    padding: 8px;
    padding-bottom: 12%;
    gap: 6px;
    scrollbar-width: none;
}
.ced-right::-webkit-scrollbar { display: none; }

/* ── Tools separator ── */
.ced-tools-sep {
    height: 1px;
    background: transparent;
    margin: 4px 0;
}

/* ── Visual tools ── */
.ced-tools {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ced-tool-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: rgba(200,210,240,0.6);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.ced-tool-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: rgba(220,230,255,0.9);
}
.ced-tool-icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
    opacity: 0.5;
    flex-shrink: 0;
}
.ced-tool-elser {
    background: rgba(120,80,200,0.1);
    border-color: rgba(140,100,255,0.2);
    color: rgba(180,160,255,0.8);
}
.ced-tool-elser .ced-tool-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    filter: none;
    opacity: 1;
}
.ced-tool-xiajang {
    background: rgba(232,112,64,0.1);
    border-color: rgba(232,112,64,0.2);
    color: rgba(255,180,140,0.8);
}
.ced-tool-xiajang:hover {
    background: rgba(232,112,64,0.2);
    border-color: rgba(232,112,64,0.35);
    color: #ffc0a0;
    box-shadow: 0 0 10px rgba(232,112,64,0.1);
}
.ced-tool-elser:hover {
    background: rgba(120,80,200,0.2);
    border-color: rgba(140,100,255,0.35);
    color: #c8b0ff;
    box-shadow: 0 0 10px rgba(120,80,200,0.1);
}

/* ── Asset Panel ── */
.ced-asset-panel {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ced-asset-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ced-asset-section-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ced-asset-meta {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.35);
}
.ced-asset-grid, .ced-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}
.ced-album-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.ced-asset-card, .ced-album-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.ced-asset-card:hover, .ced-album-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
.ced-asset-card.active {
    border-color: rgba(120,180,255,0.5);
    background: rgba(80,140,220,0.12);
    box-shadow: 0 0 6px rgba(80,140,220,0.25);
}
.ced-asset-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 4px;
}
.ced-album-thumb {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 4px;
}
.ced-asset-label {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ced-asset-empty, .ced-asset-empty-full {
    color: rgba(255,255,255,0.25);
    font-size: 12px;
    text-align: center;
    padding: 20px 0;
}
.ced-asset-empty-full {
    padding: 40px 0;
}
.ced-asset-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.15);
    margin-top: 6px;
}
.ced-asset-gen-btn {
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 6px;
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.ced-asset-gen-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.6);
}
.ced-asset-gen-row {
    display: flex;
    gap: 6px;
}
.ced-asset-gen-row .ced-asset-gen-btn {
    flex: 1;
    text-align: center;
}
.ced-sprite-preview {
    overflow-x: auto;
    padding: 4px 0;
}
.ced-sprite-sheet {
    height: 64px;
    image-rendering: pixelated;
}

/* ── Responsive ── */
@media (max-width: 800px) {
    .ced-main { flex-direction: column; }
    .ced-left { width: 100%; max-height: 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .ced-right { width: 100%; flex-direction: row; flex-wrap: wrap; overflow-x: auto; overflow-y: visible; padding: 6px; }
    .ced-arc-modules { position: static; transform: none; flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 8px; }
    .ced-portrait-full img { height: 200px; }
}

/* ── Elser Chat Overlay ── */
.ced-nuwa-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6,4,12,0.85);
    backdrop-filter: blur(8px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ced-nuwa-panel {
    width: 460px;
    max-height: 420px;
    background: linear-gradient(160deg, rgba(24,20,40,0.98), rgba(16,14,28,0.98));
    border: 1px solid rgba(140,100,255,0.2);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 30px rgba(100,60,200,0.1);
}
.ced-nuwa-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 14px;
    font-weight: 700;
    color: rgba(180,160,255,0.9);
}
.ced-nuwa-header .ced-nuwa-close { margin-left: auto; }
.ced-nuwa-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 1.5px solid rgba(180,160,255,0.4);
    flex-shrink: 0;
}
.ced-nuwa-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}
.ced-nuwa-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* mode selector removed — Agent-only pipeline */

.ced-nuwa-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(140,100,255,0.1) transparent;
}
.ced-nuwa-msg {
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 85%;
    white-space: pre-wrap;
    word-break: break-word;
}
.ced-nuwa-msg-sys {
    background: rgba(120,80,200,0.1);
    border: 1px solid rgba(140,100,255,0.15);
    color: rgba(200,180,255,0.8);
    align-self: flex-start;
}
.ced-nuwa-msg-user {
    background: rgba(255,255,255,0.08);
    color: rgba(220,230,255,0.9);
    align-self: flex-end;
}

.ced-nuwa-input-row {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ced-nuwa-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #e0e4f8;
    font-size: 12px;
    outline: none;
}
.ced-nuwa-input:focus {
    border-color: rgba(140,100,255,0.35);
    box-shadow: 0 0 0 2px rgba(120,80,200,0.15);
}
.ced-nuwa-send {
    padding: 8px 16px;
    background: rgba(120,80,200,0.3);
    border: 1px solid rgba(140,100,255,0.3);
    border-radius: 8px;
    color: rgba(180,160,255,0.9);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.ced-nuwa-send:hover {
    background: rgba(120,80,200,0.45);
    color: #c8b0ff;
}
.ced-nuwa-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ced-nuwa-loading {
    position: relative;
    min-width: 60px;
    min-height: 32px;
}
.ced-nuwa-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(180,160,255,0.3);
    border-top-color: rgba(180,160,255,0.9);
    border-radius: 50%;
    animation: ced-spin 0.6s linear infinite;
}
@keyframes ced-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════ */
/* 虾酱 XiaJiang — Creative Studio overlay                */
/* ═══════════════════════════════════════════════════════ */
.xj-overlay {
    position: absolute; inset: 0;
    background: rgba(6,4,12,0.85);
    backdrop-filter: blur(8px);
    z-index: 50;
    display: flex; align-items: center; justify-content: center;
}
.xj-panel {
    width: 520px; max-width: 92vw; max-height: 85vh;
    background: rgba(20,18,30,0.97);
    border: 1px solid rgba(232,112,64,0.2);
    border-radius: 16px;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(232,112,64,0.05);
    overflow: hidden;
}
.xj-header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px 10px; flex-shrink: 0;
}
.xj-logo { font-size: 20px; }
.xj-title {
    flex: 1; font-size: 14px; font-weight: 600;
    color: rgba(232,180,140,0.9); letter-spacing: 0.3px;
}
.xj-close {
    background: none; border: none; color: rgba(200,210,240,0.4);
    font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.xj-close:hover { color: rgba(255,255,255,0.8); }

.xj-messages {
    flex: 1; overflow-y: auto; padding: 0 16px 8px;
    display: flex; flex-direction: column; gap: 8px;
    scrollbar-width: thin; scrollbar-color: rgba(232,112,64,0.1) transparent;
    min-height: 120px; max-height: 50vh;
}
.xj-msg {
    padding: 8px 12px; border-radius: 10px;
    font-size: 12px; line-height: 1.5; white-space: pre-wrap;
    max-width: 90%; word-break: break-word;
}
.xj-msg-sys {
    background: rgba(232,112,64,0.08); color: rgba(232,200,180,0.85);
    border: 1px solid rgba(232,112,64,0.12); align-self: flex-start;
}
.xj-msg-user {
    background: rgba(100,140,255,0.12); color: rgba(200,210,240,0.9);
    border: 1px solid rgba(100,140,255,0.15); align-self: flex-end;
}
.xj-msg-error {
    background: rgba(255,80,80,0.1); color: rgba(255,160,160,0.9);
    border: 1px solid rgba(255,80,80,0.15); align-self: flex-start;
}

/* Quick action toolbar */
.xj-toolbar {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 16px 8px; flex-shrink: 0;
}
.xj-quick-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(232,112,64,0.08); border: 1px solid rgba(232,112,64,0.15);
    color: rgba(232,180,140,0.7); font-size: 11px;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.xj-quick-btn:hover {
    background: rgba(232,112,64,0.18); border-color: rgba(232,112,64,0.35);
    color: rgba(255,200,160,0.95);
}

/* Input row */
.xj-input-row {
    display: flex; gap: 8px; padding: 8px 16px 14px; flex-shrink: 0;
}
.xj-input {
    flex: 1; padding: 8px 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(232,112,64,0.15);
    border-radius: 8px; color: #e0e4f8; font-size: 12px; outline: none;
}
.xj-input:focus { border-color: rgba(232,112,64,0.4); }
.xj-input::placeholder { color: rgba(200,180,160,0.3); }
.xj-input:disabled { opacity: 0.4; }
.xj-send {
    padding: 8px 16px;
    background: rgba(232,112,64,0.25); border: 1px solid rgba(232,112,64,0.35);
    border-radius: 8px; color: rgba(255,200,160,0.9);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
}
.xj-send:hover {
    background: rgba(232,112,64,0.4); color: #ffd0a0;
}
.xj-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Loading spinner */
.xj-loading { position: relative; min-width: 60px; min-height: 32px; }
.xj-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border: 2px solid rgba(232,160,100,0.3);
    border-top-color: rgba(232,160,100,0.9);
    border-radius: 50%; animation: ced-spin 0.6s linear infinite;
}

/* Image preview */
.xj-img-preview {
    align-self: flex-start; max-width: 240px;
    border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(232,112,64,0.15);
    background: rgba(0,0,0,0.2);
}
.xj-img-preview img {
    width: 100%; display: block;
    background: repeating-conic-gradient(rgba(255,255,255,0.03) 0% 25%, transparent 0% 50%) 0 0 / 12px 12px;
}

/* Result action buttons */
.xj-result-actions {
    display: flex; gap: 6px; align-self: flex-start; flex-wrap: wrap;
}
.xj-result-btn {
    padding: 5px 12px; border-radius: 8px; font-size: 11px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(200,210,240,0.7); transition: all 0.15s;
}
.xj-result-btn:hover {
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2);
}
.xj-result-btn-primary {
    background: rgba(232,112,64,0.15); border-color: rgba(232,112,64,0.3);
    color: rgba(255,200,160,0.9);
}
.xj-result-btn-primary:hover {
    background: rgba(232,112,64,0.3); border-color: rgba(232,112,64,0.5);
}

/* (Old card/detail-view classes removed — replaced by RPG layout above) */

/* ═══════════════════════════════════════════════════════ */
/* 3D Scene Editor Styles  (.s3d- prefix)                 */
/* ═══════════════════════════════════════════════════════ */

.s3d-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.s3d-viewport-wrap {
    flex: 1;
    position: relative;
    background: #111;
    overflow: hidden;
}

.s3d-viewport-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.s3d-panel-container {
    width: 250px;
    flex-shrink: 0;
    overflow: hidden;
}

.s3d-panel-wrap {
    width: 100%;
    height: 100%;
    background: #1E2232;
    border-left: 1px solid #3C4660;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

.s3d-panel-wrap::-webkit-scrollbar {
    width: 4px;
}
.s3d-panel-wrap::-webkit-scrollbar-thumb {
    background: #3C4660;
    border-radius: 2px;
}

/* ── Sections ── */
.s3d-section {
    padding: 8px;
    border-bottom: 1px solid #2A3040;
}

.s3d-section-title {
    font-size: 11px;
    font-weight: bold;
    color: #AAA;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Tool buttons ── */
.s3d-tool-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}

.s3d-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 4px;
    background: #2A3A50;
    border: 1px solid #3C4660;
    border-radius: 3px;
    color: #CCC;
    font-size: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.s3d-tool-btn:hover {
    background: #3A5070;
    color: #FFF;
}
.s3d-tool-btn.active {
    background: #3C6090;
    border-color: #5A8AC0;
    color: #FFD700;
}

/* ── Properties ── */
.s3d-prop-label {
    font-size: 10px;
    color: #888;
    margin: 5px 0 2px;
}

.s3d-prop-row {
    display: flex;
    gap: 4px;
    margin-bottom: 3px;
}

.s3d-num-input {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.s3d-num-label {
    font-size: 9px;
    color: #666;
    width: 12px;
    flex-shrink: 0;
}

.s3d-prop-input {
    width: 100%;
    box-sizing: border-box;
}

.s3d-num-input .s3d-prop-input {
    width: 100%;
    padding: 2px 4px;
    background: #1A1E28;
    border: 1px solid #3C4660;
    border-radius: 3px;
    color: #DDD;
    font-size: 10px;
    outline: none;
}
.s3d-num-input .s3d-prop-input:focus {
    border-color: #5A8AC0;
}

input[type="color"].s3d-prop-input {
    height: 24px;
    padding: 1px 2px;
    background: #1A1E28;
    border: 1px solid #3C4660;
    border-radius: 3px;
    cursor: pointer;
}

/* ── Checkbox ── */
.s3d-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #CCC;
    margin: 3px 0;
    cursor: pointer;
}

/* ── Info ── */
.s3d-info-row {
    font-size: 10px;
    color: #888;
    margin: 2px 0;
}

/* ── Asset Library popup ── */
.s3d-asset-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s3d-asset-panel {
    width: 520px;
    max-height: 80%;
    background: #1E2232;
    border: 1px solid #3C4660;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.s3d-asset-header {
    padding: 10px 16px;
    border-bottom: 1px solid #3C4660;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.s3d-asset-actions {
    padding: 8px 16px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #3C4660;
}

.s3d-asset-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    min-height: 120px;
    max-height: 320px;
}

.s3d-asset-grid::-webkit-scrollbar {
    width: 4px;
}
.s3d-asset-grid::-webkit-scrollbar-thumb {
    background: #3C4660;
    border-radius: 2px;
}

.s3d-asset-card {
    background: #252A3A;
    border: 1px solid #3C4660;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    cursor: default;
    transition: border-color 0.15s;
}
.s3d-asset-card:hover {
    border-color: #6080cc;
}

.s3d-asset-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    object-fit: contain;
    background: #1A1E28;
}
.s3d-asset-thumb-placeholder {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    background: #1A1E28;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #555;
}
@keyframes s3d-thumb-spin {
    to { transform: rotate(360deg); }
}
.s3d-asset-thumb-placeholder .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-top-color: #6080cc;
    border-radius: 50%;
    animation: s3d-thumb-spin 0.8s linear infinite;
}

.s3d-asset-card .name {
    font-size: 12px;
    color: #bbb;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s3d-asset-progress {
    margin: 8px 16px;
    padding: 8px 12px;
    background: #252A3A;
    border-radius: 6px;
}

.s3d-asset-progress-bar {
    height: 6px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
}

.s3d-asset-progress-fill {
    height: 100%;
    background: #4a8;
    transition: width 0.3s;
}