.card{
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.82));
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 18px 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 64px rgba(42,63,39,.12);
  border-color: rgba(47,122,73,.18);
}
.stepCard{ margin: 20px 0; }
.stepCard .cardHeaderRow{ margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(39,74,50,.09); }

.cardHeaderRow{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.stepTitle{ display:flex; align-items:flex-start; gap: 12px; }
.stepNo{
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 14px;
  background: linear-gradient(180deg, rgba(233,245,224,.92), rgba(219,237,206,.88));
  border: 1px solid rgba(47,122,73,.14);
  color: #1f5130;
  flex: 0 0 auto;
  box-shadow: 0 10px 24px rgba(47,122,73,.08);
}
.stepNo.done{
  background: linear-gradient(180deg, rgba(182,235,184,.95), rgba(123,213,139,.92));
  border-color: rgba(41,160,84,.34);
  box-shadow: 0 12px 26px rgba(41,160,84,.18);
  color:#0f301b;
}
.stepNo.done::after{
  content:"✓";
  position:absolute;
  right:-7px;
  top:-7px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.96);
  background: linear-gradient(135deg, #2e9d59, #63c06a);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 20px rgba(45,143,82,.20);
}
.stepH3{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #173322;
  line-height: 1.08;
}
.stepHint{ margin-top: 6px; color: var(--muted); font-size: 13.5px; }

.row{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.actionsRow{ align-items: center; gap: 10px; }
.muted{ color: var(--muted); }
.selectedHint{ margin-top: 10px; color: var(--muted); font-size: 13px; }

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(245,247,241,.94);
  border: 1px solid rgba(39,74,50,.08);
  color: rgba(20,37,25,.82);
  font-size: 12.5px;
  box-shadow: var(--shadowSoft);
}
.pill.net{
  background: linear-gradient(180deg, rgba(234,245,222,.95), rgba(223,239,208,.90));
  border-color: rgba(47,122,73,.14);
}
.dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(34,62,42,.26); box-shadow: 0 0 0 3px rgba(34,62,42,.05); }

input, select{
  border-radius: 16px;
  border: 1px solid rgba(39,74,50,.10);
  background: rgba(255,255,255,.94);
  color: rgba(18,34,22,.92);
  padding: 12px 14px;
  outline: none;
  min-height: 48px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
input::placeholder{ color: rgba(31,50,35,.38); }
select:disabled{ color: rgba(18,34,22,.90); -webkit-text-fill-color: rgba(18,34,22,.90); opacity: 1; background: rgba(255,255,255,.90); }
input:focus, select:focus{ border-color: rgba(47,122,73,.30); box-shadow: 0 0 0 4px rgba(106,179,81,.12); }

button{
  border: 1px solid rgba(180,135,23,.22);
  background: linear-gradient(180deg, #f3ca58, #e9b739);
  color: #183321;
  padding: 12px 16px;
  min-height: 48px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: -.01em;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: 0 14px 28px rgba(214,174,73,.22);
}
button:hover{ filter: brightness(1.03); transform: translateY(-1px); }
button:active{ filter: brightness(.99); transform:none; }
button:disabled{
  opacity: 1;
  cursor: not-allowed;
  filter: none;
  transform:none;
  border-color: rgba(39,74,50,.08);
  background: linear-gradient(180deg, rgba(249,250,247,.96), rgba(240,243,236,.94));
  color: rgba(56,74,59,.52);
  box-shadow: 0 8px 18px rgba(42,63,39,.04);
}

.btnAlt{
  border-color: rgba(39,74,50,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,246,240,.92));
  color: rgba(20,37,25,.88);
  box-shadow: 0 12px 22px rgba(42,63,39,.06);
}
.btnAlt:hover{ background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,236,.95)); }

