/* ════════════════════════════════════════════════════════════
   CosmoKundli — Design System Tokens
   Single source of truth for all visual properties.
   ════════════════════════════════════════════════════════════ */
 
:root {
  /* ── Brand Colors ── */
  --color-orange: #e87800;
  --color-red: #EF4444;
  --color-red-dark: #DD2B1C;
  --color-red-bright: #DC2E27;
  --color-yellow: #F59E0B;
  --color-blue: #437FD7;
  --color-blue-dark: #2652A4;
  --color-green: #10B981;
  --color-purple: #6C3CE1;
 
  /* ── Text Colors ── */
  --color-text: #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.5);
  --color-text-dim: rgba(255, 255, 255, 0.35);
  --color-text-secondary: #C6C5D4;    /* used 13× as muted label text */
  --color-text-tertiary: #DFE2EB;     /* used 9× as light label text */
  --color-text-table: #E2E5EB;        /* used 5× in table cells */
  --color-text-inactive: #9d9b9b;     /* used 3× for inactive items */
  --color-link-blue: #87BEFF;         /* used 3× for links/highlights */
 
  /* ── Planet Colors (solid) ── */
  --planet-sun: #E85D2A;
  --planet-moon: #b4effc;
  --planet-mars: #ff2222;
  --planet-mercury: #10B981;
  --planet-jupiter: #F59E0B;
  --planet-venus: #EC4899;
  --planet-saturn: #6C63FF;
  --planet-rahu: #7A7F8C;
  --planet-ketu: #A5415B;
  --planet-ascendant: #D9B38C;

  /* ── Planet Colors (secondary) ── */
  --planet-sun-sec: #FFD3BF;
  --planet-moon-sec: #F3FCFF;
  --planet-mars-sec: #FFD1D1;
  --planet-mercury-sec: #D8FFF1;
  --planet-jupiter-sec: #FFEEC6;
  --planet-venus-sec: #FFD8EB;
  --planet-saturn-sec: #E0DEFF;
  --planet-rahu-sec: #E2E4E8;
  --planet-ketu-sec: #E9C9D2;
  --planet-ascendant-sec: #FFF6EE;

  /* ── Planet Gradients ───────────────────────────── */
  --planet-grad-sun: linear-gradient(0deg, #FFD3BF 0%, #F5A57E 25%, #E85D2A 100%);
  --planet-grad-moon: linear-gradient(0deg, #F3FCFF 0%, #D5F7FD 25%, #B4EFFC 100%);
  --planet-grad-mars: linear-gradient(0deg, #FFD1D1 0%, #FF8A8A 25%, #FF3333 100%);
  --planet-grad-mercury: linear-gradient(0deg, #D8FFF1 0%, #74E2B7 25%, #10B981 100%);
  --planet-grad-jupiter: linear-gradient(0deg, #FFEEC6 0%, #FFD063 25%, #F59E0B 100%);
  --planet-grad-venus: linear-gradient(0deg, #FFD8EB 0%, #F58ABC 25%, #EC4899 100%);
  --planet-grad-saturn: linear-gradient(0deg, #E0DEFF 0%, #A79FFF 25%, #6C63FF 100%);
  --planet-grad-rahu: linear-gradient(0deg, #E2E4E8 0%, #B2B7C0 25%, #7A7F8C 100%);
  --planet-grad-ketu: linear-gradient(0deg, #E9C9D2 0%, #CC8095 25%, #A5415B 100%);
  --planet-grad-ascendant: linear-gradient(0deg, #FFF6EE 0%, #EBC9AA 25%, #D9B38C 100%);
 
  /* ── Glass Surface Recipe ── */
  /* --glass-bg: rgba(255, 255, 255, 0.02); */
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-shadow: inset 0 4px 6px var(--color-blue-dark), inset 0 -2px 4px var(--color-blue-dark);
  --glass-blur: blur(3px);

  /* ── Glass Morphism (Liquid Glass) ── */
  --gm-bg: rgba(255, 255, 255, 0.03);
  --gm-highlight: rgba(255, 255, 255, 0.3);
  --gm-blur: 4px;
  --gm-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.2);
  --gm-filter: url(#gm-distort);
 
  /* ── Spacing (4px base scale) ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 10px;      /* standard gap between cards/sections */
  --space-lg: 16px;
  --space-xl: 24px;
 
  /* ── Layout ── */
  --card-gap: 10px;       /* gap between cards/sections */
  --card-padding: 10px;   /* padding inside cards */
  --card-radius: 14px;    /* border-radius for cards */
  --control-radius: 22px; /* border-radius for buttons */
  --pill-radius: 32px;    /* border-radius for pills */
  --standard-radius: 10px; /* border-radius for inputs/selects/graphs */
  --standard-border: 2px solid rgba(255, 255, 255, 1);
  --standard-border-muted: 2px solid rgba(255, 255, 255, 0.5);
 
  /* ── Typography ── */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'Manrope', sans-serif;
  --font-display: 'Lexend Giga', sans-serif;
  --font-mono: 'Courier New', monospace;
 
  /* Legacy font aliases (old pages reference these) */
  --font-display-legacy: 'Open Sans', 'Segoe UI', sans-serif;
 
  --fs-title-desktop: 20px;
  --fs-sub-title-desktop: 16px;
  --fs-body-desktop: 14px;
  --fs-small-desktop: 10px;

  --fs-title: 18px;
  --fs-sub-title: 14px;
  --fs-body: 12px;
  --fs-small: 10px;
 
  /* ── Shared Gradients ── */
  --gradient-cta: var(--gradient-cta);
  --gradient-avatar: linear-gradient(147.77deg, #EB4B36 19.03%, #F56720 82.62%);
  --gradient-badge-purple: var(--gradient-badge-purple);
 
  /* ── Legacy Aliases (old var names still used in CSS) ── */
  --color-accent-red: var(--color-red-dark);
  --color-accent-blue: var(--color-blue-dark);
 
    /* ── Section Heading (icon + title inside cards) ── */
  --card-heading-font-size: var(--fs-title);
  --card-heading-font-size-desktop: var(--fs-title-desktop);
  --card-heading-icon-size: 25px;
  --card-heading-icon-size-desktop: 30px;
  --card-heading-icon-font: calc(var(--card-heading-icon-size) - 5px);
  --card-heading-icon-font-desktop: calc(var(--card-heading-icon-size-desktop) - 5px);
  --card-heading-icon-radius: 6px;
  --card-heading-icon-bg: rgba(240, 126, 34, 0.15);
 
  /* ── Scrollbar ── */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
 
*,
*::before,
*::after {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  scrollbar-gutter: stable;
 
  /* Background image: place "Cosmo guru software bg image 1.png" next to
     this file and rename to bg-image.png (Windows paths can't be used
     directly in browser CSS). */
  background-image: url('Cosmo guru software bg image 1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #0a2a5e;
}

/* Target Webkit (Chrome, Safari, Edge) and standard browsers */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input::placeholder,
select::placeholder,
input:autofill,
input:autofill:hover,
input:autofill:focus {

  transition: background-color 180000000s ease-in-out 0s;
  
  -webkit-text-fill-color: var(--color-text-muted) !important;

  caret-color: #ffffff !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}


/* ═══════════════════════════════════════════════════════════
   Glass Morphism — 3-layer liquid glass system
   Add .gm-container to any glass surface, then place
   .gm-refract + .gm-tint + .gm-specular + .gm-content inside.
   ═══════════════════════════════════════════════════════════ */

.gm-container {
  position: relative;
  border-radius: inherit;
  background: var(--gm-bg);
  box-shadow:
    inset -0.5px -1px 0 var(--gm-highlight),
    inset 0 0 5px var(--gm-highlight);
  /* pointer-events: none; */
  backdrop-filter: blur(var(--gm-blur));
}

/* .gm-refract {
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(var(--gm-blur));
  -webkit-backdrop-filter: blur(var(--gm-blur));
  isolation: isolate;
  border-radius: inherit;
} */

.gm-refract, .gm-tint, .gm-specular {
  display: none;
}

/* .gm-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gm-bg);
  border-radius: inherit;
}

.gm-specular {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow:
    inset -0.5px -1px 0 var(--gm-highlight),
    inset 0 0 5px var(--gm-highlight);
  pointer-events: none;
  backdrop-filter: blur(var(--gm-blur));
  -webkit-backdrop-filter: blur(var(--gm-blur));
} */

/* .gm-container > *:not(.gm-refract):not(.gm-tint):not(.gm-specular) {
  position: relative;
  z-index: 3;
} */
 
/* body:not(.ck-layout-loaded) .app-layout {
  opacity: 0;
}
body.ck-layout-loaded .app-layout {
  opacity: 1;
  transition: opacity 0.15s ease;
} */

/* ═══════════════════════════════════════════════════════════
   Shared Component Classes
   Single source of truth for cards, pills, and controls.
   Add these class names in HTML alongside page-specific classes.
   ═══════════════════════════════════════════════════════════ */
 
/* ── Card: glass container for content sections ── */
.ck-card {
  /* box-shadow: var(--gm-shadow); */
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}

.ck-input {
  /* box-shadow: var(--gm-shadow); */
  border-radius: var(--standard-radius);
  padding: var(--card-padding);
}

.ck-input input,
.ck-input select {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: var(--fs-body);
  font-family: var(--font-label);
  font-weight: 500;
}

/* ── Pill: small glass indicator / stat chip ── */
.ck-pill {
  /* box-shadow: var(--gm-shadow); */
  border-radius: var(--pill-radius);
  padding: 5px 4px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-family: var(--font-display);
}

.ck-icon {
  width: var(--card-heading-icon-size);
  height: var(--card-heading-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: var(--glass-shadow);
  border: none;
  border-radius: var(--card-heading-icon-radius);
  color: var(--color-text);
  font-size: var(--card-heading-icon-font);
  flex-shrink: 0;
}
 
/* ── Control: outlined button / input ── */
.ck-control {
  background: transparent;
  border: 1px solid rgba(240, 126, 34, 0.4);
  border-radius: var(--control-radius);
  color: var(--color-text);
}

.ck-btn--hero {
  background: rgba(240, 126, 34, 0.20);
  border: 1px solid rgba(240, 126, 34, 0.3);
  border-radius: var(--standard-radius);
  padding: 10px 15px;
  color: var(--color-orange);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sub-title);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* box-shadow: inset -0.5px -1px 0 rgba(240, 126, 34, 0.2),
              inset 0 0 5px rgba(240, 126, 34, 0.1); */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(3px);
}

.ck-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--standard-radius);
  padding: 10px 16px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  backdrop-filter: var(--gm-blur);
  -webkit-backdrop-filter: var(--gm-blur);
}

.ck-btn button,
.ck-btn--hero button {
  background: none;
  border: none;
  display: flex;
  gap: var(--card-gap);
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  font-size: var(--fs-sub-title);
}

.ck-btn button {
  color: var(--color-text);
}

.ck-btn--hero button {
  color: var(--color-orange);
}
 
/* ── Section Heading: icon + title row inside cards ── */
.ck-heading {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  margin-bottom: var(--card-gap);
}
 
.ck-heading-icon {
  width: var(--card-heading-icon-size);
  height: var(--card-heading-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: var(--card-heading-icon-bg); */
  /* box-shadow: var(--glass-shadow); */
  border: none;
  border-radius: var(--card-heading-icon-radius);
  color: var(--color-text);
  font-size: calc(var(--card-heading-icon-size) - 10px);
  flex-shrink: 0;
}

.ck-heading-icon svg,
.ck-heading-icon img,
.ck-heading-icon i {
  height: 100%;
  width: 100%;
}

.ck-heading-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ck-heading-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--card-heading-font-size);
  line-height: 24px;
  color: var(--color-text);
}

.grid-pos {
  background-image:
    /* 50% - Thick Red */
    /* linear-gradient(
      to bottom,
      transparent calc(50% - 1.5px),
      rgba(255, 70, 70, 1) calc(50% - 1.5px),
      rgba(255, 70, 70, 1) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ), */

    /* 45% - Medium Red */
    linear-gradient(
      to bottom,
      transparent calc(45% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(45% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(45% + 0.5px),
      transparent calc(45% + 0.5px)
    ),

    /* 55% - Medium Red */
    linear-gradient(
      to bottom,
      transparent calc(55% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(55% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(55% + 0.5px),
      transparent calc(55% + 0.5px)
    ),

    /* 35% - Thin Blue */
    linear-gradient(
      to bottom,
      transparent calc(35% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(35% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(35% + 0.5px),
      transparent calc(35% + 0.5px)
    ),

    /* 65% - Thin Blue */
    linear-gradient(
      to bottom,
      transparent calc(65% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(65% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(65% + 0.5px),
      transparent calc(65% + 0.5px)
    ),

    /* 85% - Thin Blue */
    linear-gradient(
      to bottom,
      transparent calc(85% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(85% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(85% + 0.5px),
      transparent calc(15% + 0.5px)
    ),
    /* 15% - Thin Blue */
    linear-gradient(
      to bottom,
      transparent calc(15% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(15% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(15% + 0.5px),
      transparent calc(15% + 0.5px)
    );
  background-size: 100% 100%;
  border-bottom: var(--standard-border);
  border-radius: var(--standard-radius);
}

.grid-bi {
  background-image: 
    /* 0% Center Line - Thick Red (Uncomment if needed) */
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.5px),
      rgb(155, 155, 155) calc(50% - 0.5px),
      rgb(155, 155, 155) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ),

    /* -55% Line - Medium Red (2px) */
    /* linear-gradient(
      to bottom,
      transparent calc(22.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(22.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(22.5% + 0.5px),
      transparent calc(22.5% + 0.5px)
    ), */

    /* +55% Line - Medium Red (2px) */
    /* linear-gradient(
      to bottom,
      transparent calc(77.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(77.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(77.5% + 0.5px),
      transparent calc(77.5% + 0.5px)
    ), */

    /* -40% Line - Medium Red (2px) */
    linear-gradient(
      to bottom,
      transparent calc(70% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(70% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(70% + 0.5px),
      transparent calc(70% + 0.5px)
    ),

    /* +40% Line - Medium Red (2px) */
    linear-gradient(
      to bottom,
      transparent calc(30% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(30% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(30% + 0.5px),
      transparent calc(30% + 0.5px)
    ),

    /* -65% Line - Thin Blue (1px) */
    linear-gradient(
      to bottom,
      transparent calc(17.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(17.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(17.5% + 0.5px),
      transparent calc(17.5% + 0.5px)
    ),

    /* +65% Line - Thin Blue (1px) */
    linear-gradient(
      to bottom,
      transparent calc(82.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(82.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(82.5% + 0.5px),
      transparent calc(82.5% + 0.5px)
    ),

    /* -35% Line - Thin Blue (1px) */
    /* linear-gradient(
      to bottom,
      transparent calc(32.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(32.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(32.5% + 0.5px),
      transparent calc(32.5% + 0.5px)
    ), */

    /* +35% Line - Thin Blue (1px) */
    /* linear-gradient(
      to bottom,
      transparent calc(67.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(67.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(67.5% + 0.5px),
      transparent calc(67.5% + 0.5px)
    ), */

    /* -85% Line - Faint Thin Blue (1px) */
    linear-gradient(
      to bottom,
      transparent calc(7.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(7.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(7.5% + 0.5px),
      transparent calc(7.5% + 0.5px)
    ),

    /* +85% Line - Faint Thin Blue (1px) */
    linear-gradient(
      to bottom,
      transparent calc(92.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(92.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(92.5% + 0.5px),
      transparent calc(92.5% + 0.5px)
    ),

    /* -15% Line - Faint Thin Blue (1px) */
    linear-gradient(
      to bottom,
      transparent calc(42.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(42.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(42.5% + 0.5px),
      transparent calc(42.5% + 0.5px)
    ),

    /* +15% Line - Faint Thin Blue (1px) */
    linear-gradient(
      to bottom,
      transparent calc(57.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(57.5% - 0.5px),
      rgba(104, 157, 255, 0.5) calc(57.5% + 0.5px),
      transparent calc(57.5% + 0.5px)
    );
  background-size: 100% 100%;
  border-bottom: var(--standard-border);
  border-radius: var(--standard-radius);
}
 
.sidebar-scroll {
  overflow-y: auto;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
 
@media (min-width: 992px) {
  .ck-heading-icon {
    width: var(--card-heading-icon-size-desktop);
    height: var(--card-heading-icon-size-desktop);
    font-size: calc(var(--card-heading-icon-size-desktop) - 10px);
  }
 
  .ck-heading-title {
    font-size: var(--card-heading-font-size-desktop);
  }

  .ck-input input,
  .ck-input select {
    font-size: var(--fs-body-desktop);
  }

  .ck-btn {
    padding: var(--card-padding);
  }

  .ck-btn button,
  .ck-btn--hero button {
    font-size: var(--fs-sub-title-desktop);
  }
}

/* ═══════════════════════════════════════
   Login Page (lg-)
   C1 — Minimal underline, icon square
   ═══════════════════════════════════════ */

/* ── Layout ── */
.page-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 20px);
  padding: 20px;
}

/* ── Card ── */
.lg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
  padding: 48px 36px 40px;
  gap: 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

/* ── Top Accent Line ── */
.lg-accent {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--color-orange), transparent);
  border-radius: 2px;
}

/* ── Radial glow behind card (subtle) ── */
.lg-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 0%, rgba(240, 126, 34, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Logo Title ── */
.lg-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(240, 126, 34, 0.4));
  position: relative;
  z-index: 1;
}

/* ── Title Group ── */
.lg-title-group {
  text-align: center;
  position: relative;
  z-index: 1;
}

.lg-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0 0 6px;
}

.lg-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

/* ── Input Fields ── */
.lg-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.lg-input-wrap {
  position: relative;
}

.lg-input-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.2);
  font-size: 18px;
}

.lg-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  padding: 14px 40px 14px 32px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  outline: none;
  transition: border-color 0.3s;
}

.lg-input::placeholder {
  color: var(--color-text-muted);
}

.lg-input:focus {
  border-color: rgba(240, 126, 34, 0.5);
}

/* ── Password Toggle ── */
.lg-password-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  padding: 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
}

.lg-password-toggle:hover {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Remember / Forgot Row ── */
.lg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

.lg-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.lg-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.lg-checkbox:checked {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}

.lg-checkbox:checked::after {
  content: '✓';
  display: block;
  color: #fff;
  font-size: 11px;
  text-align: center;
  line-height: 16px;
}

.lg-checkbox:focus {
  box-shadow: 0 0 0 3px rgba(240, 126, 34, 0.2);
}

.lg-checkbox-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}

/* ── Forgot Link ── */
.lg-link {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-dim);
  text-decoration: none;
}

.lg-link:hover {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Login Button ── */
.lg-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-orange), #EB4B36);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
  position: relative;
  z-index: 1;
}

.lg-btn:hover {
  box-shadow: 0 4px 20px rgba(240, 126, 34, 0.3);
}

.lg-btn:active {
  transform: scale(0.99);
}

/* ── Divider ── */
.lg-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* ── Sign Up ── */
.lg-signup {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
  position: relative;
  z-index: 1;
}

.lg-signup a {
  color: var(--color-orange);
  font-weight: 600;
  text-decoration: none;
}

.lg-signup a:hover {
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .lg-card {
    padding: 36px 20px 28px;
    border-radius: 22px;
    max-width: 100%;
  }

  .lg-logo {
    height: 48px;
  }

  .lg-title {
    font-size: 16px;
  }
}
 
/* ════════════════════════════════════════════════════════════
   New Client Page
   Mobile: two separate glass cards (Personal / Birth Details)
   Desktop: one unified glass card with internal divider
   ════════════════════════════════════════════════════════════ */
 
/* ── Mobile Top Header Bar ── */
.client-header {
  background: #0C1323;
  box-shadow: 0 4px 17px rgba(255, 255, 255, 0.25);
  border-radius: 0 0 var(--control-radius) var(--control-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  position: relative;
  z-index: 2;
}

.client-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--card-gap) + 10px);
}
 
.icon-btn {
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
}
 
.mobile-profile-trigger {
  width: 40px;
  height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
 
.mobile-profile-dropdown .ck-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  padding: 6px;
  background: rgba(15, 23, 60, 0.97);
  border: var(--glass-border);
  border-radius: var(--card-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 1000;
}
 
.mobile-profile-dropdown.open .ck-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
 
.mobile-profile-dropdown .ck-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}
 
.mobile-profile-dropdown .ck-dropdown-item i {
  width: 20px;
  font-size: 16px;
  text-align: center;
  color: var(--color-orange);
}
 
.mobile-profile-dropdown .ck-dropdown-divider {
  height: 1px;
  margin: 4px 8px;
  background: transparent;
}
 
.mobile-profile-dropdown .ck-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 14px 12px;
}
 
.mobile-profile-dropdown .ck-profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border: var(--glass-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
}
 
.mobile-profile-dropdown .ck-profile-name {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
}
 
.mobile-profile-dropdown .ck-profile-email,
.mobile-profile-dropdown .ck-dropdown-item--logout {
  color: var(--color-text-muted);
}
 
.client-header .header-info {
  flex: 1;
  min-width: 0;
}
 
/* ── Mobile Profile Language Selector ── */
.ck-profile-lang {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  padding: 10px 14px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
}
 
.ck-profile-lang i {
  width: 20px;
  color: var(--color-orange);
  font-size: 16px;
  text-align: center;
}
 
.ck-profile-lang-label {
  flex: 1;
}
 
.ck-lang-options {
  display: flex;
  gap: 4px;
}
 
.ck-lang-btn {
  padding: 4px 10px;
  border: var(--glass-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
 
.ck-lang-btn--active {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-text);
}
 
.client-header .client-name {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.client-header .client-meta {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-text);
  white-space: nowrap;
}
 
/* ── App Layout wrapper (mobile default; overridden at >=992px below) ── */
.app-layout {
  display: block;
}

/* ── Field labels & underline inputs ── */
.client-field-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 21px;
  color: var(--color-text);
  margin-bottom: 8px;
}
 
.client-field-label .required {
  color: var(--color-red);
}

/* ── Gender Toggle ── */
.client-gender-group {
  display: flex;
  gap: 8px;
}
 
.client-gender-btn {
  flex: 1;
  display: flex;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background 0.2s;
}

.client-gender-btn span {
  font-size: var(--fs-body);
}

.client-gender-btn input[type="radio"] {
  display: none;
}

.client-gender-btn:has(input:checked) {
  box-shadow: inset 0 2px 4px var(--color-orange), inset 0 -2px 4px var(--color-orange);
  color: var(--color-text);
}

.nc-btn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
  gap: var(--card-gap);
  margin-top: var(--card-gap);
  height: 50px;
}

@media (min-width: 992px) {
  
  .client-card {
    padding: 20px;
  }

  .client-gender-btn span{
    font-size: var(--fs-body-desktop);
  }
}

/* ════════════════════════════════════════════════════════════
   Desktop Navbar + Sidebar (≥992px only)
   Values from Figma "New Client Form Page" desktop export:
   Rectangle 121 (navbar), Rectangle 125 (sidebar), pill recipe
   ════════════════════════════════════════════════════════════ */
 
.top-navbar,
.app-sidebar {
  display: none;
}
 
@media (min-width: 992px) {
  .top-navbar {
    display: flex;
    align-items: center;
    gap: var(--card-gap);
    position: relative;
    z-index: 10;
    border-radius: 0 0 14px 14px;
  }
 
  .navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    white-space: nowrap;
  }
 
  .navbar-logo {
    height: 50px;
    width: auto;
    object-fit: contain;
  }
 
  .navbar-brand small {
    display: block;
    font-size: 0.6rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin-top: -2px;
  }
 
  /* Pill recipe: rgba(255,255,255,0.01) + 0.5px solid rgba(255,255,255,0.25)
     + inset shadow var(--color-blue-dark) + radius 10px */
 
  .navbar-search {
    flex: 1;
    max-width: 460px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
  }
 
  .navbar-search .search-icon {
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    flex-shrink: 0;
  }
 
  .navbar-pill-input {
    flex: 1;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body) !important;
  }

  .navbar-pill-input:focus {
    outline: none;
  }
 
  .navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }
 
  /* Hide Location, Screen Customization, Existing Clients buttons */
  .nav-pill:has(.bi-geo-alt),
  .nav-pill:has(.bi-gear),
  .nav-pill:has(.bi-people) {
    display: none;
  }
 
  .nav-pill {
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s;
  }
 
  .nav-pill:hover {
    background: rgba(255, 255, 255, 0.06);
  }
 
  .navbar-avatar {
    width: 52px;
    height: 52px;
    border-radius: 26px;
    background: var(--color-yellow);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    cursor: pointer;
  }
 
  /* ── Navbar Dropdowns ── */
  .ck-dropdown {
    position: relative;
  }
 
  .ck-dropdown-chevron {
    font-size: 10px;
    transition: transform 0.2s;
  }
 
  .ck-dropdown.open .ck-dropdown-chevron {
    transform: rotate(180deg);
  }
 
  .ck-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: rgba(15, 23, 60, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 6px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  }
 
  .ck-dropdown.open .ck-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
 
  .ck-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    text-align: left;
    text-decoration: none;
  }
 
  .ck-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }
 
  .ck-dropdown-item--active {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }
 
  .ck-dropdown-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: var(--color-orange);
  }
 
  .ck-dropdown-item span {
    font-size: 18px;
  }
 
  .ck-dropdown-item--logout, 
  .ck-dropdown-item--logout i {
    color: var(--color-text-muted);
  }
 
  .ck-dropdown-divider {
    height: 1px;
    background: var(--color-text-dim);
    margin: 4px 8px;
  }
 
  /* Profile dropdown — wider */
  .ck-dropdown-menu--profile {
    min-width: 260px;
  }
 
  .ck-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 14px 12px;
    gap: 4px;
  }
 
  .ck-profile-avatar {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin-bottom: 6px;
  }
 
  .ck-profile-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
  }
 
  .ck-profile-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
  }
 
  /* ── Sidebar ── */
  .app-sidebar {
    display: block;
    width: 330px;
    flex-shrink: 0;
    background: var(--gm-bg);
    box-shadow:
      inset -0.5px -1px 0 var(--gm-highlight),
      inset 0 0 5px var(--gm-highlight);
    backdrop-filter: blur(var(--gm-blur));
    border-radius: var(--card-radius);
    margin: var(--card-gap) 0 var(--card-gap) var(--card-gap);
    padding: var(--card-padding) 0;
    align-self: stretch;
    position: sticky;
    top: 10px;
    max-height: calc(100vh - 20px);
  }
 
  .sidebar-link.active::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: var(--color-yellow);
    border-radius: 0 4px 4px 0;
  }
 
  /* ── Desktop sidebar collapse via navbar hamburger ── */
  .navbar-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.15s;
  }
  .navbar-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
  }
 
  .app-sidebar {
    position: sticky;
    transition: width 0.3s ease, min-width 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
  }
 
  /* Collapsed sidebar */
  .app-sidebar.collapsed {
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 10px 0;
    border-color: transparent;
    overflow: hidden;
  }
}
 
/* ── Shared sidebar item styles (both breakpoints) ── */
 
.sidebar-group {
  padding: 0 16px;
  margin-bottom: 8px;
}
 
.sidebar-group-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  cursor: pointer;
}
 
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s;
}

.sidebar-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
 
.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06);
}
 
.sidebar-link.active {
  position: relative;
}
 
@media (min-width: 992px) {
  /* ── Layout: sidebar + main content side by side ── */
  .app-layout {
    display: flex;
    align-items: flex-start;
  }
 
  .app-main {
    flex: 1;
    min-height: calc(100vh - 85px);
    container-type: inline-size;
  }
 
  /* Hide mobile header bar on desktop */
  .client-header {
    display: none;
  }
}
 
/* ── Mobile sidebar drawer (<992px) ── */
@media (max-width: 991.98px) {
  .app-sidebar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 200;
    background: rgba(10, 25, 60, 0.9);
    box-shadow: var(--gm-shadow);
    border-right: 0.5px solid rgba(255, 255, 255, 0.25);
    padding: 24px 0;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
 
  .app-sidebar.show,
  .app-sidebar.open {
    transform: translateX(0);
  }
 
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 190;
  }
 
  .sidebar-overlay.show,
  .sidebar-overlay.active {
    display: block;
  }
 
  .sidebar-link.active::before {
    display: none;
  }
 
  .sidebar-link.active {
    border-left: 3px solid var(--color-yellow);
  }
 
  /* Hide desktop collapse/expand buttons on mobile */
  .navbar-sidebar-toggle {
    display: none !important;
  }
}
 
/* ════════════════════════════════════════════════════════════
   Shared Client Info Bar (desktop only)
   Replaces per-page: db-, sps-, pch-, sbg-, ffr-, mlp-, tp-, gc-client-bar
   ════════════════════════════════════════════════════════════ */
.ck-client-bar {
  display: none;
}
 
@media (min-width: 992px) {
  .ck-client-bar {
    display: flex;
    align-items: center;
    gap: var(--card-gap);
  }
}
 
.ck-client-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-avatar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text);
  flex-shrink: 0;
}
 
.ck-client-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-text);
}
 
