:root{
  --bg: #09111f;
  --bg-soft: #0f1830;
  --surface: rgba(255,255,255,0.06);
  --surface-strong: rgba(255,255,255,0.1);
  --border: rgba(255,255,255,0.12);
  --text: #eef3ff;
  --muted: #adc0e6;
  --primary: #7c9cff;
  --primary-2: #4ee3c1;
  --shadow: 0 30px 80px rgba(0,0,0,0.35);
  --radius: 24px;
  --container: min(1340px, calc(100% - 2rem));
  --card-pad: 1.1rem;
}

:root.light{
  --bg: #f2f6ff;
  --bg-soft: #ffffff;
  --surface: rgba(255,255,255,0.82);
  --surface-strong: rgba(255,255,255,0.95);
  --border: rgba(12,22,44,0.1);
  --text: #12203b;
  --muted: #5f6f8d;
  --primary: #3156ff;
  --primary-2: #00b58f;
  --shadow: 0 24px 64px rgba(31, 55, 102, 0.16);
}

html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
}

/*
html{
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: clip;
}
*/
body{
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(124,156,255,0.2), transparent 30%),
    radial-gradient(circle at top right, rgba(78,227,193,0.14), transparent 25%),
    linear-gradient(180deg, var(--bg) 0%, #070d19 100%);
  color:var(--text);
  min-height:100vh;
}

*{box-sizing:border-box}
[hidden]{display:none!important}

:root.light body{
  background:
    radial-gradient(circle at top left, rgba(49,86,255,0.08), transparent 30%),
    radial-gradient(circle at top right, rgba(0,181,143,0.08), transparent 25%),
    linear-gradient(180deg, #f5f8ff 0%, #edf2ff 100%);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button, input, select, textarea{font:inherit}
button{cursor:pointer}

.container{
  width: min(100%, var(--container));
  max-width: 1340px;
  margin-inline: auto;
}

.admin-button{
  width: min(100%, var(--container));
}

.disc-bt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
}

.asset-card{
  cursor: pointer;
}


.upload-item-thumb,
.preview-image{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Dark mode dropdowns */
select,
.upload-form select,
.input-wrap select {
  background: #0f1830;
  color: #eef3ff;
  border: 1px solid rgba(255,255,255,0.12);
}

select option,
.upload-form select option,
.input-wrap select option {
  background: #0f1830;
  color: #eef3ff;
}

/* Focus state */
select:focus,
.upload-form select:focus,
.input-wrap select:focus {
  outline: none;
  border-color: #7c9cff;
  box-shadow: 0 0 0 3px rgba(124,156,255,0.18);
}

:root.light select option,
:root.light .upload-form select,
:root.light .input-wrap select {
  background: #ffffff;
  color: #12203b;
  border: 1px solid rgba(12,22,44,0.1);
}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter: blur(18px);
  background: rgba(8,13,25,0.62);
  border-bottom:1px solid var(--border);
 
}
:root.light .site-header{background: rgba(245,248,255,0.84)}
.nav-shell{
  min-height:78px;
  display:grid;
  grid-template-columns:auto 1fr auto auto auto;
  align-items:center;
  gap:1rem;
}

.logo {
  display:flex;
  background:transparent;
  align-items:center;
  object-fit: cover;
  height: 72px;
  width: 72px;
}

.site-nav{
  display:flex;
  justify-content:center;
  gap:0.3rem;
}
.site-nav a{
  padding:0.8rem 1rem;
  border-radius:999px;
  color:var(--muted);
  transition:0.25s ease;
}
.site-nav a:hover,
.site-nav a.active{
  background:var(--surface);
  color:var(--text);
}
.nav-search{
  display:flex;
  align-items:center;
  gap:0.5rem;
  background:var(--surface);
  border:1px solid var(--border);
  padding:0.45rem;
  border-radius:999px;
  width:200px;
}
.nav-search input{
  width:100%;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  padding-inline:0.7rem;
}
.nav-search button{
  border:none;
  border-radius:999px;
  padding:0.75rem 1rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:white;
  font-weight:600;
}
.nav-search--placeholder{
  min-width:260px;
  justify-content:center;
  color:var(--muted);
  padding-inline:1rem;
}
.theme-toggle, .menu-toggle{
  width:44px;height:44px;border-radius:14px;border:1px solid var(--border);
  background:var(--surface); color:var(--text);
}
.menu-toggle{display:none}

/* Header control order: theme toggle sits to the LEFT of the account button. */
.nav-shell > .logo{order:1}
.nav-shell > .site-nav{order:2}
.nav-shell > .theme-toggle{order:3}
.nav-shell > .account-menu{order:4}
.nav-shell > .menu-toggle{order:5}

.account-menu{
  position: relative;
  display: flex;
  align-items: center;
}

.saved-badge{
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #e53535;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
  pointer-events: none;
  z-index: 10;
  animation: badge-pop 0.2s ease;
}
.saved-badge[hidden]{display:none}
@keyframes badge-pop{
  from{transform:scale(0.5);opacity:0}
  to{transform:scale(1);opacity:1}
}
.account-trigger{
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 2px solid rgba(124, 156, 255, 0.28);
  background: rgba(255,255,255,0.03);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 10px 24px rgba(0,0,0,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.account-trigger:hover{
  transform: translateY(-1px);
  border-color: rgba(124,156,255,0.45);
}

.account-trigger:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(124,156,255,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 10px 24px rgba(0,0,0,0.22);
}

.account-avatar{
  position: relative;
  width: 34px;
  height: 34px;
  display: block;
  pointer-events: none;
}

.account-avatar-icon,
.account-avatar-letter{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.account-avatar-icon{
  width: 30px;
  height: 30px;
  stroke: #2f6fff;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 2;
}

.account-avatar-letter{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c9cff, #4ee3c1);
  color: #08111f;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  z-index: 2;
}

/* DEFAULT STATE = signed out */
.account-trigger .account-avatar-icon{
  display: block !important;
}

.account-trigger .account-avatar-letter{
  display: none !important;
}

/* SIGNED IN STATE */
.account-trigger.is-signed-in .account-avatar-icon{
  display: none !important;
}

.account-trigger.is-signed-in .account-avatar-letter{
  display: flex !important;
}

.account-dropdown{
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  min-width: min(280px, calc(100vw - 1.5rem));
  padding: 0.6rem;
  border-radius: 16px;
  background: #0f1830;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  z-index: 50;
}

.account-dropdown[hidden]{
  display: none !important;
}

.account-email{
  margin: 0 0 0.75rem;
}

.account-profile-card{
  display: flex;
  min-height: 128px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1rem 0.8rem;
  border-radius: 16px;
  background: #e8eef6;
  color: #050b16;
  text-align: center;
}

.account-profile-avatar{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #c91463;
  color: #ffffff;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.account-profile-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-profile-name{
  display: block;
  max-width: 100%;
  margin-top: 0.25rem;
  color: #050b16;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.account-profile-email{
  display: block;
  max-width: 100%;
  color: #344052;
  font-size: 0.82rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.account-action{
  width: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  background: rgba(255,255,255,0.10);
  color: #eef3ff;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  margin-top: 0.45rem;
  cursor: pointer;
}
.saved-badge-inline{
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #e53535;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
  animation: badge-pop 0.2s ease;
}
.saved-badge-inline[hidden]{display:none}

.account-action:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.16);
}

.light .account-action{
  background: rgba(246, 244, 244, 0.9);
  color: #12203b;
  border: 1px solid rgba(12,22,44,0.1);
}

.account-action.danger{
  color: #ffb4b4;
}

.account-trigger.is-signed-in .account-badge-top{
  display: none !important;
}

.light .account-trigger{
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}

.light .account-dropdown{
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}

.light .account-action{
  color: #111827;
}

.light .account-profile-card{
  background: #e8eef6;
  color: #050b16;
}

.hero{padding:2rem 0 2rem}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:2rem;
  align-items:center;
}
.hero-copy h1,
.page-hero h1{
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  line-height: 1.02;
  margin: 0.4rem 0 1rem;
  letter-spacing: -0.05em;
}
.hero-copy p,
.page-hero p{color:var(--muted); max-width:64ch; font-size:1.05rem}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:#c7d5ff;
  background:rgba(124,156,255,0.12);
  border:1px solid rgba(124,156,255,0.2);
  padding:0.55rem 0.9rem;
  border-radius:999px;
  font-size:0.82rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
:root.light .eyebrow{color:#2747b8;background:rgba(49,86,255,0.08);border-color:rgba(49,86,255,0.15)}

.hero-search{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
  margin:1.5rem 0 2rem;
}
.hero-search input{
  flex:1 1 340px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:18px;
  padding:1rem 1.1rem;
  outline:none;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  border-radius:18px;
  border:1px solid var(--border);
  padding:0.95rem 1.15rem;
  transition:0.25s ease;
  min-height:52px;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  border:none;
  color:white;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: var(--shadow);
}
.btn-ghost{background:var(--surface); color:var(--text)}

.btn-google{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.google-btn-icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.google-btn-text{
  line-height: 1;
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0.8rem;
}
.stat-grid article,
.panel,
.category-card,
.collection-card,
.sub-card,
.upload-form,
.control-panel,
.cta-shell{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
}
.stat-grid article{
  padding:1rem;
}
.stat-grid strong{display:block;font-size:1.2rem}
.stat-grid span{display:block;color:var(--muted);font-size:0.92rem;margin-top:0.35rem}

.hero-panel{position:relative}
.hero-surface{
  padding:1.2rem;
  border-radius:32px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
    linear-gradient(160deg, rgba(124,156,255,0.18), rgba(78,227,193,0.08));
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.hero-ribbon{
  display:inline-flex;
  padding:0.55rem 0.85rem;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  margin-bottom:1rem;
  color:var(--text);
}
.hero-directory-grid{
  display:grid;
  gap:0.9rem;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.directory-card{
  min-height:120px;
  padding:1rem;
  border-radius:24px;
  border:1px solid var(--border);
  background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.directory-card strong{
  font-size:1rem;
}
.directory-card small{
  color:var(--muted);
  line-height:1.55;
}
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-top:1rem;
}
.hero-tags span,
.pill,
.tag-chip,
.badge{
  border-radius:999px;
  padding:0.5rem 0.8rem;
  background:rgba(255,255,255,0.08);
  border:1px solid var(--border);
  color:var(--text);
  font-size:0.83rem;
}
:root.light .hero-tags span,
:root.light .pill,
:root.light .tag-chip,
:root.light .badge{background:rgba(255,255,255,0.9)}
:root.light .asset-card .badge{
  background:rgba(8,13,25,0.55);
  color:#f8fbff;
  border-color:rgba(255,255,255,0.2);
}

.section{padding:2.5rem 0}
.section.compact{padding-top:1.5rem}
.alt-surface{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0))}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:1rem;
  margin-bottom:1.2rem;
}
.section-head h2{
  margin:0.4rem 0 0;
  font-size:clamp(1.6rem, 3vw, 2.5rem);
}

.dropzone-wrap[hidden],
.upload-preview-wrap[hidden]{
  display:none !important;
}

.upload-preview-wrap{
  margin: 1rem 0 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
}

.upload-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:0.9rem;
}

.upload-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:0.9rem;
}

.preview-card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
}

