/* CrmKit (crm-kit.js): dialogs, dropdowns, and file buttons for the workspace
   and the portals. Ports of 21st.dev "Base Alert Dialog" (3D tilt-and-blur
   entrance) and "Dropdown" (a highlight that travels between options).
   Colors come from the page's own tokens, with fallbacks. */
:root {
  --ck-accent: var(--accent, #4b367c);
  --ck-surface: var(--surface, var(--card, #ffffff));
  --ck-line: var(--line, var(--border, rgba(10, 10, 11, 0.08)));
  --ck-line-strong: var(--line-strong, var(--border2, rgba(10, 10, 11, 0.14)));
  --ck-ink: var(--ink, var(--text, #0a0a0b));
  --ck-muted: var(--muted, var(--text3, #71717a));
  --ck-soft: var(--accent-soft, var(--accent-dim, rgba(75, 54, 124, 0.08)));
  --ck-ring: var(--accent-ring, rgba(75, 54, 124, 0.22));
}

/* ---------- dialogs ---------- */
.ck-back { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; perspective: 900px;
  background: rgba(12, 9, 24, 0); transition: background-color .22s ease, backdrop-filter .22s ease; }
.ck-back.open { background: rgba(12, 9, 24, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/* Fading out, it lets clicks through: the next control works on the first click. */
.ck-back.closing { background: rgba(12, 9, 24, 0); pointer-events: none; }
.ck-dlg { width: min(440px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border-radius: 18px; overflow: hidden auto; color: var(--ck-ink); background: var(--ck-surface); border: 1px solid var(--ck-line);
  box-shadow: 0 30px 80px -24px rgba(20, 12, 50, .45), 0 2px 6px rgba(10, 10, 11, .06); font-family: inherit;
  opacity: 0; filter: blur(10px); transform: translateZ(-100px) rotateY(25deg) rotateX(5deg); transform-style: preserve-3d;
  transition: opacity .45s ease .06s, filter .45s cubic-bezier(.17, .67, .51, 1) .06s, transform .5s cubic-bezier(.17, .67, .51, 1) .06s; }
.ck-back.open .ck-dlg { opacity: 1; filter: none; transform: none; }
.ck-back.closing .ck-dlg { opacity: 0; filter: blur(8px); transform: translateZ(-80px) rotateY(18deg) rotateX(4deg); transition-duration: .24s; transition-delay: 0s; }
.ck-head { display: flex; gap: 14px; padding: 22px 22px 4px; }
.ck-media { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ck-accent); background: var(--ck-soft); }
.ck-dlg.danger .ck-media { color: #dc2626; background: #fef2f2; }
.ck-ico { display: inline-grid; place-items: center; }
.ck-words { min-width: 0; }
.ck-title { margin: 2px 0 4px; font-size: 16px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }
.ck-body { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ck-muted); white-space: pre-line; overflow-wrap: anywhere; }
.ck-type { display: grid; gap: 7px; margin: 14px 22px 0 78px; font-size: 12.5px; color: var(--ck-muted); }
.ck-type strong { padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, #dc2626 8%, var(--ck-surface)); color: #b91c1c; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ck-input { font: inherit; font-size: 14px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--ck-line-strong); outline: none; color: var(--ck-ink); background: var(--ck-surface);
  transition: border-color .15s, box-shadow .15s; }
.ck-input:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
.ck-dlg.armed .ck-input { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .14); }
.ck-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding: 14px 18px; border-top: 1px solid var(--ck-line);
  background: color-mix(in srgb, var(--ck-line) 40%, var(--ck-surface)); }
.ck-btn { font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; line-height: 1.2;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease, box-shadow .15s ease; }
.ck-btn:active { transform: scale(.97); }
.ck-btn.ghost { background: var(--ck-surface); border-color: var(--ck-line-strong); color: var(--ck-ink); }
.ck-btn.ghost:hover { background: var(--ck-soft); }
.ck-btn.primary { background: var(--ck-accent); color: #fff; box-shadow: 0 8px 18px -10px var(--ck-accent); }
.ck-btn.danger { background: #dc2626; color: #fff; box-shadow: 0 8px 18px -10px #dc2626; }
.ck-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.ck-btn:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 2px; }
@media (max-width: 520px) { .ck-type { margin-left: 22px; } .ck-foot { flex-direction: column-reverse; } .ck-btn { width: 100%; } }

/* ---------- dropdowns ---------- */
.ck-select { position: relative; display: inline-block; min-width: 0; max-width: 100%; vertical-align: middle; }
.field .ck-select, .ck-select.block { display: block; width: 100%; }
.ck-select[hidden] { display: none !important; }
select.ck-native, input.ck-native { position: absolute !important; left: 0; top: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; margin: 0 !important; }
.ck-trigger { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: inherit; font-size: 14px; line-height: 1.3;
  color: var(--ck-ink); text-align: left; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--ck-line-strong); background: var(--ck-surface); cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 10, 11, .04); transition: border-color .15s ease, box-shadow .15s ease; }
.ck-trigger:hover { border-color: color-mix(in srgb, var(--ck-accent) 35%, var(--ck-line-strong)); }
.ck-select.open .ck-trigger, .ck-trigger:focus-visible { border-color: var(--ck-accent); box-shadow: 0 0 0 3px var(--ck-ring); outline: none; }
.ck-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ck-select.placeholder .ck-value { color: var(--ck-muted); }
.ck-trigger .ck-ico { flex: none; opacity: .55; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .15s; }
.ck-select.open .ck-trigger .ck-ico { transform: rotate(180deg); opacity: .9; color: var(--ck-accent); }
.ck-trigger:disabled { opacity: .55; cursor: not-allowed; }
.ck-trigger.compact { padding-left: 8px; padding-right: 7px; gap: 6px; box-shadow: none; }
.ck-menu { position: fixed; z-index: 3100; padding: 5px; border-radius: 12px; background: var(--ck-surface); border: 1px solid var(--ck-line); overflow-y: auto; outline: none;
  box-shadow: 0 1px 2px rgba(15, 12, 30, .06), 0 24px 48px -20px rgba(30, 16, 70, .35); max-width: min(440px, calc(100vw - 16px)); color: var(--ck-ink); font-family: inherit;
  transform-origin: top left; animation: ckIn .24s cubic-bezier(.22, 1, .36, 1); overscroll-behavior: contain; }
.ck-menu.up { transform-origin: bottom left; animation-name: ckInUp; }
.ck-menu.closing { animation: ckOut .14s ease forwards; pointer-events: none; }
@keyframes ckIn { from { opacity: 0; transform: translateY(-8px) scale(.94); } }
@keyframes ckInUp { from { opacity: 0; transform: translateY(8px) scale(.94); } }
@keyframes ckOut { to { opacity: 0; transform: translateY(-4px) scale(.97); } }
.ck-glow { position: absolute; left: 5px; right: 5px; top: 0; height: 34px; border-radius: 8px; background: var(--ck-soft); opacity: 0; pointer-events: none;
  transition: transform .24s cubic-bezier(.34, 1.3, .64, 1), height .2s ease, opacity .12s ease; }
.ck-glow.on { opacity: 1; }
.ck-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 34px; padding: 7px 10px; border-radius: 8px;
  font-size: 13.5px; cursor: pointer; white-space: nowrap; animation: ckRow .28s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 16ms); }
@keyframes ckRow { from { opacity: 0; transform: translateY(-4px); } }
.ck-opt-text { overflow: hidden; text-overflow: ellipsis; }
.ck-opt.on { font-weight: 600; color: var(--ck-accent); }
.ck-opt.off { opacity: .45; cursor: not-allowed; }
.ck-opt.in { padding-left: 18px; }
.ck-mark { flex: none; opacity: 0; transform: scale(.6); color: var(--ck-accent); transition: opacity .2s ease, transform .26s cubic-bezier(.34, 1.56, .64, 1); }
.ck-opt.on .ck-mark { opacity: 1; transform: none; }
.ck-group { position: relative; padding: 9px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ck-muted); }

/* ---------- date and time pickers (21st.dev "Calendar") ---------- */
.ck-when { justify-content: flex-start; }
.ck-when .ck-value { flex: 1; }
.ck-when .ck-lead { flex: none; display: grid; place-items: center; color: var(--ck-accent); opacity: .75; }
.ck-pop { position: fixed; z-index: 3100; display: flex; border-radius: 14px; background: var(--ck-surface); border: 1px solid var(--ck-line); color: var(--ck-ink); font-family: inherit;
  box-shadow: 0 1px 2px rgba(15, 12, 30, .06), 0 24px 48px -20px rgba(30, 16, 70, .35); overflow: hidden; outline: none;
  transform-origin: top left; animation: ckIn .24s cubic-bezier(.22, 1, .36, 1); }
.ck-pop.up { transform-origin: bottom left; animation-name: ckInUp; }
.ck-pop.closing { animation: ckOut .14s ease forwards; pointer-events: none; }
.ck-cal { width: 272px; padding: 10px 10px 8px; }
.ck-cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ck-cal-title { flex: 1; font: inherit; font-size: 14px; font-weight: 700; color: inherit; padding: 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.ck-cal-title:hover { background: var(--ck-soft); color: var(--ck-accent); }
.ck-nav { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--ck-line); background: var(--ck-surface); color: var(--ck-muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.ck-nav:hover { color: var(--ck-accent); border-color: color-mix(in srgb, var(--ck-accent) 40%, var(--ck-line)); }
.ck-nav:active { transform: scale(.92); }
.ck-cal-body.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ck-cal-body.months, .ck-cal-body.years { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 0 4px; }
.ck-cal-body.from-left { animation: ckSlideL .26s cubic-bezier(.22, 1, .36, 1); }
.ck-cal-body.from-right { animation: ckSlideR .26s cubic-bezier(.22, 1, .36, 1); }
@keyframes ckSlideL { from { opacity: 0; transform: translateX(-16px); } }
@keyframes ckSlideR { from { opacity: 0; transform: translateX(16px); } }
.ck-wd { padding: 4px 0 2px; font-size: 11px; font-weight: 600; text-align: center; color: var(--ck-muted); }
.ck-day { position: relative; aspect-ratio: 1; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 13px; color: var(--ck-ink); cursor: pointer;
  transition: background-color .15s ease, color .15s ease; }
.ck-day:hover, .ck-day:focus-visible { background: var(--ck-soft); color: var(--ck-accent); outline: none; }
.ck-day.out { color: var(--ck-muted); opacity: .55; }
.ck-day.today { font-weight: 700; color: var(--ck-accent); }
.ck-day.today::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.ck-day.on { background: var(--ck-accent); color: #fff; font-weight: 700; opacity: 1; box-shadow: 0 6px 14px -8px var(--ck-accent); animation: ckPop .32s cubic-bezier(.34, 1.56, .64, 1); }
.ck-day:disabled { opacity: .3; cursor: not-allowed; background: none; color: var(--ck-muted); }
@keyframes ckPop { from { transform: scale(.65); } }
.ck-mo { padding: 12px 0; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13px; color: var(--ck-ink); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.ck-mo:hover { background: var(--ck-soft); color: var(--ck-accent); }
.ck-mo.now { color: var(--ck-accent); font-weight: 700; }
.ck-mo.on { background: var(--ck-accent); color: #fff; font-weight: 700; }
.ck-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ck-line); }
.ck-chip { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ck-line-strong); background: var(--ck-surface); color: var(--ck-ink); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.ck-chip:hover { border-color: var(--ck-accent); color: var(--ck-accent); }
.ck-chip:active { transform: scale(.95); }
.ck-chip.clear { margin-left: auto; border-color: transparent; color: var(--ck-muted); }
.ck-times { width: 124px; max-height: 320px; overflow-y: auto; padding: 6px; display: grid; gap: 2px; align-content: start; border-left: 1px solid var(--ck-line); overscroll-behavior: contain; scrollbar-width: thin; }
.ck-times-head { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 2px; padding: 10px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ck-muted); background: var(--ck-surface); }
.ck-pop.time-only .ck-times { width: auto; border-left: 0; }
.ck-time { font: inherit; font-size: 13px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; text-align: left; white-space: nowrap; color: var(--ck-ink); cursor: pointer;
  transition: background-color .15s ease, color .15s ease; }
.ck-time:hover, .ck-time:focus-visible { background: var(--ck-soft); color: var(--ck-accent); outline: none; }
.ck-time.on { background: var(--ck-accent); color: #fff; font-weight: 700; }
@media (max-width: 520px) {
  .ck-pop.with-time { flex-direction: column; }
  .ck-pop.with-time .ck-times { width: auto; height: auto !important; max-height: 150px; border-left: 0; border-top: 1px solid var(--ck-line); grid-template-columns: repeat(3, 1fr); }
  .ck-pop.with-time .ck-times-head { grid-column: 1 / -1; }
}

/* ---------- file buttons ---------- */
input[type="file"] { font: inherit; font-size: 13px; color: var(--ck-muted); max-width: 100%; }
input[type="file"]::file-selector-button { font: inherit; font-size: 13px; font-weight: 600; margin-right: 12px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ck-accent) 30%, var(--ck-line)); background: var(--ck-soft); color: var(--ck-accent); transition: background-color .15s ease; }
input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--ck-accent) 14%, var(--ck-surface)); }

@media (prefers-reduced-motion: reduce) {
  .ck-dlg, .ck-back .ck-dlg { transition: opacity .15s ease; transform: none; filter: none; }
  .ck-menu, .ck-opt, .ck-menu.closing, .ck-pop, .ck-pop.closing, .ck-cal-body, .ck-day.on { animation: none; }
  .ck-glow, .ck-mark, .ck-trigger .ck-ico { transition: none; }
}

/* ---------- magnetic drop zone (a port of Kobra's "Magnetic Dropzone") and upload rows ----------
   The zone leans toward a file dragged near it (--mx/--my, its icon further by --ix/--iy), a spotlight follows the
   file (--gx/--gy), and it settles into a solid "release" state on top. Colors are the page's own (a client portal
   keeps its company's page style). Two-class selectors so a page's own button styles don't reach the row buttons. */
.ck-mag { --mx: 0px; --my: 0px; position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; cursor: pointer; outline: none; isolation: isolate;
  color: var(--ck-ink); text-align: left;
  border: 1.5px dashed color-mix(in srgb, var(--ck-accent) 30%, var(--ck-line-strong));
  background:
    radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--ck-accent) calc(var(--pull, 0) * 16%), transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--ck-accent) 3%, var(--ck-surface)), var(--ck-surface));
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(calc(1 + var(--pull, 0) * .012));
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), border-color .2s ease, box-shadow .3s ease; }
.ck-mag:hover { border-color: color-mix(in srgb, var(--ck-accent) 55%, var(--ck-line-strong)); }
.ck-mag:focus-visible { border-color: var(--ck-accent); box-shadow: 0 0 0 3px var(--ck-ring); }
.ck-mag.near { border-color: color-mix(in srgb, var(--ck-accent) calc(40% + var(--pull, 0) * 50%), var(--ck-line-strong));
  box-shadow: 0 0 0 calc(var(--pull, 0) * 5px) color-mix(in srgb, var(--ck-accent) 14%, transparent), 0 18px 40px -26px color-mix(in srgb, var(--ck-accent) 80%, transparent); }
