diff --git a/Vue/Ficheadherent/index.php b/Vue/Ficheadherent/index.php
index 3d999ed..9430cc3 100644
--- a/Vue/Ficheadherent/index.php
+++ b/Vue/Ficheadherent/index.php
@@ -48,213 +48,235 @@
 <INPUT class="sr-only" TYPE="text" id="remplacant" 				name="remplace" value="<?= $adherent['remplacant'] ?>" >
 <INPUT class="sr-only" TYPE="text" id="idApporteur" 			name="idApporteur" value="<?= $idApporteur ?>" >
 
-<form name="formficheadehrent" id="formficheadehrent" method="POST" class="container-fluid py-4">
-    <input type="hidden" id="codeEtatFacturation" name="codeEtatFacturation" value="<?= $adherent['codeEtatFacturation'] ?>">
-    <input type="hidden" id="numeroBeneficiaire" name="numeroBeneficiaire" value="<?= $adherent['numeroBeneficiaire'] ?>">
-    <input type="hidden" id="codeEtatAdherent" name="codeEtatAdherent" value="<?= $adherent['codeEtatAdherent'] ?>">
+<div class="container-fluid py-4 animate__animated animate__fadeIn">
+    
+    <div class="card shadow-sm border-0 mb-4 overflow-hidden">
+        <div class="card-body p-0">
+            <div class="row g-0">
+                <div class="col-md-8 p-4">
+                    <div class="d-flex align-items-center mb-2 flex-wrap">
+                        <h3 class="fw-bold mb-0 me-3 text-dark">
+                            <?= $this->nettoyer($adherent['nom']) . " " . $this->nettoyer($adherent['prenoms']) ?>
+                        </h3>
+                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill">
+                            <i class="fas fa-id-badge me-1"></i> <?= $this->nettoyer($adherent['numeroAdherent']) ?>
+                        </span>
+                        <?php if ($adherentRetire == "1") : ?>
+                            <span class="badge bg-danger ms-md-2 mt-2 mt-md-0 animate__animated animate__pulse animate__infinite px-3 py-2">
+                                <i class="fas fa-door-open me-1"></i> <?= _("SORTI LE") ?> : <?= dateLang($dateSortieAdherent) ?>
+                            </span>
+                        <?php endif; ?>
+                    </div>
+                    <p class="text-muted mb-0">
+                        <i class="fas fa-university me-2"></i><?= $this->nettoyer($adherent['libelleCollege']) ?> 
+                        <span class="mx-2 text-silver">|</span>
+                        <i class="fas fa-map-marker-alt me-1"></i> <?= $this->nettoyer($adherent['ville']) ?>, <?= $this->nettoyer($adherent['pays']) ?>
+                    </p>
+                </div>
 
-    <?php if ($adherentRetire == "1") : ?>
-        <div class="alert alert-danger d-flex align-items-center mb-4 shadow-sm" role="alert">
-            <i class="fas fa-exclamation-triangle me-3 fa-2x"></i>
-            <div>
-                <h4 class="alert-heading mb-0"><?= _("Adhérent sorti le") . " : " . dateLang($dateSortieAdherent) ?></h4>
+                <?php if($controlerPlafondAdherent): ?>
+                <div class="col-md-4 bg-light border-start d-flex align-items-center justify-content-around p-3">
+                    <div class="text-center">
+                        <small class="text-muted d-block text-uppercase fw-bold x-small"><?= _("Consommé") ?></small>
+                        <span class="h5 fw-bold text-danger"><?= format_N($limite_adherent['consommationAdherent']) ?></span>
+                    </div>
+                    <div class="vr mx-2 text-secondary opacity-25"></div>
+                    <div class="text-center">
+                        <small class="text-muted d-block text-uppercase fw-bold x-small"><?= _("Solde Disponible") ?></small>
+                        <span class="h5 fw-bold text-success"><?= format_N($limite_adherent['soldeAdherent']) ?></span>
+                    </div>
+                </div>
+                <?php endif; ?>
             </div>
         </div>
