/* ============================================================
   SKILLAK DESIGN SYSTEM - v4 Clean
   ============================================================ */
    :root {
      --ink: #111827;
      --teal: #0d6e75;
      --teal2: #0a575d;
      --teal3: #e6f4f5;
      --amber: #f59e0b;
      --amber2: #fbbf24;
      --amber3: #fef3c7;
      --cream: #f9f6f1;
      --cream2: #f0ebe1;
      --cream3: #e5ddd0;
      --white: #fff;
      --border: #e2dcd2;
      --muted: #6b7280;
      --red: #ef4444;
      --red2: #fee2e2;
      --green: #10b981;
      --green2: #d1fae5;
      --blue: #3b82f6;
      --purple: #8b5cf6;
      --wa-light: #dcf8c6;
      --wa-bg: #ece5dd;
      --wa-green: #25d366;
      --r: 14px;
      --rsm: 8px;
      --rxs: 5px;
      --nh: 64px;
      --sh: 0 2px 12px rgba(0, 0, 0, .08);
      --shmd: 0 8px 32px rgba(0, 0, 0, .12);
      --shlg: 0 20px 64px rgba(0, 0, 0, .18);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Cairo', sans-serif;
      background: var(--cream);
      color: var(--ink);
      line-height: 1.6;
      overflow-x: hidden;
    }

    .hidden {
      display: none !important;
    }

    img {
      max-width: 100%;
      display: block;
    }

    /* Tags */
    .tag {
      display: inline-block;
      background: var(--cream2);
      color: var(--teal);
      border-radius: 100px;
      padding: 3px 11px;
      font-size: .74rem;
      font-weight: 700;
    }

    .tag-g {
      background: var(--green2);
      color: #065f46;
    }

    .tag-a {
      background: var(--amber3);
      color: #92400e;
    }

    .tag-r {
      background: var(--red2);
      color: #b91c1c;
    }

    .stars {
      color: var(--amber);
    }

    .sl {
      font-size: .73rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--amber);
      margin-bottom: 8px;
      display: block;
    }

    .st {
      font-family: 'Fraunces', serif;
      font-size: clamp(1.75rem, 4vw, 2.85rem);
      line-height: 1.1;
      color: var(--ink);
    }

    .st span {
      color: var(--teal);
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 11px 22px;
      border-radius: var(--r);
      font-family: 'Cairo', sans-serif;
      font-size: .9rem;
      font-weight: 700;
      cursor: pointer;
      border: none;
      transition: all .2s;
      text-decoration: none;
      white-space: nowrap;
      letter-spacing: .01em;
    }

    .btn:active {
      transform: scale(.96);
    }

    .btn-p {
      background: var(--teal);
      color: #fff;
      box-shadow: 0 4px 14px rgba(13, 110, 117, .28);
    }

    .btn-p:hover {
      background: var(--teal2);
      box-shadow: 0 6px 20px rgba(13, 110, 117, .38);
      transform: translateY(-1px);
    }

    .btn-a {
      background: var(--amber);
      color: #fff;
      box-shadow: 0 4px 14px rgba(245, 158, 11, .3);
    }

    .btn-a:hover {
      background: #e08d00;
      transform: translateY(-1px);
    }

    .btn-o {
      background: transparent;
      color: var(--teal);
      border: 2px solid var(--teal);
    }

    .btn-o:hover {
      background: var(--teal);
      color: #fff;
      transform: translateY(-1px);
    }

    .btn-w {
      background: transparent;
      color: #fff;
      border: 2px solid rgba(255, 255, 255, .5);
    }

    .btn-w:hover {
      background: rgba(255, 255, 255, .12);
    }

    .btn-gh {
      background: transparent;
      color: var(--ink);
      padding: 9px 15px;
    }

    .btn-gh:hover {
      background: var(--cream2);
    }

    .btn-d {
      background: var(--red);
      color: #fff;
      box-shadow: 0 3px 10px rgba(239, 68, 68, .28);
    }

    .btn-d:hover {
      background: #dc2626;
    }

    .btn-s {
      background: var(--green);
      color: #fff;
    }

    .btn-sm {
      padding: 8px 16px;
      font-size: .82rem;
      border-radius: var(--rsm);
    }

    .btn-xs {
      padding: 5px 11px;
      font-size: .74rem;
      border-radius: var(--rxs);
    }

    .btn:disabled {
      opacity: .45;
      cursor: not-allowed;
      pointer-events: none;
      transform: none !important;
    }

    /* Forms */
    .fg {
      margin-bottom: 15px;
    }

    .fr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 13px;
    }

    label {
      display: block;
      font-weight: 700;
      margin-bottom: 6px;
      font-size: .82rem;
      color: var(--ink);
      letter-spacing: .01em;
    }

    .req {
      color: var(--red);
      margin-right: 2px;
    }

    input,
    textarea,
    select {
      font-family: 'Cairo', sans-serif;
      width: 100%;
      padding: 12px 16px;
      border: 2px solid var(--border);
      border-radius: var(--rsm);
      background: var(--white);
      color: var(--ink);
      font-size: .9rem;
      outline: none;
      transition: border-color .18s, box-shadow .18s;
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 4px rgba(13, 110, 117, .08);
    }

    input::placeholder,
    textarea::placeholder {
      color: #b5bec9;
    }

    .fh {
      font-size: .73rem;
      color: var(--muted);
      margin-top: 5px;
    }

    /* Footer grid fix - different class */
    .footgrid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 30px;
      margin-bottom: 36px;
    }

    /* Cards */
    .card {
      background: var(--white);
      border-radius: var(--r);
      border: 1.5px solid var(--border);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    }

    .cb {
      padding: 22px;
    }

    .ch {
      padding: 14px 22px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--cream);
      border-radius: var(--r) var(--r) 0 0;
    }

    .ct {
      font-weight: 700;
      font-size: .88rem;
    }

    /* Pills */
    .pill {
      display: inline-block;
      border-radius: 100px;
      padding: 2px 10px;
      font-size: .72rem;
      font-weight: 700;
    }

    .pp {
      background: var(--amber3);
      color: #92400e;
    }

    .pc {
      background: var(--green2);
      color: #065f46;
    }

    .pco {
      background: var(--teal3);
      color: var(--teal);
    }

    .pca {
      background: var(--red2);
      color: #b91c1c;
    }

    /* Spinner */
    .spin {
      width: 36px;
      height: 36px;
      border: 3px solid rgba(13, 110, 117, .15);
      border-top-color: var(--teal);
      border-radius: 50%;
      animation: sp .7s linear infinite;
    }

    .spin-sm {
      width: 18px;
      height: 18px;
      border-width: 2px;
    }

    .spin-wh {
      border-color: rgba(255, 255, 255, .2);
      border-top-color: #fff;
    }

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

    /* Loading */
    #loadScreen {
      position: fixed;
      inset: 0;
      background: var(--ink);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity .4s;
    }

    .ll {
      font-family: 'Fraunces', serif;
      font-size: 2.8rem;
      font-weight: 900;
      color: #fff;
      margin-bottom: 20px;
    }

    .ll span {
      color: var(--amber);
    }

    /* ============================================================ NAVBAR */
    .navbar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(0, 0, 0, .08);
      padding: 0 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--nh);
      gap: 14px;
      box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
    }

    .logo {
      font-family: 'Fraunces', serif;
      font-size: 1.55rem;
      font-weight: 900;
      color: var(--teal);
      cursor: pointer;
      letter-spacing: -.4px;
      flex-shrink: 0;
      user-select: none;
    }

    .logo span {
      color: var(--amber);
    }

    .nl {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .nli {
      font-size: .84rem;
      font-weight: 700;
      color: #374151;
      cursor: pointer;
      padding: 7px 14px;
      border-radius: var(--rsm);
      transition: all .18s;
    }

    .nli:hover {
      background: var(--teal3);
      color: var(--teal);
    }

    .nav-r {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .nav-av {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--amber);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: .88rem;
      cursor: pointer;
      font-family: 'Fraunces', serif;
      color: var(--ink);
      overflow: hidden;
      border: 2.5px solid transparent;
      transition: border-color .2s, box-shadow .2s;
      flex-shrink: 0;
    }

    .nav-av:hover {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(13, 110, 117, .12);
    }

    .nav-av img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .wchip {
      display: flex;
      align-items: center;
      gap: 5px;
      background: var(--teal3);
      border-radius: 100px;
      padding: 6px 14px;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      border: 1.5px solid rgba(13, 110, 117, .18);
      transition: all .18s;
    }

    .wchip:hover {
      background: #c8e8e9;
      box-shadow: 0 2px 8px rgba(13, 110, 117, .15);
    }

    .wchip .wa {
      color: var(--teal2);
    }

    /* ============================================================ HERO */
    .hero {
      min-height: 86vh;
      display: flex;
      align-items: center;
      padding: 5% 5%;
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, #0a1218 0%, #0c2e35 48%, #0d6e75 100%);
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 65% at 85% 42%, rgba(245, 158, 11, .12) 0%, transparent 55%), radial-gradient(ellipse 42% 52% at 12% 78%, rgba(13, 110, 117, .45) 0%, transparent 55%);
    }

    .hg {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 56px;
      align-items: center;
      width: 100%;
      position: relative;
      max-width: 1180px;
      margin: 0 auto;
    }

    .htag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(245, 158, 11, .17);
      border: 1px solid rgba(245, 158, 11, .32);
      color: var(--amber);
      border-radius: 100px;
      padding: 5px 14px;
      font-size: .78rem;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .htitle {
      font-family: 'Fraunces', serif;
      font-size: clamp(2.6rem, 5.2vw, 4.5rem);
      line-height: 1.06;
      color: #fff;
      margin-bottom: 18px;
    }

    .htitle em {
      font-style: italic;
      color: var(--amber);
    }

    .hsub {
      font-size: 1.02rem;
      color: rgba(255, 255, 255, .68);
      margin-bottom: 30px;
      line-height: 1.75;
      max-width: 470px;
    }

    .hsearch {
      display: flex;
      background: rgba(255, 255, 255, .1);
      border: 1.5px solid rgba(255, 255, 255, .18);
      border-radius: var(--r);
      overflow: hidden;
      max-width: 500px;
    }

    @media (max-width: 480px) {
      .hsearch {
        flex-direction: column;
        border-radius: var(--r);
      }

      .hsearch input {
        border-radius: var(--r) var(--r) 0 0;
        padding: 14px 17px;
      }

      .hsearch button {
        border-radius: 0 0 var(--r) var(--r);
        padding: 13px 19px;
        width: 100%;
      }
    }

    .hsearch input {
      background: transparent;
      border: none;
      color: #fff;
      flex: 1;
      padding: 12px 17px;
      font-size: .92rem;
      font-family: 'Cairo', sans-serif;
      box-shadow: none;
    }

    .hsearch input::placeholder {
      color: rgba(255, 255, 255, .4);
    }

    .hsearch input:focus {
      box-shadow: none;
      border-color: transparent;
    }

    .hsearch button {
      background: var(--amber);
      color: #fff;
      border: none;
      padding: 12px 19px;
      font-family: 'Cairo', sans-serif;
      font-weight: 700;
      cursor: pointer;
      transition: background .18s;
      font-size: .88rem;
    }

    .hsearch button:hover {
      background: var(--amber2);
    }

    .hstats {
      display: flex;
      gap: 28px;
      margin-top: 36px;
      flex-wrap: wrap;
    }

    .hn {
      font-family: 'Fraunces', serif;
      font-size: 2rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
    }

    .hl {
      font-size: .73rem;
      color: rgba(255, 255, 255, .46);
      margin-top: 2px;
    }

    /* Float cards */
    .fwrap {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 300px;
      margin-right: auto;
    }

    .fc {
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .13);
      backdrop-filter: blur(13px);
      border-radius: var(--r);
      padding: 14px 17px;
      display: flex;
      align-items: center;
      gap: 12px;
      animation: flt 4s ease-in-out infinite;
    }

    .fc:nth-child(2) {
      animation-delay: 1.4s;
      margin-right: 24px;
    }

    .fc:nth-child(3) {
      animation-delay: 2.8s;
    }

    @keyframes flt {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-9px);
      }
    }

    .fcav {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
      font-weight: 900;
      flex-shrink: 0;
      font-family: 'Fraunces', serif;
    }

    .fcname {
      font-weight: 700;
      color: #fff;
      font-size: .85rem;
    }

    .fcsub {
      font-size: .72rem;
      color: rgba(255, 255, 255, .58);
      margin-top: 2px;
    }

    .lb {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(37, 211, 102, .18);
      border: 1px solid rgba(37, 211, 102, .28);
      color: #5eefa8;
      border-radius: 100px;
      padding: 2px 8px;
      font-size: .68rem;
      font-weight: 700;
      margin-top: 3px;
    }

    .ld {
      width: 5px;
      height: 5px;
      background: #5eefa8;
      border-radius: 50%;
      animation: pu 1.5s ease-in-out infinite;
    }

    @keyframes pu {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .3;
      }
    }

    /* Sections */
    section {
      padding: 80px 5%;
    }

    .sh {
      margin-bottom: 44px;
    }

    .sh.center {
      text-align: center;
    }

    .sh.split {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
    }

    /* Categories */
    .cg {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 11px;
    }

    .cc {
      background: var(--cream);
      border: 2px solid var(--border);
      border-radius: var(--r);
      padding: 24px 15px;
      text-align: center;
      cursor: pointer;
      transition: all .22s;
    }

    .cc:hover {
      border-color: var(--teal);
      background: var(--teal);
      color: #fff;
      transform: translateY(-4px);
      box-shadow: var(--sh);
    }

    .cc:hover .ccc {
      color: rgba(255, 255, 255, .62);
    }

    .ccic {
      font-size: 2.2rem;
      margin-bottom: 9px;
      display: block;
    }

    .ccn {
      font-weight: 700;
      font-size: .86rem;
    }

    .ccc {
      font-size: .72rem;
      color: var(--muted);
      margin-top: 3px;
    }

    /* Teacher Cards */
    .tgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
      gap: 20px;
    }

    .tc {
      background: var(--white);
      border-radius: 16px;
      overflow: hidden;
      border: 1.5px solid var(--border);
      transition: all .28s cubic-bezier(.34, 1.56, .64, 1);
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    }

    .tc:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
      border-color: var(--teal);
    }

    .tcban {
      height: 88px;
      position: relative;
    }

    .tcav {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 900;
      font-family: 'Fraunces', serif;
      position: absolute;
      bottom: -34px;
      right: 16px;
      border: 4px solid var(--white);
      box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
      overflow: hidden;
    }

    .tcav img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .tcdot {
      width: 12px;
      height: 12px;
      background: var(--green);
      border: 2.5px solid var(--white);
      border-radius: 50%;
      position: absolute;
      bottom: -21px;
      right: 18px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    }

    .tcb {
      padding: 42px 16px 18px;
    }

    .tcname {
      font-weight: 800;
      font-size: .98rem;
      margin-bottom: 2px;
    }

    .tcsk {
      font-size: .76rem;
      color: var(--muted);
      margin: 4px 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tcmeta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 13px;
      padding-top: 13px;
      border-top: 1px solid var(--border);
    }

    .tcrat {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: .84rem;
      font-weight: 700;
    }

    .tcprice {
      font-weight: 800;
      color: var(--teal);
      font-size: .95rem;
    }

    .tcprice small {
      font-size: .7rem;
      font-weight: 500;
      color: var(--muted);
    }

    /* How */
    .how {
      background: var(--ink);
    }

    .how .st {
      color: #fff;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 22px;
    }

    .step {
      padding: 24px;
      border-radius: var(--r);
      border: 1px solid rgba(255, 255, 255, .07);
      background: rgba(255, 255, 255, .032);
    }

    .step:hover {
      background: rgba(255, 255, 255, .06);
    }

    .stepn {
      font-family: 'Fraunces', serif;
      font-size: 2.6rem;
      font-weight: 900;
      color: rgba(245, 158, 11, .2);
      line-height: 1;
      margin-bottom: 11px;
    }

    .stepic {
      font-size: 1.65rem;
      margin-bottom: 10px;
    }

    .steptitle {
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
      font-size: .93rem;
    }

    .stepdesc {
      font-size: .8rem;
      color: rgba(255, 255, 255, .44);
      line-height: 1.68;
    }

    /* Testimonials */
    .tg2 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
    }

    .tc2 {
      background: var(--white);
      border-radius: var(--r);
      padding: 22px;
      border: 1.5px solid var(--border);
    }

    .tc2q {
      font-size: 1.9rem;
      color: var(--amber);
      line-height: 1;
      margin-bottom: 10px;
    }

    .tc2t {
      font-size: .88rem;
      line-height: 1.75;
      color: #374151;
      margin-bottom: 15px;
    }

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

    .tc2av {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .92rem;
      font-weight: 700;
      font-family: 'Fraunces', serif;
    }

    /* CTA */
    .cta {
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
      text-align: center;
    }

    .cta .st {
      color: #fff;
    }

    .ctasub {
      color: rgba(255, 255, 255, .68);
      font-size: 1rem;
      margin: 11px auto 28px;
      max-width: 440px;
    }

    /* Footer */
    footer {
      background: var(--ink);
      padding: 48px 5% 20px;
      color: rgba(255, 255, 255, .45);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 30px;
      margin-bottom: 36px;
    }

    .fdesc {
      font-size: .82rem;
      line-height: 1.7;
      max-width: 220px;
      margin-top: 10px;
    }

    .fh4 {
      color: #fff;
      font-weight: 700;
      margin-bottom: 13px;
      font-size: .84rem;
    }

    .fl {
      display: block;
      color: rgba(255, 255, 255, .42);
      font-size: .8rem;
      margin-bottom: 8px;
      cursor: pointer;
      transition: color .18s;
    }

    .fl:hover {
      color: var(--amber);
    }

    .fbot {
      border-top: 1px solid rgba(255, 255, 255, .07);
      padding-top: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .76rem;
    }

    /* ============================================================ EXPLORE */
    .exp {
      padding: 38px 5%;
    }

    .fbar {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 20px 24px;
      margin-bottom: 24px;
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: flex-end;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    }

    .fgrp {
      min-width: 120px;
      flex: 1;
    }

    .fgrp label {
      font-size: .76rem;
      margin-bottom: 6px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .fgrp input,
    .fgrp select {
      padding: 10px 14px;
      font-size: .87rem;
    }

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

    .rcnt {
      font-size: .83rem;
      color: var(--muted);
      font-weight: 600;
    }

    .sortsel {
      font-size: .82rem;
      padding: 8px 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--rsm);
      background: var(--white);
      cursor: pointer;
      font-family: 'Cairo', sans-serif;
      font-weight: 600;
    }

    .empty {
      text-align: center;
      padding: 70px 20px;
      grid-column: 1/-1;
      color: var(--muted);
    }

    .emptyic {
      font-size: 3.5rem;
      margin-bottom: 14px;
    }

    /* ============================================================ PROFILE */
    .profwrap {
      padding: 38px 5%;
      max-width: 1060px;
      margin: 0 auto;
    }

    .proflay {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 22px;
      align-items: start;
    }

    .profhero {
      background: linear-gradient(138deg, var(--ink) 0%, var(--teal) 100%);
      border-radius: var(--r);
      padding: 30px;
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 18px;
    }

    .profav {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.9rem;
      font-weight: 900;
      font-family: 'Fraunces', serif;
      flex-shrink: 0;
      border: 4px solid rgba(255, 255, 255, .18);
      overflow: hidden;
    }

    .profav img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .profname {
      font-family: 'Fraunces', serif;
      font-size: 1.6rem;
      color: #fff;
      margin-bottom: 5px;
    }

    .profmeta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: rgba(255, 255, 255, .58);
      font-size: .82rem;
    }

    .profsec {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--r);
      padding: 22px;
      margin-bottom: 15px;
    }

    .profsec h3 {
      font-size: .93rem;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .skchips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .skchip {
      background: var(--teal3);
      color: var(--teal);
      border-radius: 100px;
      padding: 4px 14px;
      font-size: .78rem;
      font-weight: 600;
    }

    .revitem {
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }

    .revitem:last-child {
      border-bottom: none;
    }

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

    .revname {
      font-weight: 600;
      font-size: .84rem;
    }

    .revdate {
      font-size: .72rem;
      color: var(--muted);
    }

    .revtxt {
      font-size: .84rem;
      color: #374151;
      line-height: 1.62;
    }

    .avdisp {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      gap: 7px;
    }

    .avdcol {
      text-align: center;
    }

    .avdname {
      font-size: .7rem;
      font-weight: 700;
      color: var(--muted);
      padding: 5px;
      background: var(--cream2);
      border-radius: var(--rxs);
      margin-bottom: 4px;
    }

    .avdslot {
      font-size: .68rem;
      padding: 4px;
      background: var(--teal3);
      color: var(--teal);
      border-radius: var(--rxs);
      margin-bottom: 3px;
      font-weight: 600;
    }

    .expb {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--cream2);
      border-radius: var(--rsm);
      padding: 9px 14px;
      margin-bottom: 6px;
      margin-left: 6px;
      font-size: .83rem;
    }

    /* Booking Sidebar */
    .bksb {
      background: var(--white);
      border: 2px solid var(--border);
      border-radius: 18px;
      padding: 24px;
      position: sticky;
      top: calc(var(--nh) + 16px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
    }

    .bkprice {
      font-family: 'Fraunces', serif;
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--teal);
      line-height: 1;
    }

    .bkplbl {
      font-size: .8rem;
      color: var(--muted);
      margin-bottom: 16px;
      margin-top: 4px;
    }

    .tsGrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      margin: 8px 0;
    }

    .tsbtn {
      padding: 9px 3px;
      border: 2px solid var(--border);
      border-radius: var(--rsm);
      text-align: center;
      font-size: .76rem;
      font-weight: 700;
      cursor: pointer;
      transition: all .16s;
      background: var(--white);
      color: var(--ink);
      line-height: 1.3;
    }

    .tsbtn:hover:not(.taken) {
      border-color: var(--teal);
      color: var(--teal);
      background: var(--teal3);
    }

    .tsbtn.sel {
      border-color: var(--teal);
      background: var(--teal);
      color: #fff;
      box-shadow: 0 3px 10px rgba(13, 110, 117, .3);
    }

    .tsbtn.taken {
      background: #f8f8f8;
      color: #c0c7d0;
      cursor: not-allowed;
      border-color: #eee;
      font-size: .66rem;
    }

    /* ============================================================ DASHBOARD */
    .dashlay {
      display: grid;
      grid-template-columns: 240px 1fr;
      min-height: calc(100vh - var(--nh));
    }

    .sidebar {
      background: #0f172a;
      padding: 22px 0;
      position: sticky;
      top: var(--nh);
      height: calc(100vh - var(--nh));
      overflow-y: auto;
    }

    .sbu {
      padding: 16px 18px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      margin-bottom: 10px;
    }

    .sbav {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--amber);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      font-weight: 900;
      font-family: 'Fraunces', serif;
      color: var(--ink);
      margin-bottom: 10px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    }

    .sbav img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .sbname {
      color: #fff;
      font-weight: 700;
      font-size: .92rem;
    }

    .sbrole {
      display: inline-flex;
      align-items: center;
      background: rgba(245, 158, 11, .14);
      color: var(--amber);
      border-radius: 100px;
      padding: 2px 10px;
      font-size: .68rem;
      font-weight: 700;
      margin-top: 5px;
      letter-spacing: .02em;
    }

    .sbnav {
      padding: 0 8px;
    }

    .sbsl {
      font-size: .62rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .2);
      padding: 12px 8px 5px;
      margin-top: 5px;
    }

    .ni {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 11px;
      border-radius: 10px;
      color: rgba(255, 255, 255, .45);
      font-size: .84rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .16s;
      margin-bottom: 2px;
    }

    .ni:hover {
      background: rgba(255, 255, 255, .06);
      color: rgba(255, 255, 255, .85);
    }

    .ni.act {
      background: rgba(13, 110, 117, .25);
      color: var(--teal);
      border-right: 3px solid var(--teal);
    }

    .nic {
      font-size: .92rem;
      width: 18px;
      text-align: center;
      flex-shrink: 0;
    }

    .nibadge {
      margin-right: auto;
      background: var(--red);
      color: #fff;
      border-radius: 100px;
      padding: 1px 7px;
      font-size: .66rem;
      font-weight: 800;
    }

    .dashcon {
      padding: 32px;
      background: #f5f6fa;
      min-height: calc(100vh - var(--nh));
    }

    .dashph {
      font-family: 'Fraunces', serif;
      font-size: 1.85rem;
      margin-bottom: 22px;
      color: var(--ink);
    }

    .dashphdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .srow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    .sc {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
      transition: transform .2s, box-shadow .2s;
    }

    .sc:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, .09);
    }

    .sc.acc {
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
      border-color: var(--teal);
    }

    .sc.amb {
      background: linear-gradient(135deg, var(--amber) 0%, #e08d00 100%);
      border-color: var(--amber);
    }

    .scic {
      font-size: 1.4rem;
      margin-bottom: 10px;
    }

    .scval {
      font-family: 'Fraunces', serif;
      font-size: 2rem;
      font-weight: 900;
      color: var(--ink);
      line-height: 1;
    }

    .sc.acc .scval,
    .sc.acc .sclbl {
      color: rgba(255, 255, 255, .95);
    }

    .sc.amb .scval,
    .sc.amb .sclbl {
      color: #fff;
    }

    .sclbl {
      font-size: .74rem;
      color: var(--muted);
      margin-top: 5px;
      font-weight: 600;
    }

    .dsec {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    }

    .dsech {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      background: #fafbfc;
    }

    .dsect {
      font-weight: 700;
      font-size: .9rem;
      color: var(--ink);
    }

    .dtbl {
      width: 100%;
      border-collapse: collapse;
      min-width: 480px;
    }

    .dtbl th {
      padding: 11px 16px;
      background: #f8f9fb;
      font-size: .72rem;
      font-weight: 800;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      text-align: right;
      white-space: nowrap;
      border-bottom: 1.5px solid var(--border);
    }

    .dtbl td {
      padding: 13px 16px;
      border-top: 1px solid rgba(0, 0, 0, .04);
      font-size: .84rem;
      vertical-align: middle;
    }

    .dtbl tr:hover td {
      background: rgba(13, 110, 117, .025);
    }

    .tav {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: .84rem;
      font-family: 'Fraunces', serif;
      flex-shrink: 0;
    }

    /* Availability Grid */
    .avgrid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 7px;
      margin-top: 12px;
    }

    .avday {
      text-align: center;
    }

    .avdlbl {
      font-size: .7rem;
      font-weight: 700;
      padding: 5px 3px;
      background: var(--cream2);
      border-radius: var(--rxs);
      margin-bottom: 5px;
    }

    .avtog-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .avtog-sect {
      font-size: .66rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 4px 6px 2px;
      margin-top: 4px;
    }

    .avtog {
      padding: 5px 2px;
      background: var(--cream);
      border: 1.5px solid var(--border);
      border-radius: var(--rxs);
      font-size: .65rem;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      margin-bottom: 3px;
      transition: all .16s;
      color: var(--muted);
    }

    .avtog:hover {
      border-color: var(--teal);
      color: var(--teal);
    }

    .avtog.on {
      background: var(--teal);
      border-color: var(--teal);
      color: #fff;
    }

    /* ============================================================ WHATSAPP CHAT */
    #page-chat {
      height: calc(100vh - var(--nh));
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .chatlay {
      display: grid;
      grid-template-columns: 340px 1fr;
      height: 100%;
      overflow: hidden;
    }

    /* Contacts */
    .cpanel {
      background: var(--white);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .cphdr {
      padding: 14px 16px;
      background: var(--teal);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .cphdr-title {
      font-weight: 700;
      color: #fff;
      font-size: .95rem;
    }

    .cpsrch {
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .cpsrch input {
      border-radius: 100px;
      padding: 9px 16px;
      background: var(--cream2);
      border-color: transparent;
      font-size: .85rem;
    }

    .cpsrch input:focus {
      border-color: var(--teal);
    }

    .clist {
      overflow-y: auto;
      flex: 1;
    }

    .clist::-webkit-scrollbar {
      width: 3px;
    }

    .clist::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }

    .citem {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      cursor: pointer;
      border-bottom: 1px solid rgba(0, 0, 0, .04);
      transition: background .14s;
      position: relative;
    }

    .citem:hover {
      background: var(--cream);
    }

    .citem.act {
      background: var(--teal3);
    }

    .ciav {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 1.1rem;
      font-family: 'Fraunces', serif;
      flex-shrink: 0;
      overflow: hidden;
    }

    .ciav img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .ciinfo {
      flex: 1;
      min-width: 0;
    }

    .ciname {
      font-weight: 700;
      font-size: .88rem;
      margin-bottom: 2px;
    }

    .ciprev {
      font-size: .76rem;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 185px;
    }

    .citime {
      font-size: .68rem;
      color: var(--muted);
      position: absolute;
      top: 12px;
      left: 14px;
    }

    .cibadge {
      background: var(--wa-green);
      color: #fff;
      border-radius: 100px;
      min-width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .66rem;
      font-weight: 700;
      position: absolute;
      bottom: 12px;
      left: 14px;
      padding: 0 4px;
    }

    .nocont {
      padding: 40px 20px;
      text-align: center;
      color: var(--muted);
      font-size: .85rem;
    }

    /* Chat window */
    .chatwin {
      display: flex;
      flex-direction: column;
      background: var(--wa-bg);
      overflow: hidden;
    }

    .chwinhdr {
      background: var(--teal);
      padding: 11px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .chwinhdr .backbtn {
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 1.2rem;
      padding: 2px 5px;
    }

    .cwhav {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--amber);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-family: 'Fraunces', serif;
      font-size: .95rem;
      overflow: hidden;
      flex-shrink: 0;
    }

    .cwhav img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cwhinfo {
      flex: 1;
    }

    .cwhname {
      font-weight: 700;
      color: #fff;
      font-size: .92rem;
    }

    .cwhstatus {
      font-size: .72rem;
      color: rgba(255, 255, 255, .7);
    }

    .cwhact {
      display: flex;
      gap: 4px;
    }

    .cwhbtn {
      background: rgba(255, 255, 255, .12);
      border: none;
      color: #fff;
      cursor: pointer;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      transition: background .16s;
    }

    .cwhbtn:hover {
      background: rgba(255, 255, 255, .22);
    }

    /* Messages area */
    .chatmsgs {
      flex: 1;
      overflow-y: auto;
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: var(--wa-bg) url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .chatmsgs::-webkit-scrollbar {
      width: 4px;
    }

    .chatmsgs::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, .12);
      border-radius: 4px;
    }

    .datesep {
      text-align: center;
      margin: 10px 0;
    }

    .datesep span {
      background: rgba(255, 255, 255, .85);
      color: var(--muted);
      font-size: .72rem;
      padding: 4px 13px;
      border-radius: 100px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
      font-weight: 600;
    }

    /* 
  RTL FIX: In Arabic RTL layout:
  - flex-start = RIGHT side of screen
  - flex-end   = LEFT  side of screen
  My messages (mine/sent) → LEFT side  → align-items: flex-end
  Their messages (theirs) → RIGHT side → align-items: flex-start
  BUT the page is dir=rtl so we use margin instead of align-items for reliability
*/
    .mrow {
      display: flex;
      flex-direction: row;
      margin-bottom: 3px;
      width: 100%;
    }

    .mrow.mine {
      justify-content: flex-start;
    }

    /* LEFT in RTL = my sent messages */
    .mrow.theirs {
      justify-content: flex-end;
    }

    /* RIGHT in RTL = received messages */
    .mbub {
      max-width: 72%;
      padding: 8px 13px 6px;
      border-radius: 12px;
      font-size: .88rem;
      line-height: 1.58;
      word-break: break-word;
      position: relative;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    }

    .mbub.mine {
      background: #d9fdd3;
      color: #111827;
      border-radius: 12px 12px 12px 3px;
    }

    .mbub.theirs {
      background: #ffffff;
      color: #111827;
      border-radius: 12px 12px 3px 12px;
    }

    .mtext {
      white-space: pre-wrap;
    }

    .mtime {
      font-size: .65rem;
      color: rgba(0, 0, 0, .4);
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 3px;
      justify-content: flex-end;
      direction: ltr;
    }

    .rtick {
      color: #53bdeb;
      font-size: .72rem;
    }

    /* Chat input */
    .chatinparea {
      background: #f0f2f5;
      padding: 10px 14px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 9px;
      flex-shrink: 0;
    }

    .chatinparea input {
      border-radius: 100px;
      padding: 11px 20px;
      background: var(--white);
      border: 1.5px solid rgba(0, 0, 0, .08);
      font-size: .9rem;
      flex: 1;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    }

    .chatinparea input:focus {
      border-color: var(--teal);
      box-shadow: 0 1px 3px rgba(13, 110, 117, .15);
    }

    .sendbtn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--teal);
      border: none;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      transition: all .18s;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(13, 110, 117, .3);
    }

    .sendbtn:hover {
      background: var(--teal2);
      transform: scale(1.05);
    }

    .chatempty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: var(--muted);
      text-align: center;
      padding: 40px;
    }

    .chatemptyic {
      font-size: 4rem;
      margin-bottom: 16px;
      opacity: .35;
    }

    /* ============================================================ SESSION */
    #page-session {
      position: fixed;
      inset: 0;
      z-index: 999;
      background: #080c12;
      display: flex;
      flex-direction: column;
    }

    .sesbar {
      background: rgba(0, 0, 0, .6);
      padding: 10px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .seslogo {
      font-family: 'Fraunces', serif;
      font-weight: 900;
      color: var(--teal);
      font-size: 1.1rem;
    }

    .seslogo span {
      color: var(--amber);
    }

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

    .sestitle {
      color: #fff;
      font-weight: 600;
      font-size: .86rem;
    }

    .sestimer {
      font-family: 'Fraunces', serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--amber);
    }

    .sesdot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      animation: pu 1.5s ease-in-out infinite;
    }

    .sesstatus {
      font-size: .73rem;
      color: rgba(255, 255, 255, .5);
    }

    .sesmain {
      flex: 1;
      position: relative;
      overflow: hidden;
      display: flex;
    }

    #remVid {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #remWrap {
      flex: 1;
      position: relative;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #locWrap {
      position: absolute;
      bottom: 82px;
      right: 14px;
      width: 185px;
      height: 138px;
      border-radius: 11px;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, .16);
      box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
      z-index: 10;
      background: #111;
      cursor: move;
    }

    #locVid {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scaleX(-1);
    }

    .waitov {
      position: absolute;
      inset: 0;
      background: rgba(8, 12, 18, .85);
      backdrop-filter: blur(8px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 13px;
      color: #fff;
      z-index: 5;
      text-align: center;
    }

    .waitov h3 {
      font-family: 'Fraunces', serif;
      font-size: 1.4rem;
    }

    .waitov p {
      color: rgba(255, 255, 255, .52);
      font-size: .85rem;
    }

    /* Session chat panel */
    .seschat {
      width: 290px;
      background: rgba(11, 17, 23, .96);
      border-right: 1px solid rgba(255, 255, 255, .07);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }

    .seschathdr {
      padding: 11px 15px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      color: #fff;
      font-weight: 600;
      font-size: .86rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sesmsgs {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .sesmsgs::-webkit-scrollbar {
      width: 3px;
    }

    .sesmsgs::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .1);
      border-radius: 3px;
    }

    .sesmb {
      max-width: 90%;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: .8rem;
      line-height: 1.5;
      word-break: break-word;
    }

    .sesmb.mine {
      background: var(--teal);
      color: #fff;
      margin-right: auto;
      border-bottom-right-radius: 2px;
    }

    .sesmb.theirs {
      background: rgba(255, 255, 255, .1);
      color: #fff;
      margin-left: auto;
      border-bottom-left-radius: 2px;
    }

    .sesmeta {
      font-size: .64rem;
      opacity: .5;
      margin-top: 3px;
    }

    .sesinp {
      padding: 10px 11px;
      border-top: 1px solid rgba(255, 255, 255, .07);
      display: flex;
      gap: 7px;
    }

    .sesinp input {
      background: rgba(255, 255, 255, .07);
      border-color: transparent;
      color: #fff;
      border-radius: 100px;
      padding: 8px 13px;
      font-size: .8rem;
    }

    .sesinp input:focus {
      border-color: rgba(255, 255, 255, .16);
      box-shadow: none;
    }

    .sesinp input::placeholder {
      color: rgba(255, 255, 255, .28);
    }

    /* Controls */
    .sesctrls {
      background: rgba(0, 0, 0, .74);
      backdrop-filter: blur(10px);
      padding: 13px 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      flex-shrink: 0;
      border-top: 1px solid rgba(255, 255, 255, .06);
    }

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

    .cbtn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      transition: all .2s;
      flex-shrink: 0;
    }

    .cbtn.on {
      background: rgba(255, 255, 255, .13);
      color: #fff;
    }

    .cbtn.on:hover {
      background: rgba(255, 255, 255, .2);
    }

    .cbtn.off {
      background: var(--red);
      color: #fff;
    }

    .cbtn.scron {
      background: var(--blue);
      color: #fff;
    }

    .cbtn.end {
      background: var(--red);
      color: #fff;
      width: 54px;
      height: 54px;
    }

    .cbtn.chattog {
      background: rgba(255, 255, 255, .11);
      color: #fff;
    }

    .cbtn.chattog.unread {
      background: var(--amber);
      color: #fff;
    }

    .clbl {
      font-size: .63rem;
      color: rgba(255, 255, 255, .44);
      text-align: center;
    }

    /* ============================================================ WALLET */
    .walwrap {
      padding: 44px 5%;
      max-width: 780px;
      margin: 0 auto;
    }

    .walcard {
      background: linear-gradient(135deg, var(--teal) 0%, #064e56 100%);
      border-radius: 20px;
      padding: 36px;
      color: #fff;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(13, 110, 117, .35);
    }

    .walcard::before {
      content: '';
      position: absolute;
      right: -40px;
      top: -40px;
      width: 200px;
      height: 200px;
      background: rgba(255, 255, 255, .06);
      border-radius: 50%;
    }

    .walcard::after {
      content: '';
      position: absolute;
      left: 40px;
      bottom: -60px;
      width: 160px;
      height: 160px;
      background: rgba(255, 255, 255, .04);
      border-radius: 50%;
    }

    .wallbl {
      font-size: .82rem;
      color: rgba(255, 255, 255, .6);
      margin-bottom: 6px;
      position: relative;
      letter-spacing: .05em;
    }

    .walamt {
      font-family: 'Fraunces', serif;
      font-size: 3.8rem;
      font-weight: 900;
      line-height: 1;
      position: relative;
    }

    .walamt span {
      font-size: 1.8rem;
      vertical-align: super;
      margin-left: 4px;
    }

    .topupg {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }

    .topupbtn {
      padding: 15px;
      border: 2px solid var(--border);
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: all .2s;
      background: var(--white);
      font-weight: 800;
      font-size: 1.05rem;
      color: var(--teal);
      box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
    }

    .topupbtn:hover {
      border-color: var(--teal);
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(13, 110, 117, .18);
    }

    .txitem {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      transition: box-shadow .2s;
    }

    .txitem:hover {
      box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
    }

    .txic {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
      flex-shrink: 0;
      margin-left: 13px;
    }

    .txic.cr {
      background: var(--green2);
    }

    .txic.db {
      background: var(--red2);
    }

    .txcr {
      font-weight: 800;
      color: var(--green);
      font-size: .95rem;
    }

    .txdb {
      font-weight: 800;
      color: var(--red);
      font-size: .95rem;
    }

    /* ============================================================ EDIT PROFILE */
    .editwrap {
      padding: 38px 5%;
      max-width: 680px;
      margin: 0 auto;
    }

    .avupld {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 18px;
    }

    .avprev {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--amber);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      font-weight: 900;
      font-family: 'Fraunces', serif;
      overflow: hidden;
      border: 3px solid var(--border);
    }

    .avprev img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .skbox {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px;
      border: 2px solid var(--border);
      border-radius: var(--rsm);
      background: var(--white);
      min-height: 44px;
      cursor: text;
      transition: border-color .18s;
    }

    .skbox:focus-within {
      border-color: var(--teal);
    }

    .sktag {
      display: flex;
      align-items: center;
      gap: 4px;
      background: var(--teal3);
      color: var(--teal);
      border-radius: 100px;
      padding: 3px 10px;
      font-size: .78rem;
      font-weight: 600;
    }

    .sktag button {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--teal);
      font-size: .84rem;
      padding: 0;
      line-height: 1;
    }

    .skbox input {
      border: none;
      outline: none;
      padding: 3px 6px;
      font-size: .84rem;
      min-width: 100px;
      flex: 1;
      background: transparent;
    }

    /* Registration Stepper */
    .stepind {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
    }

    .sd {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .8rem;
      font-weight: 700;
      color: var(--muted);
      transition: all .28s;
      flex-shrink: 0;
    }

    .sd.act {
      background: var(--teal);
      border-color: var(--teal);
      color: #fff;
    }

    .sd.done {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
    }

    .sline {
      flex: 1;
      height: 2px;
      background: var(--border);
      max-width: 32px;
      transition: background .28s;
    }

    .sline.done {
      background: var(--green);
    }

    /* Modals */
    .mov {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .65);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fIn .18s ease;
    }

    @keyframes fIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .modal {
      background: var(--white);
      border-radius: 20px;
      max-width: 500px;
      width: 100%;
      position: relative;
      box-shadow: 0 25px 60px rgba(0, 0, 0, .22);
      animation: sUp .24s cubic-bezier(.34, 1.56, .64, 1);
      max-height: 93vh;
      overflow-y: auto;
      border: 1px solid rgba(255, 255, 255, .4);
    }

    .mi {
      padding: 32px;
    }

    @keyframes sUp {
      from {
        transform: translateY(22px) scale(.97);
        opacity: 0;
      }

      to {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    .mc {
      position: absolute;
      top: 14px;
      left: 14px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: var(--cream2);
      cursor: pointer;
      font-size: .94rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .16s;
      z-index: 1;
      color: var(--muted);
      font-weight: 700;
    }

    .mc:hover {
      background: var(--cream3);
      color: var(--ink);
    }

    .mlogo {
      text-align: center;
      margin-bottom: 20px;
    }

    .mtitle {
      font-family: 'Fraunces', serif;
      font-size: 1.5rem;
      text-align: center;
      margin-bottom: 6px;
      color: var(--ink);
    }

    .msub {
      text-align: center;
      color: var(--muted);
      font-size: .86rem;
      margin-bottom: 22px;
      line-height: 1.6;
    }

    .roleg {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      margin-bottom: 18px;
    }

    .ro {
      padding: 16px 10px;
      border: 2px solid var(--border);
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: all .2s;
    }

    .ro:hover,
    .ro.act {
      border-color: var(--teal);
      background: rgba(13, 110, 117, .05);
    }

    .ro.act {
      border-width: 2.5px;
    }

    .roic {
      font-size: 1.75rem;
      margin-bottom: 7px;
      display: block;
    }

    .rotitle {
      font-weight: 700;
      font-size: .86rem;
      color: var(--ink);
    }

    .rodesc {
      font-size: .7rem;
      color: var(--muted);
      margin-top: 3px;
      line-height: 1.4;
    }

    .asw {
      text-align: center;
      font-size: .84rem;
      color: var(--muted);
      margin-top: 18px;
    }

    .asw a {
      color: var(--teal);
      font-weight: 700;
      cursor: pointer;
    }

    /* Confirm lines */
    .cl {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--cream);
      border-radius: var(--rsm);
      padding: 11px 15px;
      margin-bottom: 7px;
      font-size: .85rem;
    }

    .pline {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      font-size: .85rem;
      border-bottom: 1px solid var(--border);
    }

    .pline:last-child {
      border-bottom: none;
      font-weight: 800;
      font-size: .95rem;
      padding-top: 10px;
      color: var(--ink);
    }

    /* Stars */
    .starrow {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin: 12px 0;
    }

    .sbtn {
      font-size: 2.4rem;
      cursor: pointer;
      transition: transform .13s;
      color: #dde1e7;
      background: none;
      border: none;
    }

    .sbtn:hover,
    .sbtn.lit {
      color: var(--amber);
      transform: scale(1.22);
    }

    /* Toast */
    .toastc {
      position: fixed;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 600;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
      pointer-events: none;
    }

    .toast {
      background: var(--ink);
      color: #fff;
      padding: 11px 20px;
      border-radius: 100px;
      font-size: .84rem;
      font-weight: 600;
      box-shadow: var(--shlg);
      transform: translateY(80px);
      opacity: 0;
      transition: all .32s cubic-bezier(.34, 1.56, .64, 1);
      white-space: nowrap;
      pointer-events: auto;
      max-width: 90vw;
    }

    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }

    .toast.suc {
      background: var(--green);
    }

    .toast.err {
      background: var(--red);
    }

    .toast.inf {
      background: var(--blue);
    }

    /* Page animation */
    .page {
      animation: pIn .28s cubic-bezier(.34, 1.2, .64, 1);
    }

    @keyframes pIn {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Scrollbar global */
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }

    *::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    *::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 6px;
    }

    *::-webkit-scrollbar-track {
      background: transparent;
    }

    /* ============================================================
       PAYMENT SYSTEM STYLES - Multi-Method
    ============================================================ */

    /* Payment method tabs */
    .pay-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .pay-tab {
      flex: 1;
      min-width: 100px;
      padding: 10px 8px;
      border: 2px solid var(--border);
      border-radius: var(--rsm);
      font-family: 'Cairo', sans-serif;
      font-size: .78rem;
      font-weight: 700;
      cursor: pointer;
      background: var(--white);
      color: var(--muted);
      transition: all .2s;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .pay-tab .pt-ic {
      font-size: 1.3rem;
      line-height: 1;
    }

    .pay-tab.active {
      border-color: var(--teal);
      background: var(--teal3);
      color: var(--teal);
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(13, 110, 117, .15);
    }

    .pay-tab:hover:not(.active) {
      border-color: var(--teal);
      color: var(--teal);
    }

    .pay-panel {
      display: none;
    }

    .pay-panel.active {
      display: block;
    }

    /* Amount grid */
    .amt-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 14px;
    }

    @media (max-width: 480px) {
      .amt-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .amt-btn {
      padding: 13px 6px;
      border: 2px solid var(--border);
      border-radius: var(--rsm);
      text-align: center;
      cursor: pointer;
      transition: all .18s;
      background: var(--white);
      color: var(--ink);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .amt-btn .amt-num {
      font-size: 1.1rem;
      font-weight: 900;
      font-family: 'Fraunces', serif;
      line-height: 1;
    }

    .amt-btn .amt-cur {
      font-size: .62rem;
      font-weight: 700;
      color: var(--muted);
    }

    .amt-btn.sel {
      border-color: var(--teal);
      background: var(--teal);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(13, 110, 117, .3);
    }

    .amt-btn.sel .amt-cur {
      color: rgba(255, 255, 255, .75);
    }

    /* Payment info box */
    .pay-info-box {
      background: linear-gradient(135deg, #f0f9ff, #e6f4f5);
      border: 1.5px solid rgba(13, 110, 117, .2);
      border-radius: var(--rsm);
      padding: 16px;
      margin-bottom: 14px;
    }

    .pay-info-box .pib-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 0;
      border-bottom: 1px solid rgba(13, 110, 117, .08);
      font-size: .85rem;
    }

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

    .pay-info-box .pib-label {
      color: var(--muted);
      font-size: .8rem;
    }

    .pay-info-box .pib-val {
      font-weight: 800;
      color: var(--ink);
      font-size: .9rem;
    }

    .pib-copy {
      background: none;
      border: 1.5px solid var(--teal);
      color: var(--teal);
      border-radius: var(--rxs);
      padding: 2px 8px;
      font-size: .72rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Cairo', sans-serif;
      transition: all .15s;
    }

    .pib-copy:hover {
      background: var(--teal);
      color: #fff;
    }

    /* Pay button */
    .pay-submit-btn {
      width: 100%;
      padding: 15px;
      font-size: 1rem;
      font-weight: 800;
      background: linear-gradient(135deg, var(--teal), var(--teal2));
      color: #fff;
      border: none;
      border-radius: var(--r);
      font-family: 'Cairo', sans-serif;
      cursor: pointer;
      transition: all .22s;
      box-shadow: 0 6px 20px rgba(13, 110, 117, .3);
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .pay-submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(13, 110, 117, .4);
    }

    .pay-submit-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none !important;
    }

    /* Payment processing overlay */
    #payProcessingOv {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .82);
      backdrop-filter: blur(8px);
      z-index: 9998;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      color: #fff;
      text-align: center;
    }

    #payProcessingOv .spin {
      border-color: rgba(255, 255, 255, .15);
      border-top-color: #fff;
    }

    /* Withdrawal UI */
    .withdraw-form {
      display: none;
    }

    .withdraw-form.open {
      display: block;
    }

    .withdraw-method-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 16px;
      border: 2px solid var(--border);
      border-radius: var(--rsm);
      background: var(--white);
      cursor: pointer;
      transition: all .18s;
      margin-bottom: 8px;
      font-family: 'Cairo', sans-serif;
      font-size: .88rem;
      font-weight: 700;
    }

    .withdraw-method-btn:hover {
      border-color: var(--teal);
      background: var(--teal3);
      color: var(--teal);
    }

    .withdraw-method-btn.sel {
      border-color: var(--teal);
      background: var(--teal3);
      color: var(--teal);
    }

    .withdraw-method-btn .wm-ic {
      font-size: 1.4rem;
    }

    .withdraw-req-card {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--r);
      padding: 14px 16px;
      margin-bottom: 8px;
    }

    .wrq-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 100px;
      font-size: .72rem;
      font-weight: 700;
    }

    .wrq-pending {
      background: var(--amber3);
      color: #92400e;
    }

    .wrq-approved {
      background: var(--green2);
      color: #065f46;
    }

    .wrq-rejected {
      background: var(--red2);
      color: #b91c1c;
    }

    /* ── IMPROVED TYPOGRAPHY GLOBAL ── */
    .page-hero-title {
      font-family: 'Fraunces', serif;
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 900;
      margin-bottom: 4px;
    }

    .page-hero-sub {
      font-size: .88rem;
      color: var(--muted);
      margin-top: 4px;
    }

    /* ── IMPROVED SECTION HEADERS ── */
    .sh {
      margin-bottom: 44px;
    }

    .sh .sl {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(245, 158, 11, .1);
      border: 1px solid rgba(245, 158, 11, .25);
      color: #b45309;
      border-radius: 100px;
      padding: 3px 12px;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    /* ── IMPROVED CATEGORY CARDS ── */
    .cc {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 22px 14px;
      text-align: center;
      cursor: pointer;
      transition: all .24s cubic-bezier(.34, 1.4, .64, 1);
      position: relative;
      overflow: hidden;
    }

    .cc::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--teal), var(--teal2));
      opacity: 0;
      transition: opacity .22s;
    }

    .cc:hover {
      border-color: var(--teal);
      transform: translateY(-5px);
      box-shadow: 0 12px 32px rgba(13, 110, 117, .18);
    }

    .cc:hover::after {
      opacity: 1;
    }

    .cc:hover .ccic,
    .cc:hover .ccn,
    .cc:hover .ccc {
      position: relative;
      z-index: 1;
      color: #fff !important;
    }

    /* ── IMPROVED TEACHER CARDS ── */
    .tc {
      background: var(--white);
      border-radius: 18px;
      overflow: hidden;
      border: 1.5px solid var(--border);
      transition: all .3s cubic-bezier(.34, 1.4, .64, 1);
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
      display: flex;
      flex-direction: column;
    }

    .tcb {
      padding: 44px 18px 18px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .tc .btn {
      margin-top: auto;
    }

    /* ── IMPROVED HERO STATS ── */
    .hstats {
      gap: 22px;
    }

    .hstats>div {
      padding: 14px 18px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 12px;
      text-align: center;
    }

    /* ── IMPROVED STEP CARDS ── */
    .step {
      padding: 26px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .04);
      transition: all .22s;
      position: relative;
      overflow: hidden;
    }

    .step::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 3px;
      height: 100%;
      background: rgba(245, 158, 11, .3);
    }

    .step:hover {
      background: rgba(255, 255, 255, .07);
      transform: translateX(-4px);
    }

    .step:hover::before {
      background: var(--amber);
    }

    /* ── IMPROVED TESTIMONIAL CARDS ── */
    .tc2 {
      background: var(--white);
      border-radius: 18px;
      padding: 24px;
      border: 1.5px solid var(--border);
      transition: box-shadow .22s, transform .22s;
    }

    .tc2:hover {
      box-shadow: 0 10px 32px rgba(0, 0, 0, .1);
      transform: translateY(-3px);
    }

    .tc2q {
      font-family: 'Fraunces', serif;
      font-size: 3rem;
      color: var(--amber);
      line-height: .8;
    }

    /* ── IMPROVED FOOTER ── */
    footer {
      background: #060c10;
    }

    .fbot {
      color: rgba(255, 255, 255, .28);
    }

    /* ── WALLET PAGE IMPROVEMENTS ── */
    .walcard {
      border-radius: 22px;
      padding: 28px 28px 22px;
      background: linear-gradient(145deg, #0c1e2e 0%, #0d4e75 50%, #0d6e75 100%);
      position: relative;
      overflow: hidden;
    }

    .walcard::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 220px;
      height: 220px;
      background: rgba(255, 255, 255, .05);
      border-radius: 50%;
      pointer-events: none;
    }

    .walcard::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: 20px;
      width: 180px;
      height: 180px;
      background: rgba(255, 255, 255, .03);
      border-radius: 50%;
      pointer-events: none;
    }

    /* ── TX ITEM IMPROVED ── */
    .txitem {
      background: var(--white);
      border: none;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      margin-bottom: 0;
      padding: 14px 18px;
    }

    .txitem:last-child {
      border-bottom: none;
    }

    .txitem:first-child {
      border-radius: var(--r) var(--r) 0 0;
    }

    .txitem:hover {
      background: var(--cream);
    }

    /* ── IMPROVED MODALS ── */
    .modal {
      border: 1px solid rgba(0, 0, 0, .06);
    }

    .mov {
      background: rgba(8, 16, 28, .7);
    }

    /* ── EXPLORE PAGE IMPROVEMENTS ── */
    .exp {
      max-width: 1280px;
      margin: 0 auto;
    }

    /* ── IMPROVED BUTTONS ── */
    .btn-p {
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
      box-shadow: 0 4px 14px rgba(13, 110, 117, .25);
    }

    .btn-a {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    /* ── HOMEPAGE HERO IMPROVEMENTS ── */
    .hero {
      background: linear-gradient(148deg, #050d14 0%, #0b2a35 45%, #0e5c66 100%);
    }

    .hero::before {
      background:
        radial-gradient(ellipse 55% 60% at 88% 40%, rgba(245, 158, 11, .13) 0%, transparent 55%),
        radial-gradient(ellipse 40% 50% at 10% 80%, rgba(13, 110, 117, .4) 0%, transparent 55%),
        radial-gradient(ellipse 30% 40% at 50% 0%, rgba(13, 110, 117, .15) 0%, transparent 60%);
    }

    /* ── NAVBAR LOGO ENHANCEMENT ── */
    .logo {
      transition: opacity .18s;
    }

    .logo:hover {
      opacity: .82;
    }

    /* ── PROFILE PAGE IMPROVEMENTS ── */
    .profhero {
      border-radius: 18px;
    }

    .bksb {
      border-radius: 20px;
    }

    /* ── DASHBOARD IMPROVEMENTS ── */
    .sidebar {
      border-left: 1px solid rgba(255, 255, 255, .04);
    }

    .dsech {
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--cream);
      border-radius: var(--r) var(--r) 0 0;
    }

    .dsect {
      font-weight: 700;
      font-size: .9rem;
    }

    /* ── LOADING SCREEN ── */
    #loadScreen {
      background: linear-gradient(148deg, #050d14 0%, #0b2a35 50%, #0e5c66 100%);
    }

    /* ── CTA SECTION IMPROVEMENT ── */
    .cta {
      background: linear-gradient(145deg, #0a5260 0%, var(--teal) 50%, #0a7c86 100%);
      position: relative;
      overflow: hidden;
    }

    .cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(245, 158, 11, .12) 0%, transparent 60%);
    }

    /* ── WCHIP (WALLET CHIP) ── */
    .wchip {
      background: linear-gradient(135deg, var(--teal3), #d4eff0);
      border-color: rgba(13, 110, 117, .22);
    }

    /* ── MOBILE TOPUP GRID ── */
    @media (max-width: 480px) {
      .topupg {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .walcard {
        padding: 22px 18px 18px;
      }

      .walamt {
        font-size: 2.8rem;
      }
    }

    /* ── COMPREHENSIVE MOBILE RESPONSIVE ── */
    @media (max-width: 768px) {

      /* Footer */
      .footer-grid,
      .footgrid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
      }

      /* Profile */
      .proflay {
        grid-template-columns: 1fr !important;
      }

      .bksb {
        position: static !important;
      }

      /* Dashboard */
      .dashlay {
        grid-template-columns: 1fr !important;
      }

      .sidebar {
        display: none !important;
      }

      /* Chat */
      .chatlay {
        grid-template-columns: 1fr !important;
      }

      .cpanel {
        border-left: none;
      }

      /* Hero grid */
      .hg {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }

      .fwrap {
        display: none !important;
      }

      /* Session chat panel */
      .seschat {
        width: 100% !important;
      }

      /* Table scroll */
      .dtbl {
        font-size: .78rem;
      }

      .dtbl th,
      .dtbl td {
        padding: 9px 10px;
      }

      /* Sections */
      section {
        padding: 50px 4%;
      }

      /* Admin */
      .dsec {
        overflow-x: auto;
      }
    }

    @media (max-width: 480px) {

      /* Nav links */
      .nl {
        display: none;
      }

      .hamburger {
        display: flex;
      }

      .bottom-nav {
        display: block;
      }

      /* Forms */
      .fr {
        grid-template-columns: 1fr !important;
      }

      /* Footer */
      .footer-grid,
      .footgrid {
        grid-template-columns: 1fr !important;
      }

      /* Hero */
      .htitle {
        font-size: clamp(2rem, 8vw, 3.2rem);
      }

      /* Wallet wrap */
      .walwrap {
        padding: 20px 4%;
      }

      /* Pay tabs */
      .pay-tabs {
        grid-template-columns: 1fr 1fr;
      }

      /* Stats */
      .srow {
        grid-template-columns: 1fr 1fr;
      }

      /* Category grid */
      .cg {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      }

      /* Teacher grid */
      .tgrid {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* Ensure bottom nav padding on mobile */
    @media (max-width: 480px) {
      .page:not(#page-chat):not(#page-session) {
        padding-bottom: 70px;
      }
    }

    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      border: none;
      background: transparent;
      cursor: pointer;
      border-radius: var(--rsm);
      transition: background .18s;
      flex-shrink: 0;
    }

    .hamburger:hover {
      background: var(--cream2);
    }

    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: all .28s cubic-bezier(.34, 1.56, .64, 1);
    }

    .hamburger.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }

    .hamburger.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .mob-menu {
      display: none;
      position: fixed;
      top: var(--nh);
      right: 0;
      left: 0;
      background: rgba(255, 255, 255, .98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 99;
      border-bottom: 1px solid var(--border);
      box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
      padding: 12px 5% 16px;
      animation: mobMenuIn .22s cubic-bezier(.34, 1.2, .64, 1);
    }

    @keyframes mobMenuIn {
      from {
        opacity: 0;
        transform: translateY(-14px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .mob-menu.open {
      display: block;
    }

    .mob-menu-links {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .mob-nli {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 14px;
      border-radius: var(--r);
      font-weight: 700;
      font-size: .92rem;
      color: var(--ink);
      cursor: pointer;
      transition: all .18s;
    }

    .mob-nli:hover {
      background: var(--teal3);
      color: var(--teal);
    }

    .mob-nli .nli-ic {
      font-size: 1.1rem;
      width: 26px;
      text-align: center;
    }

    .mob-menu-divider {
      height: 1px;
      background: var(--border);
      margin: 8px 0;
    }

    .mob-menu-auth {
      display: flex;
      gap: 8px;
      padding-top: 4px;
    }

    .mob-menu-auth .btn {
      flex: 1;
      justify-content: center;
    }

    /* Bottom Nav Bar (mobile only) */
    .bottom-nav {
      display: none;
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid var(--border);
      z-index: 90;
      padding: 6px 0 max(6px, env(safe-area-inset-bottom));
      box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
    }

    .bottom-nav-inner {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .bn-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      cursor: pointer;
      padding: 6px 14px;
      border-radius: 12px;
      transition: all .2s;
      min-width: 60px;
      position: relative;
    }

    .bn-item:active {
      transform: scale(.93);
    }

    .bn-item .bn-ic {
      font-size: 1.35rem;
      line-height: 1;
    }

    .bn-item .bn-lbl {
      font-size: .62rem;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: .01em;
    }

    .bn-item.active .bn-lbl {
      color: var(--teal);
    }

    .bn-item.active .bn-ic {
      filter: drop-shadow(0 0 4px rgba(13, 110, 117, .4));
    }

    .bn-badge {
      position: absolute;
      top: 4px;
      right: 10px;
      background: var(--red);
      color: #fff;
      border-radius: 100px;
      padding: 1px 5px;
      font-size: .58rem;
      font-weight: 800;
      min-width: 16px;
      text-align: center;
      border: 1.5px solid #fff;
    }

    /* Scroll-to-top button */
    .scroll-top {
      position: fixed;
      bottom: 90px;
      left: 16px;
      width: 42px;
      height: 42px;
      background: var(--ink);
      color: #fff;
      border: none;
      border-radius: 50%;
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 88;
      transition: all .24s;
    }

    .scroll-top.show {
      display: flex;
    }

    .scroll-top:hover {
      background: var(--teal);
      transform: translateY(-2px);
    }

    /* ============================================================
       RESPONSIVE — LARGE TABLET (1024px)
    ============================================================ */
    @media (max-width: 1024px) {
      .hg {
        grid-template-columns: 1fr;
      }

      .hfcwrap {
        display: none;
      }

      .proflay {
        grid-template-columns: 1fr;
      }

      .dashlay {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: static;
        height: auto;
        padding: 10px 0;
        background: #0f172a;
      }

      .sbnav {
        display: flex;
        flex-wrap: wrap;
        padding: 0 8px;
        gap: 2px;
      }

      .ni {
        padding: 7px 10px;
        font-size: .8rem;
        border-right: none !important;
      }

      .srow {
        grid-template-columns: 1fr 1fr;
      }

      .avgrid {
        grid-template-columns: repeat(4, 1fr);
      }

      .chatlay {
        grid-template-columns: 1fr;
      }

      .cpanel {
        height: 220px;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
    }

    /* ============================================================
       RESPONSIVE — SMALL TABLET / LARGE PHONE (768px)
    ============================================================ */
    @media (max-width: 768px) {
      :root {
        --nh: 58px;
      }

      .navbar {
        padding: 0 4%;
        gap: 10px;
      }

      .nl {
        display: none;
      }

      .hamburger {
        display: flex;
      }

      .bottom-nav {
        display: block;
      }

      .scroll-top {
        bottom: 76px;
      }

      /* Push page content above bottom nav */
      #page-home,
      #page-explore,
      #page-wallet,
      #page-editProfile,
      #page-admin,
      #page-profile {
        padding-bottom: 72px;
      }

      .navbar .nav-r #ngst {
        gap: 6px;
      }

      .navbar .nav-r #nusr {
        gap: 6px;
      }

      /* Hero */
      .hero {
        padding: 10% 4% 8%;
        min-height: auto;
      }

      .htitle {
        font-size: clamp(2rem, 7vw, 2.8rem);
      }

      .hsub {
        font-size: .93rem;
      }

      .hstats {
        gap: 18px;
        flex-wrap: wrap;
      }

      .hn {
        font-size: 1.65rem;
      }

      .hsearch {
        max-width: 100%;
      }

      /* Sections */
      section {
        padding: 52px 4%;
      }

      /* Categories */
      .cg {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
      }

      /* Teacher grid */
      .tgrid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 14px;
      }

      /* Steps */
      .steps {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      /* Testimonials */
      .tg2 {
        grid-template-columns: 1fr;
      }

      /* Footer */
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }

      /* Profile */
      .profwrap {
        padding: 24px 4% 80px;
      }

      .profhero {
        flex-direction: column;
        text-align: center;
        padding: 22px;
      }

      .profmeta {
        justify-content: center;
      }

      .bksb {
        position: static;
        margin-top: 0;
        border-radius: 14px;
      }

      /* Dashboard */
      .dashlay {
        grid-template-columns: 1fr;
      }

      .sidebar {
        padding: 8px 0;
      }

      .sbu {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
      }

      .sbav {
        margin-bottom: 0;
        width: 42px;
        height: 42px;
        border-radius: 10px;
      }

      .sbnav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 3px;
        padding: 4px 8px;
        scrollbar-width: none;
      }

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

      .sbsl {
        display: none;
      }

      .ni {
        white-space: nowrap;
        flex-shrink: 0;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: .78rem;
      }

      .dashcon {
        padding: 16px;
      }

      /* Stats */
      .srow {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      /* Wallet */
      .walwrap {
        padding: 24px 4% 80px;
      }

      .walcard {
        padding: 24px;
      }

      .walamt {
        font-size: 2.8rem;
      }

      .topupg {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      /* Chat */
      .chatlay {
        grid-template-columns: 1fr;
      }

      .cpanel {
        height: 240px;
      }

      .chatwin {
        height: calc(100vh - var(--nh) - 240px - 72px);
      }

      /* Edit Profile */
      .editwrap {
        padding: 24px 4% 80px;
      }

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

      .avupld {
        flex-direction: column;
        align-items: flex-start;
      }

      /* Modals */
      .modal {
        border-radius: 16px;
      }

      .mi {
        padding: 24px 18px;
      }

      .mov {
        padding: 12px;
        align-items: flex-end;
      }

      .modal {
        border-radius: 20px 20px 0 0;
        max-height: 96vh;
      }

      .roleg {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      /* Forms */
      .fg {
        margin-bottom: 13px;
      }

      /* Explore */
      .exp {
        padding: 24px 4% 80px;
      }

      .fbar {
        gap: 10px;
        padding: 14px;
      }

      .fgrp {
        min-width: 140px;
      }

      /* Admin */
      .dtbl {
        font-size: .77rem;
      }

      /* Availability grid */
      .avgrid {
        grid-template-columns: repeat(3, 1fr);
      }

      .avdisp {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* ============================================================
       RESPONSIVE — PHONE (480px)
    ============================================================ */
    @media (max-width: 480px) {
      .hero {
        padding: 12% 4% 10%;
      }

      .htitle {
        font-size: clamp(1.7rem, 8vw, 2.2rem);
      }

      .hsub {
        font-size: .88rem;
      }

      .hstats {
        gap: 14px;
      }

      section {
        padding: 44px 4%;
      }

      .cg {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 7px;
      }

      .ccic {
        font-size: 1.8rem;
      }

      .ccn {
        font-size: .8rem;
      }

      .tgrid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .steps {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .srow {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .topupg {
        grid-template-columns: 1fr 1fr;
      }

      .roleg {
        grid-template-columns: 1fr;
      }

      .mi {
        padding: 20px 16px;
      }

      #locWrap {
        width: 115px;
        height: 86px;
        bottom: 74px;
      }

      .tsGrid {
        grid-template-columns: 1fr 1fr;
      }

      .seschat {
        position: absolute;
        inset: 0;
        z-index: 20;
      }

      .fbar {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
      }

      .fgrp {
        min-width: unset;
        width: 100%;
      }

      .profhero {
        padding: 18px;
      }

      .profav {
        width: 70px;
        height: 70px;
        font-size: 1.5rem;
      }

      .profname {
        font-size: 1.3rem;
      }

      .walamt {
        font-size: 2.4rem;
      }

      .bkprice {
        font-size: 1.9rem;
      }

      .navbar .logo {
        font-size: 1.3rem;
      }

      .wchip {
        padding: 5px 10px;
        font-size: .75rem;
      }

      .nav-av {
        width: 32px;
        height: 32px;
        font-size: .8rem;
      }

      .btn {
        padding: 10px 16px;
        font-size: .86rem;
      }

      .btn-sm {
        padding: 8px 13px;
        font-size: .8rem;
      }

      .dashcon {
        padding: 12px;
      }

      .sc {
        padding: 16px;
      }

      .scval {
        font-size: 1.6rem;
      }
    }


    /* Booking cards for mobile */
    .bkcards {
      display: grid;
      gap: 12px;
    }

    .bkcard {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    }

    .bkcard-h {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }

    .bkcard-title {
      font-weight: 800;
      font-size: .95rem;
      line-height: 1.35;
    }

    .bkcard-sub {
      font-size: .74rem;
      color: var(--muted);
      margin-top: 4px;
      line-height: 1.6;
    }

    .bkcard-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    .bkcard-kv {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px 10px;
      align-items: center;
      margin-top: 10px;
      font-size: .82rem;
    }

    .bkcard-kv .k {
      color: var(--muted);
    }

    .bkcard-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }

    @media (max-width: 768px) {
      #page-session {
        min-height: 100dvh;
      }

      #page-session .sesmain {
        flex-direction: column;
        min-height: 0;
      }

      #page-session #remWrap {
        width: 100%;
        min-height: 42vh;
        flex: 1 1 auto;
      }

      #page-session .seschat {
        position: relative;
        inset: auto;
        width: 100%;
        height: 38vh;
        max-height: 320px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
      }

      #page-session .sesctrls {
        padding: 10px 8px;
        flex-wrap: wrap;
        gap: 8px;
      }

      #page-session .cwrap {
        min-width: 74px;
      }

      #locWrap {
        right: 10px;
        bottom: 104px;
        width: 128px;
        height: 96px;
      }

      .dtbl-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    @media (max-width: 480px) {
      #page-session #remWrap {
        min-height: 40vh;
      }

      #page-session .seschat {
        height: 42vh;
      }

      #locWrap {
        width: 96px;
        height: 72px;
        bottom: 98px;
      }

      .bkcard {
        padding: 12px;
      }

      .bkcard-title {
        font-size: .9rem;
      }

      .bkcard-actions .btn {
        width: 100%;
      }

      .bkcard-actions .btn {
        min-width: 92px;
      }
    }

    /* ============================================================
       RESPONSIVE — VERY SMALL PHONE (360px)
    ============================================================ */
    @media (max-width: 360px) {
      .tgrid {
        grid-template-columns: 1fr;
      }

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

      .bottom-nav-inner {
        gap: 0;
      }

      .bn-item {
        padding: 6px 8px;
        min-width: 50px;
      }

      .bn-lbl {
        font-size: .58rem;
      }
    }

    /* ============================================================
       TOUCH / MOBILE UX POLISH
    ============================================================ */
    @media (hover: none) and (pointer: coarse) {

      /* Better touch targets */
      .btn {
        min-height: 44px;
      }

      .btn-sm {
        min-height: 38px;
      }

      .nli {
        min-height: 44px;
      }

      .tsbtn {
        min-height: 42px;
      }

      .cc {
        padding: 20px 12px;
      }

      input,
      textarea,
      select {
        font-size: 16px !important;
      }

      /* prevent iOS zoom */
    }

    /* ============================================================
       ADDITIONAL VISUAL POLISH
    ============================================================ */

    /* Better card hover on desktop only */
    @media (hover: hover) {
      .tc:hover {
        transform: translateY(-8px);
      }

      .cc:hover {
        transform: translateY(-5px);
      }
    }

    /* Smooth focus outlines */
    :focus-visible {
      outline: 3px solid rgba(13, 110, 117, .4);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* Loading screen enhancement */
    #loadScreen {
      background: linear-gradient(145deg, #050d12 0%, #0c2a30 60%, #0d5060 100%);
    }

    /* Improved nav when scrolled */
    .navbar.scrolled {
      box-shadow: 0 2px 20px rgba(0, 0, 0, .10);
    }

    /* Better explore filter bar */
    .fbar-toggle {
      display: none;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-weight: 700;
      font-size: .86rem;
      color: var(--teal);
      padding: 10px 14px;
      background: var(--teal3);
      border-radius: var(--rsm);
      border: 1.5px solid rgba(13, 110, 117, .18);
      transition: all .18s;
      margin-bottom: 12px;
    }

    @media (max-width: 768px) {
      .fbar-toggle {
        display: flex;
      }

      .fbar.collapsed {
        display: none;
      }
    }

    /* Dashboard stat cards improved */
    .sc {
      background: var(--white);
      border-radius: var(--r);
      padding: 20px;
      border: 1.5px solid var(--border);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
      transition: box-shadow .2s, transform .2s;
    }

    .sc:hover {
      box-shadow: 0 6px 20px rgba(0, 0, 0, .09);
    }

    .scic {
      font-size: 1.8rem;
      margin-bottom: 8px;
    }

    .scval {
      font-family: 'Fraunces', serif;
      font-size: 2rem;
      font-weight: 900;
      color: var(--ink);
      line-height: 1;
    }

    .sclbl {
      font-size: .76rem;
      color: var(--muted);
      font-weight: 600;
      margin-top: 5px;
    }

    .sc.acc .scval {
      color: var(--teal);
    }

    .sc.amb .scval {
      color: var(--amber);
    }

    .srow {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 14px;
      margin-bottom: 22px;
    }

    /* Table responsive wrapper */
    .dtbl-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .dtbl {
      width: 100%;
      border-collapse: collapse;
      min-width: 520px;
    }

    .dtbl th,
    .dtbl td {
      padding: 11px 14px;
      text-align: right;
      border-bottom: 1px solid var(--border);
      font-size: .83rem;
    }

    .dtbl th {
      background: var(--cream);
      font-weight: 700;
      font-size: .76rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .dtbl tr:hover td {
      background: var(--cream);
    }

    /* Dashboard section card */
    .dsec {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    }

    /* Booking item in dashboard */
    .bkitem {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      transition: background .15s;
    }

    .bkitem:last-child {
      border-bottom: none;
    }

    .bkitem:hover {
      background: var(--cream);
    }

    /* Improved toast - above bottom nav on mobile */
    @media (max-width: 768px) {
      .toastc {
        bottom: 84px;
      }
    }

    /* Chat panel mobile scroll fix */
    @media (max-width: 768px) {
      .cpanel {
        border-radius: 0;
        height: 200px;
      }

      .chatwin {
        min-height: 340px;
      }

      #page-chat {
        padding-bottom: 72px;
      }
    }

    /* ═══════════ COMPREHENSIVE UI IMPROVEMENTS ═══════════ */

    /* Improved pay tabs */
    .pay-tabs {
      display: flex;
      border-bottom: 2px solid var(--border);
      background: var(--cream);
      overflow-x: auto;
      scrollbar-width: none;
    }

    .pay-tabs::-webkit-scrollbar {
      display: none;
    }

    .pay-tab {
      padding: 11px 14px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: 'Cairo', sans-serif;
      font-weight: 700;
      font-size: .82rem;
      color: var(--muted);
      border-bottom: 2.5px solid transparent;
      margin-bottom: -2px;
      transition: all .18s;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }

    .pay-tab.active {
      color: var(--teal);
      border-bottom-color: var(--teal);
      background: transparent;
    }

    .pay-tab:hover:not(.active) {
      color: var(--ink);
      background: var(--cream2);
    }

    .pay-panel {
      display: none;
      padding-top: 18px;
      animation: pIn .22s ease;
    }

    .pay-panel.active {
      display: block;
    }

    /* Improved info box */
    .pay-info-box {
      background: var(--cream);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 16px;
    }

    .pib-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      gap: 10px;
      flex-wrap: wrap;
    }

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

    .pib-label {
      font-size: .78rem;
      color: var(--muted);
      font-weight: 600;
      flex-shrink: 0;
    }

    .pib-val {
      font-weight: 800;
      font-size: .88rem;
      color: var(--ink);
    }

    .pib-copy {
      background: var(--teal);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: .72rem;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
      font-family: 'Cairo', sans-serif;
      flex-shrink: 0;
    }

    .pib-copy:hover {
      background: var(--teal2);
      transform: scale(1.04);
    }

    /* Amount grid */
    .amt-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }

    .amt-btn {
      border: 2px solid var(--border);
      border-radius: 10px;
      padding: 12px 6px;
      text-align: center;
      cursor: pointer;
      background: var(--white);
      transition: all .2s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .amt-btn:hover {
      border-color: var(--teal);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(13, 110, 117, .15);
    }

    .amt-btn.selected {
      border-color: var(--teal);
      background: var(--teal);
      color: #fff;
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(13, 110, 117, .28);
    }

    .amt-num {
      font-family: 'Fraunces', serif;
      font-size: 1.15rem;
      font-weight: 900;
    }

    .amt-cur {
      font-size: .62rem;
      font-weight: 700;
      opacity: .65;
    }

    .amt-btn.selected .amt-cur {
      opacity: .85;
    }

    /* Improved table in admin */
    .dtbl th {
      background: linear-gradient(135deg, var(--cream), var(--cream2));
    }

    .dtbl tbody tr:hover td {
      background: rgba(13, 110, 117, .04);
    }

    .dtbl td {
      vertical-align: middle;
    }

    /* dsec improvements */
    .dsec {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--r);
      overflow: hidden;
    }

    .dsech {
      padding: 13px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--cream);
    }

    .dsect {
      font-weight: 700;
      font-size: .9rem;
    }

    .dashphdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .dashph {
      font-family: 'Fraunces', serif;
      font-size: 1.3rem;
      font-weight: 700;
    }

    /* Booking time display improvement */
    .bk-time-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--teal3);
      color: var(--teal);
      border-radius: 6px;
      padding: 3px 8px;
      font-size: .72rem;
      font-weight: 700;
    }

    /* Button active state */
    .btn:active {
      transform: scale(.95) !important;
    }

    /* Admin tab active */
    .adminTab.btn-p {
      box-shadow: 0 4px 12px rgba(13, 110, 117, .25);
    }

    /* Pill improvements */
    .pill {
      font-size: .72rem;
      padding: 3px 10px;
      white-space: nowrap;
    }

    /* Withdrawal item */
    .wd-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      gap: 10px;
      flex-wrap: wrap;
    }

    .wd-item:last-child {
      border-bottom: none;
    }

    /* SC (stat card) improvements */
    .sc {
      border-radius: 16px;
      transition: transform .2s, box-shadow .2s;
    }

    .sc:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .09);
    }

    .scval {
      font-family: 'Fraunces', serif;
      line-height: 1.1;
    }

    /* Improved wallet card */
    .walcard {
      background: linear-gradient(145deg, #0c1e2e 0%, #0d4e75 55%, #0d6e75 100%);
    }

    /* Fix modal on small screens */
    @media(max-width:480px) {
      .fr {
        grid-template-columns: 1fr;
      }

      .amt-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .pay-tab {
        padding: 9px 10px;
        font-size: .76rem;
      }
    }



/* ===== Skillak Pro UX overrides ===== */
footer {
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, .10), transparent 24%),
    linear-gradient(180deg, #07161b 0%, #061116 100%);
  padding: 56px 5% 22px;
  color: rgba(255,255,255,.56);
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(160px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.footer-grid > div {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 22px;
  padding: 18px 18px 16px;
  backdrop-filter: blur(10px);
}

footer .logo {
  color: #fff;
  font-size: 1.6rem;
}

.fdesc {
  max-width: none;
  color: rgba(255,255,255,.62);
}

.fh4 {
  color: #fff;
  margin-bottom: 14px;
  font-size: .88rem;
}

.fl {
  margin-bottom: 10px;
  color: rgba(255,255,255,.64);
}

.fl:hover { color: var(--amber); }

.fbot {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 16px;
  color: rgba(255,255,255,.55);
}

/* Better footer responsiveness */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid > div {
    padding: 16px;
  }
  .fbot {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

/* Page visibility safeguard */
.page.hidden {
  display: none !important;
}

/* Photo previews and cropper */
.photo-preview {
  margin-top: 10px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(13,110,117,.08), rgba(245,158,11,.08));
  border: 1px solid rgba(13,110,117,.14);
  padding: 10px;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-preview img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 14px;
}


  .crop-modal{
    width:min(96vw,980px);
    max-width:980px;
    max-height:92vh;
  }

.crop-area {
  width: 100%;
  height: min(68vw, 360px);
  max-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.08);
  margin: 8px 0 16px;
}
.crop-area img {
  max-width: 100%;
  display: block;
}
.crop-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.crop-actions .btn {
  flex: 1 1 120px;
}

/* Admin panels */
.ad-panel {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow: hidden;
}
.ad-panel-hd {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(13,110,117,.05), rgba(245,158,11,.05));
}
.ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  gap: 12px;
}
.ad-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
}
.ad-card strong { display:block; margin-bottom: 8px; }
.ad-card .num { font-size: 1.6rem; font-weight: 900; color: var(--teal); }
.ad-report {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 18px;
}
.ad-report h3 { margin-bottom: 10px; }
.report-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 10px;
}
.report-meta .rm {
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--cream);
  border: 1px solid var(--border);
}
.report-meta .rm span {
  display:block;
  font-size: .74rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.report-meta .rm strong {
  font-size: 1rem;
  color: var(--ink);
}

/* Support chat / pinned item */
.support-pin {
  border: 1px solid rgba(13,110,117,.18);
  background: linear-gradient(135deg, rgba(13,110,117,.08), rgba(245,158,11,.08));
}
.support-pin .ciname {
  color: var(--teal);
  font-weight: 800;
}
.support-pin .ciprev {
  color: #475569;
}



/* Improved crop modal */
  .crop-shell{
    padding:18px;
  }
  .crop-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
  }
  .crop-head .mtitle{
    margin:0;
    font-size:1.15rem;
    font-weight:800;
  }
  .crop-head .msub{
    margin-top:4px;
    color:var(--muted);
    font-size:.82rem;
    line-height:1.7;
  }
  
  
