/* =====================================================================================================================
   DashTurbo  -  custom AI designs (js/designs.js)

   ON A DASHBOARD   .dash[data-design] carries a stage behind everything (the painted scene or the member's photo,
                    sprites, a foreground strip), a banner behind the title, and ornaments on the panels, all given as
                    CSS variables holding data: URIs of sanitised SVG. The panels become glass at the design's own
                    opacity and blur, so the world shows through without the charts ever being hard to read.

   THE STUDIO       .dzs: five concept cards with a sketch each, the options for the chosen one, and a promo for
                    plans without designs. It lives in a modal and inline in the build wizard, in the site's own theme.
   ===================================================================================================================== */


/* ---- The stage ----------------------------------------------------------------------------------------------------- */

.dash[data-design] { isolation: isolate; padding-top: 34px; }
@media (min-width: 1100px) { .dash[data-design] { padding-left: 36px; padding-right: 36px; } }
.dz-stage { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; border-radius: inherit; }
.dz-view { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; }
.dz-scene, .dz-photo, .dz-tint, .dz-sheen { position: absolute; inset: 0; width: 100%; height: 100%; }
.dz-scene { object-fit: cover; object-position: 50% 50%; display: block; }
.dz-photo { background-size: cover; background-position: center; }
.dz-tint[data-tint="dark"] { background: linear-gradient(180deg, rgba(5, 9, 20, 0.52), rgba(5, 9, 20, 0.68)); }
.dz-tint[data-tint="light"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.7)); }
.dz-tint[data-tint="brand"] { background: linear-gradient(160deg, color-mix(in srgb, var(--d-accent) 55%, rgba(0, 0, 0, 0.35)), color-mix(in srgb, var(--d-accent) 30%, rgba(0, 0, 0, 0.55))); }
.dz-sheen { background: radial-gradient(900px 520px at 10% 0%, color-mix(in srgb, var(--d-accent) 22%, transparent), transparent 60%), radial-gradient(800px 500px at 100% 100%, color-mix(in srgb, var(--d-accent) 14%, transparent), transparent 60%); }
.dash[data-design="painting"] .dz-sheen { animation: dz-breathe 6s ease-in-out infinite alternate; }
@keyframes dz-breathe { from { opacity: 0.55; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }

.dz-fore { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(110px, 24vh, 250px); object-fit: cover; object-position: 50% 100%; display: block; }
.dz-layer { position: absolute; inset: 0; }

/* Sprites. Each travels in a lane the width (or height) of the screen plus its own size, so it enters and leaves
   fully out of sight; the lane moves by transform only, which the compositor handles without layout. */
.dz-sp { position: absolute; }
.dz-img { display: block; width: var(--size); height: auto; opacity: var(--op, 0.9); user-select: none; -webkit-user-drag: none; }
.dz-sp.far .dz-img { filter: blur(1.1px) saturate(0.85); }

.dz-h { left: calc(-1 * var(--size)); width: calc(100% + var(--size)); height: 0; animation: dz-h var(--dur) linear var(--delay) infinite; will-change: transform; }
.dz-h.rev { animation-direction: reverse; }
.dz-h .dz-bob { position: absolute; left: 0; top: 0; animation: dz-bob var(--bd) ease-in-out var(--bdl) infinite alternate; }
.dz-h .dz-img { transform: translateY(-50%); }
.dz-h .dz-img.flip { transform: translateY(-50%) scaleX(-1); }
@keyframes dz-h { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes dz-bob { from { transform: translateY(calc(var(--amp) * -1)) rotate(calc(var(--tilt) * -1)); } to { transform: translateY(var(--amp)) rotate(var(--tilt)); } }

.dz-v { top: calc(-1 * var(--size)); height: calc(100% + var(--size)); width: var(--size); margin-left: calc(var(--size) / -2); animation: dz-rise var(--dur) linear var(--delay) infinite; will-change: transform, opacity; }
.dz-v.fall { animation-name: dz-fall; }
.dz-v .dz-wob { animation: dz-wob var(--bd) ease-in-out var(--bdl) infinite alternate; }
@keyframes dz-rise { 0% { transform: translate3d(0, 100%, 0); opacity: 0; } 10% { opacity: 1; } 72% { opacity: 1; } 100% { transform: translate3d(0, 0, 0); opacity: 0; } }
@keyframes dz-fall { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translate3d(0, 100%, 0); opacity: 0; } }
@keyframes dz-wob { from { transform: translateX(calc(var(--amp) * -1)) rotate(calc(var(--tilt) * -1)); } to { transform: translateX(var(--amp)) rotate(var(--tilt)); } }

.dz-fix { width: var(--size); margin-left: calc(var(--size) / -2); margin-top: calc(var(--size) / -2); }
.dz-fix .dz-img { width: 100%; }
.dz-f-sway { top: auto; bottom: -6px; margin-top: 0; transform-origin: 50% 100%; animation: dz-sway var(--dur) ease-in-out var(--delay) infinite alternate; }
.dz-f-bob { animation: dz-bob var(--dur) ease-in-out var(--delay) infinite alternate; }
.dz-f-twinkle { animation: dz-twinkle var(--dur) ease-in-out var(--delay) infinite alternate; }
.dz-f-spin { animation: dz-spin var(--dur) linear var(--delay) infinite; }
@keyframes dz-sway { from { transform: rotate(calc(var(--tilt) * -1)); } to { transform: rotate(var(--tilt)); } }
@keyframes dz-twinkle { from { opacity: 0.1; transform: scale(0.65); } to { opacity: 1; transform: scale(1); } }
@keyframes dz-spin { to { transform: rotate(360deg); } }

/* Still: a composed picture - every sprite where its seed put it, nothing moving. */
.dz-stage.still .dz-sp, .dz-stage.still .dz-sp * { animation: none !important; }
.dz-stage.still .dz-h { transform: translate3d(var(--sx), 0, 0); }
.dz-stage.still .dz-v { transform: translate3d(0, var(--sy), 0); }
.dz-stage.still .dz-f-twinkle { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
    .dz-stage .dz-sp, .dz-stage .dz-sp * { animation: none !important; }
    .dz-stage .dz-h { transform: translate3d(var(--sx), 0, 0); }
    .dz-stage .dz-v { transform: translate3d(0, var(--sy), 0); }
    .dash.dz-reveal .dz-stage, .dash.dz-reveal .w { animation: none !important; }
}

/* The moment a design finishes painting. */
.dash.dz-reveal .dz-stage { animation: dz-reveal 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.dash.dz-reveal .dash-grid > .w { animation: dz-pop 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.dash.dz-reveal .dash-grid > .w:nth-child(2n) { animation-delay: 0.08s; }
.dash.dz-reveal .dash-grid > .w:nth-child(3n) { animation-delay: 0.16s; }
@keyframes dz-reveal { from { opacity: 0; filter: blur(14px) saturate(0.5); transform: scale(1.05); } to { opacity: 1; filter: none; transform: none; } }
@keyframes dz-pop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }


/* ---- Panels as glass over the world --------------------------------------------------------------------------------- */

.dash[data-design] .w:not(.w-el), .dash[data-design] .dash-insights, .dash[data-design] .df-btn, .dash[data-design] .d-btn:not(.primary):not(.ai),
.dash[data-design] .dash-tabs, .dash[data-design] .dash-foot, .dash[data-design] .el-label:not([data-style="banner"]),
.dash[data-design] .dash-header:not(.dz-banner):not(.has-cover) {
    backdrop-filter: blur(var(--dz-blur, 12px)) saturate(150%); -webkit-backdrop-filter: blur(var(--dz-blur, 12px)) saturate(150%);
}

/* Whatever sits straight on the scene gets a pane of the same glass, so no word is ever set on a busy picture. */
.dash[data-design] .dash-header:not(.dz-banner):not(.has-cover) { background: var(--d-card); border: 1px solid var(--d-card-border); border-radius: var(--d-radius); padding: 20px 22px; box-shadow: var(--d-card-shadow); position: relative; z-index: 5; }
.dash[data-design] .dash-tabs { background: var(--d-card); border: 1px solid var(--d-card-border); border-radius: min(var(--d-radius), 14px); padding: 0 6px; }
.dash[data-design] .dash-foot { background: var(--d-card); border: 1px solid var(--d-card-border); border-radius: var(--d-radius); padding: 12px 16px; align-items: center; }
.dash[data-design] .el-label:not([data-style="banner"]):not([data-style="callout"]) { background: var(--d-card); border-radius: var(--d-radius); padding: 12px 16px; border: 1px solid var(--d-card-border); }
.dash[data-design] .el-label[data-style="section"] { border-bottom: 1px solid var(--d-card-border); }
.dash[data-design] .dash-active .x-chip { background: var(--d-card); border: 1px solid var(--d-card-border); }
.dash[data-design] .w-note { color: var(--d-ink-2); }

.dash[data-dz-orn="on"] .w:not(.w-el), .dash[data-dz-orn="on"] .dash-insights { background-image: var(--dz-texture, none); background-size: 160px 160px; }

.dash[data-dz-glow="on"] .w:not(.w-el):hover {
    transform: translateY(-2px);
    box-shadow: var(--d-card-shadow), 0 0 0 1px color-mix(in srgb, var(--d-accent) 50%, transparent), 0 20px 50px -20px color-mix(in srgb, var(--d-accent) 65%, transparent);
}

/* Corner ornaments, on chart panels. */
.dash[data-dz-orn="on"][data-dz-has~="corner"] .w:not(.w-el):not(.w-kpi)::after {
    content: ''; position: absolute; top: -12px; right: -12px; width: 66px; height: 66px; z-index: 3; pointer-events: none;
    background: var(--dz-corner) top right / contain no-repeat; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.16));
}
.dash[data-dz-orn="on"][data-dz-corner="top-left"] .w:not(.w-el):not(.w-kpi)::after { right: auto; left: -12px; transform: scaleX(-1); }
.dash[data-dz-orn="on"][data-dz-corner="bottom-right"] .w:not(.w-el):not(.w-kpi)::after { top: auto; bottom: -12px; transform: scaleY(-1); }
.dash[data-dz-corner="none"] .w:not(.w-el)::after { display: none; }

