:root {
  --wqxt-drawer-bg: rgba(12, 13, 19, 0.985);
  --wqxt-drawer-text: #f2efe9;
  --wqxt-drawer-soft: rgba(242, 239, 233, 0.68);
  --wqxt-drawer-faint: rgba(242, 239, 233, 0.42);
  --wqxt-drawer-line: rgba(242, 239, 233, 0.18);
  --wqxt-drawer-gold: #f0c86e;
  --wqxt-drawer-mint: #77d8c3;
  --wqxt-drawer-danger: #ff7b86;
  --wqxt-drawer-serif: "Noto Serif SC", "Songti SC", serif;
  --wqxt-drawer-sans: Inter, "PingFang SC", sans-serif;
  --wqxt-drawer-mono: "DM Mono", "SFMono-Regular", monospace;
}

wqxt-detail-drawer { position: fixed; inset: 0; z-index: 180; display: none; color: var(--wqxt-drawer-text); }
wqxt-detail-drawer[open] { display: block; }
wqxt-detail-drawer wqxt-overflow-hint { z-index: 181; }
.wqxt-detail-drawer__scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(2,3,7,.7); backdrop-filter: blur(2px); cursor: default; }
.wqxt-detail-drawer__panel { position: absolute; inset: 0 0 0 auto; box-sizing: border-box; width: min(520px,46vw); min-width: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border-left: 1px solid var(--wqxt-drawer-line); background: var(--wqxt-drawer-bg); box-shadow: -24px 0 64px rgba(0,0,0,.42); transform: translateX(0); animation: wqxt-drawer-in .2s ease-out both; }
wqxt-detail-drawer[size="expanded"] .wqxt-detail-drawer__panel { width: min(760px,62vw); }
.wqxt-detail-drawer__header { min-height: 72px; padding: max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px 24px; display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; gap: 16px; }
.wqxt-detail-drawer__identity { min-width: 0; display: grid; gap: 5px; }
.wqxt-detail-drawer__eyebrow { color: var(--wqxt-drawer-gold); font: 600 10px/1.2 var(--wqxt-drawer-mono); letter-spacing: .15em; text-transform: uppercase; }
.wqxt-detail-drawer__title { margin: 0; overflow: hidden; color: var(--wqxt-drawer-text); font: 600 18px/1.25 var(--wqxt-drawer-serif); text-overflow: ellipsis; white-space: nowrap; }
.wqxt-detail-drawer__close { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--wqxt-drawer-soft); }
.wqxt-detail-drawer__close::before,.wqxt-detail-drawer__close::after { grid-area: 1/1; width: 22px; height: 1px; content: ""; background: currentColor; }
.wqxt-detail-drawer__close::before { transform: rotate(45deg); }
.wqxt-detail-drawer__close::after { transform: rotate(-45deg); }
.wqxt-detail-drawer__close:hover,.wqxt-detail-drawer__close:focus-visible { color: var(--wqxt-drawer-text); background: rgba(255,255,255,.05); outline: 1px solid var(--wqxt-drawer-line); outline-offset: -1px; }
.wqxt-detail-drawer__body { min-height: 0; padding: 8px max(24px,env(safe-area-inset-right)) 28px 24px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.wqxt-detail-drawer__summary { margin: 0 0 28px; color: var(--wqxt-drawer-soft); font: 400 14px/1.7 var(--wqxt-drawer-serif); }
.wqxt-detail-drawer__summary strong { margin: 0 4px; color: var(--wqxt-drawer-gold); font: 600 14px/1.2 var(--wqxt-drawer-mono); }
.wqxt-detail-drawer__footer { min-height: 76px; padding: 12px max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) 24px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; background: rgba(12,13,19,.98); }
.wqxt-detail-drawer__footer:empty { display: none; }
.wqxt-detail-drawer__button { min-width: 128px; min-height: 48px; padding: 0 22px; border: 1px solid var(--wqxt-drawer-line); border-radius: 6px; background: transparent; color: var(--wqxt-drawer-text); font: 600 14px/1 var(--wqxt-drawer-serif); }
.wqxt-detail-drawer__button:hover,.wqxt-detail-drawer__button:focus-visible { border-color: rgba(240,200,110,.72); outline: 1px solid rgba(240,200,110,.38); outline-offset: 2px; }
.wqxt-detail-drawer__button--primary { border-color: var(--wqxt-drawer-gold); background: var(--wqxt-drawer-gold); color: #17130c; }
.wqxt-detail-drawer__button:disabled { opacity: .38; cursor: not-allowed; }

.wqxt-drawer-records,.wqxt-drawer-actions { display: grid; gap: 24px; }
.wqxt-drawer-record,.wqxt-drawer-action { position: relative; display: grid; gap: 8px; }
.wqxt-drawer-record.has-action,.wqxt-drawer-action.has-action { padding-right: 116px; }
.wqxt-drawer-record__heading { margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px; font: 600 14px/1.45 var(--wqxt-drawer-serif); }
.wqxt-drawer-record__heading b { color: var(--wqxt-drawer-gold); font: 600 10px/1.2 var(--wqxt-drawer-mono); }
.wqxt-drawer-record time,.wqxt-drawer-meta,.wqxt-drawer-progress__value { color: var(--wqxt-drawer-faint); font: 500 10px/1.3 var(--wqxt-drawer-mono); }
.wqxt-drawer-record p,.wqxt-drawer-copy,.wqxt-drawer-section p,.wqxt-drawer-section li { margin: 0; color: var(--wqxt-drawer-soft); font: 400 13px/1.75 var(--wqxt-drawer-serif); }
.wqxt-drawer-inline-action { position: absolute; right: 0; bottom: 0; min-width: 96px; min-height: 44px; padding: 0 14px; border: 1px solid var(--wqxt-drawer-line); border-radius: 6px; background: transparent; color: var(--wqxt-drawer-text); font: 600 13px/1 var(--wqxt-drawer-serif); }
.wqxt-drawer-inline-action:hover,.wqxt-drawer-inline-action:focus-visible { border-color: var(--wqxt-drawer-gold); outline: 1px solid rgba(240,200,110,.35); outline-offset: 2px; }
.wqxt-drawer-inline-action:disabled { color: var(--wqxt-drawer-faint); }

.wqxt-drawer-object { display: grid; gap: 24px; }
.wqxt-drawer-object__hero { display: grid; grid-template-columns: 132px minmax(0,1fr); align-items: start; gap: 20px; }
.wqxt-drawer-object__hero.no-media { grid-template-columns: 1fr; }
.wqxt-drawer-object__media { width: 132px; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--wqxt-drawer-line); border-radius: 6px; background: rgba(255,255,255,.03); }
.wqxt-drawer-object__intro { display: grid; gap: 10px; }
.wqxt-drawer-object__intro h3,.wqxt-drawer-section h3,.wqxt-drawer-task h3,.wqxt-drawer-action h3 { margin: 0; color: var(--wqxt-drawer-text); font: 600 16px/1.4 var(--wqxt-drawer-serif); }
.wqxt-drawer-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wqxt-drawer-tag { padding: 4px 8px; border: 1px solid var(--wqxt-drawer-line); border-radius: 999px; color: var(--wqxt-drawer-soft); font: 500 10px/1.2 var(--wqxt-drawer-sans); }
.wqxt-drawer-status { color: var(--wqxt-drawer-mint); font: 600 11px/1.3 var(--wqxt-drawer-sans); }
.wqxt-drawer-fields { display: grid; gap: 12px; }
.wqxt-drawer-field { display: grid; grid-template-columns: minmax(88px,.45fr) minmax(0,1fr); gap: 16px; align-items: baseline; }
.wqxt-drawer-field dt { color: var(--wqxt-drawer-faint); font: 500 11px/1.4 var(--wqxt-drawer-sans); }
.wqxt-drawer-field dd { margin: 0; color: var(--wqxt-drawer-text); font: 400 13px/1.55 var(--wqxt-drawer-serif); }

