/* Base Template Styles */
:root {
    /* Neutrals */
    --n0-white: #FFFFFF;
    --n25-frost: #F6F9FB;
    --n50-mist: #EEF3F6;
    --n100-cloud: #E3EBF1;
    --n300-slate: #9AA7B2;
    --n700-ink: #1E2A32;
    --n900-deep-ink: #0F1B22;

    /* Brand Primaries */
    --brand-teal: #06CEAE;
    --cyan-glow: #40DFED;
    --electric-blue: #0B81D2;
    --indigo-anchor: #3E51A1;
    --deep-teal-navy: #123739;

    /* Accents */
    --gold-highlight: #C3AA30;
    --coral-red: #E24A63;

    /* Gradients */
    --g1-energy-trail: linear-gradient(90deg, #06CEAE 0%, #40DFED 45%, #0B81D2 100%);
    --g2-night-run: linear-gradient(90deg, rgba(15,27,34,0.80) 0%, rgba(15,27,34,0.35) 55%, rgba(15,27,34,0.10) 100%);
    --g3-milestone: linear-gradient(90deg, #C3AA30 0%, #06CEAE 60%, #40DFED 100%);
    --g4-surface-tint: linear-gradient(180deg, #FFFFFF 0%, #F6F9FB 100%);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
    background-color: var(--n25-frost);
    color: var(--n700-ink);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--n700-ink);
    font-weight: 700 !important;
}

.title {
    color: var(--n700-ink) !important;
}

.subtitle {
    color: var(--n300-slate) !important;
}

/* Hero section text override */
.hero-body .title,
.hero-body .subtitle,
.hero-body p {
    color: var(--n0-white) !important;
}

/* Navbar Styling - Rich Dark Gradient */
.navbar.is-primary {
    background: linear-gradient(135deg, var(--deep-teal-navy) 0%, #1a4a4d 50%, var(--deep-teal-navy) 100%) !important;
    position: relative;
    padding: 0.25rem 0;
    box-shadow: 0 4px 20px rgba(18, 55, 57, 0.4);
}

.navbar.is-primary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--g1-energy-trail);
    box-shadow: 0 0 15px rgba(6, 206, 174, 0.6);
}

.navbar-brand .navbar-item {
    padding: 0.5rem 1rem;
}

.navbar-item, .navbar-link {
    font-weight: 600 !important;
    color: var(--n0-white) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.navbar-end .navbar-item {
    margin: 0.25rem 0.15rem;
    border-radius: 12px;
}

.navbar-end .navbar-item:hover {
    background: rgba(6, 206, 174, 0.2) !important;
    color: var(--cyan-glow) !important;
    transform: translateY(-1px);
}

.navbar-end .navbar-item:hover .icon {
    color: var(--cyan-glow) !important;
}

.navbar-end .navbar-item .icon {
    transition: all 0.3s ease;
}

/* Logo styling */
.main-logo {
    transition: all 0.3s ease;
}

.navbar-item:hover .main-logo {
    transform: scale(1.05);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-name {
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--n0-white);
}

/* Navbar burger for mobile */
.navbar-burger {
    color: var(--n0-white) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.navbar-burger:hover {
    background-color: rgba(6, 206, 174, 0.3) !important;
}

.navbar-burger span {
    height: 2px;
    width: 20px;
    background-color: var(--n0-white);
    transition: all 0.3s ease;
}

.navbar-burger:hover span {
    background-color: var(--n0-white);
}

/* Mobile menu styling */
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background: linear-gradient(180deg, var(--deep-teal-navy) 0%, #1a4a4d 100%) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
        border-radius: 0 0 12px 12px;
        padding: 0.5rem;
    }
    
    .navbar-menu.is-active {
        animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Profile/Login button in navbar */
.navbar .buttons .button {
    background: var(--n0-white) !important;
    border: none !important;
    color: var(--deep-teal-navy) !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar .buttons .button:hover {
    background: var(--n0-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Button Styling */
.button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
    font-weight: 600 !important;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}



.button.is-primary {
    background-color: var(--brand-teal) !important;
    border: none;
    color: var(--n0-white) !important;
    box-shadow: 0 2px 8px rgba(6, 206, 174, 0.3);
}

.button.is-primary:hover {
    background-color: var(--deep-teal-navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(18, 55, 57, 0.4);
}

.button.is-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(6, 206, 174, 0.3);
}

.button.is-secondary, .button.is-light {
    background-color: var(--n0-white);
    border: 2px solid var(--n100-cloud);
    color: var(--n700-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.button.is-secondary:hover, .button.is-light:hover {
    border-color: var(--brand-teal);
    color: var(--brand-teal);
    box-shadow: 0 4px 15px rgba(6, 206, 174, 0.2);
    transform: translateY(-2px);
}

/* Card/Box Styling */
.box, .card {
    background: var(--n0-white) !important;
    border: 1px solid var(--n100-cloud);
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.box:hover, .card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-2px);
}

/* Accent strip for important cards */
.box.has-accent-teal::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--g1-energy-trail);
}

.box.has-accent-gold::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--g3-milestone);
}

.box.has-accent-indigo::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--indigo-anchor);
}

/* Footer Styling */
.section {
    flex-grow: 1;
}

.footer {
    margin-top: auto;
    padding: 3rem 1.5rem 2rem;
    background: linear-gradient(180deg, var(--n50-mist) 0%, var(--n100-cloud) 100%);
    color: var(--n300-slate);
    border-top: 1px solid var(--n100-cloud);
}

.footer a {
    color: var(--electric-blue);
    transition: color 0.2s ease;
}

.footer a:hover {
    color: var(--brand-teal);
}

/* Links */
a {
    color: var(--electric-blue);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--brand-teal);
}

