@font-face {
  font-family: "Glyphicons Halflings";
  src: url("/assets/glyphicons-halflings-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: dark;
  font-family: Inter, "SF Pro Display", "Segoe UI", Arial, sans-serif;
  --member-bg: #050505;
  --member-surface: rgba(13, 13, 13, 0.94);
  --member-surface-2: rgba(21, 21, 21, 0.94);
  --member-text: #f7f7f7;
  --member-muted: #aaa7a3;
  --member-gold: #e6b75e;
  --member-gold-soft: rgba(230, 183, 94, 0.28);
  --member-cyan: #2db9e8;
  --member-cyan-dark: #1798ca;
  --member-violet: #8e50ee;
  --member-danger: #ff6b67;
  --member-success: #46d59a;
  --member-border: rgba(230, 183, 94, 0.22);
  --member-bottom-nav: 72px;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #111;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--member-text);
}

#member-root { width: 100%; max-width: 430px; min-width: 0; height: 100%; }
#member-modal-root { position: fixed; z-index: 80; inset: 0; width: 100vw; height: 100dvh; pointer-events: none; }
#member-modal-root:empty { display: none; }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.member-app {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--member-bg) url("/assets/member-midnight-bg.png") center top / cover no-repeat;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.member-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.member-scroll {
  --member-scroll-top: max(18px, env(safe-area-inset-top));
  --member-scroll-inline: 22px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--member-scroll-top) var(--member-scroll-inline) calc(24px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}

.member-scroll::-webkit-scrollbar { display: none; }

.member-scroll--with-header { padding-top: 0; }

.member-screen { min-height: 100%; }
.member-screen.no-nav { min-height: 100%; }
.home-partners { margin-top: 22px; }
.partner-list { display: flex; flex-wrap: wrap; gap: 8px; }
.partner-list span { padding: 8px 12px; border: 1px solid rgba(198,164,87,.32); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 12px; }
.platform-meta { padding: 18px 8px 2px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.6; }

