* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
html {
  direction: rtl;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
}
.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 10 بدل 12 */
  grid-template-areas:
    "header header header header header header header header header header header header"
    "balance balance balance balance income income income income costs costs costs costs "
    "activities activities activities activities transactions transactions transactions transactions transactions transactions transactions transactions"
    "bills bills bills bills transactions transactions transactions transactions transactions transactions transactions transactions"
    "overview overview overview overview income2 income2 income2 income2 payment payment payment payment"
    "overview overview overview overview conc conc conc conc payment payment payment payment";
  margin-right: 20px;
  column-gap: 20px;
  row-gap: 20px;
}
.sidebar {
  background-color: #ffffff;
  padding: 30px 15px 30px 20px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: calc(100% * 2 / 12);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
}
.title {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "logo header"
    "logo subtitle";
  gap: 0 15px;
  align-items: center;
  padding-bottom: 25px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.title img {
  grid-area: logo;
  width: 55px;
  height: 55px;
  margin-bottom: 10px;
  background-color: #2d4ff0;
  border-radius: 15px;
  padding: 14px;
}

.titletext {
  margin-bottom: 10px;
}

.titletext p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: oklch(0.21 0.034 264.665);
  display: block;
  grid-area: header;
  padding-bottom: 3px;
}

.titletext span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: oklch(0.446 0.03 256.8);
  grid-area: subtitle;
}
.contentbar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.point {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  /* background-color: blue; */
  transition: all 0.3s ease;
  justify-content: flex-start;
}

.point img {
  width: 20px;
  height: 20px;
}

.point span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: oklch(0.446 0.03 256.8);
}

.point:hover {
  background-color: #f9fafb;
}
.point.featured {
  background-color: #eff6ff;
  box-shadow: 0 0 0 0.15px #155dfc;
}
.point.featured span {
  color: #155dfc;
}
.containbar2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.containbar2 > p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: oklch(0.373 0.034 259.733);
  padding: 25px 0px;
}

.arg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  justify-content: flex-start;
}

.arg:hover {
  background-color: #f9fafb;
  transform: scale(1.02);
}

.arg img {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 12px;
  background-color: #f7edff;
}

.arg span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: rgb(17, 24, 39);
}
.container {
  width: 100%;
  padding-right: calc(100% * 2 / 12 + 20px);
  padding-left: 20px;
  padding-top: 30px;
  padding-bottom: 20px;
  box-sizing: border-box;
  background-color: #f8fafc;
}
.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background-color: #f8fafc;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.leftside {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "logo title"
    "logo subtitle";
  gap: 0px 15px;
  align-items: center;
}

.leftside img {
  grid-area: logo;
  width: 55px;
  height: 55px;
  background-color: #2d4ff0;
  border-radius: 15px;
  padding: 14px;
  align-self: center;
}

.leftside p {
  grid-area: title;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #1f2937;
  align-self: end;
  position: relative;
  bottom: 7px;
}

.leftside span {
  grid-area: subtitle;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #6b7280;
  align-self: start;
  position: relative;
  bottom: 10px;
}

.header > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #10b981;
  padding: 8px 16px;
  border-radius: 20px;
  margin-left: auto;
  margin-right: 40px;
  margin-top: 4px;
}

.header > span::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
    background-color: #10b981;
  }
  50% {
    opacity: 0.3;
    background-color: #34d399;
  }
  100% {
    opacity: 1;
    background-color: #10b981;
  }
}

.rightside {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rightside > img {
  width: 42px;
  height: 42px;
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rightside > img:hover {
  background-color: #f3f4f6;
}

.perfect {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title logo"
    "subtitle logo";
  gap: 0px 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 15px;
  background-color: #ffffff;
}

.perfect img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  grid-area: logo;
  border-radius: 15px;
  padding: 6px;
  align-self: center;
}

.perfect p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #1f2937;
  margin: 0;
  grid-area: title;
  align-self: end;
  line-height: 1.2;
}

