/* ==============================================================================
 * yt-dlna: assets/html/style.css
 * dark & light themes for yt-dlna
 * ============================================================================== */

/* DARK THEME (default) */
:root, [data-theme="dark"] {
    --bg-color: #0b1120;
    --card-bg: rgba(30, 41, 59, 0.7);
    --card-solid: #1e293b;
    --border-color: #1e293b;
    --border-glow: rgba(22, 198, 182, 0.3);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-dimmed: #748091;
    --accent-primary: #16c6b6; /* Logo Cyan/Teal */
    --accent-secondary: #4f6d84;
    --accent-hover: #13b0a2;
    --accent-blue: #38bdf8;
    --accent-red: #ff4242; /* Pastel Red */
    --accent-yellow: #fbbf24; /* Pastel Yellow */
    --input-bg: rgba(15, 23, 42, 0.6);
    --sub-tab-bg: rgba(0, 0, 0, 0.4);
}

/* LIGHT THEME */
[data-theme="light"] {
    --bg-color: #f1f5f9;
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-solid: #ffffff;
    --border-color: #cbd5e1;
    --border-glow: rgba(22, 198, 182, 0.4);
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-dimmed: #8296b3;
    --accent-primary: #16c6b6; /* Logo Cyan/Teal */
    --accent-secondary: #dde4ed;
    --accent-hover: #13b0a2;
    --accent-blue: #0284c7;
    --accent-red: #ef4444;
    --accent-yellow: #d97706;
    --input-bg: rgba(241, 245, 249, 0.8);
    --sub-tab-bg: rgba(0, 20, 99, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    padding: 20px;
    line-height: 1.5;
    min-height: 100vh;
}

.container { max-width: 900px; margin: 0 auto; }

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.brand { display: flex; align-items: center; gap: 16px; }
.logo { width: 56px; height: 56px; border: 0; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.subtitle { color: var(--text-secondary); font-size: 0.85rem; }
.header-right { display: flex; align-items: center; gap: 12px; }
.badge { background-color: var(--border-color); color: var(--accent-primary); padding: 4px 12px; border-radius: 9999px; font-size: 0.85rem; font-weight: 600; }
.badge-blue { font-size: 0.75rem; margin-left: 6px; padding: 2px 6px; background: color-mix(in srgb, var(--accent-blue) 20%, transparent); border: 1px solid color-mix(in srgb, var(--accent-blue) 40%, transparent); border-radius: 4px; color: var(--accent-blue); white-space: nowrap; display: inline-block; }

a { color: var(--accent-blue); text-decoration: none; font-size: 1.05rem; font-weight: 600; display: block; word-break: break-word; }
a:hover { color: var(--accent-primary); text-decoration: underline; }

ul { list-style: none; padding: 0; margin: 0; }
li { margin-bottom: 12px; padding: 12px 16px; background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: 8px; }

.nav-tabs { text-wrap: nowrap; display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--accent-primary) transparent; }
.nav-tabs::-webkit-scrollbar { height: 6px; display: block; }
.nav-tabs::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 10px; }

