/* =====================================================
   Блок граффити (изолирован префиксом .g51-)
   Все классы и переменные уникальны для избежания
   конфликтов с style.min.css
   ===================================================== */

.g51-root{
  width:100%;
  margin:0 auto;
}

/* Изолированные переменные — не пересекаются с :root сайта */
.g51-root{
  --g51-ink:#27293d;
  --g51-ac:#2563eb;
  --g51-ac-d:#1d4ed8;
  --g51-ac-bg:#EAF1FF;
  --g51-ac-bg2:#F3F7FF;
  --g51-line:#E3E8F0;
  --g51-soft:#eef1f4;
  --g51-muted:#5b6573;
}

.g51-root .g51-cc{
  background:linear-gradient(90deg,#2f72f0,#1f44b7) top/100% 3px no-repeat,#fff;
  border-radius:22px;
  padding:18px 20px 20px;
  color:var(--g51-ink);
  box-shadow:0 1px 2px rgba(39,41,61,.05),0 12px 32px -16px rgba(39,41,61,.18);
  box-sizing:border-box;
}

.g51-root .g51-cc-head{
  margin-bottom:12px;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.2px;
}

.g51-root .g51-h2{
  margin:18px 0 10px;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.2px;
}

/* ---- поиск ---- */
.g51-root .g51-search{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}

.g51-root .g51-search-label{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 12px;
  background:#fff;
  border:1px solid var(--g51-line);
  border-radius:12px;
  box-sizing:border-box;
}

.g51-root .g51-search-label:focus-within{
  border-color:var(--g51-ac);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.g51-root .g51-search-icon{
  width:18px;
  height:18px;
  flex:none;
  fill:none;
  stroke:var(--g51-muted);
  stroke-width:2;
  stroke-linecap:round;
}

.g51-root .g51-search-input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:none;
  color:var(--g51-ink);
  font:500 14px 'Onest',Arial,sans-serif;
  height:100%;
  box-shadow:none;
}

.g51-root .g51-search-input::placeholder{
  color:#8b95a1;
}

.g51-root .g51-search-btn{
  height:40px;
  padding:0 20px;
  border:0;
  border-radius:12px;
  background:var(--g51-ac);
  color:#fff;
  font:700 15px 'Onest',Arial,sans-serif;
  cursor:pointer;
  transition:background .2s;
  flex:none;
}

.g51-root .g51-search-btn:hover{
  background:var(--g51-ac-d);
}

.g51-root a:focus-visible,
.g51-root .g51-search-btn:focus-visible{
  outline:2px solid var(--g51-ac);
  outline-offset:2px;
}

/* ---- две главные карточки со спреем ---- */
.g51-root .g51-main{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.g51-root .g51-big{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:16px;
  min-height:96px;
  padding:14px 18px 14px 14px;
  border-radius:24px;
  border:1px solid var(--g51-line);
  text-decoration:none;
  color:var(--g51-ink);
  background:var(--g51-bg);
  transition:transform .25s,box-shadow .25s,border-color .2s;
  box-sizing:border-box;
}

.g51-root .g51-big:hover{
  transform:translateY(-3px);
  border-color:var(--g51-ac);
  box-shadow:0 16px 28px -16px rgba(37,99,235,.55);
}

.g51-root .g51-big-color{ --g51-bg:linear-gradient(110deg,#fff 40%,#EEF4FF); }
.g51-root .g51-big-bw{    --g51-bg:linear-gradient(110deg,#fff 40%,#EEF0F4); }

.g51-root .g51-can{
  position:relative;
  flex:none;
  width:68px;
  height:68px;
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:0 0 0 1px var(--g51-line),0 8px 16px -8px rgba(39,41,61,.4);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.g51-root .g51-big-color .g51-can{
  background:conic-gradient(#ff4d4d,#ffb13d,#f5e642,#4cd964,#2fc7ff,#5b6bff,#c24dff,#ff4d9a,#ff4d4d);
}

.g51-root .g51-big-bw .g51-can{
  background:linear-gradient(90deg,#14161f 50%,#fff 50%);
}

.g51-root .g51-big:hover .g51-can{
  transform:rotate(90deg) scale(1.06);
}

.g51-root .g51-spray{
  position:absolute;
  left:14px;
  top:50%;
  width:68px;
  height:68px;
  margin-top:-34px;
  pointer-events:none;
}

.g51-root .g51-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  margin:-3.5px;
  border-radius:50%;
  opacity:0;
  background:var(--g51d);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s;
}

.g51-root .g51-big:hover .g51-dot{
  opacity:.85;
  transform:translate(var(--g51x),var(--g51y));
}

.g51-root .g51-txt{
  flex:1;
  min-width:0;
}

.g51-root .g51-txt-b{
  display:block;
  font-size:17px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:6px;
}

.g51-root .g51-num{
  display:inline-block;
  font-size:26px;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1;
}

.g51-root .g51-lb{
  margin-left:6px;
  font-size:13px;
  font-weight:500;
  color:var(--g51-muted);
}

.g51-root .g51-go{
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--g51-ac-bg);
  color:var(--g51-ac-d);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateX(-6px);
  transition:all .25s;
}

.g51-root .g51-go svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.g51-root .g51-big:hover .g51-go{
  opacity:1;
  transform:none;
}

/* ---- подборки ---- */
.g51-root .g51-sets{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.g51-root .g51-set{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  column-gap:10px;
  align-content:center;
  align-items:center;
  min-height:64px;
  padding:9px 10px 9px 9px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--g51-line);
  text-decoration:none;
  color:var(--g51-ink);
  transition:transform .25s,box-shadow .25s,border-color .2s;
  box-sizing:border-box;
}

.g51-root .g51-set:hover{
  transform:translateY(-2px);
  border-color:var(--g51-ac);
  box-shadow:0 10px 20px -12px rgba(37,99,235,.55);
}

.g51-root .g51-ic{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:21px;
  border:2px solid #c9d6ec;
  background:var(--g51c);
}

.g51-root .g51-nm{
  grid-column:2;
  align-self:center;
  font-size:14px;
  font-weight:700;
  line-height:1.15;
}

.g51-root .g51-ct{
  grid-column:3;
  align-self:center;
  justify-self:end;
  min-width:44px;
  text-align:center;
  padding:3px 10px;
  border-radius:999px;
  background:var(--g51-ac-bg);
  color:var(--g51-ac-d);
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.g51-root .g51-empty{
  display:none;
  margin-top:16px;
  padding:16px 18px;
  border-radius:14px;
  background:var(--g51-ac-bg2);
  border:1px solid var(--g51-line);
  color:var(--g51-muted);
  font-size:15px;
}

.g51-root .g51-empty b{
  color:var(--g51-ac-d);
}

/* ---- адаптив ---- */
@media (max-width:760px){
  .g51-root .g51-sets{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:560px){
  .g51-root .g51-set{
    grid-template-columns:42px minmax(0,1fr);
    row-gap:3px;
  }
  .g51-root .g51-ic{ grid-row:1/3; }
  .g51-root .g51-nm{ align-self:end; }
  .g51-root .g51-ct{
    grid-column:2;
    grid-row:2;
    align-self:start;
    justify-self:start;
    min-width:0;
    padding:1px 8px;
  }
  .g51-root .g51-cc{ padding:14px; border-radius:18px; }
  .g51-root .g51-main{ grid-template-columns:1fr; }
  .g51-root .g51-search-btn{ padding:0 16px; }
}

@media (prefers-reduced-motion:reduce){
  .g51-root .g51-big,
  .g51-root .g51-can,
  .g51-root .g51-set,
  .g51-root .g51-dot,
  .g51-root .g51-go{
    transition:none;
  }
}