/* =========================
   متغيرات الألوان والحجم
   ========================= */
:root {
    --bg: #050505;
    --bg-gradient: #111111;
    --card-bg: #151515;
    --glass: rgba(10, 10, 10, 0.85);
    --text-main: #ffffff;
    --text-dim: #a1a1aa;
    --accent: #00f2fe;
    --success: #00ff87;
    --chem-color: #3b82f6;
    --phys-color: #f59e0b;
    --bio-color: #10b981;
    --rev-color: #8b5cf6;
    --sol-color: #ef4444;
    --line: #2a2a2a;
}

/* =========================
   إعدادات عامة للصفحة
   ========================= */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Cairo', sans-serif;
}

html { scroll-behavior: smooth; }

/* تثبيت خلفية الصفحة ومنع التمرير عند فتح النافذة المنبثقة */

body {
    background-color: var(--bg);
    background-image: radial-gradient(circle at top right, var(--bg-gradient), var(--bg));
    color: var(--text-main);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body.modal-open { overflow: hidden; }

/* =========================
   العنوان العلوي والشريط الثابت
   ========================= */
.main-title {
    text-align: center;
    padding: 50px 20px 20px;
}

h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 900;
}

.title-text {
    background: linear-gradient(90deg, #fff, #a1a1aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 2100;
    padding: 20px;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.progress-section { max-width: 600px; margin: 0 auto; }

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 700;
}

.bar-bg {
    background: #222;
    height: 12px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

#bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    width: 0%;
    border-radius: 20px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px var(--success);
    transform-origin: left center;
    will-change: width, transform, filter;
}

@keyframes pulse-bar {
    0% { box-shadow: 0 0 10px var(--success); filter: brightness(1); }
    50% { box-shadow: 0 0 25px var(--success), 0 0 40px var(--success); filter: brightness(1.3); }
    100% { box-shadow: 0 0 10px var(--success); filter: brightness(1); }
}
.pulse-animation { animation: pulse-bar 0.8s ease-out; }

/* =========================
   تخطيط البطاقات والأقسام الرئيسية
   ========================= */
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
.tasks-grid { display: grid; gap: 16px; margin-top: 10px; padding-bottom: 30px; }

.motivation-banner {
    margin: 12px auto 0;
    max-width: 900px;
    text-align: center;
    padding: 14px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(90deg, rgba(0,242,254,.15), rgba(0,255,135,.15));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stat-card,
.today-focus,
.achievements,
.calendar-wrap,
.theme-switcher,
.tasks-toolbar,
.countdown-wrap {
    background: #121212;
    border: 1px solid #2a2a2a;
    border-radius: 18px;
    padding: 14px;
}

.stat-card { text-align: center; }
.stat-card span {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
}
.stat-card small { color: var(--text-dim); }

.today-focus h3,
.achievements h3,
.calendar-wrap h3,
.theme-switcher h3,
.tasks-toolbar h3 {
    margin-top: 0;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ghost-btn {
    border: 1px solid #333;
    background: #1c1c1c;
    color: #fff;
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 800;
    cursor: pointer;
}

.ghost-btn:hover { background: #252525; }

.achievement-badge {
    display: inline-block;
    margin: 4px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #1d1d1d;
    border: 1px solid #333;
}

/* تقويم الشهر الحالي */
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.calendar-day {
    padding: 6px;
    text-align: center;
    border-radius: 8px;
    background: #101010;
    font-size: .75rem;
}
.calendar-day.done { background: rgba(0,255,135,.18); }
.calendar-day.today { outline: 1px solid rgba(0,242,254,.45); box-shadow: 0 0 0 1px rgba(0,242,254,.12) inset; }

/* أزرار اختيار الثيم والفلاتر */
.theme-buttons,
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.theme-buttons button,
.filter-buttons button {
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
    background: #1d1d1d;
    color: #fff;
    border: 1px solid #333;
}
.theme-buttons button:hover,
.filter-buttons button:hover { background: #262626; }
.theme-buttons button.active,
.filter-buttons button.active {
    background: linear-gradient(90deg, var(--accent), var(--success));
    color: #000;
    border-color: transparent;
}

.today-focus {
    display: grid;
    gap: 8px;
}
#todayTask {
    color: #fff;
    font-weight: 800;
    line-height: 1.8;
}


/* =========================
   عداد الامتحانات
   ========================= */
.countdown-wrap { margin-top: 30px; padding-top: 8px; }
.countdown-title { margin: 0 0 12px; font-size: 1.05rem; color: #fff; font-weight: 900; }

#countdownGrid {
    display: grid;
    gap: 12px;
}

.exam-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    direction: rtl;
    background: linear-gradient(180deg, #121212, #101010);
    border: 1px solid #262626;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}

.exam-meta {
    min-width: 0;
    text-align: right;
    flex: 1 1 auto;
}

.exam-line {
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-main);
}

.exam-subject.chem { color: var(--chem-color); text-shadow: 0 0 8px rgba(59,130,246,0.6), 0 0 16px rgba(59,130,246,0.4); }
.exam-subject.phys { color: var(--phys-color); text-shadow: 0 0 8px rgba(245,158,11,0.6), 0 0 16px rgba(245,158,11,0.4); }
.exam-subject.bio { color: var(--bio-color); text-shadow: 0 0 8px rgba(16,185,129,0.6), 0 0 16px rgba(16,185,129,0.4); }
.exam-subject.eng { color: #ff4d4d; text-shadow: 0 0 8px rgba(255,77,77,0.7), 0 0 18px rgba(255,77,77,0.5); }

.exam-date {
    margin-top: 4px;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
}

.countdown-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    direction: ltr;
    overflow-x: auto;
    padding-bottom: 2px;
    max-width: 100%;
}

.time-unit {
    background: #0f0f0f;
    border: 1px solid #2b2b2b;
    border-radius: 14px;
    min-width: 78px;
    padding: 10px 10px 9px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.time-unit[data-unit="days"] { border-color: rgba(255,77,109,0.45); }
.time-unit[data-unit="hours"] { border-color: var(--rev-color); }
.time-unit[data-unit="minutes"] { border-color: var(--rev-color); }
.time-unit[data-unit="seconds"] { border-color: var(--rev-color); }

.time-value {
    display: block;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.1;
}

.time-unit[data-unit="days"] .time-value { color: #ff7a94; }
.time-unit[data-unit="hours"] .time-value { color: white; }
.time-unit[data-unit="minutes"] .time-value { color: white; }
.time-unit[data-unit="seconds"] .time-value { color: white; }

.time-label {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.exam-count { margin-top: 10px; color: #fff; font-weight: 800; font-size: 0.9rem; line-height: 1.6; }
.hint-box { margin-top: 14px; color: var(--text-dim); font-size: 0.85rem; line-height: 1.7; }

.week-section {
    background: linear-gradient(180deg, #131313, #101010);
    border: 1px solid #252525;
    border-radius: 20px;
    padding: 14px;
    display: grid;
    gap: 12px;
}
.week-section.current {
    border-color: rgba(0,242,254,.4);
    box-shadow: 0 0 0 1px rgba(0,242,254,.15) inset;
}
.week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #0f0f0f;
    border: 1px solid #272727;
    border-radius: 16px;
    padding: 12px 14px;
    flex-wrap: wrap;
}
.week-header-left { display: grid; gap: 6px; }
.week-title {
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.5;
}
.week-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.week-subtitle {
    color: var(--text-dim);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.week-badge,
.today-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 900;
    background: rgba(0,242,254,.12);
    color: var(--accent);
    border: 1px solid rgba(0,242,254,.2);
}
.week-badge.current {
    background: rgba(0,255,135,.12);
    color: var(--success);
    border-color: rgba(0,255,135,.22);
}

.week-section.done .week-header {
    background: rgba(0, 255, 135, 0.05);
    border-color: rgba(0, 255, 135, 0.25);
}
.week-section.done .week-title {
    text-decoration: line-through;
    color: var(--text-dim);
}
.week-section.done .week-subtitle { color: var(--success); }
.week-tasks { display: grid; gap: 10px; }

/* =========================
   بطاقات المهام ومؤشرات الحالة
   ========================= */
.day-card {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    touch-action: manipulation;
}
.day-card:hover {
    background: #1a1a1a;
    transform: translateY(-3px);
    border-color: #333;
    box-shadow: 0 10px 20px rgba(0,0,0,0.35);
}
.day-card.dragging { opacity: 0.55; transform: scale(0.99); border-style: dashed; }
.day-card.drag-over { outline: 2px solid rgba(0,242,254,0.35); transform: translateY(-2px); }
.day-card.done { background: rgba(0, 255, 135, 0.03); border-color: rgba(0, 255, 135, 0.2); opacity: 0.88; }
.day-card.done .task { text-decoration: line-through; color: var(--text-dim); }
.day-card.current-day { border-color: rgba(245, 158, 11, 0.55); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15) inset; }

.check-container { display: flex; align-items: center; flex-shrink: 0; }
input[type="checkbox"] {
    appearance: none;
    width: 28px;
    height: 28px;
    border: 2px solid #444;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    background: transparent;
    transition: all 0.2s ease;
}
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
input[type="checkbox"]:checked {
    background: var(--success);
    border-color: var(--success);
    box-shadow: 0 0 15px rgba(0, 255, 135, 0.5);
    animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    color: #000;
    font-size: 18px;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-weight: 900;
}

.content { flex-grow: 1; min-width: 0; }
.date {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.task { font-size: 1.05rem; font-weight: 600; color: var(--text-main); line-height: 1.7; }

.side-column { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.reorder-controls { display: flex; flex-direction: column; gap: 6px; }
.move-btn {
    width: 34px; height: 28px; border: 1px solid #333; border-radius: 8px;
    background: #101010; color: #fff; cursor: pointer; display: grid; place-items: center;
    font-size: 14px; transition: all 0.2s ease;
}
.move-btn:hover { background: #1c1c1c; border-color: #444; transform: translateY(-1px); }
.move-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.drag-handle { color: #6b7280; font-size: 18px; line-height: 1; cursor: grab; padding: 0 2px; }
.drag-handle:active { cursor: grabbing; }

.tag {
    font-size: 0.75rem; padding: 6px 14px; border-radius: 8px; font-weight: 800;
    min-width: 70px; text-align: center; color: #fff; flex-shrink: 0;
}
.tag-chem { background: var(--chem-color); box-shadow: 0 0 10px rgba(59,130,246,0.3); }
.tag-phys { background: var(--phys-color); box-shadow: 0 0 10px rgba(245,158,11,0.3); }
.tag-bio { background: var(--bio-color); box-shadow: 0 0 10px rgba(16,185,129,0.3); color: #000; }
.tag-rev { background: var(--rev-color); box-shadow: 0 0 10px rgba(139,92,246,0.3); }
.tag-sol { background: var(--sol-color); box-shadow: 0 0 10px rgba(239,68,68,0.3); }
.tag-eng {
    background: linear-gradient(135deg, #ff4d4d, #ff00aa);
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.4),
                0 0 20px rgba(255, 77, 77, 0.3);
    color: #fff;
}


/* =========================
   نافذة التأكيد المنبثقة
   ========================= */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1900;
    padding: 16px;
}
.confirm-overlay.show { display: flex; }
.confirm-modal {
    width: min(100%, 440px);
    background: linear-gradient(180deg, #161616, #101010);
    border: 1px solid #2a2a2a;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.confirm-head { padding: 16px 18px 0; }
.confirm-title { margin: 0; font-size: 1.1rem; font-weight: 900; }
.confirm-body { padding: 10px 18px 6px; color: var(--text-dim); line-height: 1.8; font-size: 0.95rem; }
.confirm-task { margin-top: 10px; color: #fff; font-weight: 800; line-height: 1.8; }
.confirm-actions { display: flex; gap: 10px; padding: 16px 18px 18px; }
.confirm-btn {
    flex: 1;
    border: 0;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 900;
    cursor: pointer;
}
.confirm-btn.cancel { background: #222; color: #fff; }
.confirm-btn.ok { background: linear-gradient(90deg, var(--accent), var(--success)); color: #000; }

.confirm-overlay.launching {
    background: rgba(0, 0, 0, 0.52);
    pointer-events: none;
}
.confirm-modal.launching {
    animation: confirmCompress 0.22s ease forwards;
    transform-origin: center center;
    will-change: transform, filter, opacity, clip-path;
}

.sticky-header.confirm-focus {
    box-shadow: 0 6px 34px rgba(0,0,0,0.62), 0 0 0 1px rgba(0,242,254,0.14) inset, 0 0 34px rgba(0,242,254,0.07);
}

.sticky-header.confirm-focus .progress-section {
    position: relative;
    isolation: isolate;
}

.sticky-header.confirm-focus .bar-bg {
    animation: barPrep 0.34s ease-out both, barSettle 0.22s ease-out 0.58s both;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 22px rgba(0,242,254,0.24), 0 0 42px rgba(0,255,135,0.22);
}

#bar-fill.impact-fill {
    animation: barImpactFlash 0.92s ease-out, barSurge 0.92s ease-out;
}

.bar-bg.impact {
    overflow: visible;
}

.bar-bg.impact::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    background: radial-gradient(circle at center, rgba(255,255,255,0.52), rgba(0,242,254,0.26) 32%, transparent 66%);
    opacity: 0;
    pointer-events: none;
    animation: barWave 0.94s ease-out forwards;
}

.task-beam {
    position: fixed;
    width: 10px;
    height: 220px;
    pointer-events: none;
    z-index: 2050;
    opacity: 0;
    transform-origin: center center;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(0,242,254,0.96) 30%, rgba(0,255,135,0.82) 68%, rgba(0,255,135,0));
    box-shadow: 0 0 18px rgba(0,242,254,0.45), 0 0 32px rgba(0,255,135,0.32);
    filter: saturate(1.2);
    mix-blend-mode: screen;
    will-change: transform, opacity, filter;
}

.task-beam::before,
.task-beam::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
}

.task-beam::before {
    inset: -16px 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,242,254,0.18) 42%, rgba(0,255,135,0.08));
    filter: blur(4px);
}

.task-beam::after {
    inset: auto 50% -18px;
    width: 3px;
    height: 28px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 16px rgba(255,255,255,0.95), 0 0 24px rgba(0,255,135,0.8);
    opacity: 0.95;
}

.task-beam.launch {
    animation: beamLaunch var(--beam-duration, 0.98s) cubic-bezier(0.12, 0.84, 0.14, 1) forwards;
}

@keyframes confirmCompress {
    0% {
        transform: scale(1);
        clip-path: inset(0 0 0 0 round 22px);
        opacity: 1;
        filter: brightness(1);
    }
    38% {
        transform: scale(0.96, 0.92);
        clip-path: inset(0 8% 0 8% round 22px);
        opacity: 1;
        filter: brightness(1.1);
    }
    72% {
        transform: scale(0.72, 0.42) translateY(-6px);
        clip-path: inset(16% 32% 16% 32% round 999px);
        opacity: 0.98;
        filter: brightness(1.42) saturate(1.22);
    }
    100% {
        transform: scale(0.12, 0.05) translateY(-30px);
        clip-path: inset(46% 46% 46% 46% round 999px);
        opacity: 0;
        filter: brightness(2) saturate(1.45);
    }
}

@keyframes beamLaunch {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(0, 0) scale(0.42, 0.08);
        filter: brightness(1.2) saturate(1.1);
    }
    6% {
        opacity: 1;
    }
    34% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(var(--beam-mid-x), var(--beam-lift-y)) scale(0.94, 1.08);
    }
    68% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(var(--beam-mid-x), var(--beam-mid-y)) scale(1, 1.14);
        filter: brightness(1.35) saturate(1.25);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--beam-end-x), var(--beam-end-y)) scale(0.72, 0.06);
        filter: brightness(1.6) saturate(1.35);
    }
}

@keyframes barWave {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.16);
    }
}

@keyframes barPrep {
    0% {
        transform: translateY(0) scaleY(1);
        filter: brightness(1) saturate(1);
    }
    100% {
        transform: translateY(-1px) scaleY(1.02);
        filter: brightness(1.12) saturate(1.12);
    }
}

@keyframes barSurge {
    0% {
        transform: scaleX(1) scaleY(1);
    }
    24% {
        transform: scaleX(1.018) scaleY(1.16);
    }
    52% {
        transform: scaleX(1.01) scaleY(0.96);
    }
    100% {
        transform: scaleX(1) scaleY(1);
    }
}

@keyframes barSettle {
    0% {
        transform: translateY(0);
    }
    45% {
        transform: translateY(-1px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes barImpactFlash {
    0% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 10px var(--success);
    }
    30% {
        filter: brightness(1.6) saturate(1.3);
        box-shadow: 0 0 22px rgba(255,255,255,0.45), 0 0 40px rgba(0,255,135,0.55);
    }
    100% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 10px var(--success);
    }
}



/* طبقة انتقال التأكيد الجديدة */
.confirm-overlay.launching {
    background: rgba(0, 0, 0, 0.44);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    pointer-events: none;
}

.confirm-modal {
    position: relative;
    overflow: hidden;
}

.confirm-modal::before,
.confirm-modal::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.confirm-modal::before {
    background:
        radial-gradient(circle at 50% 0%, rgba(0,242,254,0.18), transparent 36%),
        radial-gradient(circle at 50% 100%, rgba(0,255,135,0.10), transparent 28%);
    opacity: 0.8;
    mix-blend-mode: screen;
}

.confirm-modal::after {
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 36%, rgba(255,255,255,0.10) 50%, transparent 64%);
    opacity: 0;
    transform: translateX(-35%);
}

.confirm-modal.launching {
    animation: confirmMorph 1.12s cubic-bezier(.14,.9,.16,1) forwards;
    transform-origin: center center;
    will-change: transform, opacity, filter, clip-path;
}

.confirm-modal.launching::after {
    animation: confirmSweep 1.2s ease-out forwards;
}

.sticky-header.confirm-focus {
    box-shadow:
        0 6px 34px rgba(0,0,0,0.62),
        0 0 0 1px rgba(0,242,254,0.14) inset,
        0 0 34px rgba(0,242,254,0.07),
        0 0 58px rgba(0,255,135,0.08);
}

.sticky-header.confirm-focus .bar-bg {
    animation: barPrep 0.5s ease-out both, barSettle 0.36s ease-out 0.84s both;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 0 22px rgba(0,242,254,0.24),
        0 0 48px rgba(0,255,135,0.24);
}

.bar-bg.impact {
    overflow: visible;
}

.bar-bg.impact::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: inherit;
    background: radial-gradient(circle at center, rgba(255,255,255,0.58), rgba(0,242,254,0.20) 35%, transparent 68%);
    opacity: 0;
    animation: barPulseGlow 1.1s ease-out forwards;
    pointer-events: none;
}

.bar-bg.impact::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: translateX(-32%);
    opacity: 0;
    animation: barSweep 1.05s ease-out forwards;
    pointer-events: none;
}

#bar-fill.impact-fill {
    animation: barImpactFlash 1.12s ease-out, barSurge 1.12s ease-out;
}

