/* ============================================
   Dynamic Island v3 — Mac 尺寸 183×31pt
   Liquid Glass 风格 + 25 种活动
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-select: none; user-select: none; }
html, body { width: 100%; height: 100%; background: transparent; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #fff; }
/* Web 版：body 需恢复可点击（Electron 透明窗口的穿透写法不适用网页） */
body { display: flex; justify-content: center; align-items: flex-start; pointer-events: auto; }

/* ========== 容器 — Mac 灵动岛紧凑尺寸 183×31pt ========== */
.island {
  position: relative; pointer-events: auto; cursor: pointer; overflow: hidden;
  width: 183px; height: 31px; border-radius: 16px; margin-top: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 40%, transparent 65%, rgba(0,0,0,0.14) 100%),
    rgba(22,22,27,0.72);
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  corner-shape: squircle;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 6px 16px rgba(0,0,0,0.38), 0 1px 0 rgba(255,255,255,0.05) inset;
  transition: width 0.55s cubic-bezier(0.175,0.885,0.32,1.275),
    height 0.55s cubic-bezier(0.175,0.885,0.32,1.275),
    border-radius 0.55s cubic-bezier(0.175,0.885,0.32,1.275),
    margin-top 0.55s cubic-bezier(0.175,0.885,0.32,1.275),
    background 0.4s ease, box-shadow 0.4s ease;
  will-change: width, height;
}

/* 待机（idle）状态：Mac 尺寸，无消息时不显示时间，传感器居中 */
.island[data-activity="idle"] {
  width: 183px; height: 31px; border-radius: 16px; margin-top: 8px;
}
.island[data-activity="idle"] .view-compact { justify-content: center; }
.island[data-activity="idle"] .compact-time { display: none; }
.island[data-activity="idle"] .ci-idle .sensor-dot { width: 6px; height: 6px; }
.island[data-activity="idle"] .ci-idle .sensor-dot::after { width: 2.5px; height: 2.5px; }

/* 展开态 — Mac 灵动岛宽度 296pt，液态玻璃 */
.island.expanded {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.025) 32%, transparent 62%, rgba(0,0,0,0.16) 100%),
    rgba(28,28,34,0.74);
  backdrop-filter: blur(46px) saturate(210%);
  -webkit-backdrop-filter: blur(46px) saturate(210%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 52px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* 各活动展开尺寸（Mac：宽度 296，高度按内容 84-160，圆角 28） */
.island.expanded[data-activity="notification"] { width: 296px; height: 88px; border-radius: 28px; }
.island.expanded[data-activity="music"]        { width: 296px; height: 92px; border-radius: 28px; }
.island.expanded[data-activity="call"]         { width: 296px; height: 94px; border-radius: 28px; }
.island.expanded[data-activity="timer"]        { width: 296px; height: 90px; border-radius: 28px; }
.island.expanded[data-activity="nav"]          { width: 296px; height: 94px; border-radius: 28px; }
.island.expanded[data-activity="siri"]         { width: 296px; height: 104px; border-radius: 32px; }
.island.expanded[data-activity="faceid"]       { width: 296px; height: 114px; border-radius: 32px; }
.island.expanded[data-activity="airdrop"]      { width: 296px; height: 96px; border-radius: 28px; }
.island.expanded[data-activity="charging"]     { width: 296px; height: 88px; border-radius: 28px; }
.island.expanded[data-activity="recording"]    { width: 296px; height: 84px; border-radius: 28px; }
.island.expanded[data-activity="volume"]       { width: 296px; height: 86px; border-radius: 28px; }
.island.expanded[data-activity="liveactivity"] { width: 296px; height: 96px; border-radius: 28px; }
.island.expanded[data-activity="download"]     { width: 296px; height: 96px; border-radius: 28px; }
.island.expanded[data-activity="weather"]      { width: 296px; height: 92px; border-radius: 28px; }
.island.expanded[data-activity="stock"]        { width: 296px; height: 94px; border-radius: 28px; }
.island.expanded[data-activity="food"]         { width: 296px; height: 104px; border-radius: 28px; }
.island.expanded[data-activity="flight"]       { width: 296px; height: 98px; border-radius: 28px; }
.island.expanded[data-activity="focus"]        { width: 296px; height: 88px; border-radius: 28px; }
.island.expanded[data-activity="alarm"]        { width: 296px; height: 88px; border-radius: 28px; }
.island.expanded[data-activity="workout"]      { width: 296px; height: 104px; border-radius: 28px; }
.island.expanded[data-activity="wallet"]       { width: 296px; height: 92px; border-radius: 28px; }
.island.expanded[data-activity="hotspot"]      { width: 296px; height: 88px; border-radius: 28px; }
.island.expanded[data-activity="system"]       { width: 296px; height: 104px; border-radius: 28px; }
.island.expanded[data-activity="storage"]      { width: 296px; height: 98px; border-radius: 28px; }
.island.expanded[data-activity="screenshot"]   { width: 296px; height: 88px; border-radius: 28px; }
.island.expanded[data-activity="voice-memo"]   { width: 296px; height: 88px; border-radius: 28px; }
.island.expanded[data-activity="mirroring"]    { width: 296px; height: 88px; border-radius: 28px; }

/* ========== Glass 层（液态玻璃微折射，无刺眼高光条） ========== */
.glass-surface { position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, transparent 42%, transparent 62%, rgba(255,255,255,0.02) 100%);
  pointer-events:none; z-index:1; }
