/* ===========================


   Reset e Variabili


   =========================== */


* {


    margin: 0;


    padding: 0;


    box-sizing: border-box;


}





:root {


    --primary-color: #2563eb;


    --secondary-color: #10b981;


    --danger-color: #ef4444;


    --warning-color: #f59e0b;


    --success-color: #10b981;


    --dark: #1f2937;


    --light: #f9fafb;


    --gray: #6b7280;


    --gray-light: #e5e7eb;


    --white: #ffffff;





    --protein-color: #ef4444;


    --carbs-color: #3b82f6;


    --fats-color: #f59e0b;





    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);


    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);


    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);





    --transition: all 0.3s ease;


    --border-radius: 8px;


}





body {


    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;


    line-height: 1.6;


    color: var(--dark);


    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);


    background-attachment: fixed;


    min-height: 100vh;


}





/* ===========================


   Layout


   =========================== */


.container {


    max-width: 1200px;


    margin: 0 auto;


    padding: 0 20px;


}





/* ===========================


   Header


   =========================== */


header {


    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);


    box-shadow: var(--shadow-lg);


    padding: 2rem 0;


    margin-bottom: 2rem;


}





header h1 {


    font-size: 2.5rem;


    color: var(--white);


    margin-bottom: 0.5rem;


    font-weight: 700;


    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);


}





header p {


    color: #d1d5db;


    font-size: 1.125rem;


}





header a {


    color: #93c5fd;


}





header a:hover {


    color: var(--white);


}





.language-selector {


    margin-top: 1rem;


}





.language-selector select {


    padding: 0.5rem 1rem;


    border: 2px solid var(--gray-light);


    border-radius: var(--border-radius);


    font-size: 1rem;


    cursor: pointer;


    transition: var(--transition);


}





.language-selector select:hover {


    border-color: var(--primary-color);


}





/* ===========================


   Cards


   =========================== */


.card {


    background: var(--white);


    border-radius: var(--border-radius);


    padding: 2rem;


    margin-bottom: 2rem;


    box-shadow: var(--shadow-lg);


    animation: fadeIn 0.5s ease;


}





@keyframes fadeIn {


    from {


        opacity: 0;


        transform: translateY(20px);


    }


    to {


        opacity: 1;


        transform: translateY(0);


    }


}





.card h2 {


    font-size: 1.875rem;


    color: var(--dark);


    margin-bottom: 1.5rem;


    padding-bottom: 0.75rem;


    border-bottom: 3px solid var(--primary-color);


}





.card h3 {


    font-size: 1.5rem;


    color: var(--dark);


    margin: 1.5rem 0 1rem;


}





/* ===========================


   Forms


   =========================== */


.form-row {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 1rem;


    margin-bottom: 1rem;


}





.form-group {


    margin-bottom: 1.5rem;


}





.form-group label {


    display: block;


    font-weight: 600;


    color: var(--dark);


    margin-bottom: 0.5rem;


}





.form-group input,


.form-group select {


    width: 100%;


    padding: 0.75rem;


    border: 2px solid var(--gray-light);


    border-radius: var(--border-radius);


    font-size: 1rem;


    transition: var(--transition);


}





.form-group input:focus,


.form-group select:focus {


    outline: none;


    border-color: var(--primary-color);


    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);


}





.checkbox-group {


    display: flex;


    flex-wrap: wrap;


    gap: 1rem;


}





.checkbox-group label {


    display: flex;


    align-items: center;


    gap: 0.5rem;


    font-weight: normal;


    cursor: pointer;


}





.checkbox-group input[type="checkbox"] {


    width: auto;


    cursor: pointer;


}





/* ===========================


   Buttons


   =========================== */


.btn {


    padding: 0.875rem 2rem;


    border: none;


    border-radius: var(--border-radius);


    font-size: 1.125rem;


    font-weight: 600;


    cursor: pointer;


    transition: var(--transition);


    display: inline-block;


    text-align: center;


}





