:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #09090b;
  color: #fafafa;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: #000;
}

button {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  padding-bottom: 96px;
}

body.admin-mode {
  min-width: 1024px;
  color: #111827;
  background: #f3f5f8;
}

body.admin-mode .app-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  border: 0;
  padding-bottom: 0;
}

body.admin-mode .page-tabs,
body.admin-mode .topbar {
  display: none;
}

body.shopping-detail-mode .app-shell {
  padding-bottom: 0;
}

body.shopping-detail-mode .page-tabs {
  display: none;
}

body.shopping-shop-mode .app-shell {
  padding-bottom: 0;
}

body.shopping-shop-mode .page-tabs {
  display: none;
}

body.shopping-checkout-mode .app-shell {
  padding-bottom: 0;
}

body.shopping-checkout-mode .page-tabs {
  display: none;
}

body.shopping-coupon-mode .app-shell {
  padding-bottom: 0;
}

body.shopping-coupon-mode .page-tabs {
  display: none;
}

body.player-open-mode #home-root,
body.player-open-mode .page-tabs {
  visibility: hidden;
  pointer-events: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  backdrop-filter: blur(18px);
  background: rgba(9, 9, 11, 0.74);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar {
  display: none;
}

.page-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 2px 10px max(4px, env(safe-area-inset-bottom));
  background: rgba(8, 8, 10, 0.94);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(22px);
}

.page-tab {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 40px;
  border: 0;
  padding: 0;
  color: #8f9097;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}

.tab-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-tab.active {
  color: #ff365f;
}

.tab-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.58);
}

.tab-icon svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-tab.active .tab-icon,
.page-tab.active .tab-label {
  color: #ff365f;
}

.page-tab.active .tab-icon {
  transform: translateY(-1px);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand strong {
  font-size: 20px;
  letter-spacing: 0;
}

.brand span {
  color: #a1a1aa;
  font-size: 12px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-pill,
.search-pill {
  border: 0;
  min-height: 36px;
  border-radius: 999px;
  padding: 0 14px;
  color: #fafafa;
  background: rgba(255, 255, 255, 0.1);
}

.admin-pill {
  background: #ff365f;
}

.ops-pill {
  background: #10bfa6;
}

.search-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  overflow-y: auto;
  padding: max(34px, env(safe-area-inset-top)) 16px 32px;
  color: #111;
  background: #fff;
}

.search-panel.open {
  display: block;
}

.search-page {
  max-width: 720px;
  margin: 0 auto;
}

.search-top-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 54px;
}

.search-back-button,
.search-submit-button,
.search-icon-button {
  border: 0;
  background: transparent;
}

.search-back-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 44px;
  color: #050505;
}

.search-input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 54px;
  border-radius: 14px;
  padding: 0 18px;
  color: #a8a8ad;
  background: #f3f3f4;
}

.search-input-wrap input {
  width: 100%;
  border: 0;
  color: #111;
  background: transparent;
  outline: none;
  font-size: 22px;
  letter-spacing: 0;
}

.search-input-wrap input::placeholder {
  color: #b8b8bd;
}

.search-submit-button {
  min-height: 46px;
  padding: 0 2px;
  color: #111;
  font-size: 24px;
  font-weight: 500;
}

.search-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: currentColor;
}

.search-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-shortcut-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 32px;
}

.search-shortcut-row button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: 18px;
  padding: 0 12px;
  color: #18181b;
  background: #f5f5f5;
  font-size: 22px;
  font-weight: 500;
}

.search-shortcut-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #13cbd0, #0bb8be);
}

.search-shortcut-row button:nth-child(2) .search-shortcut-icon,
.search-shortcut-row button:nth-child(4) .search-shortcut-icon {
  background: linear-gradient(145deg, #ffad4d, #ff7a1a);
}

.search-shortcut-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-discovery,
.search-section {
  display: grid;
  gap: 22px;
}

.search-results[hidden],
.search-discovery[hidden] {
  display: none;
}

.search-section {
  margin-bottom: 36px;
}

.search-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.search-section-header h2 {
  margin: 0;
  color: #050505;
  font-size: 29px;
  font-weight: 900;
  letter-spacing: 0;
}

.search-icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #111;
}

.search-history-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 18px;
}

.search-history-grid button {
  overflow: hidden;
  border: 0;
  padding: 0;
  color: #18181b;
  background: transparent;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 23px;
}

.search-fallback-note {
  margin: 0 0 12px;
  color: #7a7a82;
  font-size: 15px;
  font-weight: 700;
}

.search-guess-grid,
.search-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.search-poster-card,
.search-rank-item {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 0;
  padding: 0;
  color: #111;
  background: transparent;
  text-align: left;
}

.search-poster-art,
.search-rank-poster {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 180px;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px;
  color: #fff;
  background:
    linear-gradient(180deg, transparent 22%, rgba(0, 0, 0, 0.74) 100%),
    var(--poster-image, linear-gradient(145deg, var(--poster-a), var(--poster-b)));
  background-size: cover;
  background-position: center;
}

.search-poster-art {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 180px;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px;
  color: #fff;
  background:
    linear-gradient(180deg, transparent 22%, rgba(0, 0, 0, 0.74) 100%),
    linear-gradient(145deg, var(--poster-a), var(--poster-b));
}

.search-poster-art strong,
.search-rank-poster strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.14;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.search-poster-art small,
.search-rank-poster small {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
}

.search-poster-card > b,
.search-rank-item > strong {
  overflow: hidden;
  color: #111;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 21px;
  font-weight: 500;
}

.search-poster-card > em,
.search-rank-item > em {
  overflow: hidden;
  color: #a1a1aa;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-style: normal;
}

.search-rank-card {
  overflow: hidden;
  margin-inline: -16px;
  border-radius: 24px 24px 0 0;
  padding: 28px 16px 18px;
  background:
    radial-gradient(circle at 76% 0%, rgba(255, 255, 255, 0.82), transparent 34%),
    radial-gradient(circle at 100% 10%, rgba(130, 196, 255, 0.22), transparent 42%),
    #eaf6ff;
}

.search-rank-tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 22px;
}

.search-rank-tabs strong {
  color: #111;
  font-size: 29px;
  font-weight: 900;
  letter-spacing: 0;
}

.search-rank-tabs strong span {
  color: #1786d8;
}

.search-rank-poster i,
.search-rank-poster b {
  position: absolute;
  top: 0;
}

.search-rank-poster i {
  left: 0;
  min-width: 32px;
  border-radius: 12px 0 12px 0;
  padding: 5px 9px;
  color: #fff;
  background: linear-gradient(145deg, #ffcf35, #ff9a22);
  font-size: 19px;
  font-style: normal;
  font-weight: 900;
}

.search-rank-item:nth-child(2) .search-rank-poster i {
  background: linear-gradient(145deg, #22e2b9, #08a98e);
}

.search-rank-item:nth-child(3) .search-rank-poster i {
  background: linear-gradient(145deg, #ff8a28, #ff5a1f);
}

.search-rank-poster b {
  right: 8px;
  border-radius: 7px;
  padding: 4px 8px;
  color: #fff;
  background: #13c995;
  font-size: 13px;
}

.search-shortcut-panel {
  display: grid;
  gap: 18px;
}

.search-mode-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.search-mode-header h2,
.search-mode-header span {
  display: block;
  margin: 0;
  letter-spacing: 0;
}

.search-mode-header h2 {
  color: #050505;
  font-size: 28px;
  font-weight: 800;
}

.search-mode-header span {
  margin-top: 5px;
  color: #9ca3af;
  font-size: 15px;
}

.search-mode-header button {
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  color: #18181b;
  background: #f2f2f3;
  font-size: 15px;
  font-weight: 700;
}

.search-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.search-actor-list {
  display: grid;
  gap: 12px;
}

.search-actor-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 14px;
  background: #f6f6f7;
}

.search-actor-card > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #ffad4d, #ff7a1a);
  font-weight: 900;
}

.search-actor-card strong,
.search-actor-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-actor-card strong {
  color: #111;
  font-size: 20px;
}

.search-actor-card em {
  margin-top: 4px;
  color: #8b8b92;
  font-size: 14px;
  font-style: normal;
}

.search-actor-dramas {
  display: grid;
  gap: 7px;
}

.search-actor-dramas button {
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  color: #18181b;
  background: #fff;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.home-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 78;
  background: rgba(0, 0, 0, 0.64);
  opacity: 0;
  transition: opacity 180ms ease;
}

.home-menu-scrim.open {
  opacity: 1;
}

.home-menu-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 79;
  width: min(76vw, 330px);
  overflow-y: auto;
  padding: max(30px, env(safe-area-inset-top)) 12px 22px;
  color: #18181b;
  background: #f7f7f5;
  box-shadow: 28px 0 60px rgba(0, 0, 0, 0.28);
  transform: translateX(-102%);
  transition: transform 220ms cubic-bezier(0.2, 0.84, 0.32, 1);
}

.home-menu-drawer.open {
  transform: translateX(0);
}

.home-menu-loading {
  padding: 32px 6px;
  color: #52525b;
  font-weight: 800;
}

.home-menu-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 24px;
}

.home-menu-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe2eb, #ffb6cb);
  box-shadow: inset 0 0 0 1px rgba(255, 54, 95, 0.12);
  font-size: 28px;
}

.home-menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-menu-profile strong {
  display: block;
  color: #111;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
}

.home-menu-profile span {
  display: block;
  margin-top: 5px;
  color: #71717a;
  font-size: 12px;
}

.home-menu-card {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(15, 15, 20, 0.04);
}

.home-menu-card h2,
.home-menu-section-title h2 {
  margin: 0;
  color: #18181b;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
}

.home-menu-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-menu-section-title button {
  border: 0;
  padding: 0;
  color: #a1a1aa;
  background: transparent;
  font-size: 14px;
  font: inherit;
}

.home-menu-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #27272a;
}

.home-menu-message strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-menu-message time {
  color: #a1a1aa;
  font-size: 13px;
}

.home-menu-bell {
  color: #10c7d4;
  font-size: 26px;
  line-height: 1;
}

.home-menu-recent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-menu-recent-item,
.home-menu-game,
.home-menu-action {
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
}

.home-menu-recent-item {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.home-menu-poster {
  display: grid;
  align-content: end;
  min-height: 96px;
  overflow: hidden;
  border-radius: 12px;
  padding: 8px;
  color: #fff;
  background:
    linear-gradient(180deg, transparent 24%, rgba(0, 0, 0, 0.68) 100%),
    linear-gradient(145deg, var(--poster-a), var(--poster-b));
}

.home-menu-poster strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.12;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-menu-recent-item b,
.home-menu-recent-item small {
  overflow: hidden;
  color: #18181b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-menu-recent-item b {
  font-size: 14px;
  font-weight: 500;
}

.home-menu-recent-item small {
  color: #8b8b92;
  font-size: 13px;
}

.home-menu-game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.home-menu-game {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

.home-menu-game span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(145deg, #e7f7ff, #b8ecff);
  font-size: 29px;
}

.home-menu-game strong {
  max-width: 100%;
  overflow: hidden;
  color: #27272a;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-menu-actions {
  gap: 4px;
}

.home-menu-action {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  color: #18181b;
}

.home-menu-action strong {
  font-size: 18px;
  font-weight: 500;
}

.home-menu-action > span:last-child {
  color: #a1a1aa;
  font-size: 24px;
}

.home-menu-action-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #111;
}

.home-menu-action-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  place-items: end center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.48);
}

.share-panel.open {
  display: grid;
}

.share-card {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(520px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 18px;
  color: #fff;
  background: rgba(18, 18, 22, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.share-card h2,
.share-card p {
  margin: 0;
}

.share-card p {
  color: #d4d4d8;
  font-size: 13px;
  line-height: 1.45;
}

.share-card input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.share-card button {
  border: 0;
  min-height: 42px;
  border-radius: 999px;
  color: #fff;
  background: #ff365f;
}

.share-close {
  position: absolute;
  top: 12px;
  right: 12px;
  min-height: 32px !important;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.12) !important;
}

.comment-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.62));
  transition: opacity 160ms ease;
}

.comment-panel.open {
  opacity: 1;
  pointer-events: auto;
}

.comment-card {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(560px, 100%);
  max-height: min(70vh, 620px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px 8px 0 0;
  padding: 16px;
  color: #fff;
  background: rgba(16, 16, 20, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px);
}

.comment-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  min-height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.comment-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
  font: inherit;
}

.comment-notice span {
  border-radius: 6px;
  padding: 2px 7px;
  color: #18d0a4;
  background: rgba(16, 213, 160, 0.14);
  font-size: 12px;
  font-weight: 900;
}

.comment-notice strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.comment-notice b {
  color: rgba(255, 255, 255, 0.52);
  font-size: 20px;
}

.comment-list {
  display: grid;
  gap: 12px;
  overflow-y: auto;
  min-height: 180px;
  max-height: 42vh;
  padding-right: 4px;
}

.comment-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 5px;
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.comment-item:focus-visible {
  outline: 2px solid rgba(255, 177, 92, 0.72);
  outline-offset: 4px;
  border-radius: 8px;
}

.comment-avatar,
.landscape-comment-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #9369ff, #18c7ba);
  font-weight: 900;
}

.comment-avatar {
  width: 34px;
  height: 34px;
  font-size: 15px;
}

.comment-avatar.has-image img,
.landscape-comment-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-avatar-tone-0 {
  background: linear-gradient(135deg, #9369ff, #18c7ba);
}

.comment-avatar-tone-1 {
  background: linear-gradient(135deg, #ff4d73, #ffb15c);
}

.comment-avatar-tone-2 {
  background: linear-gradient(135deg, #2f80ed, #34d399);
}

.comment-avatar-tone-3 {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.comment-avatar-tone-4 {
  background: linear-gradient(135deg, #10b981, #22d3ee);
}

.comment-avatar-tone-5 {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.comment-item-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.comment-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.comment-item strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-source,
.comment-actions,
.comment-empty {
  color: #a1a1aa;
  font-size: 12px;
}

.comment-time-badge {
  border-radius: 999px;
  padding: 2px 7px;
  color: #ffb15c !important;
  background: rgba(255, 122, 26, 0.14);
  font-weight: 800;
}

.comment-item p {
  margin: 0;
  color: #f4f4f5;
  font-size: 15px;
  line-height: 1.45;
}

.comment-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 800;
}

.comment-actions [role="button"] {
  cursor: pointer;
}

.comment-actions [data-comment-like].liked {
  color: #ff365f;
}

.comment-actions [aria-disabled="true"],
.landscape-comment-inline-action[aria-disabled="true"],
.landscape-comment-like.pending {
  opacity: 0.45;
  pointer-events: none;
}

.comment-replies {
  display: grid;
  gap: 5px;
  margin-top: 3px;
  border-radius: 8px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  font-size: 12px;
  line-height: 1.35;
}

.comment-replies strong {
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.9);
}

.comment-replies button {
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.48);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.comment-replies .comment-replies-toggle {
  justify-self: start;
  color: rgba(255, 255, 255, 0.62);
}

.comment-reply-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 800;
}

.comment-reply-anchor {
  min-height: 0;
}

.comment-reply-target button {
  border: 0;
  color: #ffb15c;
  background: transparent;
  font: inherit;
}

.comment-form {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.comment-emoji-button {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.1) !important;
}

.comment-emoji-button .home-icon {
  width: 24px;
  height: 24px;
}

.comment-input {
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.comment-form button {
  border: 0;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 16px;
  color: #fff;
  background: #ff365f;
  font-weight: 800;
}

.comment-form button:disabled,
.landscape-comment-composer button:disabled {
  opacity: 0.55;
}

.page-view {
  display: none;
}

.page-view.active {
  display: block;
}

.home-view {
  min-height: calc(100vh - 68px);
}

.library-panel,
.catalog-panel,
.metrics-panel,
.profile-panel,
.placeholder-panel,
.admin-panel,
.ops-admin-panel {
  min-height: calc(100vh - 128px);
  padding: 20px 18px 96px;
  background:
    radial-gradient(circle at top right, rgba(255, 54, 95, 0.18), transparent 24rem),
    rgba(9, 9, 11, 0.97);
}

.profile-panel {
  min-height: 100vh;
  padding: 0 0 92px;
  color: #111;
  background:
    radial-gradient(circle at 14% -4%, rgba(183, 253, 232, 0.9), transparent 14rem),
    radial-gradient(circle at 92% 0%, rgba(249, 247, 113, 0.72), transparent 13rem),
    linear-gradient(#f8fbf8 0 32%, #f5f5f5 32% 100%);
}

.profile-content {
  min-height: 100vh;
}

.profile-hero {
  position: relative;
  display: grid;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 14px 14px;
}

.profile-top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.profile-icon-button,
.profile-quick-action,
.profile-history-tabs button,
.profile-filter-row button,
.profile-menu-item,
.profile-drama-card {
  border: 0;
  background: transparent;
  font: inherit;
}

.profile-icon-button {
  width: 32px;
  height: 32px;
  color: #111;
}

.profile-svg,
.profile-svg svg {
  display: inline-grid;
  width: 100%;
  height: 100%;
}

.profile-svg svg {
  fill: currentColor;
}

.profile-user-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 13px;
  color: #ff3e66;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, #fff, #ffd7e2 72%);
}

.profile-avatar.has-image {
  overflow: hidden;
  padding: 0;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-user-row h2,
.profile-user-name {
  margin: 0 0 6px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: 21px;
  line-height: 1;
  font-weight: 900;
  text-align: left;
}

.profile-user-row p {
  margin: 0;
  display: flex;
  gap: 12px;
  color: rgba(0, 0, 0, 0.46);
  font-size: 12px;
}

.profile-user-row b {
  color: #111;
  font-size: 15px;
}

.profile-quick-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.profile-quick-action {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #111;
}

.profile-quick-action > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 7px;
  color: #fff;
  border-radius: 12px;
  background: #14cdbf;
}

.profile-quick-action:nth-child(1) > span { background: #ffd414; color: #fff; border-radius: 50%; }
.profile-quick-action:nth-child(3) > span,
.profile-quick-action:nth-child(5) > span { background: #ff7a12; }

.profile-quick-action i {
  position: absolute;
  top: -8px;
  right: 2px;
  padding: 2px 7px;
  color: #fff;
  background: #ff8b19;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.profile-quick-action b {
  font-size: 13px;
  font-weight: 500;
}

.profile-library-card {
  display: grid;
  gap: 14px;
  margin-top: -8px;
  padding: 18px 14px 24px;
  border-radius: 24px 24px 0 0;
  background: #fff;
}

.profile-history-tabs,
.profile-filter-row {
  display: grid;
  align-items: center;
}

.profile-history-tabs {
  grid-template-columns: repeat(4, auto) 1fr;
  gap: 20px;
}

.profile-history-tabs button {
  color: rgba(0, 0, 0, 0.38);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}

.profile-history-tabs button.active {
  color: #111;
  font-weight: 900;
}

.profile-search-mini {
  justify-self: end;
  width: 36px;
  height: 36px;
  color: rgba(0, 0, 0, 0.46);
}

.profile-search-row {
  display: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  color: rgba(0, 0, 0, 0.34);
  background: #f5f5f5;
}

.profile-search-row.open {
  display: flex;
}

.profile-search-row svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.profile-search-row input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 15px;
}

.profile-filter-row {
  grid-template-columns: auto auto auto 1fr auto auto;
  gap: 8px;
}

.profile-filter-row button {
  padding: 8px 13px;
  color: rgba(0, 0, 0, 0.46);
  border-radius: 12px;
  background: #f4f4f4;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.profile-filter-row button.active {
  color: #00a998;
  background: #d8faf4;
}

.profile-filter-row button:nth-last-child(-n + 2) {
  padding-inline: 7px;
  color: #111;
  background: transparent;
}

.profile-filter-row button:nth-last-child(-n + 2).active {
  color: #00a998;
}

.profile-drama-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 12px;
}

.profile-drama-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: #111;
  text-align: left;
}

.profile-drama-poster {
  position: relative;
  display: grid;
  align-items: end;
  aspect-ratio: 0.72;
  overflow: hidden;
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.76), transparent 48%),
    var(--poster-image),
    linear-gradient(145deg, var(--poster-a), var(--poster-b));
  background-size: cover;
  background-position: center;
}

.profile-drama-poster i {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 6px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.42);
  font-size: 12px;
  font-style: normal;
}

.profile-drama-poster strong {
  font-size: 13px;
  line-height: 1.15;
}

.profile-card-check {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.34);
  font-size: 13px;
  font-weight: 900;
}

.profile-library-card.editing .profile-card-check {
  display: grid;
}

.profile-library-card.editing .profile-drama-card.selected .profile-card-check {
  border-color: #11cab9;
  background: #11cab9;
}

.profile-selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17, 202, 185, 0.1);
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
}

.profile-selection-toolbar button {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: #11cab9;
  color: #fff;
  font-weight: 900;
}

.profile-selection-toolbar button:disabled {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.34);
}

.profile-drama-card b,
.profile-drama-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-drama-card b {
  font-size: 14px;
  font-weight: 500;
}

.profile-drama-card em {
  color: rgba(0, 0, 0, 0.42);
  font-size: 12px;
  font-style: normal;
}

.profile-empty {
  grid-column: 1 / -1;
  margin: 4px 0 18px;
  color: rgba(0, 0, 0, 0.42);
  font-size: 15px;
  font-weight: 600;
}

