:root {
    /* Pure Botanical Greens (Zero White Canvas Policy) */
    --bg-base: #061f0d;
    --bg-deep-forest: #031207;
    --bg-gradient: radial-gradient(circle at 50% 20%, #154220 0%, #082911 45%, #031207 85%, #010a04 100%);

    /* Vibrant Plant & Leaf Shades */
    --green-100: #d4f8d3;
    --green-200: #a3f0a1;
    --green-300: #6de26a;
    --green-400: #3ec83a;
    --green-500: #24a120;
    --green-600: #177d14;
    --green-700: #0f5a0d;
    --green-800: #093b08;
    --green-900: #042003;

    /* Bio-Luminescent Accents */
    --emerald-primary: #10b981;
    --emerald-glow: rgba(16, 185, 129, 0.45);
    --leaf-bright: #2ecc71;
    --leaf-dark: #1b5e20;
    --moss-accent: #8bc34a;

    /* Sakura Blossom Pink Palette */
    --sakura-100: #ffe6f0;
    --sakura-200: #ffb3d1;
    --sakura-300: #ff80ab;
    --sakura-400: #ff4081;
    --sakura-500: #f50057;
    --sakura-glow: rgba(255, 64, 129, 0.4);


    /* Glass Surfaces (Green Tinted Translucency) */
    --glass-bg: rgba(12, 43, 19, 0.72);
    --glass-bg-hover: rgba(20, 64, 29, 0.85);
    --glass-border: rgba(62, 200, 58, 0.35);
    --glass-border-hover: rgba(255, 128, 171, 0.6);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(163, 240, 161, 0.2);
    --glass-shadow-hover: 0 20px 50px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 179, 209, 0.4);

    /* Text Colors (High Contrast Organic Shades) */
    --text-primary: #e8fce8;
    --text-secondary: #9be3a1;
    --text-muted: #5ca364;
    --text-highlight: #ffb3d1;

    /* SAT Metric Accents */
    --sat-gold: #ffd700;
    --sat-gold-bg: rgba(255, 215, 0, 0.12);
    --sat-gold-border: rgba(255, 215, 0, 0.45);

    /* Typography */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Transitions & Physics */
    --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
    --transition-fast: 0.2s var(--ease-smooth);
    --transition-medium: 0.4s var(--ease-smooth);
    --transition-slow: 0.8s var(--ease-smooth);

    /* Radii & Z-Index */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --radius-full: 9999px;

    --z-canvas: 0;
    --z-grass: 5;
    --z-app: 10;
    --z-bellatrix: 100;
    --z-modal: 1000;
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESET & ORGANIC BASE STYLES
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body.nature-theme {
    font-family: var(--font-sans);
    background: var(--bg-gradient);
    color: var(--text-primary);
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    position: relative;
    line-height: 1.6;
}

/* Selection and Custom Scrollbar */
::selection {
    background: var(--sakura-300);
    color: var(--bg-deep-forest);
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-deep-forest);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--green-600), var(--sakura-400));
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-deep-forest);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--emerald-primary), var(--sakura-300));
}

/* --------------------------------------------------------------------------
   3. IMMERSIVE ENVIRONMENT: GRASS, THORNS & SAKURA CANVAS
   -------------------------------------------------------------------------- */
#sakura-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: var(--z-canvas);
}

/* Animated Ambient Komorebi Light Pulse */
body::before {
    content: '';
    position: fixed;
    top: -10%;
    left: -10%;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(62, 200, 58, 0.18) 0%, rgba(255, 128, 171, 0.12) 40%, transparent 70%);
    filter: blur(100px);
    z-index: 1;
    pointer-events: none;
    animation: komorebiPulse 14s ease-in-out infinite alternate;
}

@keyframes komorebiPulse {
    0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50% { transform: translate(60px, 40px) scale(1.15); opacity: 0.9; }
    100% { transform: translate(-40px, 80px) scale(0.95); opacity: 0.5; }
}

@keyframes grassSway {
    0% { transform: skewX(-1.5deg); }
    100% { transform: skewX(2deg); }
}

/* --------------------------------------------------------------------------
   4. BOTANICAL GLASSMORPHISM ARCHITECTURE & THORN VINES
   -------------------------------------------------------------------------- */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(190%);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    padding: 26px;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
    position: relative;
    overflow: hidden;
}

/* Organic Thorns Encapsulating Cards */
.glass-card::after {
    content: '▲';
    font-size: 8px;
    color: var(--green-400);
    position: absolute;
    top: 2px;
    right: 18px;
    transform: rotate(180deg);
    opacity: 0.7;
    text-shadow: 0 0 6px var(--emerald-primary);
}

.glass-card:hover {
    transform: translateY(-4px);
    border-color: var(--glass-border-hover);
    box-shadow: var(--glass-shadow-hover);
}

