/* =========================================================================
   ReUI-inspired design system for Telegraph-Image
   Neutral (zinc) base + blue primary, subtle borders, pill badges,
   mono uppercase labels, crisp 3px focus rings. Light/Dark via [data-theme].
   ========================================================================= */

:root{
  color-scheme: light;
  --site-background:#ffffff;
  --site-foreground:#09090b;
  --site-card:#ffffff;
  --site-muted:#f4f4f5;
  --site-muted-foreground:#71717a;
  --site-border:#e4e4e7;
  --site-input:#e4e4e7;
  --site-primary:#4b73ff;
  --site-primary-hover:#3b62e8;
  --site-primary-foreground:#ffffff;
  --site-accent:#f4f4f5;
  --site-accent-foreground:#18181b;
  --site-ring:#4b73ff;
  --site-destructive:#ef4444;
  --site-destructive-soft:rgba(239,68,68,.1);
  --site-success:#10b981;
  --site-success-soft:rgba(16,185,129,.1);
  --site-warning:#f59e0b;
  --site-warning-soft:rgba(245,158,11,.12);

  --radius-sm:.375rem;
  --radius-md:.5rem;
  --radius-lg:.625rem;
  --radius-xl:.875rem;
  --radius-2xl:1.25rem;

  --shadow-xs:0 1px 2px rgba(9,9,11,.05);
  --shadow-sm:0 1px 3px rgba(9,9,11,.08),0 1px 2px rgba(9,9,11,.04);
  --shadow-md:0 6px 20px -4px rgba(9,9,11,.08);
  --shadow-lg:0 16px 40px -8px rgba(9,9,11,.12);
  --inner-highlight:inset 0 1px 0 rgba(255,255,255,.7);
}
[data-theme="dark"]{
  color-scheme: dark;
  --site-background:#09090b;
  --site-foreground:#fafafa;
  --site-card:#0f0f12;
  --site-muted:#18181b;
  --site-muted-foreground:#a1a1aa;
  --site-border:#27272a;
  --site-input:#27272a;
  --site-primary:#6b8bff;
  --site-primary-hover:#80a0ff;
  --site-primary-foreground:#ffffff;
  --site-accent:#27272a;
  --site-accent-foreground:#fafafa;
  --site-ring:#6b8bff;
  --site-destructive:#f87171;
  --site-destructive-soft:rgba(248,113,113,.12);
  --site-success:#34d399;
  --site-success-soft:rgba(52,211,153,.12);
  --site-warning:#fbbf24;
  --site-warning-soft:rgba(251,191,36,.12);

  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 20px -4px rgba(0,0,0,.5);
  --shadow-lg:0 16px 40px -8px rgba(0,0,0,.6);
  --inner-highlight:inset 0 1px 0 rgba(255,255,255,.06);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--site-background);
  color:var(--site-foreground);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s,color .25s;
}
a{color:var(--site-primary);text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--site-primary);color:var(--site-primary-foreground)}

/* Subtle background wash */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52rem 32rem at 18% -8%,rgba(75,115,255,.07),transparent 60%),
    radial-gradient(44rem 28rem at 100% 0%,rgba(75,115,255,.05),transparent 55%),
    linear-gradient(to bottom,var(--site-background),var(--site-background));
}

/* ---------- Typography helpers ---------- */
.mono-label{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--site-muted-foreground);
}

/* ---------- Layout ---------- */
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.container-narrow{width:100%;max-width:640px;margin:0 auto;padding:0 20px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:0 1rem;height:2.25rem;
  border-radius:var(--radius-md);
  border:1px solid var(--site-border);
  background:var(--site-card);
  color:var(--site-foreground);
  font-size:.875rem;font-weight:500;line-height:1;
  white-space:nowrap;user-select:none;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s;
  outline:none;
}
.btn:hover{background:var(--site-accent);border-color:var(--site-border)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:0 0 0 3px var(--site-ring);border-color:var(--site-ring)}
.btn[disabled],.btn:disabled{opacity:.5;pointer-events:none}
.btn svg{width:.9rem;height:.9rem;flex-shrink:0}
.btn i{font-size:.9rem;line-height:1;flex-shrink:0}
.btn-lg{height:2.75rem;padding:0 1.5rem;font-size:.9375rem}
.btn-sm{height:2rem;padding:0 .75rem;font-size:.8125rem}