.profile-notice {
  position: fixed;
  left: 50%;
  bottom: 106px;
  z-index: 96;
  margin: 0;
  padding: 10px 14px;
  transform: translateX(-50%);
  color: #fff;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.profile-panel.profile-dark {
  color: #f7f8fb;
  background:
    radial-gradient(circle at 16% -6%, rgba(22, 205, 188, 0.24), transparent 15rem),
    radial-gradient(circle at 92% 0%, rgba(255, 122, 24, 0.18), transparent 13rem),
    linear-gradient(#0e1118 0 32%, #111318 32% 100%);
}

.profile-panel.profile-dark .profile-icon-button,
.profile-panel.profile-dark .profile-quick-action,
.profile-panel.profile-dark .profile-user-row h2,
.profile-panel.profile-dark .profile-user-row b,
.profile-panel.profile-dark .profile-drama-card,
.profile-panel.profile-dark .profile-filter-row button:nth-last-child(-n + 2) {
  color: #f7f8fb;
}

.profile-panel.profile-dark .profile-user-row p,
.profile-panel.profile-dark .profile-drama-card em,
.profile-panel.profile-dark .profile-empty,
.profile-panel.profile-dark .profile-history-tabs button,
.profile-panel.profile-dark .profile-search-mini {
  color: rgba(247, 248, 251, 0.48);
}

.profile-panel.profile-dark .profile-history-tabs button.active {
  color: #fff;
}

.profile-panel.profile-dark .profile-library-card {
  background: #171b24;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.18);
}

.profile-panel.profile-dark .profile-search-row,
.profile-panel.profile-dark .profile-filter-row button {
  color: rgba(247, 248, 251, 0.54);
  background: rgba(255, 255, 255, 0.08);
}

.profile-panel.profile-dark .profile-search-row input {
  color: #fff;
}

.profile-panel.profile-dark .profile-filter-row button.active {
  color: #46f1d8;
  background: rgba(70, 241, 216, 0.16);
}

body.profile-night-mode .catalog-panel,
body.profile-night-mode .shopping-panel,
body.profile-night-mode .game-panel,
body.profile-night-mode .library-panel {
  color: #f8fafc;
  background:
    radial-gradient(circle at 10% 0%, rgba(92, 242, 214, 0.16), transparent 15rem),
    radial-gradient(circle at 92% 4%, rgba(255, 122, 24, 0.12), transparent 14rem),
    #08090c;
}

body.profile-night-mode .page-tabs {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(6, 7, 10, 0.96);
}

body.profile-night-mode .catalog-search-entry,
body.profile-night-mode .catalog-tool-tabs button,
body.profile-night-mode .catalog-rank-tabs button,
body.profile-night-mode .catalog-rank-row,
body.profile-night-mode .catalog-drama-card,
body.profile-night-mode .shopping-hero,
body.profile-night-mode .shopping-search-shell,
body.profile-night-mode .shopping-quick-card,
body.profile-night-mode .shopping-detail-card,
body.profile-night-mode .shopping-service-card,
body.profile-night-mode .shopping-content-card,
body.profile-night-mode .shopping-action-bar,
body.profile-night-mode .shopping-confirm-card,
body.profile-night-mode .shopping-payment-card button,
body.profile-night-mode .shopping-toolbar label,
body.profile-night-mode .shopping-toolbar button,
body.profile-night-mode .shopping-category-rail button,
body.profile-night-mode .shopping-sort-row button,
body.profile-night-mode .shopping-product-card,
body.profile-night-mode .shopping-loading-state,
body.profile-night-mode .shopping-empty-state,
body.profile-night-mode .shopping-error-state,
body.profile-night-mode .game-hero,
body.profile-night-mode .game-checkin-card,
body.profile-night-mode .game-task-card,
body.profile-night-mode .library-section,
body.profile-night-mode .library-card,
body.profile-night-mode .feed-card,
body.profile-night-mode .drama-card {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body.profile-night-mode .catalog-tool-tabs button.active,
body.profile-night-mode .catalog-rank-tabs button.active,
body.profile-night-mode .shopping-category-rail button.active,
body.profile-night-mode .shopping-sort-row button.active {
  color: #111;
  background: #5cf2d6;
}

body.profile-night-mode .catalog-search-entry span,
body.profile-night-mode .catalog-pull-refresh,
body.profile-night-mode .catalog-rank-meta,
body.profile-night-mode .catalog-rank-desc,
body.profile-night-mode .catalog-drama-tags i,
body.profile-night-mode .shopping-hero p,
body.profile-night-mode .shopping-search-shell input::placeholder,
body.profile-night-mode .shopping-quick-action strong,
body.profile-night-mode .shopping-goods-subtitle,
body.profile-night-mode .shopping-stats-row,
body.profile-night-mode .shopping-service-card .label,
body.profile-night-mode .shopping-rich-content,
body.profile-night-mode .shopping-price-row .orig-price,
body.profile-night-mode .shopping-product-card p,
body.profile-night-mode .shopping-product-meta,
body.profile-night-mode .shopping-confirm-card p,
body.profile-night-mode .shopping-confirm-card span,
body.profile-night-mode .shopping-confirm-item small,
body.profile-night-mode .shopping-checkout-group header span,
body.profile-night-mode .shopping-quote-row span,
body.profile-night-mode .shopping-quote-hint,
body.profile-night-mode .shopping-payment-card button b,
body.profile-night-mode .game-hero p,
body.profile-night-mode .game-task-card p,
body.profile-night-mode .library-header p {
  color: rgba(248, 250, 252, 0.62);
}

body.profile-night-mode .shopping-search-shell button,
body.profile-night-mode .shopping-cart-icon-button b,
body.profile-night-mode .shopping-quick-action b,
body.profile-night-mode .shopping-primary-action,
body.profile-night-mode .shopping-cart-footer button,
body.profile-night-mode .shopping-error-state button,
body.profile-night-mode .game-checkin-card,
body.profile-night-mode .game-task-card button {
  color: #111;
  background: #5cf2d6;
}

body.profile-night-mode .shopping-cart-icon-button,
body.profile-night-mode .shopping-quick-action span,
body.profile-night-mode .shopping-search-shell input,
body.profile-night-mode .shopping-detail-page,
body.profile-night-mode .shopping-coupon-page,
body.profile-night-mode .shopping-goods-title,
body.profile-night-mode .shopping-content-title,
body.profile-night-mode .shopping-service-card strong,
body.profile-night-mode .shopping-service-card b,
body.profile-night-mode .shopping-action-bar button,
body.profile-night-mode .shopping-checkout-page,
body.profile-night-mode .shopping-confirm-topbar button,
body.profile-night-mode .shopping-checkout-group header strong,
body.profile-night-mode .shopping-quote-row b,
body.profile-night-mode .shopping-points-toggle,
body.profile-night-mode .shopping-points-toggle span,
body.profile-night-mode .shopping-payment-card button span {
  color: #f8fafc;
}

body.profile-night-mode .shopping-points-toggle {
  background: rgba(255, 255, 255, 0.08);
}

body.profile-night-mode .shopping-points-toggle b {
  color: rgba(248, 250, 252, 0.62);
}

body.profile-night-mode .shopping-detail-page {
  background:
    radial-gradient(circle at 10% 0%, rgba(92, 242, 214, 0.14), transparent 15rem),
    radial-gradient(circle at 92% 4%, rgba(255, 122, 24, 0.1), transparent 14rem),
    #08090c;
}

body.profile-night-mode .shopping-detail-card.glass-overlap {
  border-color: rgba(255, 255, 255, 0.1);
}

body.profile-night-mode .shopping-content-title span {
  background: rgba(255, 255, 255, 0.1);
}

body.profile-night-mode .shopping-action-bar {
  background: rgba(8, 9, 12, 0.96);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.28);
}

body.profile-night-mode .shopping-product-actions button[data-shopping-favorite] {
  color: #f8fafc;
  border-color: rgba(255, 54, 95, 0.6);
  background: transparent;
}

body.profile-night-mode .shopping-product-actions button[data-shopping-favorite][aria-pressed="true"] {
  color: #111;
  background: linear-gradient(135deg, #ff5a65, #f28a1b);
}

body.profile-night-mode .shopping-product-actions button[data-shopping-add-cart] {
  border: 1px solid rgba(255, 54, 95, 0.5);
  background: linear-gradient(135deg, #ff5a65, #f28a1b);
}

body.profile-night-mode .shopping-shop-text button[data-shopping-shop-favorite][aria-pressed="true"] {
  color: #111;
  background: #fff;
}

body.profile-night-mode .shopping-action-bar button[data-shopping-favorite] {
  color: #f8fafc;
  border-color: rgba(248, 250, 252, 0.32);
  background: rgba(248, 250, 252, 0.1);
}

body.profile-night-mode .shopping-action-bar button[data-shopping-favorite][aria-pressed="true"] {
  color: #ff365f;
  border-color: rgba(255, 54, 95, 0.5);
  background: #fff0f5;
}

body.profile-night-mode .shopping-checkout-page {
  background: #08090c;
}

body.profile-night-mode .shopping-coupon-page {
  background:
    radial-gradient(circle at 10% 0%, rgba(92, 242, 214, 0.14), transparent 15rem),
    radial-gradient(circle at 92% 4%, rgba(255, 122, 24, 0.1), transparent 14rem),
    #08090c;
}

body.profile-night-mode .shopping-coupon-card {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body.profile-night-mode .shopping-coupon-card p,
body.profile-night-mode .shopping-coupon-card small {
  color: rgba(248, 250, 252, 0.58);
}

body.profile-night-mode .shopping-confirm-footer {
  color: #f8fafc;
  background: rgba(8, 9, 12, 0.96);
}

.profile-panel.profile-font-small .profile-user-row h2 { font-size: 20px; }
.profile-panel.profile-font-small .profile-history-tabs button { font-size: 17px; }
.profile-panel.profile-font-small .profile-filter-row button,
.profile-panel.profile-font-small .profile-quick-action b,
.profile-panel.profile-font-small .profile-drama-card b { font-size: 13px; }

.profile-panel.profile-font-large .profile-user-row h2 { font-size: 24px; }
.profile-panel.profile-font-large .profile-history-tabs button { font-size: 21px; }
.profile-panel.profile-font-large .profile-filter-row button,
.profile-panel.profile-font-large .profile-quick-action b,
.profile-panel.profile-font-large .profile-drama-card b { font-size: 15px; }

.profile-earning-page {
  position: fixed;
  inset: 0;
  z-index: 72;
  overflow: auto;
  padding: max(34px, env(safe-area-inset-top)) 18px 30px;
  color: #080808;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 238, 112, 0.74), transparent 30%),
    radial-gradient(circle at 82% 2%, rgba(93, 240, 213, 0.52), transparent 34%),
    linear-gradient(180deg, #f6fff4 0, #f6f7f7 38%, #f7f7f7 100%);
}

.profile-earning-topbar {
  display: grid;
  grid-template-columns: 44px 1fr 58px;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.profile-earning-topbar strong {
  text-align: center;
  font-size: 20px;
  font-weight: 900;
}

.profile-earning-topbar button {
  border: 0;
  color: #090909;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.profile-earning-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
}

.profile-earning-back svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.profile-auth-card {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  margin-bottom: 22px;
  padding: 0 15px;
  border: 0;
  border-radius: 14px;
  color: #111;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
  font: inherit;
  text-align: left;
}

.profile-auth-card span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
}

.profile-auth-card b {
  font-size: 15px;
  font-weight: 500;
}

.profile-auth-card i {
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
}

.profile-earning-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 26px 22px 22px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.profile-earning-summary button {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 0;
  color: #080808;
  background: transparent;
  font: inherit;
  text-align: left;
}

.profile-earning-summary span {
  font-size: 14px;
  font-weight: 650;
}

.profile-earning-summary strong {
  font-size: clamp(34px, 11vw, 48px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 0;
}

.profile-earning-note {
  margin: 0 22px 26px;
  color: #9ca3af;
  font-size: 15px;
}

.profile-income-record-card {
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.profile-income-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 68px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.profile-income-tabs button {
  border: 0;
  color: #a3a3a3;
  background: transparent;
  font: inherit;
  font-size: 19px;
  font-weight: 800;
}

.profile-income-tabs button.active {
  color: #0a0a0a;
}

.profile-income-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 4px;
}

.profile-income-filters {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.profile-income-filters button,
.profile-income-export {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: #f5f5f5;
  color: #6b7280;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.profile-income-filters button {
  padding: 0 13px;
}

.profile-income-filters button.active {
  color: #0f766e;
  background: #d7faf2;
}

.profile-income-export {
  padding: 0 14px;
  color: #111827;
  background: #eef2f7;
}

.profile-income-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 20px 12px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 650;
}

.profile-income-list {
  padding: 0 20px;
}

.profile-income-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 86px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.profile-income-row:last-child {
  border-bottom: 0;
}

.profile-income-row div {
  display: grid;
  gap: 8px;
}

.profile-income-row strong {
  font-size: 17px;
  font-weight: 600;
}

.profile-income-row span {
  color: #8a8a8a;
  font-size: 15px;
}

.profile-income-row b {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.profile-income-row b.positive {
  color: #f59e0b;
}

.profile-income-row b.negative {
  color: #0a0a0a;
}

.profile-income-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 180px;
  color: #9ca3af;
  text-align: center;
}

.profile-income-empty strong {
  color: #222;
  font-size: 16px;
  font-weight: 800;
}

.profile-income-empty span {
  max-width: 240px;
  font-size: 13px;
  line-height: 1.55;
}

.profile-income-help-page {
  position: fixed;
  inset: 0;
  z-index: 72;
  overflow: auto;
  padding: max(34px, env(safe-area-inset-top)) 18px 34px;
  color: #080808;
  background:
    radial-gradient(circle at 4% 0%, rgba(255, 240, 107, 0.66), transparent 34%),
    radial-gradient(circle at 86% 0%, rgba(91, 237, 211, 0.62), transparent 36%),
    linear-gradient(180deg, #f8fff2 0, #f7f8f6 36%, #f5f5f5 100%);
}

.profile-income-help-card {
  display: grid;
  gap: 0;
  margin-top: 26px;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.profile-income-help-card article {
  display: grid;
  gap: 9px;
  padding: 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.profile-income-help-card article:last-child {
  border-bottom: 0;
}

.profile-income-help-card strong {
  font-size: 17px;
  font-weight: 800;
}

.profile-income-help-card p {
  margin: 0;
  color: #737373;
  font-size: 14px;
  line-height: 1.65;
}

.profile-coin-task-page {
  position: fixed;
  inset: 0;
  z-index: 72;
  overflow: auto;
  padding: max(34px, env(safe-area-inset-top)) 18px 34px;
  color: #080808;
  background:
    radial-gradient(circle at 6% 0%, rgba(255, 240, 107, 0.7), transparent 34%),
    radial-gradient(circle at 88% 1%, rgba(91, 237, 211, 0.62), transparent 36%),
    linear-gradient(180deg, #f7fff0 0, #f7f8f6 34%, #f6f6f6 100%);
}

.coin-task-topbar {
  height: 42px;
  margin-bottom: 18px;
}

.coin-task-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 12px;
}

.coin-task-summary button {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 0;
  color: #050505;
  background: transparent;
  font: inherit;
  text-align: left;
}

.coin-task-summary span {
  font-size: 15px;
  font-weight: 750;
}

.coin-task-summary strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(44px, 14vw, 62px);
  line-height: 0.95;
  font-weight: 950;
}

.coin-task-summary small {
  font-size: 18px;
  font-weight: 850;
}

.coin-task-exchange-note {
  margin: 0 0 18px;
  color: rgba(0, 0, 0, 0.32);
  font-size: 14px;
  line-height: 1.4;
}

.coin-task-newbie-card {
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 2%, rgba(255, 111, 72, 0.28), transparent 24%),
    linear-gradient(135deg, rgba(255, 244, 119, 0.9), rgba(132, 244, 217, 0.8));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.coin-task-newbie-hero {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 24px 22px 14px;
}

.coin-task-newbie-hero strong {
  max-width: 78%;
  font-size: clamp(24px, 7vw, 34px);
  line-height: 1.16;
  font-weight: 950;
}

.coin-task-newbie-hero span {
  color: rgba(0, 0, 0, 0.44);
  font-size: 15px;
  font-weight: 700;
}

.coin-task-newbie-hero i {
  position: absolute;
  right: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  color: #ff6e28;
  background: radial-gradient(circle, #fff3b1 0 45%, #ffb75e 46% 100%);
  font-size: 28px;
  font-style: normal;
  font-weight: 950;
  transform: rotate(-10deg);
}

.coin-task-benefit {
  margin: 0 10px 0;
  padding: 20px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

.coin-task-benefit:first-of-type {
  border-radius: 14px 14px 0 0;
}

.coin-task-benefit:last-child {
  margin-bottom: 10px;
  border-bottom: 0;
  border-radius: 0 0 14px 14px;
}

.coin-task-benefit-head,
.coin-task-benefit.compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.coin-task-benefit strong {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 950;
}

.coin-task-benefit strong em {
  color: #ff9124;
  font-style: normal;
}

.coin-task-benefit span {
  color: rgba(0, 0, 0, 0.42);
  font-size: 14px;
  line-height: 1.4;
}

.coin-task-benefit span b {
  display: inline-block;
  margin-right: 6px;
  border-radius: 6px;
  padding: 3px 6px;
  color: #c47b10;
  background: #fff0b8;
  font-size: 12px;
}

.coin-task-benefit button {
  min-width: 92px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: #071b18;
  background: #55e3c8;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
}

.coin-task-benefit button:disabled {
  color: rgba(0, 0, 0, 0.42);
  background: #d9faf2;
}

.coin-task-sign-days,
.coin-task-watch-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(54px, 1fr);
  gap: 8px;
  overflow-x: auto;
  padding-top: 18px;
  scrollbar-width: none;
}

.coin-task-sign-days::-webkit-scrollbar,
.coin-task-watch-days::-webkit-scrollbar,
.coin-task-drama-rail::-webkit-scrollbar {
  display: none;
}

.coin-task-sign-days span,
.coin-task-watch-days span {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-width: 54px;
}

.coin-task-sign-days strong,
.coin-task-watch-days strong {
  display: grid;
  place-items: center;
  width: 54px;
  height: 58px;
  margin: 0;
  border-radius: 10px;
  color: #ff8d63;
  background: linear-gradient(180deg, #fff7ed, #ffd7c7);
  font-size: 15px;
  line-height: 1;
}

.coin-task-sign-days .active strong,
.coin-task-watch-days .pending strong,
.coin-task-watch-days .coin-task-day-claimable strong {
  color: #fff;
  background: linear-gradient(180deg, #ff9957, #ff5126);
}

.coin-task-watch-days .total strong,
.coin-task-watch-days .coin-task-day-upcoming:last-child strong {
  color: #fff;
  background: linear-gradient(180deg, #ffd46c, #ff9b2e);
}

.coin-task-watch-days .coin-task-day-claimed strong {
  color: #16bfa6;
  background: linear-gradient(180deg, #e9fff9, #c8f8ec);
}

.coin-task-watch-days .coin-task-day-missed strong,
.coin-task-watch-days .coin-task-day-pending strong {
  color: rgba(0, 0, 0, 0.34);
  background: #f4f4f4;
}

.coin-task-sign-days em,
.coin-task-watch-days em {
  color: rgba(0, 0, 0, 0.42);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.coin-task-benefit progress {
  width: 100%;
  height: 6px;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.coin-task-benefit progress::-webkit-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}

.coin-task-benefit progress::-webkit-progress-value {
  border-radius: 999px;
  background: #55e3c8;
}

.coin-task-benefit strong i {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.44);
  font-size: 14px;
  font-style: normal;
}

.coin-task-drama-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 112px;
  gap: 12px;
  overflow-x: auto;
  padding-top: 16px;
  scrollbar-width: none;
}

.coin-task-drama-rail article {
  display: grid;
  gap: 8px;
}

.coin-task-drama-rail img {
  width: 112px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  object-fit: cover;
}

.coin-task-drama-rail span {
  justify-self: end;
  margin-top: -34px;
  margin-right: 6px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  font-weight: 850;
}

.coin-task-drama-rail strong {
  margin: 0;
  overflow: hidden;
  color: #111;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coin-task-ledger {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border-radius: 14px;
  padding: 16px 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

.coin-task-ledger-head,
.coin-task-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.coin-task-ledger-head strong {
  font-size: 17px;
  font-weight: 950;
}

.coin-task-ledger-head span,
.coin-task-ledger p {
  margin: 0;
  color: rgba(0, 0, 0, 0.42);
  font-size: 13px;
}

.coin-task-ledger-row {
  min-height: 44px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 10px;
}

.coin-task-ledger-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.coin-task-ledger-row b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coin-task-ledger-row em {
  color: rgba(0, 0, 0, 0.36);
  font-size: 12px;
  font-style: normal;
}

.coin-task-ledger-row strong {
  flex: 0 0 auto;
  color: #ff6a2d;
  font-size: 14px;
  font-weight: 950;
}

.profile-coin-stay-card {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

.profile-coin-stay-card div {
  display: grid;
  gap: 4px;
}

.profile-coin-stay-card span {
  color: rgba(0, 0, 0, 0.58);
  font-size: 13px;
  font-weight: 700;
}

.profile-coin-stay-card strong {
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
}

.profile-coin-stay-card p {
  margin: 0;
  color: rgba(0, 0, 0, 0.54);
  font-size: 12px;
  line-height: 1.45;
}

.profile-coin-stay-card progress {
  width: 100%;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.profile-coin-stay-card progress::-webkit-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}

.profile-coin-stay-card progress::-webkit-progress-value {
  border-radius: 999px;
  background: #10c9bc;
}

.profile-coin-stay-card button {
  justify-self: end;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: #080808;
  background: #59e3c6;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.profile-coin-stay-card button:disabled {
  color: rgba(0, 0, 0, 0.48);
  background: rgba(0, 0, 0, 0.08);
}

.profile-withdraw-card {
  display: grid;
  gap: 14px;
  padding: 22px 18px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.profile-withdraw-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 18px;
  font-weight: 900;
}

.profile-withdraw-card h3 i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #fff;
  background: #1677ff;
  font-size: 17px;
  font-style: normal;
  font-weight: 900;
}

.profile-withdraw-card p {
  margin: 0;
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
  line-height: 1.45;
}

.profile-withdraw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.profile-withdraw-option {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  min-height: 88px;
  border: 0;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.54);
  background: #f8f8f8;
  font: inherit;
  overflow: hidden;
}

.profile-withdraw-option.active {
  color: #10c9bc;
  background: #dffbf5;
}

.profile-withdraw-option i {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 5px;
  color: #cf9a36;
  background: #fff1d9;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.profile-withdraw-option strong {
  font-size: 25px;
  line-height: 1;
  font-weight: 500;
}

.profile-withdraw-option strong span {
  margin-left: 4px;
  font-size: 14px;
}

.profile-withdraw-option em {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.profile-watch-earn-button {
  justify-self: center;
  display: grid;
  gap: 4px;
  width: min(100%, 286px);
  min-height: 58px;
  margin-top: 8px;
  border: 0;
  border-radius: 18px;
  color: #080808;
  background: #59e3c6;
  font: inherit;
}

.profile-watch-earn-button strong {
  align-self: end;
  font-size: 18px;
  font-weight: 900;
}

.profile-watch-earn-button span {
  align-self: start;
  font-size: 13px;
}

.profile-order-page {
  position: fixed;
  inset: 0;
  z-index: 72;
  overflow: auto;
  padding: max(30px, env(safe-area-inset-top)) 14px 34px;
  color: #111;
  background: #f5f5f7;
}

.profile-order-topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.profile-order-topbar strong {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
}

.profile-order-topbar button {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 0;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 22px;
  font-weight: 900;
}

.profile-order-back svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.profile-order-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  overflow-x: auto;
  margin: 0 -14px 18px;
  padding: 2px 14px 10px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.profile-order-tabs::-webkit-scrollbar {
  display: none;
}

.profile-order-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-width: 54px;
  min-height: 34px;
  padding: 0 0 8px;
  border: 0;
  color: rgba(0, 0, 0, 0.58);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
}

.profile-order-tabs button span {
  display: inline-block;
  white-space: nowrap;
}

.profile-order-tabs button.active {
  color: #111;
  font-size: 16px;
  font-weight: 800;
}

.profile-order-tabs button.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: #ff365f;
}

.profile-order-tabs i {
  position: absolute;
  top: 0;
  right: 3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  transform: translate(50%, -4px);
  color: #fff;
  border-radius: 50%;
  background: #ff365f;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.profile-order-list {
  display: grid;
  gap: 12px;
}

.profile-order-empty,
.profile-order-loading,
.profile-order-error {
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 150px;
  padding: 20px;
  border-radius: 18px;
  background: #fff;
  color: rgba(0, 0, 0, 0.42);
  text-align: center;
}

.profile-order-empty strong,
.profile-order-loading strong,
.profile-order-error strong {
  color: #111;
  font-size: 18px;
}

.profile-order-empty p,
.profile-order-loading p,
.profile-order-error p {
  margin: 0;
  font-size: 14px;
}

.profile-order-error button {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #ff365f;
  font: inherit;
  font-weight: 800;
}

.profile-order-card {
  display: grid;
  gap: 12px;
  padding: 16px 14px 18px;
  border-radius: 18px;
  background: #fff;
}

.profile-order-source {
  padding-bottom: 10px;
  color: rgba(0, 0, 0, 0.48);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: right;
  font-size: 14px;
}

.profile-order-shop,
.profile-order-title,
.profile-order-spec,
.profile-order-logistics,
.profile-order-address,
.profile-order-pay,
.profile-order-actions {
  display: flex;
  align-items: center;
}

.profile-order-shop {
  justify-content: space-between;
  gap: 12px;
}

.profile-order-shop-link {
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
}

.profile-order-shop strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}

.profile-order-shop strong span {
  color: rgba(0, 0, 0, 0.48);
}

.profile-order-shop b {
  flex: 0 0 auto;
  color: #ef3f70;
  font-size: 17px;
}

.profile-order-product {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
}

.profile-order-product:focus {
  outline: none;
}

.profile-order-product:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 54, 95, 0.24);
}

.profile-order-thumb {
  display: grid;
  align-content: end;
  min-height: 96px;
  overflow: hidden;
  padding: 8px;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(145deg, #a56d3a, #f3cf88);
}

.profile-order-thumb.cleaner {
  background: linear-gradient(145deg, #eef7ff, #ffd94d 58%, #2c79ff);
}

.profile-order-thumb.shirt {
  background: linear-gradient(145deg, #f3f3f3, #222 55%, #9b4f30);
}

.profile-order-thumb i {
  justify-self: start;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.34);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.profile-order-info {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.profile-order-title {
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
}

.profile-order-title b {
  flex: 0 0 auto;
  font-size: 18px;
}

.profile-order-spec {
  gap: 8px;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.48);
  font-size: 15px;
  line-height: 1.35;
}

.profile-order-title,
.profile-order-spec {
  overflow: hidden;
}

.profile-order-title,
.profile-order-spec span {
  text-overflow: ellipsis;
}

.profile-order-spec em {
  flex: 0 0 auto;
  font-style: normal;
}

.profile-order-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.profile-order-tags i {
  padding: 2px 5px;
  color: #ef4b76;
  border: 1px solid rgba(239, 75, 118, 0.28);
  border-radius: 4px;
  font-size: 12px;
  font-style: normal;
}

.profile-order-logistics {
  gap: 8px;
  justify-content: space-between;
  min-height: 50px;
  border: 0;
  border-radius: 9px;
  padding: 0 12px;
  color: #111;
  background: #f7f7f7;
  font: inherit;
  text-align: left;
}

.profile-order-logistics b {
  flex: 0 0 auto;
  font-size: 16px;
}

.profile-order-logistics span {
  min-width: 0;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.48);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.profile-order-logistics i {
  color: rgba(0, 0, 0, 0.38);
  font-size: 24px;
  font-style: normal;
}

.profile-order-pay {
  justify-content: flex-end;
  gap: 6px;
  color: rgba(0, 0, 0, 0.48);
  font-size: 15px;
}

.profile-order-address {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 1.45;
}

.profile-order-pay b {
  color: #111;
  font-size: 19px;
}

.profile-order-actions {
  justify-content: flex-end;
  gap: 8px;
}

.profile-order-actions button {
  min-width: 96px;
  min-height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  color: #111;
  background: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
}

.profile-order-actions button.primary {
  color: #fff;
  border-color: #ff365f;
  background: #ff365f;
}

.profile-order-detail-page {
  position: fixed;
  inset: 0;
  z-index: 73;
  overflow: auto;
  padding: max(34px, env(safe-area-inset-top)) 14px 34px;
  color: #111;
  background: #f5f5f7;
}

.profile-order-detail-card {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 16px 14px;
  border-radius: 16px;
  background: #fff;
}

.profile-order-detail-card.status {
  gap: 8px;
}

.profile-order-detail-card span,
.profile-order-detail-card p {
  margin: 0;
  color: rgba(0, 0, 0, 0.54);
  font-size: 14px;
  line-height: 1.5;
}

.profile-order-detail-card strong {
  font-size: 20px;
  font-weight: 850;
}

.profile-order-detail-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 850;
}

.profile-order-timeline {
  display: grid;
  gap: 0;
}

.profile-order-timeline p {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 18px 22px;
}

.profile-order-timeline p::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
}

.profile-order-timeline p::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 2px;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.profile-order-timeline p:last-child {
  padding-bottom: 0;
}

.profile-order-timeline p:last-child::after {
  display: none;
}

.profile-order-timeline p.done::before {
  background: #10c9bc;
}

.profile-order-timeline b {
  color: #111;
  font-size: 15px;
}

.profile-order-detail-product {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  color: #111;
  background: rgba(15, 23, 42, 0.035);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-order-detail-product .profile-order-thumb {
  min-height: 78px;
}

.profile-order-detail-product span:not(.profile-order-thumb) {
  display: grid;
  gap: 6px;
}

.profile-order-detail-product em {
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.profile-order-detail-product strong,
.profile-order-detail-product b {
  color: #111;
}

.profile-order-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-order-amount-row b {
  color: #111;
  font-size: 15px;
  font-weight: 850;
}

.profile-order-actions.sticky {
  position: sticky;
  bottom: 12px;
  justify-content: flex-end;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.profile-order-after-sale-page {
  position: fixed;
  inset: 0;
  z-index: 74;
  overflow: auto;
  padding: max(34px, env(safe-area-inset-top)) 14px 34px;
  color: #111;
  background: #f5f5f7;
}

.profile-order-after-sale-form {
  gap: 16px;
}

.profile-order-after-sale-row {
  display: grid;
  gap: 10px;
}

.profile-order-after-sale-row > span,
.profile-order-after-sale-field > span {
  color: rgba(0, 0, 0, 0.58);
  font-size: 14px;
  font-weight: 800;
}

.profile-order-after-sale-types,
.profile-order-after-sale-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-order-after-sale-types button,
.profile-order-after-sale-reasons button {
  min-height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  padding: 0 14px;
  color: rgba(0, 0, 0, 0.72);
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.profile-order-after-sale-types button.active,
.profile-order-after-sale-reasons button.active {
  color: #ff365f;
  border-color: rgba(255, 54, 95, 0.32);
  background: rgba(255, 54, 95, 0.08);
}

.profile-order-after-sale-types button:disabled {
  color: rgba(0, 0, 0, 0.28);
  background: rgba(0, 0, 0, 0.04);
}

.profile-order-after-sale-tip {
  margin: -6px 0 0;
  border-radius: 10px;
  padding: 9px 10px;
  color: #b42318;
  background: rgba(255, 54, 95, 0.08);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.profile-order-after-sale-field {
  display: grid;
  gap: 8px;
}

.profile-order-after-sale-field textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  color: #111;
  background: #f6f6f7;
  font: inherit;
  line-height: 1.5;
}

.profile-order-after-sale-field em {
  justify-self: end;
  color: rgba(0, 0, 0, 0.42);
  font-size: 13px;
  font-style: normal;
}

.profile-order-after-sale-submit {
  position: sticky;
  bottom: 12px;
  display: grid;
  padding: 10px 0 0;
}

.profile-order-after-sale-submit button {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #ff365f;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(255, 54, 95, 0.22);
}

.profile-order-after-sale-submit button:disabled {
  opacity: 0.62;
}

body.profile-night-mode .profile-order-page,
body.profile-night-mode .profile-order-detail-page,
body.profile-night-mode .profile-order-after-sale-page {
  color: #f8fafc;
  background:
    radial-gradient(circle at 12% 0%, rgba(92, 242, 214, 0.14), transparent 15rem),
    radial-gradient(circle at 92% 4%, rgba(255, 122, 24, 0.1), transparent 14rem),
    #08090c;
}

body.profile-night-mode .profile-order-topbar button,
body.profile-night-mode .profile-order-product,
body.profile-night-mode .profile-order-shop-link,
body.profile-night-mode .profile-order-detail-product {
  color: inherit;
}

body.profile-night-mode .profile-order-tabs button {
  color: rgba(248, 250, 252, 0.62);
}

body.profile-night-mode .profile-order-tabs button.active,
body.profile-night-mode .profile-order-empty strong,
body.profile-night-mode .profile-order-loading strong,
body.profile-night-mode .profile-order-error strong,
body.profile-night-mode .profile-order-title,
body.profile-night-mode .profile-order-title b,
body.profile-night-mode .profile-order-pay b,
body.profile-night-mode .profile-order-detail-card strong,
body.profile-night-mode .profile-order-detail-card h3,
body.profile-night-mode .profile-order-amount-row b,
body.profile-night-mode .profile-order-timeline b {
  color: #f8fafc;
}

body.profile-night-mode .profile-order-after-sale-row > span,
body.profile-night-mode .profile-order-after-sale-field > span {
  color: rgba(248, 250, 252, 0.68);
}

body.profile-night-mode .profile-order-after-sale-types button,
body.profile-night-mode .profile-order-after-sale-reasons button,
body.profile-night-mode .profile-order-after-sale-field textarea {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
}

body.profile-night-mode .profile-order-after-sale-types button.active,
body.profile-night-mode .profile-order-after-sale-reasons button.active {
  color: #ff7a9b;
  border-color: rgba(255, 122, 155, 0.42);
  background: rgba(255, 122, 155, 0.14);
}

body.profile-night-mode .profile-order-after-sale-tip {
  color: #fecdd3;
  background: rgba(255, 122, 155, 0.12);
}

body.profile-night-mode .profile-order-after-sale-field em {
  color: rgba(248, 250, 252, 0.42);
}

body.profile-night-mode .profile-order-card,
body.profile-night-mode .profile-order-empty,
body.profile-night-mode .profile-order-loading,
body.profile-night-mode .profile-order-error,
body.profile-night-mode .profile-order-detail-card,
body.profile-night-mode .profile-order-logistics {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body.profile-night-mode .profile-order-detail-product {
  background: rgba(255, 255, 255, 0.08);
}

body.profile-night-mode .profile-order-source {
  color: rgba(248, 250, 252, 0.56);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.profile-night-mode .profile-order-shop strong span,
body.profile-night-mode .profile-order-spec,
body.profile-night-mode .profile-order-logistics span,
body.profile-night-mode .profile-order-logistics i,
body.profile-night-mode .profile-order-pay,
body.profile-night-mode .profile-order-detail-card span,
body.profile-night-mode .profile-order-detail-card p,
body.profile-night-mode .profile-order-detail-product em {
  color: rgba(248, 250, 252, 0.62);
}

body.profile-night-mode .profile-order-tags i {
  color: #ff7a9b;
  border-color: rgba(255, 122, 155, 0.34);
  background: rgba(255, 54, 95, 0.1);
}

body.profile-night-mode .profile-order-shop b,
body.profile-night-mode .profile-order-detail-product b {
  color: #ff7a9b;
}

body.profile-night-mode .profile-order-actions button {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

body.profile-night-mode .profile-order-actions button.primary {
  color: #fff;
  border-color: #ff365f;
  background: #ff365f;
}

body.profile-night-mode .profile-order-actions.sticky {
  background: rgba(8, 9, 12, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

body.profile-night-mode .profile-order-timeline p::before {
  background: rgba(248, 250, 252, 0.26);
}

body.profile-night-mode .profile-order-timeline p::after {
  background: rgba(255, 255, 255, 0.1);
}

body.profile-night-mode .profile-order-timeline p.done::before {
  background: #10c9bc;
}

.profile-settings-page,
.profile-scan-page,
.profile-preference-page,
.profile-feedback-page,
.profile-customer-page,
.profile-feedback-history-page,
.profile-settings-detail-page {
  position: fixed;
  inset: 0;
  z-index: 72;
  overflow: auto;
  padding: max(34px, env(safe-area-inset-top)) 18px 34px;
  color: #111;
  background: #f7f7f8;
}

.profile-utility-topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 48px;
  margin-bottom: 18px;
}

.profile-utility-topbar strong {
  text-align: center;
  font-size: 21px;
  font-weight: 800;
}

.profile-utility-topbar button {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 0;
  color: #111;
  background: transparent;
}

.profile-utility-topbar svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.profile-utility-card,
.profile-scan-card {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
}

.profile-settings-card {
  overflow: hidden;
  margin-bottom: 22px;
  border-radius: 12px;
  background: #fff;
}

.profile-settings-card.single {
  margin-top: 8px;
}

.profile-info-edit-page {
  position: fixed;
  inset: 0;
  z-index: 72;
  overflow-y: auto;
  padding: max(18px, env(safe-area-inset-top)) 14px 24px;
  color: #111;
  background: #f6f6f6;
}

.profile-info-edit-page .profile-utility-topbar {
  grid-template-columns: 36px 1fr 36px;
  min-height: 42px;
  margin-bottom: 12px;
}

.profile-info-edit-page .profile-utility-topbar strong {
  font-size: 19px;
}

.profile-info-edit-page .profile-utility-topbar button {
  min-height: 36px;
}

.profile-info-edit-page .profile-utility-topbar svg {
  width: 25px;
  height: 25px;
}

.profile-info-avatar-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  margin: 28px auto 28px;
}

.profile-info-avatar {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  padding: 22px;
  color: #ff365f;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 22%, #fff, #ffc7d7 72%);
}

.profile-info-avatar.has-image {
  overflow: hidden;
  padding: 0;
}

.profile-info-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info-avatar-wrap button {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #3f3f3f;
}

.profile-info-avatar-wrap button .profile-svg {
  width: 19px;
  height: 19px;
}

.profile-info-avatar-wrap button:disabled {
  opacity: 0.58;
}

.profile-avatar-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile-info-card {
  overflow: hidden;
  margin-bottom: 14px;
  border-radius: 16px;
  background: #fff;
}

.profile-info-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 14px;
  color: #111;
  background: transparent;
  text-align: left;
}

.profile-info-row:last-child {
  border-bottom: 0;
}

.profile-info-row-static {
  grid-template-columns: 86px minmax(0, 1fr);
}

.profile-info-row span {
  color: rgba(0, 0, 0, 0.42);
  font-size: 17px;
  font-weight: 500;
}

.profile-info-row em {
  overflow: hidden;
  color: #111;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
}

.profile-info-row b {
  color: rgba(0, 0, 0, 0.24);
  font-size: 28px;
  font-weight: 300;
}

.profile-info-note {
  margin: 52px 0 0;
  color: rgba(0, 0, 0, 0.22);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.profile-info-editor {
  position: fixed;
  inset: 0;
  z-index: 74;
}

.profile-info-text-editor {
  overflow-y: auto;
  padding: max(34px, env(safe-area-inset-top)) 18px 34px;
  color: #111;
  background: #f6f6f6;
}

.profile-info-editor-topbar {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  min-height: 58px;
  margin-bottom: 44px;
}

.profile-info-editor-topbar button {
  border: 0;
  color: #111;
  background: transparent;
  font-size: 28px;
  font-weight: 600;
}

.profile-info-editor-topbar button:first-child {
  justify-self: start;
  padding: 0;
}

.profile-info-editor-topbar button:first-child .search-svg {
  width: 28px;
  height: 28px;
}

.profile-info-editor-topbar button:last-child {
  justify-self: end;
  color: #ff7a00;
  font-size: 22px;
  font-weight: 500;
}

.profile-info-editor-topbar button:disabled {
  color: rgba(0, 0, 0, 0.32);
}

.profile-info-editor-topbar strong {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
}

.profile-info-text-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 64px;
  align-items: center;
  min-height: 74px;
  border-radius: 20px;
  padding: 0 18px;
  background: #fff;
}

.profile-info-text-card.textarea {
  display: block;
  min-height: 178px;
  padding: 20px 18px;
}

.profile-info-text-card input,
.profile-info-text-card textarea {
  width: 100%;
  border: 0;
  color: #111;
  background: transparent;
  font-size: 24px;
  font-weight: 500;
  outline: 0;
}

.profile-info-text-card textarea {
  display: block;
  min-height: 116px;
  resize: none;
  font-size: 22px;
}

.profile-info-text-card input::placeholder,
.profile-info-text-card textarea::placeholder {
  color: rgba(0, 0, 0, 0.22);
}

.profile-info-text-card [data-profile-info-clear] {
  border: 0;
  color: rgba(0, 0, 0, 0.42);
  background: transparent;
  font-size: 32px;
  font-weight: 300;
}

.profile-info-text-card em {
  justify-self: end;
  color: rgba(0, 0, 0, 0.22);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
}

.profile-info-text-card.textarea em {
  position: absolute;
  right: 22px;
  bottom: 18px;
}

.profile-info-text-editor > p {
  margin: 18px 44px 0;
  color: rgba(0, 0, 0, 0.38);
  font-size: 18px;
  font-weight: 500;
}

.profile-info-gender-sheet {
  display: grid;
  align-items: end;
}

.profile-info-editor-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.38);
}

.profile-info-editor-panel {
  position: relative;
  margin: 0;
  padding: 0 18px max(24px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.16);
}

.profile-info-sheet-panel {
  position: relative;
  margin: 0;
  padding: 0 18px max(24px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #f6f6f6;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.16);
}

.profile-info-sheet-panel header {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 70px;
  align-items: center;
  min-height: 70px;
}

.profile-info-sheet-panel header strong {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
}

.profile-info-sheet-panel header button {
  border: 0;
  background: transparent;
  font-size: 24px;
}

.profile-info-sheet-panel header button:first-child {
  justify-self: start;
  color: #111;
  font-size: 38px;
  line-height: 1;
}

.profile-info-sheet-panel header button:last-child {
  justify-self: end;
  color: rgba(0, 0, 0, 0.32);
  font-size: 22px;
  font-weight: 500;
}

.profile-info-editor-panel header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  min-height: 58px;
}

.profile-info-editor-panel header strong {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
}

.profile-info-editor-panel header button {
  border: 0;
  color: #ff365f;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
}

.profile-info-editor-panel header button:first-child {
  color: rgba(0, 0, 0, 0.48);
  text-align: left;
}

.profile-info-editor-input {
  width: 100%;
  height: 50px;
  margin: 8px 0 12px;
  border: 0;
  border-radius: 14px;
  padding: 0 14px;
  color: #111;
  background: #f4f4f4;
  font-size: 17px;
  outline: 0;
}

.profile-info-gender-options {
  display: grid;
  overflow: hidden;
  gap: 0;
  margin: 12px 0 18px;
  border-radius: 20px;
  background: #fff;
}

.profile-info-gender-options button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  min-height: 74px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0 22px;
  color: #111;
  background: #fff;
  text-align: left;
  font-size: 22px;
  font-weight: 600;
}

.profile-info-gender-options button:last-child {
  border-bottom: 0;
}

.profile-info-gender-options button:has(.profile-info-gender-check) {
  color: #ff7a00;
}

.profile-info-gender-check {
  justify-self: end;
  color: #ff7a00;
  font-size: 28px;
  font-weight: 900;
}

.profile-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  align-items: center;
  width: 100%;
  min-height: 66px;
  padding: 0 20px;
  border: 0;
  color: #111;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 20px;
  font-weight: 500;
}

.profile-settings-row + .profile-settings-row {
  border-top: 1px solid rgba(0, 0, 0, 0.035);
}

.profile-settings-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-settings-row em {
  color: rgba(0, 0, 0, 0.36);
  font-style: normal;
}

.profile-settings-row b {
  color: rgba(0, 0, 0, 0.24);
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  text-align: right;
}

.profile-settings-row.switch-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.profile-settings-switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #d0d0d0;
}

.profile-settings-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform 0.18s ease;
}

.profile-settings-switch.on {
  background: #12bca8;
}

.profile-settings-switch.on::after {
  transform: translateX(18px);
}

.profile-settings-policy {
  display: block;
  margin: 4px auto 24px;
  border: 0;
  color: #5f83a5;
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
}

.profile-settings-detail-page {
  background: #f6f6f7;
}

.profile-settings-detail-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

.profile-settings-detail-row {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
}

.profile-settings-detail-row + .profile-settings-detail-row {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.profile-settings-detail-row strong {
  color: #111;
  font-size: 18px;
  font-weight: 800;
}

.profile-settings-detail-row span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  line-height: 1.55;
}

.profile-login-panel {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(180deg, #fff 0%, #fbfffd 100%);
}

.profile-login-head {
  display: grid;
  gap: 5px;
}

.profile-login-head strong {
  font-size: 18px;
  font-weight: 900;
}

.profile-login-head span,
.profile-login-hint {
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 650;
}

.profile-login-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-login-tabs button,
.profile-login-code-row button,
.profile-login-submit {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
}

.profile-login-tabs button {
  color: rgba(0, 0, 0, 0.56);
  background: #f3f4f6;
}

.profile-login-tabs button.active {
  color: #057968;
  background: #dffbf5;
}

.profile-login-field {
  display: grid;
  gap: 7px;
}

.profile-login-field span {
  color: rgba(0, 0, 0, 0.52);
  font-size: 12px;
  font-weight: 800;
}

.profile-login-field input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 0 12px;
  color: #111;
  background: #fff;
  font: inherit;
  font-size: 15px;
}

.profile-login-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px;
  align-items: end;
}

.profile-login-code-row button {
  color: #fff;
  background: #111;
}

.profile-login-code-row button:disabled,
.profile-login-submit:disabled {
  opacity: 0.56;
}

.profile-login-submit {
  color: #fff;
  background: linear-gradient(135deg, #11cab9, #0d9488);
}

.profile-font-size-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 20px 20px;
}

.profile-font-size-options button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  color: #111;
  background: #f4f4f4;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
}

.profile-font-size-options button.active {
  color: #00a88f;
  background: #dffbf5;
}

.profile-privacy-options {
  display: grid;
  gap: 0;
  padding-bottom: 10px;
}

.profile-privacy-option {
  min-height: 58px;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.profile-compliance-list {
  display: grid;
  gap: 10px;
  padding: 6px 14px 18px;
}

.profile-about-list,
.profile-policy-list {
  display: grid;
  gap: 10px;
  padding: 6px 14px 18px;
}

.profile-compliance-item {
  display: grid;
  gap: 6px;
  border-radius: 12px;
  background: #f7f8f8;
  padding: 14px 16px;
}

.profile-about-item,
.profile-policy-item {
  display: grid;
  gap: 6px;
  border-radius: 12px;
  background: #f7f8f8;
  padding: 14px 16px;
}

.profile-compliance-item em {
  color: #10b8a2;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.profile-about-item em,
.profile-policy-item em {
  color: #10b8a2;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.profile-compliance-item strong {
  color: #111;
  font-size: 16px;
  font-weight: 850;
}

.profile-about-item strong,
.profile-policy-item strong {
  color: #111;
  font-size: 16px;
  font-weight: 850;
}

.profile-compliance-item span {
  color: rgba(0, 0, 0, 0.48);
  font-size: 13px;
  line-height: 1.5;
}

.profile-about-item span,
.profile-policy-item span {
  color: rgba(0, 0, 0, 0.48);
  font-size: 13px;
  line-height: 1.5;
}

.profile-cache-action,
.profile-danger-action {
  min-height: 46px;
  margin: 18px 20px 22px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
}

.profile-cache-action {
  color: #111;
  background: #59e3c6;
}

.profile-danger-action {
  color: #fff;
  background: #ff365f;
}

.profile-teen-action {
  min-height: 46px;
  margin: 18px 20px 22px;
  border: 0;
  border-radius: 999px;
  color: #111;
  background: #59e3c6;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
}

.profile-teen-action.active {
  color: #fff;
  background: #111;
}

.profile-utility-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
}

.profile-utility-note {
  margin: 0;
  color: rgba(0, 0, 0, 0.48);
  font-size: 14px;
  line-height: 1.55;
}

.profile-utility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  border: 0;
  color: #111;
  background: transparent;
  text-align: left;
  font: inherit;
}

.profile-utility-row strong,
.profile-utility-row small {
  display: block;
}

.profile-utility-row small {
  margin-top: 4px;
  color: rgba(0, 0, 0, 0.48);
  font-size: 13px;
  line-height: 1.45;
}

.profile-scan-card {
  place-items: center;
  min-height: 260px;
  text-align: center;
}

.profile-scan-card strong {
  font-size: 18px;
}

.profile-scan-card p {
  max-width: 290px;
  margin: 0;
  color: rgba(0, 0, 0, 0.48);
  font-size: 14px;
  line-height: 1.55;
}

.profile-scan-frame {
  position: relative;
  display: block;
  width: 154px;
  height: 154px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(18, 188, 168, 0.1), rgba(255, 137, 24, 0.12));
}

.profile-scan-frame::before,
.profile-scan-frame::after {
  position: absolute;
  left: 30px;
  right: 30px;
  content: "";
  background: #12bca8;
}

.profile-scan-frame::before {
  top: 75px;
  height: 2px;
}

.profile-scan-frame::after {
  top: 30px;
  bottom: 30px;
  left: 75px;
  right: auto;
  width: 2px;
}

.profile-scan-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 10px;
}

.profile-scan-input input {
  min-width: 0;
  height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: 12px;
  background: #f4f4f4;
  font: inherit;
  font-size: 15px;
}

.profile-scan-input button,
.profile-feedback-submit {
  border: 0;
  border-radius: 999px;
  color: #111;
  background: #59e3c6;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
}

.profile-scan-result {
  display: grid;
  gap: 8px;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 14px 34px rgba(12, 22, 32, 0.08);
}

.profile-scan-result span {
  width: max-content;
  border-radius: 999px;
  background: rgba(18, 196, 170, 0.12);
  color: #00a894;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
}

.profile-scan-result strong {
  color: #111;
  font-size: 18px;
}

.profile-scan-result p {
  margin: 0;
  color: rgba(17, 17, 17, 0.52);
  font-size: 13px;
  line-height: 1.55;
}

.profile-scan-result div {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.profile-scan-result button {
  border: 0;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.06);
  color: #111;
  font: inherit;
  font-weight: 800;
  padding: 10px 14px;
}

.profile-scan-result button:first-child {
  background: #12c4aa;
  color: #fff;
}

.profile-preference-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-preference-grid button {
  min-width: 74px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: #008e82;
  background: #ddfbf5;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.profile-preference-grid button.active {
  color: #fff;
  background: #10c9bc;
}

.profile-preference-page {
  background:
    radial-gradient(circle at 7% 0%, rgba(211, 255, 234, 0.55), transparent 28%),
    radial-gradient(circle at 100% 3%, rgba(255, 239, 246, 0.7), transparent 32%),
    #fff;
}

.profile-preference-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  margin-bottom: 92px;
}

.profile-preference-topbar button {
  border: 0;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 20px;
  font-weight: 500;
}

.profile-preference-topbar button:last-child {
  color: rgba(0, 0, 0, 0.28);
}

.profile-preference-topbar svg {
  width: 31px;
  height: 31px;
  fill: currentColor;
}

.profile-preference-hero {
  padding: 0 26px;
}

.profile-preference-hero h2 {
  margin: 0;
  color: #030303;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.35;
}

.profile-audience-stage {
  position: relative;
  height: 470px;
  margin-top: 170px;
}

.profile-audience-blob {
  position: absolute;
  display: grid;
  place-items: center;
  width: 230px;
  height: 172px;
  border: 1px solid rgba(0, 0, 0, 0.035);
  color: #146da4;
  background: #eef6ff;
  border-radius: 54% 46% 57% 43% / 48% 61% 39% 52%;
  font: inherit;
  font-size: 24px;
  font-weight: 900;
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.58);
}

.profile-audience-blob.active {
  outline: 3px solid rgba(18, 188, 168, 0.2);
}

.profile-audience-blob.male {
  left: -8px;
  top: -12px;
  transform: rotate(-18deg);
}

.profile-audience-blob.female {
  right: -4px;
  top: 94px;
  color: #f0692e;
  background: #fff3eb;
  transform: rotate(14deg);
}

.profile-audience-blob.all {
  left: 34px;
  top: 246px;
  width: 272px;
  color: #05aa83;
  background: #e7f7f3;
  transform: rotate(-9deg);
}

.profile-preference-panel {
  margin: -42px 20px 26px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.profile-preference-panel > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-preference-panel strong {
  color: #111;
  font-size: 18px;
  font-weight: 900;
}

.profile-preference-panel span {
  color: #8a8f98;
  font-size: 13px;
  font-weight: 700;
}

.profile-preference-summary {
  margin: 14px 0 0;
  color: #8f97a3;
  font-size: 13px;
  line-height: 1.55;
}

.profile-customer-page {
  padding-left: 16px;
  padding-right: 16px;
  background:
    linear-gradient(120deg, rgba(255, 236, 239, 0.7), rgba(232, 242, 255, 0.78) 42%, rgba(244, 255, 249, 0.92) 100%),
    #f7f8fb;
}

.profile-customer-topbar {
  display: grid;
  grid-template-columns: 34px auto minmax(120px, 1fr) 52px;
  align-items: center;
  gap: 10px;
  min-height: 50px;
}

.profile-customer-topbar > button:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 44px;
  border: 0;
  color: #111;
  background: transparent;
}

.profile-customer-topbar svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.profile-customer-topbar strong {
  font-size: 26px;
  font-weight: 900;
  white-space: nowrap;
}

.profile-customer-search {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
}

.profile-customer-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.profile-customer-history {
  border: 0;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
}

.profile-customer-hero {
  margin: 44px 22px 28px;
}

.profile-customer-hero h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
}

.profile-customer-hero p {
  margin: 8px 0 0;
  color: rgba(0, 0, 0, 0.42);
  font-size: 16px;
}

.profile-customer-card {
  margin-bottom: 14px;
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
}

.profile-customer-card h3,
.profile-customer-card-title h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.profile-customer-tool {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 98px;
  margin-top: 20px;
  border: 0;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.profile-customer-tool i {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #ff6e46;
  background: #fff0ec;
  font-style: normal;
  font-size: 28px;
  font-weight: 900;
}

.profile-customer-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.profile-customer-card-title button {
  border: 0;
  color: rgba(0, 0, 0, 0.34);
  background: transparent;
  font: inherit;
  font-size: 16px;
}

.profile-customer-scenes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-customer-scene {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 146px;
  padding: 18px 16px;
  border: 0;
  border-radius: 8px;
  color: #111;
  background: linear-gradient(135deg, rgba(255, 240, 237, 0.95), rgba(255, 255, 255, 0.8));
  text-align: left;
  font: inherit;
}

.profile-customer-scene:nth-child(2) {
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.8));
}

.profile-customer-scene:nth-child(3) {
  background: linear-gradient(135deg, rgba(238, 255, 246, 0.95), rgba(255, 255, 255, 0.8));
}

.profile-customer-scene:nth-child(4) {
  background: linear-gradient(135deg, rgba(255, 247, 235, 0.95), rgba(255, 255, 255, 0.8));
}

.profile-customer-scene strong {
  font-size: 18px;
  font-weight: 700;
}

.profile-customer-scene span {
  color: rgba(0, 0, 0, 0.56);
  font-size: 14px;
}

.profile-customer-scene b {
  position: absolute;
  top: 20px;
  right: 16px;
  color: rgba(0, 0, 0, 0.2);
  font-size: 32px;
  font-weight: 300;
}

.profile-customer-faq button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  border: 0;
  color: #111;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 17px;
}