.ck-client-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
 
.ck-client-detail {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
 
.ck-client-detail i {
  font-size: 18px;
}
 
.ck-client-sep {
  color: rgba(255, 255, 255, 0.4);
}
 
/* ════════════════════════════════════════════════════════════
   Shared Desktop / Mobile Visibility
   Replaces per-page: *-desktop-only, *-mobile-only
   ════════════════════════════════════════════════════════════ */
.ck-desktop-only { display: none !important; }
.ck-mobile-only { display: block; }
 
@media (min-width: 992px) {
  .ck-desktop-only { display: flex !important; }
  .ck-mobile-only { display: none !important; }
}
 
/* ════════════════════════════════════════════════════════════
   Shared Page Wrapper
   ════════════════════════════════════════════════════════════ */

.ck-page {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: var(--card-gap);
  container-type: inline-size;
  min-width: 0; 
}

/* ════════════════════════════════════════════════════════════
   Collapsible Sidebar Groups
   ════════════════════════════════════════════════════════════ */
.sidebar-group-links {
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.25s ease;
}
 
.sidebar-group.collapsed .sidebar-group-links {
  max-height: 0;
}
 
.sidebar-group.collapsed .sidebar-group-title i {
  transform: rotate(-90deg);
  transition: transform 0.25s ease;
}
 
.sidebar-group-title i {
  transition: transform 0.25s ease;
}
 
/* ════════════════════════════════════════════════════════════
   All Clients Page
   Mobile-first: search bar + heading + stacked client cards + bottom CTA
   Desktop (≥992px): heading + top-right CTA + full-width client rows
   ════════════════════════════════════════════════════════════ */

.clients-page-content {
  padding: var(--card-padding);
  padding-bottom: 90px; /* clearance for floating mobile CTA */
  position: relative;
  z-index: 1;
  max-width: 1610px;
  margin: 0 auto;
}

/* ── Search bar (mobile) ── */

.clients-search {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  height: 40px;
}

.clients-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--color-text);
  width: auto;
}