.btn-primary{
  background:var(--site-primary);border-color:transparent;
  color:var(--site-primary-foreground);
  box-shadow:var(--shadow-xs);
}
.btn-primary:hover{background:var(--site-primary-hover)}
.btn-primary:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--site-ring) 45%,transparent);border-color:transparent}

.btn-outline{background:transparent}
.btn-outline:hover{background:var(--site-accent)}

.btn-danger{color:var(--site-destructive);border-color:color-mix(in srgb,var(--site-destructive) 30%,transparent);background:transparent}
.btn-danger:hover{background:var(--site-destructive-soft);border-color:var(--site-destructive)}
.btn-success{color:var(--site-success);border-color:color-mix(in srgb,var(--site-success) 30%,transparent);background:transparent}
.btn-success:hover{background:var(--site-success-soft);border-color:var(--site-success)}
.btn-warning{color:var(--site-warning);border-color:color-mix(in srgb,var(--site-warning) 30%,transparent);background:transparent}
.btn-warning:hover{background:var(--site-warning-soft);border-color:var(--site-warning)}

/* ---------- Inputs ---------- */
.input{
  width:100%;height:2.75rem;padding:.375rem .75rem;
  border-radius:var(--radius-md);
  border:1px solid var(--site-input);
  background:transparent;
  color:var(--site-foreground);
  font-size:1rem;font-family:inherit;
  box-shadow:0 1px 2px rgba(9,9,11,.05);
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.input::placeholder{color:var(--site-muted-foreground)}
.input:focus{border-color:var(--site-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--site-ring) 25%,transparent)}
.input:disabled{opacity:.6}

/* ---------- Frame / Card (ReUI signature) ---------- */
.frame{
  position:relative;
  border:1px solid color-mix(in srgb,var(--site-border) 75%,transparent);
  border-radius:var(--radius-xl);
  background:color-mix(in srgb,var(--site-card) 92%,transparent);
  box-shadow:var(--shadow-sm),var(--inner-highlight);
}
.panel{
  border:1px solid var(--site-border);
  border-radius:var(--radius-lg);
  background:var(--site-card);
  box-shadow:var(--shadow-xs);
  padding:1.25rem;
}
.card-hover{transition:transform .2s,box-shadow .2s,border-color .2s}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--site-ring) 30%,var(--site-border))}

/* ---------- Badges / Tags ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.125rem .55rem;
  border-radius:999px;
  border:1px solid var(--site-border);
  background:var(--site-card);
  color:var(--site-muted-foreground);
  font-size:.6875rem;font-weight:500;line-height:1.4;
  white-space:nowrap;
}
.badge svg{width:.7rem;height:.7rem}
.badge i{font-size:.7rem}
.badge-primary{background:color-mix(in srgb,var(--site-primary) 12%,transparent);border-color:color-mix(in srgb,var(--site-primary) 30%,transparent);color:var(--site-primary)}
.badge-destructive{background:var(--site-destructive-soft);border-color:color-mix(in srgb,var(--site-destructive) 30%,transparent);color:var(--site-destructive)}
.badge-success{background:var(--site-success-soft);border-color:color-mix(in srgb,var(--site-success) 30%,transparent);color:var(--site-success)}
.badge-warning{background:var(--site-warning-soft);border-color:color-mix(in srgb,var(--site-warning) 30%,transparent);color:var(--site-warning)}

/* legacy tag class (admin) */
.tag{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.65rem;font-weight:600;line-height:1;
  padding:.25rem .55rem;border-radius:999px;
  background:color-mix(in srgb,var(--site-primary) 10%,transparent);
  color:var(--site-primary);
}
.tag.blocked{background:var(--site-destructive-soft);color:var(--site-destructive)}
.tag.whitelist{background:var(--site-success-soft);color:var(--site-success)}

