/* HX BOX 0.1 beta — 样式表 */
*{margin:0;padding:0;box-sizing:border-box;
font-family:"Inter","SF Pro Display",system-ui,-apple-system,"Segoe UI","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif}
:root{--spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,1,.36,1)}
@keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
@keyframes slide{0%{transform:translateX(40px) scale(.9);opacity:0}100%{transform:translateX(0) scale(1);opacity:1}}
@keyframes up{0%{transform:translateY(16px) scale(.96);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes down{0%{transform:translateY(-16px) scale(.96);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes left{0%{transform:translateX(-40px) scale(.9);opacity:0}100%{transform:translateX(0) scale(1);opacity:1}}
@keyframes tilt{0%{transform:scale(.72) rotate(-7deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

body{height:100vh;overflow:hidden;user-select:none;line-height:1.45;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
background:linear-gradient(160deg,#eaf3ff 0%,#cfe2ff 45%,#ffffff 100%)}
body::before{content:"";position:fixed;inset:0;
background:radial-gradient(circle at 20% 15%,#ffffffcc,transparent 50%),radial-gradient(circle at 85% 80%,#8fbcff44,transparent 50%)}

/* ===== 布局 ===== */
#stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
#ui{--s:1;display:flex;flex-direction:column;align-items:center;gap:16px;
transition:opacity .4s var(--ease),transform .6s var(--spring),filter .4s var(--ease)}
#ui.hide{opacity:0;transform:scale(.9) translateY(18px) rotate(-1.5deg);filter:blur(6px);pointer-events:none}

/* ===== 顶部：主页 / 设置 ===== */
#seg{display:flex;gap:4px;padding:4px;align-self:flex-start;border-radius:14px;background:rgba(255,255,255,.45);
backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
box-shadow:0 8px 24px rgba(30,80,180,.15);animation:pop .6s var(--spring) both}
#seg div{padding:calc(7px*var(--s)) calc(24px*var(--s));border-radius:10px;font-size:calc(13px*var(--s));
color:#3a5a85;cursor:pointer;
transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--spring),box-shadow .35s var(--ease)}
#seg div:active{transform:scale(.92)}
#seg div.on{background:linear-gradient(135deg,#4d90ff,#7ab8ff);color:#fff;box-shadow:0 4px 12px #4d90ff55;transform:scale(1.05)}

/* ===== 主窗口（可自定义调整大小）===== */
#win{width:560px;height:430px;min-width:420px;min-height:320px;max-width:92vw;max-height:88vh;
resize:both;overflow:hidden;border-radius:22px;
background:rgba(255,255,255,.55);backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
box-shadow:0 20px 60px rgba(30,80,180,.22),inset 0 1px 0 #ffffffcc;
display:flex;flex-direction:column;color:#0d2a52;
animation:up .6s var(--spring) both}
#bar{display:flex;align-items:center;gap:8px;padding:calc(12px*var(--s)) calc(14px*var(--s))}
.dot{width:calc(12px*var(--s));height:calc(12px*var(--s));border-radius:50%}
.r{background:#ff5f57}.y{background:#febc2e}.g{background:#28c840}
#bar b{margin-left:8px;font-size:calc(14px*var(--s));letter-spacing:.5px;text-shadow:0 1px 2px #0004}
#bar em{margin-left:auto;font-style:normal;font-size:calc(11px*var(--s));opacity:.6}
#body{flex:1;display:flex;min-height:0}

/* ===== 分类 ===== */
#tabs{width:calc(130px*var(--s));padding:calc(10px*var(--s));overflow:auto}
.tab{padding:calc(9px*var(--s)) calc(12px*var(--s));border-radius:calc(11px*var(--s));font-size:calc(13px*var(--s));
color:#3a5a85;cursor:pointer;margin-bottom:4px;
transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--spring),box-shadow .3s var(--ease)}
.tab:hover{background:rgba(120,170,255,.22);transform:translateX(4px)}
.tab:active{transform:scale(.93)}
.tab.on{background:linear-gradient(135deg,#4d90ff,#7ab8ff);color:#fff;font-weight:600;
box-shadow:0 4px 12px #4d90ff55;transform:translateX(4px) scale(1.04)}

/* ===== 功能列表 ===== */
#panel{flex:1;padding:calc(10px*var(--s)) calc(14px*var(--s));overflow:auto}
#title{font-size:calc(17px*var(--s));font-weight:600;letter-spacing:.3px;margin:2px 0 10px;color:#0d2a52;animation:slide .45s var(--spring) both}
ul{list-style:none}
li{display:flex;justify-content:space-between;align-items:center;
padding:calc(12px*var(--s)) calc(16px*var(--s));margin-bottom:calc(7px*var(--s));border-radius:calc(14px*var(--s));
background:rgba(255,255,255,.55);font-size:calc(15px*var(--s));font-weight:500;
animation:slide .5s var(--spring) backwards;
transition:background .25s var(--ease),transform .35s var(--spring),box-shadow .25s var(--ease)}
li:hover{background:#fff;transform:translateX(6px) scale(1.02);box-shadow:0 6px 18px #4d90ff2e}
li:active{transform:scale(.98)}

/* ===== 开关按钮（随窗口自动缩放）===== */
.sw{width:calc(42px*var(--s));height:calc(24px*var(--s));border-radius:calc(12px*var(--s));
background:rgba(120,150,190,.35);position:relative;cursor:pointer;
transition:background .35s var(--ease),transform .35s var(--spring);
box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
.sw:active{transform:scale(.9)}
.sw::after{content:"";position:absolute;top:calc(2px*var(--s));left:calc(2px*var(--s));
width:calc(20px*var(--s));height:calc(20px*var(--s));border-radius:50%;background:#fff;
box-shadow:0 1px 4px rgba(0,0,0,.3);transition:left .4s var(--spring),width .2s var(--ease)}
.sw.on{background:linear-gradient(135deg,#4d90ff,#30d158)}
.sw.on::after{left:calc(20px*var(--s))}
.sw.on:active::after{width:calc(24px*var(--s))}

::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:rgba(120,160,220,.5);border-radius:3px}

/* ===== 设置页 ===== */
#set{flex:1;padding:calc(14px*var(--s)) calc(18px*var(--s));overflow:auto;display:none}
#set.on{display:block;animation:up .5s var(--spring) both}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:calc(10px*var(--s)) calc(14px*var(--s));margin-bottom:8px;border-radius:calc(12px*var(--s));
background:rgba(255,255,255,.6);font-size:calc(13px*var(--s));
animation:up .45s var(--spring) both}
.row small{display:block;font-size:calc(11px*var(--s));color:#7d92b3;margin-top:2px}
.row .sw{flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:calc(120px*var(--s));height:calc(5px*var(--s));
border-radius:3px;background:rgba(120,150,190,.4);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
width:calc(18px*var(--s));height:calc(18px*var(--s));border-radius:50%;background:#fff;
box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;transition:transform .3s var(--spring)}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.25)}
.val{font-size:calc(11px*var(--s));color:#4d90ff;width:40px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* ===== 右上角已启用 HUD ===== */
#float{position:fixed;top:18px;right:18px;width:178px;padding:10px;border-radius:18px;
background:rgba(255,255,255,.42);backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
box-shadow:0 12px 32px rgba(30,80,180,.15);animation:pop .55s var(--spring) both}
.hud-head{display:flex;align-items:center;gap:8px;padding:2px 4px 6px;margin-bottom:4px}
.hud-head i{width:24px;height:24px;border-radius:8px;font-style:normal;
display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;letter-spacing:.5px;
background:linear-gradient(135deg,#4d90ff,#30d158);box-shadow:0 3px 8px #4d90ff55}
.hud-head span{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
color:#4d90ff;background:rgba(77,144,255,.15)}
#float>div:not(.hud-head){padding:7px 10px;margin-bottom:5px;border-radius:10px;font-size:12px;
font-weight:500;color:#0d2a52;background:rgba(255,255,255,.55);
animation:slide .5s var(--spring) backwards;
transition:transform .35s var(--spring),background .3s var(--ease)}
#float>div:not(.hud-head):hover{transform:translateX(-4px) scale(1.04);background:#fff}

/* ===== 悬浮提示 ===== */
#tip{position:fixed;left:0;top:0;z-index:99;pointer-events:none;opacity:0;
transform:translateY(6px) scale(.96);transition:opacity .22s var(--ease),transform .3s var(--spring);
padding:9px 13px;border-radius:12px;max-width:240px;
background:rgba(22,32,52,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 28px rgba(0,0,0,.32)}
#tip.on{opacity:1;transform:translateY(0) scale(1)}
#tip b{display:block;font-size:12.5px;font-weight:600;color:#fff;letter-spacing:.3px;margin-bottom:3px}
#tip small{display:block;font-size:11px;line-height:1.5;color:#a9bcd6}

/* ===== 悬浮球（彗星）===== */
#fab{position:fixed;right:26px;bottom:26px;width:54px;height:54px;border-radius:50%;z-index:50;
display:flex;align-items:center;justify-content:center;cursor:grab;
background:radial-gradient(circle at 32% 26%,#3b6bc4,#12233d 74%);
box-shadow:0 0 18px rgba(90,162,255,.7),0 0 42px rgba(59,125,255,.35),0 6px 16px rgba(20,60,140,.3);
transition:transform .45s var(--spring),box-shadow .3s var(--ease);
animation:pop .7s var(--spring) backwards}
#fab svg{filter:drop-shadow(0 0 5px rgba(160,210,255,.9));animation:core 3s ease-in-out infinite}
@keyframes core{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.08);opacity:1}}
/* 彗尾 */
#fab::before{content:"";position:absolute;right:50px;top:50%;width:112px;height:22px;border-radius:50%;
transform-origin:100% 50%;transform:translateY(-50%) rotate(-20deg);
background:linear-gradient(to left,rgba(190,225,255,.95),rgba(110,175,255,.5) 30%,rgba(80,150,255,.18) 64%,transparent);
filter:blur(6px);animation:tail 2.6s ease-in-out infinite}
/* 球面内圈 */
#fab::after{content:"";position:absolute;inset:0;border-radius:50%;
border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 -7px 14px rgba(20,60,140,.25)}
@keyframes tail{0%,100%{opacity:.8;transform:translateY(-50%) rotate(-20deg) scaleX(1)}
50%{opacity:1;transform:translateY(-50%) rotate(-20deg) scaleX(1.14)}}
#fab:hover{transform:scale(1.08);box-shadow:0 0 26px rgba(90,162,255,1),0 0 60px rgba(59,125,255,.6)}
#fab:active{cursor:grabbing;transform:scale(.94)}

/* ===== 深色主题 ===== */
body.dark{background:linear-gradient(160deg,#0b1322,#16233c,#080d16)}
body.dark::before{background:radial-gradient(circle at 20% 15%,#3a5a8544,transparent 50%),radial-gradient(circle at 85% 80%,#4d90ff33,transparent 50%)}
body.dark #win{background:rgba(18,28,48,.55);border-color:rgba(120,170,255,.22);color:#dbe6f5;
box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 #ffffff1a}
body.dark #float{background:rgba(18,28,48,.5)}
body.dark #float>div:not(.hud-head),body.dark li,body.dark .row{background:rgba(255,255,255,.08);color:#dbe6f5}
body.dark #float>div:not(.hud-head):hover,body.dark li:hover,body.dark .row:hover{background:rgba(255,255,255,.16)}
body.dark #title,body.dark #bar b,body.dark #seg div{color:#dbe6f5}
body.dark #bar em,body.dark .row small,body.dark #seg div{color:#8fa6c4}