/* ============================================================
   iPhone 灵动岛（从 v1 搬迁，样式保持一致）
   收起 = 纯黑药丸；点一下用弹簧动画长成大圆角卡片
   全站统一：用户端 / 登录注册 / 管理后台
   ============================================================ */
.island-wrap{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 8px);
  left:0;right:0;z-index:1200;
  display:flex;justify-content:center;
  pointer-events:none;
  --island-green:#25e0a0;
  --island-orange:#ff9315;
  --island-grad:linear-gradient(140deg,#fff 8%,#ffc38a 52%,#ff7a1a 100%);
  --island-btn:linear-gradient(135deg,#ff8a00 0%,#ff2d55 100%);
  --island-ico:linear-gradient(145deg,#ff9d2e,#ff5b1a 58%,#ff2d55);
}
.island{
  pointer-events:auto;
  position:relative;
  width:214px;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  transform:translateZ(0);
  box-shadow:
    0 8px 26px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.05) inset,
    0 0 0 .5px rgba(255,255,255,.07);
  transition:
    width .55s cubic-bezier(.32,1.26,.36,1),
    border-radius .5s cubic-bezier(.32,1.26,.36,1),
    box-shadow .4s ease,
    transform .18s ease;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.island::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.island-wrap[data-mode="user"] .island{width:300px}
.island-wrap[data-mode="admin"] .island{width:300px}
.island-wrap[data-mode="guest"] .island{width:246px}
.island.tap{transform:scale(.955)}
.island.open{
  width:min(412px,calc(100vw - 16px));
  border-radius:36px;
  box-shadow:
    0 30px 74px rgba(0,0,0,.8),
    0 0 0 .5px rgba(255,255,255,.09),
    0 0 48px rgba(255,96,0,.13);
}

/* --- 收起态：药丸那一行（展开时缩掉，做出 iPhone 的形变感） --- */
.island-pill{
  display:flex;align-items:center;gap:8px;
  height:34px;padding:0 13px;
  cursor:pointer;overflow:hidden;
  transition:height .28s cubic-bezier(.4,0,.2,1),padding .28s ease,opacity .2s ease;
}
.island.open .island-pill{height:0;padding:0 13px;opacity:0;pointer-events:none}
.island-ico{
  width:19px;height:19px;border-radius:7px;flex:none;
  background:var(--island-ico);
  display:grid;place-items:center;font-size:10px;color:#fff;
  box-shadow:0 2px 8px rgba(255,90,0,.45);
  transition:transform .5s cubic-bezier(.32,1.26,.36,1);
}
.island.open .island-ico{transform:scale(1.1)}
.island-main{flex:1;min-width:0;overflow:hidden}
.island-text{
  display:block;font-size:11.5px;font-weight:600;color:#f4f6fa;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px;
}
.island-text b{color:#ffa347;font-weight:800}
.island-text i{font-style:normal;color:#4b5265;font-size:9.5px;margin:0 3px}
.island-live{
  width:6px;height:6px;border-radius:50%;flex:none;background:var(--island-green);
  box-shadow:0 0 8px rgba(37,224,160,.8);
  animation:livePulse 2.3s infinite;
}
.island-live.off{background:#ff4d6a;box-shadow:0 0 8px rgba(255,77,106,.7);animation:none}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(37,224,160,.5)}
  70%{box-shadow:0 0 0 6px rgba(37,224,160,0)}
  100%{box-shadow:0 0 0 0 rgba(37,224,160,0)}
}

/* --- 展开区：grid 0fr → 1fr，才有"长出来"的弹性 --- */
.island-body{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s cubic-bezier(.32,1.26,.36,1),opacity .3s ease;
}
.island.open .island-body{grid-template-rows:1fr;opacity:1;transition-delay:0s,.08s}
.island-body > .ibox{overflow:hidden}
.island-inner{padding:14px 16px 15px;transform:translateY(-8px) scale(.98);
  transition:transform .55s cubic-bezier(.32,1.26,.36,1);transform-origin:top center}
.island.open .island-inner{transform:none}

.island-top{display:flex;align-items:center;margin-bottom:9px}
.island-tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:#8b93a8}
.island-tag i{width:5px;height:5px;border-radius:50%;background:var(--island-orange);
  box-shadow:0 0 7px rgba(255,147,21,.9)}
.island-x{margin-left:auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:#7b8296;font-size:10px;cursor:pointer;background:rgba(255,255,255,.07);transition:.18s}
.island-x:hover{background:rgba(255,255,255,.16);color:#fff}

/* 主数字 */
.island-hero{display:flex;align-items:flex-end;gap:12px;margin-bottom:12px}
.island-hero-num{
  font-size:40px;line-height:.9;font-weight:800;letter-spacing:-2.4px;
  background:var(--island-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.island-hero-side{padding-bottom:3px;min-width:0}
.island-hero-key{font-size:12px;font-weight:700;color:#fff;line-height:1.2}
.island-hero-sub{font-size:10.5px;color:#79819a;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.island-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:11px}
.island-grid.two{grid-template-columns:repeat(2,1fr)}
.island-cell{
  background:rgba(255,255,255,.055);
  border-radius:13px;padding:8px 4px;text-align:center;
  transition:background .2s;
}
.island-cell:hover{background:rgba(255,255,255,.09)}
.island-cell .v{font-size:16px;font-weight:800;letter-spacing:-.4px;color:#fff;line-height:1.25}
.island-cell .v.hot{background:var(--island-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.island-cell .k{font-size:9.5px;color:#79819a;margin-top:1px}

/* 快捷圆角按钮（iOS 控制中心那种方圆形） */
.island-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:11px}
.island-wrap[data-mode="guest"] .island-quick{grid-template-columns:repeat(3,1fr)}
.iq{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.iq-ico{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;font-size:17px;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08);
  transition:transform .2s cubic-bezier(.3,1.5,.45,1),background .2s;
}
.iq:hover .iq-ico{background:rgba(255,255,255,.17)}
.iq:active .iq-ico{transform:scale(.88)}
.iq-t{font-size:10px;color:#9aa3b6;font-weight:600}

.island-form{display:flex;gap:6px;margin-bottom:2px}
.island-form input{
  flex:1;min-width:0;height:38px;
  background:rgba(255,255,255,.1);
  border:0;border-radius:13px;
  color:#fff;padding:0 13px;font-size:12px;outline:none;font-family:inherit;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08);
  transition:.2s;
}
.island-form input::placeholder{color:#6d7590}
.island-form input:focus{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,138,0,.55)}
.island-form button{
  flex:none;height:38px;padding:0 17px;border:0;border-radius:13px;
  background:var(--island-btn);color:#fff;font-weight:800;font-size:12px;cursor:pointer;
  font-family:inherit;transition:transform .16s,filter .2s;
  box-shadow:0 6px 18px rgba(255,90,0,.3);
}
.island-form button:active{transform:scale(.94)}
.island-note{font-size:10px;color:#616a80;margin-top:9px;text-align:center;line-height:1.5}

/* 顶部留白（岛是 fixed 的） */
.island-spacer{height:50px}
@media (max-width:760px){ .island-spacer{height:48px} }

/* 展开时把内容顺着推下去，避免被岛压住 */
body.island-open{padding-top:var(--island-pad,0px);transition:padding-top .5s cubic-bezier(.32,1.26,.36,1)}