/* ---------- Site header ---------- */
.header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--site-background) 82%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--site-border);
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:0 20px;height:3.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.logo{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--site-foreground);
}
.logo-mark{
  width:1.75rem;height:1.75rem;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--site-primary),#8aa5ff);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-xs);
}
.logo-mark svg{width:1rem;height:1rem}
.header-actions{display:flex;gap:.5rem;align-items:center}

.icon-btn{
  width:2.25rem;height:2.25rem;border-radius:var(--radius-md);
  border:1px solid var(--site-border);
  background:var(--site-card);color:var(--site-foreground);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .15s,border-color .15s,color .15s;
  outline:none;
}
.icon-btn:hover{background:var(--site-accent)}
.icon-btn:focus-visible{box-shadow:0 0 0 3px var(--site-ring);border-color:var(--site-ring)}
.icon-btn svg{width:1rem;height:1rem}
.icon-btn i{font-size:1rem;line-height:1}

/* ---------- Segmented control / nav tabs ---------- */
.segmented{
  display:inline-flex;gap:2px;padding:3px;
  background:var(--site-muted);border:1px solid var(--site-border);
  border-radius:var(--radius-lg);
}
.segment{
  padding:.4rem .9rem;border:none;border-radius:var(--radius-md);
  background:transparent;color:var(--site-muted-foreground);
  font-size:.8125rem;font-weight:500;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background-color .15s,color .15s,box-shadow .15s;
}
.segment:hover{color:var(--site-foreground)}
.segment.active{
  background:var(--site-card);color:var(--site-foreground);
  box-shadow:var(--shadow-xs);
}
.segment svg{width:.8rem;height:.8rem}
.segment i{font-size:.8rem;line-height:1}

/* ---------- Dropdown ---------- */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:50;
  min-width:10rem;padding:.3rem;
  border:1px solid var(--site-border);border-radius:var(--radius-lg);
  background:var(--site-card);box-shadow:var(--shadow-md);
  display:none;
}
.dropdown-menu.show{display:block;animation:pop .14s ease}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.dropdown-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .7rem;border-radius:var(--radius-md);
  font-size:.8125rem;color:var(--site-foreground);
  cursor:pointer;transition:background-color .12s;
}
.dropdown-item:hover{background:var(--site-accent)}
.dropdown-item.active{background:color-mix(in srgb,var(--site-primary) 10%,transparent);color:var(--site-primary);font-weight:500}
.dropdown-item svg{width:.85rem;height:.85rem}
.dropdown-item i{font-size:.85rem;color:var(--site-muted-foreground)}

/* ---------- Modal ---------- */
.modal{display:none;position:fixed;inset:0;z-index:200;background:rgba(9,9,11,.55);align-items:center;justify-content:center;padding:1.25rem}
.modal.active{display:flex}
.modal-content{
  width:100%;max-width:26rem;padding:1.5rem;
  border:1px solid var(--site-border);border-radius:var(--radius-xl);
  background:var(--site-card);box-shadow:var(--shadow-lg),var(--inner-highlight);
  animation:modalIn .2s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal-title{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.4rem}
.modal-body{font-size:.875rem;color:var(--site-muted-foreground);margin-bottom:1rem;line-height:1.6}
.modal-input{width:100%;height:2.75rem;padding:.375rem .75rem;margin-bottom:1rem;border-radius:var(--radius-md);border:1px solid var(--site-input);background:transparent;color:var(--site-foreground);font-size:1rem;font-family:inherit;box-shadow:0 1px 2px rgba(9,9,11,.05);outline:none;transition:border-color .15s,box-shadow .15s}
.modal-input:focus{border-color:var(--site-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--site-ring) 25%,transparent)}
.modal-footer{display:flex;gap:.5rem;justify-content:flex-end}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:1.5rem;left:50%;z-index:300;
  transform:translateX(-50%) translateY(120%);
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem 1.1rem;border-radius:var(--radius-lg);
  border:1px solid var(--site-border);background:var(--site-card);
  color:var(--site-foreground);font-size:.875rem;font-weight:500;
  box-shadow:var(--shadow-md),var(--inner-highlight);
  opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s;
  max-width:calc(100vw - 2.5rem);
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.success{border-left:3px solid var(--site-success)}
.toast.error{border-left:3px solid var(--site-destructive)}
.toast.warning{border-left:3px solid var(--site-warning)}

