:root {
  --ink: #071729;
  --navy: #0d2b45;
  --midnight: #05101f;
  --blue: #1e4dff;
  --blue-2: #2f7bff;
  /* درجتين إضافيتين اتضافوا عشان تخصيص لون النشاط (applyBrandColors() في app.js)
     يقدر يغطي فعليًا كل الأماكن اللي كانت مثبّتة بقيمة أزرق ثابتة (شارات
     الأيقونات وخلفياتها) مش بس زرار الـCTA — نفس فكرة --ksh-blue-700/--ksh-blue-100
     في لوحة الديسكتوب بالظبط. القيم الافتراضية هنا مطابقة لنفس الأزرق اللي كان
     مكتوب يدويًا في عشرات الأماكن، فمفيش أي تغيير بصري لنشاط معندوش لون مخصّص.  */
  --blue-dark: #1d4ed8;
  --blue-100: #dbeafe;
  --cyan: #19d3e8;
  --mint: #20c997;
  --green: #16a34a;
  --amber: #f59e0b;
  --red: #ef4444;
  --paper: #ffffff;
  --soft: #f6f9ff;
  --mist: #eaf1ff;
  --line: rgba(13, 43, 69, 0.11);
  --muted: #70809a;
  --shadow: 0 42px 120px rgba(3, 13, 26, 0.46);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes kshPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  letter-spacing: 0;
  background: #f1f5f9;
}

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

button {
  font: inherit;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 44px 18px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -3;
  background:
    linear-gradient(118deg, transparent 0 24%, rgba(30, 77, 255, 0.24) 24% 42%, transparent 42%),
    linear-gradient(72deg, transparent 0 48%, rgba(25, 211, 232, 0.13) 48% 62%, transparent 62%),
    radial-gradient(820px 580px at 50% 6%, rgba(67, 133, 255, 0.28), transparent 64%);
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 82%, transparent 100%);
}

.gallery {
  width: min(1180px, 100%);
  color: #fff;
}

.gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.gallery-head img {
  width: 210px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(30, 77, 255, 0.25));
}

.gallery h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.08;
  font-weight: 900;
}

.gallery p {
  margin: 14px 0 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 18px;
  line-height: 1.8;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.gallery-card {
  min-height: 148px;
  display: grid;
  align-content: space-between;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(22px);
}

.gallery-card strong {
  font-size: 20px;
  font-weight: 900;
}

.gallery-card small {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 800;
}

.gallery-card span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(30, 77, 255, 0.72);
}

.gallery-card svg {
  width: 20px;
  height: 20px;
}

.luxury-frame {
  width: min(100%, 840px);
  min-height: 920px;
  display: grid;
  place-items: center;
  position: relative;
}

.back-panel,
.back-panel::before,
.back-panel::after {
  position: absolute;
  border-radius: 86px;
  pointer-events: none;
}