.glass-highlight { display:none; }
.glass-sheen { display:none; }
@keyframes sheenFlow { 0%,100%{transform:translateX(-25%) translateY(-8%) rotate(4deg);opacity:.4} 50%{transform:translateX(25%) translateY(8%) rotate(4deg);opacity:.9} }

/* ========== 视图通用 ========== */
.view { position:absolute; inset:0; display:flex; align-items:center; opacity:0; visibility:hidden;
  transform: scale(0.88) translateY(2px); transition: opacity .3s cubic-bezier(.175,.885,.32,1.275), transform .3s cubic-bezier(.175,.885,.32,1.275), visibility .3s;
  z-index:5; padding: 0 16px; gap: 12px; }
.view.active { opacity:1; visibility:visible; transform:scale(1) translateY(0); transition-delay:.14s; }
.view svg { width:20px; height:20px; }

/* ========== 紧凑态 ========== */
.view-compact { justify-content:space-between; padding:0 16px; opacity:1; visibility:visible; transform:scale(1); transition:opacity .2s ease; }
.island.expanded .view-compact { opacity:0; visibility:hidden; transform:scale(.9); transition-delay:0s; }
.compact-left, .compact-right { display:flex; align-items:center; height:100%; }
.compact-right { justify-content:flex-end; }
.compact-time { font-size:13px; font-weight:600; letter-spacing:.3px; color:rgba(255,255,255,.92); font-variant-numeric:tabular-nums; text-shadow:0 0 12px rgba(255,255,255,.1); }

