.cf { max-width: 980px; margin: 0 auto; padding-bottom: 50px; }
.cf-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.cf-btn { padding:8px 12px; border:1px solid #ddd; background:#fff; cursor:pointer; border-radius:8px; }
.cf-btn.is-on { border-color:#111; font-weight:700; }
.cf-toggle { display:flex; gap:8px; align-items:center; font-size:14px; user-select:none; }

.cf-board-wrap { border:1px solid #e5e5e5; border-radius:12px; padding:12px; }
.cf-head { font-family: monospace; opacity:.7; margin-bottom:8px; }

.cf-row { display:flex; gap:6px; align-items:center; margin:6px 0; }
.cf-string { width:26px; text-align:center; font-family: monospace; opacity:.8; }

.cf-cell {
  width:34px; height:30px; border:1px solid #ddd; background:#fff;
  border-radius:10px; cursor:pointer;
}
.cf-cell.is-on { outline:2px solid #111; border-color:#111; }

.cf-out { margin-top:12px; }
.cf-sign { font-family: monospace; opacity:.7; margin-bottom:8px; }
.cf-title { font-weight:700; margin-bottom:6px; }
.cf-list { margin:0; padding-left:18px; }
.cf-sub { opacity:.7; font-size: 0.95em; }
.cf-fallback { margin-left:8px; opacity:.6; font-size: 0.9em; }
/* SVG-гриф */
#cf-board { overflow-x: auto; }
.cf-svg { width: 100%; height: auto; display: block; }

.cf-neck { fill: #f5efe3; stroke: #d8cdbb; stroke-width: 2; }
.cf-fret { stroke: #b9b9b9; stroke-width: 2; }
.cf-nut  { stroke: #222; stroke-width: 7; }

.cf-string { stroke: #444; stroke-linecap: round; }
.cf-inlay { fill: rgba(0,0,0,.14); }

.cf-dot { fill: #111; }
.cf-barre { fill: rgba(0,0,0,.22); }

.cf-string-label,
.cf-fret-label,
.cf-toptext {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  fill: rgba(0,0,0,.75);
  text-anchor: middle;
  dominant-baseline: middle;
}

.cf-fret-label { cursor: pointer; fill: rgba(0,0,0,.55); }
.cf-toptext.is-hint { opacity: .25; }

.cf-hit { fill: transparent; cursor: pointer; }
.cf-hit:hover { fill: rgba(0,0,0,.04); }

.cf-top-hit { fill: transparent; cursor: pointer; }
.cf-top-hit:hover { fill: rgba(0,0,0,.04); }

/* Фото-гриф */
.cf-neckwrap { position: relative; max-width: 420px; } /* подгони под дизайн */
.cf-neckimg { width: 100%; height: auto; display: block; border-radius: 12px; }
.cf-overlay {
  position: absolute; inset: 0;
  cursor: crosshair;
}
.cf-calib-hint { font-size: 14px; opacity:.75; margin:10px 0; }
.cf-calib-step { font-weight:700; }
.cf-dotmark {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;

  /* Красный объёмный градиент */
  background: radial-gradient(circle at 35% 30%,
    #ffb3b3 0%,
    #cc0404 40%,
    #b30000 75%,
    #6b0000 100%
  );

  /* Тень под точкой */
  box-shadow:
    0 3px 6px rgba(0,0,0,0.4),
    inset 0 -3px 6px rgba(0,0,0,0.4),
    inset 0 2px 4px rgba(255,255,255,0.6);
}

.cf-dotmark {
  animation: popIn 0.12s ease-out;
}

@keyframes popIn {
  from { transform: translate(-50%, -50%) scale(0.6); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

.cf-barremark{
  position:absolute;
  height: 22px;
  border-radius: 14px;
  pointer-events:none;

  background: linear-gradient(
    to bottom,
    #ff6a6a 0%,
    #ff1f1f 50%,
    #990000 100%
  );

  box-shadow:
    0 4px 8px rgba(0,0,0,0.45),
    inset 0 -4px 6px rgba(0,0,0,0.4),
    inset 0 3px 5px rgba(255,255,255,0.5);
}


.cf-chordtitle{
  position:absolute;
  left:50%;
  top:15px;
  transform:translateX(-50%);
  z-index:5;

  font-weight:900;
  font-size:58px;

  color:#ffffff;

  text-shadow:
	0 0 2px #fff,
    0 0 5px #ff2d2d,
    0 0 18px #ff0000,
    0 4px 10px rgba(0,0,0,.8);

  pointer-events:none;
}




.cf-watermark{
  position:absolute;
  left:49%;
  top:100px;
  transform:translateX(-50%);
  z-index:5;

  font-weight:800;
  font-size:30px;
  letter-spacing:0.5px;

  color:#fff;
  -webkit-text-stroke: 1px #000;

  opacity:.85;

  text-shadow:
	0 0 1px #fff,
    0 0 3px #ff2d2d,
    0 0 5px #ff0000,
    0 0px 0px rgba(0,0,0,.8);
pointer-events:none;
}








/* важно: чтобы абсолютные элементы работали */
.cf-neckwrap{ position: relative; }


/* чтобы цифры могли выходить левее грифа */
.cf-neckwrap{ overflow: visible; }


/* контейнер цифр */
.cf-fretlabels{
  position:absolute;
  inset:0;
  z-index:5;
}

/* сама цифра */
.cf-fretlabel{
  position: absolute;
  left: 13%;               /* насколько слева от грифа */
  transform: translateY(-50%);
  font-weight:400;
  font-size:20px;
  /* color: rgba(255,255,255,.9); */
  -webkit-text-stroke: 1px rgba(0,0,0,.8);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  user-select:none;
    pointer-events: auto;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}

.cf-fretlabel:hover{
  background: rgba(0,0,0,.18);
}




.cf-barreclose{
  position:absolute;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:900;
  font-size:16px;
  line-height:1;

  color:#fff;
  background: rgba(0,0,0,.55);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);

  cursor:pointer;
  z-index: 6;
  user-select:none;
}
.cf-barreclose:hover{
  background: rgba(0,0,0,.75);
}


.cf-overlay{ position:absolute; inset:0; z-index: 2; }
.cf-fretlabels{ position:absolute; inset:0; z-index: 3; }
.cf-chordtitle, .cf-watermark{ z-index: 4; }
.cf-barreclose{ z-index: 6; }


/* базовая геометрия */
.cf-neckwrap{ position: relative; }
.cf-neckimg{ display:block; width:100%; height:auto; }

/* слой кликов по грифу (должен быть поверх картинки) */
.cf-overlay{
  position:absolute;
  inset:0;
  z-index:2;
}

/* контейнер цифр НЕ должен перехватывать клики по пустому месту */
.cf-fretlabels{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;   /* ключевое */
}

/* а сами цифры должны быть кликабельными */
.cf-fretlabel{
  position:absolute;     /* ключевое (иначе div растягивается и перекрывает весь гриф) */
  left: 50px;
  width: auto;
  text-align:center;
  pointer-events:auto;   /* кликается только сама цифра */
  cursor:pointer;
  transform: translateY(-50%);
  font-weight: 400;
  font-size: 24px;
  user-select:none;
}

.cf-fretlabel:hover{
  background: rgba(0,0,0,.2);
  border-radius: 8px;
}

/* крестик должен быть выше всех */
.cf-barreclose{ z-index: 6; }


.cf-fretlabel.is-active{
  background: #ff2d2d;
  color:#fff;
  -webkit-text-stroke: 0;
  border-radius:8px;
}

/* ===== Sticky info bar (always visible) ===== */
.cf-sticky{
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 24px));
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  z-index: 9999;
}

.cf-sticky__text{ min-width: 0; }

.cf-sticky__hint{
  font-size: 13px;
  line-height: 1.25;
  opacity: .78;
  margin-bottom: 6px;
}

.cf-sign{ font-family: monospace; opacity:.7; margin-bottom: 6px; }

/* result inside sticky */
.cf-sticky .cf-result{
  font-size: 14px;
}

.cf-refresh{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

.cf-refresh:active{ transform: translateY(1px); }

.cf-refresh__icon{ font-size: 18px; line-height: 1; }
.cf-refresh__text{ font-weight: 700; }

@media (max-width: 520px){
  .cf { padding-bottom: 140px; }
  .cf-sticky{ bottom: 10px; padding: 10px; }
  .cf-refresh{ padding: 10px; }
  .cf-refresh__text{ display:none; }
}