@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('../fonts/plus-jakarta-sans-variable.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-variable.woff2') format('woff2');
}
:root{
  --bg:#131318;
  --surface:#1C1C24;
  --surface-2:#24242E;
  --surface-3:#18181F;
  --border:#2E2E39;
  --border-soft:#212129;
  --text:#F2F1F6;
  --text-dim:#c7c7c7;
  --text-faint:#ffc392;
  --accent:#3960FA;
  --accent-ink:#FFFFFF;
  --accent-dim:#33408F;
  --gold:#F6B93B;
  --green:#39D98A;
  --green-ink:#052A1B;
  --danger:#F16C6C;
  --text-muted:#b3b3b3;
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --radius-sm:10px;
  --radius-lg:18px;
  --radius-pill:999px;
  --radius-btn:12px;
  --maxw:1280px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  overflow-x:hidden;
  padding-top:92px;
  transition:padding-top .2s ease;
}

.skip-link{
  position:absolute; top:-100px; left:12px; z-index:999;
  background:var(--accent); color:var(--accent-ink);
  padding:10px 18px; border-radius:var(--radius-sm);
  font-weight:700; font-size:14px;
  transition:top .15s;
}
.skip-link:focus{top:12px;}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

img,svg{max-width:100%; display:block;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
a{color:inherit; text-decoration:none;}
input,textarea{font:inherit; color:inherit; background:none; border:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
h1,h2,h3{text-wrap:balance;}
.tabular{font-variant-numeric:tabular-nums;}
ul,ol{list-style:none;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

.site-nav{
  border-bottom:1px solid var(--border-soft);
  background:#070716;
  position:fixed; top:0; left:0; right:0; z-index:40;
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:20px 24px;
  flex-wrap:nowrap;
  transition:padding .2s ease;
}
.site-nav.is-scrolled .wrap{padding-top:10px; padding-bottom:10px;}
.brand{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:17px;
  flex-shrink:0;
}
.brand-logo{height:52px; width:auto; transition:height .2s ease;}
.footer-about .brand-logo{height:44px;}
@media (max-width:400px){
  .brand-logo{height:34px;}
}
.site-nav.is-scrolled .brand-logo{height:36px;}
.brand-mark{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#2E3A9E);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:11px; color:var(--accent-ink);
  flex-shrink:0;
}
.nav-dropdown{
  display:flex; align-items:center; gap:6px;
  padding:7px 13px 7px 7px; border-radius:var(--radius-pill);
  border:1px solid var(--border); font-size:12.5px; font-weight:600; color:var(--text);
  flex-shrink:0; white-space:nowrap;
}
.nav-dropdown .grid-ic{
  width:19px; height:19px; border-radius:5px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--accent);
}
.nav-collapse{display:flex; align-items:center; gap:10px; flex:1; margin-left:6px; min-width:0;}
.nav-links{
  display:flex; 
  align-items:center; 
  gap:2px; 
  flex:1; 
  min-width:0;
  justify-content: center;
}

.nav-links a{
  display:inline-flex; align-items:center;
  padding:7px 10px; border-radius:var(--radius-pill);
  font-size:15px;
  font-weight:600;
  color:var(--text-dim);
  transition:color .15s, background .15s;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--text); background:var(--surface-2);}
.nav-links a.current{color:var(--accent);}
.nav-icon-btn{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); color:var(--text-dim);
  font-size:13px; flex-shrink:0;
}
.nav-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.mobile-menu-top{display:none;}
.mobile-menu-downloads{display:none;}
.mobile-menu-search{display:none;}
.nav-link-icon{display:inline-flex; align-items:center; margin-right:6px;}

.lang-dropdown{position:relative;}
.lang-dropdown .nav-icon-btn[aria-expanded="true"]{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
}
.lang-panel{
  display:none;
  position:absolute; top:calc(100% + 10px); right:0; z-index:50;
  min-width:96px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.55);
  padding:6px;
}
.lang-dropdown.open .lang-panel{display:block;}
.lang-option{
  display:block; width:100%; text-align:left;
  padding:9px 12px; border-radius:6px;
  font-size:13.5px; color:var(--text-dim);
  border-bottom:1px dashed var(--border-soft);
}
.lang-option:last-child{border-bottom:none;}
.lang-option:hover{color:var(--text); background:var(--surface-2);}
.lang-option.current{color:var(--accent); font-weight:600;}

.btn-sm{padding:8px 15px; font-size:12.5px;}
.btn-outline-accent{
  border:1px solid var(--accent-dim); color:var(--accent);
  border-radius:var(--radius-pill);
}
.btn-outline-accent:hover{background:rgba(111,234,233,.08);}

.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; flex-shrink:0;
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.nav-toggle span{
  display:block; width:16px; height:2px; margin:0 auto;
  background:var(--text); border-radius:2px; transition:transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:760px){
  .nav-toggle{display:flex; position:relative; z-index:36;}
  .brand{position:relative; z-index:36;}
  .nav-actions{display:none;}
  .nav-collapse{
    display:none;
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:35;
    flex-direction:column; align-items:stretch; gap:16px;
    background:var(--bg);
    padding:100px 24px 24px;
    overflow-y:auto;
  }
  .nav-collapse.open{display:flex;}
  .nav-links{flex:none; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px;}
  .nav-links a{padding:11px 12px; border-radius:var(--radius-sm); display:flex; align-items:center;}

  .mobile-menu-top{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:16px; margin-bottom:4px; border-bottom:1px solid var(--border-soft);
  }
  .mobile-menu-time{font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--text);}

  .mobile-menu-downloads{display:flex; flex-direction:column; gap:10px;}
  .mobile-download-btn-form{display:contents;}
  .mobile-download-btn{
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; padding:13px; border-radius:var(--radius-btn);
    background:var(--accent); color:var(--accent-ink);
    font-weight:700; font-size:14px;
  }
  .mobile-download-btn img{border-radius:6px; flex-shrink:0;}

  .mobile-menu-search{
    display:flex; align-items:center; gap:10px;
    width:100%; padding:13px 16px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
    color:var(--text-faint); font-size:14px; text-align:left;
  }

  .nav-link-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    background:var(--surface-2); color:var(--text-dim); margin-right:12px;
  }
}

.crumbs{
  font-size:13px; color:var(--text-dim); margin-bottom:16px;
}
.crumbs ol{display:flex; flex-wrap:wrap; align-items:center;}
.crumbs li{display:flex; align-items:center;}
.crumbs li:not(:last-child)::after{content:'/'; color:var(--text-faint); margin:0 8px;}
.crumbs a:hover{color:var(--text);}
.crumbs [aria-current="page"]{color:var(--text);}

.hero{padding-top:20px; padding-bottom:8px;}
.page-hero{
  background:var(--surface);
  border-bottom:1px solid var(--border-soft);
  padding:32px 0 40px;
  margin-bottom:36px;
}
.page-hero .crumbs{margin-bottom:18px;}
.blog-hero{
  position:relative;
  padding:64px 0 84px;
  background-image:var(--blog-hero-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.blog-hero::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,19,24,.72) 0%, rgba(19,19,24,.88) 100%);
}
.blog-hero .wrap{position:relative; z-index:1;}
@media (max-width:860px){
  .blog-hero{padding:48px 0 64px; background-image:var(--blog-hero-bg-mobile);}
}

