.kpi-card {
   border: none;
   border-radius: 0.85rem;
 }

 .info-row {
   padding: 0.75rem 0;
   border-bottom: 1px solid #f0f0f0;
 }

 .info-row:last-child {
   border-bottom: none;
 }

 .info-key {
   font-weight: 600;
   color: #2d3748;
   font-size: 0.9rem;
 }

 .info-value {
   color: #495057;
   font-size: 0.9rem;
   word-break: break-all;
 }

 .avatar-initial {
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   color: #fff;
   font-size: 1rem;
 }

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

 .gradient-http {
   background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
 }

 .headers-section {
   background: #f8f9fa;
   border-radius: 0.5rem;
   padding: 1rem;
   margin-top: 1rem;
 }

 .section-title {
   font-weight: 700;
   color: #2d3748;
   font-size: 0.95rem;
   margin-bottom: 0.75rem;
 }

 .api-key-box {
   background: #ffffff;
   padding: 0.5rem 0.75rem;
   border-radius: 0.5rem;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   white-space: nowrap;
   flex-wrap: wrap;      /* critical fix */
   max-width: 100%;      /* prevent overflow */
 }

 .api-key-text {
   color: #667eea;
   font-weight: 600;
   font-family: "Courier New", monospace;
   font-size: 0.85rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
   cursor: pointer;
   white-space: normal !important;  /* allow wrapping */
   word-break: break-all;
   max-width: 100%;
 }

 .btn-icon {
   width: 32px;
   height: 32px;
   border-radius: 0.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #dee2e6;
   background: white;
   transition: all 0.2s;
 }

 .btn-icon:hover {
   background: #667eea;
   border-color: #667eea;
   transform: rotate(180deg);
 }

 .btn-icon:hover i {
   color: white !important;
 }

 /* Masking */
 .masked {
   text-security: disc;
 }

 /* Icon buttons (no bg, no border) */
 .action-btn {
   border: none;
   background: transparent;
   padding: 0 4px;
   cursor: pointer;
 }

 .action-btn i {
   color: #6c757d;
   font-size: 0.9rem;
 }

 .action-btn:hover i {
   opacity: 0.7;
 }