.confirm-fx-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2045;
    overflow: hidden;
    mix-blend-mode: screen;
}

.transfer-trail {
    position: absolute;
    left: 0;
    top: 0;
    height: 14px;
    transform-origin: left center;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,0.92) 16%,
        rgba(0,242,254,0.95) 42%,
        rgba(0,255,135,0.72) 74%,
        rgba(0,255,135,0));
    box-shadow:
        0 0 12px rgba(0,242,254,0.35),
        0 0 28px rgba(0,255,135,0.18);
    filter: blur(1px) saturate(1.25);
}

.transfer-trail::before {
    content: '';
    position: absolute;
    inset: -12px 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
        rgba(255,255,255,0),
        rgba(0,242,254,0.22) 40%,
        rgba(0,255,135,0.08) 70%,
        rgba(255,255,255,0));
    filter: blur(6px);
}

.transfer-halo,
.transfer-core {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
}

.transfer-halo {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.42), rgba(0,242,254,0.18) 28%, rgba(0,255,135,0.08) 52%, transparent 72%);
    filter: blur(14px);
}

.transfer-core {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, rgba(255,255,255,0.86) 16%, rgba(0,242,254,0.92) 44%, rgba(0,255,135,0.94) 74%, rgba(0,255,135,0.18) 100%);
    box-shadow:
        0 0 0 6px rgba(0,242,254,0.09),
        0 0 28px rgba(0,242,254,0.38),
        0 0 52px rgba(0,255,135,0.28);
}

