:root {
  --ink: #0e211f;
  --ink-2: #132523;
  --panel: #0f2321;
  --panel-2: #132724;
  --paper: #ffffff;
  --paper-2: #f6f5ef;
  --line: #e0e3da;
  --muted: #647063;
  --blue: #0c6b60;
  --cyan: #0e8a7c;
  --green: #0f7d6e;
  --amber: #c07a1a;
  --red: #dc2626;
  --shadow: 0 22px 60px rgba(20, 38, 36, .18);
}

/* 数字人工作台 */
.dh-studio { display: grid; gap: 14px; color: #e5edf5; }
.module-layout:has(.dh-studio) { grid-template-columns: minmax(0,1fr); }
.module-layout:has(.dh-studio) > aside { display: none; }
.module-view:has(.dh-studio) > .module-head { display: none; }
.dh-studio button, .dh-studio input, .dh-studio select, .dh-studio textarea, .dh-selector-mask button, .dh-selector-mask input { font: inherit; }
.dh-studio-head { display: grid; grid-template-columns: auto auto minmax(280px, 1fr); align-items: center; gap: 18px; min-height: 68px; padding: 10px 14px; border: 1px solid rgba(148,163,184,.16); border-radius: 8px; background: #0c1626; }
.dh-back { min-width: 64px; height: 38px; color: #9fb0c4; border: 1px solid rgba(148,163,184,.18); border-radius: 7px; background: #102322; cursor: pointer; }
.dh-mode-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 8px; background: #102322; }
.dh-mode-tabs button { min-width: 118px; height: 40px; color: #91a0b3; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-weight: 800; }
.dh-mode-tabs button.is-active { color: #0e2622; background: #9fe3d2; }
.dh-video-name { justify-self: end; display: grid; grid-template-columns: auto minmax(240px, 360px) auto; align-items: center; gap: 10px; color: #8293a8; font-size: 12px; }
.dh-video-name input { height: 40px; padding: 0 13px; color: #eef6ff; border: 1px solid rgba(148,163,184,.16); border-radius: 7px; background: #102322; outline: none; }
.dh-video-name input:focus { border-color: rgba(159,227,210,.58); box-shadow: 0 0 0 3px rgba(159,227,210,.08); }
.dh-video-name b { color: #9fe3d2; font-size: 11px; }
.dh-workflow { display: grid; grid-template-columns: minmax(0,1fr) 52px minmax(0,1fr) 52px minmax(0,1fr); align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid rgba(148,163,184,.16); border-radius: 8px; background: #0c1626; }
.dh-workflow > div { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; min-width: 0; opacity: .58; }
.dh-workflow > div > i { display: grid; width: 32px; height: 32px; place-items: center; color: #8293a7; border: 1px solid rgba(148,163,184,.22); border-radius: 50%; background: #102322; font-style: normal; font-weight: 900; }
.dh-workflow span strong, .dh-workflow span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-workflow span strong { color: #dce6ef; font-size: 12px; }
.dh-workflow span small { margin-top: 3px; color: #647063; font-size: 10px; }
.dh-workflow > b { height: 1px; background: rgba(148,163,184,.2); }
.dh-workflow > div.is-current, .dh-workflow > div.is-done { opacity: 1; }
.dh-workflow > div.is-current > i { color: #0e2622; border-color: #9fe3d2; background: #9fe3d2; box-shadow: 0 0 0 5px rgba(159,227,210,.08); }
.dh-workflow > div.is-done > i { color: #9fe3d2; border-color: rgba(159,227,210,.42); }
.dh-workflow > div.is-done > i::before { content: '✓'; font-size: 13px; }
.dh-workflow > div.is-done > i { font-size: 0; }
.dh-readiness { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid rgba(148,163,184,.16); border-radius: 8px; background: #0c1626; }
.dh-readiness > div { display: grid; gap: 3px; min-width: 0; padding: 8px 11px; border: 1px solid rgba(148,163,184,.12); border-radius: 7px; background: #102322; }
.dh-readiness > div span { color: #647063; font-size: 10px; }
.dh-readiness > div strong { overflow: hidden; color: #dce6ef; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dh-readiness > div.is-ready { border-color: rgba(159,227,210,.32); background: rgba(20,184,166,.07); }
.dh-readiness > div.is-ready span,.dh-readiness > div.is-ready strong { color: #9ff8e9; }
.dh-readiness > small { max-width: 210px; color: #647063; font-size: 10px; line-height: 1.5; }
.dh-editor { display: grid; grid-template-columns: minmax(286px, .72fr) minmax(600px, 2.1fr); gap: 14px; min-height: 610px; }
.dh-stage, .dh-compose { min-width: 0; border: 1px solid rgba(148,163,184,.16); border-radius: 8px; background: #0c1626; }
.dh-stage { position: relative; min-height: 610px; overflow: hidden; }
.dh-stage-empty { display: grid; height: 100%; min-height: 610px; padding: 38px; place-items: center; align-content: center; gap: 12px; text-align: center; background: #0e1a2b; }
.dh-stage-empty img { width: 76px; height: 76px; object-fit: contain; opacity: .82; }
.dh-stage-empty strong { color: #f3f8ff; font-size: 18px; }
.dh-stage-empty span { max-width: 260px; color: #647063; font-size: 12px; line-height: 1.7; }
.dh-stage-empty .btn { margin-top: 8px; color: #0e2622; background: #9fe3d2; }
.dh-stage-selected { position: absolute; inset: 0; overflow: hidden; background: #050a12; }
.dh-stage-selected video { position: absolute; inset: 0; width: 100%; height: 100%; }
.dh-stage-blur { object-fit: cover; filter: blur(22px) brightness(.48); transform: scale(1.12); opacity: .78; }
.dh-stage-focus { z-index: 1; object-fit: contain; }
.dh-preview-toggle { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; width: 46px; height: 46px; place-items: center; padding: 0; color: #f6f5ef; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(6,12,22,.28); box-shadow: 0 8px 24px rgba(0,0,0,.14); backdrop-filter: blur(5px); cursor: pointer; opacity: .28; transform: translate(-50%,-50%); transition: opacity .2s, background .2s, transform .2s; }
.dh-stage-selected:hover .dh-preview-toggle { opacity: .58; }
.dh-preview-toggle:focus-visible, .dh-preview-toggle.is-paused { opacity: .9; }
.dh-preview-toggle:hover { background: rgba(7,17,29,.48); transform: translate(-50%,-50%) scale(1.04); }
.dh-preview-toggle .dh-preview-icon { display: grid; width: 27px; height: 27px; place-items: center; color: #d9fffa; border-radius: 50%; background: rgba(53,193,172,.34); font-size: 11px; font-weight: 900; }
.dh-preview-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dh-preview-controlbar { position: absolute; z-index: 5; right: 14px; bottom: 78px; left: 14px; display: grid; grid-template-columns: 30px auto minmax(70px,1fr) auto 58px; align-items: center; gap: 8px; min-height: 38px; padding: 5px 10px; color: #e8f1f7; border: 1px solid rgba(255,255,255,.11); border-radius: 7px; background: rgba(5,12,22,.42); backdrop-filter: blur(9px); opacity: .62; transition: opacity .2s, background .2s; }
.dh-stage-selected:hover .dh-preview-controlbar, .dh-preview-controlbar:focus-within { opacity: .94; background: rgba(5,12,22,.64); }
.dh-preview-controlbar button { width: 28px; height: 28px; padding: 0; color: #d9fffa; border: 1px solid rgba(159,227,210,.2); border-radius: 50%; background: rgba(53,193,172,.16); cursor: pointer; font-size: 10px; }
.dh-preview-controlbar span { color: #dbe7ee; font-size: 10px; font-variant-numeric: tabular-nums; }
.dh-preview-controlbar input { width: 100%; height: 3px; accent-color: #9fe3d2; cursor: pointer; }
.dh-preview-controlbar .dh-preview-sound { display: flex; width: 58px; height: 28px; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; color: #0e2622; border-color: rgba(159,227,210,.5); border-radius: 999px; background: #9fe3d2; font-size: 9px; font-weight: 800; }
.dh-preview-controlbar .dh-preview-sound span { color: inherit; font-size: 9px; }
.dh-preview-controlbar .dh-preview-sound b { font-size: 9px; }
.dh-preview-controlbar .dh-preview-sound.is-muted { color: #b7c4d2; border-color: rgba(255,255,255,.12); background: rgba(148,163,184,.18); }
.dh-stage-caption { position: absolute; z-index: 3; right: 14px; bottom: 14px; left: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(8,15,28,.82); backdrop-filter: blur(14px); }
.dh-stage-caption span, .dh-stage-caption strong { display: block; }
.dh-stage-caption span { color: #7f91a6; font-size: 10px; }
.dh-stage-caption strong { margin-top: 3px; color: #fff; font-size: 13px; }
.dh-stage-caption button { color: #9fe3d2; border: 0; background: transparent; cursor: pointer; font-weight: 800; }
.dh-stage-upload { position: absolute; z-index: 4; top: 12px; right: 12px; padding: 8px 10px; color: #c8d3df; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(8,15,28,.82); cursor: pointer; font-size: 11px; }
.dh-upload-progress-toast { position: fixed; right: 24px; bottom: 24px; z-index: 1300; width: min(380px, calc(100vw - 32px)); padding: 17px 18px 15px; color: #152033; border: 1px solid rgba(82,94,130,.16); border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 22px 60px rgba(23,34,70,.22); backdrop-filter: blur(16px); }
.dh-upload-progress-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.dh-upload-progress-head span { display:flex; align-items:center; min-width:0; gap:9px; }
.dh-upload-progress-head span i { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#5368df; box-shadow:0 0 0 5px rgba(83,104,223,.12); animation:dhUploadPulse 1.2s ease-in-out infinite; }
.dh-upload-progress-head strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.dh-upload-progress-head > b { color:#5368df; font-size:15px; }
.dh-upload-progress-toast > small { display:block; overflow:hidden; margin-top:9px; color:#7f899f; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.dh-upload-progress-track { overflow:hidden; height:7px; margin-top:12px; border-radius:999px; background:#edf0f7; }
.dh-upload-progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5168e5,#8b6ee7); transition:width .18s ease; }
.dh-upload-progress-toast p { margin:9px 0 0; color:#59657d; font-size:11px; }
.dh-upload-progress-toast.is-complete .dh-upload-progress-head span i { background:#18a978; box-shadow:0 0 0 5px rgba(24,169,120,.12); animation:none; }
.dh-upload-progress-toast.is-complete .dh-upload-progress-head > b { color:#168661; }
.dh-upload-progress-toast.is-complete .dh-upload-progress-track i { background:#18a978; }
.dh-upload-progress-toast.is-failed .dh-upload-progress-head span i { background:#df5361; box-shadow:0 0 0 5px rgba(223,83,97,.12); animation:none; }
.dh-upload-progress-toast.is-failed p { color:#bd3544; }
@keyframes dhUploadPulse { 50% { transform:scale(.76); opacity:.62; } }
.dh-compose { display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.dh-voice-panel { border-bottom: 1px solid rgba(148,163,184,.14); }
.dh-choice-row { display: grid; width: calc(100% - 28px); min-height: 74px; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 14px; padding: 11px 14px; color: #dfe8f2; border: 1px solid rgba(159,227,210,.22); border-radius: 8px; background: #102322; cursor: pointer; text-align: left; }
.dh-choice-row > img, .dh-choice-avatar { width: 44px; height: 44px; object-fit: contain; border-radius: 7px; background: #17263b; }
.dh-choice-avatar { display: grid; place-items: center; overflow: hidden; }
.dh-choice-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dh-choice-row span strong, .dh-choice-row span small { display: block; }
.dh-choice-row span small { margin-top: 5px; color: #647063; font-size: 11px; }
.dh-choice-row > b { color: #9fe3d2; font-size: 12px; }
.dh-choice-row.is-empty { border-style: dashed; }
.dh-voice-settings { display: grid; grid-template-columns: 1.15fr 1.15fr .9fr 1fr; gap: 0; padding: 0 14px 14px; }
.dh-voice-settings label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0 12px; color: #8798ab; border-right: 1px solid rgba(148,163,184,.13); font-size: 11px; }
.dh-voice-settings label:last-child { border-right: 0; }
.dh-voice-settings input[type=range] { width: 100%; accent-color: #9fe3d2; }
.dh-voice-settings select { width: 100%; height: 34px; padding: 0 30px 0 10px; appearance: none; color: #dbe6f2; border: 1px solid rgba(148,163,184,.16); border-radius: 6px; background-color: #102322; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; outline: none; cursor: pointer; }
.dh-voice-settings b { min-width: 30px; color: #facc15; text-align: right; }
.dh-script-panel { display: grid; min-height: 0; grid-template-rows: auto minmax(290px,1fr) auto auto; padding: 14px; }
.dh-script-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dh-script-title strong, .dh-script-title span { display: block; }
.dh-script-title strong { color: #f3f7fb; font-size: 15px; }
.dh-script-title span { margin-top: 4px; color: #647063; font-size: 11px; }
.dh-script-title button { min-height: 34px; padding: 0 12px; color: #9fe3d2; border: 1px solid rgba(159,227,210,.28); border-radius: 6px; background: rgba(20,184,166,.08); cursor: pointer; font-weight: 800; }
.dh-tts-action { display: flex; align-items: center; gap: 10px; }
.dh-tts-action small { color: #facc15; font-size: 11px; font-weight: 800; }
.dh-script-panel textarea { width: 100%; min-height: 290px; padding: 18px; resize: none; color: #eaf2f9; border: 1px solid rgba(148,163,184,.18); border-radius: 8px; background: #0f1b2d; outline: none; font: inherit; line-height: 1.8; }
.dh-script-panel textarea:focus { border-color: rgba(159,227,210,.5); box-shadow: 0 0 0 3px rgba(159,227,210,.06); }
.dh-script-panel textarea::placeholder { color: #53667b; }
.dh-script-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.dh-script-footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-script-footer button { min-height: 32px; padding: 0 10px; color: #aebdcb; border: 1px solid rgba(148,163,184,.16); border-radius: 6px; background: #102322; cursor: pointer; font-size: 11px; }
.dh-script-footer button:hover { color: #9fe3d2; border-color: rgba(159,227,210,.32); }
.dh-script-footer button.is-library-primary { color: #0e2622; border-color: rgba(153,246,228,.72); background: #9fe3d2; font-weight: 900; }
.dh-script-footer button.is-library-primary:hover { color: #0e2622; border-color: #c8efe6; background: #c8efe6; }
.dh-script-footer small { color: #647063; }
.dh-script-footer > span { color: #647063; font-size: 11px; }
.dh-script-footer > span b { color: #facc15; }
.dh-audio-player { display: grid; width: 100%; min-height: 68px; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 13px; margin-top: 12px; padding: 10px 12px; box-sizing: border-box; border: 1px solid rgba(159,227,210,.22); border-radius: 9px; background: radial-gradient(circle at 8% 10%,rgba(53,193,172,.14),transparent 36%),linear-gradient(135deg,#111f32,#0e192a); box-shadow: 0 10px 24px rgba(2,8,23,.18); }
.dh-audio-player > audio { display: none; }
.dh-audio-play { display: grid; width: 52px; height: 44px; place-items: center; padding: 0; color: #0e2622; border: 1px solid rgba(153,246,228,.72); border-radius: 8px; background: linear-gradient(135deg,#9fe3d2,#c8efe6); box-shadow: 0 7px 18px rgba(20,184,166,.18); cursor: pointer; font-size: 10px; font-weight: 900; }
.dh-audio-play.is-playing { color: #d8fff8; border-color: rgba(159,227,210,.34); background: rgba(13,148,136,.48); box-shadow: 0 0 0 4px rgba(159,227,210,.07); }
.dh-audio-player-main { display: grid; min-width: 0; gap: 8px; }
.dh-audio-player-main > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dh-audio-player-main strong { overflow: hidden; color: #e8f5f4; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dh-audio-player-main span { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; color: #7f93a7; font-size: 9px; font-variant-numeric: tabular-nums; }
.dh-audio-player-main span b { color: #b8c8d7; font-weight: 700; }
.dh-audio-player-main span i { color: #52677c; font-style: normal; }
.dh-audio-player-main input { width: 100%; height: 4px; margin: 0; accent-color: #9fe3d2; cursor: pointer; }
.dh-audio-replay { min-width: 48px; height: 32px; padding: 0 9px; color: #91a7b9; border: 1px solid rgba(148,163,184,.15); border-radius: 7px; background: rgba(15,29,47,.84); cursor: pointer; font-size: 9px; font-weight: 800; }
.dh-audio-replay:hover { color: #9fe3d2; border-color: rgba(159,227,210,.3); }
.dh-audio-drive { display: grid; align-content: start; gap: 14px; padding: 18px; }
.dh-audio-drop { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 96px; padding: 18px; border: 1px dashed rgba(159,227,210,.32); border-radius: 8px; background: #0f1b2d; cursor: pointer; }
.dh-audio-drop img { width: 48px; height: 48px; object-fit: contain; }
.dh-audio-drop strong, .dh-audio-drop small { display: block; }
.dh-audio-drop small { margin-top: 6px; color: #647063; font-size: 11px; }
.dh-audio-drop b { color: #9fe3d2; font-size: 12px; }
.dh-recent-audios { display: grid; gap: 8px; }
.dh-recent-audios > span { color: #91a2b6; font-size: 12px; font-weight: 800; }
.dh-recent-audios button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 13px; color: #dbe5ef; border: 1px solid rgba(148,163,184,.14); border-radius: 7px; background: #102322; cursor: pointer; text-align: left; }
.dh-recent-audios button.is-selected { color: #052e2b; border-color: #9fe3d2; background: #9fe3d2; }
.dh-recent-audios small { color: inherit; opacity: .66; }
.dh-actionbar { display: grid; grid-template-columns: minmax(190px,1fr) minmax(220px,.8fr) minmax(145px,.55fr) auto minmax(190px,.72fr); align-items: center; gap: 14px; min-height: 76px; padding: 12px 14px; border: 1px solid rgba(148,163,184,.16); border-radius: 8px; background: #0c1626; }
.dh-action-summary span, .dh-action-summary strong, .dh-actionbar label > span, .dh-balance span, .dh-balance strong, .dh-cost span, .dh-cost strong, .dh-cost small { display: block; }
.dh-action-summary span, .dh-actionbar label > span, .dh-balance span, .dh-cost span { color: #647063; font-size: 10px; }
.dh-action-summary strong, .dh-balance strong, .dh-cost strong { margin-top: 4px; overflow: hidden; color: #eaf1f8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dh-cost strong { color: #facc15; }
.dh-cost small { margin-top: 3px; color: #65778c; font-size: 9px; }
.dh-actionbar select { width: 100%; height: 38px; margin-top: 4px; padding: 0 30px 0 10px; appearance: none; color: #dfe8f1; border: 1px solid rgba(148,163,184,.17); border-radius: 6px; background-color: #102322; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; cursor: pointer; }
.dh-actionbar .btn-primary { width: 100%; color: #0e2622; background: #9fe3d2; }
.dh-actionbar .btn-primary:hover { background: #c8efe6; }
.dh-actionbar .btn-primary.is-insufficient { color: #fff7ed; background: #ea580c; }
.dh-actionbar .btn-primary.is-guided:not(.is-insufficient) { color: #b9c8d6; border: 1px solid rgba(148,163,184,.18); background: #172438; }
.is-guided-focus { animation: dhGuidedFocus .7s ease 2; }
@keyframes dhGuidedFocus { 50% { border-color: #9fe3d2; box-shadow: 0 0 0 5px rgba(159,227,210,.12); } }
.dh-balance-modal .panel-label { color: #ea580c; }
.dh-balance-modal .script-modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
.dh-studio .dh-history { padding: 20px; border-color: rgba(148,163,184,.16); border-radius: 8px; color: #dbe5ef; background: #0c1626; box-shadow: none; }
.dh-studio .dh-history .section-title h2 { color: #f3f8ff; }
.dh-studio .dh-history .btn-quiet { color: #a9b7c6; background: #102322; }
.dh-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 16px; }
.dh-history-head > div:first-child > span { color: #9fe3d2; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.dh-history-head h2 { margin: 5px 0 0; color: #f4f8fb; font-size: 19px; }
.dh-history-head p { margin: 6px 0 0; color: #647063; font-size: 11px; }
.dh-history-stats { display: flex; align-items: center; gap: 8px; }
.dh-history-stats > span { display: grid; min-width: 86px; min-height: 50px; place-items: center; padding: 7px 10px; color: #647063; border: 1px solid rgba(148,163,184,.13); border-radius: 7px; background: #0f1b2d; font-size: 9px; }
.dh-history-stats > span b { color: #eff8ff; font-size: 16px; }
.dh-studio .dh-task-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.dh-studio .dh-task-card { display: grid; grid-template-columns: 164px minmax(0,1fr); align-items: stretch; gap: 14px; min-height: 128px; padding: 10px; border-color: rgba(148,163,184,.15); border-radius: 8px; background: linear-gradient(145deg,#0f1b2d,#0c1728); }
.dh-studio .dh-task-preview { height: 108px; border-radius: 7px; background: #091321; }
.dh-task-result { position: relative; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; background: #07101c; cursor: pointer; }
.dh-task-result video { width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: opacity .2s, transform .25s; }
.dh-task-result:hover video { opacity: .95; transform: scale(1.03); }
.dh-task-result > span { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 5px; padding: 5px 7px; color: #e7fffb; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(4,12,21,.52); backdrop-filter: blur(7px); font-size: 9px; }
.dh-task-result > span i { color: #9fe3d2; font-style: normal; }
.dh-studio .dh-task-progress { display: grid; width: calc(100% - 24px); height: auto; gap: 9px; border-radius: 0; background: transparent; }
.dh-studio .dh-task-progress::after { display: none; }
.dh-task-progress > span { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.dh-task-progress > span b { color: #f3f8ff; font-size: 18px; }
.dh-task-progress > span small { color: #8fa1b4; font-size: 10px; }
.dh-task-progress > em { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(148,163,184,.17); }
.dh-task-progress > em i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#35c1ac,#7ad9d2); }
.dh-studio .dh-task-copy > strong { color: #eef5fb; }
.dh-studio .dh-task-copy { align-self: center; }
.dh-task-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dh-task-copy > div small { margin: 0; color: #61758a; font-size: 9px; }
.dh-studio .dh-task-copy > strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dh-task-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 8px 0 0 !important; color: #73879a !important; }
.dh-task-meta span { position: relative; }
.dh-task-meta span + span::before { content: '·'; margin-right: 8px; color: #42566b; }
.dh-studio .dh-task-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.dh-studio .dh-task-actions .btn { min-height: 32px; padding: 0 12px; font-size: 10px; }
.dh-compute-gate { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 18px 14px; padding:13px 15px; border:1px solid rgba(248,113,113,.2); border-radius:9px; background:linear-gradient(135deg,rgba(127,29,29,.2),rgba(69,26,38,.15)); }
.dh-compute-gate strong,.dh-compute-gate span { display:block; }
.dh-compute-gate strong { color:#fecaca; font-size:13px; }
.dh-compute-gate span { margin-top:4px; color:#c9a8ae; font-size:10px; }
.dh-compute-gate button { min-width:116px; height:34px; border:1px solid rgba(254,202,202,.2); border-radius:7px; color:#fff; background:#b33d50; cursor:pointer; }
.dh-task-retention { color:#6e8797 !important; font-size:9px !important; }
.dh-task-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(148,163,184,.12); }
.dh-task-pager > span { color: #647063; font-size: 10px; }
.dh-task-pager > div { display: flex; gap: 7px; }
.dh-task-pager button { min-width: 72px; height: 32px; color: #b7c6d4; border: 1px solid rgba(148,163,184,.17); border-radius: 6px; background: #102322; cursor: pointer; }
.dh-task-pager button:hover:not(:disabled) { color: #9fe3d2; border-color: rgba(159,227,210,.34); }
.dh-task-pager button:disabled { cursor: not-allowed; opacity: .38; }
.dh-studio .dh-empty { color: #647063; border-color: rgba(148,163,184,.18); background: #0f1b2d; }
.dh-studio .dh-empty strong { color: #dce6ef; }
.dh-selector-mask { position: fixed; z-index: 1250; inset: 0; display: grid; place-items: center; padding: 32px; background: rgba(2,7,14,.78); backdrop-filter: blur(9px); }
.dh-selector-modal { display: grid; width: min(1180px, 94vw); height: min(790px, 90vh); grid-template-rows: auto auto auto minmax(0,1fr) auto; overflow: hidden; color: #e5edf5; border: 1px solid rgba(148,163,184,.2); border-radius: 10px; background: #0b1524; box-shadow: 0 30px 90px rgba(0,0,0,.48); }
.dh-selector-modal:has(.dh-quota-bar) { grid-template-rows: auto auto auto auto minmax(0,1fr) auto; }
.dh-selector-modal > header, .dh-selector-modal > nav, .dh-selector-tools, .dh-selector-modal > footer { display: flex; align-items: center; }
.dh-selector-modal > header { justify-content: space-between; min-height: 66px; padding: 0 24px; border-bottom: 1px solid rgba(148,163,184,.13); }
.dh-selector-modal > header h2 { margin: 0; color: #f5f9fd; font-size: 20px; }
.dh-selector-modal > header button { color: #7f91a5; border: 0; background: transparent; cursor: pointer; }
.dh-selector-modal > nav { gap: 6px; min-height: 58px; padding: 0 24px; border-bottom: 1px solid rgba(148,163,184,.12); }
.dh-selector-modal > nav button { align-self: stretch; min-width: 122px; color: #7f91a5; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; font-weight: 800; }
.dh-selector-modal > nav button.is-active { color: #9fe3d2; border-bottom-color: #9fe3d2; }
.dh-selector-tools { gap: 14px; padding: 14px 24px; }
.dh-selector-tools.has-template-upload { flex-wrap: wrap; }
.dh-quota-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 24px 0; padding: 10px 13px; color: #d9fffa; border: 1px solid rgba(159,227,210,.18); border-radius: 8px; background: rgba(53,193,172,.06); }
.dh-quota-bar span { font-weight: 800; }
.dh-quota-bar small { color: #8fa7b9; }
.dh-gender-filter { display: flex; gap: 4px; padding: 4px; border-radius: 7px; background: #102322; }
.dh-gender-filter button { min-width: 62px; height: 34px; color: #8293a7; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.dh-gender-filter button.is-active { color: #0e2622; background: #9fe3d2; font-weight: 800; }
.dh-selector-tools > label:not(.btn) { display: grid; flex: 1; grid-template-columns: 1fr auto; min-width: 260px; }
.dh-selector-tools input { height: 42px; padding: 0 13px; color: #e5edf5; border: 1px solid rgba(148,163,184,.17); border-right: 0; border-radius: 7px 0 0 7px; background: #102322; outline: none; }
.dh-selector-tools [data-dh-search-submit] { min-width: 76px; color: #0e2622; border: 0; border-radius: 0 7px 7px 0; background: #9fe3d2; cursor: pointer; font-weight: 800; }
.dh-selector-tools > .btn { min-height: 42px; color: #b6c4d2; border-color: rgba(148,163,184,.18); background: #102322; }
.dh-template-upload-action { display: flex !important; min-width: 320px; min-height: 54px !important; flex: 0 0 320px; align-items: center; gap: 11px; padding: 8px 14px !important; color: #0e2622 !important; border: 1px solid rgba(153,246,228,.78) !important; border-radius: 9px !important; background: linear-gradient(135deg,#9fe3d2,#c8efe6) !important; box-shadow: 0 9px 22px rgba(20,184,166,.2); cursor: pointer; }
.dh-template-upload-action:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(20,184,166,.28); }
.dh-template-upload-action > i { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #dffffa; background: #0f766e; font-size: 21px; font-style: normal; }
.dh-template-upload-action > span { min-width: 0; text-align: left; }
.dh-template-upload-action strong,.dh-template-upload-action small { display: block; }
.dh-template-upload-action strong { font-size: 13px; }
.dh-template-upload-action small { margin-top: 3px; color: #0f5f59; font-size: 9px; font-weight: 700; }
.dh-template-recording-tip { display: flex; width: 100%; flex: 1 0 100%; align-items: flex-start; gap: 10px; padding: 10px 13px; box-sizing: border-box; color: #9db0c2; border: 1px solid rgba(96,165,250,.17); border-radius: 8px; background: rgba(30,64,175,.075); }
.dh-template-recording-tip > i { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #bfdbfe; background: rgba(59,130,246,.24); font-size: 11px; font-style: normal; font-weight: 900; }
.dh-template-recording-tip strong,.dh-template-recording-tip small { display: block; }
.dh-template-recording-tip strong { color: #d9efea; font-size: 11px; }
.dh-template-recording-tip small { margin-top: 4px; color: #8398ad; font-size: 10px; line-height: 1.55; }
.dh-selector-content { min-height: 0; padding: 0 16px 18px 24px; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(159,227,210,.5) rgba(15,29,47,.8); }
.dh-selector-content::-webkit-scrollbar { width: 10px; }
.dh-selector-content::-webkit-scrollbar-track { margin: 4px 0 18px; border-radius: 999px; background: rgba(15,29,47,.8); }
.dh-selector-content::-webkit-scrollbar-thumb { min-height: 48px; border: 2px solid rgba(15,29,47,.8); border-radius: 999px; background: linear-gradient(180deg,rgba(159,227,210,.78),rgba(53,193,172,.38)); }
.dh-selector-content::-webkit-scrollbar-thumb:hover { background: #9fe3d2; }
.dh-selector-grid { display: grid; gap: 12px; }
.dh-selector-grid.voice { grid-template-columns: repeat(3,minmax(0,1fr)); }
.dh-selector-grid.template { grid-template-columns: repeat(5,minmax(0,1fr)); }
.dh-selector-pager { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; padding:12px 14px; color:#8293a8; border:1px solid rgba(148,163,184,.13); border-radius:9px; background:#0f1a2b; font-size:12px; }
.dh-selector-pager > div { display:flex; gap:8px; }
.dh-selector-pager button { min-width:76px; height:34px; color:#dbe7f2; border:1px solid rgba(148,163,184,.2); border-radius:7px; background:#152338; cursor:pointer; }
.dh-selector-pager button:disabled { opacity:.38; cursor:not-allowed; }
.dh-selector-card { position: relative; min-width: 0; color: #dce6ef; border: 1px solid rgba(148,163,184,.15); border-radius: 8px; background: #102322; cursor: pointer; }
.dh-selector-card.is-selected { border-color: #9fe3d2; box-shadow: 0 0 0 2px rgba(159,227,210,.12); }
.dh-selector-card.voice { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 12px; }
.dh-selector-avatar { width: 48px; height: 48px; overflow: hidden; border-radius: 7px; background: #17263b; }
.dh-selector-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dh-selector-card strong, .dh-selector-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-selector-card small { margin-top: 5px; color: #647063; font-size: 10px; }
.dh-selector-card.voice > button { color: #9fe3d2; border: 1px solid rgba(159,227,210,.24); border-radius: 5px; background: rgba(20,184,166,.07); cursor: pointer; font-size: 11px; }
.dh-selector-card.voice > .dh-clone-delete { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; color: #fecaca; border-color: rgba(248,113,113,.35); border-radius: 50%; background: #3b1722; line-height: 20px; }
.dh-no-preview { color: #65778c; font-size: 10px; }
.dh-selector-card.voice.is-vip-locked { border-color: rgba(246,190,93,.2); }
.dh-vip-badge,.dh-free-badge { display: inline-flex !important; width: max-content; align-items: center; gap: 4px; margin-top: 6px !important; padding: 3px 6px; border-radius: 999px; font-size: 9px !important; font-weight: 800; line-height: 1; }
.dh-vip-badge { color: #ffd98b !important; border: 1px solid rgba(246,190,93,.25); background: linear-gradient(135deg,rgba(145,92,18,.34),rgba(255,207,101,.1)); }
.dh-vip-badge b { color: #1b1305; border-radius: 4px; background: #f6c760; padding: 2px 3px; font-size: 7px; letter-spacing: .04em; }
.dh-free-badge { color: #91e7d9 !important; border: 1px solid rgba(159,227,210,.2); background: rgba(20,184,166,.08); }
.dh-selector-card.template { overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dh-selector-video { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #17263b; }
.dh-selector-video img, .dh-selector-video video { width: 100%; height: 100%; object-fit: cover; }
.dh-selector-video i { position: absolute; top: 8px; left: 8px; padding: 4px 7px; color: #fff; border-radius: 5px; background: rgba(8,15,28,.76); font-size: 9px; font-style: normal; }
.dh-template-hover-hint { position: absolute; right: 8px; bottom: 8px; padding: 5px 7px; color: #d9fffa; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(6,14,25,.58); backdrop-filter: blur(7px); font-size: 9px; font-weight: 800; opacity: .76; transition: opacity .18s, background .18s; }
.dh-selector-card.template.is-previewing .dh-template-hover-hint { color: #0e2622; border-color: rgba(153,246,228,.7); background: #9fe3d2; opacity: 1; }
.dh-selector-card.template.is-previewing .dh-template-hover-hint::after { content: '中'; }
.dh-selector-card.template > div { padding: 11px; }
.dh-selector-card.template > button { position: absolute; top: 8px; right: 8px; padding: 4px 7px; color: #fff; border: 0; border-radius: 5px; background: rgba(220,38,38,.82); cursor: pointer; font-size: 9px; }
.dh-selector-empty { display: grid; min-height: 390px; place-items: center; align-content: center; gap: 10px; color: #7c8da1; text-align: center; }
.dh-selector-empty img { width: 76px; height: 76px; object-fit: contain; opacity: .7; }
.dh-selector-empty strong { color: #dfe8f1; font-size: 16px; }
.dh-selector-empty p { margin: 0 0 8px; font-size: 12px; }
.dh-selector-empty .btn-primary { color: #0e2622; background: #9fe3d2; }
.dh-selector-empty .dh-empty-upload { min-height: 44px; padding: 0 18px; cursor: pointer; font-weight: 900; }
.dh-selector-modal > footer { position: relative; z-index: 5; justify-content: flex-end; gap: 10px; min-height: 70px; padding: 0 24px; border-top: 1px solid rgba(148,163,184,.13); background: #0b1524; }
.dh-selector-modal > footer .btn-quiet { color: #a9b7c5; border-color: rgba(148,163,184,.18); background: #102322; }
.dh-selector-modal > footer .btn-primary { color: #0e2622; background: #9fe3d2; }
.dh-clone-modal { width: min(680px,94vw); max-height: 94vh; overflow: hidden; color: #e7eef6; border: 1px solid rgba(148,163,184,.2); border-radius: 12px; background: #0b1524; box-shadow: 0 30px 90px rgba(0,0,0,.52); }
.dh-clone-modal > header,.dh-clone-modal > footer { display: flex; align-items: center; gap: 12px; padding: 20px 24px; }
.dh-clone-modal > header { justify-content: space-between; border-bottom: 1px solid rgba(148,163,184,.13); }
.dh-clone-modal > header span { color: #9fe3d2; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.dh-clone-modal > header h2 { margin: 4px 0 0; color: #f9f8f3; font-size: 22px; }
.dh-clone-modal > header button { color: #8496aa; border: 0; background: transparent; cursor: pointer; }
.dh-clone-body { display: grid; gap: 16px; max-height: calc(94vh - 154px); overflow-y: auto; padding: 22px 24px; }
.dh-clone-body > section { padding: 15px 17px; border: 1px solid rgba(159,227,210,.17); border-radius: 9px; background: rgba(20,184,166,.055); }
.dh-clone-body > section strong { color: #ccfbf1; }
.dh-clone-body > section p,.dh-clone-body > section li { color: #8499ad; font-size: 12px; line-height: 1.65; }
.dh-clone-body > section p { margin: 6px 0; }
.dh-clone-body > section ul { margin: 5px 0 0; padding-left: 18px; }
.dh-clone-script { position: relative; margin-top: 12px; padding: 11px 104px 11px 12px; border-radius: 7px; background: rgba(6,18,31,.52); }
.dh-clone-script span { color: #7f93a8; font-size: 10px; }
.dh-clone-script p { margin: 4px 0 0 !important; color: #b9c8d6 !important; }
.dh-clone-script button { position: absolute; right: 10px; top: 50%; padding: 7px 9px; color: #c8efe6; border: 1px solid rgba(159,227,210,.24); border-radius: 6px; background: rgba(20,184,166,.08); transform: translateY(-50%); cursor: pointer; }
.dh-clone-body > label:not(.dh-clone-consent) { display: grid; gap: 8px; color: #b8c6d4; font-size: 12px; font-weight: 800; }
.dh-clone-body input[type="text"],.dh-clone-body input[name="name"] { height: 44px; padding: 0 13px; color: #edf5fb; border: 1px solid rgba(148,163,184,.2); border-radius: 7px; background: #102322; outline: none; }
.dh-clone-file { padding: 14px; border: 1px dashed rgba(159,227,210,.3); border-radius: 9px; background: rgba(15,29,47,.72); }
.dh-clone-file input { color: #91a4b6; font-weight: 500; }
.dh-clone-file small { color: #6f8297; font-weight: 500; }
.dh-clone-file small.is-error { color: #fb7185; }
.dh-clone-file audio { width: 100%; height: 36px; margin-top: 4px; }
.dh-clone-source { min-width: 0; margin: 0; padding: 0; border: 0; }
.dh-clone-source > legend { margin-bottom: 8px; color: #b8c6d4; font-size: 12px; font-weight: 800; }
.dh-clone-source > nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; padding: 4px; border: 1px solid rgba(148,163,184,.14); border-radius: 9px; background: #0e1a2b; }
.dh-clone-source > nav button { height: 38px; color: #7f92a7; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-weight: 800; }
.dh-clone-source > nav button.is-active { color: #0e2622; background: #9fe3d2; box-shadow: 0 5px 15px rgba(53,193,172,.18); }
.dh-clone-source [data-dh-clone-source-panel][hidden] { display: none; }
.dh-clone-recorder { display: grid; gap: 12px; padding: 15px; border: 1px solid rgba(159,227,210,.2); border-radius: 9px; background: rgba(15,29,47,.72); }
.dh-clone-recorder > div { display: flex; align-items: center; gap: 10px; }
.dh-clone-recorder > div:last-of-type { gap: 8px; }
.dh-clone-recorder i { width: 9px; height: 9px; border-radius: 50%; background: #52667d; }
.dh-clone-recorder i.is-recording { background: #fb7185; box-shadow: 0 0 0 5px rgba(251,113,133,.12); animation: dh-recording-pulse 1.2s infinite; }
.dh-clone-recorder strong { color: #f9f8f3; font-size: 19px; font-variant-numeric: tabular-nums; }
.dh-clone-recorder span { color: #8396aa; font-size: 11px; }
.dh-clone-recorder small { color: #667b91; font-size: 10px; line-height: 1.5; }
.dh-clone-file-result { display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(6,18,31,.5); }
.dh-clone-file-result small { color: #73889e; font-size: 10px; }
.dh-clone-file-result small.is-error { color: #fb7185; }
.dh-clone-file-result small.is-valid { color: #9fe3d2; }
.dh-clone-file-result audio { width: 100%; height: 36px; }
@keyframes dh-recording-pulse { 50% { opacity: .48; transform: scale(.86); } }
.dh-clone-consent { display: flex; align-items: flex-start; gap: 9px; color: #899caf; font-size: 11px; line-height: 1.6; }
.dh-clone-consent input { margin-top: 3px; accent-color: #14b8a6; }
.dh-clone-privacy { margin: -5px 0 0; color: #64778b; font-size: 10px; line-height: 1.55; }
.dh-clone-modal > footer { justify-content: flex-end; border-top: 1px solid rgba(148,163,184,.13); }
.dh-clone-modal > footer > div { margin-right: auto; }
.dh-clone-modal > footer span,.dh-clone-modal > footer strong { display: block; }
.dh-clone-modal > footer span { color: #71859a; font-size: 10px; }
.dh-clone-modal > footer strong { margin-top: 3px; color: #c8efe6; font-size: 15px; }
.dh-clone-modal > footer .btn-primary { color: #0e2622; background: #9fe3d2; }
@media (max-width: 1380px) {
  .dh-editor { grid-template-columns: minmax(250px,.62fr) minmax(560px,1.8fr); }
  .dh-voice-settings { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .dh-selector-grid.template { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .dh-selector-mask { align-items: end; padding: 0; }
  .dh-selector-modal { width: 100%; height: min(92dvh, 820px); max-height: 92dvh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 16px 16px 0 0; }
  .dh-selector-modal > header { min-height: 54px; padding: 0 14px; }
  .dh-selector-modal > header h2 { font-size: 17px; }
  .dh-selector-modal > nav { min-height: 48px; padding: 0 14px; }
  .dh-selector-modal > nav button { min-width: 0; flex: 1; }
  .dh-selector-tools { align-items: stretch; flex-wrap: wrap; gap: 9px; padding: 10px 14px; }
  .dh-selector-tools > .dh-gender-filter, .dh-selector-tools > label:not(.dh-template-upload-action) { width: 100%; }
  .dh-selector-tools > label:not(.dh-template-upload-action) { min-width: 0; }
  .dh-selector-content { padding: 0 12px 12px; overscroll-behavior: contain; }
  .dh-selector-grid.template { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .dh-selector-grid.voice { grid-template-columns: 1fr; }
  .dh-selector-card.template .dh-selector-video video { pointer-events: none; }
  .dh-template-hover-hint { display: none; }
  .dh-selector-modal > footer { min-height: 66px; padding: 9px 12px max(9px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.22); }
  .dh-selector-modal > footer .btn { min-height: 46px; }
  .dh-selector-modal > footer .btn-primary { min-width: 136px; }
  .dh-template-upload-action { width: 100%; min-width: 0; flex-basis: 100%; }
  .dh-template-recording-tip { align-items: flex-start; }
  .dh-clone-modal > header,.dh-clone-modal > footer { padding: 16px; }
  .dh-clone-body { padding: 16px; }
  .dh-clone-modal > footer { flex-wrap: wrap; }
  .dh-clone-modal > footer > div { width: 100%; margin: 0 0 4px; }
}

.dh-workbench { display: grid; gap: 22px; color: #172033; }
.dh-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; min-height: 190px; padding: 30px 34px; border-radius: 28px; color: #fff; background: radial-gradient(circle at 82% 18%, rgba(109, 227, 255, .26), transparent 28%), radial-gradient(circle at 16% 86%, rgba(167, 139, 250, .28), transparent 30%), linear-gradient(132deg, #0b1020, #192454 52%, #123b52); box-shadow: 0 24px 55px rgba(12, 24, 54, .22); }
.dh-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%); transform: translateX(-80%); animation: dhShine 7s ease-in-out infinite; }
@keyframes dhShine { 0%, 60% { transform: translateX(-80%); } 82%, 100% { transform: translateX(80%); } }
.dh-hero .js-video-back { align-self: start; color: #fff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.09); }
.dh-hero > div > span, .dh-step-head div > span { display: block; margin-bottom: 7px; color: #81e6f2; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.dh-hero h2 { margin: 0 0 10px; color: #fff; font-size: clamp(24px, 3vw, 38px); line-height: 1.16; letter-spacing: -.04em; }
.dh-hero p { max-width: 680px; margin: 0; color: rgba(237,247,255,.74); line-height: 1.7; }
.dh-hero aside { position: relative; z-index: 1; min-width: 132px; padding: 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; text-align: center; background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.dh-hero aside b { display: block; margin-bottom: 5px; font-size: 24px; }
.dh-hero aside span { color: rgba(255,255,255,.68); font-size: 12px; }
.dh-flow { display: grid; gap: 18px; }
.dh-step { position: relative; overflow: hidden; padding: 26px; border: 1px solid #e7ebf4; border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 14px 38px rgba(35,48,86,.07); transition: border-color .2s, box-shadow .2s, opacity .2s; }
.dh-step.is-active { border-color: rgba(82, 91, 230, .26); box-shadow: 0 18px 48px rgba(76, 86, 210, .11); }
.dh-step.is-locked { opacity: .64; }
.dh-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.dh-step-head > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: #fff; font-style: normal; font-weight: 900; background: linear-gradient(135deg, #5c6cff, #25b6cd); box-shadow: 0 9px 20px rgba(84,103,236,.24); }
.dh-step-head div { flex: 1; }
.dh-step-head div > span { margin-bottom: 2px; color: #6576ed; }
.dh-step-head h3 { margin: 0; font-size: 20px; }
.dh-step-head > em { padding: 6px 10px; border-radius: 999px; color: #5866c9; font-size: 11px; font-style: normal; font-weight: 700; background: #f0f2ff; }
.dh-field { display: grid; gap: 9px; }
.dh-field > span, .dh-inline-fields label > span, .dh-checkout label > span { display: flex; justify-content: space-between; color: #3f4b65; font-size: 13px; font-weight: 700; }
.dh-field textarea { min-height: 150px; resize: vertical; padding: 18px; border: 1px solid #dfe4f0; border-radius: 18px; color: #172033; font: inherit; line-height: 1.8; background: #fafbfe; outline: none; transition: .2s; }
.dh-field textarea:focus, .dh-inline-fields select:focus, .dh-checkout select:focus { border-color: #7c86ed; background: #fff; box-shadow: 0 0 0 4px rgba(92,108,255,.09); }
.dh-inline-fields { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr); gap: 16px; margin: 16px 0 22px; }
.dh-inline-fields label { display: grid; gap: 9px; }
.dh-inline-fields select, .dh-checkout select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #dfe4f0; border-radius: 13px; color: #27324a; background: #fff; outline: none; }
.dh-clone-entry { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 12px; padding: 12px 14px; border: 1px solid #e5e9f3; border-radius: 15px; background: #f8f9fd; }
.dh-clone-entry > span { font-size: 13px; font-weight: 700; }
.dh-clone-entry > small { color: #8a94a8; font-size: 11px; }
.dh-section-label { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 12px; }
.dh-section-label span { font-size: 14px; font-weight: 800; }
.dh-section-label small { color: #8993a7; }
.dh-voice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.dh-voice-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-width: 0; padding: 13px; border: 1px solid #e5e9f2; border-radius: 16px; text-align: left; color: inherit; background: #fff; cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.dh-voice-card:hover { transform: translateY(-2px); border-color: #aeb6ef; box-shadow: 0 10px 22px rgba(48,57,108,.09); }
.dh-voice-card.is-selected { border-color: #6875e7; background: linear-gradient(135deg, #f5f6ff, #f2fbfc); box-shadow: 0 0 0 3px rgba(104,117,231,.1); }
.dh-voice-avatar { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: 14px; color: #fff; font-weight: 800; background: linear-gradient(135deg, #6b79e9, #37bdc6); }
.dh-voice-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dh-voice-card > span:nth-child(2) { min-width: 0; }
.dh-voice-card strong, .dh-audio-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.dh-voice-card small, .dh-audio-row small { display: block; margin-top: 4px; overflow: hidden; color: #8b95a9; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dh-play { display: grid; min-width: 38px; height: 28px; padding: 0 7px; place-items: center; border-radius: 999px; color: #5867d5; font-size: 10px; font-style: normal; background: #eef0ff; box-sizing: border-box; }
.dh-play.is-muted { color: #aab1c0; background: #f2f3f6; }
.dh-generate-audio { width: 100%; min-height: 48px; margin: 18px 0 14px; border-radius: 15px; }
.dh-audio-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dh-audio-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; min-width: 0; padding: 12px 14px; border: 1px solid #e5e9f2; border-radius: 14px; text-align: left; color: inherit; background: #fafbfe; cursor: pointer; }
.dh-audio-row.is-selected { border-color: #6875e7; background: #f4f5ff; box-shadow: inset 3px 0 #6875e7; }
.dh-audio-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #fff; background: #6474df; }
.dh-audio-icon img { width: 22px; height: 22px; object-fit: contain; }
.dh-audio-row em { color: #9aa2b2; font-size: 11px; font-style: normal; }
.dh-selected-audio, .dh-upload-ready { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #dfe7f4; border-radius: 16px; background: linear-gradient(135deg, #f8f9ff, #f4fbfc); }
.dh-selected-audio > span, .dh-upload-ready > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; background: #5d70dc; }
.dh-selected-audio > span img, .dh-upload-ready > span img { width: 25px; height: 25px; object-fit: contain; }
.dh-selected-audio > div, .dh-upload-ready > div { flex: 1; }
.dh-selected-audio strong, .dh-upload-ready strong { display: block; font-size: 13px; }
.dh-selected-audio small, .dh-upload-ready small { display: block; margin-top: 4px; color: #8590a5; font-size: 11px; }
.dh-selected-audio audio { width: min(320px, 38%); height: 36px; }
.dh-template-tools { display: flex; align-items: center; gap: 10px; margin: 18px 0 13px; }
.dh-template-tools > div { flex: 1; }
.dh-template-tools strong, .dh-template-tools small { display: block; }
.dh-template-tools small { margin-top: 4px; color: #8893a7; font-size: 11px; }
.dh-template-tools .is-disabled { pointer-events: none; opacity: .45; }
.dh-upload-ready { margin-bottom: 12px; border-color: #bde7db; background: #f2fbf8; }
.dh-upload-ready > span { background: #25a878; }
.dh-upload-ready button { border: 0; color: #8791a5; background: none; cursor: pointer; }
.dh-template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dh-template-card { position: relative; display: grid; gap: 6px; min-width: 0; padding: 8px 8px 12px; overflow: hidden; border: 1px solid #e5e9f2; border-radius: 18px; text-align: left; color: inherit; background: #fff; cursor: pointer; transition: .2s; }
.dh-template-card:hover { transform: translateY(-3px); box-shadow: 0 13px 28px rgba(39,49,92,.11); }
.dh-template-card.is-selected { border-color: #6474df; box-shadow: 0 0 0 3px rgba(100,116,223,.11); }
.dh-template-media { position: relative; display: block; aspect-ratio: 9 / 12; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #dfe5f5, #cbd9e3); }
.dh-template-media img, .dh-template-media video { width: 100%; height: 100%; object-fit: cover; }
.dh-template-media i { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 999px; color: #fff; font-size: 10px; font-style: normal; background: rgba(14,22,44,.64); backdrop-filter: blur(7px); }
.dh-template-card > strong { overflow: hidden; padding: 0 4px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dh-template-card > small { overflow: hidden; padding: 0 4px; color: #8b95a8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dh-template-delete { position: absolute; top: 13px; right: 13px; padding: 4px 7px; border-radius: 999px; color: #fff; font-size: 10px; background: rgba(193,50,65,.82); }
.dh-quota { position: relative; height: 28px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: #f0f2f7; }
.dh-quota b { position: absolute; inset: 0 auto 0 0; width: var(--quota); border-radius: inherit; background: linear-gradient(90deg, #6b77e6, #37b9c4); opacity: .22; }
.dh-quota span { position: relative; display: grid; height: 100%; place-items: center; color: #687389; font-size: 11px; }
.dh-checkout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.dh-checkout > div, .dh-checkout > label { display: grid; gap: 6px; min-width: 0; padding: 13px; border: 1px solid #e5e9f2; border-radius: 14px; background: #fafbfe; }
.dh-checkout > div span { color: #8993a7; font-size: 11px; }
.dh-checkout > div strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dh-submit-video { width: 100%; min-height: 52px; margin-top: 16px; border-radius: 16px; font-size: 15px; }
.dh-history { padding: 26px; border: 1px solid #e7ebf4; border-radius: 24px; background: #fff; box-shadow: 0 14px 38px rgba(35,48,86,.06); }
.dh-task-list { display: grid; gap: 11px; }
.dh-task-card { display: grid; grid-template-columns: 128px 1fr auto; align-items: center; gap: 16px; padding: 12px; border: 1px solid #e7eaf2; border-radius: 16px; background: #fafbfe; }
.dh-task-preview { display: grid; height: 76px; place-items: center; overflow: hidden; border-radius: 11px; background: #e9edf5; }
.dh-task-preview video { width: 100%; height: 100%; object-fit: cover; }
.dh-task-progress { position: relative; display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; background: conic-gradient(#6071df var(--progress), #d9deeb 0); }
.dh-task-progress::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #f7f8fb; }
.dh-task-progress span { position: relative; z-index: 1; font-size: 10px; font-weight: 800; }
.dh-task-copy { min-width: 0; }
.dh-task-copy > strong { margin-right: 8px; font-size: 14px; }
.dh-status { display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #6470c7; font-size: 10px; background: #eef0ff; }
.dh-status.completed { color: #148261; background: #e7f8f1; }
.dh-status.failed { color: #bd4151; background: #fdecef; }
.dh-task-copy small { display: block; margin-top: 7px; color: #8a94a8; }
.dh-task-copy p { margin: 6px 0 0; color: #bd4151; font-size: 11px; }
.dh-empty, .dh-error { display: grid; min-height: 92px; place-items: center; align-content: center; gap: 5px; padding: 18px; border: 1px dashed #d9deea; border-radius: 16px; color: #8b95a8; text-align: center; background: #fafbfe; }
.dh-empty strong, .dh-error strong { color: #4d5870; }
.dh-empty span { font-size: 12px; }
.dh-error { min-height: 300px; }
.dh-admin-nav { position: sticky; top: 8px; z-index: 8; justify-content: flex-start; margin-bottom: 16px; padding: 10px; border: 1px solid #e2e7f0; border-radius: 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); box-shadow: 0 10px 28px rgba(25,35,72,.08); }
.digital-human-admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.digital-human-admin-stats > div { padding: 20px; border: 1px solid #e2e7f0; border-radius: 18px; background: linear-gradient(145deg, #fff, #f5f7fc); box-shadow: 0 10px 24px rgba(31,42,80,.06); }
.digital-human-admin-stats b { display: block; color: #3b4b94; font-size: 26px; }
.digital-human-admin-stats span { color: #7d889e; font-size: 12px; }
.digital-human-admin-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.digital-human-admin-templates article { overflow: hidden; border: 1px solid #e3e7ef; border-radius: 16px; background: #fff; }
.digital-human-admin-templates video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #142624; }
.digital-human-admin-templates article > div { padding: 12px; }
.digital-human-admin-templates strong, .digital-human-admin-templates small { display: block; }
.digital-human-admin-templates small { margin-top: 4px; color: #8993a7; }
.digital-human-admin-templates article > div > p { display: -webkit-box; overflow: hidden; min-height: 34px; margin: 8px 0 0; color: #647063; font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.digital-human-admin-templates article.is-disabled { opacity: .68; }
.digital-human-admin-templates article.is-disabled video { filter: grayscale(.55); }
.digital-human-admin-templates .dh-admin-template-actions { display: flex; gap: 8px; padding-top: 0; }
.digital-human-admin-templates .dh-admin-template-actions .btn { flex: 1; margin: 0; }
.dh-admin-template-editor { scroll-margin-top: 20px; }
.dh-admin-template-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.dh-admin-template-editor-head h2, .dh-admin-template-editor-head p { margin: 0; }
.dh-admin-template-editor-head p { margin-top: 5px; }
.dh-admin-template-editor-head > span { padding: 6px 9px; border-radius: 999px; color: #647063; background: #f1f5f9; font-size: 10px; font-weight: 800; white-space: nowrap; }
.dh-admin-template-editor-head > span.is-editing { color: #0f766e; background: #ccfbf1; }
.dh-admin-template-current { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #ccfbf1; border-radius: 8px; color: #476277; background: #f0fdfa; font-size: 11px; }
.dh-admin-template-current a { color: #0f766e; font-weight: 800; white-space: nowrap; }
.digital-human-user-template-meta { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 12px; }
.digital-human-user-template-meta strong, .digital-human-user-template-meta small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.digital-human-user-template-meta em { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #647063; font-size: 11px; font-style: normal; }
.dh-user-template-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dh-user-template-head h1 { margin-bottom: 7px; }
.dh-user-template-head p { margin: 0; }
.dh-user-template-head > span { flex: 0 0 auto; padding: 7px 11px; border: 1px solid #c7d7f8; border-radius: 999px; color: #315fb8; background: #eef5ff; font-size: 12px; font-weight: 800; }
.dh-admin-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:14px; }
.dh-admin-section-head h2 { margin:0 0 5px; }
.dh-admin-section-head p { margin:0; max-width:760px; }
.dh-admin-vip-toggle { display:inline-flex; min-width:106px; align-items:center; gap:7px; padding:6px 9px; border:1px solid #d9e1ec; border-radius:999px; color:#69768a; background:#f4f6f9; cursor:pointer; font-size:11px; font-weight:800; white-space:nowrap; }
.dh-admin-vip-toggle span { position:relative; width:28px; height:16px; border-radius:999px; background:#b8c1cf; transition:background .2s ease; }
.dh-admin-vip-toggle span::after { content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(19,32,55,.25); transition:transform .2s ease; }
.dh-admin-vip-toggle.is-on { color:#8b5b0b; border-color:#efd38d; background:#fff9e8; }
.dh-admin-vip-toggle.is-on span { background:#dcae3f; }
.dh-admin-vip-toggle.is-on span::after { transform:translateX(12px); }
.dh-clone-table td { vertical-align:top; }
.dh-clone-table td strong,.dh-clone-table td small { display:block; }
.dh-clone-table td small { margin-top:5px; max-width:270px; color:#8490a3; line-height:1.45; }
.dh-clone-table audio { width:190px; max-width:24vw; height:34px; }
.dh-clone-table code { display:block; max-width:210px; overflow:hidden; color:#3f4e67; text-overflow:ellipsis; white-space:nowrap; }
.dh-user-template-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.dh-user-template-summary article { padding: 17px 19px; border: 1px solid #dfe7f2; border-radius: 14px; background: linear-gradient(145deg, #fff, #f5f8fd); box-shadow: 0 8px 22px rgba(35, 63, 114, .05); }
.dh-user-template-summary small, .dh-user-template-summary span { display: block; color: #7b879b; font-size: 11px; }
.dh-user-template-summary strong { display: block; margin: 4px 0 2px; color: #17356f; font-size: 24px; line-height: 1.15; }
.dh-user-template-panel { padding: 18px; }
.dh-user-template-filter { display: grid; grid-template-columns: minmax(240px, 1fr) 180px auto; align-items: end; gap: 12px; padding: 14px; border: 1px solid #e1e8f3; border-radius: 12px; background: #f7faff; }
.dh-user-template-filter label { display: grid; gap: 6px; min-width: 0; color: #526078; font-size: 12px; font-weight: 800; }
.dh-user-template-filter .btn { min-height: 40px; padding: 0 21px; }
.dh-user-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.dh-user-template-card { display: grid; grid-template-columns: minmax(190px, .88fr) minmax(0, 1.12fr); min-width: 0; overflow: hidden; border: 1px solid #dfe6f1; border-radius: 16px; background: #fff; box-shadow: 0 9px 24px rgba(31, 55, 96, .06); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.dh-user-template-card:hover { border-color: #b9caea; box-shadow: 0 14px 30px rgba(31, 55, 96, .11); transform: translateY(-2px); }
.dh-user-template-video { position: relative; min-height: 246px; overflow: hidden; background: #0b1529; }
.dh-user-template-video video { width: 100%; height: 100%; min-height: 246px; object-fit: cover; }
.dh-user-template-video > span { position: absolute; top: 10px; left: 10px; padding: 5px 9px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 800; backdrop-filter: blur(8px); }
.dh-user-template-video > span.is-active { background: rgba(16, 137, 101, .82); }
.dh-user-template-video > span.is-deleted { background: rgba(190, 52, 70, .82); }
.dh-user-template-video > a { position: absolute; top: 10px; right: 10px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; background: rgba(12, 23, 43, .58); font-size: 10px; font-weight: 800; text-decoration: none; backdrop-filter: blur(8px); }
.dh-user-template-copy { display: grid; align-content: start; gap: 13px; min-width: 0; padding: 16px; }
.dh-user-template-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dh-user-template-title > div { min-width: 0; }
.dh-user-template-title small { display: block; color: #8a96aa; font-size: 10px; }
.dh-user-template-title strong { display: block; overflow: hidden; margin-top: 3px; color: #14213d; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.dh-user-template-title > b { flex: 0 0 auto; padding: 4px 7px; border-radius: 7px; color: #5a6a85; background: #eef2f8; font-size: 10px; }
.dh-user-template-file { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.dh-user-template-file div { min-width: 0; padding: 9px; border: 1px solid #e7ecf4; border-radius: 10px; background: #fafcff; }
.dh-user-template-file dt { color: #8b96a9; font-size: 9px; }
.dh-user-template-file dd { overflow: hidden; margin: 3px 0 0; color: #34445f; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dh-user-template-owner { padding: 12px; border: 1px solid #cfe0fb; border-radius: 12px; background: linear-gradient(145deg, #f5f9ff, #edf4ff); }
.dh-user-template-owner header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dh-user-template-owner header span { color: #2c5bab; font-size: 11px; font-weight: 900; }
.dh-user-template-owner header b { color: #70809a; font-size: 9px; }
.dh-user-template-owner > strong { display: block; margin-top: 7px; overflow: hidden; color: #17356f; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.dh-user-template-owner > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 9px; margin-top: 8px; }
.dh-user-template-owner > div span { color: #8390a5; font-size: 9px; }
.dh-user-template-owner > div em { overflow: hidden; color: #3f4f69; font-size: 10px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dh-user-template-empty { grid-column: 1 / -1; display: grid; min-height: 220px; place-items: center; align-content: center; gap: 6px; border: 1px dashed #cfd8e7; border-radius: 16px; color: #8a96aa; background: #fafcff; }
.dh-user-template-empty strong { color: #53627a; }
.dh-user-template-panel .admin-pager { margin-top: 18px; }
@media (max-width: 1280px) { .dh-user-template-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .dh-user-template-summary, .dh-user-template-filter { grid-template-columns: 1fr; } .dh-user-template-card { grid-template-columns: 1fr; } .dh-user-template-video, .dh-user-template-video video { min-height: 230px; } }
.dh-task-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.dh-task-head h1 { margin-bottom:7px; }
.dh-task-head p { margin:0; }
.dh-task-head > span { padding:7px 11px; border:1px solid #c7d7f8; border-radius:999px; color:#315fb8; background:#eef5ff; font-size:12px; font-weight:800; }
.dh-task-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0; }
.dh-task-summary article { padding:17px 19px; border:1px solid #dfe7f2; border-radius:14px; background:linear-gradient(145deg,#fff,#f5f8fd); box-shadow:0 8px 22px rgba(35,63,114,.05); }
.dh-task-summary small,.dh-task-summary span { display:block; color:#7b879b; font-size:11px; }
.dh-task-summary strong { display:block; margin:4px 0 2px; color:#17356f; font-size:24px; }
.dh-result-cleanup { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; padding:18px 20px; border:1px solid #cfe6dd; border-radius:14px; background:linear-gradient(135deg,#f2fbf7,#f7fbff); }
.dh-result-cleanup b { color:#155f4e; font-size:15px; }
.dh-result-cleanup p { margin:5px 0 0; color:#668177; font-size:12px; }
.dh-task-panel { padding:18px; }
.dh-task-filter { display:grid; grid-template-columns:minmax(260px,1fr) 190px auto; align-items:end; gap:12px; margin-bottom:16px; padding:14px; border:1px solid #e1e8f3; border-radius:12px; background:#f7faff; }
.dh-task-filter label { display:grid; gap:6px; color:#526078; font-size:12px; font-weight:800; }
.dh-task-filter .btn { min-height:40px; padding:0 22px; }
.dh-task-table td { vertical-align:middle; }
.dh-task-table td strong,.dh-task-table td small { display:block; }
.dh-task-table td small { margin-top:5px; color:#8490a4; font-size:10px; }
.dh-audio-log-filter { grid-template-columns:minmax(260px,1fr) 160px 160px auto; }
.dh-audio-log-table { min-width:1180px; }
.dh-audio-log-table td:first-child { max-width:260px; }
.dh-audio-log-table audio { width:210px; height:34px; }
.dh-audio-log-error { width:min(360px,32vw); border:1px solid #f2c8cc; border-radius:10px; background:#fff7f8; }
.dh-audio-log-error summary { padding:8px 10px; color:#b73a48; cursor:pointer; font-size:11px; font-weight:700; }
.dh-audio-log-error p { margin:0; padding:0 10px 10px; color:#7b4750; font-size:10px; line-height:1.6; word-break:break-word; }
.dh-task-status { display:inline-flex; padding:5px 8px; border-radius:999px; color:#4d5d76; background:#eef2f7; font-size:10px; font-weight:900; }
.dh-task-status.status-completed { color:#167158; background:#e8f8f2; }
.dh-task-status.status-failed { color:#b23d4d; background:#fff0f2; }
.dh-task-status.status-submitted,.dh-task-status.status-queued,.dh-task-status.status-in_progress { color:#325ec2; background:#edf3ff; }
.dh-result-link { display:inline-flex; padding:6px 9px; border-radius:8px; color:#fff; background:#406dcc; text-decoration:none; font-size:11px; font-weight:800; }
.dh-task-panel .admin-pager { margin-top:18px; }
@media (max-width: 900px) { .dh-task-summary,.dh-task-filter { grid-template-columns:1fr; } .dh-result-cleanup { align-items:stretch; flex-direction:column; } }
@media (max-width: 1180px) { .dh-voice-grid, .dh-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dh-checkout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dh-hero { grid-template-columns: 1fr; padding: 24px; } .dh-hero aside { display: none; } .dh-step, .dh-history { padding: 18px; } .dh-inline-fields, .dh-audio-list, .dh-voice-grid, .dh-template-grid, .dh-checkout { grid-template-columns: 1fr; } .dh-template-tools { align-items: stretch; flex-direction: column; } .dh-selected-audio { align-items: flex-start; flex-wrap: wrap; } .dh-selected-audio audio { width: 100%; } .dh-task-card { grid-template-columns: 90px 1fr; } .dh-task-actions { grid-column: 1 / -1; } }

/* 智能体工作日志：任务级摘要 + 画布 + 可展开的完整审计现场 */
.workflow-log-page-head { align-items: flex-start; }
.workflow-log-security { padding: 9px 13px; border: 1px solid #c7d2fe; border-radius: 999px; color: #4338ca; background: #eef2ff; font-size: 12px; white-space: nowrap; }
.workflow-log-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.workflow-log-summary article { min-height: 94px; padding: 17px 19px; border: 1px solid #e5e7eb; border-radius: 16px; background: linear-gradient(145deg, #fff, #f6f5ef); box-shadow: 0 8px 22px rgba(20, 38, 36, .04); }
.workflow-log-summary small { display: block; color: #647063; font-size: 12px; }
.workflow-log-summary strong { display: block; margin-top: 7px; color: #142624; font-size: 25px; }
.workflow-log-filter { display: grid; grid-template-columns: minmax(190px, 1.5fr) 110px 126px 126px 154px 154px auto auto; gap: 9px; align-items: end; }
.workflow-log-filter .compact { min-width: 0; }
.workflow-log-date { display: grid; gap: 4px; color: #647063; font-size: 11px; }
.workflow-log-date .admin-input { min-width: 0; }
.workflow-log-list { display: grid; gap: 12px; margin-top: 16px; }
.workflow-log-card { overflow: hidden; border: 1px solid #e5e7de; border-radius: 17px; background: #fff; box-shadow: 0 8px 26px rgba(20, 38, 36, .04); }
.workflow-log-card.status-failed,.workflow-log-card.status-paused { border-left: 4px solid #f97316; }
.workflow-log-card-main { display: grid; grid-template-columns: minmax(300px, 1.5fr) minmax(150px, .7fr) minmax(130px, .55fr) minmax(160px, .65fr); width: 100%; padding: 17px 19px; border: 0; background: transparent; text-align: left; cursor: pointer; gap: 22px; align-items: center; }
.workflow-log-card-main:hover { background: #f6f5ef; }
.workflow-log-card-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.workflow-log-card-title div { min-width: 0; }
.workflow-log-card-title strong,.workflow-log-card-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-log-card-title strong { color: #142624; font-size: 15px; }
.workflow-log-card-title small,.workflow-log-card-current span,.workflow-log-card-time span { margin-top: 5px; color: #647063; font-size: 11px; }
.workflow-log-state { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: 5px 9px; border-radius: 999px; color: #4d584a; background: #f1f5f9; font-size: 11px; font-weight: 700; white-space: nowrap; }
.workflow-log-state.running,.workflow-log-state.generating,.workflow-log-state.reviewing { color: #0c6b60; background: #d9efea; }
.workflow-log-state.completed,.workflow-log-state.success { color: #047857; background: #d1fae5; }
.workflow-log-state.waiting { color: #a16207; background: #fef3c7; }
.workflow-log-state.paused,.workflow-log-state.failed { color: #b91c1c; background: #fee2e2; }
.workflow-log-card-progress { display: flex; align-items: center; gap: 9px; }
.workflow-log-card-progress i { position: relative; overflow: hidden; flex: 1; height: 7px; border-radius: 999px; background: #e5e7de; }
.workflow-log-card-progress b { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.workflow-log-card-progress span { color: #4d584a; font-size: 12px; font-weight: 700; }
.workflow-log-card-current small,.workflow-log-card-current strong,.workflow-log-card-current span,.workflow-log-card-time small,.workflow-log-card-time strong,.workflow-log-card-time span { display: block; }
.workflow-log-card-current small,.workflow-log-card-time small { color: #98a294; font-size: 10px; }
.workflow-log-card-current strong,.workflow-log-card-time strong { margin-top: 3px; color: #334155; font-size: 12px; }
.workflow-log-card-counts { display: flex; align-items: center; gap: 13px; padding: 10px 19px; border-top: 1px solid #f1f5f9; color: #647063; background: #fbfdff; font-size: 11px; }
.workflow-log-card-counts em { color: #c2410c; font-style: normal; font-weight: 700; }
.workflow-log-card-counts em.ok { color: #0f7d6e; }
.workflow-log-card-counts .btn { margin-left: auto; }
.workflow-log-card-error { margin: 0; padding: 9px 19px; border-top: 1px solid #fed7aa; color: #9a3412; background: #fff7ed; font-size: 12px; }
.workflow-log-card-error strong { margin-right: 9px; }

.workflow-log-overlay { position: fixed; z-index: 1200; inset: 0; padding: 22px; overflow: auto; background: rgba(20, 38, 36, .76); backdrop-filter: blur(8px); }
.workflow-log-dialog { width: min(1500px, calc(100vw - 44px)); min-height: calc(100vh - 44px); margin: 0 auto; overflow: hidden; border-radius: 22px; background: #f4f7fb; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.workflow-log-loading { display: flex; min-height: calc(100vh - 44px); align-items: center; justify-content: center; gap: 14px; color: #334155; }
.workflow-log-loading span { width: 22px; height: 22px; border: 3px solid #c7d2fe; border-top-color: #4f46e5; border-radius: 50%; animation: workflow-log-spin .8s linear infinite; }
@keyframes workflow-log-spin { to { transform: rotate(360deg); } }
.workflow-log-detail-head { position: sticky; z-index: 20; top: -22px; display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; color: #fff; background: linear-gradient(105deg, #132523, #1e293b 62%, #312e81); box-shadow: 0 8px 24px rgba(20, 38, 36, .18); }
.workflow-log-detail-head > div:first-child small,.workflow-log-detail-head > div:first-child strong,.workflow-log-detail-head > div:first-child p { display: block; }
.workflow-log-detail-head > div:first-child small { color: #a5b4fc; font-size: 10px; letter-spacing: .12em; }
.workflow-log-detail-head > div:first-child strong { margin-top: 3px; font-size: 18px; }
.workflow-log-detail-head > div:first-child p { margin: 4px 0 0; color: #cfd2c8; font-size: 11px; }
.workflow-log-detail-head > div:last-child { display: flex; align-items: center; gap: 10px; }
.workflow-log-detail-head .btn { color: #fff; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); }
.workflow-log-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 20px 0; }
.workflow-log-overview > div { min-height: 93px; padding: 15px 16px; border: 1px solid #e5e7de; border-radius: 15px; background: #fff; }
.workflow-log-overview small,.workflow-log-overview strong,.workflow-log-overview span { display: block; }
.workflow-log-overview small { color: #98a294; font-size: 10px; }
.workflow-log-overview strong { margin-top: 5px; color: #142624; font-size: 18px; }
.workflow-log-overview span { overflow: hidden; margin-top: 5px; color: #647063; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-log-overview .has-error { border-color: #fdba74; background: #fff7ed; }
.workflow-log-overview .has-error strong { color: #c2410c; }
.workflow-log-run-switch { display: flex; align-items: center; gap: 7px; margin: 12px 20px 0; padding: 10px 12px; overflow-x: auto; border: 1px solid #dbe3ef; border-radius: 13px; background: #fff; }
.workflow-log-run-switch > span { flex: 0 0 auto; margin-right: 4px; color: #647063; font-size: 10px; }
.workflow-log-run-switch button { display: grid; flex: 0 0 auto; gap: 2px; min-width: 106px; padding: 7px 10px; border: 1px solid #e5e7de; border-radius: 9px; color: #4d584a; background: #f6f5ef; text-align: left; cursor: pointer; }
.workflow-log-run-switch button:hover:not(:disabled) { border-color: #a5b4fc; background: #eef2ff; }
.workflow-log-run-switch button.active { border-color: #6366f1; color: #3730a3; background: #eef2ff; }
.workflow-log-run-switch button:disabled { cursor: default; opacity: 1; }
.workflow-log-run-switch b { font-size: 11px; }
.workflow-log-run-switch small { color: #98a294; font-size: 9px; }
.workflow-log-rerun-reason { margin: 8px 20px 0; padding: 8px 11px; border-radius: 9px; color: #7c2d12; background: #fff7ed; font-size: 10px; }
.workflow-log-rerun-reason strong { color: #9a3412; }
.workflow-log-context { margin: 12px 20px 0; border: 1px solid #e5e7de; border-radius: 13px; background: #fff; }
.workflow-log-context summary { padding: 11px 14px; color: #4d584a; cursor: pointer; font-size: 12px; font-weight: 700; }
.workflow-log-context > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px 12px; }
.workflow-log-context article { min-width: 0; }
.workflow-log-context h4 { margin: 0 0 6px; color: #4d584a; font-size: 11px; }
.workflow-log-context pre { max-height: 210px; }
.workflow-log-canvas-section,.workflow-log-trace-section { margin: 14px 20px 0; padding: 15px; border: 1px solid #e5e7de; border-radius: 17px; background: #fff; }
.workflow-log-canvas-host { height: 530px; overflow: hidden; border: 1px solid #dbe3ef; border-radius: 14px; background: #142624; }
.workflow-log-canvas-host .workflow-editor { height: 100%; min-height: 0; }
.workflow-log-canvas-host .workflow-canvas-shell { min-height: 0; }
.workflow-log-canvas-host .workflow-save-state { display: none; }
.workflow-log-canvas-host [data-history-undo],.workflow-log-canvas-host [data-history-redo],.workflow-log-canvas-host [data-auto-layout],.workflow-log-canvas-host [data-run-check] { display: none; }
.workflow-log-canvas-host .workflow-node.log-state-running,.workflow-log-canvas-host .workflow-node.log-state-generating,.workflow-log-canvas-host .workflow-node.log-state-reviewing { box-shadow: 0 0 0 3px #60a5fa, 0 15px 30px rgba(37, 99, 235, .24); }
.workflow-log-canvas-host .workflow-node.log-state-success { box-shadow: 0 0 0 3px #34d399, 0 15px 30px rgba(5, 150, 105, .2); }
.workflow-log-canvas-host .workflow-node.log-state-failed,.workflow-log-canvas-host .workflow-node.log-state-paused { box-shadow: 0 0 0 3px #fb7185, 0 15px 30px rgba(225, 29, 72, .25); }
.workflow-log-node-states { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.workflow-log-node-states span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 9px; border-radius: 8px; color: #4d584a; background: #f1f5f9; font-size: 10px; }
.workflow-log-node-states b { color: #142624; }
.workflow-log-node-states em { max-width: 280px; overflow: hidden; color: #b91c1c; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.workflow-log-trace-section { margin-bottom: 20px; }
.workflow-log-trace-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.workflow-log-trace-head strong,.workflow-log-trace-head small { display: block; }
.workflow-log-trace-head strong { color: #142624; font-size: 15px; }
.workflow-log-trace-head small { margin-top: 4px; color: #647063; font-size: 10px; }
.workflow-log-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #f1f5f9; }
.workflow-log-tabs button { padding: 6px 9px; border: 0; border-radius: 7px; color: #647063; background: transparent; cursor: pointer; font-size: 10px; }
.workflow-log-tabs button.active { color: #3730a3; background: #fff; box-shadow: 0 2px 8px rgba(20, 38, 36, .1); font-weight: 700; }
.workflow-log-trace-grid { display: grid; grid-template-columns: minmax(370px, .85fr) minmax(520px, 1.15fr); gap: 13px; align-items: start; }
.workflow-log-timeline { max-height: 720px; overflow: auto; padding: 4px 6px 4px 2px; }
.workflow-log-timeline-item { position: relative; display: grid; grid-template-columns: 15px 105px minmax(0, 1fr); width: 100%; padding: 8px 8px 14px 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.workflow-log-timeline-item[hidden] { display: none; }
.workflow-log-timeline-item::before { position: absolute; top: 23px; bottom: -7px; left: 6px; width: 1px; content: ''; background: #cfd2c8; }
.workflow-log-timeline-item:last-child::before { display: none; }
.workflow-log-timeline-item > i { z-index: 1; width: 13px; height: 13px; margin-top: 5px; border: 3px solid #fff; border-radius: 50%; background: #98a294; box-shadow: 0 0 0 1px #cfd2c8; }
.workflow-log-timeline-item.success > i,.workflow-log-timeline-item.completed > i { background: #10b981; }
.workflow-log-timeline-item.running > i { background: #3b82f6; }
.workflow-log-timeline-item.has-error > i,.workflow-log-timeline-item.failed > i { background: #ef4444; }
.workflow-log-timeline-item time { padding: 4px 7px 0; color: #98a294; font-size: 9px; }
.workflow-log-timeline-item > div { padding: 10px 11px; border: 1px solid #e5e7de; border-radius: 11px; background: #f6f5ef; }
.workflow-log-timeline-item:hover > div,.workflow-log-timeline-item.is-active > div { border-color: #a5b4fc; background: #eef2ff; }
.workflow-log-timeline-item > div span,.workflow-log-timeline-item > div strong,.workflow-log-timeline-item > div p,.workflow-log-timeline-item > div small { display: block; }
.workflow-log-timeline-item > div span { color: #6366f1; font-size: 9px; font-weight: 700; }
.workflow-log-timeline-item > div strong { margin-top: 3px; color: #1e293b; font-size: 12px; }
.workflow-log-timeline-item > div p { margin: 5px 0 0; color: #647063; font-size: 10px; line-height: 1.5; }
.workflow-log-timeline-item.has-error > div p { color: #b91c1c; }
.workflow-log-timeline-item > div small { margin-top: 5px; color: #98a294; font-size: 9px; }
.workflow-log-timeline-item > em { position: absolute; left: 18px; top: 0; color: #98a294; font-size: 8px; font-style: normal; }
.workflow-log-record { position: sticky; top: 82px; min-height: 420px; max-height: 720px; overflow: auto; border: 1px solid #dbe3ef; border-radius: 13px; background: #f6f5ef; }
.workflow-log-record-empty,.workflow-log-record-loading { display: flex; min-height: 420px; flex-direction: column; align-items: center; justify-content: center; padding: 30px; color: #647063; text-align: center; }
.workflow-log-record-empty strong { color: #334155; }
.workflow-log-record-empty p { max-width: 430px; font-size: 11px; line-height: 1.7; }
.workflow-log-record > header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid #e5e7de; background: rgba(255, 255, 255, .96); }
.workflow-log-record > header small,.workflow-log-record > header strong { display: block; }
.workflow-log-record > header small { color: #98a294; font-size: 9px; text-transform: uppercase; }
.workflow-log-record > header strong { margin-top: 2px; color: #142624; font-size: 13px; }
.workflow-log-redaction { margin: 10px 12px; padding: 8px 10px; border-radius: 8px; color: #92400e; background: #fffbeb; font-size: 10px; }
.workflow-log-record details { position: relative; margin: 9px 11px; border: 1px solid #e5e7de; border-radius: 10px; background: #fff; }
.workflow-log-record details summary { padding: 10px 54px 10px 11px; color: #334155; cursor: pointer; font-size: 11px; font-weight: 700; }
.workflow-log-record details > button { position: absolute; z-index: 1; top: 6px; right: 7px; padding: 4px 7px; border: 1px solid #e5e7de; border-radius: 6px; color: #647063; background: #fff; cursor: pointer; font-size: 9px; }
.workflow-log-record pre { max-height: 430px; margin: 0 8px 8px; border-radius: 8px; font-size: 10px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 1180px) {
  .workflow-log-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workflow-log-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .workflow-log-card-main { grid-template-columns: 1.4fr .7fr .6fr; }
  .workflow-log-card-time { display: none; }
  .workflow-log-trace-grid { grid-template-columns: 1fr; }
  .workflow-log-record { position: relative; top: auto; max-height: none; }
}

/* PC command dashboard */
.command-dashboard {
  display: grid;
  gap: 18px;
  color: #dbe7f3;
}

.command-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 364px;
  gap: 22px;
  min-height: 318px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(159, 227, 210, .20);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(13, 20, 34, .96) 0%, rgba(8, 21, 33, .96) 48%, rgba(10, 15, 28, .98) 100%),
    linear-gradient(90deg, rgba(159, 227, 210, .10), rgba(245, 158, 11, .08));
  box-shadow: 0 22px 58px rgba(0, 0, 0, .22);
}

.command-hero.has-office-promo {
  grid-template-columns: minmax(440px, 1fr) minmax(300px, 380px) 364px;
  gap: 18px;
  min-height: 390px;
}

.command-hero::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, #000, transparent 84%);
  content: "";
  pointer-events: none;
}

.command-hero-copy,
.command-office-promo,
.command-hero-stage,
.command-profile-card,
.command-metric-card,
.command-panel {
  position: relative;
  z-index: 1;
}

.command-hero-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.command-office-promo {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: stretch;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(103, 232, 249, .22);
  border-radius: 10px;
  background: rgba(5, 18, 30, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 34px rgba(0, 0, 0, .2);
}

.command-office-preview,
.command-office-cta {
  appearance: none;
  width: 100%;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.command-office-preview {
  position: relative;
  display: block;
  min-height: 244px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 7px;
  background: #07131f;
}

.command-office-preview::after {
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(2, 8, 18, .72));
  content: "";
  pointer-events: none;
}

.command-office-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 244px;
  object-fit: cover;
  object-position: center;
  transition: transform 220ms ease, filter 220ms ease;
}

.command-office-preview > span {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(103, 232, 249, .34);
  border-radius: 999px;
  color: #dff8ff;
  background: rgba(3, 15, 26, .84);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}

.command-office-preview > span strong {
  color: #7ad9d2;
  font-size: 9px;
  letter-spacing: .1em;
}

.command-office-preview:hover img,
.command-office-preview:focus-visible img {
  filter: brightness(1.06);
  transform: scale(1.018);
}

.command-office-preview:focus-visible,
.command-office-cta:focus-visible {
  outline: 2px solid rgba(103, 232, 249, .9);
  outline-offset: 2px;
}

.command-office-cta {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 54px;
  margin-top: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(103, 232, 249, .46);
  border-radius: 7px;
  color: #06231f;
  background: linear-gradient(135deg, #8fdfc9, #7ad9d2);
  box-shadow: 0 10px 24px rgba(20, 184, 166, .18), inset 0 1px 0 rgba(255, 255, 255, .34);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.command-office-cta span {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.command-office-cta small {
  color: rgba(6, 35, 31, .68);
  font-size: 9px;
  font-weight: 700;
}

.command-office-cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 13px 28px rgba(20, 184, 166, .25), inset 0 1px 0 rgba(255, 255, 255, .42);
  transform: translateY(-1px);
}

.command-eyebrow,
.command-panel-head span,
.command-tool-card span,
.command-profile-card span,
.command-metric-card span,
.command-profile-matrix span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.command-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(159, 227, 210, .28);
  border-radius: 8px;
  background: rgba(20, 184, 166, .10);
  letter-spacing: .04em;
}

.command-hero h1 {
  max-width: 820px;
  margin: 18px 0 12px;
  color: #fff;
  font-size: 38px;
  line-height: 1.16;
  letter-spacing: 0;
}

.command-hero p,
.command-panel-head p,
.command-profile-card p,
.command-tool-card p,
.command-flow-step p,
.command-action-list small,
.command-notice span,
.command-metric-card small {
  margin: 0;
  color: #98a294;
  line-height: 1.72;
}

.command-hero-copy > p {
  max-width: 760px;
  font-size: 15px;
}

.command-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.command-hero-actions .btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
}

.command-hero-actions .btn img {
  width: 22px;
  height: 22px;
  margin-right: 8px;
  object-fit: contain;
}

.command-hero-stage {
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .50)),
    linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(245, 158, 11, .06));
}

.command-stage-top {
  display: grid;
  gap: 8px;
}

.command-stage-top span,
.command-stage-metrics span {
  color: #98a294;
  font-size: 12px;
  font-weight: 800;
}

.command-stage-top strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.command-stage-window {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(159, 227, 210, .16);
  border-radius: 8px;
  background: rgba(2, 8, 18, .34);
}

.command-stage-window img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(8, 15, 28, .34);
}

.command-stage-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.command-stage-metrics div,
.command-profile-matrix div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  background: rgba(8, 15, 28, .42);
}

.command-stage-metrics strong,
.command-profile-matrix strong {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #fff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-status-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.25fr) repeat(3, minmax(180px, .58fr));
  gap: 12px;
}

.command-editing-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 2.22fr);
  gap: 26px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(53, 193, 172, .22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 14% 20%, rgba(13, 148, 136, .18), transparent 34%),
    linear-gradient(118deg, rgba(7, 27, 43, .96), rgba(9, 18, 34, .98) 56%, rgba(10, 24, 45, .95));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 18px 50px rgba(0, 0, 0, .18);
}

.command-editing-showcase::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #9fe3d2, #38bdf8 62%, transparent);
  content: "";
}

.command-editing-copy {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 8px 4px 8px 10px;
}

.command-editing-copy > span {
  color: #7ad9d2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.command-editing-copy h2 {
  margin: 10px 0 0;
  color: #f9f8f3;
  font-size: clamp(27px, 2.2vw, 38px);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.command-editing-copy p {
  max-width: 380px;
  margin: 13px 0 0;
  color: #94a9bd;
  font-size: 13px;
  line-height: 1.72;
}

.command-editing-copy button {
  min-height: 44px;
  margin-top: 20px;
  padding: 0 20px;
  border: 1px solid rgba(159, 227, 210, .72);
  border-radius: 7px;
  color: #04201f;
  background: #62e5d1;
  box-shadow: 0 12px 26px rgba(20, 184, 166, .2);
  cursor: pointer;
  font-weight: 900;
  transition: transform .18s, filter .18s, box-shadow .18s;
}

.command-editing-copy button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 16px 30px rgba(20, 184, 166, .27);
}

.command-editing-copy small {
  margin-top: 10px;
  color: #647b90;
  font-size: 10px;
}

.command-editing-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.command-editing-template,
.command-editing-template-skeleton {
  min-width: 0;
  border-radius: 8px;
}

.command-editing-template {
  display: grid;
  gap: 9px;
  padding: 0;
  border: 0;
  color: #e8f3fc;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.command-editing-template-media {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 8px;
  background: #07101d;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}

.command-editing-template:hover .command-editing-template-media {
  border-color: rgba(159, 227, 210, .68);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .34), 0 0 0 1px rgba(159, 227, 210, .08);
}

.command-editing-template-media img,
.command-editing-template-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.command-editing-template-media video {
  z-index: 1;
  opacity: 0;
  transition: opacity .35s ease;
}

.command-editing-template-media video.is-playing {
  opacity: 1;
}

.command-editing-template-media em {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: #e8f7ff;
  background: rgba(4, 10, 19, .72);
  backdrop-filter: blur(7px);
  font-size: 9px;
  font-style: normal;
}

.command-editing-template strong {
  overflow: hidden;
  padding: 0 2px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-editing-template-skeleton {
  display: block;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(148, 163, 184, .1);
  background: linear-gradient(105deg, rgba(15, 29, 48, .7) 20%, rgba(25, 45, 67, .82) 42%, rgba(15, 29, 48, .7) 64%);
  background-size: 220% 100%;
  animation: command-editing-loading 1.5s linear infinite;
}

.command-editing-empty {
  display: grid;
  min-height: 220px;
  grid-column: 1 / -1;
  place-content: center;
  color: #8fa6ba;
  text-align: center;
}

.command-editing-empty strong,
.command-editing-empty span { display: block; }
.command-editing-empty strong { color: #e5eef7; }
.command-editing-empty span { margin-top: 8px; font-size: 11px; }

@keyframes command-editing-loading {
  to { background-position: -220% 0; }
}

.command-profile-card,
.command-metric-card {
  min-width: 0;
  min-height: 126px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  color: #dbe7f3;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .74), rgba(8, 15, 28, .58)),
    rgba(8, 15, 28, .52);
  text-align: left;
}

.command-profile-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.command-profile-card img {
  width: 78px;
  height: 78px;
  object-fit: contain;
}

.command-profile-card strong,
.command-metric-card strong {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  color: #fff;
  font-size: 24px;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-profile-card p {
  overflow: hidden;
  margin-top: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-profile-card em,
.command-notice em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: #06231f;
  background: #8fdfc9;
  font-style: normal;
  font-weight: 900;
}

.command-metric-card {
  display: grid;
  align-content: center;
  gap: 4px;
}

.command-metric-card.is-action {
  cursor: pointer;
}

.command-profile-card:hover,
.command-metric-card.is-action:hover,
.command-tool-card:hover,
.command-flow-step:hover,
.command-action-list button:hover,
.command-notice:hover {
  border-color: rgba(159, 227, 210, .42);
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .12), rgba(8, 15, 28, .62)),
    rgba(8, 15, 28, .58);
  transform: translateY(-1px);
}

.command-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
}

.command-left,
.command-right {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}

.command-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(20, 38, 36, .62);
}

.command-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.command-panel-head.compact {
  align-items: center;
}

.command-panel-head h2 {
  margin: 7px 0 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.25;
}

.command-panel-head.compact h2 {
  font-size: 18px;
}

/* 首页智能体采用单行紧凑工作坞，不与主功能矩阵争抢首屏空间。 */
.command-agent-dock {
  padding: 15px 16px 16px;
}

.command-agent-dock-head {
  margin-bottom: 12px;
}

.command-agent-all {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(159, 227, 210, .24);
  border-radius: 8px;
  color: #a5f3fc;
  background: rgba(8, 15, 28, .46);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.command-agent-all:hover {
  border-color: rgba(159, 227, 210, .48);
  color: #fff;
  background: rgba(20, 184, 166, .12);
}

.command-agent-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(124px, 1fr));
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(159, 227, 210, .36) rgba(8, 15, 28, .45);
}

.command-agent-rail::-webkit-scrollbar {
  height: 6px;
}

.command-agent-rail::-webkit-scrollbar-track {
  border-radius: 8px;
  background: rgba(8, 15, 28, .45);
}

.command-agent-rail::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(159, 227, 210, .36);
}

.command-agent-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 124px;
  min-height: 66px;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 8px;
  color: #dbe7f3;
  background: rgba(8, 15, 28, .48);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.command-agent-item:hover,
.command-agent-item:focus-visible {
  border-color: rgba(159, 227, 210, .44);
  background: rgba(20, 184, 166, .10);
  outline: none;
  transform: translateY(-1px);
}

.command-agent-item .ai-agent-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.command-agent-item > span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.command-agent-item strong,
.command-agent-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-agent-item strong {
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
}

.command-agent-item small {
  color: #8295a8;
  font-size: 11px;
  line-height: 1.35;
}

.command-flow-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.command-flow-step {
  display: grid;
  align-content: space-between;
  min-height: 140px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  color: #dbe7f3;
  background: rgba(8, 15, 28, .48);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.command-flow-step span {
  color: #f5b544;
  font-size: 12px;
  font-weight: 900;
}

.command-flow-step strong {
  display: block;
  margin: 20px 0 8px;
  color: #fff;
  font-size: 17px;
  line-height: 1.32;
}

.command-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.command-tool-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 7px 12px;
  min-height: 154px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  color: #dbe7f3;
  background: rgba(8, 15, 28, .48);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.command-tool-card img {
  grid-row: 1 / span 3;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.command-tool-card span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(159, 227, 210, .18);
  border-radius: 8px;
  background: rgba(20, 184, 166, .08);
}

.command-tool-card strong {
  overflow: hidden;
  color: #fff;
  font-size: 19px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-tool-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.command-tool-card.is-featured {
  border-color: rgba(110, 231, 183, .34);
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .16), rgba(8, 15, 28, .58)),
    rgba(8, 15, 28, .52);
}

.command-notice {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, .24);
  border-radius: 8px;
  color: #dbe7f3;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, .12), rgba(20, 184, 166, .08)),
    rgba(8, 15, 28, .48);
  cursor: pointer;
  text-align: left;
}

.command-notice.is-empty {
  cursor: default;
}

.command-notice img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.command-notice strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-notice span {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-profile-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.command-action-list {
  display: grid;
  gap: 10px;
}

.command-action-list button {
  display: grid;
  gap: 5px;
  min-height: 70px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  color: #dbe7f3;
  background: rgba(8, 15, 28, .46);
  cursor: pointer;
  text-align: left;
}

.command-action-list strong {
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
}

@media (max-width: 1440px) {
  .command-hero {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .command-hero.has-office-promo {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  }

  .command-hero.has-office-promo .command-hero-stage {
    grid-column: 1 / -1;
    grid-template-columns: minmax(170px, .7fr) minmax(360px, 1.5fr) minmax(300px, 1fr);
    align-items: center;
    padding: 14px;
  }

  .command-hero.has-office-promo .command-stage-top {
    align-content: center;
  }

  .command-hero.has-office-promo .command-stage-window div {
    min-height: 90px;
  }

  .command-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-editing-showcase {
    grid-template-columns: minmax(240px, .7fr) minmax(0, 2.3fr);
    gap: 18px;
  }

  .command-editing-template-grid { gap: 10px; }

  .command-main-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .command-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .command-hero,
  .command-main-grid {
    grid-template-columns: 1fr;
  }

  .command-hero-stage {
    display: none;
  }

  .command-office-preview,
  .command-office-preview img {
    min-height: 300px;
  }

  .command-flow-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .command-agent-rail {
    grid-template-columns: repeat(6, 142px);
  }

  .command-editing-showcase { grid-template-columns: 1fr; }
  .command-editing-copy { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 20px; }
  .command-editing-copy > span,.command-editing-copy h2,.command-editing-copy p { grid-column: 1; }
  .command-editing-copy button { grid-column: 2; grid-row: 1 / 5; align-self: center; margin-top: 0; }
  .command-editing-copy small { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .command-hero {
    padding: 18px;
  }

  .command-hero h1 {
    font-size: 28px;
  }

  .command-hero-actions,
  .command-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .command-agent-dock-head {
    align-items: center;
    flex-direction: row;
  }

  .command-hero-actions .btn {
    width: 100%;
  }

  .command-office-preview,
  .command-office-preview img {
    min-height: 220px;
  }

  .command-status-grid,
  .command-tool-grid,
  .command-flow-row,
  .command-profile-matrix {
    grid-template-columns: 1fr;
  }

  .command-profile-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .command-profile-card img {
    width: 64px;
    height: 64px;
  }

  .command-profile-card em {
    grid-column: 1 / -1;
    width: 100%;
  }

  .command-editing-showcase { padding: 18px; }
  .command-editing-copy { display: flex; align-items: flex-start; }
  .command-editing-copy button { width: 100%; margin-top: 16px; }
  .command-editing-template-grid { grid-template-columns: repeat(4, minmax(132px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
}

/* 代理系统后台：把配置、开通、账本和结算保持为统一的财务管理界面。 */
.agent-admin-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.agent-admin-heading span { color: #2563eb; font-size: 11px; font-weight: 800; }
.agent-admin-heading h1 { margin: 5px 0 0; color: #182033; font-size: 28px; }
.agent-admin-heading p { max-width: 850px; margin: 7px 0 0; color: #72798a; font-size: 13px; line-height: 1.7; }
.agent-admin-heading > b { padding: 8px 12px; border: 1px solid #dce3ee; border-radius: 7px; color: #4b5568; background: #fff; font-size: 13px; white-space: nowrap; }
.agent-open-card { margin-bottom: 18px; border-top: 3px solid #2563eb; }
.agent-filter-bar { margin: 0 0 14px; }
.agent-user-table td, .agent-ledger-table td { vertical-align: top; }
.agent-user-table small, .agent-ledger-table small { display: inline-block; margin-top: 4px; color: #8b92a2; }
.agent-ledger-table tr.is-selected td { background: #f3f7ff; }
.agent-money-pending { color: #b45309; }
.agent-ledger-detail { margin-top: 18px; border-top: 3px solid #0f766e; }
.agent-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.agent-detail-head span { color: #0f766e; font-size: 11px; font-weight: 800; }
.agent-detail-head h2 { margin: 4px 0 0; font-size: 19px; }
.agent-settlement-mini { display: grid; gap: 6px; margin-top: 14px; padding: 13px; border: 1px solid #e5e8ef; border-radius: 7px; background: #f6f5ef; }
.agent-settlement-mini strong { color: #303747; font-size: 13px; }
.agent-settlement-mini span { color: #747b8b; font-size: 12px; }

/* 用户代理权益：深色资产台突出收益状态，明细表保持高密度可核对。 */
.agent-income-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr); overflow: hidden; border: 1px solid rgba(53, 193, 172, .24); border-radius: 8px; background: #071421; box-shadow: 0 18px 42px rgba(1, 8, 18, .24); }
.agent-income-identity { padding: 34px; background: linear-gradient(110deg, rgba(13, 148, 136, .16), transparent 70%); }
.agent-income-identity > span, .agent-income-heading span { color: #9fe3d2; font-size: 11px; font-weight: 800; }
.agent-income-identity h2 { margin: 8px 0; color: #f5fbff; font-size: 30px; }
.agent-income-identity p { margin: 0 0 22px; color: #8ca2b7; font-size: 13px; }
.agent-income-main { display: flex; align-items: flex-end; justify-content: center; flex-direction: column; padding: 34px; border-left: 1px solid rgba(148, 163, 184, .13); text-align: right; background: rgba(2, 8, 18, .46); }
.agent-income-main > span { color: #8ba2b7; font-size: 13px; }
.agent-income-main strong { margin-top: 7px; color: #f8d66d; font-size: 42px; }
.agent-income-main strong small { margin-right: 4px; font-size: 20px; }
.agent-income-main p { margin: 5px 0 0; color: #6f8498; font-size: 12px; }
.agent-income-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.agent-income-stats article { min-height: 120px; padding: 20px; border: 1px solid rgba(148, 163, 184, .14); border-radius: 8px; background: rgba(8, 20, 36, .80); }
.agent-income-stats span, .agent-income-stats small { display: block; color: #7890a6; font-size: 12px; }
.agent-income-stats strong { display: block; margin: 10px 0 6px; color: #e7f2fb; font-size: 24px; overflow-wrap: anywhere; }
.agent-income-ledger { margin-top: 14px; padding: 22px; border: 1px solid rgba(148, 163, 184, .14); border-radius: 8px; background: rgba(6, 16, 30, .84); }
.agent-income-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.agent-income-heading h3 { margin: 5px 0 0; color: #eef7ff; font-size: 21px; }
.agent-income-heading > small { color: #71879c; }
.agent-income-table-wrap { overflow-x: auto; }
.agent-income-table-wrap table { width: 100%; min-width: 860px; border-collapse: collapse; }
.agent-income-table-wrap th, .agent-income-table-wrap td { padding: 13px 12px; border-bottom: 1px solid rgba(148, 163, 184, .11); color: #9db0c2; font-size: 12px; text-align: left; }
.agent-income-table-wrap th { color: #6f859a; font-weight: 700; }
.agent-income-table-wrap td strong, .agent-income-table-wrap td small { display: block; }
.agent-income-table-wrap td strong { color: #dbe8f4; }
.agent-income-table-wrap td small { margin-top: 4px; color: #667d93; }
.agent-income-table-wrap td b { color: #f8d66d; font-size: 14px; }
.agent-income-table-wrap td > span { display: inline-flex; padding: 4px 7px; border-radius: 5px; font-weight: 700; }
.agent-income-table-wrap td > span.is-pending { color: #fcd34d; background: rgba(161, 98, 7, .16); }
.agent-income-table-wrap td > span.is-settled { color: #9fe3d2; background: rgba(13, 148, 136, .15); }
.agent-income-empty { padding: 30px; color: #71879c; text-align: center; }
.agent-income-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; color: #71879c; font-size: 12px; }
.agent-income-pager > div { display: flex; gap: 8px; }
@media (max-width: 1050px) { .agent-income-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .agent-income-hero { grid-template-columns: 1fr; } .agent-income-main { align-items: flex-start; border-top: 1px solid rgba(148, 163, 184, .13); border-left: 0; text-align: left; } .agent-income-stats { grid-template-columns: 1fr; } }

/* 个人文案库：与记录中心、数字人工作台共用深色青绿资产风格。 */
.support-kpi-grid div > small { display: block; margin-top: 5px; color: #7890a8; font-size: 11px; }
.copy-library-section {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(159, 227, 210, .18);
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(7, 22, 34, .92), rgba(8, 15, 28, .90));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 18px 42px rgba(0, 0, 0, .14);
}
.copy-library-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.copy-library-heading span { color: #9fe3d2; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.copy-library-heading h2 { margin: 5px 0 4px; color: #f9f8f3; font-size: 23px; }
.copy-library-heading p { margin: 0; color: #8197ad; font-size: 13px; }
.copy-library-primary,
.copy-library-empty button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(159, 227, 210, .64);
  border-radius: 7px;
  color: #032b2b;
  background: #9fe3d2;
  font-weight: 900;
  cursor: pointer;
}
.copy-library-primary:hover,
.copy-library-empty button:hover { background: #c8efe6; }
.copy-library-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; align-items: end; }
.copy-library-toolbar label { display: grid; gap: 6px; }
.copy-library-toolbar label > span { color: #8ea4b9; font-size: 11px; font-weight: 800; }
.copy-library-toolbar input {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 7px;
  outline: 0;
  color: #e7f3fb;
  background: rgba(2, 9, 19, .68);
}
.copy-library-toolbar input:focus { border-color: rgba(159, 227, 210, .56); box-shadow: 0 0 0 3px rgba(20, 184, 166, .08); }
.copy-library-toolbar > button,
.copy-library-pager button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 7px;
  color: #c7d6e3;
  background: rgba(20, 38, 36, .62);
  font-weight: 800;
  cursor: pointer;
}
.copy-library-toolbar > button:hover,
.copy-library-pager button:hover:not(:disabled) { border-color: rgba(159, 227, 210, .40); color: #c8efe6; }
.copy-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.copy-library-card {
  display: grid;
  grid-template-rows: auto auto minmax(72px, 1fr) auto;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(8, 18, 33, .76);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.copy-library-card:hover { transform: translateY(-2px); border-color: rgba(159, 227, 210, .34); background: rgba(10, 26, 42, .84); }
.copy-library-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.copy-library-card > header span { padding: 4px 7px; border-radius: 5px; color: #7ad9d2; background: rgba(14, 138, 124, .11); font-size: 10px; font-weight: 800; }
.copy-library-card > header small { color: #647b91; font-size: 10px; }
.copy-library-card h3 { overflow: hidden; margin: 13px 0 7px; color: #eef7ff; font-size: 15px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.copy-library-card > p { display: -webkit-box; overflow: hidden; margin: 0; color: #8fa4b8; font-size: 12px; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.copy-library-card > footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, .10); }
.copy-library-card > footer > small { color: #678097; font-size: 10px; white-space: nowrap; }
.copy-library-card > footer div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.copy-library-card button { padding: 6px 8px; border: 1px solid rgba(148, 163, 184, .15); border-radius: 5px; color: #a9bbca; background: rgba(20, 38, 36, .56); font-size: 10px; font-weight: 800; cursor: pointer; }
.copy-library-card [data-copy-library-use] { border-color: rgba(159, 227, 210, .26); color: #c8efe6; background: rgba(20, 184, 166, .10); }
.copy-library-card button:hover { border-color: rgba(159, 227, 210, .42); color: #e6fffb; }
.copy-library-card button.is-danger:hover { border-color: rgba(248, 113, 113, .34); color: #fecaca; }
.copy-library-empty { display: grid; justify-items: center; gap: 8px; min-height: 260px; align-content: center; text-align: center; }
.copy-library-empty img { width: 74px; height: 74px; object-fit: contain; opacity: .78; }
.copy-library-empty strong { color: #e8f2fb; font-size: 17px; }
.copy-library-empty p { max-width: 440px; margin: 0 0 7px; color: #748a9f; font-size: 12px; line-height: 1.7; }
.copy-library-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; color: #71879b; font-size: 12px; }
.copy-library-pager > div { display: flex; gap: 7px; }
.copy-library-pager button { min-height: 34px; }
.copy-library-pager button:disabled { cursor: not-allowed; opacity: .4; }

.copy-library-modal { width: min(720px, calc(100vw - 32px)); }
.copy-library-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.copy-library-modal-head span { color: #9fe3d2; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.copy-library-modal-head h3 { margin-top: 5px; }
.copy-library-modal-head > button { padding: 7px 10px; border: 1px solid rgba(148, 163, 184, .16); border-radius: 6px; color: #91a4b7; background: rgba(20, 38, 36, .46); cursor: pointer; }
.copy-library-modal-intro { margin: -5px 0 0; color: #7f94a8; font-size: 12px; line-height: 1.7; }
.copy-library-field { display: grid; gap: 7px; color: #cbd9e5; font-size: 12px; font-weight: 800; }
.copy-library-field > span { display: flex; align-items: center; gap: 6px; }
.copy-library-field > span small { color: #70869a; font-weight: 600; }
.copy-library-field > span b { color: #9fe3d2; font-size: 10px; }
.copy-library-field input,
.copy-library-field textarea { width: 100%; border: 1px solid rgba(148, 163, 184, .17); border-radius: 7px; outline: 0; color: #e8f2fb; background: rgba(2, 9, 19, .72); }
.copy-library-field input { min-height: 44px; padding: 0 13px; }
.copy-library-field textarea { min-height: 260px; padding: 13px; resize: vertical; line-height: 1.75; }
.copy-library-field input:focus,
.copy-library-field textarea:focus { border-color: rgba(159, 227, 210, .56); box-shadow: 0 0 0 3px rgba(20, 184, 166, .08); }
.copy-library-form-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #6f8498; font-size: 11px; }
.copy-library-form-meta b { color: #91a9bd; }
.copy-library-form-meta i { color: #9fe3d2; font-style: normal; }
.copy-library-form-error { margin: 0; padding: 9px 11px; border: 1px solid rgba(248, 113, 113, .22); border-radius: 6px; color: #fecaca; background: rgba(127, 29, 29, .14); font-size: 12px; }
.copy-library-modal-actions { display: flex; justify-content: flex-end; gap: 9px; }
.copy-library-modal-actions .btn-primary { border-color: #9fe3d2; color: #032b2b; background: #9fe3d2; box-shadow: none; }
.copy-library-modal-actions .btn-primary:hover { color: #032b2b; background: #c8efe6; }
.copy-library-picker-modal { width: min(820px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 40px)); overflow: hidden; }
.copy-library-picker-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.copy-library-picker-search input { min-height: 42px; padding: 0 13px; border: 1px solid rgba(148, 163, 184, .17); border-radius: 7px; outline: 0; color: #e8f2fb; background: rgba(2, 9, 19, .72); }
.copy-library-picker-search input:focus { border-color: rgba(159, 227, 210, .56); box-shadow: 0 0 0 3px rgba(20, 184, 166, .08); }
.copy-library-picker-search button { min-width: 76px; border: 1px solid rgba(159, 227, 210, .30); border-radius: 7px; color: #c8efe6; background: rgba(20, 184, 166, .10); cursor: pointer; font-weight: 900; }
.copy-library-picker-list { display: grid; max-height: min(480px, 55vh); gap: 8px; overflow: auto; padding-right: 4px; scrollbar-color: rgba(159,227,210,.35) transparent; }
.copy-library-picker-list > button { display: grid; position: relative; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 13px 15px; border: 1px solid rgba(148, 163, 184, .13); border-radius: 8px; color: #e8f2fb; text-align: left; background: rgba(8, 18, 33, .72); cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.copy-library-picker-list > button:hover { transform: translateY(-1px); border-color: rgba(159, 227, 210, .38); background: rgba(11, 31, 45, .92); }
.copy-library-picker-list > button span { min-width: 0; }
.copy-library-picker-list > button b, .copy-library-picker-list > button small { display: block; }
.copy-library-picker-list > button b { overflow: hidden; color: #f2f8fb; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.copy-library-picker-list > button small { margin-top: 4px; color: #60798f; font-size: 9px; }
.copy-library-picker-list > button p { display: -webkit-box; grid-column: 1; overflow: hidden; margin: 0; color: #8ca1b4; font-size: 11px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.copy-library-picker-list > button em { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 6px 9px; border-radius: 6px; color: #0e2622; background: #9fe3d2; font-size: 10px; font-style: normal; font-weight: 900; white-space: nowrap; }
.copy-library-picker-empty { display: grid; min-height: 240px; place-items: center; align-content: center; gap: 7px; text-align: center; }
.copy-library-picker-empty strong { color: #eaf4f9; }
.copy-library-picker-empty p { margin: 0; color: #71889b; font-size: 11px; }
.copy-library-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.copy-library-picker-footer > div { display: flex; align-items: center; gap: 8px; color: #7890a3; font-size: 11px; }
.copy-library-picker-footer > div button { min-height: 32px; padding: 0 10px; border: 1px solid rgba(148,163,184,.16); border-radius: 6px; color: #aebdcb; background: #102322; cursor: pointer; }
.copy-library-picker-footer > div button:disabled { cursor: not-allowed; opacity: .38; }
.copy-library-picker-loading { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 12px; color: #8ba2b5; }
.copy-library-picker-loading span { width: 28px; height: 28px; border: 3px solid rgba(159,227,210,.15); border-top-color: #9fe3d2; border-radius: 50%; animation: copy-library-picker-spin .8s linear infinite; }
@keyframes copy-library-picker-spin { to { transform: rotate(360deg); } }

@media (max-width: 1280px) { .copy-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .copy-library-section { padding: 15px; }
  .copy-library-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .copy-library-primary { width: 100%; }
  .copy-library-toolbar { grid-template-columns: 1fr 1fr; }
  .copy-library-toolbar label { grid-column: 1 / -1; }
  .copy-library-grid { grid-template-columns: 1fr; }
  .copy-library-card > footer { align-items: flex-start; flex-direction: column; }
  .copy-library-card > footer div { justify-content: flex-start; }
  .copy-library-form-meta, .copy-library-pager { align-items: flex-start; flex-direction: column; }
  .copy-library-pager > div { width: 100%; }
  .copy-library-pager button { flex: 1; }
  .copy-library-picker-modal { max-height: calc(100vh - 20px); }
  .copy-library-picker-list { max-height: 52vh; }
  .copy-library-picker-list > button { grid-template-columns: 1fr; }
  .copy-library-picker-list > button p { grid-column: 1; }
  .copy-library-picker-list > button em { grid-row: auto; grid-column: 1; justify-self: start; }
  .copy-library-picker-footer { align-items: stretch; flex-direction: column; }
  .copy-library-picker-footer > div { justify-content: space-between; }
}

/* 爆款二创 / 案例拆解共用的短视频资料卡。 */
.douyin-material-profile {
  margin-top: 16px;
  border: 1px solid #dde4ef;
  border-radius: 18px;
  background: #f6f5ef;
  overflow: hidden;
}
.douyin-material-hero { display: grid; grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); background: #fff; }
.douyin-material-video { min-height: 410px; border-radius: 0; background: #132523; }
.douyin-material-video video { width: 100%; height: 100%; min-height: 410px; max-height: 560px; object-fit: contain; }
.douyin-material-intro { min-width: 0; padding: 26px; }
.douyin-material-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.douyin-material-kicker span { color: #7558d5; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.douyin-material-kicker em { padding: 4px 9px; border-radius: 999px; background: #f0edff; color: #6b54bc; font-size: 11px; font-style: normal; }
.douyin-material-intro h3 { margin: 12px 0 16px; color: #1d2738; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.45; }
.douyin-author-line { display: flex; align-items: center; gap: 10px; }
.douyin-author-line img { width: 42px; height: 42px; border: 1px solid #e4e8ef; border-radius: 50%; object-fit: cover; }
.douyin-author-line > div { min-width: 0; }
.douyin-author-line strong,
.douyin-author-line span { display: block; }
.douyin-author-line strong { color: #2f3847; font-size: 14px; }
.douyin-author-line span { margin-top: 2px; color: #969dab; font-size: 11px; }
.douyin-author-line b { margin-left: auto; padding: 4px 8px; border-radius: 6px; background: #fff2dc; color: #a66b11; font-size: 11px; }
.douyin-primary-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 20px 0; }
.douyin-primary-stats div { padding: 11px 8px; border-radius: 10px; background: #f5f7fa; text-align: center; }
.douyin-primary-stats strong { display: block; color: #273142; font-size: 17px; }
.douyin-primary-stats span { display: block; margin-top: 3px; color: #9198a7; font-size: 11px; }
.douyin-material-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.douyin-material-facts span { padding: 9px 10px; border: 1px solid #edf0f4; border-radius: 9px; color: #949aa8; font-size: 11px; }
.douyin-material-facts strong { display: block; margin-top: 3px; overflow: hidden; color: #4a5261; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.douyin-material-intro .script-actions { margin-top: 18px; }
.douyin-material-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.douyin-material-panel { min-width: 0; padding: 17px; border: 1px solid #e5e9f0; border-radius: 13px; background: #fff; }
.douyin-transcript-panel { grid-column: 1 / -1; }
.douyin-panel-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.douyin-panel-head span { color: #8065d1; font-size: 11px; font-weight: 700; }
.douyin-panel-head h4 { margin: 0; color: #2d3543; font-size: 15px; }
.douyin-panel-head em { margin-left: auto; color: #9aa0ad; font-size: 11px; font-style: normal; }
.douyin-transcript-panel pre { max-height: 300px; margin: 0; overflow: auto; color: #4a5261; font-family: inherit; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.douyin-account-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.douyin-account-stats span { padding: 9px 5px; border-radius: 8px; background: #f6f7fa; color: #9298a5; font-size: 10px; text-align: center; }
.douyin-account-stats strong { display: block; margin-bottom: 2px; color: #353d4b; font-size: 13px; }
.douyin-material-panel > p { margin: 12px 0 0; color: #747b89; font-size: 12px; line-height: 1.7; }
.douyin-hashtags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 27px; }
.douyin-hashtags span { padding: 5px 8px; border-radius: 7px; background: #f0edff; color: #6751b1; font-size: 11px; }
.douyin-hashtags em { color: #9ca2ae; font-size: 12px; font-style: normal; }
.douyin-music-row { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf0f4; }
.douyin-music-row img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.douyin-music-row > div { min-width: 0; }
.douyin-music-row strong,
.douyin-music-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.douyin-music-row strong { color: #444c5a; font-size: 12px; }
.douyin-music-row span { color: #979da9; font-size: 10px; }
.douyin-music-row > em { margin-left: auto; color: #856cd2; font-size: 10px; font-style: normal; }
.douyin-tech-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.douyin-tech-list span { color: #969ca9; font-size: 10px; }
.douyin-tech-list strong { display: block; margin-top: 3px; color: #444c5a; font-size: 12px; }
.douyin-comment-panel,
.douyin-source-panel { padding: 0; }
.douyin-comment-panel summary,
.douyin-source-panel summary { display: flex; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer; list-style: none; }
.douyin-comment-panel summary::-webkit-details-marker,
.douyin-source-panel summary::-webkit-details-marker { display: none; }
.douyin-comment-panel summary span,
.douyin-source-panel summary span { color: #343c4a; font-size: 14px; font-weight: 700; }
.douyin-comment-panel summary strong,
.douyin-source-panel summary strong { color: #8065d1; font-size: 12px; }
.douyin-comment-panel > div,
.douyin-source-panel > div { max-height: 330px; overflow: auto; padding: 0 16px 16px; }
.douyin-comment-panel article { padding: 11px 0; border-top: 1px solid #edf0f4; }
.douyin-comment-panel article strong { color: #404856; font-size: 12px; }
.douyin-comment-panel article p { margin: 4px 0; color: #626a78; font-size: 12px; line-height: 1.6; }
.douyin-comment-panel article span { color: #a0a5b0; font-size: 10px; }
.douyin-source-panel p { margin: 7px 0; color: #7f8694; font-size: 12px; }

@media (max-width: 980px) {
  .douyin-material-hero { grid-template-columns: 260px minmax(0, 1fr); }
  .douyin-primary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .douyin-material-hero,
  .douyin-material-detail-grid { grid-template-columns: 1fr; }
  .douyin-material-video,
  .douyin-material-video video { min-height: 360px; }
  .douyin-transcript-panel { grid-column: auto; }
  .douyin-primary-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .douyin-material-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.media-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.media-form-panel,
.media-task-panel {
  min-width: 0;
  border-color: rgba(103, 232, 249, .14);
  background:
    linear-gradient(180deg, rgba(12, 25, 44, .94), rgba(8, 16, 30, .96)),
    rgba(20, 38, 36, .96);
}

.media-feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.media-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 8px;
  background: #142624;
  color: #e5edf5;
  text-align: left;
  cursor: pointer;
}

.media-feature-card.visual::before {
  position: absolute;
  inset: 0;
  opacity: .86;
  content: "";
  background:
    linear-gradient(135deg, rgba(10, 24, 23, .24), rgba(10, 24, 23, .72)),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .26), transparent 18%),
    linear-gradient(135deg, #0ea5e9, #14b8a6);
}

.media-feature-card.free-image::before { background: linear-gradient(135deg, rgba(10, 24, 23, .18), rgba(10, 24, 23, .76)), radial-gradient(circle at 72% 28%, rgba(255, 255, 255, .30), transparent 18%), linear-gradient(135deg, #2563eb, #06b6d4 48%, #10b981); }
.media-feature-card.product-image::before { background: linear-gradient(135deg, rgba(10, 24, 23, .20), rgba(10, 24, 23, .78)), radial-gradient(circle at 72% 32%, rgba(251, 191, 36, .34), transparent 20%), linear-gradient(135deg, #0f766e, #155e75 48%, #4d584a); }
.media-feature-card.poster-image::before { background: linear-gradient(135deg, rgba(10, 24, 23, .18), rgba(10, 24, 23, .78)), radial-gradient(circle at 76% 22%, rgba(244, 114, 182, .38), transparent 20%), linear-gradient(135deg, #7c3aed, #db2777 48%, #f59e0b); }
.media-feature-card.free-video::before { background: linear-gradient(135deg, rgba(10, 24, 23, .18), rgba(10, 24, 23, .78)), radial-gradient(circle at 74% 24%, rgba(125, 211, 252, .36), transparent 21%), linear-gradient(135deg, #0c6b60, #0e8a7c 48%, #0f7d6e); }
.media-feature-card.shop-video::before { background: linear-gradient(135deg, rgba(10, 24, 23, .22), rgba(10, 24, 23, .80)), radial-gradient(circle at 72% 30%, rgba(253, 186, 116, .36), transparent 21%), linear-gradient(135deg, #92400e, #0f766e 50%, #1e293b); }
.media-feature-card.avatar-video::before { background: linear-gradient(135deg, rgba(10, 24, 23, .20), rgba(10, 24, 23, .78)), radial-gradient(circle at 74% 26%, rgba(167, 139, 250, .34), transparent 21%), linear-gradient(135deg, #3730a3, #0e7490 50%, #142624); }

.media-feature-card strong,
.media-feature-card span,
.media-feature-card small {
  position: relative;
  display: block;
}

.media-feature-card strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}

.media-feature-card span {
  margin-top: 8px;
  color: rgba(226, 232, 240, .86);
  font-size: 12px;
}

.media-feature-card small {
  margin-top: 18px;
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.media-feature-card.active {
  border-color: rgba(159, 227, 210, .64);
  box-shadow: 0 16px 38px rgba(14, 138, 124, .22);
}

.media-feature-card:disabled {
  cursor: not-allowed;
  opacity: .74;
}

.media-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.media-form.is-hidden {
  display: none;
}

.media-form-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}

.media-form-top span {
  color: #7ad9d2;
  font-size: 13px;
  font-weight: 900;
}

.media-feature-empty {
  display: grid;
  gap: 8px;
  min-height: 150px;
  align-content: center;
  padding: 18px;
  border: 1px dashed rgba(159, 227, 210, .28);
  border-radius: 8px;
  background: rgba(8, 15, 28, .38);
}

.media-feature-empty strong {
  color: #f6f5ef;
  font-size: 18px;
}

.media-feature-empty p {
  max-width: 620px;
  margin: 0;
  color: #93a7bc;
  line-height: 1.7;
}

.media-form label,
.media-fieldset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #cfd2c8;
  font-size: 13px;
  font-weight: 700;
}

.media-form label.wide,
.media-fieldset {
  grid-column: 1 / -1;
}

.media-form input,
.media-form select,
.media-form textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(10, 24, 23, .34);
  color: #f6f5ef;
  font: inherit;
  font-weight: 500;
  outline: none;
}

.media-form input:focus,
.media-form select:focus,
.media-form textarea:focus {
  border-color: rgba(159, 227, 210, .58);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .14);
}

.media-form textarea {
  resize: vertical;
  line-height: 1.6;
}

.media-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.media-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(20, 38, 36, 0.12);
  border-radius: 8px;
  background: rgba(20, 38, 36, .76);
  color: #d9efea;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.media-chip input:checked + span {
  border-color: rgba(37, 99, 235, 0.48);
  background: rgba(20, 184, 166, .18);
  color: #7ad9d2;
}

.media-chip.disabled span,
.media-chip input:disabled + span {
  cursor: not-allowed;
  opacity: 0.45;
}

.media-estimate {
  grid-column: 1 / -1;
  min-height: 40px;
  padding: 11px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, .12);
  color: #fed7aa;
  font-size: 13px;
  line-height: 1.5;
}

.media-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #93a7bc;
  font-size: 12px;
  font-weight: 600;
}

.media-upload-row input {
  max-width: 260px;
  padding: 8px;
}

.media-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.media-preview-grid:empty {
  display: none;
}

.media-preview-item {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
}

.media-preview-grid a {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(10, 24, 23, .54);
}

.media-preview-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 50%;
  background: rgba(10, 24, 23, .74);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.media-preview-remove:hover {
  border-color: rgba(159, 227, 210, .72);
  background: rgba(20, 184, 166, .86);
  color: #04131d;
}

.media-url-store[hidden] {
  display: none !important;
}

.media-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  display: grid;
  gap: 3px;
  min-width: 220px;
  max-width: 360px;
  padding: 13px 16px;
  border: 1px solid rgba(159, 227, 210, .42);
  border-radius: 8px;
  background: rgba(8, 18, 32, .94);
  color: #dffcff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}

.media-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.media-toast strong {
  color: #9fe3d2;
  font-size: 13px;
}

.media-toast span {
  color: #b9d4e5;
  font-size: 13px;
}

.media-task-list {
  display: grid;
  gap: 12px;
}

.media-task-card {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(20, 38, 36, .72);
}

.media-task-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.media-task-head span,
.media-task-meta span {
  color: #93a7bc;
  font-size: 12px;
}

.media-task-head strong {
  display: block;
  margin-top: 4px;
  color: #f6f5ef;
  font-size: 14px;
  line-height: 1.35;
}

.media-task-card p {
  margin: 10px 0;
  color: #cfd2c8;
  font-size: 13px;
  line-height: 1.55;
}

.media-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7de;
}

.media-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2563eb;
  transition: width 3.6s linear;
}

.media-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
}

.media-task-meta .danger {
  color: #b91c1c;
}

.media-result-preview {
  margin-top: 12px;
}

.media-result-preview img,
.media-result-preview video {
  display: block;
  width: 100%;
  max-height: 320px;
  border-radius: 8px;
  object-fit: contain;
  background: #142624;
}

.image-selection,
.image-creator {
  display: grid;
  gap: 18px;
}

.image-selection {
  padding-top: 4px;
}

.image-selection-hero,
.image-creator-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
  gap: 22px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(159, 227, 210, .16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 16%, rgba(20, 184, 166, .14), transparent 28%),
    linear-gradient(135deg, rgba(13, 30, 50, .94), rgba(7, 15, 29, .96)),
    rgba(8, 15, 28, .96);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .24);
}

.image-creator-hero {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(12, 26, 44, .98), rgba(4, 15, 28, .98)),
    rgba(8, 15, 28, .96);
}

.image-selection-hero span,
.image-hero-copy > span,
.image-history-card > div > span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.image-selection-hero h2,
.image-hero-copy h2 {
  margin: 8px 0 10px;
  color: #f6f5ef;
  font-size: 30px;
  line-height: 1.18;
}

.image-selection-hero p,
.image-hero-copy p {
  max-width: 620px;
  margin: 0;
  color: #93a7bc;
  font-size: 15px;
  line-height: 1.75;
}

.image-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.image-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 18px;
  border: 1px solid rgba(20, 38, 36, .08);
  border-radius: 8px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 44px rgba(20, 38, 36, .12);
}

.image-feature-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform .25s ease;
}

.image-feature-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(3, 9, 20, .08), rgba(3, 9, 20, .22) 38%, rgba(3, 9, 20, .88)),
    linear-gradient(90deg, rgba(3, 9, 20, .76), rgba(3, 9, 20, .08) 64%);
}

.image-feature-card:hover::before {
  transform: scale(1.06);
}

.image-feature-card.is-coming {
  cursor: not-allowed;
  opacity: .58;
}

.image-feature-card.is-coming::before {
  filter: grayscale(.45);
}

.image-feature-card.is-coming small {
  color: #d9efea;
  background: rgba(20, 38, 36, .82);
  border: 1px solid rgba(148, 163, 184, .22);
}

.image-feature-card span,
.image-feature-card strong,
.image-feature-card small {
  position: relative;
  z-index: 1;
  display: block;
}

.image-feature-card span {
  margin-top: 164px;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}

.image-feature-card strong {
  margin-top: 8px;
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  line-height: 1.55;
}

.image-feature-card small {
  width: max-content;
  margin-top: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(159, 227, 210, .94);
  color: #032329;
  font-size: 12px;
  font-weight: 900;
}

.image-hero-bar {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(159, 227, 210, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(15, 32, 55, .74), rgba(6, 16, 30, .88));
}

.image-hero-bar .btn {
  justify-self: start;
  min-height: 40px;
  padding: 9px 14px;
  border-color: rgba(148, 163, 184, .22);
  background: rgba(148, 163, 184, .12);
}

.image-hero-bar span,
.image-hero-bar strong,
.image-hero-bar small {
  display: block;
}

.image-hero-bar span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.image-hero-bar strong {
  margin-top: 8px;
  color: #f6f5ef;
  font-size: 24px;
  line-height: 1.18;
}

.image-hero-bar small {
  margin-top: 10px;
  max-width: 250px;
  overflow: visible;
  color: #93a7bc;
  font-size: 13px;
  line-height: 1.7;
  text-overflow: clip;
  white-space: normal;
}

.image-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.image-hero-tags em {
  padding: 7px 10px;
  border: 1px solid rgba(159, 227, 210, .16);
  border-radius: 999px;
  color: #b7fff4;
  background: rgba(20, 184, 166, .11);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.image-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(116px, 12vw, 148px);
  gap: 14px;
  align-items: stretch;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(159, 227, 210, .13);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(4, 12, 24, .38), rgba(4, 12, 24, .78));
}

.image-showcase-main {
  position: relative;
  overflow: hidden;
  height: clamp(278px, 24vw, 380px);
  min-height: 0;
  border: 1px solid rgba(159, 227, 210, .18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20, 38, 36, .96), rgba(10, 24, 23, .98));
  box-shadow: 0 24px 48px rgba(0, 0, 0, .30);
}

.image-showcase-main img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.image-showcase-main span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 16px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 24, 23, .78);
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
}

.image-showcase-thumbs {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.image-showcase-thumbs button {
  overflow: hidden;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(10, 24, 23, .66);
  cursor: pointer;
}

.image-showcase-thumbs button.active {
  border-color: rgba(159, 227, 210, .82);
  box-shadow:
    0 0 0 3px rgba(20, 184, 166, .16),
    0 16px 28px rgba(0, 0, 0, .22);
}

.image-showcase-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.image-showcase-dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.image-showcase-dots i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .38);
}

.image-showcase-dots i.active {
  width: 40px;
  background: #f97316;
}

.image-creator-layout {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

.image-prompt-card,
.image-result-card,
.image-history-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(159, 227, 210, .18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(13, 30, 50, .94), rgba(7, 15, 29, .96)),
    rgba(8, 15, 28, .96);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .28);
}

.image-prompt-card {
  display: grid;
  gap: 16px;
}

.image-step-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.image-step-title i {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #22d3ee);
  color: #04131d;
  font-style: normal;
  font-weight: 900;
}

.image-step-title span {
  display: block;
  color: #f6f5ef;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.image-step-title strong {
  display: block;
  margin-top: 4px;
  color: #7ad9d2;
  font-size: 12px;
}

.image-step-title .btn {
  margin-left: auto;
}

.image-prompt-card label {
  display: grid;
  gap: 8px;
  color: #d9f7ff;
  font-size: 13px;
  font-weight: 900;
}

.image-prompt-card select,
.image-prompt-card textarea,
.image-prompt-card input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(10, 24, 23, .42);
  color: #f6f5ef;
  font: inherit;
  font-weight: 600;
  outline: none;
}

.image-prompt-card select option {
  color: #142624;
}

.image-prompt-card textarea::placeholder {
  color: #647063;
}

.image-prompt-card select,
.image-prompt-card input {
  min-height: 44px;
  padding: 0 12px;
}

.image-prompt-card textarea {
  min-height: 132px;
  padding: 13px 14px;
  line-height: 1.65;
  resize: vertical;
}

.image-prompt-card select:focus,
.image-prompt-card textarea:focus,
.image-prompt-card input:focus {
  border-color: rgba(159, 227, 210, .62);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .14);
}

.image-prompt-count {
  justify-self: end;
  color: #93c5fd;
  font-size: 12px;
}

.image-advanced-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.image-upload-control {
  position: relative;
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 10px 15px;
  border: 1px solid rgba(159, 227, 210, .34);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(53, 193, 172, .18), rgba(34, 211, 238, .10)),
    rgba(20, 38, 36, .78);
  color: #cffafe;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.image-upload-control::before {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #04131d;
  background: #9fe3d2;
  content: "+";
  font-weight: 900;
  line-height: 1;
}

.image-upload-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.image-reference-preview {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}

.image-reference-preview a {
  background: rgba(10, 24, 23, .54);
}

.image-estimate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(245, 158, 11, .12);
  color: #fed7aa;
}

.image-estimate-row span {
  font-size: 13px;
  font-weight: 800;
}

.image-estimate-row strong {
  font-size: 15px;
  font-weight: 900;
}

.image-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.image-submit-row .btn-primary {
  min-height: 50px;
  border-color: rgba(159, 227, 210, .62);
  color: #04131d;
  background: linear-gradient(135deg, #9fe3d2, #22d3ee);
  box-shadow: 0 16px 34px rgba(34, 211, 238, .22);
}

.image-submit-row .btn-primary.is-loading {
  cursor: wait;
  opacity: .72;
}

.image-submit-row .btn-primary.is-loading::after {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, .54);
  border-top-color: #fff;
  border-radius: 50%;
  content: "";
  vertical-align: -2px;
  animation: imageSpin .8s linear infinite;
}

.image-prompt-card .btn-quiet,
.image-result-card .btn-quiet {
  border-color: rgba(148, 163, 184, .18);
  color: #d9f7ff;
  background: rgba(20, 38, 36, .58);
}

.image-prompt-card .btn-quiet:hover,
.image-result-card .btn-quiet:hover {
  border-color: rgba(159, 227, 210, .42);
  color: #7ad9d2;
}

.image-result-card {
  display: grid;
  gap: 18px;
}

.image-result-media {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  border: 1px solid rgba(159, 227, 210, .18);
  border-radius: 8px;
  background: #0e211f;
}

.image-result-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: contain;
  background: #0e211f;
}

.image-result-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.image-result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.image-result-actions .btn {
  justify-content: center;
}

.image-result-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.image-result-gallery article {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(159, 227, 210, .14);
  border-radius: 8px;
  background: rgba(20, 38, 36, .62);
}

.image-result-gallery button {
  overflow: hidden;
  width: 74px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(10, 24, 23, .62);
  cursor: zoom-in;
}

.image-result-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-result-gallery span {
  overflow: hidden;
  color: #f6f5ef;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-result-gallery a {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.image-result-gallery button[data-video-download-task] {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7ad9d2;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.image-result-overlay {
  position: absolute;
  inset: auto 18px 18px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(17, 24, 39, .82);
  color: #fff;
  backdrop-filter: blur(12px);
}

.image-result-overlay strong {
  font-size: 15px;
}

.image-result-overlay span {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
}

.image-live-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}

.image-live-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #f97316;
  transition: width 3.6s linear;
}

.image-sample-tag {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .78);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.image-history-card {
  display: grid;
  gap: 10px;
  max-height: none;
  padding: 14px;
  border: 1px solid rgba(159, 227, 210, .14);
  border-radius: 8px;
  background: rgba(10, 24, 23, .28);
  box-shadow: none;
}

.image-history-card > div > strong {
  display: block;
  margin-top: 4px;
  color: #f6f5ef;
  font-size: 16px;
}

.image-history-card > div > span {
  color: #7ad9d2;
}

.image-history-list {
  display: flex;
  gap: 10px;
  max-height: none;
  overflow: auto;
  padding: 0 0 8px;
  scrollbar-color: rgba(34, 211, 238, .58) rgba(20, 38, 36, .66);
  scrollbar-width: thin;
}

.image-history-more,
.async-task-more {
  flex: 0 0 78px;
  min-height: 74px;
  border: 1px dashed rgba(159, 227, 210, .34);
  border-radius: 8px;
  color: #7ad9d2;
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .10), rgba(20, 38, 36, .62));
  font-weight: 900;
  cursor: pointer;
}

.async-task-more {
  width: 100%;
  min-height: 42px;
  border-style: solid;
}

.image-history-more:hover,
.async-task-more:hover {
  border-color: rgba(159, 227, 210, .62);
  color: #bffff7;
}

.image-history-list::-webkit-scrollbar,
.async-task-list::-webkit-scrollbar,
.async-task-popover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.image-history-list::-webkit-scrollbar-track,
.async-task-list::-webkit-scrollbar-track,
.async-task-popover::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(20, 38, 36, .66);
}

.image-history-list::-webkit-scrollbar-thumb,
.async-task-list::-webkit-scrollbar-thumb,
.async-task-popover::-webkit-scrollbar-thumb {
  border: 2px solid rgba(20, 38, 36, .66);
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #35c1ac);
}

.image-history-list::-webkit-scrollbar-corner,
.async-task-list::-webkit-scrollbar-corner,
.async-task-popover::-webkit-scrollbar-corner {
  background: transparent;
}

.image-history-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  flex: 0 0 210px;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(20, 38, 36, .76);
  text-align: left;
  cursor: pointer;
}

.image-history-item:hover {
  border-color: rgba(159, 227, 210, .42);
  box-shadow: 0 12px 24px rgba(14, 138, 124, .12);
}

.image-history-item img,
.image-history-item > span {
  grid-row: span 2;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(10, 24, 23, .64);
}

.image-history-item strong {
  color: #f6f5ef;
  font-size: 13px;
}

.image-history-item small {
  overflow: hidden;
  color: #93a7bc;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-history-empty {
  margin: 0;
  padding: 16px;
  border-radius: 8px;
  background: rgba(20, 38, 36, .62);
  color: #93c5fd;
  font-size: 13px;
  line-height: 1.6;
}

.image-preview-modal {
  width: min(920px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
}

.image-preview-modal img {
  display: block;
  width: 100%;
  max-height: 72vh;
  border-radius: 8px;
  object-fit: contain;
  background: #0e211f;
}

.video-feature-card {
  background: #071422;
  box-shadow: none;
}

.video-feature-card.is-coming {
  opacity: .86;
}

.video-feature-card.is-coming::before {
  filter: none;
}

.video-feature-card span,
.video-feature-card strong {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .38);
}

.video-feature-card::before {
  display: none;
}

.video-feature-card::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 9, 20, .01), rgba(3, 9, 20, .05) 50%, rgba(3, 9, 20, .22)),
    linear-gradient(90deg, rgba(3, 9, 20, .16), rgba(3, 9, 20, .02) 72%);
}

.video-feature-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform .25s ease;
}

.video-feature-card:hover .video-feature-bg {
  transform: scale(1.08);
}

.video-creator-hero {
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
}

.video-showcase-main video,
.video-showcase-thumbs video,
.video-result-media video,
.video-result-gallery video,
.video-history-item video,
.video-preview-modal video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0e211f;
}

.video-showcase-main video {
  object-fit: contain;
}

.video-showcase-thumbs video {
  min-height: 0;
}

.video-mode-card,
.video-reference-fields {
  display: grid;
  gap: 10px;
}

.video-mode-card > span {
  color: #d9f7ff;
  font-size: 13px;
  font-weight: 900;
}

.video-mode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.video-mode-card small {
  color: #93a7bc;
  font-size: 12px;
  line-height: 1.6;
}

.video-advanced-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.video-advanced-grid-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.video-result-media {
  min-height: 360px;
}

.video-result-media video {
  min-height: 360px;
  object-fit: contain;
}

.video-result-gallery button video {
  object-fit: cover;
}

.video-history-item video {
  grid-row: span 2;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}

.video-preview-modal video {
  max-height: 72vh;
  border-radius: 8px;
  object-fit: contain;
}

.video-inline-back {
  justify-self: start;
}

.video-avatar-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(159, 227, 210, .16);
  border-radius: 8px;
  background: rgba(10, 24, 23, .30);
}

.video-avatar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.video-avatar-head span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.video-avatar-head strong {
  display: block;
  margin-top: 4px;
  color: #f6f5ef;
  font-size: 15px;
}

.video-avatar-head small,
.video-avatar-list p {
  margin: 0;
  color: #93a7bc;
  font-size: 12px;
  line-height: 1.6;
}

.video-avatar-panel > small {
  color: #8ba3b8;
  font-size: 12px;
  line-height: 1.6;
}

.video-asset-modal-mask {
  align-items: center;
  padding: 28px;
  background: rgba(10, 24, 23, .74);
  backdrop-filter: blur(14px);
}

.video-asset-modal.script-modal {
  width: min(1040px, calc(100vw - 72px));
  max-width: none;
  max-height: calc(100vh - 56px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(159, 227, 210, .2);
  border-radius: 8px;
  background: linear-gradient(145deg, #081525 0%, #07111f 54%, #0e211f 100%);
  color: #e5f6ff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .46);
}

.video-asset-modal .script-modal-close {
  top: 18px;
  right: 18px;
  border-color: rgba(148, 163, 184, .18);
  color: #b7c8d8;
  background: rgba(20, 38, 36, .72);
}

.video-asset-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 30px 20px;
  border-bottom: 1px solid rgba(159, 227, 210, .14);
  background: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(20, 38, 36, .18));
}

.video-asset-modal-head strong {
  display: block;
  color: #f6f5ef;
  font-size: 22px;
  font-weight: 900;
}

.video-asset-modal-head span {
  display: block;
  max-width: 620px;
  margin-top: 7px;
  color: #9fb3c7;
  font-size: 13px;
  line-height: 1.7;
}

.video-asset-modal-message {
  max-width: 680px;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(20, 38, 36, .62);
  color: #cfd2c8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.video-asset-modal-message[data-status="success"] {
  border-color: rgba(159, 227, 210, .28);
  background: rgba(20, 184, 166, .12);
  color: #c8efe6;
}

.video-asset-modal-message[data-status="error"] {
  border-color: rgba(248, 113, 113, .32);
  background: rgba(127, 29, 29, .18);
  color: #fecaca;
}

.video-asset-modal-grid {
  display: grid;
  grid-template-columns: 300px minmax(520px, 1fr);
  gap: 18px;
  max-height: calc(100vh - 160px);
  overflow: hidden;
  padding: 20px 30px 28px;
}

.video-asset-sidebar,
.video-asset-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, .65) rgba(20, 38, 36, .72);
}

.video-asset-sidebar {
  z-index: 1;
}

.video-asset-main {
  z-index: 2;
}

.video-asset-sidebar::-webkit-scrollbar,
.video-asset-main::-webkit-scrollbar {
  width: 8px;
}

.video-asset-sidebar::-webkit-scrollbar-track,
.video-asset-main::-webkit-scrollbar-track {
  background: rgba(20, 38, 36, .72);
  border-radius: 999px;
}

.video-asset-sidebar::-webkit-scrollbar-thumb,
.video-asset-main::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #22d3ee, #35c1ac);
  border-radius: 999px;
}

.video-asset-create-group,
.video-asset-current,
.video-asset-upload-row,
.video-asset-card,
.video-asset-group-item {
  border: 1px solid rgba(159, 227, 210, .16);
  border-radius: 8px;
  background: rgba(2, 8, 23, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.video-asset-create-group {
  display: grid;
  gap: 11px;
  padding: 16px;
}

.video-asset-create-group strong,
.video-asset-section-title strong {
  color: #f6f5ef;
  font-size: 14px;
  font-weight: 900;
}

.video-asset-modal input,
.video-asset-modal textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(10, 24, 23, .72);
  color: #e5f6ff;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.video-asset-modal input:focus,
.video-asset-modal textarea:focus {
  border-color: rgba(159, 227, 210, .62);
  background: rgba(10, 24, 23, .92);
  box-shadow: 0 0 0 3px rgba(53, 193, 172, .1);
}

.video-asset-modal input::placeholder,
.video-asset-modal textarea::placeholder {
  color: #607489;
}

.video-asset-modal input {
  height: 44px;
  padding: 0 13px;
}

.video-asset-modal textarea {
  min-height: 82px;
  padding: 12px 13px;
  resize: vertical;
}

.video-asset-modal .btn-primary {
  border-color: rgba(159, 227, 210, .62);
  background: linear-gradient(135deg, #9fe3d2, #22d3ee);
  color: #04131d;
  box-shadow: 0 16px 32px rgba(34, 211, 238, .18);
}

.video-asset-modal .btn-quiet {
  border-color: rgba(148, 163, 184, .18);
  color: #d9f7ff;
  background: rgba(20, 38, 36, .62);
}

.video-asset-modal .btn-quiet:hover {
  border-color: rgba(159, 227, 210, .45);
  color: #7ad9d2;
}

.video-asset-group-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.video-asset-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #7f96aa;
  font-size: 12px;
}

.video-asset-group-item {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

.video-asset-group-item.active {
  border-color: rgba(249, 115, 22, .8);
  background: linear-gradient(135deg, rgba(249, 115, 22, .14), rgba(2, 8, 23, .62));
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .28);
}

.video-asset-group-item strong {
  color: #f6f5ef;
  font-size: 14px;
}

.video-asset-group-item span {
  color: #93a4b8;
  font-size: 12px;
}

.video-asset-main {
  display: grid;
  align-content: start;
  gap: 14px;
}

.video-asset-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
}

.video-asset-current span {
  color: #9fe3d2;
  font-size: 12px;
  font-weight: 900;
}

.video-asset-current strong {
  display: block;
  margin-top: 4px;
  color: #f6f5ef;
  font-size: 18px;
}

.video-asset-current small {
  display: block;
  margin-top: 5px;
  color: #8ba3b8;
  font-size: 12px;
}

.video-asset-upload-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
}

.video-asset-upload-control {
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  color: #d9f7ff;
  background: rgba(8, 47, 73, .44);
}

.video-asset-upload-row .js-video-asset-create {
  min-height: 44px;
}

.video-asset-upload-row [data-video-asset-preview] {
  grid-column: 1 / -1;
}

.video-asset-upload-status {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(20, 38, 36, .56);
  color: #8ba3b8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.video-asset-upload-status[data-status="ready"] {
  border-color: rgba(159, 227, 210, .28);
  background: rgba(20, 184, 166, .12);
  color: #c8efe6;
}

.video-asset-upload-status[data-status="pending"] {
  border-color: rgba(34, 211, 238, .32);
  background: rgba(14, 138, 124, .14);
  color: #a5f3fc;
}

.video-asset-upload-status[data-status="error"] {
  border-color: rgba(248, 113, 113, .32);
  background: rgba(127, 29, 29, .18);
  color: #fecaca;
}

.video-asset-card-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  max-height: min(460px, calc(100vh - 420px));
  overflow: auto;
  padding-right: 4px;
  scrollbar-color: rgba(34, 211, 238, .58) rgba(20, 38, 36, .66);
  scrollbar-width: thin;
}

.video-asset-card {
  overflow: hidden;
}

.video-asset-card img,
.video-asset-card > span {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: rgba(20, 38, 36, .86);
}

.video-asset-card div {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
}

.video-asset-card strong,
.video-asset-card small,
.video-asset-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-asset-card strong {
  color: #f6f5ef;
  font-size: 13px;
  font-style: normal;
}

.video-asset-card small {
  color: #9fe3d2;
  font-size: 12px;
}

.video-asset-card em {
  color: #7f96aa;
  font-size: 11px;
  font-style: normal;
}

.video-asset-card .btn {
  position: relative;
  z-index: 4;
  width: calc(100% - 24px);
  margin: 0 12px 12px;
}

.video-asset-card.is-active {
  border-color: rgba(20, 184, 166, .54);
  box-shadow: 0 0 0 1px rgba(20, 184, 166, .12), 0 18px 36px rgba(20, 184, 166, .08);
}

.video-asset-empty,
.video-asset-empty-state,
.video-asset-group-list p {
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(159, 227, 210, .2);
  border-radius: 8px;
  color: #8ba3b8;
  background: rgba(10, 24, 23, .44);
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 980px) {
  .video-asset-modal.script-modal {
    width: calc(100vw - 32px);
  }

  .video-asset-modal-grid {
    grid-template-columns: 1fr;
  }

  .video-asset-upload-row {
    grid-template-columns: 1fr;
  }
}

.video-avatar-select,
.video-avatar-create {
  display: grid;
  gap: 10px;
}

.video-avatar-create {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: end;
}

.video-avatar-create .js-video-asset-create {
  grid-column: 1 / -1;
  justify-self: start;
}

.video-avatar-list {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-color: rgba(34, 211, 238, .58) rgba(20, 38, 36, .66);
  scrollbar-width: thin;
}

.video-avatar-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(20, 38, 36, .62);
}

.video-avatar-item.is-active {
  border-color: rgba(159, 227, 210, .42);
  background: rgba(20, 184, 166, .10);
}

.video-avatar-item img,
.video-avatar-item > span {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(10, 24, 23, .60);
}

.video-avatar-item strong {
  display: block;
  overflow: hidden;
  color: #f6f5ef;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-avatar-item small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #93a7bc;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes imageSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
  .media-workbench {
    grid-template-columns: 1fr;
  }

  .image-selection-hero,
  .image-creator-hero {
    grid-template-columns: 1fr;
  }

  .image-history-card {
    max-height: none;
  }

  .image-history-list {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .media-feature-row,
  .media-form {
    grid-template-columns: 1fr;
  }

  .image-feature-grid,
  .image-creator-layout,
  .image-showcase,
  .image-advanced-grid,
  .video-advanced-grid,
  .image-result-actions,
  .image-submit-row,
  .video-avatar-create {
    grid-template-columns: 1fr;
  }

  .image-selection-hero,
  .image-creator-hero,
  .image-prompt-card,
  .image-result-card,
  .image-history-card {
    padding: 16px;
  }

  .image-selection-hero h2,
  .image-hero-bar strong {
    font-size: 24px;
  }

  .image-showcase-main,
  .image-showcase-main img {
    min-height: 320px;
  }

  .image-showcase-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .image-showcase-thumbs button,
  .image-showcase-thumbs img {
    min-height: 92px;
  }

  .image-result-media,
  .image-result-media img {
    min-height: 360px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: var(--paper-2);
  min-width: 1180px;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.nav {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 72px;
  color: #fff;
  background: rgba(8, 15, 28, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(18px);
  min-width: 1180px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

.brand-badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
}

.brand-badge.has-logo {
  overflow: hidden;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.nav-neo .brand-badge.has-logo,
.agent-page .brand-badge.has-logo {
  background: transparent;
  box-shadow: none;
}

.brand-badge.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
}

.nav-links a:hover {
  color: #fff;
}

.nav-links a {
  white-space: nowrap;
}

.nav-links .primary-link {
  color: #07111f;
  padding: 10px 16px;
  border-radius: 6px;
  background: #fff;
  font-weight: 800;
}

.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  padding: 160px 72px 96px;
  color: #fff;
  background: #07111f;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.2));
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 17, 31, .94) 0%, rgba(7, 17, 31, .76) 52%, rgba(7, 17, 31, .42) 100%),
    linear-gradient(180deg, transparent 0%, #07111f 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 62px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(125, 211, 252, .28);
  border-radius: 999px;
  color: #d3f2e4;
  background: rgba(20, 38, 36, .38);
  font-size: 14px;
}

.hero h1 {
  margin: 28px 0 18px;
  font-size: 68px;
  line-height: 1.02;
  letter-spacing: 0;
}

.hero h2 {
  margin: 0 0 22px;
  color: #d7f7ff;
  font-size: 30px;
  letter-spacing: 0;
}

.hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: 18px;
  line-height: 1.9;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 38px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
}

.btn-primary {
  color: #fff;
  background: #0c6b60;
}

.btn-primary:hover {
  background: #1e40af;
}

.btn-white {
  color: #07111f;
  background: #fff;
}

.btn-quiet {
  color: #d9efea;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}

.product-scene {
  position: relative;
  min-height: 470px;
}

.scene-window {
  position: absolute;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(15, 26, 43, .86);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
}

.scene-main {
  right: 0;
  top: 28px;
  width: 520px;
  padding: 18px;
}

.scene-side {
  left: 10px;
  bottom: 20px;
  width: 260px;
  padding: 16px;
}

.scene-mini {
  right: 72px;
  bottom: 0;
  width: 240px;
  padding: 16px;
}

.scene-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  color: rgba(255,255,255,.84);
  font-weight: 800;
}

.scene-title span {
  color: #93c5fd;
  font-size: 12px;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.metric {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
}

.metric b {
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
}

.metric small {
  color: rgba(255,255,255,.58);
}

.bar-list {
  display: grid;
  gap: 10px;
}

.bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.bar span {
  display: block;
  height: 100%;
  background: #22c55e;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-cloud span {
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(14, 165, 233, .16);
  color: #bae6fd;
  font-size: 12px;
}

.section {
  padding: 86px 72px;
}

.section.alt {
  background: #fff;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 34px;
}

.section-head h2 {
  margin: 0;
  font-size: 36px;
  letter-spacing: 0;
}

.section-head p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tile {
  min-height: 162px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 38, 36, .06);
}

.tile.dark {
  color: #fff;
  border-color: rgba(255,255,255,.10);
  background: #132523;
}

.tile-kicker {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--cyan);
  font-size: 13px;
  font-weight: 800;
}

.tile b {
  display: block;
  margin-bottom: 10px;
  font-size: 19px;
}

.tile p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.tile.dark p {
  color: rgba(255,255,255,.68);
}

.process {
  counter-reset: step;
}

.process .tile {
  position: relative;
  padding-top: 58px;
}

.process .tile::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 22px;
  left: 24px;
  color: var(--green);
  font-weight: 900;
  letter-spacing: 0;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 72px;
  color: rgba(255,255,255,.66);
  background: #07111f;
}

.footer strong {
  color: #fff;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 460px;
  color: #fff;
  background: #07111f;
}

.auth-art {
  position: relative;
  overflow: hidden;
  padding: 72px;
  background: #07111f;
}

.auth-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 40px 40px;
}

.auth-art-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.auth-art h1 {
  margin: 120px 0 18px;
  font-size: 54px;
  line-height: 1.12;
  letter-spacing: 0;
}

.auth-art p {
  color: rgba(255,255,255,.70);
  font-size: 18px;
  line-height: 1.9;
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: 42px;
  background: #fff;
  color: var(--ink);
}

.auth-box {
  width: 100%;
}

.auth-box h2 {
  margin: 0 0 8px;
  font-size: 30px;
}

.auth-box .sub {
  margin: 0 0 28px;
  color: var(--muted);
}

.form-row {
  margin-bottom: 16px;
}

.form-row label {
  display: block;
  margin-bottom: 8px;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}

.form-row input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  background: #fff;
}

.form-row input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.form-msg {
  min-height: 24px;
  margin-top: 14px;
  color: var(--red);
}

.form-link {
  margin-top: 18px;
  color: var(--muted);
  text-align: center;
}

.form-link a {
  color: var(--blue);
  font-weight: 800;
}

.shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  background: #f5f8fc;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  padding: 24px 18px;
  color: #fff;
  background: #07111f;
}

.sidebar .brand {
  margin-bottom: 30px;
}

.menu {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-color: rgba(96, 165, 250, .36) transparent;
  scrollbar-width: thin;
}

.menu::-webkit-scrollbar {
  width: 6px;
}

.menu::-webkit-scrollbar-track {
  background: transparent;
}

.menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(96, 165, 250, .30);
}

.menu-section {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.menu-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, .10);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(30, 64, 175, .18), rgba(8, 47, 73, .16));
  color: rgba(226, 232, 240, .66);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.menu-section-title em {
  color: rgba(226, 232, 240, .38);
  font-style: normal;
  transition: transform .18s ease;
}

.menu-section.is-collapsed .menu-section-title em {
  transform: rotate(-90deg);
}

.menu-section-items {
  display: grid;
  gap: 6px;
}

.menu-section.is-collapsed .menu-section-items {
  display: none;
}

.menu button {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: rgba(255,255,255,.72);
  text-align: left;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.menu button.menu-section-title {
  display: flex;
  min-height: 34px;
  padding: 9px 10px;
  color: rgba(226, 232, 240, .66);
  border: 1px solid rgba(148, 163, 184, .10);
  background: linear-gradient(135deg, rgba(30, 64, 175, .18), rgba(8, 47, 73, .16));
  font-size: 12px;
  font-weight: 800;
}

.menu .menu-section-title:hover {
  color: #fff;
  border-color: rgba(96, 165, 250, .34);
  background: linear-gradient(135deg, rgba(30, 64, 175, .34), rgba(8, 47, 73, .28));
}

.menu button.active,
.menu button:not(.menu-section-title):hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(37, 99, 235, .58), rgba(14, 116, 144, .38));
}

.main {
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 30px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.content {
  padding: 30px;
}

.panel {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(20, 38, 36, .06);
}

.panel h1 {
  margin: 0 0 10px;
}

.panel p {
  color: var(--muted);
  line-height: 1.8;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.stat-card {
  min-height: 120px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.stat-card span {
  color: var(--muted);
}

.stat-card strong {
  display: block;
  margin-top: 12px;
  font-size: 32px;
}

.admin-dashboard {
  display: grid;
  gap: 18px;
}

.dashboard-hero-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 22px;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .10), transparent 48%),
    linear-gradient(180deg, #fff, #f9f8f3);
}

.dashboard-hero-panel span,
.dashboard-panel-head span,
.dashboard-metric span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

.dashboard-hero-panel h1 {
  margin: 7px 0 8px;
  color: #142624;
  font-size: 30px;
}

.dashboard-hero-panel p {
  max-width: 760px;
  margin: 0;
  color: #647063;
}

.dashboard-hero-meta {
  display: grid;
  gap: 6px;
  min-width: 190px;
  padding: 12px;
  border: 1px solid #e5e7de;
  border-radius: 8px;
  background: #fff;
  text-align: right;
}

.dashboard-hero-meta strong {
  color: #142624;
  font-size: 14px;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-metric {
  min-height: 132px;
  padding: 17px;
  border: 1px solid #e5e7de;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 38, 36, .05);
  font: inherit;
  text-align: left;
}

.dashboard-metric strong {
  display: block;
  margin: 12px 0 8px;
  color: #142624;
  font-size: 27px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.dashboard-metric small {
  display: block;
  color: #647063;
  line-height: 1.55;
}

.dashboard-metric em {
  display: block;
  margin-top: 7px;
  color: #0284c7;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.dashboard-metric.is-clickable {
  width: 100%;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dashboard-metric.is-clickable:hover {
  border-color: #38bdf8;
  box-shadow: 0 14px 34px rgba(2, 132, 199, .13);
  transform: translateY(-2px);
}

.dashboard-metric.is-clickable:focus-visible {
  outline: 3px solid rgba(14, 165, 233, .22);
  outline-offset: 2px;
}

.dashboard-metric.primary {
  border-color: rgba(37, 99, 235, .22);
  background: linear-gradient(180deg, #eff6ff, #fff);
}

.dashboard-metric.cyan {
  border-color: rgba(14, 138, 124, .24);
  background: linear-gradient(180deg, #ecfeff, #fff);
}

.dashboard-metric.green {
  border-color: rgba(22, 163, 74, .22);
  background: linear-gradient(180deg, #f0fdf4, #fff);
}

.dashboard-metric.blue {
  border-color: rgba(14, 165, 233, .24);
  background: linear-gradient(180deg, #f0f9ff, #fff);
}

/* 后台首页全业务失败明细弹窗。 */
.dashboard-failure-mask {
  position: fixed;
  z-index: 1800;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(20, 38, 36, .62);
  backdrop-filter: blur(7px);
}

.dashboard-failure-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1220px, calc(100vw - 56px));
  max-height: min(820px, calc(100vh - 56px));
  overflow: hidden;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 32px 85px rgba(20, 38, 36, .28);
}

.dashboard-failure-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid #e5edf5;
  background: #f9f8f3;
}

.dashboard-failure-modal > header span { color: #0284c7; font-size: 10px; font-weight: 900; }
.dashboard-failure-modal > header h2 { margin: 4px 0 0; color: #142033; font-size: 23px; }
.dashboard-failure-modal > header p { margin: 6px 0 0; color: #6f8094; font-size: 12px; }
.dashboard-failure-close { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border: 1px solid #dbe5f0; border-radius: 7px; color: #647063; background: #fff; cursor: pointer; font-size: 22px; line-height: 1; }
.dashboard-failure-close:hover { color: #142624; border-color: #98a294; }

.dashboard-failure-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 22px;
  border-bottom: 1px solid #e7edf4;
}

.dashboard-failure-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.dashboard-failure-summary span { padding: 7px 10px; border-radius: 6px; color: #526276; background: #f1f5f9; font-size: 11px; }
.dashboard-failure-summary span.is-failed { color: #b91c1c; background: #fef2f2; }
.dashboard-failure-summary b { margin-left: 4px; color: #172033; font-size: 13px; }
.dashboard-failure-summary .is-failed b { color: #b91c1c; }
.dashboard-failure-toolbar > label { display: flex; align-items: center; gap: 9px; color: #647063; font-size: 11px; font-weight: 800; }
.dashboard-failure-toolbar .admin-select { width: 230px; min-height: 38px; }

.dashboard-failure-table-wrap { min-height: 0; overflow: auto; }
.dashboard-failure-table { min-width: 980px; table-layout: fixed; }
.dashboard-failure-table th:nth-child(1) { width: 155px; }
.dashboard-failure-table th:nth-child(2) { width: 150px; }
.dashboard-failure-table th:nth-child(3) { width: 190px; }
.dashboard-failure-table th:nth-child(4) { width: 150px; }
.dashboard-failure-table td { vertical-align: top; }
.dashboard-failure-table td > strong,
.dashboard-failure-table td > small,
.dashboard-failure-table td:nth-child(3) strong,
.dashboard-failure-table td:nth-child(3) small { display: block; }
.dashboard-failure-table td > small,
.dashboard-failure-table td:nth-child(3) small { margin-top: 4px; color: #8290a2; font-size: 10px; }
.dashboard-failure-source { display: inline-flex; min-height: 26px; align-items: center; padding: 0 8px; border-radius: 6px; color: #0369a1; background: #e0f2fe; font-size: 10px; font-weight: 800; }
.dashboard-failure-reason { display: grid; gap: 6px; }
.dashboard-failure-reason b { justify-self: start; padding: 3px 6px; border-radius: 4px; color: #b91c1c; background: #fee2e2; font-size: 9px; }
.dashboard-failure-reason span { color: #4d584a; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.dashboard-failure-empty { padding: 65px 20px; color: #8090a4; text-align: center; }
.dashboard-failure-empty strong { display: block; color: #334155; font-size: 15px; }
.dashboard-failure-empty p { margin: 5px 0 0; font-size: 11px; }
.dashboard-failure-modal > footer { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 22px; border-top: 1px solid #e5edf5; color: #718096; background: #f6f5ef; font-size: 11px; }
.dashboard-failure-modal > footer > div { display: flex; gap: 8px; }
.dashboard-failure-loading { display: grid; grid-row: 2 / 5; min-height: 360px; place-content: center; justify-items: center; padding: 30px; color: #75869a; text-align: center; }
.dashboard-failure-loading strong { color: #253247; font-size: 16px; }
.dashboard-failure-loading p { max-width: 520px; margin: 7px 0 16px; font-size: 12px; line-height: 1.7; }
.dashboard-failure-loading.is-error strong { color: #b91c1c; }

@media (max-width: 900px) {
  .dashboard-failure-mask { padding: 12px; }
  .dashboard-failure-modal { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .dashboard-failure-toolbar { align-items: stretch; flex-direction: column; }
  .dashboard-failure-toolbar > label { justify-content: space-between; }
}

.dashboard-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 14px;
}

.dashboard-section-grid.wide {
  grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr);
}

.dashboard-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e5e7de;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 38, 36, .045);
}

.dashboard-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.dashboard-panel-head h2 {
  margin: 4px 0 0;
  color: #142624;
  font-size: 20px;
}

.dashboard-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-split div,
.dashboard-quality div {
  min-height: 82px;
  padding: 13px;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  background: #f9f8f3;
}

.dashboard-split span,
.dashboard-quality span {
  display: block;
  color: #647063;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-split strong,
.dashboard-quality strong {
  display: block;
  margin-top: 8px;
  color: #142624;
  font-size: 20px;
}

.dashboard-quality {
  display: grid;
  gap: 10px;
}

.dashboard-quality small {
  display: block;
  margin-top: 6px;
  color: #647063;
}

.dashboard-feature-list {
  display: grid;
  gap: 12px;
}

.dashboard-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  gap: 14px;
  align-items: center;
}

.dashboard-feature-row strong,
.dashboard-feature-row span {
  display: block;
}

.dashboard-feature-row strong {
  color: #142624;
}

.dashboard-feature-row span {
  margin-top: 4px;
  color: #647063;
  font-size: 12px;
}

.dashboard-feature-row em {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7de;
}

.dashboard-feature-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.dashboard-empty {
  padding: 24px;
  border: 1px dashed #cfd2c8;
  border-radius: 8px;
  color: #647063;
  text-align: center;
  background: #f6f5ef;
}

.dashboard-table-wrap {
  border-color: #e5e7de;
}

.dashboard-table {
  min-width: 860px;
}

.dashboard-table td {
  vertical-align: top;
}

.dashboard-table small {
  color: #647063;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0;
}

.admin-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-input,
.admin-select,
.admin-textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.admin-select {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, #647063 50%),
    linear-gradient(135deg, #647063 50%, transparent 50%),
    linear-gradient(to right, #e5e7de, #e5e7de);
  background-position:
    calc(100% - 18px) 17px,
    calc(100% - 13px) 17px,
    calc(100% - 34px) 50%;
  background-size: 5px 5px, 5px 5px, 1px 22px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.admin-select:hover {
  border-color: rgba(37, 99, 235, .38);
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.media-feature-admin {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d9efea;
  border-radius: 8px;
  background: linear-gradient(180deg, #f9f8f3, #eef7ff);
}

.media-feature-admin h3 {
  margin: 0;
  color: #142624;
  font-size: 15px;
}

.media-feature-admin p {
  margin: 0;
  color: #647063;
  font-size: 13px;
}

.media-feature-admin-list {
  display: grid;
  gap: 8px;
}

.media-feature-admin-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 120px minmax(220px, 2fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e5e7de;
  border-radius: 8px;
  background: #fff;
}

.media-feature-admin-row strong {
  color: #142624;
}

.rich-editor-field {
  align-content: start;
}

.rich-editor {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 38, 36, .06);
}

.rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 9px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f9f8f3, #eef4fb);
}

.rich-editor-toolbar button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #dbe4ef;
  border-radius: 6px;
  background: #fff;
  color: #1e293b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.rich-editor-toolbar button:hover {
  border-color: rgba(37, 99, 235, .38);
  color: #0c6b60;
  background: #eff6ff;
}

.rich-editor-area {
  min-height: 190px;
  max-height: 460px;
  padding: 14px 16px;
  overflow: auto;
  color: #142624;
  outline: none;
  line-height: 1.75;
}

.rich-editor-area:empty::before {
  color: #98a294;
  content: attr(data-placeholder);
}

.rich-editor-area p {
  margin: 0 0 10px;
}

.rich-editor-area blockquote {
  margin: 10px 0;
  padding: 10px 12px;
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
}

.rich-editor-area img {
  display: block;
  max-width: 100%;
  margin: 12px 0;
  border: 1px solid #e5e7de;
  border-radius: 8px;
}

.rich-editor-area ul,
.rich-editor-area ol {
  margin: 8px 0 12px 20px;
  padding: 0;
}

.admin-search {
  width: 260px;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
  background: #fff;
}

.admin-table th,
.admin-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

.admin-table th {
  color: #334155;
  background: #f6f5ef;
  font-weight: 800;
  white-space: nowrap;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table td .btn {
  min-width: 0;
  min-height: 34px;
  padding: 8px 10px;
  margin-right: 6px;
  font-size: 13px;
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f5ef;
}

.admin-form .wide {
  grid-column: span 3;
}

.admin-section-title {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-section-title h2 {
  margin: 0;
  color: #142624;
  font-size: 18px;
}

.admin-section-title p {
  margin: 0;
  color: #647063;
  font-size: 13px;
  line-height: 1.6;
}

.admin-form label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.admin-form-actions {
  grid-column: span 3;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.admin-card {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.admin-card h2 {
  margin: 0 0 12px;
  color: #142624;
  font-size: 18px;
}

.media-admin-config {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
}

.media-admin-config + .media-admin-config {
  margin-top: 12px;
}

.media-admin-config .wide {
  grid-column: 1 / -1;
}

.admin-table .admin-input,
.admin-table .admin-select {
  min-width: 100px;
}

.admin-media-preview {
  display: block;
  width: 112px;
  max-height: 92px;
  border-radius: 8px;
  object-fit: cover;
  background: #142624;
}

.admin-msg {
  min-height: 22px;
  margin-top: 12px;
  color: var(--red);
}

.admin-tip {
  margin: 10px 0 16px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1e3a8a;
  background: #eff6ff;
  line-height: 1.7;
}

.admin-code {
  max-height: 320px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid #dbe3ef;
  border-radius: 6px;
  color: #142624;
  background: #f6f5ef;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.panel .btn-quiet {
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.panel .btn-quiet:hover {
  color: #172554;
  background: #d9efea;
}

/* 工作流协议中心 */
.protocol-page-head {
  align-items: flex-start;
}

.protocol-version-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 440px;
}

.protocol-version-stack span,
.protocol-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid #cfd2c8;
  border-radius: 999px;
  color: #4d584a;
  background: #f6f5ef;
  font-size: 12px;
  font-weight: 800;
}

.protocol-status.enabled,
.protocol-status.success {
  color: #047857;
  border-color: #d3f2e4;
  background: #ecfdf5;
}

.protocol-status.enabled_fixed,
.protocol-status.waiting,
.protocol-status.running {
  color: #a16207;
  border-color: #f8e3bb;
  background: #fffbeb;
}

.protocol-status.failed {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

.protocol-status.reserved {
  color: #647063;
  border-color: #cfd2c8;
  background: #f1f5f9;
}

.protocol-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.protocol-summary-grid article {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: linear-gradient(145deg, #fff, #f6f5ef);
}

.protocol-summary-grid small {
  color: #647063;
  font-weight: 700;
}

.protocol-summary-grid strong {
  color: #142624;
  font-size: 24px;
}

.admin-page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.protocol-section {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
}

.protocol-phase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.protocol-phase-card,
.protocol-contract-card,
.protocol-director-profile {
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fbfdff;
  overflow: hidden;
}

.protocol-phase-card.enabled_fixed {
  border-color: #f8e3bb;
  background: #fffdf5;
}

.protocol-phase-card > summary,
.protocol-contract-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.protocol-phase-card > summary::-webkit-details-marker,
.protocol-contract-card > summary::-webkit-details-marker {
  display: none;
}

.protocol-phase-card > summary > div,
.protocol-contract-card > summary {
  min-width: 0;
}

.protocol-phase-card > summary > div {
  display: grid;
  gap: 5px;
}

.protocol-phase-card > summary small,
.protocol-contract-card > summary small {
  color: #647063;
  font-size: 12px;
  line-height: 1.5;
}

.protocol-phase-card dl,
.protocol-agent-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0 16px 16px;
}

.protocol-phase-card dl div,
.protocol-agent-card dl div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 7px;
  background: #f1f5f9;
}

.protocol-phase-card dt,
.protocol-agent-card dt {
  color: #647063;
  font-size: 11px;
  font-weight: 800;
}

.protocol-phase-card dd,
.protocol-agent-card dd {
  margin: 0;
  color: #142624;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}

.protocol-command-chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.protocol-command-chain article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 138px;
  padding: 13px;
  border: 1px solid #dbe4f0;
  border-radius: 9px;
  background: linear-gradient(145deg, #fff, #f6f5ef);
}

.protocol-command-chain article > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

.protocol-command-chain strong {
  color: #142624;
  font-size: 13px;
}

.protocol-command-chain p {
  margin: 0;
  color: #647063;
  font-size: 12px;
  line-height: 1.6;
}

.protocol-contract-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.protocol-contract-card {
  min-width: 0;
}

.protocol-contract-card > summary {
  display: grid;
  justify-content: stretch;
}

.protocol-contract-card .admin-code {
  min-height: 220px;
  max-height: 620px;
  margin: 0 16px 16px;
}

.protocol-director-profile {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 16px;
}

.protocol-director-profile > span,
.protocol-director-profile > small {
  color: #647063;
  font-size: 12px;
  font-weight: 700;
}

.protocol-director-profile > strong {
  color: #142624;
  font-size: 20px;
}

.protocol-director-profile > p {
  margin: 0;
  color: #4d584a;
}

.protocol-director-profile details summary {
  color: #0c6b60;
  cursor: pointer;
  font-weight: 800;
}

.protocol-validation-list {
  display: grid;
  gap: 6px;
  margin: 8px 16px 14px 34px;
  padding: 0;
  color: #4d584a;
  font-size: 13px;
  line-height: 1.55;
}

.protocol-preview-note {
  padding-bottom: 14px;
  color: #4d584a !important;
}

.protocol-agent-api-preview {
  max-height: 720px;
}

.protocol-config-form {
  margin-top: 14px;
}

.protocol-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.protocol-flow article {
  position: relative;
  display: flex;
  gap: 10px;
  min-height: 124px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #f6f5ef;
}

.protocol-flow article > span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

.protocol-flow strong,
.protocol-definition-card strong,
.protocol-node-grid strong,
.protocol-agent-card strong {
  color: #142624;
}

.protocol-flow p,
.protocol-definition-card p,
.protocol-node-grid p,
.protocol-agent-card p {
  margin: 7px 0 0;
  color: #647063;
  font-size: 13px;
  line-height: 1.65;
}

.protocol-definition-grid,
.protocol-agent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.protocol-definition-card,
.protocol-agent-card,
.protocol-run-card {
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fbfdff;
  overflow: hidden;
}

.protocol-definition-card > summary,
.protocol-agent-card > summary,
.protocol-run-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.protocol-definition-card > summary::-webkit-details-marker,
.protocol-agent-card > summary::-webkit-details-marker,
.protocol-run-card > summary::-webkit-details-marker {
  display: none;
}

.protocol-definition-card > summary > div,
.protocol-agent-card > summary > div {
  display: grid;
  gap: 5px;
}

.protocol-definition-card code,
.protocol-node-grid code,
.protocol-agent-card code,
.protocol-run-card code {
  color: #0c6b60;
  font-size: 12px;
  word-break: break-all;
}

.protocol-definition-card > p,
.protocol-definition-card > dl,
.protocol-definition-card > h4,
.protocol-definition-card > pre,
.protocol-agent-card > p,
.protocol-agent-card > dl,
.protocol-agent-card > h4,
.protocol-agent-card > pre {
  margin-left: 16px;
  margin-right: 16px;
}

.protocol-definition-card > pre:last-child,
.protocol-agent-card > pre:last-child {
  margin-bottom: 16px;
}

.protocol-definition-card dl,
.protocol-run-detail dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.protocol-definition-card dl div,
.protocol-run-detail dl div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 7px;
  background: #f1f5f9;
}

.protocol-definition-card dt,
.protocol-run-detail dt {
  color: #647063;
  font-size: 11px;
  font-weight: 800;
}

.protocol-definition-card dd,
.protocol-run-detail dd {
  margin: 0;
  color: #142624;
  font-size: 13px;
  word-break: break-word;
}

.protocol-node-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.protocol-node-grid > article {
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fbfdff;
}

.protocol-node-grid header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.protocol-node-grid details {
  margin-top: 10px;
}

.protocol-node-grid details summary {
  color: #0c6b60;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.protocol-agent-card h4,
.protocol-definition-card h4,
.protocol-preview-columns h4 {
  margin-top: 14px;
  margin-bottom: 8px;
  color: #334155;
  font-size: 13px;
}

.protocol-run-filter {
  display: grid;
  grid-template-columns: 160px minmax(150px, 0.6fr) minmax(240px, 1fr) auto;
  gap: 10px;
  margin: 14px 0;
}

.protocol-run-list {
  display: grid;
  gap: 10px;
}

.protocol-job-console {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d7e2ee;
  border-radius: 12px;
  color: #172033;
  background: #f4f8fc;
}

.protocol-job-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.protocol-job-overview article {
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  background: linear-gradient(180deg, #f9f8f3 0%, #eef6ff 100%);
}

.protocol-job-overview small,
.protocol-job-toolbar span {
  display: block;
  color: #647063;
  font-size: 12px;
}

.protocol-job-overview strong {
  display: block;
  margin-top: 5px;
  color: #142624;
  font-size: 22px;
}

.protocol-job-toolbar {
  margin: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.protocol-job-toolbar label {
  width: min(260px, 100%);
  display: grid;
  gap: 6px;
  color: #4d584a;
  font-size: 12px;
}

.protocol-job-list {
  max-height: 480px;
  overflow: auto;
  padding: 2px 6px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: #98a294 #eef2f7;
}

.protocol-job-card {
  color: #172033 !important;
  border-color: #cbd9e7 !important;
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(30, 64, 95, .06);
}

.protocol-job-card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  color: #172033 !important;
  background: #fff !important;
  cursor: pointer;
}

.protocol-job-card[open] > summary {
  border-bottom: 1px solid #e5e7de;
  background: #f9f8f3 !important;
}

.protocol-job-card .protocol-run-main strong {
  color: #142624 !important;
  font-size: 14px;
}

.protocol-job-card .protocol-run-main > span:not(.protocol-status),
.protocol-job-card .protocol-run-meta span {
  color: #52657a !important;
  font-size: 12px;
}

.protocol-job-card .protocol-run-main code {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 6px;
  border-radius: 5px;
  color: #0c6b60 !important;
  background: #eef4ff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-job-detail {
  margin: 0;
  padding: 0 16px 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.protocol-job-detail div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f6f5ef;
}

.protocol-job-detail dt {
  margin: 0 0 4px;
  color: #647063;
  font-size: 12px;
}

.protocol-job-detail dd {
  margin: 0;
  overflow: hidden;
  color: #1e293b;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-job-card .admin-error {
  margin: 0 16px 14px;
  padding: 9px 11px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b !important;
  background: #fff1f2;
  line-height: 1.6;
}

.protocol-run-card.failed {
  border-color: #fecaca;
}

.protocol-run-main,
.protocol-run-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.protocol-run-main {
  min-width: 0;
}

.protocol-run-meta {
  justify-content: flex-end;
  color: #647063;
  font-size: 12px;
}

.protocol-run-detail {
  padding: 0 16px 16px;
  border-top: 1px solid #e5e7de;
}

.protocol-run-detail > dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.protocol-preview-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.protocol-preview-columns article {
  min-width: 0;
}

.protocol-preview-columns .admin-code {
  min-height: 180px;
  max-height: 520px;
}

@media (max-width: 1180px) {
  .protocol-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protocol-node-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protocol-command-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protocol-run-detail > dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protocol-job-overview,
  .protocol-job-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .protocol-phase-grid,
  .protocol-contract-grid,
  .protocol-definition-grid,
  .protocol-agent-grid {
    grid-template-columns: 1fr;
  }

  .protocol-command-chain {
    grid-template-columns: 1fr;
  }
}

.admin-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

.admin-pager .btn {
  min-width: 82px;
  min-height: 36px;
  padding: 8px 12px;
}

.admin-pager .btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.admin-pager .admin-limit {
  width: 110px;
  min-height: 36px;
}

.admin-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.admin-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
}

.system-form .system-image-field {
  grid-column: span 3;
}

.system-image-row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  align-items: center;
}

.system-image-preview {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 1px dashed #cfd2c8;
  border-radius: 8px;
  color: #98a294;
  background: #fff;
  font-size: 12px;
}

.system-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.system-image-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px;
  align-items: center;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #065f46;
  background: #d1fae5;
  font-size: 12px;
  font-weight: 800;
}

.status-pill.off {
  color: #7f1d1d;
  background: #fee2e2;
}

@media (max-width: 1180px) {
  .nav,
  .hero,
  .section,
  .footer {
    padding-left: 36px;
    padding-right: 36px;
  }

  .hero-inner,
  .auth-page {
    grid-template-columns: 1fr;
  }

  .product-scene {
    display: none;
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 新版官网：更偏 AI 智能体产品的视觉语言 */
.home-page {
  background: #070d18;
}

.nav-neo {
  background: rgba(5, 10, 20, .74);
  border-bottom-color: rgba(148, 163, 184, .14);
}

.nav-neo .brand-badge,
.agent-page .brand-badge {
  background: linear-gradient(135deg, #0f766e, #0c6b60);
  box-shadow: 0 0 28px rgba(53, 193, 172, .26);
}

.hero-neo {
  min-height: 820px;
  background:
    radial-gradient(circle at 74% 30%, rgba(34, 211, 238, .20), transparent 34%),
    radial-gradient(circle at 42% 72%, rgba(37, 99, 235, .18), transparent 32%),
    #070d18;
}

.hero-orbit {
  position: absolute;
  right: 80px;
  top: 126px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(125, 211, 252, .13);
  border-radius: 50%;
  z-index: 1;
}

.hero-orbit span {
  position: absolute;
  inset: 64px;
  border: 1px solid rgba(53, 193, 172, .10);
  border-radius: 50%;
}

.hero-orbit span:nth-child(2) {
  inset: 128px;
}

.hero-orbit span:nth-child(3) {
  inset: 210px;
  background: rgba(34, 211, 238, .06);
}

.hero-neo-inner {
  grid-template-columns: .92fr 1.08fr;
}

.hero-copy h1 {
  font-size: 76px;
}

.hero-copy h2 {
  color: #bff8ff;
}

.btn-glow {
  box-shadow: 0 0 40px rgba(37, 99, 235, .34);
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
  max-width: 650px;
}

.hero-proof div {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(20, 38, 36, .42);
}

.hero-proof b,
.hero-proof span {
  display: block;
}

.hero-proof b {
  color: #d9efea;
  margin-bottom: 5px;
}

.hero-proof span {
  color: rgba(226, 232, 240, .62);
  font-size: 12px;
}

.agent-console {
  position: relative;
  min-height: 560px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(20, 38, 36, .86), rgba(8, 15, 28, .56)),
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, .16), transparent 42%);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .34);
  overflow: hidden;
  backdrop-filter: blur(18px);
}

.agent-console::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle, #000 30%, transparent 76%);
}

.agent-top,
.agent-bottom {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-top {
  top: 20px;
  color: rgba(226, 232, 240, .72);
  font-size: 12px;
  letter-spacing: 0;
}

.agent-top i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 22px #22c55e;
}

.agent-map {
  position: absolute;
  inset: 70px 40px 120px;
  z-index: 2;
}

.core-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  background: radial-gradient(circle, #0c6b60, #0f766e);
  box-shadow: 0 0 68px rgba(34, 211, 238, .42);
}

.core-pulse::before,
.core-pulse::after {
  content: "";
  position: absolute;
  inset: -42px;
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 50%;
}

.core-pulse::after {
  inset: -95px;
}

.agent-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(125, 211, 252, .22);
  border-radius: 50%;
  color: #dffbff;
  background: rgba(20, 38, 36, .76);
  box-shadow: inset 0 0 28px rgba(14, 165, 233, .14);
  font-weight: 800;
}

.n1 { left: 8%; top: 18%; }
.n2 { right: 14%; top: 10%; }
.n3 { right: 7%; top: 48%; }
.n4 { right: 28%; bottom: 2%; }
.n5 { left: 25%; bottom: 8%; }
.n6 { left: 5%; top: 58%; }

.agent-bottom {
  bottom: 22px;
  gap: 14px;
}

.agent-card {
  flex: 1;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(20, 38, 36, .74);
}

.agent-card small,
.agent-card strong {
  display: block;
}

.agent-card small {
  color: rgba(226, 232, 240, .55);
}

.agent-card strong {
  margin-top: 8px;
  color: #d3f2e4;
}

.neo-section {
  color: #e5f4ff;
  background:
    radial-gradient(circle at 10% 12%, rgba(34, 211, 238, .10), transparent 28%),
    #070d18;
}

.neo-section .section-head p {
  color: rgba(226, 232, 240, .66);
}

.matrix-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 18px;
}

.matrix-card {
  min-height: 190px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 10px;
  background: rgba(20, 38, 36, .72);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .20);
}

.matrix-card.wide {
  grid-row: span 2;
}

.matrix-card.dark {
  background:
    radial-gradient(circle at 70% 20%, rgba(20, 184, 166, .22), transparent 34%),
    rgba(8, 15, 28, .92);
}

.matrix-card span {
  color: #7ad9d2;
  font-weight: 900;
}

.matrix-card b {
  display: block;
  margin: 20px 0 12px;
  color: #fff;
  font-size: 24px;
}

.matrix-card p {
  margin: 0;
  color: rgba(226, 232, 240, .66);
  line-height: 1.8;
}

.light-lab {
  background: #eef4fb;
}

.audience-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.audience-strip span {
  display: grid;
  place-items: center;
  min-height: 118px;
  border: 1px solid #e0e3da;
  border-radius: 10px;
  background: #fff;
  color: #142624;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 18px 38px rgba(20, 38, 36, .06);
}

.flow-line {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.flow-line div {
  position: relative;
  min-height: 150px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 10px;
  background: rgba(20, 38, 36, .72);
}

.flow-line b,
.flow-line span {
  display: block;
}

.flow-line b {
  color: #fff;
  margin-bottom: 16px;
}

.flow-line span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.footer-neo {
  border-top: 1px solid rgba(148, 163, 184, .14);
}

.footer-service {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.footer-service b {
  font-weight: 800;
}

.footer-qr {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}

.footer-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 用户工作台：创作中台壳 */
.agent-page {
  min-width: 1180px;
  min-height: 100vh;
  color: #dbe7f3;
  background:
    linear-gradient(180deg, rgba(12, 22, 37, .94), rgba(6, 12, 22, 1)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0, rgba(255, 255, 255, .025) 1px, transparent 1px, transparent 72px);
}

.agent-page button {
  letter-spacing: 0;
}

.agent-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 12px 14px 24px;
}

.agent-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: 230px minmax(100px, 1fr) 190px 190px 112px 118px 78px 184px;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 0 14px 0 18px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(8, 15, 28, .88);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24);
  backdrop-filter: blur(16px);
}

.default-profile-pill,
.model-picker,
.async-task-trigger,
.checkin-trigger,
.feedback-trigger,
.profile-trigger {
  height: 56px;
  min-height: 56px;
  width: 100%;
  color: #d9efea;
  border: 1px solid rgba(159, 227, 210, .22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .16), rgba(37, 99, 235, .10)),
    rgba(20, 38, 36, .72);
  text-align: left;
}

.default-profile-pill {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
}

.default-profile-pill:hover,
.model-picker:focus-within,
.async-task-wrap.is-open .async-task-trigger,
.async-task-trigger:hover,
.checkin-trigger:hover,
.checkin-trigger.is-done,
.feedback-trigger:hover,
.profile-trigger:hover,
.profile-wrap.is-open .profile-trigger {
  border-color: rgba(159, 227, 210, .48);
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .24), rgba(37, 99, 235, .16)),
    rgba(20, 38, 36, .94);
}

.default-profile-pill span,
.model-picker span,
.async-task-trigger span,
.checkin-trigger span,
.profile-name small {
  color: #7ad9d2;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
}

.default-profile-pill strong {
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.default-profile-pill small {
  display: none;
  overflow: hidden;
  color: #9fb2c8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-context {
  justify-self: center;
  display: inline-grid;
  text-align: center;
}

.agent-context span {
  display: none;
}

.agent-context strong {
  color: #fff;
  font-size: 20px;
  line-height: 1.12;
  white-space: nowrap;
}

.model-picker {
  display: grid;
  position: relative;
  align-content: center;
  gap: 2px;
  padding: 8px 36px 8px 12px;
}

.model-picker::after {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(103, 232, 249, .86);
  border-bottom: 2px solid rgba(103, 232, 249, .86);
  content: "";
  pointer-events: none;
  transform: translateY(-40%) rotate(45deg);
}

.model-picker select {
  width: 100%;
  min-height: 24px;
  padding: 0;
  appearance: none;
  color: #e5edf5;
  border: 0;
  background: transparent;
  color-scheme: dark;
  outline: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.model-picker select:focus {
  outline: none;
}

.model-picker select option {
  color: #e5edf5;
  background: #0b1424;
}

.model-picker select option:checked {
  color: #06121f;
  background: #9fe3d2;
}

.async-task-wrap {
  position: relative;
}

.checkin-trigger {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
}

.checkin-trigger strong {
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-trigger {
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 6px;
  text-align: center;
  cursor: pointer;
}

.feedback-trigger-icon {
  display: grid;
  width: 27px;
  height: 24px;
  margin: 0 auto;
  place-items: center;
  color: #081521;
  border-radius: 6px;
  background: #9fe3d2;
  box-shadow: 0 7px 18px rgba(53, 193, 172, .22);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.feedback-trigger small {
  color: #d9f8f4;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.checkin-trigger.is-done {
  opacity: .82;
}

.checkin-trigger.is-done strong {
  color: #d3f2e4;
}

.checkin-trigger.is-locked {
  border-color: rgba(251, 191, 36, .34);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, .14), rgba(148, 163, 184, .10)),
    rgba(20, 38, 36, .82);
}

.checkin-trigger.is-locked span {
  color: #f8e3bb;
}

.checkin-trigger.is-locked strong {
  color: #fef3c7;
}

.async-task-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

.async-task-trigger strong {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #062019;
  background: #9fe3d2;
  font-size: 13px;
}

.async-task-trigger strong.is-empty {
  color: #cfd2c8;
  background: rgba(148, 163, 184, .18);
}

.async-task-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  right: 0;
  display: none;
  width: 360px;
  max-height: 520px;
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(159, 227, 210, .22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(13, 30, 50, .98), rgba(5, 13, 25, .98));
  box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
  scrollbar-color: rgba(34, 211, 238, .58) rgba(20, 38, 36, .66);
  scrollbar-width: thin;
  backdrop-filter: blur(18px);
}

.async-task-wrap.is-open .async-task-popover {
  display: block;
}

.async-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.async-task-head strong {
  color: #fff;
  font-size: 15px;
}

.async-task-head button,
.async-task-item button {
  min-height: 28px;
  border: 1px solid rgba(159, 227, 210, .26);
  border-radius: 8px;
  color: #cffafe;
  background: rgba(20, 38, 36, .88);
  cursor: pointer;
}

.async-task-head button {
  padding: 4px 9px;
}

.async-task-list {
  display: grid;
  gap: 10px;
  max-height: 430px;
  overflow: auto;
  padding-right: 6px;
  scrollbar-color: rgba(34, 211, 238, .58) rgba(20, 38, 36, .66);
  scrollbar-width: thin;
}

.async-task-list > p {
  margin: 0;
  padding: 12px;
  color: #93a7bc;
}

.async-task-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(20, 38, 36, .72);
}

.async-task-item span,
.async-task-item small {
  color: #93a7bc;
  font-size: 12px;
}

.async-task-item strong {
  display: block;
  margin-top: 3px;
  color: #f6f5ef;
  font-size: 14px;
}

.async-task-item em {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .20);
}

.async-task-item em i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #22d3ee;
}

.async-task-item p {
  margin: 0;
  color: #cfd2c8;
  font-size: 12px;
  line-height: 1.5;
}

.async-task-item footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.async-task-item footer a {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 800;
}

.async-task-item button {
  margin-left: auto;
  padding: 3px 9px;
}

.async-task-item button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.profile-wrap {
  position: relative;
}

.profile-trigger {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 7px;
  cursor: pointer;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #0c6b60 58%, #b45309);
  font-weight: 900;
}

.profile-avatar.large {
  width: 48px;
  height: 48px;
}

.profile-name {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

.profile-name b {
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-trigger i {
  color: #98a294;
  font-style: normal;
  font-weight: 900;
}

.profile-card {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 324px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: #0b1424;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .42);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}

.profile-wrap:hover .profile-card,
.profile-wrap.is-open .profile-card {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.checkin-modal-mask {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(20, 184, 166, .20), transparent 34%),
    rgba(10, 24, 23, .76);
  backdrop-filter: blur(18px);
}

.checkin-modal {
  position: relative;
  width: min(560px, 100%);
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, .24);
  border-radius: 18px;
  color: #d9efea;
  background:
    linear-gradient(160deg, rgba(7, 19, 34, .98), rgba(5, 12, 23, .98) 58%, rgba(14, 26, 46, .98));
  box-shadow: 0 38px 100px rgba(0, 0, 0, .52);
}

.checkin-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .12;
}

.checkin-modal > * {
  position: relative;
  z-index: 1;
}

.checkin-modal.is-success {
  border-color: rgba(250, 204, 21, .40);
}

.checkin-modal.is-locked {
  border-color: rgba(251, 191, 36, .34);
}

.checkin-close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 50%;
  color: #cfd2c8;
  background: rgba(20, 38, 36, .80);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.checkin-close:hover {
  color: #fff;
  border-color: rgba(159, 227, 210, .48);
  background: rgba(20, 184, 166, .18);
}

.checkin-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 44px 18px 0;
}

.checkin-modal-top span,
.checkin-prize-main span,
.checkin-prize-aside span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.checkin-modal-top h3 {
  margin: 8px 0 8px;
  color: #fff;
  font-size: 25px;
  line-height: 1.2;
}

.checkin-modal-top p {
  max-width: 390px;
  margin: 0;
  color: #aabbd1;
  line-height: 1.7;
}

.checkin-modal-top > strong {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid rgba(159, 227, 210, .20);
  border-radius: 999px;
  color: #d9f99d;
  background: rgba(20, 184, 166, .10);
  font-size: 13px;
}

.checkin-modal.is-locked .checkin-modal-top > strong {
  color: #f8e3bb;
  border-color: rgba(251, 191, 36, .28);
  background: rgba(120, 53, 15, .18);
}

.checkin-prize-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(125, 211, 252, .20);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .22), rgba(14, 165, 233, .14) 48%, rgba(250, 204, 21, .14)),
    rgba(20, 38, 36, .74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.checkin-prize-main {
  display: grid;
  align-content: center;
  min-height: 180px;
  padding: 22px;
  border-radius: 13px;
  background: rgba(10, 24, 23, .36);
}

.checkin-prize-main div {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 10px 0 12px;
}

.checkin-prize-main strong {
  color: #fff;
  font-size: 64px;
  line-height: .92;
}

.checkin-prize-main small {
  padding-bottom: 8px;
  color: #bbf7d0;
  font-size: 16px;
  font-weight: 900;
}

.checkin-prize-main p {
  max-width: 300px;
  margin: 0;
  color: #cfd2c8;
  line-height: 1.7;
}

.checkin-prize-aside {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 13px;
  background: rgba(255, 255, 255, .07);
}

.checkin-prize-aside strong {
  color: #fff;
  font-size: 20px;
}

.checkin-prize-aside small {
  margin: 0;
  color: #aabbd1;
  line-height: 1.6;
}

.checkin-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.checkin-days span {
  display: grid;
  align-content: center;
  place-items: center;
  gap: 4px;
  min-height: 62px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 10px;
  color: #98a294;
  background: rgba(20, 38, 36, .48);
}

.checkin-days span.active {
  color: #05201b;
  border-color: rgba(159, 227, 210, .76);
  background: linear-gradient(180deg, #c8efe6, #9fe3d2);
  box-shadow: 0 12px 26px rgba(20, 184, 166, .22);
}

.checkin-days b,
.checkin-days small {
  display: block;
  font-weight: 900;
}

.checkin-days b {
  font-size: 13px;
}

.checkin-days small {
  font-size: 11px;
  opacity: .78;
}

.checkin-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.checkin-actions .btn {
  min-width: 128px;
}

.profile-card-head {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.profile-card-head strong,
.profile-card-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card-head strong {
  color: #fff;
  font-size: 16px;
}

.profile-card-head small {
  margin-top: 4px;
  color: #98a294;
  font-size: 12px;
}

.profile-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.profile-metrics div {
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  background: rgba(20, 38, 36, .78);
}

.profile-metrics span,
.profile-expire,
.panel-label {
  color: #98a294;
  font-size: 12px;
}

.profile-metrics strong {
  display: block;
  margin-top: 9px;
  color: #fff;
  font-size: 20px;
}

.profile-expire {
  min-height: 34px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(20, 184, 166, .10);
  color: #d3f2e4;
}

.profile-actions {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.profile-actions button {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  color: #dbe7f3;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.profile-actions button:hover {
  border-color: rgba(148, 163, 184, .16);
  background: rgba(148, 163, 184, .10);
}

.profile-actions button.profile-action-primary {
  color: #052e2b;
  border-color: rgba(159, 227, 210, .72);
  background: linear-gradient(90deg, #9fe3d2, #facc15);
  font-weight: 900;
}

.profile-actions button.profile-action-primary:hover {
  color: #052e2b;
  border-color: rgba(250, 204, 21, .90);
  background: linear-gradient(90deg, #c8efe6, #fde047);
}

.profile-actions button.profile-action-library {
  position: relative;
  color: #c8efe6;
  border-color: rgba(159, 227, 210, .18);
  background: rgba(20, 184, 166, .08);
  font-weight: 850;
}

.profile-actions button.profile-action-library::after {
  margin-left: auto;
  color: #5f7f86;
  font-size: 10px;
  font-weight: 700;
  content: "收藏与调用";
}

.profile-actions button.profile-action-library:hover {
  color: #ccfbf1;
  border-color: rgba(159, 227, 210, .34);
  background: rgba(20, 184, 166, .13);
}

.workspace-layout {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  transition: grid-template-columns .26s cubic-bezier(.2, .8, .2, 1);
}

.workspace-layout.is-nav-collapsed {
  grid-template-columns: 84px minmax(0, 1fr);
}

.workspace-sidebar {
  position: sticky;
  top: 82px;
  align-self: start;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  max-height: calc(100vh - 96px);
  padding: 8px;
  overflow: visible;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(8, 15, 28, .74);
  transition: padding .26s cubic-bezier(.2, .8, .2, 1), background-color .26s ease;
}

.workspace-sidebar-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.workspace-sidebar-heading {
  display: grid;
  min-width: 0;
  gap: 2px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .16s ease, width .26s cubic-bezier(.2, .8, .2, 1);
}

.workspace-sidebar-heading span {
  color: #eef6ff;
  font-size: 13px;
  font-weight: 900;
}

.workspace-sidebar-heading small {
  color: #6f8299;
  font-size: 10px;
}

.workspace-nav-toggle {
  min-width: 48px;
  height: 30px;
  padding: 0 9px;
  color: #9ee9e2;
  border: 1px solid rgba(159, 227, 210, .25);
  border-radius: 7px;
  background: rgba(20, 184, 166, .08);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.workspace-nav-toggle:hover {
  color: #06121f;
  border-color: #9fe3d2;
  background: #9fe3d2;
}

.workspace-nav-toggle:active {
  transform: scale(.96);
}

.workspace-nav {
  display: grid;
  gap: 16px;
  min-height: 0;
  padding: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(159, 227, 210, .42) transparent;
  scrollbar-width: thin;
}

.workspace-nav::-webkit-scrollbar {
  width: 6px;
}

.workspace-nav::-webkit-scrollbar-track {
  background: transparent;
}

.workspace-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(159, 227, 210, .32);
}

.nav-group {
  display: grid;
  gap: 8px;
}

.nav-group p {
  margin: 0;
  padding: 0 6px;
  color: #647063;
  font-size: 12px;
  font-weight: 900;
}

.workspace-nav button {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  min-height: 58px;
  padding: 10px;
  color: #cfd2c8;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: min-height .24s ease, padding .24s ease, background-color .18s ease, border-color .18s ease;
}

.workspace-nav button span {
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 6px;
  overflow: hidden;
  border-radius: 6px;
  color: #7ad9d2;
  background: rgba(14, 138, 124, .12);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-nav button strong {
  overflow: hidden;
  color: #e5edf5;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-nav button small {
  overflow: hidden;
  color: #7d8da1;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-nav button:hover,
.workspace-nav button.active {
  border-color: rgba(20, 184, 166, .38);
  background: rgba(20, 184, 166, .10);
}

.workspace-nav button.active span {
  color: #06121f;
  background: #9fe3d2;
}

.workspace-sidebar.is-collapsed {
  padding-right: 7px;
  padding-left: 7px;
}

.workspace-sidebar.is-collapsed .workspace-sidebar-toolbar {
  justify-content: center;
  padding-right: 0;
  padding-left: 0;
}

.workspace-sidebar.is-collapsed .workspace-sidebar-heading {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.workspace-sidebar.is-collapsed .workspace-nav-toggle {
  min-width: 58px;
  padding-right: 6px;
  padding-left: 6px;
}

.workspace-sidebar.is-collapsed .workspace-nav {
  gap: 11px;
  padding-right: 0;
  padding-left: 0;
}

.workspace-sidebar.is-collapsed .nav-group {
  gap: 5px;
}

.workspace-sidebar.is-collapsed .nav-group + .nav-group {
  padding-top: 9px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.workspace-sidebar.is-collapsed .nav-group p,
.workspace-sidebar.is-collapsed .workspace-nav button strong,
.workspace-sidebar.is-collapsed .workspace-nav button small {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.workspace-sidebar.is-collapsed .workspace-nav button {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: stretch;
  padding: 6px;
}

.workspace-sidebar.is-collapsed .workspace-nav button span {
  grid-row: auto;
  width: 100%;
  min-height: 34px;
  padding: 0 3px;
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .workspace-layout,
  .workspace-sidebar,
  .workspace-sidebar-heading,
  .workspace-nav button,
  .workspace-nav-toggle {
    transition-duration: .01ms;
  }
}

.agent-page.is-planning-locked .workspace-nav button:not(.active),
.agent-page.is-planning-locked [data-nav] {
  opacity: .52;
  cursor: not-allowed;
}

.workspace-canvas {
  min-height: calc(100vh - 94px);
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20, 38, 36, .72), rgba(8, 15, 28, .92)),
    linear-gradient(90deg, rgba(20, 184, 166, .08), transparent 42%, rgba(217, 119, 6, .06));
  box-shadow: 0 22px 64px rgba(0, 0, 0, .26);
}

.workspace-loading,
.empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 260px;
  padding: 28px;
  border: 1px dashed rgba(148, 163, 184, .24);
  border-radius: 8px;
  color: #98a294;
  text-align: center;
  background: rgba(20, 38, 36, .48);
}

.workspace-loading span {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border: 3px solid rgba(148, 163, 184, .22);
  border-top-color: #9fe3d2;
  border-radius: 50%;
  animation: workspaceSpin .9s linear infinite;
}

@keyframes workspaceSpin {
  to { transform: rotate(360deg); }
}

.workspace-loading strong,
.empty-state strong {
  color: #fff;
  font-size: 20px;
}

.workspace-loading p,
.empty-state p {
  max-width: 540px;
  margin: 10px 0 0;
  line-height: 1.8;
}

.empty-state.tall {
  min-height: 420px;
}

.workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
}

.workspace-hero-copy,
.workspace-quick-card,
.module-head,
.module-panel,
.side-panel,
.flow-board {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(20, 38, 36, .66);
}

.workspace-hero-copy {
  min-height: 248px;
  padding: 30px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .16), transparent 42%),
    linear-gradient(180deg, rgba(20, 38, 36, .92), rgba(20, 38, 36, .70));
}

.workspace-hero-copy .eyebrow {
  border-color: rgba(159, 227, 210, .30);
  color: #d3f2e4;
  background: rgba(20, 184, 166, .10);
}

.workspace-hero-copy h1,
.module-head h1 {
  margin: 18px 0 12px;
  color: #fff;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: 0;
}

.workspace-hero-copy p,
.module-head p,
.module-panel p,
.side-panel p {
  margin: 0;
  color: #a9b8c8;
  line-height: 1.85;
}

.workspace-hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}

.workspace-quick-card {
  display: grid;
  position: relative;
  align-content: start;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 248px;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 14%, rgba(159, 227, 210, .20), transparent 28%),
    linear-gradient(180deg, rgba(14, 138, 124, .18), rgba(20, 38, 36, .82)),
    linear-gradient(135deg, rgba(217, 119, 6, .12), transparent);
}

.workspace-quick-card::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(159, 227, 210, .16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(159, 227, 210, .18), rgba(37, 99, 235, .10)),
    rgba(8, 15, 28, .36);
  content: "";
  opacity: .82;
}

.workspace-quick-card span,
.section-title span,
.module-head span,
.studio-index {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.workspace-quick-card > span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(159, 227, 210, .24);
  border-radius: 999px;
  background: rgba(20, 184, 166, .10);
}

.workspace-quick-card strong {
  position: relative;
  z-index: 1;
  margin-top: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1.2;
}

.workspace-quick-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #d3f2e4;
  line-height: 1.75;
}

.quick-progress {
  position: relative;
  z-index: 1;
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .16);
}

.quick-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #f59e0b);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 18px;
  margin-top: 18px;
}

.dashboard-main {
  min-width: 0;
}

.section-title {
  margin-bottom: 14px;
}

.section-title h2 {
  margin: 8px 0 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
}

.section-title.compact h2 {
  font-size: 20px;
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.studio-card {
  display: grid;
  align-content: space-between;
  min-height: 206px;
  padding: 18px;
  color: #dbe7f3;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(8, 15, 28, .58);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.studio-card:hover {
  border-color: rgba(159, 227, 210, .44);
  background: rgba(20, 184, 166, .10);
  transform: translateY(-2px);
}

.studio-card.featured {
  background:
    linear-gradient(180deg, rgba(29, 78, 216, .22), rgba(20, 38, 36, .72)),
    linear-gradient(90deg, rgba(245, 158, 11, .12), transparent);
}

.studio-card strong {
  display: block;
  margin-top: 20px;
  color: #fff;
  font-size: 21px;
}

.studio-card p {
  min-height: 76px;
  margin: 12px 0 18px;
  color: #98a294;
  line-height: 1.7;
}

.studio-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.studio-meta span {
  overflow: hidden;
  max-width: 50%;
  padding: 6px 8px;
  border-radius: 999px;
  color: #b6c5d6;
  background: rgba(148, 163, 184, .10);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-board {
  margin-top: 18px;
  padding: 18px;
}

.flow-steps,
.process-lane {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.flow-step,
.process-lane div {
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(8, 15, 28, .52);
  text-align: left;
}

.flow-step {
  color: #dbe7f3;
  cursor: pointer;
}

.flow-step:hover {
  border-color: rgba(245, 158, 11, .46);
  background: rgba(245, 158, 11, .10);
}

.flow-step span,
.process-lane span {
  color: #f5b544;
  font-size: 12px;
  font-weight: 900;
}

.flow-step strong,
.process-lane strong {
  display: block;
  margin-top: 18px;
  color: #fff;
  font-size: 16px;
}

.process-lane small {
  display: block;
  margin-top: 6px;
  color: #7d8da1;
}

.dashboard-side,
.module-aside {
  display: grid;
  align-content: start;
  gap: 12px;
}

.side-panel {
  padding: 16px;
}

.dashboard-side > .side-panel:first-child {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .76), rgba(8, 15, 28, .66)),
    linear-gradient(135deg, rgba(20, 184, 166, .10), transparent 54%);
}

.dashboard-side .section-title {
  margin-bottom: 12px;
}

.dashboard-side .section-title.compact h2 {
  font-size: 18px;
  line-height: 1.28;
}

.dashboard-side > .side-panel:first-child > p {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  background: rgba(8, 15, 28, .34);
}

.dashboard-side .field-matrix {
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 12px 0;
}

.dashboard-side .field-matrix div {
  min-height: 66px;
  padding: 12px;
  background: rgba(8, 15, 28, .38);
}

.dashboard-side .field-matrix strong {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.4;
}

.side-panel h3 {
  margin: 8px 0 8px;
  color: #fff;
  font-size: 20px;
}

.muted-panel {
  background: rgba(8, 15, 28, .44);
}

.side-action {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 76px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  color: #dbe7f3;
  background: rgba(8, 15, 28, .44);
  cursor: pointer;
  text-align: left;
}

.side-action:hover {
  border-color: rgba(20, 184, 166, .36);
  background: rgba(20, 184, 166, .10);
}

.side-action strong {
  color: #fff;
}

.side-action small {
  color: #98a294;
  line-height: 1.5;
}

.module-view {
  display: grid;
  gap: 18px;
}

.module-head {
  padding: 28px;
}

.module-head p {
  max-width: 820px;
}

.module-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 18px;
}

.module-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.module-panel {
  min-height: 132px;
  padding: 18px;
}

.module-panel.wide {
  min-height: 190px;
}

.module-panel.highlight {
  min-height: 180px;
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .16), rgba(20, 38, 36, .72)),
    linear-gradient(90deg, rgba(29, 78, 216, .14), transparent);
}

.module-panel.highlight strong {
  display: block;
  margin-top: 18px;
  color: #fff;
  font-size: 34px;
  line-height: 1.1;
}

.vip-service-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid rgba(159, 227, 210, .28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .18), transparent 46%),
    linear-gradient(90deg, rgba(250, 204, 21, .10), rgba(8, 15, 28, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.vip-service-copy {
  display: grid;
  align-content: center;
  gap: 12px;
}

.vip-service-copy h2 {
  margin: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: 0;
}

.vip-service-copy p {
  max-width: 760px;
  margin: 0;
  color: #b8c7d8;
  line-height: 1.8;
}

.vip-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.vip-service-tags span {
  padding: 7px 10px;
  border: 1px solid rgba(159, 227, 210, .24);
  border-radius: 999px;
  color: #d3f2e4;
  background: rgba(20, 184, 166, .12);
  font-size: 12px;
  font-weight: 900;
}

.vip-service-qr {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 210px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(8, 15, 28, .62);
  text-align: center;
}

.vip-service-qr img,
.vip-qr-placeholder {
  width: 132px;
  height: 132px;
  border-radius: 8px;
}

.vip-service-qr img {
  display: block;
  object-fit: cover;
  background: #fff;
}

.vip-qr-placeholder {
  display: grid;
  place-items: center;
  padding: 14px;
  color: #98a294;
  border: 1px dashed rgba(148, 163, 184, .34);
  background: rgba(20, 38, 36, .82);
  font-size: 13px;
  line-height: 1.5;
}

.vip-service-qr strong {
  color: #fff;
  font-size: 15px;
}

.vip-service-qr small {
  max-width: 170px;
  color: #98a294;
  font-size: 12px;
  line-height: 1.5;
}

.generation-records {
  color: #dbe7f3;
  border: 1px solid rgba(159, 227, 210, .16);
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .92), rgba(8, 15, 28, .96)),
    linear-gradient(90deg, rgba(20, 184, 166, .10), transparent);
}

.generation-record-table {
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(8, 15, 28, .72);
}

.generation-record-table table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.generation-record-table th,
.generation-record-table td {
  padding: 13px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  color: #dbe7f3;
  font-size: 14px;
  text-align: left;
  vertical-align: top;
}

.generation-record-table th {
  color: #bff8ff;
  background: rgba(20, 184, 166, .10);
  font-weight: 900;
  white-space: nowrap;
}

.generation-record-table tr:last-child td {
  border-bottom: 0;
}

.generation-record-table small {
  color: #98a294;
}

.generation-record-table strong.consume {
  color: #fca5a5;
}

.generation-record-table strong.income {
  color: #86efac;
}

.generation-record-table .record-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(159, 227, 210, .28);
  border-radius: 8px;
  background: rgba(20, 184, 166, .10);
  color: #7ad9d2;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.generation-record-table .record-link:hover {
  border-color: rgba(159, 227, 210, .48);
  background: rgba(20, 184, 166, .18);
  color: #a7fff3;
}

.record-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  color: #9fb2c8;
  font-size: 13px;
}

@media (max-width: 1280px) {
  .agent-header {
    grid-template-columns: 184px minmax(80px, 1fr) 160px 160px 96px 106px 70px 164px;
    gap: 8px;
  }

  .agent-context strong {
    font-size: 18px;
  }

  .default-profile-pill strong,
  .model-picker select,
  .checkin-trigger strong,
  .profile-name b {
    font-size: 13px;
  }

  .async-task-trigger {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 4px;
    padding: 8px 6px;
  }

  .async-task-trigger span {
    font-size: 10px;
    white-space: nowrap;
  }
}

@media (max-width: 980px) {
  .agent-header {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .agent-context {
    justify-self: start;
    text-align: left;
  }

  .default-profile-pill,
  .model-picker,
  .async-task-wrap,
  .checkin-trigger,
  .feedback-trigger,
  .profile-wrap {
    width: 100%;
  }

  .async-task-popover {
    right: auto;
    left: 0;
    width: min(360px, calc(100vw - 40px));
  }

  .checkin-prize-panel {
    grid-template-columns: 1fr;
  }

  .checkin-prize-main {
    min-height: 150px;
  }

  .checkin-prize-main strong {
    font-size: 48px;
  }

  .checkin-modal-top {
    display: grid;
    padding-right: 44px;
  }

  .checkin-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field-matrix,
.library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.field-matrix div,
.library-grid button {
  min-height: 94px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  background: rgba(8, 15, 28, .48);
}

.field-matrix span,
.library-grid small {
  color: #98a294;
  font-size: 12px;
}

.field-matrix strong,
.library-grid strong {
  display: block;
  margin-top: 14px;
  color: #fff;
  font-size: 17px;
}

.library-grid button {
  color: #dbe7f3;
  cursor: pointer;
  text-align: left;
}

.library-grid button:hover {
  border-color: rgba(159, 227, 210, .36);
  background: rgba(20, 184, 166, .10);
}

.three-column,
.two-column {
  display: grid;
  gap: 12px;
}

.three-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.module-tabs button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 999px;
  color: #cfd2c8;
  background: rgba(8, 15, 28, .52);
  cursor: pointer;
}

.module-tabs button.active,
.module-tabs button:hover {
  color: #06121f;
  border-color: #9fe3d2;
  background: #9fe3d2;
}

.vip-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.vip-plan-card {
  position: relative;
  min-height: 164px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(8, 15, 28, .52);
}

.vip-plan-card.recommended {
  border-color: rgba(250, 204, 21, .42);
  background:
    linear-gradient(180deg, rgba(250, 204, 21, .10), transparent 44%),
    rgba(8, 15, 28, .62);
}

.vip-plan-card em {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #422006;
  background: #facc15;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.vip-plan-card strong,
.vip-plan-card span,
.vip-plan-card p {
  display: block;
}

.vip-plan-card strong {
  color: #fff;
  font-size: 19px;
}

.vip-plan-card span {
  margin-top: 12px;
  color: #f5b544;
  font-size: 24px;
  font-weight: 900;
}

.vip-plan-card p {
  margin: 12px 0 0;
  color: #98a294;
  line-height: 1.7;
}

.vip-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.vip-plan-meta b {
  padding: 6px 8px;
  border-radius: 999px;
  color: #d9efea;
  background: rgba(148, 163, 184, .12);
  font-size: 12px;
  font-weight: 800;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.tag-list span {
  padding: 6px 8px;
  border-radius: 999px;
  color: #d3f2e4;
  background: rgba(20, 184, 166, .12);
  font-size: 12px;
}

.ip-toolbar,
.ip-detail-head,
.ip-card-head,
.ip-card-actions,
.ip-detail-actions,
.ip-info-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ip-toolbar,
.ip-info-card,
.ip-profile-card,
.ip-form,
.ip-plan section,
.ip-planning,
.ip-base-grid div {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(20, 38, 36, .62);
}

.ip-toolbar,
.ip-info-card {
  min-height: 90px;
  padding: 18px;
}

.ip-toolbar span,
.ip-info-card span,
.ip-profile-card span,
.ip-base-grid span,
.ip-plan-row span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.ip-toolbar strong,
.ip-info-card h2 {
  display: block;
  margin: 8px 0 0;
  color: #fff;
}

.ip-alert {
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, .42);
  border-radius: 8px;
  color: #f8e3bb;
  background: rgba(245, 158, 11, .12);
}

.ip-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ip-profile-grid .empty-state {
  grid-column: 1 / -1;
}

.ip-profile-card {
  display: grid;
  align-content: space-between;
  min-height: 230px;
  padding: 16px;
}

.ip-card-head strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 20px;
}

.ip-card-head i,
.ip-info-card i {
  padding: 6px 8px;
  border-radius: 999px;
  color: #06121f;
  background: #9fe3d2;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.ip-profile-card p {
  margin: 14px 0;
  color: #a9b8c8;
  line-height: 1.7;
}

.ip-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ip-card-meta span {
  padding: 6px 8px;
  border-radius: 999px;
  color: #cfd2c8;
  background: rgba(148, 163, 184, .10);
}

.ip-card-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 14px;
}

.ip-card-actions .btn {
  min-width: 86px;
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
}

.ip-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.ip-form label {
  display: grid;
  gap: 7px;
  color: #dbe7f3;
  font-size: 14px;
  font-weight: 800;
}

.ip-form label small {
  color: #f5b544;
  font-weight: 800;
}

.ip-form .wide {
  grid-column: 1 / -1;
}

.ip-form input,
.ip-form select,
.ip-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  color: #e5edf5;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 6px;
  background: rgba(8, 15, 28, .66);
  outline: none;
}

.ip-form textarea {
  resize: vertical;
  line-height: 1.65;
}

.ip-form input:focus,
.ip-form select:focus,
.ip-form textarea:focus {
  border-color: rgba(159, 227, 210, .52);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .10);
}

.ip-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.ip-detail-head {
  min-height: 48px;
}

.ip-base-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.ip-base-grid div {
  min-height: 110px;
  padding: 14px;
}

.ip-base-grid strong {
  display: block;
  margin-top: 12px;
  color: #fff;
  line-height: 1.55;
}

.ip-plan {
  display: grid;
  gap: 14px;
}

.ip-plan section {
  padding: 18px;
}

.ip-plan h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 21px;
  line-height: 1.35;
}

.ip-plan-row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.ip-plan-row p,
.ip-plan-row .plan-value,
.ip-plan-row ul {
  margin: 0;
  color: #cfd2c8;
  line-height: 1.8;
}

.ip-plan-row ul {
  padding-left: 18px;
}

.ip-planning {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 420px;
  padding: 34px;
  text-align: center;
}

.ip-planning > span {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border: 3px solid rgba(148, 163, 184, .22);
  border-top-color: #9fe3d2;
  border-radius: 50%;
  animation: workspaceSpin .9s linear infinite;
}

.ip-planning strong {
  color: #fff;
  font-size: 24px;
}

.ip-planning strong em {
  margin-left: 8px;
  color: #9fe3d2;
  font-style: normal;
}

.ip-planning p {
  max-width: 620px;
  margin: 10px 0 18px;
  color: #a9b8c8;
  line-height: 1.8;
}

.ip-planning small {
  display: block;
  margin-top: 12px;
  color: #fcd34d;
  font-size: 13px;
  line-height: 1.7;
}

.ip-planning .quick-progress {
  width: min(520px, 100%);
}

.knowledge-picker-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 10px;
}

.knowledge-picker-head .admin-input {
  max-width: 420px;
}

.knowledge-picker-head span {
  color: #647063;
  font-size: 13px;
  white-space: nowrap;
}

.knowledge-picker {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f5ef;
}

.knowledge-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
}

.knowledge-row span,
.knowledge-row strong,
.knowledge-row small {
  display: block;
  min-width: 0;
}

.knowledge-row strong {
  overflow: hidden;
  color: #142624;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-row small,
.knowledge-row em {
  color: #647063;
  font-style: normal;
  font-size: 12px;
}

.script-workbench {
  display: grid;
  gap: 18px;
}

.script-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.script-mode,
.script-choice,
.script-generated-list button,
.script-steps button {
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(20, 38, 36, .62);
  color: #e5edf8;
  border-radius: 8px;
  text-align: left;
}

.script-mode {
  padding: 18px;
}

.script-mode strong,
.script-choice strong,
.script-generated-list strong {
  display: block;
  color: #fff;
}

.script-mode small,
.script-choice small,
.script-generated-list small {
  display: block;
  margin-top: 6px;
  color: #93a4ba;
  line-height: 1.5;
}

.script-mode.active,
.script-choice.active,
.script-generated-list button.active,
.script-steps button.active {
  border-color: rgba(56, 189, 248, .72);
  background:
    linear-gradient(180deg, rgba(14, 116, 144, .26), rgba(20, 38, 36, .74)),
    rgba(20, 38, 36, .62);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .18), 0 16px 40px rgba(14, 138, 124, .12);
}

.script-mode:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.script-steps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.script-steps button {
  position: relative;
  padding: 14px;
}

.script-steps button em {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #082f49;
  background: linear-gradient(90deg, #7ad9d2, #86efac);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.script-step-panel {
  display: grid;
  gap: 18px;
}

.script-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.script-type-selector {
  display: grid;
}

.script-hidden-choice {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.script-type-trigger {
  position: relative;
  width: 100%;
  min-height: 94px;
  padding: 16px 18px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(20, 38, 36, .62);
  color: #d9efea;
  cursor: pointer;
  text-align: left;
}

.script-type-trigger:hover,
.script-type-trigger.is-selected {
  border-color: rgba(56, 189, 248, .64);
  background:
    linear-gradient(180deg, rgba(14, 116, 144, .24), rgba(20, 38, 36, .76)),
    rgba(20, 38, 36, .64);
}

.script-type-trigger span,
.script-duration-head span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.script-type-trigger strong {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-size: 20px;
}

.script-type-trigger small {
  display: block;
  margin-top: 8px;
  max-width: 760px;
  color: #93a4ba;
  line-height: 1.6;
}

.script-type-trigger em,
.script-generated-list button em,
.script-picker-item em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #082f49;
  background: linear-gradient(90deg, #7ad9d2, #86efac);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.script-type-trigger em {
  position: absolute;
  top: 14px;
  right: 14px;
}

.script-choice {
  display: block;
  padding: 14px;
  cursor: pointer;
}

.script-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.script-generated-list {
  display: grid;
  gap: 10px;
}

.script-generated-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
}

.script-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.script-custom {
  display: grid;
  gap: 8px;
  color: #d9efea;
}

.script-presentation-custom {
  display: grid;
  gap: 8px;
}

.script-topic-scope {
  display: grid;
  gap: 8px;
  margin: 12px 0 4px;
  color: #d9efea;
}

.script-topic-scope span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

.script-topic-scope em {
  padding: 3px 7px;
  border-radius: 999px;
  color: #d3f2e4;
  background: rgba(20, 184, 166, .14);
  font-size: 12px;
  font-style: normal;
}

.script-presentation-custom small,
.script-duration-box small,
.script-picker-tip,
.script-topic-scope small {
  color: #98a294;
  line-height: 1.6;
}

.script-step-panel .admin-input,
.script-step-panel .admin-select,
.script-step-panel .admin-textarea,
.video-script-workbench .admin-textarea,
.script-modal .admin-textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  background: rgba(8, 15, 28, .86);
  color: #e5edf8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.script-step-panel .admin-select {
  background-image:
    linear-gradient(45deg, transparent 50%, #7ad9d2 50%),
    linear-gradient(135deg, #7ad9d2 50%, transparent 50%),
    linear-gradient(to right, rgba(148, 163, 184, .20), rgba(148, 163, 184, .20));
}

.script-step-panel .admin-input:focus,
.script-step-panel .admin-select:focus,
.script-step-panel .admin-textarea:focus,
.video-script-workbench .admin-textarea:focus,
.script-modal .admin-textarea:focus {
  border-color: rgba(56, 189, 248, .68);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .12);
}

.script-step-panel .admin-input::placeholder,
.script-step-panel .admin-textarea::placeholder,
.video-script-workbench .admin-textarea::placeholder,
.script-modal .admin-textarea::placeholder {
  color: #6f8197;
}

.script-context-line {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(20, 38, 36, .38);
}

.script-context-line span {
  color: #93a4ba;
  font-size: 12px;
}

.script-form-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 14px;
}

.script-form-grid label {
  display: grid;
  gap: 8px;
  color: #d9efea;
}

.script-msg {
  padding: 12px 14px;
  border: 1px solid rgba(56, 189, 248, .35);
  border-radius: 8px;
  background: rgba(14, 116, 144, .18);
  color: #dff6ff;
}

.script-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(159, 227, 210, .28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(20, 184, 166, .16), rgba(20, 38, 36, .72)),
    rgba(8, 15, 28, .62);
  color: #dff6ff;
}

.script-status-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #042f2e;
  background: linear-gradient(135deg, #9fe3d2, #f5b544);
  font-weight: 900;
}

.script-status strong {
  display: block;
  color: #fff;
  font-size: 16px;
}

.script-status p {
  margin: 4px 0 0;
  color: #d3f2e4;
  line-height: 1.55;
}

.script-status em {
  margin-left: auto;
  color: #f8e3bb;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.script-duration-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(20, 38, 36, .38);
}

.script-duration-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.script-duration-head strong {
  color: #fff;
  font-size: 17px;
}

.script-duration-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.script-duration-preset {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  background: rgba(8, 15, 28, .58);
  color: #d9efea;
  cursor: pointer;
}

.script-duration-preset.active,
.script-duration-preset:hover {
  border-color: rgba(159, 227, 210, .66);
  color: #ecfeff;
  background: rgba(20, 184, 166, .16);
}

.script-duration-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
  color: #9fb2c8;
}

.script-duration-range {
  width: 100%;
  accent-color: #14b8a6;
}

.script-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 7, 18, .68);
  backdrop-filter: blur(8px);
}

.script-modal {
  position: relative;
  display: grid;
  gap: 16px;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(159, 227, 210, .22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .98), rgba(8, 15, 28, .98)),
    linear-gradient(90deg, rgba(20, 184, 166, .10), transparent);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
  color: #e5edf8;
}

.script-modal-small {
  width: min(460px, calc(100vw - 32px));
}

.script-picker-modal {
  width: min(760px, calc(100vw - 32px));
}

.script-picker-head,
.script-picker-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.script-picker-head h3 {
  margin-top: 4px;
}

.script-picker-head strong {
  color: #f8e3bb;
  font-size: 13px;
  white-space: nowrap;
}

.script-modal h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.4;
}

.script-progress-modal p,
.script-modal-small p,
.script-modal-field {
  margin: 0;
  color: #9fb2c8;
  line-height: 1.75;
}

.script-progress-modal h3 em {
  color: #7ad9d2;
  font-style: normal;
}

.script-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(20, 38, 36, .76);
  color: #cfd2c8;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.script-modal-close:hover {
  border-color: rgba(159, 227, 210, .44);
  color: #fff;
}

.script-modal-field {
  display: grid;
  gap: 8px;
}

.script-modal .admin-textarea {
  min-height: 132px;
  padding: 12px 14px;
  line-height: 1.7;
  resize: vertical;
}

.script-picker-search {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  background: rgba(8, 15, 28, .86);
  color: #e5edf8;
}

.script-picker-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-height: min(46vh, 360px);
  overflow: auto;
  padding-right: 4px;
}

.script-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(20, 38, 36, .55);
  color: #e5edf8;
  cursor: pointer;
  text-align: left;
}

.script-picker-compact {
  justify-content: center;
  min-height: 54px;
  padding: 12px 10px;
  text-align: center;
}

.script-picker-item:hover,
.script-picker-item.active {
  border-color: rgba(159, 227, 210, .62);
  background: rgba(20, 184, 166, .12);
}

.script-picker-item strong,
.script-picker-item small {
  display: block;
}

.script-picker-compact strong {
  overflow: hidden;
  max-width: 100%;
  color: #e5edf8;
  font-size: 15px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.script-picker-item small {
  margin-top: 5px;
  color: #93a4ba;
  line-height: 1.5;
}

.script-picker-compact em {
  min-width: 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  font-size: 13px;
}

.script-picker-empty {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px dashed rgba(148, 163, 184, .24);
  border-radius: 8px;
  color: #93a4ba;
  text-align: center;
}

.script-picker-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9fb2c8;
  white-space: nowrap;
}

.script-modal-error {
  margin: -4px 0 0;
  color: #fca5a5;
  font-size: 13px;
}

.script-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.script-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.script-result-head h3 {
  margin-top: 4px;
}

.script-result-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.btn.script-copy-library-btn {
  color: #c8efe6;
  border-color: rgba(159, 227, 210, .34);
  background: rgba(20, 184, 166, .10);
  box-shadow: inset 0 0 0 1px rgba(159, 227, 210, .04);
}

.btn.script-copy-library-btn:hover {
  color: #ecfeff;
  border-color: rgba(159, 227, 210, .58);
  background: rgba(20, 184, 166, .17);
}

.copy-library-modal-actions .copy-library-view-btn {
  margin-right: auto;
  color: #c8efe6;
  border-color: rgba(159, 227, 210, .25);
}

.script-result-head > strong {
  flex: 0 0 auto;
  color: #f8e3bb;
  font-size: 13px;
  white-space: nowrap;
}

.script-result pre {
  white-space: pre-wrap;
  line-height: 1.75;
  color: #e5edf8;
  background: rgba(20, 38, 36, .55);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  padding: 16px;
  max-height: 560px;
  overflow: auto;
}

.script-record-list {
  display: grid;
  gap: 12px;
}

.script-record-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(20, 38, 36, .48);
}

.script-record-main,
.script-record-meta {
  min-width: 0;
}

.script-record-main span,
.script-record-detail-grid span,
.script-record-copy span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.script-record-main strong {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #fff;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.script-record-main p {
  overflow: hidden;
  margin: 6px 0 0;
  color: #9fb2c8;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.script-record-meta {
  display: grid;
  gap: 8px;
  color: #9fb2c8;
  font-size: 13px;
}

.script-record-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.script-record-meta em {
  color: #f8e3bb;
  font-style: normal;
  font-weight: 900;
}

.script-record-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.video-script-workbench {
  gap: 18px;
}

.video-script-input-label {
  display: grid;
  gap: 10px;
  color: #d9efea;
  font-weight: 800;
}

.viral-video-parser-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.viral-video-parser-row .admin-input {
  min-width: 0;
}

.viral-rewrite-mode-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 880px;
  margin: 34px auto 0;
}

.viral-rewrite-mode-card {
  display: grid;
  gap: 14px;
  min-height: 230px;
  padding: 34px 24px 24px;
  border: 1px solid rgba(159, 227, 210, .24);
  border-radius: 8px;
  color: #d9efea;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(14, 165, 233, .14), rgba(20, 38, 36, .58)),
    rgba(8, 15, 28, .78);
  box-shadow: 0 18px 46px rgba(10, 24, 23, .24);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.viral-rewrite-mode-card:hover {
  transform: translateY(-2px);
  border-color: rgba(159, 227, 210, .58);
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .18), rgba(20, 38, 36, .64)),
    rgba(8, 15, 28, .84);
}

.viral-rewrite-mode-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(159, 227, 210, .34);
  border-radius: 8px;
  color: #7ad9d2;
  font-weight: 900;
  margin-top: 4px;
  margin-bottom: 4px;
}

.viral-rewrite-mode-card strong {
  color: #f9f8f3;
  font-size: 24px;
  line-height: 1.25;
}

.viral-rewrite-mode-card p {
  margin: 0;
  color: #a8bfd6;
  line-height: 1.7;
}

.viral-rewrite-mode-card em {
  color: #d3f2e4;
  font-style: normal;
  font-weight: 800;
}

.viral-rewrite-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.viral-rewrite-stepper div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  color: #98a294;
  background: rgba(8, 15, 28, .48);
}

.viral-rewrite-stepper div.active {
  border-color: rgba(159, 227, 210, .34);
  color: #d9efea;
  background: rgba(20, 184, 166, .10);
}

.viral-rewrite-stepper span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(148, 163, 184, .14);
  color: inherit;
  font-weight: 900;
}

.viral-rewrite-stepper strong {
  font-size: 14px;
}

.viral-rewrite-workflow {
  display: grid;
  gap: 16px;
}

.viral-rewrite-workflow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(8, 15, 28, .42);
}

.viral-rewrite-workflow-head h3 {
  margin: 4px 0 0;
  color: #f9f8f3;
  font-size: 22px;
}

.viral-rewrite-empty-guide {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(159, 227, 210, .34);
  border-radius: 8px;
  color: #a8bfd6;
  background: rgba(8, 15, 28, .36);
}

.viral-rewrite-empty-guide strong {
  color: #f9f8f3;
  font-size: 17px;
}

.viral-rewrite-empty-guide p {
  margin: 0;
  line-height: 1.7;
}

.viral-video-parse-hint {
  color: #98a294;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.viral-video-preview {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(8, 15, 28, .58);
}

.viral-video-preview-media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #020617;
}

.viral-video-preview-hint {
  display: block;
  margin-top: 8px;
  color: #98a294;
  font-size: 12px;
  line-height: 1.5;
}

.viral-video-preview-main {
  min-width: 0;
  display: grid;
  gap: 9px;
  align-content: start;
}

.viral-video-preview-main h3,
.viral-video-preview-main p {
  margin: 0;
}

.viral-video-preview-main h3 {
  color: #e5edf8;
  font-size: 18px;
  line-height: 1.4;
}

.viral-video-preview-main p {
  color: #98a294;
  line-height: 1.6;
}

.viral-video-preview-main pre {
  max-height: 220px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  color: #d9efea;
  line-height: 1.7;
}

.video-script-input {
  min-height: 280px;
  padding: 15px 16px;
  resize: vertical;
  line-height: 1.75;
}

.video-script-result pre {
  max-height: 620px;
}

.script-record-modal {
  width: min(820px, calc(100vw - 32px));
  align-self: center;
}

.script-record-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.script-record-detail-grid div,
.script-record-copy {
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(20, 38, 36, .45);
}

.script-record-detail-grid .wide {
  grid-column: 1 / -1;
}

.script-record-detail-grid strong {
  display: block;
  margin-top: 6px;
  color: #e5edf8;
  line-height: 1.65;
}

.script-record-copy {
  display: grid;
  gap: 10px;
}

.script-record-copy pre {
  max-height: min(52vh, 520px);
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  color: #f6f5ef;
  line-height: 1.78;
  font-family: inherit;
}

.case-study-report {
  display: grid;
  gap: 16px;
}

.case-study-report-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(159, 227, 210, .24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .16), rgba(37, 99, 235, .10) 48%, rgba(251, 191, 36, .08)),
    rgba(8, 15, 28, .84);
}

.case-study-report-hero h4 {
  margin: 8px 0 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.25;
}

.case-study-report-hero p {
  margin: 10px 0 0;
  color: #b8c7da;
  line-height: 1.75;
}

.case-study-score {
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(251, 191, 36, .28);
  border-radius: 8px;
  background: rgba(251, 191, 36, .10);
}

.case-study-score strong {
  color: #f8e3bb;
  font-size: 42px;
  line-height: 1;
}

.case-study-score span {
  margin-top: 8px;
  color: #fef3c7;
  font-size: 12px;
  font-weight: 900;
}

.case-study-report-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.case-study-report-metrics div {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(20, 38, 36, .48);
}

.case-study-report-metrics span,
.case-study-card-head span {
  color: #7ad9d2;
  font-size: 11px;
  font-weight: 900;
}

.case-study-report-metrics strong {
  color: #f6f5ef;
  font-size: 18px;
}

.case-study-report-metrics em {
  color: #9fb2c8;
  font-size: 12px;
  font-style: normal;
}

.case-study-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.case-study-report-card {
  display: grid;
  align-content: start;
  gap: 11px;
  min-height: 178px;
  padding: 15px;
  border: 1px solid rgba(159, 227, 210, .18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(14, 165, 233, .08), rgba(20, 38, 36, .36)),
    rgba(8, 15, 28, .72);
}

.case-study-report-card.muted {
  border-color: rgba(148, 163, 184, .14);
  opacity: .76;
}

.case-study-card-head {
  display: grid;
  gap: 5px;
}

.case-study-card-head strong {
  color: #f6f5ef;
  font-size: 16px;
  line-height: 1.35;
}

.case-study-report-card pre,
.case-study-report-card p {
  margin: 0;
  white-space: pre-wrap;
  color: #d9efea;
  font-size: 13px;
  line-height: 1.78;
}

.case-study-report-card p {
  color: #9fb2c8;
}

.notice-ticker {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  width: min(760px, 100%);
  min-height: 40px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgba(159, 227, 210, .22);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(20, 184, 166, .18), rgba(37, 99, 235, .08)),
    rgba(8, 15, 28, .58);
}

.notice-ticker-label {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 100%;
  color: #06121f;
  background: linear-gradient(135deg, #7ad9d2, #86efac);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 8px 0 18px rgba(8, 15, 28, .34);
}

.notice-ticker-label span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.notice-ticker-label span::before {
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  content: "";
}

.notice-ticker-viewport {
  min-width: 0;
  padding-left: 12px;
  overflow: hidden;
}

.notice-ticker-track {
  display: flex;
  gap: 24px;
  min-width: max-content;
  animation: noticeTicker 28s linear infinite;
}

.notice-ticker:hover .notice-ticker-track {
  animation-play-state: paused;
}

.notice-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dffbff;
  cursor: pointer;
  white-space: nowrap;
}

.notice-ticker-item strong {
  color: #fff;
  font-size: 14px;
}

.notice-ticker-item span {
  overflow: hidden;
  max-width: 360px;
  color: #9fb2c8;
  font-size: 13px;
  text-overflow: ellipsis;
}

@keyframes noticeTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.announcement-list {
  display: grid;
  gap: 12px;
}

.announcement-card {
  display: grid;
  gap: 8px;
  width: 100%;
  min-height: 118px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(20, 38, 36, .52);
  color: #d9efea;
  cursor: pointer;
  text-align: left;
}

.announcement-card:hover {
  border-color: rgba(159, 227, 210, .48);
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .14), rgba(37, 99, 235, .08)),
    rgba(20, 38, 36, .64);
}

.announcement-card span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.announcement-card strong {
  color: #fff;
  font-size: 20px;
}

.announcement-card p {
  margin: 0;
  color: #9fb2c8;
  line-height: 1.65;
}

.announcement-modal {
  width: min(720px, calc(100vw - 32px));
}

.announcement-rich-content {
  max-height: min(54vh, 520px);
  margin: 0;
  overflow: auto;
  color: #e5edf8;
  line-height: 1.82;
}

.announcement-rich-content p {
  margin: 0 0 12px;
}

.announcement-rich-content a {
  color: #7ad9d2;
  font-weight: 800;
}

.announcement-rich-content img {
  display: block;
  max-width: 100%;
  margin: 12px 0;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(20, 38, 36, .54);
}

.announcement-rich-content blockquote {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid #7ad9d2;
  border-radius: 6px;
  background: rgba(20, 38, 36, .56);
  color: #cfd2c8;
}

.announcement-rich-content ul,
.announcement-rich-content ol {
  margin: 8px 0 12px 20px;
  padding: 0;
}

@media (max-width: 980px) {
  .vip-service-hero,
  .module-layout,
  .two-column {
    grid-template-columns: 1fr;
  }

  .vip-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .script-mode-row,
  .script-steps,
  .script-form-grid {
    grid-template-columns: 1fr;
  }

  .script-picker-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .script-record-card,
  .script-record-detail-grid,
  .viral-video-preview,
  .viral-video-parser-row,
  .viral-rewrite-mode-shell,
  .viral-rewrite-stepper,
  .case-study-report-hero,
  .case-study-report-metrics,
  .case-study-report-grid {
    grid-template-columns: 1fr;
  }

  .case-study-score {
    min-height: 104px;
  }

  .viral-rewrite-workflow-head {
    align-items: stretch;
    flex-direction: column;
  }

  .script-result-head,
  .script-record-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .script-result-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .copy-library-modal-actions .copy-library-view-btn {
    margin-right: 0;
  }

  .script-picker-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .notice-ticker {
    grid-template-columns: 58px minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .vip-plan-grid {
    grid-template-columns: 1fr;
  }

  .vip-service-copy h2 {
    font-size: 24px;
  }

  .notice-ticker-item span {
    max-width: 220px;
  }
}

.agent-log-cleanup-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 16px 0;
  padding: 18px 20px;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf5 0%, #fff7ed 100%);
  box-shadow: 0 8px 22px rgba(154, 52, 18, .05);
}

.agent-log-cleanup-copy {
  min-width: 0;
}

.agent-log-cleanup-copy > span,
.agent-log-cleanup-copy > strong,
.agent-log-cleanup-copy > small {
  display: block;
}

.agent-log-cleanup-copy > span {
  margin-bottom: 5px;
  color: #c2410c;
  font-size: 12px;
  font-weight: 700;
}

.agent-log-cleanup-copy > strong {
  color: #7c2d12;
  font-size: 17px;
}

.agent-log-cleanup-copy p {
  margin: 7px 0 4px;
  color: #4d584a;
  line-height: 1.65;
}

.agent-log-cleanup-copy p b {
  color: #9a3412;
}

.agent-log-cleanup-copy > small {
  color: #7c6f67;
  line-height: 1.55;
}

.agent-log-cleanup-card .btn {
  flex: 0 0 auto;
  min-width: 168px;
  justify-content: center;
}

.agent-log-cleanup-card .btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.log-toolbar {
  align-items: center;
}

.log-toolbar .admin-select {
  width: 150px;
}

.log-detail-panel {
  margin-top: 18px;
}

.log-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.log-detail-head span {
  color: #647063;
  font-size: 13px;
}

.log-detail-head h2 {
  margin: 4px 0 0;
  color: #142624;
  font-size: 20px;
}

.log-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.log-detail-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.log-detail-grid span,
.log-detail-grid strong {
  display: block;
}

.log-detail-grid span {
  margin-bottom: 4px;
  color: #647063;
  font-size: 12px;
}

.log-detail-grid strong {
  color: #142624;
  font-size: 14px;
  line-height: 1.6;
}

.log-detail-panel details {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.log-detail-panel summary {
  cursor: pointer;
  padding: 12px 14px;
  color: #142624;
  font-weight: 700;
}

.log-detail-panel details .admin-code {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  max-height: 360px;
}

.admin-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-page-head h1 {
  margin-bottom: 6px;
}

.agent-admin-avatar,
.agent-avatar-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #e0e7ff, #cffafe);
  color: #4338ca;
  font-weight: 800;
}

.agent-admin-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.agent-admin-avatar img,
.agent-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-editor {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f6f5ef;
  box-shadow: 0 18px 45px rgba(20, 38, 36, .08);
}

.agent-editor-form {
  margin-top: 16px;
}

.agent-output-contract {
  padding: 18px;
  border: 1px solid #bfd2f5;
  border-radius: 12px;
  background: linear-gradient(145deg, #f7faff, #eef4ff);
}

.agent-safety-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #c6dcce;
  border-radius: 12px;
  background: linear-gradient(145deg, #f6fff9, #eef9f2);
}

.agent-safety-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.agent-safety-head span {
  color: #2f7a50;
  font-size: 12px;
  font-weight: 800;
}

.agent-safety-head h2 {
  margin: 5px 0 0;
  color: #254934;
  font-size: 21px;
}

.agent-safety-head p {
  max-width: 900px;
  margin: 7px 0 0;
  color: #617568;
  font-size: 13px;
  line-height: 1.65;
}

.agent-safety-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.agent-safety-badges span {
  padding: 6px 9px;
  border: 1px solid #cae4d3;
  border-radius: 99px;
  background: #fff;
  color: #3d6e4d;
  font-size: 11px;
  font-weight: 700;
}

.agent-safety-form {
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid #d6e9dc;
}

.agent-safety-form[hidden] {
  display: none;
}

.agent-safety-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.agent-safety-form-grid label {
  min-width: 0;
}

.agent-prerequisite-head {
  margin-top: 4px;
  padding: 13px 14px;
  border: 1px solid #d7e2f4;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}

.agent-prerequisite-head strong {
  color: #344e75;
  font-size: 14px;
}

.agent-prerequisite-head p {
  margin: 5px 0 0;
  color: #6e7d91;
  font-size: 12px;
  line-height: 1.6;
}

.agent-output-contract-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.agent-output-contract-head > div > span {
  color: #4f72ae;
  font-size: 12px;
  font-weight: 800;
}

.agent-output-contract-head h3 {
  margin: 5px 0 0;
  color: #243b61;
  font-size: 20px;
}

.agent-output-contract-head p,
.agent-contract-schema p {
  margin: 7px 0 0;
  color: #66758b;
  font-size: 13px;
  line-height: 1.65;
}

.agent-output-contract-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.agent-output-contract-grid label {
  min-width: 0;
}

.agent-contract-schema {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #d5e0f3;
  border-radius: 10px;
  background: #fff;
}

.agent-contract-schema > strong {
  color: #334c73;
  font-size: 13px;
}

.agent-contract-schema pre {
  max-height: 360px;
  margin: 10px 0 0;
  padding: 14px;
  overflow: auto;
  border-radius: 8px;
  background: #172033;
  color: #d9efea;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.agent-avatar-field {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.agent-avatar-preview {
  width: 104px;
  height: 104px;
  border-radius: 24px;
}

.agent-avatar-field p,
.agent-field-help,
.agent-request-preview p {
  margin: 5px 0 10px;
  color: #647063;
  font-size: 13px;
  line-height: 1.65;
}

.agent-avatar-field .admin-input {
  display: inline-block;
  width: min(520px, 100%);
  margin-right: 8px;
}

.agent-picker-block {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.agent-picker-row small {
  margin-top: 3px;
  white-space: normal;
  line-height: 1.5;
}

.agent-knowledge-item {
  display: grid;
  gap: 8px;
}

.agent-knowledge-route {
  display: grid;
  grid-template-columns: 180px minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px dashed #c7d2fe;
  border-radius: 8px;
  background: #eef2ff;
}

.agent-knowledge-route[hidden] {
  display: none;
}

.agent-knowledge-route label {
  color: #4d584a;
  font-size: 12px;
}

.agent-knowledge-route .admin-input,
.agent-knowledge-route .admin-select {
  margin-top: 5px;
}

.agent-request-preview {
  padding: 16px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #eef2ff;
}

.agent-request-preview > span {
  display: inline-block;
  margin-left: 12px;
  color: #4d584a;
  font-size: 13px;
}

.agent-request-preview .admin-code,
.agent-request-log {
  max-height: 560px !important;
  margin-top: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-log-question {
  min-width: 220px;
  max-width: 360px;
  line-height: 1.6;
}

.btn-danger {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fff7f7;
}

@media (max-width: 900px) {
  .agent-log-cleanup-card {
    align-items: stretch;
    flex-direction: column;
  }

  .agent-log-cleanup-card .btn {
    width: 100%;
  }

  .admin-page-head {
    flex-direction: column;
  }

  .agent-avatar-field {
    grid-template-columns: 1fr;
  }

  .agent-knowledge-route {
    grid-template-columns: 1fr;
  }

  .agent-output-contract-grid {
    grid-template-columns: 1fr;
  }

  .agent-safety-head {
    flex-direction: column;
  }

  .agent-safety-form-grid {
    grid-template-columns: 1fr;
  }
}

.media-task-detail-results {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.media-task-detail-results a {
  word-break: break-all;
  color: #0e8a7c;
}

/* 官网展示页 */
.official-home {
  min-width: 0;
  color: #e6f2ff;
  background:
    linear-gradient(180deg, #050a14 0%, #07111f 38%, #081221 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 72px);
}

.official-home .btn {
  border-radius: 8px;
}

.official-home .btn-primary {
  background: linear-gradient(135deg, #2563eb, #0e8a7c);
}

.official-home .btn-primary:hover {
  background: linear-gradient(135deg, #0c6b60, #0e7490);
}

.official-home .btn-quiet {
  color: #d9efea;
  border-color: rgba(148, 163, 184, .24);
  background: rgba(20, 38, 36, .56);
}

.official-container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.official-nav {
  min-width: 0;
  height: 72px;
  padding: 0 34px;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.official-brand .brand-badge {
  width: 40px;
  height: 40px;
  color: #06121f;
  background: linear-gradient(135deg, #7ad9d2, #d3f2e4);
  box-shadow: 0 0 28px rgba(53, 193, 172, .24);
}

.official-brand .brand-title {
  color: #fff;
}

.official-nav-links {
  gap: 22px;
}

.official-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(226, 232, 240, .78);
  font-size: 14px;
}

.official-nav-actions .btn {
  min-width: auto;
  min-height: 38px;
  padding: 9px 14px;
}

.official-hero {
  position: relative;
  min-height: 820px;
  overflow: hidden;
  padding: 142px 0 86px;
  background:
    linear-gradient(110deg, rgba(6, 14, 28, .98) 0%, rgba(9, 21, 42, .92) 54%, rgba(14, 25, 45, .78) 100%),
    repeating-linear-gradient(0deg, rgba(103, 232, 249, .045) 0, rgba(103, 232, 249, .045) 1px, transparent 1px, transparent 42px);
}

.official-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(126deg, transparent 0%, rgba(59, 130, 246, .18) 36%, transparent 62%),
    linear-gradient(32deg, transparent 0%, rgba(20, 184, 166, .16) 28%, transparent 56%);
  pointer-events: none;
}

.official-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, .12));
}

.official-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  gap: 56px;
  align-items: center;
}

.official-hero-copy {
  min-width: 0;
}

.official-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(103, 232, 249, .28);
  border-radius: 999px;
  color: #d3f2e4;
  background: rgba(20, 38, 36, .46);
  font-size: 14px;
  font-weight: 800;
}

.official-hero h1 {
  margin: 26px 0 16px;
  color: #fff;
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: 0;
}

.official-hero h2 {
  margin: 0 0 18px;
  color: #bff8ff;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: 0;
}

.official-hero p {
  max-width: 660px;
  margin: 0;
  color: rgba(226, 232, 240, .76);
  font-size: 18px;
  line-height: 1.9;
}

.official-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.official-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  max-width: 720px;
}

.official-tag-cloud span,
.official-common-features b,
.official-common-features span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 999px;
  color: #c7efff;
  background: rgba(20, 38, 36, .56);
  font-size: 13px;
  font-weight: 800;
}

.official-stage {
  position: relative;
  min-height: 560px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(20, 38, 36, .86), rgba(8, 15, 28, .62)),
    repeating-linear-gradient(90deg, rgba(103, 232, 249, .05) 0, rgba(103, 232, 249, .05) 1px, transparent 1px, transparent 34px);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .34);
  backdrop-filter: blur(16px);
}

.official-stage::before,
.official-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.official-stage::before {
  inset: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(103, 232, 249, .16), transparent 32%),
    radial-gradient(circle at 78% 78%, rgba(37, 99, 235, .20), transparent 38%);
  transform: none;
}

.official-stage::after {
  inset: 18px;
  border: 1px solid rgba(103, 232, 249, .10);
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: none;
}

.stage-dashboard {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr);
  min-height: 524px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(10, 20, 38, .90), rgba(6, 12, 24, .78)),
    rgba(20, 38, 36, .66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 28px 76px rgba(0, 0, 0, .30);
  backdrop-filter: blur(18px);
}

.stage-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(34, 211, 238, .08) 46%, transparent 70%),
    radial-gradient(circle at 52% 40%, rgba(59, 130, 246, .18), transparent 34%);
  pointer-events: none;
}

.stage-dashboard-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  color: rgba(226, 232, 240, .66);
  font-size: 12px;
  font-weight: 900;
}

.stage-dots {
  display: inline-flex;
  gap: 6px;
}

.stage-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(148, 163, 184, .46);
}

.stage-dots i:nth-child(1) {
  background: #7ad9d2;
}

.stage-dots i:nth-child(2) {
  background: #d3f2e4;
}

.stage-dashboard-bar strong {
  color: #e5f4ff;
  font-size: 13px;
}

.stage-dashboard-bar em {
  color: #86efac;
  font-style: normal;
}

.stage-dashboard-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 158px;
  gap: 14px;
  padding: 16px;
}

.stage-dashboard-side {
  display: grid;
  align-content: start;
  gap: 9px;
}

.stage-dashboard-side span {
  min-height: 34px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  color: rgba(226, 232, 240, .56);
  background: rgba(8, 15, 28, .44);
  font-size: 12px;
  font-weight: 900;
}

.stage-dashboard-side .active {
  color: #06121f;
  border-color: transparent;
  background: linear-gradient(135deg, #7ad9d2, #86efac);
}

.stage-dashboard-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.stage-panel,
.stage-dashboard-output {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .80), rgba(8, 15, 28, .62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.stage-panel-large {
  min-height: 190px;
  padding: 18px;
}

.stage-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.stage-panel-head span,
.stage-panel > span,
.stage-dashboard-output > span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.stage-panel-head b {
  color: #fff;
  font-size: 22px;
  line-height: 1.35;
}

.stage-lines {
  display: grid;
  gap: 12px;
  margin: 24px 0 18px;
}

.stage-lines i,
.stage-dashboard-output i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(103, 232, 249, .70), rgba(37, 99, 235, .12));
}

.stage-pills,
.stage-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stage-pills span,
.stage-flow span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(103, 232, 249, .18);
  border-radius: 999px;
  color: #dffbff;
  background: rgba(14, 116, 144, .14);
  font-size: 12px;
  font-weight: 900;
}

.stage-flow {
  position: relative;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(8, 15, 28, .42);
}

.stage-flow::before {
  content: "";
  position: absolute;
  left: 42px;
  right: 42px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(103, 232, 249, .70), rgba(37, 99, 235, .18));
  transform: translateY(-50%);
}

.stage-flow span {
  position: relative;
  z-index: 1;
  color: #06121f;
  background: #d3f2e4;
}

.stage-panel-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.stage-panel-row .stage-panel {
  min-height: 104px;
  padding: 16px;
}

.stage-panel strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.stage-panel small {
  display: block;
  margin-top: 8px;
  color: rgba(226, 232, 240, .54);
}

.stage-dashboard-output {
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.stage-dashboard-output strong {
  color: #fff;
  line-height: 1.65;
}

.stage-dashboard-output div {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.stage-dashboard-output i:nth-child(2) {
  width: 76%;
}

.stage-dashboard-output i:nth-child(3) {
  width: 58%;
}

.stage-topbar,
.stage-output {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
}

.stage-topbar {
  top: 20px;
  display: flex;
  justify-content: space-between;
  color: rgba(226, 232, 240, .66);
  font-size: 12px;
  font-weight: 900;
}

.stage-topbar strong {
  color: #86efac;
}

.stage-board {
  position: absolute;
  inset: 72px 34px 132px;
}

.stage-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(103, 232, 249, .42);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, rgba(37, 99, 235, .84), rgba(20, 184, 166, .76));
  box-shadow: 0 0 60px rgba(34, 211, 238, .30);
}

.stage-core span,
.stage-core strong {
  display: block;
}

.stage-core span {
  font-size: 34px;
  font-weight: 900;
}

.stage-core strong {
  font-size: 13px;
}

.stage-step {
  position: absolute;
  display: grid;
  gap: 6px;
  align-content: center;
  width: 92px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  color: #dffbff;
  background: rgba(20, 38, 36, .78);
  box-shadow: inset 0 0 28px rgba(14, 165, 233, .12);
}

.stage-step b {
  color: #7ad9d2;
  font-size: 12px;
}

.stage-step span {
  font-weight: 900;
}

.s1 { left: 7%; top: 14%; }
.s2 { right: 12%; top: 10%; }
.s3 { right: 2%; top: 46%; }
.s4 { right: 24%; bottom: 1%; }
.s5 { left: 22%; bottom: 5%; }
.s6 { left: 2%; top: 56%; }

.stage-output {
  bottom: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stage-output div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(8, 15, 28, .72);
}

.stage-output span,
.stage-output strong {
  display: block;
}

.stage-output span {
  color: rgba(226, 232, 240, .56);
  font-size: 12px;
}

.stage-output strong {
  overflow: hidden;
  margin-top: 7px;
  color: #d3f2e4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.official-section {
  padding: 92px 0;
  background: #07111f;
}

.official-section-alt {
  background:
    linear-gradient(180deg, rgba(10, 21, 38, .98), rgba(8, 18, 34, .98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0, rgba(255, 255, 255, .028) 1px, transparent 1px, transparent 64px);
}

.official-section-head {
  max-width: 780px;
  margin-bottom: 34px;
}

.official-section-head span,
.official-info-grid article > span {
  display: inline-flex;
  margin-bottom: 12px;
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.official-section-head h2,
.official-info-grid h2,
.official-cta h2 {
  margin: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1.28;
  letter-spacing: 0;
}

.official-section-head p {
  margin: 14px 0 0;
  color: rgba(226, 232, 240, .68);
  font-size: 16px;
  line-height: 1.8;
}

.official-feature-grid,
.official-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.official-feature-grid article,
.official-advantage-grid article,
.official-process article,
.official-audience-grid article,
.official-pricing-card,
.official-info-grid article,
.official-compliance-grid p,
.legal-card {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(20, 38, 36, .66);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.official-feature-grid article {
  min-height: 244px;
  padding: 22px;
}

.official-feature-grid em,
.official-process em {
  color: #86efac;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.official-feature-grid h3,
.official-advantage-grid h3,
.official-process h3,
.official-audience-grid h3,
.official-pricing-card h3 {
  margin: 16px 0 10px;
  color: #fff;
  font-size: 20px;
  line-height: 1.35;
}

.official-feature-grid p,
.official-advantage-grid p,
.official-process p,
.official-audience-grid p,
.official-pricing-card p,
.official-info-grid p,
.official-compliance-grid p,
.legal-card p {
  margin: 0;
  color: rgba(226, 232, 240, .68);
  line-height: 1.78;
}

.official-advantage-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.official-advantage-grid article,
.official-audience-grid article {
  min-height: 190px;
  padding: 22px;
}

.official-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  counter-reset: officialStep;
}

.official-process article {
  position: relative;
  min-height: 188px;
  padding: 22px;
}

.official-process article::after {
  counter-increment: officialStep;
  content: "0" counter(officialStep);
  position: absolute;
  top: 18px;
  right: 18px;
  color: rgba(103, 232, 249, .18);
  font-size: 38px;
  font-weight: 900;
}

.official-pricing-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.official-pricing-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 420px;
  padding: 22px;
}

.official-pricing-card.highlight {
  border-color: rgba(103, 232, 249, .50);
  background:
    linear-gradient(180deg, rgba(14, 116, 144, .26), rgba(20, 38, 36, .76)),
    rgba(20, 38, 36, .72);
}

.plan-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #052e2b;
  background: linear-gradient(135deg, #7ad9d2, #86efac);
  font-size: 12px;
  font-weight: 900;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 12px;
}

.price strong {
  color: #fff;
  font-size: 42px;
  line-height: 1;
}

.price span {
  color: #9fc7da;
  font-size: 14px;
}

.official-pricing-card ul {
  display: grid;
  gap: 9px;
  min-height: 126px;
  margin: 18px 0 22px;
  padding: 0;
  color: rgba(226, 232, 240, .76);
  list-style: none;
  line-height: 1.55;
}

.official-pricing-card li {
  position: relative;
  padding-left: 16px;
}

.official-pricing-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7ad9d2;
}

.official-pricing-card .btn {
  align-self: end;
}

.official-common-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.official-common-features span {
  color: #06121f;
  background: #d3f2e4;
}

.official-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.official-info-grid article {
  min-height: 260px;
  padding: 28px;
}

.official-info-grid p {
  margin-top: 14px;
  font-size: 16px;
}

.official-info-grid small {
  display: block;
  margin-top: 18px;
  color: #f8e3bb;
  line-height: 1.7;
}

.official-compliance-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.official-compliance-grid p {
  min-height: 146px;
  padding: 20px;
}

.official-cta {
  padding: 82px 0;
  text-align: center;
  background:
    linear-gradient(110deg, rgba(20, 38, 36, .98), rgba(12, 36, 56, .92)),
    repeating-linear-gradient(90deg, rgba(103, 232, 249, .055) 0, rgba(103, 232, 249, .055) 1px, transparent 1px, transparent 56px);
}

.official-cta p {
  max-width: 680px;
  margin: 16px auto 28px;
  color: rgba(226, 232, 240, .72);
  font-size: 17px;
  line-height: 1.8;
}

.official-cta div div {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.official-footer {
  align-items: flex-start;
  min-width: 0;
  padding: 34px max(24px, calc((100% - 1180px) / 2));
}

.official-footer > div {
  min-width: 0;
}

.official-footer strong,
.official-footer span,
.official-footer a,
.official-footer p {
  display: block;
}

.official-footer strong {
  margin-bottom: 8px;
}

.official-footer-links {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.official-footer-service {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(226, 232, 240, .68);
  text-align: center;
}

.official-footer-service strong {
  margin-bottom: 2px;
  color: #fff;
}

.official-footer-service b {
  color: #e5f4ff;
}

.official-footer .official-footer-qr {
  display: grid;
  width: 86px;
  height: 86px;
  border-color: rgba(103, 232, 249, .22);
  background: rgba(20, 38, 36, .52);
}

.official-footer-links a:hover {
  color: #fff;
}

.legal-page {
  min-width: 0;
  min-height: 100vh;
  color: #e6f2ff;
  background:
    linear-gradient(135deg, rgba(5, 10, 20, 1), rgba(9, 24, 44, 1)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 72px);
}

.legal-shell {
  width: min(860px, calc(100% - 40px));
  margin: 0 auto;
  padding: 40px 0 72px;
}

.legal-brand {
  margin-bottom: 28px;
}

.legal-brand .brand-badge {
  color: #06121f;
  background: linear-gradient(135deg, #7ad9d2, #d3f2e4);
}

.legal-card {
  padding: 34px;
}

.legal-card > span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.legal-card h1 {
  margin: 12px 0 18px;
  color: #fff;
  font-size: 36px;
  letter-spacing: 0;
}

.legal-card h2 {
  margin: 28px 0 10px;
  color: #fff;
  font-size: 20px;
}

.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

@media (max-width: 1180px) {
  .official-nav {
    padding-left: 22px;
    padding-right: 22px;
  }

  .official-nav-links {
    gap: 14px;
  }

  .official-hero-inner {
    grid-template-columns: 1fr;
  }

  .official-stage {
    min-height: 500px;
  }

  .official-feature-grid,
  .official-advantage-grid,
  .official-pricing-grid,
  .official-compliance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .official-nav {
    height: auto;
    min-height: 66px;
    padding: 12px 18px;
  }

  .official-nav-links {
    display: none;
  }

  .official-nav-actions {
    gap: 8px;
  }

  .official-nav-actions #homeLoginLink,
  .official-nav-actions #homeConsoleLink {
    display: none;
  }

  .official-container {
    width: min(100% - 32px, 760px);
  }

  .official-hero {
    min-height: 0;
    padding: 112px 0 64px;
  }

  .official-hero h1 {
    font-size: 42px;
  }

  .official-hero h2 {
    font-size: 24px;
  }

  .official-hero p {
    font-size: 16px;
  }

  .official-stage {
    min-height: 440px;
  }

  .stage-dashboard {
    min-height: auto;
  }

  .stage-dashboard-body {
    grid-template-columns: 1fr;
  }

  .stage-dashboard-side {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stage-board {
    inset: 70px 18px 128px;
  }

  .stage-step {
    width: 78px;
    min-height: 70px;
    padding: 10px;
  }

  .stage-core {
    width: 112px;
    height: 112px;
  }

  .official-section {
    padding: 64px 0;
  }

  .official-section-head h2,
  .official-info-grid h2,
  .official-cta h2 {
    font-size: 28px;
  }

  .official-process,
  .official-audience-grid,
  .official-info-grid {
    grid-template-columns: 1fr;
  }

  .official-footer {
    display: grid;
    justify-items: start;
    padding: 30px 18px;
  }

  .official-footer-links {
    justify-items: start;
  }

  .official-footer-service {
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .official-brand .brand-title {
    font-size: 16px;
  }

  .official-nav-actions .btn {
    min-height: 36px;
    padding: 8px 10px;
  }

  .official-hero h1 {
    font-size: 34px;
  }

  .official-hero h2 {
    font-size: 21px;
  }

  .official-hero-actions,
  .official-cta div div {
    align-items: stretch;
    flex-direction: column;
  }

  .official-hero-actions .btn,
  .official-cta .btn {
    width: 100%;
  }

  .official-tag-cloud span,
  .official-common-features b,
  .official-common-features span {
    min-height: 32px;
    font-size: 12px;
  }

  .official-stage {
    min-height: 390px;
    padding: 12px;
  }

  .stage-dashboard-bar {
    padding: 0 12px;
  }

  .stage-dashboard-bar strong {
    display: none;
  }

  .stage-dashboard-body {
    padding: 12px;
  }

  .stage-dashboard-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage-panel-head {
    display: grid;
  }

  .stage-panel-head b {
    font-size: 19px;
  }

  .stage-flow {
    justify-content: flex-start;
  }

  .stage-flow::before {
    display: none;
  }

  .stage-panel-row {
    grid-template-columns: 1fr;
  }

  .stage-topbar,
  .stage-output {
    left: 14px;
    right: 14px;
  }

  .stage-output {
    grid-template-columns: 1fr;
  }

  .stage-board {
    bottom: 150px;
  }

  .stage-core {
    width: 94px;
    height: 94px;
  }

  .stage-core span {
    font-size: 28px;
  }

  .stage-step {
    width: 68px;
    min-height: 58px;
    padding: 8px;
    font-size: 13px;
  }

  .official-feature-grid,
  .official-advantage-grid,
  .official-pricing-grid,
  .official-compliance-grid {
    grid-template-columns: 1fr;
  }

  .official-pricing-card {
    min-height: 0;
  }

  .official-compliance-grid p {
    min-height: 0;
  }

  .legal-shell {
    width: min(100% - 28px, 640px);
    padding-top: 28px;
  }

  .legal-card {
    padding: 24px;
  }

  .legal-card h1 {
    font-size: 30px;
  }
}

/* 新版登录注册页 */
.auth-neo-page {
  min-width: 0;
  min-height: 100vh;
  color: #e6f2ff;
  background:
    linear-gradient(135deg, rgba(5, 10, 20, .98), rgba(8, 26, 48, .96)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 72px);
}

.auth-neo-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  min-height: 100vh;
}

.auth-neo-art {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 100vh;
  overflow: hidden;
  padding: 42px 64px 58px;
}

.auth-neo-art::before,
.auth-neo-art::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.auth-neo-art::before {
  inset: 0;
  background:
    radial-gradient(circle at 22% 22%, rgba(103, 232, 249, .18), transparent 30%),
    radial-gradient(circle at 74% 62%, rgba(37, 99, 235, .22), transparent 36%),
    linear-gradient(120deg, transparent 0%, rgba(20, 184, 166, .08) 48%, transparent 72%);
}

.auth-neo-art::after {
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.18));
}

.auth-neo-brand,
.auth-neo-copy,
.auth-preview {
  position: relative;
  z-index: 1;
}

.auth-neo-brand .brand-badge {
  color: #06121f;
  background: linear-gradient(135deg, #7ad9d2, #d3f2e4);
}

.auth-neo-copy {
  max-width: 720px;
  margin: 96px 0;
}

.auth-neo-copy span,
.auth-neo-kicker {
  display: inline-flex;
  margin-bottom: 16px;
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.auth-neo-copy h1 {
  margin: 0;
  color: #fff;
  font-size: 54px;
  line-height: 1.12;
  letter-spacing: 0;
}

.auth-neo-copy p {
  max-width: 620px;
  margin: 20px 0 0;
  color: rgba(226, 232, 240, .72);
  font-size: 18px;
  line-height: 1.85;
}

.auth-preview {
  width: min(620px, 100%);
  min-height: 180px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(20, 38, 36, .82), rgba(8, 15, 28, .58)),
    rgba(20, 38, 36, .48);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
}

.auth-preview-head {
  display: flex;
  justify-content: space-between;
  color: rgba(226, 232, 240, .58);
  font-size: 12px;
  font-weight: 900;
}

.auth-preview-head b {
  color: #86efac;
}

.auth-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.auth-preview-grid i {
  height: 54px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(103, 232, 249, .34), rgba(37, 99, 235, .12)),
    rgba(20, 38, 36, .68);
}

.auth-preview-grid strong {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  color: #fff;
  background: rgba(8, 15, 28, .52);
}

.auth-step-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.auth-step-list span {
  min-height: 42px;
  padding: 11px 13px;
  border: 1px solid rgba(103, 232, 249, .18);
  border-radius: 8px;
  color: #dffbff;
  background: rgba(14, 116, 144, .14);
  font-weight: 900;
}

.auth-neo-panel {
  display: grid;
  align-items: center;
  padding: 34px;
  background:
    linear-gradient(180deg, rgba(8, 15, 28, .72), rgba(6, 12, 22, .92)),
    rgba(8, 15, 28, .86);
  border-left: 1px solid rgba(148, 163, 184, .14);
}

.auth-neo-box {
  width: 100%;
  padding: 30px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .92), rgba(8, 15, 28, .84)),
    rgba(20, 38, 36, .78);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .30);
}

.auth-neo-box h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 32px;
  letter-spacing: 0;
}

.auth-neo-box .sub {
  margin: 0 0 24px;
  color: rgba(226, 232, 240, .60);
}

.auth-neo-box .form-row label {
  color: #d9efea;
}

.auth-neo-box .form-row input {
  height: 46px;
  border-color: rgba(148, 163, 184, .22);
  color: #e5edf8;
  background: rgba(8, 15, 28, .78);
}

.auth-neo-box .form-row input:focus {
  border-color: rgba(103, 232, 249, .68);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .12);
}

.auth-neo-box .form-row input::placeholder {
  color: #647063;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.captcha-row small {
  display: block;
  margin-top: 8px;
  color: rgba(226, 232, 240, .48);
  line-height: 1.6;
}

.captcha-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 10px;
}

.captcha-control input {
  width: 100%;
}

.captcha-image {
  display: grid;
  place-items: center;
  height: 46px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(103, 232, 249, .24);
  border-radius: 8px;
  background: rgba(8, 15, 28, .76);
  cursor: pointer;
}

.captcha-image img {
  display: block;
  width: 132px;
  height: 46px;
  object-fit: cover;
}

.auth-neo-box > .btn {
  width: 100%;
  min-height: 46px;
  margin-top: 8px;
}

.auth-neo-links {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  color: rgba(226, 232, 240, .62);
  font-size: 14px;
}

.auth-neo-links a {
  color: #7ad9d2;
  font-weight: 900;
}

.auth-neo-box .form-msg {
  margin-top: 14px;
  color: #fca5a5;
}

@media (max-width: 980px) {
  .auth-neo-shell {
    grid-template-columns: 1fr;
  }

  .auth-neo-art {
    min-height: auto;
    padding: 28px 22px;
  }

  .auth-neo-copy {
    margin: 54px 0 30px;
  }

  .auth-neo-copy h1 {
    font-size: 38px;
  }

  .auth-neo-panel {
    padding: 22px;
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .auth-neo-copy h1 {
    font-size: 30px;
  }

  .auth-neo-copy p {
    font-size: 16px;
  }

  .auth-preview-grid,
  .auth-form-grid,
  .captcha-control {
    grid-template-columns: 1fr;
  }

  .auth-neo-box {
    padding: 22px;
  }

  .auth-neo-links {
    display: grid;
  }
}

/* 官网首页：深空引擎 2.0 */
.official-home-v2 {
  min-width: 0;
  color: #eaf4ff;
  background: #030914;
  --cursor-x: 50%;
  --cursor-y: 38%;
}

.official-home-v2 .engine-nav {
  color: #eaf4ff;
  background: linear-gradient(180deg, rgba(3, 9, 20, .80), rgba(3, 9, 20, .20));
  border-bottom: 1px solid rgba(148, 163, 184, .10);
  transition: background .22s ease, border-color .22s ease;
}

.official-home-v2 .engine-nav.is-scrolled {
  background: rgba(3, 9, 20, .86);
  border-bottom-color: rgba(103, 232, 249, .14);
  backdrop-filter: blur(18px);
}

.engine-hero {
  position: relative;
  min-height: 790px;
  overflow: hidden;
  padding: 132px 0 54px;
  color: #fff;
  background: #030914;
}

.engine-hero::before,
.engine-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.engine-hero::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 9, 20, .92) 0%, rgba(3, 9, 20, .76) 34%, rgba(3, 9, 20, .28) 72%, rgba(3, 9, 20, .60) 100%),
    linear-gradient(180deg, rgba(3, 9, 20, .20) 0%, rgba(3, 9, 20, .88) 92%, #030914 100%);
}

.engine-hero::after {
  z-index: 3;
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(103, 232, 249, .18), transparent 24%),
    radial-gradient(circle at 22% 68%, rgba(16, 185, 129, .10), transparent 28%);
  mix-blend-mode: screen;
  transition: opacity .2s ease;
}

.engine-hero-asset {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .76;
}

.engine-hero .hero-canvas {
  z-index: 2;
  opacity: .34;
  mix-blend-mode: screen;
}

.engine-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.10));
  pointer-events: none;
}

.engine-hero-inner {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(470px, 1.12fr);
  gap: 36px;
  align-items: center;
}

.engine-hero-copy {
  min-width: 0;
}

.engine-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(103, 232, 249, .30);
  border-radius: 999px;
  color: #d3f2e4;
  background: rgba(8, 20, 36, .56);
  font-size: 13px;
  font-weight: 900;
}

.engine-eyebrow::before,
.engine-proof-list span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 16px rgba(34, 211, 238, .72);
}

.engine-hero h1 {
  margin: 26px 0 18px;
  color: #fff;
  font-size: 66px;
  line-height: 1.08;
  letter-spacing: 0;
}

.engine-hero h2 {
  max-width: 720px;
  margin: 0 0 18px;
  color: #e5f4ff;
  font-size: 28px;
  line-height: 1.42;
  letter-spacing: 0;
}

.engine-hero p {
  max-width: 680px;
  margin: 0;
  color: rgba(226, 232, 240, .72);
  font-size: 17px;
  line-height: 1.9;
}

.engine-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.engine-hero-actions .btn {
  min-width: 164px;
  min-height: 52px;
}

.engine-proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.engine-proof-list span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 999px;
  color: rgba(226, 232, 240, .82);
  background: rgba(8, 20, 36, .50);
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(14px);
}

.engine-proof-list span:nth-child(2)::before {
  background: #60a5fa;
  box-shadow: 0 0 16px rgba(96, 165, 250, .72);
}

.engine-proof-list span:nth-child(3)::before,
.engine-proof-list span:nth-child(4)::before {
  background: #34d399;
  box-shadow: 0 0 16px rgba(52, 211, 153, .58);
}

.engine-orbit {
  position: relative;
  width: min(650px, 100%);
  aspect-ratio: 1 / .78;
  justify-self: end;
  transform-style: preserve-3d;
  transition: transform .18s ease;
}

.engine-ring,
.engine-orbit-core,
.engine-node {
  position: absolute;
  z-index: 2;
}

.engine-ring {
  left: 50%;
  top: 50%;
  border: 1px solid rgba(96, 165, 250, .32);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-one {
  width: 70%;
  height: 82%;
  box-shadow: inset 0 0 46px rgba(37, 99, 235, .15), 0 0 46px rgba(37, 99, 235, .12);
}

.ring-two {
  width: 49%;
  height: 58%;
  border-color: rgba(103, 232, 249, .38);
  box-shadow: inset 0 0 36px rgba(34, 211, 238, .16);
}

.engine-orbit::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .46), transparent);
}

.engine-orbit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7%;
  bottom: 9%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(103, 232, 249, .34), transparent);
}

.engine-orbit-core {
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 162px;
  height: 162px;
  padding: 18px;
  border: 1px solid rgba(103, 232, 249, .42);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(103, 232, 249, .38), transparent 38%),
    rgba(8, 20, 36, .72);
  box-shadow: 0 0 64px rgba(34, 211, 238, .28);
  backdrop-filter: blur(16px);
}

.engine-orbit-core span {
  color: #7ad9d2;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
}

.engine-orbit-core strong {
  font-size: 17px;
}

.engine-orbit-core small {
  color: rgba(226, 232, 240, .62);
}

.engine-node {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 98px;
  min-width: 92px;
  min-height: 72px;
  padding: 11px 13px;
  border: 1px solid rgba(96, 165, 250, .35);
  border-radius: 8px;
  color: #eaf6ff;
  text-align: center;
  background: rgba(8, 20, 36, .70);
  box-shadow: 0 0 30px rgba(37, 99, 235, .16);
  backdrop-filter: blur(14px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.engine-node b {
  font-size: 14px;
  line-height: 1.25;
}

.engine-node span {
  color: rgba(226, 232, 240, .54);
  font-size: 12px;
}

.engine-node.is-active,
.engine-node:hover {
  border-color: rgba(52, 211, 153, .66);
  box-shadow: 0 0 42px rgba(52, 211, 153, .22);
  transform: translateY(-4px);
}

.engine-node.n1 { left: 47%; top: 2%; }
.engine-node.n2 { left: 16%; top: 21%; }
.engine-node.n3 { right: 9%; top: 24%; }
.engine-node.n4 { right: 10%; bottom: 24%; }
.engine-node.n5 { left: 49%; bottom: 2%; }
.engine-node.n6 { left: 17%; bottom: 19%; }
.engine-node.n7 { left: 41%; bottom: 18%; }
.engine-node.n8 { left: 2%; top: 46%; width: 124px; min-width: 118px; }

.engine-proof-rail {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 50px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(148, 163, 184, .16);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .24);
  backdrop-filter: blur(18px);
}

.engine-proof-rail div {
  min-height: 86px;
  padding: 20px 22px;
  background: rgba(8, 20, 36, .76);
}

.engine-proof-rail span {
  display: block;
  margin-bottom: 7px;
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.engine-proof-rail strong {
  display: block;
  color: #fff;
  font-size: 17px;
  line-height: 1.45;
}

.engine-section {
  padding: 88px 0;
  color: #eaf4ff;
  background: #030914;
}

.engine-section-alt {
  background:
    linear-gradient(180deg, #061121 0%, #030914 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0, rgba(255, 255, 255, .03) 1px, transparent 1px, transparent 70px);
}

.engine-section-head {
  max-width: 760px;
  margin-bottom: 34px;
}

.engine-section-head span,
.engine-info-grid article > span {
  display: inline-flex;
  margin-bottom: 13px;
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.engine-section-head h2,
.engine-info-grid h2,
.engine-cta h2 {
  margin: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1.28;
  letter-spacing: 0;
}

.engine-section-head p {
  margin: 14px 0 0;
  color: rgba(226, 232, 240, .68);
  font-size: 16px;
  line-height: 1.85;
}

.engine-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(148, 163, 184, .16);
}

.engine-matrix article,
.engine-strength-list article,
.engine-process article,
.engine-audience-grid article,
.engine-pricing-grid article,
.engine-info-grid article,
.engine-compliance-grid p {
  border-radius: 8px;
  background: rgba(20, 38, 36, .68);
}

.engine-matrix article {
  min-height: 260px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(15, 32, 56, .94), rgba(8, 20, 36, .84));
}

.engine-matrix span,
.engine-process em,
.engine-strength-list b {
  color: #86efac;
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
}

.engine-matrix h3,
.engine-strength-list h3,
.engine-process h3,
.engine-audience-grid h3,
.engine-pricing-grid h3 {
  margin: 16px 0 14px;
  color: #fff;
  font-size: 21px;
  line-height: 1.35;
}

.engine-matrix ul,
.engine-pricing-grid ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.engine-matrix li,
.engine-pricing-grid li {
  position: relative;
  padding-left: 16px;
  color: rgba(226, 232, 240, .72);
  line-height: 1.62;
}

.engine-matrix li::before,
.engine-pricing-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7ad9d2;
}

.engine-dual {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1fr);
  gap: 44px;
  align-items: start;
}

.engine-strength-list {
  display: grid;
  gap: 14px;
}

.engine-strength-list article {
  min-height: 148px;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, .16);
}

.engine-strength-list h3 {
  margin: 10px 0 8px;
}

.engine-strength-list p,
.engine-process p,
.engine-audience-grid p,
.engine-pricing-grid p,
.engine-info-grid p,
.engine-compliance-grid p,
.engine-cta p {
  margin: 0;
  color: rgba(226, 232, 240, .68);
  line-height: 1.78;
}

.engine-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.engine-process article {
  min-height: 184px;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, .16);
}

.engine-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.engine-audience-grid article {
  min-height: 150px;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, .16);
}

.engine-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.engine-pricing-grid article {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 420px;
  padding: 23px;
  border: 1px solid rgba(148, 163, 184, .16);
}

.engine-pricing-grid article.highlight {
  border-color: rgba(103, 232, 249, .48);
  background:
    linear-gradient(180deg, rgba(14, 116, 144, .28), rgba(20, 38, 36, .78)),
    rgba(20, 38, 36, .72);
}

.engine-pricing-grid .price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 12px;
}

.engine-pricing-grid .price strong {
  color: #fff;
  font-size: 40px;
  line-height: 1;
}

.engine-pricing-grid .price span {
  color: #9fc7da;
  font-size: 14px;
}

.engine-pricing-grid ul {
  min-height: 104px;
  margin: 18px 0 22px;
}

.engine-pricing-grid .btn {
  align-self: end;
}

.engine-common-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.engine-common-features span,
.engine-common-features b {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 999px;
  color: rgba(226, 232, 240, .74);
  background: rgba(20, 38, 36, .66);
  font-size: 13px;
}

.engine-common-features span {
  color: #06121f;
  border-color: transparent;
  background: linear-gradient(135deg, #7ad9d2, #d3f2e4);
  font-weight: 900;
}

.engine-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.engine-info-grid article {
  min-height: 250px;
  padding: 28px;
  border: 1px solid rgba(148, 163, 184, .16);
}

.engine-info-grid p {
  margin-top: 14px;
  font-size: 16px;
}

.engine-info-grid small {
  display: block;
  margin-top: 18px;
  color: #f8e3bb;
  line-height: 1.7;
}

.engine-compliance-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.engine-compliance-grid p {
  min-height: 146px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, .16);
}

.engine-cta {
  padding: 82px 0;
  text-align: center;
  background:
    linear-gradient(110deg, rgba(3, 9, 20, .98), rgba(7, 34, 53, .94)),
    repeating-linear-gradient(90deg, rgba(103, 232, 249, .05) 0, rgba(103, 232, 249, .05) 1px, transparent 1px, transparent 56px);
}

.engine-cta h2 {
  max-width: 820px;
  margin: 0 auto;
}

.engine-cta p {
  max-width: 680px;
  margin: 16px auto 28px;
  font-size: 17px;
}

.engine-cta div div {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.engine-footer {
  background: #030914;
}

@media (prefers-reduced-motion: reduce) {
  .engine-orbit,
  .engine-node,
  .official-home-v2 .engine-nav {
    transition: none;
  }
}

@media (max-width: 1180px) {
  .engine-hero-inner {
    grid-template-columns: 1fr;
  }

  .engine-orbit {
    justify-self: center;
  }

  .engine-proof-rail,
  .engine-matrix,
  .engine-pricing-grid,
  .engine-compliance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .engine-dual {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .engine-hero {
    min-height: 0;
    padding: 112px 0 44px;
  }

  .engine-hero::before {
    background:
      linear-gradient(90deg, rgba(3, 9, 20, .94), rgba(3, 9, 20, .74)),
      linear-gradient(180deg, rgba(3, 9, 20, .26), #030914 94%);
  }

  .engine-hero h1 {
    font-size: 42px;
  }

  .engine-hero h2 {
    font-size: 23px;
  }

  .engine-hero p {
    font-size: 16px;
  }

  .engine-orbit {
    width: min(560px, 100%);
  }

  .engine-proof-rail,
  .engine-process,
  .engine-audience-grid,
  .engine-info-grid {
    grid-template-columns: 1fr;
  }

  .engine-section {
    padding: 64px 0;
  }

  .engine-section-head h2,
  .engine-info-grid h2,
  .engine-cta h2 {
    font-size: 28px;
  }
}

@media (max-width: 640px) {
  .engine-hero {
    padding-top: 102px;
  }

  .engine-hero h1 {
    font-size: 34px;
  }

  .engine-hero h2 {
    font-size: 20px;
  }

  .engine-hero-actions,
  .engine-cta div div {
    align-items: stretch;
    flex-direction: column;
  }

  .engine-hero-actions .btn,
  .engine-cta .btn {
    width: 100%;
  }

  .engine-proof-list span {
    width: calc(50% - 5px);
    justify-content: center;
    padding: 8px 10px;
    font-size: 12px;
  }

  .engine-orbit {
    width: 100%;
    max-width: 100%;
    height: 390px;
    min-height: 0;
    aspect-ratio: auto;
    margin-top: 18px;
  }

  .engine-orbit-core {
    width: 132px;
    height: 132px;
  }

  .engine-node {
    width: 78px;
    min-width: 78px;
    min-height: 58px;
    padding: 8px 9px;
  }

  .engine-node b {
    font-size: 12px;
  }

  .engine-node span {
    font-size: 11px;
  }

  .engine-node.n8 {
    width: 104px;
    min-width: 98px;
  }

  .engine-node.n1 { left: calc(50% - 39px); top: 0; }
  .engine-node.n2 { left: 5%; top: 22%; }
  .engine-node.n3 { right: 5%; top: 22%; }
  .engine-node.n4 { right: 5%; bottom: 21%; }
  .engine-node.n5 { left: calc(50% - 39px); bottom: 0; }
  .engine-node.n6 { left: 5%; bottom: 21%; }
  .engine-node.n7 { left: calc(50% - 39px); bottom: 17%; }
  .engine-node.n8 { left: 4%; top: 45%; }

  .engine-proof-rail,
  .engine-matrix,
  .engine-pricing-grid,
  .engine-compliance-grid {
    grid-template-columns: 1fr;
  }

  .engine-pricing-grid article {
    min-height: 0;
  }

  .engine-compliance-grid p {
    min-height: 0;
  }
}

.command-dashboard .btn-primary {
  color: #06231f;
  border: 1px solid rgba(110, 231, 183, .62);
  background: linear-gradient(135deg, #8fdfc9, #7ad9d2);
  box-shadow: 0 12px 28px rgba(20, 184, 166, .18);
}

.command-dashboard .btn-primary:hover {
  background: linear-gradient(135deg, #86efac, #7ad9d2);
}

.command-dashboard .btn-quiet {
  color: #dff8ff;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(20, 38, 36, .58);
}

.command-dashboard .btn-quiet:hover {
  border-color: rgba(159, 227, 210, .42);
  background: rgba(20, 184, 166, .14);
}

.command-dashboard .command-hero::before {
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 84%);
}

/* PC support and account pages */
.support-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 18px;
  align-items: center;
  min-height: 188px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(159, 227, 210, .18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(13, 20, 34, .97), rgba(8, 29, 39, .93) 52%, rgba(10, 15, 28, .98)),
    linear-gradient(90deg, rgba(159, 227, 210, .12), rgba(245, 158, 11, .08));
}

.support-hero span,
.support-kpi-grid span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.support-hero h2 {
  margin: 10px 0 8px;
  color: #fff;
  font-size: 32px;
  line-height: 1.16;
}

.support-hero p {
  max-width: 780px;
  margin: 0;
  color: #98a294;
  line-height: 1.75;
}

.support-hero img {
  width: 108px;
  height: 108px;
  justify-self: end;
  object-fit: contain;
}

.support-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.support-kpi-grid div {
  min-width: 0;
  min-height: 94px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .52)),
    rgba(8, 15, 28, .46);
}

.support-kpi-grid strong {
  display: block;
  overflow: hidden;
  margin-top: 9px;
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-section {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .55)),
    rgba(8, 15, 28, .50);
}

.support-section .section-title.compact {
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.support-empty {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .66), rgba(8, 15, 28, .50)),
    rgba(8, 15, 28, .46);
}

.records-hero,
.notice-hero,
.account-setting-hero {
  margin-bottom: 0;
}

.generation-records.support-section {
  padding: 18px;
}

.generation-record-table {
  border-radius: 8px;
  border-color: rgba(148, 163, 184, .14);
  background: rgba(2, 8, 18, .30);
}

.generation-record-table th {
  color: #dff8ff;
  background:
    linear-gradient(90deg, rgba(20, 184, 166, .12), rgba(245, 158, 11, .06)),
    rgba(8, 15, 28, .58);
}

.generation-record-table td {
  background: rgba(8, 15, 28, .20);
}

.record-pager {
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  background: rgba(8, 15, 28, .36);
}

.announcement-list-v2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.announcement-list-v2 .announcement-card {
  min-height: 154px;
  border-color: rgba(148, 163, 184, .14);
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .54)),
    rgba(8, 15, 28, .48);
}

.announcement-list-v2 .announcement-card strong {
  margin-top: 11px;
  font-size: 20px;
}

.announcement-list-v2 .announcement-card p {
  margin-top: 10px;
}

.announcement-list-v2 .announcement-card:hover {
  border-color: rgba(159, 227, 210, .42);
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .12), rgba(8, 15, 28, .60)),
    rgba(8, 15, 28, .54);
}

.vip-service-hero-v2 {
  grid-template-columns: minmax(0, 1fr) 246px;
  min-height: 320px;
  background:
    linear-gradient(135deg, rgba(13, 20, 34, .97), rgba(8, 29, 39, .93) 54%, rgba(10, 15, 28, .98)),
    linear-gradient(90deg, rgba(159, 227, 210, .12), rgba(245, 158, 11, .08));
}

/* PC会员中心把充值和会员购买前置，通用模块标题与重复侧栏不再占用首屏。 */
.vip-center-view > .module-head,
.vip-center-view .module-aside {
  display: none;
}

.vip-center-view .module-layout {
  grid-template-columns: minmax(0, 1fr);
}

.vip-payment-hub {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(480px, 1.28fr);
  min-height: 306px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: #091321;
  box-shadow: 0 20px 42px rgba(0, 0, 0, .20);
}

.vip-payment-hub.has-wechat-pay {
  border-color: rgba(34, 197, 94, .34);
  box-shadow: inset 0 1px 0 rgba(134, 239, 172, .07), 0 20px 42px rgba(0, 0, 0, .22);
}

.vip-payment-account {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border-right: 1px solid rgba(148, 163, 184, .14);
  background:
    linear-gradient(160deg, rgba(15, 118, 110, .18), rgba(8, 15, 28, .38) 54%),
    #0c1726;
}

.vip-payment-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vip-payment-account-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(34, 197, 94, .28);
  border-radius: 999px;
  color: #bbf7d0;
  background: rgba(22, 163, 74, .12);
  font-size: 11px;
  font-weight: 900;
}

.vip-payment-account-head > span::before {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, .10);
  content: "";
}

.vip-plan-link {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(250, 204, 21, .28);
  border-radius: 7px;
  color: #f8e3bb;
  background: rgba(245, 158, 11, .08);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.vip-plan-link:hover {
  border-color: rgba(250, 204, 21, .56);
  background: rgba(245, 158, 11, .14);
}

.vip-payment-account > small {
  margin-top: 34px;
  color: #8fa4b8;
  font-size: 12px;
}

.vip-payment-account > strong {
  overflow-wrap: anywhere;
  margin-top: 7px;
  color: #fff;
  font-size: 38px;
  line-height: 1.15;
}

.vip-payment-account-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: auto;
  padding-top: 22px;
}

.vip-payment-account-facts span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .11);
  border-radius: 7px;
  background: rgba(3, 10, 21, .34);
}

.vip-payment-account-facts small,
.vip-payment-account-facts b {
  display: block;
}

.vip-payment-account-facts small {
  color: #71879c;
  font-size: 10px;
}

.vip-payment-account-facts b {
  overflow: hidden;
  margin-top: 5px;
  color: #dbe7f3;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vip-payment-checkout {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(22, 163, 74, .09), transparent 42%),
    #08111e;
}

.vip-payment-checkout-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.vip-payment-checkout-head span {
  color: #86efac;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.vip-payment-checkout-head h2 {
  margin: 6px 0 0;
  color: #fff;
  font-size: 25px;
  line-height: 1.25;
}

.vip-payment-rate {
  min-width: 190px;
  text-align: right;
}

.vip-payment-rate small,
.vip-payment-rate strong {
  display: block;
}

.vip-payment-rate small {
  color: #7f93a8;
  font-size: 10px;
}

.vip-payment-rate strong {
  margin-top: 5px;
  color: #fcd34d;
  font-size: 15px;
}

.vip-recharge-options-primary {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  margin-top: 20px;
}

.vip-recharge-options-primary > button:not(.btn) {
  position: relative;
  min-height: 72px;
  border-color: rgba(34, 197, 94, .25);
  background: rgba(7, 24, 22, .62);
}

.vip-recharge-options-primary > button:not(.btn):hover,
.vip-recharge-options-primary > button.is-emphasis {
  border-color: rgba(74, 222, 128, .62);
  background: rgba(22, 163, 74, .16);
  box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .08);
}

.vip-recharge-options-primary b {
  color: #fff;
  font-size: 20px;
}

.vip-recharge-options-primary small {
  color: #d3f2e4;
}

.vip-payment-checkout > p {
  margin: 10px 0 0;
  color: #8498ab;
  font-size: 11px;
  line-height: 1.6;
}

.vip-payment-unavailable {
  display: grid;
  min-height: 62px;
  place-items: center;
  border: 1px dashed rgba(148, 163, 184, .20);
  border-radius: 7px;
  color: #8294a7;
}

.vip-payment-support {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid rgba(148, 163, 184, .11);
}

.vip-payment-support img,
.vip-payment-support .vip-qr-placeholder {
  width: 54px;
  height: 54px;
  border-radius: 6px;
}

.vip-payment-support img {
  display: block;
  object-fit: cover;
  background: #fff;
}

.vip-payment-support .vip-qr-placeholder {
  padding: 5px;
  font-size: 9px;
}

.vip-payment-support span,
.vip-payment-support strong,
.vip-payment-support small {
  display: block;
}

.vip-payment-support span {
  color: #7ad9d2;
  font-size: 10px;
  font-weight: 900;
}

.vip-payment-support strong {
  margin-top: 3px;
  color: #e5eef7;
  font-size: 12px;
}

.vip-payment-support small {
  margin-top: 3px;
  color: #71869a;
  font-size: 10px;
}

.vip-payment-support .btn {
  min-width: 92px;
  min-height: 36px;
}

.vip-payment-support.is-highlight {
  border-color: rgba(34, 211, 238, .52);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .08);
}

.vip-membership-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid rgba(250, 204, 21, .24);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, .12), rgba(20, 184, 166, .06)),
    #0a1422;
  text-align: left;
  cursor: pointer;
}

.vip-membership-shortcut span small,
.vip-membership-shortcut span strong {
  display: block;
}

.vip-membership-shortcut span small {
  color: #fcd34d;
  font-size: 10px;
  font-weight: 900;
}

.vip-membership-shortcut span strong {
  margin-top: 4px;
  font-size: 15px;
}

.vip-membership-shortcut > b {
  min-width: 124px;
  padding: 10px 14px;
  border: 1px solid rgba(250, 204, 21, .34);
  border-radius: 7px;
  color: #fff3bd;
  background: rgba(245, 158, 11, .12);
  font-size: 12px;
  text-align: center;
}

.vip-membership-shortcut:hover {
  border-color: rgba(250, 204, 21, .48);
  background:
    linear-gradient(90deg, rgba(245, 158, 11, .17), rgba(20, 184, 166, .09)),
    #0a1422;
}

.vip-plans-panel {
  scroll-margin-top: 104px;
}

.vip-compute-rate-card {
  display: grid;
  gap: 5px;
  width: min(100%, 560px);
  margin-top: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(250, 204, 21, .28);
  border-radius: 8px;
  background: rgba(245, 158, 11, .09);
}

.vip-compute-rate-card span {
  color: #fcd34d;
  font-size: 12px;
  font-weight: 900;
}

.vip-compute-rate-card strong {
  color: #fff;
  font-size: 27px;
  line-height: 1.25;
}

.vip-compute-rate-card small {
  color: #b8c7d8;
  font-size: 12px;
  line-height: 1.6;
}

.vip-service-qr-emphasis {
  border-color: rgba(159, 227, 210, .28);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vip-service-qr-emphasis.is-highlight {
  border-color: rgba(250, 204, 21, .75);
  box-shadow: 0 0 0 4px rgba(250, 204, 21, .10);
  transform: translateY(-2px);
}

.vip-status-grid {
  margin-top: 0;
}

.vip-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.vip-section-heading p {
  max-width: 520px;
  margin: 0;
  color: #98a294;
  font-size: 13px;
  line-height: 1.65;
  text-align: right;
}

.vip-tier-compare-panel {
  padding: 18px;
}

.vip-tier-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.vip-tier-card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(8, 15, 28, .52);
}

.vip-tier-card-member {
  border-color: rgba(159, 227, 210, .28);
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .13), rgba(8, 15, 28, .54)),
    rgba(8, 15, 28, .50);
}

.vip-tier-card.is-current {
  box-shadow: inset 3px 0 0 #9fe3d2;
}

.vip-tier-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.vip-tier-card-head span {
  color: #7ad9d2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.vip-tier-card-head h3 {
  margin: 6px 0 0;
  color: #fff;
  font-size: 24px;
}

.vip-tier-card-head em {
  padding: 5px 9px;
  border: 1px solid rgba(159, 227, 210, .25);
  border-radius: 999px;
  color: #d3f2e4;
  background: rgba(20, 184, 166, .12);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.vip-tier-card > p {
  margin: 14px 0 0;
  color: #98a294;
  line-height: 1.7;
}

.vip-tier-benefits {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
}

.vip-tier-benefits div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(148, 163, 184, .11);
}

.vip-tier-benefits dt,
.vip-tier-benefits dd {
  margin: 0;
  line-height: 1.55;
}

.vip-tier-benefits dt {
  color: #98a294;
  font-size: 13px;
}

.vip-tier-benefits dd {
  color: #e2edf7;
  font-size: 13px;
  font-weight: 800;
}

.vip-tier-card .btn {
  align-self: flex-start;
  min-width: 146px;
  margin-top: auto;
}

.vip-recharge-rule {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(250, 204, 21, .20);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, .10), rgba(20, 184, 166, .07)),
    rgba(8, 15, 28, .50);
}

.vip-recharge-rule > div:first-child span,
.vip-recharge-rule > div:first-child strong {
  display: block;
}

.vip-recharge-rule > div:first-child span {
  color: #fcd34d;
  font-size: 12px;
  font-weight: 900;
}

.vip-recharge-rule > div:first-child strong {
  margin-top: 5px;
  color: #fff;
  font-size: 22px;
}

.vip-recharge-rule p {
  margin: 7px 0 0;
  color: #98a294;
  font-size: 12px;
  line-height: 1.6;
}

.vip-recharge-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vip-recharge-steps span {
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  color: #cfd2c8;
  background: rgba(8, 15, 28, .42);
  font-size: 12px;
}

.vip-summary-row .module-panel.highlight {
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .52)),
    rgba(8, 15, 28, .46);
}

.vip-plans-panel.support-section {
  padding: 18px;
}

.vip-plans-panel .vip-plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vip-plan-card {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  border-color: rgba(148, 163, 184, .14);
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .72), rgba(8, 15, 28, .54)),
    rgba(8, 15, 28, .48);
}

.vip-plan-card.recommended {
  border-color: rgba(110, 231, 183, .34);
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .14), rgba(8, 15, 28, .56)),
    rgba(8, 15, 28, .50);
}

.vip-plan-title {
  padding-right: 62px;
}

.vip-plan-title small {
  display: block;
  margin-top: 7px;
  color: #98a294;
  font-size: 12px;
}

.vip-plan-card .vip-plan-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 16px;
  color: #f5b544;
  font-size: 29px;
  font-weight: 900;
}

.vip-plan-price small {
  font-size: 15px;
}

.vip-plan-card > p {
  min-height: 48px;
}

.vip-plan-benefits {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
}

.vip-plan-benefits div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(148, 163, 184, .10);
}

/* 套餐核心权益保持逐行对齐，较长的设备与声音说明允许自然换行。 */
.vip-plan-benefits div:nth-child(-n+4) {
  margin-top: 6px;
  padding: 10px;
  border: 1px solid rgba(159, 227, 210, .11);
  border-radius: 6px;
  background: rgba(20, 184, 166, .045);
}

.vip-plan-benefits dt,
.vip-plan-benefits dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.vip-plan-benefits dt {
  color: #98a294;
}

.vip-plan-benefits dd {
  overflow-wrap: anywhere;
  color: #dbe7f3;
  font-weight: 800;
}

.vip-plan-card .vip-plan-meta {
  margin-bottom: 15px;
}

.vip-plan-card > .btn {
  width: 100%;
  margin-top: auto;
}

/* 支付入口使用清晰的操作分组，避免微信支付与人工开通状态混淆。 */
.vip-purchase-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px;
  width: 100%;
  margin-top: auto;
}

.vip-purchase-actions .btn {
  width: 100%;
  min-width: 0;
}

.vip-service-payment-entry {
  align-content: center;
  min-height: 220px;
  padding: 22px;
  text-align: left;
}

.vip-service-payment-entry span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.vip-service-payment-entry strong {
  margin-top: 8px;
  color: #fff;
  font-size: 22px;
  line-height: 1.4;
}

.vip-service-payment-entry small {
  margin-top: 10px;
}

.vip-recharge-rule {
  grid-template-columns: 260px minmax(0, 1fr);
}

.vip-recharge-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px;
}

.vip-recharge-options > button:not(.btn) {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(159, 227, 210, .20);
  border-radius: 7px;
  color: #eafcff;
  background: rgba(8, 15, 28, .62);
  text-align: left;
  cursor: pointer;
}

.vip-recharge-options > button:not(.btn):hover,
.vip-recharge-options > button.is-emphasis {
  border-color: rgba(159, 227, 210, .58);
  background: rgba(20, 184, 166, .13);
}

.vip-recharge-options b {
  font-size: 17px;
}

.vip-recharge-options small {
  color: #98a294;
  font-size: 11px;
}

/* PC微信Native收银台。二维码保持固定尺寸，轮询状态变化不会引发布局跳动。 */
.wechat-payment-modal {
  width: min(720px, calc(100vw - 32px));
  padding: 26px;
  border-color: rgba(159, 227, 210, .30);
  background: #0b1422;
}

.wechat-payment-heading span {
  color: #7ad9d2;
  font-size: 11px;
  font-weight: 900;
}

.wechat-payment-heading h3 {
  margin: 7px 42px 0 0;
}

.wechat-payment-heading p {
  margin: 8px 42px 0 0;
  color: #91a4b8;
}

.wechat-payment-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-top: 22px;
}

.wechat-payment-qr {
  display: grid;
  place-items: center;
  width: 240px;
  height: 240px;
  padding: 12px;
  border: 1px solid rgba(159, 227, 210, .28);
  border-radius: 8px;
  background: #fff;
  transition: opacity .2s ease;
}

.wechat-payment-qr img,
.wechat-payment-qr canvas {
  width: 216px !important;
  height: 216px !important;
}

.wechat-payment-qr.is-paid {
  opacity: .24;
}

.wechat-payment-summary > span {
  color: #91a4b8;
  font-size: 12px;
}

.wechat-payment-summary > strong {
  display: block;
  margin-top: 4px;
  color: #f5b544;
  font-size: 36px;
}

.wechat-payment-summary > small {
  display: block;
  margin-top: 5px;
  color: #d8e7f3;
}

.wechat-payment-summary dl {
  display: grid;
  gap: 0;
  margin: 20px 0 0;
}

.wechat-payment-summary dl div {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(148, 163, 184, .13);
}

.wechat-payment-summary dt,
.wechat-payment-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.wechat-payment-summary dt {
  color: #8295a9;
}

.wechat-payment-summary dd {
  color: #eef8ff;
  font-weight: 800;
}

.wechat-payment-notice {
  min-height: 42px;
  margin-top: 18px;
  padding: 11px 13px;
  border: 1px solid rgba(56, 189, 248, .18);
  border-radius: 7px;
  color: #b9c9d8;
  background: rgba(14, 165, 233, .07);
}

.wechat-payment-notice.is-success {
  border-color: rgba(52, 211, 153, .30);
  color: #d3f2e4;
  background: rgba(16, 185, 129, .10);
}

.wechat-payment-notice.is-error {
  border-color: rgba(248, 113, 113, .28);
  color: #fecaca;
  background: rgba(239, 68, 68, .09);
}

.wechat-payment-loading {
  display: grid;
  place-items: center;
  min-height: 260px;
  color: #e6f6ff;
}

.wechat-payment-loading i {
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border: 3px solid rgba(159, 227, 210, .18);
  border-top-color: #9fe3d2;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.wechat-payment-loading small {
  margin-top: 6px;
  color: #8295a9;
}

/* 后台支付配置与订单状态。 */
.payment-readiness {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 14px 0;
  padding: 15px 17px;
  border: 1px solid #d6dee8;
  border-radius: 7px;
  background: #f6f5ef;
}

.payment-readiness span,
.payment-readiness strong {
  display: block;
}

.payment-readiness span {
  color: #647063;
  font-size: 12px;
}

.payment-readiness strong {
  margin-top: 4px;
  color: #b45309;
  font-size: 20px;
}

.payment-readiness.is-ready {
  border-color: #d3f2e4;
  background: #ecfdf5;
}

.payment-readiness.is-ready strong {
  color: #047857;
}

.payment-readiness p {
  margin: 0;
  color: #4d584a;
  line-height: 1.65;
}

.payment-config-form .admin-card {
  margin: 0;
}

.payment-order-filter {
  grid-template-columns: minmax(280px, 1fr) 160px 160px auto;
}

.payment-order-table td strong,
.payment-order-table td small {
  display: block;
}

.payment-reconcile-actions,
.admin-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.payment-reconcile-actions {
  margin: 14px 0;
}

.payment-log-filter {
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) auto;
}

.payment-reconcile-actions span,
#paymentOrderSyncResult {
  color: #4d584a;
  font-size: 13px;
}

.payment-detail-grid {
  margin: 16px 0;
}

.payment-order-detail-card,
.payment-log-card {
  margin-top: 16px;
}

.payment-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 18px 0;
}

.payment-detail-list div {
  padding: 10px 0;
  border-bottom: 1px solid #e5e7de;
}

.payment-detail-list dt {
  color: #647063;
  font-size: 12px;
}

.payment-detail-list dd {
  margin: 4px 0 0;
  color: #142624;
  overflow-wrap: anywhere;
}

.payment-json-view {
  max-width: min(760px, 75vw);
  max-height: 320px;
  margin: 8px 0 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid #dbe4ef;
  background: #f6f5ef;
  color: #25344a;
  font: 12px/1.65 Consolas, Monaco, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.payment-log-table details summary {
  color: #0c6b60;
  cursor: pointer;
}

.payment-log-table td strong,
.payment-log-table td small {
  display: block;
}

.payment-log-table td small {
  margin-top: 3px;
  color: #647063;
}

.payment-status.status-error,
.payment-status.status-failed {
  border-color: #fecaca;
  background: #fff1f2;
  color: #be123c;
}

.payment-status.status-warning {
  border-color: #f8e3bb;
  background: #fffbeb;
  color: #a16207;
}

@media (max-width: 760px) {
  .payment-log-filter {
    grid-template-columns: 1fr;
  }

  .payment-detail-list {
    grid-template-columns: 1fr;
  }

  .payment-json-view {
    max-width: 82vw;
  }
}

.payment-order-table td small {
  margin-top: 5px;
  color: #647063;
}

.payment-status {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 6px;
  color: #92400e;
  background: #fef3c7;
  font-weight: 800;
}

.payment-status.status-paid {
  color: #047857;
  background: #d1fae5;
}

.payment-status.status-failed,
.payment-status.status-expired,
.payment-status.status-closed {
  color: #991b1b;
  background: #fee2e2;
}

@media (max-width: 760px) {
  .wechat-payment-body {
    grid-template-columns: 1fr;
  }

  .wechat-payment-qr {
    margin: 0 auto;
  }

  .vip-recharge-rule {
    grid-template-columns: 1fr;
  }
}

.account-setting-panel {
  padding: 18px;
}

.account-field-matrix {
  margin-top: 14px;
}

.account-field-matrix div {
  min-height: 96px;
  border-color: rgba(148, 163, 184, .12);
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .68), rgba(8, 15, 28, .48)),
    rgba(8, 15, 28, .42);
}

.account-setting-note {
  padding: 16px 18px;
  border: 1px solid rgba(245, 158, 11, .18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, .10), rgba(20, 184, 166, .08)),
    rgba(8, 15, 28, .46);
}

.account-setting-note strong {
  color: #fff;
  font-size: 17px;
}

.account-setting-note p {
  margin: 8px 0 0;
  color: #98a294;
  line-height: 1.7;
}

/* 账号设置聚合资料与设备安全，沿用工作台深色信息面板和青色状态语义。 */
.account-security-hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: stretch;
}

.account-current-session {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(159, 227, 210, .25);
  border-radius: 8px;
  background: rgba(20, 184, 166, .09);
}

.account-current-session span,
.account-device-heading span,
.account-device-modal-kicker {
  color: #7ad9d2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.account-current-session strong {
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 20px;
}

.account-current-session small {
  color: #a8bacd;
  line-height: 1.6;
}

.account-security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.account-profile-list,
.account-limit-list {
  display: grid;
  margin-top: 10px;
}

.account-profile-list > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .11);
}

.account-profile-list span,
.account-limit-list span {
  color: #98a294;
  font-size: 13px;
}

.account-profile-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #eff7ff;
  text-align: right;
}

.account-limit-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.account-limit-list > div {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 15px 12px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 8px;
  background: rgba(2, 8, 18, .35);
}

.account-limit-list strong {
  color: #9fe3d2;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.account-limit-list small {
  color: #7890a9;
  line-height: 1.5;
}

.account-device-panel {
  padding: 18px;
}

.account-device-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.account-device-heading h2 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 21px;
}

.account-device-heading p {
  margin: 7px 0 0;
  color: #98a294;
  font-size: 13px;
  line-height: 1.6;
}

.account-device-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.account-device-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 8px;
  background: rgba(2, 8, 18, .34);
}

.account-device-row.is-current {
  border-color: rgba(159, 227, 210, .36);
  box-shadow: inset 3px 0 0 rgba(159, 227, 210, .85);
  background: rgba(20, 184, 166, .07);
}

.account-device-type {
  display: grid;
  place-items: center;
  width: 52px;
  height: 44px;
  border: 1px solid rgba(96, 165, 250, .26);
  border-radius: 8px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, .10);
  font-size: 12px;
  font-weight: 900;
}

.account-device-main {
  min-width: 0;
}

.account-device-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.account-device-title strong {
  color: #f3f8ff;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.account-device-title em {
  padding: 3px 7px;
  border: 1px solid rgba(159, 227, 210, .28);
  border-radius: 999px;
  color: #d3f2e4;
  background: rgba(20, 184, 166, .10);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.account-device-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 7px;
  color: #a6b7c9;
  font-size: 12px;
}

.account-device-main > small {
  display: block;
  margin-top: 5px;
  color: #71869c;
  line-height: 1.55;
}

.account-device-action span {
  color: #9fe3d2;
  font-size: 12px;
  font-weight: 900;
}

.account-device-remove,
.account-device-danger {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(248, 113, 113, .34);
  border-radius: 8px;
  color: #fecaca;
  background: rgba(127, 29, 29, .14);
  cursor: pointer;
  font-weight: 900;
}

.account-device-remove:hover,
.account-device-danger:hover {
  border-color: rgba(248, 113, 113, .64);
  color: #fff;
  background: rgba(185, 28, 28, .24);
}

.account-device-remove.is-current-action {
  border-color: rgba(245, 158, 11, .34);
  color: #f8e3bb;
  background: rgba(146, 64, 14, .13);
}

.account-device-remove.is-current-action:hover {
  border-color: rgba(245, 158, 11, .62);
  color: #fff;
  background: rgba(180, 83, 9, .22);
}

.account-device-remove:disabled,
.account-device-danger:disabled {
  cursor: wait;
  opacity: .58;
}

.account-device-empty,
.account-device-legacy {
  margin: 0;
  padding: 15px;
  border: 1px dashed rgba(148, 163, 184, .18);
  border-radius: 8px;
  color: #98a294;
  text-align: center;
}

.account-device-refresh-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fecaca;
  background: rgba(127, 29, 29, .16);
}

/* 邀请中心复用账号设置的深色工作台语义，突出可复制的邀请码与实际到账记录。 */
.account-invite-panel {
  display: grid;
  gap: 18px;
}

.account-invite-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.account-invite-heading > div:first-child > span {
  color: #57d9c8;
  font-size: 12px;
  font-weight: 800;
}

.account-invite-heading h2 {
  margin: 5px 0 6px;
  font-size: 24px;
}

.account-invite-heading p {
  margin: 0;
  color: #98a294;
}

.account-invite-total {
  min-width: 190px;
  padding-left: 22px;
  border-left: 1px solid rgba(121, 148, 168, .25);
}

.account-invite-total span,
.account-invite-total small {
  display: block;
  color: #8ea4b7;
}

.account-invite-total strong {
  display: block;
  margin: 5px 0;
  color: #f7fbff;
  font-size: 24px;
}

.account-invite-share-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
  gap: 12px;
}

.account-invite-share-grid > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(121, 148, 168, .2);
  border-radius: 8px;
  background: rgba(10, 28, 41, .7);
}

.account-invite-share-grid span {
  grid-column: 1 / -1;
  color: #8ea4b7;
  font-size: 12px;
}

.account-invite-share-grid strong {
  min-width: 0;
  overflow: hidden;
  color: #f7fbff;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-invite-share-grid > div:first-child strong {
  overflow: visible;
  text-overflow: clip;
}

.account-invite-share-grid .account-invite-link {
  font-size: 13px;
  font-weight: 600;
}

.account-invite-history {
  border-top: 1px solid rgba(121, 148, 168, .18);
  padding-top: 14px;
}

.account-invite-history-title,
.account-invite-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) 140px;
  align-items: center;
  gap: 14px;
}

.account-invite-history-title {
  margin-bottom: 8px;
}

.account-invite-history-title span {
  grid-column: 2 / -1;
  color: #8ea4b7;
  font-size: 12px;
  text-align: right;
}

.account-invite-history-row {
  padding: 11px 0;
  border-top: 1px solid rgba(121, 148, 168, .12);
}

.account-invite-history-row strong {
  color: #57d9c8;
  text-align: right;
}

.account-invite-history-row small {
  color: #8ea4b7;
  text-align: right;
}

.account-invite-empty,
.account-invite-upgrade {
  padding: 18px;
  border: 1px dashed rgba(121, 148, 168, .28);
  border-radius: 8px;
  color: #98a294;
  text-align: center;
}

.auth-invite-field small {
  display: block;
  margin-top: 7px;
  color: #91a3b5;
  font-size: 12px;
  line-height: 1.55;
}

.auth-invite-field input[readonly] {
  border-color: rgba(87, 217, 200, .52);
  color: #b9fff5;
}

.auth-invite-welcome {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid rgba(251, 191, 36, .28);
  border-radius: 8px;
  background: #13242d;
}

.auth-invite-welcome[hidden] {
  display: none;
}

.auth-invite-welcome-avatars {
  display: flex;
}

.auth-invite-welcome-avatars img {
  width: 46px;
  height: 46px;
  border: 2px solid #13242d;
  border-radius: 50%;
  object-fit: cover;
}

.auth-invite-welcome-avatars img + img {
  margin-left: -17px;
}

.auth-invite-welcome span,
.auth-invite-welcome strong,
.auth-invite-welcome p {
  display: block;
}

.auth-invite-welcome span {
  color: #9fe3d2;
  font-size: 10px;
  font-weight: 900;
}

.auth-invite-welcome strong {
  margin-top: 3px;
  color: #fff;
  font-size: 15px;
}

.auth-invite-welcome p {
  margin: 5px 0 0;
  color: #9fb3c2;
  font-size: 11px;
  line-height: 1.55;
}

.auth-invite-welcome p b {
  color: #f5b544;
}

/* 独立邀请页把“分享动作”放在首屏，奖励、邀请码和记录按推广路径依次展开。 */
.invite-promo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr);
  align-items: stretch;
  min-height: 338px;
  overflow: hidden;
  border: 1px solid rgba(159, 227, 210, .24);
  border-radius: 8px;
  background: #0b1b29;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .25);
}

.invite-promo-copy {
  padding: 34px;
}

.invite-promo-copy > span,
.invite-section-heading span,
.invite-guide-panel > span {
  color: #9fe3d2;
  font-size: 11px;
  font-weight: 900;
}

.invite-promo-copy h2 {
  margin: 10px 0 12px;
  color: #f7fbff;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0;
}

.invite-promo-copy h2 b {
  color: #f5b544;
  font-weight: 950;
}

.invite-promo-copy > p {
  max-width: 650px;
  margin: 0;
  color: #a8bbcc;
  font-size: 14px;
  line-height: 1.8;
}

.invite-promo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.invite-promo-actions .btn {
  min-height: 46px;
  padding: 0 18px;
}

.invite-promo-actions .btn img {
  width: 17px;
  height: 17px;
  margin-right: 7px;
  filter: brightness(0) saturate(100%);
}

.invite-promo-actions .btn-poster {
  border-color: rgba(251, 191, 36, .42);
  color: #fff1b8;
  background: rgba(251, 191, 36, .1);
}

.invite-promo-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.invite-promo-steps span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c7d7e5;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.invite-promo-steps span b {
  color: #f5b544;
  font-size: 11px;
}

.invite-promo-steps i {
  width: 24px;
  height: 1px;
  background: rgba(148, 163, 184, .35);
}

.invite-promo-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 30px;
  border-left: 1px solid rgba(159, 227, 210, .18);
  background: #102a34;
}

.invite-avatar-stack {
  display: flex;
  margin-bottom: 30px;
}

.invite-avatar-stack img {
  width: 62px;
  height: 62px;
  margin-right: -14px;
  border: 3px solid #102a34;
  border-radius: 50%;
  object-fit: cover;
}

.invite-promo-visual > span,
.invite-promo-visual > small {
  color: #9eb4c2;
  font-size: 12px;
}

.invite-promo-visual > strong {
  display: block;
  max-width: 100%;
  margin: 7px 0;
  overflow: hidden;
  color: #fff7d6;
  font-size: 31px;
  letter-spacing: 0;
  text-overflow: ellipsis;
}

.invite-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(10, 24, 37, .76);
}

.invite-stats-row > div {
  min-width: 0;
  padding: 18px 20px;
  border-left: 1px solid rgba(148, 163, 184, .14);
}

.invite-stats-row > div:first-child {
  border-left: 0;
}

.invite-stats-row span,
.invite-stats-row small {
  display: block;
  color: #8fa5b7;
  font-size: 11px;
}

.invite-stats-row strong {
  display: block;
  margin: 5px 0 3px;
  overflow: hidden;
  color: #f4f8fb;
  font-size: 24px;
  text-overflow: ellipsis;
}

.invite-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr);
  gap: 14px;
  margin-top: 14px;
}

.invite-share-panel,
.invite-record-panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(10, 24, 37, .78);
}

.invite-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.invite-section-heading h3 {
  margin: 4px 0 0;
  color: #f4f8fb;
  font-size: 19px;
}

.invite-section-heading small {
  color: #8298aa;
  font-size: 11px;
}

.invite-code-box,
.invite-link-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 15px;
  border: 1px solid rgba(159, 227, 210, .18);
  border-radius: 8px;
  background: #0c2230;
}

.invite-code-box span,
.invite-link-box > span {
  display: block;
  color: #8fa6b6;
  font-size: 11px;
}

.invite-code-box strong {
  display: block;
  margin-top: 4px;
  color: #fff1b8;
  font-size: 25px;
  letter-spacing: 0;
}

.invite-code-box button,
.invite-link-box button,
.invite-copy-message {
  min-height: 39px;
  border: 1px solid rgba(159, 227, 210, .28);
  border-radius: 7px;
  color: #d9fff8;
  background: rgba(20, 184, 166, .1);
  cursor: pointer;
  font-weight: 800;
}

.invite-poster-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding: 14px 15px;
  border-top: 1px solid rgba(159, 227, 210, .16);
  background: rgba(159, 227, 210, .035);
}

.invite-poster-entry span,
.invite-poster-entry strong {
  display: block;
}

.invite-poster-entry span {
  color: #9fe3d2;
  font-size: 11px;
  font-weight: 900;
}

.invite-poster-entry strong {
  margin-top: 4px;
  color: #b9ccd8;
  font-size: 12px;
}

.invite-poster-entry button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  color: #06151c;
  background: #9fe3d2;
  cursor: pointer;
  font-weight: 900;
}

.invite-code-box button,
.invite-link-box button {
  padding: 0 13px;
}

.invite-link-box {
  margin-top: 10px;
}

.invite-link-box > span {
  grid-column: 1 / -1;
}

.invite-link-box strong {
  min-width: 0;
  overflow: hidden;
  color: #d3e2ec;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-copy-message {
  width: 100%;
  margin-top: 10px;
  border-color: rgba(251, 191, 36, .28);
  color: #fff0b3;
  background: rgba(251, 191, 36, .08);
}

.invite-record-list {
  max-height: 286px;
  overflow-y: auto;
}

.invite-record-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 57px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.invite-record-row:first-child {
  border-top: 0;
}

.invite-record-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(159, 227, 210, .25);
  border-radius: 50%;
  color: #bffaf1;
  background: #102d39;
  font-weight: 900;
}

.invite-record-row div strong,
.invite-record-row div small {
  display: block;
}

.invite-record-row div strong {
  color: #eaf3f9;
  font-size: 13px;
}

.invite-record-row div small {
  margin-top: 3px;
  color: #7890a3;
  font-size: 10px;
}

.invite-record-row > b {
  color: #65e6cc;
  font-size: 12px;
}

.invite-record-empty {
  padding: 22px 12px;
  text-align: center;
}

.invite-record-empty img {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

.invite-record-empty strong,
.invite-record-empty p {
  display: block;
}

.invite-record-empty strong {
  margin-top: 7px;
  color: #e9f4fa;
}

.invite-record-empty p {
  margin: 6px 0 0;
  color: #8096a7;
  font-size: 12px;
  line-height: 1.6;
}

.invite-guide-panel {
  position: sticky;
  top: 92px;
  padding: 24px;
  border: 1px solid rgba(251, 191, 36, .2);
  border-radius: 8px;
  background: #13222c;
}

.invite-guide-panel > img {
  display: block;
  width: 112px;
  height: 112px;
  margin: -8px auto 6px;
  object-fit: contain;
}

.invite-guide-panel h3 {
  margin: 7px 0 8px;
  color: #f7fbff;
  font-size: 20px;
}

.invite-guide-panel > p {
  margin: 0;
  color: #98adbd;
  font-size: 13px;
  line-height: 1.7;
}

.invite-guide-panel dl {
  margin: 18px 0 0;
}

.invite-guide-panel dl div {
  padding: 11px 0;
  border-top: 1px solid rgba(148, 163, 184, .13);
}

.invite-guide-panel dt,
.invite-guide-panel dd {
  margin: 0;
}

.invite-guide-panel dt {
  color: #8097a8;
  font-size: 11px;
}

.invite-guide-panel dd {
  margin-top: 3px;
  color: #e9f2f7;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .invite-promo-hero {
    grid-template-columns: 1fr;
  }

  .invite-promo-visual {
    border-top: 1px solid rgba(159, 227, 210, .18);
    border-left: 0;
  }

  .invite-content-grid {
    grid-template-columns: 1fr;
  }

  .account-invite-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-invite-total {
    width: 100%;
    padding: 12px 0 0;
    border-top: 1px solid rgba(121, 148, 168, .25);
    border-left: 0;
  }

  .account-invite-share-grid {
    grid-template-columns: 1fr;
  }
}

.account-device-legacy {
  margin-top: 12px;
  border-color: rgba(245, 158, 11, .25);
  color: #f8e3bb;
  background: rgba(245, 158, 11, .07);
}

.account-device-modal-target {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(2, 8, 18, .42);
}

.account-device-modal-target > b {
  display: grid;
  place-items: center;
  width: 48px;
  height: 42px;
  border-radius: 8px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, .12);
  font-size: 12px;
}

.account-device-modal-target strong,
.account-device-modal-target small {
  display: block;
  overflow-wrap: anywhere;
}

.account-device-modal-target strong {
  color: #fff;
}

.account-device-modal-target small {
  margin-top: 5px;
  color: #98a294;
}

.account-device-modal-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fecaca;
  background: rgba(127, 29, 29, .16);
}

@media (max-width: 1440px) {
  .support-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .announcement-list-v2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .support-hero {
    grid-template-columns: 1fr;
  }

  .support-hero img {
    justify-self: start;
  }

  .support-kpi-grid {
    grid-template-columns: 1fr;
  }

  .vip-service-hero,
  .vip-payment-hub,
  .vip-tier-compare-grid,
  .vip-recharge-rule {
    grid-template-columns: 1fr;
  }

  .vip-payment-account {
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
  }

  .vip-service-qr {
    min-height: 0;
  }

  .vip-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .vip-section-heading p {
    max-width: none;
    text-align: left;
  }

  .vip-recharge-rule .btn {
    justify-self: start;
  }

  .account-security-hero,
  .account-security-grid {
    grid-template-columns: 1fr;
  }

  .account-current-session {
    min-height: 112px;
  }
}

@media (max-width: 760px) {
  .vip-plans-panel .vip-plan-grid {
    grid-template-columns: 1fr;
  }

  .vip-payment-account,
  .vip-payment-checkout {
    padding: 18px;
  }

  .vip-payment-account-facts {
    grid-template-columns: 1fr;
  }

  .vip-payment-checkout-head,
  .vip-membership-shortcut {
    align-items: flex-start;
    flex-direction: column;
  }

  .vip-payment-rate {
    text-align: left;
  }

  .vip-payment-support {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .vip-payment-support .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .vip-membership-shortcut > b {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .account-limit-list {
    grid-template-columns: 1fr;
  }

  .account-device-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .account-device-heading .btn {
    align-self: flex-start;
  }

  .account-device-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .account-device-type {
    width: 44px;
  }

  .account-device-action {
    grid-column: 2;
  }
}

/* PC account strategy studio */
.account-plan-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  min-height: 250px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(159, 227, 210, .18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(13, 20, 34, .97), rgba(8, 29, 39, .94) 52%, rgba(10, 15, 28, .98)),
    linear-gradient(90deg, rgba(159, 227, 210, .12), rgba(245, 158, 11, .08));
}

.account-plan-hero-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.account-plan-hero-copy span,
.account-plan-stats span,
.account-plan-section-head span,
.account-plan-side-flow > span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.account-plan-hero-copy h2 {
  margin: 12px 0 10px;
  color: #fff;
  font-size: 34px;
  line-height: 1.16;
}

.account-plan-hero-copy p {
  max-width: 760px;
  margin: 0;
  color: #98a294;
  line-height: 1.75;
}

.account-plan-hero-actions {
  margin-top: 20px;
}

.account-plan-hero-actions .btn {
  min-width: 132px;
  min-height: 46px;
  border-radius: 8px;
}

.account-plan-hero-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .68), rgba(8, 15, 28, .48)),
    rgba(8, 15, 28, .42);
  text-align: center;
}

.account-plan-hero-card img,
.account-plan-prep img,
.account-plan-empty img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.account-plan-hero-card span {
  color: #f5b544;
  font-size: 12px;
  font-weight: 900;
}

.account-plan-hero-card strong {
  overflow: hidden;
  max-width: 100%;
  color: #fff;
  font-size: 22px;
  line-height: 1.24;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-plan-hero-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #98a294;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.account-plan-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.account-plan-stats div {
  min-width: 0;
  min-height: 94px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .52)),
    rgba(8, 15, 28, .46);
}

.account-plan-stats strong {
  display: block;
  overflow: hidden;
  margin-top: 9px;
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-plan-result {
  display: grid;
  gap: 14px;
}

.account-plan-result section {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .55)),
    rgba(8, 15, 28, .50);
}

.account-plan-section-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 5px 12px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  background:
    linear-gradient(90deg, rgba(20, 184, 166, .12), rgba(245, 158, 11, .06)),
    rgba(2, 8, 18, .22);
}

.account-plan-section-head span {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  color: #06231f;
  background: linear-gradient(135deg, #8fdfc9, #7ad9d2);
}

.account-plan-section-head h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.25;
}

.account-plan-section-head p {
  margin: 0;
  color: #98a294;
  line-height: 1.6;
}

.account-plan-result .ip-plan-row {
  margin: 0 18px;
}

.account-plan-side-profile {
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .12), rgba(8, 15, 28, .58)),
    rgba(8, 15, 28, .54);
}

.account-plan-tags span {
  border: 1px solid rgba(159, 227, 210, .16);
  border-radius: 8px;
}

.account-plan-side-flow {
  display: grid;
  gap: 10px;
}

.account-plan-side-flow div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  background: rgba(8, 15, 28, .42);
}

.account-plan-side-flow strong {
  display: grid;
  place-items: center;
  width: 46px;
  height: 34px;
  border-radius: 8px;
  color: #06231f;
  background: #8fdfc9;
  font-size: 13px;
}

.account-plan-side-flow p,
.account-plan-side-billing p {
  margin: 0;
  color: #cfd2c8;
  line-height: 1.55;
}

.account-plan-side-billing {
  border-color: rgba(245, 158, 11, .18);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, .08), rgba(8, 15, 28, .54)),
    rgba(8, 15, 28, .50);
}

.account-plan-prep,
.account-plan-empty {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .66), rgba(8, 15, 28, .50)),
    rgba(8, 15, 28, .46);
}

.account-plan-prep .btn,
.account-plan-empty .btn {
  margin-top: 14px;
}

@media (max-width: 1440px) {
  .account-plan-hero {
    grid-template-columns: 1fr;
  }

  .account-plan-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .account-plan-stats {
    grid-template-columns: 1fr;
  }

  .account-plan-section-head {
    grid-template-columns: 1fr;
  }

  .account-plan-section-head span {
    grid-row: auto;
  }
}

/* PC IP persona studio */
.ip-studio-hero {
  align-items: stretch;
  min-height: 164px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(13, 20, 34, .96), rgba(8, 29, 39, .92) 55%, rgba(10, 15, 28, .98)),
    linear-gradient(90deg, rgba(159, 227, 210, .10), rgba(245, 158, 11, .08));
}

.ip-studio-hero > div {
  display: grid;
  align-content: center;
  min-width: 0;
}

.ip-studio-hero strong {
  font-size: 30px;
  line-height: 1.18;
}

.ip-studio-hero p {
  max-width: 760px;
  margin: 10px 0 0;
  color: #98a294;
  line-height: 1.75;
}

.ip-studio-hero .btn {
  align-self: center;
  min-width: 132px;
  min-height: 46px;
  border-radius: 8px;
}

.ip-studio-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ip-studio-stats div {
  min-width: 0;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .52)),
    rgba(8, 15, 28, .48);
}

.ip-studio-stats span,
.ip-card-persona small,
.ip-form-cover span,
.ip-form-section-head span,
.ip-plan-section-head span,
.ip-side-tags span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.ip-studio-stats strong {
  display: block;
  overflow: hidden;
  margin-top: 9px;
  color: #fff;
  font-size: 22px;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-profile-card-v2 {
  position: relative;
  min-height: 286px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .76), rgba(8, 15, 28, .58)),
    rgba(8, 15, 28, .52);
}

.ip-profile-card-v2::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #8fdfc9, #7ad9d2, #f5b544);
  content: "";
  opacity: .72;
}

.ip-profile-card-v2.is-default {
  border-color: rgba(110, 231, 183, .38);
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .13), rgba(8, 15, 28, .58)),
    rgba(8, 15, 28, .55);
}

.ip-profile-card-v2 .ip-card-head {
  position: relative;
  z-index: 1;
}

.ip-card-head i.is-ready {
  color: #06231f;
  background: #8fdfc9;
}

.ip-card-head i.is-default-badge {
  color: #06231f;
  background: linear-gradient(135deg, #8fdfc9, #7ad9d2);
}

.ip-card-head i.is-planning {
  color: #132523;
  background: #f5b544;
}

.ip-card-head i.is-failed {
  color: #fff1f2;
  background: rgba(244, 63, 94, .38);
}

.ip-card-head i.is-waiting {
  color: #d9efea;
  background: rgba(148, 163, 184, .16);
}

.ip-card-persona {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.ip-card-avatar,
.ip-detail-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border: 1px solid rgba(159, 227, 210, .22);
  border-radius: 8px;
  background: rgba(2, 8, 18, .26);
}

.ip-card-avatar img,
.ip-detail-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .72;
}

.ip-card-avatar b,
.ip-detail-avatar b {
  position: relative;
  z-index: 1;
  color: #e6fffb;
  font-size: 20px;
  line-height: 1;
}

.ip-card-persona strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 21px;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-card-persona small {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-profile-card-v2 > p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 54px;
  margin: 16px 0 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ip-profile-card-v2 .ip-card-meta {
  margin-top: 14px;
}

.ip-profile-card-v2 .ip-card-actions {
  gap: 8px;
}

.ip-profile-card-v2 .ip-card-actions .btn {
  min-width: 84px;
  border-radius: 8px;
}

.ip-side-focus {
  background:
    linear-gradient(180deg, rgba(20, 184, 166, .12), rgba(8, 15, 28, .58)),
    rgba(8, 15, 28, .54);
}

.ip-side-tags,
.ip-guide-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.ip-side-tags span,
.ip-guide-list span {
  padding: 7px 9px;
  border: 1px solid rgba(159, 227, 210, .16);
  border-radius: 8px;
  background: rgba(20, 184, 166, .08);
}

.ip-side-flow {
  display: grid;
  gap: 10px;
}

.ip-side-flow div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  background: rgba(8, 15, 28, .42);
}

.ip-side-flow strong {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #06231f;
  background: #8fdfc9;
}

.ip-side-flow p {
  margin: 0;
  color: #cfd2c8;
  line-height: 1.5;
}

.ip-form-v2 {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

.ip-form-cover,
.ip-form-section {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(20, 38, 36, .62);
}

.ip-form-cover {
  min-height: 150px;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .14), rgba(245, 158, 11, .06)),
    rgba(20, 38, 36, .62);
}

.ip-form-cover strong {
  display: block;
  margin-top: 9px;
  color: #fff;
  font-size: 28px;
  line-height: 1.22;
}

.ip-form-cover p {
  max-width: 760px;
  margin: 10px 0 0;
  color: #98a294;
  line-height: 1.75;
}

.ip-form-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.ip-form-section-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.ip-form-section-head span {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #06231f;
  background: #8fdfc9;
}

.ip-form-section-head strong {
  color: #fff;
  font-size: 19px;
  line-height: 1.25;
}

.ip-form-section-head p {
  margin: 0;
  color: #98a294;
  line-height: 1.6;
}

.ip-form-v2 input,
.ip-form-v2 select,
.ip-form-v2 textarea {
  border-radius: 8px;
  background: rgba(2, 8, 18, .45);
}

.ip-form-guide {
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .58)),
    rgba(8, 15, 28, .54);
}

.ip-info-card-v2 {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 138px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(245, 158, 11, .05)),
    rgba(20, 38, 36, .62);
}

.ip-info-card-v2 h2 {
  font-size: 30px;
  line-height: 1.16;
}

.ip-info-card-v2 p {
  margin: 8px 0 0;
  color: #98a294;
  line-height: 1.7;
}

.ip-base-grid-v2 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ip-base-grid-v2 div {
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .52)),
    rgba(8, 15, 28, .48);
}

.ip-plan-v2 section {
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .70), rgba(8, 15, 28, .55)),
    rgba(8, 15, 28, .50);
}

.ip-plan-section-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 5px 12px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  background: rgba(2, 8, 18, .22);
}

.ip-plan-section-head span {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  color: #06231f;
  background: linear-gradient(135deg, #8fdfc9, #7ad9d2);
}

.ip-plan-section-head h2 {
  margin: 0;
  font-size: 22px;
}

.ip-plan-section-head p {
  margin: 0;
  color: #98a294;
  line-height: 1.6;
}

.ip-plan-v2 .ip-plan-row {
  margin: 0 18px;
}

.ip-empty-state {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .66), rgba(8, 15, 28, .50)),
    rgba(8, 15, 28, .46);
}

@media (max-width: 1440px) {
  .ip-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ip-base-grid-v2,
  .ip-studio-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .ip-form-section,
  .ip-base-grid-v2,
  .ip-studio-stats,
  .ip-profile-grid {
    grid-template-columns: 1fr;
  }

  .ip-info-card-v2 {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .ip-info-card-v2 > i,
  .ip-info-card-v2 > .btn {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .ip-plan-row {
    grid-template-columns: 1fr;
  }
}

.plan-editing-status {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(159, 227, 210, .24);
  border-radius: 8px;
  color: #c8efe6;
  background: rgba(20, 184, 166, .10);
  font-size: 13px;
  font-weight: 800;
}

.plan-edit-form {
  display: grid;
  gap: 14px;
}

.plan-edit-toolbar,
.plan-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(159, 227, 210, .24);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(20, 184, 166, .16), rgba(20, 38, 36, .86) 58%),
    rgba(8, 15, 28, .92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.plan-edit-toolbar {
  position: sticky;
  top: 10px;
  z-index: 12;
}

.plan-edit-toolbar span,
.plan-edit-context span {
  color: #7ad9d2;
  font-size: 12px;
  font-weight: 900;
}

.plan-edit-toolbar strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.plan-edit-toolbar p {
  margin: 5px 0 0;
  color: #a9bacb;
  line-height: 1.55;
}

.plan-edit-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.plan-edit-actions .btn {
  min-width: 92px;
  border-radius: 8px;
}

.plan-edit-context {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(20, 38, 36, .62);
}

.plan-edit-context strong {
  color: #fff;
  font-size: 16px;
}

.plan-edit-context small {
  grid-column: 2;
  color: #8fa2b5;
  line-height: 1.5;
}

.plan-edit-error {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(251, 113, 133, .28);
  border-radius: 8px;
  color: #fecdd3;
  background: rgba(190, 24, 93, .12);
}

.plan-edit-sections {
  display: grid;
  gap: 14px;
}

.plan-edit-section {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .72), rgba(8, 15, 28, .58)),
    rgba(8, 15, 28, .52);
}

.plan-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.plan-edit-field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.plan-edit-field.is-wide {
  grid-column: 1 / -1;
}

.plan-edit-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #e5edf5;
  font-size: 14px;
  font-weight: 800;
}

.plan-edit-field > span small {
  flex: 0 0 auto;
  color: #7ad9d2;
  font-size: 11px;
  font-weight: 800;
}

.plan-edit-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 112px;
  max-height: 440px;
  resize: none;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-color: rgba(159, 227, 210, .72) rgba(20, 38, 36, .72);
  scrollbar-width: thin;
  color-scheme: dark;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 8px;
  outline: none;
  padding: 14px 16px;
  color: #f6f5ef;
  background: rgba(3, 10, 22, .72);
  font: inherit;
  line-height: 1.72;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.plan-edit-field textarea::-webkit-scrollbar {
  width: 9px;
}

.plan-edit-field textarea::-webkit-scrollbar-track {
  border-radius: 0 7px 7px 0;
  background: rgba(20, 38, 36, .70);
}

.plan-edit-field textarea::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(159, 227, 210, .62);
  background-clip: padding-box;
}

.plan-edit-field textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(103, 232, 249, .88);
  background-clip: padding-box;
}

.plan-edit-field textarea::-webkit-scrollbar-corner {
  background: transparent;
}

.plan-edit-field textarea:hover {
  border-color: rgba(159, 227, 210, .30);
}

.plan-edit-field textarea:focus {
  border-color: rgba(159, 227, 210, .68);
  background: rgba(2, 8, 18, .70);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .12);
}

.plan-edit-field textarea::placeholder {
  color: #647063;
}

.plan-edit-footer > span {
  color: #a9bacb;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .plan-edit-toolbar,
  .plan-edit-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .plan-edit-actions {
    width: 100%;
  }

  .plan-edit-actions .btn {
    flex: 1 1 0;
  }

  .plan-edit-fields {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 14px;
  }

  .plan-edit-field.is-wide {
    grid-column: auto;
  }

  .plan-edit-context {
    grid-template-columns: 1fr;
  }

  .plan-edit-context small {
    grid-column: 1;
  }

  .plan-edit-field textarea {
    min-height: 128px;
    max-height: 360px;
    padding: 13px 14px;
    font-size: 16px;
    line-height: 1.68;
  }
}

.command-dashboard {
  gap: 14px;
}

.command-top-notice {
  display: grid;
  grid-template-columns: 34px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px 7px 12px;
  border: 1px solid rgba(245, 158, 11, .30);
  border-radius: 8px;
  color: #f6f5ef;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, .18), rgba(20, 184, 166, .10) 42%, rgba(20, 38, 36, .72)),
    rgba(8, 15, 28, .76);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  cursor: pointer;
  text-align: left;
}

.command-top-notice.is-empty {
  grid-template-columns: 34px auto minmax(0, 1fr);
  cursor: default;
}

.command-top-notice img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.command-top-notice strong {
  color: #f8e3bb;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.command-top-notice span {
  overflow: hidden;
  color: #d7e4f2;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-top-notice em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(250, 204, 21, .24);
  border-radius: 8px;
  color: #fff7cc;
  background: rgba(245, 158, 11, .16);
  font-style: normal;
  font-weight: 900;
}

.command-top-notice:hover {
  border-color: rgba(250, 204, 21, .46);
  background:
    linear-gradient(90deg, rgba(245, 158, 11, .24), rgba(20, 184, 166, .14) 44%, rgba(20, 38, 36, .78)),
    rgba(8, 15, 28, .82);
}

.command-hero {
  min-height: 336px;
  background:
    linear-gradient(135deg, rgba(13, 20, 34, .98) 0%, rgba(8, 29, 39, .96) 46%, rgba(10, 15, 28, .98) 100%),
    linear-gradient(90deg, rgba(159, 227, 210, .12), rgba(245, 158, 11, .08));
}

.command-hero-copy > p {
  max-width: 810px;
}

.command-stage-window {
  align-items: stretch;
  padding: 10px;
}

.command-stage-window div {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 118px;
  padding: 10px 8px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 38, 36, .58), rgba(2, 8, 18, .42));
}

.command-stage-window img {
  width: 68px;
  height: 68px;
  background: transparent;
}

.command-stage-window span {
  overflow: hidden;
  max-width: 100%;
  color: #dff8ff;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-rhythm-list {
  display: grid;
  gap: 10px;
}

.command-rhythm-list div {
  position: relative;
  min-height: 70px;
  padding: 12px 12px 12px 16px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(20, 184, 166, .12), rgba(8, 15, 28, .46)),
    rgba(8, 15, 28, .42);
}

.command-rhythm-list div::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #8fdfc9, #f5b544);
  content: "";
}

.command-rhythm-list strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.32;
}

.command-rhythm-list span {
  display: block;
  margin-top: 6px;
  color: #98a294;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .command-top-notice {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .command-top-notice strong {
    display: none;
  }
}
/* 聊天智能体（PC端）：大厅、历史会话和多轮对话窗口。 */
.agent-page .ai-agent-hall { min-height: 100%; padding: 30px; background: linear-gradient(145deg, #f9f8f3 0%, #f5f7fb 55%, #eef5ff 100%); }
.agent-page .ai-agent-hall-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.agent-page .ai-agent-hall-head > div:first-child > span { color: #3778ff; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.agent-page .ai-agent-hall-head h1 { margin: 7px 0 9px; color: #152033; font-size: 30px; }
.agent-page .ai-agent-hall-head p { max-width: 720px; margin: 0; color: #6b768a; line-height: 1.7; }
.agent-page .ai-agent-model-note { min-width: 250px; padding: 15px 18px; border: 1px solid #dce7fb; border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 10px 30px rgba(42,80,144,.07); }
.agent-page .ai-agent-model-note span,.agent-page .ai-agent-model-note small { display: block; color: #8993a5; font-size: 12px; }
.agent-page .ai-agent-model-note strong { display: block; margin: 5px 0; color: #1c2b45; font-size: 16px; }
.agent-page .ai-agent-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.agent-page .ai-agent-card { display: flex; min-height: 326px; flex-direction: column; padding: 23px; border: 1px solid #e0e8f4; border-radius: 22px; background: #fff; box-shadow: 0 14px 40px rgba(36,65,111,.07); transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.agent-page .ai-agent-card:hover { transform: translateY(-3px); border-color: #bcd0f5; box-shadow: 0 20px 50px rgba(36,65,111,.12); }
.agent-page .ai-agent-card-top { display: flex; align-items: center; gap: 13px; }
.agent-page .ai-agent-card-top span + div > span { color: #8b96a9; font-size: 11px; letter-spacing: .08em; }
.agent-page .ai-agent-card h2 { margin: 3px 0 0; color: #16243b; font-size: 20px; }
.agent-page .ai-agent-card > p { min-height: 50px; margin: 18px 0 13px; color: #657187; font-size: 14px; line-height: 1.7; }
.agent-page .ai-agent-avatar { display: inline-flex; width: 48px; height: 48px; flex: 0 0 48px; align-items: center; justify-content: center; overflow: hidden; border-radius: 15px; background: linear-gradient(145deg,#3378ff,#7759ef); color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 8px 20px rgba(57,106,230,.22); }
.agent-page .ai-agent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.agent-page .ai-agent-avatar.large { width: 68px; height: 68px; flex-basis: 68px; border-radius: 21px; font-size: 26px; }
.agent-page .ai-agent-avatar.small { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; font-size: 14px; box-shadow: none; }
.agent-page .ai-agent-card-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.agent-page .ai-agent-card-meta span { padding: 5px 9px; border-radius: 99px; background: #f1f5fc; color: #66758c; font-size: 11px; }
.agent-page .ai-agent-last-session { width: 100%; margin: 17px 0 15px; padding: 12px 14px; border: 1px solid #e9edf4; border-radius: 13px; background: #fafcff; text-align: left; cursor: pointer; }
.agent-page .ai-agent-last-session small,.agent-page .ai-agent-last-session strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-page .ai-agent-last-session small { margin-bottom: 4px; color: #929cac; font-size: 11px; }
.agent-page .ai-agent-last-session strong { color: #34435b; font-size: 13px; }
.agent-page .ai-agent-last-session.is-empty { cursor: default; }
.agent-page .ai-agent-card-actions { display: flex; gap: 9px; margin-top: auto; }
.agent-page .ai-agent-card-actions .btn { flex: 1; justify-content: center; }

.agent-page .ai-agent-chat-shell { display: grid; height: calc(100vh - 92px); min-height: 650px; grid-template-columns: 276px minmax(0,1fr); overflow: hidden; background: #f5f7fb; }
.agent-page .ai-agent-session-panel { display: flex; min-width: 0; flex-direction: column; padding: 18px 14px; border-right: 1px solid #dfe6f0; background: #f8faff; }
.agent-page .ai-agent-back { padding: 8px 5px; border: 0; background: transparent; color: #627086; text-align: left; cursor: pointer; }
.agent-page .ai-agent-session-agent { display: flex; align-items: center; gap: 11px; margin: 14px 0 15px; padding: 12px; border-radius: 15px; background: #fff; box-shadow: 0 7px 22px rgba(39,66,107,.06); }
.agent-page .ai-agent-session-agent small,.agent-page .ai-agent-session-agent strong { display: block; }
.agent-page .ai-agent-session-agent small { color: #929cac; font-size: 11px; }
.agent-page .ai-agent-session-agent strong { margin-top: 3px; color: #24334a; }
.agent-page .ai-agent-new-chat { width: 100%; justify-content: center; }
.agent-page .ai-agent-session-title { display: flex; align-items: center; justify-content: space-between; padding: 22px 6px 9px; color: #8792a4; font-size: 12px; }
.agent-page .ai-agent-session-title small { padding: 2px 7px; border-radius: 99px; background: #e9eef7; }
.agent-page .ai-agent-session-list { min-height: 0; flex: 1; overflow-y: auto; }
.agent-page .ai-agent-session-row { display: grid; grid-template-columns: minmax(0,1fr) 27px; gap: 3px; margin-bottom: 4px; border-radius: 11px; }
.agent-page .ai-agent-session-row:hover,.agent-page .ai-agent-session-row.is-active { background: #eaf1ff; }
.agent-page .ai-agent-session-row > button { border: 0; background: transparent; cursor: pointer; }
.agent-page .ai-agent-session-row > button:first-child { min-width: 0; padding: 10px; text-align: left; }
.agent-page .ai-agent-session-row strong,.agent-page .ai-agent-session-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-page .ai-agent-session-row strong { color: #344258; font-size: 13px; }
.agent-page .ai-agent-session-row small { margin-top: 4px; color: #929baa; font-size: 10px; }
.agent-page .ai-agent-session-row > button:last-child { color: #9aa3b2; font-size: 18px; opacity: 0; }
.agent-page .ai-agent-session-row:hover > button:last-child { opacity: 1; }
.agent-page .ai-agent-session-empty { padding: 18px 8px; color: #9aa4b5; font-size: 12px; text-align: center; }
.agent-page .ai-agent-conversation { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; background: #fff; }
.agent-page .ai-agent-conversation-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; padding: 13px 25px; border-bottom: 1px solid #e9edf3; }
.agent-page .ai-agent-conversation-head > div { display: flex; min-width: 0; align-items: center; gap: 12px; }
.agent-page .ai-agent-conversation-head h1 { margin: 0 0 4px; color: #1b293e; font-size: 18px; }
.agent-page .ai-agent-conversation-head p { max-width: 600px; margin: 0; overflow: hidden; color: #7c8798; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.agent-page .ai-agent-conversation-head > span { flex: 0 0 auto; padding: 7px 11px; border-radius: 99px; background: #f0f5ff; color: #4d6fa8; font-size: 11px; }
.agent-page .ai-agent-message-list { min-height: 0; padding: 24px max(28px,calc((100% - 900px)/2)); overflow-y: auto; scroll-behavior: auto; }
.agent-page .ai-agent-welcome { max-width: 700px; margin: 50px auto 25px; text-align: center; }
.agent-page .ai-agent-welcome .ai-agent-avatar { margin: auto; }
.agent-page .ai-agent-welcome h2 { margin: 16px 0 8px; color: #1c2a40; }
.agent-page .ai-agent-welcome p { margin: 0 auto 22px; color: #647187; line-height: 1.75; }
.agent-page .ai-agent-prerequisite-notice { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; max-width: 700px; margin: -5px auto 18px; padding: 11px 13px; border: 1px solid #f0d8a7; border-radius: 12px; background: #fffaf0; text-align: left; }
.agent-page .ai-agent-prerequisite-notice strong { color: #9a681f; font-size: 11px; white-space: nowrap; }
.agent-page .ai-agent-prerequisite-notice span { color: #79694f; font-size: 11px; line-height: 1.55; }
.agent-page .ai-agent-quick-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.agent-page .ai-agent-quick-list button { padding: 11px 14px; border: 1px solid #dfe7f3; border-radius: 12px; background: #fafcff; color: #40506a; text-align: left; cursor: pointer; }
.agent-page .ai-agent-quick-list button:hover { border-color: #aac4f5; background: #f1f6ff; }
.agent-page .ai-agent-load-more { display: block; margin: 0 auto 18px; padding: 7px 13px; border: 1px solid #e0e7f0; border-radius: 99px; background: #fff; color: #6d788b; cursor: pointer; }
.agent-page .ai-agent-message { display: flex; max-width: 880px; gap: 11px; margin: 0 auto 24px; }
.agent-page .ai-agent-message.is-user { flex-direction: row-reverse; }
.agent-page .ai-agent-message-avatar { display: flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 11px; background: #dfe8f8; color: #52657f; font-size: 13px; font-weight: 800; }
.agent-page .ai-agent-message.is-assistant .ai-agent-message-avatar { background: transparent; }
.agent-page .ai-agent-message-body { max-width: min(76%,760px); }
.agent-page .ai-agent-message-body > span { display: block; margin: 0 3px 6px; color: #8a94a5; font-size: 11px; }
.agent-page .ai-agent-message.is-user .ai-agent-message-body > span,.agent-page .ai-agent-message.is-user .ai-agent-message-body > small { text-align: right; }
.agent-page .ai-agent-message-text { padding: 13px 16px; border-radius: 5px 16px 16px 16px; background: #f2f5f9; color: #27364d; font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.agent-page .ai-agent-message.is-user .ai-agent-message-text { border-radius: 16px 5px 16px 16px; background: linear-gradient(135deg,#3678f6,#4b69dc); color: #fff; }
.agent-page .ai-agent-message.is-failed .ai-agent-message-text { border: 1px solid #ffd6d6; background: #fff4f4; color: #a94a4a; }
.agent-page .ai-agent-message-body > small { display: block; margin: 6px 3px 0; color: #a2aab6; font-size: 10px; }
.agent-page .ai-agent-typing { display: flex; gap: 5px; width: 62px; padding: 13px 16px; border-radius: 5px 16px 16px 16px; background: #f2f5f9; }
.agent-page .ai-agent-typing i { width: 7px; height: 7px; border-radius: 50%; background: #7890b2; animation: ai-agent-typing 1s infinite alternate; }
.agent-page .ai-agent-typing i:nth-child(2) { animation-delay: .2s; }.agent-page .ai-agent-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ai-agent-typing { to { transform: translateY(-4px); opacity: .45; } }
.agent-page .ai-agent-composer { box-sizing: border-box; min-width: 0; max-width: 100%; padding: 14px max(28px,calc((100% - 900px)/2)) 18px; border-top: 1px solid #edf0f5; background: rgba(255,255,255,.96); }
.agent-page .ai-agent-composer textarea { box-sizing: border-box; width: 100%; min-height: 76px; max-height: 190px; padding: 14px 16px; resize: vertical; border: 1px solid #dbe3ee; border-radius: 15px; outline: none; background: #fbfcfe; color: #25344a; font: inherit; line-height: 1.6; }
.agent-page .ai-agent-composer textarea:focus { border-color: #8eb1f3; box-shadow: 0 0 0 3px rgba(63,123,237,.1); }
.agent-page .ai-agent-composer-footer { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; }
.agent-page .ai-agent-composer-footer > span { min-width: 0; color: #919aaa; font-size: 11px; }
.agent-page .ai-agent-composer .btn { min-width: 92px; justify-content: center; }

/* 智能体专业快捷开场：视觉上是推荐语，底层绑定能力编码和业务类型ID。 */
.agent-page .ai-agent-welcome { max-width: 820px; margin-top: 30px; }
.agent-page .ai-agent-starter-group { margin-top: 22px; padding: 18px; border: 1px solid #e3e9f3; border-radius: 20px; background: linear-gradient(145deg,#fff,#f8faff); text-align: left; box-shadow: 0 12px 34px rgba(45,72,115,.06); }
.agent-page .ai-agent-starter-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.agent-page .ai-agent-starter-heading strong { color: #26364e; font-size: 14px; }
.agent-page .ai-agent-starter-heading p { margin: 5px 0 0; color: #7b8799; font-size: 12px; line-height: 1.6; }
.agent-page .ai-agent-starter-heading small { flex: 0 0 auto; padding: 4px 8px; border-radius: 99px; background: #eef3fb; color: #78869a; font-size: 10px; }
.agent-page .ai-agent-starter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.agent-page .ai-agent-starter-grid button { position: relative; min-height: 86px; padding: 14px 38px 13px 15px; border: 1px solid #dfe7f2; border-radius: 14px; background: #fff; text-align: left; cursor: pointer; transition: border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.agent-page .ai-agent-starter-grid button:hover { transform: translateY(-2px); border-color: #9cbcf5; box-shadow: 0 10px 24px rgba(58,105,192,.1); }
.agent-page .ai-agent-starter-grid button strong,.agent-page .ai-agent-starter-grid button span { display: block; }
.agent-page .ai-agent-starter-grid button strong { color: #2c4161; font-size: 13px; }
.agent-page .ai-agent-starter-grid button span { display: -webkit-box; margin-top: 6px; overflow: hidden; color: #7c899b; font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.agent-page .ai-agent-starter-grid button i { position: absolute; right: 14px; top: 16px; color: #7898cf; font-style: normal; }
.agent-page .ai-agent-starter-group.is-quick { padding: 14px 18px; box-shadow: none; }
.agent-page .ai-agent-starter-group.is-quick .ai-agent-starter-grid button { min-height: 48px; padding-top: 12px; padding-bottom: 10px; }
.agent-page .ai-agent-starter-more { display: block; margin: 13px auto 0; padding: 6px 12px; border: 0; background: transparent; color: #5278b8; font-size: 12px; cursor: pointer; }

/* 引用条只展示用户主动选择的成果，可在发送前逐条删除。 */
.agent-page .ai-agent-reference-list { display: grid; gap: 7px; margin-bottom: 8px; }
.agent-page .ai-agent-composer > .ai-agent-reference-list {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 150px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 9px;
  overflow-x: hidden;
  overflow-y: auto;
}
.agent-page .ai-agent-composer > .ai-agent-reference-list .ai-agent-reference-chip { box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; }
.agent-page .ai-agent-composer > .ai-agent-reference-list .ai-agent-reference-chip:only-child { grid-column: 1 / -1; }
.agent-page .ai-agent-composer > .ai-agent-reference-list .ai-agent-reference-chip:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; }
.agent-page .ai-agent-reference-chip { position: relative; min-width: 0; padding: 9px 36px 9px 11px; border: 1px solid #cfe0fb; border-radius: 11px; background: #f5f8ff; color: #53637a; text-align: left; }
.agent-page .ai-agent-reference-chip span { color: #6684b7; font-size: 10px; font-weight: 700; }
.agent-page .ai-agent-reference-chip strong { margin-left: 7px; color: #38547f; font-size: 10px; }
.agent-page .ai-agent-reference-chip p { margin: 4px 0 0; overflow: hidden; color: #495b73; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.agent-page .ai-agent-reference-chip button { position: absolute; top: 50%; right: 8px; width: 24px; height: 24px; transform: translateY(-50%); border: 0; border-radius: 50%; background: transparent; color: #7d8ba0; font-size: 18px; cursor: pointer; }
.agent-page .ai-agent-reference-chip button:hover { background: #e2ebfa; color: #315f9e; }
.agent-page .ai-agent-message.is-user .ai-agent-reference-list { margin-left: auto; }
.agent-page .ai-agent-message.is-user .ai-agent-reference-chip { border-color: #dbe6f8; background: #f7f9fd; }
.agent-page .ai-agent-message.is-user .ai-agent-reference-chip p { max-width: 510px; }

/* AI结构化成果卡片：每条可以独立引用或交给任意其他智能体。 */
.agent-page .ai-agent-artifact-list { display: grid; gap: 12px; margin-top: 12px; }
.agent-page .ai-agent-artifact-card { padding: 15px; border: 1px solid #dfe7f2; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(41,68,108,.06); }
.agent-page .ai-agent-artifact-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agent-page .ai-agent-artifact-head span { padding: 4px 9px; border-radius: 99px; background: #eaf2ff; color: #356bb8; font-size: 10px; font-weight: 800; }
.agent-page .ai-agent-artifact-head small { color: #a0a8b5; font-size: 10px; }
.agent-page .ai-agent-artifact-card h4 { margin: 12px 0; color: #26374f; font-size: 14px; font-weight: 650; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.agent-page .ai-agent-artifact-reason { padding: 10px 11px; border-radius: 11px; background: #f7f6f1; }
.agent-page .ai-agent-artifact-reason strong { color: #69778b; font-size: 10px; }
.agent-page .ai-agent-artifact-reason p { margin: 4px 0 0; color: #5b687b; font-size: 11px; line-height: 1.65; }
.agent-page .ai-agent-rule-hits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.agent-page .ai-agent-rule-hits span { padding: 4px 7px; border-radius: 7px; background: #f0f4fa; color: #66758a; font-size: 10px; }
.agent-page .ai-agent-artifact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.agent-page .ai-agent-artifact-actions button { padding: 7px 10px; border: 1px solid #cbdcf5; border-radius: 9px; background: #f5f8ff; color: #416da8; font-size: 11px; cursor: pointer; }
.agent-page .ai-agent-artifact-actions button:last-child { margin-left: auto; border-color: #4178da; background: #4178da; color: #fff; }
.agent-page .ai-agent-artifact-actions button:hover { filter: brightness(.97); }

/* 成果可转交到任意智能体，目标列表来自后台启用智能体，不依赖固定流程编码。 */
.agent-page .ai-agent-transfer-overlay { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(20,29,45,.46); backdrop-filter: blur(5px); }
.agent-page .ai-agent-transfer-dialog { position: relative; width: min(650px,100%); max-height: min(760px,calc(100vh - 48px)); padding: 26px; overflow-y: auto; border: 1px solid #dfe7f3; border-radius: 22px; background: #fff; box-shadow: 0 30px 90px rgba(30,48,76,.28); }
.agent-page .ai-agent-transfer-dialog > span { color: #597bb3; font-size: 11px; font-weight: 800; }
.agent-page .ai-agent-transfer-dialog > h3 { margin: 7px 0 16px; color: #22334d; font-size: 22px; }
.agent-page .ai-agent-transfer-close { position: absolute; top: 16px; right: 17px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f4f8; color: #647287; font-size: 22px; cursor: pointer; }
.agent-page .ai-agent-transfer-preview { padding: 13px 15px; border: 1px solid #dce7f8; border-radius: 13px; background: #f6f9ff; }
.agent-page .ai-agent-transfer-preview strong { color: #426aa7; font-size: 11px; }
.agent-page .ai-agent-transfer-preview p { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: #44556d; font-size: 12px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.agent-page .ai-agent-transfer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 15px; }
.agent-page .ai-agent-transfer-grid > button { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid #e1e7f0; border-radius: 13px; background: #fff; text-align: left; cursor: pointer; }
.agent-page .ai-agent-transfer-grid > button:hover { border-color: #9dbbf0; background: #f6f9ff; }
.agent-page .ai-agent-transfer-grid .ai-agent-avatar { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; }
.agent-page .ai-agent-transfer-grid span strong,.agent-page .ai-agent-transfer-grid span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-page .ai-agent-transfer-grid span strong { color: #2c3e59; font-size: 13px; }
.agent-page .ai-agent-transfer-grid span small { margin-top: 4px; color: #8792a2; font-size: 10px; }
.agent-page .ai-agent-transfer-grid i { color: #7191c5; font-style: normal; }
.agent-page .ai-agent-transfer-empty { grid-column: 1/-1; padding: 24px; color: #8893a4; text-align: center; }
.agent-page .ai-agent-transfer-tip { margin: 15px 0 0; color: #7d8999; font-size: 11px; line-height: 1.65; }
.admin-multi-select { min-height: 130px; padding: 8px; }
.admin-field-help { display: block; margin-top: 5px; color: #8993a3; font-size: 12px; }

@media (max-width: 1280px) {
  .agent-page .ai-agent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .agent-page .ai-agent-chat-shell { grid-template-columns: 244px minmax(0,1fr); }
}

@media (max-width: 700px) {
  .agent-page .ai-agent-transfer-grid { grid-template-columns: 1fr; }
}

/* 智能体专业聊天室：沿用创作中台的深海蓝主题，所有规则仅作用于智能体大厅与聊天页。 */
.agent-page .ai-agent-hall,
.agent-page .ai-agent-chat-shell {
  --agent-bg: #06131f;
  --agent-surface: #0a1b2a;
  --agent-surface-strong: #0d2132;
  --agent-surface-soft: #102638;
  --agent-border: rgba(106, 153, 184, .22);
  --agent-border-strong: rgba(67, 210, 194, .42);
  --agent-text: #edf6fb;
  --agent-text-soft: #a8bac7;
  --agent-text-muted: #6f8798;
  --agent-accent: #4fd1c5;
  --agent-blue: #2563eb;
}

/* 智能体大厅 */
.agent-page .ai-agent-hall {
  min-height: 100%;
  padding: 28px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 0, rgba(37, 99, 235, .13), transparent 28%),
    radial-gradient(circle at 92% 4%, rgba(79, 209, 197, .08), transparent 24%),
    var(--agent-bg);
  color: var(--agent-text);
}
.agent-page .ai-agent-hall-head {
  align-items: center;
  margin-bottom: 22px;
}
.agent-page .ai-agent-hall-head > div:first-child > span {
  color: var(--agent-accent);
  font-size: 11px;
  letter-spacing: .16em;
}
.agent-page .ai-agent-hall-head h1 {
  margin: 8px 0 8px;
  color: var(--agent-text);
  font-size: clamp(26px, 2vw, 32px);
  letter-spacing: -.02em;
}
.agent-page .ai-agent-hall-head p {
  color: var(--agent-text-soft);
}
.agent-page .ai-agent-model-note {
  min-width: 250px;
  padding: 14px 17px;
  border-color: var(--agent-border);
  border-radius: 10px;
  background: var(--agent-surface);
  box-shadow: none;
}
.agent-page .ai-agent-model-note span,
.agent-page .ai-agent-model-note small {
  color: var(--agent-text-muted);
}
.agent-page .ai-agent-model-note strong {
  color: var(--agent-text);
}
.agent-page .ai-agent-hall-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: -2px 0 16px;
}
.agent-page .ai-agent-hall-highlights > div {
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid rgba(106, 153, 184, .17);
  border-radius: 9px;
  background: rgba(10, 27, 42, .58);
}
.agent-page .ai-agent-hall-highlights strong,
.agent-page .ai-agent-hall-highlights span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-page .ai-agent-hall-highlights strong {
  color: #dbeaf1;
  font-size: 12px;
}
.agent-page .ai-agent-hall-highlights span {
  margin-top: 4px;
  color: var(--agent-text-muted);
  font-size: 10px;
}
.agent-page .ai-agent-hall-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid var(--agent-border);
  border-radius: 10px;
  background: rgba(10, 27, 42, .78);
}
.agent-page .ai-agent-search {
  display: flex;
  width: min(520px, 100%);
  align-items: center;
  gap: 10px;
}
.agent-page .ai-agent-search > span {
  flex: 0 0 auto;
  color: var(--agent-text-muted);
  font-size: 11px;
}
.agent-page .ai-agent-search input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--agent-border);
  border-radius: 8px;
  outline: none;
  background: #071725;
  color: var(--agent-text);
  font: inherit;
  font-size: 13px;
}
.agent-page .ai-agent-search input::placeholder { color: #637d8f; }
.agent-page .ai-agent-search input:focus {
  border-color: var(--agent-accent);
  box-shadow: 0 0 0 3px rgba(79, 209, 197, .12);
}
.agent-page .ai-agent-hall-count {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 6px;
  color: var(--agent-text-muted);
  font-size: 11px;
}
.agent-page .ai-agent-hall-count strong {
  color: var(--agent-accent);
  font-size: 18px;
}
.agent-page .ai-agent-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.agent-page .ai-agent-card[hidden] { display: none; }
.agent-page .ai-agent-pagination {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 11px 13px 11px 17px;
  border: 1px solid rgba(77, 165, 255, .34);
  border-radius: 11px;
  background: linear-gradient(110deg, rgba(8, 28, 43, .94), rgba(11, 38, 57, .9));
  box-shadow: 0 12px 32px rgba(0, 10, 22, .22);
}
.agent-page .ai-agent-pagination-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.agent-page .ai-agent-pagination-copy > span {
  color: #c9dae4;
  font-size: 12px;
  font-weight: 800;
}
.agent-page .ai-agent-pagination-copy > small {
  color: var(--agent-text-muted);
  font-size: 10px;
  line-height: 1.45;
}
.agent-page .ai-agent-pagination.is-multi-page .ai-agent-pagination-copy > small { color: #75d8d0; }
.agent-page .ai-agent-pagination-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.agent-page .ai-agent-pagination-actions > strong {
  min-width: 82px;
  padding: 8px 9px;
  border: 1px solid rgba(96, 139, 168, .22);
  border-radius: 7px;
  background: rgba(4, 17, 28, .72);
  color: var(--agent-text-soft);
  font-size: 11px;
  text-align: center;
}
.agent-page .ai-agent-pagination button {
  display: inline-flex;
  min-width: 92px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(77, 165, 255, .4);
  border-radius: 8px;
  background: #0d2a3e;
  color: #d7e9f3;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.agent-page .ai-agent-pagination button i { color: #71d6cd; font-style: normal; font-size: 15px; }
.agent-page .ai-agent-pagination.is-multi-page .js-agent-page-next:not(:disabled) {
  border-color: #3f8fff;
  background: linear-gradient(135deg, #2563eb, #1689da 62%, #15988f);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .24);
  color: #fff;
}
.agent-page .ai-agent-pagination.is-multi-page .js-agent-page-next:not(:disabled) i { color: #fff; }
.agent-page .ai-agent-pagination button:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: var(--agent-border-strong);
  background: #102c3e;
  color: var(--agent-accent);
}
.agent-page .ai-agent-pagination button:disabled {
  cursor: not-allowed;
  opacity: .38;
}
@media (max-width: 760px) {
  .agent-page .ai-agent-pagination { align-items: stretch; flex-direction: column; }
  .agent-page .ai-agent-pagination-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .agent-page .ai-agent-pagination button { min-width: 0; }
}
.agent-page .ai-agent-card {
  min-height: 354px;
  padding: 18px;
  border-color: var(--agent-border);
  border-radius: 10px;
  background: var(--agent-surface);
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.agent-page .ai-agent-card:hover {
  transform: translateY(-2px);
  border-color: var(--agent-border-strong);
  background: var(--agent-surface-strong);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}
.agent-page .ai-agent-card-top {
  min-width: 0;
}
.agent-page .ai-agent-card-top > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.agent-page .ai-agent-card-top span + div > span,
.agent-page .ai-agent-card-top > div:nth-child(2) > span {
  color: var(--agent-accent);
  font-size: 10px;
}
.agent-page .ai-agent-card-top em {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(79, 209, 197, .26);
  border-radius: 6px;
  color: #82e3d7;
  font-size: 10px;
  font-style: normal;
}
.agent-page .ai-agent-card h2 {
  overflow: hidden;
  margin-top: 4px;
  color: var(--agent-text);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-page .ai-agent-card > p {
  display: -webkit-box;
  min-height: 66px;
  margin: 16px 0 12px;
  overflow: hidden;
  color: var(--agent-text-soft);
  font-size: 13px;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.agent-page .ai-agent-avatar {
  border: 1px solid rgba(122, 174, 204, .22);
  border-radius: 12px;
  background: #16364d;
  box-shadow: none;
}
.agent-page .ai-agent-avatar.large { border-radius: 17px; }
.agent-page .ai-agent-avatar.small { border-radius: 9px; }
.agent-page .ai-agent-card-meta {
  gap: 6px;
}
.agent-page .ai-agent-card-meta span {
  padding: 5px 8px;
  border: 1px solid rgba(114, 151, 176, .18);
  border-radius: 6px;
  background: #0d2232;
  color: #8ea6b6;
  font-size: 10px;
}
.agent-page .ai-agent-last-session {
  margin: 15px 0 13px;
  padding: 11px 12px;
  border-color: var(--agent-border);
  border-radius: 8px;
  background: #071725;
}
.agent-page .ai-agent-last-session:hover:not(.is-empty) {
  border-color: var(--agent-border-strong);
}
.agent-page .ai-agent-last-session small { color: var(--agent-text-muted); }
.agent-page .ai-agent-last-session strong { color: #c6d6df; }
.agent-page .ai-agent-card-actions {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  margin-top: auto;
}
.agent-page .ai-agent-card-actions.is-new-only { grid-template-columns: minmax(0, 1fr); }
.agent-page .ai-agent-new-conversation {
  display: grid;
  min-width: 0;
  min-height: 54px;
  align-content: center;
  justify-items: start;
  gap: 2px;
  padding: 9px 14px;
  border: 1px solid #3778f2;
  border-radius: 9px;
  background: linear-gradient(135deg, #2563eb 0%, #1877d8 62%, #15968f 100%);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.agent-page .ai-agent-new-conversation strong,
.agent-page .ai-agent-new-conversation small {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-page .ai-agent-new-conversation strong { font-size: 13px; }
.agent-page .ai-agent-new-conversation small { color: rgba(239, 249, 255, .74); font-size: 9px; }
.agent-page .ai-agent-new-conversation:hover {
  transform: translateY(-1px);
  border-color: #67d9cf;
  box-shadow: 0 13px 28px rgba(37, 99, 235, .24);
  filter: brightness(1.06);
}
.agent-page .ai-agent-new-conversation:focus-visible {
  outline: 3px solid rgba(79, 209, 197, .28);
  outline-offset: 2px;
}
.agent-page .ai-agent-card-actions .btn,
.agent-page .ai-agent-new-chat,
.agent-page .ai-agent-composer .btn {
  min-height: 40px;
  border-radius: 7px;
}
.agent-page .ai-agent-card-actions .btn {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: none;
  padding: 8px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-page .ai-agent-card-actions .btn-primary,
.agent-page .ai-agent-new-chat.btn-primary,
.agent-page .ai-agent-composer .btn-primary {
  border-color: #2d6df0;
  background: var(--agent-blue);
  color: #fff;
  box-shadow: none;
}
.agent-page .ai-agent-card-actions .btn-primary:hover,
.agent-page .ai-agent-new-chat.btn-primary:hover,
.agent-page .ai-agent-composer .btn-primary:hover {
  border-color: #4a82f2;
  background: #2f6ff0;
}
.agent-page .ai-agent-card-actions .btn-quiet {
  min-height: 54px;
  border-color: var(--agent-border);
  background: #0d2232;
  color: #a8bac7;
}
.agent-page .ai-agent-card-actions .btn-quiet:hover {
  border-color: var(--agent-border-strong);
  background: #123044;
  color: #d8e7ed;
}
.agent-page .ai-agent-search-empty {
  grid-column: 1 / -1;
  padding: 48px 20px;
  border: 1px dashed var(--agent-border);
  border-radius: 10px;
  color: var(--agent-text-muted);
  text-align: center;
}
.agent-page .ai-agent-search-empty strong,
.agent-page .ai-agent-search-empty span { display: block; }
.agent-page .ai-agent-search-empty strong { margin-bottom: 7px; color: var(--agent-text-soft); }

/* 专业聊天 */
.agent-page .ai-agent-chat-shell {
  box-sizing: border-box;
  height: calc(100vh - 126px);
  min-height: 0;
  grid-template-columns: 224px minmax(0, 1fr) 220px;
  grid-template-rows: minmax(0, 1fr);
  border: 1px solid var(--agent-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--agent-bg);
}
.agent-page .ai-agent-session-panel {
  box-sizing: border-box;
  min-height: 0;
  padding: 14px 12px;
  overflow: hidden;
  border-right-color: var(--agent-border);
  background: #071725;
}
.agent-page .ai-agent-back {
  color: #84a0b2;
  border-radius: 7px;
}
.agent-page .ai-agent-back:hover { background: #0e2434; color: var(--agent-text); }
.agent-page .ai-agent-session-agent {
  padding: 11px;
  border: 1px solid var(--agent-border);
  border-radius: 8px;
  background: var(--agent-surface);
  box-shadow: none;
}
.agent-page .ai-agent-session-agent small { color: var(--agent-text-muted); }
.agent-page .ai-agent-session-agent strong { color: var(--agent-text); }
.agent-page .ai-agent-session-title { color: var(--agent-text-muted); }
.agent-page .ai-agent-session-title small { background: #102637; color: #90a6b5; }
.agent-page .ai-agent-session-row { border: 1px solid transparent; border-radius: 8px; }
.agent-page .ai-agent-session-row:hover,
.agent-page .ai-agent-session-row.is-active {
  border-color: rgba(79, 209, 197, .28);
  background: #0d2b37;
}
.agent-page .ai-agent-session-row strong { color: #b9cad4; }
.agent-page .ai-agent-session-row small { color: #668092; }
.agent-page .ai-agent-session-row > button:last-child { color: #8296a5; }
.agent-page .ai-agent-session-empty { color: var(--agent-text-muted); }
.agent-page .ai-agent-session-list {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #294b5f transparent;
}
.agent-page .ai-agent-session-list::-webkit-scrollbar { width: 6px; }
.agent-page .ai-agent-session-list::-webkit-scrollbar-track { background: transparent; }
.agent-page .ai-agent-session-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #294b5f;
}
.agent-page .ai-agent-conversation {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--agent-border);
  background: var(--agent-bg);
}
.agent-page .ai-agent-conversation-head {
  min-height: 72px;
  padding: 12px 18px;
  border-bottom-color: var(--agent-border);
  background: #081927;
}
.agent-page .ai-agent-conversation-head h1 { color: var(--agent-text); }
.agent-page .ai-agent-conversation-head p { max-width: 430px; color: var(--agent-text-muted); }
.agent-page .ai-agent-conversation-head > span {
  border: 1px solid var(--agent-border);
  border-radius: 7px;
  background: #0d2232;
  color: #91a8b8;
}
.agent-page .ai-agent-message-list {
  padding: 22px 18px;
  background: #06131f;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #294b5f #071725;
}
.agent-page .ai-agent-message-list::-webkit-scrollbar { width: 8px; }
.agent-page .ai-agent-message-list::-webkit-scrollbar-track { background: #071725; }
.agent-page .ai-agent-message-list::-webkit-scrollbar-thumb {
  border: 2px solid #071725;
  border-radius: 8px;
  background: #294b5f;
}
.agent-page .ai-agent-message-list::-webkit-scrollbar-thumb:hover { background: #37657c; }
.agent-page .ai-agent-welcome { margin-top: 24px; }
.agent-page .ai-agent-welcome h2 { color: var(--agent-text); }
.agent-page .ai-agent-welcome p { color: var(--agent-text-soft); }
.agent-page .ai-agent-prerequisite-notice {
  border-color: rgba(231, 190, 92, .35);
  border-radius: 8px;
  background: #2a2415;
}
.agent-page .ai-agent-prerequisite-notice strong { color: #f1c965; }
.agent-page .ai-agent-prerequisite-notice span { color: #c7b98e; }
.agent-page .ai-agent-load-more {
  border-color: var(--agent-border);
  background: #0a1b2a;
  color: #8da4b4;
}
.agent-page .ai-agent-message-avatar { background: #163247; color: #b8cad5; }
.agent-page .ai-agent-message {
  width: 100%;
  max-width: none;
  gap: 10px;
  margin-bottom: 22px;
}
.agent-page .ai-agent-message-body { max-width: min(82%, 900px); }
.agent-page .ai-agent-message-body > span,
.agent-page .ai-agent-message-body > small { color: #698293; }
.agent-page .ai-agent-message-text {
  border: 1px solid var(--agent-border);
  border-radius: 5px 12px 12px 12px;
  background: #0c2030;
  color: #d7e4eb;
}
.agent-page .ai-agent-message.is-user .ai-agent-message-text {
  border-color: rgba(79, 209, 197, .22);
  border-radius: 12px 5px 12px 12px;
  background: #0b3d46;
  color: #effcfa;
}
.agent-page .ai-agent-message.is-failed .ai-agent-message-text {
  border-color: rgba(239, 104, 104, .38);
  background: #35191d;
  color: #f4b5b5;
}
.agent-page .ai-agent-typing { background: #0c2030; }
.agent-page .ai-agent-typing i { background: var(--agent-accent); }
.agent-page .ai-agent-composer {
  /* 输入区贴近对话栏两侧，只保留必要呼吸空间，不再限制成过窄的居中宽度。 */
  padding: 12px 14px 14px;
  border-top-color: var(--agent-border);
  background: #081927;
}
.agent-page .ai-agent-composer textarea {
  min-height: 72px;
  border-color: var(--agent-border);
  border-radius: 9px;
  background: #06131f;
  color: var(--agent-text);
}
.agent-page .ai-agent-composer textarea::placeholder { color: #607a8d; }
.agent-page .ai-agent-composer textarea:focus {
  border-color: var(--agent-accent);
  box-shadow: 0 0 0 3px rgba(79, 209, 197, .1);
}
.agent-page .ai-agent-composer-footer > span { color: var(--agent-text-muted); }
.agent-page .ai-agent-message-tools {
  display: flex;
  min-height: 26px;
  align-items: center;
  gap: 6px;
  margin: 5px 3px 0;
}
.agent-page .ai-agent-message.is-user .ai-agent-message-tools { justify-content: flex-end; }
.agent-page .ai-agent-message-tools > small {
  color: #698293;
  font-size: 10px;
}
.agent-page .ai-agent-copy-message {
  display: inline-flex;
  min-width: 50px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #7891a2;
  font-size: 10px;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.agent-page .ai-agent-copy-message img {
  width: 13px;
  height: 13px;
  opacity: .55;
  filter: invert(1);
}
.agent-page .ai-agent-copy-message:hover,
.agent-page .ai-agent-copy-message:focus-visible {
  border-color: var(--agent-border);
  outline: none;
  background: #102638;
  color: #c7d6de;
}
.agent-page .ai-agent-copy-message:hover img,
.agent-page .ai-agent-copy-message:focus-visible img { opacity: .85; }
.agent-page .ai-agent-copy-message.is-copied {
  border-color: rgba(79, 209, 197, .32);
  background: #0b3036;
  color: #78dfd3;
}
.agent-page .ai-agent-copy-message.is-error { color: #e9a0a0; }

/* 专业开场、结构化成果和跨智能体引用继续使用原功能，只统一为深色信息层级。 */
.agent-page .ai-agent-starter-group {
  border-color: var(--agent-border);
  border-radius: 10px;
  background: var(--agent-surface);
  box-shadow: none;
}
.agent-page .ai-agent-starter-heading strong { color: var(--agent-text); }
.agent-page .ai-agent-starter-heading p { color: var(--agent-text-muted); }
.agent-page .ai-agent-starter-heading small {
  background: #102638;
  color: #8ea5b5;
}
.agent-page .ai-agent-starter-grid button {
  border-color: var(--agent-border);
  border-radius: 8px;
  background: #071725;
}
.agent-page .ai-agent-starter-grid button:hover {
  border-color: var(--agent-border-strong);
  background: #0d2434;
  box-shadow: none;
}
.agent-page .ai-agent-starter-grid button strong { color: #d6e4eb; }
.agent-page .ai-agent-starter-grid button span { color: #7f97a7; }
.agent-page .ai-agent-starter-grid button i,
.agent-page .ai-agent-starter-more { color: var(--agent-accent); }
.agent-page .ai-agent-reference-chip {
  border-color: rgba(79, 209, 197, .28);
  border-radius: 8px;
  background: #0c2c36;
  color: #bdd1da;
}
.agent-page .ai-agent-reference-chip span { color: var(--agent-accent); }
.agent-page .ai-agent-reference-chip strong { color: #b8d5dc; }
.agent-page .ai-agent-reference-chip p { color: #9db3bf; }
.agent-page .ai-agent-reference-chip button { color: #89a6b4; }
.agent-page .ai-agent-reference-chip button:hover { background: #143d48; color: #dffaf7; }
.agent-page .ai-agent-message.is-user .ai-agent-reference-chip {
  border-color: rgba(79, 209, 197, .24);
  background: #0a2730;
}
.agent-page .ai-agent-artifact-card {
  border-color: var(--agent-border);
  border-radius: 9px;
  background: #0a1d2c;
  box-shadow: none;
}
.agent-page .ai-agent-artifact-head span {
  background: #123448;
  color: #7ddbd2;
}
.agent-page .ai-agent-artifact-head small { color: #688293; }
.agent-page .ai-agent-artifact-card h4 { color: #eef6fa; }
.agent-page .ai-agent-artifact-reason { background: #071725; }
.agent-page .ai-agent-artifact-reason strong { color: #7f98a8; }
.agent-page .ai-agent-artifact-reason p { color: #adbec8; }
.agent-page .ai-agent-rule-hits span { background: #102638; color: #90a8b7; }
.agent-page .ai-agent-artifact-actions button {
  border-color: rgba(79, 209, 197, .42);
  border-radius: 7px;
  background: #0a2630;
  color: #7de0d5;
}
.agent-page .ai-agent-artifact-actions button:last-child {
  border-color: #2d6df0;
  background: var(--agent-blue);
  color: #fff;
}

/* 聊天右侧专业依据面板只展示当前真实配置，不制造额外业务状态。 */
.agent-page .ai-agent-evidence-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 15px 12px;
  overflow-y: auto;
  background: #071725;
}
.agent-page .ai-agent-evidence-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px 13px;
  border-bottom: 1px solid var(--agent-border);
}
.agent-page .ai-agent-evidence-head span { color: var(--agent-text); font-size: 13px; font-weight: 700; }
.agent-page .ai-agent-evidence-head small { color: var(--agent-text-muted); font-size: 9px; }
.agent-page .ai-agent-evidence-panel section {
  padding: 15px 2px;
  border-bottom: 1px solid var(--agent-border);
}
.agent-page .ai-agent-evidence-panel h2 {
  margin: 0 0 10px;
  color: #7891a2;
  font-size: 10px;
  font-weight: 650;
}
.agent-page .ai-agent-evidence-agent {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.agent-page .ai-agent-evidence-agent > div { min-width: 0; }
.agent-page .ai-agent-evidence-agent strong,
.agent-page .ai-agent-evidence-agent span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-page .ai-agent-evidence-agent strong { color: var(--agent-text); font-size: 12px; }
.agent-page .ai-agent-evidence-agent span { margin-top: 4px; color: var(--agent-accent); font-size: 10px; }
.agent-page .ai-agent-evidence-panel dl { display: grid; gap: 10px; margin: 0; }
.agent-page .ai-agent-evidence-panel dl > div { display: grid; gap: 3px; }
.agent-page .ai-agent-evidence-panel dt { color: #687f90; font-size: 9px; }
.agent-page .ai-agent-evidence-panel dd { margin: 0; color: #b7c8d2; font-size: 11px; line-height: 1.45; }
.agent-page .ai-agent-evidence-reference {
  padding: 10px;
  border: 1px solid var(--agent-border);
  border-radius: 7px;
  background: #0a1d2c;
}
.agent-page .ai-agent-evidence-reference strong,
.agent-page .ai-agent-evidence-reference span { display: block; }
.agent-page .ai-agent-evidence-reference strong { color: var(--agent-accent); font-size: 15px; }
.agent-page .ai-agent-evidence-reference span { margin-top: 4px; color: #7790a0; font-size: 9px; line-height: 1.5; }
.agent-page .ai-agent-evidence-note {
  margin: auto 0 0;
  padding: 14px 2px 2px;
  color: #60798b;
  font-size: 9px;
  line-height: 1.7;
}

/* 转交弹窗保持完整功能，并与聊天室主题一致。 */
.agent-page .ai-agent-transfer-overlay { background: rgba(1, 8, 15, .76); }
.agent-page .ai-agent-transfer-dialog {
  border-color: var(--agent-border);
  border-radius: 12px;
  background: #091a28;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
}
.agent-page .ai-agent-transfer-dialog > span { color: var(--agent-accent); }
.agent-page .ai-agent-transfer-dialog > h3 { color: var(--agent-text); }
.agent-page .ai-agent-transfer-close { background: #102638; color: #9db0bc; }
.agent-page .ai-agent-transfer-preview { border-color: var(--agent-border); background: #071725; }
.agent-page .ai-agent-transfer-preview strong { color: var(--agent-accent); }
.agent-page .ai-agent-transfer-preview p { color: #adbec8; }
.agent-page .ai-agent-transfer-grid > button {
  border-color: var(--agent-border);
  border-radius: 8px;
  background: #0a1d2c;
  color: var(--agent-text);
}
.agent-page .ai-agent-transfer-grid > button:hover { border-color: var(--agent-border-strong); background: #0d2434; }
.agent-page .ai-agent-transfer-grid > button span strong { color: #dce9ef !important; }
.agent-page .ai-agent-transfer-grid > button span small,
.agent-page .ai-agent-transfer-tip { color: var(--agent-text-muted); }
.agent-page .ai-agent-transfer-grid > button i { color: #79a8df; }

/* 普通文字回答逐字呈现；成果卡片仍等待服务端完整校验后一次展示。 */
.agent-page .ai-agent-message-text.is-streaming { min-height: 24px; }
.agent-page .ai-agent-stream-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  border-radius: 2px;
  background: var(--agent-accent);
  vertical-align: -.12em;
  animation: ai-agent-stream-blink .82s steps(1) infinite;
}
@keyframes ai-agent-stream-blink { 0%,48% { opacity: 1; } 49%,100% { opacity: .16; } }

@media (min-width: 1800px) {
  .agent-page .ai-agent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1350px) {
  .agent-page .ai-agent-chat-shell { grid-template-columns: 210px minmax(0, 1fr) 204px; }
  .agent-page .ai-agent-conversation-head p { max-width: 300px; }
}

@media (max-width: 1280px) {
  .agent-page .ai-agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-page .ai-agent-hall { padding: 22px; }
  .agent-page .ai-agent-chat-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .agent-page .ai-agent-evidence-panel { display: none; }
  .agent-page .ai-agent-conversation { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-page .ai-agent-card,
  .agent-page .ai-agent-new-conversation { transition: none; }
  .agent-page .ai-agent-card:hover { transform: none; }
  .agent-page .ai-agent-new-conversation:hover { transform: none; }
}
/* 短视频解析日志：沿用后台卡片、表格和品牌色，只强化运行状态层级。 */
.parser-log-heading,
.parser-section-head,
.parser-node-title,
.parser-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.parser-log-heading .admin-tip { margin-bottom: 0; }
.parser-log-live {
  min-width: 190px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 8px;
  padding: 12px 16px;
  border: 1px solid #e6e8ef;
  border-radius: 12px;
  background: #fff;
  color: #252936;
  font-weight: 700;
}
.parser-log-live small { grid-column: 2; color: #8b91a0; font-size: 12px; font-weight: 400; }
.parser-health-dot { width: 9px; height: 9px; border-radius: 50%; background: #aeb4c0; }
.parser-health-dot.is-online { background: #20a675; box-shadow: 0 0 0 4px rgba(32,166,117,.12); }
.parser-health-dot.is-warning { background: #e69a24; box-shadow: 0 0 0 4px rgba(230,154,36,.12); }
.parser-health-dot.is-offline { background: #cf5264; box-shadow: 0 0 0 4px rgba(207,82,100,.12); }

.parser-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 16px;
}
.parser-summary-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e8eaf0;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff 0%, #fafaff 100%);
  box-shadow: 0 8px 24px rgba(34,37,55,.035);
}
.parser-summary-card > span { display: block; color: #737988; font-size: 13px; }
.parser-summary-card > strong { display: block; margin: 9px 0 7px; color: #212432; font-size: 28px; line-height: 1; }
.parser-summary-card > strong small { color: #707686; font-size: 13px; font-weight: 500; }
.parser-summary-card > em { display: block; overflow: hidden; color: #9297a5; font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.parser-diagnostics-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, .8fr); gap: 16px; margin-bottom: 16px; }
.parser-node-section,
.parser-queue-section,
.parser-task-section { padding: 20px; }
.parser-section-head { align-items: center; margin-bottom: 16px; }
.parser-section-head span { color: #8a90a0; font-size: 12px; }
.parser-section-head h2 { margin: 3px 0 0; color: #292d3a; font-size: 18px; }
.parser-node-list { display: grid; gap: 12px; }
.parser-node-card { padding: 16px; border: 1px solid #e5e7ee; border-left: 3px solid #aeb4c0; border-radius: 12px; background: #fff; }
.parser-node-card.is-online { border-left-color: #20a675; }
.parser-node-card.is-warning { border-left-color: #e69a24; }
.parser-node-card.is-offline { border-left-color: #cf5264; }
.parser-node-title > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.parser-node-title strong { color: #292d3a; font-size: 15px; }
.parser-node-title small { color: #9297a5; }
.parser-node-title > b { padding: 4px 9px; border-radius: 999px; background: #f1f2f6; color: #6e7482; font-size: 12px; }
.parser-node-card.is-online .parser-node-title > b { background: #eaf8f3; color: #16825b; }
.parser-node-card.is-warning .parser-node-title > b { background: #fff5df; color: #a66a0e; }
.parser-node-card.is-offline .parser-node-title > b { background: #fff0f2; color: #b33e51; }
.parser-node-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.parser-node-meta span { padding: 9px 10px; border-radius: 9px; background: #f7f8fb; color: #8a90a0; font-size: 11px; }
.parser-node-meta strong { display: block; margin-top: 3px; overflow: hidden; color: #333745; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.parser-risk-row { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 10px; align-items: center; margin-top: 11px; padding: 10px 12px; border-radius: 9px; background: #edf8f4; color: #26745a; font-size: 12px; }
.parser-risk-row.is-open { background: #fff2e5; color: #a15b12; }
.parser-risk-row em { font-style: normal; text-align: right; }
.parser-node-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; color: #9297a5; font-size: 11px; }
.parser-node-error { margin: 10px 0 0; padding: 9px 11px; border-radius: 8px; background: #fff2f4; color: #a83e50; font-size: 12px; }
.parser-node-error strong { margin-right: 8px; }

.parser-queue-list { display: grid; gap: 8px; }
.parser-queue-list > div,
.parser-error-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.parser-queue-list span { display: flex; align-items: center; gap: 8px; color: #666c7a; font-size: 13px; }
.parser-queue-list strong { color: #2c303d; font-size: 18px; }
.parser-status-mark { width: 7px; height: 7px; border-radius: 50%; background: #aeb4c0; }
.parser-status-mark.is-pending { background: #7b83d6; }
.parser-status-mark.is-processing { background: #2b88d8; }
.parser-status-mark.is-retry_wait { background: #e69a24; }
.parser-status-mark.is-success { background: #20a675; }
.parser-status-mark.is-failed { background: #cf5264; }
.parser-error-list { margin-top: 22px; }
.parser-error-list h3 { margin: 0 0 7px; font-size: 14px; }
.parser-error-list code { color: #9a4352; font-size: 11px; }
.parser-error-list p { color: #9ba0ad; font-size: 12px; }

.parser-task-section .admin-toolbar { margin: 0 0 14px; }
.parser-task-table td { vertical-align: top; }
.parser-task-table td:nth-child(3) { min-width: 220px; max-width: 340px; }
.parser-task-table td:nth-child(3) small { display: block; overflow: hidden; max-width: 320px; text-overflow: ellipsis; white-space: nowrap; }
.parser-task-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #f0f1f5; color: #6e7482; font-size: 12px; font-weight: 700; white-space: nowrap; }
.parser-task-status.is-processing { background: #eaf4ff; color: #1873bd; }
.parser-task-status.is-retry_wait { background: #fff4dc; color: #9c650f; }
.parser-task-status.is-success { background: #eaf8f3; color: #16825b; }
.parser-task-status.is-failed { background: #fff0f2; color: #b33e51; }
.parser-error-code { color: #b34a5b; }
.parser-detail-head { margin: 8px 0 16px; }
.parser-detail-head span { color: #8c92a1; font-size: 12px; }
.parser-detail-head h2 { margin: 4px 0; font-size: 18px; }
.parser-detail-head p { margin: 0; color: #777d8b; }
.parser-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.parser-detail-grid > span { padding: 11px; border: 1px solid #eceef3; border-radius: 9px; color: #8b91a0; font-size: 11px; }
.parser-detail-grid strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #343845; font-size: 13px; }
.parser-detail-error { margin-top: 12px; padding: 12px; border-radius: 9px; background: #fff0f2; color: #a83e50; }
.parser-detail-error p { margin: 4px 0 0; }
.parser-json-detail { margin-top: 14px; }
.parser-json-detail summary { cursor: pointer; color: #575e6f; font-weight: 600; }
.parser-json-detail pre { max-height: 420px; overflow: auto; padding: 14px; border-radius: 9px; background: #242733; color: #e9ecf4; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1180px) {
  .parser-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parser-diagnostics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .parser-log-heading { display: block; }
  .parser-log-live { margin-top: 12px; }
  .parser-summary-grid,
  .parser-node-meta,
  .parser-detail-grid { grid-template-columns: 1fr 1fr; }
  .parser-risk-row { grid-template-columns: 1fr; }
  .parser-risk-row em { text-align: left; }
}

/* 爆款二创“内容导演台”：沿用工作台深色体系，解析资料与生成决策保持在同一视觉层。 */
.douyin-material-profile {
  display: grid;
  grid-template-columns: minmax(330px, .74fr) minmax(0, 1.56fr);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(159, 227, 210, .20);
  border-radius: 8px;
  background: rgba(5, 14, 27, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 18px 42px rgba(0, 0, 0, .20);
}
.douyin-material-hero {
  display: block;
  border-right: 1px solid rgba(148, 163, 184, .14);
  background: transparent;
}
.douyin-material-video {
  min-height: 190px;
  border-right: 0;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  border-radius: 0;
  background: #030914;
}
.douyin-material-video video { min-height: 190px; max-height: 218px; }
.douyin-material-intro { padding: 14px 16px 16px; }
.douyin-material-kicker span { color: #9fe3d2; letter-spacing: .08em; }
.douyin-material-kicker em {
  border: 1px solid rgba(159, 227, 210, .20);
  background: rgba(20, 184, 166, .09);
  color: #c8efe6;
}
.douyin-material-intro h3 { margin: 8px 0 10px; color: #f9f8f3; font-size: clamp(18px, 1.55vw, 22px); }
.douyin-author-line img { border-color: rgba(159, 227, 210, .22); }
.douyin-author-line strong { color: #e8f2fb; }
.douyin-author-line span { color: #8197ad; }
.douyin-author-line b { border: 1px solid rgba(250, 204, 21, .20); background: rgba(217, 119, 6, .10); color: #fcd34d; }
.douyin-primary-stats { gap: 1px; margin: 10px 0; border: 1px solid rgba(148, 163, 184, .12); background: rgba(148, 163, 184, .12); }
.douyin-primary-stats div { padding: 7px 5px; border-radius: 0; background: rgba(6, 16, 30, .96); }
.douyin-primary-stats strong { color: #dffefa; font-size: 18px; }
.douyin-primary-stats span { color: #7890a8; }
.douyin-material-facts span { border-color: rgba(148, 163, 184, .13); border-radius: 7px; color: #738aa2; background: rgba(20, 38, 36, .46); }
.douyin-material-facts strong { color: #b8c9da; }
.douyin-material-detail-grid { grid-template-columns: minmax(0, 1.72fr) minmax(230px, .78fr); gap: 10px; padding: 12px; }
.douyin-material-panel { padding: 15px; border-color: rgba(148, 163, 184, .14); border-radius: 8px; background: rgba(10, 22, 39, .78); }
.douyin-transcript-panel { grid-column: 1; grid-row: span 2; }
.douyin-panel-head span { color: #9fe3d2; letter-spacing: .05em; }
.douyin-panel-head h4 { color: #eef7ff; }
.douyin-panel-head em { color: #738ba2; }
.douyin-transcript-panel pre { max-height: 420px; color: #b8cadb; font-size: 14px; line-height: 1.85; scrollbar-color: rgba(159, 227, 210, .28) transparent; }
.douyin-transcript-warning { margin-top: 14px; padding: 16px; border: 1px solid rgba(251, 191, 36, .22); border-radius: 8px; background: rgba(120, 53, 15, .12); }
.douyin-transcript-warning strong { display: block; color: #fcd34d; font-size: 14px; }
.douyin-transcript-warning p { margin-top: 7px; color: #a9b8c8; font-size: 13px; line-height: 1.75; }
.douyin-account-stats { gap: 1px; border: 1px solid rgba(148, 163, 184, .10); background: rgba(148, 163, 184, .10); }
.douyin-account-stats span { border-radius: 0; background: rgba(7, 17, 31, .92); color: #71869b; }
.douyin-account-stats strong { color: #d6e5f2; }
.douyin-material-panel > p { color: #8fa4b8; }
.douyin-hashtags span { border: 1px solid rgba(34, 211, 238, .18); background: rgba(14, 138, 124, .10); color: #7ad9d2; }
.douyin-hashtags em { color: #6f8499; }
.douyin-music-row { border-top-color: rgba(148, 163, 184, .12); }
.douyin-music-row strong { color: #d7e4f0; }
.douyin-music-row span { color: #74899f; }
.douyin-music-row > em { color: #9fe3d2; }
.douyin-comment-panel { grid-column: 1 / -1; }
.douyin-comment-panel summary { padding: 17px 18px; }
.douyin-comment-panel summary span { color: #dce9f4; }
.douyin-comment-panel summary strong { color: #9fe3d2; }
.douyin-comment-panel article { border-top-color: rgba(148, 163, 184, .12); }
.douyin-comment-panel article strong { color: #dce8f2; }
.douyin-comment-panel article p { color: #9eb0c1; }
.douyin-comment-panel article span { color: #70869b; }

.viral-director-console {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(159, 227, 210, .19);
  border-radius: 8px;
  background: rgba(5, 14, 27, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.viral-director-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.viral-director-heading h3 { margin: 5px 0 0; color: #f9f8f3; font-size: 21px; }
.viral-director-heading > p { max-width: 460px; color: #8499ad; font-size: 13px; text-align: right; }
.viral-generation-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.viral-generation-mode {
  display: grid;
  position: relative;
  gap: 7px;
  min-height: 116px;
  padding: 17px 18px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  color: #c7d5e2;
  text-align: left;
  background: rgba(10, 21, 38, .72);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.viral-generation-mode:hover { transform: translateY(-1px); border-color: rgba(159, 227, 210, .36); }
.viral-generation-mode > span { width: max-content; padding: 3px 7px; border-radius: 5px; background: rgba(148, 163, 184, .10); color: #8fa4b8; font-size: 10px; font-weight: 800; }
.viral-generation-mode > strong { color: #e9f3fb; font-size: 16px; }
.viral-generation-mode > small { color: #7f94a8; font-size: 12px; line-height: 1.6; }
.viral-generation-mode.active { border-color: rgba(159, 227, 210, .72); background: rgba(13, 78, 86, .28); box-shadow: inset 0 0 0 1px rgba(159, 227, 210, .08); }
.viral-generation-mode.active::after { content: '已选择'; position: absolute; top: 16px; right: 16px; color: #9fe3d2; font-size: 11px; font-weight: 800; }
.viral-generation-mode.active > span { background: rgba(20, 184, 166, .14); color: #c8efe6; }
.viral-generation-mode.active > strong { color: #c8efe6; }
.viral-generation-brief-grid { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); gap: 12px; align-items: stretch; }
.viral-generation-brief-grid .video-script-input-label { align-content: start; padding: 15px; border: 1px solid rgba(148, 163, 184, .13); border-radius: 8px; background: rgba(8, 18, 33, .68); }
.viral-generation-brief-grid .video-script-input-label > em { margin-left: 6px; color: #71879c; font-size: 11px; font-style: normal; font-weight: 600; }
.viral-director-console .admin-textarea { border-color: rgba(148, 163, 184, .15); color: #d4e1ec; background: rgba(2, 9, 19, .74); box-shadow: none; }
.viral-director-console .admin-textarea:focus { border-color: rgba(159, 227, 210, .58); box-shadow: 0 0 0 3px rgba(20, 184, 166, .08); }
.viral-extra-remark-label > small { color: #71889e; font-size: 11px; font-weight: 600; line-height: 1.6; }
.viral-director-actions { margin-top: 0; }
.viral-director-actions .btn-primary { min-width: 220px; }

@media (max-width: 1120px) {
  .douyin-material-profile { display: block; }
  .douyin-material-hero { display: grid; grid-template-columns: 280px minmax(0, 1fr); border-right: 0; border-bottom: 1px solid rgba(148, 163, 184, .14); }
  .douyin-material-video { min-height: 280px; border-right: 1px solid rgba(148, 163, 184, .14); border-bottom: 0; }
  .douyin-material-video video { min-height: 280px; max-height: 360px; }
  .douyin-primary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
  .douyin-material-detail-grid { grid-template-columns: 1fr; }
  .douyin-transcript-panel, .douyin-comment-panel { grid-column: 1; grid-row: auto; }
  .viral-generation-brief-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .douyin-material-hero, .viral-generation-mode-grid { grid-template-columns: 1fr; }
  .douyin-material-video { min-height: 280px; border-right: 0; border-bottom: 1px solid rgba(148, 163, 184, .14); }
  .douyin-material-video video { min-height: 280px; }
  .douyin-material-intro { padding: 18px; }
  .douyin-material-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viral-director-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .viral-director-heading > p { text-align: left; }
  .viral-director-actions .btn-primary { width: 100%; min-width: 0; }
}

/* 后台开通会员返佣规则提示。 */
.admin-form-note {
  margin: 0;
  padding: 11px 13px;
  border-left: 3px solid #22c55e;
  color: #9eb4c7;
  background: rgba(20, 38, 36, .58);
  font-size: 12px;
  line-height: 1.7;
}

.admin-table-muted {
  color: #647063;
}

.user-vip-commission-table td small {
  color: #7f94a8;
  line-height: 1.6;
}

/* 意见收集箱：延续工作台深色工具界面，提交与进度在一个视野内完成。 */
/* 顶部意见收集弹窗：保留当前工作上下文，不再占用左侧业务导航。 */
.feedback-modal-mask {
  position: fixed;
  z-index: 1550;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(1, 7, 17, .78);
  backdrop-filter: blur(10px);
}

.feedback-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1080px, calc(100vw - 56px));
  max-height: min(850px, calc(100vh - 56px));
  overflow: hidden;
  border: 1px solid rgba(159, 227, 210, .28);
  border-radius: 8px;
  background: #0c1f1e;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .58), 0 0 0 1px rgba(56, 189, 248, .06) inset;
}

.feedback-modal-head {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  background: linear-gradient(110deg, rgba(13, 38, 55, .98), rgba(13, 32, 30, .98));
}

.feedback-modal-title { display: flex; min-width: 0; align-items: center; gap: 13px; }
.feedback-modal-title > span { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 8px; color: #0e2622; background: #9fe3d2; box-shadow: 0 10px 25px rgba(53, 193, 172, .2); font-size: 22px; font-weight: 900; }
.feedback-modal-title small { color: #9fe3d2; font-size: 9px; font-weight: 900; }
.feedback-modal-title h2 { margin: 2px 0 0; color: #f6f5ef; font-size: 22px; line-height: 1.1; }
.feedback-modal-title p { margin: 5px 0 0; color: #8296aa; font-size: 11px; }
.feedback-modal-close { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(148, 163, 184, .18); border-radius: 7px; color: #a8b8c8; background: rgba(15, 28, 45, .8); cursor: pointer; font-size: 22px; line-height: 1; transition: .18s ease; }
.feedback-modal-close:hover { color: #fff; border-color: rgba(159, 227, 210, .42); background: rgba(20, 184, 166, .16); }

.feedback-modal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  background: #081728;
}

.feedback-modal-summary > div { display: flex; min-height: 58px; align-items: baseline; justify-content: center; gap: 8px; padding: 12px; border-right: 1px solid rgba(148, 163, 184, .1); }
.feedback-modal-summary > div:last-child { border-right: 0; }
.feedback-modal-summary strong { color: #f4fbff; font-size: 21px; }
.feedback-modal-summary span { color: #7890a6; font-size: 11px; }

.feedback-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr);
  min-height: 0;
  overflow: hidden;
}

.feedback-modal-compose,
.feedback-modal-history { min-width: 0; min-height: 0; padding: 20px; overflow-y: auto; }
.feedback-modal-compose { border-right: 1px solid rgba(148, 163, 184, .12); }
.feedback-modal-history { background: rgba(4, 13, 25, .62); }
.feedback-modal-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.feedback-modal-section-title small { color: #9fe3d2; font-size: 9px; font-weight: 900; }
.feedback-modal-section-title h3 { margin: 3px 0 0; color: #eef7ff; font-size: 18px; }
.feedback-modal-section-title > span { color: #6f8599; font-size: 10px; text-align: right; }
.feedback-modal-history-list { display: grid; gap: 9px; }
.feedback-modal-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; color: #71869a; font-size: 10px; }
.feedback-modal-pager > div { display: flex; gap: 7px; }
.feedback-modal-pager .btn { min-height: 34px; padding: 0 11px; }
.feedback-submit-row p.is-success { color: #8fdfc9; }

.feedback-modal-loading,
.feedback-modal-error { display: grid; min-height: 400px; place-content: center; justify-items: center; padding: 30px; color: #7f94a8; text-align: center; }
.feedback-modal-loading { grid-row: 2 / 4; }
.feedback-modal-loading span { width: 30px; height: 30px; margin-bottom: 13px; border: 3px solid rgba(159, 227, 210, .16); border-top-color: #9fe3d2; border-radius: 50%; animation: spin .8s linear infinite; }
.feedback-modal-loading strong,
.feedback-modal-error strong { color: #e7f2fa; font-size: 17px; }
.feedback-modal-loading p,
.feedback-modal-error p { max-width: 520px; margin: 7px 0 16px; font-size: 12px; line-height: 1.7; }

.feedback-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, .72fr);
  gap: 14px;
  margin-bottom: 14px;
}

.feedback-compose,
.feedback-overview,
.feedback-history {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(8, 18, 34, .72);
}

.feedback-compose { padding: 22px; }
.feedback-compose-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.feedback-compose-head span,
.feedback-overview > span,
.feedback-history > header span { color: #9fe3d2; font-size: 10px; font-weight: 900; letter-spacing: 0; }
.feedback-compose-head h2,
.feedback-overview h3,
.feedback-history > header h2 { margin: 5px 0 0; color: #f6f5ef; }
.feedback-compose-head h2 { font-size: 23px; }
.feedback-compose-head p { margin: 7px 0 0; color: #8296aa; font-size: 13px; }
.feedback-compose-head > b { flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(159, 227, 210, .2); border-radius: 6px; color: #97eadf; background: rgba(20, 184, 166, .08); font-size: 10px; font-weight: 800; }

.feedback-form { display: grid; gap: 14px; }
.feedback-form label { position: relative; display: grid; gap: 7px; color: #cfd2c8; font-size: 12px; font-weight: 800; }
.feedback-form label > span { display: flex; align-items: center; gap: 7px; }
.feedback-form label > span i { color: #647063; font-size: 10px; font-style: normal; }
.feedback-form input,
.feedback-form textarea { width: 100%; min-width: 0; border: 1px solid rgba(148, 163, 184, .18); border-radius: 7px; outline: 0; color: #eaf4ff; background: #071421; font: inherit; transition: border-color .18s ease, box-shadow .18s ease; }
.feedback-form input { height: 44px; padding: 0 13px; }
.feedback-form textarea { min-height: 148px; padding: 12px 13px 28px; resize: vertical; line-height: 1.7; }
.feedback-form input:focus,
.feedback-form textarea:focus { border-color: rgba(159, 227, 210, .56); box-shadow: 0 0 0 3px rgba(53, 193, 172, .08); }
.feedback-form label > small { position: absolute; right: 11px; bottom: 9px; color: #61768a; font-size: 10px; font-weight: 700; }
.feedback-category { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.feedback-category button { min-height: 38px; border: 1px solid rgba(148, 163, 184, .16); border-radius: 7px; color: #8da1b6; background: rgba(15, 30, 49, .9); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; transition: .18s ease; }
.feedback-category button:hover { color: #d9f8f4; border-color: rgba(159, 227, 210, .3); }
.feedback-category button.is-active { color: #04201d; border-color: transparent; background: #9fe3d2; box-shadow: 0 10px 20px rgba(20, 184, 166, .16); }
.feedback-submit-row { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 14px; }
.feedback-submit-row p { margin: 0; color: #7dd3fc; font-size: 12px; }
.feedback-submit-row .btn { min-width: 132px; min-height: 44px; justify-content: center; color: #04201d; border-color: transparent; background: #9fe3d2; }

.feedback-overview { padding: 22px; background: linear-gradient(160deg, rgba(10, 32, 50, .96), rgba(13, 32, 30, .94)); }
.feedback-overview h3 { font-size: 20px; }
.feedback-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 19px; border: 1px solid rgba(148, 163, 184, .12); border-radius: 7px; background: rgba(148, 163, 184, .12); }
.feedback-overview-grid > div { display: grid; min-height: 90px; align-content: center; gap: 5px; padding: 14px; background: #091727; }
.feedback-overview-grid strong { color: #f6f5ef; font-size: 27px; }
.feedback-overview-grid small { color: #70869c; font-size: 11px; }
.feedback-overview > p { margin: 18px 0 0; color: #8195a8; font-size: 12px; line-height: 1.7; }

.feedback-history { padding: 20px; }
.feedback-history > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.feedback-history > header h2 { font-size: 20px; }
.feedback-history > header > small { color: #72879b; font-size: 11px; }
.feedback-history-list { display: grid; gap: 9px; }
.feedback-history-item { position: relative; padding: 16px 17px; border: 1px solid rgba(148, 163, 184, .13); border-left: 3px solid #647063; border-radius: 7px; background: rgba(5, 15, 28, .66); }
.feedback-history-item.status-1 { border-left-color: #38bdf8; }
.feedback-history-item.status-2,
.feedback-history-item.status-3 { border-left-color: #34d399; }
.feedback-history-item.status-4 { border-left-color: #98a294; opacity: .82; }
.feedback-history-meta { display: flex; align-items: center; gap: 10px; }
.feedback-history-meta span { color: #7ad9d2; font-size: 11px; font-weight: 800; }
.feedback-history-meta time { color: #61778c; font-size: 10px; }
.feedback-history-meta em { margin-left: auto; padding: 5px 8px; border-radius: 6px; color: #cfd2c8; background: rgba(148, 163, 184, .12); font-size: 10px; font-style: normal; font-weight: 800; }
.feedback-history-item.status-1 .feedback-history-meta em { color: #7dd3fc; background: rgba(56, 189, 248, .1); }
.feedback-history-item.status-2 .feedback-history-meta em,
.feedback-history-item.status-3 .feedback-history-meta em { color: #8fdfc9; background: rgba(52, 211, 153, .1); }
.feedback-history-item h3 { margin: 10px 0 6px; color: #e8f1f8; font-size: 15px; }
.feedback-history-item > p { margin: 0; color: #8ca0b3; font-size: 12px; line-height: 1.75; white-space: pre-wrap; }
.feedback-reply { margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(159, 227, 210, .14); border-radius: 7px; background: rgba(20, 184, 166, .06); }
.feedback-reply span { color: #9fe3d2; font-size: 10px; font-weight: 800; }
.feedback-reply p { margin: 5px 0 0; color: #c9d8e5; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.feedback-waiting { display: block; margin-top: 10px; color: #60758a; font-size: 10px; }
.feedback-empty { padding: 46px 18px; color: #71869a; text-align: center; }
.feedback-empty strong { display: block; color: #dce8f3; font-size: 16px; }
.feedback-empty p { margin: 7px 0 0; font-size: 12px; }
.feedback-side-panel ol { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: feedback-step; }
.feedback-side-panel li { position: relative; padding-left: 36px; counter-increment: feedback-step; }
.feedback-side-panel li::before { position: absolute; top: 0; left: 0; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(159, 227, 210, .2); border-radius: 6px; color: #9fe3d2; content: counter(feedback-step, decimal-leading-zero); font-size: 9px; font-weight: 900; }
.feedback-side-panel li b,
.feedback-side-panel li span { display: block; }
.feedback-side-panel li b { color: #dbe8f2; font-size: 12px; }
.feedback-side-panel li span { margin-top: 3px; color: #70859a; font-size: 10px; line-height: 1.5; }

@media (max-width: 1280px) {
  .feedback-workspace { grid-template-columns: 1fr; }
  .feedback-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feedback-overview-grid > div { min-height: 72px; }
}

@media (max-width: 860px) {
  .feedback-modal-mask { padding: 12px; }
  .feedback-modal { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .feedback-modal-body { grid-template-columns: 1fr; overflow-y: auto; }
  .feedback-modal-compose,
  .feedback-modal-history { overflow: visible; }
  .feedback-modal-compose { border-right: 0; border-bottom: 1px solid rgba(148, 163, 184, .12); }
  .feedback-modal-section-title { align-items: flex-start; }
}

/* 后台意见反馈处理台。 */
.admin-feedback-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.admin-feedback-heading span { color: #0e8a7c; font-size: 11px; font-weight: 900; }
.admin-feedback-heading h1 { margin: 4px 0 0; }
.admin-feedback-heading p { max-width: 760px; margin: 7px 0 0; color: #6b7b8f; font-size: 13px; line-height: 1.65; }
.admin-feedback-heading > b { padding: 9px 11px; border: 1px solid #bae6fd; border-radius: 7px; color: #0369a1; background: #f0f9ff; font-size: 12px; }
.admin-feedback-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 14px; border: 1px solid #dfe7f1; border-radius: 8px; background: #dfe7f1; }
.admin-feedback-summary > div { padding: 16px 18px; background: #fff; }
.admin-feedback-summary span,
.admin-feedback-summary strong { display: block; }
.admin-feedback-summary span { color: #708095; font-size: 12px; }
.admin-feedback-summary strong { margin-top: 5px; color: #132724; font-size: 25px; }
.admin-feedback-filter { display: grid; grid-template-columns: minmax(280px, 1fr) 170px 150px auto; gap: 9px; margin-bottom: 14px; }
.admin-feedback-filter .btn { min-width: 90px; justify-content: center; }
.admin-feedback-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .72fr); align-items: start; gap: 14px; }
.admin-feedback-list { min-width: 0; }
.admin-feedback-list .admin-table { min-width: 680px; table-layout: fixed; }
.admin-feedback-list .admin-table th:nth-child(1) { width: 32%; }
.admin-feedback-list .admin-table th:nth-child(2) { width: 40%; }
.admin-feedback-list .admin-table th:nth-child(3) { width: 12%; }
.admin-feedback-list .admin-table th:nth-child(4) { width: 16%; }
.admin-feedback-list .admin-table td strong,
.admin-feedback-list .admin-table td small { display: block; }
.admin-feedback-list .admin-table td small { max-width: 340px; overflow: hidden; margin-top: 4px; color: #7b8ba0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-feedback-list tbody tr { transition: background-color .16s ease; }
.admin-feedback-list tbody tr.is-selected { background: #f0fdfa; }
.admin-feedback-status { display: inline-flex; min-width: 58px; min-height: 26px; align-items: center; justify-content: center; padding: 0 8px; border-radius: 6px; color: #647063; background: #f1f5f9; font-size: 10px; font-weight: 900; }
.admin-feedback-status.status-1 { color: #0369a1; background: #e0f2fe; }
.admin-feedback-status.status-2,
.admin-feedback-status.status-3 { color: #047857; background: #d1fae5; }
.admin-feedback-status.status-4 { color: #6b7280; background: #e5e7eb; }
.admin-feedback-detail { position: sticky; top: 12px; min-height: 420px; padding: 18px; border: 1px solid #dfe7f1; border-radius: 8px; background: #fff; }
.admin-feedback-detail > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-feedback-detail > header > span { color: #0e8a7c; font-size: 11px; font-weight: 900; }
.admin-feedback-detail h2 { margin: 13px 0 0; color: #172033; font-size: 20px; line-height: 1.45; }
.admin-feedback-user { display: grid; gap: 3px; margin-top: 12px; }
.admin-feedback-user strong { color: #3c4b60; font-size: 12px; }
.admin-feedback-user small { color: #8190a3; font-size: 10px; }
.admin-feedback-content { margin-top: 15px; padding: 13px; border: 1px solid #e4ebf3; border-radius: 7px; color: #4b5d72; background: #f6f5ef; font-size: 12px; line-height: 1.75; white-space: pre-wrap; }
.admin-feedback-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 9px 11px; border-radius: 6px; color: #647063; background: #f6f5ef; font-size: 10px; }
.admin-feedback-contact strong { color: #334155; font-size: 11px; }
.admin-feedback-detail form { display: grid; gap: 11px; margin-top: 16px; padding-top: 15px; border-top: 1px solid #e5ebf2; }
.admin-feedback-detail form label { display: grid; gap: 6px; color: #526177; font-size: 11px; font-weight: 800; }
.admin-feedback-detail form textarea { resize: vertical; line-height: 1.65; }
.admin-feedback-detail form > p { min-height: 16px; margin: 0; color: #0f7d6e; font-size: 11px; }
.admin-feedback-detail form > .btn { min-height: 42px; justify-content: center; }
.admin-feedback-detail-empty { display: grid; min-height: 380px; place-content: center; gap: 6px; color: #7c8ba0; text-align: center; }
.admin-feedback-detail-empty strong { color: #334155; }
.admin-feedback-detail-empty p { margin: 0; font-size: 12px; }

@media (max-width: 1380px) {
  .admin-feedback-layout { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr); }
  .admin-feedback-filter { grid-template-columns: minmax(240px, 1fr) 150px 130px auto; }
}