.wqxt-drawer-task { display: grid; gap: 20px; }
.wqxt-drawer-progress { display: grid; gap: 8px; }
.wqxt-drawer-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wqxt-drawer-progress__track { height: 4px; overflow: hidden; background: rgba(255,255,255,.08); }
.wqxt-drawer-progress__track i { display: block; width: var(--progress,0%); height: 100%; background: var(--wqxt-drawer-gold); }
.wqxt-drawer-conditions,.wqxt-drawer-rewards { display: grid; gap: 10px; }
.wqxt-drawer-condition { display: flex; justify-content: space-between; gap: 16px; color: var(--wqxt-drawer-soft); font: 400 13px/1.5 var(--wqxt-drawer-serif); }
.wqxt-drawer-condition b { color: var(--wqxt-drawer-text); font: 600 11px/1.3 var(--wqxt-drawer-mono); }
.wqxt-drawer-rewards__list { display: flex; flex-wrap: wrap; gap: 12px; }
.wqxt-drawer-reward { min-width: 76px; display: grid; justify-items: center; gap: 6px; }
.wqxt-drawer-reward img { width: 48px; height: 48px; object-fit: contain; }
.wqxt-drawer-reward span { color: var(--wqxt-drawer-soft); font: 500 10px/1.3 var(--wqxt-drawer-sans); }
.wqxt-drawer-reward b { color: var(--wqxt-drawer-text); font: 600 11px/1.2 var(--wqxt-drawer-mono); }

