:root{
  --bg: #0b0f16;
  --bg-image: url("assets/backgrounds/default.jpg");
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.10);
  --text: #ffffff;
  --muted: rgba(255,255,255,.62);
  --muted2: rgba(255,255,255,.42);
  --gold: #f7c84b;
  --love: #ff4fa3;
  --ok: #2de08c;
  --danger: #ff4d4d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --tabbarH: 72px;
  --safeB: env(safe-area-inset-bottom, 0px);
  --safeT: env(safe-area-inset-top, 0px);
  --accent: #6ae3ff;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg-image) center/cover no-repeat, radial-gradient(1000px 700px at 50% -10%, #162033 0%, var(--bg) 60%);
  color: var(--text);
  overflow:hidden;
}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
}

.topbar{
  padding: calc(20% + var(--safeT)) 14px 10px;
  background: transparent;
  position: relative;
}



.balances{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.pill{
  flex:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  min-width:0;
}

.pill__label{ font-size:12px; color: var(--muted); letter-spacing:.2px;  }
.pill__value{ font-variant-numeric: tabular-nums; font-weight:700; }

.satiety{ margin-top:10px; padding:12px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.8); border:1px solid rgba(255,255,255,.08); }
.satiety__row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.satiety__label{ font-size:12px; color: var(--muted); }
.satiety__meta{ font-size:12px; color: var(--muted2); font-variant-numeric: tabular-nums; }

.checkin{ margin-top:10px; padding:12px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.8); border:1px solid rgba(255,255,255,.08); }
.checkin__label{ font-size:12px; color: var(--muted); white-space: nowrap; display: inline-block; margin-right: 8px; }
.checkin__value{ font-size:12px; color: var(--muted2); font-variant-numeric: tabular-nums; display: inline-block; }
.checkin__btn{ display:none; margin-top:8px; width:100%; border:0; border-radius: 12px; padding: 8px 12px; background: linear-gradient(180deg, rgba(106,227,255,.24), rgba(255,79,163,.18)); color: var(--text); font-weight:700; font-size:14px; transition: transform .08s ease, opacity .12s ease; }
.checkin__btn:active{ transform: translateY(1px); }
.checkin__btn--visible{ display:block; }

.bar{ height:10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden; }
.bar__fill{ height:100%; width:0%; background: linear-gradient(90deg, #7cffd1 0%, #2de08c 60%, #f7c84b 100%); border-radius:999px; transition: width .25s ease; }

.screen{
  flex:1;
  position:relative;
  padding: 0 14px calc(var(--tabbarH) + var(--safeB) + 14px);
  overflow:hidden;
  background: transparent;
}

.view{
  position:absolute;
  inset:0;
  padding: 0 14px calc(var(--tabbarH) + var(--safeB) + 14px);
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.view--active{ opacity:1; transform: translateY(0); pointer-events:auto; }

.home{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 2px;
}

.petStage{
  width:min(350px, 90vw);
  height:min(350px, 90vw);
  display:grid;
  place-items:center;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.45));
  padding-top: 45%;
}

.pet{
  width: 280px;
  height: 280px;
  position:relative;
  transform-origin: 50% 70%;
}

.pet-image{
  width: 280px;
  height: 310px;
  display: block;
  transform-origin: 50% 70%;
}

@keyframes sway{
  0%,100%{ transform: rotate(-2deg) translateY(0px); }
  50%{ transform: rotate(2deg) translateY(-2px); }
}

.pet__shadow{
  position:absolute;
  left: 50%;
  bottom: 19px;
  transform: translateX(-50%);
  width: 200px;
  height: 40px;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0));
  filter: blur(1px);
}

.pet__egg{
  position:absolute;
  inset: 37px 45px 45px;
  border-radius: 46% 46% 50% 50% / 52% 52% 48% 48%;
  background: radial-gradient(160px 213px at 35% 25%, rgba(255,255,255,.35) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,.07) 70%, rgba(255,255,255,.04) 100%),
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 100%);
  border: 1px solid rgba(255,255,255,.14);
}

.pet__pattern{
  position:absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 86%;
  height: 46%;
  background: repeating-linear-gradient(135deg, rgba(106,227,255,.20) 0 10px, rgba(255,79,163,.16) 10px 20px);
  border-radius: 999px;
  filter: blur(.2px);
  opacity:.65;
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}

.pet__face{
  position:absolute;
  left:50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 120px;
}

.pet__eyes{
  display:flex;
  justify-content:space-between;
  padding: 0 24px;
  margin-top: 24px;
}

.pet__eye{
  width: 18px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
  animation: blink 4.2s infinite;
}

.pet__eye::after{
  content:"";
  position:absolute;
  left: 4px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
}

@keyframes blink{
  0%, 92%, 100%{ transform: scaleY(1); }
  95%{ transform: scaleY(.1); }
}