.cover-hero{
  position:relative;
  padding:64px 0 84px;
  background-color:var(--surface);
  background-image:var(--cover-hero-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.cover-hero::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,19,24,.72) 0%, rgba(19,19,24,.88) 100%);
}
.cover-hero .wrap{position:relative; z-index:1;}
@media (max-width:860px){
  .cover-hero{padding:48px 0 64px; background-image:var(--cover-hero-bg-mobile); background-size:contain; background-position:center top;}
}
.hero-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px 20px;
}
.hero-top{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;}
.app-icon{
  flex-shrink:0;
  width:84px; height:84px; border-radius:20px;
  background:#fff;
  border:1px solid var(--accent-dim);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.app-icon img{width:100%; height:100%; object-fit:cover; display:block;}
.author-avatar{
  flex-shrink:0;
  width:84px; height:84px; border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.author-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-id{flex:1; min-width:220px;}
.hero-name-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.hero-name{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3vw,32px); line-height:1.15;}
.check{color:var(--accent); font-size:18px;}
.hero-dev{
  color:var(--text-dim); font-size:12px; margin-top:0px; line-height:1.3;
  display:flex; align-items:center; gap:6px;
}
.badges{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--radius-pill);
}
.badge-verified{background:rgba(57,217,138,.14); color:var(--green); border:1px solid rgba(57,217,138,.3);}
.badge-verified[role="button"]{cursor:pointer; transition:background .15s;}
.badge-verified[role="button"]:hover{background:rgba(57,217,138,.22);}
.badge-warning{background:rgba(246,185,59,.14); color:var(--gold); border:1px solid rgba(246,185,59,.35); cursor:pointer; transition:background .15s;}
.badge-warning:hover{background:rgba(246,185,59,.22);}
.badge-rating{background:var(--surface-2); color:var(--text); border:1px solid var(--border);}
.badge-rating .star{color:var(--gold);}
.hero-actions{display:flex; gap:10px; align-self:flex-start;}

@media (max-width:480px){
  .hero-top{
    display:grid;
    grid-template-columns:100px 1fr;
    column-gap:20px; row-gap:6px;
    align-items:start;
  }
  .app-icon{width:100px; height:100px; border-radius:0; font-size:22px; grid-column:1; grid-row:1 / 4;}
  .hero-id{display:contents;}
  .hero-name-row{grid-column:2; grid-row:1;}
  .hero-dev{grid-column:2; grid-row:2;}
  .badges{grid-column:2; grid-row:3; display:flex; gap:5px; flex-wrap:wrap; margin-top:2px;}
  .badge-verified,
  .badge-warning,
  .badge-rating{width:auto; font-size:9.5px; padding:3px 7px; gap:4px;}
  .hero-actions{grid-column:1 / -1; grid-row:4; justify-content:flex-end;}
}
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:border-color .15s, color .15s;
}
.icon-btn:hover{border-color:var(--accent); color:var(--accent);}
.icon-btn.is-active{color:var(--accent); border-color:var(--accent-dim);}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  margin-top:22px;
}
.stat-cell{
  background:var(--surface-3);
  padding:12px 14px;
  text-align:left;
  min-width:0;
}
.stat-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:5px;
}
.stat-value{font-weight:700; font-size:15px; overflow-wrap:break-word; word-break:break-word;}
.stat-sub{font-size:11px; color:var(--text-dim); margin-top:2px;}
.stat-value .star{color:var(--gold);}

.stat-cell-action{
  cursor:pointer;
  transition:background .15s;
}
.stat-cell-action:hover{background:var(--surface-2);}
.stat-value-link{
  display:flex; align-items:center; gap:6px; color:var(--green);
}
.stat-value-link svg{flex-shrink:0;}
.stat-value-link .info-ic{color:var(--text-faint); margin-left:auto;}
.stat-value-warning{color:var(--gold);}

.hero-cta{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;}
.affiliate-disclosure{margin-top:10px; font-size:12.5px; color:var(--text-faint);}
.affiliate-disclosure a{color:var(--text-faint); text-decoration:underline;}
.affiliate-disclosure a:hover{color:var(--accent);}
@media (max-width:480px){
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:10px 24px; border-radius:var(--radius-btn);
  font-weight:700; font-size:15px;
  transition:filter .15s, background .15s, border-color .15s;
}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-primary .size{font-family:var(--font-mono); font-weight:500; opacity:.75; font-size:13px;}
.btn-ghost{
  border:1px solid var(--accent-dim); 
  color:var(--text);}

.btn-ghost:hover{background:var(--surface-2);}

.layout{
  display:grid;
  grid-template-columns:1fr;
  padding-top:20px;
  padding-bottom:60px;
  align-items:start;
}
.layout > *{min-width:0;}
@media (max-width:860px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px 26px;
  margin-bottom:20px;
}
.panel h2{
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px,6vw,30px);
  margin-bottom:16px;
}

.panel h3{
  font-size: 22px;
  color: var(--text-muted);
}

.dashed-head{
  padding-bottom:12px; margin-bottom:14px;
  border-bottom:1px dashed var(--border);
  font-weight:700; font-size:15.5px;
}
.body-text{
  color:var(--text-dim);
  font-size:16px; line-height:1.7;}

.body-text + .body-text{margin-top:12px;}
.about-body h3{font-size:19px; color:var(--text); margin:22px 0 8px;}
.about-body h3:first-child{margin-top:0;}
.bullets{margin-top:10px; display:flex; flex-direction:column; gap:8px;}
.bullets li{
  display:flex; gap:9px; font-size:14px; color:var(--text-dim); line-height:1.5;
}
.bullets li::before{content:"•"; color:var(--accent); flex-shrink:0;}

.pros-cons{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:520px){.pros-cons{grid-template-columns:1fr;}}
.pc-col h3{font-size:18px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:9px; font-family:var(--font-mono);}

.pc-col.pros h3{color:var(--green);}
.pc-col.cons h3{color:var(--danger);}
.pc-col li{display:flex; gap:8px; font-size:14px; 
  color:#cfcfcf; 

  padding:5px 0; align-items:flex-start;}
  
.pc-col.pros li::before{content:"+"; color:var(--green); font-weight:700;
font-size: 18px; margin-top:-6px;
}

.pc-col.cons li::before{content:"–"; color:var(--danger); font-weight:700;
font-size: 18px; margin-top:-6px;
}

.shots-gallery-wrap{
  overflow:hidden; margin-bottom:6px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  margin-bottom: 30px;
}
.shots-track{
  display:flex; width:max-content;
  animation:shots-scroll 110s linear infinite;
}
.shots-track:hover{animation-play-state:paused;}
@media (max-width:760px){
  .shots-gallery-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .shots-track{animation:none; touch-action:pan-x;}
}
@keyframes shots-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.shot-thumb{
  flex-shrink:0; width:150px; margin-right:12px; height:auto;
  border-radius:14px; border:1px solid var(--border);
  cursor:pointer; transition:border-color .15s, transform .15s;
}
.shot-thumb:hover{border-color:var(--accent-dim); transform:translateY(-3px);}
.shot-thumb img{width:100%; height:auto; display:block; border-radius:13px;}

.changelog-ver{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
}
.changelog-ver .v{font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:14px;}
.changelog-ver .d{font-size:12px; color:var(--text-faint);}

.specs-group{margin-top:24px;}
.specs-group:first-child{margin-top:0;}
.specs-group-title{
  padding-bottom:10px; 
  margin-bottom:4px;  
  font-weight:700; 
  font-size:18px;
}
.specs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.specs-col{
  min-width:0;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:2px 16px;
}
.spec-cell{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:10px 0; border-bottom:1px dashed var(--border-soft);
  min-width:0;
}
.spec-cell:last-child{border-bottom:none;}
.spec-cell .k{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  color: #147b4c;
  max-width:60%;
  overflow-wrap:break-word;
}
.spec-cell .v{
  flex:1;
  min-width:0;
  font-weight:600;
  font-size:14px;
  text-align:right;
  overflow-wrap:break-word;}
