.help-head { padding-bottom: 32px }

.help { padding-bottom: 64px }
.help [hidden] { display: none }

.help-layout { max-width: 820px; margin: 0 auto }

.help-panel { padding: 24px 26px 26px; background: linear-gradient(135deg, var(--panel-a) 0%, var(--panel-b) 55%, var(--panel-c) 100%); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -36px rgba(5, 8, 25, .9) }
.help-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px }
.help-panel-intro { display: grid; gap: 6px; min-width: 0 }
.help-my { flex: none }
.help-panel-title { display: flex; align-items: center; gap: 10px; font: 900 20px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); text-shadow: 2px 2px 0 var(--ink) }
.help-panel-title .ic { width: 20px; height: 20px }
.help-panel-lead { font-size: 15px; line-height: 1.55; color: var(--soft) }

.help-form { display: grid; gap: 16px }
.help-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.help-row { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px; align-items: start }
.help-form textarea.control { min-height: 170px }
.help-form .control.is-invalid { border-color: rgba(255, 138, 122, .8); box-shadow: 0 0 0 3px rgba(255, 138, 122, .14) }
.help-error { min-height: 0; font: 700 13px var(--font); color: #ff8a7a }
.help-error:empty { display: none }
.help-counter { margin-left: auto; font: 700 12px var(--font); letter-spacing: 0; text-transform: none; color: var(--mute) }

.help-drop { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; text-align: center; background: rgb(var(--plate-rgb) / .5); border: 2px dashed rgb(var(--tint-rgb) / .28); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s }
.help-drop .ic { width: 26px; height: 26px; color: var(--gold) }
.help-drop:hover, .help-drop.is-over { border-color: rgba(255, 201, 60, .7); background: rgba(255, 201, 60, .06) }
.help-drop.is-full { opacity: .55 }
.help-drop-text { font: 800 15px var(--font); color: var(--text) }
.help-drop-hint { font-size: 13px; color: var(--mute) }
.help-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.help-file-input:focus-visible + .help-drop { border-color: rgba(255, 201, 60, .8); box-shadow: 0 0 0 3px rgba(255, 201, 60, .2) }

.help-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px }
.help-files:empty { display: none }
.help-file { position: relative; display: grid; gap: 6px; padding: 6px; background: rgb(var(--tint-rgb) / .06); border: 1px solid var(--line); border-radius: 12px }
.help-file img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px }
.help-file figcaption { font: 700 11px var(--font); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.help-file-remove { position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: rgb(var(--plate-rgb) / .9); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: background .15s }
.help-file-remove .ic { width: 15px; height: 15px }
.help-file-remove:hover { background: #e5484d }

.help-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 4px }
.help-actions .btn:disabled { opacity: .7; cursor: wait; transform: none }

.help-guest { display: grid; justify-items: center; gap: 12px; padding: 14px 4px 6px; text-align: center }
.help-guest-icon { width: 60px; height: 60px; display: grid; place-items: center; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); border-radius: 17px; box-shadow: 4px 4px 0 var(--ink) }
.help-guest-icon .ic { width: 28px; height: 28px; stroke-width: 2.2 }
.help-guest-title { margin-top: 6px; font: 900 24px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--gold); text-shadow: 2px 2px 0 var(--ink) }
.help-guest-text { max-width: 440px; font-size: 15px; line-height: 1.6; color: var(--soft) }
.help-guest .btn { margin-top: 6px }
.help-guest-hint { font-size: 14px; color: var(--mute) }
.help-guest-hint a, .help-faq-answer a { font-weight: 800; color: var(--gold-text) }
.help-guest-hint a:hover, .help-faq-answer a:hover { color: var(--gold) }

.help-contacts { max-width: 820px; margin: 28px auto 0; text-align: center }
.help-contacts-title { font: 900 13px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text) }
.help-contacts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; text-align: left }

.help-contact { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; background: var(--bubble); border: 1px solid rgb(var(--tint-rgb) / .12); border-radius: 14px; transition: border-color .15s, transform .15s }
.help-contact:hover { border-color: rgba(255, 201, 60, .55); transform: translateY(-1px) }
.help-contact-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--gold); background: rgba(255, 201, 60, .1); border-radius: 10px }
.help-contact-icon.is-telegram { color: #29a9ea; background: rgba(41, 169, 234, .12) }
.help-contact-icon .ic { width: 18px; height: 18px }
.help-contact-body { min-width: 0; display: grid; gap: 1px }
.help-contact-body span { font: 800 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mute) }
.help-contact-body b { font: 800 14px var(--font); color: var(--text); overflow-wrap: anywhere }

.help-faq { margin-top: 48px }
.help-faq-title { font-size: 30px }
.help-faq-list { display: grid; gap: 10px; max-width: 820px; margin: 24px auto 0 }
.help-faq-item { background: rgb(var(--plate-rgb) / .62); border: 1px solid rgb(var(--tint-rgb) / .12); border-radius: 14px; transition: border-color .15s }
.help-faq-item[open] { border-color: var(--line-gold) }
.help-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; font: 800 16px/1.4 var(--font); color: var(--text); cursor: pointer; list-style: none }
.help-faq-item summary::-webkit-details-marker { display: none }
.help-faq-item summary .ic { flex: none; width: 18px; height: 18px; color: var(--gold); transition: transform .2s }
.help-faq-item[open] summary .ic { transform: rotate(180deg) }
.help-faq-item summary:hover { color: var(--gold-text) }
.help-faq-answer { display: grid; gap: 8px; padding: 0 18px 16px; font-size: 15px; line-height: 1.6; color: var(--soft) }
.help-faq-answer ul { display: grid; gap: 4px; padding-left: 20px }
.help-faq-answer strong { color: var(--text) }

@media (max-width: 640px) {
  .help-head { padding-bottom: 24px }
  .help-panel { padding: 18px 14px 18px; border-radius: 18px }
  .help-panel-title { font-size: 18px }
  .help-row { grid-template-columns: minmax(0, 1fr) }
  .help-actions { flex-direction: column-reverse }
  .help-actions .btn { width: 100%; justify-content: center }
  .help-panel-head { flex-direction: column }
  .help-my { width: 100%; justify-content: center }
  .help-contacts-grid { grid-template-columns: minmax(0, 1fr) }
  .help-faq { margin-top: 36px }
  .help-faq-title { font-size: clamp(21px, 7vw, 26px) }
  .help-faq-item summary { padding: 14px; font-size: 15px }
  .help-faq-answer { padding: 0 14px 14px }
}