.pet__mouth{
  width: 42px;
  height: 21px;
  border-bottom: 4px solid rgba(255,255,255,.88);
  border-radius: 0 0 999px 999px;
  margin: 24px auto 0;
  opacity: .9;
}

.pet__arm{
  position:absolute;
  width: 53px;
  height: 24px;
  top: 160px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  transform-origin: 80% 50%;
  filter: blur(.0px);
}
.pet__arm--l{ left: 24px; transform: rotate(-10deg); animation: waveL 2.4s ease-in-out infinite; }
.pet__arm--r{ right: 24px; transform: rotate(10deg); transform-origin: 20% 50%; animation: waveR 2.4s ease-in-out infinite; }
@keyframes waveL{ 0%,100%{ transform: rotate(-14deg); } 50%{ transform: rotate(-6deg); } }
@keyframes waveR{ 0%,100%{ transform: rotate(14deg); } 50%{ transform: rotate(6deg); } }

.pet__leg{
  position:absolute;
  width: 35px;
  height: 24px;
  bottom: 29px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
}
.pet__leg--l{ left: 96px; transform: rotate(6deg); }
.pet__leg--r{ right: 96px; transform: rotate(-6deg); }

.cta{
  width: min(360px, 72vw);
  border: 0;
  border-radius: 18px;
  padding: 16px 16px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--text);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  position:relative;
  overflow:hidden;
  user-select:none;
  transition: transform .08s ease, filter .12s ease, opacity .12s ease;
  animation: pulse 1.6s ease-in-out infinite;
  margin-top: 35%;
  justify-content: center;
  min-height: 74px;
  margin-bottom: 12px;
}

.cta::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: rgba(0, 0, 0, 0.8);
  transform: translateX(-10%);
  opacity:.55;
}

.cta:active{ transform: translateY(1px) scale(.99); }
.cta[disabled]{ opacity:.7; filter: grayscale(.2); animation: none; }

@keyframes pulse{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

.cta__title{ font-weight:800; font-size:20px; letter-spacing:.2px; }
.cta__sub{  font-size:12px; color: var(--muted); }

.hint{ margin-top:0%; min-height: 22px; font-size:13px; color: var(--muted2); text-align:center; background: rgba(0, 0, 0, 0.8); border-radius: 18px; padding: 5px 13px;}

.sheet{
  padding-top: 10px;
}

.sheet__title{ font-weight:800; font-size:18px; letter-spacing:.2px; margin: 10px 0 12px; }
.sheet__titleRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.list{ display:flex; flex-direction:column; gap:10px; }


#walletList,
#upgradeList,
#shopList{
  max-height: 44vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

#upgradeList{
  max-height: 36vh;   /* апгрейды ниже */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

/* Scrollbar styling for upgrade lists */
#walletList::-webkit-scrollbar,
#upgradeList::-webkit-scrollbar,
#shopList::-webkit-scrollbar{
  width: 6px;
}

#walletList::-webkit-scrollbar-track,
#upgradeList::-webkit-scrollbar-track,
#shopList::-webkit-scrollbar-track{
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

#walletList::-webkit-scrollbar-thumb,
#upgradeList::-webkit-scrollbar-thumb,
#shopList::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

#walletList::-webkit-scrollbar-thumb:hover,
#upgradeList::-webkit-scrollbar-thumb:hover,
#shopList::-webkit-scrollbar-thumb:hover{
  background: rgba(255, 255, 255, 0.3);
}

/* Firefox scrollbar styling */
#walletList,
#upgradeList,
#shopList{
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.card{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255,255,255,.08);
}

.card__title{ font-weight:700; }
.card__meta{ margin-top:4px; font-size:12px; color: var(--muted); }
.card__right{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; justify-content:center; }

.card__price{
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  padding: 6px 10px;
  background: rgba(247, 200, 75, 0.1);
  border: 1px solid rgba(247, 200, 75, 0.3);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.price{ font-size:12px; color: var(--muted); }
.price b{ color: var(--text); font-variant-numeric: tabular-nums; }

.btn{
  border:0;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--text);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  transition: transform .08s ease, opacity .12s ease;
  font-weight:700;
}
.btn:active{ transform: translateY(1px); }
.btn[disabled]{ opacity:.45; box-shadow:none; }

.btn--primary{ background: linear-gradient(180deg, rgba(106,227,255,.6), rgba(63, 63, 63, 0.8)); }

.segmented{
  display:flex;
  gap:10px;
  padding: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.8);
}

.segmented__btn{
  flex:1;
  border:0;
  padding: 10px 12px;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-weight:800;
  cursor: pointer;
}
.segmented__btn:hover{ background: rgba(255,255,255,.08); }
.segmented__btn:active{ transform: translateY(1px); }
.segmented__btn--active{ background: rgba(255,255,255,.10); color: var(--text); }