-    <?php endif; ?>
-
-    <div class="card shadow-sm mb-4">
-        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
-            <h5 class="mb-0"><i class="fas fa-user-circle me-2"></i><?= _("Informations sur l'adhérent") ?> : <span class="badge bg-light text-primary"><?= $this->nettoyer($adherent['numeroAdherent']) ?></span></h5>
-        </div>
-        <div class="card-body bg-light">
-            <div class="row g-3">
-                <div class="col-md-4">
-                    <label class="form-label small text-muted text-uppercase fw-bold"><?= _("Nom & Prénoms") ?></label>
-                    <div class="input-group">
-                        <span class="input-group-text"><i class="fas fa-id-card"></i></span>
-                        <input type="text" class="form-control bg-white" value="<?= $this->nettoyer($adherent['nom']) ?> <?= $this->nettoyer($adherent['prenoms']) ?>" readonly>
-                    </div>
-                </div>
-                <div class="col-md-4">
-                    <label class="form-label small text-muted text-uppercase fw-bold"><?= _("Collège") ?></label>
-                    <input type="text" class="form-control bg-white" value="<?= $this->nettoyer($adherent['libelleCollege']) ?>" readonly>
-                </div>
-                <div class="col-md-4">
-                    <label class="form-label small text-muted text-uppercase fw-bold"><?= _("Contact") ?></label>
-                    <div class="input-group">
-                        <span class="input-group-text"><i class="fas fa-phone"></i></span>
-                        <input type="text" class="form-control bg-white" value="<?= $this->nettoyer($adherent['telephonePortable']) ?>" readonly>
-                    </div>
-                </div>
-                <div class="col-md-4">
-                    <label class="form-label small text-muted text-uppercase fw-bold"><?= _("E-mail") ?></label>
-                    <input type="email" class="form-control bg-white" value="<?= $this->nettoyer($adherent['email']) ?>" readonly>
-                </div>
-                <div class="col-md-8">
-                    <label class="form-label small text-muted text-uppercase fw-bold"><?= _("Localisation") ?></label>
-                    <div class="input-group">
-                        <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
-                        <input type="text" class="form-control bg-white" value="<?= $this->nettoyer($adherent['pays']) ?> / <?= $this->nettoyer($adherent['ville']) ?> / <?= $this->nettoyer($adherent['localite']) ?>" readonly>
-                    </div>
-                </div>
-            </div>
-
-            <?php if ($controlerPlafondAdherent): ?>
-                <hr class="my-4">
-                <div class="row g-3 text-center">
-                    <div class="col-md-4">
-                        <div class="p-3 border rounded bg-white shadow-sm">
-                            <div class="small fw-bold text-primary text-uppercase"><?= _("Plafond Famille") ?></div>
-                            <div class="h4 mb-0 text-primary fw-bold"><?= format_N($limite_adherent['plafondAdherent']) ?></div>
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="p-3 border rounded bg-white shadow-sm border-danger">
-                            <div class="small fw-bold text-danger text-uppercase"><?= _("Consommations") ?></div>
-                            <div class="h4 mb-0 text-danger fw-bold"><?= format_N($limite_adherent['consommationAdherent']) ?></div>
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="p-3 border rounded bg-success text-white shadow-sm">
-                            <div class="small fw-bold text-uppercase"><?= _("Solde Disponible") ?></div>
-                            <div class="h4 mb-0 fw-bold"><?= format_N($limite_adherent['soldeAdherent']) ?></div>
-                        </div>
-                    </div>
-                </div>
-            <?php endif; ?>
-        </div>
     </div>
 
-    <?php if ($codeTypeContrat == "F"): ?>
-        <div class="card shadow-sm mb-4 border-info">
-            <div class="card-header bg-info text-dark fw-bold">
-                <i class="fas fa-file-invoice-dollar me-2"></i><?= _("Récapitulatif des primes") ?>
-            </div>
-            <div class="card-body p-0">
+    <ul class="nav nav-pills mb-4 shadow-sm p-2 bg-white rounded-3 border" id="pills-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+            <button class="nav-link active fw-bold px-4" id="tab-famille" data-bs-toggle="pill" data-bs-target="#content-famille" type="button">
+                <i class="fas fa-users me-2"></i><?= _("Détail Famille") ?>
+            </button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link fw-bold px-4" id="tab-primes" data-bs-toggle="pill" data-bs-target="#content-primes" type="button">
+                <i class="fas fa-file-invoice-dollar me-2"></i><?= _("Finance & Primes") ?>
+            </button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link fw-bold px-4" id="tab-limites" data-bs-toggle="pill" data-bs-target="#content-limites" type="button">
+                <i class="fas fa-shield-alt me-2"></i><?= _("Plafonds & Garanties") ?>
+            </button>
+        </li>
+    </ul>
+
+    <div class="tab-content" id="pills-tabContent">
+        
+        <div class="tab-pane fade show active" id="content-famille" role="tabpanel">
+            <div class="card shadow-sm border-0 rounded-3 overflow-hidden">
                 <div class="table-responsive">
