select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23767a70' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:11px 8px;padding-right:36px!important}
:is(html[data-theme="dark"],html[data-theme-mode="DARK"]) select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a6aaa2' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media(prefers-color-scheme:dark){html[data-theme="system"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a6aaa2' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
select::-ms-expand{display:none}
.portal-switch-mini{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:14px;text-transform:none;letter-spacing:normal}
.portal-switch-mini svg{width:20px;height:20px}
@media(max-width:820px){.portal-switch-mini{width:40px;height:40px}}
.concept-account-head h1{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.greeting-avatar{width:44px;height:44px;font-size:16px;order:-1}
@media(max-width:520px){.greeting-avatar{width:36px;height:36px;font-size:13px}}
/* .account-mobile-nav is position:fixed at the bottom — sardor-footer-v141.css already
   has an 86px mobile margin-bottom meant to clear it, but a later, unguarded, equally
   specific ".account-main .sardor-footer{margin-bottom:20px}" rule in that same file
   silently wins on every screen size and undoes it. Same selector specificity, loaded
   after, in a real media query this time. */
@media(max-width:820px){.account-main .sardor-footer,.main-shell .sardor-footer{margin-bottom:84px}}
/* .address-code-chip crowds "Копировать" right up against the rounded corner on narrow
   phones — no mobile rule existed for it at all. Let it wrap to its own line instead. */
@media(max-width:480px){
  .address-code-chip{flex-wrap:wrap;row-gap:10px}
  .address-code-chip button{margin-left:0}
}
/* device-list / account-activity-list are now <details> — collapsed by default so a
   long device/session history doesn't dump onto the page uninvited. */
details.device-list>summary,details.account-activity-list>summary{cursor:pointer;list-style:none;margin-bottom:8px}
details.device-list>summary::-webkit-details-marker,details.account-activity-list>summary::-webkit-details-marker{display:none}
details.device-list>summary::after,details.account-activity-list>summary::after{content:'▾';margin-left:8px;color:var(--ab-muted)}
details.device-list[open]>summary::after,details.account-activity-list[open]>summary::after{content:'▴'}
.account-fab{display:none}
@media(max-width:820px){
  .account-fab{display:grid;place-items:center;position:fixed;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:41;width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,#f0b72c,#dc970f);color:#15140f;box-shadow:0 12px 28px rgba(217,151,22,.35)}
  .account-fab svg{width:24px;height:24px}
}
.account-empty>div,.account-empty>svg{width:34px;height:34px;margin:0 auto 10px;color:var(--ab-gold-dark,#c98906);stroke-width:1.5}
.account-empty>div{font-size:34px;line-height:1}
.track-swipe-row{display:flex;gap:8px;margin:14px 0 4px;padding-bottom:4px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.track-swipe-row::-webkit-scrollbar{display:none}
.track-swipe-chip{flex:0 0 auto;scroll-snap-align:start;display:grid;gap:6px;min-width:140px;padding:10px 12px;border:1px solid var(--ab-line);border-radius:14px;background:var(--ab-surface-2);color:inherit}
.track-swipe-chip strong{font-size:12px;font-weight:800}
.track-swipe-chip.active{border-color:#d7a51d;background:var(--ab-gold-soft)}
.club-level-progress{margin-top:16px;display:grid;gap:14px}
.club-progress-warning{margin:0;padding:10px 12px;border-radius:12px;background:#fff0ed;color:#a52222;font-size:12px}
:is(html[data-theme="dark"],html[data-theme-mode="DARK"]) .club-progress-warning{background:#3a1712;color:#ff8a80}
@media(prefers-color-scheme:dark){html[data-theme="system"] .club-progress-warning{background:#3a1712;color:#ff8a80}}
.club-progress-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.club-progress-heading h2{margin:0;font-size:16px}
.club-progress-heading strong{font-size:20px;color:var(--ab-gold-deep)}
.club-progress-bar{height:10px;border-radius:99px;background:var(--ab-surface-2);overflow:hidden}
.club-progress-bar>div{height:100%;border-radius:99px;background:linear-gradient(90deg,#f0b72c,#dc970f);transition:width .3s ease}
.club-progress-bar.mini{height:6px;margin:6px 0}
.club-progress-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* Все карточки (.account-panel, .track-card-v2, .concept-track-card, .concept-support-card)
   должны иметь одинаковые отступы на любой ширине экрана — раньше .track-card-v2 и
   .concept-track-card использовали свои значения (20/16px), чуть отличавшиеся от
   стандартных .account-panel (24/17px), из-за чего карточки визуально не совпадали по ширине. */
.track-card-v2,.concept-track-card{padding:24px}
@media(max-width:820px){.track-card-v2,.concept-track-card{padding:17px}}
.club-progress-item{display:grid;gap:2px}
.club-progress-item small{color:var(--ab-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.club-progress-item span{color:var(--ab-muted);font-size:11px}
.club-level-max{text-align:center}
.club-level-max p{margin:6px 0 0;color:var(--ab-muted)}
@media(max-width:640px){.club-progress-grid{grid-template-columns:1fr 1fr}}
/* city display-only selector on the addresses page — separate from the client's
   real registered branch, so styled as a plain secondary control, not a form field
   that implies editing account data. */
.address-city-form{margin-top:16px;padding-top:14px;border-top:1px solid var(--ab-line)}
.address-city-form label{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--ab-muted)}
.address-city-form label small{font-weight:500;font-size:11px}
.address-city-form select{margin-top:2px;padding:9px 36px 9px 12px;border-radius:12px;border:1px solid var(--ab-line);background-color:var(--ab-surface-2);color:var(--ab-ink,inherit);font-size:13px;font-weight:700}