/* /home/siisi/siisi/media_app/static/css/image.css */

/* ═══════════════════════════════════════════════════════
   STUDIO SHARED — used by both image.html & video.html
   ═══════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────── */
.studio-page {
  padding: 0 0 2rem;
}

/* ── Hero ────────────────────────────────────────────── */
.studio-hero {
  border-radius: 1.2rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}

.img-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

/* Scattered-dots overlay, same SVG as gallery_app's own
   .profile-gradient-bg::before (profile-header.css) — a shared, reusable
   version so any colored .studio-hero across any app (Academy, Organizer,
   ...) can opt in with one class instead of each page duplicating the
   data URI in its own <style> block. Works over any background color:
   just add "hero-bubbles" to a .studio-hero's class list. Needs the
   hero's own .studio-hero-inner (or other real content) to sit above
   this pseudo-element — the second rule below handles that. */
.hero-bubbles::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.hero-bubbles .studio-hero-inner {
  position: relative;
  z-index: 1;
}

.studio-hero-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.studio-hero-left {
  display: flex;
  align-items: center;
  gap: .9rem;
  /* Itself a flex item of .studio-hero-inner — without this it defaults to
     min-width:auto same as any flex child, so wide content further down
     the tree (like .academy-league-ladder) can force this whole row wider
     than the hero's own box instead of letting its own overflow-x:auto
     (via .academy-hero-text below) actually engage. */
  min-width: 0;
}

.studio-hero-icon {
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.studio-hero-title {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.3px;
  /* Every .studio-hero variant sets color: #fff on itself and relies on
     inheritance for its title/subtitle — but the site's global h1 rule
     (style.css) targets the <h1> element directly with a fixed dark
     color, and a direct match always wins over mere inheritance
     regardless of specificity. .studio-hero-sub (a <p>) isn't affected
     since that global rule only covers heading elements, which is why
     only the title looked broken, and only in light mode (dark mode's
     own heading override happens to also be light, masking this). */
  color: inherit;
}

.studio-hero-sub {
  font-size: .82rem;
  opacity: .85;
  margin: .15rem 0 0;
}

.studio-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  /* margin-left: auto instead of justify-content: space-between on the
     parent — space-between pins a wrapped-onto-its-own-line item to
     flex-start (nothing to be "between"), leaving unused space on the
     right. margin-left: auto pushes this item flush right whether it's
     sharing the line with .studio-hero-left or wrapped onto its own. */
  margin-left: auto;
}

.studio-status-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  font-size: .78rem;
  opacity: .9;
}

/* ── League ladder ───────────────────────────────────────
   Shared between academy/profile.html and academy/league.html — the
   whole 10-tier Bronze→Diamond progression at a glance, current tier
   called out, on top of either page's own .academy-hero gradient. */
/* Sits inside .studio-hero-left's flex row (icon/avatar + text block) on
   both pages — without min-width:0 here, a flex item defaults to
   min-width:auto and refuses to shrink below the ladder's full 10-tier
   content width, so on a narrow phone screen the hero (overflow:hidden,
   needed for the bubbles effect) hard-clips the ladder instead of it
   scrolling — this is what actually lets .academy-league-ladder's own
   overflow-x:auto below take effect. */
.academy-hero-text {
  min-width: 0;
}

.academy-league-ladder {
  display: flex;
  align-items: center;
  gap: .3rem;
  overflow-x: auto;
  max-width: 100%;
  padding: .5rem 0 .15rem;
  margin-top: .35rem;
}

.academy-ladder-tier {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  font-size: 1rem;
  opacity: .35;
  transition: opacity .15s ease;
}

.academy-ladder-tier.is-reached {
  opacity: .8;
}