.spec-cell .v a{color:var(--accent); font-weight:600;}

@media (max-width:380px){
  .spec-cell{flex-direction:column; align-items:flex-start; gap:4px;}
  .spec-cell .k{max-width:100%;}
  .spec-cell .v{flex:none; width:100%; text-align:left;}
}

@media (max-width:600px){
  .specs-grid{grid-template-columns:1fr;}
}

.bonus-card{
  border-radius:var(--radius-lg);
  padding:22px 24px;
  background:
    radial-gradient(360px 180px at 100% 0%, rgba(200,75,255,.22), transparent 65%),
    linear-gradient(135deg,#1A2E33,#131A2A);
  border:1px solid var(--accent-dim);
  margin-bottom:20px;
}
.bonus-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;}
.bonus-title{font-family:var(--font-display); font-weight:700; font-size:19px;}
.bonus-desc{color:var(--text-dim); font-size:14px; margin-top:6px;}
.bonus-code{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-weight:700; font-size:20px;
  background:var(--surface-3); border:1px dashed var(--accent-dim);
  padding:13px 18px; border-radius:var(--radius-sm); color:var(--accent);
  white-space:nowrap; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.bonus-code:hover{background:var(--surface-2); border-color:var(--accent);}
.bonus-code .copy-icon,
.bonus-code .check-icon{display:flex; flex-shrink:0;}
.bonus-code .check-icon{display:none; color:var(--green);}
.bonus-code.copied .copy-icon{display:none;}
.bonus-code.copied .check-icon{display:flex;}
.bonus-code.copied{border-color:var(--green); color:var(--green);}
.bonus-meta{
  display:flex; gap:18px; margin-top:16px; font-size:12.5px; color:var(--text-dim);
  font-family:var(--font-mono);
}

.security-list{display:flex; flex-direction:column; gap:10px;}
.security-row{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; color:var(--text-dim);
  padding:10px 0; border-bottom:1px solid var(--border-soft);
}
.security-row:last-child{border-bottom:none;}
.security-row .ok{color:var(--green); flex-shrink:0;}
.hash{
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint);
  word-break:break-all; margin-top:6px;
}

.dev-card{display:flex; flex-direction:column; gap:14px;}
.dev-head{display:flex; align-items:center; gap:14px;}
.dev-name{font-family:var(--font-display); font-weight:700; font-size:17px;}
.dev-meta{font-size:14px; color:var(--text-dim); line-height:1.6; max-width:64ch;}
.support-chips{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0;}
.support-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:13px; color:var(--text-dim);
}
.support-chip svg{color:var(--accent); flex-shrink:0;}
.stat-grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:640px){.stat-grid-4{grid-template-columns:repeat(2,1fr);}}

.method-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px;}
@media (max-width:760px){.method-grid{grid-template-columns:1fr;}}
.method-card{
  background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:18px;
}
.method-card-icon{font-size:22px; margin-bottom:10px; display:block;}
.method-card h3{font-size:14.5px; font-weight:700; margin-bottom:6px;}
.method-card p{font-size:13px; color:var(--text-dim); line-height:1.55;}

