.hl-support,
.hl-public-form,
.hl-public-ticket{
  --hl-bg: #f4f7fc;
  --hl-bg-2: #eef3fb;
  --hl-surface: rgba(255,255,255,0.96);
  --hl-surface-strong: #ffffff;
  --hl-surface-soft: #f9fbff;
  --hl-border: rgba(151, 171, 204, 0.26);
  --hl-border-strong: rgba(98, 124, 173, 0.32);
  --hl-text: #172033;
  --hl-text-soft: #63708a;
  --hl-primary: #2f6df5;
  --hl-primary-2: #6f8bff;
  --hl-accent: #6d28d9;
  --hl-success: #16a34a;
  --hl-warning: #f59e0b;
  --hl-danger: #dc2626;
  --hl-info: #0ea5e9;
  --hl-radius: 20px;
  --hl-radius-sm: 14px;
  --hl-shadow: 0 24px 60px rgba(27, 44, 94, 0.10);
  --hl-shadow-soft: 0 12px 30px rgba(27, 44, 94, 0.08);
  --hl-glow: 0 0 0 1px rgba(255,255,255,0.65) inset;
}

.hl-support,
.hl-public-form,
.hl-public-ticket{
  color: var(--hl-text);
  font-size: 14px;
}


.hl-support *,
.hl-support *::before,
.hl-support *::after,
.hl-public-form *,
.hl-public-form *::before,
.hl-public-form *::after,
.hl-public-ticket *,
.hl-public-ticket *::before,
.hl-public-ticket *::after{
  box-sizing: border-box;
}


.hl-support.wrap{
  position: relative;
  margin-top: 24px;
  padding: 0 12px 18px 0;
}

.hl-support.wrap::before{
  content: "";
  position: absolute;
  inset: -18px -8px 0 0;
  background:
    radial-gradient(circle at top left, rgba(111,139,255,0.10), transparent 36%),
    radial-gradient(circle at 85% 20%, rgba(109,40,217,0.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(244,247,252,0));
  pointer-events: none;
  border-radius: 28px;
}

.hl-support.wrap > *{
  position: relative;
}

.hl-support.wrap > h1,
.hl-public-ticket h2,
.hl-public-ticket h3,
.hl-public-form h2,
.hl-card > h2:first-child,
.hl-side > h2:first-child,
.hl-main > h2:first-child{
  color: var(--hl-text);
  letter-spacing: -0.03em;
}

.hl-support.wrap > h1{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 32px;
  font-weight: 800;
}

.hl-support.wrap > h1::before{
  content: "";
  width: 12px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--hl-primary), var(--hl-accent));
  box-shadow: 0 8px 18px rgba(47, 109, 245, 0.24);
}

.hl-support .page-title-action,
.hl-support .button,
.hl-public-form button,
.hl-public-ticket button{
  min-height: 44px;
  border-radius: 14px;
  padding: 0 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  font-weight: 600;
}

.hl-support .button,
.hl-public-form button,
.hl-public-ticket button{
  border: 1px solid var(--hl-border-strong);
  background: linear-gradient(180deg, #ffffff, #f7faff);
  color: var(--hl-text);
  box-shadow: var(--hl-shadow-soft);
}

.hl-support .button:hover,
.hl-public-form button:hover,
.hl-public-ticket button:hover,
.hl-support .page-title-action:hover{
  transform: translateY(-1px);
}

.hl-support .button.button-primary,
.hl-support .page-title-action,
.hl-public-form button,
.hl-public-ticket button{
  background: linear-gradient(135deg, var(--hl-primary), var(--hl-accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 28px rgba(66, 76, 201, 0.22);
}

.hl-support .page-title-action{
  padding: 11px 16px;
  line-height: 1.2;
  margin-left: 0;
}

.hl-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 26px;
  align-items: start;
}

.hl-card,
.hl-public-form,
.hl-public-ticket,
.hl-support .hl-main,
.hl-support .hl-side,
.hl-support .hl-main > form,
.hl-support .hl-main > table.widefat{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius);
  box-shadow: var(--hl-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.hl-card::before,
.hl-public-form::before,
.hl-public-ticket::before,
.hl-support .hl-main::before,
.hl-support .hl-side::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0));
  pointer-events: none;
}

.hl-card,
.hl-public-form,
.hl-public-ticket,
.hl-support .hl-main,
.hl-support .hl-side{
  box-shadow: var(--hl-shadow), var(--hl-glow);
}

.hl-support .hl-main,
.hl-support .hl-side,
.hl-public-form,
.hl-public-ticket,
.hl-card{
  padding: 26px;
}

.hl-support .hl-main > h2:first-child,
.hl-support .hl-side > h2:first-child,
.hl-card > h2:first-child,
.hl-public-ticket > h2:first-child{
  margin-top: 0;
}

.hl-support .hl-side{
  position: sticky;
  top: 24px;
}

.hl-support .widefat{
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}

.hl-support .widefat thead th{
  padding: 15px 16px;
  border-bottom: 1px solid var(--hl-border);
  color: var(--hl-text);
  font-weight: 700;
  background: linear-gradient(180deg, rgba(247,250,255,0.9), rgba(241,246,254,0.9));
}

.hl-support .widefat td,
.hl-support .widefat th{
  padding: 15px 16px;
  vertical-align: top;
}

.hl-support .widefat tbody tr{
  transition: background .16s ease, transform .16s ease;
}