.profile-customer-faq button.active span {
  color: #111;
  font-weight: 800;
}

.profile-customer-faq em {
  color: #fa2a67;
  font-style: normal;
  font-weight: 800;
}

.profile-customer-empty {
  margin: 14px 0 0;
  color: rgba(0, 0, 0, 0.48);
  font-size: 14px;
}

.profile-customer-faq-detail {
  display: grid;
  gap: 10px;
}

.profile-customer-faq-detail > span {
  width: max-content;
  padding: 4px 10px;
  border-radius: 999px;
  color: #0f9f91;
  background: rgba(28, 210, 190, 0.14);
  font-size: 12px;
  font-weight: 800;
}

.profile-customer-faq-detail p {
  margin: 0;
  color: rgba(0, 0, 0, 0.58);
  font-size: 14px;
  line-height: 1.65;
}

.profile-customer-answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.profile-customer-answer-actions button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: #073b36;
  background: #61ead4;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
}

.profile-customer-answer-actions button + button {
  color: #111;
  background: rgba(0, 0, 0, 0.06);
}

.profile-customer-feedback {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
  margin: 20px -16px -34px;
  padding: 14px 18px max(20px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.06);
}

.profile-customer-feedback button {
  border: 0;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 24px;
  font-weight: 900;
}

.profile-customer-feedback p {
  margin: 0;
  color: rgba(0, 0, 0, 0.36);
  font-size: 13px;
}

.profile-feedback-history-page {
  background: #fff;
}

.profile-feedback-empty {
  display: grid;
  place-items: center;
  min-height: 62vh;
  color: rgba(0, 0, 0, 0.28);
  text-align: center;
}

.profile-feedback-empty span {
  display: grid;
  place-items: center;
  width: 150px;
  height: 96px;
  color: #8db3e7;
  font-size: 62px;
  opacity: 0.72;
}

.profile-feedback-empty p {
  margin: 12px 0 0;
  font-size: 18px;
}

.profile-feedback-history-list {
  display: grid;
  gap: 12px;
}

.profile-feedback-history-item {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  background: #f7f7f8;
}

.profile-feedback-history-item strong {
  color: #111;
  font-size: 16px;
}

.profile-feedback-history-item span {
  color: rgba(0, 0, 0, 0.42);
  font-size: 13px;
}

.profile-feedback-history-item em {
  color: rgba(0, 0, 0, 0.34);
  font-size: 12px;
  font-style: normal;
}

.profile-feedback-context {
  margin: -2px 0 0;
  color: rgba(0, 0, 0, 0.48);
  font-size: 13px;
}

.profile-feedback-category-row {
  display: grid;
  gap: 10px;
}

.profile-feedback-category-row > span {
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
  font-weight: 700;
}

.profile-feedback-category-row > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-feedback-category-row button {
  min-height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  color: rgba(0, 0, 0, 0.72);
  background: #f7f7f8;
  font-weight: 800;
}

.profile-feedback-category-row button.active {
  border-color: rgba(255, 47, 100, 0.24);
  color: #ff2f64;
  background: rgba(255, 47, 100, 0.08);
}

.profile-feedback-input {
  min-height: 132px;
  resize: vertical;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  color: #111;
  background: #f4f4f4;
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
}

.profile-feedback-submit {
  min-height: 44px;
}

.profile-reservation-page {
  position: fixed;
  inset: 0;
  z-index: 72;
  overflow: auto;
  padding: max(34px, env(safe-area-inset-top)) 18px 34px;
  color: #111;
  background: #fff;
}

.profile-reservation-topbar {
  display: grid;
  grid-template-columns: 44px 1fr 54px;
  align-items: center;
  min-height: 48px;
  margin-bottom: 34px;
}

.profile-reservation-topbar button {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 0;
  color: rgba(0, 0, 0, 0.55);
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
}

.profile-reservation-topbar button.active {
  color: #111;
  font-weight: 800;
}

.profile-reservation-back svg {
  width: 30px;
  height: 30px;
  color: #111;
  fill: currentColor;
}

.profile-reservation-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 0;
  white-space: nowrap;
}

.profile-reservation-title button {
  min-height: auto;
  color: rgba(0, 0, 0, 0.32);
  font-size: 21px;
  font-weight: 400;
}

.profile-reservation-title button.active {
  color: #111;
  font-size: 22px;
  font-weight: 700;
}

.profile-reservation-title i {
  width: 1px;
  height: 18px;
  background: rgba(0, 0, 0, 0.08);
}

.profile-reservation-title strong {
  font-size: 22px;
  font-weight: 700;
}

.profile-reservation-filters {
  display: flex;
  gap: 14px;
}

.profile-reservation-filters button {
  min-width: 112px;
  height: 45px;
  border: 0;
  border-radius: 9px;
  color: #111;
  background: #f8f8f8;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
}

.profile-reservation-filters button.active {
  color: #12bca8;
  background: #d9fff5;
  font-weight: 700;
}

.profile-reservation-edit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -18px 0 10px;
  border-radius: 14px;
  padding: 12px 14px;
  background: #f8f8f8;
}

.profile-reservation-edit-toolbar span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  font-weight: 700;
}

.profile-reservation-edit-toolbar button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  color: #fff;
  background: #ff365f;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.profile-reservation-edit-toolbar button:disabled {
  color: rgba(0, 0, 0, 0.34);
  background: rgba(0, 0, 0, 0.06);
}

.profile-reservation-upcoming {
  display: grid;
  gap: 22px;
  padding-top: 38px;
}

.profile-reservation-upcoming h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.profile-reservation-card {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
}

.profile-reservation-poster {
  display: grid;
  align-content: end;
  width: 82px;
  height: 110px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 30%, #f5fbff 0 14px, transparent 15px),
    radial-gradient(circle at 50% 40%, #101820 0 18px, transparent 19px),
    linear-gradient(155deg, #e9fbff, #b7d6ff 42%, #203e7a 75%, #0b152f);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.28);
}

.profile-reservation-poster i {
  padding: 8px 6px;
  color: #102043;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.profile-reservation-card strong,
.profile-reservation-card em,
.profile-reservation-card p {
  display: block;
}

.profile-reservation-card strong {
  margin: 6px 0 10px;
  font-size: 22px;
  font-weight: 500;
}

.profile-reservation-card em {
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.36);
  font-size: 17px;
  font-style: normal;
}

.profile-reservation-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgba(0, 0, 0, 0.36);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 17px;
  line-height: 1.8;
}

.profile-reservation-card button {
  margin-top: 11px;
  min-height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  color: #12bca8;
  background: #d9fff5;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.profile-reservation-wishlist {
  justify-self: center;
  margin-top: 22px;
  border: 0;
  color: rgba(0, 0, 0, 0.34);
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
}

.profile-reservation-wishlist-summary {
  margin: -12px 0 0;
  color: rgba(0, 0, 0, 0.42);
  font-size: 15px;
}

.profile-reservation-wishlist-list {
  display: grid;
  gap: 14px;
}

.profile-reservation-wishlist-card {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(20, 32, 54, 0.07);
}

.profile-reservation-wishlist-card .profile-reservation-poster {
  width: 68px;
  height: 88px;
}

.profile-reservation-wishlist-card strong,
.profile-reservation-wishlist-card em,
.profile-reservation-wishlist-card p,
.profile-reservation-wishlist-card b {
  display: block;
}

.profile-reservation-wishlist-card strong {
  overflow: hidden;
  margin-bottom: 5px;
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-reservation-wishlist-card em,
.profile-reservation-wishlist-card p {
  overflow: hidden;
  color: rgba(0, 0, 0, 0.42);
  font-size: 13px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-reservation-wishlist-card b {
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.36);
  font-size: 12px;
}

.profile-reservation-wishlist-card.reserved {
  background: linear-gradient(135deg, #f4fffb, #ffffff);
}

.profile-reservation-wishlist-card.reserved b {
  color: #13bca9;
}

.profile-reservation-wishlist-card > button {
  min-width: 74px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  color: #11bca8;
  background: #dffff7;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.profile-reservation-card .profile-reservation-select,
.profile-reservation-wishlist-card > .profile-reservation-select {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 24px;
  width: 24px;
  min-height: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.profile-reservation-card .profile-reservation-select.selected,
.profile-reservation-wishlist-card > .profile-reservation-select.selected {
  background: #12bca8;
}

.profile-reservation-empty {
  display: grid;
  place-items: center;
  min-height: 620px;
  color: rgba(0, 0, 0, 0.32);
  font-size: 18px;
}

.profile-reservation-empty > span {
  position: relative;
  display: block;
  width: 130px;
  height: 92px;
  margin-bottom: 24px;
}

.profile-reservation-empty > span i {
  position: absolute;
  inset: 24px 10px auto auto;
  width: 82px;
  height: 48px;
  transform: rotate(22deg);
  border: 9px solid #2fc7bf;
  border-radius: 50%;
}

.profile-reservation-empty > span i:first-child {
  inset: 4px auto auto 10px;
  transform: rotate(-18deg);
  background:
    radial-gradient(circle at 24px 18px, #fff 0 9px, transparent 10px),
    radial-gradient(circle at 53px 15px, #fff 0 9px, transparent 10px),
    radial-gradient(circle at 38px 35px, #fff 0 9px, transparent 10px),
    #2fc7bf;
}

.profile-reservation-empty > span::after {
  content: "";
  position: absolute;
  left: 56px;
  top: 42px;
  border-left: 24px solid #ffae35;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  transform: rotate(-14deg);
}

.profile-message-page {
  position: fixed;
  inset: 0;
  z-index: 72;
  overflow: auto;
  padding: max(34px, env(safe-area-inset-top)) 18px 34px;
  color: #111;
  background: #fff;
}

.profile-message-topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 48px;
  margin-bottom: 42px;
}

.profile-message-topbar strong {
  text-align: center;
  font-size: 21px;
  font-weight: 800;
}

.profile-message-topbar button {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 0;
  color: #111;
  background: transparent;
  font: inherit;
}

.profile-message-back svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.profile-message-main {
  display: grid;
  gap: 42px;
  padding-bottom: 50px;
}

.profile-message-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 72px;
  border: 0;
  color: #111;
  background: transparent;
  font: inherit;
  text-align: left;
}

.profile-message-row b,
.profile-message-row em {
  display: block;
}

.profile-message-row b {
  margin-bottom: 7px;
  font-size: 20px;
  font-weight: 500;
}

.profile-message-row em {
  color: rgba(0, 0, 0, 0.38);
  font-size: 16px;
  font-style: normal;
}

.profile-message-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  color: #ff9d26;
  border-radius: 50%;
  background: #fff4e7;
  font-size: 0;
}

.profile-message-icon::before {
  content: "";
  width: 28px;
  height: 28px;
  background: currentColor;
}

.profile-message-icon.notice::before {
  clip-path: polygon(50% 0, 75% 18%, 82% 62%, 100% 80%, 0 80%, 18% 62%, 25% 18%);
}

.profile-message-icon.fan {
  color: #28c2a2;
  background: #eafff9;
}

.profile-message-icon.fan::before {
  width: 31px;
  height: 31px;
  border-radius: 50% 50% 42% 42%;
  clip-path: polygon(50% 0, 71% 9%, 78% 31%, 69% 51%, 100% 100%, 0 100%, 31% 51%, 22% 31%, 29% 9%);
}

.profile-message-interactions {
  margin-inline: -18px;
  padding: 34px 18px 0;
  border-top: 8px solid #f7f7f7;
}

.profile-message-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.profile-message-section-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.profile-message-section-head button {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  color: #08a796;
  background: #e9fff9;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.profile-message-tabs {
  display: flex;
  gap: 10px;
}

.profile-message-tabs button {
  min-width: 76px;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  color: #111;
  background: #f6f6f6;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
}

.profile-message-tabs button.active {
  color: #12bca8;
  background: #d9fff5;
  font-weight: 700;
}

.profile-message-list {
  display: grid;
  gap: 12px;
  padding-top: 18px;
}

.profile-message-box-detail {
  margin: 0 0 30px;
  padding: 16px;
  border-radius: 16px;
  background: #f8f9f9;
}

.profile-message-box-detail .profile-message-section-head {
  margin-bottom: 8px;
}

.profile-message-box-detail .profile-message-section-head h3 {
  font-size: 18px;
}

.profile-message-box-detail .profile-message-list {
  padding-top: 6px;
}

.profile-message-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: transparent;
  text-align: left;
  font: inherit;
}

.profile-message-card.unread strong {
  font-weight: 900;
}

.profile-message-unread {
  border-radius: 999px;
  padding: 3px 7px;
  color: #fff;
  background: #ff365f;
  font-size: 11px;
  font-weight: 800;
}

.profile-message-card i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #effffb;
  color: #10bfae;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.profile-message-card span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.profile-message-card strong {
  color: #111;
  font-size: 16px;
}

.profile-message-card em {
  color: rgba(0, 0, 0, 0.42);
  font-size: 13px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-message-context {
  color: rgba(0, 0, 0, 0.34);
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-message-card b {
  color: rgba(0, 0, 0, 0.32);
  font-size: 12px;
}

.profile-message-empty {
  display: grid;
  place-items: center;
  min-height: 380px;
  color: rgba(0, 0, 0, 0.32);
  font-size: 17px;
}

.profile-message-empty > span {
  position: relative;
  display: block;
  width: 130px;
  height: 92px;
  margin-bottom: 24px;
}

.profile-message-empty > span i {
  position: absolute;
  inset: 24px 10px auto auto;
  width: 82px;
  height: 48px;
  transform: rotate(22deg);
  border: 9px solid #2fc7bf;
  border-radius: 50%;
}

.profile-message-empty > span i:first-child {
  inset: 4px auto auto 10px;
  transform: rotate(-18deg);
  background:
    radial-gradient(circle at 24px 18px, #fff 0 9px, transparent 10px),
    radial-gradient(circle at 53px 15px, #fff 0 9px, transparent 10px),
    radial-gradient(circle at 38px 35px, #fff 0 9px, transparent 10px),
    #2fc7bf;
}

.profile-message-empty > span::after {
  content: "";
  position: absolute;
  left: 56px;
  top: 42px;
  border-left: 24px solid #ffae35;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  transform: rotate(-14deg);
}

.profile-feature-backdrop {
  position: fixed;
  inset: 0;
  z-index: 62;
  background: rgba(0, 0, 0, 0.38);
}

.profile-feature-sheet {
  position: fixed;
  left: 50%;
  bottom: 78px;
  z-index: 63;
  display: grid;
  gap: 16px;
  width: min(470px, calc(100vw - 24px));
  max-height: min(58vh, 520px);
  overflow: auto;
  padding: 10px 16px 18px;
  transform: translateX(-50%);
  color: #111;
  border-radius: 22px 22px 18px 18px;
  background: #fff;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.22);
}

.profile-feature-handle {
  justify-self: center;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
}

.profile-feature-header,
.profile-feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.profile-feature-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}

.profile-feature-header button,
.profile-feedback-submit {
  border: 0;
  border-radius: 999px;
  background: #f3f3f3;
  color: #111;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 12px;
}

.profile-feature-balance {
  display: grid;
  gap: 4px;
  padding: 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #ff8a19, #10c9bc);
}

.profile-feature-balance span {
  font-size: 13px;
  opacity: 0.86;
}

.profile-feature-balance strong {
  font-size: 32px;
  line-height: 1;
}

.profile-feature-list {
  display: grid;
  gap: 10px;
}

.profile-feature-row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.profile-feature-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-feature-row strong {
  font-size: 15px;
}

.profile-feature-row small,
.profile-feature-empty span,
.profile-feature-copy {
  color: rgba(0, 0, 0, 0.48);
  font-size: 13px;
  line-height: 1.45;
}

.profile-feature-row b {
  flex: 0 0 auto;
  color: #ff7418;
  font-size: 14px;
}

.profile-feature-empty {
  display: grid;
  gap: 8px;
  padding: 24px 8px;
  text-align: center;
}

.profile-feature-empty strong {
  font-size: 18px;
}

.profile-scan-box {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin: 8px auto 0;
  border: 2px dashed rgba(0, 0, 0, 0.16);
  border-radius: 24px;
  color: #10c9bc;
}

.profile-scan-box svg {
  width: 44px;
  height: 44px;
  fill: currentColor;
}

.profile-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-feature-tags span,
.profile-feature-tags button {
  border: 0;
  padding: 8px 12px;
  border-radius: 999px;
  color: #008e82;
  background: #ddfaf5;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.profile-feature-tags button.active {
  color: #fff;
  background: #10c9bc;
}

.profile-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: #111;
  background: transparent;
  font: inherit;
  text-align: left;
}

.profile-setting-row span {
  display: grid;
  gap: 4px;
}

.profile-setting-row strong {
  font-size: 15px;
}

.profile-setting-row small {
  color: rgba(0, 0, 0, 0.48);
  font-size: 13px;
}

.profile-setting-row i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 26px;
  border-radius: 999px;
  color: #fff;
  background: #10c9bc;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.profile-setting-row[aria-pressed="false"] i {
  background: rgba(0, 0, 0, 0.2);
}

.profile-feedback-input {
  min-height: 112px;
  resize: none;
  border: 0;
  outline: 0;
  border-radius: 16px;
  padding: 12px;
  color: #111;
  background: #f5f5f5;
  font: inherit;
  font-size: 14px;
}

.profile-feedback-submit {
  justify-self: stretch;
  color: #fff;
  background: #10c9bc;
  padding: 12px 14px;
}

.profile-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.76);
}

.profile-side-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 61;
  width: min(65vw, 280px);
  height: 100vh;
  padding: max(76px, env(safe-area-inset-top)) 28px 28px;
  transform: translateX(100%);
  transition: transform 180ms ease;
  background: linear-gradient(#effffb, #fff);
}

.profile-side-menu.open {
  transform: translateX(0);
}

.profile-menu-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 18px;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  color: #111;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
}

.profile-menu-item .profile-svg {
  width: 28px;
  height: 28px;
}

.profile-menu-item b {
  color: rgba(0, 0, 0, 0.38);
  font-size: 30px;
  font-weight: 400;
}

.profile-menu-brand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  display: flex;
  justify-content: center;
  gap: 8px;
  color: rgba(0, 0, 0, 0.12);
  font-size: 16px;
  font-weight: 800;
}

.profile-menu-brand svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.placeholder-panel {
  display: none;
  place-items: center;
  min-height: 100vh;
  color: #fff;
}

.placeholder-panel.active {
  display: grid;
}

.placeholder-card {
  width: min(340px, calc(100vw - 48px));
  text-align: center;
  padding: 28px 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.placeholder-card .tab-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  color: #ff365f;
}

.placeholder-card h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.placeholder-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
}

.shopping-panel {
  display: none;
  min-height: 100vh;
  overflow-y: auto;
  padding: max(28px, env(safe-area-inset-top)) 16px 94px;
  color: #111;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 236, 176, 0.8), transparent 13rem),
    radial-gradient(circle at 92% 0%, rgba(189, 248, 237, 0.82), transparent 14rem),
    #f7f7f5;
}

.shopping-panel.active {
  display: block;
}

.shopping-page {
  max-width: 780px;
  margin: 0 auto;
}

.shopping-pull-refresh {
  display: grid;
  place-items: center;
  overflow: hidden;
  height: 0;
  color: rgba(0, 0, 0, 0.42);
  font-size: 13px;
  font-weight: 800;
  transition: height 160ms ease, color 160ms ease;
}

.shopping-pull-refresh.ready {
  color: #ff7a18;
}

.shopping-pull-refresh.refreshing {
  color: #111;
}

.shopping-coupon-page {
  min-height: 100vh;
  padding: max(18px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
  color: #111;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 236, 176, 0.72), transparent 13rem),
    radial-gradient(circle at 92% 0%, rgba(189, 248, 237, 0.72), transparent 14rem),
    #f7f7f5;
}

.shopping-coupon-list {
  display: grid;
  gap: 12px;
}

.shopping-coupon-card {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(255, 80, 49, 0.08);
}

.shopping-coupon-card > div {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: #fff;
  background: linear-gradient(135deg, #ff4f31, #ff7a18);
}

.shopping-coupon-card > div strong {
  font-size: 24px;
  font-weight: 950;
}

.shopping-coupon-card > div span {
  font-size: 12px;
  font-weight: 900;
}

.shopping-coupon-card section {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 16px 14px 16px 0;
}

.shopping-coupon-card b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 950;
}

.shopping-coupon-card p,
.shopping-coupon-card small {
  margin: 0;
  color: rgba(0, 0, 0, 0.48);
  font-size: 13px;
}

.shopping-coupon-state {
  margin-top: 24px;
}

.shopping-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.shopping-hero .tab-icon {
  width: 36px;
  height: 36px;
  color: #ff7a18;
}

.shopping-hero h2 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 900;
}

.shopping-hero p {
  margin: 0;
  color: rgba(0, 0, 0, 0.48);
  font-size: 13px;
  line-height: 1.45;
}

.shopping-cart-entry {
  border: 0;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  color: #111;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(255, 54, 95, 0.12);
}

.shopping-cart-entry b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  border-radius: 999px;
  color: #fff;
  background: #ff365f;
  font-size: 11px;
}

.shopping-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.shopping-search-shell {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 6px 0 12px;
  border-radius: 16px;
  color: #96969c;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px rgba(255, 80, 49, 0.08);
}

.shopping-search-shell .search-icon,
.shopping-search-shell svg {
  width: 20px;
  height: 20px;
}

.shopping-search-shell input {
  min-width: 0;
  border: 0;
  outline: none;
  color: #111;
  background: transparent;
  font-size: 18px;
  font-weight: 500;
}

.shopping-search-shell input::placeholder {
  color: #99999f;
}

.shopping-search-shell button {
  min-width: 64px;
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #ff4f31;
  font-size: 16px;
  font-weight: 900;
}

.shopping-cart-icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 50px;
  border: 0;
  color: #111;
  background: transparent;
}

.shopping-cart-icon-button .tab-icon {
  width: 32px;
  height: 32px;
  color: currentColor;
}

.shopping-cart-icon-button .tab-icon svg {
  width: 32px;
  height: 32px;
}

.shopping-cart-icon-button b {
  position: absolute;
  top: 4px;
  right: 0;
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  border-radius: 999px;
  padding: 0 5px;
  color: #fff;
  background: #ff4f31;
  font-size: 11px;
  font-weight: 900;
}

.shopping-quick-card {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 10px;
  border-radius: 16px;
  padding: 12px 8px 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(255, 80, 49, 0.08);
}

.shopping-quick-action {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  border: 0;
  color: #17171b;
  background: transparent;
  font: inherit;
}

.shopping-quick-action span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #050505;
}

