/* 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;
}
/* The dotted surface belongs to the studio upload workspace. Keep the
   creations library, including its empty state after deletion, on a solid
   page background even while the view is being switched asynchronously. */
html:has(#creationsView:not(.hidden)) {
  background-color: var(--bg);
  background-image: none;
  background-size: auto;
}
body:has(#creationsView:not(.hidden)) {
  background: var(--bg);
}
@media(min-width:601px) {
  body:has(#creationsView:not(.hidden)) { overflow-x:hidden; }
  body:has(#creationsView:not(.hidden)) > .appbar { width:100vw; }
  html:has(#creationsView:not(.hidden)) { scrollbar-gutter:stable; }
}
#mainContent.page:has(> #creationsView:not(.hidden)) { width:var(--app-shell-width); max-width:none; margin-inline:auto; padding:0 !important; }
body.creations-scrolled:has(#creationsView:not(.hidden)) > .appbar {
  background:color-mix(in srgb, var(--card) 78%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
#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; }
.creations-toolbar > .creation-filters { gap:20px; }
.creations-toolbar > .creation-filters button { padding:10px 0; border:0; border-radius:0; }
.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:transparent; border-color:transparent; color:var(--text); font-weight:600; }
.creations-toolbar > .creation-filters button[aria-pressed="true"] { box-shadow:inset 0 -2px 0 currentColor; }
.creation-filters button:hover { color:var(--text); background:var(--card-soft); }
.creations-toolbar > .creation-filters button:hover { background:transparent; }
.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-select-toggle { margin-left:auto; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; color:var(--text); font:inherit; font-size:14px; cursor:pointer; }
.creation-select-toggle:hover { color:var(--mark); }
.creation-select-toggle[aria-pressed="true"] { color:var(--mark); font-weight:600; }
.creation-selection-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-8px 0 16px; padding:0 0 12px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; color:var(--muted-strong); font-size:14px; }
.creation-selection-bar>span { min-width:0; }
.creation-selection-bar>div { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.creation-selection-bar button { min-height:44px; padding:0 12px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text); font:inherit; cursor:pointer; }
.creation-selection-bar button:hover:not(:disabled) { background:var(--card-soft); }
.creation-selection-bar #creationSelectAll:disabled { color:var(--muted); cursor:not-allowed !important; }
.creation-delete-selected { border:1px solid var(--danger); color:var(--danger); background:transparent; }
.creation-selection-bar button:disabled { opacity:1; cursor:not-allowed !important; }
#creationDeleteSelected:disabled { border-color:var(--border); color:var(--muted); }
.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:12px 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-card-select { display:none; position:absolute; z-index:4; top:8px; left:8px; width:44px; height:44px; place-items:center; cursor:pointer; }
.is-selecting .creation-card-select { display:grid; }
.is-selecting .creation-card { cursor:pointer; }
.is-selecting .creation-more { display:none; }
.creation-card-select input { width:22px; height:22px; margin:0; accent-color:var(--mark); cursor:pointer; }
.creation-card-select:has(input:disabled) { opacity:.65; cursor:not-allowed; }
.creation-card-select input:focus-visible { outline:2px solid var(--mark); outline-offset:3px; }
.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-card-body { position:relative; padding:6px 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(--text); background:transparent; font:inherit; font-size:14px; cursor:pointer; }
.creation-more-menu .creation-delete { color:var(--danger); }
.creation-more-menu button:hover { background:var(--card-soft); }
.creation-more-menu .ri-icon { width:18px; height:18px; }
.creation-rename-dialog { box-sizing:border-box; width:min(420px,calc(100vw - 32px)); max-width:none; padding:24px; border:1px solid var(--border); border-radius:20px; background:var(--card); color:var(--text); }
.creation-rename-dialog::backdrop { background:rgba(0,0,0,.45); }
.creation-rename-dialog form { display:grid; gap:12px; }
.creation-rename-dialog h2 { margin:0 0 8px; font-size:20px; }
.creation-rename-dialog label { font-size:14px; }
.creation-rename-dialog input { box-sizing:border-box; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:12px; background:var(--card); color:var(--text); font:inherit; }
.creation-rename-dialog input:focus-visible { outline:2px solid var(--mark); outline-offset:2px; }
.creation-rename-error { margin:0; color:var(--error,#be123c); font-size:13px; }
.creation-rename-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.creation-rename-actions button { min-height:44px; padding:0 16px; border:1px solid var(--border-strong); border-radius:12px; background:var(--card); color:var(--text); font:inherit; cursor:pointer; }
.creation-rename-actions [data-save] { border-color:var(--action); background:var(--action); color:var(--on-action); }
.creation-rename-actions button:disabled { opacity:.6; cursor:wait; }
.creation-edited { margin:0; color:var(--muted-strong); font-size:12px; line-height:1.5; }
.creation-expiry { display:flex; gap:6px; align-items:center; color:var(--highlight-text); font-size:12px; line-height:1.5; margin:4px 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); }
#creationsView:has(.creation-empty) { min-width:0; width:100%; min-height:calc(100dvh - var(--top-announcement-offset, 0px) - 76px); display:flex; flex-direction:column; }
#creationsView:has(.creation-empty) .creations-grid { flex:1; align-content:center; }
.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; }
.creations-back-to-top { position:fixed; right:max(12px,env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:25; display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid var(--border-strong); border-radius:50%; background:var(--card); color:var(--text); cursor:pointer; }
.creations-back-to-top[hidden] { display:none; }
.creations-back-to-top:hover { background:var(--field); }
.creations-back-to-top .ri-icon { width:24px; height:24px; }
.creations-back-to-top:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.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(min-width:601px) {
  #creationsView { min-height:calc(100dvh - var(--top-announcement-offset, 0px) - 56px); }
}
@media(max-width:600px) {
  #creationsView:has(.creation-empty) { min-height:calc(100dvh - var(--top-announcement-offset, 0px) - 68px); }
  #creationsView { padding-block:24px 40px; }
  .creation-selection-bar { align-items:center; flex-direction:row; margin-top:0; }
  .creation-selection-bar>div { width:auto; }
  .creation-selection-bar button { flex:0 0 auto; }
  #creationSelectAll { flex-basis:auto; }
  .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(prefers-reduced-motion:reduce) {
  .creation-card,.creation-cover img { transition:none; }
  .creation-cover-shell:hover .creation-cover img { transform:none; }
}