/* Notifications */
.notification {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.notification.is-success {
    background: linear-gradient(135deg, rgba(11, 191, 166, 0.15) 0%, rgba(6, 206, 174, 0.1) 100%);
    border-left: 4px solid var(--brand-teal);
    color: var(--deep-teal-navy);
}

.notification.is-danger {
    background: linear-gradient(135deg, rgba(226, 74, 99, 0.15) 0%, rgba(226, 74, 99, 0.1) 100%);
    border-left: 4px solid var(--coral-red);
    color: var(--n700-ink);
}

.notification.is-warning {
    background: linear-gradient(135deg, rgba(195, 170, 48, 0.15) 0%, rgba(195, 170, 48, 0.1) 100%);
    border-left: 4px solid var(--gold-highlight);
    color: var(--n700-ink);
}

.notification.is-info {
    background: linear-gradient(135deg, rgba(11, 129, 210, 0.15) 0%, rgba(64, 223, 237, 0.1) 100%);
    border-left: 4px solid var(--electric-blue);
    color: var(--n700-ink);
}

/* Font Settings */
h1, h2, h3, h4, h5, h6, .navbar-item {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
    font-weight: 800 !important;
}

/* Calendar Styles */
.calendar-grid {
    max-width: 100%;
    padding: 0 0.5rem;
}

.calendar-day {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.1rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

@media screen and (max-width: 768px) {
    .calendar-grid {
        padding: 0;
    }
    .calendar-day {
        width: 1.5rem;
        height: 1.5rem;
        margin: 0.05rem;
        font-size: 0.8rem;
    }
}

.calendar-day.active {
    background-color: var(--brand-teal);
    color: var(--n0-white);
    font-weight: 600;
}

.calendar-day.current {
    background-color: transparent;
    color: var(--n700-ink);
    font-weight: bold;
    border: 2px solid var(--electric-blue);
    box-shadow: 0 0 8px rgba(11, 129, 210, 0.4);
}

.calendar-day.inactive {
    border: 1px solid var(--n100-cloud);
    color: var(--n300-slate);
    background-color: var(--n0-white);
}

.calendar-day.inactive:hover {
    border-color: var(--brand-teal);
    background-color: rgba(6, 206, 174, 0.05);
}

.calendar-day.empty {
    border: none;
}

.calendar-day.current.active {
    background-color: var(--brand-teal);
    color: var(--n0-white);
    font-weight: bold;
    border: 2px solid var(--electric-blue);
}


.progress {
    height: 0.75rem;
    transition: all 0.3s ease;
    background-color: var(--n100-cloud) !important;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress::-webkit-progress-bar {
    background-color: var(--n100-cloud);
    border-radius: 10px;
}

.progress::-webkit-progress-value {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--g1-energy-trail) !important;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(6, 206, 174, 0.5);
}

.progress::-moz-progress-bar {
    background: var(--g1-energy-trail) !important;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(6, 206, 174, 0.5);
}

/* Utility Classes for Brand Colors */
.has-text-brand-teal { color: var(--brand-teal) !important; }
.has-text-electric-blue { color: var(--electric-blue) !important; }
.has-text-gold { color: var(--gold-highlight) !important; }
.has-text-ink { color: var(--n700-ink) !important; }

.has-bg-brand-teal { background-color: var(--brand-teal) !important; }
.has-bg-energy-trail { background: var(--g1-energy-trail) !important; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--n50-mist);
}
::-webkit-scrollbar-thumb {
    background: var(--n300-slate);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-teal);
}
/* Score Card Styling */
.score-card {
    background: linear-gradient(135deg, var(--n0-white) 0%, var(--n25-frost) 100%) !important;
    border: 1px solid var(--n100-cloud);
    border-radius: 24px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 2rem !important;
    position: relative;
    overflow: hidden;
}