.clients-search input::placeholder {
  color: var(--color-text-muted);
}

/* ── Heading row ── */
.clients-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clients-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: 26px;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.clients-total {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}

/* ── Desktop "Add New Client" button (hidden on mobile) ── */
.btn-add-client {
  display: none;
}

/* ── Mobile "Add New Client" button ── */
.btn-add-client-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: fixed;
  bottom: 20px;
  left: 16px;
  right: 16px;
  width: auto;
  height: 52px;
  border: none;
  border-radius: var(--card-radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  color: var(--color-text);
  z-index: 90;
}

.btn-add-client-mobile:hover {
  opacity: 0.92;
}

/* ── Client Table (ct-) ── */

/* Mobile: table collapsed into cards (base = mobile-first) */
.ct-table,
.ct-table tbody {
  display: block;
  width: 100%;
  border-spacing: 0 12px;
}

.ct-thead {
  display: none;
}

.ct-row {
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
}

.ct-row:has(.client-context-menu.open) {
  z-index: 100;
}

.ct-cell {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  white-space: normal;
  font-family: var(--font-display);
  font-size: var(--fs-body);
}

.ct-cell i {
  color: var(--color-text);
  font-size: 0.9rem;
  margin-right: 6px;
}

/* Mobile: client name row — full width with avatar */
.ct-cell--client {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  min-height: auto;
  margin-bottom: 4px;
  width: auto;
}

.ct-cell--client .client-avatar {
  margin-right: 0;
}

.ct-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Location & phone hidden on mobile */
/* .ct-cell--location {
  display: none;
} */

/* .ct-cell--phone {
  display: none;
} */

/* Force line break before dob to create second row of pairs */
.ct-cell--dob::before {
  content: "";
  display: block;
  height: 4px;
}

/* Actions cell — positioned top-right on mobile card */
.ct-cell--actions {
  display: block;
  position: absolute !important;
  top: 12px;
  right: 12px;
  width: auto;
  text-align: center;
}

/* ── Client Row Menu Button ── */
.client-row-menu {
  flex-shrink: 0;
  position: relative;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--space-sm);
  cursor: pointer;
  transition: background 0.15s;
  z-index: 1;
}

.client-row-menu:hover {
  background: rgba(255, 255, 255, 0.08);
}

