/* PeakPix 人工交付工作台 · 页面样式（依赖 layout.css 的设计变量与外壳） */

.manual-page svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.manual-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.manual-eyebrow { display: none; }
.dialog-heading .manual-eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--pp-primary); }
.manual-identity { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pp-text-2); }
.manual-heading p { max-width: 720px; }
.manual-refresh svg { width: 16px; height: 16px; }
.manual-sidebar-note { align-items: flex-start; }
.manual-live-dot { position: relative; width: 8px; height: 8px; margin: 6px 4px 0; border-radius: 4px; background: var(--pp-green); flex: none; }
.manual-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: var(--pp-green); animation: pp-ping 2s ease-out infinite; }
.manual-auth { max-width: 640px; margin: 48px auto; padding: 0 16px; text-align: center; color: var(--pp-text-2); }
.manual-auth:empty { display: none; }
.manual-auth.error { color: var(--pp-red-ink); }

/* 流程引导 */
.manual-guide { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.manual-guide li { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius); background: var(--pp-surface); animation: pp-rise .45s var(--pp-ease) both; }
.manual-guide li:nth-child(2) { animation-delay: .06s; }
.manual-guide li:nth-child(3) { animation-delay: .12s; }
.manual-guide li:nth-child(4) { animation-delay: .18s; }
.manual-guide li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -10px; width: 10px; height: 2px; background: var(--pp-primary-line); }
.manual-guide li > span { width: 32px; height: 32px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--pp-primary-soft); color: var(--pp-primary-ink); font-weight: 700; font-size: 13px; flex: none; }
.manual-guide li:nth-child(2) > span { background: var(--pp-orange-soft); color: var(--pp-orange-ink); }
.manual-guide div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.manual-guide strong { font-size: 14px; }
.manual-guide small { font-size: 12px; color: var(--pp-text-3); }

