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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: transparent; /* override default banner style */
    bottom: auto;
    box-shadow: none;
    box-sizing: border-box;
    display: none; /* will be set to block by Blazor on error */
    left: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
}

/* Fancy error popup overlay */
#blazor-error-ui.error-popup { inset: 0; background: rgba(0,0,0,0.35); }

#blazor-error-ui .error-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 520px;
    border-radius: 16px;
    padding: 18px 18px 14px 18px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 22px 60px rgba(0,0,0,0.25);
    animation: error-pop 200ms ease-out both;
}

@keyframes error-pop {
    from { transform: translate(-50%, -50%) scale(0.96); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

#blazor-error-ui .error-message {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

#blazor-error-ui .error-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: #111;
    color: #fff;
    font-size: 18px;
}

#blazor-error-ui .error-text {
    font-weight: 800;
    color: #111;
}

#blazor-error-ui .error-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#blazor-error-ui .reload-btn {
    background-color: #111;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    border: none;
}
#blazor-error-ui .reload-btn:hover { background-color: #2a2a2a; }

#blazor-error-ui .dismiss {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(17,17,17,0.06);
    color: #111;
}
#blazor-error-ui .dismiss:hover { background: rgba(17,17,17,0.12); }

/* Loader styles remain below ... */

/* Initial loader overlay */
.loader_main {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #e0f2fe, #bae6fd);
    z-index: 1000;
}

/* Branded spinner (bigger, thinner ring) */
.spinner {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 9999px;
    background: conic-gradient(from 0deg, #111 0deg, #111 120deg, rgba(17,17,17,0.04) 120deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 2px), #000 calc(50% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(50% - 2px), #000 calc(50% - 2px));
    animation: spinner-rotate 1.1s linear infinite;
    box-shadow: 0 0 28px rgba(0,0,0,0.06);
}

.spinner::after { content: ""; }

@keyframes spinner-rotate { to { transform: rotate(360deg); } }

.loader_main { position: fixed; }
.loader_main .loading-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-weight: 800;
    font-size: 18px;
    color: #111;
}
.loader_main .loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* Default blazor progress (kept for fallback) */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

code { color: #c02d76; }

.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;
}

#newTag { position: absolute; right: 0; top: 0; }

.buy_bt { cursor: pointer; }
/* ---------------------------------------------
   Toast notifications – refined glass look
   --------------------------------------------- */
:root {
    --toast-bg: rgba(255,255,255,0.78);
    --toast-text: #0f172a; /* slate-900 */
}

.custom-toast-container {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    pointer-events: none; /* allow clicks through gaps */
}
/* Force all containers to the top-right */
.custom-toast-container.top-right,
.custom-toast-container.top-left,
.custom-toast-container.bottom-right,
.custom-toast-container.bottom-left {
    top: 16px; right: 16px; left: auto; bottom: auto;
}

.custom-toast {
    position: relative;
    width: min(92vw, 380px);
    pointer-events: auto; /* allow interactions on the toast */
    border-radius: 14px;
    padding: 10px 12px 12px 12px;
    background: var(--toast-bg) !important; /* force glass even if other rules exist */
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 22px 60px rgba(0,0,0,0.22);
    color: var(--toast-text);
    transform: translateY(8px) translateX(8px) scale(0.985);
    opacity: 0;
    animation: toast-in 180ms ease-out forwards;
    overflow: hidden;
}

/* Accent bar */
.custom-toast::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--toast-accent, #0f172a) 90%, transparent), transparent);
}

/* Auto-hide progress hint */
.custom-toast::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: color-mix(in srgb, var(--toast-accent, #0f172a) 85%, transparent);
    transform-origin: left;
    animation: toast-progress 5s linear forwards;
    opacity: 0.9;
}

@keyframes toast-in {
    from { transform: translateY(8px) translateX(8px) scale(0.985); opacity: 0; }
    to   { transform: translateY(0)   translateX(0)   scale(1);     opacity: 1; }
}
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Header + body */
.custom-toast-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px 6px 2px;
}
.custom-toast-header i {
    display: inline-grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--toast-accent, #0f172a) 22%, white);
    color: color-mix(in srgb, var(--toast-accent, #0f172a) 92%, black);
    font-size: 14px;
}
.custom-toast-header strong { 
    color: var(--toast-text) !important; 
    letter-spacing: 0.1px; 
}
.custom-toast-header small { 
    color: rgba(15,23,42,0.6) !important; 
    margin-left: auto; 
    font-size: 12px; 
    font-weight: 600; 
}
.custom-toast-header .close {
    margin-left: 6px;
    border: none;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(17,17,17,0.06);
    color: var(--toast-text) !important;
    opacity: 1 !important;
    font-weight: 900;
    cursor: pointer;
    display: inline-grid; place-items: center;
    transition: background-color .2s ease;
}
.custom-toast-header .close span {
    color: inherit !important;
    opacity: 1 !important;
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}
.custom-toast-header .close:hover { background: rgba(17,17,17,0.14); }
.custom-toast-header .close:focus { outline: 2px solid rgba(15,23,42,0.25); outline-offset: 2px; }

.custom-toast-body { 
    padding: 2px 2px 4px 2px; 
    color: var(--toast-text); 
    background: transparent !important; 
    box-shadow: none !important; 
    border: none !important; 
}

/* Level accents only (keep glass background) */
.custom-toast.Info    { --toast-accent: #0284c7; /* sky-600 */ }
.custom-toast.Success { --toast-accent: #10b981; /* emerald-500 */ }
.custom-toast.Warning { --toast-accent: #f59e0b; /* amber-500 */ }
.custom-toast.Error   { --toast-accent: #ef4444; /* red-500 */ }

/* Optional hover lift */
.custom-toast:hover { transform: translateY(-1px) translateX(0) scale(1.01); box-shadow: 0 26px 70px rgba(0,0,0,0.28); }