.score-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--g1-energy-trail);
}

.score-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(6, 206, 174, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.score-number {
    font-size: 4rem;
    font-weight: 900;
    background: var(--g1-energy-trail);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    line-height: 1;
    text-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(6, 206, 174, 0.3));
}

.score-label {
    color: var(--n700-ink);
    font-weight: 700;
    font-size: 1.5rem;
}

.score-subtext {
    color: var(--n300-slate);
    font-weight: 500;
    margin-top: 0.5rem;
}

/* Input fields */
.input, .textarea, .select select {
    border: 2px solid var(--n100-cloud);
    border-radius: 12px;
    transition: all 0.2s ease;
    background-color: var(--n0-white);
}

.input:focus, .textarea:focus, .select select:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(6, 206, 174, 0.15);
}

.input:hover, .textarea:hover, .select select:hover {
    border-color: var(--n300-slate);
}

/* Labels */
.label {
    color: var(--n700-ink);
    font-weight: 600;
}

/* Help text */
.help {
    color: var(--n300-slate);
}

/* Tables */
.table {
    background-color: var(--n0-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.table thead th {
    background: linear-gradient(180deg, var(--n25-frost) 0%, var(--n50-mist) 100%);
    color: var(--n700-ink);
    font-weight: 700;
    border-bottom: 2px solid var(--n100-cloud);
}

.table tbody tr:hover {
    background-color: rgba(6, 206, 174, 0.05);
}

/* Tags */
.tag {
    border-radius: 8px;
    font-weight: 600;
}

.tag.is-primary {
    background-color: var(--brand-teal);
    color: var(--n0-white);
}

/* Icons with glow effect */
.icon-glow {
    filter: drop-shadow(0 0 6px currentColor);
}

/* Animated gradient text */
.gradient-text {
    background: var(--g1-energy-trail);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glowing border effect */
.glow-border {
    position: relative;
}

.glow-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--g1-energy-trail);
    border-radius: inherit;
    z-index: -1;
    opacity: 0.5;
    filter: blur(8px);
}

.button.is-danger {
    background-color: var(--coral-red) !important;
    color: var(--n0-white) !important;
    border: none;
    box-shadow: 0 4px 15px rgba(226, 74, 99, 0.3);
}

.button.is-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(226, 74, 99, 0.4);
}

.tag.is-monthly-focus {
    background: linear-gradient(90deg, rgba(6, 206, 174, 0.2) 0%, rgba(64, 223, 237, 0.2) 100%);
    color: var(--deep-teal-navy);
    border: 1px solid var(--brand-teal);
}

.tag.is-diamond {
    background: var(--g3-milestone);
    color: var(--n0-white);
    border: none;
    box-shadow: 0 2px 8px rgba(195, 170, 48, 0.4);
}

/* Pulse animation for important elements */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(6, 206, 174, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(6, 206, 174, 0.8), 0 0 30px rgba(64, 223, 237, 0.4);
    }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Fade in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

/* Page title styling */
.title.is-1, .title.is-2 {
    color: var(--n700-ink) !important;
}

/* Hero section overrides for white text */
.hero-body .title.is-1,
.hero-body .title.is-2 {
    color: var(--n0-white) !important;
}

/* Section headers */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.section-header::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--g1-energy-trail);
    border-radius: 2px;
}

/* Dropdown styling */
.dropdown-content {
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--n100-cloud);
}

.dropdown-item:hover {
    background-color: rgba(6, 206, 174, 0.1);
    color: var(--brand-teal);
}

/* Modal styling */
.modal-card {
    border-radius: 20px;
    overflow: hidden;
}

.modal-card-head {
    background: linear-gradient(135deg, var(--n900-deep-ink) 0%, var(--deep-teal-navy) 100%);
    border-bottom: 3px solid;
    border-image: var(--g1-energy-trail) 1;
}

.modal-card-title {
    color: var(--n0-white) !important;
}

.modal-card-foot {
    background-color: var(--n25-frost);
    border-top: 1px solid var(--n100-cloud);
}

/* Formula Card - "Your Score" highlight */
.formula-card {
    background: linear-gradient(135deg, var(--deep-teal-navy) 0%, #1a4a4d 50%, var(--deep-teal-navy) 100%);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(18, 55, 57, 0.4);
}

.formula-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--g1-energy-trail);
}

.formula-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--g1-energy-trail);
}

