/* Match the floating app bar shell; shared theme tokens remain authoritative. */
#creationsView {
  --creations-gutter: clamp(16px, 1.5vw, 24px);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 40px var(--creations-gutter) 64px;
}
#mainContent.page:has(> #creationsView:not(.hidden)) { width:var(--app-shell-width); max-width:none; margin-inline:auto; padding:0; }
#creationsView [hidden],#creationSaveBar[hidden],#creationSaveBar [hidden] { display:none !important; }
.creation-new { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; white-space:nowrap; }
.creations-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:20px; }
.creations-toolbar-actions { display:flex; align-items:center; gap:12px; min-width:0; }
.creations-toolbar-actions .creation-new { flex:none; min-height:48px; }
.creations-toolbar-actions .creations-search { min-width:0; min-height:48px; }
.creation-filters { display:flex; flex-wrap:wrap; gap:6px; }
.creation-filters button { padding:10px 16px; min-height:44px; background:transparent; border:1px solid transparent; border-radius:12px; color:var(--muted-strong); font:inherit; font-size:14px; cursor:pointer; }
.creation-filters button[aria-pressed="true"] { background:var(--card); border-color:var(--border-strong); color:var(--text); font-weight:600; }
.creation-filters button:hover { color:var(--text); background:var(--card-soft); }
.creations-search { display:flex; align-items:center; gap:10px; width:260px; min-height:44px; padding:0 14px; border:1px solid var(--border-strong); border-radius:14px; background:var(--card); color:var(--muted-strong); }
#creationsSearch { min-width:0; width:100%; border:0; padding:10px 0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:14px; box-shadow:none; }
.creations-search:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.creations-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0; color:var(--muted-strong); font-size:13px; }
.creation-save-help { position:relative; }
.creation-save-help summary { display:flex; align-items:center; gap:6px; min-height:44px; box-sizing:border-box; padding:10px 0 10px 12px; cursor:pointer; list-style:none; }
.creation-save-help summary::-webkit-details-marker { display:none; }
.creation-save-help summary svg { width:16px; height:16px; flex:none; fill:currentColor; }
.creation-save-help>div { position:absolute; right:0; top:100%; box-sizing:border-box; width:min(360px,calc(100vw - 48px)); max-height:calc(100dvh - 180px); overflow:auto; padding:24px; z-index:20; border:1px solid var(--border-strong); border-radius:20px; background:var(--card); box-shadow:0 16px 48px rgba(0,0,0,.12); line-height:1.75; }
.creation-save-help strong { color:var(--text); font-size:16px; }
.creation-save-help p { margin:12px 0 0; }
.creations-grid { display:grid; width:100%; max-width:1916px; grid-template-columns:repeat(auto-fill,min(100%,260px)); gap:28px 16px; align-items:start; }
.creation-card { min-width:0; border:0; border-radius:0; background:transparent; }
.creation-cover-shell { position:relative; overflow:hidden; border-radius:8px; background:var(--card-soft); }
.creation-cover { display:block; position:relative; width:100%; padding:0; border:0; border-radius:0; background:transparent; overflow:hidden; cursor:pointer; }
.creation-cover img { display:block; width:100%; height:auto; object-fit:contain; padding:0; transition:transform 220ms ease-out,opacity 220ms ease-out; }
@media(hover:hover) {
  .creation-cover-shell:hover .creation-cover img { transform:scale(1.025); opacity:.94; }
}
.creation-cover:focus-visible img { opacity:.94; }
.creation-state { display:block; margin:4px 0 0; color:var(--muted-strong); font-size:12px; line-height:1.6; }
.creation-cover-actions { position:absolute; z-index:3; top:12px; right:12px; display:flex; gap:8px; opacity:0; pointer-events:none; transition:opacity 150ms ease; }
.creation-cover-action { display:inline-grid; width:44px; min-width:44px; height:44px; min-height:44px; padding:0; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:12px; color:#fff; background:rgba(18,19,22,.66); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); cursor:pointer; transition:background-color 150ms ease,opacity 150ms ease; }
.creation-cover-action .ri-icon { width:19px; height:19px; }
.creation-cover-shell:hover .creation-cover-actions,.creation-cover-shell:focus-within .creation-cover-actions { opacity:1; pointer-events:auto; }
.creation-cover-action:hover { background:rgba(18,19,22,.86); }
.creation-cover-action:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.creation-card-body { position:relative; padding:8px 2px 0; }
.creation-title { display:block; box-sizing:border-box; width:100%; padding:0 44px 0 0; border:0; background:transparent; color:var(--text); font:inherit; font-weight:600; font-size:14px; line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; cursor:pointer; }
.creation-more { position:absolute; top:0; right:0; z-index:4; }
.creation-more:has([aria-expanded="true"]) { z-index:5; }
.creation-more-trigger { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted-strong); cursor:pointer; }
.creation-more-trigger .ri-icon { width:20px; height:20px; }
.creation-more-trigger:hover,.creation-more-trigger[aria-expanded="true"] { background:var(--card-soft); color:var(--text); }
.creation-more-menu { position:absolute; bottom:calc(100% + 4px); right:0; width:140px; padding:4px; border:1px solid var(--border-strong); border-radius:12px; background:var(--card); box-shadow:0 6px 24px rgba(0,0,0,.16); }
.creation-more-menu button { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:8px 12px; border:0; border-radius:8px; color:var(--danger); background:transparent; font:inherit; font-size:14px; cursor:pointer; }
.creation-more-menu button:hover { background:var(--card-soft); }
.creation-more-menu .ri-icon { width:18px; height:18px; }
.creation-edited { margin:2px 0 0; color:var(--muted-strong); font-size:12px; line-height:1.6; }
.creation-expiry { display:flex; gap:6px; align-items:center; color:var(--highlight-text); font-size:12px; line-height:1.6; margin:10px 0 0; }
.creation-expiry .ri-icon { flex:none; width:15px; height:15px; }
.creation-empty,.creation-loading { display:grid; grid-column:1/-1; min-height:180px; box-sizing:border-box; place-content:center; gap:16px; padding:48px 24px; text-align:center; color:var(--muted-strong); }
.creation-empty h2 { margin:0; color:var(--muted-strong); font-size:16px; line-height:1.5; font-weight:500; }
.creation-empty p { margin:0; font-size:14px; }
.creation-empty button { min-height:44px; padding:0 20px; }
.creations-more { display:block; margin:28px auto 0; min-height:44px; }
.creation-save-bar { display:none !important; }
#creationSaveRetry { background:transparent; border:1px solid var(--border-strong); border-radius:8px; color:var(--text); padding:6px 10px; cursor:pointer; }
#creationSaveStatus.is-error { color:var(--error,#be123c); }
#creationsView button:focus-visible,.creation-save-help summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#creationsView button:disabled { opacity:.55; cursor:wait; }
@media(max-width:600px) {
  #creationsView { padding-block:24px 40px; }
  .creation-new { padding:0 12px; font-size:13px; }
  #creationsSearch { font-size:16px; }
  .creation-filters { justify-content:space-between; }
  .creation-filters button { padding:10px 12px; }
}
@media(max-width:760px) {
  .creations-toolbar { align-items:stretch; flex-direction:column-reverse; gap:16px; }
  .creations-toolbar-actions { width:100%; }
  .creations-toolbar-actions .creations-search { flex:1; width:auto; }
  #studioView.focused-editor[data-stage="create"] .reference-toolbar-actions { gap:8px; }
}
@media(hover:none) { .creation-cover-actions { opacity:1; pointer-events:auto; } }
@media(prefers-reduced-motion:reduce) {
  .creation-card,.creation-cover img,.creation-cover-actions,.creation-cover-action { transition:none; }
  .creation-cover-shell:hover .creation-cover img { transform:none; }
}