.client-row-menu.open {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Client Avatar (shared) ── */
.client-avatar {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--gradient-avatar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 26px;
  color: var(--color-text);
}

/* ── Client Row Context Menu ── */
.client-context-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  background: rgba(15, 23, 60, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--card-radius);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  padding: 6px;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.client-context-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.client-context-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  padding: var(--card-padding) 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--space-sm);
  transition: background 0.15s;
  text-align: left;
  white-space: nowrap;
}

.client-context-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.client-context-item i {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.client-context-item--edit i {
  color: var(--color-text-muted);
}

.client-context-item--delete {
  color: var(--color-red);
}

.client-context-item--delete i {
  color: var(--color-red);
}

.client-context-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 6px;
}

/* ── Pagination ── */
.clients-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.pagination-info {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--color-text-muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 var(--card-padding);
  border: none;
  border-radius: var(--space-sm);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text);
}

.page-btn.active {
  background: var(--color-red);
  box-shadow: inset 0 2px 4px #FFFFFF, inset 0 -2px 4px #FFFFFF;
}

.page-btn:disabled {
  opacity: 0.35;
}

.page-arrow {
  font-size: 0.9rem;
}

.page-ellipsis {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 0 4px;
}

/* ════════════════════════════════════════════════════════════
   Desktop overrides (≥992px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .clients-page-content {
    padding: var(--card-padding) var(--space-lg);
    padding-bottom: var(--card-padding); /* no floating CTA on desktop */
  }

  .clients-search {
    max-width: none;
    height: 52px;
  }

  .clients-search input {
    font-size: 15px;
    font-weight: 400;
  }

  .clients-heading {
    font-size: var(--fs-title-desktop);
    flex-shrink: 0;
    flex: 1;
  }

  .clients-total {
    font-size: var(--fs-body-desktop);
    line-height: 21px;
    font-weight: 500;
  }

  .btn-add-client {
    display: flex;
  }

  .btn-add-client-mobile {
    display: none;
  }

  /* ── Table: restore proper table layout ── */
  .ct-table {
    display: table;
    table-layout: fixed;
  }

  .ct-table tbody {
    display: table-row-group;
  }

  .ct-row {
    display: table-row;
    margin-bottom: 0;
  }

  .ct-cell {
    display: table-cell;
    font-size: var(--fs-body-desktop);
    line-height: 24px;
    padding: 0 var(--card-padding);
    white-space: nowrap;
    vertical-align: middle;
  }

  /* First cell: left border + radius */
  .ct-cell:first-child {
    border-radius: var(--card-radius) 0 0 var(--card-radius);
    border-left: 1px solid var(--color-accent-blue);
    padding: 16px;
  }

  /* Last cell: right border + radius */
  .ct-cell:last-child {
    border-radius: 0 var(--card-radius) var(--card-radius) 0;
    border-right: 1px solid var(--color-accent-blue);
    padding: 16px;
  }

  .ct-cell--client {
    display: table-cell;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ct-cell--client .client-avatar {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 16px;
  }

  .ct-name {
    font-size: 20px;
    line-height: 26px;
    vertical-align: middle;
  }

  /* Truncate text-only columns */
  .ct-cell--phone,
  .ct-cell--gender,
  .ct-cell--dob,
  .ct-cell--location {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  /* Column widths — proportional */
  /* .ct-cell--client { width: 30%; } */
  .ct-cell--gender,
  .ct-cell--location {
    width: 15%;
  }
  .ct-cell--dob {
    width: 15%;
  }
  .ct-cell--actions  { width: 6%; }

  .ct-cell--location {
    display: table-cell;
  }

  .ct-cell--phone {
    display: table-cell;
    width: 20%;
  }

  /* Actions: reset from mobile absolute to table-cell flow */
  .ct-cell--actions {
    position: relative !important;
    top: auto;
    right: auto;
    width: 6%;
  }

  .ct-cell--dob::before {
    display: none; /* remove mobile line-break hack */
  }

  .client-avatar {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }

  .clients-pagination {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--card-gap);
  }

  .pagination-info {
    font-size: 15px;
  }

  .page-btn {
    min-width: 40px;
    height: 40px;
    font-size: 14px;
  }
}


/* ════════════════════════════════════════════════════════════
   Birth Kundli Page
   Mobile: stacked sections, single-column charts
   Desktop: sidebar layout, two-column content, 2x2 chart grid
   ════════════════════════════════════════════════════════════ */

/* ── Content layout ── */
.bk-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
.bk-col-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
/* ── Section cards ── */
.bk-section-card {
  overflow: hidden;
}

.bk-circle-chart-wrap {
  position: relative;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.bk-circle-frame {
  position: absolute;
  inset: 0;
}
.bk-circle-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ════════════════════════════════════════════════════════════
   Desktop overrides (>=992px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
   
  /* Two-column grid layout — chart left ~60%, shadbal+degree right ~40% */
  .bk-content {
    display: grid;
    align-items: stretch;
    height: calc(100vh - 40px);
    width: 100%;
  }
 
  .bk-col-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
 
  .bk-col-left > .bk-section-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
 
  .bk-col-left .bk-circle-chart-wrap {
    flex: 1;
    min-height: 0;
    width: 100%;
  }
 
  .bk-col-left .bk-chart-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }
 
  .bk-col-left {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }
}
 
/* ════════════════════════════════════════════════════════════
   Cosmo Kundli Page
   Mobile: stacked sections, single-column charts
   Desktop: sidebar layout, two-column content, 2x2 chart grid
   ════════════════════════════════════════════════════════════ */
  
/* ── Content layout ── */
.db-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
.db-col-left, .db-col-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
/* ── Section cards ── */
.db-section-card {
  overflow: hidden;
}

.db-circle-chart-wrap {
  position: relative;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.db-circle-frame {
  position: absolute;
  inset: 0;
}
.db-circle-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}
 
/* ── Kundli SVG chart ── */
.kundli-chart{
  position: relative;
  height: 100%;
  width: 100%;
}
 
.db-chart-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
 
.kundli-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  fill: rgba(255, 255, 255, 0.4);
  text-anchor: middle;
}
 
.kundli-planet {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  fill: var(--color-blue);
  text-anchor: middle;
}
 
/* ── Tables ── */
.db-table {
  width: 100%;
  border-collapse: collapse;
}
 
.db-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text);
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-text-table);
}
 
.db-table td {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 8px;
  line-height: 18px;
  color: var(--color-text);
  padding: 8px;
  border-bottom: 1px solid var(--color-text-table);
  vertical-align: middle;
}
 
.db-table tbody tr:last-child td {
  border-bottom: none;
}
 
/* Dasha table specifics */
.db-grah-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
 
/* Degree grid */
.db-deg-grid {
  margin-bottom: 0;
  border: 1px solid var(--color-text);
  border-radius: 4px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
 
.db-deg-row th,
.db-deg-row td {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text);
  padding: 2px 2px;
  border-right: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
}
 
.db-deg-row th:last-child,
.db-deg-row td:last-child {
  border-right: none;
}
 
.db-deg-row:last-child td {
  border-bottom: none;
}
 
.db-deg-row--head th {
  font-weight: 700;
  color: var(--color-link-blue);
}
 
/* Orange divider between degree grid and CB row */
.db-deg-divider {
  height: 1px;
  background: var(--color-orange);
  margin: 0;
}
 
/* CB % pills row */
.db-cb-row,
.db-cf-row {
  display: flex;
  gap: 4px;
}
 
.db-cb-pill,
.db-cf-pill {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 8px;
  color: var(--color-text);
  min-height: 24px;
}
 
.db-cb-pill:first-child,
.db-cf-pill:first-child {
  flex: 0 0 28px;
}
 
.db-cb-label, 
.db-cf-label {
  line-height: 10px;
}
 
/* Bar chart area with grid background */
.db-bars-area {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 10px;
}
 
.db-cosmobal-label, 
.db-cosmoflavor-label {
  flex: 0 0 28px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.db-bars-grid {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 160px;
  padding: 0;
  position: relative;
}
 
.db-bar {
  flex: 1;
  min-width: 0;
  border-radius: 6px 6px 0 0;
  position: relative;
  margin: 0 4px;
}
 
.db-bar-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text);
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
 
/* ── Charts grid (below dasha) ── */
.db-charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
 
/* ════════════════════════════════════════════════════════════
   Desktop overrides (>=992px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
   
  /* Two-column grid layout — chart left ~60%, shadbal+degree right ~40% */
  .db-content {
    display: grid;
    grid-template-columns: minmax(0,6fr) minmax(0,4fr);
    align-items: stretch;
    height: calc(100vh - 40px);
    width: 100%;
  }
 
  .db-col-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
 
  .db-col-left > .db-section-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
 
  .db-col-left .db-circle-chart-wrap {
    flex: 1;
    min-height: 0;
    width: 100%;
  }
 
  .db-col-left .db-chart-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }
 
  .db-col-left {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }
 
  .db-col-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
 
  /* Degree card — no grow, just natural height */
  .db-col-right > .db-degree-card {
    flex-shrink: 0;
  }
 
  /* Shadbal/CosmoBal/CosmoPrakruti cards — share remaining space equally */
  .db-col-right > .db-shadbal-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
 
  .db-shadbal-card .db-section-heading,
  .db-shadbal-card .db-cb-row,
  .db-shadbal-card .db-cf-row {
    flex-shrink: 0;
  }
 
  .db-shadbal-card .db-bars-area {
    flex: 1;
    min-height: 0;
    margin-top: 4px;
  }
 
  .db-shadbal-card .db-bars-grid {
    height: 100%;
  }
 
  /* Planet card (if uncommented later) */
  .db-planet-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
 
  .db-planet-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }
 
  /* Larger table fonts */
  .db-table th {
    font-size: 15px;
    padding: 12px 10px;
  }
 
  .db-table td {
    font-size: 14px;
    padding: 12px 10px;
  }
 
  /* Dasha table larger
  .db-dasha-table th,
  .db-dasha-table td {
    font-size: 32px;
    line-height: 39px;
    padding: 16px 12px;
  } */
 
  .db-dasha-table .db-grah-dot {
    width: 10px;
    height: 10px;
    margin-right: 12px;
  }
 
  .db-dasha-table th {
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: capitalize;
  }
 
  /* Charts 2-column grid */
  .db-charts-grid {
    grid-template-columns: 1fr 1fr;
  }
 
}
 
/* ════════════════════════════════════════════════════════════
   Star Power Sentiment Page
   Mobile-first: horizontal scroll cards + chart
   Desktop (≥992px): flex-fill cards, no scroll
   ════════════════════════════════════════════════════════════ */

.sps-page {
  gap: calc(var(--card-gap) + 5px);;
}

.sps-controls {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
}

.sps-time-picker-wrapper,
.sps-getDetails-btn-wrapper {
  flex: 1;
}

.sps-content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--card-gap) + 10px);
  min-width: 0;
}

