/* Riverflow Creative Engine styles, from the design kit Jake sent (riverflow-creative-engine-design-kit,
   14 Oct 2026): app/globals.css copied verbatim below the preflight. The kit compiles it with Tailwind;
   this page has no build step, so the Tailwind imports and @theme block are replaced by the few
   preflight rules the kit relies on. Don't edit the kit section; put page layout in app.css. */
*,::before,::after,::backdrop{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
ol,ul,menu{list-style:none}
img,svg,video,canvas,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;background-color:transparent;border-radius:0;opacity:1}
a{color:inherit;text-decoration:inherit}
[hidden]{display:none!important}

/* ---- kit: app/globals.css ---- */
* { letter-spacing:0; }
body { margin:0; background:var(--background); color:var(--foreground); font:15px/1.5 "Barlow",Arial,sans-serif; }
button,a,input { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--ring); outline-offset:0; }
h1,h2,h3 { font-weight:400; }
h1,h2 { font-family:"Denton Condensed",Georgia,serif; line-height:1.2; }
h1 { font-size:28px; }
h2 { font-size:24px; }
.muted { color:var(--rf-grey-500); }
.wordmark { width:111px; height:16px; display:block; object-fit:contain; }
.eyebrow,.small-label,.nav-label { font:500 19px/1 "Sans Plomb","Arial Narrow",sans-serif; text-transform:uppercase; }
.eyebrow { margin-bottom:8px; }
.small-label { font-size:16px; color:var(--rf-grey-500); }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 16px; background:white; }
.surface-title { font:400 30px/1.2 "Denton Condensed",Georgia,serif; color:var(--rf-blue); }
.surface-name { font:400 30px/1.2 "Denton Condensed",Georgia,serif; color:var(--rf-grey-500); border-left:1px solid var(--border); padding-left:16px; }
.private-pill { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--rf-grey-500); }
.workspace-main { padding:8px 16px 24px; width:100%; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.page-heading .eyebrow { display:none; }
.page-heading .muted { margin-top:8px; font-size:15px; }
.side-brand { padding:16px 16px 12px 24px!important; margin:0; gap:0!important; }
.side-brand-row { display:flex; align-items:center; justify-content:space-between; min-height:40px; }
.side-sub { font-size:13px; color:var(--rf-grey-500); padding-top:8px; }
[data-slot="sidebar-container"] { border-right:0!important; }
[data-sidebar="content"] { gap:0; }
.workspace-label { display:flex; align-items:center; gap:8px; margin:0 16px; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); font-size:14px; font-weight:500; }
.workspace-label small { display:block; font-size:12px; color:var(--rf-grey-500); font-weight:400; }
.workspace-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:4px; background:var(--rf-grey-100); }
.nav-label { padding:24px 16px 12px; }
[data-sidebar="menu"] { gap:8px; padding-inline:16px; }
[data-sidebar="menu-button"] { height:40px; border-radius:6px; padding:0 8px; gap:8px; font:500 15px/20px "Barlow",Arial,sans-serif; }
[data-sidebar="menu-button"] svg { width:20px; height:20px; }
[data-sidebar="menu-button"]:hover { background:var(--rf-grey-100); }
[data-sidebar="menu-button"][data-active="true"] { background:var(--rf-yellow-100); }
.nav-count { margin-left:auto; font-size:12px; color:var(--rf-grey-500); }
.sidebar-note { margin:24px 16px; padding-top:16px; border-top:1px solid var(--border); }
.sidebar-note p { font:400 15px/1.5 "Barlow",Arial,sans-serif; color:var(--rf-grey-500); margin-top:8px; }
[data-sidebar="footer"] { padding:8px 8px 16px; gap:8px; }
.riverflow-link { display:flex; width:100%; height:40px; gap:8px; align-items:center; padding:0 8px; font-size:15px; font-weight:500; border-radius:6px; }
.riverflow-link:hover { background:var(--rf-grey-100); }
.riverflow-link svg { width:20px; height:20px; }
.section-bar { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--border); padding:8px 0 16px; color:var(--rf-grey-500); font-size:14px; }
.empty-library { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px 16px; }
.empty-icon { width:48px; height:48px; display:grid; place-items:center; color:var(--rf-grey-500); margin-bottom:16px; }
.empty-library p { color:var(--rf-grey-500); font-size:15px; line-height:1.5; margin:8px 0 24px; }
.text-link { color:var(--rf-link); font-size:15px; text-decoration:underline; text-underline-offset:3px; margin-top:16px; }
.library-footer { display:flex; align-items:center; gap:8px; padding:16px 0; border-top:1px solid var(--border); color:var(--rf-grey-500); font-size:13px; }
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; padding:16px 0; }
.asset-card { text-align:left; min-width:0; }
.asset-preview { aspect-ratio:1; background:var(--rf-grey-100); border-radius:8px; overflow:hidden; position:relative; }
.asset-preview img,.asset-preview video { width:100%; height:100%; object-fit:cover; }
.usable { position:absolute; bottom:8px; left:8px; background:var(--rf-grey-600); color:white; padding:4px 8px; display:flex; align-items:center; gap:4px; border-radius:4px; font-size:12px; }
.asset-caption { padding:8px 0; }
.assets-main { min-width:0; width:100%; max-width:100%; height:100dvh; overflow:hidden; }
[data-slot="sidebar-inset"] { min-width:0; }
.asset-workspace,.asset-content,.brand-assets { min-width:0; width:100%; max-width:100%; }
.brand-assets { content-visibility:auto; contain-intrinsic-size:auto 390px; }
.asset-media { width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center; }
.asset-media-loading { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.asset-media-error { padding:20px; font-size:14px; color:var(--rf-grey-500); }
.engine-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; color:var(--rf-grey-500); }
.engine-loading object { width:40px; height:40px; pointer-events:none; }
.engine-loading.compact { display:inline-flex; padding:0; gap:0; }
.engine-loading.compact object { width:20px; height:20px; }
.engine-toast { position:fixed; z-index:100; bottom:24px; right:24px; display:flex; align-items:center; gap:16px; width:max-content; max-width:min(440px,calc(100vw - 32px)); padding:16px; background:white; border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 24px #0002; font-size:14px; }
.engine-toast button { flex-shrink:0; display:grid; place-items:center; width:24px; height:24px; }
.asset-load-more { display:flex; justify-content:center; padding:24px; }
.asset-topbar { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--border); }
.asset-topbar>button:last-child { flex-shrink:0; }
.asset-type-tabs { display:flex; flex:1; gap:20px; min-width:0; overflow:auto; }
.asset-type-tabs button { white-space:nowrap; padding:8px 0; border-bottom:2px solid transparent; font:400 28px/1.2 "Denton Condensed",Georgia,serif; }
.asset-tab-divider { align-self:center; width:1px; height:28px; background:var(--border); flex-shrink:0; }
.asset-type-tabs button.active { border-color:var(--rf-blue); color:var(--rf-blue); }
.asset-content { padding:16px 24px; }
.manual-banner { margin:0 0 16px; padding:10px 14px; background:var(--rf-yellow-100); border-radius:4px; font-size:14px; }
.asset-tools { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:24px; font-size:14px; }
.asset-count { margin-right:auto; }
.asset-search { position:relative; width:220px; max-width:100%; }
.asset-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none; }
.asset-search input { padding-left:36px; }
.asset-layout-controls { display:flex; gap:4px; }
.asset-layout-controls button { padding:8px; }
.asset-layout-controls button[aria-pressed="true"] { background:var(--rf-yellow-100); }
.hide-unusable { display:flex; align-items:center; gap:8px; cursor:pointer; }
.hide-unusable input { appearance:none; width:32px; height:18px; border-radius:10px; background:var(--rf-grey-300); position:relative; cursor:pointer; }
.hide-unusable input::after { content:""; position:absolute; width:14px; height:14px; border-radius:50%; top:2px; left:2px; background:white; }
.hide-unusable input:checked { background:var(--rf-grey-600); }
.hide-unusable input:checked::after { left:16px; }
.engine-assets-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.asset-hover-details { position:absolute; inset:0; background:rgb(0 0 0 / 80%); color:white; padding:20px; display:flex; flex-direction:column; justify-content:center; gap:10px; text-align:left; opacity:0; transition:opacity .15s; overflow-wrap:anywhere; }
.asset-hover-details strong { font-size:18px; }
.asset-hover-details span,.asset-hover-details time { font-size:14px; line-height:1.5; }
.engine-asset-preview:hover .asset-hover-details,.engine-asset-preview:focus-visible .asset-hover-details { opacity:1; }
.asset-detail-form fieldset { border:0; padding:0; display:grid; gap:12px; min-width:0; }
.asset-workflow-label { margin:6px 0; font-weight:500; }
.asset-tools select,.asset-detail-form select,.asset-detail-form textarea { border:1px solid var(--border); border-radius:6px; background:white; padding:8px; font:inherit; max-width:100%; }
.brand-assets { margin:0 0 28px; }
.brand-assets h2 { font:500 28px/1.2 "Sans Plomb","Arial Narrow",sans-serif; text-transform:uppercase; margin-bottom:12px; }
.brand-assets h2 small { font:400 14px "Barlow",sans-serif; color:var(--rf-grey-500); margin-left:8px; }
.brand-asset-row { display:flex; min-width:0; width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; gap:16px; padding-bottom:12px; }
.engine-asset-card { flex:0 0 260px; min-width:0; }
.engine-asset-preview { display:block; position:relative; width:100%; aspect-ratio:4/5; background:var(--rf-grey-100); overflow:hidden; border-radius:8px; }
.engine-asset-preview img,.engine-asset-preview video { width:100%; height:100%; object-fit:contain; }
.asset-caption time { display:block; font-size:12px; color:var(--rf-grey-500); margin-top:8px; }
.asset-quick-actions { display:flex; gap:8px; margin:8px 0; }
.asset-quick-actions button,.asset-icon { display:inline-flex; align-items:center; justify-content:center; min-width:34px; width:34px; height:34px; padding:0; border:1px solid var(--border); border-radius:6px; background:white; }
.asset-quick-actions>a.rf-button { min-width:34px; width:34px; min-height:34px; height:34px; padding:0; border-radius:6px; }
.asset-quick-actions .approval-flag.active { background:#B9313B; color:white; border-color:#B9313B; }
[data-slot="dialog-content"].engine-viewer { display:grid; grid-template-columns:minmax(0,1fr) 340px; width:94vw; max-width:1500px; height:90dvh; padding:0; gap:0; overflow:hidden; }
.engine-viewer-media { position:relative; background:#161709; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; }
.engine-viewer-media img,.engine-viewer-media video { width:100%; height:100%; object-fit:contain; }
.engine-viewer-media iframe { width:100%; height:100%; border:0; background:white; }
.preview-versions { margin:16px 0; }
.viewer-navigation { position:absolute; inset:50% 16px auto; transform:translateY(-50%); display:flex; justify-content:space-between; pointer-events:none; }
.viewer-navigation .rf-button[data-variant="outline"] { pointer-events:auto; background:white; color:#111; border-color:white; box-shadow:0 2px 10px #0004; }
.viewer-navigation .rf-button[data-variant="outline"]:hover { background:var(--rf-yellow); border-color:var(--rf-yellow); color:#111; }
.engine-viewer-details { padding:44px 20px 24px; overflow:auto; }
.engine-viewer-details h2 { font:400 26px "Denton Condensed",Georgia,serif; }
.engine-viewer-details .muted { font-size:13px; margin:8px 0; }
.review-label { font-size:13px; background:var(--rf-yellow-100); padding:6px 8px; margin:12px 0; }
.asset-detail-form { display:grid; gap:12px; margin:20px 0; }
.asset-detail-form label { display:grid; gap:6px; font-size:14px; }
[data-slot="dialog-content"].asset-upload-dialog { max-height:90dvh; overflow:auto; }
@media(max-width:760px) { .asset-topbar { flex-wrap:wrap; }.asset-type-tabs { order:3; flex-basis:100%; }.asset-content { padding:16px; }[data-slot="dialog-content"].engine-viewer { display:block; overflow:auto; }.engine-viewer-media { height:48dvh; }.engine-viewer-details { overflow:visible; padding:24px 16px; } }
.usable.wip { background:#B9313B; color:white; }
.asset-caption strong { display:block; font-size:15px; font-weight:500; overflow-wrap:anywhere; }
.asset-caption span { display:block; font-size:13px; color:var(--rf-grey-500); margin-top:4px; }
.skill-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:16px 0; }
.skill-card { border:1px solid var(--rf-grey-300); border-radius:8px; background:var(--rf-grey-50); overflow:hidden; display:flex; flex-direction:column; }
.skill-art { height:64px; display:flex; justify-content:space-between; align-items:center; padding:16px; color:var(--foreground); }
.skill-art svg { width:24px; height:24px; stroke-width:1.5; }
.skill-art span { font:500 19px/1 "Sans Plomb",sans-serif; color:var(--rf-grey-500); }
.skill-copy { padding:0 16px 16px; display:flex; flex:1; flex-direction:column; }
.status-tag { align-self:flex-start; display:inline-block; background:var(--rf-grey-200); color:var(--rf-grey-600); padding:4px 8px; border-radius:4px; font:500 16px/1 "Sans Plomb",sans-serif; text-transform:uppercase; }
.skill-copy h2 { margin:12px 0 8px; }
.skill-copy p { font-size:15px; line-height:1.5; color:var(--rf-grey-600); margin-bottom:24px; }
.skill-actions { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; }
.icon-download { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--rf-grey-300); background:white; border-radius:8px; }
.icon-download:hover { background:var(--rf-grey-100); }
.notice { background:var(--rf-grey-100); padding:16px; border-radius:8px; font-size:14px; line-height:1.5; color:var(--rf-grey-600); margin-top:16px; }
.guide { max-width:1040px; }
.guide>.text-link { display:block; margin:0 0 16px; }
.guide h2 { font-size:28px; margin:16px 0 8px; }
.guide-intro { max-width:720px; color:var(--rf-grey-600); font-size:16px; }
.guide-columns { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:24px 0; }
.workflow-overview { margin:24px 0; }
.workflow-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px; list-style:none !important; padding:0 !important; margin:16px 0 24px; }
.workflow-cards li { border:1px solid var(--border); border-radius:8px; padding:16px; display:flex; gap:12px; align-items:flex-start; }
.workflow-number { flex-shrink:0; width:24px; height:24px; display:grid; place-items:center; border-radius:4px; background:var(--rf-yellow-100); font-weight:500; }
.workflow-cards p { margin:0; line-height:1.6; }
.workflow-benefits { padding-left:20px; list-style:disc; line-height:1.7; }
.guide h3 { font:400 24px/1.2 "Denton Condensed",Georgia,serif; margin:0 0 12px; }
.guide ul,.guide ol { padding-left:20px; margin-bottom:24px; color:var(--rf-grey-600); line-height:1.6; }
.guide ul { list-style:disc; } .guide ol { list-style:decimal; } .guide li { margin-bottom:8px; }
.guide blockquote { border:1px solid var(--rf-grey-300); border-radius:8px; background:var(--rf-grey-50); padding:16px; line-height:1.6; margin-bottom:16px; }
.download-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 16px; border-radius:8px; background:var(--rf-yellow); color:var(--foreground); font-size:15px; font-weight:500; }
.download-link:hover { background:var(--foreground); color:white; }
.download-link.secondary { background:white; border:1px solid var(--foreground); }
.download-link.secondary:hover { background:var(--foreground); color:white; }
.tips-list { max-width:1040px; }
.tips-list article { display:flex; gap:24px; border-top:1px solid var(--border); padding:24px 0; }
.tip-number { font:500 24px/1 "Sans Plomb",sans-serif; color:var(--rf-grey-500); }
.tips-list h2 { margin:8px 0; }
.tips-list p { color:var(--rf-grey-600); max-width:760px; line-height:1.6; }
.engine-guide { max-width:1040px; }
.engine-intro { padding:0 0 24px; border-bottom:1px solid var(--border); }
.engine-intro h2 { margin:16px 0 8px; font-size:28px; }
.engine-intro p { color:var(--rf-grey-600); max-width:720px; line-height:1.6; }
.engine-steps section { display:flex; gap:16px; padding:24px 0; border-bottom:1px solid var(--border); }
.engine-steps section>span { flex-shrink:0; width:32px; height:32px; background:var(--rf-yellow-100); border-radius:6px; display:grid; place-items:center; font-weight:500; }
.engine-steps h3 { font:400 24px/1.2 "Denton Condensed",Georgia,serif; margin-bottom:8px; }
.engine-steps p { color:var(--rf-grey-600); line-height:1.6; }
.login-page { min-height:100dvh; background:var(--rf-grey-50); display:flex; align-items:center; justify-content:center; padding:96px 24px; }
.login-brand { display:flex; align-items:center; margin-bottom:24px; }
.login-form { width:400px; max-width:100%; }
.login-form h1 { font-size:36px; }
.login-form>.muted { margin:12px 0 24px; }
.login-form label { display:block; font-weight:500; margin-bottom:8px; }
.login-form .login-password-label { margin-top:16px; }
.login-form button { width:100%; margin-top:16px; }
.login-note { text-align:center; font-size:12px; color:var(--rf-grey-500); margin-top:24px; }
.error { color:var(--destructive); font-size:14px; margin-top:12px; }
.error-banner { display:flex; align-items:center; justify-content:space-between; background:#F8EAEB; color:var(--destructive); padding:16px; margin:8px 0; border-radius:8px; }
.upload-form { display:grid; gap:16px; }
.upload-form label { font-weight:500; display:grid; gap:8px; }
.upload-form small { color:var(--rf-grey-500); font-size:12px; font-weight:400; }
[data-slot="input"] { min-height:40px; background:white; border:1px solid var(--rf-grey-300); border-radius:8px; box-shadow:none; font:400 15px/1.5 "Barlow",Arial,sans-serif; }
[data-slot="input"]:focus { border-color:var(--foreground); }
[data-slot="dialog-content"] { border:1px solid var(--rf-grey-300); border-radius:8px; padding:24px; gap:24px; font-family:"Barlow",sans-serif; }
[data-slot="dialog-title"] { font:400 28px/1.2 "Denton Condensed",Georgia,serif; }
[data-slot="dialog-description"] { color:var(--rf-grey-500); font-size:15px; }
.skill-details { border-top:1px solid var(--rf-grey-200); margin-top:32px; padding-top:8px; max-width:800px; }
.skill-details section { padding:16px 0; }
.skill-details p,.skill-details li { font-size:16px; line-height:1.65; overflow-wrap:anywhere; }
.skill-details ul { padding-left:20px; list-style:disc; }
.skill-details details { border-bottom:1px solid var(--rf-grey-200); padding:16px 0; }
.skill-details summary { cursor:pointer; font-weight:500; font-size:16px; }
.skill-details summary:focus-visible { outline:2px solid var(--rf-blue); outline-offset:4px; }
.skill-details details p { margin-top:12px; }
.engine-guide>.download-link { margin:0 12px 16px 0; }
.detail-media { background:var(--rf-grey-50); }
.detail-media img,.detail-media video { max-height:60vh; max-width:100%; margin:auto; object-fit:contain; }
.detail-actions { display:flex; flex-wrap:wrap; gap:8px; }
.rf-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 16px; border:1px solid transparent; border-radius:8px; background:var(--rf-yellow); color:var(--foreground); font:500 15px/20px "Barlow",Arial,sans-serif; transition:background .15s,color .15s; }
.rf-button svg { width:20px; height:20px; flex-shrink:0; }
.rf-button:hover { background:var(--foreground); color:white; }
.rf-button[data-variant="outline"] { border-color:var(--foreground); background:transparent; }
.rf-button[data-variant="outline"]:hover { background:var(--foreground); color:var(--rf-white); }
.rf-button[data-size="sm"] { min-height:32px; padding-block:4px; font-size:14px; }
.rf-button:disabled { opacity:.5; pointer-events:none; }
[data-sidebar="trigger"] { width:40px; height:40px; background:white; color:var(--foreground); border:0; box-shadow:none; }
.topbar [data-sidebar="trigger"] { display:none; }
[data-slot="sidebar"][data-state="collapsed"] ~ [data-slot="sidebar-inset"] .topbar [data-sidebar="trigger"] { display:inline-flex; }
@media(max-width:1023px) { .surface-name { display:none; } .skill-grid { grid-template-columns:1fr; } .skill-art { height:56px; } .guide-columns { grid-template-columns:1fr; gap:8px; } }
@media(max-width:767px) { .topbar { height:64px; } .topbar [data-sidebar="trigger"] { display:inline-flex; } .surface-title { font-size:26px; } .workspace-main { padding:16px; } .page-heading { align-items:flex-start; flex-direction:column; gap:16px; } h1 { font-size:26px; } .asset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .tips-list article { gap:16px; } .private-pill { display:none; } .login-brand { gap:16px; } .login-brand>span:last-child { padding-left:16px; } }
@media(max-width:767px) {
  .asset-topbar { padding:8px 12px; gap:8px; }
  .asset-topbar>button:last-child { margin-left:auto; }
  .asset-type-tabs { gap:20px; scrollbar-width:none; }
  .asset-content { padding:12px; }
  .asset-tools { gap:10px; }
  .asset-search { width:100%; order:4; }
  .asset-tools select { max-width:145px; }
  .hide-unusable { font-size:13px; margin-left:auto; }
  .brand-asset-row { gap:10px; scroll-snap-type:x proximity; }
  .brand-asset-row .engine-asset-card { flex-basis:210px; scroll-snap-align:start; }
  .engine-assets-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  [data-slot="dialog-content"].engine-viewer { display:block; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; overflow-y:auto; }
  .engine-viewer-media { height:48dvh; min-height:240px; }
  .engine-viewer-details { padding:20px 16px 32px; overflow:visible; }
  .engine-viewer>[data-slot="dialog-close"] { color:var(--foreground); background:white; opacity:1; width:36px; height:36px; display:grid; place-items:center; z-index:2; }
  .asset-quick-actions button,.asset-quick-actions>a.rf-button { width:44px; min-width:44px; height:44px; }
  .viewer-navigation { inset-inline:8px; }
  .engine-toast { right:16px; bottom:16px; }
  .login-page { padding:32px 20px; }
  .asset-detail-form input,.asset-detail-form textarea,.login-form input { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

/* Keep library controls outside the scrolling asset pane. */
.asset-workspace { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.asset-controls { flex:none; background:white; border-bottom:1px solid var(--border); z-index:10; }
.asset-controls-secondary { padding:12px 24px 0; }
.asset-controls .asset-tools { margin-bottom:16px; }
.asset-controls .manual-banner { margin-bottom:12px; }
.asset-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.asset-content:focus-visible { outline:2px solid var(--rf-blue); outline-offset:-2px; }
[data-slot="dialog-overlay"] { background:rgb(22 23 9 / 55%); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.asset-badge { display:inline-flex; align-items:center; gap:5px; width:fit-content; max-width:100%; padding:4px 7px; border-radius:4px; background:var(--rf-grey-100); color:var(--rf-grey-600); font:500 12px/1.4 "Barlow",sans-serif; white-space:normal; }
.asset-badge svg { flex:none; }
.asset-badge.error-badge { background:#B9313B; color:white; }
.engine-asset-card { position:relative; }
.asset-card-status { position:absolute; left:10px; top:10px; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:5px; max-width:calc(100% - 54px); text-align:left; }
.asset-more-button { position:absolute; right:10px; top:10px; z-index:2; display:grid; place-items:center; width:32px; height:32px; border-radius:6px; background:rgb(22 23 9 / 80%); color:white; opacity:0; transition:opacity .15s; }
.engine-asset-card:hover .asset-more-button,.engine-asset-card:focus-within .asset-more-button,.asset-more-button[data-state="open"] { opacity:1; }
.asset-more-button:hover { background:white; color:var(--foreground); }
.engine-asset-card:focus-within .asset-hover-details { opacity:1; }
.asset-hover-details { justify-content:flex-end; padding:56px 16px 16px; gap:8px; }
.asset-hover-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.asset-hover-badges .asset-badge { background:rgb(255 255 255 / 16%); color:white; font-size:12px; }
.asset-hover-badges time { font-size:12px; }
.asset-more-menu { z-index:110; min-width:210px; background:white; color:var(--foreground); padding:6px; border-radius:8px; box-shadow:0 8px 32px #0003; }
.asset-more-menu [data-slot="dropdown-menu-item"] { min-height:38px; padding:8px 10px; font:400 14px/1.5 "Barlow",sans-serif; cursor:pointer; }
.asset-more-menu [data-slot="dropdown-menu-item"]:focus { background:var(--rf-grey-100); }
.asset-more-menu .menu-flagged { color:#B9313B; }
[data-slot="tooltip-content"].asset-action-tooltip { z-index:120; background:white; color:var(--foreground); font:400 14px/1.5 "Barlow",sans-serif; box-shadow:0 2px 16px #0003; }
.asset-action-tooltip svg { background:white; fill:white; }
[data-slot="dialog-content"].engine-viewer { width:94vw; max-width:1320px; height:88dvh; max-height:920px; grid-template-columns:minmax(0,1fr) 380px; border:1px solid #ffffff26; background:#161709; }
.engine-viewer-details { display:flex; flex-direction:column; min-height:0; padding:0; overflow:hidden; color:#fff; background:#161709; }
.viewer-detail-scroll { flex:1; min-height:0; overflow-y:auto; padding:44px 24px 20px; }
.preview-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px; }
.preview-title h2 { font:400 28px/1.2 "Denton Condensed",Georgia,serif; overflow-wrap:anywhere; }
.preview-title .asset-badge { flex-shrink:0; }
.asset-author { display:flex; align-items:center; gap:12px; margin:16px 0 20px; }
.author-avatar { flex-shrink:0; display:grid; place-items:center; width:48px; height:48px; border-radius:6px; color:#161709; font-size:20px; font-weight:500; }
.asset-author>div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.asset-author strong { font-size:15px; font-weight:500; }
.asset-author span:not(.author-avatar),.asset-author time { color:#B9B9B1; font-size:12px; overflow-wrap:anywhere; }
.preview-metadata-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.edit-comparison { position:relative; width:100%; height:100%; overflow:hidden; background:#101010; }
.edit-comparison img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.edit-comparison .edit-before { background:#101010; }
.edit-comparison input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.edit-comparison:focus-within { outline:2px solid var(--rf-yellow-100); outline-offset:-2px; }
.comparison-label { position:absolute; top:16px; padding:5px 8px; background:#161709dd; color:white; border-radius:4px; font-size:13px; pointer-events:none; }
.comparison-label.before { left:16px; }.comparison-label.after { right:16px; }
.comparison-divider { position:absolute; top:0; bottom:0; width:2px; background:white; pointer-events:none; }
.comparison-divider>span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; color:#161709; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; }
.comparison-message { position:absolute; inset:0; display:grid; place-items:center; background:#101010ee; color:white; }
.original-upload { display:grid; gap:8px; margin:16px 0; font-size:14px; }
.original-upload input { max-width:100%; font-size:13px; }
.engine-viewer-details .asset-badge:not(.error-badge) { background:#ffffff18; color:#E8E8E3; }
.engine-viewer-details .asset-quick-actions { padding-bottom:20px; border-bottom:1px solid #ffffff26; margin:0 0 20px; gap:8px; }
.engine-viewer-details .asset-quick-actions .rf-button { background:transparent; color:white; border:0; width:40px; min-width:40px; height:40px; border-radius:6px; }
.engine-viewer-details .asset-quick-actions .rf-button:hover { background:#ffffff20; }
.engine-viewer-details .asset-quick-actions .approval-flag.active { background:#B9313B; }
.engine-viewer-details .asset-layout-controls button { border-color:#ffffff40; color:white; }
.engine-viewer-details .asset-layout-controls button[aria-pressed="true"] { background:#ffffff18; }
.engine-viewer-details .asset-layout-controls button:hover { background:#ffffff20; }
.manual-review-actions { display:flex; gap:8px; margin:16px 0; }
.edit-source-images { margin:20px 0; }
.edit-source-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }
.edit-source-grid a { display:flex; flex-direction:column; gap:4px; min-width:0; }
.edit-source-grid img { width:100%; aspect-ratio:1; object-fit:contain; background:#ffffff12; border-radius:4px; }
.edit-source-grid small { color:#CDCDC8; }
.manual-review-actions .rf-button:not(.yellow) { border-color:#C2353F; color:#fff; background:#87252C; }
.asset-readonly { display:grid; gap:0; margin-top:20px; }
.asset-readonly>div { display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid #ffffff18; }
.asset-readonly dt { color:#B9B9B1; font-size:13px; }
.asset-readonly dd { margin:0; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.asset-readonly>div.preview-prompt { display:block; border-bottom:0; }
.preview-prompt dd { margin-top:10px; white-space:pre-wrap; }
.viewer-fixed-footer { flex-shrink:0; border-top:1px solid #ffffff26; padding:16px 24px; background:#161709; }
.viewer-fixed-footer .download-link,.viewer-fixed-footer .rf-button { width:100%; min-height:44px; }
.engine-viewer>[data-slot="dialog-close"] { color:white; background:#ffffff18; width:32px; height:32px; display:grid; place-items:center; opacity:1; }
.nav-coming { margin-left:auto; font-size:11px; color:var(--rf-grey-500); }
.skill-topbar { border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; flex-wrap:wrap; height:auto; min-height:72px; padding-block:12px; }
.skill-topbar-title { min-width:0; display:flex; align-items:center; gap:12px; flex:1; }
.skill-topbar-title .surface-title { font-size:28px; overflow-wrap:anywhere; }
.skill-back.rf-button { border:0; min-width:40px; width:40px; padding:8px; background:transparent; }
.skill-back.rf-button:hover { background:var(--rf-grey-100); color:var(--foreground); }
.skill-heading-download { flex-shrink:0; }
.skill-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-block:24px; }
.skill-card { background:white; }
.skill-art { height:auto; padding:20px 20px 0; gap:12px; }
.skill-icon { width:40px; height:40px; border-radius:6px; display:grid; place-items:center; background:var(--rf-yellow-100); }
.skill-copy { padding:0 20px 20px; }
.skill-copy h2 { font-size:27px; margin:20px 0 12px; }
.skill-coming-soon { background:var(--rf-grey-100); border-color:var(--rf-grey-200); color:var(--rf-grey-500); }
.skill-coming-soon .skill-icon { background:var(--rf-grey-200); }
.skill-coming-soon .skill-copy p { color:var(--rf-grey-500); }
.skill-coming-soon .skill-actions button { background:var(--rf-grey-200); color:var(--rf-grey-500); border-color:var(--rf-grey-300); opacity:1; cursor:not-allowed; }
.skill-download-note { margin:8px 0 24px; color:var(--rf-grey-500); font-size:14px; line-height:1.6; max-width:800px; }
.skill-guide { padding:24px 8px; max-width:1120px; }
.skill-guide .guide-intro { margin:0 0 32px; line-height:1.7; max-width:860px; }
.skill-guide section { margin-bottom:32px; }
.workflow-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.workflow-cards li { margin:0!important; }
.workflow-step-title { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.workflow-step-title h4,.guide-use h4 { font-size:16px; font-weight:500; color:var(--foreground); }
.workflow-cards p { font-size:15px; line-height:1.6; }
.guide-use { border-top:1px solid var(--border); padding-top:28px; }
.guide-use ol { max-width:820px; }
.guide-support { max-width:820px; font-size:15px; line-height:1.7; color:var(--rf-grey-600); margin-bottom:24px; }
.guide-use h4 { margin-bottom:12px; }
.guide-use blockquote { max-width:860px; }
.guide-examples { border-top:1px solid var(--border); padding-top:28px; }
.guide-examples>.muted { margin-bottom:16px; }
.skill-example-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.skill-example { display:flex; flex-direction:column; gap:8px; text-align:left; min-width:0; }
.skill-example-media { position:relative; aspect-ratio:4/5; background:var(--rf-grey-100); width:100%; overflow:hidden; border-radius:8px; }
.skill-example-media img,.skill-example-media video { width:100%; height:100%; object-fit:contain; }
.skill-example strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
[data-slot="dialog-content"].skill-example-dialog { width:90vw; max-width:1000px; max-height:92dvh; overflow-y:auto; }
.skill-example-full { width:100%; height:60dvh; background:#161709; }
.skill-example-full img,.skill-example-full video { width:100%; height:100%; object-fit:contain; }
.skill-example-full iframe { width:100%; height:100%; border:0; background:white; }
.example-links { display:flex; gap:8px; flex-wrap:wrap; }
.engine-coming-soon { min-height:60dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--rf-grey-500); }
@media(max-width:1100px) { .skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) {
 .asset-controls-secondary { padding:12px 12px 0; }
 .asset-controls .asset-tools { margin-bottom:12px; }
 .asset-controls .manual-banner { font-size:12px; padding:8px 10px; }
 .asset-more-button { opacity:1; width:36px; height:36px; }
 [data-slot="dialog-content"].engine-viewer { display:grid; grid-template-columns:1fr; grid-template-rows:44dvh minmax(0,1fr); width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; overflow:hidden; border-radius:0; }
 .engine-viewer-media { height:auto; min-height:0; }
 .engine-viewer-details { padding:0; overflow:hidden; }
 .viewer-detail-scroll { padding:20px 16px; }
 .viewer-fixed-footer { padding:12px 16px; }
 .engine-viewer>[data-slot="dialog-close"] { background:#161709b3; color:white; width:36px; height:36px; }
 .preview-title { flex-wrap:wrap; }
 .skill-grid,.workflow-cards { grid-template-columns:1fr; }
 .skill-topbar-title .surface-title { font-size:24px; }
 .skill-heading-download { margin-left:auto; }
 .skill-heading-download span { display:none; }
 .skill-heading-download { width:40px; min-width:40px; padding:8px; }
 .skill-guide { padding:16px 0; }
 .skill-example-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .skill-example-full { height:48dvh; }
}