.transfer-spark {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,1), rgba(0,242,254,0.95) 42%, rgba(0,255,135,0.12) 72%, transparent 100%);
    box-shadow: 0 0 14px rgba(255,255,255,0.58), 0 0 22px rgba(0,255,135,0.22);
    opacity: 0;
    animation: sparkFly var(--spark-duration, 1100ms) cubic-bezier(.16,.9,.22,1) var(--spark-delay, 0ms) forwards;
}

@keyframes confirmMorph {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: brightness(1) saturate(1);
        clip-path: inset(0 0 0 0 round 22px);
    }
    18% {
        transform: scale(0.985) translateY(-1px);
        opacity: 1;
        filter: brightness(1.08) saturate(1.04);
    }
    46% {
        transform: scale(0.86, 0.76) translateY(-5px);
        opacity: 0.98;
        clip-path: inset(6% 10% 6% 10% round 30px);
        filter: brightness(1.2) saturate(1.1);
    }
    70% {
        transform: scale(0.52, 0.34) translateY(-18px);
        opacity: 0.92;
        clip-path: inset(18% 28% 18% 28% round 999px);
        filter: brightness(1.5) saturate(1.22) blur(0.2px);
    }
    100% {
        transform: scale(0.12) translateY(-42px);
        opacity: 0;
        clip-path: inset(46% 46% 46% 46% round 999px);
        filter: brightness(2.1) saturate(1.45) blur(1.4px);
    }
}