.crop-grid{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) 280px;
    gap:16px;
    align-items:start;
  }
  .crop-stage-wrap{
    min-width:0;
  }
  .crop-stage{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    min-height:320px;
    max-height:min(68vh,560px);
    overflow:hidden;
    border-radius:24px;
    background:
      linear-gradient(45deg,#f3f4f6 25%,transparent 25%) 0 0/18px 18px,
      linear-gradient(-45deg,#f3f4f6 25%,transparent 25%) 0 9px/18px 18px,
      linear-gradient(45deg,transparent 75%,#f3f4f6 75%) 9px -9px/18px 18px,
      linear-gradient(-45deg,transparent 75%,#f3f4f6 75%) -9px 0/18px 18px;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
    touch-action:none;
    user-select:none;
    cursor:grab;
  }
  .crop-stage:active{ cursor:grabbing; }
  .crop-stage::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(to right, rgba(255,255,255,.14), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 76%, rgba(255,255,255,.14)),
      linear-gradient(to bottom, rgba(255,255,255,.14), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 76%, rgba(255,255,255,.14));
  }
  .crop-grid-lines{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(to right, transparent 49.5%, rgba(255,255,255,.32) 49.5%, rgba(255,255,255,.32) 50.5%, transparent 50.5%),
      linear-gradient(to bottom, transparent 49.5%, rgba(255,255,255,.32) 49.5%, rgba(255,255,255,.32) 50.5%, transparent 50.5%);
    opacity:.55;
    mix-blend-mode:screen;
  }
  #cropImage{
    position:absolute;
    left:50%;
    top:50%;
    max-width:none;
    max-height:none;
    will-change:transform;
    transform-origin:center center;
    pointer-events:none;
    -webkit-user-drag:none;
    user-select:none;
    opacity:1;
    display:block;
  }
  .crop-side{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:22px;
    padding:14px;
    box-shadow:var(--sh);
    min-width:0;
  }
  .crop-side h4{
    margin:0 0 10px;
    font-size:.92rem;
  }
  .crop-result{
    width:100%;
    aspect-ratio:1/1;
    border-radius:22px;
    overflow:hidden;
    background:#f8fafc;
    border:1px solid rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .crop-result img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .crop-result-note{
    margin-top:10px;
    color:var(--muted);
    font-size:.78rem;
    line-height:1.7;
  }
  .crop-controls{
    margin-top:14px;
    display:grid;
    gap:10px;
  }
  .crop-zoom{
    display:flex;
    gap:10px;
    align-items:center;
  }
  .crop-zoom input[type="range"]{
    width:100%;
    accent-color:var(--teal);
  }
  .crop-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
  }
  .crop-actions .btn{
    flex:1 1 160px;
  }

  @media (max-width: 900px){
    .crop-grid{
      grid-template-columns:1fr;
    }
    .crop-stage{
      min-height:280px;
      max-height:62vh;
    }
  }
  @media (max-width: 520px){
    .crop-shell{ padding:14px; }
    .crop-modal{
      width:96vw;
      max-height:94vh;
    }
    .crop-head{
      flex-direction:column;
    }
    .crop-actions .btn{
      flex:1 1 100%;
    }
  }


.photo-preview-caption {
  margin-top: 8px;
  font-size: .75rem;
  color: var(--teal);
  font-weight: 700;
  text-align: center;
}
.photo-preview img {
  max-height: 170px;
}

/* Chat sender badge */
.msender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: .71rem;
  font-weight: 800;
  color: var(--teal);
  background: rgba(13,110,117,.08);
  border: 1px solid rgba(13,110,117,.12);
  border-radius: 100px;
  padding: 3px 9px;
}
.mbub.theirs .msender {
  background: rgba(245,158,11,.12);
  color: #92400e;
  border-color: rgba(245,158,11,.16);
}

.photo-preview-large { min-height: 180px; }
.photo-preview-large img { max-height: 260px; }
.report-meta .rm strong { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; unicode-bidi:plaintext; }
.report-meta .rm span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crop-modal .modal { width: min(96vw, 760px); }
.crop-shell { width: min(96vw, 760px); }
.crop-area { min-height: 380px; }
@media (max-width: 768px) {
  .crop-shell { width: 100%; padding: 16px; }
  .crop-area { min-height: 300px; }
  .crop-actions .btn { flex: 1 1 44%; }
  .editwrap { padding: 22px 4%; }
  .avupld { flex-direction: column; align-items: stretch; }
  .avprev { width: 92px; height: 92px; margin: 0 auto; }
  .chatlay { grid-template-columns: 1fr; }
  .cpanel { height: 240px; }
  .chatwin { min-height: 420px; }
  .ciprev { max-width: 100%; }
  .seschat { width: 100%; max-height: 42vh; }
  #page-session .sessionlayout { flex-direction: column; }
  #page-session .seschat { width: 100%; border-right: none; border-top: 1px solid rgba(255,255,255,.07); }
}

/* ════════════════════════════════════════════════
   SKILLAK — Splash / Loading Screen (Logo-based)
   ════════════════════════════════════════════════ */
#loadScreen {
  position: fixed !important;
  inset: 0 !important;
  background: linear-gradient(160deg, #04080f 0%, #071828 55%, #040d14 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  gap: 0 !important;
  transition: opacity .5s ease !important;
  overflow: hidden;
}

/* دائرة ضوئية في الخلفية */
#loadScreen::before {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,110,117,.18) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  pointer-events: none;
}