.btn-primary {


    background: linear-gradient(135deg, var(--primary-color), #1d4ed8);


    color: var(--white);


    box-shadow: var(--shadow);


}





.btn-primary:hover {


    transform: translateY(-2px);


    box-shadow: var(--shadow-lg);


}





.btn-primary:active {


    transform: translateY(0);


}





.btn-secondary {


    background: linear-gradient(135deg, var(--secondary-color), #059669);


    color: var(--white);


    box-shadow: var(--shadow);


    padding: 0.75rem 1.5rem;


    font-size: 1rem;


}





.btn-secondary:hover {


    transform: translateY(-2px);


    box-shadow: var(--shadow-lg);


}





.btn-secondary:active {


    transform: translateY(0);


}





/* ===========================


   Results Section


   =========================== */


.results-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    margin-bottom: 1.5rem;


    flex-wrap: wrap;


    gap: 1rem;


}





.results-header h2 {


    margin-bottom: 0;


    border-bottom: none;


    padding-bottom: 0;


}





.hidden {


    display: none;


}





.results-grid {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));


    gap: 1.5rem;


    margin-bottom: 2rem;


}





.result-card {


    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);


    border: 2px solid var(--gray-light);


    border-radius: var(--border-radius);


    padding: 1.5rem;


    text-align: center;


    transition: var(--transition);


}





.result-card:hover {


    transform: translateY(-5px);


    box-shadow: var(--shadow-lg);


    border-color: var(--primary-color);


}





.result-card h3,


.result-card h4 {


    color: var(--gray);


    font-size: 0.875rem;


    font-weight: 600;


    text-transform: uppercase;


    letter-spacing: 0.05em;


    margin-bottom: 0.75rem;


}





.result-value {


    font-size: 2.5rem;


    font-weight: 700;


    color: var(--primary-color);


    margin-bottom: 0.5rem;


}





.result-status {


    font-weight: 600;


    padding: 0.5rem 1rem;


    border-radius: 20px;


    display: inline-block;


    margin-top: 0.5rem;


}





.result-status.underweight {


    background: #dbeafe;


    color: #1e40af;


}





.result-status.normal {


    background: #d1fae5;


    color: #065f46;


}





.result-status.overweight {


    background: #fed7aa;


    color: #92400e;


}





.result-status.obese {


    background: #fecaca;


    color: #991b1b;


}





.result-description {


    color: var(--gray);


    font-size: 0.875rem;


    margin-top: 0.5rem;


}





/* ===========================


   Heart Rate Zones


   =========================== */


.hr-zones {


    margin-top: 2rem;


}





.hr-zones h4 {


    font-size: 1.25rem;


    margin-bottom: 1rem;


    color: var(--dark);


}





.zone-card {


    background: var(--white);


    border-left: 4px solid;


    border-radius: var(--border-radius);


    padding: 1rem;


    margin-bottom: 1rem;


    box-shadow: var(--shadow-sm);


    transition: var(--transition);


}





.zone-card:hover {


    box-shadow: var(--shadow);


    transform: translateX(5px);


}





.zone-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    margin-bottom: 0.5rem;


    font-weight: 600;


}





.zone-percentage {


    font-size: 0.875rem;


    color: var(--gray);


}





.zone-value {


    font-size: 1.5rem;


    font-weight: 700;


    margin-bottom: 0.25rem;


}





.zone-description {


    font-size: 0.875rem;


    color: var(--gray);


}





.zone-recovery {


    border-left-color: #10b981;


}





.zone-recovery .zone-value {


    color: #10b981;


}





.zone-fat {


    border-left-color: #3b82f6;


}





.zone-fat .zone-value {


    color: #3b82f6;


}





.zone-aerobic {


    border-left-color: #f59e0b;


}





.zone-aerobic .zone-value {


    color: #f59e0b;


}





.zone-anaerobic {


    border-left-color: #ef4444;


}





.zone-anaerobic .zone-value {


    color: #ef4444;


}





.zone-max {


    border-left-color: #dc2626;


}





.zone-max .zone-value {


    color: #dc2626;


}





/* ===========================


   Macronutrienti


   =========================== */


.result-section {


    margin-top: 3rem;


}





.macros-container {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));


    gap: 1.5rem;


}