.perfect span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #6b7280;
  grid-area: subtitle;
  align-self: start;
  line-height: 1.2;
}

.rightside {
  position: relative;
}

.rightside > img:nth-child(2) {
  position: relative;
}

.notification-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notification-wrapper img {
  width: 42px;
  height: 42px;
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.notification-wrapper img:hover {
  background-color: #f3f4f6;
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background-color: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
.balance {
  flex-direction: column;
  row-gap: 15px;
  grid-area: balance;
  margin-top: 20px;
  background-color: white;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  display: flex;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

  border-radius: 15px;
}
.hea {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: oklch(0.21 0.034 264.665);
  font-size: 36px;
  line-height: 40px;
}
.par {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: oklch(0.551 0.027 264.364);
  font-size: 14px;
  line-height: 20px;
}

.spa {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: oklch(0.627 0.194 149.214);
  font-size: 14px;
  line-height: 20px;
}

.spa::before {
  content: "↑";
}
.income {
  flex-direction: column;
  row-gap: 15px;
  grid-area: income;
  margin-top: 20px;
  background-color: white;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  display: flex;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.costs {
  flex-direction: column;
  row-gap: 15px;
  grid-area: costs;
  margin-top: 20px;
  background-color: white;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  display: flex;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.costs .spa {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: #eb000b;
  font-size: 14px;
  line-height: 20px;
}
.costs .spa::before {
  content: "↓";
}
.activities {
  grid-area: activities;
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.activities > p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: oklch(0.21 0.034 264.7);
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 10px;
}

.activity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "ima hea1 hea2"
    "ima para para"
    "ima spara spara";
  gap: 5px 12px;
  align-items: start;
  padding: 12px 12px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #eff6ff;
  border-radius: 15px;
  box-shadow: -3px 0px 0px #2b7fff;
}

.activity img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  padding: 12px;
  grid-area: ima;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  background-color: #dbeafe;
}

.activity p {
  grid-area: hea1;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: oklch(0.21 0.034 264.665);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

.activity span:nth-of-type(1) {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  color: oklch(0.546 0.245 262.881);
  font-size: 12px;
  line-height: 16px;
  grid-area: hea2;
  text-align: left;
}

.activity span:nth-of-type(2) {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: oklch(0.446 0.03 256.802);
  font-size: 12px;
  line-height: 16px;
  grid-area: para;
}

.activity span:nth-of-type(3) {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: oklch(0.446 0.03 256.802);
  font-size: 12px;
  line-height: 16px;
  grid-area: spara;
  margin-top: 15px;
}

.activities .activity:nth-of-type(2) {
  box-shadow: -3px 0px 0px #00c951;
  background-color: #f0fdf4;
}

.activities .activity:nth-of-type(2) span:nth-of-type(1) {
  color: #00c951;
}
.activities .activity:nth-of-type(2) img {
  background-color: #dbfce7;
}

.activities p:nth-of-type(2) {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  color: oklch(0.488 0.243 264.376);
  font-size: 14px;
  line-height: 20px;
  margin-top: 20px;
  cursor: pointer;
  border-top: 1px solid #e5e7eb;
  padding-top: 15px;
  width: 100%;
  text-align: center;
}
.bills {
  display: grid;
  grid-area: bills;
  grid-template-areas:
    "header header"
    "title title"
    "subtitle subtitle"
    "internet electricity"
    "phone netflix";
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.bills-header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bills-header > p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: oklch(0.21 0.034 264.665);
}

.bills-header > span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  cursor: pointer;
}

.bills-header > span:hover {
  color: black;
}
.bills-header > span:hover::after {
  color: black;
}
.bills-header > span::after {
  content: ">";
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  padding-right: 3px;
}
.bills > h2 {
  grid-area: title;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: oklch(0.21 0.034 264.665);
  text-align: center;
  margin-bottom: -10px;
}
.bills > span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: oklch(0.551 0.027 264.364);
  grid-area: subtitle;
  text-align: center;
}
.billitem {
  display: flex;
  align-items: center;
  row-gap: 3px;
  flex-direction: column;
  background-color: #f9fafb;
  padding: 10px 10px 10px 10px;
  border-radius: 12px;
}
.billitem img {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 8px;
  object-fit: contain;
}
.billitem > span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
.billitem > h5 {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}
.billitem > p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
.wifi img {
  grid-area: internet;
  background-color: #dbeafe;
}
.billitem.wifi > p {
  color: #fb2c36;
}
.bolt img {
  grid-area: electricity;
  background-color: #fef9c2;
}
.billitem.bolt > p {
  color: #fe6900;
}

.phone img {
  grid-area: phone;
  background-color: #dbfce7;
}
.billitem.phone > p {
  color: #00c951;
}
.tv img {
  background-color: #ffe2e2;
  grid-area: netflix;
}
.billitem.tv > p {
  color: #947282;
}
.ourtable {
  grid-area: transactions;
  background-color: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.headerr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.headerr h2 {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: oklch(0.21 0.034 264.665);
}

.view-all {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  cursor: pointer;
}

.view-all:hover {
  color: black;
}
.view-all:hover::after {
  color: black;
  color: black;
}
.view-all::after {
  content: ">";
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  padding-right: 3px;
}

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

thead {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

th {
  padding: 12px 16px;
  text-align: right;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: oklch(0.373 0.034 259.733);
}

td {
  padding: 16px;
  text-align: right;
  border-bottom: 1px solid #f3f4f6;
}

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

.transaction-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.icon img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}

.icon img[src*="avatar"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.transaction-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.transaction-name {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: oklch(0.21 0.034 264.665);
}

.transaction-desc {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: oklch(0.551 0.027 264.364);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 16px;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

.badge img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.badge-income {
  background-color: #d1fae5;
  color: #065f46;
}

.badge-food {
  background-color: #fed7aa;
  color: #92400e;
}

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

.badge-invoice {
  background-color: #e9d5ff;
  color: #6b21a8;
}

.badge-work {
  background-color: #d1fae5;
  color: #065f46;
}

.badge-transport {
  background-color: #fecaca;
  color: #991b1b;
}

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

.badge-health {
  background-color: #ccfbf1;
  color: #115e59;
}

.badge-education {
  background-color: #d1fae5;
  color: #065f46;
}

.date {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: oklch(0.446 0.03 256.802);
}

.status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.status-completed {
  background-color: #d1fae5;
  color: #065f46;
}

.status-pending {
  background-color: #fef3c7;
  color: #92400e;
}

.amount {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.amount-positive {
  color: #059669;
}

.amount-negative {
  color: #1a1a1a;
}
.budget {
  grid-area: overview;
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  background-color: white;
  padding: 20px 20px 40px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.budget .headerrr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.budget .headerrr p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: oklch(0.21 0.034 264.665);
}
.budget .headerrr > span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  cursor: pointer;
}

.budget .headerrr > span:hover {
  color: black;
}
.budget .headerrr > span:hover::after {
  color: black;
}
.budget .headerrr > span::after {
  content: ">";
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  padding-right: 3px;
}
.special-item {
  background-color: #eff4ff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
}

.total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: oklch(0.546 0.245 262.881);
}

.total span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: oklch(0.551 0.027 264.364);
  margin-left: 37px;
}

.totalnum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.totalnum span:first-child {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: oklch(0.379 0.146 265.522);
}

.totalnum span:last-child {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: oklch(0.627 0.194 149.214);
}

.totaluser {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 5px;
}

.totaluser p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: oklch(0.446 0.03 256.802);
}

.totaluser span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: oklch(0.446 0.03 256.802);
}