/* 队列 */
.manual-list { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.manual-section-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.manual-section-heading > div { display: flex; flex-direction: column; gap: 2px; }
.manual-section-heading p { font-size: 13px; color: var(--pp-text-3); }
.manual-result-count { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 14px; background: var(--pp-orange-soft); color: var(--pp-orange-ink); font-size: 12px; font-weight: 600; }
.manual-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.manual-state-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--pp-surface-3); }
.manual-state-tabs button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--pp-text-2); font-size: 14px; font-weight: 500; transition: background .15s, color .15s, box-shadow .15s; }
.manual-state-tabs button:hover { color: var(--pp-text); }
.manual-state-tabs button.active { background: var(--pp-surface); color: var(--pp-text); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.manual-search { position: relative; flex: 1 1 320px; max-width: 460px; display: flex; gap: 8px; }
.manual-search svg { position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; color: var(--pp-text-3); }
.manual-search input { padding-left: 36px !important; }
.manual-search button { min-height: 42px; }
.manual-sync-row { display: flex; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--pp-surface-3); font-size: 12px; color: var(--pp-text-3); }
.manual-sync-row p { flex: 1; font-size: 12px; }
.manual-sync-row p.error { color: var(--pp-red-ink); }
.manual-sync-indicator { position: relative; width: 7px; height: 7px; border-radius: 4px; background: var(--pp-green); }
.manual-sync-indicator::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: var(--pp-green); animation: pp-ping 2s ease-out infinite; }
.manual-cases { display: flex; flex-direction: column; gap: 10px; }
.manual-cases[aria-busy="true"] { opacity: .7; transition: opacity .2s; }
.manual-case { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius); background: var(--pp-surface); transition: border-color .2s, box-shadow .2s; }
.pp-entering .manual-case { animation: pp-rise .4s var(--pp-ease) both; }
.manual-case:nth-child(2) { animation-delay: .04s; }
.manual-case:nth-child(3) { animation-delay: .08s; }
.manual-case:nth-child(4) { animation-delay: .12s; }
.manual-case:nth-child(n+5) { animation-delay: .16s; }
.manual-case:hover { border-color: var(--pp-primary-line); box-shadow: var(--pp-shadow-md); }
.manual-case-top { display: flex; align-items: flex-start; gap: 14px; }
.manual-case-icon { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--pp-orange-soft); color: var(--pp-orange-ink); font-weight: 700; }
.manual-case-icon.is-claimed { background: var(--pp-primary-soft); color: var(--pp-primary-ink); }
.manual-case-icon.is-completed { background: var(--pp-green-soft); color: var(--pp-green-ink); }
.manual-case-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.manual-case-heading h3 { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.manual-case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--pp-text-3); }
.manual-account { font-family: var(--pp-mono); color: var(--pp-text-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-wait { color: var(--pp-orange-ink); font-weight: 600; }
.manual-issue-chip, .manual-sev { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.manual-issue-chip::before, .manual-sev::before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid currentColor; }
.manual-issue-chip.is-high, .manual-sev.is-high { background: var(--pp-red-soft); color: var(--pp-red-ink); }
.manual-issue-chip.is-mid, .manual-sev.is-mid { background: var(--pp-orange-soft); color: var(--pp-orange-ink); }
.manual-issue-chip.is-low, .manual-sev.is-low { background: var(--pp-surface-3); color: var(--pp-text-2); }
.manual-issue-chip.is-low::before, .manual-sev.is-low::before { width: 8px; height: 8px; border: 0; border-radius: 4px; background: currentColor; }
.manual-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: 6px; background: var(--pp-orange-soft); color: var(--pp-orange-ink); font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.manual-badge::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; }
.manual-badge.is-claimed { background: var(--pp-primary-soft); color: var(--pp-primary-ink); }
.manual-badge.is-completed { background: var(--pp-green-soft); color: var(--pp-green-ink); }
.manual-case-body { display: flex; flex-direction: column; gap: 10px; padding-left: 54px; }
.manual-error { padding: 10px 12px; border-radius: 8px; background: var(--pp-surface-2); color: var(--pp-text-2); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.manual-card-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.manual-card-bottom details { font-size: 12px; color: var(--pp-text-3); }
.manual-card-bottom summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; }
.manual-card-bottom .secondary { min-height: 36px; padding: 0 14px; }
.manual-case[data-state="pending"] .manual-card-bottom .secondary { border-color: var(--pp-primary); background: var(--pp-primary); color: #fff; font-weight: 600; }
.manual-case-detail-content { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 0; color: var(--pp-text-2); overflow-wrap: anywhere; font-size: 12px; }
.manual-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; text-align: center; color: var(--pp-text-3); }
.manual-empty strong { color: var(--pp-text); font-size: 15px; }
.manual-empty-symbol { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--pp-green-soft); color: var(--pp-green-ink); }
.manual-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 6px; color: var(--pp-text-2); font-size: 13px; }

/* 邮件提醒 */
.manual-mail { padding: 0; overflow: hidden; }
.manual-mail > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; }
.manual-mail > summary::-webkit-details-marker, .manual-mail details > summary::-webkit-details-marker { display: none; }
.manual-mail > summary > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.manual-mail > summary small { font-size: 12px; color: var(--pp-text-3); }
.manual-mail-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--pp-purple-soft); color: var(--pp-purple-ink); }
.manual-details-label { font-size: 13px; color: var(--pp-text-3); }
.manual-chevron { width: 8px; height: 8px; border-right: 1.6px solid var(--pp-text-3); border-bottom: 1.6px solid var(--pp-text-3); transform: rotate(45deg); transition: transform .2s; margin: 0 4px 4px; }
details[open] > summary .manual-chevron { transform: rotate(-135deg); margin-bottom: -2px; }
.manual-mail-content { display: flex; flex-direction: column; gap: 14px; padding: 0 20px 20px; border-top: 1px solid var(--pp-surface-3); }
.manual-mail-intro { padding-top: 14px; font-size: 13px; color: var(--pp-text-2); }
#notificationForm { display: flex; flex-direction: column; gap: 14px; }
.manual-mail-basics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: end; }
.manual-mail-basics label, .manual-smtp label { margin-bottom: 6px; }
.manual-check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; }
.manual-check input { margin-top: 3px; }
.manual-check small { display: block; font-size: 12px; font-weight: 400; color: var(--pp-text-3); }
.manual-smtp-details > summary, .manual-mail-history > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--pp-text-2); }
.manual-smtp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 0; }
.manual-smtp > p, .manual-smtp > .manual-check { grid-column: 1 / -1; font-size: 12px; color: var(--pp-text-3); }
.manual-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#notificationStatus { font-size: 13px; color: var(--pp-text-2); }
#notificationStatus.error { color: var(--pp-red-ink); }
#notificationCounts { font-size: 12px; color: var(--pp-text-3); }
#notificationEvents { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#notificationEvents li { padding: 8px 12px; border-radius: 8px; background: var(--pp-surface-2); font-size: 13px; }
#notificationEvents li p { font-size: 12px; color: var(--pp-text-3); }
.manual-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--pp-text-3); font-size: 12px; }

