:root {
    --accent: #b366ff;
    --accent2: #ff66b2;
    --text: #fff;
    --text-secondary: rgba(255,255,255,0.7);
}
body[data-theme="green"] { --accent: #40ff80; --accent2: #80ff40; }
body[data-theme="sunset"] { --accent: #ff8040; --accent2: #ffc080; }
body[data-theme="dark"] { --accent: #8888cc; --accent2: #5555aa; }
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Inter', sans-serif;
    background: #000;
    color: var(--text);
    overflow: hidden;
    height: 100vh;
    cursor: none;
}
#bg-canvas { position:fixed; top:0;left:0;width:100%;height:100%;z-index:0; }
.nav-orbit { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:600px; pointer-events:auto; }
.nav-planet {
    position:absolute; width:80px; height:80px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), var(--accent) 80%);
    box-shadow:0 0 20px var(--accent2), 0 0 40px rgba(180,100,255,0.5);
    animation: orbit 10s linear infinite;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.nav-planet:hover {
    transform: scale(1.4);
    box-shadow:0 0 40px var(--accent2), 0 0 80px rgba(255,102,178,0.8);
}
.nav-planet:active { transform: scale(0.9); transition: transform 0.1s; }
.nav-planet:nth-child(1) { top:0; left:50%; transform:translateX(-50%); animation-delay:0s; }
.nav-planet:nth-child(2) { top:50%; left:100%; transform:translate(-50%,-50%); animation-delay:-2s; }
.nav-planet:nth-child(3) { top:100%; left:50%; transform:translate(-50%,-100%); animation-delay:-4s; }
.nav-planet:nth-child(4) { top:50%; left:0; transform:translate(-50%,-50%); animation-delay:-6s; }
.nav-planet:nth-child(5) { top:0; left:0; transform:translate(-50%,-50%); animation-delay:-8s; }
@keyframes orbit {
    from { transform:rotate(0deg) translateX(300px) rotate(0deg); }
    to { transform:rotate(360deg) translateX(300px) rotate(-360deg); }
}
.planet-icon { font-size:2rem; color:white; filter:drop-shadow(0 0 6px #000); }
.content-area { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); width:90%; max-width:900px; pointer-events:auto; }
.tab-content {
    display:none;
    background: rgba(10,10,26,0.7); backdrop-filter: blur(30px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 40px; padding: 30px;
    box-shadow: 0 0 60px rgba(180,100,255,0.4);
    animation: jellyOpen 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 60vh;
    overflow-y: auto;
}
.tab-content.active { display:block; }
@keyframes jellyOpen {
    0% { opacity:0; transform: scale(0.7); }
    70% { opacity:1; transform: scale(1.02); }
    100% { transform: scale(1); }
}
.gradient-title {
    font-size: 3rem;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.typewriter {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.2rem;
    color: var(--accent2);
    text-shadow: 0 0 15px var(--accent2);
    min-height: 2em;
    position: relative;
}
.particle-spark {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--accent2);
    border-radius: 50%;
    pointer-events: none;
    animation: spark 0.8s ease-out forwards;
    box-shadow: 0 0 8px var(--accent2);
}
@keyframes spark {
    0% { opacity:1; transform: translate(0,0) scale(1); }
    100% { opacity:0; transform: translate(var(--dx), var(--dy)) scale(0); }
}
.btn {
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:white; border:none;
    padding:12px 28px; border-radius:50px; font-weight:600;
    cursor:pointer; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    box-shadow:0 0 25px var(--accent2);
    position:relative; overflow:hidden;
}
.btn:hover { transform: scale(1.08); box-shadow:0 0 45px var(--accent); }
.btn:active { transform: scale(0.95); }
.ripple {
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,0.4);
    transform:scale(0);
    animation:rippleEffect 0.6s ease-out;
    pointer-events:none;
}
@keyframes rippleEffect { to { transform:scale(4); opacity:0; } }
.btn-outline { background:transparent; border:2px solid var(--accent); box-shadow:none; }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; }
.project-card {
    text-decoration:none; color:white;
    background:rgba(255,255,255,0.06); backdrop-filter:blur(10px);
    padding:20px; border-radius:30px; border:1px solid rgba(255,255,255,0.1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    display:block;
}
.project-card:hover { transform: scale(1.05); box-shadow:0 0 25px rgba(180,100,255,0.4); }
.project-card:active { transform: scale(0.96); }
.terminal-body {
    background:rgba(0,0,0,0.8); border:1px solid #33ff33; border-radius:20px;
    padding:15px; height:180px; overflow-y:auto; font-family:monospace; color:#33ff33;
    box-shadow: 0 0 20px rgba(0,255,0,0.2);
}
.terminal-input { width:100%; margin-top:10px; background:transparent; border:1px solid var(--accent); color:white; padding:10px; border-radius:50px; }
.footer { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.5); font-size:0.85rem; pointer-events:auto; }
.cursor-dot {
    width:20px; height:20px;
    background: radial-gradient(circle, var(--accent2) 0%, transparent 70%);
    border-radius:50%;
    position:fixed; pointer-events:none; z-index:9999;
    mix-blend-mode: screen; transform:translate(-50%,-50%);
    transition: width 0.2s, height 0.2s;
}
.cursor-dot.clicked { width:40px; height:40px; }

/* Настройки */
.settings-grid { display:flex; flex-direction:column; gap:20px; }
.setting-row {
    display:flex; align-items:center; gap:15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.setting-row:last-child { border-bottom: none; }
.setting-icon { font-size:1.4rem; color:var(--accent); flex-shrink:0; }
.setting-row label { flex:1; font-weight:500; }
.setting-row input[type=range] { width:150px; }
.toggle-switch { position:relative; display:inline-block; width:50px; height:24px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-switch span { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.2); border-radius:24px; transition:0.3s; }
.toggle-switch span:before { content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:white; border-radius:50%; transition:0.3s; }
.toggle-switch input:checked + span { background: var(--accent); }
.toggle-switch input:checked + span:before { transform:translateX(26px); }

/* Выбор темы */
.theme-selector { display:flex; gap:10px; }
.theme-btn {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 2px solid transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.theme-btn:hover { border-color: var(--accent); transform: scale(1.1); }
.theme-btn.active { border-color: var(--accent); box-shadow: 0 0 15px var(--accent2); }
.theme-circle {
    width: 16px; height: 16px; border-radius: 50%;
    display: block;
}

/* Скроллбары */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent2); }