@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap');
/* ====== Ocean 2026 theme for JPG6 (client-side only) ====== */
:root{
  --bg: #071222;
  --bg-2:#0a1830;
  --surface:#0e1a2e;
  --card:#0c172bfa;
  --glass:#0c172bd8;
  --ink:#e9f1ff;
  --muted:#9ab0c9;
  --brand:#69d7ff;   /* cyan */
  --accent:#4aa8ff;  /* blue */
  --border:#1e2c45;
  --ok:#22d38c; --warn:#ffc83d; --danger:#ff5d6c;
  --shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  --radius: 16px; --radius-lg: 22px;
  --bezier:cubic-bezier(.2,.8,.2,1);
  --focus: 0 0 0 3px #69d7ff66, 0 0 0 6px #69d7ff33;
}

:root.light{
  --bg:#eaf3ff; --bg-2:#dce9fb; --surface:#ffffff; --card:#ffffffee; --glass:#ffffffd8;
  --ink:#0b1220; --muted:#5c667d; --brand:#0a67ff; --accent:#4292ff; --border:#d6deea;
  --shadow: 0 12px 30px rgba(13,23,41,.12), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Ensure [hidden] attribute always hides even when CSS sets display:grid/flex */
[hidden]{ display:none !important; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1100px 700px at 70% -10%, #163a70 0%, var(--bg) 35%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  font:16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Segoe UI Symbol","Noto Color Emoji";
  overflow-x:hidden;
}

/* Utility: visually hide but keep clickable/programmable */
.visually-hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  border:0 !important; white-space:nowrap !important;
}

/* Background visuals */
#bg{position:fixed; inset:0; z-index:-1; overflow:hidden}
.wave{position:absolute; left:-10%; right:-10%; height:32vh; border-radius:50%; filter:blur(42px) saturate(1.05); mix-blend-mode:screen; opacity:.18;
  background: radial-gradient(ellipse at 40% 40%, #7cd6ff55 0, transparent 60%),
              radial-gradient(ellipse at 70% 60%, #2d6fe044 0, transparent 65%),
              radial-gradient(ellipse at 20% 70%, #ff7b7b22 0, transparent 55%);
  animation: drift 22s var(--bezier) infinite alternate;}
.w1{top:-8vh; transform:rotate(-6deg)} .w2{top:28vh; transform:rotate(5deg); animation-duration:28s; opacity:.14}
.w3{top:62vh; transform:rotate(-2deg); animation-duration:34s; opacity:.12}
@keyframes drift{to{transform:translateY(-6vh) rotate(8deg)}}
.bubbles{position:absolute; inset:0; opacity:.15}
:root.light .bubbles{opacity:.08}

/* Header */
.app-header{
  position:sticky; top:0; z-index:10;
  display:grid; grid-template-columns: 1fr auto auto; gap:16px; align-items:center;
  padding:14px clamp(12px, 3vw, 28px);
  background:linear-gradient(to bottom, var(--glass), color-mix(in srgb, var(--glass) 70%, transparent));
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom:1px solid var(--border);
}
@media (max-width:640px){
  .app-header{
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap:8px 10px;
    padding:10px 12px;
  }
  .brand{ grid-row:1; grid-column:1; gap:8px }
  .brandtext{ display:none }
  .logo{ width:40px; height:40px; font-size:14px; border-radius:10px }
  .header-actions{ grid-row:1; grid-column:3; gap:6px }
  .ghost, .file-ghost{ padding:8px 9px; border-radius:10px; font-size:15px }
  .tabs{ grid-row:2; grid-column:1/-1; flex-wrap:nowrap; overflow-x:auto; gap:6px; scrollbar-width:none; padding-bottom:2px }
  .tabs::-webkit-scrollbar{ display:none }
  .tab{ padding:8px 12px; font-size:13px; white-space:nowrap }
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  display:grid; place-items:center; width:52px; height:52px; border-radius:14px;
  background:linear-gradient(145deg, #0e1a2e, #1b2f53); color:#fff;
  font-size:18px; font-weight:800; letter-spacing:.5px; box-shadow:var(--shadow)
}
.brandtext .title{font-weight:800; letter-spacing:.3px}
.tagline{opacity:.85; font-size:14px}

.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{appearance:none; border:1px solid var(--border); color:var(--ink);
  padding:10px 14px; background:color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius:999px; transition:all .2s var(--bezier); cursor:pointer}
.tab:hover{background:color-mix(in srgb, var(--surface) 85%, transparent)}
.tab.is-active{background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--surface)) , var(--surface));
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent)}

