.zen-timer-trigger {
    position: fixed !important;
    bottom: 20px;
    left: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zen-primary, #d4af37) 0%, var(--zen-primary-dark, #b8962f) 100%);
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(var(--zen-primary-rgb, 212, 175, 55), 0.3);
    z-index: 9998 !important;
    transition: all var(--zen-transition-base, 0.2s ease);
    opacity: 0.45;
    line-height: 1;
}

.zen-timer-trigger .emoji {
    width: 20px !important;
    height: 20px !important;
    display: block;
}

.zen-timer-trigger:hover {
    opacity: 1;
    transform: scale(1.1);
}

body.dark-mode .zen-timer-trigger {
    box-shadow: 0 2px 10px rgba(197, 160, 89, 0.25);
}

.zen-loading {
    animation: zen-spin 1s linear infinite;
}

@keyframes zen-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.zen-meditation-timer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zen-timer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.zen-timer-container {
    position: relative;
    background: var(--zen-bg-card, #fff);
    border-radius: var(--zen-radius-xl, 12px);
    padding: 30px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

body.dark-mode .zen-timer-container {
    background: var(--zen-bg-card, #1e1e1e);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.zen-timer-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--zen-bg-alt, #f5f5f5);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--zen-text-muted, #999);
    transition: all var(--zen-transition-fast, 0.15s ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zen-timer-close:hover {
    background: var(--zen-border, #e9e9e9);
    color: var(--zen-text, #333);
}

body.dark-mode .zen-timer-close {
    background: #333;
    color: #888;
}

body.dark-mode .zen-timer-close:hover {
    background: #444;
    color: #ccc;
}

.zen-timer-header {
    text-align: center;
    margin-bottom: 25px;
}

.zen-timer-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 10px;
}

.zen-timer-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--zen-text-heading, #222);
    margin: 0;
}

body.dark-mode .zen-timer-title {
    color: var(--zen-primary, #c5a059);
}

.zen-timer-display {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 25px;
}

.zen-timer-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.zen-timer-ring-bg {
    fill: none;
    stroke: var(--zen-border, #e9e9e9);
    stroke-width: 8;
}

body.dark-mode .zen-timer-ring-bg {
    stroke: #333;
}

.zen-timer-ring-progress {
    fill: none;
    stroke: var(--zen-primary, #d4af37);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.zen-timer-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 36px;
    font-weight: 700;
    color: var(--zen-text-heading, #222);
    font-variant-numeric: tabular-nums;
}

body.dark-mode .zen-timer-time {
    color: var(--zen-text, #e0e0e0);
}

.zen-timer-minutes,
.zen-timer-seconds {
    display: inline-block;
}

.zen-timer-separator {
    opacity: 0.5;
    margin: 0 2px;
}

.zen-timer-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.zen-timer-preset {
    padding: 8px 20px;
    border: 1px solid var(--zen-border, #e9e9e9);
    border-radius: var(--zen-radius-lg, 8px);
    background: var(--zen-bg-alt, #f5f5f5);
    color: var(--zen-text, #333);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--zen-transition-fast, 0.15s ease);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zen-timer-preset:hover {
    border-color: var(--zen-primary, #d4af37);
    color: var(--zen-primary, #d4af37);
}

.zen-timer-preset.active {
    background: var(--zen-primary, #d4af37);
    border-color: var(--zen-primary, #d4af37);
    color: #fff;
}

body.dark-mode .zen-timer-preset {
    background: #333;
    border-color: #444;
    color: #bbb;
}

body.dark-mode .zen-timer-preset:hover {
    border-color: var(--zen-primary, #c5a059);
    color: var(--zen-primary, #c5a059);
}

body.dark-mode .zen-timer-preset.active {
    background: var(--zen-primary, #c5a059);
    border-color: var(--zen-primary, #c5a059);
    color: #1e1e1e;
}

.zen-timer-custom {
    display: flex;
    align-items: center;
    gap: 5px;
}

.zen-timer-input {
    width: 80px;
    padding: 8px;
    border: 1px solid var(--zen-border, #e9e9e9);
    border-radius: var(--zen-radius-lg, 8px);
    text-align: center;
    font-size: 16px;
    background: var(--zen-bg-alt, #f5f5f5);
    color: var(--zen-text, #333);
}

body.dark-mode .zen-timer-input {
    background: #333;
    border-color: #444;
    color: #e0e0e0;
}

.zen-timer-unit {
    font-size: 13px;
    color: var(--zen-text-muted, #999);
}

.zen-timer-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.zen-timer-btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--zen-radius-lg, 8px);
    font-size: 15px;
    cursor: pointer;
    transition: all var(--zen-transition-base, 0.2s ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.zen-timer-btn-start {
    background: linear-gradient(135deg, var(--zen-primary, #d4af37) 0%, var(--zen-primary-dark, #b8962f) 100%);
    color: #fff;
}

.zen-timer-btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--zen-primary-rgb, 212, 175, 55), 0.4);
}

.zen-timer-btn-pause {
    background: var(--zen-bg-alt, #f5f5f5);
    color: var(--zen-text, #333);
}

.zen-timer-btn-pause:hover {
    background: var(--zen-border, #e9e9e9);
}

.zen-timer-btn-resume {
    background: linear-gradient(135deg, var(--zen-primary, #d4af37) 0%, var(--zen-primary-dark, #b8962f) 100%);
    color: #fff;
}

.zen-timer-btn-resume:hover {
    transform: translateY(-2px);
}

.zen-timer-btn-reset {
    background: var(--zen-bg-alt, #f5f5f5);
    color: var(--zen-text-muted, #999);
}

.zen-timer-btn-reset:hover {
    background: var(--zen-border, #e9e9e9);
    color: var(--zen-text, #333);
}

body.dark-mode .zen-timer-btn-pause,
body.dark-mode .zen-timer-btn-reset {
    background: #333;
    color: #bbb;
}

body.dark-mode .zen-timer-btn-pause:hover,
body.dark-mode .zen-timer-btn-reset:hover {
    background: #444;
    color: #e0e0e0;
}

.zen-timer-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.zen-timer-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--zen-text-muted, #999);
    cursor: pointer;
    user-select: none;
    position: relative;
}

.zen-timer-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--zen-primary, #d4af37);
    cursor: pointer;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    position: relative;
    z-index: 1;
}

.zen-timer-option input[type="checkbox"]:checked {
    accent-color: var(--zen-primary, #d4af37);
}

.zen-timer-option:hover {
    color: var(--zen-text, #333);
}

body.dark-mode .zen-timer-option:hover {
    color: var(--zen-text, #e0e0e0);
}

.zen-timer-stats {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid var(--zen-border-light, #f0f0f0);
    font-size: 13px;
    color: var(--zen-text-muted, #999);
}

body.dark-mode .zen-timer-stats {
    border-top-color: #333;
}

.zen-timer-stats-value {
    font-weight: 600;
    color: var(--zen-primary, #d4af37);
    margin-left: 5px;
}

@media (max-width: 480px) {
    .zen-timer-container {
        padding: 20px;
    }

    .zen-timer-display {
        width: 160px;
        height: 160px;
    }

    .zen-timer-time {
        font-size: 28px;
    }

    .zen-timer-presets {
        gap: 8px;
    }

    .zen-timer-preset {
        padding: 6px 12px;
        font-size: 13px;
    }

    .zen-timer-input {
        width: 70px;
        padding: 6px;
        font-size: 16px;
    }

    .zen-timer-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
}

.zen-complete-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.zen-complete-overlay.show {
    opacity: 1;
}

.zen-complete-message {
    background: var(--zen-bg-card, #fff);
    border-radius: var(--zen-radius-xl, 12px);
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: scale(0.9);
    transition: transform 0.5s ease;
}

.zen-complete-overlay.show .zen-complete-message {
    transform: scale(1);
}

body.dark-mode .zen-complete-message {
    background: var(--zen-bg-card, #1e1e1e);
}

.zen-complete-icon {
    font-size: 48px;
    margin-bottom: 20px;
    animation: zen-pulse 2s ease-in-out infinite;
}

@keyframes zen-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.zen-complete-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--zen-primary, #d4af37);
    margin-bottom: 10px;
}

.zen-complete-text {
    font-size: 16px;
    color: var(--zen-text, #333);
    margin-bottom: 15px;
}

body.dark-mode .zen-complete-text {
    color: var(--zen-text, #bbb);
}

.zen-complete-duration {
    font-size: 14px;
    color: var(--zen-text-muted, #999);
    margin-bottom: 25px;
}

.zen-complete-btn {
    background: linear-gradient(135deg, var(--zen-primary, #d4af37) 0%, var(--zen-primary-dark, #b8962f) 100%);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: var(--zen-radius-lg, 8px);
    font-size: 15px;
    cursor: pointer;
    transition: all var(--zen-transition-base, 0.2s ease);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.zen-complete-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--zen-primary-rgb, 212, 175, 55), 0.4);
}

.zen-gongde-light {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.6) 0%, rgba(212, 175, 55, 0.3) 30%, transparent 70%);
    border-radius: 50%;
    animation: zen-gongde-pulse 2s ease-out infinite;
    z-index: -1;
}

@keyframes zen-gongde-pulse {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

.zen-fahjie-light-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999998;
    pointer-events: none;
    opacity: 0;
}

.zen-fahjie-light-overlay.active {
    opacity: 1;
    animation: zen-fahjie-glow 1.5s ease-out forwards;
}

.zen-fahjie-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255, 215, 0, 1) 0%, rgba(255, 200, 0, 0.9) 20%, rgba(218, 165, 32, 0.7) 40%, transparent 70%);
    border-radius: 50%;
    animation: zen-fahjie-expand 1.5s ease-out forwards;
}

.zen-fahjie-rays-full {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200vmax;
    height: 200vmax;
    margin: -100vmax 0 0 -100vmax;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255, 215, 0, 0.6) 5deg, transparent 10deg,
        transparent 15deg, rgba(255, 215, 0, 0.6) 20deg, transparent 25deg,
        transparent 30deg, rgba(255, 215, 0, 0.6) 35deg, transparent 40deg,
        transparent 45deg, rgba(255, 215, 0, 0.6) 50deg, transparent 55deg,
        transparent 60deg, rgba(255, 215, 0, 0.6) 65deg, transparent 70deg,
        transparent 75deg, rgba(255, 215, 0, 0.6) 80deg, transparent 85deg,
        transparent 90deg, rgba(255, 215, 0, 0.6) 95deg, transparent 100deg,
        transparent 105deg, rgba(255, 215, 0, 0.6) 110deg, transparent 115deg,
        transparent 120deg, rgba(255, 215, 0, 0.6) 125deg, transparent 130deg,
        transparent 135deg, rgba(255, 215, 0, 0.6) 140deg, transparent 145deg,
        transparent 150deg, rgba(255, 215, 0, 0.6) 155deg, transparent 160deg,
        transparent 165deg, rgba(255, 215, 0, 0.6) 170deg, transparent 175deg,
        transparent 180deg, rgba(255, 215, 0, 0.6) 185deg, transparent 190deg,
        transparent 195deg, rgba(255, 215, 0, 0.6) 200deg, transparent 205deg,
        transparent 210deg, rgba(255, 215, 0, 0.6) 215deg, transparent 220deg,
        transparent 225deg, rgba(255, 215, 0, 0.6) 230deg, transparent 235deg,
        transparent 240deg, rgba(255, 215, 0, 0.6) 245deg, transparent 250deg,
        transparent 255deg, rgba(255, 215, 0, 0.6) 260deg, transparent 265deg,
        transparent 270deg, rgba(255, 215, 0, 0.6) 275deg, transparent 280deg,
        transparent 285deg, rgba(255, 215, 0, 0.6) 290deg, transparent 295deg,
        transparent 300deg, rgba(255, 215, 0, 0.6) 305deg, transparent 310deg,
        transparent 315deg, rgba(255, 215, 0, 0.6) 320deg, transparent 325deg,
        transparent 330deg, rgba(255, 215, 0, 0.6) 335deg, transparent 340deg,
        transparent 345deg, rgba(255, 215, 0, 0.6) 350deg, transparent 355deg,
        transparent 360deg
    );
    animation: zen-fahjie-rotate 1.5s linear forwards;
}

@keyframes zen-fahjie-glow {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes zen-fahjie-expand {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(50); opacity: 0; }
}

@keyframes zen-fahjie-rotate {
    0% { transform: rotate(0deg); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: rotate(180deg); opacity: 0; }
}

body.dark-mode .zen-fahjie-center {
    background: radial-gradient(circle, rgba(255, 223, 0, 1) 0%, rgba(255, 215, 0, 0.9) 20%, rgba(218, 165, 32, 0.7) 40%, transparent 70%);
}

body.dark-mode .zen-fahjie-rays-full {
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255, 223, 0, 0.5) 5deg, transparent 10deg,
        transparent 15deg, rgba(255, 223, 0, 0.5) 20deg, transparent 25deg,
        transparent 30deg, rgba(255, 223, 0, 0.5) 35deg, transparent 40deg,
        transparent 45deg, rgba(255, 223, 0, 0.5) 50deg, transparent 55deg,
        transparent 60deg, rgba(255, 223, 0, 0.5) 65deg, transparent 70deg,
        transparent 75deg, rgba(255, 223, 0, 0.5) 80deg, transparent 85deg,
        transparent 90deg, rgba(255, 223, 0, 0.5) 95deg, transparent 100deg,
        transparent 105deg, rgba(255, 223, 0, 0.5) 110deg, transparent 115deg,
        transparent 120deg, rgba(255, 223, 0, 0.5) 125deg, transparent 130deg,
        transparent 135deg, rgba(255, 223, 0, 0.5) 140deg, transparent 145deg,
        transparent 150deg, rgba(255, 223, 0, 0.5) 155deg, transparent 160deg,
        transparent 165deg, rgba(255, 223, 0, 0.5) 170deg, transparent 175deg,
        transparent 180deg, rgba(255, 223, 0, 0.5) 185deg, transparent 190deg,
        transparent 195deg, rgba(255, 223, 0, 0.5) 200deg, transparent 205deg,
        transparent 210deg, rgba(255, 223, 0, 0.5) 215deg, transparent 220deg,
        transparent 225deg, rgba(255, 223, 0, 0.5) 230deg, transparent 235deg,
        transparent 240deg, rgba(255, 223, 0, 0.5) 245deg, transparent 250deg,
        transparent 255deg, rgba(255, 223, 0, 0.5) 260deg, transparent 265deg,
        transparent 270deg, rgba(255, 223, 0, 0.5) 275deg, transparent 280deg,
        transparent 285deg, rgba(255, 223, 0, 0.5) 290deg, transparent 295deg,
        transparent 300deg, rgba(255, 223, 0, 0.5) 305deg, transparent 310deg,
        transparent 315deg, rgba(255, 223, 0, 0.5) 320deg, transparent 325deg,
        transparent 330deg, rgba(255, 223, 0, 0.5) 335deg, transparent 340deg,
        transparent 345deg, rgba(255, 223, 0, 0.5) 350deg, transparent 355deg,
        transparent 360deg
    );
}

.zen-gongde-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(212, 175, 55, 0.4) 10deg, transparent 20deg,
        transparent 30deg, rgba(212, 175, 55, 0.4) 40deg, transparent 50deg,
        transparent 60deg, rgba(212, 175, 55, 0.4) 70deg, transparent 80deg,
        transparent 90deg, rgba(212, 175, 55, 0.4) 100deg, transparent 110deg,
        transparent 120deg, rgba(212, 175, 55, 0.4) 130deg, transparent 140deg,
        transparent 150deg, rgba(212, 175, 55, 0.4) 160deg, transparent 170deg,
        transparent 180deg, rgba(212, 175, 55, 0.4) 190deg, transparent 200deg,
        transparent 210deg, rgba(212, 175, 55, 0.4) 220deg, transparent 230deg,
        transparent 240deg, rgba(212, 175, 55, 0.4) 250deg, transparent 260deg,
        transparent 270deg, rgba(212, 175, 55, 0.4) 280deg, transparent 290deg,
        transparent 300deg, rgba(212, 175, 55, 0.4) 310deg, transparent 320deg,
        transparent 330deg, rgba(212, 175, 55, 0.4) 340deg, transparent 350deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: zen-gongde-rotate 10s linear infinite;
    z-index: -1;
    opacity: 0.8;
}

@keyframes zen-gongde-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

body.dark-mode .zen-gongde-light {
    background: radial-gradient(circle, rgba(197, 160, 89, 0.5) 0%, rgba(197, 160, 89, 0.2) 30%, transparent 70%);
}

body.dark-mode .zen-gongde-rays {
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(197, 160, 89, 0.3) 10deg, transparent 20deg,
        transparent 30deg, rgba(197, 160, 89, 0.3) 40deg, transparent 50deg,
        transparent 60deg, rgba(197, 160, 89, 0.3) 70deg, transparent 80deg,
        transparent 90deg, rgba(197, 160, 89, 0.3) 100deg, transparent 110deg,
        transparent 120deg, rgba(197, 160, 89, 0.3) 130deg, transparent 140deg,
        transparent 150deg, rgba(197, 160, 89, 0.3) 160deg, transparent 170deg,
        transparent 180deg, rgba(197, 160, 89, 0.3) 190deg, transparent 200deg,
        transparent 210deg, rgba(197, 160, 89, 0.3) 220deg, transparent 230deg,
        transparent 240deg, rgba(197, 160, 89, 0.3) 250deg, transparent 260deg,
        transparent 270deg, rgba(197, 160, 89, 0.3) 280deg, transparent 290deg,
        transparent 300deg, rgba(197, 160, 89, 0.3) 310deg, transparent 320deg,
        transparent 330deg, rgba(197, 160, 89, 0.3) 340deg, transparent 350deg,
        transparent 360deg
    );
}

@media (max-width: 768px) {
    .zen-timer-trigger {
        bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        left: 15px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .zen-timer-trigger .emoji {
        width: 18px !important;
        height: 18px !important;
    }
}