-                    <table class="table table-sm table-hover mb-0 align-middle">
-                        <thead class="table-light">
+                    <table class="table table-hover align-middle mb-0">
+                        <thead class="bg-light text-muted small text-uppercase">
                             <tr>
-                                <th class="text-center"><?= _("Prime HT") ?></th>
-                                <th class="text-center"><?= _("Taxes") ?></th>
-                                <th class="text-center"><?= _("Prime TTC") ?></th>
-                                <th class="text-center"><?= _("Nb Échéances") ?></th>
-                                <th class="text-center"><?= _("Part Assureur") ?></th>
-                                <th class="text-center"><?= _("Part Tiers") ?></th>
+                                <th class="ps-4">#</th>
+                                <th><?= _("Bénéficiaire") ?></th>
+                                <th class="text-center"><?= _("Lien") ?></th>
+                                <th class="text-center"><?= _("Âge / Sexe") ?></th>
+                                <th class="text-end"><?= _("Prime Nette") ?></th>
+                                <th class="text-end"><?= _("Prime TTC") ?></th>
+                                <th class="text-center pe-4"><?= _("Statut") ?></th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr>
-                                <td class="text-center fw-bold"><?= format_N($adherent['primeHt']) ?></td>
-                                <td class="text-center text-muted"><?= format_N($adherent['taxe']) ?></td>
-                                <td class="text-center fw-bold text-primary"><?= format_N($adherent['primeTtc']) ?></td>
-                                <td class="text-center"><?= $adherent['nbEcheance'] ?></td>
-                                <td class="text-center"><span class="badge bg-primary"><?= format_N($adherent['partAssureur']) ?></span></td>
-                                <td class="text-center"><span class="badge bg-danger"><?= format_N($adherent['partTiers']) ?></span></td>
+                            <?php foreach ($beneficiaires as $beneficiaire): 
+                                $photo = ($beneficiaire['faceRegistered'] == "1" && $beneficiaire['lienPhoto'] > " ") 
+                                         ? $_SESSION['dossierPhoto_C'].$_SESSION['dossierSociete'].'/Photos/'.$beneficiaire['lienPhoto'] 
+                                         : "assets/img/default-avatar.png";
+                            ?>
+                            <tr class="cursor-pointer" onclick="selectionner_beneficiaire(<?= $beneficiaire['idBeneficiaire'] ?>,'<?= $beneficiaire['numeroBeneficiaire'] ?>')">
+                                <td class="ps-4">
+                                    <img src="<?= $photo ?>" class="rounded-circle border" width="38" height="38" style="object-fit: cover;">
+                                </td>
+                                <td>
+                                    <div class="fw-bold text-dark"><?= $beneficiaire['nomBeneficiaire'] . " " . $beneficiaire['prenomsBeneficiaire'] ?></div>
+                                    <div class="small text-primary font-monospace"><?= $beneficiaire['numeroBeneficiaire'] ?></div>
+                                </td>
+                                <td class="text-center">
+                                    <span class="badge bg-light text-dark border"><?= est_anglophone() ? $beneficiaire['LienParenteEng'] : $beneficiaire['LienParente'] ?></span>
+                                </td>
+                                <td class="text-center">
+                                    <div class="fw-bold"><?= $beneficiaire['age'] ?> <span class="text-muted small">ans</span></div>
+                                    <div class="x-small text-muted text-uppercase"><?= $beneficiaire['sexe'] ?></div>
+                                </td>
+                                <td class="text-end font-monospace"><?= format_N($beneficiaire['primeHt']) ?></td>
+                                <td class="text-end font-monospace fw-bold text-primary"><?= format_N($beneficiaire['primeTtc']) ?></td>
+                                <td class="text-center pe-4">
+                                    <span class="badge bg-<?= ($beneficiaire['codeEtatBeneficiaire'] == 'A') ? 'success' : 'secondary' ?>-subtle text-<?= ($beneficiaire['codeEtatBeneficiaire'] == 'A') ? 'success' : 'secondary' ?> rounded-pill">
+                                        <?= ($beneficiaire['codeEtatBeneficiaire'] == 'A') ? 'Actif' : $beneficiaire['codeEtatBeneficiaire'] ?>
+                                    </span>
+                                </td>
                             </tr>
