/* Shared homepage styles provide typography, navigation, panels and buttons. */
html.collection-root { height:auto!important; min-height:100%; overflow-x:hidden!important; overflow-y:auto!important; }
.collection-page {
  --collection-field:#0f141c; --collection-border:#344052;
  --collection-surface:#080b10; --collection-card:#0a0d12;
  --collection-muted:#aeb8c7; --collection-hover:#1b2430;
  --collection-focus:#aeb8c7; --collection-error:#ff9e9e;
  color-scheme:dark; height:auto!important; min-height:100vh!important;
  overflow:visible!important; font-size:14px; line-height:1.55;
}
html[data-theme="light"] .collection-page {
  --collection-field:#fff; --collection-border:#d1d5db;
  --collection-surface:#fbfcff; --collection-card:#fff;
  --collection-muted:#667085; --collection-hover:#f4f7fb;
  --collection-focus:#344054; --collection-error:#b42318; color-scheme:light;
}
body.collection-page .app-shell { height:auto!important; min-height:100vh!important; max-height:none!important; overflow:visible!important; }
body.collection-page .topbar { height:auto!important; min-height:72px!important; gap:16px; flex-wrap:wrap; }
.collection-page .page-heading { min-width:0; }
.collection-page .top-actions { flex-wrap:wrap; }
.collection-page .account-entry { text-decoration:none; }
.collection-page .collection-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:12px; align-items:start; }
body.collection-page .panel { min-height:0; overflow:visible; border-radius:12px; }
.collection-page .workspace { min-width:0; min-height:360px; }
.collection-page .billing-layout { width:100%; min-width:0; }
.collection-page .heading,.collection-page .toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.collection-page .heading { margin-bottom:14px; }
.collection-page .heading h2 { flex:1; min-width:0; }
.collection-page .toolbar { margin-bottom:14px; }
.collection-page .hint,.collection-page .muted,.collection-page .meta { color:var(--collection-muted); font-size:12px; }
.collection-page .hint { line-height:1.65; }
.collection-page button,.collection-page input,.collection-page select,.collection-page textarea { font-family:inherit; }
.collection-page input,.collection-page select,.collection-page textarea { max-width:100%; min-width:0; border:1px solid var(--collection-border); border-radius:10px; padding:9px 10px; background:var(--collection-field); color:inherit; font-size:13px; }
.collection-page textarea { resize:vertical; line-height:1.55; }
.collection-page input[type="checkbox"] { width:14px; height:14px; padding:0; accent-color:var(--collection-focus); }
.collection-page input[type="search"] { flex:1 1 200px; }
.collection-page .toolbar label { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.collection-page :is(button,a,input,select,textarea):focus-visible { outline:2px solid var(--collection-focus); outline-offset:3px; }
.collection-page #projects { display:grid; gap:8px; margin-bottom:16px; }
.collection-page #projects button { text-align:left; overflow-wrap:anywhere; }
.collection-page #projects button.active { background:var(--collection-hover)!important; border-color:var(--collection-focus)!important; font-weight:600; }
.collection-page #status { min-height:22px; margin:8px 0 14px; color:var(--collection-muted); font-size:13px; overflow-wrap:anywhere; }
.collection-page #status.error,.collection-page #editError { color:var(--collection-error); }
.collection-page .assets { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:12px; }
.collection-page .asset { border:1px solid var(--collection-border); background:var(--collection-card); border-radius:14px; overflow:hidden; min-width:0; }
.collection-page .asset img,.collection-page .asset video { display:block; width:100%; height:168px; object-fit:contain; background:var(--collection-surface); }
.collection-page .asset-body { padding:14px; }
.collection-page .asset h3 { margin:0 0 8px; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.collection-page .prompt-preview { height:168px; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; padding:14px; background:var(--collection-surface); }
.collection-page .asset .toolbar { margin:12px 0 0; gap:7px; }
.collection-page .asset .toolbar button { font-size:12px; padding:6px 10px; }
.collection-page .selection { float:right; }
.collection-page .empty { grid-column:1 / -1; margin:0; padding:32px 16px; border:1px dashed var(--collection-border); border-radius:14px; text-align:center; color:var(--collection-muted); }
.collection-page dialog { width:min(620px,94vw); max-height:90vh; overflow:auto; background:var(--collection-card); color:inherit; border:1px solid var(--collection-border); border-radius:18px; padding:18px; font-family:inherit; }
.collection-page dialog::backdrop { background:rgba(0,0,0,.6); }
.collection-page dialog h2 { margin-bottom:14px; }
.collection-page dialog label { display:grid; gap:5px; margin-bottom:12px; font-size:13px; }
.collection-page dialog input,.collection-page dialog select,.collection-page dialog textarea { width:100%; }
.collection-page .version { padding:14px 0; border-bottom:1px solid var(--collection-border); }
.collection-page .version p { white-space:pre-wrap; overflow-wrap:anywhere; }
.collection-page .version a { color:inherit; text-underline-offset:3px; }
.collection-page #records { display:grid; gap:12px; }
.collection-page .bill { padding:14px; border:1px solid var(--collection-border); border-radius:14px; background:var(--collection-surface); }
.collection-page .bill p { overflow-wrap:anywhere; color:var(--collection-muted); font-size:12px; }
.collection-page .bill strong { font-size:14px; }
.collection-page .totals { display:flex; gap:12px 24px; flex-wrap:wrap; font-size:13px; font-variant-numeric:tabular-nums; }
.collection-page .billing-pagination { margin:14px 0 0; }
.collection-page [hidden] { display:none!important; }
@media(max-width:760px) {
  body.collection-page .topbar { align-items:flex-start; flex-direction:column; }
  .collection-page .collection-layout { grid-template-columns:minmax(0,1fr); }
  .collection-page #projects { display:flex; flex-wrap:wrap; }
  .collection-page #projects button { max-width:100%; }
  .collection-page .workspace { min-height:260px; }
  .collection-page .totals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}