/* botB: 390px mobile parity with https://fna.pro (measured via getComputedStyle). Mobile-only; desktop untouched. */
@media (max-width: 560px) {
  /* Hero: official section padding 76px 28px; eyebrow 12px/normal */
  .hero { padding-top: 76px !important; padding-left: 28px !important; padding-right: 28px !important; }
  .hero .eyebrow { font-size: 12px !important; line-height: normal !important; letter-spacing: 2.16px !important; }
  .hero h1 { margin: 22px 0 24px !important; }
  /* Countdown: official 334x140, padding 16px 18px, margin-top 26px */
  .hero .countdown { margin-top: 26px !important; padding: 16px 18px !important; gap: 10px !important; }
  .hero .countdown .clock { gap: 8px !important; }
  .hero .countdown .clock > div { padding: 10px 6px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; border-radius: 10px !important; }
  .hero .countdown .clock strong { font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: 20px !important; font-weight: 600 !important; line-height: 22px !important; }
  .hero .countdown .clock small { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; line-height: normal !important; }
  /* CTA row: official gap countdown->CTA 34px, CTA->link 26px, CTA height 49 */
  .hero .hero-actions { margin-top: 34px !important; gap: 26px !important; }
  .hero .hero-actions a.claim, .hero a.claim { line-height: normal !important; }
  /* Hamburger dropdown items: official 35px pitch, no gap */
  #mobileNav { gap: 0 !important; row-gap: 0 !important; }
  #mobileNav a { margin-top: 0 !important; margin-bottom: 0 !important; }
}
/* Hamburger + flag-only language button: match official computed font/padding (box sizes already equal: 38x38 / 64x40). */
@media (max-width: 560px) {
  button[aria-controls="mobileNav"] { font-size: 16px !important; font-weight: 400 !important; padding: 1px 6px !important; font-family: Inter, "Inter Fallback", sans-serif !important; }
  button[aria-label="Choose language"] { font-size: 16px !important; font-weight: 400 !important; font-family: Inter, "Inter Fallback", sans-serif !important; }
  button[aria-label="Choose language"] img { background-color: transparent !important; }
}
/* /passport 页头：官方 eyebrow 28,121 12px/800/ls2.16；h1 34px/600/normal/-0.34px；p 15px/normal */
@media (max-width: 560px) {
  *:has(> .office-intro) { padding-left: 28px !important; padding-right: 28px !important; }
  .office-intro { margin-top: 21px !important; }
  .office-intro .eyebrow { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 2.16px !important; }
  .office-intro h1 { font-family: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Sans JP","Noto Sans JP Fallback",serif !important; font-size: 34px !important; line-height: normal !important; letter-spacing: -0.34px !important; }
  .office-intro h1 { color: rgb(14,18,16) !important; }
  .office-intro p:not(.eyebrow) { color: rgb(68,78,73) !important; font-size: 15px !important; line-height: normal !important; }
}

/* ===== Round 2 ===== */
/* 首页护照卡：官方是 CSS 卡片 320×443（不是图片）。用 .passport-motion + 伪元素复刻，图片隐藏。 */
@keyframes botb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 560px) {
  .hero { padding-bottom: 72px !important; }
  .hero .hero-visual { display: flex !important; justify-content: center !important; margin-top: 18px !important; min-height: 0 !important; }
  .hero .passport-motion {
    position: relative !important; box-sizing: border-box !important;
    width: 320px !important; max-width: 320px !important; height: 442.656px !important; margin: 0 auto !important; padding: 0 !important;
    border-radius: 16px !important; overflow: hidden !important;
    background: url(/assets/logo-mark.png) center 56px / 92px 92px no-repeat, linear-gradient(168deg, rgb(23,28,24), rgb(10,13,11) 70%) !important;
    box-shadow: rgba(6,12,9,.38) 0 30px 60px 0, rgba(6,12,9,.28) 0 4px 14px 0 !important;
    animation: botb-float 7s ease-in-out 1.2s infinite !important; transform: none;
  }
  .hero .passport-motion .passport-reference { display: none !important; }
  /* 内边框 inset 9px */
  .hero .passport-motion::after { content: "" !important; position: absolute !important; inset: 9px !important; border: 1px solid rgba(132,242,160,.42) !important; border-radius: 11px !important; pointer-events: none !important; background: none !important; }
  /* line1：FNA ECOSYSTEM，距卡顶 174px */
  .hero .passport-motion::before { content: "FNA Ecosystem" !important; position: absolute !important; top: 174px !important; left: 0 !important; right: 0 !important; text-align: center !important; font: 400 10.5px/normal Inter, sans-serif !important; letter-spacing: 3.57px !important; text-transform: uppercase !important; color: rgb(142,240,174) !important; background: none !important; width: auto !important; height: auto !important; }
  /* line2 PASSPORT + MRZ 放在 .passport-shine 的伪元素里 */
  .hero .passport-motion .passport-shine { position: absolute !important; inset: 0 !important; display: block !important; background: none !important; animation: none !important; opacity: 1 !important; transform: none !important; width: auto !important; height: auto !important; }
  .hero .passport-motion .passport-shine::before { content: "PASSPORT" !important; position: absolute !important; top: 195px !important; left: 0 !important; right: 0 !important; text-align: center !important; font: 500 34px/normal "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Sans JP",serif !important; letter-spacing: 4.08px !important; color: rgb(228,255,233) !important; background: none !important; width: auto !important; height: auto !important; transform: none !important; opacity: 1 !important; }
  .hero .passport-motion .passport-shine::after { content: "P<FNA<<ECOSYSTEM<<PASSPORT<<<<<<<<<<<<\A BSC<USDC<<TREASURY<<PASSPORT<<<<<<<<<<<" !important; white-space: pre !important; position: absolute !important; top: 370px !important; left: 26px !important; right: 26px !important; padding-top: 10px !important; border-top: 1px dashed rgba(142,240,174,.25) !important; font: 400 10.5px/17.85px "IBM Plex Mono", monospace !important; letter-spacing: .84px !important; color: rgba(142,240,174,.72) !important; background: none !important; overflow: hidden !important; width: auto !important; height: auto !important; transform: none !important; opacity: 1 !important; text-align: left !important; }
}
/* 首页统计条 + 等级列表（官方：stats 全宽上下边框 100 高；section padding 78/28/30；行 139 高、图标 54、grid badge/name/bonus + thr） */
@media (max-width: 560px) {
  .total-paid { margin: 0 !important; padding: 22px 54px !important; width: auto !important; max-width: none !important; border-top: 1px solid rgb(223,230,225) !important; border-bottom: 1px solid rgb(223,230,225) !important; box-sizing: border-box !important; }
  .total-paid small { display: block !important; box-sizing: border-box !important; height: 19px !important; padding-top: 5px !important; margin: 0 0 1px !important; font-size: 11.5px !important; font-weight: 400 !important; letter-spacing: 1.38px !important; line-height: 14px !important; color: rgb(107,117,111) !important; text-transform: uppercase !important; }
  .total-paid strong { display: block !important; }
  .total-paid strong, .total-paid strong span { font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: 26px !important; font-weight: 600 !important; letter-spacing: normal !important; line-height: normal !important; }
  #tiers.tiers-section { width: auto !important; max-width: none !important; box-sizing: border-box !important; margin: 0 !important; padding: 78px 28px 30px !important; border-top: 0 !important; }
  #tiers.tiers-section .section-head { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: baseline !important; gap: 20px !important; margin: 0 0 30px !important; padding: 0 !important; }
  #tiers.tiers-section .section-head > div { flex: 0 0 auto !important; width: 128px !important; }
  #tiers.tiers-section .section-head h2 { margin: 0 !important; font-family: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Sans JP",serif !important; font-size: 30px !important; font-weight: 600 !important; line-height: normal !important; letter-spacing: -0.3px !important; }
  #tiers.tiers-section .section-head p { flex: 1 1 auto !important; margin: 0 !important; font-size: 14px !important; line-height: normal !important; color: rgb(107,117,111) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list { display: block !important; width: 100% !important; max-width: none !important; border-top: 1px solid rgb(201,212,205) !important; margin: 0 !important; padding: 0 !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row { display: grid !important; grid-template-columns: 48px minmax(0,1fr) 66px !important; grid-template-areas: "badge name bonus" "badge thr thr" !important; gap: 18px !important; align-items: center !important; padding: 18px 10px !important; margin: 0 !important; min-height: 0 !important; height: auto !important; border: 0 !important; border-bottom: 1px solid rgb(223,230,225) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; text-decoration: none !important; color: rgb(14,18,16) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row .tier-medal { grid-area: badge !important; width: 48px !important; height: 54px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; overflow: visible !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row .tier-medal img { width: 54px !important; height: 54px !important; max-width: none !important; display: block !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row .tier-name { grid-area: name !important; display: block !important; min-width: 0 !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row .tier-name strong { display: inline !important; font-family: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Sans JP",serif !important; font-size: 21px !important; font-weight: 600 !important; line-height: normal !important; color: rgb(14,18,16) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row .tier-name small { display: block !important; margin: 3px 0 0 !important; font-size: 12px !important; font-weight: 500 !important; line-height: normal !important; color: rgb(107,117,111) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row .tier-value { grid-area: thr !important; display: block !important; text-align: left !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row .tier-value strong { display: block !important; font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: 17px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(14,18,16) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row .tier-value small { display: block !important; font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: 1.1px !important; line-height: normal !important; color: rgb(138,149,143) !important; text-transform: uppercase !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row .tier-bonus { grid-area: bonus !important; justify-self: end !important; padding: 7px 16px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 800 !important; line-height: normal !important; word-spacing: 0 !important; }
  /* 第 8 档 Sovereign：官方为深色圆角卡（margin-top 10，padding 24/18，r12，渐变背景） */
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.max-tier { grid-template-columns: 48px 153px 66px !important; margin: 10px 0 0 !important; padding: 24px 18px !important; border: 0 !important; border-radius: 12px !important; background: linear-gradient(90deg, rgb(18,21,18), rgb(10,13,11)) !important; color: rgb(234,255,240) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.max-tier .tier-name { padding: 4px 0 0 !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.max-tier .tier-name strong { line-height: 20px !important; color: rgb(234,255,240) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.max-tier .tier-name strong em { display: inline !important; margin: 0 0 0 7px !important; padding: 3px 8px !important; border: 1px solid rgba(200,246,92,.55) !important; border-radius: 999px !important; background: transparent !important; font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; font-style: normal !important; font-size: 10px !important; font-weight: 400 !important; letter-spacing: 1.8px !important; line-height: normal !important; color: rgb(200,246,92) !important; vertical-align: middle !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.max-tier .tier-name small { color: rgb(147,160,139) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.max-tier .tier-value strong { color: rgb(200,246,92) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.max-tier .tier-value small { color: rgb(139,152,132) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.max-tier .tier-bonus { justify-self: start !important; background: rgb(200,246,92) !important; color: rgb(26,36,5) !important; }
}

/* r3: home/global footer at 390 — official: 390x90, pad 26px 28px 48px, border-top 1px rgb(223,230,225), 12px rgb(138,149,143), text only */
@media (max-width: 560px) {
  html body footer { display: flex !important; flex-direction: row !important; justify-content: space-between !important; gap: 20px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 26px 28px 48px !important; border-top: 1px solid rgb(223,230,225) !important; font-size: 12px !important; line-height: normal !important; letter-spacing: normal !important; color: rgb(138,149,143) !important; box-sizing: border-box !important; }
  html body footer > span:first-child { display: block !important; line-height: normal !important; }
  html body footer > span:last-child:not(:first-child) { display: none !important; }
}

/* ===== r3 (botB): home rights / stake / how-it-works / claim / telegram @390, values measured on fna.pro ===== */
@media (max-width: 560px) {
  /* Rights section: section padding 78px 0 30px, wrap 0 28px */
  html body main section.passport-benefits-section.content-section { width:auto!important; box-sizing:border-box!important; margin:0!important; padding:78px 28px 0!important; border:0!important; max-width:none!important; }
  html body main section.passport-benefits-section > .passport-benefits-head.passport-benefits-head { width:auto!important; max-width:none!important; flex-direction:row!important; display:flex!important; justify-content:space-between!important; align-items:baseline!important; gap:20px!important; margin:0 0 30px!important; padding:0!important; }
  html body main .passport-benefits-section .passport-benefits-head h2 { flex:0 1 auto!important; min-width:auto!important; margin:0!important; font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Sans JP",serif!important; font-size:30px!important; font-weight:600!important; line-height:normal!important; letter-spacing:-0.3px!important; color:rgb(14,18,16)!important; }
  html body main .passport-benefits-section .passport-benefits-head p { flex:0 1 auto!important; width:auto!important; min-width:auto!important; max-width:none!important; margin:0!important; font-size:14px!important; line-height:normal!important; color:rgb(107,117,111)!important; text-align:start!important; }
  html body main section.passport-benefits-section > .rights-grid.rights-grid { width:auto!important; max-width:none!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:14px!important; margin:0!important; padding:0!important; }
  html body main .passport-benefits-section .rights-grid > article { min-height:0!important; padding:24px 26px!important; border:1px solid rgb(201,212,205)!important; border-radius:14px!important; background:rgb(255,255,255)!important; box-shadow:none!important; }
  html body main .passport-benefits-section .rights-grid > article > small { display:block!important; margin:3px 0 0!important; font-family:"IBM Plex Mono",ui-monospace,monospace!important; font-size:13px!important; font-weight:800!important; line-height:normal!important; color:rgb(11,171,102)!important; letter-spacing:normal!important; }
  html body main .passport-benefits-section .rights-grid > article > h3 { margin:10px 0 0!important; font-size:15px!important; font-weight:700!important; line-height:normal!important; color:rgb(14,18,16)!important; letter-spacing:normal!important; }
  html body main .passport-benefits-section .rights-grid > article:nth-child(n) > b { display:block!important; margin:8px 0 0!important; font-family:"IBM Plex Mono",ui-monospace,monospace!important; font-size:20px!important; font-weight:600!important; line-height:normal!important; color:rgb(14,18,16)!important; }
  html body main .passport-benefits-section .rights-grid > article:nth-child(2):nth-child(n) > b { color:rgb(6,122,73)!important; }
  html body main .passport-benefits-section .rights-grid > article > p { margin:8px 0 0!important; font-size:13px!important; line-height:1.55!important; color:rgb(107,117,111)!important; }
  /* Extra-rate schedule */
  html body main .passport-benefits-section .extra-rate-label { margin:14px 0 8px!important; font-size:11.5px!important; font-weight:700!important; line-height:normal!important; letter-spacing:0.12em!important; text-transform:uppercase!important; color:rgb(107,117,111)!important; }
  html body main .passport-benefits-section .extra-rate-list { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:6px!important; margin:0!important; padding:0!important; }
  html body main .passport-benefits-section .extra-rate-item { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; grid-template-rows:auto auto!important; column-gap:12px!important; row-gap:2px!important; align-items:start!important; padding:9px 12px!important; border:1px solid rgb(201,212,205)!important; border-radius:12px!important; background:rgb(255,255,255)!important; box-shadow:none!important; }
  html body main .passport-benefits-section .extra-rate-item > div { display:contents!important; }
  html body main .passport-benefits-section .extra-rate-item span { grid-column:1!important; grid-row:1!important; justify-self:start!important; font-size:12.5px!important; font-weight:600!important; line-height:normal!important; color:rgb(68,78,73)!important; }
  html body main .passport-benefits-section .extra-rate-item strong { grid-column:2!important; grid-row:1!important; justify-self:end!important; margin-top:0!important; position:relative!important; top:1px!important; font-family:"IBM Plex Mono",ui-monospace,monospace!important; font-size:17px!important; font-weight:700!important; line-height:1.1!important; color:rgb(14,18,16)!important; }
  html body main .passport-benefits-section .extra-rate-item small { grid-column:1!important; grid-row:2!important; justify-self:start!important; display:block!important; padding:2px 7px!important; border:1px solid rgb(201,212,205)!important; border-radius:999px!important; background:transparent!important; font-size:10.5px!important; font-weight:800!important; line-height:normal!important; letter-spacing:0.06em!important; text-transform:uppercase!important; color:rgb(107,117,111)!important; }
  html body main .passport-benefits-section .extra-rate-item b { grid-column:2!important; grid-row:2!important; justify-self:end!important; margin-top:3px!important; font-family:inherit!important; font-size:12px!important; font-weight:600!important; line-height:normal!important; color:rgb(107,117,111)!important; }
  html body main .passport-benefits-section .extra-rate-item.active { padding:9px 12px!important; background:rgb(227,251,233)!important; border:1px solid rgb(11,171,102)!important; }
  html body main .passport-benefits-section .extra-rate-item.active strong { top:0!important; color:rgb(6,122,73)!important; }
  html body main .passport-benefits-section .extra-rate-item.active b { margin-top:2px!important; }
  html body main .passport-benefits-section .extra-rate-item.active small { border:0!important; background:rgb(11,171,102)!important; color:rgb(255,255,255)!important; }
  html body main .passport-benefits-section .extra-rate-footnote { margin:2px 0 0!important; font-size:12.5px!important; font-weight:600!important; line-height:normal!important; color:rgb(6,122,73)!important; }
  /* Stake panel + band + footnote (continues the rights wrap; section padding-bottom 30) */
  html body main section.stake-section { width:auto!important; box-sizing:border-box!important; margin:0!important; padding:0 28px 30px!important; border:0!important; max-width:none!important; }
  html body main .stake-section > .stake-explainer { width:auto!important; max-width:none!important; margin:14px 0 0!important; padding:0!important; }
  html body main .stake-section > .stake-explainer .stake-bullets { margin:0!important; padding:22px 26px!important; border:0!important; border-radius:14px!important; background:rgb(227,251,233)!important; }
  html body main .stake-section > .stake-explainer .stake-bullets h3 { margin:0 0 12px!important; padding:0 0 10px!important; border-bottom:1px solid rgba(11,171,102,0.18)!important; font-size:15.5px!important; font-weight:700!important; line-height:normal!important; color:rgb(14,18,16)!important; }
  html body main .stake-section > .stake-explainer .stake-bullets ul { display:grid!important; gap:8px!important; margin:0!important; padding:0!important; }
  html body main .stake-section > .stake-explainer .stake-bullets li { position:relative!important; margin:0!important; padding:0 0 0 18px!important; border:0!important; font-size:13.5px!important; line-height:1.6!important; color:rgb(68,78,73)!important; }
  html body main .stake-section > .stake-explainer .stake-bullets li::before { content:""!important; position:absolute!important; left:0!important; top:8px!important; width:7px!important; height:7px!important; border-radius:50%!important; background:rgb(11,171,102)!important; transform:none!important; }
  html body main .stake-section > .stake-explainer .stake-summary { display:block!important; margin:14px 0 0!important; padding:22px 26px!important; border:0!important; border-radius:14px!important; background:linear-gradient(168deg,rgb(23,28,24),rgb(10,13,11) 70%)!important; text-align:center!important; }
  html body main .stake-section > .stake-explainer .stake-summary strong { display:block!important; font-size:16.5px!important; font-weight:700!important; line-height:normal!important; color:rgb(255,255,255)!important; }
  html body main .stake-section > .stake-explainer .stake-summary span { display:block!important; margin:6px 0 0!important; font-size:13px!important; line-height:normal!important; color:rgb(186,247,205)!important; }
  html body main .stake-section > .stake-explainer .stake-footnote { margin:12px 0 0!important; padding:0!important; font-size:11.5px!important; line-height:normal!important; color:rgb(138,149,143)!important; }
  /* How it works: section padding 30 0 90 + grid padding-top 30, wrap 0 28 */
  html body main section.how-section.content-section { width:auto!important; box-sizing:border-box!important; margin:0!important; padding:60px 28px 90px!important; border:0!important; max-width:none!important; }
  html body main .how-section .how-grid { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:40px!important; padding:0!important; margin:0!important; }
  html body main .how-section .how-left h2 { margin:0 0 30px!important; padding:0!important; font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Sans JP",serif!important; font-size:30px!important; font-weight:600!important; line-height:normal!important; letter-spacing:-0.3px!important; color:rgb(14,18,16)!important; }
  html body main .how-section .how-left .steps { display:block!important; margin:0!important; padding:0!important; border-top:1px solid rgb(201,212,205)!important; }
  html body main .how-section .how-left .steps > article { display:grid!important; grid-template-columns:52px minmax(0,1fr)!important; gap:14px!important; margin:0!important; padding:20px 0!important; border:0!important; border-bottom:1px solid rgb(223,230,225)!important; border-radius:0!important; background:transparent!important; min-height:0!important; }
  html body main .how-section .how-left .steps > article > b { grid-row:auto!important; grid-column:1!important; margin:0!important; padding:0!important; font-family:"IBM Plex Mono",ui-monospace,monospace!important; font-size:13px!important; font-weight:800!important; line-height:normal!important; color:rgb(11,171,102)!important; background:none!important; }
  html body main .how-section .how-left .steps > article > div { grid-column:2!important; min-width:0!important; }
  html body main .how-section .how-left .steps > article h3 { margin:0 0 4px!important; font-size:16.5px!important; font-weight:700!important; line-height:normal!important; letter-spacing:normal!important; color:rgb(14,18,16)!important; }
  html body main .how-section .how-left .steps > article p { margin:0!important; font-size:13.5px!important; line-height:1.55!important; color:rgb(107,117,111)!important; }
  /* Claim card */
  html body main .how-section .how-claim { display:block!important; width:auto!important; height:auto!important; box-sizing:border-box!important; max-width:none!important; min-height:0!important; margin:0!important; padding:30px!important; border:0!important; border-radius:16px!important; background:linear-gradient(168deg,rgb(23,28,24),rgb(10,13,11) 70%)!important; color:rgb(207,232,216)!important; }
  html body main .how-section .how-claim p { margin:0 0 12px!important; font-size:13.5px!important; line-height:1.7!important; color:rgb(169,197,179)!important; }
  html body main .how-section .how-claim .how-claim-button { display:block!important; min-height:0!important; height:auto!important; width:auto!important; box-sizing:border-box!important; margin:18px 0 0!important; padding:15px!important; border:0!important; border-radius:10px!important; background:linear-gradient(90deg,rgb(132,242,125),rgb(65,236,191))!important; color:rgb(8,20,13)!important; font-size:15.5px!important; font-weight:800!important; line-height:normal!important; text-align:center!important; text-decoration:none!important; }
  html body main .how-section .how-claim small { display:block!important; margin:12px 0 0!important; font-size:11.5px!important; line-height:normal!important; color:rgb(127,150,137)!important; text-align:center!important; }
  /* Telegram buttons (v20q markup: svg.tg-plane 26 + span.tg-label + svg.tg-ext 20) — official .btn: flex, gap 12, padding 12/18, 56 tall */
  html body .community-links.community-links { width:auto!important; box-sizing:border-box!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:14px!important; max-width:none!important; margin:0!important; padding:0 28px 64px!important; }
  html body .community-links.community-links > a { position:static!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:12px!important; height:auto!important; min-height:56px!important; box-sizing:border-box!important; padding:12px 18px!important; border:1px solid rgba(0,0,0,0.04)!important; border-radius:14px!important; background:rgb(39,160,220)!important; box-shadow:rgba(39,160,220,0.18) 0 10px 24px!important; color:rgb(255,255,255)!important; font-size:15px!important; font-weight:700!important; line-height:20.25px!important; text-decoration:none!important; overflow:hidden!important; white-space:nowrap!important; }
  html body .community-links.community-links > a::before, html body .community-links.community-links > a::after { content:none!important; display:none!important; }
  html body .community-links.community-links > a > svg.tg-plane { display:block!important; flex:0 0 auto!important; width:26px!important; height:26px!important; margin:0!important; }
  html body .community-links.community-links > a > .tg-label { display:block!important; flex:1 1 0%!important; min-width:0!important; width:auto!important; height:auto!important; margin:0!important; font-size:15px!important; line-height:20.25px!important; color:inherit!important; background:none!important; -webkit-mask:none!important; mask:none!important; }
  html body .community-links.community-links > a > svg.tg-ext { display:block!important; flex:0 0 auto!important; width:20px!important; height:20px!important; margin:0!important; }
}

/* ===== r3 (botB): /passport tier picker + purchase / referrer / steps cards @390 (measured vs fna.pro/passport) ===== */
@media (max-width: 560px) {
  html body #app .office-intro.office-intro { margin-bottom: 34px !important; }
  html body #app .office-tier-grid.office-tier-grid { display: grid !important; grid-template-columns: 162px 162px !important; gap: 10px !important; justify-content: space-between !important; margin: 0 0 24px !important; }
  html body #app .office-tier-grid .office-tier-card.office-tier-card { width: 162px !important; height: 136px !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; display: grid !important; grid-auto-rows: max-content !important; justify-items: center !important; align-content: start !important; gap: 6px !important; padding: 16px 8px 14px !important; margin: 0 !important; border: 1px solid rgb(201,212,205) !important; border-radius: 14px !important; background: rgb(255,255,255) !important; box-shadow: none !important; font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important; color: rgb(14,18,16) !important; text-align: center !important; }
  html body #app .office-tier-grid .office-tier-card.office-tier-card.selected { border-color: rgb(134,239,125) !important; box-shadow: rgba(134,239,125,.26) 0 0 0 3px !important; }
  html body #app .office-tier-grid .office-tier-card.office-tier-card img { width: 40px !important; height: 40px !important; margin: 0 !important; display: block !important; }
  html body #app .office-tier-grid .office-tier-card.office-tier-card strong { display: block !important; margin: 0 !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: normal !important; letter-spacing: normal !important; color: rgb(14,18,16) !important; white-space: nowrap !important; }
  html body #app .office-tier-grid .office-tier-card.office-tier-card span { display: block !important; margin: 0 !important; font-family: "IBM Plex Mono",ui-monospace,monospace !important; font-size: 12px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(107,117,111) !important; }
  html body #app .office-tier-grid .office-tier-card.office-tier-card > b { display: block !important; margin: 0 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 800 !important; line-height: normal !important; }
  html body #app .office-tier-grid .office-tier-card:nth-child(1) > b { color: rgb(92,104,107) !important; }
  html body #app .office-tier-grid .office-tier-card:nth-child(2) > b { color: rgb(74,134,71) !important; }
  html body #app .office-tier-grid .office-tier-card:nth-child(3) > b { color: rgb(49,130,75) !important; }
  html body #app .office-tier-grid .office-tier-card:nth-child(4) > b { color: rgb(34,126,84) !important; }
  html body #app .office-tier-grid .office-tier-card:nth-child(5) > b { color: rgb(25,119,94) !important; }
  html body #app .office-tier-grid .office-tier-card:nth-child(6) > b { color: rgb(20,112,104) !important; }
  html body #app .office-tier-grid .office-tier-card:nth-child(7) > b { color: rgb(16,101,116) !important; }
  html body #app .office-tier-grid .office-tier-card:nth-child(8) > b { color: rgb(108,138,54) !important; }

  html body #app .office-panels.office-panels { display: grid !important; grid-template-columns: minmax(0,1fr) !important; align-items: start !important; gap: 28px !important; margin: 0 !important; }
  html body #app .office-panels .office-side.office-side { display: grid !important; gap: 20px !important; margin: 0 !important; }
  html body #app .office-panels .office-panel.office-panel { display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; margin: 0 !important; padding: 24px !important; border: 1px solid rgb(201,212,205) !important; border-radius: 14px !important; background: rgb(255,255,255) !important; box-shadow: none !important; }
  html body #app .office-panels .office-panel.amount-panel { padding: 30px !important; box-shadow: rgba(14,18,16,.1) 0 18px 44px 0 !important; }
  html body #app .office-panels .office-panel .office-kicker.office-kicker { display: block !important; height: 20px !important; margin: 0 !important; padding: 0 !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 20px !important; letter-spacing: 1.61px !important; text-transform: uppercase !important; color: rgb(107,117,111) !important; }
  /* amount stepper */
  html body #app .office-panels .amount-control.amount-control { display: flex !important; align-items: center !important; gap: 14px !important; height: 49px !important; margin: 14px 0 6px !important; }
  html body #app main .office-panels .amount-control.amount-control > button:nth-child(n) { flex: 0 0 46px !important; width: 46px !important; height: 46px !important; padding: 0 !important; border: 1px solid rgb(16,20,18) !important; border-radius: 10px !important; font-size: 0 !important; color: transparent !important; background: transparent linear-gradient(rgb(0,0,0),rgb(0,0,0)) center / 12px 1.67px no-repeat !important; box-shadow: none !important; }
  html body #app main .office-panels .amount-control.amount-control > button:nth-child(n):last-child { background: linear-gradient(rgb(0,0,0),rgb(0,0,0)) center / 12px 1.67px no-repeat, linear-gradient(rgb(0,0,0),rgb(0,0,0)) center / 1.67px 12px no-repeat transparent !important; }
  html body #app .office-panels .amount-control.amount-control > div { flex: 1 1 auto !important; display: block !important; min-width: 0 !important; height: 49px !important; text-align: center !important; white-space: nowrap !important; }
  html body #app .office-panels .amount-control.amount-control strong { display: inline !important; font-family: "IBM Plex Mono",ui-monospace,monospace !important; font-size: 38px !important; font-weight: 600 !important; line-height: normal !important; letter-spacing: normal !important; color: rgb(14,18,16) !important; }
  html body #app .office-panels .amount-control.amount-control small { display: inline !important; margin: 0 0 0 8px !important; font-family: "IBM Plex Mono",ui-monospace,monospace !important; font-size: 14px !important; font-weight: 600 !important; line-height: normal !important; color: rgb(107,117,111) !important; }
  html body #app .office-panels .amount-hint.amount-hint { margin: 0 0 8px !important; font-size: 12px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(138,149,143) !important; text-align: center !important; }
  /* summary rows */
  html body #app .office-panels .office-summary.office-summary { margin: 22px 0 !important; padding: 0 !important; border: 0 !important; border-top: 1px solid rgb(223,230,225) !important; }
  html body #app .office-panels .office-summary.office-summary > div { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 11px 2px !important; border: 0 !important; border-bottom: 1px solid rgb(223,230,225) !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(68,78,73) !important; }
  html body #app .office-panels .office-summary.office-summary > div > span { font-size: 14.5px !important; line-height: normal !important; color: rgb(68,78,73) !important; }
  html body #app .office-panels .office-summary.office-summary > div > strong { font-family: "IBM Plex Mono",ui-monospace,monospace !important; font-size: 15px !important; font-weight: 600 !important; line-height: normal !important; color: rgb(14,18,16) !important; }
  html body #app .office-panels .office-summary.office-summary > div > strong:has(img) { display: flex !important; align-items: center !important; gap: 9px !important; font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important; }
  html body #app .office-panels .office-summary.office-summary > div > strong img { width: 26px !important; height: 26px !important; margin: 0 !important; }
  html body #app .office-panels .office-summary.office-summary > div > strong b { font: inherit !important; color: inherit !important; }
  html body #app .office-panels .office-claim.office-claim { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; height: 52px !important; min-height: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 16px !important; border: 0 !important; border-radius: 10px !important; background: linear-gradient(90deg, rgb(132,242,125), rgb(65,236,191)) !important; box-shadow: none !important; font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important; font-size: 16px !important; font-weight: 800 !important; line-height: normal !important; color: rgb(8,20,13) !important; opacity: 1 !important; }
  /* official: purchase button is disabled (opacity .5) until a wallet is connected; ours stays clickable (.connect state) but matches the look */
  html body #app .office-panels .office-claim.office-claim.connect, html body #app .office-panels .office-claim.office-claim:disabled { opacity: .5 !important; }
  html body #app .office-panels .office-claim.office-claim:disabled { cursor: not-allowed !important; }
  html body #app .office-panels .referrer-input.referrer-input button:disabled { opacity: .4 !important; cursor: not-allowed !important; }
  html body #app .office-panels .office-payment-notice.office-payment-notice { margin: 12px 0 0 !important; font-size: 11.5px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(138,149,143) !important; text-align: center !important; }
  /* referrer card */
  html body #app .office-panels .referrer-input.referrer-input { display: flex !important; gap: 10px !important; height: 41px !important; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; }
  html body #app .office-panels .referrer-input.referrer-input input { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 41px !important; box-sizing: border-box !important; padding: 11px 13px !important; border: 1px solid rgb(201,212,205) !important; border-radius: 9px !important; background: rgb(246,249,247) !important; font-family: "IBM Plex Mono",ui-monospace,monospace !important; font-size: 13px !important; }
  html body #app .office-panels .referrer-input.referrer-input button { flex: 0 0 auto !important; width: auto !important; height: 41px !important; padding: 0 16px !important; border: 1px solid rgb(16,20,18) !important; border-radius: 9px !important; background: transparent !important; font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; color: rgba(16,16,16,.3) !important; }
  html body #app .office-panels .referrer-panel.referrer-panel > p { margin: 12px 0 0 !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 20px !important; color: rgb(107,117,111) !important; }
  /* steps card */
  html body #app .office-panels .flow-steps.flow-steps { display: flex !important; justify-content: space-between !important; gap: 10px 4px !important; height: 46px !important; margin: 0 0 18px !important; }
  html body #app .office-panels .flow-steps.flow-steps > div { display: grid !important; justify-items: center !important; align-content: start !important; gap: 6px !important; width: 54px !important; flex: 0 1 54px !important; min-width: 0 !important; color: rgb(138,149,143) !important; }
  html body #app .office-panels .flow-steps.flow-steps i { width: 26px !important; height: 26px !important; box-sizing: border-box !important; border: 1px solid rgb(201,212,205) !important; border-radius: 50% !important; background: rgb(255,255,255) !important; font-size: 12px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(138,149,143) !important; }
  html body #app .office-panels .flow-steps.flow-steps b { display: block !important; font-size: 11px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(138,149,143) !important; white-space: nowrap !important; }
  html body #app .office-panels .flow-steps.flow-steps > .active i { border-color: rgb(11,171,102) !important; font-weight: 700 !important; color: rgb(11,171,102) !important; }
  html body #app .office-panels .flow-steps.flow-steps > .active b { font-weight: 700 !important; color: rgb(14,18,16) !important; }
  html body #app .office-panels .flow-panel.flow-panel { padding: 24px !important; }
  html body #app .office-panels .flow-panel.flow-panel > h3 { margin: 0 0 5px !important; font-size: 15.5px !important; font-weight: 700 !important; line-height: normal !important; color: rgb(14,18,16) !important; }
  html body #app .office-panels .flow-panel.flow-panel > p { margin: 0 !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 21.6px !important; color: rgb(68,78,73) !important; }
}

/* ===== botB r4 (a): /passport Extra daily allocation (official SnapshotQuota @390) ===== */
@media (max-width: 560px) {
  html body #app main.passport-office section.snapshot-quota.snapshot-quota { width: auto !important; max-width: none !important; margin: 46px 0 0 !important; padding: 0 !important; font-family: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif !important; color: rgb(14,18,16) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-head.snapshot-quota-head { display: block !important; width: auto !important; margin: 0 0 22px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-head.snapshot-quota-head > h2 { margin: 0 0 8px !important; font-family: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Sans JP","Noto Sans JP Fallback",serif !important; font-size: 26px !important; font-weight: 600 !important; line-height: normal !important; letter-spacing: -0.26px !important; color: rgb(14,18,16) !important; max-width: none !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-head.snapshot-quota-head > p { margin: 0 !important; max-width: none !important; font-size: 14px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(107,117,111) !important; }
  /* rate-by-date schedule */
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .extra-rate-schedule.extra-rate-schedule { width: auto !important; margin: 14px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-label.schedule-label { display: block !important; height: 14px !important; margin: 0 0 8px !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: normal !important; letter-spacing: 1.38px !important; text-transform: uppercase !important; color: rgb(107,117,111) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-items.schedule-items { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 6px !important; margin: 0 !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item.schedule-item { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 9px 12px !important; border: 1px solid rgb(201,212,205) !important; border-radius: 12px !important; background: rgb(255,255,255) !important; box-shadow: none !important; color: rgb(14,18,16) !important; opacity: 1 !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item.schedule-item.ended { opacity: .55 !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item.schedule-item.current { border-color: rgb(11,171,102) !important; background: rgb(227,251,233) !important; box-shadow: rgb(11,171,102) 0 0 0 1px inset !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item .schedule-date { display: flex !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; color: rgb(68,78,73) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item .schedule-date > span { font-size: 12.5px !important; font-weight: 600 !important; line-height: normal !important; color: rgb(68,78,73) !important; white-space: nowrap !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item .schedule-date > b { display: block !important; padding: 2px 7px !important; border: 1px solid rgb(201,212,205) !important; border-radius: 999px !important; background: transparent !important; font-size: 10.5px !important; font-weight: 800 !important; line-height: normal !important; letter-spacing: 0.63px !important; text-transform: uppercase !important; color: rgb(107,117,111) !important; white-space: nowrap !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item.current .schedule-date > b { border: 0 !important; background: rgb(11,171,102) !important; color: rgb(255,255,255) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item .schedule-values { display: flex !important; justify-content: flex-end !important; align-items: baseline !important; gap: 4px 10px !important; text-align: end !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item .schedule-values > strong { font-family: "IBM Plex Mono", SFMono-Regular, Consolas, monospace !important; font-size: 17px !important; font-weight: 700 !important; line-height: 18.7px !important; color: rgb(14,18,16) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item.current .schedule-values > strong { color: rgb(6,122,73) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-item .schedule-values > small { display: none !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .schedule-footnote.schedule-footnote { margin: 8px 0 0 !important; font-size: 11.5px !important; font-weight: 400 !important; line-height: 18.4px !important; color: rgb(138,149,143) !important; max-width: none !important; }
  /* dark hero */
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-hero.snapshot-quota-hero { margin: 0 !important; padding: 22px 20px !important; min-height: 0 !important; border: 0 !important; border-radius: 16px !important; background: linear-gradient(168deg, rgb(23,28,24), rgb(10,13,11) 70%) !important; box-shadow: none !important; color: rgb(207,232,216) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-top.snapshot-quota-top { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; gap: 18px !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-main.snapshot-quota-main { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-main .office-kicker { display: block !important; height: auto !important; margin: 0 !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: normal !important; letter-spacing: 1.61px !important; text-transform: uppercase !important; color: rgb(186,247,205) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-amount.snapshot-quota-amount { display: flex !important; align-items: baseline !important; gap: 0 !important; margin: 10px 0 0 !important; font-family: "IBM Plex Mono", SFMono-Regular, Consolas, monospace !important; font-size: 32px !important; font-weight: 600 !important; line-height: 35.2px !important; color: rgb(255,255,255) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-amount > span { font: inherit !important; line-height: 35.2px !important; color: inherit !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-amount > small { margin: 0 0 0 8px !important; font-family: "IBM Plex Mono", SFMono-Regular, Consolas, monospace !important; font-size: 13px !important; font-weight: 600 !important; line-height: 14.3px !important; color: rgb(186,247,205) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-note.snapshot-quota-note { max-width: none !important; margin: 10px 0 0 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 20.8px !important; color: rgb(169,197,179) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-shield.snapshot-quota-shield { display: flex !important; justify-content: center !important; align-items: center !important; flex: 0 0 46px !important; width: 46px !important; height: 46px !important; box-sizing: border-box !important; border: 1px solid rgba(132,242,125,.35) !important; border-radius: 50% !important; background: rgba(132,242,125,.12) !important; color: rgb(132,242,125) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-shield > svg { display: none !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-shield::before { content: "" !important; display: block !important; width: 26px !important; height: 26px !important; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 26px 26px no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 26px 26px no-repeat !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-status.snapshot-quota-status { display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: 12px !important; margin: 20px 0 8px !important; font-size: 12px !important; font-weight: 600 !important; line-height: normal !important; color: rgb(186,247,205) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-status > span { font: inherit !important; color: inherit !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-status > strong { font-family: "IBM Plex Mono", SFMono-Regular, Consolas, monospace !important; font-size: 12px !important; font-weight: 600 !important; line-height: normal !important; color: inherit !important; text-align: end !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-progress.snapshot-quota-progress { position: relative !important; display: block !important; width: 100% !important; height: 6px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #ffffff24 !important; overflow: hidden !important; }
  /* r5: preview layer (official .snapshot-quota-preview / #previewProgress). Width is inline from JS - intentionally not set here. */
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-progress > i.snapshot-quota-preview, html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-progress > #previewProgress { position: absolute !important; left: 0 !important; top: 0 !important; display: block !important; height: 6px !important; margin: 0 !important; border-radius: 999px !important; background: #84f27d59 !important; }
  /* r5: cumulative fill (official #cumulativeProgress). Width is inline from JS - intentionally not set here. */
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-progress > span#cumulativeProgress { position: absolute !important; left: 0 !important; top: 0 !important; display: block !important; height: 6px !important; margin: 0 !important; border-radius: 999px !important; background: transparent linear-gradient(90deg, #84f27d, #41ecbf) !important; transition: width .35s !important; }
  /* result cards */
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-grid.allocation-result-grid { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; margin: 14px 0 0 !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card.allocation-result-card { margin: 0 !important; padding: 20px 22px !important; min-height: 0 !important; border: 1px solid rgb(201,212,205) !important; border-radius: 14px !important; background: rgb(255,255,255) !important; box-shadow: none !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card > .office-kicker { display: block !important; height: auto !important; margin: 0 !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: normal !important; letter-spacing: 1.61px !important; text-transform: uppercase !important; color: rgb(107,117,111) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card > strong { display: flex !important; align-items: baseline !important; gap: 0 !important; margin: 8px 0 0 !important; font-family: "IBM Plex Mono", SFMono-Regular, Consolas, monospace !important; font-size: 24px !important; font-weight: 600 !important; line-height: 27.6px !important; color: rgb(14,18,16) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card > strong.allocation-added { color: rgb(6,122,73) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card > strong > span { font: inherit !important; line-height: 27.6px !important; color: inherit !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card > strong > small { margin: 0 0 0 8px !important; font-family: "IBM Plex Mono", SFMono-Regular, Consolas, monospace !important; font-size: 13px !important; font-weight: 600 !important; line-height: 14.95px !important; color: rgb(107,117,111) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card > span { display: flex !important; align-items: center !important; gap: 7px !important; margin: 9px 0 0 !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: normal !important; font-style: normal !important; color: rgb(107,117,111) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card > span > img { width: 22px !important; height: 22px !important; margin: 0 !important; object-fit: contain !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card > span > b { font: inherit !important; color: inherit !important; }
  /* upgrade banner */
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-upgrade-banner.allocation-upgrade-banner { display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: stretch !important; gap: 18px !important; margin: 18px 0 0 !important; padding: 16px 20px !important; border: 0 !important; border-radius: 12px !important; background: rgb(227,251,233) !important; box-shadow: none !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-upgrade-banner > div > strong { display: block !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: normal !important; color: rgb(14,18,16) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-upgrade-banner > div > p { margin: 4px 0 0 !important; font-size: 12px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(107,117,111) !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-upgrade-banner > button { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 11px 18px !important; border: 0 !important; border-radius: 9px !important; background: rgb(16,20,18) !important; box-shadow: none !important; font-family: Inter, "Inter Fallback", system-ui, sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: normal !important; color: rgb(234,255,242) !important; cursor: pointer !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-upgrade-banner > button > span { display: block !important; width: 15px !important; height: 15px !important; font-size: 0 !important; color: inherit !important; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E") center / 15px 15px no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E") center / 15px 15px no-repeat !important; }
  /* official /passport has no site footer at 390; its wrap ends with 90px bottom padding */
  /* home Passport-benefits schedule: periods before the active one are "ended" -> official opacity .55 */
  html body main .passport-benefits-section .extra-rate-item:has(~ .extra-rate-item.active) { opacity: .55 !important; }
  html body #app main.passport-office.passport-office { padding-bottom: 90px !important; }
  html body #app:has(> main.passport-office) > footer { display: none !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-footnote.allocation-footnote { margin: 12px 0 0 !important; max-width: none !important; font-size: 11.5px !important; font-weight: 400 !important; line-height: 18.4px !important; color: rgb(138,149,143) !important; }
}

/* ===== botB r4 (b): dashboard / referrals / invite / rules / crypto-card @390 ===== */
@media (max-width:560px) {
  /* official has no site footer on these pages at 390 */
  html body #app:has(> main.dashboard-page, > main.referrals-page, > main.f16-page, > main.rules-page) > footer { display: none !important; }

  /* /rules — wrap pad 48 28 90 */
  html body #app main.rules-page.rules-page { padding: 48px 28px 90px !important; color: rgb(14,18,16) !important; line-height: normal !important; }
  html body #app main.rules-page .rules-head { margin: 0 0 34px !important; padding: 0 !important; }
  html body #app main.rules-page .rules-head .rules-kicker { display: flex !important; height: auto !important; margin: 0 !important; padding: 0 !important; align-items: center !important; gap: 12px !important; font-size: 12px !important; font-weight: 800 !important; line-height: normal !important; letter-spacing: 2.16px !important; color: rgb(11,171,102) !important; }
  html body #app main.rules-page .rules-head .rules-kicker-line { display: block !important; flex: 0 0 34px !important; width: 34px !important; height: 3px !important; border-radius: 2px !important; background: linear-gradient(90deg, rgb(132,242,125), rgb(65,236,191)) !important; }
  html body #app main.rules-page .rules-head h1 { margin: 16px 0 0 !important; font-size: 36px !important; font-weight: 600 !important; line-height: normal !important; color: rgb(14,18,16) !important; }
  html body #app main.rules-page .rules-section.rules-section { padding: 30px 0 34px !important; border-top: 1px solid rgb(201,212,205) !important; border-bottom: 0 !important; }
  html body #app main.rules-page .rules-section h2 { margin: 0 0 12px !important; font-size: 24px !important; font-weight: 600 !important; line-height: normal !important; color: rgb(14,18,16) !important; }
  html body #app main.rules-page .rules-section > p { margin: 0 0 18px !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 24.65px !important; color: rgb(68,78,73) !important; }
  /* tier table: auto layout, nowrap cells, horizontal scroll like official (table 370 in a 334 wrap) */
  html body #app main.rules-page .rules-table-wrap { margin: 0 !important; width: 100% !important; overflow-x: auto !important; overflow-y: auto !important; }
  html body #app main.rules-page .rules-table.rules-table { width: auto !important; min-width: 0 !important; max-width: none !important; table-layout: auto !important; border-collapse: collapse !important; font-size: 14px !important; line-height: normal !important; color: rgb(14,18,16) !important; }
  html body #app main.rules-page .rules-table col { width: auto !important; }
  html body #app main.rules-page .rules-table thead th.rules-table-th, html body #app main.rules-page .rules-table thead th { height: auto !important; max-height: none !important; padding: 8px 10px !important; border-bottom: 1px solid rgb(201,212,205) !important; font-family: Inter, "Inter Fallback", system-ui, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; line-height: normal !important; letter-spacing: 1.1px !important; color: rgb(107,117,111) !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; vertical-align: middle !important; text-align: left !important; }
  html body #app main.rules-page .rules-table tbody tr { height: auto !important; min-height: 0 !important; }
  html body #app main.rules-page .rules-table tbody td { height: auto !important; padding: 12px 10px !important; border-bottom: 1px solid rgb(223,230,225) !important; font-family: Inter, "Inter Fallback", system-ui, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(14,18,16) !important; white-space: nowrap !important; vertical-align: middle !important; text-align: start !important; }
  html body #app main.rules-page .rules-table tbody td:first-child { padding-left: 10px !important; }
  html body #app main.rules-page .rules-table .rules-tier-cell { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; font-weight: 600 !important; line-height: normal !important; color: rgb(14,18,16) !important; white-space: nowrap !important; }
  html body #app main.rules-page .rules-table .rules-tier-icon { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; }
  html body #app main.rules-page .rules-table .rules-tier-name { font: inherit !important; color: inherit !important; white-space: nowrap !important; }
  html body #app main.rules-page .rules-table td.rules-threshold-cell { font-family: "IBM Plex Mono", SFMono-Regular, Consolas, monospace !important; font-size: 14px !important; font-weight: 400 !important; line-height: normal !important; white-space: nowrap !important; overflow-wrap: normal !important; }
  html body #app main.rules-page .rules-table .rules-bonus-pill { display: inline !important; min-width: 0 !important; max-width: none !important; height: auto !important; padding: 6px 14px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 800 !important; line-height: normal !important; white-space: nowrap !important; }
  html body #app main.rules-page .rules-bonus-pill.bonus-0 { background: color(srgb 0.932549 0.942745 0.952157) !important; color: color(srgb 0.359686 0.408784 0.420078) !important; }
  html body #app main.rules-page .rules-bonus-pill.bonus-1 { background: color(srgb 0.905098 0.987451 0.898039) !important; color: color(srgb 0.288314 0.52502 0.279373) !important; }
  html body #app main.rules-page .rules-bonus-pill.bonus-3 { background: color(srgb 0.868235 0.981961 0.903529) !important; color: color(srgb 0.192471 0.510745 0.293647) !important; }
  html body #app main.rules-page .rules-bonus-pill.bonus-5 { background: color(srgb 0.84549 0.974902 0.917647) !important; color: color(srgb 0.133333 0.492392 0.330353) !important; }
  html body #app main.rules-page .rules-bonus-pill.bonus-8 { background: color(srgb 0.832157 0.96549 0.931765) !important; color: color(srgb 0.0986667 0.467922 0.367059) !important; }
  html body #app main.rules-page .rules-bonus-pill.bonus-12 { background: color(srgb 0.824314 0.953726 0.947451) !important; color: color(srgb 0.0782745 0.437333 0.407843) !important; }
  html body #app main.rules-page .rules-bonus-pill.bonus-15 { background: color(srgb 0.818824 0.937255 0.966274) !important; color: color(srgb 0.064 0.39451 0.456784) !important; }
  html body #app main.rules-page .rules-bonus-pill.bonus-20 { background: color(srgb 0.956863 0.992941 0.872157) !important; color: color(srgb 0.422902 0.539294 0.212078) !important; }
  /* bullet lists */
  html body #app main.rules-page .rules-section .rules-bullet-list { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
  html body #app main.rules-page .rules-section .rules-bullet-list li { position: relative !important; display: list-item !important; list-style: none !important; min-height: 0 !important; margin: 0 !important; padding: 12px 0 12px 26px !important; border-bottom: 1px solid rgb(223,230,225) !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 23.925px !important; color: rgb(68,78,73) !important; }
  html body #app main.rules-page .rules-section .rules-bullet-list li::before { content: "" !important; position: absolute !important; top: 20px !important; left: 4px !important; width: 8px !important; height: 8px !important; border-radius: 2px !important; background: linear-gradient(90deg, rgb(132,242,125), rgb(65,236,191)) !important; }
  /* risk notice is a plain <p> on official */
  html body #app main.rules-page .rules-risk-section .rules-bullet-list li { display: block !important; padding: 0 !important; border: 0 !important; font-size: 13.5px !important; line-height: 22.95px !important; color: rgb(107,117,111) !important; }
  html body #app main.rules-page .rules-risk-section .rules-bullet-list li::before { content: none !important; display: none !important; }
  /* /invite — official .page/.card (grid, gap 14, 268px column) */
  html body #app main.f16-page.f16-invite-page { display: grid !important; grid-template-columns: minmax(0,1fr) !important; justify-items: center !important; align-items: start !important; box-sizing: border-box !important; min-height: calc(100vh - 64px) !important; margin: 0 !important; padding: 70px 24px !important; background: rgb(248,251,249) !important; line-height: normal !important; }
  html body #app main.f16-invite-page .f16-invite-card { display: grid !important; grid-template-columns: minmax(0,1fr) !important; justify-items: center !important; gap: 14px !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 40px 36px !important; border: 1px solid rgb(201,212,205) !important; border-radius: 16px !important; background: rgb(255,255,255) !important; box-shadow: rgba(14,18,16,.1) 0 18px 44px 0 !important; text-align: center !important; line-height: normal !important; }
  html body #app main.f16-invite-page .f16-invite-card > * { margin: 0 !important; }
  html body #app main.f16-invite-page .f16-invite-icon { display: grid !important; place-items: center !important; width: 62px !important; height: 62px !important; margin: 0 !important; border-radius: 50% !important; background: linear-gradient(168deg, rgb(23,28,24), rgb(10,13,11) 70%) !important; }
  html body #app main.f16-invite-page .f16-invite-icon > img { display: block !important; width: 44px !important; height: 44px !important; object-fit: contain !important; }
  html body #app main.f16-invite-page .f16-eyebrow { font-size: 12px !important; font-weight: 800 !important; line-height: normal !important; letter-spacing: 2.16px !important; text-transform: uppercase !important; color: rgb(11,171,102) !important; }
  html body #app main.f16-invite-page .f16-invite-card > h1 { font-family: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Sans JP","Noto Sans JP Fallback",serif !important; font-size: 32px !important; font-weight: 600 !important; line-height: normal !important; letter-spacing: normal !important; color: rgb(14,18,16) !important; }
  html body #app main.f16-invite-page .f16-invite-card > p:not(.f16-eyebrow):not(.f16-load-status) { width: 100% !important; max-width: none !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 23.925px !important; color: rgb(68,78,73) !important; }
  html body #app main.f16-invite-page .f16-referrer-row { display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: 12px !important; box-sizing: border-box !important; width: 100% !important; min-height: 0 !important; padding: 13px !important; border: 1px solid rgb(201,212,205) !important; border-radius: 10px !important; background: rgb(246,249,247) !important; }
  html body #app main.f16-invite-page .f16-referrer-row .f16-label { font-family: Inter, "Inter Fallback", system-ui, sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: normal !important; letter-spacing: 1.38px !important; text-transform: uppercase !important; color: rgb(107,117,111) !important; white-space: nowrap !important; }
  html body #app main.f16-invite-page .f16-referrer-row > strong { font-family: "IBM Plex Mono", SFMono-Regular, Consolas, monospace !important; font-size: 14px !important; font-weight: 700 !important; line-height: normal !important; color: rgb(14,18,16) !important; }
  /* official order: refBox, hint, Connect, Claim — our status line plays the hint */
  html body #app main.f16-invite-page .f16-load-status { order: 1 !important; width: 100% !important; font-size: 13px !important; font-weight: 400 !important; line-height: normal !important; color: rgb(107,117,111) !important; }
  html body #app main.f16-invite-page .f16-invite-card > .f16-btn { order: 2 !important; }
  html body #app main.f16-invite-page .f16-invite-card > a.f16-btn-outline { order: 3 !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 13px !important; border: 1px solid rgb(16,20,18) !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; font-family: Inter, "Inter Fallback", system-ui, sans-serif !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: normal !important; color: rgb(14,18,16) !important; text-align: center !important; }
  /* signed-out Connect = RainbowKit ConnectButton (radius 4, #10b981, SFRounded 16/700, 40 tall) */
  html body #app main.f16-invite-page .f16-invite-card > #connect2:not(.is-signin) { display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: center !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; height: 40px !important; min-height: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 4px !important; background: rgb(16,185,129) !important; box-shadow: rgba(0,0,0,.1) 0 4px 12px 0 !important; font-family: SFRounded, ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: normal !important; letter-spacing: normal !important; text-transform: none !important; color: rgb(255,255,255) !important; }
}

/* ===== botB r4 (v20q) home tier pills: official per-tier colour ramp (measured getComputedStyle, fna.pro 2026-11-01) ===== */
@media (max-width:560px){
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.tier-1 .tier-bonus { color: color(srgb 0.359686 0.408784 0.420078) !important; background: color(srgb 0.932549 0.942745 0.952157) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.tier-2 .tier-bonus { color: color(srgb 0.288314 0.52502 0.279373) !important; background: color(srgb 0.905098 0.987451 0.898039) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.tier-3 .tier-bonus { color: color(srgb 0.192471 0.510745 0.293647) !important; background: color(srgb 0.868235 0.981961 0.903529) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.tier-4 .tier-bonus { color: color(srgb 0.133333 0.492392 0.330353) !important; background: color(srgb 0.84549 0.974902 0.917647) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.tier-5 .tier-bonus { color: color(srgb 0.0986667 0.467922 0.367059) !important; background: color(srgb 0.832157 0.96549 0.931765) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.tier-6 .tier-bonus { color: color(srgb 0.0782745 0.437333 0.407843) !important; background: color(srgb 0.824314 0.953726 0.947451) !important; }
  #tiers.tiers-section #passport-tier-list.tier-list .tier-row.tier-7 .tier-bonus { color: color(srgb 0.064 0.39451 0.456784) !important; background: color(srgb 0.818824 0.937255 0.966274) !important; }
}

/* ===== botB r4 (v20q) home extra-rate schedule: official ExtraMatchSchedule li = 60/58 tall (left col label15+gap6+chip), right col centred; amount IBM Plex Mono ===== */
@media (max-width:560px){
  html body main .passport-benefits-section .extra-rate-list .extra-rate-item { row-gap: 2.17px !important; }
  html body main .passport-benefits-section .extra-rate-list .extra-rate-item strong { margin-top: 0.16px !important; }
  html body main .passport-benefits-section .extra-rate-list .extra-rate-item b { margin-top: 2.84px !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; text-align: end !important; }
  html body main .passport-benefits-section .extra-rate-list .extra-rate-item.active { box-shadow: rgb(11,171,102) 0 0 0 1px inset !important; }
  html body main .passport-benefits-section .extra-rate-list .extra-rate-item.active span { color: rgb(68,78,73) !important; }
  html body main .passport-benefits-section .extra-rate-list .extra-rate-item.active b { margin-top: 1.84px !important; color: rgb(107,117,111) !important; }
}

/* ===== botB r4 (v20r) hero "Treasury" highlight: official now a 180deg under-band (transparent 62%, rgba(132,242,125,.6)→rgba(65,236,191,.5)), no padding, slice — overrides stale mobile-v609 v6.0.18 rule ===== */
@media (max-width:560px){
  html body .hero h1 em { background-image: linear-gradient(rgba(0,0,0,0) 62%, rgba(132,242,125,0.6) 62%, rgba(65,236,191,0.5) 100%) !important; background-size: auto !important; background-position: 0% 0% !important; background-repeat: repeat !important; padding: 0 !important; -webkit-box-decoration-break: slice !important; box-decoration-break: slice !important; }
}

/* ===== botB r4 (v20r) hero eyebrow line: official ::before 34px with flex-shrink 1 → 29.28px when the 2-line label wraps (text starts x69.28) ===== */
@media (max-width:560px){
  html body .hero .eyebrow::before { flex: 0 1 auto !important; width: 34px !important; min-width: 0 !important; }
}

/* ===== botB r4 (c, base e46a9d3/v20s) measured vs fna.pro @390:
   - /dashboard, /referrals signed-out gate H1: official line-height normal (box stays 264x80)
   - /passport "Referrer (optional)" label: official inline/normal (text y1451), ours block/20px (y1446)
   - /passport extra-allocation section font stack: official includes Noto Sans JP ===== */
@media (max-width:560px){
  html body #app section.dashboard-login-content h1.fna-serif,
  html body #app section.referrals-login-card h1.fna-serif { line-height: normal !important; }
  html body #app .office-panels .office-panel.referrer-panel > label.office-kicker.office-kicker { display: inline !important; height: auto !important; line-height: normal !important; }
  html body #app main.passport-office section.snapshot-quota.snapshot-quota { font-family: Inter, "Inter Fallback", "Noto Sans JP", "Noto Sans JP Fallback", system-ui, -apple-system, "Segoe UI", sans-serif !important; }
  /* /rules: official computed text-align is start (not left) — keeps RTL (ar/fa) mirrored */
  html body #app main.rules-page .rules-head, html body #app main.rules-page .rules-head * { text-align: start !important; }
  /* language dropdown: official fna.pro @390 = panel 190 wide (pad 6, 1px line, r12), rows 38 tall (pad 0 10, gap 10, r8, 14/600), flag 20x15 r3, check svg 15x15 */
  html body #app .header .lang-shell > .lang-menu.lang-menu { top: calc(100% + 8px) !important; width: 190px !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; max-height: min(70vh, 460px) !important; padding: 6px !important; box-sizing: border-box !important; border: 1px solid rgb(223,230,225) !important; border-radius: 12px !important; background: rgb(255,255,255) !important; box-shadow: rgba(15,23,42,.12) 0 12px 28px !important; overflow-y: auto !important; z-index: 50 !important; font-family: Inter, "Inter Fallback", "Noto Sans JP", "Noto Sans JP Fallback", system-ui, -apple-system, "Segoe UI", sans-serif !important; }
  html body #app .header .lang-shell > .lang-menu > .lang-option.lang-option { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 10px !important; box-sizing: border-box !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; font-family: inherit !important; font-size: 14px !important; font-weight: 600 !important; line-height: normal !important; color: rgb(31,41,55) !important; }
  html body #app .header .lang-shell > .lang-menu > .lang-option.lang-option:hover, html body #app .header .lang-shell > .lang-menu > .lang-option.lang-option.current { background: transparent !important; }
  html body #app .header .lang-shell > .lang-menu > .lang-option > .lang-flag { display: block !important; flex: 0 0 20px !important; width: 20px !important; height: 15px !important; min-width: 20px !important; max-width: 20px !important; margin: 0 !important; border: 0 !important; border-radius: 3px !important; background: transparent !important; box-shadow: rgba(15,23,42,.08) 0 0 0 1px !important; object-fit: cover !important; }
  html body #app .header .lang-shell > .lang-menu > .lang-option > span:not(.lang-check) { flex: 1 1 0% !important; min-width: 0 !important; font: inherit !important; text-align: start !important; }
  html body #app .header .lang-shell > .lang-menu > .lang-option > .lang-check:empty { display: none !important; }
  html body #app .header .lang-shell > .lang-menu > .lang-option > .lang-check:not(:empty) { display: block !important; flex: 0 0 15px !important; width: 15px !important; height: 15px !important; margin: 0 !important; font-size: 0 !important; line-height: 0 !important; color: rgb(11,171,102) !important; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px 15px no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px 15px no-repeat !important; }
}

/* r6 (390): official parity items found during RTL / long-language audit */
@media (max-width: 560px) {
  /* Home hero h1: official text-wrap: balance (ar: "جوازك إلى / اقتصاد الخزينة.") */
  html body .hero h1 { text-wrap: balance !important; }
  /* Passport eyebrow: official PurchaseForm eyebrow = flex, gap 12, 34x3 gradient line before text, color rgb(11,171,102) */
  html body #app .office-intro .eyebrow { display: flex !important; align-items: center !important; gap: 12px !important; color: rgb(11,171,102) !important; }
  html body #app .office-intro .eyebrow::before { content: "" !important; display: block !important; flex: 0 1 auto !important; width: 34px !important; height: 3px !important; border-radius: 2px !important; background: linear-gradient(90deg, rgb(132,242,125), rgb(65,236,191)) !important; }
  /* Rules table: shared style.css forces thead tr height 38px; official header row is content height (30.5px when single-line) */
  html body #app main.rules-page .rules-table thead tr { height: auto !important; }
}

/* r7 (390) home hero CTA row: official .ctas is flex-wrap:nowrap (claim text wraps to 2 lines, link sits beside it, row h68 in es/it);
   ours wrapped the link onto a 2nd row (49+26+20 = h95) => es/it hero +27.
   r7 also: stake panel title letter-spacing. */
@media (max-width: 560px) {
  html body .hero .hero-actions { flex-wrap: nowrap !important; }
  /* stake panel title: official letter-spacing normal; ours inherited -0.35px => it/de title fit on 1 line (h30) vs official 2 lines (h49) => -19 */
  html body #app#app main .stake-section > .stake-explainer .stake-bullets h3 { letter-spacing: normal !important; }
}

/* r8 (390) passport sale ENDED state (markup from A Bot desktop-10: .countdown.is-ended > b.countdown-head + p.countdown-ended + small.deadline).
   Official 390: box 334x116 grid gap 10, padding 16px 18px, radius 14; p.ended 14px/600/normal, margin 0, rgb(14,18,16), h34 (2 lines).
   Ours before: p inherited margin 16px 0 + 16px/400 => box 154 (+38). Schedule items: official all non-active items opacity .55. */
@media (max-width: 560px) {
  html body #app#app section.hero .countdown.is-ended { display: grid !important; gap: 10px !important; padding: 16px 18px !important; border-radius: 14px !important; }
  html body #app#app section.hero .countdown.is-ended > .countdown-ended { margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; line-height: normal !important; color: rgb(14,18,16) !important; }
  html body #app#app main .passport-benefits-section .extra-rate-item:not(.active) { opacity: .55 !important; }
  html body #app#app main .passport-benefits-section .extra-rate-item:not(.active) strong { color: rgb(14,18,16) !important; }
  html body #app#app main .passport-benefits-section .extra-rate-item small { text-transform: uppercase !important; }
}