:root{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:#f4f6f8;color:#1d2430;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,select{font:inherit}
.hab{max-width:1180px;margin:10px auto;padding:0 10px 18px}
.hab__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.hab__top h1{margin:0;font-size:clamp(21px,3vw,30px);line-height:1.2}
.hab__top p,.hab__panel-head p{margin:2px 0 0;color:#697386;font-size:12px}
.hab__top-actions{display:flex;gap:6px}
.hab__toolbar,.hab__panel{background:#fff;border:1px solid #dfe3e8;border-radius:11px}
.hab__toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 9px;margin-bottom:8px}
.hab__setting{display:flex;align-items:center;gap:5px}
.hab__setting-label{font-size:12px;font-weight:700;color:#667085}
.hab__toggle{display:inline-flex;border:1px solid #cfd6df;border-radius:8px;overflow:hidden}
.hab__toggle button{border:0;background:#fff;padding:5px 10px;cursor:pointer}
.hab__toggle button+button{border-left:1px solid #cfd6df}
.hab__toggle button.is-active{background:#2457d6;color:#fff;font-weight:700}
.hab__legend{display:flex;gap:5px}
.hab__legend-chip,.hab__turn-chip{display:inline-flex;align-items:center;border:1px solid;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700}
.hab__legend-chip--first,.hab__turn-chip--first{background:#eaf4ff;border-color:#bedcff}
.hab__legend-chip--second,.hab__turn-chip--second{background:#fff0f0;border-color:#f3caca}
.hab__palette{margin-left:auto;font-size:19px;letter-spacing:1px;white-space:nowrap}
.hab__main-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(350px,.75fr);gap:8px}
.hab__panel{padding:10px}
.hab__panel--compact{padding:7px}
.hab__panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.hab__panel-head h2{margin:0;font-size:17px}
.hab__entry{display:grid;grid-template-columns:minmax(245px,1fr) 64px 64px auto;gap:6px;align-items:end}
.hab__code-input{display:grid;grid-template-columns:repeat(4,minmax(48px,1fr));gap:5px}
.hab__pin-select{width:100%;min-height:42px;border:1px solid #cfd6df;border-radius:8px;background:#fff;padding:3px;text-align:center;text-align-last:center;font-size:24px}
.hab__score{display:grid;gap:1px;font-size:11px;color:#667085}
.hab__score select{min-height:42px;border:1px solid #cfd6df;border-radius:8px;background:#fff;padding:3px 6px}
.hab__btn{border:1px solid #2457d6;background:#2457d6;color:#fff;border-radius:8px;padding:7px 11px;min-height:38px;cursor:pointer;font-weight:700}
.hab__btn--sub{background:#fff;color:#2457d6}
.hab__error{min-height:17px;margin-top:3px;color:#b42318;font-size:12px}
.hab__history{display:grid;gap:4px;margin-top:3px;max-height:430px;overflow:auto}
.hab__history-row{display:grid;grid-template-columns:34px 50px minmax(150px,1fr) 52px 58px;gap:5px;align-items:center;padding:5px 7px;border:1px solid;border-radius:8px;font-size:13px}
.hab__history-row--first{background:#eaf4ff;border-color:#bedcff}
.hab__history-row--second{background:#fff0f0;border-color:#f3caca}
.hab__history-no{font-weight:800}
.hab__history-side{font-size:12px;color:#667085}
.hab__history-code{font-size:20px;line-height:1;white-space:nowrap}
.hab__history-result{font-weight:700;white-space:nowrap}
.hab__empty{color:#667085;font-size:13px;padding:7px 2px}
.hab__side{display:grid;gap:8px;align-content:start}
.hab__stats{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.hab__stat{border-radius:8px;padding:8px;border:1px solid}
.hab__stat--first{background:#eaf4ff;border-color:#bedcff}
.hab__stat--second{background:#fff0f0;border-color:#f3caca}
.hab__stat span{display:block;font-size:11px;color:#667085}
.hab__stat strong{display:block;margin-top:1px;font-size:21px;line-height:1.15}
.hab__stat small{display:block;font-size:10px;color:#667085;margin-top:1px}
.hab__updated{font-size:10px;color:#667085;white-space:nowrap}
.hab__recommendation{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hab__recommendation-card{border:1px solid #dfe3e8;border-radius:9px;padding:9px;background:#fff}
.hab__recommendation-card--best{box-shadow:inset 0 0 0 1px rgba(36,87,214,.08)}
.hab__recommendation-card--second{background:#fafbfc}
.hab__recommendation-card.is-first{background:#eaf4ff;border-color:#bedcff}
.hab__recommendation-card.is-second{background:#fff0f0;border-color:#f3caca}
.hab__recommendation-label{font-size:11px;font-weight:800;color:#667085}
.hab__second-code{font-size:clamp(22px,3.7vw,32px);font-weight:800;line-height:1.2;letter-spacing:1px;margin-top:4px;min-height:31px}
.hab__recommendation-note{margin-top:6px;font-size:10px;color:#667085}
.hab__best-code{font-size:clamp(25px,4.3vw,38px);font-weight:800;line-height:1.2;letter-spacing:1px;margin-top:3px;min-height:36px}
.hab__best-meta{font-size:10px;color:#667085;margin-top:2px;line-height:1.4}
.hab__panel--candidates summary{cursor:pointer;font-weight:700;font-size:12px}
.hab__panel--candidates{margin-top:8px}
.hab__candidate-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}
.hab__candidate-grid h3{margin:0 0 3px;font-size:12px}
.hab__candidate-list{max-height:145px;overflow:auto;background:#f7f8fa;border-radius:7px;padding:7px;font-size:14px;line-height:1.65;word-break:break-word}
.hab__warning{color:#b42318;font-weight:700}
@media(max-width:900px){
  .hab__main-grid{grid-template-columns:1fr}
  .hab__palette{margin-left:0}
}
@media(max-width:620px){
  .hab__recommendation{grid-template-columns:1fr}

  .hab{padding:0 7px 12px}
  .hab__top{align-items:flex-start}
  .hab__top-actions{flex-direction:column}
  .hab__toolbar{gap:6px}
  .hab__legend,.hab__palette{width:100%}
  .hab__entry{grid-template-columns:1fr 1fr}
  .hab__code-input{grid-column:1/-1}
  .hab__entry .hab__btn{grid-column:1/-1}
    .hab__history-row{grid-template-columns:30px 42px minmax(120px,1fr)}
  .hab__history-result{grid-column:3}
  .hab__candidate-grid{grid-template-columns:1fr}
}

.hab__stat--common{background:#f3f5f8;border-color:#d9dee7}
.hab__candidate-grid--single{grid-template-columns:1fr}

.hab__defense-note{
  margin-top:6px;
  padding:7px 8px;
  border-radius:8px;
  background:#fff8e8;
  border:1px solid #f2dfb1;
  color:#715616;
  font-size:10px;
  line-height:1.5
}

.hab__best-meta{line-height:1.55}