/* 作品详情：右侧工作台抽屉 */
#caseDetail { width: min(880px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border-radius: 16px 0 0 16px; }
#caseDetail[open] { animation: pp-drawer-in .32s var(--pp-ease) both; }
#caseDetail .dialog-heading { padding: 20px 24px 12px; border-bottom: 1px solid var(--pp-surface-3); }
#caseDetail .dialog-heading > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#caseTitle { font-size: 20px; line-height: 28px; overflow-wrap: anywhere; }
#caseIdentity { font-family: var(--pp-mono); font-size: 12px; color: var(--pp-text-3); overflow-wrap: anywhere; }
.manual-dialog-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 24px 28px; }
.manual-stepper { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.manual-stepper li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius); background: var(--pp-surface); transition: border-color .3s, background .3s; }
.manual-stepper li > span { width: 30px; height: 30px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: var(--pp-surface-3); color: var(--pp-text-3); font-weight: 700; font-size: 13px; flex: none; transition: background .3s, color .3s; }
.manual-stepper li div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.manual-stepper strong { font-size: 13px; }
.manual-stepper small { font-size: 12px; color: var(--pp-text-3); }
.manual-stepper li.active { border-color: var(--pp-primary); background: var(--pp-primary-wash); }
.manual-stepper li.active > span { background: var(--pp-surface); color: var(--pp-primary-ink); box-shadow: 0 0 0 2px var(--pp-primary); }
.manual-stepper li.done > span { background: var(--pp-primary); color: #fff; font-size: 0; }
.manual-stepper li.done > span::after { content: "✓"; font-size: 14px; animation: pp-pop .35s var(--pp-ease) both; }
#caseStatus { font-size: 13px; color: var(--pp-primary-ink); }
#caseStatus:empty { display: none; }
#caseStatus.error { color: var(--pp-red-ink); }
#caseSummary { display: flex; flex-direction: column; gap: 10px; }
.manual-detail-overview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; }
.manual-detail-overview > span:not(.manual-badge) { display: inline-flex; gap: 6px; color: var(--pp-text-2); }
.manual-detail-overview strong { color: var(--pp-text-3); font-weight: 500; }
.manual-detail-failure { font-size: 13px; }
.manual-detail-failure > summary { cursor: pointer; color: var(--pp-text-3); min-height: 30px; }
.manual-detail-failure dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 12px; margin: 6px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--pp-surface-2); }
.manual-detail-failure dt { color: var(--pp-text-3); }
.manual-detail-failure dd { margin: 0; overflow-wrap: anywhere; }