.langSwitch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:999px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(39,74,50,.08);
  box-shadow: var(--shadowSoft);
}
.langBtn{
  min-height:auto;
  padding: 12px 18px;
  min-width: 72px;
  border-radius:999px;
  border:1px solid transparent;
  background: transparent;
  box-shadow:none;
  color:#28462f;
  font-weight:900;
}
.langBtn.active{
  background: linear-gradient(180deg, #4c8e5f, #2d6e44);
  color:#fff;
  box-shadow: 0 12px 24px rgba(45,110,68,.22);
}
.langBtn:hover{ transform:none; }

.heroPromo{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 26px;
  padding: 28px;
  margin: 0 0 24px;
  border-radius: 32px;
  background:
    radial-gradient(440px 240px at 0% 0%, rgba(184,220,145,.22), transparent 65%),
    radial-gradient(440px 240px at 100% 0%, rgba(244,211,104,.20), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(250,250,244,.84));
  border: 1px solid rgba(39,74,50,.09);
  box-shadow: var(--shadow);
}
.heroPromo::before{
  content:"";
  position:absolute;
  inset:auto auto -60px -40px;
  width:220px;
  height:220px;
  border-radius:999px;
  background:rgba(115,177,79,.10);
  filter: blur(20px);
}
.heroPromoCopy{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; }
.heroBadge{
  display:inline-flex;
  align-self:flex-start;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(233,245,224,.92);
  color:#295538;
  border:1px solid rgba(47,122,73,.12);
  font-weight:800;
  font-size:13px;
  box-shadow: var(--shadowSoft);
}
.heroHeadline{
  margin: 18px 0 0;
  font-size: clamp(30px, 3.7vw, 52px);
  line-height: 1.06;
  letter-spacing: -.045em;
  color:#132919;
  max-width: 11.5ch;
}
.heroText{
  margin: 16px 0 0;
  max-width: 640px;
  color:#5a665d;
  font-size: 16px;
  line-height: 1.65;
}
.heroActions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 24px;
}
.heroBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  font-weight: 900;
  text-decoration:none;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.heroBtnPrimary{
  background: linear-gradient(180deg, #f1c54e, #e7b12f);
  color:#17321f;
  box-shadow: 0 16px 28px rgba(223,176,62,.24);
}
.heroBtnGhost{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(39,74,50,.10);
  color:#17321f;
  box-shadow: var(--shadowSoft);
}
.heroBtn:hover{ transform: translateY(-1px); }

.heroMetrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 26px;
}
.heroMetricCard{
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(39,74,50,.08);
  box-shadow: var(--shadowSoft);
}
.heroMetricTitle{
  font-size: 15px;
  font-weight: 900;
  color:#21422a;
}
.heroMetricText{
  margin-top: 6px;
  color:#647168;
  font-size: 13px;
  line-height:1.45;
}
.heroPromoVisual{
  position:relative;
  min-height: 360px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,243,191,.34), transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(157,225,137,.22), transparent 22%),
    linear-gradient(160deg, #1d6b3c 0%, #2d8449 28%, #6faa53 52%, #f2cf6a 100%);
  border:1px solid rgba(39,74,50,.12);
  box-shadow: 0 24px 50px rgba(53,92,44,.18);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.heroVisualRing{
  position:absolute;
  width: 420px;
  height: 420px;
  right: -40px;
  top: -90px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,239,181,.32), rgba(255,239,181,.08) 55%, transparent 70%);
  filter: blur(10px);
}
.heroPromoVisual::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:48%;
  background: linear-gradient(180deg, rgba(18,53,31,0), rgba(18,53,31,.16));
}
.heroPromoVisual img{
  position:relative;
  z-index:1;
  width: min(92%, 500px);
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 26px 44px rgba(16,44,25,.22));
  transform: translateY(16px);
}

.rewardLine{ line-height: 1.7; }

