/* The reference library is a full studio view; storage and controls stay shared. */
#studioRoot #studioAssetsView { gap:20px; min-width:0; }
#studioRoot .studio-assets-heading { align-items:center; gap:20px; padding:6px 2px 2px; }
#studioRoot .studio-assets-eyebrow { display:block; margin-bottom:8px; color:var(--studio-muted); font-size:10px; font-weight:600; letter-spacing:2.6px; }
#studioRoot .studio-assets-heading h2 { margin:0; font-size:28px; font-weight:680; letter-spacing:.3px; }
#studioRoot .studio-assets-heading p { margin:7px 0 0; color:var(--studio-muted); font-size:13px; }
#studioRoot #studioAssetsReturn { flex:0 0 auto; background:var(--studio-panel)!important; backdrop-filter:blur(18px); }
#studioRoot .studio-assets-card { position:relative; min-width:0; padding:25px; border:1px solid var(--studio-line); border-radius:20px; background:var(--studio-panel); box-shadow:0 18px 60px #0002; backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); }
#studioRoot .studio-assets-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:19px; }
#studioRoot .studio-assets-collection { display:flex; align-items:center; gap:13px; min-width:0; }
#studioRoot .studio-assets-mark { display:grid; place-items:center; width:47px; height:47px; flex:0 0 auto; border:1px solid color-mix(in srgb,var(--studio-accent) 28%,transparent); border-radius:14px; color:var(--studio-accent); background:color-mix(in srgb,var(--studio-accent) 12%,transparent); }
#studioRoot .studio-assets-mark .si { width:24px; height:24px; }
#studioRoot .studio-assets-collection h3 { margin:0; font-size:16px; font-weight:650; }
#studioRoot .studio-assets-collection p { margin:4px 0 0; color:var(--studio-muted); font-size:11px; }
#studioRoot #assetCount { color:var(--studio-ink); font-weight:600; font-variant-numeric:tabular-nums; }
#studioRoot .studio-assets-dot { margin:0 8px; color:var(--studio-faint); }
#studioRoot .studio-assets-actions { display:flex; flex-wrap:wrap; gap:9px; }
#studioRoot .studio-assets-actions button { min-height:41px; padding:9px 15px; font-size:12px; }
#studioRoot .studio-assets-actions .si { width:17px; height:17px; }
#studioRoot #studioAssetsView .studio-assets-primary { background:linear-gradient(125deg,var(--studio-violet),var(--studio-accent))!important; border-color:color-mix(in srgb,var(--studio-accent) 65%,white)!important; color:#fff!important; box-shadow:0 5px 18px #8b42ee24!important; }
#studioRoot #studioAssetsView .studio-assets-primary:hover { filter:brightness(1.1); }
#studioRoot .studio-assets-tips { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding:13px 0; border-top:1px solid var(--studio-line); color:var(--studio-muted); font-size:11px; line-height:1.7; }
#studioRoot .studio-assets-tips>span:last-child { color:var(--studio-faint); }
#studioRoot .studio-assets-canvas { position:relative; min-width:0; overflow:hidden; border-radius:15px; }
#studioRoot #studioAssetsView .asset-grid { display:grid; position:relative; height:clamp(320px,calc(100dvh - 480px),680px); min-height:0; padding:17px; margin:0; gap:16px; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); align-content:start; overflow:auto; border:1px solid var(--studio-line); border-radius:15px; background:var(--studio-inset); scrollbar-color:color-mix(in srgb,var(--studio-muted) 28%,transparent) transparent; }
#studioRoot #studioAssetsView .asset-grid.empty { display:flex; justify-content:center; align-items:center; border-style:dashed; cursor:pointer; background:radial-gradient(ellipse at 50% 32%,color-mix(in srgb,var(--studio-accent) 7%,transparent),transparent 62%),var(--studio-inset); }
#studioRoot #studioAssetsView .asset-grid.empty:hover,#studioRoot #assetCard.over .asset-grid { border-color:var(--studio-accent); background-color:color-mix(in srgb,var(--studio-accent) 9%,var(--studio-inset)); }
#studioRoot .studio-assets-empty { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:480px; padding:35px 14px; text-align:center; color:var(--studio-muted); font-size:13px; line-height:1.7; }
#studioRoot .studio-assets-empty-icon { display:grid; place-items:center; width:76px; height:76px; margin-bottom:12px; border:1px solid color-mix(in srgb,var(--studio-accent) 25%,var(--studio-line)); border-radius:24px; color:var(--studio-accent); background:linear-gradient(145deg,color-mix(in srgb,var(--studio-accent) 16%,transparent),color-mix(in srgb,var(--studio-accent) 4%,transparent)); box-shadow:0 12px 32px #0000000d; }
#studioRoot .studio-assets-empty-icon .si { width:34px; height:34px; stroke-width:1.35; }
#studioRoot .studio-assets-empty strong { color:var(--studio-ink); font-size:20px; font-weight:600; }
#studioRoot .studio-assets-empty small { max-width:360px; color:var(--studio-faint); font-size:11px; }
#studioRoot .studio-assets-empty-action { display:inline-flex; align-items:center; gap:18px; margin-top:9px; padding:8px 17px; border:1px solid color-mix(in srgb,var(--studio-accent) 30%,var(--studio-line)); border-radius:9px; color:var(--studio-accent); background:color-mix(in srgb,var(--studio-accent) 7%,transparent); font-size:12px; }
#studioRoot #studioAssetsView .asset-item { gap:10px; padding:9px; border:1px solid var(--studio-line); border-radius:13px; background:var(--studio-control); box-shadow:none; transition:border-color .16s,background-color .16s; }
#studioRoot #studioAssetsView .asset-item:hover { border-color:color-mix(in srgb,var(--studio-accent) 60%,var(--studio-line)); background:var(--studio-hover); }
#studioRoot #studioAssetsView .asset-item.selected { outline:2px solid var(--studio-accent); outline-offset:-1px; border-color:var(--studio-accent); background:color-mix(in srgb,var(--studio-accent) 11%,var(--studio-control)); }
#studioRoot #studioAssetsView .asset-item.selected:after { content:'✓'; position:absolute; top:16px; right:16px; display:grid; place-items:center; width:23px; height:23px; border:1px solid #ffffff55; border-radius:50%; background:var(--studio-accent); color:#fff; font-size:13px; pointer-events:none; }
#studioRoot #studioAssetsView .asset-item img { width:100%; aspect-ratio:4/3; height:auto; object-fit:contain; border-radius:8px; background:var(--studio-inset); box-shadow:none; }
#studioRoot #studioAssetsView .asset-name-row { min-height:32px; justify-content:space-between; gap:7px; padding:0 2px; }
#studioRoot #studioAssetsView .asset-name { color:var(--studio-ink); text-align:left; font-size:12px; max-width:calc(100% - 36px); }
#studioRoot #studioAssetsView .asset-rename { display:grid; place-items:center; flex:0 0 28px; width:28px; min-width:28px; height:28px; min-height:28px; padding:0; border:0!important; background:transparent!important; color:var(--studio-muted)!important; font-size:16px; }
#studioRoot #studioAssetsView .asset-rename:hover { background:var(--studio-hover)!important; color:var(--studio-ink)!important; }
#studioRoot #studioAssetsView .asset-name-input { width:100%; height:32px; min-width:0; border:1px solid var(--studio-accent)!important; border-radius:7px; padding:4px 8px; color:var(--studio-ink)!important; background:var(--studio-inset)!important; text-align:left; font-size:12px; }
#studioRoot #studioAssetsView .asset-item>button { min-height:32px; padding:5px 8px; color:var(--studio-accent)!important; font-size:11px; }
#studioRoot #studioAssetsView .asset-selection-box { border-color:var(--studio-accent); background:color-mix(in srgb,var(--studio-accent) 18%,transparent); }
#studioRoot .studio-assets-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:18px; min-height:57px; }
#studioRoot .studio-assets-footer>div { display:flex; flex-direction:column; gap:5px; min-width:0; }
#studioRoot .studio-assets-selection { color:var(--studio-muted); font-size:12px; }
#studioRoot #assetMsg { color:var(--studio-positive); font-size:11px; line-height:1.65; overflow-wrap:anywhere; }
#studioRoot #assetMsg:empty { display:none; }
#studioRoot #assetMsg.bad { color:#f2a0a9; }
html[data-theme="light"] #studioRoot #assetMsg.bad { color:#aa2945; }
#studioRoot #studioAssetsView #assetDeleteBtn { flex:0 0 auto; min-width:110px; min-height:37px; padding:8px 12px; border-color:color-mix(in srgb,#d98397 35%,var(--studio-line))!important; background:color-mix(in srgb,#d98397 6%,transparent)!important; color:#efb2be!important; font-size:11px; }
html[data-theme="light"] #studioRoot #studioAssetsView #assetDeleteBtn { color:#a43857!important; }
#studioRoot #studioAssetsView #assetDeleteBtn:hover:not(:disabled) { background:color-mix(in srgb,#d98397 14%,transparent)!important; }
#studioRoot #assetPreviewModal { background:#100d18b3!important; backdrop-filter:blur(14px); }
#studioRoot #assetPreviewModal .asset-preview-card { border-color:var(--studio-line)!important; background:var(--studio-panel)!important; }
#studioRoot #assetPreviewModal .asset-preview-close { border:1px solid var(--studio-line)!important; background:var(--studio-control)!important; color:var(--studio-ink)!important; }
@media(max-width:900px) {
  #studioRoot .studio-assets-toolbar { align-items:flex-start; flex-wrap:wrap; gap:15px; }
  #studioRoot .studio-assets-actions { margin-left:auto; }
  #studioRoot .studio-assets-card { padding:20px; }
  #studioRoot #studioAssetsView .asset-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}
@media(max-width:600px) {
  #studioRoot #studioAssetsView { gap:15px; }
  #studioRoot .studio-assets-heading { flex-wrap:wrap; gap:13px; }
  #studioRoot .studio-assets-heading h2 { font-size:24px; }
  #studioRoot .studio-assets-heading p { font-size:12px; }
  #studioRoot #studioAssetsReturn { width:auto; min-height:36px; padding:7px 11px; font-size:11px; }
  #studioRoot #studioAssetsReturn .si { width:16px; height:16px; }
  #studioRoot .studio-assets-card { padding:16px; border-radius:16px; }
  #studioRoot .studio-assets-collection h3 { font-size:15px; }
  #studioRoot .studio-assets-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  #studioRoot .studio-assets-actions button { padding:8px; font-size:11px; }
  #studioRoot .studio-assets-tips { font-size:10px; }
  #studioRoot #studioAssetsView .asset-grid { height:400px; padding:11px; gap:11px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #studioRoot #studioAssetsView .asset-grid.empty { height:360px; }
  #studioRoot .studio-assets-empty { padding:25px 3px; font-size:12px; }
  #studioRoot .studio-assets-empty strong { font-size:18px; }
  #studioRoot .studio-assets-empty small { font-size:10px; }
  #studioRoot .studio-assets-footer { gap:12px; align-items:flex-start; }
  #studioRoot .studio-assets-selection { font-size:11px; }
  #studioRoot #studioAssetsView .asset-item { padding:6px; gap:6px; }
  #studioRoot #studioAssetsView .asset-name { font-size:11px; }
  #studioRoot #studioAssetsView #assetDeleteBtn { min-width:99px; }
}
@media(prefers-reduced-motion:reduce) {
  #studioRoot #studioAssetsView .asset-item { transition:none; }
}