.back-panel {
  width: min(76vw, 600px);
  height: min(76vw, 600px);
  transform: rotate(-8deg);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
    linear-gradient(145deg, rgba(30, 77, 255, 0.86), rgba(13, 43, 69, 0.92) 58%, rgba(25, 211, 232, 0.54));
  box-shadow:
    0 50px 130px rgba(30, 77, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.back-panel::before,
.back-panel::after {
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.back-panel::before {
  inset: 44px -118px -84px 96px;
}

.back-panel::after {
  inset: -82px 116px 96px -78px;
}

.phone {
  width: 430px;
  height: 860px;
  position: relative;
  z-index: 3;
  padding: 10px;
  border-radius: 64px;
  background:
    linear-gradient(145deg, #111a26, #01040a 42%, #172638);
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 8px 22px rgba(255, 255, 255, 0.12);
}

.phone::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 5;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.screen {
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 56px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7faff 53%, #eef5ff 100%);
}

.screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 132px;
  height: 35px;
  transform: translateX(-50%);
  z-index: 8;
  border-radius: 0 0 22px 22px;
  background: #05070d;
}

.dynamic-dot {
  position: absolute;
  top: 10px;
  left: calc(50% + 34px);
  z-index: 9;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10141e;
  box-shadow: inset 0 0 0 2px #1f2a3a;
}

.status {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  direction: ltr;
  color: #06101d;
  font-size: 13px;
  font-weight: 900;
  position: relative;
  z-index: 6;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-icons span {
  display: block;
  background: currentColor;
}

.signal {
  width: 16px;
  height: 10px;
  clip-path: polygon(0 100%, 18% 62%, 18% 100%, 35% 100%, 35% 44%, 53% 44%, 53% 100%, 70% 100%, 70% 18%, 88% 18%, 88% 100%);
}

.wifi {
  width: 15px;
  height: 11px;
  border-radius: 14px 14px 0 0;
  clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%);
}

.battery {
  width: 21px;
  height: 10px;
  position: relative;
  border-radius: 3px;
}

.battery::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 3px;
  width: 3px;
  height: 4px;
  border-radius: 0 2px 2px 0;
  background: currentColor;
}

.app {
  height: calc(100% - 54px);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 24px 96px;
  scrollbar-width: none;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.scroll.no-nav {
  padding-bottom: 24px;
}

.topbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.mark {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: var(--blue);
  box-shadow:
    0 18px 34px rgba(30, 77, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.identity strong,
.identity small,
.row-title strong,
.row-title small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity strong {
  color: var(--navy);
  font-size: 16px;
  font-weight: 900;
}

.identity small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(13, 43, 69, 0.08);
  border-radius: 17px;
  color: var(--navy);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 255, 0.78));
  box-shadow: 0 14px 32px rgba(13, 43, 69, 0.08);
}

svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.25;
}

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  padding: 22px;
  color: #ffffff;
  background:
    linear-gradient(136deg, #061525 0%, #0d2b45 42%, #1e4dff 100%);
  box-shadow:
    0 28px 58px rgba(13, 43, 69, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(32deg, transparent 0 58%, rgba(25, 211, 232, 0.22) 58% 76%, transparent 76%);
  pointer-events: none;
}

.hero-card h1,
.hero-card h2 {
  margin: 0;
  position: relative;
  z-index: 1;
  color: #ffffff;
  line-height: 1.18;
  font-weight: 900;
}

.hero-card h1 {
  font-size: 30px;
}

.hero-card h2 {
  font-size: 24px;
}

.hero-card p {
  margin: 10px 0 0;
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.7;
  font-weight: 800;
}

.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.pill,
.chip,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 900;
}

.pill {
  min-height: 34px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 11px;
}

.pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 5px rgba(32, 201, 151, 0.12);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 11px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
}