.macro-card {


    background: var(--white);


    border-radius: var(--border-radius);


    padding: 1.5rem;


    text-align: center;


    border: 3px solid;


    box-shadow: var(--shadow);


    transition: var(--transition);


}





.macro-card:hover {


    transform: scale(1.05);


    box-shadow: var(--shadow-lg);


}





.macro-card.protein {


    border-color: var(--protein-color);


}





.macro-card.carbs {


    border-color: var(--carbs-color);


}





.macro-card.fats {


    border-color: var(--fats-color);


}





.macro-card h4 {


    font-size: 1.125rem;


    margin-bottom: 1rem;


    text-transform: uppercase;


    letter-spacing: 0.05em;


}





.macro-card.protein h4 {


    color: var(--protein-color);


}





.macro-card.carbs h4 {


    color: var(--carbs-color);


}





.macro-card.fats h4 {


    color: var(--fats-color);


}





.macro-value {


    margin-bottom: 0.5rem;


}





.macro-grams {


    font-size: 2.5rem;


    font-weight: 700;


}





.macro-card.protein .macro-grams {


    color: var(--protein-color);


}





.macro-card.carbs .macro-grams {


    color: var(--carbs-color);


}





.macro-card.fats .macro-grams {


    color: var(--fats-color);


}





.macro-unit {


    font-size: 1rem;


    color: var(--gray);


}





.macro-calories,


.macro-percentage {


    font-size: 1rem;


    color: var(--gray);


    margin-top: 0.25rem;


}





.macro-percentage {


    font-weight: 600;


    font-size: 1.125rem;


}





.macro-description {


    margin-top: 1rem;


    font-size: 0.875rem;


    color: var(--gray);


}





/* ===========================


   Nutrition Tips


   =========================== */


.tips-container {


    display: grid;


    gap: 1rem;


}





.tip-card {


    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);


    border-left: 4px solid var(--primary-color);


    border-radius: var(--border-radius);


    padding: 1.5rem;


    box-shadow: var(--shadow-sm);


}





.tip-card h4 {


    color: var(--primary-color);


    font-size: 1.125rem;


    margin-bottom: 0.5rem;


}





.tip-card p {


    color: var(--dark);


    line-height: 1.8;


}





.tip-card ul {


    margin-top: 0.5rem;


    margin-left: 1.5rem;


}





.tip-card li {


    margin-bottom: 0.5rem;


}





/* ===========================


   Workout Section


   =========================== */


.workout-selector {


    display: grid;


    gap: 1.5rem;


    margin-bottom: 2rem;


}





.workout-day {


    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);


    border: 2px solid var(--gray-light);


    border-radius: var(--border-radius);


    padding: 1.5rem;


    margin-bottom: 1.5rem;


}





.workout-day h3 {


    color: var(--primary-color);


    font-size: 1.5rem;


    margin-bottom: 1rem;


    padding-bottom: 0.5rem;


    border-bottom: 2px solid var(--primary-color);


}





.workout-day h4 {


    color: var(--dark);


    font-size: 1.125rem;


    margin: 1rem 0 0.5rem;


}





.exercise-item {


    background: var(--white);


    border-left: 3px solid var(--secondary-color);


    border-radius: var(--border-radius);


    padding: 1rem;


    margin-bottom: 0.75rem;


    box-shadow: var(--shadow-sm);


}





.exercise-item h5 {


    color: var(--dark);


    font-size: 1rem;


    margin-bottom: 0.5rem;


}





.exercise-details {


    display: flex;


    gap: 1rem;


    flex-wrap: wrap;


    font-size: 0.875rem;


    color: var(--gray);


}





.exercise-details span {


    background: var(--light);


    padding: 0.25rem 0.75rem;


    border-radius: 15px;


}





/* ===========================


   Exercises Database


   =========================== */


.exercise-filters {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));


    gap: 1rem;


    margin-bottom: 2rem;


}





.exercises-grid {


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));


    gap: 1.5rem;


}