.academy-ladder-tier.is-current {
  opacity: 1;
  width: auto;
  height: 2.1rem;
  padding: 0 .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  gap: .35rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

.academy-ladder-name {
  font-size: .72rem;
  white-space: nowrap;
}

/* Connection status — JS replaces className entirely. Used to also draw a
   ::before dot here, but the bi-wifi icon now baked into the JS-rendered
   text (see base.html/*.js _setConnStatus/setStatus/updateStatus) already
   conveys state more clearly than a plain dot, so the dot was removed. */
.status-connecting,
.status-connected,
.status-disconnected {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
}
.status-connecting   { color: #fbbf24; }
.status-connected    { color: #34d399; }
.status-disconnected { color: #f87171; }

/* Quota widget */
.quota-widget {
  background: rgba(255,255,255,.18);
  border-radius: .6rem;
  padding: .35rem .65rem;
  min-width: 140px;
}
.quota-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .75rem;
  margin-bottom: .3rem;
  opacity: .9;
}
.quota-sep { opacity: .55; margin: 0 .15rem; }
.quota-nums { font-weight: 600; }
.quota-track {
  height: 5px;
  background: rgba(255,255,255,.3);
  border-radius: 99px;
  overflow: hidden;
}
.quota-fill {
  height: 100%;
  background: rgba(255,255,255,.85);
  border-radius: 99px;
  transition: width .4s;
  max-width: 100%;
}

.quota-alert {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .75rem;
  font-size: .82rem;
  opacity: .95;
}
.quota-reset { opacity: .8; font-size: .78rem; }
.quota-reset-note {
  margin-top: .5rem;
  font-size: .75rem;
  opacity: .8;
  color: #fff;
}

/* ── Studio layout ────────────────────────────────────── */
.studio-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.25rem;
  align-items: start;
  max-width: 1600px;
}

@media (min-width: 1400px) {
  .studio-layout { grid-template-columns: 420px 1fr; }
}
@media (max-width: 1100px) {
  .studio-layout { grid-template-columns: 340px 1fr; }
}
@media (max-width: 900px) {
  .studio-layout { grid-template-columns: 1fr; }
}

/* ── Studio panel (left) ─────────────────────────────── */
.studio-panel {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0; /* prevent grid blowout on narrow screens */
}

/* ── Studio cards ─────────────────────────────────────── */
.s-card {
  background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 1rem;
  padding: 1rem;
  transition: box-shadow .2s;
}
.s-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.s-card--hint {
  border-style: dashed;
}

.s-card-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  color: var(--bs-body-color);
  font-size: inherit;
  line-height: inherit;
}
.s-card-header:focus { outline: none; box-shadow: none; }
.s-collapsible { cursor: pointer; }
.s-collapsible:hover .s-card-title { color: #667eea; }
.s-card-icon { font-size: 1.05rem; line-height: 1; }
.s-card-title { font-weight: 600; font-size: .9rem; }
.s-card-badge { margin-left: auto; font-size: .8rem; font-weight: 600; }
.s-card-hint { font-size: .78rem; color: var(--bs-secondary-color, #6b7280); margin: .5rem 0 0; }
.s-chevron { font-size: .7rem; transition: transform .2s; }
.s-collapsible:not(.collapsed) .s-chevron { transform: rotate(180deg); }

/* ── Textarea ─────────────────────────────────────────── */
.s-textarea {
  display: block;
  width: 100%;
  min-height: 100px;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .6rem;
  padding: .65rem .8rem;
  font-size: .88rem;
  line-height: 1.5;
  resize: vertical;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.s-textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102,126,234,.15);
}

/* ── Selects & inputs ─────────────────────────────────── */
.s-select, .s-input {
  width: 100%;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .5rem;
  padding: .45rem .7rem;
  font-size: .85rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: border-color .15s, box-shadow .15s;
}
.s-select:focus, .s-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102,126,234,.15);
}
.s-file {
  width: 100%;
  font-size: .82rem;
  margin-bottom: .4rem;
}

/* ── Settings grid ────────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.sg-item { display: flex; flex-direction: column; gap: .3rem; }
.sg-full { grid-column: 1 / -1; }
.sg-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--bs-body-color);
  opacity: .75;
}

/* ── Toggle ──────────────────────────────────────────── */
.s-toggle-label {
  display: flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  font-size: .85rem;
  user-select: none;
}
.s-toggle-input { display: none; }
.s-toggle-track {
  width: 36px;
  height: 20px;
  background: var(--bs-secondary-bg, #d1d5db);
  border-radius: 99px;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.s-toggle-input:checked ~ .s-toggle-track { background: #667eea; }
.s-toggle-thumb {
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.s-toggle-input:checked ~ .s-toggle-track .s-toggle-thumb { transform: translateX(16px); }

/* ── Ref tabs ─────────────────────────────────────────── */
.ref-tab-strip {
  display: flex;
  gap: .4rem;
  margin-bottom: .75rem;
}
.ref-tab {
  flex: 1;
  padding: .35rem .5rem;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .5rem;
  background: transparent;
  color: var(--bs-secondary-color, #6b7280);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.ref-tab:hover { border-color: #667eea; color: #667eea; }
.ref-tab.active {
  background: #667eea;
  border-color: #667eea;
  color: #fff;
}

/* ── Canvas ───────────────────────────────────────────── */
.canvas-wrap {
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .65rem;
  overflow: hidden;
  position: relative;
  background: #fff;
  cursor: crosshair;
}
.canvas-wrap canvas {
  display: block;
  width: 100%;
  touch-action: none;
}
.canvas-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  pointer-events: none;
  color: var(--bs-secondary-color, #9ca3af);
  font-size: .85rem;
}
.canvas-placeholder small { font-size: .72rem; opacity: .8; }

.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .4rem .35rem;
  border-top: 1px solid var(--bs-border-color, #e5e7eb);
  flex-wrap: wrap;
}
.tool-group { display: flex; gap: .25rem; }

.tool-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .4rem;
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
  font-size: .82rem;
  transition: all .15s;
}
.tool-btn:hover { border-color: #667eea; color: #667eea; }
.tool-btn.tool-active { background: #667eea; border-color: #667eea; color: #fff; }
.tool-btn.tool-danger { color: #ef4444; border-color: transparent; }
.tool-btn.tool-danger:hover { background: #fef2f2; border-color: #ef4444; }

.sz-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .4rem;
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  transition: all .15s;
}
.sz-btn:hover { border-color: #667eea; color: #667eea; }
.sz-btn.sz-active { background: #667eea; border-color: #667eea; color: #fff; }

.color-pick {
  width: 28px; height: 28px;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .4rem;
  padding: 0;
  cursor: pointer;
  background: none;
  overflow: hidden;
}
.color-pick::-webkit-color-swatch-wrapper { padding: 2px; }
.color-pick::-webkit-color-swatch { border: none; border-radius: 3px; }

.ref-hint {
  font-size: .74rem;
  color: var(--bs-secondary-color, #9ca3af);
  margin: .5rem 0 0;
}

/* ── Upload dropzone ──────────────────────────────────── */
.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1.4rem 1rem;
  border: 2px dashed var(--bs-border-color, #d1d5db);
  border-radius: .65rem;
  cursor: pointer;
  color: var(--bs-secondary-color, #6b7280);
  font-size: .82rem;
  text-align: center;
  transition: all .2s;
  background: var(--bs-secondary-bg, #f9fafb);
}
.upload-dropzone:hover, .upload-dragover {
  border-color: #667eea;
  background: rgba(102,126,234,.05);
  color: #667eea;
}
.upload-dropzone small { font-size: .72rem; opacity: .8; }

/* ── Preview box ──────────────────────────────────────── */
.preview-box {
  margin-top: .65rem;
  padding: .6rem;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .6rem;
  background: var(--bs-secondary-bg, #f9fafb);
  overflow: visible;
}
.preview-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.preview-remove-all {
  width: 24px; height: 24px;
  border: none;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .65rem;
  transition: opacity .15s;
}
.preview-remove-all:hover { opacity: .85; }
.preview-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-height: 240px;
  overflow-y: auto;
}
.thumb {
  width: 80px; height: 80px;
  border-radius: .5rem;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  background: var(--bs-secondary-bg, #f6f7fb);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.thumb img {
  max-width: 100%; max-height: 100%;
  object-fit: cover;
}
.thumb .thumb-remove {
  position: absolute; top: 3px; right: 3px;
  background: rgba(0,0,0,.6); color: #fff;
  border: none; border-radius: 50%;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .65rem;
}
.thumb .thumb-index {
  position: absolute; left: 3px; bottom: 3px;
  background: rgba(255,255,255,.88);
  font-size: .65rem; padding: 1px 5px; border-radius: 8px;
  color: #111;
}

/* ── Hint list ────────────────────────────────────────── */
.hint-list {
  list-style: none;
  padding: 0;
  margin: .25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.hint-list li { font-size: .82rem; color: var(--bs-body-color); }
.hint-list li strong { color: var(--bs-body-color); }

/* ── Advanced section ─────────────────────────────────── */
.adv-section { margin-bottom: .75rem; }
.adv-divider { padding-top: .75rem; border-top: 1px solid var(--bs-border-color, #e5e7eb); }
.adv-section-title {
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--bs-body-color);
}
.adv-warning {
  font-size: .77rem;
  color: #92400e;
  background: #fef3c7;
  border-radius: .5rem;
  padding: .4rem .6rem;
}
.frame-preview {
  max-width: 100%;
  max-height: 140px;
  border-radius: .5rem;
  margin-top: .35rem;
  border: 1px solid var(--bs-border-color, #e5e7eb);
}

/* ── Action row ───────────────────────────────────────── */
.s-actions {
  display: flex;
  gap: .6rem;
  align-items: center;
}

.btn-generate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .7rem 1.2rem;
  font-size: .92rem;
  font-weight: 700;
  border: none;
  border-radius: .7rem;
  cursor: pointer;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(102,126,234,.4);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.btn-generate:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(102,126,234,.5); }
.btn-generate:active { transform: translateY(0); }
.btn-generate:disabled { opacity: .55; pointer-events: none; }

.btn-studio-outline {
  display: flex; align-items: center; gap: .35rem;
  padding: .65rem .9rem;
  font-size: .85rem;
  border: 1px solid var(--bs-border-color, #d1d5db);
  border-radius: .7rem;
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.btn-studio-outline:hover { border-color: #667eea; color: #667eea; }

.btn-studio-ghost {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .7rem;
  background: transparent;
  color: var(--bs-secondary-color, #6b7280);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  flex-shrink: 0;
}
.btn-studio-ghost:hover { border-color: #667eea; color: #667eea; }

/* ── Gallery panel (right) ────────────────────────────── */
.gallery-panel {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem 1rem;
  background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 1rem;
}
.gallery-panel-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
/* The dark theme forces headings white, but .gallery-header keeps a light
   background in dark mode — keep the title dark on it */
[data-theme-version="dark"] .gallery-header .gallery-panel-title,
[data-bs-theme="dark"] .gallery-header .gallery-panel-title {
  color: #1f2937 !important;
}
.gallery-header-actions { display: flex; gap: .5rem; }

.btn-gal {
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem;
  font-size: .8rem;
  border: 1px solid var(--bs-border-color, #d1d5db);
  border-radius: .5rem;
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
  transition: all .15s;
}
.btn-gal:hover { border-color: #667eea; color: #667eea; }
.btn-gal--ghost { color: var(--bs-secondary-color, #6b7280); }
.btn-gal--info { border-color: #0ea5e9; color: #0ea5e9; }
.btn-gal--info:hover { background: #0ea5e9; color: #fff; }

/* ── Gallery grid ─────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .85rem;
  min-height: 200px;
}

/* ── Gallery cards (image) ────────────────────────────── */
.gallery-card {
  background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .85rem;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.gallery-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

.gallery-thumb {
  width: 100%; aspect-ratio: 16/10;
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}

.img-meta {
  padding: .55rem .7rem;
  font-size: .8rem;
  color: var(--bs-body-color);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.img-meta .text-truncate { max-width: 60%; }

/* ── Empty state ──────────────────────────────────────── */
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem;
  text-align: center;
  gap: .5rem;
}
.empty-emoji { font-size: 3rem; line-height: 1; margin-bottom: .35rem; }
.empty-title { font-size: 1.05rem; font-weight: 600; }
.empty-sub   { font-size: .83rem; color: var(--bs-secondary-color, #6b7280); max-width: 300px; }
.empty-note  { font-size: .77rem; color: var(--bs-secondary-color, #6b7280); opacity: .75; }

.gallery-footnote {
  font-size: .78rem;
  color: var(--bs-secondary-color, #9ca3af);
  text-align: center;
  padding: .25rem 0;
}

/* ── Model badges ─────────────────────────────────────── */
.model-badge {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: .3rem;
  font-size: .7rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.model-gemini-pro   { background:#ede9fe; color:#6d28d9; }
.model-gemini-flash { background:#fff7ed; color:#c2410c; }
.model-gemini-flash-3 { background:#e9f5ff; color:#0066cc; }
.model-gemini       { background:#f0e6ff; color:#7c3aed; }
.model-unknown      { background:#f3f4f6; color:#374151; }
.model-other        { background:#ecfeff; color:#0369a1; }

/* ── Card spinner ─────────────────────────────────────── */
.card-spinner { position: relative; }
.card-spinner .spinner-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.7); z-index: 2;
}

/* ── Modal ────────────────────────────────────────────── */
.studio-modal { border-radius: 1rem; overflow: hidden; }

/* ── Profile header fix ───────────────────────────────── */
.profile-header-card { border-radius: 1.25rem !important; padding: 0 !important; }

/* ═══════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════ */
/* .s-card's own background rule (line 175) was already meant to be
   theme-aware — var(--bs-card-bg, #fff) — but --bs-card-bg is only ever
   actually set by Bootstrap's own .card component, never for this custom
   class, so it silently fell back to #fff on every page, in every theme.
   Went unnoticed for a long time because a white card with dark text
   still reads fine on its own; only became visibly broken once a
   dark-mode-specific visual (Academy's streak calendar) needed real
   contrast against the card behind it. Fixing at the source instead of
   per-page now that it's confirmed broken everywhere, not just there. */
[data-bs-theme="dark"] .s-card { background: var(--bs-secondary-bg, #343a40); }
[data-bs-theme="dark"] .img-meta { color: var(--bs-body-color); }
[data-bs-theme="dark"] .canvas-wrap { background: #1e1e2e; border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .canvas-placeholder { color: #6b7280; }
[data-bs-theme="dark"] .upload-dropzone { background: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .preview-box { background: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .thumb { background: var(--bs-secondary-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .card-spinner .spinner-overlay { background: rgba(0,0,0,.55); }
[data-bs-theme="dark"] .adv-warning { background: #3d2c06; color: #fbbf24; }
[data-bs-theme="dark"] .model-gemini-pro    { background:#2e1f5e; color:#c4b5fd; }
[data-bs-theme="dark"] .model-gemini-flash  { background:#3d1a07; color:#fdba74; }
[data-bs-theme="dark"] .model-gemini-flash-3{ background:#0c2340; color:#7dd3fc; }
[data-bs-theme="dark"] .model-gemini        { background:#2d1854; color:#c084fc; }
[data-bs-theme="dark"] .model-unknown       { background:#1f2937; color:#d1d5db; }
[data-bs-theme="dark"] .model-other         { background:#0c2233; color:#60a5fa; }

/* ═══════════════════════════════════════════════════════
   MOBILE TWEAKS
   ═══════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .settings-grid { grid-template-columns: 1fr; }
  .studio-hero { padding: .9rem 1rem; border-radius: .85rem; }
  .studio-hero-title { font-size: 1.2rem; }
  .studio-hero-right { align-items: flex-start; }
  .quota-widget { min-width: 120px; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .s-actions .btn-studio-outline span { display: none; }
  .btn-generate { padding: .65rem .9rem; }
}