/* ---------- Upload page ---------- */
.upload-shell{min-height:100vh;display:flex;flex-direction:column}
.upload-main{
  flex:1;width:100%;max-width:640px;margin:0 auto;
  padding:4.5rem 1.25rem 3rem;
  display:flex;flex-direction:column;gap:1.5rem;
}
.hero{display:flex;flex-direction:column;gap:.75rem;align-items:center;text-align:center}
.hero h1{
  font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1.15;
  color:var(--site-foreground);
  background:linear-gradient(180deg,var(--site-foreground),color-mix(in srgb,var(--site-foreground) 70%,transparent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p{color:var(--site-muted-foreground);font-size:.9375rem;max-width:34rem}

.upload-card{padding:1.25rem}
.drop-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;
  padding:3rem 1.5rem;border-radius:var(--radius-lg);
  border:1.5px dashed color-mix(in srgb,var(--site-border) 90%,transparent);
  background:color-mix(in srgb,var(--site-muted) 55%,transparent);
  text-align:center;cursor:pointer;
  transition:border-color .2s,background-color .2s,transform .2s;
}
.drop-zone:hover,.drop-zone.dragover{
  border-color:var(--site-ring);
  background:color-mix(in srgb,var(--site-primary) 6%,transparent);
}
.drop-zone.dragover{transform:scale(1.01)}
.drop-zone-icon{
  width:3.25rem;height:3.25rem;border-radius:var(--radius-lg);
  background:var(--site-card);border:1px solid var(--site-border);
  display:flex;align-items:center;justify-content:center;color:var(--site-primary);
  box-shadow:var(--shadow-xs);
}
.drop-zone-icon svg{width:1.5rem;height:1.5rem}
.drop-zone-text{font-size:.9375rem;font-weight:600}
.drop-zone-hint{font-size:.8125rem;color:var(--site-muted-foreground)}

.upload-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.file-input{display:none}

/* queue */
.state-queue{display:none;flex-direction:column;gap:.6rem;max-height:22rem;overflow-y:auto;padding:.25rem}
.queue-item{
  display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;
  border:1px solid var(--site-border);border-radius:var(--radius-lg);
  background:var(--site-card);
}
.queue-thumb{width:2.75rem;height:2.75rem;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--site-border);background:var(--site-muted)}
.queue-info{flex:1;min-width:0}
.queue-name{font-size:.8125rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.queue-meta{font-size:.72rem;color:var(--site-muted-foreground);margin-top:1px}
.queue-status{font-size:.75rem;font-weight:600}
.queue-status.done{color:var(--site-success)}
.queue-status.fail{color:var(--site-destructive)}
.queue-status.uploading{color:var(--site-primary)}

/* result */
.state-result{display:none;flex-direction:column;gap:1rem;padding:.25rem}
.result-preview{
  width:100%;max-height:16rem;object-fit:contain;
  border-radius:var(--radius-lg);border:1px solid var(--site-border);
  background:var(--site-muted);
}
.result-tabs{display:inline-flex;gap:2px;padding:3px;background:var(--site-muted);border:1px solid var(--site-border);border-radius:var(--radius-lg);width:fit-content}
.result-tab{
  padding:.4rem .95rem;border:none;border-radius:var(--radius-md);
  background:transparent;color:var(--site-muted-foreground);
  font-size:.8125rem;font-weight:500;transition:background-color .15s,color .15s;
}
.result-tab:hover{color:var(--site-foreground)}
.result-tab.active{background:var(--site-card);color:var(--site-foreground);box-shadow:var(--shadow-xs)}
.result-row{display:flex;gap:.6rem;align-items:center}
.result-input{flex:1}
.copy-hint{font-size:.72rem;color:var(--site-muted-foreground);text-align:center}

.url-section{display:flex;gap:.6rem}
.url-input{flex:1}
.url-section .btn{height:2.75rem;padding:0 1.25rem}
.result-row .btn{height:2.75rem}

/* storage toggle (legacy) */
.storage-toggle{display:flex;gap:.4rem;align-items:center}
.storage-label{font-size:.72rem;color:var(--site-muted-foreground);font-weight:500}
.storage-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem .8rem;border-radius:var(--radius-md);
  border:1px solid var(--site-border);background:var(--site-card);
  color:var(--site-muted-foreground);font-size:.75rem;font-weight:600;
  transition:all .15s;
}
.storage-btn:hover{border-color:var(--site-ring);color:var(--site-foreground)}
.storage-btn.active{background:var(--site-primary);color:var(--site-primary-foreground);border-color:transparent}

/* ---------- Footer ---------- */
.footer{
  padding:1.5rem 1.25rem;text-align:center;
  font-size:.78rem;color:var(--site-muted-foreground);
  border-top:1px solid var(--site-border);
}
.footer a{font-weight:500}
.footer a:hover{text-decoration:underline}

/* ---------- Admin: toolbar ---------- */
.toolbar{
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  margin-bottom:1.25rem;
  border:1px solid var(--site-border);border-radius:var(--radius-xl);
  background:var(--site-card);box-shadow:var(--shadow-xs);
  padding:.9rem;
}
.search-input{flex:1;min-width:11rem;height:2.75rem;padding:.375rem .75rem;border-radius:var(--radius-md);border:1px solid var(--site-input);background:transparent;color:var(--site-foreground);font-size:1rem;font-family:inherit;box-shadow:0 1px 2px rgba(9,9,11,.05);outline:none;transition:border-color .15s,box-shadow .15s}
.search-input::placeholder{color:var(--site-muted-foreground)}
.search-input:focus{border-color:var(--site-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--site-ring) 25%,transparent)}
.stats{font-size:.78rem;color:var(--site-muted-foreground);margin-left:auto;white-space:nowrap}