.shop-upgrade-tabs{ margin-top: 8px; }

.tabbar{
  height: calc(var(--tabbarH) + var(--safeB));
  padding: 10px 10px calc(10px + var(--safeB));
  display:flex;
  gap:10px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.10);
}

.tab{
  flex:1;
  border:0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  border-radius: 16px;
  font-weight:800;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tab--active{ background: rgba(255,255,255,.12); color: var(--text); }
.tab__icon{ width: 20px; height: 20px; flex-shrink: 0; }
.tab__label{ font-size:12px; letter-spacing:.2px; }

.toast{
  position:fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--tabbarH) + var(--safeB) + 12px);
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.68);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}
.toast--show{ opacity:1; transform: translateY(0); }
.toast--danger{ border-color: rgba(255,77,77,.35); }
.toast--ok{ border-color: rgba(45,224,140,.35); }

.stats{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom: 12px; }
.stat{
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
}
.stat__label{ font-size:12px; color: var(--muted); }
.stat__value{ margin-top:6px; font-weight:900; font-size:16px; font-variant-numeric: tabular-nums; }

.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.mono{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.tag{
  font-size:11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--muted);
  border:1px solid rgba(255,255,255,.08);
}
.tag--owned{ color: rgba(45,224,140,.9); border-color: rgba(45,224,140,.25); background: rgba(45,224,140,.10); }

.linkBtn{
  border:0;
  background: transparent;
  color: rgba(106,227,255,.9);
  font-weight:800;
  padding: 10px 10px;
  border-radius: 12px;
}
.linkBtn:active{ background: rgba(255,255,255,.06); }

.replenish{
  margin-top: 20px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  grid-column: 1 / -1;
}

.replenish__title{
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 12px;
}

.replenish__form{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.replenish__form label{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--muted);
}

.replenish__form select,
.replenish__form input{
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-size: 14px;
}

.replenish__form select:focus,
.replenish__form input:focus{
  outline: none;
  border-color: var(--accent);
}

#replenishConversion{
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin: 8px 0;
}

#replenishStatus{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted2);
  text-align: center;
}

.replenish-tabs{
  margin-bottom: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 370px){
  .pet{ width: 250px; height:250px; }
  .pet__egg{ inset: 33px 40px 40px; }
}

/* Heart Animation Canvas */
.heart-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  opacity: 1;
}

/* Friends Tab Styles */
.referral-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.referral-link__input-wrapper {
  display: flex;
  gap: 8px;
}

.referral-link__input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.referral-link__input:focus {
  outline: none;
  border-color: var(--accent);
}

.referral-link__copy {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease;
}

.referral-link__copy:active {
  background: rgba(255, 255, 255, 0.16);
}

.referral-link__share {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
}

/* Milestones */
.milestones {
  margin-bottom: 16px;
}

.milestones__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.milestone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.milestone__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  flex-shrink: 0;
}

.milestone__icon svg {
  width: 22px;
  height: 22px;
  color: var(--muted);
}

.milestone--completed .milestone__icon {
  background: rgba(45, 224, 140, 0.15);
}

.milestone--completed .milestone__icon svg {
  color: var(--ok);
}

.milestone__content {
  flex: 1;
}

.milestone__title {
  font-weight: 700;
  font-size: 14px;
}

.milestone__progress {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.milestone__bonus {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
}

.milestone__bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}

.milestone__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Friends List */
.friends-list {
  margin-top: 4px;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.friend-item__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.friend-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.friend-item__content {
  flex: 1;
  min-width: 0;
}

.friend-item__name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-item__status {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.friend-item__status--active {
  color: var(--ok);
}

.friend-item__bonus {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  text-align: right;
}

.card--empty {
  text-align: center;
  padding: 24px 16px;
}

.card--empty .card__title {
  color: var(--muted);
}

.card--empty .card__meta {
  margin-top: 4px;
}

/* Language Button Styles */
.lang-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
  flex-shrink: 0;
}

.lang-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.1);
}

.lang-btn__icon {
  font-size: 20px;
}

/* Language Modal Styles */
.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lang-modal--active {
  display: flex;
}

.lang-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.lang-modal__content {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: rgba(16, 20, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: langModalIn 0.2s ease;
}

@keyframes langModalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.lang-modal__title {
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}

.lang-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  font-size: 15px;
  text-align: left;
}

.lang-option:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.lang-option:active {
  transform: scale(0.98);
}

.lang-option--active {
  background: rgba(106, 227, 255, 0.1);
  border-color: rgba(106, 227, 255, 0.3);
}

.lang-option__flag {
  font-size: 22px;
  line-height: 1;
}

.lang-option__name {
  flex: 1;
  font-weight: 600;
}

.lang-option__check {
  color: var(--accent);
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.lang-option--active .lang-option__check {
  opacity: 1;
}