/* === Unified Gallery (UG) minimal styles === */
.ug-body { display:flex; flex-direction:column; gap:12px; min-height:60vh; }
.ug-tabs { display:flex; gap:6px; }
.ug-tabs [role="tab"]{
  appearance:none; border:0; padding:8px 12px; border-radius:8px; cursor:pointer;
  background: color-mix(in oklab, canvas 90%, canvasText 8%); color: inherit;
}
.ug-tabs [role="tab"][aria-selected="true"]{
  font-weight:600; background: var(--accent);
}
.ug-filters{ display:flex; gap:8px; }
.ug-search{ width:100%; padding:8px 10px; border-radius:8px; border:1px solid color-mix(in oklab, canvasText 20%, transparent); }

.ug-grid{ 
  display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  padding:4px; overflow:auto; min-height:280px; max-height:50vh;
}
.ug-card{
  border-radius:12px; overflow:hidden; background: var(--card), canvasText 5%);
  box-shadow: 0 2px 8px rgba(0,0,0,.08); padding:8px; display:flex; flex-direction:column; gap:6px;
}
.ug-thumb{ aspect-ratio:16/9; border-radius:8px; background:#222; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; overflow:hidden; display: block;  }
:root[data-theme="light"] .ug-thumb{ background:#ddd; color:#333; }
.ug-thumb > img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;     /* ← これで枠内に綺麗に収まる */
}
.ug-meta{ font-size:12px; display:flex; justify-content:space-between; gap:8px; }
.ug-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ug-fav{ cursor:pointer; user-select:none; }

.ug-toolbar{ display:flex; align-items:center; gap:8px; }
.ug-toolbar .btn{ background: var(--accent)!important; }
.ug-toolbar .btn[aria-disabled="true"]{ opacity:.3; pointer-events:none; cursor:not-allowed; }
.ug-spacer{ flex:1; }
.ug-card.is-selected{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.switch{ display:inline-flex; gap:8px; align-items:center; }
.switch input{ width:40px; height:20px; appearance:none; background:#bbb; border-radius:999px; position:relative; outline:none; cursor:pointer; }
.switch input::after{ content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:.15s; }
.switch input:checked{ background:#4caf50; }
.switch input:checked::after{ transform: translateX(20px); }
.switch .off{ opacity:.7; }

/* Loading mask */
.ug-body.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .6;
}
.ug-body.is-loading::after{
  content: "Loading…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 600;
  backdrop-filter: blur(1px);
}


@media (prefers-reduced-motion: reduce){
  .ug-card, .ug-tabs [role="tab"]{ transition:none; }
}