+                            <?php endforeach; ?>
+                        </tbody>
+                        <tfoot class="table-light fw-bold border-top">
+                            <tr>
+                                <td colspan="4" class="text-end ps-4"><?= _("TOTAL FAMILLE") ?></td>
+                                <td class="text-end font-monospace"><?= format_N($totalbeneficiaires['primeHt']) ?></td>
+                                <td class="text-end font-monospace text-primary"><?= format_N($totalbeneficiaires['primeTtc']) ?></td>
+                                <td class="pe-4"></td>
+                            </tr>
+                        </tfoot>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div class="tab-pane fade" id="content-primes" role="tabpanel">
+            <div class="row g-4">
+                <div class="col-lg-7">
+                    <div class="card shadow-sm border-0 h-100">
+                        <div class="card-header bg-white py-3 fw-bold">
+                            <i class="fas fa-list-ul me-2 text-primary"></i><?= _("Détail de la facturation") ?>
+                        </div>
+                        <div class="card-body">
+                            <div class="row mb-3 pb-3 border-bottom">
+                                <div class="col-6 text-muted"><?= _("Prime Hors Taxes") ?></div>
+                                <div class="col-6 text-end fw-bold font-monospace"><?= format_N($adherent['primeHt']) ?></div>
+                            </div>
+                            <div class="row mb-3 pb-3 border-bottom">
+                                <div class="col-6 text-muted"><?= _("Taxes et Accessoires") ?></div>
+                                <div class="col-6 text-end fw-bold font-monospace"><?= format_N($adherent['taxe']) ?></div>
+                            </div>
+                            <div class="row mb-3 pb-3 border-bottom bg-light-subtle py-2">
+                                <div class="col-6 fw-bold text-dark"><?= _("PRIME TTC") ?></div>
+                                <div class="col-6 text-end fw-bold font-monospace text-primary h5 mb-0"><?= format_N($adherent['primeTtc']) ?></div>
+                            </div>
+                            <div class="row pt-2 text-center">
+                                <div class="col-4">
+                                    <small class="text-muted d-block"><?= _("Échéances") ?></small>
+                                    <span class="badge bg-dark"><?= $adherent['nbEcheance'] ?></span>
+                                </div>
+                                <div class="col-4 border-start">
+                                    <small class="text-muted d-block"><?= _("Taux Surcharge") ?></small>
+                                    <span class="fw-bold"><?= $adherent['tauxInteretEcheancier'] ?>%</span>
+                                </div>
+                                <div class="col-4 border-start">
+                                    <small class="text-muted d-block"><?= _("Prime / Échéance") ?></small>
+                                    <span class="fw-bold text-success"><?= format_N($adherent['primeTtcEcheances']) ?></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-5">
+                    <div class="card shadow-sm border-0 h-100 bg-primary text-white">
+                        <div class="card-body d-flex flex-column justify-content-center text-center p-4">
+                            <i class="fas fa-hand-holding-usd fa-3x mb-3 opacity-50"></i>
+                            <h5 class="text-uppercase opacity-75 small fw-bold mb-3"><?= _("Répartition de la prime") ?></h5>
+                            <div class="mb-4">
+                                <div class="display-6 fw-bold"><?= format_N($adherent['partAssureur']) ?></div>
+                                <small class="opacity-75"><?= _("Part Compagnie d'Assurance") ?></small>
+                            </div>
+                            <hr class="bg-white opacity-25">
+                            <div>
+                                <div class="h4 fw-bold"><?= format_N($adherent['partTiers']) ?></div>
+                                <small class="opacity-75"><?= _("Part Intermédiaires / Tiers") ?></small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="tab-pane fade" id="content-limites" role="tabpanel">
+            <div class="card shadow-sm border-0">
+                <div class="table-responsive">
+                    <table class="table table-hover align-middle mb-0">
+                        <thead class="bg-light small">
+                            <tr>
+                                <th class="ps-4"><?= _("Garantie") ?></th>
+                                <th class="text-end"><?= _("Plafond Annuel") ?></th>
+                                <th class="text-end"><?= _("Consommé") ?></th>
+                                <th class="text-end"><?= _("Solde Disponible") ?></th>
+                                <th class="text-center pe-4"><?= _("Application") ?></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <?php foreach ($garantieadherents as $gar): ?>
+                            <tr>
+                                <td class="ps-4">
+                                    <div class="fw-bold text-dark"><?= $gar['garantie'] ?></div>
+                                    <div class="x-small text-muted italic"><?= $gar['garantieparentaffichage'] ?></div>
+                                </td>
+                                <td class="text-end font-monospace"><?= format_N($gar['plafond']) ?></td>
+                                <td class="text-end font-monospace text-danger">
+                                    <?= ($gar['champApplication'] == '1') ? '<span class="text-muted italic small">N/A</span>' : format_N($gar['consommation']) ?>
+                                </td>
+                                <td class="text-end font-monospace fw-bold text-success">
+                                    <?= ($gar['champApplication'] == '1') ? '<span class="text-muted italic small">N/A</span>' : format_N($gar['solde']) ?>
+                                </td>
+                                <td class="text-center pe-4">
+                                    <span class="badge rounded-pill <?= ($gar['champApplication'] == '1') ? 'bg-info-subtle text-info' : 'bg-secondary-subtle text-secondary' ?> px-3">
+                                        <i class="fas fa-<?= ($gar['champApplication'] == '1') ? 'user' : 'users' ?> me-1"></i>
+                                        <?= ($gar['champApplication'] == '1') ? _("Individuel") : _("Famille") ?>
+                                    </span>
+                                </td>
+                            </tr>
+                            <?php endforeach; ?>
                         </tbody>
                     </table>
                 </div>
             </div>
         </div>
