.page-main { min-height: calc(100vh - 82px); padding-block: 76px 100px; }
.page-head { max-width: 780px; margin-bottom: 38px; }
.page-head .kicker { display: block; margin-bottom: 8px; }
.page-head h1 { margin: 0 0 14px; font-size: clamp(2.9rem, 6.4vw, 5.4rem); font-family: "Lalezar", "Estedad", sans-serif; font-weight: 400; }
.language-button, .dashboard-button, .page-nav, .auth-submit, .auth-switch { font-family: "Estedad", "Vazirmatn", sans-serif; }
.page-head p { margin: 0; color: var(--muted); line-height: 2; }
.page-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 42px; direction: rtl; }
.page-nav a { padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px 5px; color: #aaa3ba; background: rgba(255,255,255,.025); transition: .3s var(--ease-out); }
.page-nav a:hover, .page-nav a.active { color: #fff; border-color: var(--line-hot); background: rgba(145,82,240,.12); transform: translateY(-2px); }
.content-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.content-card { min-height: 220px; padding: 28px; border: 1px solid var(--line); border-radius: 24px 8px; background: linear-gradient(145deg,rgba(24,18,43,.84),rgba(9,8,17,.88)); box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.content-card .icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(184,125,255,.2); border-radius: 15px 5px; color: #c99cff; background: rgba(145,78,235,.13); font-size: 1.25rem; }
.content-card h2 { margin: 19px 0 8px; font-size: 1.2rem; }
.content-card p { margin: 0; color: #91899e; font-size: .82rem; line-height: 1.95; }
.status-grid.page-status { grid-template-columns: 1.55fr repeat(3,1fr); }
.auth-page { display: grid; place-items: center; padding-block: 55px 90px; }
.auth-card { width: min(560px,100%); padding: 34px; border: 1px solid rgba(184,139,255,.23); border-radius: 32px 10px; background: radial-gradient(circle at 90% 0,rgba(137,67,229,.2),transparent 21rem),linear-gradient(145deg,#171126,#090812 74%); box-shadow: 0 35px 110px rgba(0,0,0,.55); }
.auth-card .account-brand { margin-bottom: 24px; }
.auth-card h1 { margin: 0; text-align: center; font-size: 2rem; }
.auth-card > p { margin: 7px 0 22px; color: var(--muted); text-align: center; font-size: .78rem; }
.auth-card .auth-form { display: block; }
.auth-switch { margin-top: 18px; text-align: center; color: #8f879c; font-size: .72rem; }
.auth-switch a { color: #c89dff; }
.dashboard-card { max-width: 760px; margin-inline: auto; }
.dashboard-details { margin-top: 16px; }
.loading-screen { text-align: center; color: var(--muted); padding: 80px 20px; }
.password-card { margin-top: 23px; padding: 23px; border: 1px solid rgba(170,120,255,.24); border-radius: 25px 8px 25px 8px; background: radial-gradient(circle at 100% 0,rgba(118,75,205,.19),transparent 260px),linear-gradient(140deg,rgba(22,17,39,.96),rgba(8,9,20,.96)); box-shadow: 0 20px 55px rgba(0,0,0,.24); }
.password-heading { display: flex; align-items: center; gap: 14px; }
.password-mark { width: 49px; height: 49px; flex: none; display: grid; place-items: center; border: 1px solid rgba(167,121,255,.32); border-radius: 15px 5px; background: rgba(143,83,235,.13); font-size: 1.35rem; }
.password-kicker { color: #84daf2; font: 700 .66rem "Estedad",sans-serif; }
.password-heading h2 { margin: 1px 0 2px; color: #f1eafa; font-size: 1.28rem; }
.password-heading p { margin: 0; color: #978eaa; font-size: .7rem; }
.password-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 22px; padding: 5px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(2,3,11,.3); }
.password-tab { min-height: 43px; padding: 8px 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #9d94aa; font: 700 .72rem "Estedad",sans-serif; cursor: pointer; transition: .2s ease; }
.password-tab.active { border-color: rgba(174,130,255,.33); background: linear-gradient(110deg,rgba(102,60,198,.34),rgba(74,157,206,.11)); color: #f7f3ff; box-shadow: 0 5px 20px rgba(92,55,173,.16); }
.password-tab:hover { color: #fff; }
.password-panel { margin-top: 16px; }
.password-panel[hidden],.password-form[hidden],.password-send[hidden] { display: none !important; }
.password-form > label,.password-row label { display: block; margin-bottom: 13px; }
.password-form label > span { display: block; margin: 0 4px 7px; color: #b5adbf; font-size: .69rem; font-weight: 700; }
.password-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.password-form .input-wrap { grid-template-columns: 26px 1fr; }
.password-form .input-wrap input { min-width: 0; }
.password-form .auth-submit { margin-top: 5px; }
.password-link { display: block; margin: 13px auto 0; padding: 6px 8px; border: 0; background: transparent; color: #89def6; font: 700 .7rem "Estedad",sans-serif; cursor: pointer; }
.password-link:hover { color: #d0f6ff; text-decoration: underline; }
.password-hint { margin: 0 0 14px; color: #b1a9bb; font-size: .73rem; line-height: 1.9; }
.password-hint strong { color: #89def6; direction: ltr; unicode-bidi: isolate; }
.password-send { width: 100%; min-height: 46px; border: 1px solid rgba(106,223,243,.3); border-radius: 12px; background: rgba(54,170,197,.12); color: #a8edff; font: 700 .76rem "Estedad",sans-serif; cursor: pointer; }
.password-send:hover { background: rgba(54,170,197,.19); }
.password-send:disabled { opacity: .5; cursor: not-allowed; }
.password-panel #verifyResetCodeForm,.password-panel #completePasswordForm { margin-top: 16px; }
.password-panel #verifyResetCodeForm input { letter-spacing: .35em; text-align: center; }
.password-feedback { min-height: 20px; margin: 9px 1px; color: #ff8da1; font-size: .7rem; line-height: 1.7; }
.password-feedback[data-kind="success"],.password-verified,.password-login-success { color: #78e5b6; }
.password-verified { font-size: .76rem; }
.password-note { margin: 15px 0 0; color: #7d7789; font-size: .63rem; line-height: 1.7; }
.password-login-success { padding: 9px 13px; border: 1px solid rgba(101,238,176,.25); border-radius: 10px; background: rgba(81,210,145,.08); font-size: .74rem !important; }
@media(max-width:980px){.content-grid,.status-grid.page-status{grid-template-columns:1fr 1fr}.main-server-card{grid-column:1/-1}}
@media(max-width:680px){.page-main{padding-block:50px 75px}.content-grid,.status-grid.page-status{grid-template-columns:1fr}.main-server-card{grid-column:auto}.auth-card{padding:27px 18px}.page-nav{gap:7px}.page-nav a{flex:1;text-align:center}.password-card{padding:18px 15px}.password-row{grid-template-columns:1fr}.password-tab{font-size:.65rem}}

.password-mark .phantom-icon { width: 27px; height: 27px; color: #cba9ff; }
.password-tab .phantom-icon,.password-send .phantom-icon,.password-link .phantom-icon { width: 17px; height: 17px; margin-inline-end: 5px; vertical-align: -.3em; }
.password-link .phantom-icon { margin-inline: 5px 0; }
.password-verified .phantom-icon,.password-note .phantom-icon { width: 16px; height: 16px; margin-inline-end: 4px; vertical-align: -.3em; }
.password-note .phantom-icon { color: #83cde0; }

.rule-grid .content-card { position: relative; overflow: hidden; border-color: rgba(177,131,246,.18); }
.rule-grid .content-card::after { content:""; position:absolute; inset:auto -20px -55px auto; width:120px; height:120px; border:1px solid rgba(165,120,245,.09); transform:rotate(32deg); pointer-events:none; }
.rule-grid .content-card .icon .phantom-icon { width:27px; height:27px; }
.catalog-note { margin:22px 0 0; color:#9e95ac; font-size:.78rem; line-height:2; }
.about-callout { display:flex; flex-wrap:wrap; align-items:center; gap:15px; margin-top:28px; padding:20px 24px; border:1px solid rgba(113,210,241,.24); border-radius:22px 7px; background:linear-gradient(110deg,rgba(74,156,209,.12),rgba(134,77,216,.1)); }
.about-callout span { color:#b7adcb; }
.about-callout strong { direction:ltr; color:#e8d8ff; font-family:Oxanium,monospace; font-size:1.2rem; }
.about-callout a { margin-inline-start:auto; color:#a7eafa; font-weight:800; }
.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.mode-card { --mode-color:#ae8aff; position:relative; display:block; min-width:0; overflow:hidden; padding:27px; border:1px solid rgba(180,141,255,.22); border-radius:30px 8px 30px 8px; background:radial-gradient(circle at 80% 0,rgba(142,83,230,.2),transparent 42%),linear-gradient(150deg,#181229,#0a0914); box-shadow:0 28px 65px rgba(0,0,0,.25); }
.mode-card.smp { --mode-color:#84e4de; border-color:rgba(111,223,216,.22); background:radial-gradient(circle at 80% 0,rgba(57,183,183,.18),transparent 42%),linear-gradient(150deg,#111f28,#0a0914); }
.mode-art { display:grid; place-items:center; width:124px; height:124px; margin-bottom:20px; border:1px solid color-mix(in srgb,var(--mode-color) 40%,transparent); border-radius:29px 7px 29px 7px; background:linear-gradient(140deg,color-mix(in srgb,var(--mode-color) 18%,transparent),rgba(255,255,255,.02)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 15px 35px rgba(0,0,0,.18); transform:rotate(-4deg); }
.mode-art .phantom-icon { width:82px; height:82px; color:var(--mode-color); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 11px color-mix(in srgb,var(--mode-color) 32%,transparent)); }
.mode-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mode-heading small,.catalog-heading small { color:var(--mode-color,#9de7ed); font-size:.68rem; font-weight:800; }
.mode-heading h2,.shop-picker h2 { margin:0; color:#f6edff; font-size:1.6rem; }
.mode-card > p { color:#a79cb6; font-size:.8rem; line-height:1.9; }
.mode-state { padding:7px 11px; border-radius:9px 3px; color:#c5b9d6; background:rgba(255,255,255,.06); font-size:.72rem; font-weight:800; white-space:nowrap; }
.mode-state.online { color:#9ff1c9; background:rgba(51,187,129,.15); }
.mode-state.offline { color:#ff9aaa; background:rgba(235,73,100,.13); }
.mode-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:23px 0; }
.mode-metrics div { padding:13px 9px; border:1px solid rgba(255,255,255,.07); border-radius:13px 4px; background:rgba(0,0,0,.12); }
.mode-metrics small { display:block; margin-bottom:5px; color:#8e849b; font-size:.61rem; }
.mode-metrics strong { color:#eee5fb; font-size:.8rem; }
.mode-link { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:43px; padding:9px 17px; border:1px solid color-mix(in srgb,var(--mode-color) 40%,transparent); border-radius:11px 3px; background:color-mix(in srgb,var(--mode-color) 12%,transparent); color:var(--mode-color); font-weight:800; font-size:.77rem; }
.mode-link .phantom-icon { width:16px; height:16px; transform:rotate(180deg); }
.shop-picker .mode-card { transition:transform .25s ease,border-color .25s ease; }
.shop-picker .mode-card:hover { transform:translateY(-5px); border-color:var(--mode-color); }
.shop-section { margin-top:43px; }
.catalog-heading { display:flex; align-items:center; gap:13px; margin-bottom:17px; }
.catalog-heading .icon { display:grid; place-items:center; width:51px; height:51px; border:1px solid rgba(186,145,255,.28); border-radius:14px 5px; color:#cda6ff; background:rgba(148,88,230,.12); }
.catalog-heading .phantom-icon { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; }
.catalog-heading h2 { margin:0; font-size:1.35rem; }
.catalog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.product-card { --product-color:#c59aff; min-width:0; padding:22px 18px; border:1px solid color-mix(in srgb,var(--product-color) 27%,transparent); border-radius:23px 6px 23px 6px; background:radial-gradient(circle at 85% 0,color-mix(in srgb,var(--product-color) 17%,transparent),transparent 70%),linear-gradient(150deg,#1b142b,#0b0a15); }
.product-art { display:block; width:77px; height:77px; margin-bottom:15px; padding:11px; border:1px solid color-mix(in srgb,var(--product-color) 38%,transparent); border-radius:20px 5px; color:var(--product-color); background:color-mix(in srgb,var(--product-color) 10%,transparent); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 11px color-mix(in srgb,var(--product-color) 28%,transparent)); }
.product-card h3 { margin:0 0 8px; color:#f2ebfa; font-size:1rem; }
.product-card h3 small { display:block; color:var(--product-color); font:.72rem Oxanium,sans-serif; letter-spacing:.12em; }
.product-card > strong { display:block; color:#fff; font-size:1.18rem; }
.product-card > strong small { color:#aaa0b5; font-size:.68rem; }
.coming-tag { display:block; margin-top:16px; padding:9px; border:1px solid rgba(255,255,255,.09); border-radius:10px 3px; color:#a9a0b5; background:rgba(255,255,255,.03); text-align:center; font-size:.7rem; }
.rank-card.member { --product-color:#a9bea9; }.rank-card.ghost { --product-color:#b9b6d8; }.rank-card.reaper { --product-color:#ea8ca8; }.rank-card.wraith { --product-color:#7ad8e7; }.rank-card.specter { --product-color:#b389f4; }.rank-card.phantom { --product-color:#e2bb7d; }
.empty-shop { max-width:640px; padding:44px 32px; border:1px solid rgba(183,137,254,.25); border-radius:30px 8px; background:radial-gradient(circle at 50% 0,rgba(130,83,224,.18),transparent 65%),#100d1b; text-align:center; }
.empty-shop > .phantom-icon { width:105px; height:105px; color:#b697e9; fill:none; stroke:currentColor; stroke-width:2; }
.empty-shop h2 { margin:15px 0 6px; font-size:1.8rem; }.empty-shop p { color:#aaa0b8; line-height:2; }.empty-shop .mode-link { --mode-color:#b897ee; margin-top:10px; }
.ping-context { display:block; color:#8ecadd; font-size:.6rem; line-height:1.6; }
@media(max-width:980px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.mode-grid,.catalog-grid{grid-template-columns:1fr}.mode-card{padding:22px}.mode-art{width:104px;height:104px}.mode-art .phantom-icon{width:70px;height:70px}.mode-metrics{gap:5px}.mode-metrics div{padding:9px 5px}.mode-metrics strong{font-size:.67rem}.about-callout a{margin-inline-start:0}}

/* Premium illustrated game-mode, coin and rank art. */
.mode-art { position:relative; width:170px; height:152px; margin-bottom:8px; transform:none; border:0; border-radius:0; background:none; box-shadow:none; }
.mode-art::after { content:""; position:absolute; inset:-8px; background:center / contain no-repeat url('/art/roleplay-v2.webp'); filter:drop-shadow(0 17px 14px rgba(5,4,18,.48)); }
.smp .mode-art::after { background-image:url('/art/smp-v2.webp'); }
.mode-art .phantom-icon { opacity:0; }
.shop-section:first-of-type .catalog-heading .icon { width:60px; height:60px; border:0; background:center / contain no-repeat url('/art/phantom-coin-v2.webp'); box-shadow:none; }
.shop-section:first-of-type .catalog-heading .icon .phantom-icon { opacity:0; }
.coin-card .product-art { display:none; }
.coin-card::before { content:""; display:block; width:108px; height:108px; margin:-5px 0 8px; background:center / contain no-repeat url('/art/phantom-coin-v2.webp'); filter:drop-shadow(0 9px 12px rgba(75,32,131,.43)); }
.empty-shop > .phantom-icon { display:none; }
.empty-shop::before { content:""; display:block; width:200px; height:190px; margin:0 auto; background:center / contain no-repeat url('/art/roleplay-v2.webp'); filter:drop-shadow(0 12px 16px rgba(0,0,0,.42)); }
.rank-card { position:relative; overflow:hidden; }
.rank-card::before { content:""; position:absolute; width:170px; height:170px; top:-55px; right:-50px; border:1px solid color-mix(in srgb,var(--product-color) 24%,transparent); border-radius:50%; box-shadow:0 0 45px color-mix(in srgb,var(--product-color) 12%,transparent); pointer-events:none; }
.rank-card .product-art { position:relative; width:116px; height:116px; padding:10px; border:0; border-radius:0; background:none; filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--product-color) 30%,transparent)); stroke-width:1.1; }
.rank-card:hover .product-art { transform:translateY(-3px) scale(1.06); transition:transform .25s ease; }
@media(max-width:680px){.mode-art{width:145px;height:130px}.coin-card::before{width:94px;height:94px}}

/* Neon aura for illustrated shop art and all rank emblems. */
.mode-art { isolation:isolate; }
.mode-art::before { content:""; position:absolute; z-index:0; inset:13% 7% 5%; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--mode-color) 46%,transparent),transparent 68%); filter:blur(17px); }
.mode-art::after { z-index:1; filter:drop-shadow(0 10px 10px rgba(4,4,15,.52)) drop-shadow(0 0 10px color-mix(in srgb,var(--mode-color) 58%,transparent)); }
.coin-card::before { filter:drop-shadow(0 9px 11px rgba(30,10,59,.58)) drop-shadow(0 0 9px rgba(232,177,94,.68)); }
.shop-section:first-of-type .catalog-heading .icon { filter:drop-shadow(0 0 10px rgba(228,181,98,.55)); }
.empty-shop::before { filter:drop-shadow(0 12px 16px rgba(0,0,0,.48)) drop-shadow(0 0 10px rgba(169,117,244,.52)); }
.rank-card { box-shadow:inset 0 1px color-mix(in srgb,var(--product-color) 22%,transparent),0 0 20px color-mix(in srgb,var(--product-color) 11%,transparent); }
.rank-card::before { border-color:color-mix(in srgb,var(--product-color) 36%,transparent); box-shadow:0 0 28px color-mix(in srgb,var(--product-color) 20%,transparent),inset 0 0 25px color-mix(in srgb,var(--product-color) 9%,transparent); }
.rank-card .product-art { filter:drop-shadow(0 8px 12px rgba(4,3,15,.7)) drop-shadow(0 0 9px color-mix(in srgb,var(--product-color) 74%,transparent)); }
.rank-card:hover { border-color:color-mix(in srgb,var(--product-color) 65%,transparent); box-shadow:inset 0 1px color-mix(in srgb,var(--product-color) 38%,transparent),0 0 30px color-mix(in srgb,var(--product-color) 22%,transparent); }
.shop-section:not(:first-of-type) .catalog-heading .icon { border-color:rgba(226,189,127,.55); background:radial-gradient(circle at 26% 16%,rgba(255,250,203,.38),transparent 28%),linear-gradient(145deg,rgba(137,90,174,.45),rgba(28,22,57,.88)); box-shadow:inset 0 1px rgba(255,255,255,.2),0 0 20px rgba(194,142,238,.32); }
.shop-section:not(:first-of-type) .catalog-heading .icon .phantom-icon { width:32px; height:32px; filter:drop-shadow(0 0 6px rgba(229,186,255,.8)); }