/* WordPress Isolation and Reset */
#tgai-app {
    all: initial;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
    display: block;
}
#tgai-app *, #tgai-app *::before, #tgai-app *::after {
    all: unset;
    box-sizing: border-box;
    display: revert;
}
/* App-specific styles */
        /* Timer widget styles - scoped to #timer-widget-663 */
        /* WordPress Timer Widget Styles - Scoped to #timer-widget-663 */
        #timer-widget-663 {
            /* STRONG WordPress theme isolation */
            all: initial !important;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
            line-height: 1.6 !important;
            font-size: 16px !important;
            color: #333 !important;
            background: #f8f9fa !important;
            padding: 1rem !important;
            border-radius: 8px !important;
            margin: 1rem 0 !important;
            display: block !important;
            box-sizing: border-box !important;
        }
        #timer-widget-663 * {
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }
        #timer-widget-663 .app-container {
            max-width: 1200px !important;
            margin: 0 auto !important;
            display: block !important;
        }
        #timer-widget-663 .header-section {
            text-align: center !important;
            margin-bottom: 1.5rem !important;
            padding: 1rem !important;
            background: white !important;
            border-radius: 8px !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
            display: block !important;
        }
        #timer-widget-663 .app-title {
            font-size: 1.6rem !important;
            font-weight: 600 !important;
            color: #2c5aa0 !important;
            margin-bottom: 0.5rem !important;
            line-height: 1.2 !important;
            display: block !important;
        }
        #timer-widget-663 .app-description {
            font-size: 0.95rem !important;
            color: #34495e !important;
            max-width: 600px !important;
            margin: 0 auto !important;
            line-height: 1.4 !important;
            display: block !important;
        }
        #timer-widget-663 .main-content {
            background: white !important;
            border-radius: 8px !important;
            padding: 1rem !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
            border: 1px solid #e1e8ed !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            min-height: 200px !important;
        }
        /* Responsive design */
        @media (max-width: 768px) {
            #timer-widget-663 {
                padding: 0.75rem !important;
            }
            #timer-widget-663 .app-title {
                font-size: 1.4rem !important;
            }
            #timer-widget-663 .header-section, 
            #timer-widget-663 .main-content {
                padding: 0.75rem !important;
            }
        }
        .timer-layout { max-width: 640px; margin: 0 auto; }
        .timer-display { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 10px rgba(0,0,0,0.08); margin-bottom: 1.25rem; }
        .time-display { font-family: 'Courier New', monospace; font-size: 3.25rem; font-weight: 700; color: #2c5aa0; letter-spacing: 0.06em; text-align:center; margin-bottom: 0.75rem; }
        .progress-bar-container { width: 100%; height: 10px; background: #eaeef3; border-radius: 6px; overflow: hidden; }
        .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #2c5aa0 0%, #e67e22 100%); transition: width .25s ease; }
        .progress-text { text-align: center; color: #34495e; margin: .5rem 0 0; font-weight: 500; }
        .session-counter { text-align: center; color: #34495e; margin-top: .25rem; font-size: .9rem; }
        .timer-controls { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin: 1rem 0 1.25rem; }
        .timer-btn { border: 0; border-radius: 10px; padding:.75rem 1.25rem; font-weight:600; color:#fff; cursor:pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
        .timer-start { background: linear-gradient(135deg, #2c5aa0 0%, #e67e22 100%); }
        .timer-pause { background: linear-gradient(135deg, #e67e22 0%, #d87a1a 100%); }
        .timer-reset { background: linear-gradient(135deg, #34495e 0%, #2b3f52 100%); }
        .timer-btn:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; }
        .preset-buttons { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin: 0 .25rem 1rem; }
        .preset-btn { background:#f0f3f7; color:#2b3f52; border:1px solid #d5dbe3; border-radius:999px; padding:.4rem .75rem; cursor:pointer; font-weight:600; }
        .preset-btn:hover { background:#e8edf3; }
        .preset-btn.active { border-color:#2c5aa0; color:#2c5aa0; background:#eef4ff; }
        .timer-settings { background:#fff; border:1px solid #e6ebf1; border-radius: 12px; padding: 1rem; }
        .settings-title { color:#2c5aa0; font-weight:700; margin-bottom:.5rem; font-size:1.05rem; }
        .setting-group { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
        .setting-label { color:#34495e; font-weight:500; }
        .setting-input { width:88px; padding:.5rem; border:1px solid #d5dbe3; border-radius:8px; text-align:center; }
        /* Elegant Countdown Layout */
        .countdown-layout { 
            max-width: 720px; 
            margin: 0 auto; 
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 24px;
            box-shadow: 0 15px 50px rgba(0,0,0,0.12), 0 5px 15px rgba(0,0,0,0.08);
            position: relative;
            overflow: hidden;
        }
        .countdown-layout::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(44,90,160,0.05) 0%, transparent 70%);
            animation: pulse 4s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.1); opacity: 0.5; }
        }
        .countdown-display { 
            background: #ffffff;
            border-radius: 20px; 
            padding: 3rem;
            box-shadow: 0 10px 35px rgba(0,0,0,0.1), inset 0 2px 0 rgba(255,255,255,0.9);
            margin-bottom: 2rem;
            position: relative;
            border: 2px solid rgba(0,0,0,0.03);
            z-index: 1;
        }
        .countdown-time { 
            display: flex; 
            justify-content: center; 
            gap: 2rem; 
            margin-bottom: 2.5rem;
            flex-wrap: wrap;
        }
        .time-unit { 
            text-align: center;
            background: linear-gradient(145deg, #ffffff 0%, #f0f4f8 100%);
            border-radius: 18px;
            padding: 2rem 1.5rem;
            min-width: 120px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1), 
                        inset 0 1px 2px rgba(255,255,255,0.9),
                        0 2px 4px rgba(44,90,160,0.1);
            border: 2px solid rgba(44,90,160,0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .time-unit::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(44,90,160,0.1), transparent);
            transition: left 0.5s ease;
        }
        .time-unit:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 12px 30px rgba(0,0,0,0.15), 
                        inset 0 1px 2px rgba(255,255,255,0.9),
                        0 4px 8px rgba(44,90,160,0.2);
            border-color: rgba(44,90,160,0.15);
        }
        .time-unit:hover::before {
            left: 100%;
        }
        .time-value { 
            display: block; 
            font-family: 'Courier New', 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: 3.5rem; 
            font-weight: 900; 
            color: #2c5aa0;
            line-height: 1; 
            text-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.05);
            margin-bottom: 0.6rem;
            background: linear-gradient(135deg, #2c5aa0 0%, #e67e22 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: all 0.2s ease;
            cursor: text;
            outline: none;
            min-width: 2ch;
            padding: 0.1rem 0.3rem;
            border-radius: 8px;
        }
        .time-value:hover {
            background: linear-gradient(135deg, #e67e22 0%, #2c5aa0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .time-value:focus {
            background: #2c5aa0;
            -webkit-background-clip: initial;
            -webkit-text-fill-color: initial;
            background-clip: initial;
            color: white;
            box-shadow: 0 0 0 3px rgba(44,90,160,0.2);
        }
        .time-label { 
            display: block; 
            font-size: 0.95rem; 
            color: #34495e; 
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            cursor: text;
            outline: none;
            padding: 0.2rem 0.4rem;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        .time-label:hover {
            background: rgba(44,90,160,0.05);
            color: #2c5aa0;
        }
        .time-label:focus {
            background: rgba(44,90,160,0.1);
            color: #2c5aa0;
            box-shadow: 0 0 0 2px rgba(44,90,160,0.15);
        }
        .countdown-info { 
            text-align: center;
            background: #ffffff;
            border-radius: 16px;
            padding: 1.75rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
            border: 1px solid rgba(0,0,0,0.05);
        }
        .target-date { 
            margin-bottom: 1rem; 
            font-weight: 500;
            font-size: 1rem;
        }
        .progress-container { 
            margin-top: 1rem;
        }
        .progress-text {
            font-weight: 500;
            margin-bottom: 0.6rem;
            font-size: 0.9rem;
        }
        .progress-bar-container {
            background: #2c5aa008;
            border-radius: 8px;
            height: 6px;
            overflow: hidden;
            border: 1px solid #2c5aa008;
        }
        .progress-bar {
            height: 100%;
            background: #2c5aa0;
            border-radius: 8px;
            transition: width 0.3s ease;
        }
        @media (max-width: 768px) { 
            .countdown-layout { padding: 1rem; }
            .countdown-display { padding: 2rem 1.5rem; }
            .countdown-time { gap: 1rem; }
            .time-unit { 
                min-width: 80px; 
                padding: 1rem 0.6rem; 
            }
            .time-value { font-size: 2.4rem; }
        }
        @media (max-width: 480px) { 
            .countdown-layout { padding: 0.75rem; }
            .countdown-display { padding: 1.75rem 1.25rem; }
            .countdown-time { gap: 0.75rem; }
            .time-unit { 
                min-width: 75px; 
                padding: 0.9rem 0.5rem; 
            }
            .time-value { font-size: 2rem; }
            .time-label { font-size: 0.75rem; }
            .countdown-info { padding: 1rem; }
        }
/* ElementStyles (timer) */
.app-title { color: #0000ff !important; }
.target-date { color: #2c5aa0 !important; }
.progress-text { color: #2c5aa0 !important; }
.time-value { color: #00ff00 !important; background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial !important; background-clip: initial !important; }
.time-label { color: #34495e !important; }