/* ── Stat cards (horizontal scroll on mobile) ── */
.sps-stats {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sps-stats::-webkit-scrollbar {
  display: none;
}

.sps-stat-card {
  flex: 1;
  min-width: 160px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sps-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sps-stat-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
}

.sps-stat-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.sps-stat-icon.bg-purple { background: #F0EBFF; color: var(--color-purple); }
.sps-stat-icon.bg-green  { background: #D1FAE5; color: var(--color-green); }
.sps-stat-icon.bg-red    { background: #FEE2E2; color: var(--color-red); }
.sps-stat-icon.bg-amber  { background: #FEF3C7; color: var(--color-yellow); }

.sps-stat-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  margin-top: 6px;
}

.sps-stat-value.val-purple { color: #A689FF; }
.sps-stat-value.val-green  { color: var(--color-green); }
.sps-stat-value.val-red    { color: var(--color-red); }
.sps-stat-value.val-amber  { color: var(--color-yellow); }

.sps-stat-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: var(--color-text);
  margin-top: 4px;
}

.sps-desktop-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0px 20px 10px;
}

.sps-desktop-chart-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sps-chart-icon {
  width: 20px;
  height: 20px;
  background: #F0EBFF;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-purple);
  font-size: 10px;
}

.sps-desktop-chart-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.sps-desktop-chart-legend {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sps-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sps-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.sps-legend-dot.strong-dot {
  background: linear-gradient(180deg, #34D399 0%, var(--color-green) 100%);
}

.sps-legend-dot.weak-dot {
  background: linear-gradient(180deg, #FCA5A5 0%, var(--color-red) 100%);
}

.sps-legend-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 19px;
  color: var(--color-text);
}

.sps-chart-container {
  display: flex;
  height: 50vh;
}

.sps-chart-inner {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 0;
}

.sps-yaxis {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100% - 36px);
}

.sps-ylabel {
  position: absolute;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  text-align: center;
  line-height: 1;
}

.sps-chart-scroll {
  position: relative;
  width: calc(100% - 25px);
  left: 25px;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.sps-chart-body {
  position: relative;
  flex: 1;
  min-width: 1400px;
}

.sps-bars-area {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  left: 5px;
  width: calc(100% - 10px);
}

.sps-bar-col {
  flex: 1;
  position: relative;
  pointer-events: none;
}

.sps-bar {
  position: absolute;
  left: 0%;
  right: 0%;
  border-radius: 5px;
  min-height: 1px;
  cursor: pointer;
  transition: opacity 0.15s;
  pointer-events: auto; 
}

.sps-bar:hover {
  opacity: 0.8;
}

.sps-bar--pos {
  background: linear-gradient(0deg, #73f4c4, var(--color-green));
}

.sps-bar--neg {
  background: linear-gradient(0deg, var(--color-red), #f6b8b8);
}

.sps-bar-tip {
  position: absolute;
  bottom: calc(50% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 15, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 10;
  line-height: 1.4;
  text-align: center;
}

#spsBars:not(:has(.show)) .sps-bar:hover + .sps-bar-tip,
#spsBars:not(:has(.show)) .sps-bar-col:hover .sps-bar-tip {
  opacity: 1;
  visibility: visible;
}

.sps-bar-tip.show {
  opacity: 1;
  visibility: visible;
}

.sps-xaxis {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin-top: 5px;
  min-width: 1400px;
}

.sps-xlabel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.sps-xlabel-day {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
}

.sps-xlabel-dow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9px;
}

/* ── Weekly cards row ── */
.sps-weekly-row {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sps-weekly-row::-webkit-scrollbar {
  display: none;
}

.sps-dwk-card {
  flex: 1;
  min-width: 160px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.sps-dwk-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
}

.sps-dwk-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}

.sps-dwk-value.val-purple { color: #A689FF; }
.sps-dwk-value.val-green  { color: var(--color-green); }

.sps-dwk-dates {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: var(--color-text);
}

.sps-dwk-progress {
  width: 100%;
  height: 4px;
  background: #F1F3F6;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.sps-dwk-progress-fill {
  height: 100%;
  border-radius: 2px;
}

.sps-dwk-progress-fill.fill-amber { background: var(--color-yellow); }
.sps-dwk-progress-fill.fill-green { background: var(--color-green); }

/* ════════════════════════════════════════════════════════════
   Desktop overrides (≥992px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {

  /* Stat cards: fill width, no scroll */
  .sps-stats {
    overflow-x: visible;
  }

  .sps-chart-container {
    height: calc(100vh - 200px);
  }

  .sps-stat-card {
    min-width: unset;
  } 

  .sps-stat-label {
    font-size: 12px;
    line-height: 19px;
  }

  .sps-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
  }

  .sps-stat-value {
    font-size: 28px;
    line-height: 34px;
  }

  .sps-stat-sub {
    font-size: 12px;
    line-height: 19px;
  }
  
  .sps-chart-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .sps-desktop-chart-title {
    font-size: 15px;
    line-height: 24px;
  }
  
  .sps-chart-body {
    min-width: unset !important;
  }

  .sps-chart-scroll {
    overflow-x: visible;
  }

  .sps-xaxis {
    min-width: unset !important;
  }

  .sps-xlabel-day {
    font-size: 12px;
  }

  .sps-xlabel-dow {
    font-size: 10px;
  }

  /* Weekly cards: fill width, no scroll */
  .sps-weekly-row {
    overflow-x: visible;
  }

  .sps-dwk-card {
    min-width: unset;
  }

  .sps-dwk-label {
    font-size: 11px;
    line-height: 18px;
  }

  .sps-dwk-value {
    font-size: 22px;
    line-height: 35px;
  }

  .sps-dwk-dates {
    font-size: 11px;
    line-height: 18px;
  }
}
 
/* ════════════════════════════════════════════════════════════
   Melapak Page (New Client / Existing User)
   Prefix: mlp-
   Mobile-first; desktop overrides in single @media block
   ════════════════════════════════════════════════════════════ */
 
/* ── Tab toggle (mobile default) ── */
.mlp-tabs {
  display: flex;
  gap: var(--card-gap);
}
 
.mlp-tab {
  flex: 1;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--color-text);
  transition: all 0.2s;
}
 
.mlp-tab.active {
  color: var(--color-orange);
  border: 1px solid var(--color-orange);
  box-shadow: inset 0 2px 4px var(--color-orange), inset 0 -2px 4px var(--color-orange);
}
 
/* ── Tab content ── */
.mlp-tab-content {
  display: none;
}
 
.mlp-tab-content.active {
  display: block;
}

.mlp-form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
.mlp-prs-row1,
.mlp-prs-row2 {
  display: flex;
  gap: var(--card-gap);
}

.mlp-prs-row2 {
  flex-direction: column;
}
 
.mlp-field-col {
  flex: 1;
}
 
.mlp-box-input {
  height: 43px;
  display: flex;
  align-items: center;
  margin-top: 6px;
  gap: var(--card-gap);
}

.mlp-box-input input,
.mlp-box-input select {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
}

.mlp-box-input select option {
  background: #ffffff;
  color: #000000;
}
 
.mlp-birth-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
.mlp-time-group {
  display: flex;
  gap: var(--space-sm);
  margin-top: 6px;
}
 
.mlp-time-group .mlp-box-input {
  flex: 1;
  margin-top: 0;
}
 
.mlp-geo-row {
  display: flex;
  gap: var(--card-gap);
}
 
.mlp-geo-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  
}
 
.mlp-geo-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
}
 
.mlp-geo-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}
 
/* ══════════════════════════════════════════
   Melapak — Desktop overrides (>=992px)
   ══════════════════════════════════════════ */
@media (min-width: 992px) {
 
  .mlp-tab {
    font-size: var(--fs-sub-title-desktop);
  }
 
  .mlp-prs-row1,
  .mlp-prs-row2 {
    flex-direction: row;
    gap: 15px;
  }

  /* Birth row */
  .mlp-birth-row {
    flex-direction: row;
    gap: 16px;
  }

  .mlp-geo-label {
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
  }
}

/* ════════════════════════════════════════════════════════════
   Melapak Details Page (mlp- prefix, shared with melapak.html)
   ════════════════════════════════════════════════════════════ */

/* ── Page Header ── */
.mlp-page-header {
  text-align: center;
}

.mlp-page-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-text);
  margin: 0;
}

.mlp-page-subtitle {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: var(--color-text-muted);
  margin: 0px;
}

/* ── Gun Milan Table Card ── */
.mlp-table-card {
  padding: 0;
}

.mlp-table-wrap {
  padding: 0;
  overflow: hidden;
  border-radius: var(--card-radius) var(--card-radius) 0px 0px;
}

.mlp-gun-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* ── Table header ── */
.mlp-gun-table thead {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.mlp-gun-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--color-text);
  padding: 0px 6px;
  white-space: wrap;
}

.mlp-gun-table th:first-child {
  text-align: left;
  padding-left: 12px;
}

/* ── Table body ── */
.mlp-gun-table td {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-text);
  padding: 12px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  word-break: break-word;
}

.mlp-gun-table td:first-child {
  text-align: left;
  padding-left: 12px;
}

.mlp-gun-table tr:last-child td {
  border-bottom: none;
}

.mlp-col-center {
  text-align: center;
}

/* ── Total Gun Match ── */
.mlp-gun-total {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: 35px;
  text-align: center;
  border-radius: 0px 0px var(--card-radius) var(--card-radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ── Charts Grid ── */
.mlp-charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
}

.mlp-chart-card {
  overflow: hidden;
}

/* ── Melapak circle chart wrappers ── */
.mlp-circle-chart-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.mlp-circle-frame {
  position: absolute;
  inset: 0;
}

.mlp-circle-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mlp-chart-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--card-gap);
}

.mlp-chart-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text);
  flex-shrink: 0;
}

/* ── Desktop overrides ── */
@media (min-width: 992px) {
  
  .mlp-page-header {
    text-align: left;
  }
  
  .mlp-page-title {
    font-size: var(--fs-title);
    line-height: 40px;
  }

  .mlp-page-subtitle {
    font-size: 14px;
    line-height: 18px;
  }

  .mlp-gun-table td {
    font-size: var(--fs-body-desktop);
    line-height: 20px;
    padding: 16px 12px;
  }

  .mlp-gun-table th:first-child,
  .mlp-gun-table td:first-child {
    padding-left: 16px;
  }

  .mlp-gun-total {
    font-size: var(--fs-sub-title);
    line-height: 50px;
  }

  .mlp-gun-table th {
    font-size: var(--fs-sub-title);
    line-height: 55px;
  }

  .mlp-charts-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mlp-chart-heading {
    font-size: 18px;
    gap: 10px;
  }

  .mlp-chart-dot {
    width: 10px;
    height: 10px;
  }
}
 
/* ════════════════════════════════════════════════════════════
   Panchang Page
   Prefix: pch-
   Mobile-first; desktop overrides in single @media block
   ════════════════════════════════════════════════════════════ */

/* ── Mobile: Current Alignment ── */
.pch-current-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pch-current-date {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  line-height: 36px;
  letter-spacing: -0.75px;
  color: var(--color-text);
}

.pch-current-location {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--card-gap);
}

/* ── Moon Phase Card ── */

.pch-moon-card {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.pch-moon-card::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  right: -40px;
  top: -40px;
  background: rgba(255, 181, 160, 0.1);
  filter: blur(30px);
  border-radius: 9999px;
}

.pch-moon-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--card-gap);
}

.pch-moon-label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: capitalize;
  color: var(--color-orange);
  margin-bottom: 4px;
}

.pch-moon-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 32px;
  color: var(--color-text-tertiary);
}

.pch-moon-icon {
  position: relative;
  z-index: 1;
  color: var(--color-text-muted);
  font-size: 27px;
}

.pch-moon-bar {
  width: 100%;
  height: 6px;
  background: #31353C;
  border-radius: 9999px;
  margin-bottom: 8px;
  overflow: hidden;
}