.sub-nav-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--sub-tab-bg); padding: 4px; border-radius: 8px; width: fit-content; }
.sub-tab-btn { background: none; border: none; color: var(--text-secondary); padding: 6px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border-radius: 6px; transition: all 0.2s; }
.sub-tab-btn:hover { color: var(--text-primary); }
.sub-tab-btn.active { background: var(--accent-primary); color: #1e293b; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.sub-tab-pane { display: none; }
.sub-tab-pane.active { display: block; }

@media (pointer: coarse) { 
    .nav-tabs { scrollbar-width: none; mask-image: linear-gradient(to left, transparent 0%, black 100px); -webkit-mask-image: linear-gradient(to left, transparent 0%, black 100px); } 
    .nav-tabs::-webkit-scrollbar { display: none; } 
}

.tab-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--text-secondary); padding: 8px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer; border-radius: 6px; transition: all 0.2s; }
.tab-btn:hover { color: var(--text-primary); background-color: rgba(22, 198, 182, 0.1); }
.tab-btn.active { color: #1e293b; background-color: var(--accent-primary); }
.icon { width: 18px; height: 18px; }

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

/* cards */
.card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card:hover { border-color: var(--border-glow); }
.card-header-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card h2 { font-size: 1.2rem; margin-bottom: 12px; }
.card h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--accent-primary); }
.card h4 { font-size: 0.95rem; margin-bottom: 8px; color: var(--text-primary); }
.card-desc { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 16px; }
.card-desc.margin-top { margin-top: 8px !important; }
.card-desc-small { color: var(--text-secondary); font-size: 0.7rem; margin-bottom: 16px; }
.card-desc details { cursor: pointer; display: inline; }
.card-desc details summary { color: var(--accent-primary); font-weight: 600; font-size: 0.7rem; display: inline; list-style: none; }
.card-desc details summary:hover { text-decoration: underline; }
.card-desc details summary::-webkit-details-marker { display: none; }
.card-desc details[open] summary { display: none; }
.card-desc details[open] { margin-top: 8px; }
.card-desc-more { display: block; margin-top: 8px; margin-bottom: 16px; color: var(--text-secondary); font-size: 0.7rem; line-height: 1.4; border-left: 2px solid var(--accent-primary); background: rgba(22, 198, 182, 0.05); padding-left: 12px; padding-top: 8px; padding-bottom: 8px; }

.playlist-card, .service-card {
    background-color: var(--input-bg);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.playlist-card-header, .service-card-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    width: 100%; 
    gap: 12px; 
}

.playlist-title-group, .service-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    flex: 1;
    min-width: 0;
}

.playlist-title-group:hover h3, .service-title-group:hover h3 {
    color: var(--text-primary);
}

.chevron {
    font-size: 0.75rem;
    color: var(--accent-primary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    align-self: flex-start;
    margin-top: 5px;
}

.playlist-card.collapsed .chevron,
.service-card.collapsed .chevron {
    transform: scaleY(-1);
}

/* collapse animation */
.playlist-card-body, .service-card-body {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    padding-top: 0;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.3s ease;
    opacity: 1;
}

.card-body-content {
    overflow: hidden;
}

.playlist-card.collapsed .playlist-card-body,
.service-card.collapsed .service-card-body {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

.playlist-card:not(.collapsed) .playlist-card-body,
.service-card:not(.collapsed) .service-card-body { 
    padding-top: 16px;
}

.playlist-card.disabled-card {
    opacity: 0.6;
    border-style: dashed;
    filter: grayscale(0.6);
    transition: all 0.3s ease;
}

.playlist-card.disabled-card .playlist-title {
    color: var(--text-secondary);
}

.playlist-card.disabled-card .btn.danger {
    opacity: 1;
    filter: none;
}

.playlist-card.dragging { opacity: 0.4; border: 2px dashed var(--accent-primary); cursor: move; }
.drag-handle { cursor: grab !important; padding: 1px 4px 2px 2px; color: var(--text-secondary); font-size: 1.2rem; order: 10; opacity: 0.5; transition: opacity 0.2s; user-select: none; -webkit-user-select: none; }
.drag-handle:hover { opacity: 1; color: var(--accent-primary); }
.drag-handle:active { cursor: grabbing; }
.playlist-card { cursor: default; transition: transform 0.1s ease; }

.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
.status-item { position: relative; background-color: var(--input-bg); padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); }
.status-item .label { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 4px; }
.status-item .value { font-size: 1rem; font-weight: 700; text-transform: uppercase; }
.value.success { color: var(--accent-primary); }
.value.warning { color: var(--accent-yellow); }
.value.error { color: var(--accent-red); }

.playlists-list, .services-list { display: flex; flex-direction: column; gap: 16px; }
.playlist-row { display: flex; justify-content: space-between; align-items: center; }
.playlist-title, .service-title { font-weight: 600; }
.playlist-title-global, .service-title-global { color: var(--accent-primary); }

.playlist-count {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-left: 8px;
}

.header-controls, 
.service-card-header .actions { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    flex-shrink: 0; 
}

.playlist-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.playlist-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

.meta-item strong {
    color: var(--accent-primary);
    font-weight: 600;
}

.form-group { margin-bottom: 16px; display: flex; flex-direction: column; width: 100%; }
.form-group label { display: block; font-size: 0.85rem; color: var(--text-primary); margin-bottom: 6px; font-weight: 600; }
.form-stack { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.form-row { display: flex; gap: 12px; width: 100%; }
.form-row .form-group { flex: 1; }

.input-button-row { display: flex; gap: 8px; width: 100%; }
.input-button-row input { flex: 1; }

input[type="text"], input[type="number"], input[type="file"], select, textarea {
    width: 100%; padding: 10px 12px; background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 0.875rem;
}

input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--accent-primary) !important;
    box-shadow: inset 0 0 0 1px var(--accent-primary) !important;
    background-color: var(--card-solid);
}

