.neo-soft-wrapper {
    /* Khai báo biến cục bộ - Màu pastel nhẹ nhàng, viền mỏng hơn */
    --neo-bg: #fffbf0;
    --neo-ink: #1a1a1a;
    --neo-border: 2.5px solid #1a1a1a;
    --neo-shadow-box: 5px 5px 0px #1a1a1a;
    --neo-shadow-btn: 3px 3px 0px #1a1a1a;
    --neo-radius-box: 16px;
    --neo-radius-btn: 12px;
    
    /* Màu sắc Pastel Neo */
    --clr-blue: #a2d2ff;
    --clr-pink: #ffafcc;
    --clr-yellow: #fdf0d5;
    --clr-green: #b9fbc0;

    max-width: 600px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--neo-ink);
    background: var(--neo-bg);
    padding: 25px;
    border: var(--neo-border);
    border-radius: var(--neo-radius-box);
    box-shadow: var(--neo-shadow-box);
}

.neo-soft-wrapper * {
    box-sizing: border-box;
}

.neo-soft-header {
    background: var(--clr-yellow);
    padding: 15px;
    border: var(--neo-border);
    border-radius: var(--neo-radius-btn);
    text-align: center;
    margin-bottom: 25px;
}

.neo-soft-header h2 {
    margin: 0 0 5px 0;
    font-size: 1.6rem;
    font-weight: 800;
}

.neo-soft-header p {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
}

.neo-soft-body {
    background: #ffffff;
    padding: 25px 20px;
    border-radius: var(--neo-radius-btn);
    border: var(--neo-border);
    text-align: center;
}

.neo-soft-timer {
    font-size: 3.5rem;
    font-weight: 800;
    font-family: monospace;
    margin-bottom: 15px;
    color: var(--neo-ink);
    letter-spacing: -2px;
}

.neo-soft-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.neo-soft-btn {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 12px 20px;
    border: var(--neo-border);
    border-radius: var(--neo-radius-btn);
    box-shadow: var(--neo-shadow-btn);
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
    color: var(--neo-ink);
}

/* Các màu nút */
.neo-bg-primary { background: var(--clr-blue); }
.neo-bg-danger { background: var(--clr-pink); }
.neo-bg-success { background: var(--clr-green); width: 100%; margin-top: 15px; }

/* Hiệu ứng Hover & Active */
.neo-soft-btn:not(:disabled):hover {
    filter: brightness(0.95);
}

.neo-soft-btn:not(:disabled):active {
    box-shadow: 0px 0px 0px var(--neo-ink);
    transform: translate(3px, 3px);
}

.neo-soft-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #e9ecef;
    box-shadow: none;
    transform: translate(3px, 3px);
}

/* Sóng âm nhấp nháy */
.neo-soft-recording {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #d90429;
    background: #fff0f3;
    padding: 8px 15px;
    border: 2px dashed #d90429;
    border-radius: 50px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.neo-soft-dot {
    width: 12px;
    height: 12px;
    background-color: #d90429;
    border-radius: 50%;
    animation: neoSoftPulse 1s infinite alternate;
}

@keyframes neoSoftPulse {
    from { transform: scale(0.8); opacity: 0.7; }
    to { transform: scale(1.2); opacity: 1; }
}

.neo-soft-workspace {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed var(--neo-ink);
}

.neo-soft-hint {
    background: var(--clr-yellow);
    border: var(--neo-border);
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

audio#neo-soft-audio-playback {
    width: 100%;
    height: 45px;
    border-radius: 50px;
}