/* ============================================================
   OBUpload — drag-and-drop upload CSS. Self-scoped under .obup.
   Pairs with js/ob-upload.js.
   ============================================================ */
.obup { display: block; max-width: 480px; font-family: var(--_ob-font, var(--ob-font, "Plus Jakarta Sans", sans-serif));
  --line: var(--ob-line, #EDEEF3); --line2: #F4F5F9; --ink: var(--ob-ink, #14161F); --ink2: #5A607A; --ink3: #9AA0B6;
  --accent: var(--ob-accent, #6366F1); --accent-weak: #EEF0FE; --accent-ink: #4F46E5;
  --bad: var(--ob-danger, #E5484D); --bad-soft: var(--ob-danger-soft, #FDECEC); }
.obup .zone {
  border: 1.6px dashed #CBD0DC; border-radius: 14px; background: #FCFCFE;
  padding: 26px 18px; text-align: center; cursor: pointer; transition: border-color .14s, background .14s;
}
.obup .zone:hover, .obup .zone:focus-visible { border-color: var(--accent); background: #FBFBFF; outline: none; }
.obup .zone.over { border-color: var(--accent); background: var(--accent-weak); }
.obup .zone .art {
  width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 13px;
  background: var(--accent-weak); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
}
.obup .zone .tt { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.obup .zone .tt .lnk { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.obup .zone .ms { margin: 0; font-size: 11.5px; color: var(--ink3); }
.obup .obup-native { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }

.obup .list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.obup .list:empty { display: none; }
.obup .card {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: 9px 11px;
}
.obup .card .fic {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: var(--line2); color: var(--ink2);
  display: inline-flex; align-items: center; justify-content: center;
}
.obup .card .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.obup .card .nm { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obup .card .sz { font-size: 11px; color: var(--ink3); }
.obup .card .rm { flex: 0 0 auto; border: 0; background: transparent; color: var(--ink3); cursor: pointer; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.obup .card .rm:hover { background: var(--bad-soft); color: var(--bad); }