@keyframes vineBorderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --------------------------------------------------------------------------
   5. LAYOUT GRID & APP CONTAINER
   -------------------------------------------------------------------------- */
.app-container {
    max-width: 1420px;
    margin: 0 auto;
    padding: 36px 28px 80px 28px;
    position: relative;
    z-index: var(--z-app);
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   6. HEADER & BRANDING ZONE
   -------------------------------------------------------------------------- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 36px;
    border-radius: var(--radius-xl);
    background: rgba(8, 38, 17, 0.85);
    border: 1.5px solid var(--green-400);
}

.brand-zone {
    display: flex;
    align-items: center;
    gap: 20px;
}

.leaf-icon-badge {
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, var(--green-500), var(--emerald-primary));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-deep-forest);
    box-shadow: 0 0 20px var(--emerald-glow);
    animation: leafPulse 4s ease-in-out infinite alternate;
}

.leaf-icon-badge i {
    width: 30px;
    height: 30px;
    stroke-width: 2.5;
}

@keyframes leafPulse {
    0% { transform: scale(1) rotate(-4deg); box-shadow: 0 0 15px var(--emerald-glow); }
    100% { transform: scale(1.08) rotate(6deg); box-shadow: 0 0 30px var(--sakura-glow); }
}

.brand-zone h1 {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.version-tag {
    font-size: 0.75rem;
    padding: 3px 10px;
    background: rgba(255, 128, 171, 0.2);
    color: var(--sakura-200);
    border: 1px solid var(--sakura-300);
    border-radius: var(--radius-full);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.header-widgets {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.widget-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(15, 58, 24, 0.8);
    border: 1px solid var(--green-400);
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-fast);
}

.widget-pill:hover {
    transform: translateY(-3px);
    border-color: var(--sakura-300);
    box-shadow: 0 6px 18px var(--sakura-glow);
}

.widget-pill i {
    width: 20px;
    height: 20px;
    color: var(--green-300);
}

.sat-countdown-pill {
    background: rgba(255, 64, 129, 0.15);
    border-color: var(--sakura-300);
}

.sat-countdown-pill i, .sat-countdown-pill strong {
    color: var(--sakura-200);
}

.streak-pill strong {
    color: #ffd54f;
}

.target-pill {
    background: var(--sat-gold-bg);
    border-color: var(--sat-gold-border);
}

.target-pill strong {
    color: var(--sat-gold);
}

/* --------------------------------------------------------------------------
   7. DASHBOARD MAIN GRID
   -------------------------------------------------------------------------- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 32px;
}

.grid-column {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.card-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-header h2 i {
    color: var(--green-300);
    width: 24px;
    height: 24px;
}

.card-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   8. PROGRESS OVERVIEW & VINE PROGRESS BAR
   -------------------------------------------------------------------------- */
.progress-overview-card {
    background: linear-gradient(135deg, rgba(12, 48, 22, 0.85) 0%, rgba(6, 28, 12, 0.95) 100%);
}

.percentage-badge {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--green-200);
    background: rgba(62, 200, 58, 0.15);
    padding: 6px 18px;
    border-radius: var(--radius-full);
    border: 1px solid var(--green-300);
    box-shadow: 0 0 15px rgba(62, 200, 58, 0.2);
}

.progress-bar-container {
    width: 100%;
    height: 22px;
    background: rgba(3, 18, 7, 0.8);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    margin: 16px 0 16px 0;
    border: 1.5px solid var(--green-600);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

.progress-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--green-600) 0%, var(--emerald-primary) 50%, var(--sakura-300) 100%);
    background-size: 200% 100%;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: progressWave 3s linear infinite;
    position: relative;
}

/* Bio-Luminescent Pulse Effect inside Progress Bar */
.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%
    );
    background-size: 24px 24px;
    animation: stripeFlow 1.2s linear infinite;
}

@keyframes progressWave {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes stripeFlow {
    0% { background-position: 0 0; }
    100% { background-position: 24px 0; }
}

.progress-status-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-style: italic;
    font-family: var(--font-serif);
    text-align: center;
}

/* --------------------------------------------------------------------------
   9. INTERACTIVE CHECKBOXES & THORN TASK CARDS
   -------------------------------------------------------------------------- */
.task-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.task-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 22px;
    background: rgba(10, 41, 18, 0.65);
    border: 1.5px solid var(--green-600);
    border-radius: var(--radius-md);
    transition: all var(--transition-medium);
    cursor: pointer;
    position: relative;
}

.task-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: var(--green-400);
    border-radius: var(--radius-full);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.task-item:hover {
    background: rgba(18, 64, 28, 0.85);
    transform: translateX(6px) translateY(-2px);
    border-color: var(--green-300);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
}

