/* NEMAZING ONLINE — финальная визуальная полировка */
:root {
  --nmz-bg: #f6f7fc;
  --nmz-surface: #ffffff;
  --nmz-surface-soft: #f9f8ff;
  --nmz-text: #191b2a;
  --nmz-muted: #72758a;
  --nmz-border: rgba(64, 53, 104, .12);
  --nmz-violet: #6b4eff;
  --nmz-violet-dark: #5237d9;
  --nmz-pink: #ed5278;
  --nmz-coral: #ff775f;
  --nmz-blue: #3987ff;
  --nmz-green: #21a77a;
  --nmz-shadow: 0 18px 55px rgba(49, 35, 103, .10);
  --nmz-shadow-soft: 0 10px 30px rgba(49, 35, 103, .07);
}

html { scroll-behavior: smooth; }
body {
  color: var(--nmz-text);
  background:
    radial-gradient(circle at 7% 4%, rgba(107, 78, 255, .10), transparent 28rem),
    radial-gradient(circle at 93% 14%, rgba(237, 82, 120, .08), transparent 26rem),
    var(--nmz-bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: linear-gradient(rgba(77, 66, 124, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(77, 66, 124, .025) 1px, transparent 1px);
  background-size: 34px 34px;
  z-index: -1;
}

.container { width: min(1240px, calc(100% - 40px)); }
.section { padding-block: clamp(52px, 7vw, 92px); }
.card {
  border: 1px solid var(--nmz-border);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--nmz-shadow-soft);
  border-radius: 24px;
}

.site-header {
  background: linear-gradient(110deg, #5a43e8 0%, #8052ef 44%, #e65380 100%) !important;
  border-bottom: 0 !important;
  box-shadow: 0 12px 35px rgba(63, 39, 141, .18);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: rgba(255,255,255,.18);
}
.header-inner { min-height: 76px; gap: 22px; }
.brand img { width: 190px; max-height: 48px; object-fit: contain; }
.nav { gap: 5px; }
.nav a {
  color: rgba(255,255,255,.82) !important;
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 700;
  transition: .2s ease;
}
.nav a:hover, .nav a.active {
  color: #fff !important;
  background: rgba(255,255,255,.13);
}
.account-trigger {
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
}
.account-trigger-copy strong, .account-trigger-copy small, .account-chevron { color: #fff !important; }
.account-trigger-copy small { opacity: .72; }
.account-trigger-avatar { background: rgba(255,255,255,.22) !important; color: #fff !important; }
.account-dropdown {
  border-radius: 20px !important;
  border: 1px solid var(--nmz-border) !important;
  box-shadow: var(--nmz-shadow) !important;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { background: #fff !important; }

.btn {
  border-radius: 14px;
  min-height: 46px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.btn-primary {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--nmz-violet), var(--nmz-pink)) !important;
  box-shadow: 0 12px 25px rgba(107, 78, 255, .22);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(107, 78, 255, .28); }
.btn-light {
  color: #443a70 !important;
  background: #fff !important;
  border: 1px solid var(--nmz-border) !important;
}
.btn-light:hover { background: #f5f2ff !important; border-color: rgba(107,78,255,.26) !important; }
.input, select.input, textarea.input {
  border-radius: 14px !important;
  border: 1px solid rgba(68,58,112,.16) !important;
  background: #fff !important;
  color: var(--nmz-text) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.input:focus, select.input:focus, textarea.input:focus {
  border-color: rgba(107,78,255,.65) !important;
  box-shadow: 0 0 0 4px rgba(107,78,255,.11) !important;
}
.eyebrow { color: var(--nmz-violet) !important; font-weight: 900; letter-spacing: .12em; }
.subheading { color: var(--nmz-text) !important; }
.red { color: var(--nmz-violet) !important; }

.page-hero, .account-hero {
  color: var(--nmz-text) !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.92), transparent 17rem),
    linear-gradient(135deg, #eeeaff 0%, #fff1f5 52%, #edf6ff 100%) !important;
  border-bottom: 1px solid var(--nmz-border);
}
.page-hero h1, .account-hero h1 { color: #211d38 !important; }
.page-hero p, .account-hero p { color: #66657a !important; }
.account-hero-user {
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(107,78,255,.16) !important;
  box-shadow: var(--nmz-shadow-soft);
}
.account-hero-avatar, .sidebar-avatar, .character-avatar {
  background: linear-gradient(135deg, var(--nmz-violet), var(--nmz-pink)) !important;
  color: #fff !important;
}

/* Кабинет */
.account-section { padding-top: 44px; }
.account-shell { grid-template-columns: 270px minmax(0, 1fr) !important; gap: 26px !important; align-items: start; }
.account-sidebar { position: sticky; top: 98px; padding: 20px !important; }
.sidebar-profile { padding: 4px 4px 18px !important; border-bottom: 1px solid var(--nmz-border); }
.account-nav { gap: 6px !important; margin-block: 16px !important; }
.account-nav-item {
  border-radius: 13px !important;
  color: #545267 !important;
  font-weight: 750;
}
.account-nav-item:hover { background: #f6f3ff !important; color: var(--nmz-violet) !important; }
.account-nav-item.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--nmz-violet), #8460ee) !important;
  box-shadow: 0 10px 22px rgba(107,78,255,.18);
}
.account-content { min-width: 0; }
.account-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
.account-summary-card { min-height: 132px; padding: 20px !important; overflow: hidden; position: relative; }
.account-summary-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -34px;
  bottom: -38px;
  border-radius: 50%;
  background: rgba(107,78,255,.08);
}
.account-summary-card:nth-child(2)::after { background: rgba(237,82,120,.09); }
.account-summary-card:nth-child(3)::after { background: rgba(57,135,255,.09); }
.account-summary-card:nth-child(4)::after { background: rgba(255,119,95,.10); }
.account-summary-card > span { color: var(--nmz-muted) !important; font-weight: 700; }
.account-summary-card > strong { color: #28213f !important; font-size: clamp(1.3rem, 2vw, 1.75rem) !important; }
.character-card { margin-top: 18px; padding: 23px !important; border: 0 !important; background: linear-gradient(110deg, #6550e8, #8958e7 55%, #e95a81) !important; color: #fff !important; }
.character-card h2, .character-card p, .character-status { color: #fff !important; }
.character-status { background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 12px; }
.online-dot { background: #8ff0c5 !important; box-shadow: 0 0 0 5px rgba(143,240,197,.16); }
.account-title-row { margin: 31px 0 14px !important; align-items: end; }
.account-title-row > p { color: var(--nmz-muted); margin: 0; max-width: 390px; text-align: right; }
.details-card { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px !important; gap: 0; }
.details-row { padding: 17px 18px !important; border: 0 !important; border-bottom: 1px solid var(--nmz-border) !important; }
.details-row:nth-last-child(-n+2) { border-bottom: 0 !important; }
.details-row span { color: var(--nmz-muted) !important; }
.details-row strong { color: var(--nmz-text) !important; text-align: right; overflow-wrap: anywhere; }

.game-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.game-profile-card { min-height: 118px; padding: 20px !important; display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; }
.game-profile-card::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; right: -48px; bottom: -58px; opacity: .16; background: currentColor; }
.game-profile-icon { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; font-weight: 900; font-size: 1.4rem; color: #fff; }
.game-profile-card small { display: block; color: var(--nmz-muted); font-weight: 750; margin-bottom: 5px; }
.game-profile-card strong { display: block; color: var(--nmz-text); font-size: 1.08rem; overflow-wrap: anywhere; }
.game-profile-house { color: var(--nmz-violet); }
.game-profile-house .game-profile-icon { background: linear-gradient(135deg, #6b4eff, #9979ff); }
.game-profile-family { color: var(--nmz-pink); }
.game-profile-family .game-profile-icon { background: linear-gradient(135deg, #e85078, #ff88a5); }
.game-profile-cars { color: var(--nmz-blue); }
.game-profile-cars .game-profile-icon { background: linear-gradient(135deg, #3987ff, #67b7ff); }
.game-profile-phone { color: var(--nmz-green); }
.game-profile-phone .game-profile-icon { background: linear-gradient(135deg, #20a477, #4ed5a6); }
.game-profile-action { display: inline-block; margin-top: 7px; color: var(--nmz-violet); font-weight: 800; font-size: .9rem; }
.account-purchases-card { margin-top: 18px; padding: 24px !important; }
.purchase-badge { background: #f0edff !important; color: #5640c8 !important; border: 1px solid rgba(107,78,255,.13); }
.exchange-panel, .audio-panel, .settings-panel { padding: clamp(22px, 3vw, 34px) !important; }
.exchange-rate-box { background: linear-gradient(135deg, #ede9ff, #fff1f6) !important; color: #372d64 !important; border: 1px solid rgba(107,78,255,.12); }
.exchange-balance-row > div { background: #fbfaff !important; border: 1px solid var(--nmz-border) !important; }
.exchange-result { background: linear-gradient(135deg, #5f49e6, #e4527b) !important; color: #fff !important; border-radius: 18px !important; }
.audio-track { border: 1px solid var(--nmz-border) !important; background: #fff !important; border-radius: 17px !important; }
.audio-track-icon { background: #efeaff !important; color: var(--nmz-violet) !important; }
.audio-delete { color: #d94668 !important; background: #fff0f3 !important; border-radius: 10px; }

/* Магазин */
.shop-section-nav { background: rgba(255,255,255,.88) !important; border: 1px solid var(--nmz-border) !important; box-shadow: var(--nmz-shadow-soft); border-radius: 18px !important; padding: 8px !important; }
.shop-section-nav a { border-radius: 12px !important; color: #605d73 !important; font-weight: 800; }
.shop-section-nav a:hover { background: #f0edff !important; color: var(--nmz-violet) !important; }
.shop-account-bar { padding: 22px 24px !important; background: linear-gradient(110deg, #fff 0%, #f7f3ff 62%, #fff1f5 100%) !important; }
.shop-grid { gap: 22px !important; }
.shop-product { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.shop-product:hover { transform: translateY(-4px); box-shadow: var(--nmz-shadow); }
.shop-product-art { background: linear-gradient(145deg, #eeeaff, #fff4f7) !important; }
.shop-product-copy { padding: 24px !important; }
.shop-category { color: var(--nmz-violet) !important; background: #f0edff !important; border-radius: 999px; padding: 6px 10px; font-size: .75rem; font-weight: 900; }
.service-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
.service-product { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: 1fr auto; align-items: start !important; gap: 17px !important; padding: 24px !important; overflow: hidden; position: relative; }
.service-product::after { content: ""; position: absolute; right: -45px; top: -45px; width: 140px; height: 140px; border-radius: 50%; background: rgba(107,78,255,.06); }
.service-product-icon { width: 58px !important; height: 58px !important; border-radius: 18px !important; color: #fff !important; background: linear-gradient(135deg, var(--nmz-violet), #9f76ff) !important; font-size: 1rem !important; letter-spacing: -.03em; }
.service-product-sim .service-product-icon { background: linear-gradient(135deg, #1ca679, #55d8aa) !important; }
.service-product-main { min-width: 0; }
.service-product-main h3 { margin: 10px 0 8px !important; }
.service-current { background: #f8f7fd !important; border: 1px solid var(--nmz-border); border-radius: 12px; padding: 10px 12px; color: var(--nmz-muted); }
.service-product-buy { grid-column: 1 / -1; display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--nmz-border); }
.service-product-buy > span { color: var(--nmz-muted); }
.service-product-buy > strong { color: var(--nmz-text); font-size: 1.2rem; }
.service-product-note { grid-column: 1 / -1; color: var(--nmz-green); font-weight: 700; }
.vip-grid { gap: 20px !important; }
.vip-card { border-radius: 26px !important; box-shadow: var(--nmz-shadow-soft) !important; transition: transform .2s ease, box-shadow .2s ease; }
.vip-card:hover { transform: translateY(-5px); box-shadow: var(--nmz-shadow) !important; }
.vip-card-standard { background: linear-gradient(160deg, #ffffff, #f1eeff) !important; color: #30284e !important; }
.vip-card-black { background: linear-gradient(160deg, #302b4c, #5d467c) !important; }
.vip-card-premium { background: linear-gradient(160deg, #fff8e6, #ffe8c7 55%, #fbd5dc) !important; color: #493318 !important; }
.vip-duration-picker button { border-radius: 12px !important; }
.vip-duration-picker button.active { background: var(--nmz-violet) !important; color: #fff !important; border-color: transparent !important; }
.vip-card-black .vip-duration-picker button.active { background: #fff !important; color: #352d52 !important; }
.vip-card-premium .vip-duration-picker button.active { background: #7f5624 !important; color: #fff !important; }
.shop-assurance article { border: 1px solid var(--nmz-border) !important; background: #fff !important; border-radius: 18px !important; }

/* SIM-карта в модальном окне */
.sim-card-preview {
  margin-bottom: 18px;
  min-height: 154px;
  padding: 24px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  color: #fff;
  background: linear-gradient(135deg, #6550e8 0%, #8c58e6 48%, #20aa80 125%);
  box-shadow: 0 18px 34px rgba(92,70,206,.22);
  overflow: hidden;
  position: relative;
}
.sim-card-preview::after { content: ""; position: absolute; width: 180px; height: 180px; border: 30px solid rgba(255,255,255,.08); border-radius: 50%; right: -80px; bottom: -95px; }
.sim-card-chip { width: 52px; height: 40px; border-radius: 9px; background: linear-gradient(135deg, #ffe296, #bc8f33); box-shadow: inset 0 0 0 1px rgba(88,59,15,.22); }
.sim-card-preview small { display: block; opacity: .7; font-weight: 800; letter-spacing: .12em; }
.sim-card-preview strong { display: block; margin-top: 5px; font-size: clamp(1.7rem, 4vw, 2.35rem); letter-spacing: .15em; }
.sim-card-preview b { align-self: start; font-size: .8rem; letter-spacing: .12em; }
.phone-number-input { font-size: 1.25rem !important; letter-spacing: .14em; font-weight: 850; }

.site-footer { background: linear-gradient(120deg, #5140c9, #774bdc 55%, #c94d7d) !important; color: rgba(255,255,255,.82) !important; }
.site-footer h4, .site-footer a, .footer-bottom { color: #fff !important; }
.site-footer p { color: rgba(255,255,255,.72) !important; }
.footer-bottom { border-color: rgba(255,255,255,.18) !important; }
.cookie { border: 1px solid var(--nmz-border) !important; background: rgba(255,255,255,.96) !important; box-shadow: var(--nmz-shadow) !important; }
.modal-card, .auth-dialog { border-radius: 26px !important; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 32px 90px rgba(31,24,67,.28) !important; }

@media (max-width: 1080px) {
  .account-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vip-grid { grid-template-columns: 1fr !important; max-width: 760px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .container { width: min(100% - 28px, 1240px); }
  .account-shell { grid-template-columns: 1fr !important; }
  .account-sidebar { position: static; }
  .account-nav { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: 1fr !important; }
  .details-card, .game-profile-grid { grid-template-columns: 1fr !important; }
  .details-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--nmz-border) !important; }
  .details-row:last-child { border-bottom: 0 !important; }
  .account-title-row > p { text-align: left; }
}

@media (max-width: 680px) {
  .container { width: min(100% - 20px, 1240px); }
  .header-inner { min-height: 68px; }
  .brand img { width: 156px; }
  .account-summary-grid { grid-template-columns: 1fr !important; }
  .account-summary-card { min-height: 112px; }
  .account-nav { grid-template-columns: 1fr; }
  .character-card { align-items: flex-start !important; gap: 18px !important; }
  .character-status { align-self: flex-start; }
  .account-title-row { align-items: flex-start !important; flex-direction: column; gap: 8px; }
  .game-profile-card { min-height: 104px; padding: 17px !important; }
  .service-product { grid-template-columns: 1fr !important; }
  .service-product-icon { width: 52px !important; height: 52px !important; }
  .service-product-buy { grid-template-columns: 1fr 1fr; }
  .service-product-buy .btn { grid-column: 1 / -1; width: 100%; }
  .sim-card-preview { grid-template-columns: auto 1fr; }
  .sim-card-preview b { display: none; }
}

@media (max-width: 900px) {
  .nav {
    background: linear-gradient(145deg, #5a43e8, #8c54e7 62%, #d9507c) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 24px 55px rgba(54,35,124,.28) !important;
  }
  .nav a { color: rgba(255,255,255,.88) !important; }
  .nav a:hover, .nav a.active { color: #fff !important; background: rgba(255,255,255,.14) !important; }
}