input[type="checkbox"]:focus {
    box-shadow: none !important;
}

input::placeholder {
    color: var(--text-dimmed);
}

input:disabled {
    color: var(--text-dimmed);
    -webkit-text-fill-color: var(--text-dimmed);
}

textarea.code-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre; line-height: 1.4; }
.margin-top { margin-top: 16px; }
.margin-bottom { margin-bottom: 16px; }

.field-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.field-content { flex: 1; }
.override-checkbox { accent-color: var(--accent-primary); width: 18px; height: 18px; cursor: pointer; margin-top: 3px; }
.field-row.disabled .field-content { opacity: 0.4; filter: grayscale(1); pointer-events: none; }
.field-row.disabled .override-checkbox { opacity: 1 !important; pointer-events: auto !important; }
.override-checkbox:has(~ .switch-container) { margin-top: 14px; }

/* toggle switches */
.switch-container { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.switch-container:last-child { border-bottom: none; }
.switch-label { font-size: 0.875rem; color: var(--text-primary); }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; user-select: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #334155; transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-primary); }
input:checked + .slider:before { transform: translateX(20px); }

.switch-small { width: 34px !important; height: 18px !important; }
.switch-small .slider:before { height: 12px; width: 12px; left: 3px; bottom: 3px; }
.switch-small input:checked + .slider:before { transform: translateX(16px) !important; }

/* buttons */
button { font-family: inherit; }
.actions { display: flex; gap: 12px; }
.actions.right { justify-content: flex-end; }
.btn { padding: 10px 18px; border-radius: 6px; border: none; font-weight: 600; cursor: pointer; font-size: 0.875rem; transition: all 0.2s; white-space: nowrap; }
.btn.primary, .btn.success { background-color: var(--accent-primary); color: #0f172a; }
.btn.primary:hover, .btn.success:hover { background-color: var(--accent-hover); }
.btn.secondary { background-color: var(--accent-secondary); color: var(--text-primary); }
.btn.secondary:hover { opacity: 0.8; }
.btn.danger { background-color: var(--accent-red); color: white; }
.btn.danger:hover { background-color: #dc2626; }
.btn-small { padding: 6px 12px; font-size: 0.8rem; line-height: normal !important; }
.theme-toggle { background-color: var(--border-color); color: var(--text-primary); padding: 6px 12px; font-size: 0.8rem; }
.btn-refresh-mini { position: absolute; top: 12px; right: 8px; background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-secondary); opacity: 0.5; display: flex; transition: all 0.2s; }
.btn-refresh-mini:hover { opacity: 1; color: var(--accent-primary); }
.btn-refresh-mini svg { width: 14px; height: 14px; }
.spinning { animation: spin 2.0s linear; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }

.btn:disabled, .btn[disabled] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Remove underline */
}

a.btn.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important; /* Prevents clicking */
    filter: grayscale(1);
}