.bar {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.anothbar {
  height: 100%;
  width: 82.5%;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 10px;
}
.dragon {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon info amount"
    "progress progress progress";
  gap: 12px 16px;
  background-color: #fcfcfd;
  border-radius: 16px;
  padding: 10px 20px;
  margin-bottom: 10px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  align-items: center;
  transition: all 0.3s ease;
}

.dragon:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #e5e7eb;
  background-color: #f5f5f5;
}
.dragon img {
  grid-area: icon;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 12px;
  object-fit: contain;
}

.dragon.pico img {
  background-color: #eef4ff;
}

.dragon.Son img {
  background-color: #fecaca;
}

.dragon.Vege img {
  background-color: #fce7f3;
}

.dragon.Goha img {
  background-color: #d1fae5;
}

.pico2 {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.pico2 p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.pico2 span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

.pico3 {
  grid-area: amount;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  align-items: flex-end;
}

.pico3 p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.pico3 span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-block;
  width: fit-content;
}

.dragon.pico .pico3 span {
  color: #337cff;
  background-color: rgba(51, 124, 255, 0.1);
}

.dragon.Son .pico3 span {
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.dragon.Vege .pico3 span {
  color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.1);
}

.dragon.Goha .pico3 span {
  color: #10b981;
  background-color: rgba(16, 185, 129, 0.1);
}