/* KPI cards: the larger motif as a watermark, under the figures. */
.dash[data-dz-orn="on"][data-dz-has~="kpiArt"] .w.w-kpi::after {
    content: ''; position: absolute; right: 4px; bottom: 2px; width: min(96px, 38%); aspect-ratio: 1; z-index: 0; pointer-events: none;
    background: var(--dz-kpi) center / contain no-repeat;
}
.dash[data-design] .w.w-kpi .w-head, .dash[data-design] .w.w-kpi .w-body, .dash[data-design] .w.w-kpi .w-note { position: relative; z-index: 1; }

/* An emblem before every chart title. */
.dash[data-dz-orn="on"][data-dz-has~="titleIcon"] .w:not(.w-el) .w-title::before {
    content: ''; display: inline-block; width: 1.2em; height: 1.2em; margin-right: 0.45em; vertical-align: -0.24em;
    background: var(--dz-icon) center / contain no-repeat;
}

/* Divider elements, and a line of the same above the footer. */
.dash[data-dz-orn="on"][data-dz-has~="divider"] .el-divider[data-style="line"] { height: 44px; }
.dash[data-dz-orn="on"][data-dz-has~="divider"] .el-divider[data-style="line"] span { height: 40px; background: var(--dz-divider) center / contain no-repeat; }
.dash[data-dz-orn="on"][data-dz-has~="divider"] .dash-foot::before { content: ''; flex-basis: 100%; height: 30px; margin: -4px 0 4px; background: var(--dz-divider) center / contain no-repeat; }