/* Header actions */
.header-actions{display:flex; gap:10px; align-items:center}
.ghost{background:color-mix(in srgb, var(--surface) 75%, transparent); color:var(--ink); border:1px solid var(--border);
  padding:10px 12px; border-radius:12px; cursor:pointer; transition:transform .18s, background .2s, border-color .2s}
.ghost:hover{background:color-mix(in srgb, var(--surface) 92%, transparent); transform:translateY(-1px)}
.ghost.danger{color:var(--danger)}
.file-ghost{display:inline-grid; place-items:center; background:color-mix(in srgb, var(--surface) 75%, transparent); color:var(--ink); border:1px solid var(--border);
  padding:10px 12px; border-radius:12px; cursor:pointer}

/* Main */
.app-main{padding:18px clamp(12px, 3vw, 28px) 42px; max-width:1400px; margin:0 auto}
.panel{display:none; animation:fadeUp .25s var(--bezier)}
.panel.is-active{display:block}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

/* Page title */
.page-title{
  margin: 4px 0 14px;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: .2px;
}

/* Forms */
.input, .select, textarea.input{
  width:280px; max-width:100%;
  outline:none; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  box-shadow: 0 1px 0 #00000022 inset; transition: box-shadow .2s, border-color .2s, background .2s
}
.input::placeholder, textarea.input::placeholder{color:color-mix(in srgb, var(--muted) 85%, transparent)}
.input:focus, .select:focus, textarea.input:focus{box-shadow:var(--focus); border-color: color-mix(in srgb, var(--brand) 55%, var(--border))}
.toolbar{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px}

