/* 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-1206 */
        /* WordPress Timer Widget Styles - Scoped to #timer-widget-1206 */
        #timer-widget-1206 {
            /* 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-1206 * {
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }
        #timer-widget-1206 .app-container {
            max-width: 1200px !important;
            margin: 0 auto !important;
            display: block !important;
        }
        #timer-widget-1206 .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-1206 .app-title {
            font-size: 1.6rem !important;
            font-weight: 600 !important;
            color: #27ae60 !important;
            margin-bottom: 0.5rem !important;
            line-height: 1.2 !important;
            display: block !important;
        }
        #timer-widget-1206 .app-description {
            font-size: 0.95rem !important;
            color: #16a085 !important;
            max-width: 600px !important;
            margin: 0 auto !important;
            line-height: 1.4 !important;
            display: block !important;
        }
        #timer-widget-1206 .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-1206 {
                padding: 0.75rem !important;
            }
            #timer-widget-1206 .app-title {
                font-size: 1.4rem !important;
            }
            #timer-widget-1206 .header-section, 
            #timer-widget-1206 .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: #27ae60; 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, #27ae60 0%, #2ecc71 100%); transition: width .25s ease; }
        .progress-text { text-align: center; color: #16a085; margin: .5rem 0 0; font-weight: 500; }
        .session-counter { text-align: center; color: #16a085; 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, #27ae60 0%, #2ecc71 100%); }
        .timer-pause { background: linear-gradient(135deg, #2ecc71 0%, #d87a1a 100%); }
        .timer-reset { background: linear-gradient(135deg, #16a085 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:#27ae60; color:#27ae60; background:#eef4ff; }
        .timer-settings { background:#fff; border:1px solid #e6ebf1; border-radius: 12px; padding: 1rem; }
        .settings-title { color:#27ae60; 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:#16a085; 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: 680px; 
            margin: 0 auto; 
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            position: relative;
        }
        .countdown-display { 
            background: #ffffff;
            border-radius: 18px; 
            padding: 2.5rem;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
            margin-bottom: 2rem;
            position: relative;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .countdown-time { 
            display: flex; 
            justify-content: center; 
            gap: 1.5rem; 
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }
        .time-unit { 
            text-align: center;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 16px;
            padding: 1.75rem 1.25rem;
            min-width: 110px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.06);
            transition: all 0.2s ease;
        }
        .time-unit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
        }
        .time-value { 
            display: block; 
            font-family: 'Courier New', monospace;
            font-size: 3rem; 
            font-weight: 800; 
            color: #27ae60;
            line-height: 1; 
            text-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 0.5rem;
        }
        .time-label { 
            display: block; 
            font-size: 0.9rem; 
            color: #16a085; 
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .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: #27ae6008;
            border-radius: 8px;
            height: 6px;
            overflow: hidden;
            border: 1px solid #27ae6008;
        }
        .progress-bar {
            height: 100%;
            background: #27ae60;
            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: {'color': '#27ae60'} !important; }
.target-date { color: #27ae60 !important; }
.progress-text { color: #27ae60 !important; }
.time-value { color: {'color': '#2ecc71'} !important; background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial !important; background-clip: initial !important; }
.time-label { color: #16a085 !important; }