/* The title banner: the illustration behind the header, with a wash of the panel colour under the words. */
.dash-header.dz-banner { position: relative; isolation: isolate; z-index: 5; min-height: 210px; padding: 28px 30px 24px; margin-bottom: 18px; align-items: flex-end; border-radius: var(--d-radius); border: 1px solid var(--d-card-border); box-shadow: var(--d-card-shadow); }
.dash-header.dz-banner .dash-actions { align-self: flex-start; }
.dz-headart { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; background: var(--dz-card-solid); }
.dz-headimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; display: block; }
.dz-headart::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--dz-card-solid) 94%, transparent) 0%, color-mix(in srgb, var(--dz-card-solid) 76%, transparent) 36%, color-mix(in srgb, var(--dz-card-solid) 10%, transparent) 70%, transparent 100%); }
.dash-header.dz-banner[data-align="center"] .dz-headart::after { background: radial-gradient(70% 90% at 50% 60%, color-mix(in srgb, var(--dz-card-solid) 86%, transparent), color-mix(in srgb, var(--dz-card-solid) 30%, transparent) 75%, transparent); }
.dash-header.dz-banner .d-chip { background: color-mix(in srgb, var(--dz-card-solid) 72%, transparent); }

.dz-flourish { width: min(320px, 72%); height: 26px; margin: 0 0 10px; background: var(--dz-flourish) left center / contain no-repeat; }
.dash-header[data-align="center"] .dz-flourish { background-position: center; margin-left: auto; margin-right: auto; }
.dash[data-design] .dash-title { font-synthesis: none; }


/* ---- While it paints, and the viewer's pause button ---------------------------------------------------------------- */