.shopping-quick-action svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shopping-quick-action b {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(1px);
  min-width: 30px;
  border-radius: 999px;
  padding: 1px 6px;
  color: #fff;
  background: #ff4f31;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.shopping-quick-action strong {
  overflow: visible;
  max-width: 100%;
  color: #22232a;
  text-align: center;
  white-space: normal;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.18;
}

.shopping-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 12px;
}

.shopping-toolbar > label:not(.shopping-search-shell) {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 13px;
  border-radius: 8px;
  color: #8f9097;
  background: #fff;
}

.shopping-toolbar > label:not(.shopping-search-shell) svg {
  width: 20px;
  height: 20px;
}

.shopping-toolbar > label:not(.shopping-search-shell) input {
  min-width: 0;
  border: 0;
  outline: none;
  color: #111;
  background: transparent;
  font-size: 15px;
}

.shopping-toolbar > button:not(.shopping-cart-icon-button),
.shopping-sort-row button,
.shopping-category-rail button {
  border: 0;
  border-radius: 8px;
  color: #111;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.shopping-toolbar > button:not(.shopping-cart-icon-button) {
  min-width: 62px;
}

.shopping-category-rail,
.shopping-sort-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.shopping-category-rail::-webkit-scrollbar,
.shopping-sort-row::-webkit-scrollbar {
  display: none;
}

.shopping-category-rail button,
.shopping-sort-row button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  color: rgba(0, 0, 0, 0.64);
}

.shopping-category-rail button.active,
.shopping-sort-row button.active {
  color: #fff;
  background: #111;
}

.shopping-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shopping-product-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
}

.shopping-product-link {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
}

.shopping-shop-page {
  position: relative;
  min-height: calc(100vh - 72px);
  margin: -18px -16px 0;
  padding-bottom: 24px;
  color: #111;
  background: #f5f7fa;
}

.shopping-shop-header {
  min-height: 166px;
  padding-top: max(46px, env(safe-area-inset-top));
  color: #fff;
  background: linear-gradient(135deg, var(--shop-theme-start), var(--shop-theme));
}

.shopping-shop-info-card {
  position: relative;
  min-height: 104px;
  padding: 12px 18px 22px;
  background-image: var(--shop-header-bg);
  background-position: center;
  background-size: cover;
}

.shopping-shop-info-card.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}

.shopping-shop-info {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.shopping-shop-logo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255, 255, 255, 0.54);
  border-radius: 999px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
    var(--shop-theme);
  background-position: center;
  background-size: cover;
  font-weight: 950;
}

.shopping-shop-text {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.shopping-shop-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 950;
}

.shopping-shop-text span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shopping-shop-text b {
  border-radius: 999px;
  padding: 3px 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 800;
}

.shopping-shop-info button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.24);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.shopping-shop-text button[data-shopping-shop-favorite] {
  color: #fff;
  background: rgba(255, 255, 255, 0.36);
}

.shopping-shop-text button[data-shopping-shop-favorite][aria-pressed="true"] {
  color: #ff365f;
  background: #fff;
}

.shopping-shop-info button .search-icon {
  width: 16px;
  height: 16px;
}

.shopping-shop-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  color: #b45309;
  background: #fffbeb;
  font-size: 13px;
  font-weight: 750;
}

.shopping-shop-notice .search-icon {
  width: 18px;
  height: 18px;
}

.shopping-shop-notice p {
  margin: 0;
}

.shopping-shop-banners {
  display: grid;
  gap: 10px;
  margin: 12px;
}

.shopping-shop-banners span {
  position: relative;
  min-height: 140px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 246, 234, 0.86), rgba(255, 168, 76, 0.72)),
    #fff;
  background-position: center;
  background-size: cover;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
}

.shopping-shop-banners b {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 999px;
  padding: 3px 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.38);
  font-size: 11px;
}

.shopping-shop-quick-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 12px 12px;
  border-radius: 8px;
  padding: 12px 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.04);
}

.shopping-shop-quick-links button {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  border: 0;
  color: #333;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.shopping-shop-quick-links span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--shop-theme);
  background: var(--shop-theme-soft);
  font-size: 18px;
  font-weight: 950;
}

.shopping-shop-quick-links b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopping-shop-marketing-block {
  display: grid;
  gap: 12px;
  margin: 0 12px 12px;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.04);
}

.shopping-shop-block-header,
.shopping-shop-goods-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shopping-shop-block-header strong,
.shopping-shop-goods-title strong {
  color: var(--shop-theme);
  font-size: 14px;
  font-weight: 950;
}

.shopping-shop-block-header span {
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--shop-theme);
  background: var(--shop-theme-soft);
  font-size: 10px;
  font-weight: 900;
}

.shopping-shop-marketing-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shopping-shop-marketing-content.single-layout {
  grid-template-columns: minmax(0, 1fr);
}

.shopping-shop-promo {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  padding: 10px;
  color: #333;
  background: #fafafa;
  font: inherit;
  text-align: left;
}

.shopping-shop-promo span {
  justify-self: start;
  border-radius: 4px;
  padding: 2px 6px;
  color: #fff;
  background: var(--shop-theme);
  font-size: 10px;
  font-weight: 900;
}

.shopping-shop-promo i {
  min-height: 78px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255, 236, 205, 0.9), rgba(255, 114, 47, 0.72)),
    #f4f4f5;
  background-position: center;
  background-size: cover;
}

.shopping-shop-promo strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.shopping-shop-promo b {
  color: var(--shop-theme);
  font-size: 13px;
}

.shopping-shop-promo small {
  margin-left: 5px;
  color: #999;
  font-size: 10px;
  text-decoration: line-through;
}

.shopping-shop-goods-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.shopping-shop-goods-title {
  justify-content: flex-start;
  margin: 0 12px;
}

.shopping-shop-goods-title span {
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: var(--shop-theme);
}

.shopping-shop-sort-row {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px;
  background: rgba(245, 247, 250, 0.92);
  backdrop-filter: blur(10px);
  scrollbar-width: none;
}

.shopping-shop-sort-row::-webkit-scrollbar {
  display: none;
}

.shopping-shop-sort-row button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: rgba(0, 0, 0, 0.66);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.shopping-shop-sort-row button.active {
  color: #fff;
  background: var(--shop-theme);
}

.shopping-shop-goods-grid {
  display: grid;
  gap: 12px;
  padding: 0 12px 18px;
}

.shopping-shop-goods-grid.grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shopping-shop-goods-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.shopping-shop-goods-grid.swipe {
  grid-auto-flow: column;
  grid-auto-columns: 128px;
  overflow-x: auto;
  padding-bottom: 22px;
  scrollbar-width: none;
}

.shopping-shop-goods-grid.swipe::-webkit-scrollbar {
  display: none;
}

.shopping-shop-goods-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 0 0 10px;
  color: #333;
  background: #fff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
  font: inherit;
  text-align: left;
}

.shopping-shop-goods-card.single {
  grid-template-columns: 136px minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 10px 0 0;
}

.shopping-shop-goods-card > span {
  min-height: 160px;
  background:
    linear-gradient(135deg, rgba(255, 236, 205, 0.9), rgba(255, 114, 47, 0.72)),
    #f4f4f5;
  background-position: center;
  background-size: cover;
}

.shopping-shop-goods-card.single > span {
  min-height: 118px;
}

.shopping-shop-goods-card.swipe > span {
  min-height: 112px;
}

.shopping-shop-goods-card strong,
.shopping-shop-goods-card small,
.shopping-shop-goods-card b {
  margin-inline: 10px;
}

.shopping-shop-goods-card strong {
  display: -webkit-box;
  overflow: hidden;
  min-height: 36px;
  color: #333;
  font-size: 13px;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shopping-shop-goods-card small {
  color: #999;
  font-size: 11px;
}

.shopping-shop-goods-card b {
  color: var(--shop-theme);
  font-size: 16px;
  font-weight: 950;
}

.shopping-product-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.72;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 230, 184, 0.88), rgba(255, 122, 24, 0.84)),
    #f4f4f5;
  background-position: center;
  background-size: cover;
}

.shopping-product-art b {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  font-size: 12px;
}

.shopping-product-card strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopping-product-card p {
  min-height: 34px;
  margin: 0;
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 1.4;
}

.shopping-product-meta,
.shopping-product-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shopping-product-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.shopping-product-actions > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopping-product-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  min-width: 34px;
  min-height: 32px;
  padding: 0;
  font-weight: 800;
  border-radius: 8px;
  line-height: 1.05;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
}

.shopping-product-actions button.shopping-product-action-btn {
  width: 34px;
}

.shopping-product-actions button.shopping-favorite-btn {
  border: 1px solid #ff365f;
  color: #ff365f;
  background: #fff;
}

.shopping-product-actions button.shopping-favorite-btn[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff4d73, #ff7a18);
}

.shopping-product-meta {
  color: rgba(0, 0, 0, 0.42);
  font-size: 11px;
}

.shopping-product-actions > span {
  color: #ff365f;
  font-size: 16px;
  font-weight: 900;
}

.shopping-primary-action,
.shopping-cart-footer button,
.shopping-error-state button {
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  color: #fff;
  background: #ff365f;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.shopping-product-actions button.shopping-add-cart-btn {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #ff365f, #ff7a18);
}

.shopping-product-actions .search-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shopping-product-actions .search-icon-wrap .search-icon {
  width: 15px;
  height: 15px;
}

.shopping-product-actions button.shopping-add-cart-btn .search-icon-wrap,
.shopping-product-actions button.shopping-favorite-btn[aria-pressed="true"] .search-icon-wrap {
  color: #fff;
}

.shopping-load-more-sentinel {
  min-height: 18px;
}

.shopping-load-more-state {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 10px 0;
  text-align: center;
  color: rgba(0, 0, 0, 0.58);
  font-size: 13px;
  font-weight: 800;
}

.shopping-load-more-state strong {
  color: #111;
}

.shopping-load-more-state button {
  border: 0;
  border-radius: 6px;
  min-height: 28px;
  padding: 0 10px;
  color: #fff;
  background: #ff365f;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.shopping-loading-state,
.shopping-empty-state,
.shopping-error-state {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  padding: 24px;
  border-radius: 8px;
  text-align: center;
  color: rgba(0, 0, 0, 0.58);
  background: rgba(255, 255, 255, 0.82);
}

.shopping-empty-state strong,
.shopping-error-state strong {
  color: #111;
  font-size: 17px;
}

.shopping-empty-state p {
  margin: 0;
  font-size: 13px;
}

.shopping-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.shopping-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}

.shopping-drawer-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: grid;
  gap: 14px;
  width: min(100%, 480px);
  max-height: min(82vh, 720px);
  overflow-y: auto;
  padding: 18px 16px max(22px, env(safe-area-inset-bottom));
  border-radius: 8px 8px 0 0;
  color: #111;
  background: #fff;
  box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
}

.shopping-drawer-close {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: #111;
  background: #f1f2f4;
  font-size: 22px;
}

.shopping-detail-page {
  position: relative;
  min-height: calc(100vh - 72px);
  margin: -18px -16px 0;
  padding-bottom: 96px;
  background: #f5f7fa;
}

.shopping-floating-back {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: calc(50% - min(50vw, 240px) + 16px);
  z-index: 70;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.34);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
}

.shopping-floating-back .search-icon {
  width: 20px;
  height: 20px;
}

.shopping-floating-back svg,
.shopping-action-bar svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shopping-cart-entry.compact {
  min-height: 36px;
  padding: 0 10px;
  font-size: 12px;
}

.shopping-detail-gallery {
  position: relative;
  min-height: min(100vw, 430px);
  background:
    linear-gradient(135deg, rgba(255, 236, 205, 0.9), rgba(255, 114, 47, 0.72)),
    #f4f4f5;
  background-position: center;
  background-size: cover;
}

.shopping-detail-gallery span {
  position: absolute;
  right: 16px;
  bottom: 28px;
  border-radius: 999px;
  padding: 4px 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.38);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.shopping-detail-card {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin: -18px 16px 0;
  padding: 20px 16px 16px;
  border-radius: 20px 20px 8px 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
  backdrop-filter: blur(20px);
}

.glass-overlap {
  border: 1px solid rgba(255, 255, 255, 0.76);
}

.shopping-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #ff365f;
  line-height: 1;
}

.shopping-price-row .currency {
  font-size: 16px;
  font-weight: 900;
}

.shopping-price-row .amount {
  font-size: 31px;
  font-weight: 950;
}

.shopping-price-row .orig-price {
  margin-left: 6px;
  color: rgba(0, 0, 0, 0.34);
  font-size: 13px;
  font-weight: 800;
  text-decoration: line-through;
}

.shopping-goods-title,
.shopping-cart-header h3 {
  margin: 0;
  color: #111;
  font-size: 19px;
  font-weight: 950;
  line-height: 1.2;
}

.shopping-goods-subtitle {
  margin: 0;
  color: rgba(0, 0, 0, 0.58);
  line-height: 1.5;
}

.shopping-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: rgba(0, 0, 0, 0.48);
  font-size: 12px;
  font-weight: 700;
}

.shopping-service-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: calc(100% - 32px);
  min-height: 48px;
  margin: 10px 16px 0;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: #111;
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.05);
  font: inherit;
  font-size: 13px;
  text-align: left;
}

.shopping-service-card + .shopping-service-card {
  margin-top: 8px;
}

.shopping-service-card .label {
  color: rgba(0, 0, 0, 0.48);
  font-weight: 900;
}

.shopping-service-card strong,
.shopping-service-card b {
  color: rgba(0, 0, 0, 0.72);
}

.shopping-content-card {
  display: grid;
  gap: 14px;
  margin: 10px 16px 0;
  padding: 18px 16px 22px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.05);
}

.shopping-content-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: #111;
  font-size: 15px;
  font-weight: 950;
}

.shopping-content-title span {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.shopping-rich-content {
  display: grid;
  gap: 10px;
  color: rgba(0, 0, 0, 0.62);
  line-height: 1.7;
}

.shopping-rich-content p {
  margin: 0;
}

.shopping-detail-bottom-spacer {
  height: 12px;
}

.shopping-action-bar {
  position: fixed;
  right: 50%;
  bottom: 0;
  z-index: 65;
  display: grid;
  grid-template-columns: repeat(4, minmax(42px, 1fr)) minmax(88px, 1.45fr) minmax(88px, 1.45fr);
  align-items: center;
  gap: 5px;
  width: min(100%, 480px);
  padding: 6px 10px max(6px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -12px 30px rgba(17, 24, 39, 0.12);
  transform: translateX(50%);
  backdrop-filter: blur(18px);
}

.shopping-action-bar button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.7);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
}

.shopping-action-bar button[data-shopping-favorite] {
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #555;
  background: #fff;
}

.shopping-action-bar button[data-shopping-favorite][aria-pressed="true"] {
  color: #ff365f;
  border-color: rgba(255, 54, 95, 0.35);
  background: #fff0f5;
}

.shopping-action-bar button > span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-bottom: 2px;
}

.shopping-action-bar .tab-icon,
.shopping-action-bar .search-icon {
  width: 18px;
  height: 18px;
  color: inherit;
}

.shopping-action-bar b {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 4px;
  color: #fff;
  background: #ff365f;
  font-size: 10px;
  line-height: 16px;
}

.shopping-action-bar button.warning,
.shopping-action-bar button.danger {
  min-height: 40px;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.shopping-action-bar button.warning {
  background: linear-gradient(135deg, #ffb21f, #ff7a18);
}

.shopping-action-bar button.danger {
  background: linear-gradient(135deg, #ff4d73, #f01246);
}

.shopping-sku-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shopping-sku-list span {
  border-radius: 8px;
  padding: 8px 10px;
  color: rgba(0, 0, 0, 0.66);
  background: #f4f4f5;
  font-size: 12px;
}

.shopping-cart-header,
.shopping-cart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shopping-cart-header button {
  border: 0;
  color: #ff365f;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.shopping-cart-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: #f7f7f8;
}

.shopping-cart-thumb {
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 230, 184, 0.88), rgba(255, 122, 24, 0.84)),
    #f4f4f5;
  background-position: center;
  background-size: cover;
}

.shopping-cart-item div {
  min-width: 0;
}

.shopping-cart-item strong {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopping-cart-item small {
  color: rgba(0, 0, 0, 0.54);
}

.shopping-cart-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.shopping-cart-stepper button {
  border: 0;
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #111;
  background: #fff;
  font: inherit;
  font-weight: 900;
}

.shopping-cart-stepper button:last-child {
  margin-left: auto;
  padding: 0 10px;
  color: #ff365f;
}

.shopping-cart-footer {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: #fff;
}

.shopping-cart-footer span {
  font-size: 14px;
}

.shopping-cart-footer b {
  color: #ff365f;
  font-size: 22px;
}

.shopping-cart-footer button:disabled {
  opacity: 0.5;
}

.shopping-checkout-page {
  min-height: 100vh;
  padding: max(18px, env(safe-area-inset-top)) 14px max(92px, env(safe-area-inset-bottom));
  color: #111;
  background: #f6f6f7;
}

.shopping-confirm-topbar {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  min-height: 44px;
  margin-bottom: 14px;
}

.shopping-confirm-topbar button {
  border: 0;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 34px;
  line-height: 1;
}

.shopping-confirm-topbar strong {
  text-align: center;
  font-size: 20px;
  font-weight: 900;
}

.shopping-confirm-card {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.shopping-confirm-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.shopping-address-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  color: #111;
  background: #f7f7f8;
  text-align: left;
  font: inherit;
}

.shopping-address-card span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.shopping-address-card b {
  font-size: 15px;
  font-weight: 900;
}

.shopping-address-card small {
  color: rgba(0, 0, 0, 0.52);
  font-size: 13px;
  line-height: 1.45;
}

.shopping-address-card i {
  flex: 0 0 auto;
  color: rgba(0, 0, 0, 0.38);
  font-style: normal;
  font-weight: 800;
}

.shopping-confirm-card p,
.shopping-confirm-card span,
.shopping-confirm-item small {
  margin: 0;
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
  line-height: 1.45;
}

.shopping-confirm-item {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.shopping-confirm-item:first-of-type {
  border-top: 0;
}

.shopping-checkout-group {
  display: grid;
  gap: 2px;
}

.shopping-checkout-group + .shopping-checkout-group {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.shopping-checkout-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.shopping-checkout-group header strong {
  overflow: hidden;
  color: #111;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 900;
}

.shopping-checkout-group header span {
  flex: 0 0 auto;
  color: rgba(0, 0, 0, 0.44);
  font-size: 12px;
  font-weight: 800;
}

.shopping-confirm-item div {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.shopping-confirm-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.shopping-confirm-item em {
  color: #ff365f;
  font-style: normal;
  font-weight: 900;
}

.shopping-quote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.shopping-quote-row span,
.shopping-quote-hint {
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
}

.shopping-quote-row b {
  color: #111;
  font-size: 14px;
}

.shopping-quote-row.discount b {
  color: #ff365f;
}

.shopping-points-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 0 12px;
  color: #111;
  background: #f7f7f8;
  font: inherit;
  text-align: left;
}

.shopping-points-toggle span {
  color: #111;
  font-size: 14px;
  font-weight: 900;
}

.shopping-points-toggle b {
  color: rgba(0, 0, 0, 0.48);
  font-size: 12px;
}

.shopping-points-toggle.active {
  background: #fff0f3;
  box-shadow: inset 0 0 0 1px rgba(255, 54, 95, 0.2);
}

.shopping-points-toggle.active b {
  color: #ff365f;
}

.shopping-points-toggle:disabled {
  opacity: 0.54;
}

.shopping-payment-card button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  min-height: 56px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  color: #111;
  background: #fff;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.shopping-payment-card button.active {
  border-color: #ff365f;
  background: #fff0f3;
  box-shadow: inset 0 0 0 1px rgba(255, 54, 95, 0.36);
}

.shopping-payment-card button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  background: #f8f8f9;
}

.shopping-payment-card button span {
  color: #111;
  font-size: 15px;
  font-weight: 900;
}

.shopping-payment-card button i {
  align-self: center;
  grid-row: 1 / span 2;
  grid-column: 2;
  border-radius: 999px;
  padding: 3px 8px;
  color: rgba(0, 0, 0, 0.44);
  background: rgba(0, 0, 0, 0.05);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.shopping-payment-card button.active i {
  color: #fff;
  background: #ff365f;
}

.shopping-payment-card button b {
  grid-column: 1;
  color: rgba(0, 0, 0, 0.46);
  font-size: 12px;
}

.shopping-confirm-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08);
}

.shopping-confirm-footer span {
  color: rgba(0, 0, 0, 0.64);
  font-size: 14px;
}

.shopping-confirm-footer b {
  color: #ff365f;
  font-size: 22px;
  font-weight: 900;
}

.shopping-confirm-footer button {
  min-width: 132px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #ff365f;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
}

.shopping-confirm-footer button:disabled {
  opacity: 0.48;
}

.shopping-address-sheet {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: grid;
  align-items: end;
}

.shopping-address-sheet.editor-mode {
  align-items: stretch;
  background: #f5f6fa;
}

.shopping-address-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.38);
}

.shopping-address-panel {
  position: relative;
  z-index: 1;
  max-height: min(78vh, 680px);
  overflow: auto;
  border-radius: 22px 22px 0 0;
  padding: 14px 16px max(18px, env(safe-area-inset-bottom));
  background: #fff;
}

.shopping-address-editor-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: none;
  min-height: 100vh;
  overflow: auto;
  border-radius: 0;
  padding: 0 13px max(18px, env(safe-area-inset-bottom));
  color: #222;
  background: #f5f6fa;
}

.shopping-address-panel header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  min-height: 44px;
}

.shopping-address-panel header button {
  border: 0;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 30px;
}

.shopping-address-panel header strong {
  text-align: center;
  font-size: 18px;
  font-weight: 900;
}

.shopping-address-editor-panel header.shopping-address-editor-header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 80px;
  margin: 0 -13px;
  padding: max(12px, env(safe-area-inset-top)) 20px 12px;
  background: #fff;
}

.shopping-address-editor-panel header.shopping-address-editor-header button {
  width: 34px;
  min-height: 34px;
  color: #1583ff;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.shopping-address-editor-panel header.shopping-address-editor-header strong {
  font-size: 17px;
  font-weight: 900;
}

.shopping-address-list,
.shopping-address-form {
  display: grid;
  gap: 10px;
}

.shopping-address-editor-panel .shopping-address-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100vh - 106px - env(safe-area-inset-bottom));
  padding-top: 13px;
}

.shopping-address-row {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.shopping-address-row.active {
  border-color: rgba(255, 54, 95, 0.62);
  background: #fff5f7;
}

.shopping-address-row > button {
  display: grid;
  gap: 5px;
  border: 0;
  color: #111;
  background: transparent;
  text-align: left;
  font: inherit;
}

.shopping-address-row b {
  font-size: 15px;
}

.shopping-address-row span,
.shopping-address-empty {
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
  line-height: 1.45;
}

.shopping-address-row em {
  width: fit-content;
  border-radius: 999px;
  padding: 2px 8px;
  color: #ff365f;
  background: rgba(255, 54, 95, 0.1);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.shopping-address-row div {
  display: flex;
  gap: 8px;
}

.shopping-address-row div button,
.shopping-address-add,
.shopping-address-confirm,
.shopping-address-save {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  color: #fff;
  background: #ff365f;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.shopping-address-confirm:disabled {
  opacity: 0.45;
}

.shopping-address-save:disabled {
  opacity: 0.62;
}

.shopping-address-row div button {
  color: #333;
  background: #f1f1f2;
}

.shopping-address-form label {
  display: grid;
  gap: 6px;
}

.shopping-address-form label span,
.shopping-address-default span {
  color: rgba(0, 0, 0, 0.56);
  font-size: 13px;
  font-weight: 800;
}

.shopping-address-fields {
  overflow: hidden;
  border-radius: 9px;
  background: #fff;
}

.shopping-address-form .shopping-address-field-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  margin: 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.shopping-address-form .shopping-address-field-row:last-child {
  min-height: 78px;
  align-items: start;
  padding-top: 16px;
  border-bottom: 0;
}

.shopping-address-form .shopping-address-field-row span {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #303238;
  font-size: 15px;
  font-weight: 500;
}

.shopping-address-form .shopping-address-field-row span i {
  color: #ff2d55;
  font-style: normal;
}

.shopping-address-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #111;
  background: #fff;
  color-scheme: light;
  font: inherit;
  font-size: 15px;
  outline: 0;
}

.shopping-address-form input::placeholder {
  color: rgba(48, 50, 56, 0.28);
}

.shopping-address-default {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  min-height: 46px;
  border-radius: 8px;
  padding: 0 17px;
  background: #fff;
}

.shopping-address-default span {
  color: #303238;
  font-size: 15px;
  font-weight: 500;
}

.shopping-address-default input {
  appearance: none;
  position: relative;
  width: 46px;
  height: 28px;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  background: #e4e5ea;
  accent-color: #ff365f;
  color-scheme: light;
  transition: background 0.18s ease;
}

.shopping-address-default input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
  transition: transform 0.18s ease;
}

.shopping-address-default input:checked {
  background: #ff6a45;
}

.shopping-address-default input:checked::before {
  transform: translateX(18px);
}

.shopping-address-editor-panel .shopping-address-save {
  min-height: 44px;
  margin-top: auto;
  border-radius: 999px;
  padding: 0 18px;
  background: linear-gradient(90deg, #ff5a35, #ff8a68);
  font-size: 16px;
  font-weight: 800;
}

.game-panel {
  display: none;
  min-height: 100vh;
  overflow-y: auto;
  padding: max(28px, env(safe-area-inset-top)) 16px 94px;
  color: #111;
  background:
    radial-gradient(circle at 12% 0%, rgba(218, 255, 184, 0.75), transparent 13rem),
    radial-gradient(circle at 92% 0%, rgba(206, 229, 255, 0.8), transparent 14rem),
    #f7f7f5;
}

.game-panel.active {
  display: block;
}

.game-page {
  max-width: 780px;
  margin: 0 auto;
}

.game-hero,
.game-checkin-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
  padding: 18px;
  border: 0;
  border-radius: 8px;
  color: #111;
  background: rgba(255, 255, 255, 0.82);
  font: inherit;
  text-align: left;
}

.game-hero .tab-icon {
  width: 38px;
  height: 38px;
  color: #10b981;
}

.game-hero h2,
.game-checkin-card strong {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.game-hero p,
.game-checkin-card span {
  margin: 0;
  color: rgba(0, 0, 0, 0.48);
  font-size: 13px;
  line-height: 1.45;
}

.game-hero b {
  color: #ff7a18;
}

.game-checkin-card {
  justify-content: space-between;
}

.game-checkin-card.done {
  opacity: 0.72;
}

.game-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.game-task-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border-radius: 8px;
  background: #fff;
}

.game-task-card > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #fff;
  background: #10b981;
}

.game-task-card.blue > span { background: #3b82f6; }
.game-task-card.yellow > span { background: #f59e0b; }
.game-task-card.pink > span { background: #ff365f; }

.game-task-card .tab-icon {
  width: 24px;
  height: 24px;
}

.game-task-card strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-task-card p {
  min-height: 34px;
  margin: 0;
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 1.4;
}

.game-task-card button {
  border: 0;
  border-radius: 999px;
  padding: 8px 10px;
  color: #fff;
  background: #111;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.catalog-panel {
  min-height: 100vh;
  padding: max(18px, env(safe-area-inset-top)) 12px 118px;
  color: #111;
  background:
    radial-gradient(circle at 0% -8%, rgba(236, 255, 170, 0.56), transparent 11rem),
    radial-gradient(circle at 100% -2%, rgba(185, 248, 238, 0.66), transparent 12rem),
    #f7f7f6;
}

.library-header {
  display: block;
  max-width: 560px;
  margin: 0 auto 18px;
}

.library-header h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.library-header p {
  margin: 0;
  color: #a1a1aa;
  font-size: 13px;
}

.library-content {
  display: grid;
  gap: 18px;
  max-width: 560px;
  margin: 0 auto;
}

.metrics-content {
  display: grid;
  gap: 18px;
  max-width: 560px;
  margin: 0 auto;
}

.admin-content {
  display: grid;
  gap: 18px;
  width: min(100%, 1180px);
  max-width: 1180px;
  margin: 0 auto;
}

.ops-admin-panel {
  padding: max(18px, env(safe-area-inset-top)) 14px 92px;
  background:
    radial-gradient(circle at 12% 0%, rgba(16, 191, 166, 0.28), transparent 18rem),
    radial-gradient(circle at 96% 8%, rgba(255, 54, 95, 0.22), transparent 17rem),
    #0b0b0d;
}

.ops-admin-content {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}

.ops-dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 112px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(16, 191, 166, 0.24), rgba(255, 54, 95, 0.14)),
    rgba(255, 255, 255, 0.08);
}

.ops-dashboard-hero span,
.ops-dashboard-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.ops-dashboard-hero h2 {
  margin: 5px 0;
  font-size: 27px;
  line-height: 1;
}

.ops-runtime-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ops-runtime-strip span {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  line-height: 1;
}

.ops-admin-actions {
  display: grid;
  gap: 8px;
}

.ops-admin-secondary {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  min-height: 36px;
  padding: 0 13px;
  color: #071512;
  background: #5eead4;
  font-size: 13px;
  font-weight: 800;
}

.ops-admin-secondary.ghost {
  color: #eafffb;
  background: rgba(255, 255, 255, 0.12);
}

.ops-kpi-grid,
.ops-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ops-kpi-card,
.ops-section,
.ops-surface-list article,
.ops-user-list article,
.ops-event-list article {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.ops-kpi-card {
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 13px;
}

.ops-kpi-card span,
.ops-kpi-card em {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-style: normal;
}

.ops-kpi-card strong {
  overflow: hidden;
  color: #fff;
  font-size: 26px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-section {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.ops-section .section-header {
  margin-bottom: 0;
}

.ops-surface-list,
.ops-user-list,
.ops-event-list {
  display: grid;
  gap: 8px;
}

.ops-surface-list article,
.ops-user-list article,
.ops-event-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 11px;
}

.ops-surface-list strong,
.ops-user-list strong,
.ops-event-list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-surface-list span,
.ops-user-list span,
.ops-event-list span {
  color: #5eead4;
  font-size: 12px;
  font-weight: 800;
}

.ops-surface-list em,
.ops-user-list p {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-style: normal;
}

.ops-module-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ops-module-chips span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.08);
}

.ops-module-chips b {
  font-size: 13px;
}

.ops-module-chips i {
  color: #5eead4;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.catalog-search-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 560px);
  min-height: 46px;
  margin: 0 auto 16px;
  border: 0;
  border-radius: 10px;
  padding: 0 15px;
  color: #a6a6aa;
  background: rgba(255, 255, 255, 0.94);
  text-align: left;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.catalog-search-entry svg {
  width: 20px;
  height: 20px;
  color: #a6a6aa;
}

.catalog-search-entry span {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-tool-tabs,
.catalog-rank-tabs,
.catalog-content {
  max-width: 560px;
  margin-inline: auto;
}

.catalog-tool-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.catalog-tool-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: #111;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
}

.catalog-tool-tabs strong {
  font-size: 16px;
  font-weight: 800;
}

.catalog-tool-icon {
  position: relative;
  width: 23px;
  height: 23px;
  color: currentColor;
}

.catalog-tool-icon-grid::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 25% 25%, currentColor 0 4px, transparent 4.5px),
    radial-gradient(circle at 75% 25%, currentColor 0 4px, transparent 4.5px),
    radial-gradient(circle at 25% 75%, currentColor 0 4px, transparent 4.5px),
    radial-gradient(circle at 75% 75%, currentColor 0 4px, transparent 4.5px);
}

.catalog-tool-icon-rank::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 20px;
  border-radius: 3px;
  background:
    linear-gradient(to top, currentColor 0 58%, transparent 58%) 0 0 / 5px 100% no-repeat,
    linear-gradient(to top, currentColor 0 86%, transparent 86%) 10px 0 / 5px 100% no-repeat,
    linear-gradient(to top, currentColor 0 42%, transparent 42%) 20px 0 / 5px 100% no-repeat;
}

.catalog-tool-icon-calendar {
  border: 3px solid currentColor;
  border-radius: 6px;
}

.catalog-tool-icon-calendar::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(-45deg);
}

.catalog-rank-tabs {
  display: grid;
  grid-template-columns: repeat(3, max-content) 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.catalog-rank-tabs button {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  color: #242426;
  background: #ededee;
  font-size: 18px;
  font-weight: 650;
}

.catalog-rank-tabs button.active {
  color: #02aa9d;
  background: #c8f4ec;
  font-weight: 900;
}

.catalog-rank-tabs[hidden] {
  display: none;
}

.catalog-pull-refresh {
  display: grid;
  place-items: center;
  overflow: hidden;
  height: 0;
  max-width: 560px;
  margin: 0 auto;
  color: rgba(0, 0, 0, 0.42);
  font-size: 13px;
  font-weight: 800;
  transition: height 160ms ease, color 160ms ease;
}

.catalog-pull-refresh.ready {
  color: #ff7a18;
}

.catalog-pull-refresh.refreshing {
  color: #111;
}

.catalog-rank-help {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #b8b8bb;
  border-radius: 50%;
  color: #9b9ba0;
  font-size: 14px;
  font-weight: 800;
}

.catalog-content {
  display: block;
}

.catalog-ranking-list {
  display: grid;
  gap: 24px;
}

.catalog-drama-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.catalog-drama-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 0 0 10px;
  color: #141414;
  background: #fff;
  text-align: left;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.045);
}