.exercise-card {


    background: var(--white);


    border: 2px solid var(--gray-light);


    border-radius: var(--border-radius);


    padding: 1.5rem;


    transition: var(--transition);


    cursor: pointer;


}





.exercise-card:hover {


    border-color: var(--primary-color);


    box-shadow: var(--shadow-lg);


    transform: translateY(-5px);


}





.exercise-card h4 {


    color: var(--dark);


    font-size: 1.125rem;


    margin-bottom: 0.75rem;


}





.exercise-tags {


    display: flex;


    flex-wrap: wrap;


    gap: 0.5rem;


    margin-bottom: 0.75rem;


}





.exercise-tag {


    background: var(--light);


    color: var(--gray);


    padding: 0.25rem 0.75rem;


    border-radius: 15px;


    font-size: 0.75rem;


    font-weight: 600;


}





.exercise-tag.category {


    background: #dbeafe;


    color: #1e40af;


}





.exercise-tag.equipment {


    background: #fef3c7;


    color: #92400e;


}





.exercise-tag.difficulty {


    background: #e0e7ff;


    color: #4338ca;


}





.exercise-description {


    color: var(--gray);


    font-size: 0.875rem;


    line-height: 1.6;


}





/* ===========================


   Info Accordion


   =========================== */


.info-accordion {


    display: grid;


    gap: 1rem;


}





.info-item {


    background: var(--white);


    border: 2px solid var(--gray-light);


    border-radius: var(--border-radius);


    overflow: hidden;


}





.info-header {


    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);


    padding: 1.25rem;


    cursor: pointer;


    font-size: 1.125rem;


    color: var(--dark);


    transition: var(--transition);


    display: flex;


    justify-content: space-between;


    align-items: center;


}





.info-header:hover {


    background: var(--light);


}





.info-header::after {


    content: '▼';


    font-size: 0.875rem;


    transition: var(--transition);


}





.info-item.active .info-header::after {


    transform: rotate(180deg);


}





.info-content {


    padding: 0 1.25rem;


    max-height: 0;


    overflow: hidden;


    transition: max-height 0.3s ease;


}





.info-item.active .info-content {


    padding: 1.25rem;


    max-height: 1000px;


}





.info-content p {


    margin-bottom: 1rem;


    line-height: 1.8;


}





.info-content ul {


    margin-left: 1.5rem;


    margin-bottom: 1rem;


}





.info-content li {


    margin-bottom: 0.5rem;


    line-height: 1.8;


}





/* ===========================


   Footer


   =========================== */


footer {


    background: var(--dark);


    color: var(--white);


    padding: 3rem 0 1.5rem;


    margin-top: 4rem;


}





.footer-content {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


    gap: 2rem;


    margin-bottom: 2rem;


}





.footer-section h3 {


    color: var(--white);


    font-size: 1.25rem;


    margin-bottom: 1rem;


}





.footer-section p {


    color: var(--gray-light);


    line-height: 1.8;


}





.footer-bottom {


    border-top: 1px solid rgba(255, 255, 255, 0.1);


    padding-top: 1.5rem;


    text-align: center;


}





.footer-bottom p {


    margin-bottom: 0.5rem;


    color: var(--gray-light);


}





.footer-bottom a {


    color: var(--white);


    text-decoration: none;


    transition: var(--transition);


}





.footer-bottom a:hover {


    color: var(--primary-color);


}





/* ===========================


   Responsive Design


   =========================== */


@media (max-width: 768px) {


    header h1 {


        font-size: 1.875rem;


    }





    header p {


        font-size: 1rem;


    }





    .form-row {


        grid-template-columns: 1fr;


    }





    .card {


        padding: 1.5rem;


    }





    .results-grid {


        grid-template-columns: 1fr;


    }





    .macros-container {


        grid-template-columns: 1fr;


    }





    .exercise-filters {


        grid-template-columns: 1fr;


    }





    .exercises-grid {


        grid-template-columns: 1fr;


    }





    .footer-content {


        grid-template-columns: 1fr;


    }





    .result-value {


        font-size: 2rem;


    }





    .macro-grams {


        font-size: 2rem;


    }


}





