#web-fits-app{
  margin:32px auto;
  padding:0 16px;
  max-width:1280px;
}
.webfits-shell{
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  background:linear-gradient(180deg,#f8fbff 0%, #eef4fb 100%);
  color:#102033;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
}
.webfits-head{
  padding:20px 24px;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(245,249,255,.72));
}
.webfits-head h2{
  margin:0 0 8px 0;
  font-size:24px;
  line-height:1.2;
  color:#0f2745;
}
.webfits-head p{
  margin:0;
  color:#5b7088;
}
.webfits-grid{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:0;
}
.webfits-side{
  border-right:1px solid rgba(15,23,42,.08);
  padding:20px;
  background:linear-gradient(180deg,#f7fbff 0%, #edf3fb 100%);
}
.webfits-main{
  padding:20px;
  min-width:0;
  background:linear-gradient(180deg,#fbfdff 0%, #f1f6fc 100%);
}
.webfits-field{
  margin-bottom:16px;
}
.webfits-field label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  color:#5d7086;
}
.webfits-field input,
.webfits-field select{
  width:100%;
  min-height:44px;
  border-radius:12px;
  border:1px solid rgba(33,84,160,.16);
  background:#ffffff;
  color:#11243a;
  padding:0 12px;
  box-sizing:border-box;
  outline:none;
}
.webfits-field input:focus,
.webfits-field select:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.10);
}
.webfits-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.webfits-btn{
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid rgba(33,84,160,.16);
  background:#ffffff;
  color:#17324f;
  cursor:pointer;
  font-weight:600;
}
.webfits-btn.primary{
  background:linear-gradient(180deg,#4f8fe8,#3373d2);
  border-color:transparent;
  color:#fff;
}
.webfits-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.webfits-summary{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}
.webfits-pill{
  padding:11px 14px;
  border-radius:14px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.webfits-designation{
  font-size:22px;
  font-weight:700;
  color:#123053;
}
.webfits-headerlines{
  display:grid;
  gap:8px;
  margin-bottom:18px;
  padding:16px 18px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  color:#17324f;
}
.webfits-section{
  margin-top:16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:0 10px 26px rgba(15,23,42,.04);
}
.webfits-section h3{
  margin:0;
  padding:13px 16px;
  font-size:15px;
  color:#17324f;
  background:linear-gradient(180deg,#f7fbff,#edf3fb);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.webfits-tablewrap{
  overflow:auto;
}
.webfits-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
.webfits-table th,
.webfits-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,.07);
  vertical-align:top;
  text-align:left;
  font-size:14px;
}
.webfits-table td{
  color:#18314e !important;
  background:#ffffff !important;
}
.webfits-table th{
  color:#5d7086 !important;
  font-weight:600;
  background:#f3f7fc !important;
}
.webfits-table tr{
  background:#ffffff !important;
}
.webfits-table tbody tr:nth-child(even) td{
  background:#f9fbfe !important;
}
.webfits-table tbody tr:hover td{
  background:#eef5ff !important;
}
.webfits-table tr:last-child td{
  border-bottom:none;
}
.webfits-note{
  margin-top:12px;
  color:#61758d;
  font-size:13px;
}
.webfits-error{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#fff2f2;
  border:1px solid rgba(220,38,38,.18);
  color:#9b1c1c;
}
.webfits-loading{
  color:#61758d;
  font-size:14px;
}
@media (max-width: 980px){
  .webfits-grid{
    grid-template-columns:1fr;
  }
  .webfits-side{
    border-right:none;
    border-bottom:1px solid rgba(15,23,42,.08);
  }
}

.webfits-diagram{
  margin-top:18px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:0 10px 26px rgba(15,23,42,.04);
}
.webfits-diagram h3{
  margin:0;
  padding:13px 16px;
  font-size:15px;
  color:#17324f;
  background:linear-gradient(180deg,#f7fbff,#edf3fb);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.webfits-diagram-wrap{
  padding:16px;
  overflow:auto;
}
.webfits-diagram svg{
  width:100%;
  min-width:900px;
  height:auto;
  display:block;
  background:#fff;
}
.webfits-diagram-note{
  padding:0 16px 16px 16px;
  color:#61758d;
  font-size:13px;
}

.webfits-compare{
  margin-top:20px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:0 10px 26px rgba(15,23,42,.04);
}
.webfits-compare h3{
  margin:0;
  padding:13px 16px;
  font-size:15px;
  color:#17324f;
  background:linear-gradient(180deg,#f7fbff,#edf3fb);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.webfits-compare-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 16px 0 16px;
}
.webfits-compare-note{
  padding:0 16px 14px 16px;
  color:#61758d;
  font-size:13px;
}

.webfits-sketches{
  margin-top:18px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:0 10px 26px rgba(15,23,42,.04);
}
.webfits-sketches h3{
  margin:0;
  padding:13px 16px;
  font-size:15px;
  color:#17324f;
  background:linear-gradient(180deg,#f7fbff,#edf3fb);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.webfits-sketch-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(240px,1fr));
  gap:16px;
  padding:16px;
}
.webfits-sketch-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:#fbfdff;
  overflow:hidden;
}
.webfits-sketch-card h4{
  margin:0;
  padding:10px 12px;
  font-size:14px;
  color:#17324f;
  background:#f3f7fc;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.webfits-sketch-wrap{
  padding:12px;
}
.webfits-sketch-wrap svg{
  width:100%;
  height:auto;
  display:block;
  background:#fff;
}
.webfits-sketch-note{
  padding:0 16px 16px 16px;
  color:#61758d;
  font-size:13px;
}
@media (max-width: 980px){
  .webfits-sketch-grid{
    grid-template-columns:1fr;
  }
}

/* FC_TARGETED_LAYOUT_FIX_20260318 */

/* --- только локальный scroll для широких блоков --- */
.fitResultsScroll,
.gtblWrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.fitResultsScroll > table {
  min-width: 920px;
  width: 100%;
}

.fitResultsScroll > table th,
.fitResultsScroll > table td {
  box-sizing: border-box;
  vertical-align: top;
}

.fitResultsScroll > table th:nth-child(1),
.fitResultsScroll > table td:nth-child(1) {
  width: 28%;
  text-align: left;
}

.fitResultsScroll > table th:nth-child(2),
.fitResultsScroll > table td:nth-child(2) {
  width: 16%;
  text-align: left;
  white-space: nowrap;
}

.fitResultsScroll > table th:nth-child(3),
.fitResultsScroll > table td:nth-child(3) {
  width: 34%;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fitResultsScroll > table th:nth-child(4),
.fitResultsScroll > table td:nth-child(4) {
  width: 22%;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fitResultsScroll > table td:nth-child(3) *,
.fitResultsScroll > table td:nth-child(4) * {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.gtblWrap .gtbl {
  min-width: 760px;
}

.gtblWrap .gtblRow {
  display: grid;
  grid-template-columns: minmax(140px,1.35fr) minmax(110px,0.75fr) minmax(220px,1fr) minmax(280px,1.15fr);
}

.gtblWrap .gtblCell,
.gtblWrap .gtblHead {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.gtblWrap .gtblCell.v {
  white-space: nowrap;
}

.gtblWrap .gtblCell.f,
.gtblWrap .gtblCell.s {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* мобильная компоновка кнопок/переключателей */
@media (max-width: 768px) {
  #btnCalc,
  #btnOpenFitPicker {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
  }

  .seg,
  .pillbar,
  .fitCats,
  .fit-classes,
  .fitClassRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .seg .seg-btn,
  .pillbar .pill,
  .fitCats .pill,
  .fit-classes .pill,
  .fitClassRow .pill,
  [data-fitcat].pill,
  .seg-btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fitResultsScroll > table {
    min-width: 760px;
  }

  .gtblWrap .gtbl {
    min-width: 760px;
  }
}