/* Output mode segmented control */
.outpanel{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.segmented{display:flex; background:color-mix(in srgb, var(--surface) 85%, transparent); border:1px solid var(--border); border-radius:12px; padding:4px}
.seg{border:0; background:transparent; color:var(--ink); padding:8px 10px; border-radius:8px; cursor:pointer; transition:background .18s}
.seg:hover{background:color-mix(in srgb, var(--surface) 92%, transparent)}
.seg.is-active{background:linear-gradient(180deg, #88e3ff, #69d7ff); color:#00233e; font-weight:700}

/* Stats */
.stats{opacity:.9; display:flex; gap:8px; align-items:center}

/* Gallery grid */
.gallery{display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px}
:root[data-grid="sm"] .gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
:root[data-grid="lg"] .gallery{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* Card */
.card{
  position:relative; z-index:1;
  display:flex; flex-direction:column; border-radius:18px; background:var(--card);
  border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden;
}
.card .fav{
  position:absolute; top:10px; left:10px; z-index:3;
  border:1px solid var(--border); border-radius:12px;
  background:color-mix(in srgb, var(--surface) 80%, transparent); color:#ffd166; padding:6px 10px; cursor:pointer
}
.card .fav.active{background:#2a1f00; color:#ffc83d; border-color:#806300}

/* Stable preview area */
.card-top{
  margin:0;
  aspect-ratio: 4 / 3;
  position: relative;
  display:grid; place-items:center;
  background:#0b1222; overflow:hidden;
}
:root.light .card-top{background:#f1f5fb}
.card-top img{
  width:100%; height:100%;
  object-fit: contain;
  display:block; transform-origin:center; transition:transform .22s var(--bezier)
}
.card:hover .card-top img{transform:scale(1.02)}

.card-body{
  display:grid; gap:12px; padding:12px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border-top:1px solid var(--border);
  overflow:visible;
}
.btn{
  border:1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface)); color:var(--ink);
  padding:11px 12px; box-shadow: 0 6px 14px rgba(0,0,0,.15); transition:transform .15s var(--bezier), border-color .2s
}
.btn:hover{transform:translateY(-1px); border-color: color-mix(in srgb, var(--brand) 55%, var(--border))}
.btn.primary{background:linear-gradient(180deg, #5ccfff, #2aa9ff); color:#00233e; border-color:#5ccfff; font-weight:700}
.btn.light{background:var(--surface)}
.btn.danger{background:linear-gradient(180deg, color-mix(in srgb, var(--danger) 18%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--danger) 45%, var(--border))}
.btn.alt{background:linear-gradient(180deg, #88e3ff, #69d7ff); color:#00233e; border-color:#88e3ff}
.btn.ghost{background:transparent}
.btn.mini{padding:9px 10px}
.btn.tiny{padding:8px 10px; font-size:12px}
.actions{display:flex; gap:8px; justify-content:space-between; flex-wrap:wrap}

/* Copy buttons block */
.copy-group{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Per-card wrap toggle visibility */
.wrap-row{display:none}
body:has(#showWrapToggle:checked) .wrap-row{display:flex}

/* Publish block */
.publish{display:grid; gap:10px; padding:10px; border:1px dashed var(--border); border-radius:12px; background:color-mix(in srgb, var(--surface) 85%, transparent)}
.publish-head{font-weight:800; font-size:13px; letter-spacing:.2px; opacity:.95}
.publish-variants{display:flex; gap:8px; flex-wrap:wrap}
.publish-variants .btn.tiny{white-space:nowrap}

/* Hosted URL row */
.url-field{display:grid; gap:6px}
.url-row{
  display:flex; gap:8px; align-items:center;
  min-width:0;
}
.url-row .input{flex:1; min-width:0}
.url-row .btn{flex:0 0 auto}

/* Switch */
.switch{display:flex; gap:8px; align-items:center}
.switch.small span{font-size:12px; opacity:.9}
.switch input{appearance:none; width:44px; height:26px; border-radius:22px; background:color-mix(in srgb, var(--surface) 75%, transparent);
  border:1px solid var(--border); position:relative; outline:none; cursor:pointer; transition:background .2s, border-color .2s}
.switch input:checked{background:color-mix(in srgb, var(--ok) 40%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 60%, var(--border))}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:left .2s}
.switch input:checked::after{left:21px}

/* Bottom info */
.card-info{display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--border); background:var(--card)}
.card-info .name{font-size:13px; line-height:1.25; max-height:2.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.badges{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Badges */
.badge{font-size:12px; padding:6px 8px; border-radius:999px; background:color-mix(in srgb, var(--surface) 90%, transparent); border:1px solid var(--border)}
.badge.dim::before{content:"RES "; opacity:.85; font-weight:600}
.badge.size::before{content:"SIZE "; opacity:.85; font-weight:600}
.badge.fmt::before{content:"FMT "; opacity:.85; font-weight:600}

/* Upload */
.uibox{display:grid; grid-template-columns:1.3fr .7fr; gap:16px}
@media (max-width:1100px){.uibox{grid-template-columns:1fr}}
.dropzone{
  position:relative; /* for overlay label */
  display:grid; place-items:center; min-height:220px;
  border:2px dashed color-mix(in srgb, var(--brand) 55%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 85%, transparent), color-mix(in srgb, var(--surface) 70%, transparent));
  border-radius:var(--radius-lg); box-shadow:var(--shadow); cursor:pointer; transition:transform .18s, border-color .18s, background .18s;
  user-select:none;
}
.dropzone:focus{outline:none; box-shadow:var(--focus)}
.dropzone.drag{transform:scale(1.01); border-color: color-mix(in srgb, var(--ok) 55%, var(--border))}
.dz-inner .big{font-size:20px; margin-bottom:6px}
.dz-inner .small{opacity:.9}

/* Full clickable overlay to open chooser (doesn't block DnD because events bubble) */
.dz-label{
  position:absolute; inset:0;
  border-radius:inherit;
  cursor:pointer;
  /* transparent & non-intrusive */
  background:transparent;
}

.queue{display:grid; gap:10px}
.qitem{display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:10px}
.qitem .bar{height:8px; background:#ffffff26; border-radius:10px; overflow:hidden; flex:1}
.qitem .bar > i{display:block; height:100%; width:0%; background:linear-gradient(90deg, #69d7ff, #22d38c)}
.qitem .stat{min-width:64px; text-align:right; opacity:.95}

/* Settings/About */
.settings, .about{background:var(--card); border:1px solid var(--border); padding:16px; border-radius:var(--radius-lg); box-shadow:var(--shadow)}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:900px){.grid3{grid-template-columns:1fr} .grid2{grid-template-columns:1fr}}
.bullets{line-height:1.65}
.muted{color:var(--muted)}
.small{font-size:12px}
.divider{height:1px; background:var(--border); margin:14px 0}
.diag{margin-top:10px; display:grid; gap:6px}

/* Toast */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--surface); color:var(--ink);
  border:1px solid var(--border); padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:transform .2s, opacity .2s}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* Modal (fixed-size grid to prevent growth on crop) */
.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:#0007;
  opacity:0; pointer-events:none; transition:opacity .2s;
  z-index: 9999;
}
.modal.open{opacity:1; pointer-events:auto}
.modal-body{
  width:min(1000px, 96vw);
  max-height:min(92vh, 860px);
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto;
}

/* Modal head */
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:color-mix(in srgb, var(--surface) 90%, transparent); border-bottom:1px solid var(--border)}
.modal-head .title{font-weight:700}
.modal-head .close{color:var(--ink); cursor:pointer}

/* Editor area — strictly bounded */
.editor-wrap{
  position:relative;
  padding:12px;
  display:grid; place-items:center;
  overflow:hidden;               /* key: crop overlay cannot expand layout */
  max-height: clamp(300px, 70vh, 700px);
  contain: layout paint;         /* isolates paint so big shadows don’t reflow */
  isolation:isolate;             /* ensure correct z-index stacking */
}
#editCanvas{
  max-width:100%;
  max-height:100%;
  display:block;
  border-radius:12px;
  background:#0b1222;
}
:root.light #editCanvas{background:#f1f5fb}

/* Editor toolbar (split) */
.editor-toolbar{
  display:flex; gap:12px; padding:12px; border-top:1px solid var(--border);
  justify-content:space-between; align-items:flex-end; flex-wrap:wrap;
}
.editor-tools-left{display:flex; gap:8px; flex-wrap:wrap}
.editor-tools-right{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.field.mini span{font-size:12px; opacity:.9}
.input.mini, .select.mini{width:160px; padding:8px 10px; border-radius:10px}
.num-with-suffix{display:flex; align-items:center; gap:6px}
.num-with-suffix .suffix{font-size:12px; opacity:.8}
.range-inline{display:flex; align-items:center; gap:8px}
.range-inline .range-val{min-width:40px; text-align:right; opacity:.9}

/* Crop overlay — absolutely positioned, non-intrusive */
.crop-box{
  position:absolute;
  left:0; top:0; width:0; height:0;
  border:2px dashed var(--accent);
  border-radius:8px;
  pointer-events:none;
  z-index:5;
  /* dim outside without affecting layout */
  box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--accent) 15%, transparent);
  will-change: left, top, width, height;
}

/* Focus ring */
button:focus, .btn:focus, .ghost:focus, .tab:focus, .switch input:focus, .dropzone:focus{box-shadow:var(--focus)}

/* ===== Upload Hero ===== */
.upload-hero{ display:grid; gap:18px; }

.dz-icon{ margin-bottom:10px; opacity:.85 }

.upload-options-row{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
.upload-duration-toggle{
  display:flex; background:color-mix(in srgb, var(--surface) 85%, transparent);
  border:1px solid var(--border); border-radius:12px; padding:4px;
}
.dur-btn{
  border:0; background:transparent; color:var(--ink);
  padding:9px 18px; border-radius:8px; cursor:pointer;
  font-size:14px; font-weight:600; transition:background .18s, color .18s;
}
.dur-btn.active{
  background:linear-gradient(180deg,#88e3ff,#69d7ff); color:#00233e;
}
.upload-duration-hint{ font-size:13px; color:var(--muted) }

/* ===== Upload Result ===== */
.upload-result{
  display:grid; grid-template-columns:1fr 1.4fr; gap:24px; align-items:start;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow);
}
@media(max-width:700px){ .upload-result{grid-template-columns:1fr} }

.upload-result-preview img{
  width:100%; max-height:320px; object-fit:contain; border-radius:12px; background:#0b1222;
}
:root.light .upload-result-preview img{background:#f1f5fb}

.upload-result-right{ display:grid; gap:14px }
.upload-result-meta{
  font-size:13px; color:var(--muted); padding-bottom:4px;
  border-bottom:1px solid var(--border);
}


.upload-result-title{
  display:flex; align-items:center; gap:10px;
  font-size:18px; font-weight:700;
}
.upload-ok-icon svg{ flex-shrink:0 }

.link-type-wrap .link-type-select{ width:100%; max-width:100% }

.link-output-wrap{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end;
}
.link-output{
  width:100%; max-width:100%; min-height:60px; resize:vertical;
  font-family:monospace; font-size:13px;
}

.upload-result-actions{ display:flex; gap:10px; flex-wrap:wrap }

/* ===== Advanced settings collapse ===== */
.upload-advanced{
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid var(--border); border-radius:14px; padding:12px 16px;
  margin-top:4px;
}
.upload-advanced summary{
  cursor:pointer; font-size:14px; opacity:.85; user-select:none;
  list-style:none; display:flex; align-items:center; gap:6px;
}
.upload-advanced summary::before{ content:"▸"; transition:transform .2s }
.upload-advanced[open] summary::before{ transform:rotate(90deg) }

/* ===== Upload loading overlay (from implement_this) ===== */
.upload-loading-overlay{
  position:fixed; inset:0; z-index:9990;
  background:#000e1fdd; backdrop-filter:blur(8px);
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s cubic-bezier(.23,1,.32,1);
  font-family:'Syncopate','Helvetica Neue',sans-serif;
}
.upload-loading-overlay.visible{ opacity:1; pointer-events:auto }
.upload-loading-overlay .loader-logo{
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.upload-loading-overlay .brand-row{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
  opacity:0; animation:ul-fade-in .5s ease .05s forwards;
}
.upload-loading-overlay .brand-line{ width:20px; height:1px; background:rgba(255,255,255,.22) }
.upload-loading-overlay .brand-jpg{
  font-family:'Syncopate',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.52em; color:rgba(255,255,255,.36); text-transform:uppercase; padding-right:.52em;
}
.upload-loading-overlay .loading-row{ display:flex; align-items:center }
.upload-loading-overlay .l-char{
  display:inline-block; font-family:'Syncopate',sans-serif; font-size:19px; font-weight:400;
  letter-spacing:.4em; color:#fff; opacity:0;
  animation:ul-char-rise .45s cubic-bezier(.23,1,.32,1) forwards;
}
.upload-loading-overlay .ch-L{ animation-delay:.22s }
.upload-loading-overlay .ch-A{ animation-delay:.44s }
.upload-loading-overlay .ch-D{ animation-delay:.50s }
.upload-loading-overlay .ch-I{ animation-delay:.56s }
.upload-loading-overlay .ch-N{ animation-delay:.62s }
.upload-loading-overlay .ch-G{ animation-delay:.68s; letter-spacing:0 }
.upload-loading-overlay .o-spinner-wrap{
  letter-spacing:.4em; display:inline-flex; align-items:center; justify-content:center;
  opacity:0; animation:ul-char-rise .45s cubic-bezier(.23,1,.32,1) .32s forwards; position:relative;
}
.upload-loading-overlay .o-spinner-wrap::before{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);
  animation:ul-glow 2.4s ease-in-out infinite; pointer-events:none;
}
.upload-loading-overlay .spin-svg{ display:block; width:13px; height:13px; overflow:visible }
.upload-loading-overlay .ring-arc{
  transform-box:fill-box; transform-origin:center;
  animation:ul-spin 1s linear infinite;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.7));
}
.upload-loading-overlay .loading-line{
  margin-top:13px; height:1px; width:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:ul-line-sweep .9s cubic-bezier(.23,1,.32,1) .25s forwards; align-self:stretch;
}
@keyframes ul-fade-in{ from{opacity:0} to{opacity:1} }
@keyframes ul-char-rise{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes ul-glow{ 0%,100%{transform:scale(.8);opacity:.5} 50%{transform:scale(1.7);opacity:0} }
@keyframes ul-spin{ to{transform:rotate(360deg)} }
@keyframes ul-line-sweep{ to{width:100%} }

/* Re-trigger animations each time overlay is shown */
.upload-loading-overlay.visible .brand-row,
.upload-loading-overlay.visible .l-char,
.upload-loading-overlay.visible .o-spinner-wrap,
.upload-loading-overlay.visible .loading-line{
  animation-play-state: running;
}