@media (max-width: 480px) {


    .container {


        padding: 0 15px;


    }





    header h1 {


        font-size: 1.5rem;


    }





    .card h2 {


        font-size: 1.5rem;


    }





    .btn {


        width: 100%;


    }


}





/* ===========================


   Print Styles


   =========================== */


@media print {


    body {


        background: white;


    }





    .card {


        box-shadow: none;


        border: 1px solid var(--gray-light);


        page-break-inside: avoid;


    }





    .btn {


        display: none;


    }





    .language-selector {


        display: none;


    }


}





/* ===========================


   Accessibility


   =========================== */


:focus-visible {


    outline: 3px solid var(--primary-color);


    outline-offset: 2px;


}





.visually-hidden {


    position: absolute;


    width: 1px;


    height: 1px;


    padding: 0;


    margin: -1px;


    overflow: hidden;


    clip: rect(0, 0, 0, 0);


    white-space: nowrap;


    border-width: 0;


}





/* ===========================


   Animations


   =========================== */


@keyframes pulse {


    0%, 100% {


        opacity: 1;


    }


    50% {


        opacity: 0.5;


    }


}





.loading {


    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;


}





/* ===========================


   Welcome Modal


   =========================== */


.modal-overlay {


    display: none;


    position: fixed;


    z-index: 9999;


    left: 0;


    top: 0;


    width: 100%;


    height: 100%;


    background: rgba(0, 0, 0, 0.8);


    overflow-y: auto;


    animation: fadeIn 0.3s ease;


}





.modal-overlay.show {


    display: flex;


    align-items: center;


    justify-content: center;


    padding: 20px;


}





.modal-welcome {


    background: var(--white);


    border-radius: 16px;


    max-width: 800px;


    width: 100%;


    max-height: 90vh;


    overflow-y: auto;


    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);


    animation: slideInDown 0.4s ease;


}





@keyframes slideInDown {


    from {


        opacity: 0;


        transform: translateY(-50px);


    }


    to {


        opacity: 1;


        transform: translateY(0);


    }


}





.modal-welcome-header {


    background: linear-gradient(135deg, var(--primary-color), #1d4ed8);


    color: var(--white);


    padding: 2rem;


    border-radius: 16px 16px 0 0;


    display: flex;


    justify-content: space-between;


    align-items: center;


}





.modal-welcome-header h2 {


    margin: 0;


    font-size: 2rem;


}





.modal-close {


    cursor: pointer;


    font-size: 2.5rem;


    line-height: 1;


    color: var(--white);


    transition: var(--transition);


    opacity: 0.8;


}





.modal-close:hover {


    opacity: 1;


    transform: scale(1.1);


}





.modal-welcome-content {


    padding: 2rem;


}





.modal-welcome-content > p:first-child {


    font-size: 1.125rem;


    text-align: center;


    margin-bottom: 2rem;


    color: var(--dark);


}





.welcome-feature {


    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);


    border-left: 4px solid var(--primary-color);


    border-radius: var(--border-radius);


    padding: 1.25rem;


    margin-bottom: 1rem;


    transition: var(--transition);


}





.welcome-feature:hover {


    transform: translateX(5px);


    box-shadow: var(--shadow);


}





.welcome-feature h3 {


    color: var(--primary-color);


    font-size: 1.125rem;


    margin: 0 0 0.5rem 0;


}





.welcome-feature p {


    color: var(--gray);


    margin: 0;


    line-height: 1.6;


    font-size: 0.9375rem;


}





.welcome-cta {


    text-align: center;


    margin: 2rem 0 1.5rem;


}





.welcome-cta .btn {


    font-size: 1.25rem;


    padding: 1rem 2.5rem;


}





.welcome-footer {


    border-top: 2px solid var(--gray-light);


    padding-top: 1.5rem;


    text-align: center;


    color: var(--gray);


}





.welcome-footer p {


    margin: 0.5rem 0;


    font-size: 0.9375rem;


}





.welcome-footer a {


    color: var(--primary-color);


    text-decoration: none;


    transition: var(--transition);


}





.welcome-footer a:hover {


    text-decoration: underline;


}