.ck-mag.over { border-style: solid; border-color: var(--ck-accent);
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--ck-accent) 20%, transparent), transparent 75%), var(--ck-soft); }
.ck-mag-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--ck-accent); background: var(--ck-soft);
  border: 1px solid color-mix(in srgb, var(--ck-accent) 18%, transparent); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--ck-accent) 80%, transparent);
  transform: translate3d(var(--ix, 0px), var(--iy, 0px), 0); transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), background-color .2s ease, color .2s ease; }
.ck-mag-ico svg { width: 22px; height: 22px; }
.ck-mag:hover .ck-mag-ico { transform: translateY(-2px); }
.ck-mag.over .ck-mag-ico { color: #fff; background: var(--ck-accent); animation: ckMagBob .9s cubic-bezier(.34, 1.4, .64, 1) infinite alternate; }
.ck-mag-words { display: grid; gap: 2px; min-width: 0; }
.ck-mag-title { display: block; font-size: 14px; font-weight: 700; color: var(--ck-ink); margin: 0; }
.ck-mag-hint { font-size: 12.5px; color: var(--ck-muted); }
.ck-mag-ring { position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; }
.ck-mag.over .ck-mag-ring { opacity: 1; animation: ckMagRing 1.2s ease-out infinite; }
.ck-mag.caught { animation: ckMagCaught .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ckMagBob { from { transform: translate3d(var(--ix, 0px), calc(var(--iy, 0px) - 1px), 0) scale(1); } to { transform: translate3d(var(--ix, 0px), calc(var(--iy, 0px) - 5px), 0) scale(1.06); } }
@keyframes ckMagRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ck-accent) 40%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes ckMagCaught { 0% { transform: scale(1.02); } 45% { transform: scale(.985); } 100% { transform: none; } }

.ck-up-list { display: grid; gap: 7px; }
.ck-up-list:not(:empty) { margin-top: 10px; }
.ck-up { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 9px 10px 9px 9px; border-radius: 13px; border: 1px solid var(--ck-line);
  background: var(--ck-surface); color: var(--ck-ink); box-shadow: 0 1px 2px rgba(16, 18, 27, .05), 0 10px 22px -18px rgba(30, 16, 70, .35);
  animation: ckUpIn .42s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms); transition: border-color .2s ease, opacity .2s ease, transform .2s ease; }