.skl-splash-logo {
  position: relative;
  margin-bottom: 18px;
}

@keyframes sklLogoPulse {
  0%,100% { transform: scale(1); box-shadow: 0 8px 40px rgba(13,110,117,.4), 0 0 0 1.5px rgba(255,255,255,.08); }
  50%      { transform: scale(1.04); box-shadow: 0 12px 56px rgba(13,110,117,.6), 0 0 0 1.5px rgba(255,255,255,.12); }
}

.skl-splash-name {
  font-family: 'Fraunces', serif;
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  margin-bottom: 4px;
  line-height: 1;
}
.skl-splash-name span { color: #f59e0b; }

.skl-splash-sub {
  font-size: .82rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 28px;
  font-family: 'Cairo', sans-serif;
}

/* شريط تحميل */
.skl-splash-loader {
  width: 160px;
  margin-bottom: 18px;
}
.skl-loader-bar {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
}
.skl-loader-fill {
  height: 100%;
  background: linear-gradient(90deg, #0d6e75, #14b8a6, #f59e0b);
  border-radius: 4px;
  animation: sklBarAnim 1.8s ease-in-out infinite;
  background-size: 200% 100%;
}
@keyframes sklBarAnim {
  0%   { width: 0%; margin-left: 0; }
  50%  { width: 80%; margin-left: 10%; }
  100% { width: 0%; margin-left: 100%; }
}

/* نقاط متحركة */
.skl-splash-dots {
  display: flex;
  gap: 7px;
}
.skl-splash-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(13,110,117,.7);
  animation: sklDotBounce 1.2s ease-in-out infinite;
}
.skl-splash-dots span:nth-child(2) { animation-delay: .2s; background: rgba(20,184,166,.7); }
.skl-splash-dots span:nth-child(3) { animation-delay: .4s; background: rgba(245,158,11,.7); }
@keyframes sklDotBounce {
  0%,80%,100% { transform: scale(.55); opacity: .4; }
  40%         { transform: scale(1);   opacity: 1; }
}

/* ── إخفاء الشاشة ── */
#loadScreen.fading {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════
   NAVBAR — Logo Image
   ════════════════════════════════════════════════ */
.nav-logo-img {
  transition: transform .2s ease;
}
.logo:hover .nav-logo-img {
  transform: rotate(-6deg) scale(1.08);
}

/* ════════════════════════════════════════════════
   PWA Install Banner
   ════════════════════════════════════════════════ */
.pwa-install-banner {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #0a0a1a, #0d1a2e);
  border: 1px solid rgba(13,110,117,.35);
  border-radius: 20px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(13,110,117,.2);
  z-index: 9998;
  max-width: 360px;
  width: 92%;
  font-family: 'Cairo', sans-serif;
  animation: sklBannerSlide .4s cubic-bezier(.25,.46,.45,.94);
}
@keyframes sklBannerSlide {
  from { transform: translateX(-50%) translateY(30px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}
.pwa-banner-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
}
.pwa-banner-text { flex: 1; }
.pwa-banner-title {
  font-weight: 800;
  font-size: .9rem;
  color: #fff;
  margin-bottom: 2px;
}
.pwa-banner-sub {
  font-size: .72rem;
  color: rgba(255,255,255,.5);
}
.pwa-banner-btn {
  background: linear-gradient(135deg, #0d6e75, #14b8a6) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 8px 16px !important;
  font-weight: 800 !important;
  font-size: .82rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: 'Cairo', sans-serif !important;
  box-shadow: 0 3px 12px rgba(13,110,117,.4) !important;
}
.pwa-banner-close {
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,.35) !important;
  cursor: pointer !important;
  font-size: 1.1rem !important;
  padding: 4px !important;
  line-height: 1 !important;
}