.wqxt-drawer-sections { display: grid; gap: 24px; }
.wqxt-drawer-section { display: grid; gap: 10px; }
.wqxt-drawer-section ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.wqxt-drawer-callout { padding: 14px 16px; border-left: 2px solid var(--wqxt-drawer-gold); background: rgba(240,200,110,.055); color: var(--wqxt-drawer-soft); font: 400 13px/1.7 var(--wqxt-drawer-serif); }

.wqxt-drawer-action { grid-template-columns: 44px minmax(0,1fr); column-gap: 14px; align-items: start; }
.wqxt-drawer-action.has-action { grid-template-columns: 44px minmax(0,1fr); }
.wqxt-drawer-action__icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--wqxt-drawer-line); border-radius: 50%; color: var(--wqxt-drawer-gold); font: 600 15px/1 var(--wqxt-drawer-serif); }
.wqxt-drawer-action__copy { display: grid; gap: 6px; }
.wqxt-drawer-action .wqxt-drawer-inline-action { top: 50%; bottom: auto; transform: translateY(-50%); }
.wqxt-drawer-action__status { color: var(--wqxt-drawer-mint); font: 600 10px/1.3 var(--wqxt-drawer-sans); }

.wqxt-drawer-state { min-height: 320px; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; }
.wqxt-drawer-state__icon { width: 56px; height: 56px; display: grid; place-items: center; color: var(--wqxt-drawer-gold); font: 400 28px/1 var(--wqxt-drawer-serif); }
.wqxt-drawer-state h3 { margin: 4px 0 0; font: 600 16px/1.4 var(--wqxt-drawer-serif); }
.wqxt-drawer-state p { max-width: 420px; margin: 0; color: var(--wqxt-drawer-soft); font: 400 13px/1.65 var(--wqxt-drawer-serif); }
.wqxt-drawer-state--error .wqxt-drawer-state__icon { color: var(--wqxt-drawer-danger); }
.wqxt-drawer-state--loading .wqxt-drawer-state__icon { animation: wqxt-drawer-spin 1.2s linear infinite; }

@keyframes wqxt-drawer-in { from { opacity: .5; } }
@keyframes wqxt-drawer-spin { to { transform: rotate(360deg); } }
@media (max-width:1000px),(max-height:560px) {
  .wqxt-detail-drawer__panel { width:min(420px,78vw); }
  wqxt-detail-drawer[size="expanded"] .wqxt-detail-drawer__panel { width:min(600px,88vw); }
  .wqxt-detail-drawer__header { min-height:56px; padding: max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px 16px; gap:8px; }
  .wqxt-detail-drawer__title { font-size:16px; }
  .wqxt-detail-drawer__body { padding: 4px max(16px,env(safe-area-inset-right)) 20px 16px; }
  .wqxt-detail-drawer__summary { margin-bottom:20px; font-size:13px; }
  .wqxt-detail-drawer__footer { min-height:60px; padding:8px max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) 16px; }
  .wqxt-drawer-record.has-action,.wqxt-drawer-action.has-action { padding-right:0; }
  .wqxt-drawer-inline-action,.wqxt-drawer-action .wqxt-drawer-inline-action { position:static; justify-self:end; transform:none; }
  .wqxt-drawer-action .wqxt-drawer-inline-action { grid-column:2; }
  .wqxt-drawer-record p,.wqxt-drawer-copy,.wqxt-drawer-section p,.wqxt-drawer-section li { font-size:12px; line-height:1.65; }
  .wqxt-drawer-object { gap:16px; }
  .wqxt-drawer-object__hero { grid-template-columns:96px minmax(0,1fr); gap:14px; }
  .wqxt-drawer-object__media { width:96px; }
  .wqxt-drawer-state { min-height:220px; }
}
@media (prefers-reduced-motion:reduce) {
  .wqxt-detail-drawer__panel,.wqxt-drawer-state--loading .wqxt-drawer-state__icon { animation:none; }
}