.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.related-grid > *{min-width:0;}
.related-grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){.related-grid-4{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.related-grid{grid-template-columns:1fr 1fr;} .related-grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:420px){.related-grid{grid-template-columns:1fr;}}
.related-card{
  position:relative;
  background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; display:flex; align-items:center; gap:10px;
  transition:border-color .15s, transform .15s;
}
.related-card:hover{border-color:var(--accent-dim); transform:translateY(-2px);}
.mini-icon{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.mini-icon img{width:100%; height:100%; object-fit:cover; display:block;}
.related-name{font-weight:700; font-size:13.5px; padding-right:38px;}
.related-tag{font-size:11px; color:var(--text-faint);}
.related-stats{
  position:absolute; top:10px; right:12px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--gold);
}

.reviews-heading{font-size:26px; margin-bottom:0;}
.reviews-summary{display:flex; gap:36px; align-items:center; flex-wrap:wrap;}
.score-block{
  background:linear-gradient(160deg,#F6B93B,#E08A1E);
  color:#241505;
  border-radius:var(--radius-sm);
  padding:30px 40px;
  text-align:center;
  flex-shrink:0;
  margin:0 auto;
}
.score-num{font-family:var(--font-display); font-weight:700; font-size:54px; line-height:1;}
.score-num span{font-size:22px; font-weight:600;}
.score-stars{position:relative; display:inline-block; margin:10px 0; font-size:20px; line-height:1;}
.score-stars-track{color:var(--border); white-space:nowrap;}
.score-stars-fill{position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:var(--gold);}
.score-count{font-size:14px; font-weight:600;}
.bars{flex:1; min-width:260px; display:flex; flex-direction:column; gap:12px;}
.bar-row{display:grid; grid-template-columns:48px 1fr 52px; align-items:center; gap:14px; font-size:15px; color:var(--text-dim);}
.bar-track{height:11px; background:var(--surface-2); border-radius:6px; overflow:hidden;}
.bar-fill{height:100%; background:var(--gold); border-radius:6px;}

.vote-widget{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  margin-top:22px; padding-top:22px; border-top:1px dashed var(--border);
}
.vote-widget-label{font-size:14.5px; color:var(--text-dim);}
.vote-widget-stars{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:8px; font-size:24px; color:var(--border);}
.vote-widget-stars .vote-star-input{position:absolute; appearance:none; -webkit-appearance:none; opacity:0; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
.vote-widget-stars .vote-star{cursor:pointer; transition:color .1s;}
.vote-widget-stars .vote-star:hover,
.vote-widget-stars .vote-star:hover ~ .vote-star,
.vote-widget-stars .vote-star-input:checked ~ .vote-star{color:var(--gold);}
.vote-widget-stars .vote-star-input:focus-visible + .vote-star{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;}
.vote-widget.is-voted .vote-widget-stars .vote-star, .vote-widget.is-voted .vote-widget-stars .vote-star-input{cursor:default; pointer-events:none;}
.vote-widget.is-loading .vote-widget-stars .vote-star{cursor:wait;}
.vote-widget-message{font-size:13.5px; color:var(--text-faint);}

.section-head-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding-bottom:18px; margin-bottom:24px; border-bottom:1px dashed var(--border);
}
.section-head-row h2{margin-bottom:0;}
.sort-select{
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--text-dim);
  min-width:0;
}
.sort-select select{
  background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 14px; font-size:14px; color:var(--text);
  min-width:0; max-width:100%;
}

.review-card{
  padding:26px 0; border-bottom:2px solid var(--border);
  display:flex; flex-direction:column; gap:14px;
}
.review-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.reviewer{display:flex; gap:14px; align-items:center; min-width:0;}
.avatar{
  width:58px; height:58px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--accent);
}
.avatar-photo{object-fit:cover;}
.reviewer-name{font-weight:700; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.reviewer-tag{font-size:13.5px; color:var(--text-faint);}
.review-date{font-size:13px; color:var(--text-faint); text-align:right; white-space:nowrap; line-height:1.5; flex-shrink:0;}
@media (max-width:480px){
  .avatar{width:42px; height:42px; font-size:15px;}
  .reviewer{gap:10px;}
  .reviewer-name{font-size:14px;}
  .reviewer-tag{font-size:12px;}
  .review-date{font-size:11px;}
}
.review-divider{border-top:1px solid var(--border-soft);}
.review-stars{color:var(--gold); font-size:19px; padding-top:2px;}
.review-body{font-size:15.5px; color:var(--text-dim); line-height:1.7;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
@media (max-width:520px){.form-grid{grid-template-columns:1fr;}}
.field label{font-size:14px; color:var(--text-dim); margin-bottom:8px; display:block;}
.field-input{position:relative;}
.field-input .field-icon{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--accent); pointer-events:none; display:flex;
}
.field-input .field-icon.field-icon-top{top:18px; transform:none;}
.field input, .field textarea, .field select{
  width:100%; background:var(--surface-3); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:16px 18px; font-size:15px; color:var(--text);
}
.field input{padding-right:44px;}
.field textarea{resize:vertical; min-height:130px; padding-right:44px;}
.star-picker{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:10px; font-size:30px; color:var(--border); margin-bottom:20px;}
.star-picker-input{position:absolute; appearance:none; -webkit-appearance:none; opacity:0; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
.star-picker-star{cursor:pointer; transition:color .1s;}
.star-picker-star:hover,
.star-picker-star:hover ~ .star-picker-star,
.star-picker-input:checked ~ .star-picker-star{color:var(--gold);}
.star-picker-input:focus-visible + .star-picker-star{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;}
.leave-review-title{margin-bottom:22px;}
@media (max-width:480px){
  .leave-review-title{margin-bottom:12px; font-size:20px;}
  .field label{font-size:12.5px; margin-bottom:5px;}
  .field input, .field textarea, .field select{padding:11px 14px; font-size:14px;}
  .field textarea{min-height:80px;}
  .form-grid{gap:10px; margin-bottom:10px;}
  .star-picker{font-size:22px; gap:6px; margin-bottom:12px;}
  .field-icon svg{width:15px; height:15px;}
  .field-icon{right:13px;}
  .field-icon.field-icon-top{top:14px;}
  .btn-review-submit{padding:8px 20px; font-size:13.5px;}
}

.newsletter-band{
  max-width:var(--maxw); margin:0 auto 40px; padding:0 24px;
}
.newsletter-inner{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  padding:38px 30px;
  background:
    radial-gradient(480px 240px at 6% 20%, rgba(255,107,157,.32), transparent 60%),
    radial-gradient(460px 260px at 96% 90%, rgba(178,64,255,.34), transparent 60%),
    radial-gradient(380px 200px at 60% -10%, rgba(111,234,233,.14), transparent 55%),
    linear-gradient(135deg,#241243,#120E22);
  text-align:center;
}
.newsletter-inner h2{font-family:var(--font-display); font-weight:700; font-size:24px; margin-bottom:8px;}
.newsletter-inner p{color:var(--text-dim); font-size:14px; max-width:52ch; margin:0 auto 20px;}
.newsletter-form{
  display:flex; max-width:420px; margin:0 auto;
  background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius-btn);
  padding:5px;
}
.newsletter-form input{flex:1; min-width:0; padding:10px 16px; font-size:13.5px;}
.newsletter-form button{
  background:var(--accent); color:var(--accent-ink); border-radius:calc(var(--radius-btn) - 4px);
  padding:10px 18px; font-weight:700; font-size:13px;
}

footer{border-top:1px solid var(--border-soft); padding:64px 0 36px; 
  background:#070716;
}

.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:28px; margin-bottom:36px;
}
.footer-grid > *{min-width:0;}
.footer-nav-cols{display:contents;}
@media (max-width:960px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr;}}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-about p{color:var(--text-dim); font-size:15px; line-height:1.6; margin-top:16px; max-width:36ch;}
.footer-col-title{font-size:19px; font-weight:700; margin-bottom:20px;}
.footer-col ul{display:flex; flex-direction:column; gap:14px;}
.footer-col a{font-size:15px; color:var(--text-dim);}
.footer-col a:hover{color:var(--accent);}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr; gap:36px;}
  .footer-about{text-align:center;}
  .footer-about .brand{justify-content:center;}
  .footer-about p{margin-left:auto; margin-right:auto;}
  .footer-nav-cols{
    display:flex; flex-direction:column; align-items:flex-start;
    gap:36px; width:max-content; max-width:100%; margin:0 auto;
  }
  .footer-col{display:flex; flex-direction:column; align-items:flex-start; min-width:0; margin-left:20px;}
}
.footer-disclaimer{
  color:var(--text-faint); font-size:13px; line-height:1.65;
  padding-top:28px; border-top:1px solid var(--border-soft);
  max-width:76ch;
}
.footer-badges{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 32px;}
.footer-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--text-dim);
  padding:8px 15px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface-2);
}
.footer-badge svg{flex-shrink:0;}
.footer-badge-logo{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; border-radius:var(--radius-sm);
  background:#fff; transition:filter .15s;
}
.footer-badge-logo:hover{filter:brightness(1.05);}
.footer-badge-logo img{height:20px; width:auto; display:block;}
.footer-badge-logo-dark{background:var(--surface-2);}
.footer-badge-age{
  color:var(--danger); border-color:rgba(241,108,108,.35); background:rgba(241,108,108,.1);
}
.footer-bottom{
  border-top:1px solid var(--border-soft); padding-top:26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:13.5px; color:var(--text-faint);
}
.footer-bottom a{color:var(--text-faint);}
.footer-bottom .links{display:flex; gap:22px;}

.modal-overlay{
  display:none;
  position:fixed; inset:0; z-index:100;
  background:rgba(6,7,11,.72);
}
.modal-overlay.open{display:block;}
.modal-close{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); transition:background .15s, color .15s;
}
.modal-close:hover{background:var(--surface-2); color:var(--text);}

.search-modal{
  max-width:640px; margin:10vh auto 0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.65);
  padding:6px;
}
@media (max-width:700px){.search-modal{margin:0; max-width:100%; min-height:100vh; border-radius:0; border:none;}}
.search-modal-head{display:flex; align-items:center; gap:14px; padding:16px 18px; color:var(--text-faint);}
.search-modal-head input{
  flex:1; font-size:18px; background:none; border:none; color:var(--text); padding:0;
}
.search-modal-head input::placeholder{color:var(--text-faint);}
.search-modal-hint{
  padding:14px 18px 18px; border-top:1px solid var(--border-soft);
  font-size:13px; color:var(--text-faint);
}

.drawer-overlay{display:none; opacity:0; transition:opacity .2s;}
.drawer-overlay.open{display:block; opacity:1;}
.security-drawer{
  position:absolute; top:0; right:0; bottom:0;
  width:440px; max-width:100%;
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.55);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s ease;
}
.drawer-overlay.open .security-drawer{transform:translateX(0);}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--border-soft); flex-shrink:0;
}
.drawer-title{font-family:var(--font-display); font-weight:700; font-size:19px;}
.drawer-body{padding:22px; overflow-y:auto; flex:1;}
.drawer-app-row{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.drawer-app-name{font-weight:700; font-size:16px;}
.drawer-app-meta{font-size:13px; color:var(--text-faint); margin-top:2px;}

.drawer-status{
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(57,217,138,.1); border:1px solid rgba(57,217,138,.3);
  border-radius:var(--radius-sm); padding:16px; margin-bottom:20px;
}
.drawer-status svg{color:var(--green); flex-shrink:0; margin-top:1px;}
.drawer-status-title{font-weight:700; font-size:14.5px; color:var(--green); margin-bottom:4px;}
.drawer-status-desc{font-size:13px; color:var(--text-dim); line-height:1.55;}
.drawer-status-warning{background:rgba(246,185,59,.1); border-color:rgba(246,185,59,.35);}
.drawer-status-warning svg{color:var(--gold);}
.drawer-status-warning .drawer-status-title{color:var(--gold);}

.drawer-checklist{display:flex; flex-direction:column; gap:12px; margin-bottom:22px;}
.drawer-check{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text-dim); line-height:1.5;}
.drawer-check svg{color:var(--green); flex-shrink:0; margin-top:3px;}
.drawer-check strong{color:var(--text);}

