.account-page { min-height: 100svh; overflow-x: hidden; }
.account-header__status { display: flex; align-items: center; gap: 8px; color: #718078; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.account-header__status i,.dash-card__label b i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: account-pulse 2s ease-in-out infinite; }.account-home { padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; color: #93a198; font-size: 10px; font-weight: 700; }
.account-main { width: min(calc(100% - 28px),1180px); margin: 0 auto; padding: 108px 0 45px; }
.auth-view { display: grid; grid-template-columns: 1.13fr .87fr; min-height: calc(100svh - 150px); overflow: hidden; border: 1px solid var(--line); border-radius: 36px; background: rgba(8,14,11,.72); box-shadow: 0 45px 120px rgba(0,0,0,.32); }
.auth-visual { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 650px; padding: clamp(35px,6vw,72px); overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at 65% 55%,rgba(65,245,155,.12),transparent 35%),linear-gradient(145deg,#0e1c15,#07100c); }.auth-visual__grid { position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(97,255,173,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(97,255,173,.045) 1px,transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(black,transparent); }.auth-visual h1 { position: relative; z-index: 2; margin: 24px 0 19px; font: 600 clamp(38px,4.5vw,61px)/1.08 var(--font-display); letter-spacing: -.06em; }.auth-visual h1 span { color: var(--green); }.auth-visual > p { position: relative; z-index: 2; max-width: 510px; margin: 0; color: var(--muted); font-size: 14px; }
.auth-shield { position: relative; display: grid; width: 210px; height: 210px; margin: 42px auto 25px; place-items: center; }.auth-shield span { position: absolute; inset: 0; border: 1px solid rgba(65,245,155,.12); border-radius: 50%; animation: auth-ring 3.2s ease-out infinite; }.auth-shield span:nth-child(2){animation-delay:1.05s}.auth-shield span:nth-child(3){animation-delay:2.1s}.auth-shield img { position: relative; z-index: 2; width: 108px; height: 108px; border-radius: 32px; object-fit: cover; filter: drop-shadow(0 0 26px rgba(65,245,155,.28)); }.auth-visual__stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }.auth-visual__stats div { display: flex; flex-direction: column; padding: 17px 8px 0; }.auth-visual__stats div+div { border-left: 1px solid var(--line); padding-left: 18px; }.auth-visual__stats strong { font: 600 13px var(--font-display); }.auth-visual__stats small { margin-top: 4px; color: #617067; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px,5vw,60px); background: radial-gradient(circle at 100% 0,rgba(65,245,155,.055),transparent 35%); }.auth-panel__head > span { color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.auth-panel__head h2 { margin: 13px 0 9px; font: 600 clamp(27px,3vw,38px)/1.15 var(--font-display); letter-spacing: -.05em; }.auth-panel__head p { margin: 0; color: var(--muted); font-size: 12px; }
.login-form { display: grid; gap: 16px; margin-top: 31px; }.login-form[hidden] { display: none; }.login-form label>span { display: block; margin-bottom: 8px; color: #77867d; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.account-input { display: flex; align-items: center; height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.02); transition: border-color .2s,box-shadow .2s; }.account-input:focus-within { border-color: rgba(65,245,155,.42); box-shadow: 0 0 0 4px rgba(65,245,155,.055); }.account-input i { margin-right: 10px; color: var(--green); font-size: 11px; font-style: normal; }.account-input input { width: 100%; padding: 0; border: 0; outline: 0; color: var(--text); background: none; font-size: 12px; }.account-input input::placeholder { color: #4f5b54; }.login-form label>small { display: none; margin: 5px 0 0 4px; color: #ff8e8e; font-size: 8px; }.login-form label.has-error .account-input { border-color: rgba(255,105,105,.48); }.login-form label.has-error>small { display: block; }
.account-primary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 17px; border: 1px solid rgba(132,255,191,.45); border-radius: 15px; color: #06110a; background: linear-gradient(135deg,#72ffb3,#31e991); box-shadow: 0 15px 40px rgba(35,227,137,.14); cursor: pointer; font-size: 11px; font-weight: 800; }.account-primary span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: rgba(0,0,0,.09); }.auth-help { display: flex; justify-content: space-between; gap: 15px; color: #627168; font-size: 9px; }.auth-help a { color: #96a79c; }.demo-login { padding: 12px; border: 1px solid var(--line); border-radius: 13px; color: #8b9a91; background: rgba(255,255,255,.018); cursor: pointer; font-size: 10px; }.auth-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0; color: #505d55; font-size: 8px; }.auth-note i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.login-message { min-height: 18px; margin: -4px 2px 0; color: #ff9696; font-size: 10px; line-height: 1.4; }
.login-message[data-type="success"] { color: var(--green-soft); }
.dashboard[hidden],.auth-view[hidden]{display:none}.dashboard { padding: 40px 0 60px; animation: dashboard-in .55s cubic-bezier(.16,1,.3,1) both; }.dashboard-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 45px; }.dashboard-head>div { min-width: 0; }.dashboard-head h1 { margin: 20px 0 8px; font: 600 clamp(35px,5vw,61px)/1.08 var(--font-display); letter-spacing: -.06em; }.dashboard-head h1 span { color: var(--green); overflow-wrap: anywhere; }.dashboard-head h1 .account-greeting { color: inherit; }.dashboard-head p { margin: 0; color: var(--muted); }.logout-button { padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; color: #89988f; background: rgba(255,255,255,.02); cursor: pointer; font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; }.dash-card { position: relative; min-height: 250px; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 27px; background: radial-gradient(circle at 100% 0,rgba(65,245,155,.055),transparent 35%),linear-gradient(145deg,rgba(15,26,21,.92),rgba(7,12,10,.94)); box-shadow: inset 0 1px rgba(255,255,255,.025); }.dash-card::after { position: absolute; inset: 0; content:""; pointer-events:none; background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.02),transparent 70%); transform:translateX(-100%); transition:transform .8s }.dash-card:hover::after{transform:translateX(100%)}.dash-card__label { display: flex; align-items: center; justify-content: space-between; color: #718078; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.dash-card__label b { display: flex; align-items: center; gap: 7px; color: var(--green); font-size: 8px; }.dash-card__label b i { display: block; }
.dash-card__label b.is-unlinked { color: #78867d; }
.dash-card__label b.is-unlinked i { background: #65736a; box-shadow: none; animation: none; }
.subscription-card { grid-column: span 5; min-height: 440px; }.connection-card { grid-column: span 7; }.devices-card { grid-column: span 4; }.traffic-card { grid-column: span 4; }.support-dash-card { grid-column: span 4; }.subscription-main { display: flex; align-items: center; justify-content: space-between; margin: 35px 0; }.subscription-main>div:first-child { display: flex; flex-direction: column; }.subscription-main small { color: #66746c; font-size: 9px; text-transform: uppercase; }.subscription-main strong { margin-top: 4px; color: var(--green); font: 600 64px/.9 var(--font-display); letter-spacing: -.08em; }.subscription-main strong i { font-size: 14px; font-style: normal; letter-spacing: -.03em; }.subscription-ring { display: grid; width: 90px; height: 90px; place-items: center; border-radius: 50%; background: radial-gradient(circle at center,#0c1711 60%,transparent 61%),conic-gradient(var(--green) 74%,rgba(255,255,255,.07) 0); box-shadow: 0 0 35px rgba(65,245,155,.08); }.subscription-ring span { font: 600 11px var(--font-display); }.subscription-card dl { margin: 0 0 25px; }.subscription-card dl div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 10px; }.subscription-card dt { color: #65736a; }.subscription-card dd { margin: 0; color: #aebcb3; font-weight: 700; }.subscription-card .account-primary { margin-top: auto; }
.connection-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; margin: 28px 0 20px; padding: 15px; border: 1px solid rgba(65,245,155,.14); border-radius: 17px; background: rgba(65,245,155,.04); }.connection-route>span { display: grid; width: 42px; height: 35px; place-items: center; border-radius: 10px; color: var(--green); background: rgba(65,245,155,.08); font-size: 10px; font-weight: 800; }.connection-route div { display: flex; flex-direction: column; }.connection-route small,.profile-link>small { color: #607067; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }.connection-route strong { font-size: 11px; }.connection-route em { color: var(--green); font-size: 11px; font-style: normal; }.profile-link { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(0,0,0,.14); }.profile-link code { display: block; margin: 10px 0 14px; overflow: hidden; color: #a9b8af; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.profile-link>div { display: flex; gap: 7px; }.profile-link button,.dash-secondary { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: #8c9a91; background: rgba(255,255,255,.025); cursor: pointer; font-size: 8px; }.copy-state { height: 15px; margin: 8px 4px 0; color: var(--green); font-size: 8px; }
.device-list { display: grid; gap: 5px; margin: 22px 0; }.device-list>div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px; border-radius: 13px; background: rgba(255,255,255,.02); }.device-list>div>span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--green); background: rgba(65,245,155,.06); }.device-list>div>div { display: flex; flex-direction: column; }.device-list strong { font-size: 9px; }.device-list small { color: #647169; font-size: 7px; }.device-list>div>i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }.dash-secondary { display: flex; justify-content: space-between; width: 100%; }
.traffic-total { display: flex; align-items: end; gap: 7px; margin-top: 22px; }.traffic-total strong { font: 600 37px/1 var(--font-display); letter-spacing: -.06em; }.traffic-total span { color: var(--green); font-size: 10px; }.traffic-chart { display: flex; align-items: end; gap: 7px; height: 105px; margin-top: 19px; }.traffic-chart i { flex: 1; height: var(--h); min-height: 8px; border-radius: 5px 5px 2px 2px; background: linear-gradient(to top,rgba(65,245,155,.14),var(--green)); box-shadow: 0 0 12px rgba(65,245,155,.08); animation: chart-in .8s cubic-bezier(.22,1,.36,1) both; transform-origin: bottom; }.traffic-chart i:nth-child(2){animation-delay:.05s}.traffic-chart i:nth-child(3){animation-delay:.1s}.traffic-chart i:nth-child(4){animation-delay:.15s}.traffic-chart i:nth-child(5){animation-delay:.2s}.traffic-chart i:nth-child(6){animation-delay:.25s}.traffic-chart i:nth-child(7){animation-delay:.3s}.traffic-days { display: flex; justify-content: space-around; color: #536058; font-size: 7px; }
.support-dash-card { display: flex; flex-direction: column; justify-content: space-between; }.support-dash-card h2 { margin: 22px 0 10px; font: 600 22px/1.25 var(--font-display); letter-spacing: -.04em; }.support-dash-card p { margin: 0; color: var(--muted); font-size: 10px; }.support-dash-card>a { display: flex; justify-content: space-between; padding: 12px 0 4px; border-bottom: 1px solid rgba(65,245,155,.18); color: var(--green-soft); font-size: 10px; font-weight: 700; }
@keyframes account-pulse{50%{opacity:.45;box-shadow:0 0 18px var(--green)}}@keyframes auth-ring{0%{opacity:0;transform:scale(.45)}25%{opacity:.7}100%{opacity:0;transform:scale(1.1)}}@keyframes dashboard-in{from{opacity:0;transform:translateY(20px)}}@keyframes chart-in{from{transform:scaleY(0)}}
@media(max-width:920px){.auth-view{grid-template-columns:1fr}.auth-visual{min-height:560px;border-right:0;border-bottom:1px solid var(--line)}.subscription-card,.connection-card{grid-column:span 6}.devices-card,.traffic-card,.support-dash-card{grid-column:span 4}}
@media(max-width:680px){.account-header__status{display:none}.account-main{width:calc(100% - 18px);padding-top:85px}.auth-view{border-radius:26px}.auth-panel{order:-1;min-height:calc(100svh - 105px);padding:32px 20px;border-bottom:1px solid var(--line)}.auth-visual{order:2;min-height:490px;padding:30px 22px;border-bottom:0}.auth-visual h1{font-size:39px}.auth-shield{width:170px;height:170px;margin-block:27px 18px}.auth-help{flex-direction:column;gap:5px}.dashboard{padding-top:25px}.dashboard-head{position:relative;align-items:flex-start}.logout-button{position:absolute;top:0;right:0}.dashboard-head h1{font-size:36px}.dashboard-grid{grid-template-columns:1fr}.subscription-card,.connection-card,.devices-card,.traffic-card,.support-dash-card{grid-column:auto}.dash-card{padding:21px;border-radius:22px}.subscription-main strong{font-size:53px}.page-header.account-header{width:calc(100% - 18px)}}
@media(max-width:390px){.account-home{font-size:0}.account-home::after{content:'↗';font-size:13px}.auth-visual__stats small{font-size:6px}.auth-panel__head h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){.auth-shield span{display:none}.traffic-chart i{animation:none}}

/* Client dashboard: only real subscription and support data. */
.access-card { grid-column: span 7; min-height: 440px; }
.profile-card { grid-column: span 5; min-height: 440px; }
.telegram-card { grid-column: span 4; min-height: 285px; }
.referral-card { grid-column: span 3; min-height: 285px; }
.support-dash-card { grid-column: span 5; min-height: 285px; }

.access-summary { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 34px 0 30px; }
.access-summary>div:first-child { min-width: 0; }
.access-summary small { color: #66746c; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.access-summary strong { display: block; margin-top: 5px; color: var(--green); font: 600 clamp(54px,7vw,78px)/.92 var(--font-display); letter-spacing: -.085em; }
.access-summary strong i { font-size: 15px; font-style: normal; letter-spacing: -.03em; }
.access-summary p { margin: 13px 0 0; color: #66746c; font-size: 9px; }
.access-shield { position: relative; display: grid; flex: 0 0 114px; width: 114px; height: 114px; place-items: center; border: 1px solid rgba(65,245,155,.14); border-radius: 50%; background: radial-gradient(circle,rgba(65,245,155,.11),transparent 65%); }
.access-shield::before,.access-shield span { position: absolute; content: ""; border: 1px solid rgba(65,245,155,.1); border-radius: 50%; }
.access-shield::before { inset: 12px; }
.access-shield span { inset: -1px; animation: account-pulse-ring 2.7s ease-out infinite; }
.access-shield img { width: 60px; height: 60px; border-radius: 18px; object-fit: cover; filter: drop-shadow(0 0 19px rgba(65,245,155,.26)); }
.access-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 0 24px; }
.access-details div { min-width: 0; padding: 14px; border: 1px solid rgba(255,255,255,.055); border-radius: 15px; background: rgba(255,255,255,.018); }
.access-details dt { color: #647269; font-size: 7px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.access-details dd { margin: 7px 0 0; overflow: hidden; color: #c7d3cb; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.profile-intro { display: flex; align-items: center; gap: 14px; margin: 31px 0 23px; }
.profile-intro>span { display: grid; flex: 0 0 50px; width: 50px; height: 50px; place-items: center; border-radius: 15px; color: var(--green); background: rgba(65,245,155,.08); font-size: 25px; }
.profile-intro strong { font-size: 12px; }
.profile-intro p { margin: 5px 0 0; color: #68766d; font-size: 9px; line-height: 1.5; }
.profile-link>div { flex-wrap: wrap; }
.profile-link button,.profile-link a { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; color: #92a299; background: rgba(255,255,255,.025); cursor: pointer; font: 700 8px var(--font-body); }
.profile-link a { margin-left: auto; color: var(--green-soft); border-color: rgba(65,245,155,.15); }
.profile-warning { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; color: #68766d; font-size: 8px; line-height: 1.45; }
.profile-warning i { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: #d1b56c; background: rgba(209,181,108,.09); font-style: normal; font-weight: 800; }

.telegram-profile { display: flex; align-items: center; gap: 13px; margin: 27px 0 22px; }
.telegram-profile>span { display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(65,245,155,.16); border-radius: 16px; color: var(--green); background: radial-gradient(circle at 35% 25%,rgba(65,245,155,.16),rgba(65,245,155,.035)); font: 600 17px var(--font-display); text-transform: uppercase; }
.telegram-profile>div { min-width: 0; }
.telegram-profile strong,.telegram-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telegram-profile strong { color: #eaf8ef; font-size: 12px; }
.telegram-profile small { margin-top: 5px; color: #65736a; font-size: 8px; }
.bot-state { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-block: 1px solid rgba(255,255,255,.05); color: #68766d; font-size: 8px; }
.bot-state b { color: var(--green); }
.dash-link { display: flex; justify-content: space-between; margin-top: 17px; color: var(--green-soft); font-size: 9px; font-weight: 700; }
.dash-link--button { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-body); text-align: left; }
.dash-link--danger { color: #dba0a0; }
.dash-link--button:disabled { cursor: wait; opacity: .55; }
.bot-action-state { margin: 8px 0 0; }

.referral-card>p { margin: 27px 0 22px; color: #718078; font-size: 9px; line-height: 1.55; }
.referral-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 12px; }
.referral-stats>div { min-width: 0; padding: 12px 10px; border: 1px solid rgba(255,255,255,.055); border-radius: 13px; background: rgba(255,255,255,.022); }
.referral-stats small { display: block; overflow: hidden; color: #637169; font-size: 7px; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.referral-stats strong { display: block; margin-top: 6px; color: #d9e8df; font: 600 18px/1 var(--font-display); letter-spacing: -.04em; }
.referral-stats strong span { color: inherit; }
.referral-conversion { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; color: #66766d; font-size: 8px; }
.referral-conversion b { color: var(--green); font: 600 11px var(--font-display); }
.referral-code { display: flex; align-items: center; gap: 7px; padding: 8px 8px 8px 12px; border: 1px dashed rgba(65,245,155,.2); border-radius: 13px; background: rgba(65,245,155,.035); }
.referral-code code { min-width: 0; overflow: hidden; color: var(--green-soft); font: 600 9px var(--font-display); text-overflow: ellipsis; }
.referral-actions { display: flex; gap: 6px; margin-left: auto; }
.referral-code button,.support-actions button { padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; color: #89988f; background: rgba(255,255,255,.025); cursor: pointer; font-size: 8px; }
.referral-card>.copy-state { margin-top: 8px; }
.referral-history { margin-top: 5px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.055); }
.referral-history__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #7a8980; font-size: 8px; font-weight: 700; }
.referral-history__head small { color: #5f6d65; font-size: 7px; }
.referral-history__list { display: grid; gap: 5px; margin-top: 10px; }
.referral-history__list>p { margin: 0; color: #5f6d65; font-size: 8px; }
.referral-history__item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 8px 9px; border-radius: 10px; background: rgba(255,255,255,.018); }
.referral-history__item div { min-width: 0; }
.referral-history__item strong,.referral-history__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-history__item strong { color: #aebdb4; font-size: 8px; }
.referral-history__item small { margin-top: 3px; color: #5f6d65; font-size: 7px; }
.referral-history__item b { align-self: center; color: #79887f; font-size: 7px; font-weight: 700; }
.referral-history__item b.is-paid { color: var(--green); }

.support-dash-card p strong { color: #aebdb4; font-weight: 700; }
.support-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 7px; margin-top: 20px; }
.support-actions button { width: 100%; margin: 0; }
.support-actions a { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid rgba(65,245,155,.17); border-radius: 10px; color: var(--green-soft); background: rgba(65,245,155,.035); font-size: 8px; font-weight: 700; }
.support-dash-card>.copy-state { height: 10px; margin: 7px 0 0; }

.otp-form[hidden] { display: none; }
.otp-sent { padding: 13px 15px; border: 1px solid rgba(65,245,155,.14); border-radius: 13px; color: #718078; background: rgba(65,245,155,.035); font-size: 10px; line-height: 1.5; }
.otp-sent strong { display: block; margin-top: 3px; overflow: hidden; color: var(--green-soft); text-overflow: ellipsis; white-space: nowrap; }
.otp-code-input input { color: var(--green-soft); font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: .32em; }
.otp-code-input input::placeholder { color: #33453b; letter-spacing: .32em; }
.otp-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.otp-actions button { padding: 0; border: 0; color: #75867c; background: none; cursor: pointer; font: 700 9px var(--font-body); }
.otp-actions button:hover:not(:disabled) { color: var(--green-soft); }
.otp-actions button:disabled { cursor: not-allowed; opacity: .55; }
.otp-actions [data-resend-timer] { font-variant-numeric: tabular-nums; }

@keyframes account-pulse-ring { 0% { opacity: .65; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.18); } }

@media(max-width:920px){
  .access-card,.profile-card { grid-column: span 6; }
  .telegram-card,.referral-card,.support-dash-card { grid-column: span 4; }
  .access-details { grid-template-columns: 1fr; }
  .access-details div { display: flex; align-items: center; justify-content: space-between; }
  .access-details dd { margin: 0; }
}

@media(max-width:680px){
  .access-card,.profile-card,.telegram-card,.referral-card,.support-dash-card { grid-column: auto; min-height: 0; }
  .access-summary { margin-top: 30px; }
  .access-shield { flex-basis: 88px; width: 88px; height: 88px; }
  .access-shield img { width: 43px; height: 43px; border-radius: 13px; }
  .access-summary strong { font-size: 53px; }
  .profile-link a { margin-left: 0; }
  .referral-code { align-items: stretch; flex-direction: column; }
  .referral-actions { display: grid; grid-template-columns: 1fr 1fr; margin-left: 0; }
  .referral-stats { grid-template-columns: repeat(2,1fr); }
}

@media(max-width:390px){
  .access-summary { align-items: flex-end; gap: 12px; }
  .access-summary p { max-width: 190px; }
  .support-actions { grid-template-columns: 1fr; }
}

/* Readability and support layout v4 */
@media(min-width:681px){
  .account-main { width: min(calc(100% - 40px),1240px); }
  .auth-visual>p { font-size: 15px; line-height: 1.65; }
  .auth-panel__head p { font-size: 14px; line-height: 1.6; }
  .login-form label>span { font-size: 10px; }
  .account-input { height: 58px; }
  .account-input input { font-size: 14px; }
  .account-primary { min-height: 58px; font-size: 13px; }
  .auth-help { font-size: 11px; }
  .otp-sent { font-size: 12px; }
  .otp-actions button { font-size: 11px; }
  .demo-login { font-size: 12px; }
  .auth-note { font-size: 10px; }
  .dashboard-head p { font-size: 15px; }
  .dash-card { padding: 32px; }
  .dash-card__label,.dash-card__label b { font-size: 10px; }
  .access-card,.profile-card { min-height: 475px; }
  .access-summary small { font-size: 10px; }
  .access-summary p { font-size: 11px; line-height: 1.5; }
  .access-details dt { font-size: 9px; }
  .access-details dd { font-size: 12px; }
  .profile-intro strong { font-size: 14px; }
  .profile-intro p { font-size: 11px; }
  .profile-link>small { font-size: 9px; }
  .profile-link code { font-size: 12px; }
  .profile-link button,.profile-link a { font-size: 10px; }
  .profile-warning { font-size: 10px; }
  .telegram-profile strong { font-size: 14px; }
  .telegram-profile small,.bot-state { font-size: 10px; }
  .dash-link { font-size: 11px; }
  .referral-card>p { font-size: 11px; }
  .referral-code code { font-size: 11px; }
  .referral-code button,.support-actions button { font-size: 10px; }
}

.telegram-card,.referral-card { grid-column: span 6; min-height: 300px; }
.support-dash-card { grid-column: span 12; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 46px; min-height: 250px; }
.support-dash-card::before { position: absolute; right: 12%; bottom: -110px; width: 310px; height: 310px; border: 1px solid rgba(65,245,155,.07); border-radius: 50%; content: ""; box-shadow: 0 0 80px rgba(65,245,155,.04); }
.support-dash-card h2 { margin: 24px 0 13px; font-size: clamp(28px,3vw,38px); line-height: 1.13; }
.support-dash-card p { max-width: 620px; font-size: 12px; line-height: 1.6; }
.support-actions { position: relative; z-index: 2; align-self: center; margin: 0; padding: 18px; border: 1px solid rgba(255,255,255,.055); border-radius: 18px; background: rgba(0,0,0,.13); }
.support-actions button,.support-actions a { min-height: 46px; }
.support-dash-card>.copy-state { grid-column: 2; margin: -35px 18px 0; }

@media(max-width:920px){
  .telegram-card,.referral-card { grid-column: span 6; }
  .support-dash-card { grid-column: span 12; gap: 24px; }
}

@media(max-width:680px){
  .dash-card { padding: 23px; }
  .telegram-card,.referral-card,.support-dash-card { grid-column: auto; }
  .support-dash-card { display: flex; min-height: 0; gap: 20px; }
  .support-dash-card h2 { font-size: 27px; }
  .support-dash-card p { font-size: 10px; }
  .support-actions { width: 100%; padding: 12px; }
  .support-dash-card>.copy-state { margin: -14px 12px 0; }
}

@media(prefers-reduced-motion:reduce){.access-shield span{display:none}}