/* */ 
*{ box-sizing:border-box; }

/* === FIX CLS: Резервируем место до загрузки JS === */
.gms-mount {
  display: block;
  /* Примерная высота заголовка + поиска + селектора */
  min-height: 220px; 
  /* Оптимизация рендеринга браузером */
  contain: content; 
  width: 100%;
}

.gms-wrap{
  display:grid;
  gap:24px; 
  --gms-width-min:620px; 
  --gms-width-max:760px; 
  opacity:0; 
  /* Ускоряем появление для LCP */
  transition:opacity .3s ease-out; 
  overflow-x:clip;
  /* Гарантируем, что сетка занимает место даже при opacity:0 */
  width: 100%; 
}
.gms-wrap.loaded{opacity:1}
.gms-title{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:600;text-align:center; margin-bottom: 20px;}

.gms-search-outer{display:grid;gap:10px;justify-items:center; max-width:100%; overflow-x:clip;}
.gms-search{
  width:100%; max-width:var(--gms-width-min); transition:max-width .35s ease;
  /* */ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  background:#f3f4f6; border-radius:28px; padding:5px 10px; gap:10px; box-shadow:none;
}
.gms-search:hover,.gms-wrap.is-focus .gms-search{ max-width:var(--gms-width-max); }
.gms-search > *{ min-width:0; }

/* ====== СЕЛЕКТОР СИСТЕМ (десктоп) ====== */
.gms-sel-wrap{ width:100%; max-width:var(--gms-width-min); }
.gms-sel-row{ display:grid; grid-template-columns:1fr auto; gap:0; align-items:center; }
.gms-sel-row.has-reset{ gap:8px; }