@keyframes confirmSweep {
    0% { opacity: 0; transform: translateX(-48%); }
    18% { opacity: 0.55; }
    100% { opacity: 0; transform: translateX(48%); }
}

@keyframes sparkFly {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
    14% { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--spark-dx)), calc(-50% + var(--spark-dy))) scale(var(--spark-scale, 1));
    }
}

@keyframes barPulseGlow {
    0% { opacity: 0; transform: scale(0.7); }
    16% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.16); }
}

@keyframes barSweep {
    0% { opacity: 0; transform: translateX(-36%); }
    18% { opacity: 0.72; }
    100% { opacity: 0; transform: translateX(36%); }
}

@keyframes barImpactFlash {
    0% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 10px var(--success);
    }
    30% {
        filter: brightness(1.7) saturate(1.35);
        box-shadow: 0 0 20px rgba(255,255,255,0.48), 0 0 44px rgba(0,255,135,0.62);
    }
    100% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 10px var(--success);
    }
}

@keyframes barSurge {
    0% { transform: scaleX(1) scaleY(1); }
    18% { transform: scaleX(1.02) scaleY(1.22); }
    48% { transform: scaleX(1.01) scaleY(0.95); }
    100% { transform: scaleX(1) scaleY(1); }
}

@keyframes barPrep {
    0% {
        transform: translateY(0) scaleY(1);
        filter: brightness(1) saturate(1);
    }
    100% {
        transform: translateY(-1px) scaleY(1.02);
        filter: brightness(1.12) saturate(1.12);
    }
}