/* Responsive modal */


@media (max-width: 768px) {


    .modal-welcome {


        margin: 10px;


        max-height: 95vh;


    }





    .modal-welcome-header {


        padding: 1.5rem;


    }





    .modal-welcome-header h2 {


        font-size: 1.5rem;


    }





    .modal-welcome-content {


        padding: 1.5rem;


    }





    .welcome-feature {


        padding: 1rem;


    }





    .welcome-feature h3 {


        font-size: 1rem;


    }





    .welcome-cta .btn {


        width: 100%;


        font-size: 1.125rem;


    }


}





/* ===========================


   Authentication Bar


   =========================== */


.auth-bar {


    background: linear-gradient(135deg, #1f2937, #374151);


    color: var(--white);


    padding: 0.75rem 0;


    box-shadow: 0 2px 8px rgba(0,0,0,0.1);


}





.auth-bar-content {


    display: flex;


    justify-content: space-between;


    align-items: center;


    flex-wrap: wrap;


    gap: 1rem;


}





.user-info {


    display: flex;


    align-items: center;


    gap: 0.75rem;


}





.user-photo-small {


    width: 35px;


    height: 35px;


    border-radius: 50%;


    object-fit: cover;


    border: 2px solid var(--white);


}





.user-status-badge {


    padding: 0.25rem 0.75rem;


    border-radius: 20px;


    font-size: 0.875rem;


    font-weight: 600;


}





.user-status-badge.status-admin {


    background: linear-gradient(135deg, #f59e0b, #d97706);


    color: white;


}





.user-status-badge.status-trial {


    background: #dbeafe;


    color: #1e40af;


}





.user-status-badge.status-active {


    background: #d1fae5;


    color: #065f46;


}





.user-status-badge.status-expired {


    background: #fecaca;


    color: #991b1b;


}





.auth-buttons {


    display: flex;


    gap: 0.75rem;


    align-items: center;


}





.btn-auth {


    padding: 0.5rem 1.25rem;


    font-size: 0.9375rem;


    background: var(--white);


    color: var(--dark);


    border: none;


    border-radius: 20px;


    cursor: pointer;


    transition: var(--transition);


}





.btn-auth:hover {


    transform: translateY(-2px);


    box-shadow: 0 4px 12px rgba(0,0,0,0.2);


}





.btn-admin {


    padding: 0.5rem 1.25rem;


    font-size: 0.9375rem;


    background: linear-gradient(135deg, #f59e0b, #d97706);


    color: white;


    border: none;


    border-radius: 20px;


    text-decoration: none;


    transition: var(--transition);


    display: inline-block;


}





.btn-admin:hover {


    transform: translateY(-2px);


    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);


}





/* ===========================


   Access Denied Overlay


   =========================== */


.access-overlay {


    position: fixed;


    z-index: 10000;


    left: 0;


    top: 0;


    width: 100%;


    height: 100%;


    background: rgba(0, 0, 0, 0.9);


    display: flex;


    align-items: center;


    justify-content: center;


    padding: 20px;


}





.access-message {


    background: var(--white);


    padding: 3rem;


    border-radius: 16px;


    max-width: 600px;


    width: 100%;


    text-align: center;


    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);


}





.access-message h2 {


    color: var(--danger-color);


    font-size: 2rem;


    margin-bottom: 1.5rem;


}





.access-message p {


    font-size: 1.125rem;


    line-height: 1.8;


    margin-bottom: 1rem;


    color: var(--dark);


}





.payment-info {


    text-align: left;


}





.payment-info code {


    font-family: 'Courier New', monospace;


    font-size: 0.9375rem;


}





@media (max-width: 768px) {


    .auth-bar-content {


        flex-direction: column;


        text-align: center;


    }





    .user-info {


        flex-direction: column;


    }





    .auth-buttons {


        flex-direction: column;


        width: 100%;


    }





    .btn-auth,


    .btn-admin {


        width: 100%;


    }





    .access-message {


        padding: 2rem 1.5rem;


    }





    .access-message h2 {


        font-size: 1.5rem;


    }


}