-    <?php endif; ?>
-
-    <div class="card shadow-sm mb-4">
-        <div class="card-header bg-secondary text-white">
-            <h5 class="mb-0"><i class="fas fa-users me-2"></i><?= _('Composition de la famille') ?></h5>
-        </div>
-        <div class="card-body p-0">
-            <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
-                <table class="table table-hover table-striped mb-0 align-middle shadow-sm">
-                    <thead class="table-dark sticky-top">
-                        <tr class="small">
-                            <th><?= _("Photo") ?></th>
-                            <th><?= _("N° Bénéf.") ?></th>
-                            <th><?= _("Nom & Prénoms") ?></th>
-                            <th class="text-center"><?= _("Sexe") ?></th>
-                            <th><?= _("Lien") ?></th>
-                            <th class="text-center"><?= _("Âge") ?></th>
-                            <th class="text-end"><?= _("Prime HT") ?></th>
-                            <th class="text-end"><?= _("Prime TTC") ?></th>
-                            <th class="text-center"><?= _("État") ?></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <?php foreach ($beneficiaires as $beneficiaire): 
-                            $photoPath = ($beneficiaire['faceRegistered'] == "1") ? $_SESSION['dossierPhoto_C'].$_SESSION['dossierSociete'].'/Photos/'.$beneficiaire['lienPhoto'] : 'path/to/default-avatar.png';
-                        ?>
-                            <tr class="pointer-cursor" onclick="selectionner_beneficiaire(<?= $beneficiaire['idBeneficiaire'] ?>,'<?= $beneficiaire['numeroBeneficiaire'] ?>')">
-                                <td class="text-center">
-                                    <img src="<?= $photoPath ?>" class="rounded-circle border" width="32" height="32" alt="Avatar">
-                                </td>
-                                <td><span class="badge bg-light text-dark border"><?= $beneficiaire['numeroBeneficiaire'] ?></span></td>
-                                <td class="fw-bold"><?= $this->nettoyer($beneficiaire['nomBeneficiaire']) ?> <?= $this->nettoyer($beneficiaire['prenomsBeneficiaire']) ?></td>
-                                <td class="text-center"><?= $beneficiaire['sexe'] ?></td>
-                                <td><?= (est_anglophone()) ? $beneficiaire['LienParenteEng'] : $beneficiaire['LienParente'] ?></td>
-                                <td class="text-center"><?= $beneficiaire['age'] ?> ans</td>
-                                <td class="text-end"><?= format_N($beneficiaire['primeHt']) ?></td>
-                                <td class="text-end fw-bold"><?= format_N($beneficiaire['primeTtc']) ?></td>
-                                <td class="text-center">
-                                    <span class="badge <?= ($beneficiaire['codeEtatBeneficiaire'] == 'A') ? 'bg-success' : 'bg-warning' ?>">
-                                        <?= $beneficiaire['codeEtatBeneficiaire'] ?>
-                                    </span>
-                                </td>
-                            </tr>
-                        <?php endforeach; ?>
-                    </tbody>
-                    <tfoot class="table-light fw-bold text-end">
-                        <tr>
-                            <td colspan="6" class="text-center"><?= _("TOTAL FAMILLE") ?></td>
-                            <td><?= format_N($totalbeneficiaires['primeHt']) ?></td>
-                            <td class="text-primary"><?= format_N($totalbeneficiaires['primeTtc']) ?></td>
-                            <td></td>
-                        </tr>
-                    </tfoot>
-                </table>
-            </div>
-        </div>
     </div>