.extraPanel{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(39,74,50,.08);
}
.extraPanelHeader{ display:flex; align-items:center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.extraPanelTitle{ font-weight: 900; font-size: 15px; color: #1a3a23; }
.extraGrid{ margin-top: 12px; display:grid; grid-template-columns: 1fr; gap: 12px; }
.extraBlock{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(39,74,50,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(247,249,243,.72));
  box-shadow: var(--shadowSoft);
}
.extraBlockTitle{ font-weight: 900; font-size: 13px; margin-bottom: 8px; color: #264431; }

.subSection{
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(39,74,50,.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(246,249,240,.92), rgba(241,246,235,.88));
}
.subTitle{ font-weight: 900; font-size: 14px; margin-bottom: 8px; color: #1c3925; }
.countdownBig{ font-weight: 900; font-size: 16px; letter-spacing: .2px; }
.countdownGood{ color: #16703d !important; }
.countdownBad{ color: #b44b2a !important; }
.countdownSub{ font-size: 12.5px; color: var(--muted); }

.poolRowSelected td{ background: rgba(232,243,220,.88); }
.poolRowSelected:hover td{ background: rgba(225,239,209,.95); }
.poolRowSelected td:first-child{ box-shadow: inset 3px 0 0 rgba(47,122,73,.45); }

table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(39,74,50,.08);
  background: rgba(255,255,255,.72);
}
thead th{
  text-align: left;
  font-size: 12px;
  color: rgba(30,56,36,.66);
  background: rgba(239,244,232,.95);
  padding: 12px 10px;
  border-bottom: 1px solid rgba(39,74,50,.07);
}
tbody td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(39,74,50,.05);
  color: rgba(19,34,22,.86);
  font-size: 13px;
}
tbody tr:hover td{ background: rgba(244,247,239,.90); }

#depositApproveUi{ white-space: nowrap; display: inline-block; }
.tipWrap{ position: relative; display: inline-flex; align-items: center; }
.tipWrap::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  transform: translateY(4px);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  width: min(380px, calc(100vw - 32px));
  max-width: min(380px, calc(100vw - 32px));
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18, 20, 24, .92);
  color: rgba(255,255,255,.94);
  font-size: 13px;
  line-height: 1.25;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  transition: opacity .14s ease, transform .14s ease;
}
.tipWrap::before{
  content: "";
  position: absolute;
  left: 26px;
  bottom: calc(100% + 4px);
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  background: rgba(18, 20, 24, .92);
  border-left: 1px solid rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
  transition: opacity .14s ease;
}
.tipWrap:hover::after,
.tipWrap:hover::before,
.tipWrap:focus-within::after,
.tipWrap:focus-within::before{ opacity: 1; transform: translateY(-2px); }

@media (max-width: 1024px){
  .heroPromo{ grid-template-columns: 1fr; padding:22px; gap:20px; }
  .heroHeadline{ max-width: 14ch; }
  .heroPromoVisual{ min-height: 300px; }
}

@media (max-width: 760px){
  .card{ border-radius: 22px; padding: 16px; }
  .stepCard{ margin:16px 0; }
  .stepH3{ font-size:18px; }
  .heroTop{ flex-direction:column; align-items:flex-start; }
  .langSwitch{ margin-left:auto; }
  .heroPromo{ border-radius:24px; }
  .heroHeadline{ font-size: clamp(28px, 9vw, 42px); max-width:none; }
  .heroText{ font-size:15px; }
  .heroMetrics{ grid-template-columns: 1fr; }
  .heroPromoVisual{ min-height: 260px; }
  .heroPromoVisual img{ width:min(94%, 380px); }
  .row{ gap:8px; }
  button, input, select{ width: 100%; }
  .actionsRow button{ width:auto; flex:1 1 200px; }
}

@media (max-width: 520px){
  .heroBrand{ align-items:flex-start; }
  .hero h1{ font-size: 34px; }
  .subtitle{ font-size:14px; }
  .langSwitch{ width:100%; justify-content:space-between; }
  .langBtn{ flex:1 1 0; }
  .heroActions{ flex-direction:column; }
  .heroBtn{ width:100%; }
  .tipWrap::after{ width: calc(100vw - 24px); }
}


/* Variant A2: wide visual hero without heavy text */
.heroPromoWide{
  position:relative;
  overflow:hidden;
  min-height:420px;
  padding:28px;
  display:flex;
  align-items:stretch;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(249,250,242,.84));
}
.heroPromoBg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(248,250,243,.96) 0%, rgba(248,250,243,.90) 30%, rgba(248,250,243,.42) 52%, rgba(248,250,243,.10) 64%, rgba(248,250,243,0) 76%),
    radial-gradient(480px 320px at 18% 20%, rgba(181,221,141,.22), transparent 60%),
    radial-gradient(420px 260px at 96% 12%, rgba(245,210,93,.18), transparent 62%),
    url('../assets/hero-pot-clean.png') right center / auto 116% no-repeat;
}
.heroPromoOverlay{
  position:relative;
  z-index:1;
  width:min(620px, 56%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:18px;
}
.heroMiniBadge{
  align-self:flex-start;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(236,245,229,.94);
  color:#295538;
  border:1px solid rgba(47,122,73,.12);
  font-weight:800;
  font-size:13px;
  box-shadow:var(--shadowSoft);
}
.heroActionsCompact{ margin-top:auto; }
.heroMetricsCompact{
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top:0;
}
.heroMetricsCompact .heroMetricCard{
  padding:14px 16px;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
}
.heroMetricsCompact .heroMetricTitle{
  font-size:15px;
}

@media (max-width: 1100px){
  .heroPromoWide{ min-height:380px; }
  .heroPromoBg{ background-size:auto 108%; }
  .heroPromoOverlay{ width:min(560px, 62%); }
}

@media (max-width: 900px){
  .heroPromoWide{
    min-height:340px;
    padding:18px;
  }
  .heroPromoBg{
    background:
      linear-gradient(180deg, rgba(248,250,243,.56) 0%, rgba(248,250,243,.22) 36%, rgba(248,250,243,.08) 100%),
      radial-gradient(380px 220px at 18% 20%, rgba(181,221,141,.18), transparent 60%),
      url('../assets/hero-pot-clean.png') center center / cover no-repeat;
  }
  .heroPromoOverlay{
    width:100%;
    justify-content:flex-end;
  }
  .heroMetricsCompact{ grid-template-columns:1fr; }
}


/* A3 full-image hero */
.heroPromoWide{
  min-height: 360px;
  display:block;
  padding:0;
  overflow:hidden;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.84));
}
.heroPromoBg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 32%, rgba(255,255,255,.00) 58%),
    url('../assets/hero-pot-clean.png');
  background-size: cover;
  background-position: center center;
  background-repeat:no-repeat;
}
.heroPromoOverlaySimple{
  position:absolute;
  inset:auto auto 22px 22px;
  width:auto;
  padding:0;
  display:block;
  background: none;
  border:0;
  box-shadow:none;
}
.heroActionsSingle{ margin-top:0; }
.heroActionsSingle .heroBtn{
  min-width: 180px;
  min-height: 54px;
  border-radius: 18px;
}
.heroMiniBadge,
.heroMetricsCompact,
.heroPromoCopy,
.heroBadge,
.heroHeadline,
.heroText,
.heroMetricCard,
.heroMetricTitle,
.heroMetricText,
.heroBtnGhost{
  display:none !important;
}
@media (max-width: 900px){
  .heroPromoWide{ min-height: 250px; }
  .heroPromoBg{ background-position: center center; }
  .heroPromoOverlaySimple{ left:16px; bottom:16px; }
  .heroActionsSingle .heroBtn{ min-width: 160px; min-height: 50px; }
}


