/* Shared work-portal components; isolated from the exchange forms. */
.vcs-main > .vcs-work { grid-column: 1 / -1; width: 100%; max-width: 900px; min-width: 0; margin-inline: auto; }
.vcs-work { color: #20372e; font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
.vcs-work *, .vcs-work-dialog * { box-sizing: border-box; }
.vcs-work [hidden], .vcs-work-dialog [hidden] { display: none !important; }
.vcs-work .vcs-panel { padding: 28px; margin: 0 0 20px; border: 1px solid #dce8e2; border-radius: 16px; background: #fff; }
.vcs-work h1 { margin: 0 0 18px; font-size: clamp(25px, 4vw, 34px); line-height: 1.25; color: #086b49; }
.vcs-work h2 { font-size: 22px; line-height: 1.4; margin: 0 0 18px; text-align: left; }
.vcs-work h3 { font-size: 18px; line-height: 1.45; margin: 24px 0 12px; }
.vcs-work p { margin: 12px 0; }
.vcs-work a { color: #08764f; }
.vcs-work-entry { max-width: 740px; margin-inline: auto !important; }
.vcs-work-entry > p { margin: 20px 0 30px; line-height: 1.8; }
.vcs-work-heading { background: #eef9f2 !important; }
.vcs-work-heading p { margin-bottom: 0; }
.vcs-work-form { margin: 16px 0; max-width: 100%; }
.vcs-work-field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 17px; font-weight: 500; min-width: 0; }
.vcs-work-field input, .vcs-work-field textarea, .vcs-work-field select { display: block; width: 100%; min-width: 0; margin: 0; padding: 11px 13px; font: inherit; color: #20372e; background: #fff; border: 1px solid #bacdc2; border-radius: 8px; }
.vcs-work-field textarea { resize: vertical; min-height: 120px; }
.vcs-work-field small { color: #617769; font-weight: 400; }
.vcs-work input:focus, .vcs-work textarea:focus, .vcs-work select:focus, .vcs-work-dialog input:focus, .vcs-work-dialog textarea:focus { outline: 2px solid #199668; outline-offset: 2px; }
.vcs-work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
.vcs-work .vcs-btn, .vcs-work-dialog .vcs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 19px; font: 600 15px/1.45 system-ui, sans-serif; white-space: normal; text-align: center; border-radius: 8px; text-decoration: none; cursor: pointer; border: 1px solid #087650; background: #078b62; color: #fff; }
.vcs-work .vcs-btn-light, .vcs-work-dialog .vcs-btn-light { border-color: #b6d2c2; background: #eff8f2; color: #075e41; }
.vcs-work-actions, .vcs-work-back { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vcs-work-back { justify-content: space-between; margin: 26px 0; }
.vcs-work-back form { margin: 0; }
.vcs-work-profiles { padding-left: 24px; }
.vcs-work-profiles li { margin: 12px 0; padding-left: 6px; }
.vcs-work-profiles a { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding: 14px; background: #f3f9f5; border-radius: 8px; text-decoration: none; }
.vcs-work-profiles span { font-size: 14px; color: #647b6b; }
.vcs-work-text-button { border: 0; background: none; padding: 10px 0; color: #087650; font: inherit; cursor: pointer; }
.vcs-work summary { cursor: pointer; padding: 12px 0; color: #087650; }
.vcs-work-add-area { margin-top: 20px; border-top: 1px solid #dfebe3; }
.vcs-work-table-wrap { overflow-x: auto; }
.vcs-work table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: left; }
.vcs-work th, .vcs-work td { padding: 12px 10px; border-bottom: 1px solid #dfebe3; vertical-align: top; }
.vcs-work th { background: #f0f6f2; font-weight: 600; }
.vcs-work-contract { white-space: normal; overflow-wrap: anywhere; background: #fbfcfa; border: 1px solid #d7e3da; padding: 22px; border-radius: 10px; max-height: 520px; overflow-y: auto; line-height: 1.85; }
.vcs-work-badge { display: inline-block; background: #e7f5eb; color: #16683f; padding: 5px 13px; border-radius: 20px; font-size: 14px; }
.vcs-work-facts { margin: 14px 0; }
.vcs-work-facts > div { display: grid; grid-template-columns: minmax(130px, 32%) minmax(0,1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid #edf2ed; }
.vcs-work-facts dt { font-weight: 500; color: #5d7165; }
.vcs-work-facts dd { margin: 0; }
.vcs-work-signpad { margin: 20px 0; }
.vcs-work-signpad canvas { display: block; width: 100%; height: auto; aspect-ratio: 720 / 220; background: #fff; border: 1px dashed #779885; border-radius: 8px; touch-action: none; margin: 8px 0; }
.vcs-work-signpad > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vcs-work-signpad [role="status"] { color: #a13825; }
.vcs-work-signatures { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 20px 0; }
.vcs-work-signatures > div { padding: 14px; border: 1px solid #dce8e0; border-radius: 10px; }
.vcs-work-signatures p { font-size: 13px; }
.vcs-work-signatures img { display: block; width: 100%; height: auto; }
.vcs-work-member-list { list-style: none; padding: 0; }
.vcs-work-member-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #e4ece6; }
.vcs-work-member-list form { flex-shrink: 0; }
.vcs-work-notice { padding: 16px 20px; border: 1px solid #9fceb1; border-radius: 10px; background: #edf9ee; color: #185738; grid-column: 1 / -1; }
.vcs-work-notice.is-error { color: #923b20; background: #fff4ec; border-color: #e3b69c; }
.vcs-work-dialog { width: min(700px,calc(100% - 28px)); max-height: 88vh; padding: 0; border: 1px solid #c2d8c9; border-radius: 16px; background: #fff; color: #20372e; font: 16px/1.6 system-ui, sans-serif; overflow: auto; text-align: left; }
.vcs-work-dialog:not([open]) { display: none !important; }
.vcs-work-dialog::backdrop { background: #112e236b; }
.vcs-work-dialog.is-fallback { position: fixed; z-index: 100001; inset: 5vh 0 auto; margin-inline: auto; box-shadow: 0 0 0 100vmax #112e236b; }
.vcs-work-dialog-body { position: relative; padding: 30px; }
.vcs-work-dialog h2 { text-align: left; font-size: 23px; line-height: 1.4; padding-right: 28px; margin: 0 0 22px; }
.vcs-work-close { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: #617b69; font-size: 30px; width: 44px; height: 44px; cursor: pointer; }
.vcs-work-thread { max-height: 320px; overflow-y: auto; border: 1px solid #e2ece4; border-radius: 8px; padding: 14px; background: #f8fbf8; }
.vcs-work-thread article { padding: 10px 0; border-bottom: 1px solid #dce8df; }
.vcs-work-thread time { display: block; color: #6b7d70; font-size: 13px; }
.vcs-work-thread p { white-space: pre-wrap; overflow-wrap: anywhere; }
.vcs-support-dialog { width: min(620px,calc(100% - 28px)); }
.vcs-support-kicker { text-align: center; color: #4a6555; font-weight: 600; margin: 24px 0 14px; }
.vcs-support-amounts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0 20px; border: 0; }
.vcs-support-amounts legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vcs-support-amounts label { flex: 1 1 84px; cursor: pointer; position: relative; }
.vcs-support-amounts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vcs-support-amounts span { display: block; border: 1px solid #a8c6b4; border-radius: 8px; padding: 12px 8px; text-align: center; color: #256342; font-weight: 600; }
.vcs-support-amounts input:checked + span { background: #078b62; color: white; border-color: #078b62; }
.vcs-support-amounts input:focus-visible + span { outline: 2px solid #148c61; outline-offset: 2px; }
.vcs-support-recipient { padding: 22px; border: 1px solid #c9e2d1; border-radius: 12px; background: #ecf8ed; }
.vcs-support-recipient > span { display: block; font-size: 13px; letter-spacing: .05em; margin-bottom: 10px; color: #52735d; }
.vcs-support-recipient strong { display: block; color: #235e35; line-height: 1.6; }
.vcs-support-recipient p { margin: 12px 0 0; font-size: 15px; }
.vcs-app .vcs-support-transferred { display: flex; align-items: center; gap: 12px; margin: 24px 0; font-weight: 500; }
.vcs-app .vcs-support-transferred input[type="checkbox"] { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: #078b62; }
.vcs-support-dialog form > button[type="submit"] { display: flex; margin: 20px auto 0; min-width: 150px; }
.vcs-work [data-vcs-work-deadline] { font-variant-numeric: tabular-nums; font-weight: 600; color: #967023; }
.vcs-work .is-expired { color: #9d4933; }
.vcs-work-admin { max-width: 1040px; margin: 20px 20px 30px 0; }
.vcs-work-admin .vcs-panel { box-shadow: none; }
@media (max-width: 600px) {
    .vcs-work .vcs-panel { padding: 20px 16px; border-radius: 12px; }
    .vcs-work h2 { font-size: 20px; }
    .vcs-work-grid, .vcs-work-signatures { grid-template-columns: 1fr; }
    .vcs-work-facts > div { grid-template-columns: 1fr; gap: 4px; }
    .vcs-work-dialog-body { padding: 24px 18px; }
    .vcs-work-dialog h2 { font-size: 21px; }
    .vcs-work-contract { padding: 16px; }
    .vcs-work-member-list li { align-items: flex-start; flex-direction: column; gap: 0; }
    .vcs-work-member-list form { margin: 0 0 8px; }
    .vcs-support-recipient { padding: 18px; }
    .vcs-work-back { align-items: stretch; }
}


/* 1.0.26 / Tramchiase: align public controls without changing the admin screens. */
.vcs-work:not(.vcs-work-admin) { text-align: center; }
.vcs-work:not(.vcs-work-admin) h1,
.vcs-work:not(.vcs-work-admin) h2,
.vcs-work:not(.vcs-work-admin) h3,
.vcs-work:not(.vcs-work-admin) p,
.vcs-work:not(.vcs-work-admin) table,
.vcs-work:not(.vcs-work-admin) .vcs-work-field,
.vcs-app .vcs-work-dialog { text-align: center; }
.vcs-work:not(.vcs-work-admin) .vcs-work-actions,
.vcs-work:not(.vcs-work-admin) .vcs-work-back,
.vcs-work:not(.vcs-work-admin) .vcs-work-profiles a,
.vcs-work:not(.vcs-work-admin) .vcs-work-member-list li,
.vcs-work:not(.vcs-work-admin) .vcs-work-signpad > div { justify-content: center; }
.vcs-work:not(.vcs-work-admin) .vcs-work-member-list li { flex-wrap: wrap; align-items: center; }
.vcs-work:not(.vcs-work-admin) .vcs-work-badge { margin-inline: auto; }
.vcs-app .vcs-work-dialog h2 { text-align: center; padding-inline: 28px; }
.vcs-work-area-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: end; }
.vcs-work .vcs-work-area-row > .vcs-work-field { margin: 0; }
.vcs-work-area-save { display: flex; align-items: center; justify-content: center; min-height: 46px; }
.vcs-work-member-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; width: min(100%, 420px); margin-inline: auto; }
.vcs-work .vcs-work-member-row > .vcs-work-field { margin: 0; }
.vcs-work .vcs-work-member-row > .vcs-btn { margin: 0; }
.vcs-app .vcs-work .vcs-work-area-row input,
.vcs-app .vcs-work .vcs-work-member-row select { min-height: 46px; margin-top: 0; }
.vcs-work .vcs-work-field input::placeholder { color: #73827b; font-weight: 400; opacity: 1; }
@media (max-width: 600px) {
    .vcs-work-area-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .vcs-work .vcs-work-area-row > .vcs-work-field { font-size: 14px; }
    .vcs-work .vcs-work-area-row input { font-size: 16px; }
    .vcs-work .vcs-work-area-save > .vcs-btn { padding-inline: 12px; font-size: 14px; min-height: 46px; }
    .vcs-work-member-row { gap: 10px; }
    .vcs-work .vcs-work-member-row > .vcs-btn { min-height: 46px; }
    .vcs-work:not(.vcs-work-admin) .vcs-work-back { align-items: center; }
    .vcs-work:not(.vcs-work-admin) .vcs-work-actions > .vcs-btn { max-width: 100%; }
}

/* 1.0.39: station-originated work cycles and reusable private templates. */
.vcs-work-review{display:flex!important;align-items:flex-start;justify-content:center;gap:10px;margin:20px 0;text-align:left;line-height:1.5}
.vcs-work-review input[type=checkbox]{width:18px!important;min-width:18px;max-width:18px;height:18px!important;flex:0 0 18px;margin:3px 0 0}
.vcs-work-review span{max-width:720px}
.vcs-work-admin .vcs-work-master textarea{font:14px/1.6 ui-monospace,monospace;min-height:280px;resize:vertical;text-align:left}
.vcs-work-master-title,.vcs-work-admin>p{text-align:center}
.vcs-work-admin>form{margin:20px auto;text-align:center}
.vcs-work-admin .vcs-work-document-links,.vcs-work-document-revision{text-align:center;margin:18px 0}
.vcs-work-admin .vcs-work-table-wrap{max-width:100%;overflow-x:auto}
.vcs-work-station-jobs{text-align:center;margin-top:24px}
.vcs-work-station-jobs .vcs-btn{display:inline-block;padding:10px 18px;text-decoration:none;border-radius:9px;background:#087f61;color:white}
.vcs-work-station-jobs .vcs-work-table-wrap{overflow:auto}
.vcs-work .vcs-work-field{min-width:0}
.vcs-work [data-vcs-work-feedback]{overflow-wrap:anywhere;text-align:center;margin:14px 0}
.vcs-work [data-vcs-work-feedback].is-error{color:#912a1d;background:#fff1e8;border-radius:8px;padding:10px}
.vcs-work .vcs-work-template-choices{margin:16px 0}
.vcs-work .vcs-template-loader{margin:12px 0;text-align:center}
.vcs-work .vcs-template-loader small{display:block;margin-top:7px}
@media(max-width:600px){.vcs-work-admin.wrap{margin:10px 8px}.vcs-work-admin .vcs-panel{padding:16px 12px}.vcs-work-admin .vcs-work-table-wrap table{min-width:560px}.vcs-work-master .vcs-work-form input[type=file]{max-width:100%}.vcs-work .vcs-work-review{font-size:14px}.vcs-work-admin .vcs-work-master textarea{font-size:14px}.vcs-work .vcs-template-loader .vcs-btn{white-space:normal}}

.vcs-work-cycle-admin h1,.vcs-work-cycle-admin h2,.vcs-work-cycle-admin p,.vcs-work-master>h2{text-align:center}
.vcs-work-cycle-admin .vcs-work-field>span{text-align:center}
.vcs-work-cycle-admin .vcs-work-form{text-align:center}
.vcs-work-cycle-admin .vcs-work-contract{text-align:left}

/* 1.0.56 — streamlined station support flow: mobile bank handoff + dynamic VietQR, manual reconciliation kept. */
.vcs-support-dialog { width: min(760px,calc(100% - 24px)); }
.vcs-support-dialog .vcs-work-dialog-body { padding: 26px 28px 24px; }
.vcs-support-dialog .vcs-work-form { margin: 0; }
.vcs-support-head { display: flex; align-items: flex-start; gap: 12px; padding-right: 44px; }
.vcs-support-head .vcs-support-leaf { flex: 0 0 44px; font-size: 32px; line-height: 1.2; }
.vcs-support-dialog .vcs-support-head h2 { margin: 0; padding: 0; font-size: clamp(23px,4vw,30px); color: #173d31; }
.vcs-support-head p { margin: 2px 0 0; color: #50675d; font-size: 17px; }
.vcs-support-intro { margin: 18px 0 22px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(100deg,#edf9f1,#e5f6e8); color: #315c4c; }
.vcs-support-intro p { margin: 0 0 3px; }
.vcs-support-intro strong { display: block; color: #16744d; }
.vcs-support-intro small { display: block; margin-top: 7px; color: #587266; }
.vcs-support-section-title { margin: 18px 0 10px !important; color: #172d27; font-size: 18px !important; text-align: left !important; }
.vcs-support-amounts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0 0 12px; }
.vcs-support-amounts label { min-width: 0; }
.vcs-support-amounts span { min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 12px; font-size: 18px; }
.vcs-support-amounts label:nth-last-child(2), .vcs-support-amounts label:last-child { grid-column: span 1; }
.vcs-support-other { margin-top: 8px; }
.vcs-support-open-bank { width: 100%; display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 10px; min-height: 58px; padding: 12px 16px; border: 0; border-radius: 12px; background: #0b8a5c; color: #fff; font: inherit; cursor: pointer; }
.vcs-support-open-bank strong { font-size: 18px; font-weight: 700; }
.vcs-support-open-bank > span:first-child { font-size: 25px; }
.vcs-support-open-bank > span:last-child { font-size: 30px; line-height: 1; }
.vcs-support-mobile-note { margin: 7px 0 0 !important; text-align: center; color: #63776e; font-size: 13px; }
.vcs-support-bank-picker { margin: 10px 0 2px; padding: 14px; border: 1px solid #cfe0d5; border-radius: 12px; background: #f8fbf9; }
.vcs-support-bank-picker > p { margin: 0 0 9px !important; text-align: left !important; }
.vcs-support-bank-list { display: flex; flex-wrap: wrap; gap: 8px; }
.vcs-support-bank-list button { border: 1px solid #9fc8b0; border-radius: 999px; background: #fff; color: #126743; padding: 8px 11px; font: 600 13px/1.2 system-ui,sans-serif; cursor: pointer; }
.vcs-support-bank-picker small { display: block; margin-top: 10px; color: #66786f; text-align: left; }
.vcs-support-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: #687a71; font-size: 13px; }
.vcs-support-or::before,.vcs-support-or::after { content: ''; height: 1px; background: #d8e3dc; flex: 1; }
.vcs-support-transfer-grid { display: grid; grid-template-columns: minmax(180px,220px) minmax(0,1fr); gap: 16px; align-items: stretch; }
.vcs-support-qr { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; }
.vcs-support-qr img { display: block; width: min(100%,220px); aspect-ratio: 1 / 1.18; object-fit: contain; border: 1px solid #e0e9e3; border-radius: 12px; background: #fff; }
.vcs-support-qr small { margin-top: 6px; color: #66786f; text-align: center; }
.vcs-support-recipient { padding: 18px; border: 0; border-radius: 14px; background: linear-gradient(110deg,#f1f9f4,#ebf7ef); }
.vcs-support-recipient > span { text-transform: none; letter-spacing: 0; font-size: 13px; }
.vcs-support-recipient strong { font-size: 17px; line-height: 1.45; }
.vcs-support-recipient dl { margin: 12px 0 0; border-top: 1px solid #cdded3; }
.vcs-support-recipient dl > div { display: grid; grid-template-columns: 98px minmax(0,1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #d8e6dd; }
.vcs-support-recipient dt { color: #687a71; }
.vcs-support-recipient dd { margin: 0; color: #1d342b; min-width: 0; overflow-wrap: anywhere; }
.vcs-support-copy { float: right; margin-left: 7px; border: 0; background: transparent; color: #1c6849; font-size: 18px; cursor: pointer; }
.vcs-support-manual-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0 !important; padding: 11px 13px; border-radius: 10px; background: #edf8f0; color: #3e6455; font-size: 14px; text-align: left !important; }
.vcs-app .vcs-support-transferred { margin: 16px 0 13px; font-size: 17px; font-weight: 700; }
.vcs-support-message .vcs-support-counter { align-self: flex-end; margin-top: -3px; color: #677970; }
.vcs-support-message textarea { min-height: 84px; }
.vcs-support-dialog form > button[type="submit"] { width: 100%; min-height: 54px; margin: 18px 0 0; border-radius: 12px; font-size: 18px; }
.vcs-support-later { display: block; margin: 10px auto 0; padding: 7px 12px; border: 0; background: transparent; color: #087650; font: 600 15px/1.2 system-ui,sans-serif; cursor: pointer; }
.vcs-support-thanks { margin: 10px 0 0 !important; text-align: center !important; color: #687a71; font-size: 13px; }
@media (max-width: 600px) {
    .vcs-support-dialog { width: min(100% - 18px,760px); max-height: 94vh; }
    .vcs-support-dialog .vcs-work-dialog-body { padding: 22px 14px 18px; }
    .vcs-support-head { gap: 8px; padding-right: 38px; }
    .vcs-support-head .vcs-support-leaf { flex-basis: 32px; font-size: 25px; }
    .vcs-support-head p { font-size: 15px; }
    .vcs-support-intro { margin: 14px 0 18px; padding: 13px 14px; }
    .vcs-support-amounts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
    .vcs-support-amounts span { min-height: 50px; padding: 8px 5px; font-size: 16px; }
    .vcs-support-amounts label:nth-child(4), .vcs-support-amounts label:nth-child(5) { grid-column: span 1; }
    .vcs-support-transfer-grid { grid-template-columns: 1fr; }
    .vcs-support-qr { order: 2; }
    .vcs-support-recipient { order: 1; }
    .vcs-support-qr img { width: min(78vw,260px); }
    .vcs-support-recipient dl > div { grid-template-columns: 86px minmax(0,1fr); }
}