:root{
  --pink:#ff6fa5; --pink-soft:#ffc2dc; --deep-pink:#f0447f;
  --mint:#4fd6c9; --sky:#6fc3ff; --purple:#a06ee8; --gold:#ffbe55;
  --text:#4a3b52; --muted:#91809c; --card:#ffffff;
  --border:rgba(240,68,127,.22);
  --grad-main:linear-gradient(120deg,#ff6fa5,#a06ee8 55%,#6fc3ff);
  --grad-candy:linear-gradient(135deg,#ff8fb8,#ffc2dc);
  --shadow-1:0 4px 14px rgba(240,68,127,.14);
  --shadow-2:0 14px 34px rgba(160,110,232,.22);
  --font-disp:"SakuraDisplay","字研室动漫二次圆","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","Segoe UI",system-ui,sans-serif;
  --font-sys:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"]{
  --text:#f3e9f7; --muted:#b6a6c6; --card:#322545;
  --border:rgba(255,140,190,.3);
  --pink-soft:rgba(255,194,220,.18);
  --shadow-1:0 4px 14px rgba(0,0,0,.35);
  --shadow-2:0 14px 34px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-sys);color:var(--text);font-size:16px;line-height:1.7;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  min-height:100vh;overflow-x:hidden;letter-spacing:.02em;
  transition:color .5s ease;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font:inherit;color:inherit}
::selection{background:var(--deep-pink);color:#fff}
:focus-visible{outline:2px solid var(--deep-pink);outline-offset:2px}

/* ===== 天空背景 ===== */
.sky{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:linear-gradient(160deg,#ffd7e9 0%,#f0ddff 34%,#dcedff 68%,#cfe8ff 100%);
  background-size:200% 200%;animation:skydrift 26s ease-in-out infinite alternate}
html[data-theme="dark"] .sky{background:linear-gradient(160deg,#241b3a 0%,#3a2650 45%,#1c2b3e 100%)}
@keyframes skydrift{from{background-position:0% 0%}to{background-position:100% 100%}}
.stars{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1s;
  background-image:
    radial-gradient(2px 2px at 8% 22%,#fff,var(--pink) 40%,transparent 60%),
    radial-gradient(2px 2px at 22% 64%,#fff,var(--gold) 40%,transparent 60%),
    radial-gradient(1.6px 1.6px at 38% 12%,#fff,var(--sky) 40%,transparent 60%),
    radial-gradient(2px 2px at 56% 40%,#fff,#fff 45%,transparent 65%),
    radial-gradient(1.6px 1.6px at 72% 18%,#fff,var(--mint) 40%,transparent 60%),
    radial-gradient(2px 2px at 86% 52%,#fff,var(--purple) 40%,transparent 60%),
    radial-gradient(1.4px 1.4px at 14% 82%,#fff,#fff 45%,transparent 65%),
    radial-gradient(1.8px 1.8px at 66% 88%,#fff,var(--gold) 40%,transparent 60%),
    radial-gradient(1.4px 1.4px at 94% 8%,#fff,#fff 45%,transparent 65%),
    radial-gradient(1.6px 1.6px at 44% 74%,#fff,var(--sky) 40%,transparent 60%);
  background-size:100% 100%}
html[data-theme="dark"] .stars{opacity:.9;filter:drop-shadow(0 0 4px rgba(255,255,255,.6))}
.cloud{position:fixed;z-index:-2;pointer-events:none;opacity:.5;animation:clouddrift linear infinite}
html[data-theme="dark"] .cloud{opacity:.14;filter:brightness(.5)}
@keyframes clouddrift{from{transform:translateX(110vw)}to{transform:translateX(-20vw)}}
#petal-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* ===== 顶栏 ===== */
.topnav{position:fixed;top:0;left:0;right:0;z-index:60;height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 20px;
  background:color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:2px dashed var(--border)}
.logo{font-family:var(--font-disp);font-size:21px;letter-spacing:.06em;
  background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(240,68,127,.25))}
.logo .saku{font-size:19px;display:inline-block;animation:bob 2.4s ease-in-out infinite;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:initial;filter:none}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(8deg)}}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-btn{width:38px;height:38px;border-radius:12px;font-size:17px;display:grid;place-items:center;
  background:var(--card);border:1.5px solid var(--border);box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease-bounce),box-shadow .2s}
.nav-btn:hover{transform:translateY(-2px) rotate(-6deg);box-shadow:var(--shadow-2)}

/* ===== 主区 ===== */
main{max-width:860px;margin:0 auto;padding:110px 20px 40px;
  display:flex;flex-direction:column;align-items:center;gap:34px}

/* 时钟 */
.clock{text-align:center;animation:rise .7s var(--ease-bounce) both}
.clock .time{font-family:var(--font-disp);font-size:clamp(58px,10vw,88px);font-weight:900;line-height:1.05;letter-spacing:.02em;
  background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.55)) drop-shadow(0 10px 22px rgba(240,68,127,.3));
  font-variant-numeric:tabular-nums}
html[data-theme="dark"] .clock .time{filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 10px 22px rgba(240,110,180,.35))}
.clock .date{font-family:var(--font-disp);margin-top:6px;font-size:16.5px;color:var(--muted);letter-spacing:.12em}
.clock .date b{color:var(--deep-pink);font-weight:500}

/* 搜索胶囊 */
.search-box{width:100%;max-width:640px;animation:rise .7s .1s var(--ease-bounce) both}
.pill{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 20px;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  border:2px solid var(--border);border-radius:999px;box-shadow:var(--shadow-2);
  transition:border-color .25s,box-shadow .25s,transform .25s}
.pill:focus-within{border-color:var(--pink);transform:translateY(-2px);
  box-shadow:var(--shadow-2),0 0 0 5px var(--pink-soft)}
.pill .mag{font-size:20px;animation:bob 3.2s ease-in-out infinite}
.pill input{flex:1;min-width:0;background:none;border:none;outline:none;
  font-family:var(--font-sys);font-size:17.5px;padding:10px 0;letter-spacing:.02em}
.pill input::placeholder{color:var(--muted);opacity:.7}
.pill .clear{width:36px;height:36px;border-radius:50%;color:var(--muted);font-size:14px;
  display:none;place-items:center;transition:background .2s,color .2s}
.pill .clear:hover{background:var(--pink-soft);color:var(--deep-pink)}
.pill .clear.on{display:grid}
.go{flex-shrink:0;height:46px;padding:0 26px;border-radius:999px;color:#fff;font-size:16.5px;letter-spacing:.14em;
  background:var(--grad-main);background-size:160% 160%;
  box-shadow:0 6px 16px rgba(240,68,127,.35);
  transition:transform .2s var(--ease-bounce),background-position .4s}
.go:hover{transform:translateY(-2px) scale(1.03);background-position:100% 0}
.go:active{transform:scale(.96)}

/* 引擎药丸 */
.engines{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.eng{padding:8px 16px;border-radius:999px;font-size:14.5px;color:var(--muted);
  background:color-mix(in srgb, var(--card) 80%, transparent);
  border:1.5px solid var(--border);transition:all .2s var(--ease-bounce)}
.eng:hover{color:var(--deep-pink);transform:translateY(-2px)}
.eng.on{color:#fff;background:var(--grad-candy);border-color:transparent;
  box-shadow:0 4px 12px rgba(240,68,127,.3)}
.eng .bd{font-size:12px;opacity:.75;margin-left:3px}
html[data-theme="dark"] .eng.on{color:#2a2038}

/* 快捷标签 */
.tabs{width:100%;animation:rise .7s .2s var(--ease-bounce) both}
.tabs-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px 12px;margin-bottom:14px;padding:0 4px}
.tabs-head h2{font-size:17px;font-weight:500;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.tabs-head h2 b{color:var(--deep-pink);font-weight:500}
.tabs-ops{display:flex;gap:8px;flex-wrap:wrap}
.tbtn{padding:8px 16px;border-radius:999px;font-size:13.5px;color:var(--muted);white-space:nowrap;
  border:1.5px dashed var(--border);transition:all .2s}
.tbtn:hover{color:var(--deep-pink);border-color:var(--pink);border-style:solid;transform:translateY(-1px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 8px 13px;border-radius:18px;text-align:center;
  background:color-mix(in srgb, var(--card) 86%, transparent);
  border:1.5px solid var(--border);box-shadow:var(--shadow-1);
  transition:transform .25s var(--ease-bounce),box-shadow .25s,border-color .25s}
.tab:hover{transform:translateY(-4px) rotate(-1.2deg);box-shadow:var(--shadow-2);border-color:var(--pink)}
.tab .ico{font-size:26px;line-height:1}
.tab .ico-img{width:26px;height:26px;object-fit:contain;border-radius:6px;flex-shrink:0}
.tab .nm{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab .del{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:var(--deep-pink);color:#fff;font-size:11px;display:none;place-items:center;z-index:3;
  box-shadow:0 2px 8px rgba(240,68,127,.45)}
.tab .del:hover{transform:scale(1.15)}
.editing .tab .del{display:grid}

/* 整理模式：拖拽手柄 / 上下移 / 选中态 / 拖影 */
.editing .tab{cursor:grab;user-select:none}
.editing .tab:hover{transform:none;box-shadow:var(--shadow-2);border-color:var(--pink)}
.tab.sel{border-color:var(--pink);box-shadow:0 0 0 2px rgba(255,111,165,.3),var(--shadow-2)}
.tab .grab{position:absolute;top:6px;left:6px;width:10px;height:14px;color:var(--muted);opacity:.6;
  background-image:radial-gradient(currentColor 1.1px,transparent 1.2px);background-size:5px 5px;
  display:none;pointer-events:none}
.editing .tab .grab{display:block}
.tab .mv{position:absolute;bottom:-6px;width:24px;height:24px;border-radius:50%;
  background:var(--card);border:1.5px solid var(--border);color:var(--muted);
  font-size:14px;line-height:1;display:none;place-items:center;padding:0;z-index:3}
.tab .mv[data-d="-1"]{left:-6px}
.tab .mv[data-d="1"]{right:-6px}
.tab .mv:hover{color:var(--deep-pink);border-color:var(--pink)}
.editing .tab .mv{display:grid}
.tab.dragging{opacity:.32;cursor:grabbing}
.drag-ghost{position:fixed;z-index:200;pointer-events:none;margin:0;
  box-shadow:0 18px 40px rgba(160,110,232,.34);opacity:.96}

/* 轻提示 */
#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,16px);z-index:130;
  max-width:min(86vw,440px);padding:11px 20px;border-radius:999px;
  background:var(--card);border:1.5px solid var(--border);color:var(--text);
  font-size:13.5px;line-height:1.5;text-align:center;
  box-shadow:var(--shadow-2);opacity:0;pointer-events:none;
  transition:opacity .24s ease,transform .24s var(--ease-bounce)}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* 页脚 */
footer{font-family:var(--font-disp);max-width:860px;margin:0 auto;padding:0 20px calc(30px + env(safe-area-inset-bottom,0px));text-align:center;
  color:var(--muted);font-size:13px;letter-spacing:.04em}
footer a:hover{color:var(--deep-pink)}
footer .sep{margin:0 8px;opacity:.5}
footer .cnt{font-family:var(--font-sys)}

/* 弹窗 */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:rgba(74,59,82,.4);backdrop-filter:blur(4px)}
.modal.on{display:flex}
.mcard{position:relative;width:min(92vw,380px);background:var(--card);border:2px solid var(--border);border-radius:22px;
  padding:24px;box-shadow:var(--shadow-2);animation:pop .35s var(--ease-bounce)}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.mcard h3{font-size:17px;margin-bottom:16px;color:var(--deep-pink);letter-spacing:.06em;padding-right:30px}
.mclose{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;
  color:var(--muted);border:1.5px solid var(--border);transition:all .2s var(--ease-bounce)}
.mclose:hover{color:var(--deep-pink);border-color:var(--pink);background:var(--pink-soft)}
.fg{margin-bottom:13px}
.fg label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:5px}
.fg input{width:100%;padding:10px 14px;border-radius:12px;font-size:15px;
  font-family:var(--font-sys);
  background:color-mix(in srgb, var(--pink-soft) 30%, transparent);
  border:1.5px solid var(--border);outline:none;transition:border-color .2s}
.fg input:focus{border-color:var(--pink)}
.mops{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}
#c-ops .mops{justify-content:space-between;gap:8px}
.btn{padding:9px 22px;border-radius:999px;font-size:14.5px;white-space:nowrap;flex:0 0 auto;
  transition:all .2s var(--ease-bounce)}
#c-ops .mops .btn{padding:9px 16px}
#c-ops .fg{text-wrap:pretty}
.btn.ghost{color:var(--muted);border:1.5px solid var(--border)}
.btn.ghost:hover{color:var(--deep-pink);border-color:var(--pink)}
.btn.main{color:#fff;background:var(--grad-main);box-shadow:0 4px 12px rgba(240,68,127,.35)}
.btn.main:hover{transform:translateY(-1px)}
.btn.risky{color:#fff;background:#e5484d;box-shadow:0 4px 12px rgba(229,72,77,.32)}
.btn.risky:hover{background:#cf3b40}
.cfm{font-size:13.5px;line-height:1.75;color:var(--text);word-break:break-word}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width:560px){
  main{padding-top:96px;gap:26px}
  .clock .time{font-size:15vw}
  .go{padding:0 18px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
  /* 窄屏下三个同步按钮要能挤进一行，只收内边距不改字号层级 */
  #c-ops .mops{gap:6px}
  #c-ops .mops .btn{padding:9px 10px}
}

/* ===== 超窄屏（折叠屏 / 老安卓 <380px）===== */
@media (max-width:380px){
  .clock .time{font-size:13vw}
  .grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  main{gap:20px}
  .tabs-head h2{font-size:15px}
}

/* ===== 触屏设备：清除悬停残留（保留颜色反馈，清除位移/缩放）===== */
@media (hover:none){
  .nav-btn:hover,.go:hover,.eng:hover,.tbtn:hover,.tab:hover,.tab .del:hover,
  .btn.main:hover{transform:none}
  .tab:hover{box-shadow:var(--shadow-1);border-color:var(--border)}
  .go:hover{background-position:0 0}
}

/* ===== 减弱动态效果 ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ===== 横屏矮屏 ===== */
@media (max-height:480px) and (orientation:landscape){
  .modal{align-items:flex-start;padding-top:5vh}
  .mcard{max-height:88vh;overflow-y:auto}
}