.hx {
  --hx-blue: #1565d8;
  --hx-blue-2: #0f54b8;
  --hx-blue-bg: #eaf2ff;
  --hx-ink: #16223a;
  --hx-ink-2: #5a6780;
  --hx-ink-3: #8a95a8;
  --hx-line: #e5eaf2;
  --hx-card: #ffffff;
  --hx-shadow: 0 1px 2px rgba(15, 27, 51, .04), 0 4px 14px rgba(15, 27, 51, .05);
  --hx-green: #1f9d5c;  --hx-green-bg: #e6f6ee;
  --hx-purple: #7a4fe0; --hx-purple-bg: #f1ecff;
  --hx-orange: #ea6a1f; --hx-orange-bg: #fff1e7;
  --hx-red: #d33a4a;    --hx-red-bg: #fdeaec;
  max-width: 1320px; padding-top: 22px; padding-bottom: 24px;
  color: var(--hx-ink);
}
.hx.hx-wide { max-width: 1320px; padding-top: 20px; }
.hx svg { width: 16px; height: 16px; flex: none; }
.hx h1, .hx h2, .hx h3 { letter-spacing: -.01em; }

/* soft blue page background, only while the home screen is open */
/* main:has(> .hx) { background: #f5f8fc; } */

/* ------------------------------------------------ buttons */
.hx-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 16px;
  border: 0; border-radius: 9px; background: var(--cyan-strong, #07677a); color: #fff; font-weight: 500; font-size: 14px;
  cursor: pointer; box-shadow: 0 1px 2px rgba(7, 103, 122, .3); transition: background .15s, transform .15s; white-space: nowrap;
}
.hx-btn:hover { background: color-mix(in srgb, var(--cyan-strong, #07677a) 85%, #000); }
.hx-btn:active { transform: translateY(1px); }
.hx-btn:focus-visible { outline: 3px solid rgba(7, 103, 122, .35); outline-offset: 2px; }
.hx-btn svg { width: 17px; height: 17px; }
.hx-btn .chev { width: 14px; height: 14px; margin-left: 2px; }
.hx-btn.lg { height: 44px; padding: 0 16px 0 18px; font-size: 14.5px; }

/* ------------------------------------------------ hello */
.hx-hello { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.hx-hello-l { flex: 1 1 520px; min-width: 0; }
.hx-hello > .hx-btn { flex: none; }
.hx-hi { display: flex; align-items: center; gap: 12px; }
.hx-wave { font-size: 30px; line-height: 1; display: inline-block; transform-origin: 70% 80%; animation: hx-wave 2.4s ease-in-out 1; }
@keyframes hx-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-8deg); } }
.hx-hello h1 { font-size: 30px; font-weight: 600; line-height: 1.15; margin: 0; }
.hx-hello h1 em { font-style: normal; color: var(--cyan-strong, #07677a); }
.hx-sub { color: var(--hx-ink-2); margin: 4px 0 0 42px; font-size: 15px; }

/* totals row (empty state) */
.hx-totals { display: flex; flex-wrap: wrap; margin-top: 12px; color: var(--hx-ink-2); font-size: 13.5px; }
.hx-totals span { display: inline-flex; align-items: center; gap: 7px; padding: 2px 22px 2px 0; margin-right: 22px; border-right: 1px solid var(--hx-line); }
.hx-totals span:last-child { border-right: 0; margin-right: 0; }
.hx-totals svg { width: 18px; height: 18px; color: #6b7a99; }
.hx-totals b { color: var(--hx-ink); font-weight: 600; margin-left: 2px; }

.hx-banner { margin-top: 14px; }

/* ------------------------------------------------ section headings */
.hx-section { margin-top: 24px; }
.hx-section h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; margin: 0; }
.hx-section h2 svg { width: 18px; height: 18px; color: var(--hx-ink-2); }
.hx-hint { color: var(--hx-ink-2); font-size: 13px; margin: 3px 0 0; }
.hx-count { color: var(--hx-ink-3); font-weight: 400; }

/* ================================================ EMPTY STATE */
.hx-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin-top: 14px; }
.hx-step {
  --c: #8e97a4; position: relative; background: var(--hx-card); border-radius: 10px; padding: 16px 16px 16px;
  box-shadow: var(--hx-shadow); border-top: 4px solid var(--c);
}
.hx-step-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 10px;
  background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.hx-step-ic svg { width: 20px; height: 20px; }
.hx-step.hx-c-upload .hx-step-ic, .hx-step.hx-c-customer .hx-step-ic { color: var(--hx-blue); background: var(--hx-blue-bg); }
.hx-step.hx-c-print .hx-step-ic { background: #e9ecf1; color: var(--hx-ink); }
.hx-step b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.hx-step p { margin: 0; color: var(--hx-ink-2); font-size: 12.5px; line-height: 1.55; }
.hx-step-arrow { position: absolute; right: -19px; top: 50%; transform: translateY(-50%); color: #9aa4b5; }
.hx-step-arrow svg { width: 16px; height: 16px; }

.hx-start {
  display: grid; grid-template-columns: minmax(180px, 360px) 1fr; align-items: center; margin-top: 22px;
  border: 1.5px dashed #d3dceb; border-radius: 14px; background: rgba(255, 255, 255, .55); padding: 20px 28px;
}
.hx-start-art { display: grid; place-items: center; padding-right: 28px; border-right: 1px solid var(--hx-line); }
.hx svg.hx-art { width: 170px; height: auto; max-width: 100%; }
.hx-start-body { padding-left: 40px; }
.hx-start-body h3 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.hx-start-body p { color: var(--hx-ink-2); margin: 0 0 14px; font-size: 13.5px; }
.hx-chips { display: flex; flex-wrap: wrap; row-gap: 8px; margin-top: 16px; color: var(--hx-ink-2); font-size: 13px; }
.hx-chips span { display: inline-flex; align-items: center; gap: 8px; padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--hx-line); }
.hx-chips span:last-child { border-right: 0; }
.hx-chips svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--hx-blue-bg); color: #3a4a66; }

/* ================================================ FILLED STATE */
.hx-main { margin-top: 18px; }

/* stat cards — icon on the left, compact */
.hx-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hx-stat {
  --a: var(--hx-blue); --b: var(--hx-blue-bg);
  position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 14px 14px; border-radius: 12px; color: var(--hx-ink);
  background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--b) 70%, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--a) 14%, #fff); box-shadow: var(--hx-shadow);
}
.hx-stat-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--b); color: var(--a); }
.hx-stat-ic svg { width: 19px; height: 19px; }
.hx-stat-lbl { grid-column: 2; font-weight: 500; font-size: 14px; color: var(--hx-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-stat-n { grid-column: 2; font-size: 26px; font-weight: 600; line-height: 1.15; }
.hx-green { --a: var(--hx-green); --b: var(--hx-green-bg); }
.hx-purple { --a: var(--hx-purple); --b: var(--hx-purple-bg); }
.hx-orange { --a: var(--hx-orange); --b: var(--hx-orange-bg); }
.hx-red { --a: var(--hx-red); --b: var(--hx-red-bg); }

/* artwork cards */
.hx-art-card { background: var(--hx-card); border-radius: 12px; padding: 8px; box-shadow: var(--hx-shadow); border: 1px solid var(--hx-line); border-top: 3px solid var(--c); min-width: 0; }
.hx-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #eef2f8; }
.hx-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-thumb-ph { position: absolute; inset: 0; padding-top: 18px; display: grid; place-content: center; justify-items: center; gap: 2px; color: var(--hx-ink-3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, #fff), #f4f6fa); }
.hx-thumb-ph svg { width: 22px; height: 22px; }
.hx-thumb-ph small { font-size: 10px; font-weight: 500; letter-spacing: .06em; }
.hx-badge {
  position: absolute; top: 6px; left: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .94); font-size: 12.5px; font-weight: 500;
  color: var(--hx-blue); box-shadow: 0 1px 4px rgba(15, 27, 51, .1); max-width: calc(100% - 12px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-badge svg { width: 12px; height: 12px; }
.hx-b-ai_check { color: #c02a66; }
.hx-b-team_review { color: var(--hx-blue); }
.hx-b-customer { color: var(--hx-green); }
.hx-b-print { color: var(--hx-purple); }
.hx-b-fail { color: var(--hx-red); }
.hx-art-foot { padding: 8px 2px 0; }
.hx-art-name { display: block; color: var(--hx-ink); font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-art-name:hover { color: var(--hx-blue); text-decoration: none; }
.hx-art-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; font-size: 13px; color: var(--hx-ink-3); white-space: nowrap; overflow: hidden; }
.hx-code { flex: none; padding: 0 6px; border-radius: 4px; background: #eef1f6; color: var(--hx-ink-2); font-weight: 500; }
.hx-who { overflow: hidden; text-overflow: ellipsis; }
.hx-ver { flex: none; color: var(--hx-ink-2); }
.hx-art-todo { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 13px; color: var(--hx-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-art-todo i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.hx-art-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; color: var(--hx-ink-3); font-size: 13px; }
.hx-art-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hx-art-meta svg { width: 14px; height: 14px; }

.hx-art-card[data-href], .hx-row[data-href] { cursor: pointer; }
.hx-art-card[data-href] { transition: box-shadow .15s, transform .15s; }
.hx-art-card[data-href]:hover { box-shadow: 0 8px 20px rgba(15, 27, 51, .08); transform: translateY(-1px); }

/* ------------------------------------------------ groups: heading + hint + items (also used by the reviewer home) */
.hx-board { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hx-line); }
.hx-groups { display: flex; flex-direction: column; gap: 26px; }
.hx-full { grid-column: 1 / -1; }
.hx-full > .hx-ai { margin-top: 0; }
.hx-group { min-width: 0; }
.hx-group-h { margin-bottom: 10px; min-width: 0; }
.hx-group-h h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; }
.hx-group-h h2 > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.hx-group-h h2 svg { width: 16px; height: 16px; color: var(--hx-ink-2); flex: none; }
.hx-group-h .hx-hint { font-size: 13px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-g-act_now .hx-group-h h2 svg { color: var(--hx-magenta, #c02a66); }
.hx-art-col { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.hx-none { color: var(--hx-ink-2); font-size: 13.5px; }

/* ================================================ ONE BOX: tabs + view toggle + list/cards + footer */
.hx-board.hx-board-box { border-top: 0; padding-top: 0; margin-top: 18px; }
.hx-box { background: var(--hx-card); border: 1px solid var(--hx-line); border-radius: 14px; box-shadow: var(--hx-shadow); overflow: hidden; }
.hx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px 10px 10px; border-bottom: 1px solid var(--hx-line); }
.hx-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.hx-tab {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; border: 0; border-radius: 10px;
  background: transparent; color: var(--hx-ink-2); font: inherit; font-size: 15px; cursor: pointer; transition: color .15s, background .15s;
}
.hx-tab:hover { background: #f1f4f9; color: var(--hx-ink); }
.hx-tab:focus-visible { outline: 3px solid rgba(7, 103, 122, .35); outline-offset: 1px; }
.hx-tab.on { background: var(--cyan-strong, #07677a); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(7, 103, 122, .3); }
.hx-tab-n { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: #eaeef4; color: var(--hx-ink-2); font-size: 13px; font-weight: 500; text-align: center; }
.hx-tab.on .hx-tab-n { background: rgba(255, 255, 255, .22); color: #fff; }

.hx-view { display: inline-flex; padding: 3px; border-radius: 10px; background: #f1f4f9; }
.hx-view button { height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--hx-ink-2); font: inherit; font-size: 14.5px; cursor: pointer; transition: background .15s, color .15s; }
.hx-view button:hover { color: var(--hx-ink); }
.hx-view button:focus-visible { outline: 3px solid rgba(7, 103, 122, .35); outline-offset: 1px; }
.hx-view button.on { background: var(--hx-card); color: var(--cyan-strong, #07677a); font-weight: 500; box-shadow: 0 1px 2px rgba(15, 27, 51, .1); }

.hx-panel .hx-art-col { padding: 16px; background: #f8fafd; }
.hx-panel .hx-none { padding: 40px 20px; text-align: center; font-size: 15px; }
.hx-box-f { padding: 13px 20px; border-top: 1px solid var(--hx-line); background: #fbfcfe; color: var(--hx-ink-3); font-size: 13.5px; }

/* list view */
.hx-rows { background: var(--hx-card); }
.hx-rows-h, .hx-row {
  display: grid; grid-template-columns: 88px minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.9fr) minmax(0, 1.3fr);
  gap: 16px; align-items: center; padding: 0 20px;
}
.hx-rows-h { padding-top: 9px; padding-bottom: 9px; background: #f5f8fc; color: var(--hx-ink-3); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.hx-row { padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--hx-line); transition: background .15s; }
.hx-row:hover { background: #f7faff; }
.hx-row .hx-thumb { aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--hx-line); border-radius: 8px; }
.hx-row .hx-thumb img { object-fit: contain; }
.hx-row .hx-thumb-ph { padding-top: 0; }
.hx-row .hx-thumb-ph svg { width: 18px; height: 18px; }
.hx-row .hx-thumb-ph small { display: none; }
.hx-cell { min-width: 0; font-size: 15px; color: var(--hx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-r-brand, .hx-r-client, .hx-r-date { color: var(--hx-ink-2); }
.hx-dim { color: var(--hx-ink-3); }
.hx-pill { display: inline-block; max-width: 100%; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.hx-r-status .hx-art-todo { margin-top: 4px; }

/* AI processing banner */
.hx-ai {
  display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 16px;
  border-radius: 12px; border: 1px solid #d9e6fb; background: linear-gradient(90deg, #eef5ff, #f5f9ff);
}
.hx-ai-ic { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #dbe8fd; color: var(--hx-blue); flex: none; }
.hx-ai-ic > svg { width: 24px; height: 24px; }
.hx-ai-ic i { position: absolute; top: 1px; right: 2px; color: var(--hx-blue); }
.hx-ai-ic i svg { width: 12px; height: 12px; fill: currentColor; }
.hx-ai .grow { flex: 1; min-width: 0; }
.hx-ai b { color: #10408a; font-size: 15px; font-weight: 600; }
.hx-ai p { margin: 2px 0 0; color: var(--hx-ink-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-ai-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #fff; border: 1px solid #d6e3f8; color: #3c5a8a; font-size: 12px; white-space: nowrap; }
.hx-ai-pill .spinner { width: 12px; height: 12px; border-width: 2px; border-top-color: var(--hx-blue); }

/* ------------------------------------------------ responsive */
@media (max-height: 800px) and (min-width: 1181px) {
  .hx-start { padding: 16px 24px; margin-top: 16px; }
  .hx svg.hx-art { width: 140px; }
  .hx-section { margin-top: 18px; }
}
@media (max-width: 1360px) {
  .hx-stats { gap: 10px; }
  .hx-stat { grid-template-columns: 36px 1fr; padding: 12px; column-gap: 10px; }
  .hx-stat-ic { width: 36px; height: 36px; }
}
@media (max-width: 1180px) {
  .hx-art-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hx-step-arrow { display: none; }
  .hx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hx-rows-h { display: none; }
  .hx-row { grid-template-columns: 88px minmax(0, 1fr); row-gap: 6px; }
  .hx-row > .hx-cell:not(.hx-r-art) { grid-column: 2; }
  .hx-row > .hx-thumb { grid-row: 1 / 3; }
}
@media (max-width: 860px) {
  .hx-art-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-hello h1 { font-size: 24px; }
  .hx-wave { font-size: 26px; }
  .hx-sub { margin-left: 0; }
  .hx-steps { grid-template-columns: 1fr; gap: 10px; }
  .hx-start { grid-template-columns: 1fr; padding: 18px; }
  .hx-start-art { border-right: 0; border-bottom: 1px solid var(--hx-line); padding: 0 0 14px; }
  .hx-start-body { padding: 16px 0 0; }
  .hx-totals span { padding-right: 12px; margin-right: 12px; }
}
@media (max-width: 520px) {
  .hx-art-col { grid-template-columns: 1fr; }
    .hx-btn.lg { width: 100%; justify-content: center; }
  .hx-ai { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .hx-wave { animation: none; } }

/* reviewer home */
.hx-stats.hx-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.hx-calm { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--hx-green-bg); color: #1d5c3c; font-size: 13px; }
.hx-calm svg { width: 18px; height: 18px; color: var(--hx-green); }
.hx-calm b { font-weight: 600; }