.member-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: Inter, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 28px;
  line-height: .92;
  font-weight: 800;
  letter-spacing: -1.65px;
  white-space: nowrap;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.48));
}
.brand-task,
.brand-flow {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-task {
  font-weight: 820;
  background-image:
    repeating-linear-gradient(102deg, rgba(255,255,255,.12) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(180deg, #fff 0%, #d8d5cf 43%, #fff 58%, #bbb8b2 100%);
}
.brand-flow {
  margin-left: 2px;
  font-style: italic;
  font-weight: 610;
  letter-spacing: -1.4px;
  background-image:
    repeating-linear-gradient(98deg, rgba(255,255,255,.14) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(180deg, #ffe4a2 0%, #c58b30 45%, #ffd985 58%, #9f6920 100%);
}
.member-brand--auth .brand-wordmark { font-size: 34px; letter-spacing: -2px; }
.member-brand--header .brand-wordmark { font-size: 28px; }

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

.member-header,
.screen-header {
  position: sticky;
  z-index: 30;
  top: 0;
  margin-top: 0;
  margin-right: calc(0px - var(--member-scroll-inline));
  margin-left: calc(0px - var(--member-scroll-inline));
  padding: var(--member-scroll-top) var(--member-scroll-inline) 10px;
  border-bottom: 1px solid rgba(230, 183, 94, 0.14);
  background: rgba(5, 5, 5, 0.97);
}

.member-header-tools { display: flex; align-items: center; gap: 5px; }
.language-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--member-border); border-radius: 999px; background: rgba(9,9,9,.88); }
.language-switch button { min-width: 30px; min-height: 28px; border: 0; border-radius: 999px; padding: 4px 7px; color: var(--member-muted); background: transparent; font-size: 11px; font-weight: 650; }
.language-switch button.active { color: #111; background: var(--member-gold); }
.auth-language { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 0; }
.auth-screen { position: relative; }
.screen-header .language-switch { justify-self: end; }

.member-header-action,
.member-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: var(--member-gold);
  background: transparent;
}

.member-header-action {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
}

.member-header-action .mi { font-size: 24px; }

.mi {
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.mi-home::before { content: "\e021"; }
.mi-tasks::before { content: "\e137"; }
.mi-records::before { content: "\e032"; }
.mi-user::before { content: "\e008"; }
.mi-support::before { content: "\e035"; }
.mi-calendar::before { content: "\e109"; }
.mi-withdraw::before { content: "\e170"; }
.mi-events::before { content: "\e102"; }
.mi-wallet::before { content: "\e177"; }
.mi-stats::before { content: "\e185"; }
.mi-time::before { content: "\e023"; }
.mi-play::before { content: "\e072"; }
.mi-chevron-right::before { content: "\e080"; }
.mi-chevron-left::before { content: "\e079"; }
.mi-bullhorn::before { content: "\e122"; }
.mi-certificate::before { content: "\e124"; }
.mi-info::before { content: "\e086"; }
.mi-file::before { content: "\e022"; }
.mi-question::before { content: "\e085"; }
.mi-lock::before { content: "\e033"; }
.mi-link::before { content: "\e144"; }
.mi-bell::before { content: "\e123"; }
.mi-log-out::before { content: "\e163"; }
.mi-transfer::before { content: "\e178"; }
.mi-refresh::before { content: "\e031"; }
.mi-check::before { content: "\e013"; }
.mi-close::before { content: "\e014"; }
.mi-copy::before { content: "\e205"; }
.mi-edit::before { content: "\e065"; }
.mi-eye::before { content: "\e105"; }
.mi-send::before { content: "\e171"; }
.mi-download::before { content: "\e025"; }
.mi-phone::before { content: "\e145"; }
.mi-plus::before { content: "\e081"; }
.mi-search::before { content: "\e003"; }

.home-greeting { margin: 35px 0 18px; }
.home-greeting h1 { margin: 0; font-size: 25px; line-height: 1.15; font-weight: 700; letter-spacing: -0.55px; }
.credit-row { display: flex; align-items: center; gap: 10px; margin-top: 13px; color: #d3d0cc; font-size: 16px; }
.credit-row strong { color: var(--member-gold); font-size: 20px; font-weight: 600; }
.credit-row img { width: 39px; height: 39px; object-fit: cover; border-radius: 10px; }

.notice-strip {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  width: calc(100% + var(--member-scroll-inline) + var(--member-scroll-inline));
  margin-right: calc(0px - var(--member-scroll-inline));
  margin-left: calc(0px - var(--member-scroll-inline));
  padding: 9px var(--member-scroll-inline);
  color: #c2bfbb;
  border-top: 1px solid var(--member-border);
  border-bottom: 1px solid var(--member-border);
  background: rgba(5, 5, 5, 0.7);
  font-size: 12px;
}

.notice-strip .mi { color: var(--member-gold); font-size: 18px; }
.notice-strip strong { color: var(--member-gold); font-weight: 600; }
.notice-marquee { min-width: 0; overflow: hidden; white-space: nowrap; }
.notice-text { display: inline-block; min-width: max-content; white-space: nowrap; will-change: transform; }
.notice-text.is-scrolling { animation: notice-marquee var(--notice-duration) linear infinite; }
.notice-strip:hover .notice-text,.notice-strip:focus-visible .notice-text { animation-play-state: paused; }

@keyframes notice-marquee {
  from { transform: translate3d(var(--notice-start), 0, 0); }
  to { transform: translate3d(var(--notice-end), 0, 0); }
}

.home-banners {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 14px -22px 0;
  padding: 0 22px 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.home-banners::-webkit-scrollbar { display: none; }
.home-banners img { flex: 0 0 100%; width: 100%; height: 112px; border: 1px solid rgba(230,183,94,.25); border-radius: 13px; object-fit: cover; scroll-snap-align: center; background: #111; }

.balance-strip {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 18px;
  padding: 19px 0;
  border-bottom: 1px solid rgba(230, 183, 94, 0.18);
}

.balance-divider { width: 1px; height: 42px; background: rgba(255,255,255,.2); }
.balance-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; }
.balance-item .mi { color: var(--member-gold); font-size: 25px; }
.balance-item span { display: block; color: var(--member-muted); font-size: 12px; }
.balance-item strong { display: block; margin-top: 3px; color: #fff; font-size: 21px; font-weight: 650; white-space: nowrap; }

.task-hero { padding: 22px 0 18px; }
.task-hero h2 { margin: 0 0 18px; font-size: 23px; line-height: 1; font-weight: 650; }
.task-overview { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 19px; }
.progress-ring { position: relative; width: 132px; height: 132px; }
.progress-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 9; }
.progress-ring .track { stroke: #242424; }
.progress-ring .value { stroke: var(--member-gold); stroke-linecap: round; transition: stroke-dashoffset .35s ease; }
.progress-copy { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.progress-copy strong { font-size: 31px; line-height: 1; font-weight: 700; }
.progress-copy span { margin-top: 3px; color: var(--member-muted); font-size: 17px; }
.task-hours { min-width: 0; }
.task-hours-head { display: flex; align-items: center; gap: 9px; color: var(--member-muted); font-size: 13px; }
.task-hours-head .mi { color: var(--member-gold); font-size: 19px; }
.task-hours strong { display: block; margin-top: 7px; font-size: clamp(17px, 4.8vw, 20px); line-height: 1.25; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.task-hours p { margin: 11px 0 0; color: var(--member-muted); font-size: 12px; line-height: 1.45; }

.primary-button,
.secondary-button,
.danger-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  font-weight: 700;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.primary-button { margin-top: 17px; color: #fff; background: var(--member-cyan); font-size: 17px; }
.primary-button:hover { background: var(--member-cyan-dark); }
.secondary-button { color: var(--member-gold); border: 1px solid var(--member-gold-soft); background: rgba(20, 20, 20, .9); }
.danger-button { color: #fff; background: #a73e3b; }
.primary-button:active, .secondary-button:active, .danger-button:active { transform: scale(.985); }
.primary-button:disabled, .secondary-button:disabled, .danger-button:disabled { cursor: not-allowed; opacity: .48; }

.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 2px 0 16px; }
.quick-action { position: relative; border: 0; background: transparent; color: #f5f5f5; min-width: 0; padding: 0; text-align: center; }
.quick-action-icon { width: 52px; height: 52px; margin: 0 auto 8px; display: grid; place-items: center; border: 1px solid rgba(230, 183, 94, .55); border-radius: 50%; color: var(--member-gold); background: rgba(14,14,14,.86); }
.quick-action-icon .mi { font-size: 22px; }
.quick-action span:last-child { display: block; font-size: 11.5px; white-space: nowrap; }
.quick-action-dot { position: absolute; top: 0; left: calc(50% + 14px); width: 10px; height: 10px; border-radius: 50%; background: var(--member-violet); }

.vip-row { margin: 0 -22px; min-height: 68px; display: grid; grid-template-columns: 50px auto 1fr 22px; align-items: center; gap: 11px; padding: 9px 22px; border-top: 1px solid var(--member-border); border-bottom: 1px solid var(--member-border); background: rgba(8,8,8,.72); }
.vip-row img { width: 50px; height: 50px; object-fit: cover; border-radius: 11px; }
.vip-row strong { font-size: 18px; }
.vip-row span { color: var(--member-muted); font-size: 12px; }
.vip-row .mi { color: var(--member-gold); }

.bottom-nav {
  position: relative;
  flex: 0 0 calc(var(--member-bottom-nav) + env(safe-area-inset-bottom));
  z-index: 15;
  left: 0;
  right: 0;
  height: calc(var(--member-bottom-nav) + env(safe-area-inset-bottom));
  padding: 8px 14px env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(8, 8, 8, .98);
  border-top: 1px solid rgba(230, 183, 94, .18);
}

.nav-item { border: 0; background: transparent; color: #858585; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; }
.nav-item .mi { font-size: 23px; }
.nav-item.active { color: var(--member-gold); }
.nav-item.active::after { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--member-gold); }

.screen-header { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; align-items: center; min-height: calc(54px + var(--member-scroll-top)); margin-bottom: 12px; }
.screen-header h1 { margin: 0; text-align: center; font-size: 19px; font-weight: 650; }
.screen-header > button { width: 42px; height: 42px; border: 0; background: transparent; color: #fff; font-size: 20px; }

.section-title { margin: 22px 0 11px; color: #fff; font-size: 18px; }
.section-copy { margin: -4px 0 15px; color: var(--member-muted); font-size: 13px; line-height: 1.55; }
.surface { background: rgba(14,14,14,.9); border: 1px solid var(--member-border); border-radius: 15px; }
.panel { padding: 17px; }
.list { overflow: hidden; }
.list-row { width: 100%; min-height: 62px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding: 11px 14px; background: transparent; color: #fff; text-align: left; }
.list-row:last-child { border-bottom: 0; }
.list-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--member-gold-soft); border-radius: 50%; color: var(--member-gold); background: rgba(255,255,255,.025); }
.list-icon .mi { font-size: 18px; }
.list-copy { min-width: 0; }
.list-copy strong { display: block; font-size: 14px; }
.list-copy span { display: block; margin-top: 4px; color: var(--member-muted); font-size: 11.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-value { text-align: right; color: var(--member-muted); font-size: 12px; }

.support-directory { display: grid; gap: 12px; }
.support-card {
  min-height: 86px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 30px;
  gap: 14px;
  align-items: center;
  padding: 16px;
  color: #fff;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.support-card:hover { border-color: rgba(230,183,94,.68); background: rgba(24,21,16,.94); }
.support-card:active { transform: scale(.988); }
.support-card-icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--member-gold-soft); border-radius: 50%; color: var(--member-gold); background: rgba(230,183,94,.07); }
.support-card-icon .mi { font-size: 23px; }
.support-card-copy { min-width: 0; }
.support-card-copy strong { display: block; overflow: hidden; color: #fff; font-size: 16px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.support-card-copy span { display: block; margin-top: 6px; color: var(--member-gold); font-size: 12px; }
.support-card-arrow { display: grid; place-items: center; color: var(--member-gold); font-size: 18px; }
.support-card.is-disabled { opacity: .55; }
.support-card.is-disabled .support-card-copy span, .support-card.is-disabled .support-card-arrow { color: var(--member-muted); }

#faq-list .list-row { align-items: flex-start; }
#faq-list .list-copy span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.account-card { padding: 18px; text-align: center; }
.account-avatar { width: 70px; height: 70px; margin: 0 auto 10px; display: grid; place-items: center; border: 2px solid var(--member-gold); border-radius: 50%; background: #161616; color: var(--member-gold); font-size: 28px; }
.account-card h2 { margin: 0; font-size: 20px; }
.account-code { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; border: 0; background: transparent; color: var(--member-muted); font-size: 12px; }
.account-metrics { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 17px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; }
.account-metric + .account-metric { border-left: 1px solid rgba(255,255,255,.12); }
.account-metric span { display: block; color: var(--member-muted); font-size: 10px; }
.account-metric strong { display: block; margin-top: 5px; font-size: 15px; }

.form-stack { display: grid; gap: 12px; }
.field label { display: block; margin: 0 0 7px; color: #d7d3cf; font-size: 12px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; border: 1px solid rgba(230,183,94,.25); border-radius: 12px; outline: 0; padding: 11px 13px; color: #fff; background: rgba(12,12,12,.94); }
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--member-gold); box-shadow: 0 0 0 3px rgba(230,183,94,.12); }
.field-hint { margin-top: 6px; color: var(--member-muted); font-size: 11px; line-height: 1.45; }
.security-note { padding: 12px 14px; border-left: 3px solid var(--member-gold); color: #ded9d1; background: rgba(230,183,94,.08); font-size: 12px; line-height: 1.55; }
.recharge-options { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 9px; padding-bottom: 2px; scrollbar-width: none; }
.recharge-options::-webkit-scrollbar { display: none; }
.recharge-options button { flex: 0 0 auto; min-width: 72px; min-height: 34px; border: 1px solid var(--member-gold-soft); border-radius: 9px; color: var(--member-gold); background: rgba(230,183,94,.07); }

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 -22px 15px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(5,5,5,.82); }
.tabs button { min-height: 46px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--member-muted); font-size: 11.5px; }
.tabs button.active { color: var(--member-gold); border-bottom-color: var(--member-gold); }

.order-list { display: grid; gap: 12px; }
.order-card { padding: 14px; }
.order-card-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.order-thumb { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: rgba(230,183,94,.1); color: var(--member-gold); overflow: hidden; }
.order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-card h3 { margin: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-date { margin-top: 4px; color: var(--member-muted); font-size: 10.5px; }
.status { display: inline-flex; align-items: center; min-height: 24px; border-radius: 12px; padding: 3px 9px; font-size: 10px; color: var(--member-gold); background: rgba(230,183,94,.12); }
.status.success { color: var(--member-success); background: rgba(70,213,154,.1); }
.status.danger { color: var(--member-danger); background: rgba(255,107,103,.1); }
.order-values { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.order-value { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--member-muted); font-size: 12px; }
.order-value strong { color: #fff; font-size: 13px; }
.order-action { width: 100%; margin-top: 12px; min-height: 38px; border: 1px solid var(--member-gold-soft); border-radius: 10px; background: rgba(230,183,94,.08); color: var(--member-gold); }
.task-rating { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); color: var(--member-muted); font-size: 12px; }
.rating-stars { display: flex; gap: 3px; }
.rating-stars button { width: 30px; height: 34px; border: 0; padding: 0; background: transparent; color: #56504a; font-size: 25px; line-height: 1; transition: color .15s ease, transform .15s ease; }
.rating-stars button.active { color: var(--member-gold); }
.rating-stars button:active { transform: scale(.9); }

.task-page-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-stat { padding: 15px; text-align: center; }
.mini-stat span { color: var(--member-muted); font-size: 11px; }
.mini-stat strong { display: block; margin-top: 5px; font-size: 18px; }
.progress-bar { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 8px; appearance: none; background: #292929; }
.progress-bar::-webkit-progress-bar { background: #292929; }
.progress-bar::-webkit-progress-value { background: var(--member-gold); }
.progress-bar::-moz-progress-bar { background: var(--member-gold); }

.checkin-calendar { padding: 14px 12px 12px; }
.checkin-calendar-head { display: flex; align-items: center; gap: 10px; padding: 0 3px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.checkin-calendar-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 1px solid var(--member-gold-soft); border-radius: 10px; color: var(--member-gold); background: rgba(230,183,94,.08); }
.checkin-calendar-icon .mi { font-size: 18px; }
.checkin-calendar-head > span:last-child { min-width: 0; }
.checkin-calendar-head strong { display: block; color: #fff; font-size: 14px; line-height: 1.25; }
.checkin-calendar-head small { display: block; margin-top: 3px; color: var(--member-muted); font-size: 10px; }
.checkin-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding-top: 10px; }
.checkin-day { min-width: 0; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 7px 1px 4px; border-radius: 10px; color: var(--member-muted); }
.checkin-weekday { max-width: 100%; overflow: hidden; color: var(--member-muted); font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.checkin-day strong { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; color: #f2f0ec; font-size: 13px; line-height: 1; }
.checkin-day.today { color: var(--member-gold); background: rgba(230,183,94,.07); }
.checkin-day.today .checkin-weekday { color: var(--member-gold); font-weight: 700; }
.checkin-day.today strong { border-color: var(--member-gold); color: #111; background: var(--member-gold); box-shadow: 0 0 0 3px rgba(230,183,94,.1); }
.checkin-day.checked:not(.today) strong { border-color: var(--member-gold); color: var(--member-gold); background: rgba(230,183,94,.08); }
.checkin-date-state { height: 9px; color: var(--member-gold); line-height: 1; }
.checkin-date-state .mi { font-size: 9px; }
.milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.milestone { padding: 12px 5px; text-align: center; border: 1px solid rgba(230,183,94,.2); border-radius: 11px; background: rgba(14,14,14,.9); }
.milestone strong { display: block; color: var(--member-gold); font-size: 13px; }
.milestone span { display: block; margin-top: 4px; color: var(--member-muted); font-size: 10px; }

.vip-list { display: grid; gap: 11px; }
.vip-card { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 13px; align-items: center; padding: 14px; }
.vip-card.current { border-color: var(--member-gold); }
.vip-card img { width: 62px; height: 62px; border-radius: 12px; object-fit: cover; }
.vip-card h3 { margin: 0; font-size: 16px; }
.vip-card p { margin: 7px 0 0; color: var(--member-muted); font-size: 11px; line-height: 1.45; }

.content-document { padding: 17px; color: #dad7d2; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.content-document h2 { margin: 0 0 12px; color: #fff; font-size: 19px; }
.certificate-preview { width: 100%; min-height: 320px; display: grid; place-items: center; padding: 24px; background: #f6f1e8; color: #111; border-radius: 8px; text-align: center; }
.certificate-preview--image { min-height: 0; padding: 0; overflow: hidden; background: #0d0d0d; }
.certificate-preview--image img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 210px); object-fit: contain; }
.certificate-preview .member-brand { justify-content: center; }
.certificate-preview .brand-wordmark { font-size: 24px; filter: none; }
.certificate-preview .brand-task {
  background-image:
    repeating-linear-gradient(102deg, rgba(255,255,255,.12) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(180deg, #3c352b 0%, #0e0c09 48%, #4c4438 57%, #17130e 100%);
}
.certificate-preview .brand-flow {
  background-image:
    repeating-linear-gradient(98deg, rgba(255,255,255,.12) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(180deg, #b98b39 0%, #765019 47%, #c69742 58%, #624111 100%);
}

.empty-state { padding: 42px 20px; text-align: center; color: var(--member-muted); }
.empty-state .mi { display: block; margin-bottom: 14px; color: var(--member-gold); font-size: 34px; }
.loading { padding: 48px 20px; text-align: center; color: var(--member-muted); }

.auth-screen { display: grid; align-content: center; min-height: 100%; }
.auth-intro { margin-bottom: 27px; }
.auth-intro h1 { margin: 25px 0 9px; font-size: 30px; line-height: 1.12; }
.auth-intro p { margin: 0; color: var(--member-muted); font-size: 13px; line-height: 1.5; }
.auth-panel { padding: 18px; }
.auth-panel .primary-button { margin-top: 5px; }
.auth-switch { margin-top: 16px; text-align: center; color: var(--member-muted); font-size: 12px; }
.auth-switch button { border: 0; background: transparent; color: var(--member-gold); font-weight: 650; }
.auth-text-button { display: block; margin: 14px auto 0; border: 0; background: transparent; color: var(--member-gold); font: inherit; cursor: pointer; }
.remember-row { display: flex; align-items: center; gap: 8px; color: var(--member-muted); font-size: 12px; }
.remember-row input { accent-color: var(--member-gold); }

.member-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 22px; pointer-events: auto; background: rgba(0,0,0,.72); }
.member-modal { flex: 0 0 auto; width: min(356px,100%); max-height: calc(100dvh - 44px); margin: auto; overflow-y: auto; border: 1px solid var(--member-border); border-radius: 16px; background: #101010; box-shadow: 0 24px 70px rgba(0,0,0,.52); }
.member-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.member-modal-head h2 { margin: 0; font-size: 18px; }
.member-modal-head button { width: 36px; height: 36px; border: 0; background: transparent; color: var(--member-muted); }
.member-modal-body { padding: 18px; }
.member-modal-foot { display: flex; gap: 10px; padding: 0 18px 18px; }
.member-modal-foot button { flex: 1; margin: 0; }
.article-popup-backdrop { padding: 20px; }
.article-popup { position: relative; margin: auto; border-color: rgba(236,184,80,.42); background: #0d0d0d; }
.article-popup--image { width: 95vw; height: 95dvh; max-height: none; overflow: hidden; border: 0; border-radius: 12px; background: #050505; box-shadow: 0 20px 64px rgba(0,0,0,.58); }
.article-popup-image-frame { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: inherit; }
.article-popup-image-frame img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: auto; border-radius: inherit; object-fit: contain; }
.article-popup-close { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.05); color: var(--member-muted); }
.article-popup-close:hover,.article-popup-close:focus-visible { background: rgba(236,184,80,.12); color: var(--member-gold); }
.article-popup-close:focus-visible { outline: 2px solid var(--member-gold); outline-offset: 2px; }
.article-popup-content { max-height: min(64dvh, 520px); padding: 52px 20px 22px; overflow-y: auto; color: #ddd7cd; font-size: 14px; line-height: 1.7; }
.article-popup-content > :first-child { margin-top: 0; }
.article-popup-content > :last-child { margin-bottom: 0; }
.article-popup-content h3,.article-popup-content h4 { color: #fff; line-height: 1.35; }
.article-popup-content a { color: var(--member-gold); overflow-wrap: anywhere; }
.article-popup-content img { display: block; max-width: 100%; height: auto; margin: 14px auto; border-radius: 8px; }
.article-popup-content blockquote { margin: 12px 0; padding: 10px 12px; border-left: 3px solid var(--member-gold); background: rgba(236,184,80,.08); }

.member-toast-root { position: fixed; z-index: 100; left: 50%; bottom: 94px; transform: translateX(-50%); width: min(350px,calc(100% - 32px)); display: grid; gap: 8px; pointer-events: none; }
.member-toast { padding: 12px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; color: #fff; background: #242424; box-shadow: 0 8px 28px rgba(0,0,0,.32); font-size: 12px; text-align: center; }
.member-toast.success { background: #176f51; }
.member-toast.error { background: #913d3a; }

@media (min-width: 500px) {
  body {
    position: relative;
    background:
      radial-gradient(ellipse at center, rgba(230,183,94,.18) 0%, rgba(7,7,7,.58) 66%),
      url("/assets/member-midnight-bg.png") center / 100% 100% no-repeat,
      linear-gradient(135deg, #171109 0%, #080706 48%, #130e08 100%);
  }
  body::before {
    content: none;
  }
  #member-root { position: relative; z-index: 1; height: 100dvh; }
  .member-app {
    width: 390px;
    height: 100dvh;
    margin: 0 auto;
    border-right: 1px solid rgba(230,183,94,.2);
    border-left: 1px solid rgba(230,183,94,.2);
    box-shadow: 0 0 76px rgba(0,0,0,.62);
  }
}

@media (max-width: 370px) {
  .member-scroll { --member-scroll-inline: 16px; }
  .notice-strip, .vip-row, .tabs { margin-left: -16px; margin-right: -16px; }
  .vip-row { padding-left: 16px; padding-right: 16px; }
  .task-overview { grid-template-columns: 116px minmax(0,1fr); gap: 14px; }
  .progress-ring { width: 116px; height: 116px; }
  .task-hours strong { font-size: 17px; }
  .quick-action-icon { width: 47px; height: 47px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}