/* /Layout/MainLayout.razor.rz.scp.css */
.demo-shell[b-ithxk74jws] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #06060b;
    color: #e6e6f0;
}

.demo-topbar[b-ithxk74jws] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid #1c1c2b;
    background: #090910;
}

.demo-topbar .brand[b-ithxk74jws] {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(90deg, #7c5cff, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.demo-topbar .tagline[b-ithxk74jws] {
    color: #8b8ba3;
    font-size: 0.85rem;
}

.demo-topbar .cta[b-ithxk74jws] {
    margin-left: auto;
    padding: 7px 14px;
    border-radius: 8px;
    background: #7c5cff;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.demo-topbar .cta:hover[b-ithxk74jws] {
    background: #8f73ff;
}

.demo-content[b-ithxk74jws] {
    flex: 1;
    padding: 18px 20px;
}

@media (max-width: 640px) {
    .demo-topbar .tagline[b-ithxk74jws] {
        display: none;
    }
}
/* /Pages/Home.razor.rz.scp.css */
.phlux-demo[b-0vh14cpq4f] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas:
        "stage controls"
        "gallery gallery";
    gap: 20px;
    align-items: start;
    color: #e6e6f0;
    font-family: Inter, system-ui, sans-serif;
}

/* ── canvas stage ─────────────────────────────────────────── */
.stage-col[b-0vh14cpq4f] { grid-area: stage; display: flex; flex-direction: column; gap: 12px; align-items: center; }

.stage[b-0vh14cpq4f] {
    overflow: auto;
    max-width: 100%;
    border: 1px solid #23233a;
    border-radius: 12px;
    background:
        linear-gradient(45deg, #101018 25%, transparent 25%) 0 0/16px 16px,
        linear-gradient(-45deg, #101018 25%, transparent 25%) 0 8px/16px 16px,
        linear-gradient(45deg, transparent 75%, #101018 75%) 8px -8px/16px 16px,
        linear-gradient(-45deg, transparent 75%, #101018 75%) -8px 0/16px 16px,
        #0a0a12;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}

.stage canvas[b-0vh14cpq4f] {
    image-rendering: pixelated;
    cursor: crosshair;
    display: block;
}

.transport[b-0vh14cpq4f] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.pbtn[b-0vh14cpq4f] {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #2a2a40;
    background: #14141f;
    color: #e6e6f0;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}
.pbtn:hover[b-0vh14cpq4f] { background: #1c1c2c; }
.pbtn.primary[b-0vh14cpq4f] { background: #7c5cff; border-color: #7c5cff; }
.pbtn.primary:hover[b-0vh14cpq4f] { background: #8f73ff; }
.pbtn:disabled[b-0vh14cpq4f] { opacity: .4; cursor: default; }

.stepcount[b-0vh14cpq4f] { color: #8b8ba3; font-size: .82rem; margin-left: 4px; }

/* ── control panels ───────────────────────────────────────── */
.controls[b-0vh14cpq4f] { grid-area: controls; display: flex; flex-direction: column; gap: 14px; }

.panel[b-0vh14cpq4f] {
    background: #0d0d16;
    border: 1px solid #1c1c2b;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.panel-h[b-0vh14cpq4f] { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.panel label[b-0vh14cpq4f] { font-size: .8rem; font-weight: 600; color: #b9b9cc; margin-top: 6px; }
.panel label .val[b-0vh14cpq4f] { color: #8b8ba3; font-weight: 400; }
.panel input[type=range][b-0vh14cpq4f] { width: 100%; accent-color: #7c5cff; }
.chk[b-0vh14cpq4f] { display: flex; align-items: center; gap: 8px; }
.chk input[b-0vh14cpq4f] { accent-color: #7c5cff; }

.seg[b-0vh14cpq4f] { display: flex; gap: 6px; }
.seg-b[b-0vh14cpq4f] {
    flex: 1 1 auto;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid #2a2a40;
    background: #14141f;
    color: #cfcfe0;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
}
.seg-b:hover[b-0vh14cpq4f] { background: #1c1c2c; }
.seg-b.on[b-0vh14cpq4f] { background: #7c5cff; border-color: #7c5cff; color: #fff; }

.paintrow[b-0vh14cpq4f] { display: flex; gap: 6px; align-items: center; }
.paintrow input[type=color][b-0vh14cpq4f] {
    width: 38px; height: 34px; padding: 0; border: 1px solid #2a2a40;
    border-radius: 7px; background: #14141f; cursor: pointer;
}

.rule[b-0vh14cpq4f] {
    width: 100%;
    background: #06060b;
    color: #e6e6f0;
    border: 1px solid #2a2a40;
    border-radius: 8px;
    padding: 8px;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: .82rem;
    line-height: 1.45;
    resize: vertical;
}
.rule:focus[b-0vh14cpq4f] { outline: none; border-color: #7c5cff; }

.err[b-0vh14cpq4f] { color: #ff6b81; font-size: .8rem; white-space: pre-wrap; }
.ok[b-0vh14cpq4f] { color: #34d399; font-size: .8rem; }
.muted[b-0vh14cpq4f] { color: #8b8ba3; font-weight: 400; }
.hint[b-0vh14cpq4f] { color: #8b8ba3; font-size: .76rem; line-height: 1.5; margin: 4px 0 0; }
.hint b[b-0vh14cpq4f] { color: #cfcfe0; }

.fullcta[b-0vh14cpq4f] {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, #7c5cff, #22d3ee);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
}
.fullcta:hover[b-0vh14cpq4f] { filter: brightness(1.08); }

/* ── starter gallery ──────────────────────────────────────── */
.gallery[b-0vh14cpq4f] { grid-area: gallery; display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.gal-group[b-0vh14cpq4f] { display: flex; flex-direction: column; gap: 8px; }
.gal-title[b-0vh14cpq4f] {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #6f6f8a;
}
.gal-row[b-0vh14cpq4f] { display: flex; flex-wrap: wrap; gap: 8px; }
.gal-card[b-0vh14cpq4f] {
    padding: 8px 14px;
    border-radius: 9px;
    border: 1px solid #23233a;
    background: #10101a;
    color: #dcdcea;
    font-weight: 600;
    font-size: .84rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.gal-card:hover[b-0vh14cpq4f] { border-color: #7c5cff; background: #16162a; }
.gal-card.active[b-0vh14cpq4f] { border-color: #22d3ee; background: #142030; color: #fff; box-shadow: 0 0 0 1px #22d3ee inset; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 860px) {
    .phlux-demo[b-0vh14cpq4f] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "stage" "controls" "gallery";
    }
    .controls[b-0vh14cpq4f] { max-width: 520px; }
}