/* nav tabs (legacy admin) */
.nav-tabs{display:inline-flex;gap:2px;padding:3px;background:var(--site-muted);border:1px solid var(--site-border);border-radius:var(--radius-lg)}
.nav-tab{padding:.4rem .9rem;border:none;border-radius:var(--radius-md);background:transparent;color:var(--site-muted-foreground);font-size:.8125rem;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;transition:background-color .15s,color .15s,box-shadow .15s}
.nav-tab:hover{color:var(--site-foreground)}
.nav-tab.active{background:var(--site-card);color:var(--site-foreground);box-shadow:var(--shadow-xs)}
.nav-tab svg{width:.8rem;height:.8rem}
.nav-tab i{font-size:.8rem;line-height:1}

.main{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:1.25rem 1.25rem 6rem}

/* ---------- Admin: views / grid ---------- */
.view{display:none}
.view.active{display:block}
.main-admin{max-width:1200px;margin:0 auto;padding:1.25rem 1.25rem 6rem}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.card{
  position:relative;border:1px solid var(--site-border);border-radius:var(--radius-xl);
  background:var(--site-card);overflow:hidden;box-shadow:var(--shadow-xs);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--site-ring) 35%,var(--site-border))}
.card-media{width:100%;height:9.5rem;background:var(--site-muted);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer}
.card-media img,.card-media video{max-width:100%;max-height:100%;object-fit:contain}
.card-media .file-icon{font-size:2.5rem;color:var(--site-muted-foreground)}
.card-overlay{position:absolute;inset:0;background:rgba(9,9,11,.5);display:flex;align-items:center;justify-content:center;gap:.4rem;opacity:0;transition:opacity .18s}
.card:hover .card-overlay{opacity:1}
.card-overlay-btn{
  width:2rem;height:2rem;border-radius:999px;border:none;
  background:rgba(255,255,255,.92);color:#18181b;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
  transition:transform .15s;
}
.card-overlay-btn:hover{transform:scale(1.1)}
.card-info{padding:.75rem}
.card-name{font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.2rem}
.card-meta{font-size:.7rem;color:var(--site-muted-foreground);display:flex;justify-content:space-between;align-items:center}
.card-tags{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.4rem}