@keyframes barSettle {
    0% { transform: translateY(0); }
    45% { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}
@media (max-width: 700px) {
    .exam-card {
        flex-direction: column;
        align-items: stretch;
    }
    .countdown-box {
        justify-content: flex-start;
    }
    .day-card { padding: 16px; gap: 12px; align-items: flex-start; }
    .side-column { align-items: flex-end; }
    .countdown-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    h1 { font-size: 1.4rem; }
    .container { padding: 10px; }
    .task { font-size: 0.95rem; }
    .tag { min-width: 60px; padding: 6px 10px; }
    .section-head { align-items: flex-start; }
}


/* Hierarchical schedule view */
.week-section,
.day-accordion {
    overflow: hidden;
}

.week-section > summary,
.day-accordion > summary {
    list-style: none;
    cursor: pointer;
}

.week-section > summary::-webkit-details-marker,
.day-accordion > summary::-webkit-details-marker {
    display: none;
}

.accordion-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    color: var(--accent);
    font-weight: 900;
    flex-shrink: 0;
    transition: transform 0.25s ease, background 0.25s ease;
}

.week-section[open] > summary .accordion-arrow,
.day-accordion[open] > summary .accordion-arrow {
    transform: rotate(180deg);
}

.week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #0f0f0f;
    border: 1px solid #272727;
    border-radius: 16px;
    padding: 12px 14px;
    flex-wrap: wrap;
}

