/* Loriginary v4.0 UX24 - grouped navigation, compact references, expanded QA/Card Forge */
:root{--ux24-menu-bg:rgba(4,17,28,.985);--ux24-menu-line:rgba(74,181,240,.34);--ux24-menu-accent:#49bbf4}

/* ---- grouped primary navigation ---- */
.ux24-primary-nav{display:flex;align-items:stretch;gap:2px;min-height:38px;padding:0 6px;overflow:visible!important;white-space:normal!important;z-index:1400}
.ux24-primary-nav>.nav-btn,.ux24-nav-menu>summary.nav-btn{font-family:inherit!important;font-size:10px!important;font-weight:700!important;letter-spacing:.035em!important;line-height:1.1!important;text-transform:uppercase!important;min-width:0!important;width:auto!important;max-width:none!important;min-height:38px!important;height:auto!important;padding:7px 10px!important;display:flex!important;align-items:center;justify-content:center;text-align:center;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;border-radius:0}
.ux24-nav-menu{position:relative;flex:0 0 auto;margin:0;padding:0}
.ux24-nav-menu>summary{list-style:none;cursor:pointer;user-select:none}
.ux24-nav-menu>summary::-webkit-details-marker{display:none}
.ux24-nav-menu[open]>summary,.ux24-nav-menu.contains-active>summary{background:linear-gradient(180deg,#0e6799,#074a72)!important;color:#fff!important;box-shadow:inset 0 -2px 0 #5dd1ff}
.ux24-nav-dropdown{position:absolute;left:0;top:calc(100% + 1px);width:min(360px,calc(100vw - 20px));max-height:min(74vh,650px);overflow:auto;padding:10px;background:var(--ux24-menu-bg);border:1px solid var(--ux24-menu-line);border-radius:0 0 10px 10px;box-shadow:0 18px 42px rgba(0,0,0,.54);z-index:5000;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ux24-nav-dropdown-wide{width:min(620px,calc(100vw - 20px));grid-template-columns:1fr}
.ux24-nav-dropdown button,.ux24-nav-dropdown a{appearance:none;box-sizing:border-box;width:100%;min-width:0;min-height:34px;padding:7px 9px;border:1px solid rgba(79,167,215,.22);border-radius:6px;background:rgba(13,42,61,.72);color:#dceaf2;font:700 9px/1.2 inherit;letter-spacing:.025em;text-transform:uppercase;text-decoration:none;text-align:left;white-space:normal;overflow-wrap:anywhere;display:flex;align-items:center}
.ux24-nav-dropdown button:hover,.ux24-nav-dropdown a:hover,.ux24-nav-dropdown button:focus-visible,.ux24-nav-dropdown a:focus-visible{background:#0c5c88;border-color:#5dccff;color:#fff;outline:none}
.ux24-menu-section{display:flex;gap:6px;align-items:center;padding:0 0 7px;border-bottom:1px solid rgba(97,174,217,.18)}
.ux24-menu-section strong{flex:1;color:#7ad7ff;font-size:9px;letter-spacing:.09em;text-transform:uppercase}.ux24-menu-section button{width:auto;flex:0 1 auto}
.ux24-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ux24-menu-grid button{justify-content:center;text-align:center}
.ux24-realm-menu{width:min(480px,calc(100vw - 20px));grid-template-columns:1fr}.realm-grid-menu{grid-template-columns:repeat(3,minmax(0,1fr))}
.ux24-help-menu .ux24-nav-dropdown{right:0;left:auto}
@media(max-width:1080px){.ux24-primary-nav>.nav-btn,.ux24-nav-menu>summary.nav-btn{font-size:9px!important;padding-inline:7px!important}.ux24-nav-dropdown-wide{width:min(560px,calc(100vw - 14px))}}
@media(max-width:760px){.ux24-primary-nav{overflow-x:auto!important;overflow-y:visible!important;scrollbar-width:thin}.ux24-primary-nav>.nav-btn,.ux24-nav-menu>summary.nav-btn{min-width:max-content!important}.ux24-nav-dropdown{position:fixed;left:8px!important;right:8px!important;top:calc(var(--site-header-h,60px) + var(--nav-h,40px));width:auto!important;max-height:65vh}.ux24-menu-grid,.realm-grid-menu{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- three-column workspaces: true independent scrolling ---- */
@media(min-width:900px){
  .creator-layout,.workspace-layout,.prompt-layout,.studio-layout{min-height:0!important}
  .creator-sidebar,.workspace-sidebar,.prompt-sidebar,.creator-aside,.completion-rail,.right-rail,.left-rail{max-height:calc(100vh - var(--site-header-h,60px) - var(--nav-h,40px) - 12px)!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable}
  .creator-main,.workspace-main,.prompt-main,.studio-main{min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain}
}

/* ---- Reference Images: compact, readable, open-on-image ---- */
.v4ux24-ui .media-grid{gap:7px!important;grid-template-columns:repeat(auto-fill,minmax(125px,1fr))!important}
.v4ux24-ui .media-card{min-width:0!important;border-radius:8px!important}
.v4ux24-ui .media-card-preview{height:108px!important;min-height:108px!important;aspect-ratio:auto!important;cursor:pointer;overflow:hidden}
.v4ux24-ui .media-card-preview img{width:100%;height:100%;object-fit:contain!important}
.v4ux24-ui .media-card-body{padding:7px!important;gap:4px!important}
.v4ux24-ui .media-card-body h4,.v4ux24-ui .media-card h4{font-size:9.5px!important;line-height:1.14!important;margin:0!important;overflow-wrap:anywhere}
.v4ux24-ui .media-card-body p,.v4ux24-ui .media-card p,.v4ux24-ui .media-meta{font-size:7.5px!important;line-height:1.25!important;margin:0!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v4ux24-ui .media-card-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important;padding:0!important}
.v4ux24-ui .media-card-actions button,.v4ux24-ui .media-card-actions label{min-width:0!important;width:100%!important;min-height:28px!important;height:auto!important;padding:4px 3px!important;font-size:7.7px!important;line-height:1.05!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;justify-content:center!important}
.v4ux24-ui .variant-reference-group .module-heading.compact p{font-size:8px!important;line-height:1.25!important}
.v4ux24-ui .reference-prompt-reminder,.v4ux24-ui .media-storage-note,.v4ux24-ui .media-help-card p{font-size:8.5px!important;line-height:1.3!important}
.v4ux24-ui .gallery-cover-preview{max-height:220px!important}.v4ux24-ui .gallery-cover-preview img{max-height:220px!important;object-fit:contain!important}

/* Prompt Studio reference thumbnails */
.v4ux24-ui .prompt-reference-grid,.v4ux24-ui .reference-pack-grid{gap:6px!important}
.v4ux24-ui .prompt-reference-card img,.v4ux24-ui .prompt-reference-thumb img{max-height:120px!important;object-fit:contain!important}
.v4ux24-ui .prompt-reference-card button,.v4ux24-ui .prompt-reference-controls button{white-space:normal!important;overflow-wrap:anywhere;font-size:8px!important;line-height:1.12!important}

/* ---- Autonomous QA ---- */
.ux24-alpha-panel{border-color:rgba(80,205,255,.36)!important;background:linear-gradient(180deg,rgba(5,28,43,.92),rgba(3,15,25,.96))!important}
.ux24-alpha-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:12px 0}.ux24-alpha-controls label{display:grid;gap:5px;font-size:9px}.ux24-alpha-actions{display:flex;flex-wrap:wrap;gap:8px}.ux24-alpha-meter{height:8px;border-radius:99px;background:#061019;overflow:hidden;margin:12px 0}.ux24-alpha-meter span{display:block;width:0;height:100%;background:linear-gradient(90deg,#168bc4,#5fe1ff);transition:width .18s ease}.ux24-alpha-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.ux24-alpha-metrics article{padding:10px;border:1px solid rgba(89,184,230,.2);border-radius:8px;background:rgba(4,20,31,.75);display:grid;gap:2px}.ux24-alpha-metrics strong{font-size:20px;color:#73d8ff}.ux24-alpha-metrics span{font-size:8px;letter-spacing:.08em}.ux24-alpha-results{max-height:420px;overflow:auto}.ux24-qa-line{display:grid;grid-template-columns:76px 1fr auto;gap:8px;padding:7px;border-bottom:1px solid rgba(255,255,255,.06);font-size:9px}.ux24-qa-pass{color:#78e6a1}.ux24-qa-fail{color:#ff8686}.ux24-qa-warn{color:#f1cc70}.ux24-runner-grid{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:14px}.ux24-runner-grid code{padding:14px;background:#030a10;border:1px solid rgba(90,193,238,.2);white-space:pre-wrap}
@media(max-width:850px){.ux24-alpha-controls,.ux24-alpha-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ux24-runner-grid{grid-template-columns:1fr}}

/* ---- Card Forge UX24 showroom ---- */
.ux24-card-forge-shell{display:grid;gap:14px}.ux24-card-progress{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;position:sticky;top:calc(var(--site-header-h,60px) + var(--nav-h,40px) + 6px);z-index:8;background:rgba(2,12,20,.94);padding:7px;border:1px solid rgba(73,183,234,.2);border-radius:9px}.ux24-card-progress button{min-height:34px;padding:5px;font:800 7.7px/1.1 inherit;white-space:normal}.ux24-card-progress button.active{background:#086392;color:#fff;border-color:#6bd8ff}.ux24-card-hero{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);gap:14px}.ux24-card-stage{border:1px solid rgba(87,190,238,.28);border-radius:12px;padding:14px;background:radial-gradient(circle at 50% 28%,rgba(27,104,148,.28),rgba(2,11,19,.95) 66%);min-height:560px;display:grid;place-items:center}.ux24-card-stage .compact-card-preview{width:min(330px,100%);transition:transform .45s;transform-style:preserve-3d}.ux24-card-stage.is-back .ux24-card-front-proof{display:none}.ux24-card-stage:not(.is-back) .ux24-card-back-proof{display:none}.ux24-card-workbench{display:grid;gap:10px}.ux24-card-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ux24-card-data-grid label{min-width:0}.ux24-card-template-grid,.ux24-card-variant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:7px}.ux24-card-template-tile,.ux24-card-variant-tile{padding:8px;border:1px solid rgba(89,183,228,.22);background:rgba(7,29,43,.72);border-radius:8px;text-align:left}.ux24-card-template-tile.active,.ux24-card-variant-tile.active{border-color:#62d6ff;box-shadow:0 0 0 1px #158abe inset}.ux24-card-finish-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ux24-card-planned{opacity:.5;cursor:not-allowed}.ux24-card-empty{padding:40px 20px;text-align:center;border:1px dashed rgba(90,191,238,.32);border-radius:12px;background:rgba(4,18,28,.7)}.ux24-card-empty h3{margin:.3rem 0}.ux24-card-empty-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px}.ux24-collection-binder{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:12px;border-radius:12px;background:repeating-linear-gradient(90deg,rgba(7,24,35,.92) 0,rgba(7,24,35,.92) 32%,rgba(20,48,62,.8) 32.2%,rgba(7,24,35,.92) 33%)}
@media(max-width:980px){.ux24-card-hero{grid-template-columns:1fr}.ux24-card-progress{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.ux24-card-data-grid,.ux24-card-finish-grid{grid-template-columns:1fr}.ux24-card-progress{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* UX24 final reference-density pass: preserve functionality without letting labels eat the page. */
.v4ux24-ui .media-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))!important}
.v4ux24-ui .media-card-preview{height:96px!important;min-height:96px!important}
.v4ux24-ui .media-card-body{padding:5px!important;gap:3px!important}
.v4ux24-ui .media-card-body h4{font-size:8.6px!important;line-height:1.08!important;min-height:18px}
.v4ux24-ui .media-card-hint{font-size:6.7px!important;line-height:1.15!important;-webkit-line-clamp:2!important;opacity:.78}
.v4ux24-ui .media-file-name{font-size:6.7px!important;line-height:1.12!important;white-space:normal!important;overflow-wrap:anywhere;max-height:25px;overflow:hidden}
.v4ux24-ui .media-file-name small{display:none!important}
.v4ux24-ui .media-card-actions{gap:3px!important}
.v4ux24-ui .media-card-actions button,.v4ux24-ui .media-card-actions label{min-height:24px!important;padding:3px 2px!important;font-size:7px!important;line-height:1!important}

/* Card finish simulation stays visual-only and never changes source character art. */
.ux24-card-stage{position:relative;overflow:hidden}
.ux24-card-stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity .2s;background:linear-gradient(115deg,transparent 15%,rgba(104,225,255,.16) 32%,rgba(255,222,118,.12) 45%,rgba(184,116,255,.17) 57%,transparent 78%);background-size:220% 220%}
.ux24-card-stage[data-finish="foil"]::after{opacity:.72;animation:ux24FoilSweep 5s linear infinite}
.ux24-card-stage[data-finish="holo"]::after{opacity:.92;background:conic-gradient(from 35deg at 50% 46%,rgba(57,236,255,.18),rgba(180,99,255,.2),rgba(255,220,92,.18),rgba(76,255,173,.16),rgba(57,236,255,.18));animation:ux24HoloPulse 4.5s ease-in-out infinite alternate}
.ux24-card-stage[data-finish="etched"]::after{opacity:.62;background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 1px,transparent 1px 7px),radial-gradient(circle at 50% 25%,rgba(235,216,155,.14),transparent 62%)}
.ux24-active-variant{padding:7px 9px;border:1px solid rgba(97,207,255,.22);border-radius:7px;background:rgba(8,37,54,.55);font-size:8px;letter-spacing:.04em;text-transform:uppercase}.ux24-active-variant strong{color:#8fe4ff}
@keyframes ux24FoilSweep{0%{background-position:180% 0}100%{background-position:-120% 100%}}
@keyframes ux24HoloPulse{0%{filter:hue-rotate(0deg);transform:scale(1)}100%{filter:hue-rotate(55deg);transform:scale(1.015)}}

/* UX35.2 nav readability: keep desktop labels on one line where space exists. */
@media(min-width:980px){
  .ux24-primary-nav>.nav-btn,.ux24-nav-menu>summary.nav-btn{white-space:nowrap!important;line-height:1!important;font-size:10.1px!important;padding:7px 9px!important}
}