.progress-bar {
  grid-area: progress;
  width: 100%;
  height: 6px;
  background-color: #f3f4f6;
  border-radius: 10px;
  overflow: hidden;
}

.innerbar {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
  animation: fillBar 1.5s ease-out forwards;
}

@keyframes fillBar {
  from {
    width: 0;
  }
}

.dragon.pico .innerbar {
  width: 50%;
  background: #347dff;
}

.dragon.Son .innerbar {
  width: 100%;
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.dragon.Vege .innerbar {
  width: 80%;
  background: linear-gradient(90deg, #ec4899 0%, #db2777 100%);
}

.dragon.Goha .innerbar {
  width: 86%;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}
.versus {
  display: flex;
  grid-area: income2;
  flex-direction: column;
  row-gap: 20px;
  padding: 20px 20px 30px 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.headerrr2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headerrr2 p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: oklch(0.21 0.034 264.665);
}
.headerrr2 > span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  cursor: pointer;
}

.headerrr2 > span:hover {
  color: black;
}
.headerrr2 > span:hover::after {
  color: black;
}
.headerrr2 > span::after {
  content: ">";
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  padding-right: 3px;
}
.titles2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.titles2 span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: rgb(100, 116, 139);
  margin-left: 10px;
}

.greenblock {
  width: 14px;
  height: 14px;
  background-color: #10b981;
  border-radius: 4px;
}

.brownblock {
  width: 14px;
  height: 14px;
  background-color: #ff5252;
  border-radius: 4px;
}
.bars2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.baritem {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  justify-content: center;
  height: 150px;
}

.bar-group .span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #6a7282;
  text-align: center;
}
.greenbar {
  height: 100px;
  width: 14px;
  background-color: #10b981;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  transition: all 0.3s ease;
}
.brownbar {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  height: 50px;
  width: 14px;
  background-color: #ff5252;
  transition: all 0.3s ease;
}
.greenbar:hover {
  opacity: 0.8;
}
.brownbar:hover {
  opacity: 0.8;
}
.summarize {
  display: flex;
  grid-area: conc;
  flex-direction: column;
  row-gap: 20px;
  padding: 20px 20px 30px 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.headerrr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headerrr p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: oklch(0.21 0.034 264.665);
}
.headerrr > span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  cursor: pointer;
}

.headerrr > span:hover {
  color: black;
}
.headerrr > span:hover::after {
  color: black;
}
.headerrr > span::after {
  content: ">";
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  padding-right: 3px;
}
.accounts {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon title amount"
    "icon subtitle amount";
  gap: 5px 15px;
  align-items: center;
  background-color: #fcfcfd;
  border-radius: 16px;
  padding: 18px 20px;
  border: 1px solid #f3f4f6;
}