.week-header-left,
.day-summary-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.week-header-left > div,
.day-summary-text {
    min-width: 0;
}

.week-status,
.day-state {
    color: var(--text-dim);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.week-tasks {
    display: grid;
    gap: 10px;
    padding-top: 2px;
}

.day-accordion {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.day-accordion:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    border-color: #333;
    box-shadow: 0 10px 20px rgba(0,0,0,0.28);
}

.day-accordion.current-day {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15) inset;
}

.day-accordion.done {
    background: rgba(0, 255, 135, 0.03);
    border-color: rgba(0, 255, 135, 0.2);
    opacity: 0.92;
}

.day-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
}

.day-summary-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.day-date {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--accent);
}

.day-hint {
    color: var(--text-dim);
    font-size: 0.8rem;
    font-weight: 700;
}

.day-body {
    display: grid;
    gap: 12px;
    padding: 0 16px 16px;
    border-top: 1px solid rgba(255,255,255,0.04);
    background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0));
}

.task-checkline {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 800;
    line-height: 1.6;
}

.task-checkline span {
    color: var(--text-main);
}

.task-detail {
    color: var(--text-main);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.8;
}


/* Split task day view */
.day-task-list {
    display: grid;
    gap: 10px;
}

.subtask-card {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.25s ease;
}

