/* ── 暗夜 App 公共样式 ── */
:root {
  --bg: #000;
  --bg2: #0D0D1A;
  --card: #1C1C1E;
  --card2: #2C2C2E;
  --accent: #E8365D;
  --accent2: #FF6B35;
  --gold: #FFD700;
  --green: #30D158;
  --blue: #0A84FF;
  --t1: #FFFFFF;
  --t2: #8E8E93;
  --t3: #48484A;
  --border: #38383A;
  --nav-h: 83px;
  --r: 12px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: -apple-system, 'SF Pro Text', 'PingFang SC', sans-serif;
  overflow: hidden;
}

/* ── 手机外壳 ── */
.shell {
  width: 393px; height: 852px;
  background: #1a1a1a;
  border-radius: 54px; padding: 14px;
  box-shadow: 0 0 0 2px #333, 0 0 0 4px #222, 0 30px 80px rgba(0,0,0,.8), inset 0 0 0 1px #444;
  flex-shrink: 0;
}
.screen {
  width: 100%; height: 100%;
  background: var(--bg2);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
}

/* ── 动态岛 ── */
.di {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 34px; background: #000; border-radius: 20px; z-index: 999;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.di-cam { width:12px; height:12px; background:#1a1a1a; border-radius:50%; border:2px solid #2a2a2a; }
.di-dot { width:8px; height:8px; background:#0a0a0a; border-radius:50%; border:1px solid #1a1a1a; }

/* ── 状态栏 ── */
.status {
  height: 44px; display: flex; align-items: flex-end;
  padding: 0 24px 8px; justify-content: space-between;
  position: absolute; top:0; left:0; right:0; z-index:100; pointer-events:none;
}
.status time { font-size:15px; font-weight:600; color:var(--t1); }
.status-r { display:flex; align-items:center; gap:6px; }
.sig { display:flex; align-items:flex-end; gap:2px; }
.sig div { background:#fff; border-radius:1px; width:3px; }
.sig div:nth-child(1){height:4px} .sig div:nth-child(2){height:7px}
.sig div:nth-child(3){height:10px} .sig div:nth-child(4){height:13px}
.bat { width:25px; height:12px; border:1.5px solid #fff; border-radius:3px; position:relative; display:flex; align-items:center; padding:2px; }
.bat::after { content:''; position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:3px; height:6px; background:#fff; border-radius:0 2px 2px 0; }
.bat-fill { background:#30d158; height:100%; width:75%; border-radius:1px; }

/* ── 底部 Tab ── */
.tabbar {
  position: absolute; bottom:0; left:0; right:0;
  height: var(--nav-h);
  background: rgba(18,18,18,0.95);
  backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--border);
  display: flex; align-items: flex-start; padding-top: 10px; z-index: 200;
}
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; padding:4px 0; transition:opacity .15s; text-decoration:none; }
.tab:active { opacity:.6; }
.tab-ico { font-size:22px; transition:transform .2s; }
.tab.on .tab-ico { transform:scale(1.1); filter:drop-shadow(0 0 4px rgba(232,54,93,.6)); }
.tab-lbl { font-size:10px; font-weight:500; color:var(--t2); }
.tab.on .tab-lbl { color:var(--accent); }

/* ── Toast ── */
.toast {
  position:absolute; top:80px; left:50%; transform:translateX(-50%);
  background:rgba(28,28,30,.95); color:#fff; padding:10px 20px;
  border-radius:20px; font-size:13px; font-weight:500; z-index:999;
  backdrop-filter:blur(10px); box-shadow:0 4px 20px rgba(0,0,0,.4);
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .3s;
}
.toast.on { opacity:1; }

/* ── 滑入面板 ── */
.panel {
  position:absolute; inset:0; background:var(--bg2); z-index:500;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.32,.72,0,1);
}
.panel.open { transform:translateX(0); }

/* ── 底部弹窗 ── */
.sheet {
  position:absolute; bottom:-110%; left:0; right:0;
  background:var(--card); border-radius:24px 24px 0 0; z-index:400;
  transition:bottom .4s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -10px 40px rgba(0,0,0,.6);
}
.sheet.open { bottom:0; }
.sheet-hd { width:36px; height:4px; background:var(--t3); border-radius:2px; margin:14px auto 0; }

/* ── 遮罩 ── */
.mask { position:absolute; inset:0; background:rgba(0,0,0,.55); z-index:350; display:none; cursor:pointer; }
.mask.on { display:block; }

/* ── 通用按钮 ── */
.btn { height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; cursor:pointer; transition:transform .15s; gap:8px; }
.btn:active { transform:scale(.97); }
.btn-red { background:var(--accent); color:#fff; }
.btn-dark { background:var(--card2); color:var(--t1); }
.btn-white { background:#fff; color:#000; }
.btn-ghost { border:1.5px solid var(--border); color:var(--t1); }

/* ── 输入框 ── */
.field {
  width:100%; height:52px; background:var(--card); border-radius:14px;
  border:1.5px solid var(--border); padding:0 16px; font-size:16px;
  color:var(--t1); outline:none; transition:border-color .2s;
}
.field::placeholder { color:var(--t2); }
.field:focus { border-color:var(--accent); }

/* ── 分类Tab ── */
.cats { display:flex; overflow-x:auto; scrollbar-width:none; border-bottom:.5px solid var(--border); padding:0 16px; }
.cats::-webkit-scrollbar { display:none; }
.ct { padding:8px 14px; font-size:14px; color:var(--t2); cursor:pointer; white-space:nowrap; position:relative; flex-shrink:0; }
.ct.on { color:var(--t1); font-weight:600; }
.ct.on::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:20px; height:2px; background:var(--accent); border-radius:1px; }

/* ── 骨架屏 ── */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skel { background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:6px; }

/* ── 悬浮按钮 ── */
.fab { position:absolute; bottom:100px; right:16px; padding:10px 16px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-radius:24px; font-size:14px; font-weight:700; box-shadow:0 4px 15px rgba(232,54,93,.4); cursor:pointer; z-index:100; display:flex; align-items:center; gap:6px; }

/* ── 菜单列表 ── */
.menu-g { margin:0 16px 10px; background:var(--card); border-radius:var(--r); overflow:hidden; }
.menu-row { display:flex; align-items:center; padding:14px 16px; gap:12px; border-bottom:.5px solid var(--border); cursor:pointer; transition:background .15s; }
.menu-row:last-child { border-bottom:none; }
.menu-row:active { background:rgba(255,255,255,.04); }
.mi-ico { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.mi-lbl { flex:1; font-size:15px; color:var(--t1); }
.mi-badge { background:var(--accent); color:#fff; font-size:10px; padding:2px 6px; border-radius:8px; font-weight:600; }
.mi-arr { color:var(--t3); font-size:14px; }

/* ── 渐变背景 ── */
.grad-dark { background:linear-gradient(180deg,#120824 0%,var(--bg2) 100%); }
.grad-gold { background:linear-gradient(135deg,#1a0a00,#3d1a00,#1a0a00); }

/* ── 响应式 ── */
@media (max-width:430px) {
  body { align-items:flex-start; padding:0; }
  .shell { width:100vw; height:100dvh; border-radius:0; padding:0; box-shadow:none; }
  .screen { border-radius:0; }
  .di { display:none; }
}