/* ==========================================================================
   FORM-MODAL.CSS — общий набор для окон-форм сайта (sk-fm-*).
   Цвет раздела задаётся на .sk-fm: --fm-a (HEX), --fm-a-rgb (r,g,b), --fm-on (текст на акценте).
   ========================================================================== */
.sk-fm { --fm-a: #00d2ff; --fm-a-rgb: 0, 210, 255; --fm-on: #00131a; position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 5, 9, .78); backdrop-filter: blur(4px); }
.sk-fm[hidden] { display: none !important; }
.sk-fm-box { position: relative; width: min(720px, calc(100vw - 24px)); max-height: min(92vh, 920px); display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(160deg, #141922 0%, #0d1117 100%); border: 1px solid rgba(var(--fm-a-rgb), .35); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 40px rgba(var(--fm-a-rgb), .07); color: #e6edf3; font-size: 14px; }
.sk-fm.is-open .sk-fm-box { animation: skFmIn .22s ease; }
@keyframes skFmIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.sk-fm-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(var(--fm-a-rgb), .03); flex-shrink: 0; }
.sk-fm-head-ico { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: rgba(var(--fm-a-rgb), .12); border: 1px solid rgba(var(--fm-a-rgb), .35); color: var(--fm-a); font-size: 17px; }
.sk-fm-head-txt { flex: 1; min-width: 0; }
.sk-fm-title { margin: 0 !important; padding: 0 !important; border: 0 !important; color: #fff; font-size: 16px !important; font-weight: 800; line-height: 1.25; }
.sk-fm-title::before, .sk-fm-title::after { display: none !important; }
.sk-fm-sub { margin: 2px 0 0 !important; color: var(--text-muted, #8b949e); font-size: 12px; }
.sk-fm-close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text-muted, #8b949e); font-size: 16px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sk-fm-close:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #fff; }

.sk-fm-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.sk-fm-sec { margin: 0 0 18px; }
.sk-fm-sec[hidden] { display: none !important; }
.sk-fm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sk-fm-grid.is-3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.sk-fm-field { display: flex; flex-direction: column; gap: 7px; margin: 0; min-width: 0; }
.sk-fm-label { display: block; margin: 0 0 8px; color: #c9d1d9; font-size: 12px; font-weight: 700; letter-spacing: .2px; }
.sk-fm-field > .sk-fm-label { margin: 0; }
.sk-fm-label .req { color: var(--fm-a); }
.sk-fm-hint { margin: 6px 0 0; color: var(--text-muted, #8b949e); font-size: 11px; line-height: 1.35; }
.sk-fm-field .sk-fm-hint { margin: 0; }

.sk-fm-input { width: 100%; height: 42px; margin: 0 !important; padding: 0 13px; box-sizing: border-box; background: #0b0e14 !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 10px !important; color: #e6edf3 !important; font: inherit; font-size: 14px; color-scheme: dark; box-shadow: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.sk-fm-input::placeholder { color: #5b6573; }
.sk-fm-input:hover { border-color: rgba(255, 255, 255, .18) !important; }
.sk-fm-input:focus { outline: none; border-color: var(--fm-a) !important; box-shadow: 0 0 0 3px rgba(var(--fm-a-rgb), .14); background: #0d1218 !important; }
.sk-fm-input.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.sk-fm-input.is-area { height: auto; min-height: 64px; padding: 11px 13px; line-height: 1.45; resize: vertical; }
.sk-fm-input.is-bad { border-color: #ff4757 !important; box-shadow: 0 0 0 3px rgba(255, 71, 87, .15); }
.sk-fm-affix { position: relative; display: block; }
.sk-fm-affix-pre, .sk-fm-affix-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #5b6573; font-size: 12px; font-weight: 700; pointer-events: none; }
.sk-fm-affix .sk-fm-input { padding-left: 34px; }
.sk-fm-affix:has(.sk-fm-affix-pre) .sk-fm-input { padding-left: 46px; }
.sk-fm-affix.is-suffix .sk-fm-input { padding-left: 13px; padding-right: 40px; }
.sk-fm-affix-suf { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #6e7681; font-size: 13px; pointer-events: none; }
.sk-fm-affix:focus-within .sk-fm-affix-pre, .sk-fm-affix:focus-within .sk-fm-affix-ico { color: var(--fm-a); }
.sk-fm-input[type="number"]::-webkit-inner-spin-button { opacity: .35; }

/* Плашки выбора типа */
.sk-fm-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.sk-fm-type { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 64px; padding: 10px 6px; margin: 0; background: #0b0e14; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; color: #8b949e; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: border-color .15s, color .15s, background .15s, transform .1s; }
.sk-fm-type i { font-size: 18px; }
.sk-fm-type:hover { border-color: rgba(255, 255, 255, .2); color: #e6edf3; }
.sk-fm-type:active { transform: scale(.97); }
.sk-fm-type:focus-visible { outline: 2px solid var(--fm-a); outline-offset: 2px; }
.sk-fm-type.is-active { background: rgba(var(--fm-a-rgb), .1); border-color: var(--fm-a); color: var(--fm-a); box-shadow: inset 0 0 0 1px rgba(var(--fm-a-rgb), .25); }

/* Чипы */
.sk-fm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-fm-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0; padding: 0 13px; background: #0b0e14; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; color: #c9d1d9; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; user-select: none; transition: border-color .15s, background .15s, color .15s; }
.sk-fm-chip:hover { border-color: rgba(255, 255, 255, .22); }
.sk-fm-chip:focus-visible { outline: 2px solid var(--fm-a); outline-offset: 2px; }
.sk-fm-chip.is-active { background: rgba(var(--fm-a-rgb), .1); border-color: var(--fm-a); color: var(--fm-a); }
.sk-fm-chip em { font-style: normal; font-weight: 500; opacity: .7; }

/* «Дополнительно» */
.sk-fm-more { margin: 0 0 6px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; background: rgba(255, 255, 255, .015); }
.sk-fm-more > summary { display: flex; align-items: center; gap: 8px; padding: 11px 14px; color: #8b949e; font-size: 12.5px; font-weight: 700; cursor: pointer; list-style: none; user-select: none; }
.sk-fm-more > summary::-webkit-details-marker { display: none; }
.sk-fm-more > summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'FontAwesome'; font-weight: 900; margin-left: auto; font-size: 10px; transition: transform .2s; }
.sk-fm-more[open] > summary::after { transform: rotate(180deg); }
.sk-fm-more > summary:hover { color: #e6edf3; }
.sk-fm-more-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 14px 14px; }
.sk-fm-more-body [hidden] { display: none !important; }
.sk-fm-link { display: inline-flex; align-items: center; gap: 7px; color: #8b949e !important; font-size: 12px; text-decoration: none !important; }
.sk-fm-link:hover { color: var(--fm-a) !important; }

/* Подвал */
.sk-fm-foot { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(13, 17, 23, .96); }
.sk-fm-foot-sp { flex: 1; }
.sk-fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin: 0; padding: 0 18px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s, opacity .15s; }
.sk-fm-btn:active { transform: scale(.98); }
.sk-fm-btn[hidden] { display: none !important; }
.sk-fm-btn.is-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .12); color: #c9d1d9; }
.sk-fm-btn.is-ghost:hover { border-color: rgba(255, 255, 255, .25); color: #fff; }
.sk-fm-btn.is-danger { border-color: rgba(255, 71, 87, .45); color: #ff6b7a; }
.sk-fm-btn.is-danger:hover, .sk-fm-btn.is-danger.is-armed { border-color: #ff4757; background: rgba(255, 71, 87, .1); color: #ff8592; }
.sk-fm-btn.is-primary { min-width: 200px; background: var(--fm-a); border: 1px solid var(--fm-a); color: var(--fm-on); }
.sk-fm-btn.is-primary:hover { box-shadow: 0 0 18px rgba(var(--fm-a-rgb), .45); }
.sk-fm-btn.is-busy { opacity: .6; cursor: progress; pointer-events: none; }
.sk-fm-btn:focus-visible { outline: 2px solid var(--fm-a); outline-offset: 2px; }

@media (max-width: 640px) {
    .sk-fm { padding: 8px; align-items: flex-end; }
    .sk-fm-grid, .sk-fm-grid.is-3 { grid-template-columns: 1fr 1fr; }
    .sk-fm-grid.is-3 > :first-child { grid-column: 1 / -1; }
    .sk-fm-btn.is-primary { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .sk-fm.is-open .sk-fm-box { animation: none; } }