:root{
  --bg: #0b0c12;
  --bg2:#07070c;
  --card: rgba(255,255,255,0.08);
  --card2: rgba(255,255,255,0.06);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --hairline: rgba(255,255,255,0.08);
  --radius: 12px;
  --dot: #f75555;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% 0%, #101c33 0%, transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
}

/* Top bar */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  height:46px;
  display:flex;
  align-items:center;
  background: rgba(11,12,18,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--hairline);
  padding: 0 14px;
}
.back-btn{
  width:32px;
  height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  cursor:pointer;
  user-select:none;
}
.back-btn:active{transform:scale(0.98)}
.title{
  flex:1;
  text-align:center;
  font-size:18px;
  font-weight:600;
  letter-spacing:0.2px;
  margin-right:32px; /* balance back button */
}

/* Page */
.page{
  width:100%;
  min-height:100vh;
  padding: 12px 16px 80px;
}

.list{margin-top:12px}
.item{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--card2));
  padding:16px;
  margin-bottom:16px;
  color: var(--text);
  font-size:14px;
  font-weight:500;
  line-height:20px;
  position:relative;
  box-shadow: 0 10px 28px rgba(0,0,0,0.38);
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
}
.item:active{transform:scale(0.995)}
.item img{
  width:23px;
  height:23px;
  flex:0 0 auto;
}

/* Right arrow */
.item::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid rgba(255,255,255,0.55);
  border-top:2px solid rgba(255,255,255,0.55);
  transform: translateY(-50%) rotate(45deg);
}

.dot{
  position:absolute;
  right:36px;
  top:50%;
  transform: translateY(-50%);
  width:10px;
  height:10px;
  border-radius:10px;
  background: var(--dot);
  box-shadow: 0 0 0 3px rgba(247,85,85,0.15);
}

.small-note{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}