.ci { display:none; align-items:center; justify-content:center; color:rgba(255,255,255,.92); }
.ci svg { width:14px; height:14px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.island[data-activity="idle"] .ci-idle,
.island[data-activity="music"] .ci-music,
.island[data-activity="call"] .ci-call,
.island[data-activity="timer"] .ci-timer,
.island[data-activity="nav"] .ci-nav,
.island[data-activity="notification"] .ci-notification,
.island[data-activity="siri"] .ci-siri,
.island[data-activity="faceid"] .ci-faceid,
.island[data-activity="airdrop"] .ci-airdrop,
.island[data-activity="charging"] .ci-charging,
.island[data-activity="recording"] .ci-recording,
.island[data-activity="volume"] .ci-volume,
.island[data-activity="screenshot"] .ci-screenshot,
.island[data-activity="voice-memo"] .ci-voice-memo,
.island[data-activity="mirroring"] .ci-mirroring,
.island[data-activity="liveactivity"] .ci-liveactivity,
.island[data-activity="download"] .ci-download,
.island[data-activity="weather"] .ci-weather,
.island[data-activity="stock"] .ci-stock,
.island[data-activity="food"] .ci-food,
.island[data-activity="flight"] .ci-flight,
.island[data-activity="focus"] .ci-focus,
.island[data-activity="alarm"] .ci-alarm,
.island[data-activity="workout"] .ci-workout,
.island[data-activity="wallet"] .ci-wallet,
.island[data-activity="hotspot"] .ci-hotspot,
.island[data-activity="system"] .ci-system,
.island[data-activity="storage"] .ci-storage { display:flex; }

.sensor-dot { width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #2a2a3e 25%, #0a0a12 70%); box-shadow:0 0 0 1px rgba(255,255,255,.06), inset 0 -1px 2px rgba(0,0,0,.8); position:relative; }
.sensor-dot::after { content:''; position:absolute; left:50%; top:50%; width:3px; height:3px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(80,100,160,.5), transparent 70%); }
.mini-wave { display:flex; align-items:flex-end; gap:2px; height:16px; }
.mini-wave i { width:2.5px; background:linear-gradient(180deg,#4ade80,#22c55e); border-radius:2px; animation:miniWave .9s ease-in-out infinite; }
.mini-wave i:nth-child(1){animation-delay:0s;height:35%} .mini-wave i:nth-child(2){animation-delay:.12s;height:70%}
.mini-wave i:nth-child(3){animation-delay:.24s;height:100%} .mini-wave i:nth-child(4){animation-delay:.36s;height:55%}
@keyframes miniWave { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
.siri-dot { width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,#ff6b9d,#c44dff,#5e8cff); animation:siriPulse 1.5s ease-in-out infinite; box-shadow:0 0 6px rgba(196,77,255,.5); }
@keyframes siriPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.7} }
.rec-mini-dot { width:8px; height:8px; border-radius:50%; background:#ff3b30; animation:recBlink 1s ease-in-out infinite; box-shadow:0 0 5px rgba(255,59,48,.6); }
@keyframes recBlink { 0%,100%{opacity:1} 50%{opacity:.25} }
.mini-score { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.weather-icon, .food-icon, .focus-icon, .workout-icon, .hotspot-icon, .system-icon { font-size:14px; }
.stock-up { font-size:12px; color:#4ade80; font-weight:700; }

/* ========== 通知 ========== */
.view-notification { gap:14px; }
.exp-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 12px rgba(0,0,0,.3); }
.exp-icon-blue { background:linear-gradient(135deg,rgba(10,132,255,.4),rgba(10,132,255,.18)); color:#5cacff; }
.exp-icon-green { background:linear-gradient(135deg,rgba(48,209,88,.38),rgba(48,209,88,.16)); color:#5fe68a; }
.exp-icon-red { background:linear-gradient(135deg,rgba(255,69,58,.38),rgba(255,69,58,.16)); color:#ff776b; }
.exp-icon-orange { background:linear-gradient(135deg,rgba(255,159,10,.38),rgba(255,159,10,.16)); color:#ffbd5c; }
.exp-icon-amber { background:linear-gradient(135deg,rgba(255,204,0,.36),rgba(255,204,0,.14)); color:#ffd60a; }
.exp-icon-indigo { background:linear-gradient(135deg,rgba(94,92,230,.38),rgba(94,92,230,.16)); color:#8f8df5; }
.exp-icon svg { width:22px; height:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.exp-content { flex:1; min-width:0; }
.exp-title { font-size:15px; font-weight:600; letter-spacing:.1px; }
.exp-subtitle { font-size:12.5px; font-weight:400; color:rgba(235,235,245,.7); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.exp-app-tag { font-size:10.5px; font-weight:500; color:rgba(255,255,255,.42); text-transform:uppercase; letter-spacing:.6px; flex-shrink:0; }

/* ========== 音乐 ========== */
.view-music { gap:14px; }
.music-artwork { width:46px; height:46px; border-radius:11px; overflow:hidden; flex-shrink:0; box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12); }
.artwork-gradient { width:100%; height:100%; background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3); background-size:300% 300%; animation:artworkShift 8s ease infinite; }
@keyframes artworkShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.music-info { flex:1; min-width:0; }
.music-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-artist { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
.music-wave { display:flex; align-items:flex-end; gap:2.5px; height:26px; flex-shrink:0; }
.music-wave i { width:3px; background:linear-gradient(180deg,#4ade80,rgba(74,222,128,.5)); border-radius:2px; animation:waveBounce .85s ease-in-out infinite; }
.music-wave i:nth-child(1){animation-delay:0s;height:35%} .music-wave i:nth-child(2){animation-delay:.1s;height:65%}
.music-wave i:nth-child(3){animation-delay:.2s;height:100%} .music-wave i:nth-child(4){animation-delay:.3s;height:55%} .music-wave i:nth-child(5){animation-delay:.4s;height:30%}
@keyframes waveBounce { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }

/* ========== 通话 ========== */
.view-call { gap:14px; }
.call-avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,rgba(74,222,128,.28),rgba(34,197,94,.12)); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#4ade80; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.3); }
.call-avatar svg { width:22px; height:22px; }
.call-info { flex:1; min-width:0; }
.call-name { font-size:14px; font-weight:600; }
.call-duration { font-size:11px; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; margin-top:2px; }
.call-btns { display:flex; gap:8px; flex-shrink:0; }
.call-btn { width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s,background .2s; color:#fff; font-family:inherit; }
.call-btn:active { transform:scale(.88); }
.call-btn.mute { background:rgba(255,255,255,.14); }
.call-btn.mute.active { background:rgba(255,255,255,.3); }
.call-btn.end { background:#ff3b30; }
.call-btn svg { width:15px; height:15px; }

/* ========== 计时器 ========== */
.view-timer { gap:16px; }
.timer-ring { position:relative; width:46px; height:46px; flex-shrink:0; }
.timer-ring svg { width:46px; height:46px; transform:rotate(-90deg); }
.t-bg { fill:none; stroke:rgba(255,255,255,.15); stroke-width:2.5; }
.t-fg { fill:none; stroke:#ff9500; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:97.4; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear; }
.t-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; }
.timer-info { flex:1; }
.timer-label { font-size:10.5px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.5px; }
.timer-time { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; color:#ff9500; }

/* ========== 导航 ========== */
.view-nav { gap:14px; }
.nav-arrow { width:46px; height:46px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#4ade80; }
.nav-arrow svg { width:28px; height:28px; filter:drop-shadow(0 0 5px rgba(74,222,128,.4)); }
.nav-info { flex:1; min-width:0; }
.nav-street { font-size:15px; font-weight:600; }
.nav-dist { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
.nav-eta { flex-shrink:0; font-size:14px; font-weight:600; color:#4ade80; }

/* ========== Siri ========== */
.view-siri { flex-direction:column; gap:8px; padding:10px 16px; }
.siri-waves { display:flex; align-items:center; gap:3px; height:24px; }
.siri-waves i { width:4px; border-radius:3px; background:linear-gradient(180deg,#ff6b9d,#c44dff,#5e8cff); animation:siriWave 1.2s ease-in-out infinite; }
.siri-waves i:nth-child(1){animation-delay:0s} .siri-waves i:nth-child(2){animation-delay:.1s} .siri-waves i:nth-child(3){animation-delay:.2s}
.siri-waves i:nth-child(4){animation-delay:.3s} .siri-waves i:nth-child(5){animation-delay:.4s} .siri-waves i:nth-child(6){animation-delay:.5s} .siri-waves i:nth-child(7){animation-delay:.6s}
@keyframes siriWave { 0%,100%{height:6px} 50%{height:22px} }
.siri-text { font-size:12px; color:rgba(255,255,255,.7); text-align:center; }

/* ========== Face ID ========== */
.view-faceid { flex-direction:column; gap:8px; padding:10px; }
.faceid-box { position:relative; width:40px; height:40px; color:rgba(255,255,255,.75); }
.faceid-box svg { width:40px; height:40px; }
.faceid-scanline { position:absolute; left:2px; right:2px; height:2px; background:linear-gradient(90deg,transparent,#4ade80,transparent); box-shadow:0 0 8px #4ade80; top:0; animation:faceidScan 1.5s ease-in-out infinite; }
@keyframes faceidScan { 0%{top:2px;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:36px;opacity:0} }
.faceid-label { font-size:12px; color:rgba(255,255,255,.65); }

/* ========== AirDrop ========== */
.view-airdrop { gap:14px; }
.airdrop-icon { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,rgba(10,132,255,.32),rgba(10,132,255,.12)); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#0a84ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.airdrop-icon svg { width:22px; height:22px; }
.airdrop-info { flex:1; min-width:0; }
.airdrop-name { font-size:14px; font-weight:600; margin-bottom:5px; }
.airdrop-track { width:100%; height:4px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.airdrop-fill { height:100%; width:45%; background:linear-gradient(90deg,#0a84ff,#5ac8fa); border-radius:2px; transition:width .3s ease; }
.airdrop-status { font-size:10px; color:rgba(255,255,255,.5); }

/* ========== 充电 ========== */
.view-charging { gap:12px; }
.battery-icon { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.bat-body { position:relative; width:38px; height:20px; border:1.5px solid rgba(255,255,255,.4); border-radius:4px; overflow:hidden; }
.bat-level { position:absolute; top:1px; left:1px; bottom:1px; width:87%; background:linear-gradient(90deg,#4ade80,#22c55e); border-radius:2px; animation:batteryPulse 2s ease-in-out infinite; }
@keyframes batteryPulse { 0%,100%{opacity:1} 50%{opacity:.65} }
.bat-bolt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; }
.bat-cap { width:2px; height:9px; background:rgba(255,255,255,.4); border-radius:0 2px 2px 0; }
.charging-info { flex:1; }
.charging-percent { font-size:17px; font-weight:600; color:#4ade80; }
.charging-label { font-size:10px; color:rgba(255,255,255,.5); }

/* ========== 录屏 ========== */
.view-recording { gap:10px; }
.rec-dot { width:14px; height:14px; border-radius:50%; background:#ff3b30; flex-shrink:0; animation:recBlink 1s ease-in-out infinite; box-shadow:0 0 8px rgba(255,59,48,.6); }
.rec-info { flex:1; }
.rec-label { font-size:10.5px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.5px; }
.rec-time { font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; color:#ff3b30; }
.rec-stop { width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:#ff3b30; color:#fff; flex-shrink:0; transition:transform .15s,background .2s; }
.rec-stop:hover { background:#ff2d1f; }
.rec-stop:active { transform:scale(.88); }
.rec-stop svg { width:14px; height:14px; }

/* ========== 截图 ========== */
.view-screenshot { gap:14px; }
.shot-thumb { width:84px; height:56px; border-radius:10px; overflow:hidden; flex-shrink:0; background:rgba(255,255,255,.08); box-shadow:0 2px 10px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.14); position:relative; }
.shot-thumb::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); border-radius:10px; pointer-events:none; }
.shot-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.shot-info { flex:1; min-width:0; }
.shot-title { font-size:14.5px; font-weight:600; letter-spacing:.2px; }
.shot-sub { font-size:11.5px; color:rgba(255,255,255,.55); margin-top:3px; }

/* ========== 语音备忘录 ========== */
.view-voice-memo { gap:12px; }
.vm-dot { width:12px; height:12px; border-radius:50%; background:#ff3b30; flex-shrink:0; animation:recBlink 1s ease-in-out infinite; box-shadow:0 0 8px rgba(255,59,48,.6); }
.vm-wave { display:flex; align-items:center; gap:3px; height:30px; flex-shrink:0; }
.vm-wave i { width:3px; background:linear-gradient(180deg,#ff6b6b,#ff3b30); border-radius:2px; animation:vmBounce .7s ease-in-out infinite; }
.vm-wave i:nth-child(1){animation-delay:0s;height:30%} .vm-wave i:nth-child(2){animation-delay:.1s;height:70%}
.vm-wave i:nth-child(3){animation-delay:.2s;height:45%} .vm-wave i:nth-child(4){animation-delay:.3s;height:95%}
.vm-wave i:nth-child(5){animation-delay:.15s;height:60%} .vm-wave i:nth-child(6){animation-delay:.25s;height:85%}
.vm-wave i:nth-child(7){animation-delay:.35s;height:40%}
.vm-info { flex:1; min-width:0; }
.vm-label { font-size:14.5px; font-weight:600; }
.vm-time { font-size:11.5px; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; margin-top:3px; }

/* ========== 屏幕镜像 ========== */
.view-mirroring { gap:14px; }
.mirror-icon { width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,rgba(94,140,255,.32),rgba(94,140,255,.1)); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#5e8cff; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.3); }
.mirror-icon svg { width:22px; height:22px; }
.mirror-info { flex:1; min-width:0; }
.mirror-name { font-size:14.5px; font-weight:600; }
.mirror-desc { font-size:11.5px; color:rgba(255,255,255,.55); margin-top:3px; }

@keyframes vmBounce { 0%,100% { transform:scaleY(.6); } 50% { transform:scaleY(1.25); } }

/* ========== 音量 ========== */
.view-volume { gap:10px; }
.vol-icon { color:#fff; flex-shrink:0; display:flex; }
.vol-icon svg { width:20px; height:20px; }
.vol-track { flex:1; height:6px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden; }
.vol-fill { height:100%; width:70%; background:linear-gradient(90deg,#fff,rgba(255,255,255,.7)); border-radius:3px; transition:width .3s ease; }
.vol-value { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; flex-shrink:0; min-width:38px; text-align:right; }

/* ========== 实时活动 ========== */
.view-liveactivity { gap:10px; padding:0 16px; }
.la-team { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.la-logo { font-size:16px; }
.la-name { font-size:9px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.3px; }
.la-score { display:flex; align-items:center; gap:7px; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; flex-shrink:0; }
.la-score b { color:rgba(255,255,255,.3); font-weight:400; }
.la-live { display:flex; align-items:center; gap:4px; margin-left:auto; flex-shrink:0; }
.la-dot { width:7px; height:7px; border-radius:50%; background:#ff3b30; animation:recBlink 1.2s ease-in-out infinite; }
.la-live span:last-child { font-size:11px; color:rgba(255,255,255,.6); font-weight:500; }

/* ========== 下载 ========== */
.view-download { gap:14px; }
.dl-icon { width:46px; height:46px; border-radius:11px; background:linear-gradient(135deg,rgba(10,132,255,.32),rgba(10,132,255,.12)); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#0a84ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.dl-icon svg { width:22px; height:22px; }
.dl-info { flex:1; min-width:0; }
.dl-name { font-size:14px; font-weight:600; margin-bottom:5px; }
.dl-track { width:100%; height:5px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden; margin-bottom:4px; }
.dl-fill { height:100%; width:62%; background:linear-gradient(90deg,#0a84ff,#5ac8fa); border-radius:3px; transition:width .5s ease; }
.dl-status { font-size:10px; color:rgba(255,255,255,.5); }

/* ========== 天气 ========== */
.view-weather { gap:12px; }
.weather-main { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.weather-big { font-size:28px; }
.weather-temp { font-size:24px; font-weight:300; }
.weather-info { flex:1; }
.weather-city { font-size:15px; font-weight:600; }
.weather-desc { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
.weather-hilo { display:flex; flex-direction:column; gap:2px; flex-shrink:0; font-size:11px; color:rgba(255,255,255,.5); }

/* ========== 股票 ========== */
.view-stock { gap:12px; }
.stock-info { flex:1; }
.stock-name { font-size:14px; font-weight:700; letter-spacing:.5px; }
.stock-price { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px; }
.stock-change { font-size:12px; font-weight:600; flex-shrink:0; }
.stock-change.up { color:#4ade80; }
.stock-change.down { color:#ff3b30; }
.stock-chart { display:flex; align-items:flex-end; gap:2px; height:30px; flex-shrink:0; }
.stock-chart span { width:4px; background:linear-gradient(180deg,#4ade80,rgba(74,222,128,.3)); border-radius:2px; }
.stock-chart span:nth-child(1){height:30%} .stock-chart span:nth-child(2){height:50%} .stock-chart span:nth-child(3){height:40%}
.stock-chart span:nth-child(4){height:65%} .stock-chart span:nth-child(5){height:55%} .stock-chart span:nth-child(6){height:80%} .stock-chart span:nth-child(7){height:100%}

/* ========== 外卖 ========== */
.view-food { flex-direction:column; gap:6px; padding:10px 14px; align-items:flex-start; }
.food-icon-big { font-size:22px; position:absolute; left:14px; top:50%; transform:translateY(-50%); }
.food-info { margin-left:36px; flex:1; }
.food-title { font-size:14px; font-weight:600; }
.food-status { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
.food-step { display:flex; align-items:center; gap:4px; width:100%; margin-left:36px; }
.food-step .step { font-size:9px; color:rgba(255,255,255,.35); padding:2px 6px; border-radius:4px; background:rgba(255,255,255,.06); }
.food-step .step.active { color:#4ade80; background:rgba(74,222,128,.15); }

/* ========== 航班 ========== */
.view-flight { gap:8px; padding:0 16px; }
.flight-from, .flight-to { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.flight-code { font-size:16px; font-weight:700; letter-spacing:1px; }
.flight-city { font-size:10px; color:rgba(255,255,255,.5); margin-top:2px; }
.flight-path { display:flex; align-items:center; flex:1; gap:4px; }
.flight-line { flex:1; height:1px; background:rgba(255,255,255,.2); position:relative; }
.flight-plane { font-size:14px; color:#4ade80; animation:flightMove 3s ease-in-out infinite; }
@keyframes flightMove { 0%,100%{transform:translateX(-10px)} 50%{transform:translateX(10px)} }
.flight-status { font-size:11px; color:#4ade80; font-weight:600; flex-shrink:0; }

/* ========== 专注模式 ========== */
.view-focus { gap:12px; }
.focus-big { font-size:28px; flex-shrink:0; }
.focus-info { flex:1; }
.focus-name { font-size:15px; font-weight:600; }
.focus-desc { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }

/* ========== 闹钟 ========== */
.view-alarm { gap:12px; }
.alarm-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#ff9500; }
.alarm-icon svg { width:24px; height:24px; }
.alarm-info { flex:1; }
.alarm-time { font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; color:#ff9500; }
.alarm-label { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }

/* ========== 健身 ========== */
.view-workout { gap:14px; }
.workout-rings { width:48px; height:48px; flex-shrink:0; }
.rings-svg { width:48px; height:48px; transform:rotate(-90deg); }
.ring-bg, .ring-bg2, .ring-bg3 { fill:none; stroke:rgba(255,255,255,.1); stroke-width:3; }
.ring-move { fill:none; stroke:#ff2d55; stroke-width:3; stroke-linecap:round; stroke-dasharray:100.5; stroke-dashoffset:20; }
.ring-exercise { fill:none; stroke:#4ade80; stroke-width:3; stroke-linecap:round; stroke-dasharray:69.1; stroke-dashoffset:8; }
.ring-stand { fill:none; stroke:#0a84ff; stroke-width:3; stroke-linecap:round; stroke-dasharray:37.7; stroke-dashoffset:6; }
.workout-info { flex:1; display:flex; flex-direction:column; gap:3px; }
.workout-info > div { font-size:11px; }
.workout-move { color:#ff2d55; }
.workout-exercise { color:#4ade80; }
.workout-stand { color:#0a84ff; }

/* ========== 钱包 ========== */
.view-wallet { gap:12px; }
.wallet-card { width:48px; height:32px; border-radius:6px; background:linear-gradient(135deg,#1a1a2e,#2d2d44); border:1px solid rgba(255,255,255,.15); flex-shrink:0; position:relative; overflow:hidden; }
.wallet-chip { position:absolute; top:6px; left:6px; width:12px; height:9px; background:linear-gradient(135deg,#d4af37,#f4d03f); border-radius:2px; }
.wallet-text { position:absolute; bottom:4px; left:6px; font-size:6px; color:rgba(255,255,255,.6); letter-spacing:.5px; }
.wallet-info { flex:1; }
.wallet-amount { font-size:18px; font-weight:600; color:#4ade80; }
.wallet-desc { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
.wallet-check { font-size:18px; color:#4ade80; flex-shrink:0; }

/* ========== 个人热点 ========== */
.view-hotspot { gap:12px; }
.hotspot-big { font-size:26px; flex-shrink:0; }
.hotspot-info { flex:1; }
.hotspot-name { font-size:14px; font-weight:600; }
.hotspot-count { font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }

/* ========== 系统状态（真实 CPU/内存） ========== */
.view-system { flex-direction:column; gap:6px; padding:10px 14px; align-items:stretch; }
.sys-icon { position:absolute; left:14px; top:10px; font-size:16px; }
.sys-info { width:100%; display:flex; flex-direction:column; gap:6px; padding-left:28px; }
.sys-row { display:flex; align-items:center; gap:8px; }
.sys-label { font-size:10px; color:rgba(255,255,255,.5); width:32px; text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
.sys-bar { flex:1; height:5px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; }
.sys-fill { height:100%; border-radius:3px; transition:width .8s ease; }
.cpu-fill { background:linear-gradient(90deg,#ff9500,#ff6b6b); width:0%; }
.mem-fill { background:linear-gradient(90deg,#0a84ff,#5ac8fa); width:0%; }
.sys-val { font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; min-width:36px; text-align:right; }

/* ========== 存储空间 ========== */
.view-storage { gap:12px; }
.storage-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:rgba(255,255,255,.8); }
.storage-icon svg { width:22px; height:22px; }
.storage-info { flex:1; min-width:0; }
.storage-used { font-size:16px; font-weight:600; margin-bottom:5px; }
.storage-track { width:100%; height:5px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden; margin-bottom:4px; }
.storage-fill { height:100%; width:67%; background:linear-gradient(90deg,#0a84ff,#5ac8fa,#4ade80); border-radius:3px; }
.storage-total { font-size:10px; color:rgba(255,255,255,.5); }

/* ========== 悬停/按压 ========== */
.island:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.05) inset; }
.island:active { transform: scale(0.97); }

/* ========== 底部提示（已停用） ========== */
.hint { display:none; }

/* ========== SVG 图标颜色 ========== */
.icon-amber { color: #ff9500; }
.icon-green { color: #4ade80; }
.icon-red { color: #ff3b30; }
.icon-indigo { color: #5e8cff; }
.icon-blue { color: #0a84ff; }
.icon-orange { color: #ff9500; }

/* 紧凑端 SVG 统一尺寸 */
.ci svg { width: 16px; height: 16px; display: block; }

/* 大图标容器中的 SVG */
.weather-big svg { width: 30px; height: 30px; display: block; }
.focus-big svg { width: 28px; height: 28px; display: block; }
.hotspot-big svg { width: 26px; height: 26px; display: block; }
.flight-plane svg { width: 16px; height: 16px; display: block; transform: rotate(45deg); }
.wallet-check svg { width: 20px; height: 20px; display: block; }
.la-logo svg { width: 16px; height: 16px; display: block; }
.t-icon svg { width: 14px; height: 14px; display: block; }
.bat-bolt svg { width: 10px; height: 10px; display: block; }
.sys-icon svg { width: 18px; height: 18px; display: block; }
.alarm-icon svg { width: 24px; height: 24px; display: block; }
.call-avatar svg { width: 22px; height: 22px; display: block; }
.call-btn svg { width: 15px; height: 15px; display: block; }
.nav-arrow svg { width: 30px; height: 30px; display: block; }
.dl-icon svg { width: 22px; height: 22px; display: block; }
.airdrop-icon svg { width: 22px; height: 22px; display: block; }
.exp-icon svg { width: 22px; height: 22px; display: block; }
.storage-icon svg { width: 22px; height: 22px; display: block; }
.vol-icon svg { width: 20px; height: 20px; display: block; }

/* 通用 svg display */
.view svg { display: block; }

/* ========== 设备适配缩放 ========== */
body.scale-088 .island { transform: scale(0.88); transform-origin: top center; }
body.scale-095 .island { transform: scale(0.95); transform-origin: top center; }
body.scale-115 .island { transform: scale(1.15); transform-origin: top center; }

@keyframes islandEnter { from{opacity:0;transform:translateY(-16px) scale(.85)} to{opacity:1;transform:translateY(0) scale(1)} }
.island { animation: islandEnter .6s cubic-bezier(.175,.885,.32,1.275) both; }

/* ============================================
   Web 版页面布局（island.pages.dev）
   ============================================ */
html, body { height: 100%; }
body {
  margin: 0; overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(88,86,214,.35), transparent 60%),
    radial-gradient(900px 600px at 85% 110%, rgba(255,159,10,.12), transparent 55%),
    radial-gradient(900px 600px at 10% 110%, rgba(48,209,88,.10), transparent 55%),
    #06060a;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* 页面版灵动岛：固定顶部居中（禁用入场动画，避免后台标签页冻结在透明态） */
#dynamic-island {
  position: fixed; top: 42px; left: 50%; transform: translateX(-50%);
  margin-top: 0; z-index: 50;
  animation: none; opacity: 1;
}

/* ========== 密码门 ========== */
.auth-gate {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(6,6,10,.92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  animation: authIn .4s ease;
}
@keyframes authIn { from { opacity: 0; } to { opacity: 1; } }
.auth-gate.hidden { display: none; }
.auth-card {
  width: 320px; padding: 36px 32px 30px; border-radius: 24px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)), rgba(24,24,30,.9);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08) inset;
}
.auth-lock {
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(10,132,255,.5), rgba(10,132,255,.2));
  color: #7cc1ff; box-shadow: 0 8px 24px rgba(10,132,255,.35);
}
.auth-lock svg { width: 26px; height: 26px; }
.auth-title { font-size: 19px; font-weight: 700; letter-spacing: .2px; }
.auth-sub { font-size: 12.5px; color: rgba(235,235,245,.55); margin: 6px 0 22px; }
.auth-input {
  width: 100%; box-sizing: border-box; height: 46px; border-radius: 12px; text-align: center;
  font-size: 18px; letter-spacing: 6px; color: #fff; outline: none;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  transition: border-color .2s, box-shadow .2s;
}
.auth-input:focus { border-color: rgba(10,132,255,.7); box-shadow: 0 0 0 3px rgba(10,132,255,.2); }
.auth-input.shake { animation: shake .4s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}
.auth-err { height: 18px; font-size: 12px; color: #ff6b5e; margin-top: 8px; opacity: 0; transition: opacity .2s; }
.auth-err.show { opacity: 1; }
.auth-btn {
  width: 100%; height: 44px; margin-top: 10px; border: none; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #0a84ff, #0071e3);
  box-shadow: 0 8px 24px rgba(10,132,255,.35);
  transition: transform .15s, box-shadow .15s;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(10,132,255,.45); }
.auth-btn:active { transform: translateY(0); }

/* ========== 控制面板 ========== */
.panel {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 40;
  width: min(720px, calc(100vw - 40px)); max-height: 46vh; overflow-y: auto;
  padding: 16px 18px; border-radius: 20px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(18,18,24,.88);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.panel::-webkit-scrollbar { width: 6px; }
.panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.panel-title { font-size: 14px; font-weight: 700; letter-spacing: .3px; }
.panel-sub { font-size: 11px; color: rgba(235,235,245,.45); }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.panel-grid button {
  height: 38px; border: none; border-radius: 11px; cursor: pointer;
  font-size: 12.5px; color: rgba(255,255,255,.88); font-family: inherit;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09);
  transition: background .15s, transform .1s;
}
.panel-grid button:hover { background: rgba(255,255,255,.14); }
.panel-grid button:active { transform: scale(.96); }
.panel-grid button.running { background: rgba(10,132,255,.28); border-color: rgba(10,132,255,.5); color: #fff; }
.panel-custom { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.panel-custom summary { cursor: pointer; font-size: 12px; color: rgba(235,235,245,.6); outline: none; user-select: none; }
.custom-row { display: flex; gap: 8px; margin-top: 10px; }
.custom-input {
  flex: 1; min-width: 0; height: 36px; border-radius: 9px; padding: 0 12px; box-sizing: border-box;
  font-size: 12.5px; color: #fff; outline: none; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
}
.custom-input:focus { border-color: rgba(10,132,255,.6); }
.custom-btn {
  height: 36px; padding: 0 18px; border: none; border-radius: 9px; cursor: pointer; flex-shrink: 0;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #0a84ff, #0071e3);
}
.custom-btn:active { transform: scale(.96); }

@media (max-width: 640px) {
  #dynamic-island { top: 26px; }
  .panel { bottom: 12px; }
}