.ck-up.leaving { opacity: 0; transform: translateY(-4px) scale(.98); }
.ck-up[data-state="failed"] { border-color: color-mix(in srgb, #dc2626 35%, var(--ck-line)); }
.ck-up[data-state="done"], .ck-up[data-state="skipped"] { border-color: color-mix(in srgb, #16a34a 30%, var(--ck-line)); }
.ck-up-type { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; font: 800 10px/1 inherit; letter-spacing: .04em;
  color: var(--ck-accent); background: var(--ck-soft); border: 1px solid color-mix(in srgb, var(--ck-accent) 16%, transparent); }
.ck-up-type.pdf { color: color-mix(in srgb, #ea580c 72%, var(--ck-ink)); background: color-mix(in srgb, #f97316 12%, var(--ck-surface)); border-color: color-mix(in srgb, #f97316 22%, transparent); }
.ck-up-type.img { color: color-mix(in srgb, #0284c7 72%, var(--ck-ink)); background: color-mix(in srgb, #0ea5e9 12%, var(--ck-surface)); border-color: color-mix(in srgb, #0ea5e9 22%, transparent); }
.ck-up-type.sheet { color: color-mix(in srgb, #16a34a 72%, var(--ck-ink)); background: color-mix(in srgb, #22c55e 12%, var(--ck-surface)); border-color: color-mix(in srgb, #22c55e 22%, transparent); }
.ck-up-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ck-up-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ck-up-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.ck-up-status { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ck-muted); font-variant-numeric: tabular-nums; }
.ck-up[data-state="failed"] .ck-up-status { color: color-mix(in srgb, #dc2626 75%, var(--ck-ink)); }
.ck-up[data-state="done"] .ck-up-status, .ck-up[data-state="skipped"] .ck-up-status { color: color-mix(in srgb, #16a34a 75%, var(--ck-ink)); }
.ck-up-bar { position: relative; height: 5px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ck-ink) 7%, var(--ck-surface)); }
.ck-up-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ck-accent) 65%, #fff), var(--ck-accent)); transition: width .3s ease, background-color .3s ease; }
.ck-up[data-state="uploading"] .ck-up-bar > i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%); animation: ckUpShine 1.1s ease-in-out infinite; }
.ck-up[data-state="done"] .ck-up-bar > i, .ck-up[data-state="skipped"] .ck-up-bar > i { background: #16a34a; }
.ck-up[data-state="failed"] .ck-up-bar > i, .ck-up[data-state="canceled"] .ck-up-bar > i { width: 0 !important; }
.ck-up-size { font-size: 11.5px; color: var(--ck-muted); font-variant-numeric: tabular-nums; }
.ck-up .ck-up-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 30px; height: 30px; margin: 0; padding: 0 8px; border-radius: 9px;
  border: 1px solid var(--ck-line); background: var(--ck-surface); color: var(--ck-muted); box-shadow: none; font: 600 12px/1 inherit; text-transform: none; letter-spacing: 0; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease; }
.ck-up .ck-up-btn:hover { background: var(--ck-surface); color: var(--ck-accent); border-color: color-mix(in srgb, var(--ck-accent) 40%, var(--ck-line)); }
.ck-up .ck-up-cancel:hover { color: #b91c1c; border-color: color-mix(in srgb, #dc2626 35%, var(--ck-line)); }
.ck-up .ck-up-btn:active { transform: scale(.94); }
.ck-up .ck-up-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ck-ring); }
.ck-up .ck-up-btn[hidden], .ck-up .ck-up-done[hidden] { display: none; }
.ck-up-done { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, #16a34a 14%, var(--ck-surface)); }
.ck-up-tick { width: 15px; height: 15px; fill: none; stroke: #16a34a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14;
  animation: ckUpDraw .35s ease-out .08s forwards; }
@keyframes ckUpIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes ckUpShine { to { transform: translateX(100%); } }
@keyframes ckUpDraw { to { stroke-dashoffset: 0; } }
@media (max-width: 520px) {
  .ck-mag { padding: 14px; gap: 12px; }
  .ck-mag-ico { width: 40px; height: 40px; }
  .ck-up-status { max-width: 45%; }
  .ck-up .ck-up-retry span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-mag, .ck-mag-ico { transform: none !important; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
  .ck-mag.over .ck-mag-ico, .ck-mag.over .ck-mag-ring, .ck-mag.caught, .ck-up, .ck-up-bar > i::after { animation: none !important; }
  .ck-up-tick { animation: none; stroke-dashoffset: 0; }
}