/* card management view */
.card-view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem}
.image-card{
  position:relative;border:1px solid var(--site-border);border-radius:var(--radius-xl);
  background:var(--site-card);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-xs);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.image-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--site-ring) 35%,var(--site-border))}
.image-card .media{width:100%;aspect-ratio:4/3;background:var(--site-muted);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.image-card .media img,.image-card .media video{max-width:100%;max-height:100%;object-fit:cover}
.image-card .media .file-icon{font-size:2.2rem;color:var(--site-muted-foreground)}
.image-card .info{padding:.85rem}
.image-card .filename{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.3rem}
.image-card .details{font-size:.72rem;color:var(--site-muted-foreground);display:flex;justify-content:space-between}
.image-card .actions{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.35rem;opacity:0;transition:opacity .18s;z-index:2}
.image-card:hover .actions{opacity:1}
.image-card .actions button{
  width:1.85rem;height:1.85rem;border-radius:999px;border:none;
  background:rgba(255,255,255,.92);color:#18181b;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  transition:transform .15s;box-shadow:var(--shadow-sm);
}
.image-card .actions button:hover{transform:scale(1.1)}
.image-card .select-check{
  position:absolute;top:.5rem;left:.5rem;z-index:2;
  width:1.5rem;height:1.5rem;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.9);background:rgba(9,9,11,.25);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.65rem;
  transition:all .15s;
}
.image-card .select-check.selected{background:var(--site-primary);border-color:var(--site-primary)}

/* ---------- Waterfall ---------- */
.waterfall{column-count:4;column-gap:1rem}
.waterfall-item{
  break-inside:avoid;margin-bottom:1rem;
  border:1px solid var(--site-border);border-radius:var(--radius-xl);
  overflow:hidden;background:var(--site-card);cursor:pointer;
  box-shadow:var(--shadow-xs);
  transition:transform .2s,box-shadow .2s;
}
.waterfall-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.waterfall-item img{width:100%;height:auto;display:block}
.item{break-inside:avoid;margin-bottom:.75rem;border:1px solid var(--site-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--site-card);cursor:pointer}
.item img{width:100%;height:auto;display:block}
.load-more{text-align:center;margin:1.25rem auto}

/* ---------- Lightbox ---------- */
.lightbox{display:none;position:fixed;inset:0;background:rgba(9,9,11,.92);z-index:1000;align-items:center;justify-content:center;padding:1.25rem}
.lightbox.active{display:flex}
.lightbox img{max-width:92%;max-height:92%;object-fit:contain;border-radius:var(--radius-lg)}

