/* Card contract: override these properties on .dia-upload-card to restyle every state. */
.dia-upload-card {
    --duc-surface: #fff;
    --duc-soft-surface: #F4F6F8;
    --duc-text: #1A2333;
    --duc-muted: #5C6876;
    --duc-accent: #7200A1;
    --duc-accent-hover: #5B0081;
    --duc-on-accent: #fff;
    --duc-link: #0B7565;
    --duc-border: #7A8699;
    --duc-danger: #B42318;
    --duc-danger-surface: #FEF3F2;
    --duc-drop-idle: #FBFCFD;
    --duc-drop-border: #7A8699;
    --duc-drop-drag: #E8FAF6;
    --duc-drop-drag-border: #0B7565;
    --duc-drop-error: #FEF3F2;
    --duc-drop-error-border: #B42318;
    --duc-radius: 24px;
    --duc-radius-inner: 18px;
    --duc-radius-field: 10px;
    --duc-radius-chip: 14px;
    --duc-radius-button: 999px;
    --duc-shadow: 0 30px 60px -24px rgba(8,12,20,.55), 0 12px 28px -12px rgba(114,0,161,.30), 0 2px 6px rgba(8,12,20,.20);
    --duc-focus: 0 0 0 3px #fff, 0 0 0 6px #7200A1;
    --duc-font: "Nunito", Arial, Helvetica, sans-serif;
    --duc-font-size: 16px;
    --duc-small-size: 14px;
    --duc-fine-size: 13px;
    --duc-title-size: 21px;
    --duc-drop-title-size: 23px;
    --duc-picker-height: 54px;
    --duc-title-weight: 900;
    --duc-weight: 400;
    --duc-bold: 700;
    --duc-line-height: 1.55;
    --duc-title-line: 1.2;
    --duc-padding: 22px;
    --duc-drop-padding: 44px 28px 30px;
    --duc-drop-height: 360px;
    --duc-gap: 14px;
    --duc-small-gap: 8px;
    --duc-chip-padding: 12px 14px;
    --duc-field-padding: 10px 12px;
    --duc-button-padding: 10px 24px;
    --duc-control-height: 48px;
    --duc-touch-height: 44px;
    --duc-border-width: 1px;
    --duc-drop-border-width: 2px;
    --duc-disabled-opacity: .55;
    --duc-clear: transparent;
    --duc-zero: 0px;
    --duc-full: 100%;
    --duc-sheet-size: 118px;
    --duc-sheet-muted: #C9D1DB;
    --duc-sheet-line: #E9EDF2;
    --duc-sheet-amber: #E8952A;
    --duc-sheet-blue: #2E7FC1;
    --duc-sheet-teal: #14A88B;
    --duc-icon-size: 30px;
    --duc-spinner-size: 26px;
    --duc-spinner-width: 3px;
    --duc-spinner-radius: 50%;
    --duc-button-spinner-size: 18px;
    --duc-button-spinner-border: rgba(255,255,255,.4);
    --duc-spin-time: .8s;
    --duc-motion: background-color .15s, border-color .15s;
    --duc-otp-width: 44px;
    --duc-otp-height: 54px;
    --duc-otp-size: 24px;
    --duc-sr-size: 1px;
    --duc-sr-margin: -1px;
    --duc-sr-clip: rect(0,0,0,0);
    position: relative;
    color: var(--duc-text);
    background: var(--duc-surface);
    border: var(--duc-border-width) solid var(--duc-clear);
    border-radius: var(--duc-radius);
    box-shadow: var(--duc-shadow);
    padding: var(--duc-padding);
    font: var(--duc-weight) var(--duc-font-size)/var(--duc-line-height) var(--duc-font);
    min-width: var(--duc-zero);
}
.dia-upload-card [hidden] { display: none !important; }
.dia-upload-card *, .dia-upload-card *::before, .dia-upload-card *::after { box-sizing: border-box; }
.dia-upload-card p { margin: var(--duc-zero); }
.dia-upload-card a, .dia-upload-card .duc-link { color: var(--duc-link); font-weight: var(--duc-bold); text-decoration: underline; }
.dia-upload-card a:hover, .dia-upload-card .duc-link:hover { color: var(--duc-text); }
.dia-upload-card :focus-visible { outline: none; box-shadow: var(--duc-focus); }
.dia-upload-card .duc-title { margin: var(--duc-zero); color: var(--duc-text); font-family: var(--duc-font); font-size: var(--duc-title-size); font-weight: var(--duc-title-weight); line-height: var(--duc-title-line); }
.dia-upload-card .duc-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--duc-gap); padding: var(--duc-drop-padding); min-height: var(--duc-drop-height); text-align: center; background: var(--duc-drop-idle); border: var(--duc-drop-border-width) dashed var(--duc-drop-border); border-radius: var(--duc-radius-inner); transition: var(--duc-motion); }
.dia-upload-card .duc-drop .duc-title { font-size: var(--duc-drop-title-size); }
.dia-upload-card .duc-drop .duc-primary { min-height: var(--duc-picker-height); }
.dia-upload-card [data-drag="true"] { background: var(--duc-drop-drag); border-color: var(--duc-drop-drag-border); }
.dia-upload-card [data-invalid="true"] { background: var(--duc-drop-error); border-color: var(--duc-drop-error-border); }
.dia-upload-card .duc-sheet { height: var(--duc-sheet-size); width: auto; }
.dia-upload-card .duc-selected, .dia-upload-card .duc-form, .dia-upload-card .duc-code-step, .dia-upload-card .duc-recovery, .dia-upload-card .duc-resume-list { display: grid; gap: var(--duc-gap); }
.dia-upload-card .duc-filechip { display: flex; align-items: center; gap: var(--duc-gap); padding: var(--duc-chip-padding); background: var(--duc-soft-surface); border-radius: var(--duc-radius-chip); }
.dia-upload-card .duc-file-copy { flex: 1; min-width: var(--duc-zero); }
.dia-upload-card .duc-file-icon { flex: none; color: var(--duc-danger); font-size: var(--duc-icon-size); }
.dia-upload-card .duc-filename { font-weight: var(--duc-bold); overflow-wrap: anywhere; }
.dia-upload-card .duc-muted { color: var(--duc-muted); font-size: var(--duc-small-size); }
.dia-upload-card .duc-form label { display: block; font-weight: var(--duc-bold); margin-bottom: var(--duc-small-gap); }
.dia-upload-card .duc-input { display: block; width: var(--duc-full); font: inherit; min-height: var(--duc-control-height); padding: var(--duc-field-padding); color: var(--duc-text); background: var(--duc-surface); border: var(--duc-border-width) solid var(--duc-border); border-radius: var(--duc-radius-field); margin-bottom: var(--duc-small-gap); }
.dia-upload-card .duc-input::placeholder { color: var(--duc-muted); opacity: 1; }
.dia-upload-card .duc-input[aria-invalid="true"], .dia-upload-card [aria-invalid="true"] input { border-color: var(--duc-danger); }
.dia-upload-card .duc-primary { display: inline-flex; gap: var(--duc-small-gap); align-items: center; justify-content: center; min-height: var(--duc-control-height); padding: var(--duc-button-padding); border: var(--duc-border-width) solid var(--duc-clear); border-radius: var(--duc-radius-button); background: var(--duc-accent); color: var(--duc-on-accent); font: var(--duc-title-weight) var(--duc-font-size)/var(--duc-title-line) var(--duc-font); text-decoration: none; text-align: center; cursor: pointer; }
.dia-upload-card .duc-primary:hover { background: var(--duc-accent-hover); color: var(--duc-on-accent); }
.dia-upload-card .duc-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--duc-touch-height); padding: var(--duc-zero); border: var(--duc-zero); background: var(--duc-clear); font: var(--duc-bold) var(--duc-small-size)/var(--duc-line-height) var(--duc-font); cursor: pointer; }
.dia-upload-card button:disabled, .dia-upload-card input:disabled { opacity: var(--duc-disabled-opacity); cursor: default; }
.dia-upload-card .duc-terms, .dia-upload-card .mx-privacy-form { margin-top: var(--duc-gap); font-size: var(--duc-fine-size); color: var(--duc-muted); text-align: center; }
.dia-upload-card .duc-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--duc-small-gap) var(--duc-gap); }
.dia-upload-card .duc-alert { padding: var(--duc-chip-padding); border-radius: var(--duc-radius-chip); margin-bottom: var(--duc-gap); background: var(--duc-danger-surface); font-size: var(--duc-small-size); }
.dia-upload-card .duc-alert-title, .dia-upload-card .duc-field-error { color: var(--duc-danger); }
.dia-upload-card .duc-alert-title { font-weight: var(--duc-bold); }
.dia-upload-card .duc-field-error { font-size: var(--duc-small-size); }
.dia-upload-card .duc-code { display: flex; gap: var(--duc-small-gap); justify-content: center; }
.dia-upload-card .duc-code input { width: var(--duc-otp-width); height: var(--duc-otp-height); min-width: var(--duc-zero); border: var(--duc-border-width) solid var(--duc-border); border-radius: var(--duc-radius-field); padding: var(--duc-zero); color: var(--duc-text); background: var(--duc-surface); text-align: center; font: var(--duc-bold) var(--duc-otp-size)/var(--duc-title-line) var(--duc-font); }
.dia-upload-card .duc-code-label { font-weight: var(--duc-bold); font-size: var(--duc-small-size); }
.dia-upload-card .duc-guidance { color: var(--duc-muted); font-size: var(--duc-small-size); }
.dia-upload-card .duc-wait { display: flex; flex-direction: column; align-items: center; gap: var(--duc-gap); padding: var(--duc-chip-padding); text-align: center; }
.dia-upload-card .duc-spinner { display: inline-block; width: var(--duc-spinner-size); height: var(--duc-spinner-size); border: var(--duc-spinner-width) solid var(--duc-border); border-top-color: var(--duc-accent); border-radius: var(--duc-spinner-radius); animation: duc-spin var(--duc-spin-time) linear infinite; }
.dia-upload-card .duc-file-input, .dia-upload-card .duc-sr { position: absolute; width: var(--duc-sr-size); height: var(--duc-sr-size); padding: var(--duc-zero); margin: var(--duc-sr-margin); overflow: hidden; clip: var(--duc-sr-clip); white-space: nowrap; border: var(--duc-zero); }
@keyframes duc-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .dia-upload-card { --duc-padding: 14px; --duc-drop-padding: 20px 14px; --duc-drop-height: 260px; --duc-sheet-size: 82px; --duc-drop-title-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .dia-upload-card .duc-spinner { animation: none; } }

.dia-upload-card[aria-busy="true"] [data-submit]::before,
.dia-upload-card[aria-busy="true"] [data-action="verify"]::before {
    content: ""; display: inline-block; flex: none;
    width: var(--duc-button-spinner-size); height: var(--duc-button-spinner-size);
    border: var(--duc-spinner-width) solid var(--duc-button-spinner-border);
    border-top-color: var(--duc-on-accent); border-radius: var(--duc-spinner-radius);
    animation: duc-spin var(--duc-spin-time) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .dia-upload-card[aria-busy="true"] [data-submit]::before,
    .dia-upload-card[aria-busy="true"] [data-action="verify"]::before { animation: none; }
}