:root{
  --bg:#f5f6f8;--card:rgba(255,255,255,.78);--card-solid:#fff;--ink:#141a26;--sub:#7c8698;--line:rgba(20,30,50,.07);
  --acc:#2f6bff;--sh:0 1px 2px rgba(20,35,70,.06),0 8px 24px rgba(20,35,70,.08);--sh-hi:0 2px 6px rgba(20,35,70,.08),0 18px 40px rgba(20,35,70,.14);
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#0d1117;--card:rgba(28,33,44,.72);--card-solid:#1a1f2a;--ink:#eef1f7;--sub:#8a94a7;--line:rgba(255,255,255,.08);
  --acc:#5b8dff;--sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.3);--sh-hi:0 2px 6px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.45);color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;
  transition:background-color .4s var(--ease),color .4s var(--ease)}
body{overflow-x:hidden;overscroll-behavior-y:none}
body.locked{overflow:hidden}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
svg .fill{fill:currentColor;stroke:none}

/* 背景光斑 */
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:blob 18s var(--ease) infinite alternate}
.bg i:nth-child(1){width:60vmax;height:60vmax;left:-25vmax;top:-30vmax;background:radial-gradient(#cfe0ff,transparent 65%)}
.bg i:nth-child(2){width:50vmax;height:50vmax;right:-25vmax;top:10vh;background:radial-gradient(#e3dcff,transparent 65%);animation-delay:-6s}
.bg i:nth-child(3){width:45vmax;height:45vmax;left:10vw;bottom:-30vmax;background:radial-gradient(#d6f3ec,transparent 65%);animation-delay:-12s}
[data-theme=dark] .bg i{opacity:.18}
@keyframes blob{to{transform:translate3d(6vw,4vh,0) scale(1.12)}}

/* 首页 */
#home{position:relative;z-index:1;max-width:760px;margin:0 auto;
  padding:calc(26px + var(--st)) calc(20px + var(--sr)) calc(40px + var(--sb)) calc(20px + var(--sl));
  transform-origin:50% 30%;transition:transform .55s var(--ease),filter .55s var(--ease),opacity .55s var(--ease)}
body.tool-open #home{transform:scale(.94);filter:brightness(.92);opacity:.6}
.hd{display:flex;align-items:flex-end;justify-content:space-between;margin:8px 2px 22px}
.kicker{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sub)}
h1{margin:2px 0 0;font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
h2{margin:26px 4px 12px;font-size:13px;font-weight:600;color:var(--sub);letter-spacing:.06em}
.round{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:var(--sh);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);transition:transform .35s var(--spring)}
.round:active{transform:scale(.88)}
#themeBtn svg{position:absolute;width:20px;height:20px;transition:transform .5s var(--spring),opacity .3s}
#themeBtn svg{opacity:0;transform:rotate(-90deg) scale(.5)}
[data-pref=light] #themeBtn .sun,[data-pref=dark] #themeBtn .moon,[data-pref=auto] #themeBtn .auto{opacity:1;transform:none}

/* 命令栏 */
.cmd{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-radius:16px;background:var(--card);box-shadow:var(--sh);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.cmd:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 35%,transparent),var(--sh-hi);transform:translateY(-1px)}
.cmd svg{width:19px;height:19px;color:var(--sub);flex:none}
.cmd input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font-size:16px;-webkit-appearance:none;appearance:none}
.cmd input::-webkit-search-cancel-button{display:none}
.cmd input::placeholder{color:var(--sub);opacity:.75}
.cmd kbd{font:12px/1 ui-monospace,Menlo,monospace;color:var(--sub);border:1px solid var(--line);border-radius:6px;padding:4px 7px}
@media (hover:none){.cmd kbd{display:none}}

/* 网格 */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:740px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:24px;min-height:150px;background:var(--card);box-shadow:var(--sh);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(var(--ty,0)) scale(var(--s,1));
  transition:transform .45s var(--spring),box-shadow .35s var(--ease);animation:rise .7s var(--ease) backwards;animation-delay:calc(var(--i,0)*60ms + 80ms);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden;isolation:isolate}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c2) 14%,transparent),transparent 60%)}