.preview-image{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}

.preview-remove{
  position:absolute;
  top:0.55rem;
  right:0.55rem;
  width:34px;
  height:34px;
  border:none;
  border-radius:999px;
  background:rgba(8,12,20,0.82);
  color:#fff;
  font-size:1.05rem;
  cursor:pointer;
  z-index:2;
}

.preview-meta{
  padding:0.65rem 0.75rem 0.8rem;
}

.preview-name{
  margin:0 0 0.25rem;
  font-size:0.92rem;
  word-break:break-word;
}

.preview-size{
  margin:0;
  font-size:0.78rem;
  opacity:0.8;
}

.light .upload-preview-wrap{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.08);
}

.light .preview-remove{
  background:rgba(17,24,39,0.85);
}

.text-link{
  color:#dfe8ff;
  text-decoration:underline;
  text-decoration-color:rgba(223,232,255,0.24);
  text-underline-offset:0.28em;
}
:root.light .text-link{color:#2645b0;text-decoration-color:rgba(38,69,176,0.25)}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
}
.category-card{
  position:relative;
  overflow:hidden;
  padding:1.2rem;
}
.category-card h3{margin:0.7rem 0 0.55rem; font-size:1.25rem}
.category-card p{margin:0 0 1rem; color:var(--muted)}
.category-icon{font-size:1.6rem}
.card-glow{
  position:absolute; inset:auto -20px -30px auto;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,156,255,0.34), transparent 70%);
}
.tag-row{
  display:flex; 
  flex-wrap:wrap; 
  gap:0.55rem;
  padding-bottom:0.8rem;
}
.card-actions{margin-top:1.1rem}

.collections-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
}
.collection-card{
  overflow:hidden;
  padding:1.2rem;
}
.collection-card.large{
  display:grid;
  grid-template-columns:0.8fr 1fr;
  gap:1rem;
  align-items:stretch;
}
.collection-copy{padding:0}
.collection-copy h3{margin:0.5rem 0}
.collection-copy p{
  color:var(--muted);
  font-size: 0.95rem;
}

.collection-art {
  background-size:cover;
  background-position:center;
  border-radius:18px;
  height:100%;
  min-height:180px;
  overflow:hidden;
}

