:root {
    --bg: #050505;
    --menu: #303033;
    --menuSec: #3a3a3a;
    --textMain: #a8a6a8;
    --textLight: #ffffff;
    --textMuted: #6b6b6b;
    --accentStart: #FF7A00;
    --accentEnd: #E65100;
    --cardBg: #151518;
    --surfaceBg: #0a0a0a;
    --bodyBg: #050505;
    --borderColor: rgba(255,255,255,0.05);
    --bgSoft: rgba(255,255,255,0.05);
    --borderSoft: rgba(255,255,255,0.08);
    --numBg: rgba(255,255,255,0.03);
    --autofillBg: #1a1a1a;
    --scrollbarTrack: #1a1a1a;
    --scrollbarThumb: #3a3a3a;
    --cardGlassBg: rgba(58,58,58,0.4);
}
[data-theme="light"] {
    --bg: #f5f5f5;
    --menu: #ffffff;
    --menuSec: #f0f0f0;
    --textMain: #555555;
    --textLight: #1a1a1a;
    --textMuted: #888888;
    --accentStart: #FF7A00;
    --accentEnd: #E65100;
    --cardBg: #ffffff;
    --surfaceBg: #ffffff;
    --bodyBg: #f5f5f5;
    --borderColor: rgba(0,0,0,0.08);
    --bgSoft: rgba(0,0,0,0.05);
    --borderSoft: rgba(0,0,0,0.08);
    --numBg: rgba(0,0,0,0.03);
    --autofillBg: #ffffff;
    --scrollbarTrack: #e0e0e0;
    --scrollbarThumb: #cccccc;
    --cardGlassBg: rgba(255,255,255,0.7);
}
body {
    background: var(--bodyBg);
    color: var(--textMain);
    font-family: 'Inter', sans-serif;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px var(--autofillBg) inset !important;
    -webkit-text-fill-color: var(--textLight) !important;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbarTrack); }
::-webkit-scrollbar-thumb { background: var(--scrollbarThumb); border-radius: 4px; }
.text-gradient {
    background: linear-gradient(135deg, var(--accentStart), var(--accentEnd));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accentStart), var(--accentEnd));
    color: #000;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(255,122,0,0.3);
}
.card-glass {
    background: var(--cardGlassBg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--borderColor);
}
.accordion-content {
    transition: max-height 0.3s ease-out, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.accordion-content.active {
    max-height: 500px;
    opacity: 1;
}
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    background: var(--bg);
    border-right: 1px solid var(--borderColor);
    z-index: 50;
    overflow-y: auto;
}
.main-content {
    margin-left: 260px;
    min-height: 100vh;
}
.bg-surface { background: var(--surfaceBg); }
.bg-card { background: var(--cardBg); }
.bg-theme { background: var(--bodyBg); }
.text-theme-light { color: var(--textLight); }
.border-theme { border-color: var(--borderColor); }
.text-heading { color: var(--textLight); }
.text-muted { color: var(--textMuted); }
.hover-text-heading:hover { color: var(--textLight); }
[data-theme] .text-textMain { color: var(--textMain); }
[data-theme] .hover\:text-textMain:hover { color: var(--textMain); }
.bg-soft { background: var(--bgSoft); }
.bg-soft-10 { background: rgba(255,255,255,0.1); }
[data-theme="light"] .bg-soft-10 { background: rgba(0,0,0,0.06); }
.border-soft { border-color: var(--borderSoft); }
.border-soft-10 { border-color: rgba(255,255,255,0.1); }
[data-theme="light"] .border-soft-10 { border-color: rgba(0,0,0,0.08); }
.border-soft-20 { border-color: rgba(255,255,255,0.2); }
[data-theme="light"] .border-soft-20 { border-color: rgba(0,0,0,0.15); }
.hover-bg-soft:hover { background: var(--bgSoft); }
.text-accentStart { color: var(--accentStart); }
.border-accentStart { border-color: var(--accentStart); }
.border-accentStart\/20 { border-color: rgba(255,122,0,.2); }
.border-accentStart\/40 { border-color: rgba(255,122,0,.4); }
.border-accentStart\/50 { border-color: rgba(255,122,0,.5); }
.bg-accentStart\/5 { background: rgba(255,122,0,.05); }
.bg-accentStart\/10 { background: rgba(255,122,0,.1); }
.bg-accentStart\/20 { background: rgba(255,122,0,.2); }
.bg-accentStart\/30 { background: rgba(255,122,0,.3); }
.bg-accentStart\/50 { background: rgba(255,122,0,.5); }
.hover\:bg-accentStart\/20:hover { background: rgba(255,122,0,.2); }
.hover\:border-accentStart:hover { border-color: var(--accentStart); }
.hover\:border-accentStart\/40:hover { border-color: rgba(255,122,0,.4); }
.hover\:text-accentStart:hover { color: var(--accentStart); }
.hover\:text-accentStart\/80:hover { color: rgba(255,122,0,.8); }
.focus\:border-accentStart\/50:focus { border-color: rgba(255,122,0,.5); }
.ring-accentStart { --tw-ring-color: var(--accentStart); }
.has-\[\:checked\]\:bg-accentStart\/30:has(:checked) { background: rgba(255,122,0,.3); }
.has-\[\:checked\]\:border-accentStart:has(:checked) { border-color: var(--accentStart); }
.nav-bg {
    background: rgba(48, 48, 51, 0.9);
}
[data-theme="light"] .nav-bg {
    background: rgba(255, 255, 255, 0.9);
}
[data-theme] .text-gray-400 { color: var(--textMuted); }
[data-theme] .text-gray-500 { color: var(--textMuted); }
[data-theme] .text-gray-600 { color: var(--textMuted); }
@media (max-width: 768px) {
    .sidebar { width: 100%; z-index: 100; transform: translateX(-100%); transition: transform 0.3s; }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
}