/* Hallmark · genre: modern-minimal · macrostructure: Long Document · theme: existing Resource Hub
 * pre-emit critique: P5 H5 E4 S5 R5 V4 · function-led cards, natural page flow, native dialogs
 * component: request composer and compact records · existing tokens · no page macrostructure changes
 * records: configured shell width · aligned wide columns · split replies · stacked mobile
 * states: default · hover · focus · active · disabled · loading · error · success
 * composer contrast: pass (40–41) · mobile: verified at 320 / 375 / 414 / 768px
 */
:root {
    --request-paper: var(--white);
    --request-muted-paper: var(--paper);
    --request-ink: var(--ink);
    --request-muted: var(--ink-soft);
    --request-line: var(--line);
    --request-focus: var(--accent);
    --request-author-paper: var(--mint);
    --request-author-ink: var(--accent-strong);
    --request-form-accent: var(--accent);
    --request-gold-paper: oklch(96% .038 85);
    --request-gold-hover: oklch(93% .060 85);
    --request-gold-mark: oklch(99% .015 85);
    --request-gold: oklch(43% .093 75);
    --request-gold-line: oklch(83% .092 85);
    --request-gold-runner: oklch(62% .16 75);
    --request-success-paper: oklch(96% .025 155);
    --request-success: oklch(40% .08 155);
    --request-error: var(--member-checkout-error);
    --request-backdrop: oklch(22% .024 265 / .55);
    --request-wechat: oklch(48% .145 149);
    --request-alipay: oklch(49% .13 241);
    --request-font: var(--font-sans);
    --request-brand-font: "Resource Payment Brands";
    --request-ease: cubic-bezier(.16,1,.3,1);
    --request-space-xs: 8px;
    --request-space-sm: 12px;
    --request-space-md: 20px;
    --request-space-lg: 28px;
    --request-radius: var(--radius-md);
    --request-action-width: 184px;
}
html, body { overflow-x: clip; }
.request-page { padding: 44px 0 64px; container: request-page / inline-size; }
.request-layout { display: grid; gap: var(--request-space-lg); }
.request-history, .request-form-card { min-width: 0; color: var(--request-ink); }
.request-history { padding: 0; }
.request-history-head { display: flex; align-items: end; justify-content: space-between; gap: var(--request-space-md); margin-bottom: 16px; }
.request-history-head h2, .request-form-card h2 { margin: 0; font-size: 25px; line-height: 1.4; letter-spacing: -.035em; font-style: normal; }
.request-history-head > span, .request-form-copy > p { color: var(--request-muted); font-size: 12px; line-height: 1.8; }
.request-history .eyebrow, .request-form-card .eyebrow { display: none; }
.request-list { display: grid; gap: var(--request-space-sm); }
.request-item { min-width: 0; padding: 20px 24px; border: 1px solid var(--request-line); border-radius: var(--request-radius); background: var(--request-paper); scroll-margin-top: 100px; }
.request-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--request-space-md); }
.request-title-block { min-width: 0; flex: 1 1 auto; }
.request-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.request-owner-badge, .request-author { display: inline-flex; align-items: center; min-height: 24px; max-width: 100%; padding: 3px 8px; border-radius: 5px; color: var(--request-author-ink); background: var(--request-author-paper); font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
.request-owner-badge { font-weight: 600; white-space: nowrap; }
.request-item h3 { min-width: 0; margin: 0; font-size: 18px; line-height: 1.5; font-style: normal; overflow-wrap: anywhere; }
.request-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--request-space-sm); margin-top: 7px; color: var(--request-muted); font-size: 12px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.request-item-meta > * { display: inline-flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.request-item-reference { display: contents; }
.request-item-meta time { white-space: nowrap; }
.request-item-state { display: flex; align-items: center; gap: var(--request-space-sm); flex: 0 0 auto; }
.request-item-status { display: inline-flex; padding: 4px 9px; border-radius: 999px; color: var(--request-muted); background: var(--request-muted-paper); font-size: 11px; font-weight: 600; white-space: nowrap; }
.request-item-status.status-0 { color: var(--request-gold); background: var(--request-gold-paper); }
.request-item-status.status-1 { color: var(--request-ink); background: var(--mint); }
.request-item-status.status-2 { color: var(--request-success); background: var(--request-success-paper); }
.request-item-content { margin: 16px 0 0; color: var(--request-muted); font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.request-item-content:empty { display: none; }
.request-item-content.is-collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: clip; }
.request-content-toggle, .request-support-link { min-height: 44px; cursor: pointer; font: 600 12px var(--request-font); white-space: nowrap; }
.request-support-link { padding: 0 14px; border: 1px solid var(--request-gold-line); border-radius: 7px; color: var(--request-gold); background: var(--request-gold-paper); }
.request-content-toggle { padding: 0; border: 0; color: var(--request-muted); background: transparent; }
.request-item-description, .request-item-response { min-width: 0; }
.request-item-support { margin-top: 12px; }
.request-admin-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--request-line); color: var(--request-muted); font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.request-admin-note strong { color: var(--request-ink); font-weight: 600; }
.request-official-badge { display: inline-flex; padding: 1px 6px; margin-right: 4px; border-radius: 4px; color: var(--request-ink); background: var(--mint); font-size: 10px; }
.request-item-foot { margin-top: 6px; }
.request-article-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--request-ink); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.request-priority-badge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 44px; max-width: 100%; margin: 0; padding: 6px 10px; border: 1px solid var(--request-gold-line); border-radius: 7px; background: var(--request-gold-paper); color: var(--request-gold); cursor: pointer; font: 600 12px var(--request-font); font-variant-numeric: tabular-nums; }
.request-priority-badge b { font-weight: 600; white-space: nowrap; }
.request-priority-badge em { font-style: normal; font-size: 11px; white-space: nowrap; }
.request-empty { padding: 48px 20px; text-align: center; color: var(--request-muted); border: 1px dashed var(--request-line); border-radius: var(--request-radius); font-size: 14px; }
.request-history .pagination:empty { display: none; }
.request-history .pagination { margin-top: var(--request-space-md); }
@container request-page (min-width: 1180px) {
    .request-item-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .9fr) var(--request-action-width); gap: var(--request-space-lg); }
    .request-title-block, .request-item-meta { display: contents; }
    .request-item-specs { color: var(--request-muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
    .request-item-meta .request-item-reference { display: grid; gap: 4px; justify-items: start; color: var(--request-muted); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
    .request-item-reference time { font-size: 11px; }
    .request-item-state { justify-self: end; }
    .request-item-details { margin-top: 16px; }
    .request-item-details:has(.request-item-description):has(.request-item-response) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--request-space-lg); }
    .request-item-details .request-item-content { margin-top: 0; }
    .request-item-details .request-item-support:first-child { margin-top: 0; }
    .request-item-details .request-admin-note { margin-top: 0; padding-top: 0; border-top: 0; }
    .request-item-description + .request-item-response { padding-left: var(--request-space-lg); border-left: 1px solid var(--request-line); }
}
.request-form-card { padding: var(--request-space-lg); border: 1px solid var(--request-line); border-top: 3px solid var(--request-form-accent); border-radius: var(--request-radius); background: var(--request-paper); }
.request-form-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: clamp(20px, 3vw, 42px); }
.request-form-copy { min-width: 0; flex: 0 1 auto; }
.request-form-copy > p { margin: 6px 0 20px; }
.request-form-card form > label { display: block; margin: 16px 0 6px; color: var(--request-ink); font-size: 13px; font-weight: 600; }
.request-form-card input:not([type="radio"]):not([type="hidden"]):not([name="custom_amount"]), .request-form-card textarea { display: block; width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid var(--request-line); border-radius: 7px; color: var(--request-ink); background: var(--request-muted-paper); font: 13px/1.6 var(--request-font); }
.request-form-card textarea { min-height: 132px; resize: vertical; }
.request-form-card textarea::placeholder { color: var(--request-muted); }
.request-form-card textarea[readonly] { color: var(--request-muted); }
.request-form-card textarea:disabled { opacity: .55; cursor: not-allowed; }
.request-form-card textarea[aria-invalid="true"] { border-color: var(--request-error); }
.request-form-card form[data-state="success"] textarea { border-color: var(--request-success); }
.request-submit-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--request-space-sm); margin-top: 10px; }
.request-quick-prompts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.request-quick-prompts button { min-width: 44px; min-height: 30px; padding: 0 9px; border: 1px solid var(--request-line); border-radius: 6px; color: var(--request-muted); background: var(--request-muted-paper); cursor: pointer; font: 500 11px/1 var(--request-font); white-space: nowrap; }
.request-submit-action { margin-inline-start: auto; }
.request-submit, .request-priority-dialog-actions > button, .request-payment-dialog footer button { min-height: 44px; padding: 0 22px; border: 1px solid var(--request-ink); border-radius: 7px; background: var(--request-ink); color: var(--request-paper); cursor: pointer; font: 600 14px var(--request-font); white-space: nowrap; }
.request-limit { display: block; margin-top: 6px; text-align: center; color: var(--request-muted); font-size: 11px; }
.request-priority-compose { display: flex; align-items: flex-start; gap: var(--request-space-sm); flex: 0 0 auto; width: fit-content; max-width: 100%; min-width: 0; }
.request-priority-compose.is-expanded { flex: 1 1 560px; width: auto; flex-wrap: wrap; }
.request-priority-toggle { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--request-space-sm); flex: 0 0 auto; width: max-content; max-width: 100%; min-height: 54px; padding: 8px 14px 8px 10px; border: 1px solid var(--request-gold-line); border-radius: 999px; color: var(--request-gold); background: var(--request-gold-paper); cursor: pointer; text-align: left; font: inherit; }
.request-priority-border { position: absolute; z-index: 2; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; color: var(--request-gold-runner); pointer-events: none; }
.request-priority-border rect { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 12 88; stroke-dashoffset: 0; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: request-priority-border-runner 3.6s linear infinite; }
.request-priority-toggle > *:not(.request-priority-border) { position: relative; z-index: 1; }
.request-priority-toggle-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--request-gold-line); border-radius: 50%; background: var(--request-gold-mark); }
.request-priority-toggle-mark svg { width: 20px; height: 20px; fill: currentColor; }
.request-priority-toggle > span:not(.request-priority-toggle-mark) { display: flex; align-items: center; min-width: 0; }
.request-priority-toggle strong { font-size: 15px; white-space: nowrap; }
.request-priority-toggle > :is(svg,i):not(.request-priority-border) { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .18s var(--request-ease); }
.request-priority-toggle[aria-expanded="true"] > :is(svg,i):not(.request-priority-border) { transform: rotate(90deg); }
.request-priority-compose-panel { display: flex; flex-wrap: wrap; align-items: center; flex: 1 1 360px; min-width: 0; gap: var(--request-space-sm); padding: 5px 0; animation: request-panel-appear .18s var(--request-ease); }
.request-priority-compose-panel[hidden] { display: none; }
.request-priority-panel-note { display: none; flex: 0 0 auto; color: var(--request-muted); font-size: 11px; white-space: nowrap; }
.request-amounts, .request-pay-channels { display: flex; flex-wrap: wrap; gap: var(--request-space-xs); }
.request-amounts label, .request-pay-channels label { position: relative; display: inline-flex; align-items: center; margin: 0; cursor: pointer; font: 12px var(--request-font); }
.request-amounts label > input[type="radio"], .request-pay-channels label > input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.request-amounts label > span, .request-pay-channels label > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--request-line); border-radius: 999px; color: var(--request-ink); background: var(--request-paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.request-amounts input:checked + span { color: var(--request-gold); background: var(--request-gold-paper); border-color: var(--request-gold-line); font-weight: 700; }
.request-pay-channels input:checked + span { border-color: var(--request-ink); background: var(--request-muted-paper); font-weight: 600; }
.request-custom-amount { gap: 6px; min-width: 0; max-width: 100%; padding: 0 12px; border: 1px solid var(--request-line); border-radius: 999px; background: var(--request-paper); }
.request-amounts .request-custom-amount > span { min-height: 42px; padding: 0; border: 0; font-size: 11px; color: var(--request-muted); }
.request-amounts .request-custom-amount > input { display: block; min-width: 0; width: 78px; min-height: 40px; margin: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--request-ink); font: 12px var(--request-font); }
.request-custom-amount:focus-within { outline: 2px solid var(--request-focus); outline-offset: 2px; }
.request-pay-channels { margin-top: var(--request-space-xs); }
.request-priority-compose-panel .request-pay-channels { margin-top: 0; }
.request-pay-brand { font-family: var(--request-brand-font); font-weight: 400; font-size: 20px; line-height: 1; }
.request-pay-brand.is-wechat { color: var(--request-wechat); }
.request-pay-brand.is-alipay { color: var(--request-alipay); }
.request-name-field { position: relative; }
.request-suggestions { position: absolute; z-index: 5; inset: calc(100% + 6px) 0 auto; padding: 12px; border: 1px solid var(--request-line); border-radius: var(--request-radius); color: var(--request-ink); background: var(--request-paper); box-shadow: var(--shadow-md); }
.request-suggestions p { margin: 0 0 6px; color: var(--request-muted); font-size: 12px; }
.request-suggestions a { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; color: var(--request-ink); font-size: 13px; text-decoration: none; }
.request-suggestions a strong { min-width: 0; overflow-wrap: anywhere; }
.request-suggestions a span { color: var(--request-muted); font-size: 11px; white-space: nowrap; }
.request-priority-dialog, .request-payment-dialog { position: fixed; inset: 0; margin: auto; width: min(560px,calc(100% - 32px)); height: fit-content; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 24px; border: 1px solid var(--request-line); border-radius: 14px; color: var(--request-ink); background: var(--request-paper); font-family: var(--request-font); }
.request-priority-intent-dialog { position: fixed; inset: 0; margin: auto; width: min(460px,calc(100% - 32px)); height: fit-content; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 24px; border: 1px solid var(--request-line); border-top: 3px solid var(--request-gold); border-radius: 14px; color: var(--request-ink); background: var(--request-paper); font-family: var(--request-font); }
.request-priority-dialog::backdrop, .request-payment-dialog::backdrop { background: var(--request-backdrop); }
.request-priority-intent-dialog::backdrop { background: var(--request-backdrop); }
.request-priority-dialog-head, .request-payment-dialog header { display: flex; align-items: start; justify-content: space-between; gap: var(--request-space-md); }
.request-priority-dialog-head small { color: var(--request-muted); font-size: 11px; }
.request-priority-dialog-head h4, .request-payment-dialog h2 { margin: 4px 0 0; font-size: 20px; line-height: 1.5; font-style: normal; overflow-wrap: anywhere; }
.request-priority-dialog-head button, .request-payment-dialog header button { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; color: var(--request-muted); background: var(--request-muted-paper); cursor: pointer; font-size: 24px; }
.request-priority-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 20px 0; font-variant-numeric: tabular-nums; }
.request-priority-total span, .request-priority-total small { color: var(--request-muted); font-size: 12px; }
.request-priority-total strong { color: var(--request-gold); font-size: 30px; }
.request-support-history { max-height: 220px; overflow-y: auto; padding: 0 0 12px; margin-bottom: 16px; border-bottom: 1px solid var(--request-line); }
.request-support-history > div { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 16px; padding: 10px 0; color: var(--request-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.request-support-history strong { color: var(--request-ink); }
.request-support-history p { margin: 0; color: var(--request-muted); font-size: 13px; }
.request-priority-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--request-space-sm); margin-top: 16px; }
.request-priority-dialog-actions .request-pay-channels { margin: 0; }
.request-priority-dialog-form > p { color: var(--request-muted); font-size: 11px; line-height: 1.8; }
.request-priority-login-link { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--request-ink); border-radius: 7px; background: var(--request-ink); color: var(--request-paper); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.request-priority-intent-lead { margin: 20px 0 6px; color: var(--request-gold); font-size: 16px; font-weight: 700; }
.request-priority-intent-dialog > p:not(.request-priority-intent-lead) { margin: 0; color: var(--request-muted); font-size: 13px; line-height: 1.8; }
.request-priority-intent-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--request-space-sm); margin-top: 20px; }
.request-priority-intent-cancel { min-height: 44px; padding: 0 16px; border: 1px solid var(--request-line); border-radius: 7px; color: var(--request-muted); background: var(--request-paper); cursor: pointer; font: 600 13px var(--request-font); white-space: nowrap; }
.request-priority-intent-confirm { min-height: 44px; }
.request-payment-dialog { width: min(680px,calc(100% - 32px)); }
.request-payment-dialog iframe { width: 100%; height: min(500px,55dvh); margin-top: 16px; border: 1px solid var(--request-line); border-radius: 8px; background: var(--request-paper); }
.request-payment-dialog > p { color: var(--request-muted); font-size: 12px; line-height: 1.8; }
.request-payment-dialog footer { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 12px; }
.request-payment-dialog footer a { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; color: var(--request-ink); }
.request-feedback { min-height: 20px; margin-top: 8px; color: var(--request-error); font-size: 12px; line-height: 1.8; }
.request-feedback.is-success { color: var(--request-success); }
.request-guest-page button:disabled, .request-priority-dialog button:disabled, .request-payment-dialog button:disabled { opacity: .6; cursor: not-allowed; }
.request-guest-page button:active:not(:disabled), .request-guest-page button.is-active, .request-priority-dialog button:active:not(:disabled) { transform: translateY(1px); }
.request-guest-page :is(button,a,input,textarea):focus-visible, .request-guest-page .is-focus, .request-priority-dialog :is(button,a,input):focus-visible, .request-payment-dialog :is(button,a):focus-visible { outline: 2px solid var(--request-focus); outline-offset: 3px; }
.request-amounts input:focus-visible + span, .request-pay-channels input:focus-visible + span { outline: 2px solid var(--request-focus); outline-offset: 3px; }
.request-priority-toggle.is-hover, .request-priority-toggle[aria-expanded="true"] { color: var(--request-gold); background: var(--request-gold-hover); }
.request-priority-toggle:disabled .request-priority-border rect, .request-priority-toggle[aria-busy="true"] .request-priority-border rect { animation-play-state: paused; }
.request-priority-toggle[aria-invalid="true"] { outline: 2px solid var(--request-error); outline-offset: 3px; }
.request-priority-toggle[data-state="success"] { color: var(--request-success); background: var(--request-success-paper); border-color: var(--request-success); }
.request-priority-toggle[data-state="success"] .request-priority-border { display: none; }
@media (hover:hover) {
    .request-suggestions a:hover { background: var(--request-muted-paper); color: var(--request-ink); }
    .request-priority-badge:hover, .request-support-link:hover { border-color: var(--request-gold); background: var(--request-gold-hover); }
    .request-priority-toggle:hover:not(:disabled) { color: var(--request-gold); background: var(--request-gold-hover); }
    .request-content-toggle:hover { text-decoration: underline; }
    .request-submit:hover, .request-submit.is-hover, .request-priority-dialog-actions > button:hover { opacity: .9; }
    .request-form-card :is(input,textarea):hover, .request-form-card textarea.is-hover { border-color: var(--request-muted); }
    .request-quick-prompts button:hover:not(:disabled) { color: var(--request-ink); background: var(--request-paper); }
}
@keyframes request-panel-appear { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes request-priority-border-runner { to { stroke-dashoffset: -100; } }
@media (max-width:900px) {
    .request-form-head { align-items: start; flex-direction: column; gap: 8px; }
    .request-priority-compose, .request-priority-compose.is-expanded { flex: 0 0 auto; width: fit-content; min-width: 0; flex-wrap: wrap; }
    .request-priority-compose.is-expanded { width: 100%; }
    .request-priority-compose-panel { flex-wrap: wrap; }
    .request-priority-panel-note { display: block; width: 100%; }
}
@media (max-width:560px) {
    .request-page { padding: 28px 0 44px; }
    .request-history-head { flex-direction: column; align-items: start; gap: 6px; }
    .request-item, .request-form-card { padding: 18px 16px; }
    .request-item-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .request-item-state { justify-content: space-between; gap: 8px; }
    .request-item h3 { font-size: 17px; }
    .request-item-meta { font-size: 11px; }
    .request-quick-prompts { gap: 4px; }
    .request-quick-prompts button { min-height: 44px; padding: 0 10px; }
    .request-priority-dialog, .request-payment-dialog, .request-priority-intent-dialog { padding: 18px 16px; }
    .request-priority-compose-panel { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; padding-top: 0; }
    .request-priority-panel-note { width: auto; }
    .request-amounts, .request-pay-channels { min-width: 0; }
    .request-priority-dialog-actions > button { width: 100%; }
    .request-priority-intent-actions > * { flex: 1 1 100%; }
}
@media (prefers-reduced-motion:reduce) { .request-priority-compose-panel, .request-priority-border rect { animation: none; } .request-priority-border { display: none; } .request-priority-toggle svg { transition: none; } }