.pch-moon-bar-fill {
  height: 100%;
  background: var(--color-orange);
  box-shadow: 0 0 8px rgba(255, 181, 160, 0.6);
  border-radius: 9999px;
}

.pch-moon-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: -0.5px;
  color: var(--color-text-secondary);
}

/* ── Sunrise / Sunset ── */
.pch-sun-row {
  display: flex;
  gap: 8px;
  margin-bottom: var(--card-gap);
}

.pch-sun-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  gap: 8px;
}

.pch-sun-icon {
  font-size: 22px;
}

.pch-sun-icon--sunrise {
  color: var(--color-orange);
}

.pch-sun-icon--sunset {
  color: var(--color-text);
}

.pch-sun-label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.pch-sun-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text-tertiary);
}

/* ── Astronomical Values heading (mobile) ── */
.pch-astro-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

/* ── Mobile Astro Cards ── */
.pch-astro-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--card-gap);
}

.pch-astro-card {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
}

.pch-astro-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  color: var(--color-link-blue);
}

.pch-astro-info {
  flex: 1;
}

.pch-astro-label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.pch-astro-value {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-tertiary);
}

.pch-astro-arrow {
  color: var(--color-text);
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Desktop Table ── */
.pch-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.pch-table thead {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.pch-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--color-text);
  padding: 0px 6px;
  white-space: wrap;
}

.pch-table td {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-text);
  padding: 12px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  word-break: break-word;
  text-align: center;
}

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

/* ════════════════════════════════════════════════════════════
   Panchang — Desktop overrides (>=992px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {

  .pch-desktop-table {
    display: block !important;
    overflow: hidden;
    padding: 0;
  }

  .pch-moon-title {
    font-size: 28px;
  }

  .pch-sun-value {
    font-size: 22px;
  }

  .pch-table th {
    font-size: var(--fs-sub-title);
    line-height: 55px;
  }

  .pch-table td {
    font-size: var(--fs-body-desktop);
    line-height: 20px;
    padding: 16px 12px;
  }
}
 
/* ════════════════════════════════════════════════════════════
   Shadbal Graph Page
   Prefix: sbg-
   Mobile-first; desktop overrides in single @media block
   ════════════════════════════════════════════════════════════ */
 
/* ── CB% pills (9 pills, no label) ── */
.sbg-pills-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  margin-left: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
 
.sbg-pills-row::-webkit-scrollbar { display: none; }
 
.sbg-pill {
  flex: 1;
  min-width: 0;
  height: 24px;
  font-weight: 600;
  font-size: 9px;
  line-height: 8px;
}
 
/* ── Bar Chart ── */
.sbg-chart {
  margin-bottom: 30px;
}
 
.sbg-chart-area {
  position: relative;
  height: 200px;
}
 
.sbg-y-axis {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  /* display: flex;
  flex-direction: column; */
  justify-content: unset;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  color: white;
  text-align: left;
  padding-right: 4px;
  z-index: 1;
}

.sbg-y-axis span {
  position: absolute;
}
 
.sbg-chart-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  left: 20px;
}
 
.sbg-bar {
  flex: 1;
  max-width: 30px;
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  position: relative;
  margin: 0 4px;
}
 
.sbg-bar-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text);
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
 
/* ════════════════════════════════════════════════════════════
   Shadbal Graph — Desktop overrides (>=992px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  /* Pills */
  .sbg-pill {
    height: 69px;
    font-size: 24px;
    line-height: 8px;
  }
 
  .sbg-pills-row {
    gap: 10px;
    margin-left: 28px;
  }
 
  /* Chart */
  .sbg-y-axis {
    font-size: 15px;
  }
 
  .sbg-chart-area {
    height: 420px;
  }
 
  .sbg-bar {
    max-width: 100px;
    border-radius: 15px 15px 0 0;
  }
 
  .sbg-bar-label {
    font-size: 24px;
    line-height: 30px;
    bottom: -38px;
  }
}

/* ════════════════════════════════════════════════════════════
   GRAH Coordinates Page (grc-)
   ════════════════════════════════════════════════════════════ */

.grc-table-card {
  padding: 0;
}

.grc-heading {
  padding: var(--card-padding);
  padding-bottom: 0;
}

.grc-table-wrap {
  padding: 0;
  overflow: hidden;
  border-radius: var(--card-radius) var(--card-radius) 0px 0px;
}

.grc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.grc-table thead {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--glass-shadow);
}

.grc-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--color-text);
  padding: 0px 6px;
  white-space: wrap;
}

.grc-table th:first-child {
  text-align: left;
  padding-left: 12px;
}

.grc-table td {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-text);
  padding: 12px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  word-break: break-word;
}

.grc-table td:first-child {
  text-align: left;
  padding-left: 12px;
}

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

.grc-col-center {
  text-align: center;
}

.grc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* ── Desktop overrides ── */
@media (min-width: 992px) {
  .grc-table td {
    font-size: var(--fs-body-desktop);
    line-height: 20px;
    padding: 16px 12px;
  }

  .grc-table th:first-child,
  .grc-table td:first-child {
    padding-left: 16px;
  }

  .grc-table th {
    font-size: var(--fs-sub-title);
    line-height: 55px;
  }
}
 
/* ════════════════════════════════════════════════════════════
   Five Fold Relationship Page (ffr-)
   Mobile-first base styles
   ════════════════════════════════════════════════════════════ */
 
/* ── Header row ── */
.ffr-header-row {
  margin-bottom: 12px;
}
 
.ffr-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 36px;
  letter-spacing: -0.75px;
  color: #FFFFFF;
  margin: 0 0 8px;
}
 
.ffr-subtitle {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #FFFFFF;
  margin: 0;
}
 
/* ── Legend ── */
.ffr-legend {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
 
.ffr-legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 8px;
  width: 84px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 12px;
}
 
.ffr-legend-icon {
  font-size: 25px;
  line-height: 1;
}
 
.ffr-legend-icon--gfriend { color: var(--color-orange); }
.ffr-legend-icon--friend { color: var(--color-blue); }
.ffr-legend-icon--neutral { color: #908F9D; }
.ffr-legend-icon--enemy { color: var(--color-red); }
 
.ffr-legend-label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}
 
/* ── Planet cards grid (mobile: single column) ── */
.ffr-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
 
/* ── Planet card ── */
.ffr-planet-card {
  background: rgba(255, 255, 255, 0.002);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
  padding: 20px;
}
 
.ffr-planet-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
 
.ffr-planet-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
 
.ffr-planet-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
 
.ffr-planet-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text-tertiary);
}
 
.ffr-planet-desc {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
 
.ffr-chevron {
  color: var(--color-text-secondary);
  font-size: 12px;
  flex-shrink: 0;
}
 
/* ── Relationship rows ── */
.ffr-relations {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
.ffr-rel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
 
.ffr-rel-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: rgba(255, 255, 255, 0.01);
  box-shadow: var(--glass-shadow);
  border-radius: 8px;
  min-height: 33.5px;
}
 
.ffr-rel-planet {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-secondary);
}
 
/* ── Badges ── */
.ffr-rel-badge {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 9px;
  line-height: 14px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}
 
.ffr-badge--gfriend {
  background: rgba(255, 181, 160, 0.2);
  color: #FFFFFF;
}
 
.ffr-badge--friend {
  background: rgba(188, 194, 255, 0.2);
  color: var(--color-blue);
}
 
.ffr-badge--neutral {
  background: rgba(69, 70, 82, 0.9);
  color: #908F9D;
}
 
.ffr-badge--enemy {
  background: rgba(255, 178, 190, 0.2);
  color: var(--color-red);
}
 
.ffr-badge--genemy {
  background: rgba(255, 180, 171, 0.2);
  color: var(--color-red);
}
 
/* ════════════════════════════════════════════════════════════
   Five Fold Relationship — Desktop overrides (>=992px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
 
  /* Main card wraps everything */
  .ffr-main-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.01);
    box-shadow: var(--glass-shadow);
    border-radius: 16px;
    padding: 24px;
  }
 
  /* Header row: title left, legend right */
  .ffr-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
  }
 
  .ffr-title {
    font-size: 32px;
    line-height: 36px;
    margin-bottom: 4px;
  }
 
  /* Legend items bigger on desktop */
  .ffr-legend-item {
    width: 173px;
    border: none;
    background: rgba(255, 255, 255, 0.01);
    box-shadow: var(--glass-shadow);
  }
 
  /* Grid: 2 columns */
  .ffr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
 
  .ffr-planet-card {
    border: none;
    background: rgba(255, 255, 255, 0.002);
    box-shadow: var(--glass-shadow);
  }
}
 
/* ════════════════════════════════════════════════════════════
   Trigger Points Page (tp-)
   Mobile-first base styles
   ════════════════════════════════════════════════════════════ */

.tp-detail {
  display: none;
}
 
.tp-controls-row {
  display: flex;
  gap: var(--card-gap);
}

.tp-getDetails-btn-wrapper,
.tp-time-picker-wrapper {
  flex: 1;
}
 
/* Desktop Get Details button (inside card) */
 
/* Remove old mobile sticky button */
 
/* ── Planet Visibility Controls ── */
 
.tp-controls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
 
.tp-all-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
 
.tp-all-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  color: var(--color-text);
}
 
/* Toggle switch */
.tp-toggle {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 11px;
}
 
.tp-toggle input { opacity: 0; width: 0; height: 0; }
 
.tp-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--toggle-fill-color, #7256FF);
  border-radius: 7px;
  transition: 0.3s;
}
 
.tp-toggle-slider::before {
  content: '';
  position: absolute;
  height: 11px;
  width: 11px;
  right: 0;
  top: -0.5px;
  background: var(--toggle-dot-color, #D9D9D9);
  border-radius: 50%;
  transition: 0.3s;
}
 
.tp-toggle input:not(:checked) + .tp-toggle-slider::before {
  right: auto;
  left: 0;
}
 
.tp-toggle input:not(:checked) + .tp-toggle-slider {
  background: rgba(255,255,255,0.15);
}
 
/* Planet toggle pills */
.tp-planet-toggles {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 25px;
}
 
.tp-planet-toggles::-webkit-scrollbar { display: none; }
 
.tp-planet-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}
 
/* ── Chart heading ── */
.tp-chart-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 4px;
}
 
.tp-chart-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text-tertiary);
}
 
.tp-chart-month {
  font-family: var(--font-label);
  font-weight: 800;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-secondary);
}
 
/* ── Chart card ── */
.tp-chart-card {
  height: 40vh;
  min-height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
 
.tp-chart-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
}
 
/* Y-axis: fixed, doesn't scroll */
.tp-y-axis {
  position: relative;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  font-weight: 500;
  font-size: 10px;
  height: calc(100% - 37px);
}

.tp-y-axis span {
  position: absolute;
}
 
/* Scrollable wrapper for chart + x-axis */
.tp-chart-scroll {
  position: relative;
  width: calc(100% - 20px);
  left: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
 
.tp-chart-scroll::-webkit-scrollbar { display: none; }
 
/* Inner container: fixed wide width on mobile for scroll */
.tp-chart-inner {
  flex: 1;
  min-height: 0;
  min-width: 1500px;
  height: auto;
  position: relative;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}

.svg-container {
  position: relative;
  /* flex: 1; */
  width: calc(100% - 10px);
  height: 100%;
}
 
.tp-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}
 