.hl-support .widefat tbody tr:hover{
  background: rgba(245,249,255,0.95);
}

.hl-support .widefat.striped > tbody > :nth-child(odd){
  background-color: rgba(252,253,255,0.92);
}

.hl-filter{
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 22px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(241,246,255,0.98));
  border: 1px solid var(--hl-border);
  box-shadow: var(--hl-shadow-soft), var(--hl-glow);
}

.hl-side select,
.hl-side input,
.hl-side textarea,
.hl-public-form input,
.hl-public-form select,
.hl-public-form textarea,
.hl-support input[type="text"],
.hl-support input[type="search"],
.hl-support input[type="email"],
.hl-support input[type="password"],
.hl-support input[type="number"],
.hl-support select,
.hl-support textarea{
  display: block;
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  border: 1px solid var(--hl-border-strong);
  border-radius: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  color: var(--hl-text);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.hl-support input:focus,
.hl-support select:focus,
.hl-support textarea:focus,
.hl-public-form input:focus,
.hl-public-form select:focus,
.hl-public-form textarea:focus{
  outline: none;
  border-color: rgba(80, 108, 255, 0.64);
  box-shadow: 0 0 0 4px rgba(80, 108, 255, 0.12), 0 6px 18px rgba(80, 108, 255, 0.12);
}

.hl-support p label,
.hl-public-form p label{
  display: block;
  color: var(--hl-text);
  font-weight: 600;
}

.hl-support p small,
.hl-public-form small,
.hl-message-head span,
.hl-public-ticket p,
.hl-support .description,
.hl-support small,
.hl-support .hl-note{
  color: var(--hl-text-soft);
}

.hl-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.hl-open{background:#fff6e7;color:#9a6500;border-color:#f4d8a2}
.hl-answered{background:#ebfaf1;color:#0f7a3d;border-color:#a9e3be}
.hl-pending{background:#e8f8fe;color:#106b80;border-color:#a6dded}
.hl-closed{background:#eef3f9;color:#5d6c83;border-color:#d2dbe8}

.hl-timeline{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 18px 0 28px;
}

.hl-message{
  position: relative;
  border: 1px solid var(--hl-border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
  padding: 18px 18px 18px 22px;
  box-shadow: var(--hl-shadow-soft), var(--hl-glow);
}

.hl-message::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 18px 0 0 18px;
  background: #94a3b8;
}

.hl-message.customer::before{background: linear-gradient(180deg, var(--hl-primary), var(--hl-primary-2))}
.hl-message.staff::before{background: linear-gradient(180deg, #16a34a, #22c55e)}
.hl-message.internal{background: linear-gradient(180deg, #fff8f8, #fff4f4);border-color:#efc9c9}
.hl-message.internal::before{background: linear-gradient(180deg, #ef4444, #dc2626)}

.hl-message-head{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--hl-text);
  font-weight: 700;
}

.hl-message-body p:last-child{
  margin-bottom: 0;
}

.hl-alert{
  padding: 16px 18px;
  border-radius: 16px;
  margin: 0 0 18px;
  border: 1px solid;
  box-shadow: var(--hl-shadow-soft);
}

.hl-alert.success{background:#edfaef;border-color:#a4dfb6;color:#11572e}
.hl-alert.error{background:#fff1f1;border-color:#f0bcbc;color:#8c1d1d}

.hl-public-ticket{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.98));
}

.hl-public-ticket .hl-message.staff{
  background: linear-gradient(180deg, rgba(248,251,255,0.98), rgba(243,247,255,0.98));
}

.hl-public-form textarea,
.hl-public-ticket textarea,
.hl-support textarea{
  min-height: 120px;
}

.hl-support hr{
  border: 0;
  border-top: 1px solid var(--hl-border);
  margin: 24px 0;
}

.hl-support .notice,
.hl-support div.updated,
.hl-support div.error{
  border-radius: 16px;
  border: 1px solid var(--hl-border);
  box-shadow: var(--hl-shadow-soft);
  overflow: hidden;
}

.hl-support table.form-table th{
  padding-top: 18px;
  color: var(--hl-text);
}

.hl-support table.form-table td{
  padding-top: 14px;
}

.hl-support .form-table,
.hl-support .form-table tbody,
.hl-support .form-table tr,
.hl-support .form-table td,
.hl-support .form-table th{
  border-color: var(--hl-border);
}

.hl-support a{
  text-decoration: none;
}

.hl-support a:hover{
  text-decoration: underline;
}

.hl-support code{
  background: #f2f5fb;
  padding: 3px 8px;
  border-radius: 8px;
}

@media (max-width: 1100px){
  .hl-grid{grid-template-columns: 1fr}
  .hl-support .hl-side{position: static}
}

@media (max-width: 782px){
  .hl-support.wrap{padding-right: 0}
  .hl-support.wrap > h1{font-size: 27px}
  .hl-filter{flex-direction: column;align-items: stretch}
  .hl-support .widefat td,
  .hl-support .widefat th{padding: 12px}
  .hl-public-form,
  .hl-public-ticket,
  .hl-support .hl-main,
  .hl-support .hl-side,
  .hl-card{padding: 18px}
}


.hl-public-form p,
.hl-public-ticket p{
  width: 100%;
}

.hl-public-form p label,
.hl-public-ticket p label{
  display: block;
  width: 100%;
}

.hl-public-form input,
.hl-public-form select,
.hl-public-form textarea{
  width: 100% !important;
  max-width: 100% !important;
}