.catalog-drama-poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 0.76;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.18)),
    var(--poster-image),
    linear-gradient(145deg, #5342a8, #ce0f48 72%);
  background-position: center;
  background-size: cover;
}

.catalog-drama-badge {
  position: absolute;
  top: 0;
  left: 0;
  border-bottom-right-radius: 6px;
  padding: 5px 8px;
  color: #fff;
  background: linear-gradient(135deg, #ff7d5d, #ff394e);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.catalog-drama-poster em {
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

.catalog-drama-card strong {
  display: -webkit-box;
  min-height: 42px;
  margin-inline: 10px;
  overflow: hidden;
  color: inherit;
  font-size: 17px;
  line-height: 1.22;
  font-weight: 800;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catalog-drama-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
  margin-inline: 10px;
}

.catalog-drama-tags i {
  max-width: 66px;
  overflow: hidden;
  border-radius: 5px;
  padding: 3px 6px;
  color: #9a9a9f;
  background: #f4f4f5;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-drama-tags i:first-child {
  color: #c99136;
  background: #fff3df;
}

.catalog-rank-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  border: 0;
  padding: 0;
  color: #111;
  background: transparent;
  text-align: left;
}

.catalog-rank-cover {
  position: relative;
  display: block;
  width: 116px;
  aspect-ratio: 0.72;
  overflow: hidden;
  border-radius: 9px;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12)),
    var(--poster-image),
    linear-gradient(145deg, #252238, #a84a36);
  background-size: cover;
  background-position: center;
}

