:root{
  --bg:#0a0a0a;
  --panel:#0b0b0b;
  --bar:#141414;
  --bar2:#111111;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.10);
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --shadow2:0 10px 30px rgba(0,0,0,.45);
  --radius:28px;
  --cta-h:64px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 50% -10%, rgba(76,126,255,.18), rgba(0,0,0,0) 60%), linear-gradient(180deg, #0a0a0a 0%, #070707 100%);
  color:var(--text);
  overflow-x:hidden;
}

.stage{
  min-height:100%;
  padding:22px 16px calc(var(--cta-h) + 20px + var(--safe-b));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
}

.phone{
  width:min(420px, 100%);
}

.screen{
  width:100%;
  aspect-ratio:9/19.5;
  background:linear-gradient(180deg, #0b0b0b 0%, #050505 100%);
  border-radius:calc(var(--radius) + 2px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}

.statusbar{
  height:26px;
  padding:6px 12px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  font-size:13px;
  letter-spacing:.2px;
  color:rgba(255,255,255,.88);
}

.sb-right{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:rgba(255,255,255,.78);
}

.sb-battery{
  width:22px;
  height:10px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:3px;
  position:relative;
}

.sb-battery::after{
  content:"";
  position:absolute;
  right:-3px;
  top:2px;
  width:2px;
  height:6px;
  border-radius:1px;
  background:rgba(255,255,255,.65);
}

.sb-battery-fill{
  display:block;
  height:100%;
  width:49%;
  background:linear-gradient(90deg, #76ff89, #20d464);
  border-radius:2px;
}

.topbar{
  height:54px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:linear-gradient(180deg, rgba(24,24,24,.98) 0%, rgba(12,12,12,.92) 100%);
}

.topbar-title{
  font-weight:650;
  font-size:18px;
  letter-spacing:.8px;
}

.topbar-action{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:0;
  color:rgba(255,255,255,.88);
  font-size:14px;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}

.topbar-action:active{background:rgba(255,255,255,.08)}

.apps{
  height:calc(100% - 26px - 54px - 64px);
  padding:18px 10px 8px;
  display:flex;
}

.apps-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px 10px;
  align-content:start;
}

.app{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  user-select:none;
}

.app-btn{
  width:62px;
  height:62px;
  border-radius:16px;
  border:0;
  background:rgba(255,255,255,.06);
  box-shadow:0 10px 18px rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
}

.app-btn svg{
  width:34px;
  height:34px;
  position:relative;
  z-index:1;
}

.app-btn img{
  width:40px;
  height:40px;
  object-fit:contain;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.28));
}

.app-btn::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background:radial-gradient(closest-side, rgba(255,255,255,.22), rgba(255,255,255,0));
  transform:translate(-18%, -10%) rotate(12deg);
  opacity:.35;
}

.app-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity:.6;
}

.app-btn > span{
  position:relative;
  z-index:1;
}

.app-btn:active{transform:scale(.96)}

.app-label{
  max-width:74px;
  font-size:13.5px;
  line-height:1.1;
  text-align:center;
  color:rgba(255,255,255,.85);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.badge{
  position:absolute;
  top:6px;
  right:7px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ff3b30;
  box-shadow:0 0 0 2px rgba(0,0,0,.25);
  z-index:3;
}

.tabbar{
  height:64px;
  background:linear-gradient(180deg, rgba(12,12,12,.96), rgba(10,10,10,.98));
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  padding:8px 6px 10px;
}

.tab{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.70);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  padding:6px 4px 0;
  cursor:pointer;
}

.tab-ico{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
}

.tab-ico svg{width:22px;height:22px}

.tab-text{font-size:12px;line-height:1}

.tab.is-active{color:#4c7eff}
.tab:active{background:rgba(255,255,255,.06);border-radius:12px}

.cta{
  position:fixed;
  left:16px;
  right:16px;
  bottom:calc(12px + var(--safe-b));
  height:var(--cta-h);
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg, #2f6bff 0%, #4cc3ff 55%, #2f6bff 100%);
  box-shadow:0 14px 34px rgba(46,121,255,.35), 0 10px 22px rgba(0,0,0,.35);
  color:#071427;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  cursor:pointer;
}

.cta-title{font-weight:800;letter-spacing:1px;font-size:18px;color:#061021}
.cta-sub{font-size:12px;color:rgba(6,16,33,.75)}

.cta:active{transform:translateY(1px) scale(.99)}

.toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--cta-h) + 26px + var(--safe-b));
  transform:translateX(-50%);
  min-width:min(320px, calc(100% - 32px));
  max-width:420px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(18,18,18,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow2);
  color:rgba(255,255,255,.88);
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

.toast.is-show{
  opacity:1;
  transform:translateX(-50%) translateY(-6px);
}

.sheet{
  position:fixed;
  inset:0;
  display:none;
}

.sheet.is-open{display:block}

.sheet-mask{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
}

.sheet-card{
  position:absolute;
  left:16px;
  right:16px;
  bottom:calc(16px + var(--safe-b));
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(16,16,16,.95);
  box-shadow:var(--shadow);
  padding:12px 14px 14px;
  transform:translateY(16px);
  opacity:0;
  transition:transform .2s ease, opacity .2s ease;
}

.sheet.is-open .sheet-card{transform:translateY(0);opacity:1}

.sheet-handle{
  width:44px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  margin:4px auto 10px;
}

.sheet-title{
  font-weight:700;
  letter-spacing:.6px;
  text-align:center;
  margin-bottom:10px;
}

.sheet-input input{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  padding:0 12px;
  font-size:14px;
  outline:none;
}

.sheet-input input:focus{border-color:rgba(76,126,255,.75);box-shadow:0 0 0 4px rgba(76,126,255,.16)}

.sheet-hint{
  margin-top:10px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  text-align:center;
}

.sheet-actions{
  margin-top:12px;
  display:flex;
  justify-content:center;
}

.sheet-btn{
  height:42px;
  min-width:120px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.90);
  cursor:pointer;
}

.sheet-btn:active{transform:scale(.98)}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width:360px){
  .apps{padding:16px 8px 8px}
  .apps-grid{gap:16px 8px}
  .app-btn{width:56px;height:56px}
  .app-label{max-width:70px;font-size:12px}
}

@media (prefers-reduced-motion: reduce){
  .toast, .sheet-card{transition:none}
  .cta:active, .app-btn:active, .sheet-btn:active{transform:none}
}