/* ---------- Empty / loading ---------- */
.empty{text-align:center;padding:4rem 1.25rem;color:var(--site-muted-foreground)}
.empty-icon{
  width:4rem;height:4rem;margin:0 auto 1rem;border-radius:var(--radius-xl);
  border:1px solid var(--site-border);background:var(--site-muted);
  display:flex;align-items:center;justify-content:center;font-size:1.75rem;
}
.empty-text{font-size:1rem;font-weight:600;margin-bottom:.3rem;color:var(--site-foreground)}
.empty-hint{font-size:.82rem}
.loading-wrap{text-align:center;padding:2.5rem}
.spinner{
  width:2.25rem;height:2.25rem;margin:0 auto;
  border:2.5px solid var(--site-muted);
  border-top-color:var(--site-primary);
  border-radius:999px;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Batch bar ---------- */
.batch-bar{
  position:fixed;bottom:1.25rem;left:50%;z-index:150;
  transform:translateX(-50%) translateY(160%);
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:center;
  padding:.8rem 1.1rem;border:1px solid var(--site-border);border-radius:var(--radius-xl);
  background:color-mix(in srgb,var(--site-card) 92%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:var(--shadow-lg),var(--inner-highlight);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  max-width:calc(100vw - 2.5rem);
}
.batch-bar.show{transform:translateX(-50%) translateY(0)}
.batch-bar .count{font-size:.82rem;font-weight:600;color:var(--site-primary)}

/* ---------- Auth / login ---------- */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.25rem}
.auth-card{
  width:100%;max-width:24rem;
  border:1px solid var(--site-border);border-radius:var(--radius-xl);
  background:var(--site-card);box-shadow:var(--shadow-md),var(--inner-highlight);
  padding:2.25rem 2rem;
}
.auth-header{text-align:center;margin-bottom:1.75rem}
.auth-icon{
  width:3.5rem;height:3.5rem;margin:0 auto 1rem;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--site-primary),#8aa5ff);
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -4px color-mix(in srgb,var(--site-primary) 60%,transparent);
}
.auth-icon svg{width:1.5rem;height:1.5rem}
.auth-title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.3rem}
.auth-subtitle{font-size:.82rem;color:var(--site-muted-foreground)}
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:.82rem;font-weight:500;margin-bottom:.4rem;color:var(--site-foreground)}
.btn-submit{width:100%;margin-top:.5rem}
.error-msg{
  color:var(--site-destructive);font-size:.82rem;margin-top:1rem;text-align:center;
  display:none;font-weight:500;padding:.6rem .8rem;
  background:var(--site-destructive-soft);border-radius:var(--radius-md);
}
.back-link{display:block;text-align:center;margin-top:1.25rem;font-size:.82rem;color:var(--site-muted-foreground);transition:color .15s;font-weight:500}
.back-link:hover{color:var(--site-foreground)}
.theme-toggle{position:fixed;top:1rem;right:1rem;z-index:50}

/* ---------- Status pages (blocked / whitelist) ---------- */
.status-card{
  text-align:center;padding:3rem 2.5rem;max-width:26rem;width:100%;
  border:1px solid var(--site-border);border-radius:var(--radius-xl);
  background:var(--site-card);box-shadow:var(--shadow-md),var(--inner-highlight);
  position:relative;z-index:1;
}
.status-card .icon{
  width:4.5rem;height:4.5rem;margin:0 auto 1.5rem;border-radius:999px;
  background:var(--site-destructive-soft);color:var(--site-destructive);
  display:flex;align-items:center;justify-content:center;font-size:1.9rem;
}
.status-card.whitelist .icon{background:var(--site-success-soft);color:var(--site-success)}
.status-card h1{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.6rem}
.status-card p{font-size:.88rem;color:var(--site-muted-foreground);line-height:1.6;margin-bottom:.4rem}

/* ---------- Misc ---------- */
.hidden{display:none!important}
.muted{color:var(--site-muted-foreground)}

/* ---------- Responsive ---------- */
@media(max-width:900px){.waterfall{column-count:3}}
@media(max-width:640px){
  .waterfall{column-count:2}
  .hero h1{font-size:1.6rem}
  .header-inner{padding:0 .85rem}
  .segment{padding:.35rem .7rem;font-size:.75rem}
  .nav-tab{padding:.4rem .7rem;font-size:.78rem}
  .upload-actions{flex-direction:column;align-items:stretch}
  .url-section{flex-direction:column}
  .url-section .btn{width:100%}
}