/* modals */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-card { background: var(--card-solid); border: 1px solid var(--accent-primary); border-radius: 12px; padding: 24px; max-width: 500px; width: 90%; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5); }
.modal-card h2 { color: var(--accent-primary); margin-bottom: 12px; }
.modal-card .actions { justify-content: flex-end; }
.modal-desc { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; }
.modal-desc-small { font-size: 0.7rem; }

/* toast notifications */
.toast { position: fixed; z-index: 10000; top: 20px; left: 50%; transform: translate(-50%, -30px); opacity: 0; min-width: 300px; max-width: 90%; padding: 14px 24px; border-radius: 8px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.4); font-weight: 600; text-align: center; pointer-events: none; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; }
.toast.success { background-color: var(--card-solid); border: 2px solid var(--accent-primary); color: var(--accent-primary); }
.toast.error { background-color: var(--card-solid); border: 2px solid var(--accent-red); color: var(--accent-red); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.exit { opacity: 0; transform: translate(-50%, -40px); }

.hidden { display: none !important; }

/* log console card */
.log-viewport {
    height: 350px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: pre-wrap;
    color: var(--text-primary);
}

#log-section.card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#log-section .playlist-card-header {
    padding-bottom: 12px;
}

#log-section .playlist-title-group {
    flex: 0 1 auto;
    min-width: 0;
}

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; background: var(--accent-yellow); box-shadow: 0 0 8px var(--accent-yellow); }
.dot.live { background: var(--accent-primary); box-shadow: 0 0 8px var(--accent-primary); }
.dot.connecting { background: var(--accent-yellow); box-shadow: 0 0 8px var(--accent-yellow); }
.dot.offline { background: var(--accent-red); box-shadow: 0 0 8px var(--accent-red); }

/* log line formatting */
.log-line { display: block; margin: 0 0 1px 0; padding: 0; border: none; }
.log-time { display: inline-block; color: var(--text-secondary); opacity: 0.7; margin-right: 1px; }
.log-src  { display: inline-block; min-width: 8ch; color: var(--accent-blue); font-weight: 600; margin-right: 1px; }
.log-type { display: inline-block; font-weight: bold; }
.log-msg  { white-space: pre-wrap; }

.type-error { color: var(--accent-red); }
.type-warning { color: var(--accent-yellow); }
.type-info { color: var(--accent-blue); }
.type-success { color: var(--accent-primary); }
.type-debug { color: var(--text-secondary); }