.formula-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.formula-label {
    display: inline-block;
    background: var(--brand-teal);
    color: var(--n0-white);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.formula-equation {
    color: var(--n0-white) !important;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .formula-card {
        padding: 1.5rem 1rem;
    }
    .formula-equation {
        font-size: 1.1rem;
    }
}

/* Group page responsive utilities */
@media screen and (max-width: 768px) {
    .mt-2-mobile {
        margin-top: 0.5rem;
    }
    
    /* Ensure group title doesn't get too cramped */
    .title.is-2 {
        font-size: 1.5rem;
    }
}

/* Accessibility: Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-teal);
    color: var(--n0-white);
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    z-index: 9999;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--cyan-glow);
    outline-offset: 2px;
}

/* Dismissible notifications with smooth animation */
.notification.is-dismissible {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.notification .delete {
    cursor: pointer;
}

/* Enhanced Footer Styles */
.enhanced-footer {
    background: linear-gradient(180deg, var(--n50-mist) 0%, var(--n100-cloud) 100%);
    padding: 2.5rem 1.5rem 2rem;
    border-top: 1px solid var(--n300-slate);
}

.enhanced-footer .footer-link {
    color: var(--n700-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.enhanced-footer .footer-link:hover {
    color: var(--brand-teal);
}

.enhanced-footer .strava-badge {
    display: inline-block;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.enhanced-footer .strava-badge:hover {
    opacity: 1;
    transform: scale(1.02);
}

.enhanced-footer .strava-logo {
    width: 160px;
    height: auto;
}

.footer-gradient-line {
    height: 3px;
    background: var(--g1-energy-trail);
    border-radius: 2px;
    opacity: 0.6;
}

@media screen and (max-width: 768px) {
    .enhanced-footer {
        padding: 2rem 1rem 1.5rem;
    }
    
    .enhanced-footer .strava-logo {
        width: 140px;
        margin-top: 1rem;
    }
}

/* ==================== Achievement Badges ==================== */
.achievement-badges {
    display: inline-flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@keyframes badge-pop {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.achievement-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    color: white;
    font-size: 0.7rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    opacity: 0;
    animation: badge-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.achievement-chip:nth-child(1) { animation-delay: 0.6s; }
.achievement-chip:nth-child(2) { animation-delay: 0.75s; }
.achievement-chip:nth-child(3) { animation-delay: 0.9s; }
.achievement-chip:nth-child(4) { animation-delay: 1.05s; }
.achievement-chip:nth-child(5) { animation-delay: 1.2s; }

.achievement-chip:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Larger badges for dashboard score card */
.score-card .achievement-badges {
    margin-top: 0.5rem;
}

.score-card .achievement-chip {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
}

/* Smaller badges for leaderboard table */
table .achievement-badges {
    margin-left: 0.25rem;
    display: inline-flex;
    vertical-align: middle;
}

table .achievement-chip {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.6rem;
}

/* ==================== Personal Target Progress Box ==================== */
.personal-target-box {
    background: linear-gradient(135deg, var(--n0-white) 0%, var(--n25-frost) 100%);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.personal-target-box:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.personal-target-box .title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.personal-target-box .tag {
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
}

/* Custom progress bar with CSS variable for color */
.personal-target-box .personal-target-progress.progress {
    height: 0.75rem !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: none !important;
}

.personal-target-box .personal-target-progress.progress::-webkit-progress-bar {
    background-color: var(--n100-cloud) !important;
    border-radius: 10px !important;
}

.personal-target-box .personal-target-progress.progress::-webkit-progress-value {
    background: var(--progress-color, var(--brand-teal)) !important;
    border-radius: 10px !important;
    transition: width 0.5s ease;
    box-shadow: none !important;
}

.personal-target-box .personal-target-progress.progress::-moz-progress-bar {
    background: var(--progress-color, var(--brand-teal)) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Firefox needs the element itself styled */
.personal-target-box .personal-target-progress.progress:indeterminate {
    background-color: var(--n100-cloud) !important;
}

/* Completed state for personal target box */
.personal-target-box.personal-target-complete {
    position: relative;
    overflow: hidden;
}

.personal-target-box.personal-target-complete::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
    pointer-events: none;
}

.personal-target-box.personal-target-complete .icon.is-large {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.85;
    }
}

/* Level-specific accent colors for the target box border */
.personal-target-box[style*="#27ae60"] {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.05) 0%, var(--n0-white) 100%);
}

.personal-target-box[style*="#95a5a6"] {
    background: linear-gradient(135deg, rgba(149, 165, 166, 0.08) 0%, var(--n0-white) 100%);
}

.personal-target-box[style*="#C3AA30"] {
    background: linear-gradient(135deg, rgba(195, 170, 48, 0.08) 0%, var(--n0-white) 100%);
}

.personal-target-box[style*="#5d6d7e"] {
    background: linear-gradient(135deg, rgba(93, 109, 126, 0.08) 0%, var(--n0-white) 100%);
}

.personal-target-box[style*="#6c3483"] {
    background: linear-gradient(135deg, rgba(108, 52, 131, 0.08) 0%, var(--n0-white) 100%);
}