:root {
    --uniform-gap: 0.25vw;
    --sidebar-width: clamp(50px, 4vw, 80px);
    --panel-width: clamp(220px, 18vw, 360px);
    --panel-collapsed: clamp(28px, 3vw, 48px);
    --sidebar-radius-ratio: 0.25;
    --clickable-offset: 0.05;
    --radius: calc(var(--sidebar-width) * var(--sidebar-radius-ratio));
    --icon-size-ratio: 0.5;
    --text-size-ratio: 0.15;
    --clickable-width: calc(var(--sidebar-width) - 2 * var(--sidebar-width) * var(--clickable-offset));
    --title-height: clamp(40px, 6vh, 70px);
}

.theme-light {
    --bg-main: #F4F6F8;
    --bg-panel: #FFFFFF;
    --text-color: #333333;
    --border-color: #DEE2E6;
    
    --sidebar-bg: #0a2463;
    --clickable-bg: #0a2463;
    --clickable-bg-hover: rgba(255, 255, 255, 0.2);
    --clickable-bg-active: #3e99cc;
    --side-panels-bg: #3e99cc;
    --right-panel-bg: #dee2e6;
    --center-panel-bg: #ffffff;
    --top-box-bg: #f8f9fa;
    --tab-active-bg: #ffffff;
    --tab-inactive-bg: #e9ecef;
    --tab-hover-bg: #dee2e6;
    --tab-active-text-color: #d8315b;
}

.theme-dark {
    --bg-main: #121212;
    --bg-panel: #1E1E1E;
    --text-color: #FFFFFF;
    --border-color: #333333;
    
    --sidebar-bg: #05133b;
    --clickable-bg: #05133b;
    --clickable-bg-hover: rgba(255, 255, 255, 0.1);
    --clickable-bg-active: #1f6b99;
    --side-panels-bg: #1f6b99;
    --right-panel-bg: #1E1E1E;
    --center-panel-bg: #121212;
    --top-box-bg: #1A1A1A;
    --tab-active-bg: #121212;
    --tab-inactive-bg: #222222;
    --tab-hover-bg: #333333;
    --tab-active-text-color: #ff4d79;
}

body { 
    margin: 0; 
    overflow: hidden; 
    font-family: 'Segoe UI', sans-serif; 
    background-color: var(--bg-main); 
}

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

.panel-style {
    background-color: var(--bg-panel);
    color: var(--text-color);
    border-color: var(--border-color);
    transition: background-color 0.3s, color 0.3s;
}

.main-style {
    background-color: var(--bg-main);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

.clickable-area:hover { background-color: var(--clickable-bg-hover) !important; }
.clickable-area-active { background-color: var(--clickable-bg-active) !important; }
.tab:hover { background-color: var(--tab-hover-bg) !important; }

.collapse-btn-left,
.collapse-btn-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(28px, 2vw, 40px);
    height: clamp(28px, 2vw, 40px);
    background-color: var(--bg-panel);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.2s ease;
    font-size: clamp(12px, 1vw, 18px);
    color: var(--text-color);
}

.collapse-btn-left { right: calc(-0.5 * clamp(28px, 2vw, 40px)); }
.collapse-btn-right { left: calc(-0.5 * clamp(28px, 2vw, 40px)); }

.collapse-btn-left:hover,
.collapse-btn-right:hover {
    background-color: var(--clickable-bg-active);
    border-color: var(--clickable-bg-active);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.collapse-btn-left i, .collapse-btn-right i { transition: transform 0.3s ease; }
.left-panel.collapsed .collapse-btn-left i { transform: rotate(180deg); }
.right-panel.collapsed .collapse-btn-right i { transform: rotate(180deg); }

.left-panel { flex: 0 0 var(--panel-width); }
.left-panel.collapsed { flex: 0 0 var(--panel-collapsed); }
.right-panel { flex: 0 0 var(--panel-width); }
.right-panel.collapsed { flex: 0 0 var(--panel-collapsed); }

.left-panel.collapsed #left-panel-content, 
.left-panel.collapsed #left-panel-title { opacity: 0; pointer-events: none; }

.right-panel.collapsed #right-panel-content, 
.right-panel.collapsed #right-panel-title { opacity: 0; pointer-events: none; }

.rc-slider-mark { display: none; }