/* hero links cluster */
.heroLinksCluster{
  position:absolute;
  left:22px;
  right:auto;
  bottom:22px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:min(760px, calc(100% - 44px));
}
.heroLinkRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.heroLinkPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 22px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(39,74,50,.10);
  box-shadow:0 14px 34px rgba(32,51,37,.12);
  text-decoration:none;
  color:#17321f;
  font-weight:900;
  font-size:15px;
  letter-spacing:-.01em;
  backdrop-filter: blur(10px);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.heroLinkPill:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(32,51,37,.14);
  background:rgba(255,255,255,.96);
}
.heroAuditCard{
  display:flex;
  align-items:center;
  gap:14px;
  align-self:flex-start;
  min-width:300px;
  max-width:360px;
  padding:12px 16px 12px 12px;
  border-radius:22px;
  text-decoration:none;
  background:linear-gradient(135deg, rgba(255,247,221,.96), rgba(245,226,167,.94));
  border:1px solid rgba(227,186,57,.28);
  box-shadow:0 18px 42px rgba(201,166,65,.20);
}
.heroAuditCard img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(37,51,41,.12);
  flex:0 0 auto;
}
.heroAuditText{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.heroAuditTitle{
  color:#17321f;
  font-size:20px;
  font-weight:900;
  letter-spacing:-.02em;
}
.heroAuditSub{
  color:#5c685e;
  font-size:13px;
  font-weight:700;
}
@media (max-width: 900px){
  .heroLinksCluster{ left:16px; right:16px; bottom:16px; max-width:none; }
  .heroLinkRow{ gap:10px; }
  .heroLinkPill{ min-height:48px; padding:0 18px; font-size:14px; }
  .heroAuditCard{ min-width:0; max-width:none; width:100%; }
}
@media (max-width: 620px){
  .heroLinkRow{ flex-direction:column; }
  .heroLinkPill{ width:100%; justify-content:flex-start; }
}