@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@700&display=swap');
                
        :root {
            --bg: #0b1120; --card: #1e293b; --accent: #38bdf8;
            --success: #10b981; --text: #f1f5f9; --sub: #94a3b8; --border: #334155;
            --error: #ef4444;
            --premium-grad: linear-gradient(135deg, #10b981, #059669);
            --error-grad: linear-gradient(135deg, #ef4444, #b91c1c);
            --neon-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
        }

        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 10px; overflow-x: hidden; }
                
        .header { text-align: center; padding: 15px 0; position: sticky; top: 0; background: rgba(11, 17, 32, 0.95); z-index: 100; border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }
        
        .countdown-box {
            display: inline-flex; gap: 6px; background: rgba(15, 23, 42, 0.8);
            padding: 10px 15px; border-radius: 12px; border: 1px solid var(--accent);
            box-shadow: var(--neon-shadow); margin: 8px 0;
            transition: 0.3s ease;
        }

        /* --- Global Timer States --- */
        .timer-locked { opacity: 0.3; filter: grayscale(1); }
        
        .timer-running { 
            animation: timerBlink 2s infinite; 
            opacity: 1 !important; 
            filter: none !important; 
        }

        @keyframes timerBlink {
            0%, 100% { border-color: var(--accent); box-shadow: var(--neon-shadow); }
            50% { border-color: #0ea5e9; box-shadow: 0 0 25px rgba(56, 189, 248, 0.7); }
        }

        .time-unit { display: flex; flex-direction: column; align-items: center; min-width: 35px; }
        .time-val { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 800; color: var(--accent); line-height: 1; }
        .time-label { font-size: 7px; color: var(--sub); text-transform: uppercase; margin-top: 3px; font-weight: 700; }
        .sep { font-size: 18px; font-weight: 800; color: var(--border); line-height: 1; }

        .progress-container { width: 92%; max-width: 400px; margin: 8px auto; }
        .progress-bar { height: 5px; background: #334155; border-radius: 10px; overflow: hidden; margin-bottom: 4px; }
        #fill { height: 100%; width: 0%; background: linear-gradient(90deg, #38bdf8, #10b981); transition: 1s cubic-bezier(0.4, 0, 0.2, 1); }

/* বাটন স্টাইল - যা সবসময় সমান থাকবে */
.start-btn { 
    flex: 1; /* স্ক্রিন যাই হোক, দুই বাটন সবসময় সমান জায়গা নিবে */
    background: linear-gradient(135deg, #38bdf8, #1e3a8a); 
    color: white; 
    border: none; 
    padding: 10px 4px; /* প্যাডিং মোবাইলের জন্য অপ্টিমাইজড */
    border-radius: 30px; 
    font-weight: 800; 
    cursor: pointer; 
    font-size: 10px; /* লেখা যেন মোবাইলে আটে */
    transition: 0.3s; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* সেশন শুরু হলে বাটনের লুক */
.btn-running { 
    background: transparent !important; 
    border: 2px solid var(--success) !important; 
    color: var(--success) !important; 
    animation: btnBlink 1.5s infinite; 
}
        @keyframes btnBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

        /* Missed Task: Left border removed */
        tr.missed { background: rgba(239, 68, 68, 0.25) !important; animation: missedBlink 2s infinite; }
        @keyframes missedBlink { 0%, 100% { background: rgba(239, 68, 68, 0.2); } 50% { background: rgba(239, 68, 68, 0.35); } }

        .row-timer {
            display: flex; gap: 2px; background: rgba(56, 189, 248, 0.05);
            padding: 3px 4px; border-radius: 4px; border: 1px solid rgba(56, 189, 248, 0.2);
            margin-top: 4px; justify-content: center; align-items: center;
        }
        .rt-val { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--accent); }
        .rt-sep { color: var(--border); font-size: 9px; font-weight: 800; }

        .container { max-width: 950px; margin: 10px auto; background: var(--card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
        table { width: 100%; border-collapse: collapse; table-layout: fixed; }
        th { background: #0f172a; color: var(--sub); padding: 12px 4px; font-size: 10px; text-transform: uppercase; text-align: center; }
        
        td { 
            padding: 10px 4px; border-bottom: 1px solid var(--border); font-size: 12px; 
            vertical-align: middle; text-align: center; white-space: normal; 
            word-wrap: break-word; overflow-wrap: break-word; 
        }

        .col-date { width: 80px; }
        .col-task { width: auto; }
        .col-bio { width: 90px; }
        .col-done { width: 45px; }

        .t-cell, .col-bio { 
            cursor: grab; 
            padding: 10px 8px; 
            transition: opacity 0.15s ease-in-out, transform 0.2s ease, background 0.2s ease; 
        }
        .t-cell:active, .col-bio:active { 
            cursor: grabbing; 
            opacity: 0.6; 
            transform: scale(0.95); 
        }
        /* Cell background transparent রাখা জরুরি যেন Row এর কালার দেখা যায় */
        td { background: transparent !important; } 

        .drag-over { 
            /* background তুলে দিয়ে শুধু একটা গ্লো আর বর্ডার দিচ্ছি */
            background: rgba(56, 189, 248, 0.1) !important; 
            outline: 2px solid var(--accent) !important;
            outline-offset: -2px;
            box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
            z-index: 5;
        }

        .month-row { background: #1e3a8a; color: #fff; font-weight: 800; text-align: center; font-size: 12px; }
        tr.done { background: rgba(16, 185, 129, 0.04); color: var(--sub); }
        tr.done td:not(.status-td) { text-decoration: line-through; opacity: 0.4; cursor: not-allowed !important; }

        input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--success); }

        #toast-box { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
        /* --- Butter Smooth Toast Exit Animation --- */
.toast { 
    background: var(--premium-grad); color: white; padding: 10px 20px; border-radius: 50px; font-weight: 700; font-size: 12px; 
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3); 
    animation: toastPop 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    /* যাওয়ার সময় যেন হুট করে গায়েব না হয়ে স্মুথলি যায় */
    transition: opacity 0.4s ease, transform 0.4s ease; 
}
        .toast.red { background: var(--error-grad); }
        @keyframes toastPop { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        /* --- Butter Smooth Modal Animations --- */
#modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; 
    z-index: 10000; backdrop-filter: blur(6px);
    /* display: none এর বদলে opacity এবং visibility ব্যবহার করা হলো স্মুথ ট্রানজিশনের জন্য */
    opacity: 0; visibility: hidden; pointer-events: none; 
    transition: opacity 0.3s ease, visibility 0.3s ease; 
}
#modal-overlay.show { 
    opacity: 1; visibility: visible; pointer-events: auto; 
}
.modal { 
    background: #1e293b; padding: 25px; border-radius: 20px; border: 1px solid var(--border); 
    max-width: 300px; width: 85%; text-align: center; 
    /* পপ-আপ স্প্রিং ইফেক্ট */
    transform: scale(0.8) translateY(20px); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
#modal-overlay.show .modal { 
    transform: scale(1) translateY(0); 
}

        .modal-btns { display: flex; gap: 10px; margin-top: 20px; }
        .modal-btn { padding: 10px; border-radius: 8px; border: none; font-weight: 700; flex: 1; cursor: pointer; }
        
        .particle { position: fixed; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; pointer-events: none; animation: burst 0.6s ease-out forwards; }
        @keyframes burst { to { transform: translate(var(--x), var(--y)); opacity: 0; } }
        
        /* Scroll Mode Styles */
.container.scroll-active {
    overflow-x: auto !important;
}
.container.scroll-active table {
    width: 900px !important; /* স্ক্রল মোডে টেবিলটি ৯০০ পিক্সেল চওড়া হবে */
    table-layout: auto !important;
}
/* Scroll Button Active State */
#scroll-btn.active {
    background: transparent !important;
    border: 2px solid var(--accent);
    color: var(--accent);
    box-shadow: var(--neon-shadow);
}

/* বাটন গ্রুপ - যা প্রগ্রেস বারের সমান চওড়া থাকবে */
.btn-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 12px auto;
    width: 92%; /* মোবাইলে দুই পাশে সামান্য গ্যাপ রেখে ফিট হবে */
    max-width: 400px;
}

/* Row Delete Button */
.delete-row-btn {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--error);
    color: var(--error);
    border-radius: 4px;
    font-size: 10px;
    padding: 3px 5px;
    cursor: pointer;
    margin-top: 5px;
    width: 100%;
    font-weight: bold;
    transition: 0.3s;
}
.delete-row-btn:hover { background: var(--error); color: white; }
/* Inline Task Edit Pencil Icon */
.t-cell { position: relative; cursor: pointer; }
.edit-icon {
    position: absolute; 
    top: 4px; 
    right: 4px; 
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--accent); 
    border-radius: 4px; 
    padding: 4px;
    font-size: 11px; 
    cursor: pointer; 
    opacity: 0; 
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 10;
}
.t-cell:hover .edit-icon {
    opacity: 1; 
    visibility: visible;
}
.edit-icon:hover {
    background: var(--accent);
    color: #fff;
}

/* Hide edit icon and disable pointer events for done tasks */
tr.done .t-cell { cursor: not-allowed; }
tr.done .edit-icon { display: none !important; opacity: 0 !important; visibility: hidden !important; }

.app-footer {
    margin-top: 40px;
    padding: 20px 10px;
    border-top: 1px solid var(--border);
    text-align: center;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(5px);
}

.footer-content p {
    font-size: 11px;
    color: var(--sub);
    margin: 0 0 10px 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* নির্দিষ্ট টাস্ক কাটা বা স্ট্রাইক করার স্টাইল */
.task-text.striked {
    text-decoration: line-through;
    opacity: 0.5;
    transition: 0.3s;
}

.contact-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.contact-links a {
    color: var(--accent);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.contact-links a:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--accent);
}

.dot {
    width: 4px;
    height: 4px;
    background: var(--border);
    border-radius: 50%;
}