/* X-axis labels (inside scroll container) */
.tp-x-axis {
  display: flex;
  margin-top: 8px;
  flex-shrink: 0;
  min-width: 1500px;
}
 
.tp-xlabel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.tp-xlabel-day {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
}

.tp-xlabel-dow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9px;
}
 
/* Tooltip for line chart dots */
.tp-tooltip {
  position: fixed;
  background: rgba(10,15,30,0.94);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  line-height: 1.5;
  display: none;
}
 
.tp-tooltip.show {
  display: block;
}
 
/* ════════════════════════════════════════════════════════════
   Trigger Points — Desktop overrides (>=992px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
 
  /* Desktop Get Details button */
  
  .tp-chart-card{
    height: calc(100vh - 40px);
  }
 
  /* Controls card */
 
  .tp-planet-pill {
    padding: 10px 14px;
  }
 
  .tp-toggle {
    width: 36px;
    height: 14px;
  }
 
  .tp-toggle-slider::before {
    height: 16px;
    width: 16px;
    top: -1px;
  }
 
  .tp-all-label {
    font-size: 16px;
  }
 
  .tp-chart-heading { display: none; }
 
  .tp-y-axis {
    font-size: 15px;
  }
 
  .tp-chart-inner {
    min-width: unset;
  }
 
  .tp-x-axis {
    min-width: unset;
  }
  
  .tp-xlabel-day {
    font-size: 12px;
  }

  .tp-xlabel-dow {
    font-size: 10px;
  }

  .tp-chart-scroll {
    overflow-x: visible;
  }
 
  /* Planet toggles wrap on desktop */
  .tp-planet-toggles {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
 
/* ════════════════════════════════════════════════════════════
   Gochar Page (gc-)
   Mobile-first base styles
   ════════════════════════════════════════════════════════════ */
 
/* ── Top Grid (mobile: stacked) ── */
.gc-top-grid { 
  display: flex; 
  flex-direction: column; 
  gap: var(--card-gap);
}
 
.gc-kundli-wrap {
  display: flex;
  margin-bottom: 10px;
}
 
.gc-kundli-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
 
/* ── Controls Card ── */
.gc-control-rows { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--card-gap);
  width: 100%;
  justify-content: space-around;
}
.gc-control-row {
  display: flex; align-items: center;
  padding: 6px 0;
}
.gc-control-label {
  font: 400 12px/24px var(--font-body);
  flex-shrink: 0; text-align: center; min-width: unset;
}
.gc-ctrl-btn {
  flex: 1; height: 30px; border: none; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 16px; background: none; color: white;
}
.gc-ctrl-minus { margin-right: 4px; }
.gc-ctrl-plus { margin-left: 4px; }
 
/* Full-width button (Real Time, Date) */
.gc-ctrl-full {
  flex: 1;
}
 
/* Date picker input */
.gc-date-input-wrap {
  height: 30px; border-radius: 4px; overflow: hidden;
  display: flex; align-items: center;
}
.gc-date-input {
  width: 100%; height: 100%; border: none; background: transparent;
  color: #fff; font: 400 12px var(--font-body);
  padding: 0 8px; outline: none;
  color-scheme: dark; align-items: center; justify-content: center;
}
.gc-date-input::-webkit-calendar-picker-indicator {
  filter: invert(1); cursor: pointer;
}
 
/* ── Dasha Grid (mobile: stacked) ── */
 
.gc-dasha-card {
  display: flex; 
  flex-direction: column; 
  overflow: auto;
}

.gc-dasha-table {
  height:100%; 
  width: 100%; 
  border-collapse: collapse; 
  overflow: scroll; 
  flex-grow: 1; 
  scrollbar-width: thin; 
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
/* .gc-col-birth {
  border-bottom: 2px solid var(--color-blue) !important;
} */
.gc-dasha-table td:nth-child(2)
{
  border-left: 2px solid rgba(255, 255, 255, 0.5) !important;
}
/* .gc-col-gochar {
  border-bottom: 2px solid var(--color-orange) !important;
} */
.gc-dasha-table td:nth-child(4)
{
  border-left: 2px solid rgba(255, 255, 255, 0.5) !important;
}
.gc-dasha-table thead tr:first-child th[colspan] {
  text-align: center;
  border-left: 2px solid rgba(255, 255, 255, 0.5) !important;
}
.gc-dasha-table th {
  font: 600 12px/15px var(--font-body); color: #fff;
  text-align: left; padding: 6px 4px; letter-spacing: 0.5px;
  text-transform: capitalize; border-bottom: 1px solid var(--color-text-table);
}
.gc-dasha-table td {
  font: 400 12px/15px var(--font-body); 
  color: #fff;
  padding: 8px 4px;
}
.gc-dasha-table tr {
  border-bottom: 1px solid var(--color-text-table);
}
.gc-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
 
/* ════════════════════════════════════════════════════════════
   Gochar — Desktop overrides (>=992px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
 
  .gc-top-grid {
    display: grid;
    grid-template-columns: minmax(0,6fr) minmax(0,4fr);
    align-items: stretch;
    height: calc(100vh - 40px);
  }
 
  .gc-chart-card {
    min-height: 0;
    overflow: visible;
    container-type: inline-size;
  }

  .gc-kundli-wrap { 
    flex: 1;
    min-height: 0; 
  }
 
  .gc-control-rows {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 4px;
    width: 100%;
  }

  .gc-control-row { 
    padding: 4px 0; 
  }

  .gc-control-label {
    font-size: 15px; line-height: 24px;
    text-align: center; min-width: unset;
  }
  .gc-ctrl-btn { border-radius: 10px; font-size: 18px; }
  .gc-date-input-wrap { height: 44px; border-radius: 10px; }
  .gc-date-input { font-size: 14px; padding: 0 12px; }

  .gc-dasha-table th { 
    font-size: 17px; 
    padding: 10px 8px; 
  }

  .gc-dasha-table td { 
    font-size: 15px; 
    padding: 12px 8px; 
  }

  .gc-dot { 
    width: 10px;
    height: 10px;
    margin-right: 5px;
  }
}
 
/* When .ck-page is narrow (sidebar open) — stack top grid */
@container (max-width: 850px) {
  .gc-top-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - 40px);
  }
  .gc-chart-card {
    min-height: 400px;
  }
}
 
/* When .gc-chart-card is wide enough — controls beside chart */
@container (min-width: 700px) {
  .gc-chart-card {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr !important;
  }
  .gc-chart-header {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  .gc-kundli-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
  }
  .gc-control-rows {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: max-content !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 0 0 10px !important;
  }
}
 
/* ════════════════════════════════════════════════════════════
   Cosmo Vibes Page (cv-)
   ════════════════════════════════════════════════════════════ */

.cv-chart-container {
  display: flex;
  height: 50vh;
}

.cv-chart-scroll {
  position: relative;
  width: calc(100% - 20px);
  left: 20px;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cv-chart-scroll::-webkit-scrollbar {
  display: none;
}
 
.cv-chart-body {
  position: relative;
  flex: 1;
  min-width: 1400px;
}
 
.cv-bars-area {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  left: 5px;
  width: calc(100% - 10px);
}

#cvBars:not(:has(.show)) .sps-bar-col:has(.sps-bar:hover) .sps-bar-tip,
#spsBars:not(:has(.show)) .sps-bar-col:has(.sps-bar:hover) .sps-bar-tip {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 992px) {

  .cv-chart-container {
    height: calc(100vh - 200px);
  }

  .cv-chart-body {
    min-width: unset;
  }
 
  .cv-chart-scroll {
    overflow-x: visible;
  }
}
 
/* ════════════════════════════════════════════════════════════
    Profile Page (prf- prefix)
  ════════════════════════════════════════════════════════════ */
 
/* Plan badge — top-right of first card */
.prf-plan-badge {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 26px;
  color: var(--color-text);
  position: absolute;
  top: 16px;
  right: 20px;
}
 
.prf-plan-badge span {
  color: var(--color-orange);
}

.prf-personal-row1, .prf-personal-row2 {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--card-gap);
}

.prf-personal-col1, .prf-personal-col2, .prf-personal-col3 {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.client-phone-group{
  display: flex;
}

/* Desktop: single unified card with internal sections */
@media (min-width: 992px) {
  .prf-plan-badge {
    font-size: 16px;
    top: 20px;
    right: 28px;
  }
 
  /* Desktop layout: Name + Phone left, Gender right, divided */
  .prf-personal-row1, .prf-personal-row2 {
    flex-direction: row;
  }

  .prf-personal-row1 {
    margin-bottom: 20px;
  }
 
  .prf-personal-left {
    flex: 1
  }

  .prf-personal-divider {
    display: block;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    align-self: stretch;
    margin: 0 24px;
  }
 
  .prf-personal-right {
    flex: 1;
  }
 
  /* On desktop, all sections in one card */
  .prf-section-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 20px 0;
  }
}
 
/* Mobile: divider hidden, sections stacked as separate cards */
.prf-personal-divider {
  display: none;
}
 
.prf-section-divider {
  display: none;
}
 
/* ════════════════════════════════════════════════════════════
    Display Details Page (dd- prefix)
    ════════════════════════════════════════════════════════════ */
 
/* Plan badge — top-right of first card */
.dd-plan-badge {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 26px;
  color: var(--color-text);
  position: absolute;
  top: 16px;
  right: 20px;
}
 
.dd-plan-badge span {
  color: var(--color-orange);
}
 
.dd-card-relative {
  position: relative;
}
 
/* ── Split row (reusable for left/right with divider) ── */
.dd-split-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
.dd-split-left,
.dd-split-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.dd-input-fields{
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
 
.dd-split-divider {
  display: none;
}
 
/* ── File upload section ── */
.dd-upload-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: var(--card-gap);
}
 
.dd-upload-group {
  flex: 1;
}
 
.dd-upload-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  line-height: 21px;
  color: var(--color-text);
  margin-bottom: 6px;
}
 
.dd-upload-row {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.01);
  box-shadow: var(--glass-shadow);
  border-radius: 10px;
  overflow: hidden;
}
 
.dd-upload-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.01);
  box-shadow: var(--glass-shadow);
  border-radius: 10px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  line-height: 21px;
  padding: 14px 16px;
  cursor: pointer;
  white-space: nowrap;
}
 
.dd-upload-filename {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  color: var(--color-text);
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.dd-upload-hint {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 21px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4px;
}
 
/* Hidden file input */
.dd-file-input {
  display: none;
}
 
/* ── Desktop overrides ── */
@media (min-width: 992px) {
  .dd-plan-badge {
    font-size: 16px;
  }

  .dd-split-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
 
  .dd-split-divider {
    display: block;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    align-self: stretch;
    margin: 0 24px;
  }
 
  .dd-upload-section {
    flex-direction: row;
    gap: 20px;
  }
 
  .dd-upload-label {
    font-size: 13px;
  }
 
  .dd-upload-btn {
    font-size: 16px;
  }
 
  .dd-upload-filename {
    font-size: 16px;
  }
 
  .dd-upload-hint {
    font-size: var(--fs-body-desktop);
    margin-top: 8px;
  }
}
 
/* ════════════════════════════════════════════════════════════
    App Details Page (ad- prefix)
    ════════════════════════════════════════════════════════════ */
 
.ad-plan-badge {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 26px;
  color: var(--color-text);
  position: absolute;
  top: 0;
  right: 0;
}
 
.ad-plan-badge span {
  color: var(--color-orange);
}
 
.ad-card-relative {
  position: relative;
}
 
/* Split row for desktop side-by-side */
.ad-split-row {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
 
.ad-split-left,
.ad-split-right {
  flex: 1;
}
 
.ad-split-divider {
  display: none;
}
 
/* File upload */
.ad-upload-section {
  margin-top: 16px;
}
 
.ad-upload-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  line-height: 21px;
  color: var(--color-text);
  margin-bottom: 6px;
}
 
.ad-upload-row {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.01);
  box-shadow: var(--glass-shadow);
  border-radius: 10px;
  overflow: hidden;
}
 