.subtask-card:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    border-color: #333;
}

.subtask-card.done {
    background: rgba(0, 255, 135, 0.03);
    border-color: rgba(0, 255, 135, 0.2);
    opacity: 0.92;
}

.subtask-card.current-day {
    border-color: rgba(245, 158, 11, 0.45);
}

.subtask-check {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    cursor: pointer;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.6;
}

.subtask-check-label {
    display: inline-block;
    min-width: 76px;
}

.subtask-main {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 8px;
}

.subtask-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.part-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    font-size: 0.76rem;
    font-weight: 800;
}

.subtask-text {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.8;
}
.task-flash {
    animation: taskFlash 0.9s ease-out;
}

@keyframes taskFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.0);
        transform: translateY(0) scale(1);
    }
    35% {
        box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.24), 0 0 24px rgba(0, 242, 254, 0.12);
        transform: translateY(-1px) scale(1.01);
    }
    100% {
        box-shadow: none;
        transform: translateY(0) scale(1);
    }
}
.success-anim {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background:
        radial-gradient(circle at center, rgba(0,255,135,0.16), transparent 34%),
        radial-gradient(circle at center, rgba(0,242,254,0.12), transparent 48%),
        rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    overflow: hidden;
}

.success-anim::before,
.success-anim::after {
    content: '';
    position: absolute;
    inset: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.success-anim::before {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0,255,135,.14) 0%, rgba(0,255,135,.08) 18%, transparent 55%);
    filter: blur(6px);
    opacity: 0;
}

