/* hrai — حقول النماذج (hrai-forms.js) */
.hf-field { --hf-ink: var(--acc-text, var(--k-111111)); --hf-mute: var(--acc-muted, var(--k-888888)); --hf-line: var(--acc-border-2, var(--k-e6e6e6)); --hf-bg: var(--acc-surface-3, var(--k-f7f7f7)); --hf-card: var(--acc-surface, var(--k-ffffff)); --hf-soft: var(--acc-surface-2, var(--k-f4f4f4)); --hf-bad: #dc2626; --hf-ok: #16a34a; margin-bottom: 16px; font-family: 'Tajawal', sans-serif; }
.hf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hf-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--hf-ink); margin-bottom: 7px; }
.hf-label .opt { color: var(--acc-muted-2, var(--k-aaaaaa)); font-weight: 600; font-size: 11px; }
.hf-shell { position: relative; }
.hf-input { width: 100%; border: 1.5px solid var(--hf-line); background: var(--hf-bg); border-radius: 12px; padding: 13px 14px; padding-inline-end: 46px; font: 14px 'Tajawal', sans-serif; color: var(--hf-ink); outline: none; transition: border-color .2s, background .2s; }
.hf-input:focus { border-color: var(--hf-ink); background: var(--hf-card); }
.hf-input[aria-invalid="true"] { border-color: var(--hf-bad); }
.hf-msg-slot { display: block; overflow: hidden; }
.hf-msg-slot[hidden] { display: none; }
.hf-msg { display: block; padding-top: 7px; font-size: 12.5px; line-height: 1.6; }
.hf-hint { color: var(--hf-mute); }
.hf-error { color: var(--hf-bad); font-weight: 600; }
.hf-word { display: inline-block; white-space: pre; }
.hf-swap { display: inline-block; }
.hf-leaving { position: absolute !important; pointer-events: none; }