.ad-upload-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.01);
  box-shadow: var(--glass-shadow);
  border-radius: 10px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  line-height: 21px;
  padding: 14px 16px;
  cursor: pointer;
  white-space: nowrap;
}
 
.ad-upload-filename {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  color: var(--color-text);
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.ad-upload-hint {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 21px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4px;
}
 
.ad-file-input {
  display: none;
}

.client-section-title{
    display: flex;
    flex-direction: row;
    gap: var(--card-gap);
}
 
/* Desktop overrides */
@media (min-width: 992px) {
  .ad-plan-badge {
    font-size: 16px;
  }


  .ad-split-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
 
  .ad-split-divider {
    display: block;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    align-self: stretch;
    margin: 0 24px;
  }
 
  .ad-upload-label {
    font-size: 13px;
  }
 
  .ad-upload-btn {
    font-size: 16px;
  }
 
  .ad-upload-filename {
    font-size: 16px;
  }
 
  .ad-upload-hint {
    font-size: var(--fs-body-desktop);
    line-height: 21px;
    margin-top: 8px;
  }
 
  /* Desktop: description spans full width below the split row */
  .ad-description-full {
    margin-top: 16px;
  }
}
 
/* ════════════════════════════════════════════════════════════
   Report History Page (rh- prefix)
   ════════════════════════════════════════════════════════════ */

.rh-header {
  margin-bottom: 0px;
  text-align: center;
}

.rh-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-sub-title);
  line-height: 20px;
  color: var(--color-text);
  margin: 0;
}

.rh-subtitle {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: var(--color-text);
  margin-top: 2px;
}

.rh-top-row {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0 20px;
}

/* Search bar */
.rh-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rh-search-wrap i {
  color: var(--color-text);
  font-size: 18px;
}

.rh-search-wrap input {
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 22px;
  width: 100%;
}

.rh-search-wrap input::placeholder {
  color: var(--color-text);
}

/* Table wrapper */
.rh-table-wrap {
  padding: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
}

.rh-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.rh-table thead {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.rh-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--color-text);
  padding: 0px 6px;
  text-align: center;
  white-space: wrap;
}

.rh-table th:first-child {
  text-align: left;
  padding-left: 12px;
}

.rh-table td {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-text);
  padding: 12px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  word-break: break-word;
}

.rh-table td:first-child {
  text-align: left;
  padding-left: 12px;
}

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

/* Download icon button */
.rh-download-btn {
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}

.rh-download-btn:hover { opacity: 0.7; }

/* ── Desktop overrides ── */
@media (min-width: 992px) {
  .rh-header {
    text-align: left;
  }

  .rh-title {
    font-size: var(--fs-title);
    line-height: 40px;
  }

  .rh-subtitle {
    font-size: 14px;
    line-height: 18px;
  }

  .rh-search-wrap {
    flex: 1;
  }

  .rh-table th {
    font-size: var(--fs-sub-title);
    line-height: 55px;
  }

  .rh-table td {
    font-size: var(--fs-body-desktop);
    line-height: 20px;
    padding: 16px 12px;
  }

  .rh-table th:first-child,
  .rh-table td:first-child {
    padding-left: 16px;
  }
}


/* ════════════════════════════════════════════════════════════
   Credit Transaction Page (cth- prefix)
   ════════════════════════════════════════════════════════════ */

.cth-top-row {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: 0 20px;
}

.cth-header {
  text-align: center;
}

.cth-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-sub-title);
  line-height: 20px;
  color: var(--color-text);
  margin: 0;
}

.cth-subtitle {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: var(--color-text);
  margin-top: 2px;
}

/* Credit info row */
.cth-credit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--card-gap);
}

.cth-credit-badge {
  flex: 1;
}

.cth-credit-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 16px;
  color: var(--color-text);
}

.cth-credit-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--color-orange);
}

/* Table wrapper */
.cth-table-wrap {
  padding: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
}

.cth-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cth-table thead {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.cth-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--color-text);
  padding: 0px 6px;
  text-align: center;
  white-space: wrap;
}

.cth-table th:first-child {
  text-align: left;
  padding-left: 12px;
}

.cth-table td {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-text);
  padding: 12px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  word-break: break-word;
}

.cth-table td:first-child {
  text-align: left;
  padding-left: 12px;
}

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

/* Column widths mobile */
.cth-table colgroup .cth-col-date { width: 28%; }
.cth-table colgroup .cth-col-details { width: 35%; }
.cth-table colgroup .cth-col-type { width: 20%; }
.cth-table colgroup .cth-col-qty { width: 17%; }

/* ── Desktop overrides ── */
@media (min-width: 992px) {
  .cth-header {
    text-align: left;
  }

  .cth-title {
    font-size: var(--fs-title);
    line-height: 40px;
  }

  .cth-subtitle {
    line-height: 18px;
  }

  .cth-credit-row {
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 0;
  }

  .cth-credit-label {
    font-size: var(--fs-sub-title);
  }

  .cth-credit-value {
    font-size: var(--fs-title);
  }

  .cth-table th {
    font-size: var(--fs-sub-title);
    line-height: 55px;
  }

  .cth-table td {
    font-size: var(--fs-body-desktop);
    line-height: 20px;
    padding: 16px 12px;
  }

  .cth-table th:first-child,
  .cth-table td:first-child {
    padding-left: 16px;
  }

  .cth-table colgroup .cth-col-date { width: 25%; }
  .cth-table colgroup .cth-col-details { width: 35%; }
  .cth-table colgroup .cth-col-type { width: 22%; }
  .cth-table colgroup .cth-col-qty { width: 18%; }
}
/* ════════════════════════════════════════════════════════════
    Change Password Page (cpw- prefix)
    ════════════════════════════════════════════════════════════ */

 
@media (min-width: 992px) {

}

/* ════════════════════════════════════════════════════════════
   CV Planner Page (cvp-)
   ════════════════════════════════════════════════════════════ */

.cvp-page-header {
  text-align: center;
}

.cvp-page-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--color-orange);
  margin: 0;
}

.cvp-page-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

/* ── Date picker card ── */
.cvp-date-card {
  max-width: 600px;
}

.cvp-date-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cvp-date-input i {
  color: var(--color-text-muted);
  font-size: var(--fs-sub-title);
}

.cvp-date-input input[type="date"] {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  font-weight: 500;
  color-scheme: dark;
}

/* ── Report option cards grid ── */
.cvp-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
}

.cvp-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px var(--card-padding);
}

.cvp-option-icon {
  font-size: 28px;
  color: var(--color-orange);
  margin-bottom: 4px;
}

.cvp-option-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--color-text);
}

.cvp-option-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}

.cvp-option-cost {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sub-title);
  color: var(--color-orange);
  margin: 4px 0 8px;
}

.cvp-option-cost i {
  font-size: 14px;
}

.cvp-generate-btn {
  width: 100%;
  max-width: 280px;
}

/* ── Desktop overrides ── */
@media (min-width: 992px) {
  .cvp-page-header {
    text-align: left;
  }

  .cvp-page-title {
    font-size: var(--fs-title-desktop);
  }

  .cvp-page-subtitle {
    font-size: 14px;
  }

  .cvp-options-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cvp-option-card {
    padding: 28px 20px;
  }

  .cvp-option-icon {
    font-size: 32px;
  }
}

/* ════════════════════════════════════════════════════════════
  CK Planner Page (cvp-)
════════════════════════════════════════════════════════════ */

/* ── Controls card (heading + date) ── */
.cvp-controls {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
}

.cvp-date-wrapper {
  flex: 1;
}

/* ── Duration toggle pills ── */
.cvp-duration-row {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: var(--card-gap);
}

.cvp-duration-row::-webkit-scrollbar {
  display: none;
}

.cvp-duration-pill {
  flex: 1;
  min-width: 100px;
  padding: 12px var(--card-padding);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.cvp-duration-pill.active {
  background: rgba(240, 126, 34, 0.15);
  border-color: rgba(240, 126, 34, 0.5);
}

.cvp-duration-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sub-title);
  color: var(--color-text);
  display: block;
}

.cvp-duration-pill.active .cvp-duration-name {
  color: var(--color-orange);
}

/* ── Tier cards grid ── */
.cvp-tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
  align-items: stretch;
}

.cvp-tier-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px var(--card-padding);
  position: relative;
}

.cvp-tier-card.recommended {
  border-color: rgba(240, 126, 34, 0.5);
}

/* ── Recommended badge ── */
.cvp-tier-badge {
  position: absolute;
  top: 0;
  right: var(--card-padding);
  transform: translateY(-50%);
  background: var(--color-orange);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Card header ── */
.cvp-tier-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cvp-tier-icon {
  font-size: 20px;
  color: var(--color-orange);
  line-height: 1;
}

.cvp-tier-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--color-text);
}

.cvp-tier-suffix {
  font-family: inherit;
  font-weight: 800;
}

.cvp-suffix--planner_plus {
  color: #4A9EFF;
}

.cvp-suffix--planner_max {
  color: #FF4D4D;
}

.cvp-tier-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 17px;
  color: var(--color-text-muted);
}

/* ── Price block ── */
.cvp-tier-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

.cvp-price-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.cvp-price-compare {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cvp-price-original {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.cvp-price-save {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: #4CAF50;
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.35);
  border-radius: 20px;
  padding: 3px 8px;
  white-space: nowrap;
}

.cvp-price-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--color-orange);
}

.cvp-price-unit {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}

/* ── Feature list ── */
.cvp-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.cvp-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 17px;
  color: var(--color-text);
}

.cvp-feature-item i {
  font-size: 13px;
  line-height: 17px;
  flex-shrink: 0;
}

.cvp-feature-item.included i {
  color: #4CAF50;
}

.cvp-feature-item.excluded {
  color: var(--color-text-muted);
}

.cvp-feature-item.excluded i {
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* ── Card CTA ── */
.cvp-tier-cta {
  width: 100%;
  margin-top: 4px;
}

/* ── Desktop overrides ── */
@media (min-width: 992px) {
  .cvp-tier-grid {
    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
  }

  .cvp-tier-card {
    padding: 24px 20px;
    gap: 12px;
  }

  .cvp-tier-name {
    font-size: var(--fs-title-desktop);
  }

  .cvp-price-value {
    font-size: 28px;
  }

  .cvp-feature-item,
  .cvp-tier-desc {
    font-size: var(--fs-body-desktop);
    line-height: 19px;
  }

  .cvp-feature-item i {
    line-height: 19px;
  }
}