.help-body { min-height: 100vh; display: flex; flex-direction: column; }
.help-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--side); color: #fff; }
.help-top .brand { color: #fff; text-decoration: none; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.staff-link { color: rgba(255,255,255,.75); font-size: 13px; text-decoration: none; white-space: nowrap; margin-left: 12px; }
.staff-link:hover { color: #fff; }
#help { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 32px 16px 48px; }
.help-foot { text-align: center; color: var(--muted); font-size: 12px; padding: 18px; }
.help-hero { background: linear-gradient(120deg, var(--side), var(--side-2)); color: #fff; border-radius: 16px; padding: 34px 32px; margin-bottom: 22px; }
.help-hero h1 { color: #fff; font-size: 30px; }
.help-hero p { color: #c4e6e0; margin: 8px 0 0; font-size: 15.5px; max-width: 560px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.choice { display: block; text-decoration: none; color: inherit; padding: 22px; cursor: pointer; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .12s, transform .12s; }
.choice:hover { border-color: var(--teal-600); transform: translateY(-1px); }
.choice .ci { width: 42px; height: 42px; border-radius: 12px; background: var(--teal-100); color: var(--teal); display: grid; place-items: center; margin-bottom: 12px; }
.choice .ci svg { width: 22px; height: 22px; }
.choice h2 { margin-bottom: 4px; }
.choice p { margin: 0; color: var(--muted); }
.opt { color: var(--muted); font-weight: 450; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.codebox { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.codebox > div { background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: 12px; padding: 14px 16px; }
.codebox small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.codebox b { font-family: ui-monospace, Consolas, monospace; font-size: 26px; letter-spacing: .06em; color: var(--ink); }
.success-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--teal-100); color: var(--teal); display: grid; place-items: center; margin-bottom: 14px; }
.success-icon svg { width: 28px; height: 28px; }
.thread { display: grid; gap: 12px; padding: 18px 20px; }
.msg { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); max-width: 92%; }
.msg.customer { justify-self: end; background: var(--teal-50); border-color: var(--teal-100); }
.msg.staff { justify-self: start; }
.msg.note { justify-self: stretch; max-width: none; background: #fff8e6; border-color: #f5d98a; }
@media (prefers-color-scheme: dark) { .msg.note { background: #2a2310; border-color: #5c4a14; } }
.msg.system { justify-self: center; border: 0; background: none; color: var(--muted); font-size: 12.5px; padding: 2px; }
.msg-head { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.msg-head b { color: var(--ink); font-size: 13.5px; }
.msg-body { white-space: pre-wrap; word-wrap: break-word; }
.atts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.att { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); background: var(--panel); }
.att svg { width: 14px; height: 14px; color: var(--muted); }
.st { font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 99px; }
.st.open { background: #dbeafe; color: #1d4ed8; }
.st.pending { background: #fef3c7; color: #a16207; }
.st.solved { background: #dcfce7; color: #15803d; }
@media (prefers-color-scheme: dark) { .st.open { background: #172554; color: #93c5fd; } .st.pending { background: #3a2a06; color: #fcd34d; } .st.solved { background: #0f2e1a; color: #86efac; } }
.recent a { text-decoration: none; color: inherit; }
.filepick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filelist { font-size: 12.5px; color: var(--muted); }
@media (max-width: 680px) {
  .choices, .codebox { grid-template-columns: 1fr; }
  .help-hero { padding: 26px 20px; }
  .help-hero h1 { font-size: 24px; }
  .help-top { padding: 12px 16px; }
}

/* staff helpdesk (inside the portal) */
.hd { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
.hd-list { max-height: calc(100vh - 210px); overflow-y: auto; }
.hd-item { padding: 12px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; display: grid; gap: 3px; }
.hd-item:hover { background: var(--line-2); }
.hd-item.on { background: var(--teal-50); box-shadow: inset 3px 0 0 var(--teal); }
.hd-item .r1 { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.hd-item .r1 .grow { flex: 1; }
.hd-item .subj { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-item.unread .subj::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-right: 7px; vertical-align: 1px; }
.hd-item .pv { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.hd-meta label > span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.hd-meta select { padding: 6px 8px; }
.reply-box { padding: 14px 20px 18px; border-top: 1px solid var(--line-2); }
.reply-box.note textarea { background: #fffbeb; }
@media (prefers-color-scheme: dark) { .reply-box.note textarea { background: #221c0b; } }
@media (max-width: 1000px) { .hd { grid-template-columns: 1fr; } .hd-list { max-height: 320px; } }
.mini-av .avatar { width: 20px; height: 20px; font-size: 9px; }
.hd-meta .kbd { letter-spacing: .04em; }
@media (max-width: 680px) { .help-top .brand { font-size: 14px; } .help-top .brand .brand-logo img { height: 24px; } }