.task-item:hover::before {
    opacity: 1;
}

.task-item.completed {
    background: rgba(6, 28, 12, 0.5);
    border-color: var(--green-800);
    opacity: 0.75;
}

.task-item.completed .task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Custom Checkbox Design: Plant Leaf Shape */
.custom-checkbox-container {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: 2px;
}

.custom-checkbox-container input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.checkmark {
    position: absolute;
    top: 0; left: 0;
    width: 28px; height: 28px;
    background: rgba(3, 18, 7, 0.9);
    border: 2px solid var(--green-400);
    border-radius: 8px 2px 8px 2px; /* Leaf Cut Geometry */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--ease-elastic);
}

.custom-checkbox-container:hover input ~ .checkmark {
    border-color: var(--sakura-300);
    transform: scale(1.1) rotate(5deg);
}

.custom-checkbox-container input:checked ~ .checkmark {
    background: linear-gradient(135deg, var(--green-400), var(--sakura-300));
    border-color: var(--sakura-200);
    transform: scale(1.08) rotate(-8deg);
    box-shadow: 0 0 15px var(--sakura-glow);
}

.checkmark i {
    color: var(--bg-deep-forest);
    width: 18px;
    height: 18px;
    stroke-width: 3.5;
    opacity: 0;
    transform: scale(0.2) rotate(-30deg);
    transition: all 0.25s var(--ease-elastic);
}

.custom-checkbox-container input:checked ~ .checkmark i {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.task-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.task-title {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-primary);
}