@media (hover:hover){.card:hover{--ty:-3px;box-shadow:var(--sh-hi)}.card:hover::after{opacity:1}}
.card.press{--s:.95;transition:transform .18s var(--ease)}
.card .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c1),var(--c2));box-shadow:0 8px 18px color-mix(in srgb,var(--c2) 35%,transparent);transition:transform .5s var(--spring)}
.card .ic svg{width:28px;height:28px;stroke-width:1.7}
@media (hover:hover){.card:hover .ic{transform:scale(1.06) rotate(-4deg)}}
.card .nm{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:auto}
.card .ds{font-size:12.5px;color:var(--sub);margin-top:-10px}
.card .go{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--sub);
  background:var(--line);opacity:.0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--spring)}
.card .go svg{width:15px;height:15px}
@media (hover:hover){.card:hover .go{opacity:1;transform:none}}
.card.soon{background:transparent;box-shadow:none;border:1.5px dashed color-mix(in srgb,var(--sub) 35%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none;cursor:default}
.card.soon .ic{background:var(--line);color:var(--sub);box-shadow:none}
.card.soon .ic svg{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(.82);opacity:.6}}
.card.hide{display:none}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}}
.empty{text-align:center;color:var(--sub);padding:30px 0;animation:rise .4s var(--ease)}

.chips{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:8px;flex:none;height:40px;padding:0 14px 0 6px;border-radius:20px;background:var(--card);box-shadow:var(--sh);
  font-size:14px;font-weight:600;transition:transform .3s var(--spring);animation:rise .5s var(--ease) backwards}
.chip:active{transform:scale(.93)}
.chip .ic{width:28px;height:28px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--c1),var(--c2))}
.chip .ic svg{width:16px;height:16px}

/* 工具面板 */
#stage{position:fixed;inset:0;z-index:10;pointer-events:none}
.panel{position:absolute;inset:0;background:var(--bg);visibility:hidden;pointer-events:none;will-change:clip-path,transform;
  clip-path:inset(0 round 0);-webkit-clip-path:inset(0 round 0)}
.panel.show{visibility:visible;pointer-events:auto}
.panel.anim{transition:clip-path .58s var(--ease),-webkit-clip-path .58s var(--ease),transform .45s var(--ease),opacity .45s var(--ease)}
.panel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--bg)}
.panel .splash{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:var(--bg);transition:opacity .5s var(--ease),visibility .5s}
.panel .splash .ic{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--c1),var(--c2));
  box-shadow:0 14px 34px color-mix(in srgb,var(--c2) 40%,transparent);animation:pulse 1.4s var(--ease) infinite alternate}
.panel .splash .ic svg{width:40px;height:40px;stroke-width:1.6}
.panel.ready .splash{opacity:0;visibility:hidden}
@keyframes pulse{to{transform:scale(1.07)}}
.panel .back{position:absolute;z-index:3;left:calc(12px + var(--sl));top:calc(12px + var(--st));width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:var(--card);box-shadow:var(--sh);color:var(--ink);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  transition:transform .35s var(--spring),opacity .3s;opacity:0;transform:scale(.6)}
.panel.ready .back,.panel.opened .back{opacity:1;transform:none}
.panel .back:active{transform:scale(.88)}
.panel .edge{position:absolute;z-index:4;left:0;top:0;bottom:0;width:18px;display:none;touch-action:none}
.standalone .panel .edge{display:block}

#toast{position:fixed;z-index:50;left:50%;bottom:calc(30px + var(--sb));transform:translate(-50%,12px);opacity:0;pointer-events:none;
  padding:9px 16px;border-radius:12px;font-size:14px;font-weight:500;color:#fff;background:rgba(20,26,38,.86);transition:opacity .3s,transform .45s var(--spring)}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}