.success-anim::after {
    width: 460px;
    height: 460px;
    border: 1px solid rgba(0,255,135,.14);
    box-shadow:
        0 0 0 10px rgba(0,255,135,.03) inset,
        0 0 50px rgba(0,255,135,.08);
    opacity: 0;
}

.success-anim.show {
    opacity: 1;
}

.success-anim.show::before {
    animation: burstGlow 1.35s ease-out forwards;
}

.success-anim.show::after {
    animation: burstRing 1.35s ease-out forwards;
}

.success-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(22,22,28,.98), rgba(8,8,10,.98));
    border: 1px solid rgba(0,255,135,.26);
    box-shadow:
        0 20px 60px rgba(0,0,0,.55),
        0 0 0 1px rgba(0,242,254,.08) inset,
        0 0 24px rgba(0,255,135,.16);
    transform: translateY(24px) scale(.9);
    opacity: 0;
    overflow: hidden;
}

.success-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
    transform: translateX(-130%);
    pointer-events: none;
}

.success-anim.show .success-card {
    animation: successCardIn 0.62s cubic-bezier(.16,.95,.24,1) forwards;
}

.success-anim.show .success-card::before {
    animation: successShine 1.15s ease-out forwards;
}

.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    position: relative;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.24), rgba(0,255,135,.16) 36%, rgba(0,255,135,.06) 70%);
    border: 1px solid rgba(0,255,135,.45);
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    box-shadow:
        0 0 0 6px rgba(0,255,135,.08),
        0 0 26px rgba(0,255,135,.32);
    flex-shrink: 0;
}

.checkmark::before,
.checkmark::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 22px;
    border: 2px solid rgba(0,255,135,.25);
    opacity: 0;
}

.success-anim.show .checkmark::before {
    animation: ringPulse 1.1s ease-out infinite;
}

.success-anim.show .checkmark::after {
    animation: ringPulse 1.1s ease-out .18s infinite;
}

.success-text {
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: .2px;
    text-shadow: 0 0 10px rgba(0,255,135,.14);
}

@keyframes successCardIn {
    0% {
        transform: translateY(24px) scale(.9) rotate(-1deg);
        opacity: 0;
    }
    55% {
        transform: translateY(0) scale(1.03) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes successShine {
    0% { transform: translateX(-130%); opacity: 0; }
    25% { opacity: .6; }
    100% { transform: translateX(130%); opacity: 0; }
}

@keyframes burstGlow {
    0% { transform: translate(-50%, -50%) scale(.72); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.22); opacity: 0; }
}

@keyframes burstRing {
    0% { transform: translate(-50%, -50%) scale(.55); opacity: 0; }
    20% { opacity: .8; }
    100% { transform: translate(-50%, -50%) scale(1.08); opacity: 0; }
}

@keyframes ringPulse {
    0% { transform: scale(.72); opacity: 0; }
    20% { opacity: .65; }
    100% { transform: scale(1.18); opacity: 0; }
}