.catalog-rank-badge {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-bottom-right-radius: 8px;
  color: #fff;
  background: rgba(80, 80, 86, 0.76);
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.catalog-rank-badge.rank-1 {
  background: linear-gradient(135deg, #ffe05b, #ffad30);
}

.catalog-rank-badge.rank-2 {
  background: linear-gradient(135deg, #b9bcc6, #7e828c);
}

.catalog-rank-badge.rank-3 {
  background: linear-gradient(135deg, #ffb66a, #f07125);
}

.catalog-rank-body {
  display: grid;
  align-content: start;
  min-width: 0;
  padding-top: 4px;
}

.catalog-rank-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 12px;
}

.catalog-rank-topline strong {
  overflow: hidden;
  font-size: 19px;
  line-height: 1.28;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-rank-topline em {
  color: #ff6f23;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.catalog-rank-meta,
.catalog-rank-desc {
  overflow: hidden;
  color: #8d8d92;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-rank-meta {
  margin-top: 10px;
  font-size: 15px;
}

.catalog-rank-desc {
  margin-top: 8px;
  font-size: 15px;
}

.catalog-rank-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.catalog-rank-tags i {
  border-radius: 5px;
  padding: 3px 7px;
  color: #c9904d;
  background: #fff4e8;
  font-size: 14px;
  font-style: normal;
  font-weight: 650;
}

.catalog-rank-tags i:first-child {
  color: #ff6d57;
  background: #fff0ee;
}

.catalog-empty {
  color: #7b7b80;
}

.catalog-panel.filter-open {
  padding-top: max(22px, env(safe-area-inset-top));
  background: #fff;
}

.catalog-panel.filter-open .catalog-search-entry,
.catalog-panel.filter-open .catalog-tool-tabs,
.catalog-panel.filter-open .catalog-rank-tabs {
  display: none;
}

.catalog-panel.filter-open .catalog-content {
  max-width: min(720px, calc(100vw - 24px));
}

.catalog-filter-page {
  display: grid;
  gap: 18px;
  color: #101012;
}

.catalog-filter-topbar {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 52px;
}

.catalog-filter-topbar strong {
  font-size: 24px;
  font-weight: 550;
}

.catalog-filter-back {
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  color: #0a0a0b;
  background: transparent;
  transform: translateY(-50%);
}

.catalog-filter-back svg {
  width: 28px;
  height: 28px;
}

.catalog-filter-scroll {
  overflow: visible;
}

.catalog-filter-matrix {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.catalog-filter-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  min-height: 44px;
  min-width: 0;
}

.catalog-filter-label,
.catalog-filter-option {
  border: 0;
  background: transparent;
  color: #111;
  font: inherit;
  white-space: nowrap;
}

.catalog-filter-label {
  min-height: 42px;
  border-radius: 9px;
  padding: 0 14px;
  color: #12b8a6;
  background: #d6fbf2;
  font-size: 19px;
  font-weight: 900;
}

.catalog-filter-label:not(.active) {
  opacity: 0.82;
}

.catalog-filter-options {
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block: 3px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.catalog-filter-options::-webkit-scrollbar {
  display: none;
}

.catalog-filter-option {
  padding: 4px 0;
  font-size: 19px;
  font-weight: 500;
}

.catalog-filter-option.active {
  color: #0fb5a4;
  font-weight: 900;
}

.catalog-filter-collapse {
  justify-self: center;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: #1a1a1b;
  background: #f6f6f6;
  font-size: 16px;
  font-weight: 700;
}

.catalog-filter-collapse span {
  display: inline-block;
  margin-left: 3px;
  font-weight: 900;
}

.catalog-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 12px;
}

.catalog-filter-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 0;
  padding: 0;
  color: #141414;
  background: transparent;
  text-align: left;
}

.catalog-filter-poster {
  display: block;
  width: 100%;
  aspect-ratio: 0.74;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.12)),
    var(--poster-image),
    linear-gradient(145deg, #30406f, #d0245f 72%);
  background-position: center;
  background-size: cover;
}

.catalog-filter-card strong,
.catalog-filter-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-filter-card strong {
  font-size: 17px;
  font-weight: 550;
}

.catalog-filter-card em {
  color: #99999d;
  font-size: 14px;
  font-style: normal;
}

body.profile-night-mode .catalog-panel.filter-open {
  background: #0f1218;
}

body.profile-night-mode .catalog-filter-page,
body.profile-night-mode .catalog-filter-label,
body.profile-night-mode .catalog-filter-option,
body.profile-night-mode .catalog-filter-back,
body.profile-night-mode .catalog-filter-card {
  color: #f5f7fb;
}

body.profile-night-mode .catalog-filter-label {
  color: #62ead7;
  background: rgba(94, 234, 212, 0.18);
}

body.profile-night-mode .catalog-filter-option.active {
  color: #62ead7;
}

body.profile-night-mode .catalog-filter-collapse {
  color: #f5f7fb;
  background: rgba(255, 255, 255, 0.08);
}

body.profile-night-mode .catalog-filter-card em {
  color: rgba(245, 247, 251, 0.62);
}

@media (max-width: 430px) {
  .catalog-panel {
    padding-inline: 12px;
  }

  .catalog-search-entry {
    min-height: 46px;
    margin-bottom: 16px;
    padding-inline: 15px;
  }

  .catalog-rank-tabs {
    gap: 8px;
  }

  .catalog-tool-tabs {
    gap: 10px;
    margin-bottom: 18px;
  }

  .catalog-tool-tabs button {
    min-height: 44px;
    border-radius: 8px;
    gap: 8px;
  }

  .catalog-tool-tabs strong {
    font-size: 16px;
  }

  .catalog-tool-icon {
    width: 22px;
    height: 22px;
  }

  .catalog-rank-tabs button {
    min-height: 42px;
    padding-inline: 14px;
    font-size: 16px;
  }

  .catalog-rank-row {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
  }

  .catalog-rank-cover {
    width: 96px;
  }

  .catalog-rank-topline {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .catalog-rank-topline strong {
    font-size: 17px;
  }

  .catalog-rank-topline em,
  .catalog-rank-meta,
  .catalog-rank-desc {
    font-size: 14px;
  }

  .catalog-rank-tags {
    gap: 5px;
  }

  .catalog-rank-tags i {
    padding-inline: 5px;
    font-size: 12px;
  }

  .catalog-drama-grid {
    gap: 12px;
  }

  .catalog-drama-card {
    border-radius: 9px;
  }

  .catalog-drama-card strong {
    min-height: 42px;
    margin-inline: 10px;
    font-size: 17px;
  }

  .catalog-drama-tags {
    gap: 5px;
    margin-inline: 10px;
  }

  .catalog-drama-tags i {
    max-width: 64px;
    padding-inline: 6px;
    font-size: 12px;
  }

  .catalog-drama-poster em {
    left: 10px;
    font-size: 14px;
  }

  .catalog-panel.filter-open {
    padding-inline: 12px;
  }

  .catalog-filter-page {
    gap: 16px;
  }

  .catalog-filter-topbar strong {
    font-size: 23px;
  }

  .catalog-filter-matrix {
    gap: 13px;
  }

  .catalog-filter-row {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 22px;
  }

  .catalog-filter-label {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 18px;
  }

  .catalog-filter-options {
    gap: 31px;
  }

  .catalog-filter-option {
    font-size: 18px;
  }

  .catalog-filter-grid {
    gap: 17px 10px;
  }

  .catalog-filter-card strong {
    font-size: 16px;
  }

  .catalog-filter-card em {
    font-size: 13px;
  }
}

@media (min-width: 700px) {
  .catalog-panel {
    padding: max(34px, env(safe-area-inset-top)) 28px 104px;
  }

  .catalog-search-entry,
  .catalog-tool-tabs,
  .catalog-rank-tabs,
  .catalog-content {
    max-width: min(720px, calc(100vw - 56px));
  }

  .catalog-search-entry {
    min-height: 58px;
    margin-bottom: 28px;
    border-radius: 14px;
  }

  .catalog-drama-grid {
    gap: 18px;
  }

  .catalog-rank-row {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 22px;
  }

  .catalog-rank-cover {
    width: 128px;
  }

  .catalog-rank-topline strong {
    font-size: 20px;
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .catalog-search-entry,
  .catalog-tool-tabs,
  .catalog-rank-tabs,
  .catalog-content {
    max-width: min(980px, calc(100vw - 64px));
  }

  .catalog-ranking-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .catalog-drama-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .catalog-rank-row {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    min-height: 168px;
    border-radius: 18px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
  }

  .catalog-rank-cover {
    width: 104px;
  }

  .catalog-rank-topline {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .catalog-rank-topline strong {
    font-size: 18px;
  }

  .catalog-rank-topline em,
  .catalog-rank-meta,
  .catalog-rank-desc {
    font-size: 14px;
  }

  .catalog-rank-tags {
    gap: 5px;
  }

  .catalog-rank-tags i {
    font-size: 12px;
  }
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-content > .metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card {
  display: grid;
  gap: 8px;
  min-height: 86px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.metric-card span {
  color: #a1a1aa;
  font-size: 12px;
}

.metric-card strong {
  font-size: 24px;
}

.prewarm-button {
  border: 0;
  min-height: 44px;
  border-radius: 999px;
  color: #fff;
  background: #ff365f;
}

.prewarm-button:disabled {
  opacity: 0.7;
}

.admin-form {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-form label {
  display: grid;
  gap: 7px;
}

.admin-search-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(130px, 0.7fr) minmax(110px, 0.55fr) minmax(120px, 0.6fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-search-actions {
  display: grid;
  grid-template-columns: minmax(86px, 1fr) minmax(72px, auto);
  gap: 8px;
}

.admin-search-actions button[type="button"] {
  border: 1px solid #d1d5db;
  color: #374151;
  background: #fff;
}

.admin-result-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-result-title h3 {
  margin: 0;
}

.admin-result-title span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.admin-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.admin-bulk-toolbar span {
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.admin-bulk-pick-actions {
  display: inline-flex;
  gap: 6px;
}

.admin-bulk-toolbar select,
.admin-bulk-toolbar input {
  min-height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 10px;
  color: #111827;
  background: #fff;
}

.admin-bulk-toolbar input {
  min-width: 180px;
}

.admin-bulk-toolbar [hidden] {
  display: none;
}

.admin-bulk-toolbar button {
  width: fit-content;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  color: #fff;
  background: #14b8a6;
  font-weight: 900;
}

.admin-bulk-pick-actions button {
  border: 1px solid #d1d5db;
  color: #0f172a;
  background: #fff;
}

.admin-bulk-toolbar #admin-bulk-apply {
  color: #0f766e;
  background: #ccfbf1;
}

.admin-bulk-toolbar #admin-bulk-delete {
  background: #ef4444;
}

.admin-bulk-toolbar button:disabled {
  color: #94a3b8;
  background: #e2e8f0;
}

.admin-bulk-preview {
  min-width: 100%;
  color: #94a3b8;
  word-break: break-all;
}

.admin-bulk-result {
  min-width: 100%;
  border-radius: 8px;
  padding: 8px 10px;
  color: #64748b;
  background: #eef2f7;
  word-break: break-word;
}

.admin-bulk-result[data-state="success"] {
  color: #047857;
  background: #d1fae5;
}

.admin-bulk-result[data-state="error"] {
  color: #b91c1c;
  background: #fee2e2;
}

.admin-form .section-header {
  margin-bottom: 0;
}

.admin-form label span,
.admin-status {
  color: #d4d4d8;
  font-size: 12px;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.admin-form textarea {
  min-height: 118px;
  padding: 12px;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.admin-reward-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-reward-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 14px;
  background: rgba(20, 184, 166, 0.08);
}

.admin-reward-toggle input {
  width: 22px;
  height: 22px;
  accent-color: #14b8a6;
}

.admin-reward-toggle span {
  display: grid;
  gap: 4px;
}

.admin-reward-toggle strong {
  color: #0f172a;
  font-size: 15px;
}

.admin-reward-toggle em {
  color: #64748b;
  font-size: 13px;
  font-style: normal;
}

.admin-reward-stage-editor {
  grid-column: 1 / -1;
}

.admin-reward-stats .section-header button {
  min-height: 34px;
  padding: 0 14px;
  color: #111827;
  background: rgba(255, 255, 255, 0.92);
}

.admin-reward-stats .metric-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-reward-date-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-reward-date-tools input {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: #111827;
  background: rgba(255, 255, 255, 0.92);
}

.admin-reward-users {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.admin-reward-users article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.admin-reward-users span {
  color: rgba(255, 255, 255, 0.64);
}

.admin-withdrawal-review {
  display: grid;
  gap: 12px;
}

.admin-withdrawal-review .metric-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-withdrawal-list {
  display: grid;
  gap: 8px;
}

.admin-withdrawal-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 96px 76px auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-withdrawal-row strong,
.admin-withdrawal-row b {
  display: block;
  color: #fff;
}

.admin-withdrawal-row span,
.admin-withdrawal-row em {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-style: normal;
  font-size: 12px;
}

.admin-withdrawal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-inline-button.danger {
  background: rgba(113, 113, 122, 0.82);
}

.admin-client-overview {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-client-overview .section-header {
  margin-bottom: 0;
}

.admin-client-overview .section-header p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
}

.admin-client-overview .metric-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-client-card,
.admin-client-modules article,
.admin-client-users article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.admin-client-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-client-card span,
.admin-client-modules span,
.admin-client-users span {
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 800;
}

.admin-client-card p,
.admin-client-modules p,
.admin-client-users p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

.admin-client-card small,
.admin-client-modules small {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
}

.admin-client-card i {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-style: normal;
}

.admin-client-modules {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-client-modules article {
  gap: 6px;
  padding: 10px;
}

.admin-client-modules article strong {
  font-size: 13px;
}

.admin-client-users {
  display: grid;
  gap: 8px;
}

.admin-client-users h3 {
  margin: 4px 0 0;
}

.admin-client-users article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.admin-client-users article p {
  grid-column: 1 / -1;
}

.admin-profile-data {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-profile-data .section-header {
  margin-bottom: 0;
}

.admin-profile-data .section-header p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
}

.admin-profile-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-profile-section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-profile-section > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-profile-section > div:first-child span {
  color: #5eead4;
  font-size: 12px;
  font-weight: 900;
}

.admin-profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.admin-profile-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-profile-row b,
.admin-profile-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-profile-row b {
  font-size: 13px;
}

.admin-profile-row em {
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  font-style: normal;
}

.admin-profile-row i {
  align-self: center;
  border-radius: 999px;
  padding: 4px 7px;
  color: #fed7aa;
  background: rgba(249, 115, 22, 0.14);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

@media (min-width: 900px) {
  .admin-panel {
    padding-inline: 32px;
  }

  .admin-content {
    gap: 20px;
  }

  .admin-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .admin-form .section-header,
  .admin-form .admin-status,
  .admin-form .admin-search-grid,
  .admin-form .admin-reward-grid,
  .admin-form .admin-reward-stage-editor {
    grid-column: 1 / -1;
  }

  .admin-form button[type="submit"] {
    width: max-content;
    min-width: 180px;
    padding-inline: 24px;
  }

  .admin-resource-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-content > .metric-grid,
  .admin-client-overview .metric-grid.compact,
  .admin-client-grid,
  .admin-client-modules,
  .admin-profile-section-grid,
  .admin-reward-stats .metric-grid.compact,
  .admin-reward-grid,
  .admin-search-grid {
    grid-template-columns: 1fr;
  }
}

.admin-form button {
  border: 0;
  min-height: 44px;
  border-radius: 999px;
  color: #fff;
  background: #ff365f;
}

.admin-form button:disabled {
  opacity: 0.7;
}

.admin-search-more {
  width: 100%;
  margin-top: 10px;
}

.admin-export-output {
  overflow: auto;
  max-height: 260px;
  margin: 10px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  color: #d4d4d8;
  background: rgba(0, 0, 0, 0.24);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.admin-audit-output {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.admin-audit-summary,
.admin-audit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.admin-audit-summary.ok,
.admin-audit-item.ok {
  border-color: rgba(34, 197, 94, 0.36);
}

.admin-audit-summary.warning,
.admin-audit-item.warning {
  border-color: rgba(251, 191, 36, 0.5);
}

.admin-audit-list {
  display: grid;
  gap: 8px;
}

.admin-audit-item span,
.admin-audit-summary span {
  color: #d4d4d8;
  font-size: 12px;
}

.admin-status {
  margin: 0;
}

.admin-inline-button {
  border: 0;
  border-radius: 999px;
  padding: 5px 9px;
  color: #fff;
  background: rgba(255, 54, 95, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.admin-back-button {
  width: max-content;
  border: 0;
  border-radius: 999px;
  min-height: 36px;
  padding: 0 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.admin-detail-header {
  margin-top: 8px;
}

.admin-detail-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-detail-form .section-header,
.admin-detail-form .wide,
.admin-engagement-grid,
.admin-detail-actions,
.admin-detail-form .admin-status {
  grid-column: 1 / -1;
}

.admin-engagement-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(12, 12, 14, 0.42);
}

.admin-engagement-grid legend {
  padding: 0 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.admin-engagement-grid button,
.admin-engagement-grid small {
  grid-column: 1 / -1;
}

.admin-engagement-grid button {
  border: 0;
  min-height: 40px;
  border-radius: 999px;
  color: #111827;
  font-weight: 800;
  background: #99f6e4;
}

.admin-engagement-grid small {
  color: #a1a1aa;
  line-height: 1.6;
}

.admin-detail-form label,
.admin-episode-form label,
.admin-video-form label,
.admin-create-episode-form label {
  display: grid;
  gap: 7px;
}

.admin-detail-form label span,
.admin-episode-form label span,
.admin-video-form label span,
.admin-create-episode-form label span {
  color: #d4d4d8;
  font-size: 12px;
}

.admin-detail-form input,
.admin-detail-form select,
.admin-detail-form textarea,
.admin-episode-form input,
.admin-episode-form select,
.admin-video-form input,
.admin-create-episode-form input,
.admin-create-episode-form select {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0 10px;
  color: #fff;
  background: rgba(12, 12, 14, 0.72);
}

.admin-detail-form textarea {
  min-height: 86px;
  padding: 10px;
  resize: vertical;
}

.admin-detail-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-detail-actions button,
.admin-episode-form button,
.admin-video-form button,
.admin-create-episode-form button {
  border: 0;
  min-height: 42px;
  border-radius: 999px;
  color: #fff;
  background: #ff365f;
}

.admin-detail-actions button + button {
  background: rgba(255, 255, 255, 0.12);
}

#admin-delete-drama {
  background: rgba(239, 68, 68, 0.72);
}

.admin-delete-episode {
  background: rgba(239, 68, 68, 0.72) !important;
}

.admin-resource-list {
  display: grid;
  gap: 10px;
}

.admin-resource-list.compact {
  gap: 8px;
}

.admin-resource-item {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
}

.admin-resource-item strong {
  font-size: 14px;
  line-height: 1.3;
}

.admin-resource-item span {
  overflow: hidden;
  color: #d4d4d8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-episode-list {
  display: grid;
  gap: 10px;
}

.admin-video-grid {
  display: grid;
  gap: 10px;
}

.admin-video-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.admin-video-summary article {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 11px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-video-summary strong {
  color: #ffffff;
  font-size: 20px;
}

.admin-video-summary span {
  color: #d4d4d8;
  font-size: 12px;
}

.admin-video-health-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.admin-video-health-filters button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 12px;
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.08);
}

.admin-video-health-filters button.active {
  color: #042f2e;
  border-color: rgba(45, 212, 191, 0.65);
  background: #99f6e4;
}

.admin-video-health-filters span {
  color: inherit;
  opacity: 0.72;
}

.admin-video-repair-queue {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  border: 1px solid rgba(251, 146, 60, 0.22);
  border-radius: 10px;
  padding: 12px;
  background: rgba(251, 146, 60, 0.08);
}

.admin-video-repair-list {
  display: grid;
  gap: 8px;
}

.admin-video-repair-list article {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.14);
}

.admin-video-repair-list span,
.admin-video-repair-list em {
  color: #d4d4d8;
  font-size: 12px;
  font-style: normal;
  word-break: break-all;
}

.admin-video-repair-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-video-repair-list button {
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  color: #111827;
  background: #fed7aa;
}

.admin-video-tools {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-import-hero {
  display: grid;
  gap: 14px;
}

.admin-import-hero > div:first-child {
  display: grid;
  gap: 6px;
}

.admin-import-hero > div:first-child span {
  color: #14b8a6;
  font-size: 12px;
  font-weight: 900;
}

.admin-import-hero h2 {
  margin: 0;
}

.admin-import-hero p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
}

.admin-import-stats,
.admin-import-grid,
.admin-import-checklist {
  display: grid;
  gap: 10px;
}

.admin-import-checklist article {
  display: grid;
  gap: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.admin-import-checklist strong {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 13px;
  line-height: 28px;
  text-align: center;
}

.admin-import-checklist span {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

.admin-import-checklist p {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.5;
}

.admin-import-checklist button {
  width: fit-content;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 12px;
  font-weight: 900;
}

.admin-drama-control {
  display: grid;
  gap: 14px;
}

.admin-drama-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-drama-actions a {
  border: 1px solid #99f6e4;
  border-radius: 999px;
  padding: 8px 13px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.admin-drama-genre-strip {
  display: grid;
  gap: 8px;
}

.admin-drama-genre-strip button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  color: #111827;
  background: #f8fafc;
  text-align: left;
}

.admin-drama-genre-strip strong,
.admin-drama-genre-strip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-drama-genre-strip strong {
  font-size: 13px;
}

.admin-drama-genre-strip span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.admin-genre-overview {
  display: grid;
  gap: 14px;
}

.admin-genre-overview > p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
}

.admin-genre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-genre-actions a,
.admin-genre-actions button {
  border: 1px solid #99f6e4;
  border-radius: 999px;
  padding: 8px 13px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.admin-scan-video-directory {
  display: grid;
  gap: 7px;
}

.admin-scan-video-directory span {
  color: #d4d4d8;
  font-size: 12px;
}

.admin-scan-video-directory input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0 10px;
  color: #fff;
  background: rgba(12, 12, 14, 0.72);
}

.admin-create-episode-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) 90px auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-create-episode-form .admin-status {
  grid-column: 1 / -1;
}

.admin-episode-form {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr auto auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-video-form {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1.4fr) 92px auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-video-ledger-head {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
}

.admin-video-ledger-head span {
  overflow: hidden;
  color: #d4d4d8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-video-ledger-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-episode-form strong {
  grid-column: 1 / -1;
  font-size: 14px;
}

.admin-video-form strong,
.admin-video-meta,
.admin-video-health {
  grid-column: 1 / -1;
}

.admin-video-form strong {
  font-size: 14px;
}

.admin-video-meta {
  overflow: hidden;
  color: #d4d4d8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-video-health {
  width: fit-content;
  border: 1px solid rgba(34, 197, 94, 0.34);
  border-radius: 999px;
  padding: 5px 9px;
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
  font-size: 12px;
}

.admin-video-health.fallback {
  border-color: rgba(250, 204, 21, 0.38);
  color: #fef08a;
  background: rgba(250, 204, 21, 0.12);
}

.admin-video-health.missing {
  border-color: rgba(248, 113, 113, 0.4);
  color: #fecaca;
  background: rgba(248, 113, 113, 0.12);
}

.admin-video-health.external {
  border-color: rgba(96, 165, 250, 0.36);
  color: #bfdbfe;
  background: rgba(96, 165, 250, 0.12);
}

.admin-drama-result-table {
  gap: 0;
  grid-template-columns: 1fr;
}

.admin-drama-result-head,
.admin-drama-result-row {
  display: grid;
  grid-template-columns:
    minmax(58px, 0.35fr)
    minmax(160px, 1.8fr)
    minmax(96px, 0.8fr)
    minmax(72px, 0.55fr)
    minmax(58px, 0.45fr)
    minmax(70px, 0.5fr)
    minmax(70px, 0.5fr)
    minmax(132px, 0.9fr)
    minmax(88px, 0.65fr)
    minmax(62px, 0.45fr);
  align-items: center;
  gap: 12px;
}

.admin-drama-result-head {
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 14px;
  color: #94a3b8;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 900;
}

.admin-drama-result-row span,
.admin-drama-result-row strong,
.admin-drama-result-row em,
.admin-drama-result-row button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-drama-result-row button {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 12px;
  font-weight: 900;
}

.admin-drama-select {
  display: inline-grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.admin-drama-select input {
  width: 15px;
  height: 15px;
  accent-color: #14b8a6;
}

.admin-episode-form.saved {
  border-color: rgba(34, 197, 94, 0.56);
}

.admin-video-form.saved {
  border-color: rgba(34, 197, 94, 0.56);
}

.genre-bars {
  display: grid;
  gap: 10px;
}

.genre-bar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  color: #d4d4d8;
  font-size: 12px;
}

.genre-bar div {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.genre-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ff365f;
}

.admin-panel {
  overflow-y: auto;
  padding: 0;
  color: #111827;
  background: #f3f5f8;
}

.admin-content {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  padding: 0;
}

.admin-desktop-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  background: #f3f5f8;
}

.admin-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  height: 100vh;
  border-right: 1px solid #e5e7eb;
  padding: 22px 16px;
  background: #ffffff;
}

.admin-brand-block {
  display: grid;
  gap: 4px;
}

.admin-brand-block span {
  color: #14b8a6;
  font-size: 12px;
  font-weight: 900;
}

.admin-brand-block strong {
  color: #111827;
  font-size: 21px;
}

.admin-brand-block em {
  color: #9ca3af;
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
}

.admin-nav {
  display: grid;
  align-content: start;
  gap: 6px;
}

.admin-nav-button {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 11px 12px;
  color: #4b5563;
  background: transparent;
  text-align: left;
}

.admin-nav-button strong {
  color: inherit;
  font-size: 14px;
}

.admin-nav-button span {
  overflow: hidden;
  color: #9ca3af;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-nav-button.active,
.admin-nav-button:hover {
  color: #0f766e;
  background: #e8fbf7;
}

.admin-ops-link {
  border: 1px solid #d1fae5;
  border-radius: 8px;
  padding: 10px 12px;
  color: #047857;
  background: #ecfdf5;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.admin-main {
  min-width: 0;
  padding: 22px 28px 38px;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.admin-topbar span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.admin-topbar h1 {
  margin: 3px 0 0;
  color: #111827;
  font-size: 24px;
}

.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-topbar-actions small {
  color: #6b7280;
  font-size: 12px;
}

.admin-topbar-link {
  min-height: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  color: #374151;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.admin-topbar-link:hover {
  border-color: #99f6e4;
  color: #0f766e;
  background: #f0fdfa;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-tabs button {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  min-height: 34px;
  padding: 0 14px;
  color: #4b5563;
  background: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.admin-tabs button.active {
  border-color: #99f6e4;
  color: #0f766e;
  background: #ccfbf1;
}

.admin-engagement-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-drama-result-row .admin-engagement-summary em {
  border-radius: 999px;
  padding: 2px 6px;
  color: #64748b;
  background: #f1f5f9;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.admin-workspace {
  display: grid;
  gap: 16px;
}

.admin-overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(255, 255, 255, 0.96) 46%),
    #ffffff;
}

.admin-overview-hero span {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.admin-overview-hero h2 {
  margin: 4px 0 6px;
  color: #111827;
  font-size: 22px;
}

.admin-overview-hero p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.6;
}

.admin-overview-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(104px, 1fr));
  gap: 8px;
}

.admin-overview-shortcuts a {
  border: 1px solid #d1fae5;
  border-radius: 8px;
  padding: 10px 12px;
  color: #0f766e;
  background: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.admin-overview-shortcuts a:hover {
  background: #ccfbf1;
}

.admin-surface,
.admin-panel .library-section,
.admin-panel .admin-form,
.admin-panel .admin-detail-form,
.admin-panel .admin-create-episode-form,
.admin-panel .admin-episode-form,
.admin-panel .admin-video-form,
.admin-panel .admin-client-overview,
.admin-panel .admin-profile-data {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  color: #111827;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.admin-panel .section-header h2,
.admin-panel .section-header h3,
.admin-surface h2,
.admin-surface h3,
.admin-panel .library-header h2 {
  color: #111827;
}

.admin-auth-required {
  display: grid;
  gap: 12px;
  max-width: 720px;
}

.admin-auth-required > span {
  width: max-content;
  border-radius: 999px;
  padding: 5px 10px;
  color: #b42318;
  background: #fee4e2;
  font-size: 12px;
  font-weight: 900;
}

.admin-auth-required p,
.admin-auth-required small {
  margin: 0;
  color: #667085;
}

.admin-auth-required code {
  border-radius: 6px;
  padding: 2px 5px;
  color: #344054;
  background: #f2f4f7;
}

.admin-auth-required div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-auth-required form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(280px, 2fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  padding: 12px;
  background: #f9fafb;
}

.admin-auth-required label {
  display: grid;
  gap: 4px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}

.admin-auth-required input {
  min-height: 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 12px;
  color: #101828;
  background: #ffffff;
}

@media (max-width: 820px) {
  .admin-auth-required form {
    grid-template-columns: 1fr;
  }
}

.admin-panel .section-header span,
.admin-panel .section-header p,
.admin-panel .admin-status,
.admin-panel .empty-state {
  color: #6b7280;
}

.admin-panel .metric-grid.admin-metric-grid,
.admin-panel .admin-content > .metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-panel .metric-card {
  border-color: #e5e7eb;
  color: #111827;
  background: #ffffff;
}

.admin-panel .metric-card span {
  color: #6b7280;
}

.admin-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-health-grid article {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.admin-health-grid strong {
  color: #111827;
  font-size: 22px;
}

.admin-health-grid span {
  color: #6b7280;
  font-size: 12px;
}

.admin-issue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-issue-grid a {
  display: grid;
  gap: 5px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 13px;
  color: #111827;
  background: #f8fafc;
  text-decoration: none;
}

.admin-issue-grid a:hover {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.admin-issue-grid strong {
  font-size: 24px;
}

.admin-issue-grid span {
  color: #374151;
  font-size: 13px;
  font-weight: 800;
}

.admin-issue-grid em {
  color: #6b7280;
  font-size: 12px;
  font-style: normal;
}

.admin-production-gates {
  display: grid;
  gap: 14px;
}

.admin-production-gate-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-production-gate-grid article {
  display: grid;
  gap: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 13px;
  background: #f8fafc;
}

.admin-production-gate-grid article.ready {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.admin-production-gate-grid article.warning {
  border-color: #fde68a;
  background: #fffbeb;
}

.admin-production-gate-grid article.danger {
  border-color: #fecaca;
  background: #fef2f2;
}

.admin-production-gate-grid span,
.admin-production-gate-grid em {
  color: #6b7280;
  font-size: 12px;
  font-style: normal;
}

.admin-production-gate-grid strong {
  color: #111827;
  font-size: 20px;
}

.admin-system-health {
  display: grid;
  gap: 16px;
}

.admin-system-health-status {
  border-radius: 999px;
  padding: 7px 11px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 12px;
  font-weight: 900;
}

.admin-system-health-status.warning {
  color: #92400e;
  background: #fef3c7;
}

.admin-system-health-status.danger {
  color: #b91c1c;
  background: #fee2e2;
}

.admin-system-health-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.admin-system-health-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  padding: 13px;
  background: #f0fdf4;
}

.admin-system-health-card.warning {
  border-color: #fde68a;
  background: #fffbeb;
}

.admin-system-health-card.danger {
  border-color: #fecaca;
  background: #fef2f2;
}

.admin-system-health-card span,
.admin-system-health-card em {
  color: #6b7280;
  font-size: 12px;
  font-style: normal;
}

.admin-system-health-card strong {
  color: #111827;
  font-size: 20px;
}

.admin-system-health-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-system-health-actions button {
  display: grid;
  gap: 5px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 12px;
  color: #111827;
  background: #eff6ff;
  text-align: left;
  cursor: pointer;
}

.admin-system-health-actions button:hover {
  border-color: #93c5fd;
  background: #dbeafe;
}

.admin-system-health-actions button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.admin-system-health-actions strong {
  font-size: 13px;
}

.admin-system-health-actions span,
.admin-system-health-actions p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

.admin-system-health-actions p {
  display: flex;
  align-items: center;
  min-height: 46px;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.admin-system-health-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 12px;
}

.admin-system-health-meta article {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.admin-system-health-meta h3 {
  margin: 0;
  color: #111827;
  font-size: 15px;
}

.admin-system-health-meta dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.admin-system-health-meta dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 8px;
}

.admin-system-health-meta dt {
  color: #6b7280;
  font-size: 12px;
}

.admin-system-health-meta dd {
  overflow: hidden;
  max-width: 180px;
  margin: 0;
  color: #111827;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-system-health-list {
  display: grid;
  gap: 8px;
}

.admin-system-health-list a {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 108px;
  gap: 10px;
  align-items: center;
  border-radius: 8px;
  padding: 9px 10px;
  color: #111827;
  background: #f8fafc;
  text-decoration: none;
}

.admin-system-health-list strong,
.admin-system-health-list span,
.admin-system-health-list time,
.admin-system-health-list p {
  overflow: hidden;
  margin: 0;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-system-health-list strong {
  font-weight: 900;
}

.admin-system-health-list span,
.admin-system-health-list time,
.admin-system-health-list p {
  color: #6b7280;
}

.admin-operations {
  display: grid;
  gap: 14px;
}

.admin-operation-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 220px)) auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.admin-operation-toolbar label {
  display: grid;
  gap: 5px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.admin-operation-toolbar select {
  min-height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 10px;
  color: #111827;
  background: #ffffff;
}

.admin-operation-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-operation-stats article {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.admin-operation-stats strong {
  color: #111827;
  font-size: 20px;
}

.admin-operation-stats span {
  color: #6b7280;
  font-size: 12px;
}

.admin-operation-list {
  display: grid;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.admin-operation-list .admin-operation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px auto auto;
  gap: 16px;
  align-items: center;
  padding: 11px 12px;
  background: #ffffff;
}

.admin-operation-list .admin-operation-row + .admin-operation-row {
  border-top: 1px solid #eef2f7;
}

.admin-operation-detail {
  grid-column: 1 / -1;
  max-height: 260px;
  overflow: auto;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  color: #334155;
  background: #f8fafc;
  font-size: 12px;
  line-height: 1.5;
}

.admin-operation-detail[hidden] {
  display: none;
}

.admin-operation-list strong {
  display: block;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-operation-list span,
.admin-operation-list time {
  color: #6b7280;
  font-size: 12px;
}

.admin-operation-list time {
  text-align: right;
}

.admin-operation-detail-card {
  display: grid;
  gap: 16px;
}

.admin-operation-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-operation-detail-summary article {
  display: grid;
  gap: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.admin-operation-detail-summary span,
.admin-operation-detail-summary em {
  overflow: hidden;
  color: #6b7280;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-operation-detail-summary strong {
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-operation-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-operation-payload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-operation-payload-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-operation-payload-grid h3 {
  margin: 0;
  color: #111827;
  font-size: 13px;
}

.admin-operation-payload-grid pre {
  min-height: 220px;
  max-height: 460px;
  overflow: auto;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  color: #334155;
  background: #f8fafc;
  font-size: 12px;
  line-height: 1.5;
}

.admin-genre-manager {
  display: grid;
  gap: 14px;
}

.admin-genre-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-genre-table {
  display: grid;
  gap: 8px;
}

.admin-genre-head,
.admin-genre-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 104px 124px 126px minmax(160px, 1fr) 190px;
  gap: 12px;
  align-items: center;
}

.admin-genre-head {
  padding: 0 12px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 900;
}

.admin-genre-row {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.admin-genre-row label {
  display: grid;
  gap: 5px;
}

.admin-genre-row label span {
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
}

.admin-genre-row input {
  min-width: 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 9px 10px;
  color: #111827;
  background: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.admin-genre-row div {
  min-width: 0;
}

.admin-genre-row strong,
.admin-genre-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-genre-row strong {
  color: #111827;
  font-size: 13px;
}

.admin-genre-row span {
  margin-top: 3px;
  color: #6b7280;
  font-size: 12px;
}

.admin-genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-genre-tags em {
  border-radius: 999px;
  padding: 3px 7px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.admin-genre-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.admin-genre-row-actions button {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  color: #111827;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.admin-genre-row-actions button[type="submit"] {
  border-color: #5eead4;
  color: #0f766e;
  background: #f0fdfa;
}

.admin-genre-row > .admin-status {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  font-size: 12px;
}

.admin-workbench {
  display: grid;
  gap: 16px;
}

.admin-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}

.admin-task-list {
  display: grid;
  gap: 8px;
}

.admin-task-row {
  display: grid;
  grid-template-columns: 34px minmax(150px, 0.6fr) minmax(220px, 1fr) 56px 86px;
  align-items: center;
  gap: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 11px 12px;
  color: #111827;
  background: #f8fafc;
  text-decoration: none;
}

.admin-task-row.high {
  border-color: #fecaca;
  background: #fff7ed;
}

.admin-task-row.medium {
  border-color: #fde68a;
  background: #fffbeb;
}

.admin-task-row.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.admin-task-row i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: #14b8a6;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.admin-task-row.high i {
  background: #ef4444;
}

.admin-task-row.medium i {
  background: #f59e0b;
}

.admin-task-row strong,
.admin-task-row span,
.admin-task-row b,
.admin-task-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-task-row strong {
  font-size: 13px;
}

.admin-task-row span {
  color: #6b7280;
  font-size: 12px;
}

.admin-task-row b {
  color: #111827;
  font-size: 18px;
  text-align: right;
}

.admin-task-row em {
  color: #0f766e;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.admin-workbench-side {
  display: grid;
  gap: 12px;
}

.admin-workbench-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-workbench-shortcuts a,
.admin-workbench-recent a {
  display: grid;
  gap: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  color: #111827;
  background: #ffffff;
  text-decoration: none;
}

.admin-workbench-shortcuts a:hover,
.admin-workbench-recent a:hover,
.admin-task-row:hover {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.admin-workbench-shortcuts strong,
.admin-workbench-recent strong {
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-workbench-shortcuts span,
.admin-workbench-recent span {
  overflow: hidden;
  color: #6b7280;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-workbench-recent {
  display: grid;
  gap: 8px;
}

.admin-workbench-recent h3,
.admin-workbench-bottom h3 {
  margin: 0;
  color: #111827;
  font-size: 15px;
}

.admin-workbench-bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-workbench-bottom > div {
  display: grid;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.admin-workbench-bottom article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
}

.admin-workbench-bottom strong,
.admin-workbench-bottom span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-workbench-bottom strong {
  color: #111827;
  font-size: 13px;
}

.admin-workbench-bottom span {
  color: #6b7280;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .admin-genre-head,
  .admin-genre-row {
    grid-template-columns: minmax(160px, 1fr) 100px 110px minmax(150px, 1fr);
  }

  .admin-genre-head span:nth-child(4),
  .admin-genre-row > div:nth-of-type(3) {
    display: none;
  }

  .admin-genre-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .admin-workbench-grid {
    grid-template-columns: 1fr;
  }

  .admin-task-row {
    grid-template-columns: 34px minmax(120px, 0.8fr) minmax(160px, 1fr) 48px 78px;
  }
}

@media (max-width: 760px) {
  .admin-genre-summary-grid,
  .admin-genre-head,
  .admin-genre-row {
    grid-template-columns: 1fr;
  }

  .admin-genre-head {
    display: none;
  }

  .admin-task-row,
  .admin-workbench-bottom article {
    grid-template-columns: 1fr;
  }

  .admin-task-row b,
  .admin-task-row em {
    text-align: left;
  }

  .admin-workbench-shortcuts,
  .admin-workbench-bottom {
    grid-template-columns: 1fr;
  }
}

.admin-panel .admin-form input,
.admin-panel .admin-form select,
.admin-panel .admin-form textarea,
.admin-panel .admin-detail-form input,
.admin-panel .admin-detail-form select,
.admin-panel .admin-detail-form textarea,
.admin-panel .admin-episode-form input,
.admin-panel .admin-episode-form select,
.admin-panel .admin-video-form input,
.admin-panel .admin-create-episode-form input,
.admin-panel .admin-create-episode-form select,
.admin-panel .admin-scan-video-directory input {
  border-color: #d1d5db;
  color: #111827;
  background: #ffffff;
}

.admin-panel .admin-form label span,
.admin-panel .admin-detail-form label span,
.admin-panel .admin-episode-form label span,
.admin-panel .admin-video-form label span,
.admin-panel .admin-create-episode-form label span,
.admin-panel .admin-scan-video-directory span {
  color: #4b5563;
}

.admin-panel .admin-form button,
.admin-panel .admin-detail-actions button,
.admin-panel .admin-episode-form button,
.admin-panel .admin-video-form button,
.admin-panel .admin-create-episode-form button,
.admin-panel .prewarm-button {
  color: #ffffff;
  background: #14b8a6;
}

.admin-panel .admin-detail-actions button + button {
  color: #374151;
  background: #f3f4f6;
}

.admin-panel .admin-video-summary article {
  border-color: #e5e7eb;
  background: #f8fafc;
}

.admin-panel .admin-video-summary strong {
  color: #111827;
}

.admin-panel .admin-video-summary span,
.admin-panel .admin-video-ledger-head span {
  color: #6b7280;
}

.admin-panel .admin-video-health-filters button {
  color: #475569;
  border-color: #e5e7eb;
  background: #ffffff;
}

.admin-panel .admin-video-health-filters button.active {
  color: #0f766e;
  border-color: #99f6e4;
  background: #ccfbf1;
}

.admin-panel .admin-video-repair-queue {
  border-color: #fed7aa;
  background: #fff7ed;
}

.admin-panel .admin-video-repair-list article {
  grid-template-columns: minmax(170px, 0.9fr) minmax(180px, 0.9fr) minmax(220px, 1.3fr) auto;
  align-items: center;
  border-color: #ffedd5;
  background: #ffffff;
}

.admin-panel .admin-video-repair-list span,
.admin-panel .admin-video-repair-list em {
  color: #64748b;
}

.admin-panel .admin-video-repair-list button {
  color: #9a3412;
  background: #ffedd5;
}

.admin-panel .admin-video-tools {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

body.admin-mode #admin-create-video-form {
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.4fr) 120px auto;
  align-items: end;
}

body.admin-mode #admin-create-video-form .section-header,
body.admin-mode #admin-create-video-form .admin-status {
  grid-column: 1 / -1;
}

body.admin-mode #admin-create-video-form button[type="submit"] {
  width: auto;
  min-width: 132px;
  padding-inline: 20px;
}

@media (max-width: 760px) {
  body.admin-mode {
    min-width: 0;
  }

  body.admin-mode .admin-desktop-shell {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-sidebar {
    position: static;
    height: auto;
    grid-template-rows: auto auto auto;
  }

  body.admin-mode .admin-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-main {
    padding: 14px;
  }

  body.admin-mode .admin-topbar,
  body.admin-mode .admin-topbar-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-mode #admin-create-video-form,
  body.admin-mode .admin-panel .admin-search-grid,
  body.admin-mode .admin-video-tools,
  body.admin-mode .admin-video-form,
  body.admin-mode .admin-resource-item {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-video-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-video-ledger-head,
  body.admin-mode .admin-video-meta {
    grid-column: 1 / -1;
  }

  body.admin-mode .admin-video-ledger-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-drama-result-head {
    display: none;
  }

  body.admin-mode .admin-drama-result-row {
    gap: 5px;
  }

  body.admin-mode .admin-drama-result-row em {
    margin-top: 4px;
  }

  body.admin-mode .admin-result-title {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-mode .admin-result-title span {
    text-align: left;
  }

  body.admin-mode #admin-create-video-form button[type="submit"] {
    width: 100%;
  }
}

.admin-panel #admin-delete-drama,
.admin-panel .admin-delete-episode {
  color: #ffffff;
  background: #ef4444 !important;
}

.admin-panel .admin-inline-button {
  color: #0f766e;
  background: #ccfbf1;
}

.admin-panel .admin-back-button {
  color: #374151;
  background: #f3f4f6;
}

.admin-panel .admin-resource-item,
.admin-panel .admin-client-card,
.admin-panel .admin-client-modules article,
.admin-panel .admin-client-users article,
.admin-panel .admin-profile-section,
.admin-panel .admin-reward-users article,
.admin-panel .admin-audit-summary,
.admin-panel .admin-audit-item {
  border-color: #e5e7eb;
  color: #111827;
  background: #f8fafc;
}

.admin-panel .admin-resource-item:hover {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.admin-panel .admin-resource-item span,
.admin-panel .admin-video-meta,
.admin-panel .admin-client-card p,
.admin-panel .admin-client-modules p,
.admin-panel .admin-client-users p,
.admin-panel .admin-profile-row em,
.admin-panel .admin-reward-users span,
.admin-panel .admin-audit-item span,
.admin-panel .admin-audit-summary span,
.admin-panel .genre-bar {
  color: #6b7280;
}

.admin-panel .admin-client-overview .section-header p,
.admin-panel .admin-profile-data .section-header p {
  color: #6b7280;
}

.admin-panel .admin-client-card small,
.admin-panel .admin-client-modules small {
  color: #9ca3af;
}

.admin-panel .admin-client-card i {
  background: #eef2ff;
}

.admin-panel .admin-profile-row {
  background: #ffffff;
}

.admin-panel .admin-profile-row i {
  color: #b45309;
  background: #fffbeb;
}

.admin-panel .admin-export-output {
  border-color: #e5e7eb;
  color: #e5e7eb;
  background: #0f172a;
}

.admin-panel .genre-bar div {
  background: #e5e7eb;
}

.admin-placeholder {
  gap: 10px;
}

.admin-placeholder p {
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

.admin-cache-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.admin-cache-actions .prewarm-button {
  width: max-content;
  padding-inline: 22px;
}

.admin-table {
  display: grid;
  gap: 8px;
}

.admin-table article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 11px 12px;
  background: #f8fafc;
}

.admin-table strong,
.admin-table span,
.admin-table em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table strong {
  color: #111827;
  font-size: 13px;
}

.admin-table span {
  color: #6b7280;
  font-size: 12px;
}

.admin-table em {
  color: #0f766e;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.admin-comment-table article {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
}

.admin-data-inventory {
  overflow: hidden;
}

.admin-data-readiness {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.admin-data-readiness article {
  display: grid;
  gap: 4px;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  padding: 12px;
  background: #f0fdfa;
}

.admin-data-readiness strong {
  color: #111827;
  font-size: 20px;
}

.admin-data-readiness span {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.admin-data-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}

.admin-data-gates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-data-gates article {
  display: grid;
  gap: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  padding: 12px;
  background: #ffffff;
}

.admin-data-gates article.passed {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.admin-data-gates article.warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.admin-data-gates article.danger {
  border-color: #fecaca;
  background: #fef2f2;
}

.admin-data-gates span {
  justify-self: start;
  border-radius: 999px;
  padding: 3px 8px;
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  font-size: 11px;
  font-weight: 900;
}

.admin-data-gates article.warning span {
  color: #c2410c;
  background: rgba(251, 146, 60, 0.14);
}

.admin-data-gates article.danger span {
  color: #b91c1c;
  background: rgba(248, 113, 113, 0.14);
}

.admin-data-gates strong {
  color: #111827;
  font-size: 13px;
}

.admin-data-gates p {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.5;
}

.admin-data-persistence-plan {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(180px, 0.42fr) minmax(360px, 1.15fr);
  gap: 14px;
  align-items: start;
  margin-top: 12px;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 14px;
  background: #fff7ed;
}

.admin-data-persistence-plan.ready {
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.8fr);
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.admin-data-persistence-plan span,
.admin-data-persistence-plan b {
  color: #c2410c;
  font-size: 12px;
  font-weight: 900;
}

.admin-data-persistence-plan.ready span,
.admin-data-persistence-plan.ready b {
  color: #047857;
}

.admin-data-persistence-plan strong {
  display: block;
  margin-top: 5px;
  color: #111827;
  font-size: 16px;
}

.admin-data-persistence-plan p {
  margin: 7px 0 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.55;
}

.admin-data-persistence-plan code {
  display: block;
  border: 1px solid rgba(251, 146, 60, 0.26);
  border-radius: 8px;
  padding: 9px 10px;
  overflow-x: auto;
  color: #7c2d12;
  background: rgba(255, 255, 255, 0.76);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
}

.admin-data-persistence-plan.ready code {
  border-color: #bbf7d0;
  color: #047857;
}

.admin-data-persistence-env,
.admin-data-persistence-commands {
  display: grid;
  gap: 8px;
}

.admin-data-persistence-env i {
  justify-self: start;
  border-radius: 999px;
  padding: 5px 9px;
  color: #9a3412;
  background: rgba(251, 146, 60, 0.16);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.admin-data-persistence-affected {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(251, 146, 60, 0.22);
  padding-top: 10px;
}

.admin-data-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-data-filters button {
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 7px 11px;
  color: #374151;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.admin-data-filters button.active {
  border-color: #5eead4;
  color: #0f766e;
  background: #ccfbf1;
}

.admin-data-table {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.admin-data-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.36fr);
  gap: 14px;
  align-items: start;
}

.admin-data-head,
.admin-data-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1.3fr) 92px 112px 128px 128px;
  gap: 12px;
  align-items: center;
}

.admin-data-head {
  padding: 0 12px 4px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 900;
}

.admin-data-row {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.admin-data-row.active {
  border-color: #5eead4;
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.16);
}

.admin-data-row.production-blocked {
  border-color: #fed7aa;
  background: #fffaf5;
}

.admin-data-row[hidden] {
  display: none;
}

.admin-data-row.partial {
  border-color: #fed7aa;
  background: #fff7ed;
}

.admin-data-row.local-only {
  border-color: #dbeafe;
  background: #eff6ff;
}

.admin-data-row strong,
.admin-data-row span,
.admin-data-row em,
.admin-data-row b,
.admin-data-row time,
.admin-data-row a,
.admin-data-row button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-data-row strong {
  display: grid;
  gap: 3px;
  color: #111827;
  font-size: 13px;
}

.admin-data-row small {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
}

.admin-data-row span,
.admin-data-row time {
  color: #6b7280;
  font-size: 12px;
}

.admin-data-row em,
.admin-data-row b {
  color: #374151;
  font-size: 12px;
  font-style: normal;
}

.admin-data-row a {
  border-radius: 999px;
  padding: 6px 10px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.admin-data-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.admin-data-row-actions button {
  border: 1px solid #99f6e4;
  border-radius: 999px;
  padding: 6px 10px;
  color: #0f766e;
  background: #ecfeff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.admin-data-detail {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
  border: 1px solid #d1fae5;
  border-radius: 10px;
  padding: 16px;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 64%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.admin-data-detail > div:first-child {
  display: grid;
  gap: 4px;
}

.admin-data-detail > div:first-child span {
  justify-self: start;
  border-radius: 999px;
  padding: 4px 9px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 12px;
  font-weight: 900;
}

.admin-data-detail strong {
  color: #111827;
  font-size: 18px;
}

.admin-data-detail small,
.admin-data-detail p,
.admin-data-detail dd {
  color: #6b7280;
  line-height: 1.55;
}

.admin-data-detail dl {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 9px 12px;
  margin: 0;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}

.admin-data-detail dt {
  color: #374151;
  font-size: 12px;
  font-weight: 900;
}

.admin-data-detail dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.admin-data-risk,
.admin-data-next,
.admin-data-checks {
  display: grid;
  gap: 6px;
  border-radius: 8px;
  padding: 12px;
  background: #f9fafb;
}

.admin-data-risk.ready {
  background: #ecfdf5;
}

.admin-data-risk.low {
  background: #eff6ff;
}

.admin-data-risk.medium {
  background: #fff7ed;
}

.admin-data-risk.high {
  background: #fef2f2;
}

.admin-data-risk strong,
.admin-data-next strong {
  font-size: 13px;
}

.admin-data-next a {
  justify-self: start;
  border-radius: 999px;
  padding: 8px 12px;
  color: #0f766e;
  background: #ccfbf1;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.admin-data-checks span {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #374151;
  font-size: 12px;
  line-height: 1.35;
}

.admin-data-checks i {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #047857;
  background: #bbf7d0;
  font-style: normal;
  font-weight: 900;
}

.admin-data-checks .warning i {
  color: #b45309;
  background: #fed7aa;
}

.admin-data-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.5;
}

.admin-data-production-state {
  display: inline-flex;
  margin-right: 8px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  vertical-align: middle;
}

.admin-data-production-state.blocked {
  color: #c2410c;
  background: rgba(251, 146, 60, 0.16);
}

.admin-data-production-state.ready {
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
}

@media (max-width: 1500px) {
  body.admin-mode .admin-data-workbench {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-data-detail {
    position: static;
  }

  body.admin-mode .admin-data-persistence-plan,
  body.admin-mode .admin-data-persistence-plan.ready {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-data-head {
    display: none;
  }

  body.admin-mode .admin-data-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-data-row p {
    grid-column: 1 / -1;
  }

  body.admin-mode .admin-data-gates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .admin-desktop-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
    grid-template-rows: auto auto auto;
  }

  .admin-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-main {
    padding: 16px;
  }

  .admin-topbar,
  .admin-topbar-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-data-head {
    display: none;
  }

  .admin-data-workbench {
    grid-template-columns: 1fr;
  }

  .admin-data-detail {
    position: static;
  }

  .admin-data-row {
    grid-template-columns: 1fr;
  }

  .admin-overview-hero,
  .admin-overview-shortcuts,
  .admin-issue-grid {
    grid-template-columns: 1fr;
  }

  .admin-panel .metric-grid.admin-metric-grid,
  .admin-health-grid,
  .admin-panel .admin-client-overview .metric-grid.compact,
  .admin-panel .admin-client-grid,
  .admin-panel .admin-client-modules,
  .admin-panel .admin-profile-section-grid,
  .admin-panel .admin-reward-stats .metric-grid.compact,
  .admin-panel .admin-reward-grid,
  .admin-panel .admin-search-grid {
    grid-template-columns: 1fr;
  }

  .admin-table article,
  .admin-comment-table article {
    grid-template-columns: 1fr;
  }

  body.admin-mode {
    min-width: 0;
  }

  body.admin-mode .admin-content,
  body.admin-mode .admin-panel,
  body.admin-mode .admin-desktop-shell,
  body.admin-mode .admin-main,
  body.admin-mode .admin-workspace,
  body.admin-mode .admin-workspace > *,
  body.admin-mode .admin-surface,
  body.admin-mode .admin-operations,
  body.admin-mode .admin-operation-toolbar,
  body.admin-mode .admin-operation-stats,
  body.admin-mode .admin-operation-list,
  body.admin-mode .admin-operation-detail-card,
  body.admin-mode .admin-overview-hero,
  body.admin-mode .admin-overview-shortcuts,
  body.admin-mode .admin-panel .metric-grid.admin-metric-grid {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  body.admin-mode .admin-desktop-shell {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-sidebar {
    position: static;
    height: auto;
    grid-template-rows: auto auto auto;
  }

  body.admin-mode .admin-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-main {
    padding: 16px;
  }

  body.admin-mode .admin-topbar,
  body.admin-mode .admin-topbar-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-mode .admin-panel .section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  body.admin-mode .admin-overview-hero {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-overview-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-issue-grid {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-panel .metric-grid.admin-metric-grid,
  body.admin-mode .admin-health-grid,
  body.admin-mode .admin-panel .admin-client-overview .metric-grid.compact,
  body.admin-mode .admin-panel .admin-reward-stats .metric-grid.compact,
  body.admin-mode .admin-panel .admin-reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-panel .admin-client-grid {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-panel .admin-client-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-panel .admin-profile-section-grid {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-panel .admin-search-grid {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-operation-toolbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  body.admin-mode .admin-operation-toolbar label,
  body.admin-mode .admin-operation-toolbar select,
  body.admin-mode .admin-operation-toolbar .admin-inline-button {
    min-width: 0;
    width: 100%;
  }

  body.admin-mode .admin-operation-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-operation-list .admin-operation-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body.admin-mode .admin-operation-list time {
    text-align: left;
  }

  body.admin-mode .admin-operation-detail-summary,
  body.admin-mode .admin-operation-payload-grid {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-video-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-import-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.admin-mode .admin-import-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-import-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.admin-mode .admin-import-grid .admin-form {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-import-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-drama-control {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.admin-mode .admin-drama-actions {
    justify-content: flex-start;
  }

  body.admin-mode .admin-drama-genre-strip {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-genre-overview {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.admin-mode .admin-genre-overview > p {
    grid-column: 1 / -1;
  }

  body.admin-mode .admin-genre-actions {
    justify-content: flex-start;
  }

  body.admin-mode .admin-video-tools {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.admin-mode .admin-video-tools .admin-status {
    margin: 0;
  }

  body.admin-mode .admin-video-grid {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-video-form {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
    box-shadow: none;
  }

  body.admin-mode .admin-video-ledger-head {
    grid-column: auto;
  }

  body.admin-mode .admin-video-ledger-actions {
    grid-template-columns: repeat(2, minmax(70px, auto));
  }

  body.admin-mode .admin-video-ledger-actions .admin-video-usage {
    color: #0f766e;
    background: #ccfbf1;
  }

  body.admin-mode .admin-video-meta {
    grid-column: 1 / -1;
    border-top: 1px solid #eef2f7;
    padding-top: 10px;
  }

  body.admin-mode .admin-resource-list {
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
  }

  body.admin-mode .admin-resource-list.compact {
    gap: 0;
  }

  body.admin-mode .admin-resource-item {
    grid-template-columns: minmax(180px, 1.1fr) minmax(0, 2.4fr) auto;
    align-items: center;
    gap: 14px;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    border-radius: 0;
    padding: 12px 14px;
    background: #ffffff;
  }

  body.admin-mode .admin-resource-item:last-child {
    border-bottom: 0;
  }

  body.admin-mode .admin-resource-item:hover {
    background: #f8fafc;
  }

  body.admin-mode .admin-resource-item[data-admin-drama-id]::after,
  body.admin-mode .admin-resource-item[data-admin-video-usage-episode]::after {
    justify-self: end;
    border-radius: 999px;
    padding: 5px 10px;
    color: #0f766e;
    background: #ccfbf1;
    font-size: 12px;
    font-weight: 900;
  }

  body.admin-mode .admin-resource-item[data-admin-drama-id]::after {
    content: "管理";
  }

  body.admin-mode .admin-resource-item[data-admin-video-usage-episode]::after {
    content: "查看";
  }

  body.admin-mode .admin-drama-result-head {
    display: none;
  }

  body.admin-mode .admin-drama-result-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  body.admin-mode .admin-drama-result-row[data-admin-drama-id]::after {
    content: none;
    display: none;
  }

  body.admin-mode .admin-drama-result-row .admin-drama-select {
    width: max-content;
  }

  body.admin-mode .admin-drama-result-row button {
    width: max-content;
  }

  body.admin-mode .admin-resource-item strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.admin-mode .admin-resource-item span {
    font-size: 12px;
  }

  body.admin-mode .admin-table article {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  body.admin-mode .admin-comment-table article {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  }

  body.admin-mode .admin-data-readiness {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.admin-mode {
    min-width: 0;
  }

  body.admin-mode .admin-desktop-shell {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-sidebar {
    position: static;
    height: auto;
    grid-template-rows: auto auto auto;
  }

  body.admin-mode .admin-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-main {
    padding: 14px;
  }

  body.admin-mode .admin-data-readiness {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-data-gates {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-data-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  body.admin-mode .admin-topbar,
  body.admin-mode .admin-topbar-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-mode .admin-panel .section-header,
  body.admin-mode .admin-operation-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  body.admin-mode #admin-create-video-form,
  body.admin-mode .admin-panel .admin-search-grid,
  body.admin-mode .admin-import-hero,
  body.admin-mode .admin-import-stats,
  body.admin-mode .admin-import-grid,
  body.admin-mode .admin-import-grid .admin-form,
  body.admin-mode .admin-import-checklist,
  body.admin-mode .admin-drama-control,
  body.admin-mode .admin-drama-genre-strip,
  body.admin-mode .admin-genre-overview,
  body.admin-mode .admin-operation-toolbar,
  body.admin-mode .admin-operation-list .admin-operation-row,
  body.admin-mode .admin-operation-detail-summary,
  body.admin-mode .admin-operation-payload-grid,
  body.admin-mode .admin-video-tools,
  body.admin-mode .admin-panel .admin-video-repair-list article,
  body.admin-mode .admin-video-form,
  body.admin-mode .admin-resource-item {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-operation-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-video-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode .admin-video-ledger-head,
  body.admin-mode .admin-video-meta {
    grid-column: 1 / -1;
  }

  body.admin-mode .admin-video-ledger-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-mode #admin-create-video-form button[type="submit"] {
    width: 100%;
  }
}

.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-tags span {
  border-radius: 999px;
  padding: 6px 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
}

.library-section h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.library-list {
  display: grid;
  gap: 10px;
}

.library-item,
.continue-card {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 13px 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
}

.library-item strong,
.continue-card strong {
  font-size: 15px;
}

.library-item span,
.continue-card span {
  color: #d4d4d8;
  font-size: 12px;
}

.search-results {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
}

.search-result {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  color: #111;
  background: #f6f6f7;
  text-align: left;
}

.search-result strong {
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result span,
.empty-state {
  color: #8b8b92;
  font-size: 13px;
}

.channels,
.rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 20px;
  scrollbar-width: none;
}

.channels::-webkit-scrollbar,
.rail::-webkit-scrollbar {
  display: none;
}

.channel {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 8px 14px;
  color: #fafafa;
  background: rgba(255, 255, 255, 0.08);
}

.channel.active {
  background: #ff365f;
  border-color: #ff365f;
}

.home-player-feed {
  --home-landscape-video-bottom: calc(39svh + 28.125vw);
  --home-video-top: calc(39svh - 28.125vw);
  --home-danmaku-top: max(calc(env(safe-area-inset-top) + 54px), calc(var(--home-video-top) - 140px));
  position: relative;
  width: 100%;
  min-height: calc(100svh - 46px);
  overflow: hidden;
  max-width: none;
  margin: 0 auto;
  background: #000;
  touch-action: pan-y;
}

.home-top-chrome {
  position: absolute;
  z-index: 5;
  top: max(32px, env(safe-area-inset-top));
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.home-menu-button,
.home-search-button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  color: #fff;
  background: transparent;
  pointer-events: auto;
}

.home-icon {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  color: currentColor;
}

.home-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-video-stage {
  position: absolute;
  top: 39%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  aspect-ratio: 16 / 9;
  overflow: visible;
  background: #111;
}

.home-player-feed.home-video-portrait .home-video-stage {
  top: 0;
  bottom: 0;
  height: auto;
  transform: none;
  aspect-ratio: auto;
}

.home-video-stage.home-landscape-fullscreen-active,
.home-video-stage:fullscreen {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  transform: none;
  aspect-ratio: auto;
  background: #000;
}

.home-video-stage.home-landscape-fullscreen-active .home-player-video,
.home-video-stage:fullscreen .home-player-video {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 100vh;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg) scale(1.02);
  object-fit: cover;
}

@media (orientation: landscape) {
  .home-video-stage.home-landscape-fullscreen-active .home-player-video,
  .home-video-stage.home-landscape-fullscreen-active:fullscreen .home-player-video {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
}

.home-landscape-ui {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: none;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

.home-landscape-ui.landscape-panel-open::before,
.player-landscape-ui.landscape-panel-open::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  display: none;
  background: transparent;
  pointer-events: auto;
}

.home-landscape-ui.landscape-panel-open .home-landscape-top,
.home-landscape-ui.landscape-panel-open .home-landscape-bottom,
.player-landscape-ui.landscape-panel-open .player-landscape-top,
.player-landscape-ui.landscape-panel-open .player-landscape-bottom {
  opacity: 0;
  pointer-events: none;
}

.home-video-stage.home-landscape-fullscreen-active .home-landscape-ui,
.home-video-stage:fullscreen .home-landscape-ui {
  left: 50%;
  top: 50%;
  width: 100dvh;
  height: 100dvw;
  display: block;
  min-width: 100vh;
  min-height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg) scale(1.02);
}

.home-video-stage.home-landscape-controls-hidden .home-landscape-ui {
  opacity: 0;
  pointer-events: none;
}

.home-video-stage.home-landscape-controls-hidden .home-landscape-top,
.home-video-stage.home-landscape-controls-hidden .home-landscape-bottom,
.home-video-stage.home-landscape-controls-hidden .home-landscape-lock,
.home-video-stage.home-landscape-controls-hidden .home-landscape-more-panel,
.home-video-stage.home-landscape-controls-hidden .home-landscape-comment-panel,
.home-video-stage.home-landscape-controls-hidden .home-landscape-speed-panel,
.home-video-stage.home-landscape-controls-hidden .home-landscape-quality-panel,
.home-video-stage.home-landscape-controls-hidden .home-landscape-danmaku-settings {
  pointer-events: none;
}

.home-video-stage.home-landscape-locked .home-landscape-top,
.home-video-stage.home-landscape-locked .home-landscape-bottom,
.home-video-stage.home-landscape-locked .home-landscape-more-panel,
.home-video-stage.home-landscape-locked .home-landscape-comment-panel,
.home-video-stage.home-landscape-locked .home-landscape-speed-panel,
.home-video-stage.home-landscape-locked .home-landscape-quality-panel,
.home-video-stage.home-landscape-locked .home-landscape-danmaku-settings {
  opacity: 0;
  pointer-events: none;
}

.home-video-stage.home-landscape-locked .home-landscape-lock {
  opacity: 1;
  background: rgba(0, 0, 0, 0.36);
}

.home-landscape-top,
.home-landscape-bottom,
.home-landscape-lock {
  position: absolute;
}

.home-landscape-top {
  z-index: 2;
  top: max(16px, env(safe-area-inset-top));
  left: 22px;
  right: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

.home-landscape-top strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: clamp(18px, 3.1vw, 25px);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-landscape-icon,
.home-landscape-play,
.home-landscape-action,
.home-landscape-text-action,
.home-landscape-lock {
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
}

.home-landscape-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 34px;
  line-height: 1;
}

.home-landscape-icon[data-home-landscape-action="more"] {
  font-size: 30px;
}

.home-landscape-lock {
  z-index: 3;
  top: 50%;
  right: max(26px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  font-size: 24px;
  transform: translateY(-50%);
}

.landscape-control-icon {
  display: grid;
  place-items: center;
}

.landscape-lock-icon {
  width: 24px;
  height: 24px;
}

.landscape-action-icon {
  width: clamp(28px, 4dvw, 40px);
  height: clamp(28px, 4dvw, 40px);
}

.landscape-control-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-landscape-bottom {
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  gap: 20px;
  padding-top: 0;
  background: transparent;
}

.home-landscape-transport {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.home-landscape-play {
  position: relative;
  width: 42px;
  height: 42px;
}

.home-landscape-play::before,
.home-landscape-play::after {
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 9px;
  border-radius: 3px;
  background: currentColor;
  content: "";
}

.home-landscape-play::before {
  left: 10px;
}

.home-landscape-play::after {
  right: 10px;
}

.home-landscape-play.paused::before {
  top: 8px;
  bottom: 8px;
  left: 14px;
  width: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid currentColor;
  border-radius: 0;
  background: transparent;
}

.home-landscape-play.paused::after {
  display: none;
}

.home-landscape-current,
.home-landscape-duration {
  color: #fff;
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 900;
}

.home-landscape-duration {
  color: rgba(255, 255, 255, 0.82);
}

.home-landscape-progress {
  position: relative;
  height: 4px;
  overflow: visible;
  cursor: pointer;
  touch-action: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.home-landscape-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

.home-landscape-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 54, 95, 0.92);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  transition: opacity 120ms ease, transform 120ms ease;
}

.home-landscape-progress.is-seeking {
  height: 6px;
}

.home-landscape-progress.is-seeking .home-landscape-progress-thumb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.home-landscape-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(48px, auto)) minmax(150px, 1fr) auto auto auto;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.home-landscape-action,
.home-landscape-text-action {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 48px;
  padding: 0;
  font-size: clamp(17px, 2.6vw, 22px);
  font-weight: 900;
}

.home-landscape-action span {
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1;
}

.home-landscape-action .landscape-control-icon {
  display: grid;
  font-size: 1px;
  line-height: 1;
}

.home-landscape-action small {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(11px, 1.7vw, 14px);
  font-weight: 900;
}

.home-landscape-action.active,
.home-landscape-text-action.active {
  color: #fff;
}

.home-landscape-action[data-home-landscape-action="like"].active {
  color: #ff7a2f;
}

.home-landscape-action[data-home-landscape-action="follow_drama"].active {
  color: #ff7a2f;
}

.home-landscape-action[data-home-landscape-action="favorite"].active {
  color: #ff7a2f;
}

.home-landscape-action[data-home-landscape-action="danmaku"].active,
.player-landscape-action[data-landscape-action="danmaku"].active {
  color: #fff;
}

.landscape-danmaku-status {
  position: absolute;
  right: 7px;
  bottom: 18px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(0, 0, 0, 0.76);
  border-radius: 999px;
  background: #10d5a0;
  opacity: 0;
  pointer-events: none;
}

.landscape-danmaku-status::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.home-landscape-action[data-home-landscape-action="danmaku"].active .landscape-danmaku-status,
.player-landscape-action[data-landscape-action="danmaku"].active .landscape-danmaku-status {
  opacity: 1;
}

.home-landscape-danmaku-composer,
.player-landscape-danmaku-composer {
  align-self: center;
  justify-self: stretch;
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  padding: 0 clamp(14px, 2.3dvw, 22px);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.18);
  font: inherit;
  font-size: clamp(14px, 2dvw, 18px);
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.home-player-feed.home-danmaku-off .home-landscape-danmaku-composer,
.player.danmaku-off .player-landscape-danmaku-composer {
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
}

.home-landscape-toast,
.player-landscape-toast {
  position: absolute;
  top: max(72px, calc(env(safe-area-inset-top) + 38px));
  left: 50%;
  z-index: 12;
  min-width: 132px;
  border-radius: 18px;
  padding: 14px 24px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(72, 72, 72, 0.9);
  font-size: clamp(17px, 2.5dvw, 24px);
  font-weight: 750;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(12px);
}

.home-landscape-toast.show,
.player-landscape-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.home-landscape-more-panel,
.home-landscape-danmaku-settings {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: grid;
  grid-auto-rows: max-content;
  grid-template-rows: auto;
  align-content: start;
  width: min(42dvh, 480px);
  min-width: 360px;
  max-height: 100%;
  padding: max(14px, env(safe-area-inset-top)) clamp(14px, 2dvw, 18px) max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  -webkit-overflow-scrolling: touch;
  color: #fff;
  background: rgba(22, 22, 23, 0.92);
  border-radius: 24px 0 0 24px;
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transform: translateX(104%);
  transition: opacity 180ms ease, transform 240ms ease;
  backdrop-filter: blur(20px);
}

.home-landscape-speed-panel,
.player-landscape-speed-panel,
.home-landscape-quality-panel,
.player-landscape-quality-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  align-content: center;
  gap: clamp(22px, 4dvh, 38px);
  width: min(32dvh, 360px);
  min-width: min(270px, 34dvh);
  padding: max(22px, env(safe-area-inset-top)) clamp(18px, 2.4dvw, 24px) max(22px, env(safe-area-inset-bottom));
  color: #fff;
  background: rgba(22, 22, 23, 0.94);
  border-radius: 26px 0 0 26px;
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translateX(104%);
  transition: opacity 180ms ease, transform 220ms ease;
  backdrop-filter: blur(18px);
}

.home-landscape-speed-panel.open,
.player-landscape-speed-panel.open,
.home-landscape-quality-panel.open,
.player-landscape-quality-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.player-landscape-speed-option,
.player-landscape-quality-option {
  display: grid;
  place-items: center;
  min-height: clamp(54px, 11dvh, 72px);
  border: 0;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  font: inherit;
  font-size: clamp(24px, 5dvh, 38px);
  font-weight: 800;
  letter-spacing: 0;
}

.player-landscape-speed-option.active,
.player-landscape-quality-option.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.24);
}

.home-landscape-more-panel.open,
.home-landscape-danmaku-settings.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.home-landscape-comment-panel,
.player-landscape-comment-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(42dvh, 480px);
  min-width: 360px;
  max-height: 100%;
  padding: max(12px, env(safe-area-inset-top)) clamp(14px, 2dvw, 18px) max(14px, env(safe-area-inset-bottom));
  color: #f7f7f8;
  background: rgba(22, 22, 23, 0.94);
  border-radius: 26px 0 0 26px;
  box-shadow: -16px 0 38px rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transform: translateX(104%);
  transition: opacity 180ms ease, transform 220ms ease;
  backdrop-filter: blur(20px);
}

.home-landscape-comment-panel.open,
.player-landscape-comment-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.landscape-comment-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 50px;
}

.landscape-comment-header strong {
  text-align: center;
  font-size: clamp(20px, 3.3dvh, 29px);
  font-weight: 800;
}

.landscape-comment-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  font: inherit;
  font-size: 38px;
  line-height: 1;
}

.landscape-comment-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0 16px;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  text-align: left;
  font: inherit;
}

.landscape-comment-notice span {
  border-radius: 6px;
  padding: 2px 7px;
  color: #19c99c;
  background: rgba(16, 213, 160, 0.12);
  font-size: clamp(12px, 2dvh, 16px);
}

.landscape-comment-notice strong {
  overflow: hidden;
  font-size: clamp(17px, 3.2dvh, 24px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landscape-comment-notice b {
  color: rgba(255, 255, 255, 0.52);
  font-size: 30px;
}

.landscape-comment-list {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 14px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.landscape-comment-list::-webkit-scrollbar {
  display: none;
}

.landscape-comment-reply-anchor {
  min-height: 0;
}

.landscape-comment-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 44px;
  gap: 12px;
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
}

.landscape-comment-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.64);
  outline-offset: 5px;
  border-radius: 12px;
}

.landscape-comment-avatar {
  width: 44px;
  height: 44px;
}

.landscape-comment-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.landscape-comment-body strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.38);
  font-size: clamp(13px, 2.2dvh, 17px);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landscape-comment-body span {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(17px, 3.2dvh, 25px);
  line-height: 1.35;
}

.landscape-comment-body small,
.landscape-comment-body em,
.landscape-comment-empty {
  color: rgba(255, 255, 255, 0.38);
  font-size: clamp(12px, 2.1dvh, 15px);
  font-style: normal;
}

.landscape-comment-inline-action {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.44);
  cursor: pointer;
}

.landscape-comment-inline-action:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.58);
  outline-offset: 3px;
  border-radius: 6px;
}

.landscape-comment-body em {
  margin-top: 8px;
}

.landscape-comment-like {
  display: grid;
  justify-items: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.landscape-comment-like:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.58);
  outline-offset: 4px;
  border-radius: 12px;
}

.landscape-comment-like small {
  font-size: 13px;
}

.landscape-comment-like.liked {
  color: #ff4d73;
}

.landscape-comment-composer {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(22, 22, 23, 0), rgba(22, 22, 23, 0.96) 24%);
}

.landscape-comment-reply-target {
  margin-bottom: 8px;
  border-radius: 14px;
  padding: 9px 12px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.09);
}

.landscape-comment-reply-target button {
  color: rgba(255, 255, 255, 0.62);
}

.landscape-comment-composer input {
  min-width: 0;
  height: 48px;
  border: 0;
  border-radius: 15px;
  padding: 0 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: clamp(14px, 2.3dvh, 18px);
}

.landscape-comment-composer input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.landscape-comment-composer button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
}

.landscape-comment-composer .landscape-comment-send-button {
  width: auto;
  min-width: 54px;
  padding: 0 14px;
  color: #111;
  background: #f7f7f8;
  font-size: 14px;
  font-weight: 900;
}

.landscape-comment-composer .home-icon {
  width: 32px;
  height: 32px;
}

.home-landscape-more-panel::-webkit-scrollbar,
.home-landscape-danmaku-settings::-webkit-scrollbar {
  width: 6px;
}

.home-landscape-more-panel::-webkit-scrollbar-thumb,
.home-landscape-danmaku-settings::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

@media (orientation: landscape) {
  .home-video-stage.home-landscape-fullscreen-active .home-landscape-ui,
  .home-video-stage:fullscreen .home-landscape-ui {
    inset: 0;
    width: 100dvw;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    transform: none;
  }

  .home-landscape-more-panel,
  .home-landscape-comment-panel,
  .home-landscape-speed-panel,
  .home-landscape-quality-panel,
  .home-landscape-danmaku-settings {
    width: min(38dvw, 500px);
    min-width: min(360px, 38dvw);
  }
}

@media (orientation: portrait) and (max-width: 430px), (orientation: landscape) and (max-height: 430px) {
  .home-video-stage.home-landscape-fullscreen-active .home-landscape-ui,
  .home-video-stage:fullscreen .home-landscape-ui,
  .player.player-landscape-fullscreen-active .player-landscape-ui {
    scale: 1;
  }

  .home-landscape-top,
  .player-landscape-top {
    top: max(10px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    grid-template-columns: 38px 1fr 38px;
    gap: 8px;
  }

  .home-landscape-top strong,
  .player-landscape-top strong {
    font-size: clamp(15px, 4dvw, 20px);
  }

  .home-landscape-icon,
  .player-landscape-icon {
    width: 38px;
    height: 38px;
    font-size: 31px;
  }

  .home-landscape-icon[data-home-landscape-action="more"],
  .player-landscape-icon[data-landscape-action="more"] {
    font-size: 27px;
  }

  .home-landscape-lock,
  .player-landscape-lock {
    right: max(14px, env(safe-area-inset-right));
    width: 36px;
    height: 36px;
  }

  .home-landscape-bottom,
  .player-landscape-bottom {
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    padding-top: 42px;
  }

  .home-landscape-bottom {
    gap: 12px;
  }

  .player-landscape-transport {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 12px;
  }

  .home-landscape-transport {
    gap: 8px;
  }

  .home-landscape-play,
  .player-landscape-play {
    width: 38px;
    height: 38px;
  }

  .home-landscape-current,
  .home-landscape-duration,
  .player-landscape-current,
  .player-landscape-duration {
    font-size: 13px;
  }

  .home-landscape-actions,
  .player-landscape-actions {
    grid-template-columns: repeat(4, minmax(34px, auto)) 1fr auto auto auto;
    gap: 8px;
  }

  .home-landscape-action,
  .home-landscape-text-action,
  .player-landscape-action,
  .player-landscape-text-action {
    min-width: 34px;
    min-height: 34px;
    font-size: 13px;
  }

  .home-landscape-action .landscape-action-icon,
  .player-landscape-action .landscape-action-icon {
    width: 26px;
    height: 26px;
  }

  .home-landscape-action small,
  .player-landscape-action small {
    font-size: 10px;
  }

  .home-landscape-more-panel,
  .home-landscape-comment-panel,
  .home-landscape-speed-panel,
  .home-landscape-quality-panel,
  .home-landscape-danmaku-settings,
  .player-landscape-more-panel,
  .player-landscape-comment-panel,
  .player-landscape-speed-panel,
  .player-landscape-quality-panel,
  .player-landscape-danmaku-settings {
    width: min(52dvh, 350px);
    min-width: min(248px, 52dvh);
    padding: max(8px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    border-radius: 18px 0 0 18px;
  }

  .home-landscape-speed-panel,
  .player-landscape-speed-panel,
  .home-landscape-quality-panel,
  .player-landscape-quality-panel {
    gap: 14px;
    align-content: center;
  }

  .home-landscape-comment-panel,
  .player-landscape-comment-panel {
    width: min(54dvh, 380px);
    min-width: min(270px, 54dvh);
  }

  .player-landscape-speed-option,
  .player-landscape-quality-option {
    min-height: 46px;
    font-size: clamp(20px, 7dvh, 30px);
  }

  .player-landscape-panel-header {
    grid-template-columns: 36px 1fr minmax(36px, auto);
    min-height: 38px;
    margin-bottom: 6px;
  }

  .player-landscape-panel-header strong {
    font-size: clamp(16px, 4.2dvw, 21px);
  }

  .player-landscape-panel-close {
    width: 36px;
    height: 36px;
    font-size: 32px;
  }

  .player-landscape-panel-reset {
    font-size: 11px;
  }

  .player-landscape-settings-card {
    padding: 8px;
    border-radius: 12px;
  }

  .player-landscape-settings-card + .player-landscape-settings-card {
    margin-top: 8px;
  }

  .player-landscape-setting-row {
    grid-template-columns: minmax(78px, 0.85fr) minmax(0, 1.7fr);
    gap: 6px;
    min-height: 42px;
  }

  .player-landscape-setting-row-split {
    grid-template-columns: 1fr auto;
  }

  .player-landscape-setting-label {
    gap: 6px;
  }

  .player-landscape-setting-label .landscape-action-icon {
    width: 20px;
    height: 20px;
  }

  .player-landscape-setting-label strong {
    font-size: 12px;
  }

  .player-landscape-setting-label em {
    font-size: 9px;
  }

  .player-landscape-segmented {
    border-radius: 9px;
  }

  .player-landscape-segmented button {
    min-height: 30px;
    font-size: 10px;
  }

  .player-landscape-switch {
    width: 42px;
    height: 24px;
  }

  .player-landscape-switch span {
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px;
  }

  .player-landscape-switch.active span,
  .player-landscape-switch[aria-pressed="true"] span {
    transform: translateX(18px);
  }

  .player-landscape-slider-card {
    gap: 12px;
    padding: 10px;
  }

  .player-landscape-slider-row {
    gap: 8px;
  }

  .player-landscape-slider-row span {
    font-size: 12px;
  }

  .player-landscape-slider-row input[type="range"] {
    height: 8px;
  }
}

@media (orientation: portrait) and (max-width: 430px) {
  .home-video-stage.home-landscape-fullscreen-active .home-landscape-ui,
  .home-video-stage:fullscreen .home-landscape-ui,
  .player.player-landscape-fullscreen-active .player-landscape-ui {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

.home-player-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: cover;
}

.home-player-feed.home-video-portrait .home-player-video {
  object-fit: cover;
}

.home-player-feed.home-video-landscape .home-player-video {
  object-fit: contain;
}

.home-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  border: 0;
  border-radius: 50%;
  color: #111;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
  transition: opacity 160ms ease, transform 160ms ease;
}

.home-player-feed.home-paused .home-play-button {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
}

.home-play-button .home-icon {
  width: 42px;
  height: 42px;
  margin-left: 4px;
}

.home-play-button .home-icon svg {
  fill: currentColor;
  stroke-width: 0;
}

.home-pause-indicator,
.player-pause-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  padding: 0;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 160ms ease, transform 160ms ease;
}

.home-pause-indicator .home-icon,
.player-pause-indicator .play-symbol {
  width: 34px;
  height: 38px;
}

.home-pause-indicator .home-icon svg {
  fill: currentColor;
  stroke-width: 0;
}

.home-player-feed.home-paused .home-pause-indicator,
.player.paused .player-pause-indicator {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hold-speed-overlay {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.56);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 120ms ease, transform 120ms ease;
}

.hold-speed-overlay.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hold-speed-rate {
  font-size: 18px;
  line-height: 1;
}

.hold-speed-chevrons {
  display: inline-flex;
  font-size: 17px;
  line-height: 1;
}

.hold-speed-chevrons span {
  opacity: 0.36;
  animation: hold-speed-chevron 720ms infinite ease-in-out;
}

.hold-speed-chevrons span:nth-child(1) {
  animation-delay: 0ms;
}

.hold-speed-chevrons span:nth-child(2) {
  animation-delay: 120ms;
}

.hold-speed-chevrons span:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes hold-speed-chevron {
  0%,
  100% {
    opacity: 0.28;
    transform: translateX(0);
  }
  45% {
    opacity: 1;
    transform: translateX(2px);
  }
}

.home-reward-float {
  position: absolute;
  z-index: 7;
  right: 14px;
  top: 118px;
  width: 57px;
  height: 57px;
  display: grid;
  place-items: center;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.home-reward-float.dragging {
  cursor: grabbing;
}

.home-reward-main {
  --reward-ring: #ffb33d;
  --reward-track: rgba(255, 255, 255, 0.24);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 3px;
  color: #fff;
  background: conic-gradient(var(--reward-ring) var(--reward-progress), var(--reward-track) 0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.home-reward-core {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.35), transparent 36%),
    linear-gradient(180deg, #ff8b26, #ff4f18);
  box-shadow: inset 0 -8px 14px rgba(130, 45, 0, 0.18);
}

.home-reward-coin {
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.home-reward-unit {
  margin-top: 1px;
  font-size: 8px;
  font-weight: 800;
}

.home-reward-core strong {
  margin-top: 2px;
  border-radius: 999px;
  padding: 1px 5px 2px;
  color: #ff671b;
  background: #fff;
  font-size: 7px;
  font-weight: 900;
}

.home-reward-countdown {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

.home-reward-main.ready {
  --reward-ring: #fff;
  animation: rewardReadyPulse 920ms ease-in-out infinite alternate;
}

.home-reward-float.claimed .home-reward-main {
  transform: scale(1.06);
}

@keyframes rewardReadyPulse {
  from {
    filter: drop-shadow(0 0 0 rgba(255, 177, 61, 0));
  }
  to {
    filter: drop-shadow(0 0 7px rgba(255, 177, 61, 0.72));
  }
}

.home-reward-close {
  position: absolute;
  top: -1px;
  right: 0;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  color: #fff;
  background: rgba(14, 14, 16, 0.78);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.72);
  transition: opacity 140ms ease, transform 140ms ease;
}

.home-reward-claim {
  position: absolute;
  left: 50%;
  bottom: -17px;
  min-width: 64px;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 4px 6px;
  color: #fff;
  background: rgba(10, 10, 12, 0.78);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  font-size: 8px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.home-reward-claim[hidden] {
  display: none;
}

.home-reward-float.show-close .home-reward-close {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.home-player-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, transparent 24%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, transparent 50%);
  pointer-events: none;
}

.home-action-rail {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 54px;
  display: grid;
  gap: 12px;
  transform: none;
}

.home-action-rail button {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 56px;
  min-width: 56px;
  border: 0;
  color: #fff;
  background: transparent;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.48);
}

.home-action-rail button[aria-pressed="true"] {
  color: #fff;
}

.home-action-rail button[aria-pressed="true"] .home-icon {
  background: transparent;
}

.home-action-rail button[data-home-action="like"][aria-pressed="true"] .home-icon {
  color: #ff7a2f;
}

.home-action-rail button[data-home-action="favorite"][aria-pressed="true"] .home-icon {
  color: #ff7a2f;
}

.home-action-rail button[data-home-action="follow_drama"][aria-pressed="true"] .home-icon {
  color: #ff7a2f;
}

.home-action-rail .home-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.96);
}

.home-action-rail .home-icon svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
  stroke-width: 0;
}

.home-action-count {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.48);
}

.home-danmaku-toggle {
  position: static;
  justify-self: start;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: rgba(28, 28, 30, 0.76);
  font-size: 25px;
  font-weight: 900;
  backdrop-filter: blur(14px);
}

.home-danmaku-toggle[aria-pressed="false"] {
  color: rgba(255, 255, 255, 0.42);
}

.home-danmaku-strip {
  position: absolute;
  z-index: 4;
  top: var(--home-danmaku-top);
  bottom: auto;
  left: 0;
  right: 0;
  height: 46px;
  overflow: hidden;
  opacity: var(--home-danmaku-opacity, 1);
  pointer-events: none;
}

.home-danmaku-strip span {
  position: absolute;
  top: calc(var(--danmaku-lane, 0) * 34px);
  left: 100%;
  max-width: min(360px, 82vw);
  overflow: hidden;
  border-radius: 999px;
  padding: 7px 11px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.38);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  font-size: var(--home-danmaku-font-size, 17px);
  opacity: 0;
  text-overflow: ellipsis;
  transform: translate3d(0, 0, 0);
  white-space: nowrap;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.home-player-feed.home-danmaku-off .home-danmaku-strip {
  display: none;
}

.home-player-overlay {
  position: absolute;
  left: 18px;
  right: 82px;
  bottom: 92px;
  z-index: 1;
  pointer-events: none;
}

.home-player-copy {
  display: grid;
  gap: 9px;
  min-width: 0;
  max-width: 620px;
  pointer-events: auto;
}

.home-player-feed.home-video-landscape .home-player-copy {
  padding-top: 68px;
}

.home-player-copy h2 {
  margin: 0;
  max-width: 100%;
  font-size: 29px;
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}

.home-player-copy p {
  margin: 0;
  color: #f4f4f5;
  font-size: 14px;
  line-height: 1.45;
}

.home-player-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.home-player-tags span {
  border-radius: 999px;
  padding: 6px 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 15px;
  font-weight: 800;
}

.home-fullscreen-button {
  justify-self: start;
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 9px 16px;
  color: #fff;
  background: rgba(36, 36, 36, 0.87);
  font-weight: 800;
  text-shadow: none;
  backdrop-filter: none;
}

.home-player-feed.home-video-landscape .home-fullscreen-button {
  display: inline-flex;
  position: absolute;
  top: auto;
  bottom: -28px;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
}

.home-player-actions {
  display: grid;
  gap: 12px;
  align-self: end;
  pointer-events: auto;
}

.home-player-actions button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 800;
}

.home-episode-intro,
.home-comment-line,
.home-ai-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.35;
}

.home-episode-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: min(72vw, 640px);
  font-weight: 600;
}

.home-episode-intro span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-episode-intro.expanded {
  align-items: flex-start;
}

.home-episode-intro.expanded span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.home-copy-expand {
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-weight: 850;
}

.home-ai-note {
  color: rgba(255, 255, 255, 0.42);
  font-size: 14px;
}

.home-watch-full {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border: 0;
  border-radius: 0;
  padding: 8px 18px 12px;
  color: #fff;
  background: rgba(34, 34, 34, 0.98);
  text-align: left;
}

.home-watch-full > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 17px;
}

.home-watch-full > .home-icon {
  width: 22px;
  height: 22px;
}

.home-progress-track {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 4px;
  overflow: visible;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  touch-action: none;
}

.home-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #ff7a1a;
}

.home-progress-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.26);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.home-progress-track.is-seeking .home-progress-thumb,
.home-progress-track:focus-visible .home-progress-thumb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.section {
  padding: 8px 20px 18px;
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-header h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.section-header span {
  color: #a1a1aa;
  font-size: 12px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
}

.drama-card {
  position: relative;
  overflow: hidden;
  min-height: 196px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #18181b;
  cursor: pointer;
}

.poster {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 14px;
  background: linear-gradient(145deg, var(--poster-a), var(--poster-b));
}

.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.74) 100%);
}

.poster-content {
  position: relative;
  z-index: 1;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.tag {
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.drama-card h3,
.feed-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.drama-meta {
  margin-top: 7px;
  color: #e4e4e7;
  font-size: 12px;
}

.rail-card {
  flex: 0 0 132px;
  min-height: 178px;
}

.continue-card {
  flex: 0 0 188px;
  min-height: 92px;
}

.feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.feed-card {
  position: relative;
  min-height: 230px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #18181b;
  overflow: hidden;
  text-align: left;
}

.feed-card .poster {
  padding: 12px;
}

.reason {
  display: inline-flex;
  margin-top: 8px;
  border-radius: 999px;
  padding: 4px 8px;
  color: #fff;
  background: rgba(255, 54, 95, 0.82);
  font-size: 11px;
}

.loader {
  padding: 24px;
  color: #a1a1aa;
  text-align: center;
}

.player {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  background: #000;
}

.player.open {
  display: grid;
}

.player-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(160deg, #18181b, #3f1d2a);
}

.player.player-video-landscape {
  --player-landscape-video-top: clamp(190px, 32dvh, 260px);
  --player-landscape-video-height: min(56.25vw, 23dvh);
  --player-landscape-danmaku-top: max(108px, calc(env(safe-area-inset-top) + 84px));
}

.player.player-video-landscape .player-video {
  position: absolute;
  left: 0;
  top: var(--player-landscape-video-top);
  width: 100%;
  aspect-ratio: 16 / 9;
  height: var(--player-landscape-video-height);
  max-height: none;
  object-fit: cover;
  background: #000;
}

.player.player-video-landscape .player-overlay {
  align-items: end;
  padding: 0 22px max(12px, env(safe-area-inset-bottom)) 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.84) 100%);
}

.player.player-video-landscape .player-copy {
  align-self: end;
  max-width: calc(100vw - 86px);
  padding-bottom: 0;
}

.player.player-video-landscape .player-copy h2 {
  max-width: min(68vw, calc(100vw - 86px));
}

.player.player-video-landscape .player-copy p {
  display: none;
  max-width: min(62vw, calc(100vw - 118px));
}

.player.player-video-landscape .player-progress {
  width: calc(100vw - 44px);
}

.player.player-video-landscape .player-danmaku-strip {
  top: var(--player-landscape-danmaku-top);
  right: 18px;
  bottom: auto;
  height: max(72px, calc(var(--player-landscape-video-top) - var(--player-landscape-danmaku-top) - 22px));
}

.player.player-video-landscape .player-danmaku-strip span {
  max-width: min(420px, calc(100vw - 48px));
}

.player.player-video-landscape .player-danmaku-toggle {
  top: calc(var(--player-landscape-video-top) + var(--player-landscape-video-height) + 18px);
  bottom: auto;
}

.player.player-video-landscape .player-episode-badge {
  display: none;
}

.player.player-video-landscape.player-landscape-fullscreen-active .player-video,
.player.player-landscape-fullscreen-active:fullscreen .player-video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100dvh;
  height: 100dvw;
  min-width: 100vh;
  min-height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg) scale(1.02);
  object-fit: cover;
}

.player.player-landscape-fullscreen-active .player-overlay {
  pointer-events: none;
  background: transparent;
}

.player-landscape-ui {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: none;
  color: #fff;
  opacity: 1;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.player-landscape-ui.landscape-panel-open {
  pointer-events: auto;
}

.player.player-landscape-fullscreen-active .player-copy,
.player.player-landscape-fullscreen-active .player-actions,
.player.player-landscape-fullscreen-active .play-toggle,
.player.player-landscape-fullscreen-active .player-danmaku-toggle,
.player.player-landscape-fullscreen-active .player-danmaku-strip {
  display: none;
}

.player.player-landscape-fullscreen-active .close-button,
.player.player-landscape-fullscreen-active .player-back-button {
  display: none;
}

.player.player-landscape-fullscreen-active .player-topbar,
.player.player-landscape-fullscreen-active .player-toast {
  display: none;
}

.player.player-landscape-fullscreen-active .player-landscape-ui {
  left: 50%;
  top: 50%;
  display: block;
  width: 100dvh;
  height: 100dvw;
  min-width: 100vh;
  min-height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg) scale(1.02);
}

.player.player-landscape-controls-hidden .player-landscape-ui {
  opacity: 0;
  pointer-events: none;
}

.player.player-landscape-controls-hidden .player-landscape-top,
.player.player-landscape-controls-hidden .player-landscape-bottom,
.player.player-landscape-controls-hidden .player-landscape-lock,
.player.player-landscape-controls-hidden .player-landscape-comment-panel {
  pointer-events: none;
}

.player.player-landscape-locked .player-landscape-top,
.player.player-landscape-locked .player-landscape-bottom,
.player.player-landscape-locked .player-landscape-comment-panel {
  opacity: 0;
  pointer-events: none;
}

.player.player-landscape-locked .player-landscape-lock {
  opacity: 1;
  background: rgba(0, 0, 0, 0.36);
}

.player-landscape-top,
.player-landscape-bottom,
.player-landscape-lock {
  pointer-events: auto;
}

.player-landscape-top {
  position: absolute;
  z-index: 2;
  left: max(24px, env(safe-area-inset-left));
  right: max(24px, env(safe-area-inset-right));
  top: max(18px, env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 12px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.64);
}

.player-landscape-top strong {
  overflow: hidden;
  font-size: clamp(18px, 2.6dvw, 24px);
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-landscape-icon,
.player-landscape-play,
.player-landscape-action,
.player-landscape-text-action,
.player-landscape-lock {
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
}

.player-landscape-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 42px;
  font-weight: 500;
}

.player-landscape-icon[data-landscape-action="more"] {
  font-size: 34px;
}

.player-landscape-lock {
  position: absolute;
  z-index: 3;
  right: max(30px, env(safe-area-inset-right));
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 42px;
  border-radius: 999px;
  font-size: 24px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  transform: translateY(-50%);
  transition: background 160ms ease, opacity 180ms ease;
}

.player-landscape-bottom {
  position: absolute;
  z-index: 1;
  left: max(28px, env(safe-area-inset-left));
  right: max(28px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  padding-top: 0;
  background: transparent;
}

.player-landscape-transport {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.player-landscape-play {
  position: relative;
  width: 48px;
  height: 48px;
}

.player-landscape-play::before,
.player-landscape-play::after {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 10px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.player-landscape-play::before {
  left: 10px;
}

.player-landscape-play::after {
  right: 10px;
}

.player-landscape-play.paused::before {
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 28px;
  border-radius: 0;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.player-landscape-play.paused::after {
  display: none;
}

.player-landscape-current,
.player-landscape-duration {
  font-size: clamp(15px, 2.1dvw, 20px);
  font-weight: 850;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.player-landscape-duration {
  text-align: right;
}

.player-landscape-progress {
  position: relative;
  overflow: visible;
  height: 4px;
  cursor: pointer;
  touch-action: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.player-landscape-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transition: width 120ms linear;
}

.player-landscape-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 54, 95, 0.92);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  transition: opacity 120ms ease, transform 120ms ease;
}

.player-landscape-progress.is-seeking {
  height: 6px;
}

.player-landscape-progress.is-seeking .player-landscape-progress-thumb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.player-landscape-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, auto)) 1fr auto auto auto;
  align-items: end;
  gap: clamp(18px, 3.2dvw, 42px);
}

.player-landscape-action,
.player-landscape-text-action {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 46px;
  font-size: clamp(16px, 2.2dvw, 20px);
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58);
}

.player-landscape-action span {
  display: block;
  font-size: clamp(28px, 4dvw, 42px);
  line-height: 1;
}

.player-landscape-action .landscape-control-icon {
  display: grid;
  font-size: 1px;
  line-height: 1;
}

.player-landscape-action small {
  margin-top: -2px;
  font-size: clamp(11px, 1.5dvw, 14px);
  font-weight: 850;
}

.player-landscape-action.active,
.player-landscape-text-action.active {
  color: #fff;
}

.player-landscape-action[data-landscape-action="like"].active {
  color: #ff7a2f;
}

.player-landscape-action[data-landscape-action="follow_drama"].active {
  color: #ff7a2f;
}

.player-landscape-action[data-landscape-action="favorite"].active {
  color: #ff7a2f;
}

.player-landscape-episode-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(32dvh, 390px);
  min-width: min(300px, 36dvh);
  padding: max(18px, env(safe-area-inset-top)) clamp(16px, 2.1dvw, 22px) max(18px, env(safe-area-inset-bottom));
  color: #fff;
  background: rgba(24, 24, 24, 0.96);
  border-radius: 24px 0 0 24px;
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translateX(102%);
  transition: opacity 180ms ease, transform 220ms ease;
}

.player-landscape-episode-drawer.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.player-landscape-episode-header {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  min-height: 58px;
  margin-bottom: 12px;
}

.player-landscape-episode-header strong {
  text-align: center;
  font-size: clamp(22px, 3dvw, 30px);
  font-weight: 850;
  letter-spacing: 0;
}

.player-landscape-episode-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: 46px;
  font-weight: 300;
  line-height: 1;
}

.player-landscape-episode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2dvw, 18px);
  align-content: start;
  overflow-y: auto;
  min-height: 0;
  padding: 4px 0 20px;
  scrollbar-width: none;
}

.player-landscape-episode-grid::-webkit-scrollbar {
  display: none;
}

.player-landscape-episode-grid button {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.42);
  background: #303030;
  font: inherit;
  font-size: clamp(22px, 3.2dvw, 30px);
  font-weight: 500;
  letter-spacing: 0;
}

.player-landscape-episode-grid button.played {
  color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.player-landscape-episode-grid button.active {
  color: #10d5a0;
  background: rgba(6, 130, 101, 0.52);
  box-shadow: inset 0 0 0 1px rgba(16, 213, 160, 0.28);
}

.player-landscape-episode-playing {
  position: absolute;
  right: 9px;
  bottom: 8px;
  display: inline-flex;
  align-items: end;
  gap: 2px;
  height: 20px;
  color: #12e0aa;
}

.player-landscape-episode-playing i {
  display: block;
  width: 4px;
  height: 11px;
  border-radius: 999px;
  background: currentColor;
}

.player-landscape-episode-playing i:nth-child(2) {
  height: 18px;
}

.player-landscape-episode-playing i:nth-child(3) {
  height: 14px;
}

.player-landscape-more-panel,
.player-landscape-danmaku-settings {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: grid;
  grid-auto-rows: max-content;
  grid-template-rows: auto;
  align-content: start;
  width: min(42dvh, 480px);
  min-width: 360px;
  max-height: 100%;
  padding: max(14px, env(safe-area-inset-top)) clamp(14px, 2dvw, 18px) max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  -webkit-overflow-scrolling: touch;
  color: #fff;
  background: rgba(22, 22, 23, 0.92);
  border-radius: 24px 0 0 24px;
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transform: translateX(104%);
  transition: opacity 180ms ease, transform 240ms ease;
  backdrop-filter: blur(20px);
}

.player-landscape-more-panel.open,
.player-landscape-danmaku-settings.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.player-landscape-more-panel::-webkit-scrollbar,
.player-landscape-danmaku-settings::-webkit-scrollbar {
  width: 6px;
}

.player-landscape-more-panel::-webkit-scrollbar-thumb,
.player-landscape-danmaku-settings::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.player-landscape-panel-header {
  display: grid;
  grid-template-columns: 48px 1fr minmax(48px, auto);
  align-items: center;
  min-height: 54px;
  margin-bottom: 12px;
}

.player-landscape-panel-header strong {
  text-align: center;
  font-size: clamp(20px, 2.5dvw, 28px);
  font-weight: 900;
}

.player-landscape-panel-close,
.player-landscape-panel-reset {
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
}

.player-landscape-panel-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
}

.player-landscape-panel-reset {
  color: rgba(255, 255, 255, 0.42);
  font-size: clamp(13px, 1.7dvw, 17px);
  font-weight: 750;
}

.player-landscape-settings-card {
  align-self: start;
  padding: clamp(10px, 1.4dvw, 14px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.player-landscape-settings-card + .player-landscape-settings-card {
  margin-top: 12px;
}

.player-landscape-setting-row {
  display: grid;
  grid-template-columns: minmax(112px, 0.9fr) minmax(0, 1.9fr);
  align-items: center;
  gap: clamp(8px, 1.5dvw, 14px);
  min-height: clamp(50px, 8dvh, 62px);
  color: #fff;
}

.player-landscape-setting-row + .player-landscape-setting-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.player-landscape-setting-row-split {
  grid-template-columns: 1fr auto;
}

.player-landscape-setting-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.player-landscape-setting-label > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.player-landscape-setting-label strong {
  overflow: hidden;
  font-size: clamp(14px, 1.8dvw, 19px);
  font-weight: 900;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-landscape-setting-label em {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.42);
  font-size: clamp(9px, 1.15dvw, 12px);
  font-style: normal;
  font-weight: 750;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-landscape-setting-label .landscape-action-icon {
  width: 24px;
  height: 24px;
}

.player-landscape-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.player-landscape-segmented button {
  min-width: 0;
  min-height: 38px;
  border: 0;
  color: rgba(255, 255, 255, 0.38);
  background: transparent;
  font: inherit;
  font-size: clamp(12px, 1.6dvw, 16px);
  font-weight: 800;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.player-landscape-segmented button.active,
.player-landscape-segmented button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(16, 213, 160, 0.28));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: scale(1.02);
}

.player-landscape-switch {
  position: relative;
  width: 50px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 160ms ease;
}

.player-landscape-switch span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms ease;
}

.player-landscape-switch.active,
.player-landscape-switch[aria-pressed="true"] {
  background: #10d5a0;
}

.player-landscape-switch.active span,
.player-landscape-switch[aria-pressed="true"] span {
  transform: translateX(20px);
}

.player-landscape-link-row {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding-inline: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}

.player-landscape-link-row:active {
  background: rgba(255, 255, 255, 0.08);
}

.player-landscape-link-row > .landscape-control-icon {
  justify-self: end;
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, 0.5);
}

.player-landscape-slider-card {
  display: grid;
  gap: clamp(16px, 2.2dvw, 22px);
  padding: clamp(14px, 2.2dvw, 18px);
}

.player-landscape-slider-row {
  display: grid;
  gap: 12px;
}

.player-landscape-slider-row span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: clamp(14px, 1.8dvw, 19px);
}

.player-landscape-slider-row strong {
  font-weight: 900;
}

.player-landscape-slider-row em {
  color: rgba(255, 255, 255, 0.42);
  font-style: normal;
  font-weight: 750;
}

.player-landscape-slider-row input[type="range"] {
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.12);
}

.player-landscape-slider-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

.player-landscape-slider-row input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

@media (orientation: landscape) {
  .player.player-video-landscape.player-landscape-fullscreen-active .player-video,
  .player.player-landscape-fullscreen-active:fullscreen .player-video {
    position: absolute;
    inset: 0;
    width: 100dvw;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    transform: none;
  }

  .player.player-landscape-fullscreen-active .player-landscape-ui {
    left: 0;
    top: 0;
    width: 100dvw;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    transform: none;
  }

  .player-landscape-episode-drawer {
    width: min(32dvw, 380px);
  }

  .player-landscape-more-panel,
  .player-landscape-comment-panel,
  .player-landscape-speed-panel,
  .player-landscape-quality-panel,
  .player-landscape-danmaku-settings {
    width: min(38dvw, 500px);
    min-width: min(360px, 38dvw);
  }

  .player-landscape-comment-panel {
    width: min(40dvw, 560px);
    min-width: min(390px, 40dvw);
  }
}

.player-landscape-button {
  display: none;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 7px;
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  padding: 0 16px;
  color: #fff;
  background: transparent;
  font-weight: 850;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.86);
  backdrop-filter: none;
}

.player.player-video-landscape .player-landscape-button {
  display: inline-flex;
  position: absolute;
  left: 50%;
  top: calc(var(--player-landscape-video-top) + var(--player-landscape-video-height) - 4px);
  z-index: 2;
  min-height: 32px;
  padding: 0 14px;
  transform: translateX(-50%);
  background: transparent;
  box-shadow: none;
}

.player-topbar {
  position: absolute;
  top: max(28px, calc(env(safe-area-inset-top) + 12px));
  right: max(18px, env(safe-area-inset-right));
  left: max(14px, env(safe-area-inset-left));
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.player-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.player-top-speed,
.player-top-more {
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.player-top-speed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 2px;
}

.player-top-speed .landscape-action-icon {
  width: 26px;
  height: 26px;
}

.player-top-speed strong {
  font-size: 18px;
  line-height: 1;
}

.player-top-more {
  display: grid;
  place-items: center;
  width: 30px;
  height: 38px;
  font-size: 32px;
  line-height: 1;
}

.player-toast {
  position: absolute;
  left: 50%;
  top: clamp(108px, 20dvh, 136px);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  min-height: 44px;
  border-radius: 999px;
  padding: 0 18px;
  color: #f5f5f5;
  background: rgba(50, 50, 50, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.player-toast[hidden] {
  display: none;
}

.player-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.player-toast strong {
  white-space: nowrap;
  font-size: 16px;
  font-weight: 850;
}

.player-toast button {
  border: 0;
  color: #caa26a;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 850;
  white-space: nowrap;
}

.player-portrait-sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 8;
  border: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.54);
  transition: opacity 180ms ease;
}

.player.player-portrait-sheet-open .player-portrait-sheet-scrim {
  opacity: 1;
  pointer-events: auto;
}

.player-portrait-speed-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: max-content max-content;
  height: auto;
  max-height: min(68dvh, 320px);
  padding: 8px 0 max(10px, env(safe-area-inset-bottom));
  overflow-y: auto;
  color: #111;
  background: #f7f7f7;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translateY(104%);
  transition: opacity 180ms ease, transform 240ms ease;
}

.player-portrait-speed-sheet.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.player-portrait-speed-header {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
}

.player-portrait-speed-header strong {
  justify-self: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.player-portrait-speed-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  border: 0;
  padding: 0;
  color: #050505;
  background: transparent;
}

.player-portrait-speed-close .landscape-action-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.6;
}

.player-portrait-speed-list {
  display: grid;
  align-content: start;
  padding-top: 4px;
}

.player-portrait-speed-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  min-height: 36px;
  border: 0;
  padding: 0 34px;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 450;
  text-align: left;
}

.player-portrait-speed-option.active {
  color: #19b99b;
}

.player-portrait-speed-check {
  justify-self: end;
  opacity: 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.player-portrait-speed-option.active .player-portrait-speed-check {
  opacity: 1;
}

.player-portrait-more-sheet,
.player-portrait-danmaku-settings {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: grid;
  grid-auto-rows: max-content;
  gap: 10px;
  max-height: min(68dvh, 560px);
  padding: 10px 18px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #fff;
  background: rgba(22, 22, 23, 0.98);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transform: translateY(104%);
  transition: opacity 180ms ease, transform 240ms ease;
  backdrop-filter: blur(20px);
}

.player-portrait-more-sheet.open,
.player-portrait-danmaku-settings.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.player-portrait-sheet-handle {
  justify-self: center;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.player-portrait-more-sheet {
  left: clamp(18px, 5vw, 44px);
  right: clamp(18px, 5vw, 44px);
  gap: 42px;
  height: calc(100dvh - max(38px, calc(env(safe-area-inset-top) + 20px)));
  max-height: none;
  padding: 16px clamp(24px, 4vw, 36px) max(48px, env(safe-area-inset-bottom));
  background: #141414;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -22px 58px rgba(0, 0, 0, 0.48);
}

.player-portrait-more-sheet .player-portrait-sheet-handle {
  width: 68px;
  height: 8px;
  background: rgba(255, 255, 255, 0.26);
}

.player-portrait-more-sheet .player-landscape-panel-header {
  grid-template-columns: 64px 1fr 64px;
  min-height: 150px;
  margin-bottom: 0;
}

.player-portrait-more-sheet .player-landscape-panel-header strong {
  font-size: 30px;
  line-height: 1;
}

.player-portrait-more-sheet .player-landscape-panel-close {
  width: 58px;
  height: 58px;
  font-size: 56px;
  font-weight: 250;
}

.player-portrait-more-sheet .player-landscape-settings-card {
  padding: 24px 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.17);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 16px 36px rgba(0, 0, 0, 0.12);
}

.player-portrait-more-sheet .player-landscape-settings-card + .player-landscape-settings-card {
  margin-top: 0;
}

.player-portrait-more-sheet .player-landscape-setting-row {
  grid-template-columns: minmax(148px, 0.78fr) minmax(0, 1.22fr);
  gap: 16px;
  min-height: 96px;
}

.player-portrait-more-sheet .player-landscape-setting-row-split {
  grid-template-columns: 1fr auto;
}

.player-portrait-more-sheet .player-landscape-setting-label {
  gap: 14px;
}

.player-portrait-more-sheet .player-landscape-setting-label .landscape-action-icon {
  width: 30px;
  height: 30px;
}

.player-portrait-more-sheet .player-landscape-setting-label strong {
  font-size: 22px;
}

.player-portrait-more-sheet .player-landscape-setting-label em {
  font-size: 12px;
}

.player-portrait-more-sheet .player-landscape-segmented {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.player-portrait-more-sheet .player-landscape-segmented button {
  min-height: 48px;
  font-size: 17px;
  font-weight: 900;
}

.player-portrait-more-sheet .player-landscape-segmented button.active,
.player-portrait-more-sheet .player-landscape-segmented button[aria-pressed="true"] {
  color: #fff;
  background: rgba(128, 163, 151, 0.58);
  transform: none;
}

.player-portrait-more-sheet .player-landscape-switch {
  width: 78px;
  height: 44px;
}

.player-portrait-more-sheet .player-landscape-switch span {
  top: 6px;
  left: 6px;
  width: 32px;
  height: 32px;
}

.player-portrait-more-sheet .player-landscape-switch.active span,
.player-portrait-more-sheet .player-landscape-switch[aria-pressed="true"] span {
  transform: translateX(34px);
}

.player-portrait-more-sheet .player-landscape-link-row > .landscape-control-icon {
  width: 30px;
  height: 30px;
}

@media (max-width: 430px) {
  .player-portrait-more-sheet {
    left: 12px;
    right: 12px;
    gap: 16px;
    padding: 12px 20px max(28px, env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
  }

  .player-portrait-more-sheet .player-portrait-sheet-handle {
    width: 52px;
    height: 6px;
  }

  .player-portrait-more-sheet .player-landscape-panel-header {
    grid-template-columns: 52px 1fr 52px;
    min-height: 92px;
  }

  .player-portrait-more-sheet .player-landscape-panel-header strong {
    font-size: 28px;
  }

  .player-portrait-more-sheet .player-landscape-panel-close {
    width: 48px;
    height: 48px;
    font-size: 48px;
  }

  .player-portrait-more-sheet .player-landscape-settings-card {
    padding: 16px 20px;
  }

  .player-portrait-more-sheet .player-landscape-setting-row:not(.player-landscape-setting-row-split):not(.player-landscape-link-row) {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 14px 0;
  }

  .player-portrait-more-sheet .player-landscape-setting-row:not(.player-landscape-setting-row-split):not(.player-landscape-link-row):first-child {
    padding-top: 0;
  }

  .player-portrait-more-sheet .player-landscape-setting-row-split,
  .player-portrait-more-sheet .player-landscape-link-row {
    grid-template-columns: 1fr auto;
    min-height: 68px;
  }

  .player-portrait-more-sheet .player-landscape-setting-label {
    gap: 12px;
  }

  .player-portrait-more-sheet .player-landscape-setting-label .landscape-action-icon {
    width: 27px;
    height: 27px;
  }

  .player-portrait-more-sheet .player-landscape-setting-label strong {
    font-size: 20px;
  }

  .player-portrait-more-sheet .player-landscape-segmented {
    justify-self: stretch;
    width: 100%;
  }

  .player-portrait-more-sheet .player-landscape-segmented button {
    min-height: 38px;
    padding: 0 2px;
    font-size: 12px;
    white-space: nowrap;
  }

  .player-portrait-more-sheet .player-landscape-switch {
    width: 58px;
    height: 32px;
  }

  .player-portrait-more-sheet .player-landscape-switch span {
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
  }

  .player-portrait-more-sheet .player-landscape-switch.active span,
  .player-portrait-more-sheet .player-landscape-switch[aria-pressed="true"] span {
    transform: translateX(26px);
  }
}

.player-portrait-more-sheet {
  left: 0;
  right: 0;
  gap: 20px;
  align-content: start;
  height: min(68dvh, 720px);
  max-height: min(78dvh, 760px);
  padding: 10px 16px max(16px, env(safe-area-inset-bottom));
  color: #111;
  background: #f7f7f7;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.24);
}

.player-portrait-more-sheet .player-portrait-sheet-handle {
  width: 38px;
  height: 5px;
  background: #d7d7d7;
}

.player-portrait-more-hidden-header {
  display: none;
}

.player-portrait-more-card {
  display: grid;
  overflow: hidden;
  border-radius: 16px;
  padding: 12px 18px;
  background: #fff;
}

.player-portrait-more-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 60px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.045);
  padding: 0;
  color: #111;
  background: transparent;
  font: inherit;
  text-align: left;
}

.player-portrait-more-row:last-child {
  border-bottom: 0;
}

.player-portrait-more-control-row {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 20px;
}

.player-portrait-more-switch-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.player-portrait-more-link-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
}

.player-portrait-more-label {
  display: inline-grid;
  grid-template-columns: 30px auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.player-portrait-more-label strong {
  overflow: hidden;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-portrait-more-label .landscape-action-icon {
  width: 28px;
  height: 28px;
  color: #050505;
}

.player-portrait-aa-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #050505;
  font-size: 22px;
  line-height: 1;
}

.player-portrait-more-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  justify-self: stretch;
  overflow: hidden;
  border-radius: 11px;
  background: #f1f1f1;
}

.player-portrait-more-segmented button {
  min-width: 0;
  min-height: 42px;
  border: 0;
  color: #8e8e8e;
  background: transparent;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.player-portrait-more-segmented button.active,
.player-portrait-more-segmented button[aria-pressed="true"] {
  color: #050505;
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.player-portrait-more-sheet .player-landscape-switch {
  width: 54px;
  height: 30px;
  background: #d5d5d5;
}

.player-portrait-more-sheet .player-landscape-switch span {
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
}

.player-portrait-more-sheet .player-landscape-switch.active,
.player-portrait-more-sheet .player-landscape-switch[aria-pressed="true"] {
  background: #12c7a8;
}

.player-portrait-more-sheet .player-landscape-switch.active span,
.player-portrait-more-sheet .player-landscape-switch[aria-pressed="true"] span {
  transform: translateX(24px);
}

.player-portrait-more-link-row > .landscape-action-icon {
  width: 28px;
  height: 28px;
  color: #b7b7b7;
}

.player-portrait-more-value {
  justify-self: end;
  color: #9b9b9b;
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 430px) {
  .player-portrait-more-sheet {
    gap: 14px;
    height: min(70dvh, 540px);
    max-height: min(80dvh, 580px);
    padding: 8px 14px max(14px, env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }

  .player-portrait-more-card {
    border-radius: 14px;
    padding: 10px 14px;
  }

  .player-portrait-more-row {
    min-height: 52px;
  }

  .player-portrait-more-control-row {
    gap: 10px;
  }

  .player-portrait-more-label {
    grid-template-columns: 25px auto;
    gap: 8px;
  }

  .player-portrait-more-label strong {
    font-size: 17px;
  }

  .player-portrait-more-label .landscape-action-icon,
  .player-portrait-aa-icon,
  .player-portrait-more-link-row > .landscape-action-icon {
    width: 24px;
    height: 24px;
  }

  .player-portrait-aa-icon {
    font-size: 19px;
  }

  .player-portrait-more-segmented button {
    min-height: 34px;
    padding: 0 2px;
    font-size: 12px;
  }

  .player-portrait-more-value {
    font-size: 15px;
  }

  .player-portrait-more-sheet .player-landscape-switch {
    width: 48px;
    height: 28px;
  }

  .player-portrait-more-sheet .player-landscape-switch span {
    width: 22px;
    height: 22px;
  }

  .player-portrait-more-sheet .player-landscape-switch.active span,
  .player-portrait-more-sheet .player-landscape-switch[aria-pressed="true"] span {
    transform: translateX(20px);
  }
}

body.profile-night-mode .player-portrait-speed-sheet,
body.profile-night-mode .player-portrait-more-sheet {
  color: #f8fafc;
  background: #111215;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.42);
}

body.profile-night-mode .player-portrait-speed-header strong,
body.profile-night-mode .player-portrait-speed-close,
body.profile-night-mode .player-portrait-speed-option,
body.profile-night-mode .player-portrait-more-label strong,
body.profile-night-mode .player-portrait-aa-icon {
  color: #f8fafc;
}

body.profile-night-mode .player-portrait-more-segmented button.active,
body.profile-night-mode .player-portrait-more-segmented button[aria-pressed="true"] {
  color: #111;
}

body.profile-night-mode .player-portrait-speed-option.active {
  color: #19b99b;
}

body.profile-night-mode .player-portrait-more-card {
  background: rgba(255, 255, 255, 0.08);
}

body.profile-night-mode .player-portrait-more-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.profile-night-mode .player-portrait-more-label .landscape-action-icon {
  color: #f8fafc;
}

body.profile-night-mode .player-portrait-more-segmented {
  background: rgba(255, 255, 255, 0.1);
}

body.profile-night-mode .player-portrait-more-segmented button {
  color: rgba(248, 250, 252, 0.54);
}

body.profile-night-mode .player-portrait-more-segmented button.active,
body.profile-night-mode .player-portrait-more-segmented button[aria-pressed="true"] {
  background: #f8fafc;
}

body.profile-night-mode .player-portrait-more-link-row > .landscape-action-icon,
body.profile-night-mode .player-portrait-more-value {
  color: rgba(248, 250, 252, 0.54);
}

body.profile-night-mode .player-portrait-sheet-handle {
  background: rgba(255, 255, 255, 0.24);
}

.player-preload-video {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -10px;
  top: -10px;
  opacity: 0;
  pointer-events: none;
}

.play-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.player.paused .play-toggle {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
}

.play-symbol {
  position: relative;
  display: block;
  width: 24px;
  height: 30px;
}

.play-symbol::before {
  position: absolute;
  inset: 0;
  content: "";
  background: #fff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.player.paused .play-symbol::before {
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.player-pause-indicator .play-symbol::before {
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.player-pause-indicator .play-symbol {
  width: 34px;
  height: 38px;
}

.like-burst {
  position: fixed;
  left: var(--burst-x, 50vw);
  top: var(--burst-y, 50vh);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 98px;
  height: 98px;
  margin: -49px 0 0 -49px;
  border-radius: 999px;
  color: #ff365f;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.68);
}

.like-burst::before {
  position: absolute;
  inset: 2px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: inherit;
  content: "";
}

.like-heart {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  background: currentColor;
  box-shadow: 0 18px 42px rgba(255, 54, 95, 0.52);
  transform: rotate(-45deg);
}

.like-heart::before,
.like-heart::after {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.like-heart::before {
  top: -22px;
  left: 0;
}

.like-heart::after {
  top: 0;
  left: 22px;
}

.like-burst.show {
  animation: like-burst-pop 620ms cubic-bezier(0.18, 0.92, 0.28, 1) both;
}

.like-burst.show::before {
  animation: like-burst-ring 620ms ease-out both;
}

@keyframes like-burst-pop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.68);
  }
  24% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  72% {
    opacity: 1;
    transform: translateY(-22px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-46px) scale(0.92);
  }
}

@keyframes like-burst-ring {
  0% {
    opacity: 0.85;
    transform: scale(0.72);
  }
  100% {
    opacity: 0;
    transform: scale(1.48);
  }
}

.player-danmaku-toggle {
  position: absolute;
  z-index: 6;
  left: 14px;
  bottom: 188px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: rgba(28, 28, 30, 0.76);
  font-size: 20px;
  font-weight: 900;
  backdrop-filter: blur(14px);
}

.player-danmaku-toggle[aria-pressed="false"] {
  color: rgba(255, 255, 255, 0.42);
}

.player-danmaku-strip {
  position: absolute;
  z-index: 4;
  left: 18px;
  right: 0;
  bottom: 192px;
  height: 108px;
  overflow: hidden;
  opacity: var(--player-danmaku-opacity, 1);
  pointer-events: none;
}

.player-danmaku-strip span {
  position: absolute;
  top: calc(var(--danmaku-lane, 0) * 34px);
  left: 100%;
  max-width: min(420px, 82vw);
  overflow: hidden;
  border-radius: 999px;
  padding: 7px 11px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.38);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  font-size: var(--player-danmaku-font-size, 17px);
  opacity: 0;
  text-overflow: ellipsis;
  transform: translate3d(0, 0, 0);
  white-space: nowrap;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.player.danmaku-off .player-danmaku-strip {
  display: none;
}

.player-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  padding: 22px 18px 34px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.75));
}

.player-copy {
  display: grid;
  align-content: end;
  min-width: 0;
}

.player-copy h2 {
  margin: 0 0 8px;
  max-width: 76vw;
  font-size: 20px;
}

.player-title-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 0;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 950;
  line-height: 1.18;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.54);
}

.player-follow-button {
  justify-self: start;
  min-height: 28px;
  margin: 0 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 850;
}

.player-follow-button[aria-pressed="true"] {
  border-color: rgba(255, 43, 97, 0.9);
  color: #fff;
  background: rgba(255, 43, 97, 0.88);
}

.drama-detail-panel {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: none;
  overflow-y: auto;
  color: #fff;
  background: #0a0a0b;
}

.drama-detail-panel.open {
  display: block;
}

.drama-detail-page {
  min-height: 100dvh;
  padding: max(28px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 54, 95, 0.18), transparent 34%),
    linear-gradient(180deg, #101012 0%, #050506 100%);
}

.drama-detail-topbar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  min-height: 48px;
  margin-bottom: 18px;
}

.drama-detail-topbar strong {
  text-align: center;
  font-size: 18px;
  font-weight: 900;
}

.drama-detail-back {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  color: #fff;
  background: transparent;
}

.drama-detail-back .search-icon {
  width: 28px;
  height: 28px;
}

.drama-detail-hero {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}

.drama-detail-cover {
  display: block;
  overflow: hidden;
  width: 112px;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)),
    var(--poster-image, linear-gradient(145deg, #ff365f, #6d5dfc));
  background-position: center;
  background-size: cover;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

.drama-detail-copy {
  min-width: 0;
}

.drama-detail-copy h1 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.16;
  font-weight: 950;
}

.drama-detail-copy p,
.drama-detail-section p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
  line-height: 1.55;
}

.drama-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.drama-detail-tags span {
  border-radius: 999px;
  padding: 5px 9px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 800;
}

.drama-detail-primary {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  color: #fff;
  background: #ff365f;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
}

.drama-detail-section {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.drama-detail-section h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 18px;
  font-weight: 950;
}

.drama-detail-section h2 span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
  font-weight: 750;
}

.drama-detail-author-note {
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 12px !important;
}

.drama-detail-episode-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.drama-detail-episode-grid button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  font: inherit;
  font-weight: 900;
}