.gms-input{
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;
  /* */ color:#111; font-size:18px; font-weight:400; letter-spacing:.5px; font-family:inherit; width:100%;
  -webkit-text-fill-color:#111; text-decoration:none;
}
.gms-input::placeholder{ text-align:center;color:#000;font-weight:500; transition:opacity .25s; }
.gms-input.typing::placeholder{ text-align:left; }
.gms-input:focus::placeholder{ opacity:0; }
.gms-wrap.is-focus .gms-input::placeholder{ opacity:0; }

.gms-logo img{width:35px;height:35px;border-radius:999px;display:block;max-width:100%;}
.gms-star img{width:22px;height:22px;display:block;margin-right:10px;opacity:.8;transition:transform .25s;transform-origin:50% 50%;}
.gms-search:hover .gms-star img,.gms-wrap.is-focus .gms-star img{ transform: rotate(90deg); }

.gms-constrained{ width:100%; max-width:var(--gms-width-min); margin:0 auto; overflow-x:clip; }

.gms-section{ border-radius:14px; background:#f7f7f7;
  /* */ padding:16px; display:grid; gap:12px; margin-bottom:10px; text-align:left; }
.gms-section:last-child{ margin-bottom:0; }
.gms-head{ text-align:left; font-size:13px; color:#6b7280; font-weight:500; }

.gms-grid{ display:grid; gap:12px; grid-template-columns:1fr; justify-items:center; min-width:0; }
@media(min-width:768px){ .gms-grid{ grid-template-columns:1fr 1fr; } }

.gms-card{ border:1px solid rgba(0,0,0,.08); border-radius:12px; background:#f7f7f7; padding:12px; width:100%;
  text-align:left; display:grid; grid-template-columns:1fr auto;
  /* */ grid-template-areas:'title badges' 'val val'; gap:10px; max-width:100%; }
.gms-card-title{ margin:0; font-size:13px; font-weight:600; grid-area:title; }
.gms-badges{ display:flex; align-items:center; gap:8px; margin-left:auto; grid-area:badges; justify-self:end; }
.badge-code{ font-weight:700;
  /* */ background:#fff; border-radius:999px; padding:4px 8px; font-size:12px; }
.badge-type{ background:#f1f1f1; border-radius:999px; padding:4px 10px; font-size:12px; color:#333; font-weight:500; }
.gms-val{ font-size:20px; font-weight:700; grid-area:val; }
.gms-note{ font-size:12px; color:#9ca3af; text-align:left; }
.gms-main-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.gms-main-title{ margin:0; font-size:18px; font-weight:600; }
.gms-main-badge-code{ font-weight:700; background:#fff; border-radius:999px; padding:4px 8px; font-size:12px; }
.gms-main-badge-type{ background:#f1f1f1;
  /* */ border-radius:999px; padding:4px 10px; font-size:12px; color:#333; font-weight:500; }
.gms-table{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; min-width:0; }
.gms-cell{ display:flex; flex-direction:column; align-items:center; min-width:20px; }
.gms-letter{ font-weight:600; font-size:15px; }
.gms-num{ font-size:13px; }
.gms-total{ font-size:26px; font-weight:800; color:#ff5c4a; margin-top:6px; text-align:left; }
.gms-warn{ color:#b45309; text-align:left; }

.gms-pill{
  background:#fcfcfd; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:10px 14px;
  /* */ display:flex; align-items:center; justify-content:space-between; transition:background .15s ease,border-color .15s ease;
  cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; color:#111; -webkit-text-fill-color:#111;
}
.gms-pill:hover{ background:#f7f7f7; }
.gms-pill:focus{ outline:none; box-shadow:none; }
.gms-sel-btn{ min-height:44px; }
.gms-mini-btn{ min-height:44px; padding:10px 14px; font-size:13px; }

.gms-sel-btn-label{ font-size:13px; color:#6b7280; }
.gms-sel-current{ font-size:14px; font-weight:500; color:#111; -webkit-text-fill-color:#111; }

.gms-sel-panel{
  width:100%; max-width:100%; margin-top:8px;
  background:#fff;
  /* */ border:1px solid rgba(0,0,0,.08); border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  overflow:hidden; max-height:0; opacity:0; padding:0 10px; pointer-events:none; visibility:hidden;
  display:grid; grid-template-columns:minmax(120px,auto) minmax(0,1fr); gap:10px; align-items:start;
  /* */ transition:max-height .25s ease, opacity .25s ease, padding .25s ease, visibility 0s linear .25s;
  will-change:max-height,opacity; color:#111; -webkit-text-fill-color:#111;
}
.gms-sel-panel.is-open{
  max-height:80vh; opacity:1;
  /* */ padding:10px; pointer-events:auto; visibility:visible;
  transition:max-height .25s ease, opacity .25s ease, padding .25s ease; overflow:auto;
}
.gms-sel-panel button{ color:#111 !important; -webkit-text-fill-color:#111 !important; text-decoration:none; }

.gms-sel-col{ display:grid; gap:6px; align-content:start; position:sticky; top:0; background:#fff; }
.gms-group{
  appearance:none; background:#f7f7f7; border:0px solid rgba(0,0,0,.06); border-radius:22px; padding:10px 14px;
  text-align:left; font-weight:500; cursor:pointer;
  /* */ transition:background .15s ease,color .15s ease,border-color .15s ease;
  font-size:13px;
}
.gms-group:hover{ background:#eceff1; }
.gms-group.is-active{ background:#e7eaee; color:#111; border-color:transparent; }

.gms-sel-right{ display:grid; grid-template-rows:auto auto; gap:8px; align-content:start; min-width:0; }
.gms-sys-list{
  display:grid; grid-template-columns:1fr; row-gap:8px; column-gap:0; padding:0px;
  align-items:start; justify-items:start; min-width:0; max-width:100%;
}
.gms-sel-item{
  appearance:none; display:inline-flex; align-items:center; gap:10px; background:#fff;
  /* */ border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:8px 10px; transition:background .15s ease,border-color .15s ease;
  white-space:normal; max-width:100%; color:#111 !important; -webkit-text-fill-color:#111 !important; text-decoration:none;
  font-size:13px;
}
.gms-sel-item:hover{ background:#f5f6f7; border-color:rgba(0,0,0,.06); }
.gms-sel-item .code{ font-weight:700; border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:3px 8px; font-size:12px; background:#fff; color:#111; -webkit-text-fill-color:#111; }
.gms-sel-item .label{ font-size:13px; font-weight:500;
  /* */ white-space:normal; word-break:break-word; overflow-wrap:anywhere; color:#111; -webkit-text-fill-color:#111; }

.gms-disclaimer{ justify-self:start; background:#f7f7f7; border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:8px 12px; font-size:12px; color:#6b7280; }

/* ====== МОБИЛЬНЫЙ (<=600px) ====== */
@media (max-width:600px){
  .gms-wrap{ --gms-width-min:100%; --gms-width-max:100%; gap:3.5vw; }
  .gms-search, .gms-constrained, .gms-sel-wrap{ max-width:100% !important; }

  .gms-sel-row{ grid-template-columns:1fr auto; gap:0; }
  .gms-sel-row.has-reset{ gap:1.6vw; }

  .gms-pill{
    border:0.3vw solid rgba(0,0,0,.08);
    border-radius:3.6vw;
    /* */ padding:1.6vw 3vw;
    min-height:8vw;
  }
  .gms-mini-btn{ min-height:8vw; padding:1.6vw 3vw; font-size:3vw; }

  .gms-sel-btn-label{ font-size:3vw; color:#6b7280; line-height:1.25; }
  .gms-sel-current{ font-size:3vw;
    /* */ font-weight:500; color:#111; line-height:1.25; }

  .gms-sel-panel{
    margin-top:2vw;
    border:1px solid rgba(0,0,0,.08);
    border-radius:4vw;
    box-shadow:none;
    padding:0 2vw;
    grid-template-columns:minmax(28vw,auto) minmax(0,1fr);
    gap:1.8vw;
  }
  .gms-sel-panel.is-open{ padding:2vw; }

  .gms-sel-col{ gap:10px; }
  .gms-group{
    border:0px solid rgba(0,0,0,.06);
    border-radius:5.5vw;
    padding:1.6vw 2.6vw;
    /* */ font-size:3.2vw;
  }

  .gms-sel-right{ gap:1.4vw; }

  .gms-sys-list{
    grid-template-columns:1fr !important;
    row-gap:1.4vw !important;
    column-gap:0 !important;
  }

  .gms-sel-item{
    gap:1.6vw;
    border:0.3vw solid rgba(0,0,0,.08);
    border-radius:999vw;
    padding:1.4vw 2vw;
    font-size:3.2vw;
    line-height:1.25;
  }
  .gms-sel-item .code{
    border:0.3vw solid rgba(0,0,0,.08);
    border-radius:999vw;
    padding:.8vw 1.6vw;
    font-size:3vw;
  }
  .gms-sel-item .label{ font-size:3vw; }

  .gms-disclaimer{
    border:0.3vw solid rgba(0,0,0,.08);
    border-radius:3vw;
    padding:1.2vw 2vw;
    font-size:2.8vw;
  }

  .gms-sel-panel button,
  .gms-sel-panel button:link,
  .gms-sel-panel button:visited,
  .gms-sel-panel .gms-sel-item .label,
  .gms-sел-panel .gms-сel-item .code{
    color:#111 !important;
    /* */ -webkit-text-fill-color:#111 !important; text-decoration:none !important;
  }

  .gms-grid{ grid-template-columns:1fr 1fr; gap:1.5vw; }
  .gms-card{
    grid-template-columns:1fr 1fr;
    /* */ grid-template-areas:
      'title title'
      'val val'
      'badges badges';
    /* */ padding:2vw; border-radius:3vw; gap:3.5vw;
  }
  .gms-badges{ justify-self:start !important; margin-left:0 !important; gap:1vw; }
  .gms-search-outer{ gap:1.5vw; }
  .gms-search{ border-radius:5vw;
    /* */ padding:1vw 2vw; gap:1.5vw; }
  .gms-section{ border-radius:2vw; padding:2.5vw; gap:5vw; margin-bottom:1.5vw; }
  .gms-head{ font-size:3vw; font-weight:600; }
  .gms-card-title{ font-size:3vw; }
  .badge-code{ padding:.8vw 2vw; font-size:2.5vw; }
  .badge-type{ padding:.8vw 2.5vw; font-size:2.5vw; }
  .gms-val{ font-size:4.5vw; }
  .gms-note{ font-size:2.5vw; }
  .gms-main-title{ font-size:4vw; }
  .gms-main-badge-code{ padding:.8vw 1.5vw; font-size:2.5vw; }
  .gms-main-badge-type{ padding:.8vw 1.5vw; font-size:2.5vw; }
  .gms-table{ gap:1vw;
    /* */ padding-top:1vw; padding-bottom:1vw; }
  .gms-cell{ min-width:4vw; }
  .gms-letter{ font-size:3.5vw; }
  .gms-num{ font-size:3vw; }
  .gms-total{ font-size:6vw; margin-top:2vw; }
  .gms-input{ font-size:4vw; letter-spacing:.1vw; }
  .gms-logo img{ width:7vw; height:7vw; }
  .gms-star img{ width:5vw; height:5vw; margin-right:2vw; }
}