/* 问题诊断 */
.manual-diagnosis { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius); background: var(--pp-surface); }
.manual-diagnosis-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.manual-diagnosis-head > div { display: flex; flex-direction: column; gap: 2px; }
.manual-diagnosis-head h3 { font-size: 15px; }
.manual-diagnosis-head p { font-size: 12px; color: var(--pp-text-3); }
.manual-issue-progress { font-size: 13px; color: var(--pp-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.manual-issue-meter { height: 6px; border-radius: 3px; background: var(--pp-surface-3); overflow: hidden; display: flex; }
.manual-issue-meter span { width: 0; border-radius: 3px; background: var(--pp-green); transition: width .5s var(--pp-ease); }
.manual-issues { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.manual-issue { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 14px 18px; border: 1px solid var(--pp-border); border-radius: 10px; background: var(--pp-surface); transition: border-color .25s, background .25s; }
.pp-entering .manual-issue { animation: pp-rise .35s var(--pp-ease) both; }
.manual-issue:nth-child(2) { animation-delay: .07s; }
.manual-issue:nth-child(3) { animation-delay: .14s; }
.manual-issue:nth-child(n+4) { animation-delay: .2s; }
.manual-issue::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pp-orange); }
.manual-issue.is-high::before { background: var(--pp-red); }
.manual-issue.is-low::before { background: var(--pp-muted); }
.manual-issue.is-handled { border-color: var(--pp-green-line); background: #f6fef9; }
.manual-issue.is-handled::before { background: var(--pp-green); }
.manual-issue.is-handled .manual-issue-title { text-decoration: line-through; color: var(--pp-text-2); }
.manual-issue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.manual-issue-where { font-size: 12px; color: var(--pp-text-2); font-family: var(--pp-mono); overflow-wrap: anywhere; }
.manual-issue-done { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: 6px; background: var(--pp-green-soft); color: var(--pp-green-ink); font-size: 12px; font-weight: 600; animation: pp-pop .35s var(--pp-ease) both; }
.manual-issue-done::before { content: "✓"; }
.manual-issue-title { font-size: 15px; }
.manual-issue dl { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13px; line-height: 1.6; }
.manual-issue dt { color: var(--pp-text-3); }
.manual-issue dd { margin: 0; color: var(--pp-text); overflow-wrap: anywhere; }
.manual-issue > button { align-self: flex-end; min-height: 32px; padding: 0 12px; font-size: 13px; }
.manual-issue > .manual-issue-toggle { border-color: var(--pp-green); background: var(--pp-green); color: #fff; font-weight: 600; }
.manual-issue > .manual-issue-toggle:hover:not(:disabled) { background: #0e8a4c; border-color: #0e8a4c; color: #fff; }
.manual-issue > .manual-issue-toggle:disabled { border-color: var(--pp-border); background: var(--pp-surface-2); color: var(--pp-muted); font-weight: 500; cursor: not-allowed; }
.manual-diagnosis-note { font-size: 12px; color: var(--pp-text-3); }
.manual-diagnosis-note:empty { display: none; }

/* 接管 / 上传 / 交付 */
.manual-claim-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--pp-radius); background: var(--pp-surface-2); }
.manual-claim-panel > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.manual-claim-panel p { font-size: 13px; color: var(--pp-text-2); }
.manual-evidence-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); color: var(--pp-text); font-size: 14px; font-weight: 500; text-decoration: none; }
.manual-evidence-link:hover { border-color: var(--pp-primary-line); color: var(--pp-primary-ink); }
.manual-evidence-link span { margin-left: auto; font-size: 12px; color: var(--pp-text-3); }
.manual-upload-panel, .manual-completed-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius); }
.manual-panel-index { font-family: var(--pp-mono); font-size: 12px; color: var(--pp-muted); }
.manual-file-picker label { display: flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 14px; border: 1.5px dashed #c2cbe0; border-radius: 10px; background: var(--pp-primary-wash); color: var(--pp-primary-ink); font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.manual-file-picker label:hover { border-color: var(--pp-primary); background: var(--pp-primary-soft); }
.manual-file-picker:focus-within label { outline: 2px solid var(--pp-primary); outline-offset: 2px; }
.manual-file-name { display: block; margin-top: 8px; font-size: 13px; color: var(--pp-text-2); overflow-wrap: anywhere; }
#uploadVideo { align-self: flex-start; }
#uploadProgress { height: 8px; }
#uploadStatus { font-size: 13px; color: var(--pp-text-2); }
#uploadStatus.error { color: var(--pp-red-ink); }
.manual-upload-panel.is-verifying #uploadStatus::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 2px solid var(--pp-primary-line); border-top-color: var(--pp-primary); border-radius: 50%; animation: pp-spin .8s linear infinite; }
.manual-upload-panel.is-verifying #uploadProgress::-webkit-progress-value { background: linear-gradient(90deg, var(--pp-primary) 25%, #9db0f5 50%, var(--pp-primary) 75%) 0 0 / 200% 100%; animation: pp-shimmer 1.2s linear infinite; }
.manual-preview-frame { position: relative; overflow: hidden; border-radius: 10px; }
.manual-preview-frame video { display: block; width: 100%; max-height: 52vh; border-radius: 10px; background: #101828; }
.manual-scan { display: none; }
.manual-upload-panel.is-verified .manual-preview-frame video { animation: pp-rise .4s var(--pp-ease) both; }
.manual-upload-panel.is-verified .manual-scan { display: block; position: absolute; left: 0; right: 0; height: 2px; background: #9db0f5; box-shadow: 0 0 12px 3px rgba(157, 176, 245, .7); pointer-events: none; animation: pp-scan 1.1s ease-in-out 2 alternate both; opacity: .9; }
.manual-upload-panel.is-verified .manual-scan { animation-fill-mode: none; }
.manual-delivery-confirm { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--pp-surface-3); }
.manual-delivery-confirm > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.manual-delivery-confirm p { font-size: 13px; color: var(--pp-text-2); }
.manual-review-check { padding: 10px 12px; border: 1px solid var(--pp-orange-line); border-radius: 10px; background: var(--pp-orange-soft); color: var(--pp-orange-deep); font-size: 13px; }
.manual-review-check:has(input:disabled) { opacity: .6; cursor: not-allowed; }
#completeCase:not(:disabled) { box-shadow: 0 0 0 0 rgba(46, 79, 216, .4); animation: pp-pulse-blue 1.8s ease-out infinite; }
.manual-completed-panel { border-color: var(--pp-green-line); background: #f6fef9; animation: pp-rise .4s var(--pp-ease) both; }
.manual-completed-panel h3 { display: flex; align-items: center; gap: 8px; color: var(--pp-green-ink); }
.manual-done-mark { width: 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--pp-green); color: #fff; font-size: 14px; animation: pp-pop .5s var(--pp-ease) .1s both; }
.manual-completed-panel video { width: 100%; max-height: 52vh; border-radius: 10px; background: #101828; }
#completedDownload { align-self: flex-start; }
.manual-event-history > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-weight: 600; font-size: 14px; }
.manual-event-history > summary::-webkit-details-marker { display: none; }
#caseEvents { margin: 6px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--pp-border); list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--pp-text-2); }
#caseEvents li { position: relative; }
#caseEvents li::before { content: ""; position: absolute; left: -21px; top: 7px; width: 8px; height: 8px; border-radius: 4px; background: var(--pp-primary); box-shadow: 0 0 0 2px #fff; }

@keyframes pp-pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(46, 79, 216, .4); } 70%, 100% { box-shadow: 0 0 0 9px rgba(46, 79, 216, 0); } }

@media (max-width: 900px) {
  .manual-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-guide li:nth-child(2)::after { display: none; }
}
@media (max-width: 720px) {
  .manual-guide { grid-template-columns: 1fr; }
  .manual-guide li::after { display: none; }
  .manual-case-body { padding-left: 0; }
  .manual-identity { max-width: 180px; }
  .manual-mail-basics, .manual-smtp { grid-template-columns: 1fr; }
  #caseDetail { border-radius: 0; }
  .manual-stepper { grid-template-columns: 1fr; }
  .manual-dialog-body { padding: 16px; }
  #caseDetail .dialog-heading { padding: 16px; }
}

/* Use the visible mobile viewport while preserving the 100vh fallback. */
.manual-page #caseDetail{width:min(880px,100%);max-width:100%;height:100dvh;max-height:100dvh}

.manual-card-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.manual-case .manual-delete,.manual-actions .manual-delete{border-color:#e6b6b2!important;background:#fff!important;color:#ad2920!important}.manual-delete:hover{background:#fff1f0!important}.manual-state-tabs{flex-wrap:wrap}