-
-    <div class="card shadow-sm border-warning">
-        <div class="card-header bg-warning text-dark fw-bold">
-            <i class="fas fa-shield-alt me-2"></i><?= _("Limites et Garanties de la famille") ?>
-        </div>
-        <div class="card-body p-0">
-            <div class="table-responsive">
-                <table class="table table-sm table-hover align-middle mb-0">
-                    <thead class="bg-light">
-                        <tr class="small text-uppercase">
-                            <th class="ps-3"><?= _("Garantie") ?></th>
-                            <th class="text-center"><?= _("Plafond") ?></th>
-                            <th class="text-center"><?= _("Conso.") ?></th>
-                            <th class="text-center"><?= _("Solde") ?></th>
-                            <th class="text-center"><?= _("Par tête") ?></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <?php foreach ($garantieadherents as $garantieadherent): ?>
-                            <tr>
-                                <td class="ps-3 fw-bold"><?= $this->nettoyer($garantieadherent['garantie']) ?></td>
-                                <td class="text-center fw-bold"><?= format_N($garantieadherent['plafond']) ?></td>
-                                <td class="text-center text-danger"><?= ($garantieadherent['champApplication'] != '1') ? format_N($garantieadherent['consommation']) : '-' ?></td>
-                                <td class="text-center fw-bold text-success"><?= ($garantieadherent['champApplication'] != '1') ? format_N($garantieadherent['solde']) : '-' ?></td>
-                                <td class="text-center text-primary">
-                                    <i class="fas <?= ($garantieadherent['champApplication'] == '1') ? 'fa-check-circle' : 'fa-minus text-muted' ?>"></i>
-                                </td>
-                            </tr>
-                        <?php endforeach; ?>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-</form>
+</div>
 
 <style>
-    .pointer-cursor { cursor: pointer; transition: background 0.2s; }
-    .pointer-cursor:hover { background-color: #f1f8ff !important; }
-    .sticky-top { top: -1px; z-index: 10; }
-    .table-responsive { border-radius: 0.375rem; }
-    .input-group-text { background-color: #f8f9fa; color: #6c757d; }
-    input[readonly] { cursor: default; }
+    .x-small { font-size: 0.7rem; }
+    .italic { font-style: italic; }
+    .text-silver { color: #bdc3c7; }
+    .cursor-pointer { cursor: pointer; }
+    .font-monospace { font-family: 'SFMono-Regular', Consolas, monospace; letter-spacing: -0.5px; }
+    .nav-pills .nav-link { color: #6c757d; transition: all 0.3s ease; border-radius: 8px; }
+    .nav-pills .nav-link.active { background-color: #0d6efd; box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25); }
+    .bg-light-subtle { background-color: #f8f9fa; }
 </style>
\ No newline at end of file