.confirmation-view { min-width: 0; padding: 20px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: #f9fbfd; box-shadow: var(--shadow); }
.confirmation-header { min-width: 0; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 15px; margin-bottom: 23px; }
.confirmation-header > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }.confirmation-header svg { width: 24px; height: 24px; }
.confirmation-header h2 { margin: 0; font-size: 19px; line-height: 1.3; }.confirmation-header p { margin: 5px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.confirmation-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(320px, .92fr); gap: 22px; align-items: start; }.confirmation-main { min-width: 0; display: grid; gap: 18px; }.confirmation-side { min-width: 0; display: grid; align-content: start; gap: 12px; }
.confirmation-flow-card, .confirmation-form-card, .confirmation-status-card, .confirmation-rules { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.confirmation-flow-card > h3, .confirmation-status-card > h3 { margin: 0 0 19px; font-size: 16px; }.confirmation-flow { min-width: 0; }
.confirmation-step { --step: var(--brand); --step-soft: #f3f8ff; --step-line: #c8dcf4; min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); }.confirmation-step.is-waiting { --step: #c47b00; --step-soft: #fffaf0; --step-line: #f2d79d; }.confirmation-step.is-completed { --step: #16a34a; --step-soft: #f1fbf5; --step-line: #bce8cb; }.confirmation-step.is-reopened { --step: #7c3aed; --step-soft: #f8f4ff; --step-line: #ddcdf9; }
.confirmation-step-rail { position: relative; padding-top: 18px; }.confirmation-step-rail::after { position: absolute; top: 0; bottom: 0; left: 23px; width: 1px; background: #cfdae5; content: ''; }.confirmation-step:first-child .confirmation-step-rail::after { top: 36px; }.confirmation-step:last-child .confirmation-step-rail::after { bottom: calc(100% - 36px); }
.confirmation-step-rail span { position: relative; z-index: 1; width: 46px; height: 46px; display: grid; place-items: center; border: 8px solid var(--step-soft); border-radius: 50%; background: var(--step); color: #fff; box-shadow: 0 0 0 1px var(--step-line); }.confirmation-step-rail svg { width: 18px; height: 18px; }
.confirmation-step-card { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(210px, 1fr) minmax(260px, .95fr); gap: 22px; align-items: center; min-height: 124px; margin-bottom: 20px; padding: 21px 22px; border: 1px solid var(--step-line); border-radius: var(--radius); background: var(--step-soft); }.confirmation-step-card::before { position: absolute; top: 32px; left: -8px; width: 14px; height: 14px; border: 1px solid var(--step-line); border-top: 0; border-right: 0; background: var(--step-soft); content: ''; transform: rotate(45deg); }
.confirmation-step-copy { min-width: 0; }.confirmation-step-copy h4 { margin: 0 0 10px; color: var(--step); font-size: 15px; }.confirmation-step-copy b { display: block; font-size: 14px; }.confirmation-step-copy p { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.confirmation-step-actions { min-width: 0; display: grid; gap: 9px; }.confirmation-action, .confirmation-file-button, .confirmation-submit { min-width: 0; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--brand); border-radius: 6px; background: var(--surface); color: var(--brand-dark); font-size: 12px; font-weight: 700; }.confirmation-action svg, .confirmation-file-button svg, .confirmation-submit svg { width: 17px; height: 17px; }.confirmation-action.is-primary, .confirmation-submit { background: #1766d6; color: #fff; }.confirmation-action.is-success { border-color: #27ae60; background: #f0fff6; color: #16834a; }.confirmation-action.is-danger { border-color: #ef7278; background: #fff8f8; color: #d9363e; }.confirmation-action.is-outline { color: #173b67; }.confirmation-action.is-purple { border-color: #9c69e8; color: #6f35c2; }.confirmation-action-pair { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirmation-action:disabled, .confirmation-file-button:disabled, .confirmation-submit:disabled { border-color: #d9e1e9; background: #eef2f6; color: #8996a6; cursor: not-allowed; opacity: .72; }.confirmation-step:not(.is-current) .confirmation-step-card { opacity: .78; }.confirmation-step.is-current .confirmation-step-card { box-shadow: 0 3px 12px rgba(15, 23, 42, .08); }
.confirmation-step.is-executing .confirmation-step-actions > .confirmation-action { width: 84%; justify-self: center; }
.confirmation-step-actions small { min-width: 0; display: flex; align-items: flex-start; justify-content: center; gap: 6px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }.confirmation-step-actions small svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; }
.confirmation-rules { padding: 24px; border-color: #bfd9f6; background: #f5faff; }.confirmation-rules h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--brand-dark); font-size: 15px; }.confirmation-rules h3 svg { width: 20px; height: 20px; }.confirmation-rules ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }.confirmation-rules li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; }.confirmation-rules li svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--success); }
.confirmation-form-card { padding: 19px 20px; }.confirmation-form-card h3 { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--brand-dark); font-size: 16px; }.confirmation-form-card h3 svg { width: 21px; height: 21px; }.confirmation-form-card > p { margin: 6px 0 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }.confirmation-form-card label { display: block; margin: 0 0 8px; color: var(--ink); font-size: 13px; font-weight: 700; }.confirmation-form-card label small { color: var(--ink-soft); font-weight: 500; }.confirmation-form-card label em { color: var(--danger); font-style: normal; }.confirmation-form-card textarea { width: 100%; min-height: 72px; display: block; margin-top: 7px; padding: 10px 12px; resize: vertical; border: 1px solid #ccd8e5; border-radius: 6px; color: var(--ink); font-size: 13px; line-height: 1.5; }.confirmation-form-card textarea::placeholder { color: #8291a6; }.confirmation-file-button { justify-content: flex-start; width: auto; margin: 0 0 12px; border-color: #c5d3e2; }.confirmation-submit { width: 100%; min-height: 39px; }
.confirmation-status-card { padding: 19px 20px; }.confirmation-status-card > h3 { margin-bottom: 14px; }.confirmation-status-card dl { display: grid; gap: 12px; margin: 0; }.confirmation-status-card dl > div { min-width: 0; display: grid; grid-template-columns: minmax(135px, 1fr) minmax(120px, .9fr); gap: 13px; align-items: center; }.confirmation-status-card dt { min-width: 0; display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 13px; }.confirmation-status-card dt svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--brand-dark); }.confirmation-status-card dd { min-width: 0; margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }.confirmation-current-status { display: flex; align-items: center; gap: 6px; color: #1766d6; }.confirmation-current-status i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #1766d6; }
.confirmation-warning { min-width: 0; min-height: 48px; display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 14px 16px; border: 1px solid #f0d591; border-radius: var(--radius); background: #fffaf0; color: #574b35; }.confirmation-warning svg { width: 19px; height: 19px; flex: 0 0 19px; color: #d68a00; }.confirmation-warning p { margin: 0; font-size: 13px; line-height: 1.5; }
@media (max-width: 1100px) { .confirmation-layout { grid-template-columns: 1fr; }.confirmation-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }.confirmation-status-card { grid-column: 1 / -1; } }
@media (max-width: 760px) { .confirmation-view { padding: 15px; }.confirmation-step { grid-template-columns: 46px minmax(0, 1fr); }.confirmation-step-rail::after { left: 18px; }.confirmation-step-rail span { width: 38px; height: 38px; border-width: 6px; }.confirmation-step-card { grid-template-columns: 1fr; }.confirmation-action-pair, .confirmation-side { grid-template-columns: 1fr; }.confirmation-status-card { grid-column: auto; }.confirmation-status-card dl > div { grid-template-columns: 1fr; gap: 4px; } }