* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #bae6fd; /* the animated tree scene (.bg-scene) is drawn behind everything */
    color: #333;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Profile Header */
.profile-header {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    position: relative;
}

.cover-img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    display: block;
}

.profile-info-container {
    padding: 0 20px 20px 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: -80px;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.profile-left {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.dp-img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    object-fit: cover;
    background: #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

/* Glassmorphism style profile details overlay */
.profile-details {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 14px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.profile-details h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1a252f;
    line-height: 1.2;
    margin-bottom: 4px;
}

.profile-details p {
    color: #2c3e50;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.profile-details .username-text {
    color: #d35400;
    font-weight: 700;
}

.profile-details .college-text {
    color: #2980b9;
    font-weight: 600;
}

/* Social Media Styled Buttons */
.social-links {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.btn-social {
    padding: 6px 14px;
    border-radius: 6px;
    color: white !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.btn-social:hover {
    opacity: 0.85;
}

.btn-whatsapp {
    background-color: #25D366; /* WhatsApp Green */
}

.btn-linkedin {
    background-color: #0A66C2; /* LinkedIn Blue */
}

/* Page Navigation Buttons (About, Journal & History) */
.page-nav-buttons {
    display: flex;
    gap: 10px;
    align-self: flex-end;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.btn-nav {
    padding: 8px 16px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.1s;
}

.btn-nav:active {
    transform: scale(0.98);
}

.btn-about {
    background-color: #8e44ad;
}

.btn-journal {
    background-color: #16a085;
}

.btn-history {
    background-color: #d35400;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.card h3 {
    margin-bottom: 15px;
    font-size: 18px;
    color: #2c3e50;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Form Styles */
.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 4px;
}
 .form-group label .hint {
    color: #999;
    font-weight: 400;
    font-size: 11px;
}

.form-icon {
    color: #3498db;
    width: 16px;
    text-align: center;
    margin-right: 4px;
}

.form-group input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.btn-submit {
    background: #2ecc71;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-submit:hover {
    background: #27ae60;
}

/* Itemized Activity Adder (Education / Skill Development) */
.activity-group {
    background: #f8f9fa;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.activity-adder {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.activity-adder input[type="text"] {
    flex: 2;
}

.activity-adder input[type="number"] {
    flex: 1;
}

.btn-add-activity {
    background: #2ecc71;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0 14px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-add-activity:hover {
    background: #27ae60;
}

.activity-list {
    list-style: none;
    margin-bottom: 8px;
    max-height: 130px;
    overflow-y: auto;
}

.activity-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #eee;
    padding: 5px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 13px;
}

.activity-list li span:first-child {
    font-weight: 600;
    color: #2c3e50;
}

.remove-activity-btn {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    padding: 0 4px;
}

.activity-total {
    font-size: 12px;
    font-weight: 600;
    color: #16a085;
}

/* Filters */
.filters {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.filter-btn {
    background: #ecf0f1;
    border: none;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    transition: all 0.2s;
}

.filter-btn.active, .filter-btn:hover {
    background: #3498db;
    color: white;
}

/* Trend Chart's own filter row (inside modal) */
.trend-filters {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.trend-filter-btn {
    padding: 6px 16px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    transition: all 0.2s;
}

.trend-filter-btn.active, .trend-filter-btn:hover {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

/* Comparison Widget */
.comparison-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.arrow-indicator {
    font-size: 18px;
    font-weight: bold;
}
.arrow-indicator.up { color: #2ecc71; }
.arrow-indicator.down { color: #e74c3c; }

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 10px; right: 15px;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    color: #aaa;
}
.close-btn:hover { color: #000; }

.diff-table th, .diff-table td {
    text-align: center;
}

.diff-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
}

.diff-table th, .diff-table td {
    padding: 8px;
    border: 1px solid #eee;
}
 .chart-container {
    position: relative;
    height: 250px;
    width: 100%;
}

/* =====================================================
   MODERN THEME + ANIMATIONS  (animated aurora, glass UI)
   ===================================================== */

/* ---- Animated background (replaces the photo) ---- */
body { position: relative; min-height: 100vh; }

@keyframes blurIn    { from { opacity: 0; transform: translateY(30px) scale(.97); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-36px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes popIn     { 0% { opacity: 0; transform: scale(.5) rotate(-12deg); } 70% { transform: scale(1.1) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes float     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ringPulse {
    0%   { box-shadow: 0 6px 16px rgba(0,0,0,.2), 0 0 0 0 rgba(99,102,241,.6); }
    70%  { box-shadow: 0 6px 16px rgba(0,0,0,.2), 0 0 0 16px rgba(99,102,241,0); }
    100% { box-shadow: 0 6px 16px rgba(0,0,0,.2), 0 0 0 0 rgba(99,102,241,0); }
}
@keyframes gradientShift { to { background-position: 300% 0; } }
@keyframes shine     { to { left: 130%; } }
@keyframes bob       { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes wiggle    { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop  { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes itemIn    { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- Glass surfaces ---- */
.profile-header, .card {
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 10px 30px rgba(8,12,40,.25);
}
.profile-header { animation: blurIn .8s cubic-bezier(.2,.8,.2,1) backwards; }

/* ---- Profile ---- */
.dp-img { animation: popIn .8s cubic-bezier(.2,.9,.3,1.2) .3s backwards, float 5s ease-in-out 1.1s infinite, ringPulse 2.6s ease-out 1.1s infinite; }
.profile-details { animation: slideInLeft .8s cubic-bezier(.2,.8,.2,1) .45s backwards; }
.profile-details h1 {
    background: linear-gradient(90deg, #4f46e5, #06b6d4, #ec4899, #4f46e5);
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
    color: transparent; animation: gradientShift 7s linear infinite;
}

/* ---- Buttons ---- */
.btn-about   { background: linear-gradient(135deg, #7c3aed, #6366f1); }
.btn-journal { background: linear-gradient(135deg, #0d9488, #06b6d4); }
.btn-history { background: linear-gradient(135deg, #f97316, #ec4899); }
.btn-nav, .btn-social { transition: transform .25s, box-shadow .25s, filter .25s; }
.btn-nav:hover    { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 22px rgba(0,0,0,.3); filter: brightness(1.1); }
.btn-nav:active   { transform: scale(.96); }
.btn-nav:hover i  { animation: wiggle .5s ease; }
.btn-social:hover { transform: translateY(-2px); }
.page-nav-buttons .btn-nav { animation: fadeUp .5s ease-out backwards; }
.page-nav-buttons .btn-nav:nth-child(1) { animation-delay: .6s; }
.page-nav-buttons .btn-nav:nth-child(2) { animation-delay: .7s; }
.page-nav-buttons .btn-nav:nth-child(3) { animation-delay: .8s; }

.filter-btn { animation: fadeUp .5s ease-out backwards; }
.filter-btn:hover { transform: translateY(-2px); }
.filter-btn.active, .filter-btn:hover { background: linear-gradient(135deg, #4f46e5, #06b6d4); color: #fff; }
.filters > :nth-child(1) { animation-delay: .70s; } .filters > :nth-child(2) { animation-delay: .76s; }
.filters > :nth-child(3) { animation-delay: .82s; } .filters > :nth-child(4) { animation-delay: .88s; }
.filters > :nth-child(5) { animation-delay: .94s; } .filters > :nth-child(6) { animation-delay: 1s; }
.filters > :nth-child(7) { animation-delay: 1.06s; } .filters > :nth-child(8) { animation-delay: 1.12s; }
.filters > :nth-child(9) { animation-delay: 1.18s; }

/* ---- Cards ---- */
.card { position: relative; overflow: hidden; animation: blurIn .7s cubic-bezier(.2,.8,.2,1) backwards; transition: transform .3s, box-shadow .3s; }
.card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #6366f1, #06b6d4, #ec4899);
    transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(8,12,40,.35); }
.card:hover::before { transform: scaleX(1); }
.dashboard-grid .card:nth-child(1) { animation-delay: .9s; }
.dashboard-grid .card:nth-child(2) { animation-delay: 1.05s; }
.dashboard-grid .card:nth-child(3) { animation-delay: 1.2s; }

/* ---- Form ---- */
.form-group input { transition: border-color .2s, box-shadow .2s; }
.form-group input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.btn-submit { position: relative; overflow: hidden; background: linear-gradient(135deg, #10b981, #06b6d4); }
.btn-submit:hover { background: linear-gradient(135deg, #059669, #0891b2); }
.btn-submit::after {
    content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg);
}
.btn-submit:hover::after { animation: shine .8s ease; }
.btn-add-activity { transition: background .2s, transform .2s; }
.btn-add-activity:hover { transform: scale(1.1); }

/* ---- Dynamic content ---- */
.activity-list li { animation: itemIn .3s ease-out; }
#percentageBreakdown > * { animation: fadeUp .4s ease-out backwards; }
#percentageBreakdown > :nth-child(2) { animation-delay: .06s; } #percentageBreakdown > :nth-child(3) { animation-delay: .12s; }
#percentageBreakdown > :nth-child(4) { animation-delay: .18s; } #percentageBreakdown > :nth-child(5) { animation-delay: .24s; }
.arrow-indicator { display: inline-block; animation: bob 1.4s ease-in-out infinite; }

/* ---- Modals (script.js sets display:flex, so this replays on every open) ---- */
.modal { animation: fadeIn .25s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(8,12,40,.55); }
.modal-content { animation: modalPop .4s cubic-bezier(.2,.9,.3,1.2); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.close-btn { transition: color .2s, transform .3s; }
.close-btn:hover { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Sky, tree, people, panels (realistic scene) ===== */
:root { --cyc: 90s; --delay: -14s; }
@keyframes sunArc{0%{transform:translate(4vw,112vh)}3%{transform:translate(4vw,100vh)}9.1%{transform:translate(15.2vw,71.7vh)}15.2%{transform:translate(26.5vw,47.7vh)}21.4%{transform:translate(37.8vw,31.6vh)}27.5%{transform:translate(49vw,26vh)}33.6%{transform:translate(60.2vw,31.6vh)}39.8%{transform:translate(71.5vw,47.7vh)}45.9%{transform:translate(82.8vw,71.7vh)}52%{transform:translate(94vw,100vh)}100%{transform:translate(94vw,112vh)}}
@keyframes moonArc{0%{transform:translate(6vw,112vh)}56%{transform:translate(6vw,100vh)}61.2%{transform:translate(16.8vw,69.4vh)}66.5%{transform:translate(27.5vw,43.4vh)}71.8%{transform:translate(38.2vw,26.1vh)}77%{transform:translate(49vw,20vh)}82.2%{transform:translate(59.8vw,26.1vh)}87.5%{transform:translate(70.5vw,43.4vh)}92.8%{transform:translate(81.2vw,69.4vh)}98%{transform:translate(92vw,100vh)}100%{transform:translate(92vw,112vh)}}
@keyframes dayOp{0%{opacity:0}12%{opacity:1}42%{opacity:1}52%{opacity:0}100%{opacity:0}}
@keyframes warmOp{0%{opacity:0}4%{opacity:.5}7%{opacity:1}15%{opacity:0}38%{opacity:0}46%{opacity:1}50%{opacity:.9}58%{opacity:0}100%{opacity:0}}
@keyframes nightOp{0%{opacity:1}6%{opacity:.7}12%{opacity:0}44%{opacity:0}52%{opacity:.5}60%{opacity:1}100%{opacity:1}}
html, body { overflow-x: hidden; }
body { display: flex; flex-direction: column; padding-bottom: 0; min-height: 100vh; min-height: 100dvh; }
.container { width: 100%; flex: 1; display: flex; flex-direction: column; }
.profile-header, .filters { position: relative; z-index: 2; }
.profile-header, .card { background: rgba(255,255,255,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* --- sky --- */
.bg-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #5fb3f0; }
.sky { position: absolute; inset: 0; animation-duration: var(--cyc); animation-delay: var(--delay); animation-iteration-count: infinite; animation-timing-function: linear; }
.sky-day   { background: linear-gradient(#5fb3f0 0%, #a8dcff 58%, #e8f6ff 100%); animation-name: dayOp; }
.sky-warm  { background: linear-gradient(#4b5fa8 0%, #d97a8a 45%, #ffb26b 80%, #ffe0a3 100%); animation-name: warmOp; opacity: 0; }
.sky-night { background: linear-gradient(#050a24 0%, #0d1b4c 55%, #22366f 100%); animation-name: nightOp; }
.stars { position: absolute; inset: 0; animation: nightOp var(--cyc) linear var(--delay) infinite; }
.stars::before, .stars::after { content: ''; position: absolute; inset: 0; }
.stars::before { background-image: radial-gradient(1.7px 1.9px at 90% 55%,#fff,transparent),radial-gradient(1.9px 2.1px at 5% 55%,#fff,transparent),radial-gradient(1.6px 2.1px at 85% 5%,#fff,transparent),radial-gradient(2.1px 1.1px at 62% 57%,#fff,transparent),radial-gradient(1.3px 1.7px at 75% 17%,#fff,transparent),radial-gradient(1px 1.3px at 37% 13%,#fff,transparent),radial-gradient(2.1px 1.9px at 22% 50%,#fff,transparent),radial-gradient(2px 1.2px at 81% 30%,#fff,transparent),radial-gradient(1.2px 1px at 2% 15%,#fff,transparent),radial-gradient(1.9px 2.2px at 23% 57%,#fff,transparent),radial-gradient(1.2px 1.4px at 27% 36%,#fff,transparent),radial-gradient(2.1px 1.8px at 25% 46%,#fff,transparent),radial-gradient(1.2px 2.2px at 51% 21%,#fff,transparent),radial-gradient(1px 1.5px at 20% 18%,#fff,transparent),radial-gradient(1.1px 1.4px at 79% 39%,#fff,transparent),radial-gradient(1px 1.8px at 45% 6%,#fff,transparent),radial-gradient(1.4px 2px at 63% 46%,#fff,transparent),radial-gradient(1.4px 1.6px at 92% 13%,#fff,transparent),radial-gradient(1.1px 2.2px at 4% 49%,#fff,transparent),radial-gradient(1.4px 1.5px at 72% 52%,#fff,transparent),radial-gradient(1.5px 1.5px at 3% 30%,#fff,transparent),radial-gradient(1.1px 1.2px at 27% 9%,#fff,transparent),radial-gradient(1.9px 2.1px at 61% 24%,#fff,transparent),radial-gradient(1.6px 2.1px at 34% 51%,#fff,transparent),radial-gradient(1.6px 1.7px at 49% 57%,#fff,transparent),radial-gradient(1.4px 1.5px at 13% 15%,#fff,transparent); animation: twinkle 4s ease-in-out infinite; }
.stars::after  { background-image: radial-gradient(1.3px 1.6px at 20% 23%,#dbe7ff,transparent),radial-gradient(1.3px 1.7px at 13% 21%,#dbe7ff,transparent),radial-gradient(1.7px 1.3px at 12% 42%,#dbe7ff,transparent),radial-gradient(1.1px 1.7px at 63% 12%,#dbe7ff,transparent),radial-gradient(1.7px 1.1px at 78% 36%,#dbe7ff,transparent),radial-gradient(1.9px 1px at 96% 40%,#dbe7ff,transparent),radial-gradient(1.3px 1.3px at 85% 28%,#dbe7ff,transparent),radial-gradient(1.1px 2px at 83% 4%,#dbe7ff,transparent),radial-gradient(1.8px 1.3px at 28% 10%,#dbe7ff,transparent),radial-gradient(2px 1.6px at 18% 42%,#dbe7ff,transparent),radial-gradient(1.9px 1.4px at 23% 29%,#dbe7ff,transparent),radial-gradient(1.4px 1.1px at 55% 20%,#dbe7ff,transparent),radial-gradient(1.1px 1.9px at 81% 56%,#dbe7ff,transparent),radial-gradient(1.2px 1.5px at 64% 46%,#dbe7ff,transparent),radial-gradient(1.7px 1.5px at 39% 32%,#dbe7ff,transparent),radial-gradient(1.4px 1.1px at 50% 54%,#dbe7ff,transparent),radial-gradient(2px 2px at 82% 33%,#dbe7ff,transparent),radial-gradient(1.9px 1.2px at 64% 19%,#dbe7ff,transparent),radial-gradient(1.5px 1.5px at 66% 25%,#dbe7ff,transparent),radial-gradient(1.1px 1.8px at 47% 46%,#dbe7ff,transparent),radial-gradient(1.6px 1px at 41% 25%,#dbe7ff,transparent),radial-gradient(1.6px 1.7px at 64% 18%,#dbe7ff,transparent),radial-gradient(1.8px 1.7px at 39% 23%,#dbe7ff,transparent),radial-gradient(1.6px 1.6px at 3% 32%,#dbe7ff,transparent),radial-gradient(1.5px 1.3px at 87% 19%,#dbe7ff,transparent),radial-gradient(1.5px 1.8px at 84% 45%,#dbe7ff,transparent); animation: twinkle 6s ease-in-out -2s infinite; }
@keyframes twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.sun, .moon { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: var(--cyc); animation-delay: var(--delay); }
.sun { width: clamp(58px, 8vw, 100px); aspect-ratio: 1; animation-name: sunArc; margin: -30px 0 0 -30px;
    background: radial-gradient(circle, #fffde8 0, #ffe680 42%, #ffc933 72%); box-shadow: 0 0 60px 26px rgba(255,214,80,.55), 0 0 150px 70px rgba(255,190,60,.25); }
.sun::after { content: ''; position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, rgba(255,110,40,.7), transparent 65%); opacity: 0; animation: warmOp var(--cyc) linear var(--delay) infinite; }
.moon { width: clamp(42px, 5.4vw, 68px); aspect-ratio: 1; animation-name: moonArc; margin: -20px 0 0 -20px;
    background: radial-gradient(circle at 35% 35%, #fff, #e9edf7 55%, #c5cee2); box-shadow: 0 0 34px 10px rgba(220,230,255,.55); }
.moon::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 60% 40%, rgba(150,160,190,.4) 0 9%, transparent 10%), radial-gradient(circle at 38% 68%, rgba(150,160,190,.35) 0 12%, transparent 13%), radial-gradient(circle at 70% 72%, rgba(150,160,190,.3) 0 6%, transparent 7%); }
.clouds { position: absolute; inset: 0; }
.cloud { position: absolute; left: 0; top: var(--top); opacity: var(--op); animation: cloudDrift var(--dur) linear var(--del) infinite; will-change: transform; }
.cloud i { display: block; width: 190px; height: 62px; border-radius: 50%; background: #fff; transform: scale(var(--sc)); transform-origin: 0 0; filter: url(#cloudF);
    box-shadow: 62px -20px 0 -4px #fff, 118px 2px 0 -8px #fff, -58px 12px 0 -10px #fff, 30px 16px 0 6px #fff, inset 0 -12px 18px rgba(120,150,190,.5); }
@keyframes cloudDrift { from { transform: translateX(-45vw); } to { transform: translateX(120vw); } }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; animation-duration: var(--cyc); animation-delay: var(--delay); animation-iteration-count: infinite; animation-timing-function: linear; }
.veil-night { background: rgba(8,16,60,.55); animation-name: nightOp; }
.veil-warm  { background: rgba(255,130,50,.2); animation-name: warmOp; opacity: 0; }

/* --- tree stage --- */
.tree-stage { position: relative; z-index: 0; flex: 1; min-height: max(400px, 46vh); clip-path: inset(0 -100vw 0 -100vw); }
.tree-svg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: max(100%, 560px); height: 100%; display: block; overflow: visible; }
.tree-tip { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .4px;
    color: #075985; background: rgba(255,255,255,.78); padding: 5px 14px; border-radius: 20px; animation: fadeUp .6s ease-out 3s backwards; }

/* growth (plays once) */
.g1 { animation: gScale 1.6s cubic-bezier(.22,.8,.25,1) var(--gl, 0s) backwards; }
.trunk { transform-origin: 300px 348px; animation: gTrunk 1.8s cubic-bezier(.22,.8,.25,1) .2s backwards; }
.t-shadow { transform-box: fill-box; transform-origin: center; animation: gPop 2s ease-out .3s backwards; }
.cl { transform-box: fill-box; transform-origin: center; animation: gPop 1.1s cubic-bezier(.34,1.56,.64,1) var(--gl, 3s) backwards; }
.sw { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; }
@keyframes gScale { from { transform: scale(0); } }
@keyframes gTrunk { from { transform: scaleY(0); } }
@keyframes gPop   { from { transform: scale(0); opacity: 0; } }
@keyframes sway   { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.8deg); } }

/* fruit: appear -> ripen -> shake -> fall -> bounce -> fade -> repeat */
.fruit { transform-box: fill-box; transform-origin: center; animation: fruitLife 22s linear infinite backwards; }
@keyframes fruitLife {
    0%,3%  { transform: translate(0,0) rotate(0deg) scale(0,0); opacity: 0; color: #9ccc65; }
    12%    { transform: translate(0,0) rotate(0deg) scale(.55,.55); opacity: 1; }
    30%    { transform: translate(0,0) rotate(0deg) scale(1,1); color: var(--c); }
    44%    { transform: translate(0,0) rotate(3deg) scale(1,1); }
    52%    { transform: translate(0,0) rotate(-3deg) scale(1,1); }
    57%    { transform: translate(0,0) rotate(8deg) scale(1,1); }
    60%    { transform: translate(0,0) rotate(-8deg) scale(1,1); color: var(--c); animation-timing-function: cubic-bezier(.5,0,1,.6); }
    68%    { transform: translate(var(--dx),var(--dy)) rotate(220deg) scale(1,1); animation-timing-function: ease-out; }
    70%    { transform: translate(var(--dx),var(--dy)) rotate(220deg) scale(1.15,.85); animation-timing-function: ease-out; }
    73%    { transform: translate(var(--dx),calc(var(--dy) - 11px)) rotate(250deg) scale(1,1); animation-timing-function: ease-in; }
    76%    { transform: translate(var(--dx),var(--dy)) rotate(260deg) scale(1,1); }
    90%    { transform: translate(var(--dx),var(--dy)) rotate(260deg) scale(1,1); opacity: 1; color: var(--c); }
    96%,100% { transform: translate(var(--dx),var(--dy)) rotate(260deg) scale(1,1); opacity: 0; color: var(--c); }
}
.fleaf { animation: leafFall 16s ease-in-out infinite backwards; transform: translate(var(--x),var(--y)); }
@keyframes leafFall {
    0%   { transform: translate(var(--x),var(--y)) rotate(0deg); opacity: 0; }
    8%   { opacity: .95; }
    50%  { transform: translate(calc(var(--x) + var(--dx) * .3 + 26px),calc(var(--y) + var(--dy) * .5)) rotate(260deg); }
    92%  { opacity: .95; }
    100% { transform: translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) rotate(560deg); opacity: 0; }
}

/* interactive branches */
.br { cursor: pointer; outline: none; transition: transform .45s cubic-bezier(.2,.9,.3,1.2), filter .3s; }
.br:hover, .br:focus-visible { transform: scale(1.14); filter: drop-shadow(0 0 7px var(--c)); }
.tree-svg:has(.br:hover) .br:not(:hover) { opacity: .8; }
.hit { fill: none; stroke: transparent; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; }
.lbl { opacity: 0; transform: translateY(10px) scale(.7); transform-box: fill-box; transform-origin: center bottom; transition: opacity .25s, transform .35s cubic-bezier(.2,.9,.3,1.3); pointer-events: none; }
.lbl rect, .lbl path { fill: #fff; stroke: var(--c); stroke-width: 2.4; }
.lbl path { stroke: none; }
.lbl text { text-anchor: middle; }
.lbl .t1 { font: 700 13.5px 'Segoe UI', Tahoma, sans-serif; fill: var(--c); }
.lbl .t2 { font: 600 8.5px 'Segoe UI', Tahoma, sans-serif; fill: #888; letter-spacing: .4px; text-transform: uppercase; }
.br:hover .lbl, .br:focus-visible .lbl { opacity: 1; transform: none; }
@media (hover: none) { .lbl { opacity: 1; transform: none; } }

/* people */
.walker { transform-box: fill-box; transform-origin: center; animation: walk 40s linear infinite; }
@keyframes walk {
    0%     { transform: translateX(var(--x0)) scaleX(1); }
    49.5%  { transform: translateX(var(--x1)) scaleX(1); }
    50.5%  { transform: translateX(var(--x1)) scaleX(-1); }
    99.5%  { transform: translateX(var(--x0)) scaleX(-1); }
    100%   { transform: translateX(var(--x0)) scaleX(1); }
}
.leg, .arm { transform-box: fill-box; transform-origin: 50% 0; animation: swing var(--sp, .7s) ease-in-out infinite alternate; }
.leg.b, .arm { animation-direction: alternate-reverse; }
.arm.b { animation-direction: alternate; }
@keyframes swing { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }

/* pop-up panels opened from the branches */
.dashboard-grid { display: block; margin: 0; }
.dashboard-grid .card { position: fixed; top: 50%; left: 50%; z-index: 1100; margin: 0; width: min(94vw, 560px); max-height: 88vh; overflow: auto;
    background: rgba(255,255,255,.97); animation: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -46%) scale(.9);
    transition: opacity .3s, transform .45s cubic-bezier(.2,.9,.3,1.2), visibility 0s .45s; }
.dashboard-grid .card:hover { transform: translate(-50%, -46%) scale(.9); }
.dashboard-grid .card.open, .dashboard-grid .card.open:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
    transition: opacity .3s, transform .45s cubic-bezier(.2,.9,.3,1.2), visibility 0s; }
.dashboard-grid .card.open::before { transform: scaleX(1); }
.panel-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(8,12,40,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.panel-backdrop.show { opacity: 1; visibility: visible; transition: opacity .3s; }
.panel-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: none; border-radius: 50%; background: #eef2f7; font-size: 20px; line-height: 1; color: #555; cursor: pointer; z-index: 2; transition: background .2s, transform .3s; }
.panel-close:hover { background: #fde2e2; color: #c0392b; transform: rotate(90deg); }

/* responsive */
@media (max-width: 900px) { .filters { gap: 6px; } }
@media (max-width: 640px) {
    body { padding: 10px; }
    .cover-img { height: 150px; }
    .profile-info-container { margin-top: -56px; padding: 0 14px 16px; justify-content: center; }
    .profile-left { flex-direction: column; align-items: center; text-align: center; }
    .dp-img { width: 104px; height: 104px; }
    .profile-details { width: 100%; padding: 12px 14px; }
    .profile-details h1 { font-size: 20px; }
    .social-links, .page-nav-buttons { justify-content: center; width: 100%; }
    .filter-btn { padding: 6px 10px; }
    .tree-tip { font-size: 11px; }
    .dashboard-grid .card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sun, .moon, .cloud, .sky, .veil, .stars { animation: none; } .sky-day { opacity: 1; } .sky-night, .sky-warm, .veil, .stars { opacity: 0; } }

/* --- rain + lightning --- */
#weatherCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.flash { position: fixed; inset: 0; z-index: 1; background: #dfe9ff; opacity: 0; pointer-events: none; }
.veil-storm { background: rgba(28,34,50,.62); opacity: 0; transition: opacity 5s ease; animation: none; }
body.raining .veil-storm { opacity: 1; }
.cloud.storm { opacity: 0; transition: opacity 6s ease; }
.cloud.storm i { background: #5a6270; box-shadow: 62px -20px 0 -4px #5a6270, 118px 2px 0 -8px #4b5361, -58px 12px 0 -10px #4b5361, 30px 16px 0 6px #667080, inset 0 -14px 20px rgba(15,20,35,.65); }
body.raining .cloud.storm { opacity: .95; }
.cloud { transition: opacity 5s ease; }
body.raining .cloud:not(.storm) { opacity: .3; }
.sun, .moon { transition: opacity 4s; }
body.raining .sun, body.raining .moon { opacity: .2; }
body.raining .sw { animation-name: swayStorm; animation-duration: 1.9s !important; }
@keyframes swayStorm { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3.6deg); } }
.weather-toggle { position: fixed; left: 14px; bottom: 14px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--t-base); background: #0a0a0a; color: var(--t-light);
    font-size: 16px; cursor: pointer; transition: transform .2s, background .2s; }
.weather-toggle:hover { transform: scale(1.1); background: var(--t-bg2); }
.weather-toggle[aria-pressed="false"] { color: #777; border-color: #444; }

/* ===== RED & BLACK THEME + full-screen tabs ===== */
:root { --red: var(--t-base); --red-d: var(--t-dark); --red-l: var(--t-light); --ink: #0a0a0a; }
.profile-details h1 { background-image: linear-gradient(90deg, #0a0a0a, var(--t-base), #0a0a0a); }
.profile-details .username-text { color: var(--t-base); }
.profile-details .college-text { color: #111; }
.btn-about   { background: #0a0a0a; border: 1px solid var(--red); }
.btn-journal { background: var(--red); }
.btn-history { background: var(--red-d); }
.btn-nav:hover { box-shadow: 0 10px 22px rgba(var(--t-base-rgb), .45); }
.filter-btn { background: #141414; color: #eee; border: 1px solid var(--red-d); }
.filter-btn.active, .filter-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.tree-tip { color: #fff; background: rgba(10,10,10,.75); border: 1px solid var(--red); }

/* full-screen panels */
.dashboard-grid .card { top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: none; box-shadow: none;
    padding: clamp(18px, 4vw, 56px); background: var(--ink); color: #f1f1f1; backdrop-filter: none; -webkit-backdrop-filter: none; transform: scale(.97); }
.dashboard-grid .card:hover { transform: scale(.97); }
.dashboard-grid .card.open, .dashboard-grid .card.open:hover { transform: none; }
.dashboard-grid .card::before { height: 5px; background: var(--red); transform: scaleX(1); }
.dashboard-grid .card > *:not(.panel-close) { max-width: 920px; margin-left: auto; margin-right: auto; }
.dashboard-grid .card h3 { color: #fff; font-size: clamp(22px, 3vw, 34px); margin-bottom: 22px; justify-content: flex-start; gap: 12px; }
.dashboard-grid .card h3 i { color: var(--red); }
.dashboard-grid .chart-container { height: min(60vh, 540px) !important; }
.panel-backdrop { display: none; }
.panel-close { position: fixed; top: 14px; right: 18px; width: 44px; height: 44px; background: var(--red); color: #fff; font-size: 26px; z-index: 5; }
.panel-close:hover { background: #fff; color: var(--red); }
.form-group label { color: #ddd; }
.form-icon { color: var(--red); }
.form-group input { background: #141414; color: #fff; border: 1px solid var(--t-input); color-scheme: dark; }
.form-group input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(var(--t-base-rgb), .3); }
.activity-group { background: #121212; border: 1px solid var(--t-border); }
.activity-list li { background: var(--ink); border-color: var(--t-border); color: #eee; }
.activity-list li span:first-child { color: #fff; }
.remove-activity-btn, .activity-total { color: var(--red-l); }
.btn-submit { background: linear-gradient(135deg, var(--red), var(--red-d)); }
.btn-submit:hover { background: linear-gradient(135deg, var(--t-bright), var(--t-deep)); }
.btn-add-activity { background: var(--red); }
.btn-add-activity:hover { background: var(--t-bright); }
.comparison-box { background: #141414; border: 1px solid var(--t-border); color: #eee; }
/* growth = light-green glow, drop = red glow */
.arrow-indicator.up   { color: var(--up);   text-shadow: 0 0 8px var(--up-glow),   0 0 20px var(--up-glow);   animation: bob 1.4s ease-in-out infinite, glowUp   1.8s ease-in-out infinite alternate; }
.arrow-indicator.down { color: var(--down); text-shadow: 0 0 8px var(--down-glow), 0 0 20px var(--down-glow); animation: bob 1.4s ease-in-out infinite, glowDown 1.8s ease-in-out infinite alternate; }
.arrow-indicator.flat { color: #cfcfcf; animation: none; }
.task-days { text-align: left; }
#percentageBreakdown > :nth-child(6) { animation-delay: .30s; }

/* full-screen modals (View Diff / Trend Chart) */
.modal { background: #000; }
.modal-content { width: 100vw; max-width: none; height: 100vh; height: 100dvh; border-radius: 0; background: var(--ink); color: #f1f1f1; padding: clamp(18px, 4vw, 56px); overflow: auto; box-shadow: none; border-top: 5px solid var(--red); }
.modal-content > *:not(.close-btn) { max-width: 920px; margin-left: auto; margin-right: auto; }
.modal-content h3 { color: #fff; font-size: clamp(22px, 3vw, 34px); }
.close-btn { position: fixed; top: 14px; right: 22px; font-size: 38px; color: var(--red-l); z-index: 5; }
.close-btn:hover { color: #fff; }
#lineChartModal .chart-container { height: min(66vh, 620px) !important; }
.trend-filter-btn { background: #141414; color: #eee; border: 1px solid var(--red-d); }
.trend-filter-btn.active, .trend-filter-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.diff-table th, .diff-table td { border: 1px solid var(--t-border); color: #eee; }
.diff-table th { background: var(--t-bg1); }

/* ===== HOME PAGE = ANIMATION ONLY =====
   The photo, details, page links and filters moved into the slide-out profile panel. */
body { padding: 0 !important; }
.container { max-width: none; }
.tree-stage { min-height: 100vh; min-height: 100dvh; }
.tree-tip { animation: fadeUp .6s ease-out 3s backwards, tipOut 1.2s ease 12s forwards; }
@keyframes tipOut { to { opacity: 0; visibility: hidden; } }

/* round icon buttons (weather / sound / theme / profile) */
.dock-btn { position: fixed; bottom: 14px; z-index: 5; }
#soundToggle { left: 64px; }
#themeBtn { left: 114px; }
.profile-btn { top: 14px; left: 14px; bottom: auto; }
#soundToggle.waiting { animation: dockPulse 1.6s ease-in-out infinite; }
@keyframes dockPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--t-base-rgb), .7); } 50% { box-shadow: 0 0 0 9px rgba(var(--t-base-rgb), 0); } }
.sound-volume { position: fixed; left: 164px; bottom: 25px; z-index: 5; width: 92px; height: 20px; accent-color: var(--t-base); display: none; }
.sound-volume.show { display: block; }

/* theme popover */
.theme-popover { position: fixed; left: 14px; bottom: 66px; z-index: 6; width: 250px; padding: 14px; border-radius: 14px; background: rgba(10,10,10,.92); color: #f1f1f1;
    border: 1px solid var(--t-base); box-shadow: 0 10px 34px rgba(0,0,0,.5); backdrop-filter: blur(8px); }
.theme-popover[hidden] { display: none; }
.theme-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.theme-title i { color: var(--t-light); }
.theme-swatches { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.theme-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #2a2a2a; background: var(--sw); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.theme-swatch:hover { transform: scale(1.15); }
.theme-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--sw), 0 0 14px var(--sw); }
.theme-custom { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 12px; }
.theme-custom input { width: 42px; height: 28px; border: 1px solid #444; border-radius: 6px; background: #111; padding: 2px; cursor: pointer; }
.theme-reset { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--t-base); background: transparent; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
.theme-reset:hover:not(:disabled) { background: var(--t-base); }
.theme-reset:disabled { opacity: .45; cursor: default; }

/* slide-out profile panel */
.profile-backdrop { position: fixed; inset: 0; z-index: 1250; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .35s; }
.profile-backdrop.show { opacity: 1; pointer-events: auto; }
.profile-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1300; width: min(92vw, 470px); overflow-y: auto; padding-bottom: 24px;
    background: rgba(255,255,255,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-right: 3px solid var(--t-base); box-shadow: 10px 0 44px rgba(0,0,0,.4);
    transform: translateX(-104%); visibility: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s .45s; }
.profile-panel.open { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.profile-close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--t-base); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.profile-close:hover { background: #111; }
.profile-panel .profile-header { background: transparent !important; box-shadow: none; border-radius: 0; margin-bottom: 10px; animation: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.profile-panel .cover-img { height: 170px; background: linear-gradient(135deg, var(--t-dark), var(--t-base)); }
.profile-panel .profile-info-container { flex-direction: column; align-items: flex-start; margin-top: -66px; gap: 14px; }
.profile-panel .profile-left { flex-direction: column; align-items: flex-start; gap: 12px; }
.profile-panel .dp-img { width: 116px; height: 116px; }
.profile-panel .page-nav-buttons { align-self: flex-start; }
.profile-panel .filters { padding: 12px 20px 0; margin: 0; border-top: 1px solid rgba(0,0,0,.1); }
.profile-panel .filters #openDiffModalBtn { margin-left: 0 !important; }

/* ===== Habit Forest: same tree scene as the hero tree above, continued sideways —
   big trees (one focused per swipe), no card chrome, sitting on a matching grass
   band so it reads as one continuous scene instead of a separate boxed widget. ===== */
.forest-strip-wrap { margin: -6px 0 16px; }
.forest-title { color: rgba(255,255,255,.55); font-size: 12px; margin: 0 0 2px 6px; display: flex; align-items: center; gap: 6px; letter-spacing: .2px; }
.forest-scroll { position: relative; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 4px 10vw 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.forest-scroll::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 14px; height: 30px;
    background: linear-gradient(180deg, rgba(124,203,98,.30), rgba(59,122,52,.55));
    border-radius: 50%/14px;
    z-index: 0;
    pointer-events: none;
}
.mini-tree { position: relative; z-index: 1; flex: 0 0 min(84vw, 320px); scroll-snap-align: center; text-align: center; background: transparent; border: none; padding: 0; }
.mini-tree-svg { width: 100%; height: auto; display: block; overflow: visible; }
.mini-tree-label { font-size: 14px; font-weight: 700; color: #f5f5f5; margin-top: 2px; line-height: 1.25; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mini-tree-days { font-size: 12px; color: rgba(255,255,255,.75); font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* Growth stages: hidden by default, revealed by data-stage on the .mini-tree card.
   30 days -> flowers, 60 days -> fruit + a visiting animal, 90 days -> fruit turns
   gold and falls (reusing the SAME .fruit/fruitLife animation as the main tree). */
.mt-flowers, .mt-fruit-static, .mt-fruit-gold, .mt-animal { display: none; }
.mini-tree[data-stage="1"] .mt-flowers,
.mini-tree[data-stage="2"] .mt-flowers,
.mini-tree[data-stage="3"] .mt-flowers { display: block; }
.mini-tree[data-stage="2"] .mt-fruit-static,
.mini-tree[data-stage="2"] .mt-animal,
.mini-tree[data-stage="3"] .mt-animal { display: block; }
.mini-tree[data-stage="3"] .mt-fruit-gold { display: block; }

/* Pause an off-screen tree's animations instead of letting 6+ loops run unseen —
   keeps the main hero tree's own sway/glow smooth. Toggled by IntersectionObserver. */
.mini-tree.paused, .mini-tree.paused * { animation-play-state: paused !important; }

/* Meditation: slow breathing bob */
.mt-bob { transform-box: fill-box; transform-origin: center; animation: mtBob 4s ease-in-out infinite; }
@keyframes mtBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* Personal Development: a page turning */
.mt-flap { transform-box: fill-box; animation: mtFlap 3.4s ease-in-out infinite; }
@keyframes mtFlap { 0%,55%,100% { transform: rotate(0deg); } 30% { transform: rotate(-35deg); } }

/* Education: a pen writing across the page */
.mt-write { transform-box: fill-box; animation: mtWrite 1.6s ease-in-out infinite; }
@keyframes mtWrite { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* Skill Dev: typing hands + a blinking cursor */
.mt-type { transform-box: fill-box; transform-origin: 50% 100%; animation: mtType .5s ease-in-out infinite; }
.mt-type2 { animation-delay: .25s; }
@keyframes mtType { 0%,100% { transform: translateY(0); } 50% { transform: translateY(1px); } }
.mt-blink { animation: mtBlink 1s step-end infinite; }
@keyframes mtBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* College: a lit window flickering gently */
.mt-window { animation: mtWindow 3.2s ease-in-out infinite; }
.mt-window2 { animation-delay: 1.6s; }
@keyframes mtWindow { 0%,100% { opacity: 1; } 50% { opacity: .55; } }