/* Main Stylesheet for Weight Management Program Portal */
/* Google Fonts: Exo (body) and Oswald (headings) */
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');
/* Font Awesome CDN */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --red: #BB0C1B;
    --red-dark: #8A0814;
    --red-mid: #CC1527;
    --red-soft: #F5D5D8;
    --pink-soft: #FBEAEC;
    --white: #FFFFFF;
    --off: #FDF5F6;
    --cream: #FFF8F8;
    --border: #EDD8DA;
    --muted: #8C4A50;
    --text: #1C0A0C;
    --green: #16A34A;
    --amber: #D97706;
    --dark: #7F0010;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-800: #1f2937;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Exo', sans-serif;
    background: var(--off);
    color: var(--text);
    line-height: 1.65;
    font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ========== HEADER ========== */
.hdr {
    background: var(--red);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 3px 20px rgba(187, 12, 27, .35);
}

.hdr-in {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo img {
    height: 40px;
    width: auto;
    border-radius: 4px;
}

.logo-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-txt .en {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .5px;
}

.logo-txt .ar {
    font-size: 11px;
    color: rgba(255, 255, 255, .75);
    direction: rtl;
}

.hdr-pill {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 5px 15px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ========== NAVIGATION ========== */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-link {
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    font-weight: 500;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link:hover {
    color: #fff;
}

.nav-link.active {
    color: #fff;
    font-weight: 600;
}

.user-menu {
    position: relative;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    min-width: 200px;
    padding: 8px 0;
    display: none;
    z-index: 300;
}

.user-dropdown.show {
    display: block;
}

.user-dropdown a {
    display: block;
    padding: 10px 20px;
    color: var(--text);
    font-size: 14px;
    transition: .2s;
}

.user-dropdown a:hover {
    background: var(--off);
    color: var(--red);
}

.user-dropdown .divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

/* ========== LOGIN PAGE ========== */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    padding: 20px;
}

.login-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h1 {
    font-size: 28px;
    color: var(--red-dark);
    margin-bottom: 8px;
}

.login-header p {
    color: var(--muted);
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'Exo', sans-serif;
    font-size: 14px;
    color: var(--text);
    outline: none;
    transition: .2s;
    background: #fff;
}

.form-control:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(187, 12, 27, .1);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    border: none;
    font-family: 'Exo', sans-serif;
}

.btn-primary {
    background: var(--red);
    color: #fff;
}

.btn-primary:hover {
    background: var(--red-dark);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-800);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

.btn-danger {
    background: var(--red-dark);
    color: #fff;
}

.btn-danger:hover {
    background: var(--dark);
}

.btn-success {
    background: var(--green);
    color: #fff;
}

.btn-success:hover {
    background: #15803d;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-block {
    width: 100%;
}

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* ========== DASHBOARD ========== */
.dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
}

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

.dashboard-title h1 {
    font-size: 32px;
    color: var(--red-dark);
    margin-bottom: 4px;
}

.dashboard-title p {
    color: var(--muted);
    font-size: 14px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 16px rgba(187, 12, 27, .07);
    border-left: 4px solid var(--red);
}

.stat-card .icon {
    font-size: 32px;
    color: var(--red);
    margin-bottom: 12px;
}

.stat-card .value {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--red-dark);
    margin-bottom: 4px;
}

.stat-card .label {
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========== TABLES ========== */
.table-container {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(187, 12, 27, .07);
    margin-bottom: 30px;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 15px;
}

.table-header h3 {
    font-size: 18px;
    color: var(--red-dark);
}

.table-actions {
    display: flex;
    gap: 10px;
}

.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: var(--red);
}

th {
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
}

th.center {
    text-align: center;
}

tbody tr {
    border-bottom: 1px solid var(--border);
}

tbody tr:last-child {
    border-bottom: none;
}

tbody tr:nth-child(even) {
    background: var(--cream);
}

tbody tr:hover {
    background: var(--pink-soft);
}

td {
    padding: 14px 16px;
    font-size: 14px;
    vertical-align: middle;
}

td.center {
    text-align: center;
}

/* ========== BADGES ========== */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-active {
    background: #dcfce7;
    color: #166534;
}

.badge-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.badge-paused {
    background: #fef3c7;
    color: #92400e;
}

.badge-admin {
    background: #dbeafe;
    color: #1e40af;
}

.badge-staff {
    background: #f3e8ff;
    color: #6b21a8;
}

.badge-patient {
    background: #dcfce7;
    color: #166534;
}

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

.modal.show {
    display: flex;
}

.modal-content {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 18px;
    color: var(--red-dark);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--muted);
    cursor: pointer;
    transition: .2s;
}

