.panel::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.panel.active::before {
    opacity: 1;
}

.form-group::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-md));
    top: 0;
    width: 0.1875rem;
    height: var(--space-xl);
    background: linear-gradient(180deg, var(--color-primary) 0%, transparent 100%);
    border-radius: 0.125rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-group:focus-within::before {
    opacity: 1;
}

:is(.form-group input, .form-group textarea)::placeholder {
    color: var(--color-text-tertiary);
    opacity: 0.7;
}

:is(.form-group input, .form-group select, .form-group textarea):focus {
    border-color: var(--color-primary);
    background: var(--color-bg-hover);
    box-shadow: 0 0 0 var(--space-xs) color-mix(in srgb, var(--color-primary) 15%, transparent),
        0 0 var(--space-md) color-mix(in srgb, var(--color-primary) 20%, transparent),
        inset 0 0.0625rem 0.1875rem color-mix(in srgb, var(--color-text-primary) 2%, transparent);
    transform: translateY(-0.0625rem);
}

.item::before {
    content: '';
    position: absolute;
    top: 0;
    right: -2.5rem;
    width: 6.25rem;
    height: 6.25rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1.875rem);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.item:hover {
    border-color: var(--color-primary);
    border-left-color: var(--color-accent);
    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--color-primary) 15%, transparent),
        0 0 0.0625rem color-mix(in srgb, var(--color-primary) 50%, transparent);
    transform: translateY(-0.125rem);
}

.item:hover::before {
    opacity: 1;
}

:is(.item input, .item select, .item textarea):focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-primary) 10%, transparent),
        0 0 0.5rem color-mix(in srgb, var(--color-primary) 15%, transparent);
    background: linear-gradient(135deg, var(--color-bg-hover) 0%, var(--color-bg-primary) 100%);
    transform: translateY(-0.0625rem);
}

#output h3::before {
    content: '\2728';
    margin-right: var(--space-sm);
}

.input-error:focus {
    border-color: color-mix(in srgb, var(--color-error) 80%, transparent) !important;
    box-shadow: 0 0 0 var(--space-xs) color-mix(in srgb, var(--color-error) 20%, transparent),
        0 0 var(--space-md) color-mix(in srgb, var(--color-error) 25%, transparent) !important;
}