.section-title small {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.glass,
.panel,
.metric,
.row,
.tile,
.field-box {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 20px 48px rgba(13, 43, 69, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
}

.panel {
  border-radius: 30px;
  padding: 16px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.metric {
  min-height: 104px;
  padding: 15px;
  border-radius: 26px;
}

.metric small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.metric strong {
  display: block;
  margin-top: 10px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.metric span {
  display: inline-flex;
  margin-top: 10px;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
}

.chart {
  height: 126px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  padding-top: 14px;
}

.bar {
  border-radius: 12px 12px 5px 5px;
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  box-shadow: 0 12px 26px rgba(30, 77, 255, 0.16);
}

.bar:nth-child(2),
.bar:nth-child(6) {
  background: linear-gradient(180deg, #24d5e7, #15a9be);
}

.bar:nth-child(4) {
  background: linear-gradient(180deg, #fbbf24, var(--amber));
}

.search {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border-radius: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.tabs,
.role-switch,
.method-grid,
.chip-grid {
  display: grid;
  gap: 8px;
}

.tabs {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 4px 0 16px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab,
.chip,
.method {
  min-height: 44px;
  padding: 0 20px;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.tab,
.method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tab.active,
.chip.active,
.method.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tile {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 24px;
  transition: transform 0.2s;
}
.tile:active { transform: scale(0.97); }

.tile-variants {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.v-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.05);
}

.v-size {
  font-size: 8px;
  font-weight: 900;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

.tile-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--blue);
  border-radius: 17px;
  background: #edf4ff;
}

.tile strong,
.tile small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.tile small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.price {
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}

.row-list {
  overflow: hidden;
  border-radius: 28px;
}

.row {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

.row:last-child {
  border-bottom: 0;
}

.row-title {
  min-width: 0;
  flex: 1;
}

.row-title strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.row-title small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.amount {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--blue);
  background: #edf4ff;
  font-weight: 900;
}

.badge {
  min-height: 27px;
  padding: 0 9px;
  color: var(--blue);
  background: #edf4ff;
  font-size: 10px;
}

.badge.green {
  color: #047857;
  background: #dcfce7;
}

.badge.amber {
  color: #b45309;
  background: #fef3c7;
}

.badge.red {
  color: #b91c1c;
  background: #fee2e2;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 13px;
}

.field label {
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
}

.field-box {
  min-height: 56px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 20px;
  color: #21364f;
  background: #f7faff;
}

.field-box strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}

.field-box span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.primary,
.secondary {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 900;
}

.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), #0f68ff);
  box-shadow:
    0 20px 36px rgba(30, 77, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.secondary {
  color: var(--navy);
  background: #ffffff;
  border: 1px solid rgba(13, 43, 69, 0.08);
  box-shadow: 0 14px 28px rgba(13, 43, 69, 0.08);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cart-dock,
.total-dock {
  position: absolute;
  right: 22px;
  left: 22px;
  bottom: 86px;
  z-index: 7;
  min-height: 88px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 15px;
  color: #ffffff;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  box-shadow: 0 26px 54px rgba(13, 43, 69, 0.28);
}

.cart-dock small,
.cart-dock strong,
.total-dock small,
.total-dock strong {
  display: block;
}

.cart-dock small,
.total-dock small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
}

.cart-dock strong,
.total-dock strong {
  margin-top: 5px;
  font-size: 24px;
  font-weight: 900;
}

.dock-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--blue);
  background: #ffffff;
}

.bottom-nav {
  position: absolute;
  right: 12px;
  left: 12px;
  bottom: 0;
  z-index: 30;
  height: 76px;
  display: grid;
  /* بعض الأدوار (كاشير مع خدمة طاولات + تبويب "أدائي") محتاجة أكتر من 5
     تبويبات — --nav-count بيتظبط من bottomNav() نفسها بعدد العناصر الفعلي
     بدل ما يفضل 5 ثابتة ويكسر التخطيط لو زاد العدد. */
  grid-template-columns: repeat(var(--nav-count, 5), 1fr);
  gap: 2px;
  direction: rtl;
  padding: 8px 18px 9px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(218, 227, 243, 0.92);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -18px 46px rgba(27, 47, 82, 0.11);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.nav-item {
  min-width: 0;
  position: relative;
  border: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #7d8aa3;
  border-radius: 18px;
  background: transparent;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease, background .18s ease;
}

.nav-item:active {
  transform: translateY(1px) scale(.97);
}

.nav-item.active {
  color: #145dff;
  background: transparent;
}

.nav-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-icon-wrap {
  width: 28px;
  height: 25px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible !important;
}

.nav-icon-wrap svg,
.nav-item > svg {
  width: 23px;
  height: 23px;
}

.nav-item.active .nav-icon-wrap {
  color: #145dff;
}

.nav-dot {
  position: absolute;
  top: 0;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #145dff;
  box-shadow: 0 0 0 3px rgba(20, 93, 255, 0.1);
}

.nav-add-button {
  align-self: center;
  justify-self: center;
  width: 56px;
  height: 56px;
  margin-top: -24px;
  border-radius: 999px;
  color: #ffffff;
  background: radial-gradient(circle at 34% 24%, #2d7cff 0 18%, #145dff 48%, #0634d9 100%);
  box-shadow: 0 15px 28px rgba(20, 93, 255, 0.34), 0 4px 10px rgba(6, 20, 52, 0.18);
  transition: transform .3s cubic-bezier(.2, 1.45, .25, 1), box-shadow .25s ease;
}

.nav-add-button svg {
  width: 29px;
  height: 29px;
  transition: transform .32s cubic-bezier(.2, 1.45, .25, 1);
}

.nav-add-button.is-open {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 34px rgba(20, 93, 255, 0.42), 0 5px 14px rgba(6, 20, 52, 0.2);
}

.nav-add-button.is-open svg {
  transform: rotate(45deg);
}

.ksh-quick-add {
  position: absolute;
  inset: 0;
  z-index: 26;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 54%, rgba(248, 251, 255, 0.76) 100%);
  transition: opacity .2s ease;
}

.ksh-quick-add.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ksh-quick-actions {
  position: absolute;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 10px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(218, 227, 243, 0.86);
  box-shadow: 0 22px 55px rgba(27, 47, 82, 0.18);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.ksh-quick-action {
  width: 74px;
  min-height: 80px;
  border: 0;
  border-radius: 22px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #0d2b45;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(230, 236, 248, 0.92), 0 10px 22px rgba(18, 44, 82, 0.08);
  font-family: inherit;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px) scale(.82);
  animation: quickDockPop .42s cubic-bezier(.2, 1.45, .25, 1) forwards;
  animation-delay: calc(var(--i) * 58ms);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ksh-quick-action:active {
  transform: translateY(-3px) scale(.96);
}

.ksh-quick-action span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #ffffff;
}

.ksh-quick-action span svg {
  width: 21px;
  height: 21px;
}

.ksh-quick-action.invoice span {
  background: linear-gradient(135deg, #145dff, #00a8ff);
}

.ksh-quick-action.product span {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

.ksh-quick-action.customer span {
  background: linear-gradient(135deg, #0fb981, #0ea5e9);
}

.ksh-quick-action.expense span {
  background: linear-gradient(135deg, #ef4444, #f97316);
}

@keyframes quickDockPop {
  0% { opacity: 0; transform: translateY(22px) scale(.78); }
  64% { opacity: 1; transform: translateY(-8px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  color: #42536c;
  font-size: 13px;
  font-weight: 900;
}

.summary-line.total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(13, 43, 69, 0.1);
  color: var(--navy);
  font-size: 19px;
}

.receipt-logo {
  width: 138px;
  display: block;
  margin: 0 auto 10px;
  mix-blend-mode: multiply;
}

.receipt-head {
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(13, 43, 69, 0.2);
}

.receipt-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
}

.receipt-head small {
  color: var(--muted);
  direction: ltr;
  font-size: 11px;
  font-weight: 800;
}

.progress {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2eaf7;
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}

.switch {
  width: 48px;
  height: 28px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--blue);
}

.switch::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

.floating-add {
  position: absolute;
  left: 24px;
  bottom: 92px;
  z-index: 8;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #ffffff;
  background: var(--blue);
  box-shadow: 0 22px 42px rgba(30, 77, 255, 0.34);
}

.home-indicator {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 10;
  width: 122px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #06101d;
}

@media (max-width: 760px) {
  .stage {
    padding: 16px 10px;
  }

  .luxury-frame {
    min-height: 860px;
  }

  .back-panel {
    width: 92vw;
    height: 92vw;
    border-radius: 68px;
  }

  .phone {
    width: min(430px, 96vw);
    height: min(860px, calc(100vh - 28px));
    min-height: 760px;
  }

  .scroll {
    padding-inline: 18px;
  }
}

@media (max-width: 420px) {
  .hero-card h1 {
    font-size: 27px;
  }

  .hero-card h2 {
    font-size: 22px;
  }

  .tabs {
    gap: 6px;
  }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes itemSlide {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Modal Helper Classes */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 40, 0.55);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease;
}

.modal-content {
  background: #fff;
  width: 90%;
  max-width: 340px;
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  animation: itemSlide 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* ══════════════════════════════════════════════════════════════
   Toast / Notification System — نظام الإشعارات الذكية
   ══════════════════════════════════════════════════════════════ */
#ksh-toast-wrap {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  width: min(390px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.ksh-toast {
  pointer-events: all;
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  animation: ksh-in 0.40s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.ksh-toast.ksh-bye {
  animation: ksh-out 0.28s cubic-bezier(0.4, 0, 1, 1) both;
}

/* ── Type colours ── */
.ksh-toast-success {
  background: rgba(240, 253, 244, 0.97);
  border: 1px solid rgba(22, 163, 74, 0.22);
  color: #14532d;
}
.ksh-toast-error {
  background: rgba(255, 241, 241, 0.97);
  border: 1px solid rgba(220, 38, 38, 0.22);
  color: #7f1d1d;
}
.ksh-toast-info {
  background: rgba(239, 246, 255, 0.97);
  border: 1px solid rgba(37, 99, 235, 0.22);
  color: #1e3a8a;
}
.ksh-toast-warning {
  background: rgba(255, 251, 235, 0.97);
  border: 1px solid rgba(217, 119, 6, 0.22);
  color: #78350f;
}

/* ── Icon ── */
.ksh-ti {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ksh-ti svg { width: 22px; height: 22px; }
.ksh-toast-success .ksh-ti { color: #16a34a; }
.ksh-toast-error   .ksh-ti { color: #dc2626; }
.ksh-toast-info    .ksh-ti { color: #2563eb; }
.ksh-toast-warning .ksh-ti { color: #d97706; }

/* ── Message ── */
.ksh-tm {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* ── Close button ── */
.ksh-tc {
  background: none;
  border: none;
  padding: 2px 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: currentColor;
  opacity: 0.38;
  border-radius: 6px;
  flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s;
}
.ksh-tc:hover {
  opacity: 0.75;
  background: rgba(0, 0, 0, 0.06);
}

/* ── Progress bar (timer countdown) ── */
.ksh-tp {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  border-radius: 0 0 0 14px;
  transform-origin: right;
  animation: ksh-bar linear both;
}
.ksh-toast-success .ksh-tp { background: linear-gradient(90deg, #86efac, #16a34a); }
.ksh-toast-error   .ksh-tp { background: linear-gradient(90deg, #fca5a5, #dc2626); }
.ksh-toast-info    .ksh-tp { background: linear-gradient(90deg, #93c5fd, #2563eb); }
.ksh-toast-warning .ksh-tp { background: linear-gradient(90deg, #fcd34d, #d97706); }

/* ── Animations ── */
@keyframes ksh-in {
  from { opacity: 0; transform: translateY(-20px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ksh-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-10px) scale(0.95); }
}
@keyframes ksh-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ══════════════════════════════════════════════════════════════
   PWA / Mobile Mode — بدون إطار موبايل مزيف
   يظهر لما التطبيق يشتغل كـ PWA مثبت أو على موبايل حقيقي
   ══════════════════════════════════════════════════════════════ */
body.pwa {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 53%, #eef5ff 100%);
  overflow: hidden;
  height: 100%;
}

body.pwa html,
html body.pwa {
  height: 100%;
}

/* #app يملأ كامل الشاشة */
body.pwa #app {
  height: 100vh;
  height: 100dvh; /* dynamic viewport — يحسب شريط العنوان على الموبايل */
  overflow: hidden;
  position: relative;
}

/* .pwa-app هي الحاوية المباشرة للمحتوى بدون إطار */
.pwa-app {
  height: 100% !important;          /* يلغي الـ calc(100% - 54px) الخاصة بـ statusBar */
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 53%, #eef5ff 100%);
}

/* الـ scroll داخل PWA يأخذ ارتفاع كامل */
body.pwa .scroll {
  height: 100%;
  padding: 0 16px 90px;
}

/* الـ topbar في PWA يأخذ بعين الاعتبار safe-area للـ notch */
body.pwa .topbar {
  padding-top: max(10px, env(safe-area-inset-top));
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* bottom nav في PWA يأخذ safe-area للـ home indicator */
body.pwa .bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  left: 10px;
  right: 10px;
  z-index: 200;
}

/* modals في PWA تستخدم position:fixed عشان تغطي الشاشة كلها */
body.pwa [id$="-modal"],
body.pwa #side-menu,
body.pwa #shift-confirm-modal {
  position: fixed !important;
}

/* إخفاء الكلاسات الخاصة بالإطار لو ظهرت بالغلط */
body.pwa .stage,
body.pwa .luxury-frame,
body.pwa .back-panel,
body.pwa .phone,
body.pwa .screen,
body.pwa .home-indicator,
body.pwa .dynamic-dot,
body.pwa .status {
  display: none !important;
}

/* ============================================================
   وضع الديسكتوب — إضافة تدريجية فوق تخطيط PWA الموجود، من غير أي تعديل
   في الشاشات الفردية (JS) ولا الـAPI خالص. المشكلة الأصلية: كل شاشات
   التطبيق مصممة لعرض موبايل (~375px) وبتتمدد لعرض شاشة الديسكتوب الكامل
   حرفيًا (زرار عرضه 1300px، بطاقة إحصائية ممطوطة...) لأن مفيش أي حد أعلى
   للعرض متعرّف. الحل هنا بيحصر عرض المحتوى بحد معقول (مطابق لعرض تطبيقات
   الديسكتوب المعروفة) وبيحوّل القائمة السفلية لعمود جانبي ثابت — تعديل
   بصري/تخطيطي بحت (CSS بس)، الشاشات نفسها وكل منطق العمل زي ما هو تمامًا.
   ============================================================ */
@media (min-width: 900px) {
  :root {
    --ksh-sidebar-w: 92px;
    --ksh-content-max: 960px;
  }

  /* القائمة السفلية (bottom-nav) → عمود جانبي ثابت يمين الشاشة (RTL) —
     نفس عناصر الـnav-item بالظبط، بس في عمود بدل صف. */
  body.pwa .bottom-nav {
    right: 0;
    left: auto;
    bottom: 0;
    top: 0;
    width: var(--ksh-sidebar-w);
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--nav-count, 5), auto);
    align-content: center;
    border-radius: 0;
    border: 0;
    border-inline-start: 1px solid rgba(218, 227, 243, 0.92);
    padding: 24px 6px;
    box-shadow: -18px 0 46px rgba(27, 47, 82, 0.08);
  }

  body.pwa .nav-item {
    font-size: 11px;
    padding: 10px 2px;
  }

  /* المحتوى مايبقاش تحت العمود الجانبي، وبياخد عرض معقول (زي أي تطبيق
     ديسكتوب حقيقي) بدل ما يتمدد لآخر الشاشة — بيفضل في النص أفقيًا. */
  body.pwa .pwa-app {
    padding-inline-end: var(--ksh-sidebar-w);
  }

  body.pwa .scroll {
    max-width: var(--ksh-content-max);
    margin: 0 auto;
  }

  /* الكارت/الإجمالي العائم (سلة نقطة البيع) يتجنب العمود الجانبي، وبياخد
     نفس أقصى عرض للمحتوى بدل ما يتمدد تحت العمود مباشرة. */
  body.pwa .cart-dock,
  body.pwa .total-dock {
    right: calc(var(--ksh-sidebar-w) + 22px);
    left: max(22px, calc(50% - var(--ksh-content-max) / 2));
    max-width: var(--ksh-content-max);
    margin-inline: auto;
  }

  /* شبكة المنتجات: عمودين ثابتين كانوا مناسبين لعرض موبايل بس — على عرض
     الديسكتوب المتاح (حتى بعد الحصر بـ--ksh-content-max) بيتسع لعواميد
     أكتر براحة. */
  body.pwa .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ============================================================
   شاشة تسجيل الدخول لعرض الديسكتوب — تصميم منفصل تمامًا عن نسخة الموبايل
   (مش مجرد إعادة ترتيب CSS)، بيتفعّل بس لما JS يقرر إن العرض ديسكتوب
   (isDesktopWidth() في app.js) ويرجّع بنية HTML مختلفة. نفس الـid بتاعة كل
   حقل (login-phone/login-pass/login-form) محافَظ عليها بالظبط عشان نفس
   منطق doLogin()/كشف الـautofill يشتغل من غير أي تعديل.

   ملاحظة RTL: الصفحة كلها dir="rtl"، فترتيب flex الطبيعي كان هيحط أول عنصر
   (لوحة الهوية) على اليمين. الشكل المطلوب (هوية شمال، فورم يمين) محتاج
   ترتيب LTR على مستوى الحاوية بس، مع rtl تاني جوه كل لوحة عشان النصوص
   العربية تفضل تتقرأ صح. */
.ksh-desktop-login {
  display: flex;
  direction: ltr;
  padding: 0 !important;
  height: 100vh;
  overflow: hidden;
}

.ksh-desktop-login__brand {
  flex: 0 0 42%;
  min-width: 380px;
  max-width: 560px;
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--midnight), var(--navy) 55%, var(--blue) 130%);
}

.ksh-desktop-login__brand::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(520px 420px at 15% 10%, rgba(47, 123, 255, 0.35), transparent 60%),
    radial-gradient(480px 380px at 90% 90%, rgba(25, 211, 232, 0.18), transparent 60%);
}

.ksh-desktop-login__brand-inner {
  position: relative;
  z-index: 1;
  max-width: 420px;
  color: #fff;
}

.ksh-desktop-login__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}

.ksh-desktop-login__logo img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.ksh-desktop-login__logo span {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
}

.ksh-desktop-login__brand-inner h1 {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 14px;
}

.ksh-desktop-login__brand-inner p {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 36px;
}

.ksh-desktop-login__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ksh-desktop-login__features div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ksh-desktop-login__feature-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
}

.ksh-desktop-login__feature-icon svg {
  width: 16px;
  height: 16px;
}

.ksh-desktop-login__form-panel {
  flex: 1;
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow-y: auto;
  background: #f6f9ff;
}

.ksh-desktop-login__form-card {
  width: 100%;
  max-width: 380px;
}

.ksh-desktop-login__mark {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(13, 43, 69, 0.12);
}

.ksh-desktop-login__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksh-desktop-login__form-card h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
}

.ksh-desktop-login__form-card > p {
  margin: 0 0 28px;
  font-size: 13px;
  color: var(--muted);
}

.ksh-desktop-login__version {
  margin-top: 28px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.about-scroll-container {
  padding: 0 !important;
  background-color: #f8fbff;
}

/* About App Screen - Premium Design */
.about-screen {
  padding: 0 0 40px;
  min-height: 100vh;
  background-image: 
    radial-gradient(circle at -10% -10%, rgba(30, 77, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 110% 0%, rgba(25, 211, 232, 0.1) 0%, transparent 40%);
}

.about-header {
  text-align: center;
  padding: 10px 0 0;
  position: relative;
}

.about-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px 24px 30px;
  gap: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%);
}

.about-hero-text {
  text-align: right;
  flex: 1;
}

.about-logo-main {
  width: 110px;
  height: 110px;
  border-radius: 30px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 25px 50px rgba(30, 77, 255, 0.15);
  padding: 15px;
  flex: 0 0 110px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.8);
}

.about-logo-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-app-name {
  font-size: 32px;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 4px;
}

.about-app-tagline {
  font-size: 13px;
  font-weight: 800;
  color: #1e4dff;
  margin-bottom: 12px;
}

.about-app-desc {
  font-size: 11px;
  color: #70809a;
  line-height: 1.7;
  margin: 0;
  max-width: 240px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 16px 30px;
}

.about-card {
  padding: 16px 4px;
  border-radius: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.about-card-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: rgba(30, 77, 255, 0.08);
  border-radius: 12px;
}

.about-card label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}

.about-card span {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #70809a;
  line-height: 1.3;
}

.about-company-box {
  background: linear-gradient(135deg, #0b1a30 0%, #1a365d 100%);
  border-radius: 32px;
  padding: 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 0 16px 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 20px 40px rgba(11, 26, 48, 0.3);
}

.about-company-box::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
  pointer-events: none;
}

.about-company-logo {
  flex: 0 0 90px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.about-company-logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.about-company-divider {
  width: 1px;
  height: 70px;
  background: rgba(255, 255, 255, 0.15);
  flex: 0 0 1px;
}

.about-company-content {
  flex: 1;
  position: relative;
  z-index: 2;
}

.about-company-content h3 {
  font-size: 17px;
  font-weight: 900;
  margin: 0 0 8px;
  text-align: right;
}

.about-company-content p {
  font-size: 11px;
  line-height: 1.6;
  opacity: 0.8;
  text-align: right;
  margin: 0;
}

.about-section-label {
  font-size: 18px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 16px;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.03);
  border: 1px solid rgba(255,255,255,0.8);
  gap: 16px;
  transition: transform 0.2s ease;
}

.contact-item:active {
  transform: scale(0.98);
}

.contact-info {
  text-align: right;
  flex: 1;
}

.contact-info label {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 2px;
}

.contact-info span {
  font-size: 12px;
  color: #1e4dff;
  font-weight: 700;
}

.contact-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(30, 77, 255, 0.2);
}

.contact-icon.web { background: #1e4dff; }
.contact-icon.email { background: #1e4dff; }
.contact-icon.phone { background: #1e4dff; }
.contact-icon.whatsapp { 
  background: #25d366; 
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.social-container {
  text-align: center;
  margin-top: 30px;
}

.social-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.social-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #fff;
  color: var(--blue);
  box-shadow: 0 6px 15px rgba(0,0,0,0.05);
  border: 1px solid rgba(255,255,255,1);
}

.about-footer {
  text-align: center;
  margin-top: 40px;
  color: #a0aec0;
  font-size: 12px;
  font-weight: 700;
}

/* ============================================================
   Kashiery Luxury Financial & Expense Management Styles
   ============================================================ */
.pnl-hero-card {
  background: linear-gradient(135deg, #0b1228 0%, #1e3a8a 50%, #1e4dff 100%);
  border-radius: 24px;
  padding: 22px;
  color: #fff;
  box-shadow: 0 14px 35px rgba(30, 77, 255, 0.28);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

.pnl-hero-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.pnl-equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 14px 10px;
  margin-top: 14px;
  text-align: center;
  overflow: hidden;
}

.pnl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.pnl-item span {
  font-size: 10px;
  font-weight: 800;
  opacity: 0.75;
  margin-bottom: 2px;
}

.pnl-item strong {
  font-size: 14px;
  font-weight: 1000;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pnl-operator {
  font-size: 16px;
  font-weight: 1000;
  color: rgba(255, 255, 255, 0.6);
}

.pnl-item.profit-positive strong { color: #34d399; }
.pnl-item.profit-negative strong { color: #f87171; }

.expense-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--mist, #e2e8f0);
  border-radius: 16px;
  padding: 8px 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.expense-search-bar input {
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  width: 100%;
}

.expense-date-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.expense-date-filter input[type="date"] {
  border: 1.5px solid var(--mist, #e2e8f0);
  border-radius: 12px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  background: #fff;
  outline: none;
  flex: 1;
}

.budget-progress-track {
  height: 6px;
  border-radius: 99px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 6px;
}

.budget-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

.modal-glass-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 40, 0.65);
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-bottom-sheet {
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  padding: 24px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  direction: rtl;
}

.modal-drag-handle {
  width: 42px;
  height: 4.5px;
  background: #cbd5e1;
  border-radius: 99px;
  margin: 0 auto 18px;
}

.whatsapp-share-btn {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 14px;
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  width: 100%;
  font-family: inherit;
}

.ksh-receipt-choice {
  height: 108px;
  border-radius: 20px;
  border: 1.5px solid #eef1f6;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ksh-receipt-choice:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.ksh-receipt-badge {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rb-border, #cfe0ff);
  background: var(--rb-bg, linear-gradient(135deg, #eef4ff, #dbe8ff));
  color: var(--rb-color, #1e4dff);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.ksh-receipt-choice-label {
  font-weight: 900;
  font-size: 12.5px;
  color: var(--navy);
}