/* Shared layout, adapted to the existing XHS red and task/admin palettes. */
.xhs-ui {
  box-sizing: border-box;
  --ui-border: #e7e9ee;
  --ui-shadow: 0 8px 28px rgba(30, 41, 59, .045);
  --ui-focus: #ff2442;
  background: #f4f6f8;
  color: #303642;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
.xhs-ui *, .xhs-ui *::before, .xhs-ui *::after { box-sizing: border-box; }
.xhs-ui .xhs-brand {
  display: flex; align-items: center; gap: 10px;
  width: fit-content; max-width: 100%; margin: 0 0 24px; padding: 8px 18px 8px 8px;
  border: 1px solid var(--ui-border); border-radius: 14px; background: #fff;
}
.xhs-ui .xhs-brand-logo { display: block; width: 72px; height: 72px; flex: 0 0 auto; object-fit: contain; }
.xhs-ui .xhs-brand-name { min-width: 0; color: #303642; font-size: 20px; font-weight: 600; line-height: 1.5; }
.xhs-auth .xhs-brand, .xhs-admin-auth .xhs-brand, .xhs-form .xhs-brand, .xhs-admin .card > .xhs-brand {
  width: 100%; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--ui-border);
  border-radius: 0; background: transparent; margin-bottom: 24px;
}
.xhs-auth .xhs-brand-name, .xhs-admin-auth .xhs-brand-name { font-size: 18px; }
.xhs-form, .xhs-admin, .xhs-admin-auth { --ui-focus: #2563eb; }
.xhs-ui h1 { font-size: clamp(24px, 2.8vw, 30px); line-height: 1.35; letter-spacing: .02em; }
.xhs-ui h2 { font-size: 18px; line-height: 1.5; margin-bottom: 16px; }
.xhs-ui p { overflow-wrap: anywhere; }
.xhs-ui .muted { color: #747d8b; }
.xhs-ui .wrap { width: min(100% - 48px, 1280px); margin: 0 auto; padding: 36px 0 56px; }
.xhs-ui .card, .xhs-ui section, .xhs-center .top {
  background: #fff;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  box-shadow: var(--ui-shadow);
}
.xhs-ui section { padding: 26px; margin-top: 24px; min-width: 0; }
.xhs-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.xhs-ui select, .xhs-ui textarea {
  max-width: 100%;
  min-height: 42px;
  border: 1px solid #dce0e7;
  border-radius: 9px;
  padding: 10px 12px;
  font: inherit;
  background-color: #fff;
  color: inherit;
  vertical-align: middle;
}
.xhs-ui textarea { min-height: 130px; line-height: 1.65; resize: vertical; }
.xhs-ui input[type="checkbox"], .xhs-ui input[type="radio"] {
  width: auto; height: auto; min-height: 0; flex-shrink: 0; accent-color: var(--ui-focus);
}
.xhs-ui :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #cbd5e1;
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 30%, transparent);
  outline-offset: 3px;
}
.xhs-ui button, .xhs-ui .button, .xhs-ui .nav a, .xhs-ui .pager a,
.xhs-ui a.back, .xhs-ui .approve, .xhs-ui .reject, .xhs-ui .freeze,
.xhs-ui .unfreeze, .xhs-ui .task {
  min-height: 38px; border-radius: 9px; font-size: 14px; line-height: 1.5;
  padding: 9px 14px; text-decoration: none; cursor: pointer;
}
.xhs-ui button { font-family: inherit; }
.xhs-ui button:hover, .xhs-ui .button:hover, .xhs-ui .nav a:hover { filter: brightness(.96); }
.xhs-ui button:disabled { cursor: not-allowed; opacity: .6; }
.xhs-ui .nav, .xhs-ui .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.xhs-ui .nav a, .xhs-ui .pager a { margin: 0; }
.xhs-auth, .xhs-admin-auth { min-height: 100vh; min-height: 100dvh; padding: 32px 20px; }
.xhs-auth .card, .xhs-admin-auth .card { width: min(100%, 440px); padding: 34px; }
.xhs-auth .page { width: min(100%, 460px); padding: 0; }
.xhs-auth .page .card { margin-top: 24px; }
.xhs-auth input, .xhs-admin-auth input { width: 100%; }
.xhs-auth label, .xhs-admin-auth label { line-height: 1.6; }
.xhs-form .card { width: min(100% - 48px, 780px); margin: 40px auto 56px; padding: 32px; }
.xhs-form label { font-weight: 500; }
.xhs-form .option { border-radius: 10px; padding: 12px 14px; line-height: 1.65; }
.xhs-ui .notice, .xhs-ui .error, .xhs-ui .success, .xhs-ui .compliance, .xhs-ui .example {
  border-radius: 10px; line-height: 1.65; overflow-wrap: anywhere;
}
.xhs-center .wrap { max-width: 1120px; }
.xhs-center .top { padding: 28px; }
.xhs-ui.xhs-center .top { grid-template-columns: 230px minmax(0, 1fr) !important; gap: 24px !important; }
.xhs-center .top h1 { white-space: normal; }
.xhs-center .top > div:last-child { gap: 10px; }
.xhs-center .top > div:last-child .button { display: inline-flex; align-items: center; justify-content: center; }
.xhs-center .claim, .xhs-center .published { padding: 20px; border-radius: 12px; margin-top: 16px; overflow-wrap: anywhere; }
.xhs-center .claim h3, .xhs-center .published h3 { line-height: 1.5; margin-top: 0; }
.xhs-center .link { overflow-wrap: anywhere; }
.xhs-center .posting-gallery button { min-height: 0; padding: 0; }
.xhs-admin .card { width: min(100% - 48px, 780px); margin: 40px auto; padding: 30px; }
.xhs-admin .xhs-table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.xhs-admin table { width: 100%; min-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.xhs-admin th { background: #f8f9fc; color: #586375; font-weight: 600; white-space: nowrap; }
.xhs-admin th, .xhs-admin td { padding: 13px 12px; border-bottom: 1px solid #edf0f4; font-size: 14px; line-height: 1.6; vertical-align: top; }
.xhs-admin tbody tr:hover { background: #fafbfe; }
.xhs-admin .note-id { white-space: nowrap; font-family: Consolas, monospace; font-size: 13px; }
.xhs-admin td form { margin: 4px 0; }
.xhs-admin .row { padding: 14px 0; }
.xhs-admin .row .value { min-width: 0; }
@media (max-width: 980px) {
  .xhs-ui.xhs-center .top { grid-template-columns: 1fr !important; }
  .xhs-center .top > div:last-child { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .xhs-ui .xhs-brand { gap: 8px; margin-bottom: 20px; }
  .xhs-ui .xhs-brand-logo { width: 56px; height: 56px; }
  .xhs-ui .xhs-brand-name { font-size: 16px; }
  .xhs-ui .wrap { width: calc(100% - 28px); padding: 22px 0 36px; }
  .xhs-ui section { padding: 18px; margin-top: 18px; }
  .xhs-ui .card { border-radius: 14px; }
  .xhs-form .card, .xhs-admin .card { width: calc(100% - 28px); margin: 22px auto 36px; padding: 22px 18px; }
  .xhs-auth, .xhs-admin-auth { padding: 24px 16px; }
  .xhs-auth .card, .xhs-admin-auth .card { padding: 28px 22px; }
  .xhs-center .top { padding: 22px 18px; }
  .xhs-ui.xhs-center .top { display: grid !important; gap: 16px !important; }
  .xhs-center .top > div:first-child { min-width: 0; }
  .xhs-center .claim, .xhs-center .published { padding: 16px; }
  .xhs-ui .nav { gap: 8px; }
  .xhs-admin .row { gap: 12px; flex-wrap: wrap; }
  .xhs-admin .row .label { width: 100%; }
  .xhs-admin .pager { gap: 8px; }
}