:root {
  --ink: #172033;
  --muted: #667085;
  --line: #e3e8f2;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --brand: #3658d4;
  --brand-dark: #2747bb;
  --success: #087f5b;
  --warning: #b55b00;
  --danger: #b42318;
  --radius: 16px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  color: var(--brand-dark);
}

.container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header,
.admin-header {
  color: #fff;
  background: #15233e;
  box-shadow: 0 2px 12px rgb(23 32 51 / 12%);
}

.admin-header {
  background: #242b46;
}

.header-content {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 750;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.brand:hover {
  color: #fff;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #5e7aff;
  font-size: 12px;
  letter-spacing: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 5px;
}

.main-nav>a,
.logout-form button {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  color: #cbd5eb;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
}

.main-nav>a:hover,
.main-nav>a.active,
.logout-form button:hover {
  color: #fff;
  background: rgb(255 255 255 / 12%);
}

.logout-form {
  margin: 0;
}

.page-content {
  padding: 44px 0 64px;
}

.hero,
.query-heading,
.page-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin: 8px 0 28px;
}

.hero h1,
.query-heading h1,
.page-title h1 {
  margin: 7px 0 9px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.16;
  letter-spacing: -.045em;
}

.hero p,
.query-heading p,
.page-title p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.eyebrow {
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

.hero-badge {
  display: grid;
  gap: 4px;
  min-width: 225px;
  padding: 17px 20px;
  border: 1px solid #dae2ff;
  border-radius: var(--radius);
  color: #334476;
  background: #edf1ff;
}

.hero-badge strong {
  color: #2e49b7;
}

.hero-badge span,
.field-tip,
.muted {
  color: var(--muted);
  font-size: 13px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 24px rgb(21 35 62 / 4%);
}

.form-panel {
  padding: clamp(22px, 4vw, 40px);
}

.ticket-form,
.stack-form {
  display: grid;
  gap: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

label,
fieldset {
  display: grid;
  gap: 8px;
  color: #35405a;
  font-size: 14px;
  font-weight: 700;
}

.label-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.field-tip {
    white-space: nowrap;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 9px;
}

input,
select,
textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #cfd8e8;
  border-radius: 9px;
  outline: none;
  color: var(--ink);
  background: #fff;
  font-weight: 450;
  transition: border-color .15s, box-shadow .15s;
}

input[type="file"] {
  padding: 9px;
  background: #f9fbff;
  font-size: 13px;
}

textarea {
  resize: vertical;
  line-height: 1.55;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #647fea;
  box-shadow: 0 0 0 3px rgb(100 127 234 / 17%);
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.radio-row label,
.switch-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
}

input[type="radio"],
input[type="checkbox"] {
  width: auto;
  accent-color: var(--brand);
}

.category-note {
  min-height: 40px;
  padding: 11px 14px;
  /*border-left: 3px solid #8ea4ff;*/
  border-radius: 0 8px 8px 0;
  color: #41506e;
  background: #f1f4ff;
  font-size: 15px;
}

.category-note strong {
  display: block;
  margin-bottom: 6px;
  color: #2e49b7;
  font-size: 13px;
}

.category-note p {
  margin: 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 3px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 19px;
  border: 1px solid var(--brand);
  border-radius: 9px;
  color: #fff;
  background: var(--brand);
  cursor: pointer;
  font-weight: 750;
  transition: background .15s, transform .15s;
}

.button:hover {
  color: #fff;
  background: var(--brand-dark);
  transform: translateY(-1px);
}

.button-quiet {
  color: #44527a;
  border-color: #cbd5ed;
  background: #fff;
}

.button-quiet:hover {
  color: var(--brand);
  background: #f4f6ff;
}

.button-block {
  width: 100%;
}

.notice {
  margin: 0 0 22px;
  padding: 13px 16px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 14px;
}

.notice.success {
  color: #056846;
  border-color: #a8e4c9;
  background: #ecfdf4;
}

.notice.error {
  color: var(--danger);
  border-color: #f8c8c3;
  background: #fff3f2;
}

.lookup-panel {
  padding: 22px;
}

.lookup-form {
  display: flex;
  align-items: end;
  gap: 13px;
}

.lookup-form label {
  flex: 1;
}

.local-tickets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
}

.local-tickets button {
  padding: 4px 8px;
  border: 1px solid #d8e0ee;
  border-radius: 6px;
  color: #465576;
  background: #f9fbff;
  cursor: pointer;
  font-size: 12px;
}

.ticket-results {
  display: grid;
  gap: 18px;
  margin-top: 36px;
}

.ticket-results>h2,
.panel h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.02em;
}

.ticket-results>h2 span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.ticket-card {
  overflow: hidden;
}

.ticket-card-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: #fbfcff;
}

.ticket-card-header>div {
  display: grid;
  gap: 5px;
}

.ticket-number {
  color: #263d9d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  letter-spacing: .025em;
}

time {
  color: var(--muted);
  font-size: 12px;
}

