/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-hgr4h4depj] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-hgr4h4depj] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /FlipSync.razor.rz.scp.css */
/* FlipSync.razor.css — scoped styles for the FlipSync component.
   Bridges Bootstrap to the Industry look: steel accent, Barlow type,
   square "blueprint" cards with corner registration marks, and the 3D flip. */

/* Industry tokens mapped onto Bootstrap + the component */
.fs-app[b-7go1otkic0] {
    --fs-accent: #5980a6;
    --fs-accent-100: #eef6ff;
    --fs-accent-800: #2c455d;
    --fs-accent-900: #1d2d3d;
    --fs-ink: #1d1f20;
    --fs-muted: #3f4448;
    --fs-ground: #f2f2f3;
    --fs-line: rgba(29, 31, 32, .46);
    --bs-secondary-color: var(--fs-muted);
    --bs-border-color: var(--fs-line);
    background: var(--fs-ground);
    color: var(--fs-ink);
    min-height: 100vh;
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 18px;
}

.fs-app[b-7go1otkic0]  .text-secondary {
    color: var(--fs-muted) !important;
}

.fs-app[b-7go1otkic0]  .small {
    font-size: .95em;
}

/* Headings + brand in condensed face */
.fs-app[b-7go1otkic0]  h1, .fs-app[b-7go1otkic0]  h5, .fs-app[b-7go1otkic0]  .navbar-brand,
.fs-app[b-7go1otkic0]  .card-title, .fs-app[b-7go1otkic0]  .fw-semibold {
    font-family: "Barlow Condensed", system-ui, sans-serif;
}

/* ---- Blueprint card: square, transparent, hairline border + corner marks ---- */
.fs-app[b-7go1otkic0]  .fs-bp {
    position: relative;
    background: transparent;
    border: 1px solid var(--fs-line);
    border-radius: 0;
}
.fs-app[b-7go1otkic0]  .fs-bp::before, .fs-app[b-7go1otkic0]  .fs-bp::after,
.fs-app[b-7go1otkic0]  .fs-bp > .card-body::before, .fs-app[b-7go1otkic0]  .fs-bp > .card-body::after {
    /* four registration crosses via pseudo-elements on card + card-body */
    content: "";
    position: absolute;
    width: 11px; height: 11px;
    pointer-events: none;
    background:
        linear-gradient(currentColor, currentColor) 5px 0 / 1px 100% no-repeat,
        linear-gradient(currentColor, currentColor) 0 5px / 100% 1px no-repeat;
    color: rgba(29, 31, 32, .55);
}
.fs-app[b-7go1otkic0]  .fs-bp::before  { top: -6px; left: -6px; }   /* tl */
.fs-app[b-7go1otkic0]  .fs-bp::after   { top: -6px; right: -6px; }  /* tr */
.fs-app[b-7go1otkic0]  .fs-bp > .card-body::before { bottom: -6px; left: -6px; }  /* bl */
.fs-app[b-7go1otkic0]  .fs-bp > .card-body::after  { bottom: -6px; right: -6px; } /* br */

/* progress track — squared, hairline */
.fs-app[b-7go1otkic0]  .fs-track {
    height: 6px;
    background: #e9e9ea;
    border: 1px solid var(--fs-line);
    border-radius: 0;
}

/* icon-only buttons */
.fs-app[b-7go1otkic0]  .fs-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; flex: none;
}

.fs-app[b-7go1otkic0]  .fs-study-header .card-title { font-size: 1.45rem; }
.fs-app[b-7go1otkic0]  .fs-study-header .small { font-size: 1.05em; }
.fs-app[b-7go1otkic0]  .fs-study-header .fs-icon {
    width: 60px; height: 60px;
    font-size: 1.25rem;
}

/* ---- Flip card ---- */
.fs-app[b-7go1otkic0]  .fs-flip-wrap { width: 100%; max-width: 440px; perspective: 1400px; }
.fs-app[b-7go1otkic0]  .fs-flip {
    position: relative;
    width: 100%;
    min-height: 320px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.4, .12, .2, 1);
}
.fs-app[b-7go1otkic0]  .fs-flip.flipped { transform: rotateY(180deg); }
.fs-app[b-7go1otkic0]  .fs-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    border-radius: 0;
}
.fs-app[b-7go1otkic0]  .fs-front { background: var(--fs-ground); }
.fs-app[b-7go1otkic0]  .fs-back {
    transform: rotateY(180deg);
    background: var(--fs-accent-100);
    border-color: var(--fs-accent);
}
.fs-app[b-7go1otkic0]  .fs-face-tag {
    position: absolute;
    top: 16px; left: 18px;
    font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.fs-app[b-7go1otkic0]  .fs-front .fs-face-tag { color: var(--fs-accent); }
.fs-app[b-7go1otkic0]  .fs-back .fs-face-tag { color: var(--fs-accent-800); }
.fs-app[b-7go1otkic0]  .fs-word {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600; font-size: 38px; line-height: 1.08;
}
.fs-app[b-7go1otkic0]  .fs-word-back { font-size: 34px; color: var(--fs-accent-900); }
.fs-app[b-7go1otkic0]  .fs-hint { position: absolute; bottom: 16px; left: 0; right: 0; }
.fs-app[b-7go1otkic0]  .fs-divider { width: 40px; height: 1px; background: var(--fs-accent); margin: 16px 0; }
.fs-app[b-7go1otkic0]  .fs-example {
    margin: 0; font-size: 17px; font-style: italic;
    color: var(--fs-accent-800); max-width: 320px;
}
.fs-app[b-7go1otkic0]  .fs-score { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 72px; line-height: 1; }
.fs-app[b-7go1otkic0]  .min-w-0 { min-width: 0; }