.accounts img {
  grid-area: icon;
  width: 45px;
  height: 45px;
  padding: 11px;
  border-radius: 12px;
  object-fit: contain;
}

.accounts.account1 img {
  background-color: #dbeafe;
}

.accounts.account2 img {
  background-color: #d1fae5;
}

.accounts.account3 img {
  background-color: #fce7f3;
}

.accounts .account-title {
  grid-area: title;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: #1f2937;
  margin: 0;
  align-self: end;
}

.accounts .account-subtitle {
  grid-area: subtitle;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #6b7280;
  align-self: start;
}

.accounts .account-amount {
  grid-area: amount;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #1f2937;
  margin: 0;
  text-align: left;
}

.accounts.account3 .account-amount {
  color: #ef4444;
}
.visacards {
  display: flex;
  grid-area: payment;
  flex-direction: column;
  row-gap: 20px;
  padding: 20px 20px 30px 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.headerrr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headerrr p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: oklch(0.21 0.034 264.665);
}
.headerrr > span {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  cursor: pointer;
}

.headerrr > span:hover {
  color: black;
}
.headerrr > span:hover::after {
  color: black;
}
.headerrr > span::after {
  content: ">";
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  padding-right: 3px;
}
.card-face {
  padding: 25px 25px 30px 25px;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  background: #372aac;
  border-radius: 20px;
  color: white;
  position: relative;
  overflow: hidden;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  width: 40px;
  display: block;
  object-fit: contain;
}

.card-icon {
  width: 40px;
  height: 35px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  backdrop-filter: blur(10px);
  position: relative;
}

.card-icon::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.card-number {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: rgb(255, 255, 255);
  text-align: right;
  letter-spacing: 2px;
}

.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: -20px;
}

.expiry,
.holder {
  display: flex;
  flex-direction: column;
  /* row-gap: px; */
}

.expiry {
  align-items: flex-end;
}

.holder {
  align-items: flex-start;
  text-align: right;
}

.expiry span:first-child,
.holder span:first-child {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 24px;
  color: rgb(255, 255, 255);
}

.expiry span:last-child,
.holder span:last-child {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: rgb(255, 255, 255);
}
.face2 {
  background-color: #c70036;
}
.face3 {
  background-color: #193cb8;
}
.face3 .expiry span:last-child {
  color: #22c55e; /* اللون اللي عايزه */
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.face3 .holder span:last-child {
  font-size: 14px;
}

.card-face.back {
  background: #1a1a2e;
  display: flex;
  flex-direction: column;
  padding: 15px 20px;
  color: white;
  border-radius: 20px;
  overflow: hidden;
  gap: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.black-strip {
  height: 40px;
  background: linear-gradient(to right, #000, #000 70%, #434343);
  border-radius: 5px;
}

.card-details {
  display: flex;
  flex-direction: column;
  row-gap: 9px;
}

.card-details span {
  display: block;
  text-align: right;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 15px;
  color: rgba(255, 255, 255, 0.48);
}

.card-details p {
  background: white;
  color: #000;
  padding: 7px 15px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-details p::before {
  content: "";
  flex: 1;
  height: 6px;
  background: linear-gradient(to left, #000, #999, #ddd);
  border-radius: 5px;
}

.cvv-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.cvv-section span {
  display: block;
  text-align: right;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: oklch(0.872 0.01 258.338);
  position: relative;
  left: 30px;
}

.cvv-section p {
  background: white;
  color: #000;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.card {
  perspective: 1000px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: rotateY(180deg);
}

.card .card-face {
  backface-visibility: hidden;
}

.card .card-face:first-child {
  transform: rotateY(0deg);
}

.card .card-face.back {
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.top-row > p {
  position: absolute;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  color: rgb(255, 255, 255);
  top: 10px;
  left: 15px;
  background-color: rgba(255, 255, 255, 0.2); /* 0.8 تعني شفافية بنسبة 80% */
  border-radius: 15px;
  padding: 3px 8px;
  backdrop-filter: blur(6px);
}