.ga-selection{
  color-scheme:light;
  --navy:#03426D; --navy-deep:#013250; --ink:#03182B; --teal:#015675; --bronze:#7C6344; --brick:#A5493B;
  --page:#F0EFED; --card:#FFFFFF; --plate:#EDEEF3; --lav:#DADAE4; --line:#DCDEE7; --line-2:#C6CAD9;
  --text:#0A3150; --muted:#667487; --on-navy:#FFFFFF; --on-navy-2:#C9D6E3;
  --l1:var(--navy); --l2:var(--teal); --l3:var(--bronze); --l4:var(--brick);
  --r-lg:24px; --r-md:18px; --r-sm:12px;
  --shadow:0 1px 2px #03182B0D, 0 8px 24px #03182B0F;
  --f:"Golos Text", "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif;
}
.ga-selection *{box-sizing:border-box}
.ga-selection{background:var(--page); color:var(--text); font-family:var(--f); font-size:15px; line-height:1.45; margin:0}
.ga-selection button{font:inherit; color:inherit}
.ga-selection :focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.ga-selection .wrap{max-width:1240px; margin:0 auto; padding-inline:16px}
.ga-selection .hero{background:var(--page); color:var(--text); position:relative; overflow:hidden}
.ga-selection .hero .topline{background:var(--navy-deep); font-size:12.5px; color:var(--on-navy-2)}
.ga-selection .hero .topline .wrap{display:flex; gap:18px; align-items:center; padding-block:8px; flex-wrap:wrap}
.ga-selection .hero .topline b{color:var(--on-navy); font-weight:500}
.ga-selection .brandmark{display:flex; align-items:center; gap:8px; color:var(--on-navy); font-weight:600; letter-spacing:.06em; font-size:17px; line-height:1}
.ga-selection .brandmark small{display:block; font-size:9.5px; letter-spacing:.12em; font-weight:600; margin-top:2px}
.ga-selection .brandmark svg{width:22px; height:26px; flex:none}
.ga-selection .hero .inner{position:relative; z-index:1; padding-block:26px 34px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 40px; align-items:end}
.ga-selection .waves{position:absolute; inset:auto -40px -30px auto; width:min(760px, 90%); height:260px; z-index:0; pointer-events:none}
.ga-selection .badge{display:inline-flex; align-items:center; gap:8px; background:#FFFFFF1F; border:1px solid #FFFFFF2E; border-radius:999px; padding:4px 12px 4px 4px; font-size:13px; margin-bottom:14px}
.ga-selection .badge i{font-style:normal; background:var(--navy); color:var(--on-navy); border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:600}
.ga-selection .hero h2{font-size:44px; line-height:1.08; margin:0; font-weight:400; letter-spacing:-.01em; text-wrap:balance; color: var(--text)}
.ga-selection .hero h2 b{font-weight:600}
.ga-selection .hero .lead{color:var(--text); font-size:16px; max-width:56ch; margin:14px 0 0}
.ga-selection .stats{display:flex; gap:0; align-self:end}
.ga-selection .stats div{padding:0 22px; border-left:1px solid #FFFFFF2E}
.ga-selection .stats div:first-child{border-left:0; padding-left:0}
.ga-selection .stats b{display:block; font-size:30px; font-weight:500; line-height:1.1; font-variant-numeric:tabular-nums}
.ga-selection .stats span{font-size:12.5px; color:var(--navy)}
.ga-selection .bar{display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; padding-block:22px 18px}
.ga-selection .modes{display:flex; gap:2px; background:var(--card); padding:4px; border-radius:999px; box-shadow:var(--shadow); width:max-content; max-width:100%; overflow-x:auto}
.ga-selection .modes button{border:0; background:none; padding:9px 18px; border-radius:999px; cursor:pointer; font-weight:500; color:var(--text); white-space:nowrap}
.ga-selection .modes button:hover{background:var(--plate)}
.ga-selection .modes button[aria-pressed="true"]{background:var(--navy); color:var(--on-navy)}
.ga-selection .brands{display:flex; gap:6px; align-items:center; flex-wrap:wrap; min-width:0}
.ga-selection .brands .lbl{font-size:13px; color:var(--muted); margin-right:4px}
.ga-selection .chip{border:1px solid var(--line-2); background:transparent; padding:6px 13px; border-radius:999px; cursor:pointer; font-size:13.5px; color:var(--text); white-space:nowrap}
.ga-selection .chip:hover{border-color:var(--navy)}
.ga-selection .chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.ga-selection .chip small{opacity:.65; font-variant-numeric:tabular-nums; margin-left:4px}
.ga-selection .layout{display:grid; grid-template-columns:340px minmax(0,1fr); gap:24px; align-items:start; padding-bottom:48px}
@media (max-width:900px){
.ga-selection .layout{grid-template-columns:minmax(0,1fr); gap:16px} }
.ga-selection .picker{background:var(--card); border-radius:var(--r-lg); padding:16px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 12px); max-height:calc(100vh - 24px); display:flex; flex-direction:column; gap:12px; min-width:0; box-shadow:var(--shadow)}
@media (max-width:900px){
.ga-selection .picker{position:static; max-height:none} }
.ga-selection .search{width:100%; font:inherit; padding:10px 16px; border:1px solid var(--line); border-radius:999px; background:var(--plate); color:var(--text)}
.ga-selection .search::placeholder{color:var(--muted)}
.ga-selection .picker .chips{display:flex; gap:6px; flex-wrap:wrap}
.ga-selection .picker .chip{font-size:12.5px; padding:5px 11px}
.ga-selection .list{overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin-inline:-6px; padding-inline:6px; min-height:0}
@media (max-width:900px){
.ga-selection .list{flex-direction:row; overflow-x:auto; overflow-y:hidden; padding-bottom:6px; scroll-snap-type:x proximity} }
.ga-selection .grp{font-size:12px; color:var(--muted); padding:12px 8px 4px; font-weight:500}
@media (max-width:900px){
.ga-selection .grp{display:none} }
.ga-selection .item{display:flex; align-items:center; gap:12px; padding:7px 8px; border-radius:var(--r-sm); border:0; background:none; cursor:pointer; text-align:left; width:100%}
.ga-selection .item:hover{background:var(--plate)}
.ga-selection .item[aria-pressed="true"]{background:var(--plate)}
.ga-selection .item[aria-pressed="true"] .sw{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--navy)}
.ga-selection .item .t{min-width:0}
.ga-selection .item .t b{display:block; font-weight:500; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ga-selection .item .t span{color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums}
@media (max-width:900px){
.ga-selection .item{flex-direction:column; width:92px; flex:none; gap:7px; text-align:center; scroll-snap-align:start; padding:8px 4px}
.ga-selection .item .t b{white-space:normal; font-size:12.5px; line-height:1.2}
}
.ga-selection .sw{width:44px; height:44px; border-radius:10px; flex:none; background-repeat:no-repeat; background-color:var(--plate); box-shadow:inset 0 0 0 1px #03182B14}
@media (max-width:900px){
.ga-selection .sw{width:62px; height:62px} }
.ga-selection .sw.round{border-radius:50%}
.ga-selection .empty{color:var(--muted); padding:10px 8px; font-size:14px}
.ga-selection .hint{color:var(--muted); font-size:12.5px; padding-inline:4px}
.ga-selection .res{min-width:0; display:flex; flex-direction:column; gap:26px}
.ga-selection .head{display:flex; gap:18px; align-items:center; flex-wrap:wrap; background:var(--card); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow)}
.ga-selection .head .sw{width:76px; height:76px; border-radius:var(--r-md)}
.ga-selection .head .t{min-width:0; flex:1}
.ga-selection .head h2{font-size:30px; font-weight:600; margin:0; line-height:1.12; letter-spacing:-.01em; text-wrap:balance; color:var(--navy)}
.ga-selection .head .meta{color:var(--muted); font-size:14px; margin-top:4px}
.ga-selection .head .styles{margin-top:8px}
.ga-selection .btn{border:1px solid var(--line-2); background:var(--card); padding:10px 20px; border-radius:999px; cursor:pointer; font-weight:500; font-size:14px; white-space:nowrap; color:var(--navy)}
.ga-selection .btn:hover{border-color:var(--navy)}
.ga-selection #copy{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.ga-selection #copy:hover{background:var(--navy-deep)}
.ga-selection #copy.done{background:var(--teal); border-color:var(--teal)}
.ga-selection .more{align-self:flex-start}
.ga-selection .lvl{display:flex; flex-direction:column; gap:12px}
.ga-selection .lvl > h3,.ga-selection details.lvl > summary{display:flex; align-items:baseline; gap:10px; margin:0; font-size:22px; font-weight:500; color:var(--navy); letter-spacing:-.005em}
.ga-selection .lvl > h3 i,.ga-selection details.lvl > summary i{font-style:normal; width:10px; height:10px; border-radius:50%; align-self:center; flex:none}
.ga-selection .lvl > h3 small,.ga-selection details.lvl > summary small{font-weight:400; font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums}
.ga-selection .lvl.l1 i{background:var(--l1)}
.ga-selection .lvl.l2 i{background:var(--l2)}
.ga-selection .lvl.l3 i{background:var(--l3)}
.ga-selection .lvl.l4 i{background:var(--l4)}
.ga-selection .lvl.lu i{background:var(--muted)}
.ga-selection details.lvl > summary{cursor:pointer; list-style:none}
.ga-selection details.lvl > summary::-webkit-details-marker{display:none}
.ga-selection details.lvl > summary::after{content:"Показать"; margin-left:auto; font-size:14px; font-weight:400; color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.ga-selection details.lvl[open] > summary::after{content:"Скрыть"}
.ga-selection .cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr))}
.ga-selection .cards.compact{grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:14px}
.ga-selection .card{background:var(--card); border:0; border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; min-width:0; box-shadow:var(--shadow)}
.ga-selection .card.link{cursor:pointer; text-align:left; padding:0}
.ga-selection .card.link:hover{box-shadow:0 0 0 1.5px var(--navy), var(--shadow)}
.ga-selection .ph{width:100%; aspect-ratio:16/10; background-repeat:no-repeat; background-size:100% 100%; background-color:var(--plate); max-width:100%}
.ga-selection .card .body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:7px}
.ga-selection .card .row1{display:flex; align-items:center; gap:9px}
.ga-selection .card .row1 .dot{width:18px; height:18px; border-radius:50%; flex:none; background-repeat:no-repeat; box-shadow:inset 0 0 0 1px #03182B1F}
.ga-selection .card .row1 b{font-weight:500; font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--navy)}
.ga-selection .card .row1 .rk{margin-left:auto}
.ga-selection .card .sub2{color:var(--muted); font-size:13px}
.ga-selection .card .sub2 .br{color:var(--navy); font-weight:500}
.ga-selection .cards.compact .card .row1 b{font-size:15px}
.ga-selection .rk{font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; color:#fff}
.ga-selection .l1 .rk,.ga-selection .rk.l1{background:var(--l1)}
.ga-selection .l2 .rk,.ga-selection .rk.l2{background:var(--l2)}
.ga-selection .l3 .rk,.ga-selection .rk.l3{background:var(--l3)}
.ga-selection .l4 .rk,.ga-selection .rk.l4{background:var(--l4)}
.ga-selection .lu .rk{background:var(--plate); color:var(--muted)}
.ga-selection .tags{display:flex; gap:5px; flex-wrap:wrap}
.ga-selection .tag{font-size:12px; padding:2px 9px; border-radius:999px; background:var(--plate); color:var(--muted)}
.ga-selection .tag.hit{background:var(--navy); color:#fff}
.ga-selection .note{font-size:12.5px; color:var(--muted); font-style:italic}
.ga-selection .opt{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); cursor:pointer; width:max-content; max-width:100%}
.ga-selection .opt input{accent-color:var(--navy); width:16px; height:16px}
.ga-selection .foot{background:var(--ink); color:var(--on-navy-2); position:relative; overflow:hidden}
.ga-selection .foot .wrap{position:relative; z-index:1; padding-block:34px 30px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px 48px}
@media (max-width:900px){
.ga-selection .foot .wrap{grid-template-columns:minmax(0,1fr)} }
.ga-selection .foot h4{color:var(--on-navy); font-size:15px; font-weight:500; margin:0 0 12px}
.ga-selection .foot p{margin:0 0 10px; font-size:13.5px; max-width:70ch}
.ga-selection .legend{display:flex; flex-direction:column; gap:8px; font-size:14px}
.ga-selection .legend span{display:flex; align-items:center; gap:10px}
.ga-selection .legend i{width:26px; height:18px; border-radius:999px; display:inline-grid; place-items:center; font-style:normal; font-size:10.5px; color:#fff; font-weight:600}
.ga-selection .foot .waves{inset:auto -60px -40px auto; opacity:.5}
.ga-selection .foot .copy{grid-column:1 / -1; border-top:1px solid #FFFFFF1F; padding-top:14px; font-size:12.5px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ga-selection .toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:14px; box-shadow:var(--shadow); z-index:5; max-width:calc(100% - 32px)}
.ga-selection .copyfall{width:100%; min-height:140px; font:inherit; font-size:13px; padding:12px; border:1px solid var(--navy); border-radius:var(--r-sm); background:var(--card); color:var(--text)}
.ga-selection .ph[data-d]{position:relative; cursor:zoom-in}
.ga-selection .ph[data-d]::after{content:""; position:absolute; right:10px; top:10px; width:32px; height:32px; border-radius:50%; background:#03182BB3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/16px no-repeat; opacity:0; transition:opacity .15s}
.ga-selection .ph[data-d]:hover::after,.ga-selection .ph[data-d]:focus-visible::after{opacity:1}
@media (hover:none){
.ga-selection .ph[data-d]::after{opacity:.85; width:28px; height:28px; background-size:14px} }
.ga-selection .lb{position:fixed; inset:0; z-index:20; background:#03182BF7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:calc(env(safe-area-inset-top,0px) + 56px) 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
.ga-selection .lb[hidden]{display:none}
.ga-selection .lb-img{width:min(100%, 1100px, calc((100vh - 230px) * 1.6)); aspect-ratio:16/10; border-radius:var(--r-md); background-repeat:no-repeat; background-size:100% 100%; background-color:#0A2A44; box-shadow:0 20px 60px #0008; touch-action:pan-y}
.ga-selection .lb-cap{width:min(100%, 1100px, calc((100vh - 230px) * 1.6)); display:flex; gap:12px 20px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; color:#fff}
.ga-selection .lb-cap h3{margin:0; font-size:20px; font-weight:600; line-height:1.2}
.ga-selection .lb-cap .m{color:var(--on-navy-2); font-size:13.5px; margin-top:3px}
.ga-selection .lb-cap .s{display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap}
.ga-selection .lb-cap .s b{font-weight:500; font-size:16px}
.ga-selection .lb-cap .rk{font-size:13px}
.ga-selection .lb-cap .lvlname{font-size:13.5px; color:var(--on-navy-2)}
.ga-selection .lb-acts{display:flex; gap:8px; flex-wrap:wrap}
.ga-selection .lb-acts .btn{background:transparent; color:#fff; border-color:#FFFFFF59}
.ga-selection .lb-acts .btn:hover{border-color:#fff}
.ga-selection .lb-x,.ga-selection .lb-nav{position:absolute; border:0; background:#FFFFFF1F; color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:22px; line-height:1}
.ga-selection .lb-x:hover,.ga-selection .lb-nav:hover{background:#FFFFFF38}
.ga-selection .lb-x{top:calc(env(safe-area-inset-top,0px) + 10px); right:14px}
.ga-selection .lb-nav{top:50%; transform:translateY(-50%)}
.ga-selection .lb-nav.prev{left:14px}
.ga-selection .lb-nav.next{right:14px}
.ga-selection .lb-count{position:absolute; top:calc(env(safe-area-inset-top,0px) + 22px); left:18px; color:var(--on-navy-2); font-size:13px; font-variant-numeric:tabular-nums}
@media (max-width:700px){
.ga-selection .lb{padding-inline:10px; justify-content:flex-start; padding-top:calc(env(safe-area-inset-top,0px) + 62px)}
.ga-selection .lb-img{width:100%; border-radius:var(--r-sm)}
.ga-selection .lb-nav{top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 14px); transform:none}
.ga-selection .lb-cap h3{font-size:18px}
.ga-selection .lb-acts{width:100%}
.ga-selection .lb-acts .btn{flex:1; padding:10px 8px; font-size:13px; white-space:normal}
}

/* ---------- телефон ---------- */
@media (max-width:600px){
.ga-selection{font-size:14.5px}
.ga-selection .hero .topline .wrap{gap:12px; font-size:12px}
.ga-selection .hero .topline .hide-m{display:none}
.ga-selection .hero .inner{grid-template-columns:minmax(0,1fr); padding-block:18px 22px; gap:18px}
.ga-selection .badge{font-size:12px; margin-bottom:10px}
.ga-selection .hero h1{font-size:30px}
.ga-selection .hero .lead{font-size:14.5px; margin-top:10px}
.ga-selection .stats div{padding:0 14px}
.ga-selection .stats b{font-size:22px}
.ga-selection .stats span{font-size:11.5px}
.ga-selection .waves{height:180px; width:120%}
.ga-selection .bar{padding-block:14px 12px; gap:10px}
.ga-selection .modes{display:grid; grid-template-columns:repeat(3,1fr); width:100%}
.ga-selection .modes button{padding:9px 4px; font-size:13.5px}
.ga-selection .modes .long{display:none}
.ga-selection .brands{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:calc(100% + 32px); margin-inline:-16px; padding-inline:16px}
.ga-selection .brands::-webkit-scrollbar{display:none}
.ga-selection .brands .lbl{display:none}
.ga-selection .picker{padding:12px; gap:10px; border-radius:var(--r-md)}
.ga-selection .picker .chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-12px; padding-inline:12px}
.ga-selection .picker .chips::-webkit-scrollbar,.ga-selection .list::-webkit-scrollbar{display:none}
.ga-selection .chip{flex:none}
.ga-selection .list{scrollbar-width:none; gap:4px; padding-bottom:2px}
.ga-selection .item{width:80px; padding:6px 2px; gap:6px}
.ga-selection .item .sw{width:56px; height:56px}
.ga-selection .item .t b{font-size:12px}
.ga-selection .item .t span{font-size:11px}
.ga-selection .item[data-sink] .t span{display:none}
.ga-selection .opt{width:auto; font-size:13.5px}
.ga-selection .res{gap:20px}
.ga-selection .head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 14px; align-items:center; padding:14px; border-radius:var(--r-md)}
.ga-selection .head .sw{width:58px; height:58px; border-radius:var(--r-sm)}
.ga-selection .head .t:only-of-type:first-child{grid-column:1 / -1}
.ga-selection .head h2{font-size:23px}
.ga-selection .head .meta{font-size:13px}
.ga-selection .head .btn{grid-column:1 / -1; width:100%; padding:11px}
.ga-selection .copyfall{grid-column:1 / -1}
.ga-selection .lvl > h3,.ga-selection details.lvl > summary{font-size:19px}
.ga-selection .cards,.ga-selection .cards.compact{grid-template-columns:minmax(0,1fr); gap:12px}
.ga-selection .card .body{padding:10px 12px 12px; gap:6px}
.ga-selection .card .row1 b{font-size:15px}
.ga-selection .tag{font-size:11.5px}
.ga-selection .more{width:100%}
}
@media (prefers-reduced-motion:no-preference){
.ga-selection .card.link,.ga-selection .item,.ga-selection .chip,.ga-selection .modes button,.ga-selection .btn{transition:box-shadow .15s, background-color .15s, border-color .15s} }

.ga-selection .sw,.ga-selection .dot{background-size:cover;background-position:center}
.ga-selection .picker .search{flex-shrink:0}
.ga-selection [hidden]{display:none!important}