:root{
    --bg:#0a0a0f;
    --bg2:#12121a;
    --bg3:#16161f;
    --bg4:#1c1c28;
    --border:rgba(255,255,255,0.06);
    --border2:rgba(255,255,255,0.12);
    --text:#e8e8ed;
    --text2:#8b8b9e;
    --text3:#5a5a6e;
    --accent:#6366f1;
    --accent2:#818cf8;
    --glow:rgba(99,102,241,0.15);
    --gradient:linear-gradient(135deg,#6366f1,#a855f7);
    --radius:14px;
    --radius-s:10px;
    --navbar-bg:rgba(10,10,15,0.82);
}

html[data-theme="light"]{
    --bg:#f7f8fc;
    --bg2:#ffffff;
    --bg3:#ffffff;
    --bg4:#f0f2f8;
    --border:rgba(0,0,0,0.08);
    --border2:rgba(0,0,0,0.14);
    --text:#1a1a2e;
    --text2:#4a4a5e;
    --text3:#7a7a8e;
    --accent:#6366f1;
    --accent2:#4f46e5;
    --glow:rgba(99,102,241,0.1);
    --gradient:linear-gradient(135deg,#6366f1,#a855f7);
    --navbar-bg:rgba(255,255,255,0.85);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    min-height:100vh;
}
a{color:inherit;text-decoration:none}

html[data-theme="light"] body{
    background:linear-gradient(180deg,#f7f8fc 0%,#eef0f7 100%);
}

/* navbar */
.navbar{
    position:sticky;
    top:0;
    z-index:100;
    background:var(--navbar-bg);
    backdrop-filter:blur(20px) saturate(1.4);
    border-bottom:1px solid var(--border);
    padding:0 24px;
}
.navbar-inner{
    max-width:1400px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px;
}
.logo{
    font-size:21px;
    font-weight:800;
    background:var(--gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    display:flex;
    align-items:center;
    gap:8px;
}
.logo img{
    height:36px;
    -webkit-text-fill-color:initial;
    object-fit:contain;
}
.logo .logo-icon{
    font-size:24px;
    -webkit-text-fill-color:initial;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:4px;
}
.nav-links a{
    padding:7px 13px;
    border-radius:8px;
    font-size:13.5px;
    color:var(--text2);
    transition:.2s;
}
.nav-links a:hover,
.nav-links a.active{
    color:var(--text);
    background:rgba(255,255,255,0.06);
}

.nav-dropdown{
    position:relative;
    display:inline-block;
}
.nav-dropdown > a{
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.nav-dropdown .arrow{
    font-size:10px;
    opacity:.6;
    transition:transform .2s;
}
.nav-dropdown:hover > a .arrow{
    transform:rotate(180deg);
}
.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:200px;
    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:6px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    transition:.18s;
    z-index:120;
}
.nav-dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.dropdown-menu a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:7px;
    font-size:13px;
    color:var(--text2);
    white-space:nowrap;
    transition:.15s;
}
.dropdown-menu a:hover,
.dropdown-menu a.active{
    background:rgba(99,102,241,.1);
    color:var(--accent2);
}
.dropdown-divider{
    height:1px;
    background:var(--border);
    margin:4px 0;
}

html[data-theme="light"] .dropdown-menu{
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
html[data-theme="light"] .dropdown-menu a:hover,
html[data-theme="light"] .dropdown-menu a.active{
    background:rgba(99,102,241,.08);
}

.theme-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
    transition:.2s;
    margin-left:8px;
    color:var(--text2);
}
.theme-btn:hover{
    background:rgba(99,102,241,0.12);
    border-color:rgba(99,102,241,0.3);
    color:var(--accent2);
}

.footer{
    border-top:1px solid var(--border);
    padding:28px 24px;
    text-align:center;
}
.footer p{
    font-size:12px;
    color:var(--text3);
    margin-bottom:3px;
}

.badge{
    display:inline-flex;
    padding:1px 6px;
    border-radius:4px;
    font-size:10px;
    font-weight:500;
}
.badge-featured{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}
.badge-free{background:rgba(34,197,94,0.15);color:#4ade80}
.badge-domestic{background:rgba(59,130,246,0.15);color:#60a5fa}

html[data-theme="light"] .theme-btn{
    background:rgba(0,0,0,.04);
    color:var(--text2);
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active{
    background:rgba(0,0,0,.04);
    color:var(--text);
}

@media(max-width:768px){
    .nav-links{display:none}
}