.acct { display: flex; flex-direction: column; gap: 0; align-items: stretch; }

.acct-nav {
  display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--warm-line, var(--mw-line-strong));

}
.acct-nav button {
  display: inline-flex; align-items: center; gap: 7px; width: auto;
  padding: 0 14px; min-height: 40px; margin-bottom: -1px;
  border: 1px solid transparent; border-bottom-color: transparent;
  border-radius: 10px 10px 0 0;


  -webkit-appearance: none; appearance: none;
  background-color: transparent; background-image: none;
  font-size: 13px; font-weight: 700; color: var(--warm-sub, var(--mw-muted));
  text-align: left; cursor: pointer; font-family: inherit; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mw-dur, .15s) var(--mw-ease, ease), color var(--mw-dur, .15s) var(--mw-ease, ease);
}
.acct-nav button:hover { background-color: var(--warm-bg, var(--mw-surface-sunken)); color: var(--warm-ink, var(--mw-ink)); }


.acct-nav button.on {
  background-color: var(--warm-card, var(--mw-surface));
  color: var(--accent-ink, var(--mw-accent-ink));
  border-color: var(--warm-line, var(--mw-line-strong));
  border-bottom-color: var(--warm-card, var(--mw-surface));
  box-shadow: inset 0 2px 0 0 var(--accent, var(--mw-accent));
}

.acct-nav button:focus-visible { outline: 2px solid var(--accent, var(--mw-accent)); outline-offset: -2px; }
.acct-nav button .ico { font-size: 15px; line-height: 1; }

.acct-nav button .dot {
  margin-left: auto; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px; background: var(--mw-danger); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
.acct-body { flex: 1 1 auto; min-width: 0; }
.acct-body > [data-acct-panel] { display: none; }
.acct-body > [data-acct-panel].on { display: block; }


.inq-form { display: grid; gap: 10px; }
.inq-form label { font-size: 12px; font-weight: 600; color: var(--warm-sub, var(--mw-ink-soft)); display: block; }
.inq-form select, .inq-form input, .inq-form textarea {
  width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 9px 10px; border: 1px solid var(--warm-line, var(--mw-line-strong)); border-radius: 8px;
  font-size: 13px; font-family: inherit; color: var(--warm-ink, var(--mw-ink));
  background: var(--warm-card, var(--mw-surface));
}
.inq-form textarea { min-height: 110px; line-height: 1.55; resize: vertical; }
.inq-form select:focus, .inq-form input:focus, .inq-form textarea:focus {
  outline: none; border-color: var(--accent, var(--mw-accent));
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(47, 95, 218, .12));
}

.inq-list { display: grid; gap: 10px; }
.inq-item {
  border: 1px solid var(--warm-line, var(--mw-line)); border-radius: 10px;
  background: var(--warm-card, var(--mw-surface)); overflow: hidden;
}
.inq-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 13px; cursor: pointer;
}
.inq-head:hover { background: var(--warm-bg, var(--mw-surface-sunken)); }
.inq-cat {
  font-size: 10.5px; font-weight: 700; color: var(--accent-ink, var(--mw-muted));
  background: var(--accent-soft, var(--mw-accent-soft)); padding: 2px 7px; border-radius: 9px;
}
.inq-title { font-size: 13px; font-weight: 700; color: var(--warm-ink, var(--mw-ink)); }
.inq-date { font-size: 11.5px; color: var(--warm-sub, var(--mw-muted)); }
.inq-state {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 10px;
}
.inq-state.open { background: var(--mw-warn-soft); color: var(--mw-warn-ink); }
.inq-state.answered { background: var(--mw-good-soft); color: var(--mw-good-ink); }
.inq-state.closed { background: var(--warm-bg, var(--mw-surface-sunken)); color: var(--warm-sub, var(--mw-muted)); }
.inq-new { width: 7px; height: 7px; border-radius: 50%; background: var(--mw-danger); }

.inq-body { display: none; padding: 0 13px 13px; border-top: 1px solid var(--warm-line, var(--mw-surface-sunken)); }
.inq-item.open .inq-body { display: block; }



.inq-msgs { display: grid; gap: 8px; margin: 12px 0; }
.inq-msg { max-width: 82%; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.inq-msg .who { display: block; font-size: 11px; font-weight: 700; margin-bottom: 3px; opacity: .75; }
.inq-msg .when { display: block; font-size: 10.5px; margin-top: 5px; opacity: .55; }

.inq-msg.user { margin-left: auto; background: var(--accent-soft, var(--mw-accent-soft)); color: var(--accent-ink, var(--mw-accent-ink)); border-bottom-right-radius: 3px; }
.inq-msg.staff { margin-right: auto; background: var(--warm-bg, var(--mw-surface-sunken)); color: var(--warm-ink, var(--mw-ink)); border-bottom-left-radius: 3px; }




#inq-list .inq-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#inq-list .inq-caret {
  width: 7px; height: 7px; flex: none; margin-left: 2px;
  border-right: 1.6px solid var(--warm-sub, var(--mw-muted));
  border-bottom: 1.6px solid var(--warm-sub, var(--mw-muted));
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
#inq-list .inq-item.open .inq-caret { transform: rotate(-135deg) translate(-2px, -2px); }
#inq-list .inq-q { padding: 13px 1px 0; }
#inq-list .inq-a {
  margin: 11px 0 0 14px; padding: 11px 13px; border-radius: 9px;
  background: var(--warm-bg, var(--mw-surface-sunken));
}
#inq-list .inq-a-label {
  font-size: 11px; font-weight: 700; margin-bottom: 5px;
  color: var(--warm-sub, var(--mw-muted));
}
#inq-list .inq-text { font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--warm-ink, var(--mw-ink)); }
#inq-list .inq-when { font-size: 11.5px; margin-top: 7px; color: var(--warm-sub, var(--mw-muted)); }

#inq-list .inq-reply { margin-top: 14px; }

.inq-reply { display: flex; gap: 8px; align-items: flex-end; }
.inq-reply textarea {
  flex: 1; min-height: 62px; box-sizing: border-box;
  padding: 9px 10px; border: 1px solid var(--warm-line, var(--mw-line-strong)); border-radius: 8px;
  font-size: 13px; font-family: inherit; line-height: 1.55; resize: vertical;
  color: var(--warm-ink, var(--mw-ink)); background: var(--warm-card, var(--mw-surface));
}
.inq-empty { font-size: 12.5px; color: var(--warm-sub, var(--mw-muted)); padding: 14px 2px; }

@media (max-width: 760px) {



  .acct-nav { border-bottom: none; gap: 6px; }
  .acct-nav button {
    margin-bottom: 0; border-radius: 10px;
    border-color: var(--warm-line, var(--mw-line));
    padding: 0 12px;
  }
  .acct-nav button.on {
    border-color: var(--warm-line, var(--mw-line-strong));
    border-bottom-color: var(--warm-line, var(--mw-line-strong));
  }
  .inq-msg { max-width: 92%; }
}




@media (max-width: 640px) {
  .inq-form select, .inq-form input, .inq-form textarea { font-size: 16px; }
}