.drama-detail-episode-grid button.active {
  color: #111;
  background: #fff;
}

.player-episode-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 7px;
  border-radius: 999px;
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.14);
  font-size: 10px;
  font-weight: 800;
}

.player-copy p {
  margin: 0;
  max-width: 72vw;
  color: #d4d4d8;
  font-size: 13px;
  line-height: 1.45;
}

.player-episode-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: min(72vw, 640px);
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(12px, 3.6vw, 16px);
  font-weight: 600;
  line-height: 1.35;
}

.player-episode-intro span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-episode-intro.expanded {
  align-items: flex-start;
}

.player-episode-intro.expanded span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.player-copy-expand {
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: clamp(12px, 3.6vw, 16px);
  font-weight: 850;
}

.player-author-note {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.38);
  font-size: clamp(10px, 3vw, 13px);
  font-weight: 650;
}

.player-progress {
  position: relative;
  overflow: visible;
  width: min(420px, 72vw);
  height: 12px;
  margin-top: 14px;
  cursor: pointer;
  touch-action: none;
}

.player-progress::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.player-progress-fill {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 0;
  height: 3px;
  transform: translateY(-50%);
  border-radius: inherit;
  background: #ff365f;
  transition: width 120ms linear;
}

.player-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  border: 2px solid #ff365f;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.34);
  transition: opacity 120ms ease, transform 120ms ease;
}

