* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: #f5f5f7;
  color: #1a1a1a;
}
#app { max-width: 520px; margin: 0 auto; min-height: 100vh; padding-bottom: 72px; }
.top-bar { padding: 10px 14px; display: flex; justify-content: flex-end; }
.coin-badge {
  background: linear-gradient(90deg, #4a4a55, #777786);
  border-radius: 22px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
}
.coin-badge button {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, #f08cff, #c757ff);
  color: #fff;
  padding: 6px 12px;
}
.content { padding: 0 14px; }
.tab-page { display: none; }
.tab-page.active { display: block; }
h2, h3 { margin: 10px 0; }
.recent-card {
  width: 160px;
  height: 220px;
  background: #111;
  color: #fff;
  border-radius: 8px;
  padding: 12px;
}
.recent-card .title { font-size: 24px; font-weight: 800; line-height: 1.15; margin-bottom: 8px; }
.recent-card .reward { color: #f4c55d; font-weight: 700; font-size: 18px; }
.muted { color: #666; font-size: 14px; }
.muted.light { color: #d7d7d7; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; }
.icon-btn { border: 0; background: transparent; font-size: 22px; }
.chips { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 12px; }
.chip {
  border: 0;
  background: #efeff4;
  border-radius: 14px;
  padding: 6px 12px;
  white-space: nowrap;
}
.chip-active { background: #fff8e1; color: #f3a500; border: 1px solid #ffd977; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drama-item {
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid #f0f0f0;
}
.primary-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(45deg, #7a5cff, #c84dff);
  padding: 12px;
  font-size: 15px;
}
.line-btn {
  width: 100%;
  border: 1px solid #c84dff;
  border-radius: 12px;
  color: #c84dff;
  background: #fff;
  padding: 10px;
  margin-top: 8px;
}
.chat-list { margin-top: 8px; display: grid; gap: 8px; }
.chat-item { background: #fff; border-radius: 12px; padding: 10px; }
.tab-page.dark {
  background: #111;
  color: #fff;
  border-radius: 12px;
  padding: 12px;
}
.author { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.video-placeholder {
  height: 280px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin: 10px 0;
  background: linear-gradient(180deg, #0f0f0f, #2b2b2b);
}
.invite-card {
  background: linear-gradient(45deg, #8e52ff, #ee76ff);
  color: #fff;
  border-radius: 16px;
  padding: 14px;
}
.wallet-card {
  margin-top: 8px;
  background: linear-gradient(45deg, #7a5cff, #c84dff);
  border-radius: 16px;
  color: #fff;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.balance-lg { font-size: 32px; font-weight: 800; }
.light-btn {
  border: 0; border-radius: 16px; height: 36px; align-self: flex-start;
  background: linear-gradient(90deg, #f08cff, #c757ff); color: #fff; padding: 0 14px;
}
.menu-list { margin-top: 12px; display: grid; gap: 8px; }
.menu-list button {
  border: 0; text-align: left; background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 15px;
}
.withdraw-panel { margin-top: 10px; background: #fff; border-radius: 12px; padding: 10px; }
.withdraw-panel input {
  width: 100%; border: 1px solid #ddd; border-radius: 10px; padding: 10px; margin-bottom: 8px;
}
.withdraw-list { margin-top: 8px; display: grid; gap: 6px; }
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid #eee; padding: 6px 4px;
}
.bottom-nav button {
  border: 0; background: transparent; padding: 8px 4px; color: #777;
}
.bottom-nav button.active { color: #d355ff; font-weight: 700; }
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none;
  align-items: center; justify-content: center; padding: 16px;
}
.modal.show { display: flex; }
.modal-card {
  width: 100%; max-width: 360px; background: #fff; border-radius: 16px; padding: 16px;
}
.check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }