@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap");:root{--member-page: #0a0c12;--member-card: #14171f;--member-border: #262a36;--member-text: #f4efe3;--member-muted: #949aa8;--member-weak: #5f6574;--member-green: #79a37a;--member-expiry: #c2803f;--member-gold-light: #f7e3ac;--member-gold: #c49a4e;--member-gold-deep: #c9a35d;--member-silver: #9aa7b8;--member-silver-light: #c2ccd9;--member-number-font: "Be Vietnam Pro", Inter, ui-sans-serif, system-ui, sans-serif;--member-title-font: "Playfair Display", Georgia, serif}
.member-session, .member-view.active{color: var(--member-text);background: var(--member-page);font-family: var(--member-number-font)}
.member-session .site-shell{background: var(--member-page);box-shadow: 0 0 0 1px #151821, 0 30px 80px rgba(0, 0, 0, .42)}
.member-session .site-topbar, body[data-view^="member-"] .site-topbar{color: var(--member-text);background: rgba(10, 12, 18, .93);border-color: var(--member-border)}
.member-session .brand-mark, .member-session .top-login-button, body[data-view^="member-"] .brand-mark, body[data-view^="member-"] .top-login-button{color: var(--member-text)}
.member-session .brand-mark small{color: var(--member-muted)}
.member-session .home-search, .member-session #homeGameModule, .member-session #editorModule, .member-session #openServerModule{display: none}
.member-session .value-hero{margin-top: 20px}
.member-session .value-hero-cta{color: #191405;background: linear-gradient(120deg, #ecd193, #c49a4e);box-shadow: 0 8px 18px rgba(196, 154, 78, .18)}
.member-session .module-card{border-color: var(--member-border)}
.member-session .brand-icon, .member-session .language-switcher button.active{color: var(--member-text);border: 1px solid var(--member-border);background: #171a22;box-shadow: none}
.member-session .top-login-button{color: var(--member-text);border: 1px solid var(--member-border);background: #171a22;box-shadow: none}
.member-session .bottom-nav{grid-template-columns: repeat(4, minmax(0, 1fr));border-color: var(--member-border);background: rgba(10, 12, 18, .96)}
body[data-view^="member-"] .bottom-nav, body[data-view="claim-code"] .bottom-nav, body[data-view="zalo-benefits"] .bottom-nav{display: none}
.member-session .nav-item{color: var(--member-muted)}
.member-session .nav-item::before{background: #242936}
.member-session .nav-item.active{color: var(--member-text)}
.member-session .nav-item.active::before{background: #3b414f}
.member-experience{position: relative;padding-top: 8px}
.member-experience::before, .member-view::before{position: absolute;inset: 0 0 auto;height: 260px;pointer-events: none;content: "";background: radial-gradient(circle at 50% 0, rgba(196, 154, 78, .16), transparent 66%)}
.member-state, .member-card, .member-panel, .member-migration-card{position: relative;overflow: hidden;border: 1px solid var(--member-border);border-radius: 13px;background: var(--member-card)}
.member-state{min-height: 190px;padding: 22px}
.member-state h2, .member-panel h3, .member-migration-card h3{margin: 5px 0 8px;color: var(--member-text)}
.member-state p, .member-panel p, .member-migration-card p{color: var(--member-muted)}
.member-state-skeleton{min-height: 704px}
.member-state-skeleton span{display: block;height: 14px;margin: 12px 0;border-radius: 9px;background: linear-gradient(90deg, #1b1e27, #282c37, #1b1e27);background-size: 220% 100%;animation: member-loading 1.2s linear infinite}
.member-state-skeleton span:first-child{width: 44%;height: 28px}
.member-state-skeleton span:last-child{width: 68%}
@keyframes member-loading{to{background-position: -220% 0}
}
.member-card{padding: 22px;background: linear-gradient(160deg, #1e2130, #131620 52%, #1a1c26)}
.member-tier-gold .member-card{border-color: rgba(214, 174, 96, .5)}
.member-tier-silver .member-card{border-color: rgba(154, 167, 184, .4)}
.member-corner{position: absolute;inset: 10px;width: calc(100% - 20px);height: calc(100% - 20px);pointer-events: none;fill: none;stroke: #c9a35d;stroke-width: 1.3}
.member-corner path{vector-effect: non-scaling-stroke}
.member-tier-silver .member-corner{stroke: var(--member-silver)}
.member-tier-silver .member-ritual-badge{color: var(--member-silver-light);border-color: var(--member-silver);box-shadow: 0 0 42px rgba(154, 167, 184, .2), inset 0 0 0 8px #14171f, inset 0 0 0 9px var(--member-silver)}
.member-tier-silver .member-ritual-grade, .member-tier-silver .member-ritual-title{color: var(--member-silver-light);background: none;-webkit-text-fill-color: currentColor}
.member-cloud{position: absolute;right: -18px;bottom: -8px;width: 170px;opacity: .07;fill: none;stroke: currentColor}
.member-card-top{display: flex;align-items: center;gap: 14px}
.member-level-badge{flex: 0 0 auto;width: 68px;height: 68px}
.member-tier-gold .member-level-badge{color: var(--member-gold-light)}
.member-tier-silver .member-level-badge{color: var(--member-silver-light)}
.member-level-badge svg{width: 100%;height: 100%;fill: none;stroke: currentColor;stroke-width: 1.4}
.member-badge-outer{stroke-dasharray: 2.5 2.5}
.member-badge-star{stroke-linejoin: round}
.member-level-kicker{margin: 0 0 3px;color: var(--member-muted);font: 700 10px/1.3 var(--member-number-font);letter-spacing: .12em;text-transform: uppercase}
.member-grade-name{margin: 0;font: 700 27px/1.08 var(--member-title-font);letter-spacing: .1em}
.member-tier-gold .member-grade-name, .member-tier-gold .member-ritual-grade{color: transparent;background: linear-gradient(120deg, #f7e3ac, #c49a4e);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent}
.member-tier-silver .member-grade-name{color: var(--member-silver-light)}
.member-card-kicker, .member-screen-head p, .member-draft-label{margin: 0 0 4px;color: #8d8874;font: 700 10px/1.4 var(--member-number-font);letter-spacing: .12em}
.member-card-sub{margin: 3px 0 0;color: var(--member-muted);font-size: 12px}
.member-progress{height: 5px;margin: 18px 0 8px;overflow: hidden;border-radius: 5px;background: #272b36}
.member-progress span{display: block;height: 100%;border-radius: inherit}
.member-tier-gold .member-progress span{background: linear-gradient(90deg, #c49a4e, #f7e3ac)}
.member-tier-silver .member-progress span{background: linear-gradient(90deg, #9aa7b8, #c2ccd9)}
.member-progress-copy{display: flex;justify-content: space-between;color: var(--member-muted);font-size: 11px}
.member-number{font-family: var(--member-number-font);font-variant-numeric: lining-nums tabular-nums;font-weight: 800}
.member-assets{display: grid;grid-template-columns: 1fr 1fr;gap: 1px;margin: 20px -22px 0;border-block: 1px solid var(--member-border);background: var(--member-border)}
.member-asset{padding: 14px 22px;background: rgba(15, 17, 24, .76)}
.member-asset span{display: block;color: var(--member-muted);font-size: 11px}
.member-asset strong{display: block;margin-top: 4px;color: var(--member-text);font-size: 20px}
.member-expiry{margin: 11px 0 0;color: var(--member-expiry);font-size: 11px}
.member-week{margin-top: 18px}
.member-week-title{display: flex;align-items: center;gap: 10px;margin: 0;color: #d6b673;font: 700 10px/1 var(--member-number-font);letter-spacing: .16em;text-align: center}
.member-week-title::before, .member-week-title::after{flex: 1;height: 1px;content: "";background: linear-gradient(90deg, transparent, rgba(214, 182, 115, .46))}
.member-week-title::after{transform: scaleX(-1)}
.member-reminders{display: grid;gap: 9px;margin-top: 14px}
.member-reminder, .member-step{display: flex;align-items: center;gap: 11px;width: 100%;min-height: 54px;padding: 11px 13px;color: var(--member-text);text-align: left;border: 1px solid var(--member-border);border-radius: 9px;background: #11141b}
.member-reminder svg, .member-step svg, .member-benefit svg{width: 20px;height: 20px;fill: none;stroke: currentColor;stroke-width: 1.7}
.member-reminder div, .member-step div{flex: 1}
.member-reminder span, .member-step div > span{display: block;color: var(--member-muted);font-size: 11px}
.member-step.complete{color: var(--member-green)}
.member-primary, .member-secondary, .member-text-action{min-height: 46px;border-radius: 11px;font: 800 13px/1 var(--member-number-font)}
.member-primary{width: 100%;color: #191405;background: linear-gradient(120deg, #ecd193, #c49a4e);box-shadow: 0 8px 18px rgba(196, 154, 78, .18)}
.member-secondary{width: 100%;color: var(--member-text);border: 1px solid var(--member-border);background: #171a22}
.member-text-action{color: var(--member-muted);background: transparent}
.member-card > .member-primary{margin-top: 16px}
.member-screen-head{position: relative;display: flex;align-items: center;gap: 12px;padding: 10px 0 18px}
.member-screen-head h2{margin: 0;color: var(--member-text);font: 800 20px/1.25 var(--member-number-font)}
.member-icon-button{display: grid;width: 42px;height: 42px;place-items: center;color: var(--member-text);border: 1px solid var(--member-border);border-radius: 9px;background: #12151c}
.member-icon-button svg{width: 20px;fill: none;stroke: currentColor;stroke-width: 1.8}
.member-panel{padding: 18px}
.member-ritual{display: grid;gap: 9px}
.member-panel-actions{display: grid;gap: 9px;margin-top: 18px}
.member-migration-card{margin-top: 13px;padding: 16px;border-color: rgba(214, 174, 96, .5)}
.member-migration-card strong{color: var(--member-gold-light)}
.member-form{display: grid;gap: 13px}
.member-field span{display: block;margin-bottom: 7px;color: var(--member-muted);font-size: 12px}
.member-field input, .member-field select{width: 100%;min-height: 48px;padding: 0 13px;color: var(--member-text);border: 1px solid #363b49;border-radius: 9px;background: #0e1016;font-family: var(--member-number-font)}
.member-feedback{min-height: 20px;margin: 0;color: var(--member-muted);font-size: 12px}
.member-feedback.error{color: #d99286}
.member-feedback.success{color: var(--member-green)}
.member-paths{display: grid;grid-template-columns: 1fr 1fr;gap: 9px;margin-top: 14px}
.member-benefits{display: grid;gap: 12px;margin: 18px 0}
.member-benefit{display: flex;gap: 11px;color: var(--member-text)}
.member-benefit div{flex: 1}
.member-benefit p{margin: 3px 0 0;font-size: 12px}
.member-primary:focus-visible, .member-secondary:focus-visible, .member-text-action:focus-visible, .member-reminder:focus-visible, .member-step:focus-visible, .member-weekly-action:focus-visible, .member-checkin-card:focus-visible, .member-icon-button:focus-visible, .member-field input:focus-visible{outline: 2px solid #f7e3ac;outline-offset: 3px}
@media (max-width: 359px){.member-card{padding: 18px}
.member-assets{margin-inline: -18px}
.member-asset{padding-inline: 18px}
.member-paths{grid-template-columns: 1fr}
}
@media (prefers-reduced-motion: reduce){.member-state-skeleton span{animation: none}
}