.drawer-vt-label{text-align:center; font-size:13px; color:var(--text-faint); margin-bottom:10px;}

.drawer-divider{border-top:1px solid var(--border-soft); margin:22px 0;}

.drawer-link-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px dashed var(--border-soft);
}
.drawer-link-row:last-of-type{border-bottom:none;}
.drawer-link-row svg{color:var(--accent); flex-shrink:0;}
.drawer-link-row strong{display:block; font-size:14px; color:var(--text);}
.drawer-link-row span{display:block; font-size:12.5px; color:var(--text-faint); margin-top:1px;}

.download-modal{position:relative; max-width:640px; padding:38px 34px 34px;}
.download-modal-close{position:absolute; top:18px; right:18px;}
.download-modal-head{text-align:center; padding:0 20px; margin-bottom:8px;}
.download-modal-warn{
  font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--danger); margin-bottom:10px;
}
.download-modal-title{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,4vw,30px);}
.suggestion-list{display:flex; flex-direction:column; gap:14px;}
.suggestion-row{
  display:flex; align-items:center; gap:16px;
  background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:16px 18px;
  transition:border-color .15s, transform .15s;
}
.suggestion-row:hover{border-color:var(--gold); transform:translateY(-2px);}
.suggestion-icon{
  width:58px; height:58px; border-radius:14px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.suggestion-icon img{width:100%; height:100%; object-fit:cover; display:block;}
.suggestion-info{flex:1; min-width:0;}
.suggestion-name-row{display:flex; align-items:center; gap:10px; min-width:0;}
.suggestion-name{font-weight:700; font-size:17px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.suggestion-stars{color:var(--gold); font-weight:700; font-size:13px; flex-shrink:0;}
.suggestion-tagline{font-size:13px; color:var(--text-faint); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.suggestion-promo{
  display:inline-flex; align-items:center; gap:4px; margin-top:6px;
  font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--gold);
  background:rgba(246,185,59,.12); border:1px solid rgba(246,185,59,.35);
  padding:3px 10px; border-radius:var(--radius-pill);
}
.suggestion-btn-form{flex-shrink:0;}
.suggestion-btn{border-radius:999px; padding:12px 24px; font-size:14.5px; box-shadow:0 8px 20px -8px rgba(57,96,250,.6);}
.suggestion-btn:hover{box-shadow:0 10px 24px -6px rgba(57,96,250,.75);}
@media (max-width:480px){
  .download-modal{padding:30px 20px 24px;}
  .suggestion-row{padding:14px; flex-wrap:wrap; row-gap:14px;}
  .suggestion-btn-form{flex:1 1 100%; width:100%;}
  .suggestion-btn{width:100%; padding:12px 20px; font-size:14px;}
  .suggestion-tagline{white-space:normal;}
}

.drawer-hash-box{
  background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:16px; margin-top:22px;
}
.drawer-hash-label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-family:var(--font-mono); margin-bottom:6px;}
.drawer-hash-value{font-family:var(--font-mono); font-size:12px; color:var(--text-dim); word-break:break-all;}

.lightbox-overlay{
  background:rgba(4,5,8,.92);
  display:none; align-items:center; justify-content:center;
}
.lightbox-overlay.open{display:flex;}
.lightbox-stage{
  position:relative;
  max-width:min(90vw, 480px);
  max-height:88vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-stage img{
  max-width:100%; max-height:88vh;
  border-radius:14px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
}
.lightbox-counter{
  position:absolute; bottom:-34px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:13px; color:var(--text-dim);
  white-space:nowrap;
}
.lightbox-close{
  position:absolute; top:20px; right:20px; z-index:3;
  width:44px; height:44px;
  background:rgba(15,16,22,.88); border:1px solid var(--border);
  color:var(--text);
}
.lightbox-close:hover{background:rgba(30,31,40,.92);}
.lightbox-nav{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:rgba(15,16,22,.88); border:1px solid var(--border);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
  touch-action:manipulation;
}
.lightbox-nav:hover{background:rgba(30,31,40,.92);}
.lightbox-nav:disabled{opacity:.3; cursor:default;}
.lightbox-nav:disabled:hover{background:rgba(15,16,22,.88);}
@media (max-width:640px){
  .lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px;}
  .lightbox-prev{left:20px;}
  .lightbox-next{right:20px;}
  .lightbox-stage{max-width:92vw;}
}

.article-lightbox-stage{max-width:min(92vw, 1100px);}
.article-lightbox-stage img{max-height:82vh;}

.article-figure{margin:28px 0; text-align:center;}
.article-image-trigger{
  display:block; width:100%; padding:0; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface-2); overflow:hidden; cursor:zoom-in; line-height:0;
}
.article-image-trigger img{width:100%; height:auto; display:block; transition:transform .25s ease;}
.article-image-trigger:hover img{transform:scale(1.02);}
.article-image-trigger:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.article-figure figcaption{margin-top:10px; font-size:13.5px; color:var(--text-dim); line-height:1.5;}
.article-body img.article-image-inline{cursor:zoom-in; border-radius:var(--radius-lg);}

.home-hero{
  position:relative;
  padding:44px 0 48px;
  background-image:var(--home-hero-bg);
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--border-soft);
}
.home-hero::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(19,19,24,.94) 0%, rgba(19,19,24,.8) 40%, rgba(19,19,24,.35) 75%, rgba(19,19,24,.15) 100%);
}
.home-hero-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,620px) 1fr;
  gap:32px;
  align-items:center;
  min-height:360px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:6px 8px 6px 6px;
  font-size:13.5px;
  color:var(--text-dim);
  margin-bottom:24px;
}
.hero-badge .chip{
  background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:12.5px;
  padding:5px 12px; border-radius:var(--radius-pill);
}
.home-hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px,4.6vw,58px);
  line-height:1.08;
  margin-bottom:22px;
}
.home-hero-sub{
  font-size:16.5px; color:var(--text-dim); line-height:1.65;
  max-width:52ch; margin-bottom:30px;
}
.home-hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.home-hero-cta .btn{padding:14px 26px; font-size:15px; min-width:237px; justify-content:center;}
@media (max-width:860px){
  .home-hero-inner{grid-template-columns:1fr; min-height:0;}
  .home-hero{
    padding:44px 0 40px;
    background-image:var(--home-hero-bg-mobile);
    background-position:center;
  }
  .home-hero::before{
    background:linear-gradient(180deg, rgba(19,19,24,.9) 0%, rgba(19,19,24,.75) 55%, rgba(19,19,24,.88) 100%);
  }
}

.section{
  padding:10px 0;
  
}

#apps{margin-top:30px;}


.section-top{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; margin-bottom:28px; flex-wrap:wrap;
}
.section-top > *{min-width:0;}
.section-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px; display:block;
}
.section-title{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3vw,32px); overflow-wrap:break-word;}
@media (max-width:760px){
  .section-top{margin-bottom:8px;}
  .section-top > div:first-child{
    display:flex; flex-direction:column; gap:2px;
  }
  .section-eyebrow{margin-bottom:0;}
}