.dz-pill {
    position: relative; z-index: 4; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border-radius: 16px;
    background: radial-gradient(120% 180% at 0% 0%, rgba(124, 58, 237, 0.55), transparent 55%), linear-gradient(120deg, rgba(14, 16, 34, 0.94), rgba(30, 24, 70, 0.92));
    color: #fff; box-shadow: 0 20px 50px -24px rgba(20, 10, 60, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.dz-pill.failed { background: linear-gradient(120deg, rgba(60, 14, 20, 0.94), rgba(40, 16, 30, 0.92)); }
.dz-pill-orb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; color: #fff; position: relative;
    background: conic-gradient(from 0deg, #A78BFA, #22D3EE, #FBBF24, #F472B6, #A78BFA); animation: dz-orb 3.2s linear infinite; }
.dz-pill-orb::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #17142f; }
.dz-pill-orb i { position: relative; animation: dz-orb 3.2s linear infinite reverse; }
.dz-pill.failed .dz-pill-orb { background: #F87171; animation: none; }
.dz-pill.failed .dz-pill-orb::before { background: #3a1117; }
.dz-pill.failed .dz-pill-orb i { animation: none; }
@keyframes dz-orb { to { transform: rotate(360deg); } }
.dz-pill-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.dz-pill-text strong { font: 700 14px/1.3 var(--d-font); color: #fff; }
.dz-pill-text span { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.dz-pill-meter { width: min(220px, 100%); height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.dz-pill-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #A78BFA, #22D3EE, #FBBF24); background-size: 200% 100%; animation: dz-flow 2.4s linear infinite; transition: width 0.9s ease; }
@keyframes dz-flow { to { background-position: -200% 0; } }
.dz-pill em { font: 600 12px var(--d-font); font-style: normal; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.dz-pill .d-btn { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.2); box-shadow: none; }

.dz-motion { border: 0; cursor: pointer; }
.dz-motion i { font-size: 11px; color: var(--d-accent); }
.dz-motion.floating { position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30; height: 32px; padding: 0 12px; background: var(--d-card); border: 1px solid var(--d-card-border); backdrop-filter: blur(12px); }
.dash[data-editing="true"] .dz-motion { display: none; }
@media (max-width: 700px) {
    .dash-header.dz-banner { min-height: 0; padding: 20px 18px; }
    .dz-headart::after, .dash-header.dz-banner[data-align="center"] .dz-headart::after { background: color-mix(in srgb, var(--dz-card-solid) 84%, transparent); }
    .dash[data-dz-orn="on"][data-dz-has~="corner"] .w:not(.w-el):not(.w-kpi)::after { width: 48px; height: 48px; top: -8px; right: -8px; }
    .dz-pill-meter { width: 100%; }
}

/* A design's owner reaches its settings from the header. */
.d-btn.dz-btn { background: linear-gradient(135deg, color-mix(in srgb, var(--d-accent) 88%, #fff 12%), color-mix(in srgb, var(--d-accent) 70%, #000 30%)); color: #fff; border: 0; }

/* The PNG (render.js dashboardPNG). On screen the world is one screen high and follows the scroll; a picture of the
   whole page has no scroll, so the scene is drawn once across the top at its own proportions, fading into the design's
   canvas, with the foreground along the very bottom and every sprite held where its seed placed it. Nothing is scaled
   to the page's height, and backdrop blur (which the image library cannot draw) gives way to the plain glass colour. */
.dash.png-capture .dz-view { position: absolute; inset: 0; height: auto; }
.dash.png-capture .dz-scene, .dash.png-capture .dz-photo, .dash.png-capture .dz-tint { bottom: auto; height: auto; aspect-ratio: 16 / 10; object-fit: fill;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
.dash.png-capture .dz-fore { height: auto; object-fit: fill; }
.dash.png-capture .dz-sp, .dash.png-capture .dz-sp * { animation: none !important; }
.dash.png-capture .dz-h { transform: translate3d(var(--sx), 0, 0); }
.dash.png-capture .dz-v { transform: translate3d(0, var(--sy), 0); }
.dash.png-capture, .dash.png-capture *, .dash.png-capture .w.w-glass, .dash.png-capture .dash-header.w-glass, .dash.png-capture .dash-insights.w-glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Blur the picture cannot draw is stood in for by a little more of the pane's own colour (render.js glassCss). */
.dash.png-capture .w.w-glass, .dash.png-capture .dash-header.w-glass, .dash.png-capture .dash-insights.w-glass { background-color: var(--w-bg-flat, var(--w-bg)) !important; }

/* Printing: the world stays on screen; paper gets the dashboard. */
@media print {
    .dz-stage, .dz-motion, .dz-pill, .dz-headart, .dz-flourish { display: none !important; }
    .dash[data-design] .w, .dash[data-design] .dash-insights { backdrop-filter: none !important; background-image: none !important; }
    .dash[data-design] .w::after { display: none !important; }
}


/* ---- Picker thumbnails --------------------------------------------------------------------------------------------- */

.mini.dz-mini b { display: none; }
.theme-card .chip.dz-chip { background: linear-gradient(120deg, #A23BEC, #06B6D4); color: #fff; }


/* =====================================================================================================================
   THE STUDIO  (site theme: --card, --ink, --line ...)
   ===================================================================================================================== */

.dzs { display: flex; flex-direction: column; gap: 18px; }
.dz-modal { max-width: 1180px; }

.dzs-hero {
    position: relative; overflow: hidden; isolation: isolate; padding: 24px 26px 20px; border-radius: 20px; color: #fff;
    background: radial-gradient(60% 120% at 100% 0%, rgba(34, 211, 238, 0.35), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(167, 139, 250, 0.45), transparent 60%), linear-gradient(135deg, #0E1024, #1B1745 60%, #0B2A3F);
}
.dzs-hero::before { content: ''; position: absolute; inset: -40%; z-index: -1; background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(251, 191, 36, 0.12), transparent 30%, rgba(34, 211, 238, 0.14), transparent 60%); animation: dz-orb 18s linear infinite; }
.dzs-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: #FBBF24; }
.dzs-hero h3 { font: 700 24px/1.2 var(--display); color: #fff; margin: 10px 0 8px; letter-spacing: -0.02em; }
.dzs-hero p { color: rgba(255, 255, 255, 0.78); font-size: 14.5px; max-width: 780px; }
.dzs-steer { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.dzs-steer .input { flex: 1; min-width: 240px; height: 46px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
.dzs-steer .input::placeholder { color: rgba(255, 255, 255, 0.55); }
.dzs-steer .btn { height: 46px; white-space: nowrap; }
.dzs-allow { margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.dzs-allow:empty { display: none; }
.dzs-allow strong { color: #fff; }

.dzs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dzs-line { grid-column: 1 / -1; text-align: center; color: var(--ink-2); font-size: 14px; }
.dzs-line i { color: var(--accent); margin-right: 6px; }
.dzs-subject { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); margin: 0; }
.dzs-subject i { color: var(--amber); margin-right: 6px; }
.dzs-empty { grid-column: 1 / -1; text-align: center; padding: 36px 20px; color: var(--ink-2); }
.dzs-empty i { font-size: 28px; color: var(--accent); margin-bottom: 10px; }

.dzc { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); cursor: pointer; outline: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; animation: dz-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.dzc:nth-child(2) { animation-delay: 0.06s; } .dzc:nth-child(3) { animation-delay: 0.12s; } .dzc:nth-child(4) { animation-delay: 0.18s; } .dzc:nth-child(5) { animation-delay: 0.24s; }
.dzc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dzc:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.dzc.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.dzc.skeleton { cursor: default; }

.dzc-art { position: relative; height: 196px; overflow: hidden; background: var(--bg-2); }
.dzc-sketch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.8s ease, transform 1.2s ease; }
.dzc-art.has-sketch .dzc-sketch { opacity: 1; transform: none; }
.dzc-art.has-sketch .dzc-mock, .dzc-art.has-sketch .dzc-motif { opacity: 0; }
.dzc-motif { position: absolute; right: -14px; bottom: -18px; font-size: 120px; opacity: 0.35; transition: opacity 0.5s ease; }
.dzc-mock { position: absolute; left: 16px; right: 16px; top: 18px; bottom: 18px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 34px 1fr; gap: 8px; transition: opacity 0.5s ease; }
.dzc-mock b { display: block; border-radius: 8px; border: 1px solid; backdrop-filter: blur(6px); }
.dzc-mock b.wide { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 8%; padding: 10px 14px; }
.dzc-mock b.wide i { flex: 1; border-radius: 3px 3px 0 0; opacity: 0.9; }
.dzs-shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.28) 45%, transparent 70%); background-size: 250% 100%; animation: dz-shine 1.6s linear infinite; opacity: 0; transition: opacity 0.4s ease; }
.dzc-art.sketching .dzs-shimmer, .dzc.skeleton .dzs-shimmer { opacity: 1; }
@keyframes dz-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.dzc-tone { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font: 700 11px/1 var(--font); background: rgba(10, 12, 24, 0.55); color: #fff; backdrop-filter: blur(6px); }
.dzc-check { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 13px; transform: scale(0); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5); }
.dzc.on .dzc-check { transform: scale(1); }

.dzc-body { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.dzc-top { display: flex; gap: 12px; align-items: flex-start; }
.dzc-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex-shrink: 0; font-size: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.dzc-top h4 { font: 700 17px/1.25 var(--display); color: var(--ink); margin: 0 0 3px; letter-spacing: -0.01em; }
.dzc-top p { font-size: 13px; line-height: 1.4; color: var(--ink-2); margin: 0; }
.dzc-mood { display: flex; flex-wrap: wrap; gap: 6px; }
.dzc-mood span { font: 600 11px/1 var(--font); padding: 5px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-transform: capitalize; }
.dzc-spec { display: grid; gap: 8px; margin: 0; }
.dzc-spec > div { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: baseline; }
.dzc-spec dt { font: 700 10.5px/1.4 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.dzc-spec dt i { width: 13px; color: var(--accent); margin-right: 3px; }
.dzc-spec dd { margin: 0; font-size: 13px; line-height: 1.48; color: var(--ink-2); }
.dzc-face { font-size: 15px; font-weight: 700; color: var(--ink); }
.dzc-sprites { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.dzc-sprites span { display: inline-flex; gap: 5px; align-items: center; font: 600 11px/1 var(--font); padding: 4px 7px; border-radius: 6px; background: var(--bg-2); color: var(--ink-2); }
.dzc-sprites i { color: var(--accent); font-size: 10px; }
.dzc-pal { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dzc-pal i { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.dzc-base { display: inline-flex; gap: 3px; padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--line-2); }
.dzc-best { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 0; }
.dzc-best i { color: var(--amber); margin-right: 5px; }

.dzc .shim { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.dzc .shim.w60 { width: 60%; height: 16px; } .dzc .shim.w90 { width: 90%; } .dzc .shim.w80 { width: 80%; } .dzc .shim.w70 { width: 70%; }

/* The chosen concept's options. */
.dzo { border-radius: 18px; border: 1px solid var(--line); background: var(--card); padding: 18px; box-shadow: var(--shadow-sm); animation: dz-pop 0.45s ease both; }
.dzo-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.dzo-head strong { display: block; font: 700 16px/1.2 var(--display); color: var(--ink); }
.dzo-head span { font-size: 13px; color: var(--ink-2); }
.dzo-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.dzo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dzo-field > label, .dzo-photo label { display: block; font: 700 11.5px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.dzo-note { font-size: 12.5px; color: var(--ink-2); margin: 10px 0 0; line-height: 1.45; }
.dzo-note.wide { margin-top: 14px; }
.dzo-note.wide i { color: var(--good); margin-right: 6px; }
.dzo-photo { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; flex-wrap: wrap; }
.dzo-photo[hidden] { display: none; }
.dzo-drop { width: 150px; height: 92px; border-radius: 12px; border: 1.5px dashed var(--line-2); background: var(--input); color: var(--ink-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; overflow: hidden; padding: 0; font: 600 12px var(--font); }
.dzo-drop img { width: 100%; height: 100%; object-fit: cover; }
.dzo-drop i { font-size: 18px; color: var(--accent); }
.dzo-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* For plans without designs. */
.dzs-promo { flex-direction: row; align-items: stretch; gap: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.dzs-promo-art { position: relative; flex: 0 0 38%; min-height: 260px; overflow: hidden;
    background: radial-gradient(90% 60% at 50% 0%, rgba(125, 211, 252, 0.55), transparent 70%), linear-gradient(180deg, #0B4F7A, #06304D 60%, #041C30); }
.dzs-promo-art span { position: absolute; bottom: -20px; border-radius: 50% 50% 0 0; }
.dzs-promo-art .p1 { left: -10%; width: 60%; height: 90px; background: linear-gradient(180deg, #F97316, #9A3412); }
.dzs-promo-art .p2 { left: 35%; width: 45%; height: 70px; background: linear-gradient(180deg, #C026D3, #701A75); }
.dzs-promo-art .p3 { right: -12%; width: 50%; height: 110px; background: linear-gradient(180deg, #14B8A6, #115E59); }
.dzs-promo-art i { position: absolute; color: #FDBA74; }
.dzs-promo-art .f1 { top: 34%; font-size: 30px; animation: dz-promo-swim 9s linear infinite; }
.dzs-promo-art .f2 { top: 55%; font-size: 20px; color: #FDE68A; animation: dz-promo-swim 13s linear -5s infinite; }
.dzs-promo-art .b1, .dzs-promo-art .b2, .dzs-promo-art .b3 { font-size: 8px; color: rgba(255, 255, 255, 0.6); animation: dz-promo-rise 6s linear infinite; left: 20%; }
.dzs-promo-art .b2 { left: 60%; animation-delay: -2s; font-size: 6px; }
.dzs-promo-art .b3 { left: 80%; animation-delay: -4s; }
@keyframes dz-promo-swim { from { left: -15%; } to { left: 110%; } }
@keyframes dz-promo-rise { from { bottom: 0; opacity: 0; } 20% { opacity: 1; } to { bottom: 100%; opacity: 0; } }
.dzs-promo-copy { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.dzs-promo-copy .dzs-kicker { color: var(--accent); }
.dzs-promo-copy h3 { font: 700 22px/1.2 var(--display); color: var(--ink); margin: 0; }
.dzs-promo-copy p { font-size: 14px; margin: 0; }
.dzs-promo-copy ul { list-style: none; padding: 0; margin: 4px 0 6px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.dzs-promo-copy li i { color: var(--good); margin-right: 8px; }

/* Design settings. */
.dzset { display: flex; flex-direction: column; gap: 18px; }
.dzset-hero { display: flex; gap: 16px; align-items: center; }
.dzset-hero img { width: 150px; height: 94px; border-radius: 12px; object-fit: cover; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.dzset-hero p { font-size: 13px; margin: 6px 0 0; }
.dzset-name { margin-top: 8px; font: 700 18px/1.2 var(--display); height: 42px; }
.dzset-toggles { display: grid; gap: 10px; margin-top: 14px; }
.dzset-toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.dzset-toggle strong { display: block; font-size: 13.5px; color: var(--ink); }
.dzset-toggle small { display: block; font-size: 12px; color: var(--ink-3); }
.dzset-about summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.dzset-about summary i { color: var(--accent); margin-right: 6px; }
.dzset-about .dzc-spec { margin-top: 12px; }
.dzset-spacer { flex: 1; }
.dzset-del { color: var(--bad) !important; }

/* Step 3 of the build wizard: themes or a custom design. */
.design-mode { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--input); border: 1px solid var(--line); margin: 6px 0 18px; flex-wrap: wrap; }
.design-mode button { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 14px/1 var(--font); cursor: pointer; }
.design-mode button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(29, 22, 92, 0.08), 0 6px 16px -8px rgba(29, 22, 92, 0.35); }
.design-mode button .chip { padding: 4px 7px; font-size: 10.5px; }
.design-mode button i.fa-wand-magic-sparkles { color: #A855F7; }

@media (max-width: 860px) {
    .dzo-grid { grid-template-columns: 1fr; }
    .dzs-promo { flex-direction: column; }
    .dzs-promo-art { flex-basis: auto; min-height: 170px; }
    .dzset-hero { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
    .dzs-hero { padding: 20px 18px 18px; }
    .dzs-hero h3 { font-size: 20px; }
    .dzs-grid { grid-template-columns: 1fr; }
    .dzc-spec > div { grid-template-columns: 1fr; gap: 2px; }
    .design-mode { display: flex; }
    .design-mode button { flex: 1; justify-content: center; padding: 0 10px; }
}

.build-design-note { max-width: 520px; margin: 14px auto 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.build-design-note i { color: #A855F7; margin-right: 6px; }
.theme-filters .new.dz-new { background: linear-gradient(120deg, #A23BEC, #0891B2); color: #fff; border-color: transparent; }
.template-note .notice { margin: 14px 0 0 !important; }

/* ---- The background editor (studio and design settings) ----------------------------------------------------------- */

.bge { display: flex; flex-direction: column; gap: 12px; }
.bge .seg { display: flex; flex-wrap: wrap; }
.bge .seg button { flex: 1 1 auto; }
.bge-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 700 11.5px/1.3 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.bge-label span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.bge-prompt { width: 100%; min-height: 108px; resize: vertical; font: 13.5px/1.5 var(--font); padding: 10px 12px; }
.bge-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.bge-row small { color: var(--ink-3); font-size: 12px; flex: 1; min-width: 180px; }
.bge-paint { white-space: nowrap; }
.bge-preview { position: relative; margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--bg-2); border: 1px dashed var(--line-2); display: grid; place-items: center; }
.bge-preview.has { border-style: solid; }
.bge-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: dz-pop 0.6s ease both; }
.bge-preview > span { color: var(--ink-3); font-size: 13px; display: inline-flex; gap: 8px; align-items: center; }
.bge-preview .dzs-shimmer { opacity: 0; }
.bge-preview.busy .dzs-shimmer { opacity: 1; }
.bge-photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bge-drop { width: 200px; height: 112px; }
.bge-colour { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bge-colpick { position: relative; display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--font); color: var(--ink-2); cursor: pointer; }
.bge-colpick input { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: none; cursor: pointer; }
.bge-swatch { flex: 1; min-width: 120px; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.dz-fill { position: absolute; inset: 0; }
.dash.png-capture .dz-fill { bottom: 0; }

/* The picture prompt on a concept card. */
.dzc-prompt { border-top: 1px dashed var(--line-2); padding-top: 10px; }
.dzc-prompt summary { cursor: pointer; font: 700 11.5px/1.3 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); list-style: none; }
.dzc-prompt summary::-webkit-details-marker { display: none; }
.dzc-prompt summary::after { content: '\f078'; font-family: 'Font Awesome 6 Pro'; font-weight: 900; font-size: 9px; margin-left: 6px; }
.dzc-prompt[open] summary::after { content: '\f077'; }
.dzc-prompt summary i { color: var(--accent); margin-right: 5px; }
.dzc-prompt p { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); font-style: italic; }
.dzc-use { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer; background: var(--accent-soft); color: var(--accent); font: 600 12px/1 var(--font); }
.dzc-use:hover { background: var(--accent); color: #fff; }
.dzo .dzo-grid { align-items: start; }

/* ---- A regular theme's own background (spec.background; designs.js backdrop) ---------------------------------------
   The same stage as a design's, under the theme's own panels. Whatever sits straight on the picture - a header with no
   glass of its own, the page tabs, headings, the footer - gets a pane of the theme's panel colour. */

.dash[data-backdrop] { isolation: isolate; }
.dash[data-backdrop] .dash-header:not(.has-cover):not(.w-glass) { background: var(--d-card); border: 1px solid var(--d-card-border); border-radius: var(--d-radius); padding: 20px 22px; box-shadow: var(--d-card-shadow); position: relative; z-index: 5; }
.dash[data-backdrop] .dash-tabs { background: var(--d-card); border: 1px solid var(--d-card-border); border-radius: min(var(--d-radius), 14px); padding: 0 6px; }
.dash[data-backdrop] .dash-foot { background: var(--d-card); border: 1px solid var(--d-card-border); border-radius: var(--d-radius); padding: 12px 16px; align-items: center; }
.dash[data-backdrop] .el-label:not([data-style="banner"]):not([data-style="callout"]) { background: var(--d-card); border-radius: var(--d-radius); padding: 12px 16px; border: 1px solid var(--d-card-border); }
.dash[data-backdrop] .dash-active .x-chip { background: var(--d-card); border: 1px solid var(--d-card-border); }

/* Prompt ideas for a theme's background. */
.bge-ideas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bge-idea-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer; border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--accent); font: 600 12.5px/1 var(--font); }
.bge-idea-btn i { color: var(--amber); }
.bge-idea { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font: 600 12.5px/1 var(--font); }
.bge-idea i { color: var(--accent); font-size: 11px; }
.bge-idea:hover, .bge-idea.on { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.dzset-lead { font-size: 14px; color: var(--ink-2); margin: 0; }
.dz-frost { padding-top: 14px; border-top: 1px solid var(--line); }


/* =====================================================================================================================
   THE SHOWCASE ON THE PUBLIC PAGES  (js/showcase.js; dashboards.js, heroanim.js)
   ===================================================================================================================== */

/* A design inside a box (the home page hero): its world fills the box rather than the window. */
.dash[data-dz-fit="box"] .dz-view { position: absolute; inset: 0; height: auto; }

/* The hero's look switch: a design is its picture, with a spark. */
.demo-switch button.ds-design { background-size: cover; background-position: center; position: relative; }
.demo-switch button.ds-design::after { content: ''; position: absolute; right: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #FBBF24; box-shadow: 0 0 6px #FBBF24; }

/* Home: three designs above the ten themes. */
.template-strip.home-designs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
.tmpl-card.tmpl-design .tmpl-thumb { height: 210px; }
.tmpl-card.tmpl-design .tmpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.tmpl-card.tmpl-design:hover .tmpl-thumb img { transform: scale(1.06); }
.tmpl-card .tmpl-lock.ai { left: 10px; right: auto; background: linear-gradient(120deg, rgba(124, 58, 237, 0.92), rgba(8, 145, 178, 0.92)); display: inline-flex; gap: 6px; align-items: center; }
.tmpl-play { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; font: 600 12px/1 var(--font); color: #fff;
    background: rgba(10, 12, 24, 0.55); backdrop-filter: blur(6px); opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.tmpl-card:hover .tmpl-play, .tmpl-card:focus-visible .tmpl-play { opacity: 1; transform: none; }
@media (max-width: 900px) { .template-strip.home-designs { grid-template-columns: 1fr; } .tmpl-card.tmpl-design .tmpl-thumb { height: 170px; } }

/* Themes page: the quick switch, the live head for a design, the six designs. */
.quick-themes button.qt-design .qt-swatch { border-radius: 6px; }
.quick-themes button.qt-design i { color: #A855F7; }
.showcase-head.is-design { align-items: center; }
.sc-bg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--input); border: 1px solid var(--line); }
.sc-bg button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 600 12.5px/1 var(--font); cursor: pointer; }
.sc-bg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(29, 22, 92, 0.08), 0 4px 12px -6px rgba(29, 22, 92, 0.3); }
.sc-bg button i { color: var(--accent); }
.template-live .browser.loading { opacity: 0.6; transition: opacity 0.3s ease; }

.ai-showcase { margin: 70px 0 30px; }
.ai-showcase .eyebrow i { margin-right: 6px; color: #A855F7; }
.ai-show-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
.ai-show { border-radius: 20px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); cursor: pointer; outline: none; display: flex; flex-direction: column;
    transition: transform 0.4s cubic-bezier(.2, .7, .2, 1), box-shadow 0.4s ease; }
.ai-show:hover, .ai-show:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow); }
.ai-show.current { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.ai-show-pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.ai-show-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.ai-show:hover .ai-show-pic img { transform: scale(1.07); }
.ai-show-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35)); pointer-events: none; }
.ai-show-tone { position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; font: 700 11px/1 var(--font); color: #fff; background: rgba(10, 12, 24, 0.55); backdrop-filter: blur(6px); }
.ai-show-live { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: inline-flex; gap: 7px; align-items: center; padding: 8px 12px; border-radius: 999px; font: 600 12.5px/1 var(--font); color: #fff;
    background: linear-gradient(120deg, rgba(124, 58, 237, 0.92), rgba(8, 145, 178, 0.92)); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6); }
.ai-show-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.ai-show-top { display: flex; gap: 12px; align-items: flex-start; }
.ai-show-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex-shrink: 0; font-size: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.ai-show h3 { font: 700 18px/1.2 var(--display); color: var(--ink); margin: 0 0 3px; letter-spacing: -0.02em; }
.ai-show p { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin: 0; }
.ai-show-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.ai-show-meta span { display: inline-flex; gap: 5px; align-items: center; font: 600 11px/1 var(--font); padding: 5px 8px; border-radius: 6px; background: var(--bg-2); color: var(--ink-2); }
.ai-show-meta i { color: var(--accent); font-size: 10px; }
.ai-show-pal { display: flex; gap: 4px; }
.ai-show-pal i { flex: 1; height: 8px; border-radius: 4px; }
.ai-show-cta { display: flex; justify-content: center; margin-top: 26px; }
@media (max-width: 1000px) { .ai-show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ai-show-grid { grid-template-columns: 1fr; gap: 16px; } .ai-showcase { margin-top: 44px; } }

/* ---- The hero dashboard's own title (render.js miniHeader) ------------------------------------------------------- */

.dash .dash-header.dash-mini { margin-bottom: 14px; }
.dash .dash-header.dash-mini .dash-title { font-size: min(var(--d-title-size), 26px); line-height: 1.15; margin-bottom: 4px; }
.dash .dash-header.dash-mini .dash-sub { font-size: 13.5px; }
.dash[data-design] .dash-header.dash-mini:not(.dz-banner) { padding: 14px 18px; }
.dash[data-design] .dash-header.dash-mini .dash-title::after { content: ''; display: block; width: min(240px, 60%); height: 20px; margin-top: 4px; background: var(--dz-flourish, none) left center / contain no-repeat; }
@container stage (max-width: 520px) { .dash .dash-header.dash-mini .dash-title { font-size: 20px; } .dash .dash-header.dash-mini .dash-sub { font-size: 12.5px; } }

/* =====================================================================================================================
   THE FEATURE BAND  -  "Give your data a world of its own" (dashboards.js aiFeatureHTML), on the home page's Themes
   section and at the top of the Themes page. The designs' own AI pictures behind it, three steps, and a live picture
   generator that types each design's real prompt and shows the picture it painted.
   ===================================================================================================================== */

.aif-host { margin: 6px 0 34px; }
.aif { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; color: #fff; min-height: 540px;
    box-shadow: 0 50px 100px -40px rgba(10, 8, 40, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; background: #0B0F22; }
.aif-bg { position: absolute; inset: 0; z-index: -2; }
.aif-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 9s linear; }
.aif-bg img.on { opacity: 1; transform: scale(1); }
.aif::before { content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(7, 9, 26, 0.94) 0%, rgba(7, 9, 26, 0.82) 38%, rgba(7, 9, 26, 0.35) 70%, rgba(7, 9, 26, 0.2) 100%),
                radial-gradient(60% 80% at 0% 100%, rgba(124, 58, 237, 0.35), transparent 60%); }
.aif-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 48px 48px 46px; }

.aif-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; font: 700 12px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); color: #FDE68A; }
.aif-kicker i { color: #FBBF24; }
.aif-kicker b { padding: 3px 7px; border-radius: 999px; background: linear-gradient(120deg, #A23BEC, #0891B2); color: #fff; font-size: 10px; letter-spacing: 0.06em; }
.aif h3 { font: 700 clamp(30px, 3.6vw, 46px)/1.05 var(--display); letter-spacing: -0.035em; color: #fff; margin: 18px 0 14px; text-wrap: balance; }
.aif h3 span { background: linear-gradient(100deg, #FDE68A, #F59E0B 40%, #F472B6 75%, #A78BFA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aif-copy > p { color: rgba(255, 255, 255, 0.82); font-size: 16px; line-height: 1.55; max-width: 560px; }
.aif-steps { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 12px; }
.aif-steps li { display: flex; gap: 14px; align-items: flex-start; }
.aif-steps b { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; font: 800 14px/1 var(--display); color: #1a1300;
    background: linear-gradient(135deg, #FDE68A, #F59E0B); box-shadow: 0 8px 18px -8px rgba(245, 158, 11, 0.8); }
.aif-steps span { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.7); }
.aif-steps strong { display: block; font: 700 15.5px/1.3 var(--font); color: #fff; }
.aif-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.aif-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(8px); }
.aif-ghost:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.aif-small { margin: 16px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.65); }
.aif-small i { color: #FBBF24; margin-right: 6px; }

.aif-visual { position: relative; padding: 38px 0 18px 10px; }
.aif-gen { position: relative; z-index: 2; border-radius: 22px; padding: 18px; background: rgba(14, 16, 36, 0.62); border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.aif-gen-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.aif-gen-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #A23BEC, #0891B2); font-size: 13px; }
.aif-gen-head strong { font: 700 14.5px/1 var(--font); flex: 1; }
.aif-ai { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font); padding: 6px 9px; border-radius: 999px; background: rgba(251, 191, 36, 0.14); color: #FDE68A; }
.aif-label { font: 700 10.5px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 6px; }
.aif-prompt { min-height: 66px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.aif-caret { display: inline-block; width: 2px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #FBBF24; opacity: 0; }
.aif-gen.s-type .aif-caret { opacity: 1; animation: caret 0.9s steps(1) infinite; }
.aif-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.aif-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; font: 600 13px/1 var(--font); color: #fff;
    background: linear-gradient(120deg, #A23BEC, #0891B2); box-shadow: 0 12px 26px -12px rgba(124, 58, 237, 0.95); transition: transform 0.15s ease, filter 0.2s ease; }
.aif-gen.s-press .aif-btn { transform: scale(0.94); filter: brightness(1.25); }
.aif-time { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.aif-preview { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.aif-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease, filter 0.6s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.aif-gen.s-paint .aif-preview img { opacity: 0.35; filter: blur(8px) saturate(0.6); transform: scale(1.06); }
.aif-shim { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.3) 45%, transparent 70%); background-size: 250% 100%; animation: dz-shine 1.2s linear infinite; opacity: 0; transition: opacity 0.3s ease; }
.aif-gen.s-paint .aif-shim { opacity: 1; }
.aif-tag { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; font: 600 12px/1 var(--font); background: rgba(10, 12, 24, 0.6); backdrop-filter: blur(6px); }
.aif-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.aif-chip { display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.75); font: 600 11.5px/1.2 var(--font); text-align: left; min-width: 0; transition: border-color 0.3s ease, background 0.3s ease; }
.aif-chip img { width: 38px; height: 26px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.aif-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aif-chip.on, .aif-chip:hover { border-color: #FBBF24; background: rgba(251, 191, 36, 0.12); color: #fff; }

.aif-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 14px; font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
    animation: aif-float 6s ease-in-out infinite alternate; }
.aif-float strong { display: block; font: 700 12.5px/1.2 var(--font); color: #fff; }
.aif-float > i { font-size: 17px; color: #FDE68A; }
.aif-float.f1 { top: 0; right: 22px; }
.aif-float.f2 { top: 60%; left: -34px; animation-delay: -3s; }
.aif-kpi { display: flex; flex-direction: column; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.2); }
.aif-kpi small { font-size: 10px; color: rgba(255, 255, 255, 0.6); }
.aif-kpi b { font: 800 17px/1.1 var(--display); color: #fff; }
.aif-kpi em { font-style: normal; font-size: 10.5px; color: #6EE7B7; }
@keyframes aif-float { from { transform: translateY(-5px); } to { transform: translateY(6px); } }

@media (max-width: 1060px) {
    .aif-grid { grid-template-columns: 1fr; padding: 36px 28px; gap: 26px; }
    .aif::before { background: linear-gradient(180deg, rgba(7, 9, 26, 0.9) 0%, rgba(7, 9, 26, 0.78) 55%, rgba(7, 9, 26, 0.55) 100%); }
    .aif-visual { padding: 38px 0 10px; max-width: 560px; }
    .aif-float.f2 { left: 12px; }
}
@media (max-width: 600px) {
    .aif { border-radius: 20px; }
    .aif-grid { padding: 26px 18px 30px; }
    .aif-visual { padding: 6px 0 0; }
    .aif-float { display: none; }
    .aif-chip span { display: none; }
    .aif-chip { justify-content: center; }
    .aif-chip img { width: 100%; height: 34px; }
    .aif-ctas .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .aif-float, .aif-bg img { animation: none !important; transition: none !important; } }