.task-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Botanical Task Tags */
.task-tag {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag-english { background: rgba(3, 105, 161, 0.25); color: #7dd3fc; border: 1px solid #0284c7; }
.tag-reading { background: rgba(134, 25, 143, 0.25); color: #f0abfc; border: 1px solid #c026d3; }
.tag-speaking { background: rgba(180, 83, 9, 0.25); color: #fde047; border: 1px solid #ca8a04; }
.tag-math { background: rgba(21, 128, 61, 0.25); color: #86efac; border: 1px solid #16a34a; }
.tag-habit { background: rgba(255, 64, 129, 0.2); color: var(--sakura-200); border: 1px solid var(--sakura-300); }

/* Buttons */
.btn-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    background: rgba(15, 58, 24, 0.8);
    border: 1px solid var(--green-400);
    color: var(--green-200);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-icon:hover {
    background: var(--sakura-400);
    color: white;
    border-color: var(--sakura-200);
    transform: scale(1.12) rotate(90deg);
    box-shadow: 0 0 20px var(--sakura-glow);
}

/* --------------------------------------------------------------------------
   10. SAT STRATEGY, ROADMAP & MAKER CARDS
   -------------------------------------------------------------------------- */
.sat-score-card {
    background: linear-gradient(135deg, rgba(20, 50, 25, 0.9) 0%, rgba(40, 30, 5, 0.8) 100%);
    border-color: var(--sat-gold-border);
}

.badge-target {
    font-size: 0.85rem;
    font-weight: 800;
    background: var(--sat-gold-bg);
    color: var(--sat-gold);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--sat-gold-border);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.sat-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0;
}

.sat-subscore {
    background: rgba(3, 18, 7, 0.7);
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 215, 0, 0.3);
    text-align: center;
}

.subscore-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.subscore-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
}

.subscore-value small {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.sat-investment-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(3, 18, 7, 0.6);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid var(--sat-gold);
}

.sat-investment-info i {
    color: var(--sat-gold);
}

/* Maker Projects Card */
.projects-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project-item {
    background: rgba(10, 41, 18, 0.6);
    border: 1px solid var(--green-600);
    padding: 16px 18px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.project-item:hover {
    background: rgba(18, 64, 28, 0.85);
    border-color: var(--emerald-primary);
    transform: translateY(-3px);
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.project-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-name i {
    color: var(--green-300);
}

.status-badge {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-weight: 700;
}

.status-badge.status-active {
    background: rgba(30, 126, 52, 0.3);
    color: var(--green-200);
    border: 1px solid var(--green-400);
}

.project-desc {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Application Roadmap List */
.roadmap-mini-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.roadmap-mini-list li {
    font-size: 0.88rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(3, 18, 7, 0.5);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(62, 200, 58, 0.2);
}

.roadmap-mini-list li i {
    width: 16px;
    height: 16px;
    color: var(--green-400);
}

/* --------------------------------------------------------------------------
   11. BELLATRIX ASSISTANT WIDGET & ANIMATED SVG AVATAR
   -------------------------------------------------------------------------- */
#bellatrix-container {
    position: fixed;
    z-index: var(--z-bellatrix);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.bellatrix-pos-bottom-right { bottom: 32px; right: 36px; }
.bellatrix-pos-bottom-left { bottom: 32px; left: 36px; align-items: flex-start; }
.bellatrix-pos-top-right { top: 100px; right: 36px; }

/* Dialogue Window */
#bellatrix-dialogue {
    pointer-events: auto;
    max-width: 340px;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(8, 38, 17, 0.92);
    border: 1.5px solid var(--sakura-300);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px var(--sakura-glow);
    animation: dialoguePop 0.4s var(--ease-elastic);
}

@keyframes dialoguePop {
    0% { transform: scale(0.5) translateY(30px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

#bellatrix-dialogue.hidden { display: none; }

.dialogue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.bellatrix-tag {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--sakura-200);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

#close-dialogue-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

#close-dialogue-btn:hover { color: var(--sakura-300); }

#bellatrix-text {
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.5;
    font-weight: 500;
}

.dialogue-footer {
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    font-style: italic;
}

/* Avatar SVG Styling & Animations */
.avatar-interactive-wrapper {
    pointer-events: auto;
    width: 140px;
    height: 140px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s var(--ease-elastic);
}

.avatar-interactive-wrapper:hover {
    transform: scale(1.15) rotate(-4deg);
}

.bellatrix-svg-avatar {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 20px rgba(16, 185, 129, 0.4));
    animation: avatarFloat 4s ease-in-out infinite alternate;
}

@keyframes avatarFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-12px); }
}

/* SVG Orbital Animations */
.ring-rotate-1 {
    transform-origin: center;
    animation: spinRing1 12s linear infinite;
}

.ring-rotate-2 {
    transform-origin: center;
    animation: spinRing2 16s linear infinite reverse;
}

@keyframes spinRing1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes spinRing2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }

.core-pulse {
    animation: coreGlow 2.5s ease-in-out infinite alternate;
}

@keyframes coreGlow {
    0% { r: 40px; opacity: 0.85; }
    100% { r: 45px; opacity: 1; }
}

.floating-petal-1 {
    animation: petalFloat1 3s ease-in-out infinite alternate;
}

.floating-petal-2 {
    animation: petalFloat2 4s ease-in-out infinite alternate;
}

@keyframes petalFloat1 { 0% { transform: translate(0, 0); } 100% { transform: translate(-8px, -12px); } }
@keyframes petalFloat2 { 0% { transform: translate(0, 0); } 100% { transform: translate(10px, -8px); } }

/* Bellatrix Controller Buttons */
.bellatrix-control-card { padding: 18px; }

.bellatrix-positions-buttons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.pos-btn {
    flex: 1;
    padding: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    border: 1px solid var(--green-600);
    background: rgba(3, 18, 7, 0.8);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all var(--transition-fast);
}

.pos-btn:hover {
    background: var(--green-700);
    color: var(--text-primary);
}

.pos-btn.active {
    background: var(--emerald-primary);
    color: var(--bg-deep-forest);
    border-color: var(--emerald-primary);
    box-shadow: 0 0 15px var(--emerald-glow);
}

/* --------------------------------------------------------------------------
   12. MODAL OVERLAY & INPUT FORM
   -------------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(1, 10, 4, 0.75);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 1;
    transition: opacity var(--transition-medium);
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    width: 90%;
    max-width: 500px;
    background: rgba(8, 38, 17, 0.95);
    border: 1.5px solid var(--green-400);
    padding: 32px;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: modalPop 0.35s var(--ease-elastic);
}

@keyframes modalPop {
    0% { transform: scale(0.8) translateY(40px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.modal-header h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 700;
}

#close-modal-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 26px;
}

.modal-body input {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--green-600);
    background: rgba(3, 18, 7, 0.8);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text-primary);
    outline: none;
    transition: all var(--transition-fast);
}

.modal-body input:focus {
    border-color: var(--sakura-300);
    box-shadow: 0 0 15px var(--sakura-glow);
    background: rgba(6, 28, 12, 0.95);
}

.btn-primary {
    width: 100%;
    padding: 16px;
    border-radius: var(--radius-md);
    border: none;
    background: linear-gradient(135deg, var(--green-500), var(--sakura-400));
    color: white;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 6px 20px var(--sakura-glow);
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px var(--sakura-glow);
}

/* --------------------------------------------------------------------------
   13. FOOTER & BREAKPOINTS
   -------------------------------------------------------------------------- */
.main-footer {
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(62, 200, 58, 0.2);
    margin-top: auto;
}

@media (max-width: 1024px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .main-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .header-widgets { width: 100%; }
}

@media (max-width: 640px) {
    .app-container { padding: 18px 14px 60px 14px; }
    .glass-card { padding: 20px; }
    #bellatrix-container { bottom: 16px; right: 16px; }
    #bellatrix-dialogue { max-width: 280px; }
}