.live-matches-count{font-size:13.5px; color:var(--text-faint);}

.sport-pills{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;}
.sport-pill{
  display:flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface);
  font-size:13.5px; font-weight:600; color:var(--text-dim);
  transition:background .15s, border-color .15s, color .15s;
  white-space:nowrap;
}
.sport-pill:hover:not(.active){border-color:var(--accent-dim);}
.sport-pill.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.sport-pill .count{font-family:var(--font-mono); font-size:11.5px; opacity:.75;}

.match-list{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; align-items:start;
}
@media (max-width:960px){.match-list{grid-template-columns:1fr;}}

.sport-group{
  border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden;
}
.sport-group[open]{grid-column:1 / -1;}
.sport-group-body{padding:10px 20px 20px; border-top:1px solid var(--border-soft);}
.sport-group-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; background:var(--surface-2);
  cursor:pointer; list-style:none;
}
.sport-group-head::-webkit-details-marker{display:none;}
.sport-group-title{font-family:var(--font-display); font-weight:700; font-size:16px;}
.sport-group-icon{margin-right:10px;}

.match-group-meta{display:flex; align-items:center; gap:10px;}
.match-group-meta .chevron{color:var(--text-faint); transition:transform .2s; flex-shrink:0;}
.sport-group[open] .match-group-meta .chevron{transform:rotate(180deg);}
.match-group-count{color:var(--text-faint); font-size:11.5px; font-family:var(--font-mono); flex-shrink:0;}

.match-time{font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); flex-shrink:0; width:42px;}

.section-link{
  font-size:14px; font-weight:600; color:var(--accent);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}

.steps-list{display:flex; flex-direction:column; gap:56px;}
.step-row{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.step-row:nth-child(even) .step-media{order:2;}
.step-row:nth-child(even) .step-text{order:1;}
.step-media img{width:100%; height:auto; display:block; border-radius:var(--radius-lg);}
.step-num{
  font-family:var(--font-mono); font-size:13px; color:var(--accent);
  margin-bottom:10px; display:block;
}
.step-text h3{font-family:var(--font-display); font-weight:700; font-size:24px; margin-bottom:12px;}
.step-text p{color:var(--text-dim); font-size:15px; line-height:1.65; max-width:44ch;}
@media (max-width:760px){
  .step-row{grid-template-columns:1fr; gap:22px;}
  .step-row:nth-child(even) .step-media, .step-row:nth-child(even) .step-text{order:0;}
}

.testimonial-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:36px; max-width:640px; margin:0 auto; text-align:center;
}
.testimonial-stars{color:var(--gold); font-size:18px; margin-bottom:16px;}
.testimonial-quote{font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.5; margin-bottom:22px;}
.testimonial-author{display:flex; align-items:center; justify-content:center; gap:12px;}
.testimonial-author .avatar{width:42px; height:42px;}
.testimonial-author-name{font-weight:700; font-size:14px;}
.testimonial-author-tag{font-size:12.5px; color:var(--text-faint);}

