html, body {
      height: 100%;
      font-family: "Inter", system-ui, sans-serif;
      -webkit-font-smoothing: antialiased;
      background: var(--bg-app);
    }

    [data-bs-theme="light"] {
      --bg-app: #e4eafc;
		--bg-menu: #fff;
		--bg-card: #fff;
		--border-card: #f3f3f3;
		   --fast-sidebar-width: 280px;
--fast-bg: linear-gradient(180deg, #7991ff 0%, #28387f 100%);	

	--info-list-bg: #f7f7f7;
	--info-list-text: #000;
	
	 color-scheme: light;
    }
    [data-bs-theme="dark"] {
      --bg-app: #121212;
		--bg-menu: #212121;
		--bg-card: #212121;
		--border-card: #3f444a;
		--fast-sidebar-width: 280px;
		--fast-bg: #000;
		--info-list-bg: #1e1e1e;
		--info-list-text: #fff;
      color-scheme: dark;
    }
	 

.bg-universal {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}
	 
	
	 .pdm {
  padding-bottom: 5px;
}

	 
	 
	 
    .rounded-20{border-radius:1.25rem;}
    .shadow-soft{box-shadow:0 8px 22px rgba(17,40,80,.12);}
    .app-header{display:flex;align-items:center;gap:.75rem;}
    .ui-icon-box{
      width:42px;
		height:42px;
		border-radius:1rem;
		display:flex;
		align-items:center;
		justify-content:center;
      background:var(--bg-menu);
		box-shadow:0 4px 18px rgba(0,0,0,.07);
    }
    .brand-box{
      background:linear-gradient(135deg, #4b6bff 0%, #4a69ff 100%);
      color:#fff;font-weight:600;font-size:0.95rem;
    }
    .avatar{
      width:56px;height:56px;border-radius:50%;object-fit:cover;
    }
    .cc-card{
      width:260px;height:160px;flex:0 0 auto;
      color:#fff;border-radius:1.5rem;padding:1.1rem;
      display:flex;flex-direction:column;justify-content:space-between;
    }
    .cc-mastercard-logo{width:36px;}
    .cc-card.cc-blue{background:linear-gradient(135deg,#5b7cff 0%,#4665ff 100%);}
    .cc-card.cc-violet{background:linear-gradient(135deg,#6133ff 0%,#4535ff 100%);}
    .conn-item{
      width:70px;flex:0 0 auto;text-align:center;
    }
    .conn-item img{width:54px;height:54px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.1);}
    .conn-item span{font-size:.8rem;font-weight:500;margin-top:.25rem;display:block;}
    .promo-banner{
      background:linear-gradient(135deg,#3a55ff 0%,#0050ff 100%);
      border-radius:1.5rem;color:#fff;padding:1.5rem;overflow:hidden;
    }
    .promo-banner h3{font-size:1.6rem;font-weight:700;}
    .promo-banner img{position:absolute;right:1rem;bottom:0;width:140px;}
    .switch-card{
      background:var(--bg-menu);
		border-radius:1.25rem;
		padding:.9rem 1.2rem;
		display:flex;
		align-items:center;
		justify-content:space-between;
      box-shadow:0 4px 20px rgba(17,40,80,.08);
    }
    main{padding-bottom:8rem;}
    .bottom-nav{background:var(--bg-menu);border-top-left-radius:1.75rem;border-top-right-radius:1.75rem;padding:.35rem 0 calc(.35rem + env(safe-area-inset-bottom));box-shadow:0 -4px 22px rgba(17,40,80,.15);}
    .bottom-nav .nav-link{color:#6d6e72;font-size:.83rem;font-weight:500;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:.2rem;height:100%;padding:.25rem 0;}
    .bottom-nav .nav-link.active{color:#3366ff;}
    .bottom-nav .nav-item.placeholder{width:80px;pointer-events:none;}
    /* FAB setup for menu expand */
    .fab-checkbox{display:none;}
    .fab-label {
      position:absolute;left:50%;top:-40px;translate:-50% 0;width:80px;height:80px;border-radius:50%;border:none;
      background:linear-gradient(135deg,#5b7cff 0%,#4665ff 100%);color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.28);
      display:flex;flex-direction:column;justify-content:center;align-items:center;
      font-size:1.55rem;gap:.15rem;cursor:pointer;z-index:12;
      transition:box-shadow .18s, background .18s;
    }
    .fab-label:active {
		filter:brightness(0.96) saturate(1.1); /* Un efect subtil la apăsare */
    }
    .fab-label .bi-x {display:none;}
    /* Show X icon when checked */
    .fab-checkbox:checked + .fab-label .bi-x {display:inline;}
    .fab-checkbox:checked + .fab-label .bi-wifi,
    .fab-checkbox:checked + .fab-label .bi-plus {display:none;}
    /* Floating menu */
    .fab-menu-outer {
      position:absolute;left:50%;bottom:72px;transform:translateX(-50%);
      width:330px;max-width:96vw;
      display:flex;justify-content:center;z-index:11;
      pointer-events:none;
    }
    .fab-menu {
      opacity:0;
      pointer-events:none;
      background:linear-gradient(135deg,#3a55ff 0%,#1d2dea 100%);
      border-radius:1.5rem;
      padding:1.2rem 1.1rem 1rem 1.1rem;
      display:flex;gap:1.2rem;justify-content:center;align-items:center;
      box-shadow:0 8px 28px rgba(0,0,0,.16);
      transition:opacity .17s;
      min-width:290px;
    }
    .fab-checkbox:checked ~ .fab-menu-outer .fab-menu {
      opacity:1;
      pointer-events:auto;
    }
    .fab-action {
      display:flex;flex-direction:column;align-items:center;gap:.4rem;
      color:#fff;text-decoration:none;
      min-width:56px;
    }
    .fab-action .icon-bg {
      width:56px;height:56px;display:flex;align-items:center;justify-content:center;
      border-radius:1.1rem;
      background:rgba(255,255,255,0.10);
      font-size:2rem;
      margin-bottom:.18rem;
    }
    .fab-action span {
      font-size:1rem;font-weight:500;letter-spacing:.01em;
      color:#fff;
      text-shadow:0 2px 12px rgba(0,0,0,0.13);
    }
    /* Overlay for closing when menu is open */
    .fab-checkbox:checked ~ .fab-overlay {
      opacity:1;
      pointer-events:auto;
    }
    .fab-overlay {
      content:"";
      position:fixed;left:0;top:0;right:0;bottom:0;
      background:rgba(44,60,128,0.13);
      z-index:10;
      opacity:0;pointer-events:none;
      transition:opacity .17s;
    }
    /* Hide scroll when menu open */
    .fab-checkbox:checked ~ *:not(.fab-menu-outer):not(.fab-label):not(.fab-overlay) {
      pointer-events:none;
      user-select:none;
    }
	 
	 
	  
	 
    .mobile-card {
      background: var(--bg-card);
      border-radius: 1.1rem;
      box-shadow: 0 2px 12px rgba(44,60,128,0.08);
      padding: 1rem 1.3rem 1.1rem 1.3rem;
      font-size: 1.05rem;
      position: relative;

      margin: 2rem auto;
      transition: box-shadow .14s;
      overflow: hidden;
    }
    .mobile-card-row {
      display: flex;
      align-items: center;
      gap: 0.2rem;
      margin-bottom: .35rem;
    }

    .status-badge { border-radius: 8px; padding: 2px 10px; font-size: 0.95em; margin-left: auto; }
    
	 

	 
	 .status-open { border-left: 5px solid #28a745; }
    .status-closed { border-left: 5px solid #dc3545; }
   
    .status-badge.open { background: #d4edda; color: #155724; }
    .status-badge.closed { background: #f8d7da; color: #721c24; }

	 .status-badge.prepared {
  background-color: #ffc107;
  color: #000;
}


    .badge-id {
      background: #5b7cff;
      color: #fff;
      font-weight: 600;
      font-size: .97rem;
      border-radius: .7rem;
      padding: .2em .8em;
      margin-right: .6rem;
    }
    .mobile-card-row small {
      font-size: .98em;
      color: #64748b;
    }
    .expand-btn {
      font-size: .93rem;
      color: #3366ff;
      background: none;
      border: none;
      padding: 0;
      margin-top: .2rem;
      cursor: pointer;
    }
    .mobile-card-details {
      background: var(--border-card);
      border-radius: .7em;
      padding: .7em 1em;
      margin-top: .3em;
      font-size: .97em;
    }
    .mobile-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.2rem;
      margin-top: 1.1rem;
      border-top: 1px solid var(--border-card);
      padding-top: .65rem;
    }
    .chip-user {
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .card-user-avatar {
      width: 32px; height: 32px;
      border-radius: 50%; object-fit: cover;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .chip-name {
      font-weight: 600;
      font-size: 1rem;
    }
    .chip-username {
      font-size: .88rem;
      color: #6d6e72;
      margin-left: .11em;
    }
    .card-action-btn {
      min-width: 86px;
      font-size: 1rem;
      padding: .32em 1.2em;
      box-shadow: 0 2px 10px rgba(44,60,128,0.12);
    }
    @media (max-width: 550px) {
      .mobile-card { padding: .9rem .7rem 1rem .7rem; }
      .chip-user { gap: .35rem; }
      .card-user-avatar { width: 28px; height: 28px; }
      .chip-name { font-size: .96rem; }
      .chip-username { font-size: .82rem; }
    }
	 

/* Adaugă acest stil în <head> sau în styles.css */
.participants-mini-card {
  max-height: 64px;
  overflow-y: auto;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #bdbdbd #f5f5f5;
  padding-bottom: 2px;
}
.participants-mini-card::-webkit-scrollbar {
  width: 6px;
  background: #f5f5f5;
}
.participants-mini-card::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 4px;
}
.participants-mini-card {
  overscroll-behavior-y: contain;
}

/* În <style> sau styles.css */
.participant-avatar-wrap {
  position: relative;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.participant-avatar-wrap .btn-remove-participant {
  position: absolute;
  top: -0px;    /* ajustează pentru centrare verticală */
  right: -6px;  /* ajustează pentru centrare orizontală */
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  padding: 0;
  width: 20px;
  height: 20px;
  font-size: 1em;
  z-index: 2;
  display: block;
  opacity: 0.95;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.participant-avatar-wrap .btn-remove-participant i {
  font-size: 1.1em;
  line-height: 1;
  margin: 0;
  padding: 0;
}	 
	 
	 







.scaned-products-card {
  border: 4px solid var(--border-card);
  border-radius: 1.5rem;
  padding: 1.2rem 1rem 1.1rem 1rem;
  background: var(--bg-card);
  width: 100%;
  max-width: 100%;
  margin: 1.4rem auto;
  box-shadow: 0 2px 16px 0 rgba(49,57,183,0.10);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.scaned-products-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 1.2rem;
  position: relative;
}

.scaned-products-img-prod {
  width: 90px;
  height: 90px;
  border-radius: 1rem;
  object-fit: cover;
  background: #f3f3f3;
}

.scaned-products-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  min-width: 0;
}

.scaned-products-title-badge-wrap {
  width: 100%;
  position: relative;
  min-width: 0;
}

.scaned-products-title {
  font-size: 1.09rem;
  font-weight: 500;
  margin-bottom: 0.22rem;
  word-break: break-word;
  white-space: normal;
  display: block;
  padding-right: 3.5em; /* Rezervă spațiu pentru badge, ajustează după caz */
  min-width: 0;
  box-sizing: border-box;
}

.scaned-products-badge-cantitate {
  position: absolute;
  top: 0;
  right: 0;
  background: #4665ff;
  color: #fff;
  border-radius: 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.28rem 1.1rem;
  min-width: 38px;
  text-align: center;
  z-index: 10;
  box-shadow: 0 4px 16px 0 rgba(49,57,183,0.11);
  line-height: 1.1;
}

.scaned-products-sku {
    background: #4665ff;
    color: #fff;
}

.scaned-products-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.7rem;
}

.scaned-products-user {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.scaned-products-img-user {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #3139b7;
  background: #f3f3f3;
}

.scaned-products-user-details {
  font-size: 0.99rem;
  line-height: 1.1;
  white-space: nowrap;
}

.scaned-products-user-details small {
  color: #6b7998;
  font-size: 0.95rem;
}

.scaned-products-date {
  font-size: 0.99rem;
  color: #38437b;
  text-align: right;
  font-weight: 400;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .scaned-products-card {
    padding: 0.7rem 0.3rem 1rem 0.3rem;
    border-radius: 1.1rem;
  }
  .scaned-products-img-prod {
    width: 60px;
    height: 60px;
  }
  .scaned-products-img-user {
    width: 28px;
    height: 28px;
  }
  .scaned-products-badge-cantitate {
    font-size: 0.89rem;
    min-width: 26px;
    padding: 0.17rem 0.7rem;
  }
  .scaned-products-title {
    font-size: 0.97rem;
    padding-right: 2.7em; /* Redu spațiul pe mobil */
  }
}





    .fade-in {
      animation: fadeIn 0.6s;
    }
    @keyframes fadeIn {
      from { background: #d1e7dd; opacity: 0.3; }
      to   { background: inherit; opacity: 1; }
    }
    .scrollable-table {
      max-height: 400px;
      overflow: auto;
    }
    .connections-card { max-width: 100%; }
    .scroll-horizontal { overflow-x: auto; }
    .connection-user { min-width: 80px; }
    .avatar-box { width: 48px; height: 48px; margin: 0 auto 4px; border-radius: 50%; overflow: hidden; background: #f0f0f0; }
    .avatar-img { width: 100%; height: 100%; object-fit: cover; }
    .connection-name { font-size: 0.95em; }
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
    .inventory-card-inventar {
      margin: 1rem auto;
      border-radius: 18px;
      box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
      overflow: hidden;
      background: var(--bg-card);
    }
    .inventory-sku-badge {
      font-size: 0.99rem;
    }
    .inventory-img-prod {
      width: 68px;
      height: 68px;
      object-fit: cover;
      border-radius: 12px;
      border: 1px solid #e1e1e1;
      background: #fff;
      flex-shrink: 0;
      align-self: flex-start;
    }
    .inventory-prod-title {
      font-size: 1.18rem;
      font-weight: 600;
      word-break: break-word;
      line-height: 1.18;
      margin-bottom: 0;
    }
    .inventory-card-footer-inventar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.7rem 1rem;
      border-top: 1px solid var(--border-card);
    }
    .inventory-user-area {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .inventory-avatar-sm {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid #e1e1e1;
    }
    .inventory-text-zone {
      min-width: 0;
      margin-left: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

	 
	 
	 
	 
	 
	 
	 
  .product-card-shelf {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 2px 8px #0001;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
  }
  .product-card-shelf .prod-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: #f5f5f5;
    flex-shrink: 0;
  }
  .product-card-shelf .prod-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .product-card-shelf .prod-name {
    font-weight: 600;
    font-size: 1.05em;
    margin-bottom: 2px;
    word-break: break-word;
    white-space: normal;
    text-align: left;
  }
  .product-card-shelf .prod-sku {
    font-size: 0.95em;
    color: #888;
    word-break: break-all;
    text-align: left;
  }
  .product-card-shelf .prod-qty {
    font-weight: bold;
    font-size: 1.1em;
    color: #155724;
    min-width: 40px;
    text-align: left;
    margin-right: 10px;
  }
  @media (max-width: 600px) {
    .product-card-shelf {
      flex-direction: row;
      align-items: stretch;
      text-align: left;
      gap: 0.75rem;
      padding: 0.75rem;
    }
    .product-card-shelf .prod-qty {
      text-align: left;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      min-width: 48px;
      font-size: 1.1em;
    }
    .product-card-shelf .prod-info {
      flex: 1 1 auto;
      min-width: 0;
      justify-content: center;
      padding: 0;
    }
    .product-card-shelf .prod-img {
      margin-left: auto;
      margin-right: 0;
    }
  }	 
  
  
  
.order-card,
.preparation-card,
.instruction-card {
  background: var(--bg-card);
  border-color: var(--border-card);
}



    .warehouse-card {
      border-radius: 18px;
      box-shadow: 0 4px 18px 0 #0001;
      background: var(--bg-card);
      padding: 1.6rem 1.2rem 1.2rem 1.2rem;
      margin-top: 1.2rem;
    }
    .warehouse-title {
      font-weight: 700;
      font-size: 1.5rem;
      margin-bottom: 0.3rem;
      letter-spacing: 0.01em;
    }
    .warehouse-subtitle {
      font-weight: 500;
      letter-spacing: 0.01em;
      margin-bottom: 0.6rem;
    }
    .info-list {
      list-style: none;
      padding-left: 0;
      margin-bottom: 0.2rem;
    }
    .info-list li {
      display: flex;
      align-items: center;
      margin-bottom: 0.7rem;
      padding: 0.7rem 1rem;
      background: var(--info-list-bg);
      border-radius: 12px;
      box-shadow: 0 2px 8px 0 #bfc9d71a;
      font-size: 1rem;
      color: var(--info-list-text);
      transition: background 0.2s;
    }
    .info-list li .icon {
      color: #5b7cff;
      margin-right: 0.8rem;
      font-size: 1.3em;
    }
    .info-label {
      font-weight: 600;
      min-width: 110px;
    }
    .info-value {
      margin-left: auto;
      font-weight: 700;
      color: #5b7cff;
    }
	 
	 
    .stat-card {
      border-radius: 18px;
      box-shadow: 0 4px 20px 0 #0001;
      background: var(--bg-card);
      padding: 1.3rem 1.1rem;
      display: flex;
      align-items: center;
      min-height: 110px;
      transition: box-shadow 0.15s;
      border: none;
      width: 100%;
      margin-bottom: 1.2rem;
    }
    .stat-card:hover {
      box-shadow: 0 6px 26px 0 #0d6efd21;
    }
    .stat-icon {
      font-size: 2.2rem;
      color: #5b7cff;
      margin-right: 1.2rem;
      flex-shrink: 0;
    }
    .stat-content {
      flex-grow: 1;
    }
    .stat-title {
      font-size: 1.08rem;
      font-weight: 600;
      color: #5b7cff;
      margin-bottom: 0.15rem;
    }
    .stat-value {
      font-size: 1.6rem;
      font-weight: 700;
      color: #2563eb;
      letter-spacing: 0.01em;
    }
    .stat-sub {
      font-size: 0.99rem;
      color: #6b7280;
      margin-top: 0.15rem;
    }
    .badge {
      font-size: 1.01rem;
    }
    .card-depozit {
      border-radius: 1rem;
      box-shadow: 0 2px 12px 0 #0d6efd12;
      border: none;
    }
    .card-depozit .card-title {
      font-weight: 700;
      font-size: 1.18rem;
      color: #2563eb;
    }
    .card-depozit ul {
      font-size: 1.05rem;
    }
    @media (max-width: 575.98px) {
      .stat-card {
        min-height: 100px;
        padding: 1rem 0.7rem;
      }
    }





/* Adaugă în <style> sau în styles.css */
#receptionsChart {
  width: 100% !important;
  height: 320px !important;
  max-width: 100vw;
  display: block;
}
@media (max-width: 575.98px) {
  #receptionsChart {
    height: 220px !important;
  }
}	 

















    .mini-card {
      border-radius: 1.1rem;
      background: var(--bg-card);
      box-shadow: 0 2px 16px rgba(76, 132, 255, 0.10);
      padding: 0.7rem 1.1rem;
      display: flex;
      align-items: center;
      gap: 0.9rem;
      min-width: 160px;
      min-height: 60px;
      font-size: 0.98rem;
      position: relative;
      overflow: hidden;
    }
    .mini-card-icon-round {
      width: 33px;
      height: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 1.3rem;
      flex-shrink: 0;
      margin-right: 0.6rem;
    }
    .mini-card-icon-blue {
      color: #4c84ff;
      background: #e7f1ff;
    }
    .mini-card-icon-green {
      color: #18c187;
      background: #e7fbf3;
    }
    .mini-card-icon-yellow {
      color: #fab005;
      background: #fff8e1;
    }
    .mini-card-title {
      margin-bottom: 0.12rem;
      font-weight: 500;
      font-size: 0.95rem;
      line-height: 1.1;
    }
    .mini-card-value {
      font-size: 1.13rem;
      font-weight: 600;
      margin-bottom: 0;
    }
    .mini-card-sub {
      font-size: 0.76rem;
      color: #adb0c4;
      margin-top: 0.1rem;
    }
    @media (max-width: 576px) {
      .mini-card {
        min-width: 100%;
        font-size: 0.91rem;
        padding: 0.7rem;
      }
    }









      /*
        =======================================================
        ️🛡  Wallet‑Sidebar – NAMESPACED STYLES
        -------------------------------------------------------
        All selectors are prefixed with .ws‑ so they will never
        collide with styles from other components.
      =======================================================*/

      /*   Container   */
      .fast-sidebar {
        width: var(--fast-sidebar-width);
        background: var(--fast-bg);
      }
      /* Hide native scrollbar but keep scrollability */
      .fast-sidebar::-webkit-scrollbar {
        display: none;
      }
      .fast-sidebar {
        -ms-overflow-style: none; /* IE/Edge */
        scrollbar-width: none;    /* Firefox */
      }

      /*   Profile card   */
      .fast-profile-card {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 1rem;
      }
      .fast-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
      }

      /*   Navigation   */
      .fast-nav .nav-link {
        color: #fff;
        opacity: 0.85;
      }
      .fast-nav .nav-link:hover,
      .fast-nav .nav-link:focus {
        opacity: 1;
        background: rgba(255, 255, 255, 0.08);
      }
      .fast-nav .fa-star {
        color: #ffc107;
        margin-left: .25rem;
      }

      /*   "new" pill   */
      .fast-pill-new {
        background: #16e0bd;
        color: #000;
        font-size: .6rem;
        padding: .15rem .35rem;
        border-radius: .5rem;
        text-transform: uppercase;
        letter-spacing: .5px;
      }

      /*   Decorative bubbles   */
      .fast-bubbles {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
      }
      .fast-bubble {
        position: absolute;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #ff4a4a;
        bottom: -18px;
        left: 20px;
        animation: fast-float 10s infinite ease-in-out;
      }
      .fast-bubble:nth-child(2) {
        background: #f9c80e;
        width: 20px;
        height: 20px;
        left: 120px;
        animation-duration: 14s;
      }
      .fast-bubble:nth-child(3) {
        background: #6c63ff;
        width: 14px;
        height: 14px;
        left: 200px;
        animation-duration: 9s;
      }
      @keyframes fast-float {
        0%   { transform: translateY(0) translateX(0); }
        50%  { transform: translateY(-30px) translateX(10px); }
        100% { transform: translateY(0) translateX(0); }
      }
		
		
		
		
		
		
		
		
		
		
		
		
		
    .user-card {
      border-radius: 1.1rem;
      box-shadow: 0 2px 10px #0001;
      background: var(--bg-card);
      padding: 1.2rem 1rem 1rem 1rem;
      margin-bottom: 1.2rem;
      display: flex;
      align-items: center;
      gap: 1.1rem;
      min-height: 110px;
      position: relative;
    }
    .user-card .avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
      background: #f3f3f3;
      border: 2px solid #e0e0e0;
    }
    .user-card .user-info {
      flex-grow: 1;
    }
    .user-card .user-name {
      font-size: 1.15rem;
      font-weight: 600;
      color: #2563eb;
      margin-bottom: 0.1rem;
    }
    .user-card .user-username {
      color: #888;
      font-size: 0.98rem;
      margin-bottom: 0.1rem;
    }
    .user-card .user-group {
      font-size: 0.97rem;
      color: #fff;
      background: #2563eb;
      border-radius: 0.5rem;
      padding: 0.2rem 0.7rem;
      margin-right: 0.5rem;
      display: inline-block;
    }
    .user-card .user-group.user {
      background: #eab308;
      color: #333;
    }
    .user-card .user-actions {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      align-items: flex-end;
    }
    @media (max-width: 575.98px) {
      .user-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
        min-height: 0;
      }
      .user-card .user-actions {
        flex-direction: row;
        width: 100%;
        justify-content: flex-end;
      }
    }