/* ── كلمة المرور ── */
.ps-shell .hf-input { direction: ltr; text-align: left; }
html[dir="rtl"] .ps-shell .hf-input { padding-inline-end: 14px; padding-left: 46px; }
.ps-reveal { position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; border-radius: 9px; color: var(--hf-mute); cursor: pointer; }
html[dir="rtl"] .ps-reveal { inset-inline-end: auto; left: 6px; }
.ps-reveal:hover, .ps-reveal.on { color: var(--hf-ink); }
.ps-reveal:focus-visible { outline: 2px solid var(--hf-ink); outline-offset: 1px; }
.ps-reveal .hf-slash { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .24s cubic-bezier(.4, 0, .2, 1), opacity .08s; }
.ps-reveal.on .hf-slash { stroke-dashoffset: 0; opacity: 1; }
.ps-meter-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ps-meter { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ps-seg { height: 4px; border-radius: 4px; background: var(--hf-soft); overflow: hidden; }
.ps-fill { display: block; height: 100%; border-radius: 4px; background: var(--ps-tone, var(--hf-ink)); transform: translateX(-101%); transition: transform var(--hf-smooth-ms, .45s) var(--hf-smooth, cubic-bezier(.22, 1, .36, 1)), background .3s; }
html[dir="rtl"] .ps-fill { transform: translateX(101%); }
.ps-fill.on, html[dir="rtl"] .ps-fill.on { transform: none; }
.ps-field[data-level="1"] { --ps-tone: #dc2626; }
.ps-field[data-level="2"] { --ps-tone: #d97706; }
.ps-field[data-level="3"] { --ps-tone: #65a30d; }
.ps-field[data-level="4"] { --ps-tone: #16a34a; }
.ps-word { position: relative; display: inline-grid; min-width: 64px; height: 1.4em; font-size: 12px; font-weight: 800; color: var(--ps-tone, var(--hf-mute)); text-align: end; }
.ps-word > * { grid-area: 1 / 1; }
.ps-rules { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.ps-rule { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--hf-mute); transition: color .2s; }
.ps-rule[data-met] { color: var(--hf-ink); }
.ps-mark { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--hf-line); display: grid; place-items: center; color: var(--k-ffffff); }
.ps-mark-fill { position: absolute; inset: -1.5px; border-radius: 50%; background: var(--hf-ok); transform: scale(.5); opacity: 0; transition: transform .38s var(--hf-snappy, cubic-bezier(.3, 1.3, .5, 1)) var(--d, 0s), opacity .08s var(--d, 0s); }
.ps-rule[data-met] .ps-mark-fill { transform: none; opacity: 1; transition-duration: var(--hf-snappy-ms, .38s), .15s; }
.ps-tick { position: relative; width: 14px; height: 14px; }
.ps-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .15s cubic-bezier(.4, 0, .2, 1), opacity .15s .06s; }
.ps-rule[data-met] .ps-tick path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .24s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + .06s), opacity .05s calc(var(--d, 0s) + .06s); }
.ps-rule-label { flex: 1; min-width: 0; }
.ps-remaining { position: relative; display: inline-grid; font-size: 11.5px; font-weight: 700; color: var(--hf-mute); font-variant-numeric: tabular-nums; }
.ps-remaining > * { grid-area: 1 / 1; white-space: nowrap; }
.hf-num { display: inline-flex; direction: ltr; }
.hf-place { position: relative; display: inline-grid; overflow: hidden; }
.hf-place > * { grid-area: 1 / 1; }

/* ── رمز التحقق ── */
.otp-inputs { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 360px; margin-inline: auto; }
.otp-slot { position: relative; aspect-ratio: 1 / 1.12; }
.otp-input { position: absolute; inset: 0; width: 100%; height: 100%; border: 1.5px solid var(--hf-line); background: var(--hf-bg); border-radius: 12px; text-align: center; font: 800 22px ui-monospace, Menlo, monospace; color: transparent; caret-color: var(--hf-ink); outline: none; transition: border-color .2s, background .2s; padding: 0; }
.otp-input[data-filled] { background: var(--hf-card); border-color: color-mix(in srgb, var(--hf-ink) 30%, var(--hf-line)); }
.otp-inputs[data-invalid] .otp-input { border-color: var(--hf-bad); }
.otp-input:disabled { opacity: .6; }
.otp-glyph { position: absolute; inset: 0; display: grid; place-items: center; font: 800 22px ui-monospace, Menlo, monospace; color: var(--hf-ink); pointer-events: none; }
.otp-ring { position: absolute; top: 0; left: 0; height: 100%; border-radius: 12px; box-shadow: 0 0 0 2px var(--hf-ink), 0 0 0 5px color-mix(in srgb, var(--hf-ink) 10%, transparent); opacity: 0; scale: .94; pointer-events: none; }
.otp-ring.on { opacity: 1; scale: 1; }
.otp-inputs[data-invalid] .otp-ring { box-shadow: 0 0 0 2px var(--hf-bad), 0 0 0 5px rgba(220, 38, 38, .12); }
.otp-field .hf-label { text-align: center; }
.otp-field .hf-msg { text-align: center; }

/* ── رقم الجوال ── */
.pi-control { position: relative; display: flex; align-items: stretch; gap: 8px; height: 48px; }
.pi-anchor { position: relative; flex: none; z-index: 5; }
.pi-measure { position: absolute; visibility: hidden; pointer-events: none; }
.pi-shape { position: absolute; top: 0; left: 0; overflow: hidden; background: var(--hf-bg); border: 1.5px solid var(--hf-line); border-radius: 12px; box-sizing: border-box; transition: background .2s, border-color .2s, box-shadow .2s; }
.pi-field[data-open] .pi-shape { background: var(--hf-card); border-color: var(--hf-ink); box-shadow: 0 18px 50px rgba(0, 0, 0, .14); z-index: 20; }
.pi-lid { position: relative; height: 45px; display: flex; align-items: center; }
.pi-trigger { display: inline-flex; align-items: center; gap: 7px; height: 45px; padding: 0 34px 0 12px; border: 0; background: none; font: 700 14px 'Tajawal', sans-serif; color: var(--hf-ink); cursor: pointer; white-space: nowrap; border-radius: 12px; }
.pi-trigger:focus-visible { outline: 2px solid var(--hf-ink); outline-offset: -2px; }
.pi-slot { position: relative; display: inline-grid; }
.pi-slot > * { grid-area: 1 / 1; }
.pi-layer { display: inline-flex; align-items: center; gap: 7px; }
.pi-field[data-open] .pi-slot { opacity: 0; }
.pi-flag { font-size: 18px; line-height: 1; }
.pi-dial { font-variant-numeric: tabular-nums; }
.pi-chev { position: absolute; right: 10px; top: 50%; margin-top: -8px; color: var(--hf-mute); pointer-events: none; transition: transform var(--hf-snappy-ms, .38s) var(--hf-snappy, cubic-bezier(.3, 1.3, .5, 1)); }
.pi-field[data-open] .pi-chev { transform: rotate(180deg); }
.pi-search-row { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 34px 0 12px; opacity: 0; filter: blur(4px); transition: opacity .1s cubic-bezier(.4, 0, .2, 1), filter .1s; }
.pi-field[data-open] .pi-search-row { opacity: 1; filter: none; transition: opacity .18s cubic-bezier(.16, 1, .3, 1) .05s, filter .18s .05s; }
.pi-search-ic { color: var(--hf-mute); display: grid; }
.pi-search { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 14px 'Tajawal', sans-serif; color: var(--hf-ink); }
.pi-clear { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--hf-soft); color: var(--hf-mute); cursor: pointer; }
.pi-clear[hidden] { display: none; }
.pi-close-hit { position: absolute; right: 0; top: 0; width: 34px; height: 100%; border: 0; background: none; cursor: pointer; }
.pi-list-face { border-top: 1px solid var(--hf-line); opacity: 0; transform: translateY(-6px); filter: blur(4px); transition: opacity .1s, transform .1s, filter .1s; width: var(--pi-panel-w, 300px); }
.pi-field[data-open] .pi-list-face { opacity: 1; transform: none; filter: none; transition: opacity .2s cubic-bezier(.16, 1, .3, 1) .04s, transform var(--hf-smooth-ms, .45s) var(--hf-smooth, ease) , filter .22s .04s; }
.pi-scroll { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.pi-options { position: relative; }
.pi-hl { position: absolute; top: 0; left: 0; right: 0; border-radius: 9px; background: var(--hf-soft); opacity: 0; pointer-events: none; }
.pi-group-label { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; color: var(--hf-mute); }
.pi-option { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--hf-ink); }
html[dir="rtl"] .pi-option { flex-direction: row-reverse; text-align: right; }
.pi-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pi-meta { color: var(--hf-mute); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pi-check { display: grid; color: var(--hf-ink); opacity: 0; }
.pi-check[data-on] { opacity: 1; }
.pi-empty { padding: 14px 10px; font-size: 13px; color: var(--hf-mute); text-align: center; }
.pi-number-wrap { position: relative; flex: 1; min-width: 0; }
.pi-number, .pi-guide { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 40px 0 14px; font: 15px 'Tajawal', sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 45px; text-align: left; direction: ltr; }
.pi-number { border: 1.5px solid var(--hf-line); background: var(--hf-bg); border-radius: 12px; color: var(--hf-ink); outline: none; transition: border-color .2s, background .2s; }
.pi-number:focus { border-color: var(--hf-ink); background: var(--hf-card); }
.pi-number::placeholder { color: var(--acc-muted-2, var(--k-aaaaaa)); }
.pi-number:focus::placeholder { color: transparent; }
.pi-guide { border: 1.5px solid transparent; color: var(--acc-muted-2, var(--k-bbbbbb)); pointer-events: none; z-index: 1; white-space: pre; overflow: hidden; }
.pi-guide-typed { color: transparent; }
.pi-number:not(:focus) ~ .pi-guide, .pi-number-wrap:not(:focus-within) .pi-guide { visibility: hidden; }
.pi-control[data-invalid] .pi-number { border-color: var(--hf-bad); }
.pi-valid { position: absolute; right: 12px; top: 50%; margin-top: -8px; color: var(--hf-ok); display: grid; z-index: 2; }
.pi-valid[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ps-fill, .ps-mark-fill, .ps-tick path, .ps-reveal .hf-slash, .pi-chev, .pi-search-row, .pi-list-face { transition: none !important; }
}

/* ═══ تسجيل الدخول (SignIn) ═══ */
.si { --si-ink: var(--acc-text, var(--k-111111)); --si-mute: var(--acc-muted, var(--k-888888)); --si-line: var(--acc-border, var(--k-ececec)); }
.si-viewport { overflow: hidden; margin: -6px; padding: 6px; }
.si-track { position: relative; }
.si-step.si-leaving { position: absolute; inset-inline: 0; top: 0; pointer-events: none; }
.si-heading { text-align: center; margin-bottom: 22px; }
.si-heading h2 { font-size: 23px; font-weight: 900; color: var(--si-ink); margin: 0 0 6px; outline: none; }
.si-heading p { font-size: 13px; color: var(--si-mute); margin: 0; line-height: 1.8; }
.si-form { display: block; }
.si-btn { position: relative; display: flex !important; align-items: center; justify-content: center; }
.si-btn-in { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s; }
.si-btn-in svg { width: 16px; height: 16px; flex: none; }
.si-spin { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: 0; animation: siSpin .7s linear infinite; }
.si-btn.is-loading .si-btn-in { opacity: 0; }
.si-btn.is-loading .si-spin { opacity: .9; }
.si-btn.is-loading { cursor: progress; }
@keyframes siSpin { to { transform: rotate(360deg); } }
.si-alt { display: grid; gap: 10px; }
.si-alt .acc-btn.ghost { font-weight: 700; }
.si-identity { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--si-line); border-radius: 14px; margin-bottom: 18px; }
.si-identity-email { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--si-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
html[dir="rtl"] .si-identity-email { text-align: right; }
.si-avatar { display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--acc-primary, var(--k-111111)); color: var(--acc-primary-ink, var(--k-ffffff)); font-weight: 800; font-family: 'Tajawal', sans-serif; }
.si-avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.si-avatar.lg { width: 82px; height: 82px; font-size: 27px; }
.si-ghost { border: 0; background: var(--acc-surface-2, var(--k-f4f4f4)); color: var(--si-ink); font: 700 12px 'Tajawal', sans-serif; padding: 6px 12px; border-radius: 50px; cursor: pointer; }
.si-ghost:hover { background: var(--acc-border, var(--k-e8e8e8)); }
.si-text-btn { border: 0; background: none; padding: 0; color: var(--si-ink); font: 700 12.5px 'Tajawal', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.si-row { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.si-code-row { justify-content: space-between; align-items: center; margin: 14px 0 0; }
.si-resend { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--si-mute); font: 700 12.5px 'Tajawal', sans-serif; cursor: pointer; padding: 4px 8px; }
.si-code-row .si-resend { margin: 0; }
.si-resend[aria-disabled="true"] { cursor: default; }
.si-resend:not([aria-disabled="true"]):hover { color: var(--si-ink); text-decoration: underline; text-underline-offset: 3px; }
.si-resend-label { position: relative; display: inline-grid; }
.si-resend-label > * { grid-area: 1 / 1; white-space: nowrap; }
.si-time { display: inline-flex; font-variant-numeric: tabular-nums; }
.si-tcol { position: relative; display: inline-grid; overflow: hidden; }
.si-tcol > * { grid-area: 1 / 1; }
.si-avatar-stage { position: relative; width: 96px; height: 96px; margin: 2px auto 18px; display: grid; place-items: center; }
.si-ring { position: absolute; inset: 0; color: var(--si-ink); }
.si-ring circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.si-badge { position: absolute; bottom: 4px; inset-inline-end: 4px; width: 26px; height: 26px; border-radius: 50%; background: #16a34a; color: var(--k-ffffff); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--acc-surface, var(--k-ffffff)); }
.si-email { direction: ltr; }
.si-details { margin: 0 0 18px; padding: 2px 14px; border: 1px solid var(--si-line); border-radius: 14px; }
.si-details > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 13px; }
.si-details > div + div { border-top: 1px solid var(--si-line); }
.si-details dt { color: var(--si-mute); margin: 0; }
.si-details dd { margin: 0; font-weight: 700; color: var(--si-ink); }
.si-footer { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.si-status-box { display: block; min-height: 1.5em; }
.si-status { position: relative; display: inline-grid; font-size: 12px; color: var(--si-mute); }
.si-status > * { grid-area: 1 / 1; white-space: nowrap; }
.si-switch { font-size: 13px; color: var(--si-mute); }
.si-switch a { color: var(--si-ink); font-weight: 800; }
.si .hf-field { margin-bottom: 16px; }
.si .otp-field { margin-bottom: 18px; }
.si .ps-field { margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .si-spin { animation-duration: 1.6s; } }
/* الجوال داخل باني السيرة: صف كامل */
.cv-fld-phone { grid-column: 1 / -1; }
.cv-fld-phone .hf-field { margin: 0; }
.acc-form-grid > .pi-field { grid-column: 1 / -1; }

/* ── رفع الملفات (FileUpload) ── */
.fu { --fu-ink: var(--acc-text, var(--k-111111)); --fu-mute: var(--acc-muted, var(--k-888888)); --fu-line: var(--acc-border-2, var(--k-e3e3e3)); --fu-card: var(--acc-surface, var(--k-ffffff)); --fu-soft: var(--acc-surface-2, var(--k-f4f4f4)); --fu-bad: #dc2626; --fu-ok: #16a34a; font-family: 'Tajawal', sans-serif; color: var(--fu-ink); text-align: start; }
.fu-input { display: none; }
.fu-dropzone { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; border: 1.5px dashed var(--fu-line); background: color-mix(in srgb, var(--fu-card) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(var(--k-rgb-255),.7), 0 1px 2px rgba(0, 0, 0, .03); cursor: pointer; outline: none; user-select: none; transition: border-color .2s, background .2s, box-shadow .25s, transform .38s var(--hf-snappy, cubic-bezier(.3, 1.3, .5, 1)); }
.fu-dropzone:hover { border-color: color-mix(in srgb, var(--fu-ink) 35%, transparent); box-shadow: inset 0 1px 0 rgba(var(--k-rgb-255),.7), 0 12px 34px rgba(0, 0, 0, .06); }
.fu-dropzone:focus-visible { outline: 2px solid var(--fu-ink); outline-offset: 3px; }
.fu-dropzone.is-dragging { border-style: solid; border-color: var(--fu-ink); background: color-mix(in srgb, var(--fu-soft) 85%, transparent); transform: scale(1.012); }
.fu-dropzone.is-disabled { opacity: .55; cursor: not-allowed; }
.fu-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--fu-soft); color: var(--fu-ink); box-shadow: inset 0 0 0 1px var(--fu-line); transition: transform .38s var(--hf-snappy, cubic-bezier(.3, 1.3, .5, 1)); }
.fu-icon svg { width: 22px; height: 22px; }
.fu-dropzone.is-dragging .fu-icon { transform: translateY(-3px); }
.fu-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fu-label { position: relative; display: grid; font-size: 14.5px; font-weight: 800; }
.fu-label > * { grid-area: 1 / 1; }
.fu-desc { font-size: 12.5px; color: var(--fu-mute); line-height: 1.6; }
.fu-browse { flex: none; font-size: 12.5px; font-weight: 800; padding: 7px 14px; border-radius: 50px; background: var(--fu-ink); color: var(--fu-card); transition: transform .2s; }
.fu-dropzone:active .fu-browse { transform: scale(.96); }
/* نسخة كبيرة في الوسط (صفحة العقد) */
.fu--stack .fu-dropzone { flex-direction: column; text-align: center; gap: 10px; padding: 38px 24px 30px; border-radius: 22px; }
.fu--stack .fu-icon { width: 58px; height: 58px; border-radius: 16px; }
.fu--stack .fu-icon svg { width: 26px; height: 26px; }
.fu--stack .fu-copy { justify-items: center; gap: 4px; }
.fu--stack .fu-label { font-size: 18px; }
.fu--stack .fu-desc { font-size: 13px; }
.fu--stack .fu-browse { margin-top: 6px; padding: 8px 20px; }

.fu-status-frame { overflow: hidden; }
.fu-status-frame[hidden] { display: none; }
.fu-status { position: relative; display: grid; margin: 0; padding-top: 9px; font-size: 12.5px; color: var(--fu-mute); }
.fu-status > * { grid-area: 1 / 1; }
.fu-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fu-list.has { margin-top: 10px; }
.fu-row { overflow: hidden; }
.fu-row[hidden] { display: none; }
.fu-row + .fu-row .fu-item { margin-top: 8px; }
.fu-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--fu-line); background: color-mix(in srgb, var(--fu-card) 80%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fu-ficon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--fu-soft); color: var(--fu-mute); }
.fu-fcopy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fu-fcopy strong { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fu-mute); font-variant-numeric: tabular-nums; }
.fu-size { direction: ltr; unicode-bidi: isolate; }
.fu-phase-wrap { display: inline-flex; align-items: center; gap: 6px; }
.fu-phase-wrap[hidden] { display: none; }
.fu-phase { position: relative; display: inline-grid; }
.fu-phase > * { grid-area: 1 / 1; white-space: nowrap; }
.fu-percent { display: inline-block; min-width: 3ch; direction: ltr; unicode-bidi: isolate; }
.fu-err-text { color: var(--fu-bad); font-weight: 700; }
.fu-error { font-size: 12px; color: var(--fu-bad); font-weight: 600; }
.fu-error[hidden] { display: none; }
.fu-bar-frame { display: block; overflow: hidden; }
.fu-bar-frame[hidden] { display: none; }
.fu-bar { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: var(--fu-soft); overflow: hidden; }
.fu-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--fu-ink); transform: translateX(-100%); will-change: transform; }
.fu-status-slot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; }
.fu-status-slot > * { grid-area: 1 / 1; }
.fu-ready { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--fu-ok) 14%, transparent); color: var(--fu-ok); }
.fu-ready path { stroke-dasharray: 1; }
.fu-retry, .fu-remove { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; color: var(--fu-mute); cursor: pointer; transition: background .15s, color .15s; }
.fu-retry { color: var(--fu-bad); width: 26px; height: 26px; }
.fu-retry:hover, .fu-remove:hover { background: var(--fu-soft); color: var(--fu-ink); }
.fu-retry:focus-visible, .fu-remove:focus-visible { outline: 2px solid var(--fu-ink); outline-offset: 1px; }
.fu-row .fu-item:has(.fu-error:not([hidden])) { border-color: color-mix(in srgb, var(--fu-bad) 40%, transparent); }
@media (max-width: 480px) { .fu-dropzone:not(.fu--stack *) { flex-wrap: wrap; } .fu--stack .fu-dropzone { padding: 30px 18px 24px; } }
@media (prefers-reduced-motion: reduce) { .fu-dropzone, .fu-icon { transition: none; } }