.player-progress.is-seeking::before,
.player-progress.is-seeking .player-progress-fill {
  height: 6px;
}

.player-progress.is-seeking .player-progress-thumb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.player-bottom-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  gap: 14px;
  width: min(100%, calc(100vw - 24px));
  margin-top: 6px;
}

.player-episode-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  padding: 0 14px;
  color: #fff;
  background: rgba(28, 28, 31, 0.92);
  font: inherit;
  font-size: 16px;
  font-weight: 950;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.player-episode-selector span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-episode-selector-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
}

.player-episode-selector-icon .landscape-action-icon {
  width: 18px;
  height: 18px;
}

.player-clean-screen-button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 10px;
  padding: 0;
  color: #fff;
  background: transparent;
  transform: translateX(16px);
}

.player-clean-screen-button .landscape-action-icon {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.player.player-clean-screen .player-topbar,
.player.player-clean-screen .player-toast,
.player.player-clean-screen .player-overlay,
.player.player-clean-screen .play-toggle,
.player.player-clean-screen .player-danmaku-toggle,
.player.player-clean-screen .player-danmaku-strip {
  opacity: 0;
  pointer-events: none;
}

.player-actions {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(60px, calc(env(safe-area-inset-bottom) + 56px));
  z-index: 6;
  display: grid;
  gap: 14px;
}

.player-actions .icon-button {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 48px;
  height: auto;
  min-height: 50px;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.48);
}

.player-actions .icon-button .home-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: currentColor;
}

.player-actions .icon-button .home-icon svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  stroke-width: 0;
}

.player-actions .icon-button span:not(.home-icon) {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.player-actions .player-secondary-action {
  display: none;
}

.icon-button,
.close-button {
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.icon-button.active {
  background: transparent;
}

.icon-button[data-action="like"].active,
.icon-button[data-action="follow_drama"].active,
.icon-button[data-action="favorite"].active,
.player-actions button[data-action="follow_drama"][aria-pressed="true"],
.player-actions button[data-action="like"][aria-pressed="true"],
.player-actions button[data-action="favorite"][aria-pressed="true"] {
  color: #ff7a2f;
}

.player-actions button[data-action="follow_drama"].active,
.player-actions button[data-action="follow_drama"][aria-pressed="true"] {
  color: #fff;
}

.player-actions button[data-action="like"].active,
.player-actions button[data-action="like"][aria-pressed="true"] {
  color: #ff7a2f;
}

.player-actions button[aria-pressed="true"] {
  background: transparent;
}

.close-button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.player-back-button {
  position: static;
  z-index: 1;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  border: 0;
  min-width: 96px;
  min-height: 38px;
  border-radius: 999px;
  padding: 5px 8px 5px 0;
  color: #fff;
  background: transparent;
  backdrop-filter: none;
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  pointer-events: auto;
}

.player-back-button span {
  font-size: 34px;
  line-height: 1;
}

.player-back-button strong {
  font-size: 21px;
  line-height: 1;
}

.similar-drawer,
.episode-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  max-height: 48vh;
  padding: 12px 18px 24px;
  color: #fff;
  background: rgba(9, 9, 11, 0.92);
  border-radius: 8px 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px);
  transform: translateY(102%);
  transition: transform 180ms ease;
}

.player.episode-drawer-open .player-overlay,
.player.episode-drawer-open .player-danmaku-toggle,
.player.episode-drawer-open .player-danmaku-strip,
.player.episode-drawer-open .play-toggle {
  opacity: 0;
  pointer-events: none;
}

.similar-drawer.open,
.episode-drawer.open {
  transform: translateY(0);
}

.drawer-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.similar-list,
.episode-list {
  display: grid;
  gap: 10px;
  overflow-y: auto;
  max-height: 34vh;
  padding-right: 4px;
}

.similar-item,
.episode-item {
  display: grid;
  gap: 5px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
}

.episode-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.episode-item {
  place-items: center;
  min-height: 66px;
  padding: 10px 8px;
  text-align: center;
}

.episode-item.played {
  color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.04);
}

.episode-item.active {
  border-color: #ff365f;
  background: rgba(255, 54, 95, 0.22);
}

.similar-item span,
.episode-item strong {
  font-size: 14px;
  font-weight: 700;
}

.similar-item small,
.episode-item span {
  color: #d4d4d8;
  font-size: 12px;
}

.splash {
  display: grid;
  place-items: center;
  min-height: 100vh;
  text-align: center;
}

@media (min-width: 1100px) {
  body:not(.admin-mode) .app-shell {
    max-width: 480px;
    margin: 0 auto;
    border-inline: 1px solid rgba(255, 255, 255, 0.08);
  }

  body.admin-mode .app-shell {
    max-width: none;
    width: 100%;
    margin: 0;
    border-inline: 0;
  }
}