@charset "utf-8";

:root {
	--left-w:300px; --right-w:300px; --gap:20px;
	--color-white:#fff; --color-black:#000;
	--color-rank01:#ef4444; --color-rank02:#f59e0b; --color-rank03:#ec4899; --color-rank04:#8b5cf6; --color-rank05:#6366f1;
	--color-rank06:#3b82f6; --color-rank07:#22c55e; --color-rank08:#10b981; --color-rank09:#94a3b8; --color-rank10:#64748b; --color-rank11:#CD7F32;
}

body[data-theme="light"] {
	--panel-radius:24px; 
	--text-lv1:#2C3749; --text-lv2:#57667B; --text-lv3:#C0C7D3; 
	--motion:ease; --motion-duration:0.3s; --motion-all:all var(--motion-duration) var(--motion); 
	
	--layout-max-lv1:rgba(255, 255, 255, 0.7);
	--layout-max-lv2:rgba(255, 255, 255, 0.6);
	--layout-max-lv3:rgba(255, 255, 255, 0.3);
	--layout-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.08), inset 0px 0px 7px rgba(255, 255, 255, 0.35); 
	--layout-blur:blur(12px) saturate(1.8); 
	
	--layout-min-lv1:rgba(0, 0, 0, 0.07);
	--layout-min-lv2:rgba(0, 0, 0, 0.06);
	--layout-min-lv3:rgba(0, 0, 0, 0.03);
	
	--color-main-lv1:#00d2ff;
	--color-main-lv2:rgba(0, 210, 255, .3);
	--color-main-lv3:rgba(231,239,241,0.90);
	
	--color-shadow-lv1:0 8px 13px -3px var(--color-main-lv2);
	--color-shadow-lv2:0 3px 5px -3px var(--color-main-lv2);
	--color-shadow-lv3:0 2px 7px var(--color-main-lv2);
	--dark-shadow-lv1:0 8px 13px -3px var(--layout-min-lv1);
	--dark-shadow-lv2:0 3px 5px -3px var(--layout-min-lv1);
	--dark-shadow-lv3:0 2px 7px var(--layout-min-lv1);
	--bg-transparent:transparent;
	
    --bg-gradient:linear-gradient(120deg, #f4f7f6 0%, #dfe6e9 100%);
    --orb-opacity:0.6;
    --orb-color-1:#a29bfe; --orb-color-2:#81ecec; --orb-color-3:#fab1a0;
}

body[data-theme="dark"] {
    --panel-radius:24px; 
    --text-lv1:#ffffff; --text-lv2:#9aa4af; --text-lv3:#515163; 
    --motion:ease; --motion-duration:0.3s; --motion-all:all var(--motion-duration) var(--motion); 
	
    --layout-max-lv1:rgba(27, 26, 29, 0.85);
	--layout-max-lv2:rgba(154, 164, 175, 0.15);
	--layout-max-lv3:rgba(49, 49, 60, 0.6);
    --layout-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.08); 
    --layout-blur:blur(15px) saturate(1.3); 
    
    --layout-min-lv1:rgba(0, 0, 0, 0.25);
	--layout-min-lv2:rgba(0, 0, 0, 0.4);
	--layout-min-lv3:rgba(255, 255, 255, 0.05); 
    
    --color-main-lv1:rgba(139,92,246,1.00);
	--color-main-lv2:rgba(139,92,246,.5);
	--color-main-lv3:rgba(27,26,29,0.90);
	
	--color-shadow-lv1:0 10px 15px -3px var(--color-main-lv2);
	--color-shadow-lv2:0 4px 6px -4px var(--color-main-lv2);
	--color-shadow-lv3:0 2px 7px var(--color-main-lv2);
	--dark-shadow-lv1:0 10px 15px -3px var(--layout-min-lv1);
	--dark-shadow-lv2:0 4px 6px -4px var(--layout-min-lv1);
	--dark-shadow-lv3:0 2px 7px var(--layout-min-lv1);
	--bg-transparent:transparent;
	
    --bg-gradient:linear-gradient(120deg, #1b1a1d 0%, #121214 100%);
    --orb-opacity:0.45;
    --orb-color-1:#6366f1; --orb-color-2:#00d2ff; --orb-color-3:#ec4899;
}

body[data-theme="performance"] {
    --panel-radius:12px; 
    --text-lv1:#191f28; --text-lv2:#606d7d; --text-lv3:#b0b8c1;
    --motion:cubic-bezier(0.4, 0, 0.2, 1); --motion-duration:0.2s; --motion-all:all var(--motion-duration) var(--motion);
	
	--layout-max-lv1:rgba(242,244,247,0.80);
	--layout-max-lv2:rgba(228,228,228,0.8);
	--layout-max-lv3:rgba(255,255,255,0.8);
    --layout-shadow:0 1px 3px rgba(0,0,0,0.04); 
    --layout-blur:none;

	--layout-min-lv1:rgba(225,228,232,0.8);
	--layout-min-lv2:rgba(225,228,232,0.8);
	--layout-min-lv3:rgba(233,234,235,0.8);
	
    --color-main-lv1:#03a94d;
	--color-main-lv2:transparent;
	--color-main-lv3:#e7ebef;
	
	--dark-shadow-lv1:0 0 2px var(--layout-min-lv1);
	--dark-shadow-lv2:0 0 1px var(--layout-min-lv1);
	--dark-shadow-lv3:0 2px 7px var(--layout-min-lv1);
	
	--bg-transparent:rgba(255, 255, 255, 0.8);
	--bg-gradient:linear-gradient(120deg, #f5f7f9 0%, #f5f7f9 100%);
}

body[data-theme="perf-dark"] {
    --panel-radius:12px; 
    --text-lv1:#f2f3f5; --text-lv2:#b5bac1; --text-lv3:#949ba4;
    --motion:cubic-bezier(0.4, 0, 0.2, 1); --motion-duration:0.2s; --motion-all:all var(--motion-duration) var(--motion);
	
	--layout-max-lv1:rgba(30,31,34,0.8);
	--layout-max-lv2:rgba(30,31,34,0.8);
	--layout-max-lv3:rgba(43,45,49,0.8);
    --layout-shadow:0 1px 2px rgba(4, 4, 5, 0.2);
    --layout-blur:none;
	
	--layout-min-lv1:rgba(30,31,34,0.8);
	--layout-min-lv2:rgba(32, 33, 36, 0.8);
	--layout-min-lv3:rgba(46,48,53,0.8);
	
    --color-main-lv1:#5865F2;
	--color-main-lv2:transparent;
	--color-main-lv3:#313338;
	
	--dark-shadow-lv1:0 0 3px var(--layout-min-lv1);
	--dark-shadow-lv2:0 0 2px var(--layout-min-lv1);
	--dark-shadow-lv3:0 2px 7px var(--layout-min-lv1);
	
	--bg-transparent:rgba(49,51,56,0.8);
	--bg-gradient:linear-gradient(120deg, #313338 0%, #313338 100%);
}