.status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.status-pending {
  color: #a34c00;
  background: #fff2df;
}

.status-awaiting_user {
  color: #2855a9;
  background: #e9f0ff;
}

.status-completed {
  color: #087456;
  background: #e4f8ef;
}

.ticket-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.ticket-info div {
  min-width: 0;
}

.ticket-info dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}

.ticket-info dd {
  margin: 0;
  color: #27344f;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ticket-card>h3,
.ticket-card>.conversation,
.reply-area,
.closed-note {
  margin-left: 24px;
  margin-right: 24px;
}

.ticket-card>h3 {
  margin-top: 22px;
  margin-bottom: 13px;
  font-size: 15px;
}

.conversation {
  display: grid;
  gap: 12px;
}

.message {
  max-width: min(85%, 700px);
  padding: 14px 16px;
  border-radius: 12px;
}

.message-user {
  border: 1px solid #dfe5f1;
  background: #f6f8fc;
}

.message-admin {
  justify-self: end;
  color: #fff;
  background: #3c5dd5;
}

.message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 7px;
  font-size: 12px;
}

.message-admin time {
  color: #d9e2ff;
}

.message-content {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

.attachment {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 220px;
  padding: 6px 8px;
  border-radius: 7px;
  color: inherit;
  background: rgb(255 255 255 / 16%);
  font-size: 12px;
  overflow: hidden;
}

.message-user .attachment {
  color: #344668;
  background: #e9eef8;
}

.attachment span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment img {
  display: block;
  width: 42px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}

.reply-area {
  margin-top: 25px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.reply-area h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.reply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.reply-actions input {
  max-width: 60%;
}

.close-ticket-form {
  margin-top: 12px;
}

.closed-note {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #4e5c78;
  font-size: 14px;
}

.empty-state {
  color: var(--muted);
  text-align: center;
}

.site-footer {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
  font-size: 13px;
}

.auth-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 25px;
  background: radial-gradient(circle at top right, #e5ebff 0, transparent 34%), #f3f6fc;
}

.auth-card {
  width: min(440px, 100%);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 65px rgb(47 65 112 / 13%);
}

.install-card {
  width: min(600px, 100%);
}

.auth-card h1 {
  margin: 8px 0;
  font-size: 28px;
  letter-spacing: -.04em;
}

.auth-card>.muted {
  margin: 0 0 25px;
}

.back-link {
  display: inline-block;
  margin-top: 21px;
  color: #53617f;
  font-size: 14px;
}

.admin-content {
  padding-top: 36px;
}

.page-title {
  margin-top: 0;
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.filter-tabs a {
  padding: 8px 13px;
  border-radius: 8px;
  color: #54627f;
  background: #eaf0f8;
  font-size: 14px;
  font-weight: 700;
}

.filter-tabs a.active {
  color: #fff;
  background: var(--brand);
}

.table-panel {
  overflow: hidden;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

th {
  color: #66748f;
  background: #f9fbfe;
  font-size: 12px;
  letter-spacing: .03em;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: #fbfcff;
}

.table-link {
  font-weight: 700;
}

.ticket-list-tools {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 18px;
}

.ticket-list-tools form,
.table-actions form {
  margin: 0;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.button-danger {
  border-color: #c54d4d;
  background: #c54d4d;
  box-shadow: 0 7px 16px rgb(160 50 50 / 16%);
}

.button-danger:hover {
  background: #a93f3f;
}

.button-complete {
  border-color: #3d9b82;
  background: #3d9b82;
  box-shadow: 0 7px 16px rgb(47 127 106 / 16%);
}

.button-complete:hover {
  background: #2e806b;
}

.button-detail {
  border-color: #5d65c7;
  background: #5d65c7;
  box-shadow: 0 7px 16px rgb(67 74 160 / 16%);
}

.button-detail:hover {
  color: #fff;
  background: #4b53ad;
}

.button-small {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 12px;
}

.empty-cell {
  color: var(--muted);
  text-align: center;
}

.detail-title {
  margin-top: 17px;
}

.details-panel,
.conversation-panel,
.reply-panel {
  padding: 24px;
  margin-top: 18px;
}

.admin-ticket-info {
  padding: 0;
  border: 0;
  grid-template-columns: repeat(3, 1fr);
}

.conversation-panel h2,
.reply-panel h2 {
  margin-bottom: 18px;
}

.reply-panel>.muted {
  margin-top: -10px;
  margin-bottom: 18px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.settings-card {
  padding: 24px;
}

.settings-card h2 {
  margin-bottom: 15px;
}

.settings-card>.muted {
  margin-top: -6px;
  margin-bottom: 16px;
}

.inline-select {
  margin-bottom: 16px;
}

.mail-settings {
  grid-column: 1 / -1;
}

.test-mail-form {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.test-mail-form label {
  flex: 1;
}

@media (max-width: 720px) {
  .ticket-list-tools {
    justify-content: stretch;
    flex-direction: column;
  }

  .ticket-list-tools form,
  .ticket-list-tools .button {
    width: 100%;
  }

  .container {
    width: min(100% - 28px, 1120px);
  }

  .header-content {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 15px 0;
  }

  .main-nav {
    width: 100%;
    justify-content: space-between;
    gap: 2px;
  }

  .main-nav>a,
  .logout-form button {
    padding: 0 8px;
    font-size: 13px;
  }

  .page-content {
    padding: 30px 0 42px;
  }

  .hero,
  .query-heading,
  .page-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 22px;
  }

  .hero h1,
  .query-heading h1,
  .page-title h1 {
    font-size: 31px;
  }

  .hero-badge {
    width: 100%;
  }

  .form-grid,
  .settings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-panel {
    padding: 20px;
  }

  .lookup-form,
  .test-mail-form {
    align-items: stretch;
    flex-direction: column;
  }

  .lookup-form .button,
  .test-mail-form .button {
    width: 100%;
  }

  .ticket-card-header {
    padding: 17px;
  }

  .ticket-info,
  .admin-ticket-info {
    grid-template-columns: repeat(2, 1fr);
    padding: 17px;
    gap: 14px;
  }

  .ticket-card>h3,
  .ticket-card>.conversation,
  .reply-area,
  .closed-note {
    margin-left: 17px;
    margin-right: 17px;
  }

  .message {
    max-width: 100%;
  }

  .reply-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .reply-actions input {
    max-width: 100%;
  }

  .reply-actions .button {
    width: 100%;
  }

  .details-panel,
  .conversation-panel,
  .reply-panel,
  .settings-card {
    padding: 18px;
  }

  .mail-settings {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .brand {
    font-size: 14px;
  }

  .ticket-info,
  .admin-ticket-info {
    grid-template-columns: 1fr;
  }

  .auth-card {
    padding: 25px;
  }
}

/* Public support portal */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.public-page [hidden] {
  display: none !important;
}

.public-page {
  --portal-ink: #28243f;
  --portal-muted: #77738f;
  --portal-purple: #7567e9;
  --portal-purple-dark: #5c4fd1;
  --portal-pink: #f487b6;
  --portal-blue: #74b9f5;
  --portal-mint: #71d5bc;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--portal-ink);
  background:
    radial-gradient(circle at 8% 8%, rgb(255 206 230 / 48%) 0, transparent 22rem),
    radial-gradient(circle at 94% 28%, rgb(198 225 255 / 54%) 0, transparent 25rem),
    linear-gradient(180deg, #fbfaff 0%, #f7f9ff 55%, #fffafd 100%);
}

.public-page .page-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.public-page .ambient-orb {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: 50%;
  filter: blur(1px);
}

.public-page .ambient-orb-pink {
  top: 19%;
  left: -70px;
  width: 190px;
  height: 190px;
  background: rgb(255 195 223 / 18%);
}

.public-page .ambient-orb-blue {
  right: -95px;
  bottom: 9%;
  width: 260px;
  height: 260px;
  background: rgb(169 215 255 / 16%);
}

.public-page .ambient-star {
  position: absolute;
  color: rgb(117 103 233 / 18%);
  font-size: 42px;
}

.public-page .ambient-star-one {
  top: 16%;
  right: 5%;
  transform: rotate(13deg);
}

.public-page .ambient-star-two {
  bottom: 22%;
  left: 4%;
  color: rgb(244 135 182 / 22%);
  font-size: 30px;
}

.public-page .site-header,
.public-page .page-content,
.public-page .site-footer {
  position: relative;
  z-index: 1;
}

.public-page .site-header {
  border-bottom: 1px solid rgb(255 255 255 / 13%);
  background:
    radial-gradient(circle at 86% -80%, rgb(244 135 182 / 38%), transparent 17rem),
    linear-gradient(112deg, #292447 0%, #3f376d 48%, #293d70 100%);
  box-shadow: 0 10px 30px rgb(62 52 105 / 14%);
}

.public-page .header-content {
  min-height: 78px;
}

.public-page .brand {
  gap: 12px;
}

.public-page .brand-mark {
  position: relative;
  width: 40px;
  height: 40px;
  border: 2px solid rgb(255 255 255 / 60%);
  border-radius: 14px 14px 17px 17px;
  background: linear-gradient(145deg, #ff9cc7, #8a78f2 72%);
  box-shadow: 0 8px 18px rgb(19 12 54 / 26%), inset 0 1px rgb(255 255 255 / 52%);
  font-size: 11px;
  z-index: 0;
}

.public-page .brand-mark::before,
.public-page .brand-mark::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 12px;
  height: 12px;
  border-top: 2px solid rgb(255 255 255 / 55%);
  background: #c486dd;
  transform: rotate(45deg);
  z-index: -1;
}

.public-page .brand-mark::before {
  left: 3px;
}

.public-page .brand-mark::after {
  right: 3px;
  background: #967de9;
}

.public-page .brand-copy {
  display: grid;
  gap: 1px;
}

.public-page .brand-copy strong {
  font-size: 15px;
  letter-spacing: .01em;
}

.public-page .brand-copy small {
  color: rgb(232 229 255 / 68%);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.public-page .main-nav {
  gap: 8px;
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 14px;
  background: rgb(255 255 255 / 6%);
}

.public-page .main-nav>a {
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  color: rgb(239 237 255 / 76%);
}

.public-page .main-nav>a:hover,
.public-page .main-nav>a.active {
  color: #433866;
  background: linear-gradient(135deg, #fff 0%, #f7eeff 100%);
  box-shadow: 0 5px 15px rgb(20 15 51 / 15%);
}

.public-page .page-content {
  padding-top: 48px;
}

.public-page .hero,
.public-page .query-heading {
  align-items: center;
  min-height: 205px;
  margin: 0 0 28px;
}

.public-page .hero-copy {
  max-width: 700px;
}

.public-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--portal-purple);
  font-size: 11px;
  letter-spacing: .16em;
}

.public-page .eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--portal-pink), var(--portal-purple));
  box-shadow: 0 0 0 4px rgb(117 103 233 / 9%);
}

.public-page .hero h1,
.public-page .query-heading h1 {
  max-width: 680px;
  margin: 12px 0 13px;
  color: #302a4c;
  font-size: clamp(34px, 4.6vw, 53px);
  font-weight: 850;
  line-height: 1.13;
  letter-spacing: -.055em;
}

.public-page .hero h1 em,
.public-page .query-heading h1 em {
  color: var(--portal-purple);
  background: linear-gradient(105deg, #7365e5, #ee78ae 78%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}

.public-page .hero p,
.public-page .query-heading p {
  color: var(--portal-muted);
  font-size: 15px;
  line-height: 1.75;
}

.public-page .hero-mascot {
  position: relative;
  width: 300px;
  height: 168px;
  flex: 0 0 300px;
  border: 1px solid rgb(164 148 235 / 22%);
  border-radius: 38px 18px 38px 18px;
  background:
    radial-gradient(circle at 78% 22%, rgb(255 255 255 / 85%) 0 5px, transparent 6px),
    linear-gradient(145deg, rgb(246 226 255 / 88%), rgb(223 238 255 / 88%));
  box-shadow: 0 18px 45px rgb(91 74 164 / 12%), inset 0 1px rgb(255 255 255 / 88%);
}

.public-page .mascot-face {
  position: absolute;
  left: 25px;
  bottom: 20px;
  display: grid;
  width: 126px;
  height: 126px;
  place-items: center;
  border: 5px solid rgb(255 255 255 / 72%);
  border-radius: 45% 45% 48% 48%;
  color: #5c4d87;
  background: linear-gradient(145deg, #fff7fb, #f4edff);
  box-shadow: 0 12px 25px rgb(83 64 142 / 13%);
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

.public-page .mascot-bubble {
  position: absolute;
  top: 34px;
  right: 22px;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 15px 15px 15px 4px;
  color: #4c406f;
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 8px 20px rgb(75 59 129 / 9%);
}

.public-page .mascot-bubble strong {
  font-size: 13px;
}

.public-page .mascot-bubble span {
  color: #958aaa;
  font-size: 10px;
}

.public-page .mascot-spark {
  position: absolute;
  color: #ef85b5;
}

.public-page .spark-one {
  top: 17px;
  left: 31px;
  font-size: 20px;
}

.public-page .spark-two {
  right: 20px;
  bottom: 18px;
  color: #7667df;
  font-size: 25px;
}

.public-page .panel {
  border-color: rgb(119 103 183 / 13%);
  box-shadow: 0 16px 45px rgb(64 48 118 / 8%);
}

.public-page .form-panel {
  padding: 14px;
  border-radius: 25px;
  background: rgb(255 255 255 / 72%);
  backdrop-filter: blur(14px);
}

.public-page .ticket-form {
  gap: 13px;
}

.public-page .form-section {
  display: grid;
  gap: 19px;
  padding: clamp(21px, 3vw, 29px);
  border: 1px solid transparent;
  border-radius: 18px;
}

.public-page .form-section-basic {
  border-color: #dfe4ff;
  background: linear-gradient(135deg, #f7f7ff, #f3f7ff);
}

.public-page .form-section-detail {
  border-color: #f7ddea;
  background: linear-gradient(135deg, #fff8fb, #fff5f8);
}

.public-page .form-section-contact {
  border-color: #d5eee8;
  background: linear-gradient(135deg, #f5fdfb, #f5fbff);
}

.public-page .form-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.public-page .form-section-heading>span {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #8c7cf2, #6f9eef);
  box-shadow: 0 7px 16px rgb(109 91 209 / 19%);
  font-size: 11px;
  font-weight: 850;
}

.public-page .form-section-detail .form-section-heading>span {
  background: linear-gradient(135deg, #f598bc, #e475a7);
}

.public-page .form-section-contact .form-section-heading>span {
  background: linear-gradient(135deg, #70d6bd, #5db8ca);
}

.public-page .form-section-heading h2,
.public-page .form-section-heading p {
  margin: 0;
}

.public-page .form-section-heading h2 {
  color: #37304f;
  font-size: 16px;
}

.public-page .form-section-heading p {
  margin-top: 3px;
  color: #8b879c;
  font-size: 12px;
}

.public-page label,
.public-page fieldset {
  color: #514b68;
  font-size: 13px;
}

.public-page input,
.public-page select,
.public-page textarea {
  border-color: rgb(125 112 177 / 22%);
  border-radius: 12px;
  color: #37324b;
  background: rgb(255 255 255 / 88%);
  box-shadow: inset 0 1px 2px rgb(45 33 89 / 3%);
}

.public-page input:focus,
.public-page select:focus,
.public-page textarea:focus {
  border-color: #8b79eb;
  box-shadow: 0 0 0 4px rgb(117 103 233 / 12%);
}

.public-page input[type="file"] {
  background: rgb(255 255 255 / 68%);
}

.public-page input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 11px;
  border: 0;
  border-radius: 8px;
  color: #665b8b;
  background: #eeebfb;
  cursor: pointer;
  font-weight: 700;
}

.public-page .field-tip {
  color: #918ca3;
  font-weight: 500;
}

/*.public-page .category-note {*/
/*  padding: 14px 16px;*/
/*  border: 1px dashed #c6c6ef;*/
/*  border-left: 4px solid #8a7aeb;*/
/*  border-radius: 12px;*/
/*  color: #615a79;*/
/*  background: rgb(255 255 255 / 67%);*/
/*}*/


/*分类说明边框循环渐变*/
.public-page .category-note{
    position:relative;
    padding:14px 16px;
    border-radius:12px;
    color:#000000;
    background:rgba(255,255,255,.78);
    overflow:hidden;
}

.public-page .category-note::before{
    content:"";
    position:absolute;
    inset:0;
    padding:2.5px;   /* 边框粗细 */
    border-radius:inherit;
    background: conic-gradient(
        from var(--angle),
        #4facfe,   /* 蓝 */
        #00d2ff,   /* 青蓝 */
        #5b8cff,   /* 天蓝 */
        #ff6ec7,   /* 粉 */
        #ff8fd8,   /* 浅粉 */
        #b26cff,   /* 紫 */
        #7b61ff,   /* 深紫 */
        #4facfe    /* 回到蓝 */
    );
    animation:rotate 5s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
}

@property --angle{
    syntax:"<angle>";
    initial-value:0deg;
    inherits:false;
}

@keyframes rotate{
    to{
        --angle:360deg;
    }
}
/*循环渐变结束*/

.public-page .category-note strong {
  color: #695ad0;
}

.public-page .radio-row {
  gap: 10px;
}

.public-page .radio-row label {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgb(101 181 170 / 20%);
  border-radius: 12px;
  background: rgb(255 255 255 / 72%);
}

.public-page input[type="radio"] {
  accent-color: var(--portal-purple);
}

.public-page .form-actions {
  align-items: center;
  justify-content: space-between;
  padding: 7px 7px 3px 13px;
}

.public-page .form-actions>span {
  color: #9691a7;
  font-size: 12px;
}

.public-page .button {
  gap: 8px;
  min-height: 45px;
  padding: 0 21px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(120deg, #7667e8, #8c6ee6 55%, #eb7eb1 145%);
  box-shadow: 0 9px 20px rgb(102 82 205 / 21%);
  transition: box-shadow .2s, transform .2s, filter .2s;
}

.public-page .button:hover {
  background: linear-gradient(120deg, #6859da, #7d60db 55%, #e572a8 145%);
  box-shadow: 0 12px 24px rgb(102 82 205 / 27%);
  filter: saturate(1.06);
}

.public-page .button-arrow {
  font-size: 17px;
}

.public-page .notice {
  border-radius: 13px;
  box-shadow: 0 9px 24px rgb(72 57 124 / 7%);
}

.public-page .query-guide {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 285px;
  padding: 20px;
  border: 1px solid rgb(135 119 222 / 18%);
  border-radius: 22px 10px 22px 10px;
  color: #504675;
  background: linear-gradient(135deg, rgb(255 255 255 / 84%), rgb(240 234 255 / 78%));
  box-shadow: 0 17px 40px rgb(75 57 143 / 10%);
}

.public-page .query-guide-icon {
  display: grid;
  width: 53px;
  height: 53px;
  flex: 0 0 53px;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #7588ef, #a16be2);
  box-shadow: 0 9px 20px rgb(104 75 183 / 21%);
  font-size: 28px;
}

.public-page .query-guide div {
  display: grid;
  gap: 5px;
}

.public-page .query-guide strong {
  font-size: 15px;
}

.public-page .query-guide small {
  color: #928aa8;
  font-size: 11px;
}

.public-page .query-guide-star {
  position: absolute;
  top: -11px;
  right: 15px;
  color: #ed82b1;
  font-size: 27px;
}

.public-page .lookup-panel {
  display: grid;
  grid-template-columns: minmax(205px, .65fr) minmax(420px, 1.35fr);
  align-items: center;
  gap: 24px;
  padding: clamp(22px, 3vw, 30px);
  border-color: #ddd7fa;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 50%, rgb(233 218 255 / 66%), transparent 20rem),
    linear-gradient(120deg, rgb(253 251 255 / 95%), rgb(241 246 255 / 95%));
}

.public-page .lookup-panel-title {
  display: flex;
  align-items: center;
  gap: 13px;
}

.public-page .lookup-panel-title>span {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  place-items: center;
  border-radius: 14px;
  color: #6e5cd1;
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 7px 18px rgb(79 60 143 / 10%);
  font-size: 18px;
}

.public-page .lookup-panel-title div {
  display: grid;
  gap: 4px;
}

.public-page .lookup-panel-title strong {
  color: #443a67;
  font-size: 14px;
}

.public-page .lookup-panel-title small {
  color: #958eaa;
  font-size: 11px;
}

.public-page .lookup-form {
  align-items: stretch;
  gap: 10px;
}

.public-page .lookup-form label {
  gap: 0;
}

.public-page .lookup-form input {
  height: 47px;
  padding-left: 16px;
  border-color: #d7d0ee;
  background: #fff;
}

.public-page .lookup-form .button {
  min-width: 132px;
}

.public-page .local-tickets {
  grid-column: 2;
  margin-top: -10px;
}

.public-page .local-tickets>span {
  color: #8c86a0;
}

.public-page .local-tickets button {
  padding: 5px 9px;
  border-color: #d9d1f4;
  border-radius: 8px;
  color: #695bc1;
  background: rgb(255 255 255 / 72%);
}

.public-page .local-tickets button:hover {
  border-color: #ad9fea;
  background: #fff;
}

.public-page .ticket-results {
  gap: 22px;
  margin-top: 42px;
}

.public-page .results-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 0 3px;
}

.public-page .results-heading h2 {
  margin: 7px 0 0;
  color: #393151;
  font-size: 24px;
}

.public-page .results-heading h2 span {
  display: inline-flex;
  margin-left: 6px;
  padding: 4px 9px;
  border-radius: 20px;
  color: #7667d8;
  background: #eeebff;
  font-size: 12px;
  vertical-align: 3px;
}

.public-page .results-heading>p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 3px;
  color: #9690a7;
  font-size: 12px;
}

.public-page .results-heading>p span {
  width: 27px;
  height: 7px;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--portal-purple) 0 33%, var(--portal-pink) 33% 66%, var(--portal-mint) 66%);
}

.public-page .ticket-card {
  --ticket-accent: #7667e5;
  --ticket-soft: #f2efff;
  position: relative;
  border-top: 4px solid var(--ticket-accent);
  border-radius: 21px;
  box-shadow: 0 18px 48px rgb(55 41 105 / 9%);
}

.public-page .ticket-category-payment {
  --ticket-accent: #ed82b2;
  --ticket-soft: #fff0f7;
}

.public-page .ticket-category-subscription {
  --ticket-accent: #836ee8;
  --ticket-soft: #f2efff;
}

.public-page .ticket-category-node {
  --ticket-accent: #62bada;
  --ticket-soft: #edfaff;
}

.public-page .ticket-category-other {
  --ticket-accent: #e9a85f;
  --ticket-soft: #fff7e9;
}

.public-page .ticket-card-header {
  align-items: center;
  padding: 21px 25px;
  border-bottom-color: rgb(112 94 167 / 10%);
  background: linear-gradient(110deg, var(--ticket-soft), #fff 72%);
}

.public-page .ticket-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 9px;
}

.public-page .ticket-kicker {
  grid-column: 1 / -1;
  color: #aaa3b7;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .16em;
}

.public-page .ticket-number {
  color: #443968;
  font-size: 16px;
}

.public-page .ticket-card-header time {
  align-self: center;
  padding-left: 9px;
  border-left: 1px solid #ddd8e7;
}

.public-page .status {
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid transparent;
}

.public-page .status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 48%);
}

.public-page .status-pending {
  border-color: #f8d2aa;
  color: #b46318;
  background: #fff3e4;
}

.public-page .status-awaiting_user {
  border-color: #cbd5fb;
  color: #5b67bd;
  background: #eef1ff;
}

.public-page .status-completed {
  border-color: #bfe9dc;
  color: #32856f;
  background: #eaf9f4;
}

.public-page .ticket-info {
  gap: 12px;
  padding: 17px 24px;
  border-bottom: 0;
  background: #fff;
}

.public-page .ticket-info>div {
  position: relative;
  padding: 13px 15px 13px 42px;
  border: 1px solid transparent;
  border-radius: 13px;
}

.public-page .ticket-info>div::before {
  position: absolute;
  top: 50%;
  left: 14px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 7px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 850;
}

.public-page .ticket-info .info-category {
  border-color: #e4dcfa;
  background: #f6f3ff;
}

.public-page .ticket-info .info-category::before {
  content: "✦";
  color: #7160cf;
  background: #e7e0ff;
}

.public-page .ticket-info .info-system {
  border-color: #d8eafa;
  background: #f1f8ff;
}

.public-page .ticket-info .info-system::before {
  content: "▣";
  color: #4e93c5;
  background: #dcefff;
}

.public-page .ticket-info .info-remote {
  border-color: #d3eee6;
  background: #f0fbf7;
}

.public-page .ticket-info .info-remote::before {
  content: "↗";
  color: #3d9b82;
  background: #d9f4ec;
}

.public-page .ticket-info dt {
  margin-bottom: 3px;
  color: #9891a5;
  font-size: 10px;
}

.public-page .ticket-info dd {
  color: #4b435f;
  font-size: 13px;
}

.public-page .ticket-card>h3.conversation-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 15px;
  color: #4a4260;
}

.public-page .conversation-title span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  color: #e16f9f;
  background: #ffedf5;
  font-size: 11px;
}

.public-page .conversation {
  gap: 14px;
  padding-bottom: 7px;
}

.public-page .message {
  position: relative;
  padding: 15px 17px;
  border-radius: 16px;
  box-shadow: 0 7px 18px rgb(62 47 107 / 6%);
}

.public-page .message-user {
  border-color: #f2d8e5;
  border-bottom-left-radius: 5px;
  background: linear-gradient(135deg, #fff7fb, #fff1f7);
}

.public-page .message-admin {
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, #7769df, #5d83d7);
  box-shadow: 0 9px 22px rgb(89 76 183 / 18%);
}

.public-page .message-meta strong {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 7px;
  color: #b04e7d;
  background: #ffe2ef;
  font-size: 11px;
}

.public-page .message-admin .message-meta strong {
  color: #fff;
  background: rgb(255 255 255 / 16%);
}

.public-page .message-content {
  color: #51485e;
}

.public-page .message-admin .message-content {
  color: #fff;
}

.public-page .reply-area {
  margin-top: 25px;
  margin-bottom: 24px;
  padding: 12px;
  border: 1px solid #d4ede7;
  border-radius: 17px;
  background: linear-gradient(135deg, #f3fcf9, #f3f9ff);
}

.public-page .reply-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
}

.public-page .reply-heading>span {
  display: grid;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  place-items: center;
  border-radius: 11px;
  color: #278a75;
  background: #dff5ef;
  font-weight: 850;
}

.public-page .reply-heading h3,
.public-page .reply-heading p {
  margin: 0;
}

.public-page .reply-heading h3 {
  color: #3c5d5b;
  font-size: 15px;
}

.public-page .reply-heading p {
  margin-top: 3px;
  color: #86a09e;
  font-size: 11px;
}

.public-page .reply-area textarea {
  border-color: #cce5df;
}

.public-page .reply-area .button {
  background: linear-gradient(120deg, #57bda6, #5a9dce);
  box-shadow: 0 9px 20px rgb(70 155 143 / 19%);
}

.public-page .button-quiet {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #d9d5e4;
  color: #7f788e;
  background: rgb(255 255 255 / 76%);
  box-shadow: none;
  font-size: 12px;
}

.public-page .button-quiet:hover {
  border-color: #e3b8ca;
  color: #bd5d84;
  background: #fff6fa;
  box-shadow: none;
}

.public-page .closed-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 15px 17px;
  border: 1px solid #cfece2;
  border-radius: 13px;
  color: #63827a;
  background: #f0faf7;
}

.public-page .closed-note>span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #65bea8;
  font-weight: 850;
}

.public-page .closed-note strong {
  color: #3f7568;
}

.public-page .ticket-results>.empty-state {
  display: grid;
  min-height: 230px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 35px;
  border-style: dashed;
  color: #8b849b;
  background: rgb(255 255 255 / 68%);
}

.public-page .ticket-results>.empty-state>span {
  color: #8070c9;
  font-size: 23px;
}

.public-page .ticket-results>.empty-state strong {
  color: #4a4167;
  font-size: 16px;
}

.public-page .ticket-results>.empty-state p {
  margin: 0;
  font-size: 13px;
}

.public-page .site-footer {
  border-top-color: rgb(109 93 160 / 10%);
  color: #9993a8;
  background: rgb(255 255 255 / 46%);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .public-page .hero-mascot,
  .public-page .query-guide {
    animation: portal-float 5s ease-in-out infinite;
  }

  .public-page .mascot-spark,
  .public-page .query-guide-star {
    animation: portal-twinkle 2.8s ease-in-out infinite;
  }
}

@keyframes portal-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes portal-twinkle {
  0%, 100% { opacity: .45; transform: rotate(0) scale(.9); }
  50% { opacity: 1; transform: rotate(12deg) scale(1.08); }
}

@media (max-width: 860px) {
  .public-page .hero,
  .public-page .query-heading {
    align-items: flex-start;
  }

  .public-page .hero-mascot,
  .public-page .query-guide {
    min-width: 250px;
    flex-basis: 250px;
  }

  .public-page .hero-mascot {
    width: 250px;
  }

  .public-page .mascot-face {
    width: 105px;
    height: 105px;
    font-size: 14px;
  }

  .public-page .mascot-bubble {
    right: 13px;
  }

  .public-page .lookup-panel {
    grid-template-columns: 1fr;
  }

  .public-page .local-tickets {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  .public-page .header-content {
    min-height: auto;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 15px 0;
  }

  .public-page .brand {
    align-self: flex-start;
  }

  .public-page .main-nav {
    width: 100%;
  }

  .public-page .main-nav>a {
    flex: 1;
    justify-content: center;
  }

  .public-page .page-content {
    padding-top: 34px;
  }

  .public-page .hero,
  .public-page .query-heading {
    min-height: auto;
    flex-direction: column;
    gap: 23px;
  }

  .public-page .hero h1,
  .public-page .query-heading h1 {
    font-size: clamp(32px, 9vw, 43px);
  }

  .public-page .hero-mascot,
  .public-page .query-guide {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
  }

  .public-page .hero-mascot {
    height: 150px;
  }

  .public-page .form-panel {
    padding: 8px;
    border-radius: 20px;
  }

  .public-page .form-section {
    padding: 19px;
  }

  .public-page .form-grid {
    grid-template-columns: 1fr;
  }

  .public-page .form-actions,
  .public-page .results-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .public-page .form-actions {
    gap: 11px;
    padding: 7px 3px 3px;
  }

  .public-page .form-actions .button {
    width: 100%;
  }

  .public-page .lookup-panel {
    gap: 18px;
  }

  .public-page .lookup-form {
    flex-direction: column;
  }

  .public-page .lookup-form .button {
    width: 100%;
  }

  .public-page .results-heading>p {
    display: none;
  }

  .public-page .ticket-card-header {
    padding: 18px;
  }

  .public-page .ticket-identity {
    grid-template-columns: 1fr;
  }

  .public-page .ticket-card-header time {
    padding-left: 0;
    border-left: 0;
  }

  .public-page .ticket-info {
    grid-template-columns: 1fr;
    padding: 15px 17px;
  }

  .public-page .ticket-card>h3,
  .public-page .ticket-card>.conversation,
  .public-page .reply-area,
  .public-page .closed-note {
    margin-left: 17px;
    margin-right: 17px;
  }

  .public-page .message {
    max-width: 95%;
  }

  .public-page .reply-actions {
    flex-direction: column;
  }

  .public-page .reply-actions input,
  .public-page .reply-actions .button {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .public-page .brand-mark {
    width: 36px;
    height: 36px;
  }

  .public-page .brand-copy strong {
    font-size: 14px;
  }

  .public-page .main-nav>a {
    padding: 0 7px;
    font-size: 12px;
  }

  .public-page .hero-mascot {
    height: 136px;
  }

  .public-page .mascot-face {
    bottom: 15px;
    width: 90px;
    height: 90px;
    font-size: 12px;
  }

  .public-page .mascot-bubble {
    top: 28px;
  }

  .public-page .form-section {
    padding: 16px;
  }

  .public-page .radio-row label {
    width: 100%;
  }

  .public-page .lookup-panel {
    padding: 18px;
  }

  .public-page .ticket-card-header {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }

  .public-page .status {
    align-self: flex-start;
  }

  .public-page .closed-note {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

.public-page .ticket-card > summary {
  display: flex;
  list-style: none;
  cursor: pointer;
}

.public-page .ticket-card > summary::-webkit-details-marker {
  display: none;
}

.public-page .ticket-summary-meta {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 12px !important;
}

.public-page .collapse-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #978fa7;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.public-page .collapse-hint b {
  display: inline-block;
  color: var(--ticket-accent);
  font-size: 16px;
  line-height: 1;
  transition: transform .2s;
}

.public-page .hint-collapse,
.public-page .ticket-card[open] .hint-expand {
  display: none;
}

.public-page .ticket-card[open] .hint-collapse {
  display: inline;
}

.public-page .ticket-card[open] .collapse-hint b {
  transform: rotate(180deg);
}

.public-page .ticket-card-content {
  padding-bottom: 1px;
}

.public-page .ticket-card-content > h3,
.public-page .ticket-card-content > .conversation,
.public-page .ticket-card-content > .reply-area,
.public-page .ticket-card-content > .closed-note {
  margin-left: 24px;
  margin-right: 24px;
}

@media (max-width: 720px) {
  .public-page .ticket-summary-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px !important;
  }

  .public-page .ticket-card-content > h3,
  .public-page .ticket-card-content > .conversation,
  .public-page .ticket-card-content > .reply-area,
  .public-page .ticket-card-content > .closed-note {
    margin-left: 15px;
    margin-right: 15px;
  }
}