/* ==================== ГЛОБАЛНИ НАСТРОЙКИ (нов панел) ==================== */
.sg-wrap { max-width: 760px; margin: 0 auto; padding: 8px 12px 40px; }
.sg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.sg-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
.sg-hint { font-size: 12px; color: var(--text-dim); }

.sg-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
}
.sg-section__hdr { font-size: 15px; font-weight: 700; color: #fff; }
.sg-section__desc { font-size: 12px; color: var(--text-dim); margin: 3px 0 14px; }

/* ---- font picker ---- */
.sg-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sg-font {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 13px; cursor: pointer; color: var(--text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sg-font:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.sg-font--active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sg-font__name { font-size: 15px; font-weight: 600; color: #fff; }
.sg-font__sample { font-size: 13px; color: var(--text-dim); }

/* ---- colors ---- */
.sg-colors { display: flex; flex-direction: column; }
.sg-color {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.sg-color:first-child { border-top: none; }
.sg-color__label { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
.sg-color__hint { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sg-color__ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sg-color__pick {
  width: 34px; height: 30px; padding: 0; border: 1px solid var(--border);
  border-radius: 6px; background: none; cursor: pointer;
}
.sg-color__txt {
  width: 100px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 12px; font-family: monospace;
  padding: 6px 8px; outline: none;
}
.sg-color__txt:focus { border-color: var(--accent); }
.sg-color__reset {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-dim); width: 30px; height: 30px; cursor: pointer; font-size: 13px;
}
.sg-color__reset:hover { color: var(--text); border-color: var(--border-hover); }

/* ---- footer ---- */
.sg-foot { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.sg-legacy { margin-left: auto; font-size: 12px; color: var(--text-dim); text-decoration: none; }
.sg-legacy:hover { color: var(--text); }