.faq-list{display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; align-items:start;}
@media (max-width:700px){.faq-list{grid-template-columns:1fr;}}
.faq-item{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:4px 22px;
}
.faq-item summary{
  padding:18px 0; cursor:pointer; font-weight:600; font-size:15px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chevron{color:var(--text-faint); transition:transform .2s; flex-shrink:0;}
.faq-item[open] summary .chevron{transform:rotate(180deg);}
.faq-item p{color:var(--text-dim); font-size:14px; line-height:1.6; padding-bottom:18px; max-width:64ch;}

.app-cards-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:32px 16px;
}
@media (max-width:1100px){.app-cards-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){
  .app-cards-grid{grid-template-columns:1fr; gap:18px;}
  .app-cards-grid:not(.is-expanded) > *:nth-child(n+11){display:none;}
}
.apps-show-more{
  display:none;
  width:100%; margin-top:20px; padding:14px; border-radius:var(--radius-btn);
  border:1px solid var(--accent); background:var(--surface); color:var(--text);
  font-weight:700; font-size:14px; text-align:center;
}
@media (max-width:760px){.apps-show-more{display:block;}}
.load-more-btn{
  display:block; width:100%; margin-top:20px; padding:14px; border-radius:var(--radius-btn);
  border:1px solid var(--accent); background:var(--surface); color:var(--text);
  font-weight:700; font-size:14px; text-align:center;
}
.load-more-btn:disabled{opacity:.6; cursor:wait;}
@media (max-width:760px){
  .section-top{margin-bottom:12px;}
  .app-card2-verified{display:none;}
  .app-card2-rating{top:0; right:0; border-radius:0 var(--radius-lg) 0 var(--radius-sm);}
  .app-card2-body{padding:8px 6px;}
}
.app-card2-wrap{display:flex; flex-direction:column; gap:12px; min-width:0;}
.app-card2{
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  transition:border-color .15s, transform .15s;
}
.app-card2:hover{border-color:var(--accent-dim); transform:translateY(-3px);}
.app-card2-media{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.app-card2-media img{width:100%; height:100%; object-fit:cover; display:block;}
.app-card2-verified{
  position:absolute; top:8px; left:8px; z-index:1;
  font-size:10px; font-weight:600; color:var(--green);
  background:rgba(19,19,24,.85); border:1px solid rgba(57,217,138,.4);
  padding:3px 8px; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.app-card2-rating{
  position:absolute; top:8px; right:8px; z-index:1;
  display:flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; color:var(--gold);
  background:rgba(19,19,24,.85); border:1px solid var(--border);
  padding:3px 8px; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.app-card2-body{padding:12px 16px; text-align:center;}
.app-card2-name{font-family:var(--font-display); font-weight:700; font-size:15.5px;}
@media (max-width:760px){
  .app-card2-body .app-card2-name{font-size:22px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}
.app-card2-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:9px; border-radius:var(--radius-btn);
  background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:13px;
  transition:filter .15s;
}
.app-card2-btn:hover{filter:brightness(1.08);}

.bonus-mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:860px){.bonus-mini-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.bonus-mini-grid{grid-template-columns:1fr;}}
.bonus-mini{
  border-radius:var(--radius-lg); padding:20px;
  background:
    radial-gradient(280px 140px at 100% 0%, rgba(200,75,255,.18), transparent 65%),
    linear-gradient(135deg,#1A2E33,#131A2A);
  border:1px solid var(--accent-dim);
}
.bonus-mini-app{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.bonus-mini-icon{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:#fff; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.bonus-mini-icon img{width:100%; height:100%; object-fit:cover; display:block;}
.bonus-mini-app-name{font-weight:700; font-size:14px;}
.bonus-mini-title{font-size:15px; font-weight:700; margin-bottom:6px; line-height:1.4;}
.bonus-mini-desc{font-size:13px; color:var(--text-dim); margin-bottom:14px; line-height:1.5;}
.bonus-mini-code{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; color:var(--text-faint);
}
.bonus-mini-code-btn{
  font-size:13px; font-weight:700; padding:7px 11px; gap:7px;
}

.trust-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media (max-width:700px){.trust-grid{grid-template-columns:1fr;}}
.trust-item{
  text-align:left;
  display:flex; flex-direction:column; gap:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px;
}
.trust-item-head{display:flex; align-items:center; gap:14px;}
.trust-item-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--green);
}
.trust-item-icon svg{width:22px; height:22px;}
.trust-item-title{font-family:var(--font-display); font-weight:700; font-size:18px;}
.trust-item-desc{font-size:15px; color:var(--text-dim); line-height:1.6;}

.guides-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:760px){.guides-grid{grid-template-columns:1fr;}}
.guide-card{
  background:var(--surface); 
  
  border-radius:var(--radius-lg);
  transition:border-color .15s, transform .15s;
}
.guide-card:hover{border-color:var(--accent-dim); transform:translateY(-3px);}
.guide-card-cover{
  height:150px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  overflow:hidden;
  background:
    radial-gradient(220px 120px at 20% 0%, rgba(57,96,250,.28), transparent 65%),
    linear-gradient(135deg,#1B1F33,#12141C);
}
.guide-card-body{padding:20px;}
.guide-card-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}
.guide-card-title{font-family:var(--font-display); font-weight:700; font-size:17px; margin-bottom:8px; line-height:1.35;}
.guide-card-excerpt{font-size:13.5px; color:var(--text-dim); line-height:1.55; margin-bottom:14px;}
.guide-card-date{font-size:12px; color:var(--text-faint);}

.games-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
@media (max-width:960px){.games-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.games-grid{grid-template-columns:1fr 1fr;}}
.game-card{display:flex; flex-direction:column; gap:10px;}
.game-tile{
  aspect-ratio:1 / 1; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  padding:14px; text-align:center;
  border:1px solid var(--border);
  transition:transform .15s;
}
.game-card:hover .game-tile{transform:translateY(-4px);}
.game-tile-name{
  font-family:var(--font-display); font-weight:700; font-size:16.5px; line-height:1.25;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.game-tag{font-size:12px; color:var(--text-faint); text-align:center;}

.game-tile-aviator{background:linear-gradient(135deg,#E63950,#7A1230);}
.game-tile-sweet{background:linear-gradient(135deg,#FF6FA5,#7A2FB8);}
.game-tile-fruit{background:linear-gradient(135deg,#4CD97B,#136B37);}
.game-tile-chicken{background:linear-gradient(135deg,#FF4D6D,#9C1650);}
.game-tile-olympus{background:linear-gradient(135deg,#7A4FE0,#1E0F45);}
.game-tile-olympus .game-tile-name{color:var(--gold);}
.game-tile-sugar{background:linear-gradient(135deg,#FF8A3D,#C21E5C);}

.match-table-wrap{overflow-x:auto;}
.match-table{width:100%; border-collapse:collapse; min-width:640px;}
.match-table th{
  text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-faint); font-weight:600; padding:0 14px 10px;
}
.match-table td{
  padding:14px; border-top:1px solid var(--border-soft);
  font-size:14px; color:var(--text-dim); vertical-align:middle; white-space:nowrap;
}
.make-bet-form{display:contents;}
.match-table-league{font-size:12px; color:var(--text-faint); margin-bottom:4px;}
.match-table-teams{display:flex; align-items:center; gap:6px; color:var(--text); font-weight:600; white-space:normal;}
.match-table-teams img{border-radius:4px; flex-shrink:0;}
.match-table-teams .vs{color:var(--text-faint); font-weight:400; font-size:12px;}
.match-table td:nth-child(3), .match-table td:nth-child(4), .match-table td:nth-child(5){
  font-family:var(--font-mono); font-weight:700; color:var(--text);
}

.casino-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
@media (max-width:1100px){.casino-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.casino-grid{grid-template-columns:1fr;}}
.casino-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:border-color .15s, transform .15s;
}
.casino-card:hover{border-color:var(--accent-dim); transform:translateY(-3px);}
.casino-card-media{aspect-ratio:5 / 3; background:var(--surface-2); overflow:hidden;}
.casino-card-media img{width:100%; height:100%; object-fit:cover; display:block;}
.casino-card-body{padding:14px 16px; text-align:center;}
.casino-card-name{font-family:var(--font-display); font-weight:700; font-size:15.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;}
.casino-card-provider{font-size:12px; color:var(--text-faint); margin-top:2px; margin-bottom:12px;}
.casino-card-btn{width:100%;}

.blog-pills{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;}

.article-byline{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.article-byline a{font-weight:700; font-size:14px;}
.article-byline a:hover{color:var(--accent);}
.article-byline-meta{font-size:12.5px; color:var(--text-faint); margin-top:2px;}

.article-layout{
  display:grid; grid-template-columns:1fr 260px; gap:36px;
  padding-top:20px; padding-bottom:60px; align-items:start;
}
.article-layout > *{min-width:0;}
@media (max-width:960px){.article-layout{grid-template-columns:1fr;}}
.article-toc{
  position:sticky; top:88px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px;
}
@media (max-width:960px){.article-toc{position:static;}}
.article-toc-title{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:12px;
  width:100%; text-align:left; cursor:default;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.article-toc-chevron{display:none; flex-shrink:0; transition:transform .2s;}
.article-toc-links{counter-reset:toc-item;}
.article-toc a{
  display:flex; align-items:center; gap:10px;
  padding:7px 0; font-size:13.5px; color:var(--text-dim);
  border-bottom:1px dashed var(--border-soft);
  counter-increment:toc-item;
}
.article-toc a::before{
  content:counter(toc-item);
  flex-shrink:0;
  width:20px; height:20px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--accent);
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.article-toc a:last-child{border-bottom:none;}
.article-toc a:hover{color:var(--accent);}
@media (max-width:960px){
  .article-layout{gap:16px; padding-top:8px;}
  .article-toc{order:-1; padding:14px 16px;}
  .article-toc-title{cursor:pointer; margin-bottom:0;}
  .article-toc-chevron{display:block;}
  .article-toc.is-open .article-toc-chevron{transform:rotate(180deg);}
  .article-toc.is-open{padding-bottom:16px;}
  .article-toc-links{display:none;}
  .article-toc.is-open .article-toc-links{display:block; margin-top:12px;}
}

.article-body h2{
  font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--text);
  margin:28px 0 12px;
}
.article-body a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.article-body a:hover{color:var(--text);}
.article-body ol{margin:14px 0; padding-left:0; display:flex; flex-direction:column; gap:10px; counter-reset:article-ol;}
.article-body ol li{
  color:var(--text-dim); font-size:15px; line-height:1.6;
  display:flex; gap:12px; align-items:flex-start;
  counter-increment:article-ol;
}
.article-body ol li::before{
  content:counter(article-ol);
  flex-shrink:0; margin-top:1px;
  width:22px; height:22px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--accent);
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

.stat-callout{
  float:right; clear:both; margin:0 0 20px 24px;
  background:var(--surface-2); border:1px solid var(--accent-dim); border-radius:var(--radius-lg);
  padding:20px 28px; text-align:center; min-width:140px;
}
.stat-callout-num{font-family:var(--font-display); font-weight:700; font-size:32px; color:var(--accent);}
.stat-callout-label{font-size:12px; color:var(--text-dim); margin-top:4px;}
@media (max-width:600px){.stat-callout{float:none; margin:20px 0; width:max-content;}}

.article-figure{margin:20px 0;}
.article-figure img{width:100%; border-radius:var(--radius-lg); border:1px solid var(--border);}
.article-figure figcaption{font-size:12.5px; color:var(--text-faint); text-align:center; margin-top:8px;}

.table-wrap{overflow-x:auto; margin:20px 0; border:1px solid var(--border); border-radius:var(--radius-lg);}
.data-table{width:100%; border-collapse:collapse; font-size:13.5px; white-space:nowrap;}
.data-table th{
  text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-faint); padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--border);
}
.data-table td{padding:12px 16px; border-bottom:1px solid var(--border-soft); color:var(--text-dim);}
.data-table tr:last-child td{border-bottom:none;}

.note-box{
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(246,185,59,.08); border:1px solid rgba(246,185,59,.3); border-radius:var(--radius-lg);
  padding:18px 20px; margin:20px 0;
  font-size:13.5px; color:var(--text-dim); line-height:1.6;
}
.note-box svg{color:var(--gold); flex-shrink:0; margin-top:2px;}

.article-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px;}
.article-tag{
  font-size:12px; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:6px 13px;
}

.admin-bar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:36px;
  background:var(--surface-3); border-bottom:1px solid var(--border);
  font-size:12.5px;
}
.admin-bar__inner{
  max-width:var(--maxw); margin:0 auto; height:100%; padding:0 24px;
  display:flex; align-items:center; gap:20px;
  color:var(--text-dim);
}
.admin-bar__brand{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--text); font-weight:600; text-decoration:none; white-space:nowrap;
}
.admin-bar__user{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.admin-bar__spacer{flex:1;}
.admin-bar__edit{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:var(--accent-ink);
  padding:5px 12px; border-radius:var(--radius-pill);
  text-decoration:none; font-weight:600; white-space:nowrap;
}
.admin-bar__edit:hover{background:var(--accent-dim);}
.admin-bar__link{color:var(--text-dim); text-decoration:none; white-space:nowrap; background:none; border:none; cursor:pointer; font:inherit; padding:0;}
.admin-bar__link:hover{color:var(--text);}
.admin-bar__logout-form{display:contents;}

body.has-admin-bar{padding-top:128px;}
body.has-admin-bar .site-nav{top:36px;}

@media (max-width:640px){
  .admin-bar{display:none;}
  body.has-admin-bar{padding-top:0;}
  body.has-admin-bar .site-nav{top:0;}
}

.step-carousel{
  display:flex; align-items:center; gap:10px;
}
.step-nav{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.step-nav:hover{background:var(--surface-3); color:var(--text);}

.step-track{
  flex:1; min-width:0;
  display:flex; gap:20px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  overflow-anchor:none;
  padding:4px 2px 10px;
  scrollbar-width:none;
}
.step-track::-webkit-scrollbar{display:none;}

.step-slide{
  flex:0 0 148px;
  scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.step-shot{
  position:relative;
  display:block; width:100%;
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-soft); background:var(--surface-2);
  line-height:0;
}
.step-shot img{display:block; width:100%; height:auto;}
.step-badge{
  position:absolute; top:10px; left:10px;
  min-width:24px; height:24px; padding:0 8px;
  border-radius:var(--radius-pill);
  background:rgba(19,19,24,.78);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  font-family:var(--font-mono); font-weight:600; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.step-caption{
  margin-top:12px; font-size:13px; color:var(--text-dim); line-height:1.55;
}

.step-dots{
  display:flex; justify-content:center; align-items:center; gap:7px;
  margin-top:12px;
}
.step-dot{
  width:7px; height:7px; border-radius:var(--radius-pill);
  background:var(--border); flex-shrink:0;
  transition:background .2s, width .2s;
}
.step-dot:hover{background:var(--text-faint);}
.step-dot.active{width:20px; background:var(--accent);}

.step-lightbox-stage{flex-direction:column; max-width:min(92vw, 720px); max-height:94vh;}
.step-lightbox-stage img{max-height:78vh;}
.step-lightbox-caption{
  margin-top:16px; text-align:center; font-size:14.5px; color:var(--text-dim); line-height:1.6;
  max-width:min(90vw, 480px);
}
.step-lightbox-counter{
  margin-top:10px;
  font-family:var(--font-mono); font-size:13px; color:var(--text-dim);
}

@media (max-width:640px){
  .step-nav{display:none;}
  .step-slide{flex-basis:78vw; max-width:220px;}
}

.pwa-os-toggle{
  display:flex; justify-content:center; gap:6px;
  margin-bottom:20px;
}
.pwa-os-btn{
  padding:8px 20px; border-radius:var(--radius-pill);
  border:1px solid var(--border); color:var(--text-dim);
  font-weight:600; font-size:13.5px;
  transition:background .15s, color .15s, border-color .15s;
}
.pwa-os-btn:hover{color:var(--text);}
.pwa-os-btn.active{background:var(--text); color:var(--bg); border-color:var(--text);}

.pwa-os-panel{display:none;}
.pwa-os-panel.active{display:block;}

.pwa-mockup{
  position:relative;
  width:100%; aspect-ratio:9/17;
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); background:var(--surface-2);
  box-shadow:0 16px 32px -20px rgba(0,0,0,.6);
}
.pwa-mockup-bar{
  position:relative;
  display:flex; align-items:center; gap:8px;
  padding:9px 10px;
  background:var(--surface-3); border-bottom:1px solid var(--border-soft);
}
.pwa-mockup-url{
  flex:1; min-width:0;
  background:var(--surface); border-radius:var(--radius-pill);
  padding:4px 10px;
  font-size:10px; color:var(--text-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pwa-mockup-kebab{color:var(--text-dim); font-size:14px; line-height:1;}
.pwa-mockup-add-btn{
  font-size:10px; font-weight:700; color:var(--accent);
  flex-shrink:0;
}
.pwa-mockup-body{padding:14px; display:flex; flex-direction:column; gap:9px;}
.pwa-mockup-body-dim{opacity:.35;}
.pwa-mockup-line{height:9px; border-radius:4px; background:var(--surface-3);}

.pwa-mockup-menu{
  position:absolute; left:8%; right:8%; top:30%;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:6px; box-shadow:0 20px 40px -16px rgba(0,0,0,.55);
}
.pwa-mockup-menu.pwa-mockup-menu-bottom{top:auto; bottom:12%;}
.pwa-mockup-menu-item{
  display:block; height:11px; margin:7px 8px; border-radius:4px;
  background:var(--surface-3);
}
.pwa-mockup-menu-item.pwa-mockup-menu-item-active{
  background:var(--accent-dim); color:var(--accent-ink);
  display:flex; align-items:center;
  height:auto; padding:6px 8px;
  font-size:10.5px; font-weight:600;
}

.pwa-mockup-dialog{
  position:absolute; left:8%; right:8%; top:32%;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:12px; box-shadow:0 20px 40px -16px rgba(0,0,0,.55);
}
.pwa-mockup-dialog-head{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; color:var(--text);}
.pwa-mockup-dialog-icon{width:28px; height:28px; border-radius:7px; flex-shrink:0;}
.pwa-mockup-dialog-actions{
  display:flex; justify-content:flex-end; gap:16px;
  margin-top:12px; font-size:11px; font-weight:600;
}
.pwa-mockup-dialog-actions span:first-child{color:var(--text-dim);}
.pwa-mockup-dialog-confirm{color:var(--accent);}

.pwa-mockup-toolbar-ios{
  position:absolute; left:0; right:0; bottom:0;
  height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); border-top:1px solid var(--border-soft);
}
.pwa-mockup-share-icon{font-size:15px; color:var(--accent);}

.pwa-tap-dot{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:transparent; border:2px solid var(--danger);
  pointer-events:none;
}
.pwa-tap-dot::after{
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid var(--danger);
  animation:pwaTapPulse 1.6s ease-out infinite;
}
@keyframes pwaTapPulse{
  from{transform:scale(.5); opacity:.7;}
  to{transform:scale(1.6); opacity:0;}
}

.back-to-top{
  position:fixed; right:20px; bottom:20px; z-index:30;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent-dim);
  box-shadow:0 12px 24px -10px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.back-to-top.visible{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{filter:brightness(1.08);}
@media (max-width:760px){
  .back-to-top{right:14px; bottom:14px; width:40px; height:40px;}
}