/* V1 workspace extensions. Loaded after the legacy stylesheet to preserve rollback. */
.workspace {
  grid-template-columns: 72px 240px minmax(0, 1fr);
}

.workspace.v1PanelMode {
  grid-template-columns: 72px minmax(0, 1fr);
}

.primaryRail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 22, 36, .94);
  overflow-y: auto;
}

.primaryNav {
  width: 54px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.primaryNav span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 800;
}

.primaryNav small { font-size: 11px; }
.primaryNav:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.primaryNav.active { border-color: rgba(39,214,255,.34); background: rgba(39,214,255,.10); color: #65e4ff; }
.primaryNav.active span { background: #29cee9; color: #06101c; }

.creditBalanceBtn, .topRechargeBtn, .serviceStatusBtn {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--panelStrong);
}
.creditBalanceBtn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; line-height: 1; }
.creditBalanceBtn span, .creditBalanceBtn small { display: inline-flex; align-items: center; color: var(--muted); font-size: 11px; line-height: 1; }
.creditBalanceBtn strong { display: inline-flex; align-items: center; color: #60e3fa; font-size: 15px; line-height: 1; }
.topRechargeBtn { padding: 0 12px; background: #2acde7; border-color: #2acde7; color: #06101c; font-size: 12px; font-weight: 800; }
.serviceStatusBtn { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.serviceStatusBtn i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #4ce39a; box-shadow: 0 0 8px rgba(76,227,154,.55); }
.serviceStatusBtn.degraded { color: #ffc477; border-color: rgba(255,184,77,.28); }
.serviceStatusBtn.degraded i { background: #ffb84d; box-shadow: 0 0 8px rgba(255,184,77,.5); }

.sideRail, .chatStage { border-radius: 8px; }

.v1PanelStage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 18, 31, .92);
  overflow: hidden;
}
.v1PanelHead { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.v1PanelHead span { color: #4edff8; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.v1PanelHead h1 { margin: 3px 0 0; font-size: 22px; letter-spacing: 0; }
.v1PanelHead p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.v1PanelContent { min-height: 0; padding: 18px 24px 28px; overflow: auto; }
.v1Loading { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); }
.v1Loading i { width: 32px; height: 32px; border: 2px solid var(--line); border-top-color: #35d6f0; border-radius: 50%; animation: spin .8s linear infinite; }
.v1Empty { min-height: 160px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); }
.v1Empty.compact { min-height: 88px; }
.v1Empty.error { color: var(--danger); }

.videoWorkbench { display: grid; grid-template-columns: minmax(420px, .9fr) minmax(380px, 1.1fr); gap: 18px; align-items: start; }
.videoForm { display: grid; gap: 14px; padding-right: 18px; border-right: 1px solid var(--line); }
.formSectionHead, .sectionTitle { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.formSectionHead div, .sectionTitle { min-width: 0; }
.formSectionHead strong, .sectionTitle strong { display: block; font-size: 15px; }
.formSectionHead span:not(.modeBadge), .sectionTitle span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.modeBadge { padding: 5px 8px; border: 1px solid rgba(39,214,255,.25); border-radius: 999px; background: rgba(39,214,255,.08); color: #5be2fa; font-size: 11px; white-space: nowrap; }
.videoUpload { min-height: 100px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed rgba(96,227,250,.35); border-radius: 6px; background: rgba(39,214,255,.04); cursor: pointer; }
.videoUpload input { width: 1px; height: 1px; position: absolute; opacity: 0; }
.videoUpload span { color: var(--ink); font-size: 14px; font-weight: 750; }
.videoUpload small { color: var(--muted); font-size: 11px; }
.videoUploadName { max-width: 100%; overflow: hidden; color: #60e3fa; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.wideField, .videoOptions label, .adminV1Tools label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.wideField textarea, .wideField select, .videoOptions select, .adminV1Tools input, .adminV1Tools select, .priceAdminGrid input {
  width: 100%; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.035); color: var(--ink); padding: 10px 11px; outline: none;
}
.wideField textarea:focus, .videoOptions select:focus { border-color: rgba(39,214,255,.5); }
.adminAdjustForm input:not([type="hidden"]) { height: 38px; min-height: 38px; box-sizing: border-box; }
.videoOptions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 64px; gap: 10px; }
.videoOptions > label,
.videoChoiceWrap { min-width: 0; height: 64px; display: grid; grid-template-rows: 16px 38px; align-content: start; gap: 6px; }
.videoChoiceWrap .ecomChoiceLabel { margin: 0; color: var(--muted); font-size: 12px; font-weight: 400; }
.videoOptions select,
.videoChoiceWrap .ecomChoicePill { width: 100%; min-width: 0; height: 38px; min-height: 38px; box-sizing: border-box; padding: 0 11px; }
.videoChoiceWrap .ecomChoicePill { justify-content: flex-start; border-radius: 6px; background: rgba(255,255,255,.035); font-size: 12px; }
.videoChoiceWrap .ecomChoicePill .chevron { margin-left: auto; }
.videoChoiceWrap .ecomChoicePopover { top: calc(100% + 8px); bottom: auto; }
.videoChoiceWrap .videoPresetPopover { width: min(260px, calc(100vw - 32px)); }
.videoChoiceWrap .videoPresetGrid button { padding: 0 10px; }
.videoChoiceWrap .videoPresetGrid button::before { content: none; display: none; }
.videoSubmitRow { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #60e3fa; font-size: 12px; flex-wrap: wrap; }
.videoSubmitRow .sendBtn { min-width: 150px; }
.latestVideoTask { min-width: 0; }
.taskProgressCard { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); }
.taskProgressCard > div:first-child { display: flex; align-items: center; gap: 10px; }
.taskProgressCard small { color: var(--muted); }

.taskProgress { width: 100%; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.taskProgress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #26d6ef, #4f76ff); transition: width .3s ease; }
.taskProgress.slim { height: 4px; margin-top: 9px; }
.taskState { display: inline-flex; width: fit-content; align-items: center; min-height: 23px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.taskState.ok { color: #4ce39a; background: rgba(57,217,138,.1); }
.taskState.busy { color: #62def4; background: rgba(39,214,255,.1); }
.taskState.bad { color: #ff8d9e; background: rgba(251,113,133,.1); }
.taskOutcome { margin: 0; padding: 10px 12px; border-radius: 6px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.taskOutcome.failed { color: #ffb1bd; background: rgba(251,113,133,.08); }
.taskOutcome.refunded { color: #ffc477; background: rgba(255,184,77,.09); }

.videoResult { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(250px, 1fr); gap: 16px; }
.videoCanvasWrap { position: relative; aspect-ratio: 9 / 16; max-height: 600px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #080d17; }
.videoCanvasWrap canvas,
.videoCanvasWrap video { width: 100%; height: 100%; display: block; object-fit: contain; }
.videoMediaStatus { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--muted); font-size: 13px; text-align: center; pointer-events: none; }
.canvasPlayBtn { position: absolute; right: 10px; bottom: 10px; min-width: 54px; min-height: 30px; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; background: rgba(5,10,18,.75); color: #fff; }
.videoResultBody { display: grid; align-content: start; gap: 11px; }
.videoResultBody > strong { font-size: 17px; }
.videoResultBody > p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.storyboardList { display: grid; gap: 6px; }
.storyboardList span { display: grid; grid-template-columns: 24px minmax(0,1fr) minmax(0,auto); align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--line); font-size: 12px; overflow-wrap: anywhere; }
.storyboardList b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 4px; background: rgba(39,214,255,.1); color: #62def4; }
.storyboardList small { color: var(--muted); }
.resultCommandBar { display: flex; gap: 8px; margin-top: 6px; }

.taskFilters { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.taskFilterGroup { display: flex; gap: 8px; flex-wrap: wrap; }
.filterPill { min-height: 31px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; }
.filterPill.active { background: #e7edf9; color: #111827; border-color: #e7edf9; }
.taskCenterList { display: grid; gap: 7px; }
.taskRow { min-width: 0; display: grid; grid-template-columns: 38px minmax(220px, 1fr) 100px auto; gap: 12px; align-items: center; padding: 12px 13px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); }
.taskTypeIcon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: #07101b; font-size: 12px; font-weight: 900; }
.taskTypeIcon.image { background: #54dbf0; }
.taskTypeIcon.video { background: #ffd166; }
.taskRowMain { min-width: 0; }
.taskRowMain > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.taskRowMain strong { font-size: 13px; }
.taskRowMain small { display: block; max-width: 100%; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.taskCredits { display: grid; text-align: right; }
.taskCredits strong { color: #60e3fa; font-size: 16px; }
.taskCredits span, .taskCredits small { color: var(--muted); font-size: 10px; }
.taskCredits small { color: #ffad7a; }
.taskActions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.taskActions .lightBtn { min-height: 30px; padding: 0 9px; font-size: 10px; }

.assetGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.assetItem { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); }
.assetItem > img, .assetVideoPoster { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #0b1120; }
.assetVideoPoster { position: relative; }
.assetVideoPoster img { width: 100%; height: 100%; object-fit: cover; }
.assetVideoPoster span { position: absolute; left: 8px; bottom: 8px; padding: 5px 7px; border-radius: 4px; background: rgba(5,10,18,.76); color: #fff; font-size: 10px; }
.assetItem > div:last-child { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; align-items: center; padding: 10px; }
.assetItem strong { font-size: 12px; }
.assetItem small { grid-column: 1; color: var(--muted); font-size: 10px; }
.assetItem .lightBtn { grid-column: 2; grid-row: 1 / span 2; text-decoration: none; }
.assetToolbar { display: flex; min-height: 40px; margin-bottom: 12px; align-items: center; justify-content: space-between; gap: 12px; }
.assetToolbar label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.assetItemBody strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assetExpiry { grid-column: 1; width: max-content; padding: 3px 6px; border-radius: 4px; font-size: 10px; }
.assetExpiry.active { background: rgba(98,222,244,.12); color: #62def4; }
.assetExpiry.soon { background: rgba(255,173,122,.14); color: #ffad7a; }
.assetExpiry.expired { background: rgba(255,108,122,.12); color: #ff7b88; }
.assetActions { grid-column: 2; grid-row: 1 / span 3; display: flex; align-items: center; gap: 6px; }
.assetActions .lightBtn { grid-column: auto; grid-row: auto; }
.assetLoadMore { display: block; min-width: 120px; margin: 16px auto 0; }

.balanceBand { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); }
.balanceBand > div { padding: 16px 18px; border-right: 1px solid var(--line); }
.balanceBand > div:last-child { border-right: 0; }
.balanceBand span { display: block; color: var(--muted); font-size: 11px; }
.balanceBand strong { display: block; margin-top: 5px; color: #62def4; font-size: 24px; }
.billingSection { margin-top: 22px; }
.creditActionBand { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(420px,1.15fr); gap: 1px; margin-top: 22px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--line); }
.creditActionPanel { min-width: 0; min-height: 196px; padding: 24px; background: var(--aurora-surface); }
.creditActionHead span { color: var(--aurora-cyan); font-size: 11px; font-weight: 700; }
.creditActionHead strong { display: block; margin-top: 5px; color: var(--aurora-text); font-size: 20px; }
.rechargeActionPanel { display: grid; grid-template-rows: auto 1fr auto; align-items: start; justify-items: stretch; text-align: left; }
.creditActionMeta { align-self: start; display: grid; gap: 3px; padding-block: 14px 20px; }
.creditActionMeta span { color: var(--ink); font-size: 13px; font-weight: 700; }
.creditActionMeta small { color: var(--muted); font-size: 11px; }
.rechargeHelpBtn { justify-self: start; min-height: 30px; padding-inline: 11px; font-size: 11px; }
.storeRechargeLink { justify-self: center; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.storeRechargeLink[disabled] { cursor: not-allowed; opacity: .55; }
.redemptionForm { display: grid; align-content: center; }
.redemptionForm .creditActionHead { margin-bottom: 18px; }
.redemptionForm > label { margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.redemptionInputRow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
.redemptionInputRow input { width: 100%; min-width: 0; height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--aurora-field); color: var(--ink); font: inherit; font-size: 14px; letter-spacing: 0; text-transform: uppercase; }
.redemptionInputRow input:focus { outline: none; border-color: rgba(90,216,237,.7); box-shadow: 0 0 0 3px rgba(90,216,237,.08); }
.redemptionStatus { min-height: 18px; margin-top: 9px; color: var(--muted); font-size: 11px; }
.redemptionStatus.success { color: #4ce39a; }
.redemptionStatus.error { color: #ff96a6; }
.transactionSection { max-width: 100%; }
.packageGrid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.packageItem { min-width: 0; min-height: 164px; display: grid; grid-template-rows: auto auto auto 1fr; gap: 8px; padding: 15px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.packageItem:hover { border-color: rgba(98,222,244,.42); background: rgba(255,255,255,.04); transform: translateY(-1px); }
.packageItem > span { color: var(--muted); font-size: 11px; }
.packageItem > strong { font-size: 25px; }
.packageItem > strong small { margin-left: 4px; color: var(--muted); font-size: 11px; }
.packageItem p { color: #ffd166; font-size: 13px; }
.packageItem > .sendBtn { width: 100%; align-self: end; }
.customRechargeForm { margin: 0; }
.customPackageItem { border-color: rgba(98,222,244,.3); background: rgba(98,222,244,.035); }
.customAmountField { min-width: 0; height: 34px; display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: center; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.025); }
.customAmountField > span { text-align: center; color: #ffd166; font-size: 13px; }
.customAmountField input { width: 100%; min-width: 0; height: 100%; padding: 0 7px; border: 0; border-left: 1px solid var(--line); outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; line-height: 1; }
.customAmountField input:focus { box-shadow: inset 0 0 0 1px rgba(98,222,244,.56); }
.customAmountField input::placeholder { color: var(--muted); font-weight: 500; }
.customPackageItem p { color: var(--muted); font-size: 10px; white-space: normal; }
.billingColumns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.ledgerList { display: grid; gap: 5px; margin-top: 10px; }
.ledgerList article { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 11px; border-bottom: 1px solid var(--line); }
.ledgerList article > div:last-child { text-align: right; }
.ledgerList strong, .ledgerList span, .ledgerList small, .ledgerList b { display: block; }
.ledgerList strong { font-size: 12px; }
.ledgerList span, .ledgerList small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.ledgerList b { color: #ff96a6; font-size: 12px; }
.ledgerList b.positive { color: #4ce39a; }

.v1Dialog { width: min(760px, calc(100vw - 30px)); max-height: calc(100dvh - 30px); padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #121a2a; color: var(--ink); }
.v1Dialog::backdrop { background: rgba(3,7,14,.72); backdrop-filter: blur(4px); }
.v1DialogShell { padding: 20px; overflow: auto; }
.v1DialogShell > header { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.v1DialogShell header span { color: #60e3fa; font-size: 10px; }
.v1DialogShell h2 { margin: 4px 0 0; font-size: 20px; }
.rechargeDialog { width: min(620px, calc(100vw - 24px)); }
.rechargeHelpDialog { width: min(520px, calc(100vw - 24px)); }
.rechargeHelpShell { display: grid; gap: 18px; }
.rechargeHelpSteps { display: grid; gap: 12px; margin: 0; padding-left: 24px; color: var(--ink); font-size: 13px; line-height: 1.7; }
.rechargeHelpSteps li::marker { color: #5ad8ed; font-weight: 700; }
.rechargeDialogShell { display: grid; gap: 20px; overflow: visible; }
.rechargePaymentBody { display: grid; grid-template-columns: 232px minmax(0,1fr); align-items: center; gap: 24px; min-width: 0; }
.rechargeQrFrame { width: 232px; aspect-ratio: 1; display: grid; place-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.rechargeQrImage { width: 100%; height: 100%; display: block; object-fit: contain; }
.rechargePaymentInfo { min-width: 0; display: grid; gap: 14px; }
.rechargeAmount { display: grid; gap: 4px; }
.rechargeAmount span, .rechargeCountdown span { color: var(--muted); font-size: 11px; }
.rechargeAmount strong { color: #ffd166; font-size: 28px; }
.rechargeCreditSummary { display: grid; gap: 7px; margin: 0; }
.rechargeCreditSummary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rechargeCreditSummary dt { color: var(--muted); font-size: 11px; }
.rechargeCreditSummary dd { margin: 0; font-size: 13px; font-weight: 700; }
.rechargePaymentStatus { min-height: 42px; display: flex; align-items: center; padding: 10px 12px; border-left: 3px solid #5ad8ed; background: rgba(90,216,237,.08); color: var(--ink); font-size: 12px; line-height: 1.45; }
.rechargeDialog[data-payment-status="succeeded"] .rechargePaymentStatus { border-left-color: #51d59a; background: rgba(81,213,154,.09); }
.rechargeDialog[data-payment-status="expired"] .rechargePaymentStatus,
.rechargeDialog[data-payment-status="failed"] .rechargePaymentStatus,
.rechargeDialog[data-payment-status="rejected"] .rechargePaymentStatus { border-left-color: #ff6f7f; background: rgba(255,111,127,.09); }
.rechargeCountdown { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rechargeCountdown strong { font-variant-numeric: tabular-nums; font-size: 14px; }
.rechargeDialogActions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.detailStatGrid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 17px 0; }
.detailStatGrid article { padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); }
.detailStatGrid span, .detailStatGrid strong { display: block; }
.detailStatGrid span { color: var(--muted); font-size: 10px; }
.detailStatGrid strong { margin-top: 5px; font-size: 14px; }
.taskDetailList { display: grid; grid-template-columns: 90px 1fr; margin: 0; border-top: 1px solid var(--line); }
.taskDetailList dt, .taskDetailList dd { margin: 0; padding: 9px; border-bottom: 1px solid var(--line); font-size: 11px; word-break: break-word; }
.taskDetailList dt { color: var(--muted); }
.eventTimeline { display: grid; gap: 0; margin-top: 16px; }
.eventTimeline > div { display: grid; grid-template-columns: 10px 135px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 34px; border-bottom: 1px solid var(--line); font-size: 10px; overflow-wrap: anywhere; }
.eventTimeline i { width: 7px; height: 7px; border-radius: 50%; background: #38d7ef; }
.eventTimeline span, .eventTimeline small { color: var(--muted); }

.adminGap { margin-top: 22px; }
.adminRedemptionTools { display: grid; gap: 10px; }
.adminStoreUrlForm { grid-template-columns: minmax(0,1fr) auto; }
.adminRedemptionGenerateForm { grid-template-columns: repeat(3,minmax(120px,1fr)) auto; }
.adminStoreUrlForm label, .adminRedemptionGenerateForm label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.adminStoreUrlForm input, .adminRedemptionGenerateForm input, .adminRedemptionGenerateForm select, .redemptionFilterForm input, .redemptionFilterForm select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); color: var(--ink); font: inherit; }
.generatedCodesResult { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin: 16px 0 0; padding: 14px; border: 1px solid rgba(90,216,237,.28); border-radius: 6px; background: rgba(90,216,237,.045); }
.generatedCodesResult.hidden { display: none; }
.generatedCodesResult .sectionTitle { grid-column: 1 / -1; }
.maintenanceStatusBand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.maintenanceStatusBand > div { min-width: 0; display: grid; gap: 4px; padding: 14px; border-right: 1px solid var(--line); }
.maintenanceStatusBand > div:last-child { border-right: 0; }
.maintenanceStatusBand span, .maintenanceStatusBand small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.maintenanceStatusBand strong { font-size: 17px; letter-spacing: 0; overflow-wrap: anywhere; }
.maintenanceStatusBand strong.ok { color: #4ce39a; }
.maintenanceStatusBand strong.bad { color: var(--danger); }
.maintenanceTable { border-top: 1px solid var(--line); }
.maintenanceTableRow { min-height: 42px; display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(100px, 1fr) minmax(100px, 1fr); align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 12px; }
.maintenanceTableRow span { color: var(--muted); overflow-wrap: anywhere; }
.maintenanceRunRow { grid-template-columns: minmax(150px, 1.2fr) minmax(160px, 1.4fr) minmax(100px, .8fr); }
.maintenanceActions { display: flex; justify-content: flex-end; padding-top: 14px; }
.generatedCodesResult textarea { width: 100%; min-width: 0; resize: vertical; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(4,9,18,.5); color: var(--ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }
.generatedCodesActions { display: grid; gap: 8px; align-self: end; }
.generatedCodesActions .lightBtn { width: 100%; }
.redemptionFilterForm { display: grid; grid-template-columns: minmax(180px,1fr) 150px auto; gap: 8px; margin-top: 10px; }
.redemptionCodeList { margin-top: 8px; }
.redemptionCodeRow { grid-template-columns: minmax(0,1fr) auto; }
.redemptionCodeRow span { overflow-wrap: anywhere; }
.serviceAdminGrid { display: grid; gap: 7px; margin-top: 10px; }
.serviceAdminGrid article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.serviceAdminGrid strong, .serviceAdminGrid span { display: block; }
.serviceAdminGrid span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.switchLabel input { position: absolute; opacity: 0; }
.switchLabel i { width: 38px; height: 22px; display: block; position: relative; border-radius: 99px; background: #39445a; transition: .2s; }
.switchLabel i::after { content: ""; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; border-radius: 50%; background: #fff; transition: .2s; }
.switchLabel input:checked + i { background: #f05e77; }
.switchLabel input:checked + i::after { transform: translateX(16px); }
.priceAdminGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.priceAdminGrid form { display: grid; grid-template-columns: 1fr 90px auto; gap: 7px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.priceAdminGrid label, .priceAdminGrid small { display: block; }
.priceAdminGrid label { font-size: 11px; }
.priceAdminGrid small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.bonusRuleGrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.bonusRuleGrid form { display: grid; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 6px; }
.bonusRuleGrid label { color: var(--muted); font-size: 11px; }
.bonusRuleGrid form > div { display: grid; grid-template-columns: minmax(0,1fr) 18px auto; align-items: center; gap: 6px; }
.bonusRuleGrid input { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.025); color: var(--ink); }
.bonusRuleGrid form > div > span { color: var(--muted); font-size: 11px; }
.integrityLine { margin-top: 16px; padding: 10px; border-radius: 6px; font-size: 11px; }
.integrityLine.ok { color: #4ce39a; background: rgba(57,217,138,.08); }
.integrityLine.bad { color: #ff8d9e; background: rgba(251,113,133,.08); }
.maintenanceMessage { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; margin: 20px 0; padding: 14px; border: 1px solid rgba(255,184,77,.24); border-radius: 6px; background: rgba(255,184,77,.07); }
.maintenanceMessage > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #ffb84d; color: #171006; font-style: normal; font-weight: 900; }
.maintenanceMessage strong { font-size: 13px; }
.maintenanceMessage p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.maintenanceConfirm { width: 100%; }
.supportCopy { margin: 20px 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); }
.supportCopy strong { font-size: 13px; }
.supportCopy p { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.supportActions { display: flex; flex-wrap: wrap; gap: 8px; }
.feedbackForm { display: grid; gap: 9px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.feedbackForm label { color: var(--ink); font-size: 13px; font-weight: 760; }
.feedbackForm textarea { width: 100%; min-height: 112px; max-height: 260px; resize: vertical; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); color: var(--ink); padding: 11px 12px; font: inherit; line-height: 1.55; }
.feedbackForm textarea:focus { outline: 2px solid color-mix(in srgb, var(--blue) 54%, transparent); outline-offset: 2px; }
.feedbackFormFooter { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feedbackFormFooter span { min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.feedbackFormFooter span.error { color: #ff8598; }
.feedbackFormFooter .sendBtn { flex: 0 0 auto; }
.feedbackCountBadge { min-width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 999px; background: #ff4d67; color: #fff; padding: 0 5px; font-size: 10px; font-weight: 800; line-height: 1; }
.feedbackCountBadge.hidden { display: none; }
#adminBtn { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#adminBtn.hidden { display: none; }
.adminFeedbackTab { display: inline-flex; align-items: center; gap: 6px; }
.feedbackAdminList .adminRow { align-items: start; }
.feedbackAdminContent { white-space: pre-wrap; overflow-wrap: anywhere; }
.feedbackAdminMeta { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.feedbackAdminState { font-weight: 760; }
.feedbackAdminState.pending { color: #ffb95f; }
.feedbackAdminState.resolved { color: #5bd3a2; }

.generationToolbar .regenerateBtn, .generationToolbar .taskDetailBtn { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--panelStrong); color: var(--ink); padding: 0 12px; font-size: 11px; }
.generationToolbar .regenerateBtn span, .generationToolbar .taskDetailBtn span { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 18px; border: 1px solid rgba(125,145,255,.24); border-radius: 5px; background: rgba(112,82,255,.10); color: #9eb5ff; font-size: 14px; font-weight: 800; line-height: 1; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.generationToolbar .taskDetailBtn span { border-color: rgba(212,95,255,.24); background: rgba(190,68,255,.09); color: #dda2ff; }
.generationToolbar .regenerateBtn:hover span { border-color: rgba(125,145,255,.5); background: rgba(112,82,255,.18); color: #dbe4ff; transform: rotate(-35deg); }
.generationToolbar .taskDetailBtn:hover span { border-color: rgba(212,95,255,.5); background: rgba(190,68,255,.16); color: #f3d8ff; transform: translateY(-1px); }

.agentStageTitle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.agentStageMarker {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-grid;
  place-items: center;
  opacity: 0;
  transform: translateY(4px) scale(.88);
  animation: agentStageEnter 450ms cubic-bezier(.2,.8,.2,1) forwards;
}
.agentStageMarker img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  animation: agentStageBreath 2.6s ease-in-out 450ms infinite;
}

@keyframes agentStageEnter {
  from { opacity: 0; transform: translateY(4px) scale(.88); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes agentStageBreath {
  0%, 100% { opacity: .9; filter: brightness(.96) drop-shadow(0 0 2px rgba(126,108,255,.14)); }
  50% { opacity: 1; filter: brightness(1.08) drop-shadow(0 0 7px rgba(126,108,255,.38)); }
}

@media (prefers-reduced-motion: reduce) {
  .agentStageMarker,
  .agentStageMarker img { animation: none; }
  .agentStageMarker { opacity: 1; transform: none; }
  .agentStageMarker img { opacity: 1; filter: none; }
}

/* Benchmark agent timeline. Scoped classes keep the active flow independent from legacy card rules. */
.agentTimeline {
  width: min(1040px, 100%);
  display: grid;
  gap: 30px;
  margin: 0 auto;
  padding: 20px 0 56px;
}
.wgAgentStage {
  width: 100%;
  display: grid;
  justify-items: start;
  gap: 10px;
  min-width: 0;
}
.wgStageTitle {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #08d7ff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.wgStageTitle .agentStageMarker {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}
.wgAnalysisStage, .wgQuestionStage, .wgThinkingStage, .wgAnswerStage { width: min(760px, calc(100% - 16px)); max-width: 760px; margin-inline: auto; }
.wgAnalysisCard {
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid rgba(119, 112, 244, .24);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(42, 37, 104, .58), rgba(21, 23, 42, .9));
  box-shadow: 0 18px 48px rgba(3, 5, 18, .24);
}
.wgAnalysisSpinner {
  width: 28px;
  height: 28px;
  display: block;
  border: 3px solid rgba(178, 91, 255, .2);
  border-top-color: #b35cff;
  border-right-color: #24d5ff;
  border-radius: 50%;
  animation: wgAgentSpin 1.2s linear infinite;
}
.wgAnalysisStage[data-agent-state="completed"] .wgAnalysisSpinner,
.wgAnalysisStage[data-agent-state="failed"] .wgAnalysisSpinner { animation: none; opacity: .55; }
.wgAnalysisCopy { display: grid; gap: 7px; min-width: 0; }
.wgAnalysisCopy strong { color: #b05cff; font-size: 18px; }
.wgAnalysisCopy em { color: #9a9cb3; font-size: 14px; font-style: normal; }
.wgElapsed { color: #888ba4; font-size: 13px; white-space: nowrap; }
.wgAgentRetryArea { display: flex; align-items: center; justify-content: center; min-width: 92px; }
.wgAgentRetry { min-width: 92px; min-height: 36px; padding: 0 16px; border: 1px solid rgba(98,222,244,.48); border-radius: 8px; background: linear-gradient(135deg, rgba(98,222,244,.18), rgba(179,92,255,.2)); color: #e8f8ff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.wgAgentRetry:hover:not(:disabled) { border-color: rgba(98,222,244,.9); background: linear-gradient(135deg, rgba(98,222,244,.28), rgba(179,92,255,.3)); transform: translateY(-1px); }
.wgAgentRetry:disabled { cursor: wait; opacity: .64; }
.wgThinkingStage .wgAgentRetryArea { width: 100%; padding: 0 14px 14px; }
.wgAnalysisStage[data-agent-state="failed"] .wgAgentRetryArea { grid-column: 3; grid-row: 1; }
.wgQuestionCard {
  width: 100%;
  max-height: min(650px, calc(100dvh - 250px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 12px;
  background: #202139;
  box-shadow: 0 20px 52px rgba(3, 5, 18, .28);
  animation: wgQuestionStageEnter .32s ease both;
}
.wgQuestionHead { display: grid; gap: 8px; }
.wgQuestionContext { display: grid; gap: 4px; min-width: 0; }
.wgQuestionIdentity, .wgQuestionPurpose { margin: 0; overflow-wrap: anywhere; }
.wgQuestionIdentity { color: #f2f1f8; font-size: 16px; line-height: 1.45; }
.wgQuestionIdentity strong { color: #f2f1f8; }
.wgQuestionPurpose { color: #9d9db3; font-size: 13px; line-height: 1.45; }
.wgQuestionNote { margin: 0; color: #f2f1f8; font-size: 16px; line-height: 1.5; }
.wgQuestionNote b { margin-right: 10px; color: #ff3e69; }
.wgQuestionProgress { color: #9d9db3; font-size: 12px; }
.wgQuestionScroll { min-height: 0; display: grid; grid-auto-rows: 100%; gap: 12px; overflow-y: auto; overscroll-behavior-y: contain; padding-right: 7px; scroll-snap-type: y mandatory; scrollbar-color: #5d6078 transparent; }
.wgQuestionScroll:focus-visible { outline: 2px solid rgba(8,215,255,.7); outline-offset: 3px; }
.wgQuestionPanel { min-height: 100%; display: grid; align-content: start; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.025); scroll-snap-align: start; }
.wgQuestionPanel.is-current { animation: wgQuestionPanelEnter .32s ease both; }
.wgQuestionTitle { display: flex; align-items: center; gap: 9px; min-width: 0; }
.wgQuestionTitle span { flex: 0 0 auto; padding: 5px 9px; border-radius: 6px; background: rgba(160, 80, 255, .2); color: #bd79ff; font-size: 12px; }
.wgQuestionTitle strong { min-width: 0; color: #e9e7f1; font-size: 16px; line-height: 1.4; }
.wgOptionList { display: grid; gap: 9px; }
.wgOptionCard {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: rgba(44, 46, 73, .72);
  color: #e8e7f0;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.wgOptionCard:hover { border-color: rgba(181, 93, 255, .7); transform: translateY(-1px); }
.wgOptionCard.is-selected { border-color: #bb68ff; background: rgba(99, 57, 167, .42); box-shadow: inset 0 0 0 1px rgba(201, 119, 255, .2); }
.wgOptionCard strong { font-size: 16px; }
.wgOptionCard small { color: #9d9db3; font-size: 13px; line-height: 1.45; }
.wgQuestionPanel.is-current .wgOptionCard { animation: wgQuestionChoiceEnter .28s ease var(--wg-option-delay, 0ms) both; }
.wgCustomAnswer { display: grid; gap: 6px; color: #aaaabd; font-size: 13px; }
.wgCustomAnswer textarea { min-height: 76px; resize: vertical; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #17192d; color: #f4f2fb; padding: 10px; }
.wgSupplementAnswer { display: grid; gap: 8px; color: #a4a5bb; font-size: 13px; }
.wgSupplementAnswer textarea { min-height: 170px; resize: vertical; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #17192d; color: #f4f2fb; padding: 12px; font: inherit; }
.wgQuestionActions { display: grid; grid-template-columns: 90px 90px minmax(0,1fr); gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.wgQuestionActions button { min-height: 42px; border: 0; border-radius: 9px; font-size: 14px; font-weight: 800; }
.wgQuestionCancel { background: #4b4e69; color: #deddea; }
.wgQuestionPrevious { background: #30324d; color: #d8d7e5; }
.wgQuestionNext, .wgQuestionSubmit, .wgQuestionSubmitted { background: linear-gradient(100deg, #2458d8, #ad3bc0); color: #fff; }
.wgQuestionSubmitted { grid-column: 1 / -1; opacity: .72; }
.wgQuestionStage[data-agent-state="submitted"] .wgQuestionCard { opacity: .76; }
.wgQuestionStage[data-agent-state="submitted"] .wgOptionCard { cursor: default; }
.wgStoredQuestionCard { max-height: none; grid-template-rows: auto auto; }
.wgStoredQuestionList { display: grid; gap: 12px; }
.wgStoredQuestionList .wgQuestionPanel { min-height: 0; }
.wgStoredQuestionList .wgOptionCard { min-height: 0; }
.wgThinkingCard { width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #1d1f38; }
.wgThinkingHead { width: 100%; min-height: 52px; display: grid; grid-template-columns: 24px minmax(0,1fr) 20px; align-items: center; gap: 9px; padding: 0 18px; border: 0; background: transparent; color: #dcdbe7; text-align: left; }
.wgThinkingStage[data-agent-state="active"] .wgThinkingIcon { animation: wgThinkingHeadPulse 1.8s ease-in-out infinite; }
.wgThinkingIcon { color: #b5b6c9; font-size: 26px; }
.wgThinkingChevron { color: #8c8ea9; font-size: 22px; transition: transform .2s ease; }
.wgThinkingBody { display: grid; gap: 7px; padding: 0 18px 16px; }
.wgThinkingStage.is-collapsed .wgThinkingBody { display: none; }
.wgThinkingStage.is-collapsed .wgThinkingChevron { transform: rotate(-90deg); }
.wgThinkingFact { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.06); }
.wgThinkingFact span { color: #999bb0; font-size: 13px; }
.wgThinkingFact strong { color: #e3e2eb; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.wgThinkingLine { min-height: 20px; display: grid; grid-template-columns: 8px minmax(0,1fr); gap: 10px; margin: 0; color: #aaaabd; font-size: 13px; line-height: 1.5; }
.wgThinkingLine > span { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: #72748e; }
.wgThinkingLine.is-active > span { background: #b35cff; box-shadow: 0 0 10px rgba(179,92,255,.7); animation: wgThinkingPointPulse 1.25s ease-in-out infinite; }
.wgThinkingLine.is-completed > span { background: #4dd6a0; box-shadow: 0 0 7px rgba(77,214,160,.38); }
.wgThinkingLine em { font-style: normal; }
.wgThinkingLine b { margin-right: 5px; color: #d8d7e4; }
.wgThinkingText { overflow-wrap: anywhere; }
.wgThinkingCursor { width: 2px; height: 1em; display: inline-block; margin-left: 3px; border-radius: 1px; background: currentColor; vertical-align: -2px; animation: wgThinkingCursorBlink .72s steps(1,end) infinite; }
.wgAnswerCard { width: 100%; padding: 18px 20px; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: #202139; color: #e9e7f1; font-size: 16px; line-height: 1.6; box-shadow: 0 14px 36px rgba(3, 5, 18, .2); }
.wgSummaryCard { display: grid; gap: 16px; }
.wgAnswerIntro { margin: 0; color: #f0eff8; }
.wgAnswerLead { font-size: 18px; }
.wgSummaryCard dl { display: grid; gap: 8px; margin: 0; }
.wgSummaryCard dl div { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 12px; }
.wgSummaryCard dt { color: #a2a4ba; }
.wgSummaryCard dd { margin: 0; color: #f0eff6; }
.wgCompactInfoCard { border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: #1b1d32; letter-spacing: 0; box-shadow: 0 8px 24px rgba(3,5,18,.16); }
.wgSubmittedSummaryCard { gap: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.6; }
.wgSubmittedSummaryCard .wgAnswerLead { font-size: 14px; font-weight: 650; }
.wgSubmittedSummaryCard dl { gap: 6px; }
.wgSubmittedSummaryCard dl div { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 10px; }
.wgSubmittedSummaryCard dt { font-size: 13px; }
.wgSubmittedSummaryCard dd { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.wgRequirementSummary { min-width: 0; }
.wgRequirementCard { padding: 14px 16px; font-size: 13px; line-height: 1.7; font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; }
.wgThinkingCard.wgCompactInfoCard .wgThinkingHead { min-height: 44px; grid-template-columns: 18px minmax(0,1fr) 16px; gap: 8px; padding: 0 14px; font-size: 13px; }
.wgThinkingCard.wgCompactInfoCard .wgThinkingIcon { font-size: 18px; }
.wgThinkingCard.wgCompactInfoCard .wgThinkingChevron { font-size: 16px; }
.wgThinkingCard.wgCompactInfoCard .wgThinkingBody { gap: 4px; padding: 0 14px 14px; }
.wgThinkingCard.wgCompactInfoCard .wgThinkingLine { font-size: 13px; line-height: 1.6; }
.wgAnswerNext { margin: 6px 0 0; color: #f1eff8; }
.wgResultStage { width: min(1040px, calc(100% - 16px)); margin: 0 auto 72px; }
.wgResultSurface { width: 100%; }
.wgResultStage .wgStageTitle { margin-bottom: 18px; }
.wgResultGrid { width: 100%; display: grid; gap: 16px; }
.wgGenerationStage { display: grid; gap: 14px; padding: 20px; border: 1px solid rgba(255,255,255,.06); border-radius: 18px; background: #202139; }
.wgGenerationHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wgGenerationFacts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #a8a9bc; font-size: 13px; }
.wgGenerationFacts strong { color: #f0eef8; font-size: 16px; }
.wgGenerationFacts span { padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.06); }
.wgGenerationFacts [data-status="completed"] { color: #5fe2b0; }
.wgGenerationFacts [data-status="failed"] { color: #ff8298; }
.wgGenerationGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.wgGenerationStage[data-agent-state="completed"] .wgGenerationGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wgProcessingCard { min-height: 190px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #0e1020; color: #a8a9bc; }
.wgProcessingInner { width: min(170px, calc(100% - 24px)); display: grid; place-items: center; gap: 9px; text-align: center; }
.wgLogoTrace { width: 54px; height: 54px; display: block; object-fit: contain; }
.wgGenerationStatus { display: flex; align-items: center; gap: 9px; min-height: 34px; color: #08d7ff; }
.wgGenerationStatus em { color: #999bb0; font-size: 13px; font-style: normal; }

@keyframes wgAgentSpin { to { transform: rotate(360deg); } }
@keyframes wgQuestionStageEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wgQuestionPanelEnter { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wgQuestionChoiceEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wgThinkingHeadPulse { 0%, 100% { opacity: .58; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes wgThinkingPointPulse { 0%, 100% { opacity: .62; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.32); } }
@keyframes wgThinkingCursorBlink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wgAnalysisSpinner,
  .wgQuestionCard,
  .wgQuestionPanel.is-current,
  .wgQuestionPanel.is-current .wgOptionCard,
  .wgThinkingStage[data-agent-state="active"] .wgThinkingIcon,
  .wgThinkingLine.is-active > span,
  .wgThinkingCursor { animation: none; }
}

@media (max-width: 1180px) {
  .workspace, .workspace.v1PanelMode { grid-template-columns: 64px minmax(0,1fr); }
  .sideRail { display: none; }
  .chatStage, .v1PanelStage { grid-column: 2; }
  .videoWorkbench { grid-template-columns: 1fr; }
  .videoForm { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .videoResult { grid-template-columns: minmax(210px,.55fr) 1fr; }
}

@media (max-width: 760px) {
  .agentStageMarker { width: 22px; height: 22px; flex-basis: 22px; }
  .appShell { padding: 8px; }
  .topbar { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-bottom: 8px; }
  .brand { min-width: 0; }
  .brand .brandScript { font-size: 25px; }
  .brandWordmark { overflow: hidden; text-overflow: ellipsis; }
  .accountCluster { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .userMenuWrap { margin-left: auto; }
  .statusPill { display: none; }
  .workspace, .workspace.v1PanelMode { height: calc(100dvh - 104px); min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) 66px; gap: 7px; }
  .primaryRail { grid-row: 2; grid-column: 1; flex-direction: row; justify-content: space-around; padding: 5px; overflow-x: auto; }
  .primaryNav { width: 58px; height: 52px; flex-basis: 58px; }
  .chatStage, .v1PanelStage { grid-column: 1; grid-row: 1; min-height: 0; }
  .chatStage { min-height: 0; }
  .v1PanelHead { padding: 14px; }
  .v1PanelHead h1 { font-size: 18px; }
  .v1PanelHead p { max-width: 72vw; overflow-wrap: anywhere; }
  .v1PanelContent { padding: 12px; }
  .videoWorkbench, .videoResult, .billingColumns { grid-template-columns: 1fr; }
  .videoOptions { grid-template-columns: 1fr 1fr; }
  .videoSubmitRow .sendBtn { width: 100%; min-width: 0; }
  .videoCanvasWrap { max-height: 56vh; }
  .taskRow { grid-template-columns: 34px minmax(0,1fr); }
  .taskCredits { grid-column: 2; text-align: left; grid-auto-flow: column; justify-content: start; gap: 5px; align-items: baseline; }
  .taskActions { grid-column: 1 / -1; justify-content: flex-start; }
  .balanceBand { grid-template-columns: 1fr 1fr; }
  .balanceBand > div:nth-child(2) { border-right: 0; }
  .balanceBand > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .packageGrid, .priceAdminGrid, .bonusRuleGrid, .creditActionBand { grid-template-columns: 1fr; }
  .creditActionPanel { min-height: 0; padding: 20px; }
  .redemptionInputRow { grid-template-columns: 1fr; }
  .redemptionInputRow .sendBtn, .storeRechargeLink { width: 100%; }
  .adminStoreUrlForm, .adminRedemptionGenerateForm, .redemptionFilterForm, .generatedCodesResult { grid-template-columns: 1fr; }
  .maintenanceStatusBand { grid-template-columns: 1fr 1fr; }
  .maintenanceStatusBand > div:nth-child(2) { border-right: 0; }
  .maintenanceStatusBand > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .maintenanceTableRow, .maintenanceRunRow { grid-template-columns: 1fr; gap: 4px; }
  .generatedCodesResult .sectionTitle { grid-column: 1; }
  .redemptionCodeRow { grid-template-columns: 1fr; }
  .customRechargeForm, .customAmountField { width: 100%; }
  .rechargeDialogShell { gap: 14px; padding: 16px; }
  .rechargePaymentBody { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .rechargeQrFrame { width: min(218px, 64vw); }
  .rechargePaymentInfo { width: 100%; }
  .rechargeAmount { text-align: center; }
  .rechargeDialogActions > button { flex: 1 1 0; }
  .detailStatGrid { grid-template-columns: 1fr 1fr; }
  .eventTimeline > div { grid-template-columns: 10px 1fr auto; }
  .eventTimeline span { display: none; }
  .priceAdminGrid form { grid-template-columns: 1fr 74px auto; }
}

/* Reference workspace layout: wide tool rail + conversation rail + open canvas. */
body { background: var(--aurora-page) !important; overflow: hidden !important; }
.appShell { width: 100% !important; height: 100dvh !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; }
.topbar {
  width: 100% !important;
  max-width: none !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  border-bottom: 1px solid var(--aurora-border) !important;
  background: var(--home-topbar-background, var(--aurora-topbar)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.brand { font-size: 17px !important; }
.brand img { width: 34px !important; height: 34px !important; }
.brandWordmark { display: inline-flex; align-items: baseline; gap: 0; min-width: 0; white-space: nowrap; }
.brandScript {
  display: inline-block;
  color: var(--aurora-cyan);
  font-family: "Snell Roundhand", "Segoe Script", "Kaiti SC", STKaiti, cursive;
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
}
.accountCluster { gap: 9px !important; }
.accountCluster > .creditBalanceBtn,
.accountCluster > .topRechargeBtn,
.accountCluster > .serviceStatusBtn,
.accountCluster .userMenuBtn {
  min-height: 38px;
  border: 1px solid var(--aurora-border);
  border-radius: 999px;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 4px 14px rgba(0,0,0,.12);
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.accountCluster > .creditBalanceBtn { padding-inline: 13px; background: var(--aurora-surface-raised); }
.accountCluster > .topRechargeBtn { padding-inline: 16px; box-shadow: inset 0 1px rgba(255,255,255,.24), 0 5px 16px rgba(42,205,231,.16); }
.accountCluster > .serviceStatusBtn { padding-inline: 13px; background: var(--aurora-surface-raised); }
.accountCluster .userMenuBtn { min-height: 38px; padding: 0 13px 0 6px; background: var(--aurora-surface-raised); }
.accountCluster > .creditBalanceBtn:hover,
.accountCluster > .serviceStatusBtn:hover,
.accountCluster .userMenuBtn:hover { border-color: color-mix(in srgb, var(--aurora-cyan) 38%, var(--aurora-border)); background: var(--aurora-field); }
.accountCluster > .topRechargeBtn:hover { border-color: var(--aurora-cyan); background: color-mix(in srgb, var(--aurora-cyan) 82%, white); box-shadow: inset 0 1px rgba(255,255,255,.28), 0 7px 20px color-mix(in srgb, var(--aurora-cyan) 24%, transparent); }
.accountCluster > button:active,
.accountCluster .userMenuBtn:active { transform: translateY(1px); }
.accountCluster > button:focus-visible,
.accountCluster .userMenuBtn:focus-visible { outline: 2px solid color-mix(in srgb, var(--aurora-cyan) 55%, transparent); outline-offset: 2px; }
.workspace {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  height: calc(100dvh - 64px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 232px 232px minmax(0,1fr) !important;
  gap: 0 !important;
}
.workspace.v1PanelMode { grid-template-columns: 232px minmax(0,1fr) !important; }
.workspace.v1PanelMode .sideRail, .workspace.v1PanelMode .chatStage { display: none !important; }
.primaryRail {
  width: 232px !important;
  min-height: 0 !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 18px 12px 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--aurora-border) !important;
  border-radius: 0 !important;
  background: var(--home-primary-rail-background, var(--aurora-rail)) !important;
  box-shadow: inset -1px 0 color-mix(in srgb, var(--aurora-cyan) 8%, transparent) !important;
}
.primaryNavSection { display: block; margin: 16px 10px 6px; color: #65748a; font-size: 10px; font-weight: 750; letter-spacing: 0; }
.primaryNavSection:first-child { margin-top: 0; }
.primaryNav {
  position: relative;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0,1fr) !important;
  align-items: center !important;
  justify-items: start;
  gap: 10px !important;
  padding: 0 10px !important;
  border: 1px solid transparent;
  border-radius: 16px !important;
  background: transparent;
  color: var(--aurora-muted) !important;
  text-align: left !important;
  box-shadow: none;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.primaryNav::before { content: ""; position: absolute; left: 5px; top: 13px; bottom: 13px; width: 3px; border-radius: 999px; background: transparent; }
.primaryNav span { width: 32px !important; height: 32px !important; justify-self: center; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.045) !important; color: #93a9be !important; box-shadow: inset 0 1px rgba(255,255,255,.035); }
.primaryNav strong { display: block; min-width: 0; overflow: hidden; color: #b7c3d3; font-size: 13px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.primaryNav em { padding: 2px 5px; border-radius: 3px; background: #ff5d3b; color: #fff; font-size: 9px; font-style: normal; }
.primaryNav em { display: none; }
.primaryNav:hover:not(.active) { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.055); box-shadow: inset 0 1px rgba(255,255,255,.035); transform: translateY(-1px); }
.primaryNav:hover:not(.active) strong { color: #eef4fb; }
[data-theme="light"] .primaryNav:hover:not(.active) { border-color: transparent; background: color-mix(in srgb, var(--aurora-cyan) 6%, transparent); box-shadow: none; }
[data-theme="light"] .primaryNav:hover:not(.active) strong { color: var(--aurora-text); }
.primaryNav.active { border-color: color-mix(in srgb, var(--aurora-cyan) 38%, transparent) !important; background: var(--home-primary-nav-active-background, var(--aurora-surface-raised)) !important; color: var(--aurora-text) !important; box-shadow: inset 0 1px color-mix(in srgb, var(--aurora-cyan) 10%, transparent), 0 7px 20px rgba(0,0,0,.12); }
.primaryNav.active::before { background: #55d7ed; box-shadow: 0 0 10px rgba(85,215,237,.42); }
.primaryNav.active span { border-color: color-mix(in srgb, var(--aurora-cyan) 36%, transparent); background: color-mix(in srgb, var(--aurora-cyan) 12%, transparent) !important; color: var(--aurora-cyan) !important; }
.primaryNav.active strong { color: var(--aurora-text); }
.primaryNav .navGlyph {
  width: 22px;
  height: 22px;
  justify-self: center;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #91a7bd;
  opacity: .92;
}
.primaryNav.active .navGlyph { color: #74e5f7; opacity: 1; }
.primaryRailFoot { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.primaryRailFoot button { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 11px; border: 0; border-radius: 8px; background: rgba(255,255,255,.025); color: #9babc0; }
.primaryRailFoot .navGlyph { width: 22px; height: 22px; flex: 0 0 22px; color: #b59cff; }
.primaryRailFoot .helpGlyph { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.primaryRailFoot strong { font-size: 12px; }

.sideRail {
  display: block !important;
  width: 232px !important;
  min-height: 0 !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--aurora-border) !important;
  border-radius: 0 !important;
  background: var(--home-side-rail-background, var(--aurora-history)) !important;
  box-shadow: none !important;
  overflow-y: auto !important;
}
.historyHeading { display: flex; align-items: center; justify-content: space-between; padding: 17px 14px 10px; }
.historyHeading strong { font-size: 16px; }
.historyHeading strong::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 4px; border-radius: 50%; background: #cf40ff; box-shadow: 0 0 9px #cf40ff; }
.historyHeading button { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #aeb8c9; }
.historyToggleIcon { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.historyExpandBtn { position: absolute; top: 12px; left: 244px; z-index: 35; width: 32px; height: 32px; display: none; place-items: center; padding: 0; border: 1px solid var(--aurora-border); border-radius: 50%; background: var(--aurora-surface-raised); color: var(--aurora-muted); box-shadow: 0 6px 18px rgba(3,5,18,.2); transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease; }
.workspace.historyCollapsed:not(.v1PanelMode) .historyExpandBtn { display: inline-grid; }
.historyHeading button:hover, .historyExpandBtn:hover { border-color: color-mix(in srgb, var(--aurora-cyan) 48%, var(--aurora-border)); background: var(--aurora-field); color: var(--aurora-cyan); }
.historyHeading button:active, .historyExpandBtn:active { transform: translateY(1px); }
.historyHeading button:focus-visible, .historyExpandBtn:focus-visible { outline: 2px solid color-mix(in srgb, var(--aurora-cyan) 58%, transparent); outline-offset: 2px; }
.newChatBtn {
  width: 100% !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-top: 1px solid var(--aurora-border) !important;
  border-bottom: 1px solid var(--aurora-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--aurora-text) !important;
  font-size: 12px !important;
  text-align: left !important;
}
.newChatBtn kbd { margin-left: auto; padding: 3px 5px; border: 0; border-radius: 3px; background: #3a3e4f; color: #aeb5c2; font: 10px system-ui; }
.newChatBtn::before { content: none; display: none; }
.newChatIcon { display: inline-grid; width: 18px; height: 18px; place-items: center; flex: 0 0 18px; color: #b9c1d0; font-size: 17px; font-weight: 650; line-height: 1; }
.sideBlock { margin-top: 10px !important; padding: 0 10px; }
.sideTitle { padding: 0 4px 4px !important; color: var(--aurora-muted) !important; font-size: 10px !important; }
.chatList { gap: 2px !important; }
.chatItem { min-height: 44px; border-radius: 5px !important; background: transparent !important; }
.chatItem.active { background: var(--home-chat-item-active-background, var(--aurora-surface-raised)) !important; box-shadow: inset 2px 0 var(--aurora-purple) !important; }
.chatDelete { width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; font-size: 0; line-height: 1; }
.chatDelete svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.chatDelete:hover { --chat-action-hover-color: #ff8b9b; --chat-action-hover-background: rgba(255,95,119,.12); }
.chatDelete:focus-visible { outline: 2px solid rgba(255,95,119,.58); outline-offset: 2px; }
.sideBlock.compact, .sideFooter { display: none !important; }

.chatStage {
  position: relative !important;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--home-chat-stage-background, var(--aurora-page)) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
}
.chatStage::before { content: none; display: none; filter: none; }
.chatScroll { height: 100% !important; padding: 34px !important; background: transparent !important; }
.agentWelcome {
  position: absolute !important;
  left: 50% !important;
  top: 40% !important;
  bottom: auto;
  z-index: 4 !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: translate(-50%,-50%) !important;
}
.welcomeBrand { display: flex; align-items: center; gap: 10px; color: var(--aurora-text); }
.welcomeBrand img { width: 50px; height: 50px; }
.welcomeBrand strong { font-size: 32px !important; letter-spacing: 0 !important; }
.welcomeBrand strong::before { content: none; display: none; text-shadow: none; }
.ecomComposerDock { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 50 !important; padding: 16px 6vw 24px !important; display: flex !important; justify-content: center !important; background: linear-gradient(180deg, transparent, var(--aurora-page) 22%); }
.ecomComposerShell {
  width: min(960px,100%) !important;
  max-width: 960px !important;
  min-height: 170px !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--home-composer-border, var(--aurora-purple)) !important;
  border-right-color: var(--home-composer-border-right, var(--aurora-coral)) !important;
  border-radius: 16px !important;
  background: var(--home-composer-background, var(--aurora-surface)) !important;
  box-shadow: var(--home-composer-shadow, 0 25px 80px color-mix(in srgb, var(--aurora-purple) 22%, transparent), 0 0 34px var(--aurora-glow)) !important;
  overflow: visible !important;
}
@media (prefers-reduced-motion: reduce) {
  .ecomComposerShell::before, .ecomComposerShell::after { animation: none; }
  .ecomComposerShell::after { display: none; }
}
.ecomComposerHeader { padding: 8px 16px 0 !important; }
.ecomComposerInput { position: relative !important; min-height: 163px !important; padding: 0 18px 12px !important; }
.ecomPrimaryFields { min-height: 96px !important; padding: 10px 0 44px !important; }
.ecomBriefField textarea { min-height: 72px !important; padding: 6px !important; color: var(--aurora-text) !important; font-size: 14px !important; }
.ecomBriefField textarea::placeholder { color: var(--aurora-muted) !important; }
.ecomComposerBar { position: absolute !important; left: 18px !important; right: 18px !important; bottom: 12px !important; width: auto; align-items: flex-end !important; justify-content: space-between; }
.ecomComposerPlus::before, .ecomComposerPlus::after { content: none !important; display: none !important; }
.ecomSendBtn { position: relative !important; height: 38px !important; min-height: 38px !important; display: grid !important; place-items: center !important; margin-left: auto; border: 1px solid rgba(255,255,255,.18); background: var(--home-send-background, var(--aurora-purple)) !important; box-shadow: inset 0 1px rgba(255,255,255,.24), 0 7px 20px color-mix(in srgb, var(--aurora-purple) 32%, transparent); color: #fff !important; font-weight: 720; line-height: 1 !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.ecomSendBtn:not([aria-busy="true"]) { width: 38px !important; min-width: 38px !important; flex: 0 0 38px !important; padding: 0 !important; border-radius: 50% !important; font-size: 21px !important; }
.ecomSendBtn::before, .ecomSendBtn::after { content: none !important; display: none !important; }
.ecomSendBtn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); box-shadow: inset 0 1px rgba(255,255,255,.3), 0 9px 24px rgba(119,54,255,.36); }
.ecomSendBtn:active:not(:disabled) { transform: translateY(1px); }
.ecomSendBtn:focus-visible { outline: 2px solid rgba(199,120,255,.72); outline-offset: 3px; }
.ecomSendBtn[aria-busy="true"] { width: auto; min-width: 72px; flex-basis: auto; padding: 0 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.ecomSendBtn:disabled { opacity: .62; cursor: not-allowed; }
.ecomChoicePill { border-color: var(--aurora-border) !important; background: var(--aurora-field) !important; }
.generationToolbar { border-radius: 8px !important; }
.v1PanelStage { border: 0 !important; border-radius: 0 !important; background: var(--aurora-page) !important; }
.workspace.historyCollapsed { grid-template-columns: 232px 0 minmax(0,1fr) !important; }
.workspace.v1PanelMode.historyCollapsed { grid-template-columns: 232px minmax(0,1fr) !important; }
.workspace.historyCollapsed .sideRail { width: 0 !important; padding: 0 !important; overflow: hidden !important; border-right: 0 !important; }

@media (max-width: 1180px) and (min-width: 761px) {
  .workspace, .workspace.v1PanelMode { grid-template-columns: 76px minmax(0,1fr) !important; }
  .primaryRail { width: 76px !important; padding: 14px 8px !important; align-items: center !important; }
  .primaryNavSection, .primaryNav strong, .primaryNav em, .primaryRailFoot strong { display: none !important; }
  .primaryNav { width: 54px !important; grid-template-columns: 1fr !important; padding: 0 !important; place-items: center !important; }
  .primaryRailFoot button { justify-content: center; }
  .sideRail { display: none !important; }
  .workspace.historyCollapsed:not(.v1PanelMode) .historyExpandBtn { display: none; }
  .chatStage, .v1PanelStage { grid-column: 2 !important; }
  .ecomComposerDock { padding: 0 4vw !important; }
}

@media (max-width: 760px) {
  body { overflow: hidden !important; }
  .topbar { height: 94px !important; min-height: 94px !important; padding: 8px 12px !important; }
  .workspace, .workspace.v1PanelMode { height: calc(100dvh - 94px) !important; grid-template-columns: 1fr !important; grid-template-rows: minmax(0,1fr) 64px !important; }
  .primaryRail { width: 100% !important; grid-row: 2 !important; grid-column: 1 !important; flex-direction: row !important; align-items: center !important; justify-content: space-around !important; padding: 5px !important; background: var(--home-primary-rail-background, var(--aurora-rail)) !important; }
  .primaryNavSection, .primaryNav strong, .primaryNav em, .primaryRailFoot strong { display: none !important; }
  .primaryNav { width: 54px !important; height: 50px !important; min-height: 50px !important; flex-basis: 54px !important; grid-template-columns: 1fr !important; padding: 0 !important; place-items: center !important; }
  .primaryRailFoot { display: block; flex: 0 0 54px; margin-top: 0; padding-top: 0; border-top: 0; }
  .primaryRailFoot button { width: 54px; height: 50px; min-height: 50px; justify-content: center; padding: 0; }
  .sideRail { display: none !important; }
  .workspace.historyCollapsed:not(.v1PanelMode) .historyExpandBtn { display: none; }
  .chatStage, .v1PanelStage { grid-column: 1 !important; grid-row: 1 !important; min-height: 0 !important; }
  .chatScroll { padding: 18px 12px 24px !important; }
  .agentWelcome { top: min(34%, calc(100% - 270px)) !important; bottom: auto; }
  .welcomeBrand img { width: 34px; height: 34px; }
  .welcomeBrand strong { font-size: 22px !important; }
  .ecomComposerDock { bottom: auto !important; padding: 10px !important; margin: 0 !important; }
  .ecomComposerShell { min-height: 220px !important; border-radius: 12px !important; }
  .ecomComposerInput { padding: 0 10px 10px !important; }
  .ecomComposerBar { left: 10px !important; right: 10px !important; }
}

@media (max-width: 760px) {
  .agentTimeline { gap: 24px; padding: 12px 0 36px; }
  .wgAgentStage { gap: 10px; }
  .wgStageTitle { min-height: 28px; font-size: 18px; }
  .wgStageTitle .agentStageMarker { width: 26px; height: 26px; flex-basis: 26px; }
  .wgAnalysisStage, .wgQuestionStage, .wgThinkingStage, .wgAnswerStage, .wgResultStage { max-width: none; width: 100%; }
  .wgAnalysisCard { grid-template-columns: 30px minmax(0,1fr); gap: 10px; min-height: 104px; padding: 18px 16px; }
  .wgAnalysisCard .wgAgentRetryArea { grid-column: 1 / -1; justify-content: center; }
  .wgAnalysisCard .wgElapsed { grid-column: 2; }
  .wgQuestionCard { max-height: min(580px, calc(100dvh - 246px)); padding: 14px; border-radius: 14px; }
  .wgQuestionIdentity { font-size: 15px; }
  .wgQuestionNote { font-size: 15px; }
  .wgQuestionTitle strong, .wgOptionCard strong { font-size: 14px; }
  .wgOptionCard { min-height: 66px; padding: 11px 12px; }
  .wgOptionCard small { font-size: 12px; }
  .wgQuestionActions { grid-template-columns: 78px 78px minmax(0,1fr); gap: 7px; }
  .wgAnswerCard { padding: 16px 14px; font-size: 16px; }
  .wgAnswerLead { font-size: 17px; }
  .wgSummaryCard dl div { grid-template-columns: 78px minmax(0,1fr); gap: 8px; }
  .wgSubmittedSummaryCard, .wgRequirementCard { padding: 12px 14px; font-size: 13px; }
  .wgThinkingCard.wgCompactInfoCard .wgThinkingHead { padding-inline: 14px; }
  .wgThinkingCard.wgCompactInfoCard .wgThinkingBody { padding: 0 14px 12px; }
  .wgSubmittedSummaryCard dl div,
  .wgThinkingFact { grid-template-columns: minmax(0,1fr); gap: 3px; }
  .wgGenerationStage { padding: 14px; border-radius: 14px; }
  .wgGenerationGrid,
  .wgGenerationStage[data-agent-state="completed"] .wgGenerationGrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .wgProcessingCard { min-height: 150px; }
}

.legacyChatHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 4px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--aurora-border);
  color: var(--aurora-muted);
  font-size: 10px;
}
.legacyChatHeading span { color: #b688ff; }
.legacyChatItem { opacity: .76; }
.chatLoadMore {
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  border: 1px dashed var(--aurora-border);
  border-radius: 5px;
  background: transparent;
  color: var(--aurora-muted);
  font-size: 11px;
}
.messageLoadMore {
  width: fit-content;
  min-height: 34px;
  justify-self: center;
  padding: 0 14px;
  border: 1px solid var(--aurora-border);
  border-radius: 6px;
  background: var(--aurora-surface);
  color: var(--aurora-muted);
  font-size: 11px;
}
.chatLoadMore:hover, .messageLoadMore:hover { color: var(--aurora-text); border-color: color-mix(in srgb, var(--aurora-purple) 65%, transparent); }

/* Aurora theme layer. Structural rules above stay unchanged; these selectors only map color. */
[data-theme] {
  --ink: var(--aurora-text);
  --muted: var(--aurora-muted);
  --console-text: var(--aurora-text);
  --console-muted: var(--aurora-muted);
}

[data-theme] .v1PanelContent { color: var(--aurora-text); }

[data-theme] .brand,
[data-theme] .historyHeading,
[data-theme] .welcomeBrand,
[data-theme] .v1PanelHead h1,
[data-theme] .v1Dialog,
[data-theme] .userMenu,
[data-theme] .modalCard,
[data-theme] .adminShell { color: var(--aurora-text); }

[data-theme] .accountCluster > .creditBalanceBtn,
[data-theme] .accountCluster > .serviceStatusBtn,
[data-theme] .accountCluster .userMenuBtn,
[data-theme] .themeToggle,
[data-theme] .userMenu,
[data-theme] .ecomComposerMenu,
[data-theme] .ecomChoicePopover {
  border-color: var(--aurora-border);
  background: var(--aurora-surface-raised);
  color: var(--aurora-text);
}

[data-theme] .accountCluster > .topRechargeBtn {
  border-color: var(--aurora-cyan);
  background: var(--home-recharge-background, var(--aurora-cyan));
  color: var(--home-recharge-color, #04161c);
}

[data-theme] .statusPill {
  border-color: color-mix(in srgb, var(--aurora-cyan) 28%, transparent);
  background: color-mix(in srgb, var(--aurora-cyan) 12%, transparent);
  color: var(--aurora-cyan);
}

[data-theme] .primaryNavSection,
[data-theme] .sideTitle,
[data-theme] .newChatIcon,
[data-theme] .legacyChatHeading,
[data-theme] .messageLoadMore { color: var(--aurora-muted); }

[data-theme] .primaryNav {
  border-color: transparent;
  background: transparent;
}
[data-theme] .primaryNav strong,
[data-theme] .primaryNav .navGlyph { color: var(--aurora-muted); }
[data-theme] .primaryNav:hover:not(.active) {
  border-color: transparent;
  background: color-mix(in srgb, var(--aurora-cyan) 7%, transparent);
  box-shadow: none;
}
[data-theme] .primaryNav:hover:not(.active) strong { color: var(--aurora-text); }
[data-theme] .primaryNav.active strong,
[data-theme] .primaryNav.active .navGlyph { color: var(--aurora-text); }
[data-theme] .primaryNav.active::before { background: var(--aurora-cyan); box-shadow: 0 0 10px color-mix(in srgb, var(--aurora-cyan) 44%, transparent); }
[data-theme] .primaryNav.active .navGlyph { color: var(--aurora-cyan); }
[data-theme] .primaryRailFoot { border-color: var(--aurora-border); }
[data-theme] .primaryRailFoot button { background: color-mix(in srgb, var(--aurora-surface) 50%, transparent); color: var(--aurora-muted); }
[data-theme] .primaryRailFoot .navGlyph { color: var(--aurora-purple); }
[data-theme] .feedbackForm { border-color: var(--aurora-border); }
[data-theme] .feedbackForm textarea { border-color: var(--aurora-border); background: var(--aurora-field); color: var(--aurora-text); }

[data-theme] .historyHeading strong::after { background: var(--aurora-coral); box-shadow: 0 0 9px color-mix(in srgb, var(--aurora-coral) 58%, transparent); }
[data-theme] .historyHeading button { background: var(--aurora-field); color: var(--aurora-muted); }
[data-theme] .newChatBtn kbd { background: var(--aurora-field); color: var(--aurora-muted); }
[data-theme] .chatItem { color: var(--aurora-text); }
[data-theme] .chatItem:hover { background: color-mix(in srgb, var(--aurora-cyan) 6%, transparent); }

[data-theme] .announcementItem {
  border-color: color-mix(in srgb, var(--aurora-coral) 42%, var(--aurora-border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--aurora-coral) 11%, var(--aurora-surface)), color-mix(in srgb, var(--aurora-cyan) 8%, var(--aurora-surface)));
  color: var(--aurora-text);
}

[data-theme] .ecomComposerMenu button,
[data-theme] .ecomChoiceGrid button,
[data-theme] .userMenuAction { color: var(--aurora-text); }
[data-theme] .ecomComposerMenu button:hover,
[data-theme] .ecomChoiceGrid button:hover,
[data-theme] .userMenuAction:hover { background: color-mix(in srgb, var(--aurora-cyan) 8%, var(--aurora-field)); }
[data-theme] .ecomChoiceLabel,
[data-theme] .ecomChoiceTitle,
[data-theme] .userMenuHeader small { color: var(--aurora-muted); }

[data-theme] .wgStageTitle,
[data-theme] .wgGenerationStatus,
[data-theme] .v1PanelHead span,
[data-theme] .v1DialogShell header span { color: var(--aurora-cyan); }
[data-theme] .wgAnalysisCard {
  border-color: color-mix(in srgb, var(--aurora-purple) 30%, var(--aurora-border));
  background: linear-gradient(105deg, color-mix(in srgb, var(--aurora-purple) 13%, var(--aurora-surface)), var(--aurora-surface-raised));
  box-shadow: var(--aurora-shadow);
}
[data-theme] .wgAnalysisSpinner { border-color: color-mix(in srgb, var(--aurora-purple) 20%, transparent); border-top-color: var(--aurora-purple); border-right-color: var(--aurora-cyan); }
[data-theme] .wgAnalysisCopy strong { color: var(--aurora-purple); }
[data-theme] .wgAnalysisCopy em,
[data-theme] .wgElapsed,
[data-theme] .wgQuestionProgress,
[data-theme] .wgOptionCard small,
[data-theme] .wgThinkingFact span,
[data-theme] .wgThinkingLine,
[data-theme] .wgSummaryCard dt,
[data-theme] .wgGenerationFacts,
[data-theme] .wgGenerationStatus em { color: var(--aurora-muted); }

[data-theme] .wgQuestionCard,
[data-theme] .wgThinkingCard,
[data-theme] .wgAnswerCard,
[data-theme] .wgGenerationStage {
  border-color: var(--aurora-border);
  background: var(--aurora-surface-raised);
  color: var(--aurora-text);
  box-shadow: var(--aurora-shadow);
}
[data-theme] .wgQuestionNote,
[data-theme] .wgQuestionIdentity,
[data-theme] .wgQuestionIdentity strong,
[data-theme] .wgQuestionTitle strong,
[data-theme] .wgThinkingHead,
[data-theme] .wgThinkingFact strong,
[data-theme] .wgThinkingLine b,
[data-theme] .wgAnswerIntro,
[data-theme] .wgSummaryCard dd,
[data-theme] .wgAnswerNext,
[data-theme] .wgGenerationFacts strong { color: var(--aurora-text); }
[data-theme] .wgQuestionPurpose { color: var(--aurora-muted); }
[data-theme] .wgQuestionNote b { color: var(--aurora-coral); }
[data-theme] .wgQuestionPanel,
[data-theme] .wgOptionCard,
[data-theme] .wgProcessingCard { border-color: var(--aurora-border); background: var(--aurora-surface); color: var(--aurora-text); }
[data-theme] .wgAgentStage .wgQuestionNote,
[data-theme] .wgAgentStage .wgQuestionIdentity,
[data-theme] .wgAgentStage .wgQuestionIdentity strong,
[data-theme] .wgAgentStage .wgQuestionTitle strong,
[data-theme] .wgAgentStage .wgOptionCard,
[data-theme] .wgAgentStage .wgThinkingHead,
[data-theme] .wgAgentStage .wgThinkingFact strong,
[data-theme] .wgAgentStage .wgThinkingLine b,
[data-theme] .wgAgentStage .wgAnswerCard,
[data-theme] .wgAgentStage .wgAnswerIntro,
[data-theme] .wgAgentStage .wgSummaryCard dd,
[data-theme] .wgAgentStage .wgAnswerNext { color: var(--wg-interaction-text); }
[data-theme] .wgAgentStage .wgRequirementCard { color: var(--aurora-muted); }
[data-theme] .wgCompactInfoCard { border-color: var(--aurora-border); background: color-mix(in srgb, var(--aurora-surface-raised) 94%, var(--aurora-page)); box-shadow: 0 8px 24px rgba(3,5,18,.12); }
[data-theme] .wgQuestionTitle span { background: color-mix(in srgb, var(--aurora-purple) 14%, transparent); color: var(--aurora-purple); }
[data-theme] .wgOptionCard:hover { border-color: color-mix(in srgb, var(--aurora-purple) 68%, var(--aurora-border)); }
[data-theme] .wgOptionCard.is-selected { border-color: var(--aurora-purple); background: color-mix(in srgb, var(--aurora-purple) 16%, var(--aurora-surface)); }
[data-theme] .wgCustomAnswer,
[data-theme] .wgSupplementAnswer { color: var(--aurora-muted); }
[data-theme] .wgCustomAnswer textarea,
[data-theme] .wgSupplementAnswer textarea { border-color: var(--aurora-border); background: var(--aurora-field); color: var(--aurora-text); }
[data-theme] .wgQuestionActions { border-color: var(--aurora-border); }
[data-theme] .wgQuestionCancel,
[data-theme] .wgQuestionPrevious { background: var(--aurora-field); color: var(--aurora-text); }
[data-theme] .wgQuestionNext,
[data-theme] .wgQuestionSubmit,
[data-theme] .wgQuestionSubmitted { background: linear-gradient(110deg, var(--aurora-purple), var(--aurora-cyan)); color: #fff; }
[data-theme] .wgThinkingFact { border-color: var(--aurora-border); }

[data-theme] .v1PanelHead { border-color: var(--aurora-border); }
[data-theme] .wideField textarea,
[data-theme] .wideField select,
[data-theme] .videoOptions select,
[data-theme] .adminV1Tools input,
[data-theme] .adminV1Tools select,
[data-theme] .priceAdminGrid input { border-color: var(--aurora-border); background: var(--aurora-field); color: var(--aurora-text); }
[data-theme] .customAmountField,
[data-theme] .customAmountField input,
[data-theme] .bonusRuleGrid form,
[data-theme] .bonusRuleGrid input { border-color: var(--aurora-border); background: var(--aurora-field); color: var(--aurora-text); }
[data-theme] .videoUpload { border-color: color-mix(in srgb, var(--aurora-cyan) 36%, var(--aurora-border)); background: color-mix(in srgb, var(--aurora-cyan) 6%, var(--aurora-surface)); }
[data-theme] .taskProgressCard,
[data-theme] .taskRow,
[data-theme] .assetItem,
[data-theme] .balanceBand,
[data-theme] .packageItem,
[data-theme] .detailStatGrid article,
[data-theme] .supportCopy,
[data-theme] .serviceAdminGrid article,
[data-theme] .priceAdminGrid form {
  border-color: var(--aurora-border);
  background: var(--aurora-surface);
  color: var(--aurora-text);
}
[data-theme] .customPackageItem {
  border-color: color-mix(in srgb, var(--aurora-cyan) 42%, var(--aurora-border));
  background: color-mix(in srgb, var(--aurora-cyan) 8%, var(--aurora-surface));
}
[data-theme] .customPackageItem:hover {
  border-color: color-mix(in srgb, var(--aurora-cyan) 58%, var(--aurora-border));
  background: color-mix(in srgb, var(--aurora-cyan) 11%, var(--aurora-surface));
}
[data-theme] .v1Dialog { border-color: var(--aurora-border); background: var(--aurora-surface); }
[data-theme] .lightBtn,
[data-theme] .generationToolbar .regenerateBtn,
[data-theme] .generationToolbar .taskDetailBtn { border-color: var(--aurora-border); background: var(--aurora-surface-raised); color: var(--aurora-text); }
[data-theme] .balanceBand strong,
[data-theme] .taskCredits strong { color: var(--aurora-cyan); }
[data-theme] .packageItem p,
[data-theme] .taskCredits small { color: var(--aurora-coral); }

[data-theme] .modalCard,
[data-theme] .adminShell,
[data-theme] .adminForm,
[data-theme] .apiConfigCard,
[data-theme] .adminRow,
[data-theme] .statGrid article { border-color: var(--aurora-border); background: var(--aurora-surface); }
[data-theme] .adminTab { border-color: var(--aurora-border); background: var(--aurora-surface-raised); color: var(--aurora-text); }
[data-theme] .adminTab.active { border-color: var(--aurora-purple); background: var(--aurora-purple); color: #fff; }
[data-theme] .adminTabs { border-color: var(--aurora-border); }
[data-theme] .adminStatus { color: var(--aurora-cyan); }

[data-theme="light"] .themeToggle { box-shadow: 0 7px 18px -13px rgba(43, 63, 91, .5); }
[data-theme="light"] .primaryNav em { color: #fff; }
[data-theme="light"] .userPill,
[data-theme="light"] .chatItem span,
[data-theme="light"] .chatRename,
[data-theme="light"] .chatDelete,
[data-theme="light"] .announcementItem strong,
[data-theme="light"] .ecomComposerPlus,
[data-theme="light"] .ecomChoicePill { color: var(--aurora-text); }
[data-theme="light"] .menuChevron,
[data-theme="light"] .chatItem small,
[data-theme="light"] .announcementItem p,
[data-theme="light"] .ecomChoiceLabel,
[data-theme="light"] .ecomUploadStatus { color: var(--aurora-muted); }

[data-theme="light"] .chatRename,
[data-theme="light"] .chatDelete {
  --chat-action-color: var(--aurora-text);
  --chat-action-background: transparent;
}
[data-theme="light"] .chatRename:hover,
[data-theme="light"] .chatDelete:hover {
  --chat-action-hover-color: var(--aurora-text);
  --chat-action-hover-background: color-mix(in srgb, var(--aurora-text) 9%, transparent);
}
[data-theme="light"] .chatDelete:hover {
  --chat-action-hover-color: #c83f56;
  --chat-action-hover-background: rgba(200,63,86,.1);
}

[data-theme="light"] .announcementClose {
  border-color: var(--aurora-border);
  background: var(--aurora-surface-raised);
  color: var(--aurora-text);
  box-shadow: 0 3px 10px -7px rgba(43, 63, 91, .48);
}
[data-theme="light"] .announcementClose:hover {
  border-color: color-mix(in srgb, var(--aurora-purple) 58%, var(--aurora-border));
  background: var(--aurora-field);
  color: var(--aurora-text);
}

[data-theme="light"] .avatarThumb {
  border-color: color-mix(in srgb, var(--aurora-cyan) 48%, var(--aurora-border));
  background:
    radial-gradient(circle at 50% 35%, #f8fbff 0 17%, transparent 18%),
    radial-gradient(circle at 50% 85%, #dce8f4 0 32%, transparent 33%),
    linear-gradient(135deg, #159bb7, #6f5bd8 58%, #d86275);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .34), 0 2px 8px -5px rgba(23, 36, 58, .68);
}

/* Balanced home color accents. Structural layout and interaction stay unchanged. */
[data-theme] .announcementItem { border-color: var(--aurora-coral); background: var(--aurora-surface); }

@supports (background: color-mix(in srgb, black 50%, white)) {
  [data-theme] {
    --home-topbar-background: linear-gradient(90deg, color-mix(in srgb, var(--aurora-cyan) 7%, var(--aurora-topbar)), var(--aurora-topbar) 48%, color-mix(in srgb, var(--aurora-purple) 6%, var(--aurora-topbar)) 76%, color-mix(in srgb, var(--aurora-coral) 4%, var(--aurora-topbar)));
    --home-primary-rail-background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-cyan) 13%, var(--aurora-rail)), var(--aurora-rail) 48%, color-mix(in srgb, var(--aurora-cyan) 5%, var(--aurora-rail)));
    --home-side-rail-background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-purple) 11%, var(--aurora-history)), var(--aurora-history) 52%, color-mix(in srgb, var(--aurora-coral) 5%, var(--aurora-history)));
    --home-primary-nav-active-background: linear-gradient(120deg, color-mix(in srgb, var(--aurora-cyan) 17%, var(--aurora-surface-raised)), color-mix(in srgb, var(--aurora-purple) 13%, var(--aurora-surface-raised)));
    --home-chat-item-active-background: linear-gradient(100deg, color-mix(in srgb, var(--aurora-purple) 17%, var(--aurora-surface-raised)), color-mix(in srgb, var(--aurora-coral) 7%, var(--aurora-surface-raised)));
    --home-chat-stage-background: linear-gradient(117deg, transparent 0 27%, color-mix(in srgb, var(--aurora-border) 28%, transparent) 27% 27.08%, transparent 27.08% 67%, color-mix(in srgb, var(--aurora-border) 20%, transparent) 67% 67.07%, transparent 67.07%), linear-gradient(90deg, transparent, color-mix(in srgb, var(--aurora-border) 34%, transparent), transparent) 0 46% / 100% 1px no-repeat, linear-gradient(138deg, color-mix(in srgb, var(--aurora-cyan) 8%, var(--aurora-page)), var(--aurora-page) 34%, color-mix(in srgb, var(--aurora-purple) 7%, var(--aurora-page)) 72%, color-mix(in srgb, var(--aurora-coral) 4%, var(--aurora-page)));
    --home-composer-border: transparent;
    --home-composer-border-right: transparent;
    --home-composer-background: linear-gradient(var(--aurora-surface), var(--aurora-surface)) padding-box, linear-gradient(105deg, var(--aurora-purple), var(--aurora-cyan) 52%, var(--aurora-coral)) border-box;
    --home-recharge-background: linear-gradient(135deg, var(--aurora-cyan), color-mix(in srgb, var(--aurora-purple) 44%, white));
    --home-recharge-color: #04161c;
    --home-send-background: linear-gradient(135deg, var(--aurora-purple), var(--aurora-coral));
  }
  .brandScript {
    background: linear-gradient(90deg, var(--aurora-cyan), var(--aurora-purple) 55%, var(--aurora-coral));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  [data-theme] .announcementItem {
    border-color: transparent;
    background: linear-gradient(var(--aurora-surface), var(--aurora-surface)) padding-box, linear-gradient(90deg, var(--aurora-coral), var(--aurora-cyan)) border-box;
  }
  [data-theme="light"] {
    --home-topbar-background: linear-gradient(90deg, color-mix(in srgb, var(--aurora-cyan) 4%, var(--aurora-topbar)), var(--aurora-topbar) 52%, color-mix(in srgb, var(--aurora-purple) 3%, var(--aurora-topbar)));
    --home-primary-rail-background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-cyan) 7%, var(--aurora-rail)), var(--aurora-rail) 58%, color-mix(in srgb, var(--aurora-cyan) 3%, var(--aurora-rail)));
    --home-side-rail-background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-purple) 6%, var(--aurora-history)), var(--aurora-history) 62%, color-mix(in srgb, var(--aurora-coral) 3%, var(--aurora-history)));
    --home-primary-nav-active-background: linear-gradient(120deg, color-mix(in srgb, var(--aurora-cyan) 10%, var(--aurora-surface-raised)), color-mix(in srgb, var(--aurora-purple) 7%, var(--aurora-surface-raised)));
    --home-chat-item-active-background: linear-gradient(100deg, color-mix(in srgb, var(--aurora-purple) 10%, var(--aurora-surface-raised)), color-mix(in srgb, var(--aurora-coral) 4%, var(--aurora-surface-raised)));
    --home-chat-stage-background: linear-gradient(117deg, transparent 0 27%, color-mix(in srgb, var(--aurora-border) 22%, transparent) 27% 27.08%, transparent 27.08% 67%, color-mix(in srgb, var(--aurora-border) 16%, transparent) 67% 67.07%, transparent 67.07%), linear-gradient(90deg, transparent, color-mix(in srgb, var(--aurora-border) 28%, transparent), transparent) 0 46% / 100% 1px no-repeat, linear-gradient(138deg, color-mix(in srgb, var(--aurora-cyan) 5%, var(--aurora-page)), var(--aurora-page) 38%, color-mix(in srgb, var(--aurora-purple) 4%, var(--aurora-page)) 74%, color-mix(in srgb, var(--aurora-coral) 2%, var(--aurora-page)));
    --home-composer-background: linear-gradient(var(--aurora-surface), var(--aurora-surface)) padding-box, linear-gradient(105deg, color-mix(in srgb, var(--aurora-purple) 72%, white), color-mix(in srgb, var(--aurora-cyan) 68%, white) 52%, color-mix(in srgb, var(--aurora-coral) 66%, white)) border-box;
    --home-composer-shadow: 0 22px 56px -32px rgba(43,63,91,.34), 0 0 22px color-mix(in srgb, var(--aurora-purple) 7%, transparent);
    --home-recharge-background: linear-gradient(135deg, color-mix(in srgb, var(--aurora-cyan) 58%, white), color-mix(in srgb, var(--aurora-purple) 42%, white));
    --home-recharge-color: var(--aurora-text);
  }
  [data-theme="light"] .primaryNav.active {
    box-shadow: inset 0 1px rgba(255,255,255,.62), 0 7px 18px -14px rgba(43,63,91,.38);
  }
  [data-theme="light"] .announcementItem {
    background: linear-gradient(var(--aurora-surface), var(--aurora-surface)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--aurora-coral) 68%, white), color-mix(in srgb, var(--aurora-cyan) 65%, white)) border-box;
  }
}