.collection-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.masonry-grid{
  --masonry-min-width:260px;
  --masonry-gap:20px;
  display:block;
  column-width:var(--masonry-min-width);
  column-gap:var(--masonry-gap);
}
.masonry-grid.masonry-ready{
  display:block;
}
.masonry-grid > .empty-state{
  column-span:all;
}
.asset-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(124,156,255,0.10), rgba(78,227,193,0.08)),
    var(--surface);
  box-shadow: var(--shadow);
  display:block;
  width:100%;
  min-width:0;
  aspect-ratio:4 / 3;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  break-inside:avoid;
  margin:0 0 var(--masonry-gap);
}
.asset-card[data-orientation="portrait"]{
  aspect-ratio:3 / 4;
}
.asset-card[data-orientation="square"]{
  aspect-ratio:1 / 1;
}
.asset-card.is-loading::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(124,156,255,0.12), rgba(78,227,193,0.10));
  animation:asset-load-wash 1.1s ease-in-out infinite;
}
.masonry-grid.masonry-ready .asset-card{
  position:relative;
}
.asset-card:hover{transform:translateY(-4px)}
.asset-thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 0.24s ease, transform 0.3s ease, filter 0.3s ease;
}
.asset-card.is-loaded .asset-thumb{
  opacity:1;
}
.asset-card.is-error::after{
  content:"Image unavailable";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:1rem;
  color:var(--muted);
  font-size:0.9rem;
  text-align:center;
}
.asset-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:0.75rem;
  display:grid;
  gap:0.45rem;
  background:linear-gradient(180deg, rgba(8,13,25,0), rgba(8,13,25,0.86) 28%, rgba(8,13,25,0.96));
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
  color:#f8fbff;
  text-shadow:0 1px 2px rgba(0,0,0,0.55);
}
.asset-card:hover .asset-thumb,
.asset-card:focus-within .asset-thumb{
  transform:scale(1.04);
  filter:saturate(1.08) brightness(0.78);
}
.asset-card:hover .asset-overlay,
.asset-card:focus-within .asset-overlay{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.asset-top{
  display:flex;
  flex-direction:column;
  gap:0.2rem;
}
.asset-top h3{
  margin:0;
  font-size:0.95rem;
}
.asset-creator{
  font-size:0.76rem;
  font-weight:600;
  color:#d7e2f7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.asset-meta,
.muted{color:var(--muted)}
.asset-card .badge{
  flex-shrink:0;
  padding:0.34rem 0.55rem;
  font-size:0.72rem;
  line-height:1;
  color:#f8fbff;
  margin-top:0;
}
.asset-dimensions{
  position:absolute;
  top:0.85rem;
  right:0.85rem;
  z-index:2;
  padding:0.32rem 0.5rem;
  border-radius:999px;
  background:rgba(8,13,25,0.58);
  border:1px solid rgba(255,255,255,0.18);
  color:#f8fbff;
  font-size:0.7rem;
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
  margin-top:0;
  text-shadow:0 1px 2px rgba(0,0,0,0.55);
  backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.asset-card:hover .asset-dimensions,
.asset-card:focus-within .asset-dimensions{
  opacity:1;
  transform:translateY(0);
}
.asset-dimensions:empty{
  display:none;
}
.asset-like-btn{
  position:absolute;
  top:0.75rem;
  left:0.75rem;
  z-index:3;
  display:flex;
  align-items:center;
  gap:0.32rem;
  padding:0.36rem 0.58rem;
  border-radius:999px;
  background:rgba(8,13,25,0.62);
  border:1px solid rgba(255,255,255,0.18);
  color:#f8fbff;
  font-size:0.72rem;
  line-height:1;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.asset-card:hover .asset-like-btn,
.asset-card:focus-within .asset-like-btn{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.asset-like-btn.is-liked{
  color:#ff6b8a;
  background:rgba(255,80,110,0.18);
  border-color:rgba(255,80,110,0.38);
}
.asset-like-btn:hover{
  background:rgba(255,255,255,0.16);
}
.asset-like-btn.is-liked:hover{
  background:rgba(255,80,110,0.28);
}
.asset-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem 0.5rem;
  font-size:0.72rem;
  line-height:1.2;
}
.asset-actions{
  display:flex;
  gap:0.45rem;
}
.asset-actions button, .asset-actions a{
  flex:1;
  background:var(--surface-strong);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  min-height:34px;
  padding:0.45rem 0.55rem;
  font-size:0.8rem;
  line-height:1;
  display:grid; place-items:center;
  white-space:nowrap;
}
.asset-actions .download-btn{
  background:linear-gradient(135deg, rgba(124,156,255,0.94), rgba(78,227,193,0.9));
  color:white;
  border:none;
}

@keyframes asset-load-wash{
  0%{opacity:0.45; transform:translateY(-8%)}
  50%{opacity:0.78; transform:translateY(0)}
  100%{opacity:0.45; transform:translateY(8%)}
}

.page-shell{padding-bottom:3rem}
.page-hero{
  padding:3rem 0 1.2rem;
}
.gradient-photos{background:linear-gradient(180deg, rgba(124,156,255,0.12), transparent)}
.gradient-illustrations{background:linear-gradient(180deg, rgba(255,100,160,0.12), transparent)}
.gradient-vectors{background:linear-gradient(180deg, rgba(0,200,255,0.12), transparent)}
.gradient-wallpapers{background:linear-gradient(180deg, rgba(120,255,214,0.1), transparent)}
.gradient-ai-art{background:linear-gradient(180deg, rgba(180,104,255,0.12), transparent)}

.sub-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1rem;
}
.sub-card{
  padding:1rem;
  display:grid;
  gap:0.5rem;
}
.sub-card strong{font-size:1rem}
.sub-card span{color:var(--muted);font-size:0.92rem}

.control-panel{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:0.8rem;
  padding:1rem;
}
.input-wrap{
  display:grid;
  gap:0.5rem;
}
.input-wrap.wide{grid-column:span 2}
.input-wrap label{font-size:0.86rem;color:var(--muted)}
.input-wrap input,
.input-wrap select,
.input-wrap textarea{
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:16px;
  color:var(--text);
  padding:0.9rem 1rem;
  outline:none;
  resize:vertical;
}
:root.light .input-wrap input,
:root.light .input-wrap select,
:root.light .input-wrap textarea{background:#fff}

.library-meta,
.breadcrumbs,
.footer-grid,
.cta-shell,
.upload-layout,
.license-layout{
  display:flex;
  gap:1rem;
}
.library-meta{
  justify-content:space-between;
  align-items:center;
  margin:1rem auto 1.2rem;
  min-width:0;
}
.library-meta > div:first-child{
  min-width:0;
  overflow-wrap:anywhere;
}
.pill-cluster{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:0.6rem;
  min-width:0;
}
.breadcrumbs{
  margin:0 auto 1rem;
  color:var(--muted);
  align-items:center;
}

.pagination{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-top:1.4rem;
}
.pagination[aria-busy="true"]{opacity:0.55;pointer-events:none;cursor:progress}
.pagination button{
  min-width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
}
.pagination button.active{
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  border:none;
  color:white;
}

.cta-shell{
  justify-content:space-between;
  align-items:center;
  padding:1.2rem;
}
.cta-shell p{color:var(--muted); max-width:65ch}
.cta-actions{display:flex; gap:0.8rem; flex-wrap:wrap}

.upload-layout{
  align-items:start;
}
.upload-form{
  flex:1.2;
  padding:1.2rem;
}
.upload-side{
  flex:0.8;
  display:grid;
  gap:1rem;
}
.dropzone{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  border:1.5px dashed rgba(124,156,255,0.45);
  border-radius:28px;
  min-height:220px;
  margin-bottom:1rem;
  background:linear-gradient(145deg, rgba(124,156,255,0.08), rgba(78,227,193,0.06));
}
.dropzone input{
  position:absolute; inset:0; opacity:0;
  cursor:pointer;
}
.dropzone strong{display:block; font-size:1.1rem}
.dropzone span{color:var(--muted)}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0.8rem;
}
.license-box{
  margin-top:1rem;
  padding:1rem;
  border:1px solid var(--border);
  border-radius:20px;
  background:rgba(255,255,255,0.04);
}
.license-box p{color:var(--muted); margin-bottom:0}
.form-actions{
  display:flex;
  gap:0.8rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.panel{
  padding:1.1rem;
}
.upload-list{display:grid; gap:0.8rem}
.upload-item{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:0.8rem;
  align-items:center;
  border:1px solid var(--border);
  border-radius:18px;
  padding:0.7rem;
  background:rgba(255,255,255,0.03);
}
.upload-item-thumb{
  width:72px;height:72px;border-radius:14px;background-size:cover;background-position:center;
}
.upload-item h4{margin:0 0 0.2rem}
.upload-item p{margin:0;color:var(--muted);font-size:0.85rem}

.license-layout{
  align-items:stretch;
}
.license-layout .panel{flex:1}

/* Policy / info pages (privacy, about, contact) — a single, centered,
   readable column so the many panels stack evenly instead of being
   squeezed into side-by-side flex columns. */
.policy-layout{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  max-width:880px;
  margin-inline:auto;
}
.policy-layout .panel{width:100%}
.policy-layout .panel h2{margin-top:0}
.policy-layout .panel ul{padding-left:1.2rem}
.policy-layout .panel li{margin:0.4rem 0}
.license-list{
  padding-left:1.2rem;
  color:var(--muted);
}
.license-list li{margin:0.75rem 0}

.site-footer{
  padding:2rem 0 3rem;
  border-top:1px solid var(--border);
  margin-top:2rem;
}
.footer-grid{
  justify-content:space-between;
  align-items:start;
}
.footer-grid > div{max-width:360px}
.footer-grid p{color:var(--muted)}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:0.7rem;
}
.footer-links a{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:0.55rem 0.85rem;
}

/* ── Creator Studio (profile creation/edit) ─────────────────────────────── */
.creator-studio-layout{
  display:flex;
  align-items:start;
  gap:1.4rem;
}
.creator-form{
  flex:1.2;
  padding:1.2rem;
  display:grid;
  gap:1.1rem;
}
.creator-field-block{
  display:grid;
  gap:0.5rem;
}
.creator-field-block > label{
  font-size:0.86rem;
  color:var(--muted);
}
.field-hint{
  margin:0;
  color:var(--muted);
  font-size:0.84rem;
}
.avatar-swatch-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.65rem;
}
.avatar-swatch{
  --swatch-color:#7c9cff;
  width:38px;
  height:38px;
  border-radius:999px;
  border:2px solid transparent;
  background:var(--swatch-color);
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:0 0 0 1px var(--border);
}
.avatar-swatch:hover{transform:translateY(-2px) scale(1.06)}
.avatar-swatch.is-active{
  border-color:var(--text);
  box-shadow:0 0 0 3px rgba(124,156,255,0.35);
}
/* When an avatar shows an uploaded photo, an <img> fills the circle (with an
   onerror fallback to the initial in JS). Clip it to the rounded container. */
.has-photo{ overflow:hidden; }
.avatar-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}
.avatar-upload-row{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.avatar-upload-preview{
  flex-shrink:0;
  width:64px;
  height:64px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
  background:var(--primary);
  border:1px solid var(--border);
}
.avatar-upload-controls{
  display:grid;
  gap:0.4rem;
}
.avatar-upload-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}
.btn.btn-ghost.danger{
  color:#ff8b8b;
  border-color:rgba(255,139,139,0.4);
}
.btn.btn-ghost.danger:hover{
  background:rgba(255,139,139,0.12);
}
.specialty-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0.6rem;
}
.specialty-chip{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.7rem 0.9rem;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  cursor:pointer;
  font-size:0.92rem;
  transition:0.2s ease;
}
.specialty-chip:has(input:checked){
  border-color:var(--primary);
  background:linear-gradient(135deg, rgba(124,156,255,0.18), rgba(78,227,193,0.12));
}
.specialty-chip input{
  accent-color:var(--primary);
  width:16px;
  height:16px;
  flex-shrink:0;
}
.specialty-chip-icon{font-size:1.05rem}
.form-status{
  margin:0;
  font-size:0.88rem;
  color:var(--muted);
}
.form-status.is-success{color:var(--primary-2)}
.form-status.is-error{color:#ff8b8b}

.creator-preview-panel{display:grid; gap:0.7rem}
.creator-preview-card{
  display:grid;
  gap:0.5rem;
  justify-items:start;
  padding:1.1rem;
  border:1px solid var(--border);
  border-radius:20px;
  background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.creator-preview-avatar{
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  font-weight:700;
  color:#fff;
  background:var(--primary);
}
.creator-preview-name{font-size:1.15rem}
.creator-preview-tagline{color:var(--text); font-size:0.92rem}
.creator-preview-tagline.is-placeholder{color:var(--muted); font-style:italic}
.creator-preview-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  color:var(--muted);
  font-size:0.84rem;
}
.creator-preview-pills{
  display:flex;
  flex-wrap:wrap;
  gap:0.45rem;
}
.creator-preview-empty{color:var(--muted); font-size:0.82rem}
.creator-benefits{
  display:grid;
  gap:0.7rem;
  padding-left:1.1rem;
  color:var(--muted);
  font-size:0.92rem;
  line-height:1.5;
}
.creator-benefits li{padding-left:0.2rem}

/* ── Public creator profile page ────────────────────────────────────────── */
.creator-hero-section{padding-bottom:0.5rem}
.creator-hero{
  display:flex;
  gap:1.4rem;
  align-items:start;
  padding:1.4rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.creator-hero-avatar{
  flex-shrink:0;
  width:84px;
  height:84px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.1rem;
  font-weight:700;
  color:#fff;
  background:var(--primary);
}
.creator-hero-body{
  display:grid;
  gap:0.6rem;
  min-width:0;
}
.creator-hero-name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.8rem;
}
.creator-hero-name-row h1{
  margin:0;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing:-0.03em;
  overflow-wrap:anywhere;
}
.creator-edit-link{padding:0.55rem 1rem; min-height:auto}
.creator-tagline{
  margin:0;
  color:var(--text);
  font-size:1.02rem;
}
.creator-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem 1.1rem;
  color:var(--muted);
  font-size:0.88rem;
}
.creator-pills{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}
.creator-bio{
  margin:0;
  max-width:72ch;
  color:var(--muted);
  line-height:1.6;
}
.creator-social-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
}
.creator-social-link{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.5rem 0.9rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.05);
  color:var(--text);
  font-size:0.86rem;
  text-decoration:none;
  transition:0.2s ease;
}
.creator-social-link:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
}
.creator-stats{margin-top:1rem}
.creator-fallback-note{
  margin:1rem 0 0;
  padding:0.9rem 1.1rem;
  border:1px dashed var(--border);
  border-radius:16px;
  color:var(--muted);
  font-size:0.88rem;
}
.asset-creator-link{
  color:inherit;
  text-decoration:none;
}
.asset-creator-link:hover{text-decoration:underline}

