.landing-page {
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1rem;
}

.landing-hero {
    text-align: center;
    margin-bottom: 2rem;
}

/* Klods mascot: stacked body + eye layers, same 512² frame, so they overlay 1:1. */
.klods-mascot {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.klods-mascot-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.landing-mascot {
    width: 140px;
    height: 140px;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent));
    animation: mascot-float 4s ease-in-out infinite;
}

/* ── Mascot character-creator carousel ── */
.mascot-creator {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mascot-stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
}

.mascot-stage-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--mud-palette-primary) 32%, transparent) 0%,
        transparent 70%);
    filter: blur(12px);
    z-index: 0;
}

.mascot-hero {
    position: relative;
    z-index: 2;
    animation: mascot-float 4s ease-in-out infinite;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
}

.mascot-ghost {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%) scale(0.72);
    opacity: 0.25;
    filter: blur(1px) grayscale(0.15);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mascot-ghost:hover {
    opacity: 0.45;
}

.mascot-ghost-prev { left: 0; }
.mascot-ghost-next { right: 0; }

.mascot-arrow {
    position: absolute !important;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--mud-palette-surface) 70%, transparent);
    backdrop-filter: blur(4px);
}

.mascot-arrow-prev { left: 4px; }
.mascot-arrow-next { right: 4px; }

@keyframes mascot-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .landing-mascot { animation: none; }
}

.landing-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.landing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent) !important;
    z-index: 1;
}

/* Hide browser-native password reveal button (Edge/IE) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

.card-info-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    backdrop-filter: blur(4px);
    user-select: none;
    z-index: 10;
}

.card-name-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    color: white;
    padding: 6px 32px 6px 10px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.card-image-wrapper:has(.card-info-badge:hover) .card-name-label {
    opacity: 1;
}

.collection-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 5;
    border-radius: 4px;
}

.landing-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 1rem;
}

.landing-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.15;
}

.child-row-content {
    background-color: rgba(0, 0, 0, 0.25);
    padding: 12px 16px;
}

/* Shared completeness (traffic-light) progress bar */
.cbar { position: relative; height: 6px; width: 100%; border-radius: 999px; overflow: hidden;
        background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent); }
.cbar-fill { height: 100%; border-radius: 999px; transition: width .25s ease; }
.cbar-complete .cbar-fill { background: var(--mud-palette-success); }
.cbar-completable .cbar-fill { background: var(--mud-palette-warning); }
.cbar-short .cbar-fill { background: var(--mud-palette-error); }
/* Substituted share — a rainbow band over the right end of the fill. It starts at the bar's own
   status colour and sweeps the hue wheel, so it blends seamlessly with the solid fill to its left.
   Derived from the palette var via relative-colour syntax; on a browser without support the whole
   declaration is dropped, leaving the band transparent over the status-coloured fill (graceful). */
.cbar-sub { position: absolute; top: 0; height: 100%; border-radius: 0 999px 999px 0; transition: left .25s ease, width .25s ease; }
.cbar-complete .cbar-sub { background: linear-gradient(90deg,
    hsl(from var(--mud-palette-success) h s l),
    hsl(from var(--mud-palette-success) calc(h + 60) s l),
    hsl(from var(--mud-palette-success) calc(h + 120) s l),
    hsl(from var(--mud-palette-success) calc(h + 180) s l),
    hsl(from var(--mud-palette-success) calc(h + 240) s l),
    hsl(from var(--mud-palette-success) calc(h + 300) s l)); }
.cbar-completable .cbar-sub { background: linear-gradient(90deg,
    hsl(from var(--mud-palette-warning) h s l),
    hsl(from var(--mud-palette-warning) calc(h + 60) s l),
    hsl(from var(--mud-palette-warning) calc(h + 120) s l),
    hsl(from var(--mud-palette-warning) calc(h + 180) s l),
    hsl(from var(--mud-palette-warning) calc(h + 240) s l),
    hsl(from var(--mud-palette-warning) calc(h + 300) s l)); }
.cbar-short .cbar-sub { background: linear-gradient(90deg,
    hsl(from var(--mud-palette-error) h s l),
    hsl(from var(--mud-palette-error) calc(h + 60) s l),
    hsl(from var(--mud-palette-error) calc(h + 120) s l),
    hsl(from var(--mud-palette-error) calc(h + 180) s l),
    hsl(from var(--mud-palette-error) calc(h + 240) s l),
    hsl(from var(--mud-palette-error) calc(h + 300) s l)); }

.cstatus { font-weight: 600; }
.cstatus-complete { color: var(--mud-palette-success); }
.cstatus-completable { color: var(--mud-palette-warning); }
.cstatus-short { color: var(--mud-palette-error); }

@media (prefers-reduced-motion: reduce) { .cbar-fill { transition: none; } }

/* First-login tour dialog */
.tour-dialog { width: 75vw !important; max-width: 1200px !important; }
.tour { min-width: 320px; width: 100%; }
.tour-media { aspect-ratio: 16 / 10; width: 100%; max-height: 62vh; border-radius: 12px; overflow: hidden;
              background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default);
              display: flex; align-items: center; justify-content: center; }
.tour-media-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tour-body { padding: 16px 4px 4px; }
.tour-dots { display: flex; gap: 8px; justify-content: center; padding: 12px 0 4px; }
.tour-dot { width: 8px; height: 8px; border-radius: 50%; cursor: pointer; transition: background .15s;
            background: color-mix(in srgb, var(--mud-palette-text-primary) 20%, transparent); }
.tour-dot.active { background: var(--mud-palette-primary); }

/* BOM tabs styled as a segmented button group so they read as clickable */
.bom-tabs .mud-tab-slider { display: none !important; }
.bom-tabs .mud-tab {
    text-transform: none;
    border-radius: 8px;
    min-height: 36px;
    margin-right: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    opacity: 1;
}
.bom-tabs .mud-tab.mud-tab-active {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}

/* BOM "Transfer Pieces" count field — force the input to hug its content so the box
   shrink-wraps and the transfer arrows sit right against it (!important beats MudBlazor's
   own input width rule, which otherwise keeps the input full-width). */
.bom-transfer { width: fit-content !important; min-width: 0 !important; }
.bom-transfer input { width: 3ch !important; min-width: 0 !important; text-align: center; }

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}