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

html{scroll-behavior:smooth}

body{
min-height:100vh;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
display:flex;
justify-content:center;
padding:48px 20px;
line-height:1.6;
position:relative;
overflow-x:hidden;
background:var(--bg-body);
color:var(--text);
transition:background 0.5s ease,color 0.5s ease
}
body::before{
content:'';position:fixed;
width:700px;height:700px;
border-radius:50%;
pointer-events:none;z-index:0;
background:var(--bg-glow-1);
top:-250px;right:-150px;
transition:background 0.5s ease
}
body::after{
content:'';position:fixed;
width:600px;height:600px;
border-radius:50%;
pointer-events:none;z-index:0;
background:var(--bg-glow-2);
bottom:-200px;left:-120px;
transition:background 0.5s ease
}

.theme-toggle,
.effects-toggle{
position:fixed;
top:20px;
z-index:100;
width:40px;height:40px;
border-radius:50%;
border:1px solid var(--toggle-border);
background:var(--toggle-bg);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
color:var(--icon-color);
transition:background 0.5s ease,border-color 0.5s ease,color 0.35s ease
}
.theme-toggle{right:24px}
.effects-toggle{right:76px}
.theme-toggle:hover,
.effects-toggle:hover,
.effects-toggle[aria-expanded="true"]{
border-color:var(--icon-border-hover);
color:var(--icon-color-hover)
}
.effects-panel{
position:fixed;
top:68px;right:24px;
z-index:100;
width:min(280px,calc(100vw - 32px));
padding:14px;
border-radius:14px;
border:1px solid var(--toggle-border);
background:var(--toggle-bg);
-webkit-backdrop-filter:blur(18px);
backdrop-filter:blur(18px);
box-shadow:var(--card-shadow-hover);
color:var(--text);
transition:background 0.5s ease,border-color 0.5s ease,color 0.5s ease
}
.effects-panel[hidden]{display:none}
.effects-panel-title{
font-size:0.78rem;
font-weight:500;
letter-spacing:0.12em;
color:var(--text-muted);
margin-bottom:10px
}
.effects-list{
display:flex;
flex-direction:column;
gap:8px
}
.effect-switch{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
font-size:0.86rem;
color:var(--text-secondary);
cursor:pointer;
user-select:none
}
.effect-switch input{
position:absolute;
opacity:0;
pointer-events:none
}
.effect-switch-control{
width:42px;height:24px;
border-radius:999px;
border:1px solid var(--toggle-border);
background:rgba(127,127,127,0.18);
position:relative;
flex-shrink:0;
transition:background 0.25s ease,border-color 0.25s ease
}
.effect-switch-control::after{
content:'';
position:absolute;
top:3px;left:3px;
width:16px;height:16px;
border-radius:50%;
background:var(--icon-color);
transition:transform 0.25s ease,background 0.25s ease
}
.effect-switch input:checked+.effect-switch-control{
border-color:var(--icon-border-hover);
background:var(--card-glow)
}
.effect-switch input:checked+.effect-switch-control::after{
transform:translateX(18px);
background:var(--icon-color-hover)
}
.tgl-sun,.tgl-moon{width:18px;height:18px}
.tgl-sun{display:block}
.tgl-moon{display:none}
[data-theme="light"] .tgl-sun{display:none}
[data-theme="light"] .tgl-moon{display:block}

.container{
width:100%;max-width:1100px;
position:relative;z-index:1
}

.subtitle{
text-align:center;
font-size:1.05rem;
font-weight:300;
letter-spacing:0.5em;
color:var(--text-subtle);
margin-bottom:56px
}

section{margin-bottom:44px}

.section-title{
display:flex;
align-items:center;
gap:10px;
font-size:0.8rem;
font-weight:500;
letter-spacing:0.12em;
color:var(--text-muted);
text-transform:uppercase;
margin-bottom:16px;
padding-left:4px
}
.section-title::after{
content:'';
flex:1;
height:1px;
background:var(--divider)
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:12px
}

.card{
display:flex;
flex-direction:row;
align-items:center;
gap:16px;
padding:16px 20px;
border-radius:16px;
background:var(--card-bg);
border:1px solid var(--card-border);
-webkit-backdrop-filter:blur(24px);
backdrop-filter:blur(24px);
box-shadow:var(--card-shadow);
text-decoration:none;
color:inherit;
position:relative;
overflow:hidden;
transition:background 0.5s ease,
border-color 0.5s ease,
box-shadow 0.5s ease,
color 0.5s ease
}
.card::before{
content:'';
position:absolute;
top:0;left:0;right:0;height:1px;
background:var(--card-shine);
opacity:0
}
.card::after{
content:'';
position:absolute;
top:0;left:0;right:0;bottom:0;
border-radius:16px;
opacity:0;
background:var(--card-glow)
}
.card:hover{
border-color:var(--card-border-hover);
box-shadow:var(--card-shadow-hover)
}
.card:hover::before{opacity:1}
.card:hover::after{opacity:1}

.card-body{
flex:1;
display:flex;
flex-direction:column;
min-width:0;
position:relative;z-index:1
}
.card .name{
font-size:1.05rem;
font-weight:500;
margin-bottom:2px;
position:relative;z-index:1
}
.card .desc{
font-size:0.8rem;
color:var(--text-secondary);
position:relative;z-index:1
}
.card .hint{
font-size:0.72rem;
color:var(--text-tertiary);
margin-top:1px;
position:relative;z-index:1
}

.icon-wrap{
flex-shrink:0;
width:44px;height:44px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:var(--icon-bg);
border:1px solid var(--icon-border);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
position:relative;z-index:1;
transition:background 0.5s ease,border-color 0.5s ease
}
.icon-wrap::after{
content:'';
position:absolute;
inset:2px;
border-radius:50%;
background:var(--icon-shine);
pointer-events:none;
transition:background 0.5s ease
}
.card-icon{
width:24px;height:24px;
color:var(--icon-color);
transition:color 0.5s ease;
position:relative;z-index:1
}
.card:hover .icon-wrap{
border-color:var(--icon-border-hover);
background:var(--icon-bg-hover)
}
.card:hover .card-icon{
color:var(--icon-color-hover)
}

footer{
text-align:center;
margin-top:64px;
padding-top:20px;
border-top:1px solid var(--footer-border);
font-size:0.78rem;
color:var(--text-tertiary)
}

@media(max-width:600px){
body{padding:28px 16px}
.subtitle{font-size:0.9rem;letter-spacing:0.3em;margin-bottom:40px}
.grid{grid-template-columns:1fr}
.card{padding:14px 16px;gap:12px}
.icon-wrap{width:38px;height:38px}
.card-icon{width:20px;height:20px}
section{margin-bottom:32px}
.theme-toggle,.effects-toggle{top:16px;width:36px;height:36px}
.theme-toggle{right:16px}
.effects-toggle{right:60px}
.effects-panel{top:60px;right:16px}
.tgl-sun,.tgl-moon{width:16px;height:16px}
}
@media(min-width:601px)and (max-width:900px){
.grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
*{transition:none!important}
}