@media (max-width: 760px){
  .creator-studio-layout{flex-direction:column}
  .specialty-grid{grid-template-columns:1fr}
  .creator-hero{flex-direction:column; align-items:start}
}

.lightbox{
  position:fixed; inset:0;
  display:none;
  z-index:80;
}
.lightbox.open{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.lightbox-backdrop{
  position:absolute; inset:0;
  background:rgba(3,8,16,0.82);
  backdrop-filter:blur(12px);
}
.lightbox-panel{
  position:relative;
  width:min(1180px, calc(100vw - 2rem));
  max-height:calc(100dvh - 2rem);
  margin:0 auto;
  background:#0f172a;
  border:1px solid var(--border);
  border-radius:30px;
  box-shadow: var(--shadow);
  color:#eef3ff;
  overflow:auto;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  min-height:min(760px, calc(100dvh - 2rem));
}
.lightbox-preview{
  position:relative;
  min-height:0;
  margin:1rem 0 1rem 1rem;
  border-radius:22px;
  background-color:#050b16;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.lightbox-dimensions{
  position:absolute;
  top:1rem;
  right:1rem;
  z-index:2;
  padding:0.32rem 0.5rem;
  border-radius:999px;
  background:rgba(8,13,25,0.58);
  border:1px solid rgba(255,255,255,0.18);
  color:#f8fbff;
  font-size:0.7rem;
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
  margin:0;
  text-shadow:0 1px 2px rgba(0,0,0,0.55);
  backdrop-filter:blur(10px);
}
.lightbox-dimensions:empty{
  display:none;
}
.lightbox-like-btn{
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:3;
  display:flex;
  align-items:center;
  gap:0.35rem;
  padding:0.42rem 0.72rem;
  border-radius:999px;
  background:rgba(8,13,25,0.62);
  border:1px solid rgba(255,255,255,0.18);
  color:#f8fbff;
  font-size:0.78rem;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lightbox-like-btn.is-liked{
  color:#ff6b8a;
  background:rgba(255,80,110,0.18);
  border-color:rgba(255,80,110,0.38);
}
.lightbox-like-btn:hover{
  background:rgba(255,255,255,0.16);
}
.lightbox-like-btn.is-liked:hover{
  background:rgba(255,80,110,0.28);
}
.lightbox-meta{
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.lightbox-meta h3{margin:0;font-size:1.7rem}
.lightbox-meta p{margin:0;color:#adc0e6}
.desc-downloads{display:block;margin-top:.35rem;font-size:.82rem;color:var(--muted)}
.lightbox-creator{font-size:.82rem;color:#7a9fd4;font-weight:600}
.lightbox-creator a{color:#4ee3c1;text-decoration:underline;font-weight:600}
.lightbox-creator a:hover{color:#7fffd4}
.pexels-attribution{font-size:.82rem;color:#7a9fd4}
.pexels-attribution a{color:#4ee3c1;text-decoration:underline}
.pexels-attribution a:hover{color:#7fffd4}
.asset-overlay .pexels-credit{color:#4ee3c1;font-size:.78rem;text-decoration:none;opacity:.85}
.asset-overlay .pexels-credit:hover{opacity:1;text-decoration:underline}
.lightbox-actions{display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:auto}
.lightbox-close{
  position:absolute; right:1rem; top:1rem; z-index:5;
  width:46px; height:46px; border-radius:999px;
  border:0; background:rgba(8,12,20,0.82); color:white;
}

.empty-state{
  grid-column:1/-1;
  padding:2rem;
  text-align:center;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.light .text-button{
  color: #2f6fff;
}

.private-preview-wrap{
  margin: 0.85rem 0 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
}

.private-preview-wrap.hidden{
  display: none !important;
}

.private-preview-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.private-preview-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.85rem;
}

.private-preview-card{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
}

.private-preview-remove{
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: rgba(8,12,20,0.82);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.private-preview-image{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.private-preview-meta{
  padding: 0.6rem 0.7rem 0.75rem;
}

.private-preview-name{
  margin: 0 0 0.2rem;
  font-size: 0.88rem;
  word-break: break-word;
}

.private-preview-size{
  margin: 0;
  font-size: 0.76rem;
  opacity: 0.8;
}

.light .private-preview-wrap{
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

.light .private-preview-remove{
  background: rgba(17,24,39,0.85);
}

.private-gallery{
  --masonry-min-width:280px;
  --masonry-gap:22px;
  display: block;
  column-width: var(--masonry-min-width);
  column-gap: var(--masonry-gap);
}
.private-gallery.masonry-ready{
  display: block;
}
.private-gallery > .empty-state{
  column-span: all;
}

.private-card{
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #07111f;
  box-shadow: 0 20px 45px rgba(2, 8, 23, 0.26);
  cursor: pointer;
  display: block;
  aspect-ratio: 4 / 3;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0 0 var(--masonry-gap);
}
.private-card[data-orientation="portrait"]{
  aspect-ratio: 3 / 4;
}
.private-card[data-orientation="square"]{
  aspect-ratio: 1 / 1;
}
.private-card.is-loading::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(124,156,255,0.12), rgba(78,227,193,0.10));
  animation: asset-load-wash 1.1s ease-in-out infinite;
}
.private-gallery.masonry-ready .private-card{
  position: relative;
}

.private-thumb{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  background: none;
  transition: opacity 0.24s ease, transform 0.3s ease, filter 0.3s ease;
}

.private-card.is-loaded .private-thumb{
  opacity: 1;
}

.private-card.is-error::after{
  content: "Image unavailable";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.private-meta{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.75rem;
  background: linear-gradient(180deg, rgba(8,13,25,0), rgba(8,13,25,0.86) 30%, rgba(8,13,25,0.96));
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  color: #f8fbff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

.private-meta h3{
  margin: 0 0 0.28rem;
  font-size: 0.86rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
  color: #f8fbff;
}

.private-meta p{
  margin: 0;
  color: #d7e2f7;
  font-size: 0.72rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.private-card:hover .private-thumb,
.private-card:focus .private-thumb{
  transform: scale(1.04);
  filter: saturate(1.08) brightness(0.78);
}

.private-card:hover .private-meta,
.private-card:focus .private-meta{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Delete button on each private card — revealed on hover/focus */
.private-delete-btn{
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.private-delete-btn:hover{ background: #dc2626; }
.private-card:hover .private-delete-btn,
.private-card:focus .private-delete-btn,
.private-card:focus-within .private-delete-btn,
.private-delete-btn:focus-visible{
  opacity: 1;
  transform: translateY(0);
}

.private-lightbox-actions{
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.private-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.private-lightbox.hidden{
  display: none !important;
}

.private-lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(7, 14, 28, 0.72);
  backdrop-filter: blur(8px);
}

.private-lightbox-dialog{
  position: relative;
  z-index: 2;
  width: min(100%, 960px);
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  border-radius: 22px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
}

.private-lightbox-close{
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(8,12,20,0.82);
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  z-index: 3;
}

.private-lightbox-media-wrap{
  padding: 1rem 1rem 0;
}

.private-lightbox-image{
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: #0b1220;
}

.private-lightbox-meta{
  padding: 1rem 1rem 1.2rem;
}

.private-lightbox-meta h3{
  margin: 0 0 0.45rem;
}

.light .private-lightbox-dialog{
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}

.light .private-lightbox-image{
  background: #f8fafc;
}

.vault-shell{
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.vault-hero{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.vault-hero p{
  max-width: 760px;
}

.vault-hero-side{
  display: grid;
  justify-items: end;
  gap: 2rem;
  align-self: stretch;
}

.vault-upload-trigger{
  align-self: center;
  min-width: 180px;
}

#verifyEmailGate,
#vaultContent .panel{
  margin-bottom: 1.5rem;
}

.vault-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.vault-gallery-layout{
  display: block;
}

.private-gallery-panel{
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.private-gallery-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.private-gallery-head h2{
  margin: 0;
}

.private-upload-modal{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.private-upload-modal.hidden{
  display: none !important;
}

.private-upload-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(7, 14, 28, 0.72);
  backdrop-filter: blur(10px);
}

.private-upload-dialog{
  position: relative;
  z-index: 2;
  width: min(100%, 680px);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 1.25rem;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  box-shadow: var(--shadow);
}

.private-upload-close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  cursor: pointer;
}

.private-upload-head{
  padding-right: 3rem;
  margin-bottom: 1rem;
}

.private-upload-head h2{
  margin: 0.75rem 0 0.45rem;
}

.private-upload-head p{
  margin: 0;
}

.light .private-upload-dialog{
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}

.light .private-upload-close{
  background: rgba(0,0,0,0.04);
  color: #111827;
}

@media (max-width: 980px){
  .vault-hero,
  .vault-grid{
    grid-template-columns: 1fr;
  }

  .vault-hero-side{
    justify-items: start;
    gap: 1rem;
  }

  .private-gallery-head{
    align-items: flex-start;
  }
}

@media (max-width: 1100px){
  .hero-grid,
  .lightbox-panel,
  .upload-layout{grid-template-columns:1fr; display:grid}
  .cards-grid{grid-template-columns:repeat(3, 1fr)}
  .masonry-grid,
  .private-gallery{
    --masonry-min-width:220px;
  }
  .collections-grid,
  .sub-grid{grid-template-columns:repeat(2, 1fr)}
  .control-panel{grid-template-columns:repeat(2, 1fr)}
  .stat-grid{grid-template-columns:repeat(2, 1fr)}
  .nav-shell{grid-template-columns:auto 1fr auto auto}
  .nav-search{display:none}
}
@media (max-width: 960px){
  .cards-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 780px){
  .menu-toggle{display:block}
  .site-nav{
    position:absolute;
    top:78px;
    left:0;
    right:0;
    padding:1rem;
    background:linear-gradient(145deg, rgba(124,156,255,0.90), rgba(78,227,193,0.88));
    border-bottom:1px solid var(--border);
    display:none;
  
  }
  .site-nav.open{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    color:#fff;
    z-index: 42;
  }

  .site-nav a{
    padding:0.8rem 1.2rem;
    border-radius:999px;
    color:#fff;
    font-size:1.1rem;
  }

  .form-grid{
    grid-template-columns:1fr 1fr !important;
    display:grid;
  }
  .cards-grid,
  .collections-grid,
  .sub-grid,
  .control-panel,
  .footer-grid,
  .license-layout{
    grid-template-columns:1fr !important;
    display:grid;
  }

  .masonry-grid,
  .private-gallery{
    --masonry-min-width:auto;
    display:block;
    column-count:2;
  }
  .hero,
  .page-hero{padding-top:2rem}
  .hero-mini-grid{grid-template-rows:140px 120px 100px}
  .hero-directory-grid{grid-template-columns:1fr}
  .library-meta,
  .section-head,
  .cta-shell,
  .footer-grid{display:grid}
  .library-meta{
    justify-content:stretch;
    align-items:start;
  }
  .pill-cluster{
    justify-content:flex-start;
    max-width:100%;
  }
  .pill-cluster .pill{
    max-width:100%;
    white-space:normal;
  }
  .stat-grid{grid-template-columns:1fr 1fr}
  .hero-copy h1, .page-hero h1{font-size:2.35rem}

  .lightbox.open{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0.6rem;
  }

  .lightbox-panel{
    width:min(100%, 460px);
    max-height:calc(100dvh - 1.2rem);
    margin:0;
    border-radius:22px;
    min-height:0;
    overflow:auto;
    grid-template-columns:1fr;
  }

  .lightbox-preview{
    min-height:0;
    margin:1rem 1rem 0;
    height:clamp(160px, 34vh, 260px);
    background-size:contain;
    background-repeat:no-repeat;
    background-color:#050b16;
  }

  .lightbox-meta{
    padding:1rem;
    gap:0.75rem;
  }

  .lightbox-meta h3{
    font-size:1.45rem;
    line-height:1.12;
  }

  .lightbox-meta p{
    font-size:0.98rem;
    line-height:1.35;
  }

  .lightbox-close{
    top:0.75rem;
    right:0.75rem;
    width:40px;
    height:40px;
    border-radius:999px;
  }

  .nav-shell{
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }

  .site-nav{
    display: none;
  }

  .account-menu{
    margin-left: 0;
    margin-right: 0;
  }

  .account-dropdown{
    position: fixed;
    top: calc(78px + 0.75rem);
    right: max(0.75rem, env(safe-area-inset-right));
    left: auto;
    width: min(320px, calc(100vw - 1.5rem));
    min-width: 0;
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 96px);
    overflow: auto;
  }

  .account-profile-card{
    min-height: 112px;
    padding: 0.85rem;
  }

  .theme-toggle,
  .menu-toggle{
    flex-shrink: 0;
  }
  .theme-toggle{
    margin-left: auto;
  }
}
@media (max-width: 520px){
  .container{width:min(100vw - 1rem, 1340px)}
  .hero-search,
  .form-actions,
  .cta-actions,
  .lightbox-actions{display:grid}
  .brand small{display:none}
  .stat-grid{grid-template-columns:1fr}

  .lightbox.open{
    align-items:center;
    padding:0.5rem;
  }

  .lightbox-panel{
    width:100%;
    max-height:calc(100dvh - 1rem);
    border-radius:18px;
  }

  .lightbox-preview{
    height:clamp(140px, 28vh, 210px);
  }

  .lightbox-meta{
    padding:0.85rem;
  }

  .lightbox-meta h3{
    font-size:1.25rem;
  }

  .lightbox-actions .btn{
    width:100%;
  }

  .private-gallery-head{
    display: grid;
    justify-items: start;
  }

  .private-gallery-head .vault-upload-trigger{
    width: 100%;
  }

  .private-gallery{
    --masonry-min-width:auto;
    column-count:1;
  }

  .masonry-grid{
    --masonry-min-width:auto;
    column-count:1;
  }

  .account-dropdown{
    top: calc(78px + 0.5rem);
    right: 0.5rem;
    width: calc(100vw - 1rem);
    max-width: 320px;
  }
}


/* ── My Uploads page ─────────────────────────────────────────────────── */
.my-uploads-panel{display:flex; flex-direction:column; gap:0.7rem}
.my-uploads-btn{align-self:flex-start; margin-top:0.4rem}

/* Delete button on asset cards (my-uploads page) */
.asset-actions .delete-upload-btn{
  background:rgba(255,70,70,0.88);
  color:#fff;
}
.asset-actions .delete-upload-btn:hover{
  background:rgba(220,20,20,0.96);
}

/* Lightbox delete button (my-uploads) */
.btn-delete{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.72rem 1.3rem;
  border:1px solid rgba(255,120,120,0.32);
  border-radius:14px;
  background:linear-gradient(135deg, #f04545, #c81e1e);
  color:#fff;
  font-weight:600;
  font-size:0.92rem;
  letter-spacing:0.01em;
  line-height:1;
  box-shadow:0 8px 22px rgba(220,38,38,0.30);
  transition:transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn-delete svg{ width:16px; height:16px; flex-shrink:0; }
.btn-delete:hover{
  filter:brightness(1.07);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(220,38,38,0.42);
}
.btn-delete:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(220,38,38,0.3); }
.btn-delete:focus-visible{ outline:2px solid #fca5a5; outline-offset:3px; }

/* ── Partners carousel (license page) ───────────────────────────────── */
.partners-section{ padding-top:2.6rem; }
.partners-head{ align-items:flex-end; }
.partners-subtitle{
  margin:0.5rem 0 0;
  color:var(--muted);
  max-width:44ch;
}

/* Full-bleed viewport that clips the moving track and fades both edges */
.partner-marquee{
  position:relative;
  margin-top:1.4rem;
  padding:0.7rem 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Decorative colored glow at each end */
.partner-edge{
  position:absolute;
  top:0;
  bottom:0;
  width:13%;
  z-index:2;
  pointer-events:none;
}
.partner-edge-left{ left:0; background:linear-gradient(90deg, rgba(124,156,255,0.12), transparent); }
.partner-edge-right{ right:0; background:linear-gradient(270deg, rgba(78,227,193,0.12), transparent); }

.partner-track{
  display:flex;
  width:max-content;
  will-change:transform;
}

/* Animate only after JS clones the set, so the -50% loop is gapless */
.partner-marquee.is-ready .partner-track{
  animation:partner-scroll var(--marquee-duration, 20s) linear infinite;
}
.partner-marquee.is-ready:hover .partner-track,
.partner-marquee.is-ready:focus-within .partner-track{
  animation-play-state:paused;
}

/* No-JS / reduced-motion fallback: a static, centered, wrapping row */
.partner-marquee:not(.is-ready) .partner-track{
  width:auto;
  flex-wrap:wrap;
  justify-content:center;
}

@keyframes partner-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.partner-card{
  --accent:#7c9cff;
  flex:0 0 auto;
  width:248px;
  height: 250px;
  /* Spacing lives on the card (not flex `gap`) so the cloned set tiles exactly
     and the translateX(-50%) loop stays seamless with no jump. */
  margin-right:1rem;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:0.9rem;
  padding:1rem 1.1rem;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  cursor:pointer;
  color:inherit;
  text-decoration:none;
}
.partner-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 18px 44px color-mix(in srgb, var(--accent) 22%, transparent);
}
.partner-card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.partner-logo{
  position:relative;
  flex-shrink:0;
  width:158px;
  height:158px;
  border-radius:14px;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#08111f;
  background:transparent;
}
/* Sheen sweep across the logo tile on hover */
.partner-logo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
  transform:translateX(-130%);
  transition:transform 0.7s ease;
}
.partner-card:hover .partner-logo::after{ transform:translateX(130%); }

.partner-logo-monogram{
  font-weight:800;
  font-size:1.2rem;
  letter-spacing:-0.02em;
}
/* Drop a real logo in by replacing the monogram with this image */
.partner-logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:8px;
  background:transparent;
}

.partner-info{ display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
.partner-name{
  font-weight:700;
  font-size:1.02rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (prefers-reduced-motion: reduce){
  .partner-marquee .partner-track{ animation:none !important; }
}
@media (max-width:520px){
  .partner-card{ width:212px; }
  .partners-head{ flex-direction:column; align-items:flex-start; gap:0.8rem; }
}

/* ============================================================================
   CREATORS LEADERBOARD PAGE (creators.html)
   Ranks FreeFrame uploaders by total downloads (likes break ties). Top 20 are
   shown; everyone else is ranked-but-hidden and only revealed via search.
   ========================================================================== */
.creators-hero{
  position:relative;
  overflow:hidden;
  padding:2.6rem clamp(1.2rem,4vw,3rem);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(124,156,255,0.28), transparent 55%),
    radial-gradient(120% 140% at 100% 0%, rgba(78,227,193,0.22), transparent 55%),
    var(--surface);
  box-shadow:var(--shadow);
}
.creators-hero::after{
  content:"";
  position:absolute;
  inset:auto -20% -60% -20%;
  height:70%;
  background:radial-gradient(50% 100% at 50% 0%, rgba(124,156,255,0.18), transparent 70%);
  pointer-events:none;
}
.creators-hero > *{ position:relative; z-index:1; }
.creators-hero h1{
  margin:.5rem 0 .6rem;
  font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.05;
  letter-spacing:-0.02em;
}
.creators-hero h1 .grad{
  background:linear-gradient(120deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.creators-hero p.lede{
  max-width:60ch;
  color:var(--muted);
  font-size:1.02rem;
  margin:0 0 1.6rem;
}

/* Search ------------------------------------------------------------------- */
.creators-search{
  display:flex;
  gap:.6rem;
  align-items:center;
  width:min(100%,640px);
  padding:.4rem .4rem .4rem 1.1rem;
  background:var(--surface-strong);
  border:1px solid var(--border);
  border-radius:999px;
  backdrop-filter:blur(8px);
}
.creators-search:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(124,156,255,0.18);
}
.creators-search .search-ico{ flex:none; opacity:.6; font-size:1.05rem; }
.creators-search input{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  outline:none;
  color:var(--text);
  font-size:1rem;
  padding:.6rem 0;
}
.creators-search input::placeholder{ color:var(--muted); }
.creators-search .search-clear{
  flex:none;
  background:transparent;
  border:0;
  color:var(--muted);
  font-size:1.15rem;
  padding:.2rem .5rem;
  border-radius:50%;
}
.creators-search .search-clear:hover{ color:var(--text); }
.creators-search button[type="submit"]{
  flex:none;
  border:0;
  border-radius:999px;
  padding:.7rem 1.4rem;
  font-weight:700;
  color:#05122b;
  background:linear-gradient(120deg,var(--primary),var(--primary-2));
}
.creators-search button[type="submit"]:hover{ filter:brightness(1.06); }

/* Meta stat strip ---------------------------------------------------------- */
.creators-statstrip{
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem 2.4rem;
  margin-top:1.6rem;
  padding-top:1.4rem;
  border-top:1px solid var(--border);
}
.creators-statstrip .metric strong{
  display:block;
  font-size:1.5rem;
  line-height:1;
  background:linear-gradient(120deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.creators-statstrip .metric span{
  font-size:.82rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Podium (top 3) ----------------------------------------------------------- */
.podium{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:end;
  gap:clamp(.6rem,2vw,1.4rem);
  max-width:820px;
  margin:0 auto;
}
.podium-slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.6rem;
  padding:1.4rem 1rem 1.2rem;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  transition:transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.podium-slot:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.podium-slot.rank-1{ order:2; padding-top:2rem; background:linear-gradient(180deg,rgba(255,209,102,0.16),var(--surface)); border-color:rgba(255,209,102,0.45); }
.podium-slot.rank-2{ order:1; background:linear-gradient(180deg,rgba(206,214,230,0.14),var(--surface)); border-color:rgba(206,214,230,0.4); }
.podium-slot.rank-3{ order:3; background:linear-gradient(180deg,rgba(214,146,88,0.14),var(--surface)); border-color:rgba(214,146,88,0.4); }
.podium-crown{ font-size:1.5rem; line-height:1; height:1.5rem; }
.podium-slot:not(.rank-1) .podium-crown{ visibility:hidden; }
.podium-avatar{
  --sz:clamp(64px,14vw,92px);
  width:var(--sz);
  height:var(--sz);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1.6rem;
  color:#05122b;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 0 0 4px var(--bg-soft), 0 0 0 6px var(--border);
}
.podium-slot.rank-1 .podium-avatar{ box-shadow:0 0 0 4px var(--bg-soft), 0 0 0 7px rgba(255,209,102,0.7); }
.podium-slot.rank-2 .podium-avatar{ box-shadow:0 0 0 4px var(--bg-soft), 0 0 0 7px rgba(206,214,230,0.7); }
.podium-slot.rank-3 .podium-avatar{ box-shadow:0 0 0 4px var(--bg-soft), 0 0 0 7px rgba(214,146,88,0.7); }
.podium-medal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2rem;
  height:2rem;
  padding:0 .5rem;
  margin-top:-1.3rem;
  border-radius:999px;
  font-weight:800;
  font-size:.9rem;
  color:#05122b;
  border:2px solid var(--bg-soft);
}
.rank-1 .podium-medal{ background:linear-gradient(135deg,#ffe08a,#f4b731); }
.rank-2 .podium-medal{ background:linear-gradient(135deg,#eef2f8,#c3ccdb); }
.rank-3 .podium-medal{ background:linear-gradient(135deg,#f0c197,#cd7f3f); }
.podium-name{ font-weight:700; font-size:1.02rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.podium-score{ font-size:.82rem; color:var(--muted); }

/* Leaderboard list --------------------------------------------------------- */
.lb-list{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin-top:.4rem;
}
.lb-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  padding:.75rem 1.1rem;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
  cursor:pointer;
}
.lb-row:hover{
  transform:translateX(4px);
  border-color:var(--primary);
  background:var(--surface-strong);
}
.lb-avatar{
  --sz:52px;
  width:var(--sz);
  height:var(--sz);
  flex:none;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1.15rem;
  color:#05122b;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
}
.lb-info{ min-width:0; }
.lb-name{
  font-weight:700;
  font-size:1.02rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lb-sub{
  font-size:.82rem;
  color:var(--muted);
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.15rem;
}
.lb-sub .dot{ opacity:.4; }
.lb-rank{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:3rem;
  height:2.4rem;
  padding:0 .7rem;
  border-radius:12px;
  font-weight:800;
  font-size:1.05rem;
  color:var(--text);
  background:var(--surface-strong);
  border:1px solid var(--border);
}
.lb-rank .hash{ opacity:.5; font-weight:700; margin-right:.05rem; }
.lb-rank.gold{ color:#05122b; background:linear-gradient(135deg,#ffe08a,#f4b731); border-color:transparent; }
.lb-rank.silver{ color:#05122b; background:linear-gradient(135deg,#eef2f8,#c3ccdb); border-color:transparent; }
.lb-rank.bronze{ color:#05122b; background:linear-gradient(135deg,#f0c197,#cd7f3f); border-color:transparent; }

/* "You / searched creator" reveal card ------------------------------------- */
.rank-reveal{
  margin-bottom:1rem;
  padding:.4rem;
  border-radius:20px;
  background:linear-gradient(120deg,rgba(124,156,255,0.25),rgba(78,227,193,0.2));
}
.rank-reveal .lb-row{
  margin:0;
  border-color:transparent;
  background:var(--bg-soft);
  cursor:pointer;
}
.rank-reveal-label{
  display:block;
  padding:.5rem .9rem .2rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
}

.creators-loading .lb-row{
  cursor:default;
  background:var(--surface);
  animation:lbPulse 1.4s ease-in-out infinite;
}
.creators-loading .lb-avatar{ background:var(--surface-strong); }
@keyframes lbPulse{ 0%,100%{opacity:.55} 50%{opacity:.9} }

@media (max-width:560px){
  .podium{ grid-template-columns:1fr; max-width:360px; }
  .podium-slot.rank-1,.podium-slot.rank-2,.podium-slot.rank-3{ order:0; padding-top:1.4rem; }
  .podium-slot{ flex-direction:row; text-align:left; }
  .podium-slot .podium-crown{ display:none; }
  .podium-medal{ margin-top:0; }
  .lb-sub{ font-size:.76rem; }
  .lb-avatar{ --sz:46px; }
}