*{margin:0;padding:0;box-sizing:border-box;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
a,a:hover,a:link,a:visited,a:active,a:focus{text-decoration:none;outline:none;border:none;color:inherit;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:root{
    --text-main:#4a3a52;--text-dim:#6b5a78;--text-soft:#9a8aa6;
    --panel-bg:rgba(255,255,255,.72);--panel-bg-2:rgba(255,255,255,.86);
    --panel-border:rgba(255,255,255,.9);--panel-shadow:0 8px 30px rgba(255,155,190,.15);
    --card-bg:rgba(255,255,255,.88);--card-hover-bg:rgba(255,255,255,.98);
    --pink:#ff9cb6;--pink-deep:#ff7aa3;--blue:#8fb8ff;--blue-deep:#5a8fff;
    --radius-lg:24px;--radius-md:16px;
    --bg-blur:8px;--bg-dim:.2;--bg-attach:fixed;
    --bg-image:linear-gradient(135deg,#ffe4ec 0%,#fff0f5 35%,#f0f6ff 70%,#e6f0ff 100%);
}
body.dark-mode{
    --text-main:#f5e8f0;--text-dim:#ddd0e0;--text-soft:#a89ab4;
    --panel-bg:rgba(15,12,18,.72);--panel-bg-2:rgba(22,18,26,.88);
    --panel-border:rgba(255,156,182,.12);--panel-shadow:0 8px 30px rgba(0,0,0,.6);
    --card-bg:rgba(18,15,22,.88);--card-hover-bg:rgba(26,22,32,.98);
}
@font-face{font-family:"b";src:url(../fonts/Ubuntu-Regular.ttf);font-display:swap}
@font-face{font-family:"title";src:url(../fonts/Pacifico-Regular.ttf);font-display:swap}
.bg-layer{position:fixed;top:-40px;left:-40px;right:-40px;bottom:-40px;z-index:-3;
    background-image:var(--bg-image);background-size:cover;background-position:center;
    background-repeat:no-repeat;background-attachment:var(--bg-attach,fixed);
    filter:blur(var(--bg-blur,8px));transition:filter .3s ease;pointer-events:none}
body.dark-mode .bg-layer{background-color:#000}
.bg-mask{position:fixed;inset:0;z-index:-2;background:rgba(255,255,255,var(--bg-dim,.2));pointer-events:none;transition:background-color .3s ease}
body.dark-mode .bg-mask{background:rgba(0,0,0,var(--bg-dim,.2))}
.sakura-field{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
    width:100vw!important;height:100vh!important;z-index:2147483647!important;
    pointer-events:none!important;overflow:hidden!important;isolation:isolate}
.sakura-petal{position:absolute;top:-30px;background:radial-gradient(circle at 30% 30%,#fff 0%,#ffd9e5 35%,#ff9cb6 100%);
    border-radius:100% 0 100% 0;box-shadow:0 0 10px rgba(255,156,182,.45);
    animation-name:sakuraFall;animation-timing-function:linear;animation-iteration-count:infinite;
    will-change:transform;transform:translate3d(0,-30px,0);pointer-events:none}
.sakura-petal:nth-child(3n){background:radial-gradient(circle at 30% 30%,#fff 0%,#ffe0ec 35%,#ffb6cb 100%)}
.sakura-petal:nth-child(5n){background:radial-gradient(circle at 30% 30%,#fff 0%,#e8f0ff 35%,#b8cfff 100%);box-shadow:0 0 10px rgba(143,184,255,.45)}
@keyframes sakuraFall{0%{transform:translate3d(0,-30px,0) rotate(0deg);opacity:0}5%{opacity:.95}95%{opacity:.95}100%{transform:translate3d(var(--drift,60px),calc(100vh + 60px),0) rotate(var(--rot,720deg));opacity:0}}
html,body{width:100%;min-height:100vh;margin:0;padding:0;background:transparent;color:var(--text-main);
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.65;
    overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.dark-mode{background:#000}
.main{max-width:1160px;margin:0 auto;padding:24px 24px 60px;position:relative;z-index:1}
.hero{margin-bottom:34px}
.pride-flag-strip{width:100%;height:12px;border-radius:10px;margin-bottom:24px;
    background:linear-gradient(90deg,#5BCEFA 0%,#5BCEFA 20%,#F5A9B8 20%,#F5A9B8 40%,#FFFFFF 40%,#FFFFFF 60%,#F5A9B8 60%,#F5A9B8 80%,#5BCEFA 80%,#5BCEFA 100%);
    box-shadow:0 4px 20px rgba(245,169,184,.4),0 0 0 1px rgba(255,255,255,.5);position:relative;overflow:hidden}
.pride-flag-strip::after{content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
    background-size:200% 100%;animation:flagShine 4s linear infinite;pointer-events:none;opacity:.6}
@keyframes flagShine{0%{background-position:-100% 0}100%{background-position:200% 0}}
.hero-card{background:var(--panel-bg);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
    border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:38px 32px 30px;box-shadow:var(--panel-shadow);
    text-align:center;animation:heroIn .5s ease both;position:relative;overflow:hidden}
.hero-card::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;
    background:radial-gradient(circle,rgba(255,156,182,.28),transparent 70%);border-radius:50%;pointer-events:none}
.hero-card::after{content:'';position:absolute;bottom:-60px;left:-60px;width:180px;height:180px;
    background:radial-gradient(circle,rgba(143,184,255,.28),transparent 70%);border-radius:50%;pointer-events:none}
body.dark-mode .hero-card::before{background:radial-gradient(circle,rgba(255,156,182,.12),transparent 70%)}
body.dark-mode .hero-card::after{background:radial-gradient(circle,rgba(143,184,255,.12),transparent 70%)}
@keyframes heroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.avatar-wrap{display:flex;justify-content:center;margin-bottom:18px;position:relative;z-index:1}
.index-logo{width:112px;height:112px;border-radius:50%;background-size:cover;background-position:center;
    border:4px solid #fff;box-shadow:0 10px 30px rgba(255,156,182,.3),0 0 0 8px rgba(255,156,182,.12);
    transition:transform .3s ease,box-shadow .3s ease}
body.dark-mode .index-logo{border-color:rgba(255,255,255,.15)}
.index-logo:hover{transform:scale(1.05) rotate(-3deg);box-shadow:0 14px 40px rgba(255,156,182,.45),0 0 0 10px rgba(255,156,182,.18)}
.welcome{font-size:24px;font-weight:800;line-height:1.5;margin:0 0 6px;color:var(--text-main);position:relative;z-index:1}
.welcome-name{background:linear-gradient(135deg,#ff9cb6,#ff7aa3 40%,#8fb8ff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.trans-badge{display:inline-flex;align-items:center;
    background:linear-gradient(135deg,rgba(255,156,182,.18),rgba(143,184,255,.18));
    color:#c94f7d;padding:3px 12px;border-radius:999px;font-size:.72rem;font-weight:700;
    margin-left:8px;vertical-align:middle;border:1px solid rgba(255,156,182,.3)}
body.dark-mode .trans-badge{color:#ff9cb6;background:rgba(255,156,182,.12);border-color:rgba(255,156,182,.25)}
.sub-welcome{font-size:15px;color:var(--text-dim);margin:6px 0 14px;position:relative;z-index:1}
.gradientText{background:linear-gradient(120deg,#5BCEFA 0%,#8fb8ff 18%,#F5A9B8 45%,#FFFFFF 60%,#F5A9B8 75%,#5BCEFA 100%);
    background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;
    animation:shine 6s linear infinite}
@keyframes shine{0%{background-position:0% center}100%{background-position:220% center}}
.intro{font-size:14.5px;line-height:1.8;margin:14px auto 4px;max-width:640px;color:var(--text-main);position:relative;z-index:1}
.intro-icon{margin-right:6px}
.intro-text{color:var(--text-main);font-weight:600}
.typing-line{font-size:14.5px;color:var(--text-dim);margin:4px auto;max-width:640px;min-height:1.6em;position:relative;z-index:1}
.typing-cursor{display:inline-block;width:2px;height:1em;background:var(--pink);vertical-align:middle;margin-left:3px;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.daily-quote-line{margin:18px 0 6px;text-align:center;padding:0 8px;position:relative;z-index:1}
.textBackground{display:inline-block;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,240,245,.9));
    border-radius:999px;font-size:13.5px;padding:7px 18px;border:1px solid rgba(255,156,182,.25);
    max-width:100%;color:var(--text-main);font-weight:700;box-shadow:0 4px 14px rgba(255,156,182,.12)}
body.dark-mode .textBackground{background:linear-gradient(135deg,rgba(30,22,35,.9),rgba(25,18,30,.9));border-color:rgba(255,156,182,.2);color:#f0e6f5}
#dailyQuote{background:transparent!important;border:none!important;box-shadow:none!important;max-width:100%;word-break:break-word}
#dailyQuote.loaded{background:linear-gradient(90deg,#FF4500,#FF8C00,#FFD700,#FF69B4,#9370DB,#FF4500)!important;
    background-size:300% auto!important;-webkit-background-clip:text!important;background-clip:text!important;
    color:transparent!important;animation:rainbowFlow 12s ease-in-out infinite alternate}
@keyframes rainbowFlow{0%{background-position:0% center}100%{background-position:200% center}}
.iconContainer{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:26px;position:relative;z-index:1}
.iconItem,.switch{height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.9);border:1px solid rgba(255,156,182,.25);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .22s ease;flex-shrink:0;
    cursor:pointer;color:#c94f7d;box-shadow:0 4px 12px rgba(255,156,182,.12)}
body.dark-mode .iconItem,body.dark-mode .switch{background:rgba(25,20,30,.85);border-color:rgba(255,156,182,.2);color:#ff9cb6}
.iconItem{padding:0 14px;gap:0}
.iconItem svg{width:20px;height:20px;fill:currentColor;flex-shrink:0;transition:transform .3s ease}
.iconItem .iconTip{font-size:13px;font-weight:700;white-space:nowrap;max-width:0;opacity:0;overflow:hidden;margin-left:0;
    transition:max-width .25s ease,opacity .25s ease,margin-left .25s ease;color:#c94f7d}
body.dark-mode .iconItem .iconTip{color:#ff9cb6}
.iconItem:hover{background:linear-gradient(135deg,rgba(255,156,182,.25),rgba(143,184,255,.25));
    border-color:rgba(255,156,182,.55);transform:translateY(-3px) scale(1.03);box-shadow:0 8px 22px rgba(255,156,182,.3)}
.iconItem:hover svg{transform:scale(1.15) rotate(-8deg)}
.iconItem:hover .iconTip{max-width:80px;opacity:1;margin-left:8px}
.switch{padding:0 12px}
.switch:hover{background:linear-gradient(135deg,rgba(255,156,182,.25),rgba(143,184,255,.25));border-color:rgba(255,156,182,.55)}
.onoffswitch{position:relative;width:40px;height:22px}
.onoffswitch-checkbox{display:none}
.onoffswitch-label{display:block;overflow:hidden;cursor:pointer;height:100%;border-radius:999px;
    background:linear-gradient(135deg,#ffc9d9,#b8d0ff);transition:background .2s ease;position:relative}
body.dark-mode .onoffswitch-label{background:linear-gradient(135deg,#3a1f2a,#1a2540)}
.onoffswitch-switch{display:block;height:70%;aspect-ratio:1/1;background:#FFF;position:absolute;top:15%;right:6%;border-radius:50%;
    transition:right .2s ease-in 0s;box-shadow:0 2px 6px rgba(255,156,182,.4)}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch{right:6%}
.onoffswitch-checkbox:not(:checked) + .onoffswitch-label .onoffswitch-switch{right:56%}
.look-line{font-size:15px;font-weight:600;color:var(--text-main);margin:14px auto 4px;text-align:center;max-width:640px;position:relative;z-index:1}
body.dark-mode .look-line{color:var(--text-main)}
.content{display:block}
.section{margin-bottom:36px}
.section:last-of-type{margin-bottom:0}
.title{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;margin:0 0 16px;color:var(--text-main);padding-left:2px;position:relative}
.title::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,rgba(255,156,182,.5),rgba(143,184,255,.5),transparent);
    border-radius:2px;margin-left:8px}
.title svg{width:22px;height:22px;fill:currentColor;color:#ff7aa3;flex-shrink:0}
body.dark-mode .title svg{color:#ff9cb6}
.projectList{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.projectItem{display:flex;align-items:center;gap:14px;background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,156,182,.18);border-radius:var(--radius-md);padding:16px;min-height:96px;
    box-shadow:0 4px 14px rgba(255,156,182,.1);transition:all .25s ease;position:relative;overflow:hidden}
body.dark-mode .projectItem{border-color:rgba(255,156,182,.12)}
.projectItem::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,156,182,.12),rgba(143,184,255,.12));
    opacity:0;transition:opacity .25s ease;pointer-events:none}
.projectItem:hover{transform:translateY(-4px) scale(1.02);background:var(--card-hover-bg);border-color:rgba(255,156,182,.55);
    box-shadow:0 14px 30px rgba(255,156,182,.25)}
.projectItem:hover::before{opacity:1}
.projectItem.pressed{transform:scale(.97)}
.projectItemLeft{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.projectItemLeft h1{font-size:15px;font-weight:700;line-height:1.35;margin:0 0 6px;color:var(--text-main);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.projectItemLeft p{font-size:12.5px;color:var(--text-dim);line-height:1.5;margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.projectItemRight{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(255,156,182,.18),rgba(143,184,255,.18));border-radius:14px;
    position:relative;z-index:1;transition:transform .3s ease}
.projectItemRight img{width:26px;height:26px;object-fit:contain;transition:transform .35s ease}
.projectItem:hover .projectItemRight img{transform:rotate(-15deg) scale(1.15)}
#musicPlayerContainer{background:var(--panel-bg);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
    border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--panel-shadow)}
#musicPlayerContainer .music-player{background:transparent}
.player-controls{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.player-btn{padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.9);border:1.5px solid rgba(255,156,182,.35);
    color:#c94f7d;font-size:13.5px;font-weight:600;transition:all .22s ease;white-space:nowrap;box-shadow:0 3px 10px rgba(255,156,182,.1)}
body.dark-mode .player-btn{background:rgba(25,18,30,.9);border-color:rgba(255,156,182,.3);color:#ff9cb6}
.player-btn:hover{background:linear-gradient(135deg,rgba(255,156,182,.22),rgba(143,184,255,.22));
    border-color:rgba(255,156,182,.6);transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,156,182,.28)}
.player-btn.primary{background:linear-gradient(135deg,#ff9cb6 0%,#ff7aa3 50%,#8fb8ff 100%);color:#fff;border:none;padding:8px 22px;
    box-shadow:0 5px 18px rgba(255,156,182,.45)}
.player-btn.primary:hover{filter:brightness(1.05);box-shadow:0 8px 24px rgba(255,156,182,.55);transform:translateY(-2px)}
.progress-container{margin:14px 0}
.progress-time{display:flex;justify-content:space-between;color:var(--text-dim);font-size:12px;margin-bottom:6px;font-variant-numeric:tabular-nums}
.progress-bar{width:100%;height:6px;background:rgba(255,156,182,.18);border-radius:999px;position:relative;cursor:pointer}
body.dark-mode .progress-bar{background:rgba(255,156,182,.15)}
.progress{height:100%;background:linear-gradient(90deg,#ff9cb6,#8fb8ff);border-radius:999px;width:0%;transition:width .1s linear}
.progress-handle{width:14px;height:14px;background:#fff;border-radius:50%;position:absolute;top:50%;left:0;
    transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(255,156,182,.5);border:2px solid #ff9cb6;
    pointer-events:none;transition:transform .15s ease}
.progress-bar:hover .progress-handle{transform:translate(-50%,-50%) scale(1.2)}
.track-info{text-align:center;margin:16px 0;padding:14px 20px;border-radius:16px;
    background:linear-gradient(135deg,rgba(255,156,182,.12),rgba(143,184,255,.12));font-size:14px;font-weight:700;
    min-height:52px;display:flex;align-items:center;justify-content:center;word-break:break-all;line-height:1.5;
    color:var(--text-main);border:1px solid rgba(255,156,182,.18)}
body.dark-mode .track-info{background:linear-gradient(135deg,rgba(255,156,182,.08),rgba(143,184,255,.08));border-color:rgba(255,156,182,.15)}
.lyrics-container{margin:14px 0 10px;max-height:200px;overflow-y:auto;background:rgba(255,156,182,.07);
    border-radius:16px;padding:14px 18px;text-align:center;scroll-behavior:smooth}
body.dark-mode .lyrics-container{background:rgba(255,156,182,.06)}
.lyrics-container::-webkit-scrollbar{width:0;height:0}
.lyrics-container::-webkit-scrollbar-thumb{background:transparent}
.lyrics-line{display:block;padding:5px 0;font-size:13.5px;line-height:1.65;color:var(--text-dim);opacity:.75;transition:all .2s ease}
.lyrics-line.active{color:#c94f7d!important;font-weight:700;transform:scale(1.05);opacity:1}
body.dark-mode .lyrics-line.active{color:#ff9cb6!important}
.lyrics-placeholder{color:var(--text-dim);font-style:italic;padding:22px 0;text-align:center;font-size:13.5px}
.track-list-container{margin-top:14px}
.track-list-container h4{color:var(--text-main);font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;margin:0 0 8px}
.track-list-container h4 svg{fill:#ff7aa3;flex-shrink:0}
body.dark-mode .track-list-container h4 svg{fill:#ff9cb6}
#track-list{list-style:none;padding:8px;margin:0;max-height:420px;overflow-y:auto;background:rgba(255,156,182,.07);border-radius:14px}
body.dark-mode #track-list{background:rgba(255,156,182,.06)}
#track-list::-webkit-scrollbar{width:4px}
#track-list::-webkit-scrollbar-thumb{background:#ff9cb6;border-radius:4px}
#track-list li{padding:8px 12px;font-size:13.5px;color:var(--text-dim);border-radius:10px;cursor:pointer;
    margin-bottom:2px;transition:all .18s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#track-list li:hover{background:rgba(255,156,182,.18);color:var(--text-main)}
#track-list li.active{background:linear-gradient(135deg,rgba(255,156,182,.28),rgba(143,184,255,.28));
    color:#c94f7d;font-weight:700;border-left:3px solid #ff9cb6;padding-left:11px}
body.dark-mode #track-list li.active{color:#ff9cb6;background:linear-gradient(135deg,rgba(255,156,182,.18),rgba(143,184,255,.18))}
#musicPlayerContainer audio{display:none}
footer{max-width:1160px;margin:0 auto;padding:0 24px 40px;text-align:center;font-size:13.5px;
    color:var(--text-dim);line-height:2;position:relative;z-index:1;font-weight:500}
footer a{color:var(--text-main);opacity:1;font-weight:600;transition:color .2s ease}
footer a:hover{color:#ff7aa3}
body.dark-mode footer a:hover{color:#ff9cb6}
@media (max-width:520px){}
    border:1px solid var(--panel-border);border-radius:20px;padding:20px 18px 16px;
    box-shadow:0 12px 36px rgba(255,156,182,.35);position:relative;text-align:center}
    background:rgba(0,0,0,.06);color:var(--text-dim);font-size:16px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .2s}
body.dark-mode .visitor-popup-close{background:rgba(255,255,255,.08)}
@media (max-width:1150px){.projectList{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){
    .main{padding:16px 14px 40px}
    .hero{margin-bottom:22px}
    .pride-flag-strip{height:10px;border-radius:8px;margin-bottom:18px}
    .hero-card{padding:26px 18px 22px;border-radius:20px}
    .index-logo{width:88px;height:88px;border-width:3px;box-shadow:0 8px 22px rgba(255,156,182,.3),0 0 0 6px rgba(255,156,182,.12)}
    .welcome{font-size:18px}
    .sub-welcome{font-size:13.5px}
    .intro{font-size:13.5px;line-height:1.75}
    .typing-line{font-size:13.5px}
    .textBackground{font-size:12.5px;padding:6px 14px}
    .iconContainer{gap:8px;margin-top:20px}
    .iconItem,.switch{height:40px;border-radius:12px}
    .iconItem{padding:0 12px}
    .iconItem svg{width:18px;height:18px}
    .iconItem:hover .iconTip{max-width:70px}
    .trans-badge{font-size:.68rem;padding:2px 9px;margin-left:6px}
    .section{margin-bottom:26px}
    .title{font-size:17px;margin-bottom:12px}
    .title svg{width:19px;height:19px}
    .projectList{grid-template-columns:1fr;gap:10px}
    .projectItem{min-height:84px;padding:14px;border-radius:14px;gap:12px}
    .projectItemLeft h1{font-size:14.5px}
    .projectItemLeft p{font-size:12px}
    .projectItemRight{width:40px;height:40px;border-radius:12px}
    .projectItemRight img{width:22px;height:22px}
    .projectItem:hover{transform:none}
    .projectItem.pressed{transform:scale(.97)}
    #musicPlayerContainer{padding:16px;border-radius:20px}
    .player-controls{gap:8px}
    .player-btn{padding:7px 14px;font-size:12.5px}
    .player-btn.primary{padding:7px 18px}
    .track-info{font-size:13px;padding:12px 16px;min-height:46px;border-radius:14px}
    .lyrics-container{max-height:160px;padding:12px 14px;border-radius:14px}
    .lyrics-line{font-size:12.5px}
    #track-list{max-height:300px}
    #track-list li{font-size:12.5px;padding:7px 10px}
    footer{padding:0 14px 30px;font-size:12.5px}
}
@media (max-width:380px){
    .welcome{font-size:16.5px}
    .trans-badge{display:none}
    .iconItem{padding:0 10px}
    .iconItem svg{width:17px;height:17px}
    .player-controls{gap:6px}
    .player-btn{padding:6px 11px;font-size:12px}
}

/* ==== mobile-card-normal ==== */
@media (max-width:800px){
    .main{padding:14px 12px 30px!important}
    .section{margin-bottom:22px!important}
    .projectList{gap:12px!important;margin:0!important}
    .projectItem{
        min-height:120px!important;
        height:auto!important;
        padding:18px 16px!important;
        gap:12px!important;
        margin:0!important;
        align-items:center!important;
        border-radius:16px!important;
    }
    .projectItemLeft h1{
        font-size:16px!important;
        line-height:1.4!important;
        margin-bottom:8px!important;
        white-space:normal!important;
        overflow:visible!important;
        text-overflow:clip!important;
    }
    .projectItemLeft p{
        font-size:13px!important;
        line-height:1.6!important;
        -webkit-line-clamp:2!important;
    }
    .projectItemRight{
        width:48px!important;
        height:48px!important;
        border-radius:14px!important;
        flex-shrink:0!important;
    }
    .projectItemRight img{
        width:26px!important;
        height:26px!important;
    }
    .projectItem:hover{transform:none!important}
}
@media (max-width:480px){
    .main{padding:12px 10px 26px!important}
    .projectItem{min-height:128px!important;padding:18px 14px!important}
    .projectItemLeft h1{font-size:16px!important}
    .projectItemLeft p{font-size:13px!important}
}
/* 横屏手机 / 平板 */
@media (max-width:800px) and (orientation:landscape){
    .main{padding:14px 14px 30px!important}
    .projectList{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
    .projectItem{min-height:100px!important;padding:14px!important;gap:10px!important}
    .projectItemLeft h1{font-size:14.5px!important;line-height:1.35!important;margin-bottom:6px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
    .projectItemLeft p{font-size:12.5px!important;-webkit-line-clamp:2!important}
    .projectItemRight{width:44px!important;height:44px!important}
    .projectItemRight img{width:24px!important;height:24px!important}
}

/* ==== footer-tight ==== */
footer{padding-top:0!important;margin-top:0!important}


/* ==== switch-base-v1 ==== */
.switch{
    display:inline-flex;align-items:center;justify-content:center;
    height:44px;padding:0 12px;border-radius:14px;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(255,156,182,.25);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:all .22s ease;cursor:pointer;
    box-shadow:0 4px 12px rgba(255,156,182,.12);
    -webkit-tap-highlight-color:transparent;
}
body.dark-mode .switch{
    background:rgba(25,20,30,.85);
    border-color:rgba(255,156,182,.2);
}
.switch:hover{
    background:linear-gradient(135deg,rgba(255,156,182,.25),rgba(143,184,255,.25));
    border-color:rgba(255,156,182,.55);
}
.onoffswitch{position:relative;width:40px;height:22px}
.onoffswitch-checkbox{display:none}
.onoffswitch-label{
    display:block;overflow:hidden;cursor:pointer;
    height:100%;border-radius:999px;
    background:linear-gradient(135deg,#ffc9d9,#b8d0ff);
    transition:background .2s ease;position:relative;
}
body.dark-mode .onoffswitch-label{
    background:linear-gradient(135deg,#3a1f2a,#1a2540);
}
.onoffswitch-switch{
    display:block;height:70%;aspect-ratio:1/1;background:#FFF;
    position:absolute;top:15%;right:6%;border-radius:50%;
    transition:right .2s ease-in 0s;
    box-shadow:0 2px 6px rgba(255,156,182,.4);
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch{right:6%}
.onoffswitch-checkbox:not(:checked) + .onoffswitch-label .onoffswitch-switch{right:56%}
@media (max-width:800px){
    .switch{height:40px;padding:0 10px;border-radius:12px}
}

/* ==== ui-opacity-v2 ==== */
body:not(.dark-mode) .hero-card{
    background:rgb(255 255 255 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 255 255 / calc(var(--ui-opacity,.88) * .9))!important;
    box-shadow:0 8px 30px rgb(255 155 190 / calc(var(--ui-opacity,.88) * .18))!important;
    backdrop-filter:blur(calc(22px * var(--ui-opacity,.88))) saturate(calc(1 + var(--ui-opacity,.88) * .8))!important;
    -webkit-backdrop-filter:blur(calc(22px * var(--ui-opacity,.88))) saturate(calc(1 + var(--ui-opacity,.88) * .8))!important;
}
body.dark-mode .hero-card{
    background:rgb(15 12 18 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .2))!important;
    box-shadow:0 8px 30px rgb(0 0 0 / calc(var(--ui-opacity,.88) * .6))!important;
    backdrop-filter:blur(calc(22px * var(--ui-opacity,.88))) saturate(calc(1 + var(--ui-opacity,.88) * .8))!important;
    -webkit-backdrop-filter:blur(calc(22px * var(--ui-opacity,.88))) saturate(calc(1 + var(--ui-opacity,.88) * .8))!important;
}
.hero-card::before,.hero-card::after{
    opacity:calc(var(--ui-opacity,.88) * .9)!important;
}
body:not(.dark-mode) .projectItem{
    background:rgb(255 255 255 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .2))!important;
    box-shadow:0 4px 14px rgb(255 156 182 / calc(var(--ui-opacity,.88) * .12))!important;
    backdrop-filter:blur(calc(12px * var(--ui-opacity,.88)))!important;
    -webkit-backdrop-filter:blur(calc(12px * var(--ui-opacity,.88)))!important;
}
body:not(.dark-mode) .projectItem:hover{
    background:rgb(255 255 255 / min(1, calc(var(--ui-opacity,.88) + .1)))!important;
}
body.dark-mode .projectItem{
    background:rgb(18 15 22 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .15))!important;
    box-shadow:0 4px 14px rgb(0 0 0 / calc(var(--ui-opacity,.88) * .4))!important;
    backdrop-filter:blur(calc(12px * var(--ui-opacity,.88)))!important;
    -webkit-backdrop-filter:blur(calc(12px * var(--ui-opacity,.88)))!important;
}
body.dark-mode .projectItem:hover{
    background:rgb(26 22 32 / min(1, calc(var(--ui-opacity,.88) + .1)))!important;
}
.projectItem::before{
    opacity:calc(var(--ui-opacity,.88) * .5)!important;
}
body:not(.dark-mode) .projectItemRight{
    background:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .18))!important;
}
body.dark-mode .projectItemRight{
    background:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .2))!important;
}
body:not(.dark-mode) .iconItem,
body:not(.dark-mode) .switch{
    background:rgb(255 255 255 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .3))!important;
    box-shadow:0 4px 12px rgb(255 156 182 / calc(var(--ui-opacity,.88) * .12))!important;
    backdrop-filter:blur(calc(8px * var(--ui-opacity,.88)))!important;
    -webkit-backdrop-filter:blur(calc(8px * var(--ui-opacity,.88)))!important;
}
body.dark-mode .iconItem,
body.dark-mode .switch{
    background:rgb(25 20 30 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .2))!important;
    backdrop-filter:blur(calc(8px * var(--ui-opacity,.88)))!important;
    -webkit-backdrop-filter:blur(calc(8px * var(--ui-opacity,.88)))!important;
}
body:not(.dark-mode) #musicPlayerContainer{
    background:rgb(255 255 255 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 255 255 / calc(var(--ui-opacity,.88) * .9))!important;
    box-shadow:0 8px 30px rgb(255 155 190 / calc(var(--ui-opacity,.88) * .18))!important;
    backdrop-filter:blur(calc(22px * var(--ui-opacity,.88))) saturate(calc(1 + var(--ui-opacity,.88) * .8))!important;
    -webkit-backdrop-filter:blur(calc(22px * var(--ui-opacity,.88))) saturate(calc(1 + var(--ui-opacity,.88) * .8))!important;
}
body.dark-mode #musicPlayerContainer{
    background:rgb(15 12 18 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .2))!important;
    box-shadow:0 8px 30px rgb(0 0 0 / calc(var(--ui-opacity,.88) * .6))!important;
    backdrop-filter:blur(calc(22px * var(--ui-opacity,.88))) saturate(calc(1 + var(--ui-opacity,.88) * .8))!important;
    -webkit-backdrop-filter:blur(calc(22px * var(--ui-opacity,.88))) saturate(calc(1 + var(--ui-opacity,.88) * .8))!important;
}
body:not(.dark-mode) .player-btn{
    background:rgb(255 255 255 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .35))!important;
    box-shadow:0 3px 10px rgb(255 156 182 / calc(var(--ui-opacity,.88) * .12))!important;
}
body.dark-mode .player-btn{
    background:rgb(25 18 30 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .3))!important;
}
body:not(.dark-mode) .player-btn.primary,
body.dark-mode .player-btn.primary{
    opacity:calc(.7 + var(--ui-opacity,.88) * .3)!important;
}
body:not(.dark-mode) .textBackground{
    background:rgb(255 255 255 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .3))!important;
    box-shadow:0 4px 14px rgb(255 156 182 / calc(var(--ui-opacity,.88) * .12))!important;
}
body.dark-mode .textBackground{
    background:rgb(30 22 35 / var(--ui-opacity,.88))!important;
    border-color:rgb(255 156 182 / calc(var(--ui-opacity,.88) * .2))!important;
}
.trans-badge{
    opacity:calc(.4 + var(--ui-opacity,.88) * .6)!important;
}


/* ==== adv-fold ==== */
.adv-fold{
    margin:16px 0 0;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    padding:0 16px 16px;
}
.adv-fold > summary{
    list-style:none;
    cursor:pointer;
    padding:14px 0;
    font-size:13.5px;
    font-weight:600;
    color:var(--dim);
    user-select:none;
    display:flex;align-items:center;gap:8px;
}
.adv-fold > summary::-webkit-details-marker{display:none}
.adv-fold > summary::before{
    content:'▸';
    transition:transform .2s ease;
    font-size:11px;
    color:var(--accent);
}
.adv-fold[open] > summary::before{transform:rotate(90deg)}
.adv-fold[open] > summary{
    border-bottom:1px solid var(--border);
    margin-bottom:14px;
}

/* ==== sections-manager ==== */
.sec-row .row-head{flex-wrap:wrap}
.sec-meta{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);
    font-size:12.5px;color:var(--dim);
}
.sec-meta .sec-label{font-weight:600;color:var(--dim)}
.sec-meta select.f{
    flex:1;min-width:140px;padding:7px 10px;
    background:var(--panel2);border:none;border-radius:8px;
    color:var(--text);outline:none;font-size:12.5px;
}
.sec-meta .sec-vis{
    display:inline-flex;align-items:center;gap:6px;
    font-weight:600;color:var(--text);cursor:pointer;
    user-select:none;
}
.sec-meta .sec-vis input[type=checkbox]{
    width:16px;height:16px;accent-color:var(--accent);
}

/* ==== sections-manager ==== */
.sec-row .row-head{flex-wrap:wrap}
.sec-meta{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);
    font-size:12.5px;color:var(--dim);
}
.sec-meta .sec-label{font-weight:600;color:var(--dim)}
.sec-meta select.f{
    flex:1;min-width:140px;padding:7px 10px;
    background:var(--panel2);border:none;border-radius:8px;
    color:var(--text);outline:none;font-size:12.5px;
}
.sec-meta .sec-vis{
    display:inline-flex;align-items:center;gap:6px;
    font-weight:600;color:var(--text);cursor:pointer;
    user-select:none;
}
.sec-meta .sec-vis input[type=checkbox]{
    width:16px;height:16px;accent-color:var(--accent);
}
.sec-tip{
    margin-top:20px;padding:12px 16px;
    background:var(--panel2);border-radius:10px;
    font-size:12.5px;color:var(--dim);line-height:1.7;
}


/* ==== sec-mobile-v2 ==== */
@media (max-width:820px){
    .toolbar{gap:8px;margin-bottom:14px}
    .toolbar .btn{
        flex:1 1 auto;padding:11px 16px;font-size:13.5px;min-height:44px;justify-content:center
    }
    .toolbar .hint{flex-basis:100%;text-align:center;font-size:12px;margin-top:2px}
    .sec-row{padding:14px}
    .sec-row .row-head{
        flex-wrap:wrap;gap:8px;margin-bottom:10px
    }
    .sec-row .row-head .idx{width:26px;height:26px;font-size:12px}
    .sec-row .row-head > input.f{
        flex:1 1 calc(100% - 34px);order:1;font-size:14px;padding:10px 12px
    }
    .sec-row .btns{
        order:2;flex-basis:100%;justify-content:flex-end;gap:8px;margin-top:4px
    }
    .sec-row .btns button{
        width:44px!important;height:44px!important;font-size:16px!important;border-radius:10px!important
    }
    .sec-meta{
        flex-direction:column;align-items:stretch;gap:10px;padding-top:12px
    }
    .sec-meta .sec-label{font-size:12.5px;margin-bottom:-4px}
    .sec-meta select.f{
        width:100%;padding:11px 12px!important;font-size:13.5px!important;min-height:44px
    }
    .sec-meta .sec-vis{
        justify-content:center;padding:12px;
        background:var(--panel2);border-radius:10px;
        font-size:14px;min-height:44px
    }
    .sec-meta .sec-vis input[type=checkbox]{
        width:20px;height:20px
    }
    .sec-tip{font-size:12.5px;padding:12px 14px;margin-top:16px}
}

/* ==== mobile-admin-v3 ==== */
@media (max-width:820px){
    /* 汉堡菜单加大可点区域 */
    .menu-toggle{
        width:44px!important;
        height:44px!important;
        font-size:22px!important;
        min-width:44px!important;
        flex-shrink:0!important;
    }
    /* 侧边栏上的每个菜单项，高度保证 ≥44px 且不易点错 */
    .sidebar nav a{
        padding:13px 14px!important;
        font-size:14.5px!important;
        min-height:48px!important;
        margin-bottom:3px!important;
    }
    /* 侧边栏底部按钮也加大 */
    .sidebar-footer a{
        padding:13px 12px!important;
        font-size:14px!important;
        min-height:44px!important;
    }
    /* 工具栏按钮（+添加章节 / +新建数据源 / 清空回收站）加大 */
    .toolbar .btn{
        flex:1 1 auto!important;
        padding:11px 16px!important;
        font-size:13.5px!important;
        min-height:44px!important;
        justify-content:center!important;
    }
    /* 回收站里的恢复 / 彻底删除按钮加大 */
    .row .btns .btn{
        min-height:40px!important;
        padding:8px 14px!important;
        font-size:13px!important;
    }
}

/* ==== section-row-mobile-v3 ==== */
@media (max-width:820px){
    /* 章节行：手机端按钮加大 */
    .sec-row .btns button{
        width:44px!important;
        height:44px!important;
        font-size:16px!important;
        border-radius:10px!important;
        min-width:44px!important;
    }
    .sec-row .row-head > input.f{
        font-size:14px!important;
        padding:10px 12px!important;
        min-height:44px!important;
    }
    .sec-meta select.f{
        width:100%!important;
        padding:11px 12px!important;
        font-size:13.5px!important;
        min-height:44px!important;
    }
    .sec-meta .sec-vis{
        justify-content:center!important;
        padding:12px!important;
        background:var(--panel2)!important;
        border-radius:10px!important;
        min-height:44px!important;
        width:100%!important;
    }
    .sec-meta .sec-vis input[type=checkbox]{
        width:20px!important;
        height:20px!important;
    }
    /* 回收站行：操作按钮变大 */
    .row[data-trash] .row-head{
        flex-wrap:wrap!important;
        gap:10px!important;
    }
    .row[data-trash] .btns{
        flex-basis:100%!important;
        justify-content:flex-end!important;
    }
    .row[data-trash] .btns .btn{
        padding:10px 16px!important;
        font-size:13px!important;
        min-height:44px!important;
    }
}

/* ==== sections-v2 ==== */
.sec-field{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1 1 260px;
    min-width:0;
}
.sec-field .sec-label{
    flex-shrink:0;
    font-weight:600;
    color:var(--dim);
    font-size:12.5px;
    white-space:nowrap;
}
.sec-field .f{
    flex:1;
    min-width:0;
}
.sec-field .sec-suffix{
    flex-shrink:0;
    font-size:12px;
    color:var(--dim);
}

/* 回收站：布局改两行 */
.trash-row{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    padding:14px 16px;
}
.trash-info{
    flex:1 1 220px;
    min-width:0;
}
.trash-name{
    font-weight:700;
    font-size:14px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text);
}
.trash-meta{
    font-size:11.5px;
    color:var(--dim);
    margin-top:3px;
}
.trash-actions{
    display:flex;
    gap:8px;
    flex-shrink:0;
}
.trash-actions .btn{
    white-space:nowrap;
    min-width:80px;
    justify-content:center;
}

@media (max-width:820px){
    .sec-field{
        flex-basis:100%;
    }
    .sec-field .f{
        padding:10px 12px!important;
        min-height:44px!important;
        font-size:13.5px!important;
    }
    .trash-row{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }
    .trash-actions{
        width:100%;
    }
    .trash-actions .btn{
        flex:1;
        min-height:44px;
    }
}


/* ==== touch-no-hover-v3 ==== */
@media (hover: none), (pointer: coarse){
    .player-btn:hover,
    .player-btn.primary:hover{
        transform:none!important;
        box-shadow:none!important;
        filter:none!important;
    }
    .player-btn:active,
    .player-btn.primary:active{
        transform:scale(.96)!important;
        transition:transform .08s ease!important;
    }
    .iconItem:hover,
    .switch:hover{
        transform:none!important;
        box-shadow:none!important;
    }
    .iconItem:active,
    .switch:active{
        transform:scale(.96)!important;
        transition:transform .08s ease!important;
    }
    .projectItem:hover{transform:none!important;}
    .projectItem:active,
    .projectItem.pressed{transform:scale(.97)!important;}
}

/* ==== player-btn-primary-fix ==== */
/* 让主按钮（播放/暂停）保持粉蓝渐变，不被 .player-btn 的白色 !important 覆盖 */
body:not(.dark-mode) .player-btn.primary,
body.dark-mode .player-btn.primary{
    background:linear-gradient(135deg,#ff9cb6 0%,#ff7aa3 50%,#8fb8ff 100%)!important;
    color:#fff!important;
    border:none!important;
    box-shadow:0 5px 18px rgba(255,156,182,.45)!important;
}
body:not(.dark-mode) .player-btn.primary:hover,
body.dark-mode .player-btn.primary:hover{
    filter:brightness(1.05);
    box-shadow:0 8px 24px rgba(255,156,182,.55)!important;
}