/* mobile */
@media (max-width: 640px) {
    body { padding: 12px; }
    .header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .header-right { width: 100%; justify-content: space-between; }
    .status-grid { grid-template-columns: repeat(2, 1fr); }
    .playlist-card-header { display: grid; grid-template-areas: "title handle" "controls controls"; grid-template-columns: 1fr auto; gap: 10px; align-items: center; width: 100%; }
    .playlist-title-group { grid-area: title; min-width: 0; }
    .drag-handle { grid-area: handle; align-self: start; padding: 4px 6px; font-size: 1.4rem; cursor: grab; touch-action: none; }
    .header-controls { grid-area: controls; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
    .header-controls .actions { width: auto !important; max-width: 100% !important; margin-left: auto; flex: 0 1 auto !important; justify-content: flex-end; flex-wrap: wrap !important; gap: 8px; }
    .header-controls .actions .btn { flex: 0 0 auto !important; width: auto !important; padding: 6px 10px; font-size: 0.8rem; }
    .service-card-header .actions { width: auto !important; flex: 0 0 auto !important; margin-left: auto; }
    .service-card-header .actions .btn { flex: 0 0 auto !important; width: auto !important; padding: 5px 10px; font-size: 0.75rem; }
    .actions { width: 100%; flex-wrap: wrap; }
    .actions .btn { flex: 1 1 auto; }
    .form-row { flex-direction: column; gap: 0; }
    .input-button-row { flex-direction: column; }
    #log-section .playlist-card-header { flex-direction: unset !important; align-items: unset !important; gap: 12px; }
    .log-src { min-width: unset !important; }
}

/* --- styles for playlist view page --- */
.playlist-view-list { list-style: none; padding: 0; }
.playlist-view-item, .playlist-folder-card { background: var(--card-bg); backdrop-filter: blur(12px); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.1s ease, border-color 0.2s; }
.playlist-view-item:hover { border-color: var(--accent-primary); }
.playlist-view-item .item-main { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-view-item .item-main a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
.playlist-view-item .item-main a:hover { color: var(--accent-primary); }
.playlist-view-item .item-actions { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; margin-left: 16px; display: flex; align-items: center; gap: 8px; }
.playlist-view-item .action-link { color: var(--accent-primary); text-decoration: none; }
.playlist-view-item .action-link:hover { text-decoration: underline; }
.playlist-view-item .sep { color: var(--text-secondary); user-select: none; }
.playlist-folder-header { padding: 15px 0 5px 0; color: var(--accent-primary); font-size: 1.05rem; border-bottom: 1px solid rgba(22, 198, 182, 0.15); margin-bottom: 5px; }
.playlist-folder-card { background: rgba(22, 198, 182, 0.05); border-color: rgba(22, 198, 182, 0.3); font-weight: 600; color: var(--accent-primary); }
.hierarchy-level { border-left: 2px solid rgba(22, 198, 182, 0.4); margin-left: 15px; padding-left: 15px; margin-top: 5px; }
@media (max-width: 700px) {
    .playlist-view-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .playlist-view-item .item-main { width: 100%; white-space: normal; }
    .playlist-view-item .item-actions { margin-left: 0; width: 100%; justify-content: flex-end; font-size: 0.8rem; }
}

/* --- styles for custom playlist editor --- */
.editor-container { display: flex; height: calc(100vh - 160px); gap: 20px; margin-top: 20px; align-items: stretch; }
.tree-sidebar { width: 420px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; overflow: hidden; }
.tree-view { flex: 1; overflow-y: auto; margin-top: 15px; padding-right: 5px; }
.chevron-btn { display: inline-block; width: 22px !important; cursor: pointer; padding: 2px 6px; font-size: 0.7rem; color: var(--accent-primary); transition: transform 0.2s ease-in-out; user-select: none; }
.chevron-btn.collapsed { transform: rotate(-90deg); }
.tree-node-wrapper.collapsed > .node-children { display: none; }
.properties-panel { flex: 1; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; overflow-y: auto; }.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); text-align: center; gap: 10px; }
.tree-node { cursor: pointer; padding: 4px 4px; border-radius: 6px; display: flex; align-items: center; gap: 4px; font-size: 0.9rem; transition: background 0.2s; margin-bottom: 2px; }
.tree-node:hover { background: rgba(22, 198, 182, 0.1); }
.tree-node.active { background: var(--accent-primary); color: #0f172a; }
.tree-node.active .chevron-btn { color: #0f172a !important; }
.tree-node.dragging { opacity: 0.3; border: 1px dashed var(--accent-primary); }
.tree-node.drag-over { border-top: 2px solid var(--accent-primary); background: rgba(22, 198, 182, 0.1); }.empty-panel { flex: 1; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; overflow-y: auto; }
.tree-node.drag-over-top { border-top: 2px solid var(--accent-primary) !important; background: rgba(22, 198, 182, 0.1); }
.tree-node.drag-over-bottom { border-bottom: 2px solid var(--accent-primary) !important; background: rgba(22, 198, 182, 0.1); }
.tree-node[draggable="true"]:hover { box-shadow: inset -3px 0 var(--accent-primary); }
.tree-node-wrapper.collapsed > .node-children { display: none; }
.node-children { padding-left: 18px; border-left: 1px dashed var(--border-color); margin-left: 14px; margin-top: 2px; margin-bottom: 4px; }