.modal-close:hover {
    color: var(--red);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 24px;
    border-top: 1px solid var(--border);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .hdr-in {
        padding: 12px 18px;
    }
    
    .dashboard-container {
        padding: 20px;
    }
    
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .table-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .table-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .nav-menu {
        display: none;
    }
    
    /* Responsive Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    th {
        padding: 10px 10px;
        font-size: 10px;
        letter-spacing: 1px;
    }
    
    td {
        padding: 10px 10px;
        font-size: 12px;
    }
    
    .table-container {
        border-radius: 12px;
        margin-bottom: 20px;
    }
    
    .table-header h3 {
        font-size: 15px;
    }
    
    .btn {
        font-size: 12px;
        padding: 8px 14px;
    }
}


:root{
  --red:#BB0C1B;          /* Althiqa signature red (from logo) */
  --red-dark:#8A0814;
  --red-mid:#CC1527;
  --red-soft:#F5D5D8;
  --pink-soft:#FBEAEC;
  --white:#FFFFFF;
  --off:#FDF5F6;
  --cream:#FFF8F8;
  --border:#EDD8DA;
  --muted:#8C4A50;
  --text:#1C0A0C;
  --green:#16A34A;
  --amber:#D97706;
  --dark:#7F0010;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Exo',sans-serif;background:var(--off);color:var(--text);line-height:1.65;font-size:15px;}
a{color:inherit;text-decoration:none;}

/* ============ HEADER ============ */
.hdr{background:var(--red);position:sticky;top:0;z-index:200;box-shadow:0 3px 20px rgba(187,12,27,.35);}
.logo{display:flex;align-items:center;gap:14px;}
.logo img{height:40px;width:auto;border-radius:4px;}
.logo-txt{display:flex;flex-direction:column;line-height:1.2;}
.logo-txt .en{font-size:15px;font-weight:700;color:#fff;letter-spacing:.5px;}
.logo-txt .ar{font-size:11px;color:rgba(255,255,255,.75);direction:rtl;}
.hdr-pill{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.3);padding:5px 15px;border-radius:20px;white-space:nowrap;}
.hdr-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.hdr-nav a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.8);transition:all .2s;text-decoration:none;}
.hdr-nav a:hover{background:rgba(255,255,255,.15);color:#fff;}
.hdr-nav a.active{background:rgba(255,255,255,.2);color:#fff;}
.hdr-nav a i{font-size:13px;}
.hdr-user{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-size:12.5px;font-weight:500;}
.hdr-user i{font-size:16px;}
.hdr-logout{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:8px;color:#fff;font-size:11.5px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;}
.hdr-logout:hover{background:rgba(255,255,255,.25);}

/* ============ HERO ============ */
.hero{background:linear-gradient(140deg,var(--red) 0%,var(--red-dark) 55%,#5B0010 100%);color:#fff;padding:72px 36px 84px;position:relative;overflow:hidden;}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none;}
.hero::before{width:480px;height:480px;top:-120px;right:-100px;background:rgba(255,255,255,.04);}
.hero::after{width:300px;height:300px;bottom:-120px;left:-60px;background:rgba(255,255,255,.03);}
.hero-in{max-width:1120px;margin:0 auto;position:relative;z-index:1;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:30px;padding:6px 16px;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:22px;}
.hero h1{font-family:'Oswald',sans-serif;font-size:clamp(34px,5vw,56px);font-weight:700;line-height:1.08;margin-bottom:14px;}
.hero h1 i{font-style:italic;color:rgba(255,255,255,.68);}
.hero-sub{font-size:16px;color:rgba(255,255,255,.82);max-width:560px;margin-bottom:38px;}
.stat-row{display:flex;flex-wrap:wrap;gap:14px;}
.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:16px 22px;min-width:160px;backdrop-filter:blur(4px);}
.stat .n{font-family:'Oswald',sans-serif;font-size:32px;font-weight:700;line-height:1;}
.stat .l{font-size:12px;color:rgba(255,255,255,.72);margin-top:4px;}

/* ============ TABS ============ */
.tab-bar{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:64px;z-index:150;}
.tab-in{max-width:90%;margin:0 auto;padding:0 36px;display:flex;}
.tab{padding:14px 20px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;transition:.2s;white-space:nowrap;}
.tab:hover{color:var(--red);}
.tab.active{color:var(--red);border-bottom-color:var(--red);}

/* Mobile responsive tabs */
@media (max-width: 768px) {
    .tab-bar {
        position: sticky;
        top: 60px;
        z-index: 998;
    }
    .tab-in {
        padding: 0 15px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 0;
    }
    .tab-in::-webkit-scrollbar {
        height: 3px;
    }
    .tab-in::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 3px;
    }
    .tab {
        padding: 12px 16px;
        font-size: 11px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    .wrap {
        padding: 30px 15px;
    }
    .section {
        margin-bottom: 40px;
        scroll-margin-top: 120px;
    }
    .sec-sub {
        margin-left: 0;
        margin-bottom: 20px;
    }
    .sec-hdr {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .sec-num {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .sec-title {
        font-size: 20px;
    }
    
    /* Responsive tables — horizontal scroll */
    .dose-track,
    .lab-panel,
    .table-wrap,
    .ba-wrap,
    .pal-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    .dose-track table { min-width: 520px; }
    .dose-track th, .dose-track td { padding: 10px 8px; font-size: 12px; }
    .dose-track td input[type=date], .dose-track td input[type=text] { font-size: 12px; }

    .lab-panel table { min-width: 560px; }
    .lab-panel th, .lab-panel td { padding: 10px 8px; font-size: 11.5px; }
    .lab-panel td.test { min-width: 120px; font-size: 12px; }
    .lab-panel td.why { font-size: 11px; max-width: 180px; }
    .lab-panel td input { font-size: 12px; }

    .table-wrap table { min-width: 520px; }
    .table-wrap th, .table-wrap td { padding: 9px 8px; font-size: 12px; }
    .table-wrap td input { font-size: 12px; min-width: 50px; }

    .ba-wrap table { min-width: 520px; }
    .ba-wrap th, .ba-wrap td { padding: 10px 8px; font-size: 11.5px; }
    .ba-wrap td input { font-size: 12px; width: 95%; }

    .pal-table table { min-width: 380px; }
    .pal-table th, .pal-table td { padding: 10px 8px; font-size: 12px; }
    .pal-table td.v { font-size: 15px; width: 50px; }

    .phase-grid { grid-template-columns: 1fr; }
    .protein-grid { grid-template-columns: 1fr; }
    .supp-grid { grid-template-columns: 1fr; }
    .sched-grid { grid-template-columns: 1fr; }
    .meal-split { grid-template-columns: 1fr 1fr; }
    .lab-tabs { flex-wrap: wrap; gap: 6px; }
    .lab-tab { font-size: 11px; padding: 7px 12px; }
    .visit-hdr { flex-direction: column; align-items: flex-start; }
    .tdee-grid { grid-template-columns: 1fr 1fr; }
    .tdee-wrap { padding: 22px 18px; }
    .bmi-card { flex-direction: column; align-items: flex-start; }
    .bmi-grid { grid-template-columns: 1fr; }
    .contraindic .ci-list { grid-template-columns: 1fr; }
    .tgt-grid { grid-template-columns: 1fr 1fr; }
    .commit-grid { grid-template-columns: 1fr; }
    .plate-grid { grid-template-columns: 1fr; }
    .emergency { flex-direction: column; padding: 22px 20px; }

    /* Responsive cards */
    .card {
        padding: 15px;
    }
    .dose-img-card img {
        max-width: 100%;
        height: auto;
    }
    
    /* Responsive forms */
    .track-grid {
        grid-template-columns: 1fr;
    }
    
    /* Responsive stat row */
    .stat-row {
        flex-direction: column;
    }
    .stat {
        width: 100%;
        min-width: auto;
    }
}

/* ============ SECTIONS ============ */
.wrap{max-width:1120px;margin:0 auto;padding:56px 36px;}
.section{margin-bottom:76px;scroll-margin-top:140px;}
.sec-hdr{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.sec-num{width:44px;height:44px;background:var(--red);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:19px;font-weight:700;flex-shrink:0;}
.sec-title{font-family:'Oswald',sans-serif;font-size:clamp(22px,2.8vw,30px);font-weight:600;color:var(--red-dark);}
.sec-sub{color:var(--muted);font-size:14px;margin:0 0 28px 58px;max-width:700px;}
.sec-rule{width:52px;height:3px;background:var(--red);border-radius:2px;margin:28px 0 22px;}

/* ============ TRACKER ============ */
.track-hero{background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);border-radius:20px;padding:30px 36px;color:#fff;margin-bottom:22px;position:relative;overflow:hidden;}
.track-hero::after{content:'';position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07);}
.track-hero h3{font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;margin-bottom:5px;}
.track-hero p{font-size:14px;color:rgba(255,255,255,.82);max-width:720px;}
.track-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;}
.tfield{background:#fff;border-radius:14px;padding:16px 20px;box-shadow:0 2px 14px rgba(187,12,27,.07);}
.tfield label{display:block;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:7px;}
.tfield input{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:10px 13px;font-family:'Exo',sans-serif;font-size:14.5px;color:var(--text);outline:none;transition:.2s;background:#fff;}
.tfield input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(187,12,27,.1);}
.tfield .hint{font-size:11.5px;color:var(--muted);margin-top:5px;}

/* ============ BMI ============ */
.bmi-card{background:#fff;border-radius:14px;padding:22px 26px;box-shadow:0 2px 14px rgba(187,12,27,.07);display:flex;align-items:center;gap:22px;margin-bottom:18px;}
.bmi-gauge-card{background:#fff;border-radius:14px;padding:22px 26px;box-shadow:0 2px 14px rgba(187,12,27,.07);margin-bottom:18px;}
.bmi-gauge-wrap{position:relative;width:100%;max-width:340px;margin:0 auto;}
.bmi-gauge-svg{width:100%;height:auto;}
#bmi-needle{transition:transform 1.2s cubic-bezier(.4,2,.6,1);transform-origin:160px 155px;transform-box:view-box;}
.bmi-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;align-items:start;}
.bmi-ring{width:88px;height:88px;border-radius:50%;border:5px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .4s;}
.bmi-ring .bval{font-family:'Oswald',sans-serif;font-size:24px;font-weight:700;color:var(--red);transition:color .4s;}
.bmi-ring .bunit{font-size:11px;color:var(--muted);}
.bmi-details{flex:1;}
.bmi-details h4{font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;color:var(--red-dark);margin-bottom:5px;}
.bmi-cat{display:inline-block;padding:3px 13px;border-radius:20px;font-size:12px;font-weight:600;background:var(--border);color:var(--muted);margin-bottom:8px;transition:all .3s;}
.bmi-bar-wrap{max-width:320px;}
.bmi-bar{height:7px;background:var(--border);border-radius:4px;overflow:hidden;}
.bmi-fill{height:100%;border-radius:4px;background:var(--red);transition:width .5s ease,background .4s;}
.bmi-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:3px;}

/* ============ TARGETS ============ */
.tgt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:26px;}
.tgt{background:#fff;border-radius:12px;padding:16px 18px;box-shadow:0 1px 12px rgba(187,12,27,.06);border-bottom:3px solid var(--red);}
.tgt label{font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);display:block;margin-bottom:4px;}
.tgt .val{font-family:'Oswald',sans-serif;font-size:21px;font-weight:700;}
.tgt .sub{font-size:11.5px;color:var(--muted);margin-top:2px;}

/* ============ DOSE ESCALATION ============ */
.dose-img-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 16px rgba(187,12,27,.08);margin-bottom:22px;text-align:center;}
.dose-img-card img{max-width:100%;height:auto;border-radius:8px;}
.dose-img-card .caption{font-size:13px;color:var(--muted);font-style:italic;margin-top:14px;}

.dose-track{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(187,12,27,.07);}
.dose-track table{width:100%;border-collapse:collapse;min-width:700px;}
.dose-track thead{background:var(--red);}
.dose-track th{padding:12px 14px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-align:left;}
.dose-track tbody tr{border-bottom:1px solid var(--border);}
.dose-track tbody tr:last-child{border-bottom:none;}
.dose-track td{padding:14px;font-size:13.5px;}
.dose-track td input[type=date], .dose-track td input[type=text]{width:100%;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--text);outline:none;border-bottom:1px solid transparent;padding:4px 0;}
.dose-track td input:focus{border-bottom:1.5px solid var(--red);}
.phase-chip{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--red-dark);}
.phase-chip::before{content:'';width:10px;height:10px;border-radius:50%;}
.p1::before{background:#1DD1A1;} .p2::before{background:#E84393;}
.p3::before{background:#E67E22;} .p4::before{background:#2980B9;}
.p5::before{background:#34495E;}
.dose-val{font-family:'Oswald',sans-serif;font-weight:700;color:var(--red);font-size:16px;}
.dose-input{width:100%;border:1.5px solid var(--border);border-radius:6px;padding:7px 10px;font-family:'Oswald',sans-serif;font-weight:600;color:var(--red);font-size:15px;text-align:center;outline:none;transition:.2s;background:#fff;}
.dose-input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(187,12,27,.1);}
.dose-input::placeholder{color:var(--mute);font-style:italic;font-weight:400;font-size:13px;}
.tol-radio{display:inline-flex;gap:12px;font-size:12.5px;color:var(--muted);}
.tol-radio label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;}

/* ============ LAB WORK ============ */
.lab-warn{background:var(--red-dark);color:#fff;border-radius:16px;padding:26px 30px;margin-bottom:24px;}
.lab-warn h4{font-family:'Oswald',sans-serif;font-size:18px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.lab-warn ul{list-style:none;padding:0;}
.lab-warn li{font-size:13.5px;color:rgba(255,255,255,.95);margin-bottom:6px;padding-left:24px;position:relative;}
.lab-warn li::before{content:'✓';position:absolute;left:0;color:#fff;font-weight:700;}

.lab-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.lab-tab{padding:9px 17px;background:#fff;border:1.5px solid var(--border);border-radius:24px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:.2s;}
.lab-tab:hover{border-color:var(--red);color:var(--red);}
.lab-tab.active{background:var(--red);border-color:var(--red);color:#fff;}

.lab-panel{display:none;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(187,12,27,.07);}
.lab-panel.active{display:block;}
.lab-panel table{width:100%;border-collapse:collapse;min-width:780px;}
.lab-panel thead{background:var(--red);}
.lab-panel th{padding:12px 14px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-align:left;}
.lab-panel th.center{text-align:center;}
.lab-panel tbody tr{border-bottom:1px solid var(--border);}
.lab-panel tbody tr:last-child{border-bottom:none;}
.lab-panel tbody tr:nth-child(even){background:var(--cream);}
.lab-panel td{padding:13px 14px;font-size:13px;vertical-align:middle;}
.lab-panel td.test{font-weight:700;color:var(--red-dark);min-width:180px;}
.lab-panel td.why{color:var(--muted);font-size:12.5px;max-width:340px;}
.lab-panel td input{width:100%;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text);outline:none;padding:4px 0;border-bottom:1px solid transparent;}
.lab-panel td input:focus{border-bottom:1.5px solid var(--red);}
.yn{display:inline-flex;gap:8px;font-size:12px;color:var(--muted);justify-content:center;width:100%;}
.yn label{display:inline-flex;align-items:center;gap:3px;cursor:pointer;}

.contraindic{background:#fff;border-radius:16px;padding:22px 26px;box-shadow:0 2px 14px rgba(187,12,27,.07);border-left:5px solid var(--red-dark);margin-top:22px;}
.contraindic h4{font-family:'Oswald',sans-serif;font-size:17px;color:var(--red-dark);margin-bottom:13px;}
.contraindic .ci-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;}
.contraindic label{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;cursor:pointer;}
.contraindic input[type=checkbox]{margin-top:3px;accent-color:var(--red);}
.contraindic h5{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin:16px 0 8px;}

/* ============ BEFORE-AFTER LAB TRACKER ============ */
.ba-wrap{background:#fff;border-radius:16px;overflow:auto;box-shadow:0 2px 16px rgba(187,12,27,.07);}
.ba-wrap table{width:100%;border-collapse:collapse;min-width:800px;}
.ba-wrap thead{background:var(--red);}
.ba-wrap th{padding:12px 14px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-align:center;}
.ba-wrap th:first-child{text-align:left;}
.ba-wrap tbody tr{border-bottom:1px solid var(--border);}
.ba-wrap tbody tr:nth-child(even){background:var(--cream);}
.ba-wrap td{padding:12px 14px;font-size:13px;text-align:center;}
.ba-wrap td:first-child{text-align:left;font-weight:700;color:var(--red-dark);}
.ba-wrap td:last-child{color:var(--muted);font-style:italic;font-size:12px;background:var(--pink-soft);}
.ba-wrap td input{width:90%;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:13px;text-align:center;outline:none;border-bottom:1px solid transparent;padding:4px 0;color:var(--text);}
.ba-wrap td input:focus{border-bottom:1.5px solid var(--red);}

/* ============ CHART CARD ============ */
.chart-card{background:#fff;border-radius:16px;padding:26px;box-shadow:0 2px 16px rgba(187,12,27,.07);margin-top:18px;}
.chart-card h4{font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;color:var(--red-dark);margin-bottom:18px;}
.chart-svg{width:100%;height:220px;display:block;}

/* ============ VISIT LOG ============ */
.visit-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;flex-wrap:wrap;gap:10px;}
.visit-hdr h3{font-family:'Oswald',sans-serif;font-size:19px;font-weight:600;color:var(--red-dark);}
.print-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--red);border:2px solid var(--red);border-radius:8px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s;font-family:'DM Sans',sans-serif;}
.print-btn:hover{background:var(--red);color:#fff;}
.table-wrap{background:#fff;border-radius:16px;overflow:auto;box-shadow:0 2px 16px rgba(187,12,27,.07);}
.table-wrap table{width:100%;border-collapse:collapse;min-width:700px;}
.table-wrap thead{background:var(--red);}
.table-wrap th{padding:12px 14px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-align:left;white-space:nowrap;}
.table-wrap tbody tr{border-bottom:1px solid var(--border);}
.table-wrap tbody tr:nth-child(even){background:var(--cream);}
.table-wrap td{padding:11px 14px;font-size:13.5px;}
.table-wrap td input{width:100%;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--text);outline:none;min-width:70px;padding:3px 0;}
.table-wrap td input:focus{border-bottom:1.5px solid var(--red);}
.vb{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.vb-w{background:rgba(187,12,27,.12);color:var(--red);}
.vb-2{background:rgba(138,8,20,.1);color:var(--red-dark);}
.vb-m{background:rgba(107,0,16,.08);color:#6B0010;}

/* ============ CARDS ============ */
.card{background:#fff;border-radius:16px;padding:24px 28px;box-shadow:0 2px 18px rgba(187,12,27,.07);margin-bottom:14px;border-left:4px solid var(--red);}
.card h3{font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;color:var(--red-dark);margin-bottom:9px;}
.card p,.card li{font-size:14.5px;color:#3D1A1A;}
.card ul,.card ol{padding-left:20px;}
.card li{margin-bottom:5px;}
.info{background:var(--cream);border:1px solid var(--border);border-left:5px solid var(--red);border-radius:10px;padding:13px 18px;font-size:14px;color:var(--muted);margin-bottom:18px;}
.info strong{color:var(--red-dark);}

/* ============ PHASES ============ */
.phase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:16px;}
.phase{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 18px rgba(187,12,27,.07);}
.phase-top{background:var(--red);color:#fff;padding:17px 21px;}
.phase-top .tag{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;opacity:.8;margin-bottom:4px;}
.phase-top h4{font-family:'Oswald',sans-serif;font-size:18px;font-weight:600;}
.phase-top .wk{font-size:12px;opacity:.75;margin-top:2px;}
.phase-body{padding:18px 21px;}
.phase-body .goal{background:var(--off);border-radius:7px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--red-dark);margin-bottom:13px;}
.phase-body ul{padding-left:16px;}
.phase-body li{font-size:13px;color:#3D1A1A;margin-bottom:5px;}

/* ============ RULES ============ */
.rules{list-style:none;display:flex;flex-direction:column;gap:11px;}
.rule{display:flex;gap:13px;align-items:flex-start;background:#fff;border-radius:11px;padding:14px 17px;box-shadow:0 1px 10px rgba(187,12,27,.06);}
.rule-n{width:28px;height:28px;background:var(--red);color:#fff;border-radius:50%;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rule p{font-size:14px;color:#3D1A1A;}
.rule strong{color:var(--red-dark);}

/* ============ PLATE ============ */
.plate-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:20px;}
.pq{background:#fff;border-radius:11px;padding:16px;box-shadow:0 1px 12px rgba(187,12,27,.06);border-top:4px solid var(--red);}
.pq:nth-child(2){border-top-color:#E03050;}
.pq:nth-child(3){border-top-color:#B01222;}
.pq:nth-child(4){border-top-color:#F07080;}
.pq .icon{font-size:22px;margin-bottom:7px;}
.pq h4{font-size:13px;font-weight:700;color:var(--red-dark);margin-bottom:3px;}
.pq p{font-size:12.5px;color:#5A2A2A;}

/* ============ PROTEIN ============ */
.protein-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px;}
.protein{background:#fff;border-radius:9px;padding:12px 15px;box-shadow:0 1px 10px rgba(187,12,27,.06);display:flex;justify-content:space-between;align-items:center;border-bottom:2.5px solid var(--red);}
.protein .fd{font-size:13px;color:#3D1A1A;font-weight:500;}
.protein .g{font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;color:var(--red);}

/* ============ SIDE EFFECT ============ */
.se-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:11px;}
.se{background:#fff;border-radius:11px;padding:16px;box-shadow:0 1px 12px rgba(187,12,27,.06);}
.se h4{font-weight:700;color:var(--red-dark);font-size:14px;margin-bottom:5px;}
.se p{font-size:13px;color:#5A2A2A;}

/* ============ SCHEDULE ============ */
.sched{display:flex;flex-direction:column;gap:13px;}
.sched-item{background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 2px 14px rgba(187,12,27,.07);display:flex;}
.sched-badge{background:var(--red);color:#fff;writing-mode:vertical-rl;text-orientation:mixed;padding:16px 12px;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;min-width:46px;flex-shrink:0;}
.sched-body{padding:16px 21px;}
.sched-body h4{font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;color:var(--red-dark);margin-bottom:7px;}
.sched-body ul{padding-left:16px;}
.sched-body li{font-size:13.5px;color:#3D1A1A;margin-bottom:4px;}

/* ============ COMMIT ============ */
.commit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
.commit{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 18px rgba(187,12,27,.07);border-top:4px solid var(--red);}
.commit.red{background:var(--red);color:#fff;border-top-color:var(--red-dark);}
.commit h4{font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;color:var(--red-dark);margin-bottom:13px;}
.commit.red h4{color:#fff;}
.chk{display:flex;align-items:flex-start;gap:9px;margin-bottom:9px;font-size:14px;color:#3D1A1A;}
.commit.red .chk{color:rgba(255,255,255,.92);}
.chk-ic{width:19px;height:19px;background:var(--red);border-radius:50%;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.commit.red .chk-ic{background:#fff;color:var(--red);}

/* ============ EMERGENCY ============ */
.emergency{background:var(--red-dark);color:#fff;border-radius:18px;padding:32px 36px;display:flex;gap:26px;align-items:flex-start;box-shadow:0 8px 28px rgba(138,8,20,.28);}
.emergency .ico{font-size:40px;flex-shrink:0;line-height:1;}
.emergency h3{font-family:'Oswald',sans-serif;font-size:21px;font-weight:600;margin-bottom:10px;}
.emergency p{font-size:13px;color:rgba(255,255,255,.82);margin-bottom:11px;}
.emergency ul{padding-left:17px;}
.emergency li{font-size:13.5px;margin-bottom:5px;color:rgba(255,255,255,.92);}

/* ============ FOOTER ============ */
.ftr{background:var(--red-dark);color:#fff;padding:38px;text-align:center;margin-top:60px;}
.ftr-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.ftr-logo img{height:32px;border-radius:3px;}
.ftr-logo .n{font-size:17px;font-weight:700;}
.ftr-logo .ar{font-size:13px;color:rgba(255,255,255,.7);direction:rtl;}
.ftr p{font-size:13px;color:rgba(255,255,255,.7);}
.ftr .meta{margin-top:6px;font-size:11px;opacity:.5;}

/* ============ RESPONSIVE ============ */
@media(max-width:700px){
  .hdr-in{padding:12px 18px;}
  .hero{padding:46px 18px 56px;}
  .wrap{padding:36px 18px;}
  .track-grid{grid-template-columns:1fr;}
  .tgt-grid{grid-template-columns:1fr 1fr;}
  .commit-grid{grid-template-columns:1fr;}
  .plate-grid{grid-template-columns:1fr;}
  .emergency{flex-direction:column;padding:22px 20px;}
  .bmi-card{flex-direction:column;align-items:flex-start;}
  .bmi-grid{grid-template-columns:1fr;}
  .tab-in{padding:0 18px;}
  .contraindic .ci-list{grid-template-columns:1fr;}
}

/* ============ TDEE CALCULATOR ============ */
.tdee-wrap{background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);border-radius:20px;padding:30px 36px;color:#fff;margin-bottom:22px;position:relative;overflow:hidden;}
.tdee-wrap::after{content:'';position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07);}
.tdee-wrap h3{font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;margin-bottom:6px;position:relative;}
.tdee-wrap p{font-size:14px;color:rgba(255,255,255,.82);position:relative;max-width:720px;}
.tdee-form{background:#fff;border-radius:16px;padding:26px 30px;box-shadow:0 2px 16px rgba(187,12,27,.07);margin-bottom:18px;}
.tdee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;}
.tdee-field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:6px;}
.tdee-field input,.tdee-field select{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:10px 13px;font-family:'DM Sans',sans-serif;font-size:14.5px;color:var(--text);outline:none;transition:.2s;background:#fff;}
.tdee-field input:focus,.tdee-field select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(187,12,27,.1);}
.tdee-results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;}
.tdee-res{background:#fff;border-radius:14px;padding:22px;box-shadow:0 2px 14px rgba(187,12,27,.07);border-top:4px solid var(--red);text-align:center;}
.tdee-res .lbl{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);}
.tdee-res .val{font-family:'Oswald',sans-serif;font-size:36px;font-weight:700;color:var(--red-dark);margin-top:8px;line-height:1;}
.tdee-res .un{font-size:13px;color:var(--muted);margin-top:4px;}
.tdee-res.target{border-top-color:var(--red-dark);background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);color:#fff;}
.tdee-res.target .lbl{color:rgba(255,255,255,.9);}
.tdee-res.target .val{color:#fff;}
.tdee-res.target .un{color:rgba(255,255,255,.8);}
.tdee-step{background:#fff;border-radius:14px;padding:18px 22px;margin-top:14px;box-shadow:0 1px 10px rgba(187,12,27,.05);border-left:4px solid var(--red);}
.tdee-step h4{font-family:'Oswald',sans-serif;color:var(--red-dark);font-size:15px;margin-bottom:6px;}
.tdee-step code{background:var(--pink-soft);color:var(--red-dark);padding:2px 8px;border-radius:4px;font-family:'DM Sans',monospace;font-size:13px;font-weight:600;}
.pal-table{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(187,12,27,.07);margin-top:18px;}
.pal-table table{width:100%;border-collapse:collapse;min-width:540px;}
.pal-table thead{background:var(--red);}
.pal-table th{padding:12px 14px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-align:left;}
.pal-table tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:.2s;}
.pal-table tbody tr:last-child{border-bottom:none;}
.pal-table tbody tr:hover{background:var(--pink-soft);}
.pal-table tbody tr.selected{background:var(--pink-soft);}
.pal-table td{padding:11px 14px;font-size:13.5px;}
.pal-table td.v{font-family:'Oswald',sans-serif;font-weight:700;color:var(--red);font-size:18px;width:70px;text-align:center;}
.meal-split{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;}
.meal-split .m{background:#fff;border-radius:11px;padding:14px;box-shadow:0 1px 10px rgba(187,12,27,.06);text-align:center;border-top:3px solid var(--red);}
.meal-split .m .icon{font-size:22px;}
.meal-split .m .nm{font-weight:700;color:var(--red-dark);margin-top:4px;font-size:13px;}
.meal-split .m .pct{font-family:'Oswald',sans-serif;font-size:20px;color:var(--red);font-weight:700;margin-top:2px;}
.meal-split .m .kc{font-size:11px;color:var(--muted);margin-top:2px;}
.safety-warn{background:var(--red-dark);color:#fff;border-radius:12px;padding:16px 22px;margin-top:18px;font-size:13.5px;}
.safety-warn strong{font-family:'Oswald',sans-serif;font-size:15px;display:block;margin-bottom:4px;}

/* ============ SUPPLEMENTS ============ */
.champ-hero{background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);border-radius:20px;padding:38px 36px;color:#fff;margin-bottom:28px;position:relative;overflow:hidden;text-align:center;}
.champ-hero::before,.champ-hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none;}
.champ-hero::before{width:260px;height:260px;top:-100px;right:-60px;background:rgba(255,255,255,.06);}
.champ-hero::after{width:200px;height:200px;bottom:-80px;left:-40px;background:rgba(255,255,255,.05);}
.champ-hero .eyebrow{font-size:11px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;opacity:.85;margin-bottom:12px;position:relative;}
.champ-hero .big{font-family:'Oswald',sans-serif;font-size:72px;font-weight:700;line-height:1;margin-bottom:14px;position:relative;}
.champ-hero .code{font-size:16px;position:relative;margin-bottom:8px;}
.champ-hero .code b{background:rgba(255,255,255,.18);border:1.5px dashed rgba(255,255,255,.5);padding:5px 16px;border-radius:8px;font-family:'DM Sans',monospace;letter-spacing:3px;font-size:22px;font-weight:700;margin:0 6px;}
.champ-hero .sub{font-size:13px;opacity:.85;position:relative;}
.supp-list{display:flex;flex-direction:column;gap:18px;}
.supp-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 3px 20px rgba(187,12,27,.09);border:1px solid var(--border);display:grid;grid-template-columns:180px 1fr;transition:.25s;}
.supp-card:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(187,12,27,.14);}
.supp-card .img{background:var(--cream);display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--border);}
.supp-card .img img{width:100%;height:auto;border-radius:8px;}
.supp-card .body{padding:20px 24px;display:flex;flex-direction:column;justify-content:center;}
.supp-card .num{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--red);text-transform:uppercase;margin-bottom:6px;}
.supp-card h4{font-family:'Oswald',sans-serif;font-size:19px;font-weight:600;color:var(--red-dark);margin-bottom:4px;}
.supp-card .tag{font-size:12.5px;color:var(--muted);font-style:italic;margin-bottom:10px;}
.supp-card .msg{font-size:14px;color:#3D1A1A;line-height:1.55;margin-bottom:14px;}
.supp-card .cta{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;width:fit-content;text-decoration:none;transition:.2s;}
.supp-card .cta:hover{background:var(--red-dark);transform:translateX(2px);}
.supp-card .note{margin-top:10px;font-size:12px;color:var(--muted);font-style:italic;display:flex;align-items:flex-start;gap:6px;background:var(--off);padding:8px 12px;border-radius:6px;border-left:3px solid var(--amber);}
.supp-divider{display:flex;align-items:center;gap:14px;margin:32px 0 18px;}
.supp-divider .line{flex:1;height:1px;background:var(--border);}
.supp-divider .lbl{font-family:'Oswald',sans-serif;font-size:15px;font-weight:600;color:var(--red-dark);letter-spacing:1px;text-transform:uppercase;font-size:12px;}
.lab-cta{background:var(--cream);border:2px solid var(--red);border-radius:16px;padding:28px 32px;text-align:center;margin-top:28px;}
.lab-cta h4{font-family:'Oswald',sans-serif;font-size:22px;color:var(--red-dark);margin-bottom:8px;}
.lab-cta p{font-size:14px;color:var(--muted);margin-bottom:16px;max-width:600px;margin-left:auto;margin-right:auto;}
.lab-cta a{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:12px 26px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;transition:.2s;}
.lab-cta a:hover{background:var(--red-dark);}

/* ============ ACCOUNT STATUS BANNER ============ */
.account-status-banner{
  background:linear-gradient(135deg,#dc2626 0%,#991b1b 100%);
  color:#fff;
  padding:16px 24px;
  position:relative;
  z-index:100;
  box-shadow:0 4px 12px rgba(220,38,38,0.3);
}
.account-status-banner.account-status-paused{
  background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
  box-shadow:0 4px 12px rgba(245,158,11,0.3);
}
.account-status-banner .banner-content{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:1200px;
  margin:0 auto;
}
.account-status-banner i{
  font-size:20px;
  animation:pulse 2s infinite;
}
.account-status-banner span{
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.6;}
}

@media(max-width:700px){
  .tdee-results{grid-template-columns:1fr;}
  .meal-split{grid-template-columns:1fr 1fr;}
  .supp-card{grid-template-columns:1fr;}
  .supp-card .img{border-right:none;border-bottom:1px solid var(--border);}
  .champ-hero .big{font-size:56px;}
}

/* ============ PRINT ============ */
@media print{
  .hdr,.tab-bar{position:static;}
  .print-btn,.tab-bar{display:none;}
  .card,.phase,.sched-item,.lab-panel,.dose-track,.commit,.ba-wrap{break-inside:avoid;}
  .lab-panel{display:block !important;}
  .lab-tabs{display:none;}
  body{background:#fff;}
}